/* ========================================================================== confirm_modal.css — potvrzovací okno administrace -------------------------------------------------------------------------- Nahrazuje systémový confirm() prohlížeče. Vzhled záměrně kopíruje ostatní modaly v adminu (Přepnout účet, Přidat do nákupu), ať to všude drží jeden kontext. ========================================================================== */ .confirm-modal { position: fixed; inset: 0; /* Nad hlavičkou (100) i nad ostatními modaly — potvrzení je vždy navrchu. JS ho navíc přesouvá přímo pod , aby ho
neuzavřel do vlastní vrstvy (position: relative; z-index: 1). */ z-index: 4000; display: flex; align-items: center; justify-content: center; padding: 20px; background: rgba(0, 0, 0, 0.8); } .confirm-modal[hidden] { display: none; } .confirm-modal-box { width: 100%; max-width: 440px; max-height: 90vh; overflow-y: auto; border: 1px solid var(--gold-faint); background: var(--black-warm); box-shadow: 0 20px 60px rgba(0, 0, 0, 0.65); } .confirm-modal-head { padding: 18px 22px; border-bottom: 1px solid var(--gold-glow); } .confirm-modal-head h3 { margin: 0; font-family: var(--display); font-size: 17px; letter-spacing: 1.5px; font-weight: 400; color: var(--gold-hover); } /* Nebezpečná akce (mazání) — nadpis červeně, ať je jasné, o co jde. */ .confirm-modal-box.is-danger .confirm-modal-head h3 { color: var(--red); } .confirm-modal-text { margin: 0; padding: 20px 22px 4px; font-family: var(--sans); font-size: 14px; line-height: 1.65; color: rgba(255, 255, 255, 0.82); } .confirm-modal-actions { display: flex; justify-content: flex-end; gap: 12px; padding: 20px 22px 22px; } .confirm-modal-cancel, .confirm-modal-ok { padding: 12px 22px; font-family: var(--sans); font-size: 12px; letter-spacing: 2px; text-transform: uppercase; cursor: pointer; transition: background 0.2s, color 0.2s, border-color 0.2s; } .confirm-modal-cancel { background: transparent; border: 1px solid var(--gold-faint); color: var(--gold-dim); } .confirm-modal-cancel:hover { color: var(--gold-hover); border-color: var(--gold); } .confirm-modal-ok { border: 1px solid var(--gold); background: var(--gold); color: #1a1a1a; font-weight: 500; } .confirm-modal-ok:hover { background: var(--gold-hover); border-color: var(--gold-hover); } .confirm-modal-box.is-danger .confirm-modal-ok { border-color: var(--red); background: var(--red); color: #fff; } .confirm-modal-box.is-danger .confirm-modal-ok:hover { filter: brightness(1.12); } .confirm-modal-cancel:focus-visible, .confirm-modal-ok:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; } /* ===== MOBIL ===== */ @media (max-width: 760px) { .confirm-modal { padding: 0; align-items: flex-end; } .confirm-modal-box { max-width: none; max-height: 90vh; max-height: 90dvh; } .confirm-modal-actions { flex-direction: column-reverse; padding-bottom: calc(22px + env(safe-area-inset-bottom, 0px)); } .confirm-modal-actions button { width: 100%; } }