/* City picker: the first-visit popup ("Where will you be learning to drive?") and the header city dropdown.
   Looks follow the site theme: white (default), black and mixed (white panel, dark cards). */

.gs-cityp, .gs-mycity {
  --gs-red: #d71111;
  --cp-bg: #f6f6f6;
  --cp-text: #2a2a30;
  --cp-muted: #6d7076;
  --cp-card: #ffffff;
  --cp-card-text: #2a2a30;
  --cp-line: #e4e4e6;
  --cp-wedge: #111117;
  font-family: "Manrope", sans-serif;
}
.gs-cityp *, .gs-cityp *::before, .gs-cityp *::after { box-sizing: border-box; }

html[data-theme="black"] .gs-cityp {
  --cp-bg: #111117; --cp-text: #ffffff; --cp-muted: #a4a7ad; --cp-card: #25252b; --cp-card-text: #ffffff; --cp-line: rgba(255,255,255,.12); --cp-wedge: #3a3a42;
}
html[data-theme="mixed"] .gs-cityp {
  --cp-bg: #f6f6f6; --cp-text: #2a2a30; --cp-muted: #6d7076; --cp-card: #25252b; --cp-card-text: #ffffff; --cp-line: #e4e4e6; --cp-wedge: #3a3a42;
}

/* ---------- popup ---------- */
.gs-cityp {
  position: fixed; inset: 0; z-index: 2000;
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
  background: rgba(10, 10, 14, .62);
  backdrop-filter: blur(2px);
  overflow-y: auto;
}
.gs-cityp[hidden] { display: none; }
html.gs-cityp-open { overflow: hidden; }

.gs-cityp__box {
  position: relative;
  width: min(1040px, 100%);
  margin: auto;
  padding: clamp(36px, 4.4vw, 64px) clamp(20px, 4.4vw, 64px) clamp(28px, 3.4vw, 44px);
  background: var(--cp-bg) url("../images/pricing-bg.webp") center / cover no-repeat;   /* the pricing section's tyre-track picture */
  color: var(--cp-text);
  box-shadow: 0 30px 80px rgba(0,0,0,.35);
  text-align: center;
  overflow: hidden;
}
/* dark theme: the same picture, sunk into the dark panel */
html[data-theme="black"] .gs-cityp__box { background-blend-mode: multiply; }

.gs-cityp__x {
  position: absolute; top: 18px; right: 20px; z-index: 2;
  width: 36px; height: 36px; display: grid; place-items: center;
  border: 0; background: transparent; color: var(--cp-text); cursor: pointer;
}
.gs-cityp__x svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.gs-cityp__x:hover { color: var(--gs-red); }

.gs-cityp__eyebrow { display: inline-flex; align-items: center; gap: 8px; margin: 0 0 14px; color: var(--cp-muted); font-size: 15px; line-height: 1; }
.gs-cityp__eyebrow svg { width: 22px; height: 9px; fill: var(--gs-red); }
.gs-cityp__title { margin: 0; font-family: "Urbanist", sans-serif; font-weight: 800; font-size: clamp(26px, 3vw, 40px); line-height: 1.2; letter-spacing: -.02em; color: var(--cp-text); }
.gs-cityp__sub { margin: 16px 0 0; color: var(--cp-muted); font-size: 15px; }

.gs-cityp__grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 18px;   /* as many as fit, wide enough for a whole city name */
  margin-top: clamp(26px, 3vw, 40px);
}
.gs-cityp__city {
  position: relative; overflow: hidden;
  display: flex; align-items: center; gap: 10px;
  min-height: 58px; padding: 8px 40px 8px 18px;
  border: 0; background: var(--cp-card) linear-gradient(var(--gs-red), var(--gs-red)) left / 4px 100% no-repeat;
  color: var(--cp-card-text);
  box-shadow: 4px 4px 22px rgba(0,0,0,.14);
  font: 800 15px/1.2 "Urbanist", sans-serif;
  text-align: left; cursor: pointer;
  transition: transform .2s ease, box-shadow .2s ease;
}
.gs-cityp__city svg { flex: 0 0 auto; width: 15px; height: 15px; fill: var(--gs-red); }
.gs-cityp__city span { min-width: 0; overflow-wrap: break-word; word-break: normal; }   /* a name may wrap between words, never inside one */
/* slanted corner, like the package cards */
.gs-cityp__city::after {
  content: ""; position: absolute; right: 0; top: 0; width: 44px; height: 100%;
  background: linear-gradient(to bottom right, transparent 49%, var(--cp-wedge) 50%);
  clip-path: polygon(100% 0, 100% 100%, 0 100%);
  transition: background .2s ease;
}
.gs-cityp__city:hover { transform: translateY(-2px); box-shadow: 6px 8px 28px rgba(0,0,0,.28); }
.gs-cityp__city:hover::after, .gs-cityp__box.is-kbd .gs-cityp__city:focus-visible::after { background: var(--gs-red); }
.gs-cityp__city:focus { outline: none; }
.gs-cityp__box.is-kbd .gs-cityp__city:focus-visible { outline: 2px solid var(--gs-red); outline-offset: 3px; }
.gs-cityp__box:focus { outline: none; }

