/* Safe-area variables: iOS Mobile Safari resolves env(safe-area-inset-*) natively when the
   viewport meta tag includes viewport-fit=cover (set in MapLayout.razor's HeadContent). */
:root {
    --safe-area-inset-top: env(safe-area-inset-top, 0px);
    --safe-area-inset-right: env(safe-area-inset-right, 0px);
    --safe-area-inset-bottom: env(safe-area-inset-bottom, 0px);
    --safe-area-inset-left: env(safe-area-inset-left, 0px);
}

html, body {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    scroll-behavior: smooth;
    margin: 0;
    padding: 0;
    height: 100%;
}

/* Map shell takes over the viewport — lock html/body so iOS Mobile Safari can't pull-to-refresh
   or rubber-band the page when the user drags on the map, the restaurant card, or the filter
   sheet. Inner scroll containers (search results, expanded card body, filter form) handle their
   own scrolling. The marketing/landing routes opt in to scrolling explicitly via their layouts. */
html.app-shell-locked,
html.app-shell-locked body {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    overscroll-behavior: none;
    -webkit-overflow-scrolling: touch;
    touch-action: manipulation;
}

/* Fix for iOS viewport height — older iOS Safari miscomputes 100vh. dvh handles it modernly,
   the -webkit-fill-available fallback covers older WebKit. */
.h-full-ios {
    height: 100%;
    height: -webkit-fill-available;
    min-height: -webkit-fill-available;
    height: 100dvh;
}

/* Safe-area padding utilities — match Mobile project so the same Razor markup renders the
   same layout on web and in the BlazorWebView. */
.safe-area-padding-top {
    padding-top: var(--safe-area-inset-top);
}

.safe-area-padding-bottom {
    padding-bottom: var(--safe-area-inset-bottom);
}

.safe-area-padding-left {
    padding-left: var(--safe-area-inset-left);
}

.safe-area-padding-right {
    padding-right: var(--safe-area-inset-right);
}

a, .btn-link {
    color: #006bb7;
}

.btn-primary {
    color: #fff;
    background-color: #1b6ec2;
    border-color: #1861ac;
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
    box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

.content {
    padding-top: 1.1rem;
}

h1:focus {
    outline: none;
}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid #26b050;
}

.invalid {
    outline: 1px solid #e50000;
}

.validation-message {
    color: #e50000;
}

/* Branded error snackbar — visual language matches AlertBanner.razor at Severity=Error.
   Bottom-anchored, lifted above where BottomNav sits on mobile (h-16 + safe-area). */
#blazor-error-ui {
    display: none;
    position: fixed;
    left: 1rem;
    right: 1rem;
    bottom: calc(72px + env(safe-area-inset-bottom));
    max-width: 28rem;
    margin: 0 auto;
    background-color: #fff;
    color: #7f1d1d;
    border: 1px solid #fecaca;
    border-radius: 0.5rem;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
    overflow: hidden;
    z-index: 10000;
    font-size: 0.875rem;
    line-height: 1.5;
}

@media (min-width: 768px) {
    #blazor-error-ui {
        left: auto;
        right: 1.5rem;
        bottom: 1.5rem;
        margin: 0;
    }
}

    #blazor-error-ui .blazor-error-ui__accent {
        position: absolute;
        inset: 0 auto 0 0;
        width: 4px;
        background-color: #dc2626;
    }

    #blazor-error-ui .blazor-error-ui__body {
        display: flex;
        align-items: flex-start;
        gap: 0.75rem;
        padding: 0.875rem 0.875rem 0 1rem;
    }

    #blazor-error-ui .blazor-error-ui__icon {
        flex-shrink: 0;
        width: 1.25rem;
        height: 1.25rem;
        margin-top: 0.125rem;
        color: #ef4444;
    }

    #blazor-error-ui .blazor-error-ui__content {
        flex: 1;
        min-width: 0;
    }

    #blazor-error-ui .blazor-error-ui__title {
        margin: 0;
        font-weight: 600;
        color: #7f1d1d;
    }

    #blazor-error-ui .blazor-error-ui__message {
        margin: 0.125rem 0 0;
        color: #991b1b;
    }

    #blazor-error-ui .dismiss {
        flex-shrink: 0;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 2rem;
        height: 2rem;
        margin: -0.25rem -0.25rem 0 0;
        background: transparent;
        border: 0;
        border-radius: 0.375rem;
        color: #991b1b;
        cursor: pointer;
    }

        #blazor-error-ui .dismiss:hover {
            background-color: rgba(127, 29, 29, 0.08);
        }

        #blazor-error-ui .dismiss svg {
            width: 1rem;
            height: 1rem;
        }

    #blazor-error-ui .blazor-error-ui__actions {
        display: flex;
        justify-content: flex-end;
        padding: 0.5rem 0.875rem 0.875rem;
    }

    #blazor-error-ui .reload {
        display: inline-flex;
        align-items: center;
        padding: 0.375rem 0.875rem;
        background-color: #dc2626;
        color: #fff;
        font-weight: 600;
        font-size: 0.8125rem;
        text-decoration: none;
        border-radius: 0.375rem;
    }

        #blazor-error-ui .reload:hover {
            background-color: #b91c1c;
        }

