/* ==========================================================================
   Oraiyan Groups — Customer App
   Combined stylesheet — merged from:
     - dashboard.blade.php
     - partials/nav.blade.php (sidebar + topbar)
     - notifications.blade.php
     - profile.blade.php
     - trip.blade.php
     - login.blade.php

   NOTE ON SCOPING
   ----------------
   A few class names (.page-scroll, .section-title, .section-title-row,
   .page-title, .back-link, .notif-empty, .modal-card, .topbar, .page)
   were defined more than once across the original files with DIFFERENT
   values, because each file's <style> block only ever applied to its own
   page. Now that everything lives in one global stylesheet, those rules
   are scoped under a page wrapper class so pages keep their original,
   distinct look:

     .page-dashboard      -> wraps dashboard.blade.php content
     .page-notifications  -> wraps notifications.blade.php content
     .page-profile        -> wraps profile.blade.php content
     .page-trips          -> wraps trip.blade.php content
     .page-login           -> added to <body> in login.blade.php

   Everything else (component-specific class names that only ever
   appeared in one file) is left unscoped, exactly as it was.
   ========================================================================== */


/* ── 1. Design tokens (union of nav.blade.php + login.blade.php :root) ── */
:root {
    /* app-shell palette (nav / topbar / sidebar) */
    --o-orange:       #F97316;
    --o-orange-light: #FFF3E8;
    --o-gray-50:      #F7F8FA;
    --o-gray-100:     #F3F4F6;
    --o-gray-500:     #6B7280;
    --o-gray-900:     #111827;
    --o-red:          #DC2626;

    /* login palette */
    --orange:       #F97316;
    --orange-dark:  #EA580C;
    --orange-light: #FFF3E8;
    --orange-mid:   #FDBA74;
    --white:        #FFFFFF;
    --gray-50:      #F7F8FA;
    --gray-100:     #F3F4F6;
    --gray-200:     #E5E7EB;
    --gray-400:     #9CA3AF;
    --gray-500:     #6B7280;
    --gray-700:     #374151;
    --gray-900:     #111827;
    --red:          #DC2626;
    --green:        #16A34A;
    --radius-sm:    10px;
    --radius-md:    16px;
    --radius-lg:    22px;
    --shadow:       0 10px 30px rgba(249,115,22,0.12);
}

/* ── 2. Global reset (from login.blade.php; safe to apply everywhere) ── */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    -webkit-tap-highlight-color: transparent;
}

/* ── 3. Cross-page helpers ── */
.hidden { display: none !important; }

