/* ==========================================================================
   GIRA CORPORATE PALETTE CONFIGURATION - SINGLE FLEET WEB CORE
   ========================================================================== */
/* ==========================================================================
   MODERN HIGH-CONTRAST MINIMALIST DARK-MODE OVERWRITE
   ========================================================================== */
html, body {
    max-width: 100vw;
    overflow-x: hidden;
    position: relative;
    /* 🟩 LUXURY UPGRADE: Changed flat muddy brown to a clean, deep slate obsidian black */
    background-color: #0b0f19 !important; 
}

:root {
    /* 1. Core Corporate Color Variables */
    --primary: #FC6600;            /* Vibrant Gira Orange */
    --primary-hover: #D45500;      
    --accent-brown: #813F0B;       
    
    /* 2. Interface Canvas Background Anchors */
    --dark: #0f172a;               /* Premium slate black for cards and panels */
    /* 🟩 LUXURY UPGRADE: Recesses light tokens down into obsidian black base shadows */
    --light: #0b0f19;              
    
    --card-shadow: 0 4px 12px rgba(0, 0, 0, 0.45), 0 2px 4px rgba(0, 0, 0, 0.3);
    --hover-shadow: 0 12px 20px -3px rgba(0, 0, 0, 0.5), 0 4px 8px -2px rgba(0, 0, 0, 0.4);
}

body {
    font-family: 'Inter', system-ui, sans-serif;
    background-color: var(--light) !important;
    margin: 0;
    padding: 12px;
    color: #ffffff; 
}



header {
    text-align: center;
    padding: 16px 0;
    border-bottom: 1px solid #813F0B; /* Appends a high-utility clean bounding line beneath your brand headers */
    background-color: var(--dark);
    margin: -12px -12px 16px -12px; /* Pulls boundaries flush to the device frame edges */
    box-shadow: var(--card-shadow);
}

.breadcrumb {
    color: var(--primary);
    font-weight: 700;
    margin-top: 8px;
    cursor: pointer;
    font-size: 0.95rem;
    display: inline-block;
    letter-spacing: 0.02em;
    text-transform: uppercase; /* Makes navigation back-arrows look sharp and clean on student viewports */
    transition: color 0.15s ease;
}

.breadcrumb:hover {
    color: var(--primary-hover); /* Animates smoothly during interactive cursor hovers */
}


/* ==========================================================================
   CORE INTERACTIVE MAIN GRID WORKSPACE
   ========================================================================== */

/* ==========================================================================
   PRIMARY DATA GRID WORKSPACE - APPLICATION VIEW ENGINE DYNAMICS
   ========================================================================== */
#app-container {
    position: relative;
    display: grid;
    /* Grid layout auto-scales and adapts perfectly across all smartphone frame boundaries */
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 12px;
    max-width: 500px;
    padding: 12px;  
    margin: 10px auto;
    justify-content: center;
    box-sizing: border-box; /* Defensive alignment layer blocks container sizing calculation leaks */
    min-height: 400px;
    
    /* PWA FOOTER NAVIGATION BUFFER SAFEGUARD:
       Provides essential vertical space at the absolute bottom of the scroll track.
       This prevents your persistent sticky rider action panels and iOS/Android home bars 
       from awkwardly overlapping or covering your bottom campus building navigation cards! */
    padding-bottom: 110px; 
}


/* Base Card Style */

/* ==========================================================================
   INTERACTIVE GRID INTERFACE CARDS - THE CORE COMPONENT LOGIC
   ========================================================================== */
.card {
    position: relative;
    aspect-ratio: 1 / 1;
    background-size: cover;
    background-position: center;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0;
    padding: 16px;
    overflow: hidden;
    color: #ffffff;
    border-radius: 16px;
    text-align: center;
    box-sizing: border-box; /* Defensive layout guard blocks border size compression spikes */
    box-shadow: var(--card-shadow);
    transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.2s, border-color 0.2s;
    cursor: pointer;
    
    /* GIRA BRAND BALANCED MATRIX OVERWRITES */
    background: var(--dark) !important; /* Swapped out raw white paint for premium slate-black backgrounds */
    border: 2px solid #1e293b !important; /* Subtle slate border outlines your grids elegantly */
    
    /* PERFORMANCE HIGHLIGHT PROTECTION */
    -webkit-user-select: none; /* Prevents ugly text-selection highlighting overlays while tapping numbers fast */
    user-select: none;
    -webkit-tap-highlight-color: transparent; /* Removes default mobile browser blue tap-flash shapes */
}

/* INTERACTIVE RESPONSIVE HOVER HOOKS */
@media (hover: hover) {
    .card:hover {
        transform: translateY(-4px) scale(1.02); /* Creates a smooth floating lift on cursor hovers */
        box-shadow: var(--hover-shadow);
        border-color: rgba(252, 102, 0, 0.4) !important; /* Soft orange halo glow hints interactive usability */
    }
}

