/*!
 * creammy-newsletter.css v1.0.0 — adaptis (pavel@adaptis.cz), 2026-10-29
 * Newsletter banner on the homepage (and /kontakty/), Linda Šamánková's request "prosba".
 *
 * DOM facts relied on (Shoptet template-11 + kunerts' index.js):
 *  - kunerts' JS moves .custom-footer__newsletter.extended out of the footer into
 *    .latest-contribution-wrapper, next to .rating-wrapper ("Zpětná vazba"). Everything below is
 *    scoped to that placement, so the hidden footer copy on other pages is left alone.
 *  - The wrapper is a row above 992px (it stretches the block to the reviews' height) and a column at ≤992px
 *    (style.min-second.css).
 *  - Shoptet now injects a CAPTCHA into #formNewsletterWidget:
 *      fieldset.box > h2 + .captcha-image > img (150×40) + .smart-label-wrapper > #newsletterWidgetCaptcha
 *    The input is required, so it must stay reachable or sign-ups fail.
 *  - Two shapes of the e-mail row: on the homepage kunerts' JS (.ks-fix-newsletter) moves the button into
 *    #newsletterWidget's .form-control-wrapper; on /kontakty/ the button stays a direct child of the fieldset.
 *  - #newsletterWidget has the placeholder "Váš e-mail" on both pages.
 *  - Shoptet's validator appends div.validator-msg into the input's .form-control-wrapper (after the button
 *    on the homepage); it is wrapped onto its own line below the row.
 *  - Competing rules: the header <style> (NEWSLETTER_4.png, !important), kunerts' newsletter.css
 *    (!important), style.min-second.css (::before 30 % black overlay, order:3 + margin-top:30px
 *    on the form groups). Hence the long selectors and the !important flags.
 *
 * What it does:
 *  1. New artwork: desktop 1280×960, phone (≤767px) 1080×1350; WebP with a JPG fallback, no overlay.
 *  2. The form sits in the empty band under the lips: [e-mail][PŘIHLÁSIT SE] + the consent line.
 *  3. The CAPTCHA row [image][Opište text z obrázku] shows only while the form is in use (focus
 *     inside it, or something typed). Browsers without :has() always show it, with the hint as a caption.
 *  4. Stacked layout (≤992px): the newsletter goes above "Zpětná vazba".
 *  Sizes come from --cnl-h (control height) and --cnl-img-w (CAPTCHA image width = --cnl-h × 3.75).
 *
 * Rollback, in this order: (1) header field: put back
 *   background: url(/user/documents/upload/ks/NEWSLETTER_4.png) center/100% 100% no-repeat !important;
 * (2) footer field: remove the <link> to this file.
 */

/* 1 ── block + artwork */
body .latest-contribution-wrapper > .custom-footer__newsletter.extended {
  --cnl-h: 46px;
  --cnl-img-w: 172px;
  aspect-ratio: 1280 / 960;
  height: auto !important;
  min-height: auto !important; /* lets the block grow instead of overflowing if the form ever needs more room */
  padding: 0 7% 3% !important;
  justify-content: flex-end !important;
  align-items: center !important;
  background: #eee7df url(creammy-newsletter-desktop.jpg?v=1) center top / cover no-repeat !important;
  background-image: image-set(url(creammy-newsletter-desktop.webp?v=1) type("image/webp"), url(creammy-newsletter-desktop.jpg?v=1) type("image/jpeg")) !important;
}
/* the template's 30 % black overlay greys out the light artwork */
body .latest-contribution-wrapper > .custom-footer__newsletter.extended::before {
  display: none !important;
}
/* the heading and the claim are part of the artwork */
body .latest-contribution-wrapper > .custom-footer__newsletter.extended > .newsletter-header,
body .latest-contribution-wrapper > .custom-footer__newsletter.extended > .newsletter-header + p {
  display: none !important;
}

