/* ═══════════════════════════════════════════════════════════════════════════
   "Premium required" modal — v4 design (2026-09-14)
   Restyles #vt-quota-* (home/includes/search-modals.blade.php) on the site
   palette and styles the plan picker quota-modal.js renders (.qp-*). Loaded
   after main.css, so these rules win on source order; ids video-tool.js /
   results.js drive are unchanged.
   ═══════════════════════════════════════════════════════════════════════════ */

#vt-quota-overlay { background: rgba(22, 22, 29, .6); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
#vt-quota-box {
    /* 700 → 780: at 700 the two body columns came out 287px / 148px, so every
       feature wrapped over three lines. The extra 80px all goes to the feature
       panel via the fixed basis below. */
    max-width: 780px;
    border-radius: 28px;
    background: var(--rv-surface);
    border: 1px solid var(--rv-border);
    box-shadow: 0 40px 100px -30px rgba(80, 63, 205, .5);
    font-family: 'Plus Jakarta Sans', sans-serif;
}

/* ── header ── */
#vt-quota-header {
    background: var(--rv-gradient, linear-gradient(135deg, #5850ec, #8b5cf6));
    padding: 28px 64px 40px 30px;
    gap: 16px;
}
#vt-quota-header::after {
    content: ''; position: absolute; top: -90px; right: -60px; width: 260px; height: 260px; border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 255, 255, .22), transparent 65%); pointer-events: none;
}
#vt-quota-wave path { fill: var(--rv-surface); }
#vt-quota-ico { width: 50px; height: 50px; border-radius: 16px; background: rgba(255, 255, 255, .16); border-color: rgba(255, 255, 255, .28); }
#vt-quota-title { font-size: 1.3rem; font-weight: 800; letter-spacing: -.025em; }
#vt-quota-msg { font-size: .86rem; color: rgba(255, 255, 255, .9); text-shadow: none; }
#vt-quota-close { top: 18px; right: 18px; background: rgba(255, 255, 255, .16); border-color: rgba(255, 255, 255, .26); }

/* ── body: picker + features ──
   TWO columns only. The free-trial band is a sibling of #vt-quota-body now
   (see quota-modal.js) — if it ever reappears in here it becomes a third
   column and the layout collapses again. */
#vt-quota-body { border-bottom: 1px solid var(--rv-border-soft); align-items: stretch; }
#vt-quota-plans { flex: 1 1 auto; min-width: 0; padding: 18px 20px 20px 24px; border-right: 1px solid var(--rv-border-soft); gap: 0; }
/* Fixed basis, not a ratio: the feature copy has a natural minimum width and
   the picker should absorb the slack instead.
   --rv-surface-3 rather than -2: at #fafaff against the white box the panel was
   indistinguishable and the two columns read as one undivided slab.
   Content is centred vertically because the picker column is always the taller
   of the two, which otherwise leaves a dead 100px under the last feature. */
#vt-quota-features-wrap {
    flex: 0 0 300px; min-width: 0; padding: 20px 22px;
    background: var(--rv-surface-3);
    display: flex; flex-direction: column; justify-content: center;
}
/* --rv-body, not --rv-muted: #8e8ea3 on the tinted panel measured 2.99:1,
   under the 4.5 minimum for this size. */
#vt-quota-features-label { font-size: .68rem; letter-spacing: .12em; color: var(--rv-body); margin-bottom: 14px; }
#vt-quota-features { gap: 11px; }
#vt-quota-features li { font-size: .84rem; color: var(--rv-ink-soft); font-weight: 500; line-height: 1.4; align-items: flex-start; }
#vt-quota-features li::before { margin-top: 1px; }
#vt-quota-features li::before {
    width: 20px; height: 20px; border: 1px solid var(--rv-primary-pale);
    background: var(--rv-surface-4) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5' fill='none' stroke='%236d5ce6' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 11px no-repeat;
}