/* HIGH-VELOCITY MOBILE TACTILE FEEDBACK */
.card:active {
    transform: scale(0.96) !important; /* Snaps tight against the finger to simulate true mechanical key presses */
    border-color: var(--primary) !important; /* Flashes bright Gira Orange (#FC6600) upon contact impact! */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

/* CARD INNER TYPOGRAPHY CONTROLLERS */
.card h3 {
    margin: 0;
    color: #ffffff !important;
    position: relative;
    z-index: 2;
    font-size: 1.15rem;
    font-weight: 800; /* Extra bold text ensures title text remains highly legible over photographic gradient layers */
    line-height: 1.3;
    letter-spacing: 0.01em;
    text-shadow: 0 2px 6px rgba(0, 0, 0, 0.95); /* Deep shadow wrapper completely seals text from bleeding into backing artwork images */
}

/* ==========================================================================
   CARD GRADIENT SCRIMS & UNIFIED SINGLE-FLEET RIDER COMPONENT STYLES
   ========================================================================== */

/* 1. Dark Background Scrim Overlay (Guarantees white text readability over campus image layers) */
/* ==========================================================================
   CARD GRADIENT SCRIMS EXCLUSION RULES (DIMMING LOOPHOLE FIX)
   ========================================================================== */

/* 1. Dark Background Scrim Overlay 
   🟩 EXCLUSION FIX: Blocks dark gradient masks from rendering on top of active driver profiles! */
.card:not(.rider-card-view-only)::after {
    content: "";
    position: absolute;
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%;
    /* Hardened linear alpha track anchors text legibility across all phone display brightness layers */
    background: linear-gradient(to top, rgba(2, 6, 23, 0.9) 0%, rgba(2, 6, 23, 0.3) 100%) !important;
    z-index: 1;
    pointer-events: none; /* Prevents the invisible overlay from capturing layout touch events */
}


/* 2. Unified Standard Rider Profile Panel Controller */
.rider-card {
    grid-column: 1 / -1; /* Spans across both grid rows cleanly to fill screen width boundaries */
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: var(--dark) !important; /* Premium Slate-Black container background color */
    border-radius: 16px;
    padding: 20px;
    color: #ffffff !important;
    min-height: 120px;
    box-sizing: border-box;
    box-shadow: var(--card-shadow);
    /* SINGLE-FLEET DESIGN BRAND LINE STRIP:
       Appends a vibrant Gira Orange solid bounding edge strip line indicator to give
       your courier listings an exceptionally premium, custom brand-aligned theme appearance! */
    border: 1px solid var(--border-slate) !important;
    border-left: 5px solid var(--primary) !important; 
}

/* 3. Rider Panel Internal Typography Core Element */
.rider-card h3 {
    text-shadow: none !important; /* Strips double-shadows inside the flat-colored worker profiles canvas */
    font-size: 1.2rem;
    font-weight: 800; /* Rich extra-bold treatment maximizes readability */
    margin: 0 0 4px 0;
    color: #ffffff !important;
    letter-spacing: 0.01em;
}

/* 4. Action Layout Horizontal Wrapper Group */
.btn-group {
    display: flex;
    gap: 8px;
    align-items: center;
    box-sizing: border-box;
}

/* ==========================================================================
   INTERACTIVE BUTTON LIFECYCLES & OVERLAY MODAL INFRASTRUCTURE
   ========================================================================== */

/* 1. Fixes Carrier Button Click Blocks */
.btn-group-vertical {
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 100%;
    
    /* 💥 THE CRITICAL FIXES: Pulls buttons above the dark card overlay gradient */
    position: relative !important;
    z-index: 5 !important; 
    
    /* Forces the phone browser to treat this block as an active touch target */
    pointer-events: auto !important; 
}

/* Ensure the anchor tags inside follow the same rules */
.btn-top-row a,
.btn-pcm,
.btn-mpesa {
    position: relative !important;
    z-index: 6 !important;
    pointer-events: auto !important;
    -webkit-tap-highlight-color: transparent;
}

.btn {
    padding: 10px 14px;
    border-radius: 8px;
    text-decoration: none;
    color: #ffffff !important;
    font-size: 14px;
    font-weight: 700; /* Rich font-weight enhancement for clear outdoor reading */
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    transition: transform 0.1s cubic-bezier(0.4, 0, 0.2, 1), filter 0.15s ease;
}

/* HAPTIC SIMULATION LAYER FOR TELECOMMUNICATION COURIER CONTROLS */
.btn:active {
    transform: scale(0.97) !important; /* Mimics a hardware button press on high-velocity tapping */
    filter: brightness(0.85);
}

.btn-call { background-color: #2563eb !important; } 
.btn-wa { background-color: #22c55e !important; white-space: nowrap; } 

/* ==========================================================================
   PRODUCTION HARDENED TELEMETRY COMMUNICATION BUTTONS STYLING
   ========================================================================== */

/* Base configuration setup for all split-row contact layout elements */
.btn-call, .btn-wa {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    font-weight: 700 !important;
    font-size: 0.95rem !important;
    text-decoration: none !important;
    border-radius: 8px !important;
    padding: 12px 0 !important;
    margin: 0 !important;
    box-sizing: border-box !important;
    cursor: pointer !important;
    transition: background-color 0.15s ease, transform 0.1s ease !important;
    
    /* 🟩 VIBRANCY PASS: Forces maximum color opacity saturation to match your PCM button style */
    opacity: 1.0 !important;
    visibility: visible !important;
    filter: none !important;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2) !important;
    position: relative !important;
    z-index: 10 !important; /* Pulls elements clearly over any background card layouts */
}
/* PRODUCTION CRISP ROYAL BLUE DIALER BUTTON */
.btn-call {
    background-color: #2563eb !important; /* Rich, vibrant production royal blue */
    color: #ffffff !important;            /* High-contrast crisp bright white text text nodes */
    border: 1px solid #3b82f6 !important;
}


.btn-call:hover {
    background-color: #1d4ed8 !important; /* Standard dark blue color filter on hover states */
}


/* PRODUCTION NATIVE APP MESSENGER GREEN BUTTON */
.btn-wa {
    background-color: #16a34a !important; /* Rich, vibrant native app communication green */
    color: #ffffff !important;            /* High-contrast crisp bright white text text nodes */
    border: 1px solid #22c55e !important;
}

.btn-wa:hover {
    background-color: #15803d !important; /* Standard dark green color filter on hover states */
}


/* Subtle click-down tactile feedback animation layout rules */
.btn-call:active, .btn-wa:active {
    transform: scale(0.97) !important;
    filter: brightness(0.85) !important;
}


/* 2. Unified M-Pesa Quick-Pay Transaction Launch Anchor */
.btn-mpesa {
    background: linear-gradient(135deg, #FC6600, #813F0B) !important; /* Premium Gira corporate gradients mapping */
    color: #ffffff !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    box-shadow: 0 4px 10px rgba(252, 102, 0, 0.15);
}

/* 3. Production Rider View Fullscreen Terminal Overlay */
#rider-view {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 100;
    box-sizing: border-box;
    overflow-y: auto;
    display: flex;   
    flex-direction: column;
    
    /* GIRA PALETTE TRANSFORMATION */
    background-color: #020617 !important; /* Replaced flat white with deep onyx black layout base */
}

/* 4. Terminal Header Navigation Scrim Row */
.rider-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    position: sticky;
    top: 0;
    z-index: 10;
    width: 100%;
    box-sizing: border-box;
    
    /* UNIFIED PLATFORM SHIELD LAYERS */
    background-color: #0f172a !important; /* Matches premium charcoal black material cards container shell */
    border-bottom: 2px solid #813F0B !important; /* Striking oxblood crimson bounding line barrier */
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
}

.rider-header h2 {
    margin: 0;
    font-size: 1.35rem;
    font-weight: 800;
    color: #ffffff !important; /* Forces copy visibility over charcoal black surfaces */
    letter-spacing: -0.01em;
}

/* 5. Terminal Direct Closure Handle Button */
.rider-header button {
    background: none;
    border: none;
    font-size: 32px; /* Increased size slightly to make closing tap-targets easier for driving riders */
    cursor: pointer;
    color: #9ca3af;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color 0.15s ease;
    -webkit-tap-highlight-color: transparent;
}

.rider-header button:active {
    color: #FC6600 !important; /* Tapping close flashes Gira corporate orange notice indicators */
}



/* Amount Display */

/* ==========================================================================
   HARDWARE TOUCH TERMINAL DISPLAY PANELS & NUMERIC NUMPAD CONTROLLERS
   ========================================================================== */

/* 1. Driver Custom Numeric Amount Cash Value Counter Display */
.amount-display {
    font-size: 3.5rem; /* Increased sizing slightly to make numeric tracking effortless on small phone views */
    font-weight: 800;
    text-align: center;
    margin: 30px 0;
    color: var(--primary) !important; /* Locks value presentation text uniformly into Gira Orange (#FC6600) */
    
    /* PRODUCTION GLOW HIGHLIGHT ACCENT:
       Appends a soft corporate orange neon halo illumination shadow structure behind numbers,
       ensuring that numerical pricing balances stay perfectly legible even under extreme outdoor glare! */
    text-shadow: 0 0 15px rgba(252, 102, 0, 0.25);
    
    /* ENFORCES TABULAR LINING FIGURES: 
       Locks fixed structural spacing widths uniformly over every numerical digit character cell. 
       This completely stops your text layout boundaries or adjacent buttons from erratic shifting 
       or jumping around on fast numeric entries! */
    font-feature-settings: "tnum" 1, "lnum" 1 !important; 
}

/* 2. Tactical Touchscreen Keypad Matrix Interface Wrapper Grid */
.numpad {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* Forms a clean 3-column symmetrical mathematical row map */
    gap: 12px;
    max-width: 320px;
    margin: 0 auto;
    width: 100%;
    padding: 0 20px;
    box-sizing: border-box; /* Defensive boundary guard isolates sizes from stretching adjacent panels */
}


/* ==========================================================================
   TACTILE REACTION INTERFACES & GLOBAL APPLICATION STATE UTILITIES
   ========================================================================== */

/* 1. Custom CSS Utility Helper Class for Global Application Hooks */
.hidden {
    display: none !important; /* Enforces absolute visibility suppression across state engines */
}

/* 2. Individual Numpad Button Mechanical Key Press Simulation */
.numpad button {
    transition: transform 0.08s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.1s ease !important;
    -webkit-user-select: none;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
}

/* HIGH-VELOCITY TACTILE TRANSFORMATION TRACK */
.numpad button:active {
    /* FIXED FOR GIRA IDENTITY BRAND COHESION:
       Swapped raw desktop office light-gray paint for rich corporate Oxblood Brown (#813F0B).
       This flashes distinct mechanical color feedback loops under driver finger contact lines instantly! */
    background-color: #813F0B !important; 
    color: #ffffff !important;
    border-color: var(--primary) !important; /* Orange outline fires concurrently on impact */
    transform: scale(0.93) !important; /* Slightly increased scale collapse depth for true haptic feel */
}

/* 3. Bottom Terminal Execution Command Actions Panel Structure Layout */
.numpad-actions {
    margin-top: auto; /* Pushes the transaction action sheets cleanly to the absolute base of device screen frames */
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 0 20px 24px 20px; /* Enhanced internal padding grids maintain clean padding boundaries on taller displays */
    box-sizing: border-box;
    width: 100%;
    max-width: 320px;
    margin-left: auto;
    margin-right: auto;
}

/* ==========================================================================
   TACTILE NUMPAD METRICS & STAND-ALONE BRAND COMPONENT BUTTONS
   ========================================================================== */

/* 1. Styling the actual numpad grid keypad buttons */
.numpad button {
    padding: 15px;
    font-size: 1.5rem;
    font-weight: 700; /* Rich font-weight enhancement optimizes outdoor visibility */
    border-radius: 12px;
    cursor: pointer;
    box-sizing: border-box;
    transition: transform 0.08s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.1s ease, border-color 0.1s ease !important;
    
    /* GIRA CORPORATE STYLE TRANSFORMATION */
    background: #0f172a !important; /* Replaced flat desktop white with premium slate-black */
    border: 1px solid #1e293b !important; /* Subtle slate border outlines key cells cleanly */
    color: #ffffff !important; /* High-contrast white glyph text entries */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
}

/* 2. Core Base Class for stand-alone layout wrappers */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 16px; 
    border-radius: 12px;
    border: none;
    font-size: 1.05rem; 
    font-weight: 700;
    color: #ffffff !important;
    cursor: pointer;
    margin-bottom: 8px;
    box-sizing: border-box;
    transition: filter 0.15s ease, transform 0.1s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.1s ease;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.15);
}

