:root {
  --white: #f8fffb;
  --deep: #041d1b;
  --mint: #65ffd0;
  --gold: #f7cf78;
  --coral: #ff8f86;
  --purple: #c9a8ff;
}

* { box-sizing: border-box; }
html { background: var(--deep); }
body { margin: 0; min-width: 0; color: var(--white); font-family: Inter, system-ui, sans-serif; background: var(--deep); overflow-x: hidden; }
a { color: inherit; text-decoration: none; }
button, input { font: inherit; }

.coverage-page { min-height: 100svh; background: #041d1b; }
.coverage-nav {
  position: fixed;
  inset: 16px clamp(18px, 4vw, 64px) auto;
  z-index: 1000;
  min-height: 68px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 8px 10px;
  border: 1px solid rgba(255,255,255,.2);
  border-radius: 8px;
  background: rgba(2,31,29,.88);
  box-shadow: 0 18px 54px rgba(0,0,0,.32);
  backdrop-filter: blur(22px);
}
.coverage-brand { display: inline-flex; align-items: center; gap: 11px; min-width: 0; }
.coverage-brand-mark { width: 52px; height: 52px; flex: 0 0 52px; }
.coverage-brand-mark img { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 0 15px rgba(101,255,208,.35)); }
.coverage-brand strong, .coverage-brand small { display: block; }
.coverage-brand strong { font-size: 1rem; white-space: nowrap; }
.coverage-brand small { margin-top: 3px; color: rgba(248,255,251,.62); font-size: .72rem; }
.coverage-back { min-height: 44px; display: inline-flex; align-items: center; border: 1px solid rgba(255,255,255,.2); border-radius: 999px; padding: 0 16px; color: rgba(248,255,251,.82); font-size: .76rem; font-weight: 800; }

