/* ==========================================================================
   GPSandTrack — styles
   Palette + typography aligned with the home page (index.php): green #0C7C4A,
   navy #0B1F33, green #16b364; fonts Manrope (body/headings) + JetBrains Mono.
   ========================================================================== */

/* ===== Fonts shared with the home page: Manrope + JetBrains Mono (defined in styles.css) ===== */
@import url("styles.css");

:root{
  --blue:#0C7C4A; --blue-d:#0A6B40; --navy:#0B1F33; --mut:#46586A;
  --green:#16b364; --bord:#EAEFF4; --bg-l:#F5F8FB; --chip:#EEF3F8; --dark:#0B1F33;
}

/* ===== Global ===== */
*{box-sizing:border-box;}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;}
body{margin:0;font-family:'Manrope',system-ui,-apple-system,sans-serif;color:#0B1F33;background:#fff;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;line-height:1.55;}
input,select,button,textarea{font-family:inherit;}
img{max-width:100%;}

/* helper type classes */
.ff-head{font-family:'Manrope',system-ui,sans-serif;}
.mono{font-family:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;}
.sec-h{font-weight:800;font-size:clamp(24px,3vw,34px);letter-spacing:-.02em;color:var(--navy);margin:0 0 12px;}

/* ===== Keyframes ===== */
@keyframes pingRing{0%{transform:scale(.9);opacity:.7;}70%{transform:scale(2.4);opacity:0;}100%{opacity:0;}}
@keyframes pulse{0%{transform:scale(1);opacity:1;}70%{transform:scale(2.2);opacity:0;}100%{opacity:0;}}
@keyframes sweep{to{transform:translate(-50%,-50%) rotate(360deg);}}
@keyframes scanline{0%{top:-2%;}100%{top:102%;}}
@keyframes fadeUp{from{opacity:.001;transform:translateY(16px);}to{opacity:1;transform:none;}}
@keyframes veh1{0%{left:14%;top:64%;}50%{left:48%;top:40%;}100%{left:70%;top:52%;}}
@keyframes veh2{0%{left:30%;top:24%;}50%{left:55%;top:48%;}100%{left:40%;top:74%;}}
@keyframes veh3{0%{left:74%;top:30%;}50%{left:60%;top:60%;}100%{left:80%;top:70%;}}

.pulse-dot{position:relative;}
.pulse-dot::after{content:'';position:absolute;inset:-3px;border-radius:50%;background:inherit;animation:pulse 1.9s ease-out infinite;}
.reveal{animation:fadeUp .7s both;}

/* ===== Buttons ===== */
.btn-primary{font-family:'Manrope',sans-serif;font-weight:700;font-size:15px;padding:14px 26px;border-radius:11px;
  /*box-shadow:0 14px 32px -12px rgba(12,124,74,.8);*/transition:transform .2s ease,box-shadow .2s ease;}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 18px 38px -12px rgba(12,124,74,.75);}
.btn-ghost{display:inline-flex;align-items:center;gap:8px;background:#fff;color:var(--navy);border:1px solid #dce6f5;
  font-family:'Manrope',sans-serif;font-weight:700;font-size:15px;padding:14px 24px;border-radius:11px;text-decoration:none;
  transition:border-color .2s ease,color .2s ease;cursor:pointer;}
.btn-ghost:hover{border-color:var(--blue);color:var(--blue-d);}
.link-accent{transition:color .2s ease;}
.link-accent:hover{color:var(--blue-d) !important;}

/* nav */
.nav-link{background:none;border:none;cursor:pointer;font-family:'Manrope',sans-serif;font-size:14.5px;font-weight:500;color:var(--mut);transition:color .2s ease;padding:0;}
.nav-link:hover{color:var(--navy);}
footer .nav-link{color:rgb(138,160,192);}
footer .nav-link:hover{color:#fff;}

/* cards */
.card-hover{transition:transform .2s ease,border-color .2s ease;}
.card-hover:hover{transform:translateY(-4px);border-color:var(--blue);}

/* dropdown product items */
.drop-item{display:block;background:none;border:none;cursor:pointer;text-align:left;padding:7px 0;font-family:'Manrope',sans-serif;font-size:14.5px;font-weight:700;color:var(--navy);transition:color .15s ease;}
.drop-item:hover{color:var(--blue);}

/* lineup filter chips */
.chip-tab{position:relative;background:#fff;border:1px solid var(--bord);border-radius:999px;padding:9px 18px;cursor:pointer;font-family:'Manrope',sans-serif;font-weight:700;font-size:13.5px;color:var(--navy);transition:border-color .18s ease,background .18s ease;}
.chip-tab:hover{border-color:var(--blue);}
.chip-tab.is-active{border:2px solid var(--blue);background:rgba(12,124,74,.08);}

/* breadcrumb */
.crumb{transition:color .15s ease;}
.crumb:hover{color:var(--blue-d) !important;}

/* finder option cards */
.finder-opt{position:relative;text-align:left;background:var(--bg-l);border:1px solid var(--bord);border-radius:14px;padding:22px;cursor:pointer;transition:border-color .18s ease,transform .18s ease;}
.finder-opt:hover{transform:translateY(-3px);border-color:var(--blue);}

/* form fields */
.fld{width:100%;padding:12px 14px;background:#fbfdff;border:1px solid #dce6f5;border-radius:9px;color:var(--navy);font-family:'Manrope',sans-serif;font-size:15px;}
.fld:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 3px rgba(12,124,74,.12);}
.fld-label{display:block;font-size:12px;color:var(--mut);text-transform:uppercase;letter-spacing:.08em;margin-bottom:7px;font-weight:600;}

a,button{transition:background .2s ease,transform .2s ease,box-shadow .2s ease,color .2s ease,border-color .2s ease;}

/* ===== Responsive ===== */
@media (max-width:900px){
  .grid-1{grid-template-columns:1fr !important;}
}
@media (max-width:760px){
  #primary-nav{display:none !important;}
  header .header-inner{flex-wrap:wrap;}
}
@media (max-width:520px){
  #header-phone-wrap{display:none !important;}
}