/* HAPTIC FEEDBACK CAPTURE FOR STAND-ALONE BUTTON INTERACTIONS */
.btn:active {
    opacity: 0.9 !important;
    transform: scale(0.97) !important; /* Snaps tight against the finger to simulate true hardware click depths */
    filter: brightness(0.85); /* Slightly dims colors to signal execution triggers instantly */
}


/* ==========================================================================
   TRANSACTION BUTTON MAP OVERWRITES & HIGH-UTILITY FOOTER MATRICES
   ========================================================================== */

/* 1. Add space between the last row of numbers and the M-Pesa button */
.payment-actions {
    margin-top: 30px; /* Adjust this value (20px to 40px) to your liking */
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: 100%;
    max-width: 350px; /* Keeps buttons aligned with the numpad width */
    padding: 0 20px 40px 20px; /* Added horizontal buffer padding arrays to protect mobile alignment grids */
    box-sizing: border-box;
}

/* Optional: Make the buttons feel more like a footer */
.btn {
    margin-bottom: 5px; /* Small gap between M-Pesa and Cash buttons */
}

/* ==========================================================================
   PRODUCTION HARDENED BRAND-ALIGNED COLOR-MAP EXTENSIONS
   ========================================================================== */

/* A. Unified Gira Quick-Pay M-Pesa Button Override */
.btn-mpesa { 
    /* FIXED FOR GIRA IDENTITY BRAND COHESION:
       Swapped raw Safaricom green paint for your premium corporate orange-to-brown linear gradient track */
    background: linear-gradient(135deg, #FC6600, #813F0B) !important; 
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

/* B. Manual Cash Settlement Row Controller */
.btn-cash { 
    background-color: #1e293b !important; /* Premium Slate-Black material shell overlay background */
    border: 1px solid #334155 !important;
}

/* C. Portal Universal Core Primary Trigger */
.btn-primary { 
    background-color: var(--primary) !important; /* Locks background natively to Gira Orange (#FC6600) */
}

/* D. Absolute Pitch-Black Admin Access Anchor */
.btn-dark { 
    background-color: #020617 !important; 
    border: 1px solid #1e293b !important;
}

/* E. Carrier Please Call Me (PCM) USSD Launcher Row */
.btn-pcm { 
    background-color: #475569 !important; /* Slate grey communication theme coloring */
}
.btn-pcm:active { 
    background-color: #334155 !important; 
}

/* F. Special Administrative Reversed Layout Trigger Modifier */
.btn-reverse { 
    background-color: #1e293b !important; 
    border: 1px dashed #334155 !important;
    font-size: 0.8rem; 
}

/* G. Contact Integration Vertical Grid Stack Layouts */
.btn-group-vertical {
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 100%;
    flex-shrink: 0;
    box-sizing: border-box;
}

/* ==========================================================================
   TOP ROW COMMUNICATION FLEX CARDS & BRANDED HEADER NAVIGATION
   ========================================================================== */

/* 1. Ensure Call/WA buttons share the top row evenly */
.btn-top-row {
    display: flex;
    gap: 6px;
    width: 100%;
    box-sizing: border-box;
}

/* Fixes the width conflict by overriding the global button block properties here safely */
.btn-top-row .btn {
    flex: 1; 
    width: auto;
    padding: 10px 4px;
    margin-bottom: 0;
}

/* 2. Header Mobile Navigation Master Bar Container */
.nav-bar {
    display: flex !important;
    justify-content: space-between !important; /* Spreads items evenly to opposite edges */
    align-items: center !important;     /* Vertically centers buttons with text lines */
    box-sizing: border-box !important;
    width: 100% !important;
    padding: 6px 12px 14px 12px !important; /* Balanced internal buffer padding boundaries */
    background-color: transparent !important;
    
    /* BRANDED UNDERLINE BARRIER: Uses your rich corporate Oxblood Brown as an active boundary line */
    border-bottom: 2px solid #813F0B !important; 
}


/* 2. Branded Typography Sub-Stack Controller
   Guarantees that your main title and slogan stay stacked vertically on small viewports */
.brand-identity-stack {
    display: flex !important;
    flex-direction: column !important;
    gap: 3px !important; /* Comfortable vertical spacing gap separating title from slogan tag */
    text-align: left !important;
    overflow: hidden !important;
}


/* 2. Premium Pill-Shaped Branded Access Trigger Button Button */
.nav-btn {
    color: #ffffff !important;
    border: none !important;
    padding: 8px 18px; /* Enhanced horizontal padding creates an authentic pill geometry aspect ratio */
    border-radius: 20px;
    font-size: 0.85rem;
    font-weight: 700; /* Rich bold font metrics maximize outdoor sunlight readability */
    cursor: pointer;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.1s cubic-bezier(0.4, 0, 0.2, 1), filter 0.15s ease !important;
    -webkit-tap-highlight-color: transparent;

    /* GIRA CORPORATE STYLE TRANSFORMATION */
    /* Swapped out raw monochrome slate backgrounds for your custom orange-to-brown linear gradient track */
    background: linear-gradient(135deg, #FC6600, #813F0B) !important; 
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
}

/* HIGH-VELOCITY SMARTPHONE HAPTIC SIMULATION TRACK */
.nav-btn:active {
    transform: scale(0.95) !important; /* Collapses scale boundaries dynamically on impact to signal contact triggers */
    filter: brightness(0.85); /* Dims backlights instantly on click actions */
}


/* ==========================================================================
   COURIER CORE APP DASHBOARD TERMINALS & SYSTEM LOADING OVERLAYS
   ========================================================================== */

/* 1. Main Driver Portal Workspace Sub-Canvas Container */
#rider-app {
    padding: 20px;
    text-align: center;
    min-height: 80vh;
    border-radius: 24px 24px 0 0;
    margin-top: 20px;
    box-sizing: border-box;
    width: 100%;
    
    /* GIRA CORPORATE BRAND IDENTITY RE-MAPPING */
    background: #020617 !important; /* Replaced flat desktop white with deep onyx black base */
    border: 1px solid #1e293b !important;
    border-bottom: none !important; /* Lets the base melt cleanly out of the bottom viewport edges */
    box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.4);
}

/* 2. Primary Courier Layout Operational Actions Wrapper Group */
.rider-actions {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 30px;
    width: 100%;
    max-width: 350px; /* Aligns maximum width layout footprints evenly with terminal grids */
    margin-left: auto;
    margin-right: auto;
    box-sizing: border-box;
}

/* 3. Global Cloud Transaction Processing Loading Overlay Backdrop Scrim */
#loading-overlay {
    position: fixed;
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%;
    background: rgba(2, 6, 23, 0.85) !important; /* Pitch-black alpha tracking layer enhances contrast flags */
    backdrop-filter: blur(8px) !important; /* Increased diffusion layer completely isolates focal planes */   
    z-index: 500;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
}

