/* ==========================================================================
   Vipeperushi.com(TM) — assets/css/style.css
   Palette from the seed deck:
     --vp-primary  #0E9E7E  TEAL   primary buttons / CTAs
     --vp-dark     #12243B  NAVY   hero, headings
     --vp-accent   #E9A23B  AMBER  highlights, badges, the live-dot
     --vp-soft     #EAF5F1  soft teal tint
   ========================================================================== */
:root{
  --vp-primary:#0E9E7E;
  --vp-primary-d:#0b8268;
  --vp-dark:#12243B;
  --vp-dark-2:#1b3454;
  --vp-accent:#E9A23B;
  --vp-soft:#EAF5F1;
  --vp-ink:#1f2d3d;
  --vp-muted:#5b6b7b;
  --bs-link-color-rgb:14,158,126;
  --bs-link-hover-color-rgb:11,130,104;
}

/* ---- Base ---------------------------------------------------------------- */
body.vp-body{
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  color:var(--vp-ink);
  background:#fff;
}
.vp-main{min-height:60vh;}
h1,h2,h3,h4,h5{color:var(--vp-dark);font-weight:700;letter-spacing:-.01em;}
a{text-decoration:none;}
a:hover{text-decoration:underline;}

/* ---- Buttons (override Bootstrap btn vars) ------------------------------- */
.btn-primary{
  --bs-btn-bg:var(--vp-primary);--bs-btn-border-color:var(--vp-primary);
  --bs-btn-hover-bg:var(--vp-primary-d);--bs-btn-hover-border-color:var(--vp-primary-d);
  --bs-btn-active-bg:var(--vp-primary-d);--bs-btn-active-border-color:var(--vp-primary-d);
  --bs-btn-disabled-bg:var(--vp-primary);--bs-btn-disabled-border-color:var(--vp-primary);
}
.btn-outline-primary{
  --bs-btn-color:var(--vp-primary);--bs-btn-border-color:var(--vp-primary);
  --bs-btn-hover-bg:var(--vp-primary);--bs-btn-hover-border-color:var(--vp-primary);
  --bs-btn-active-bg:var(--vp-primary);--bs-btn-active-border-color:var(--vp-primary);
}
.text-primary{color:var(--vp-primary)!important;}
.bg-soft{background:var(--vp-soft)!important;}
.text-amber{color:var(--vp-accent)!important;}
a:not(.btn):not(.nav-link):not(.navbar-brand){color:var(--vp-primary-d);}

