:root {
  --weather-directory-accent: #7eb8ff;
  --weather-directory-accent-2: #a978ff;
}

body.weather-directory-v2 {
  background:
    radial-gradient(70rem 34rem at 76% 2rem, rgba(85, 127, 178, .12), transparent 66%),
    radial-gradient(46rem 30rem at 8% 30rem, rgba(115, 77, 173, .08), transparent 72%),
    #030506 !important;
}

body.weather-directory-v2 .weather-directory-main {
  position: relative;
  z-index: 1;
  width: min(calc(100% - 48px), 1320px);
  margin: 0 auto;
  padding: 56px 0 112px;
}

body.weather-directory-v2 .weather-directory-hero {
  position: relative;
  min-height: 430px;
  padding: 72px clamp(28px, 5vw, 76px) 52px;
  overflow: hidden;
  border: 1px solid rgba(220, 237, 248, .13);
  border-radius: 30px;
  background:
    linear-gradient(110deg, rgba(5, 8, 10, .96) 0%, rgba(7, 11, 14, .90) 52%, rgba(8, 13, 17, .70) 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.055), 0 36px 90px rgba(0,0,0,.28);
}

body.weather-directory-v2 .weather-directory-hero::before {
  content: "";
  position: absolute;
  width: min(52vw, 720px);
  aspect-ratio: 1;
  inset: -52% -8% auto auto;
  border-radius: 50%;
  background:
    radial-gradient(circle at 34% 34%, rgba(133, 186, 255, .22), transparent 20%),
    radial-gradient(circle at 50% 50%, rgba(70, 114, 164, .14), rgba(20, 33, 43, .06) 56%, transparent 67%);
  box-shadow: inset 0 0 90px rgba(141, 190, 255, .09), 0 0 120px rgba(78, 128, 190, .09);
  pointer-events: none;
}

body.weather-directory-v2 .weather-directory-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  opacity: .22;
  background-image:
    linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px);
  background-size: 42px 42px;
  mask-image: linear-gradient(90deg, transparent 26%, #000 100%);
  pointer-events: none;
}

body.weather-directory-v2 .weather-directory-hero__content {
  position: relative;
  z-index: 1;
  width: min(760px, 100%);
}

body.weather-directory-v2 .weather-directory-eyebrow {
  margin: 0 0 22px;
  color: #9ba9b2;
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: .19em;
  text-transform: uppercase;
}

body.weather-directory-v2 .weather-directory-hero h1 {
  max-width: 900px;
  margin: 0;
  color: #f8fafb;
  font-family: var(--wn-font);
  font-size: clamp(42px, 5vw, 58px);
  font-weight: 600;
  line-height: 1.02;
  letter-spacing: -.045em;
}

body.weather-directory-v2 .weather-directory-hero__lead {
  max-width: 650px;
  margin: 26px 0 0 !important;
  color: #aeb9c1 !important;
  font-size: clamp(16px, 1.55vw, 20px) !important;
  line-height: 1.5;
}

body.weather-directory-v2 .weather-directory-search {
  position: relative !important;
  top: auto !important;
  width: min(690px, 100%);
  margin: 38px 0 0;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  backdrop-filter: none !important;
}

body.weather-directory-v2 .weather-directory-search .wrap {
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0;
}

body.weather-directory-v2 .weather-directory-search__field {
  position: relative;
  display: flex;
  align-items: center;
}

body.weather-directory-v2 .weather-directory-search__submit {
  position: absolute;
  inset-inline-start: 20px;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 19px;
  height: 19px;
  padding: 0;
  border: 0;
  background: transparent;
  color: #8f9ca5;
  cursor: pointer;
}

body.weather-directory-v2 .weather-directory-search__submit:hover,
body.weather-directory-v2 .weather-directory-search__submit:focus-visible {
  color: #f7f9fa;
}

body.weather-directory-v2 .weather-directory-search__submit svg {
  display: block;
  width: 19px;
  height: 19px;
}

