@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap');

/* ── Design Tokens ─────────────────────────────────────────── */
:root {
    --brand:       #2563eb;
    --brand-dark:  #1d4ed8;
    --brand-hover: #1e40af;
    --brand-light: rgba(37,99,235,.12);
    --brand-soft:  #eff6ff;
    --brand-surface:#f8fafc;
    --navy:        #0b1f3a;
    --navy-mid:    #163a63;
    --surface:     #f8fafc;
    --card-bg:     #ffffff;
    --border:      #dce6f2;
    --text-main:   #172033;
    --text-muted:  #64748b;
    --success:     #047857;
    --success-dark:#065f46;
    --danger:      #b91c1c;
    --danger-dark: #991b1b;
    --warning:     #b45309;
    --info:        #0e7490;
    --sent:        #1d4ed8;
    --received:    #065f46;
    --status-pending-soft:   #fef3c7;
    --status-preparing-soft: #cffafe;
    --status-ready-soft:     #d1fae5;
    --status-sent-soft:      #dbeafe;
    --status-received-soft:  #d1fae5;
    --status-cancelled-soft: #fee2e2;
    --bs-primary-rgb: 37, 99, 235;
    --bs-success-rgb: 4, 120, 87;
    --bs-danger-rgb: 185, 28, 28;
    --bs-info-rgb: 14, 116, 144;
    --bs-secondary-rgb: 71, 85, 105;
}

body {
    min-height: 100vh;
    background:
        radial-gradient(circle at top left, rgba(37,99,235,.16), transparent 20%),
        radial-gradient(circle at bottom right, rgba(96,165,250,.12), transparent 28%),
        linear-gradient(135deg, var(--brand-soft) 0%, #ffffff 48%, #f8fafc 100%);
    font-family: 'Inter', sans-serif;
    color: var(--text-main);
}

body::before {
    content: '';
    position: fixed;
    inset: 0;
    background-image: linear-gradient(rgba(37,99,235,.03) 1px, transparent 1px), linear-gradient(90deg, rgba(37,99,235,.03) 1px, transparent 1px);
    background-size: 24px 24px;
    pointer-events: none;
    z-index: -1;
    opacity: 0.55;
}

#app-toast-container {
    z-index: 2000;
}

#app-toast-container .toast {
    min-width: 280px;
    max-width: 360px;
    border-radius: 14px;
    box-shadow: 0 14px 34px rgba(15, 23, 42, 0.18);
}

#app-toast-container .toast .toast-body {
    font-size: 0.92rem;
    font-weight: 600;
}

.card{
    border: 1px solid rgba(37,99,235,.25);
    border-radius: 18px;
    background: linear-gradient(180deg, #ffffff 0%, #eff6ff 100%);
    backdrop-filter: blur(10px);
    box-shadow: 0 14px 40px rgba(37, 99, 235, 0.12);
    transition: transform 0.2s, box-shadow 0.2s;
}

.card:hover {
    transform: translateY(-5px);
    box-shadow: 0 18px 34px rgba(37, 99, 235, 0.18) !important;
}

.btn{
    border-radius: 10px;
    font-weight: 600;
    transition: transform 0.18s ease, box-shadow 0.18s ease, filter 0.18s ease;
}

.btn:hover {
    transform: translateY(-1px);
    filter: saturate(1.05);
}

.btn-primary {
    background: linear-gradient(135deg, var(--brand-dark), var(--brand-hover));
    border: none;
    color: #fff;
    box-shadow: 0 10px 20px rgba(29,78,216,.22);
}

.btn-primary:hover {
    transform: translateY(-2px) scale(1.01);
}

.btn-success {
    box-shadow: 0 10px 20px rgba(4,120,87,.18);
}

.navbar {
    box-shadow: 0 8px 30px rgba(15,23,42,.08);
}

.navbar.navbar-dark.bg-primary,
.navbar.navbar-dark.bg-dark {
    background: linear-gradient(135deg, var(--navy) 0%, var(--navy-mid) 100%) !important;
    border-bottom: 1px solid rgba(255,255,255,.15);
}

.navbar-brand {
    font-weight: 800;
    letter-spacing: 0.01em;
}

.brand-logo {
    width: clamp(120px, 22vw, 165px);
    aspect-ratio: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 12px;
    border-radius: 50%;
    overflow: hidden;
    background: radial-gradient(circle at top, rgba(255,255,255,0.96), rgba(37,99,235,0.18));
    box-shadow: 0 0 0 8px rgba(37,99,235,0.14), 0 18px 42px rgba(37, 99, 235, 0.24);
}

.brand-logo .o2m-logo-image {
    width: 100%;
    height: auto;
    display: block;
    object-fit: contain;
}

.o2m-logo-nav,
.o2m-logo-sidebar {
    width: clamp(36px, 4vw, 48px);
    height: clamp(36px, 4vw, 48px);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 4px;
    border-radius: 50% !important;
    overflow: hidden;
    background: radial-gradient(circle at top, rgba(255,255,255,0.95), rgba(37,99,235,0.14));
    box-shadow: 0 0 0 4px rgba(255,255,255,0.12), 0 8px 20px rgba(37, 99, 235, 0.18);
    clip-path: circle(50% at center);
}

.o2m-logo-nav .o2m-logo-image,
.o2m-logo-sidebar .o2m-logo-image {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    border-radius: 50%;
}

/* Menu Management Styles */
.table {
    font-size: 0.95rem;
}

.table-hover tbody tr:hover {
    background-color: #f8f9fa;
}

#menu-form {
    background: #f8f9fa;
    padding: 20px;
    border-radius: 12px;
}

#menu-container {
    min-height: 300px;
}

.owner-menu-filter-shell {
    margin-bottom: 1rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--border);
}

.owner-menu-filter-shell[hidden],
.owner-menu-filter-btn[hidden],
#category-filter-bar[hidden],
.category-filter-btn[hidden] {
    display: none !important;
}

.owner-shop-operations-card {
    margin-bottom: 1rem;
    padding: 1rem;
    border: 1px solid rgba(37,99,235,.18);
    border-radius: 18px;
    background: linear-gradient(135deg, #ffffff, #eff6ff);
    box-shadow: 0 10px 28px rgba(15,23,42,.06);
}

.owner-shop-operations-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: .85rem;
}

.owner-shop-operations-heading > div { display: grid; min-width: 0; gap: .15rem; }
.owner-shop-operations-heading strong { color: var(--text-main); font-size: .98rem; }
.owner-shop-operations-heading > div > span:last-child { color: var(--text-muted); font-size: .75rem; }

