/* ==========================================================
   sharemyride.bike — design system
   Concept: the shared ride as a boarding pass — route codes,
   perforated ticket cards, a departures-board hero.
   ========================================================== */

:root{
    /* color */
    --ink:        #16213E;   /* deep night-road navy — headers, nav, footer */
    --ink-soft:   #2C3A5E;
    --paper:      #F2EEE2;   /* ticket paper */
    --paper-deep: #E8E1CE;
    --white:      #FFFFFF;
    --marigold:   #FF9F1C;   /* route-marker orange — the one accent color */
    --marigold-deep:#E8850A;
    --route-green:#1E9E64;   /* "confirmed / verified" signal only */
    --route-green-soft:#E4F5EC;
    --slate:      #5C6478;
    --slate-soft: #8790A0;
    --line:       #DCD4BC;   /* hairline / perforation */
    --danger:     #E14B4B;

    /* elevation */
    --shadow-sm: 0 3px 10px rgba(22,33,62,.06);
    --shadow-md: 0 12px 30px rgba(22,33,62,.10);
    --shadow-lg: 0 22px 50px rgba(22,33,62,.16);

    /* shape */
    --radius-sm: 10px;
    --radius-md: 16px;
    --radius-lg: 26px;

    /* type */
    --font-display:'Bricolage Grotesque', 'Segoe UI', sans-serif;
    --font-body:'Inter', 'Segoe UI', sans-serif;
    --font-mono:'IBM Plex Mono', ui-monospace, monospace;
}

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

html{
    scroll-behavior:smooth;
}

body{
    background:var(--paper);
    color:var(--ink);
    font-family:var(--font-body);
    -webkit-font-smoothing:antialiased;
}

h1,h2,h3,h4{
    font-family:var(--font-display);
    color:var(--ink);
    letter-spacing:-0.01em;
}

a{ color:inherit; }

button, input{
    font-family:var(--font-body);
}

button{
    font-family:var(--font-body);
}

::selection{
    background:var(--marigold);
    color:var(--ink);
}

:focus-visible{
    outline:2px solid var(--marigold);
    outline-offset:2px;
}

@media (prefers-reduced-motion: reduce){
    *{ animation:none !important; transition:none !important; }
}

/* small mono "route code" utility, used for eyebrows/labels */
.route-code{
    font-family:var(--font-mono);
    letter-spacing:.08em;
    text-transform:uppercase;
}

.app{
    display:flex;
    min-height:100vh;
}

/* ==========================================================
   SIDEBAR — styled like a transit line, stops connected by
   a route line, current stop marked in marigold.
   ========================================================== */

.sidebar{
    width:260px;
    background:var(--ink);
    padding:26px 20px;
    color:var(--paper);
}

.logo-box{
    text-align:center;
    margin-bottom:30px;
    padding-bottom:22px;
    border-bottom:1px dashed rgba(242,238,226,.2);
}

.logo-box img{
    width:120px;
    filter:brightness(0) invert(1);
}

.logo-box h2{
    color:var(--white);
    font-size:19px;
    margin-top:12px;
    letter-spacing:-0.01em;
}

.logo-box p{
    font-family:var(--font-mono);
    font-size:11px;
    letter-spacing:.06em;
    text-transform:uppercase;
    color:var(--marigold);
    margin-top:6px;
}

.sidebar ul{
    list-style:none;
    position:relative;
    padding-left:6px;
}

.sidebar ul::before{
    content:"";
    position:absolute;
    left:11px;
    top:10px;
    bottom:10px;
    width:1px;
    background:rgba(242,238,226,.18);
}

.sidebar li{
    position:relative;
    padding:13px 14px 13px 30px;
    margin-bottom:4px;
    border-radius:var(--radius-sm);
    cursor:pointer;
    display:flex;
    gap:12px;
    align-items:center;
    font-weight:600;
    font-size:14.5px;
    color:rgba(242,238,226,.75);
    transition:.2s ease;
}

.sidebar li::before{
    content:"";
    position:absolute;
    left:7px;
    top:50%;
    width:9px;
    height:9px;
    border-radius:50%;
    background:var(--ink-soft);
    border:2px solid rgba(242,238,226,.3);
    transform:translateY(-50%);
    transition:.2s ease;
    z-index:1;
}

.sidebar li i{
    font-size:15px;
    width:16px;
}

.sidebar li:hover{
    background:rgba(255,255,255,.06);
    color:var(--white);
}

.active{
    background:rgba(255,159,28,.14) !important;
    color:var(--white) !important;
}

.active::before{
    background:var(--marigold) !important;
    border-color:var(--marigold) !important;
    box-shadow:0 0 0 4px rgba(255,159,28,.18);
}

.verify-card{
    margin-top:28px;
    background:var(--ink-soft);
    border:1px dashed rgba(242,238,226,.25);
    color:var(--paper);
    padding:20px;
    border-radius:var(--radius-md);
    text-align:center;
}

.verify-card h4{
    color:var(--white);
    font-size:14px;
    text-transform:uppercase;
    letter-spacing:.04em;
    margin-bottom:8px;
}

.verify-card p{
    font-size:13px;
    color:rgba(242,238,226,.7);
    line-height:1.6;
}

/* ==========================================================
   MAIN / TOPBAR
   ========================================================== */

.main{
    flex:1;
    padding:22px 28px;
}

.topbar{
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-bottom:22px;
    background:var(--white);
    padding:14px 22px;
    border-radius:var(--radius-md);
    box-shadow:var(--shadow-sm);
}

.nav-links a{
    text-decoration:none;
    margin-right:30px;
    font-weight:600;
    font-size:14.5px;
    color:var(--ink);
    padding-bottom:4px;
    border-bottom:2px solid transparent;
    transition:.2s;
}

