/* ==========================================================================
   Tary Drink — vlastní vizuální vrstva (Freelo 31463068)

   Web postavil XP BOOST a dělá si nárok na grafiku. Tenhle soubor proto
   přebíjí jejich tmavý motiv světlou „limonádovou" paletou a nahrazuje
   jejich obrázková pozadí, dlaždici odměny i loadery vlastními assety.

   styles.min.css od XP BOOSTu zůstává jako layoutová základna, načítá se
   před tímhle souborem — odtud !important u všeho, co jejich pravidla
   jinak přebijí (hlavně ta uvnitř media queries).
   ========================================================================== */

:root {
  /* Vlastní paleta: ovocná limonáda místo černé */
  --td-cream:    #fff7ec;
  --td-peach:    #ffe4d2;
  --td-berry:    #ffd3de;
  --td-ink:      #2a1016;
  --td-ink-soft: #7a5560;
  --td-red:      #c70c13;
  --td-red-dark: #a3080e;
  --td-red-hi:   #fb242c;
  --td-plum:     #5c0000;
  --td-plum-dark:#3a0000;
  --td-surface:  #fff;
  --td-line:     rgba(42, 16, 22, .14);

  /* Text ležící přímo na tmavém pozadí */
  --td-paper:      #fff;
  --td-paper-soft: rgba(255, 255, 255, .82);

  /* Přemapování proměnných z XPB stylů na novou paletu */
  --text-color-light: var(--td-ink);
  --body-bg-color: var(--td-cream);
  --dark-bg-color: var(--td-surface);
  --taryshopb_color_1: var(--td-red-hi);
  --taryshopb_color_1_rgb: 251, 36, 44;
  --taryshopb_color_2: var(--td-red);
  --taryshopb_color_1_trans: rgba(var(--taryshopb_color_1_rgb), 0.5);
  --taryshopb_btn_bg: var(--td-red);
  --taryshopb_btn_color: var(--td-surface);
  --taryshopb_btn_border: 1px solid var(--td-red);
  --taryshopb_btn_radius: 30px;
  --taryshopb_input_bg: var(--td-surface);
  --taryshopb_input_color: var(--td-red);
  --taryshopb_input_radius: 28px;

  /* Flavr (chybové hlášky u formuláře) — z tmavé karty na světlou */
  --popup-bg-dark: rgba(42, 16, 22, .45);
  --content-bg-dark: var(--td-surface);
  --content-color-dark: var(--td-ink);
  --button-color: var(--td-red);
  --button-border-color: var(--td-red);
  --button-default: transparent;
  --button-default-hover: var(--td-peach);
  --popup-border-radius: 18px;
  --button-border-radius: 30px;
}

/* --------------------------------------------------------------------------
   Typografie

   Roboto vyměněné za Figtree (Freelo 31463068). styles.min.css nastavuje
   font na html,body a pak ho znovu přebíjí na #footer a .inputHelp;
   flavr si navíc v libs/flavr/styles.css vnucuje systémový stack a linkuje
   se až za tímhle souborem — proto ten výčet a !important.
   -------------------------------------------------------------------------- */

html,
body,
section#footer,
.inputHelp,
.flavr-container {
  font-family: "Figtree", "Helvetica Neue", Arial, sans-serif !important;
}

/* --------------------------------------------------------------------------
   Pozadí a základní barevnost
   -------------------------------------------------------------------------- */

/* Pozadí od grafika je vysoká kompozice s postavičkami u okrajů, takže se
   kotví nahoře a roztahuje na šířku okna — ne přes cover, ten by okraje
   ořízl. Pod obrázkem pokračuje background-color v barvě jeho dolní hrany
   (#b90101), aby přechod nebyl vidět na dlouhé stránce.

   AVIF je hlavní formát: pozadí je velká hladká plocha a WebP na ní při
   stejné velikosti měří podstatně hůř (PSNR 43,0 proti 48,6 při 119 kB).
   Jako poslední fallback slouží originální JPEG od grafika — překódovat
   už jednou komprimovaný JPEG by kvalitu jen ubralo. */
