/* Enotale — cookie consent card. Port of the platform component (ADR 0119,
   storefront.min.css `.cookie-consent*`), same DOM ids and the same
   `enotale_consent` cookie, so the choice made on the pre-launch enotale.bg
   carries over when the store replaces it on the same host.

   Changes against the platform (Director 13.10, "the buttons on two rows"):
   - «Настройки» is a text link in the heading row, not a third button, so the
     two real choices always share one row on desktop.
   - The two choices are equal width (flex: 1 1 0) and never shrink below their
     label; when both labels cannot fit side by side (narrow phones) each takes
     the full width, so the wrap reads as a stack, not as a ragged row.
   Kept: a corner card, not a modal over the content.

   Works on both token sets (design-system/tokens.css on enotale.com,
   Enotale-bg/tokens.css on enotale.bg). The two platform-only tokens
   (--touch-target-min, --z-index-consent) have literal fallbacks here. */

.cookie-consent {
  --cookie-consent-bg: var(--color-surface-raised);
  --cookie-consent-border: 1px solid var(--color-border-default);
  --cookie-consent-gap: var(--spacing-md);
  --cookie-consent-max-width: 30rem;
  --cookie-consent-padding-x: var(--spacing-lg);
  --cookie-consent-padding-y: var(--spacing-md);
  --cookie-consent-radius: var(--radius-modal);
  --cookie-consent-shadow: var(--shadow-sticky-bar);
  --cookie-consent-switch-w: 44px;
  --cookie-consent-switch-h: 24px;
  --cookie-consent-switch-thumb-size: 18px;
  --cookie-consent-switch-thumb-inset: 3px;
  --cookie-consent-switch-thumb-bg: var(--color-surface-raised);
  --cookie-consent-switch-track-bg: var(--color-text-muted);
  --cookie-consent-switch-track-on: var(--color-accent-link);
  --cookie-consent-switch-disabled-opacity: 0.5;

  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  /* Under the 18+ gate (--z-modal): the gate is answered first. */
  z-index: var(--z-modal-overlay, 200);
  display: flex;
  justify-content: flex-start;
  padding: var(--cookie-consent-padding-y) var(--cookie-consent-padding-x);
  pointer-events: none;
}

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

.cookie-consent__card {
  pointer-events: auto;
  width: 100%;
  max-width: var(--cookie-consent-max-width);
  background: var(--cookie-consent-bg);
  border: var(--cookie-consent-border);
  border-radius: var(--cookie-consent-radius);
  box-shadow: var(--cookie-consent-shadow);
  overflow: hidden;
  animation: consent-rise var(--duration-fast, 150ms) ease;
}

@keyframes consent-rise {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

.cookie-consent__panel {
  padding: var(--cookie-consent-padding-y) var(--cookie-consent-padding-x);
  display: flex;
  flex-direction: column;
  gap: var(--cookie-consent-gap);
}

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

.cookie-consent__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--spacing-md);
}

.cookie-consent__heading {
  font-family: var(--font-ui);
  font-size: var(--font-size-small);
  font-weight: var(--font-weight-ui-semibold);
  color: var(--color-text-primary);
  margin: 0;
  line-height: var(--line-height-tight);
}

.cookie-consent__body {
  font-family: var(--font-ui);
  font-size: var(--font-size-small);
  color: var(--color-text-primary);
  margin: 0;
  line-height: var(--line-height-body);
}

.cookie-consent__body a,
.cookie-consent__link {
  color: var(--color-accent-link);
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* «Настройки» / «Назад»: text links that are buttons. The tap area is padded
   to 44px tall without changing how the line looks. */
.cookie-consent__link {
  background: none;
  border: 0;
  margin: calc(-1 * var(--spacing-sm)) calc(-1 * var(--spacing-xs));
  padding: var(--spacing-sm) var(--spacing-xs);
  min-height: 44px;
  font-family: var(--font-ui);
  font-size: var(--font-size-small);
  cursor: pointer;
  white-space: nowrap;
}

.cookie-consent__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-sm);
  align-items: center;
}

.cookie-consent__btn {
  flex: 1 1 0;
  min-width: fit-content;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: var(--spacing-sm) var(--spacing-md);
  border-radius: var(--radius-button, var(--radius-sm));
  border: 1px solid var(--color-accent-primary);
  font-family: var(--font-ui);
  font-size: var(--font-size-small);
  font-weight: var(--font-weight-ui-medium, 500);
  line-height: 1.2;
  white-space: nowrap;
  cursor: pointer;
  transition: background var(--duration-fast, 150ms), color var(--duration-fast, 150ms);
}

