/* ============================================================================
   Choco Fleurs — cookie lišta v barvách obchodu
   Pro novou cookie lištu Shoptetu (.siteCookies, „Vyžadovat souhlas“).
   Karta s tečkovaným okrajem jako na logu, sušenka nakreslená v SVG
   (žádný obrázek se nenahrává), „Souhlasím“ tyrkysová, „Odmítnout“ stejně
   velká v obrysu — odmítnutí musí být stejně snadné jako souhlas (ÚOOÚ).

   INSTALACE: Správce souborů → /user/documents/upload/CSS/cookie-lista.css
   Návrhář šablon → HTML kódy → Záhlaví:
     <link rel="stylesheet" href="/user/documents/upload/CSS/cookie-lista.css?v=1">
   ========================================================================== */

.siteCookies.js-siteCookies {
  --ck-accent: #99d5dd;
  --ck-accent-hover: #ffccc9;
  --ck-text: #383a55;
  --ck-hot: #e65988;
  position: fixed !important;
  top: auto !important;
  right: auto !important;
  left: 50% !important;
  bottom: 20px !important;
  transform: translateX(-50%);
  width: min(640px, calc(100% - 32px)) !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 22px 24px !important;
  z-index: 2147483000 !important;
  background: #fff !important;
  color: var(--ck-text) !important;
  border: 4px dotted var(--ck-accent) !important;
  border-radius: 24px !important;
  box-shadow: 0 20px 60px rgba(56, 58, 85, .28) !important;
  font-family: "Open Sans", Arial, sans-serif;
  animation: ck-in .45s cubic-bezier(.2, .9, .3, 1.2) both;
}
.siteCookies.js-siteCookies.siteCookies--scrolled { bottom: 20px !important; opacity: 1 !important; }
/* Varianta --dark / --light ze šablony barví i vnitřní bloky — vše přebíjíme bílou kartou. */
.siteCookies.js-siteCookies .siteCookies__form,
.siteCookies.js-siteCookies .siteCookies__content,
.siteCookies.js-siteCookies .siteCookies__text,
.siteCookies.js-siteCookies .siteCookies__links,
.siteCookies.js-siteCookies .siteCookies__buttonWrap {
  background: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
}

.siteCookies.js-siteCookies .siteCookies__form {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  gap: 18px !important;
  max-width: none !important;
  padding: 0 !important;
}

.siteCookies.js-siteCookies .siteCookies__content {
  display: grid !important;
  grid-template-columns: 84px 1fr;
  column-gap: 18px;
  align-items: start;
  padding: 0 !important;
}
.siteCookies.js-siteCookies .siteCookies__content::before {
  content: "";
  grid-row: 1 / span 2;
  width: 84px;
  height: 84px;
  background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 96 96"><defs><mask id="b"><rect width="96" height="96" fill="%23fff"/><circle cx="82" cy="20" r="13" fill="%23000"/><circle cx="90" cy="38" r="8" fill="%23000"/></mask></defs><g mask="url(%23b)"><circle cx="48" cy="50" r="40" fill="%23c98a45"/><circle cx="48" cy="48" r="38" fill="%23e8b46d"/><circle cx="44" cy="44" r="30" fill="%23efc283" opacity=".55"/></g><g fill="%235b3524"><ellipse cx="30" cy="34" rx="5.5" ry="4.6" transform="rotate(-20 30 34)"/><ellipse cx="52" cy="58" rx="6" ry="5"/><ellipse cx="27" cy="62" rx="4.6" ry="4" transform="rotate(25 27 62)"/><ellipse cx="66" cy="70" rx="4.4" ry="3.8"/><ellipse cx="48" cy="27" rx="3.8" ry="3.2"/><ellipse cx="68" cy="45" rx="3.4" ry="3"/></g><g fill="%23e65988"><path d="M38 47c0-3 4-4 5-1 1-3 5-2 5 1 0 3-5 6-5 6s-5-3-5-6z"/></g><g stroke-linecap="round" stroke-width="3"><path d="M60 30l4 3" stroke="%23ffccc9"/><path d="M36 74l4-2" stroke="%2399d5dd"/><path d="M20 48l1 4" stroke="%23ffccc9"/><path d="M58 83l3-3" stroke="%23e65988"/></g></svg>') center / contain no-repeat;
  animation: ck-wobble 2.6s ease-in-out 1s 2;
}