.coverage-stage { position: relative; min-height: 100svh; overflow: hidden; isolation: isolate; }
.coverage-breadcrumbs { position: absolute; left: clamp(22px, 5vw, 76px); top: 106px; z-index: 8; display: flex; align-items: center; gap: 9px; color: rgba(248,255,251,.58); font-size: .7rem; font-weight: 700; }
.coverage-breadcrumbs a:hover { color: var(--zone-color); }
.coverage-breadcrumbs span[aria-current="page"] { color: rgba(248,255,251,.9); }
.map-frame, .coverage-map { position: absolute; inset: 0; }
.map-frame { z-index: 1; background: #0a2825; }
.coverage-map { z-index: 1; }
.coverage-map .leaflet-tile-pane { filter: grayscale(.36) saturate(.62) brightness(.62) contrast(1.12) hue-rotate(118deg); }
.coverage-map .leaflet-control-attribution { color: rgba(255,255,255,.72); background: rgba(2,25,23,.84); font-size: 9px; }
.coverage-map .leaflet-control-attribution a { color: var(--mint); }
.coverage-map .leaflet-bar { border: 1px solid rgba(255,255,255,.22); box-shadow: none; }
.coverage-map .leaflet-bar a { color: var(--white); background: rgba(2,31,29,.9); border-color: rgba(255,255,255,.14); }
.coverage-map .leaflet-bar a:hover { color: #05231f; background: var(--mint); }
.map-shade { position: absolute; inset: 0; z-index: 2; pointer-events: none; background: linear-gradient(90deg, rgba(2,20,18,.93) 0%, rgba(2,20,18,.48) 33%, transparent 54%, rgba(2,20,18,.28) 100%); }
.radar-sweep { position: absolute; left: 50%; top: 52%; z-index: 3; width: min(66vw, 850px); aspect-ratio: 1; border: 1px solid color-mix(in srgb, var(--zone-color) 34%, transparent); border-radius: 50%; pointer-events: none; transform: translate(-50%,-50%); transition: border-color .4s ease; }
.radar-sweep::before { content: ""; position: absolute; inset: -1px; border-radius: 50%; background: conic-gradient(from 210deg, transparent 0 78%, color-mix(in srgb, var(--zone-color) 24%, transparent) 94%, transparent); animation: radarTurn 9s linear infinite; }
.radar-sweep::after { content: ""; position: absolute; inset: 22%; border: 1px dashed color-mix(in srgb, var(--zone-color) 26%, transparent); border-radius: 50%; }
.map-status { position: absolute; left: 50%; bottom: 28px; z-index: 5; display: flex; align-items: center; gap: 9px; border: 1px solid rgba(255,255,255,.18); border-radius: 999px; padding: 9px 13px; color: rgba(248,255,251,.72); background: rgba(3,28,26,.82); backdrop-filter: blur(14px); transform: translateX(-50%); font-size: .64rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.map-status i { width: 8px; height: 8px; border-radius: 50%; background: var(--zone-color); box-shadow: 0 0 16px var(--zone-color); animation: statusPulse 1.5s ease-in-out infinite; }

.coverage-intro { position: absolute; left: clamp(22px, 5vw, 76px); top: 50%; z-index: 6; width: min(440px, 34vw); transform: translateY(-50%); pointer-events: none; }
.coverage-eyebrow { margin: 0; color: var(--zone-color); font-size: .72rem; font-weight: 900; letter-spacing: .15em; text-transform: uppercase; transition: color .35s ease; }
.coverage-intro h1 { margin: 18px 0 0; font-family: "Playfair Display", Georgia, serif; font-size: clamp(4rem, 6.4vw, 7.2rem); line-height: .86; letter-spacing: 0; text-shadow: 0 24px 80px rgba(0,0,0,.66); }
.coverage-intro > p:last-child { max-width: 410px; margin: 26px 0 0; color: rgba(248,255,251,.7); line-height: 1.65; text-shadow: 0 4px 24px rgba(0,0,0,.8); }

.coverage-tool {
  position: absolute;
  right: clamp(22px, 5vw, 76px);
  top: 112px;
  bottom: 26px;
  z-index: 7;
  width: min(420px, 38vw);
  overflow-y: auto;
  scrollbar-width: thin;
  padding: 25px;
  border: 1px solid rgba(255,255,255,.22);
  border-radius: 8px;
  background: rgba(3,29,27,.91);
  box-shadow: 0 36px 110px rgba(0,0,0,.48);
  backdrop-filter: blur(24px);
}
.coverage-tool::before { content: ""; position: absolute; inset: 0; border-top: 2px solid var(--zone-color); border-radius: inherit; pointer-events: none; transition: border-color .35s ease; }
.tool-heading { display: flex; align-items: end; justify-content: space-between; gap: 18px; }
.tool-heading > span, .travel-result > div > span { color: var(--zone-color); font-size: .65rem; font-weight: 900; letter-spacing: .13em; text-transform: uppercase; }
.tool-heading output { font-family: "Playfair Display", Georgia, serif; font-size: 2.45rem; font-weight: 800; line-height: 1; }
.distance-range { width: 100%; height: 12px; margin: 26px 0 0; border-radius: 999px; appearance: none; background: linear-gradient(90deg, var(--zone-color) 0 var(--distance-progress), rgba(255,255,255,.13) var(--distance-progress) 100%); outline: none; }
.distance-range::-webkit-slider-thumb { width: 30px; height: 30px; border: 5px solid #062a27; border-radius: 50%; appearance: none; background: var(--zone-color); box-shadow: 0 0 0 1px rgba(255,255,255,.55), 0 0 28px var(--zone-color); cursor: grab; }
.distance-range::-moz-range-thumb { width: 22px; height: 22px; border: 5px solid #062a27; border-radius: 50%; background: var(--zone-color); box-shadow: 0 0 0 1px rgba(255,255,255,.55), 0 0 28px var(--zone-color); cursor: grab; }
.distance-range:focus-visible { box-shadow: 0 0 0 4px color-mix(in srgb, var(--zone-color) 20%, transparent); }
.distance-scale { display: flex; justify-content: space-between; margin-top: 12px; color: rgba(248,255,251,.4); font-size: .56rem; font-weight: 800; }
.distance-number { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-top: 18px; color: rgba(248,255,251,.66); font-size: .72rem; font-weight: 700; }
.distance-number > span:last-child { display: flex; align-items: center; gap: 7px; }
.distance-number input { width: 90px; min-height: 42px; border: 1px solid rgba(255,255,255,.2); border-radius: 6px; padding: 0 10px; color: var(--white); background: rgba(255,255,255,.07); outline: none; }
.distance-number input:focus { border-color: var(--zone-color); box-shadow: 0 0 0 3px color-mix(in srgb, var(--zone-color) 15%, transparent); }
.distance-number b { color: var(--zone-color); }

.zone-selector { display: grid; gap: 7px; margin-top: 20px; }
.zone-selector button { min-height: 56px; display: grid; grid-template-columns: 12px minmax(0,1fr) auto; align-items: center; gap: 10px; border: 1px solid rgba(255,255,255,.13); border-radius: 6px; padding: 8px 10px; color: rgba(248,255,251,.62); text-align: left; background: rgba(255,255,255,.035); cursor: pointer; transition: border-color .2s ease, color .2s ease, background .2s ease, transform .2s ease; }
.zone-selector button:hover { color: var(--white); border-color: var(--card-color); transform: translateX(3px); }
.zone-selector button.is-active { color: var(--white); border-color: var(--card-color); background: color-mix(in srgb, var(--card-color) 13%, transparent); box-shadow: inset 3px 0 0 var(--card-color); }
.zone-selector button > i { width: 9px; height: 9px; border-radius: 50%; background: var(--card-color); box-shadow: 0 0 14px var(--card-color); }
.zone-selector button span, .zone-selector button strong, .zone-selector button small { display: block; min-width: 0; }
.zone-selector button strong { font-size: .72rem; }
.zone-selector button small { margin-top: 3px; color: rgba(248,255,251,.42); font-size: .57rem; }
.zone-selector button > b { color: var(--card-color); font-size: .68rem; white-space: nowrap; }

.travel-result { display: grid; grid-template-columns: minmax(0,.72fr) minmax(150px,1.28fr); align-items: end; gap: 16px; margin-top: 22px; border-top: 1px solid rgba(255,255,255,.13); padding-top: 20px; animation: resultIn .35s cubic-bezier(.16,1,.3,1) both; }
.travel-result > div > small { display: block; margin-top: 7px; color: rgba(248,255,251,.45); font-size: .57rem; line-height: 1.4; }
.travel-result output { color: var(--white); font-family: "Playfair Display", Georgia, serif; font-size: clamp(2rem, 3vw, 3.2rem); font-weight: 800; line-height: .92; text-align: right; text-shadow: 0 0 34px color-mix(in srgb, var(--zone-color) 30%, transparent); }
.coverage-cta { min-height: 48px; display: inline-flex; align-items: center; justify-content: center; margin-top: 20px; border-radius: 999px; padding: 0 19px; color: #032421; background: linear-gradient(135deg, var(--zone-color), #fff0a4 64%, var(--coral)); font-size: .72rem; font-weight: 900; }
.coverage-note { margin: 14px 0 0; color: rgba(248,255,251,.4); font-size: .58rem; line-height: 1.5; }

.coverage-div-icon { background: transparent; border: 0; }
.debrecen-pin, .destination-pin { position: relative; display: flex; align-items: center; gap: 8px; color: var(--white); font-family: Inter, sans-serif; font-size: 10px; font-weight: 900; letter-spacing: .08em; white-space: nowrap; }
.debrecen-pin i, .destination-pin i { position: relative; width: 26px; height: 26px; flex: 0 0 26px; border: 5px solid #07332e; border-radius: 50%; background: var(--mint); box-shadow: 0 0 0 2px rgba(255,255,255,.75), 0 0 30px var(--mint); }
.debrecen-pin i::after { content: ""; position: absolute; inset: -11px; border: 1px solid var(--mint); border-radius: 50%; animation: mapPulse 2s ease-out infinite; }
.destination-pin i { width: 20px; height: 20px; flex-basis: 20px; border-width: 4px; background: var(--zone-color); box-shadow: 0 0 0 2px rgba(255,255,255,.72), 0 0 26px var(--zone-color); transition: background .35s ease, box-shadow .35s ease; }
.debrecen-pin b, .destination-pin b { border: 1px solid rgba(255,255,255,.16); border-radius: 999px; padding: 6px 8px; background: rgba(3,28,26,.88); box-shadow: 0 8px 24px rgba(0,0,0,.28); }
.coverage-route { animation: routeDash 1.2s linear infinite; }
.coverage-ring { transition: fill-opacity .35s ease, stroke-width .35s ease, stroke-opacity .35s ease; }

@keyframes radarTurn { to { rotate: 360deg; } }
@keyframes statusPulse { 50% { opacity: .4; scale: .75; } }
@keyframes mapPulse { from { opacity: .9; scale: .55; } to { opacity: 0; scale: 1.8; } }
@keyframes routeDash { to { stroke-dashoffset: -30; } }
@keyframes resultIn { from { opacity: .4; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }

@media (max-width: 1080px) {
  .coverage-intro { width: 34vw; }
  .coverage-intro h1 { font-size: 4.2rem; }
  .coverage-tool { width: 42vw; right: 18px; }
}

@media (max-width: 760px) {
  .coverage-stage { min-height: 0; display: flex; flex-direction: column; overflow: visible; padding: 88px 0 24px; }
  .coverage-nav { inset: 10px 10px auto; min-height: 60px; gap: 8px; padding: 7px 8px; }
  .coverage-brand { gap: 8px; }
  .coverage-brand-mark { width: 44px; height: 44px; flex-basis: 44px; }
  .coverage-brand strong { font-size: .82rem; }
  .coverage-brand small { font-size: .62rem; }
  .coverage-back { min-height: 44px; padding: 0 11px; font-size: .66rem; }
  .coverage-breadcrumbs { position: relative; left: auto; top: auto; order: 0; margin: 4px 16px 0; }
  .coverage-intro { position: relative; left: auto; top: auto; order: 1; width: auto; padding: 22px 16px 18px; transform: none; pointer-events: auto; }
  .coverage-intro h1 { max-width: 360px; margin-top: 10px; font-size: 3.2rem; }
  .coverage-intro > p:last-child { margin-top: 15px; font-size: .78rem; line-height: 1.55; text-shadow: none; }
  .map-frame { position: relative; inset: auto; order: 2; height: 430px; margin: 0 10px; border: 1px solid rgba(255,255,255,.18); border-radius: 8px; overflow: hidden; }
  .map-shade { background: linear-gradient(180deg, rgba(2,20,18,.22), transparent 44%, rgba(2,20,18,.22)); }
  .radar-sweep { width: 88vw; }
  .map-status { left: auto; right: 12px; bottom: 12px; transform: none; }
  .coverage-tool { position: relative; inset: auto; order: 3; width: auto; margin: 12px 10px 0; overflow: visible; padding: 20px; }
  .tool-heading output { font-size: 2.2rem; }
  .zone-selector { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .zone-selector button { min-height: 74px; grid-template-columns: 10px 1fr; align-content: center; }
  .zone-selector button > b { grid-column: 2; }
  .travel-result { grid-template-columns: 1fr; }
  .travel-result output { text-align: left; }
  .coverage-cta { min-height: 48px; width: 100%; }
}

@media (max-width: 390px) {
  .coverage-intro h1 { font-size: 2.85rem; }
  .zone-selector { grid-template-columns: 1fr; }
  .zone-selector button { min-height: 58px; grid-template-columns: 10px minmax(0,1fr) auto; }
  .zone-selector button > b { grid-column: auto; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 1ms !important; animation-iteration-count: 1 !important; transition-duration: 1ms !important; }
}