/* ============================================================
   GREEN LABEL SERVICES — COOKIE CONSENT
   cookie-consent.css
   ============================================================ */

/* ─── BANNER ──────────────────────────────────────────────── */
.cookie-banner {
  position:   fixed;
  bottom:     0;
  left:       0;
  right:      0;
  z-index:    1100;
  background: var(--color-dark);
  border-top: 2px solid rgba(23, 199, 20, 0.3);
  box-shadow: 0 -4px 32px rgba(0, 0, 0, 0.35);

  /* Slide-up entry */
  transform:  translateY(100%);
  opacity:    0;
  transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1),
              opacity   0.4s ease;
}

.cookie-banner.is-visible {
  transform: translateY(0);
  opacity:   1;
}

.cookie-banner.is-hidden {
  transform: translateY(100%);
  opacity:   0;
}

@media (prefers-reduced-motion: reduce) {
  .cookie-banner {
    transition: none;
  }
}

.cookie-banner__inner {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  gap:             1.5rem;
  padding-top:     1.125rem;
  padding-bottom:  1.125rem;
}

.cookie-banner__text {
  display:     flex;
  align-items: center;
  gap:         0.875rem;
  flex:        1;
  min-width:   0;
}

.cookie-banner__text i {
  font-size:   1.5rem;
  color:       var(--color-primary);
  flex-shrink: 0;
}

.cookie-banner__text p {
  font-size:   0.875rem;
  color:       rgba(255, 255, 255, 0.75);
  line-height: 1.5;
  margin:      0;
}

.cookie-banner__text a {
  color:           var(--color-primary);
  font-weight:     600;
  text-decoration: underline;
  text-underline-offset: 2px;
  transition:      opacity var(--ease-fast);
}

.cookie-banner__text a:hover {
  opacity: 0.8;
}

.cookie-banner__actions {
  display:     flex;
  align-items: center;
  gap:         0.625rem;
  flex-shrink: 0;
}

/* Small button modifier for compact banner */
.btn--sm {
  padding:    0.5rem 1rem;
  font-size:  0.78rem;
  min-height: 38px;
}

/* Outline variant on dark bg — white border */
.cookie-banner .btn-outline {
  color:        rgba(255, 255, 255, 0.75);
  border-color: rgba(255, 255, 255, 0.25);
}

.cookie-banner .btn-outline:hover,
.cookie-banner .btn-outline:focus-visible {
  background:   rgba(255, 255, 255, 0.1);
  color:        var(--color-white);
  border-color: rgba(255, 255, 255, 0.5);
  transform:    none;
}


/* ─── PREFERENCES MODAL ────────────────────────────────────── */
.cookie-modal {
  position:  fixed;
  inset:     0;
  z-index:   1200;
  display:   flex;
  align-items: center;
  justify-content: center;
  padding:   1rem;
}

/* Backdrop */
.cookie-modal__backdrop {
  position:   absolute;
  inset:      0;
  background: rgba(0, 0, 0, 0.65);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  transition: opacity 0.3s ease;
}

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

/* Panel */
.cookie-modal__panel {
  position:      relative;
  z-index:       1;
  background:    var(--color-white);
  border-radius: var(--radius-lg);
  box-shadow:    0 24px 64px rgba(0, 0, 0, 0.25);
  width:         100%;
  max-width:     520px;
  max-height:    90vh;
  overflow:      hidden;
  display:       flex;
  flex-direction: column;

  /* Slide-up animation */
  transform:  translateY(24px);
  opacity:    0;
  transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1),
              opacity   0.35s ease;
}

.cookie-modal.is-open .cookie-modal__panel {
  transform: translateY(0);
  opacity:   1;
}

@media (prefers-reduced-motion: reduce) {
  .cookie-modal__panel {
    transition: none;
  }
}

/* Header */
.cookie-modal__header {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  padding:         1.25rem 1.5rem;
  border-bottom:   1px solid var(--color-border);
  flex-shrink:     0;
}

.cookie-modal__header h2 {
  font-size:   1.125rem;
  font-weight: 700;
  color:       var(--color-text);
  margin:      0;
}

.cookie-modal__close {
  display:         flex;
  align-items:     center;
  justify-content: center;
  width:           36px;
  height:          36px;
  border-radius:   var(--radius-sm);
  color:           var(--color-text-muted);
  transition:      background var(--ease-fast), color var(--ease-fast);
  flex-shrink:     0;
}

.cookie-modal__close:hover,
.cookie-modal__close:focus-visible {
  background: var(--color-border);
  color:      var(--color-text);
}

.cookie-modal__close i {
  font-size: 1rem;
}

/* Body */
.cookie-modal__body {
  padding:    1.25rem 1.5rem;
  overflow-y: auto;
  flex:       1;
  display:    flex;
  flex-direction: column;
  gap:        1rem;
}

