* {
    box-sizing: border-box;
}

body {
    margin: 0;
    font-family: "Segoe UI", Arial, sans-serif;
    background: #f3f5f9;
    color: #1f2937;
    overflow-x: hidden;
    overflow-y: auto;
    width: 100%;
    max-width: 100%;
}

html, body {
    height: 100%;
    min-height: 100%;
}

/* Prevent hidden sections from contributing to layout and stop overscroll */
[hidden], .hidden {
    display: none !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
}

/* Screen-reader-only label text: used where a label would only repeat what the
   control beside it already shows (the Logs filter bar). This keeps the word
   available to assistive tech, unlike the `hidden` attribute, which would drop
   the label from the accessibility tree as well as the page. */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

/* Contain overscroll within scrolling regions to avoid body overscroll */
html, body {
    overscroll-behavior-y: contain;
}

/* (Reverted: kept original behavior — no forced section hidden rule or image caps) */

.top-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    background: #ff6f00;
    color: #0b0202f0;
    padding: 16px 24px;
    position: sticky;
    top: 0;
    z-index: 1000;
}

.top-nav {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
    margin-left: auto;
    flex: 1;
}

.mobile-menu-toggle {
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 4px;
    width: 44px;
    height: 44px;
    border: none;
    border-radius: 10px;
    background: #111;
    cursor: pointer;
    padding: 0 10px;
}

.mobile-menu-toggle span {
    display: block;
    width: 100%;
    height: 3px;
    background: #fff;
    border-radius: 2px;
}

.top-nav a {
    color: #000000;
    text-decoration: none;
    font-weight: 600;
    padding: 8px 14px;
    border-radius: 999px;
    transition: background 0.2s ease;
}

.top-nav a:hover {
    background: #f6f3ef;
}

.top-bar h1 {
    margin: 0;

    font-size: 26px;
    font-weight: 600;
    letter-spacing: 2px;

    background: linear-gradient(
        135deg,
        #322a2a,
        #e8e3d7,
        #1c1a0d
    );
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;

    text-transform: uppercase;

    filter: drop-shadow(0 5px 12px rgba(255,152,0,0.35));

    transition: 0.3s ease;
}

.top-bar h1:hover {
    transform: translateY(-2px);
    filter: drop-shadow(0 8px 20px rgba(255,152,0,0.6));
}

.login-top-bar {
    background: transparent;
    padding: 0;
    position: static;
    box-shadow: none;
}

.menu-btn {
    display: none !important;
    flex-direction: column;
    justify-content: center;
    gap: 4px;
    width: 42px;
    height: 42px;
    border: none;
    background: #ff9800;
    border-radius: 8px;
    cursor: pointer;
    padding: 0 10px;
    position: fixed;
    top: 16px;
    left: 16px;
    z-index: 1100;
}

.auth .menu-btn {
    display: none !important;
}

body.dashboard-panel-open .menu-btn {
    display: none !important;
}

.menu-btn span {
    display: block;
    height: 3px;
    background: #fff;
    border-radius: 2px;
}

.logout-btn {
    background: #ff9800;
    color: #fff;
    border: none;
    border-radius: 8px;
    padding: 10px 16px;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
}

.logout-btn:hover,
.menu-btn:hover {
    background: #e68900;
}

.menu-btn.active {
    background: #e68900;
}

/* The dashboard menu (staff.html #dashboardPanel) must NOT gain a `display`
   rule. Its old inline `display:none` became a stylesheet rule, and script.js
   reveals the panel by clearing its inline display — which only drops the
   override and lets the rule win again, so the menu stayed hidden for the whole
   session. The panel is hidden with the `hidden` attribute instead (script.js
   toggles the property). */
.dashboard-panel {
    position: fixed;
    top: 0;
    left: 0;
    width: 320px;
    height: 100vh;
    max-height: 100vh;
    overflow-y: auto;
    /* Dashboard always visible on desktop, slide in on smaller screens */
    opacity: 1;
    pointer-events: auto;
    transform: translateX(0);
    background: linear-gradient(180deg,#0b63d7,#0753b8);
    color: #fff;
    padding: 84px 20px 24px 24px;
    border: none;
    border-radius: 0;
    box-shadow: none;
    transition: transform 0.24s ease, opacity 0.24s ease, box-shadow 0.24s ease;
    z-index: 2100;
}

.dashboard-panel.open {
    transform: translateX(0) !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    z-index: 2200 !important;
}

.dashboard-profile {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 20px;
    padding-bottom: 16px;
    border-bottom: 1px solid rgba(17, 17, 17, 0.12);
}

.dashboard-profile-avatar {
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: #ff9800;
    color: #fff;
    font-size: 18px;
    flex-shrink: 0;
}

.dashboard-profile-meta {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.dashboard-profile-meta strong {
    font-size: 15px;
}

.dashboard-profile-meta span {
    color: #fff;
    font-size: 12px;
    word-break: break-word;
}

.dashboard-panel h3 {
    margin-top: 0;
    margin-bottom: 20px;
    color: #fff;
}

.dashboard-panel a {
    display: block;
    color: rgba(255,255,255,0.92);
    text-decoration: none;
    padding: 10px 12px;
    border-radius: 8px;
    margin-bottom: 6px;
    transition: background-color 0.12s ease, color 0.12s ease;
}

.dashboard-panel a:hover {
    background: rgba(255,255,255,0.08);
    color: #fff;
}

.dashboard-panel a.active {
    background: rgba(255,255,255,0.16);
    color: #fff;
    font-weight: 700;
}

.dashboard-panel a.disabled {
    color: #666;
    cursor: not-allowed;
    opacity: 0.65;
    pointer-events: none;
}

.dashboard-panel .panel-close {
    display: none;
    position: absolute;
    top: 12px;
    right: 12px;
    background: transparent;
    border: none;
    color: #fff;
    font-size: 24px;
    cursor: pointer;
    border-radius: 6px;
    padding: 4px 8px;
    box-shadow: 0 0 10px rgba(255,255,255,0.12);
    background: rgba(0,0,0,0.18);
}

.account-form {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 12px;
    margin: 16px 0;
}

#adminCredentialSettings .account-form,
#passwordCredentialsForm {
    width: 100%;
}

#adminCredentialSettings .account-form input,
#passwordCredentialsForm input {
    width: 100%;
    box-sizing: border-box;
}

.add-staff-btn,
.secondary-btn {
    padding: 10px 14px;
    border-radius: 8px;
    border: 1px solid #ccc;
    cursor: pointer;
}

.add-staff-btn {
    background: #111;
    color: #fff;
}

.secondary-btn {
    background: #f3f3f3;
    color: #111;
}

.sales-section {
    background: #fff;
    margin: 24px auto;
    padding: 24px;
    border-radius: 12px;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08);
    max-width: 900px;
    width: calc(100% - 48px);
}

.sales-tabs {
    display: flex;
    gap: 12px;
    margin: 16px 0;
    border-bottom: 1px solid #ddd;
}

.sales-tab-btn {
    padding: 10px 16px;
    border: none;
    background: transparent;
    cursor: pointer;
    font-weight: 600;
    color: #111;
    border-bottom: 3px solid transparent;
    transition: all 0.2s ease;
}

.sales-tab-btn:hover {
    color: #000;
}

.sales-tab-btn.active {
    color: #000;
    border-bottom-color: #111;
}

.sales-tab-content {
    padding: 16px 0;
}

.staff-login-page {
    position: absolute;
    inset: 0;
    min-height: 100vh;
    display: grid;
    place-items: center;
    padding: 20px;
    z-index: 0;
}

/* Pre-paint auth decision, set by the inline script in staff.html when a
   persisted staff session exists. The login form is this page's default painted
   state, so without this it stayed on screen for the whole time the deferred
   script.js took to download and run. The loading overlay covers the gap; that
   script clears the class once it has decided (and takes the overlay over, so
   there is no visible seam). */
html.staff-auth-pending .staff-login-page,
html.staff-auth-pending .login-dark-overlay {
    display: none;
}

html.staff-auth-pending #staffLoadingOverlay {
    /* Overrides .staff-loading-overlay[hidden], which is also !important. */
    display: flex !important;
}

.staff-box {
    width: min(480px, 100%);
    position: relative;
    z-index: 1000;
}

.modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    display: none;
    align-items: center;
    justify-content: center;
    padding: 20px;
    z-index: 1000;
}

.modal-overlay.active {
    display: flex;
}

#lowStockModalOverlay {
    display: none;
}

#lowStockModalOverlay.active {
    display: flex;
}

.modal-box {
    background: rgba(255, 255, 255, 0.45);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    width: min(420px, 100%);
    border-radius: 12px;
    padding: 24px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.18);
    position: relative;
}

.modal-close {
    position: absolute;
    top: 10px;
    right: 12px;
    border: none;
    background: transparent;
    font-size: 24px;
    cursor: pointer;
    color: #666;
}

.modal-box h2 {
    margin-top: 0;
    margin-bottom: 16px;
}

.role-tab {
    padding: 10px 12px;
    border: 1px solid #ccc;
    border-radius: 8px;
    background: #f7f7f7;
    cursor: pointer;
    font-weight: 600;
    position: relative;
    z-index: 2003;
}

.role-tab.active {
    background: #111;
    color: #fff;
    border-color: #111;
}

.login-fields {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.modal-box form {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.modal-box label {
    font-weight: 600;
}

.remember-row {
    display: flex;
    align-items: center;
    gap: 10px;
}

.remember-row input[type="checkbox"] {
    width: auto;
    margin: 0;
}

.remember-row label {
    font-size: 14px;
    cursor: pointer;
}

.modal-box input {
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 8px;
    width: 100%;
    box-sizing: border-box;
}

.password-field-wrapper {
    position: relative;
    width: 100%;
}

.password-field-wrapper input {
    padding-right: 42px;
}

.forgot-password-link {
    text-align: center;
    margin-top: 12px;
}

.forgot-password-link a {
    color: #1b824a;
    font-size: 14px;
    text-decoration: none;
    font-weight: 500;
}

.forgot-password-link a:hover {
    text-decoration: underline;
}

.captcha-container {
    text-align: center;
    margin: 16px 0;
    padding: 12px;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    background: #fafafa;
}

.captcha-widget {
    display: flex;
    justify-content: center;
    margin: 0;
}

.captcha-label {
    font-size: 13px;
    color: #555;
    margin-bottom: 8px;
}

/* Retry / Cancel row shown when the CAPTCHA widget errors out. */
.captcha-actions {
    display: flex;
    gap: 8px;
    justify-content: center;
    margin-top: 10px;
}

.captcha-actions[hidden] {
    display: none;
}

.captcha-retry-btn,
.captcha-cancel-btn {
    border: 1px solid #d1d5db;
    background: #fff;
    color: #374151;
    border-radius: 8px;
    padding: 6px 14px;
    font-size: 0.78rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease;
}

.captcha-retry-btn:hover {
    background: #111827;
    color: #fff;
    border-color: #111827;
}

.captcha-cancel-btn:hover {
    background: #f3f4f6;
}

/* Match the CAPTCHA panel to the themed staff login card: same border, white
   surface and 12px radius as the form's inputs, with spacing left to the
   form's own 12px flex gap. */
body.staff-app .staff-box .captcha-container {
    border: 1px solid var(--staff-border);
    background: var(--staff-surface-2);
    border-radius: 12px;
    margin: 0;
    padding: 14px 12px;
}

body.staff-app .staff-box .captcha-label {
    color: var(--staff-muted);
}

.forgot-password-modal {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    padding: 20px;
}

.forgot-password-modal[hidden] {
    display: none;
}

.forgot-password-modal-box {
    background: #fff;
    border-radius: 12px;
    padding: 32px;
    width: 100%;
    max-width: 420px;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.2);
    position: relative;
}

.forgot-password-modal-box h3 {
    margin: 0 0 8px;
    font-size: 20px;
    color: #1b824a;
}

.forgot-password-modal-box p {
    margin: 0 0 20px;
    font-size: 14px;
    color: #555;
    line-height: 1.5;
}

.forgot-password-modal-box input {
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 8px;
    width: 100%;
    box-sizing: border-box;
    margin-bottom: 12px;
    font-size: 15px;
}

.forgot-actions {
    display: flex;
    gap: 10px;
    margin-top: 8px;
}

.forgot-password-modal-box .forgot-password-error {
    margin: 0 0 12px;
    color: #dc2626;
    font-size: 13px;
    line-height: 1.4;
}

.forgot-password-status {
    margin: 0 0 12px;
    background: #dcfce7;
    color: #16a34a;
    padding: 8px 12px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 500;
}

.forgot-password-modal-box .btn-cancel {
    flex: 1;
    padding: 10px;
    border: 1px solid #ccc;
    background: #f5f5f5;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    color: #555;
}

.forgot-password-modal-box .btn-cancel:hover {
    background: #ececec;
}

.forgot-password-modal-box .btn-send {
    flex: 1;
    padding: 10px;
    border: none;
    background: #1b824a;
    color: #fff;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
}

.forgot-password-modal-box .btn-send:hover {
    background: #146b3d;
}

.forgot-password-modal-box .btn-send:disabled,
.forgot-password-modal-box .btn-cancel:disabled {
    background: #aaa;
    cursor: not-allowed;
}

.forgot-resend-btn {
    display: block;
    width: 100%;
    margin-top: 10px;
    padding: 9px;
    border: none;
    background: transparent;
    color: #1b824a;
    text-align: center;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    text-decoration: underline;
}

.forgot-resend-btn:hover {
    color: #146b3d;
}

.forgot-resend-btn:disabled {
    color: #aaa;
    cursor: not-allowed;
}

/* Themed to match the staff login card. */
body.staff-app .forgot-password-modal-box {
    background: #ffffff;
    border: 1px solid var(--staff-border);
    border-radius: 24px;
    box-shadow: 0 30px 80px rgba(23, 87, 54, 0.16), inset 0 1px 0 rgba(255, 255, 255, 0.9);
    color: var(--staff-text);
    padding: 34px 32px 30px;
}

body.staff-app .forgot-password-modal-box h3 {
    color: var(--staff-accent-strong);
    text-align: center;
    font-weight: 800;
    font-size: 20px;
}

body.staff-app .forgot-password-description {
    color: var(--staff-muted);
    font-size: 14px;
    text-align: center;
    margin-bottom: 20px;
}

body.staff-app .forgot-password-modal-box input {
    background: var(--staff-surface-2);
    border: 1px solid var(--staff-border);
    color: var(--staff-text);
    border-radius: 12px;
    padding: 11px 14px;
}

body.staff-app .forgot-password-modal-box input:focus {
    border-color: var(--staff-accent);
    box-shadow: 0 0 0 3px rgba(43, 174, 102, 0.18);
    outline: none;
}

body.staff-app .forgot-password-modal-box input::placeholder {
    color: var(--staff-faint);
}

body.staff-app .forgot-password-modal-box .btn-send {
    background: linear-gradient(135deg, var(--staff-accent-2), var(--staff-accent-strong));
    box-shadow: 0 10px 24px rgba(43, 174, 102, 0.35);
    border-radius: 12px;
    font-weight: 700;
}

body.staff-app .forgot-password-modal-box .btn-send:hover:not(:disabled) {
    transform: translateY(-2px);
    box-shadow: 0 16px 34px rgba(43, 174, 102, 0.45);
    filter: brightness(1.05);
}

body.staff-app .forgot-password-modal-box .btn-cancel {
    border: 1px solid var(--staff-border);
    background: var(--staff-surface-2);
    color: var(--staff-muted);
    border-radius: 12px;
    font-weight: 600;
}

body.staff-app .forgot-password-modal-box .btn-cancel:hover:not(:disabled) {
    background: var(--staff-accent-softer);
    color: var(--staff-text);
}

body.staff-app .forgot-password-modal-box .btn-send:disabled,
body.staff-app .forgot-password-modal-box .btn-cancel:disabled {
    background: var(--staff-faint);
    color: #fff;
    box-shadow: none;
    transform: none;
}

body.staff-app .forgot-resend-btn {
    color: var(--staff-accent-strong);
}

body.staff-app .forgot-resend-btn:hover:not(:disabled) {
    color: var(--staff-accent);
}

body.staff-app .forgot-password-status {
    background: var(--staff-accent-soft);
    color: var(--staff-accent-strong);
}

.password-toggle-btn {
    position: absolute;
    top: 50%;
    right: 12px;
    transform: translateY(-50%);
    border: none;
    background: transparent;
    padding: 0;
    margin: 0;
    color: #666;
    font-size: 16px;
    cursor: pointer;
    line-height: 1;
}

.password-toggle-btn:hover {
    color: #111;
}

.modal-box button[type="submit"] {
    background: #111;
    color: #fff;
    border: none;
    border-radius: 8px;
    padding: 10px;
    cursor: pointer;
}

.front-section {
    position: relative;
    width: 100%;
    overflow: hidden;
}

.front-section img {
    width: 100%;
    height: 90vh;
    object-fit: cover;
    object-position: center;
    display: block;
}

/* Mobile */
@media (max-width: 768px) {
    .front-section img {
        height: auto;
        object-fit: contain;
    }
}
/* Button overlay */
.about-btn {
    position: absolute;
    top: 63%;       /* move up/down */
    left: 4.5%;      /* move left/right */
    
    padding: 12px 35px;
    background: #ff8c00;
    color: white;
    text-decoration: none;
    font-size: 18px;
    font-weight: bold;
    border-radius: 30px;
    transition: 0.3s ease;
}

.about-btn:hover {
    background: rgb(18, 17, 17);
    color: #ff8c00;
    transform: translateY(-8px);
    box-shadow: 0 8px 20px rgba(0,0,0,0.3);
}





/* Slideshow styles */

.info-section {
    background: #dc095d;
    margin: 20px 50px;
    padding: 24px;
    border-radius: 12px;
    box-shadow: 0 5px 18px rgb(255, 255, 254);
    color: #8a3d00;
}

/* MENU SECTION */
.menu-section {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: min(95%, 1200px);
    min-height: 5vh;
    padding: 24px;
    margin: 20px auto;
    border-radius: 20px;
    background: linear-gradient(#0f0f0f, #1b1514);
    color: white;
}

.menu-design {
    width: 100%;
    max-width: 100%;
    height: auto;
    object-fit: contain;
    display: block;
    border-radius: 16px;
}

.menu-image {
    width: 100%;
    max-width: 680px;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
}

/* ABOUT SECTION */
.about-section {
    width: 100%;
    min-height: 100vh;
    padding: 80px 5%;
    background: #fff3e0;
    display: flex;
    align-items: center;
}


.about-container {
    width: 100%;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 50px;
    align-items: center;
}


/* IMAGE */

.about-image img {
    width: 100%;
    height: 500px;
    object-fit: cover;
    border-radius: 25px;

    box-shadow: 0 20px 40px rgba(0,0,0,0.15);
}


/* CONTENT */

.about-content {
    background: rgba(255,255,255,0.45);
    backdrop-filter: blur(15px);
    padding: 40px;
    border-radius: 30px;

    border: 1px solid rgba(255,255,255,0.5);

    color: #8a3d00;
}


.about-tag {
    font-size: 14px;
    font-weight: bold;
    letter-spacing: 3px;
    color: #d26900;
}


.about-content h2 {
    font-size: 42px;
    margin: 15px 0;
    line-height: 1.2;
}


.about-content p {
    font-size: 17px;
    line-height: 1.7;
    color: #5c3500;
}


/* FEATURES */

.about-features {
    display: flex;
    gap: 20px;
    margin: 30px 0;
}


.feature-box {
    flex: 1;

    background: rgba(255,255,255,0.6);
    padding: 20px;
    border-radius: 20px;
}


.feature-box h3 {
    margin-bottom: 10px;
    color:#a44a00;
}


.feature-box p {
    font-size:14px;
}


/* BUTTON */

.about-btn {
    display:inline-block;

    padding:14px 30px;
    border-radius:30px;

    background:#c85a00;
    color:white;

    text-decoration:none;
    font-weight:bold;

    transition:.3s;
}


.about-btn:hover {
    background:#8a3d00;
    transform:translateY(-3px);
}



/* MOBILE */

@media(max-width:900px){

    .about-container{
        grid-template-columns:1fr;
    }

    .about-image img{
        height:350px;
    }

    .about-content h2{
        font-size:32px;
    }

    .about-features{
        flex-direction:column;
    }

}
#about {
    width: 94.9%;
    min-height: 100vh;
    padding: 12px;

    display: grid;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    background: #fff3e0;
    color: #8a3d00;
}


/* CONTACT SECTION */
.contact-section {

    width:100%;
    min-height:100vh;

    padding:80px 5%;

    background:#fff3e0;

    display:flex;
    align-items:center;

}



.contact-container {

    width:100%;

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:50px;

    align-items:center;

}



/* LEFT SIDE */

.contact-info {

    color:#8a3d00;

}


.contact-tag {

    letter-spacing:3px;

    font-size:14px;

    font-weight:bold;

    color:#d26900;

}



.contact-info h2 {

    font-size:45px;

    line-height:1.2;

    margin:15px 0;

}



.contact-info p {

    color:#5c3500;

    font-size:17px;

    line-height:1.7;

}



/* DETAILS */


.contact-details {

    margin-top:35px;

}


.contact-box {

    display:flex;

    align-items:center;

    gap:20px;

    margin-bottom:25px;

    padding:20px;


    background:rgba(255,255,255,0.45);

    backdrop-filter:blur(12px);

    border-radius:20px;

    border:1px solid rgba(255,255,255,.5);

}



.contact-icon {

    width:55px;

    height:55px;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:28px;


    background:#fff;

    border-radius:50%;

}



.contact-box h3 {

    margin:0;

    color:#a44a00;

}



.contact-box p {

    margin:5px 0 0;

    font-size:15px;

}





/* FORM */


.contact-form {

    padding:40px;

    background:rgba(255,255,255,0.45);

    backdrop-filter:blur(15px);

    border-radius:30px;

    border:1px solid rgba(255,255,255,.5);

    box-shadow:0 15px 40px rgba(0,0,0,.12);

}



.contact-form h3 {

    color:#8a3d00;

    font-size:28px;

    margin-bottom:25px;

}



.input-group {

    margin-bottom:20px;

}



.input-group input,
.input-group textarea {


    width:100%;

    padding:15px 18px;

    border:none;

    outline:none;

    border-radius:15px;

    background:rgba(255,255,255,.8);

    font-size:15px;

}



.input-group textarea {

    resize:none;

}



.contact-form button {


    width:100%;

    padding:15px;

    border:none;

    border-radius:30px;


    background:#c85a00;

    color:white;

    font-size:16px;

    font-weight:bold;

    cursor:pointer;

    transition:.3s;

}



.contact-form button:hover {

    background:#8a3d00;

    transform:translateY(-3px);

}



/* MOBILE */

@media(max-width:900px){

    .contact-container{

        grid-template-columns:1fr;

    }


    .contact-info h2{

        font-size:34px;

    }


}
#contact {
    width: 91.4%;
    min-height: 100vh;
    padding: 40px;

    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    background: #ffe0b2;
    color: #8a3d00;
}

@media (max-width: 900px) {
    .menu-container {
        grid-template-columns: 1fr;
        gap: 24px;
        width: 100%;
        max-width: 100%;
    }

    .menu-section {
        width: calc(100% - 24px);
        padding: 20px;
    }

    .menu-image {
        width: 100%;
        max-width: 100%;
        order: 2;
    }

    .menu-left,
    .menu-right {
        width: 100%;
        max-width: 100%;
    }

    .menu-right {
        position: static;
        display: flex;
        justify-content: flex-end;
        padding-bottom: 84px;
    }

    .menu-total-panel {
        display: flex;
        align-items: center;
        gap: 16px;
        flex-wrap: wrap;
        justify-content: flex-end;
    }

    .menu-total-panel > div {
        text-align: right;
    }

    .menu-total-panel > div span {
        display: block;
        font-size: 0.9rem;
        color: #555;
    }

    .menu-total-panel > div strong {
        display: block;
        font-size: 1.25rem;
        color: #111;
    }

    #menuCartButton.menu-cart-button {
        position: fixed;
        right: 14px;
        bottom: 14px;
        left: auto;
        top: auto;
        width: 56px !important;
        height: 56px !important;
        z-index: 1800;
    }

    .menu-categories {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px;
    }

    .menu-image {
        width: 100%;
        height: auto;
        max-height: 280px;
    }

    .about-section,
    .contact-section {
        padding: 56px 20px;
        min-height: auto;
    }

    .about-container,
    .contact-container {
        grid-template-columns: 1fr;
        gap: 24px;
    }

    .about-content,
    .contact-form {
        padding: 24px;
    }

    .about-content h2,
    .contact-info h2 {
        font-size: clamp(1.75rem, 4vw, 2.4rem);
    }

    .about-features {
        flex-direction: column;
    }

    .feature-box,
    .contact-box {
        padding: 16px;
    }

    .menu-overlay {
        padding: 10px;
    }

    .cart-addon-screen {
        width: min(420px, calc(100vw - 24px));
        max-height: calc(100vh - 32px);
        padding: 14px;
    }

    .cart-addon-list {
        max-height: calc(100vh - 300px);
    }

    .menu-overlay-panel {
        width: min(100%, 100%);
        max-height: 92vh;
        padding: 16px;
        border-radius: 18px;
        margin-bottom: 70px;
    }

    .menu-item-card {
        flex-direction: column;
        align-items: stretch;
    }

    .menu-item-controls {
        justify-items: start;
    }

    .menu-items-list {
        max-height: 60vh;
    }

    .cart-modal {
        padding: 12px;
    }

    .cart-modal .menu-cart-panel {
        max-height: 80vh;
    }

    .cart-addon-screen {
        width: min(420px, calc(100vw - 24px));
        max-height: calc(100vh - 32px);
        padding: 14px;
    }

    .cart-addon-list {
        max-height: calc(100vh - 300px);
    }

    .order-checkout-screen,
    .order-payment-screen {
        padding: 16px;
    }

    .checkout-options {
        gap: 8px;
    }

    .checkout-option-btn {
        flex: 1 1 calc(50% - 8px);
        text-align: center;
    }

    .special-foods-visible {
        margin: 16px;
        padding: 16px;
    }

    .special-foods-list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 560px) {
    .menu-section {
        padding: 16px;
        margin: 16px auto;
    }

    .menu-categories {
        grid-template-columns: 1fr;
    }

    .about-section,
    .contact-section {
        padding: 44px 14px;
    }

    .about-content,
    .contact-form {
        padding: 20px;
    }

    .menu-overlay-panel {
        padding: 14px;
    }

    .menu-item-card {
        padding: 14px;
    }

    .menu-cart-panel {
        padding: 14px;
        margin-bottom: 70px;
    }

    .menu-cart-item-details {
        flex-direction: column;
        align-items: flex-start;
    }

    .menu-cart-item-remove {
        align-self: flex-end;
    }

    .menu-place-order-btn,
    .menu-back-btn {
        padding: 11px 14px;
    }

    .checkout-option-btn {
        flex-basis: 100%;
    }

    .special-foods-list {
        grid-template-columns: 1fr;
    }
}

.map-section {
    background: #fff;
    margin: 20px 24px 40px;
    padding: 24px;
    border-radius: 12px;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.06);
}

.map-wrapper {
    margin-top: 16px;
    overflow: hidden;
    border-radius: 14px;
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.08);
}

.map-wrapper iframe {
    width: 100%;
    min-height: 320px;
    border: 0;
    display: block;
}
.menu-categories {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 12px;
    margin-top: 20px;
}
.menu-cart-section-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}
.menu-cart-section-heading h2 {
    margin: 0;
}
.menu-cart-section {
    display: grid;
    gap: 14px;
    margin: 20px 24px 40px;
    padding: 24px;
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.06);
}
.menu-cart-section-heading span {
    color: #777;
    font-size: 0.9rem;
}
.menu-cart-section .menu-cart-panel {
    min-height: 220px;
}
.cart-modal {
    position: fixed;
    inset: 0;
    z-index: 2100;
    display: grid;
    align-content: center;
    justify-items: center;
    gap: 14px;
    margin: 0;
    padding: 24px;
    background: rgba(0, 0, 0, 0.62);
}
.cart-modal .menu-cart-section-heading {
    width: min(520px, 100%);
    color: #fff;
}
.cart-modal .menu-cart-panel {
    width: min(520px, 100%);
    max-height: min(80vh, 700px);
    box-sizing: border-box;
    overflow-y: auto;
    position: relative;
    background: rgba(255, 255, 255, 0.78);
    border: 1px solid rgba(255, 255, 255, 0.95);
    box-shadow: 0 18px 48px rgba(0, 0, 0, 0.28), inset 0 0 24px rgba(255, 255, 255, 0.42);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
}
.cart-addon-screen {
    position: relative;
    inset: auto;
    top: auto;
    left: auto;
    right: auto;
    bottom: auto;
    width: auto;
    max-width: 100%;
    max-height: none;
    z-index: auto;
    background: transparent;
    border-radius: 0;
    padding: 0;
    display: grid;
    grid-template-rows: auto auto minmax(0, 1fr) auto auto auto;
    gap: 10px;
    box-sizing: border-box;
    border: none;
    box-shadow: none;
    overflow: visible;
}
.cart-addon-screen-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
}
.cart-addon-screen-header h4 {
    margin: 0;
    flex: 1 1 auto;
    min-width: 0;
}
.cart-addon-screen-header .menu-back-btn {
    flex: 0 0 auto;
}
.cart-addon-screen-header h4 {
    margin: 0;
}
.cart-addon-search-input {
    display: block;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    height: 38px;
    -webkit-appearance: none;
    appearance: none;
    border: 1px solid rgba(0, 0, 0, 0.16);
    border-radius: 10px;
    padding: 10px 12px;
    font-size: 16px;
    line-height: 1.2;
    background: #fff;
    color: #111;
    box-sizing: border-box;
}
.cart-addon-search-input:focus {
    outline: 2px solid rgba(255, 152, 0, 0.45);
    outline-offset: 1px;
    border-color: #ff9800;
}
.cart-addon-list {
    min-height: 0;
    max-height: none;
    overflow-y: auto;
    overflow-x: hidden;
    display: grid;
    align-content: start;
    gap: 10px;
    padding-right: 4px;
    padding-top: 2px;
}
.cart-addon-total {
    margin-top: 8px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 8px 12px;
    border-radius: 10px;
    background: #fff6ec;
    border: 1px solid rgba(230, 81, 0, 0.2);
    color: #8b3e04;
    font-size: 0.9rem;
}
.cart-addon-total strong {
    color: #e65100;
    font-size: 1rem;
}

.cart-addon-footer {
    position: sticky;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 0 0 0;
    background: linear-gradient(transparent, rgba(255,255,255,0.92));
    z-index: 50;
}

.cart-addon-footer-actions {
    display: flex;
    align-items: center;
    gap: 10px;
}

.cart-addon-footer .menu-place-order-btn {
    margin-left: 6px;
}

.cart-addon-list {
    min-height: 0;
    /* Aim to show at least 3 items without increasing the main page scroll
       Approx item height (~96px) × 3 + small gap */
    max-height: calc(3 * 96px + 24px);
    overflow-y: auto;
    overflow-x: hidden;
    display: grid;
    align-content: start;
    gap: 10px;
    padding-right: 12px;
    padding-top: 2px;
}

/* Prevent body scrolling while modal/add-on screen is open */
body.modal-open {
    overflow: hidden;
}
.cart-addon-item {
    background: #fff;
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 12px;
    padding: 10px;
    display: grid;
    gap: 8px;
}
.cart-addon-item-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}
.cart-addon-item-head strong {
    color: #111;
    font-size: 0.95rem;
}
.cart-addon-item-head span {
    color: #e65100;
    font-weight: 700;
    font-size: 0.88rem;
}
.cart-addon-item-controls {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
.cart-addon-item-controls .menu-item-qty-btn {
    width: 28px;
    height: 28px;
}
.cart-addon-item-qty-input {
    width: 44px;
    padding: 3px 6px;
    border: 1px solid rgba(17, 17, 17, 0.25);
    border-radius: 8px;
    background: #fff;
    text-align: center;
    font: inherit;
    font-weight: 700;
    color: #111;
}
.cart-addon-item-qty-input:focus {
    outline: 2px solid #ff9800;
    outline-offset: 1px;
}
.cart-addon-item-qty-input.is-invalid {
    border-color: #d32f2f;
    background: #fff1f0;
    color: #b3261e;
}
.cart-addon-item-qty-error {
    font-size: 0.72rem;
    font-weight: 600;
    line-height: 1.35;
    color: #d32f2f;
}
.cart-addon-item-qty-error[hidden] {
    display: none;
}
.cart-addon-item-stock {
    color: #666;
    font-size: 0.78rem;
}
.cart-exit-button {
    border: 1px solid rgba(0, 0, 0, 0.8);
    border-radius: 8px;
    padding: 8px 14px;
    background: rgba(255, 255, 255, 0.18);
    color: #000000;
    font-weight: 700;
    cursor: pointer;
} 
.cart-exit-button:hover,
.cart-exit-button:focus-visible {
    background: rgba(209, 121, 38, 0.82);
    color: #111;
}
.menu-category-btn {
    border: none;
    background-color: #f8f6f6;
    color: #030303;
    padding: 18px 16px;
    font-size: 0.95rem;
    font-weight: 700;
    border-radius: 14px;
    cursor: pointer;
    transition: background-color 0.18s ease, color 0.18s ease;
    outline: none;
}
.menu-category-btn:hover,
.menu-category-btn:focus-visible {
    background-color: #ff9800;
    color: #111;
}
.menu-category-screen {
    margin-top: 24px;
}
.menu-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.7);
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 20px;
    z-index: 2000;
}
.menu-overlay-panel {
    width: min(900px, 100%);
    max-height: min(88vh, 760px);
    background: #fff;
    border-radius: 24px;
    padding: 24px;
    overflow-y: auto;
    display: grid;
    gap: 18px;
}
.menu-overlay-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}
.menu-overlay-categories {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 16px;
}
.menu-overlay-categories.hidden {
    display: none;
}
.menu-overlay-categories .menu-category-btn {
    padding: 10px 14px;
    border-radius: 999px;
    border: 1px solid rgba(0, 0, 0, 0.08);
    background: #f7f7f7;
    color: #111;
    font-size: 0.9rem;
}
.menu-overlay-categories .menu-category-btn.active {
    background: #ff9800;
    color: #fff;
    border-color: #ff9800;
}
.menu-overlay-actions-panel {
    display: grid;
    gap: 14px;
    padding: 16px 0 0;
    border-top: 1px solid rgba(0, 0, 0, 0.08);
}
.menu-overlay-actions-panel .menu-total-panel {
    justify-content: space-between;
    align-items: center;
    gap: 16px;
}
.menu-overlay-actions-panel .menu-action-panel {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}
.menu-overlay-actions {
    display: flex;
    align-items: center;
    gap: 10px;
}
.menu-cart-button {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border: none;
    border-radius: 10px;
    background: #111;
    color: #fff;
    font-size: 18px;
    cursor: pointer;
}
.menu-cart-button:hover,
.menu-cart-button:focus-visible {
    background: #ff9800;
}
.menu-cart-button span {
    position: absolute;
    top: -7px;
    right: -7px;
    display: grid;
    place-items: center;
    min-width: 20px;
    height: 20px;
    padding: 0 4px;
    border-radius: 10px;
    background: #d32f2f;
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    line-height: 1;
}
.special-foods-section {
    display: grid;
    gap: 12px;
}
.special-foods-visible {
    margin: 20px 24px;
    padding: 24px;
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.06);
}
.special-foods-heading {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
}
.special-foods-heading h1 {
    font-family: 'Allura', cursive;
    font-size: 4rem;
    font-weight: 400;
    align-content: center;
    text-align: center;
    letter-spacing: 1px;
    color: #8B0000;
    margin: 0;
}
.special-foods-heading span {
    color: #777;
    font-size: 0.9rem;
}
.special-foods-list {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 12px;
}
.special-food-card {
    position: relative;
    display: flex;
    flex-direction: column;
    min-width: 0;
    aspect-ratio: 1;
    overflow: hidden;
    border-radius: 14px;
    background: #ffffff;
    box-shadow: 0 8px 20px rgba(241, 137, 57, 0.08);
}
.special-food-card:hover {

    background:
        linear-gradient(
            135deg,
            rgba(255,255,255,0.85),
            rgba(255, 254, 252, 0.379),
            rgba(242, 203, 164, 0.515)
        );

    border: 2px solid rgba(255,255,255,0.9);

    box-shadow:
        0 20px 45px rgb(199, 238, 247),
        inset 0 0 30px rgba(255,255,255,0.5);

    transform: translateY(-10px) scale(1.03);

    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
}
.special-food-view-btn {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 64%;
    overflow: hidden;
    padding: 0;
    border: 0;
    background: #141414;
    cursor: pointer;
    line-height: 0;
}
.special-food-view-btn img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
}
.special-food-image-meta {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 8px 10px;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(23, 11, 4, 0.82) 70%, rgba(23, 11, 4, 0.92) 100%);
}
.special-food-image-name {
    color: #fff;
    font-size: 0.82rem;
    font-weight: 700;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.special-food-details {
    display: grid;
    grid-template-columns: 1fr;
    align-items: start;
    gap: 4px;
    padding: 10px 12px 12px;
}
.special-food-description {
    margin: 0;
    color: #5d4b3b;
    font-size: 0.84rem;
    line-height: 1.42;
    font-family: "Trebuchet MS", "Segoe UI", sans-serif;
    letter-spacing: 0.01em;
    display: -webkit-box;
    line-clamp: 2;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.special-food-details-price {
    margin: 0;
    color: #e65100;
    font-size: 0.9rem;
    font-weight: 800;
    white-space: nowrap;
    align-self: start;
}
.special-food-details-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    width: 100%;
}
.special-food-stock-left,
.menu-item-stock-left {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 3px 9px;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    white-space: nowrap;
    background: #ecfdf5;
    color: #047857;
    border: 1px solid #a7f3d0;
}
.special-food-stock-left.is-low,
.menu-item-stock-left.is-low {
    background: #fff7ed;
    color: #c2410c;
    border-color: #fed7aa;
}
.menu-item-stock-left {
    align-self: flex-start;
}
.special-food-added-message, .special-food-add {
    display: none;
}










.menu-container {
    display:grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
    gap: clamp(24px, 4vw, 48px);
    width:100%;
    max-width:100%;
    align-items:center;
    color:rgb(243, 243, 243);
}

.menu-left,
.menu-right {
    min-width: 0;
}



/* LEFT MENU */

.menu-left {

    display:flex;

    flex-direction:column;

}

.menu-categories {

    display:grid;

    grid-template-columns: repeat(2, 1fr);

    gap:20px;

}








/* RIGHT CART */

.menu-right {
    position: static;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding-top: 12px;
}

#menuCartButton.menu-cart-button {
    position: fixed !important;
    right: 20px !important;
    bottom: 20px !important;
    left: auto !important;
    top: auto !important;
    z-index: 1600;
    display: grid;
    place-items: center;
    width: 58px !important;
    height: 58px !important;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: linear-gradient(145deg, #f4bd6b, #f77631);
    color: white;
    font-size: 20px;
    cursor: grab;
    box-shadow: 0 18px 45px rgba(121, 46, 3, 0.563);
    transition: transform 0.35s ease, box-shadow 0.35s ease;
    user-select: none;
    touch-action: none;
}

#menuCartButton.menu-cart-button:hover,
#menuCartButton.menu-cart-button:focus-visible {
    transform: translateY(-2px) scale(1.02);
    box-shadow: 0 26px 60px rgb(255, 153, 0);
}

