/**
 * Page Designer — Video Settings Panel — dedicated styles
 * v1.0.0 (introduced in PAGE_DESIGNER_VERSION 2.6.66)
 *
 * Visually mirrors the Image Settings Panel layout (right-side slide-out
 * rail, header, accordion sections, reset button) but uses a 100%
 * dedicated `.pd-vid-pnl-*` namespace. The panel-chrome rules below
 * are deliberately DUPLICATED locally instead of reusing the shared
 * `.pd-dsp-*` or `.pd-img-pnl-*` base — this honours the project's
 * "no shared CSS classes between tools" rule.
 *
 * Every selector in this file is prefixed `.pd-vid-pnl-`. There is no
 * overlap with `.pd-dsp-*`, `.pd-typ-*`, `.pd-blk-*`, `.pd-img-pnl-*`,
 * or any other tool's namespace.
 */

/* ── Panel root (right-side slide-out rail) ───────────────────────── */
.pd-vid-pnl-root {
    position: fixed;
    top: 50px;
    right: -340px;            /* hidden off-screen */
    width: 300px;
    height: calc(100vh - 50px);
    background: var(--at-color-background);
    border-left: 1px solid var(--at-color-border);
    box-shadow: -4px 0 24px color-mix(in srgb, var(--at-color-foreground) 40%, transparent);
    z-index: 9000;
    display: flex;
    flex-direction: column;
    transition: right 0.25s ease;
    color: var(--at-color-card-foreground);
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    overflow: hidden;
}
.pd-vid-pnl-root.pd-vid-pnl-visible {
    right: 0;
}

/* ── Header ───────────────────────────────────────────────────────── */
.pd-vid-pnl-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    background: var(--at-color-card);
    border-bottom: 1px solid var(--at-color-border);
    flex: 0 0 auto;
}
.pd-vid-pnl-title {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 600;
    color: var(--at-color-card-foreground);
}
.pd-vid-pnl-title .fa {
    color: var(--at-color-primary);
    font-size: 13px;
}
.pd-vid-pnl-close {
    background: transparent;
    border: none;
    padding: 4px 9px;
    color: var(--at-color-card-foreground);
    font-size: 13px;
    cursor: pointer;
    border-radius: 4px;
    transition: all 0.15s;
}
.pd-vid-pnl-close:hover {
    color: var(--at-color-destructive-ink);
    background: var(--at-color-secondary);
}

/* ── Body (scrolls) ───────────────────────────────────────────────── */
.pd-vid-pnl-body {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: 12px 14px 24px;
}
.pd-vid-pnl-body::-webkit-scrollbar {
    width: 8px;
}
.pd-vid-pnl-body::-webkit-scrollbar-track {
    background: var(--at-color-card);
}
.pd-vid-pnl-body::-webkit-scrollbar-thumb {
    background: var(--at-color-secondary);
    border-radius: 4px;
}
.pd-vid-pnl-body::-webkit-scrollbar-thumb:hover {
    background: var(--at-color-muted);
}

/* ── Reset to Default button ──────────────────────────────────────── */
.pd-vid-pnl-reset {
    width: 100%;
    background: var(--at-color-destructive);
    color: var(--at-color-destructive-foreground);
    border: 1px solid color-mix(in srgb, var(--at-color-destructive) 25%, transparent);
    border-radius: 6px;
    padding: 9px 12px;
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s;
    margin-bottom: 12px;
    font-family: inherit;
}
.pd-vid-pnl-reset:hover {
    background: var(--at-color-destructive);
    border-color: color-mix(in srgb, var(--at-color-destructive) 40%, transparent);
}
.pd-vid-pnl-reset .fa {
    margin-right: 5px;
}

/* ── Accordion sections ───────────────────────────────────────────── */
.pd-vid-pnl-section {
    border-top: 1px solid var(--at-color-border);
    margin: 0 -14px;
}
.pd-vid-pnl-section:last-child {
    border-bottom: 1px solid var(--at-color-border);
}
.pd-vid-pnl-section-header {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 11px 16px;
    cursor: pointer;
    user-select: none;
    transition: background 0.12s;
}
.pd-vid-pnl-section-header:hover {
    background: var(--at-color-muted);
}
.pd-vid-pnl-section-icon {
    color: var(--at-color-primary);
    font-size: 12px;
    width: 14px;
    text-align: center;
}
.pd-vid-pnl-section-title {
    flex: 1 1 auto;
    font-size: 12px;
    font-weight: 600;
    color: var(--at-color-card-foreground);
}
.pd-vid-pnl-section-arrow {
    color: var(--at-color-card-foreground);
    font-size: 10px;
    transition: transform 0.18s;
}
.pd-vid-pnl-section-open .pd-vid-pnl-section-arrow {
    transform: rotate(180deg);
}
.pd-vid-pnl-section-body {
    display: none;
    padding: 4px 16px 14px;
    flex-direction: column;
    gap: 11px;
}
.pd-vid-pnl-section-open .pd-vid-pnl-section-body {
    display: flex;
}