/* Cookie category row */
.cookie-category {
  display:       flex;
  align-items:   flex-start;
  justify-content: space-between;
  gap:           1rem;
  padding:       1rem;
  border:        1px solid var(--color-border);
  border-radius: var(--radius-md);
  background:    #fafafa;
  transition:    border-color var(--ease-fast);
}

.cookie-category:has(.cookie-toggle:checked) {
  border-color: rgba(23, 199, 20, 0.35);
  background:   rgba(23, 199, 20, 0.04);
}

.cookie-category__info {
  flex: 1;
  min-width: 0;
}

.cookie-category__name {
  font-weight:  600;
  font-size:    0.9rem;
  color:        var(--color-text);
  display:      flex;
  align-items:  center;
  gap:          0.5rem;
  margin-bottom: 0.25rem;
}

.cookie-category__name i {
  font-size:  0.8rem;
  color:      var(--color-primary);
}

.cookie-badge {
  font-size:      0.65rem;
  font-weight:    700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  background:     var(--color-primary);
  color:          var(--color-white);
  padding:        0.15rem 0.45rem;
  border-radius:  var(--radius-pill);
}

.cookie-category__desc {
  font-size:   0.8rem;
  color:       var(--color-text-muted);
  line-height: 1.5;
}

/* Custom toggle switch */
.cookie-toggle-wrap {
  flex-shrink: 0;
  padding-top: 0.125rem;
}

.cookie-toggle {
  appearance:  none;
  -webkit-appearance: none;
  position:    relative;
  width:       44px;
  height:      24px;
  background:  #d1d5db;
  border-radius: var(--radius-pill);
  cursor:      pointer;
  transition:  background 0.25s ease;
  flex-shrink: 0;
}

.cookie-toggle::before {
  content:    '';
  position:   absolute;
  top:        3px;
  left:       3px;
  width:      18px;
  height:     18px;
  background: var(--color-white);
  border-radius: 50%;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
  transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.cookie-toggle:checked {
  background: var(--color-primary);
}

.cookie-toggle:checked::before {
  transform: translateX(20px);
}

.cookie-toggle:disabled {
  opacity: 0.5;
  cursor:  not-allowed;
}

.cookie-toggle:focus-visible {
  outline:        2px solid var(--color-primary);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  .cookie-toggle,
  .cookie-toggle::before {
    transition: none;
  }
}

/* Footer */
.cookie-modal__footer {
  padding:      1rem 1.5rem;
  border-top:   1px solid var(--color-border);
  flex-shrink:  0;
  display:      flex;
  justify-content: flex-end;
}

.cookie-modal__footer .btn {
  min-width: 160px;
}


/* ─── FLOATING SETTINGS BUTTON ─────────────────────────────── */
.cookie-settings-btn {
  position:        fixed;
  bottom:          1.25rem;
  right:           1.25rem;
  z-index:         1050;
  width:           44px;
  height:          44px;
  border-radius:   50%;
  background:      var(--color-dark);
  color:           rgba(255, 255, 255, 0.7);
  border:          1px solid rgba(255, 255, 255, 0.12);
  display:         flex;
  align-items:     center;
  justify-content: center;
  box-shadow:      0 4px 16px rgba(0, 0, 0, 0.3);
  transition:      background var(--ease), color var(--ease),
                   transform var(--ease), box-shadow var(--ease);
  cursor:          pointer;
  font-size:       1rem;

  /* Hidden until consent is given */
  opacity:         0;
  pointer-events:  none;
  transform:       scale(0.85);
}

.cookie-settings-btn.is-visible {
  opacity:        1;
  pointer-events: auto;
  transform:      scale(1);
}

.cookie-settings-btn:hover,
.cookie-settings-btn:focus-visible {
  background:   var(--color-primary);
  color:        var(--color-white);
  border-color: var(--color-primary);
  transform:    scale(1.08);
  box-shadow:   0 6px 20px rgba(23, 199, 20, 0.35);
}

@media (prefers-reduced-motion: reduce) {
  .cookie-settings-btn {
    transition: none;
  }
}


/* ─── RESPONSIVE ────────────────────────────────────────────── */
@media (max-width: 768px) {
  .cookie-banner__inner {
    flex-direction: column;
    align-items:    flex-start;
    gap:            1rem;
  }

  .cookie-banner__text {
    align-items: flex-start;
  }

  .cookie-banner__actions {
    width:           100%;
    justify-content: flex-end;
  }
}

@media (max-width: 480px) {
  .cookie-banner__actions {
    flex-direction: column;
    align-items:    stretch;
  }

  .cookie-banner__actions .btn {
    width:           100%;
    justify-content: center;
  }

  .cookie-modal__panel {
    max-height:    100dvh;
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    margin-bottom: 0;
    align-self:    flex-end;
    width:         100%;
  }

  .cookie-modal {
    align-items: flex-end;
    padding:     0;
  }
}