#menuCartButton.menu-cart-button.is-dragging {
    cursor: grabbing;
}

#menuTopCartCount {
    position: absolute;
    top: -6px;
    right: -4px;
    width: 22px;
    height: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: white;
    color: #620101;
    font-size: 11px;
    font-weight: 800;
    box-shadow: 0 5px 15px rgba(0,0,0,0.25);
}


.menu-overlay-close {
    border: none;
    background: #111;
    color: #fff;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    font-size: 24px;
    cursor: pointer;
}
.menu-back-btn {
    border: none;
    background: #f3f3f3;
    color: #111;
    padding: 10px 14px;
    border-radius: 12px;
    cursor: pointer;
    font-weight: 700;
}
.menu-category-body {
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
    min-height: 440px;
}
.menu-items-panel {
    display: grid;
    gap: 12px;
}
.menu-items-list {
    display: grid;
    gap: 14px;
    max-height: min(70vh, 620px);
    overflow-y: auto;
    padding-right: 6px;
}
.menu-item-card {
    background: #fff;
    padding: 18px;
    border-radius: 16px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06);
    position: relative;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
}
.menu-item-main {
    flex: 1 1 auto;
    min-width: 0;
}
.menu-item-card h4 {
    margin: 0 0 8px;
    font-size: 1.1rem;
}
.menu-item-card p {
    margin: 0 0 10px;
    color: #110e0e;
    line-height: 1.5;
}
.menu-item-card .menu-item-main p:last-child {
    margin-bottom: 0;
}
.menu-item-price {
    font-weight: 700;
    color: #111;
}
.inventory-item-description {
    color: #5d4b3b;
    font-size: 0.92rem;
    line-height: 1.45;
}
.menu-item-controls {
    display: grid;
    justify-items: end;
    gap: 8px;
    flex: 0 0 auto;
}
.stock-status-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 16px;
    border-radius: inherit;
    background: rgba(0, 0, 0, 0.68);
    color: #fff;
    text-align: center;
    z-index: 2;
}
.stock-status-overlay img {
    width: 64px;
    height: 64px;
    object-fit: contain;
    filter: drop-shadow(0 6px 12px rgba(0, 0, 0, 0.25));
}
.stock-status-overlay span {
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}
.special-food-card.is-out-of-stock,
.menu-item-card.is-out-of-stock {
    opacity: 0.86;
    filter: grayscale(0.2);
}
.special-food-card.is-out-of-stock {
    pointer-events: none;
    cursor: default;
}
.special-food-card.is-out-of-stock .special-food-add:disabled,
.menu-item-qty-btn:disabled {
    opacity: 0.55;
    cursor: not-allowed;
    pointer-events: none;
}
.menu-item-card.is-out-of-stock .menu-item-price {
    color: #777;
}
.inventory-stock-line {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
.inventory-out-of-stock-image {
    width: 24px;
    height: 24px;
    object-fit: contain;
    display: inline-block;
    flex-shrink: 0;
}
.menu-item-qty-controls {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
.menu-item-qty-btn {
    width: 32px;
    height: 32px;
    border: none;
    border-radius: 50%;
    background-color: #111;
    color: #fff;
    font-size: 18px;
    font-weight: 700;
    cursor: pointer;
    display: grid;
    place-items: center;
    transition: background-color 0.12s ease;
    will-change: background-color;
    outline: none;
}
.menu-item-qty-btn:hover,
.menu-item-qty-btn:focus-visible {
    background-color: #ff9800;
    box-shadow: none;
}
.menu-item-qty-input {
    width: 46px;
    padding: 4px 6px;
    border: 1px solid rgba(17, 17, 17, 0.25);
    border-radius: 8px;
    background: #fff;
    text-align: center;
    font: inherit;
    font-weight: 700;
    color: #111;
}
.menu-item-qty-input:focus {
    outline: 2px solid #ff9800;
    outline-offset: 1px;
}
.menu-item-qty-input.is-invalid {
    border-color: #d32f2f;
    background: #fff1f0;
    color: #b3261e;
}
.menu-item-confirmation {
    color: #ff9800;
    font-size: 0.75rem;
    font-weight: 700;
    font-style: italic;
    min-height: 18px;
    text-align: right;
    white-space: nowrap;
}
.menu-item-confirmation.is-error {
    max-width: 200px;
    color: #d32f2f;
    white-space: normal;
    line-height: 1.35;
}
.menu-cart-panel {
    position: relative;
    background: #fff;
    border-radius: 16px;
    padding: 18px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
    min-height: 360px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    justify-content: space-between;
}
.menu-cart-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
}
.cart-add-on-btn {
    border: 1px solid #ff9800;
    background: #fff7eb;
    color: #8a3d00;
    border-radius: 999px;
    padding: 7px 12px;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    cursor: pointer;
    text-transform: uppercase;
    line-height: 1;
    box-shadow: inset 0 0 0 1px rgba(255, 152, 0, 0.12);
}
.cart-add-on-btn:hover,
.cart-add-on-btn:focus-visible {
    background: #ff9800;
    border-color: #ff9800;
    color: #fff;
}
.menu-cart-items {
    display: grid;
    gap: 12px;
    flex: 1;
    overflow-y: auto;
    max-height: 340px;
}
.menu-cart-empty {
    margin: 0;
    color: #ffffff;
    padding: 10px 0;
}
.menu-cart-item {
    background: #f7f7f7;
    border-radius: 14px;
    padding: 14px;
    display: grid;
    gap: 8px;
}
.menu-cart-item-details {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
}
.menu-cart-item-title-row {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.menu-cart-components-toggle {
    border: none;
    background: transparent;
    color: #111;
    cursor: pointer;
    font-size: 14px;
    line-height: 1;
    padding: 2px 4px;
    border-radius: 6px;
}
.menu-cart-components-toggle:hover,
.menu-cart-components-toggle:focus-visible {
    background: rgba(255, 152, 0, 0.2);
}
.menu-cart-item-qty-controls {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 8px;
}
.menu-cart-item-quantity-btn {
    display: grid;
    place-items: center;
    width: 26px;
    height: 26px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: #111;
    color: #fff;
    font-size: 11px;
    cursor: pointer;
}
.menu-cart-item-quantity-btn:hover,
.menu-cart-item-quantity-btn:focus-visible {
    background: #ff9800;
}
.menu-cart-item-quantity-btn:disabled {
    background: #c8c8c8;
    color: #777;
    cursor: not-allowed;
}
.menu-cart-item-qty-wrap {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
}
.menu-cart-item-qty-input {
    width: 44px;
    padding: 3px 6px;
    border: 1px solid rgba(17, 17, 17, 0.25);
    border-radius: 8px;
    background: #fff;
    text-align: center;
    font: inherit;
    font-weight: 700;
    color: #111;
}
.menu-cart-item-qty-input:focus {
    outline: 2px solid #ff9800;
    outline-offset: 1px;
}
.menu-cart-item-qty-input.is-invalid {
    border-color: #d32f2f;
    background: #fff1f0;
    color: #b3261e;
}
.menu-cart-item-qty-error {
    max-width: 200px;
    font-size: 0.72rem;
    font-weight: 600;
    line-height: 1.35;
    color: #d32f2f;
}
.menu-cart-item-qty-error[hidden] {
    display: none;
}
.menu-cart-item-remove {
    border: none;
    background: transparent;
    color: #d32f2f;
    font-weight: 700;
    cursor: pointer;
    text-align: right;
    padding: 0;
}
.menu-cart-components {
    margin-top: 4px;
    border-radius: 10px;
    padding: 8px;
    background: #fff;
    border: 1px solid rgba(0, 0, 0, 0.08);
}
.menu-cart-components-title {
    margin: 0 0 6px;
    font-size: 0.8rem;
    font-weight: 700;
    color: #6a4a2f;
    text-transform: uppercase;
}
.menu-cart-component-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 8px;
}
.menu-cart-component-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
.menu-cart-component-name {
    font-size: 0.86rem;
    color: #222;
    font-weight: 600;
}
.menu-cart-component-controls {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.menu-cart-component-btn {
    width: 24px;
    height: 24px;
    border: none;
    border-radius: 50%;
    background: #111;
    color: #fff;
    cursor: pointer;
    font-weight: 700;
    line-height: 1;
    display: grid;
    place-items: center;
    padding: 0;
}
.menu-cart-component-btn:hover,
.menu-cart-component-btn:focus-visible {
    background: #ff9800;
}
.menu-cart-component-btn:disabled {
    background: #c8c8c8;
    color: #777;
    cursor: not-allowed;
}
.menu-cart-component-qty-wrap {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 2px;
}
.menu-cart-component-qty-input {
    width: 40px;
    padding: 2px 6px;
    border: 1px solid rgba(17, 17, 17, 0.25);
    border-radius: 8px;
    background: #fff;
    text-align: center;
    font: inherit;
    font-weight: 700;
    color: #222;
}
.menu-cart-component-qty-input:focus {
    outline: 2px solid #ff9800;
    outline-offset: 1px;
}
.menu-cart-component-qty-input.is-invalid {
    border-color: #d32f2f;
    background: #fff1f0;
    color: #b3261e;
}
.menu-cart-component-qty-error {
    max-width: 190px;
    font-size: 0.7rem;
    font-weight: 600;
    line-height: 1.35;
    text-align: right;
    color: #d32f2f;
}
.menu-cart-component-qty-error[hidden] {
    display: none;
}
.menu-cart-component-remove {
    border: none;
    background: transparent;
    color: #b62a2a;
    cursor: pointer;
    font-weight: 700;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}
.menu-cart-summary {
    display: grid;
    gap: 12px;
}
.menu-cart-summary > div {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
}
.order-checkout-screen {
    background: #f9f9f9;
    border-radius: 18px;
    padding: 22px;
    display: grid;
    gap: 18px;
    max-height: 80vh;
    overflow-y: auto;
}
.order-checkout-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}
.order-checkout-content {
    display: grid;
    gap: 18px;
}
.order-checkout-section {
    display: grid;
    gap: 10px;
}
.checkout-label {
    font-weight: 700;
    margin: 0;
}
.checkout-options {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    /* Anchors the option info bubble below (see .checkout-info-tooltip). */
    position: relative;
}
.checkout-option-btn {
    border: 1px solid #111;
    background: #fff;
    color: #111;
    border-radius: 12px;
    padding: 10px 16px;
    cursor: pointer;
    font-weight: 700;
    transition: background 0.2s ease, color 0.2s ease;
}
.checkout-option-btn.active,
.checkout-option-btn:hover {
    background: #111;
    color: #fff;
}
.checkout-option-btn:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}
.checkout-option-btn:disabled.active {
    background: #111;
    color: #fff;
}
/* Inline info marker, rendered inside the SakayKo Rider Pick-up button.
   Deliberately a <span> and not a <button> — a button cannot be nested in a
   button. It borrows the option's text colour (color: inherit), so the circle
   reads dark on a white option and white once the option is selected/hovered
   (dark or brand-orange background) without any theme-specific override. */
.checkout-info-tip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    margin-left: 6px;
    color: inherit;
    font-size: 0.8em;
    line-height: 1;
    vertical-align: middle;
    cursor: help;
    transition: opacity 0.2s ease, transform 0.2s ease;
}
.checkout-info-tip:hover,
.checkout-info-tip:focus {
    opacity: 0.75;
    transform: scale(1.1);
    outline: none;
}

/* The reminder bubble. It is a SIBLING of the option buttons (not a child of
   the option) because Safari can clip absolutely positioned children of a
   <button>. script.js adds .is-open while the marker is hovered or focused, so
   the reminder shows for the marker only — never for the option itself. */
.checkout-info-tooltip {
    position: absolute;
    bottom: calc(100% + 10px);
    right: 0;
    transform: translateY(4px);
    width: max-content;
    /* Relative to the options row (the absolutely positioned bubble's
       containing block), not the viewport: the note then fits whatever space
       the checkout screen actually has on a phone, tablet, or desktop without
       a magic pixel offset. */
    max-width: min(16rem, 100%);
    /* Long words in the note must never widen the bubble past that cap. */
    overflow-wrap: break-word;
    background: #111;
    color: #fff;
    font-size: 0.75rem;
    font-weight: 500;
    line-height: 1.4;
    text-align: left;
    white-space: normal;
    padding: 8px 10px;
    border-radius: 10px;
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.28);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s ease;
    z-index: 6;
}
/* The SakayKo reminder carries a multi-line Friendly Reminder message, so its
   bubble gets extra room on wide screens to keep the text comfortable. */
#orderTypeOptions .checkout-info-tooltip {
    max-width: min(24rem, 100%);
}
.checkout-info-tooltip .tooltip-lead {
    display: block;
    margin-bottom: 6px;
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.01em;
}
.checkout-info-tooltip.is-below {
    /* Flipped under the options row by script.js when the bubble would be cut
       off above the checkout scroll container. */
    bottom: auto;
    top: calc(100% + 10px);
    transform: translateY(-4px);
}
.checkout-info-tooltip.is-open {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    /* While it is open the bubble takes the tap itself (which closes it via
       script.js) instead of letting the touch fall through to whatever control
       it is covering. */
    pointer-events: auto;
    /* script.js caps the bubble's height to the room left above (or below) the
       row. A screen too short for the whole note scrolls it inside the bubble
       instead of having the checkout box clip it. */
    overflow-y: auto;
    overscroll-behavior: contain;
}

/* --- Reminder bubble on smaller screens -----------------------------------
   The bubble is anchored to the options row, so it shrinks with the layout;
   these breakpoints keep the text comfortable rather than merely fitting. */
@media (max-width: 900px) {
    .checkout-info-tooltip {
        padding: 8px 10px;
        border-radius: 10px;
        font-size: 0.74rem;
    }

    #orderTypeOptions .checkout-info-tooltip {
        max-width: min(20rem, 100%);
    }

    .checkout-info-tooltip .tooltip-lead {
        margin-bottom: 5px;
        font-size: 0.78rem;
    }
}

@media (max-width: 560px) {
    /* A phone: fill the row instead of a fixed rem width, so the note reads as
       a comfortable block rather than a narrow column of wrapped words. */
    .checkout-info-tooltip,
    #orderTypeOptions .checkout-info-tooltip {
        max-width: 100%;
        padding: 8px 10px;
        font-size: 0.72rem;
        line-height: 1.45;
    }

    .checkout-info-tooltip .tooltip-lead {
        margin-bottom: 4px;
        font-size: 0.76rem;
    }

    /* The marker is a small target on a phone; keep it comfortably tappable
       without letting it stretch the option button. */
    .checkout-info-tip {
        margin-left: 5px;
        padding: 2px;
    }
}

@media (max-width: 400px) {
    .checkout-info-tooltip {
        padding: 7px 9px;
        font-size: 0.7rem;
    }

    .checkout-info-tooltip .tooltip-lead {
        font-size: 0.74rem;
    }
}
/* Options that are only sometimes on offer (COD exists for SakayKo rider
   deliveries only) carry their marker and bubble right after the option button;
   hiding the option hides its note too, so nothing points at an absent choice. */
.checkout-option-btn.hidden + .checkout-info-tip,
.checkout-option-btn.hidden ~ .checkout-info-tooltip {
    display: none;
}
.order-checkout-items {
    display: grid;
    gap: 10px;
}
.order-checkout-item {
    background: #fff;
    border-radius: 14px;
    padding: 12px 14px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
}
.order-checkout-item span {
    color: #555;
}
.order-checkout-total {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 1.1rem;
    font-weight: 700;
}
/* DPA consent checkbox (checkout) */
.consent-section {
    margin-top: 12px;
}
.consent-label {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    font-size: 0.85rem;
    line-height: 1.5;
    color: #555;
    cursor: pointer;
}
.consent-label input[type="checkbox"] {
    margin-top: 3px;
    flex: none;
    width: 16px;
    height: 16px;
    accent-color: #b45309;
    cursor: pointer;
}
.consent-label a {
    color: #b45309;
    text-decoration: underline;
}
.consent-label.consent-error span {
    color: #b00020;
}
.order-checkout-actions {
    display: grid;
    gap: 12px;
}
.order-checkout-actions .menu-back-btn {
    width: 100%;
}
.checkout-text-input,
.checkout-textarea {
    width: 100%;
    border: 1px solid #d4d4d8;
    border-radius: 12px;
    padding: 12px 14px;
    font-family: inherit;
    font-size: 0.95rem;
    background: #fff;
    color: #111;
    box-sizing: border-box;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.checkout-text-input:focus,
.checkout-textarea:focus {
    outline: none;
    border-color: #111;
    box-shadow: 0 0 0 3px rgba(17, 17, 17, 0.12);
}
.checkout-text-input.is-invalid {
    border-color: #b00020;
}
.checkout-text-input.is-invalid:focus {
    border-color: #b00020;
    box-shadow: 0 0 0 3px rgba(176, 0, 32, 0.12);
}
.checkout-field-error {
    display: block;
    font-size: 0.78rem;
    color: #b00020;
    line-height: 1.35;
    margin-top: 6px;
    min-height: 1em;
}
.checkout-textarea {
    resize: vertical;
    min-height: 74px;
}
.checkout-hint {
    font-size: 0.8rem;
    color: #666;
    line-height: 1.4;
}
#deliveryAddressSection {
    border-left: 3px solid #ff9800;
    padding-left: 12px;
    border-radius: 4px;
}
.live-clock {
    font-size: 0.95rem;
    color: #caff0a;
    margin-top: 8px;
}
.order-payment-screen {
    background: #f9f9f9;
    border-radius: 18px;
    padding: 22px;
    display: grid;
    gap: 18px;
}
.order-payment-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}
.order-payment-content {
    display: grid;
    gap: 18px;
}
.payment-summary {
    display: grid;
    gap: 10px;
    background: #fff;
    border-radius: 14px;
    padding: 16px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.05);
}
.payment-message {
    background: #fff;
    border-radius: 14px;
    padding: 18px;
    color: #111;
    font-weight: 700;
    line-height: 1.4;
    box-shadow: 0 4px 12px rgba(0,0,0,0.05);
}
.payment-qr-placeholder {
    display: grid;
    gap: 12px;
    justify-items: center;
    text-align: center;
}
.qr-box {
    width: 220px;
    height: 220px;
    border-radius: 20px;
    background: #eaeaea;
    display: grid;
    place-items: center;
    color: #555;
    font-weight: 700;
    padding: 20px;
}
.qr-note {
    margin: 0;
    color: #666;
}
.menu-place-order-btn {
    width: 100%;
    border: none;
    background: #111;
    color: #fff;
    border-radius: 14px;
    padding: 12px 16px;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.2s ease;
}
.menu-place-order-btn:disabled {
    background: #bbb;
    cursor: not-allowed;
}
.menu-place-order-btn:hover:not(:disabled) {
    background: #ff9800;
}
.menu-order-message {
    margin: 0;
    color: #333;
    font-size: 0.95rem;
    min-height: 1.2rem;
}
.payment-success-modal {
    position: fixed;
    inset: 0;
    z-index: 3200;
    display: grid;
    place-items: center;
    padding: 16px;
    background: rgba(0, 0, 0, 0.7);
}
.payment-success-card {
    width: min(420px, 100%);
    padding: 24px;
    border-radius: 20px;
    background: #fff;
    box-shadow: 0 18px 50px rgba(0, 0, 0, 0.24);
    text-align: center;
    display: grid;
    gap: 12px;
}
.payment-success-card h3 {
    margin: 0;
    color: #8a3d00;
}
.payment-success-card p {
    margin: 0;
    color: #444;
    line-height: 1.6;
}
.orders-section {
    background: #fff;
    margin: 24px auto;
    padding: 24px;
    border-radius: 12px;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08);
    max-width: 900px;
    width: calc(100% - 48px);
}
.pending-orders-list {
    display: grid;
    gap: 16px;
    margin-top: 16px;
}
.orders-tab-switch {
    margin-top: 14px;
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}
.orders-tab-btn {
    border: 1px solid #d8d8d8;
    background: #fff;
    color: #111;
    border-radius: 999px;
    padding: 9px 16px;
    font-weight: 700;
    cursor: pointer;
}
.orders-tab-btn.active {
    background: #111;
    color: #fff;
    border-color: #111;
}
.walkin-order-panel {
    margin-top: 16px;
    display: grid;
    gap: 14px;
}
.walkin-order-builder,
.walkin-order-footer {
    display: grid;
    grid-template-columns: 1.2fr 0.8fr auto;
    gap: 12px;
    align-items: end;
}
.walkin-order-footer {
    grid-template-columns: 1fr 1fr auto;
}
.walkin-order-builder label,
.walkin-order-footer label {
    display: grid;
    gap: 6px;
    font-weight: 700;
    color: #222;
}
.walkin-order-builder select,
.walkin-order-builder input,
.walkin-order-footer select {
    border: 1px solid #d4d4d4;
    border-radius: 10px;
    padding: 10px 12px;
    font-size: 0.95rem;
}
.walkin-item-picker {
    position: relative;
    display: block;
}
.walkin-item-dropdown {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    z-index: 60;
    max-height: min(38vh, 280px);
    overflow-y: auto;
    background: #fff;
    border: 1px solid #d4d4d4;
    border-radius: 10px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.14);
    padding: 4px;
    scrollbar-width: thin;
    scrollbar-color: #c9c9c9 transparent;
}
.walkin-item-dropdown::-webkit-scrollbar {
    width: 8px;
}
.walkin-item-dropdown::-webkit-scrollbar-thumb {
    background: #c9c9c9;
    border-radius: 999px;
}
.walkin-item-option {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    width: 100%;
    border: 0;
    border-radius: 8px;
    background: transparent;
    padding: 9px 10px;
    font-size: 0.95rem;
    font-family: inherit;
    color: #222;
    text-align: left;
    cursor: pointer;
    transition: background-color 0.12s ease;
}
.walkin-item-option:hover,
.walkin-item-option.active {
    background: #f3f4f6;
}
.walkin-item-option-name {
    font-weight: 600;
}
.walkin-item-option-meta {
    color: #6b7280;
    font-size: 0.85rem;
    white-space: nowrap;
}
.walkin-draft-list {
    display: grid;
    gap: 10px;
}
.walkin-draft-items {
    display: grid;
    gap: 10px;
}
.walkin-draft-item-card {
    background: #f7f7f7;
    border-radius: 12px;
    padding: 12px;
    display: flex;
    justify-content: space-between;
    gap: 12px;
    align-items: center;
    color: #111;
}
.walkin-draft-item-card p {
    margin: 4px 0 0;
    color: #444;
}
.walkin-draft-item-card strong,
.walkin-draft-component-name,
.walkin-draft-components-title {
    color: #111;
}
.walkin-draft-actions {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
.walkin-draft-qty-btn,
.walkin-draft-remove-btn {
    border: none;
    border-radius: 10px;
    background: #111;
    color: #fff;
    font-weight: 700;
    cursor: pointer;
    padding: 8px 10px;
}
.walkin-draft-qty-btn:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}
.walkin-draft-remove-btn {
    background: #7c1a1a;
}
.walkin-draft-total {
    margin: 0;
    color: #111;
}
.order-logs-list {
    display: grid;
    gap: 12px;
    margin-top: 16px;
}
.logs-filter-bar {
    margin-top: 12px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
}
.logs-filter-select-wrap,
.logs-date-filter-wrap {
    position: relative;
    display: inline-flex;
    align-items: center;
}
.logs-category-filter,
.logs-date-filter {
    appearance: none;
    border: 1px solid rgba(255, 255, 255, 0.22);
    background: rgba(255, 255, 255, 0.06);
    color: #fff;
    border-radius: 10px;
    padding: 9px 16px;
    min-height: 42px;
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
}
.logs-date-filter {
    min-width: 180px;
    cursor: pointer;
}
.logs-category-filter option,
.logs-date-filter {
    color: #111;
}
.logs-category-filter:focus,
.logs-date-filter:focus {
    outline: 2px solid rgba(255, 152, 0, 0.7);
    outline-offset: 2px;
}
.order-log-card {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    padding: 14px;
    display: grid;
    gap: 6px;
}
.order-log-card p,
.order-log-card strong,
.order-log-card span {
    color: #fff;
    margin: 0;
}

.order-log-card .review-log-comment .review-log-comment-text {
    color: #000 !important;
}

.order-log-top-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
}
@media (max-width: 560px) {
    .walkin-order-builder,
    .walkin-order-footer {
        grid-template-columns: 1fr;
    }
}
.pending-order-card {
    background: #f7f7f7;
    border-radius: 14px;
    padding: 18px;
    display: grid;
    gap: 12px;
}
.pending-order-card h4 {
    margin: 0;
    color: #111;
}
.pending-order-card p,
.pending-order-card li,
.pending-order-card span,
.pending-order-card strong {
    color: #222;
}
.pending-order-card ul {
    margin: 0;
    padding-left: 18px;
    color: #222;
}
.order-complete-btn {
    border: none;
    background: #111;
    color: #fff;
    border-radius: 12px;
    padding: 10px 16px;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.2s ease;
}
.order-complete-btn:hover {
    background: #ff9800;
}
.hidden {
    display: none !important;
}
.slideshow {
    position: relative;
    max-width: 700px;
    width: min(100%, 700px);
    min-width: 0;
    margin: 24px auto 0;
    background: transparent;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}

.slideshow .slides {
    position: relative;
    height: 320px;
}

.slideshow img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    transition: opacity 0.5s ease-in-out;
    cursor: default;
    pointer-events: none;
    border-radius: 12px;
}

.slideshow img.active {
    opacity: 1;
    cursor: zoom-in;
    pointer-events: auto;
}

.slide-dots {
    position: absolute;
    bottom: 14px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 10px;
    z-index: 2;
}

.slide-dots button {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    border: none;
    background: rgba(225, 133, 14, 0.7);
    cursor: pointer;
}

.slide-dots button.active { background: #111; }

.slideshow-empty {
    height: 100%;
    display: grid;
    place-items: center;
    text-align: center;
    padding: 24px;
    color: #4a4a4a;
    background: linear-gradient(160deg, #fff3de 0%, #ffffff 100%);
    font-weight: 600;
}

.highlights-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 14px;
    margin-top: 14px;
}

.highlight-item-card {
    background: #fff;
    border: 1px solid #ececec;
    border-radius: 12px;
    padding: 10px;
    display: grid;
    gap: 10px;
}

.highlight-item-card img {
    width: 100%;
    height: 110px;
    object-fit: cover;
    border-radius: 10px;
}

.highlight-remove-btn {
    border: none;
    border-radius: 10px;
    padding: 8px 10px;
    font-weight: 700;
    background: #111;
    color: #fff;
    cursor: pointer;
}

.highlight-remove-btn:hover {
    background: #d32f2f;
}

.image-lightbox {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.9);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    z-index: 2000;
}

.image-lightbox.hidden {
    display: none;
}

.image-lightbox img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    border-radius: 12px;
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.35);
}

.image-lightbox .close-btn {
    position: absolute;
    top: 18px;
    right: 18px;
    border: none;
    background: rgba(255,255,255,0.9);
    color: #111;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    font-size: 24px;
    line-height: 1;
    cursor: pointer;
}

.product-detail-modal {
    position: fixed;
    inset: 0;
    z-index: 2200;
    display: grid;
    place-items: center;
    padding: 20px;
    background: rgba(9, 7, 5, 0.58);
    backdrop-filter: blur(10px);
}
.product-detail-modal.hidden {
    display: none;
}
.product-detail-card {
    position: relative;
    width: min(92vw, 860px);
    max-height: min(90vh, 820px);
    overflow: auto;
    border-radius: 26px;
    background: linear-gradient(180deg, #fffaf3 0%, #fff4e7 100%);
    box-shadow: 0 28px 70px rgba(0, 0, 0, 0.32);
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
}
.product-detail-media {
    min-height: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 14px;
    background: linear-gradient(135deg, #ffe1bd, #fff3df);
}
.product-detail-media img {
    display: block;
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: min(78vh, 720px);
    object-fit: contain;
}
.product-detail-body {
    padding: clamp(20px, 4vw, 36px);
    display: grid;
    align-content: center;
    gap: 14px;
}
.product-detail-kicker {
    margin: 0;
    text-transform: uppercase;
    letter-spacing: 0.22em;
    color: #b05a15;
    font-size: 0.78rem;
    font-weight: 800;
}
.product-detail-body h3 {
    margin: 0;
    color: #25160c;
    font-size: clamp(1.5rem, 4vw, 2.2rem);
}
.product-detail-description {
    margin: 0;
    color: #513d2d;
    line-height: 1.65;
    font-size: 1rem;
}
.product-detail-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    flex-wrap: wrap;
    margin-top: 6px;
}
.product-detail-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}
.product-detail-actions .menu-place-order-btn {
    min-width: 140px;
}
.product-detail-footer strong {
    color: #e65100;
    font-size: clamp(1.2rem, 3vw, 1.6rem);
}
.product-detail-qty-wrap {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}
.product-detail-qty-controls {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 4px;
    border-radius: 999px;
    background: rgba(27, 21, 17, 0.08);
}
.product-detail-qty-btn {
    width: 30px;
    height: 30px;
    border: none;
    border-radius: 50%;
    background: #111;
    color: #fff;
    font-size: 18px;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
    display: grid;
    place-items: center;
}
.product-detail-qty-btn:hover,
.product-detail-qty-btn:focus-visible {
    background: #ff9800;
}
.product-detail-qty-btn:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}
#productDetailQtyValue {
    width: 46px;
    min-width: 18px;
    padding: 2px 4px;
    border: none;
    border-radius: 999px;
    background: transparent;
    text-align: center;
    font: inherit;
    font-weight: 700;
    color: #2a1b11;
}
#productDetailQtyValue:focus {
    outline: 2px solid #ff9800;
    outline-offset: 1px;
}
#productDetailQtyValue.is-invalid {
    background: #fff1f0;
    color: #b3261e;
}
.product-detail-qty-error {
    max-width: 240px;
    text-align: center;
    font-size: 0.74rem;
    font-weight: 600;
    line-height: 1.35;
    color: #b3261e;
}
.product-detail-qty-error[hidden] {
    display: none;
}
.product-detail-stock-left:not([hidden]) {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 4px 11px;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    white-space: nowrap;
    background: #ecfdf5;
    color: #047857;
    border: 1px solid #a7f3d0;
}
.product-detail-stock-left:not([hidden]).is-low {
    background: #fff7ed;
    color: #c2410c;
    border-color: #fed7aa;
}
.product-detail-close {
    position: absolute;
    top: 16px;
    right: 16px;
    width: 44px;
    height: 44px;
    border: none;
    border-radius: 999px;
    background: rgba(36, 20, 10, 0.82);
    color: #fff;
    font-size: 28px;
    line-height: 1;
    cursor: pointer;
    z-index: 1;
}

.inventory-description-field textarea {
    width: 100%;
    resize: vertical;
    min-height: 110px;
    padding: 12px 14px;
    border-radius: 14px;
    border: 1px solid rgba(0, 0, 0, 0.15);
    font: inherit;
    line-height: 1.5;
}

@media (max-width: 860px) {
    .product-detail-card {
        grid-template-columns: 1fr;
    }

    .product-detail-media img {
        max-height: 56vh;
    }

    .menu-item-card {
        flex-direction: column;
    }

    .menu-item-controls {
        width: 100%;
        justify-items: start;
    }
}

@media (max-width: 1200px) {
    .special-foods-list {
        grid-template-columns: repeat(5, minmax(0, 1fr));
    }
}