/* ── plan cards ── */
.qp-list { display: flex; flex-direction: column; gap: 10px; }
.qp-plan {
    position: relative;
    display: flex; flex-direction: column; gap: 8px;
    padding: 16px 16px 14px;
    border: 1.5px solid var(--rv-border);
    border-radius: 18px;
    background: var(--rv-surface);
    cursor: pointer;
    transition: border-color .18s, box-shadow .22s, transform .22s cubic-bezier(.23, 1, .32, 1);
}
.qp-plan:hover { border-color: var(--rv-primary-pale); transform: translateY(-1px); box-shadow: 0 14px 30px -22px rgba(80, 63, 205, .5); }
.qp-plan.is-on { border-color: var(--rv-primary); box-shadow: 0 0 0 4px rgba(109, 92, 230, .12), 0 14px 30px -22px rgba(80, 63, 205, .5); }
.qp-plan--creator { background: linear-gradient(160deg, var(--rv-surface), var(--rv-surface-2)); margin-top: 6px; }
.qp-plan__check {
    position: absolute; top: 14px; right: 14px; width: 22px; height: 22px; border-radius: 999px;
    border: 1.5px solid var(--rv-border); background: var(--rv-surface); color: transparent;
    display: inline-flex; align-items: center; justify-content: center; transition: all .16s;
}
.qp-plan.is-on .qp-plan__check { background: var(--rv-gradient, #6d5ce6); border-color: transparent; color: #fff; }
.qp-plan__check svg { width: 11px; height: 11px; }
.qp-plan__badge {
    position: absolute; top: -10px; left: 14px; font-size: 10px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
    color: #fff; background: var(--rv-gradient, #6d5ce6); border-radius: 999px; padding: 3px 10px;
    box-shadow: 0 6px 14px -6px rgba(88, 80, 236, .7);
}
.qp-plan__head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; padding-right: 30px; }
.qp-plan__name { font-size: 11.5px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--rv-muted); }
.qp-plan__price { display: inline-flex; align-items: baseline; gap: 2px; line-height: 1; }
.qp-plan__cur { font-size: 14px; font-weight: 700; color: var(--rv-ink); }
.qp-plan__amt { font-size: 26px; font-weight: 800; letter-spacing: -.04em; color: var(--rv-ink); }
.qp-plan__per { font-size: 12px; color: var(--rv-muted); margin-left: 2px; }
.qp-plan__sub { font-size: 12.5px; font-weight: 600; color: var(--rv-ink-soft); line-height: 1.45; }
.qp-plan__sub strong { color: var(--rv-primary-deep); }
.qp-plan__range { width: 100%; margin: 4px 0 0; accent-color: var(--rv-primary); cursor: pointer; }
.qp-plan__ticks { display: flex; justify-content: space-between; padding: 0 2px; }
.qp-plan__ticks span { font-size: 10.5px; font-weight: 700; color: var(--rv-muted); }
.qp-plan__ticks span.is-on { color: var(--rv-primary-deep); }
.qp-agency {
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    margin-top: 6px; padding: 10px 14px;
    border: 1px dashed var(--rv-border); border-radius: 14px;
    font-size: 12px; color: var(--rv-body); text-decoration: none; transition: border-color .16s, background .16s;
}
.qp-agency b { color: var(--rv-primary-deep); white-space: nowrap; }
.qp-agency:hover { border-color: var(--rv-primary-pale); background: var(--rv-surface-3); text-decoration: none; }

