/* Doplnky spolecne pro v3 i v4 (uvodni stranka i stranka boxu): historie
   penezenky, "Doporuc kamaradovi", kampanove kody, fotky aut. Pouziva
   promenne (--glass, --accent...) definovane v /v3|v4/css/style.css. */

/* --- historie penezenky (wallet-create.js) --- */
.history-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.45rem; }
.history-item {
  display: flex; align-items: center; gap: 0.7rem;
  padding: 0.65rem 0.75rem;
  background: var(--glass-strong);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-md);
}
.history-icon { font-size: 1.15rem; flex-shrink: 0; width: 1.6rem; text-align: center; }
.history-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 0.1rem; }
.history-main strong { font-size: 0.88rem; }
.history-main span { font-size: 0.74rem; color: var(--text-dim); }
.history-amount { font-weight: 800; font-size: 0.92rem; white-space: nowrap; }
.history-amount.plus { color: var(--success); }
.history-amount.minus { color: var(--text); }
.history-empty { font-size: 0.85rem; color: var(--text-dim); text-align: center; margin: 0.5rem 0; }

/* --- Doporuc kamaradovi --- */
.referral-box {
  margin-top: 1rem;
  padding: 0.9rem;
  background: rgba(53, 214, 138, 0.07);
  border: 1px solid rgba(53, 214, 138, 0.3);
  border-radius: var(--radius-md);
  text-align: left;
}
.referral-box strong { display: block; font-size: 0.92rem; margin-bottom: 0.35rem; }
.referral-box p { font-size: 0.8rem !important; line-height: 1.45; color: var(--text-dim); margin: 0 0 0.6rem !important; }
.referral-link {
  font-family: monospace; font-size: 0.82rem; word-break: break-all;
  padding: 0.5rem 0.6rem; margin-bottom: 0.6rem;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-sm);
}
.referral-actions { display: flex; gap: 0.5rem; }
.referral-actions .btn-secondary { flex: 1; width: auto; padding: 0.6rem 0.4rem; font-size: 0.85rem; }
.referral-banner { padding: 1rem 1.1rem; margin: 0 0 1.25rem; border-color: rgba(53, 214, 138, 0.35) !important; }
.referral-banner strong { display: block; font-size: 1rem; margin-bottom: 0.3rem; }
.referral-banner p { margin: 0 0 0.8rem; color: var(--text-dim); font-size: 0.86rem; line-height: 1.5; }

/* --- kampanovy kod na strance boxu (app.js) --- */
.campaign-note {
  display: flex; align-items: center; justify-content: space-between; gap: 0.6rem;
  margin: 0 0 0.7rem; padding: 0.6rem 0.8rem;
  background: rgba(79, 140, 255, 0.1);
  border: 1px solid rgba(79, 140, 255, 0.35);
  border-radius: var(--radius-md);
  font-size: 0.84rem; line-height: 1.4;
}
.campaign-note button {
  background: none; border: none; color: var(--text-dim); text-decoration: underline;
  font-family: inherit; font-size: 0.78rem; cursor: pointer; padding: 0.4rem; flex-shrink: 0;
}

/* --- po umyti: fotka / recenze (app.js) --- */
.after-wash { display: flex; flex-direction: column; gap: 0.75rem; margin: 1rem 0 0.75rem; }
.after-wash .btn-secondary, .after-wash a.btn-secondary { width: 100%; text-align: center; text-decoration: none; box-sizing: border-box; }
.after-wash-note { font-size: 0.75rem; color: var(--text-dim); text-align: center; margin: 0; }