@media (max-width: 1000px) {
    .special-foods-list {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

@media (max-width: 900px) {
    .slideshow .slides { height: 260px; }
}

@media (max-width: 760px) {
    .top-bar {
        flex-wrap: nowrap;
        align-items: center;
        padding: 14px 16px;
    }

    .top-bar h1 {
        flex: 1 1 auto;
        min-width: 0;
        font-size: 18px;
        letter-spacing: 1px;
    }

    .live-clock {
        display: none;
    }

    .mobile-menu-toggle {
        display: flex;
        flex: 0 0 auto;
        width: 42px;
        height: 42px;
        min-width: 42px;
    }

    .top-nav {
        position: absolute;
        top: calc(100% + 8px);
        left: 16px;
        right: 16px;
        display: none;
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
        margin-left: 0;
        padding: 12px;
        border-radius: 12px;
        background: rgba(255, 255, 255, 0.98);
        box-shadow: 0 8px 22px rgba(0, 0, 0, 0.12);
    }

    .top-nav.open {
        display: flex;
    }

    .top-nav a {
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
        text-align: center;
        background: #fff;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .special-foods-list {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .special-food-card {
        max-width: none;
    }

    .special-food-view-btn {
        height: 140px;
    }
}

@media (max-width: 560px) {
    .special-foods-list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 420px) {
    .special-foods-list {
        grid-template-columns: 1fr;
    }
}


.sales-analytics-placeholder {
    background: #ffffff;
    border: 1px solid rgba(148, 163, 184, 0.14);
    color: #1f2937;
    margin-bottom: 16px;
    padding: 22px 24px;
    border-radius: 16px;
    box-shadow: 0 2px 12px rgba(15, 23, 42, 0.04), 0 0 0 1px rgba(148, 163, 184, 0.06);
    transition: box-shadow 0.2s ease;
}

.sales-analytics-placeholder:hover {
    box-shadow: 0 4px 20px rgba(15, 23, 42, 0.07), 0 0 0 1px rgba(148, 163, 184, 0.1);
}

.sales-analytics-placeholder h3 {
    margin-top: 0;
    margin-bottom: 4px;
    font-size: 1.15rem;
    font-weight: 800;
    color: #1f2937;
    letter-spacing: -0.01em;
}

.sales-analytics-placeholder > h3::before {
    content: "";
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: linear-gradient(135deg, #2BAE66, #167A45);
    margin-right: 8px;
    vertical-align: middle;
    box-shadow: 0 0 0 3px rgba(43, 174, 102, 0.15);
}

.sales-analytics-placeholder p {
    margin: 0;
    line-height: 1.6;
    color: #64748b;
    font-size: 0.88rem;
}

/* Sales section panels: enable vertical scrolling for up/down scroll buttons */
#sales .sales-analytics-placeholder,
#sales .profit-analytics-panel {
    position: relative;
    max-height: none;
    overflow-y: visible;
    overflow-x: visible;
}

/* Profit analytics panel: shared styles with sales panel */
.profit-analytics-panel {
    margin-bottom: 16px;
}

/* Spacing between consecutive panels in Sales tab */
#sales > .sales-analytics-placeholder + .sales-analytics-placeholder {
    margin-top: 0;
}

/* Ensure the profit export panel has a top separator */
.profit-export-panel {
    margin-top: 16px;
}

.sales-analytics-select-wrapper {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-top: 16px;
    background: #f8fafc;
    border: 1px solid rgba(148, 163, 184, 0.18);
    border-radius: 12px;
    padding: 10px 14px;
    flex-wrap: wrap;
}

.sales-analytics-select-wrapper label {
    color: #475569;
    font-size: 0.82rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.nested-selector {
    margin-top: 0;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: transparent;
    border: none;
    border-radius: 10px;
    padding: 0;
}

.nested-selector label {
    color: #475569;
    font-size: 0.82rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.nested-select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background: #111;
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 10px;
    padding: 10px 12px;
    min-width: 170px;
    cursor: pointer;
    background-image: url("data:image/svg+xml,%3Csvg width='12' height='8' viewBox='0 0 12 8' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23ffffff' stroke-width='2' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 12px 8px;
}

.analytics-select,
.nested-select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background: #ffffff;
    color: #1f2937;
    border: 1px solid rgba(148, 163, 184, 0.25);
    border-radius: 10px;
    padding: 10px 38px 10px 12px;
    min-width: 170px;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
    background-image: url("data:image/svg+xml,%3Csvg width='12' height='8' viewBox='0 0 12 8' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23475569' stroke-width='2' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 12px 8px;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04);
}

.analytics-select:hover,
.nested-select:hover {
    border-color: rgba(43, 174, 102, 0.4);
}

.analytics-select:focus,
.nested-select:focus {
    outline: none;
    border-color: #2BAE66;
    box-shadow: 0 0 0 3px rgba(43, 174, 102, 0.12);
}

.analytics-select option,
.nested-select option {
    background: #ffffff;
    color: #1f2937;
}

.sales-analytics-chart-wrapper {
    width: 100%;
    overflow-x: auto;
    overflow-y: visible;
    margin-top: 14px;
    padding: 4px 0 6px;
    -webkit-overflow-scrolling: touch;
    border-radius: 14px;
}

.sales-analytics-chart {
    display: block;
    width: 100%;
    min-width: fit-content;
    overflow: visible;
}

/* Charts render at their natural pixel width so day/month labels stay
   readable; the wrapper pans horizontally instead of shrinking them. */
.sales-analytics-chart svg {
    display: block;
    width: auto;
    min-width: 100%;
    height: auto;
    border-radius: 14px;
}

/* Horizontal pan controls under each analytics chart */
.chart-scroll-controls {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 12px;
    padding-top: 8px;
    border-top: 1px solid rgba(148, 163, 184, 0.1);
}

.chart-scroll-hint {
    margin-right: auto;
    font-size: 0.78rem;
    font-weight: 600;
    color: #94a3b8;
}

.chart-scroll-controls:not(.is-scrollable) {
    display: none;
}

.chart-scroll-controls:not(.is-scrollable) .chart-scroll-hint {
    display: none;
}

/* ===== Vertical scroll controls (Overview sales analysis) ===== */
.chart-scroll-vertical {
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 6px;
    padding: 8px 4px;
    position: sticky;
    right: 2px;
    top: 4px;
    z-index: 5;
    background: rgba(255, 255, 255, 0.85);
    border-radius: 10px;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    border: 1px solid rgba(148, 163, 184, 0.15);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

body.staff-app .chart-scroll-vertical {
    background: rgba(30, 41, 59, 0.75);
    border-color: var(--staff-border);
}

.chart-scroll-vertical:not(.is-scrollable) {
    display: none;
}

.chart-scroll-vertical.is-scrollable {
    display: flex;
}

/* Overview section responsive */
@media (max-width: 1024px) {
    .overview-analytics-panel {
        max-height: none;
        overflow-y: visible;
    }

    .chart-scroll-vertical {
        position: relative;
        right: auto;
        top: auto;
        flex-direction: row;
        justify-content: center;
    }

}

@media (max-width: 640px) {
    .chart-scroll-vertical {
        padding: 6px 2px;
    }

}

/* Horizontal pan controls: stay comfortable to tap on tablet/phone widths.
   Only layout/tap-target tweaks — chart container sizes are untouched. */
@media (max-width: 768px) {
    .chart-scroll-controls {
        flex-wrap: wrap;
        justify-content: center;
        gap: 8px;
    }

    .chart-scroll-hint {
        flex: 1 1 100%;
        text-align: center;
        margin-right: 0;
    }
}



.overview-section,
.inventory-section,
.orders-section,
.sales-section,
.account-management {
    background: #f5f7fb;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    margin: 12px auto 0;
    padding: 28px;
    border-radius: 18px;
    box-shadow: 0 10px 30px rgba(15, 23, 42, 0.06);
    width: calc(100% - 48px);
    max-width: 1200px;
    color: #1f2937;
    border: 1px solid rgba(148, 163, 184, 0.12);
    min-height: auto;
}

/* Ensure dashboard sections with the `hidden` attribute take no layout space
   to prevent body scrolling into empty areas when switching tabs. */
.overview-section[hidden],
.inventory-section[hidden],
.orders-section[hidden],
.sales-section[hidden],
.account-management[hidden],
.orders-section[hidden],
#pending-orders[hidden],
#logs[hidden],
#highlights[hidden] {
    display: none !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
}

.overview-grid {
    display: grid;
    gap: 16px;
    grid-template-columns: minmax(0, 3fr) minmax(0, 1fr);
    align-items: start;
}

/* ---------- Overview metric cards ---------- */
.overview-metrics-row {
    display: flex;
    flex-wrap: wrap;
    justify-content: stretch;
    gap: 10px;
    margin: 8px 0 12px;
}

.metric-card {
    flex: 1 1 200px;
    background: #ffffff;
    border-radius: 10px;
    padding: 16px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06);
}

.metric-label {
    font-size: 13px;
    color: #666666;
    margin-bottom: 6px;
}

.metric-value {
    font-size: 28px;
    font-weight: 700;
}

.metric-hint {
    font-size: 12px;
    color: #9ca3af;
    margin-top: 8px;
}

/* Each figure is coloured by the metric it reports; the staff-app theme layer
   re-colours the four it owns further down this file. */
#pendingOrdersCount { color: #ef4444; }
#ordersCompletedCount { color: #16a34a; }
#walkinCompletedCount { color: #f59e0b; }
#onlineCompletedCount { color: #6366f1; }
#todayRevenueCount { color: #7c3aed; }
#avgPrepCount { color: #0891b2; }
#lowStockCount { color: #dc2626; }

/* Best Seller shows an item name rather than a plain number, so it steps down
   from the 28px the other figures use. */
#bestSellerCount {
    font-size: 22px;
    color: #059669;
}

/* Tablet breakpoint */
@media (max-width: 1024px) {
    .overview-grid {
        grid-template-columns: 1fr;
    }

    .overview-section,
    .inventory-section,
    .orders-section,
    .sales-section,
    .account-management {
        padding: 20px;
        width: calc(100% - 24px);
    }
}

/* Mobile breakpoint */
@media (max-width: 640px) {
    .overview-grid {
        gap: 12px;
    }

    .overview-section,
    .inventory-section,
    .orders-section,
    .sales-section,
    .account-management {
        padding: 16px;
        margin: 12px auto 0;
        width: calc(100% - 16px);
        border-radius: 14px;
    }

    .overview-metrics-row {
        gap: 10px !important;
    }

    .metric-card {
        flex: 1 1 140px !important;
        padding: 12px !important;
    }

    .metric-card div:nth-child(2) {
        font-size: 22px !important;
    }

    .overview-analytics-panel {
        padding: 12px !important;
    }

    .overview-order-notification-box {
        padding: 14px 16px !important;
        min-height: 160px;
    }
}

.overview-grid > * {
    min-width: 0;
    overflow: hidden;
}

.overview-analytics-panel,
/* ============ Data retention banner ============ */
.retention-banner {
    background: #fffbeb;
    border: 1px solid rgba(245, 158, 11, 0.35);
    border-radius: 16px;
    padding: 14px 16px;
    margin: 6px 0 10px;
    color: #78350f;
    box-shadow: 0 4px 14px rgba(245, 158, 11, 0.08);
}

body.staff-app .retention-banner {
    background: var(--staff-surface);
    border-color: var(--staff-border);
    color: var(--staff-text);
}

.retention-banner-head {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 1rem;
    font-weight: 700;
    margin-bottom: 6px;
}

.retention-banner-head i {
    color: #d97706;
}

.retention-banner-text {
    margin: 0 0 12px;
    font-size: 0.9rem;
    line-height: 1.5;
    color: inherit;
}

.retention-banner-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    align-items: center;
}

.retention-clear-btn {
    background: transparent;
    border: 1px solid rgba(220, 38, 38, 0.4);
    color: #dc2626;
    border-radius: 10px;
    padding: 10px 16px;
    font-weight: 700;
    cursor: pointer;
}

/* ============ Security configuration banner ============ */
/* Same shape as the retention banner, but flagged as a problem the admin must
   act on: a protection is degraded, not merely something to archive. Reuses
   .retention-banner-head for the heading row; the icon rule below is more
   specific than the retention one, so it wins regardless of source order. */
.security-banner {
    background: #fef2f2;
    border: 1px solid rgba(220, 38, 38, 0.35);
    border-radius: 16px;
    padding: 14px 16px;
    margin: 6px 0 10px;
    color: #7f1d1d;
    box-shadow: 0 4px 14px rgba(220, 38, 38, 0.08);
}

body.staff-app .security-banner {
    background: var(--staff-surface);
    border-color: rgba(220, 38, 38, 0.45);
    color: var(--staff-text);
}

.security-banner .retention-banner-head i {
    color: #dc2626;
}

.security-banner-list {
    margin: 0;
    padding-left: 18px;
    font-size: 0.9rem;
    line-height: 1.5;
}

.security-banner-list li + li {
    margin-top: 6px;
}


body.staff-app .retention-clear-btn {
    border-color: rgba(239, 68, 68, 0.5);
    color: #ef4444;
}

.retention-clear-btn:hover {
    background: rgba(220, 38, 38, 0.08);
}

/* ============ Overview panels ============ */
.overview-order-notification-box {
    background: #ffffff;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border: 1px solid rgba(148, 163, 184, 0.14);
    border-radius: 18px;
    padding: 20px 22px;
    color: #1f2937;
    overflow: hidden;
    box-shadow: 0 8px 22px rgba(15, 23, 42, 0.04);
}

.overview-analytics-panel {
    position: relative;
    min-height: 0;
    max-height: none;
    overflow: visible;
}

/* Hide the native vertical scrollbar when vertical scroll buttons are present */
.chart-scroll-vertical ~ .overview-analytics-panel,
.overview-analytics-panel:has(+ .chart-scroll-vertical) {
    scrollbar-width: none;
}

.overview-order-notification-box {
    min-height: 200px;
}

.overview-analytics-panel h3,
.overview-order-notification-box h3 {
    margin-top: 0;
    color: #1f2937;
    font-size: 1.1rem;
    font-weight: 700;
}

/* Icon that prefixes a panel heading. The colour marks the panel's subject:
   sales analytics, an Excel export, or profit analysis. */
.panel-heading-icon {
    margin-right: 8px;
    font-size: 0.95em;
}

.panel-heading-icon.is-sales {
    color: #2BAE66;
}

.panel-heading-icon.is-export {
    color: #16A34A;
}

.panel-heading-icon.is-profit {
    color: #F59E0B;
}

.overview-order-notification-box .order-notification-list,
.overview-order-notification-box .order-notification-card {
    color: #1f2937;
}

.overview-order-notification-box .order-notification-card {
    background: #f8fafc;
    border: 1px solid #edf2f7;
    border-radius: 14px;
    box-shadow: none;
}

#overview .sales-analytics-select-wrapper {
    background: #f8fafc;
    border: 1px solid rgba(148, 163, 184, 0.15);
    border-radius: 12px;
    padding: 10px 14px;
    gap: 10px;
}

#overview .analytics-select,
#overview .nested-select {
    background: #ffffff;
    border: 1px solid rgba(148, 163, 184, 0.22);
    border-radius: 10px;
    padding: 9px 36px 9px 12px;
    font-size: 0.88rem;
    font-weight: 600;
    color: #1f2937;
}

#overview .sales-analytics-chart {
    border-radius: 14px;
    background: linear-gradient(180deg, rgba(43, 174, 102, 0.03), rgba(43, 174, 102, 0.01));
    border: 1px solid rgba(148, 163, 184, 0.1);
}

/* Let the overview chart scroll horizontally on narrow columns instead of
   being clipped, so both grid panels keep their full width. */
#overview .sales-analytics-chart-wrapper {
    overflow-x: auto;
    scrollbar-width: thin;
    scrollbar-color: rgba(148,163,184,0.40) transparent;
}

/* Light-theme scrollbar overrides for overview chart wrapper */
#overview .sales-analytics-chart-wrapper::-webkit-scrollbar {
    height: 10px;
}

#overview .sales-analytics-chart-wrapper::-webkit-scrollbar-track {
    background: rgba(148, 163, 184, 0.10);
    border-radius: 999px;
}

#overview .sales-analytics-chart-wrapper::-webkit-scrollbar-thumb {
    background: rgba(148, 163, 184, 0.40);
    border-radius: 999px;
    border: 2px solid rgba(148, 163, 184, 0.10);
}

#overview .sales-analytics-chart-wrapper::-webkit-scrollbar-thumb:hover {
    background: rgba(148, 163, 184, 0.60);
}

.low-stock-modal {
    width: min(520px, 100%);
    max-height: min(82vh, 680px);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    gap: 14px;
    background: rgba(17, 24, 39, 0.96);
    color: #fff;
    border: 1px solid rgba(255,255,255,0.12);
    box-shadow: 0 24px 60px rgba(0,0,0,0.35);
}

.low-stock-modal h2 {
    margin: 0;
    font-size: clamp(1.4rem, 2vw, 1.8rem);
}

.low-stock-modal p {
    margin: 0;
    line-height: 1.5;
    color: rgba(255,255,255,0.82);
}

.low-stock-dropdown {
    display: grid;
    gap: 10px;
    max-height: min(34vh, 260px);
    overflow-y: auto;
    padding: 10px 12px;
    border-radius: 12px;
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.08);
    scrollbar-width: thin;
    scrollbar-color: rgba(255,255,255,0.26) transparent;
}

.low-stock-dropdown::-webkit-scrollbar {
    width: 8px;
}

.low-stock-dropdown::-webkit-scrollbar-thumb {
    background: rgba(255,255,255,0.24);
    border-radius: 999px;
}

.low-stock-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    border-radius: 12px;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.08);
}

.low-stock-item strong {
    color: #ffdd57;
}

.low-stock-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 4px;
}

.low-stock-action-btn {
    border: none;
    cursor: pointer;
    padding: 12px 18px;
    border-radius: 10px;
    font-weight: 700;
    min-width: 180px;
    width: 100%;
}

.low-stock-action-btn.secondary {
    background: rgba(255,255,255,0.08);
    color: #fff;
    border: 1px solid rgba(255,255,255,0.16);
}

.overview-order-notification-box {
    display: grid;
    gap: 16px;
}

/* The heading shares its row with the pending-orders badge, so the row is
   centred and tightly gapped. These two values used to arrive from the
   `.mst-i15` utility at the very end of the file, where they also out-ranked
   the stacked layout in the 900px breakpoint below; folding them into this rule
   (and dropping that now-dead `align-items: flex-start`) keeps the rendered
   result identical at every width. */
.overview-notification-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

/* Pending-orders count riding on the notification heading. Starts hidden;
   script.js reveals it and pulses it via .notif-badge-pulse. */
.order-notification-badge {
    display: none;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 999px;
    background: #ef4444;
    color: #fff;
    font-size: 12px;
    font-weight: 700;
}

.overview-pending-orders-btn {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border: 1px solid rgba(22, 122, 69, 0.4);
    background: rgba(22, 122, 69, 0.08);
    color: #167a45;
    border-radius: 10px;
    padding: 7px 12px;
    font-size: 0.78rem;
    font-weight: 800;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}

.overview-pending-orders-btn:hover {
    background: rgba(22, 122, 69, 0.16);
    transform: translateY(-1px);
    box-shadow: 0 4px 10px rgba(22, 122, 69, 0.14);
}

.order-notification-list {
    display: grid;
    gap: 12px;
    max-height: 560px;
    overflow-y: auto;
    padding-right: 6px;
    scrollbar-width: thin;
    scrollbar-color: rgba(148, 163, 184, 0.35) transparent;
}

.order-notification-card {
    background: #ffffff;
    border: 1px solid rgba(148, 163, 184, 0.22);
    border-radius: 14px;
    padding: 14px 16px;
    display: grid;
    gap: 10px;
    color: #1f2937;
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.05);
}

.order-notification-card.status-pending {
    border-left: 5px solid #2bae66;
    background: linear-gradient(180deg, #f0fdf4 0%, #ffffff 100%);
    cursor: pointer;
    transition: transform 0.16s ease, box-shadow 0.16s ease, border-color 0.16s ease;
}

.order-notification-card.status-pending:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 18px rgba(22, 122, 69, 0.16);
    border-color: #2bae66;
}

.order-notification-card.completed {
    background: rgba(255, 255, 255, 0.03);
}

.order-notification-card h4,
.order-notification-card p {
    margin: 0;
}

.order-notif-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.order-notif-title {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.order-notif-id {
    font-size: 1.05rem;
    font-weight: 800;
    letter-spacing: -0.01em;
    color: #1f2937;
}

.order-notif-ordertype {
    font-size: 0.72rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    background: #eef2ff;
    color: #4338ca;
    border-radius: 999px;
    padding: 4px 10px;
}

.order-notif-badge {
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    border-radius: 999px;
    padding: 4px 10px;
}

.order-notif-badge.is-new {
    background: #fee2e2;
    color: #b91c1c;
}

.order-notif-badge.is-completed {
    background: #dcfce7;
    color: #15803d;
}

.order-notif-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 5px 14px;
    font-size: 0.84rem;
    color: #475569;
}

.order-notif-meta-item {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    white-space: nowrap;
}

.order-notif-meta-item i {
    color: #2bae66;
    font-size: 0.78rem;
}

.order-notif-meta-address {
    white-space: normal;
}

.order-notif-address {
    background: #fffbeb;
    border: 1px solid #fde68a;
    color: #92400e;
    border-radius: 10px;
    padding: 8px 10px;
    font-size: 0.82rem;
}

.order-notif-items {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 6px;
}

.order-notif-item {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 10px;
    font-size: 0.9rem;
    background: #fbfcfd;
    border: 1px solid #eef2f7;
    border-radius: 10px;
    padding: 8px 10px;
}

.order-notif-item strong {
    white-space: nowrap;
}

.order-notif-components {
    grid-column: 1 / -1;
    padding-left: 0 !important;
    list-style: none;
    margin-top: 2px !important;
    background: #f6f8fa;
    border: 1px solid #edf0f4;
    border-radius: 8px;
    padding: 6px 8px;
}

.order-notif-component {
    font-size: 0.8rem;
    color: #3f4c45 !important;
    font-weight: 600;
    padding-left: 6px;
}

.order-notif-foot {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    border-top: 1px solid #edf2f7;
    padding-top: 10px;
}

.order-notif-total {
    display: grid;
    gap: 2px;
}

.order-notif-total span {
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #64748b;
}

.order-notif-total strong {
    font-size: 1.05rem;
    font-weight: 800;
    color: #1f2937;
    letter-spacing: -0.01em;
}

/* ---------- Sales analytics line draw animation ---------- */
.sales-analytics-chart .sales-line-path {
    stroke-dasharray: 1;
    stroke-dashoffset: 1;
    animation: sales-line-draw 1.4s ease-out forwards;
}

@keyframes sales-line-draw {
    to {
        stroke-dashoffset: 0;
    }
}

.sales-analytics-chart .sales-line-dots circle {
    opacity: 0;
    animation: sales-dot-pop 0.35s ease-out forwards;
}

@keyframes sales-dot-pop {
    from {
        opacity: 0;
        transform-origin: center;
        transform: scale(0.4);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

.pending-order-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.pending-order-type {
    font-size: 0.72rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    background: #eef2ff;
    color: #4338ca;
    border-radius: 999px;
    padding: 4px 10px;
}

.pending-item-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.pending-item-qty-controls {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.pending-item-qty-controls span {
    min-width: 20px;
    text-align: center;
    font-weight: 700;
}

.pending-item-qty-btn {
    border: 1px solid rgba(0, 0, 0, 0.2);
    background: #fff;
    color: #111;
    border-radius: 8px;
    width: 30px;
    height: 30px;
    cursor: pointer;
    font-weight: 700;
    line-height: 1;
}

.pending-item-qty-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.pending-item-component-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    padding: 6px 0;
    border-top: 1px solid rgba(0, 0, 0, 0.06);
}

.pending-item-component-row:first-child {
    border-top: none;
}

.pending-item-component-controls {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.pending-item-component-btn {
    border: 1px solid rgba(0, 0, 0, 0.2);
    background: #fff;
    color: #111;
    border-radius: 8px;
    width: 28px;
    height: 28px;
    cursor: pointer;
    font-weight: 700;
    line-height: 1;
}

.pending-item-component-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.pending-item-component-qty {
    min-width: 20px;
    text-align: center;
    font-weight: 700;
}

.order-notification-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    padding-top: 12px;
    border-top: 1px solid rgba(0, 0, 0, 0.08);
    font-size: 1rem;
}


    .inventory-admin-panel {
        background: rgba(255,255,255,0.96);
        backdrop-filter: blur(6px);
        -webkit-backdrop-filter: blur(6px);
        border: 1px solid rgba(0,0,0,0.08);
        border-radius: 16px;
        padding: 20px;
        margin-bottom: 18px;
        color: #111;
        max-width: 100%;
    }

.inventory-item-card {
    background: rgba(255,255,255,0.96);
    color: #111;
    border-radius: 10px;
    padding: 14px;
    margin-bottom: 12px;
}

    .inventory-items-wrapper {
        display: grid;
        gap: 12px;
        margin-top: 18px;
        max-height: 360px;
        overflow-y: auto;
        padding-right: 6px;
    }

    .inventory-item-card {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        gap: 16px;
        padding: 16px;
        border: 1px solid rgba(0, 0, 0, 0.08);
        border-radius: 14px;
        background: #fafafa;
        width: 100%;
        max-width: 100%;
        overflow-wrap: anywhere;
        flex-wrap: wrap;
    }

    .inventory-item-card strong {
        display: block;
        margin-bottom: 4px;
    }

    .inventory-item-card p {
        margin: 4px 0;
    }

    .inventory-item-actions {
        display: flex;
        align-items: flex-start;
        flex-direction: column;
        gap: 10px;
    }

    .inventory-edit-btn {
        border: none;
        background: #ff9800;
        color: #fff;
        border-radius: 10px;
        padding: 10px 14px;
        cursor: pointer;
        transition: background 0.2s ease;
    }

    .inventory-edit-btn:hover {
        background: #e68900;
    }

    .inventory-card-delete-btn {
        border: none;
        background: #d32f2f;
        color: #fff;
        border-radius: 10px;
        padding: 10px 14px;
        cursor: pointer;
        transition: background 0.2s ease;
    }

    .inventory-card-delete-btn:hover {
        background: #b71c1c;
    }

    .inventory-action-row {
        display: flex;
        justify-content: flex-end;
        margin-bottom: 18px;
        max-width: 100%;
    }

    .inventory-add-fab {
        width: 56px;
        height: 56px;
        border: none;
        border-radius: 50%;
        background: #ff9800;
        color: #fff;
        font-size: 34px;
        line-height: 1;
        cursor: pointer;
        box-shadow: 0 10px 22px rgba(0, 0, 0, 0.24);
    }

    .inventory-toolbar {
        display: grid;
        gap: 14px;
        margin-bottom: 18px;
        max-width: 100%;
    }

    .inventory-search-field {
        display: flex;
        flex-direction: column;
        gap: 8px;
        font-weight: 700;
        color: #111;
        width: 100%;
    }

    .inventory-search-field input {
        border: 1px solid rgba(0, 0, 0, 0.14);
        border-radius: 12px;
        padding: 12px 14px;
        background: #f7f7f7;
        color: #111;
    }

    .inventory-category-tabs {
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
    }

    .inventory-category-tab {
        border: 1px solid rgba(0, 0, 0, 0.14);
        background: #fff;
        color: #111;
        border-radius: 999px;
        padding: 8px 12px;
        cursor: pointer;
        font-weight: 700;
    }

    .inventory-category-tab.active {
        background: #ff9800;
        color: #fff;
        border-color: #ff9800;
    }

    .inventory-modal {
        position: fixed;
        inset: 0;
        display: grid;
        align-items: center;
        justify-items: center;
        background: rgba(0, 0, 0, 0.55);
        padding: 20px;
        z-index: 2600;
        overflow-y: auto;
        overscroll-behavior: contain;
    }

    .inventory-modal[hidden] {
        display: none !important;
    }

    .inventory-modal-card {
        position: relative;
        width: min(720px, 100%);
        max-height: min(92vh, 780px);
        overflow: hidden;
        display: flex;
        flex-direction: column;
    }

    .inventory-modal-close {
        position: relative;
        z-index: 50;
    }

    .inventory-modal-card {
        width: min(720px, 100%);
        max-width: 100%;
        background: #fff;
        border-radius: 18px;
        padding: 18px;
        box-shadow: 0 16px 40px rgba(0, 0, 0, 0.24);
        color: #111;
    }

    .inventory-form {
        min-height: 0;
        max-height: min(72vh, 660px);
        overflow-y: auto;
        padding-right: 8px;
        display: grid;
        align-content: start;
        gap: 12px;
    }

    .inventory-modal-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 12px;
        margin-bottom: 16px;
    }

    .inventory-modal-close {
        border: none;
        background: transparent;
        font-size: 28px;
        cursor: pointer;
    }

    .inventory-item-main {
        flex: 1;
    }

    .inventory-inline-editor {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px;
        width: 100%;
        max-width: 100%;
    }

    .inventory-inline-editor label {
        display: flex;
        flex-direction: column;
        gap: 6px;
        font-weight: 700;
        font-size: 13px;
    }

    .inventory-inline-editor input,
    .inventory-inline-editor select {
        border: 1px solid rgba(0, 0, 0, 0.14);
        border-radius: 10px;
        padding: 10px 12px;
        background: #f7f7f7;
        color: #111;
    }

    .inventory-item-actions.inline-actions {
        flex-direction: column;
        gap: 10px;
    }

    .inventory-inline-save,
    .inventory-inline-cancel {
        border: none;
        border-radius: 10px;
        padding: 10px 12px;
        cursor: pointer;
        font-weight: 700;
    }

    .inventory-inline-save {
        background: #ff9800;
        color: #fff;
    }

    .inventory-inline-cancel {
        background: #ececec;
        color: #111;
    }

    .inventory-form-grid {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 16px;
        margin-bottom: 20px;
        max-width: 100%;
    }

    #inventorySaveBtn {
        position: sticky;
        bottom: 0;
        z-index: 2;
    }

    .inventory-form-grid label {
        display: flex;
        flex-direction: column;
        gap: 8px;
        font-weight: 600;
        color: #111;
    }

    .inventory-form-grid input,
    .inventory-form-grid select {
        border: 1px solid rgba(0, 0, 0, 0.14);
        border-radius: 12px;
        padding: 12px 14px;
        background: #f7f7f7;
        color: #111;
    }

.sales-analytics-chart-wrapper {
    width: 100%;
    overflow-x: auto;
    overflow-y: visible;
    margin-top: 18px;
    padding-bottom: 6px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scrollbar-color: rgba(255,255,255,0.45) rgba(255,255,255,0.12);
}

.special-food-image-preview-wrap {
    display: flex;
    align-items: center;
    justify-content: flex-start;
}

.special-customize-field {
    grid-column: 1 / -1;
    display: grid;
    gap: 10px;
    padding: 12px;
    border-radius: 12px;
    background: #fff6ea;
    border: 1px solid rgba(0, 0, 0, 0.1);
}

/* Ensure hidden attribute actually hides these elements even if other rules set display */
#specialFoodImageField[hidden],
#specialCustomizeField[hidden],
#specialFoodImagePreviewWrap[hidden] {
    display: none !important;
}

.special-customize-title {
    margin: 0;
    font-weight: 800;
    color: #8a3d00;
}

.special-customize-builder {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 120px auto;
    gap: 10px;
    align-items: end;
}

.special-customize-builder label {
    display: grid;
    gap: 6px;
    font-weight: 700;
    color: #1f1f1f;
}

.special-customize-builder select,
.special-customize-builder input {
    border: 1px solid rgba(0, 0, 0, 0.14);
    border-radius: 10px;
    padding: 10px 12px;
    background: #fff;
    color: #111;
}

.special-customize-builder .menu-place-order-btn {
    width: auto;
    white-space: nowrap;
    padding: 10px 14px;
}

.special-customize-list {
    display: grid;
    gap: 8px;
}

.special-customize-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border-radius: 10px;
    background: #fff;
    border: 1px solid rgba(0, 0, 0, 0.08);
}

.special-customize-remove-btn {
    border: none;
    border-radius: 8px;
    background: #8f1d1d;
    color: #fff;
    padding: 6px 10px;
    font-weight: 700;
    cursor: pointer;
}

@media (max-width: 760px) {
    .special-customize-builder {
        grid-template-columns: 1fr;
    }

    .special-customize-builder .menu-place-order-btn {
        width: 100%;
    }
}

.special-food-image-preview-wrap img {
    width: 120px;
    height: 120px;
    border-radius: 12px;
    object-fit: cover;
    border: 1px solid rgba(0, 0, 0, 0.14);
    background: #f7f7f7;
}

.review-rating-group select {
    width: 100%;
    border-radius: 10px;
    border: 1px solid rgba(0, 0, 0, 0.14);
    padding: 10px 12px;
    font-size: 1rem;
    letter-spacing: 0.4px;
}

.review-submit-message {
    margin: 8px 0 0;
    font-size: 0.9rem;
    color: #333;
}

.review-submit-note {
    margin: 10px 0 0;
    font-size: 0.8rem;
    color: #555;
}

.customer-reviews-panel {
    margin-top: 20px;
    background: #fff;
    border-radius: 12px;
    padding: 16px;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08);
}

.customer-reviews-list,
.staff-review-list {
    display: grid;
    gap: 10px;
}

.customer-review-card,
.staff-review-card {
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 10px;
    padding: 12px;
    background: #fff;
}

.customer-review-card p,
.staff-review-card p,
.customer-review-card strong,
.staff-review-card strong,
.customer-review-card span,
.staff-review-card span {
    margin: 0;
    color: #222;
}

.review-stars {
    color: #f6c700 !important;
    font-size: 1.08rem;
    letter-spacing: 0.04em;
    line-height: 1.25;
}

.review-comment {
    color: #1f1f1f;
    line-height: 1.45;
    white-space: pre-wrap;
    word-break: break-word;
}

.review-status-badge {
    display: inline-flex;
    align-items: center;
    border-radius: 999px;
    padding: 4px 10px;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
}

.review-status-badge.is-pending {
    background: rgba(255, 193, 7, 0.22);
    color: #fdd835;
}

.review-status-badge.is-published {
    background: rgba(56, 142, 60, 0.22);
    color: #7ee787;
}

.staff-review-actions {
    display: flex;
    gap: 8px;
    margin-top: 10px;
    flex-wrap: wrap;
}

.staff-review-publish-btn,
.staff-review-delete-btn {
    border: none;
    border-radius: 8px;
    padding: 8px 14px;
    color: #fff;
    cursor: pointer;
    font-weight: 600;
    font-size: 0.85rem;
}

.staff-review-publish-btn {
    background: #2e7d32;
}

.staff-review-delete-btn {
    background: #d32f2f;
}

.sales-analytics-chart-wrapper::-webkit-scrollbar {
    height: 12px;
}

.sales-analytics-chart-wrapper::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.12);
}

.sales-analytics-chart-wrapper::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.55);
    border-radius: 999px;
    border: 2px solid rgba(255,255,255,0.12);
}

.sales-analytics-chart-wrapper::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.75);
}

.sales-analytics-chart text {
    font-family: Arial, sans-serif;
}

@media (max-width: 680px) {
    .inventory-inline-editor,
    .inventory-form-grid {
        grid-template-columns: 1fr;
    }

    .inventory-item-card {
        flex-direction: column;
        align-items: stretch;
    }

    .inventory-item-actions {
        width: 100%;
        justify-content: flex-start;
    }
}