/* 4. High-Performance Hardware-Accelerated Vector Spinner */
.spinner {
    width: 48px;
    height: 48px;
    border: 4px solid rgba(255, 255, 255, 0.1); /* Subtle underlying track layer loop */
    border-top: 4px solid #FC6600 !important; /* Vibrant Gira Orange sweep head indicating active calculations */ 
    border-radius: 50%;
    animation: spin 0.75s cubic-bezier(0.4, 0, 0.2, 1) infinite; /* Optimized bezier curve reduces tracking stutter */
    will-change: transform; /* Instructs mobile GPU processors to cache vectors to stop framerate lag spikes */
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* 5. Cloud Gateway Real-Time Operational Feedback Micro-Copy Text */
.loading-text {
    margin-top: 20px;
    font-size: 1rem;
    font-weight: 800; /* Extra bold weighting maximizes readability on smartphone screens */
    color: #ffffff !important;
    letter-spacing: 0.01em;
    text-align: center;
    max-width: 85%;
    line-height: 1.4;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
}

/* 6. Checkout Process Action Panel Footer Container Box */
.payment-container {
    padding-bottom: 40px; /* Essential padding safety guard blocks mobile navigation device home-bar cutoffs */
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    box-sizing: border-box;
}


/* ==========================================================================
   AUTHENTICATION SHIELDS, FORM CONTROLS & GLOBAL FOOTER MATRICES
   ========================================================================== */

/* 1. Central Overlay Authentication Wrappers Backdrop Scrims */
#login-modal, #admin-login-modal {
    position: fixed;
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%;
    background: rgba(2, 6, 23, 0.85) !important; /* Pitch-black alpha tracking layer enhances focus masking */
    backdrop-filter: blur(8px) !important; /* Maximizes blur diffusion to isolate visual focal fields completely */
    z-index: 600; /* High-level z-index architecture prevents element bleeding loops */
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    box-sizing: border-box;
}