.owner-shop-status-badge {
    width: fit-content;
    padding: .2rem .5rem;
    border-radius: 999px;
    background: #e2e8f0;
    color: #475569;
    font-size: .64rem;
    font-weight: 850;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.owner-shop-operations-card[data-state="open"] .owner-shop-status-badge { background: #d1fae5; color: #065f46; }
.owner-shop-operations-card[data-state="closed"] .owner-shop-status-badge,
.owner-shop-operations-card[data-state="scheduled-closed"] .owner-shop-status-badge { background: #fee2e2; color: #991b1b; }
.owner-shop-operations-card[data-state="paused"] .owner-shop-status-badge { background: #fef3c7; color: #92400e; }

.owner-shop-quick-controls,
.owner-settings-switches {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .65rem;
}

.owner-shop-switch-card {
    display: flex;
    min-width: 0;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    padding: .75rem;
    border: 1px solid #dce6f2;
    border-radius: 14px;
    background: #fff;
    cursor: pointer;
}

.owner-shop-switch-card > span:first-child { display: flex; min-width: 0; flex-direction: column; }
.owner-shop-switch-card strong { color: var(--text-main); font-size: .78rem; }
.owner-shop-switch-card small { color: var(--text-muted); font-size: .65rem; line-height: 1.35; }
.owner-shop-switch-card .form-check-input { width: 2.35rem; height: 1.25rem; cursor: pointer; }

.owner-shop-operation-meta {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem 1rem;
    margin-top: .75rem;
    color: var(--text-muted);
    font-size: .7rem;
}

.owner-shop-operation-meta strong { color: var(--text-main); }

.owner-menu-filter-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    margin-bottom: .7rem;
    color: var(--text-main);
}

.owner-menu-availability-controls { margin-bottom: .75rem; }

.owner-menu-availability-tabs {
    display: inline-flex;
    gap: .25rem;
    padding: .28rem;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: #f8fafc;
}

.owner-menu-availability-btn {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    min-height: 36px;
    padding: .42rem .75rem;
    border: 0;
    border-radius: 9px;
    background: transparent;
    color: var(--text-muted);
    font-size: .76rem;
    font-weight: 750;
}

.owner-menu-availability-btn span {
    min-width: 1.35rem;
    padding: .12rem .32rem;
    border-radius: 999px;
    background: #e2e8f0;
    font-size: .65rem;
    text-align: center;
}

.owner-menu-availability-btn.active {
    background: #fff;
    color: var(--brand-dark);
    box-shadow: 0 2px 8px rgba(15,23,42,.1);
}

.owner-menu-availability-btn.active span { background: var(--brand-soft); }
.owner-menu-availability-select-wrap { display: none; }

.owner-menu-filter-bar {
    display: flex;
    flex-wrap: wrap;
    gap: .55rem;
}

.owner-menu-filter-btn {
    display: inline-flex;
    align-items: center;
    gap: .38rem;
    min-height: 40px;
    padding: .48rem .7rem;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: #fff;
    color: var(--text-muted);
    font-size: .78rem;
    font-weight: 750;
    line-height: 1;
    white-space: nowrap;
    transition: color .18s ease, background-color .18s ease, border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}

.owner-menu-filter-btn:hover {
    color: var(--brand-dark);
    border-color: rgba(37,99,235,.45);
    background: var(--brand-soft);
    transform: translateY(-1px);
}

.owner-menu-filter-btn.active {
    color: #fff;
    border-color: var(--brand);
    background: linear-gradient(135deg, var(--brand), var(--brand-dark));
    box-shadow: 0 6px 16px rgba(37,99,235,.22);
}

.owner-menu-filter-count {
    min-width: 1.45rem;
    padding: .2rem .38rem;
    border-radius: 999px;
    background: #eff6ff;
    color: var(--brand-dark);
    font-size: .67rem;
    font-weight: 850;
    text-align: center;
}

.owner-menu-filter-btn.active .owner-menu-filter-count {
    background: rgba(255,255,255,.2);
    color: #fff;
}

.owner-menu-empty {
    min-height: 220px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .35rem;
    padding: 2rem 1rem;
    text-align: center;
    color: var(--text-muted);
}

.owner-menu-empty strong { color: var(--text-main); }
.owner-menu-empty-icon { font-size: 2rem; }

/* ── Owner Menu Card Grid ─────────────────────────────────── */
.owner-menu-card {
    border-radius: 14px;
    border: 1px solid rgba(37,99,235,.18);
    background: linear-gradient(180deg, #ffffff 0%, #eff6ff 100%);
    transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.owner-menu-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 24px rgba(0,0,0,0.12) !important;
}

.owner-menu-img-wrap {
    border-radius: 14px 14px 0 0;
    overflow: hidden;
    height: 140px;
    background: #f1f5f9;
    flex-shrink: 0;
}

.owner-menu-card-img {
    width: 100%;
    height: 140px;
    object-fit: cover;
    display: block;
}

.owner-menu-img-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.5rem;
    color: #cbd5e1;
    height: 140px;
}

.owner-menu-card-name {
    font-size: 0.9rem;
    font-weight: 700;
    color: #172033;
    line-height: 1.3;
    flex: 1;
    min-width: 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.owner-menu-card-desc {
    font-size: 0.78rem;
    line-height: 1.35;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 2.4em;
}

/* Owner upload preview mirrors the fixed-height crop used on customer cards. */
.menu-customer-preview {
    max-width: 280px;
    margin-inline: auto;
    padding: .75rem;
    border: 1px solid #bfdbfe;
    border-radius: 14px;
    background: #f8fbff;
    text-align: left;
}

.menu-customer-preview-heading {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: .5rem;
    margin-bottom: .55rem;
}

.menu-customer-preview-heading span {
    color: var(--text-main);
    font-size: .78rem;
    font-weight: 800;
}

.menu-customer-preview-heading small {
    color: var(--text-muted);
    font-size: .62rem;
}

.menu-customer-preview-frame {
    position: relative;
    height: 160px;
    overflow: hidden;
    border-radius: 12px;
    background: #e2e8f0;
    box-shadow: 0 5px 14px rgba(15,23,42,.12);
}

.menu-customer-preview-frame img {
    width: 100%;
    height: 160px;
    display: block;
    object-fit: cover;
    object-position: center;
}

.menu-customer-preview-frame::after {
    content: '';
    position: absolute;
    inset: 8px;
    border: 1px dashed rgba(255,255,255,.8);
    border-radius: 8px;
    pointer-events: none;
    box-shadow: 0 0 0 999px rgba(15,23,42,.04);
}

.menu-customer-preview-tip {
    margin: .55rem 0 0;
    color: var(--text-muted);
    font-size: .66rem;
    line-height: 1.4;
}

.owner-menu-actions {
    display: flex;
    align-items: center;
    gap: .45rem;
    flex-shrink: 0;
}

.owner-menu-action {
    min-height: 36px;
    padding: .42rem .68rem;
    border: 1px solid transparent;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .35rem;
    font: inherit;
    font-size: .72rem;
    font-weight: 750;
    line-height: 1;
    cursor: pointer;
    transition: background-color .16s ease, border-color .16s ease,
                color .16s ease, transform .16s ease, box-shadow .16s ease;
}

.owner-menu-action svg {
    width: 15px;
    height: 15px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.owner-menu-action-edit {
    color: var(--brand-dark);
    background: #eff6ff;
    border-color: #bfdbfe;
}

.owner-menu-action-edit:hover {
    color: #fff;
    background: var(--brand-dark);
    border-color: var(--brand-dark);
    box-shadow: 0 6px 14px rgba(29,78,216,.22);
    transform: translateY(-1px);
}

.owner-menu-action-delete {
    color: var(--danger);
    background: #fff1f2;
    border-color: #fecdd3;
}

.owner-menu-action-delete:hover {
    color: #fff;
    background: var(--danger);
    border-color: var(--danger);
    box-shadow: 0 6px 14px rgba(185,28,28,.2);
    transform: translateY(-1px);
}

.owner-menu-action:focus-visible {
    outline: 3px solid rgba(37,99,235,.25);
    outline-offset: 2px;
}

.owner-menu-action:active { transform: translateY(0); }

.opacity-60 { opacity: 0.6; }

/* ── Customer Card Grid ───────────────────────────────────── */
.customer-card {
    border-radius: 14px;
    border: 1px solid rgba(37,99,235,.18);
    background: linear-gradient(180deg, #ffffff 0%, #eff6ff 100%);
    transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.customer-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 24px rgba(0,0,0,0.11) !important;
}

.customer-avatar {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    font-weight: 800;
    flex-shrink: 0;
    letter-spacing: 0.02em;
    box-shadow: 0 3px 10px rgba(0,0,0,0.18);
}

.customer-card-name {
    font-size: 0.92rem;
    color: #172033;
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.customer-card-joined {
    font-size: 0.72rem;
    margin-top: 1px;
}

.customer-card-info {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.customer-info-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-width: 0;
}

.customer-info-icon {
    font-size: 0.8rem;
    flex-shrink: 0;
    opacity: 0.7;
}

.customer-info-row span:last-child {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.min-w-0 { min-width: 0; }

/* Responsive adjustments */
@media (max-width: 768px) {
    .card {
        margin-bottom: 0;
    }

    .table-responsive {
        font-size: 0.9rem;
    }
}

/* ── Customer panel-header: stack on mobile ────────────────── */
@media (max-width: 575.98px) {
    .owner-menu-filter-shell {
        margin-left: -.35rem;
        margin-right: -.35rem;
    }

    .owner-menu-filter-heading {
        padding-inline: .35rem;
    }

    .owner-menu-availability-tabs { display: none; }

    .owner-menu-availability-select-wrap {
        display: grid;
        grid-template-columns: auto minmax(0, 1fr);
        align-items: center;
        gap: .65rem;
        padding-inline: .35rem;
        color: var(--text-main);
        font-size: .78rem;
        font-weight: 750;
    }

    .owner-menu-availability-select-wrap .form-select {
        min-height: 42px;
        border-radius: 12px;
        font-size: .82rem;
        font-weight: 650;
    }

    .owner-menu-filter-bar {
        flex-wrap: nowrap;
        overflow-x: auto;
        overscroll-behavior-inline: contain;
        scroll-snap-type: x proximity;
        scrollbar-width: none;
        padding: .1rem .35rem .45rem;
    }

    .owner-menu-filter-bar::-webkit-scrollbar { display: none; }

    .owner-menu-filter-btn {
        flex: 0 0 auto;
        min-height: 42px;
        scroll-snap-align: start;
    }

    .panel-header {
        flex-direction: column;
        align-items: stretch;
    }

    .panel-header .input-group {
        max-width: 100% !important;
        width: 100%;
    }

    /* Owner panel-header buttons wrap nicely */
    .panel-header .d-flex.gap-2 {
        flex-wrap: wrap;
    }

    .panel-header .d-flex .input-group {
        max-width: 100% !important;
        flex: 1 1 100%;
    }
}
.badge {
    padding: 6px 12px;
    font-weight: 500;
}

/* Form Control Styles */
.form-control,
.form-select,
.form-check-input {
    border-radius: 12px;
    border: 1px solid rgba(148,163,184,.4);
    box-shadow: none;
}

.form-control:focus,
.form-select:focus,
.form-check-input:focus {
    border-color: var(--brand);
    box-shadow: 0 0 0 0.25rem rgba(37,99,235,.22);
}

.input-group-text {
    border-radius: 12px 0 0 12px;
    background: rgba(255,255,255,.9);
    border-color: rgba(148,163,184,.4);
}

.input-group .form-control {
    border-radius: 0 12px 12px 0;
}

/* Card Title Styles */
.card-title {
    font-weight: 600;
    color: #212529;
    margin-bottom: 0.5rem;
}

.card-text {
    font-size: 0.9rem;
}

/* Button Styles */
.btn-sm {
    font-size: 0.85rem;
    padding: 0.35rem 0.75rem;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .card {
        margin-bottom: 0;
    }

    .table-responsive {
        font-size: 0.9rem;
    }
}


/* ============================================================
   Profile Dropdown (navbar)
   ============================================================ */

.profile-dropdown {
    position: relative;
}

/* Avatar button */
.profile-avatar-btn {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    background: rgba(255, 255, 255, 0.15);
    border: 1.5px solid rgba(255, 255, 255, 0.3);
    border-radius: 999px;
    padding: 0.35rem 0.65rem 0.35rem 0.55rem;
    color: #fff;
    cursor: pointer;
    transition: background 0.2s ease, border-color 0.2s ease;
}

.profile-avatar-btn:hover {
    background: rgba(255, 255, 255, 0.28);
    border-color: rgba(255, 255, 255, 0.55);
}

.profile-avatar-caret {
    display: flex;
    align-items: center;
    opacity: 0.75;
    transition: transform 0.25s ease;
}

.profile-avatar-btn[aria-expanded="true"] .profile-avatar-caret {
    transform: rotate(180deg);
}

/* Dropdown panel */
.profile-dropdown-menu {
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    z-index: 2000;
    width: 230px;
    background: #fff;
    border-radius: 14px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.18), 0 2px 8px rgba(0,0,0,0.08);
    border: 1px solid rgba(0,0,0,0.06);
    padding: 0.5rem;
    /* hidden state */
    opacity: 0;
    transform: translateY(-8px) scale(0.97);
    pointer-events: none;
    transition: opacity 0.22s ease, transform 0.22s cubic-bezier(0.34,1.56,0.64,1);
    transform-origin: top right;
}

.profile-dropdown-menu.dropdown-open {
    opacity: 1;
    transform: translateY(0) scale(1);
    pointer-events: all;
}

/* User info header */
.profile-dropdown-header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.6rem 0.65rem 0.65rem;
}

.profile-dropdown-avatar {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--brand-dark), var(--brand-hover));
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    flex-shrink: 0;
}

.profile-dropdown-userinfo {
    min-width: 0;
}

.profile-dropdown-name {
    font-size: 0.88rem;
    font-weight: 700;
    color: #172033;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.profile-dropdown-role {
    font-size: 0.73rem;
    color: #64748b;
    margin-top: 1px;
}

/* Divider */
.profile-dropdown-divider {
    height: 1px;
    background: #f1f5f9;
    margin: 0.35rem 0;
}

/* Menu items */
.profile-dropdown-item {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    width: 100%;
    padding: 0.55rem 0.75rem;
    border-radius: 9px;
    border: none;
    background: transparent;
    color: #334155;
    font-size: 0.855rem;
    font-weight: 500;
    text-align: left;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
}

.profile-dropdown-item svg {
    flex-shrink: 0;
    opacity: 0.55;
    transition: opacity 0.15s;
}

.profile-dropdown-item:hover {
    background: #f1f5f9;
    color: #0b1f3a;
}

.profile-dropdown-item:hover svg {
    opacity: 1;
}

/* Sign out — danger tint */
.profile-dropdown-signout {
    color: #dc2626;
}

.profile-dropdown-signout svg {
    opacity: 0.7;
}

.profile-dropdown-signout:hover {
    background: #fef2f2;
    color: #b91c1c;
}

/* ============================================================

/* ============================================================
   Customer Sidebar Layout — overlay / slide-in design
   ============================================================ */


/* Layout wrapper: main fills full width; sidebar overlays it */
.customer-layout {
    background:
        radial-gradient(circle at top left, rgba(37,99,235,.10), transparent 20%),
        linear-gradient(180deg, rgba(255,247,237,.9), rgba(248,250,252,.96));
    min-height: calc(100vh - 56px);
}

/* ── Backdrop ─────────────────────────────────────────────── */
.sidebar-backdrop {
    position: fixed;
    inset: 0;
    z-index: 1040;
    background: rgba(10, 20, 40, 0.5);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}

.sidebar-backdrop.sidebar-backdrop-show {
    opacity: 1;
    pointer-events: all;
}

/* ── Sidebar panel (fixed, slides in from left) ───────────── */
.customer-sidebar {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    z-index: 1050;
    width: 260px;
    background: linear-gradient(175deg, #163a63 0%, #0a1628 100%);
    display: flex;
    flex-direction: column;
    padding: 0;
    box-shadow: 6px 0 30px rgba(0, 0, 0, 0.3);
    transform: translateX(-100%);
    transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    overflow-y: auto;
    overflow-x: hidden;
}

.customer-sidebar.sidebar-open {
    transform: translateX(0);
}

/* ── Sidebar header (logo + close button) ─────────────────── */
.sidebar-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.1rem 1.2rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    flex-shrink: 0;
}

.sidebar-logo {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    color: #fff;
    font-size: 0.95rem;
    font-weight: 700;
    letter-spacing: 0.01em;
}

.sidebar-close-btn {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: none;
    background: rgba(255, 255, 255, 0.12);
    color: rgba(255, 255, 255, 0.85);
    font-size: 1.25rem;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s, transform 0.15s;
    flex-shrink: 0;
}

.sidebar-close-btn:hover {
    background: rgba(255, 255, 255, 0.22);
    transform: rotate(90deg);
}

/* ── Nav links ────────────────────────────────────────────── */
.sidebar-nav {
    display: flex;
    flex-direction: column;
    padding: 0.75rem 0.75rem;
    gap: 0.2rem;
    flex: 1;
}

.sidebar-nav-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    width: 100%;
    padding: 0.7rem 0.95rem;
    border-radius: 10px;
    border: none;
    background: transparent;
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.9rem;
    font-weight: 500;
    text-align: left;
    cursor: pointer;
    transition: background 0.18s ease, color 0.18s ease, transform 0.15s ease;
    white-space: nowrap;
}

.sidebar-nav-item svg {
    flex-shrink: 0;
    opacity: 0.65;
    transition: opacity 0.18s;
}

.sidebar-nav-item:hover {
    background: rgba(255, 255, 255, 0.08);
    color: #fff;
}

.sidebar-nav-item:hover svg {
    opacity: 1;
}

.sidebar-nav-item.active {
    background: linear-gradient(135deg, var(--brand-dark), var(--brand-hover));
    color: #fff;
    font-weight: 700;
    box-shadow: 0 4px 16px rgba(37,99,235,.4);
    transform: translateX(3px);
}

.sidebar-nav-item.active svg {
    opacity: 1;
}

.sidebar-owner-profile-button {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr) 18px;
    align-items: center;
    gap: .7rem;
    width: 100%;
    margin-top: .55rem;
    padding: .7rem;
    border: 1px solid rgba(147,197,253,.22);
    border-radius: 14px;
    background: linear-gradient(135deg, rgba(37,99,235,.18), rgba(255,255,255,.06));
    color: #fff;
    text-align: left;
    cursor: pointer;
    transition: border-color .18s ease, background .18s ease, transform .18s ease;
}

.sidebar-owner-profile-button:hover:not(:disabled) {
    border-color: rgba(147,197,253,.58);
    background: linear-gradient(135deg, rgba(37,99,235,.3), rgba(255,255,255,.1));
    transform: translateY(-1px);
}

.sidebar-owner-profile-button:focus-visible {
    outline: 3px solid rgba(147,197,253,.4);
    outline-offset: 2px;
}

.sidebar-owner-profile-button:disabled {
    opacity: .52;
    cursor: not-allowed;
}

.sidebar-owner-profile-avatar {
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    overflow: hidden;
    border: 2px solid rgba(255,255,255,.55);
    border-radius: 50%;
    background: linear-gradient(135deg, var(--brand), var(--brand-dark));
    color: #fff;
    font-size: .76rem;
    font-weight: 850;
}

.sidebar-owner-profile-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.sidebar-owner-profile-copy {
    display: flex;
    min-width: 0;
    flex-direction: column;
}

.sidebar-owner-profile-copy small {
    color: #93c5fd;
    font-size: .62rem;
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.sidebar-owner-profile-copy strong,
.sidebar-owner-profile-copy > span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sidebar-owner-profile-copy strong { margin-top: .08rem; font-size: .8rem; }
.sidebar-owner-profile-copy > span { color: rgba(255,255,255,.58); font-size: .66rem; }
.sidebar-owner-profile-arrow { color: #93c5fd; }

/* ── Hamburger button (in navbar) ─────────────────────────── */
.sidebar-hamburger {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 36px;
    height: 36px;
    padding: 6px;
    border: none;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.15);
    cursor: pointer;
    transition: background 0.2s ease;
    flex-shrink: 0;
}

.sidebar-hamburger span {
    display: block;
    height: 2px;
    border-radius: 2px;
    background: #fff;
    transition: transform 0.25s ease, opacity 0.2s ease, width 0.2s ease;
    width: 100%;
}

.sidebar-hamburger:hover {
    background: rgba(255, 255, 255, 0.28);
}

/* Animate to X when open */
.sidebar-hamburger[aria-expanded="true"] span:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
}
.sidebar-hamburger[aria-expanded="true"] span:nth-child(2) {
    opacity: 0;
    width: 0;
}
.sidebar-hamburger[aria-expanded="true"] span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
}

/* ── Main content (always full width) ────────────────────────*/
.customer-main {
    padding: 1.75rem 2rem;
    min-height: calc(100vh - 56px);
}

.customer-main .customer-panel > .card,
.customer-main .customer-panel > .panel-header,
.customer-main .customer-panel > .cat-filter-strip,
.customer-main .customer-panel .card {
    position: relative;
    z-index: 1;
}

.customer-main .customer-panel {
    background: transparent;
}

/* ── Panels (show/hide) ───────────────────────────────────── */
.customer-panel {
    display: none;
    animation: panelFadeIn 0.25s ease both;
}

.customer-panel.active-panel {
    display: block;
}

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

/* ── Panel header row ─────────────────────────────────────── */
.panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-bottom: 1.25rem;
    padding: 0.9rem 1rem;
    background: rgba(255,255,255,0.7);
    border: 1px solid rgba(148,163,184,.2);
    border-radius: 16px;
    box-shadow: 0 10px 24px rgba(15,23,42,.05);
}

.panel-title {
    font-size: 1.35rem;
    font-weight: 800;
    color: #172033;
    margin: 0;
}

/* Auth page design */
.auth-shell {
    min-height: 100vh;
    display: grid;
    place-items: center;
    padding: 2rem 1rem;
}

.auth-card {
    border-radius: 24px !important;
    overflow: hidden;
    background: linear-gradient(180deg, rgba(255,255,255,.98), rgba(255,250,245,.98));
}

.auth-card .card-body {
    padding: 2rem;
}

.auth-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.35rem 0.85rem;
    border-radius: 999px;
    background: rgba(37,99,235,.12);
    color: var(--brand-dark);
    font-size: 0.72rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: 1rem;
}

.auth-title {
    font-weight: 800;
    color: #0b1f3a;
    margin-bottom: 0.4rem;
}

.auth-subtitle {
    color: var(--text-muted);
    margin-bottom: 1.3rem;
}

.auth-brand-mark {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    overflow: hidden;
    padding: 4px;
    background: radial-gradient(circle at top, rgba(255,255,255,0.96), rgba(37,99,235,0.18));
    box-shadow: 0 10px 28px rgba(37,99,235,.32);
}

.auth-brand-mark .o2m-logo-image {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: contain;
}

.password-field { position: relative; }
.password-field .form-control { padding-right: 3.1rem; }

.password-visibility-toggle {
    position: absolute;
    z-index: 3;
    top: 50%;
    right: .45rem;
    display: grid;
    width: 2.35rem;
    height: 2.35rem;
    padding: 0;
    place-items: center;
    transform: translateY(-50%);
    border: 0;
    border-radius: 10px;
    background: transparent;
    color: #64748b;
    cursor: pointer;
}