.nav-links a:hover{
    border-bottom-color:var(--marigold);
    color:var(--marigold-deep);
}

.login-btn{
    padding:10px 20px;
    background:var(--white);
    border:1.5px solid var(--ink);
    color:var(--ink);
    border-radius:var(--radius-sm);
    cursor:pointer;
    font-weight:600;
    font-size:14px;
    transition:.2s;
}

.login-btn:hover{
    background:var(--ink);
    color:var(--white);
}

.signup-btn{
    padding:10px 20px;
    background:var(--marigold);
    color:var(--ink);
    border:none;
    border-radius:var(--radius-sm);
    cursor:pointer;
    margin-left:10px;
    font-weight:700;
    font-size:14px;
    transition:.2s;
}

.signup-btn:hover{
    background:var(--marigold-deep);
    color:var(--white);
}

#dropdown{
    background:var(--white);
    border-radius:var(--radius-md);
    box-shadow:var(--shadow-lg);
    overflow:hidden;
    border:1px solid var(--paper-deep);
}

.dropdown-link{
    display:block;
    padding:14px 16px;
    text-decoration:none;
    color:var(--ink);
    font-weight:600;
    font-size:14px;
    transition:.2s;
    border-bottom:1px solid var(--paper);
}

.dropdown-link:hover{
    background:var(--paper);
}

.dropdown-link.danger{
    color:var(--danger);
    border-bottom:none;
}

.menu-btn{
    display:none;
    background:none;
    border:none;
    font-size:24px;
    cursor:pointer;
    color:var(--ink);
}

.layout{
    display:grid;
    grid-template-columns:1.95fr 1.05fr;
    gap:26px;
}

/* ==========================================================
   HERO — departures-board thesis: a shared route, front and center
   ========================================================== */

.hero{
    min-height:640px;
    border-radius:var(--radius-lg);
    background-image:url("../assets/images/hero.png");
    background-size:cover;
    background-position:70% center;
    background-repeat:no-repeat;
    position:relative;
    overflow:hidden;
    box-shadow:var(--shadow-lg);
}

.hero::before{
    content:"";
    position:absolute;
    left:0;
    top:0;
    width:52%;
    height:100%;
    background:linear-gradient(
        100deg,
        rgba(22,33,62,.94) 0%,
        rgba(22,33,62,.86) 45%,
        rgba(22,33,62,0) 100%
    );
}

.hero-overlay{
    position:absolute;
    left:48px;
    top:48px;
    width:360px;
    z-index:5;
}

.hero-eyebrow{
    display:inline-flex;
    align-items:center;
    gap:8px;
    font-family:var(--font-mono);
    font-size:12px;
    letter-spacing:.1em;
    text-transform:uppercase;
    color:var(--marigold);
    background:rgba(255,159,28,.12);
    border:1px dashed rgba(255,159,28,.5);
    padding:7px 14px;
    border-radius:30px;
    margin-bottom:22px;
}

.hero-overlay h1{
    font-size:56px;
    line-height:1.04;
    font-weight:800;
    color:var(--white);
    margin-bottom:14px;
}

.hero-overlay span{
    color:var(--marigold);
}

.hero-overlay p{
    font-size:15.5px;
    line-height:1.75;
    max-width:310px;
    color:rgba(242,238,226,.82);
    font-weight:400;
    margin-top:14px;
}

.hero-buttons{
    display:flex;
    gap:12px;
    margin-top:28px;
}

.find-btn{
    background:var(--marigold);
    color:var(--ink);
    border:none;
    padding:15px 26px;
    border-radius:var(--radius-sm);
    cursor:pointer;
    font-weight:700;
    font-size:14.5px;
    transition:.2s;
}

.find-btn:hover{
    background:var(--marigold-deep);
    color:var(--white);
    transform:translateY(-2px);
}

.offer-btn{
    background:transparent;
    color:var(--white);
    border:1.5px solid rgba(242,238,226,.4);
    padding:15px 26px;
    border-radius:var(--radius-sm);
    cursor:pointer;
    font-weight:700;
    font-size:14.5px;
    transition:.2s;
}

.offer-btn:hover{
    border-color:var(--white);
    background:rgba(255,255,255,.08);
    transform:translateY(-2px);
}

/* ==========================================================
   STATS — read like a ticket-stub summary strip
   ========================================================== */

.stats{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:16px;
    margin-top:-46px;
    position:relative;
    z-index:20;
    padding:0 16px;
}

.stat{
    background:var(--white);
    padding:22px 18px;
    border-radius:var(--radius-md);
    text-align:center;
    box-shadow:var(--shadow-md);
    border-top:3px solid var(--marigold);
}

.stat h2{
    font-family:var(--font-mono);
    font-size:28px;
    font-weight:600;
    color:var(--ink);
    margin-bottom:4px;
}

.stat p{
    font-size:13px;
    color:var(--slate);
    text-transform:uppercase;
    letter-spacing:.04em;
}

/* ==========================================================
   RIDES — filters, search, and the signature ticket card
   ========================================================== */

.rides-section{
    margin-top:34px;
}

.rides-section h2{
    margin-bottom:18px;
    font-size:30px;
    display:flex;
    align-items:center;
    gap:12px;
}

.rides-section h2::before{
    content:"";
    width:10px;
    height:10px;
    border-radius:50%;
    background:var(--route-green);
    display:inline-block;
    box-shadow:0 0 0 4px var(--route-green-soft);
}

.ride-filters{
    display:flex;
    gap:10px;
    margin:20px 0;
    flex-wrap:wrap;
}

