/* ============================================================
   skinspecialist.cz — ss-newsletter-1.css — v1 production
   SECTION: Newsletter — sage full-width, centered editorial

   Architecture:
   - Section caps full-width inside .welcome wrapper
   - Sage backdrop, white text, cream em accent
   - Eyebrow + headline + lead + form pill + disclaimer
   - Form pill: rgba white wash with email input + sage button
   - Centered max-width 680px content
   ============================================================ */

/* Ancestor reset (escape Shoptet welcome-wrapper constraints) */
.content-wrapper.welcome-wrapper,
.content-wrapper.welcome-wrapper > .content-wrapper-in,
.content-wrapper.welcome-wrapper .container,
.content-wrapper.welcome-wrapper .welcome-wrapper,
.content-wrapper.welcome-wrapper .welcome,
.content-wrapper.welcome-wrapper .welcome > div {
  width: 100% !important;
  max-width: 100% !important;
  flex: 0 0 100% !important;
  flex-basis: 100% !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  box-sizing: border-box !important;
}

/* Section — full-bleed sage band */
.ss-newsletter {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: clamp(64px, 7vw, 96px) clamp(16px, 2vw, 32px) !important;
  background: var(--ss-sage, #6B8B85) !important;
  color: #FFFFFF !important;
  text-align: center !important;
  box-sizing: border-box !important;
}

/* Inner content cap */
.ss-newsletter__inner {
  max-width: 680px;
  margin: 0 auto;
  text-align: center !important;
}
.ss-newsletter__inner * { text-align: center !important; }

/* Eyebrow */
.ss-newsletter__eyebrow {
  display: block;
  font-family: var(--ss-sans, sans-serif);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .18em;
  color: rgba(255, 255, 255, .78);
  margin: 0 0 18px;
}

/* Headline */
.ss-newsletter__heading {
  font-family: var(--ss-serif, Georgia, serif);
  font-size: clamp(28px, 3.4vw, 44px);
  font-weight: 300;
  letter-spacing: -0.02em;
  line-height: 1.1;
  color: #FFFFFF !important;
  margin: 0 auto 16px !important;
  max-width: 600px;
}

.ss-newsletter__heading em {
  font-style: italic;
  color: var(--ss-cream, #E8DDC8) !important;
  font-weight: 400;
}

/* Lead text */
.ss-newsletter__lead {
  margin: 0 auto 36px !important;
  max-width: 540px;
  font-family: var(--ss-sans, sans-serif);
  font-size: 15.5px;
  line-height: 1.6;
  color: rgba(255, 255, 255, .85) !important;
}

/* Form pill — rgba wash with input + button inline */
.ss-newsletter__form {
  display: flex;
  max-width: 520px;
  margin: 0 auto !important;
  gap: 8px;
  background: rgba(255, 255, 255, .10);
  padding: 6px;
  border-radius: 6px;
  border: 1px solid rgba(255, 255, 255, .20);
  align-items: stretch;
}

.ss-newsletter__input {
  flex: 1;
  height: 48px;
  padding: 0 22px;
  background: transparent !important;
  color: #FFFFFF !important;
  border: 0 !important;
  outline: 0 !important;
  font-family: var(--ss-sans, sans-serif);
  font-size: 14px;
  text-align: left !important;
  box-shadow: none !important;
  margin: 0 !important;
  border-radius: 0 !important;
  -webkit-appearance: none;
  appearance: none;
}

.ss-newsletter__input::placeholder {
  color: rgba(255, 255, 255, .55);
}

.ss-newsletter__input:focus {
  background: rgba(255, 255, 255, .04) !important;
}

/* Autofill colour fix (Chrome/Safari paint blue) */
.ss-newsletter__input:-webkit-autofill,
.ss-newsletter__input:-webkit-autofill:hover,
.ss-newsletter__input:-webkit-autofill:focus {
  -webkit-text-fill-color: #FFFFFF;
  -webkit-box-shadow: 0 0 0 1000px rgba(255, 255, 255, .06) inset;
  caret-color: #FFFFFF;
  transition: background-color 9999s ease-in-out 0s;
}

/* Button */
.ss-newsletter__btn {
  height: 48px;
  padding: 0 28px;
  background: #FFFFFF !important;
  color: #4F6B66 !important; /* sage-deep */
  font-family: var(--ss-sans, sans-serif);
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .1em;
  border: 0 !important;
  border-radius: 6px !important;
  cursor: pointer;
  transition: background .25s, color .25s, transform .25s;
  flex-shrink: 0;
  white-space: nowrap;
}

.ss-newsletter__btn:hover {
  background: var(--ss-cream, #E8DDC8) !important;
  color: var(--ss-black, #0F0F0F) !important;
}

.ss-newsletter__btn:active {
  transform: scale(.98);
}

/* Disabled / sending state */
.ss-newsletter__btn[data-state="sending"] {
  opacity: .65;
  cursor: wait;
}

.ss-newsletter__btn[data-state="done"] {
  background: var(--ss-cream, #E8DDC8) !important;
  color: var(--ss-black, #0F0F0F) !important;
  cursor: default;
}

/* Disclaimer */
.ss-newsletter__disclaimer {
  margin: 18px auto 0 !important;
  font-family: var(--ss-sans, sans-serif);
  font-size: 11.5px;
  color: rgba(255, 255, 255, .6) !important;
  letter-spacing: .02em;
}

/* Inline message slot (errors/info) */
.ss-newsletter__msg {
  margin: 14px auto 0 !important;
  font-family: var(--ss-sans, sans-serif);
  font-size: 12.5px;
  color: rgba(255, 255, 255, .82) !important;
  min-height: 18px;
}

.ss-newsletter__msg[data-type="error"] {
  color: #FFD7D0 !important;
}

/* Hide any Shoptet native newsletter widget once we use it as data source */
.ss-newsletter-source-hidden {
  position: absolute !important;
  left: -10000px !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
  pointer-events: none !important;
  visibility: hidden !important;
}

/* Responsive — stack on small screens */
@media (max-width: 640px) {
  .ss-newsletter__form {
    flex-direction: column;
    border-radius: 8px;
    padding: 8px;
  }
  .ss-newsletter__input {
    text-align: center !important;
    height: 44px;
  }
  .ss-newsletter__btn {
    width: 100%;
    height: 44px;
  }
  .ss-newsletter__heading {
    font-size: clamp(24px, 6.6vw, 32px);
  }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .ss-newsletter__btn,
  .ss-newsletter__btn:active {
    transition: none;
    transform: none;
  }
}