/* ═══════════════════════════════════════════
Ajab Delivery — Global Styles
Colors: Ink Navy #0B1530 | Signal Orange #FF5A2B | Tracking Gold #FFB454
Type: Space Grotesk (display) · Inter (body) · IBM Plex Mono (data/labels)
═══════════════════════════════════════════ */
/* Fonts are now loaded via +
in each page's instead of @import here. @import is discovered late
(only after this stylesheet itself has been fetched+parsed), which delays
the font request and causes headings to render in a mismatched fallback
font for longer than necessary — showing up as thin/washed-out heading
text right as a section scrolls into view. Loading the fonts from
lets the request start immediately, in parallel with the HTML. */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
:root {
color-scheme: light;
--navy: #0B1530;
--navy-dark: #060A18;
--navy-light: #1B2C52;
--orange: #FF5A2B;
--orange-light:#FFF1E8;
--orange-mid: #FFD0B8;
--gold: #FFB454;
--white: #FFFFFF;
--gray-bg: #FBF7F1;
--gray-light: #EAE3D6;
--gray-text: #5B6478;
--gray-dark: #161C2C;
--success: #22C55E;
--status-blue-bg: #EAF2FF;
--status-blue: #2563EB;
--status-green-bg: #E8FBF0;
--status-green: #16A34A;
--status-red-bg: #FDE8E8;
--status-red: #DC2626;
--status-amber-bg: #FFF4D6;
--status-amber: #B45309;
--panel-alt: #FAFAF8;
--radius-sm: 8px;
--radius-md: 14px;
--radius-lg: 22px;
--shadow-sm: 0 2px 10px rgba(11,21,48,.07);
--shadow-md: 0 8px 28px rgba(11,21,48,.10);
--shadow-lg: 0 16px 48px rgba(11,21,48,.16);
--font: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
--font-display:'Space Grotesk', var(--font);
--font-mono: 'IBM Plex Mono', 'SF Mono', monospace;
--surface: var(--white);
--text-strong: var(--navy);
}
[data-theme="dark"] {
color-scheme: dark;
--gray-bg: #0B111F;
--surface: #161E30;
--gray-light: #262F45;
--gray-text: #92A0BC;
--gray-dark: #E7EAF2;
--text-strong: #F1F3F9;
--orange-light:#2A1F1C;
--orange-mid: #4A2E22;
--status-blue-bg: rgba(59,130,246,.18);
--status-blue: #60A5FA;
--status-green-bg: rgba(34,197,94,.18);
--status-green: #4ADE80;
--status-red-bg: rgba(239,68,68,.18);
--status-red: #F87171;
--status-amber-bg: rgba(245,158,11,.18);
--status-amber: #FBBF24;
--panel-alt: #1B2438;
--shadow-sm: 0 2px 10px rgba(0,0,0,.25);
--shadow-md: 0 8px 28px rgba(0,0,0,.35);
--shadow-lg: 0 16px 48px rgba(0,0,0,.5);
}
html { overflow-x: hidden; }
body { font-family: var(--font); background: var(--gray-bg); color: var(--gray-dark); line-height: 1.6; transition: background-color .2s, color .2s; overflow-x: hidden; }
/* ── Typography ── */
h1,h2,h3,h4 { font-family: var(--font-display); color: var(--text-strong); font-weight: 700; line-height: 1.15; letter-spacing: -0.01em; }
h1 { font-size: clamp(30px, 5vw, 54px); letter-spacing: -0.02em; }
h2 { font-size: clamp(22px, 3.5vw, 34px); }
h3 { font-size: clamp(16px, 2.5vw, 20px); }
p { color: var(--gray-text); }
a { color: var(--orange); text-decoration: none; }
a:hover { text-decoration: underline; }
/* ── Buttons ── */
.btn {
display: inline-flex; align-items: center; justify-content: center; gap: 8px;
padding: 13px 28px; border-radius: var(--radius-sm); font-size: 15px;
font-weight: 600; cursor: pointer; border: none; transition: all .2s;
text-decoration: none; white-space: nowrap; font-family: var(--font);
}
.btn-primary { background: var(--orange); color: var(--white); box-shadow: 0 6px 20px rgba(255,90,43,.28); }
.btn-primary:hover { background: #E04A1E; transform: translateY(-1px); text-decoration: none; }
.btn-outline { background: transparent; color: var(--text-strong); border: 1.5px solid var(--text-strong); }
.btn-outline:hover { background: var(--navy); color: var(--white); text-decoration: none; }
.btn-white { background: rgba(255,255,255,.08); color: var(--white); border: 1.5px solid rgba(255,255,255,.35); }
.btn-white:hover { background: rgba(255,255,255,.16); text-decoration: none; }
.btn-sm { padding: 9px 18px; font-size: 13px; }
.btn:disabled { opacity: .6; cursor: not-allowed; transform: none !important; }
/* ── Google sign-in button + auth-page dividers/links ── */
.btn-google {
display: inline-flex; align-items: center; justify-content: center; gap: 10px;
width: 100%; padding: 12px 16px; border-radius: var(--radius-sm);
font-size: 14px; font-weight: 600; font-family: var(--font);
background: var(--white); color: #3C4043; border: 1.5px solid #DADCE0;
cursor: pointer; transition: all .2s;
}
.btn-google:hover { background: #F8F9FA; box-shadow: 0 1px 4px rgba(0,0,0,.1); }
.btn-google:disabled { opacity: .6; cursor: not-allowed; }
.btn-google svg { flex-shrink: 0; }
.auth-divider {
display: flex; align-items: center; gap: 12px; margin: 18px 0;
color: var(--gray-text); font-size: 12px; text-transform: uppercase; letter-spacing: .04em;
}
.auth-divider::before, .auth-divider::after { content: ""; flex: 1; height: 1px; background: var(--gray-light); }
.auth-links-row {
display: flex; align-items: center; justify-content: space-between;
font-size: 12.5px; margin-top: 10px;
}
.auth-links-row a { color: var(--gray-text); }
/* ── Navbar ── */
.navbar {
background: var(--navy); padding: 0 5%;
display: flex; align-items: center; justify-content: space-between;
height: 68px; position: sticky; top: 0; z-index: 100;
box-shadow: 0 2px 12px rgba(0,0,0,.15);
}
.nav-logo { display: flex; align-items: center; gap: 10px; text-decoration: none; }
.nav-logo-icon {
width: 38px; height: 38px; background: var(--orange);
border-radius: 9px; display: flex; align-items: center; justify-content: center;
font-family: var(--font-display); font-size: 14px; font-weight: 700; color: var(--white); letter-spacing: -0.5px;
position: relative; flex-shrink: 0;
}
.nav-logo-icon .j { color: var(--navy-dark); }
.nav-logo-text { color: var(--white); font-family: var(--font-display); font-size: 17px; font-weight: 700; }
.nav-right { display: flex; align-items: center; gap: 8px; }
.nav-links { display: flex; align-items: center; gap: 8px; }
.nav-links a {
color: rgba(255,255,255,.75); font-size: 14px; font-weight: 500;
padding: 8px 14px; border-radius: var(--radius-sm); transition: all .2s;
text-decoration: none;
}
.nav-links a:hover, .nav-links a.active { color: var(--white); background: rgba(255,255,255,.1); }
.nav-links .nav-cta { background: var(--orange); color: var(--white); padding: 8px 18px; }
.nav-links .nav-cta:hover { background: #d44a1c; }
.nav-links .nav-logout { color: rgba(255,255,255,.55); font-size: 13px; }
.nav-links .nav-logout:hover { color: var(--white); background: rgba(255,255,255,.1); }
.nav-lang { position: relative; display: inline-block; }
.lang-trigger {
display: flex; align-items: center; gap: 6px; background: rgba(255,255,255,.08);
border: none; color: rgba(255,255,255,.85); font-size: 12.5px; font-weight: 600;
padding: 7px 10px; border-radius: 8px; cursor: pointer; transition: all .2s;
}
.lang-trigger:hover { background: rgba(255,255,255,.16); color: var(--white); }
.lang-trigger-icon { font-size: 12.5px; opacity: .9; }
.lang-trigger-caret { font-size: 9px; opacity: .75; transition: transform .15s; }
.nav-lang.open .lang-trigger-caret { transform: rotate(180deg); }
.lang-menu {
display: none; position: absolute; top: 44px; right: 0; min-width: 190px;
background: var(--surface); color: var(--gray-dark); border-radius: var(--radius-md);
box-shadow: var(--shadow-lg); padding: 6px; z-index: 200;
}
.nav-lang.open .lang-menu { display: block; }
.lang-option {
display: flex; align-items: center; gap: 10px; width: 100%; background: none; border: none;
padding: 9px 10px; border-radius: 9px; text-align: left; cursor: pointer; font-family: var(--font);
}
.lang-option:hover { background: var(--gray-light); }
.lang-option.active { background: var(--orange-light); }
.lang-flag { font-size: 18px; line-height: 1; }
.lang-text { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.lang-name { font-size: 13.5px; font-weight: 700; color: var(--text-strong); }
.lang-native { font-size: 11.5px; color: var(--gray-text); }
.lang-dot { width: 8px; height: 8px; border-radius: 999px; background: var(--orange); opacity: 0; flex-shrink: 0; }
.lang-option.active .lang-dot { opacity: 1; }
/* Floating light/dark toggle — fixed to the viewport (not inside
.nav-links) so it's reachable on every page at any scroll position,
without depending on the hamburger menu being open on mobile. Sits
bottom-left so it never collides with the chat FAB (#ajab-fab),
which is bottom-right. */
.theme-fab {
position: fixed; bottom: 24px; left: 24px; z-index: 998;
width: 56px; height: 56px; border-radius: 50%; background: var(--navy);
border: none; cursor: pointer; box-shadow: var(--shadow-lg); color: rgba(255,255,255,.85);
display: flex; align-items: center; justify-content: center; transition: transform .2s, background .2s, opacity .2s;
/* Semi-transparent at rest so it never fully blots out page content
(e.g. an order total) that happens to land underneath it while
scrolling — full opacity on hover/focus keeps it clear and usable. */
opacity: .8;
}
.theme-fab:hover, .theme-fab:focus-visible { transform: scale(1.08); background: var(--navy-dark); color: var(--white); opacity: 1; }
.theme-fab svg { width: 24px; height: 24px; }
.theme-fab .icon-moon { display: none; }
[data-theme="dark"] .theme-fab .icon-sun { display: none; }
[data-theme="dark"] .theme-fab .icon-moon { display: block; }
@media (max-width: 768px) { .theme-fab { bottom: 18px; left: 18px; width: 52px; height: 52px; } }
.hamburger { display: none; flex-direction: column; gap: 5px; cursor: pointer; padding: 6px; }
.hamburger span { width: 24px; height: 2px; background: var(--white); border-radius: 2px; transition: all .3s; }
/* ── Notification bell ──
Sits in .nav-right, outside .nav-links, so it (and its unread badge) stays
visible at every screen width — including mobile, where .nav-links
collapses behind the hamburger. A notification the person actually needs
to notice (order status, new application decision, etc.) shouldn't be
hidden a tap away inside the nav menu. */
.cart-wrap { position: relative; flex-shrink: 0; }
.cart-bell {
display: flex; align-items: center; justify-content: center;
width: 32px; height: 32px; border-radius: 8px;
background: rgba(255,255,255,.08); border: none; color: rgba(255,255,255,.75);
cursor: pointer; transition: all .2s; position: relative; text-decoration: none;
}
.cart-bell:hover { background: rgba(255,255,255,.16); color: var(--white); }
.cart-bell svg { width: 17px; height: 17px; }
.cart-badge {
position: absolute; top: -3px; right: -3px; min-width: 16px; height: 16px;
padding: 0 4px; border-radius: 999px; background: var(--white); color: #E11D2E;
font-family: var(--font-mono); font-size: 10px; font-weight: 700;
display: flex; align-items: center; justify-content: center; line-height: 1;
border: 2px solid var(--navy);
}
.notif-wrap { position: relative; flex-shrink: 0; }
.notif-bell {
display: flex; align-items: center; justify-content: center;
width: 32px; height: 32px; border-radius: 8px;
background: rgba(255,255,255,.08); border: none; color: rgba(255,255,255,.75);
cursor: pointer; transition: all .2s; position: relative;
}
.notif-bell:hover { background: rgba(255,255,255,.16); color: var(--white); }
.notif-bell svg { width: 17px; height: 17px; }
.notif-badge {
position: absolute; top: -3px; right: -3px; min-width: 16px; height: 16px;
padding: 0 4px; border-radius: 999px; background: var(--white); color: #E11D2E;
font-family: var(--font-mono); font-size: 10px; font-weight: 700;
display: flex; align-items: center; justify-content: center; line-height: 1;
border: 2px solid var(--navy);
}
.notif-dropdown {
display: none; position: absolute; top: 44px; right: 0; width: 340px; max-width: 88vw;
max-height: 420px; overflow-y: auto; background: var(--surface); color: var(--gray-dark);
border-radius: var(--radius-md); box-shadow: var(--shadow-lg); z-index: 200;
}
.notif-dropdown.open { display: block; }
.notif-dropdown-head {
display: flex; align-items: center; justify-content: space-between;
padding: 14px 16px; border-bottom: 1px solid var(--gray-light);
}
.notif-dropdown-head h4 { font-size: 14px; margin: 0; }
.notif-mark-all {
background: none; border: none; color: var(--orange); font-size: 12px; font-weight: 600;
cursor: pointer; padding: 0;
}
.notif-list { display: flex; flex-direction: column; }
.notif-item {
display: block; width: 100%; text-align: left; background: none; border: none;
padding: 12px 16px; border-bottom: 1px solid var(--gray-light); cursor: pointer;
font-family: var(--font); transition: background .15s;
}
.notif-item:last-child { border-bottom: none; }
.notif-item:hover { background: var(--gray-light); }
.notif-item.unread { background: var(--orange-light); }
.notif-item-msg { font-size: 12.5px; color: var(--text-strong); line-height: 1.45; text-align: left; overflow-wrap: anywhere; }
.notif-item-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 5px; }
.notif-item-time { font-size: 11px; color: var(--gray-text); font-family: var(--font-mono); text-align: left; }
.notif-item-track { font-size: 11px; color: var(--orange); font-weight: 600; white-space: nowrap; }
.notif-empty { padding: 28px 16px; text-align: center; color: var(--gray-text); font-size: 13px; }
/* ── Section ── */
.section { padding: 88px 5%; }
.section-center { text-align: center; max-width: 640px; margin: 0 auto 52px; }
.section-center p { margin-top: 12px; font-size: 17px; }
.section-label {
display: inline-flex; align-items: center; gap: 9px; color: var(--orange);
font-family: var(--font-mono); font-size: 12px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase;
margin-bottom: 16px;
}
.section-label::before {
content: ''; width: 6px; height: 6px; background: var(--orange); transform: rotate(45deg); flex-shrink: 0;
}
/* ── Cards ── */
.card {
background: var(--surface); border-radius: var(--radius-md); border: 1px solid var(--gray-light);
box-shadow: var(--shadow-sm); padding: 28px; transition: box-shadow .2s, transform .2s;
}
.card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }
/* ── Business/menu search bar (order page) ── */
.business-search-bar { position: relative; margin-bottom: 18px; }
.business-search-bar input {
width: 100%; padding: 12px 40px 12px 16px; border: 1.5px solid var(--gray-light);
border-radius: var(--radius-sm); font-size: 14px; font-family: var(--font);
outline: none; transition: border-color .2s; background: var(--surface);
}
.business-search-bar input:focus { border-color: var(--text-strong); }
.business-search-bar button {
position: absolute; right: 10px; top: 50%; transform: translateY(-50%);
border: none; background: none; color: var(--gray-text); font-size: 14px;
cursor: pointer; padding: 4px 6px; line-height: 1;
}
.business-search-bar button:hover { color: var(--text-strong); }
/* ── Form elements ── */
.form-group { margin-bottom: 18px; }
.form-group label { display: block; font-size: 13px; font-weight: 600; color: var(--text-strong); margin-bottom: 6px; }
.form-group input, .form-group textarea, .form-group select {
width: 100%; padding: 12px 16px; border: 1.5px solid var(--gray-light);
border-radius: var(--radius-sm); font-size: 14px; font-family: var(--font);
outline: none; transition: border-color .2s; background: var(--surface);
}
.form-group input:focus, .form-group textarea:focus { border-color: var(--text-strong); }
.form-group textarea { resize: vertical; min-height: 120px; }
.form-error { color: var(--status-red); font-size: 12px; margin-top: 5px; display: none; }
.form-hint { font-size: 12px; margin-top: 5px; display: none; }
.form-hint.valid { display: block; color: var(--success); }
.form-hint.invalid { display: block; color: var(--status-red); }
/* Live password-requirement checklist — shown while creating/resetting a
customer or restaurant password. Each rule ticks green as it's met. */
.password-checklist { list-style: none; padding: 0; margin: 8px 0 0; display: none; flex-direction: column; gap: 4px; }
.password-checklist.show { display: flex; }
.password-checklist li { font-size: 12.5px; color: var(--gray-text); display: flex; align-items: center; gap: 7px; transition: color .15s ease; }
.password-checklist li::before {
content: "";
width: 15px; height: 15px; flex-shrink: 0;
border-radius: 50%;
border: 1.5px solid var(--gray-text);
display: inline-flex; align-items: center; justify-content: center;
font-size: 10px; line-height: 1; color: transparent;
transition: all .15s ease;
}
.password-checklist li.met { color: var(--success); }
.password-checklist li.met::before {
content: "✓";
border-color: var(--success);
background: var(--success);
color: #fff;
}
/* ── Application stepper ── */
.stepper { display: flex; align-items: flex-start; justify-content: center; margin-bottom: 30px; gap: 0; }
.step { display: flex; flex-direction: column; align-items: center; gap: 8px; width: 96px; flex-shrink: 0; }
.step-circle {
width: 34px; height: 34px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
border: 2px solid var(--gray-light); color: var(--gray-text); font-family: var(--font-mono); font-size: 13px; font-weight: 600;
background: var(--surface); transition: all .2s;
}
.step-label { font-size: 12px; color: var(--gray-text); text-align: center; font-weight: 600; }
.step.active .step-circle { border-color: var(--orange); color: var(--orange); box-shadow: 0 0 0 4px var(--orange-light); }
.step.active .step-label { color: var(--text-strong); }
.step.complete .step-circle { border-color: var(--success); background: var(--success); color: var(--white); }
.step.complete .step-label { color: var(--text-strong); }
.step-line { flex: 1; height: 2px; background: var(--gray-light); margin: 17px -8px 0; max-width: 60px; }
.step-line.complete { background: var(--success); }
.apply-step { display: none; }
.apply-step.active { display: block; }
.step-actions { display: flex; gap: 12px; margin-top: 22px; }
.step-actions .btn { flex: 1; }
/* ── Category grid (browse-by-category, matches order page) ── */
.category-grid {
display: grid; grid-template-columns: repeat(auto-fill, minmax(96px,1fr)); gap: 12px; margin-bottom: 28px;
}
.category-tile {
cursor: pointer; background: var(--surface); border: 1.5px solid var(--gray-light); border-radius: var(--radius-md);
padding: 16px 8px; display: flex; flex-direction: column; align-items: center; gap: 8px; transition: all .15s;
box-shadow: var(--shadow-sm);
}
.category-tile:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.category-tile.selected { border-color: var(--orange); background: var(--orange-light); }
.category-tile .cat-icon {
width: 44px; height: 44px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
font-size: 22px; background: var(--gray-light); overflow: hidden;
}
.category-tile .cat-icon img { width: 100%; height: 100%; object-fit: cover; }
.category-tile.selected .cat-icon { background: var(--orange); }
.category-tile span.cat-label { font-size: 12px; font-weight: 600; color: var(--text-strong); text-align: center; }
.category-clear { text-align: center; margin: -14px 0 20px; }
.category-clear a { font-size: 13px; }
/* ── restaurantOrHotel card visual polish (thumbnail-style icon) ── */
.restaurantOrHotel-card { display: flex; gap: 14px; align-items: flex-start; }
.restaurantOrHotel-thumb {
width: 56px; height: 56px; border-radius: var(--radius-sm); background: var(--orange-light); color: var(--orange);
display: flex; align-items: center; justify-content: center; font-size: 26px; flex-shrink: 0;
}
.menu-item-row { align-items: center; }
.menu-item-thumb {
width: 46px; height: 46px; border-radius: var(--radius-sm); background: var(--gray-light);
display: flex; align-items: center; justify-content: center; font-size: 20px; flex-shrink: 0; margin-right: 12px;
overflow: hidden;
}
.menu-item-thumb img { width: 100%; height: 100%; object-fit: cover; }
.menu-item-row-inner { display: flex; align-items: center; flex: 1; min-width: 0; }
.form-success {
background: var(--status-green-bg); color: var(--status-green); border-radius: var(--radius-sm);
padding: 12px 16px; font-size: 14px; margin-bottom: 16px; display: none;
}
/* ── Footer ── */
footer {
background: var(--navy-dark); color: rgba(255,255,255,.6);
padding: 52px 5% 28px;
}
.footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr 1fr; gap: 40px; margin-bottom: 40px; }
.footer-brand p { font-size: 13px; margin-top: 12px; line-height: 1.7; }
.footer-col h4 { color: var(--white); font-size: 14px; font-weight: 700; margin-bottom: 16px; }
.footer-col a { display: block; color: rgba(255,255,255,.55); font-size: 13px; margin-bottom: 8px; text-decoration: none; }
.footer-col a:hover { color: var(--orange); }
.footer-bottom {
border-top: 1px solid rgba(255,255,255,.1); padding-top: 24px;
display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px;
}
.footer-bottom p { font-size: 13px; }
.footer-credit { font-size: 11.5px; color: rgba(255,255,255,.4); margin-top: 4px; }
.footer-social { display: flex; gap: 10px; }
.footer-social a {
width: 34px; height: 34px; background: rgba(255,255,255,.08);
border-radius: 8px; display: flex; align-items: center; justify-content: center;
color: rgba(255,255,255,.6); font-size: 14px; transition: all .2s; text-decoration: none;
}
.footer-social a:hover { background: var(--orange); color: var(--white); }
/* ── Chat widget ── */
#ajab-fab {
position: fixed; bottom: 24px; right: 24px; z-index: 999;
width: 56px; height: 56px; border-radius: 50%; background: var(--navy);
border: none; cursor: pointer; box-shadow: var(--shadow-lg);
display: flex; align-items: center; justify-content: center; transition: transform .2s;
}
#ajab-fab:hover { transform: scale(1.08); }
#ajab-fab svg { width: 24px; height: 24px; }
#ajab-badge {
position: absolute; top: -2px; right: -2px; background: var(--orange);
color: var(--white); font-size: 9px; font-weight: 700;
width: 17px; height: 17px; border-radius: 50%;
display: flex; align-items: center; justify-content: center; border: 2px solid var(--gray-bg);
}
#ajab-panel {
position: fixed; bottom: 92px; right: 24px; z-index: 1000;
width: 340px; height: 520px; background: var(--surface);
border-radius: var(--radius-lg); box-shadow: var(--shadow-lg);
display: none; flex-direction: column; overflow: hidden;
font-family: var(--font);
}
#ajab-panel.open { display: flex; }
/* Utilities */
.text-orange { color: var(--orange); }
.text-center { text-align: center; }
.mt-4 { margin-top: 16px; }
.mt-8 { margin-top: 32px; }
.mb-4 { margin-bottom: 16px; }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.grid-3 { display: grid; grid-template-columns: repeat(3,1fr); gap: 24px; }
.grid-4 { display: grid; grid-template-columns: repeat(4,1fr); gap: 24px; }
/* ── Hero v2 (homepage) ── */
.hero-v2 {
background: linear-gradient(165deg, var(--navy) 0%, var(--navy-dark) 100%);
padding: 100px 5% 0; overflow: hidden; position: relative;
}
.hero-inner {
max-width: 1180px; margin: 0 auto; display: flex; align-items: center;
gap: 60px; flex-wrap: wrap; padding-bottom: 64px;
}
.hero-copy { flex: 1 1 440px; min-width: 0; }
.hero-copy h1 { color: var(--white); margin: 18px 0 22px; max-width: 580px; }
.hero-copy .lede { color: rgba(255,255,255,.66); max-width: 480px; font-size: 17px; margin-bottom: 32px; }
.hero-cta { display: flex; gap: 14px; flex-wrap: wrap; }
.hero-art { flex: 1 1 380px; display: flex; justify-content: center; min-width: 0; }
/* Signature: live tracking card with animated route */
.route-card {
background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.12);
border-radius: var(--radius-lg); padding: 26px; width: 100%; max-width: 440px;
box-sizing: border-box; backdrop-filter: blur(6px);
}
.route-card-head {
display: flex; align-items: center; gap: 8px; font-family: var(--font-mono);
font-size: 11px; letter-spacing: .06em; color: rgba(255,255,255,.6); margin-bottom: 16px;
}
.route-card-head .route-eta { margin-left: auto; color: var(--gold); }
.live-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--success); animation: pulse 1.6s infinite; flex-shrink: 0; }
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: .25; } }
.route-svg { width: 100%; height: auto; display: block; }
/* Hero video card: keeps the video clipped inside the same rounded frame as the old route-card */
.route-card--video { overflow: hidden; padding: 0; max-width: 520px; }
.route-card--video .route-card-head { padding: 16px 20px 0; margin-bottom: 12px; }
.hero-video {
display: block; width: 100% !important; max-width: 100% !important; height: auto !important;
aspect-ratio: 760 / 426; object-fit: cover;
border-radius: 0 0 var(--radius-lg) var(--radius-lg);
}
/* Hero stat strip */
.hero-stats {
display: flex; gap: 28px; flex-wrap: wrap; border-top: 1px solid rgba(255,255,255,.12);
padding: 28px 0; max-width: 1180px; margin: 0 auto;
}
.hero-stats .stat { flex: 1 1 130px; }
.hero-stats .stat b {
display: block; font-family: var(--font-mono); font-size: 22px; font-weight: 500; color: var(--gold);
}
.hero-stats .stat span {
display: block; margin-top: 4px; font-size: 11.5px; color: rgba(255,255,255,.5);
text-transform: uppercase; letter-spacing: .08em;
}
/* Feature rows (replaces emoji card grid) */
.feature-list { display: flex; flex-direction: column; max-width: 880px; margin: 0 auto; }
.feature-item {
display: flex; gap: 24px; align-items: flex-start; padding: 30px 0;
border-top: 1px solid var(--gray-light);
}
.feature-list .feature-item:last-child { border-bottom: 1px solid var(--gray-light); }
.feature-icon {
width: 46px; height: 46px; flex-shrink: 0; border-radius: 12px; background: var(--orange-light);
display: flex; align-items: center; justify-content: center; color: var(--orange);
}
.feature-icon svg { width: 22px; height: 22px; }
.feature-item h3 { margin-bottom: 6px; }
.feature-item p { font-size: 15px; }
/* Transport mode chips */
.mode-strip { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 22px; }
.mode-chip {
display: flex; align-items: center; gap: 8px; padding: 10px 16px;
border: 1px solid var(--gray-light); border-radius: 999px; background: var(--surface);
font-size: 13px; font-weight: 600; color: var(--text-strong);
}
.mode-chip svg { width: 17px; height: 17px; color: var(--orange); flex-shrink: 0; }
/* Info grid (hotels / package) */
.info-grid {
display: grid; grid-template-columns: 1fr 1fr; gap: 1px;
background: var(--gray-light); border: 1px solid var(--gray-light);
border-radius: var(--radius-lg); overflow: hidden;
}
.info-block { background: var(--surface); padding: 36px; }
@media (min-width: 769px) {
.info-grid-3 { grid-template-columns: 1fr 1fr 1fr; }
.info-grid-4 { grid-template-columns: 1fr 1fr 1fr 1fr; }
}
.icon-badge {
width: 46px; height: 46px; border-radius: 12px; background: var(--orange-light);
display: flex; align-items: center; justify-content: center; color: var(--orange); margin-bottom: 18px;
}
.icon-badge svg { width: 22px; height: 22px; }
.info-block h3 { margin-bottom: 8px; }
.info-block p { font-size: 15px; }
/* Payment list */
.payment-list { list-style: none; display: flex; flex-direction: column; }
.payment-list li {
display: flex; align-items: center; gap: 12px; padding: 13px 0;
border-bottom: 1px solid var(--gray-light); font-size: 14.5px; font-weight: 500; color: var(--gray-dark);
}
.payment-list li:last-child { border-bottom: none; }
.payment-list svg { width: 19px; height: 19px; color: var(--orange); flex-shrink: 0; }
/* ══ ORDER JOURNEY — self-advancing, swipeable carousel. One card is
"active" (centered, full size, full opacity) at a time; the rest recede
into the background. It auto-advances on a timer, but a real user swipe
or drag takes priority — interacting pauses autoplay for a few seconds,
then it picks back up from wherever the person left it. ══ */
.order-journey { overflow: hidden; }
.oj-wrap { position: relative; max-width: 1200px; margin: 0 auto; }
.oj-glow {
position: absolute; inset: -40px -10% auto -10%; height: 320px;
background: radial-gradient(60% 100% at 50% 0%, var(--orange-light) 0%, transparent 70%);
pointer-events: none; z-index: 0;
}
[data-theme="dark"] .oj-glow {
background: radial-gradient(60% 100% at 50% 0%, rgba(255,90,43,.14) 0%, transparent 70%);
}
.oj-track {
position: relative; z-index: 1;
display: flex; align-items: stretch; gap: 22px;
overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch;
padding: 40px 0 34px;
scrollbar-width: none;
perspective: 1400px;
}
.oj-track::-webkit-scrollbar { display: none; }
.oj-spacer { flex: 0 0 calc(50% - 165px); scroll-snap-align: none; }
.oj-card {
position: relative; flex: 0 0 330px; scroll-snap-align: center;
text-align: left; padding: 30px 26px 26px; border-radius: var(--radius-lg);
background: var(--surface); border: 1px solid var(--gray-light);
box-shadow: var(--shadow-sm);
opacity: .4; transform: scale(.86) translateZ(0);
filter: saturate(.7);
transform-style: preserve-3d;
transition: opacity .45s ease, transform .45s ease, box-shadow .45s ease, filter .45s ease, border-color .45s ease;
overflow: hidden;
}
.oj-card.is-active {
opacity: 1; transform: scale(1.02) translateZ(0); filter: saturate(1);
box-shadow: 0 32px 60px -24px rgba(11,21,48,.38), 0 12px 26px -8px rgba(255,90,43,.22);
border-color: var(--orange-mid);
}
/* Pointer-tracked tilt lives on its own inner element with a short, snappy
transition — kept separate from the card's own scale/opacity transition
above (which is slower, for the auto-advance swap) so the tilt follows
the cursor immediately instead of easing behind it. JS sets --rx/--ry. */
.oj-tilt {
transform: rotateX(var(--ry, 0deg)) rotateY(var(--rx, 0deg));
transition: transform .12s ease-out;
transform-style: preserve-3d;
will-change: transform;
}
.oj-card-bar {
position: absolute; top: 0; left: 0; right: 0; height: 3px;
background: var(--gray-light); overflow: hidden;
}
.oj-card-bar span { display: block; height: 100%; width: 0%; background: var(--orange); }
@keyframes ojBarFill { from { width: 0%; } to { width: 100%; } }
.oj-num {
display: block; font-family: var(--font-mono); font-size: 12px; letter-spacing: .1em;
color: var(--orange); opacity: .8; margin-bottom: 14px;
}
.oj-illustration {
width: 84px; height: 84px; margin-bottom: 16px;
transform: translateZ(24px);
transition: transform .45s ease;
}
.oj-card.is-active .oj-illustration { animation: ojFloat 3.2s ease-in-out infinite; }
.oj-illustration svg { width: 100%; height: 100%; display: block; overflow: visible; }
@keyframes ojFloat {
0%, 100% { transform: translateZ(24px) translateY(0); }
50% { transform: translateZ(24px) translateY(-6px); }
}
.oj-card b { display: block; font-family: var(--font-display); font-size: 18px; color: var(--text-strong); margin-bottom: 6px; transform: translateZ(12px); }
.oj-card p { font-size: 13.5px; line-height: 1.5; margin: 0; color: var(--gray-text); }
/* Driver's car: the whole car drives forward toward the pickup, then
resets to its starting position for the next pass (near-instant reset
at the end of the cycle, so it reads as continuous driving). */
.oj-car { transform-box: fill-box; transform-origin: 50% 50%; }
.oj-card.is-active .oj-car { animation: ojCarDrive 1.8s cubic-bezier(.45,0,.55,1) infinite; }
@keyframes ojCarDrive {
0% { transform: translate(-7px, 0); }
45% { transform: translate(0, -1.5px); }
88% { transform: translate(7px, 0); }
88.01% { transform: translate(-7px, 0); }
100% { transform: translate(-7px, 0); }
}
/* Driver's car: wheels spin while the card is active. */
.oj-wheel { transform-box: fill-box; transform-origin: 50% 50%; }
.oj-card.is-active .oj-wheel { animation: ojWheelSpin 1s linear infinite; }
@keyframes ojWheelSpin { to { transform: rotate(360deg); } }
/* Driver's car: motion lines streak one after another. */
.oj-card.is-active .oj-motion-line { animation: ojStreak 1s ease-in-out infinite; }
.oj-card.is-active .oj-motion-line:nth-of-type(2) { animation-delay: .15s; }
.oj-card.is-active .oj-motion-line:nth-of-type(3) { animation-delay: .3s; }
@keyframes ojStreak {
0% { opacity: .25; transform: translateX(5px); }
45% { opacity: 1; transform: translateX(-3px); }
100% { opacity: .25; transform: translateX(5px); }
}
/* "Place order" button: gentle pulse to invite a tap. */
.oj-order-btn { transform-box: fill-box; transform-origin: 50% 50%; }
.oj-card.is-active .oj-order-btn { animation: ojBtnPulse 1.6s ease-in-out infinite; }
@keyframes ojBtnPulse {
0%, 100% { transform: scale(1); }
50% { transform: scale(1.05); }
}
/* Delivered badge: checkmark draws itself in once the card is active. */
.oj-check-draw { stroke-dasharray: 1; stroke-dashoffset: 1; }
.oj-card.is-active .oj-check-draw { animation: ojCheckDraw .5s .2s cubic-bezier(.4,0,.2,1) forwards; }
@keyframes ojCheckDraw { to { stroke-dashoffset: 0; } }
.oj-dots { position: relative; z-index: 1; display: flex; justify-content: center; gap: 10px; margin-top: 4px; }
.oj-dot {
width: 9px; height: 9px; border-radius: 999px; border: none; padding: 0;
background: var(--gray-light); cursor: pointer;
transition: width .35s ease, background .35s ease;
}
.oj-dot.is-active { width: 28px; background: var(--orange); }
@media (prefers-reduced-motion: reduce) {
.oj-card, .oj-illustration, .oj-tilt { transition: none; }
.oj-card-bar span, .oj-card.is-active .oj-illustration { animation: none !important; }
.oj-card.is-active .oj-car,
.oj-card.is-active .oj-wheel,
.oj-card.is-active .oj-motion-line,
.oj-card.is-active .oj-order-btn { animation: none !important; }
.oj-check-draw { stroke-dasharray: none; stroke-dashoffset: 0; }
}
@media (max-width: 860px) {
.oj-card { flex-basis: 78vw; padding: 26px 22px 22px; }
.oj-spacer { flex-basis: calc(50% - 39vw); }
}
@media (max-width: 480px) {
.oj-card { flex-basis: 82vw; }
.oj-spacer { flex-basis: calc(50% - 41vw); }
}
@media (max-width: 768px) {
.nav-links { display: none; position: absolute; top: 68px; left: 0; right: 0; background: var(--navy); flex-direction: column; align-items: flex-start; padding: 16px 5%; gap: 4px; }
.nav-links.open { display: flex; }
.hamburger { display: flex; }
.footer-grid { grid-template-columns: 1fr 1fr 1fr; }
.grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
#ajab-panel { width: calc(100vw - 32px); right: 16px; }
/* Anchored to the viewport, not .nav-lang: now that the switcher sits
in the always-visible top bar (next to the bell) rather than inside
the collapsible .nav-links, the same overflow issue described above
for .notif-dropdown applies here too. */
.lang-menu {
position: fixed;
top: 76px;
left: auto;
right: 16px;
width: auto;
min-width: 190px;
max-width: calc(100vw - 32px);
}
/* Anchored to the viewport, not .notif-wrap: .notif-wrap doesn't sit
flush with the screen edge on mobile (the hamburger sits to its right),
so a right:16px offset relative to it pushed this near-full-width
dropdown off the left edge of the screen. */
.notif-dropdown {
position: fixed;
top: 76px;
left: 16px;
right: 16px;
width: auto;
max-width: none;
max-height: calc(100vh - 110px);
}
.hero-v2 { padding-top: 56px; }
.hero-inner { gap: 40px; padding-bottom: 44px; }
.hero-stats { gap: 20px 28px; }
.info-grid { grid-template-columns: 1fr; }
.feature-item { gap: 16px; }
}
/* ── Order page: restaurant/hotel tabs + grid ── */
.order-layout { display: grid; grid-template-columns: 1fr 360px; gap: 32px; align-items: start; max-width: 1180px; margin: 0 auto; }
.restaurantOrHotel-tabs { display: flex; gap: 8px; margin-bottom: 24px; }
.restaurantOrHotel-tab {
padding: 10px 20px; border-radius: 999px; border: 1.5px solid var(--gray-light); background: var(--surface);
font-size: 14px; font-weight: 600; color: var(--gray-text); cursor: pointer; transition: all .2s;
}
.restaurantOrHotel-tab.active { background: var(--navy); color: var(--white); border-color: var(--navy); }
.restaurantOrHotel-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px,1fr)); gap: 16px; }
.restaurantOrHotel-card { cursor: pointer; }
.restaurantOrHotel-card .restaurantOrHotel-kind {
display: inline-block; font-family: var(--font-mono); font-size: 10px; letter-spacing: .08em;
text-transform: uppercase; color: var(--orange); margin-bottom: 8px;
}
.restaurantOrHotel-card h3 { margin-bottom: 4px; }
.restaurantOrHotel-card p { font-size: 13px; }
/* ── Business card (browse grid) — cover photo + overlay badges,
matching the reference app's card layout ── */
.business-card { padding: 0; overflow: hidden; }
.business-cover {
position: relative; width: 100%; aspect-ratio: 16/9; background: var(--orange-light);
color: var(--orange); display: flex; align-items: center; justify-content: center;
}
.business-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.business-cover-icon { font-size: 40px; }
.badge-closed {
position: absolute; top: 10px; left: 10px; background: rgba(220,38,38,.92); color: var(--white);
font-size: 11.5px; font-weight: 700; padding: 5px 10px; border-radius: 999px; letter-spacing: .01em;
}
.badge-distance {
position: absolute; bottom: 10px; right: 10px; background: rgba(11,21,48,.75); color: var(--white);
font-size: 11.5px; font-weight: 700; padding: 5px 10px; border-radius: 999px; font-family: var(--font-mono);
}
.fav-heart {
position: absolute; top: 8px; right: 8px; width: 32px; height: 32px; border-radius: 50%; border: none;
background: rgba(11,21,48,.55); color: var(--white); font-size: 17px; cursor: pointer;
display: flex; align-items: center; justify-content: center; transition: transform .15s, background .15s;
}
.fav-heart:hover { transform: scale(1.1); }
.fav-heart.active { color: #FF5A6E; background: rgba(255,255,255,.9); }
.business-card-body { padding: 16px; }
.business-card-body h3 { margin-bottom: 4px; }
.business-card-body p { font-size: 13px; }
.business-view-toggle { display: flex; gap: 10px; margin-bottom: 20px; }
/* ── Home page: horizontal-scroll business rows (Recently Viewed /
Explore Businesses) — reuses .business-card but sized for a scroll
strip instead of the order page's grid. ── */
.hrow-head { display: flex; align-items: baseline; justify-content: space-between; max-width: 1180px; margin: 0 auto 18px; padding: 0 5%; }
.hrow-head h2 { margin: 0; }
.hrow-head a { font-size: 13.5px; font-weight: 700; color: var(--orange); white-space: nowrap; }
.hrow-head a:hover { text-decoration: underline; }
.hrow {
display: flex; gap: 16px; overflow-x: auto; padding: 4px 5% 14px; scroll-snap-type: x proximity;
-webkit-overflow-scrolling: touch;
}
.hrow::-webkit-scrollbar { height: 6px; }
.hrow::-webkit-scrollbar-thumb { background: var(--gray-light); border-radius: 999px; }
.hrow .business-card { flex: 0 0 240px; scroll-snap-align: start; }
.hrow-empty { padding: 0 5%; color: var(--gray-text); font-size: 14px; }
/* ── Categories page: bigger tiles than the inline order-page grid ── */
.category-grid-lg { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px,1fr)); gap: 16px; }
.category-grid-lg .category-tile { padding: 22px 10px; }
.category-grid-lg .cat-icon { width: 64px; height: 64px; font-size: 30px; }
.category-grid-lg .cat-label { font-size: 13.5px; }
.category-tile .cat-count { font-size: 11px; color: var(--gray-text); font-weight: 500; }
.back-link { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; color: var(--text-strong); cursor: pointer; margin-bottom: 18px; }
.back-link:hover { text-decoration: underline; }
.menu-category { font-family: var(--font-mono); font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--gray-text); margin: 26px 0 10px; }
.menu-category:first-child { margin-top: 0; }
.menu-item-row {
display: flex; align-items: center; justify-content: space-between; gap: 16px;
padding: 16px 0; border-bottom: 1px solid var(--gray-light);
}
.menu-item-info h4 { font-family: var(--font); font-size: 15px; font-weight: 600; color: var(--text-strong); margin-bottom: 3px; }
.menu-item-info p { font-size: 13px; margin: 0; }
.menu-item-price { font-family: var(--font-mono); font-size: 13.5px; color: var(--text-strong); font-weight: 500; margin-top: 4px; }
.menu-item-actions { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.qty-stepper { display: flex; align-items: center; gap: 0; border: 1.5px solid var(--gray-light); border-radius: var(--radius-sm); overflow: hidden; }
.qty-stepper button {
width: 30px; height: 30px; border: none; background: var(--orange-light); color: var(--orange);
font-size: 16px; font-weight: 700; cursor: pointer; line-height: 1;
}
.qty-stepper button:hover { background: var(--orange-mid); }
.qty-stepper span { min-width: 26px; text-align: center; font-size: 14px; font-weight: 600; color: var(--text-strong); }
.add-btn {
padding: 8px 16px; border-radius: var(--radius-sm); background: var(--orange); color: var(--white);
border: none; font-size: 13px; font-weight: 600; cursor: pointer;
}
.add-btn:hover { background: #E04A1E; }
/* ── Cart panel ── */
.cart-panel { position: sticky; top: 88px; }
.cart-empty { font-size: 14px; color: var(--gray-text); text-align: center; padding: 20px 0; }
.cart-line { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--gray-light); font-size: 13.5px; }
.cart-line .cart-line-name { color: var(--text-strong); font-weight: 500; }
.cart-line .cart-line-remove { color: var(--status-red); cursor: pointer; font-size: 12px; margin-left: 8px; }
.cart-totals { margin-top: 14px; padding-top: 14px; border-top: 1.5px dashed var(--gray-light); font-size: 13.5px; }
.cart-totals .row { display: flex; justify-content: space-between; padding: 4px 0; color: var(--gray-text); }
.cart-totals .row.total { color: var(--text-strong); font-weight: 700; font-size: 16px; padding-top: 8px; }
/* Cart: delivery-instruction quick-pick chips (order.html) */
.chip-row { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; }
.chip {
padding: 6px 12px; border-radius: 999px; border: 1.5px solid var(--gray-light); background: var(--surface);
font-size: 12.5px; font-weight: 600; color: var(--gray-text); cursor: pointer; transition: all .15s;
}
.chip:hover { border-color: var(--gold); color: var(--text-strong); }
.chip.chip-active { background: var(--gold); border-color: var(--gold); color: var(--navy); }
/* Account page: settings menu (account.html) */
.account-menu-groups { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; max-width: 900px; margin: 0 auto; }
.account-menu-group h4 { font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--orange); margin-bottom: 10px; }
.account-menu-list { padding: 6px 0; }
.account-menu-item {
display: flex; align-items: center; justify-content: space-between; width: 100%;
padding: 14px 18px; border: none; background: none; border-bottom: 1px solid var(--gray-light);
font-size: 14.5px; font-weight: 600; color: var(--text-strong); text-align: left; cursor: pointer;
text-decoration: none; font-family: var(--font);
}
.account-menu-item:last-child { border-bottom: none; }
.account-menu-item:hover:not(.account-menu-disabled) { background: var(--gray-bg); }
.account-menu-arrow { color: var(--gray-text); font-size: 18px; }
.account-menu-disabled { color: var(--gray-text); cursor: default; }
.account-menu-badge {
font-size: 11px; font-weight: 700; color: var(--gray-text); background: var(--gray-light);
padding: 3px 9px; border-radius: 999px;
}
.account-menu-badge-active {
color: var(--orange); background: color-mix(in srgb, var(--orange) 14%, transparent);
}
.switch { position: relative; display: inline-block; width: 42px; height: 24px; }
.switch input { opacity: 0; width: 0; height: 0; }
.switch-track {
position: absolute; cursor: pointer; inset: 0; background: var(--gray-light); border-radius: 999px; transition: .2s;
}
.switch-track::before {
content: ""; position: absolute; height: 18px; width: 18px; left: 3px; top: 3px; background: var(--white);
border-radius: 50%; transition: .2s; box-shadow: var(--shadow-sm);
}
.switch input:checked + .switch-track { background: var(--gold); }
.switch input:checked + .switch-track::before { transform: translateX(18px); }
@media (max-width: 720px) {
.account-menu-groups { grid-template-columns: 1fr; }
}
/* Contact page: Call us / Mail us / Find us cards (contact.html) */
.contact-info-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-bottom: 28px; }
.contact-info-card { text-align: center; }
.contact-info-card .icon-badge { margin: 0 auto 12px; }
.contact-info-card h3 { font-size: 14px; margin-bottom: 6px; }
.contact-info-card a, .contact-info-card span { font-size: 13.5px; color: var(--gray-text); word-break: break-word; }
.contact-info-card a:hover { color: var(--orange); }
@media (max-width: 640px) {
.contact-info-grid { grid-template-columns: 1fr; }
}
.mode-select-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 18px; }
.mode-option {
border: 1.5px solid var(--gray-light); border-radius: var(--radius-sm); padding: 10px; cursor: pointer;
font-size: 12.5px; text-align: center; transition: all .15s;
}
.mode-option.selected { border-color: var(--orange); background: var(--orange-light); }
.mode-option b { display: block; font-size: 12.5px; color: var(--text-strong); margin-bottom: 2px; }
.mode-option span { display: block; color: var(--gray-text); font-family: var(--font-mono); font-size: 11px; }
.mode-option.disabled { cursor: not-allowed; opacity: .5; background: var(--gray-light); }
.mode-option.disabled b { color: var(--gray-text); }
.mode-option.disabled span { color: var(--status-red); }
/* Payment method grid — cards with a logo (or fallback initials badge),
grouped under "Mobile Money" / "Bank Transfer" labels. Logo assets are
normalized to a common canvas at build time, but we still pin the
rendered box here so the grid stays even even if a raw/odd-sized
image ever slips in. */
.payment-method-grid { margin-bottom: 18px; }
.payment-category-label {
font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
color: var(--gray-text); margin: 14px 0 6px;
}
.payment-category-label:first-child { margin-top: 0; }
.payment-method-row { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 8px; }
.payment-method-card {
position: relative; border: 1.5px solid var(--gray-light); border-radius: var(--radius-sm);
cursor: pointer; transition: all .15s ease; overflow: hidden;
display: flex; flex-direction: column; background: var(--surface); box-shadow: var(--shadow-sm);
}
.payment-method-card:hover { border-color: var(--orange-mid); box-shadow: var(--shadow-md); transform: translateY(-1px); }
.payment-method-card .logo-box {
width: 100%; height: 40px; display: flex; align-items: center; justify-content: center;
/* Deliberately always white, not var(--surface) — most payment-provider
logo assets (Telebirr, CBE Birr, etc.) are PNGs designed for a light
background and would lose contrast/look wrong composited on the dark
surface color. The outer .payment-method-card now themes correctly;
only this inner logo canvas stays fixed white, same reasoning as the
Google sign-in button below. */
background: var(--white); padding: 6px 8px;
}
.payment-method-card img {
max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; display: block;
}
.payment-method-card .payment-name-bar {
background: var(--pm-color, var(--navy)); padding: 5px 4px; text-align: center;
}
.payment-method-card b { font-size: 9.5px; color: var(--white); font-weight: 600; line-height: 1.2; display: block; text-shadow: 0 1px 1px rgba(0,0,0,.25); }
.payment-method-card.selected { border-color: var(--orange); box-shadow: var(--shadow-md); }
.payment-method-card.selected::after {
content: ""; position: absolute; inset: 0; border-radius: var(--radius-sm);
box-shadow: inset 0 0 0 2px var(--orange); pointer-events: none;
}
.payment-method-card.unavailable { opacity: .5; cursor: not-allowed; filter: grayscale(.6); }
.payment-method-card.unavailable:hover { transform: none; box-shadow: var(--shadow-sm); border-color: var(--gray-light); }
.payment-tag {
position: absolute; top: 4px; right: 4px; z-index: 1; background: var(--orange); color: var(--white);
font-size: 8.5px; font-weight: 700; padding: 1.5px 6px; border-radius: 4px; letter-spacing: .02em;
}
.payment-unavailable-note { font-size: 8.5px; color: var(--status-red); display: block; margin-top: 1px; }
.payment-badge {
display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 24px;
border-radius: 5px; background: var(--gray-light); color: var(--text-strong);
font-size: 9.5px; font-weight: 700; letter-spacing: .02em;
}
/* Manual "transfer then confirm" panel, styled after the MelBet-style
deposit screens: account details up top, then reference + upload. */
.manual-payment-panel {
border: 1.5px solid var(--gray-light); border-radius: var(--radius-sm); padding: 14px; margin-bottom: 18px; background: var(--panel-alt);
}
.manual-payment-instructions { font-size: 12.5px; color: var(--text-strong); margin-bottom: 10px; }
.manual-payment-row {
display: flex; align-items: center; gap: 8px; padding: 6px 0; border-bottom: 1px dashed var(--gray-light);
font-size: 13px;
}
.manual-payment-row:last-of-type { border-bottom: none; margin-bottom: 10px; }
.manual-payment-label { color: var(--gray-text); min-width: 110px; }
.manual-payment-value { flex: 1; font-family: var(--font-mono); font-weight: 700; color: var(--text-strong); }
.copy-btn {
background: none; border: 1px solid var(--gray-light); border-radius: 4px; cursor: pointer;
font-size: 13px; padding: 2px 8px; color: var(--gray-text);
}
.copy-btn:hover { border-color: var(--orange); color: var(--orange); }
/* Top-right "X" close button on modal dialogs — lets people dismiss a
form without needing to scroll down to the Cancel button, and gives
the header a clear affordance that the dialog can be closed. Not
added to modals that are intentionally non-dismissible (e.g. a forced
password change) — those simply omit .modal-close from their markup. */
.modal-overlay .card { position: relative; }
.modal-close {
position: absolute; top: 14px; right: 14px; width: 30px; height: 30px; z-index: 1;
border-radius: 50%; border: none; background: var(--gray-light); color: var(--gray-text);
font-size: 18px; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center;
transition: background .2s, color .2s;
}
.modal-close:hover { background: var(--orange-light); color: var(--orange); }
.cart-floating-total {
display: none; position: fixed; bottom: 0; left: 0; right: 0; background: var(--navy); color: var(--white);
padding: 14px 5%; align-items: center; justify-content: space-between; z-index: 90; box-shadow: 0 -6px 20px rgba(0,0,0,.18);
}
.cart-floating-total .btn { padding: 10px 22px; }
.cart-floating-total-info { display: flex; flex-direction: column; line-height: 1.3; }
.cart-floating-total-count { font-size: 12px; color: rgba(255,255,255,.7); }
.cart-floating-total-amount { font-size: 16px; font-weight: 700; font-family: var(--font-mono); }
@media (max-width: 900px) {
.order-layout { grid-template-columns: 1fr; }
.cart-panel { position: static; }
.cart-floating-total.show { display: flex; }
body.has-floating-cart { padding-bottom: 72px; }
/* The floating cart bar spans the full width at bottom:0, so the
theme toggle (normally bottom:24px/left:24px) would otherwise sit
directly on top of the price text on its left side — see
.cart-floating-total above. Lift it above the bar instead. */
body.has-floating-cart .theme-fab { bottom: 92px; }
}
/* ── Driver login (OTP) ── */
.otp-input {
width: 100%; text-align: center; font-family: var(--font-mono);
font-size: 26px; letter-spacing: 10px; padding: 13px 14px 13px 24px;
}
.otp-meta { display: flex; justify-content: space-between; align-items: center; font-size: 12.5px; margin-top: 10px; }
.otp-meta a { font-weight: 600; cursor: pointer; }
.otp-meta a.disabled { color: var(--gray-text); pointer-events: none; text-decoration: none; }
.step-phone { font-family: var(--font-mono); color: var(--text-strong); font-weight: 600; }
/* ── Driver dashboard ── */
.driver-header {
display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap;
max-width: 900px; margin: 0 auto 28px;
}
.driver-id { display: flex; align-items: center; gap: 14px; }
.driver-avatar {
width: 50px; height: 50px; border-radius: 50%; background: var(--navy); color: var(--white);
display: flex; align-items: center; justify-content: center; font-family: var(--font-display);
font-weight: 700; font-size: 18px; flex-shrink: 0;
}
.driver-id h2 { font-size: 19px; margin-bottom: 2px; }
.driver-meta { font-size: 12.5px; color: var(--gray-text); display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.driver-meta .mode-chip { padding: 4px 11px; font-size: 11.5px; }
.driver-tabs { display: flex; flex-wrap: wrap; gap: 8px; max-width: 900px; margin: 0 auto 20px; }
.driver-tab {
padding: 9px 20px; border-radius: 999px; border: 1.5px solid var(--gray-light); background: var(--surface);
font-size: 13.5px; font-weight: 600; color: var(--gray-text); cursor: pointer; transition: all .2s;
}
.driver-tab.active { background: var(--navy); color: var(--white); border-color: var(--navy); }
/* Restaurant dashboard: tabs clustered into labeled, collapsible groups
(Orders / Business / Account) instead of one flat row — collapsed by
default, tap the header to expand. The group label (and its chevron)
lights up in the accent color whenever the active tab belongs to it,
so it's clear both which cluster and which specific tab you're on. */
.biz-tab-groups { display: flex; flex-wrap: wrap; gap: 22px; max-width: 900px; margin: 0 auto 20px; }
.biz-tab-group-header { display: flex; align-items: center; gap: 6px; background: none; border: none; padding: 0 0 6px; cursor: pointer; }
.biz-tab-group-label { font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--gray-text); opacity: .75; }
.biz-tab-group-chevron { font-size: 9px; color: var(--gray-text); opacity: .75; transition: transform .15s ease; }
.biz-tab-group.open .biz-tab-group-chevron { transform: rotate(180deg); }
.biz-tab-group.has-active .biz-tab-group-label, .biz-tab-group.has-active .biz-tab-group-chevron { color: var(--orange); opacity: 1; }
.biz-tab-group-buttons { display: flex; flex-wrap: wrap; gap: 8px; max-height: 0; overflow: hidden; transition: max-height .18s ease; }
.biz-tab-group.open .biz-tab-group-buttons { max-height: 200px; }
.driver-orders { max-width: 900px; margin: 0 auto; display: flex; flex-direction: column; gap: 16px; }
.driver-order-card { padding: 22px; }
.driver-order-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; margin-bottom: 14px; flex-wrap: wrap; }
.driver-order-id { font-family: var(--font-mono); font-weight: 700; color: var(--text-strong); font-size: 15px; }
.driver-order-type { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--gray-text); margin-top: 2px; }
.driver-order-top > div:first-child { min-width: 0; }
.driver-order-top .status-badge { flex-shrink: 0; max-width: 100%; }
.driver-order-row { display: flex; gap: 10px; font-size: 13.5px; color: var(--gray-dark); padding: 6px 0; border-bottom: 1px solid var(--gray-light); }
.driver-order-row:last-of-type { border-bottom: none; }
.driver-order-row .label { flex-shrink: 0; width: 92px; color: var(--gray-text); font-weight: 600; font-size: 12px; text-transform: uppercase; letter-spacing: .04em; padding-top: 1px; }
.driver-order-actions { display: flex; gap: 10px; margin-top: 16px; }
.driver-order-waiting { font-size: 13.5px; color: var(--gray-text); font-style: italic; padding: 8px 0; }
.driver-empty { text-align: center; padding: 60px 20px; color: var(--gray-text); font-size: 14.5px; }
.status-badge {
display: inline-flex; align-items: center; padding: 4px 12px; border-radius: 999px;
font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em;
white-space: normal; text-align: center; line-height: 1.4; max-width: 100%;
}
.status-badge.placed, .status-badge.preparing { background: var(--orange-light); color: var(--orange); }
.status-badge.out_for_delivery, .status-badge.picked_up { background: var(--status-blue-bg); color: var(--status-blue); }
.status-badge.pickup_requested, .status-badge.delivery_requested { background: var(--status-amber-bg); color: var(--status-amber); }
.status-badge.delivered { background: var(--status-green-bg); color: var(--status-green); }
.status-badge.cancelled { background: var(--status-red-bg); color: var(--status-red); }
/* ══ ORDER FILTER BAR (orders.html) ══════════════════════════════
Mirrors the "Manage Orders" pattern from marketplace apps: All /
Unpaid as always-visible tabs, plus a "More ▾" tab that reveals a
dropdown list of the remaining statuses, each rendered as a row with
a label on the left and a selectable circle on the right. Picking a
"More" row fills its circle, closes the dropdown, and the More tab
itself becomes active and relabels to whatever was picked. */
.order-filterbar { max-width: 900px; margin: 0 auto 4px; position: relative; }
.order-filter-tabs { display: flex; gap: 8px; border-bottom: 1.5px solid var(--gray-light); }
.order-filter-tab {
appearance: none; background: none; border: none; cursor: pointer;
padding: 12px 6px 14px; font-size: 14.5px; font-weight: 600; color: var(--gray-text);
position: relative; display: flex; align-items: center; gap: 4px; font-family: var(--font);
}
.order-filter-tab + .order-filter-tab { margin-left: 10px; }
.order-filter-tab.active { color: var(--text-strong); }
.order-filter-tab.active::after {
content: ""; position: absolute; left: 0; right: 0; bottom: -1.5px; height: 2.5px;
background: var(--orange); border-radius: 2px;
}
.order-filter-caret { font-size: 10px; transition: transform .2s; }
.order-filter-more.open .order-filter-caret { transform: rotate(180deg); }
.order-filter-dropdown {
display: none; position: absolute; right: 0; top: calc(100% + 6px); z-index: 20;
background: var(--surface); border: 1px solid var(--gray-light); border-radius: var(--radius-md);
box-shadow: var(--shadow-lg); min-width: 260px; overflow: hidden;
}
.order-filter-dropdown.open { display: block; }
.order-filter-option {
appearance: none; background: none; border: none; width: 100%; cursor: pointer;
display: flex; align-items: center; justify-content: space-between; gap: 12px;
padding: 14px 18px; font-size: 14px; font-weight: 500; color: var(--gray-dark);
border-bottom: 1px solid var(--gray-light); font-family: var(--font); text-align: left;
}
.order-filter-option:last-child { border-bottom: none; }
.order-filter-option:hover { background: var(--gray-bg); }
.order-filter-radio {
width: 19px; height: 19px; border-radius: 50%; border: 1.5px solid var(--gray-light);
flex-shrink: 0; position: relative;
}
.order-filter-option.selected .order-filter-radio { border-color: var(--orange); }
.order-filter-option.selected .order-filter-radio::after {
content: ""; position: absolute; inset: 3px; border-radius: 50%; background: var(--orange);
}
@media (max-width: 640px) {
.order-filter-dropdown { left: 0; right: 0; min-width: 0; }
}
/* Payment countdown pill — dark rounded badge with a bold mono time and a
lighter "Time left" caption (see formatPaymentCountdown / the pill
markup in account.html, track.html and confirm-payment.html). Used
wherever we show time remaining before an unpaid order auto-cancels.
.on-dark is for placing it on an already-dark surface (the account
page's live-order card) where the default navy pill would disappear;
.urgent always wins and flags the final 2 minutes in red regardless
of surface. */
.payment-timer-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.payment-timer-msg { font-size: 13px; color: var(--gray-text); }
.payment-timer-pill {
display: inline-flex; align-items: baseline; gap: 6px; flex-shrink: 0;
background: var(--navy-dark); color: var(--white); border-radius: 999px;
padding: 7px 14px; white-space: nowrap; line-height: 1;
}
.payment-timer-pill .ptp-time { font-family: var(--font-mono); font-weight: 700; font-size: 14.5px; }
.payment-timer-pill .ptp-label { font-size: 11px; color: rgba(255,255,255,.6); }
.payment-timer-pill.on-dark { background: rgba(255,255,255,.16); }
.payment-timer-pill.urgent { background: var(--status-red); }
.payment-timer-pill.urgent .ptp-label { color: rgba(255,255,255,.85); }
.payment-timer-expired { font-size: 13px; font-weight: 600; color: var(--status-red); }
/* confirm-payment.html: the prominent "Payment of X ETB" + pill card at
the top of the transfer form, styled after the reference payment page. */
.payment-amount-card {
display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
background: var(--panel-alt); border: 1px solid var(--gray-light); border-radius: var(--radius-md);
padding: 16px 18px; margin-bottom: 18px;
}
.payment-amount-card .payment-amount-label { font-size: 13.5px; color: var(--gray-text); }
.payment-amount-card .payment-amount-value { font-size: 19px; font-weight: 700; color: var(--text-strong); margin-left: 6px; }
@media (max-width: 640px) {
.driver-header { flex-direction: column; align-items: flex-start; }
.driver-order-row { flex-direction: column; gap: 2px; }
.driver-order-row .label { width: auto; }
}
/* ── Restaurant/hotel dashboard — reuses driver-* layout, adds
a compact menu-item list ── */
.restaurantOrHotel-menu-form { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 12px; margin-bottom: 22px; }
.restaurantOrHotel-menu-form .form-group { margin-bottom: 0; }
.restaurantOrHotel-menu-list { max-width: 900px; margin: 0 auto; display: flex; flex-direction: column; gap: 12px; }
.restaurantOrHotel-menu-item {
display: flex; align-items: center; justify-content: space-between; gap: 14px;
padding: 16px 20px; flex-wrap: wrap;
}
.restaurantOrHotel-menu-item-info { min-width: 0 }
.restaurantOrHotel-menu-item-name { font-weight: 700; color: var(--text-strong); font-size: 14.5px; }
.restaurantOrHotel-menu-item-meta { font-size: 12.5px; color: var(--gray-text); margin-top: 2px; }
.restaurantOrHotel-menu-item-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
@media (max-width: 640px) {
.restaurantOrHotel-menu-item-actions { width: 100%; }
}
/* ── Location picker (public/location-picker.js) — used wherever a real
GPS pin is needed: package pickup/drop-off, order delivery address,
and a restaurant/hotel's own location, on both the customer site and dashboards ── */
.ajab-loc-picker { margin-top: 8px; border: 1px solid var(--gray-light); border-radius: var(--radius-md); overflow: hidden; background: var(--surface); }
.ajab-loc-row { display: flex; gap: 8px; padding: 10px; border-bottom: 1px solid var(--gray-light); }
.ajab-loc-search { flex: 1; min-width: 0; padding: 8px 10px; border: 1px solid var(--gray-light); border-radius: var(--radius-sm); font-size: 13px; font-family: var(--font); background: var(--surface); color: var(--gray-dark); }
.ajab-loc-current { flex-shrink: 0; font-size: 12.5px; white-space: nowrap; background: var(--orange-light); color: var(--orange); border: none; border-radius: var(--radius-sm); padding: 8px 12px; cursor: pointer; font-weight: 600; }
.ajab-loc-current:hover { background: var(--orange-mid); }
.ajab-loc-results { position: relative; z-index: 500; max-height: 160px; overflow-y: auto; border-bottom: 1px solid var(--gray-light); background: var(--surface); }
.ajab-loc-result { padding: 8px 12px; font-size: 12.5px; color: var(--gray-dark); cursor: pointer; border-bottom: 1px solid var(--gray-bg); }
.ajab-loc-result:hover { background: var(--orange-light); }
.ajab-loc-result-empty { padding: 8px 12px; font-size: 12.5px; color: var(--gray-text); }
.ajab-loc-map { width: 100%; height: 220px; }
.ajab-loc-status { padding: 6px 10px; font-size: 12px; color: var(--gray-text); min-height: 18px; }
/* ── Location gate — full-page blocker shown until the driver grants
(and keeps granting) live location access; see driver-dashboard.html ── */
.location-gate { position: fixed; inset: 0; z-index: 2000; display: flex; align-items: center; justify-content: center; background: var(--gray-bg); padding: 24px; }
.location-gate-card { max-width: 380px; text-align: center; background: var(--surface); border: 1px solid var(--gray-light); border-radius: var(--radius-md); padding: 32px 24px; box-shadow: 0 6px 24px rgba(0,0,0,.08); }
.location-gate-icon { font-size: 40px; margin-bottom: 8px; }
.location-gate-card h2 { font-size: 18px; margin: 0 0 8px; color: var(--text-strong); }
.location-gate-card p { font-size: 13.5px; color: var(--gray-text); margin: 0 0 12px; line-height: 1.5; }
.location-gate-detail { color: var(--orange); font-weight: 600; }