/* =============================================================
   confirm-overlay.css  ·  shared/components/  ·  standalone
   The chip-shaped confirm prompt that pops over the header-chip
   slot of any list face. Triggered by destructive actions
   (UNLOCK, DELETE) — the shape, location, and bg colour mirror
   a normal header chip, so the prompt feels native to the page
   instead of a system-style modal.
   ============================================================= */

.confirm-overlay {
    position: absolute;
    top: 17%;                /* 10% canvas-header + 7% subheader */
    left: 0;
    right: 0;
    padding: 12px 7.5%;       /* matches carousel-page-header padding */
    z-index: 60;
}
.confirm-overlay[hidden] { display: none; }

.confirm-btn {
    border: 1px solid var(--brand-active);
    background: transparent;
    color: var(--on-brand);
    font-family: var(--font-sans);
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    border-radius: 12px;
    cursor: pointer;
    padding: 6px 12px;
    user-select: none;
    -webkit-user-select: none;
    -webkit-touch-callout: none;
    -webkit-tap-highlight-color: transparent;
    justify-self: center;
    align-self: center;
    width: 80%;
}
.confirm-btn.confirm-no {
    color: var(--on-brand-muted);
    border-color: var(--on-brand-muted);
}
.confirm-btn.confirm-yes {
    color: var(--brand);
    background: var(--status-error);
    border-color: var(--status-error);
}
.confirm-btn:active { transform: scale(0.97); }