/* =========================================================================
   Restaurant Browsing — customer UI (rb- prefix)
   Mirrors the dashboard standard (restaurant-menu.css / payment-analytics.css):
   full-width #0F1412 page, #1A1D1C surfaces, #2E2E2E / #252927 borders, accent
   #2DD4BF / #22C55E, 135deg gradient buttons, underline tabs, icon stat cards.
   Mobile-first — clears the <mobile-bottom-nav> with 84px page padding, fluid
   grids, bottom-sheet cart on small screens, ≥44px tap targets.
   ========================================================================= */

/* ── Page ──────────────────────────────────────────────────────── */
.rb-page {
    background: #0F1412;
    min-height: 100vh;
    padding-bottom: 84px; /* clears the mobile bottom-nav (65px + gap) */
}
.rb-head {
    padding: 1.25rem;
    border-bottom: 2px solid #2E2E2E;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
}
.rb-head h1 {
    color: #FFFFFF; font-size: 1.5rem; font-weight: 700; margin: 0;
    display: flex; align-items: center; gap: 0.625rem;
}
.rb-head h1 i { color: #2DD4BF; font-size: 1.25rem; }
.rb-sub { color: #6B7280; font-size: 0.813rem; margin-top: 4px; }

/* ── Search + filter bar ───────────────────────────────────────── */
.rb-toolbar { padding: 1rem 1.25rem 0; }
.rb-search-row { display: flex; gap: 0.625rem; align-items: stretch; flex-wrap: wrap; }
.rb-search { position: relative; flex: 1; min-width: 0; }
.rb-search i {
    position: absolute; left: 0.8rem; top: 50%; transform: translateY(-50%);
    color: #6B7280; font-size: 0.875rem; pointer-events: none;
}
.rb-search input {
    width: 100%; box-sizing: border-box;
    padding: 0.625rem 0.75rem 0.625rem 2.4rem;
    background: #1A1D1C; border: 1px solid #2E2E2E; border-radius: 0.5rem;
    color: #FFFFFF; font-size: 16px; outline: none; font-family: inherit;
    transition: border-color 0.2s;
}
.rb-search input:focus { border-color: #2DD4BF; box-shadow: 0 0 0 3px rgba(45,212,191,0.08); }
.rb-search-suggestions {
    position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 50;
    background: #1A1D1C; border: 1px solid #2E2E2E; border-radius: 0.5rem;
    overflow: hidden; box-shadow: 0 8px 24px rgba(0,0,0,0.4);
}
.rb-suggestion {
    display: flex; align-items: center; gap: 0.625rem;
    padding: 0.625rem 0.875rem; color: #D1D5DB; font-size: 0.875rem; cursor: pointer;
    border: none; background: none; width: 100%; text-align: left; font-family: inherit;
}
.rb-suggestion:hover { background: rgba(45,212,191,0.08); color: #fff; }
.rb-suggestion i { color: #6B7280; font-size: 0.75rem; }

.rb-filter-row {
    display: flex; gap: 0.625rem; align-items: center; flex-wrap: wrap; margin-top: 0.75rem;
}
.rb-select, .rb-filter-select {
    padding: 0.5rem 0.75rem; background: #1A1D1C; border: 1px solid #2E2E2E;
    border-radius: 0.5rem; color: #FFFFFF; font-size: 0.813rem; font-family: inherit;
    outline: none; cursor: pointer; min-height: 40px; transition: border-color 0.2s;
}
.rb-select:focus, .rb-filter-select:focus { border-color: #2DD4BF; }
.rb-select option, .rb-filter-select option { background: #1A1D1C; }

.rb-toggle-chip {
    display: inline-flex; align-items: center; gap: 0.4rem;
    padding: 0.5rem 0.875rem; background: #1A1D1C; border: 1px solid #2E2E2E;
    border-radius: 999px; color: #D1D5DB; font-size: 0.813rem; font-weight: 600;
    cursor: pointer; font-family: inherit; transition: all 0.15s; min-height: 40px;
}
.rb-toggle-chip i { font-size: 0.75rem; color: #6B7280; }
.rb-toggle-chip.active { background: rgba(45,212,191,0.12); border-color: #2DD4BF; color: #2DD4BF; }
.rb-toggle-chip.active i { color: #2DD4BF; }
.rb-clear-filters {
    margin-left: auto; background: none; border: none; color: #6B7280;
    font-size: 0.813rem; cursor: pointer; font-family: inherit; padding: 0.4rem;
}
.rb-clear-filters:hover { color: #EF4444; }

/* ── Category chips (browse by category) ───────────────────────── */
.rb-chip-row {
    display: flex; gap: 0.5rem; padding: 0.875rem 1.25rem; overflow-x: auto;
    scrollbar-width: none;
}
.rb-chip-row::-webkit-scrollbar { display: none; }
.rb-chip {
    flex-shrink: 0; display: inline-flex; align-items: center; gap: 0.4rem;
    padding: 0.5rem 0.875rem; background: #1A1D1C; border: 1px solid #2E2E2E;
    border-radius: 999px; color: #D1D5DB; font-size: 0.813rem; font-weight: 600;
    cursor: pointer; font-family: inherit; white-space: nowrap; transition: all 0.15s;
}
.rb-chip i { color: #2DD4BF; font-size: 0.75rem; }
.rb-chip .rb-chip-count { color: #6B7280; font-size: 0.688rem; font-weight: 700; }
.rb-chip.active { background: linear-gradient(135deg,#2DD4BF,#22C55E); color: #0F1412; border-color: transparent; }
.rb-chip.active i, .rb-chip.active .rb-chip-count { color: #0F1412; }

/* ── Tabs (underline) ──────────────────────────────────────────── */
.rb-tabs {
    display: flex; gap: 0; padding: 0 1.25rem;
    border-bottom: 2px solid #2E2E2E; background: #0F1412; overflow-x: auto;
    scrollbar-width: none;
}
.rb-tabs::-webkit-scrollbar { display: none; }
.rb-tab {
    padding: 0.75rem 1.25rem; background: none; border: none;
    border-bottom: 3px solid transparent; color: #6B7280;
    font-size: 0.875rem; font-weight: 600; cursor: pointer; font-family: inherit;
    display: inline-flex; align-items: center; gap: 0.5rem; white-space: nowrap;
    transition: color 0.2s, border-color 0.2s;
}
.rb-tab:hover { color: #D1D5DB; }
.rb-tab.active { color: #2DD4BF; border-bottom-color: #2DD4BF; }
.rb-tab i { font-size: 0.813rem; }
.rb-tab .rb-tab-badge {
    background: rgba(45,212,191,0.12); color: #2DD4BF; font-size: 0.688rem;
    padding: 1px 7px; border-radius: 8px; font-weight: 700;
}

.rb-body { padding: 1.25rem; }

/* ── Grid + restaurant cards ───────────────────────────────────── */
.rb-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr));
    gap: 16px;
}
.rb-card {
    background: #1A1D1C; border: 1px solid #2E2E2E; border-radius: 14px;
    overflow: hidden; display: flex; flex-direction: column; cursor: pointer;
    transition: border-color 0.2s, transform 0.15s; position: relative;
}
.rb-card:hover { border-color: rgba(45,212,191,0.4); transform: translateY(-2px); }
.rb-card-media {
    width: 100%; height: 150px; object-fit: cover; background: #252927; display: block;
}
.rb-card-media-placeholder {
    width: 100%; height: 150px; background: linear-gradient(135deg,#1A1D1C,#252927);
    display: flex; align-items: center; justify-content: center; color: #4B5563; font-size: 2.25rem;
}
.rb-card-fav {
    position: absolute; top: 10px; right: 10px; z-index: 2;
    width: 38px; height: 38px; border-radius: 50%; border: none;
    background: rgba(15,20,18,0.7); backdrop-filter: blur(6px); color: #9CA3AF;
    cursor: pointer; display: flex; align-items: center; justify-content: center;
    transition: all 0.15s;
}
.rb-card-fav:hover { background: rgba(15,20,18,0.9); color: #EF4444; }
.rb-card-fav.on { color: #EF4444; }
.rb-card-body { padding: 14px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.rb-card-title {
    color: #FFFFFF; font-size: 1rem; font-weight: 700; margin: 0; line-height: 1.3;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.rb-card-cuisine { color: #2DD4BF; font-size: 0.75rem; font-weight: 600; }
.rb-card-meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.rb-stars { display: inline-flex; align-items: center; gap: 2px; color: #F59E0B; font-size: 0.75rem; }
.rb-stars .empty { color: #2E2E2E; }
.rb-rating-text { color: #9CA3AF; font-size: 0.75rem; font-weight: 600; }
.rb-card-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: auto; }

/* ── Badges / pills ────────────────────────────────────────────── */
.rb-badge {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 3px 10px; border-radius: 10px; font-size: 0.688rem; font-weight: 700;
    text-transform: capitalize;
}
.rb-badge i { font-size: 0.563rem; }
.rb-badge.open { background: rgba(34,197,94,0.12); color: #22C55E; }
.rb-badge.closed { background: rgba(239,68,68,0.12); color: #EF4444; }
.rb-pill {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 2px 8px; border-radius: 8px; font-size: 0.688rem; font-weight: 600;
    background: rgba(45,212,191,0.1); color: #2DD4BF;
}
.rb-pill.muted { background: rgba(107,114,128,0.12); color: #9CA3AF; }
.rb-pill i { font-size: 0.625rem; }

/* ── Buttons (rm-btn family mirrored) ──────────────────────────── */
.rb-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 0.375rem;
    cursor: pointer; font-weight: 700; font-size: 0.813rem; border-radius: 0.5rem;
    transition: all 0.15s; font-family: inherit; padding: 0.55rem 1rem; border: none;
    background: linear-gradient(135deg,#2DD4BF,#22C55E); color: #0F1412;
    box-shadow: 0 2px 8px rgba(45,212,191,0.2); min-height: 44px;
}
.rb-btn:hover { box-shadow: 0 4px 16px rgba(45,212,191,0.3); transform: translateY(-1px); }
.rb-btn.sm { padding: 0.4rem 0.75rem; font-size: 0.75rem; min-height: 36px; box-shadow: none; }
.rb-btn.sm:hover { transform: none; }
.rb-btn.ghost { background: #252927; color: #D1D5DB; box-shadow: none; font-weight: 600; }
.rb-btn.ghost:hover { background: #2E2E2E; transform: none; box-shadow: none; }
.rb-btn.danger { background: #EF4444; color: #fff; box-shadow: 0 2px 8px rgba(239,68,68,0.2); }
.rb-btn.danger:hover { background: #DC2626; }
.rb-btn.block { width: 100%; }
.rb-btn:disabled { opacity: 0.5; cursor: not-allowed; transform: none; box-shadow: none; }
.rb-icon-btn {
    width: 44px; height: 44px; border-radius: 12px; border: 1px solid #2E2E2E;
    background: #1A1D1C; color: #9CA3AF; cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center; transition: all 0.2s;
}
.rb-icon-btn:hover { background: rgba(45,212,191,0.12); color: #2DD4BF; border-color: #2DD4BF; }
.rb-icon-btn.danger:hover { background: rgba(239,68,68,0.12); color: #EF4444; border-color: #EF4444; }

/* ── Empty / loading ───────────────────────────────────────────── */
.rb-empty { text-align: center; padding: 4rem 1rem; color: #6B7280; }
.rb-empty i { font-size: 2.5rem; margin-bottom: 0.75rem; display: block; color: #4B5563; }
.rb-empty p { color: #fff; font-size: 1.063rem; font-weight: 600; margin: 0 0 0.5rem; }
.rb-empty .rb-empty-desc { color: #6B7280; font-size: 0.875rem; }
.rb-loading { text-align: center; padding: 3rem 1rem; color: #6B7280; }
.rb-loading i { color: #2DD4BF; font-size: 2rem; margin-bottom: 0.75rem; display: block; }
.rb-loading i.fa-spin { animation: fa-spin 1s linear infinite; }
.rb-loading p { color: #fff; font-size: 1rem; font-weight: 600; margin: 0; }
.rb-card-skeleton { background: #1A1D1C; border: 1px solid #2E2E2E; border-radius: 14px; overflow: hidden; }
.rb-card-skeleton .sk { background: linear-gradient(90deg,#252927 25%,#1A1D1C 50%,#252927 75%); background-size:200% 100%; animation: rb-shimmer 1.4s infinite; }
.rb-card-skeleton .sk.media { height: 150px; }
.rb-card-skeleton .sk.line { height: 12px; margin: 12px; border-radius: 6px; }
@keyframes rb-shimmer { 0%{background-position:200% 0} 100%{background-position:-200% 0} }

/* ── Load more ──────────────────────────────────────────────────── */
.rb-load-more { display: flex; justify-content: center; padding: 1.5rem 0 0.5rem; }

/* =========================================================================
   Restaurant Details
   ========================================================================= */
.rb-details-head {
    position: sticky; top: 0; z-index: 20;
    display: flex; align-items: center; gap: 0.75rem;
    padding: 0.875rem 1.25rem; background: rgba(15,20,18,0.95); backdrop-filter: blur(8px);
    border-bottom: 1px solid #2E2E2E;
}
.rb-details-head .rb-title { color: #fff; font-size: 1.063rem; font-weight: 700; flex: 1; min-width: 0;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rb-details-head .rb-head-actions { display: flex; gap: 8px; }

.rb-hero {
    margin: 1.25rem; background: #1A1D1C; border: 1px solid #2E2E2E;
    border-radius: 16px; overflow: hidden;
}
.rb-hero-top { display: flex; gap: 16px; padding: 18px; align-items: flex-start; }
.rb-hero-logo {
    width: 88px; height: 88px; border-radius: 16px; object-fit: cover;
    background: #252927; flex-shrink: 0;
}
.rb-hero-logo-placeholder {
    width: 88px; height: 88px; border-radius: 16px; background: linear-gradient(135deg,#1A1D1C,#252927);
    display: flex; align-items: center; justify-content: center; color: #4B5563; font-size: 2rem; flex-shrink: 0;
}
.rb-hero-info { flex: 1; min-width: 0; }
.rb-hero-name { color: #fff; font-size: 1.375rem; font-weight: 800; margin: 0 0 4px; line-height: 1.2; }
.rb-hero-cuisine { color: #2DD4BF; font-size: 0.813rem; font-weight: 600; margin-bottom: 8px; }
.rb-hero-rating-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; }
.rb-hero-meta { display: flex; gap: 10px; flex-wrap: wrap; }
.rb-hero-meta .rb-meta-item {
    display: inline-flex; align-items: center; gap: 6px; color: #9CA3AF; font-size: 0.813rem;
}
.rb-hero-meta .rb-meta-item i { color: #6B7280; font-size: 0.75rem; }
.rb-hero-meta a { color: #2DD4BF; text-decoration: none; }

.rb-section { margin: 0 1.25rem 1.5rem; }
.rb-section-title {
    color: #fff; font-size: 1.063rem; font-weight: 700; margin: 0 0 1rem;
    display: flex; align-items: center; gap: 0.5rem;
}
.rb-section-title i { color: #2DD4BF; font-size: 1rem; }

/* Promotions */
.rb-promos { display: flex; gap: 12px; overflow-x: auto; padding-bottom: 4px; scrollbar-width: none; }
.rb-promos::-webkit-scrollbar { display: none; }
.rb-promo {
    flex-shrink: 0; min-width: 260px; background: linear-gradient(135deg, rgba(45,212,191,0.08), rgba(34,197,94,0.05));
    border: 1px solid rgba(45,212,191,0.25); border-radius: 14px; padding: 14px;
}
.rb-promo .rb-promo-title { color: #2DD4BF; font-size: 0.938rem; font-weight: 700; margin: 0 0 4px; display: flex; align-items: center; gap: 6px; }
.rb-promo .rb-promo-code { font-family: monospace; background: rgba(45,212,191,0.12); color: #2DD4BF; padding: 1px 6px; border-radius: 6px; font-size: 0.688rem; }
.rb-promo .rb-promo-desc { color: #D1D5DB; font-size: 0.813rem; margin: 4px 0 0; }
.rb-promo .rb-promo-discount { color: #22C55E; font-size: 1.25rem; font-weight: 800; }

/* Categories grid */
.rb-cat-grid {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 150px), 1fr));
    gap: 14px;
}
.rb-cat-tile {
    background: #1A1D1C; border: 1px solid #2E2E2E; border-radius: 14px; padding: 18px 14px;
    display: flex; flex-direction: column; align-items: center; gap: 8px; cursor: pointer;
    transition: border-color 0.2s, transform 0.15s; text-align: center;
}
.rb-cat-tile:hover { border-color: rgba(45,212,191,0.4); transform: translateY(-2px); }
.rb-cat-tile .rb-cat-icon {
    width: 52px; height: 52px; border-radius: 14px; background: rgba(45,212,191,0.12); color: #2DD4BF;
    display: flex; align-items: center; justify-content: center; font-size: 1.5rem;
}
.rb-cat-tile .rb-cat-name { color: #fff; font-size: 0.875rem; font-weight: 700; }
.rb-cat-tile .rb-cat-count { color: #6B7280; font-size: 0.688rem; }

/* Info grid */
.rb-info-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); gap: 12px; }
.rb-info-card { background: #1A1D1C; border: 1px solid #2E2E2E; border-radius: 12px; padding: 14px; display: flex; gap: 10px; align-items: flex-start; }
.rb-info-card i { color: #2DD4BF; font-size: 1rem; margin-top: 2px; }
.rb-info-card .rb-info-label { color: #6B7280; font-size: 0.688rem; text-transform: uppercase; letter-spacing: 0.04em; font-weight: 700; }
.rb-info-card .rb-info-value { color: #D1D5DB; font-size: 0.875rem; word-break: break-word; }

/* Reviews */
.rb-reviews-summary {
    background: #1A1D1C; border: 1px solid #2E2E2E; border-radius: 14px; padding: 18px;
    display: flex; gap: 24px; align-items: center; flex-wrap: wrap; margin-bottom: 1rem;
}
.rb-reviews-score { text-align: center; }
.rb-reviews-score .rb-big { color: #fff; font-size: 2.5rem; font-weight: 800; line-height: 1; }
.rb-reviews-score .rb-big-stars { color: #F59E0B; font-size: 0.875rem; margin: 4px 0; }
.rb-reviews-score .rb-count { color: #6B7280; font-size: 0.75rem; }
.rb-distribution { flex: 1; min-width: 200px; display: flex; flex-direction: column; gap: 6px; }
.rb-dist-row { display: flex; align-items: center; gap: 8px; font-size: 0.75rem; color: #9CA3AF; }
.rb-dist-row .rb-dist-star { color: #F59E0B; width: 12px; }
.rb-dist-bar { flex: 1; height: 7px; background: #252927; border-radius: 999px; overflow: hidden; }
.rb-dist-fill { height: 100%; background: linear-gradient(90deg,#2DD4BF,#22C55E); border-radius: 999px; }

.rb-review {
    background: #1A1D1C; border: 1px solid #2E2E2E; border-radius: 14px; padding: 16px; margin-bottom: 12px;
    display: flex; gap: 12px;
}
.rb-review-avatar {
    width: 40px; height: 40px; border-radius: 50%; object-fit: cover; background: #252927; flex-shrink: 0;
}
.rb-review-avatar-placeholder {
    width: 40px; height: 40px; border-radius: 50%; background: rgba(45,212,191,0.12); color: #2DD4BF;
    display: flex; align-items: center; justify-content: center; font-weight: 700; flex-shrink: 0;
}
.rb-review-body { flex: 1; min-width: 0; }
.rb-review-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 4px; }
.rb-review-name { color: #fff; font-size: 0.875rem; font-weight: 700; }
.rb-review-date { color: #6B7280; font-size: 0.688rem; }
.rb-review-stars { color: #F59E0B; font-size: 0.75rem; margin-bottom: 6px; }
.rb-review-text { color: #D1D5DB; font-size: 0.875rem; line-height: 1.5; word-break: break-word; }

/* =========================================================================
   Category Items (menu grid + cart)
   ========================================================================= */
.rb-cat-items-head {
    position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: 0.75rem;
    padding: 0.875rem 1.25rem; background: rgba(15,20,18,0.95); backdrop-filter: blur(8px); border-bottom: 1px solid #2E2E2E;
}
.rb-cat-items-head .rb-title { color: #fff; font-size: 1.063rem; font-weight: 700; flex: 1; min-width: 0;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.rb-cat-info { padding: 1.25rem; border-bottom: 1px solid #2E2E2E; }
.rb-cat-info h2 { color: #fff; font-size: 1.25rem; font-weight: 800; margin: 0 0 4px; }
.rb-cat-info p { color: #6B7280; font-size: 0.813rem; margin: 0; }

.rb-cat-items-toolbar { padding: 1rem 1.25rem; }

.rb-items-grid {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr));
    gap: 14px; padding: 0 1.25rem 1.25rem;
}
.rb-item-card {
    background: #1A1D1C; border: 1px solid #2E2E2E; border-radius: 14px; overflow: hidden;
    display: flex; flex-direction: column; transition: border-color 0.2s, transform 0.15s;
}
.rb-item-card:hover { border-color: rgba(45,212,191,0.4); transform: translateY(-2px); }
.rb-item-media { width: 100%; height: 140px; object-fit: cover; background: #252927; display: block; }
.rb-item-media-placeholder { width: 100%; height: 140px; background: linear-gradient(135deg,#1A1D1C,#252927);
    display: flex; align-items: center; justify-content: center; color: #4B5563; font-size: 1.75rem; }
.rb-item-body { padding: 14px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.rb-item-name { color: #fff; font-size: 0.938rem; font-weight: 700; margin: 0; line-height: 1.3; }
.rb-item-desc { color: #6B7280; font-size: 0.75rem; line-height: 1.4; margin: 0;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.rb-item-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: auto; }
.rb-item-price { color: #2DD4BF; font-size: 1.063rem; font-weight: 800; }
.rb-item-stock { font-size: 0.688rem; font-weight: 600; padding: 2px 7px; border-radius: 6px; }
.rb-item-stock.in { background: rgba(34,197,94,0.12); color: #22C55E; }
.rb-item-stock.low { background: rgba(245,158,11,0.12); color: #F59E0B; }
.rb-item-stock.unlimited { background: rgba(107,114,128,0.12); color: #9CA3AF; }
.rb-add-btn {
    width: 36px; height: 36px; border-radius: 10px; border: none;
    background: linear-gradient(135deg,#2DD4BF,#22C55E); color: #0F1412; cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center; font-size: 0.875rem; flex-shrink: 0;
    transition: transform 0.1s;
}
.rb-add-btn:active { transform: scale(0.92); }
.rb-add-btn:disabled { opacity: 0.4; cursor: not-allowed; }
.rb-item-card.unavailable { opacity: 0.55; }
.rb-item-stock.out { background: rgba(239,68,68,0.12); color: #EF4444; }
.rb-icon-btn.on { color: #EF4444; border-color: rgba(239,68,68,0.5); }
.rb-cat-items-head .rb-cat-count-pill {
    background: rgba(45,212,191,0.12); color: #2DD4BF; font-size: 0.688rem;
    font-weight: 700; padding: 2px 8px; border-radius: 999px; flex-shrink: 0;
}
.rb-item-media-wrap { position: relative; }
.rb-item-media-wrap .rb-item-stock { position: absolute; top: 8px; left: 8px; }
.rb-cat-info h2 i { color: #2DD4BF; margin-right: 0.5rem; }
.rb-cat-info h2 .rb-cat-emoji { margin-right: 0.5rem; font-size: 1.15em; line-height: 1; vertical-align: -0.05em; }
.rb-search-clear {
    position: absolute; right: 0.5rem; top: 50%; transform: translateY(-50%);
    background: none; border: none; color: #6B7280; cursor: pointer; padding: 0.4rem; font-size: 0.875rem;
}
.rb-search-clear:hover { color: #EF4444; }
.rb-cart-actions { display: flex; gap: 0.625rem; }
.rb-empty .rb-btn { margin-top: 1rem; }

/* =========================================================================
   Subscription variants (cs- → rb- migration). Shares the rb- palette so the
   customer food-subscription page matches RestaurantBrowser/Details/CategoryItems.
   ========================================================================= */

/* Status badge variants — used on subscription cards, deliveries, detail modal. */
.rb-badge.pending   { background: rgba(251,191,36,0.12);  color: #FBBF24; }
.rb-badge.active    { background: rgba(34,197,94,0.12);  color: #22C55E; }
.rb-badge.paused    { background: rgba(249,115,22,0.12); color: #F97316; }
.rb-badge.cancelled { background: rgba(239,68,68,0.12);  color: #EF4444; }
.rb-badge.completed { background: rgba(59,130,246,0.12); color: #3B82F6; }
.rb-badge.expired   { background: rgba(156,163,175,0.12);color: #9CA3AF; }
.rb-badge.delivered { background: rgba(34,197,94,0.12);  color: #22C55E; }
.rb-badge.scheduled { background: rgba(45,212,191,0.12); color: #2DD4BF; }
.rb-badge.pending i, .rb-badge.active i, .rb-badge.paused i,
.rb-badge.cancelled i, .rb-badge.completed i, .rb-badge.expired i,
.rb-badge.delivered i, .rb-badge.scheduled i { font-size: 0.563rem; }

/* Package / subscription cards */
.rb-sub-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr));
    gap: 20px;
}
.rb-sub-card {
    background: #1A1D1C; border: 1px solid #2E2E2E; border-radius: 14px;
    padding: 20px; display: flex; flex-direction: column; gap: 14px;
    transition: border-color 0.2s, transform 0.15s;
}
.rb-sub-card:hover { border-color: rgba(45,212,191,0.4); transform: translateY(-2px); }
.rb-sub-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.rb-sub-head h3 { color: #FFFFFF; font-size: 1.1rem; font-weight: 700; margin: 0; }
.rb-sub-head .rb-sub-restaurant { color: #A3A3A3; font-size: 0.813rem; margin-top: 4px; }
.rb-sub-desc { color: #A3A3A3; font-size: 0.875rem; line-height: 1.5; min-height: 42px; }
.rb-sub-meta { display: flex; justify-content: space-between; gap: 12px; color: #6B7280; font-size: 0.813rem; }
.rb-sub-foot {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding-top: 14px; border-top: 1px solid rgba(45,212,191,0.2);
}
.rb-sub-price { color: #22C55E; font-size: 1.375rem; font-weight: 700; }

/* Stat grid (period / progress / total + received/remaining) */
.rb-stat-grid {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px;
}
.rb-stat { background: #252927; border: 1px solid #2E2E2E; border-radius: 12px; padding: 12px 14px; }
.rb-stat .rb-stat-label { color: #6B7280; font-size: 0.75rem; margin-bottom: 4px; }
.rb-stat .rb-stat-value { color: #FFFFFF; font-size: 0.875rem; font-weight: 600; }
.rb-stat .rb-stat-value.good { color: #22C55E; font-size: 1rem; font-weight: 700; }
.rb-stat .rb-stat-value.accent { color: #2DD4BF; }

/* Big number stat pair (received / remaining) */
.rb-stat-pair { display: flex; gap: 12px; margin-bottom: 12px; }
.rb-stat-pair .rb-stat { flex: 1; text-align: center; padding: 14px; }
.rb-stat-pair .rb-stat .rb-stat-num { font-size: 1.5rem; font-weight: 700; display: block; margin-bottom: 2px; }
.rb-stat-pair .rb-stat .rb-stat-num.good { color: #22C55E; }
.rb-stat-pair .rb-stat .rb-stat-num.accent { color: #2DD4BF; }
.rb-stat-pair .rb-stat.good { background: rgba(34,197,94,0.08); border-color: rgba(34,197,94,0.3); }
.rb-stat-pair .rb-stat.accent { background: rgba(45,212,191,0.08); border-color: rgba(45,212,191,0.3); }

/* Progress bar (deliveries completed / total) */
.rb-progress { width: 100%; height: 6px; background: #252927; border-radius: 10px; overflow: hidden; margin-top: 6px; }
.rb-progress-bar { height: 100%; background: linear-gradient(90deg,#2DD4BF,#22C55E); border-radius: 10px; }
.rb-progress-line { color: #A3A3A3; font-size: 0.75rem; margin-top: 6px; }
.rb-progress-line .good { color: #22C55E; font-weight: 600; }
.rb-progress-line .accent { color: #2DD4BF; font-weight: 600; }

/* Next-delivery callout */
.rb-next-delivery {
    background: rgba(45,212,191,0.1); border: 1px solid rgba(45,212,191,0.3);
    padding: 10px 14px; border-radius: 12px; color: #2DD4BF; font-size: 0.813rem; font-weight: 600;
}

/* Delivery timeline (detail modal + deliveries tab) */
.rb-timeline { display: flex; flex-direction: column; gap: 8px; max-height: 340px; overflow-y: auto; }
.rb-timeline-row {
    display: flex; justify-content: space-between; align-items: center; gap: 12px;
    padding: 10px; background: #1A1D1C; border: 1px solid #2E2E2E; border-radius: 8px;
}
.rb-timeline-row .rb-timeline-when { color: #FFFFFF; font-weight: 600; font-size: 0.813rem; }
.rb-timeline-row .rb-timeline-sub { color: #A3A3A3; font-size: 0.75rem; }
.rb-timeline-row .rb-timeline-delivered { color: #22C55E; font-size: 0.688rem; margin-top: 2px; }

/* Generic panel + form fields (subscribe / customize / address / cancel modals) */
.rb-panel { background: #252927; border: 1px solid #2E2E2E; border-radius: 12px; padding: 14px; }
.rb-panel + .rb-panel, .rb-panel + .rb-field, .rb-field + .rb-field { margin-top: 12px; }
.rb-field { margin-bottom: 12px; }
.rb-field:last-child { margin-bottom: 0; }
.rb-label { color: #FFFFFF; font-size: 0.813rem; font-weight: 500; display: block; margin-bottom: 6px; }
.rb-label .req { color: #EF4444; }
.rb-input, .rb-select, .rb-textarea {
    width: 100%; box-sizing: border-box; padding: 12px;
    background: #252927; border: 1px solid #2E2E2E; border-radius: 12px;
    color: #FFFFFF; font-size: 0.875rem; font-family: inherit; outline: none;
    transition: border-color 0.2s;
}
.rb-input:focus, .rb-select:focus, .rb-textarea:focus { border-color: #2DD4BF; }
.rb-textarea { resize: vertical; }
.rb-select option { background: #252927; }
.rb-section-title { color: #FFFFFF; font-size: 0.938rem; font-weight: 600; margin-bottom: 10px; }

/* Menu schedule (subscribe / customize modals) */
.rb-menu-day { background: #252927; border: 1px solid #2E2E2E; border-radius: 12px; padding: 14px; margin-bottom: 10px; }
.rb-menu-day h4 { color: #2DD4BF; font-size: 0.875rem; font-weight: 600; margin: 0 0 10px; }
.rb-menu-dishes { display: flex; flex-direction: column; gap: 8px; }
.rb-menu-dish {
    display: flex; align-items: center; gap: 10px; background: #1A1D1C; padding: 10px;
    border: 1px solid #2E2E2E; border-radius: 8px;
}
.rb-menu-dish .rb-menu-dish-icon {
    width: 44px; height: 44px; background: #252927; border-radius: 8px; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center; font-size: 1.25rem;
}
.rb-menu-dish .rb-menu-dish-name { color: #FFFFFF; font-weight: 600; font-size: 0.813rem; margin-bottom: 2px; }
.rb-menu-dish .rb-menu-dish-meta { color: #A3A3A3; font-size: 0.75rem; }
.rb-customize-slot { margin-bottom: 12px; }
.rb-customize-slot .rb-customize-was { color: #A3A3A3; font-size: 0.75rem; margin-bottom: 6px; }
.rb-customize-slot .rb-customize-was b { color: #FFFFFF; font-weight: 600; }
.rb-customize-slot .rb-select, .rb-customize-slot .rb-textarea {
    background: #1A1D1C; padding: 10px; border-radius: 8px; font-size: 0.813rem;
}
.rb-customize-slot .rb-textarea { margin-top: 6px; }

/* Delivered-item customization line (detail modal) */
.rb-custom-line {
    display: flex; justify-content: space-between; padding: 8px 0;
    border-bottom: 1px solid #2E2E2E;
}
.rb-custom-line .rb-custom-key { color: #A3A3A3; font-size: 0.813rem; }
.rb-custom-line .rb-custom-val { color: #FFFFFF; font-size: 0.813rem; font-weight: 600; }
.rb-custom-line .rb-custom-val .note { color: #FBBF24; }
.rb-empty .rb-btn { margin-top: 1rem; }

/* Floating cart button — small round FAB, bottom-right (above bottom-nav) */
.rb-floating-cart {
    position: fixed; right: 18px; bottom: 84px; z-index: 30;
    width: 54px; height: 54px; border-radius: 50%;
    background: linear-gradient(135deg,#2DD4BF,#22C55E); color: #0F1412;
    border: none; padding: 0; display: flex; align-items: center; justify-content: center;
    cursor: pointer; box-shadow: 0 6px 20px rgba(45,212,191,0.45);
    font-family: inherit; transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.rb-floating-cart:hover { transform: translateY(-2px); box-shadow: 0 8px 26px rgba(45,212,191,0.55); }
.rb-floating-cart:active { transform: translateY(0); }
.rb-floating-cart .rb-cart-badge {
    position: absolute; top: -4px; right: -4px;
    min-width: 20px; height: 20px; padding: 0 5px;
    background: #EF4444; color: #fff; border-radius: 999px;
    border: 2px solid #0F1412;
    display: flex; align-items: center; justify-content: center;
    font-size: 0.688rem; font-weight: 800; line-height: 1;
}
.rb-floating-cart i { font-size: 1.25rem; }

/* Cart modal (bottom-sheet on mobile) */
.rb-cart-overlay {
    position: fixed; inset: 0; z-index: 100; background: rgba(0,0,0,0.7);
    display: flex; align-items: flex-end; justify-content: center;
}
.rb-cart-sheet {
    width: 100%; max-width: 560px; max-height: 90vh; background: #1A1D1C;
    border-radius: 20px 20px 0 0; display: flex; flex-direction: column; overflow: hidden;
    border-top: 1px solid #2E2E2E;
}
.rb-cart-sheet-head { display: flex; align-items: center; justify-content: space-between; padding: 16px 18px; border-bottom: 1px solid #2E2E2E; flex-shrink: 0; }
.rb-cart-sheet-head h3 { color: #fff; font-size: 1.063rem; font-weight: 700; margin: 0; display: flex; align-items: center; gap: 8px; }
.rb-cart-sheet-head h3 i { color: #2DD4BF; }
.rb-cart-sheet-body { overflow-y: auto; padding: 12px 18px; min-height: 0; }
.rb-cart-item { display: flex; gap: 12px; padding: 12px 0; border-bottom: 1px solid #252927; }
.rb-cart-item-thumb { width: 56px; height: 56px; border-radius: 10px; object-fit: cover; background: #252927; flex-shrink: 0; }
.rb-cart-item-thumb-placeholder { width: 56px; height: 56px; border-radius: 10px; background: #252927; display: flex; align-items: center; justify-content: center; color: #4B5563; flex-shrink: 0; }
.rb-cart-item-info { flex: 1; min-width: 0; }
.rb-cart-item-name { color: #fff; font-size: 0.875rem; font-weight: 700; margin: 0 0 2px; }
.rb-cart-item-price { color: #2DD4BF; font-size: 0.813rem; font-weight: 700; }
.rb-cart-qty { display: flex; align-items: center; gap: 10px; margin-top: 6px; }
.rb-qty-btn { width: 30px; height: 30px; border-radius: 8px; border: 1px solid #2E2E2E; background: #252927; color: #fff; cursor: pointer; font-size: 0.875rem; display: inline-flex; align-items: center; justify-content: center; }
.rb-qty-btn:hover { border-color: #2DD4BF; color: #2DD4BF; }
.rb-qty-val { color: #fff; font-weight: 700; min-width: 24px; text-align: center; }
.rb-cart-item-remove { background: none; border: none; color: #6B7280; cursor: pointer; font-size: 0.875rem; align-self: flex-start; padding: 4px; }
.rb-cart-item-remove:hover { color: #EF4444; }
.rb-cart-sheet-foot { padding: 16px 18px; border-top: 1px solid #2E2E2E; flex-shrink: 0; }
.rb-cart-total-row { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; color: #fff; font-size: 0.938rem; }
.rb-cart-total-row .rb-grand { color: #2DD4BF; font-size: 1.25rem; font-weight: 800; }

/* ── Responsive ─────────────────────────────────────────────────── */
@media (max-width: 768px) {
    .rb-head { padding: 1rem; }
    .rb-toolbar { padding: 0.875rem 1rem 0; }
    .rb-chip-row, .rb-tabs, .rb-body { padding-left: 1rem; padding-right: 1rem; }
    .rb-grid { grid-template-columns: repeat(auto-fill, minmax(min(100%, 160px), 1fr)); gap: 12px; }
    .rb-card-media, .rb-card-media-placeholder, .rb-card-skeleton .sk.media { height: 120px; }
    .rb-hero, .rb-section { margin-left: 1rem; margin-right: 1rem; }
    .rb-hero-top { flex-direction: column; align-items: stretch; }
    .rb-hero-logo, .rb-hero-logo-placeholder { width: 100%; height: 140px; border-radius: 14px; }
    .rb-reviews-summary { gap: 16px; }
}
@media (max-width: 480px) {
    .rb-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
    .rb-cat-grid { grid-template-columns: repeat(2, 1fr); }
    .rb-items-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; padding: 0 1rem 1rem; }
    .rb-item-media, .rb-item-media-placeholder { height: 110px; }
    .rb-head h1 { font-size: 1.25rem; }
    .rb-search-row { flex-wrap: nowrap; }
    .rb-filter-row { overflow-x: auto; flex-wrap: nowrap; scrollbar-width: none; }
    .rb-filter-row::-webkit-scrollbar { display: none; }
    .rb-clear-filters { margin-left: 0; flex-shrink: 0; }
    .rb-promo { min-width: 220px; }
}

/* ── Status pills (shared: orders + confirmation) ────────────────── */
.rb-status-pill {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 5px 11px; border-radius: 999px; font-size: 0.688rem; font-weight: 700;
    white-space: nowrap;
}
.rb-status-pill i { font-size: 0.625rem; }
.rb-status-pill.warn   { background: rgba(245,158,11,0.14); border: 1px solid rgba(245,158,11,0.4); color: #F59E0B; }
.rb-status-pill.info   { background: rgba(59,130,246,0.14); border: 1px solid rgba(59,130,246,0.4); color: #3B82F6; }
.rb-status-pill.pri    { background: rgba(139,92,246,0.14); border: 1px solid rgba(139,92,246,0.4); color: #8B5CF6; }
.rb-status-pill.ok     { background: rgba(34,197,94,0.14); border: 1px solid rgba(34,197,94,0.4); color: #22C55E; }
.rb-status-pill.danger { background: rgba(239,68,68,0.14); border: 1px solid rgba(239,68,68,0.4); color: #EF4444; }
.rb-status-pill.muted  { background: rgba(107,114,128,0.14); border: 1px solid rgba(107,114,128,0.4); color: #9CA3AF; }

/* ── My Orders list ──────────────────────────────────────────────── */
.rb-orders-head { padding: 1.25rem 1.25rem 0.5rem; }
.rb-orders-head h1 { color: #fff; font-size: 1.375rem; font-weight: 800; margin: 0; display: flex; align-items: center; gap: 0.5rem; }
.rb-orders-head h1 i { color: #2DD4BF; }
.rb-order-list { padding: 0.75rem 1.25rem 1.5rem; display: flex; flex-direction: column; gap: 12px; }
.rb-order-card {
    background: #1A1D1C; border: 1px solid #2E2E2E; border-radius: 14px; padding: 14px;
    cursor: pointer; transition: all 0.18s; display: flex; flex-direction: column; gap: 10px;
}
.rb-order-card:hover { border-color: rgba(45,212,191,0.45); transform: translateY(-1px); }
.rb-order-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.rb-order-number { color: #fff; font-size: 0.875rem; font-weight: 700; font-family: 'Courier New', monospace; display: inline-flex; align-items: center; gap: 6px; min-width: 0; }
.rb-order-number i { color: #2DD4BF; }
.rb-order-number span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rb-order-restaurant { color: #fff; font-size: 1rem; font-weight: 700; display: inline-flex; align-items: center; gap: 8px; }
.rb-order-restaurant i { color: #2DD4BF; font-size: 0.875rem; }
.rb-order-meta { display: flex; flex-wrap: wrap; gap: 8px; }
.rb-order-foot { display: flex; align-items: center; justify-content: space-between; padding-top: 6px; border-top: 1px solid #252927; }
.rb-order-total { color: #22C55E; font-size: 1.063rem; font-weight: 800; }
.rb-order-track { color: #2DD4BF; font-size: 0.813rem; font-weight: 700; display: inline-flex; align-items: center; gap: 6px; }

/* ── Order confirmation / tracking ───────────────────────────────── */
.rb-confirm-page { padding-bottom: clamp(2rem, 6vw, 3rem); }
.rb-confirm-banner { text-align: center; padding: clamp(1.75rem, 5vw, 2.75rem) 1rem; border-bottom: 2px solid #2E2E2E; }
.rb-confirm-banner.success { background: linear-gradient(135deg, rgba(34,197,94,0.12) 0%, rgba(45,212,191,0.05) 100%); border-bottom-color: rgba(34,197,94,0.25); }
.rb-confirm-banner.tracking { background: linear-gradient(135deg, rgba(45,212,191,0.12) 0%, rgba(59,130,246,0.05) 100%); border-bottom-color: rgba(45,212,191,0.25); }
.rb-confirm-banner-icon { font-size: clamp(2.5rem, 7vw, 3.5rem); margin-bottom: 0.75rem; }
.rb-confirm-banner.success .rb-confirm-banner-icon { color: #22C55E; }
.rb-confirm-banner.tracking .rb-confirm-banner-icon { color: #2DD4BF; }
.rb-confirm-heading { color: #fff; font-size: clamp(1.25rem, 4vw, 1.75rem); font-weight: 800; margin: 0 0 0.375rem; }
.rb-confirm-banner.success .rb-confirm-heading { color: #22C55E; }
.rb-confirm-banner.tracking .rb-confirm-heading { color: #2DD4BF; }
.rb-confirm-subheading { color: #A3A3A3; font-size: 0.875rem; margin: 0; }
.rb-confirm-content { max-width: 680px; margin: 0 auto; padding: 1rem 1.25rem 0; display: flex; flex-direction: column; gap: 12px; }
.rb-confirm-card { background: #1A1D1C; border: 1px solid #2E2E2E; border-radius: 14px; padding: 16px; }
.rb-confirm-card-title { color: #fff; font-size: 0.938rem; font-weight: 700; margin: 0 0 1rem; padding-bottom: 0.75rem; border-bottom: 1px solid #2E2E2E; display: flex; align-items: center; gap: 8px; }
.rb-confirm-card-title i { color: #2DD4BF; }
.rb-confirm-items { display: flex; flex-direction: column; gap: 10px; }
.rb-confirm-item { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.rb-confirm-item-info { display: flex; align-items: center; gap: 8px; flex: 1; min-width: 0; }
.rb-confirm-item-qty { color: #22C55E; font-size: 0.813rem; font-weight: 700; flex-shrink: 0; }
.rb-confirm-item-name { color: #fff; font-size: 0.875rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rb-confirm-item-price { color: #A3A3A3; font-size: 0.813rem; flex-shrink: 0; }
.rb-confirm-divider { height: 1px; background: #2E2E2E; margin: 10px 0; }
.rb-confirm-total-row { display: flex; justify-content: space-between; align-items: center; margin-bottom: 7px; color: #A3A3A3; font-size: 0.813rem; }
.rb-confirm-total-row span:last-child { color: #fff; font-weight: 500; }
.rb-confirm-grand { display: flex; justify-content: space-between; align-items: center; color: #fff; font-size: 1.063rem; font-weight: 700; }
.rb-confirm-grand .rb-grand { color: #22C55E; font-size: 1.25rem; font-weight: 800; }
.rb-confirm-est-grid { display: flex; flex-direction: column; gap: 10px; }
.rb-confirm-est { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.rb-confirm-est-label { color: #A3A3A3; font-size: 0.813rem; }
.rb-confirm-est-value { color: #fff; font-size: 0.813rem; font-weight: 500; text-align: right; }
.rb-confirm-details-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.rb-confirm-detail { display: flex; flex-direction: column; gap: 2px; }
.rb-confirm-detail.full { grid-column: 1 / -1; }
.rb-confirm-detail-label { color: #A3A3A3; font-size: 0.75rem; font-weight: 600; }
.rb-confirm-detail-value { color: #fff; font-size: 0.875rem; word-break: break-word; }
.rb-confirm-actions { display: flex; gap: 10px; flex-wrap: wrap; padding-top: 4px; }
.rb-confirm-actions .rb-btn { flex: 1; min-width: 180px; }
.rb-order-number-card { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.rb-order-number-section { display: flex; flex-direction: column; gap: 3px; }
.rb-order-number-value { color: #fff; font-size: 1.063rem; font-weight: 700; font-family: 'Courier New', monospace; }

@media (max-width: 480px) {
    .rb-confirm-details-grid { grid-template-columns: 1fr; }
    .rb-confirm-actions { flex-direction: column; }
    .rb-confirm-actions .rb-btn { min-width: unset; }
}

/* ---- My Orders: status filter tabs ---- */
.rb-orders-tabs { display: flex; align-items: center; gap: 8px; padding: 0.75rem 1.25rem 0.5rem; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.rb-orders-tab { flex: 0 0 auto; padding: 0.45rem 0.9rem; border-radius: 999px; border: 1px solid #2E3531; background: #1B2025; color: #9CA3AF; font-size: 0.813rem; font-weight: 600; cursor: pointer; white-space: nowrap; transition: all 0.15s ease; }
.rb-orders-tab:hover { border-color: #2DD4BF; color: #E5E7EB; }
.rb-orders-tab.active { background: #2DD4BF; color: #0B1014; border-color: #2DD4BF; }
.rb-orders-refresh { margin-left: auto; flex: 0 0 auto; width: 36px; height: 36px; border-radius: 999px; border: 1px solid #2E3531; background: #1B2025; color: #D1D5DB; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.rb-orders-refresh:hover { border-color: #2DD4BF; color: #2DD4BF; }

/* ---- Order tracking: status timeline ---- */
.rb-track-timeline { display: flex; flex-direction: column; gap: 0; padding: 0.25rem 0; }
.rb-track-step { display: flex; align-items: flex-start; gap: 12px; padding: 0.5rem 0; position: relative; }
.rb-track-step:not(:last-child)::before { content: ''; position: absolute; left: 15px; top: 34px; bottom: -4px; width: 2px; background: #2E3531; }
.rb-track-step.done:not(:last-child)::before { background: #2DD4BF; }
.rb-track-dot { flex: 0 0 32px; width: 32px; height: 32px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: #1B2025; border: 2px solid #2E3531; color: #6B7280; font-size: 0.813rem; z-index: 1; }
.rb-track-step.done .rb-track-dot { background: #2DD4BF; border-color: #2DD4BF; color: #0B1014; }
.rb-track-step.current .rb-track-dot { background: #1B2025; border-color: #2DD4BF; color: #2DD4BF; box-shadow: 0 0 0 4px rgba(45,212,191,0.15); }
.rb-track-step.terminal .rb-track-dot { background: #EF4444; border-color: #EF4444; color: #fff; }
.rb-track-step.terminal.rejected .rb-track-dot { background: #F59E0B; border-color: #F59E0B; }
.rb-track-label { padding-top: 5px; color: #6B7280; font-size: 0.875rem; font-weight: 500; }
.rb-track-step.done .rb-track-label { color: #E5E7EB; }
.rb-track-step.current .rb-track-label { color: #2DD4BF; font-weight: 700; }
.rb-track-step.terminal .rb-track-label { color: #EF4444; font-weight: 700; }
.rb-track-step.terminal.rejected .rb-track-label { color: #F59E0B; }

/* ---- Order tracking: inline cancel form ---- */
.rb-cancel-form { display: flex; flex-direction: column; gap: 10px; padding: 0.75rem; border: 1px solid #5B2323; border-radius: 12px; background: rgba(239,68,68,0.06); width: 100%; }
.rb-cancel-form-title { color: #FCA5A5; font-size: 0.875rem; font-weight: 700; margin: 0; }
.rb-cancel-reason { width: 100%; min-height: 64px; padding: 0.6rem 0.75rem; border-radius: 10px; border: 1px solid #2E3531; background: #1B2025; color: #fff; font-size: 0.875rem; font-family: inherit; resize: vertical; }
.rb-cancel-reason:focus { outline: none; border-color: #2DD4BF; }
.rb-cancel-form-actions { display: flex; gap: 10px; justify-content: flex-end; }
.rb-cancel-form-actions .rb-btn { flex: 0 0 auto; }

@media (max-width: 480px) {
    .rb-cancel-form-actions { flex-direction: column-reverse; }
    .rb-cancel-form-actions .rb-btn { width: 100%; }
}
/* ========== CHECKOUT MODAL ========== */
.rb-checkout-overlay {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0, 0, 0, 0.7); backdrop-filter: blur(4px);
    display: flex; align-items: center; justify-content: center;
    z-index: 100000; padding: 16px; box-sizing: border-box;
    /* PageLessModal.Open force-scrolls the page to the top (window.scrollTo
       (0,0)) when the modal opens. The framework .custom-modal-container
       normally fades its backdrop in from opacity:0 over 0.3s (fadeIn), which
       reveals that scroll jump through the semi-transparent overlay and reads
       as a "blink" before the modal appears. Disable that entry animation here
       so the backdrop is opaque on the first paint and masks the scroll change.
       The panel's slide-up animation is kept (it runs over the now-opaque
       backdrop, so nothing underneath is revealed). !important is needed to
       override the framework rule. */
    animation: none !important;
}
.rb-checkout-modal {
    background: #1A1D1C; border-radius: 20px; box-shadow: 0 20px 60px rgba(0,0,0,0.5);
    width: 100%; max-width: 620px; max-height: 90vh; overflow: hidden;
    display: flex; flex-direction: column; margin: auto;
    /* The framework .custom-modal slides/fades the panel in from opacity:0
       (modalSlideUp 0.3s). With the backdrop now opaque on the first paint,
       that panel fade-in reads as a brief delay before the content appears.
       Disable it so the whole modal paints immediately. !important overrides
       the framework rule. */
    animation: none !important;
}
.rb-checkout-modal.rb-checkout-loading { opacity: 0.6; pointer-events: none; }

.rb-checkout-modal-head {
    flex-shrink: 0; display: flex; align-items: center; gap: 12px;
    padding: 18px 22px; border-bottom: 1px solid #2E2E2E;
    background: linear-gradient(135deg, rgba(45,212,191,0.08) 0%, rgba(34,197,94,0.08) 100%);
}
.rb-checkout-title { color: #FFFFFF; font-size: 1.25rem; font-weight: 700; margin: 0; flex-shrink: 0; }
.rb-checkout-restaurant-name {
    color: #A3A3A3; font-size: 0.85rem; margin-left: auto;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 180px;
}
.rb-checkout-close {
    flex-shrink: 0; width: 32px; height: 32px; border: none; border-radius: 50%;
    background: #252927; color: #FFFFFF; font-size: 1.25rem; line-height: 1; cursor: pointer;
    display: flex; align-items: center; justify-content: center; transition: background 0.2s ease;
}
.rb-checkout-close:hover { background: #2E2E2E; }

.rb-checkout-modal-body {
    flex: 1 1 auto; min-height: 0; overflow-y: auto; overflow-x: hidden;
    padding: 18px 22px; display: flex; flex-direction: column; gap: 16px;
}

.rb-checkout-modal-foot {
    flex-shrink: 0; padding: 14px 22px 18px; border-top: 1px solid #2E2E2E; background: #1A1D1C;
}
.rb-checkout-place-order-btn {
    width: 100%; padding: 0.875rem; border: none; border-radius: 0.625rem;
    background: linear-gradient(90deg, #2DD4BF 0%, #22C55E 100%); color: #FFFFFF;
    font-weight: 700; font-size: 1rem; cursor: pointer; transition: transform 0.2s ease;
}
.rb-checkout-place-order-btn:hover { transform: translateY(-2px); }
.rb-checkout-place-order-btn:disabled { opacity: 0.7; cursor: not-allowed; transform: none !important; }
.rb-checkout-footer-note { text-align: center; color: #6B7280; font-size: 0.75rem; margin: 8px 0 0; }

.rb-checkout-card { background: #0F1412; border: 2px solid #2E2E2E; border-radius: 0.875rem; padding: 1rem 1.25rem; }
.rb-checkout-card-title {
    color: #FFFFFF; font-size: 1rem; font-weight: 600; margin: 0 0 1rem; padding-bottom: 0.75rem;
    border-bottom: 2px solid #2E2E2E;
}
.rb-checkout-field { margin-bottom: 1rem; }
.rb-checkout-field:last-child { margin-bottom: 0; }
.rb-checkout-label { display: block; color: #A3A3A3; font-size: 0.813rem; font-weight: 600; margin-bottom: 0.5rem; }
.rb-checkout-input {
    width: 100%; padding: 0.75rem 1rem; background: #252927; border: 2px solid #2E2E2E;
    border-radius: 0.625rem; color: #FFFFFF; font-size: 0.875rem; box-sizing: border-box;
    transition: border-color 0.2s ease;
}
.rb-checkout-input::placeholder { color: #6B7280; }
.rb-checkout-input:focus { outline: none; border-color: #22C55E; }
.rb-checkout-textarea { min-height: 80px; resize: vertical; font-family: inherit; line-height: 1.5; }

.rb-checkout-radio-group { display: flex; gap: 0.75rem; flex-wrap: wrap; }
.rb-checkout-radio {
    display: flex; align-items: center; gap: 0.625rem; padding: 0.75rem 1rem;
    background: #252927; border: 2px solid #2E2E2E; border-radius: 0.625rem;
    cursor: pointer; transition: all 0.2s ease; flex: 1; min-width: 120px;
}
.rb-checkout-radio.active { border-color: #22C55E; background: rgba(34,197,94,0.1); }
.rb-checkout-radio:hover { border-color: #22C55E; }
.rb-checkout-radio-icon { font-size: 1.25rem; }
.rb-checkout-radio-text { color: #FFFFFF; font-size: 0.813rem; font-weight: 500; }
.rb-checkout-radio-fee { color: #A3A3A3; font-size: 0.75rem; margin-left: auto; }

.rb-checkout-summary-items { display: flex; flex-direction: column; gap: 0.6rem; max-height: 240px; overflow-y: auto; }
.rb-checkout-summary-item { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; }
.rb-summary-item-info { display: flex; align-items: center; gap: 0.5rem; min-width: 0; flex: 1; }
.rb-summary-item-qty { color: #22C55E; font-size: 0.813rem; font-weight: 700; flex-shrink: 0; }
.rb-summary-item-name { color: #FFFFFF; font-size: 0.813rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rb-summary-item-price { color: #A3A3A3; font-size: 0.813rem; flex-shrink: 0; }
.rb-checkout-divider { height: 2px; background: #2E2E2E; margin: 0.75rem 0; }
.rb-checkout-summary-row { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.5rem; }
.rb-checkout-summary-row span:first-child { color: #A3A3A3; font-size: 0.813rem; }
.rb-checkout-summary-row span:last-child { color: #FFFFFF; font-size: 0.813rem; font-weight: 500; }
.rb-checkout-summary-total { display: flex; align-items: center; justify-content: space-between; margin: 0.5rem 0 0; }
.rb-checkout-summary-total span:first-child { color: #FFFFFF; font-size: 1.063rem; font-weight: 700; }
.rb-checkout-summary-total span:last-child { color: #22C55E; font-size: 1.25rem; font-weight: 700; }
.rb-checkout-error {
    background: rgba(239,68,68,0.1); border: 1px solid rgba(239,68,68,0.3); border-radius: 0.5rem;
    padding: 0.75rem 1rem; color: #EF4444; font-size: 0.813rem; margin-top: 0.75rem;
}

.rb-checkout-empty { text-align: center; padding: 3rem 1rem; }
.rb-checkout-empty-icon { font-size: 3rem; margin-bottom: 1rem; }
.rb-checkout-empty-title { color: #FFFFFF; font-size: 1.25rem; font-weight: 600; margin-bottom: 0.5rem; }
.rb-checkout-empty-subtitle { color: #A3A3A3; font-size: 0.938rem; }

@media (max-width: 480px) {
    .rb-checkout-overlay { padding: 0; }
    .rb-checkout-modal { max-height: 100vh; height: 100vh; border-radius: 0; max-width: 100%; }
    .rb-checkout-radio { min-width: 100px; padding: 0.625rem 0.75rem; }
    .rb-checkout-restaurant-name { display: none; }
}