@media (max-width: 600px) {
    .slideshow {
        width: calc(100% - 24px);
        max-width: none;
    }
    .slideshow .slides { height: 220px; }

    .info-section.menu-section,
    .info-section#about,
    .info-section#contact {
        display: flex;
        width: calc(100% - 32px);
        min-height: 240px;
        aspect-ratio: auto;
        margin: 12px;
    }

    .sales-analytics-chart {
        gap: 12px;
    }

}

@media (max-width: 900px) {
    .low-stock-modal {
        width: min(92vw, 460px);
        max-height: 80vh;
        padding: 20px 18px;
    }

    .low-stock-dropdown {
        max-height: 26vh;
    }

    .low-stock-action-btn {
        min-width: 100%;
    }

    .auth .menu-btn {
        display: flex !important;
    }

    .dashboard-panel {
        transform: translateX(-100%);
        opacity: 0;
        pointer-events: none;
        box-shadow: none;
    }

    .dashboard-panel.open {
        transform: translateX(0);
        opacity: 1;
        pointer-events: auto;
        box-shadow: 12px 0 32px rgba(0, 0, 0, 0.28);
        z-index: 2200 !important;
    }

    .dashboard-panel .panel-close {
        display: block;
    }

    body.dashboard-panel-open {
        overflow: hidden;
    }

    .dashboard-panel {
        width: min(88vw, 340px);
        padding: 72px 18px 20px 22px;
    }

    .overview-section,
    .inventory-section,
    .orders-section,
    .sales-section,
    .account-management {
        width: calc(100% - 32px);
        padding: 20px;
        margin: 18px auto 0;
    }

    /* The heading keeps the centring from its base rule, which previously won
       here too (the old `.mst-i15` utility sat after this block). */
    .overview-notification-header,
    .order-notification-footer {
        flex-direction: column;
    }

    .order-notification-footer {
        align-items: flex-start;
    }

    .sales-tabs,
    .inventory-category-tabs {
        gap: 8px;
    }

    .sales-tabs {
        overflow-x: auto;
        padding-bottom: 4px;
        -webkit-overflow-scrolling: touch;
    }

    .sales-tab-btn {
        white-space: nowrap;
    }
}

@media (max-width: 760px) {
    #adminCredentialSettings .account-form,
    #passwordCredentialsForm,
    .account-form,
    .inventory-form-grid,
    .inventory-inline-editor {
        grid-template-columns: 1fr;
    }

    #adminCredentialSettings .account-form button,
    #passwordCredentialsForm button {
        width: 100%;
    }

    .staff-login-page {
        min-height: 100vh;
        padding: 16px;
        align-items: center;
    }

    .staff-box,
    .modal-box {
        width: min(100%, 460px);
        padding: 18px;
    }

    .top-bar.login-top-bar {
        padding: 8px 12px 0;
    }

    .dashboard-panel {
        width: min(92vw, 320px);
        padding: 68px 16px 18px 20px;
    }

    .account-form,
    .inventory-form-grid,
    .inventory-inline-editor {
        grid-template-columns: 1fr;
    }

    .inventory-item-card,
    .order-notification-card {
        flex-direction: column;
        align-items: stretch;
    }

    .inventory-item-actions,
    .order-notification-footer,
    .inventory-action-row {
        justify-content: flex-start;
    }

    .sales-analytics-select-wrapper,
    .nested-selector {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        width: 100%;
    }

    .analytics-select,
    .nested-select {
        width: 100%;
        min-width: 0;
    }

    .sales-analytics-chart {
        min-width: 420px;
    }
}

@media (max-width: 560px) {
    .top-bar h1 {
        font-size: 16px;
        letter-spacing: 0.6px;
    }

    .staff-box,
    .modal-box {
        width: min(100%, 420px);
        padding: 16px;
    }

    .dashboard-panel {
        width: min(94vw, 300px);
        padding: 64px 14px 16px 18px;
    }

    .overview-section,
    .inventory-section,
    .orders-section,
    .sales-section,
    .account-management {
        width: calc(100% - 24px);
        padding: 16px;
        border-radius: 10px;
    }

    .sales-analytics-chart {
        min-width: 340px;
    }
}

@media (max-width: 420px) {
    .staff-login-page {
        padding: 12px;
    }

    .staff-box,
    .modal-box {
        width: 100%;
        padding: 14px;
        border-radius: 10px;
    }

    .role-tab {
        width: 100%;
        text-align: center;
    }

    .dashboard-panel {
        width: 100vw;
        max-width: 100vw;
        padding: 64px 12px 16px 16px;
        border-right: none;
    }

    .overview-analytics-panel, .overview-order-notification-box, .inventory-admin-panel {
        padding: 16px;
    }

    .sales-analytics-chart {
        min-width: 280px;
    }

    .sales-tabs {
        gap: 6px;
    }

    .sales-tab-btn {
        padding: 9px 12px;
        font-size: 14px;
    }
}


/* ============================================================
   HOME PAGE REDESIGN — "MoTaste · Crafted Silog" design system
   Scoped under body.site-home so staff pages are unaffected.
   Palette: Porcelain #F9FAFB · Ink #111827 · Sunburst #FF6B00
            Peach #FFD8B5 · Slate Teal #2A4D53 · Glass white
   ============================================================ */

html:has(body.site-home) {
    scroll-behavior: smooth;
}

body.site-home {
    background: #F9FAFB;
    color: #111827;
    font-family: "Inter", "Segoe UI", Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
}

body.site-home h1,
body.site-home h2,
body.site-home h3,
body.site-home h4,
body.site-home .brand-wordmark {
    font-family: "Montserrat", "Segoe UI", Arial, sans-serif;
}

body.site-home section[id] {
    scroll-margin-top: 96px;
}

/* ---------- A. HEADER / NAV — floating frosted glass ---------- */
body.site-home .top-bar {
    position: sticky;
    top: 14px;
    z-index: 1000;
    display: flex;
    align-items: center;
    gap: 18px;
    width: auto;
    margin: 14px 22px 0;
    padding: 12px 20px;
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.75);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    border: 1px solid rgba(17, 24, 39, 0.07);
    box-shadow: 0 10px 34px rgba(17, 24, 39, 0.09);
    color: #111827;
    transition: box-shadow 0.3s ease, background 0.3s ease;
}

body.site-home .top-bar.scrolled {
    background: rgba(255, 255, 255, 0.88);
    box-shadow: 0 14px 40px rgba(17, 24, 39, 0.13);
}

/* Monogram logo: dark chip + orange dot */
body.site-home .brand-logo {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    text-decoration: none;
    flex: 0 0 auto;
}

body.site-home .brand-monogram {
    position: relative;
    display: grid;
    place-items: center;
    width: 46px;
    height: 46px;
    border-radius: 14px;
    background: #111827;
    color: #fff;
    font-family: "Montserrat", sans-serif;
    font-size: 17px;
    font-weight: 800;
    letter-spacing: 0.02em;
    box-shadow: 0 6px 16px rgba(17, 24, 39, 0.22);
}

body.site-home .brand-dot {
    position: absolute;
    right: 9px;
    bottom: 9px;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #FF6B00;
    box-shadow: 0 0 0 2.5px rgba(255, 255, 255, 0.9), 0 0 10px rgba(255, 107, 0, 0.85);
}

body.site-home .brand-wordmark {
    font-size: 21px;
    font-weight: 700;
    letter-spacing: 0.04em;
    color: #111827;
    text-transform: uppercase;
}

body.site-home .top-nav {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
    margin-left: auto;
    flex: 1;
}

body.site-home .top-nav a {
    position: relative;
    color: #111827;
    text-decoration: none;
    font-weight: 600;
    font-size: 0.95rem;
    padding: 10px 16px;
    border-radius: 999px;
    transition: background 0.2s ease, color 0.2s ease;
}

body.site-home .top-nav a::after {
    content: "";
    position: absolute;
    left: 16px;
    right: 16px;
    bottom: 5px;
    height: 2.5px;
    border-radius: 2px;
    background: #FF6B00;
    transform: scaleX(0);
    transform-origin: center;
    transition: transform 0.25s ease;
}

body.site-home .top-nav a:hover,
body.site-home .top-nav a:focus-visible {
    background: rgba(255, 216, 181, 0.45);
    outline: none;
}

body.site-home .top-nav a:hover::after {
    transform: scaleX(1);
}

body.site-home .live-clock {
    color: #2A4D53;
    font-size: 0.88rem;
    font-weight: 600;
    margin-top: 0;
}

/* ---------- B. HERO SECTION ---------- */
body.site-home .front-section {
    position: relative;
    height: min(88vh, 820px);
    min-height: 560px;
    margin: 0;
    overflow: hidden;
}

body.site-home .front-section .hero-bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
}

body.site-home .hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(249, 250, 251, 0.94) 0%, rgba(249, 250, 251, 0.72) 34%, rgba(249, 250, 251, 0.15) 68%, rgba(249, 250, 251, 0) 100%);
}

body.site-home .hero-content {
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    max-width: 680px;
    padding: 0 clamp(24px, 6vw, 96px);
    z-index: 2;
}

body.site-home .hero-kicker {
    margin: 0 0 18px;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-family: "Montserrat", sans-serif;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: #2A4D53;
}

body.site-home .hero-kicker::before {
    content: "";
    width: 34px;
    height: 2px;
    border-radius: 2px;
    background: #FF6B00;
}

body.site-home .hero-title {
    margin: 0;
    font-size: clamp(2.6rem, 6.4vw, 4.8rem);
    font-weight: 800;
    line-height: 1.04;
    letter-spacing: -0.02em;
    color: #111827;
}

body.site-home .hero-title span {
    color: #FF6B00;
}

body.site-home .hero-sub {
    margin: 22px 0 0;
    max-width: 460px;
    font-size: clamp(1rem, 1.6vw, 1.15rem);
    line-height: 1.65;
    color: #4B5563;
}

body.site-home .hero-actions {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-top: 32px;
    flex-wrap: wrap;
}

body.site-home .about-btn {
    position: static;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 15px 34px;
    background: #FF6B00;
    color: #fff;
    text-decoration: none;
    font-size: 1rem;
    font-weight: 700;
    font-family: "Montserrat", sans-serif;
    letter-spacing: 0.02em;
    border-radius: 999px;
    border: none;
    box-shadow: 0 14px 30px rgba(255, 107, 0, 0.32);
    transition: transform 0.25s ease, box-shadow 0.25s ease, background 0.25s ease;
}

body.site-home .about-btn:hover {
    background: #F05A00;
    transform: translateY(-3px);
    box-shadow: 0 20px 42px rgba(255, 107, 0, 0.42), 0 0 0 8px rgba(255, 216, 181, 0.35);
}

body.site-home .hero-ghost-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 14px 30px;
    background: rgba(255, 255, 255, 0.6);
    color: #111827;
    text-decoration: none;
    font-size: 1rem;
    font-weight: 600;
    border: 1.5px solid rgba(17, 24, 39, 0.28);
    border-radius: 999px;
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    transition: background 0.25s ease, border-color 0.25s ease, transform 0.25s ease;
}

body.site-home .hero-ghost-btn:hover {
    background: #FFD8B5;
    border-color: #FF6B00;
    transform: translateY(-3px);
}

/* ---------- C. SPECIAL FOODS ---------- */
body.site-home .special-foods-section {
    display: grid;
    gap: 22px;
}

body.site-home .special-foods-visible {
    position: relative;
    z-index: 5;
    margin: -32px 24px 0;
    padding: 28px clamp(18px, 4vw, 40px);
    border-radius: 24px;
    background: rgba(255, 255, 255, 0.72);
    -webkit-backdrop-filter: blur(18px);
    backdrop-filter: blur(18px);
    border: 1px solid rgba(255, 255, 255, 0.85);
    box-shadow: 0 24px 60px rgba(17, 24, 39, 0.10);
}

body.site-home .special-foods-heading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    text-align: center;
}

body.site-home .special-foods-heading h1 {
    font-family: "Montserrat", sans-serif;
    font-size: clamp(1.4rem, 3vw, 2rem);
    font-weight: 800;
    letter-spacing: -0.01em;
    color: #111827;
    margin: 0;
}

body.site-home .special-foods-heading::after {
    content: "";
    width: 56px;
    height: 4px;
    border-radius: 4px;
    background: #FF6B00;
}

body.site-home .special-foods-list {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 12px;
    margin-top: 8px;
}

body.site-home .special-food-card {
    position: relative;
    display: flex;
    flex-direction: column;
    min-width: 0;
    overflow: hidden;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.9);
    border: 1px solid rgba(17, 24, 39, 0.08);
    box-shadow: 0 6px 16px rgba(17, 24, 39, 0.07);
    transition: transform 0.28s ease, box-shadow 0.28s ease, border-color 0.28s ease;
}

body.site-home .special-food-card:hover {
    transform: translateY(-8px);
    border-color: rgba(255, 107, 0, 0.55);
    box-shadow: 0 26px 52px rgba(255, 216, 181, 0.65), 0 10px 26px rgba(17, 24, 39, 0.10);
}

body.site-home .special-food-view-btn {
    height: 180px;
    background: #fff;
}

body.site-home .special-food-view-btn img {
    border-radius: 15px 15px 0 0;
}

body.site-home .special-food-image-meta {
    padding: 10px 12px;
    background: linear-gradient(180deg, rgba(17, 24, 39, 0) 0%, rgba(17, 24, 39, 0.72) 60%, rgba(17, 24, 39, 0.88) 100%);
}

body.site-home .special-food-image-name {
    font-size: 0.85rem;
    font-weight: 700;
}

body.site-home .special-food-details {
    padding: 12px 14px 14px;
    gap: 6px;
    background: #fff;
    border-radius: 0 0 20px 20px;
}

body.site-home .special-food-description {
    color: #4B5563;
    font-family: "Inter", sans-serif;
    font-size: 0.8rem;
    line-height: 1.45;
}

body.site-home .special-food-details-price {
    color: #FF6B00;
    font-size: 0.98rem;
    font-weight: 800;
}

body.site-home .special-food-card.is-out-of-stock {
    opacity: 0.8;
    filter: grayscale(0.25);
}

/* ---------- MENU SECTION (light glass) ---------- */
body.site-home .menu-section {
    background: rgba(255, 255, 255, 0.68);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
    border: 1px solid rgba(17, 24, 39, 0.08);
    box-shadow: 0 24px 60px rgba(17, 24, 39, 0.08);
    color: #111827;
}

body.site-home .menu-container {
    color: #111827;
}

body.site-home .menu-left h2 {
    margin: 0 0 12px;
    font-size: clamp(1.6rem, 3vw, 2.2rem);
    font-weight: 800;
    color: #111827;
}

body.site-home .menu-left p {
    color: #4B5563;
    line-height: 1.7;
}

body.site-home .menu-category-btn {
    background-color: #F3F4F6;
    color: #111827;
    border: 1px solid rgba(17, 24, 39, 0.07);
    border-radius: 16px;
    padding: 18px 16px;
    font-family: "Montserrat", sans-serif;
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    transition: background-color 0.18s ease, color 0.18s ease, box-shadow 0.18s ease;
}

body.site-home .menu-category-btn:hover,
body.site-home .menu-category-btn:focus-visible {
    background-color: #FF6B00;
    color: #fff;
    box-shadow: 0 8px 18px rgba(255, 107, 0, 0.28);
}

body.site-home .menu-design {
    border-radius: 22px;
    box-shadow: 0 18px 44px rgba(17, 24, 39, 0.14);
}

body.site-home .menu-image {
    max-width: 620px;
}

/* Cart FAB — sunburst orange */
body.site-home #menuCartButton.menu-cart-button {
    background: linear-gradient(145deg, #FF8A3D, #FF6B00);
    box-shadow: 0 18px 42px rgba(255, 107, 0, 0.5);
}

body.site-home #menuCartButton.menu-cart-button:hover {
    box-shadow: 0 26px 60px rgba(255, 107, 0, 0.65), 0 0 0 10px rgba(255, 216, 181, 0.4);
}

body.site-home #menuTopCartCount {
    background: #111827;
    color: #FFD8B5;
}

/* ---------- ABOUT ---------- */
body.site-home .about-section,
body.site-home #about {
    width: 100%;
    min-height: 0;
    padding: 96px clamp(18px, 5vw, 64px);
    display: flex;
    flex-direction: row;
    align-items: center;
    background: #FF5400;
    color: #FFFFFF;
}
/* Shared section container rhythm (matches menu / map / highlights) */
body.site-home .about-container,
body.site-home .contact-container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(32px, 4vw, 56px);
    align-items: center;
}

body.site-home .about-content {
    background: rgba(255, 255, 255);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(255, 255, 255, 0.85);
    box-shadow: 0 22px 54px rgba(17, 24, 39, 0.10);
    border-radius: 28px;
    padding: clamp(28px, 4vw, 48px);
    color: #111827;
}

body.site-home .about-tag {
    color: #FF6B00;
    font-family: "Montserrat", sans-serif;
}

body.site-home .about-content h2 {
    color: #111827;
    font-weight: 800;
    letter-spacing: -0.01em;
    font-size: clamp(2rem, 4vw, 2.6rem);
    line-height: 1.2;
    margin: 15px 0;
}

body.site-home .about-content p {
    color: #4B5563;
}

body.site-home .feature-box {
    background: rgba(255, 255, 255);
    border: 1px solid rgba(17, 24, 39, 0.06);
    border-radius: 18px;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

body.site-home .feature-box:hover {
    transform: translateY(-4px);
    box-shadow: 0 16px 34px rgba(255, 216, 181, 0.6);
}

body.site-home .feature-box h3 {
    color: #111827;
}

body.site-home .feature-box p {
    color: #4B5563;
}

body.site-home .about-image img {
    border-radius: 28px;
    box-shadow: 0 26px 60px rgba(17, 24, 39, 0.18);
}

/* ---------- D. HIGHLIGHTS / SLIDESHOW ---------- */
body.site-home .highlights-section {
    padding: 90px clamp(18px, 5vw, 64px) 30px;
    text-align: center;
}

body.site-home .highlights-heading h2 {
    margin: 0 0 8px;
    font-size: clamp(1.8rem, 3.6vw, 2.5rem);
    font-weight: 800;
    color: #111827;
}

body.site-home .highlights-heading p {
    margin: 0 auto 26px;
    max-width: 480px;
    color: #4B5563;
}

body.site-home .slideshow {
    position: relative;
    max-width: 960px;
    width: min(100%, 960px);
    min-width: 0;
    margin: 0 auto;
    padding: 14px;
    border-radius: 28px;
    background: rgba(255, 255, 255, 0.65);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
    border: 1px solid rgba(255, 255, 255, 0.9);
    box-shadow: 0 24px 60px rgba(17, 24, 39, 0.12);
    overflow: hidden;
}

body.site-home .slideshow .slides {
    position: relative;
    height: 440px;
    border-radius: 18px;
    overflow: hidden;
}

body.site-home .slideshow img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    transition: opacity 0.55s ease-in-out, transform 6s ease;
    cursor: default;
    pointer-events: none;
    border-radius: 18px;
}

body.site-home .slideshow img.active {
    opacity: 1;
    cursor: zoom-in;
    pointer-events: auto;
    transform: scale(1.04);
}

body.site-home .slide-dots {
    position: absolute;
    bottom: 26px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 9px;
    z-index: 2;
}

body.site-home .slide-dots button {
    width: 9px;
    height: 9px;
    border-radius: 999px;
    border: none;
    background: rgba(255, 255, 255, 0.7);
    cursor: pointer;
    transition: background 0.25s ease, width 0.25s ease;
}

body.site-home .slide-dots button.active {
    background: #FF6B00;
    width: 28px;
}

body.site-home .slideshow-empty {
    height: 100%;
    display: grid;
    place-items: center;
    text-align: center;
    padding: 24px;
    color: #4B5563;
    background: #fff;
    border-radius: 18px;
    font-weight: 600;
}

/* ---------- E. CUSTOMER REVIEWS ---------- */
body.site-home .map-section {
    background: transparent;
    margin: 0;
    padding: 60px clamp(18px, 5vw, 64px) 90px;
    border-radius: 0;
    box-shadow: none;
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
    gap: 26px;
    align-items: start;
}

body.site-home .map-inner {
    background: rgba(255, 255, 255, 0.7);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
    border: 1px solid rgba(255, 255, 255, 0.9);
    border-radius: 24px;
    padding: 26px;
    box-shadow: 0 22px 54px rgba(17, 24, 39, 0.09);
}

body.site-home .map-inner h2 {
    margin: 0 0 16px;
    font-size: 1.4rem;
    font-weight: 800;
    color: #111827;
}

body.site-home .map-wrapper {
    margin: 0;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 0 0 1px rgba(17, 24, 39, 0.08), 0 12px 30px rgba(17, 24, 39, 0.10);
}

body.site-home .map-wrapper iframe {
    min-height: 380px;
    filter: saturate(0.92);
}

body.site-home .customer-reviews-panel {
    margin: 0;
    background: rgba(255, 255, 255, 0.7);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
    border: 1px solid rgba(255, 255, 255, 0.9);
    border-radius: 24px;
    padding: 26px;
    box-shadow: 0 22px 54px rgba(17, 24, 39, 0.09);
}

body.site-home .customer-reviews-panel h3 {
    margin: 0 0 16px;
    font-size: 1.4rem;
    font-weight: 800;
    color: #111827;
}

body.site-home .customer-reviews-list {
    display: grid;
    gap: 14px;
}

body.site-home .customer-review-card {
    position: relative;
    border: 1px solid rgba(17, 24, 39, 0.08);
    border-radius: 18px;
    padding: 18px 18px 16px 70px;
    background: rgba(255, 255, 255, 0.88);
    box-shadow: 0 10px 26px rgba(17, 24, 39, 0.06);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

body.site-home .customer-review-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 18px 38px rgba(255, 216, 181, 0.6);
}

body.site-home .customer-review-card::before {
    content: "❝";
    position: absolute;
    top: 16px;
    left: 16px;
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #111827;
    color: #FF6B00;
    font-size: 18px;
    line-height: 1;
}

body.site-home .customer-review-card p,
body.site-home .customer-review-card strong,
body.site-home .customer-review-card span {
    margin: 0;
    color: #374151;
}

body.site-home .review-stars {
    color: #FF6B00 !important;
    font-size: 1.05rem;
    letter-spacing: 0.06em;
    line-height: 1.25;
}

body.site-home .review-comment {
    color: #1F2937;
    line-height: 1.55;
    font-size: 0.95rem;
    white-space: pre-wrap;
    word-break: break-word;
}

body.site-home .customer-review-card p:last-child span {
    color: #9CA3AF;
    font-size: 0.78rem;
    display: inline-block;
    margin-top: 8px;
    border-top: 1px dashed rgba(255, 107, 0, 0.35);
    padding-top: 8px;
}

/* ---------- F. CONTACT ---------- */
body.site-home .contact-section,
body.site-home #contact {
    width: 100%;
    min-height: 0;
    padding: 96px clamp(18px, 5vw, 64px);
    display: flex;
    flex-direction: row;
    align-items: center;
    background: #F9FAFB;
    background-image: radial-gradient(ellipse at 88% 12%, rgba(255, 216, 181, 0.45), transparent 55%);
    color: #111827;
}

body.site-home .contact-info h2 {
    color: #111827;
    font-weight: 800;
    letter-spacing: -0.01em;
    font-size: clamp(2rem, 4vw, 2.6rem);
    line-height: 1.2;
    margin: 15px 0;
}

body.site-home .contact-tag {
    color: #FF6B00;
    font-family: "Montserrat", sans-serif;
}

body.site-home .contact-info p {
    color: #4B5563;
}

body.site-home .contact-box {
    background: rgba(255, 255, 255, 0.72);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.9);
    box-shadow: 0 12px 30px rgba(17, 24, 39, 0.07);
    border-radius: 18px;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

body.site-home .contact-box:hover {
    transform: translateX(6px);
    box-shadow: 0 16px 36px rgba(255, 216, 181, 0.55);
}

body.site-home .contact-icon {
    background: #111827;
    color: #FF6B00;
    font-size: 20px;
    box-shadow: 0 8px 18px rgba(17, 24, 39, 0.22);
}

body.site-home .contact-box h3 {
    color: #111827;
    font-weight: 700;
}

body.site-home .contact-box p {
    color: #4B5563;
}

body.site-home .contact-form {
    background: rgba(255, 255, 255, 0.75);
    -webkit-backdrop-filter: blur(18px);
    backdrop-filter: blur(18px);
    border: 1px solid rgba(255, 255, 255, 0.9);
    box-shadow: 0 26px 64px rgba(17, 24, 39, 0.12);
    border-radius: 28px;
    padding: clamp(28px, 4vw, 48px);
}

body.site-home .contact-form h3 {
    color: #111827;
    font-size: 1.6rem;
    font-weight: 800;
}

body.site-home .input-group select,
body.site-home .input-group textarea {
    width: 100%;
    padding: 15px 18px;
    border: 1.5px solid transparent;
    outline: none;
    border-radius: 14px;
    background: #F3F4F6;
    color: #111827;
    font-family: "Inter", sans-serif;
    font-size: 0.95rem;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

body.site-home .input-group textarea {
    resize: none;
}

body.site-home .input-group select:focus,
body.site-home .input-group textarea:focus {
    border-color: #FF6B00;
    background: #fff;
    box-shadow: 0 0 0 4px rgba(255, 107, 0, 0.16);
}

body.site-home .input-group label {
    display: block;
    margin-bottom: 8px;
    font-weight: 600;
    font-size: 0.85rem;
    color: #111827;
}

body.site-home .contact-form button[type="submit"] {
    width: 100%;
    padding: 15px;
    border: none;
    border-radius: 999px;
    background: #FF6B00;
    color: #fff;
    font-family: "Montserrat", sans-serif;
    font-size: 0.95rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    cursor: pointer;
    box-shadow: 0 14px 30px rgba(255, 107, 0, 0.32);
    transition: transform 0.25s ease, box-shadow 0.25s ease, background 0.25s ease;
}

body.site-home .contact-form button[type="submit"]:hover {
    background: #F05A00;
    transform: translateY(-3px);
    box-shadow: 0 20px 42px rgba(255, 107, 0, 0.44), 0 0 0 8px rgba(255, 216, 181, 0.35);
}

body.site-home .review-submit-note {
    text-align: center;
    color: #9CA3AF;
    font-size: 0.8rem;
    margin-top: 14px;
}

body.site-home .review-submit-message {
    text-align: center;
    font-weight: 600;
    margin-top: 10px;
}

/* ---------- OVERLAYS & MODALS (glass) ---------- */
body.site-home .menu-overlay {
    background: rgba(17, 24, 39, 0.48);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
}

body.site-home .menu-overlay-panel,
body.site-home .cart-modal .menu-cart-panel {
    background: rgba(255, 255, 255, 0.88);
    -webkit-backdrop-filter: blur(20px);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.9);
    box-shadow: 0 30px 80px rgba(17, 24, 39, 0.22);
    border-radius: 24px;
}

body.site-home .menu-overlay-categories .menu-category-btn.active {
    background: #FF6B00;
    border-color: #FF6B00;
}

body.site-home .menu-place-order-btn {
    background: #FF6B00;
    color: #fff;
    border: none;
    border-radius: 999px;
    font-family: "Montserrat", sans-serif;
    font-weight: 700;
    letter-spacing: 0.02em;
    padding: 13px 20px;
    cursor: pointer;
    transition: transform 0.22s ease, box-shadow 0.22s ease, background 0.22s ease;
}

body.site-home .menu-place-order-btn:hover:not(:disabled) {
    background: #F05A00;
    transform: translateY(-2px);
    box-shadow: 0 14px 30px rgba(255, 107, 0, 0.4);
}

body.site-home .menu-place-order-btn:disabled {
    background: #E5E7EB;
    color: #9CA3AF;
    cursor: not-allowed;
}

body.site-home .checkout-option-btn.active,
body.site-home .checkout-option-btn:hover {
    background: #FF6B00;
    border-color: #FF6B00;
    color: #fff;
}

body.site-home .menu-cart-empty {
    color: #6B7280;
}

body.site-home .menu-cart-item {
    background: #F9FAFB;
    border: 1px solid rgba(17, 24, 39, 0.06);
}

body.site-home .cart-addon-total {
    background: #FFF3EA;
    border-color: rgba(255, 107, 0, 0.28);
    color: #8A3A00;
}

body.site-home .cart-addon-total strong {
    color: #FF6B00;
}

body.site-home .product-detail-card,
body.site-home .payment-success-card {
    background: rgba(255, 255, 255, 0.92);
    -webkit-backdrop-filter: blur(20px);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.9);
    border-radius: 26px;
    box-shadow: 0 30px 80px rgba(17, 24, 39, 0.24);
}

/* ---------- RESPONSIVE ---------- */
@media (max-width: 900px) {
    body.site-home .top-bar {
        margin: 10px 12px 0;
        padding: 10px 16px;
        border-radius: 18px;
    }

    body.site-home .brand-wordmark {
        font-size: 17px;
    }

    body.site-home .brand-monogram {
        width: 40px;
        height: 40px;
        border-radius: 12px;
        font-size: 15px;
    }

    body.site-home .brand-dot {
        right: 7px;
        bottom: 7px;
    }

    body.site-home .mobile-menu-toggle {
        display: flex;
        flex-direction: column;
        justify-content: center;
        gap: 4.5px;
        width: 42px;
        height: 42px;
        min-width: 42px;
        border: none;
        border-radius: 12px;
        background: #FF6B00;
        cursor: pointer;
        padding: 0 11px;
        margin-left: auto;
        box-shadow: 0 8px 20px rgba(255, 107, 0, 0.35);
    }

    body.site-home .mobile-menu-toggle span {
        display: block;
        width: 100%;
        height: 2.5px;
        background: #fff;
        border-radius: 3px;
        transition: transform 0.25s ease, opacity 0.25s ease;
    }

    body.site-home .mobile-menu-toggle[aria-expanded="true"] span:nth-child(1) {
        transform: translateY(7px) rotate(45deg);
    }

    body.site-home .mobile-menu-toggle[aria-expanded="true"] span:nth-child(2) {
        opacity: 0;
    }

    body.site-home .mobile-menu-toggle[aria-expanded="true"] span:nth-child(3) {
        transform: translateY(-7px) rotate(-45deg);
    }

    body.site-home .top-nav {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        display: none;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 10px;
        margin: 0;
        padding: 80px 24px;
        border-radius: 0;
        background: rgba(255, 255, 255, 0.92);
        -webkit-backdrop-filter: blur(22px);
        backdrop-filter: blur(22px);
        z-index: 1900;
    }

    body.site-home .top-nav.open {
        display: flex;
    }

    body.site-home .top-nav a {
        width: 100%;
        max-width: 340px;
        text-align: center;
        font-size: 1.35rem;
        font-weight: 700;
        padding: 16px;
        border-radius: 16px;
        background: transparent;
    }

    body.site-home .top-nav a:hover {
        background: rgba(255, 216, 181, 0.55);
    }

    body.site-home .top-nav a::after {
        left: 40%;
        right: 40%;
        bottom: 10px;
    }

    body.site-home .live-clock {
        display: none;
    }

    body.site-home .front-section {
        height: 84vh;
        min-height: 520px;
    }

    body.site-home .hero-content {
        max-width: 540px;
    }

    body.site-home .special-foods-visible {
        margin: -40px 14px 0;
        padding: 32px 18px;
    }

    body.site-home .slideshow .slides {
        height: 320px;
    }

    body.site-home .map-section {
        grid-template-columns: 1fr;
        padding: 48px 16px 64px;
    }

    body.site-home .map-wrapper iframe {
        min-height: 300px;
    }

    body.site-home .about-section,
    body.site-home #about,
    body.site-home .contact-section,
    body.site-home #contact {
        padding: 64px 16px;
    }

    body.site-home .about-container,
    body.site-home .contact-container {
        grid-template-columns: 1fr;
        gap: 24px;
    }

    body.site-home .special-foods-list {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 560px) {
    body.site-home .top-bar {
        top: 8px;
    }

    body.site-home .front-section {
        height: 78vh;
        min-height: 480px;
    }

    body.site-home .hero-actions {
        flex-direction: column;
        align-items: flex-start;
    }

    body.site-home .hero-ghost-btn,
    body.site-home .about-btn {
        width: 100%;
    }

    body.site-home .special-foods-list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px;
    }

    body.site-home .special-food-card {
        border-radius: 16px;
    }

    body.site-home .special-food-details {
        padding: 10px 12px 12px;
    }

    body.site-home .about-content,
    body.site-home .contact-form {
        padding: 24px;
    }

    body.site-home .slideshow .slides {
        height: 240px;
    }

    body.site-home .customer-review-card {
        padding-left: 66px;
    }
}

@media (max-width: 400px) {
    body.site-home .special-foods-list {
        grid-template-columns: 1fr;
    }
}

/* Keep the header (with the animated close icon) above the mobile overlay menu */
body.site-home .top-bar:has(.top-nav.open) {
    z-index: 2100;
}

/* ============================================================
   HOME PAGE REFINEMENT v2 — "Crafted Silog" polish pass
   Deepens the palette with dark/ember orange (#C2410C, #9A3412)
   + burnt shadows, fixes hero/specials separation, adds a
   firmly-stuck nav, floating cart glow, compact contact, and
   a detailed footer. All rules stay scoped to body.site-home.
   ============================================================ */

/* ---------- 1. STICKY NAV — firmly fixed to the top ---------- */
body.site-home .top-bar {
    position: sticky;
    top: 0;
    width: 100%;
    margin: 0;
    padding: 12px clamp(18px, 4vw, 48px);
    border-radius: 0 0 20px 20px;
    background: rgba(255, 255, 255, 0.9);
    -webkit-backdrop-filter: blur(20px) saturate(1.5);
    backdrop-filter: blur(20px) saturate(1.5);
    border: none;
    border-bottom: 1px solid rgba(17, 24, 39, 0.09);
    box-shadow: 0 10px 30px rgba(17, 24, 39, 0.08);
    transition: background 0.3s ease, box-shadow 0.3s ease, border-radius 0.3s ease;
}

body.site-home .top-bar.scrolled {
    background: rgba(255, 255, 255, 0.97);
    box-shadow: 0 16px 40px rgba(17, 24, 39, 0.14), 0 1px 0 rgba(255, 107, 0, 0.25);
    border-bottom-color: rgba(194, 65, 12, 0.22);
}

body.site-home .top-nav a:focus-visible,
body.site-home .mobile-menu-toggle:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(194, 65, 12, 0.45);
}

body.site-home section[id] {
    scroll-margin-top: 88px;
}

/* ---------- 2. HERO — self-contained, full-bleed banner ---------- */
body.site-home .front-section {
    position: relative;
    height: min(92vh, 860px);
    min-height: 620px;
    margin: 0;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: flex-start;
}

body.site-home .hero-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 28%;
    display: block;
}

/* Light porcelain overlay — keeps the left side bright for dark, readable text
   while letting the food imagery show through on the right */
body.site-home .hero-overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    background:
        linear-gradient(100deg, rgba(249, 250, 251, 0.96) 0%, rgba(249, 250, 251, 0.86) 36%, rgba(249, 250, 251, 0.3) 68%, rgba(249, 250, 251, 0) 100%),
        radial-gradient(ellipse at 15% 90%, rgba(255, 216, 181, 0.6), transparent 55%);
}

body.site-home .hero-content {
    position: relative;
    top: auto;
    left: auto;
    transform: none;
    z-index: 2;
    width: min(100%, 600px);
    margin-left: clamp(20px, 6vw, 110px);
    padding: clamp(26px, 3.6vw, 44px) clamp(22px, 3.2vw, 42px);
    border-radius: 28px;
    background: rgba(255, 255, 255, 0.6);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
    border: 1px solid rgba(255, 255, 255, 0.8);
    box-shadow: 0 28px 60px rgba(17, 24, 39, 0.14);
    animation: heroCardIn 0.8s ease both;
}