body.weather-directory-v2 .weather-directory-search input {
  width: 100%;
  height: 62px;
  padding: 0 58px 0 54px !important;
  border: 1px solid rgba(226, 240, 249, .21) !important;
  border-radius: 999px !important;
  outline: none;
  background: rgba(13, 18, 22, .86) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05), 0 16px 40px rgba(0,0,0,.24);
  color: #f7f9fa !important;
  font-size: 16px;
  transition: border-color 160ms ease, background 160ms ease, box-shadow 160ms ease;
}

[dir="rtl"] body.weather-directory-v2 .weather-directory-search input {
  padding: 0 54px 0 58px !important;
}

body.weather-directory-v2 .weather-directory-search input:focus {
  border-color: rgba(145, 193, 255, .58) !important;
  background: rgba(15, 21, 26, .96) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.07), 0 0 0 4px rgba(103, 164, 237, .10), 0 18px 44px rgba(0,0,0,.28);
}

body.weather-directory-v2 .weather-directory-search__clear {
  position: absolute;
  inset-inline-end: 12px;
  display: none;
  width: 38px;
  height: 38px;
  padding: 0;
  border: 0 !important;
  border-radius: 50%;
  background: rgba(255,255,255,.07);
  color: #aeb9c0;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
}

body.weather-directory-v2 .weather-directory-search__clear.is-visible { display: grid; place-items: center; }
body.weather-directory-v2 .weather-directory-search__clear:hover { background: rgba(255,255,255,.12); color: #fff; }
body.weather-directory-v2 .weather-directory-search__clear svg {
  display: block;
  width: 18px;
  height: 18px;
}

body.weather-directory-v2 .weather-directory-content { padding: 72px 2px 0; }

body.weather-directory-v2 .weather-hub-copy {
  display: grid;
  grid-template-columns: minmax(220px, .65fr) minmax(0, 1.35fr);
  gap: 42px;
  margin: 0 0 70px !important;
  padding: 0 0 56px;
  border-bottom: 1px solid rgba(220, 237, 248, .12);
  color: #aab6be !important;
  font-size: 16px !important;
}

body.weather-directory-v2 .weather-hub-copy h2 {
  margin: 0 !important;
  color: #edf2f4 !important;
  font-size: clamp(25px, 3vw, 38px) !important;
  font-weight: 560;
  line-height: 1.06;
  letter-spacing: -.04em;
}

body.weather-directory-v2 .weather-hub-copy p { margin: 0 0 10px !important; line-height: 1.65; }
body.weather-directory-v2 .weather-hub-copy p:first-of-type { grid-column: 2; }
body.weather-directory-v2 .weather-hub-copy p:last-child { grid-column: 2; }

body.weather-directory-v2 .weather-directory-toolbar {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 24px;
  margin: 0 0 28px;
}

body.weather-directory-v2 .weather-directory-toolbar h2 {
  margin: 0;
  color: #f4f7f9;
  font-size: clamp(30px, 4vw, 48px);
  font-weight: 560;
  line-height: 1;
  letter-spacing: -.045em;
}

body.weather-directory-v2 .weather-directory-empty {
  margin: 28px 0 !important;
  padding: 30px;
  border: 1px solid rgba(220, 237, 248, .12);
  border-radius: 18px;
  background: rgba(255,255,255,.025);
}

body.weather-directory-v2 .weather-country-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: start;
  gap: 16px;
}

body.weather-directory-v2 .weather-country-grid .country {
  position: relative;
  display: block;
  width: 100%;
  margin: 0;
  padding: 22px;
  border: 1px solid rgba(220, 237, 248, .115);
  border-radius: 20px;
  background: linear-gradient(145deg, rgba(13, 17, 20, .86), rgba(7, 10, 12, .74));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.035);
  transition: transform 170ms ease, border-color 170ms ease, background 170ms ease;
}

body.weather-directory-v2 .weather-country-grid .country:hover {
  transform: translateY(-2px);
  border-color: rgba(220, 237, 248, .22);
  background: linear-gradient(145deg, rgba(16, 21, 25, .94), rgba(8, 11, 13, .82));
}

