/* ============================================================
   Cookiebar — Wietzadenshop
   Zelfstandige consent-module met eigen .cc-* knoppen (los van de
   theme-knoppen), maar wel in de huisstijl van het ontwerp: donkere kaart,
   Archivo in hoofdletters, groen als actiekleur.

   Verschijnt pas nadat de 18+ check is weggeklikt — zie assets/js/cookiebar.js.
   ============================================================ */

.cookiebar {
  position:         fixed;
  left:             0;
  right:            0;
  bottom:           0;
  z-index:          330;
  background-color: var(--color-card);
  color:            var(--color-text);
  border-top:       1px solid var(--color-line-strong);
  box-shadow:       0 -20px 50px -30px rgba(0, 0, 0, 0.7);
  font-family:      var(--font-body);
}

.cookiebar[hidden] {
  display: none;
}

.cookiebar__inner {
  max-width:   var(--container-max);
  margin:      0 auto;
  padding:     var(--space-5) var(--gutter);
  display:     flex;
  align-items: center;
  gap:         var(--space-6);
  flex-wrap:   wrap;
}

.cookiebar__text {
  flex: 1 1 340px;
}

.cookiebar__title {
  margin-bottom:  var(--space-2);
  font-family:    var(--font-heading);
  font-weight:    var(--font-bold);
  font-size:      var(--text-base);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color:          var(--color-text);
}

.cookiebar__text p {
  font-size:   var(--text-sm);
  line-height: var(--leading-normal);
  color:       var(--color-text-muted);
}

.cookiebar__text a {
  color:                var(--color-primary);
  text-decoration:      underline;
  text-underline-offset: 2px;
}

.cookiebar__text a:hover {
  color: var(--color-primary-hover);
}

.cookiebar__actions {
  display:     flex;
  gap:         10px;
  flex-wrap:   wrap;
  align-items: center;
}

/* ----------------------------------------
   Knoppen — zelfstandig, maar zelfde vorm als .btn
   ---------------------------------------- */

.cc-btn {
  display:         inline-flex;
  align-items:     center;
  justify-content: center;
  height:          44px;
  padding:         0 20px;
  font-family:     var(--font-heading);
  font-weight:     var(--font-bold);
  font-size:       11.5px;
  letter-spacing:  var(--tracking-wide);
  text-transform:  uppercase;
  background:      transparent;
  border:          1.5px solid transparent;
  border-radius:   var(--radius-sm);
  cursor:          pointer;
  transition:      background-color var(--transition-fast),
                   color var(--transition-fast),
                   border-color var(--transition-fast),
                   transform var(--transition-fast);
}

.cc-btn--primary {
  background-color: var(--color-primary);
  color:            var(--color-on-primary);
  border-color:     var(--color-primary);
}

.cc-btn--primary:hover {
  background-color: var(--color-primary-hover);
  border-color:     var(--color-primary-hover);
  transform:        translateY(-2px);
}

.cc-btn--ghost {
  color:        var(--color-text);
  border-color: var(--color-line-strong);
}

.cc-btn--ghost:hover {
  border-color: var(--color-text);
}

/* ----------------------------------------
   Voorkeuren-paneel
   ---------------------------------------- */

.cookiebar__prefs {
  max-width:  var(--container-max);
  margin:     0 auto;
  padding:    var(--space-4) var(--gutter) var(--space-6);
  border-top: 1px solid var(--color-line);
  display:    grid;
  gap:        var(--space-3);
}

.cookiebar__prefs[hidden] {
  display: none;
}

.cookiebar__cat {
  display:               grid;
  grid-template-columns: auto 1fr;
  gap:                   12px;
  align-items:           start;
  font-size:             var(--text-sm);
  line-height:           var(--leading-normal);
  color:                 var(--color-text-muted);
}

.cookiebar__cat input {
  width:        18px;
  height:       18px;
  margin-top:   0.25em;
  accent-color: var(--color-primary);
}

.cookiebar__cat strong {
  color:       var(--color-text);
  font-family: var(--font-heading);
  font-weight: var(--font-semibold);
}

.cookiebar__prefs-actions {
  justify-self: start;
}

@media (max-width: 640px) {

  .cookiebar__inner {
    flex-direction: column;
    align-items:    stretch;
    gap:            var(--space-4);
  }

  /* In kolom-layout wordt flex-basis een HOOGTE — resetten, anders rekt de
     tekst verticaal uit en ontstaat er een gat eronder. */
  .cookiebar__text {
    flex: 0 1 auto;
  }

  .cookiebar__actions .cc-btn {
    flex: 1 1 auto;
  }
}

/* ============================================================
   Geblokkeerde embed (bijv. Google Maps) — placeholder tot consent
   ============================================================ */

.cc-embed {
  position:   relative;
  height:     100%;
  min-height: 200px;
}

.cc-embed__placeholder {
  height:          100%;
  min-height:      200px;
  display:         flex;
  flex-direction:  column;
  align-items:     center;
  justify-content: center;
  gap:             14px;
  padding:         24px;
  text-align:      center;
  background-color: var(--color-bg-alt);
  color:            var(--color-text);
  border:           1px solid var(--color-line);
  border-radius:    var(--radius-card);
}

.cc-embed__placeholder p {
  max-width: 34ch;
  font-size: var(--text-sm);
  color:     var(--color-text-muted);
}

.cc-embed__frame,
.cc-embed__frame iframe {
  display: block;
  width:   100%;
  height:  100%;
  border:  0;
}