@keyframes heroCardIn {
    from { opacity: 0; transform: translateY(26px); }
    to { opacity: 1; transform: translateY(0); }
}

body.site-home .hero-kicker {
    color: #C2410C;
}

body.site-home .hero-kicker::before {
    background: linear-gradient(90deg, #FF6B00, #C2410C);
}

body.site-home .hero-title {
    color: #111827;
    text-wrap: balance;
    font-size: clamp(2.4rem, 5.4vw, 4.3rem);
}

body.site-home .hero-title span {
    color: #FF6B00;
}

body.site-home .hero-sub {
    color: #4B5563;
    font-size: clamp(0.98rem, 1.4vw, 1.08rem);
}

body.site-home .hero-actions .about-btn {
    background: linear-gradient(135deg, #FF6B00 0%, #C2410C 100%);
    box-shadow: 0 14px 30px rgba(194, 65, 12, 0.35), 0 0 0 1px rgba(255, 255, 255, 0.4) inset;
}

body.site-home .hero-actions .about-btn:hover {
    background: linear-gradient(135deg, #FF7A1A 0%, #D2480F 100%);
    box-shadow: 0 20px 42px rgba(194, 65, 12, 0.45), 0 0 0 8px rgba(255, 216, 181, 0.5);
}

body.site-home .hero-actions .hero-ghost-btn {
    color: #111827;
    background: rgba(255, 255, 255, 0.65);
    border: 1.5px solid rgba(17, 24, 39, 0.22);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
}

body.site-home .hero-actions .hero-ghost-btn:hover {
    background: #FFD8B5;
    border-color: #FF6B00;
}

/* ---------- 3. SPECIAL FOODS — cleanly separated below hero ---------- */
body.site-home .special-foods-visible {
    margin: clamp(48px, 6vw, 76px) 24px 0;
    background: rgba(255, 255, 255, 0.84);
    border: 1px solid rgba(255, 255, 255, 0.9);
    box-shadow: 0 28px 64px rgba(154, 52, 18, 0.1), 0 24px 60px rgba(17, 24, 39, 0.08);
}

body.site-home .special-foods-heading::after {
    background: linear-gradient(90deg, #FF6B00, #C2410C);
    box-shadow: 0 2px 10px rgba(255, 107, 0, 0.5);
}

body.site-home .special-food-card {
    transition: transform 0.28s ease, box-shadow 0.28s ease, border-color 0.28s ease;
}

body.site-home .special-food-card:hover {
    border-color: rgba(194, 65, 12, 0.65);
    box-shadow: 0 26px 52px rgba(154, 52, 18, 0.24), 0 10px 26px rgba(17, 24, 39, 0.1);
}

/* ---------- 4. FLOATING CART — ember FAB with soft ping ---------- */
body.site-home #menuCartButton.menu-cart-button {
    width: 62px !important;
    height: 62px !important;
    right: 22px !important;
    bottom: 22px !important;
    z-index: 1600;
    border: 2px solid rgba(255, 255, 255, 0.5);
    background: linear-gradient(145deg, #FF8A3D 0%, #FF6B00 45%, #C2410C 100%);
    box-shadow: 0 14px 34px rgba(194, 65, 12, 0.55), 0 0 26px rgba(255, 107, 0, 0.35);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

body.site-home #menuCartButton.menu-cart-button::after {
    content: "";
    position: absolute;
    inset: -12px;
    border-radius: 50%;
    border: 2px solid rgba(255, 107, 0, 0.5);
    animation: cartPing 2.6s ease-out infinite;
    pointer-events: none;
}

@keyframes cartPing {
    0% { transform: scale(0.8); opacity: 0.7; }
    70%, 100% { transform: scale(1.4); opacity: 0; }
}

body.site-home #menuCartButton.menu-cart-button:hover {
    background: linear-gradient(145deg, #FF9A55, #D2480F);
    transform: translateY(-3px) scale(1.06);
    box-shadow: 0 22px 50px rgba(154, 52, 18, 0.65), 0 0 0 10px rgba(255, 216, 181, 0.28);
}

body.site-home #menuTopCartCount {
    background: #1C1917;
    color: #FFD8B5;
    border: 2px solid #fff;
}

/* ---------- 5. OTHER FOODS — overflow-proof + balanced ---------- */
body.site-home .menu-section {
    overflow: hidden;
}

body.site-home .menu-left,
body.site-home .menu-image,
body.site-home .menu-right {
    min-width: 0;
}

body.site-home .menu-container {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
    align-items: stretch;
}

body.site-home .menu-image {
    align-self: center;
}

/* Keep the menu poster uncropped (contain), capped to a tidy height */
body.site-home .menu-image .menu-design {
    height: auto;
    max-height: 560px;
    object-fit: contain;
}

body.site-home .menu-category-btn {
    border: 1px solid rgba(17, 24, 39, 0.08);
    text-wrap: balance;
    overflow-wrap: break-word;
    min-width: 0;
}

body.site-home .menu-category-btn:hover,
body.site-home .menu-category-btn:focus-visible {
    background-color: #FF6B00;
    color: #fff;
    box-shadow: 0 8px 18px rgba(255, 107, 0, 0.28);
}

/* ---------- 6. CONTACT — compact, streamlined ---------- */
body.site-home .contact-section,
body.site-home #contact {
    padding: 72px clamp(18px, 5vw, 64px);
}

body.site-home .contact-info h2 {
    font-size: clamp(1.6rem, 3vw, 2.1rem);
    margin: 10px 0 12px;
}

body.site-home .contact-info > p {
    font-size: 0.95rem;
    line-height: 1.6;
    margin: 0 0 22px;
}

body.site-home .contact-details {
    margin-top: 0;
    display: grid;
    gap: 12px;
}

body.site-home .contact-box {
    gap: 14px;
    margin-bottom: 0;
    padding: 13px 16px;
    border-radius: 16px;
}

body.site-home .contact-box:hover {
    border-color: rgba(194, 65, 12, 0.35);
    box-shadow: 0 16px 36px rgba(154, 52, 18, 0.16);
}

body.site-home .contact-icon {
    width: 42px;
    height: 42px;
    font-size: 17px;
    flex-shrink: 0;
    background: linear-gradient(135deg, #1C1917, #111827);
    box-shadow: 0 8px 18px rgba(17, 24, 39, 0.28), 0 0 0 3px rgba(255, 107, 0, 0.12);
}

body.site-home .contact-box h3 {
    font-size: 0.95rem;
}

body.site-home .contact-box p {
    font-size: 0.85rem;
    line-height: 1.5;
}

body.site-home .contact-form {
    padding: clamp(22px, 3vw, 32px);
    border-radius: 22px;
    box-shadow: 0 20px 48px rgba(154, 52, 18, 0.14), 0 26px 64px rgba(17, 24, 39, 0.1);
}

body.site-home .contact-form h3 {
    font-size: 1.25rem;
    margin: 0 0 18px;
}

body.site-home .input-group {
    margin-bottom: 14px;
}

body.site-home .input-group label {
    margin-bottom: 6px;
    font-size: 0.8rem;
}

body.site-home .input-group select,
body.site-home .input-group textarea {
    padding: 11px 14px;
    font-size: 0.9rem;
    border-radius: 12px;
    border: 1.5px solid rgba(17, 24, 39, 0.1);
}

body.site-home .input-group textarea {
    min-height: 96px;
}

body.site-home .input-group select:focus,
body.site-home .input-group textarea:focus {
    border-color: #C2410C;
    background: #fff;
    box-shadow: 0 0 0 4px rgba(194, 65, 12, 0.18);
}

body.site-home .contact-form button[type="submit"] {
    padding: 12px 18px;
    font-size: 0.88rem;
    border-radius: 12px;
    background: linear-gradient(135deg, #FF6B00, #C2410C);
}

body.site-home .contact-form button[type="submit"]:hover {
    background: linear-gradient(135deg, #FF7A1A, #D2480F);
    box-shadow: 0 20px 42px rgba(194, 65, 12, 0.5), 0 0 0 8px rgba(255, 216, 181, 0.3);
}

body.site-home .review-submit-note {
    font-size: 0.75rem;
    margin-top: 12px;
}

/* Map + reviews — compact */
body.site-home .map-section {
    padding: 40px clamp(18px, 5vw, 64px) 72px;
    gap: 20px;
}

body.site-home .map-inner,
body.site-home .customer-reviews-panel {
    padding: 20px;
    border-radius: 20px;
    box-shadow: 0 18px 44px rgba(154, 52, 18, 0.1), 0 22px 54px rgba(17, 24, 39, 0.08);
}

body.site-home .map-inner h2,
body.site-home .customer-reviews-panel h3 {
    font-size: 1.2rem;
    margin: 0 0 12px;
}

body.site-home .map-wrapper {
    border-radius: 14px;
    box-shadow: 0 0 0 1px rgba(17, 24, 39, 0.08), 0 12px 30px rgba(154, 52, 18, 0.16);
}

body.site-home .map-wrapper iframe {
    min-height: 300px;
}

/* ---------- 7. DARK ORANGE AESTHETIC — depth across the page ---------- */
body.site-home {
    background-color: #F9FAFB;
    background-image:
        radial-gradient(circle at 8% 24%, rgba(255, 216, 181, 0.5), transparent 32%),
        radial-gradient(circle at 92% 10%, rgba(194, 65, 12, 0.06), transparent 26%),
        radial-gradient(circle at 72% 92%, rgba(255, 107, 0, 0.05), transparent 30%);
    background-attachment: scroll;
}

/* Fixed background textures are a known mobile repaint/jank source — desktop only */
@media (min-width: 901px) {
    body.site-home {
        background-attachment: fixed;
    }
}

body.site-home .about-section,
body.site-home #about,
body.site-home .contact-section,
body.site-home #contact {
    background-image:
        radial-gradient(ellipse at 12% 20%, rgba(255, 216, 181, 0.4), transparent 55%),
        radial-gradient(ellipse at 88% 80%, rgba(194, 65, 12, 0.1), transparent 50%);
}

body.site-home .about-tag,
body.site-home .contact-tag {
    color: #C2410C;
    letter-spacing: 0.22em;
}

body.site-home .feature-box {
    border: 1px solid rgba(17, 24, 39, 0.06);
    box-shadow: 0 8px 20px rgba(17, 24, 39, 0.05);
}

body.site-home .feature-box:hover {
    border-color: rgba(194, 65, 12, 0.4);
    box-shadow: 0 18px 38px rgba(154, 52, 18, 0.2);
}

body.site-home .about-content,
body.site-home .map-inner,
body.site-home .customer-reviews-panel,
body.site-home .slideshow {
    border: 1px solid rgba(255, 255, 255, 0.9);
    box-shadow: 0 24px 60px rgba(154, 52, 18, 0.1), 0 22px 54px rgba(17, 24, 39, 0.08);
}

body.site-home .customer-review-card {
    border-left: 3px solid transparent;
}

body.site-home .customer-review-card:hover {
    border-left-color: #C2410C;
    box-shadow: 0 18px 38px rgba(154, 52, 18, 0.18);
}

body.site-home .customer-review-card::before {
    background: linear-gradient(135deg, #1C1917, #111827);
    box-shadow: 0 8px 18px rgba(17, 24, 39, 0.3);
}

body.site-home .slide-dots button.active {
    background: #C2410C;
    box-shadow: 0 2px 10px rgba(255, 107, 0, 0.6);
}

body.site-home .highlights-heading h2 {
    text-wrap: balance;
}

/* Primary CTA only gets the ember gradient; secondary actions keep their dark hierarchy */
body.site-home .menu-place-order-btn {
    background: linear-gradient(135deg, #FF6B00, #C2410C);
}

body.site-home .menu-place-order-btn:hover:not(:disabled) {
    background: linear-gradient(135deg, #FF7A1A, #D2480F);
    box-shadow: 0 14px 30px rgba(194, 65, 12, 0.45);
}

/* ---------- 8. FOOTER — detailed brand footer ---------- */
body.site-home .site-footer {
    position: relative;
    margin-top: 8px;
    padding: 64px clamp(18px, 5vw, 64px) 0;
    background: #14100D;
    color: #D1D5DB;
    border-top: 4px solid transparent;
    border-image: linear-gradient(90deg, #FF6B00, #C2410C, #FF8A3D, #FF6B00) 1;
    overflow: hidden;
}

body.site-home .site-footer::before {
    content: "";
    position: absolute;
    top: -140px;
    right: -80px;
    width: 360px;
    height: 360px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 107, 0, 0.18), transparent 65%);
    pointer-events: none;
}

body.site-home .site-footer::after {
    content: "";
    position: absolute;
    bottom: -160px;
    left: -100px;
    width: 340px;
    height: 340px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(194, 65, 12, 0.14), transparent 65%);
    pointer-events: none;
}

body.site-home .footer-top {
    position: relative;
    z-index: 1;
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1.4fr 1fr 1.1fr 1.1fr;
    gap: clamp(28px, 4vw, 48px);
}

body.site-home .footer-logo {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    text-decoration: none;
    margin-bottom: 16px;
}

body.site-home .footer-brand-name {
    font-family: "Montserrat", sans-serif;
    font-size: 1.15rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #ffffff;
}

body.site-home .footer-tagline {
    max-width: 320px;
    margin: 0 0 20px;
    color: #9CA3AF;
    font-size: 0.92rem;
    line-height: 1.65;
}

body.site-home .footer-social {
    display: flex;
    gap: 10px;
}

body.site-home .footer-social a {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: #F3F4F6;
    font-size: 0.95rem;
    text-decoration: none;
    transition: transform 0.25s ease, background 0.25s ease, color 0.25s ease, box-shadow 0.25s ease;
}

body.site-home .footer-social a:hover {
    background: linear-gradient(135deg, #FF6B00, #C2410C);
    color: #fff;
    transform: translateY(-3px);
    box-shadow: 0 12px 26px rgba(255, 107, 0, 0.35);
}

body.site-home .footer-col h4 {
    margin: 0 0 18px;
    padding-bottom: 12px;
    position: relative;
    color: #ffffff;
    font-family: "Montserrat", sans-serif;
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

body.site-home .footer-col h4::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 34px;
    height: 3px;
    border-radius: 3px;
    background: linear-gradient(90deg, #FF6B00, #C2410C);
}

body.site-home .footer-col a {
    display: block;
    padding: 6px 0;
    color: #9CA3AF;
    text-decoration: none;
    font-size: 0.92rem;
    transition: color 0.2s ease, transform 0.2s ease;
}

body.site-home .footer-col a:hover {
    color: #FF8A3D;
    transform: translateX(4px);
}

body.site-home .footer-col p {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin: 0 0 12px;
    color: #9CA3AF;
    font-size: 0.92rem;
    line-height: 1.6;
}

body.site-home .footer-col p i {
    width: 16px;
    margin-top: 4px;
    flex-shrink: 0;
    text-align: center;
    color: #FF6B00;
}

body.site-home .footer-bottom {
    position: relative;
    z-index: 1;
    max-width: 1200px;
    margin: 44px auto 0;
    padding: 20px 0;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

body.site-home .footer-bottom p {
    margin: 0;
    color: #6B7280;
    font-size: 0.85rem;
}

body.site-home .footer-made-with span {
    color: #FF6B00;
}

/* ---------- 9. RESPONSIVE — tablets & phones ---------- */
@media (max-width: 900px) {
    body.site-home .top-bar {
        padding: 10px 16px;
        border-radius: 0 0 16px 16px;
    }

    body.site-home .hero-content {
        width: calc(100% - 32px);
        max-width: 460px;
        margin-left: 16px;
        margin-right: 16px;
    }

    body.site-home .special-foods-visible {
        margin: 40px 14px 0;
        padding: 30px 18px;
    }

    body.site-home .menu-container {
        grid-template-columns: 1fr;
    }

    body.site-home .menu-image {
        max-height: 240px;
        align-self: auto;
    }

    body.site-home .menu-image .menu-design {
        min-height: 0;
        height: auto;
        max-height: 240px;
    }

    body.site-home .footer-top {
        grid-template-columns: 1fr 1fr;
        gap: 36px;
    }

    body.site-home .footer-brand {
        grid-column: 1 / -1;
    }
}

@media (max-width: 560px) {
    body.site-home .front-section {
        height: 84vh;
        min-height: 540px;
        align-items: center;
        padding-bottom: 0;
    }

    body.site-home .hero-content {
        width: calc(100% - 24px);
        max-width: none;
        margin: 0 12px;
        padding: 24px 20px;
        border-radius: 22px;
    }

    body.site-home .hero-kicker {
        font-size: 0.68rem;
        letter-spacing: 0.22em;
        margin-bottom: 14px;
    }

    body.site-home .hero-title {
        font-size: clamp(2rem, 9.5vw, 2.7rem);
        line-height: 1.08;
    }

    body.site-home .hero-sub {
        margin-top: 14px;
        font-size: 0.92rem;
        line-height: 1.55;
    }

    body.site-home .hero-actions {
        margin-top: 22px;
        gap: 10px;
    }

    body.site-home .hero-actions .about-btn,
    body.site-home .hero-actions .hero-ghost-btn {
        padding: 13px 22px;
        font-size: 0.9rem;
    }

    body.site-home .menu-section {
        padding: 18px 14px;
    }

    body.site-home .menu-category-btn {
        padding: 13px 10px;
        font-size: 0.76rem;
        border-radius: 13px;
    }

    body.site-home .contact-section,
    body.site-home #contact,
    body.site-home .about-section,
    body.site-home #about {
        padding: 52px 14px;
    }

    body.site-home .contact-form {
        padding: 22px 18px;
        border-radius: 18px;
    }

    body.site-home .contact-box {
        padding: 12px 14px;
    }

    body.site-home .contact-icon {
        width: 38px;
        height: 38px;
        font-size: 15px;
    }

    body.site-home .map-section {
        padding: 28px 14px 56px;
    }

    body.site-home .map-wrapper iframe {
        min-height: 240px;
    }

    body.site-home .site-footer {
        padding: 48px 18px 0;
    }

    body.site-home .footer-top {
        grid-template-columns: 1fr;
        gap: 30px;
    }

    body.site-home .footer-bottom {
        margin-top: 30px;
        justify-content: center;
        text-align: center;
    }
}

/* FAB stays clear of the footer links on very small screens */
@media (max-width: 400px) {
    body.site-home #menuCartButton.menu-cart-button {
        width: 56px !important;
        height: 56px !important;
        right: 14px !important;
        bottom: 14px !important;
    }
}

/* Respect users who prefer reduced motion */
@media (prefers-reduced-motion: reduce) {
    body.site-home .hero-content {
        animation: none;
    }

    body.site-home #menuCartButton.menu-cart-button::after {
        animation: none;
    }
}

/* ---------- 10. CONTAINING-BLOCK FIX (critical) ----------
   backdrop-filter creates a containing block for position:fixed
   descendants, which anchors the floating cart FAB to the menu
   section and shrinks the mobile nav overlay to the header box.
   We neutralise it on those ancestors and compensate with a
   slightly more opaque background so the glass look is kept. */
body.site-home .top-bar {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    background: rgba(255, 255, 255, 0.94);
}

body.site-home .top-bar.scrolled {
    background: rgba(255, 255, 255, 0.98);
}

body.site-home .menu-section {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    background: rgba(255, 255, 255, 0.82);
}
/* ============================================================
   v3 — user-requested adjustments
   1) Nav: firmly sticky at the very top + glassy orange look.
      The blur lives on a ::before child so the fixed mobile
      menu / floating cart keep the viewport as containing
      block (backdrop-filter on .top-bar itself would re-break
      the containing-block fix).
   2) Footer: 2-column grid on phones.
   3) Hero: no overlay gradient, no card shadow, no backdrop
      blur — hero.jpg stays fully crisp and unblurred.
   ============================================================ */

/* ---------- 1. GLASSY ORANGE STICKY NAV ---------- */
body.site-home .top-bar {
    position: sticky;
    top: 0;
    z-index: 1200;
    width: 100%;
    margin: 0;
    border-radius: 0 0 20px 20px;
    background: rgba(255, 107, 0, 0.72);
    border: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.22);
    box-shadow: 0 10px 30px rgba(194, 65, 12, 0.28);
}

/* Glass blur on a child pseudo-element keeps position:fixed
   descendants (mobile menu overlay, cart FAB) anchored to the
   viewport instead of the header. */
body.site-home .top-bar::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    border-radius: inherit;
    background: linear-gradient(135deg, rgba(255, 122, 26, 0.62), rgba(194, 65, 12, 0.74));
    -webkit-backdrop-filter: blur(16px) saturate(1.5);
    backdrop-filter: blur(16px) saturate(1.5);
}

body.site-home .top-bar.scrolled {
    background: rgba(255, 107, 0, 0.9);
    box-shadow: 0 16px 40px rgba(194, 65, 12, 0.4);
}

/* White text + accents for readability on the orange glass */
body.site-home .brand-wordmark {
    color: #ffffff;
}

body.site-home .top-nav a {
    color: #ffffff;
}

body.site-home .top-nav a::after {
    background: #ffffff;
}

body.site-home .top-nav a:hover,
body.site-home .top-nav a:focus-visible {
    background: rgba(255, 255, 255, 0.18);
}

body.site-home .live-clock {
    color: #ffffff;
}

@media (max-width: 900px) {
    body.site-home .mobile-menu-toggle {
        background: rgba(255, 255, 255, 0.92);
        box-shadow: 0 8px 20px rgba(194, 65, 12, 0.3);
    }

    body.site-home .mobile-menu-toggle span {
        background: #FF6B00;
    }

    /* Keep the animated X visible: orange bars on the white pill button */
    body.site-home .mobile-menu-toggle[aria-expanded="true"] span {
        background: #FF6B00;
    }

    /* The full-screen mobile menu is a light glass panel, so switch the
       nav links (white on desktop orange glass) back to dark ink here. */
    body.site-home .top-nav a {
        color: #111827;
    }

    body.site-home .top-nav a::after {
        background: #C2410C;
    }

    body.site-home .top-nav a:hover,
    body.site-home .top-nav a:focus-visible {
        background: rgba(255, 107, 0, 0.12);
    }
}

/* ---------- 2. FOOTER — 2 columns on phones ---------- */
@media (max-width: 560px) {
    body.site-home .footer-top {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 32px 22px;
    }
}

/* ---------- 3. HERO — keep hero.jpg crisp, no overlay/shadow ---------- */
body.site-home .hero-overlay {
    display: none;
}

body.site-home .hero-content {
    background: rgba(255, 255, 255, 0.85);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    box-shadow: none;
    border: 1px solid rgba(255, 255, 255, 0.7);
}

/* ---------- 4. ABOUT — warm brand-orange section ---------- */
body.site-home .about-section,
body.site-home #about {
    background: linear-gradient(135deg, #FF8A3D 0%, #FF6B00 48%, #E65100 100%);
}

body.site-home .about-image img {
    box-shadow: 0 26px 60px rgba(120, 38, 0, 0.35);
}

body.site-home .about-tag {
    color: #FF6B00;
}

body.site-home .feature-box:hover {
    box-shadow: 0 18px 38px rgba(120, 38, 0, 0.35);
}

/* ---------- 5. ABOUT IMAGE — show the full photo, never cropped ---------- */
body.site-home .about-image img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: contain;
}

/* ---------- 6. ABOUT LEFT COLUMN — image with the feature boxes
   (Fresh Food / Quality Service) stacked underneath it ---------- */
body.site-home .about-left {
    display: flex;
    flex-direction: column;
    gap: 22px;
    min-width: 0;
}

body.site-home .about-left .about-features {
    margin: 0;
}

body.site-home .about-left .feature-box {
    background: rgba(255, 255, 255, 0.55);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
}

/* ---------- 7. ABOUT CONTENT — frosted glassmorphism white card ---------- */
body.site-home .about-content {
    background: rgba(255, 255, 255, 0.68);
    -webkit-backdrop-filter: blur(22px) saturate(150%);
    backdrop-filter: blur(22px) saturate(150%);
    border: 1px solid rgba(255, 255, 255, 0.65);
    box-shadow:
        0 24px 60px rgba(120, 38, 0, 0.16),
        inset 0 1px 0 rgba(255, 255, 255, 0.9);
}


/* ============================================================
   REVIEW STAR-RATING FILTER BUTTONS (public + staff pages)
   ============================================================ */
.review-filter-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin: 14px 0 18px;
}

.review-filter-btn {
    appearance: none;
    border: 1.5px solid rgba(17, 24, 39, 0.14);
    background: #fff;
    color: #374151;
    font-family: inherit;
    font-size: 0.85rem;
    font-weight: 700;
    line-height: 1;
    padding: 8px 14px;
    border-radius: 999px;
    cursor: pointer;
    transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease, transform 0.15s ease, box-shadow 0.2s ease;
}

.review-filter-btn:hover {
    border-color: #FF6B00;
    color: #FF6B00;
    transform: translateY(-1px);
}

.review-filter-btn:focus-visible {
    outline: 3px solid rgba(255, 107, 0, 0.35);
    outline-offset: 2px;
}

.review-filter-btn.is-active {
    background: #FF6B00;
    border-color: #FF6B00;
    color: #fff;
    box-shadow: 0 6px 16px rgba(255, 107, 0, 0.35);
}

/* ============================================================
   STAFF APP REDESIGN — Professional Green · Light Theme
   Scoped under body.staff-app so the customer site is untouched.
   Palette: Brand green #2BAE66 · Cream #FCF6F5 · White surfaces
            Ink #1F2A24 · Muted slate #57655C · Gold #E2A00F
   ============================================================ */

body.staff-app {
    --staff-bg: #FCF6F5;
    --staff-bg-2: #F7F0EE;
    --staff-surface: #FFFFFF;
    --staff-surface-2: #FFFFFF;
    --staff-surface-soft: #F1FAF5;
    --staff-border: #E3EDE6;
    --staff-border-soft: #EDF4EF;
    --staff-text: #1F2A24;
    --staff-muted: #57655C;
    --staff-faint: #6E7D73;
    --staff-accent: #2BAE66;
    --staff-accent-2: #1E8F52;
    --staff-accent-strong: #167A45;
    --staff-accent-soft: rgba(43, 174, 102, 0.12);
    --staff-accent-softer: rgba(43, 174, 102, 0.07);
    --staff-gold: #E2A00F;
    --staff-danger: #DC2626;
    --staff-success: #16A34A;
    --staff-warn: #D97706;
    --staff-radius: 16px;
    --staff-shadow-sm: 0 2px 8px rgba(23, 87, 54, 0.06);
    --staff-shadow-md: 0 10px 26px rgba(23, 87, 54, 0.09);
    --staff-shadow-lg: 0 24px 54px rgba(23, 87, 54, 0.12);

    background-color: var(--staff-bg);
    color: var(--staff-text);
    font-family: "Inter", "Segoe UI", Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    background-image:
        radial-gradient(1100px 560px at 92% -12%, rgba(43, 174, 102, 0.10), transparent 62%),
        radial-gradient(900px 520px at -6% 110%, rgba(43, 174, 102, 0.07), transparent 55%);
    background-repeat: no-repeat, no-repeat;
    background-attachment: fixed, fixed;
}

body.staff-app h1,
body.staff-app h2,
body.staff-app h3,
body.staff-app h4,
body.staff-app .brand-wordmark {
    font-family: "Montserrat", "Segoe UI", Arial, sans-serif;
    color: var(--staff-text);
}

body.staff-app section[id] {
    scroll-margin-top: 60px;
}

/* ---------- Scrollbars ---------- */
body.staff-app ::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

body.staff-app ::-webkit-scrollbar-track {
    background: rgba(43, 174, 102, 0.06);
}

body.staff-app ::-webkit-scrollbar-thumb {
    background: rgba(43, 174, 102, 0.28);
    border-radius: 999px;
    border: 2px solid transparent;
    background-clip: padding-box;
}

body.staff-app ::-webkit-scrollbar-thumb:hover {
    background: rgba(43, 174, 102, 0.5);
    background-clip: padding-box;
}

/* ---------- Header / top bar ---------- */
body.staff-app.auth .top-bar.login-top-bar {
    /* NOTE: no backdrop-filter here — it would create a containing block for
       fixed descendants and break the dashboard panel / modals' position:fixed. */
    position: sticky;
    top: 0;
    z-index: 1500;
    background: rgba(255, 255, 255, 0.9);
    border-bottom: 1px solid var(--staff-border);
    box-shadow: 0 4px 18px rgba(23, 87, 54, 0.08);
    padding: 10px 24px;
}

body.staff-app .menu-btn {
    background: linear-gradient(135deg, var(--staff-accent-2), var(--staff-accent-strong));
    box-shadow: 0 6px 16px rgba(43, 174, 102, 0.35);
}

body.staff-app .menu-btn:hover {
    box-shadow: 0 10px 22px rgba(43, 174, 102, 0.45);
}

/* ---------- Dashboard panel (always-open sidebar) ---------- */
body.staff-app .dashboard-panel {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(252, 246, 245, 0.98));
    -webkit-backdrop-filter: blur(20px) saturate(1.2);
    backdrop-filter: blur(20px) saturate(1.2);
    border-right: 1px solid var(--staff-border);
    color: var(--staff-text);
    box-shadow: 8px 0 32px rgba(23, 87, 54, 0.10);
}

body.staff-app .dashboard-panel h3 {
    color: var(--staff-accent-strong);
    text-align: center;
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.18em;
    text-transform: uppercase;
}

body.staff-app .dashboard-profile {
    border-bottom-color: var(--staff-border);
}

body.staff-app .dashboard-profile-meta strong {
    color: var(--staff-text);
}

body.staff-app .dashboard-profile-meta span {
    color: var(--staff-muted);
}

body.staff-app .dashboard-profile-avatar {
    background: linear-gradient(135deg, var(--staff-accent-2), var(--staff-accent-strong));
    box-shadow: 0 8px 20px rgba(43, 174, 102, 0.35);
}

body.staff-app .dashboard-panel a {
    color: var(--staff-muted);
    border-radius: 12px;
    text-align: left;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 12px;
    padding: 11px 14px;
    margin-bottom: 4px;
    font-size: 0.92rem;
    font-weight: 600;
    transition: background 0.16s ease, color 0.16s ease, box-shadow 0.16s ease, transform 0.16s ease;
}

body.staff-app .dashboard-panel a i {
    font-size: 17px;
    width: 22px;
    text-align: center;
    color: var(--staff-accent);
    transition: color 0.16s ease, transform 0.16s ease;
}

body.staff-app .dashboard-panel a:hover {
    transform: translateX(3px);
    background: var(--staff-accent-softer);
    color: var(--staff-text);
}

body.staff-app .dashboard-panel a:hover i {
    color: var(--staff-accent-2);
    transform: scale(1.1);
}

body.staff-app .dashboard-panel a.active {
    background: linear-gradient(135deg, var(--staff-accent-2), var(--staff-accent-strong));
    color: #fff;
    font-weight: 700;
    box-shadow: 0 8px 20px rgba(43, 174, 102, 0.35);
}

body.staff-app .dashboard-panel a.active i {
    color: #fff;
}

body.staff-app .dashboard-panel .panel-close {
    color: var(--staff-muted);
    background: var(--staff-accent-softer);
}

body.staff-app .dashboard-panel .panel-close:hover {
    color: #fff;
    background: var(--staff-accent);
}

body.staff-app .logout-btn {
    background: var(--staff-accent-softer);
    color: var(--staff-text);
    border: 1px solid var(--staff-border);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    text-align: center;
    margin-top: 10px;
    font-weight: 600;
    border-radius: 12px;
}

body.staff-app .logout-btn i {
    font-size: 15px;
    color: var(--staff-danger);
}

body.staff-app .logout-btn:hover {
    background: rgba(220, 38, 38, 0.1);
    color: var(--staff-danger);
    border-color: rgba(220, 38, 38, 0.35);
}

/* ---------- Dashboard sections: white cards ---------- */
/* Full-screen loading overlay shown after staff login / session restore
   until the initial dashboard data has finished loading. */
.staff-loading-overlay {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 16px;
    background: var(--staff-bg, #0f172a);
    color: var(--staff-text, #e2e8f0);
    font-family: "Montserrat", sans-serif;
    font-size: 0.95rem;
    font-weight: 600;
    letter-spacing: 0.02em;
}

.staff-loading-overlay[hidden] {
    display: none !important;
}

.staff-loading-spinner {
    width: 44px;
    height: 44px;
    border: 4px solid rgba(43, 174, 102, 0.25);
    border-top-color: var(--staff-accent, #2bae66);
    border-radius: 50%;
    animation: staff-loading-spin 0.9s linear infinite;
}

@keyframes staff-loading-spin {
    to {
        transform: rotate(360deg);
    }
}

@media (prefers-reduced-motion: reduce) {
    .staff-loading-spinner {
        animation-duration: 1.8s;
    }

    /* Note: the .is-confirmed tick has no animation to slow down. */
    body.staff-app .inventory-delete-status:not(.is-confirmed)::before {
        animation-duration: 1.8s;
    }
}

body.staff-app .overview-section,
body.staff-app .inventory-section,
body.staff-app .orders-section,
body.staff-app .sales-section,
body.staff-app .account-management {
    background: var(--staff-surface);
    border: 1px solid var(--staff-border);
    border-radius: 20px;
    box-shadow: var(--staff-shadow-lg);
    color: var(--staff-text);
    padding: 16px 28px 28px;
    margin-top: 8px !important;
}

body.staff-app .overview-section > h2,
body.staff-app .inventory-section > h2,
body.staff-app .orders-section > h2,
body.staff-app .sales-section > h2,
body.staff-app .account-management > h2 {
    margin: 0 0 4px;
    color: var(--staff-text);
    font-weight: 800;
    letter-spacing: -0.01em;
    position: relative;
    padding-bottom: 12px;
}

body.staff-app .overview-section > h2::after,
body.staff-app .inventory-section > h2::after,
body.staff-app .orders-section > h2::after,
body.staff-app .sales-section > h2::after,
body.staff-app .account-management > h2::after {
    content: "";
    display: block;
    width: 44px;
    height: 4px;
    margin-top: 8px;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--staff-accent), var(--staff-accent-2));
}

body.staff-app .overview-section > p,
body.staff-app .inventory-section > p,
body.staff-app .orders-section > p,
body.staff-app .sales-section > p,
body.staff-app .account-management > p {
    margin: 0 0 12px;
    color: var(--staff-muted);
    font-size: 0.9rem;
}

/* ---------- Overview metric cards ---------- */
body.staff-app .metric-card {
    background: var(--staff-surface) !important;
    border: 1px solid var(--staff-border) !important;
    border-left: 4px solid var(--staff-accent) !important;
    border-radius: 14px !important;
    padding: 18px 18px 16px !important;
    box-shadow: var(--staff-shadow-sm) !important;
    transition: transform 0.18s ease, box-shadow 0.18s ease;
}

body.staff-app .metric-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--staff-shadow-md) !important;
}

body.staff-app .metric-card > div:not([id]) {
    color: var(--staff-muted) !important;
    font-size: 0.78rem !important;
    font-weight: 700;
    letter-spacing: 0.02em;
}

body.staff-app .metric-card div[id] {
    font-family: "Montserrat", sans-serif;
    font-size: 1.9rem !important;
    font-weight: 800 !important;
}

body.staff-app #metricPendingOrders { border-left-color: #DC2626 !important; }
body.staff-app #metricOrdersCompleted { border-left-color: #16A34A !important; }
body.staff-app #metricWalkinCompleted { border-left-color: #D97706 !important; }
body.staff-app #metricOnlineCompleted { border-left-color: #4F46E5 !important; }