/* 2 ── form */
body .latest-contribution-wrapper > .custom-footer__newsletter.extended #formNewsletterWidget {
  position: relative;
  width: 100%;
  max-width: 440px;
  margin: 0 auto;
}
body .latest-contribution-wrapper > .custom-footer__newsletter.extended #formNewsletterWidget > fieldset {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: stretch;
  justify-content: flex-end !important;
  gap: 8px 0;
  margin: 0;
  padding: 0;
  border: 0;
  text-align: left !important;
}
body .latest-contribution-wrapper > .custom-footer__newsletter.extended #formNewsletterWidget > fieldset > div {
  width: 100%;
  max-width: none;
  margin: 0 !important;
}
body .latest-contribution-wrapper > .custom-footer__newsletter.extended #formNewsletterWidget .form-group.smart-label-wrapper {
  width: 100%;
  max-width: none;
  margin: 0 !important;
}
/* the e-mail group shares its row with the button when that is a direct child (/kontakty/) */
body .latest-contribution-wrapper > .custom-footer__newsletter.extended #formNewsletterWidget > fieldset > .smart-label-wrapper {
  flex: 1 1 120px; /* a real basis, so it wraps below the full-width CAPTCHA row */
  min-width: 0;
  width: auto;
}
body .latest-contribution-wrapper > .custom-footer__newsletter.extended #formNewsletterWidget > fieldset > .consents {
  order: 5;
}
/* labels stay for screen readers; the e-mail field has its placeholder */
body .latest-contribution-wrapper > .custom-footer__newsletter.extended #formNewsletterWidget .smart-label-wrapper > label,
body .latest-contribution-wrapper > .custom-footer__newsletter.extended #formNewsletterWidget fieldset.box > h2 {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  margin: -1px !important;
  padding: 0 !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}
body .latest-contribution-wrapper > .custom-footer__newsletter.extended #formNewsletterWidget .form-control-wrapper {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  max-width: none;
  margin: 0;
}
body .latest-contribution-wrapper > .custom-footer__newsletter.extended #formNewsletterWidget .form-control {
  flex: 1 1 0;
  min-width: 0;
  width: auto;
  max-width: none;
  height: var(--cnl-h);
  padding: 0 20px;
  font-size: 14px;
  color: #674737;
  background: #fff;
  border: 1px solid rgba(103, 71, 55, .25);
  border-radius: 50px 0 0 50px;
}
body .latest-contribution-wrapper > .custom-footer__newsletter.extended #formNewsletterWidget .form-control:focus {
  border-color: #674737;
  outline: 0;
  box-shadow: none;
}
body .latest-contribution-wrapper > .custom-footer__newsletter.extended #formNewsletterWidget .btn {
  order: 4;
  flex: 0 0 auto;
  align-self: flex-start;
  display: flex;
  align-items: center;
  justify-content: center;
  height: var(--cnl-h) !important;
  min-height: var(--cnl-h) !important;
  padding: 0 24px !important;
  font-size: 13px !important;
  letter-spacing: .08em !important;
  white-space: nowrap;
  color: #f2ece5;
  background-color: #674737;
  border: 0;
  border-radius: 0 50px 50px 0;
}
body .latest-contribution-wrapper > .custom-footer__newsletter.extended #formNewsletterWidget .btn:hover,
body .latest-contribution-wrapper > .custom-footer__newsletter.extended #formNewsletterWidget .btn:focus-visible {
  color: #fff;
  background-color: #4e3528;
}
body .latest-contribution-wrapper > .custom-footer__newsletter.extended #formNewsletterWidget .consents {
  max-width: none;
  margin: 0 !important;
}
/* a light backing keeps the red text readable where the form grows over the lips */
body .latest-contribution-wrapper > .custom-footer__newsletter.extended #formNewsletterWidget .validator-msg {
  flex: 0 0 100%;
  order: 9;
  margin: 3px 0 0;
  padding: 2px 10px 2px 20px;
  font-size: 12px;
  line-height: 1.3;
  text-align: left;
  background: rgba(241, 236, 230, .92);
  border-radius: 10px;
}
body .latest-contribution-wrapper > .custom-footer__newsletter.extended #formNewsletterWidget .consents p.label,
body .latest-contribution-wrapper > .custom-footer__newsletter.extended #formNewsletterWidget .consents p.label a {
  margin: 0;
  font-size: 12px;
  line-height: 1.35;
  text-align: center;
  color: #674737;
}

