/**
 * PSDM Designer Bridge — options-panel polish + FOUC guard.
 *
 * Scoped to the PrintCart designer page (body.nbd-mode-modern) and the
 * injected options panel (#nbo-options-wrap) ONLY. Never touches the normal
 * product page (which is body.single-product, a different container).
 *
 * Loaded by class-psdm-designer-bridge.php -> enqueue_coordinator(), printed
 * via the bridge's wp_styles()->do_items() diff. Reveal handled by
 * psdm-designer-bridge.js adding .psdm-designer-enhanced to #nbo-options-wrap.
 *
 * @package PSDM
 */

:root {
    --psdm-d-radius: 10px;
    --psdm-d-radius-sm: 8px;
    --psdm-d-border: #e5e7eb;
    --psdm-d-border-soft: #eef0f3;
    --psdm-d-bg: #ffffff;
    --psdm-d-bg-soft: #f8f9fb;
    --psdm-d-ink: #374151;
    --psdm-d-ink-soft: #6b7280;
    --psdm-d-accent: #3b82f6;
    --psdm-d-label-w: 128px;
    --psdm-d-gap: 14px;
    --psdm-d-reveal: 0.45s;
}

/* 1. FOUC GUARD — hide the raw quick-view content behind a skeleton until the
 * bridge marks the panel enhanced, then fade in. The 7s `psdm-fouc-content-reveal`
 * keyframe is a pure-CSS failsafe that force-reveals even if the JS never runs;
 * the JS fast-path (.psdm-designer-enhanced) overrides it instantly. */
body.nbd-mode-modern #nbo-options-wrap > .woocommerce.quick-view,
body.nbd-mode-modern #nbo-options-wrap > .woocommerce {
    opacity: 0;
    transition: opacity var(--psdm-d-reveal) ease;
    animation: psdm-fouc-content-reveal 0.01s linear 7s forwards;
}

/* Skeleton shimmer placeholder shown while we wait. */
body.nbd-mode-modern #nbo-options-wrap::before {
    content: "";
    display: block;
    height: 360px;
    margin: 0;
    border-radius: var(--psdm-d-radius);
    background:
        linear-gradient(100deg, transparent 30%, rgba(255, 255, 255, 0.65) 50%, transparent 70%),
        repeating-linear-gradient(
            to bottom,
            #eceef1 0, #eceef1 56px,
            transparent 56px, transparent 72px
        );
    background-size: 200% 100%, 100% 100%;
    animation: psdm-skeleton 1.25s ease-in-out infinite;
}

/* Enhanced (or failsafe fired): reveal content + drop skeleton. `animation:none`
   cancels the 7s failsafe so this opacity wins immediately. */
body.nbd-mode-modern #nbo-options-wrap.psdm-designer-enhanced > .woocommerce.quick-view,
body.nbd-mode-modern #nbo-options-wrap.psdm-designer-enhanced > .woocommerce,
body.nbd-mode-modern #nbo-options-wrap.psdm-fouc-revealed > .woocommerce.quick-view,
body.nbd-mode-modern #nbo-options-wrap.psdm-fouc-revealed > .woocommerce {
    opacity: 1;
    animation: none;
}

body.nbd-mode-modern #nbo-options-wrap.psdm-designer-enhanced::before,
body.nbd-mode-modern #nbo-options-wrap.psdm-fouc-revealed::before {
    display: none;
}

@keyframes psdm-skeleton {
    0%   { background-position: -150% 0, 0 0; }
    100% { background-position: 150% 0, 0 0; }
}

/* Pure-CSS failsafe keyframe (referenced above): forces content visible at 7s. */
@keyframes psdm-fouc-content-reveal {
    to { opacity: 1; }
}

/* 2. PANEL RHYTHM + LABEL/FIELD ALIGNMENT — fixed label column so every field
 * left-edge lines up; consistent vertical spacing between rows. */
body.nbd-mode-modern #nbo-options-wrap form.variations_form table.variations,
body.nbd-mode-modern #nbo-options-wrap form.variations_form table.variations tbody {
    display: block;
    width: 100%;
}

body.nbd-mode-modern #nbo-options-wrap form.variations_form table.variations tr {
    display: flex !important;
    flex-direction: row !important;
    align-items: center;
    gap: var(--psdm-d-gap);
    width: 100%;
    margin: 0 0 7px !important;
    padding: 9px 12px !important;
    border: 1px solid var(--psdm-d-border-soft) !important;
    border-radius: var(--psdm-d-radius-sm);
    background: var(--psdm-d-bg);
    box-sizing: border-box;
}

