/* ═══════════════════════════════════════════════════════════
   Modal Newsletter — Royal Chic Lingerie
   Archivo: assets/css/newsletter-modal.css
   Depende de: royal-chic.css (variables globales)
   ═══════════════════════════════════════════════════════════ */

/* ── OVERLAY ────────────────────────────────────────────── */
.rcnl-overlay {
  position: fixed;
  inset: 0;
  background: rgba(28, 26, 23, .72);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  opacity: 0;
  transition: opacity .3s ease;
  backdrop-filter: blur(2px);
}
.rcnl-overlay.rcnl-visible {
  opacity: 1;
}
/* hidden nativo — JS quita el atributo hidden antes de animar */
.rcnl-overlay[hidden] {
  display: none;
}

/* ── MODAL ──────────────────────────────────────────────── */
.rcnl-modal {
  display: grid;
  grid-template-columns: 340px 1fr;
  max-width: 820px;
  width: 100%;
  background: var(--rc-cream);
  position: relative;
  transform: translateY(18px);
  transition: transform .35s ease;
  max-height: 90vh;
  overflow: hidden;
}
.rcnl-overlay.rcnl-visible .rcnl-modal {
  transform: translateY(0);
}

/* ── IMAGEN LATERAL ─────────────────────────────────────── */
.rcnl-image {
  position: relative;
  overflow: hidden;
  min-height: 480px;
}
.rcnl-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.rcnl-image-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgba(28, 26, 23, .65) 0%,
    rgba(28, 26, 23, .15) 50%,
    transparent 100%
  );
  pointer-events: none;
}
.rcnl-image-brand {
  position: absolute;
  bottom: 24px;
  left: 24px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.rcnl-brand-name {
  font-family: 'Playfair Display', serif;
  font-size: 22px;
  font-weight: 400;
  color: var(--rc-cream);
  line-height: 1;
  letter-spacing: .5px;
}
.rcnl-brand-sub {
  font-size: var(--rc-fs-tag);
  letter-spacing: 3.5px;
  text-transform: uppercase;
  color: var(--rc-gold-lt);
}

/* ── CONTENIDO ──────────────────────────────────────────── */
.rcnl-content {
  padding: 44px 40px 40px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: relative;
  background: var(--rc-cream);
  overflow-y: auto;
}

/* ── BOTÓN CERRAR ───────────────────────────────────────── */
.rcnl-close {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 32px;
  height: 32px;
  background: none;
  border: 1px solid var(--rc-cream-border);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: border-color .2s, background .2s;
  z-index: 2;
  padding: 0;
}
.rcnl-close:hover {
  border-color: var(--rc-ink);
  background: var(--rc-cream-dk);
}
.rcnl-close svg {
  width: 13px;
  height: 13px;
  stroke: var(--rc-ink);
  fill: none;
  stroke-width: 1.8;
  stroke-linecap: round;
}

/* ── PASOS ──────────────────────────────────────────────── */
.rcnl-step { display: flex; flex-direction: column; }
.rcnl-step[hidden] { display: none; }

/* ── TIPOGRAFÍA ─────────────────────────────────────────── */
.rcnl-eyebrow {
  font-size: var(--rc-fs-tag);
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--rc-gold);
  margin: 0 0 14px;
}
.rcnl-title {
  font-family: 'Playfair Display', serif;
  font-size: 30px;
  font-weight: 400;
  line-height: 1.15;
  color: var(--rc-ink);
  margin: 0 0 14px;
}
.rcnl-title em {
  font-style: italic;
  color: var(--rc-gold);
}
.rcnl-title--success {
  font-size: 26px;
}
.rcnl-desc {
  font-size: var(--rc-fs-reading);
  line-height: 1.85;
  color: #5c5750;
  margin: 0 0 24px;
}
.rcnl-desc strong {
  color: var(--rc-ink);
  font-weight: 500;
}

