/* ============================================================================
   RelaxPRO — specifika jednotlivých obrazovek
   ========================================================================== */

/* ----------------------------------------------------------------------------
   Domů
   -------------------------------------------------------------------------- */
.home__greet {
  margin-top: var(--sp-6);
  font-family: var(--font-display);
  font-variation-settings: "SOFT" 40, "WONK" 1, "opsz" 40;
  font-size: var(--fs-h1);
  font-weight: 400;
  line-height: 1.16;
  color: rgba(255,255,255,.92);
}
.home__credit { margin-top: var(--sp-6); display: flex; align-items: baseline; gap: var(--sp-2); }
.home__credit .cur { font-size: var(--fs-h2); font-weight: 500; color: rgba(255,255,255,.6); }
.home__creditlab { margin-top: var(--sp-3); font-size: var(--fs-small); color: rgba(255,255,255,.56); }
.home__member .t { font-size: var(--fs-body); font-weight: 600; }
.home__member .s { font-size: var(--fs-tiny); color: rgba(255,255,255,.56); margin-top: 2px; }
.home__days { text-align: right; font-size: var(--fs-tiny); color: rgba(255,255,255,.56); line-height: 1.3; }
.home__days b {
  display: block;
  font-size: var(--fs-h3);
  font-weight: 600;
  color: color-mix(in oklab, var(--accent) 72%, #FFFFFF);
  font-feature-settings: "tnum";
}

/* vstupní kód přesahuje hranici pole — první věc, kterou palec potká */
.entrykey {
  position: relative;
  z-index: 4;
  margin: calc(-30px * var(--density)) var(--gutter) 0;
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  padding: var(--sp-3) var(--sp-5) var(--sp-3) var(--sp-3);
  border-radius: var(--r-pill);
  background: var(--surface);
  border: 1px solid var(--line);
  box-shadow: var(--sh-2);
  text-align: left;
  width: calc(100% - var(--gutter) * 2);
  transition: transform var(--t-fast) var(--ease-out);
}
.entrykey:active { transform: scale(.98); }
.entrykey__ic {
  width: 44px; height: 44px;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: var(--r-md);
  background: var(--brand-soft);
  color: var(--brand);
}
.entrykey b { display: block; font-size: var(--fs-lead); font-weight: 600; letter-spacing: -.015em; }
.entrykey span { font-size: var(--fs-tiny); color: var(--text-2); }

/* nejbližší rezervace — čas nese levý sloupec, ne ikona */
.nextres { display: flex; gap: var(--sp-5); padding: var(--sp-5); }
.nextres__when {
  flex: none;
  text-align: center;
  padding-right: var(--sp-5);
  border-right: 1px solid var(--line);
  align-self: flex-start;
}
.nextres__when .h {
  font-family: var(--font-display);
  font-variation-settings: "SOFT" 60, "opsz" 60;
  font-size: calc(27px * var(--type-scale));
  font-weight: 500;
  letter-spacing: -.03em;
  line-height: 1;
  font-feature-settings: "tnum";
}
.nextres__when .d { margin-top: var(--sp-2); font-size: var(--fs-tiny); color: var(--text-2); font-weight: 500; }
.nextres__what b { display: block; font-size: var(--fs-lead); font-weight: 600; letter-spacing: -.015em; }
.nextres__what p { margin-top: var(--sp-1); font-size: var(--fs-small); color: var(--text-2); line-height: 1.45; }

/* proužek s teplotou vody — vlastní materiál podniku */
.waterstrip {
  margin-top: var(--sp-3);
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-4) var(--sp-5);
  border-radius: var(--r-drop-alt);
  background: linear-gradient(100deg, var(--brand-soft), transparent 150%);
  border: 1px solid var(--line);
}
.waterstrip__deg {
  font-family: var(--font-display);
  font-variation-settings: "SOFT" 60, "opsz" 40;
  font-size: calc(21px * var(--type-scale));
  font-weight: 500;
  color: var(--brand);
  font-feature-settings: "tnum";
}
.waterstrip__wave { margin-left: auto; color: var(--brand); opacity: .5; }
.waterstrip__wave path {
  stroke-dasharray: 90;
  animation: wave-run 5s linear infinite;
}
@keyframes wave-run { to { stroke-dashoffset: -90; } }

