/* ═══════════════════════════════════════════
   Orejime — Getup Agency Dark Theme
   Midnight Emerald design system
   ═══════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital@1&display=swap');

.orejime-Env {
  --orejime-color-background: #101820;
  --orejime-color-text: #f0f4f3;
  --orejime-color-interactive: #10b981;
  --orejime-color-on-interactive: #0a0f14;
  --orejime-color-subdued: #7e9189;
  --orejime-color-shadow: 0, 0, 0;
  --orejime-color-backdrop: rgba(6, 11, 16, 0.8);
  --orejime-font-family: var(--font-inter), 'Inter', -apple-system, sans-serif;
  --orejime-radius: 16px;
  --orejime-space-m: 1.25em;
  --orejime-font-size-small: 0.8rem;
}

/* ── Banner (bottom-right card) ── */

.orejime-Banner {
  padding: 1.25rem;
  z-index: 9999;
}

.orejime-Banner-body {
  background: rgba(16, 24, 32, 0.88);
  backdrop-filter: blur(24px) saturate(1.4);
  -webkit-backdrop-filter: blur(24px) saturate(1.4);
  border: 1px solid rgba(240, 244, 243, 0.06);
  border-radius: 16px;
  box-shadow:
    0 8px 40px rgba(0, 0, 0, 0.35),
    0 0 0 1px rgba(16, 185, 129, 0.04);
  padding: 1.5rem;
  max-width: 420px;
}

/* ── GIF logo ── */

.orejime-Banner-logoContainer {
  margin-bottom: 0.75rem;
}

.orejime-Banner-logo {
  max-width: 37ch;
  height: auto;
  object-fit: contain;
  border-radius: 12px;
}

/* ── Title "Cookies maison" ── */

.orejime-Banner-title {
  font-family: 'Playfair Display', serif;
  font-style: italic;
  font-weight: 400;
  font-size: 1.35rem;
  letter-spacing: -0.01em;
  color: #f0f4f3;
  margin-bottom: 0.6em;
  line-height: 1.3;
}

.orejime-Banner-description {
  font-size: 0.85rem;
  line-height: 1.6;
  color: #a3b3ad;
}

.orejime-Banner-purposes {
  color: #7e9189;
  font-style: normal;
  font-size: 0.8rem;
}

.orejime-Banner-actions {
  margin-top: 1rem;
  gap: 0.5rem;
}

/* ── Links (fix white border on privacy policy link) ── */

.orejime-Env a,
.orejime-Banner-privacyPolicyLink {
  color: #34d399;
  text-decoration: none;
  border: none !important;
  outline: none;
  box-shadow: none;
  background: none;
  transition: color 200ms ease;
}

.orejime-Env a:hover,
.orejime-Banner-privacyPolicyLink:hover {
  color: #10b981;
  text-decoration: underline;
}

/* ══════════════════════════════════════════
   BUTTONS — using specific Orejime classes
   Structure: <li.actionItem> → <button.orejime-Button>
   Classes: --save (accept), --decline, --info (configure)
   ══════════════════════════════════════════ */

/* Base reset for all buttons */
.orejime-Banner .orejime-Button {
  border-radius: 9999px;
  font-weight: 500;
  font-size: 0.82rem;
  padding: 0.55em 1.4em;
  letter-spacing: 0.01em;
  transition: all 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
  cursor: pointer;
}

/* ── Accept button — prominent emerald ── */
.orejime-Banner-saveButton {
  background: #10b981 !important;
  color: #0a0f14 !important;
  font-weight: 700 !important;
  padding: 0.65em 1.8em !important;
  font-size: 0.88rem !important;
  border: none !important;
}

.orejime-Banner-saveButton:not([disabled]):hover,
.orejime-Banner-saveButton:not([disabled]):focus {
  background: #34d399 !important;
  outline: 2px solid rgba(16, 185, 129, 0.4);
  outline-offset: 2px;
}

/* ── Decline + Configure — ctaSecondary style ── */
.orejime-Banner-declineButton,
.orejime-Banner-learnMoreButton {
  background: transparent !important;
  color: #a3b3ad !important;
  border: 1px solid rgba(240, 244, 243, 0.1) !important;
  padding: 0.55em 1.4em !important;
  font-weight: 500 !important;
  font-size: 0.82rem !important;
}

.orejime-Banner-declineButton:not([disabled]):hover,
.orejime-Banner-declineButton:not([disabled]):focus,
.orejime-Banner-learnMoreButton:not([disabled]):hover,
.orejime-Banner-learnMoreButton:not([disabled]):focus {
  border-color: rgba(16, 185, 129, 0.4) !important;
  color: #34d399 !important;
  background: rgba(16, 185, 129, 0.06) !important;
  outline: none;
}

/* ── Modal (Personnaliser) ── */