.password-visibility-toggle:hover { background: #eff6ff; color: var(--brand-dark); }
.password-visibility-toggle:focus-visible { outline: 3px solid rgba(37,99,235,.24); }
.password-visibility-toggle svg {
    width: 19px;
    height: 19px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.9;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.shop-availability-card {
    display: flex;
    align-items: center;
    gap: .8rem;
    margin-bottom: 1rem;
    padding: .85rem 1rem;
    border: 1px solid #dce6f2;
    border-radius: 17px;
    background: #f8fafc;
}

.shop-availability-icon {
    display: grid;
    width: 42px;
    height: 42px;
    flex: 0 0 42px;
    place-items: center;
    border-radius: 50%;
    background: #e2e8f0;
    color: #475569;
    font-size: 1rem;
    font-weight: 900;
}

.shop-availability-copy { display: flex; min-width: 0; flex-direction: column; }
.shop-availability-copy strong { color: var(--text-main); font-size: .87rem; }
.shop-availability-copy > span:not(.shop-availability-badge) { color: var(--text-muted); font-size: .72rem; }
.shop-availability-copy small { margin-top: .15rem; color: #64748b; font-size: .66rem; }
.shop-availability-badge {
    width: fit-content;
    margin-bottom: .12rem;
    color: #475569;
    font-size: .61rem;
    font-weight: 850;
    letter-spacing: .05em;
    text-transform: uppercase;
}

.shop-availability-card--open { border-color: rgba(16,185,129,.28); background: #f0fdf4; }
.shop-availability-card--open .shop-availability-icon { background: #d1fae5; color: #047857; }
.shop-availability-card--open .shop-availability-badge { color: #047857; }
.shop-availability-card--closed { border-color: rgba(239,68,68,.24); background: #fff7f7; }
.shop-availability-card--closed .shop-availability-icon { background: #fee2e2; color: #b91c1c; }
.shop-availability-card--closed .shop-availability-badge { color: #b91c1c; }
.shop-availability-card--paused { border-color: rgba(245,158,11,.3); background: #fffbeb; }
.shop-availability-card--paused .shop-availability-icon { background: #fef3c7; color: #b45309; }
.shop-availability-card--paused .shop-availability-badge { color: #b45309; }
.menu-add-btn:disabled { cursor: not-allowed; opacity: .68; }

/* ── Mobile tweaks ────────────────────────────────────────── */
@media (max-width: 575.98px) {
    .customer-main {
        padding: 1rem 0.9rem;
    }

    .panel-title {
        font-size: 1.1rem;
    }

    .auth-card .card-body {
        padding: 1.3rem;
    }

    .customer-sidebar {
        width: 80vw;
        max-width: 300px;
    }

    .owner-shop-quick-controls,
    .owner-settings-switches {
        grid-template-columns: 1fr;
    }

    .owner-shop-operations-heading { align-items: center; }
    .owner-shop-operations-heading .btn { flex: 0 0 auto; }
}


/* ============================================================
   Category filter — horizontal scroll strip (mobile-friendly)
   ============================================================ */

.cat-filter-strip {
    display: flex;
    gap: 0.4rem;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
    padding: 0.35rem 0.2rem 0.55rem;
    scrollbar-width: none;   /* Firefox */
    background: rgba(255,255,255,.55);
    border: 1px solid rgba(148,163,184,.18);
    border-radius: 16px;
    box-shadow: 0 8px 16px rgba(15,23,42,.04);
}

.cat-filter-strip::-webkit-scrollbar {
    display: none; /* Chrome/Safari */
}

.cat-filter-strip .btn {
    flex-shrink: 0;
    scroll-snap-align: start;
    border-radius: 999px;
    padding: 0.3rem 0.85rem;
    font-size: 0.8rem;
    white-space: nowrap;
}

/* ============================================================
   Menu cards — responsive image + compact body
   ============================================================ */

.menu-card-img {
    height: 160px;
    object-fit: cover;
    width: 100%;
}

.menu-card-body {
    padding: 0.65rem;
}

/* Image wrapper — needed so the pill can be positioned absolutely over the image */
.menu-img-wrap {
    position: relative;
    overflow: hidden;
    border-radius: 12px 12px 0 0;
    flex-shrink: 0;
}

.menu-img-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f1f5f9;
    color: #94a3b8;
    font-size: 2rem;
}

/* ── Category pill overlay ────────────────────────────────── */

.menu-cat-pill {
    position: absolute;
    top: 8px;
    left: 8px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 9px 3px 6px;
    border-radius: 999px;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    border: 1px solid rgba(255,255,255,0.72);
    box-shadow: 0 2px 8px rgba(0,0,0,0.18);
    white-space: nowrap;
    pointer-events: none;
    transition: transform 0.2s ease;
}

.menu-cat-pill-icon {
    font-size: 0.78rem;
    line-height: 1;
}

.menu-cat-pill-label {
    line-height: 1;
}

/* Soft category tints keep semantic status colors visually distinct. */
.menu-cat-pill.cat-food    { background: rgba(239,246,255,.94); color:#1e40af; }
.menu-cat-pill.cat-drink   { background: rgba(236,254,255,.94); color:#155e75; }
.menu-cat-pill.cat-salad   { background: rgba(240,253,244,.94); color:#166534; }
.menu-cat-pill.cat-snack   { background: rgba(255,251,235,.94); color:#92400e; }
.menu-cat-pill.cat-dessert { background: rgba(255,241,242,.94); color:#9f1239; }
.menu-cat-pill.cat-other   { background: rgba(241,245,249,.94); color:#334155; }

/* Lift pill slightly when card is hovered */
.menu-card:hover .menu-cat-pill {
    transform: translateY(-2px);
}

.menu-card-title {
    font-size: 0.88rem;
    font-weight: 700;
    color: #172033;
    margin-bottom: 0.25rem;
    /* Clamp to 2 lines on small screens */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.menu-card-desc {
    font-size: 0.75rem;
    line-height: 1.35;
    /* Clamp description to 2 lines */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin-bottom: 0.35rem;
}

.menu-card-price {
    font-size: 0.88rem;
}

.menu-add-btn {
    font-size: 0.8rem;
    padding: 0.3rem 0.5rem;
    border-radius: 8px;
    font-weight: 600;
}

/* Hover lift only on non-touch devices */
@media (hover: hover) {
    .menu-card:hover {
        transform: translateY(-4px);
        box-shadow: 0 8px 20px rgba(0,0,0,.12) !important;
    }
}

/* ============================================================
   Mobile-specific overrides  ≤ 575px
   ============================================================ */

@media (max-width: 575.98px) {

    /* Navbar — tighter brand text */
    .navbar-brand {
        font-size: 0.95rem;
    }

    /* Menu heading */
    .fs-4.fs-md-2 {
        font-size: 1.15rem !important;
    }

    /* Card image shorter on very small phones */
    .menu-card-img {
        height: 110px;
    }

    /* Card body — even tighter */
    .menu-card-body {
        padding: 0.5rem;
    }

    .menu-card-title {
        font-size: 0.82rem;
    }

    .menu-card-price {
        font-size: 0.82rem;
    }

    .menu-add-btn {
        font-size: 0.75rem;
        padding: 0.25rem 0.4rem;
    }

    /* Your Orders section */
    #orders-container .card-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.3rem;
    }

    /* FAB — keep above iOS bottom bar */
    #cart-fab {
        bottom: calc(1.25rem + env(safe-area-inset-bottom, 0px));
        right: 1.25rem;
        width: 54px;
        height: 54px;
    }

    #cart-fab-icon {
        width: 24px;
        height: 24px;
    }

    /* Side drawer full-width on very small screens */
    #cart-drawer {
        width: 100vw;
        border-radius: 0;
    }
}

/* ============================================================
   Tablet: 576–767px  →  2 col (same as mobile but bigger cards)
   ============================================================ */

@media (min-width: 576px) and (max-width: 767.98px) {
    .menu-card-img {
        height: 140px;
    }
}


/* ============================================================
   FAB — Floating Action Button (Cart)
   ============================================================ */

#cart-fab {
    position: fixed;
    bottom: 1.75rem;
    right: 1.75rem;
    z-index: 1050;
    width: 62px;
    height: 62px;
    border-radius: 50%;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--brand-dark), var(--brand-hover));
    box-shadow: 0 6px 20px rgba(29,78,216,.42);
    transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1),
                box-shadow 0.2s ease;
    animation: fabBounceIn 0.45s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

#cart-fab:hover {
    transform: scale(1.1);
    box-shadow: 0 10px 30px rgba(29,78,216,.52);
}

#cart-fab:active {
    transform: scale(0.95);
}

/* Pulse ring — shown only when cart has items */
#cart-fab.has-items::before {
    content: '';
    position: absolute;
    inset: -6px;
    border-radius: 50%;
    border: 2px solid rgba(37, 99, 235, 0.5);
    animation: fabPulse 2s ease-out infinite;
    pointer-events: none;
}

#cart-fab-icon {
    width: 28px;
    height: 28px;
    fill: none;
    stroke: #fff;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    pointer-events: none;
    flex-shrink: 0;
}

#cart-fab-badge {
    position: absolute;
    top: -4px;
    right: -4px;
    min-width: 22px;
    height: 22px;
    padding: 0 5px;
    border-radius: 999px;
    background: var(--danger);
    color: #fff;
    font-size: 0.72rem;
    font-weight: 700;
    line-height: 22px;
    text-align: center;
    border: 2px solid #fff;
    box-shadow: 0 2px 6px rgba(0,0,0,.25);
    transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1),
                opacity 0.2s ease;
    pointer-events: none;
}

#cart-fab-badge.d-none {
    transform: scale(0);
    opacity: 0;
}

#cart-fab-badge:not(.d-none) {
    transform: scale(1);
    opacity: 1;
}

@keyframes fabBounceIn {
    from { transform: scale(0); opacity: 0; }
    to   { transform: scale(1); opacity: 1; }
}

@keyframes fabPulse {
    0%   { transform: scale(1);   opacity: 1; }
    70%  { transform: scale(1.5); opacity: 0; }
    100% { transform: scale(1);   opacity: 0; }
}

/* ============================================================
   Side Cart Drawer
   ============================================================ */

/* Backdrop */
#cart-drawer-backdrop {
    position: fixed;
    inset: 0;
    z-index: 1055;
    background: rgba(15, 23, 42, 0.45);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}

#cart-drawer-backdrop.open {
    opacity: 1;
    pointer-events: all;
}

/* Drawer panel */
#cart-drawer {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 1060;
    width: min(420px, 95vw);
    background: #fff;
    box-shadow: -8px 0 40px rgba(0,0,0,.18);
    display: flex;
    flex-direction: column;
    transform: translateX(100%);
    transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    border-radius: 20px 0 0 20px;
    overflow: hidden;
}

#cart-drawer.open {
    transform: translateX(0);
}

/* Drawer header */
#cart-drawer-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.1rem 1.4rem;
    background: linear-gradient(135deg, var(--brand-dark), var(--brand-hover));
    color: #fff;
    flex-shrink: 0;
}

#cart-drawer-header h5 {
    margin: 0;
    font-weight: 700;
    font-size: 1.05rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

#drawer-close-btn {
    background: rgba(255,255,255,.2);
    border: none;
    color: #fff;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    font-size: 1.1rem;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s;
    flex-shrink: 0;
}

#drawer-close-btn:hover {
    background: rgba(255,255,255,.35);
}

/* Drawer body (scrollable) */
#cart-drawer-body {
    flex: 1;
    overflow-y: auto;
    padding: 1rem 1.25rem;
    scroll-behavior: smooth;
}

#cart-drawer-body::-webkit-scrollbar {
    width: 5px;
}

#cart-drawer-body::-webkit-scrollbar-track {
    background: #f1f5f9;
}

#cart-drawer-body::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 999px;
}

/* Drawer item row */
.drawer-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 0;
    border-bottom: 1px solid #f1f5f9;
    animation: itemSlideIn 0.25s ease both;
}

.drawer-item:last-child {
    border-bottom: none;
}

@keyframes itemSlideIn {
    from { opacity: 0; transform: translateX(12px); }
    to   { opacity: 1; transform: translateX(0); }
}

.drawer-item-info {
    flex: 1;
    min-width: 0;
}

.drawer-item-name {
    font-weight: 600;
    font-size: 0.9rem;
    color: #172033;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.drawer-item-price {
    font-size: 0.8rem;
    color: #64748b;
    margin-top: 1px;
}

.drawer-qty-ctrl {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    background: #f8fafc;
    border-radius: 999px;
    padding: 2px 6px;
    border: 1px solid #dce6f2;
}

.drawer-qty-btn {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    border: none;
    background: #dce6f2;
    color: #334155;
    font-size: 0.95rem;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s, transform 0.15s;
    flex-shrink: 0;
}

.drawer-qty-btn:hover {
    background: var(--brand-dark);
    color: #fff;
    transform: scale(1.1);
}

.drawer-qty-num {
    min-width: 22px;
    text-align: center;
    font-weight: 600;
    font-size: 0.88rem;
    color: #172033;
}

.drawer-item-subtotal {
    font-weight: 700;
    font-size: 0.88rem;
    color: var(--brand-dark);
    white-space: nowrap;
    min-width: 70px;
    text-align: right;
}

.drawer-remove-btn {
    background: none;
    border: none;
    color: var(--text-muted);
    font-size: 1rem;
    cursor: pointer;
    padding: 0 4px;
    transition: color 0.15s, transform 0.15s;
    line-height: 1;
}

.drawer-remove-btn:hover {
    color: var(--danger);
    transform: scale(1.2);
}

/* Empty state */
#drawer-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    gap: 0.6rem;
    padding: 2rem;
    color: var(--text-muted);
    text-align: center;
}

#drawer-empty .empty-icon {
    font-size: 3rem;
    line-height: 1;
}

/* Drawer footer (sticky) */
#cart-drawer-footer {
    flex-shrink: 0;
    padding: 1rem 1.25rem 1.25rem;
    border-top: 1px solid #f1f5f9;
    background: #fff;
    box-shadow: 0 -4px 12px rgba(0,0,0,.06);
}

.drawer-total-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.85rem;
}

.drawer-total-label {
    font-size: 0.9rem;
    color: #64748b;
    font-weight: 500;
}

.drawer-total-amount {
    font-size: 1.15rem;
    font-weight: 800;
    color: #172033;
}

#drawer-checkout-btn {
    width: 100%;
    padding: 0.75rem;
    border-radius: 12px;
    font-size: 0.95rem;
    font-weight: 700;
    background: linear-gradient(135deg, var(--brand-dark), var(--brand-hover));
    color: #fff;
    border: none;
    cursor: pointer;
    transition: transform 0.15s, box-shadow 0.15s;
    box-shadow: 0 4px 14px rgba(37,99,235,.35);
}

#drawer-checkout-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 20px rgba(37,99,235,.45);
}

#drawer-checkout-btn:active {
    transform: translateY(0);
}

#drawer-checkout-btn:disabled {
    background: #64748b;
    box-shadow: none;
    cursor: not-allowed;
    transform: none;
}

/* Keep FAB hidden on very small screens in landscape if drawer is open */
@media (max-width: 480px) {
    #cart-drawer {
        width: 100vw;
        border-radius: 0;
    }
}

/* ============================================================
   Global Brand Overrides — Orange + Navy system
   ============================================================ */

/* One navigation color across customer, owner and admin surfaces. */
.navbar.bg-primary {
    background: linear-gradient(135deg, var(--navy) 0%, var(--navy-mid) 100%) !important;
    box-shadow: 0 2px 16px rgba(15,23,42,.28);
    border-bottom: 1px solid rgba(37,99,235,.28);
}