/* ── FORMULARIO ─────────────────────────────────────────── */
.rcnl-form-wrap {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.rcnl-label {
  font-size: var(--rc-fs-tag);
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--rc-muted);
}
.rcnl-input {
  width: 100%;
  padding: 13px 16px;
  border: 1px solid var(--rc-cream-border);
  background: #fff;
  font-size: var(--rc-fs-reading);
  color: var(--rc-ink);
  font-family: 'Inter', sans-serif;
  outline: none;
  transition: border-color .2s;
  box-sizing: border-box;
}
.rcnl-input:focus {
  border-color: var(--rc-gold);
}
.rcnl-input::placeholder {
  color: #b8b4aa;
}
.rcnl-input.rcnl-input--error {
  border-color: #c0392b;
}

/* Error message */
.rcnl-error {
  font-size: 11px;
  color: #c0392b;
  margin: 0;
  line-height: 1.5;
}
.rcnl-error[hidden] { display: none; }

/* ── BOTÓN ──────────────────────────────────────────────── */
.rcnl-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  padding: 15px;
  background: var(--rc-ink);
  color: var(--rc-cream);
  border: 1px solid var(--rc-ink);
  font-size: var(--rc-fs-btn);
  letter-spacing: 3px;
  text-transform: uppercase;
  font-family: 'Inter', sans-serif;
  font-weight: 500;
  cursor: pointer;
  transition: background .25s, color .25s, border-color .25s;
  margin-top: 4px;
}
.rcnl-btn:hover {
  background: var(--rc-gold);
  border-color: var(--rc-gold);
  color: #fff;
}
.rcnl-btn:disabled {
  opacity: .6;
  cursor: not-allowed;
}
.rcnl-btn--outline {
  background: transparent;
  color: var(--rc-ink);
  border-color: var(--rc-cream-border);
  margin-top: 0;
}
.rcnl-btn--outline:hover {
  background: var(--rc-ink);
  border-color: var(--rc-ink);
  color: var(--rc-cream);
}

/* Loader spinner */
.rcnl-btn-loader {
  width: 14px;
  height: 14px;
  border: 2px solid rgba(255,255,255,.3);
  border-top-color: #fff;
  border-radius: 50%;
  animation: rcnl-spin .7s linear infinite;
  flex-shrink: 0;
}
.rcnl-btn-loader[hidden] { display: none; }
@keyframes rcnl-spin { to { transform: rotate(360deg); } }

/* ── DISCLAIMER ─────────────────────────────────────────── */
.rcnl-disclaimer {
  font-size: var(--rc-fs-btn);
  color: #a8a49c;
  line-height: 1.6;
  margin: 14px 0 0;
  text-align: center;
}
.rcnl-disclaimer a {
  color: var(--rc-muted);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.rcnl-disclaimer a:hover { color: var(--rc-gold); }

/* ── ÉXITO ──────────────────────────────────────────────── */
.rcnl-success-icon {
  width: 48px;
  height: 48px;
  border: 1px solid var(--rc-gold);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
}
.rcnl-success-icon svg {
  width: 20px;
  height: 20px;
  stroke: var(--rc-gold);
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.rcnl-success-divider {
  height: 1px;
  background: var(--rc-cream-border);
  margin: 24px 0 20px;
}
.rcnl-social-label {
  font-size: var(--rc-fs-btn);
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--rc-muted);
  margin: 0 0 14px;
}
.rcnl-social-links {
  display: flex;
  gap: 10px;
  margin-bottom: 24px;
}
.rcnl-social-links a {
  width: 36px;
  height: 36px;
  border: 1px solid var(--rc-cream-border);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: border-color .2s;
}
.rcnl-social-links a:hover { border-color: var(--rc-gold); }
.rcnl-social-links svg {
  width: 15px;
  height: 15px;
  stroke: var(--rc-ink);
  fill: none;
  stroke-width: 1.5;
}

/* ── RESPONSIVE ─────────────────────────────────────────── */
@media (max-width: 700px) {
  .rcnl-modal {
    grid-template-columns: 1fr;
    max-height: 88vh;
    overflow-y: auto;
  }
  .rcnl-image {
    min-height: 200px;
    max-height: 220px;
  }
  .rcnl-content {
    padding: 32px 24px 28px;
  }
  .rcnl-title { font-size: 24px; }
}
@media (max-width: 400px) {
  .rcnl-overlay { padding: 0; align-items: flex-end; }
  .rcnl-modal { max-height: 92vh; }
  .rcnl-image { display: none; }
  .rcnl-content { padding: 36px 20px 28px; }
}