/* ================================================================
   FUELFIND PRO — style.css
   Responsive: Mobile (320px) → Tablet (768px) → Desktop (1200px+)
================================================================

   TABLE OF CONTENTS
   1.  Variables & Reset
   2.  Screen System (show/hide)
   3.  Splash Screen
   4.  Auth Pages (Login/Register)
   5.  Top Navigation
   6.  User Dashboard — Search, Gauge, Emergency Strip, Filters, List
   7.  Emergency Quick Tiles
   8.  Pump Cards
   9.  Owner Dashboard — Hero, Stats, Listing Preview, Form
   10. Emergency Modal
   11. Toast Notification
   12. Animations
   13. Responsive Breakpoints
================================================================ */


/* ================================================================
   1. VARIABLES & RESET
================================================================ */
:root {
  /* Brand */
  --orange:  #FF5C00;
  --amber:   #FFAA00;
  --green:   #06D6A0;
  --red:     #EF476F;
  --blue:    #4CC9F0;
  --purple:  #9B5DE5;
  --yellow:  #FFD166;

  /* Backgrounds */
  --bg:      #05070D;
  --surface: #0C0F1A;
  --glass:   rgba(255,255,255,0.04);
  --border:  rgba(255,255,255,0.08);
  --border2: rgba(255,255,255,0.14);

  /* Text */
  --t1:      #EEF0F8;
  --t2:      rgba(238,240,248,0.5);
  --t3:      rgba(238,240,248,0.2);

  /* Gradients */
  --g-fire:  linear-gradient(135deg,#FF5C00,#FFAA00);
  --g-red:   linear-gradient(135deg,#EF476F,#FF6B6B);
  --g-green: linear-gradient(135deg,#06D6A0,#00B4D8);

  /* Radius */
  --r-sm:   8px;
  --r-md:   14px;
  --r-lg:   20px;
  --r-pill: 100px;

  /* Shadows */
  --sh-fire: 0 0 32px rgba(255,92,0,.22);
  --sh-red:  0 0 24px rgba(239,71,111,.3);

  /* Transitions */
  --tr: all .22s cubic-bezier(.4,0,.2,1);
}

*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; font-size:16px; }

body {
  font-family:'DM Sans',sans-serif;
  background:var(--bg); color:var(--t1);
  min-height:100vh; overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}

/* Ambient background glow */
body::before {
  content:''; position:fixed; inset:0; z-index:0; pointer-events:none;
  background:
    radial-gradient(ellipse 70% 50% at 50% -10%,rgba(255,92,0,.14) 0%,transparent 65%),
    radial-gradient(ellipse 40% 30% at 85% 80%, rgba(255,170,0,.05) 0%,transparent 60%),
    radial-gradient(ellipse 50% 40% at 10% 60%, rgba(6,214,160,.04) 0%,transparent 60%);
}

a { cursor:pointer; color:var(--orange); text-decoration:none; }
a:hover { text-decoration:underline; }
button { cursor:pointer; }


/* ================================================================
   2. SCREEN SYSTEM
   show() / hide() karne ke liye .active class toggle hoti hai
================================================================ */
.screen {
  display:none;
  min-height:100vh;
  position:relative; z-index:1;
  animation: fadeIn .35s ease both;
}
.screen.active { display:block; }

/* Screens that are flex columns */
#screen-user-dashboard,
#screen-owner-dashboard { display:none; flex-direction:column; }
#screen-user-dashboard.active,
#screen-owner-dashboard.active { display:flex; }


/* ================================================================
   3. SPLASH SCREEN
================================================================ */
#screen-splash {
  display:none; /* overridden by .active */
  align-items:center; justify-content:center;
  min-height:100vh;
}
#screen-splash.active { display:flex; }

.splash-bg-orb {
  position:fixed; top:50%; left:50%; transform:translate(-50%,-65%);
  width:min(600px,120vw); height:min(600px,120vw); border-radius:50%;
  background:radial-gradient(circle,rgba(255,92,0,.16) 0%,transparent 70%);
  pointer-events:none; animation:orbPulse 4s ease-in-out infinite;
}

.splash-content {
  position:relative; z-index:1;
  display:flex; flex-direction:column;
  align-items:center; gap:48px;
  padding:32px 20px; width:100%; max-width:520px;
}

.splash-logo-wrap { text-align:center; }

.splash-icon {
  width:88px; height:88px; border-radius:24px;
  background:var(--g-fire); font-size:2.6rem;
  display:flex; align-items:center; justify-content:center;
  margin:0 auto 20px; box-shadow:var(--sh-fire);
  position:relative;
  animation:splashIn .8s cubic-bezier(.34,1.56,.64,1) both;
}
.splash-icon::after {
  content:''; position:absolute; inset:-3px; border-radius:27px;
  background:var(--g-fire); opacity:.25; filter:blur(14px); z-index:-1;
}

.splash-title {
  font-family:'Syne',sans-serif; font-size:clamp(2.4rem,7vw,4rem);
  font-weight:800; letter-spacing:-2px; line-height:1;
  background:var(--g-fire); -webkit-background-clip:text; -webkit-text-fill-color:transparent;
  animation:splashIn .8s .1s cubic-bezier(.34,1.56,.64,1) both;
}
.splash-tagline {
  font-size:.78rem; letter-spacing:4px; text-transform:uppercase;
  color:var(--t2); margin-top:8px;
  animation:splashIn .8s .15s cubic-bezier(.34,1.56,.64,1) both;
}

/* Role cards grid */
.role-grid {
  display:grid; grid-template-columns:1fr 1fr; gap:16px; width:100%;
  animation:splashIn .8s .22s cubic-bezier(.34,1.56,.64,1) both;
}

.role-card {
  background:var(--glass); border:1px solid var(--border);
  border-radius:var(--r-lg); padding:28px 20px 22px;
  text-align:center; position:relative; overflow:hidden;
  backdrop-filter:blur(20px);
  transition:var(--tr);
}
.role-card::before {
  content:''; position:absolute; inset:0;
  background:var(--g-fire); opacity:0; transition:opacity .3s;
}
.role-card:hover { transform:translateY(-8px) scale(1.03); border-color:var(--orange); box-shadow:0 20px 40px rgba(255,92,0,.18); }
.role-card:hover::before { opacity:.07; }
.role-card:active { transform:scale(.97); }

.role-card-icon { font-size:2.4rem; margin-bottom:12px; display:block; position:relative; z-index:1; transition:transform .3s; }
.role-card:hover .role-card-icon { transform:scale(1.12); }
.role-card h3   { font-family:'Syne',sans-serif; font-size:.98rem; font-weight:700; position:relative; z-index:1; }
.role-card p    { font-size:.72rem; color:var(--t2); margin-top:6px; line-height:1.4; position:relative; z-index:1; }
.role-card-arrow { display:inline-block; margin-top:14px; width:30px; height:30px; border-radius:50%; background:rgba(255,92,0,.12); border:1px solid rgba(255,92,0,.25); line-height:30px; font-size:.8rem; transition:var(--tr); position:relative; z-index:1; }
.role-card:hover .role-card-arrow { background:var(--orange); border-color:var(--orange); color:#000; }


/* ================================================================
   4. AUTH PAGES (Login / Register)
================================================================ */
.auth-page {
  min-height:100vh; display:flex; align-items:center; justify-content:center;
  padding:24px 16px; position:relative; overflow:hidden;
}

.auth-bg-orb {
  position:fixed; top:-10%; left:50%; transform:translateX(-50%);
  width:500px; height:500px; border-radius:50%; pointer-events:none; z-index:0;
  animation:orbPulse 4s ease-in-out infinite;
}
.user-theme  .auth-bg-orb { background:radial-gradient(circle,rgba(76,201,240,.12) 0%,transparent 70%); }
.owner-theme .auth-bg-orb { background:radial-gradient(circle,rgba(255,92,0,.14) 0%,transparent 70%); }

.auth-card {
  position:relative; z-index:1; width:100%; max-width:460px;
  background:rgba(12,15,26,.95); border:1px solid var(--border);
  border-radius:var(--r-lg); padding:clamp(24px,5vw,40px);
  backdrop-filter:blur(24px);
  box-shadow:0 24px 64px rgba(0,0,0,.5);
  animation:slideUp .45s cubic-bezier(.34,1.2,.64,1) both;
}

.btn-auth-back {
  background:var(--glass); border:1px solid var(--border);
  color:var(--t2); font-size:.75rem; padding:6px 14px; border-radius:var(--r-sm);
  font-family:'DM Sans',sans-serif; transition:var(--tr); margin-bottom:20px;
}
.btn-auth-back:hover { border-color:var(--orange); color:var(--orange); }

.auth-header { text-align:center; margin-bottom:24px; }
.auth-icon {
  font-size:2.2rem; width:64px; height:64px; border-radius:18px;
  background:var(--g-fire); display:flex; align-items:center; justify-content:center;
  margin:0 auto 14px; box-shadow:var(--sh-fire);
}
.user-theme  .auth-icon { background:var(--g-green); box-shadow:0 0 24px rgba(6,214,160,.3); }
.owner-theme .auth-icon { background:var(--g-fire);  box-shadow:var(--sh-fire); }

.auth-title { font-family:'Syne',sans-serif; font-size:1.5rem; font-weight:800; }
.auth-sub   { font-size:.78rem; color:var(--t2); margin-top:5px; }

/* Tab switcher */
.auth-tabs {
  display:grid; grid-template-columns:1fr 1fr; gap:4px;
  background:rgba(255,255,255,.04); border-radius:var(--r-sm);
  padding:4px; margin-bottom:24px;
}
.auth-tab {
  padding:9px; border-radius:6px; border:none;
  background:none; color:var(--t2); font-size:.82rem; font-weight:500;
  font-family:'DM Sans',sans-serif; transition:var(--tr);
}
.auth-tab.active { background:var(--orange); color:#000; font-weight:700; }
.user-theme  .auth-tab.active { background:var(--green); }

/* Form */
.auth-form { display:flex; flex-direction:column; gap:14px; }
.auth-form.hidden { display:none; }

.field-group { display:flex; flex-direction:column; gap:6px; }
.field-label { font-size:.7rem; font-weight:600; text-transform:uppercase; letter-spacing:1.5px; color:var(--t2); }

.field-wrap {
  display:flex; align-items:center;
  background:rgba(255,255,255,.03); border:1px solid var(--border);
  border-radius:var(--r-sm); overflow:hidden;
  transition:var(--tr);
}
.field-wrap:focus-within { border-color:rgba(255,92,0,.5); box-shadow:0 0 0 3px rgba(255,92,0,.08); }
.user-theme  .field-wrap:focus-within { border-color:rgba(6,214,160,.5); box-shadow:0 0 0 3px rgba(6,214,160,.08); }

.field-icon  { padding:0 12px; font-size:.9rem; opacity:.5; flex-shrink:0; }
.field-input {
  flex:1; background:none; border:none; outline:none;
  color:var(--t1); font-family:'DM Sans',sans-serif; font-size:.87rem;
  padding:12px 0;
}
.field-input::placeholder { color:var(--t3); }

.field-eye {
  background:none; border:none; padding:0 12px;
  font-size:.9rem; opacity:.5; transition:opacity .2s;
}
.field-eye:hover { opacity:1; }

.auth-forgot { text-align:right; font-size:.73rem; margin-top:-4px; }

/* Submit button */
.btn-auth-submit {
  display:flex; align-items:center; justify-content:center; gap:8px;
  padding:14px; border-radius:var(--r-md); border:none;
  background:var(--g-green); color:#000;
  font-family:'Syne',sans-serif; font-size:.98rem; font-weight:700;
  letter-spacing:.3px; transition:var(--tr); margin-top:4px;
}
.btn-auth-submit:hover { transform:translateY(-2px); box-shadow:0 10px 28px rgba(6,214,160,.35); }
.btn-auth-submit.owner-btn { background:var(--g-fire); }
.btn-auth-submit.owner-btn:hover { box-shadow:0 10px 28px rgba(255,92,0,.35); }
.btn-arrow { font-size:1rem; }

.auth-switch { text-align:center; font-size:.75rem; color:var(--t2); }
.auth-switch a { font-weight:600; }


/* ================================================================
   5. TOP NAVIGATION
================================================================ */
.topnav {
  position:sticky; top:0; z-index:100;
  display:flex; align-items:center; justify-content:space-between;
  padding:0 clamp(12px,4vw,24px); height:60px;
  background:rgba(5,7,13,.88); backdrop-filter:blur(20px) saturate(180%);
  border-bottom:1px solid var(--border);
  gap:8px;
}
.topnav-logo {
  font-family:'Syne',sans-serif; font-size:1.25rem; font-weight:800;
  background:var(--g-fire); -webkit-background-clip:text; -webkit-text-fill-color:transparent;
  flex-shrink:0;
}
.topnav-center { flex:1; display:flex; justify-content:center; }

.nav-badge {
  display:inline-flex; align-items:center; gap:6px;
  padding:4px 12px 4px 8px; border-radius:var(--r-pill);
  font-size:.72rem; font-weight:500; border:1px solid;
  white-space:nowrap;
}
.user-badge  { background:rgba(6,214,160,.08);  border-color:rgba(6,214,160,.25);  color:var(--green); }
.owner-badge { background:rgba(255,92,0,.08);   border-color:rgba(255,92,0,.25);   color:var(--orange); }
.nav-dot { width:6px; height:6px; border-radius:50%; background:currentColor; animation:blink 2s ease infinite; }

.topnav-right { display:flex; align-items:center; gap:8px; flex-shrink:0; }

/* SOS nav button */
.btn-sos-nav {
  background:var(--g-red); border:none; border-radius:var(--r-sm);
  color:#fff; font-size:.7rem; font-weight:700; letter-spacing:.5px;
  padding:6px 11px; transition:var(--tr);
  box-shadow:0 0 10px rgba(239,71,111,.3);
  animation:sosPulseNav 2s ease-in-out infinite;
}
.btn-sos-nav:hover { transform:scale(1.05); }

.btn-nav-logout {
  background:var(--glass); border:1px solid var(--border);
  color:var(--t2); font-size:.72rem; padding:6px 12px; border-radius:var(--r-sm);
  font-family:'DM Sans',sans-serif; transition:var(--tr);
}
.btn-nav-logout:hover { border-color:var(--red); color:var(--red); }


/* ================================================================
   6. USER DASHBOARD
================================================================ */

/* Search */
.dash-search-wrap { padding:clamp(20px,4vw,32px) clamp(16px,4vw,24px) 0; }
.dash-search-label {
  font-family:'Syne',sans-serif; font-size:clamp(1.3rem,4vw,1.8rem); font-weight:700;
  line-height:1.2; margin-bottom:14px; letter-spacing:-.5px;
}
.dash-search-label span { background:var(--g-fire); -webkit-background-clip:text; -webkit-text-fill-color:transparent; }

.search-bar {
  display:flex; align-items:center;
  background:var(--glass); border:1px solid var(--border2);
  border-radius:var(--r-md); overflow:hidden; backdrop-filter:blur(12px);
  transition:var(--tr);
}
.search-bar:focus-within { border-color:rgba(255,92,0,.5); box-shadow:0 0 0 3px rgba(255,92,0,.08); }
.si { padding:0 12px; font-size:.95rem; opacity:.5; }
.search-input { flex:1; background:none; border:none; outline:none; color:var(--t1); font-family:'DM Sans',sans-serif; font-size:.88rem; padding:13px 0; }
.search-input::placeholder { color:var(--t2); }
.btn-locate { margin:6px; padding:9px 14px; border-radius:10px; background:var(--g-fire); border:none; color:#000; font-weight:700; font-size:.76rem; font-family:'DM Sans',sans-serif; white-space:nowrap; transition:var(--tr); }
.btn-locate:hover { box-shadow:var(--sh-fire); transform:scale(1.02); }

/* Gauge Banner */
.gauge-banner {
  margin:clamp(14px,3vw,20px) clamp(16px,4vw,24px) 0;
  padding:18px 20px; border-radius:var(--r-lg);
  background:linear-gradient(135deg,rgba(255,92,0,.1),rgba(255,170,0,.05));
  border:1px solid rgba(255,92,0,.18);
  display:flex; align-items:center; gap:16px;
  position:relative; overflow:hidden;
}
.gauge-banner::before { content:''; position:absolute; right:-16px; top:-16px; width:100px; height:100px; border-radius:50%; background:radial-gradient(circle,rgba(255,170,0,.14),transparent 70%); }
.gauge-svg  { width:68px; height:68px; flex-shrink:0; }
.g-track    { fill:none; stroke:rgba(255,255,255,.06); stroke-width:6; stroke-linecap:round; }
.g-fill     { fill:none; stroke:url(#gGrad); stroke-width:6; stroke-linecap:round; stroke-dasharray:163; stroke-dashoffset:40; animation:gaugeAnim 1.5s .5s ease both; }
.g-text     { fill:var(--amber); font-family:'Syne',sans-serif; font-size:13px; font-weight:800; }
.gauge-info { flex:1; }
.gauge-info h3 { font-family:'Syne',sans-serif; font-size:.95rem; font-weight:700; }
.gauge-info h3 span { font-size:1.6rem; background:var(--g-fire); -webkit-background-clip:text; -webkit-text-fill-color:transparent; }
.gauge-info p  { font-size:.73rem; color:var(--t2); margin-top:4px; line-height:1.5; }

/* Emergency Strip */
.emg-strip {
  margin:clamp(14px,3vw,16px) clamp(16px,4vw,24px) 0;
  padding:16px 18px; border-radius:var(--r-lg);
  background:linear-gradient(135deg,rgba(239,71,111,.08),rgba(255,92,0,.04));
  border:1px solid rgba(239,71,111,.22);
  display:flex; align-items:center; justify-content:space-between; gap:12px;
}
.emg-strip-left { display:flex; align-items:center; gap:12px; }
.emg-strip-icon { font-size:1.5rem; }
.emg-strip-title { font-family:'Syne',sans-serif; font-size:.95rem; font-weight:700; }
.emg-strip-sub   { font-size:.72rem; color:var(--t2); margin-top:2px; }

.btn-emg-open {
  position:relative; background:var(--g-red); border:none; border-radius:12px;
  color:#fff; font-family:'Syne',sans-serif; font-size:.95rem; font-weight:800;
  letter-spacing:1px; padding:11px 20px; flex-shrink:0;
  box-shadow:var(--sh-red); transition:var(--tr); overflow:visible;
}
.btn-emg-open:hover { transform:scale(1.05); }
.sos-ring {
  position:absolute; inset:-4px; border-radius:14px;
  border:2px solid rgba(239,71,111,.5);
  animation:sosPulseRing 1.8s ease-out infinite; pointer-events:none;
}

/* Filter chips */
.filter-wrap { padding:clamp(14px,3vw,20px) clamp(16px,4vw,24px) 0; }
.filter-row  { display:flex; gap:8px; overflow-x:auto; padding-bottom:4px; scrollbar-width:none; }
.filter-row::-webkit-scrollbar { display:none; }
.chip { flex-shrink:0; padding:7px 16px; border-radius:var(--r-pill); border:1px solid var(--border); background:var(--glass); color:var(--t2); font-size:.76rem; cursor:pointer; transition:var(--tr); white-space:nowrap; font-family:'DM Sans',sans-serif; }
.chip.active { background:rgba(255,92,0,.12); border-color:rgba(255,92,0,.4); color:var(--orange); font-weight:600; }
.chip:hover:not(.active) { border-color:var(--border2); color:var(--t1); }

/* Pump list */
.pump-list-wrap { padding:clamp(14px,3vw,20px) clamp(16px,4vw,24px); }
.list-hdr { display:flex; align-items:center; justify-content:space-between; margin-bottom:12px; }
.list-hdr-title { font-family:'Syne',sans-serif; font-size:.82rem; font-weight:700; text-transform:uppercase; letter-spacing:1.5px; color:var(--t2); display:flex; align-items:center; gap:8px; }
.live-badge { display:inline-flex; align-items:center; gap:5px; background:rgba(6,214,160,.1); border:1px solid rgba(6,214,160,.25); color:var(--green); padding:3px 9px; border-radius:var(--r-pill); font-size:.62rem; letter-spacing:1px; }
.live-dot   { width:5px; height:5px; border-radius:50%; background:var(--green); animation:blink 1.5s ease infinite; }
.list-count { font-size:.73rem; color:var(--t3); }
.pump-list  { display:flex; flex-direction:column; gap:12px; }


/* ================================================================
   7. EMERGENCY QUICK TILES
================================================================ */
.emg-quick-grid {
  display:grid; grid-template-columns:repeat(6,1fr); gap:8px;
  padding:clamp(14px,3vw,16px) clamp(16px,4vw,24px) 0;
}
.emg-qt {
  border-radius:var(--r-md); padding:12px 6px 10px;
  text-align:center; cursor:pointer; border:1px solid; transition:var(--tr);
}
.emg-qt:hover { transform:translateY(-3px); filter:brightness(1.2); }
.emg-qt.fuel      { background:rgba(255,170,0,.08); border-color:rgba(255,170,0,.2); }
.emg-qt.delivery  { background:rgba(255,92,0,.08);  border-color:rgba(255,92,0,.2);  }
.emg-qt.tow       { background:rgba(76,201,240,.08);border-color:rgba(76,201,240,.2);}
.emg-qt.police    { background:rgba(155,93,229,.08);border-color:rgba(155,93,229,.2);}
.emg-qt.ambulance { background:rgba(6,214,160,.08); border-color:rgba(6,214,160,.2); }
.emg-qt.loc       { background:rgba(239,71,111,.08);border-color:rgba(239,71,111,.2);}
.eqt-icon  { font-size:1.4rem; margin-bottom:5px; }
.eqt-label { font-size:.62rem; font-weight:600; color:var(--t2); white-space:nowrap; }


/* ================================================================
   8. PUMP CARDS
================================================================ */
.pump-card {
  background:var(--glass); border:1px solid var(--border);
  border-radius:var(--r-lg); overflow:hidden;
  backdrop-filter:blur(8px);
  transition:var(--tr); animation:cardIn .45s ease both;
}
.pump-card:hover { border-color:rgba(255,92,0,.32); transform:translateY(-3px); box-shadow:0 14px 36px rgba(0,0,0,.35); }

.pc-top { padding:16px 16px 12px; display:flex; gap:12px; align-items:flex-start; }
.pc-icon { width:46px; height:46px; border-radius:12px; flex-shrink:0; display:flex; align-items:center; justify-content:center; font-size:1.3rem; }
.pc-icon.avail   { background:rgba(6,214,160,.1);  border:1px solid rgba(6,214,160,.2);  }
.pc-icon.unavail { background:rgba(239,71,111,.08);border:1px solid rgba(239,71,111,.18);}
.pc-info { flex:1; min-width:0; }
.pc-name { font-family:'Syne',sans-serif; font-size:.98rem; font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.pc-loc  { font-size:.73rem; color:var(--t2); margin-top:3px; }
.pc-pill { flex-shrink:0; padding:4px 10px; border-radius:var(--r-pill); font-size:.64rem; font-weight:600; border:1px solid; white-space:nowrap; }
.pc-pill.on  { background:rgba(6,214,160,.1);  border-color:rgba(6,214,160,.25);  color:var(--green); }
.pc-pill.off { background:rgba(239,71,111,.08);border-color:rgba(239,71,111,.22);color:var(--red); }
.pc-meta { padding:0 16px 12px; display:flex; gap:12px; flex-wrap:wrap; }
.pc-meta-item { display:flex; align-items:center; gap:4px; font-size:.72rem; color:var(--t2); }
.pc-dist { margin-left:auto; padding:3px 10px; border-radius:var(--r-pill); background:rgba(255,92,0,.08); border:1px solid rgba(255,92,0,.18); color:var(--amber); font-size:.7rem; font-weight:600; }
.pc-divider { height:1px; background:var(--border); margin:0 16px; }
.pc-actions { display:grid; grid-template-columns:1fr 1fr; }
.pc-action { padding:12px; border:none; background:none; font-family:'DM Sans',sans-serif; font-size:.78rem; font-weight:500; cursor:pointer; transition:var(--tr); display:flex; align-items:center; justify-content:center; gap:6px; }
.pc-action:first-child { border-right:1px solid var(--border); }
.pc-action.call  { color:var(--green); }
.pc-action.route { color:var(--blue); }
.pc-action.call:hover  { background:rgba(6,214,160,.06); }
.pc-action.route:hover { background:rgba(76,201,240,.06); }

/* Empty state */
.pump-empty { text-align:center; padding:48px 20px; }
.pump-empty-icon { font-size:3rem; opacity:.35; display:block; margin-bottom:12px; }
.pump-empty p    { color:var(--t2); font-size:.85rem; }


/* ================================================================
   9. OWNER DASHBOARD
================================================================ */
.owner-hero {
  padding:clamp(24px,5vw,36px) clamp(16px,4vw,24px) 0;
  animation:cardIn .4s ease both;
}
.oh-greeting { font-size:.72rem; color:var(--t2); letter-spacing:1px; text-transform:uppercase; margin-bottom:4px; }
.oh-name  { font-family:'Syne',sans-serif; font-size:clamp(1.5rem,4vw,2rem); font-weight:800; letter-spacing:-.5px; line-height:1.2; }
.oh-email { font-size:.75rem; color:var(--t2); margin-top:4px; }

/* Stats */
.stats-grid {
  display:grid; grid-template-columns:repeat(3,1fr); gap:10px;
  padding:clamp(14px,3vw,20px) clamp(16px,4vw,24px) 0;
}
.stat-card { background:var(--glass); border:1px solid var(--border); border-radius:var(--r-md); padding:16px 12px; text-align:center; backdrop-filter:blur(8px); transition:var(--tr); animation:cardIn .45s ease both; }
.stat-card:hover { border-color:rgba(255,92,0,.3); transform:translateY(-3px); }
.sc-num { font-family:'Syne',sans-serif; font-size:1.8rem; font-weight:800; background:var(--g-fire); -webkit-background-clip:text; -webkit-text-fill-color:transparent; line-height:1; }
.sc-label { font-size:.63rem; color:var(--t2); margin-top:4px; }

/* Listing preview */
.listing-preview {
  margin:clamp(14px,3vw,16px) clamp(16px,4vw,24px) 0;
  background:linear-gradient(135deg,rgba(255,92,0,.1),rgba(255,170,0,.05));
  border:1px solid rgba(255,92,0,.2); border-radius:var(--r-lg);
  padding:16px 18px; display:flex; align-items:center; gap:14px;
  animation:cardIn .45s .1s ease both;
}
.lp-icon { width:50px; height:50px; border-radius:14px; background:var(--g-fire); flex-shrink:0; display:flex; align-items:center; justify-content:center; font-size:1.4rem; box-shadow:var(--sh-fire); }
.lp-info { flex:1; min-width:0; }
.lp-name { font-family:'Syne',sans-serif; font-size:.98rem; font-weight:700; }
.lp-sub  { font-size:.72rem; color:var(--t2); margin-top:3px; }
.btn-lp-edit { background:rgba(255,92,0,.1); border:1px solid rgba(255,92,0,.28); color:var(--orange); border-radius:10px; padding:8px 14px; font-size:.73rem; font-weight:500; transition:var(--tr); font-family:'DM Sans',sans-serif; white-space:nowrap; }
.btn-lp-edit:hover { background:rgba(255,92,0,.2); }

/* Owner Form */
.owner-form-wrap { padding:clamp(14px,3vw,20px) clamp(16px,4vw,24px); }
.owner-form-card { background:var(--glass); border:1px solid var(--border); border-radius:var(--r-lg); padding:clamp(18px,4vw,28px); backdrop-filter:blur(12px); animation:cardIn .45s .15s ease both; }

.ofc-header { display:flex; align-items:center; gap:12px; margin-bottom:20px; }
.ofc-hicon  { width:38px; height:38px; border-radius:10px; background:var(--g-fire); display:flex; align-items:center; justify-content:center; font-size:1rem; flex-shrink:0; }
.ofc-htitle { font-family:'Syne',sans-serif; font-size:1rem; font-weight:700; }
.ofc-hsub   { font-size:.7rem; color:var(--t2); }

.ofc-grid { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.fg { display:flex; flex-direction:column; gap:6px; }
.fg.full { grid-column:1/-1; }
.fl { font-size:.67rem; font-weight:600; text-transform:uppercase; letter-spacing:1.5px; color:var(--t2); }
.fi { background:rgba(255,255,255,.03); border:1px solid var(--border); border-radius:10px; padding:11px 13px; color:var(--t1); font-family:'DM Sans',sans-serif; font-size:.85rem; outline:none; transition:var(--tr); width:100%; }
.fi:focus { border-color:rgba(255,92,0,.5); background:rgba(255,92,0,.04); box-shadow:0 0 0 3px rgba(255,92,0,.08); }
.fi::placeholder { color:var(--t3); }
.fi option { background:#0C0F1A; }

.ofc-divider { height:1px; background:var(--border); margin:16px 0; }

/* Emergency checkboxes */
.emg-checks { display:grid; grid-template-columns:repeat(3,1fr); gap:7px; margin-top:4px; }
.ec-tile { display:flex; align-items:center; gap:7px; background:rgba(239,71,111,.05); border:1px solid rgba(239,71,111,.14); border-radius:8px; padding:9px 9px; cursor:pointer; transition:var(--tr); font-size:.73rem; color:var(--t2); }
.ec-tile input[type="checkbox"] { accent-color:var(--red); width:13px; height:13px; flex-shrink:0; }
.ec-tile:has(input:checked) { background:rgba(239,71,111,.12); border-color:rgba(239,71,111,.32); color:var(--t1); }

/* Availability toggle */
.avail-toggle { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.avbtn { padding:12px; border-radius:10px; border:1px solid var(--border); background:transparent; cursor:pointer; transition:var(--tr); font-family:'DM Sans',sans-serif; font-size:.8rem; font-weight:500; color:var(--t2); display:flex; align-items:center; justify-content:center; gap:6px; }
.avbtn.yes.active { background:rgba(6,214,160,.1);  border-color:rgba(6,214,160,.3);  color:var(--green); }
.avbtn.no.active  { background:rgba(239,71,111,.1); border-color:rgba(239,71,111,.3); color:var(--red); }

/* Publish button */
.btn-publish { width:100%; padding:14px; background:var(--g-fire); border:none; border-radius:var(--r-md); font-family:'Syne',sans-serif; font-size:.95rem; font-weight:700; color:#000; cursor:pointer; margin-top:20px; transition:var(--tr); }
.btn-publish:hover { transform:translateY(-2px); box-shadow:var(--sh-fire); }


/* ================================================================
   10. EMERGENCY MODAL
================================================================ */
.emg-modal-overlay {
  position:fixed; inset:0; z-index:400;
  background:rgba(0,0,0,.82); backdrop-filter:blur(8px);
  display:none; align-items:flex-end; justify-content:center;
}
.emg-modal-overlay.open { display:flex; }

.emg-modal {
  background:#0E1220; border:1px solid rgba(239,71,111,.18);
  border-radius:24px 24px 0 0;
  width:100%; max-width:560px; max-height:92vh;
  overflow-y:auto; padding-bottom:32px;
  scrollbar-width:thin; scrollbar-color:rgba(239,71,111,.3) transparent;
  animation:modalUp .4s cubic-bezier(.34,1.2,.64,1) both;
}
.emg-modal-hdr {
  display:flex; align-items:center; justify-content:space-between;
  padding:18px 20px; border-bottom:1px solid var(--border);
  position:sticky; top:0; background:#0E1220; z-index:2;
}
.emg-modal-title { font-family:'Syne',sans-serif; font-size:1.05rem; font-weight:800; }
.emg-close-btn { background:rgba(239,71,111,.1); border:1px solid rgba(239,71,111,.25); color:var(--red); width:30px; height:30px; border-radius:50%; font-size:.75rem; transition:var(--tr); }
.emg-close-btn:hover { background:var(--red); color:#fff; }

.emg-section { padding:16px 20px 0; }
.emg-sec-title { font-family:'Syne',sans-serif; font-size:.75rem; font-weight:700; text-transform:uppercase; letter-spacing:1.5px; color:var(--t2); margin-bottom:10px; }

/* Nearest pump card */
.emg-nearest-card { background:linear-gradient(135deg,rgba(255,170,0,.1),rgba(255,92,0,.06)); border:1px solid rgba(255,170,0,.2); border-radius:var(--r-md); padding:14px; display:flex; align-items:center; justify-content:space-between; gap:12px; }
.enc-info { flex:1; }
.enc-name { font-family:'Syne',sans-serif; font-size:.95rem; font-weight:700; }
.enc-loc  { font-size:.72rem; color:var(--t2); margin-top:3px; }
.enc-time { font-size:.7rem; color:var(--amber); margin-top:4px; }
.enc-btns { display:flex; gap:7px; flex-shrink:0; }
.enc-btn  { padding:7px 12px; border-radius:9px; border:1px solid; font-size:.74rem; font-weight:600; cursor:pointer; transition:var(--tr); font-family:'DM Sans',sans-serif; }
.enc-btn.green { background:rgba(6,214,160,.1);  border-color:rgba(6,214,160,.3);  color:var(--green); }
.enc-btn.blue  { background:rgba(76,201,240,.1);  border-color:rgba(76,201,240,.3);  color:var(--blue); }
.enc-btn:hover { filter:brightness(1.2); }

/* Helplines */
.helpline-grid { display:grid; grid-template-columns:1fr 1fr; gap:9px; }
.hl-card { display:flex; align-items:center; gap:10px; padding:11px 13px; border-radius:11px; border:1px solid; cursor:pointer; transition:var(--tr); }
.hl-card:hover { filter:brightness(1.18); transform:translateY(-2px); }
.hl-card.red    { background:rgba(239,71,111,.08); border-color:rgba(239,71,111,.2);  }
.hl-card.green  { background:rgba(6,214,160,.08);  border-color:rgba(6,214,160,.2);   }
.hl-card.orange { background:rgba(255,92,0,.08);   border-color:rgba(255,92,0,.2);    }
.hl-card.blue   { background:rgba(76,201,240,.08); border-color:rgba(76,201,240,.2);  }
.hl-card.purple { background:rgba(155,93,229,.08); border-color:rgba(155,93,229,.2);  }
.hl-card.yellow { background:rgba(255,209,102,.08);border-color:rgba(255,209,102,.2); }
.hl-icon  { font-size:1.3rem; flex-shrink:0; }
.hl-info  { flex:1; }
.hl-name  { font-size:.74rem; font-weight:600; }
.hl-num   { font-family:'Syne',sans-serif; font-size:.88rem; font-weight:800; color:var(--amber); }
.hl-call  { font-size:.62rem; font-weight:700; background:rgba(255,255,255,.08); border-radius:5px; padding:3px 7px; }

/* Roadside assistance */
.assist-row { display:grid; grid-template-columns:repeat(3,1fr); gap:9px; }
.assist-card { background:var(--glass); border:1px solid var(--border); border-radius:11px; padding:13px 8px; text-align:center; cursor:pointer; transition:var(--tr); }
.assist-card:hover { border-color:rgba(255,92,0,.3); transform:translateY(-3px); }
.ac-icon  { font-size:1.4rem; margin-bottom:5px; }
.ac-label { font-family:'Syne',sans-serif; font-size:.73rem; font-weight:700; }
.ac-sub   { font-size:.6rem; color:var(--t2); margin-top:3px; }

/* Share location */
.loc-box  { background:rgba(76,201,240,.05); border:1px solid rgba(76,201,240,.18); border-radius:11px; padding:13px 15px; }
.loc-text { font-size:.75rem; color:var(--t2); margin-bottom:10px; line-height:1.5; }
.loc-btns { display:flex; gap:7px; }
.loc-btn  { flex:1; padding:8px 6px; border-radius:9px; border:1px solid; font-size:.72rem; font-weight:600; cursor:pointer; transition:var(--tr); font-family:'DM Sans',sans-serif; text-align:center; }
.loc-btn.copy     { background:rgba(255,255,255,.05); border-color:var(--border2); color:var(--t1); }
.loc-btn.whatsapp { background:rgba(6,214,160,.08);   border-color:rgba(6,214,160,.25);  color:var(--green); }
.loc-btn.maps     { background:rgba(76,201,240,.08);  border-color:rgba(76,201,240,.25); color:var(--blue); }
.loc-btn:hover    { filter:brightness(1.2); }

/* Checklist */
.checklist { display:flex; flex-direction:column; gap:7px; }
.cl-item   { font-size:.77rem; color:var(--t2); padding:8px 10px; border-radius:8px; background:rgba(6,214,160,.04); border:1px solid rgba(6,214,160,.1); line-height:1.4; }

/* Bottom close button */
.btn-close-modal { display:block; width:calc(100% - 40px); margin:18px 20px 0; padding:13px; background:rgba(239,71,111,.1); border:1px solid rgba(239,71,111,.28); border-radius:11px; color:var(--red); font-family:'Syne',sans-serif; font-size:.9rem; font-weight:700; cursor:pointer; transition:var(--tr); }
.btn-close-modal:hover { background:rgba(239,71,111,.18); }


/* ================================================================
   11. TOAST
================================================================ */
.toast-wrap { position:fixed; bottom:24px; left:50%; transform:translateX(-50%); z-index:999; pointer-events:none; }
.toast { padding:11px 22px; border-radius:var(--r-pill); font-size:.8rem; font-weight:500; background:rgba(18,22,34,.96); border:1px solid var(--border2); backdrop-filter:blur(20px); transform:translateY(60px) scale(.9); opacity:0; transition:all .4s cubic-bezier(.34,1.56,.64,1); white-space:nowrap; }
.toast.show    { transform:translateY(0) scale(1); opacity:1; }
.toast.success { border-color:rgba(6,214,160,.3);  color:var(--green); }
.toast.error   { border-color:rgba(239,71,111,.3); color:var(--red); }
.toast.info    { border-color:rgba(255,92,0,.3);   color:var(--amber); }


/* ================================================================
   12. KEYFRAME ANIMATIONS
================================================================ */
@keyframes fadeIn      { from{opacity:0}                        to{opacity:1} }
@keyframes slideUp     { from{opacity:0;transform:translateY(28px) scale(.96)} to{opacity:1;transform:translateY(0) scale(1)} }
@keyframes splashIn    { from{opacity:0;transform:translateY(24px) scale(.95)} to{opacity:1;transform:translateY(0) scale(1)} }
@keyframes cardIn      { from{opacity:0;transform:translateY(14px)}  to{opacity:1;transform:translateY(0)} }
@keyframes orbPulse    { 0%,100%{transform:translate(-50%,-65%) scale(1);opacity:.8} 50%{transform:translate(-50%,-65%) scale(1.15);opacity:1} }
@keyframes gaugeAnim   { from{stroke-dashoffset:163} to{stroke-dashoffset:40} }
@keyframes modalUp     { from{transform:translateY(100%);opacity:0} to{transform:translateY(0);opacity:1} }
@keyframes blink       { 0%,100%{opacity:1} 50%{opacity:.3} }
@keyframes sosPulseNav { 0%,100%{box-shadow:0 0 10px rgba(239,71,111,.3)} 50%{box-shadow:0 0 22px rgba(239,71,111,.6)} }
@keyframes sosPulseRing{ 0%{transform:scale(1);opacity:.8} 100%{transform:scale(1.35);opacity:0} }


/* ================================================================
   13. RESPONSIVE BREAKPOINTS
================================================================ */

/* ── Tablet (≥ 600px) ─────────────────────────────────────── */
@media (min-width: 600px) {
  .role-grid          { grid-template-columns: 1fr 1fr; max-width: 480px; }
  .emg-quick-grid     { grid-template-columns: repeat(6,1fr); }
  .helpline-grid      { grid-template-columns: repeat(2,1fr); }
  .auth-card          { padding: 40px; }
  .ofc-grid           { grid-template-columns: 1fr 1fr; }
  .emg-checks         { grid-template-columns: repeat(3,1fr); }
}

/* ── Small mobile (≤ 420px): stack & simplify ────────────── */
@media (max-width: 420px) {
  .role-grid          { grid-template-columns: 1fr; }
  .role-card          { display:flex; align-items:center; gap:14px; text-align:left; padding:18px 16px; }
  .role-card-icon     { font-size:2rem; flex-shrink:0; }
  .role-card-arrow    { margin-left:auto; flex-shrink:0; }

  .emg-quick-grid     { grid-template-columns: repeat(3,1fr); }
  .helpline-grid      { grid-template-columns: 1fr; }
  .ofc-grid           { grid-template-columns: 1fr; }
  .emg-checks         { grid-template-columns: repeat(2,1fr); }
  .stats-grid         { grid-template-columns: repeat(3,1fr); }
  .assist-row         { grid-template-columns: repeat(3,1fr); }

  .topnav-logo        { font-size:1.1rem; }
  .btn-sos-nav        { font-size:.65rem; padding:5px 9px; }
  .btn-nav-logout     { font-size:.65rem; padding:5px 9px; }
}

/* ── Desktop (≥ 1024px): center content ─────────────────── */
@media (min-width: 1024px) {
  #screen-user-dashboard,
  #screen-owner-dashboard { max-width: 860px; margin: 0 auto; }

  .emg-modal { border-radius: 20px; margin-bottom: 40px; }

  .auth-card { max-width: 480px; }

  /* Wider pump card actions on desktop */
  .pc-actions { grid-template-columns: 1fr 1fr; }

  /* 3-col helplines on desktop */
  .helpline-grid { grid-template-columns: repeat(3,1fr); }
}

/* ── Very large screens (≥ 1400px) ──────────────────────── */
@media (min-width: 1400px) {
  #screen-user-dashboard,
  #screen-owner-dashboard { max-width: 960px; }
}