:root {
  --blue:       #003DA5;
  --blue-d:     #002B7A;
  --blue-l:     #EEF3FF;
  --blue-m:     #DBEAFE;
  --red:        #E8112D;
  --red-l:      #FFF0F2;
  --green:      #059669;
  --green-l:    #ECFDF5;
  --amber:      #D97706;
  --amber-l:    #FFFBEB;
  --purple:     #7C3AED;
  --purple-l:   #F5F3FF;
  --teal:       #0891B2;
  --teal-l:     #ECFEFF;
  --black:      #0F172A;
  --white:      #FFFFFF;
  --g50:        #F8FAFC;
  --g100:       #F1F5F9;
  --g200:       #E2E8F0;
  --g300:       #CBD5E1;
  --g400:       #94A3B8;
  --g500:       #64748B;
  --g600:       #475569;
  --g700:       #334155;
  --r-xs:       6px;
  --r-sm:       8px;
  --r:          12px;
  --r-lg:       16px;
  --r-xl:       20px;
  --r-full:     9999px;
  --shadow-xs:  0 1px 2px rgba(15,23,42,.06);
  --shadow-sm:  0 1px 3px rgba(15,23,42,.08), 0 1px 2px rgba(15,23,42,.06);
  --shadow-md:  0 4px 6px rgba(15,23,42,.07), 0 2px 4px rgba(15,23,42,.06);
  --shadow-lg:  0 10px 15px rgba(15,23,42,.08), 0 4px 6px rgba(15,23,42,.05);
  --shadow-xl:  0 20px 25px rgba(15,23,42,.08), 0 8px 10px rgba(15,23,42,.04);
  --t:          .2s cubic-bezier(.4,0,.2,1);
  --t-fast:     .15s cubic-bezier(.4,0,.2,1);
}

/* ═══════════════════════════════════════
   RESET & BASE
═══════════════════════════════════════ */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  font-family: 'Inter', sans-serif;
  background: #EEF3FF;
  color: var(--black);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  position: relative;
  min-height: 100vh;
}
/* Page background — soft blue radial blobs in the side margins */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 480px 380px at -8% 18%, rgba(0,61,165,.14) 0%, transparent 70%),
    radial-gradient(ellipse 420px 340px at 108% 25%, rgba(0,61,165,.12) 0%, transparent 70%),
    radial-gradient(ellipse 520px 400px at -10% 88%, rgba(0,61,165,.10) 0%, transparent 70%),
    radial-gradient(ellipse 460px 360px at 110% 82%, rgba(0,61,165,.13) 0%, transparent 70%);
}
/* Page background — automotive silhouettes in the side margins */
.page-deco {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}
.page-deco svg {
  position: absolute;
  color: var(--blue);
  display: block;
  /* Safety net: never let a deco SVG inflate to fill its container */
  max-width: 320px;
  max-height: 200px;
}
.deco-car-left {
  top: 22%;
  left: -30px;
  width: 280px;
  height: 112px;
  opacity: .28;
  transform: rotate(-4deg);
}
.deco-battery-right {
  top: 18%;
  right: -20px;
  width: 200px;
  height: 129px;
  opacity: .30;
  transform: rotate(5deg);
}
.deco-car-right-bottom {
  bottom: 14%;
  right: -50px;
  width: 320px;
  height: 131px;
  opacity: .24;
  transform: rotate(3deg) scaleX(-1);
}
.deco-battery-left-bottom {
  bottom: 22%;
  left: -10px;
  width: 170px;
  height: 109px;
  opacity: .28;
  transform: rotate(-6deg);
}
.deco-bolt-mid-left {
  top: 55%;
  left: 3%;
  width: 40px;
  height: 60px;
  opacity: .32;
}
.deco-bolt-mid-right {
  top: 62%;
  right: 4%;
  width: 36px;
  height: 54px;
  opacity: .32;
  transform: rotate(15deg);
}
@media (max-width: 1280px) {
  .deco-car-left            { width: 220px; height: 88px;  opacity: .22; }
  .deco-car-right-bottom    { width: 220px; height: 90px;  opacity: .22; }
  .deco-battery-right       { width: 150px; height: 96px;  opacity: .24; }
  .deco-battery-left-bottom { width: 150px; height: 96px;  opacity: .24; }
}
@media (max-width: 1024px) {
  .page-deco { display: none; }
}
/* Keep all real content above the decoration */
header, .hero, .wrap, footer { position: relative; z-index: 1; }
body.ar { font-family: 'Cairo', sans-serif; direction: rtl; }
a { text-decoration: none; }

