/* ==========================================================================
   SKIIN - NEWSLETTER page only  (newsletter-page/newsletter.css)
   Banner, .sk-field / .sk-btn base look, .sk-form-msg and the 230x50 desktop
   button size are GLOBAL. This file = the centered beige card and the pill-
   shaped fields from the live design, for BOTH form sources:
     - The Newsletter plugin  (.tnp-subscription / .tnp-field / .tnp-submit)
     - the global built-in form (.sk-form / .sk-field / .sk-btn)
   Selectors start with .sk-newsletter__card so they beat the plugin's own css.
   ========================================================================== */

/* ---------- card ---------- */
.sk-newsletter__card {
  max-width: 500px; margin: 0 auto;
  padding: clamp(28px, 4vw, 54px) clamp(20px, 3vw, 30px) clamp(28px, 3vw, 30px);
  background: var(--color-bg-beige);
  border-radius: 30px;
}
.sk-newsletter__text { margin: 0 0 18px; font-size: 15px; text-align: center; color: var(--sk-dark); }
.sk-newsletter__card > p:empty { display: none; }   /* WordPress wraps the shortcode in empty <p> tags */

/* reset the plugin wrapper (it sets its own width / margin) */
.sk-newsletter__card .tnp-subscription { max-width: none; margin: 0; }
.sk-newsletter__card .tnp-subscription form { margin: 0; }

/* ---------- labels ---------- */
.sk-newsletter__card .tnp-field { margin: 0 0 14px; }
.sk-newsletter__card .tnp-field label,
.sk-newsletter__card .sk-form label {
  display: block; margin: 0 0 6px; padding: 0;
  font-family: var(--font-main); font-size: 14px; font-weight: 400; color: var(--sk-dark);
}
.sk-newsletter__card .sk-form { gap: 14px; }
.sk-newsletter__card .sk-form label { margin-bottom: -6px; }   /* keeps label tight to its field inside the grid */

/* ---------- pill fields (white, no border, 56px tall) ---------- */
.sk-newsletter__card .tnp-field input[type="text"],
.sk-newsletter__card .tnp-field input[type="email"],
.sk-newsletter__card .sk-form .sk-field {
  display: block; width: 100%; min-height: 56px; margin: 0;
  padding: 14px 30px;
  font-family: var(--font-main); font-size: 15px; color: var(--color-body);
  background: var(--color-white);
  border: 1px solid transparent; border-radius: 999px;
  box-shadow: none;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.sk-newsletter__card .tnp-field input:focus,
.sk-newsletter__card .sk-form .sk-field:focus {
  outline: none; border-color: var(--color-rose-accent); box-shadow: 0 0 0 3px rgba(206, 155, 155, .25);
}
.sk-newsletter__card ::placeholder { color: var(--color-body); opacity: .85; }

/* ---------- centered Subscribe button ---------- */
.sk-newsletter__card .tnp-field-button { margin: 30px 0 0; text-align: center !important; }   /* plugin writes text-align:left inline */
.sk-newsletter__card .sk-form .sk-btn { justify-self: center; margin-top: 16px; }
.sk-newsletter__card .tnp-field input.tnp-submit {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 50px; padding: 0 40px; margin: 0;
  font-family: var(--font-main); font-size: 15px; font-weight: 500; letter-spacing: .02em; text-transform: uppercase;
  color: var(--color-white); background: var(--sk-dark);
  border: 1px solid var(--sk-dark); border-radius: 8px; cursor: pointer;
  transition: background .25s ease, border-color .25s ease;
}
.sk-newsletter__card .tnp-field input.tnp-submit:hover,
.sk-newsletter__card .tnp-field input.tnp-submit:focus-visible { background: var(--color-rose-accent); border-color: var(--color-rose-accent); }

/* plugin + global success / error messages stay inside the card */
.sk-newsletter__card .tnp-message, .sk-newsletter__card .sk-form-msg { margin: 0 0 16px; text-align: center; }

@media (max-width: 575px) {
  .sk-newsletter__card { border-radius: 24px; }
  .sk-newsletter__card .tnp-field input.tnp-submit,
  .sk-newsletter__card .sk-form .sk-btn { width: 100%; justify-self: stretch; }
}