/* === Global Font & Base === */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600&display=swap');

/* Base */
html {
    font-size: 13px;
    position: relative;
    min-height: 100%;
}

@media (min-width: 768px) {
    html {
        font-size: 16px;
    }
}

body {
    font-family: 'Poppins', sans-serif;
    background-color: #ffffff;
    color: #333;
    line-height: 1.6;
    margin-bottom: 60px;
}

a {
    text-decoration: none;
}

.container,
.container-fluid {
    background: #ffffff !important;
    padding-block: 0.6rem;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

.navbar {
    padding-left: 10px;
    padding-right: 10px;
}

.navbar-brand {
    font-weight: 600;
    font-size: 1.3rem;
    color: #007bff !important;
    letter-spacing: 0.5px;
}

.navbar-container {
    padding-inline: clamp(6%, 10vw, 10%) !important;
}

.navbar-nav .nav-link {
    color: #444 !important;
    font-weight: 500;
    margin-inline: 0.3rem;
    transition: all 0.2s ease-in-out;
}

    .navbar-nav .nav-link:hover {
        color: #007bff !important;
        text-decoration: underline;
        text-underline-offset: 4px;
    }

    .navbar-nav .nav-link.active {
        color: #007bff !important;
        font-weight: 600;
    }

/* === Footer === */
.footer {
    text-align: center;
    background: #fff;
    border-top: 1px solid #eaeaea;
    font-size: 0.9rem;
    color: #666;
}

    .footer a {
        color: #007bff;
        text-decoration: none;
    }

    .footer .footer-links {
        white-space: normal;
        line-height: 1.2;
    }

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

.no-bullets ul {
    list-style: none;
    padding-left: 0;
    margin: 0;
}

/* === Dashboard layout === */
.dashboard-container {
    padding-inline: clamp(6%, 10vw, 10%);
}

.dashboard .schedule-col,
.dashboard .sidebar-col {
    flex: 0 0 100%;
    max-width: 100%;
}

@media (min-width: 992px) {
    .dashboard .schedule-col {
        flex: 0 0 75%;
        max-width: 75%;
    }

    .dashboard .sidebar-col {
        flex: 0 0 25%;
        max-width: 25%;
    }
}

@media (min-width: 1400px) {
    .dashboard-container {
        max-width: 100%;
    }
}

/* --- Week grid (scrol-less, namespaced) --- */
.dashboard .week-grid {
    display: grid;
    grid-template-columns: repeat(7, minmax(0,1fr));
    gap: .5rem;
}

@media (max-width:1400px) {
    .dashboard .week-grid {
        grid-template-columns: repeat(5,1fr);
    }
}

@media (max-width:992px) {
    .dashboard .week-grid {
        grid-template-columns: repeat(3,1fr);
    }
}

@media (max-width:768px) {
    .dashboard .week-grid {
        grid-template-columns: repeat(2,1fr);
    }
}

@media (max-width:480px) {
    .dashboard .week-grid {
        grid-template-columns: 1fr;
    }
}

.dashboard .day-card {
    border: 1px solid var(--bs-border-color);
    border-radius: .5rem;
    background: #fff;
    padding: .6rem .7rem;
}

    .dashboard .day-card header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: .5rem;
        margin-bottom: .35rem;
    }

.dashboard .day-badges .badge {
    margin-left: .25rem;
}

.dashboard .day-list {
    margin: 0;
    padding: 0;
    list-style: none;
}

    .dashboard .day-list .day-item .badge { /* reserved */
    }

    .dashboard .day-list li {
        display: flex;
        justify-content: space-between;
        gap: .5rem;
        padding: .15rem 0;
        font-size: .9rem;
    }

@media (max-width:768px) {
    .dashboard .day-list {
        display: none;
    }
}

/* === Dashboard Month Grid (namespaced & override) === */
.dashboard .month-wrap {
    width: 100%;
}

.dashboard .dow-row {
    display: grid;
    grid-template-columns: repeat(7,minmax(0,1fr));
    gap: .25rem;
    margin-bottom: .5rem;
}

.dashboard .dow {
    text-align: center;
    font-weight: 600;
    color: #6c757d;
    font-size: .9rem;
}

.dashboard .month-grid {
    display: grid;
    grid-template-columns: repeat(7,minmax(0,1fr));
    gap: .25rem;
}