.filter{
    display:flex;
    align-items:center;
    gap:8px;
    padding:11px 18px;
    border:1.5px solid var(--paper-deep);
    background:var(--white);
    border-radius:30px;
    cursor:pointer;
    font-weight:600;
    font-size:14px;
    color:var(--ink);
    transition:.2s;
}

.filter img{
    width:18px;
}

.filter:hover{
    border-color:var(--marigold);
}

.filter.active{
    background:var(--ink);
    border-color:var(--ink);
    color:var(--white);
}

.search-filters{
    display:flex;
    gap:10px;
    background:var(--white);
    padding:12px;
    border-radius:var(--radius-md);
    box-shadow:var(--shadow-sm);
    margin-bottom:8px;
}

.search-filters input{
    flex:1;
    padding:12px 14px;
    border:1.5px solid var(--paper-deep);
    border-radius:var(--radius-sm);
    font-size:14px;
    background:var(--paper);
    color:var(--ink);
}

.search-filters input:focus{
    border-color:var(--marigold);
    outline:none;
}

#searchRideBtn{
    background:var(--ink);
    color:var(--white);
    border:none;
    padding:12px 22px;
    border-radius:var(--radius-sm);
    cursor:pointer;
    font-weight:700;
    font-size:14px;
    white-space:nowrap;
    transition:.2s;
}

#searchRideBtn:hover{
    background:var(--marigold);
    color:var(--ink);
}

#clearSearchBtn{
    background:transparent;
    color:var(--slate);
    border:1.5px solid var(--paper-deep);
    padding:12px 18px;
    border-radius:var(--radius-sm);
    cursor:pointer;
    font-weight:600;
    font-size:14px;
    transition:.2s;
}

#clearSearchBtn:hover{
    border-color:var(--danger);
    color:var(--danger);
}

/* --- the ticket: signature ride card ---
   left stub = route + driver, dashed perforation with punched
   circles, right stub = price + book action. Class names are
   kept generic (.ride-card, .route, .ride-bottom, etc.) so any
   dynamically-rendered ride markup automatically matches. */

.ride-card{
    background:var(--white);
    border-radius:var(--radius-lg);
    margin-bottom:20px;
    box-shadow:var(--shadow-md);
    transition:.25s ease;
    position:relative;
    overflow:visible;
}

.ride-card:hover{
    transform:translateY(-3px);
    box-shadow:var(--shadow-lg);
}

.driver-section{
    display:flex;
    align-items:center;
    gap:14px;
    padding:22px 26px 14px;
}

.driver-img,
.ride-avatar{
    width:52px;
    height:52px;
    border-radius:50%;
    border:2px solid var(--paper);
}

.driver-section h3{
    margin:0;
    font-size:17px;
}

.college{
    margin-top:3px;
    color:var(--slate);
    font-size:13px;
}

.rating{
    margin-left:auto;
    background:#FFF4E2;
    color:var(--marigold-deep);
    padding:7px 14px;
    border-radius:30px;
    font-weight:700;
    font-family:var(--font-mono);
    font-size:13px;
}

.route,
.ride-route{
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:6px 26px 22px;
    gap:20px;
}

.location h4{
    margin:0;
    color:var(--ink);
    font-family:var(--font-mono);
    font-size:16px;
    letter-spacing:.01em;
}

.location span{
    color:var(--slate);
    font-size:13px;
}

.route-arrow,
.arrow{
    font-size:22px;
    color:var(--marigold);
    flex-shrink:0;
}

.ride-details{
    flex:1;
    padding:22px 26px 0;
}

.ride-route h4{
    margin:0;
    font-size:18px;
    font-family:var(--font-mono);
}

.ride-route span{
    color:var(--slate);
    font-size:13px;
}

.ride-info{
    display:flex;
    gap:22px;
    margin-top:16px;
    font-size:13.5px;
    color:var(--slate);
    padding:0 26px;
}

.vehicle-small{
    width:18px;
    vertical-align:middle;
    margin-right:5px;
}

/* the perforated cut between route info and the price stub */
.ride-bottom{
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:20px 26px 24px;
    position:relative;
}

.ride-bottom::before{
    content:"";
    position:absolute;
    top:0;
    left:26px;
    right:26px;
    border-top:2px dashed var(--paper-deep);
}

.ride-bottom::after{
    content:"";
    position:absolute;
    top:-11px;
    left:-11px;
    width:22px;
    height:22px;
    border-radius:50%;
    background:var(--paper);
    box-shadow:calc(100% + 22px) 0 0 var(--paper);
}

.ride-tags{
    display:flex;
    flex-wrap:wrap;
    gap:10px;
}

.ride-tags span{
    background:var(--paper);
    padding:8px 14px;
    border-radius:30px;
    display:flex;
    align-items:center;
    gap:6px;
    font-size:13px;
    color:var(--ink-soft);
    font-weight:600;
}

.ride-tags img{
    width:16px;
}

.ride-price-box,
.ride-price{
    text-align:right;
}

.ride-price-box h2,
.ride-price h3{
    color:var(--route-green);
    margin:0;
    font-family:var(--font-mono);
    font-size:24px;
}

.ride-price-box small,
.ride-price span{
    color:var(--slate-soft);
    font-size:12px;
}

.ride-price-box button,
.ride-price button,
.ride-card > button{
    margin-top:10px;
    background:var(--ink);
    color:var(--white);
    border:none;
    padding:11px 20px;
    border-radius:var(--radius-sm);
    cursor:pointer;
    font-weight:700;
    font-size:13.5px;
    transition:.2s;
}

.ride-price-box button:hover,
.ride-price button:hover,
.ride-card > button:hover{
    background:var(--marigold);
    color:var(--ink);
}

/* ==========================================================
   RIGHT PANEL — booking stubs
   ========================================================== */