/* --- nahrani fotky (photo-upload.js) --- */
.photo-pick {
  display: flex; align-items: center; justify-content: center;
  padding: 1.1rem; margin: 0 0 0.9rem;
  border: 1px dashed rgba(255, 255, 255, 0.25);
  border-radius: var(--radius-md);
  background: rgba(255, 255, 255, 0.03);
  font-weight: 700; cursor: pointer;
}
.photo-preview { display: block; width: 100%; max-height: 260px; object-fit: contain; border-radius: var(--radius-md); margin: 0 0 0.9rem; background: #000; }
.photo-full { display: block; width: 100%; max-height: calc(100vh - 9rem); object-fit: contain; border-radius: var(--radius-md); background: #000; }
.photo-caption { text-align: center; font-size: 0.85rem !important; margin: 0.6rem 0 0 !important; }

/* --- galerie na uvodni strance --- */
.gallery-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.6rem; margin-bottom: 0.9rem; }
@media (min-width: 640px) { .gallery-grid { grid-template-columns: repeat(4, 1fr); } }
.gallery-item {
  position: relative; padding: 0; border: 1px solid var(--glass-border);
  border-radius: var(--radius-md); overflow: hidden; cursor: pointer;
  background: var(--glass); aspect-ratio: 4 / 3;
}
.gallery-item img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 0.25s ease; }
.gallery-item:hover img { transform: scale(1.04); }
.gallery-item span {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 0.35rem 0.5rem; font-size: 0.72rem; text-align: left; color: #fff;
  background: rgba(0, 0, 0, 0.6);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.gallery-empty { color: var(--text-dim); font-size: 0.86rem; margin: 0 0 0.8rem; }
#photoConsent { accent-color: var(--accent); }

/* --- zive vysilani (video.html) --- */
.video-screen { max-width: 960px; }
.video-wrap { position: relative; padding: 0; overflow: hidden; aspect-ratio: 16 / 9; background: #000; }
.video-wrap video { display: block; width: 100%; height: 100%; background: #000; object-fit: contain; }
.video-overlay {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  padding: 1.5rem; text-align: center; background: rgba(6, 10, 18, 0.88); pointer-events: none;
}
.video-overlay[hidden] { display: none; }
.video-overlay p { margin: 0; color: var(--text-dim); font-size: 0.95rem; line-height: 1.5; max-width: 30rem; }
.video-hint { text-align: center; font-size: 0.8rem; color: var(--text-dim); }

/* --- vice streamu naraz na /video (video.js) --- */
.video-grid { display: grid; grid-template-columns: 1fr; gap: 1.2rem; }
@media (min-width: 900px) { .video-grid:not(.single) { grid-template-columns: repeat(2, 1fr); } }
.video-grid[hidden] { display: none; }
.video-tile-label { font-size: 0.85rem; font-weight: 700; margin: 0 0 0.4rem 0.2rem; color: var(--text-dim); }
.video-grid.single .video-tile-label { display: none; }
.video-unmute { width: 100%; margin-top: 0.6rem; }

/* --- promo blok na uvodni strance (landing.html) --- */
.promo-card {
  position: relative; overflow: hidden;
  padding: 1.4rem 1.25rem; margin: 0 0 1.5rem;
  border-color: rgba(79, 140, 255, 0.4) !important;
  background: linear-gradient(135deg, rgba(79, 140, 255, 0.16), rgba(53, 214, 138, 0.08)) !important;
}
.promo-kicker {
  display: inline-block; padding: 0.25rem 0.7rem; margin-bottom: 0.7rem;
  font-size: 0.72rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase;
  color: #fff; background: rgba(79, 140, 255, 0.3);
  border: 1px solid rgba(79, 140, 255, 0.55); border-radius: 999px;
}
.promo-title { margin: 0 0 0.6rem; font-size: clamp(1.35rem, 4.6vw, 2rem); font-weight: 800; line-height: 1.2; }
.promo-lead { margin: 0 0 1.1rem; color: var(--text-dim); font-size: 0.95rem; line-height: 1.55; max-width: 44rem; }
.promo-points { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr; gap: 0.7rem; }
@media (min-width: 640px) { .promo-points { grid-template-columns: repeat(2, 1fr); } }
.promo-points li {
  display: flex; gap: 0.7rem; align-items: flex-start;
  padding: 0.75rem 0.8rem; background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--glass-border); border-radius: var(--radius-md);
}
.promo-points li > span { font-size: 1.35rem; line-height: 1.2; flex-shrink: 0; }
.promo-points li div { font-size: 0.82rem; line-height: 1.45; color: var(--text-dim); }
.promo-points li strong { display: block; font-size: 0.92rem; color: var(--text); margin-bottom: 0.1rem; }
.promo-flow { display: flex; align-items: center; justify-content: center; gap: 0.4rem; margin: 0 0 1.3rem; }
.promo-step {
  flex: 1; max-width: 11rem; display: flex; flex-direction: column; align-items: center; text-align: center;
  padding: 0.8rem 0.4rem; background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--glass-border); border-radius: var(--radius-md);
}
.promo-step svg { width: 2.6rem; height: 2.6rem; color: var(--accent); margin-bottom: 0.4rem; }
.promo-step b { font-size: 0.85rem; }
.promo-step small { font-size: 0.72rem; color: var(--text-dim); }
.promo-arrow { color: var(--text-dim); font-size: 1.1rem; flex-shrink: 0; }
.promo-sub { margin: 0 0 0.8rem; font-size: 1.02rem; font-weight: 800; }

/* promo: fotka s nadpisem pres ni + cistsi body bez emoji */
.promo-card { padding: 0 0 1.25rem; }
.promo-card > :not(.promo-hero) { margin-left: 1.25rem; margin-right: 1.25rem; }
.promo-hero { position: relative; margin: 0 0 1.1rem; }
.promo-hero img { display: block; width: 100%; height: clamp(220px, 46vw, 400px); object-fit: cover; object-position: 60% 50%; }
.promo-hero::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(6, 10, 18, 0.15) 0%, rgba(6, 10, 18, 0.55) 55%, rgba(6, 10, 18, 0.94) 100%);
}
.promo-hero-text { position: absolute; left: 1.25rem; right: 1.25rem; bottom: 1rem; z-index: 1; }
.promo-hero-text .promo-title { margin: 0; text-shadow: 0 2px 14px rgba(0, 0, 0, 0.6); }
.promo-points li { position: relative; padding-left: 2.3rem; }
.promo-points li::before {
  content: ''; position: absolute; left: 0.85rem; top: 1.05rem; width: 0.6rem; height: 0.6rem;
  border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 4px rgba(79, 140, 255, 0.18);
}
.promo-credit { margin-top: 0.9rem; margin-bottom: 0; font-size: 0.68rem; color: var(--text-dim); opacity: 0.75; }
.promo-credit a { color: inherit; }
.promo-flow { align-items: stretch; }
.promo-step { justify-content: center; }
.promo-arrow { align-self: center; }