/* 2. Secure Portal Access Form Window Container Shell */
.login-box {
    padding: 24px;
    border-radius: 20px;
    width: 100%;
    max-width: 360px;
    text-align: center;
    box-sizing: border-box;
    box-shadow: var(--card-shadow);
    
    /* GIRA CORPORATE BRAND INTERFACE TUNING */
    background: #0f172a !important; /* Charcoal material surface preserves dark-room visibility */
    border: 2px solid #813F0B !important; /* Rigid structural bounding line utilizing rich Gira brown */
}

/* 3. Hardened Security Input Character Form Fields Grid Cell */
.login-input {
    width: 100%;
    padding: 14px;
    margin: 8px 0;
    border-radius: 10px;
    font-size: 16px !important; /* Enforces strict 16px boundaries to freeze browser text auto-zoom layout breaking bugs on Apple iOS viewports */
    box-sizing: border-box; 
    background-color: #020617 !important; /* Recesses text wells deep into base onyx black shadows */
    border: 1px solid #1e293b !important; /* Subtle slate container outlines */
    color: #ffffff !important; /* High-contrast crisp white typography text entries */
    font-weight: 600;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

/* INPUT FOCUS STATE FEEDBACK ANCHORS */
.login-input:focus {
    outline: none !important;
    border-color: var(--primary) !important; /* Active indicator wells flash Gira Orange (#FC6600) upon field selections */
    box-shadow: 0 0 10px rgba(252, 102, 0, 0.15);
}

/* 4. Text-Style Interface Sub-Action Interaction Trigger Link Link */
.btn-text {
    background: none !important;
    border: none !important;
    color: #94a3b8 !important; /* Matte-slate gray minimizes secondary link noise signatures */
    font-size: 0.85rem;
    font-weight: 700;
    cursor: pointer;
    margin-top: 14px;
    padding: 8px 16px;
    border-radius: 8px;
    display: inline-block;
    transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1);
    text-decoration: underline;
    text-decoration-color: rgba(148, 163, 184, 0.4);
    -webkit-tap-highlight-color: transparent;
}

