/**
 * HM Herbs — unified popup / modal / overlay branding
 * Load after component popup CSS (age-gate, customer-auth, edsa-booking, styles.css modals).
 */

:root {
  /* Backdrops */
  --hm-popup-backdrop: rgba(17, 24, 39, 0.72);
  --hm-popup-backdrop-blur: 5px;
  --hm-popup-gate-bg: radial-gradient(
    circle at 30% 15%,
    var(--brand-sidebar-from) 0%,
    var(--brand-sidebar-to) 55%,
    var(--gray-900) 100%
  );

  /* Cards */
  --hm-popup-card-bg: rgba(255, 255, 255, 0.98);
  --hm-popup-card-radius: 14px;
  --hm-popup-card-shadow:
    0 24px 48px rgba(0, 0, 0, 0.35),
    0 0 0 1px rgba(255, 255, 255, 0.12) inset;
  --hm-popup-card-max-width: 28rem;
  --hm-popup-card-padding: clamp(1.25rem, 4vw, 2rem);

  /* Typography */
  --hm-popup-title-color: var(--primary-green);
  --hm-popup-body-color: var(--gray-600);
  --hm-popup-title-font: var(--font-display, 'Playfair Display', Georgia, serif);

  /* Primary action (confirm / submit in popups) */
  --hm-popup-btn-bg: linear-gradient(180deg, var(--primary-green), var(--primary-green-dark));
  --hm-popup-btn-shadow: var(--brand-btn-shadow);
  --hm-popup-btn-radius: 10px;

  /* Safe-area padding for full-viewport overlays */
  --hm-popup-safe-pad: max(1rem, env(safe-area-inset-top, 0px))
    max(1rem, env(safe-area-inset-right, 0px))
    max(1rem, env(safe-area-inset-bottom, 0px))
    max(1rem, env(safe-area-inset-left, 0px));
}

/* ── Notification permission pre-prompt ─────────────────────────────────── */

.hm-notify-perm__title {
  font-family: var(--hm-popup-title-font);
  color: var(--hm-popup-title-color);
}

.hm-notify-perm__allow {
  background: var(--hm-popup-btn-bg);
  box-shadow: var(--hm-popup-btn-shadow);
  border-radius: var(--hm-popup-btn-radius);
}

/* ── Age gate ─────────────────────────────────────────────────────────── */

.hm-age-gate {
  background: var(--hm-popup-gate-bg);
  font-family: var(--font-primary);
}

.hm-age-gate__dialog {
  background: var(--hm-popup-card-bg);
  border-radius: var(--hm-popup-card-radius);
  padding: var(--hm-popup-card-padding);
  box-shadow: var(--hm-popup-card-shadow);
  width: min(calc(100vw - 2rem), var(--hm-popup-card-max-width));
}

.hm-age-gate__badge {
  background: linear-gradient(145deg, var(--brand-sidebar-from), var(--primary-green));
}

.hm-age-gate__title {
  font-family: var(--hm-popup-title-font);
  color: var(--gray-800);
}

.hm-age-gate__text {
  color: var(--hm-popup-body-color);
}

.hm-age-gate__confirm {
  border-radius: var(--hm-popup-btn-radius);
  background: var(--hm-popup-btn-bg);
  box-shadow: var(--hm-popup-btn-shadow);
  font-family: var(--font-primary);
}

.hm-age-gate__exit {
  color: var(--gray-500);
}

.hm-age-gate__exit:hover {
  color: var(--primary-green);
}

/* ── Shared modal card shells ─────────────────────────────────────────── */

.auth-modal-content,
.modal-content,
.gdpr-modal,
.cookie-popup-content,
.acct-modal,
.acct-modal-backdrop .acct-modal,
.wishlist-modal.acct-modal,
.edsa-modal-content,
#edsa-booking-modal .edsa-modal-content {
  border-radius: var(--hm-popup-card-radius);
  box-shadow: var(--hm-popup-card-shadow);
}