/* ═══════════════════════════════════════
   HEADER
═══════════════════════════════════════ */
header {
  background: var(--blue);
  height: 68px;
  padding: 0 2.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: sticky;
  top: 0;
  z-index: 300;
  box-shadow: 0 2px 16px rgba(0,45,122,.3);
}
.logo img { height: 36px; filter: brightness(0) invert(1); }
.lang-btn {
  background: rgba(255,255,255,.12);
  border: 1.5px solid rgba(255,255,255,.25);
  color: #fff;
  padding: .4rem 1.1rem;
  border-radius: var(--r-full);
  font-family: inherit;
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .04em;
  cursor: pointer;
  transition: background var(--t);
}
.lang-btn:hover { background: rgba(255,255,255,.22); }

/* ═══════════════════════════════════════
   HERO
═══════════════════════════════════════ */
.hero {
  background: linear-gradient(120deg, var(--blue-d) 0%, var(--blue) 60%, #1a56c4 100%);
  padding: 4rem 2.5rem 3.5rem;
  position: relative;
  overflow: hidden;
}
.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: url("data:image/svg+xml,%3Csvg width='80' height='80' viewBox='0 0 80 80' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23fff' fill-opacity='.03'%3E%3Ccircle cx='40' cy='40' r='1.5'/%3E%3C/g%3E%3C/svg%3E");
}
.hero-glow {
  position: absolute;
  right: -100px;
  top: -100px;
  width: 500px;
  height: 500px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,.08) 0%, transparent 70%);
  pointer-events: none;
}
.hero-glow2 {
  position: absolute;
  left: -80px;
  bottom: -80px;
  width: 300px;
  height: 300px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(232,17,45,.15) 0%, transparent 70%);
  pointer-events: none;
}
.hero-inner {
  max-width: 1160px;
  margin: 0 auto;
  position: relative;
  z-index: 1;
}
.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.2);
  color: rgba(255,255,255,.92);
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .1em;
  xtext-transform: uppercase;
  padding: .35rem 1rem;
  border-radius: var(--r-full);
  margin-bottom: 1.25rem;
}
.hero-badge-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--red); display: inline-block; }
.hero h1 {
  font-size: clamp(1.8rem, 3.8vw, 2.8rem);
  font-weight: 700;
  color: #fff;
  line-height: 1.15;
  margin-bottom: .85rem;
  letter-spacing: -.02em;
}
.hero-sub {
  color: rgba(255,255,255,.72);
  font-size: .97rem;
  max-width: 560px;
  margin-bottom: 2.5rem;
  line-height: 1.7;
}
.hero-stats {
  display: flex;
  gap: 0;
  flex-wrap: wrap;
}
.hero-stat {
  padding: 0 2rem 0 0;
  border-right: 1px solid rgba(255,255,255,.15);
  margin-right: 2rem;
}
.hero-stat:last-child { border-right: none; margin-right: 0; }
body.ar .hero-stat { padding: 0 0 0 2rem; border-right: none; border-left: 1px solid rgba(255,255,255,.15); margin-right: 0; margin-left: 2rem; }
body.ar .hero-stat:last-child { border-left: none; }
.hero-stat-num { font-size: 1.8rem; font-weight: 700; color: #fff; line-height: 1; }
.hero-stat-label { font-size: .8rem; color: rgba(255,255,255,.75); text-transform: uppercase; letter-spacing: .07em; margin-top: .3rem; font-weight: 500; }

/* ═══════════════════════════════════════
   PAGE WRAP
═══════════════════════════════════════ */
.wrap { max-width: 1160px; margin: 0 auto; padding: 2.5rem 2rem; }

/* ═══════════════════════════════════════
   SECTION CARD SHELL
═══════════════════════════════════════ */
.sec {
  background: var(--white);
  border: 1px solid var(--g200);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-md);
  overflow: hidden;
  margin-bottom: 1.75rem;
  position: relative;
}
.sec::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--blue), #4a7dd1, transparent);
  pointer-events: none;
}
.sec-head {
  padding: 1.6rem 2rem 1.4rem;
  border-bottom: 1px solid var(--g100);
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}
.sec-head-left {}
.sec-eyebrow {
  font-size: .67rem;
  font-weight: 700;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--g400);
  margin-bottom: .4rem;
  display: flex;
  align-items: center;
  gap: .4rem;
}
.sec-eyebrow-icon { color: var(--blue); }
.sec-head h2 { font-size: 1.12rem; font-weight: 700; color: var(--black); margin-bottom: .2rem; }
.sec-head p { font-size: .82rem; color: var(--g500); }
.sec-body { padding: 1.75rem 2rem; }
.sec-badge {
  background: var(--blue-l);
  color: var(--blue);
  font-size: .72rem;
  font-weight: 700;
  padding: .32rem .85rem;
  border-radius: var(--r-full);
  white-space: nowrap;
  align-self: flex-start;
  margin-top: .15rem;
  letter-spacing: .03em;
}