.dashboard .month-cell {
    border: 1px solid var(--bs-border-color, #e9ecef);
    border-radius: .5rem;
    background: #fff;
    min-height: 90px;
    padding: .45rem .5rem;
    cursor: pointer;
    outline: 0;
}

    .dashboard .month-cell:hover {
        box-shadow: 0 0 0 2px rgba(13,110,253,.15) inset;
    }

    .dashboard .month-cell.muted {
        opacity: .55;
    }

    .dashboard .month-cell.today {
        border-color: #0d6efd;
        box-shadow: 0 0 0 1px #0d6efd inset;
    }

    .dashboard .month-cell.weekend:not(.muted) {
        background: #fcfdff;
    }

    .dashboard .month-cell.has-data:not(.muted) {
        background: linear-gradient(0deg, rgba(13,110,253,.03), rgba(13,110,253,.03)), #fff;
    }

    .dashboard .month-cell .mc-head {
        display: flex;
        justify-content: space-between;
        align-items: center;
        font-weight: 600;
        font-size: .9rem;
    }

    .dashboard .month-cell .mc-daynum {
        font-weight: 700;
    }

    .dashboard .month-cell .mc-badges .badge {
        margin-left: .25rem;
    }

    .dashboard .month-cell .mini {
        margin-top: .25rem;
        font-size: .82rem;
        line-height: 1.2;
    }

    .dashboard .month-cell .mini-row {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

        .dashboard .month-cell .mini-row .time {
            width: 3.2rem;
            display: inline-block;
            color: #0d6efd;
            font-weight: 600;
        }

    .dashboard .month-cell .more {
        margin-top: .15rem;
    }

.dashboard .rsvp-chip, .dashboard .order-chip {
    margin-bottom: 7px;
}

@media (max-width:992px) {
    .dashboard .month-cell {
        min-height: 80px;
    }
}

@media (max-width:576px) {
    .dashboard .month-wrap {
        padding-inline: .75rem;
    }

    .dashboard .dow-row {
        gap: .2rem;
    }

    .dashboard .month-grid {
        gap: .2rem;
    }

    .dashboard .month-cell {
        min-height: 66px;
        padding: .35rem .4rem;
    }

        .dashboard .month-cell .mc-head {
            font-size: .82rem;
        }

        .dashboard .month-cell .mini {
            display: none;
        }
}

/* ===== Dashboard: header searchbox sizing & layout ===== */
.card-header .searchbox {
    min-width: 260px;
    width: clamp(260px, 28vw, 360px);
}

    .card-header .searchbox .input-group > .form-control,
    .card-header .searchbox .input-group > .input-group-text,
    .card-header .searchbox .input-group > .btn {
        height: 36px;
        padding: .35rem .55rem;
        font-size: .9rem;
        border-radius: .5rem;
    }

    .card-header .searchbox .input-group-text {
        background: #fff;
    }

.card-header .d-flex.flex-wrap {
    gap: .5rem;
}

@media (max-width: 768px) {
    .card-header .searchbox {
        order: 3;
        width: 100%;
    }

        .card-header .searchbox .input-group > .form-control,
        .card-header .searchbox .input-group > .input-group-text,
        .card-header .searchbox .input-group > .btn {
            height: 34px;
            font-size: .9rem;
        }
}

.card-body .searchbox {
    padding: .5rem .75rem .25rem;
}

/* Sidebar compact */
.dashboard .sidebar-col .card .list-group-item {
    padding: .5rem .75rem;
    font-size: .95rem;
}

.dashboard .sidebar-col .card .card-body {
    padding: .75rem;
    font-size: .95rem;
}

/* Controls */
.dashboard #datePicker {
    min-width: 220px;
}

/* Table density */
.dashboard table.table td,
.dashboard table.table th {
    padding-block: .5rem;
}

/* Live badge custom colors */
#liveBadge {
    color: #fff;
}

    #liveBadge.live-connected {
        background-color: #28a745;
    }

    #liveBadge.live-updating {
        background-color: #ffc107;
        color: #000;
    }

    #liveBadge.live-disconnected {
        background-color: #dc3545;
    }

/* ==== Reservation Cards: desktop ==== */
.order-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: .9rem;
}

.order-card {
    border: 1px solid #e5e7eb;
    border-radius: .75rem;
    background: #fff;
    box-shadow: 0 1px 0 rgba(0,0,0,.02);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.oc-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: .75rem;
    padding: .8rem .95rem;
    background: #f8fafc;
    border-bottom: 1px solid #edf2f7;
}

.oc-head-left .oc-date {
    font-size: .82rem;
    color: #6b7280;
    line-height: 1.1;
}

.oc-head-left .oc-time {
    font-weight: 700;
    color: #198754;
    margin-top: .1rem;
}

.oc-body {
    padding: .9rem .95rem .85rem;
    display: flex;
    flex-direction: column;
    gap: .45rem;
}

@media (min-width: 992px) {
    .order-card {
        flex-direction: row;
    }

    .oc-body {
        flex: 1 1 auto;
    }

    .oc-right {
        width: 200px;
        border-left: 1px solid #edf2f7;
        padding: .75rem .95rem .95rem;
        display: flex;
        align-items: flex-start;
    }
}

.oc-badge {
    display: inline-block;
    padding: .28rem .55rem;
    border-radius: 999px;
    font-size: .78rem;
    line-height: 1;
    font-weight: 700;
}

    .oc-badge.confirmed {
        background: #e6f4ea;
        color: #137333;
    }

    .oc-badge.pending {
        background: #fff8e1;
        color: #8a6d00;
    }

    .oc-badge.canceled {
        background: #f5e5e6;
        color: firebrick;
    }

    .oc-badge.noshow {
        background: #fefbec;
        color: #ffc107;
    }

    .oc-badge.completed {
        background: #e9ecff;
        color: #0d6efd;
    }

    .oc-badge.neutral {
        background: #eef2ff;
        color: #3730a3;
    }