.quicktiles { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-3); }
.quicktile {
  display: flex;
  flex-direction: column;
  gap: calc(28px * var(--density));
  padding: var(--sp-5) var(--sp-4) var(--sp-4);
  text-align: left;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-1);
  transition: transform var(--t-fast) var(--ease-out);
}
.quicktile:nth-child(even) { border-radius: var(--r-drop); }
.quicktile:active { transform: scale(.975); }
.quicktile__ic { color: var(--brand); }
.quicktile b { font-size: var(--fs-body); font-weight: 600; letter-spacing: -.01em; }
.quicktile span { display: block; font-size: var(--fs-tiny); color: var(--text-2); margin-top: 2px; }

/* novinky */
.newsrow { display: flex; gap: var(--sp-4); padding: var(--sp-3); align-items: center; text-align: left; width: 100%; }
.newsrow__img {
  width: 76px; height: 76px;
  flex: none;
  border-radius: var(--r-md);
  background: linear-gradient(150deg, var(--field-a), var(--field-b));
  display: grid;
  place-items: center;
  color: rgba(255,255,255,.75);
  overflow: hidden;
}
.newsrow__text b { display: block; font-size: var(--fs-body); font-weight: 600; letter-spacing: -.01em; }
.newsrow__text p { font-size: var(--fs-tiny); color: var(--text-2); margin-top: 3px; line-height: 1.4; }

/* ----------------------------------------------------------------------------
   Členská karta
   -------------------------------------------------------------------------- */
.memcard {
  position: relative;
  padding: var(--sp-5);
  border-radius: var(--r-xl);
  color: #fff;
  background:
    radial-gradient(130% 110% at 88% 2%, rgba(255,255,255,.22) 0%, transparent 52%),
    linear-gradient(150deg, var(--field-a) 0%, var(--field-b) 100%);
  box-shadow: var(--sh-2);
  overflow: hidden;
  width: 100%;
  text-align: left;
}
.memcard::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(112deg, transparent 38%, rgba(255,255,255,.14) 48%, transparent 58%);
  transform: translateX(-110%);
  animation: card-sheen 6.5s var(--ease-out) 1.2s infinite;
  pointer-events: none;
}
@keyframes card-sheen {
  0%   { transform: translateX(-110%); }
  28%  { transform: translateX(110%); }
  100% { transform: translateX(110%); }
}
.memcard__top { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--sp-4); }
.memcard__brand { font-size: var(--fs-tiny); font-weight: 600; color: rgba(255,255,255,.75); }
.memcard__name { margin-top: calc(26px * var(--density)); font-size: var(--fs-h3); font-weight: 600; letter-spacing: -.02em; }
.memcard__tier { margin-top: 3px; font-size: var(--fs-tiny); color: rgba(255,255,255,.72); }
.memcard__id { margin-top: var(--sp-3); font-size: var(--fs-micro); color: rgba(255,255,255,.6); letter-spacing: .06em; font-feature-settings: "tnum"; }
.memcard__chip {
  width: 38px; height: 28px;
  border-radius: 6px;
  background: linear-gradient(140deg, #E8CE92, #B08A48);
  flex: none;
  position: relative;
  overflow: hidden;
}
.memcard__chip::after {
  content: "";
  position: absolute;
  inset: 5px 8px;
  border: 1px solid rgba(0,0,0,.24);
  border-radius: 2px;
}

/* celoobrazovkový kód */
.codeview {
  position: absolute;
  inset: 0;
  z-index: var(--z-drawer);
  background: var(--bg);
  display: flex;
  flex-direction: column;
  animation: screen-swap-in var(--t-base) var(--ease-out) both;
}
.codeview__inner {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--sp-5);
  padding: var(--gutter);
  text-align: center;
}
.codeview__timer {
  font-size: var(--fs-small);
  color: var(--text-2);
  font-feature-settings: "tnum";
}

/* ----------------------------------------------------------------------------
   Rezervační průvodce
   -------------------------------------------------------------------------- */
