/* Theme & Wallpaper CSS Variables */

:root {
    /* Wallpaper overlay backdrop opacity */
    --wallpaper-backdrop: rgba(6, 10, 18, 0.42);
    --wallpaper-transition-duration: 1s;
    --wallpaper-transition-timing: ease-in-out;
    --kiosk-overlay-size: 84px;
    --kiosk-overlay-edge-offset: clamp(0.65rem, 1.6vw, 1.1rem);
    --safe-area-top: max(0px, env(safe-area-inset-top));
    --safe-area-right: max(0px, env(safe-area-inset-right));
    --safe-area-bottom: max(0px, env(safe-area-inset-bottom));
    --safe-area-left: max(0px, env(safe-area-inset-left));
    --ui-control-radius: 0.875rem;
    --ui-glass-strength: 1;
    --settings-shell-surface: rgba(var(--bs-body-bg-rgb), 0.88);
}

:root[data-theme-flavor='glass'] {
    --ui-glass-strength: 0.72;
    --wallpaper-backdrop: rgba(6, 10, 18, 0.34);
    --settings-shell-surface: rgba(var(--bs-body-bg-rgb), 0.82);
}

:root[data-theme-flavor='contrast'] {
    --ui-glass-strength: 1.08;
    --wallpaper-backdrop: rgba(6, 10, 18, 0.5);
    --settings-shell-surface: rgba(var(--bs-body-bg-rgb), 0.94);
}

.btn,
.form-control,
.form-select,
.input-group-text {
    border-radius: var(--ui-control-radius);
}

body {
    padding-left: var(--safe-area-left);
    padding-right: var(--safe-area-right);
}

html[data-ios-standalone='true'] body,
.kiosk-body {
    padding-top: var(--safe-area-top);
    padding-bottom: var(--safe-area-bottom);
}

/* Wallpaper overlay styling */
.wallpaper-overlay {
    position: fixed;
    inset: 0;
    z-index: 1900;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--wallpaper-backdrop);
    transition: opacity var(--wallpaper-transition-duration) var(--wallpaper-transition-timing), transform var(--wallpaper-transition-duration) var(--wallpaper-transition-timing);
}

.wallpaper-overlay::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at top, rgba(255, 255, 255, 0.08), transparent 38%),
        linear-gradient(180deg, rgba(8, 12, 18, 0.12), rgba(8, 12, 18, 0.34));
    pointer-events: none;
}

.wallpaper-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    animation: wallpaper-fade-in var(--wallpaper-transition-duration) var(--wallpaper-transition-timing);
}

.kiosk-overlay-controls {
    position: fixed;
    inset: 0;
    z-index: 2000;
    pointer-events: none;
}

.kiosk-exit-btn {
    position: fixed;
    right: max(var(--kiosk-overlay-edge-offset), calc(env(safe-area-inset-right) + var(--kiosk-overlay-edge-offset)));
    bottom: max(var(--kiosk-overlay-edge-offset), calc(env(safe-area-inset-bottom) + var(--kiosk-overlay-edge-offset)));
    z-index: 2000;
    width: var(--kiosk-overlay-size);
    height: var(--kiosk-overlay-size);
    min-width: 56px;
    min-height: 56px;
    border: 1px solid var(--bs-border-color);
    border-radius: 50%;
    background: color-mix(in srgb, var(--bs-body-bg) 82%, transparent);
    color: var(--bs-body-color);
    cursor: pointer;
    font-size: 1.65rem;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    pointer-events: auto;
    touch-action: manipulation;
    -webkit-user-select: none;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    transition: opacity 220ms ease, transform 220ms ease, background-color 220ms ease, box-shadow 220ms ease;
}

.kiosk-home-btn {
    position: fixed;
    left: max(var(--kiosk-overlay-edge-offset), calc(env(safe-area-inset-left) + var(--kiosk-overlay-edge-offset)));
    bottom: max(var(--kiosk-overlay-edge-offset), calc(env(safe-area-inset-bottom) + var(--kiosk-overlay-edge-offset)));
    z-index: 2000;
    width: var(--kiosk-overlay-size);
    height: var(--kiosk-overlay-size);
    min-width: 56px;
    min-height: 56px;
    border: 1px solid var(--bs-border-color);
    border-radius: 50%;
    background: color-mix(in srgb, var(--bs-body-bg) 82%, transparent);
    color: var(--bs-body-color);
    cursor: pointer;
    font-size: 1.65rem;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    pointer-events: auto;
    touch-action: manipulation;
    -webkit-user-select: none;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    transition: opacity 220ms ease, transform 220ms ease, background-color 220ms ease, box-shadow 220ms ease;
}

.kiosk-home-btn:hover,
.kiosk-exit-btn:hover {
    transform: translateY(-1px) scale(1.02);
    background: color-mix(in srgb, var(--bs-body-bg) 88%, transparent);
}

.kiosk-home-btn:active,
.kiosk-exit-btn:active {
    transform: scale(0.96);
}

.kiosk-home-btn:focus-visible,
.kiosk-exit-btn:focus-visible {
    outline: 2px solid var(--bs-primary);
    outline-offset: 3px;
}

.kiosk-home-btn i,
.kiosk-exit-btn i {
    pointer-events: none;
}

.kiosk-overlay-controls .kiosk-overlay-hidden {
    opacity: 0;
    transform: translateY(0.5rem) scale(0.96);
    pointer-events: none;
}

.kiosk-body nav.navbar,
.kiosk-body footer,
.kiosk-body main > hr {
    display: none !important;
}

.kiosk-body main {
    padding-top: 0;
}

@media (max-width: 576px) {
    :root {
        --kiosk-overlay-size: 78px;
    }

    .kiosk-home-btn,
    .kiosk-exit-btn {
        font-size: 1.45rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .kiosk-home-btn,
    .kiosk-exit-btn,
    .kiosk-overlay-controls .kiosk-overlay-hidden {
        transition: none;
    }
}

.wallpaper-overlay[data-transition='slide'] .wallpaper-image {
    animation: wallpaper-slide-in var(--wallpaper-transition-duration) var(--wallpaper-transition-timing);
}

@keyframes wallpaper-fade-in {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@keyframes wallpaper-slide-in {
    from {
        opacity: 0;
        transform: scale(1.03) translateX(1.5%);
    }
    to {
        opacity: 1;
        transform: scale(1) translateX(0);
    }
}

/* Alpine.js x-cloak prevents FOUC (Flash of Unstyled Content) */
[x-cloak] {
    display: none !important;
}