.orejime-ModalOverlay {
  z-index: 10000;
  background: rgba(6, 11, 16, 0.8);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

.orejime-ModalWrapper {
  border-radius: 20px;
  border: 1px solid rgba(240, 244, 243, 0.06);
  box-shadow:
    0 24px 80px rgba(0, 0, 0, 0.5),
    0 0 0 1px rgba(16, 185, 129, 0.05);
  overflow: hidden;
}

.orejime-Modal {
  background: #101820;
  color: #f0f4f3;
  padding: 2rem;
  max-width: 580px;
}

.orejime-Modal-title {
  font-weight: 800;
  font-size: 1.5rem;
  letter-spacing: -0.025em;
  color: #f0f4f3;
  line-height: 1.15;
  margin-bottom: 0.75rem;
}

.orejime-Modal-description {
  font-size: 0.88rem;
  line-height: 1.65;
  color: #a3b3ad;
}

.orejime-Modal-closeButton {
  color: #5e726b;
  padding: 0.75rem;
  border-radius: 8px;
  transition: all 200ms ease;
}

.orejime-Modal-closeButton:hover {
  color: #f0f4f3;
  background: rgba(240, 244, 243, 0.05);
}

/* ── Purpose toggles ── */

.orejime-PurposeToggles {
  margin-top: 0.5rem;
  margin-bottom: 1.5rem;
}

.orejime-Purpose {
  margin-top: 0.75rem;
  padding: 1rem 1.25rem;
  background: rgba(240, 244, 243, 0.02);
  border: 1px solid rgba(240, 244, 243, 0.05);
  border-radius: 12px;
  transition: border-color 200ms ease;
}

.orejime-Purpose:hover {
  border-color: rgba(16, 185, 129, 0.12);
}

.orejime-Purpose-title {
  font-weight: 600;
  font-size: 0.9rem;
  color: #f0f4f3;
}

.orejime-Purpose-description {
  font-size: 0.8rem;
  line-height: 1.55;
  color: #7e9189;
  margin-top: 0.25rem;
}

.orejime-Purpose-attribute {
  color: #5e726b;
  font-size: 0.75rem;
}

/* Checkbox accent */
.orejime-Purpose-input {
  accent-color: #10b981;
  width: 1.15em;
  height: 1.15em;
  cursor: pointer;
}

.orejime-Purpose-input:disabled {
  accent-color: #3f4f49;
  cursor: not-allowed;
}

/* ── Modal footer ── */

.orejime-Modal-footer {
  padding-top: 1rem;
  border-top: 1px solid rgba(240, 244, 243, 0.05);
}

/* Modal: same button pattern — save = primary, rest = secondary */
.orejime-Modal-footer .orejime-Button--save {
  background: #10b981;
  color: #0a0f14;
  border: none;
}

.orejime-Modal-footer .orejime-Button--save:not([disabled]):hover {
  background: #34d399;
}

.orejime-Modal-footer .orejime-Button--decline,
.orejime-Modal-footer .orejime-Button--info {
  background: transparent;
  color: #a3b3ad;
  border: 1px solid rgba(240, 244, 243, 0.1);
}

.orejime-Modal-footer .orejime-Button--decline:hover,
.orejime-Modal-footer .orejime-Button--info:hover {
  border-color: rgba(16, 185, 129, 0.4);
  color: #34d399;
  background: rgba(16, 185, 129, 0.06);
}

.orejime-Modal-poweredByLink {
  color: #3f4f49;
  font-size: 0.7rem;
}

.orejime-Modal-poweredByLink:hover {
  color: #5e726b;
}

/* ══════════════════════════════════════════
   RESPONSIVE
   ══════════════════════════════════════════ */

/* ── Mobile : compact bottom bar ── */
@media (max-width: 640px) {
  .orejime-Banner {
    padding: 0.5rem;
    left: 0;
    right: 0;
  }

  .orejime-Banner-body {
    max-width: 100%;
    border-radius: 14px;
    padding: 1rem;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
  }

  /* Hide GIF on mobile */
  .orejime-Banner-logoContainer {
    display: none;
  }

  /* Compact title */
  .orejime-Banner-title {
    font-size: 1.05rem;
    margin-bottom: 0.15em;
    width: 100%;
  }

  /* Smaller description */
  .orejime-Banner-description {
    font-size: 0.78rem;
    line-height: 1.5;
  }

  /* Buttons : full width stacked */
  .orejime-Banner-actions {
    margin-top: 0.5rem;
    width: 100%;
  }

  .orejime-Banner-actions .orejime-ButtonList {
    flex-direction: column;
    gap: 0.4rem;
  }

  .orejime-Banner-saveButton {
    width: 100% !important;
    text-align: center;
    justify-content: center;
    padding: 0.6em 1em !important;
    font-size: 0.84rem !important;
  }

  .orejime-Banner-declineButton,
  .orejime-Banner-learnMoreButton {
    width: 100% !important;
    text-align: center;
    justify-content: center;
    padding: 0.5em 1em !important;
    font-size: 0.78rem !important;
  }

  /* Modal */
  .orejime-Modal {
    padding: 1.5rem;
  }

  .orejime-Modal-title {
    font-size: 1.25rem;
  }
}

/* ── Tablet ── */
@media (min-width: 641px) and (max-width: 1024px) {
  .orejime-Banner-body {
    max-width: 380px;
    padding: 1.25rem;
  }

  .orejime-Banner-logo {
    max-width: 28ch;
  }

  .orejime-Banner-title {
    font-size: 1.2rem;
  }
}