body.staff-app #pendingOrdersCount { color: #DC2626 !important; }
body.staff-app #ordersCompletedCount { color: #15803D !important; }
body.staff-app #walkinCompletedCount { color: #B45309 !important; }
body.staff-app #onlineCompletedCount { color: #4338CA !important; }

body.staff-app .overview-grid {
    gap: 18px;
}

body.staff-app .overview-grid > * {
    min-width: 0;
    overflow: hidden;
}

body.staff-app .chart-scroll-hint {
    color: var(--staff-muted);
}

body.staff-app .sales-analytics-placeholder,
body.staff-app .overview-analytics-panel,
body.staff-app .overview-order-notification-box,
body.staff-app .order-notification-footer {
    background: var(--staff-surface-2) !important;
    border: 1px solid var(--staff-border) !important;
    border-radius: 18px !important;
    color: var(--staff-text) !important;
    box-shadow: var(--staff-shadow-sm) !important;
    padding: 24px 26px !important;
}

body.staff-app .sales-analytics-placeholder:hover,
body.staff-app .overview-analytics-panel:hover {
    box-shadow: var(--staff-shadow-md) !important;
}

body.staff-app .sales-analytics-placeholder h3,
body.staff-app .overview-analytics-panel h3,
body.staff-app .overview-order-notification-box h3 {
    margin: 0 0 4px;
    color: var(--staff-text);
    font-size: 1.15rem;
    font-weight: 800;
}

/* The "Order Notifications" heading shares its line with the pending-orders
   badge, so it must not carry the 4px bottom margin the box-level rule above
   gives every heading in the panel. This started as an inline style="margin:0"
   on the element; as a plain class it lost to the selector above, because an
   inline style outranks any non-important author rule but a class does not.
   Same specificity as that rule, so it wins on source order. */
body.staff-app .overview-notification-header h3 {
    margin: 0;
}

body.staff-app .sales-analytics-placeholder > h3::before {
    content: "";
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--staff-accent), var(--staff-accent-2));
    margin-right: 8px;
    vertical-align: middle;
    box-shadow: 0 0 0 3px var(--staff-accent-softer);
}

body.staff-app .sales-analytics-placeholder p,
body.staff-app .overview-analytics-panel p,
body.staff-app .overview-order-notification-box p {
    color: var(--staff-muted);
    font-size: 0.88rem;
}

body.staff-app .order-notification-footer {
    border: 1px solid var(--staff-border) !important;
    border-top: 1px solid var(--staff-border) !important;
}

body.staff-app .menu-cart-empty {
    color: #94a3b8;
    font-size: 0.9rem;
    font-weight: 500;
    padding: 20px 0;
    text-align: center;
}

body.staff-app .order-notification-footer span {
    color: var(--staff-muted);
    font-weight: 600;
}

body.staff-app .order-notification-footer strong {
    color: var(--staff-accent-strong);
    font-weight: 800;
}



/* ---------- Order notification cards (override dark base) ---------- */
body.staff-app .order-notification-card {
    background: #ffffff;
    border: 1px solid var(--staff-border);
    border-left: 5px solid var(--staff-accent);
    border-radius: 16px;
    box-shadow: var(--staff-shadow-sm);
    color: var(--staff-text);
    transition: transform 0.16s ease, box-shadow 0.16s ease, border-color 0.16s ease;
}

body.staff-app .order-notification-card:hover {
    transform: translateY(-1px);
    box-shadow: var(--staff-shadow-md);
    border-color: var(--staff-accent);
}

body.staff-app .order-notification-card.status-completed {
    border-left-color: #15803d;
}

body.staff-app .order-notification-card.status-expired {
    border-left-color: #c2410c;
}

body.staff-app .order-notification-card.status-cancelled {
    border-left-color: #64748b;
}

body.staff-app .order-notification-card.status-refunded {
    border-left-color: #b91c1c;
}

body.staff-app .order-notification-card.completed {
    background: linear-gradient(180deg, #F7FAF8 0%, #ffffff 100%);
    opacity: 1;
}

body.staff-app .order-notification-card h4,
body.staff-app .order-notification-card p,
body.staff-app .order-notification-card li,
body.staff-app .order-notification-card span,
body.staff-app .order-notification-card strong {
    color: var(--staff-text);
}

body.staff-app .order-notification-card .order-notif-id {
    color: var(--staff-text);
    font-weight: 800;
    letter-spacing: -0.01em;
}

body.staff-app .order-notif-badge {
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    border-radius: 999px;
    padding: 5px 11px;
    border: 1px solid transparent;
}

body.staff-app .order-notif-badge.is-new {
    background: #FEF3C7;
    border-color: #FDE68A;
    color: #B45309;
}

body.staff-app .order-notif-badge.is-preparing {
    background: #E0E7FF;
    border-color: #C7D2FE;
    color: #4338CA;
}

body.staff-app .order-notif-badge.is-completed {
    background: #DCFCE7;
    border-color: #BBF7D0;
    color: #15803D;
}

body.staff-app .order-notif-badge.is-expired {
    background: #FFEDD5;
    border-color: #FED7AA;
    color: #C2410C;
}

body.staff-app .order-notif-badge.is-cancelled {
    background: #F1F5F9;
    border-color: #E2E8F0;
    color: #475569;
}

body.staff-app .order-notif-badge.is-refunded {
    background: #FEE2E2;
    border-color: #FECACA;
    color: #B91C1C;
}

body.staff-app .order-notif-item {
    background: #F4F7F5;
    border: 1px solid #E3EAE6;
    border-radius: 10px;
    padding: 8px 10px;
}

body.staff-app .order-notif-item strong {
    color: var(--staff-text);
}

body.staff-app .order-notif-component {
    color: #36524A !important;
    font-weight: 600;
    background: rgba(43, 174, 102, 0.08);
    border-radius: 6px;
    padding: 3px 8px;
    margin-top: 2px;
}

body.staff-app .order-notif-components {
    background: #F1F6F3;
    border: 1px solid #E0E9E3;
    border-radius: 8px;
    padding: 6px 8px;
}

body.staff-app .order-notif-foot {
    border-top-color: #E8F0EA;
}

body.staff-app .order-notif-total span {
    color: var(--staff-muted);
}

body.staff-app .order-notif-total strong {
    color: var(--staff-accent-2);
    font-size: 1rem;
    letter-spacing: -0.01em;
}

body.staff-app .order-notif-print-btn,
body.staff-app .order-notif-go-link,
body.staff-app .order-refund-btn {
    border-radius: 10px;
    font-size: 0.78rem;
    padding: 8px 12px;
}

body.staff-app .order-notification-list {
    scrollbar-width: thin;
    scrollbar-color: #CFE3D5 transparent;
}

body.staff-app .order-notification-list::-webkit-scrollbar {
    width: 8px;
}

body.staff-app .order-notification-list::-webkit-scrollbar-track {
    background: transparent;
}

body.staff-app .order-notification-list::-webkit-scrollbar-thumb {
    background: #CFE3D5;
    border-radius: 999px;
}

body.staff-app .order-notification-list::-webkit-scrollbar-thumb:hover {
    background: var(--staff-accent);
}

body.staff-app .order-notif-print-btn:focus-visible,
body.staff-app .order-notif-go-link:focus-visible,
body.staff-app .order-refund-btn:focus-visible,
body.staff-app .order-history-print-btn:focus-visible,
body.staff-app .order-history-field select:focus-visible {
    outline: 2px solid var(--staff-accent);
    outline-offset: 2px;
}

/* ---------- Sales tab container ---------- */
body.staff-app .sales-tabs {
    border-bottom: 1px solid var(--staff-border);
}

body.staff-app .sales-tab-btn {
    color: var(--staff-muted);
    font-weight: 700;
}

body.staff-app .sales-tab-btn:hover {
    color: var(--staff-accent-2);
}

body.staff-app .sales-tab-btn.active {
    color: var(--staff-accent-strong);
    border-bottom-color: var(--staff-accent);
}

/* ---------- Profit section ---------- */
body.staff-app .profit-summary-row {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin-top: 18px;
    padding: 4px;
}

body.staff-app .profit-summary-chip {
    flex: 1 1 160px;
    background: var(--staff-surface) !important;
    border: 1px solid var(--staff-border) !important;
    border-left: 4px solid var(--staff-accent) !important;
    border-radius: 14px !important;
    padding: 16px 18px !important;
    box-shadow: var(--staff-shadow-sm);
    transition: transform 0.18s ease, box-shadow 0.18s ease;
}

body.staff-app .profit-summary-chip:hover {
    transform: translateY(-1px);
    box-shadow: var(--staff-shadow-md);
}

body.staff-app .profit-summary-chip:nth-child(1) {
    border-left-color: #2BAE66 !important;
}
body.staff-app .profit-summary-chip:nth-child(2) {
    border-left-color: #F59E0B !important;
}
body.staff-app .profit-summary-chip:nth-child(3) {
    border-left-color: #6366F1 !important;
}

body.staff-app .profit-summary-chip span {
    display: block;
    color: var(--staff-muted);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    margin-bottom: 8px;
}

body.staff-app .profit-summary-chip strong {
    display: block;
    font-family: "Montserrat", sans-serif;
    font-size: 1.35rem;
    font-weight: 800;
    color: var(--staff-text);
}

body.staff-app .profit-summary-chip strong.is-negative {
    color: var(--staff-danger);
}

/* Sales analytics chart: green line + dots + clean canvas (CSS overrides inline SVG colors) */
body.staff-app .sales-analytics-chart,
body.staff-app #overview .sales-analytics-chart {
    background: linear-gradient(180deg, rgba(43, 174, 102, 0.04), rgba(43, 174, 102, 0.01));
    border: 1px solid rgba(148, 163, 184, 0.12);
    border-radius: 14px;
}

body.staff-app .sales-analytics-chart svg rect {
    fill: #ffffff;
}

/* The chart path/dots are the only <path>/<circle> elements in the SVG, so a
   broad scoped override covers BOTH animated (.sales-line-path) and plain
   (background-refresh) renders, replacing the inline orange stroke/fill. */
body.staff-app .sales-analytics-chart path {
    stroke: #2BAE66 !important;
}

body.staff-app .sales-analytics-chart circle {
    stroke: #2BAE66 !important;
    fill: #fff !important;
}

body.staff-app .sales-analytics-select-wrapper {
    background: var(--staff-surface-soft) !important;
    border: 1px solid var(--staff-border) !important;
    border-radius: 12px;
    padding: 10px 14px;
    gap: 10px;
}

body.staff-app .sales-analytics-select-wrapper label {
    color: var(--staff-muted);
}

body.staff-app .nested-selector {
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
}

body.staff-app .nested-selector label {
    color: var(--staff-muted);
}

body.staff-app .analytics-select,
body.staff-app .nested-select {
    background: var(--staff-surface) !important;
    border: 1px solid var(--staff-border) !important;
    color: var(--staff-text) !important;
    box-shadow: var(--staff-shadow-sm);
}

body.staff-app .analytics-select:hover,
body.staff-app .nested-select:hover {
    border-color: var(--staff-accent) !important;
}

body.staff-app .analytics-select:focus,
body.staff-app .nested-select:focus {
    border-color: var(--staff-accent) !important;
    box-shadow: 0 0 0 3px var(--staff-accent-soft) !important;
}

/* ---------- Orders ---------- */
body.staff-app .orders-tab-btn {
    background: var(--staff-surface-2);
    border: 1px solid var(--staff-border);
    color: var(--staff-muted);
    font-weight: 600;
}

body.staff-app .orders-tab-btn:hover {
    color: var(--staff-accent-2);
    border-color: var(--staff-accent);
}

body.staff-app .orders-tab-btn.active {
    background: linear-gradient(135deg, var(--staff-accent-2), var(--staff-accent-strong));
    color: #fff;
    border-color: transparent;
    box-shadow: 0 8px 18px rgba(43, 174, 102, 0.3);
}

body.staff-app .walkin-order-builder,
body.staff-app .walkin-order-footer {
    background: var(--staff-surface-soft);
    border: 1px solid var(--staff-border);
    border-radius: 14px;
    padding: 16px;
}

body.staff-app .walkin-order-builder label,
body.staff-app .walkin-order-footer label {
    color: var(--staff-muted);
    font-weight: 600;
    font-size: 0.85rem;
}

body.staff-app .walkin-draft-item-card,
body.staff-app .pending-order-card {
    background: var(--staff-surface-2);
    border: 1px solid var(--staff-border);
    border-radius: 14px;
    box-shadow: var(--staff-shadow-sm);
}

body.staff-app .walkin-draft-item-card p,
body.staff-app .walkin-draft-item-card strong,
body.staff-app .walkin-draft-component-name,
body.staff-app .walkin-draft-components-title,
body.staff-app .walkin-draft-total,
body.staff-app .pending-order-card h4,
body.staff-app .pending-order-card p,
body.staff-app .pending-order-card li,
body.staff-app .pending-order-card span,
body.staff-app .pending-order-card strong {
    color: var(--staff-text);
}

body.staff-app .pending-order-card ul {
    color: var(--staff-text);
}

body.staff-app .pending-order-type {
    background: var(--staff-accent-soft);
    color: var(--staff-accent-strong);
    font-weight: 800;
}

/* Walk-in / pending action buttons */
body.staff-app .walkin-draft-qty-btn {
    background: var(--staff-accent-soft);
    color: var(--staff-accent-strong);
}

body.staff-app .walkin-draft-remove-btn {
    background: rgba(220, 38, 38, 0.1);
    color: var(--staff-danger);
}

body.staff-app .walkin-draft-qty-btn:hover,
body.staff-app .walkin-draft-remove-btn:hover {
    filter: brightness(0.96);
}

body.staff-app .pending-item-qty-btn {
    background: var(--staff-accent-soft);
    color: var(--staff-accent-strong);
    border: none;
}

body.staff-app .pending-item-component-btn {
    background: var(--staff-accent-soft);
    color: var(--staff-accent-strong);
    border: none;
}

body.staff-app .order-complete-btn {
    background: linear-gradient(135deg, var(--staff-accent-2), var(--staff-accent-strong));
    color: #fff;
    border: none;
    font-weight: 700;
    box-shadow: 0 6px 16px rgba(43, 174, 102, 0.3);
}

body.staff-app .order-complete-btn:hover {
    filter: brightness(1.05);
    transform: translateY(-1px);
}

/* ---------- Inventory ---------- */
body.staff-app .inventory-admin-panel,
body.staff-app .inventory-toolbar,
body.staff-app .inventory-panel-header {
    background: transparent;
}

/* Progress for an optimistic deletion. The row is removed from the list the
   moment the staff member confirms, so this line is the only visible sign that
   a slow request is still in flight. */
body.staff-app .inventory-delete-status {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 10px;
    color: var(--staff-muted);
    font-size: 0.9rem;
    font-weight: 600;
}

body.staff-app .inventory-delete-status[hidden] {
    display: none;
}

body.staff-app .inventory-delete-status::before {
    content: '';
    flex: 0 0 auto;
    width: 0.85em;
    height: 0.85em;
    border: 2px solid rgba(43, 174, 102, 0.25);
    border-top-color: var(--staff-accent, #2bae66);
    border-radius: 50%;
    animation: staff-loading-spin 0.7s linear infinite;
}

/* Server confirmed the delete: swap the spinner for a tick. */
body.staff-app .inventory-delete-status.is-confirmed {
    color: var(--staff-accent, #2bae66);
}

body.staff-app .inventory-delete-status.is-confirmed::before {
    content: '✓';
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.1em;
    height: 1.1em;
    border: 0;
    border-radius: 50%;
    background: rgba(43, 174, 102, 0.16);
    font-size: 0.72em;
    font-weight: 700;
    line-height: 1;
    animation: none;
}

body.staff-app .inventory-panel-header h3 {
    color: var(--staff-text);
}

body.staff-app .inventory-search-field {
    color: var(--staff-text);
    font-weight: 600;
}

body.staff-app .inventory-category-tab {
    background: var(--staff-surface-2);
    border: 1px solid var(--staff-border);
    color: var(--staff-muted);
    font-weight: 600;
}

body.staff-app .inventory-category-tab:hover {
    color: var(--staff-accent-2);
    border-color: var(--staff-accent);
}

body.staff-app .inventory-category-tab.active {
    background: linear-gradient(135deg, var(--staff-accent-2), var(--staff-accent-strong));
    color: #fff;
    border-color: transparent;
    box-shadow: 0 8px 18px rgba(43, 174, 102, 0.3);
}

body.staff-app .inventory-item-card {
    background: var(--staff-surface-2);
    border: 1px solid var(--staff-border);
    border-radius: 14px;
    box-shadow: var(--staff-shadow-sm);
    color: var(--staff-text);
}

/* Fills the list area when there are no products, so the Inventory
   section doesn't collapse into a tiny strip while empty. */
body.staff-app .inventory-items-wrapper .menu-cart-empty {
    grid-column: 1 / -1;
    margin: 0;
    padding: 48px 24px;
    min-height: 220px;
    display: grid;
    place-items: center;
    align-content: center;
    text-align: center;
    font-size: 0.95rem;
    font-weight: 600;
    line-height: 1.6;
    color: var(--staff-muted);
    background: var(--staff-surface-2);
    border: 1.5px dashed var(--staff-border);
    border-radius: 14px;
}

body.staff-app .inventory-item-card h4,
body.staff-app .inventory-item-card p,
body.staff-app .inventory-item-card span,
body.staff-app .inventory-item-card strong,
body.staff-app .inventory-item-description,
body.staff-app .inventory-stock-line {
    color: var(--staff-text);
}

body.staff-app .inventory-item-category {
    color: var(--staff-accent-strong);
    background: var(--staff-accent-soft);
    border-radius: 999px;
    padding: 3px 10px;
    font-size: 0.72rem;
    font-weight: 700;
}

body.staff-app .inventory-add-fab {
    background: linear-gradient(135deg, var(--staff-accent-2), var(--staff-accent-strong));
    color: #fff;
    box-shadow: 0 10px 24px rgba(43, 174, 102, 0.4);
}

body.staff-app .inventory-add-fab:hover {
    transform: translateY(-2px) scale(1.03);
    box-shadow: 0 16px 34px rgba(43, 174, 102, 0.5);
}

/* Inventory inline edit actions (base is orange — green/red for staff) */
body.staff-app .inventory-edit-btn {
    background: var(--staff-accent-soft);
    color: var(--staff-accent-strong);
    border: 1px solid rgba(43, 174, 102, 0.35);
}

body.staff-app .inventory-edit-btn:hover {
    background: var(--staff-accent);
    color: #fff;
}

body.staff-app .inventory-inline-save {
    background: var(--staff-accent);
    color: #fff;
    border: none;
}

body.staff-app .inventory-inline-save:hover {
    background: var(--staff-accent-2);
}

body.staff-app .inventory-inline-cancel {
    background: var(--staff-surface-2);
    color: var(--staff-text);
    border: 1px solid var(--staff-border);
}

body.staff-app .inventory-inline-cancel:hover {
    border-color: var(--staff-faint);
}

body.staff-app .inventory-card-delete-btn,
body.staff-app .inventory-inline-delete {
    background: rgba(220, 38, 38, 0.1);
    color: var(--staff-danger);
    border: 1px solid rgba(220, 38, 38, 0.3);
}

body.staff-app .inventory-card-delete-btn:hover,
body.staff-app .inventory-inline-delete:hover {
    background: var(--staff-danger);
    color: #fff;
}

body.staff-app .inventory-modal-card {
    background: #ffffff;
    border: 1px solid var(--staff-border);
    border-radius: 18px;
    box-shadow: var(--staff-shadow-lg);
    color: var(--staff-text);
}

body.staff-app .inventory-modal-header h3 {
    color: var(--staff-text);
}

body.staff-app .inventory-form label,
body.staff-app .special-customize-title,
body.staff-app .special-customize-builder label {
    color: var(--staff-muted);
    font-weight: 600;
    font-size: 0.85rem;
}

/* ---------- Logs / review management ---------- */
body.staff-app .logs-filter-bar select,
body.staff-app .logs-filter-bar input {
    background: var(--staff-surface-2);
    border: 1px solid var(--staff-border);
    color: var(--staff-text);
}

body.staff-app .logs-filter-bar select:focus,
body.staff-app .logs-filter-bar input:focus {
    border-color: var(--staff-accent);
    box-shadow: 0 0 0 3px rgba(43, 174, 102, 0.18);
    outline: none;
}

/* Review filter: segmented pill bar with green active accent */
body.staff-app .review-filter-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    padding: 5px;
    margin: 14px 0 18px;
    background: var(--staff-surface-soft);
    border: 1px solid var(--staff-border);
    border-radius: 999px;
    width: fit-content;
    max-width: 100%;
}

body.staff-app .review-filter-btn {
    appearance: none;
    border: none;
    background: transparent;
    color: var(--staff-muted);
    font-family: inherit;
    font-size: 0.82rem;
    font-weight: 700;
    line-height: 1;
    padding: 9px 16px;
    border-radius: 999px;
    cursor: pointer;
    transition: background 0.18s ease, color 0.18s ease, box-shadow 0.18s ease, transform 0.12s ease;
    white-space: nowrap;
}

body.staff-app .review-filter-btn:hover {
    color: var(--staff-accent-2);
    transform: translateY(-1px);
}

body.staff-app .review-filter-btn:focus-visible {
    outline: 3px solid rgba(43, 174, 102, 0.4);
    outline-offset: 1px;
}

body.staff-app .review-filter-btn.is-active {
    background: linear-gradient(135deg, var(--staff-accent-2), var(--staff-accent-strong));
    color: #fff;
    box-shadow: 0 6px 16px rgba(43, 174, 102, 0.4);
}

/* Staff review cards */
body.staff-app .staff-review-list {
    display: grid;
    gap: 12px;
    max-height: 480px;
    overflow-y: auto;
    padding: 4px 6px 4px 0;
}

body.staff-app .staff-review-card {
    position: relative;
    display: grid;
    gap: 8px;
    border: 1px solid var(--staff-border);
    border-radius: 16px;
    padding: 16px;
    background: var(--staff-surface-2);
    box-shadow: var(--staff-shadow-sm);
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

body.staff-app .staff-review-card:hover {
    transform: translateY(-2px);
    border-color: rgba(43, 174, 102, 0.45);
    box-shadow: var(--staff-shadow-md);
}

body.staff-app .staff-review-head {
    display: flex;
    align-items: center;
    gap: 12px;
}

body.staff-app .staff-review-avatar {
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--staff-accent-2), var(--staff-accent-strong));
    color: #fff;
    font-size: 0.95rem;
    font-weight: 800;
    letter-spacing: 0.03em;
    box-shadow: 0 6px 16px rgba(43, 174, 102, 0.3);
}

body.staff-app .staff-review-who {
    display: grid;
    gap: 1px;
    min-width: 0;
    flex: 1 1 auto;
}

body.staff-app .staff-review-who strong {
    color: var(--staff-text);
    font-size: 0.92rem;
    font-weight: 700;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

body.staff-app .staff-review-who span {
    color: var(--staff-muted);
    font-size: 0.75rem;
}

body.staff-app .staff-review-card p,
body.staff-app .staff-review-card strong,
body.staff-app .staff-review-card span {
    margin: 0;
    color: var(--staff-text);
}

body.staff-app .staff-review-card .review-stars {
    color: var(--staff-gold) !important;
    font-size: 1.05rem;
    letter-spacing: 0.06em;
}

body.staff-app .staff-review-card .review-comment {
    color: var(--staff-text);
    line-height: 1.55;
    font-size: 0.93rem;
    white-space: pre-wrap;
    word-break: break-word;
}

body.staff-app .staff-review-publish-btn {
    background: var(--staff-success);
    color: #06230F;
    border: none;
    font-weight: 700;
}

body.staff-app .staff-review-delete-btn {
    background: rgba(220, 38, 38, 0.9);
    border: none;
    font-weight: 700;
}

body.staff-app .staff-review-publish-btn:hover {
    filter: brightness(1.06);
}

body.staff-app .staff-review-delete-btn:hover {
    background: #B91C1C;
}

/* Order log cards (override dark base) */
body.staff-app .order-log-card {
    background: var(--staff-surface-2);
    border: 1px solid var(--staff-border);
    border-radius: 12px;
    box-shadow: var(--staff-shadow-sm);
}

body.staff-app .order-log-card p,
body.staff-app .order-log-card strong,
body.staff-app .order-log-card span {
    color: var(--staff-text);
}

body.staff-app .order-log-card .review-log-comment .review-log-comment-text {
    color: var(--staff-text) !important;
}

/* ---------- Account management (Facebook-style flat cards) ---------- */
#account-management,
#account-settings {
    max-width: 760px;
}

/* The account list reads as one white card; each account is a flat row with a
   thin divider, exactly like a "Where you're logged in" list. */
body.staff-app .account-list {
    display: flex;
    flex-direction: column;
    list-style: none;
    margin: 0;
    padding: 0;
    background: var(--staff-surface);
    border: 1px solid var(--staff-border);
    border-radius: 10px;
    overflow: hidden;
}

/* Account rows are pure navigation now: no inline edit/delete buttons, the
   whole row opens the per-account settings view. */
body.staff-app .account-list-item {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 14px;
    padding: 13px 16px;
    background: none;
    border: none;
    border-bottom: 1px solid var(--staff-border-soft);
    border-radius: 0;
    box-shadow: none;
    color: var(--staff-text);
    cursor: pointer;
    transition: background 0.15s ease;
}

body.staff-app .account-list-item:last-child {
    border-bottom: none;
}

body.staff-app .account-list-item:hover,
body.staff-app .account-list-item:focus-visible {
    background: rgba(43, 174, 102, 0.09);
    cursor: pointer;
    outline: none;
}

body.staff-app .account-list-item:active {
    background: rgba(43, 174, 102, 0.14);
}

body.staff-app .account-list-item.account-row-admin:hover,
body.staff-app .account-list-item.account-row-admin:focus-visible {
    background: rgba(43, 174, 102, 0.12);
}

body.staff-app .account-list-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--staff-accent-soft);
    color: var(--staff-accent-strong);
    font-size: 0.95rem;
    font-weight: 800;
    line-height: 1;
    user-select: none;
}

body.staff-app .account-list-avatar.is-admin {
    background: var(--staff-accent-strong);
    color: #fff;
}

body.staff-app .account-list-main {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    flex: 1 1 auto;
    color: var(--staff-text);
}

body.staff-app .account-list-main strong {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--staff-text);
}

body.staff-app .account-list-main small {
    font-size: 0.8rem;
    color: var(--staff-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

body.staff-app .account-list-meta {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 4px;
    flex: 0 0 auto;
    color: var(--staff-text);
}

body.staff-app .account-list .account-role-tag {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    background: var(--staff-surface-soft);
    color: var(--staff-muted);
    border: 1px solid var(--staff-border);
    border-radius: 6px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    white-space: nowrap;
}

body.staff-app .account-list .account-role-tag.is-admin {
    background: var(--staff-accent-strong);
    color: #fff;
    border-color: transparent;
}

body.staff-app .account-invite-status {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 0.72rem;
    white-space: nowrap;
    color: var(--staff-muted);
}

body.staff-app .account-invite-status.is-confirmed {
    color: var(--staff-accent-strong);
}

body.staff-app .account-list-chevron {
    flex: 0 0 auto;
    color: var(--staff-faint);
    font-size: 0.8rem;
    transition: color 0.15s ease;
}

body.staff-app .account-list-item:hover .account-list-chevron,
body.staff-app .account-list-item:focus-visible .account-list-chevron {
    color: var(--staff-text);
}

/* The admin account lives in the same list; a quiet tint keeps it identifiable
   without the heavy inset bar. */
body.staff-app .account-list-item.account-row-admin {
    background: rgba(43, 174, 102, 0.04);
}

/* ---------- Account settings (native dashboard card style) ---------- */
body.staff-app .account-settings-back-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 14px;
    padding: 8px 14px;
    background: var(--staff-surface-2);
    border: 1px solid var(--staff-border);
    color: var(--staff-text);
    border-radius: 9px;
    font-size: 0.82rem;
    font-weight: 700;
    box-shadow: var(--staff-shadow-sm);
    cursor: pointer;
    transition: border-color 0.18s ease, color 0.18s ease, background 0.18s ease;
}

body.staff-app .account-settings-back-btn:hover,
body.staff-app .account-settings-back-btn:focus-visible {
    background: var(--staff-accent-soft);
    border-color: var(--staff-accent);
    color: var(--staff-accent-strong);
    outline: none;
}

/* The current account being managed, shown as a row under the card header. */
body.staff-app .account-settings-head {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 0 4px;
    border-top: 1px solid var(--staff-border);
}

body.staff-app .account-settings-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--staff-accent-soft);
    color: var(--staff-accent-strong);
    font-size: 1.25rem;
    font-weight: 800;
    line-height: 1;
    user-select: none;
}

body.staff-app .account-settings-avatar.is-admin {
    background: var(--staff-accent-strong);
    color: #fff;
}

body.staff-app .account-settings-identity {
    min-width: 0;
    flex: 1 1 auto;
}

body.staff-app .account-settings-identity strong {
    display: block;
    font-size: 1rem;
    font-weight: 800;
    color: var(--staff-text);
}

body.staff-app .account-settings-identity small {
    display: block;
    margin-top: 3px;
    font-size: 0.84rem;
    color: var(--staff-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

body.staff-app .account-settings-role-badge {
    display: inline-flex;
    align-items: center;
    flex: 0 0 auto;
    padding: 5px 12px;
    background: var(--staff-accent-soft);
    color: var(--staff-accent-strong);
    border: 1px solid rgba(43, 174, 102, 0.3);
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

body.staff-app .account-settings-role-badge.is-admin {
    background: var(--staff-accent-strong);
    border-color: transparent;
    color: #fff;
}

/* Action rows mirror the trusted-device rows: icon tile, title + subtitle,
   chevron affordance, thin divider between rows. */
body.staff-app .account-setting-option {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 12px 6px;
    text-align: left;
    background: none;
    color: var(--staff-text);
    border: none;
    border-bottom: 1px solid var(--staff-border-soft);
    border-radius: 0;
    cursor: pointer;
    transition: background 0.18s ease;
}

body.staff-app .account-setting-option:last-child {
    border-bottom: none;
}

body.staff-app .account-setting-option:hover,
body.staff-app .account-setting-option:focus-visible {
    background: rgba(43, 174, 102, 0.09);
    outline: none;
}

body.staff-app .account-setting-option:active {
    background: rgba(43, 174, 102, 0.14);
}

body.staff-app .account-setting-option-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 40px;
    height: 40px;
    border-radius: 12px;
    background: var(--staff-accent-soft);
    color: var(--staff-accent-strong);
    font-size: 1rem;
    box-shadow: inset 0 0 0 1px rgba(43, 174, 102, 0.18);
}

body.staff-app .account-setting-option-text {
    min-width: 0;
    flex: 1 1 auto;
}

body.staff-app .account-setting-option-text strong {
    display: block;
    font-size: 0.92rem;
    font-weight: 700;
    color: var(--staff-text);
}

body.staff-app .account-setting-option-text small {
    display: block;
    margin-top: 2px;
    font-size: 0.76rem;
    line-height: 1.45;
    color: var(--staff-muted);
}

body.staff-app .account-setting-option-chevron {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--staff-surface);
    border: 1px solid var(--staff-border-soft);
    color: var(--staff-muted);
    font-size: 0.7rem;
    transition: background 0.18s ease, color 0.18s ease, transform 0.18s ease;
}

body.staff-app .account-setting-option:hover .account-setting-option-chevron,
body.staff-app .account-setting-option:focus-visible .account-setting-option-chevron {
    background: var(--staff-accent-soft);
    color: var(--staff-accent-strong);
    transform: translateX(2px);
}

body.staff-app .account-setting-option-danger .account-setting-option-icon {
    background: rgba(220, 38, 38, 0.12);
    color: var(--staff-danger);
    box-shadow: inset 0 0 0 1px rgba(220, 38, 38, 0.2);
}

body.staff-app .account-setting-option-danger .account-setting-option-text strong {
    color: var(--staff-danger);
}

body.staff-app .account-setting-option-danger:hover,
body.staff-app .account-setting-option-danger:focus-visible {
    background: rgba(220, 38, 38, 0.1);
}

body.staff-app .account-setting-option-danger:active {
    background: rgba(220, 38, 38, 0.14);
}

body.staff-app .account-settings-message {
    margin-top: 14px;
    padding: 10px 14px;
    border-radius: 10px;
    background: var(--staff-surface-soft);
    border: 1px solid var(--staff-border);
    color: var(--staff-accent-strong);
    font-size: 0.8rem;
    font-weight: 600;
}

/* ---------- Two-factor (TOTP) setup modal ---------- */
body.staff-app .totp-scan-body {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

body.staff-app .totp-qr-container {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 14px;
    margin: 4px 0 6px;
    background: #fff;
    border: 1px solid var(--staff-border);
    border-radius: 12px;
    min-height: 120px;
}

body.staff-app .totp-qr-container img {
    display: block;
    width: 180px;
    height: 180px;
    image-rendering: pixelated;
}

body.staff-app .totp-qr-fallback {
    font-size: 0.8rem;
    text-align: center;
    color: var(--staff-muted);
    margin: 0;
}

body.staff-app .totp-scan-body label {
    font-size: 0.76rem;
    font-weight: 700;
    color: var(--staff-muted);
}

body.staff-app .totp-manual-key {
    width: 100%;
    padding: 10px 12px;
    font-family: "Roboto Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.85rem;
    letter-spacing: 0.12em;
    text-align: center;
    color: var(--staff-accent-strong);
    background: var(--staff-surface-soft);
    border: 1px solid var(--staff-border);
    border-radius: 8px;
    cursor: text;
    user-select: all;
}

/* The "Add Staff Account" trigger and its card sit in the same flat system as
   the dashboard list below them: solid button, thin-border card. */
body.staff-app #account-management .add-staff-btn {
    background: var(--staff-accent-strong);
    border-radius: 8px;
    box-shadow: none;
    font-weight: 800;
}

body.staff-app #account-management .add-staff-btn:hover {
    background: var(--staff-accent);
    transform: none;
    box-shadow: none;
    filter: none;
}

body.staff-app #account-management .add-staff-btn:active {
    transform: none;
}

/* ---------- Account change wizard modal (Facebook flat style) ---------- */
#accountChangeModal.account-change-modal {
    background: rgba(88, 101, 112, 0.6);
}

.account-change-modal-box {
    position: relative;
    width: 100%;
    max-width: 460px;
    background: var(--staff-surface);
    border: 1px solid var(--staff-border);
    border-radius: 12px;
    padding: 26px 28px 22px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
}

.account-change-modal-close {
    position: absolute;
    top: 14px;
    right: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: none;
    background: none;
    border-radius: 50%;
    color: var(--staff-muted);
    font-size: 16px;
    line-height: 1;
    cursor: pointer;
    transition: color 0.15s ease, background 0.15s ease;
}

.account-change-modal-close:hover {
    color: var(--staff-text);
    background: var(--staff-surface-soft);
}

/* Stepper header */
.acm-progress {
    display: flex;
    align-items: flex-start;
    margin: 20px 0 22px;
}

.acm-progress-step {
    flex: 1 1 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    min-width: 0;
}

.acm-progress-dot {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--staff-surface-2);
    border: 2px solid var(--staff-border);
    color: transparent;
    font-size: 0.68rem;
    font-weight: 800;
    transition: background 0.25s ease, border-color 0.25s ease, color 0.25s ease;
}

.acm-progress-label {
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--staff-faint);
    transition: color 0.25s ease;
}

