/* site.css — one-off overrides that can't go in input.css */

/* ── Native <dialog> — center in viewport regardless of RTL ──────────────── */
dialog {
    position: fixed;
    inset: 0;
    margin: auto;
    max-height: calc(100dvh - 2rem);
    overflow-y: auto;
}
dialog[open] {
    animation: dialogPop 0.22s cubic-bezier(0.34, 1.4, 0.64, 1) both;
}
@keyframes dialogPop {
    from { opacity: 0; transform: scale(0.92) translateY(-8px); }
    to   { opacity: 1; transform: scale(1)    translateY(0); }
}
dialog::backdrop {
    background: rgba(0, 0, 0, 0.75);
    animation: backdropIn 0.18s ease-out both;
}
@keyframes backdropIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}
dialog.closing {
    animation: dialogPopOut 0.17s ease-in both !important;
    pointer-events: none;
}
@keyframes dialogPopOut {
    from { opacity: 1; transform: scale(1)    translateY(0); }
    to   { opacity: 0; transform: scale(0.92) translateY(-8px); }
}
dialog.closing::backdrop {
    animation: backdropOut 0.15s ease-in both !important;
}
@keyframes backdropOut {
    from { opacity: 1; }
    to   { opacity: 0; }
}

/* ── Settings overlay + panel ────────────────────────────────────────────── */
#settings-overlay {
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s ease;
}
#settings-overlay.open {
    opacity: 1;
    pointer-events: auto;
}
#settings-panel {
    transform: translateX(100%);
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
#settings-panel.open {
    transform: translateX(0);
}

/* ── Price box transitions ────────────────────────────────────────────────── */
.price-box {
    transition: filter 0.35s ease, background-color 0.2s ease, color 0.2s ease;
}

/* ── Shop-closed blur ────────────────────────────────────────────────────── */
.price-blurred {
    filter: blur(5px);
    user-select: none;
    pointer-events: none;
}

/* ── Sound toggle ON state ───────────────────────────────────────────────── */
#sound-toggle.sound-on {
    background-color: rgb(245 158 11); /* amber-500 */
}

/* ── Theme toggle ON state ───────────────────────────────────────────────── */
#theme-toggle.theme-on {
    background-color: rgb(245 158 11); /* amber-500 */
}

/* ── Light theme ─────────────────────────────────────────────────────────── */
html[data-theme="light"] body {
    background-color: #f4f4f5;
    color: #18181b;
}
html[data-theme="light"] nav {
    background-color: #ffffff !important;
    border-color: #e4e4e7 !important;
}
html[data-theme="light"] nav span,
html[data-theme="light"] nav a {
    color: #3f3f46;
}
html[data-theme="light"] footer {
    border-color: #e4e4e7;
    color: #a1a1aa;
}
html[data-theme="light"] .category-header {
    background-color: rgba(228,228,231,0.8) !important;
    color: #52525b;
}
html[data-theme="light"] .product-row {
    background-color: #ffffff !important;
    border-color: rgba(228,228,231,0.6) !important;
}
html[data-theme="light"] .product-row:hover {
    background-color: #f4f4f5 !important;
}
html[data-theme="light"] .product-row .text-zinc-100 {
    color: #18181b !important;
}
html[data-theme="light"] #settings-panel {
    background-color: #f4f4f5;
    border-color: #e4e4e7;
}
html[data-theme="light"] #settings-panel .text-zinc-100 {
    color: #18181b;
}
html[data-theme="light"] #settings-panel .text-zinc-200 {
    color: #27272a;
}
html[data-theme="light"] #settings-panel .text-zinc-300 {
    color: #3f3f46;
}
html[data-theme="light"] #settings-panel .text-zinc-500 {
    color: #71717a;
}
html[data-theme="light"] #settings-panel .bg-zinc-800 {
    background-color: #e4e4e7;
}
html[data-theme="light"] #settings-panel .border-zinc-800 {
    border-color: #d4d4d8;
}
html[data-theme="light"] #settings-panel .hover\:bg-zinc-800:hover {
    background-color: #e4e4e7;
}
html[data-theme="light"] #top-banner {
    background-color: #fef3c7 !important;
    border-color: #fcd34d !important;
    color: #92400e !important;
}
html[data-theme="light"] #shop-closed-notice {
    background-color: #fee2e2 !important;
    border-color: #fca5a5 !important;
    color: #991b1b !important;
}
html[data-theme="light"] #last-update-bar {
    color: #a1a1aa;
}
html[data-theme="light"] .rounded-b-xl.border.border-t-0.border-zinc-800 {
    border-color: #e4e4e7;
}