.pickcard {
  display: flex;
  gap: var(--sp-4);
  padding: var(--sp-4);
  text-align: left;
  width: 100%;
  align-items: center;
  border-radius: var(--r-lg);
  background: var(--surface);
  border: 1px solid var(--line);
  box-shadow: var(--sh-1);
  transition: transform var(--t-fast) var(--ease-out), border-color var(--t-fast);
}
.pickcard:active { transform: scale(.985); }
.pickcard[aria-pressed="true"] {
  border-color: var(--brand);
  box-shadow: 0 0 0 1px var(--brand), var(--sh-1);
}
.pickcard__ic {
  width: 46px; height: 46px;
  flex: none;
  border-radius: var(--r-md);
  background: var(--brand-soft);
  color: var(--brand);
  display: grid;
  place-items: center;
}
.pickcard__text { flex: 1; min-width: 0; }
.pickcard__text b { display: block; font-size: var(--fs-body); font-weight: 600; letter-spacing: -.01em; }
.pickcard__text span { display: block; font-size: var(--fs-tiny); color: var(--text-2); margin-top: 2px; line-height: 1.4; }
.pickcard__price { font-size: var(--fs-small); font-weight: 700; font-feature-settings: "tnum"; flex: none; }

/* Týden jako mřížka. Sedm dnů je konečný počet, takže se vejdou vedle sebe
   a není co posouvat do strany. */
.weekbar {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  margin-bottom: var(--sp-3);
}
.weekbar__label { text-align: center; }
.weekbar__label b { display: block; font-size: var(--fs-body); font-weight: 600; letter-spacing: -.01em; }
.weekbar__label span { display: block; font-size: var(--fs-tiny); color: var(--text-2); margin-top: 1px; }
.weekbar .iconbtn[disabled] { opacity: .3; pointer-events: none; }

.daystrip {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: var(--sp-1);
}
.daybtn {
  min-width: 0;
  padding: var(--sp-3) 2px;
  border-radius: var(--r-md);
  border: 1px solid var(--line);
  background: var(--surface);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  transition: transform var(--t-fast) var(--ease-out), background var(--t-fast), border-color var(--t-fast), color var(--t-fast);
}
.daybtn .dn { font-size: var(--fs-micro); font-weight: 600; color: var(--text-2); }
.daybtn .dd { font-size: var(--fs-lead); font-weight: 700; font-feature-settings: "tnum"; letter-spacing: -.02em; }
.daybtn .dm { font-size: 10px; color: var(--text-3); }
.daybtn[aria-pressed="true"] {
  background: var(--brand);
  border-color: var(--brand);
  color: var(--brand-ink, #fff);
}
.daybtn[aria-pressed="true"] .dn,
.daybtn[aria-pressed="true"] .dm { color: color-mix(in oklab, var(--brand-ink, #fff) 72%, transparent); }
.daybtn:active { transform: scale(.94); }
.daybtn[disabled] { opacity: .32; pointer-events: none; }

.slotgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-2); }

/* odpočet předrezervace */
.holdbar {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  border-radius: var(--r-md);
  background: var(--warning-soft);
  color: var(--warning);
  font-size: var(--fs-small);
  font-weight: 600;
}
.holdbar__time { margin-left: auto; font-feature-settings: "tnum"; font-size: var(--fs-body); }

/* rekapitulace */
.recap { padding: var(--sp-5); }
.recap__line {
  display: flex;
  justify-content: space-between;
  gap: var(--sp-4);
  padding: var(--sp-3) 0;
  font-size: var(--fs-small);
}
.recap__line + .recap__line { border-top: 1px solid var(--line); }
.recap__line dt { color: var(--text-2); }
.recap__line dd { font-weight: 600; text-align: right; font-feature-settings: "tnum"; }
.recap__total {
  margin-top: var(--sp-3);
  padding-top: var(--sp-4);
  border-top: 1px solid var(--line-strong);
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}
.recap__total b { font-size: var(--fs-h3); font-weight: 700; font-feature-settings: "tnum"; letter-spacing: -.02em; }

/* výsledek objednávky */
.result { text-align: center; padding: var(--sp-8) var(--gutter); display: flex; flex-direction: column; align-items: center; gap: var(--sp-4); }
.result__mark {
  width: 86px; height: 86px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--success-soft);
  color: var(--success);
  animation: mark-pop var(--t-slow) var(--ease-spring) both;
}
.result__mark--hold { background: var(--warning-soft); color: var(--warning); }
@keyframes mark-pop { from { transform: scale(.5); opacity: 0; } }
.result__mark svg path { stroke-dasharray: 44; animation: mark-draw 520ms var(--ease-out) 200ms both; }
@keyframes mark-draw { from { stroke-dashoffset: 44; } to { stroke-dashoffset: 0; } }

/* ----------------------------------------------------------------------------
   Obchod
   -------------------------------------------------------------------------- */
.prodgrid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-3); }
.prodcard {
  display: flex;
  flex-direction: column;
  text-align: left;
  border-radius: var(--r-lg);
  background: var(--surface);
  border: 1px solid var(--line);
  overflow: hidden;
  box-shadow: var(--sh-1);
  transition: transform var(--t-fast) var(--ease-out);
}
.prodcard:active { transform: scale(.975); }
.prodcard__img {
  aspect-ratio: 4 / 3;
  background: linear-gradient(150deg, var(--brand-soft-2), var(--surface-sunk));
  display: grid;
  place-items: center;
  color: var(--brand);
  position: relative;
}
.prodcard__flag { position: absolute; top: var(--sp-2); left: var(--sp-2); }
.prodcard__body { padding: var(--sp-3) var(--sp-4) var(--sp-4); display: flex; flex-direction: column; gap: var(--sp-1); flex: 1; }
.prodcard__name { font-size: var(--fs-small); font-weight: 600; line-height: 1.35; letter-spacing: -.01em; }
.prodcard__foot { margin-top: auto; padding-top: var(--sp-2); display: flex; align-items: baseline; gap: var(--sp-2); }
.prodcard__price { font-size: var(--fs-body); font-weight: 700; font-feature-settings: "tnum"; }
.prodcard__was { font-size: var(--fs-micro); color: var(--text-3); text-decoration: line-through; font-feature-settings: "tnum"; }

