/* ==========================================================================
   The cookie notice - components/c-consent.tpl, js1/c-consent.js.
   Site-wide: head.tpl links it on every page, because the notice is on
   every page.

   A form card, because it IS a form - a choice the visitor submits - so it
   takes the form card's own surface: Warm Cream, the 2px gold stroke on a
   ::before, the form shadow, the 16 radius. Pinned to the bottom-left
   corner and never over a scrim: nothing behind it is withheld, and a
   modal would be a cookie wall by another name.

   THE TWO ANSWERS ARE ONE BUTTON. «Отказвам всички» and «Приемам всички»
   are both the outline button, side by side, the same size: the EDPB reads
   a refusal drawn quieter than the acceptance as steering, and steering
   voids the consent. Neither is the green fill - the page's commit action
   is whatever the page is for, and the notice is not it. The one fill here
   is «Запази избора», and only once the visitor has opened the categories
   and has something of their own to save.
   ========================================================================== */

.c-consent{
  position:fixed;
  /* over the page and the floating header pill (10); under the mobile
     drawer (19-21), which the visitor opened on purpose, and the skip
     link (30) */
  z-index:18;
  left:var(--c-page-gutter);
  bottom:calc(var(--c-page-gutter) + env(safe-area-inset-bottom));
  width:min(560px, 100% - 2 * var(--c-page-gutter));
  max-height:calc(100dvh - 2 * var(--c-page-gutter));
  overflow:auto;
  overscroll-behavior:contain;
  padding:29px var(--c-pad) 32px;
  background:var(--c-cream-warm);
  color:var(--c-ink);
  border-radius:var(--c-r-surface);
  box-shadow:var(--c-sh-form);
  animation:c-consent-in .34s cubic-bezier(.16, 1, .3, 1);
}
.c-consent[hidden]{ display:none; }

.c-consent::before{
  content:"";
  position:absolute;
  inset:0;
  border:2px solid var(--c-gold);
  border-radius:inherit;
  pointer-events:none;
}

/* The viewing request's entrance, the system's one authored arrival. */
@keyframes c-consent-in{
  from{ opacity:0; transform:translateY(12px); }
}
@media (prefers-reduced-motion: reduce){
  .c-consent{ animation:none; }
}

/* The viewing request's heading: 20px Playfair 500 on a 29 line. */
.c-consent__title{
  margin:0 0 12px;
  font:500 var(--c-fs-nav)/29px var(--c-serif);
}

.c-consent__text{
  margin:0;
  font:400 var(--c-fs-body)/var(--c-lh-body) var(--c-sans);
}
.c-consent__text a{
  color:var(--c-green);
  text-decoration:underline;
  text-underline-offset:3px;
}

/* --- the categories ---------------------------------------------------- */

.c-consent__prefs{
  display:grid;
  gap:16px;
  margin:24px 0 0;
  padding:0;
  border:0;
}
.c-consent__prefs[hidden]{ display:none; }

.c-consent__cat .c-checkbox__label{
  font:700 var(--c-fs-body)/var(--c-lh-sans) var(--c-sans);
}
/* the necessary box: on, and not the visitor's to turn off */
.c-consent__cat .c-checkbox__box:disabled{
  opacity:.55;
  cursor:not-allowed;
}
.c-consent__cat .c-checkbox:has(:disabled){ cursor:default; }

/* under the label, lined up with its text rather than with the box */
.c-consent__desc{
  margin:4px 0 0 28px;
  font:400 var(--c-fs-label)/1.35 var(--c-sans);
}

/* --- the answers ------------------------------------------------------- */

.c-consent__actions{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:12px;
  margin-top:24px;
}
.c-consent__actions .c-btn{
  flex:1 1 0;
  padding-inline:20px;
  white-space:nowrap;
}
.c-consent__actions [hidden]{ display:none; }
/* «Запази избора» takes a row of its own under the two answers, full
   width, closing the list of categories it saves. */
.c-consent__actions [data-consent="save"]{ flex-basis:100%; order:1; }

/* «Настройки» is a disclosure, not an answer: an underlined green link,
   so it cannot be read as a third choice of the answers' weight. */
.c-consent__more{
  flex-basis:100%;
  order:2;
  padding:4px 0;
  border:0;
  background:none;
  font:500 var(--c-fs-body)/var(--c-lh-sans) var(--c-sans);
  color:var(--c-green);
  text-align:left;
  text-decoration:underline;
  text-underline-offset:3px;
  cursor:pointer;
  transition:color var(--c-ease);
}
.c-consent__more:hover{ color:var(--c-ink); }

/* ==========================================================================
   393 - the card takes the column between the gutters, and the 40px sides
   become the 20 the viewing request takes at this width.
   ========================================================================== */

@media (max-width: 639px){
  .c-consent{
    padding:20px var(--c-inset) 20px;
  }
  .c-consent__text{ font-size:var(--c-fs-label); line-height:1.35; }
  .c-consent__actions{ gap:8px; margin-top:16px; }
  .c-consent__actions .c-btn{ white-space:normal; padding-inline:12px; }
}