.oc-line {
    display: flex;
    gap: .6rem;
    align-items: flex-start;
}

    .oc-line b {
        width: 100px;
        flex: 0 0 100px;
        color: #6b7280;
        font-weight: 600;
    }

    .oc-line span, .oc-line a {
        flex: 1 1 auto;
        min-width: 0;
    }

.oc-cols {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: .35rem;
}

.oc-services {
    margin-top: .2rem;
    font-weight: 600;
}

.oc-memo {
    margin-top: .1rem;
    font-size: .88rem;
    color: #6c757d;
    word-break: normal;
    overflow-wrap: anywhere;
}

.oc-actions {
    display: flex;
    gap: .4rem;
    flex-wrap: wrap;
}

@media (min-width: 992px) {
    .oc-actions {
        flex-direction: column;
        gap: .5rem;
        width: 100%;
    }

        .oc-actions .btn {
            width: 100%;
        }
}

.break-anywhere {
    overflow-wrap: anywhere;
    word-break: normal;
}

/* New Customer modal popup */
.nr-date {
    font-weight: 600;
}

.nr-time {
    font-weight: bold;
    color: green;
    font-size: 0.95rem;
}

/* Business Hours editor */
.bh-hours details.interval summary {
    list-style: none;
    cursor: pointer;
}

    .bh-hours details.interval summary::-webkit-details-marker {
        display: none;
    }

.bh-hours .interval-chip {
    display: inline-block;
    padding: .25rem .5rem;
    border: 1px solid #dee2e6;
    background: #f8f9fa;
    border-radius: .5rem;
}

.bh-hours .intervals-wrap > * {
    margin: .25rem .4rem .25rem 0;
}

/* ==== Customer Detail ==== */
.kv {
    display: grid;
    grid-template-columns: 140px 1fr;
    gap: .25rem .75rem;
}

@media (max-width: 576px) {
    .kv {
        grid-template-columns: 1fr;
    }

        .kv b {
            margin-top: .5rem;
        }
}

.pill {
    display: inline-block;
    padding: .15rem .5rem;
    border-radius: 999px;
    font-size: .75rem;
}

.pill-ok {
    background: #e6f4ea;
    color: #137333;
}

.pill-no {
    background: #fce8e6;
    color: #b3261e;
}

.dz {
    border: 2px dashed #ced4da;
    border-radius: .5rem;
    padding: 1rem;
    text-align: center;
    cursor: pointer;
}

    .dz.drag {
        background: #f8f9fa;
    }

.thumb-wrap {
    position: relative;
}

    .thumb-wrap .del {
        position: absolute;
        top: .25rem;
        right: .25rem;
    }

.img-square-cover {
    width: 100%;
    aspect-ratio: 1/1;
    object-fit: cover;
}

.modal-img-contain {
    width: 100%;
    height: 100vh;
    object-fit: contain;
}

/* Service Item on RSVP page */
.svc-item.qty {
    display: flex;
    align-items: center;
    gap: .75rem;
    border: 1px solid var(--bs-border-color);
    border-radius: .5rem;
    padding: .6rem .7rem;
    background: #fff
}

.svc-qty {
    display: flex;
    align-items: center;
    gap: .4rem
}

/* Reservation History page only */
#reservation-history .h-item + .h-item {
    border-top: 1px solid #eee;
}

#reservation-history .h-meta {
    font-size: .85rem;
    color: #6c757d;
}

#reservation-history .h-item.is-selected {
    background: #eef5ff;
    border-left: 4px solid #0d6efd;
}

#reservation-history .badge {
    display: inline-block;
    min-width: 90px;
    text-align: center;
    padding: 0.45em 0.6em;
    font-size: 0.85rem;
    border-radius: 0.35rem;
}

    #reservation-history .badge.status-confirmed {
        background-color: #28a745;
        color: #fff;
    }

    #reservation-history .badge.status-completed {
        background-color: #007bff;
        color: #fff;
    }

    #reservation-history .badge.status-canceled {
        background-color: #333;
        color: #fff;
    }

    #reservation-history .badge.status-pending {
        background-color: #ffc107;
        color: #212529;
    }

    #reservation-history .badge.status-noshow {
        background-color: #dc3545;
        color: #fff;
    }

/* ===== Hero layout ===== */
.hero {
    position: relative;
    min-height: 60vh !important; 
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    text-align: center;
    overflow: hidden;
}

.hero__overlay {
    position: absolute;
    inset: 0;
    z-index: 2;
    background: linear-gradient(180deg, rgba(0,0,0,.35), rgba(0,0,0,.65));
}

.hero .container, .hero .container-fluid {
    background: transparent !important;
}

.hero__content {
    position: relative;
    z-index: 3;
}

    .hero__content .wrap {
        max-width: 980px;
        margin: 0 auto;
        padding: 0 16px;
        background: transparent;
    }

.hero__title {
    font-weight: 800;
    letter-spacing: .2px;
}

/* ===== Cross-fade slider ===== */
.hero__bg, .hero__bg--next {
    position: absolute;
    inset: 0;
    z-index: 1;
    background-size: cover;
    background-position: center;
    transform: translateZ(0);
}