.right-panel{
    display:flex;
    flex-direction:column;
    gap:18px;
    align-self:start;
}

.offer-card,
.find-card,
.safety-card{
    background:var(--white);
    padding:22px;
    border-radius:var(--radius-lg);
    box-shadow:var(--shadow-sm);
    border-top:3px solid var(--ink);
}

.offer-card h2,
.find-card h2,
.safety-card h2{
    margin-bottom:6px;
    color:var(--ink);
    font-size:21px;
}

.offer-top,
.find-top{
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-bottom:16px;
    gap:12px;
}

.offer-left,
.find-left{
    flex:1;
}

.offer-left p,
.find-left p{
    color:var(--slate);
    margin-top:6px;
    font-size:14px;
    line-height:1.5;
}

.offer-img,
.find-img{
    width:96px;
    height:auto;
    border-radius:var(--radius-sm);
    margin-left:10px;
}

.vehicle-types{
    display:flex;
    gap:10px;
    margin-bottom:16px;
}

.vehicle-types button,
.vehicle{
    flex:1;
    background:var(--paper);
    border:1.5px solid transparent;
    border-radius:var(--radius-sm);
    padding:13px 8px;
    cursor:pointer;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:8px;
    transition:.2s;
}

.vehicle-types button img,
.vehicle img{
    width:30px;
    height:30px;
    object-fit:contain;
}

.vehicle-types button span,
.vehicle span{
    font-size:13px;
    font-weight:600;
    color:var(--ink);
}

.vehicle-types button:hover,
.vehicle:hover{
    border-color:var(--marigold);
}

.vehicle-types button.active,
.vehicle.active{
    background:var(--ink);
    border-color:var(--ink);
}

.vehicle-types button.active span,
.vehicle.active span{
    color:var(--white);
}

.trip-type{
    margin:6px 0 16px;
}

.trip-title,
.gender-title{
    display:block;
    font-family:var(--font-mono);
    font-size:12px;
    text-transform:uppercase;
    letter-spacing:.06em;
    font-weight:600;
    margin-bottom:10px;
    color:var(--slate);
}

.trip-options,
.gender-options{
    display:flex;
    gap:10px;
    margin-bottom:8px;
}

.trip-options label,
.gender-options label{
    flex:1;
    display:flex;
    justify-content:center;
    align-items:center;
    gap:8px;
    padding:12px;
    background:var(--paper);
    border:1.5px solid transparent;
    border-radius:var(--radius-sm);
    cursor:pointer;
    transition:.2s;
    font-size:13.5px;
    font-weight:600;
}

.trip-options label:hover,
.gender-options label:hover{
    border-color:var(--marigold);
}

.trip-options input,
.gender-options input{
    accent-color:var(--marigold);
}

.direction-type{
    margin-bottom:8px;
}

.confirmation-heading{
    margin:22px 0 12px;
    font-size:15px;
    font-weight:700;
    font-family:var(--font-mono);
    text-transform:uppercase;
    letter-spacing:.04em;
    color:var(--slate);
}

.confirmation-cards{
    display:flex;
    flex-direction:column;
    gap:10px;
    margin-bottom:16px;
}

.confirmation-card{
    border:1.5px solid var(--paper-deep);
    border-radius:var(--radius-sm);
    padding:15px 16px;
    cursor:pointer;
    transition:.2s;
    background:var(--white);
}

.confirmation-card:hover{
    border-color:var(--marigold);
}

.confirmation-card.active-card{
    border-color:var(--route-green);
    background:var(--route-green-soft);
}

.confirmation-card h4{
    margin:0 0 6px;
    font-size:14.5px;
}

.confirmation-card p{
    margin:0;
    color:var(--slate);
    font-size:13px;
    line-height:1.5;
}

.confirmation-card small{
    color:var(--route-green);
    font-weight:700;
    font-family:var(--font-mono);
    font-size:11px;
}

.offer-card input,
#from,
#to,
#rideDate,
#rideTime,
#rideSeats,
#ridePrice{
    width:100%;
    padding:12px 14px;
    margin-bottom:12px;
    border:1.5px solid var(--paper-deep);
    border-radius:var(--radius-sm);
    font-size:14px;
    background:var(--paper);
    color:var(--ink);
}

.offer-card input:focus,
#from:focus,
#to:focus,
#rideDate:focus,
#rideTime:focus,
#rideSeats:focus,
#ridePrice:focus{
    border-color:var(--marigold);
    outline:none;
}

.ride-row{
    display:flex;
    gap:12px;
    margin-bottom:12px;
}

.ride-row input{
    flex:1;
    margin-bottom:0;
}

.continue-btn,
#continueBtn{
    width:100%;
    padding:15px;
    background:var(--marigold);
    color:var(--ink);
    border:none;
    border-radius:var(--radius-sm);
    cursor:pointer;
    font-size:15px;
    font-weight:700;
    transition:.2s;
}

.continue-btn:hover,
#continueBtn:hover{
    background:var(--ink);
    color:var(--white);
}

.find-card button,
.find-btn-card{
    width:100%;
    padding:15px;
    background:var(--ink);
    color:var(--white);
    border:none;
    border-radius:var(--radius-sm);
    cursor:pointer;
    margin-top:6px;
    font-size:15px;
    font-weight:700;
    transition:.2s;
}

.find-card button:hover,
.find-btn-card:hover{
    background:var(--marigold);
    color:var(--ink);
}

.safety-card ul{
    list-style:none;
    padding-left:0;
    line-height:1.9;
}

.safety-card li{
    position:relative;
    padding-left:26px;
    font-size:14px;
    color:var(--ink-soft);
}

