/**
 * CartSetup Capture Mode Styles
 *
 * Styles for the capture overlay, highlight ring, and confirmation toolbar.
 * All z-index values via CSS variables — no literals.
 *
 * @package UpsellMax\CartSetup
 * @see     Section 12 — CSS asset owned by capture layer
 * @see     Section 8  — Capture Mode State Machine
 * @see     Section 9.5 — Z-Index Stack
 */

/* ── Capture Overlay (full-screen dim) ───────────────────────────────── */
.umscs-capture-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.35);
    z-index: var(--umscs-z-capture-bg);
    cursor: crosshair;
    pointer-events: all; /* intercepts all clicks during capture */
}

/* Toolbar sits inside the overlay at the top */
.umscs-capture-toolbar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 56px;
    background: #1a1a2e;
    color: #fff;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 0 24px;
    z-index: var(--umscs-z-capture-confirm);
    font-family: var(--umscs-font);
    font-size: 14px;
}

.umscs-capture-toolbar__icon {
    font-size: 18px;
    color: #f4c430;
    flex-shrink: 0;
}

.umscs-capture-toolbar__label {
    flex: 1;
    margin: 0;
    font-weight: 500;
}

.umscs-capture-toolbar__cancel {
    background: rgba(255,255,255,0.15);
    border: 1px solid rgba(255,255,255,0.3);
    color: #fff;
    padding: 6px 16px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 13px;
    transition: background 0.15s;
}

.umscs-capture-toolbar__cancel:hover {
    background: rgba(255,255,255,0.25);
}

.umscs-capture-timer {
    font-family: monospace;
    font-size: 14px;
    color: rgba(255,255,255,0.7);
    min-width: 36px;
    text-align: right;
}

/* Timer warning: turns orange under 30 seconds */
.umscs-capture-timer--warning {
    color: #f4a430;
    font-weight: 700;
}

/* ── Capture Highlight Ring ───────────────────────────────────────────── */
/* Positioned absolutely around the hovered element by capture.js.        */
/* @see Section 8.2 — "Visible highlight ring around hovered element"     */
.umscs-capture-ring {
    position: fixed; /* JS sets top/left/width/height */
    pointer-events: none;
    border: 3px solid #f4c430;
    border-radius: 4px;
    z-index: var(--umscs-z-capture-ring);
    box-shadow: 0 0 0 9999px rgba(0,0,0,0.1); /* soft mask outside ring */
    transition: top 0.08s, left 0.08s, width 0.08s, height 0.08s;
    box-sizing: border-box;
}

/* Admin bar offset applied by JS */
.admin-bar .umscs-capture-toolbar {
    top: var(--umscs-adminbar-h, 32px);
}