.hero__bg {
    opacity: 1;
    transition: opacity .8s ease;
}

.hero__bg--next {
    opacity: 0;
    transition: opacity .8s ease;
}

.is-visible {
    opacity: 1 !important;
}

.features .card {
    border: 0;
}

@media (prefers-reduced-motion: reduce) {
    .hero__bg, .hero__bg--next {
        transition: none !important;
    }
}

/* === Reservation Page === */
#reservePage {
    font-family: 'Poppins', sans-serif;
    line-height: 1.6;
    color: #333;
}

#reserveHero {
    background: linear-gradient(135deg, #258cfb, #6a11cb);
    color: #fff;
    border-radius: .75rem;
    padding: clamp(2rem, 6vw, 4rem);
    text-align: center;
}

    #reserveHero .hero-title {
        font-weight: 800;
        margin-bottom: .5rem;
    }

    #reserveHero .hero-tagline {
        font-size: 1.1rem;
        opacity: .95;
    }

    #reserveHero #heroCall {
        font-weight: 600;
    }

#reserveBox .card {
    border: none;
    box-shadow: 0 8px 24px rgba(0,0,0,.08);
    border-radius: 18px;
}

#reservePage .form-section-title {
    font-size: .95rem;
    font-weight: 700;
    letter-spacing: .04em;
    color: #6c757d;
    text-transform: uppercase;
    margin-bottom: .5rem;
}

#reservePage .form-check-label.small {
    font-size: .8rem;
    line-height: 1.45
}

/* Services Grid */
#reservePage .svc-list-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: .75rem;
}

@media (min-width: 576px) {
    #reservePage .svc-list-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

#reservePage .svc-list-grid .svc-item {
    border: 1px solid #e9ecef;
    border-radius: 14px;
    padding: .9rem 1rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    transition: box-shadow .2s ease, border-color .2s ease, background .2s ease;
}

    #reservePage .svc-list-grid .svc-item input[type=checkbox] {
        width: 1.1rem;
        height: 1.1rem;
    }

    #reservePage .svc-list-grid .svc-item:hover {
        border-color: #cfe2ff;
        background: #f8faff;
    }

#reservePage .svc-list-grid .svc-title {
    font-weight: 600;
}

#reservePage .svc-list-grid .svc-meta {
    font-size: .85rem;
    color: #6c757d;
    overflow-wrap: anywhere;
    word-break: break-word;
}

#reservePage .svc-list-grid .svc-desc {
    font-size: 0.75rem;
    line-height: 1.3;
}

#reservePage #GuestCount {
    max-width: 200px;
}

#reservePage .help {
    font-size: .85rem;
    color: #6c757d;
}

#reservePage button[type=submit] {
    max-width: 280px;
}

#reservePage .sticky-submit {
    position: sticky;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 20;
    background: #fff;
    padding: .75rem;
    border-top: 1px solid #eee;
}

@media (min-width: 768px) {
    #reservePage .sticky-submit {
        position: static;
        padding: 0;
        border: 0;
    }
}
/* Compact inputs for mobile */
@media (max-width: 767.98px) {
    #reservePage .form-control, #reservePage .form-select {
        padding-top: .6rem;
        padding-bottom: .6rem;
    }
}

@media (max-width: 576px) {
    #reservePage .btn-lg {
        width: 100%;
        padding-left: 1rem;
        padding-right: 1rem;
    }
}

/* Flatpickr availability dot */
.flatpickr-calendar .flatpickr-day.has-avail {
    position: relative;
}

.flatpickr-calendar .flatpickr-day .avail-dot {
    position: absolute;
    left: 50%;
    bottom: 4px;
    transform: translateX(-50%);
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #0d6efd;
    pointer-events: none;
    z-index: 2;
}

/* Customers page tweaks */
#page-customers .control-row {
    --bs-gutter-x: 1.25rem;
    --bs-gutter-y: .5rem;
}

#page-customers .w-bday {
    width: 100%;
    max-width: 140px;
    min-width: 0;
}

#page-customers .opt-toggle .btn {
    min-width: 3.25rem;
    padding-top: .38rem;
    padding-bottom: .38rem;
    line-height: 1.2;
}

#page-customers input[type="date"] {
    position: relative;
    z-index: 1;
}

#page-customers .opt-toggle {
    position: relative;
    z-index: 0;
}

/* ===== Calendar Nav ===== */
.calendar-nav .nav-btn {
    min-width: 44px;
    min-height: 44px;
    padding: .5rem .75rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: .75rem;
    line-height: 1;
    font-weight: 600;
}

    .calendar-nav .nav-btn:focus-visible {
        outline: 3px solid rgba(13,110,253,.35);
        outline-offset: 2px;
    }

/* ======= Calendar clean style ======= */
.month-grid.refined {
    background: #f8f9fa;
    padding: 4px;
    border-radius: .5rem;
}

    .month-grid.refined .month-cell {
        background: #ffffff;
        border: 1px solid #e9ecef;
        border-radius: .5rem;
        padding: .5rem;
        min-height: 90px;
    }

        .month-grid.refined .month-cell.muted {
            background: #f1f3f5;
        }

        .month-grid.refined .month-cell.today {
            background: #e7f1ff;
            border-color: #0d6efd;
        }