.cookie-consent__btn--primary {
  background: var(--color-accent-primary);
  color: var(--color-accent-primary-text);
}

.cookie-consent__btn--primary:hover { background: var(--color-accent-primary-hover); border-color: var(--color-accent-primary-hover); }

/* Text in the body colour, frame in the link colour: the refusal stays as
   readable as the acceptance on both grounds (dark: 12:1; the link colour
   alone is 4.35:1 there, under AA for 14px text). */
.cookie-consent__btn--secondary {
  background: transparent;
  color: var(--color-text-primary);
  border-color: var(--color-accent-link);
}

.cookie-consent__btn--secondary:hover { background: var(--color-surface-primary); }

.cookie-consent__btn:focus-visible,
.cookie-consent__link:focus-visible,
.cookie-consent__switch:focus-visible {
  outline: none;
  box-shadow: var(--shadow-focus-ring);
}

.cookie-consent__switches {
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--color-border-default);
  border-bottom: 1px solid var(--color-border-default);
  margin: 0 calc(-1 * var(--cookie-consent-padding-x));
  padding: 0 var(--cookie-consent-padding-x);
}

.cookie-consent__switch-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-md);
  padding: var(--spacing-md) 0;
  border-bottom: 1px solid var(--color-border-default);
}

.cookie-consent__switch-row:last-child { border-bottom: none; }

.cookie-consent__switch-info {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xs);
  flex: 1;
  min-width: 0;
}

.cookie-consent__switch-label {
  font-family: var(--font-ui);
  font-size: var(--font-size-small);
  font-weight: var(--font-weight-ui-semibold);
  color: var(--color-text-primary);
  line-height: var(--line-height-tight);
}

.cookie-consent__switch-desc {
  font-family: var(--font-ui);
  font-size: var(--font-size-micro);
  color: var(--color-text-muted);
  line-height: var(--line-height-body);
}

.cookie-consent__switch-ctrl {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  flex-shrink: 0;
}

.cookie-consent__always-on {
  font-family: var(--font-ui);
  font-size: var(--font-size-micro);
  color: var(--color-text-muted);
  white-space: nowrap;
}

.cookie-consent__switch {
  position: relative;
  display: inline-flex;
  align-items: center;
  width: var(--cookie-consent-switch-w);
  height: var(--cookie-consent-switch-h);
  border-radius: var(--radius-full);
  background: var(--cookie-consent-switch-track-bg);
  border: none;
  padding: 0;
  cursor: pointer;
  transition: background var(--duration-fast, 150ms);
  flex-shrink: 0;
}

.cookie-consent__switch[aria-checked="true"] { background: var(--cookie-consent-switch-track-on); }
.cookie-consent__switch-row--locked { opacity: var(--cookie-consent-switch-disabled-opacity); }
.cookie-consent__switch[aria-disabled="true"] { cursor: not-allowed; }

.cookie-consent__switch-thumb {
  position: absolute;
  top: var(--cookie-consent-switch-thumb-inset);
  left: var(--cookie-consent-switch-thumb-inset);
  width: var(--cookie-consent-switch-thumb-size);
  height: var(--cookie-consent-switch-thumb-size);
  border-radius: var(--radius-full);
  background: var(--cookie-consent-switch-thumb-bg);
  transition: left var(--duration-fast, 150ms);
  pointer-events: none;
}

.cookie-consent__switch[aria-checked="true"] .cookie-consent__switch-thumb {
  left: calc(var(--cookie-consent-switch-w) - var(--cookie-consent-switch-thumb-size) - var(--cookie-consent-switch-thumb-inset));
}

/* Footer reopener: looks like the footer's own links. */
.consent-reopen {
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  color: inherit;
  text-decoration: underline;
  cursor: pointer;
}

.consent-reopen[hidden] { display: none; }

@media (max-width: 600px) {
  .cookie-consent { padding: var(--spacing-sm); }
  .cookie-consent__card { max-width: none; }
}

@media (prefers-reduced-motion: reduce) {
  .cookie-consent__card { animation: none; }
  .cookie-consent__switch,
  .cookie-consent__switch-thumb { transition: none; }
}

@media print {
  .cookie-consent { display: none; }
}