/* ============================================
   Zavolať Obsluhu – Custom Styles
   ============================================ */

/* Spinner animation for QR scan verifying state */
@keyframes qr-spin {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

/* Slide-up animation for QR scanner modal */
@keyframes slide-up {
    from {
        transform: translateY(100%);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

.animate-slide-up {
    animation: slide-up 0.3s ease-out;
}

/* QR scanner video container */
#qr-reader video {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover;
    border-radius: 0;
}

#qr-reader {
    border: none !important;
    padding: 0 !important;
}

/* Hide html5-qrcode default UI elements we don't need */
#qr-reader__dashboard {
    display: none !important;
}

#qr-reader__status_span {
    display: none !important;
}

#qr-reader__header_message {
    display: none !important;
}

/* Scanning overlay frame */
#qr-shaded-region {
    border-color: rgba(249, 115, 22, 0.6) !important;
}

/* Feature grid icon background colors */
.icon-call  { background-color: #43B7D8; }
.icon-menu  { background-color: #0EB80E; }
.icon-order { background-color: #FD9A2D; }
.icon-bill  { background-color: #E53E3E; }
.icon-pay   { background-color: #FFC44B; }
.icon-rate  { background-color: #25839E; }

/* Prose/content styling overrides */
.prose ul {
    list-style-type: disc;
}

.prose li {
    margin-top: 0.25rem;
    margin-bottom: 0.25rem;
}

/* Safe area padding for iOS */
@supports (padding-bottom: env(safe-area-inset-bottom)) {
    footer {
        padding-bottom: calc(0.5rem + env(safe-area-inset-bottom));
    }
}

/* Smooth scrolling */
html {
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
}

/* ── Dark mode color-scheme hint ── */
html.dark {
    color-scheme: dark;
}

/* ── Dev page navigator dropdown ── */
#dev-nav .dev-page-dropdown {
    display: none;
    opacity: 0;
    transform: translateY(-4px);
    transition: opacity 0.15s ease, transform 0.15s ease;
}

#dev-nav.open .dev-page-dropdown {
    display: block;
    opacity: 1;
    transform: translateY(0);
}

#dev-nav.open .dev-chevron {
    transform: rotate(180deg);
}

/* ── Language switcher dropdown ── */
#lang-switcher .lang-dropdown {
    display: none;
    opacity: 0;
    transform: translateY(-4px);
    transition: opacity 0.15s ease, transform 0.15s ease;
}

#lang-switcher:hover .lang-dropdown,
#lang-switcher.open .lang-dropdown {
    display: block;
    opacity: 1;
    transform: translateY(0);
}

#lang-switcher:hover .dropdown-chevron,
#lang-switcher.open .dropdown-chevron {
    transform: rotate(180deg);
}