body.nbd-mode-modern #nbo-options-wrap form.variations_form table.variations tr:last-child {
    margin-bottom: 0 !important;
}

body.nbd-mode-modern #nbo-options-wrap form.variations_form table.variations td.label,
body.nbd-mode-modern #nbo-options-wrap form.variations_form table.variations th.label {
    display: block !important;
    flex: 0 0 var(--psdm-d-label-w);
    width: var(--psdm-d-label-w);
    max-width: var(--psdm-d-label-w);
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    font-weight: 600;
    font-size: 14.5px;
    line-height: 1.35;
    color: var(--psdm-d-ink);
    word-break: break-word;
}

/* Visible label text lives in this <label>; a theme/cascade rule shrinks it to
 * ~8.75px after load, so force a stable legible size (td.label sizes the cell). */
body.nbd-mode-modern #nbo-options-wrap form.variations_form table.variations td.label label {
    font-weight: 600;
    font-size: 15px !important;
    line-height: 1.35 !important;
    margin: 0;
}

/* Hide the duplicate "selected value" the theme appends in the label cell. */
body.nbd-mode-modern #nbo-options-wrap form.variations_form table.variations td.label .selected-value {
    display: none !important;
}

body.nbd-mode-modern #nbo-options-wrap form.variations_form table.variations td.value {
    display: block !important;
    flex: 1 1 auto;
    min-width: 0;
    margin: 0 !important;
    padding: 0 !important;
}

body.nbd-mode-modern #nbo-options-wrap form.variations_form table.variations td.value select {
    width: 100% !important;
    box-sizing: border-box;
    font-size: 14.5px !important;
    min-height: 40px;
    padding: 8px 10px !important;
    line-height: 1.3;
}

/* 3. CASCADE-LOCKED ROWS — read as intentionally disabled (locking itself stays
 * owned by the cascade-lock script; we only style). */
body.nbd-mode-modern #nbo-options-wrap form.variations_form table.variations tr.cascade-locked {
    opacity: 1 !important;            /* override the harsh 0.45 global */
    background: var(--psdm-d-bg-soft) !important;
    border-color: var(--psdm-d-border) !important;
}

body.nbd-mode-modern #nbo-options-wrap form.variations_form table.variations tr.cascade-locked td.label {
    color: #9ca3af;
}

body.nbd-mode-modern #nbo-options-wrap form.variations_form table.variations tr.cascade-locked td.value select {
    background-color: #f1f2f4 !important;
    border-color: var(--psdm-d-border) !important;
    color: #9ca3af !important;
    cursor: not-allowed !important;
    box-shadow: none !important;
}

/* 4. HIDDEN ROWS — re-assert display:none over the base `tr` flex !important rule:
 * empty rows, RPS auto-hidden whitelist rows, and the inactive Foil Type row. */
body.nbd-mode-modern #nbo-options-wrap form.variations_form table.variations tr.psdm-empty-row,
body.nbd-mode-modern #nbo-options-wrap form.variations_form table.variations tr.psdm-turnaround-hidden,
body.nbd-mode-modern #nbo-options-wrap form.variations_form table.variations tr.rps-auto-hidden,
body.nbd-mode-modern #nbo-options-wrap form.variations_form table.variations tr.rps-foil-type-row:not(.rps-foil-active),
body.nbd-mode-modern #nbo-options-wrap form.variations_form table.variations tr:not(:has(select)):not(:has(.tav-custom-interface)):not(:has(.value > *)) {
    display: none !important;
}

/* 5. WISHLIST + STANDALONE WC QUANTITY/ADD-TO-CART — not part of the designer
 * flow (it ships via the top-bar "Process" button). Wishlist removed; qty/cart
 * kept in the DOM (clipped) so any name="quantity" reads survive. */
body.nbd-mode-modern #nbo-options-wrap .product-button--wishlist,
body.nbd-mode-modern #nbo-options-wrap .yith-wcwl-add-to-wishlist,
body.nbd-mode-modern #nbo-options-wrap a.add_to_wishlist,
body.nbd-mode-modern #nbo-options-wrap .yith-wcwl-wishlistexistsbrowse,
body.nbd-mode-modern #nbo-options-wrap .yith-wcwl-wishlistaddedbrowse {
    display: none !important;
}

body.nbd-mode-modern #nbo-options-wrap .woocommerce-variation-add-to-cart > .quantity,
body.nbd-mode-modern #nbo-options-wrap .woocommerce-variation-add-to-cart .single_add_to_cart_button {
    /* Keep in DOM for any qty reads; remove from view + layout. */
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0 0 0 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