/* ── Generic field row ────────────────────────────────────────────── */
.pd-vid-pnl-field {
    display: flex;
    flex-direction: column;
    gap: 5px;
}
.pd-vid-pnl-field-label {
    font-size: 10px;
    font-weight: 600;
    color: var(--at-color-card-foreground);
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

/* ── Inputs / selects / textareas ─────────────────────────────────── */
.pd-vid-pnl-input {
    width: 100%;
    box-sizing: border-box;
    padding: 8px 10px;
    background: var(--at-color-input);
    color: var(--at-color-card-foreground);
    border: 1px solid var(--at-color-border);
    border-radius: 5px;
    font-size: 12px;
    font-family: inherit;
    outline: none;
    transition: border-color 0.15s, background 0.15s;
}
.pd-vid-pnl-input:focus {
    border-color: var(--at-color-primary);
    background: var(--at-color-background);
}
.pd-vid-pnl-input::placeholder {
    color: var(--at-color-card-foreground);
}
.pd-vid-pnl-select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image:
        linear-gradient(45deg, transparent 50%, var(--at-color-primary) 50%),
        linear-gradient(135deg, var(--at-color-primary) 50%, transparent 50%);
    background-position:
        calc(100% - 14px) 50%,
        calc(100% - 9px) 50%;
    background-size: 5px 5px;
    background-repeat: no-repeat;
    padding-right: 28px;
    cursor: pointer;
}

/* ── Field hint text ──────────────────────────────────────────────── */
.pd-vid-pnl-field-hint {
    font-size: 10.5px;
    color: var(--at-color-card-foreground);
    line-height: 1.5;
    margin-top: 4px;
}
.pd-vid-pnl-field-hint code {
    background: var(--at-color-input);
    color: var(--at-color-status-warning-ink);
    padding: 1px 5px;
    border-radius: 3px;
    font-size: 10px;
}
.pd-vid-pnl-field-hint strong {
    color: var(--at-color-card-foreground);
    font-weight: 600;
}

/* ── Autoplay policy notice (PAGE_DESIGNER_VERSION 2.9.37) ────────
   Dedicated namespace `pd-vid-pnl-autoplay-note` — local to the
   video block, no shared classes. Uses Catppuccin mauve accent to
   visually separate the notice from the generic help callout. */
.pd-vid-pnl-autoplay-note {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    font-size: 11px;
    color: var(--at-color-card-foreground);
    line-height: 1.5;
    background: var(--at-color-card);
    border: 1px solid var(--at-color-border);
    border-left: 3px solid var(--at-color-border);
    border-radius: 4px;
    padding: 8px 10px;
    margin-bottom: 12px;
}
.pd-vid-pnl-autoplay-note i {
    color: var(--at-color-card-foreground);
    font-size: 13px;
    line-height: 1.5;
    flex-shrink: 0;
}
.pd-vid-pnl-autoplay-note b {
    color: var(--at-color-card-foreground);
    font-weight: 700;
}

/* ── Help callout ─────────────────────────────────────────────────── */
.pd-vid-pnl-help {
    font-size: 11px;
    color: var(--at-color-card-foreground);
    line-height: 1.5;
    background: var(--at-color-card);
    border: 1px solid var(--at-color-border);
    border-left: 3px solid var(--at-color-primary);
    border-radius: 4px;
    padding: 8px 10px;
    margin-bottom: 12px;
}

/* ── Toggle switch row ────────────────────────────────────────────── */
.pd-vid-pnl-toggle-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 4px 0;
}
.pd-vid-pnl-toggle-label {
    font-size: 11px;
    font-weight: 500;
    color: var(--at-color-card-foreground);
}
.pd-vid-pnl-toggle {
    position: relative;
    width: 36px;
    height: 20px;
    flex: 0 0 36px;
}
.pd-vid-pnl-toggle input {
    opacity: 0;
    width: 0;
    height: 0;
    position: absolute;
}
.pd-vid-pnl-toggle-track {
    position: absolute;
    inset: 0;
    background: var(--at-color-secondary);
    border-radius: 10px;
    cursor: pointer;
    transition: background 0.2s;
}
.pd-vid-pnl-toggle-track::after {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    width: 16px;
    height: 16px;
    background: var(--at-color-muted-foreground);
    border-radius: 50%;
    transition: transform 0.2s, background 0.2s;
}
.pd-vid-pnl-toggle input:checked + .pd-vid-pnl-toggle-track {
    background: var(--at-color-primary);
}
.pd-vid-pnl-toggle input:checked + .pd-vid-pnl-toggle-track::after {
    transform: translateX(16px);
    background: var(--at-color-background);
}

