/* ══════════════════════════════════════════════════════════════════
   Avancy 3D Block — s-blocks-3d
   ══════════════════════════════════════════════════════════════════ */

/* ── Theme tokens — all derived from the website's --bs-primary ──────
   color-mix() blends the primary color with black/white to produce
   dark/light/muted variants automatically for any theme color.
   ──────────────────────────────────────────────────────────────────── */
.s-blocks-3d {
    /* backgrounds */
    --3d-dark-grad-1:    color-mix(in srgb, var(--o-cc1-btn-primary, #3d6aff) 18%, #0a0d16);
    --3d-dark-grad-2:    color-mix(in srgb, var(--o-cc1-btn-primary, #3d6aff)  5%, #04060c);
    --3d-light-grad-2:   color-mix(in srgb, var(--o-cc1-btn-primary, #3d6aff)  9%, #e4ecf8);

    /* text */
    --3d-text-on-dark:   color-mix(in srgb, var(--o-cc1-btn-primary, #3d6aff) 35%, #ffffff);
    --3d-text-on-light:  color-mix(in srgb, var(--o-cc1-btn-primary, #3d6aff) 70%, #000000);

    /* accents (ring, progress bar, scrollbar) */
    --3d-accent:         color-mix(in srgb, var(--o-cc1-btn-primary, #3d6aff) 75%, #ffffff);

    /* nav arrows */
    --3d-nav-color-light: color-mix(in srgb, var(--o-cc1-btn-primary, #3d6aff) 55%, #000000);

    position: relative;
    width: 100%;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    min-height: 550px;
}

/* ── Backgrounds ─────────────────────────────────────────────────────
   .s-3d-bg-dark  → set by Odoo's data-select-class (new pages)
   data-3d-bg     → legacy attribute on old saved pages
   Default (no class/attr) → dark fallback
   ──────────────────────────────────────────────────────────────────── */

/* Dark — default fallback + explicit class */
.s-blocks-3d,
.s-blocks-3d.s-3d-bg-dark,
.s-blocks-3d[data-3d-bg="dark"] {
    background: radial-gradient(ellipse at 50% 55%, var(--3d-dark-grad-1) 0%, var(--3d-dark-grad-2) 100%) !important;
}

/* Light — !important to beat any inline background Odoo may inject */
.s-blocks-3d.s-3d-bg-light,
.s-blocks-3d[data-3d-bg="light"] {
    background: radial-gradient(ellipse at 50% 55%, #ffffff 0%, var(--3d-light-grad-2) 100%) !important;
}

/* ── Height variants ─────────────────────────────────────────────────
   class-based (editor data-select-class) + legacy data-attribute
   ──────────────────────────────────────────────────────────────────── */
.s-blocks-3d.s-3d-h-400,
.s-blocks-3d[data-3d-height="400"]   { min-height: 400px; }

.s-blocks-3d.s-3d-h-550,
.s-blocks-3d[data-3d-height="550"]   { min-height: 550px; }

.s-blocks-3d.s-3d-h-700,
.s-blocks-3d[data-3d-height="700"]   { min-height: 700px; }

.s-blocks-3d.s-3d-h-full,
.s-blocks-3d[data-3d-height="100vh"] { min-height: 100vh; }


/* ══════════════════════════════════════════════════════════════════
   Stage — fills available height, clips overflowing side slides
   ══════════════════════════════════════════════════════════════════ */

.s-blocks-3d__stage {
    flex: 1;
    position: relative;
    min-height: 300px;
    overflow: hidden;
}


/* ══════════════════════════════════════════════════════════════════
   3D Slides
   ══════════════════════════════════════════════════════════════════ */

.s-blocks-3d__slide {
    position: absolute;
    width: 74%;
    height: 92%;
    top: 4%;
    left: 13%;
    transform-origin: center center;
    will-change: transform, opacity;
    transition: transform 0.45s cubic-bezier(0.25, 0.8, 0.25, 1),
                opacity   0.45s ease;
}

.s-blocks-3d__slide model-viewer {
    width: 100% !important;
    height: 100% !important;
    position: absolute;
    inset: 0;
    background: transparent !important;
    --progress-bar-color: color-mix(in srgb, var(--3d-accent) 70%, transparent);
}

.s-blocks-3d__slide--active {
    transform: translateX(0) scale(1);
    opacity: 1;
    z-index: 3;
}

.s-blocks-3d__slide--prev {
    transform: translateX(-60%) scale(0.58);
    opacity: 0.52;
    z-index: 2;
    cursor: pointer;
}

.s-blocks-3d__slide--next {
    transform: translateX(60%) scale(0.58);
    opacity: 0.52;
    z-index: 2;
    cursor: pointer;
}

.s-blocks-3d__slide--hidden {
    opacity: 0;
    pointer-events: none;
    z-index: 1;
    transform: translateX(0) scale(0.5);
}

.s-blocks-3d__slide--prev model-viewer,
.s-blocks-3d__slide--next model-viewer,
.s-blocks-3d__slide--hidden model-viewer {
    pointer-events: none;
}

.s-blocks-3d__slide--prev:hover,
.s-blocks-3d__slide--next:hover {
    opacity: 0.75;
}


/* ══════════════════════════════════════════════════════════════════
   Placeholder
   ══════════════════════════════════════════════════════════════════ */

.s-blocks-3d__placeholder {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .75rem;
    color: color-mix(in srgb, var(--3d-text-on-dark) 55%, transparent);
    text-align: center;
    padding: 2rem;
    pointer-events: none;
    z-index: 5;
}
.s-blocks-3d.s-3d-bg-light .s-blocks-3d__placeholder,
.s-blocks-3d[data-3d-bg="light"] .s-blocks-3d__placeholder {
    color: color-mix(in srgb, var(--3d-text-on-light) 45%, transparent);
}
.s-blocks-3d__placeholder .fa       { font-size: 3rem; }
.s-blocks-3d__placeholder p         { font-size: .88rem; max-width: 300px; margin: 0; line-height: 1.6; }
.s-blocks-3d__placeholder-hint      { font-size: .75rem; opacity: .6; max-width: 280px; }


/* ══════════════════════════════════════════════════════════════════
   Navigation arrows
   ══════════════════════════════════════════════════════════════════ */

.s-blocks-3d__nav {
    position: absolute;
    top: calc(50% - 26px);
    transform: translateY(-50%);
    z-index: 10;
    background: rgba(255, 255, 255, 0.13);
    border: 1px solid rgba(255, 255, 255, 0.18);
    color: #fff;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.22s, transform 0.22s;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    font-size: .95rem;
    line-height: 1;
    padding: 0;
}
.s-blocks-3d__nav:hover {
    background: rgba(255, 255, 255, 0.24);
    transform: translateY(-50%) scale(1.1);
}
.s-blocks-3d.s-3d-bg-light .s-blocks-3d__nav,
.s-blocks-3d[data-3d-bg="light"] .s-blocks-3d__nav {
    background: rgba(0, 0, 0, 0.09);
    border-color: rgba(0, 0, 0, 0.15);
    color: var(--3d-nav-color-light);
}
.s-blocks-3d.s-3d-bg-light .s-blocks-3d__nav:hover,
.s-blocks-3d[data-3d-bg="light"] .s-blocks-3d__nav:hover {
    background: rgba(0, 0, 0, 0.17);
}
.s-blocks-3d__nav--prev { left: 12px; }
.s-blocks-3d__nav--next { right: 12px; }


/* ══════════════════════════════════════════════════════════════════
   Product name label
   ══════════════════════════════════════════════════════════════════ */

.s-blocks-3d__product-name {
    flex-shrink: 0;
    text-align: center;
    font-size: 0.82rem;
    font-weight: 500;
    letter-spacing: 0.03em;
    color: color-mix(in srgb, var(--3d-text-on-dark) 88%, transparent);
    padding: 8px 3.5rem 4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    cursor: pointer;
    transition: color 0.18s;
}
.s-blocks-3d__product-name:hover {
    color: var(--3d-accent);
}
.s-blocks-3d.s-3d-bg-light .s-blocks-3d__product-name,
.s-blocks-3d[data-3d-bg="light"] .s-blocks-3d__product-name {
    color: color-mix(in srgb, var(--3d-text-on-light) 85%, transparent);
}


/* ══════════════════════════════════════════════════════════════════
   Circular thumbnail strip
   ══════════════════════════════════════════════════════════════════ */

.s-blocks-3d__carousel {
    flex-shrink: 0;
    display: flex;
    justify-content: center;
    gap: .9rem;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding: .75rem 1.25rem 1rem;
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, .2) transparent;
}
.s-blocks-3d__carousel::-webkit-scrollbar        { height: 4px; }
.s-blocks-3d__carousel::-webkit-scrollbar-track  { background: transparent; }
.s-blocks-3d__carousel::-webkit-scrollbar-thumb  {
    background: rgba(255, 255, 255, .25);
    border-radius: 2px;
}

.s-blocks-3d__thumb {
    flex: 0 0 80px;
    scroll-snap-align: start;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    cursor: pointer;
    padding: 4px;
    transition: transform .18s;
    border: none;
    background: transparent;
}
.s-blocks-3d__thumb:hover { transform: translateY(-3px); }

.s-blocks-3d__thumb img {
    width: 62px;
    height: 62px;
    object-fit: cover;
    border-radius: 50%;
    background: rgba(255, 255, 255, .08);
    transition: opacity .18s, box-shadow .18s;
}
.s-blocks-3d__thumb:not(.s-blocks-3d__thumb--active) img { opacity: .58; }
.s-blocks-3d__thumb--active img {
    opacity: 1;
    box-shadow: 0 0 0 2.5px color-mix(in srgb, var(--3d-accent) 75%, transparent);
}

.s-blocks-3d__thumb-name {
    font-size: .63rem;
    color: color-mix(in srgb, var(--3d-text-on-dark) 72%, transparent);
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 74px;
    line-height: 1.3;
}
.s-blocks-3d.s-3d-bg-light .s-blocks-3d__thumb img,
.s-blocks-3d[data-3d-bg="light"] .s-blocks-3d__thumb img {
    background: rgba(0, 0, 0, .06);
}
.s-blocks-3d.s-3d-bg-light .s-blocks-3d__thumb-name,
.s-blocks-3d[data-3d-bg="light"] .s-blocks-3d__thumb-name {
    color: color-mix(in srgb, var(--3d-text-on-light) 72%, transparent);
}


/* ══════════════════════════════════════════════════════════════════
   Mobile — single visible slide (prev/next hidden)
   Arrows and thumbnail dots remain visible for navigation.
   ══════════════════════════════════════════════════════════════════ */

@media (max-width: 767px) {

    /* Completely hide the left/right peek slides */
    .s-blocks-3d__slide--prev,
    .s-blocks-3d__slide--next {
        display: none !important;
    }

    /* Expand the active slide to fill the stage */
    .s-blocks-3d__slide--active {
        width: 92% !important;
        left: 4% !important;
    }

    /* Keep nav arrows closer to the edges */
    .s-blocks-3d__nav--prev { left: 6px; }
    .s-blocks-3d__nav--next { right: 6px; }
}


/* ══════════════════════════════════════════════════════════════════
   Product Annotations — ONE annotation at a time, cycling.

   OVERLAP FIX:  The prev/next slides only occupy the middle
   vertical band of the stage (≈ 23 % – 77 % of stage height).
   Labels are therefore pinned to the TOP zone (< 20 % height) via
   inline `top` set by JS — they are always above the side slides
   and never collide with them.

   Colors: inherit --3d-accent / --3d-text-on-dark automatically.
   ══════════════════════════════════════════════════════════════════ */

.s3d-annot {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 6;          /* above slides (z 2-3) and nav arrows (z 10 only covers arrows) */
}

.s3d-annot__svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: visible;
}

/* Short horizontal connector — flashes in instantly (no slow draw) */
.s3d-annot__line {
    fill: none;
    stroke: color-mix(in srgb, var(--3d-accent) 85%, transparent);
    stroke-width: 1.5;
    stroke-dasharray: 4 3;
    opacity: 0;
    transition: opacity 0s;                         /* instant reset */
}
.s3d-annot__line.is-drawn {
    opacity: 1;
    transition: opacity 0.1s ease;                  /* flash */
}

/* Glowing dot at model surface — origin of the line */
.s3d-annot__dot {
    fill: var(--3d-accent);
    opacity: 0;
    transition: opacity 0s;
}
.s3d-annot__dot.is-visible {
    opacity: 1;
    transition: opacity 0.12s ease;
}

/* ── Label box ───────────────────────────────────────────────────── */
/* top / left / right set by JS.  Width fixed so JS knows exact
   line-end x.  Box has solid bg so it reads over any background.   */
.s3d-annot__label {
    position: absolute;
    width: 150px;
    background: color-mix(in srgb, var(--3d-dark-grad-2) 88%, transparent);
    border: 1px solid color-mix(in srgb, var(--3d-accent) 50%, transparent);
    border-radius: 7px;
    padding: 7px 10px;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    opacity: 0;
    transform: scale(0.9);
    transition: opacity 0s, transform 0s;           /* instant reset */
    pointer-events: auto;
    cursor: pointer;
    text-decoration: none;
}
.s3d-annot__label:hover {
    border-color: color-mix(in srgb, var(--3d-accent) 85%, transparent);
    background: color-mix(in srgb, var(--3d-dark-grad-2) 96%, transparent);
}
.s3d-annot__label.is-visible {
    opacity: 1;
    transform: scale(1);
    transition: opacity 0.14s ease, transform 0.14s ease;   /* pop in */
}
.s3d-annot__label--left  { text-align: left; }
.s3d-annot__label--right { text-align: right; }

/* Tag ("PRICE", "PRODUCT" …) */
.s3d-annot__label-tag {
    display: block;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: color-mix(in srgb, var(--3d-accent) 95%, transparent);
    margin-bottom: 4px;
    line-height: 1;
}

/* Value — typed letter by letter */
.s3d-annot__label-value {
    display: block;
    font-size: 0.95rem;
    font-weight: 500;
    color: var(--3d-text-on-dark);
    line-height: 1.45;
    word-break: break-word;
    min-height: 1.1em;
}

/* Blinking cursor while typing */
.s3d-annot__label-value.is-typing::after {
    content: '|';
    margin-left: 1px;
    color: color-mix(in srgb, var(--3d-accent) 95%, transparent);
    animation: s3dCursorBlink 0.65s step-start infinite;
}

@keyframes s3dCursorBlink {
    50% { opacity: 0; }
}

/* Light theme */
.s-blocks-3d.s-3d-bg-light .s3d-annot__label,
.s-blocks-3d[data-3d-bg="light"] .s3d-annot__label {
    background: rgba(255, 255, 255, 0.88);
    border-color: color-mix(in srgb, var(--3d-accent) 40%, transparent);
}
.s-blocks-3d.s-3d-bg-light .s3d-annot__label-value,
.s-blocks-3d[data-3d-bg="light"] .s3d-annot__label-value {
    color: var(--3d-text-on-light);
}

/* Mobile: smaller labels */
@media (max-width: 767px) {
    .s3d-annot__label {
        width: 118px;
        padding: 5px 8px;
    }
    .s3d-annot__label-tag   { font-size: 0.60rem; }
    .s3d-annot__label-value { font-size: 0.82rem; }
}