/* Сторінка «Де використати подарунковий сертифікат».
   Фото — головне; найближчий — темна картка з жовтою «рулеткою»; графік — стрічка на 7 днів. */
@font-face { font-family: "Onest"; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url(/fonts/onest-cyr.woff2) format("woff2"); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "Onest"; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url(/fonts/onest-lat.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Unbounded"; font-style: normal; font-weight: 500 700; font-display: swap;
  src: url(/fonts/unbounded-cyr.woff2) format("woff2"); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "Unbounded"; font-style: normal; font-weight: 500 700; font-display: swap;
  src: url(/fonts/unbounded-lat.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

:root {
  --bg: #ECEEF0;
  --tile: #FFFFFF;
  --ink: #14181D;
  --muted: #5D6570;
  --line: #D8DCE1;
  --tape: #F4BC1C;
  --tape-ink: #14181D;
  --btn: #14181D;
  --btn-ink: #FFFFFF;
  --open: #17804A;
  --soon: #B26A00;
  --closed: #A8402F;
  --focus: #2F6FEB;
  --hero: #14181D;
  --hero-ink: #F3F4F6;
  --hero-soft: #A9B0BA;
  --hero-line: rgba(255, 255, 255, .12);
  --display: "Unbounded", "Arial Black", system-ui, sans-serif;
  --body: "Onest", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0F1215; --tile: #181C21; --ink: #EDEFF1; --muted: #9AA3AD; --line: #2A3038;
    --btn: #EDEFF1; --btn-ink: #14181D; --open: #3CC27A; --soon: #F0A93B; --closed: #EE8673; --focus: #8DB0FF;
    --hero: #1A1F26; --hero-line: rgba(255, 255, 255, .1);
    color-scheme: dark;
  }
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 16px/1.5 var(--body);
  -webkit-font-smoothing: antialiased;
}
.wrap {
  max-width: 1080px;
  margin: 0 auto;
  padding-left: max(16px, env(safe-area-inset-left, 0px));
  padding-right: max(16px, env(safe-area-inset-right, 0px));
}
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
a:focus-visible, button:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }

/* ---------- шапка ---------- */
header { padding-top: calc(22px + env(safe-area-inset-top, 0px)); padding-bottom: 2px; }
.eyebrow {
  margin: 0 0 10px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted);
}
h1 {
  margin: 0;
  font: 700 clamp(24px, 6vw, 40px)/1.08 var(--display);
  letter-spacing: -.02em;
  text-wrap: balance;
  max-width: 18ch;
}
.lead { margin: 12px 0 0; color: var(--muted); font-size: 16px; max-width: 46ch; }

main { padding-block: 18px 8px; display: flex; flex-direction: column; gap: 22px; }

