/**
 * Съгласие за бисквитки.
 *
 * Пренесено от `components.css` на темата на vanatorescu.ro. Там стойностите
 * идват от токени; тук са изписани, защото темата още няма токени - при
 * разрязването на `style.css` се връщат на мястото си. Цветовете са на
 * sledene.com: тъмносиньото на хедъра и оранжевото на копчетата.
 */

/* Съгласието за бисквитки. */

.sld-consent {
  position: fixed;
  z-index: 150;
  left: 16px;
  right: 16px;
  bottom: 16px;
  padding: 24px;
  border-radius: 6px;
  background: #1b2838;
  color: #ffffff;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
  max-height: calc(100dvh - 100px);
  overflow-y: auto;
}

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

.sld-consent__panel {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 260px;
  gap: 24px;
  max-width: 1200px;
  margin-inline: auto;
}

.sld-consent h2 {
  margin-bottom: 12px;
  color: #ffffff;
  font-size: 18px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.sld-consent p {
  font-size: 14px;
}

.sld-consent a {
  color: #f39c4a;
}

.sld-consent__actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
  justify-content: center;
}

.sld-consent__btn {
  min-height: 46px;
  border-radius: 4px;
  background: #e67e22;
  color: #ffffff;
  font-family: inherit;
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
}

.sld-consent__btn:hover {
  background: #c2650f;
}

.sld-consent__btn--ghost {
  border: 1px solid rgba(255, 255, 255, 0.4);
  background: transparent;
}

.sld-consent__btn--ghost:hover {
  background: rgba(255, 255, 255, 0.12);
}

/*
 * Двете копчета нямат своя височина - само реда на текста си, 22 и 16 px, -
 * а WCAG 2.2 иска цел поне 24×24. Добавя се отстъп нагоре и надолу; подчертаният
 * надпис стои на същото място, защото отстъпът расте в двете посоки.
 */
.sld-consent__manage,
.sld-consent-toggle {
  border: 0;
  padding-block: 4px;
  background: none;
  color: #ffffff;
  font: inherit;
  font-size: 14px;
  text-decoration: underline;
  cursor: pointer;
}

/*
 * Във футъра копчето стои в списък с връзки и трябва да мери колкото тях: те са
 * `display: block` с `padding: 8px 0`, тоест 38 px, а копчето излизаше 22 и редът
 * му личеше като по-нисък между останалите.
 */
.sld-consent-toggle {
  display: block;
  padding-block: 8px;
}

.sld-consent__pref {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding-block: 8px;
}

/* Етикетите в зеления панел не наследяват тъмния цвят на формите. */
.sld-consent__pref {
  color: #ffffff;
}

.sld-consent {
    left: 8px;
    right: 8px;
    bottom: 68px;
    padding: 16px;
  }

.sld-consent__panel {
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
  }

/*
 * Темата оцветява всеки `p` в тъмносиво; върху тъмния фон на банера текстът
 * изчезваше. Тук цветът се връща изрично - на самите елементи, не с `!important`.
 */
.sld-consent p,
.sld-consent li,
.sld-consent label,
.sld-consent h2,
.sld-consent h3 {
	color: #ffffff;
}

.sld-consent .sld-consent__link,
.sld-consent a {
	color: #f39c4a;
}

.sld-consent .sld-consent__pref span {
	color: #cfd6de;
}