/*
 * The tutorial video card, link and pop-up player (issue #2226, VID2 — PRD #2224).
 *
 * The markup is `themes/altum/views/partials/tutorial_video.php`.
 *
 * The card is quiet: cream-white surface, a thin border, the cover and the
 * title. The ONE loud thing is the vermilion play button on the cover, so the
 * merchant sees «this is a video» before he reads a word.
 *
 * Everything is logical (inline-start / inline-end), so RTL needs no second rule.
 */

.tv {
    font-family: var(--font-sans-ar, 'Tajawal', sans-serif);
}

/* ---------- Card mode ---------- */

.tv-card {
    display: flex;
    align-items: center;
    gap: var(--sp-4, 16px);
    inline-size: 100%;
    max-inline-size: 460px;
    padding: var(--sp-3, 12px);
    background: var(--surface, #fff);
    border: 1px solid var(--border, #eee4da);
    border-radius: var(--r-lg, 12px);
    color: var(--text, #303030);
    text-align: start;
    cursor: pointer;
    font: inherit;
    /* Issue #2326: a link now, not a button. */
    text-decoration: none;
}

.tv-card:hover {
    border-color: var(--brand-300, #fe9f87);
}

.tv-card:focus-visible,
.tv-link:focus-visible,
.tv-modal__close:focus-visible {
    outline: 2px solid var(--brand-500, #FD3F0F);
    outline-offset: 2px;
}

.tv-card__cover {
    position: relative;
    flex: 0 0 auto;
    inline-size: 128px;
    aspect-ratio: 16 / 9;
    border-radius: var(--r-md, 8px);
    overflow: hidden;
    background: var(--surface-2, #f5efe9);
}

.tv-card__cover img {
    display: block;
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
}

.tv-card__play {
    position: absolute;
    inset: 0;
    margin: auto;
    inline-size: 40px;
    block-size: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--brand-500, #FD3F0F);
    color: #fff;
    font-size: 0.875rem;
    box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.85);
}

/* The play triangle looks off-centre in a circle; nudge it to the right side
   of the circle, whatever the page direction. */
.tv-card__play i {
    margin-left: 3px;
}

.tv-card__body {
    display: flex;
    flex-direction: column;
    gap: var(--sp-1, 4px);
    min-inline-size: 0;
}

.tv-card__title {
    font-weight: 700;
    font-size: 0.975rem;
    line-height: 1.5;
}

.tv-card__length {
    font-size: 0.8125rem;
    color: var(--text-muted, #6b6259);
}

/* ---------- Link mode ---------- */

.tv-link {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2, 8px);
    padding: 0;
    background: none;
    border: 0;
    color: var(--brand-600, #E5350C);
    font: inherit;
    font-size: 0.875rem;
    font-weight: 700;
    cursor: pointer;
}

/* Issue #2326: the card and the link are <a>, so the link look is reset. */
.tv-card:hover,
.tv-card:focus {
    color: var(--text, #303030);
    text-decoration: none;
}

.tv-link:hover {
    text-decoration: underline;
}

.tv-link__icon {
    font-size: 0.7rem;
}

/* ---------- The pop-up ---------- */

.tv-modal {
    padding: 0;
    border: 0;
    background: transparent;
    max-inline-size: min(960px, 94vw);
    inline-size: 100%;
}

.tv-modal::backdrop {
    background: rgba(48, 48, 48, 0.72);
}

.tv-modal__box {
    background: var(--surface, #fff);
    border-radius: var(--r-lg, 12px);
    overflow: hidden;
}

.tv-modal__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-3, 12px);
    padding: var(--sp-3, 12px) var(--sp-4, 16px);
}

.tv-modal__title {
    margin: 0;
    font-weight: 700;
    font-size: 1rem;
    color: var(--text, #303030);
}

.tv-modal__close {
    flex: 0 0 auto;
    inline-size: 36px;
    block-size: 36px;
    border: 0;
    border-radius: 50%;
    background: var(--surface-2, #f5efe9);
    color: var(--text, #303030);
    cursor: pointer;
}

.tv-modal__video {
    display: block;
    inline-size: 100%;
    aspect-ratio: 16 / 9;
    background: #000;
}

/* A narrow screen plays the 9:16 file, so the box turns tall. The height cap
   keeps the × on screen. */
.tv--narrow .tv-modal {
    max-inline-size: min(420px, 94vw);
}

.tv--narrow .tv-modal__video {
    aspect-ratio: 9 / 16;
    max-block-size: calc(100vh - 120px);
}

/* ---------- Page cards (issue #2227, VID3) ---------- */

/* The card on the page where the step happens. Only a little space around
   it, so it never pushes the page's main button down on a phone. */
.tv-spot {
    margin-block: var(--sp-4, 16px);
}

/* The two doors page is centred, so its card is centred too. */
.tv-spot--create_native .tv-card {
    margin-inline: auto;
}

/* ---------- Big card: the main video of a page (two-doors page) ---------- */

/* Wide card, large cover, the short line and a clear call to watch. Still
   one quiet surface; the loud parts are the play button and the call. */
.tv-card--big {
    max-inline-size: 760px;
    gap: var(--sp-5, 20px);
    padding: var(--sp-4, 16px);
    border-radius: var(--r-xl, 16px);
    border-color: var(--brand-200, #fed0c3);
    box-shadow: 0 10px 30px rgba(48, 30, 20, 0.08);
}

.tv-card--big .tv-card__cover {
    inline-size: 300px;
    border-radius: var(--r-lg, 12px);
}

.tv-card--big .tv-card__play {
    inline-size: 64px;
    block-size: 64px;
    font-size: 1.25rem;
    box-shadow: 0 0 0 6px rgba(255, 255, 255, 0.85), 0 8px 20px rgba(253, 63, 15, 0.35);
}

.tv-card--big .tv-card__title {
    font-size: 1.25rem;
    font-weight: 800;
}

.tv-card__line {
    font-size: 0.9375rem;
    line-height: 1.6;
    color: var(--text-muted, #6b6259);
}

.tv-card__cta {
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2, 8px);
    margin-block-start: var(--sp-2, 8px);
    padding: 8px 18px 6px;
    border-radius: 999px;
    background: var(--brand-500, #FD3F0F);
    color: #fff;
    font-weight: 700;
    font-size: 0.9375rem;
}

.tv-card--big:hover .tv-card__cta {
    background: var(--brand-600, #E5350C);
}

/* The two-doors page: a little air between the question and the doors. */
.tv-spot--create_native {
    margin-block: var(--sp-4, 16px) var(--sp-6, 24px);
}

/* Phone: the cover on top, full width, the text under it. */
@media (max-width: 640px) {
    .tv-card--big {
        flex-direction: column;
        align-items: stretch;
        gap: var(--sp-3, 12px);
        padding: var(--sp-3, 12px);
    }

    .tv-card--big .tv-card__cover {
        inline-size: 100%;
    }

    .tv-card--big .tv-card__line {
        display: none;
    }
}

/* ---------- Help panel and help articles (issue #2229, VID5) ---------- */

/* First thing in the help panel. The panel is narrow, so the card takes its
   whole width. */
.tv-spot--help_panel {
    margin-block: 0 var(--sp-4, 16px);
}

.tv-spot--help_panel .tv-card {
    max-inline-size: none;
}

/* First thing in the article, above the first heading. */
.tv-spot--help_article {
    margin-block: 0 var(--sp-6, 24px);
}