/* 3 ── CAPTCHA: one row that mirrors the e-mail row, [image][input] */
body .latest-contribution-wrapper > .custom-footer__newsletter.extended #formNewsletterWidget fieldset.box {
  order: 0;
  flex: 0 0 100%;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: stretch;
  width: 100%;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  animation: cnl-reveal .2s ease-out;
}
body .latest-contribution-wrapper > .custom-footer__newsletter.extended #formNewsletterWidget fieldset.box .captcha-image {
  flex: 0 0 auto;
  align-self: flex-start;
  width: auto;
  margin: 0 !important;
}
body .latest-contribution-wrapper > .custom-footer__newsletter.extended #formNewsletterWidget fieldset.box .captcha-image img {
  display: block;
  width: var(--cnl-img-w);
  height: var(--cnl-h);
  border-radius: 50px 0 0 50px;
}
body .latest-contribution-wrapper > .custom-footer__newsletter.extended #formNewsletterWidget fieldset.box .smart-label-wrapper {
  display: flex;
  flex-direction: column-reverse; /* fallback caption under the input, so the row stays aligned */
  flex: 1 1 auto;
  min-width: 0;
  width: auto;
}
/* full basis: a message has to wrap onto its own line, not share the input's */
body .latest-contribution-wrapper > .custom-footer__newsletter.extended #formNewsletterWidget fieldset.box .form-control {
  flex-basis: 100%;
  border-left: 0;
  border-radius: 0 50px 50px 0;
}
/* the CAPTCHA message runs under the image too */
body .latest-contribution-wrapper > .custom-footer__newsletter.extended #formNewsletterWidget fieldset.box .validator-msg {
  flex-basis: calc(100% + var(--cnl-img-w));
  margin-left: calc(-1 * var(--cnl-img-w));
}
/* without :has() the hint is a small caption under the input */
body .latest-contribution-wrapper > .custom-footer__newsletter.extended #formNewsletterWidget fieldset.box .smart-label-wrapper > label {
  position: static !important;
  display: block !important; /* kunerts hide these labels on phones */
  width: auto !important;
  height: auto !important;
  margin: 2px 0 0 20px !important;
  overflow: visible !important;
  clip: auto !important;
  white-space: normal !important;
  text-align: left !important;
  font-size: 11px;
  line-height: 1.2;
  color: #674737;
}
@keyframes cnl-reveal {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: none; }
}
@supports selector(:has(*)) {
  /* the label doubles as the placeholder of the CAPTCHA input */
  body .latest-contribution-wrapper > .custom-footer__newsletter.extended #formNewsletterWidget fieldset.box .smart-label-wrapper > label {
    position: absolute !important;
    top: 0 !important;
    right: 14px;
    left: 20px !important;
    z-index: 1;
    display: flex !important;
    align-items: center;
    justify-content: flex-start;
    width: auto !important;
    height: var(--cnl-h) !important; /* the input's height, not the group's: the group grows when a message shows */
    margin: 0 !important;
    overflow: hidden !important;
    text-align: left !important;
    font-size: 14px;
    line-height: 1.1;
    letter-spacing: 0;
    color: #9a8579;
    pointer-events: none;
  }
  body .latest-contribution-wrapper > .custom-footer__newsletter.extended #formNewsletterWidget fieldset.box .smart-label-wrapper > label .required-asterisk::after {
    content: none;
  }
  body .latest-contribution-wrapper > .custom-footer__newsletter.extended #formNewsletterWidget fieldset.box .smart-label-wrapper:has(.form-control:focus, .form-control:valid) > label {
    opacity: 0;
  }
  /* the row appears once the form is in use */
  body .latest-contribution-wrapper > .custom-footer__newsletter.extended #formNewsletterWidget:not(:focus-within):not(:has(#newsletterWidget:not(:placeholder-shown), #newsletterWidgetCaptcha:valid)) fieldset.box {
    display: none;
  }
}

