/* Баннер cookie fond-manifest.ru.
   Источник вёрстки: ~/code-projects/figma-bridge/output/cookie-consent
   (tokens.css, cookie-button.css, checkbox-field.css, cookie-banner.css).
   Отличия от галереи макета: баннер закреплён внизу экрана, токены заведены
   на хосте вместо :root, добавлены сбросы против bootstrap и стилей шаблона,
   пути к картинкам абсолютные. */

@font-face {
  font-family: "Manifest Cookie";
  src: url(/local/templates/manifest/fonts/montserrat/Montserrat-Medium.woff) format("woff");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Manifest Cookie";
  src: url(/local/templates/manifest/fonts/montserrat/Montserrat-SemiBold.woff) format("woff");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

.cookie-banner-host {
  --sds-size-space-300: 12px;
  --sds-typography-body-size-medium: 16px;

  --cookie-font: "Manifest Cookie", "Montserrat", system-ui, sans-serif;

  --cookie-brand: #4e54c6;
  --cookie-brand-check: #4d53c6;
  --cookie-on-brand: #ffffff;
  --cookie-ink: #000000;
  --cookie-ink-strong: #212121;
  --cookie-ink-ghost: #4d4d4d;
  --cookie-muted: #757575;
  --cookie-copy: #999999;
  --cookie-line: #e6e6e6;
  --cookie-disabled-bg: #d9d9d9;
  --cookie-disabled-line: #b3b3b3;

  container: cookie-banner / inline-size;
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 9990;
  max-height: 100vh;
  max-height: 100dvh;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}
.cookie-banner-host[hidden],
.cookie-banner-host [hidden] { display: none !important; }

/* сбросы против bootstrap и styles.css шаблона */
.cookie-banner-host *,
.cookie-banner-host *::before,
.cookie-banner-host *::after { box-sizing: border-box; }
.cookie-banner-host p,
.cookie-banner-host label { margin: 0; }
.cookie-banner-host button { margin: 0; text-transform: none; letter-spacing: normal; }

/* ---------------- Cookie Button ---------------- */
.cookie-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 24px;
  border: 0;
  border-radius: 8px;
  font: 600 14px/17px var(--cookie-font);
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;
  transition: filter .15s ease, background-color .15s ease;
}
.cookie-button:focus-visible {
  outline: 2px solid var(--cookie-brand);
  outline-offset: 2px;
}
.cookie-button[data-state="primary"] {
  background: var(--cookie-brand);
  color: var(--cookie-on-brand);
}
.cookie-button[data-state="primary"]:hover { filter: brightness(1.08); }
.cookie-button[data-state="secondary"] {
  padding: 13.5px 25.5px;
  background: #ffffff;
  color: var(--cookie-ink-strong);
  box-shadow: inset 0 0 0 1.5px var(--cookie-line);
}
.cookie-button[data-state="secondary"]:hover { background: #f7f7f7; }
.cookie-button[data-state="ghost"] {
  padding-block: 10px;
  background: transparent;
  color: var(--cookie-ink-ghost);
}
.cookie-button[data-state="ghost"]:hover { color: var(--cookie-ink-strong); }

/* ---------------- Checkbox Field ---------------- */
.checkbox-field {
  --checkbox-label-size: var(--sds-typography-body-size-medium);
  --checkbox-label-lh: 19px;
  --checkbox-desc-size: 14px;
  --checkbox-desc-lh: 20px;
  --checkbox-rows-gap: 0px;

  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--checkbox-rows-gap);
  width: fit-content;
  min-width: 120px;
  font-family: var(--cookie-font);
  font-weight: 500;
  cursor: pointer;
}
.checkbox-field__row {
  display: flex;
  align-items: center;
  gap: var(--sds-size-space-300);
  min-width: 120px;
}
.checkbox-field__input {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: 0;
  opacity: 0;
}
.checkbox-field__box {
  flex: none;
  width: 20px;
  height: 20px;
  border-radius: 6px;
  background: #ffffff center / 16px 16px no-repeat;
  box-shadow: inset 0 0 0 1.2px var(--cookie-brand-check);
}
.checkbox-field__input:checked + .checkbox-field__box {
  background-color: var(--cookie-brand-check);
  background-image: url(/local/templates/manifest/cookie-consent/assets/check.svg);
  box-shadow: none;
}
.checkbox-field__input:disabled + .checkbox-field__box {
  background-color: var(--cookie-disabled-bg);
  box-shadow: inset 0 0 0 1px var(--cookie-disabled-line);
}
.checkbox-field__input:disabled:checked + .checkbox-field__box {
  background-image: url(/local/templates/manifest/cookie-consent/assets/check-disabled.svg);
}
.checkbox-field__input:focus-visible + .checkbox-field__box {
  outline: 2px solid var(--cookie-brand-check);
  outline-offset: 2px;
}
.checkbox-field__label {
  flex: 1;
  color: var(--cookie-ink);
  font-size: var(--checkbox-label-size);
  line-height: var(--checkbox-label-lh);
}
.checkbox-field__desc {
  display: block;
  align-self: stretch;
  padding-left: 32px;
  color: var(--cookie-muted);
  font-size: var(--checkbox-desc-size);
  line-height: var(--checkbox-desc-lh);
}
.checkbox-field:has(.checkbox-field__input:disabled) { cursor: default; }
.checkbox-field:has(.checkbox-field__input:disabled) .checkbox-field__desc { opacity: 0.5; }

