/* =====================================================================
   COOKIE CONSENT
   The bar that meets a first-time visitor at the bottom of the page, and
   the settings dialog behind its "Nastavení" button.

   No Figma frame covers this, so it is built out of the vocabulary the
   rest of the storefront already uses: a white 24px card on a soft
   shadow, TASA Orbiter for the heading, the orange gradient with dark
   ink on the confirming action and the quiet bordered fill on the rest.
   The dialog borrows the quick cart's backdrop - 70% black under a 5px
   blur - so the two never look like they came from different sites.
   ===================================================================== */

/* Sits under the quick cart (1080): the drawer is opened deliberately and
   should cover the bar. The dialog goes above both - see below. */
.cookie-bar {
  position: fixed;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1060;
  display: flex;
  justify-content: center;
  padding: 16px;
  pointer-events: none;
}

.cookie-bar[hidden] { display: none; }

.cookie-bar__panel {
  display: flex;
  align-items: center;
  gap: 28px;
  width: min(1140px, 100%);
  padding: 24px 28px;
  border: 1px solid var(--color-border, #e1e2dd);
  border-radius: 24px;
  background: #fff;
  box-shadow: 0 18px 50px rgba(32, 35, 28, 0.18);
  pointer-events: auto;
  /* Comes up from below the fold rather than appearing on top of the
     page, and only once the page itself has settled. */
  transform: translateY(calc(100% + 16px));
  opacity: 0;
  transition: transform .32s cubic-bezier(.22, .61, .36, 1), opacity .32s ease;
}

.cookie-bar.is-open .cookie-bar__panel {
  transform: translateY(0);
  opacity: 1;
}

/* ---- The icon badge ---- */
.cookie-bar__icon {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  border-radius: 999px;
  background: linear-gradient(180deg, var(--color-orange-100, #fdf0d9) 0%, var(--color-orange-200, #f9dbb2) 100%);
  color: var(--color-orange-700, #b95122);
  font-size: 24px;
}

/* ---- The wording ---- */
.cookie-bar__body {
  flex: 1 1 auto;
  min-width: 0;
}

.cookie-bar__title {
  margin: 0 0 4px;
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 600;
  line-height: 1.25;
  color: var(--color-ink, #20231c);
}

.cookie-bar__text {
  margin: 0;
  font-size: 14px;
  line-height: 1.55;
  color: #727272;
}

.cookie-bar__text a {
  color: var(--color-ink, #20231c);
  text-decoration: underline;
}

.cookie-bar__text a:hover { color: var(--color-primary, #ef8739); }

/* ---- The actions ----
   Four buttons is a lot for one row, so they wrap in pairs rather than
   squeezing: the confirming action keeps its width at every size. */
.cookie-bar__actions {
  flex: 0 0 auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
}

/* =====================================================================
   BUTTONS
   Local classes rather than .btn-primary: those carry Bootstrap's
   padding and a stack of !important, and this card needs a smaller,
   quieter set that still reads as the same family.
   ===================================================================== */
.cookie-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 11px 22px;
  border: 1px solid transparent;
  border-radius: var(--radius-btn-l, 16px);
  font-family: var(--font-family);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background .18s ease, border-color .18s ease, color .18s ease,
              transform .18s ease, box-shadow .18s ease;
}

.cookie-btn:focus-visible {
  outline: 2px solid var(--color-ink, #20231c);
  outline-offset: 2px;
}

/* The confirming action: the orange gradient with dark ink, as everywhere. */
.cookie-btn--primary {
  background: var(--gradient-primary, linear-gradient(180deg, #ef8739 0%, #f29e50 100%));
  color: var(--color-ink, #20231c);
}

.cookie-btn--primary:hover {
  background: linear-gradient(180deg, var(--color-primary, #ef8739) 0%, #cf7a35 100%);
  color: var(--color-ink, #20231c);
  transform: translateY(-1px);
  box-shadow: 0 8px 20px rgba(219, 132, 62, 0.32);
}

/* The two lesser accepts and the reject: one bordered fill, so no single
   one of them competes with "Přijmout vše". */
.cookie-btn--quiet {
  background: var(--color-bg-alt, #f1f1ed);
  border-color: var(--color-border, #e1e2dd);
  color: var(--color-ink, #20231c);
}

.cookie-btn--quiet:hover {
  background: var(--color-muted-1, #e1e2dd);
  border-color: var(--color-muted-3, #cccfc6);
  color: var(--color-ink, #20231c);
}

/* "Nastavení" is a way out of the decision, not a decision: underlined
   text, no fill. */
.cookie-btn--link {
  padding-inline: 8px;
  background: transparent;
  color: #727272;
  font-weight: 500;
  text-decoration: underline;
}

.cookie-btn--link:hover { color: var(--color-ink, #20231c); }

/* =====================================================================
   SETTINGS DIALOG
   It is only ever opened on purpose, from the bar or from the footer, so
   it goes over the rest of the chrome: past the quick cart (1080), the
   phone's top bar (.m-chrome__inner, 1100) and the phone's navigation
   overlay (.m-overlay, 1200). The full-screen photo viewer at 2000 is
   left above it - that one is a viewer, not chrome.
   ===================================================================== */
.cookie-modal {
  position: fixed;
  inset: 0;
  z-index: 1210;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.cookie-modal[hidden] { display: none; }

.cookie-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  opacity: 0;
  transition: opacity .24s ease;
}

.cookie-modal.is-open .cookie-modal__backdrop { opacity: 1; }

.cookie-modal__dialog {
  position: relative;
  display: flex;
  flex-direction: column;
  width: min(680px, 100%);
  max-height: min(760px, calc(100vh - 40px));
  border-radius: 24px;
  background: #fff;
  box-shadow: 0 24px 60px rgba(32, 35, 28, 0.28);
  transform: translateY(12px) scale(.98);
  opacity: 0;
  transition: transform .28s cubic-bezier(.22, .61, .36, 1), opacity .24s ease;
  overflow: hidden;
}

.cookie-modal.is-open .cookie-modal__dialog {
  transform: translateY(0) scale(1);
  opacity: 1;
}

/* ---- Heading ---- */
.cookie-modal__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 32px 32px 20px;
}

.cookie-modal__title {
  margin: 0 0 6px;
  font-family: var(--font-display);
  font-size: 28px;
  font-weight: 600;
  line-height: 1.2;
  color: var(--color-ink, #20231c);
}

.cookie-modal__intro {
  margin: 0;
  font-size: 14px;
  line-height: 1.55;
  color: #727272;
}

.cookie-modal__intro a {
  color: var(--color-ink, #20231c);
  text-decoration: underline;
}

.cookie-modal__intro a:hover { color: var(--color-primary, #ef8739); }

.cookie-modal__close {
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: #727272;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  transition: background .18s ease, color .18s ease;
}

.cookie-modal__close:hover { background: var(--color-bg-alt, #f1f1ed); color: var(--color-ink, #20231c); }

/* ---- The categories ---- */
.cookie-modal__groups {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 0 32px 8px;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.cookie-group {
  display: flex;
  align-items: flex-start;
  gap: 18px;
  padding: 20px;
  border-radius: 20px;
  background: var(--color-green-50, #f8f9f7);
}

.cookie-group__body { flex: 1 1 auto; min-width: 0; }

.cookie-group__name {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 4px;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--color-ink, #20231c);
}

.cookie-group__always {
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--color-muted-1, #e1e2dd);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .02em;
  text-transform: uppercase;
  color: var(--color-green-700, #575f4c);
}

.cookie-group__text {
  margin: 0;
  font-size: 13px;
  line-height: 1.55;
  color: #727272;
}

/* ---- The switch ----
   A real checkbox, transparent but still the thing that is clicked,
   focused and read out; the track and knob are drawn from its state. */
.cookie-switch {
  flex: 0 0 auto;
  position: relative;
  display: block;
  width: 52px;
  height: 30px;
  margin-top: 2px;
}

.cookie-switch__input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}

.cookie-switch__track {
  position: absolute;
  inset: 0;
  border-radius: 999px;
  background: var(--color-muted-3, #cccfc6);
  transition: background .2s ease;
  pointer-events: none;
}

.cookie-switch__track::after {
  content: '';
  position: absolute;
  top: 3px;
  left: 3px;
  width: 24px;
  height: 24px;
  border-radius: 999px;
  background: #fff;
  box-shadow: 0 2px 6px rgba(32, 35, 28, 0.24);
  transition: transform .2s cubic-bezier(.22, .61, .36, 1);
}

.cookie-switch__input:checked ~ .cookie-switch__track {
  background: var(--gradient-primary, linear-gradient(180deg, #ef8739 0%, #f29e50 100%));
}

.cookie-switch__input:checked ~ .cookie-switch__track::after {
  transform: translateX(22px);
}

.cookie-switch__input:focus-visible ~ .cookie-switch__track {
  outline: 2px solid var(--color-ink, #20231c);
  outline-offset: 2px;
}

/* Nezbytné cookies cannot be switched off, and the switch says so rather
   than pretending to be live. */
.cookie-switch__input:disabled { cursor: not-allowed; }

.cookie-switch__input:disabled ~ .cookie-switch__track {
  background: var(--color-green-400, #b1b4aa);
  opacity: .75;
}

/* ---- Dialog actions ---- */
.cookie-modal__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  padding: 20px 32px 28px;
}

/* "Uložit nastavení" is the point of this dialog, so it leads and the
   two blanket answers sit to its right. */
.cookie-modal__foot .cookie-btn--primary { margin-right: auto; }

/* The page behind the dialog does not scroll, the same way the quick cart
   holds it still. */
body.cookie-modal-open { overflow: hidden; }

/* =====================================================================
   RESPONSIVE
   The bar folds into a column: icon and heading on one line, the text
   under it, then the buttons as a full-width stack. Nothing is dropped -
   all four answers stay reachable on a phone.
   ===================================================================== */
@media (max-width: 991.98px) {
  .cookie-bar__panel {
    flex-direction: column;
    align-items: stretch;
    gap: 18px;
  }

  .cookie-bar__actions { justify-content: flex-start; }
}

@media (max-width: 767.98px) {
  .cookie-bar { padding: 10px; }

  .cookie-bar__panel {
    gap: 16px;
    padding: 20px;
    border-radius: 20px;
  }

  .cookie-bar__icon {
    width: 44px;
    height: 44px;
    font-size: 19px;
  }

  .cookie-bar__title { font-size: 18px; }

  .cookie-bar__text { font-size: 13px; }

  .cookie-bar__actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }

  /* The primary answer takes the full width above the pair, and
     "Nastavení" closes the block underneath them. */
  .cookie-bar__actions .cookie-btn--primary,
  .cookie-bar__actions .cookie-btn--link { grid-column: 1 / -1; }

  .cookie-btn {
    padding-inline: 14px;
    font-size: 13px;
    white-space: normal;
  }

  .cookie-modal { padding: 10px; }

  .cookie-modal__dialog {
    max-height: calc(100vh - 20px);
    border-radius: 20px;
  }

  .cookie-modal__head { padding: 24px 20px 16px; }

  .cookie-modal__title { font-size: 24px; }

  .cookie-modal__groups { padding: 0 20px 8px; }

  .cookie-group {
    gap: 14px;
    padding: 16px;
    border-radius: 16px;
  }

  .cookie-modal__foot {
    display: grid;
    grid-template-columns: 1fr;
    padding: 16px 20px 22px;
  }

  .cookie-modal__foot .cookie-btn--primary { margin-right: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .cookie-bar__panel,
  .cookie-modal__backdrop,
  .cookie-modal__dialog,
  .cookie-switch__track,
  .cookie-switch__track::after,
  .cookie-btn {
    transition: none;
  }

  .cookie-bar__panel { transform: none; }
}