.safety-card li::before{
    content:"\2713";
    position:absolute;
    left:0;
    top:0;
    width:17px;
    height:17px;
    border-radius:50%;
    background:var(--route-green-soft);
    color:var(--route-green);
    font-size:11px;
    font-weight:700;
    display:flex;
    align-items:center;
    justify-content:center;
    line-height:1;
}

/* ==========================================================
   HOSTED RIDES / EMPTY STATES / MISC PAGES
   ========================================================== */

.page-title{
    margin-bottom:5px;
    font-size:28px;
}

.page-subtitle{
    color:var(--slate);
    margin-bottom:30px;
}

.hosted-ride-card{
    background:var(--white);
    border-radius:var(--radius-lg);
    padding:26px;
    margin-bottom:22px;
    box-shadow:var(--shadow-md);
    border-top:3px solid var(--route-green);
}

.hosted-top{
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-bottom:18px;
}

.ride-status{
    background:var(--route-green-soft);
    color:var(--route-green);
    padding:8px 14px;
    border-radius:30px;
    font-weight:700;
    font-family:var(--font-mono);
    font-size:12.5px;
}

.hosted-details p{
    margin:9px 0;
    font-size:14.5px;
    color:var(--ink-soft);
}

.hosted-buttons{
    display:flex;
    gap:12px;
    margin-top:22px;
}

.edit-btn{
    background:var(--ink);
    color:var(--white);
    border:none;
    padding:12px 18px;
    border-radius:var(--radius-sm);
    cursor:pointer;
    font-weight:600;
    transition:.2s;
}

.edit-btn:hover{ background:var(--marigold); color:var(--ink); }

.cancel-btn{
    background:var(--white);
    color:var(--danger);
    border:1.5px solid var(--danger);
    padding:12px 18px;
    border-radius:var(--radius-sm);
    cursor:pointer;
    font-weight:600;
    transition:.2s;
}

.cancel-btn:hover{ background:var(--danger); color:var(--white); }

.empty-state{
    text-align:center;
    padding:70px 20px;
    color:var(--slate);
}

/* ==========================================================
   FOOTER
   ========================================================== */

.footer{
    width:100%;
    margin-top:44px;
    background:var(--ink);
    color:var(--white);
    padding:50px 60px 30px;
    box-sizing:border-box;
    border-radius:var(--radius-lg) var(--radius-lg) 0 0;
}

.footer-content{
    display:grid;
    grid-template-columns:2fr 1fr 1fr 1fr;
    gap:40px;
    width:100%;
}

.footer-logo{
    width:60px;
    margin-bottom:12px;
    filter:brightness(0) invert(1);
}

.footer-about h2{
    color:var(--white);
    margin-bottom:8px;
    font-size:20px;
}

.tagline{
    font-family:var(--font-mono);
    font-size:12px;
    letter-spacing:.06em;
    text-transform:uppercase;
    color:var(--marigold);
    font-weight:600;
    margin-bottom:15px;
}

.footer-text{
    color:rgba(242,238,226,.72);
    line-height:1.8;
    max-width:340px;
    font-size:14px;
}

.footer-links h3,
.footer-contact h3,
.footer-founder h3{
    color:var(--white);
    margin-bottom:16px;
    font-size:13px;
    text-transform:uppercase;
    letter-spacing:.06em;
    font-family:var(--font-mono);
}

.footer-links{
    display:flex;
    flex-direction:column;
}

.footer-links a{
    color:rgba(242,238,226,.72);
    text-decoration:none;
    margin-bottom:12px;
    font-size:14px;
    transition:.2s;
    width:fit-content;
}

.footer-links a:hover{
    color:var(--marigold);
    padding-left:5px;
}

.footer-contact p,
.footer-founder p{
    color:rgba(242,238,226,.72);
    margin-bottom:12px;
    font-size:14px;
}

.footer-contact a{
    color:rgba(242,238,226,.9);
    text-decoration:none;
}

.footer-contact a:hover{ color:var(--marigold); }

.footer hr{
    border:none;
    border-top:1px dashed rgba(242,238,226,.2);
    margin:24px 0 18px;
}

.footer-bottom{
    display:flex;
    justify-content:space-between;
    align-items:center;
    flex-wrap:wrap;
    gap:15px;
}

.footer-bottom p{
    color:rgba(242,238,226,.6);
    font-family:var(--font-mono);
    font-size:12.5px;
}

.socials{
    display:flex;
    gap:12px;
    align-items:center;
}

.socials a{
    width:40px;
    height:40px;
    background:rgba(242,238,226,.08);
    border:1px solid rgba(242,238,226,.18);
    color:var(--white);
    text-decoration:none;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:16px;
    transition:.2s;
}

.socials a:hover{
    background:var(--marigold);
    border-color:var(--marigold);
    color:var(--ink);
    transform:translateY(-3px);
}

/* ==========================================================
   HOW-IT-WORKS POPUP
   ========================================================== */

.how-popup{
    display:none;
    position:fixed;
    inset:0;
    background:rgba(22,33,62,.8);
    backdrop-filter:blur(6px);
    justify-content:center;
    align-items:center;
    z-index:99999;
    padding:20px;
}

.how-popup.show{
    display:flex;
}

.how-popup-content{
    position:relative;
    width:95%;
    max-width:1200px;
    max-height:92vh;
    overflow:auto;
    border-radius:var(--radius-lg);
    background:var(--white);
    padding:16px;
    animation:popup .3s ease;
}

.popup-image{
    width:100%;
    height:auto;
    display:block;
    border-radius:var(--radius-md);
}

.close-popup{
    position:absolute;
    top:10px;
    right:18px;
    font-size:34px;
    cursor:pointer;
    color:var(--white);
    background:var(--ink);
    width:40px;
    height:40px;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    font-weight:400;
    line-height:1;
}