.gs-cityp__foot { margin-top: clamp(24px, 2.6vw, 34px); padding-top: 28px; border-top: 1px solid var(--cp-line); text-align: left; }
.gs-cityp__none {
  height: 46px; padding: 0 28px;
  border: 1px solid var(--gs-red); background: transparent; color: var(--gs-red);
  font: 700 14px/1 "Manrope", sans-serif; cursor: pointer;
  transition: background .2s ease, color .2s ease;
}
.gs-cityp__none:hover, .gs-cityp__none:focus-visible { background: var(--gs-red); color: #fff; }
.gs-cityp__foot p { margin: 14px 0 0; color: var(--cp-muted); font-size: 14px; }

@media (max-width: 991.98px) { .gs-cityp__grid { gap: 14px; } }
@media (max-width: 575.98px) {
  .gs-cityp { padding: 12px; align-items: flex-start; }
  .gs-cityp__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .gs-cityp__city { min-height: 54px; padding: 8px 38px 8px 16px; font-size: 14px; }
  .gs-cityp__city::after { width: 38px; }
  .gs-cityp__foot { text-align: center; }
}

/* ---------- header dropdown ---------- */
.gs-mycity { position: relative; }
.gs-mycity__btn {
  display: inline-flex; align-items: center; gap: 8px;
  height: 40px; padding: 0 14px;
  border: 1px solid rgba(255,255,255,.22); background: rgba(255,255,255,.06); color: #fff;
  font: 700 14px/1 "Urbanist", sans-serif; cursor: pointer; white-space: nowrap;
  transition: border-color .2s ease, background .2s ease;
}
.gs-mycity__btn:hover, .gs-mycity__btn[aria-expanded="true"] { border-color: var(--gs-red); background: rgba(215,17,17,.18); }
.gs-mycity__btn:focus-visible { outline: 2px solid var(--gs-red); outline-offset: 3px; }
.gs-mycity__btn svg:first-child { width: 14px; height: 14px; fill: var(--gs-red); flex: 0 0 auto; }
.gs-mycity__name { max-width: 130px; overflow: hidden; text-overflow: ellipsis; }
.gs-mycity__caret { width: 9px; height: 6px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: 0 0 auto; transition: transform .2s ease; }
.gs-mycity__btn[aria-expanded="true"] .gs-mycity__caret { transform: rotate(180deg); }

.gs-mycity__list {
  position: absolute; right: 0; top: calc(100% + 12px); z-index: 80;
  min-width: 210px; max-height: 70vh; overflow-y: auto;
  margin: 0; padding: 8px 0; list-style: none;
  background: #fff; border-top: 3px solid var(--gs-red);
  box-shadow: 6px 6px 30px rgba(0,0,0,.2);
}
.gs-mycity__list[hidden] { display: none; }
.gs-mycity__list li {
  padding: 10px 22px; color: #2a2a30; cursor: pointer;
  font: 700 15px/1.2 "Urbanist", sans-serif;
}
.gs-mycity__list li[aria-selected="true"] { color: var(--gs-red); }
.gs-mycity__list li[aria-selected="true"]::before { content: "\2713\00a0"; }
.gs-mycity__list li:hover, .gs-mycity__list li:focus-visible { color: var(--gs-red); background: #f6f6f6; outline: none; }

@media (max-width: 1279.98px) { .gs-mycity__name { max-width: 110px; } }
/* phones: the city picker is just its pin icon, the same 40x40 size as the call icon and the menu button (a name does not fit and was cut off);
   it stays IN the menu bar (so the header does not get taller) and its list drops down under the bar as wide as the screen */
@media (max-width: 767.98px) {
  .gs-head__right, .gs-mycity--bar { position: static; }          /* the list is then placed against the whole menu bar */
  .gs-head__right { gap: 6px; }
  .gs-mycity__btn { width: 40px; height: 40px; padding: 0; gap: 0; justify-content: center; }
  .gs-mycity__btn svg:first-child { width: 18px; height: 18px; }
  .gs-mycity__name, .gs-mycity__caret { display: none; }          /* the button keeps its aria-label ("Your city: Ajax. Change city") for screen readers */
  .gs-head__phone-ico, .gs-head__burger { width: 40px; height: 40px; }
  .gs-mycity--bar .gs-mycity__list {
    position: absolute; left: 0; right: 0; top: 100%; min-width: 0; max-height: 62vh;
    border-top: 3px solid var(--gs-red); box-shadow: 0 12px 24px rgba(0,0,0,.25);
  }
  .gs-mycity--bar .gs-mycity__list li { padding: 14px 18px; font-size: 16px; border-bottom: 1px solid #eee; }
}
@media (max-width: 575.98px) { .gs-head__search-btn { display: none; } }   /* room for the city pill, the call icon and the menu button */
/* narrow phones (about 360px with a scrollbar): the logo, the city, call and menu icons must all fit without a sideways scroll */
@media (max-width: 575.98px) {
  .gs-head__bar { gap: 8px; }
  .gs-head__logo { flex: 0 1 auto; min-width: 0; }
  .gs-head__logo img { width: clamp(100px, 31vw, 140px); }
  .gs-head__right { min-width: 0; flex: 0 1 auto; }
}