/* Shared modal shell (notifications / profile / trips all use this) */
.modal-overlay {
    position: fixed; inset: 0;
    background: rgba(17,24,39,0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    z-index: 120;
}
.modal-card {
    width: 100%;
    background: #fff;
    border-radius: 20px;
    padding: 22px;
    animation: modal-pop .18s ease;
}
@keyframes modal-pop { from { transform: scale(0.95); opacity: 0; } to { transform: scale(1); opacity: 1; } }

/* per-page sizing differences for the shared modal card */
.page-notifications .modal-card { max-width: 400px; max-height: 85vh; overflow-y: auto; }
.page-profile .modal-card       { max-width: 400px; max-height: 85vh; display: flex; flex-direction: column; }
.page-trips .modal-card         { max-width: 380px; max-height: 90vh; overflow-y: auto; }

/* Shared solid/outline action buttons (notifications / profile / trips) */
.btn-solid-orange {
    padding: 15px;
    border-radius: 14px;
    font-size: 14.5px;
    font-weight: 800;
    text-align: center;
    cursor: pointer;
    border: none;
    text-decoration: none;
    background: linear-gradient(135deg,#F97316,#EA580C);
    color: #fff;
    box-shadow: 0 6px 16px rgba(249,115,22,0.28);
}
.btn-solid-orange.full-width { width: 100%; }
.btn-solid-orange:active { opacity: 0.9; transform: scale(0.99); }

.btn-outline-orange {
    padding: 15px;
    border-radius: 14px;
    font-size: 14.5px;
    font-weight: 800;
    text-align: center;
    cursor: pointer;
    border: 1.5px solid #F97316;
    background: #fff;
    color: #F97316;
    text-decoration: none;
}
.btn-outline-orange:active { opacity: 0.9; transform: scale(0.99); }

/* trip.blade.php lays its two action buttons out side-by-side and adds
   extra top spacing to the full-width button — kept scoped so it doesn't
   affect the standalone buttons on notifications/profile. */
.page-trips .detail-actions { display: flex; gap: 10px; margin-top: 18px; }
.page-trips .btn-outline-orange,
.page-trips .btn-solid-orange { flex: 1; }
.page-trips .btn-solid-orange.full-width { margin-top: 20px; }

/* Shared "page head with back button + title" pattern
   (notifications.blade.php and profile.blade.php use the identical
   icon-button + title layout; trip.blade.php uses a different,
   text-style back link, so it's overridden below under .page-trips) */
.page-head { display: flex; align-items: center; gap: 12px; margin: 25px 0 18px; }
.back-link {
    width: 34px; height: 34px;
    border-radius: 10px;
    border: none;
    background: #F3F4F6;
    color: #374151;
    display: inline-flex; align-items: center; justify-content: center;
    cursor: pointer;
    font-size: 14px;
    flex-shrink: 0;
}
.page-title { font-size: 19px; font-weight: 800; color: #111827; }

.page-trips .back-link {
    width: auto; height: auto;
    background: none;
    border-radius: 0;
    display: inline-flex; align-items: center; gap: 8px;
    font-size: 15px; font-weight: 800; color: #111827;
    padding: 6px 4px;
    margin: 25px 0 14px;
}
.page-trips .back-link i { font-size: 13px; color: #6B7280; }
.page-trips .page-title { font-size: 20px; margin: 34px 4px 16px; }

/* .page-scroll wrapper — same on notifications/profile/trips, dashboard
   uses a slightly smaller bottom padding since it has no bottom nav
   bar height baked in the same way. */
.page-scroll { max-width: 640px; margin: 0 auto; padding: 0 16px 110px; }
.page-dashboard.page-scroll { padding-bottom: 100px; }

/* .section-title / .section-title-row differ per page (font-size,
   margin) so each page gets its own scoped rule. */
.page-dashboard .section-title { font-size: 16px; font-weight: 800; color: #111827; margin: 24px 4px 12px; }
.page-profile .section-title   { font-size: 15px; font-weight: 800; color: #111827; margin: 22px 4px 10px; }
.page-trips .section-title     { font-size: 16px; font-weight: 800; color: #111827; margin: 0; }

.page-dashboard .section-title-row {
    display: flex; align-items: center; justify-content: space-between;
    margin: 24px 4px 12px; flex-wrap: wrap; gap: 8px;
}
.page-dashboard .section-title-row .section-title { margin: 0; }
.page-trips .section-title-row {
    display: flex; align-items: center; justify-content: space-between;
    margin: 18px 4px 12px;
}
.page-trips .sort-label { font-size: 12.5px; color: #9CA3AF; }

/* .notif-empty appears on both the dashboard preview list and the full
   notifications page with different padding. */
.notif-empty { text-align: center; padding: 30px; color: #9CA3AF; font-size: 13.5px; }
.page-dashboard .notif-empty { padding: 20px; }


/* ==========================================================================
   4. DASHBOARD (dashboard.blade.php)
   ========================================================================== */
.page-dashboard .view-all-link { font-size: 13.5px; font-weight: 700; color: #F97316; text-decoration: none; display: inline-flex; align-items: center; gap: 4px; }
.page-dashboard .view-all-link i { font-size: 11px; }

.page-dashboard .date-filter { display: flex; align-items: center; gap: 6px; }
.page-dashboard .period-date-input { font-size: 12px; padding: 6px 8px; border: 1px solid #e0e0e0; border-radius: 8px; min-width: 0; }
.page-dashboard .period-range-sep { font-size: 12px; color: #999; }
.page-dashboard .period-apply-btn { background: #ff5722; color: #fff; border: none; border-radius: 8px; padding: 7px 14px; font-size: 12.5px; font-weight: 600; cursor: pointer; }
.page-dashboard .kpi-card.loading .kpi-value { opacity: 0.4; }

/* Hero carousel */
.hero-carousel {
    position: relative;
    margin-top: 18px;
    border-radius: 20px;
    overflow: hidden;
    background: linear-gradient(135deg,#FDBA74,#F97316);
}
.hero-track { display: flex; }
.hero-slide {
    min-width: 100%;
    aspect-ratio: 16/9;
    background-size: cover;
    background-position: center;
    display: flex;
    align-items: flex-start;
    padding: 20px;
}
.hero-heading { font-size: 20px; font-weight: 800; color: #111827; line-height: 1.3; max-width: 70%; }
.hero-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 32px; height: 32px;
    border-radius: 50%;
    background: rgba(255,255,255,0.85);
    border: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #374151;
    cursor: pointer;
}
.hero-arrow-prev { left: 10px; }
.hero-arrow-next { right: 10px; }
.hero-caption-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 16px 16px;
    background: rgba(255,255,255,0.6);
}
.hero-caption-title { font-size: 15px; font-weight: 800; color: #111827; }
.hero-dots { display: flex; gap: 5px; }
.hero-dot { width: 6px; height: 6px; border-radius: 3px; background: #D1D5DB; }
.hero-dot.active { width: 16px; background: #F97316; }
.hero-dots-outer { justify-content: center; margin: 10px 0 4px; }

/* Quick actions */
.quick-actions-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.quick-action-card {
    background: #fff;
    border-radius: 16px;
    padding: 18px 8px;
    text-align: center;
    text-decoration: none;
    border: 1px solid #F3F4F6;
    box-shadow: 0 4px 14px rgba(17,24,39,0.04);
}
.quick-action-icon {
    width: 44px; height: 44px;
    margin: 0 auto 8px;
    border-radius: 50%;
    background: #FFF3E8;
    color: #F97316;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
}
.quick-action-label { font-size: 13px; font-weight: 700; color: #374151; }

/* Today attendance banner */
.today-banner {
    margin-top: 16px;
    background: #FFF3E8;
    border: 1px solid #FDBA74;
    border-radius: 16px;
    padding: 14px 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}
.today-text { font-size: 14px; font-weight: 700; color: #111827; }
.today-sub  { font-size: 12px; color: #92400E; margin-top: 2px; }
.today-action {
    font-size: 13px;
    font-weight: 700;
    color: #fff;
    background: #F97316;
    padding: 8px 14px;
    border-radius: 10px;
    text-decoration: none;
    white-space: nowrap;
}

/* Trip card (dashboard "active/upcoming trip") */
.trip-card { background: #fff; border-radius: 18px; padding: 18px; border: 1px solid #F3F4F6; box-shadow: 0 6px 18px rgba(17,24,39,0.05); }
.trip-card-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.trip-card-title { font-size: 15px; font-weight: 800; color: #F97316; }
.trip-status { font-size: 11px; font-weight: 800; letter-spacing: 0.3px; padding: 5px 10px; border-radius: 8px; }
.trip-status-confirmed { background: #DCFCE7; color: #16A34A; }
.trip-status-pending   { background: #FEF3C7; color: #B45309; }
.trip-status-cancelled { background: #FEE2E2; color: #DC2626; }

.trip-route { display: flex; gap: 12px; margin-bottom: 18px; }
.trip-route-line { display: flex; flex-direction: column; align-items: center; padding-top: 4px; }
.trip-dot { width: 9px; height: 9px; border-radius: 50%; }
.trip-dot-start { background: #F97316; }
.trip-dot-end   { background: #F97316; }
.trip-route-connector { flex: 1; width: 1.5px; background: #FDBA74; margin: 4px 0; min-height: 22px; }
.trip-route-labels { flex: 1; display: flex; flex-direction: column; gap: 18px; }
.trip-route-label { font-size: 11.5px; color: #9CA3AF; margin-bottom: 2px; }
.trip-route-value { font-size: 14px; font-weight: 700; color: #111827; }

.trip-info-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.trip-info-box { background: #FFF7ED; border-radius: 12px; padding: 10px 12px; }
.trip-info-label { font-size: 11px; color: #9CA3AF; margin-bottom: 2px; }
.trip-info-value { font-size: 13.5px; font-weight: 700; color: #111827; }

.trip-view-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 14px;
    padding: 15px;
    border-radius: 14px;
    background: linear-gradient(135deg,#F97316,#EA580C);
    color: #fff;
    font-size: 15px;
    font-weight: 800;
    text-decoration: none;
    box-shadow: 0 6px 16px rgba(249,115,22,0.28);
}
.trip-view-btn:active { opacity: 0.92; transform: scale(0.99); }

.trip-card-empty { text-align: center; padding: 30px 18px; color: #9CA3AF; }
.trip-empty-icon { font-size: 26px; margin-bottom: 10px; color: #FDBA74; }
.trip-empty-text { font-size: 13.5px; }

/* Recent bookings */
.booking-list { display: flex; flex-direction: column; gap: 10px; }
.booking-row {
    display: flex;
    align-items: center;
    gap: 12px;
    background: #fff;
    border-radius: 16px;
    padding: 12px 14px;
    border: 1px solid #F3F4F6;
    box-shadow: 0 4px 14px rgba(17,24,39,0.04);
    text-decoration: none;
}
.booking-icon {
    width: 40px; height: 40px;
    flex-shrink: 0;
    border-radius: 50%;
    background: #EEF2FF;
    color: #ff7a3d;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
}
.booking-info { flex: 1; min-width: 0; }
.booking-title { font-size: 14px; font-weight: 700; color: #111827; }
.booking-datetime { font-size: 12px; color: #9CA3AF; margin-top: 2px; }
.booking-status { font-size: 11px; font-weight: 800; padding: 5px 10px; border-radius: 8px; white-space: nowrap; }
.booking-status-completed { background: #DCFCE7; color: #16A34A; }
.booking-status-pending   { background: #FEF3C7; color: #B45309; }
.booking-status-cancelled { background: #FEE2E2; color: #DC2626; }
.booking-chevron { color: #D1D5DB; font-size: 12px; }
.booking-empty { text-align: center; padding: 20px; color: #9CA3AF; font-size: 13.5px; }

/* Notifications preview list (dashboard section, distinct from the
   full notifications page cards below) */
.notif-list { display: flex; flex-direction: column; gap: 10px; }
.notif-row {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    background: #fff;
    border-radius: 16px;
    padding: 14px;
    border: 1px solid #F3F4F6;
    box-shadow: 0 4px 14px rgba(17,24,39,0.04);
    text-decoration: none;
}
.notif-icon {
    width: 38px; height: 38px;
    flex-shrink: 0;
    border-radius: 50%;
    background: #FFF3E8;
    color: #F97316;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
}
.notif-info { flex: 1; min-width: 0; }
.notif-text { font-size: 13.5px; font-weight: 700; color: #111827; line-height: 1.4; }
.notif-meta { font-size: 11.5px; color: #9CA3AF; margin-top: 3px; }

/* KPI cards */
.kpi-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.kpi-card {
    background: #fff;
    border-radius: 16px;
    padding: 16px;
    text-decoration: none;
    border: 1px solid #F3F4F6;
    box-shadow: 0 4px 14px rgba(17,24,39,0.04);
    transition: opacity .2s;
}
.kpi-label { font-size: 11px; font-weight: 700; color: #9CA3AF; letter-spacing: 0.3px; margin-bottom: 6px; }
.kpi-value { font-size: 22px; font-weight: 800; color: #111827; }


/* ==========================================================================
   5. APP SHELL — sidebar + topbar (partials/nav.blade.php)
   ========================================================================== */
.topbar { padding: 6px 7px 4px; }
.topbar-inner {
    max-width: 640px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.topbar-left { display: flex; align-items: center; }
.topbar-greeting { font-size: 13px; color: var(--o-gray-500); }
.topbar-name { font-size: 20px; font-weight: 800; color: var(--o-gray-900); margin-top: 2px; }

.topbar-right { display: flex; align-items: center; gap: 10px; }
.icon-btn {
    position: relative;
    width: 42px; height: 42px;
    border-radius: 14px;
    background: var(--o-gray-50);
    border: 1px solid var(--o-gray-100);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #ff7a3d;
    font-size: 16px;
    cursor: pointer;
    text-decoration: none;
}
.icon-btn:active { transform: scale(0.96); }
.icon-badge {
    position: absolute;
    top: -5px; right: -5px;
    background: var(--o-red);
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    min-width: 17px;
    height: 17px;
    border-radius: 9px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 4px;
    border: 2px solid #fff;
}


/* ==========================================================================
   6. NOTIFICATIONS (notifications.blade.php)
   ========================================================================== */
.page-notifications .notif-filter-row { display: flex; gap: 10px; margin-bottom: 18px; }
.page-notifications .notif-pill {
    flex: 1;
    padding: 10px 12px;
    border-radius: 999px;
    border: 1.5px solid #E5E7EB;
    background: #fff;
    color: #374151;
    font-size: 13.5px;
    font-weight: 700;
    cursor: pointer;
    text-align: center;
}
.page-notifications .notif-pill.active { background: #FFF3E8; border-color: #F97316; color: #F97316; }

.page-notifications .notif-cards { display: flex; flex-direction: column; gap: 14px; }
.page-notifications .notif-card {
    display: block;
    width: 100%;
    background: #fff;
    border-radius: 16px;
    padding: 16px;
    border: 1px solid #F3F4F6;
    box-shadow: 0 4px 14px rgba(17,24,39,0.04);
    text-align: left;
    cursor: pointer;
    border-left: 4px solid transparent;
    font-family: inherit;
}
.page-notifications .notif-card-unread { background: #FFFF; border-left-color: #F97316; }

.page-notifications .notif-card-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.page-notifications .notif-type { font-size: 10.5px; font-weight: 800; letter-spacing: 0.4px; display: inline-flex; align-items: center; gap: 6px; }
.page-notifications .notif-type-click { color: #F97316; }
.page-notifications .notif-type-info  { color: #6B7280; }
.page-notifications .notif-dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; display: inline-block; }

.page-notifications .notif-status-badge { font-size: 10.5px; font-weight: 800; padding: 4px 9px; border-radius: 7px; }
.page-notifications .notif-status-unread { background: #FFEAD5; color: #C2410C; }
.page-notifications .notif-status-read   { background: #F3F4F6; color: #6B7280; }

.page-notifications .notif-card-title {
    font-size: 15px; font-weight: 800; color: #111827;
    text-decoration: underline;
    text-decoration-color: #E5E7EB;
    margin-bottom: 6px;
}
.page-notifications .notif-card-unread .notif-card-title { text-decoration-color: #FDBA74; }
.page-notifications .notif-card-body { font-size: 13px; color: #4B5563; line-height: 1.5; margin-bottom: 10px; }
.page-notifications .notif-card-meta { font-size: 11.5px; color: #9CA3AF; margin-bottom: 10px; }

.page-notifications .notif-card-times {
    border-left: 2px solid #FDBA74;
    padding-left: 10px;
    font-size: 12px;
    color: #374151;
    display: flex;
    flex-direction: column;
    gap: 3px;
}
.page-notifications .notif-card-times strong { font-weight: 700; }
.page-notifications .notif-card-now { color: #9CA3AF; }

/* Bottom nav (notifications page) */
.notif-bottom-nav {
    position: fixed;
    left: 0; right: 0; bottom: 0;
    background: #fff;
    border-top: 1px solid #F3F4F6;
    display: flex;
    padding: 8px 6px calc(8px + env(safe-area-inset-bottom, 0));
    z-index: 40;
    box-shadow: 0 -4px 18px rgba(17,24,39,0.06);
}
.notif-bottom-nav .bottom-nav-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 6px 4px;
    border-radius: 12px;
    font-size: 11.5px;
    font-weight: 600;
    color: #9CA3AF;
    text-decoration: none;
}
.notif-bottom-nav .bnav-icon { font-size: 18px; }
.notif-bottom-nav .bottom-nav-item.active { color: #F97316; }
.notif-bottom-nav .bottom-nav-item.active .bnav-icon { color: #F97316; }
@media (min-width: 992px) { .notif-bottom-nav { display: none; } }

/* Notification detail modal */
.page-notifications .notif-detail-type { font-size: 11px; font-weight: 800; color: #F97316; letter-spacing: 0.4px; margin-bottom: 8px; }
.page-notifications .notif-detail-title { font-size: 19px; font-weight: 800; color: #111827; margin-bottom: 6px; }
.page-notifications .notif-detail-meta { font-size: 12px; color: #9CA3AF; margin-bottom: 16px; }
.page-notifications .notif-detail-body { font-size: 14px; line-height: 1.6; color: #374151; margin-bottom: 18px; }

.page-notifications .notif-status-row {
    background: #F9FAFB;
    border-radius: 12px;
    padding: 12px 14px;
    font-size: 13px;
    color: #6B7280;
    margin-bottom: 18px;
}
.page-notifications .notif-status-row strong { color: #111827; }

.page-notifications .notif-timeline { border-left: 2px solid #F97316; padding-left: 14px; margin-bottom: 22px; display: flex; flex-direction: column; gap: 14px; }
.page-notifications .notif-timeline-item { position: relative; }
.page-notifications .notif-timeline-dot {
    position: absolute;
    left: -18.5px; top: 3px;
    width: 9px; height: 9px;
    border-radius: 50%;
    background: #F97316;
}
.page-notifications .notif-timeline-dot-muted { background: #D1D5DB; }
.page-notifications .notif-timeline-label { font-size: 12.5px; font-weight: 700; color: #111827; }
.page-notifications .notif-timeline-value { font-size: 12px; color: #6B7280; margin-top: 2px; }


/* ==========================================================================
   7. PROFILE (profile.blade.php)
   ========================================================================== */
/* Avatar */
.page-profile .avatar-block { text-align: center; margin: 10px 0 8px; }
.page-profile .avatar-circle {
    position: relative;
    width: 92px; height: 92px;
    margin: 0 auto;
    border-radius: 50%;
    background: #F3F4F6;
    border: 2px solid #F97316;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}
.page-profile .avatar-circle img { width: 100%; height: 100%; object-fit: cover; }
.page-profile .avatar-circle i.fa-user { font-size: 34px; color: #4C1D95; }
.page-profile .avatar-edit-btn {
    position: absolute;
    right: -2px; bottom: -2px;
    width: 30px; height: 30px;
    border-radius: 50%;
    border: 2px solid #fff;
    background: #F97316;
    color: #fff;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 12px;
    cursor: pointer;
}
.page-profile .avatar-caption { font-size: 12.5px; color: #F97316; font-weight: 700; margin-top: 10px; }

/* Info panels */
.page-profile .info-panel {
    background: #fff;
    border-radius: 16px;
    border: 1px solid #F3F4F6;
    box-shadow: 0 4px 14px rgba(17,24,39,0.04);
    overflow: hidden;
}
.page-profile .info-row {
    width: 100%;
    padding: 14px 16px;
    border-bottom: 1px solid #F3F4F6;
    background: none;
    border-left: none; border-right: none; border-top: none;
    text-align: left;
    font-family: inherit;
}
.page-profile .info-row:last-child { border-bottom: none; }
.page-profile .info-row-label { font-size: 11.5px; color: #9CA3AF; font-weight: 700; margin-bottom: 3px; }
.page-profile .info-row-value { font-size: 15px; font-weight: 700; color: #111827; }
.page-profile .info-row-value-wrap { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.page-profile .verified-badge {
    font-size: 11px; font-weight: 800; color: #16A34A;
    display: inline-flex; align-items: center; gap: 4px;
    white-space: nowrap;
}
.page-profile .verified-badge i { font-size: 9px; }

.page-profile .info-row-static { cursor: default; }
.page-profile .info-row-sub { font-size: 11.5px; color: #9CA3AF; margin-top: 2px; }
.page-profile .info-row-link {
    display: flex; align-items: center; justify-content: space-between;
    cursor: pointer;
}
.page-profile .info-row-link:hover { background: #FAFAFA; }
.page-profile .info-row-label-dark { font-size: 14px; font-weight: 700; color: #111827; }
.page-profile .info-row-link > i { color: #D1D5DB; font-size: 13px; flex-shrink: 0; }

/* Bottom nav (profile page) */
.profile-bottom-nav {
    position: fixed;
    left: 0; right: 0; bottom: 0;
    background: #fff;
    border-top: 1px solid #F3F4F6;
    display: flex;
    padding: 8px 6px calc(8px + env(safe-area-inset-bottom, 0));
    z-index: 40;
    box-shadow: 0 -4px 18px rgba(17,24,39,0.06);
}
.profile-bottom-nav .bottom-nav-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 6px 4px;
    border-radius: 12px;
    font-size: 11.5px;
    font-weight: 600;
    color: #9CA3AF;
    text-decoration: none;
}
.profile-bottom-nav .bnav-icon { font-size: 18px; }
.profile-bottom-nav .bottom-nav-item.active { color: #F97316; }
.profile-bottom-nav .bottom-nav-item.active .bnav-icon { color: #F97316; }
@media (min-width: 992px) { .profile-bottom-nav { display: none; } }

/* Legal / About modal */
.page-profile .legal-modal-card { display: flex; flex-direction: column; }
.page-profile .legal-modal-head { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.page-profile .legal-modal-icon {
    width: 38px; height: 38px;
    flex-shrink: 0;
    border-radius: 10px;
    background: #FFF3E8;
    color: #F97316;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 16px;
}
.page-profile .legal-modal-title { font-size: 17px; font-weight: 800; color: #111827; }
.page-profile .legal-modal-body {
    font-size: 13.5px;
    line-height: 1.7;
    color: #374151;
    overflow-y: auto;
    margin-bottom: 18px;
    white-space: pre-line;
}
.page-profile .legal-modal-body strong { color: #111827; }


/* ==========================================================================
   8. TRIPS (trip.blade.php)
   ========================================================================== */
.page-trips .page-title { margin: 34px 4px 16px; } /* base font-size/color already set above */

/* Filter pills */
.page-trips .filter-row {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    padding: 2px 2px 6px;
    scrollbar-width: none;
}
.page-trips .filter-row::-webkit-scrollbar { display: none; }
.page-trips .filter-pill {
    flex-shrink: 0;
    padding: 9px 16px;
    border-radius: 999px;
    border: 1px solid #E5E7EB;
    background: #fff;
    color: #374151;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    white-space: nowrap;
}
.page-trips .filter-pill.active { background: #F97316; border-color: #F97316; color: #fff; }

/* Trip list */
.page-trips .trip-list { display: flex; flex-direction: column; gap: 12px; }
.page-trips .trip-row {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    background: #fff;
    border-radius: 16px;
    padding: 14px;
    border: 1px solid #F3F4F6;
    box-shadow: 0 4px 14px rgba(17,24,39,0.04);
    text-decoration: none;
}
.page-trips .trip-date-box {
    flex-shrink: 0;
    width: 52px;
    background: #FFF3E8;
    border-radius: 12px;
    text-align: center;
    padding: 8px 4px;
}
.page-trips .trip-date-day { font-size: 18px; font-weight: 800; color: #111827; line-height: 1; }
.page-trips .trip-date-mon { font-size: 10px; font-weight: 700; color: #FFFFFF; margin-top: 4px; line-height: 1.3; }

.page-trips .trip-row-info { flex: 1; min-width: 0; }
.page-trips .trip-row-title { font-size: 14.5px; font-weight: 800; color: #111827; }
.page-trips .trip-row-route, .page-trips .trip-row-time {
    font-size: 12px; color: #6B7280; margin-top: 4px;
    display: flex; align-items: center; gap: 5px;
}
.page-trips .trip-row-route i, .page-trips .trip-row-time i { font-size: 10.5px; color: #9CA3AF; width: 11px; }
.page-trips .trip-row-meta { font-size: 11px; color: #9CA3AF; margin-top: 8px; }
.page-trips .trip-row-meta strong { color: #6B7280; font-weight: 700; }

.page-trips .trip-row-right { flex-shrink: 0; display: flex; flex-direction: column; align-items: flex-end; gap: 10px; }
.page-trips .trip-row-chevron { color: #D1D5DB; font-size: 12px; margin-top: auto; }

.page-trips .trip-pill { font-size: 11px; font-weight: 800; padding: 5px 10px; border-radius: 8px; white-space: nowrap; }
.page-trips .trip-pill-new          { background: #E0F2FE; color: #0284C7; }
.page-trips .trip-pill-in-progress  { background: #DCFCE7; color: #16A34A; }
.page-trips .trip-pill-called       { background: #DBEAFE; color: #2563EB; }
.page-trips .trip-pill-arrived      { background: #EDE9FE; color: #7C3AED; }
.page-trips .trip-pill-completed    { background: #DCFCE7; color: #16A34A; }
.page-trips .trip-pill-cancelled    { background: #FEE2E2; color: #DC2626; }

.page-trips .trip-list-empty { text-align: center; padding: 40px 20px; color: #9CA3AF; font-size: 13.5px; }

/* Trip details head */
.page-trips .detail-head-card {
    background: #FFF3E8;
    border-radius: 16px;
    padding: 16px;
    margin-bottom: 14px;
}
.page-trips .detail-head-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.page-trips .detail-head-title { font-size: 17px; font-weight: 800; color: #111827; }
.page-trips .detail-head-meta { font-size: 12px; color: #F97316; margin-top: 6px; }

/* Timeline */
.page-trips .timeline-card {
    background: #fff;
    border-radius: 16px;
    padding: 18px 16px;
    border: 1px solid #F3F4F6;
    box-shadow: 0 4px 14px rgba(17,24,39,0.04);
    margin-bottom: 14px;
}
.page-trips .timeline-item { display: flex; gap: 12px; position: relative; padding-bottom: 20px; }
.page-trips .timeline-item:last-child { padding-bottom: 0; }
.page-trips .timeline-item:not(:last-child)::before {
    content: '';
    position: absolute;
    left: 6px; top: 16px;
    width: 1.5px; height: calc(100% - 4px);
    background: #FDBA74;
}
.page-trips .timeline-dot {
    flex-shrink: 0;
    width: 13px; height: 13px;
    border-radius: 50%;
    margin-top: 2px;
    border: 3px solid #F97316;
    background: #F97316;
    z-index: 1;
}
.page-trips .timeline-pending .timeline-dot { border-color: #D1D5DB; background: #fff; }
.page-trips .timeline-label { font-size: 13.5px; font-weight: 700; color: #111827; }
.page-trips .timeline-pending .timeline-label { color: #9CA3AF; }
.page-trips .timeline-time { font-size: 11.5px; color: #6B7280; margin-top: 2px; }
.page-trips .timeline-pending .timeline-time { color: #C4CAD3; }

/* Info cards */
.page-trips .info-card {
    background: #fff;
    border-radius: 16px;
    padding: 14px 16px;
    border: 1px solid #F3F4F6;
    box-shadow: 0 4px 14px rgba(17,24,39,0.04);
    margin-bottom: 12px;
}
.page-trips .info-card-label { font-size: 11px; color: #9CA3AF; font-weight: 700; margin-bottom: 4px; }
.page-trips .info-card-value { font-size: 14px; font-weight: 700; color: #111827; }
.page-trips .info-card-sub { font-size: 11.5px; color: #9CA3AF; margin-top: 3px; }

.page-trips .driver-card { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.page-trips .driver-call-btn {
    flex-shrink: 0;
    width: 42px; height: 42px;
    border-radius: 12px;
    background: #FFF3E8;
    color: #F97316;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 16px;
    text-decoration: none;
}

/* Bottom nav (trips page) */
.trips-bottom-nav {
    position: fixed;
    left: 0; right: 0; bottom: 0;
    background: #fff;
    border-top: 1px solid #F3F4F6;
    display: flex;
    padding: 8px 6px calc(8px + env(safe-area-inset-bottom, 0));
    z-index: 40;
    box-shadow: 0 -4px 18px rgba(17,24,39,0.06);
}
.trips-bottom-nav .bottom-nav-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 6px 4px;
    border-radius: 12px;
    font-size: 11.5px;
    font-weight: 600;
    color: #9CA3AF;
    text-decoration: none;
}
.trips-bottom-nav .bnav-icon { font-size: 18px; }
.trips-bottom-nav .bottom-nav-item.active { color: #F97316; background: #FFF3E8; }
.trips-bottom-nav .bottom-nav-item.active .bnav-icon { color: #F97316; }
@media (min-width: 992px) { .trips-bottom-nav { display: none; } }

/* Start Trip / QR / OTP modals */
.page-trips .modal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.page-trips .modal-title { font-size: 17px; font-weight: 800; color: #111827; }
.page-trips .modal-close {
    width: 30px; height: 30px;
    border-radius: 8px;
    border: none;
    background: #F3F4F6;
    color: #6B7280;
    display: inline-flex; align-items: center; justify-content: center;
    cursor: pointer;
    font-size: 13px;
}
.page-trips .modal-sub { font-size: 13px; color: #6B7280; margin-bottom: 18px; line-height: 1.5; }

.page-trips .verify-option {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    background: #fff;
    border: 1.5px solid #E5E7EB;
    border-radius: 14px;
    padding: 14px;
    margin-bottom: 10px;
    cursor: pointer;
    text-align: left;
}
.page-trips .verify-option:hover { border-color: #FDBA74; background: #FFF9F4; }
.page-trips .verify-option-icon {
    flex-shrink: 0;
    width: 40px; height: 40px;
    border-radius: 10px;
    background: #FFF3E8;
    color: #F97316;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 17px;
}
.page-trips .verify-option-title { font-size: 14px; font-weight: 800; color: #111827; }
.page-trips .verify-option-sub { font-size: 11.5px; color: #9CA3AF; margin-top: 2px; }

.page-trips .qr-box {
    display: flex; align-items: center; justify-content: center;
    background: #F9FAFB;
    border-radius: 14px;
    padding: 18px;
    margin-bottom: 14px;
}
.page-trips #qrCanvas { display: block; image-rendering: pixelated; }
.page-trips .qr-trip-id { text-align: center; font-size: 13px; color: #111827; font-weight: 700; }
.page-trips .qr-valid { text-align: center; font-size: 12px; color: #DC2626; font-weight: 700; margin-top: 4px; }
.page-trips .qr-hint { text-align: center; font-size: 11.5px; color: #9CA3AF; margin-top: 8px; }

.page-trips .otp-share-label { text-align: center; font-size: 13px; color: #6B7280; margin-bottom: 12px; }
.page-trips .otp-display-box {
    text-align: center;
    background: #FFF3E8;
    border-radius: 14px;
    padding: 18px;
    font-size: 30px;
    font-weight: 800;
    letter-spacing: 6px;
    color: #EA580C;
}


/* ==========================================================================
   9. LOGIN (login.blade.php) — scoped under body.page-login
   ========================================================================== */
body.page-login {
    font-family: -apple-system, 'SF Pro Display', BlinkMacSystemFont, 'Segoe UI', sans-serif;
    background: var(--gray-50);
    min-height: 100vh;
    min-height: -webkit-fill-available;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: env(safe-area-inset-top, 0) 0 env(safe-area-inset-bottom, 0);
}

.page-login .topbar {
    width: 100%;
    max-width: 420px;
    display: flex;
    justify-content: flex-end;
    padding: 20px 24px 0;
}
.page-login .topbar a {
    font-size: 14px;
    color: var(--gray-500);
    text-decoration: none;
}

.page-login .page {
    width: 100%;
    max-width: 420px;
    padding: 90px 24px 40px;
    display: flex;
    flex-direction: column;
}

/* Brand */
.page-login .brand { text-align: center; margin: 8px 0 28px; }
.page-login .brand-logo { width: 120px; height: auto; margin: 0 auto 18px; display: block; }
.page-login .brand h1 { font-size: 24px; font-weight: 800; color: var(--gray-900); letter-spacing: -0.3px; }
.page-login .brand p { font-size: 14px; color: var(--gray-500); margin-top: 6px; }

/* Card */
.page-login .card {
    background: var(--white);
    border-radius: var(--radius-lg);
    padding: 26px 22px;
    box-shadow: var(--shadow);
    border: 1px solid var(--gray-100);
}

/* Alert */
.page-login .alert { padding: 12px 14px; border-radius: var(--radius-sm); font-size: 14px; margin-bottom: 18px; line-height: 1.4; }
.page-login .alert-error   { background: #FEF2F2; border: 1px solid #FECACA; color: var(--red); }
.page-login .alert-success { background: #F0FDF4; border: 1px solid #BBF7D0; color: var(--green); }
.page-login .alert-info    { background: var(--orange-light); border: 1px solid var(--orange-mid); color: var(--orange-dark); }

/* Input */
.page-login .input-wrap { margin-bottom: 18px; }
.page-login .input-label { display: block; font-size: 13px; font-weight: 700; color: var(--gray-900); margin-bottom: 10px; }
.page-login .phone-row { display: flex; gap: 8px; }
.page-login .cc-select {
    width: 84px;
    padding: 0 10px;
    background: var(--white);
    border: 1.5px solid var(--gray-200);
    border-radius: var(--radius-md);
    font-size: 15px;
    font-weight: 600;
    color: var(--gray-900);
    outline: none;
    -webkit-appearance: none;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236B7280' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
    background-size: 16px;
    padding-right: 30px;
}
.page-login .input-field {
    flex: 1;
    width: 100%;
    padding: 15px 16px;
    background: var(--white);
    border: 1.5px solid var(--gray-200);
    border-radius: var(--radius-md);
    font-size: 16px;
    color: var(--gray-900);
    outline: none;
    transition: border-color .2s;
    -webkit-appearance: none;
    letter-spacing: 0.3px;
}
.page-login .input-field:focus, .page-login .cc-select:focus { border-color: var(--orange); }
.page-login .input-field.error, .page-login .cc-select.error { border-color: var(--red); }

/* Button */
.page-login .btn-primary {
    width: 100%;
    padding: 17px;
    background: linear-gradient(135deg, var(--orange), var(--orange-dark));
    border: none;
    border-radius: var(--radius-md);
    color: var(--white);
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
    transition: all .2s;
    touch-action: manipulation;
    letter-spacing: 0.2px;
    box-shadow: 0 6px 18px rgba(249,115,22,0.32);
    margin-top: 4px;
}
.page-login .btn-primary:active { transform: scale(0.98); opacity: 0.92; }
.page-login .btn-primary:disabled { opacity: 0.45; cursor: not-allowed; transform: none; box-shadow: none; }

.page-login .btn-ghost {
    background: none;
    border: none;
    color: var(--orange);
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    padding: 8px;
    touch-action: manipulation;
}
.page-login .btn-ghost.muted { color: var(--gray-500); }

.page-login .terms { text-align: center; font-size: 12px; color: var(--gray-400); margin-top: 14px; line-height: 1.5; }
.page-login .terms a { color: var(--orange); text-decoration: none; font-weight: 600; }

/* OTP screen */
.page-login .otp-heading { font-size: 18px; font-weight: 800; color: var(--gray-900); margin-bottom: 6px; text-align: center; }
.page-login .otp-sub { text-align: center; font-size: 13px; color: var(--gray-500); margin-bottom: 22px; }
.page-login .otp-sub strong { color: var(--gray-700); }

.page-login .otp-row { display: flex; gap: 8px; justify-content: center; margin-bottom: 22px; }
.page-login .otp-box {
    flex: 1;
    max-width: 50px;
    height: 56px;
    text-align: center;
    font-size: 22px;
    font-weight: 700;
    color: var(--gray-900);
    background: var(--white);
    border: 1.5px solid var(--gray-200);
    border-radius: var(--radius-md);
    outline: none;
    transition: border-color .2s, background .2s;
    -webkit-appearance: none;
    caret-color: var(--orange);
}
.page-login .otp-box:focus  { border-color: var(--orange); }
.page-login .otp-box.filled { border-color: var(--orange); background: var(--orange-light); }

.page-login .otp-links { display: flex; justify-content: center; align-items: center; gap: 18px; margin-top: 6px; }
.page-login .otp-links .sep { color: var(--gray-200); }

.page-login .resend-row { text-align: center; margin-top: 14px; font-size: 13px; color: var(--gray-500); }
.page-login .resend-timer { color: var(--orange); font-weight: 700; }

.page-login .footer-brand { text-align: center; margin-top: 28px; font-size: 12px; color: var(--gray-400); }
.page-login .footer-brand strong { color: var(--gray-500); }

/* Spinner */
.page-login .spinner {
    width: 16px; height: 16px;
    border: 2px solid rgba(255,255,255,0.4);
    border-top-color: var(--white);
    border-radius: 50%;
    display: inline-block;
    vertical-align: -3px;
    margin-right: 8px;
    animation: spin .7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }