/* ============================================================
   Dialog poptavky pro PUVODNI vzhled www.web-skoly.cz (Bootstrap 3).
   Prechodne: novy vzhled (css/v2/site.css) ma tyto styly v sobe,
   tenhle soubor jde smazat, az se novy vzhled spusti.

   Vse je omezene na #poptavka (a tlacitko v menu), aby se nic nebilo
   s Bootstrapem a css.css. Pozor: Bootstrap nastavuje html{font-size:10px},
   proto tu nejsou jednotky rem - jen px a em.
   ============================================================ */

@font-face{font-family:'Bricolage Grotesque';font-style:normal;font-weight:500 800;font-display:swap;src:url(../../fonts/v2/bricolage-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Bricolage Grotesque';font-style:normal;font-weight:500 800;font-display:swap;src:url(../../fonts/v2/bricolage-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'DM Sans';font-style:normal;font-weight:400 700;font-display:swap;src:url(../../fonts/v2/dmsans-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'DM Sans';font-style:normal;font-weight:400 700;font-display:swap;src:url(../../fonts/v2/dmsans-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

/* ---------- zelene tlacitko Poptavka v menu (misto Atlasu webu) ---------- */
#special2.ws-poptavka{background:#14864A!important;color:#fff!important;border-color:#14864A!important;font-weight:700;box-shadow:0 8px 20px -8px rgba(20,134,74,.6)}
#special2.ws-poptavka:hover,#special2.ws-poptavka:focus{background:#0F7440!important;border-color:#0F7440!important;color:#fff!important}
/* css.css rusi outline u a:focus pres !important - fokus z klavesnice musi byt videt */
#special2.ws-poptavka:focus-visible{outline:3px solid #F7941E!important;outline-offset:3px}
/* puvodni titulka: vnorena .row v #clients pretekala na mobilu o 16 px (rozhazovalo i dialog) */
#clients{overflow-x:hidden}
#clients .btn{white-space:normal;max-width:100%}
#clients .row>.row{margin-left:0;margin-right:0}

/* ---------- dialog ---------- */
#poptavka{
  --ink:#1B2340;--paper:#FBF8F1;--sand:#F4EEE2;--line:#E6E1D6;--line-2:#958D7C;--t2:#5B6178;   /* --line-2 = okraje poli, 3.1:1 (WCAG 1.4.11) */
  
  --on-ink:#D6D9E4;--orange:#F7941E;--go:#14864A;--go-hover:#0F7440;--go-50:#E4F4EA;
  --display:'Bricolage Grotesque',system-ui,-apple-system,'Segoe UI',sans-serif;
  --sans:'DM Sans',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --ease:cubic-bezier(.2,.7,.2,1);
  border:0;padding:0;margin:auto;width:min(1040px,calc(100% - 32px));max-width:none;max-height:calc(100vh - 32px);max-height:calc(100dvh - 32px);
  border-radius:32px;background:var(--paper);color:var(--ink);box-shadow:0 40px 120px -20px rgba(14,18,36,.6);overflow:hidden;overscroll-behavior:contain;
  font:400 16px/1.6 var(--sans);-webkit-font-smoothing:antialiased;text-align:left;letter-spacing:normal
}
#poptavka *,#poptavka *::before,#poptavka *::after{box-sizing:border-box}
#poptavka::backdrop{background:rgba(14,18,36,.62);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}
#poptavka:not([open]){display:none}
#poptavka[open]{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr)}
/* prohlizec bez <dialog> (Safari < 15.4): poptavka.js prida .is-fallback */
#poptavka.is-fallback{position:fixed;inset:16px;z-index:10000;overflow:auto}
@media (prefers-reduced-motion:no-preference){#poptavka[open]{animation:ws-dlg-in .35s var(--ease)}}
@keyframes ws-dlg-in{from{opacity:0;transform:translateY(16px) scale(.985)}}
#poptavka [hidden]{display:none!important}
#poptavka p{margin:0}
#poptavka a{color:inherit;text-decoration:underline;text-underline-offset:.18em}
#poptavka svg{display:inline-block;vertical-align:middle}
#poptavka :focus-visible,#poptavka a:focus-visible,#poptavka .btn:focus-visible,#poptavka .dlg-close:focus-visible{outline:3px solid var(--orange)!important;outline-offset:3px}

#poptavka .dlg-aside{background:var(--ink);color:var(--on-ink);padding:44px;display:flex;flex-direction:column;gap:18px;position:relative;overflow:hidden}
#poptavka .dlg-aside::after{content:"";position:absolute;left:-30%;bottom:-40%;width:420px;height:420px;border-radius:50%;background:radial-gradient(closest-side,rgba(247,148,30,.22),transparent);pointer-events:none}
#poptavka .dlg-aside>*{position:relative;z-index:1}
#poptavka .eyebrow{display:inline-flex;align-items:center;gap:10px;font:700 12.5px/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:#A9AFC4;margin:0}
#poptavka .eyebrow::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--orange);flex:none}
#poptavka .dlg-aside h2{color:#fff;font:800 34px/1.08 var(--display);letter-spacing:-.025em;margin:0}
#poptavka .dlg-aside p{color:var(--on-ink);font-size:16px}
#poptavka .check-list{list-style:none;padding:0;margin:4px 0 0;display:grid;gap:10px;font-size:15.5px}
#poptavka .check-list li{position:relative;padding-left:34px;margin:0}
#poptavka .check-list li::before{content:"";position:absolute;left:0;top:.18em;width:22px;height:22px;border-radius:50%;background:rgba(20,134,74,.25) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237BE0A6' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center/13px no-repeat}
#poptavka .cta-person{margin-top:auto;padding-top:20px;border-top:1px solid rgba(255,255,255,.1);color:#A9AFC4;font-size:14.5px}
#poptavka .cta-person b{color:#fff;display:block;font-size:15px}
#poptavka .cta-person a{color:#D6D9E4}

#poptavka .dlg-main{padding:44px;overflow-y:auto;overscroll-behavior:contain;max-height:calc(100vh - 32px);max-height:calc(100dvh - 32px)}
#poptavka .dlg-close{position:absolute;top:14px;right:14px;z-index:5;width:44px;height:44px;border-radius:50%;border:0;background:#fff;box-shadow:0 1px 2px rgba(27,35,64,.06),0 2px 8px rgba(27,35,64,.05);cursor:pointer;display:grid;place-items:center;padding:0}
#poptavka .dlg-close svg{width:18px;height:18px;stroke:var(--ink);stroke-width:2.4;stroke-linecap:round;fill:none}
#poptavka .dlg-close:hover{background:var(--sand)}

/* ---------- formular ---------- */
#poptavka .form{display:grid;gap:18px;margin:0}
#poptavka .form-row{display:grid;grid-template-columns:1fr 1fr;gap:18px;align-items:start}
#poptavka .field{display:grid;gap:7px;margin:0;align-content:start}
#poptavka .field label,#poptavka .field legend{font:700 14.5px/1.4 var(--sans);color:var(--ink);padding:0;margin:0;border:0;width:auto;display:block}
#poptavka .field label .opt{font-weight:500;color:var(--t2)}
#poptavka fieldset.field{border:0;margin:0;padding:0;min-width:0}
#poptavka .field input,#poptavka .field textarea{width:100%;height:auto;min-height:52px;padding:13px 16px;border-radius:14px;border:1.5px solid var(--line-2);background:#fff;color:var(--ink);font:400 16px/1.4 var(--sans);box-shadow:none;margin:0;transition:border-color .2s,box-shadow .2s;-webkit-appearance:none;appearance:none}
#poptavka .field textarea{min-height:120px;resize:vertical}
#poptavka .field input::placeholder,#poptavka .field textarea::placeholder{color:#6E7387;opacity:1}
#poptavka .field input:focus,#poptavka .field textarea:focus{outline:0;border-color:var(--ink);box-shadow:0 0 0 4px rgba(247,148,30,.28)}
#poptavka .field.has-error input,#poptavka .field.has-error textarea{border-color:#C2410C;box-shadow:0 0 0 4px rgba(194,65,12,.12)}
#poptavka .field-error{color:#B3360A;font-size:14px;font-weight:600;display:none}
#poptavka .field.has-error .field-error{display:block}
#poptavka .choices{display:flex;flex-wrap:wrap;gap:8px}
#poptavka .choice{position:relative;margin:0;font-weight:inherit;display:inline-block}
#poptavka .choice input{position:absolute;opacity:0;width:1px;height:1px;margin:0}
#poptavka .choice span{display:inline-flex;align-items:center;min-height:44px;padding:10px 16px;border-radius:999px;border:1.5px solid var(--line-2);background:#fff;font:600 15px/1.2 var(--sans);color:var(--ink);cursor:pointer;transition:border-color .2s,background-color .2s,color .2s}
#poptavka .choice span:hover{border-color:var(--ink)}
#poptavka .choice input:checked+span{background:var(--ink);border-color:var(--ink);color:#fff}
#poptavka .choice input:focus-visible+span{outline:3px solid var(--orange);outline-offset:2px}
#poptavka .hp-field{position:absolute!important;left:-9999px!important;width:1px;height:1px;overflow:hidden}
#poptavka .form-foot{display:flex;flex-wrap:wrap;align-items:center;gap:14px 20px;margin-top:4px}
#poptavka .form-note{font-size:13.5px;color:var(--t2);margin:0;flex:1 1 220px;line-height:1.5}
#poptavka .form-note a{color:var(--t2)}
#poptavka .form-alert{display:none;padding:14px 16px;border-radius:14px;background:#FDECE4;color:#8A2A06;font-size:15px;font-weight:500}
#poptavka .form-alert.is-visible{display:block}
#poptavka .form-alert a{color:inherit;font-weight:700}

#poptavka .btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:60px;height:auto;padding:18px 30px;border-radius:999px;border:2px solid transparent;font:700 17px/1.1 var(--sans);letter-spacing:-.005em;text-decoration:none;text-transform:none;cursor:pointer;white-space:nowrap;box-shadow:none;transition:transform .2s var(--ease),box-shadow .2s var(--ease),background-color .2s,color .2s,border-color .2s}
#poptavka .btn:hover{transform:translateY(-1px)}
#poptavka .btn svg{width:18px;height:18px;flex:none;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
#poptavka .btn-go{background:var(--go);color:#fff;box-shadow:0 8px 20px -8px rgba(20,134,74,.6)!important}
#poptavka .btn-go:hover,#poptavka .btn-go:focus{background:var(--go-hover);color:#fff}
#poptavka .btn-ghost{background:transparent;color:var(--ink);border-color:rgba(27,35,64,.22);min-height:52px;padding:14px 24px;font-size:16px}
#poptavka .btn-ghost:hover{border-color:var(--ink)}
#poptavka .btn[aria-busy="true"]{pointer-events:none;opacity:.85}
#poptavka .btn[aria-busy="true"]::after{content:"";width:18px;height:18px;border-radius:50%;border:2.5px solid rgba(255,255,255,.4);border-top-color:#fff;animation:ws-spin .8s linear infinite}
@keyframes ws-spin{to{transform:rotate(360deg)}}

#poptavka .form-done{display:none;text-align:center;padding:64px 0}
#poptavka .form-done.is-visible{display:block}
#poptavka .form-done .ok{width:84px;height:84px;margin:0 auto 22px;border-radius:50%;background:var(--go-50);display:grid;place-items:center}
#poptavka .form-done .ok svg{width:42px;height:42px;stroke:var(--go);stroke-width:3;fill:none;stroke-linecap:round;stroke-linejoin:round}
#poptavka .form-done h3{font:800 30px/1.1 var(--display);letter-spacing:-.02em;color:var(--ink);margin:0 0 12px}
#poptavka .form-done p{color:var(--t2);max-width:42ch;margin:0 auto 24px}

@media (max-width:820px){
  #poptavka{width:100%;max-width:100vw;max-height:100vh;max-height:100dvh;height:100vh;height:100dvh;border-radius:0;margin:0}
  /* max-content: hlavicka s overflow:hidden se jinak smrskla na samotny padding */
  #poptavka[open]{grid-template-columns:minmax(0,1fr);grid-template-rows:max-content auto;overflow-y:auto}
  #poptavka.is-fallback{inset:0}
  #poptavka .dlg-aside{padding:28px 20px 24px}
  #poptavka .dlg-aside .check-list,#poptavka .dlg-aside .cta-person{display:none}
  #poptavka .dlg-aside h2{padding-right:48px;font-size:26px}
  #poptavka .dlg-main{max-height:none;overflow:visible;padding:24px 20px 40px}
  #poptavka .choices{padding-right:48px}   /* misto pro pevny krizek */
  /* krizek zustane na miste i pri rolovani formulare */
  #poptavka .dlg-close{position:fixed;background:rgba(27,35,64,.85)}
  #poptavka .dlg-close svg{stroke:#fff}
}
@media (max-width:560px){#poptavka .form-row{grid-template-columns:1fr}#poptavka .btn{width:100%}}
