/* LILIOR - newsletter v paticce | v1
   Funguje i bez skriptu (jen bez textu navic).
   Barvy navazuji na lilior12.css: fialova = hlavni, ruzova = dekor. */

.footer-newsletter{
  --lxn-br:#6F4D86;      /* hlavni brand - tlacitko, focus */
  --lxn-br-d:#5a3d6e;    /* tmavsi odstin pro hover */
  --lxn-br2:#E494AD;     /* ruzovy dekor */
  --lxn-ink:#2b2226;
  --lxn-mu:#7a6e74;
  --lxn-line:#efdde6;

  --lxn-cut:46px;        /* velikost zkoseni rohu - vzdy stejne v obou osach, tedy 45 stupnu */

  box-sizing:border-box;
  container-type:inline-size;      /* rozlozeni se ridi sirkou bloku, ne oknem */
  position:relative;
  padding:38px 40px 40px;
  margin-bottom:40px;              /* mezera nad patickou */
  background:linear-gradient(135deg,#fdf4f8 0%,#f7f2fa 100%);
  color:var(--lxn-ink);
  text-align:left;

  /* tvar krabicky: seriznuty levy horni a pravy dolni roh */
  clip-path:polygon(
    var(--lxn-cut) 0,
    100% 0,
    100% calc(100% - var(--lxn-cut)),
    calc(100% - var(--lxn-cut)) 100%,
    0 100%,
    0 var(--lxn-cut)
  );
}
.footer-newsletter *{box-sizing:border-box}

/* ------------------------------- texty ---------------------------------- */

.footer-newsletter h2{
  margin:0 0 8px;
  font-size:25px;
  font-weight:700;
  line-height:1.2;
  letter-spacing:-.01em;
  color:var(--lxn-ink);
  text-align:left;
}
.footer-newsletter h2::before,
.footer-newsletter h2::after{content:none}

.lxn-sub{
  margin:0 0 16px;
  max-width:52ch;
  font-size:14.5px;
  line-height:1.55;
  color:var(--lxn-mu);
}

.lxn-perks{
  list-style:none;
  margin:0 0 20px;
  padding:0;
  display:flex;
  flex-direction:column;
  gap:7px;
  font-size:13.5px;
  line-height:1.4;
}
.lxn-perks li{display:flex;align-items:flex-start;gap:9px}
.lxn-perks .lxn-ic{
  flex:none;
  width:18px;height:18px;
  margin-top:1px;
  border-radius:50%;
  background:#fff;
  border:1px solid var(--lxn-line);
  display:flex;align-items:center;justify-content:center;
}
.lxn-perks .lxn-ic svg{
  width:11px;height:11px;
  fill:none;stroke:var(--lxn-br);
  stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;
}

/* ------------------------------ formular -------------------------------- */

.footer-newsletter .subscribe-form fieldset{
  margin:0;padding:0;border:0;
  display:grid;
  gap:12px;
}

/* medvedi past na roboty a skryta pole nesmi delat prazdny radek v mrizce */
.footer-newsletter .subscribe-form .sr-only,
.footer-newsletter .subscribe-form input[type="hidden"]{
  position:absolute!important;
  width:1px;height:1px;
  overflow:hidden;
  clip-path:inset(50%);
  margin:0;
}

.footer-newsletter .form-group{margin:0}

/* popisek E-mail schovame, jakmile skript doplni placeholder */
.footer-newsletter.lxn .form-group > label{
  position:absolute;
  width:1px;height:1px;
  overflow:hidden;
  clip-path:inset(50%);
}
/* bez skriptu popisek zustava, jen mensi */
.footer-newsletter .form-group > label{
  display:block;
  margin-bottom:6px;
  font-size:13px;
  font-weight:600;
  color:var(--lxn-ink);
}

.footer-newsletter .form-control{
  display:block;
  width:100%;
  height:50px;
  margin:0;
  padding:0 20px;
  border:1px solid #e6d5de;
  border-radius:999px;
  background:#fff;
  font:inherit;
  font-size:16px;          /* mensi pismo mobil sam zvetsuje pri psani */
  color:var(--lxn-ink);
  box-shadow:none;
  transition:border-color .15s ease, box-shadow .15s ease;
}
.footer-newsletter .form-control::placeholder{color:#b3a6ad}
.footer-newsletter .form-control:focus{
  outline:none;
  border-color:var(--lxn-br);
  box-shadow:0 0 0 3px rgba(228,148,173,.35);
}
.footer-newsletter .has-error .form-control,
.footer-newsletter .form-control.error{border-color:#c0446a}

.footer-newsletter .btn.btn-primary{
  width:100%;
  height:50px;
  padding:0 28px;
  border:0;
  border-radius:999px;
  background:var(--lxn-br);
  color:#fff;
  font-size:15px;
  font-weight:600;
  line-height:1;
  letter-spacing:.01em;
  cursor:pointer;
  transition:background .15s ease, transform .1s ease;
}
.footer-newsletter .btn.btn-primary:hover,
.footer-newsletter .btn.btn-primary:focus-visible{background:var(--lxn-br-d);color:#fff}
.footer-newsletter .btn.btn-primary:active{transform:scale(.985)}
.footer-newsletter .btn.btn-primary:focus-visible{outline:2px solid var(--lxn-br);outline-offset:3px}

/* souhlas a poznamka pod formularem */
.footer-newsletter .consents{margin:0}
.footer-newsletter .consents .label,
.lxn-note{
  margin:0;
  font-size:12.5px;
  line-height:1.5;
  color:var(--lxn-mu);
}
.lxn-note{margin-bottom:4px}
.lxn-note b{color:var(--lxn-ink);font-weight:600}
.footer-newsletter .consents a{
  color:var(--lxn-br);
  text-decoration:underline;
  text-decoration-color:var(--lxn-br2);
  text-underline-offset:2px;
}
.footer-newsletter .consents a:hover{color:var(--lxn-br-d)}

/* ----------------------- sirsi blok: pole vedle sebe --------------------- */

@container (min-width:520px){
  .footer-newsletter .subscribe-form fieldset{
    grid-template-columns:minmax(0,1fr) auto;
    column-gap:10px;
  }
  .footer-newsletter .form-group{grid-column:1}
  .footer-newsletter .btn.btn-primary{grid-column:2;width:auto}
  .footer-newsletter .consents{grid-column:1 / -1}
}

/* ------------------------------- mobil ---------------------------------- */

@media(max-width:767px){
  .footer-newsletter{--lxn-cut:30px;padding:30px 22px 26px;margin-bottom:28px}
  .footer-newsletter h2{font-size:22px}
}

@media(prefers-reduced-motion:reduce){
  .footer-newsletter *{transition:none!important}
}