/* RESPONSIVE HOVER MATRIX HOOKS */
@media (hover: hover) {
    .btn-text:hover {
        color: var(--primary) !important; /* Text highlights brightly to Gira Orange on cursor hover loops */
        background-color: #1e293b !important; /* Yields subtle slate background container highlights */
        text-decoration: none !important;
    }
}

/* HIGH-SPEED TACTILE RESPONSE HOOK FOR CELL PHONES */
.btn-text:active {
    transform: scale(0.95) !important; /* Shrinks container boundaries slightly to give quick physical button compression feedback */
    color: var(--primary) !important;
    background-color: #1e293b !important;
}

/* 5. Standardized Page Footer Layout Flow Container Grid */
footer {
    width: 100%;
    margin-top: 40px; 
    padding: 24px 0;
    box-sizing: border-box;
    border-top: 1px solid #1e293b; /* Appends clean terminal separator tracks beneath content grids safely */
    text-align: center;
}


/* ==========================================================================
   OFFLINE BOUNDARY LOCATION GRIDS & AVATAR MATERIAL SPACE STYLES
   ========================================================================== */

/* 1. Offline/Locked Building Layout Cell Container */
.card.locked {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px; 
    cursor: not-allowed;
    
    /* GIRA SYSTEM COHESION REDESIGN */
    /* Shifts background image into an eye-friendly, deeply recessed charcoal-black tone */
    filter: grayscale(100%) brightness(40%) !important; 
    /* Replaced old light-gray borders with a thick, dashed Oxblood Crimson Brown divider boundary line */
    border: 2px dashed #813F0B !important; 
}

/* Prevent accidental touch scaling clicks on locked building nodes */
.card.locked:active {
    transform: none !important;
    border-color: #813F0B !important;
    box-shadow: var(--card-shadow) !important;
}

/* 2. Hardware-Accelerated Vector Lock Indicator Icon */
.lock-icon {
    font-size: 1.75rem;
    margin-bottom: 4px;
    z-index: 2;
    /* Uses hardware accelerated composition pathways cleanly to reduce frame stutter on small devices */
    animation: lockPulse 2.5s cubic-bezier(0.4, 0, 0.2, 1) infinite;
    will-change: transform, opacity;
}

.card.locked h3,
.card.locked small {
    margin: 0;
    position: relative;
    z-index: 2; /* Visibility Fix: Forces micro-copy above dark background scrim overlays cleanly */
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.95);
}

.card.locked h3 {
    font-size: 1.05rem;
    font-weight: 800;
    color: #ffffff !important;
}

/* 3. Offline Status Warning Notice Micro-Copy */
.card.locked small {
    font-weight: 800;
    color: #FC6600 !important; /* Locks background natively to Vibrant Gira Orange (#FC6600) text styling */
    font-size: 0.75rem;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

@keyframes lockPulse {
    0%, 100% { transform: scale(1); opacity: 0.7; }
    50% { transform: scale(1.08); opacity: 1; filter: drop-shadow(0 0 4px rgba(252, 102, 0, 0.3)); }
}

/* ==========================================================================
   AVATAR & GLOBAL SPACING ADJUSTMENTS
   ========================================================================== */

/* 4. Courier Profile Picture Media Canvas Framework */
.rider-card img {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid #1e293b; /* Subtle slate border details edge paths cleanly */
}

/* 5. Space Adjustment Anchor */
.rider-card {
    margin-top: 16px; 
}


/* ==========================================================================
   INPUT SYSTEM GLOBAL STANDARDIZATION & VISUAL WELL MAPPING
   ========================================================================== */

/* 1. Universal Input Standardization Rules (Authentication, Search, and Billing Form Cells) */
.login-input, 
#app-search, 
#customer-phone {
    font-size: 16px !important; /* CRITICAL ACCESSIBILITY FIX: Enforces strict 16px boundaries to completely freeze invasive automatic font auto-zoom scaling layout breaking bugs on Apple iOS viewports */
    width: 100%;
    padding: 14px 16px; /* Balanced interior spatial padding boundaries */
    border-radius: 12px;
    font-weight: 600;
    letter-spacing: 0.01em;
    box-sizing: border-box; 
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
    
    /* GIRA SYSTEM COHESION REDESIGN */
    background-color: #020617 !important; /* Recesses all text entry fields deep into your base onyx black shadow layers */
    border: 1px solid #1e293b !important; /* High-utility subtle slate container outlines */
    color: #ffffff !important; /* High-contrast pristine copy white text entries */
}