.siteCookies.js-siteCookies .siteCookies__text {
  grid-column: 2;
  margin: 0 !important;
  color: var(--ck-text) !important;
  font-size: 14.5px !important;
  line-height: 1.55 !important;
}
.siteCookies.js-siteCookies .siteCookies__text strong,
.siteCookies.js-siteCookies .siteCookies__text b {
  display: block;
  margin: 2px 0 6px;
  font-family: "Exo 2", "Open Sans", sans-serif;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.25;
}
.siteCookies.js-siteCookies .siteCookies__text a { color: var(--ck-text) !important; text-decoration: underline; }

.siteCookies.js-siteCookies .siteCookies__links { grid-column: 2; margin: 8px 0 0 !important; padding: 0 !important; text-align: left !important; }
.siteCookies.js-siteCookies .siteCookies__link {
  padding: 0 !important;
  background: none !important;
  border: 0 !important;
  color: var(--ck-text) !important;
  font-size: 13px !important;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}

.siteCookies.js-siteCookies .siteCookies__buttonWrap {
  display: flex !important;
  gap: 10px !important;
  margin: 0 !important;
  padding: 0 !important;
  width: 100% !important;
}
.siteCookies.js-siteCookies .siteCookies__button {
  flex: 1 1 0;
  min-height: 50px;
  margin: 0 !important;
  padding: 0 20px !important;
  border: 2px solid var(--ck-text) !important;
  border-radius: 999px !important;
  background: #fff !important;
  color: var(--ck-text) !important;
  font: 700 15px/1 "Open Sans", Arial, sans-serif !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  cursor: pointer;
  transition: background-color .15s, border-color .15s, transform .15s;
}
.siteCookies.js-siteCookies .siteCookies__button[value="reject"] { order: 1; }
.siteCookies.js-siteCookies .siteCookies__button[value="all"] {
  order: 2;
  background: var(--ck-accent) !important;
  border-color: var(--ck-accent) !important;
}
.siteCookies.js-siteCookies .siteCookies__button:hover { transform: translateY(-1px); }
.siteCookies.js-siteCookies .siteCookies__button[value="all"]:hover {
  background: var(--ck-accent-hover) !important;
  border-color: var(--ck-accent-hover) !important;
}
.siteCookies.js-siteCookies .siteCookies__button[value="reject"]:hover { background: #f4f4f7 !important; }
.siteCookies.js-siteCookies .siteCookies__button:focus-visible,
.siteCookies.js-siteCookies .siteCookies__link:focus-visible {
  outline: 3px solid var(--ck-hot) !important;
  outline-offset: 3px;
}

@media (max-width: 600px) {
  .siteCookies.js-siteCookies {
    left: 0 !important;
    bottom: 0 !important;
    transform: none;
    width: 100% !important;
    padding: 18px 16px calc(16px + env(safe-area-inset-bottom)) !important;
    border-width: 3px 0 0 !important;
    border-radius: 22px 22px 0 0 !important;
    animation-name: ck-up;
  }
  .siteCookies.js-siteCookies.siteCookies--scrolled { bottom: 0 !important; }
  .siteCookies.js-siteCookies .siteCookies__content { grid-template-columns: 56px 1fr; column-gap: 14px; }
  .siteCookies.js-siteCookies .siteCookies__content::before { width: 56px; height: 56px; }
  .siteCookies.js-siteCookies .siteCookies__text { font-size: 14px !important; }
  .siteCookies.js-siteCookies .siteCookies__text strong,
  .siteCookies.js-siteCookies .siteCookies__text b { font-size: 18px; }
  .siteCookies.js-siteCookies .siteCookies__button { min-height: 48px; font-size: 14.5px !important; }
}

@keyframes ck-in { from { opacity: 0; transform: translate(-50%, 24px); } to { opacity: 1; transform: translate(-50%, 0); } }
@keyframes ck-up { from { opacity: 0; transform: translateY(100%); } to { opacity: 1; transform: none; } }
@keyframes ck-wobble { 0%, 100% { transform: rotate(0); } 20% { transform: rotate(-9deg); } 40% { transform: rotate(7deg); } 60% { transform: rotate(-4deg); } }
@media (prefers-reduced-motion: reduce) {
  .siteCookies.js-siteCookies, .siteCookies.js-siteCookies .siteCookies__content::before { animation: none !important; }
}