.week-grid {
    background: #f8f9fa;
    padding: 6px;
    border-radius: .5rem;
}

    .week-grid .day-card {
        background: #ffffff;
        border: 1px solid #e9ecef;
        border-radius: .5rem;
        padding: .75rem;
    }

        .week-grid .day-card.today {
            background: #e7f1ff;
            border-color: #0d6efd;
        }

        .week-grid .day-card:hover, .month-grid.refined .month-cell:hover {
            background: #fdfdfd;
            border-color: #ced4da;
        }

/* Card */
.day-card, .month-cell {
    background: #fff;
    border: 1px solid var(--bs-border-color);
    border-radius: .5rem;
    padding: .65rem .75rem;
    transition: background .15s ease, border-color .15s ease;
}

    .day-card:hover, .month-cell:hover {
        background: #f8f9fa;
        border-color: #dee2e6;
    }

    .day-card.today, .month-cell.today {
        border-color: #0d6efd;
        background: #f0f6ff;
    }

/* Headers */
.day-head, .mc-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin-bottom: .4rem;
}

.day-title {
    font-weight: 600;
    font-size: .95rem;
}

    .day-title span {
        color: #6c757d;
        font-weight: 500;
        font-size: .9rem;
    }

.mc-daynum {
    font-weight: 600;
    font-size: .95rem;
}

.day-badges .badge, .mc-badges .badge {
    margin-left: .25rem;
    color: #dc3545;
}

/* List */
.day-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: .25rem;
    font-size: .9rem;
}

.day-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.di-left {
    display: flex;
    align-items: center;
    gap: .35rem;
    min-width: 0;
}

    .di-left .time {
        color: #0d6efd;
        font-weight: 500;
    }

    .di-left .who {
        color: #495057;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 12ch;
    }
/* Empty state */
.empty {
    color: #6c757d;
    font-size: .9rem;
}
/* Month mini */
.month-cell .mini {
    margin-top: .25rem;
    font-size: .85rem;
    line-height: 1.25;
}

.month-cell .mini-row .time {
    font-weight: 500;
    margin-right: .25rem;
}

.month-cell.muted {
    opacity: .6;
}

.calendar-nav .btn-group {
    margin-left: auto;
}

.calendar-nav .nav-btn {
    min-width: 32px;
    min-height: 32px;
    padding: .25rem .5rem;
    font-size: .9rem;
    border-radius: .4rem;
}

.calendar-nav .fw-semibold {
    font-weight: 600;
    font-size: .95rem;
}

.week-grid .day-list li, .week-grid .day-list {
    list-style: none;
}

.week-grid .empty::before, .week-grid .day-card *::marker {
    content: none;
}

@media (max-width: 576px) {
    .dashboard .day-card, .dashboard .month-cell {
        position: relative;
    }

        .dashboard .day-card.has-data::after,
        .dashboard .month-cell.has-data::after {
            content: "";
            position: absolute;
            width: 8px;
            height: 8px;
            border-radius: 50%;
            background: #0d6efd;
            top: .5rem;
            left: .5rem;
        }

        .dashboard .day-badges, .dashboard .day-list, .dashboard .month-cell .mini {
            display: none !important;
        }

        .dashboard .day-title, .dashboard .month-cell header {
            font-size: .9rem;
        }
}

/* Store page scoped styles */
#store-page .w-zip {
    max-width: 140px;
}

#store-page .w-state {
    max-width: 100px;
}

#store-page .w-country {
    max-width: 160px;
}

#store-page .w-phone {
    max-width: 260px;
}

#store-page .w-email {
    max-width: 420px;
}

#store-page .w-mins {
    max-width: 200px;
}

#store-page .w-time-sm {
    width: 120px;
}

#store-page .w-radio-row .form-check {
    margin-right: 1rem;
}

#store-page .form-section-title,
#store-page #basic-info h6,
#store-page #address h6,
#store-page #timezone h6,
#store-page #settings h6 {
    letter-spacing: .04em;
}

#store-page .interval-chip {
    display: inline-block;
    padding: .25rem .5rem;
    border: 1px solid rgba(0,0,0,.1);
    border-radius: .375rem;
    margin: .125rem .25rem .125rem 0;
    background: #f8f9fa;
    font-size: .875rem;
}

#store-page #timezone-row .form-text {
    margin-top: .25rem;
}

/* Order Css  */
:root {
    --order-accent: #0d6efd;
}

/* HERO (single definition; duplicates removed) */
#orderHero {
    background: linear-gradient(135deg,#258cfb,#6a11cb);
    color: #fff;
    border-radius: .75rem;
    padding: clamp(2rem,6vw,4rem);
    text-align: center;
}

    #orderHero .hero-title {
        font-weight: 800;
        margin-bottom: .5rem;
    }

    #orderHero .hero-tagline {
        font-size: 1.1rem;
        opacity: .95;
    }

    #orderHero #heroCall {
        font-weight: 600;
    }