/* Modal / auth / GDPR titles — Playfair + brand green */
.auth-modal-header h2,
.modal-header h3,
.gdpr-modal-header h3,
.cookie-popup-title,
.acct-modal h3,
.edsa-modal-header h2,
#edsa-booking-modal .edsa-modal-header h2 {
  font-family: var(--hm-popup-title-font);
  color: var(--hm-popup-title-color);
}

.gdpr-modal-header h3,
.cookie-popup-title {
  font-weight: 600;
}

/* Unified dim overlays */
.auth-modal::before,
.cookie-popup-overlay,
.newsletter-popup-overlay,
.edsa-modal-overlay,
.modal,
.gdpr-modal-overlay,
.hm-wl-picker-dim,
.acct-modal-dim,
.acct-modal-backdrop::before {
  background-color: var(--hm-popup-backdrop) !important;
  backdrop-filter: blur(var(--hm-popup-backdrop-blur));
  -webkit-backdrop-filter: blur(var(--hm-popup-backdrop-blur));
}

/* Cookie consent */
.cookie-popup-content {
  border-radius: var(--hm-popup-card-radius);
}

.cookie-popup-text,
.gdpr-modal-body,
.cookie-preferences-lead {
  color: var(--hm-popup-body-color);
  line-height: 1.6;
}

.cookie-popup-actions .btn-primary,
.gdpr-modal-footer .btn-primary,
.modal-footer .btn-primary,
.ccpa-banner-actions .btn-primary {
  background: var(--hm-popup-btn-bg);
  border-color: var(--primary-green-dark);
  box-shadow: var(--hm-popup-btn-shadow);
}

/* Newsletter — keep green promo card; align radius + shadow with system */
.newsletter-popup-content {
  border-radius: var(--hm-popup-card-radius);
  box-shadow: var(--hm-popup-card-shadow);
  background: linear-gradient(
    135deg,
    var(--primary-green-dark) 0%,
    var(--primary-green) 100%
  );
}

.newsletter-popup-title {
  font-family: var(--hm-popup-title-font);
}

/* CCPA banner — already green; tighten typography */
.ccpa-banner-content h3 {
  font-family: var(--hm-popup-title-font);
}

/* Checkout loading overlay (wins over checkout.html inline styles) */
.loading-overlay {
  background: var(--hm-popup-backdrop) !important;
  backdrop-filter: blur(var(--hm-popup-backdrop-blur)) !important;
  -webkit-backdrop-filter: blur(var(--hm-popup-backdrop-blur)) !important;
}

.loading-overlay .loading-spinner {
  border-radius: var(--hm-popup-card-radius) !important;
  box-shadow: var(--hm-popup-card-shadow) !important;
  padding: var(--hm-popup-card-padding) !important;
  min-width: min(calc(100vw - 2rem), 16rem);
}

.loading-overlay .loading-spinner p {
  margin: var(--space-3) 0 0;
  color: var(--hm-popup-body-color);
  font-family: var(--font-primary);
}

/* Popup primary buttons inside overlays */
.auth-modal-body .btn-primary,
.edsa-modal-body .btn-primary,
.acct-modal-actions .btn-primary:not(.btn-danger),
.cookie-popup-actions .btn-primary {
  border-radius: var(--hm-popup-btn-radius);
}

/* ── Responsive: small phones ─────────────────────────────────────────── */

@media (max-width: 374px) {
  .hm-age-gate__dialog,
  .cookie-popup-content,
  .auth-modal-content,
  .modal-content,
  .gdpr-modal,
  .acct-modal-backdrop .acct-modal,
  .newsletter-popup-content {
    width: calc(100vw - 1.25rem);
    max-width: calc(100vw - 1.25rem);
  }

  .hm-age-gate__title,
  .cookie-popup-title,
  .newsletter-popup-title {
    font-size: var(--text-lg, 1.125rem);
  }

  .auth-modal-header h2 {
    font-size: var(--text-xl, 1.25rem);
  }
}

/* ── Responsive: phones ───────────────────────────────────────────────── */

