/* ============================================================
   Serrari Newsletter — Public Styles v2.0
   ============================================================ */

/* --- Base form --- */
.snl-subscription { width: 100%; }
.snl-form-title { margin: 0 0 8px; font-size: 22px; font-weight: 700; line-height: 1.2; }
.snl-form-desc  { margin: 0 0 16px; font-size: 14px; opacity: .8; line-height: 1.5; }
.snl-form { width: 100%; }
.snl-fields-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 10px; }
.snl-fields-email-row { display: flex; gap: 10px; align-items: stretch; }
.snl-email-field { flex: 1; }
.snl-field { width: 100%; }
.snl-input {
  width: 100%; padding: 11px 14px; border: 2px solid #e0e3e8; border-radius: 8px;
  font-size: 14px; transition: border-color .2s, box-shadow .2s; background: #fff;
  color: #333; outline: none; -webkit-appearance: none;
}
.snl-input:focus { border-color: #1a3a5c; box-shadow: 0 0 0 3px rgba(26,58,92,.1); }
.snl-submit-btn {
  padding: 11px 22px; border: none; border-radius: 8px; cursor: pointer;
  font-size: 14px; font-weight: 700; transition: filter .2s, transform .1s;
  white-space: nowrap; display: flex; align-items: center; gap: 8px;
  min-width: 110px; justify-content: center;
}
.snl-submit-btn:hover  { filter: brightness(1.1); }
.snl-submit-btn:active { transform: scale(.97); }

/* Honeypot (hidden) */
.snl-hp-field { position: absolute; left: -9999px; top: -9999px; opacity: 0; height: 0; overflow: hidden; }

/* Messages */
.snl-form-msg {
  margin-top: 10px; padding: 10px 14px; border-radius: 8px; font-size: 13.5px;
  font-weight: 500; display: none; line-height: 1.5;
}
.snl-form-msg.snl-msg-success { display: block; background: #d4edda; color: #155724; border: 1px solid #c3e6cb; }
.snl-form-msg.snl-msg-error   { display: block; background: #f8d7da; color: #721c24; border: 1px solid #f5c6cb; }
.snl-form-msg.snl-msg-info    { display: block; background: #cce5ff; color: #004085; border: 1px solid #b8daff; }
.snl-page-msg { padding: 12px 16px; border-radius: 8px; font-size: 14px; font-weight: 500; margin-top: 12px; }
.snl-page-msg.snl-success { background: #d4edda; color: #155724; }
.snl-page-msg.snl-info    { background: #e2e3e5; color: #383d41; }

/* ── Style: default ── */
.snl-style-default {
  padding: 32px; background: #fff;
  border-radius: 12px; box-shadow: 0 2px 20px rgba(0,0,0,.08);
  border: 1px solid #e9ecef;
}

/* ── Style: dark ── */
.snl-style-dark {
  padding: 32px; background: #1a1a2e; border-radius: 12px; color: #fff;
}
.snl-style-dark .snl-form-title { color: #fff; }
.snl-style-dark .snl-input {
  background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.2); color: #fff;
}
.snl-style-dark .snl-input::placeholder { color: rgba(255,255,255,.5); }
.snl-style-dark .snl-input:focus { border-color: #fff; box-shadow: 0 0 0 3px rgba(255,255,255,.15); }

/* ── Style: minimal ── */
.snl-style-minimal { padding: 8px 0; }
.snl-style-minimal .snl-input { border-radius: 6px; border-color: #ddd; }
.snl-style-minimal .snl-submit-btn { border-radius: 6px; }

/* ── Style: card ── */
.snl-style-card {
  padding: 28px; border-radius: 16px;
  background: linear-gradient(135deg, #1a3a5c 0%, #0d2240 100%);
  color: #fff;
}
.snl-style-card .snl-form-title { color: #fff; }
.snl-style-card .snl-form-desc  { color: rgba(255,255,255,.75); }
.snl-style-card .snl-input {
  background: rgba(255,255,255,.12); border: 2px solid rgba(255,255,255,.25); color: #fff;
}
.snl-style-card .snl-input::placeholder { color: rgba(255,255,255,.55); }
.snl-style-card .snl-input:focus { border-color: rgba(255,255,255,.7); background: rgba(255,255,255,.18); }

/* ── Style: popup ── */
.snl-style-popup { padding: 0; }

/* ── Post inject wrapper ── */
.snl-post-inject {
  margin-top: 36px; padding-top: 28px; border-top: 2px solid #eaecef;
}

/* ── Popup overlay ── */
#snl-popup-overlay {
  position: fixed; top: 0; left: 0; width: 100%; height: 100%;
  background: rgba(0,0,0,.55); z-index: 99999;
  display: flex; align-items: center; justify-content: center; padding: 20px;
  animation: snlFadeIn .25s ease;
}
#snl-popup-box {
  background: #fff; border-radius: 16px; padding: 36px 32px;
  max-width: 480px; width: 100%; position: relative;
  box-shadow: 0 10px 60px rgba(0,0,0,.25);
  animation: snlSlideUp .3s ease;
}
#snl-popup-close {
  position: absolute; top: 14px; right: 16px;
  background: none; border: none; font-size: 24px; cursor: pointer;
  color: #aaa; line-height: 1; padding: 4px; transition: color .15s;
}
#snl-popup-close:hover { color: #333; }

/* ── Spinner SVG ── */
.snl-btn-spinner svg { animation: snlSpin .8s linear infinite; display: block; }
@keyframes snlSpin    { to { transform: rotate(360deg); } }
@keyframes snlFadeIn  { from { opacity: 0; } to { opacity: 1; } }
@keyframes snlSlideUp { from { transform: translateY(20px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }

/* ── Responsive ── */
@media (max-width: 520px) {
  .snl-fields-row { grid-template-columns: 1fr; }
  .snl-fields-email-row { flex-direction: column; }
  .snl-submit-btn { width: 100%; }
  .snl-style-default, .snl-style-card { padding: 20px 16px; }
}