/* ============================================================
   michalovytrubky-shop.cz — mt-newsletter-1.css — v1
   SECTION: Newsletter signup band (homepage) — full-bleed modrá, centered.
   Reskin z skinspecialist ss-newsletter-2.css.

   Architektura:
   - Band na konci .mt-home (poslední sekce před patičkou), full-width
   - Primární modrá pozadí, bílý text, pale-blue em accent
   - Eyebrow + headline + lead + form pill + disclaimer
   - Form pill: rgba bílý wash s e-mail inputem + bílým tlačítkem (modrý text)
   - Centrovaný obsah max 680px
   ============================================================ */

/* Section — full-bleed modrá band */
.mt-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(--mt-primary, #0052DA) !important;
  color: #FFFFFF !important;
  text-align: center !important;
  box-sizing: border-box !important;
}

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

/* Eyebrow */
.mt-newsletter__eyebrow {
  display: block;
  font-family: var(--mt-display, 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 */
.mt-newsletter__heading {
  font-family: var(--mt-display, 'Helvetica', sans-serif);
  font-size: clamp(28px, 3.4vw, 42px);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.12;
  color: #FFFFFF !important;
  margin: 0 auto 16px !important;
  max-width: 600px;
}

.mt-newsletter__heading em {
  font-style: normal;
  color: var(--mt-primary-bg, #DBEAFE) !important;
  font-weight: 700;
}

/* Lead text */
.mt-newsletter__lead {
  margin: 0 auto 36px !important;
  max-width: 540px;
  font-family: var(--mt-display, 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 */
.mt-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;
}

.mt-newsletter__input {
  flex: 1;
  height: 48px;
  padding: 0 22px;
  background: transparent !important;
  color: #FFFFFF !important;
  border: 0 !important;
  outline: 0 !important;
  font-family: var(--mt-display, 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;
}

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

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

/* Autofill colour fix (Chrome/Safari paint blue) */
.mt-newsletter__input:-webkit-autofill,
.mt-newsletter__input:-webkit-autofill:hover,
.mt-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 */
.mt-newsletter__btn {
  height: 48px;
  padding: 0 28px;
  background: #FFFFFF !important;
  color: var(--mt-primary, #0052DA) !important;
  font-family: var(--mt-display, 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;
}

.mt-newsletter__btn:hover {
  background: var(--mt-primary-bg, #DBEAFE) !important;
  color: var(--mt-accent, #253041) !important;
}

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

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

.mt-newsletter__btn[data-state="done"] {
  background: var(--mt-primary-bg, #DBEAFE) !important;
  color: var(--mt-accent, #253041) !important;
  cursor: default;
}

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

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

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

/* Hide any Shoptet native newsletter widget once we use it as data source */
.mt-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;
}

/* v2: nativní Shoptet newsletter prvek v patičce držíme jen jako SKRYTÝ ZDROJ
   (formId/consents + háček pro Leadhub pixel). Schováme celý jeho bílý blok
   (.footer-rows s nativním logem + nadpisem „Odebírat newsletter") OFF-SCREEN —
   NE display:none, aby formulář zůstal renderovaný → requestSubmit (Leadhub feed)
   + fetch (Shoptet) dál fungují. Ověřeno živě: blok pryč (footer −191px), oba
   kanály jedou. Kotva na #formNewsletterWidget → nezávislé na běhu bloku. */
.footer-rows:has(#formNewsletterWidget) {
  position: absolute !important;
  left: -10000px !important;
  top: auto !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
}

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

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