/* 4 ── half-width column (993–1250px): a more compact stack, so less of it covers the lips */
@media (min-width: 993px) and (max-width: 1250px) {
  body .latest-contribution-wrapper > .custom-footer__newsletter.extended {
    --cnl-h: 40px;
    --cnl-img-w: 150px;
    padding-bottom: 2.5% !important;
  }
  body .latest-contribution-wrapper > .custom-footer__newsletter.extended #formNewsletterWidget > fieldset {
    gap: 6px 0;
  }
  body .latest-contribution-wrapper > .custom-footer__newsletter.extended #formNewsletterWidget .btn {
    padding: 0 18px !important;
    font-size: 12px !important;
  }
  body .latest-contribution-wrapper > .custom-footer__newsletter.extended #formNewsletterWidget .consents p.label,
  body .latest-contribution-wrapper > .custom-footer__newsletter.extended #formNewsletterWidget .consents p.label a {
    font-size: 11px;
    line-height: 1.3;
  }
}

/* 5 ── phone artwork */
@media (max-width: 767px) {
  body .latest-contribution-wrapper > .custom-footer__newsletter.extended {
    --cnl-h: 40px;
    --cnl-img-w: 150px;
    aspect-ratio: 1080 / 1350;
    padding: 0 5% 4% !important;
    background: #f1ece6 url(creammy-newsletter-mobil.jpg?v=1) center top / cover no-repeat !important;
    background-image: image-set(url(creammy-newsletter-mobil.webp?v=1) type("image/webp"), url(creammy-newsletter-mobil.jpg?v=1) type("image/jpeg")) !important;
  }
  body .latest-contribution-wrapper > .custom-footer__newsletter.extended #formNewsletterWidget > fieldset {
    gap: 6px 0;
  }
  body .latest-contribution-wrapper > .custom-footer__newsletter.extended #formNewsletterWidget .form-control {
    padding: 0 14px;
    font-size: 16px; /* below 16px iOS zooms the page on focus */
  }
  body .latest-contribution-wrapper > .custom-footer__newsletter.extended #formNewsletterWidget .btn {
    padding: 0 14px !important;
    font-size: 11px !important;
  }
  body .latest-contribution-wrapper > .custom-footer__newsletter.extended #formNewsletterWidget .validator-msg {
    padding: 2px 8px 2px 14px;
    font-size: 11px;
  }
  body .latest-contribution-wrapper > .custom-footer__newsletter.extended #formNewsletterWidget .consents p.label,
  body .latest-contribution-wrapper > .custom-footer__newsletter.extended #formNewsletterWidget .consents p.label a {
    font-size: 10px;
    line-height: 1.3;
  }
  @supports selector(:has(*)) {
    body .latest-contribution-wrapper > .custom-footer__newsletter.extended #formNewsletterWidget fieldset.box .smart-label-wrapper > label {
      right: 10px;
      left: 14px !important;
      font-size: 12px;
    }
  }
}
/* narrow phones: a smaller CAPTCHA image leaves the input room for its hint */
@media (max-width: 359px) {
  body .latest-contribution-wrapper > .custom-footer__newsletter.extended {
    --cnl-h: 36px;
    --cnl-img-w: 135px;
  }
  body .latest-contribution-wrapper > .custom-footer__newsletter.extended #formNewsletterWidget fieldset.box .smart-label-wrapper > label {
    font-size: 11px;
  }
}

/* 6 ── stacked layout: newsletter above "Zpětná vazba" */
@media (max-width: 992px) {
  body .latest-contribution-wrapper > .custom-footer__newsletter.extended {
    order: -1;
  }
}