/* Kontaktný a informačný dialóg. [F2-Funkcie]
   Vlastná responzivita dialógov je tu (pod 720 px spodný hárok). */

.dialog{
  --focus:var(--ink);
  width:min(42.5rem,calc(100% - 2rem));max-width:none;max-height:calc(100% - 2rem);
  margin:auto;padding:0;border:0;border-radius:var(--r-block);
  background:var(--cr);color:var(--ink);font-family:var(--f-body);
  box-shadow:0 2rem 5rem rgba(27,20,16,.35);
  overflow:auto;overscroll-behavior:contain;
}
.dialog--demo{width:min(33.75rem,calc(100% - 2rem))}
.dialog::backdrop{background:rgba(27,20,16,.56);-webkit-backdrop-filter:blur(.375rem);backdrop-filter:blur(.375rem)}
.dialog__in{position:relative;padding:2.75rem 3rem 2.5rem}

/* zavrieť */
.dialog__x{position:absolute;top:1.25rem;right:1.25rem;width:2.75rem;height:2.75rem;border-radius:50%;background:#fff;color:var(--ink);display:flex;align-items:center;justify-content:center;box-shadow:var(--sh-hair),0 0 0 1px var(--ln) inset;transition:background-color .15s,color .15s;z-index:1}
.dialog__x svg{width:1.125rem;height:1.125rem}
.dialog__x:hover{background:var(--ink);color:var(--cr)}

/* hlavička */
.dialog__kick{text-transform:uppercase;letter-spacing:.06em;font-size:.8125rem;margin-bottom:1.125rem}
.dialog__h{font:800 3rem/1 var(--f-display);letter-spacing:-.045em;max-width:30rem;padding-right:2.5rem}
.dialog__lead{font:500 1.125rem/1.45 var(--f-body);color:var(--mut);margin-top:.875rem;max-width:31.25rem}

/* tlačidlá (vychádzajú z .btn v base.css) */
.dialog .btn{border-radius:1rem;padding:1rem 1.5rem;transition:transform .15s,background-color .15s,box-shadow .15s}
.dialog .btn:hover{background:#000}
.dialog .btn:active{transform:translateY(1px)}
.dialog .btn--line{background:#fff;color:var(--ink);box-shadow:0 0 0 1px var(--ln) inset,var(--sh-hair)}
.dialog .btn--line:hover{background:#fff;box-shadow:0 0 0 1px var(--ink) inset}

/* formulár */
.cf{display:grid;gap:1rem;margin-top:1.75rem}
.cf__row{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.cf__f{display:grid;gap:.4375rem;min-width:0}
.cf__f>span{font:600 .9375rem var(--f-body)}
.cf input,.cf textarea{
  width:100%;font:500 max(1rem,16px)/1.4 var(--f-body);color:var(--ink);
  background:#fff;border:1px solid var(--ln);border-radius:.875rem;padding:.8125rem 1rem;
  box-shadow:var(--sh-hair);transition:border-color .15s,box-shadow .15s;
}
.cf textarea{resize:vertical;min-height:8rem;display:block}
.cf input:hover,.cf textarea:hover{border-color:var(--sand)}
.cf input:focus-visible,.cf textarea:focus-visible{outline:none;border-color:var(--or);box-shadow:0 0 0 .1875rem rgba(255,106,43,.25)}
.cf__act{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:.5rem}
.cf__status{font:600 .9375rem/1.4 var(--f-body);color:var(--ok);background:var(--ok-bg);padding:.6875rem .875rem;border-radius:.75rem}
.cf__status.is-error{color:var(--or-dk);background:#ffe9dc}
.cf__foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.75rem 1rem;margin-top:.5rem;padding-top:1.125rem;border-top:1px solid var(--ln);font:500 .9375rem/1.4 var(--f-body);color:var(--mut)}
.cf__foot a{display:inline-flex;align-items:center;gap:.5rem;font-weight:600;color:var(--ink);padding:.5rem .875rem;border-radius:.75rem;background:#fff;box-shadow:0 0 0 1px var(--ln) inset}
.cf__foot a:hover{box-shadow:0 0 0 1px var(--ink) inset}
.cf__foot svg{width:1.125rem;height:1.125rem;color:var(--or)}

/* dialóg ukážky: štyri náhľady ako v úvode, vybraný zvýraznený */
.dd__vis{display:grid;grid-template-columns:repeat(4,1fr);gap:.5625rem;padding:1rem;margin:0 3rem 1.75rem 0;border-radius:1.5rem;background:var(--ink)}
.dd__vis .th{height:5.5rem;margin:0;opacity:.32;transition:opacity .2s,box-shadow .2s}
.dialog--demo[data-demo="service"] .th[data-for="service"],
.dialog--demo[data-demo="calendar"] .th[data-for="calendar"],
.dialog--demo[data-demo="gastro"] .th[data-for="gastro"],
.dialog--demo[data-demo="civic"] .th[data-for="civic"]{opacity:1;box-shadow:0 0 0 .1875rem var(--ink),0 0 0 .375rem var(--or)}
.dialog--demo .cf__act{margin-top:1.75rem}

/* otvorenie */
@media (prefers-reduced-motion:no-preference){
  .dialog[open]{animation:dlg-in .3s cubic-bezier(.2,.9,.25,1)}
  .dialog[open]::backdrop{animation:dlg-fade .22s ease-out}
}
@keyframes dlg-in{from{opacity:0;transform:translateY(1rem) scale(.98)}}
@keyframes dlg-fade{from{opacity:0}}

/* ---------- tablet a mobil ---------- */
@media (max-width:1199.98px){
  .dialog__h{font-size:2.5rem}
}
@media (max-width:719.98px){
  /* spodný hárok cez celú šírku */
  .dialog,.dialog--demo{width:100%;max-width:100%;margin:auto 0 0;max-height:calc(100dvh - 1rem);border-radius:1.75rem 1.75rem 0 0}
  .dialog__in{padding:1.75rem 1.25rem calc(1.5rem + env(safe-area-inset-bottom,0px))}
  .dialog__x{top:1rem;right:1rem}
  .dialog__kick{margin-bottom:.875rem}
  .dialog__h{font-size:2rem;line-height:1.02;padding-right:3rem}
  .dialog__lead{font-size:1rem;margin-top:.625rem}
  .cf{margin-top:1.25rem;gap:.875rem}
  .cf__row{grid-template-columns:1fr;gap:.875rem}
  .cf textarea{min-height:6.5rem}
  .cf__act .btn{width:100%;justify-content:center;min-height:3.25rem}
  .cf__foot{flex-direction:column;align-items:flex-start}
  .dd__vis{margin-right:3.25rem;padding:.75rem;gap:.375rem;border-radius:1.25rem}
  .dd__vis .th{height:4rem;padding:.375rem}
  @media (prefers-reduced-motion:no-preference){
    .dialog[open]{animation:dlg-up .32s cubic-bezier(.2,.9,.25,1)}
  }
}
@keyframes dlg-up{from{transform:translateY(100%)}}