/* ---------- найближчий ---------- */
.n-hero { background: var(--hero); color: var(--hero-ink); border-radius: 24px; overflow: hidden; display: grid; }
.n-media { position: relative; aspect-ratio: 16 / 9; max-width: 100%; overflow: hidden; background: #1F252D; }
.n-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 40%; transition: transform .7s cubic-bezier(.2, .7, .2, 1); }
.n-media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0, 0, 0, 0) 38%, rgba(0, 0, 0, .78) 100%); pointer-events: none; }
.n-hero .n-media::after { background: linear-gradient(180deg, rgba(0, 0, 0, 0) 62%, rgba(0, 0, 0, .55) 100%); }
.n-cap { position: absolute; left: 0; right: 0; bottom: 0; z-index: 1; padding: 14px; display: flex; flex-direction: column; gap: 6px; color: #FFFFFF; }
.tape-chip {
  position: absolute; z-index: 1; top: 14px; left: 14px;
  background: var(--tape); color: var(--tape-ink);
  font: 700 11px/1 var(--body); letter-spacing: .12em; text-transform: uppercase;
  padding: 12px 12px 8px; border-radius: 8px;
  background-image: repeating-linear-gradient(90deg, rgba(20, 24, 29, .75) 0 1px, transparent 1px 6px);
  background-size: 100% 4px; background-repeat: no-repeat; background-position: top left;
}
.n-hero-body { padding: 16px; display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.n-hero-head { display: flex; flex-direction: column; gap: 6px; }
.n-dist { font: 700 clamp(38px, 10vw, 60px)/.95 var(--display); letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.n-dist small { font: 600 15px/1 var(--body); letter-spacing: 0; margin-left: 6px; opacity: .85; }
.n-addr { margin: 0; font: 600 clamp(18px, 4.6vw, 24px)/1.2 var(--body); text-wrap: balance; }
@media (min-width: 820px) {
  .n-hero { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); align-items: center; }
  .n-hero-body { padding: 22px 24px; }
}

.glass {
  display: inline-flex; align-items: center; gap: 8px; width: fit-content;
  padding: 6px 12px; border-radius: 999px;
  background: rgba(20, 24, 29, .35); border: 1px solid rgba(255, 255, 255, .28);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  color: #FFFFFF; font-size: 13.5px; font-weight: 600;
}
.dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; background: #8B949E; }
.dot.open { background: #3CD383; } .dot.soon { background: #F6B53D; } .dot.closed { background: #FF7A66; } .dot.coming { background: var(--tape); }

/* ---------- кнопки ---------- */
.n-acts { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; }
.n-acts.solo { grid-template-columns: minmax(0, 1fr); }
.nb {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 50px; padding: 10px 16px; border-radius: 14px; min-width: 0;
  font: 650 15.5px/1.2 var(--body); text-decoration: none; white-space: nowrap; font-variant-numeric: tabular-nums;
  -webkit-tap-highlight-color: transparent;
}
.nb span { overflow: hidden; text-overflow: ellipsis; }
.nb svg { width: 18px; height: 18px; flex-shrink: 0; }
.nb-call { background: var(--tape); color: var(--tape-ink); }
.nb-route { border: 1px solid var(--hero-line); color: var(--hero-ink); background: transparent; cursor: pointer; }
.n-card .nb-call { background: var(--btn); color: var(--btn-ink); }
.n-card .nb-route { border-color: var(--line); color: var(--ink); }
.n-card .n-acts:not(.solo) .nb-route { width: 50px; padding: 0; }
.n-card .n-acts:not(.solo) .nb-route span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- графік на 7 днів ---------- */
.wk { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; margin: 0; padding: 0; list-style: none; }
.wk li { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 7px 0 6px; border-radius: 10px; font-variant-numeric: tabular-nums; min-width: 0; }
.wk b { font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; opacity: .6; }
.wk span { font-size: 12px; font-weight: 600; white-space: nowrap; }
.wk .off span { opacity: .5; font-weight: 500; }
.wk .today { background: var(--tape); color: var(--tape-ink); }
.wk .today b { opacity: .8; }
.n-hero .wk li:not(.today) { background: rgba(255, 255, 255, .06); }
.n-card .wk li:not(.today) { background: var(--bg); }
.n-hours { margin: 0; font-size: 14px; color: var(--muted); }
.n-hero .n-hours { color: var(--hero-soft); }

/* ---------- соцмережі ---------- */
.n-soc { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; }
.n-soc a { width: 36px; height: 36px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--line); color: var(--ink); }
.n-soc a svg { width: 16px; height: 16px; fill: currentColor; }
.n-hero .n-soc a { border-color: var(--hero-line); color: var(--hero-ink); }
.n-soc-label { font-size: 12.5px; color: var(--muted); margin-right: 4px; }
.n-hero .n-soc-label { color: var(--hero-soft); }

/* ---------- заголовок секції й чіпи міст ---------- */
.sec-h {
  display: flex; align-items: baseline; gap: 10px;
  margin: 0 0 4px;
  font: 700 13px/1.2 var(--body);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted);
}
.sec-h small { font-weight: 500; letter-spacing: 0; text-transform: none; font-size: 13px; }
.chips-wrap { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 5; margin-inline: -4px; padding: 8px 4px; background: var(--bg); }
.chips { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; }
.chips::-webkit-scrollbar { display: none; }
.chip {
  flex-shrink: 0; display: inline-flex; align-items: center; gap: 6px;
  padding: 9px 14px; border-radius: 999px; border: 1px solid var(--line);
  background: var(--tile); color: var(--ink); font: 600 14px/1 var(--body); cursor: pointer;
}
.chip small { font-weight: 500; color: var(--muted); }
.chip[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--bg); }
.chip[aria-pressed="true"] small { color: inherit; opacity: .7; }