/* UNIVERSAL ENTRY FOCUS FEEDBACK ACCENTS */
.login-input:focus, 
#app-search:focus, 
#customer-phone:focus {
    outline: none !important;
    border-color: var(--primary) !important; /* Active text boxes flash your vibrant Gira Orange (#FC6600) upon layout cell selection! */
    box-shadow: 0 0 10px rgba(252, 102, 0, 0.15);
}

/* 2. Global Traversal Search Filter Engine Deck Box Element */
#app-search {
    margin-top: 12px; 
    margin-bottom: 4px;
    box-shadow: var(--card-shadow); /* Applies standard high-contrast charcoal shadows instead of light-gray frames */
}




/* ==========================================================================
   OTP CONTROL PANEL VIEW DIALOG & ACCOUNT RECOVERY SCREEN SCRIMS
   ========================================================================== */
#otp-modal {
    position: fixed;
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%;
    background: rgba(2, 6, 23, 0.85) !important; /* Pitch-black alpha tracking layer enhances focus masking */
    backdrop-filter: blur(8px) !important; /* Maximizes blur diffusion to isolate visual focal fields completely */
    z-index: 650; /* Sits naturally higher than standard login interfaces to isolate recovery tracks */
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    box-sizing: border-box;
}

/* ==========================================================================
   PREMIUM SEARCH INPUT BAR STYLING REFINEMENTS
   ========================================================================== */
#app-search {
    width: 100%;
    max-width: 500px;
    padding: 14px 16px;
    margin: 15px auto 0 auto;
    display: block;
    border-radius: 12px;
    font-family: 'Inter', sans-serif;
    font-size: 16px !important; /* Critical Accessibility Fix: Halts auto-zoom scaling bugs on iOS/Android viewports */
    box-sizing: border-box;
    outline: none;
    font-weight: 600;
    
    /* GIRA BRAND IDENTITY MATCH OVERWRITES */
    background-color: #020617 !important; /* Recesses all text entry fields deep into base onyx black shadows */
    border: 2px solid #1e293b !important; /* High-utility subtle slate container outlines */
    color: #ffffff !important; /* High-contrast pristine copy white text entries */
    box-shadow: var(--card-shadow); /* Applies standard high-contrast charcoal shadows instead of light-gray frames */
    transition: border-color 0.2s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Dynamic Interactive Focus Highlight States */
#app-search:focus {
    background-color: #020617 !important;
    border-color: var(--primary) !important; /* Active text boxes flash your vibrant Gira Orange (#FC6600) upon layout cell selection! */
    box-shadow: 0 4px 14px rgba(252, 102, 0, 0.25) !important; 
}

/* Adjust modern placeholder styling text colors cleanly */
#app-search::placeholder {
    color: #94a3b8 !important; /* Matte-slate gray placeholder matching your clean user inputs layout */
    font-weight: 500;
}

/* ==========================================================================
   CUSTOMER PHONE NUMBER ENTRY SYSTEM - TERMINAL REFINEMENTS
   ========================================================================== */

/* 1. Master Structural Container Layout Wrapper */
.payment-container .input-group-row,
.payment-container div:has(> #customer-phone) {
    width: 100%;
    max-width: 320px; /* Forces input box edges to align perfectly with your numpad layout grid limits */
    margin: 20px auto 10px auto; /* Creates comfortable vertical breathing room beneath your header line divider */
    display: flex;
    flex-direction: column; /* Stacks the label text neatly directly above the numeric input box */
    gap: 8px; /* Balanced spacing gap separating label text from input bounding lines */
    padding: 0 20px;
    box-sizing: border-box;
}

/* 2. Form Structural Field Identification Label Copy */
.payment-container label[for="customer-phone"],
.payment-container div:has(> #customer-phone) label {
    color: #94a3b8 !important; /* Premium slate-grey copy tint optimizes outdoor readability */
    font-size: 0.85rem;
    font-weight: 700;
    text-transform: uppercase; /* Converts micro-copy into a clean, modern layout tag indicator */
    letter-spacing: 0.05em;
    text-align: left; /* Aligns description cleanly flush to the left boundary of your input bar */
}

/* 3. Hardened Security Input Well Object Controls */
#customer-phone {
    width: 100%;
    padding: 14px 16px;
    border-radius: 12px;
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    font-size: 16px !important; /* MOBILE INTERFACE ACCESS SECURITY GUARD: Freezes iOS safari text auto-zoom layout breaking anomalies */
    font-weight: 600;
    letter-spacing: 0.03em;
    box-sizing: border-box;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
    
    /* GIRA CORPORATE BRAND VISUAL BALANCING MATCH */
    background-color: #020617 !important; /* Completely strips harsh unstyled white backgrounds, embedding the box into pitch-black base shadows */
    border: 1px solid #1e293b !important; /* High-utility subtle slate structural bounding frames */
    color: #ffffff !important; /* Renders customer digit entries cleanly in high-contrast pristine white copy text */
}