.acm-progress-step.is-active .acm-progress-label {
    color: var(--staff-text);
}

.acm-progress-step.is-current .acm-progress-dot {
    border-color: var(--staff-accent);
    box-shadow: 0 0 0 4px rgba(43, 174, 102, 0.12);
}

.acm-progress-step.is-active .acm-progress-dot {
    background: var(--staff-accent-soft);
    color: var(--staff-accent-strong);
    border-color: var(--staff-accent);
}

.acm-progress-step.is-done .acm-progress-dot {
    background: var(--staff-accent-strong);
    border-color: transparent;
    color: #fff;
}

.acm-progress-connector {
    flex: 1 1 0;
    height: 2px;
    background: var(--staff-border);
    border-radius: 2px;
    margin-top: 12px;
    min-width: 16px;
}

/* Step body */
.account-change-modal-box .acm-step[hidden] {
    display: none;
}

.acm-step {
    display: flex;
    flex-direction: column;
    animation: acm-step-in 0.22s ease;
}

@keyframes acm-step-in {
    from {
        opacity: 0;
        transform: translateY(6px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.acm-step-heading {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 10px;
}

.acm-step-heading h3 {
    margin: 0;
    font-size: 1.12rem;
    font-weight: 800;
    letter-spacing: -0.01em;
    color: var(--staff-text);
}

.acm-step-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 34px;
    height: 34px;
    border-radius: 9px;
    background: var(--staff-accent-soft);
    color: var(--staff-accent-strong);
    font-size: 0.9rem;
}

.acm-step-description {
    margin: 0 0 18px;
    font-size: 0.84rem;
    line-height: 1.55;
    color: var(--staff-muted);
}

.acm-field {
    margin-bottom: 4px;
}

.account-change-modal-box .floating-field input,
.account-change-modal-box .floating-field select {
    border-radius: 8px;
}

.acm-field-code input {
    text-align: center;
    font-size: 1.5rem;
    font-weight: 800;
    letter-spacing: 12px;
    font-variant-numeric: tabular-nums;
    color: var(--staff-accent-strong);
}

.acm-field-code input::placeholder {
    letter-spacing: 8px;
    font-weight: 700;
}

.acm-error {
    margin: 4px 0 0;
    padding: 8px 12px;
    border-radius: 8px;
    background: rgba(220, 38, 38, 0.08);
    color: var(--staff-danger);
    font-size: 0.78rem;
    font-weight: 600;
    line-height: 1.4;
}

.acm-error[hidden] {
    display: none;
}

.acm-status {
    margin: 4px 0 0;
    padding: 8px 12px;
    border-radius: 8px;
    background: var(--staff-accent-soft);
    color: var(--staff-accent-strong);
    font-size: 0.78rem;
    font-weight: 700;
    line-height: 1.4;
}

.acm-status[hidden] {
    display: none;
}

.acm-actions {
    display: flex;
    gap: 10px;
    margin-top: 16px;
}

.acm-actions-single {
    justify-content: flex-end;
}

.account-change-modal-box .acm-btn-cancel {
    flex: 1;
    padding: 11px 14px;
    border: 1px solid var(--staff-border);
    background: var(--staff-surface-2);
    color: var(--staff-muted);
    border-radius: 8px;
    font-size: 0.88rem;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.account-change-modal-box .acm-btn-cancel:hover:not(:disabled) {
    background: var(--staff-accent-softer);
    color: var(--staff-text);
    border-color: var(--staff-border-soft);
}

.account-change-modal-box .acm-btn-primary {
    flex: 2;
    padding: 11px 14px;
    border: none;
    background: var(--staff-accent-strong);
    color: #fff;
    border-radius: 8px;
    font-size: 0.88rem;
    font-weight: 800;
    letter-spacing: 0.01em;
    cursor: pointer;
    transition: background 0.15s ease, filter 0.15s ease;
}

.account-change-modal-box .acm-btn-primary:hover:not(:disabled) {
    background: var(--staff-accent);
}

.account-change-modal-box .acm-btn-cancel:disabled,
.account-change-modal-box .acm-btn-primary:disabled {
    opacity: 0.55;
    cursor: not-allowed;
    transform: none;
}

/* Resend row */
.acm-resend-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px dashed var(--staff-border);
}

.acm-resend-hint {
    font-size: 0.78rem;
    color: var(--staff-muted);
}

.account-change-modal-box .acm-resend-btn {
    width: auto;
    margin: 0;
    padding: 0;
    background: none;
    border: none;
    color: var(--staff-accent-strong);
    font-size: 0.78rem;
    font-weight: 800;
    text-decoration: underline;
    text-underline-offset: 3px;
    cursor: pointer;
}

.account-change-modal-box .acm-resend-btn:hover:not(:disabled) {
    color: var(--staff-accent);
}

.account-change-modal-box .acm-resend-btn:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}

/* Success step */
.account-change-modal-box .acm-success-heading {
    flex-direction: column;
    text-align: center;
    margin-bottom: 14px;
}

.account-change-modal-box .acm-success-icon {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: var(--staff-accent-strong);
    font-size: 1.8rem;
    margin-bottom: 6px;
    box-shadow: none;
}

.account-change-modal-box .acm-success-heading h3 {
    font-size: 1.2rem;
}

.account-change-modal-box .acm-success-heading + .acm-step-description {
    text-align: center;
    font-size: 0.86rem;
}

@media (max-width: 560px) {
    .account-change-modal-box {
        padding: 24px 18px 20px;
        border-radius: 12px;
    }

    .acm-progress-label {
        font-size: 0.6rem;
    }

    .account-settings-head,
    .account-setting-option {
        padding-left: 6px;
        padding-right: 6px;
    }
}

body.staff-app .account-list li.is-skeleton {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 15px 16px;
    background: none;
    border-bottom: 1px solid var(--staff-border-soft);
    border-radius: 0;
}

@media (max-width: 900px) {
    body.staff-app .account-list-item {
        flex-direction: row;
        flex-wrap: wrap;
    }

    body.staff-app .account-list-meta {
        align-items: flex-start;
    }
}

/* Account forms: the add-staff form, the staff edit panel, and the admin
   credentials panel share one card so the three roles finally read as a single
   component instead of three different forms. */
body.staff-app #accountForm,
body.staff-app #adminCredentialSettings,
body.staff-app #staffEditPanel {
    margin-top: 14px;
    padding: 16px;
    background: var(--staff-surface-2);
    border: 1px solid var(--staff-border);
    border-radius: 12px;
    box-shadow: var(--staff-shadow-sm);
}

body.staff-app #accountForm h3,
body.staff-app #adminCredentialSettings h3,
body.staff-app #staffEditPanel h3 {
    margin: 0 0 4px;
    color: var(--staff-text);
    font-size: 1.05rem;
}

body.staff-app #accountForm > p,
body.staff-app #adminCredentialSettings > p,
body.staff-app #staffEditPanel > p {
    margin: 0 0 12px;
    color: var(--staff-muted);
    font-size: 0.85rem;
}

/* ---------- Credentials: floating labels + helper text ---------- */
body.staff-app .floating-field {
    position: relative;
    display: block;
    grid-column: 1 / -1;
}

body.staff-app .floating-field input {
    width: 100%;
    padding: 24px 14px 10px;
    background: var(--staff-surface-2);
    border: 1px solid var(--staff-border);
    border-radius: 12px;
    color: var(--staff-text);
    box-sizing: border-box;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

body.staff-app .floating-field input:focus {
    border-color: var(--staff-accent);
    box-shadow: 0 0 0 3px rgba(43, 174, 102, 0.18);
    background: var(--staff-surface-2);
    outline: none;
}

body.staff-app .floating-field label {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--staff-muted);
    pointer-events: none;
    transition: top 0.18s ease, font-size 0.18s ease, color 0.18s ease, transform 0.18s ease;
    max-width: calc(100% - 28px);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

body.staff-app .floating-field input:focus + label,
body.staff-app .floating-field input:not(:placeholder-shown) + label {
    top: 10px;
    transform: none;
    font-size: 0.66rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--staff-accent-2);
}

body.staff-app .floating-field select {
    width: 100%;
    padding: 24px 14px 10px;
    background: var(--staff-surface-2);
    border: 1px solid var(--staff-border);
    border-radius: 12px;
    color: var(--staff-text);
    box-sizing: border-box;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

body.staff-app .floating-field select:focus {
    border-color: var(--staff-accent);
    box-shadow: 0 0 0 3px rgba(43, 174, 102, 0.18);
    outline: none;
}

/* A select always holds a value, so its label stays floated instead of
   resting over the selection text. */
body.staff-app .floating-field select + label {
    top: 10px;
    transform: none;
    font-size: 0.66rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--staff-accent-2);
}

body.staff-app .account-form .field-helper,
body.staff-app .floating-field .field-helper {
    display: block;
    margin-top: 6px;
    font-size: 0.72rem;
    line-height: 1.45;
    color: var(--staff-muted);
}

/* ---------- Trusted devices card ---------- */
body.staff-app .trusted-devices-card {
    margin-top: 22px;
    padding: 18px;
    background: var(--staff-surface-soft);
    border: 1px solid var(--staff-border);
    border-radius: 16px;
}

body.staff-app .trusted-devices-header h3 {
    margin: 0 0 4px;
    color: var(--staff-text);
    font-size: 1.05rem;
}

body.staff-app .trusted-devices-header p {
    margin: 0 0 14px;
    color: var(--staff-muted);
    font-size: 0.85rem;
}

body.staff-app .trusted-devices-list {
    display: grid;
    gap: 0;
    max-height: 340px;
    overflow-y: auto;
}

body.staff-app .trusted-device-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 4px;
    border-bottom: 1px solid var(--staff-border-soft);
}

body.staff-app .trusted-device-row:last-child {
    border-bottom: none;
}

body.staff-app .trusted-device-icon {
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    border-radius: 12px;
    background: var(--staff-accent-soft);
    color: var(--staff-accent-strong);
    font-size: 16px;
    flex-shrink: 0;
}

body.staff-app .trusted-device-meta {
    display: grid;
    gap: 2px;
    min-width: 0;
    flex: 1 1 auto;
}

body.staff-app .trusted-device-meta strong {
    color: var(--staff-text);
    font-size: 0.9rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

body.staff-app .trusted-device-meta span {
    color: var(--staff-muted);
    font-size: 0.75rem;
}

body.staff-app .trusted-device-status {
    display: inline-flex;
    align-items: center;
    border-radius: 999px;
    padding: 5px 11px;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    white-space: nowrap;
    flex-shrink: 0;
}

body.staff-app .trusted-device-status.is-current {
    background: rgba(22, 163, 74, 0.14);
    color: var(--staff-success);
    border: 1px solid rgba(22, 163, 74, 0.3);
}

body.staff-app .trusted-device-status.is-trusted {
    background: var(--staff-accent-soft);
    color: var(--staff-accent-strong);
    border: 1px solid rgba(43, 174, 102, 0.3);
}

body.staff-app .trusted-device-revoke {
    flex-shrink: 0;
    border: 1px solid rgba(220, 38, 38, 0.4);
    background: rgba(220, 38, 38, 0.1);
    color: var(--staff-danger);
    border-radius: 9px;
    padding: 7px 12px;
    font-size: 0.72rem;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}

body.staff-app .trusted-device-revoke:hover {
    background: var(--staff-danger);
    color: #fff;
    border-color: var(--staff-danger);
}

/* Loading state while a revoke request is in flight (spinner via ::after). */
body.staff-app .trusted-device-revoke:disabled {
    opacity: 0.65;
    cursor: not-allowed;
}

body.staff-app .trusted-device-revoke.is-loading {
    background: var(--staff-danger);
    color: #fff;
    border-color: var(--staff-danger);
}

body.staff-app .trusted-device-revoke.is-loading::after {
    content: '';
    display: inline-block;
    width: 0.72em;
    height: 0.72em;
    margin-left: 7px;
    border: 2px solid rgba(255, 255, 255, 0.4);
    border-top-color: #fff;
    border-radius: 50%;
    vertical-align: -0.1em;
    animation: trusted-device-revoke-spin 0.7s linear infinite;
}

@keyframes trusted-device-revoke-spin {
    to {
        transform: rotate(360deg);
    }
}

/* Loading state for the highlights upload button while images are being
   prepared and sent to the server. */
body.staff-app #highlightsForm button[type="submit"]:disabled {
    opacity: 0.65;
    cursor: not-allowed;
}

body.staff-app #highlightsForm button[type="submit"].is-loading::after {
    content: '';
    display: inline-block;
    width: 0.8em;
    height: 0.8em;
    margin-left: 8px;
    border: 2px solid rgba(255, 255, 255, 0.4);
    border-top-color: #fff;
    border-radius: 50%;
    vertical-align: -0.12em;
    animation: trusted-device-revoke-spin 0.7s linear infinite;
}

/* ---------- Generic button loading state ----------
   Applied via setButtonLoading() to every staff dashboard action button.
   The spinner is overlaid dead-center so it never shifts the button label;
   existing bespoke loading styles (trusted dev revoke, highlights upload)
   keep their own higher-specificity rules. */
body.staff-app button.btn-loading {
    position: relative;
    pointer-events: none;
    cursor: wait;
    opacity: 0.82;
}

body.staff-app button.btn-loading::after {
    content: '';
    position: absolute;
    inset: 0;
    margin: auto;
    width: 0.9em;
    height: 0.9em;
    border: 2px solid currentColor;
    border-top-color: transparent;
    border-radius: 50%;
    animation: staff-btn-loading-spin 0.7s linear infinite;
}

@keyframes staff-btn-loading-spin {
    to {
        transform: rotate(360deg);
    }
}

body.staff-app #highlightsImagesInput:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

body.staff-app .trusted-devices-empty {
    color: var(--staff-muted);
    font-size: 0.85rem;
}

/* ---------- Loading placeholders (skeletons) ---------- */
/* Shimmering rows for the Login Logs cards, which are fetched when the section
   opens. The placeholder reuses the real row/table layout so nothing shifts
   once the data lands. The global prefers-reduced-motion rule below turns the
   shimmer off for users who ask for that. */
body.staff-app .skeleton-line {
    display: block;
    height: 10px;
    border-radius: 999px;
    background: linear-gradient(
        90deg,
        var(--staff-accent-softer) 20%,
        var(--staff-accent-soft) 45%,
        var(--staff-accent-softer) 70%
    );
    background-size: 300% 100%;
    animation: staff-skeleton-shimmer 1.4s ease-in-out infinite;
}

body.staff-app .skeleton-line.is-short {
    width: 30%;
}

body.staff-app .skeleton-line.is-medium {
    width: 52%;
}

body.staff-app .skeleton-line.is-long {
    width: 76%;
}

/* Stands in for the 38px device icon. */
body.staff-app .skeleton-line.is-avatar {
    width: 38px;
    height: 38px;
    border-radius: 12px;
    flex-shrink: 0;
}

/* Stands in for the Current Device / Verified pill, an Edit button, or a
   pending-order status tag. */
body.staff-app .skeleton-line.is-pill {
    width: 84px;
    height: 24px;
    flex-shrink: 0;
}

/* Button-shaped placeholder for the pending-order card action row. */
body.staff-app .skeleton-action-row {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

body.staff-app .skeleton-line.is-button {
    flex: 1 1 96px;
    height: 36px;
    border-radius: 12px;
}

body.staff-app .skeleton-order-items {
    display: grid;
    gap: 10px;
}

/* Real cards vary with the number of items and whether a prep timer is
   running, so the placeholder just stays in the same height range (a typical
   card measures ~380px) and the list does not jump when the data lands. */
body.staff-app .pending-order-card.is-skeleton {
    min-height: 330px;
}

/* Muted "Loading …" captions that accompany the placeholders. The account-list
   one is a list item, so it must not inherit the row card. */
body.staff-app .pending-orders-loading-note,
body.staff-app .account-list-note {
    margin: 0;
    padding: 0;
    color: var(--staff-muted);
    font-size: 0.78rem;
    text-align: center;
}

body.staff-app .account-list li.account-list-note {
    display: block;
    justify-content: center;
    background: none;
    border: none;
    box-shadow: none;
    text-align: center;
}

@keyframes staff-skeleton-shimmer {
    from {
        background-position: 130% 50%;
    }

    to {
        background-position: -30% 50%;
    }
}

/* The two placeholder lines need more room than the 2px the real meta text
   stack uses. */
body.staff-app .trusted-device-row.is-skeleton .trusted-device-meta {
    gap: 6px;
}

/* Match the height of a real history row (43px) so the table does not jump. */
body.staff-app .login-history-table.is-skeleton td {
    padding-top: 16px;
    padding-bottom: 16px;
}

body.staff-app .login-history-loading-note,
body.staff-app .trusted-devices-loading-note {
    margin: 10px 0 0;
    color: var(--staff-muted);
    font-size: 0.78rem;
}

/* ---------- Device verification modal ---------- */
body.staff-app .device-verify-modal {
    background: #ffffff;
    border: 1px solid var(--staff-border);
    border-radius: 18px;
    color: var(--staff-text);
    box-shadow: var(--staff-shadow-lg);
}

body.staff-app .device-verify-modal h2 {
    color: var(--staff-text);
}

body.staff-app .device-verify-modal p {
    color: var(--staff-muted);
}

body.staff-app .device-verify-modal label {
    color: var(--staff-muted);
    font-size: 0.85rem;
    font-weight: 600;
}

body.staff-app .device-verify-modal input[type="text"] {
    width: 100%;
    box-sizing: border-box;
    padding: 12px 14px;
    background: var(--staff-surface-2);
    border: 1px solid var(--staff-border);
    border-radius: 12px;
    color: var(--staff-text);
    letter-spacing: 0.2em;
    font-size: 1.05rem;
    font-weight: 700;
    text-align: center;
}

body.staff-app .device-verify-modal input[type="text"]:focus {
    border-color: var(--staff-accent);
    box-shadow: 0 0 0 3px rgba(43, 174, 102, 0.18);
    outline: none;
}

body.staff-app .device-verify-actions {
    display: flex;
    gap: 10px;
    margin-top: 18px;
}

body.staff-app .device-verify-actions button {
    flex: 1;
}

body.staff-app .device-verify-modal .modal-close {
    color: var(--staff-muted);
}

body.staff-app .device-verify-modal .modal-close:hover {
    color: var(--staff-danger);
}

/* The invite confirmation modal reuses .device-verify-modal for its shared
   look; this block only adds the bits specific to the invite flow. */
body.staff-app .invite-verify-modal input[type="text"] {
    letter-spacing: 0.2em;
    font-size: 1.05rem;
    font-weight: 700;
    text-align: center;
}

body.staff-app .invite-verify-modal .menu-order-message.is-error,
body.staff-app .device-verify-modal .menu-order-message.is-error {
    color: var(--staff-danger);
    font-weight: 600;
}

/* ---------- Reusable notice modal (replaces native alert) ---------- */
body.staff-app .notice-modal {
    background: #ffffff;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border: 1px solid var(--staff-border);
    border-radius: 18px;
    color: var(--staff-text);
    box-shadow: var(--staff-shadow-lg);
    text-align: center;
    padding: 30px 28px;
}

body.staff-app .notice-modal h2 {
    color: var(--staff-text);
}

body.staff-app .notice-modal p {
    color: var(--staff-muted);
    font-size: 0.95rem;
    line-height: 1.5;
}

body.staff-app .notice-modal p.is-error {
    color: var(--staff-danger);
    font-weight: 600;
}

body.staff-app .notice-modal .device-verify-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    justify-content: center;
    margin-top: 28px;
}

body.staff-app .notice-modal .device-verify-actions button {
    flex: 1 1 0;
    min-width: 0;
    padding: 13px 18px;
    border-radius: 12px;
    font-size: 0.95rem;
    font-weight: 700;
    line-height: 1.2;
}

/* The notice modal has a single OK button, which would otherwise sit in the
   left column of the two-column grid above. Span both columns and center it
   so it lines up with the icon, title and message. */
body.staff-app .notice-modal .device-verify-actions button:only-child {
    grid-column: 1 / -1;
    justify-self: center;
    max-width: 220px;
    width: 100%;
}

body.staff-app .notice-modal .secondary-btn {
    background: #ffffff;
    color: #111827;
    border: 1px solid rgba(15, 23, 42, 0.36);
    box-shadow: none;
}

body.staff-app .notice-modal .secondary-btn:hover {
    background: #f8fafc;
    color: #111827;
    border-color: rgba(15, 23, 42, 0.48);
}

body.staff-app .notice-modal .modal-close {
    color: var(--staff-muted);
}

body.staff-app .notice-modal .modal-close:hover {
    color: var(--staff-danger);
}

/* ---------- Payment collection modal (mark-order-complete) ---------- */
body.staff-app .modal-overlay#paymentModal {
    z-index: 1200;
}

body.staff-app .payment-modal {
    background: #ffffff;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border: 1px solid var(--staff-border);
    border-radius: 18px;
    color: var(--staff-text);
    box-shadow: var(--staff-shadow-lg);
    text-align: left;
    padding: 28px 26px;
}

body.staff-app .payment-modal h2 {
    color: var(--staff-text);
    margin-top: 0;
    text-align: center;
}

body.staff-app .payment-modal-hint {
    color: var(--staff-muted);
    font-size: 0.92rem;
    line-height: 1.5;
    margin: 4px 0 18px;
    text-align: center;
}

body.staff-app .payment-modal-total {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 14px;
    margin-bottom: 16px;
    background: var(--staff-surface-soft);
    border: 1px solid var(--staff-border);
    border-radius: 12px;
}

body.staff-app .payment-modal-total span {
    color: var(--staff-muted);
    font-weight: 600;
    font-size: 0.92rem;
}

body.staff-app .payment-modal-total strong {
    color: var(--staff-text);
    font-size: 1.1rem;
}

body.staff-app .payment-modal-field {
    display: grid;
    gap: 6px;
}

body.staff-app .payment-modal-field > span {
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--staff-text);
}

body.staff-app .payment-modal-field input[type="number"] {
    width: 100%;
    padding: 12px 14px;
    border: 1px solid var(--staff-border);
    border-radius: 10px;
    background: #ffffff;
    color: var(--staff-text);
    font-size: 1.15rem;
    font-weight: 700;
    box-sizing: border-box;
}

body.staff-app .payment-modal-field input[type="number"]:focus {
    outline: 2px solid rgba(16, 185, 129, 0.40);
    outline-offset: -1px;
    border-color: transparent;
}

body.staff-app .payment-modal-error {
    color: var(--staff-danger);
    font-weight: 600;
    font-size: 0.88rem;
    line-height: 1.4;
    margin: 8px 0 0;
}

body.staff-app .payment-modal-change {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 14px;
    padding: 12px 14px;
    border-radius: 12px;
    background: rgba(16, 185, 129, 0.10);
    border: 1px solid rgba(16, 185, 129, 0.35);
}

body.staff-app .payment-modal-change span {
    color: var(--staff-muted);
    font-weight: 600;
    font-size: 0.92rem;
}

body.staff-app .payment-modal-change strong {
    color: #047857;
    font-size: 1.1rem;
}

body.staff-app .payment-modal .device-verify-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    justify-content: center;
    margin-top: 24px;
}

body.staff-app .payment-modal .device-verify-actions button {
    flex: 1 1 0;
    min-width: 0;
    padding: 13px 18px;
    border-radius: 12px;
    font-size: 0.95rem;
    font-weight: 700;
    line-height: 1.2;
}

body.staff-app .payment-modal .secondary-btn {
    background: #ffffff;
    color: #111827;
    border: 1px solid rgba(15, 23, 42, 0.36);
    box-shadow: none;
}

body.staff-app .payment-modal .secondary-btn:hover {
    background: #f8fafc;
    color: #111827;
    border-color: rgba(15, 23, 42, 0.48);
}

body.staff-app .payment-modal .modal-close {
    color: var(--staff-muted);
}

body.staff-app .payment-modal .modal-close:hover {
    color: var(--staff-danger);
}

/* Icon inside the notice / confirm modals. */
body.staff-app .notice-modal-icon {
    width: 64px;
    height: 64px;
    margin: 0 auto 14px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    background: rgba(16, 185, 129, 0.14);
    color: #10b981;
}

body.staff-app .notice-modal-icon.is-error {
    background: rgba(220, 38, 38, 0.12);
    color: var(--staff-danger);
}

body.staff-app .confirm-modal-icon {
    background: rgba(220, 38, 38, 0.12);
    color: var(--staff-danger);
}

/* Destructive confirm button (red instead of the green primary). */
body.staff-app .confirm-danger-btn {
    background: linear-gradient(135deg, #f56565, #e11d48) !important;
    color: #fff !important;
    border: none !important;
    box-shadow: 0 10px 20px rgba(225, 29, 72, 0.22) !important;
}

body.staff-app .confirm-danger-btn:hover:not(:disabled) {
    background: linear-gradient(135deg, #ef4444, #dc2626) !important;
    box-shadow: 0 14px 26px rgba(225, 29, 72, 0.30) !important;
}

/* Countdown bar shown on auto-dismissing success notices. */
body.staff-app .notice-auto-close-bar {
    position: absolute;
    left: 0;
    bottom: 0;
    height: 4px;
    border-radius: 0 0 18px 18px;
    background: linear-gradient(90deg, #10b981, #34d399);
    transform-origin: left;
}

body.staff-app .notice-auto-close-bar.animating {
    animation: notice-auto-close 4s linear forwards;
}

@keyframes notice-auto-close {
    from {
        transform: scaleX(1);
    }
    to {
        transform: scaleX(0);
    }
}

@media (prefers-reduced-motion: reduce) {
    body.staff-app .notice-auto-close-bar.animating {
        animation-duration: 0.001s;
    }
}

/* ---------- Shared buttons / inputs ---------- */
body.staff-app .add-staff-btn, body.staff-app .account-form button, body.staff-app .menu-place-order-btn {
    background: linear-gradient(135deg, var(--staff-accent-2), var(--staff-accent-strong));
    color: #fff;
    border: none;
    border-radius: 12px;
    font-weight: 700;
    box-shadow: 0 8px 20px rgba(43, 174, 102, 0.3);
    transition: transform 0.18s ease, box-shadow 0.18s ease, filter 0.18s ease;
}

body.staff-app .add-staff-btn:hover, body.staff-app .account-form button:hover, body.staff-app .menu-place-order-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 14px 30px rgba(43, 174, 102, 0.42);
    filter: brightness(1.05);
}

body.staff-app .secondary-btn {
    background: var(--staff-surface-2);
    color: var(--staff-text);
    border: 1px solid var(--staff-border);
    font-weight: 600;
}

body.staff-app .secondary-btn:hover {
    background: var(--staff-accent-soft);
    color: var(--staff-accent-strong);
    border-color: var(--staff-accent);
}

/* The section's trigger button (Add Staff Account) matches the action-row buttons
   so every control in the section is one size. The admin panel's two credential
   flows are switched with .admin-edit-mode-btn instead. */
body.staff-app .add-staff-btn {
    padding: 11px 18px;
    border-radius: 12px;
    font-size: 0.95rem;
    line-height: 1.2;
}

/* Shared action row for every account form: the primary action sits next to a
   neutral Cancel (or alone, full width) instead of a stack of identical green
   buttons. */
body.staff-app .account-form-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    grid-column: 1 / -1;
    margin-top: 2px;
}

body.staff-app .account-form-actions button {
    flex: 1 1 0;
    width: auto;
    min-width: 150px;
    padding: 12px 16px;
    border-radius: 12px;
    border: none;
    font-size: 0.95rem;
    font-weight: 700;
    line-height: 1.2;
    cursor: pointer;
    transition: transform 0.18s ease, box-shadow 0.18s ease, filter 0.18s ease,
        background 0.18s ease, border-color 0.18s ease, color 0.18s ease;
}

/* Explicit colors so a Cancel never inherits the primary green from
   .account-form button. */
body.staff-app .account-form-actions button[type="submit"] {
    background: linear-gradient(135deg, var(--staff-accent-2), var(--staff-accent-strong));
    color: #fff;
    box-shadow: 0 8px 20px rgba(43, 174, 102, 0.3);
}

body.staff-app .account-form-actions button[type="submit"]:hover:not(:disabled) {
    transform: translateY(-2px);
    box-shadow: 0 14px 30px rgba(43, 174, 102, 0.42);
    filter: brightness(1.05);
}

body.staff-app .account-form-actions .secondary-btn {
    background: #ffffff;
    color: var(--staff-text);
    border: 1px solid var(--staff-border);
    box-shadow: none;
}

body.staff-app .account-form-actions .secondary-btn:hover {
    background: var(--staff-accent-soft);
    color: var(--staff-accent-strong);
    border-color: var(--staff-accent);
    transform: translateY(-2px);
}

/* Panel-level Cancel row sits below the active mode's form. Keep it compact
   rather than stretching it to the width of the primary actions. */
body.staff-app #adminCredentialSettings > .account-form-actions {
    margin-top: 12px;
}

body.staff-app #adminCredentialSettings > .account-form-actions button {
    flex: 0 1 auto;
    min-width: 150px;
}

body.staff-app .account-form {
    grid-template-columns: 1fr;
}

body.staff-app .account-form input,
body.staff-app .account-form select,
body.staff-app .inventory-search-field input,
body.staff-app .inventory-form-grid input,
body.staff-app .inventory-form-grid select,
body.staff-app .inventory-form-grid textarea,
body.staff-app .walkin-order-builder input,
body.staff-app .walkin-order-builder select,
body.staff-app .walkin-order-footer select,
body.staff-app .nested-select,
body.staff-app .analytics-select {
    background: var(--staff-surface-2);
    border: 1px solid var(--staff-border);
    color: var(--staff-text);
    border-radius: 12px;
    padding: 12px 14px;
    box-sizing: border-box;
}

/* Floating-label fields must keep their taller top padding: the shared rule
   above has the same specificity but comes later, so without this it flattens
   the padding and the floated label ends up drawn over a filled field's value. */
body.staff-app .account-form .floating-field input,
body.staff-app .account-form .floating-field select {
    padding: 24px 14px 10px;
}

body.staff-app .account-form input:focus,
body.staff-app .account-form select:focus,
body.staff-app .inventory-search-field input:focus,
body.staff-app .inventory-form-grid input:focus,
body.staff-app .inventory-form-grid select:focus,
body.staff-app .inventory-form-grid textarea:focus,
body.staff-app .walkin-order-builder input:focus,
body.staff-app .walkin-order-builder select:focus,
body.staff-app .walkin-order-footer select:focus,
body.staff-app .nested-select:focus,
body.staff-app .analytics-select:focus {
    border-color: var(--staff-accent);
    box-shadow: 0 0 0 3px rgba(43, 174, 102, 0.18);
    outline: none;
}

body.staff-app .modal-overlay {
    background: rgba(30, 41, 39, 0.45);
}

/* Highlights */
body.staff-app .highlight-item-card {
    background: var(--staff-surface-2);
    border: 1px solid var(--staff-border);
    border-radius: 14px;
    box-shadow: var(--staff-shadow-sm);
}

/* ---------- Low stock modal ---------- */
body.staff-app .low-stock-modal {
    background: #ffffff;
    border: 1px solid var(--staff-border);
    color: var(--staff-text);
    box-shadow: var(--staff-shadow-lg);
}

body.staff-app .low-stock-modal h2,
body.staff-app .low-stock-modal p {
    color: var(--staff-text);
}

body.staff-app .low-stock-dropdown {
    background: var(--staff-surface-2);
    border: 1px solid var(--staff-border);
    color: var(--staff-text);
}

body.staff-app .low-stock-item {
    background: var(--staff-surface-soft);
    border: 1px solid var(--staff-border);
    color: var(--staff-text);
}

body.staff-app .low-stock-item strong {
    color: var(--staff-warn);
}

body.staff-app .low-stock-action-btn.secondary {
    background: var(--staff-surface-2);
    color: var(--staff-text);
    border: 1px solid var(--staff-border);
}

body.staff-app .modal-close {
    color: var(--staff-muted);
}

body.staff-app .modal-close:hover {
    color: var(--staff-danger);
}

/* ---------- Login box (staff.html login card) ---------- */
body.staff-app .staff-box {
    background: #ffffff;
    border: 1px solid var(--staff-border);
    border-radius: 28px;
    box-shadow: 0 30px 80px rgba(23, 87, 54, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.9);
    color: var(--staff-text);
    padding: 40px 38px 34px;
}

body.staff-app .staff-box::before {
    content: "\f3ed";
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    display: grid;
    place-items: center;
    width: 64px;
    height: 64px;
    margin: 0 auto 20px;
    border-radius: 20px;
    background:
        radial-gradient(120% 120% at 18% 0%, rgba(255, 255, 255, 0.32), transparent 55%),
        linear-gradient(135deg, var(--staff-accent-2), var(--staff-accent-strong));
    color: #fff;
    font-size: 24px;
    border: 1px solid rgba(255, 255, 255, 0.35);
    box-shadow: 0 14px 30px rgba(43, 174, 102, 0.38), inset 0 1px 0 rgba(255, 255, 255, 0.25);
}

body.staff-app .staff-box h2 {
    color: var(--staff-text);
    text-align: center;
    font-weight: 800;
    font-size: 1.55rem;
    letter-spacing: -0.02em;
    margin: 0 0 26px;
}

/* Surface-specific login branding (admin vs staff portal). The icon swap is
   driven by the surface-* classes set in applyLoginSurface(). */
body.staff-app .login-surface-badge {
    display: flex;
    justify-content: center;
    width: fit-content;
    margin: 0 auto 20px;
    padding: 5px 12px;
    border-radius: 999px;
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--staff-accent-strong);
    background: var(--staff-accent-softer);
    border: 1px solid rgba(43, 174, 102, 0.22);
}

body.staff-app.surface-staff .staff-box::before {
    content: "\f2e7";
}

body.staff-app.surface-admin .staff-box::before {
    content: "\f3ed";
}

body.staff-app .staff-box label {
    color: var(--staff-muted);
    font-weight: 700;
    font-size: 0.76rem;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    display: flex;
    align-items: center;
    gap: 7px;
}

body.staff-app .staff-box label i {
    color: var(--staff-accent);
    font-size: 0.84rem;
    width: 16px;
    text-align: center;
}

body.staff-app .staff-box input {
    background: var(--staff-surface-2);
    border: 1.5px solid var(--staff-border);
    color: var(--staff-text);
    border-radius: 12px;
    padding: 12px 14px;
    font-size: 0.95rem;
    transition: border-color 0.18s ease, box-shadow 0.18s ease;
}

body.staff-app .staff-box input::placeholder {
    color: var(--staff-faint);
    opacity: 1;
}

body.staff-app .staff-box input:hover:not(:focus) {
    border-color: rgba(43, 174, 102, 0.45);
}

body.staff-app .staff-box input:focus {
    border-color: var(--staff-accent);
    box-shadow: 0 0 0 4px var(--staff-accent-softer);
    outline: none;
}

body.staff-app .staff-box button[type="submit"] {
    background: linear-gradient(135deg, var(--staff-accent-2), var(--staff-accent-strong));
    color: #fff;
    border: none;
    border-radius: 12px;
    font-weight: 700;
    font-size: 0.95rem;
    letter-spacing: 0.02em;
    padding: 13px 16px;
    margin-top: 4px;
    box-shadow: 0 10px 24px rgba(43, 174, 102, 0.35);
}

body.staff-app .staff-box button[type="submit"]:hover {
    transform: translateY(-2px);
    box-shadow: 0 16px 34px rgba(43, 174, 102, 0.45);
    filter: brightness(1.05);
}

body.staff-app .staff-box .remember-row {
    margin-top: 2px;
}