/* Owner navbar — deep navy */
.navbar.bg-dark {
    background: linear-gradient(135deg, var(--navy) 0%, #172033 100%) !important;
    box-shadow: 0 2px 16px rgba(0,0,0,.3);
    border-bottom: 1px solid rgba(37,99,235,.15);
}

/* Bootstrap btn-primary → brand orange */
.btn-primary {
    --bs-btn-bg:                 var(--brand-dark);
    --bs-btn-border-color:       var(--brand-dark);
    --bs-btn-hover-bg:           var(--brand-hover);
    --bs-btn-hover-border-color: var(--brand-hover);
    --bs-btn-active-bg:          var(--brand-hover);
    --bs-btn-active-border-color:var(--brand-hover);
    --bs-btn-focus-shadow-rgb:   194,65,12;
}

/* Bootstrap btn-success → emerald */
.btn-success {
    --bs-btn-bg:                 var(--success);
    --bs-btn-border-color:       var(--success);
    --bs-btn-hover-bg:           var(--success-dark);
    --bs-btn-hover-border-color: var(--success-dark);
    --bs-btn-active-bg:          var(--success-dark);
    --bs-btn-active-border-color:var(--success-dark);
    --bs-btn-focus-shadow-rgb:   4,120,87;
    color: #fff;
}

.btn-danger {
    --bs-btn-bg:                 var(--danger);
    --bs-btn-border-color:       var(--danger);
    --bs-btn-hover-bg:           var(--danger-dark);
    --bs-btn-hover-border-color: var(--danger-dark);
    --bs-btn-active-bg:          var(--danger-dark);
    --bs-btn-active-border-color:var(--danger-dark);
    --bs-btn-focus-shadow-rgb:   185,28,28;
}

/* Bootstrap btn-outline-primary → orange */
.btn-outline-primary {
    --bs-btn-color:              var(--brand-dark);
    --bs-btn-border-color:       var(--brand-dark);
    --bs-btn-hover-bg:           var(--brand-dark);
    --bs-btn-hover-border-color: var(--brand-dark);
    --bs-btn-active-bg:          var(--brand-hover);
}

/* Navbar brand */
.navbar-brand {
    font-weight: 700;
    letter-spacing: 0.01em;
}

/* Card border tweak */
.card {
    border-color: var(--border);
}

/* Table hover — subtle orange tint */
.table-hover tbody tr:hover {
    background-color: rgba(37,99,235,.04) !important;
}

/* Accessible Bootstrap utility colors. */
.text-primary { color: var(--brand-dark) !important; }
.text-success { color: var(--success) !important; }
.text-danger { color: var(--danger) !important; }
.badge.bg-primary,
.text-bg-primary { background-color: var(--brand-dark) !important; color: #fff !important; }
.badge.bg-success,
.text-bg-success { background-color: var(--success) !important; color: #fff !important; }
.badge.bg-danger,
.text-bg-danger { background-color: var(--danger) !important; color: #fff !important; }
.badge.bg-info,
.text-bg-info { background-color: var(--info) !important; color: #fff !important; }
.text-bg-warning { background-color: var(--warning) !important; color: #fff !important; }
.badge.bg-secondary,
.text-bg-secondary { background-color: #475569 !important; color: #fff !important; }

/* Shared order status language used by customer, owner and history views. */
.order-status {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    padding: .3rem .65rem;
    border: 1px solid transparent;
    border-radius: 999px;
    font-size: .72rem;
    font-weight: 800;
    line-height: 1.2;
    white-space: nowrap;
}
.order-status--pending   { background: var(--status-pending-soft); color: #92400e; border-color: #fde68a; }
.order-status--preparing { background: var(--status-preparing-soft); color: #155e75; border-color: #67e8f9; }
.order-status--ready     { background: var(--status-ready-soft); color: #065f46; border-color: #6ee7b7; }
.order-status--sent      { background: var(--status-sent-soft); color: #1e40af; border-color: #93c5fd; }
.order-status--received  { background: var(--status-received-soft); color: #064e3b; border-color: #6ee7b7; }
.order-status--cancelled { background: var(--status-cancelled-soft); color: #991b1b; border-color: #fecaca; }
.order-status--unknown   { background: #f1f5f9; color: #475569; border-color: #cbd5e1; }

.order-card--pending   { border-color: #f59e0b !important; }
.order-card--preparing { border-color: var(--info) !important; }
.order-card--ready     { border-color: var(--success) !important; }
.order-card--sent      { border-color: var(--sent) !important; }
.order-card--received  { border-color: var(--received) !important; }
.order-card--cancelled { border-color: var(--danger) !important; }
.order-card-status-surface { background: #f8fafc; }
.order-contact-link {
    display: inline;
    padding: 0;
    border: 0;
    background: transparent;
    color: #2563eb;
    font: inherit;
    font-weight: 650;
    text-align: left;
    text-decoration: underline;
    text-decoration-color: rgba(37, 99, 235, .35);
    text-underline-offset: 3px;
    cursor: pointer;
}
.order-contact-link:hover { color: #1d4ed8; text-decoration-color: currentColor; }
.order-contact-link:focus-visible { outline: 3px solid rgba(37, 99, 235, .25); outline-offset: 3px; border-radius: 3px; }
.order-card-header {
    display: flex;
    gap: .75rem;
    align-items: center;
    justify-content: space-between;
}
.order-card-heading {
    display: flex;
    min-width: 0;
    gap: .7rem;
    align-items: center;
    flex-wrap: wrap;
}
.order-card-number { color: var(--text-main); font-weight: 750; white-space: nowrap; }
.order-customer-chip {
    display: inline-flex;
    min-width: 0;
    max-width: 250px;
    padding: .28rem .45rem .28rem .3rem;
    border: 1px solid #dbeafe;
    border-radius: 999px;
    align-items: center;
    gap: .48rem;
    background: #fff;
    color: var(--text-main);
    box-shadow: 0 2px 8px rgba(15, 23, 42, .06);
    text-align: left;
    transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.order-customer-chip:hover {
    border-color: #93c5fd;
    box-shadow: 0 5px 14px rgba(37, 99, 235, .13);
    transform: translateY(-1px);
}
.order-customer-chip:focus-visible { outline: 3px solid rgba(37, 99, 235, .22); outline-offset: 2px; }
.order-customer-chip-avatar {
    display: grid;
    width: 34px;
    height: 34px;
    flex: 0 0 34px;
    overflow: hidden;
    border-radius: 50%;
    place-items: center;
    background: linear-gradient(135deg, #2563eb, #0e7490);
    color: #fff;
    font-size: .66rem;
    font-weight: 800;
    letter-spacing: .03em;
}
.order-customer-chip-avatar img { width: 100%; height: 100%; object-fit: cover; }
.order-customer-chip-copy { display: flex; min-width: 0; flex: 1; flex-direction: column; line-height: 1.08; }
.order-customer-chip-copy small { color: #64748b; font-size: .56rem; font-weight: 750; letter-spacing: .06em; text-transform: uppercase; }
.order-customer-chip-copy strong { overflow: hidden; margin-top: .15rem; font-size: .78rem; text-overflow: ellipsis; white-space: nowrap; }
.order-customer-chip-arrow { color: #60a5fa; font-size: 1.15rem; line-height: 1; }
@media (max-width: 575.98px) {
    .order-card-header { align-items: flex-start; }
    .order-card-heading { gap: .45rem; }
    .order-card-number { width: 100%; }
    .order-customer-chip { max-width: min(230px, 72vw); }
}

/* Payment options share one selection pattern; brand names remain in the copy. */
.payment-method-btn {
    --bs-btn-color: #334155;
    --bs-btn-border-color: #cbd5e1;
    --bs-btn-hover-color: var(--brand-dark);
    --bs-btn-hover-bg: var(--brand-soft);
    --bs-btn-hover-border-color: var(--brand);
    min-width: 132px;
    background: #fff;
}
.payment-method-btn.active,
.payment-method-btn.active:hover {
    border-color: var(--brand-dark) !important;
    background: var(--brand-soft) !important;
    color: var(--brand-dark) !important;
    box-shadow: 0 0 0 3px rgba(37,99,235,.14);
}
.payment-detail-card {
    border-color: #bfdbfe !important;
    background: linear-gradient(135deg, var(--brand-soft), #fff);
}
.payment-brand-name,
.payment-amount-emphasis { color: var(--brand-dark); }
.order-delivery-note {
    padding: .65rem;
    border-left: 4px solid #d97706;
    border-radius: .375rem;
    background: #fffbeb;
}

/* ── Cancelled / Rejected badge ────────────────────────────── */
.badge.bg-cancelled, .badge-cancelled {
    background-color: #dc2626 !important;
    color: #fff !important;
}

/* ── History nav button (sidebar) ────────────────────────────── */
.sidebar-history-link {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    border-radius: 12px;
    border: none;
    background: transparent;
    color: var(--text-muted);
    font-weight: 600;
    font-size: 0.92rem;
    cursor: pointer;
    text-decoration: none;
    transition: background 0.18s, color 0.18s;
    width: 100%;
    text-align: left;
}
.sidebar-history-link:hover {
    background: rgba(37,99,235,.10);
    color: var(--brand-dark);
    text-decoration: none;
}
.sidebar-history-link svg { flex-shrink: 0; }

/* ── Today's date pill (orders panel header) ────────────────── */
.today-date-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 12px;
    border-radius: 999px;
    background: linear-gradient(135deg, rgba(37,99,235,.12), rgba(96,165,250,.10));
    border: 1px solid rgba(37,99,235,.25);
    color: var(--brand-dark);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.01em;
}

/* ── View History accent button ─────────────────────────────── */
.btn-history {
    background: linear-gradient(135deg, var(--brand-dark), var(--brand-hover));
    border: none;
    color: #fff;
    font-weight: 700;
    box-shadow: 0 6px 18px rgba(29,78,216,.22);
    transition: transform 0.18s, box-shadow 0.18s;
}
.btn-history:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 24px rgba(29,78,216,.30);
    color: #fff;
}

/* ── Order Progress Tracker (customer today view) ─────────────── */
.order-tracker-card {
    border: 1px solid rgba(37,99,235,.20);
    border-radius: 18px;
    background: linear-gradient(180deg, #ffffff 0%, #eff6ff 100%);
    box-shadow: 0 10px 30px rgba(37,99,235,.10);
    margin-bottom: 1.1rem;
    overflow: hidden;
    transition: box-shadow 0.2s, transform 0.2s;
}
.order-tracker-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 16px 36px rgba(37,99,235,.16);
}
.order-tracker-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 18px 10px;
    border-bottom: 1px solid rgba(37,99,235,.12);
}
.order-tracker-id {
    font-weight: 800;
    font-size: 0.98rem;
    color: var(--text-main);
}
.order-tracker-time {
    font-size: 0.75rem;
    color: var(--text-muted);
    margin-top: 1px;
}
.order-tracker-body {
    padding: 14px 18px;
}

/* Progress steps */
.order-steps {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 10px 0 14px;
    position: relative;
}
.order-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    flex: 1;
    position: relative;
    z-index: 1;
}
.order-step-dot {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: #dce6f2;
    border: 2px solid #dce6f2;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    transition: background 0.35s, border-color 0.35s, box-shadow 0.35s;
}
.order-step-dot.done {
    background: linear-gradient(135deg, var(--success), var(--success-dark));
    border-color: var(--success);
    box-shadow: 0 0 0 4px rgba(4,120,87,.18);
}
.order-step-dot.active {
    background: linear-gradient(135deg, var(--brand-dark), var(--brand-hover));
    border-color: var(--brand-dark);
    box-shadow: 0 0 0 5px rgba(37,99,235,.22);
    animation: pulse-step 1.4s ease-in-out infinite;
}
.order-step-dot.cancelled {
    background: linear-gradient(135deg, var(--danger), var(--danger-dark));
    border-color: var(--danger);
}
@keyframes pulse-step {
    0%, 100% { box-shadow: 0 0 0 5px rgba(37,99,235,.22); }
    50%       { box-shadow: 0 0 0 9px rgba(37,99,235,.08); }
}
.order-step-label {
    font-size: 0.67rem;
    font-weight: 700;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    text-align: center;
}
.order-step-label.active-label { color: var(--brand-dark); }
.order-step-label.done-label   { color: var(--success); }
.order-step-label.cancelled-label { color: var(--danger); }

/* Connecting line between steps */
.order-step-line {
    height: 3px;
    flex: 1;
    background: #dce6f2;
    margin-bottom: 20px;
    transition: background 0.35s;
    z-index: 0;
}
.order-step-line.line-done { background: linear-gradient(90deg, var(--success), var(--success-dark)); }

.order-tracker-items {
    font-size: 0.83rem;
    color: var(--text-muted);
    line-height: 1.5;
}
.order-tracker-total {
    font-weight: 800;
    color: var(--brand-dark);
    font-size: 0.95rem;
    margin-top: 6px;
}
.order-tracker-note {
    font-size: 0.78rem;
    color: var(--text-muted);
    background: rgba(37,99,235,.07);
    border-left: 3px solid var(--brand);
    padding: 6px 10px;
    border-radius: 0 8px 8px 0;
    margin-top: 6px;
}

/* Empty today's orders state */
.today-empty-state {
    text-align: center;
    padding: 48px 24px;
    color: var(--text-muted);
}
.today-empty-state .empty-emoji { font-size: 3rem; margin-bottom: 12px; }
.today-empty-state h5 { font-weight: 700; color: var(--text-main); }
.today-empty-state p  { font-size: 0.9rem; }

/* ── History Panel ──────────────────────────────────────────── */
@keyframes histFadeUp {
    from { opacity: 0; transform: translateY(16px); }
    to   { opacity: 1; transform: translateY(0); }
}

.hist-stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
    gap: 12px;
    margin-bottom: 20px;
}
.hist-stat-card {
    background: linear-gradient(135deg, #ffffff, #f8fafc);
    border: 1px solid rgba(37,99,235,.18);
    border-radius: 16px;
    padding: 16px 14px;
    text-align: center;
    box-shadow: 0 4px 16px rgba(37,99,235,.08);
    transition: transform .2s, box-shadow .2s;
}
.hist-stat-card:hover { transform: translateY(-3px); box-shadow: 0 10px 24px rgba(37,99,235,.14); }
.hist-stat-icon  { font-size: 1.5rem; margin-bottom: 6px; }
.hist-stat-value { font-size: 1.4rem; font-weight: 900; color: var(--text-main); line-height: 1; }
.hist-stat-label { font-size: .7rem; font-weight: 700; color: var(--text-muted); text-transform: uppercase; letter-spacing: .05em; margin-top: 4px; }

.hist-range-strip {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    margin-bottom: 16px;
}
.hist-range-btn {
    padding: 5px 14px;
    border-radius: 999px;
    border: 1.5px solid var(--border);
    font-size: .8rem;
    font-weight: 700;
    cursor: pointer;
    background: #fff;
    color: var(--text-muted);
    transition: all .18s;
}
.hist-range-btn.active,
.hist-range-btn:hover {
    background: linear-gradient(135deg, var(--brand-dark), var(--brand-hover));
    border-color: var(--brand-dark);
    color: #fff;
}

.hist-custom-row {
    display: none;
    flex-wrap: wrap;
    gap: 12px;
    align-items: center;
    padding: 12px 14px;
    border-radius: 14px;
    background: #fff;
    border: 1px solid rgba(37,99,235,.18);
    box-shadow: 0 4px 14px rgba(37,99,235,.07);
    margin-bottom: 16px;
}
.hist-custom-row.show { display: flex; }
.hist-date-input {
    border: 1.5px solid var(--border);
    border-radius: 10px;
    padding: 5px 11px;
    font-size: .85rem;
    font-weight: 600;
    color: var(--text-main);
    outline: none;
}
.hist-date-input:focus { border-color: var(--brand-dark); box-shadow: 0 0 0 3px rgba(37,99,235,.12); }

.hist-export-btn {
    background: linear-gradient(135deg, var(--success), var(--success-dark));
    border: none;
    color: #fff;
    padding: 7px 16px;
    border-radius: 12px;
    font-weight: 700;
    font-size: .82rem;
    cursor: pointer;
    box-shadow: 0 6px 16px rgba(4,120,87,.22);
    transition: transform .18s, box-shadow .18s;
}
.hist-export-btn:hover { transform: translateY(-2px); box-shadow: 0 10px 22px rgba(4,120,87,.30); }

.hist-cards-list { display: flex; flex-direction: column; gap: 12px; }

.hist-card {
    background: linear-gradient(180deg, #ffffff, #eff6ff);
    border: 1px solid rgba(37,99,235,.18);
    border-radius: 16px;
    padding: 16px 18px;
    box-shadow: 0 6px 20px rgba(37,99,235,.08);
    animation: histFadeUp .3s ease both;
    transition: transform .2s, box-shadow .2s;
}
.hist-card:hover { transform: translateY(-2px); box-shadow: 0 12px 28px rgba(37,99,235,.14); }
.hist-card-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 10px; }
.hist-card-id   { font-weight: 800; font-size: .95rem; color: var(--text-main); }
.hist-card-meta { font-size: .76rem; color: var(--text-muted); margin-top: 2px; }
.hist-item-row  { display: flex; justify-content: space-between; font-size: .8rem; color: #475569; padding: 3px 0; border-bottom: 1px dashed #f1f5f9; }
.hist-item-summary { font-size: .8rem; color: var(--text-muted); line-height: 1.5; margin-bottom: 6px; }
.hist-card-total  { font-weight: 800; color: var(--brand-dark); font-size: .9rem; margin-top: 6px; }
.hist-note { font-size: .76rem; color: var(--text-muted); background: rgba(37,99,235,.07); border-left: 3px solid var(--brand); padding: 5px 10px; border-radius: 0 8px 8px 0; margin: 6px 0; }

.hist-badge { display: inline-block; padding: 3px 10px; border-radius: 999px; font-size: .72rem; font-weight: 700; color: #fff; white-space: nowrap; }
.hist-payment-badge { display: inline-flex; width: fit-content; padding: 3px 10px; border-radius: 999px; background: var(--navy-mid); color: #fff; font-size: .7rem; font-weight: 700; white-space: nowrap; }

.hist-date-group  { margin-bottom: 20px; }
.hist-date-label  { font-size: .78rem; font-weight: 800; color: var(--brand-dark); text-transform: uppercase; letter-spacing: .06em; margin-bottom: 8px; padding-bottom: 5px; border-bottom: 2px solid rgba(37,99,235,.18); }

.hist-loading { display: flex; align-items: center; gap: 14px; padding: 48px 24px; color: var(--text-muted); font-weight: 600; }
.hist-spinner { width: 26px; height: 26px; border: 3px solid var(--border); border-top-color: var(--brand-dark); border-radius: 50%; animation: spin .8s linear infinite; }

.hist-error { padding: 20px; background: var(--status-cancelled-soft); border: 1px solid #fecaca; border-radius: 14px; color: var(--danger); font-weight: 600; }

.hist-empty { text-align: center; padding: 52px 24px; color: var(--text-muted); }
.hist-empty-icon { font-size: 2.8rem; margin-bottom: 12px; }
.hist-empty h3 { font-weight: 800; color: var(--text-main); margin-bottom: 6px; }
.hist-empty p  { font-size: .88rem; }

/* Owner business intelligence dashboard */
.analytics-header { align-items: flex-start; flex-wrap: wrap; gap: .8rem; }
.analytics-range-bar { display: flex; gap: .35rem; margin-left: auto; padding: .28rem; overflow-x: auto; border: 1px solid #e2e8f0; border-radius: 12px; background: #f8fafc; scrollbar-width: none; }
.analytics-range-bar::-webkit-scrollbar { display: none; }
.analytics-apply-btn { padding: .52rem .85rem; border: 0; border-radius: 9px; color: #fff; background: #0f766e; font-size: .78rem; font-weight: 800; }
.analytics-summary-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .75rem; margin-bottom: .85rem; }
.analytics-kpi { display: flex; gap: .7rem; min-width: 0; padding: .95rem; border: 1px solid #e2e8f0; border-radius: 15px; background: #fff; box-shadow: 0 4px 16px rgba(15,23,42,.04); }
.analytics-kpi > span { display: grid; place-items: center; width: 38px; height: 38px; flex: 0 0 38px; border-radius: 11px; background: #f0fdfa; }
.analytics-kpi > div { display: grid; min-width: 0; }
.analytics-kpi small { color: #64748b; font-size: .68rem; font-weight: 750; }
.analytics-kpi strong { overflow: hidden; color: #0f172a; font-size: 1.12rem; text-overflow: ellipsis; white-space: nowrap; }
.analytics-kpi p { margin: .1rem 0 0; color: #94a3b8; font-size: .62rem; }
.analytics-dashboard-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .85rem; }
.analytics-card { min-width: 0; padding: 1rem; border: 1px solid #e2e8f0; border-radius: 16px; background: #fff; box-shadow: 0 5px 18px rgba(15,23,42,.04); }
.analytics-span-2 { grid-column: 1 / -1; }
.analytics-section-head { display: flex; justify-content: space-between; align-items: flex-start; gap: .8rem; margin-bottom: .9rem; }
.analytics-section-head h3, .analytics-operations-grid h4, .analytics-negative-reviews h4 { margin: 0; color: #172033; font-size: .9rem; font-weight: 850; }
.analytics-section-head p { margin: .12rem 0 0; color: #64748b; font-size: .68rem; }
.analytics-section-head > strong { color: #0f766e; font-size: .88rem; white-space: nowrap; }
.analytics-bar-chart { display: flex; align-items: flex-end; gap: .45rem; height: 190px; padding-top: 1.4rem; overflow-x: auto; }
.analytics-bar-item { display: grid; grid-template-rows: 18px 1fr 18px; align-items: end; justify-items: center; min-width: 42px; height: 100%; flex: 1; }
.analytics-bar-item > span { color: #64748b; font-size: .54rem; opacity: 0; transition: opacity .15s; white-space: nowrap; }
.analytics-bar-item:hover > span { opacity: 1; }
.analytics-bar-item i { width: min(26px, 72%); min-height: 4px; border-radius: 7px 7px 3px 3px; background: linear-gradient(180deg, #14b8a6, #0f766e); }
.analytics-bar-item small { color: #64748b; font-size: .58rem; white-space: nowrap; }
.analytics-insight-list { display: grid; gap: .55rem; }
.analytics-insight { display: flex; gap: .6rem; padding: .65rem; border-radius: 11px; background: #f8fafc; }
.analytics-insight > span { width: 5px; flex: 0 0 5px; border-radius: 99px; background: #14b8a6; }
.analytics-insight.warning > span { background: #f59e0b; }.analytics-insight.danger > span { background: #ef4444; }.analytics-insight.info > span { background: #3b82f6; }
.analytics-insight strong { color: #334155; font-size: .74rem; }.analytics-insight p { margin: .12rem 0 0; color: #64748b; font-size: .66rem; line-height: 1.4; }
.analytics-ranking { display: grid; gap: .72rem; }
.analytics-ranking article { display: grid; grid-template-columns: 24px 1fr auto; align-items: center; gap: .55rem; }
.analytics-ranking article > b { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 8px; color: #0f766e; background: #ccfbf1; font-size: .68rem; }
.analytics-ranking article > div > div { display: flex; justify-content: space-between; gap: .5rem; margin-bottom: .25rem; }
.analytics-ranking strong { color: #334155; font-size: .72rem; }.analytics-ranking span, .analytics-ranking em { color: #64748b; font-size: .62rem; font-style: normal; white-space: nowrap; }
.analytics-ranking i, .analytics-hour-chart i, .analytics-rating-bars i { display: block; height: 6px; overflow: hidden; border-radius: 99px; background: #eef2f7; }
.analytics-ranking i span, .analytics-hour-chart i span, .analytics-rating-bars i span { display: block; height: 100%; border-radius: inherit; background: #14b8a6; }
.analytics-tabs { display: flex; align-items: center; gap: .7rem; margin-bottom: .9rem; border-bottom: 1px solid #e2e8f0; }
.analytics-tabs button { padding: .35rem .1rem .55rem; border: 0; border-bottom: 2px solid #0f766e; color: #0f766e; background: transparent; font-size: .78rem; font-weight: 850; }.analytics-tabs span { color: #94a3b8; font-size: .65rem; }
.analytics-operations-grid, .analytics-satisfaction-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.2rem; }
.analytics-hour-chart, .analytics-rating-bars { display: grid; gap: .48rem; margin-top: .7rem; }
.analytics-hour-chart > div, .analytics-rating-bars > div { display: grid; grid-template-columns: 44px 1fr 24px; align-items: center; gap: .45rem; }
.analytics-hour-chart small, .analytics-rating-bars small { color: #64748b; font-size: .62rem; }.analytics-hour-chart strong, .analytics-rating-bars strong { color: #334155; font-size: .66rem; text-align: right; }
.analytics-metric-list { display: grid; grid-template-columns: 1fr 1fr; gap: .55rem; margin-top: .7rem; }
.analytics-metric-list div { display: grid; gap: .1rem; padding: .6rem; border-radius: 10px; background: #f8fafc; }.analytics-metric-list span { color: #64748b; font-size: .62rem; }.analytics-metric-list strong { color: #172033; font-size: .76rem; }
.analytics-negative-reviews { display: grid; align-content: start; gap: .5rem; }.analytics-negative-reviews article { padding: .55rem .65rem; border-left: 3px solid #fb7185; border-radius: 0 9px 9px 0; background: #fff1f2; }.analytics-negative-reviews strong { color: #9f1239; font-size: .68rem; }.analytics-negative-reviews p { margin: .12rem 0 0; color: #64748b; font-size: .64rem; }
.analytics-no-data { margin: .7rem 0; color: #94a3b8; font-size: .72rem; text-align: center; }
.analytics-table-tools { display: flex; gap: .55rem; margin-bottom: .65rem; }.analytics-table-tools input, .analytics-table-tools select { min-height: 38px; padding: .45rem .65rem; border: 1px solid #dbe3ec; border-radius: 9px; color: #334155; background: #fff; font-size: .72rem; }.analytics-table-tools input { flex: 1; }
.analytics-table { overflow-x: auto; }.analytics-table-head, .analytics-order-row > summary { display: grid; grid-template-columns: .7fr 1fr 1.5fr .8fr .7fr; align-items: center; gap: .65rem; min-width: 720px; }
.analytics-table-head { padding: .55rem .7rem; color: #64748b; background: #f8fafc; font-size: .62rem; font-weight: 800; text-transform: uppercase; }
.analytics-order-row { border-bottom: 1px solid #eef2f7; }.analytics-order-row > summary { padding: .7rem; cursor: pointer; list-style: none; color: #334155; font-size: .7rem; }.analytics-order-row > summary::-webkit-details-marker { display: none; }.analytics-order-row > summary:hover { background: #fafcfe; }.analytics-order-row > summary > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }.analytics-order-row > summary > span:first-child { display: grid; }.analytics-order-row small { color: #94a3b8; font-size: .58rem; }
.analytics-order-detail { display: grid; grid-template-columns: repeat(3, 1fr); gap: .55rem; padding: .65rem; background: #f8fafc; }.analytics-order-detail > div { display: grid; gap: .12rem; }.analytics-order-detail small { color: #64748b; }.analytics-order-detail strong { color: #334155; font-size: .65rem; font-weight: 700; }
.analytics-load-more { display: block; margin: .85rem auto 0; padding: .5rem .85rem; border: 1px solid #99f6e4; border-radius: 9px; color: #0f766e; background: #f0fdfa; font-size: .72rem; font-weight: 800; }

@media (max-width: 767.98px) {
    .analytics-summary-grid { grid-template-columns: 1fr 1fr; }
    .analytics-header { display: grid; }.analytics-range-bar { width: 100%; margin: 0; }
    .analytics-dashboard-grid { grid-template-columns: 1fr; }.analytics-span-2 { grid-column: auto; }
    .analytics-operations-grid, .analytics-satisfaction-grid { grid-template-columns: 1fr; }
    .analytics-table-head { display: none; }.analytics-table { width: 100%; overflow: visible; }
    .analytics-order-row { display: block; margin-bottom: .65rem; border: 0; }
    .analytics-order-row > summary { display: grid; grid-template-columns: minmax(0, 1fr) auto; min-width: 0; margin: 0; padding: 0; overflow: hidden; border: 1px solid #dbe3ec; border-radius: 12px; background: #fff; box-shadow: 0 3px 12px rgba(15,23,42,.04); }
    .analytics-order-row > summary > span { white-space: normal; }
    .analytics-order-identity { grid-column: 1; padding: .72rem .8rem; background: #f8fafc; }
    .analytics-order-status { grid-column: 2; align-self: center; justify-self: end; margin-right: .7rem; }
    .analytics-order-customer, .analytics-order-items, .analytics-order-total { grid-column: 1 / -1; display: grid; grid-template-columns: 76px minmax(0, 1fr); gap: .55rem; padding: .58rem .8rem; border-top: 1px solid #eef2f7; line-height: 1.4; }
    .analytics-order-customer::before, .analytics-order-items::before, .analytics-order-total::before { content: attr(data-label); color: #64748b; font-size: .62rem; font-weight: 800; text-transform: uppercase; letter-spacing: .03em; }
    .analytics-order-items { color: #475569; }
    .analytics-order-total { color: #0f766e; font-weight: 850; }
    .analytics-order-detail { grid-template-columns: 1fr 1fr; margin: -1px 0 0; border: 1px solid #dbe3ec; border-top: 0; border-radius: 0 0 12px 12px; }
    .analytics-order-row[open] > summary { border-radius: 12px 12px 0 0; }
}
@media (max-width: 480px) {
    .analytics-summary-grid { gap: .5rem; }.analytics-kpi { display: grid; padding: .7rem; }.analytics-kpi > span { width: 32px; height: 32px; }.analytics-kpi strong { font-size: .94rem; }.analytics-kpi p { display: none; }
    .analytics-card { padding: .8rem; }.analytics-table-tools { flex-direction: column; }.analytics-metric-list { grid-template-columns: 1fr; }.analytics-order-detail { grid-template-columns: 1fr; }
}

@media (max-width: 540px) {
    .hist-stats-grid { grid-template-columns: repeat(2, 1fr); }
    .hist-card { padding: 12px 12px; }
}

.receipt-confirm-panel {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .85rem;
    margin-top: .85rem;
    padding: .8rem;
    border: 1px solid #86efac;
    border-radius: 13px;
    background: #f0fdf4;
}
.receipt-confirm-panel strong,
.receipt-confirm-panel span { display: block; }
.receipt-confirm-panel strong { color: #166534; font-size: .86rem; }
.receipt-confirm-panel span { margin-top: .15rem; color: #4b5563; font-size: .72rem; }
.receipt-confirm-panel .btn { flex: 0 0 auto; }
.receipt-confirmed-note {
    margin-top: .8rem;
    padding: .65rem .75rem;
    border-radius: 11px;
    background: #ecfdf5;
    color: #047857;
    font-size: .78rem;
    font-weight: 750;
}

/* ============================================================
   Mobile UX polish
   ============================================================ */

html {
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
}

body {
    overflow-x: hidden;
}

button,
.btn,
input,
select,
textarea {
    touch-action: manipulation;
}

@media (max-width: 575.98px) {
    body {
        padding-bottom: env(safe-area-inset-bottom, 0px);
        background:
            radial-gradient(circle at top left, rgba(37,99,235,.12), transparent 32%),
            linear-gradient(180deg, #f8fafc 0%, #f8fafc 100%);
    }

    /* Compact, safe-area-aware app header */
    .navbar {
        position: sticky;
        top: 0;
        z-index: 1030;
        min-height: 60px;
        padding-top: max(.45rem, env(safe-area-inset-top, 0px));
        padding-bottom: .45rem;
    }

    .navbar .container-fluid {
        padding-left: .75rem !important;
        padding-right: .75rem !important;
        flex-wrap: nowrap;
    }

    .o2m-logo-nav {
        width: 38px;
        height: 38px;
        flex: 0 0 38px;
    }

    .navbar-brand {
        min-width: 0;
        margin-left: .45rem !important;
        gap: .45rem !important;
        font-size: .92rem;
    }

    .navbar-role-text {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .sidebar-hamburger,
    .profile-avatar-btn,
    .navbar .btn-outline-light {
        min-width: 44px;
        min-height: 44px;
    }

    .profile-avatar-btn {
        justify-content: center;
        padding: .45rem .6rem;
    }

    .profile-dropdown-menu {
        position: fixed;
        top: calc(64px + env(safe-area-inset-top, 0px));
        left: .75rem;
        right: .75rem;
        width: auto;
        max-width: none;
        border-radius: 18px;
    }

    .profile-dropdown-item {
        min-height: 48px;
        font-size: .9rem;
    }

    /* Main content breathes without wasting scarce screen width */
    .customer-layout,
    .customer-main {
        min-height: calc(100dvh - 60px);
    }

    .customer-main {
        padding: .85rem .75rem calc(5.25rem + env(safe-area-inset-bottom, 0px));
    }

    .panel-header {
        gap: .65rem;
        margin-bottom: .85rem;
        padding: .8rem;
        border-radius: 14px;
    }

    .panel-header > *,
    .panel-header > .d-flex,
    .panel-header > .input-group {
        width: 100%;
        max-width: none !important;
        margin-left: 0 !important;
    }

    .panel-header .btn-success {
        min-height: 44px;
    }

    .panel-title {
        font-size: 1.08rem;
        line-height: 1.35;
    }

    .form-control,
    .form-select {
        min-height: 46px;
        font-size: 16px; /* prevents iOS input zoom */
    }

    textarea.form-control {
        min-height: 92px;
    }

    .btn {
        min-height: 42px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    /* Filters stay on one thumb-friendly horizontal rail */
    .cat-filter-strip,
    .panel-header .d-flex.flex-wrap:has(.order-filter),
    #owner-hist-filter-bar,
    .hist-range-strip {
        flex-wrap: nowrap !important;
        overflow-x: auto;
        overscroll-behavior-inline: contain;
        scroll-snap-type: x proximity;
        scrollbar-width: none;
        padding-bottom: .35rem;
    }

    .cat-filter-strip::-webkit-scrollbar,
    .panel-header .d-flex.flex-wrap:has(.order-filter)::-webkit-scrollbar,
    #owner-hist-filter-bar::-webkit-scrollbar,
    .hist-range-strip::-webkit-scrollbar {
        display: none;
    }

    .order-filter,
    .hist-range-btn,
    .hist-export-btn,
    .btn-history {
        flex: 0 0 auto;
        min-height: 40px;
        scroll-snap-align: start;
        white-space: nowrap;
    }

    /* Cards: compact but readable, with no hover jump on touch */
    .card,
    .menu-card,
    .owner-menu-card,
    .customer-card,
    .hist-card,
    .order-tracker-card {
        border-radius: 14px;
        box-shadow: 0 6px 18px rgba(15,23,42,.08) !important;
    }

    .card:hover,
    .menu-card:hover,
    .owner-menu-card:hover,
    .customer-card:hover,
    .hist-card:hover,
    .order-tracker-card:hover {
        transform: none;
    }

    .menu-add-btn {
        width: 100%;
        min-height: 40px;
        margin-top: .15rem;
    }

    .owner-menu-img-wrap,
    .owner-menu-card-img {
        height: 120px;
    }

    .order-tracker-header,
    .hist-card-header {
        gap: .6rem;
    }

    .order-tracker-header {
        padding: 12px;
    }

    .order-tracker-body {
        padding: 12px;
    }

    .order-step-label {
        font-size: .58rem;
        letter-spacing: 0;
    }

    /* Cart controls wrap rather than squeezing item names */
    #cart-drawer {
        top: max(0px, env(safe-area-inset-top, 0px));
        height: calc(100dvh - env(safe-area-inset-top, 0px));
    }

    #cart-drawer-header {
        padding: .9rem 1rem;
    }

    #cart-drawer-body {
        padding: .75rem 1rem;
    }

    #cart-drawer-footer {
        padding: .85rem 1rem calc(.9rem + env(safe-area-inset-bottom, 0px));
    }

    .drawer-item {
        flex-wrap: wrap;
        gap: .55rem;
    }

    .drawer-item-info {
        flex: 1 1 calc(100% - 130px);
    }

    .drawer-item-subtotal {
        margin-left: auto;
    }

    .drawer-qty-btn,
    .drawer-remove-btn {
        min-width: 36px;
        min-height: 36px;
    }

    /* Bootstrap dialogs behave like reachable mobile bottom sheets */
    .modal-dialog,
    .modal-dialog-centered {
        min-height: 0;
        margin: auto .5rem 0;
        align-items: flex-end;
    }

    .modal.fade .modal-dialog {
        transform: translateY(32px);
    }

    .modal.show .modal-dialog {
        transform: none;
    }

    .modal-content {
        max-height: calc(100dvh - max(1rem, env(safe-area-inset-top, 0px)));
        border-radius: 22px 22px 0 0 !important;
        overflow: hidden;
    }

    .modal-header,
    .modal-body,
    .modal-footer {
        padding-left: 1rem !important;
        padding-right: 1rem !important;
    }

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

    .modal-footer {
        padding-bottom: calc(1rem + env(safe-area-inset-bottom, 0px)) !important;
        gap: .5rem;
    }

    .modal-footer .btn {
        flex: 1 1 140px;
    }

    /* History/date controls become full-width and readable */
    .hist-custom-row,
    .hist-custom-row > .d-flex {
        width: 100%;
    }

    .hist-date-input {
        flex: 1;
        min-width: 0;
        min-height: 44px;
        font-size: 16px;
    }

    #app-toast-container {
        left: .75rem !important;
        right: .75rem !important;
        bottom: calc(4.75rem + env(safe-area-inset-bottom, 0px)) !important;
        padding: 0 !important;
    }

    #app-toast-container .toast {
        width: 100%;
        min-width: 0;
        max-width: none;
    }

    .auth-shell {
        align-items: start;
        min-height: 100dvh;
        padding: max(1rem, env(safe-area-inset-top, 0px)) .75rem max(1rem, env(safe-area-inset-bottom, 0px));
    }

    .auth-shell .container,
    .auth-shell [class*="col-"] {
        padding-left: 0;
        padding-right: 0;
    }

    .auth-card {
        border-radius: 20px !important;
    }

    .auth-card .card-body {
        padding: 1.25rem 1rem;
    }

    .auth-card .btn[type="submit"] {
        min-height: 48px;
    }
}

@media (max-width: 379.98px) {
    .menu-card-img {
        height: 105px;
    }

    .navbar-role-text,
    .profile-avatar-caret {
        display: none;
    }

    .hist-stats-grid {
        grid-template-columns: 1fr 1fr;
        gap: .55rem;
    }

    .hist-stat-card {
        padding: 12px 8px;
    }
}

/* Keep the student menu consistently two columns on every phone. */
@media (max-width: 575.98px) {
    #menu-container > .col-6 {
        flex: 0 0 50%;
        width: 50%;
        max-width: 50%;
        padding-left: .3rem;
        padding-right: .3rem;
    }

    #menu-container {
        margin-left: -.3rem;
        margin-right: -.3rem;
    }

    #menu-container .menu-card-title {
        min-height: 2.15em;
    }

    #menu-container .menu-card-price {
        white-space: nowrap;
    }
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }
}

/* ============================================================
   Multi-shop customer experience
   ============================================================ */
.shop-picker {
    padding: 1rem;
    border: 1px solid rgba(37,99,235,.2);
    border-radius: 18px;
    background: linear-gradient(135deg, rgba(255,255,255,.96), rgba(255,247,237,.92));
    box-shadow: 0 10px 28px rgba(37,99,235,.08);
}

.shop-picker-heading {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: .85rem;
}

.shop-picker-kicker,
.admin-eyebrow {
    display: block;
    color: var(--brand-dark);
    font-size: .68rem;
    font-weight: 900;
    letter-spacing: .1em;
    text-transform: uppercase;
}

.shop-picker-heading h3 {
    margin: .18rem 0 0;
    font-size: 1rem;
    font-weight: 800;
}

.active-shop-label {
    padding: .35rem .75rem;
    border-radius: 999px;
    background: var(--brand-light);
    color: var(--brand-dark);
    font-size: .75rem;
    font-weight: 800;
    white-space: nowrap;
}

.shop-picker-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: .65rem;
}

.shop-choice {
    display: flex;
    align-items: center;
    gap: .7rem;
    min-height: 68px;
    padding: .65rem .75rem;
    border: 1.5px solid var(--border);
    border-radius: 14px;
    background: #fff;
    color: var(--text-main);
    text-align: left;
    cursor: pointer;
    transition: border-color .18s, box-shadow .18s, transform .18s;
}

.shop-choice:hover {
    border-color: rgba(37,99,235,.55);
    transform: translateY(-1px);
}

.shop-choice.active {
    border-color: var(--brand);
    background: linear-gradient(135deg, #eff6ff, #fff);
    box-shadow: 0 0 0 3px var(--brand-light);
}

.shop-choice-icon {
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    flex: 0 0 44px;
    overflow: hidden;
    border-radius: 12px;
    background: var(--brand-soft);
    font-size: 1.35rem;
}

.shop-choice-icon img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.shop-choice-copy {
    display: flex;
    flex: 1;
    min-width: 0;
    flex-direction: column;
}

.shop-choice-copy strong,
.shop-choice-copy small {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.shop-choice-copy small { color: var(--text-muted); }
.shop-choice-check { color: var(--brand); opacity: 0; font-weight: 900; }
.shop-choice.active .shop-choice-check { opacity: 1; }
.shop-picker-empty { padding: 1rem; color: var(--text-muted); text-align: center; }

.sidebar-shop-picker {
    flex: 0 0 auto;
    padding: .75rem;
    border-top: 1px solid rgba(255,255,255,.08);
}

.sidebar-shop-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    margin-bottom: .55rem;
    color: rgba(255,255,255,.55);
    font-size: .68rem;
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.sidebar-shop-heading strong {
    max-width: 120px;
    overflow: hidden;
    color: #93c5fd;
    font-size: .68rem;
    text-overflow: ellipsis;
    text-transform: none;
    white-space: nowrap;
}

.sidebar-shop-list {
    display: flex;
    max-height: 230px;
    flex-direction: column;
    gap: .4rem;
    overflow-y: auto;
    scrollbar-width: thin;
}

.sidebar-shop-list .shop-choice {
    min-height: 56px;
    padding: .5rem;
    border-color: rgba(255,255,255,.1);
    background: rgba(255,255,255,.06);
    color: #fff;
}

.sidebar-shop-list .shop-choice:hover,
.sidebar-shop-list .shop-choice.active {
    border-color: rgba(37,99,235,.8);
    background: rgba(37,99,235,.18);
    box-shadow: none;
    transform: none;
}

.sidebar-shop-list .shop-choice-icon {
    width: 38px;
    height: 38px;
    flex-basis: 38px;
    border-radius: 10px;
}

.sidebar-shop-list .shop-choice-copy strong { color: #fff; font-size: .8rem; }
.sidebar-shop-list .shop-choice-copy small { color: rgba(255,255,255,.52); font-size: .66rem; }
.sidebar-shop-list .shop-picker-empty { color: rgba(255,255,255,.55); font-size: .75rem; }

.owner-application-note {
    padding: .75rem .85rem;
    border-left: 4px solid var(--brand-dark);
    border-radius: 0 12px 12px 0;
    background: var(--brand-soft);
    color: #1e40af;
    font-size: .82rem;
    line-height: 1.5;
}

/* ============================================================
   Owner approval page
   ============================================================ */
.approval-shell {
    min-height: 100dvh;
    display: grid;
    place-items: center;
    padding: 1.25rem;
    background:
        radial-gradient(circle at 15% 15%, rgba(37,99,235,.2), transparent 28%),
        radial-gradient(circle at 90% 90%, rgba(30,58,95,.14), transparent 30%),
        var(--brand-soft);
}

.approval-card {
    width: min(100%, 520px);
    padding: 2rem;
    border: 1px solid rgba(148,163,184,.25);
    border-radius: 26px;
    background: rgba(255,255,255,.96);
    box-shadow: 0 24px 70px rgba(15,23,42,.14);
    text-align: center;
}

.approval-logo {
    width: 58px;
    height: 58px;
    margin: 0 auto 1rem;
    overflow: hidden;
    border-radius: 50%;
    box-shadow: 0 8px 24px rgba(37,99,235,.24);
}
.approval-logo img { width: 100%; height: 100%; object-fit: cover; }
.approval-status-icon { font-size: 2.65rem; }
.approval-kicker { margin-top: .5rem; color: var(--brand-dark); font-size: .7rem; font-weight: 900; letter-spacing: .12em; text-transform: uppercase; }
.approval-card h1 { margin: .35rem 0 .5rem; font-size: 1.55rem; font-weight: 900; }
.approval-card > p { color: var(--text-muted); line-height: 1.6; }

.approval-shop-details {
    display: grid;
    gap: .65rem;
    margin-top: 1.25rem;
    padding: 1rem;
    border-radius: 16px;
    background: #f8fafc;
    text-align: left;
}
.approval-shop-details div { display: flex; justify-content: space-between; gap: 1rem; }
.approval-shop-details span { color: var(--text-muted); font-size: .78rem; }
.approval-shop-details strong { text-align: right; font-size: .85rem; text-transform: capitalize; }

/* ============================================================
   Shared profile and settings UI
   ============================================================ */
.customer-avatar img,
.admin-user-avatar img,
.admin-shop-avatar img {
    width: 100%;
    height: 100%;
    border-radius: inherit;
    object-fit: cover;
}

.profile-navbar-avatar,
.profile-dropdown-avatar,
.profile-modal-avatar,
.profile-avatar-xl {
    display: grid;
    place-items: center;
    overflow: hidden;
    flex: 0 0 auto;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--brand-dark), var(--brand-hover));
    color: #fff;
    font-weight: 850;
    letter-spacing: .02em;
}

.profile-navbar-avatar { width: 28px; height: 28px; font-size: .68rem; }
.profile-modal-avatar { width: 46px; height: 46px; font-size: .82rem; }
.profile-avatar-xl {
    width: 82px;
    height: 82px;
    border: 4px solid #fff;
    box-shadow: 0 8px 24px rgba(15,23,42,.16);
    font-size: 1.2rem;
}

.profile-navbar-avatar img,
.profile-dropdown-avatar img,
.profile-modal-avatar img,
.profile-avatar-xl img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.profile-hero {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1rem;
    padding: 1rem;
    border: 1px solid rgba(37,99,235,.16);
    border-radius: 18px;
    background: linear-gradient(135deg, #eff6ff, #fff);
}

.profile-hero > div:last-child { min-width: 0; }
.profile-hero strong { display: block; overflow: hidden; color: var(--text-main); font-size: 1.05rem; text-overflow: ellipsis; white-space: nowrap; }
.profile-hero span { display: block; margin-top: .18rem; color: var(--text-muted); font-size: .78rem; }

.selected-owner-profile-body,
.selected-owner-profile-footer {
    background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
}

.selected-owner-profile-hero { margin-bottom: .85rem; }

.selected-owner-approved-badge {
    display: inline-flex !important;
    width: fit-content;
    margin-top: .45rem !important;
    padding: .22rem .5rem;
    border-radius: 999px;
    background: #d1fae5;
    color: #065f46 !important;
    font-size: .65rem !important;
    font-weight: 800;
}

.selected-owner-profile-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .65rem;
}

.selected-owner-detail-card {
    min-width: 0;
    padding: .85rem;
    border: 1px solid var(--border);
    border-radius: 14px;
    background: #f8fafc;
}

.selected-owner-detail-card > span {
    display: block;
    margin-bottom: .22rem;
    color: var(--text-muted);
    font-size: .62rem;
    font-weight: 800;
    letter-spacing: .05em;
    text-transform: uppercase;
}

.selected-owner-detail-card > strong {
    display: block;
    overflow-wrap: anywhere;
    color: var(--text-main);
    font-size: .82rem;
    line-height: 1.45;
}

.selected-owner-detail-wide { grid-column: 1 / -1; }

@media (max-width: 575.98px) {
    .selected-owner-profile-grid { grid-template-columns: 1fr; }
    .selected-owner-detail-wide { grid-column: auto; }
}

.profile-photo-editor {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1.25rem;
    padding: 1rem;
    border: 1px dashed rgba(37,99,235,.42);
    border-radius: 18px;
    background: var(--brand-soft);
}

.profile-photo-copy { display: flex; min-width: 0; flex-direction: column; align-items: flex-start; }
.profile-photo-copy small { color: var(--text-muted); font-size: .72rem; }
.profile-modal-header { background: linear-gradient(135deg, #eff6ff, #f8fafc); }

.settings-account-link {
    display: flex;
    width: 100%;
    align-items: center;
    gap: .75rem;
    margin-bottom: 1rem;
    padding: .8rem;
    border: 1px solid #dce6f2;
    border-radius: 16px;
    background: #fff;
    color: var(--text-main);
    text-align: left;
    transition: border-color .18s, background .18s;
}

.settings-account-link:hover { border-color: rgba(37,99,235,.48); background: var(--brand-soft); }
.settings-account-link > span:nth-child(2) { display: flex; min-width: 0; flex: 1; flex-direction: column; }
.settings-account-link strong { font-size: .88rem; }
.settings-account-link small { overflow: hidden; color: var(--text-muted); font-size: .72rem; text-overflow: ellipsis; white-space: nowrap; }
.settings-account-link > span:last-child { color: var(--brand-dark); font-size: 1.5rem; line-height: 1; }

.profile-detail-card {
    display: grid;
    gap: .8rem;
    padding: 1rem;
    border: 1px solid #dce6f2;
    border-radius: 16px;
    background: #f8fafc;
}
.profile-detail-card span { display: block; color: var(--text-muted); font-size: .66rem; font-weight: 750; letter-spacing: .04em; text-transform: uppercase; }
.profile-detail-card strong { display: block; overflow-wrap: anywhere; color: var(--text-main); font-size: .86rem; }

.notification-help-panel {
    padding: .8rem .9rem;
    border: 1px solid #fed7aa;
    border-radius: 12px;
    background: #fffbeb;
    color: #7c2d12;
    font-size: .76rem;
    line-height: 1.5;
}
.notification-help-panel strong { display: block; margin-bottom: .3rem; color: #92400e; }
.notification-help-panel ol { margin: 0; padding-left: 1.1rem; }
.notification-help-panel li + li { margin-top: .2rem; }

/* ============================================================
   Admin shop approval dashboard
   ============================================================ */
.admin-page { background: linear-gradient(135deg, var(--brand-soft), #f8fafc); }
.admin-navbar {
    position: sticky;
    top: 0;
    z-index: 1035;
    min-height: 60px;
    background: linear-gradient(135deg, var(--navy), var(--navy-mid)) !important;
    border-bottom: 1px solid rgba(37,99,235,.28);
    box-shadow: 0 8px 24px rgba(11,31,58,.16);
}
.delivery-map-picker { padding:1rem; border:1px solid #bfdbfe; border-radius:16px; background:#f8fbff; }
.delivery-map-actions { display:flex; flex:0 0 auto; gap:.4rem; }
.delivery-location-tools { display:grid; grid-template-columns:minmax(180px,1fr) auto; gap:.5rem; align-items:stretch; }
.delivery-location-tools .btn { white-space:nowrap; }
.delivery-map-network-status { display:flex; align-items:center; justify-content:space-between; gap:.7rem; margin-bottom:.5rem; padding:.55rem .7rem; border-radius:10px; background:#b45309; color:#fff; font-size:.72rem; font-weight:700; }
.delivery-map-network-status.d-none { display:none !important; }
#checkout-delivery-map { width:100%; height:300px; overflow:hidden; border:1px solid #cbd5e1; border-radius:14px; background:#e2e8f0; touch-action:none; }
.delivery-map-picker.is-fullscreen {
    position:fixed;
    inset:0;
    z-index:2000;
    display:flex;
    flex-direction:column;
    margin:0 !important;
    padding:max(1rem, env(safe-area-inset-top)) max(1rem, env(safe-area-inset-right)) max(1rem, env(safe-area-inset-bottom)) max(1rem, env(safe-area-inset-left));
    border:0;
    border-radius:0;
    background:#f8fbff;
}
.delivery-map-picker.is-fullscreen #checkout-delivery-map { flex:1 1 auto; min-height:0; height:auto; border-radius:12px; }
body.delivery-map-fullscreen-open { overflow:hidden; }
.leaflet-pane.leaflet-deliveryPoint-pane { display:block !important; visibility:visible !important; opacity:1 !important; z-index:10000 !important; }
.delivery-point-icon { display:block !important; visibility:visible !important; opacity:1 !important; background:transparent !important; border:0 !important; overflow:visible !important; }
.delivery-pin-shape { position:relative; display:grid; place-items:center; width:40px; height:40px; border:4px solid #fff; border-radius:50% 50% 50% 0; background:#ef4444; box-shadow:0 6px 18px rgba(15,23,42,.48); transform:rotate(-45deg); }
.delivery-pin-shape > span { width:12px; height:12px; border-radius:50%; background:#fff; transform:rotate(45deg); }
.ucsy-location-label { padding:.35rem .55rem; border:0; border-radius:8px; background:#0f172a; color:#fff; box-shadow:0 4px 12px rgba(15,23,42,.35); font-size:.72rem; font-weight:800; }
.ucsy-location-label::before { border-top-color:#0f172a !important; }
.delivery-map-selection { display:grid; gap:.12rem; margin-top:.55rem; padding:.7rem .8rem; border:1px dashed #cbd5e1; border-radius:11px; background:#fff; color:var(--text-muted); font-size:.76rem; font-weight:650; }
.delivery-map-selection strong { color:#0f172a; font-size:.9rem; }
.delivery-map-selection span { color:#64748b; font-size:.7rem; }
.delivery-map-selection.has-selection { border-style:solid; border-color:#86efac; background:#f0fdf4; }
.delivery-map-picker .leaflet-control-zoom { overflow:hidden; border:0; border-radius:12px; box-shadow:0 6px 18px rgba(15,23,42,.18); }
.delivery-map-picker .leaflet-control-zoom a { width:38px; height:38px; line-height:38px; color:#0f172a; font-size:20px; }
.order-delivery-map-link { display:inline-flex; align-items:center; gap:.35rem; margin-top:.55rem; padding:.45rem .7rem; border:1px solid #2563eb; border-radius:9px; color:#1d4ed8; background:#fff; font-size:.75rem; font-weight:800; text-decoration:none; }
.order-delivery-map-link:hover { background:#eff6ff; color:#1e40af; }
.order-delivery-location { margin-bottom:.65rem; padding:.75rem; border:1px solid #bfdbfe; border-radius:12px; background:#f8fbff; }
.order-delivery-location .order-delivery-note { margin-bottom:0 !important; padding:0; border:0; background:transparent; }
.order-delivery-map-actions { display:flex; flex-wrap:wrap; gap:.45rem; }
.owner-order-drawer { width:min(440px, 100vw) !important; }
.owner-order-drawer section { margin-bottom:.8rem; padding:1rem; border:1px solid #e2e8f0; border-radius:14px; background:#f8fafc; }
.owner-order-drawer section h6 { font-weight:850; color:#0f172a; }
.order-delivery-location-summary { display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center; gap:.65rem; padding:.7rem .8rem; border:1px solid #bfdbfe; border-radius:12px; background:#eff6ff; }
.order-delivery-location-icon { font-size:1.25rem; }
.order-delivery-location-summary small,.order-delivery-location-summary strong { display:block; }
.order-delivery-location-summary small { color:#64748b; font-size:.65rem; text-transform:uppercase; letter-spacing:.04em; }
.order-delivery-location-summary strong { color:#0f172a; font-size:.85rem; }
.owner-delivery-primary { padding:1rem; border:1px solid #bbf7d0; border-radius:14px; background:#f0fdf4; }
.owner-delivery-primary > small { color:#15803d; font-weight:800; text-transform:uppercase; letter-spacing:.05em; }
.owner-delivery-primary h5 { margin:.25rem 0 .55rem; color:#14532d; font-weight:900; }
@media (max-width:575.98px) {
    .delivery-map-picker > .d-flex { align-items:flex-start !important; }
    .delivery-map-actions { flex-direction:column; }
    .delivery-map-actions .btn { white-space:nowrap; }
    .delivery-map-picker.is-fullscreen > .d-flex { align-items:center !important; }
    .delivery-map-picker.is-fullscreen .delivery-map-actions { flex-direction:row; }
    .delivery-location-tools { grid-template-columns:1fr; }
    #checkout-delivery-map { height:270px; }
}
.admin-layout { min-height: calc(100dvh - 60px); }
.admin-main { max-width: 1320px; padding: 1.4rem 1rem 3rem; }
.admin-view { display: none; animation: panelFadeIn .22s ease both; }
.admin-view.active-admin-view { display: block; }

.admin-welcome {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.4rem;
    border-radius: 22px;
    background: linear-gradient(135deg, var(--navy), var(--navy-mid));
    color: #fff;
    box-shadow: 0 18px 40px rgba(15,23,42,.22);
}
.admin-welcome .admin-eyebrow { color: #93c5fd; }
.admin-welcome h1 { margin: .2rem 0; font-size: 1.55rem; font-weight: 900; }
.admin-welcome p { margin: 0; color: #dce6f2; font-size: .9rem; }

.admin-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: .8rem;
    margin: 1rem 0;
}
.admin-stats article {
    padding: 1rem;
    border: 1px solid #dce6f2;
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 7px 20px rgba(15,23,42,.05);
}
.admin-stats span { display: block; color: var(--text-muted); font-size: .75rem; font-weight: 700; }
.admin-stats strong { display: block; margin-top: .25rem; font-size: 1.65rem; line-height: 1; }
.admin-stats .pending strong { color: #d97706; }
.admin-stats .approved strong { color: var(--success); }
.admin-stats .blocked strong { color: var(--danger); }

.admin-panel {
    padding: 1rem;
    border: 1px solid #dce6f2;
    border-radius: 20px;
    background: #fff;
}
.admin-toolbar { display: flex; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; }
.admin-toolbar > .form-control { width: min(100%, 300px); }
.admin-filter-row { display: flex; gap: .4rem; overflow-x: auto; scrollbar-width: none; }
.admin-filter-row::-webkit-scrollbar { display: none; }
.admin-filter {
    flex: 0 0 auto;
    padding: .48rem .8rem;
    border: 1px solid #dbe2ea;
    border-radius: 999px;
    background: #fff;
    color: var(--text-muted);
    font-size: .78rem;
    font-weight: 800;
}
.admin-filter.active { border-color: var(--brand-dark); background: var(--brand-dark); color: #fff; }
.admin-shop-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: .9rem; }

.admin-shop-card {
    padding: 1rem;
    border: 1px solid #dce6f2;
    border-left: 4px solid #f59e0b;
    border-radius: 16px;
    background: #fff;
}
.admin-shop-card.status-approved { border-left-color: var(--success); }
.admin-shop-card.status-rejected,
.admin-shop-card.status-suspended { border-left-color: var(--danger); }
.admin-shop-card-head { display: flex; align-items: center; gap: .7rem; }
.admin-shop-avatar { width: 44px; height: 44px; display: grid; place-items: center; flex: 0 0 44px; border-radius: 13px; background: var(--brand-soft); color: var(--brand-dark); font-weight: 900; }
.admin-shop-card h2 { margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 1rem; font-weight: 850; }
.admin-shop-card-head p { margin: .12rem 0 0; overflow: hidden; color: var(--text-muted); font-size: .75rem; text-overflow: ellipsis; white-space: nowrap; }
.admin-status-badge { margin-left: auto; padding: .3rem .55rem; border-radius: 999px; background: #f1f5f9; font-size: .68rem; font-weight: 850; text-transform: capitalize; }
.admin-shop-card.status-pending .admin-status-badge { background: var(--status-pending-soft); color: #92400e; }
.admin-shop-card.status-approved .admin-status-badge { background: var(--status-ready-soft); color: #065f46; }
.admin-shop-card.status-rejected .admin-status-badge,
.admin-shop-card.status-suspended .admin-status-badge { background: var(--status-cancelled-soft); color: #991b1b; }
.admin-shop-description { min-height: 2.7em; margin: .85rem 0; color: #475569; font-size: .8rem; line-height: 1.45; }
.admin-owner-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; padding: .75rem; border-radius: 12px; background: #f8fafc; }
.admin-owner-grid span { display: block; color: var(--text-muted); font-size: .65rem; text-transform: uppercase; }
.admin-owner-grid strong { display: block; overflow: hidden; font-size: .75rem; text-overflow: ellipsis; white-space: nowrap; }
.admin-reason-note { margin-top: .7rem; padding: .6rem; border-radius: 10px; background: #fef2f2; color: #b91c1c; font-size: .75rem; }
.admin-card-actions { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .8rem; }
.admin-card-actions .btn { flex: 1; }
.admin-shop-card-actions { align-items:center; }
.admin-shop-card-actions > .btn { flex:1 1 0; min-width:0; }
.admin-shop-more { flex:0 0 auto; }
.admin-shop-more > .btn { min-width:74px; border-color:var(--border); font-weight:750; }
.admin-shop-more .dropdown-menu { min-width:190px; padding:.4rem; border:1px solid var(--border); border-radius:12px; box-shadow:0 16px 35px rgba(15,23,42,.16); }
.admin-shop-more .dropdown-item { padding:.55rem .65rem; border-radius:8px; font-size:.78rem; font-weight:700; }
.admin-empty { grid-column: 1/-1; display: grid; place-items: center; gap: .5rem; padding: 3rem 1rem; color: var(--text-muted); font-size: 2rem; text-align: center; }
.admin-empty strong { color: var(--text-main); font-size: 1rem; }
.admin-empty span { font-size: .8rem; }

.admin-user-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: .75rem;
}

.admin-user-card {
    display: flex;
    align-items: flex-start;
    gap: .75rem;
    padding: .9rem;
    border: 1px solid #dce6f2;
    border-left: 4px solid var(--success);
    border-radius: 14px;
    background: #fff;
}
.admin-user-card.role-owner { border-left-color: #f59e0b; }
.admin-user-card.role-admin { border-left-color: var(--navy-mid); }
.admin-user-avatar {
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    flex: 0 0 44px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--brand-soft), #dbeafe);
    color: var(--brand-dark);
    font-weight: 900;
}
.admin-user-copy { min-width: 0; flex: 1; color: #475569; font-size: .78rem; }
.admin-user-title { display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
.admin-user-title strong { overflow: hidden; color: var(--text-main); font-size: .9rem; text-overflow: ellipsis; white-space: nowrap; }
.admin-user-title span { padding: .22rem .48rem; border-radius: 999px; background: #f1f5f9; font-size: .63rem; font-weight: 850; text-transform: capitalize; }
.admin-user-copy > div:not(.admin-user-title) { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.admin-user-copy small { display: block; margin-top: .22rem; color: var(--text-muted); }
.admin-user-shop { color: var(--brand-dark) !important; font-weight: 700; text-transform: capitalize; }

/* Admin control center */
.admin-control-stats { display:grid; grid-template-columns:repeat(auto-fit,minmax(170px,1fr)); gap:.75rem; margin:1rem 0; }
.admin-control-stats article { padding:1rem; border:1px solid var(--border); border-radius:16px; background:#fff; box-shadow:var(--shadow-sm); }
.admin-control-stats span,.admin-control-stats small { display:block; color:var(--text-muted); font-size:.72rem; }
.admin-control-stats strong { display:block; margin:.25rem 0; color:var(--navy); font-size:1.45rem; }
.admin-attention-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:.75rem; }
.admin-attention-grid button { display:grid; gap:.25rem; padding:1rem; border:1px solid var(--border); border-radius:14px; background:#f8fafc; color:inherit; text-align:left; }
.admin-attention-grid button:hover { border-color:var(--brand); background:var(--brand-soft); }
.admin-attention-grid strong { font-size:1.5rem; color:var(--brand-dark); }
.admin-attention-grid span { font-size:.78rem; }
.admin-attention-grid b { color:var(--brand-dark); font-size:.72rem; }
.admin-section-head { display:flex; justify-content:space-between; gap:1rem; margin-bottom:1rem; }
.admin-section-head h2 { margin:0; font-size:1rem; font-weight:850; }
.admin-section-head p { margin:.2rem 0 0; color:var(--text-muted); font-size:.75rem; }
.admin-compact-control { width:min(100%,220px); }
.admin-data-list { display:grid; gap:.7rem; }
.admin-data-card { padding:.9rem; border:1px solid var(--border); border-radius:14px; background:#fff; }
.admin-data-card summary { display:flex; align-items:center; justify-content:space-between; gap:1rem; cursor:pointer; list-style:none; }
.admin-data-card summary::-webkit-details-marker { display:none; }
.admin-data-card strong,.admin-data-card span { display:block; }
.admin-data-card span,.admin-data-card p,.admin-data-card small { color:var(--text-muted); font-size:.75rem; }
.admin-data-card p { margin:.45rem 0 0; }
.admin-detail-body { margin-top:.8rem; padding-top:.8rem; border-top:1px solid var(--border); }
.admin-payment-card { display:grid; grid-template-columns:1fr auto; align-items:center; gap:.7rem; }
.admin-announcement-actions { display:flex; flex-direction:column; align-items:flex-end; gap:.55rem; }
.admin-payment-card .admin-card-actions { grid-column:1/-1; }
.admin-row-restricted { border-left:4px solid var(--danger) !important; background:#fffafa; }
.admin-control-form { display:grid; grid-template-columns:1fr 220px; gap:.8rem; align-items:end; }
.admin-form-wide { grid-column:1/-1; }
.admin-form-action { display:flex; align-items:end; }
.admin-settings-grid { display:grid; gap:.7rem; }
.admin-setting-card { display:grid; grid-template-columns:1fr minmax(160px,260px); align-items:center; gap:1rem; padding:.9rem; border:1px solid var(--border); border-radius:14px; }
.admin-setting-card strong,.admin-setting-card span { display:block; }
.admin-setting-card strong { text-transform:capitalize; }
.admin-setting-card span { color:var(--text-muted); font-size:.72rem; }
.admin-switch { justify-self:end; margin:0; border:0; background:transparent; }
.admin-bars { display:grid; gap:.8rem; }
.admin-bars > div { display:grid; grid-template-columns:minmax(90px,160px) 1fr minmax(100px,auto); gap:.7rem; align-items:center; font-size:.75rem; }
.admin-bars > div > div { overflow:hidden; height:10px; border-radius:999px; background:#e2e8f0; }
.admin-bars i { display:block; height:100%; border-radius:inherit; background:linear-gradient(90deg,var(--brand),#06b6d4); }
.admin-bars strong { text-align:right; }
.admin-audit-changes { display:grid; gap:.35rem; margin-top:.65rem; }
.admin-audit-changes span { padding:.35rem .5rem; border-radius:8px; background:#f8fafc; color:#475569; font-size:.72rem; }
.admin-segment-filters { display:grid; grid-template-columns:repeat(3,minmax(140px,200px)) minmax(220px,1fr); gap:.6rem; }
.admin-group-heading { display:flex; align-items:center; justify-content:space-between; gap:1rem; margin:1rem 0 .1rem; padding:.55rem .7rem; border-radius:10px; background:#eef2ff; color:var(--navy); }
.admin-group-heading:first-child { margin-top:0; }
.admin-group-heading strong { font-size:.78rem; }
.admin-group-heading span { font-size:.68rem; color:var(--text-muted); }
.admin-entity-modal-header { padding:1rem 1.25rem; border:0; background:linear-gradient(135deg,var(--navy),var(--navy-mid)); color:#fff; }
.admin-entity-modal-header .admin-eyebrow { color:#93c5fd; }
.admin-entity-profile { display:grid; gap:1rem; }
.admin-entity-hero { display:flex; align-items:center; gap:1rem; padding:1rem; border-radius:16px; background:linear-gradient(135deg,#eff6ff,#f8fafc); }
.admin-entity-avatar { width:64px; height:64px; display:grid; place-items:center; flex:0 0 64px; border-radius:18px; background:var(--brand-dark); color:#fff; font-size:1.5rem; font-weight:900; }
.admin-entity-hero h3,.admin-entity-hero p { margin:0; }
.admin-entity-hero p { color:var(--text-muted); font-size:.78rem; }
.admin-entity-badges { display:flex; flex-wrap:wrap; gap:.35rem; margin-top:.4rem; }
.admin-entity-badges span { padding:.25rem .5rem; border-radius:999px; background:#fff; color:var(--navy); font-size:.66rem; font-weight:800; }
.admin-profile-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.7rem; }
.admin-profile-field { padding:.75rem; border:1px solid var(--border); border-radius:12px; background:#fff; }
.admin-profile-field span,.admin-profile-field strong { display:block; }
.admin-profile-field span { margin-bottom:.2rem; color:var(--text-muted); font-size:.66rem; text-transform:uppercase; }
.admin-profile-field strong { overflow-wrap:anywhere; font-size:.8rem; }
.admin-profile-section { padding-top:.2rem; }
.admin-profile-section h4 { margin:0 0 .6rem; font-size:.9rem; font-weight:850; }
.admin-profile-mini-list { display:grid; gap:.45rem; }
.admin-profile-mini-list article { display:flex; justify-content:space-between; gap:1rem; padding:.65rem .75rem; border-radius:10px; background:#f8fafc; font-size:.74rem; }
.admin-profile-mini-list span { color:var(--text-muted); }
.runtime-notice-stack { position:relative; z-index:1020; display:grid; gap:.35rem; padding:.5rem max(.75rem,calc((100% - 1320px)/2)); background:#fff; }
.runtime-notice { display:flex; justify-content:space-between; gap:1rem; padding:.7rem .85rem; border:1px solid #bfdbfe; border-radius:12px; background:#eff6ff; color:#1e3a8a; }
.runtime-notice-warning { border-color:#fde68a; background:#fffbeb; color:#92400e; }
.runtime-notice-danger { border-color:#fecaca; background:#fef2f2; color:#991b1b; }
.runtime-notice strong,.runtime-notice p { display:block; margin:0; font-size:.78rem; }
.runtime-notice p { margin-top:.15rem; opacity:.9; }
.runtime-notice button { align-self:start; border:0; background:transparent; color:inherit; font-size:1.2rem; line-height:1; }

@media (max-width: 700px) {
    .admin-control-form,.admin-setting-card { grid-template-columns:1fr; }
    .admin-compact-control { width:100%; }
    .admin-payment-card { grid-template-columns:1fr; }
    .admin-bars > div { grid-template-columns:90px 1fr; }
    .admin-bars strong { grid-column:2; text-align:left; }
    .admin-segment-filters { grid-template-columns:1fr; }
    .admin-profile-grid { grid-template-columns:1fr; }
}

.payment-proof-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .6rem;
    padding: .65rem;
    border: 1px solid #dce6f2;
    border-radius: 12px;
    background: #f8fafc;
}

.payment-screenshot-preview {
    display: flex;
    align-items: center;
    gap: .55rem;
    padding: .3rem .6rem .3rem .3rem;
    border: 1px solid #cbd5e1;
    border-radius: 10px;
    background: #fff;
    color: #334155;
    font-size: .75rem;
    font-weight: 750;
}
.payment-screenshot-preview img {
    width: 52px;
    height: 52px;
    border-radius: 7px;
    object-fit: cover;
}
.payment-screenshot-preview.preview-error img { display: none; }
.payment-screenshot-preview.preview-error::before { content: '🖼️'; font-size: 1.2rem; }
.payment-screenshot-preview.preview-error span { font-size: 0; }
.payment-screenshot-preview.preview-error span::after { content: 'Screenshot unavailable'; color: #dc2626; font-size: .75rem; }
.payment-screenshot-missing { color: #dc2626; font-size: .74rem; font-weight: 700; }
.payment-proof-error { border-color: #fecaca; background: #fff7f7; }

/* Order feedback */
.feedback-modal-header { background: linear-gradient(135deg, #fff7ed, #ffffff); }
.feedback-stars { display: flex; justify-content: center; gap: .35rem; }
.feedback-stars button {
    border: 0; background: transparent; color: #cbd5e1; cursor: pointer;
    font-size: 2.35rem; line-height: 1; padding: .15rem;
    transition: transform .15s ease, color .15s ease;
}
.feedback-stars button:hover { transform: translateY(-2px) scale(1.06); }
.feedback-stars button.selected { color: #f59e0b; }
.feedback-order-button { margin-top: .75rem; }
.customer-feedback-complete {
    display: grid; gap: .2rem; margin-top: .75rem; padding: .75rem .85rem;
    border: 1px solid #fde68a; border-radius: 12px; background: #fffbeb;
}
.customer-feedback-complete > span:last-child { color: #64748b; font-size: .82rem; }
.feedback-stars-static { color: #f59e0b; font-size: 1.05rem; letter-spacing: .05rem; white-space: nowrap; }
.feedback-panel-header { margin-bottom: 1.15rem; }
.feedback-title-wrap { display: flex; align-items: center; gap: .8rem; }
.feedback-title-icon { display: grid; place-items: center; width: 42px; height: 42px; flex: 0 0 42px; border-radius: 13px; color: #b45309; background: linear-gradient(145deg, #fef3c7, #fffbeb); box-shadow: inset 0 0 0 1px #fde68a; font-size: 1.2rem; }
.feedback-refresh-btn { display: inline-flex; align-items: center; gap: .4rem; padding: .55rem .8rem; border: 1px solid #e2e8f0; border-radius: 10px; color: #475569; background: #fff; font-size: .82rem; font-weight: 750; transition: .18s ease; }
.feedback-refresh-btn:hover { color: #0f766e; border-color: #99f6e4; background: #f0fdfa; }
.feedback-refresh-btn:hover span { transform: rotate(45deg); }
.feedback-refresh-btn span { display: inline-block; transition: transform .18s ease; font-size: 1rem; }
.feedback-summary-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .85rem; margin-bottom: 1rem; }
.feedback-summary-card { position: relative; display: flex; align-items: center; gap: .75rem; min-width: 0; padding: 1rem; overflow: hidden; border: 1px solid #e2e8f0; border-radius: 16px; background: #fff; box-shadow: 0 5px 18px rgba(15, 23, 42, .045); }
.feedback-summary-card::after { content: ''; position: absolute; width: 55px; height: 55px; right: -20px; bottom: -25px; border-radius: 50%; background: currentColor; opacity: .07; }
.feedback-summary-card > div { display: grid; grid-template-columns: auto 1fr; align-items: baseline; column-gap: .35rem; min-width: 0; }
.feedback-summary-card > div > span { grid-column: 1 / -1; color: #64748b; font-size: .75rem; font-weight: 750; white-space: nowrap; }
.feedback-summary-card strong { color: #0f172a; font-size: 1.45rem; line-height: 1.2; }
.feedback-summary-card small { color: #94a3b8; font-size: .66rem; white-space: nowrap; }
.feedback-summary-icon { display: grid; place-items: center; width: 37px; height: 37px; flex: 0 0 37px; border-radius: 11px; font-size: 1rem; }
.feedback-tone-amber { color: #d97706; } .feedback-tone-amber .feedback-summary-icon { background: #fff7ed; }
.feedback-tone-blue { color: #2563eb; } .feedback-tone-blue .feedback-summary-icon { background: #eff6ff; }
.feedback-tone-rose { color: #e11d48; } .feedback-tone-rose .feedback-summary-icon { background: #fff1f2; }
.feedback-tone-green { color: #059669; } .feedback-tone-green .feedback-summary-icon { background: #ecfdf5; }
.feedback-owner-list { display: grid; gap: .85rem; }
.owner-feedback-card { padding: 1rem 1.1rem; border: 1px solid #e2e8f0; border-radius: 16px; background: #fff; box-shadow: 0 4px 16px rgba(15, 23, 42, .04); transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease; }
.owner-feedback-card:hover { transform: translateY(-1px); border-color: #cbd5e1; box-shadow: 0 8px 24px rgba(15, 23, 42, .07); }
.owner-feedback-heading { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; }
.owner-feedback-customer { display: flex; align-items: center; gap: .7rem; min-width: 0; }
.owner-feedback-customer > div { display: grid; gap: .14rem; min-width: 0; }
.owner-feedback-customer strong { overflow: hidden; color: #172033; font-size: .92rem; text-overflow: ellipsis; white-space: nowrap; }
.owner-feedback-customer > div span { color: #64748b; font-size: .72rem; }
.owner-feedback-customer i { margin: 0 .18rem; color: #cbd5e1; font-style: normal; }
.owner-feedback-avatar { display: grid; place-items: center; width: 39px; height: 39px; flex: 0 0 39px; border-radius: 12px; color: #0f766e; background: linear-gradient(145deg, #ccfbf1, #f0fdfa); font-size: .74rem; font-weight: 850; }
.owner-feedback-rating { display: flex; align-items: center; gap: .5rem; padding: .32rem .55rem; border: 1px solid #fde68a; border-radius: 10px; background: #fffbeb; }
.owner-feedback-rating strong { color: #92400e; font-size: .75rem; }
.owner-feedback-comment { position: relative; margin-top: .8rem; padding: .75rem .9rem .75rem 1.8rem; border-radius: 12px; color: #334155; background: #f8fafc; }
.owner-feedback-comment p { margin: 0; font-size: .86rem; line-height: 1.55; }
.owner-feedback-comment.is-empty { color: #94a3b8; font-style: italic; }
.feedback-quote-mark { position: absolute; left: .65rem; top: .38rem; color: #cbd5e1; font-family: Georgia, serif; font-size: 1.65rem; line-height: 1; }
.feedback-empty { display: grid; place-items: center; gap: .35rem; padding: 3rem 1rem; border: 1px dashed #cbd5e1; border-radius: 16px; color: #64748b; background: #fafcff; text-align: center; }
.feedback-empty strong { color: #334155; }
.feedback-empty-icon { display: grid; place-items: center; width: 48px; height: 48px; margin-bottom: .35rem; border-radius: 15px; color: #d97706; background: #fff7ed; font-size: 1.35rem; }
.feedback-empty button, .feedback-clear-btn { border: 0; color: #0f766e; background: transparent; font-size: .78rem; font-weight: 800; }
.feedback-empty button { margin-top: .35rem; }
.feedback-explorer { margin-bottom: .75rem; border: 1px solid #e2e8f0; border-radius: 16px; background: #f8fafc; }
.feedback-toolbar {
    display: grid; grid-template-columns: minmax(220px, 1fr) repeat(3, minmax(130px, auto));
    gap: .7rem; padding: .75rem .8rem .6rem;
}
.feedback-search-wrap { position: relative; }
.feedback-search-wrap > span { position: absolute; left: .75rem; top: 50%; transform: translateY(-50%); color: #64748b; z-index: 1; font-size: 1.15rem; }
.feedback-search-wrap .form-control { padding-left: 2.15rem; }
.feedback-toolbar .form-control, .feedback-toolbar .form-select { min-height: 40px; border-color: #dbe3ec; border-radius: 10px; font-size: .8rem; box-shadow: none; }
.feedback-toolbar .form-control:focus, .feedback-toolbar .form-select:focus { border-color: #5eead4; box-shadow: 0 0 0 3px rgba(20, 184, 166, .1); }
.feedback-results-meta { display: flex; justify-content: space-between; align-items: center; min-height: 34px; padding: 0 .85rem .6rem; }
.feedback-result-line { min-height: 1.1rem; color: #64748b; font-size: .73rem; font-weight: 650; }
.feedback-skeleton { pointer-events: none; }
.feedback-skeleton div { height: 12px; margin: .45rem 0; border-radius: 7px; background: linear-gradient(90deg, #eef2f7 25%, #f8fafc 50%, #eef2f7 75%); background-size: 200% 100%; animation: feedback-shimmer 1.2s infinite; }
.feedback-skeleton div:first-child { width: 45%; } .feedback-skeleton div:nth-child(2) { width: 25%; } .feedback-skeleton div:last-child { width: 78%; margin-top: 1rem; }
@keyframes feedback-shimmer { to { background-position: -200% 0; } }

/* Order queue and estimated arrival */
.owner-queue-overview { margin-bottom: .85rem; }
.owner-queue-summary { display: grid; grid-template-columns: minmax(180px, 1.25fr) repeat(2, minmax(80px, .55fr)) minmax(150px, 1fr); align-items: center; gap: .45rem; padding: .7rem .8rem; border: 1px solid #dbe7e5; border-radius: 15px; background: linear-gradient(135deg, #f0fdfa, #fff); box-shadow: 0 4px 16px rgba(15, 118, 110, .05); }
.queue-summary-main { display: flex; align-items: center; gap: .65rem; }
.queue-summary-main > div, .queue-summary-stat, .queue-summary-next { display: grid; gap: .05rem; }
.queue-summary-icon { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 11px; color: #0f766e; background: #ccfbf1; font-size: 1.35rem; font-weight: 800; }
.owner-queue-summary small { color: #64748b; font-size: .66rem; font-weight: 700; }
.owner-queue-summary strong { color: #172033; font-size: .84rem; }
.queue-summary-stat { padding-left: .7rem; border-left: 1px solid #dbe7e5; }
.queue-summary-stat strong { font-size: 1rem; }
.queue-summary-next { padding: .45rem .65rem; border-radius: 10px; background: #f8fafc; }
.order-queue-row { display: flex; align-items: center; gap: .55rem; margin-bottom: .7rem; padding-bottom: .65rem; border-bottom: 1px solid #eef2f7; }
.order-queue-position, .order-eta-chip { display: inline-flex; align-items: center; gap: .25rem; padding: .3rem .55rem; border-radius: 9px; font-size: .7rem; font-weight: 700; }
.order-queue-position { color: #0f766e; background: #ecfdf5; }
.order-queue-position strong { font-size: .82rem; }
.order-eta-chip { color: #1d4ed8; background: #eff6ff; }
.order-eta-chip.is-unset { color: #64748b; background: #f1f5f9; font-weight: 650; }
.order-actions-row { display: flex; align-items: flex-end; justify-content: space-between; gap: .7rem; flex-wrap: wrap; }
.order-time-control { display: grid; gap: .18rem; }
.order-time-control label { color: #64748b; font-size: .63rem; font-weight: 750; }
.order-time-control select { min-height: 32px; padding: .3rem 1.8rem .3rem .55rem; border: 1px solid #dbe3ec; border-radius: 9px; color: #334155; background-color: #fff; font-size: .72rem; }
.customer-order-estimate { display: flex; align-items: center; gap: .65rem; margin: .8rem 0; padding: .72rem .8rem; border: 1px solid #bfdbfe; border-radius: 13px; background: linear-gradient(135deg, #eff6ff, #fff); }
.customer-order-estimate.is-sent { border-color: #a7f3d0; background: linear-gradient(135deg, #ecfdf5, #fff); }
.customer-estimate-icon { display: grid; place-items: center; width: 34px; height: 34px; flex: 0 0 34px; border-radius: 10px; color: #1d4ed8; background: #dbeafe; font-size: 1rem; }
.customer-order-estimate > div { display: grid; flex: 1; gap: .05rem; }
.customer-order-estimate small { color: #64748b; font-size: .65rem; font-weight: 700; }
.customer-order-estimate strong { color: #172033; font-size: .86rem; }
.customer-estimate-live { padding: .2rem .42rem; border-radius: 999px; color: #047857; background: #d1fae5; font-size: .58rem; font-weight: 850; text-transform: uppercase; letter-spacing: .04em; }

@media (max-width: 767.98px) {
    .shop-picker-list { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
    .shop-picker-list::-webkit-scrollbar { display: none; }
    .shop-choice { flex: 0 0 min(82vw, 280px); scroll-snap-align: start; }
    .sidebar-shop-list .shop-choice { width: 100%; flex: 0 0 auto; scroll-snap-align: none; }
    .admin-stats { grid-template-columns: 1fr 1fr; }
    .admin-toolbar { flex-direction: column; }
    .admin-toolbar > .form-control { width: 100%; }
    .feedback-summary-grid { grid-template-columns: 1fr 1fr; }
    .feedback-toolbar { grid-template-columns: 1fr 1fr; }
    .feedback-search-wrap { grid-column: 1 / -1; }
    .owner-queue-summary { grid-template-columns: 1fr 1fr 1fr; }
    .queue-summary-main { grid-column: span 2; }
    .queue-summary-next { grid-column: 1 / -1; }
}

@media (max-width: 575.98px) {
    .feedback-summary-grid { grid-template-columns: 1fr 1fr; gap: .55rem; }
    .feedback-summary-card { align-items: flex-start; padding: .75rem; }
    .feedback-summary-card > div { display: grid; grid-template-columns: 1fr; }
    .feedback-summary-card small { display: none; }
    .feedback-summary-card strong { font-size: 1.25rem; }
    .feedback-summary-icon { width: 32px; height: 32px; flex-basis: 32px; }
    .feedback-toolbar { grid-template-columns: 1fr; }
    .feedback-search-wrap { grid-column: auto; }
    .feedback-panel-header { align-items: flex-start; gap: .65rem; }
    .feedback-refresh-btn { padding: .48rem .62rem; font-size: 0; }
    .feedback-refresh-btn span { font-size: 1.05rem; }
    .owner-feedback-heading { gap: .6rem; }
    .owner-feedback-rating { padding: .3rem .42rem; }
    .owner-feedback-rating .feedback-stars-static { display: none; }
    .owner-feedback-rating strong::before { content: '★ '; color: #f59e0b; }
    .owner-feedback-card { padding: .85rem; }
    .owner-queue-summary { grid-template-columns: 1fr 1fr; }
    .queue-summary-main { grid-column: 1 / -1; }
    .queue-summary-stat { padding: .4rem .55rem; border: 0; border-radius: 9px; background: #f8fafc; }
    .order-queue-row { align-items: flex-start; flex-direction: column; gap: .35rem; }
    .order-actions-row { align-items: stretch; flex-direction: column; }
    .order-time-control select { width: 100%; min-height: 36px; }
    .receipt-confirm-panel {
        align-items: stretch;
        flex-direction: column;
    }

    .receipt-confirm-panel .btn { width: 100%; }

    .order-step-dot {
        width: 25px;
        height: 25px;
        font-size: 11px;
    }

    .shop-picker { padding: .8rem; border-radius: 15px; }
    .shop-picker-heading { align-items: flex-start; flex-direction: column; gap: .45rem; }
    .approval-shell { align-items: start; padding: .75rem; }
    .approval-card { padding: 1.35rem 1rem; border-radius: 20px; }
    .admin-main { padding: .8rem .65rem 2rem; }
    .admin-welcome { align-items: flex-start; padding: 1rem; }
    .admin-welcome p { display: none; }
    .admin-welcome h1 { font-size: 1.25rem; }
    .admin-panel { padding: .7rem; border-radius: 16px; }
    .admin-shop-list { grid-template-columns: 1fr; }
    .admin-user-list { grid-template-columns: 1fr; }
    .admin-owner-grid { grid-template-columns: 1fr; }
}
.auth-otp-input {
    font-size: 1.45rem;
    font-weight: 800;
    letter-spacing: .45rem;
    text-align: center;
}