/* src/components/basic/XWUIImage/XWUIImage.css */
/**
 * XWUIImage Component Styles
 * Enhanced image with fallbacks and lazy loading
 */

.xwui-image-container {
    display: inline-block;
}

.xwui-image-wrapper {
    position: relative;
    display: block;
    width: 100%;
}

/* Art-directed <picture> wrapper is layout-transparent so the inner <img>
   participates in the wrapper exactly as a bare <img> would (identical sizing
   whether or not responsive sources are used). */
.xwui-image-wrapper picture {
    display: contents;
}

.xwui-image {
    display: block;
    max-width: 100%;
    height: auto;
    transition: opacity 0.3s ease;
}

.xwui-image-loading {
    opacity: 0;
}

.xwui-image-loaded {
    opacity: 1;
}

.xwui-image-error {
    opacity: 0.5;
}

.xwui-image-placeholder {
    position: absolute;
    top: 0;
    inset-inline-start: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-secondary, #f8f9fa);
    color: var(--text-secondary, #6c757d);
    font-size: 0.875rem;
}

.xwui-image-error-placeholder {
    position: absolute;
    top: 0;
    inset-inline-start: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-tertiary, #f1f3f5);
    color: var(--text-tertiary, #adb5bd);
    font-size: 0.875rem;
}

/* ── Blur-up progressive load ─────────────────────────────────────────────
   The placeholder (a tiny low-res image) is blurred + scaled and cross-fades
   out when the full image loads (opacity is set to 0 in JS on load). */
.xwui-image-placeholder {
    transition: opacity 0.6s ease;
}
.xwui-image-placeholder--blur {
    overflow: hidden;
}
.xwui-image-placeholder--blur img {
    filter: blur(18px);
    transform: scale(1.1);
}

/* ── Hover-to-zoom magnifier lens ─────────────────────────────────────────── */
.xwui-image-zoomable {
    cursor: crosshair;
}
.xwui-image-zoom-lens {
    position: absolute;
    pointer-events: none;
    background-repeat: no-repeat;
    border: 3px solid var(--bg-primary, #ffffff);
    box-shadow: 0 0 0 1px var(--border-color, rgba(0, 0, 0, 0.1)), 0 8px 24px rgba(0, 0, 0, 0.28);
    opacity: 0;
    transition: opacity 0.15s ease;
    z-index: 5;
}
.xwui-image-zoom-lens--circle { border-radius: 50%; }
.xwui-image-zoom-lens--square { border-radius: 10px; }
.xwui-image-zoom-lens.is-active {
    opacity: 1;
}

/* "Hover to zoom" hint pill - visible at rest, fades out while hovering. */
.xwui-image-zoom-hint {
    position: absolute;
    bottom: 14px;
    inset-inline-start: 50%;
    transform: translateX(-50%);
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 14px;
    border-radius: 999px;
    background: rgba(15, 23, 42, 0.62);
    color: #fff;
    font-size: 12px;
    font-weight: 500;
    line-height: 1;
    white-space: nowrap;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    pointer-events: none;
    opacity: 1;
    transition: opacity 0.25s ease;
    z-index: 6;
}
.xwui-image-zoom-hint svg { flex-shrink: 0; }
.xwui-image-zoomable:hover .xwui-image-zoom-hint { opacity: 0; }

/* ── Image hotspots (annotation dots + tooltips) ──────────────────────────── */
.xwui-image-hotspots {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 4;
}
.xwui-image-hotspot {
    position: absolute;
    width: 18px;
    height: 18px;
    transform: translate(-50%, -50%);
    pointer-events: auto;
    cursor: pointer;
    /* Explicit baseline so the active marker below can out-rank it. Without
       this, two sibling markers with z-index:auto stack in DOM order, so a
       later marker's dot paints over an earlier marker's open tooltip
       whenever they are close enough to overlap on screen. */
    z-index: 1;
}
.xwui-image-hotspot:hover,
.xwui-image-hotspot:focus,
.xwui-image-hotspot:focus-within {
    z-index: 10;
}
.xwui-image-hotspot-pulse {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: var(--accent-primary, var(--role-primary-bg, #6366f1));
    opacity: 0.55;
    animation: xwui-image-hotspot-ping 1.8s cubic-bezier(0, 0, 0.2, 1) infinite;
}
.xwui-image-hotspot-dot {
    position: absolute;
    inset: 3px;
    border-radius: 50%;
    background: var(--bg-primary, #ffffff);
    border: 3px solid var(--accent-primary, var(--role-primary-bg, #6366f1));
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
}
@keyframes xwui-image-hotspot-ping {
    0% { transform: scale(0.6); opacity: 0.7; }
    80%, 100% { transform: scale(2); opacity: 0; }
}
.xwui-image-hotspot-tip {
    position: absolute;
    bottom: calc(100% + 10px);
    inset-inline-start: 50%;
    /* Centered by default via --tip-tx; the two edge modifiers below only
       override this one variable plus the inset anchor, so the hover rule
       does not need a copy per placement variant. */
    --tip-tx: -50%;
    /* translateX is PHYSICAL while inset-inline-start is logical, so the two
       stop agreeing under RTL: inline-start resolves to the right edge, the
       tip's own box already sits a full width to the left of the anchor, and
       a further -50% drops it another half-width out - the tooltip lands a
       whole width off its marker in Arabic. Mirroring the shift is the whole
       fix; the edge modifiers set 0% and are direction-neutral already. */
    transform: translateX(var(--tip-tx)) scale(0.95);
    width: max-content;
    max-width: 200px;
    background: var(--text-primary, #0f172a);
    color: var(--bg-primary, #ffffff);
    padding: 8px 10px;
    border-radius: 8px;
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.3);
    text-align: start;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.18s ease, transform 0.18s ease;
}
.xwui-image-hotspot-tip:dir(rtl) {
    --tip-tx: 50%;
}
.xwui-image-hotspot:hover .xwui-image-hotspot-tip,
.xwui-image-hotspot:focus .xwui-image-hotspot-tip,
.xwui-image-hotspot:focus-within .xwui-image-hotspot-tip {
    opacity: 1;
    transform: translateX(var(--tip-tx)) scale(1);
}
/* Boundary-aware placement. The VERTICAL flip below is applied by placeTip()
   in XWUIImage.ts when a tip popping upward would clear the top of the frame.
   Horizontal placement is no longer a class: placeTip() measures the tip and
   writes an exact pixel --tip-tx that centres it on its marker and clamps it
   inside the frame, which the two edge anchors could not do. They pinned one
   of the tip's edges to the marker, so a tip wider than the room on the
   inward side simply moved its overflow to the other side - visible the
   moment a consumer restyled the tooltip wider, and unavoidable on a phone
   where the tip approaches the width of the frame itself. The --tip-start and
   --tip-end rules are kept: they are the sane fallback for anyone placing a
   tip by hand, and the percentage --tip-tx above is what renders if the
   component's JS never runs.
   Near the top edge: a tip popping upward would overflow above the frame. */
.xwui-image-hotspot--tip-below .xwui-image-hotspot-tip {
    bottom: auto;
    top: calc(100% + 10px);
}
/* Near the left edge: a centered 200px-wide tip would cross it. Anchor the
   tip's own start edge to the marker instead, so it grows inward. */
.xwui-image-hotspot--tip-start .xwui-image-hotspot-tip {
    inset-inline-start: 0;
    --tip-tx: 0%;
}
/* Near the right edge: mirror — anchor the tip's end edge to the marker. */
.xwui-image-hotspot--tip-end .xwui-image-hotspot-tip {
    inset-inline-start: auto;
    inset-inline-end: 0;
    --tip-tx: 0%;
}
.xwui-image-hotspot-tip strong {
    display: block;
    font-size: 0.8125rem;
    margin-bottom: 2px;
}
.xwui-image-hotspot-tip span {
    display: block;
    font-size: 0.75rem;
    opacity: 0.8;
    line-height: 1.4;
}

/* ── Before/after comparison slider ───────────────────────────────────────── */
.xwui-image-compare {
    -webkit-user-select: none;
            user-select: none;
    cursor: ew-resize;
}
.xwui-image-compare-before {
    position: absolute;
    inset: 0;
    overflow: hidden;
    z-index: 3;
}
.xwui-image-compare-before img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.xwui-image-compare-divider {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 2px;
    transform: translateX(-50%);
    background: var(--bg-primary, #ffffff);
    box-shadow: 0 0 6px rgba(0, 0, 0, 0.35);
    pointer-events: none;
    z-index: 4;
}
.xwui-image-compare-handle {
    position: absolute;
    top: 50%;
    inset-inline-start: 50%;
    transform: translate(-50%, -50%);
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: var(--bg-primary, #ffffff);
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.35);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-secondary, #64748b);
}
.xwui-image-compare-range {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    opacity: 0;
    cursor: ew-resize;
    z-index: 5;
}
.xwui-image-compare-label {
    position: absolute;
    top: 14px;
    background: rgba(15, 23, 42, 0.62);
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    padding: 5px 11px;
    border-radius: 999px;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    pointer-events: none;
    z-index: 4;
}
/* left/right here track which physical half of the image the before/after
 * clip currently shows (cmp.position drives a physical, pixel-based clip in
 * XWUIImage.ts) - not a text-direction concept, so these stay physical. */
.xwui-image-compare-label--before { left: 14px; }
.xwui-image-compare-label--after { right: 14px; }

/* ── Corner ribbon banner (reusable on any image/box surface) ───────────────
 * Corner is an explicit config.ribbon.corner choice ('top-left' | 'top-right'
 * | 'bottom-left' | 'bottom-right', see XWUIImage.types.ts) - a deliberate
 * screen-space pin, not a reading-direction concept, so these stay physical. */
.xwui-image-ribbon {
    position: absolute;
    width: 104px;
    height: 104px;
    overflow: hidden;
    pointer-events: none;
    z-index: 4;
}
.xwui-image-ribbon span {
    position: absolute;
    display: block;
    width: 150px;
    padding: 6px 0;
    text-align: center;
    background: var(--accent-primary, #6366f1);
    color: #fff;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.28);
}
.xwui-image-ribbon--top-right { top: 0; right: 0; }
.xwui-image-ribbon--top-right span { top: 24px; right: -40px; transform: rotate(45deg); }
.xwui-image-ribbon--top-left { top: 0; left: 0; }
.xwui-image-ribbon--top-left span { top: 24px; left: -40px; transform: rotate(-45deg); }
.xwui-image-ribbon--bottom-right { bottom: 0; right: 0; }
.xwui-image-ribbon--bottom-right span { bottom: 24px; right: -40px; transform: rotate(-45deg); }
.xwui-image-ribbon--bottom-left { bottom: 0; left: 0; }
.xwui-image-ribbon--bottom-left span { bottom: 24px; left: -40px; transform: rotate(45deg); }

/* Make the compare divider handle clearly draggable. */
.xwui-image-compare-handle { transition: transform 0.12s ease; }
.xwui-image-compare:hover .xwui-image-compare-handle { transform: translate(-50%, -50%) scale(1.08); }