body.staff-app .staff-box .remember-row label {
    color: var(--staff-muted);
    text-transform: none;
    letter-spacing: normal;
    font-size: 0.86rem;
    font-weight: 600;
}

body.staff-app .staff-box .remember-row input[type="checkbox"] {
    width: 16px;
    height: 16px;
    accent-color: var(--staff-accent);
    cursor: pointer;
}

body.staff-app .staff-legal-links {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 8px;
    margin: 20px 0 0;
    font-size: 0.8rem;
}

body.staff-app .staff-legal-links a {
    color: var(--staff-muted);
    text-decoration: none;
    transition: color 0.15s ease;
}

body.staff-app .staff-legal-links a:hover {
    color: var(--staff-accent-strong);
    text-decoration: underline;
}

body.staff-app .password-toggle-btn {
    color: var(--staff-muted);
}

body.staff-app .password-toggle-btn:hover {
    color: var(--staff-accent-2);
}

body.staff-app .login-dark-overlay {
    background:
        radial-gradient(1200px 620px at 12% -12%, rgba(43, 174, 102, 0.16), transparent 60%),
        radial-gradient(1000px 560px at 108% 112%, rgba(30, 143, 82, 0.14), transparent 55%),
        linear-gradient(180deg, #FCF6F5 0%, #F1F7F1 100%);
}

/* Soft ambient orbs behind the login card for depth. */
body.staff-app .staff-login-page::before,
body.staff-app .staff-login-page::after {
    content: "";
    position: absolute;
    border-radius: 50%;
    filter: blur(70px);
    pointer-events: none;
    z-index: 0;
}

body.staff-app .staff-login-page::before {
    width: 460px;
    height: 460px;
    left: -150px;
    top: -130px;
    background: rgba(43, 174, 102, 0.18);
}

body.staff-app .staff-login-page::after {
    width: 420px;
    height: 420px;
    right: -130px;
    bottom: -150px;
    background: rgba(226, 160, 15, 0.13);
}

@media (max-width: 576px) {
    body.staff-app .staff-box {
        padding: 30px 22px 26px;
    }

    body.staff-app .staff-box::before {
        width: 56px;
        height: 56px;
        border-radius: 16px;
        font-size: 21px;
    }
}

/* ---------- Responsive (mobile-first) ---------- */
@media (min-width: 901px) {
    /* Desktop: keep the header clear of the always-open 320px dashboard panel */
    body.staff-app.auth .top-bar.login-top-bar {
        padding-left: 344px;
        padding-right: 24px;
    }
}

@media (max-width: 900px) {
    body.staff-app.auth .top-bar.login-top-bar {
        padding: 10px 16px 10px 60px;
        z-index: 1000;
    }

    body.staff-app .overview-section,
    body.staff-app .inventory-section,
    body.staff-app .orders-section,
    body.staff-app .sales-section,
    body.staff-app .account-management {
        width: calc(100% - 32px);
        padding: 18px;
        border-radius: 18px;
    }

    body.staff-app .review-filter-bar {
        width: 100%;
        justify-content: flex-start;
    }

    body.staff-app .review-filter-btn {
        flex: 1 1 auto;
        text-align: center;
        padding: 9px 10px;
    }

    body.staff-app .trusted-device-row {
        flex-wrap: wrap;
    }

    body.staff-app .trusted-device-revoke {
        margin-left: 50px;
    }

    body.staff-app .device-verify-actions {
        flex-direction: column;
    }
}

@media (max-width: 560px) {
    body.staff-app .metric-card {
        flex: 1 1 100% !important;
    }

    body.staff-app .staff-review-head {
        gap: 10px;
    }

    body.staff-app .staff-review-card .review-status-badge {
        margin-left: 52px;
    }

    body.staff-app .trusted-device-status {
        margin-left: 50px;
    }
}

/* Respect users who prefer reduced motion */
@media (prefers-reduced-motion: reduce) {
    body.staff-app * {
        animation: none !important;
        transition: none !important;
    }
}

/* ============================================================
   Customer live order status floating icon (beside the cart)
   ============================================================ */
.menu-right .menu-total-panel {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.order-status-float {
    /* Independently anchored beside the fixed cart FAB (bottom-right corner)
       so the icon stays visible while the page scrolls. */
    position: fixed;
    right: 98px;
    bottom: 26px;
    z-index: 1800;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.order-status-float[hidden] {
    display: none;
}

.order-status-float-btn {
    position: relative;
    width: 44px;
    height: 44px;
    border: none;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 17px;
    color: #fff;
    cursor: pointer;
    transition: transform 0.18s ease, box-shadow 0.18s ease;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.28);
}

.order-status-float-btn.is-waiting {
    background: linear-gradient(135deg, #f97316, #ef4444);
    animation: order-status-pulse 1.6s ease-in-out infinite;
}

.order-status-float-btn.is-preparing {
    background: linear-gradient(135deg, #3b82f6, #6366f1);
}

.order-status-float-btn:hover,
.order-status-float-btn:focus-visible {
    transform: scale(1.08);
}

@keyframes order-status-pulse {
    0%, 100% { box-shadow: 0 6px 18px rgba(0, 0, 0, 0.28), 0 0 0 0 rgba(239, 68, 68, 0.55); }
    50% { box-shadow: 0 6px 18px rgba(0, 0, 0, 0.28), 0 0 0 10px rgba(239, 68, 68, 0); }
}

.order-status-float-ping {
    position: absolute;
    top: -3px;
    right: -3px;
    width: 11px;
    height: 11px;
    border-radius: 50%;
    background: #22c55e;
    border: 2px solid #fff;
}

/* Circular countdown ring — wraps the icon and depletes as time runs out */
.order-status-ring {
    position: absolute;
    inset: -5px;
    width: 54px;
    height: 54px;
    transform: rotate(-90deg);
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.25s ease;
}

.order-status-float-btn.has-countdown .order-status-ring {
    opacity: 1;
}

.order-status-ring-track {
    fill: none;
    stroke: rgba(255, 255, 255, 0.22);
    stroke-width: 3;
}

.order-status-ring-fill {
    fill: none;
    stroke: #fff;
    stroke-width: 3;
    stroke-linecap: round;
    stroke-dasharray: 154;
    stroke-dashoffset: 0;
    transition: stroke-dashoffset 1s linear;
}

/* Live countdown chip — MM:SS text positioned inside a depleting loading bar */
.order-status-chip {
    position: relative;
    overflow: hidden;
    border-radius: 999px;
    min-width: 118px;
    max-width: min(46vw, 180px);
    padding: 7px 14px;
    text-align: center;
    background: #0f172a;
    border: 1px solid rgba(255, 255, 255, 0.16);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.28);
    cursor: pointer;
}

.order-status-chip[hidden] {
    display: none;
}

.order-status-chip-bar {
    position: absolute;
    inset: 0;
    z-index: 0;
    background: #0f172a;
    pointer-events: none;
}

.order-status-chip-bar-fill {
    display: block;
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, #2563eb, #6366f1);
    transition: width 1s linear;
}

.order-status-chip-bar-fill.is-done {
    background: linear-gradient(90deg, #b91c1c, #ef4444);
}

.order-status-chip-label {
    position: relative;
    z-index: 1;
    display: block;
    color: #fff;
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.3px;
    font-variant-numeric: tabular-nums;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.45);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.order-status-chip.is-waiting .order-status-chip-label {
    font-size: 0.72rem;
    opacity: 0.92;
}

.order-status-chip.is-done .order-status-chip-label {
    color: #fecaca;
}

.order-status-popover {
    position: absolute;
    right: 0;
    top: auto;
    /* The float always sits near the bottom edge (fixed), so the popover
       opens upward instead of falling off the bottom of the viewport. */
    bottom: calc(100% + 10px);
    width: 300px;
    max-width: 82vw;
    max-height: min(420px, calc(100vh - 96px));
    overflow-y: auto;
    background: #111827;
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 14px;
    padding: 14px;
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.35);
    z-index: 1900;
}

.order-status-popover[hidden] {
    display: none;
}

.order-status-popover-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
}

.order-status-popover-head strong {
    font-size: 0.9rem;
}

.order-status-close {
    border: none;
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    cursor: pointer;
    font-size: 14px;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.order-status-body {
    display: grid;
    gap: 10px;
}

.order-status-line {
    display: flex;
    align-items: center;
    gap: 12px;
}

.order-status-line > i {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    flex: none;
}

.order-status-line.is-waiting > i {
    background: rgba(239, 68, 68, 0.18);
    color: #f87171;
}

.order-status-line.is-preparing > i {
    background: rgba(99, 102, 241, 0.2);
    color: #a5b4fc;
}

.order-status-line > div {
    display: grid;
    gap: 2px;
    min-width: 0;
}

.order-status-line strong {
    font-size: 0.95rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.order-status-line span {
    font-size: 0.82rem;
    color: #cbd5e1;
}

.order-status-countdown {
    background: rgba(99, 102, 241, 0.14);
    border: 1px solid rgba(99, 102, 241, 0.35);
    color: #c7d2fe;
    border-radius: 10px;
    padding: 10px 12px;
    font-size: 0.9rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 8px;
}

.order-status-note {
    margin: 0;
    font-size: 0.78rem;
    color: #9ca3af;
}

@media (max-width: 900px) {
    .order-status-float {
        right: 86px;
        bottom: 24px;
    }
}

/* ============================================================
   Overview Order Notifications — view-only feed
   ============================================================ */
.order-notif-go-link {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    border: none;
    background: linear-gradient(135deg, #2bae66, #1f8a50);
    color: #ffffff;
    border-radius: 10px;
    padding: 9px 14px;
    font-size: 0.8rem;
    font-weight: 800;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(22, 122, 69, 0.25);
    transition: transform 0.15s ease, box-shadow 0.15s ease, filter 0.15s ease;
}

.order-notif-go-link:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(22, 122, 69, 0.32);
    filter: brightness(1.05);
}

.order-notif-badge.is-preparing {
    background: #e0e7ff;
    color: #4338ca;
}

.order-notif-badge.is-expired {
    background: #fef3c7;
    color: #92400e;
}

.order-notif-badge.is-cancelled {
    background: #f1f5f9;
    color: #475569;
}

.order-notif-badge.is-refunded {
    background: #fee2e2;
    color: #b91c1c;
}

.order-notif-prep {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: #4338ca !important;
    font-weight: 700;
    font-size: 0.82rem;
}

.order-notif-actions {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.order-notif-print-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border: 1px solid rgba(2, 132, 199, 0.4);
    background: rgba(2, 132, 199, 0.08);
    color: #0369a1;
    border-radius: 10px;
    padding: 9px 14px;
    font-size: 0.8rem;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.15s ease, transform 0.15s ease;
}

.order-notif-print-btn:hover {
    background: rgba(2, 132, 199, 0.16);
    transform: translateY(-1px);
}

/* ============================================================
   Orders → Order History (3-month track record)
   ============================================================ */
.order-history-panel {
    margin-top: 16px;
    display: grid;
    gap: 14px;
}

.order-history-controls {
    display: grid;
    gap: 12px;
    background: var(--staff-surface-2, #ffffff);
    border: 1px solid var(--staff-border, #e3ede6);
    border-radius: 16px;
    box-shadow: var(--staff-shadow-sm, none);
    padding: 16px 18px;
}

.order-history-controls-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}

.order-history-controls-head h4 {
    margin: 0;
    font-size: 0.95rem;
    font-weight: 800;
    color: var(--staff-text, #1F2A24);
}

.order-history-controls-row {
    display: flex;
    align-items: flex-end;
    gap: 12px;
    flex-wrap: wrap;
}

.order-history-field {
    display: grid;
    gap: 6px;
    font-weight: 700;
    color: var(--staff-text, #1F2A24);
    font-size: 0.82rem;
}

.order-history-field select {
    border: 1px solid var(--staff-border, #d4d4d4);
    border-radius: 10px;
    padding: 9px 12px;
    font-size: 0.95rem;
    min-width: 150px;
    color: var(--staff-text, #1F2A24);
    background: #ffffff;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.order-history-field select:hover {
    border-color: var(--staff-accent);
}

.order-history-limit {
    margin: 0;
    font-size: 0.8rem;
    color: var(--staff-muted, #64748b);
}

.order-history-list {
    display: grid;
    gap: 12px;
}

.order-history-card {
    background: var(--staff-surface-2, #fff);
    border: 1px solid var(--staff-border, #dfe6e2);
    border-left: 4px solid var(--staff-accent);
    border-radius: 16px;
    padding: 16px;
    display: grid;
    gap: 8px;
    color: var(--staff-text, #1F2A24);
    box-shadow: var(--staff-shadow-sm, none);
    transition: transform 0.16s ease, box-shadow 0.16s ease, border-color 0.16s ease;
}

.order-history-card:hover {
    transform: translateY(-1px);
    box-shadow: var(--staff-shadow-md, none);
    border-color: var(--staff-accent);
}

.order-history-card h4,
.order-history-card p {
    margin: 0;
}

.order-history-card .pending-order-top h4 {
    font-weight: 800;
    letter-spacing: -0.01em;
}

.order-history-item-list {
    list-style: none;
    padding: 0;
    margin: 4px 0 0;
    display: grid;
    gap: 6px;
}

.order-history-item {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 10px;
    font-size: 0.86rem;
    background: #F4F7F5;
    border: 1px solid #E3EAE6;
    border-radius: 10px;
    padding: 8px 10px;
}

.order-history-component {
    color: #36524A;
    font-weight: 600;
    background: rgba(43, 174, 102, 0.08);
    border-radius: 6px;
    padding: 3px 8px;
    margin-top: 2px;
}

.order-history-components {
    list-style: none;
    padding-left: 0 !important;
    margin-top: 2px;
    background: #F1F6F3;
    border: 1px solid #E0E9E3;
    border-radius: 8px;
    padding: 6px 8px;
}

.order-history-actions {
    display: flex;
    justify-content: flex-end;
    border-top: 1px solid var(--staff-border, #e5e7eb);
    padding-top: 10px;
    margin-top: 2px;
}

.order-history-print-btn {
    border: 1px solid rgba(2, 132, 199, 0.35);
    background: rgba(2, 132, 199, 0.08);
    color: #0369a1;
    border-radius: 10px;
    padding: 8px 14px;
    font-size: 0.8rem;
    font-weight: 700;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: background 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}

.order-history-print-btn:hover {
    background: rgba(2, 132, 199, 0.16);
    transform: translateY(-1px);
    box-shadow: var(--staff-shadow-sm, none);
}

@media (max-width: 640px) {
    .order-history-controls-row {
        align-items: stretch;
        flex-direction: column;
    }
    .order-history-field select {
        width: 100%;
    }
}

/* ============================================================
   Pending Orders — prepare timer workflow
   ============================================================ */
.pending-order-actions {
    display: grid;
    gap: 10px;
    border-top: 1px solid #e5e7eb;
    padding-top: 10px;
}

.pending-order-total {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.pending-order-prep-status {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #e0e7ff;
    color: #4338ca;
    border-radius: 999px;
    padding: 4px 10px;
    font-size: 0.76rem;
    font-weight: 700;
}

/* Live preparation countdown shown inside each preparing order card */
.pending-order-countdown {
    display: flex;
    align-items: center;
    gap: 8px;
    background: #eef2ff;
    border: 1px solid rgba(99, 102, 241, 0.35);
    border-radius: 10px;
    padding: 8px 12px;
    font-size: 0.8rem;
    font-weight: 700;
    color: #4338ca;
}

.pending-order-countdown > i {
    font-size: 0.9rem;
    flex: none;
}

.pending-order-countdown-text {
    white-space: nowrap;
}

.pending-order-countdown-bar {
    flex: 1 1 auto;
    min-width: 60px;
    height: 6px;
    border-radius: 999px;
    background: rgba(99, 102, 241, 0.2);
    overflow: hidden;
}

.pending-order-countdown-bar-fill {
    display: block;
    height: 100%;
    border-radius: 999px;
    background: linear-gradient(90deg, #6366f1, #2563eb);
    transition: width 1s linear;
}

.pending-order-countdown-bar-fill.is-done {
    background: #ef4444;
}

.pending-order-countdown.is-done {
    color: #ef4444;
}

.pending-order-prep-row {
    display: flex;
    align-items: flex-end;
    gap: 10px;
    flex-wrap: wrap;
}

.prep-minutes-field {
    display: grid;
    gap: 4px;
    font-size: 0.72rem;
    color: var(--staff-muted, #555);
    font-weight: 600;
}

.prep-minutes-input {
    width: 84px;
    padding: 9px 10px;
    border: 1px solid var(--staff-border, #d1d5db);
    border-radius: 10px;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--staff-text, #111);
    background: var(--staff-surface, #fff);
}

.prepare-order-btn {
    border: none;
    background: #2563eb;
    color: #fff;
    border-radius: 12px;
    padding: 10px 16px;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.2s ease, transform 0.15s ease;
}

.prepare-order-btn:hover {
    background: #1d4ed8;
    transform: translateY(-1px);
}

.pending-order-card.is-preparing {
    border: 1px solid rgba(99, 102, 241, 0.5);
}

/* Overdue prep timer — red ring pulse until staff adds minutes or completes */
.pending-order-card.is-overdue {
    border: 1px solid rgba(239, 68, 68, 0.65);
    animation: pending-order-overdue-pulse 1.6s ease-in-out infinite;
}

.pending-order-card.is-overdue .pending-order-countdown {
    border-color: rgba(239, 68, 68, 0.55);
    background: rgba(239, 68, 68, 0.08);
    color: #dc2626;
}

.pending-order-card.is-overdue .pending-order-countdown-bar-fill {
    background: #ef4444;
}

@keyframes pending-order-overdue-pulse {
    0%, 100% {
        box-shadow: 0 0 0 1px rgba(239, 68, 68, 0.28), 0 8px 22px rgba(239, 68, 68, 0.14);
    }
    50% {
        box-shadow: 0 0 0 4px rgba(239, 68, 68, 0.42), 0 10px 26px rgba(239, 68, 68, 0.26);
    }
}

/* ===== Overdue preparation alert modal ===== */
.overdue-alert-modal {
    width: min(480px, 100%);
    background: rgba(17, 24, 39, 0.96);
    color: #fff;
    border: 1px solid rgba(239, 68, 68, 0.45);
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.4);
    text-align: center;
}

.overdue-alert-modal h2 {
    margin: 0 0 8px;
    color: #f87171;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.overdue-alert-modal h2 i {
    animation: overdue-bell-ring 1s ease-in-out infinite;
}

@keyframes overdue-bell-ring {
    0%, 100% { transform: rotate(0deg); }
    20% { transform: rotate(12deg); }
    40% { transform: rotate(-10deg); }
    60% { transform: rotate(8deg); }
    80% { transform: rotate(-5deg); }
}

.overdue-alert-modal p {
    margin: 0;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.85);
}

.overdue-alert-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: center;
    gap: 10px;
    margin-top: 18px;
}

.overdue-alert-actions .prep-minutes-field {
    color: rgba(255, 255, 255, 0.85);
}

.overdue-alert-actions .prep-minutes-input {
    background: #1f2937;
    border-color: rgba(255, 255, 255, 0.18);
    color: #fff;
}

.overdue-alert-actions .overdue-add-minutes-btn {
    background: #f59e0b;
    color: #1f2937;
}

.overdue-alert-actions .overdue-complete-btn {
    background: #10b981;
    color: #fff;
}

.overdue-alert-actions button {
    margin: 0;
}

.overdue-alert-modal .menu-order-message {
    margin-top: 12px;
}

body.staff-app .overdue-alert-modal {
    background: #ffffff;
    border: 1px solid var(--staff-border);
    color: var(--staff-text);
    box-shadow: var(--staff-shadow-lg);
}

body.staff-app .overdue-alert-modal h2 {
    color: var(--staff-danger);
}

body.staff-app .overdue-alert-modal p {
    color: var(--staff-muted);
}

body.staff-app .overdue-alert-actions .prep-minutes-field {
    color: var(--staff-muted);
}

body.staff-app .overdue-alert-actions .prep-minutes-input {
    background: #ffffff;
    border-color: var(--staff-border);
    color: var(--staff-text);
}

.pending-order-card.is-highlighted {
    animation: pending-order-highlight 2.2s ease;
}

@keyframes pending-order-highlight {
    0% { box-shadow: 0 0 0 0 rgba(37, 99, 235, 0.45); }
    35% { box-shadow: 0 0 0 12px rgba(37, 99, 235, 0); }
    100% { box-shadow: 0 0 0 0 rgba(37, 99, 235, 0); }
}

/* ============================================================
   Credentials — trusted device groups + login history
   ============================================================ */
body.staff-app .trusted-devices-group {
    display: grid;
    gap: 2px;
}

body.staff-app .trusted-devices-group + .trusted-devices-group {
    margin-top: 14px;
}

body.staff-app .trusted-devices-group-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.76rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--staff-muted);
    border-bottom: 1px solid var(--staff-border-soft);
    padding: 6px 4px 8px;
}

body.staff-app .trusted-devices-group-title i {
    color: var(--staff-accent-strong);
}

body.staff-app .trusted-devices-group-count {
    margin-left: auto;
    background: var(--staff-accent-soft);
   
    border-radius: 999px;
    padding: 2px 9px;
    font-size: 0.72rem;
    color: var(--staff-accent-strong);
}

body.staff-app .login-history-card {
    margin-top: 24px;
}

body.staff-app .login-history-table-wrap {
    overflow-x: auto;
}

body.staff-app .login-history-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.85rem;
}

body.staff-app .login-history-table th,
body.staff-app .login-history-table td {
    text-align: left;
    padding: 10px 12px;
    border-bottom: 1px solid var(--staff-border-soft);
    color: var(--staff-text);
    white-space: nowrap;
}

body.staff-app .login-history-table th {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--staff-muted);
}

body.staff-app .login-history-table tbody tr:hover {
    background: var(--staff-accent-softer);
}

body.staff-app .login-history-role {
    display: inline-block;
    background: var(--staff-accent-soft);
    color: var(--staff-accent-strong);
    border-radius: 999px;
    padding: 3px 10px;
    font-size: 0.74rem;
    font-weight: 700;
}

/* ===== Sales & Receipt Export module (Sales page) ===== */
.export-mode-tabs {
    display: inline-flex;
    gap: 4px;
    margin: 8px 0 10px;
    padding: 4px;
    background: rgba(148, 163, 184, 0.10);
    border-radius: 12px;
}

body.staff-app .export-mode-tabs {
    background: var(--staff-accent-soft);
}

.export-mode-tab,
.profit-export-tab {
    padding: 8px 16px;
    border: none;
    background: transparent;
    border-radius: 9px;
    cursor: pointer;
    font-weight: 700;
    font-size: 0.9rem;
    color: #475569;
    transition: all 0.18s ease;
}

.export-mode-tab:hover,
.profit-export-tab:hover {
    color: #1f2937;
}

.export-mode-tab.active,
.profit-export-tab.active {
    background: #ffffff;
    color: #1f2937;
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.10);
}

body.staff-app .export-mode-tab,
body.staff-app .profit-export-tab {
    color: var(--staff-muted);
}

body.staff-app .export-mode-tab.active,
body.staff-app .profit-export-tab.active {
    background: #ffffff;
    color: var(--staff-accent-strong);
    box-shadow: 0 4px 12px rgba(43, 174, 102, 0.18);
}

.export-controls {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 10px;
}

.export-field {
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 0.82rem;
    font-weight: 600;
    color: #475569;
}

body.staff-app .export-field {
    color: var(--staff-muted);
}

.export-field input,
.export-field select {
    padding: 7px 10px;
    border: 1px solid rgba(148, 163, 184, 0.35);
    border-radius: 10px;
    background: #f8fafc;
    color: #1f2937;
    font-size: 0.85rem;
    min-width: 160px;
}

body.staff-app .export-field input,
body.staff-app .export-field select {
    background: #ffffff;
    border: 1px solid var(--staff-border);
    color: var(--staff-text);
}

.export-field input:focus,
.export-field select:focus {
    outline: none;
    border-color: var(--staff-accent);
    box-shadow: 0 0 0 3px var(--staff-accent-soft);
}

.export-summary {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 14px;
}

.export-summary-item {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 10px 16px;
    background: #f8fafc;
    border: 1px solid rgba(148, 163, 184, 0.18);
    border-radius: 12px;
    font-size: 0.8rem;
    color: #64748b;
}

body.staff-app .export-summary-item {
    background: var(--staff-accent-soft);
    border-color: var(--staff-border);
    color: var(--staff-muted);
}

.export-summary-item strong {
    font-size: 1.05rem;
    color: #1f2937;
}

body.staff-app .export-summary-item strong {
    color: var(--staff-text);
}

#exportMessage.is-error,
#profitExportMessage.is-error {
    color: #dc2626;
    font-weight: 600;
}

/* ============ Accessibility: skip link ============ */
.skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 9999;
    background: #0d0f1c;
    color: #fff;
    padding: 12px 20px;
    border-radius: 0 0 12px 0;
    text-decoration: none;
    font-weight: 700;
}

.skip-link:focus {
    left: 0;
}

/* ============ Language toggle ============ */
.lang-toggle-btn {
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.25);
    color: #fff;
    font-weight: 700;
    font-size: 0.75rem;
    padding: 6px 12px;
    border-radius: 999px;
    cursor: pointer;
    transition: background 0.2s ease, transform 0.15s ease;
}

.lang-toggle-btn:hover {
    background: rgba(255, 255, 255, 0.2);
    transform: translateY(-1px);
}

/* ============ Inventory badges ============ */
.inventory-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 6px;
}

.inventory-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 0.72rem;
    font-weight: 700;
    padding: 3px 9px;
    border-radius: 999px;
}

.badge-hidden {
    background: #fee2e2;
    color: #991b1b;
}

.badge-cost {
    background: #e0e7ff;
    color: #3730a3;
}

.inventory-item-card.is-hidden .inventory-item-main > strong {
    opacity: 0.6;
}

/* ============ Order action buttons ============ */
.order-cancel-btn,
.order-print-btn {
    border: 1px solid rgba(148, 163, 184, 0.35);
    background: transparent;
    color: #64748b;
    border-radius: 8px;
    padding: 6px 10px;
    font-size: 0.78rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.order-cancel-btn:hover {
    border-color: #ef4444;
    color: #ef4444;
    background: rgba(239, 68, 68, 0.06);
}

.order-print-btn:hover {
    border-color: #0891b2;
    color: #0891b2;
    background: rgba(8, 145, 178, 0.06);
}

.order-refund-btn {
    border: 1px solid rgba(148, 163, 184, 0.35);
    background: transparent;
    color: #64748b;
    border-radius: 8px;
    padding: 5px 10px;
    font-size: 0.75rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.order-refund-btn:hover {
    border-color: #d97706;
    color: #d97706;
    background: rgba(217, 119, 6, 0.06);
}

/* ============ Insights ============ */
.insights-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 8px;
}

.insights-toolbar h3 {
    margin: 0;
}

.insights-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 16px;
    margin-top: 12px;
}

.insight-card {
    background: #fff;
    border: 1px solid rgba(148, 163, 184, 0.2);
    border-radius: 14px;
    padding: 16px;
}

body.staff-app .insight-card {
    background: var(--staff-surface);
    border-color: var(--staff-border);
    color: var(--staff-text);
}

.insight-card h4 {
    margin: 0 0 10px;
    font-size: 0.95rem;
    color: #1f2937;
}

body.staff-app .insight-card h4 {
    color: var(--staff-text);
}

.insight-card-wide {
    grid-column: 1 / -1;
}

.insights-hourly-bars {
    display: flex;
    align-items: flex-end;
    gap: 2px;
    height: 120px;
    overflow-x: auto;
    padding-bottom: 18px;
}

.insights-hourly-col {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    height: 100%;
    min-width: 26px;
}

.insights-hourly-bar {
    width: 16px;
    background: linear-gradient(180deg, #6366f1, #8b5cf6);
    border-radius: 4px 4px 0 0;
    transition: height 0.4s ease;
    min-height: 2px;
}

.insights-hourly-label {
    font-size: 0.6rem;
    color: #94a3b8;
    margin-top: 4px;
    transform: rotate(-45deg);
    white-space: nowrap;
}

.insights-hourly-note {
    font-size: 0.75rem;
    color: #94a3b8;
    margin: 6px 0 0;
}

.insights-bestseller-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 0;
    border-bottom: 1px solid rgba(148, 163, 184, 0.15);
}

.insights-bestseller-row:last-child {
    border-bottom: none;
}

.insights-bestseller-rank {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: #e0e7ff;
    color: #3730a3;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.72rem;
    font-weight: 700;
}

.insights-bestseller-name {
    min-width: 0;
    flex: 0 0 38%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.85rem;
}

.insights-bestseller-track {
    flex: 1;
    height: 8px;
    background: rgba(148, 163, 184, 0.2);
    border-radius: 999px;
    overflow: hidden;
}

.insights-bestseller-fill {
    height: 100%;
    background: linear-gradient(90deg, #059669, #10b981);
    border-radius: 999px;
}

.insights-bestseller-qty {
    font-size: 0.85rem;
    color: #1f2937;
    min-width: 28px;
    text-align: right;
}

.insights-compare-controls {
    display: flex;
    align-items: flex-end;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 12px;
}

.insights-compare-controls label {
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 0.75rem;
    font-weight: 600;
    color: #64748b;
}

.insights-compare-controls select {
    padding: 6px 10px;
    border-radius: 8px;
    border: 1px solid rgba(148, 163, 184, 0.3);
}

.insights-toolbar-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.insights-period-filter {
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 0.75rem;
    font-weight: 600;
    color: #64748b;
}

.insights-period-filter select,
.insights-period-filter input[type="date"] {
    padding: 6px 10px;
    border-radius: 8px;
    border: 1px solid rgba(148, 163, 184, 0.3);
    background: #fff;
    color: #1f2937;
}

body.staff-app .insights-period-filter select,
body.staff-app .insights-period-filter input[type="date"] {
    background: var(--staff-surface);
    color: var(--staff-text);
    border-color: var(--staff-border);
}

.insights-custom-range {
    display: flex;
    align-items: flex-end;
    gap: 10px;
    flex-wrap: wrap;
}

.insights-hourly-chart-canvas {
    position: relative;
    height: 150px;
}

.insights-compare-table td .compare-sub {
    display: block;
    font-size: 0.7rem;
    font-weight: 500;
    color: #94a3b8;
}

.insights-compare-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.85rem;
}

.insights-compare-table th,
.insights-compare-table td {
    padding: 8px 10px;
    text-align: left;
    border-bottom: 1px solid rgba(148, 163, 184, 0.15);
}

.insights-compare-table th {
    text-transform: capitalize;
    color: #64748b;
}

.insights-compare-table td.is-up {
    color: #059669;
    font-weight: 700;
}

.insights-compare-table td.is-down {
    color: #dc2626;
    font-weight: 700;
}

@media (prefers-reduced-motion: reduce) {
    .insights-hourly-bar,
    .lang-toggle-btn,
    .order-cancel-btn,
    .order-print-btn,
    .order-refund-btn {
        transition: none;
    }
}

/* ============ Login history: online status + date filter ============ */
.login-online-list {
    margin-bottom: 14px;
}
.login-online-empty {
    font-size: 0.8rem;
    color: #6b7280;
    margin: 0 0 12px;
}
.login-online-item {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    padding: 8px 12px;
    border: 1px solid rgba(148, 163, 184, 0.16);
    border-radius: 10px;
    margin-bottom: 6px;
    background: #fff;
    font-size: 0.85rem;
}
body.staff-app .login-online-item {
    background: var(--staff-surface);
    border-color: var(--staff-border);
    color: var(--staff-text);
}
.login-online-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #22c55e;
    box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.18);
    flex-shrink: 0;
}
.login-online-email {
    color: #6b7280;
}
body.staff-app .login-online-email {
    color: var(--staff-muted);
}
.login-online-role {
    margin-left: auto;
    background: #dcfce7;
    color: #166534;
    border-radius: 999px;
    padding: 2px 9px;
    font-size: 0.72rem;
    font-weight: 700;
}
body.staff-app .login-online-role {
    background: var(--staff-accent-soft);
    color: var(--staff-accent-strong);
}
.login-online-time {
    color: #6b7280;
    font-size: 0.75rem;
}
body.staff-app .login-online-time {
    color: var(--staff-muted);
}
.login-history-filter-row {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin: 0 0 12px;
}
.login-history-filter-row label {
    font-size: 0.8rem;
    color: #374151;
    font-weight: 600;
}
body.staff-app .login-history-filter-row label {
    color: var(--staff-text);
}
.login-history-filter-row input[type="date"] {
    border: 1px solid rgba(148, 163, 184, 0.35);
    border-radius: 8px;
    padding: 6px 10px;
    font-size: 0.85rem;
    background: #fff;
    color: #111;
}
body.staff-app .login-history-filter-row input[type="date"] {
    background: var(--staff-surface);
    color: var(--staff-text);
    border-color: var(--staff-border);
}
.login-history-clear-btn {
    border: none;
    background: transparent;
    color: #4f46e5;
    font-size: 0.8rem;
    font-weight: 700;
    cursor: pointer;
    padding: 4px 6px;
    border-radius: 6px;
}
body.staff-app .login-history-clear-btn {
    color: var(--staff-accent-strong);
}
.login-history-clear-btn:hover {
    text-decoration: underline;
}
.login-history-filter-note {
    font-size: 0.78rem;
    color: #6b7280;
    margin: 0 0 8px;
}
body.staff-app .login-history-filter-note {
    color: var(--staff-muted);
}

/* ==== migrated from staff.html <style> block ==== */

        html,
        body {
            position: relative;
            z-index: 0;
        }

        .staff-login-page {
            position: absolute;
            inset: 0;
            z-index: 0;
            min-height: 100vh;
            display: grid;
            place-items: center;
            padding: 20px;
            background-color: transparent;
            overflow: hidden;
        }

        .login-dark-overlay {
            position: fixed;
            inset: 0;
            background-color: rgba(0,0,0,0.65);
            z-index: -2;
            pointer-events: none;
        }

        .staff-box,
        .modal-box {
            position: relative;
            z-index: 50;
        }

        .sales-section,
        .account-management {
            position: relative;
            z-index: 20;
        }

        .account-management {
            margin: 24px auto;
            max-width: 900px;
            width: calc(100% - 32px);
        }

        /* Notification badge pulse animation */
        .notif-badge-pulse {
            animation: notif-pulse 1s ease-in-out 0s 3 both;
        }

        @keyframes notif-pulse {
            0% { transform: scale(1); box-shadow: 0 0 0 0 rgba(239,68,68, 0.7); }
            50% { transform: scale(1.18); box-shadow: 0 0 8px 6px rgba(239,68,68, 0.12); }
            100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(239,68,68, 0); }
        }
        /* Scroll-to-top button for Sales Analysis */
        .sales-scroll-top-btn {
            position: sticky;
            bottom: 12px;
            left: 50%;
            transform: translateX(-50%);
            z-index: 30;
            display: none;
            align-items: center;
            justify-content: center;
            gap: 6px;
            padding: 10px 20px;
            border: none;
            border-radius: 999px;
            background: #ff9800;
            color: #fff;
            font-size: 14px;
            font-weight: 700;
            cursor: pointer;
            box-shadow: 0 4px 14px rgba(255, 152, 0, 0.35);
            transition: opacity 0.25s ease, transform 0.25s ease;
            margin-top: 12px;
        }
        .sales-scroll-top-btn.is-visible {
            display: inline-flex;
        }
        .sales-scroll-top-btn:hover {
            background: #e68900;
            transform: translateX(-50%) translateY(-2px);
        }