/* ── Reset ──────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
:root{
  --green:#10b981;--green-dark:#059669;--green-light:#d1fae5;
  --blue:#3b82f6;--orange:#f59e0b;--red:#ef4444;--purple:#8b5cf6;
  --text:#0f172a;--text-muted:#64748b;--text-light:#94a3b8;
  --border:#e2e8f0;--bg:#ffffff;--bg-2:#f8fafc;--bg-3:#f1f5f9;
  --nav:#0f172a;--radius:12px;--radius-sm:8px;--radius-lg:16px;
  --shadow:0 1px 3px rgba(0,0,0,.08);--shadow-md:0 4px 16px rgba(0,0,0,.08);--shadow-lg:0 8px 32px rgba(0,0,0,.12);
}
body{font-family:'Inter',-apple-system,sans-serif;color:var(--text);background:var(--bg);font-size:15px;line-height:1.6;-webkit-font-smoothing:antialiased;}
img{max-width:100%;height:auto;display:block;}
a{text-decoration:none;color:inherit;}
ul{list-style:none;}
input,textarea,select,button{font-family:inherit;}

/* ── Navbar ─────────────────────────────────────────────── */
.navbar{background:var(--nav);position:sticky;top:0;z-index:1000;box-shadow:0 1px 0 rgba(255,255,255,.05);}
.nav-container{max-width:1280px;margin:0 auto;padding:0 1.5rem;height:64px;display:flex;align-items:center;gap:1.5rem;}
.nav-logo{display:flex;align-items:center;gap:.5rem;font-weight:800;font-size:1.25rem;color:white;white-space:nowrap;}
.logo-bolt{color:var(--green);font-size:1.5rem;}
.logo-dot{color:var(--green);}
.nav-search{flex:1;max-width:380px;}
.nav-search-form{display:flex;align-items:center;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.1);border-radius:50px;padding:.5rem 1rem;gap:.5rem;transition:all .15s;}
.nav-search-form:focus-within{background:rgba(255,255,255,.12);border-color:var(--green);}
.nav-search-form i{color:#94a3b8;font-size:.875rem;}
.nav-search-form input{flex:1;background:none;border:none;outline:none;color:white;font-size:.875rem;}
.nav-search-form input::placeholder{color:#64748b;}
.nav-actions{display:flex;align-items:center;gap:.75rem;margin-left:auto;}
.nav-link{color:#94a3b8;font-size:.875rem;font-weight:500;padding:.375rem .5rem;border-radius:var(--radius-sm);transition:color .15s;white-space:nowrap;}
.nav-link:hover{color:white;}
.btn-nav-cta{background:var(--green);color:white!important;padding:.5rem 1.125rem;border-radius:50px;font-size:.875rem;font-weight:600;transition:background .15s;white-space:nowrap;}
.btn-nav-cta:hover{background:var(--green-dark);}
.nav-toggle{display:none;background:none;border:none;color:#94a3b8;font-size:1.25rem;cursor:pointer;padding:.5rem;}
.mobile-nav{display:none;flex-direction:column;background:#1e293b;padding:1rem 1.5rem;border-top:1px solid rgba(255,255,255,.05);}
.mobile-nav.open{display:flex;}
.mobile-nav a{color:#cbd5e1;padding:.75rem 0;font-size:.9375rem;border-bottom:1px solid rgba(255,255,255,.04);}

/* ── Buttons ────────────────────────────────────────────── */
.btn{display:inline-flex;align-items:center;gap:.5rem;font-weight:600;border:none;cursor:pointer;border-radius:50px;font-size:.9375rem;transition:all .15s;text-decoration:none;}
.btn-primary{background:var(--green);color:white;padding:.625rem 1.375rem;}
.btn-primary:hover{background:var(--green-dark);transform:translateY(-1px);box-shadow:0 4px 12px rgba(16,185,129,.3);}
.btn-secondary{background:white;color:var(--text);padding:.625rem 1.375rem;border:1.5px solid var(--border);}
.btn-secondary:hover{border-color:var(--green);color:var(--green);}
.btn-outline{background:transparent;color:var(--green);padding:.625rem 1.375rem;border:1.5px solid var(--green);}
.btn-outline:hover{background:var(--green);color:white;}
.btn-danger{background:#fef2f2;color:var(--red);padding:.5rem 1rem;border:1px solid #fecaca;}
.btn-sm{padding:.4rem 1rem;font-size:.8125rem;}
.btn-lg{padding:.875rem 2rem;font-size:1.0625rem;}

/* ── Flash ──────────────────────────────────────────────── */
.flash{display:flex;align-items:center;justify-content:space-between;padding:.875rem 1.5rem;font-size:.9375rem;font-weight:500;}
.flash-success{background:#f0fdf4;color:#166534;border-bottom:1px solid #bbf7d0;}
.flash-error{background:#fef2f2;color:#991b1b;border-bottom:1px solid #fecaca;}
.flash-warning{background:#fffbeb;color:#92400e;border-bottom:1px solid #fde68a;}
.flash-close{background:none;border:none;font-size:1.25rem;cursor:pointer;opacity:.5;}

/* ── Cards ──────────────────────────────────────────────── */
.card{background:white;border:1.5px solid var(--border);border-radius:var(--radius-lg);overflow:hidden;transition:all .2s;}
.card:hover{box-shadow:var(--shadow-md);border-color:#cbd5e1;}

/* Station card */
.station-card{display:block;text-decoration:none;color:inherit;}
.station-card-img{position:relative;height:170px;background:var(--bg-3);overflow:hidden;}
.station-card-img img{width:100%;height:100%;object-fit:cover;transition:transform .3s;}
.station-card:hover .station-card-img img{transform:scale(1.04);}
.station-card-body{padding:1.125rem;}
.station-name{font-size:1rem;font-weight:700;margin-bottom:.375rem;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden;}
.station-address{font-size:.8125rem;color:var(--text-muted);margin-bottom:.75rem;display:flex;align-items:flex-start;gap:.375rem;}
.station-footer{display:flex;align-items:center;justify-content:space-between;padding-top:.75rem;border-top:1px solid var(--border);}
.station-rating{display:flex;align-items:center;gap:.25rem;font-size:.875rem;font-weight:600;color:#f59e0b;}
.station-distance{font-size:.8rem;color:var(--text-muted);}

/* Availability badge */
.avail-badge{display:inline-flex;align-items:center;gap:.375rem;font-size:.75rem;font-weight:600;padding:.25rem .625rem;border-radius:50px;}
.avail-available{background:#f0fdf4;color:#16a34a;}
.avail-busy{background:#fffbeb;color:#d97706;}
.avail-offline{background:#fef2f2;color:#dc2626;}
.avail-maintenance{background:#f5f3ff;color:#7c3aed;}

/* Vehicle badge */
.vehicle-badge{display:inline-flex;align-items:center;gap:.25rem;font-size:.7rem;font-weight:700;padding:.2rem .5rem;border-radius:50px;background:var(--bg-3);color:var(--text-muted);}

/* Charger type */
.charger-tag{display:inline-flex;align-items:center;gap:.25rem;font-size:.7rem;font-weight:600;padding:.2rem .5rem;border-radius:4px;color:white;}

/* ── Map ────────────────────────────────────────────────── */
#main-map{border-radius:var(--radius-lg);overflow:hidden;}
.map-marker-popup{min-width:220px;}
.map-marker-popup h4{font-size:.9375rem;font-weight:700;margin-bottom:.5rem;}
.map-marker-popup p{font-size:.8125rem;color:var(--text-muted);margin-bottom:.5rem;}

/* ── Form ───────────────────────────────────────────────── */
.form-group{margin-bottom:1.25rem;}
.form-label{display:block;font-size:.875rem;font-weight:600;margin-bottom:.5rem;}
.form-input,.form-select,.form-textarea{width:100%;padding:.75rem 1rem;border:1.5px solid var(--border);border-radius:var(--radius-sm);font-size:.9375rem;color:var(--text);background:white;transition:border-color .15s;outline:none;font-family:inherit;}
.form-input:focus,.form-select:focus,.form-textarea:focus{border-color:var(--green);box-shadow:0 0 0 3px rgba(16,185,129,.1);}
.form-select{appearance:none;background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%2394a3b8' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");background-repeat:no-repeat;background-position:right .75rem center;background-size:1.25rem;padding-right:2.5rem;}
.form-textarea{resize:vertical;min-height:120px;}
.form-hint{font-size:.8rem;color:var(--text-muted);margin-top:.375rem;}
.form-error{font-size:.8rem;color:var(--red);margin-top:.375rem;}

/* ── Filter bar ─────────────────────────────────────────── */
.filter-bar{background:white;border-bottom:1px solid var(--border);padding:.875rem 0;position:sticky;top:64px;z-index:100;}
.filter-pill{display:inline-flex;align-items:center;gap:.375rem;padding:.5rem 1rem;border-radius:50px;border:1.5px solid var(--border);background:white;font-size:.8125rem;font-weight:500;color:var(--text);cursor:pointer;transition:all .15s;white-space:nowrap;}
.filter-pill:hover,.filter-pill.active{background:var(--green);color:white;border-color:var(--green);}
.filter-pill i{font-size:.7rem;}

/* ── Section ────────────────────────────────────────────── */
.section{padding:4rem 0;}
.section-sm{padding:2.5rem 0;}
.container{max-width:1280px;margin:0 auto;padding:0 1.5rem;}
.container-sm{max-width:800px;margin:0 auto;padding:0 1.5rem;}
.section-header{margin-bottom:2rem;}
.section-title{font-size:1.75rem;font-weight:800;color:var(--text);margin-bottom:.5rem;}
.section-sub{color:var(--text-muted);font-size:1rem;}

/* ── Grid ───────────────────────────────────────────────── */
.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:1.5rem;}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem;}
.grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:1.5rem;}

/* ── Stats ──────────────────────────────────────────────── */
.stat-card{background:white;border:1.5px solid var(--border);border-radius:var(--radius-lg);padding:1.5rem;}
.stat-icon{width:48px;height:48px;border-radius:var(--radius);display:flex;align-items:center;justify-content:center;font-size:1.375rem;margin-bottom:1rem;}
.stat-value{font-size:2rem;font-weight:800;}
.stat-label{color:var(--text-muted);font-size:.875rem;margin-top:.25rem;}

/* ── Badge ──────────────────────────────────────────────── */
.badge{display:inline-block;padding:.25rem .625rem;border-radius:50px;font-size:.75rem;font-weight:600;}
.badge-green{background:#f0fdf4;color:#16a34a;}
.badge-orange{background:#fffbeb;color:#d97706;}
.badge-red{background:#fef2f2;color:#dc2626;}
.badge-blue{background:#eff6ff;color:#2563eb;}
.badge-purple{background:#f5f3ff;color:#7c3aed;}

/* ── Stars ──────────────────────────────────────────────── */
.stars{color:#f59e0b;letter-spacing:.1em;}
.star-full{color:#f59e0b;}
.star-empty{color:#e2e8f0;}

/* ── Admin ──────────────────────────────────────────────── */
.admin-layout{display:flex;min-height:100vh;}
.admin-sidebar{width:240px;background:var(--nav);position:fixed;top:0;left:0;height:100vh;overflow-y:auto;z-index:100;padding:1.5rem 0;}
.admin-sidebar .logo{padding:0 1.5rem 1.5rem;border-bottom:1px solid rgba(255,255,255,.06);margin-bottom:1rem;}
.admin-nav a{display:flex;align-items:center;gap:.75rem;padding:.75rem 1.5rem;color:#64748b;font-size:.875rem;transition:all .15s;font-weight:500;}
.admin-nav a:hover,.admin-nav a.active{background:rgba(255,255,255,.06);color:white;}
.admin-nav a i{width:18px;}
.admin-nav .sep{height:1px;background:rgba(255,255,255,.06);margin:.5rem 0;}
.admin-main{margin-left:240px;flex:1;background:var(--bg-2);min-height:100vh;}
.admin-header{background:white;border-bottom:1px solid var(--border);padding:1rem 2rem;display:flex;align-items:center;justify-content:space-between;}
.admin-content{padding:2rem;}
.admin-card{background:white;border:1.5px solid var(--border);border-radius:var(--radius-lg);overflow:hidden;}
.admin-card-header{padding:1.25rem 1.5rem;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;}
.admin-card-header h3{font-size:1rem;font-weight:700;}
.admin-table{width:100%;border-collapse:collapse;}
.admin-table th{background:var(--bg-2);padding:.875rem 1rem;text-align:left;font-size:.75rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--text-muted);border-bottom:1px solid var(--border);}
.admin-table td{padding:1rem;font-size:.875rem;border-bottom:1px solid var(--border);vertical-align:middle;}
.admin-table tr:hover td{background:var(--bg-2);}

/* ── Page hero ──────────────────────────────────────────── */
.page-hero{background:linear-gradient(135deg,#0f172a,#1e293b);padding:3rem 0;}
.page-hero h1{font-size:2rem;font-weight:800;color:white;margin-bottom:.5rem;}
.page-hero p{color:#94a3b8;}












/* ── Misc ───────────────────────────────────────────────── */
.text-green{color:var(--green);}
.text-muted{color:var(--text-muted);}
.text-center{text-align:center;}
.fw-700{font-weight:700;}
.mt-2{margin-top:.5rem;}.mt-3{margin-top:.75rem;}.mt-4{margin-top:1rem;}
.mb-2{margin-bottom:.5rem;}.mb-3{margin-bottom:.75rem;}.mb-4{margin-bottom:1rem;}
.divider{height:1px;background:var(--border);margin:1.5rem 0;}
.empty-state{text-align:center;padding:4rem 2rem;color:var(--text-muted);}
.empty-icon{font-size:3.5rem;margin-bottom:1rem;}
.flex{display:flex;}.items-center{align-items:center;}.justify-between{justify-content:space-between;}.flex-wrap{flex-wrap:wrap;}.gap-2{gap:.5rem;}.gap-3{gap:.75rem;}

/* ── Responsive ─────────────────────────────────────────── */
@media(max-width:1024px){
  .grid-4{grid-template-columns:repeat(2,1fr);}

}
@media(max-width:768px){
  .nav-search,.nav-link{display:none;}
  .nav-toggle{display:flex;}
  .btn-nav-cta{display:none;}
  .grid-3,.grid-4{grid-template-columns:repeat(2,1fr);gap:1rem;}
  .grid-2{grid-template-columns:1fr;}
  .filter-bar{top:64px;overflow-x:auto;white-space:nowrap;padding:.75rem 1rem;}
  .admin-sidebar{display:none;}
  .admin-main{margin-left:0;}
  .admin-content{padding:1rem;}


  .page-hero h1{font-size:1.625rem;}
  body{overflow-x:clip;}
}
@media(max-width:480px){
  .grid-3,.grid-4{grid-template-columns:1fr;}
  .container{padding:0 1rem;}
}



/* ── Stations page radius control ────────────────────────── */
#st-radctrl{position:absolute !important;top:1rem !important;right:1rem !important;z-index:500 !important;background:rgba(255,255,255,.97) !important;border-radius:10px !important;box-shadow:0 4px 20px rgba(0,0,0,.15) !important;padding:.5rem !important;display:flex !important;flex-direction:column !important;gap:.25rem !important;}
#st-radctrl .radlbl{font-size:.65rem;font-weight:700;color:#94a3b8;text-transform:uppercase;letter-spacing:.05em;text-align:center;margin-bottom:.1rem;}
#st-radctrl .rbtn{display:block !important;width:100% !important;padding:.3rem .625rem !important;border-radius:.4rem !important;border:1.5px solid #e2e8f0 !important;font-size:.72rem !important;font-weight:600 !important;color:#64748b !important;background:white !important;cursor:pointer !important;text-align:center !important;}
#st-radctrl .rbtn.on{background:#d1fae5 !important;border-color:#10b981 !important;color:#059669 !important;}

/* ── Stations map overlay fix (z-index above Leaflet) ───── */
#st-radctrl{position:absolute !important;top:1rem !important;right:1rem !important;z-index:1000 !important;background:rgba(255,255,255,.97) !important;border-radius:10px !important;box-shadow:0 4px 20px rgba(0,0,0,.2) !important;padding:.5rem !important;display:flex !important;flex-direction:column !important;gap:.25rem !important;}
#st-locate,#st-map-badge{z-index:1000 !important;}

/* ── Compact km pill row override ───────────────────────── */
#hero-radctrl,#st-radctrl{flex-direction:row !important;border-radius:50px !important;padding:.25rem .3rem !important;gap:.15rem !important;align-items:center !important;}
#hero-radctrl button,#st-radctrl .rbtn{border:none !important;border-radius:50px !important;padding:.25rem .55rem !important;font-size:.72rem !important;background:transparent !important;color:#64748b !important;font-weight:600 !important;}
#hero-radctrl button.on,#st-radctrl .rbtn.on{background:#10b981 !important;color:white !important;}
#hero-radctrl button:hover,#st-radctrl .rbtn:hover{background:#f0fdf4 !important;color:#059669 !important;}
.radlbl{display:none !important;}
#st-map-badge,#map-cnt,#st-locate{display:none !important;}