.close-popup:hover{
    background:var(--danger);
}

@keyframes popup{
    from{ opacity:0; transform:scale(.94); }
    to{ opacity:1; transform:scale(1); }
}

/* ==========================================================
   MISC RIDE CARD (secondary pages)
   ========================================================== */

.ride-card h2{
    color:var(--ink);
    margin-bottom:12px;
    padding:25px 25px 0;
}

.ride-card p{
    margin:10px 0;
    padding:0 25px;
    color:var(--ink-soft);
}

.ride-card a{
    display:inline-block;
    margin:15px 25px 25px;
    color:var(--ink);
    background:var(--marigold);
    padding:11px 20px;
    border-radius:var(--radius-sm);
    text-decoration:none;
    font-weight:700;
    transition:.2s;
}

.ride-card a:hover{
    background:var(--ink);
    color:var(--white);
}

/* ==========================================================
   MINIMAL BRAND HEADER — for standalone pages without the
   full sidebar shell (about, safety, login, dashboard...)
   ========================================================== */

.brand-bar{
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:20px 40px;
    background:var(--ink);
}

.brand-bar-logo{
    display:flex;
    align-items:center;
    gap:10px;
    text-decoration:none;
    color:var(--white);
    font-family:var(--font-display);
    font-weight:700;
    font-size:17px;
}

.brand-bar-logo img{
    width:30px;
    filter:brightness(0) invert(1);
}

.brand-bar-back{
    display:flex;
    align-items:center;
    gap:8px;
    text-decoration:none;
    color:rgba(242,238,226,.8);
    font-size:14px;
    font-weight:600;
    transition:.2s;
}

.brand-bar-back:hover{
    color:var(--marigold);
}

/* ==========================================================
   STANDALONE CONTENT PAGES — about, safety
   ========================================================== */

.content{
    max-width:820px;
    margin:50px auto;
    background:var(--white);
    padding:46px 48px;
    border-radius:var(--radius-lg);
    box-shadow:var(--shadow-md);
    border-top:4px solid var(--marigold);
}

.content h1{
    font-size:32px;
    margin-bottom:18px;
}

.content h2{
    margin-top:32px;
    margin-bottom:10px;
    font-size:19px;
    color:var(--ink);
}

.content p{
    line-height:1.8;
    color:var(--slate);
    font-size:15px;
}

.content ul{
    margin-top:14px;
    line-height:2;
    padding-left:0;
    list-style:none;
}

.content ul li{
    position:relative;
    padding-left:30px;
    color:var(--ink-soft);
    font-size:14.5px;
    margin-bottom:4px;
}

.content ul li::before{
    content:"\2713";
    position:absolute;
    left:0;
    top:3px;
    width:19px;
    height:19px;
    border-radius:50%;
    background:var(--route-green-soft);
    color:var(--route-green);
    font-size:11px;
    font-weight:700;
    display:flex;
    align-items:center;
    justify-content:center;
    line-height:1;
}

.content hr{
    border:none;
    border-top:1px dashed var(--line);
    margin:40px 0;
}

.content-footer-note{
    text-align:center;
    color:var(--slate-soft);
    font-family:var(--font-mono);
    font-size:12.5px;
}

.social{
    margin-top:28px;
    padding-top:10px;
    border-top:1px dashed var(--line);
}

.social h2{
    margin-top:20px;
}

.social a{
    display:flex;
    align-items:center;
    gap:10px;
    margin:14px 0;
    padding:12px 16px;
    font-size:14.5px;
    font-weight:600;
    color:var(--ink);
    text-decoration:none;
    background:var(--paper);
    border-radius:var(--radius-sm);
    transition:.2s;
}

.social a:hover{
    background:var(--ink);
    color:var(--white);
}

/* ==========================================================
   AUTH PAGES — login / signup
   ========================================================== */

.auth-shell{
    min-height:calc(100vh - 76px);
    display:flex;
    align-items:center;
    justify-content:center;
    padding:40px 20px;
}

.login-container{
    width:420px;
    max-width:100%;
    background:var(--white);
    padding:38px;
    border-radius:var(--radius-lg);
    box-shadow:var(--shadow-lg);
    border-top:4px solid var(--marigold);
}

.login-container h1{
    text-align:center;
    font-size:26px;
    margin-bottom:8px;
}

.login-container p{
    text-align:center;
    color:var(--slate);
    margin-bottom:26px;
    font-size:14.5px;
}

.login-container input{
    width:100%;
    padding:14px;
    margin-bottom:14px;
    border:1.5px solid var(--paper-deep);
    border-radius:var(--radius-sm);
    font-size:14.5px;
    background:var(--paper);
    color:var(--ink);
}

.login-container input:focus{
    border-color:var(--marigold);
    outline:none;
}

.login-btn-wide{
    width:100%;
    padding:15px;
    background:var(--marigold);
    color:var(--ink);
    border:none;
    border-radius:var(--radius-sm);
    cursor:pointer;
    font-size:15.5px;
    font-weight:700;
    transition:.2s;
}

.login-btn-wide:hover{
    background:var(--ink);
    color:var(--white);
}

#message{
    margin-top:14px;
    text-align:center;
    font-weight:600;
    font-size:14px;
}

.signup-link{
    text-align:center;
    margin-top:22px;
    font-size:14px;
    color:var(--slate);
}

.signup-link a{
    text-decoration:none;
    color:var(--marigold-deep);
    font-weight:700;
}

.signup-link a:hover{
    text-decoration:underline;
}

/* ==========================================================
   DASHBOARD
   ========================================================== */