/* Barva navazuje na dolní hranu obrázku, jinak je na dlouhé stránce vidět
   šev. Každá varianta končí jiným odstínem, proto se nastavuje zvlášť.
   Pozn.: mobilní podklad měl úplně dole jeden bílý řádek — ořezaný, jinak
   svítil přes celou šířku. Stojí za to říct grafikovi. */
html,
body.tary {
  background-color: #b90101 !important;
}

body.tary {
  background-image: url("/assets/images/design/bg-desktop.jpg") !important;
  background-position: center top !important;
  background-size: 100% auto !important;
  background-repeat: no-repeat !important;
  color: var(--td-paper) !important;
}

@supports (background-image: image-set(url("x.webp") type("image/webp"))) {
  body.tary {
    background-image: image-set(
      url("/assets/images/design/bg-desktop.avif") type("image/avif"),
      url("/assets/images/design/bg-desktop.webp") type("image/webp"),
      url("/assets/images/design/bg-desktop.jpg")  type("image/jpeg")) !important;
  }
}

@media (max-width: 1200px) {
  html,
  body.tary {
    background-color: #b80000 !important;
  }

  body.tary {
    background-image: url("/assets/images/design/bg-mobile.jpg") !important;
  }

  @supports (background-image: image-set(url("x.webp") type("image/webp"))) {
    body.tary {
      background-image: image-set(
        url("/assets/images/design/bg-mobile.avif") type("image/avif"),
        url("/assets/images/design/bg-mobile.webp") type("image/webp"),
        url("/assets/images/design/bg-mobile.jpg")  type("image/jpeg")) !important;
    }
  }
}

/* Overlay loaderu přes celou stránku */
body:before {
  background-image: url("/assets/images/design/spinner-tary.svg") !important;
  background-color: var(--td-plum-dark) !important;
}

body.working:before {
  background-color: rgba(58, 0, 0, .85) !important;
}

/* --------------------------------------------------------------------------
   Hlavička a navigace
   -------------------------------------------------------------------------- */

header.header {
  background-color: rgba(58, 0, 0, .82) !important;
  color: var(--td-paper) !important;
  border-bottom: 1px solid rgba(255, 255, 255, .12);
}

.nav a,
.nav a.tc_c_white,
.nav .menu-item {
  color: var(--td-paper) !important;
}

.nav a:hover,
.nav a:active,
.nav a.tc_c_white:hover {
  color: var(--td-red-hi) !important;
}

#nav-icon4 span {
  background: var(--td-paper) !important;
}

/* Rozbalené mobilní menu */
@media (max-width: 1200px) {
  .nav {
    background-color: rgba(58, 0, 0, .96) !important;
    color: var(--td-paper) !important;
  }
}

/* --------------------------------------------------------------------------
   Úvodní blok
   -------------------------------------------------------------------------- */

#howWin {
  color: var(--td-paper-soft);
}

#howWin h1,
#howWin strong {
  color: var(--td-paper);
}

/* Zvýraznění klíčového sdělení o dočasném režimu — bílá karta, aby
   nesplynulo s barevným pozadím */
#howWin p.h4 {
  background-color: var(--td-surface);
  border: 2px solid var(--td-red);
  border-radius: 18px;
  padding: 1rem 1.25rem;
  box-shadow: 0 18px 40px -24px rgba(0, 0, 0, .7);
  color: var(--td-ink);
}

#howWin p.h4 strong {
  color: var(--td-ink);
}

/* --------------------------------------------------------------------------
   Sekce s aktuální slevou
   -------------------------------------------------------------------------- */

#prizes {
  color: var(--td-paper-soft);
}

#prizes h2,
#prizes strong {
  color: var(--td-paper);
}

/* Dlaždice odměny od grafika. Rámeček a stín drží CSS, obsah je obrázek —
   ten má vlastní tmavě červené pozadí, takže na stránce potřebuje jen
   orámování, aby nesplynul s pozadím webu. */
.rewardCard {
  display: block;
  max-width: 320px;
  margin: 0 auto;
  text-decoration: none !important;
  border: 6px solid var(--td-surface);
  border-radius: 24px;
  overflow: hidden;
  box-shadow: 0 24px 50px -28px rgba(0, 0, 0, .85);
  transition: transform .3s ease, box-shadow .3s ease;
}