/* Mobile category pills */
.cat-pills {
    position: sticky;
    top: 62px;
    z-index: 5;
    background: #fff;
    padding: .5rem 0;
    border-bottom: 1px solid var(--bs-border-color);
}

.pill-scroller {
    display: flex;
    gap: .5rem;
    overflow-x: auto;
    padding: 0 .75rem;
    scroll-snap-type: x proximity;
}

.pill {
    white-space: nowrap;
    scroll-snap-align: start;
    border: 1px solid var(--bs-border-color);
    border-radius: 999px;
    padding: .45rem .85rem;
    font-size: .95rem;
    color: #333;
    text-decoration: none;
}

    .pill.active {
        background: var(--order-accent);
        color: #fff;
        border-color: var(--order-accent);
    }

/* Desktop side nav active */
#orderPage .nav-link-cat.active {
    background: var(--order-accent);
    color: #fff;
}

/* Item list (mobile-first) */
.menu-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.menu-row {
    padding: .85rem .95rem;
    border-bottom: 1px solid var(--bs-border-color);
    cursor: pointer;
}

    .menu-row:active {
        background: #f7f9ff;
    }

    .menu-row .name {
        font-weight: 600;
    }

    .menu-row .desc {
        font-size: .88rem;
        color: #6c757d;
        margin-top: 2px;
    }

    .menu-row .price {
        font-weight: 700;
    }

    .menu-row .thumb {
        width: 72px;
        height: 72px;
        object-fit: cover;
        border-radius: .5rem;
        margin-top: .35rem;
    }

@media (min-width: 992px) {
    .menu-row {
        padding: 1rem 1.25rem;
    }

        .menu-row .thumb {
            display: none;
        }
}

/* Variant pills in modal */
.variant-pill-group {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
}

.variant-pill .form-check-input {
    display: none;
}

.variant-pill .form-check-label {
    background: #fff;
    border: 1px solid var(--bs-border-color);
    border-radius: 999px;
    padding: .45rem .8rem;
    cursor: pointer;
}

.variant-pill .form-check-input:checked + .form-check-label {
    background: #f0f6ff;
    border-color: var(--order-accent);
    box-shadow: 0 0 0 .15rem rgba(13,110,253,.15);
}

/* Modal images */
#itemModal .item-main {
    width: 100%;
    max-height: 300px;
    object-fit: cover;
    border-radius: .5rem;
}

#itemModal .thumb {
    width: 64px;
    height: 64px;
    object-fit: cover;
    border-radius: .5rem;
    cursor: pointer;
}

/* Sticky add-to-cart footer inside modal */
.sticky-footer {
    position: sticky;
    bottom: 0;
    background: #fff;
    border-top: 1px solid var(--bs-border-color);
}

/* Mobile Mini-Cart bar */
.mini-cart {
    position: sticky;
    bottom: 0;
    left: 0;
    right: 0;
    background: #fff;
    border-top: 1px solid var(--bs-border-color);
    padding: .75rem;
    box-shadow: 0 -2px 6px rgba(0,0,0,.06);
}

.mini-cart-body {
    max-height: 120px;
    overflow-y: auto;
    margin-bottom: .5rem;
}

.mini-cart-row span:first-child {
    flex: 1;
    margin-right: .5rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mini-cart-footer .btn + form,
.mini-cart-footer form + .btn,
.mini-cart-footer .btn + .btn {
    margin-top: .25rem;
}

/* ===== Accepted Orders Modal ===== */
#acceptedOrdersModal .ao-table {
    table-layout: fixed;
}

#acceptedOrdersModal .ao-col-when {
    width: 170px;
    vertical-align: top;
}

#acceptedOrdersModal .ao-when-date {
    font-size: 1rem;
    font-weight: 600;
    color: #495057;
    text-transform: uppercase;
    letter-spacing: .02em;
}

#acceptedOrdersModal .ao-when-time {
    display: inline-block;
    margin-top: .35rem;
    padding: .35rem .75rem;
    border-radius: 999px;
    background: #0d6efd;
    color: #fff;
    font-weight: 600;
    font-size: 1.1rem;
}

#acceptedOrdersModal .ao-col-main {
    vertical-align: top;
}

#acceptedOrdersModal .ao-main-top {
    font-weight: 700;
}

#acceptedOrdersModal .ao-main-sub {
    margin-top: .25rem;
    font-size: .85rem;
    color: #6c757d;
}

#acceptedOrdersModal .ao-row {
    cursor: pointer;
}

    #acceptedOrdersModal .ao-row:hover {
        background: #fafafa;
    }

/* Manage Menu page */
#menuAdmin .w-1 {
    width: 1%;
    white-space: nowrap;
}

#menuAdmin #itemTable td, #menuAdmin #itemTable th {
    vertical-align: middle;
}

#menuAdmin #itemTable .text-wrap {
    white-space: normal;
    word-break: break-word;
}

#menuAdmin #catList .form-check-input {
    transform: translateY(1px);
}

#menuAdmin #catList .form-check-label {
    font-size: .8rem;
}

@media (max-width: 991.98px) {
    #menuAdmin #itemCards .card .form-label {
        font-size: .8rem;
    }

    #menuAdmin #itemCards .btn {
        padding-top: .35rem;
        padding-bottom: .35rem;
    }
}