/* ---------- картки ---------- */
.n-grid { display: grid; grid-template-columns: 1fr; gap: 14px; margin-top: 6px; }
@media (min-width: 640px) { .n-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 980px) { .n-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.n-card { background: var(--tile); border-radius: 20px; overflow: hidden; display: flex; flex-direction: column; min-width: 0; box-shadow: 0 1px 2px rgba(15, 18, 21, .06), 0 8px 24px -12px rgba(15, 18, 21, .18); }
.n-card .n-addr { font-size: 18px; }
.n-city { font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; opacity: .85; }
.glass.n-km { position: absolute; z-index: 1; top: 12px; right: 12px; padding: 5px 10px; font-size: 13px; }
.n-body { padding: 14px; display: flex; flex-direction: column; gap: 12px; }
.n-status { display: inline-flex; align-items: center; gap: 8px; width: fit-content; padding: 5px 11px; border-radius: 999px; font-size: 13.5px; font-weight: 650; }
.n-status.open { background: rgba(23, 128, 74, .12); color: var(--open); }
.n-status.soon { background: rgba(178, 106, 0, .12); color: var(--soon); }
.n-status.closed { background: rgba(168, 64, 47, .12); color: var(--closed); }
.n-status.coming { background: var(--tape); color: var(--tape-ink); }
.n-ph { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: rgba(255, 255, 255, .4);
  background: radial-gradient(120% 90% at 20% 10%, #2B323C 0%, #161A20 70%); }
.n-ph svg { width: 34px; height: 34px; }

/* ---------- запит геолокації ---------- */
.locate {
  display: flex; align-items: center; gap: 14px;
  width: 100%;
  text-align: left;
  background: var(--hero); color: var(--hero-ink);
  border: none; border-radius: 20px;
  padding: 18px;
  font: inherit;
  cursor: pointer;
}
.locate .pin { width: 44px; height: 44px; border-radius: 50%; background: var(--tape); color: var(--tape-ink); display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.locate .pin svg { width: 22px; height: 22px; }
.locate b { display: block; font-size: 17px; }
.locate span span { display: block; margin-top: 3px; color: var(--hero-soft); font-size: 14px; line-height: 1.4; }
.locate.denied { display: flex; flex-direction: column; align-items: stretch; gap: 12px; cursor: default; }
.locate-head { display: flex; align-items: center; gap: 14px; }
.locate-steps { margin: 0; padding: 0 0 0 22px; display: flex; flex-direction: column; gap: 8px; color: var(--hero-ink); font-size: 14.5px; line-height: 1.45; }
.locate-steps li::marker { color: var(--tape); font-weight: 700; }
.locate-retry {
  min-height: 48px; padding: 10px 16px; border: none; border-radius: 14px;
  background: var(--tape); color: var(--tape-ink); font: 650 15.5px/1.2 var(--body); cursor: pointer;
}

/* ---------- вибір навігатора ---------- */
html:has(.sheet[open]) { overflow: hidden; }
.sheet {
  border: none; padding: 0; margin: auto auto 0;
  width: 100%; max-width: 520px; max-height: 92vh;
  background: var(--tile); color: var(--ink);
  border-radius: 24px 24px 0 0;
}
.sheet::backdrop { background: rgba(10, 12, 15, .55); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }
.sheet-in { padding: 10px 16px calc(16px + env(safe-area-inset-bottom, 0px)); display: flex; flex-direction: column; gap: 10px; }
.sheet-grab { width: 40px; height: 4px; border-radius: 2px; background: var(--line); margin: 0 auto 4px; }
.sheet h2 { margin: 0; font: 700 18px/1.25 var(--body); }
.sheet-addr { margin: -6px 0 2px; color: var(--muted); font-size: 14px; }
.sheet-opt {
  display: flex; align-items: center; gap: 12px;
  min-height: 64px; padding: 10px 12px;
  border: 1px solid var(--line); border-radius: 16px;
  color: var(--ink); text-decoration: none;
  -webkit-tap-highlight-color: transparent;
}
.sheet-opt > span:not(.ico):not(.tag) { min-width: 0; }
.sheet-opt b { display: block; font-size: 16px; font-weight: 650; }
.sheet-opt small { display: block; color: var(--muted); font-size: 12.5px; }
.sheet-opt .ico { width: 42px; height: 42px; border-radius: 12px; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; background: var(--bg); }
.sheet-opt .ico svg { width: 22px; height: 22px; fill: currentColor; }
.ico-google { color: #4285F4; } .ico-waze { color: #1FB5E6; } .ico-apple { color: var(--ink); }
.sheet-opt .tag { margin-left: auto; flex-shrink: 0; padding: 4px 8px; border-radius: 6px; background: var(--tape); color: var(--tape-ink); font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.sheet-row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 2px; }
.sheet-row.one { grid-template-columns: 1fr; }
.sheet-btn { min-height: 48px; padding: 8px 12px; border-radius: 14px; border: 1px solid var(--line); background: transparent; color: var(--ink); font: 600 15px/1.2 var(--body); cursor: pointer; }
@media (hover: hover) { .sheet-opt:hover, .sheet-btn:hover { background: var(--bg); } }
@media (min-width: 640px) {
  .sheet { margin: auto; border-radius: 24px; }
  .sheet-grab { display: none; }
  .sheet-in { padding: 20px; }
}
@media (prefers-reduced-motion: no-preference) {
  .sheet[open] { animation: sheet-up .28s cubic-bezier(.2, .7, .2, 1); }
  @keyframes sheet-up { from { transform: translateY(32px); opacity: 0; } to { transform: none; opacity: 1; } }
}

/* ---------- умови й підвал ---------- */
.terms { background: transparent; border: 1px dashed var(--line); border-radius: 16px; padding: 14px 16px; color: var(--muted); font-size: 14.5px; }
.terms h2 { margin: 0 0 6px; font: 700 12px/1.2 var(--body); letter-spacing: .1em; text-transform: uppercase; color: var(--ink); }
.terms p { margin: 0; white-space: pre-line; }
footer { padding-top: 18px; padding-bottom: calc(36px + env(safe-area-inset-bottom, 0px)); color: var(--muted); font-size: 13px; }

/* ---------- завантаження ---------- */
.sk { height: 260px; border-radius: 20px; background: linear-gradient(90deg, var(--tile), var(--line), var(--tile)); background-size: 200% 100%; }
.sk-hero { height: 340px; border-radius: 24px; }

/* ---------- рух ---------- */
@media (prefers-reduced-motion: no-preference) {
  .sk { animation: sk 1.2s ease-in-out infinite; }
  @keyframes sk { 0% { background-position: 100% 0; } 100% { background-position: -100% 0; } }
  .dot.open { animation: pulse 2s ease-out infinite; }
  @keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(60, 211, 131, .6); } 70% { box-shadow: 0 0 0 8px rgba(60, 211, 131, 0); } 100% { box-shadow: 0 0 0 0 rgba(60, 211, 131, 0); } }
  .locate.asking .pin { animation: pulse-y 1.6s ease-out infinite; }
  @keyframes pulse-y { 0% { box-shadow: 0 0 0 0 rgba(244, 188, 28, .6); } 70% { box-shadow: 0 0 0 12px rgba(244, 188, 28, 0); } 100% { box-shadow: 0 0 0 0 rgba(244, 188, 28, 0); } }
  .n-card, .n-hero { animation: rise .55s cubic-bezier(.2, .7, .2, 1) both; animation-delay: calc(var(--i, 0) * 55ms); }
  @keyframes rise { from { transform: translateY(14px); opacity: .5; } to { transform: none; opacity: 1; } }
  .nb:active, .chip:active, .locate:active { transform: translateY(1px); }
}
@media (min-width: 820px) and (hover: hover) and (prefers-reduced-motion: no-preference) {
  .n-hero:hover .n-media img, .n-card:hover .n-media img { transform: scale(1.04); }
}