/* ═══════════════════════════════════════════════════
   AUGC Cookie Consent — Styles
   ═══════════════════════════════════════════════════ */

:root {
  --cc-primary:    #276289;
  --cc-primary-h:  #1e4e6d;
  --cc-accent:     #3a8bc2;
  --cc-bg:         #ffffff;
  --cc-bg-alt:     #f4f7fa;
  --cc-text:       #1e293b;
  --cc-text-sec:   #64748b;
  --cc-border:     #e2e8f0;
  --cc-reject-bg:  #f1f5f9;
  --cc-reject-h:   #e2e8f0;
  --cc-success:    #16a34a;
  --cc-radius:     12px;
  --cc-radius-sm:  8px;
  --cc-shadow:     0 -4px 32px rgba(0,0,0,.12);
  --cc-z-banner:   99998;
  --cc-z-modal:    99999;
  --cc-z-btn:      99997;
  --cc-transition: .3s cubic-bezier(.4,0,.2,1);
}

/* ─── Banner ─── */
.cc-banner {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  z-index: var(--cc-z-banner);
  background: var(--cc-bg);
  box-shadow: var(--cc-shadow);
  border-top: 3px solid var(--cc-primary);
  padding: 1.25rem 1.5rem;
  transform: translateY(100%);
  opacity: 0;
  visibility: hidden;
  transition: transform var(--cc-transition), opacity var(--cc-transition), visibility 0s .3s;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size: .9rem;
  color: var(--cc-text);
  line-height: 1.5;
}
.cc-banner.cc-visible {
  transform: translateY(0);
  opacity: 1;
  visibility: visible;
  transition: transform var(--cc-transition), opacity var(--cc-transition), visibility 0s 0s;
}

.cc-banner__inner {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem;
}

.cc-banner__text {
  flex: 1 1 400px;
  min-width: 0;
}
.cc-banner__text p {
  margin: 0;
}
.cc-banner__text a {
  color: var(--cc-primary);
  text-decoration: underline;
}

.cc-banner__actions {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  flex-shrink: 0;
}

/* ─── Buttons ─── */
.cc-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: .6rem 1.25rem;
  border-radius: var(--cc-radius-sm);
  font-size: .85rem;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
  border: none;
  transition: background .2s, box-shadow .2s, transform .1s;
  white-space: nowrap;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
.cc-btn:active { transform: scale(.97); }

.cc-btn--primary {
  background: var(--cc-primary);
  color: #fff;
}
.cc-btn--primary:hover { background: var(--cc-primary-h); }

.cc-btn--secondary {
  background: var(--cc-reject-bg);
  color: var(--cc-text);
}
.cc-btn--secondary:hover { background: var(--cc-reject-h); }

.cc-btn--link {
  background: none;
  color: var(--cc-primary);
  padding: .6rem .75rem;
  text-decoration: underline;
}
.cc-btn--link:hover { color: var(--cc-primary-h); }

/* ─── Overlay + Modal ─── */
.cc-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: var(--cc-z-modal);
  background: rgba(0,0,0,.45);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--cc-transition), visibility 0s .3s;
  -webkit-overflow-scrolling: touch;
}
.cc-modal-overlay.cc-visible {
  opacity: 1;
  visibility: visible;
  transition: opacity var(--cc-transition), visibility 0s 0s;
}

.cc-modal {
  background: var(--cc-bg);
  border-radius: var(--cc-radius);
  width: 100%;
  max-width: 640px;
  max-height: 85vh;
  max-height: 85dvh;          /* better for mobile WebViews */
  display: flex;
  flex-direction: column;
  box-shadow: 0 20px 60px rgba(0,0,0,.2);
  transform: translateY(24px);
  transition: transform var(--cc-transition);
  overflow: hidden;
}
.cc-modal-overlay.cc-visible .cc-modal {
  transform: translateY(0);
}

/* Header */
.cc-modal__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.25rem 1.5rem;
  border-bottom: 1px solid var(--cc-border);
  flex-shrink: 0;
}
.cc-modal__title {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--cc-text);
  margin: 0;
}
.cc-modal__close {
  background: none;
  border: none;
  font-size: 1.5rem;
  line-height: 1;
  color: var(--cc-text-sec);
  cursor: pointer;
  padding: .25rem;
  border-radius: 4px;
  transition: background .15s;
}
.cc-modal__close:hover { background: var(--cc-bg-alt); }

/* Body (scrollable) */
.cc-modal__body {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 1.25rem 1.5rem;
  -webkit-overflow-scrolling: touch;
}
.cc-modal__intro {
  font-size: .875rem;
  color: var(--cc-text-sec);
  margin: 0 0 1rem 0;
  line-height: 1.5;
}