body.weather-directory-v2 .country h2,
body.weather-directory-v2 .country h3 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin: 0 0 17px;
  color: #f4f7f9;
  font-size: 19px;
  font-weight: 610;
  line-height: 1.2;
  letter-spacing: -.02em;
}

body.weather-directory-v2 .country h2 a,
body.weather-directory-v2 .country h3 a {
  color: #f4f7f9 !important;
  text-decoration: none;
}

body.weather-directory-v2 .country .citylist {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 14px !important;
  margin: 0;
  padding: 0;
  columns: auto !important;
  list-style: none;
}

body.weather-directory-v2 .country .citylist li {
  margin: 0;
  border: 0 !important;
  border-bottom: 1px solid rgba(220, 237, 248, .075) !important;
  border-radius: 0;
  background: transparent !important;
}

body.weather-directory-v2 .country .citylist li:last-child:nth-child(odd) { grid-column: 1 / -1; }
body.weather-directory-v2 .country .citylist li:nth-last-child(-n + 2) { border-bottom: 0 !important; }
body.weather-directory-v2 .country .citylist:has(> li:last-child:nth-child(odd)) > li:nth-last-child(2) { border-bottom: 1px solid rgba(220, 237, 248, .075) !important; }
body.weather-directory-v2 .country .citylist li:hover { background: transparent !important; }

body.weather-directory-v2 .country .citylist a {
  display: block;
  min-width: 0;
  padding: 9px 1px !important;
  overflow: hidden;
  color: #b9c8d2 !important;
  font-size: 13px;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-decoration: none;
}

body.weather-directory-v2 .country .citylist a:hover { color: #fff !important; }

@media (max-width: 1040px) {
  body.weather-directory-v2 .weather-country-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  body.weather-directory-v2 .weather-directory-hero { min-height: 400px; }
}

@media (max-width: 720px) {
  body.weather-directory-v2 .weather-directory-main {
    width: min(calc(100% - 28px), 1320px);
    padding: 24px 0 72px;
  }

  body.weather-directory-v2 .weather-directory-hero {
    min-height: 0;
    padding: 44px 22px 30px;
    border-radius: 22px;
  }

  body.weather-directory-v2 .weather-directory-hero::before {
    width: 470px;
    inset: -230px -240px auto auto;
  }

  body.weather-directory-v2 .weather-directory-hero h1 { font-size: clamp(38px, 12vw, 52px); }
  body.weather-directory-v2 .weather-directory-hero__lead { margin-top: 20px !important; font-size: 15px !important; }
  body.weather-directory-v2 .weather-directory-search { margin-top: 28px; }
  body.weather-directory-v2 .weather-directory-search input { height: 56px; }
  body.weather-directory-v2 .weather-directory-content { padding-top: 54px; }

  body.weather-directory-v2 .weather-hub-copy {
    display: block;
    margin-bottom: 52px !important;
    padding-bottom: 44px;
  }

  body.weather-directory-v2 .weather-hub-copy h2 { margin-bottom: 20px !important; }
  body.weather-directory-v2 .weather-directory-toolbar { align-items: flex-start; flex-direction: column; gap: 12px; }
  body.weather-directory-v2 .weather-country-grid { grid-template-columns: 1fr; }
  body.weather-directory-v2 .weather-country-grid .country { padding: 20px; }

  body.weather-directory-v2 .country .citylist { grid-template-columns: 1fr; }
  body.weather-directory-v2 .country .citylist li:last-child:nth-child(odd) { grid-column: auto; }
  body.weather-directory-v2 .country .citylist li:nth-last-child(-n + 2) { border-bottom: 1px solid rgba(220, 237, 248, .075) !important; }
  body.weather-directory-v2 .country .citylist li:last-child { border-bottom: 0 !important; }
}

@media (prefers-reduced-motion: reduce) {
  body.weather-directory-v2 .weather-country-grid .country { transition: none; }
}