.hero-img {
  aspect-ratio: 16 / 10;
  background: linear-gradient(150deg, var(--field-a), var(--field-b));
  display: grid;
  place-items: center;
  color: rgba(255,255,255,.6);
  border-radius: var(--r-xl);
  position: relative;
  overflow: hidden;
}

.cartrow { display: flex; gap: var(--sp-4); padding: var(--sp-4); align-items: flex-start; }
.cartrow__img {
  width: 64px; height: 64px;
  flex: none;
  border-radius: var(--r-md);
  background: linear-gradient(150deg, var(--brand-soft-2), var(--surface-sunk));
  display: grid;
  place-items: center;
  color: var(--brand);
}

/* ----------------------------------------------------------------------------
   Odznáčky
   -------------------------------------------------------------------------- */
.badgegrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-3); }
.badgetile {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-4) var(--sp-2);
  border-radius: var(--r-lg);
  background: var(--surface);
  border: 1px solid var(--line);
  text-align: center;
  transition: transform var(--t-fast) var(--ease-out);
}
.badgetile:active { transform: scale(.95); }
.badgetile__medal {
  width: 52px; height: 52px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--surface-sunk);
  color: var(--text-3);
  position: relative;
}
.badgetile.is-done .badgetile__medal {
  background: linear-gradient(145deg, var(--accent), color-mix(in oklab, var(--accent) 60%, #8A5A12));
  color: #fff;
  box-shadow: 0 4px 12px -4px color-mix(in oklab, var(--accent) 70%, transparent);
}
.badgetile__name { font-size: var(--fs-micro); font-weight: 600; line-height: 1.3; }
.badgetile__prog { font-size: 10px; color: var(--text-3); font-feature-settings: "tnum"; }

.badgerow { display: flex; align-items: center; gap: var(--sp-4); padding: var(--sp-3) 0; width: 100%; text-align: left; }
/* Spany pod sebou, jinak se název a popis odznaku slijí do jednoho řádku. */
.badgerow__t, .badgerow__s { display: block; }
.badgerow__t { font-size: var(--fs-body); font-weight: 600; letter-spacing: -.01em; }
.badgerow__s { font-size: var(--fs-tiny); color: var(--text-2); margin-top: 2px; }

.statgrid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-3); }
.statbox { padding: var(--sp-4); border-radius: var(--r-md); background: var(--surface-sunk); }
.statbox .v { font-size: var(--fs-h3); font-weight: 700; letter-spacing: -.02em; font-feature-settings: "tnum"; }
.statbox .l { font-size: var(--fs-tiny); color: var(--text-2); margin-top: 2px; }