/* ---- Brand wordmark + logo mark ----------------------------------------- */
.vp-brand{display:inline-flex;align-items:center;gap:.5rem;}
.vp-logo-mark{
  display:inline-flex;align-items:center;justify-content:center;
  width:30px;height:30px;border-radius:8px;background:var(--vp-primary);color:#fff;
  box-shadow:0 1px 2px rgba(0,0,0,.15);
}
.vp-wordmark{font-weight:800;font-size:1.18rem;color:var(--vp-dark);letter-spacing:-.02em;}
.vp-wordmark sup{font-size:.55em;font-weight:700;top:-.7em;}
.vp-wordmark-light{color:#fff;}

/* ---- Navbar -------------------------------------------------------------- */
.vp-navbar{background:var(--vp-dark);box-shadow:0 2px 14px rgba(18,36,59,.18);}
.vp-navbar .nav-link{color:rgba(255,255,255,.82);font-weight:500;}
.vp-navbar .nav-link:hover{color:#fff;text-decoration:none;}
.vp-navbar .navbar-toggler{border-color:rgba(255,255,255,.3);}
.vp-navbar .navbar-toggler-icon{
  background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(255,255,255,0.85)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

/* ---- Hero ---------------------------------------------------------------- */
.vp-hero{
  background:linear-gradient(135deg,var(--vp-dark) 0%,var(--vp-dark-2) 60%,#143a5a 100%);
  color:#fff;padding:4.5rem 0 4rem;position:relative;overflow:hidden;
}
.vp-hero h1{color:#fff;font-size:clamp(2rem,4.6vw,3.3rem);line-height:1.08;}
.vp-hero .lead{color:rgba(255,255,255,.86);font-size:1.12rem;max-width:38rem;}
.vp-hero .vp-hero-accent{color:var(--vp-accent);}
.vp-eyebrow{
  display:inline-block;text-transform:uppercase;letter-spacing:.14em;font-size:.72rem;
  font-weight:700;color:var(--vp-accent);margin-bottom:.85rem;
}

/* ---- Live tracking preview card ----------------------------------------- */
.vp-live-card{
  background:#fff;border-radius:16px;padding:1.4rem 1.4rem 1.1rem;
  box-shadow:0 18px 50px rgba(8,20,35,.35);color:var(--vp-ink);
}
.vp-live-head{display:flex;align-items:center;gap:.5rem;margin-bottom:.25rem;}
.vp-live-dot{
  width:10px;height:10px;border-radius:50%;background:var(--vp-accent);
  box-shadow:0 0 0 0 rgba(233,162,59,.6);animation:vp-pulse 1.8s infinite;
}
@keyframes vp-pulse{
  0%{box-shadow:0 0 0 0 rgba(233,162,59,.55);}
  70%{box-shadow:0 0 0 12px rgba(233,162,59,0);}
  100%{box-shadow:0 0 0 0 rgba(233,162,59,0);}
}
.vp-live-stat{padding:.55rem 0;border-bottom:1px solid #eef1f4;}
.vp-live-stat:last-child{border-bottom:0;}
.vp-live-num{font-size:1.5rem;font-weight:800;color:var(--vp-dark);line-height:1;}
.vp-live-lbl{font-size:.8rem;color:var(--vp-muted);}

/* ---- Cards / sections ---------------------------------------------------- */
.vp-card{
  background:#fff;border:1px solid #e9eef2;border-radius:14px;padding:1.5rem;
  height:100%;transition:transform .15s ease,box-shadow .15s ease;
}
.vp-card:hover{transform:translateY(-3px);box-shadow:0 12px 30px rgba(18,36,59,.10);}
.vp-card .vp-icon{
  width:44px;height:44px;border-radius:11px;background:var(--vp-soft);color:var(--vp-primary-d);
  display:inline-flex;align-items:center;justify-content:center;font-size:1.35rem;margin-bottom:.85rem;
}
.vp-section{padding:3.5rem 0;}
.vp-section-soft{background:var(--vp-soft);}
.vp-step-num{
  width:34px;height:34px;border-radius:50%;background:var(--vp-dark);color:#fff;
  display:inline-flex;align-items:center;justify-content:center;font-weight:700;margin-bottom:.6rem;
}

/* ---- Pricing tiers ------------------------------------------------------- */
.vp-tier{
  background:#fff;border:1px solid #e3e9ee;border-radius:16px;padding:1.75rem 1.5rem;height:100%;
  position:relative;
}
.vp-tier.featured{
  border-color:var(--vp-primary);box-shadow:0 14px 40px rgba(14,158,126,.16);
}
.vp-tier .vp-tier-name{font-size:1.1rem;font-weight:700;color:var(--vp-dark);}
.vp-tier .vp-tier-price{font-size:1.9rem;font-weight:800;color:var(--vp-dark);}
.vp-tier .vp-tier-price small{font-size:.9rem;font-weight:600;color:var(--vp-muted);}
.vp-tier .vp-badge-feat{
  position:absolute;top:-12px;right:16px;background:var(--vp-accent);color:#3a2a06;
  font-size:.72rem;font-weight:700;padding:.25rem .6rem;border-radius:20px;
}
.vp-tier ul{list-style:none;padding-left:0;margin:1rem 0 0;}
.vp-tier li{padding:.32rem 0;color:var(--vp-muted);display:flex;gap:.5rem;}
.vp-tier li i{color:var(--vp-primary);}

/* ---- Map + wizard -------------------------------------------------------- */
#map{height:300px;width:100%;border-radius:12px;border:1px solid #d7dee4;}
.vp-pill{
  display:inline-flex;align-items:center;gap:.4rem;padding:.4rem .75rem;border-radius:30px;
  background:#eef2f5;color:var(--vp-muted);font-size:.85rem;font-weight:600;
}
.vp-pill.active{background:var(--vp-dark);color:#fff;}
.vp-pill.done{background:var(--vp-soft);color:var(--vp-primary-d);}
.vp-step{display:none;}
.vp-step.active{display:block;}
.vp-pills{position:relative;}
.vp-choice{
  display:block;border:1px solid #dbe3e9;border-radius:12px;padding:.9rem 1rem;cursor:pointer;
  background:#fff;transition:border-color .15s ease, box-shadow .15s ease, background .15s ease;
}
.vp-choice:hover{border-color:var(--vp-primary);}
.vp-choice:has(input:checked){
  border-color:var(--vp-primary);background:var(--vp-soft);box-shadow:0 0 0 2px rgba(14,158,126,.15);
}
.vp-estimate{
  background:var(--vp-soft);border:1px solid #cfe7df;border-radius:12px;padding:1.1rem 1.25rem;
}
.vp-estimate .vp-est-num{font-size:1.8rem;font-weight:800;color:var(--vp-dark);}
.vp-quote-panel{
  background:#fff7ec;border:1px solid #f3dcae;border-radius:12px;padding:1.1rem 1.25rem;
}

/* ---- Tables / admin ------------------------------------------------------ */
.vp-stat-tile{
  background:#fff;border:1px solid #e9eef2;border-radius:12px;padding:1rem 1.15rem;height:100%;
}
.vp-stat-tile .n{font-size:1.7rem;font-weight:800;color:var(--vp-dark);line-height:1;}
.vp-stat-tile .l{font-size:.8rem;color:var(--vp-muted);}
.vp-admin-nav .nav-link{color:var(--vp-muted);font-weight:600;border-radius:8px;}
.vp-admin-nav .nav-link.active{background:var(--vp-dark);color:#fff;}
.vp-queue-item{border-left:3px solid var(--vp-accent);background:#fffdf8;}
.vp-queue-icon{
  display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;border-radius:10px;
  background:var(--vp-soft);font-size:1.05rem;flex:0 0 auto;
}

/* ---- Auth cards ---------------------------------------------------------- */
.vp-auth-wrap{max-width:430px;margin:3rem auto;}
.vp-auth-card{background:#fff;border:1px solid #e9eef2;border-radius:16px;padding:2rem;box-shadow:0 10px 30px rgba(18,36,59,.06);}

/* ---- Footer -------------------------------------------------------------- */
.vp-footer{background:var(--vp-dark);color:#fff;}
.vp-foot-links a{color:rgba(255,255,255,.78);}
.vp-foot-links a:hover{color:#fff;}

/* ---- Misc ---------------------------------------------------------------- */
.vp-note{font-size:.85rem;color:var(--vp-muted);}
.leaflet-container{font:inherit;}
@media (prefers-reduced-motion:reduce){
  .vp-live-dot{animation:none;}
  .vp-card{transition:none;}
}