.rewardCard:hover,
.rewardCard:focus-visible {
  transform: scale(1.04);
  box-shadow: 0 28px 55px -26px rgba(0, 0, 0, .95);
}

.rewardCard img {
  display: block;
  width: 100%;
  height: auto;
}

/* Popisek pod dlaždicí (Freelo 31737587) */
.rewardCaption {
  color: var(--td-paper);
  font-weight: 700;
}

/* --------------------------------------------------------------------------
   Tlačítka
   -------------------------------------------------------------------------- */

a.asButton,
button.asButton {
  background-color: var(--td-red) !important;
  color: var(--td-surface) !important;
  border: 1px solid var(--td-red) !important;
  box-shadow: 0 14px 30px -16px rgba(199, 12, 19, .9);
}

a.asButton:hover,
button.asButton:hover {
  background-color: var(--td-red-dark) !important;
  border-color: var(--td-red-dark) !important;
}

a.asButton.outline,
button.asButton.outline {
  background-color: var(--td-surface) !important;
  outline: 2px solid var(--td-red) !important;
  color: var(--td-red) !important;
}

/* --------------------------------------------------------------------------
   Patička
   -------------------------------------------------------------------------- */

section#footer {
  background-color: var(--td-plum) !important;
  color: var(--td-surface);
}

section#footer .footerInfo,
section#footer .footerInfo span,
section#footer .footerInfo a,
section#footer .footerLinks a {
  color: var(--td-surface) !important;
}

/* „Provozovatel:" má v základních stylech .tc_c_1 = červená, na švestkovém
   pozadí by měl mizivý kontrast */
section#footer .footerInfo .tc_c_1 {
  color: var(--td-berry) !important;
}

section#footer .footerLinks a:hover {
  color: var(--td-berry) !important;
}

section#footer .footerLine {
  background-color: var(--td-plum-dark) !important;
  color: rgba(255, 255, 255, .75) !important;
}

/* --------------------------------------------------------------------------
   Modal se zadáním kódu
   -------------------------------------------------------------------------- */

.myModal {
  background-color: rgba(58, 0, 0, .97) !important;
}

.myModal > .modalContent {
  color: var(--td-paper);
}

.myModal > .modalContent a {
  color: var(--td-red-hi);
}

.myModal.open.loading {
  background-image: url("/assets/images/design/spinner-tary.svg") !important;
  background-size: 48px auto !important;
}

#codeActionWrapper h2 {
  color: var(--td-paper);
}

#codeActionWrapper #discountIntro > div {
  color: var(--td-paper-soft);
}

#codeActionWrapper #discountIntro strong {
  color: var(--td-paper);
}

#codeActionWrapper #winData input#couponCode {
  background-color: var(--td-surface) !important;
  border: 2px solid var(--td-red) !important;
  color: var(--td-ink) !important;
}

#codeActionWrapper #winData button#couponCopy {
  background-color: var(--td-red) !important;
  color: var(--td-surface) !important;
}

#codeActionWrapper #winData .tc_c_1 {
  color: var(--td-red-hi) !important;
}

/* Instrukce k uplatnění kupónu — bez marginu by na ně dosedla tlačítka pod nimi */
#codeActionWrapper .shopInfo {
  background-color: var(--td-surface);
  border: 1px solid var(--td-line);
  border-radius: 16px;
  margin-bottom: 1.5rem;
  color: var(--td-ink-soft);
}

#codeActionWrapper .shopInfo strong {
  color: var(--td-ink);
}

/* Právní doložka pod instrukcemi — menším písmem podle zadání (Freelo 31737587) */
#codeActionWrapper .discountDisclaimer {
  font-size: .8rem;
  line-height: 1.5;
  color: var(--td-paper-soft);
}

/* Obsah modalu je vyšší než viewport (nadpis + info text + slevový kód),
   bez scrollu by na mobilu nebyl vidět celý. */
#codeActionWrapper #codeWrapper > div {
  height: auto;
  min-height: 100vh;
  overflow-y: auto;
  padding: 4rem 0 2rem;
}

.flavr-content a {
  color: var(--td-red) !important;
}

.flavr-button {
  color: var(--td-red) !important;
  border-color: var(--td-red) !important;
  border-radius: 30px !important;
}