#menuAdmin #itemTable small, #menuAdmin #itemCards small {
    font-size: .82rem;
}

.order-mini-row {
    align-items: stretch;
}

    .order-mini-row .pickup-time {
        min-width: 110px;
    }

        .order-mini-row .pickup-time .label {
            text-transform: uppercase;
            font-size: 0.75rem;
            color: #6c757d;
        }

        .order-mini-row .pickup-time .date {
            font-weight: 600;
            font-size: 1.1rem;
        }

        .order-mini-row .pickup-time .time {
            display: inline-block;
            background-color: #0d6efd;
            color: #fff;
            border-radius: 1rem;
            padding: 0.25rem 0.75rem;
            font-size: 0.85rem;
            margin-top: 0.25rem;
        }

/* Print */
@media print {
    html, body {
        height: auto !important;
        margin: 0 !important;
        overflow: visible !important;
    }

        body * {
            visibility: hidden !important;
        }

    #orderDetailModal, #orderDetailModal * {
        visibility: visible !important;
    }

    #orderDetailModal {
        position: absolute !important;
        left: 0 !important;
        top: 0 !important;
        right: 0 !important;
    }

        #orderDetailModal .modal-dialog {
            max-width: none !important;
            width: 100% !important;
            margin: 0 !important;
            transform: none !important;
        }

        #orderDetailModal .modal-content {
            border: 0 !important;
            box-shadow: none !important;
        }

        #orderDetailModal .modal-header, #orderDetailModal .modal-footer,
        #orderDetailModal .btn, #orderDetailModal .no-print,
        .modal-backdrop, .modal-backdrop.show {
            display: none !important;
        }

        #orderDetailModal .order-print-wrap {
            display: block !important;
            padding: 0 !important;
        }

    @page {
        margin: 12mm;
    }
}

/* === Tablet Landscape (1280x800) density mode =================== */
@media (max-width: 1280px) and (orientation: landscape) {
    html {
        font-size: 12px;
    }

    .dashboard-container {
        padding-inline: 2.5%;
    }

    .input-group > .btn, .input-group > .form-control {
        padding: .35rem .55rem;
        height: 36px;
        font-size: .9rem;
    }

    #datePicker {
        min-width: 200px;
    }

    #liveBadge {
        font-size: .75rem;
        padding: .25rem .45rem;
    }

    #toggleSoundBtn {
        padding: .25rem .5rem;
        font-size: .85rem;
    }

    .dashboard .row.g-3 {
        --bs-gutter-x: .75rem;
        --bs-gutter-y: .75rem;
    }

    .dashboard .card {
        border-radius: .5rem;
    }

        .dashboard .card .card-body {
            padding: .6rem .7rem;
        }

    .dashboard .display-6 {
        font-size: clamp(1.4rem, 2.0vw, 1.6rem);
        line-height: 1.1;
    }

    .card-header .nav-link {
        padding: .35rem .6rem;
        font-size: .92rem;
    }

    .card-header {
        padding: .35rem .6rem;
    }

    .calendar-nav .nav-btn {
        min-width: 28px;
        min-height: 28px;
        padding: .2rem .45rem;
        font-size: .85rem;
        border-radius: .35rem;
    }

    .calendar-nav .fw-semibold {
        font-size: .92rem;
    }

    .dashboard .week-grid {
        gap: .4rem;
        background: #f8f9fa;
        padding: 4px;
    }

    .dashboard .day-card {
        padding: .5rem .55rem;
    }

    .dashboard .day-head {
        margin-bottom: .25rem;
    }

    .dashboard .day-title {
        font-size: .9rem;
    }

    .dashboard .day-list {
        gap: .15rem;
        font-size: .85rem;
    }

    .dashboard .month-grid {
        gap: .2rem;
    }

    .dashboard .month-cell {
        min-height: 72px;
        padding: .35rem .4rem;
    }

        .dashboard .month-cell header {
            font-size: .82rem;
        }

        .dashboard .month-cell .mini {
            font-size: .78rem;
        }

    .order-grid {
        gap: .6rem;
    }

    .order-card {
        border-radius: .6rem;
    }

    .oc-head {
        padding: .55rem .7rem;
    }

    .oc-body {
        padding: .6rem .7rem;
        gap: .35rem;
    }

    .oc-line b {
        width: 90px;
        flex: 0 0 90px;
    }

    .oc-badge {
        font-size: .72rem;
        padding: .22rem .45rem;
    }

    @media (min-width: 992px) {
        .oc-right {
            width: 170px;
            padding: .6rem .7rem;
        }

        .oc-actions {
            gap: .4rem;
        }
    }

    .dashboard table.table td, .dashboard table.table th {
        padding-block: .4rem;
    }

    .dashboard .sidebar-col .card .card-body {
        padding: .6rem;
        font-size: .92rem;
    }

    .dashboard .sidebar-col .card .list-group-item {
        padding: .45rem .6rem;
        font-size: .92rem;
    }
}