/* ── footer buttons ── */
#vt-quota-actions { padding: 16px 24px 20px; background: var(--rv-surface); }
#vt-quota-cta, #vt-quota-cancel, .vt-quota-btn { border-radius: 999px; padding: 12px 24px; font-family: inherit; font-size: .86rem; font-weight: 700; }
#vt-quota-cancel, .vt-quota-btn-ghost { background: transparent; border: 1.5px solid var(--rv-border); color: var(--rv-body); }
#vt-quota-cancel:hover, .vt-quota-btn-ghost:hover { background: var(--rv-surface-3); border-color: var(--rv-border); color: var(--rv-ink); }
#vt-quota-cta, a.vt-quota-btn-primary {
    background: var(--rv-gradient, linear-gradient(135deg, #5850ec, #8b5cf6));
    color: #fff;
    box-shadow: 0 12px 26px -12px rgba(88, 80, 236, .75);
    transition: transform .18s cubic-bezier(.23, 1, .32, 1), box-shadow .18s;
}
#vt-quota-cta:hover, a.vt-quota-btn-primary:hover { background: var(--rv-gradient, linear-gradient(135deg, #5850ec, #8b5cf6)); color: #fff; transform: translateY(-2px); box-shadow: 0 16px 30px -12px rgba(88, 80, 236, .85); }

@media (max-width: 720px) {
    /* The fixed 300px basis must be released before the columns get narrower
       than the copy they hold. */
    #vt-quota-body { flex-direction: column; }
    /* Stacked, the modal is taller than its own max-height (measured: 841px of
       content in 740px on a 375×812 phone), so the primary CTA started below
       the fold and needed a scroll to reach. #vt-quota-box is the scroll
       container and this is a direct child, so sticky pins it to the bottom
       and the content scrolls underneath it. */
    #vt-quota-actions {
        position: sticky; bottom: 0; z-index: 2;
        background: var(--rv-surface);
        border-top: 1px solid var(--rv-border-soft);
        box-shadow: 0 -10px 20px -14px rgba(22, 22, 29, .28);
    }
    [data-theme="dark"] #vt-quota-actions { border-top-color: var(--rv-border); box-shadow: 0 -10px 20px -14px rgba(0, 0, 0, .7); }
    #vt-quota-plans { border-right: none; border-bottom: 1px solid var(--rv-border-soft); padding: 14px 16px 16px; }
    #vt-quota-features-wrap { flex: 1 1 auto; background: var(--rv-surface-3); padding: 16px 18px; display: block; }
    #vt-quota-features { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 16px; }
}

@media (max-width: 580px) {
    /* Compacted so the footer CTA lands as close to the fold as possible —
       the stacked modal is otherwise slightly taller than the available
       max-height and the primary button starts off-screen. */
    #vt-quota-features { grid-template-columns: 1fr; gap: 9px; }
    #vt-quota-features li { font-size: .82rem; }
    #vt-quota-features-label { margin-bottom: 10px; }
    #vt-quota-features-wrap { padding: 14px 16px; }
    #vt-quota-header { padding: 20px 52px 32px 20px; }
    #vt-quota-box { border-radius: 22px; }
    #vt-quota-plans { padding: 12px 14px 14px; }
    .qp-plan { padding: 13px 14px 12px; gap: 6px; }
    .qp-agency { padding: 9px 12px; }
    #vt-quota-overlay a.qp-trial, .rv-scope a.qp-trial { padding: 11px 16px; gap: 10px; }
    .qp-trial__ico { width: 28px; height: 28px; border-radius: 9px; }
    #vt-quota-actions { padding: 12px 16px 16px; }
}