/* The add-to-cart container itself: drop its visual chrome so it just holds
   the orientation selector + hidden inputs cleanly. */
body.nbd-mode-modern #nbo-options-wrap .woocommerce-variation-add-to-cart {
    margin: 0;
    padding: 0;
    border: 0;
    text-align: left;
}

/* ===================================================================== *
 * 6. ORIENTATION SELECTOR — integrate as a card matching the option rows.
 * ===================================================================== */

body.nbd-mode-modern #nbo-options-wrap #psdm-orientation-selector {
    margin: 0 0 10px;
    padding: 12px;
    border: 1px solid var(--psdm-d-border-soft);
    border-radius: var(--psdm-d-radius-sm);
    background: var(--psdm-d-bg);
}

body.nbd-mode-modern #nbo-options-wrap .psdm-orientation-label {
    display: block;
    margin-bottom: 8px;
    font-weight: 600;
    font-size: 14px;
    color: var(--psdm-d-ink);
}

body.nbd-mode-modern #nbo-options-wrap .psdm-orientation-options {
    display: flex;
    gap: 8px;
}

body.nbd-mode-modern #nbo-options-wrap .psdm-orientation-option {
    flex: 1 1 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin: 0;
    padding: 8px 6px;
    border: 1px solid var(--psdm-d-border);
    border-radius: 7px;
    background: var(--psdm-d-bg-soft);
    font-size: 14px;
    color: var(--psdm-d-ink);
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s, box-shadow 0.15s;
}

body.nbd-mode-modern #nbo-options-wrap .psdm-orientation-option:hover {
    border-color: var(--psdm-d-accent);
}

body.nbd-mode-modern #nbo-options-wrap .psdm-orientation-option:has(input:checked) {
    border-color: var(--psdm-d-accent);
    background: rgba(59, 130, 246, 0.08);
    box-shadow: 0 0 0 1px var(--psdm-d-accent) inset;
}

body.nbd-mode-modern #nbo-options-wrap .psdm-orientation-option input {
    accent-color: var(--psdm-d-accent);
    margin: 0;
}

/* ===================================================================== *
 * 7. TAV TURNAROUND DATE-BOX — size sensibly inside the narrow panel.
 * ===================================================================== */

body.nbd-mode-modern #nbo-options-wrap .tav-custom-interface {
    width: 100%;
}

body.nbd-mode-modern #nbo-options-wrap .tav-date-boxes {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

body.nbd-mode-modern #nbo-options-wrap .tav-date-box {
    min-width: 96px;
    max-width: 140px;
    padding: 8px 10px;
    border-radius: var(--psdm-d-radius-sm);
}

body.nbd-mode-modern #nbo-options-wrap .tav-date-box-date {
    font-size: 13px;
    line-height: 1.2;
}

body.nbd-mode-modern #nbo-options-wrap .tav-date-box-label {
    font-size: 11px;
    margin-top: 2px;
}

body.nbd-mode-modern #nbo-options-wrap .tav-disclaimer {
    margin-top: 8px;
    font-size: 10.5px;
    line-height: 1.4;
    color: var(--psdm-d-ink-soft);
}

/* 8. RPS ZONE SELECTOR — sit flush with the option-row card language. */
body.nbd-mode-modern #nbo-options-wrap #rps-zone-selector {
    margin: 0 0 10px;
}

body.nbd-mode-modern #nbo-options-wrap #rps-zone-selector.rps-state-hidden {
    display: none !important;
}

/* 9. PANEL FRAME — consistent padding so cards breathe at ~360px. */
body.nbd-mode-modern #nbo-options-wrap .single_variation_wrap {
    margin-top: 10px;
}

/* 10. PANEL SCROLL — the designer's tab scroll container relies on
 * perfectScrollbar (broken in this PrintCart build → stuck overflow:hidden, so
 * lower options were clipped off-screen). Restore native scrolling. */
body.nbd-mode-modern .tab-main.tab-scroll {
    overflow-y: auto !important;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
}

body.nbd-mode-modern #nbo-options-wrap {
    padding-bottom: 24px;
}

/* Turnaround hide (RPS "hide turnaround" setting) is handled by the body
 * .rps-hide-turnaround class + RPS's own stylesheet (also loaded here). */

/* Reduced motion: drop the skeleton shimmer + reveal transitions. */
@media (prefers-reduced-motion: reduce) {
    body.nbd-mode-modern #nbo-options-wrap::before { animation: none; }
    body.nbd-mode-modern #nbo-options-wrap > .woocommerce { transition: none; }
}