.dashboard{
    max-width:1100px;
    margin:40px auto;
    padding:0 20px;
}

.dashboard .top{
    display:flex;
    justify-content:space-between;
    align-items:center;
    background:var(--white);
    padding:26px 28px;
    border-radius:var(--radius-lg);
    box-shadow:var(--shadow-sm);
    margin-bottom:26px;
    border-top:3px solid var(--marigold);
}

.dashboard .top h1{
    font-size:24px;
    margin-bottom:4px;
}

.dashboard .top p{
    color:var(--slate);
    font-size:14px;
}

.logout{
    background:var(--white);
    color:var(--danger);
    border:1.5px solid var(--danger);
    padding:12px 22px;
    border-radius:var(--radius-sm);
    cursor:pointer;
    font-weight:700;
    transition:.2s;
}

.logout:hover{
    background:var(--danger);
    color:var(--white);
}

.cards{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:20px;
}

.dashboard .card{
    background:var(--white);
    padding:30px 24px;
    border-radius:var(--radius-lg);
    text-align:center;
    box-shadow:var(--shadow-sm);
    transition:.2s;
}

.dashboard .card:hover{
    transform:translateY(-3px);
    box-shadow:var(--shadow-md);
}

.dashboard .card h2{
    font-size:19px;
    margin-bottom:10px;
}

.dashboard .card p{
    color:var(--slate);
    font-size:14px;
}

.dashboard .card button{
    margin-top:20px;
    padding:12px 22px;
    background:var(--ink);
    color:var(--white);
    border:none;
    border-radius:var(--radius-sm);
    cursor:pointer;
    font-weight:700;
    transition:.2s;
}

.dashboard .card button:hover{
    background:var(--marigold);
    color:var(--ink);
}

/* ==========================================================
   FORM CARD — offer ride (post-ride.html) & similar forms
   ========================================================== */

.form-card{
    max-width:620px;
    margin:44px auto;
    background:var(--white);
    padding:38px;
    border-radius:var(--radius-lg);
    box-shadow:var(--shadow-md);
    border-top:4px solid var(--marigold);
}

.form-card h1{
    text-align:center;
    font-size:26px;
    margin-bottom:26px;
}

.form-card input,
.form-card select{
    width:100%;
    padding:14px;
    margin-bottom:14px;
    border:1.5px solid var(--paper-deep);
    border-radius:var(--radius-sm);
    font-size:14.5px;
    background:var(--paper);
    color:var(--ink);
    font-family:var(--font-body);
}

.form-card input:focus,
.form-card select:focus{
    border-color:var(--marigold);
    outline:none;
}

.form-card button{
    width:100%;
    padding:15px;
    background:var(--marigold);
    color:var(--ink);
    border:none;
    border-radius:var(--radius-sm);
    font-size:15.5px;
    font-weight:700;
    cursor:pointer;
    transition:.2s;
}

.form-card button:hover{
    background:var(--ink);
    color:var(--white);
}

/* ==========================================================
   SECTION CONTAINERS — hosted rides / my requests
   ========================================================== */

.section-container{
    padding:32px 40px;
}

.section-title{
    font-size:28px;
    margin-bottom:8px;
    display:flex;
    align-items:center;
    gap:12px;
}

.section-subtitle{
    color:var(--slate);
    margin-bottom:28px;
    font-size:14.5px;
}

/* ==========================================================
   REQUEST CARDS — ride-requests.html
   ========================================================== */

.request-page-shell{
    max-width:900px;
    margin:40px auto;
    padding:0 20px;
}

.request-card{
    background:var(--white);
    padding:22px 24px;
    margin-bottom:18px;
    border-radius:var(--radius-md);
    box-shadow:var(--shadow-sm);
    border-left:4px solid var(--marigold);
}

.request-card p{
    margin:7px 0;
    color:var(--ink-soft);
    font-size:14.5px;
}

.request-card-actions{
    display:flex;
    gap:10px;
    margin-top:14px;
}

.accept-btn,
.reject-btn,
.back-btn{
    padding:11px 20px;
    border:none;
    border-radius:var(--radius-sm);
    cursor:pointer;
    font-weight:700;
    font-size:13.5px;
    transition:.2s;
}

.accept-btn{
    background:var(--route-green-soft);
    color:var(--route-green);
}

.accept-btn:hover{
    background:var(--route-green);
    color:var(--white);
}

.reject-btn{
    background:#FCE9E9;
    color:var(--danger);
}

.reject-btn:hover{
    background:var(--danger);
    color:var(--white);
}

.back-btn{
    background:var(--ink);
    color:var(--white);
    margin-bottom:22px;
}

.back-btn:hover{
    background:var(--marigold);
    color:var(--ink);
}

/* bare class names — kept for any ride-requests.js generated markup */
.request-card button,
.accept,
.reject,
.back{
    padding:11px 20px;
    border:none;
    border-radius:var(--radius-sm);
    cursor:pointer;
    font-weight:700;
    font-size:13.5px;
    transition:.2s;
}

.accept{
    background:var(--route-green-soft);
    color:var(--route-green);
}

.accept:hover{
    background:var(--route-green);
    color:var(--white);
}

.reject{
    background:#FCE9E9;
    color:var(--danger);
}

.reject:hover{
    background:var(--danger);
    color:var(--white);
}

.back{
    background:var(--ink);
    color:var(--white);
    margin-bottom:22px;
}

.back:hover{
    background:var(--marigold);
    color:var(--ink);
}

/* ==========================================================
   RESPONSIVE
   ========================================================== */

@media (max-width:1200px){

    .layout{
        grid-template-columns:1fr;
    }

    .stats{
        grid-template-columns:repeat(2,1fr);
        margin-top:22px;
    }

    .hero{
        min-height:600px;
    }

    .hero-overlay{
        width:420px;
    }

    .hero-overlay h1{
        font-size:48px;
    }

}