/* ═══════════════════════════════════════
   COUNTRY PILLS — PREMIUM DESIGN
═══════════════════════════════════════ */
.country-pills {
  display: flex;
  flex-wrap: wrap;
  gap: .6rem;
  margin-bottom: 1.5rem;
}
.cp {
  display: flex;
  align-items: center;
  gap: .55rem;
  padding: .6rem 1.1rem .6rem .8rem;
  border: 1.5px solid var(--g200);
  border-radius: var(--r-full);
  background: var(--white);
  cursor: pointer;
  user-select: none;
  transition: all var(--t);
  position: relative;
  box-shadow: var(--shadow-xs);
}
.cp:hover {
  border-color: var(--blue);
  box-shadow: 0 4px 12px rgba(0,61,165,.14);
  transform: translateY(-1px);
}
.cp:active { transform: translateY(0) scale(.98); }
.cp.active {
  border-color: var(--blue);
  background: var(--blue);
  box-shadow: 0 4px 14px rgba(0,61,165,.3);
  transform: translateY(-1px);
}
.cp-flag-img {
  width: 28px;
  height: 21px;
  border-radius: 3px;
  object-fit: cover;
  flex-shrink: 0;
  box-shadow: 0 1px 3px rgba(0,0,0,.15);
  display: block;
}
.cp-flag-fb { font-size: 1.4rem; line-height: 1; flex-shrink: 0; display:none; }
.cp-flag { font-size: 1.35rem; line-height: 1; flex-shrink: 0; }
.cp-info {}
.cp-name {
  font-size: .83rem;
  font-weight: 600;
  color: var(--black);
  line-height: 1.2;
  white-space: nowrap;
}
.cp-warranty {
  font-size: .67rem;
  color: var(--g400);
  margin-top: .1rem;
  white-space: nowrap;
}
.cp.active .cp-name { color: #fff; }
.cp.active .cp-warranty { color: rgba(255,255,255,.65); }
.cp-check {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: rgba(255,255,255,.25);
  display: none;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-left: .2rem;
}
body.ar .cp-check { margin-left: 0; margin-right: .2rem; }
.cp.active .cp-check { display: flex; }

/* ═══════════════════════════════════════
   BUTTONS
═══════════════════════════════════════ */
.btn-row { display: flex; align-items: center; gap: .75rem; flex-wrap: wrap; margin-top: .25rem; }
.btn-primary {
  background: var(--red);
  color: #fff;
  border: none;
  padding: .7rem 1.5rem;
  border-radius: var(--r-full);
  font-family: inherit;
  font-size: .87rem;
  font-weight: 600;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  box-shadow: 0 3px 10px rgba(232,17,45,.28);
  transition: all var(--t);
}
.btn-primary:hover { background: #C80E27; box-shadow: 0 5px 16px rgba(232,17,45,.38); transform: translateY(-1px); }
.btn-primary:active { transform: translateY(0) scale(.97); }
.btn-ghost {
  background: var(--white);
  color: var(--blue);
  border: 1.5px solid var(--g200);
  padding: .67rem 1.35rem;
  border-radius: var(--r-full);
  font-family: inherit;
  font-size: .87rem;
  font-weight: 600;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  box-shadow: var(--shadow-xs);
  transition: all var(--t);
}
.btn-ghost:hover { border-color: var(--blue); background: var(--blue-l); transform: translateY(-1px); }

/* ═══════════════════════════════════════
   WARRANTY CONDITIONS — ICON-RICH
═══════════════════════════════════════ */
.cond-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; }
@media(max-width:680px) { .cond-grid { grid-template-columns: 1fr; } }
.cond-panel {
  border-radius: var(--r);
  overflow: hidden;
  border: 1px solid var(--g200);
  box-shadow: var(--shadow-sm);
}
.cond-panel-hdr {
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: 1rem 1.25rem;
}
.cond-panel.valid .cond-panel-hdr { background: linear-gradient(135deg, var(--blue-l) 0%, #f0f7ff 100%); border-bottom: 1px solid var(--blue-m); }
.cond-panel.void  .cond-panel-hdr { background: linear-gradient(135deg, var(--red-l) 0%, #fff5f5 100%); border-bottom: 1px solid #fecdd3; }
.cond-hdr-icon {
  width: 36px; height: 36px;
  border-radius: var(--r-sm);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.cond-panel.valid .cond-hdr-icon { background: var(--blue); }
.cond-panel.void  .cond-hdr-icon { background: var(--red); }
.cond-hdr-text {}
.cond-hdr-title { font-size: .9rem; font-weight: 700; }
.cond-panel.valid .cond-hdr-title { color: var(--blue); }
.cond-panel.void  .cond-hdr-title { color: var(--red); }
.cond-hdr-count { font-size: .72rem; color: var(--g500); margin-top: .1rem; }
.cond-body { background: var(--white); padding: 1rem 1.25rem; }
.cond-item {
  display: flex;
  align-items: flex-start;
  gap: .75rem;
  padding: .65rem 0;
  border-bottom: 1px solid var(--g100);
}
.cond-item:last-child { border-bottom: none; padding-bottom: 0; }
.cond-item:first-child { padding-top: 0; }
.cond-item-icon {
  width: 22px; height: 22px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  margin-top: .1rem;
}
.cond-panel.valid .cond-item-icon { background: var(--blue-l); color: var(--blue); }
.cond-panel.void  .cond-item-icon { background: var(--red-l); color: var(--red); }
.cond-item-text { font-size: .8rem; color: var(--g600); line-height: 1.55; }

/* ═══════════════════════════════════════
   WARRANTY BY APPLICATION — NEW SECTION
═══════════════════════════════════════ */
.app-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: .75rem;
}
.app-card {
  border: 1.5px solid var(--g200);
  border-radius: var(--r);
  padding: .9rem .75rem .75rem;
  background: var(--white);
  text-align: center;
  cursor: default;
  transition: all var(--t);
  box-shadow: var(--shadow-xs);
  position: relative;
  overflow: hidden;
}
.app-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  border-radius: var(--r) var(--r) 0 0;
}
.app-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-lg);
  border-color: var(--g300);
}
.app-card.private::before { background: var(--blue); }
.app-card.suv::before     { background: var(--purple); }
.app-card.commercial::before { background: var(--amber); }
.app-card.taxi::before    { background: var(--teal); }
.app-card.government::before { background: var(--green); }
.app-card.mixed::before   { background: var(--red); }
.app-card.bus::before        { background: #0891b2; }
.app-card.agricultural::before { background: #15803d; }

.app-icon-wrap {
  width: 38px; height: 38px;
  border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto .6rem;
  font-size: 1.15rem;
}
.app-card.private .app-icon-wrap     { background: var(--blue-l);   color: var(--blue);   }
.app-card.suv .app-icon-wrap         { background: var(--purple-l);  color: var(--purple); }
.app-card.commercial .app-icon-wrap  { background: var(--amber-l);   color: var(--amber);  }
.app-card.taxi .app-icon-wrap        { background: var(--teal-l);    color: var(--teal);   }
.app-card.government .app-icon-wrap  { background: var(--green-l);   color: var(--green);  }
.app-card.mixed .app-icon-wrap       { background: var(--red-l);     color: var(--red);    }
.app-card.bus .app-icon-wrap         { background: #ecfeff;  color: #0891b2; }
.app-card.agricultural .app-icon-wrap{ background: #f0fdf4;  color: #15803d; }

.app-name {
  font-size: .78rem;
  font-weight: 700;
  color: var(--black);
  margin-bottom: .28rem;
}
.app-dur-pill {
  display: inline-block;
  font-size: .68rem;
  font-weight: 700;
  padding: .18rem .65rem;
  border-radius: var(--r-full);
  margin-bottom: .3rem;
}
.app-card.private .app-dur-pill     { background: var(--blue-l);   color: var(--blue);   }
.app-card.suv .app-dur-pill         { background: var(--purple-l);  color: var(--purple); }
.app-card.commercial .app-dur-pill  { background: var(--amber-l);   color: var(--amber);  }
.app-card.taxi .app-dur-pill        { background: var(--teal-l);    color: var(--teal);   }
.app-card.government .app-dur-pill  { background: var(--green-l);   color: var(--green);  }
.app-card.mixed .app-dur-pill       { background: var(--red-l);     color: var(--red);    }
.app-card.bus .app-dur-pill         { background: #ecfeff;  color: #0891b2; }
.app-card.agricultural .app-dur-pill{ background: #f0fdf4;  color: #15803d; }
.app-desc { font-size: .68rem; color: var(--g400); line-height: 1.35; }

/* ═══════════════════════════════════════
   WARRANTY CENTERS
═══════════════════════════════════════ */
.centers-hdr {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.6rem 2rem 1.4rem;
  border-bottom: 1px solid var(--g100);
  flex-wrap: wrap;
}
.city-strip {
  padding: 1rem 2rem;
  border-bottom: 1px solid var(--g100);
  display: flex;
  flex-wrap: wrap;
  gap: .45rem;
  background: var(--g50);
}
.chip {
  border: 1.5px solid var(--g200);
  border-radius: var(--r-full);
  padding: .28rem .9rem;
  font-family: inherit;
  font-size: .76rem;
  font-weight: 500;
  color: var(--g600);
  background: var(--white);
  cursor: pointer;
  transition: all var(--t);
  box-shadow: var(--shadow-xs);
}
.chip:hover { border-color: var(--blue); color: var(--blue); background: var(--blue-l); }
.chip.active { background: var(--blue); border-color: var(--blue); color: #fff; font-weight: 600; box-shadow: 0 2px 8px rgba(0,61,165,.2); }
.chip-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 4px;
  background: rgba(0,0,0,.08);
  border-radius: 20px;
  font-size: .65rem;
  font-weight: 700;
  margin-left: .3rem;
  vertical-align: middle;
}
body.ar .chip-count { margin-left: 0; margin-right: .3rem; }
.chip.active .chip-count { background: rgba(255,255,255,.25); }

/* Centers grid */
.cg-outer { padding: 1.5rem 2rem; }
.cg {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 1rem;
}
.cc {
  border: 1px solid var(--g200);
  border-radius: var(--r);
  overflow: hidden;
  background: var(--white);
  box-shadow: var(--shadow-sm);
  transition: box-shadow var(--t), transform var(--t), border-color var(--t);
  display: flex;
  flex-direction: column;
}
.cc:hover {
  box-shadow: var(--shadow-lg);
  transform: translateY(-2px);
  border-color: var(--g300);
}
/* city badge strip at top */
.cc-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: .55rem 1rem .5rem;
  background: var(--g50);
  border-bottom: 1px solid var(--g100);
}
.cc-city-tag {
  font-size: .65rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--blue);
  background: var(--blue-l);
  padding: .18rem .6rem;
  border-radius: var(--r-full);
}
.cc-body { padding: 1rem 1rem .85rem; flex: 1; display: flex; flex-direction: column; }
.cc-name { font-size: .93rem; font-weight: 700; color: var(--black); margin-bottom: .8rem; line-height: 1.3; }
.cc-rows { display: flex; flex-direction: column; gap: .42rem; flex: 1; }
.cc-row {
  display: flex;
  align-items: flex-start;
  gap: .5rem;
  font-size: .78rem;
  color: var(--g600);
  line-height: 1.4;
}
.cc-row-icon {
  width: 16px; height: 16px;
  color: var(--g400);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  margin-top: .12rem;
}
.cc-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: .85rem;
  padding-top: .75rem;
  border-top: 1px solid var(--g100);
}
.cc-phone {
  font-size: .8rem;
  font-weight: 600;
  color: var(--blue);
  display: flex;
  align-items: center;
  gap: .35rem;
}
.cc-directions {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  font-size: .73rem;
  font-weight: 600;
  color: var(--red);
  background: var(--blue-l);
  border: 1px solid var(--blue-m);
  border-radius: var(--r-xs);
  padding: .32rem .75rem;
  cursor: pointer;
  text-decoration: none;
  transition: background var(--t);
}
.cc-directions:hover { background: var(--blue-m); }

/* ═══════════════════════════════════════
   PAGINATION — reference style
═══════════════════════════════════════ */
.pag-bar {
  display: none;
  padding: 1.25rem 2rem;
  border-top: 1px solid var(--g100);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  flex-wrap: wrap;
  background: var(--g50);
}
.pag-page-label {
  font-size: .85rem;
  font-weight: 500;
  color: var(--g700);
  white-space: nowrap;
  padding: 0 .25rem;
}
.pag-btn {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  font-family: inherit;
  font-size: .83rem;
  font-weight: 600;
  padding: .5rem 1.25rem;
  border-radius: var(--r-sm);
  border: 1.5px solid var(--g200);
  background: var(--white);
  color: var(--g700);
  cursor: pointer;
  box-shadow: var(--shadow-xs);
  transition: all var(--t);
  white-space: nowrap;
}
.pag-btn:hover:not(:disabled) {
  border-color: var(--blue);
  color: var(--blue);
  box-shadow: 0 2px 8px rgba(0,61,165,.15);
}
.pag-btn.primary {
  background: var(--blue);
  border-color: var(--blue);
  color: #fff;
  box-shadow: 0 3px 10px rgba(0,61,165,.25);
}
.pag-btn.primary:hover:not(:disabled) {
  background: var(--blue-d);
  border-color: var(--blue-d);
  box-shadow: 0 4px 14px rgba(0,61,165,.35);
}
.pag-btn:disabled { opacity: .38; cursor: not-allowed; box-shadow: none; }
.pag-divider { width: 1px; height: 28px; background: var(--g200); }

/* ═══════════════════════════════════════
   EMPTY STATE
═══════════════════════════════════════ */
.empty {
  text-align: center;
  padding: 3.5rem 1rem;
  color: var(--g400);
  font-size: .85rem;
}
.empty svg { margin: 0 auto .75rem; display: block; opacity: .35; }

/* ═══════════════════════════════════════
   FOOTER
═══════════════════════════════════════ */
footer {
  background: var(--blue);
  border-top: 1px solid var(--g200);
  margin-top: .5rem;
  padding: 1.75rem 2.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem;
}
.foot-logo img { height: 26px; opacity: .4; filter:brightness(0) invert(1); xfilter: grayscale(1); }
.foot-copy { font-size: .74rem; color: var(--g400); flex: 1; text-align: center; }

/* ═══════════════════════════════════════
   COVERAGE — AGENCY DETAILS + COUNTRY FLAG PILL
═══════════════════════════════════════ */
.coverage-pill {
  /* Reuses .cp + .cp.active visual language */
  align-self: flex-start;
  margin-top: .15rem;
  border-color: var(--blue);
  background: var(--blue);
  box-shadow: 0 4px 14px rgba(0,61,165,.3);
  cursor: default;
  pointer-events: none;
}
.coverage-pill .cp-name { color: #fff; }
.coverage-pill .cp-warranty { color: rgba(255,255,255,.65); }
.agency-details {
  display: flex;
  flex-wrap: wrap;
  gap: .9rem 1.75rem;
}
.agency-details:empty { display: none; }
.agency-detail-item {
  display: inline-flex;
  align-items: center;
  gap: .65rem;
  min-width: 0;
}
.agency-detail-icon {
  width: 34px; height: 34px;
  border-radius: var(--r-sm);
  background: var(--blue-l);
  color: var(--blue);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.agency-detail-text { display: flex; flex-direction: column; min-width: 0; }
.agency-detail-label {
  font-size: .62rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--g400);
  line-height: 1.2;
  margin-bottom: .15rem;
}
.agency-detail-value {
  font-size: .85rem;
  font-weight: 600;
  color: var(--black);
  line-height: 1.3;
  word-break: break-word;
}
.agency-detail-value a { color: var(--blue); }
.agency-detail-value a:hover { text-decoration: underline; }

/* ═══════════════════════════════════════
   APPLICATION GRID — SINGLE TYPE LAYOUT
   When only one app type exists, the lone card needs to feel intentional
   instead of small and lost in space.
═══════════════════════════════════════ */
.app-grid.single {
  grid-template-columns: 1fr;
  max-width: 660px;
  margin: 0 auto;
}
.app-grid.single .app-card {
  padding: 2.75rem 2.5rem 2.25rem;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(circle at 0% 0%, var(--blue-l) 0%, transparent 35%),
    radial-gradient(circle at 100% 100%, var(--blue-l) 0%, transparent 35%),
    var(--white);
  border-width: 1.5px;
}
/* Decorative side glyphs INSIDE the card (guaranteed bounded by overflow:hidden) */
.app-grid.single .app-card::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 1.5rem;
  transform: translateY(-50%);
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: var(--blue-l);
  opacity: .55;
  pointer-events: none;
}
.app-grid.single .app-card::before {
  content: '';
  position: absolute;
  top: 50%;
  right: 1.5rem;
  left: auto;
  transform: translateY(-50%);
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: var(--blue-l);
  opacity: .55;
  pointer-events: none;
}
.app-grid.single .app-icon-wrap {
  width: 72px;
  height: 72px;
  border-radius: 18px;
  font-size: 1.85rem;
  margin: 0 auto 1.25rem;
  position: relative;
  z-index: 2;
  box-shadow: 0 6px 18px rgba(0,61,165,.15);
}
.app-grid.single .app-name {
  font-size: 1.15rem;
  font-weight: 700;
  margin-bottom: .65rem;
  position: relative;
  z-index: 2;
  letter-spacing: -.01em;
}
.app-grid.single .app-dur-pill {
  font-size: 1.25rem;
  font-weight: 800;
  padding: .7rem 1.75rem;
  margin-bottom: 1rem;
  letter-spacing: .01em;
  position: relative;
  z-index: 2;
  box-shadow: 0 4px 14px rgba(0,61,165,.2);
}
.app-grid.single .app-desc {
  font-size: .92rem;
  max-width: 380px;
  margin: 0 auto;
  line-height: 1.6;
  color: var(--g600);
  position: relative;
  z-index: 2;
}
/* Decorative checkmark badges along the bottom — pure CSS, bounded inside card */
.app-grid.single .app-card .app-desc::after {
  content: '';
  display: block;
  width: 60px;
  height: 3px;
  margin: 1.25rem auto 0;
  background: linear-gradient(90deg, transparent, var(--blue), transparent);
  border-radius: 2px;
}

/* ═══════════════════════════════════════
   LOCATION GATE OVERLAY
═══════════════════════════════════════ */
.gate-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: var(--white);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
}
.gate-card {
  max-width: 440px;
  width: 100%;
  text-align: center;
  padding: 2.5rem 2rem;
}
.gate-icon {
  width: 78px; height: 78px;
  margin: 0 auto 1.5rem;
  border-radius: 50%;
  background: var(--blue-l);
  color: var(--blue);
  display: flex; align-items: center; justify-content: center;
}
.gate-icon.warn { background: var(--red-l); color: var(--red); }
.gate-icon.deny { background: var(--amber-l); color: var(--amber); }
.gate-icon.spin svg { animation: gate-spin 1.4s linear infinite; }
@keyframes gate-spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}
.gate-title {
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--black);
  margin-bottom: .65rem;
  letter-spacing: -.01em;
}
.gate-msg {
  font-size: .92rem;
  color: var(--g500);
  line-height: 1.6;
}
.gate-retry {
  margin-top: 1.6rem;
  background: var(--blue);
  color: #fff;
  border: none;
  padding: .75rem 1.6rem;
  border-radius: var(--r-full);
  font-family: inherit;
  font-size: .87rem;
  font-weight: 600;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  box-shadow: 0 4px 14px rgba(0,61,165,.25);
  transition: all var(--t);
}
.gate-retry:hover { background: var(--blue-d); transform: translateY(-1px); }
body.gating > header,
body.gating > .hero,
body.gating > .wrap,
body.gating > footer { visibility: hidden; pointer-events: none; }

/* ═══════════════════════════════════════
   RESPONSIVE
═══════════════════════════════════════ */
@media(max-width: 768px) {
  .hero { padding: 3rem 1.25rem 2.5rem; }
  .wrap { padding: 1.25rem 1rem; }
  header { padding: 0 1rem; }
  .sec-head, .sec-body, .cg-outer, .city-strip, .centers-hdr, .pag-bar { padding-left: 1.1rem; padding-right: 1.1rem; }
  .cg { grid-template-columns: 1fr; }
  .hero-stats { gap: 0; }
  .hero-stat { padding: 0 1.25rem 0 0; margin-right: 1.25rem; }
  footer { flex-direction: column; align-items: center; text-align: center; }
  .app-grid { grid-template-columns: repeat(3, 1fr); }
}
@media(max-width: 520px) {
  .app-grid { grid-template-columns: repeat(2, 1fr); }
  .country-pills { gap: .5rem; }
}