/* ---------------- Cookie Banner ---------------- */
.cookie-banner {
  display: flex;
  flex-direction: column;
  width: 100%;
  background: rgba(255, 255, 255, 0.8);
  border: 1px solid var(--cookie-line);
  font-family: var(--cookie-font);
}
.cookie-banner__main {
  display: flex;
  align-items: flex-start;
  gap: 24px;
  padding: 20px 40px;
}
.cookie-banner__text {
  flex: 1 1 0;
  min-width: 0;
  color: var(--cookie-copy);
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
}
.cookie-banner__text a { color: inherit; text-decoration: underline; }
.cookie-banner__text a:hover { color: var(--cookie-ink-ghost); }
.cookie-banner__copy--short { display: none; }

.cookie-banner__actions {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 12px;
}
.cookie-banner__actions .cookie-button { flex: 1 1 0; min-width: 0; }
.cookie-banner__actions .cookie-button[data-state="ghost"] { flex: none; width: 141.16px; }

.cookie-banner__settings {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  column-gap: 10px;
  row-gap: 20px;
  padding: 0 40px 20px;
}
.cookie-banner__variants {
  grid-column: 1 / -1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 15px;
}
.cookie-banner__variants .checkbox-field { align-self: stretch; width: auto; }
.cookie-banner__save { justify-self: start; }

/* Breakpoint=Tablet */
@container cookie-banner (max-width: 1199px) {
  .cookie-banner__main {
    flex-direction: column;
    gap: 20px;
    padding: 24px 32px;
  }
  .cookie-banner__text { flex: none; align-self: stretch; }
  .cookie-banner__copy--full { display: none; }
  .cookie-banner__copy--short { display: inline; }
  .cookie-banner__actions {
    flex: none;
    align-self: stretch;
    justify-content: flex-end;
    align-items: flex-start;
  }
  .cookie-banner__actions .cookie-button[data-state="ghost"] { width: 225px; }
  .cookie-banner__settings { row-gap: 30px; }
  .cookie-banner__save { grid-column: 1 / -1; justify-self: stretch; }
}

/* Breakpoint=Mobile */
@container cookie-banner (max-width: 767px) {
  .cookie-banner__main { padding: 20px; }
  .cookie-banner__actions {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
  }
  .cookie-banner__actions .cookie-button,
  .cookie-banner__actions .cookie-button[data-state="ghost"] { flex: none; width: auto; }
  .cookie-banner__actions [data-state="primary"]   { order: 1; }
  .cookie-banner__actions [data-state="secondary"] { order: 2; }
  .cookie-banner__actions [data-state="ghost"]     { order: 3; }
  .cookie-banner__settings { padding: 0 20px 20px; }
  .cookie-banner .checkbox-field {
    --checkbox-label-size: 14px;
    --checkbox-label-lh: 17px;
    --checkbox-desc-size: 12px;
    --checkbox-desc-lh: 17px;
    --checkbox-rows-gap: 2px;
  }
}

/* ---------------- подвал: реквизиты и «Настройки cookie» ---------------- */
.footer-cookie-settings {
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  color: inherit;
  text-decoration: underline;
  cursor: pointer;
}
.footer-cookie-settings:hover { color: #4d53c6; }

.footer-requisites {
  width: 100%;
  padding-top: 20px;
  border-top: 1px solid #e6e6e6;
  font-family: 'Montserrat', sans-serif;
  font-weight: 500;
  font-size: 16px;
  line-height: 24px;
  color: #6c6c6c;
}
.footer-requisites p { margin: 0; }
@media (max-width: 767px) {
  .footer-requisites { font-size: 12px; line-height: 17px; padding-top: 16px; }
}