/* ── Provider segmented control ───────────────────────────────────── */
.pd-vid-pnl-provider {
    display: flex;
    gap: 0;
    border: 1px solid var(--at-color-border);
    border-radius: 5px;
    overflow: hidden;
}
.pd-vid-pnl-provider-btn {
    flex: 1;
    background: var(--at-color-input);
    border: none;
    border-right: 1px solid var(--at-color-border);
    color: var(--at-color-card-foreground);
    cursor: pointer;
    padding: 8px 4px;
    font-size: 10px;
    font-weight: 600;
    transition: all 0.15s;
    font-family: inherit;
    white-space: nowrap;
}
.pd-vid-pnl-provider-btn:last-child {
    border-right: none;
}
.pd-vid-pnl-provider-btn:hover {
    color: var(--at-color-card-foreground);
    background: var(--at-color-background);
}
.pd-vid-pnl-provider-btn-active {
    background: var(--at-color-primary);
    color: var(--at-color-primary-foreground);
}

/* ── Source field row (URL + poster upload) ────────────────────────── */
.pd-vid-pnl-src-row {
    display: flex;
    gap: 6px;
    align-items: stretch;
}
.pd-vid-pnl-src-row .pd-vid-pnl-input {
    flex: 1 1 auto;
    min-width: 0;
}

/* ── Poster upload button + Browse stock video button ──────────────
 * Both styled identically to .pd-img-pnl-src-btn (Image panel's upload
 * button) so the two block panels are visually consistent under the
 * active admin theme. NO hardcoded colors — every value flows through
 * --at-color-* theme tokens. */
.pd-vid-pnl-poster-btn,
.pd-vid-pnl-stock-btn {
    flex: 0 0 auto;
    background: var(--at-color-primary);
    color: var(--at-color-primary-foreground);
    border: 1px solid var(--at-color-border);
    border-radius: 5px;
    padding: 0 12px;
    font-size: 13px;
    cursor: pointer;
    transition: all 0.15s;
    font-family: inherit;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
}
.pd-vid-pnl-poster-btn:hover,
.pd-vid-pnl-stock-btn:hover {
    background: color-mix(in srgb, var(--at-color-primary) 85%, var(--at-color-foreground));
    border-color: color-mix(in srgb, var(--at-color-primary) 85%, var(--at-color-foreground));
    color: var(--at-color-primary-foreground);
}

/* ── Aspect ratio preset buttons ──────────────────────────────────── */
.pd-vid-pnl-aspect {
    display: flex;
    gap: 0;
    border: 1px solid var(--at-color-border);
    border-radius: 5px;
    overflow: hidden;
}
.pd-vid-pnl-aspect-btn {
    flex: 1;
    background: var(--at-color-input);
    border: none;
    border-right: 1px solid var(--at-color-border);
    color: var(--at-color-card-foreground);
    cursor: pointer;
    padding: 8px 4px;
    font-size: 10px;
    font-weight: 600;
    transition: all 0.15s;
    font-family: inherit;
    white-space: nowrap;
}
.pd-vid-pnl-aspect-btn:last-child {
    border-right: none;
}
/* v2.9.43: hover now matches the active state (Catppuccin blue),
   same treatment as the alignment segmented control — hover previews
   the selection colour so the segmented group feels consistent. */
.pd-vid-pnl-aspect-btn:hover,
.pd-vid-pnl-aspect-btn-active {
    background: var(--at-color-primary);
    color: var(--at-color-primary-foreground);
}
/* Full-bleed button — slightly wider than the numeric ratio labels */
.pd-vid-pnl-aspect-btn-full {
    flex: 1.25;
}