/* ── dark ── */
[data-theme="dark"] #vt-quota-box { background: var(--rv-surface); border-color: var(--rv-border); box-shadow: 0 40px 100px -30px rgba(0, 0, 0, .85); }
[data-theme="dark"] #vt-quota-header { background: var(--rv-gradient, linear-gradient(135deg, #5850ec, #8b5cf6)); }
[data-theme="dark"] #vt-quota-wave path { fill: var(--rv-surface); }
[data-theme="dark"] #vt-quota-body { border-bottom-color: var(--rv-border); }
[data-theme="dark"] #vt-quota-plans { border-right-color: var(--rv-border); }
[data-theme="dark"] #vt-quota-features-wrap { background: var(--rv-surface-3); }
[data-theme="dark"] #vt-quota-features li { color: var(--rv-ink-soft); }
[data-theme="dark"] #vt-quota-features li::before { background-color: rgba(139, 92, 246, .16); border-color: rgba(139, 92, 246, .35); }
[data-theme="dark"] .qp-plan { background: var(--rv-surface-2); border-color: var(--rv-border); }
[data-theme="dark"] .qp-plan--creator { background: linear-gradient(160deg, var(--rv-surface-2), var(--rv-surface-3)); }
[data-theme="dark"] .qp-plan__check { background: var(--rv-surface-3); border-color: var(--rv-border); }
[data-theme="dark"] .qp-plan__sub strong, [data-theme="dark"] .qp-plan__ticks span.is-on, [data-theme="dark"] .qp-agency b { color: #c4b5fd; }
[data-theme="dark"] .qp-agency { border-color: var(--rv-border); }
[data-theme="dark"] .qp-agency:hover { background: var(--rv-surface-3); }
[data-theme="dark"] #vt-quota-actions { background: var(--rv-surface); }
[data-theme="dark"] #vt-quota-cancel, [data-theme="dark"] .vt-quota-btn-ghost { background: transparent; border-color: var(--rv-border); color: var(--rv-body); }
[data-theme="dark"] #vt-quota-cancel:hover, [data-theme="dark"] .vt-quota-btn-ghost:hover { background: var(--rv-surface-3); color: var(--rv-ink); }

/* ── free-trial band (2026-09-14, rebuilt as a full-width strip) ──
   Sits between #vt-quota-body and #vt-quota-actions. Selectors are
   id-qualified because `.rv-scope a` (0,1,1) outranks a lone class on an <a>. */
#vt-quota-overlay a.qp-trial, .rv-scope a.qp-trial {
    display: flex; align-items: center; gap: 13px;
    margin: 0; padding: 14px 24px;
    background: linear-gradient(100deg, var(--rv-surface-4), var(--rv-surface-2));
    border-bottom: 1px solid var(--rv-border-soft);
    color: var(--rv-body); text-decoration: none; text-align: left;
    transition: background .18s;
}
#vt-quota-overlay a.qp-trial:hover, .rv-scope a.qp-trial:hover { background: linear-gradient(100deg, var(--rv-primary-pale), var(--rv-surface-4)); text-decoration: none; }
.qp-trial__ico {
    flex: 0 0 auto; width: 32px; height: 32px; border-radius: 11px;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--rv-gradient, linear-gradient(135deg, #5850ec, #8b5cf6)); color: #fff;
    box-shadow: 0 8px 18px -10px rgba(88, 80, 236, .9);
}
.qp-trial__ico svg { width: 17px; height: 17px; }
.qp-trial__txt { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
#vt-quota-overlay a.qp-trial b, .rv-scope a.qp-trial b { color: var(--rv-primary-deep); font-weight: 800; font-size: 13.5px; letter-spacing: -.01em; }
.qp-trial__meta { font-size: 11.5px; font-weight: 600; color: var(--rv-muted); }
.qp-trial__go { margin-left: auto; flex: 0 0 auto; font-size: 16px; font-weight: 800; color: var(--rv-primary); transition: transform .18s; }
#vt-quota-overlay a.qp-trial:hover .qp-trial__go, .rv-scope a.qp-trial:hover .qp-trial__go { transform: translateX(3px); }

[data-theme="dark"] #vt-quota-overlay a.qp-trial, [data-theme="dark"] .rv-scope a.qp-trial { background: linear-gradient(100deg, var(--rv-surface-3), var(--rv-surface-2)); border-bottom-color: var(--rv-border); }
[data-theme="dark"] #vt-quota-overlay a.qp-trial:hover, [data-theme="dark"] .rv-scope a.qp-trial:hover { background: linear-gradient(100deg, rgba(139, 92, 246, .22), var(--rv-surface-3)); }
[data-theme="dark"] #vt-quota-overlay a.qp-trial b, [data-theme="dark"] .rv-scope a.qp-trial b { color: #c4b5fd; }
[data-theme="dark"] .qp-trial__go { color: #c4b5fd; }