/* ==========================================================================
   Newsletter Popup — Styles
   WhatsApp-first two-step modal (desktop) / bottom slide-in (mobile)
   Uses brand tokens from brand-tokens.css
   ========================================================================== */

/* --------------------------------------------------------------------------
   Overlay
   -------------------------------------------------------------------------- */
.nl-popup {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--cc-transition), visibility var(--cc-transition);
}

.nl-popup[aria-hidden="false"] {
  opacity: 1;
  visibility: visible;
}

.nl-popup__overlay {
  position: absolute;
  inset: 0;
  background: rgba(30, 33, 40, 0.6);
  backdrop-filter: blur(2px);
  cursor: pointer;
}

/* --------------------------------------------------------------------------
   Panel
   -------------------------------------------------------------------------- */
.nl-popup__panel {
  position: relative;
  z-index: 1;
  width: 90%;
  max-width: 500px;
  background: var(--cc-bone);
  border-radius: var(--cc-radius-lg);
  box-shadow: var(--cc-shadow-xl);
  padding: var(--cc-space-6) var(--cc-space-6) var(--cc-space-5);
  text-align: center;
  transform: translateY(24px) scale(0.97);
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  max-height: 90vh;
  overflow-y: auto;
}

.nl-popup[aria-hidden="false"] .nl-popup__panel {
  transform: translateY(0) scale(1);
}

/* --------------------------------------------------------------------------
   Close button — large, easy to tap
   -------------------------------------------------------------------------- */
.nl-popup__close {
  position: absolute;
  top: var(--cc-space-3);
  right: var(--cc-space-3);
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--cc-bone-deep);
  border: none;
  border-radius: var(--cc-radius-full);
  color: var(--cc-slate-soft);
  cursor: pointer;
  transition: background var(--cc-transition-fast), color var(--cc-transition-fast);
}

.nl-popup__close:hover,
.nl-popup__close:focus-visible {
  background: var(--cc-slate);
  color: var(--cc-bone);
}

/* --------------------------------------------------------------------------
   Steps
   -------------------------------------------------------------------------- */
.nl-popup__step {
  display: none;
}

.nl-popup__step--active {
  display: block;
  animation: nlFadeIn 300ms ease-out;
}

@keyframes nlFadeIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* --------------------------------------------------------------------------
   Badge
   -------------------------------------------------------------------------- */
.nl-popup__badge {
  display: inline-block;
  padding: var(--cc-space-1) var(--cc-space-3);
  background: var(--cc-terracotta);
  color: var(--cc-bone);
  font-family: var(--cc-font-body);
  font-size: var(--cc-fs-sm);
  font-weight: var(--cc-fw-semibold);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  border-radius: var(--cc-radius-full);
  margin-bottom: var(--cc-space-2);
}

/* --------------------------------------------------------------------------
   Typography — sized up for 40–70 age group
   -------------------------------------------------------------------------- */
.nl-popup__title {
  font-family: var(--cc-font-display);
  font-size: clamp(1.4rem, 4vw, 1.75rem);
  font-weight: var(--cc-fw-semibold);
  color: var(--cc-slate);
  margin: 0 0 var(--cc-space-1);
  line-height: var(--cc-lh-tight);
}

.nl-popup__subtitle-en {
  font-family: var(--cc-font-body);
  font-size: var(--cc-fs-xs);
  color: var(--cc-slate-soft);
  margin: 0 0 var(--cc-space-2);
  font-style: italic;
}

.nl-popup__subtitle {
  font-family: var(--cc-font-body);
  font-size: var(--cc-fs-base);
  color: var(--cc-slate-soft);
  margin: 0 0 var(--cc-space-4);
  line-height: var(--cc-lh-relaxed);
}

.nl-popup__subtitle strong {
  color: var(--cc-slate);
}

.nl-popup__subtitle--small {
  font-size: var(--cc-fs-base);
  margin-top: var(--cc-space-3);
}

/* --------------------------------------------------------------------------
   Check icon (step 2)
   -------------------------------------------------------------------------- */
.nl-popup__check {
  margin-bottom: var(--cc-space-4);
}

/* --------------------------------------------------------------------------
   Form elements
   -------------------------------------------------------------------------- */
.nl-popup__form {
  display: flex;
  flex-direction: column;
  gap: var(--cc-space-2);
}

.nl-popup__input-group {
  width: 100%;
}

.nl-popup__input-icon {
  position: relative;
}

.nl-popup__input-icon svg {
  position: absolute;
  left: var(--cc-space-3);
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
}

.nl-popup__input-icon .nl-popup__input {
  padding-left: calc(var(--cc-space-3) + 20px + var(--cc-space-2));
}