/* Accordion category */
.cc-category {
  border: 1px solid var(--cc-border);
  border-radius: var(--cc-radius-sm);
  margin-bottom: .75rem;
  overflow: hidden;
}

.cc-category__header {
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: .85rem 1rem;
  background: var(--cc-bg-alt);
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
}
.cc-category__header:hover { background: #eaf0f6; }

.cc-category__icon {
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--cc-primary);
  flex-shrink: 0;
}
.cc-category__name {
  flex: 1;
  font-weight: 600;
  font-size: .9rem;
  color: var(--cc-text);
}
.cc-category__badge {
  font-size: .7rem;
  padding: .15rem .45rem;
  border-radius: 9999px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .04em;
}
.cc-category__badge--always {
  background: #dcfce7;
  color: #15803d;
}
.cc-category__badge--optional {
  background: #e0ecf5;
  color: var(--cc-primary);
}

/* Toggle switch */
.cc-toggle {
  position: relative;
  width: 44px;
  height: 24px;
  flex-shrink: 0;
}
.cc-toggle input {
  opacity: 0;
  width: 0;
  height: 0;
  position: absolute;
}
.cc-toggle__track {
  position: absolute;
  inset: 0;
  background: #cbd5e1;
  border-radius: 12px;
  cursor: pointer;
  transition: background .25s;
}
.cc-toggle input:checked + .cc-toggle__track {
  background: var(--cc-success);
}
.cc-toggle__track::after {
  content: '';
  position: absolute;
  top: 2px; left: 2px;
  width: 20px; height: 20px;
  background: #fff;
  border-radius: 50%;
  transition: transform .25s;
  box-shadow: 0 1px 3px rgba(0,0,0,.2);
}
.cc-toggle input:checked + .cc-toggle__track::after {
  transform: translateX(20px);
}
.cc-toggle input:disabled + .cc-toggle__track {
  opacity: .6;
  cursor: not-allowed;
}

/* Accordion body */
.cc-category__body {
  max-height: 0;
  overflow: hidden;
  transition: max-height .3s ease;
}
.cc-category__body.cc-open {
  max-height: 500px;
}
.cc-category__desc {
  padding: .75rem 1rem;
  font-size: .82rem;
  color: var(--cc-text-sec);
  line-height: 1.55;
  border-top: 1px solid var(--cc-border);
}
.cc-category__desc strong {
  color: var(--cc-text);
  display: block;
  margin-bottom: .25rem;
}

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

/* ─── Floating settings button ─── */
.cc-settings-btn {
  position: fixed;
  bottom: 1rem;
  left: 1rem;
  z-index: var(--cc-z-btn);
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--cc-primary);
  color: #fff;
  border: none;
  cursor: pointer;
  box-shadow: 0 2px 12px rgba(0,0,0,.25);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  opacity: 0;
  visibility: hidden;
  transform: scale(.7);
  transition: opacity .25s, transform .25s, visibility 0s .25s, background .15s;
  -webkit-tap-highlight-color: transparent;
}
.cc-settings-btn.cc-visible {
  opacity: 1;
  visibility: visible;
  transform: scale(1);
  transition: opacity .25s, transform .25s, visibility 0s 0s, background .15s;
}
.cc-settings-btn:hover {
  background: var(--cc-primary-h);
  transform: scale(1.08);
}

/* ─── Responsive ─── */
@media (max-width: 640px) {
  .cc-banner {
    padding: 1rem;
  }
  .cc-banner__inner {
    flex-direction: column;
    align-items: stretch;
  }
  .cc-banner__actions {
    flex-direction: column;
  }
  .cc-btn {
    width: 100%;
    padding: .75rem 1rem;
    font-size: .9rem;
  }
  .cc-modal {
    max-height: 90vh;
    max-height: 90dvh;
    border-radius: var(--cc-radius) var(--cc-radius) 0 0;
    align-self: flex-end;
  }
  .cc-modal-overlay {
    align-items: flex-end;
    padding: 0;
  }
  .cc-modal__body {
    padding: 1rem;
  }
  .cc-modal__footer {
    flex-direction: column;
  }
}

/* safe area insets for iOS WebView / notch devices */
@supports (padding-bottom: env(safe-area-inset-bottom)) {
  .cc-banner {
    padding-bottom: calc(1.25rem + env(safe-area-inset-bottom));
  }
  .cc-settings-btn {
    bottom: calc(1rem + env(safe-area-inset-bottom));
  }
  .cc-modal__footer {
    padding-bottom: calc(1rem + env(safe-area-inset-bottom));
  }
}