@media (max-width: 480px) {
  .hm-age-gate__dialog {
    width: min(calc(100vw - 1.5rem), var(--hm-popup-card-max-width));
    max-height: calc(100dvh - 1.5rem);
    padding: clamp(1rem, 3.5vw, 1.5rem);
  }

  .hm-age-gate__actions {
    gap: 0.5rem;
  }

  .cookie-popup,
  .auth-modal,
  .gdpr-modal-overlay,
  .newsletter-popup {
    padding-left: max(0.75rem, env(safe-area-inset-left, 0px));
    padding-right: max(0.75rem, env(safe-area-inset-right, 0px));
  }

  .auth-modal-content,
  .modal-content,
  .gdpr-modal {
    width: calc(100% - 0.5rem);
    max-width: calc(100vw - 1.5rem);
  }

  .edsa-modal-content,
  #edsa-booking-modal .edsa-modal-content {
    width: calc(100vw - 1.5rem) !important;
    max-height: calc(100dvh - 1.5rem) !important;
  }

  .newsletter-popup-body {
    padding: var(--space-6) var(--space-4) var(--space-4);
  }
}

/* ── Responsive: tablets & small laptops ──────────────────────────────── */

@media (max-width: 768px) {
  .hm-age-gate__dialog {
    width: min(calc(100vw - 2rem), 26rem);
  }

  .cookie-popup-content--preferences {
    max-height: calc(100dvh - 2rem);
    overflow-y: auto;
  }

  .auth-modal-header,
  .modal-header,
  .gdpr-modal-header,
  .edsa-modal-header,
  #edsa-booking-modal .edsa-modal-header {
    padding: var(--space-4) var(--space-5);
  }

  .auth-modal-body,
  .modal-body,
  .gdpr-modal-body,
  .edsa-modal-body,
  #edsa-booking-modal .edsa-modal-body {
    padding: var(--space-4) var(--space-5) var(--space-5);
  }

  .ccpa-banner {
    padding: var(--space-4) max(var(--space-4), env(safe-area-inset-right, 0px))
      max(var(--space-4), env(safe-area-inset-bottom, 0px))
      max(var(--space-4), env(safe-area-inset-left, 0px));
  }
}

/* ── Responsive: medium screens ─────────────────────────────────────── */

@media (min-width: 769px) and (max-width: 1100px) {
  .newsletter-popup {
    top: calc(var(--hm-header-offset, 4.75rem) + var(--newsletter-popup-clearance, 20px));
  }

  .cookie-popup-content,
  .hm-age-gate__dialog {
    width: min(calc(100vw - 3rem), var(--hm-popup-card-max-width));
  }
}

/* ── Responsive: large screens ────────────────────────────────────────── */

@media (min-width: 1101px) {
  .hm-age-gate__dialog,
  .cookie-popup-content {
    width: min(calc(100vw - 4rem), var(--hm-popup-card-max-width));
  }

  .auth-modal-content,
  .modal-content {
    max-width: 520px;
  }

  .edsa-modal-content,
  #edsa-booking-modal .edsa-modal-content {
    max-width: min(920px, calc(100vw - 4rem)) !important;
  }
}

/* ── Landscape phones: keep dialogs vertically centered ───────────────── */

@media (max-height: 500px) and (orientation: landscape) {
  .hm-age-gate__dialog {
    max-height: calc(100dvh - 1rem);
    padding: 0.85rem 1.25rem;
  }

  .hm-age-gate__badge {
    width: 2.25rem;
    height: 2.25rem;
    margin-bottom: 0.5rem;
    font-size: 0.75rem;
  }

  .hm-age-gate__text {
    margin-bottom: 0.75rem;
    font-size: 0.875rem;
  }

  .auth-modal-content,
  .modal-content,
  .gdpr-modal {
    max-height: calc(100dvh - 1rem);
  }

  .newsletter-popup {
    align-items: center;
    padding-top: max(0.5rem, env(safe-area-inset-top, 0px));
  }
}

@media (prefers-reduced-motion: reduce) {
  .cookie-popup-content,
  .newsletter-popup-content,
  .modal-content,
  .auth-modal-content,
  .edsa-modal-content {
    transition: none;
  }
}