/* ── Size slider rows ─────────────────────────────────────────────── */
.pd-vid-pnl-size-card {
    background: var(--at-color-input);
    border: 1px solid var(--at-color-border);
    border-radius: 7px;
    padding: 8px 12px 12px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.pd-vid-pnl-size-row {
    display: grid;
    grid-template-columns: 50px 1fr 48px 18px;
    align-items: center;
    gap: 8px;
}
.pd-vid-pnl-size-label {
    font-size: 11px;
    font-weight: 600;
    color: var(--at-color-card-foreground);
}
.pd-vid-pnl-size-slider {
    width: 100%;
    accent-color: var(--at-color-primary);
    cursor: pointer;
    margin: 0;
}
.pd-vid-pnl-size-num {
    width: 100%;
    box-sizing: border-box;
    background: var(--at-color-card);
    color: var(--at-color-card-foreground);
    border: 1px solid var(--at-color-border);
    border-radius: 4px;
    padding: 5px 6px;
    font-size: 11px;
    font-family: inherit;
    text-align: center;
    outline: none;
    -moz-appearance: textfield;
}
.pd-vid-pnl-size-num::-webkit-outer-spin-button,
.pd-vid-pnl-size-num::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
.pd-vid-pnl-size-num:focus {
    border-color: var(--at-color-primary);
    background: var(--at-color-background);
}
.pd-vid-pnl-size-unit {
    font-size: 10px;
    color: var(--at-color-card-foreground);
}

/* ── Color picker (Vimeo accent) ──────────────────────────────────── */
.pd-vid-pnl-color {
    width: 100%;
    height: 32px;
    box-sizing: border-box;
    background: var(--at-color-input);
    border: 1px solid var(--at-color-border);
    border-radius: 5px;
    padding: 0;
    cursor: pointer;
}
.pd-vid-pnl-color:focus {
    border-color: var(--at-color-primary);
}
.pd-vid-pnl-color::-webkit-color-swatch-wrapper {
    padding: 0;
}
.pd-vid-pnl-color::-webkit-color-swatch {
    border: none;
    border-radius: 3px;
}

/* ── Conditional section visibility ───────────────────────────────── */
.pd-vid-pnl-hidden {
    display: none !important;
}

/* ── Fullscreen-restriction tooltip (PAGE_DESIGNER_VERSION 2.9.51) ──
   Surfaced when the user clicks Fullscreen inside a 2+-col row. The
   Option B guardrail silently falls back to "fill this column" and
   shows this tip to explain the swap. Dedicated namespace
   `pd-vid-pnl-fs-tip*` — grep-confirmed unique, duplicated chrome,
   no shared selectors with other panels. Catppuccin peach accent so
   it reads as an info-warning distinct from the blue-accented
   alignment / aspect controls. */
.pd-vid-pnl-fs-tip {
    display: none;
    align-items: flex-start;
    gap: 8px;
    font-size: 11px;
    color: var(--at-color-card-foreground);
    line-height: 1.45;
    background: var(--at-color-card);
    border: 1px solid var(--at-color-border);
    border-left: 3px solid var(--at-color-status-warning);
    border-radius: 4px;
    padding: 8px 10px;
    margin-top: 8px;
}
.pd-vid-pnl-fs-tip.pd-vid-pnl-fs-tip-visible {
    display: flex;
    animation: pdVidFsTipIn 0.2s ease;
}
.pd-vid-pnl-fs-tip i {
    color: var(--at-color-status-warning-ink);
    font-size: 13px;
    line-height: 1.45;
    flex-shrink: 0;
}
@keyframes pdVidFsTipIn {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ── Alignment segmented control (PAGE_DESIGNER_VERSION 2.9.39) ────
   Dedicated namespace `pd-vid-pnl-align*`. Structurally identical to
   the Image panel's alignment control but owns its own classes — the
   "no shared CSS between tools" rule applies even when two controls
   look identical. Catppuccin palette matches the rest of this panel
   so the block feels visually unified without leaking cross-tool state. */
.pd-vid-pnl-align {
    display: flex;
    gap: 0;
    border: 1px solid var(--at-color-border);
    border-radius: 5px;
    overflow: hidden;
}
.pd-vid-pnl-align-btn {
    flex: 1;
    background: var(--at-color-input);
    border: none;
    border-right: 1px solid var(--at-color-border);
    color: var(--at-color-card-foreground);
    cursor: pointer;
    padding: 8px 0;
    font-size: 13px;
    transition: all 0.15s;
    font-family: inherit;
}
.pd-vid-pnl-align-btn:last-child {
    border-right: none;
}
/* v2.9.41: hover now matches the active state (Catppuccin blue) so
   mousing over a button previews the selection colour. Mirrors the
   Image panel's hover-preview behaviour under the video namespace. */
.pd-vid-pnl-align-btn:hover,
.pd-vid-pnl-align-btn-active {
    background: var(--at-color-primary);
    color: var(--at-color-primary-foreground);
}

/* ── Responsive: narrower viewport ────────────────────────────────── */
@media (max-width: 720px) {
    .pd-vid-pnl-root {
        width: 92vw;
        right: -100vw;
    }
}