/* ================================
   TABLET — the 768px breakpoint below jumps straight from the
   1200px layout to a single-column mobile layout, so anything in the
   768–1024px range (most tablets in portrait) was rendering the
   1200px rules, including a hard-coded 420px .hero-overlay that can
   overflow a narrower tablet viewport. This only loosens that one
   fixed width; it doesn't change the layout structure.
   ================================ */
@media (max-width:1024px){

    .hero-overlay{
        width:auto;
        max-width:420px;
        left:22px;
        right:22px;
    }

}

@media (max-width:768px){

    .app{
        display:block;
    }

    .menu-btn{
        display:block;
    }

    .main{
        width:100%;
        margin:0;
        padding:14px;
    }

    .layout{
        display:flex;
        flex-direction:column;
        gap:18px;
    }

    .center,
    .right-panel{
        width:100%;
        max-width:100%;
    }

    .hero{
        height:auto;
        min-height:480px;
    }

    .hero::before{
        width:100%;
        background:linear-gradient(180deg, rgba(22,33,62,.92), rgba(22,33,62,.55));
    }

    .hero-overlay{
        left:22px;
        top:22px;
        right:22px;
        width:auto;
    }

    .hero-overlay h1{
        font-size:36px;
    }

    .hero-overlay p{
        max-width:100%;
    }

    .hero-buttons{
        flex-direction:column;
        gap:10px;
    }

    .stats{
        grid-template-columns:1fr;
        gap:12px;
    }

    .ride-filters{
        flex-wrap:wrap;
    }

    .search-filters{
        flex-direction:column;
    }

    .ride-row{
        flex-direction:column;
        gap:0;
    }

    .vehicle-types{
        display:grid;
        grid-template-columns:repeat(3,1fr);
    }

    .trip-options,
    .gender-options{
        flex-direction:column;
    }

    .offer-top,
    .find-top{
        flex-direction:column;
        align-items:flex-start;
    }

    .offer-img,
    .find-img{
        display:none;
    }

    .route,
    .ride-route{
        flex-wrap:wrap;
    }

    .ride-bottom{
        flex-direction:column;
        align-items:flex-start;
        gap:14px;
    }

    .ride-price-box,
    .ride-price{
        text-align:left;
        width:100%;
    }

    .footer{
        padding:34px 22px 22px;
        border-radius:var(--radius-md) var(--radius-md) 0 0;
    }

    .footer-content{
        grid-template-columns:1fr;
        gap:28px;
        text-align:center;
    }

    .footer-text{
        max-width:100%;
        margin:0 auto;
    }

    .footer-links{
        align-items:center;
    }

    .footer-bottom{
        flex-direction:column;
        text-align:center;
    }

    .socials{
        justify-content:center;
    }

    .how-popup-content{
        width:98%;
        padding:10px;
        max-height:95vh;
    }

    .close-popup{
        font-size:26px;
        width:34px;
        height:34px;
        top:6px;
        right:12px;
    }

    .content{
        margin:24px auto;
        padding:28px 24px;
    }

    .brand-bar{
        padding:16px 20px;
    }

    .cards{
        grid-template-columns:1fr;
    }

    .dashboard .top{
        flex-direction:column;
        align-items:flex-start;
        gap:16px;
    }

    .section-container{
        padding:22px 18px;
    }

    .form-card{
        margin:24px 16px;
        padding:28px 22px;
    }

    .request-card-actions{
        flex-wrap:wrap;
    }

    /* ================================
       MOBILE SIDEBAR — proper drawer
       (this used to be a second, later @media(max-width:768px) block
       that silently overrode the .sidebar/.nav-links rules above via
       CSS cascade order — merged into one block here so there's a
       single source of truth. The rendered result is unchanged.)
       ================================ */
    .sidebar{
        position:fixed;
        top:0;
        left:0;
        height:100vh;
        width:260px;
        z-index:1000;
        overflow-y:auto;
        transform:translateX(-100%);
        transition:transform .3s ease;
        box-shadow:var(--shadow-lg);
        display:flex;
        flex-direction:column;
        background:var(--ink);
    }

    .sidebar.active{
        display:flex;
        transform:translateX(0);
    }

    /* ================================
       MOBILE TOPBAR — let nav links wrap
       instead of getting squeezed off-screen
       ================================ */
    .topbar{
        flex-wrap:wrap;
        row-gap:10px;
    }

    .nav-links{
        order:3;
        width:100%;
        display:flex;
        justify-content:center;
        gap:18px;
        flex-wrap:wrap;
    }

    .nav-links a{
        margin-right:0;
        font-size:13px;
    }

}
.primary-btn{
    background:var(--marigold);
    color:var(--ink);
    border:none;
    padding:10px 18px;
    border-radius:var(--radius-sm);
    cursor:pointer;
    font-weight:700;
    font-size:13.5px;
    transition:.2s;
}
.primary-btn:hover{
    background:var(--marigold-deep);
    color:var(--white);
}

.secondary-btn{
    background:var(--paper-deep);
    color:var(--slate);
    border:none;
    padding:10px 18px;
    border-radius:var(--radius-sm);
    cursor:not-allowed;
    font-weight:600;
    font-size:13.5px;
}

.danger-btn{
    background:var(--white);
    color:var(--danger);
    border:1.5px solid var(--danger);
    padding:10px 18px;
    border-radius:var(--radius-sm);
    cursor:pointer;
    font-weight:700;
    font-size:13.5px;
    transition:.2s;
}
.danger-btn:hover{
    background:var(--danger);
    color:var(--white);
}