/* promo: vlastni fotka boxu vedle tri kroku */
.promo-split { display: grid; grid-template-columns: 1fr; gap: 1rem; margin-bottom: 1.3rem; align-items: center; }
.promo-split .promo-flow { margin: 0; }
.promo-photo { margin: 0; border-radius: var(--radius-md); overflow: hidden; border: 1px solid var(--glass-border); background: #000; }
.promo-photo img { display: block; width: 100%; height: auto; }
.promo-photo figcaption { padding: 0.5rem 0.75rem; font-size: 0.74rem; color: var(--text-dim); background: rgba(255, 255, 255, 0.04); }
@media (min-width: 820px) {
  .promo-split { grid-template-columns: minmax(0, 420px) 1fr; gap: 1.4rem; }
}

/* --- logo Myci centrum Horice v hlavicce (landing + stranka boxu) --- */
.brand-logo { display: block; margin: 0 auto 1.1rem; width: min(76%, 320px); }
.brand-logo img { display: block; width: 100%; height: auto; }

/* --- horni lista uvodni stranky - jen na PC (od 1024 px), na mobilu a
   tabletu na vysku zustava hamburger (.menu-bar) a velke logo. Plocha barva
   jako zbytek v3 (zadne sklo/blur). Lista je o neco sirsi nez obsah (1180 vs
   1080 px), aby se veslo velke logo - sirky odkazu jsou zmerene, pri zmene
   textu/poctu odkazu overit, ze nic nepreteka (.site-header-inner scrollWidth).
   Viz landing.html (.site-header) a landing.js (stin, aktivni odkaz). --- */
.site-header { display: none; }
@media (min-width: 1024px) {
  .site-header {
    display: block;
    position: sticky;
    top: 0;
    z-index: 40;
    background: var(--bg);
    border-bottom: 1px solid transparent;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
  }
  .site-header.scrolled { border-bottom-color: var(--glass-border); box-shadow: 0 6px 20px rgba(0, 0, 0, 0.35); }
  .site-header-inner { max-width: 1180px; margin: 0 auto; padding: 0.75rem 1.25rem; display: flex; align-items: center; gap: 1.25rem; }
  .site-header-logo { flex: none; display: block; width: 160px; }
  .site-header-logo img { display: block; width: 100%; height: auto; }
  .site-nav { flex: 1; display: flex; align-items: center; justify-content: center; gap: 0; }
  .site-nav a,
  .site-nav button {
    padding: 0.5rem 0.5rem;
    border: none;
    border-radius: var(--radius-sm);
    background: none;
    color: var(--text-dim);
    font: inherit;
    font-size: 0.84rem;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    transition: color 0.15s ease, background-color 0.15s ease;
  }
  .site-nav a:hover,
  .site-nav button:hover { color: var(--text); background: rgba(255, 255, 255, 0.05); }
  .site-nav a.active { color: var(--text); background: rgba(79, 140, 255, 0.14); }
  .site-header-actions { flex: none; display: flex; align-items: center; gap: 0.5rem; }
  .site-header-link {
    padding: 0.5rem 0.5rem;
    border: none;
    background: none;
    color: var(--text-dim);
    font: inherit;
    font-size: 0.85rem;
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
  }
  .site-header-link:hover { color: var(--text); }
  .site-header-cta {
    padding: 0.6rem 1rem;
    border-radius: var(--radius-md);
    background: var(--accent);
    color: #fff;
    font-size: 0.88rem;
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
    transition: filter 0.15s ease;
  }
  .site-header-cta:hover { filter: brightness(1.12); }
  .site-nav a:focus-visible,
  .site-nav button:focus-visible,
  .site-header-link:focus-visible,
  .site-header-cta:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

  /* lista nahrazuje hamburger i velke logo v uvodu stranky; stitek
     "Samoobsluzna mycka" na PC majitel nechce */
  .site-header ~ .landing-screen { padding-top: 1.75rem; }
  .site-header ~ .landing-screen .menu-bar,
  .site-header ~ .landing-screen .hero .brand-logo,
  .site-header ~ .landing-screen .hero .badge { display: none; }
  /* kotvy z listy nesmi skoncit schovane pod ni */
  .site-header ~ .landing-screen [id] { scroll-margin-top: 84px; }
}
@media (min-width: 1100px) {
  .site-header-logo { width: 190px; }
}
@media (min-width: 1220px) {
  .site-header-inner { gap: 1.5rem; }
  .site-header-logo { width: 220px; }
  .site-nav { gap: 0.25rem; }
  .site-nav a,
  .site-nav button { padding: 0.5rem 0.7rem; font-size: 0.88rem; }
}
@media (max-width: 1023px) {
  .footer-links .desktop-only { display: none; }
}
@media (prefers-reduced-motion: no-preference) {
  html:has(.site-header) { scroll-behavior: smooth; }
}

/* nadpis jen pro vyhledavace a ctecky obrazovky - na strance ho nahrazuje logo */
.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* --- darkove kody (gift.js) a hlaseni problemu (report-problem.js) --- */
[data-report-disabled] { display: none !important; }
.wallet-create-field select,
.wallet-create-field textarea {
  display: block; width: 100%; margin-top: 0.3rem; box-sizing: border-box;
  background: rgba(255, 255, 255, 0.04); border: 1px solid var(--glass-border);
  border-radius: var(--radius-sm); padding: 0.65rem 0.8rem; color: var(--text);
  font-family: inherit; font-size: 0.95rem; font-weight: 600;
}
.wallet-create-field select option { color: #111; }
.wallet-create-field textarea { resize: vertical; min-height: 4.5rem; }
.report-link { text-align: center; margin: 0.4rem 0 1.2rem; }
.link-btn {
  background: none; border: none; color: var(--text-dim); text-decoration: underline;
  font-family: inherit; font-size: 0.82rem; cursor: pointer; padding: 0.6rem;
}
.gift-amounts { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.6rem; margin: 0 0 1rem; }
.gift-amount {
  display: flex; flex-direction: column; align-items: center; gap: 0.15rem; padding: 0.8rem 0.4rem;
  background: var(--glass-strong); border: 1px solid var(--glass-border); border-radius: var(--radius-md);
  color: var(--text); font-family: inherit; cursor: pointer;
}
.gift-amount strong { font-size: 1.1rem; }
.gift-amount span { font-size: 0.74rem; color: var(--text-dim); }
.gift-amount.selected { border-color: var(--accent); background: rgba(79, 140, 255, 0.16); }
.gift-code {
  font-family: monospace; font-size: 2rem; font-weight: 800; letter-spacing: 0.12em;
  padding: 0.9rem 0.5rem; margin: 0.4rem 0 0.9rem; user-select: all;
  background: rgba(255, 255, 255, 0.05); border: 1px dashed var(--glass-border); border-radius: var(--radius-md);
}
.gift-actions { display: flex; gap: 0.5rem; margin-bottom: 0.4rem; }
.gift-actions .btn-secondary { flex: 1; width: auto; padding: 0.7rem 0.4rem; font-size: 0.88rem; }
.wallet-create-content a { color: var(--accent); }

/* platba fyzickou kartou na terminalu SumUp Solo u boxu (viz app.js, startTerminalPayment) */
.terminal-pay { margin-top: 0.9rem; }
.terminal-pay-btn { width: 100%; }
.terminal-pay-btn:disabled { opacity: 0.5; cursor: not-allowed; }
#terminalCancelBtn { margin-top: 0.8rem; }

/* souhlas s podminkami u platby (stranka boxu) */
.pay-legal-note { text-align: center; font-size: 0.72rem; line-height: 1.4; color: var(--text-dim); margin: 0.35rem 0 0; }
.link-inline { appearance: none; background: none; border: 0; padding: 0; font: inherit; color: inherit; text-decoration: underline; cursor: pointer; }