/* 4. Dynamic Interactive Well Selection Focus Highlights */
#customer-phone:focus {
    outline: none !important;
    border-color: #FC6600 !important; /* Active entry fields glow instantly in brilliant Gira Orange upon touchscreen selection! */
    box-shadow: 0 0 12px rgba(252, 102, 0, 0.25);
    background-color: #020617 !important;
}

/* 5. Custom Mobile Input Placeholder Text Formatting */
#customer-phone::placeholder {
    color: #475569 !important; /* Dims target hint numbers to a subtle slate-tint value to prevent layout confusion */
    font-weight: 500;
    font-size: 0.95rem;
}


/* ==========================================================================
   GLOBAL UTILITY SYSTEM APP LAYER LOCKS
   ========================================================================== */
/* Add this rule at the absolute bottom of style.css */
.hidden {
    display: none !important; /* Enforces absolute visibility suppression across state engines */
}


/* ==========================================================================
   PRODUCTION HARDENED MOBILE UTILITY OVERRIDES & ACCESSIBILITY PATCHES
   ========================================================================== */

/* 1. OUTDOOR READABILITY UPGRADE: Hardens text labels to maximize contrast outdoors */
.payment-container label,
.payment-container div:has(> #customer-phone) label,
.rider-actions small,
#admin-panel label {
    color: var(--primary, #FC6600) !important; /* Forces tags to flash vibrant corporate orange */
    font-weight: 800 !important; /* Thickens typography weighting to block outdoor glare issues */
    font-feature-settings: "tnum" 1;
    letter-spacing: 0.06em !important;
}

/* 2. DYNAMIC CLICK FEEDBACK PATCH FOR MANUAL CASH TRIGGER ROWS */
.btn-cash {
    background-color: #1e293b !important;
    border: 1px solid #334155 !important;
    position: relative !important;
    z-index: 5 !important;
    pointer-events: auto !important;
    transition: transform 0.1s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.15s ease !important;
}

/* TACTILE SELECTION ACTION HOOK: Flashes an indicator grey shade under finger pressure instantly */
.btn-cash:active {
    transform: scale(0.96) !important; /* Snaps tight against the finger to simulate structural key depths */
    background-color: #334155 !important; /* brightens the surface to signal active contact */
    border-color: var(--primary, #FC6600) !important; /* Halo orange border pops up on contact impacts */
}

/* 3. HARDENED DOORSTEP LOGGING LAYOUT ADJUSTMENTS */
.payment-container {
    padding: 0 20px 48px 20px !important; /* Safe padding boundary blocks device home-bar cutoffs */
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    box-sizing: border-box;
}

/* Optimizes the button spacing tracks when customer input wells are hidden */
.payment-actions {
    margin-top: 16px !important; /* Tightens padding gaps to pull items together cleanly on small viewports */
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: 100%;
    max-width: 320px; /* Locks width footprints to snap evenly with numeric terminals grids */
    box-sizing: border-box;
}

/* 4. DRIVER BALANCE ACCENT BADGES TUNING */
#active-orders, #display-amount {
    color: var(--primary, #FC6600) !important;
    font-weight: 800;
    font-feature-settings: "tnum" 1, "lnum" 1 !important; /* Enforces absolute tabular digit grids */
}


/* ==========================================================================
   MASENO HUBTagLINE TYPOGRAPHY CONTROLLERS & HOVER INTERACTION TUNING
   ========================================================================== */

/* Assigns clear typography scaling and matte-slate grey coloring to your slogan text */
.brand-identity-stack p {
    margin: 0 !important;
    font-size: 0.76rem !important; /* Compact, modern layout sizing protects phone aspect ratios */
    font-weight: 700 !important;   /* Thick text weighting ensures legibility outdoors */
    color: #94a3b8 !important;     /* Matte-slate gray minimizes secondary link noise signatures */
    text-transform: uppercase !important; /* Converts text into clean tracking labels */
    letter-spacing: 0.04em !important;
    line-height: 1.2 !important;
    font-family: 'Inter', system-ui, -apple-system, sans-serif !important;
    white-space: nowrap !important; /* Blocks awkward text wrapping or layout drops */
}

/* Premium Pill-Shaped Branded Access Trigger Button Button Overwrite */
.nav-btn {
    color: #ffffff !important;
    border: none !important;
    padding: 8px 16px !important; /* Enhanced horizontal padding creates an authentic pill geometry aspect ratio */
    border-radius: 20px !important;
    font-size: 0.85rem !important;
    font-weight: 700 !important; /* Rich bold font metrics maximize outdoor sunlight readability */
    cursor: pointer !important;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2) !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: transform 0.1s cubic-bezier(0.4, 0, 0.2, 1), filter 0.15s ease !important;
    -webkit-tap-highlight-color: transparent !important;
    flex-shrink: 0 !important; /* Blocks your portal button from squishing on tight phone screens */

    /* GIRA CORPORATE GRADIENT BACKGROUND MATRIX OVERWRITE */
    background: linear-gradient(135deg, #FC6600, #813F0B) !important; 
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
}