:root{
  --bg:#f6f1e6;
  --card:#ffffff;
  --text:#10312a;
  --muted:#56706a;
  --border:#e6ddcf;
  --shadow:0 10px 26px rgba(16,49,42,.08);
  --primary:#2aa89a;
  --primary-2:#1b8f82;
  --accent:#e11d74;
  --accent-2:#c10f5f;
  --cta:#f07c2e;
  --danger:#d64545;
  --ok:#2f9e44;
}

*{box-sizing:border-box}
html,body{
  margin:0;
  padding:0;
  font-family:Montserrat,system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Arial,sans-serif;
  background:var(--bg);
  color:var(--text);
}

.page{max-width:1100px;margin:0 auto;padding:140px 16px 24px}

.topbar{
  position:fixed;
  top:0;
  left:0;
  right:0;
  z-index:9;
  background:linear-gradient(180deg,#f6f1e6 0%,rgba(246,241,230,.96) 100%);
  backdrop-filter:saturate(140%) blur(6px);
  border-bottom:1px solid var(--border);
  padding:14px 16px;
  height:112px;
}

.brand{display:flex;align-items:center;gap:12px;max-width:1100px;margin:0 auto}
.brand-logo{
  width:84px;
  height:84px;
  object-fit:contain;
  border-radius:12px;
  background:rgba(255,255,255,.65);
  border:1px solid rgba(16,49,42,.12);
  box-shadow:0 10px 20px rgba(16,49,42,.06);
}
.brand-text{display:flex;flex-direction:column;gap:2px}
.brand-title{display:flex;align-items:center;gap:8px}

.topbar h1{margin:0;font-size:28px;letter-spacing:.25px;color:var(--primary-2);line-height:1.1}

.burger{
  margin-left:auto;
  display:none;
  align-items:center;
  justify-content:center;
  width:48px;
  height:48px;
  border-radius:12px;
  border:1px solid rgba(16,49,42,.14);
  background:#fff;
  color:var(--primary-2);
  font-size:22px;
  cursor:pointer;
}

.tabbar{
  position:sticky;
  top:112px;
  z-index:3;
  background:linear-gradient(180deg,#f6f1e6 0%,rgba(246,241,230,.96) 100%);
  backdrop-filter:saturate(140%) blur(6px);
  display:flex;
  gap:8px;
  justify-content:center;
  padding:10px 16px;
  border-bottom:1px solid var(--border);
}
.tab{
  color:var(--primary-2);
  text-decoration:none;
  padding:12px 14px;
  border-radius:999px;
  font-weight:900;
  font-size:18px;
  line-height:1;
  background:transparent;
  transition:transform .16s ease, box-shadow .22s ease, background .16s ease;
}
.tab.active{background:#fff;color:var(--primary-2);box-shadow:inset 0 -3px 0 var(--accent)}
.tab:hover{background:#fff;transform:translateY(-3px);box-shadow:0 18px 40px rgba(16,49,42,.16)}

.impactbar{
  margin-left:auto;
  display:flex;
  gap:10px;
  align-items:center;
  flex-wrap:nowrap;
}
.impact{
  min-width:170px;
  background:var(--card);
  border:1px solid transparent;
  border-radius:16px;
  padding:10px 12px;
  box-shadow:0 10px 26px rgba(16,49,42,.06);
  text-align:center;
  transition:transform .18s ease, box-shadow .22s ease;
  position:relative;
  overflow:hidden;
}
.impact::before{
  content:"";
  position:absolute;
  inset:-4px;
  border-radius:20px;
  background:conic-gradient(from 0deg, var(--accent), #ff4fb3, var(--cta), #ffd35a, var(--primary), var(--accent));
  animation:spinBorder 3.2s linear infinite;
  z-index:0;
}
.impact::after{
  content:"";
  position:absolute;
  inset:4px;
  border-radius:12px;
  background:var(--card);
  z-index:1;
}
.impact > *{position:relative;z-index:2}
.impact:hover{transform:translateY(-5px);box-shadow:0 24px 54px rgba(16,49,42,.18)}

@keyframes spinBorder{to{transform:rotate(360deg)}}
.impact-value{
  font-size:34px;
  font-weight:900;
  letter-spacing:.5px;
  color:var(--primary-2);
  line-height:1;
}
.impact-label{
  margin-top:6px;
  font-weight:700;
  color:var(--muted);
  font-size:13px;
}

@media (max-width: 760px){
  .brand{
    display:grid;
    grid-template-columns:auto minmax(0,1fr) auto auto;
    column-gap:10px;
    align-items:center;
  }
  .brand-logo{width:64px;height:64px}
  .topbar{height:112px}
  .brand-text{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .impactbar{margin-left:0;justify-content:flex-end;gap:8px;flex-wrap:nowrap;white-space:nowrap;max-width:140px}
  .impact{min-width:0;max-width:140px}
  .burger{margin-left:0}

  .topbar h1{font-size:16px}

  .burger{display:inline-flex}
  .tabbar{display:none}
  body.nav-open .tabbar{
    display:flex;
    position:fixed;
    top:0;
    left:0;
    right:0;
    bottom:0;
    flex-direction:column;
    justify-content:flex-start;
    padding:140px 16px 16px;
    gap:10px;
    z-index:8;
    border-bottom:none;
  }
  body.nav-open::after{content:"";position:fixed;inset:0;background:rgba(0,0,0,.25);z-index:7}
  body.nav-open{overflow:hidden}
  .topbar{z-index:9}

  .impactbar{width:auto}
  .impact{min-width:auto;flex:0 1 auto;padding:6px 8px}
  .impact-value{font-size:clamp(16px,5vw,22px)}
  .impact-label{font-size:11px;margin-top:2px}
  body.nav-open .impactbar{display:none}

  .form-row{grid-template-columns:1fr;gap:0}
  /* Ensure content sits below fixed topbar on small screens where tabbar is hidden */
  .page{padding:160px 12px 20px}
}

@media (max-width: 380px){
  .topbar h1{font-size:12px}
  .impactbar{gap:6px; max-width:110px; white-space:nowrap}
  .impact{padding:4px 6px}
  .impact-value{font-size:18px}
  .impact-label{display:none}
}

h1,h2,h3{margin:10px 0}
h2{font-size:26px;color:var(--primary-2)}
h3{font-size:18px;color:var(--primary-2)}
.muted{color:var(--muted)}

.card{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:16px;
  padding:14px 14px;
  margin:12px 0;
  box-shadow:var(--shadow);
  transition:transform .18s ease, box-shadow .22s ease;
}
.card:hover{transform:translateY(-6px);box-shadow:0 28px 60px rgba(16,49,42,.18)}

.card.ride-open{background:rgba(46, 204, 113, .14);border-color:rgba(46, 204, 113, .28)}
.card.ride-full{background:rgba(231, 76, 60, .14);border-color:rgba(231, 76, 60, .30)}
.card.ride-open:hover{box-shadow:0 28px 60px rgba(16,49,42,.18), 0 12px 30px rgba(46, 204, 113, .18)}
.card.ride-full:hover{box-shadow:0 28px 60px rgba(16,49,42,.18), 0 12px 30px rgba(231, 76, 60, .18)}

.list{list-style:none;margin:0;padding:0}
.list .card{margin-bottom:12px}

.card.section{
  background:linear-gradient(180deg,#ffffff 0%, #faf6ee 100%);
  border:1px dashed var(--border);
  box-shadow:none;
  padding:10px 12px;
  border-radius:14px;
}
.card.section h4{margin:6px 0 4px 0;color:var(--primary-2)}
.card.req{border-left:4px solid rgba(16,49,42,.14)}
.card.req.accepted{border-left-color: rgba(47,158,68,.6);}
.card.req.pending{border-left-color: rgba(240,124,46,.7);}

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  background:rgba(16,49,42,.06);
  color:var(--text);
  border:1px solid rgba(16,49,42,.12);
  border-radius:999px;
  padding:10px 14px;
  text-decoration:none;
  cursor:pointer;
  font-weight:700;
  transition:transform .14s ease, box-shadow .22s ease, background .14s ease;
}
.btn.primary{background:var(--primary);border-color:rgba(16,49,42,.08);color:#fff}
.btn.primary:hover{background:var(--primary-2)}
.btn.danger{background:var(--danger);border-color:rgba(0,0,0,.08);color:#fff}
.btn.block{display:flex;width:100%;text-align:center}
.btn.small{padding:8px 10px;font-size:13px}

/* 3D hover effects for buttons */
.btn:hover{transform:translateY(-6px);box-shadow:0 20px 40px rgba(16,49,42,.20)}
.btn:active{transform:translateY(-2px);box-shadow:0 12px 24px rgba(16,49,42,.18)}

.hero{padding:22px 12px}
.hero h2{font-size:30px}
.cta-row{display:flex;gap:10px;align-items:center;margin:12px 0;flex-wrap:wrap}
.cta-row .btn.primary{background:var(--cta)}
.cta-row .btn.primary:hover{background:#e56f23}

.form label{display:block;margin:10px 0;font-weight:600;color:var(--muted)}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:12px;align-items:end}
.form input,.form select,.form textarea{
  width:100%;
  padding:12px 12px;
  border-radius:12px;
  border:1px solid rgba(16,49,42,.14);
  background:#fff;
  color:var(--text);
  box-shadow:0 1px 0 rgba(16,49,42,.03);
  font-size:18px;
  line-height:1.3;
  transition:box-shadow .2s ease, transform .1s ease, border-color .15s ease;
}
.form input:hover,.form select:hover,.form textarea:hover{box-shadow:0 14px 34px rgba(16,49,42,.16);transform:translateY(-2px)}
.form input:focus,.form select:focus,.form textarea:focus{outline:3px solid rgba(42,168,154,.22);border-color:rgba(42,168,154,.55)}

/* Better date/time inputs */
.form input[type="date"],
.form input[type="datetime-local"],
.form input[type="time"]{ font-size:16px; line-height:1.3; padding-right:36px; }
.form input[type="date"]::-webkit-calendar-picker-indicator,
.form input[type="datetime-local"]::-webkit-calendar-picker-indicator,
.form input[type="time"]::-webkit-calendar-picker-indicator{ width:18px; height:18px; opacity:.7; cursor:pointer; margin-right:6px; }
.form input[type="date"]::-webkit-calendar-picker-indicator:hover,
.form input[type="datetime-local"]::-webkit-calendar-picker-indicator:hover,
.form input[type="time"]::-webkit-calendar-picker-indicator:hover{ opacity:1; }

fieldset{border:1px solid rgba(16,49,42,.14);border-radius:14px;padding:12px;margin:10px 0}
.error{color:var(--danger);margin-top:8px;font-weight:600}
.empty{color:var(--muted);padding:12px;text-align:center}

.filters{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin:10px 0}
.filters.sticky{position:sticky;top:56px;z-index:2;background:linear-gradient(180deg,var(--bg) 0%,rgba(246,241,230,.92) 100%);padding:10px 0}

/* Improve readability of controls in filters area */
.filters input,.filters select,.filters textarea{font-size:16px;line-height:1.3;transition:box-shadow .2s ease, transform .1s ease, border-color .15s ease}
.filters input:hover,.filters select:hover,.filters textarea:hover{box-shadow:0 14px 34px rgba(16,49,42,.16);transform:translateY(-2px)}

@media (prefers-reduced-motion: reduce){
  *{transition:none !important}
  .card:hover,.btn:hover,.tab:hover,.impact:hover{transform:none !important}
  .impact::before{animation:none !important}
}

.toast{
  position:fixed;
  left:50%;
  transform:translateX(-50%);
  bottom:18px;
  background:rgba(16,49,42,.92);
  border:1px solid rgba(255,255,255,.14);
  color:#fff;
  padding:10px 14px;
  border-radius:999px;
  box-shadow:0 10px 30px rgba(0,0,0,.18);
}
.hidden{display:none}
.modal.hidden{display:none}

.modal{position:fixed;inset:0;background:rgba(16,49,42,.35);display:flex;align-items:center;justify-content:center}
.modal .modal-content{background:var(--card);padding:16px;border-radius:16px;border:1px solid var(--border);width:min(520px,92vw);box-shadow:var(--shadow)}

.badge{display:inline-block;padding:3px 10px;border-radius:999px;font-size:.85rem;font-weight:700}
.badge.pending{background:rgba(240,124,46,.14);color:#9a3f05;border:1px solid rgba(240,124,46,.25)}
.badge.accepted{background:rgba(47,158,68,.14);color:#1f6d30;border:1px solid rgba(47,158,68,.25)}
.badge.refused{background:rgba(214,69,69,.12);color:#8b1f1f;border:1px solid rgba(214,69,69,.24)}
.badge.full{background:rgba(16,49,42,.06);color:var(--muted);border:1px solid rgba(16,49,42,.14)}

.btn[disabled], .btn.disabled{opacity:.55; cursor:not-allowed; filter:grayscale(.25)}

/* Back to top floating button */
.back-to-top{
  position:fixed;
  right:18px;
  bottom:22px;
  z-index:10;
  width:48px;
  height:48px;
  padding:0;
  border-radius:12px;
  font-size:20px;
  line-height:1;
  background:var(--cta);
  border:1px solid rgba(0,0,0,.08);
  color:#fff;
  box-shadow:0 10px 26px rgba(16,49,42,.18);
}
.back-to-top:hover{transform:translateY(-6px);box-shadow:0 20px 40px rgba(16,49,42,.28);background:#e56f23}