@media (max-width: 1280px) and (max-height: 820px) and (orientation: landscape) {
    .dashboard .day-list {
        display: block;
        max-height: 8.5rem;
        overflow: auto;
    }

        .dashboard .day-list::-webkit-scrollbar {
            height: 6px;
            width: 6px;
        }

        .dashboard .day-list::-webkit-scrollbar-thumb {
            background: #d0d7de;
            border-radius: 4px;
        }
}

/* === Keep existing CSS. Add only this patch. === */

/* Make global search same height as nav tabs and visually aligned */
.card-header .global-search .input-group-text,
.card-header .global-search .form-control,
.card-header .global-search .btn {
    height: 40px;
    padding: .35rem .6rem;
    border-radius: .5rem;
}
/* Tighten header row spacing */
.card-header .global-search {
    min-width: 280px;
    width: clamp(280px, 28vw, 360px);
}

.scope-nav .btn + .btn {
    border-left-width: 1px;
}

.toolbar-line .form-select.toolbar-select {
    min-width: 120px;
    max-width: 160px;
    height: 34px;
    padding: .25rem .5rem;
}

.scope-nav .btn, .toolbar-line .btn {
    height: 34px;
    padding: .25rem .6rem;
}
/* Align right & consistent spacing */
.toolbar-line .ms-auto {
    justify-content: flex-end;
}
/* Bigger / tappable nav buttons */
.scope-nav .nav-arrow {
    min-width: 44px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    padding: .25rem .5rem;
}

.scope-nav .nav-center {
    min-width: 96px;
    height: 36px;
    font-weight: 600;
    padding: .25rem .75rem;
}

@media (max-width: 768px) {
    .card-header .global-search .input-group-text,
    .card-header .global-search .form-control,
    .card-header .global-search .btn {
        height: 36px;
    }

    .scope-nav .nav-arrow, .scope-nav .nav-center {
        height: 34px;
    }

    .scope-nav .btn {
        padding: .3rem .5rem;
    }
}

/* ===== Mobile Polish Patch (Layout-wide) ===== */

/* 0) lock horizontal scroll globally */
html, body {
    overflow-x: hidden;
    width: 100%;
}

/* 1) prevent iOS focus zoom by keeping controls at >=16px */
@supports (-webkit-touch-callout: none) {
    input, select, textarea {
        font-size: 16px !important;
        line-height: 1.25;
    }
}

/* 2) stop automatic text-size adjustments */
html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

/* 3) replace 100vh with 100dvh where needed */
.hero, .modal-img-contain {
    min-height: 100dvh;
}

*[style*="100vh"] {
    height: 100dvh !important;
}

/* 4) media containment and long-word wrapping */
img, video, svg, canvas, iframe {
    max-width: 100%;
    height: auto;
}

* {
    box-sizing: border-box;
    min-width: 0;
}

.break-anywhere, .oc-memo, .svc-meta, .mini-row, .who {
    overflow-wrap: anywhere;
    word-break: break-word;
}

/* 5) modal stability for small/rotated devices */
.modal {
    --bs-modal-margin: .75rem;
}

.modal-dialog {
    margin: var(--bs-modal-margin);
    width: auto;
    max-width: min(680px, 96vw);
}

@media (max-width: 920px) and (orientation: landscape) {
    .modal-dialog {
        max-width: 96vw;
    }
}

.modal.show .modal-dialog {
    max-height: 96dvh;
}

.modal-content {
    max-height: 96dvh;
    overflow: hidden;
}

.modal-body {
    overflow: auto;
    -webkit-overflow-scrolling: touch;
}

/* 6) sticky bars safe-area and z-index */
.sticky-footer, .mini-cart, #reservePage .sticky-submit {
    position: sticky;
    bottom: 0;
    z-index: 1030;
    padding-bottom: max(.75rem, env(safe-area-inset-bottom));
}

/* 7) isolate wide blocks to their own horizontal scroll */
.table-responsive, pre, code, .code-block, .ao-table {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* 8) minimal font floor in landscape small devices */
@media (max-width: 820px) and (orientation: landscape) {
    html {
        font-size: max(14px, 3.5vw);
    }
}


/* --- NAV dropdown clipping hotfix --- */
/* 1) Undo the global container overflow rule (it clips the navbar/dropdowns) */
.container,
.container-fluid {
    overflow: visible !important;
}

/* 2) Keep bleed-guard only for the main content area */
.page-container {
    overflow: hidden; /* prevent tiny horizontal bleeds in content only */
}

/* 3) Make sure navbar stays on top of tabs/cards below */
header,
.navbar {
    position: relative;
    z-index: 1200; /* higher than any card/tabs below */
}

.dropdown-menu {
    z-index: 1300; /* render above the navbar itself */
}

/* If tabs/cards were visually overlapping upward, keep them below the header */
.card-header,
.nav-tabs {
    position: relative;
    z-index: 1;
}


/* keep horizontal centering */
.modal {
    --bs-modal-margin: .75rem;
}

.modal-dialog {
    margin: var(--bs-modal-margin) auto;
}

.modal-backdrop {
    z-index: 12000 !important;
}

.modal,
.modal.show {
    z-index: 12010 !important;
}