/* Component-level error fallback — same red palette as the snackbar above, calmer block style. */
.blazor-error-boundary {
    background-color: #fef2f2;
    border: 1px solid #fecaca;
    border-left: 4px solid #dc2626;
    border-radius: 0.5rem;
    color: #7f1d1d;
    padding: 1rem 1.25rem;
    font-size: 0.875rem;
    line-height: 1.5;
}

    .blazor-error-boundary::after {
        content: "Something went wrong rendering this section.";
        font-weight: 600;
    }

.darker-border-checkbox.form-check-input {
    border-color: #929292;
}

.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
    color: var(--bs-secondary-color);
    text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
    text-align: start;
}

/* BEGIN Landing Page */

@keyframes rotate {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes bounce {
    0%, 100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-10px);
    }
}

@keyframes orbit {
    from {
        transform: rotate(0deg) translateX(150px) rotate(0deg);
    }

    to {
        transform: rotate(360deg) translateX(150px) rotate(-360deg);
    }
}

@keyframes pulse {
    0%, 100% {
        transform: scale(1);
        opacity: 0.5;
    }

    50% {
        transform: scale(1.1);
        opacity: 0.8;
    }
}

.fade-in-up {
    animation: fadeInUp 0.8s ease forwards;
}

.fade-in-up-delay-1 {
    opacity: 0;
    animation: fadeInUp 0.8s ease 0.2s forwards;
}

.fade-in-up-delay-2 {
    opacity: 0;
    animation: fadeInUp 0.8s ease 0.4s forwards;
}

.map-pin {
    animation: bounce 2s ease-in-out infinite;
}

.sun-simulation {
    animation: orbit 10s linear infinite;
}

.pulse-bg::before {
    content: '';
    position: absolute;
    top: -50%;
    right: -20%;
    width: 600px;
    height: 600px;
    background: radial-gradient(circle, rgba(255, 107, 53, 0.1) 0%, transparent 70%);
    animation: pulse 4s ease-in-out infinite;
}


/* END Landing Page */

/* BEGIN NavMenu */

@keyframes rotate {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

#navbar.scrolled {
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
}

section[id] {
    scroll-margin-top: 80px;
}

@media (min-width: 768px) {
    section[id] {
        scroll-margin-top: 100px; 
    }
}

/* END NavMenu */

@layer components {
    .flowbite-range::-webkit-slider-thumb {
        -webkit-appearance: none;
        appearance: none;
        width: 1.25rem;
        height: 1.25rem;
        background-color: #3b82f6;
        border-radius: 50%;
        border: none;
        cursor: pointer;
        box-shadow: 0 0 1px 1px #ced4da;
    }

    .flowbite-range::-moz-range-thumb {
        width: 1.25rem;
        height: 1.25rem;
        background-color: #3b82f6;
        border-radius: 50%;
        border: none;
        cursor: pointer;
        box-shadow: 0 0 1px 1px #ced4da;
    }

    .dark .flowbite-range::-webkit-slider-thumb {
        background-color: #2563eb;
        box-shadow: 0 0 1px 1px #4b5563;
    }

    .dark .flowbite-range::-moz-range-thumb {
        background-color: #2563eb;
        box-shadow: 0 0 1px 1px #4b5563;
    }
}