/*
 * Hotspot lookbook — shared by the frontend layout and the admin editor so the frame the
 * owner places markers in is the frame shoppers see.
 * Coordinates are percentages of the image; the frame's aspect-ratio is locked to the
 * image's intrinsic ratio and the image is object-fit: contain, so image % == frame %.
 */
.j2c-lb-frame {
    position: relative;
    width: 100%;
    aspect-ratio: var(--lb-ratio, 4 / 3);
    overflow: hidden;
}

.j2c-lb-frame > img:not([hidden]) {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* 32x32 hit area (2.5.8 asks for 24x24 minimum); the visible dot is 16px inside it. */
.j2c-lb-marker {
    position: absolute;
    left: calc(var(--lb-x) * 1%);
    top: calc(var(--lb-y) * 1%);
    transform: translate(-50%, -50%);
    width: 32px;
    height: 32px;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    display: grid;
    place-items: center;
    cursor: pointer;
    touch-action: none;
}

/* Dual-tone: brand core, light ring, thin dark halo — one tone clears 3:1 on any photo (1.4.11).
   Falls back to the Red Line red when the host template defines no brand token. */
.j2c-lb-dot {
    display: block;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--brand-primary, #C0122D);
    border: 3px solid #fff;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.65), 0 0 0 0 rgba(255, 255, 255, 0);
    transition: transform 0.2s ease;
}

.j2c-lb-marker:hover .j2c-lb-dot {
    transform: scale(1.15);
}

.j2c-lb-marker:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 1px;
    box-shadow: 0 0 0 4px #111;
    border-radius: 50%;
}

/* Open state: Bootstrap keeps aria-expanded in sync on every trigger of the pane. */
.j2c-lb-marker[aria-expanded="true"] .j2c-lb-dot {
    transform: scale(1.35);
    animation: j2c-lb-pulse 1.4s ease-out infinite;
}

/*
 * Popover style has no accordion beside the image, so the markers are the only affordance:
 * they pulse continuously to advertise themselves. Bootstrap sets aria-describedby on the
 * trigger while its popover is open — that is the open state here, aria-expanded is not used.
 */
.j2c-lb--popover .j2c-lb-dot {
    animation: j2c-lb-pulse 1.4s ease-out infinite;
}

.j2c-lb--popover .j2c-lb-marker[aria-describedby] .j2c-lb-dot {
    transform: scale(1.35);
}

@keyframes j2c-lb-pulse {
    0% {
        box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.65), 0 0 0 0 rgba(var(--brand-primary-rgb, 192, 18, 45), 0.9);
    }
    100% {
        box-shadow: 0 0 0 14px rgba(0, 0, 0, 0), 0 0 0 10px rgba(var(--brand-primary-rgb, 192, 18, 45), 0);
    }
}

@media (prefers-reduced-motion: reduce) {
    .j2c-lb-dot {
        transition: none;
    }

    .j2c-lb-marker[aria-expanded="true"] .j2c-lb-dot,
    .j2c-lb--popover .j2c-lb-dot {
        animation: none;
    }
}

/*
 * Popover skin (customClass j2c-lb-popover). Light mode is the inverted card: ink surface and
 * border, white text. [data-bs-theme="dark"] reverses it so it still reads against a dark page.
 */
.popover.j2c-lb-popover {
    --bs-popover-bg: var(--brand-ink-2, #26282C);
    --bs-popover-border-color: var(--brand-ink-2, #26282C);
    --bs-popover-header-bg: var(--brand-ink-2, #26282C);
    --bs-popover-header-color: var(--brand-text-on-dark, #FFFFFF);
    --bs-popover-body-color: var(--brand-text-on-dark, #FFFFFF);
    --bs-popover-arrow-border: var(--brand-ink-2, #26282C);
    color-scheme: dark;
}

[data-bs-theme="dark"] .popover.j2c-lb-popover,
.popover.j2c-lb-popover[data-bs-theme="dark"] {
    --bs-popover-bg: var(--brand-text-on-dark, #FFFFFF);
    --bs-popover-border-color: var(--brand-text-on-dark, #FFFFFF);
    --bs-popover-header-bg: var(--brand-text-on-dark, #FFFFFF);
    --bs-popover-header-color: var(--brand-ink-2, #26282C);
    --bs-popover-body-color: var(--brand-ink-2, #26282C);
    --bs-popover-arrow-border: var(--brand-text-on-dark, #FFFFFF);
    color-scheme: light;
}

.popover.j2c-lb-popover .popover-header { border-bottom-color: rgba(var(--brand-bg-rgb, 255, 255, 255), 0.25); }
[data-bs-theme="dark"] .popover.j2c-lb-popover .popover-header { border-bottom-color: rgba(0, 0, 0, 0.2); }

.j2c-lb-num {
    display: inline-block;
    min-width: 1.6em;
    margin-right: 0.5em;
    text-align: center;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

/* Admin editor */
.j2c-lb-frame--editor {
    cursor: crosshair;
    border: 1px solid var(--bs-border-color, #ccc);
    background: var(--bs-tertiary-bg, #f3f3f3);
}

.j2c-lb-frame--editor .j2c-lb-marker {
    cursor: grab;
}

.j2c-lb-frame--editor .j2c-lb-marker[aria-pressed="true"] .j2c-lb-dot {
    transform: scale(1.35);
    background: var(--bs-primary, #0d6efd);
}

.j2c-lb-row {
    border: 1px solid var(--bs-border-color, #ccc);
    border-radius: 0.25rem;
    padding: 0.75rem;
    margin-bottom: 0.75rem;
}

.j2c-lb-row[data-selected="true"] {
    border-color: var(--bs-primary, #0d6efd);
    box-shadow: 0 0 0 2px rgba(13, 110, 253, 0.25);
}

.j2c-lb-row legend {
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: 0.25rem;
}