.nl-popup__input {
  width: 100%;
  padding: var(--cc-space-3) var(--cc-space-4);
  font-family: var(--cc-font-body);
  font-size: var(--cc-fs-base);
  color: var(--cc-slate);
  background: #fff;
  border: var(--cc-border-width-thick) solid var(--cc-bone-deep);
  border-radius: var(--cc-radius);
  outline: none;
  transition: border-color var(--cc-transition-fast), box-shadow var(--cc-transition-fast);
  box-sizing: border-box;
}

.nl-popup__input::placeholder {
  color: var(--cc-slate-soft);
  font-size: var(--cc-fs-base);
}

.nl-popup__input:focus {
  border-color: var(--cc-terracotta);
  box-shadow: 0 0 0 3px rgba(168, 80, 48, 0.15);
}

.nl-popup__input--error {
  border-color: #c0392b;
}

/* --------------------------------------------------------------------------
   Error message
   -------------------------------------------------------------------------- */
.nl-popup__error {
  font-size: var(--cc-fs-sm);
  color: #c0392b;
  min-height: 0;
  text-align: left;
}

.nl-popup__error:empty {
  display: none;
}

/* --------------------------------------------------------------------------
   Submit button — terracotta CTA
   -------------------------------------------------------------------------- */
.nl-popup__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--cc-space-2);
  width: 100%;
  padding: var(--cc-space-3) var(--cc-space-5);
  font-family: var(--cc-font-body);
  font-size: var(--cc-fs-base);
  font-weight: var(--cc-fw-semibold);
  color: var(--cc-bone);
  background: var(--cc-terracotta);
  border: none;
  border-radius: var(--cc-radius);
  cursor: pointer;
  transition: background var(--cc-transition-fast), transform var(--cc-transition-fast);
}

.nl-popup__btn:hover,
.nl-popup__btn:focus-visible {
  background: var(--cc-terracotta-deep);
}

.nl-popup__btn:active {
  transform: scale(0.98);
}

.nl-popup__btn--done {
  margin-top: var(--cc-space-4);
}

.nl-popup__btn-loading {
  display: none;
}

.nl-popup__btn--loading .nl-popup__btn-text {
  display: none;
}

.nl-popup__btn--loading .nl-popup__btn-loading {
  display: inline-flex;
}

/* --------------------------------------------------------------------------
   Consent text
   -------------------------------------------------------------------------- */
.nl-popup__consent {
  font-size: var(--cc-fs-xs);
  color: var(--cc-slate-soft);
  margin: 0;
  line-height: var(--cc-lh-normal);
}

.nl-popup__consent a {
  color: var(--cc-slate-soft);
  text-decoration: underline;
}

/* --------------------------------------------------------------------------
   Footer links — stacked vertically
   -------------------------------------------------------------------------- */
.nl-popup__footer {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--cc-space-1);
  margin-top: var(--cc-space-3);
}

.nl-popup__channel-switch,
.nl-popup__dismiss {
  display: inline-block;
  padding: 0;
  background: none;
  border: none;
  font-family: var(--cc-font-body);
  cursor: pointer;
  text-underline-offset: 3px;
  transition: color var(--cc-transition-fast);
}

.nl-popup__channel-switch {
  font-size: var(--cc-fs-sm);
  color: var(--cc-terracotta);
  text-decoration: underline;
}

.nl-popup__channel-switch:hover {
  color: var(--cc-terracotta-deep);
}

.nl-popup__dismiss {
  font-size: var(--cc-fs-xs);
  color: var(--cc-slate-soft);
  text-decoration: none;
  opacity: 0.6;
}

.nl-popup__dismiss:hover {
  color: var(--cc-slate);
  opacity: 1;
}

/* --------------------------------------------------------------------------
   Mobile: Bottom slide-in
   -------------------------------------------------------------------------- */
@media (max-width: 640px) {
  .nl-popup {
    align-items: flex-end;
  }

  .nl-popup__panel {
    width: 100%;
    max-width: 100%;
    border-radius: var(--cc-radius-lg) var(--cc-radius-lg) 0 0;
    padding: var(--cc-space-6) var(--cc-space-5) var(--cc-space-4);
    transform: translateY(100%);
    max-height: 85vh;
  }

  .nl-popup[aria-hidden="false"] .nl-popup__panel {
    transform: translateY(0);
  }

  .nl-popup__close {
    top: var(--cc-space-2);
    right: var(--cc-space-2);
    width: 48px;
    height: 48px;
  }

  .nl-popup__title {
    font-size: var(--cc-fs-xl);
  }
}

/* --------------------------------------------------------------------------
   Reduced motion
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .nl-popup,
  .nl-popup__panel,
  .nl-popup__step--active {
    transition: none;
    animation: none;
  }
}