/* ----------------------------------------------------------------------------
   Profil, nastavení, notifikace
   -------------------------------------------------------------------------- */
.avatar {
  width: 68px; height: 68px;
  flex: none;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: linear-gradient(150deg, var(--field-a), var(--field-b));
  color: #fff;
  font-size: var(--fs-h2);
  font-weight: 600;
  letter-spacing: -.02em;
  position: relative;
}
.avatar__cam {
  position: absolute;
  right: -2px; bottom: -2px;
  width: 26px; height: 26px;
  border-radius: 50%;
  background: var(--surface);
  border: 1px solid var(--line);
  display: grid;
  place-items: center;
  color: var(--text-2);
}
.avatar--sm { width: 40px; height: 40px; font-size: var(--fs-small); }

.datalist { display: grid; gap: var(--sp-3); }
.datalist div { display: flex; justify-content: space-between; gap: var(--sp-4); font-size: var(--fs-small); }
.datalist dt { color: var(--text-2); flex: none; }
.datalist dd { text-align: right; font-weight: 500; }

.notif { display: flex; gap: var(--sp-4); padding: var(--sp-4); width: 100%; text-align: left; align-items: flex-start; }
.notif__ic {
  width: 38px; height: 38px;
  flex: none;
  border-radius: var(--r-sm);
  display: grid;
  place-items: center;
}
/* Spany pod sebou: bez display: block by se titulek, text a čas slily do řádku. */
.notif__t, .notif__b, .notif__w { display: block; }
.notif__t { font-size: var(--fs-body); font-weight: 600; letter-spacing: -.01em; }
.notif__b { font-size: var(--fs-tiny); color: var(--text-2); margin-top: 3px; line-height: 1.45; }
.notif__w { font-size: var(--fs-micro); color: var(--text-3); margin-top: var(--sp-2); }
.notif.is-unread { background: var(--brand-soft); }

.stars { display: flex; gap: var(--sp-2); justify-content: center; }
.stars button {
  color: var(--line-strong);
  transition: transform var(--t-fast) var(--ease-spring), color var(--t-fast);
}
.stars button.is-on { color: var(--accent); }
.stars button:active { transform: scale(1.2); }

/* pobočka */
.hours { display: grid; gap: var(--sp-2); }
.hours div { display: flex; justify-content: space-between; font-size: var(--fs-small); padding: var(--sp-1) 0; }
.hours div.is-today { font-weight: 700; color: var(--brand); }
.hours dt { color: var(--text-2); }
.hours div.is-today dt { color: var(--brand); }
.hours dd { font-feature-settings: "tnum"; }

.mapstub {
  aspect-ratio: 16 / 9;
  border-radius: var(--r-lg);
  background:
    repeating-linear-gradient(0deg, transparent 0 22px, var(--line) 22px 23px),
    repeating-linear-gradient(90deg, transparent 0 26px, var(--line) 26px 27px),
    var(--surface-sunk);
  display: grid;
  place-items: center;
  position: relative;
  border: 1px solid var(--line);
}
.mapstub__pin { color: var(--danger); filter: drop-shadow(0 4px 6px rgba(0,0,0,.2)); }

/* Fotka přes celou dlaždici (ui.tile): produkt, detail, košík, novinka. */
.prodcard__img, .hero-img, .cartrow__img, .newsrow__img { position: relative; overflow: hidden; }
.tile-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }