/* SPA Components – konfigurátor termokrytu na míru
   Pouze vizuální vrstva. Nemění HTML, názvy polí ani logiku formuláře. */

body.in-termokryt-na-mieru{
  --tk-orange:#f7aa46;
  --tk-orange-hover:#ed8f2d;
  --tk-ink:#171717;
  --tk-copy:#5f6470;
  --tk-line:#e7e8eb;
  --tk-soft:#f6f7f8;
  --tk-white:#fff;
}

body.in-termokryt-na-mieru .pageArticleDetail>header{
  max-width:1320px;
  margin:0 auto 22px;
}

body.in-termokryt-na-mieru .pageArticleDetail>header h1{
  margin:0;
  color:var(--tk-ink);
  font-size:clamp(34px,4vw,54px);
  font-weight:800;
  line-height:1.08;
  letter-spacing:-.03em;
}

body.in-termokryt-na-mieru #vyrivky-form{
  width:min(100%,1320px);
  margin:0 auto 64px!important;
  padding:clamp(22px,4vw,52px);
  overflow:hidden;
  border:1px solid rgba(24,29,36,.08);
  border-radius:28px;
  background:var(--tk-white);
  color:var(--tk-ink);
  box-shadow:0 18px 48px rgba(31,38,48,.09);
}

body.in-termokryt-na-mieru #vyrivky-form,
body.in-termokryt-na-mieru #vyrivky-form *{
  box-sizing:border-box;
}

/* Oprava rozpadlé kombinace Foundation/Bootstrap mřížky. */
body.in-termokryt-na-mieru #vyrivky-form .grid-container{
  width:100%;
  max-width:none;
  margin:0;
  padding:0;
}

body.in-termokryt-na-mieru #vyrivky-form .grid-x{
  width:100%;
  margin-right:0;
  margin-left:0;
  display:flex;
  flex-flow:row wrap;
  align-items:stretch;
}

body.in-termokryt-na-mieru #vyrivky-form .align-center{justify-content:center}
body.in-termokryt-na-mieru #vyrivky-form .align-bottom{align-items:flex-end}

body.in-termokryt-na-mieru #vyrivky-form .cell,
body.in-termokryt-na-mieru #vyrivky-form [class*="col-xs-"],
body.in-termokryt-na-mieru #vyrivky-form [class*="col-md-"]{
  position:relative;
  min-width:0;
  max-width:100%;
  flex:0 0 100%;
  padding:10px;
}

body.in-termokryt-na-mieru #vyrivky-form .col-xs-12{width:100%;flex-basis:100%}
body.in-termokryt-na-mieru #vyrivky-form .small-4{width:33.333%;flex:0 0 33.333%}
body.in-termokryt-na-mieru #vyrivky-form .small-8{width:66.666%;flex:0 0 66.666%}

@media(min-width:768px){
  body.in-termokryt-na-mieru #vyrivky-form .col-md-3{width:25%;flex-basis:25%}
  body.in-termokryt-na-mieru #vyrivky-form .col-md-4{width:33.333%;flex-basis:33.333%}
  body.in-termokryt-na-mieru #vyrivky-form .col-md-6{width:50%;flex-basis:50%}
  body.in-termokryt-na-mieru #vyrivky-form .col-md-8{width:66.666%;flex-basis:66.666%}
  body.in-termokryt-na-mieru #vyrivky-form .col-md-12{width:100%;flex-basis:100%}
}

/* Jednotlivé části formuláře. */
body.in-termokryt-na-mieru #vyrivky-form .service-form{
  width:100%;
  margin:0 0 24px!important;
  padding:clamp(20px,3vw,36px) 0 clamp(30px,4vw,48px)!important;
  overflow:hidden;
  border:0!important;
  border-bottom:1px solid var(--tk-line)!important;
  border-radius:0!important;
  background:transparent;
  box-shadow:none;
}

body.in-termokryt-na-mieru #vyrivky-form h2{
  margin:0 0 12px;
  color:var(--tk-ink);
  font-size:clamp(25px,2.6vw,36px);
  font-weight:800;
  line-height:1.16;
  letter-spacing:-.025em;
}

body.in-termokryt-na-mieru #vyrivky-form h3{
  margin:12px 0;
  color:var(--tk-ink);
  font-size:22px;
  font-weight:800;
}

body.in-termokryt-na-mieru #vyrivky-form p{
  color:var(--tk-copy);
  font-size:16px;
  line-height:1.65;
}

body.in-termokryt-na-mieru #vyrivky-form hr{
  margin:24px 0;
  border:0;
  border-top:1px solid var(--tk-line);
}

/* Obrázky dostanou jednotný bílý podklad – původní bílé obdélníky splynou. */
body.in-termokryt-na-mieru #vyrivky-form img{
  display:block;
  width:auto;
  max-width:100%;
  height:auto;
  max-height:430px;
  margin:0 auto 14px;
  object-fit:contain;
  border-radius:16px;
  background:var(--tk-white);
}

body.in-termokryt-na-mieru #vyrivky-form iframe{
  display:block;
  width:100%!important;
  max-width:100%;
  height:auto!important;
  aspect-ratio:16/9;
  border-radius:18px;
  box-shadow:0 10px 28px rgba(31,38,48,.12);
}

body.in-termokryt-na-mieru #vyrivky-form .grid-container>
.grid-x:first-child .service-form .text-center>div:has(iframe){
  width:80%!important;
  max-width:1000px!important;
  margin:24px auto!important;
}

/* Úvodní pás log je záměrně menší než ostatní ilustrační obrázky. */
body.in-termokryt-na-mieru #vyrivky-form .grid-container>
.grid-x:first-child .service-form .text-center>img{
  width:80%;
  max-width:1000px;
}

/* Volby s obrázky fungují jako klidné, zarovnané karty. */
body.in-termokryt-na-mieru #vyrivky-form .service-form .text-center{
  display:flex;
  flex-wrap:wrap;
  align-content:flex-start;
  align-items:center;
  justify-content:center;
  column-gap:10px;
  padding:16px;
  border-radius:18px;
  background:var(--tk-white);
  text-align:center;
}

body.in-termokryt-na-mieru #vyrivky-form .service-form .text-center img{
  width:100%;
  flex:0 0 100%;
}

/* Kompaktní rozměry jednotlivých obrázkových voleb. */
body.in-termokryt-na-mieru #vyrivky-form .text-center:has(input[name="type"]) img{
  width:62%!important;
  max-height:245px;
}

body.in-termokryt-na-mieru #vyrivky-form .text-center:has(input[name="whirlpoolshape"]) img{
  width:45%!important;
  max-height:125px;
}

body.in-termokryt-na-mieru #vyrivky-form .text-center:has(input[name="buckletype"]) img,
body.in-termokryt-na-mieru #vyrivky-form .text-center:has(input[name="buckletypeswim"]) img{
  width:46%!important;
  max-height:175px;
}

body.in-termokryt-na-mieru #vyrivky-form .text-center:has(input[name="whirlpoolshape"]),
body.in-termokryt-na-mieru #vyrivky-form .text-center:has(input[name="buckletype"]),
body.in-termokryt-na-mieru #vyrivky-form .text-center:has(input[name="buckletypeswim"]){
  padding:7px 10px;
}

body.in-termokryt-na-mieru #vyrivky-form .text-center:has(input[name="folds"]) img,
body.in-termokryt-na-mieru #vyrivky-form .text-center:has(input[name="foldtype"]) img,
body.in-termokryt-na-mieru #vyrivky-form .text-center:has(input[name="parts"]) img{
  width:78%;
  max-height:260px;
}

body.in-termokryt-na-mieru #vyrivky-form .text-center:has(.input-group)+.text-center img,
body.in-termokryt-na-mieru #vyrivky-form .col-md-6.text-center>img[alt="virivka"]{
  max-height:300px;
}

body.in-termokryt-na-mieru #vyrivky-form input[type="radio"],
body.in-termokryt-na-mieru #vyrivky-form input[type="checkbox"]{
  width:21px;
  height:21px;
  margin:2px 3px 2px 0;
  flex:0 0 21px;
  accent-color:var(--tk-orange)!important;
  cursor:pointer;
}

body.in-termokryt-na-mieru #vyrivky-form input[type="radio"]:checked,
body.in-termokryt-na-mieru #vyrivky-form input[type="checkbox"]:checked{
  accent-color:var(--tk-orange)!important;
}

body.in-termokryt-na-mieru #vyrivky-form input[type="radio"]:checked+label::before,
body.in-termokryt-na-mieru #vyrivky-form input[type="checkbox"]:checked+label::before{
  border-color:var(--tk-orange)!important;
  background-color:var(--tk-orange)!important;
}

body.in-termokryt-na-mieru #vyrivky-form input[type="radio"]+label,
body.in-termokryt-na-mieru #vyrivky-form input[type="checkbox"]+label{
  margin:0;
  color:var(--tk-ink);
  font-size:16px;
  font-weight:800;
  cursor:pointer;
}

/* Standardní a zimní provedení mají shodnou, stabilní strukturu. */
body.in-termokryt-na-mieru #vyrivky-form .coverstandard>.text-center{
  display:grid!important;
  grid-template-columns:1fr;
  align-items:center;
  row-gap:8px;
  padding:12px 20px 18px;
  position:relative;
}

body.in-termokryt-na-mieru #vyrivky-form .coverstandard>.text-center>br{display:none}

body.in-termokryt-na-mieru #vyrivky-form .coverstandard>.text-center>img{
  width:82%!important;
  grid-column:1;
  justify-self:center;
  max-height:260px;
  margin:0 auto 8px;
}

body.in-termokryt-na-mieru #vyrivky-form .coverstandard>.text-center>input[type="radio"]{
  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;
  clip-path:inset(50%)!important;
  white-space:nowrap!important;
}

body.in-termokryt-na-mieru #vyrivky-form .coverstandard>.text-center>label{
  grid-column:1;
  justify-self:center;
  display:inline-flex;
  align-items:center;
  gap:9px;
  font-size:17px;
}

body.in-termokryt-na-mieru #vyrivky-form .coverstandard>.text-center>label::before{
  content:"";
  display:grid;
  place-items:center;
  width:21px;
  height:21px;
  flex:0 0 21px;
  border:1px solid #cfd5df;
  border-radius:4px;
  background:#fff;
  color:#171717;
  font-size:15px;
  font-weight:900;
  line-height:1;
  box-sizing:border-box;
}

body.in-termokryt-na-mieru #vyrivky-form .coverstandard>.text-center>input[type="radio"]:checked+label::before{
  content:"";
  border-color:var(--tk-orange)!important;
  background:var(--tk-orange)!important;
}

body.in-termokryt-na-mieru #vyrivky-form .coverstandard>.text-center>input[type="radio"]:focus-visible+label{
  outline:2px solid var(--tk-orange);
  outline-offset:4px;
  border-radius:3px;
}

body.in-termokryt-na-mieru #vyrivky-form .coverstandard>.text-center>p{
  grid-column:1;
  width:min(100%,440px);
  justify-self:center;
  min-height:48px;
  margin:0 auto;
  text-align:center;
  font-size:15px;
  line-height:1.5;
}

/* Textová a číselná pole. */
body.in-termokryt-na-mieru #vyrivky-form label{
  color:#343840;
  font-size:15px;
  font-weight:700;
}

body.in-termokryt-na-mieru #vyrivky-form input[type="text"],
body.in-termokryt-na-mieru #vyrivky-form input[type="email"],
body.in-termokryt-na-mieru #vyrivky-form input[type="number"],
body.in-termokryt-na-mieru #vyrivky-form textarea,
body.in-termokryt-na-mieru #vyrivky-form select{
  width:100%;
  min-height:50px;
  margin:7px 0 10px;
  padding:12px 15px;
  border:1px solid #d8dbe0;
  border-radius:12px;
  outline:0;
  background:#fff;
  color:var(--tk-ink);
  font:inherit;
  font-size:16px;
  box-shadow:none;
  transition:border-color .2s ease,box-shadow .2s ease;
}

/* Číselná hodnota a jednotka tvoří jeden kompaktní celek. */
body.in-termokryt-na-mieru #vyrivky-form .input-group{
  width:100%;
  max-width:460px;
  margin:7px 0 10px;
  display:flex!important;
  flex-flow:row wrap;
  align-items:stretch;
}

body.in-termokryt-na-mieru #vyrivky-form .input-group>.input-group-field{
  width:calc(100% - 58px)!important;
  min-width:0;
  flex:1 1 auto;
  margin:0!important;
  border-radius:12px 0 0 12px;
}

body.in-termokryt-na-mieru #vyrivky-form .input-group>.input-group-label{
  min-width:58px;
  padding:0 14px;
  display:flex;
  align-items:center;
  justify-content:center;
  border:1px solid #d8dbe0;
  border-left:0;
  border-radius:0 12px 12px 0;
  background:var(--tk-soft);
  color:#4f5560;
  font-size:15px;
  font-weight:800;
}

body.in-termokryt-na-mieru #vyrivky-form .input-group>span:not(.input-group-label){
  flex:0 0 100%;
}

body.in-termokryt-na-mieru #vyrivky-form textarea{min-height:130px;resize:vertical}

body.in-termokryt-na-mieru #vyrivky-form input:focus,
body.in-termokryt-na-mieru #vyrivky-form textarea:focus,
body.in-termokryt-na-mieru #vyrivky-form select:focus{
  border-color:var(--tk-orange);
  box-shadow:0 0 0 4px rgba(247,170,70,.18);
}

/* Výchozí validační věty se nezobrazují před interakcí. */
body.in-termokryt-na-mieru #vyrivky-form .form-error{display:none}
body.in-termokryt-na-mieru #vyrivky-form input.error~.form-error,
body.in-termokryt-na-mieru #vyrivky-form input[aria-invalid="true"]~.form-error{
  display:block;
  width:100%;
  margin-top:6px;
  color:#b42318;
  font-size:14px;
  font-weight:700;
}

body.in-termokryt-na-mieru #vyrivky-form .main-data>.grid-x:nth-child(2)>.cell>.grid-x{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:2px 16px;
}

/* Sekce Detaily: počty držadel a přezek vedle sebe, bez prázdných ploch. */
body.in-termokryt-na-mieru #vyrivky-form #hottube-details-other{
  margin:4px 0 22px;
  padding:18px;
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:0 22px;
  border:1px solid var(--tk-line);
  border-radius:16px;
  background:var(--tk-soft);
}

body.in-termokryt-na-mieru #vyrivky-form #hottube-details-other>.grid-x{
  width:auto;
}

body.in-termokryt-na-mieru #vyrivky-form #hottube-details-other>.grid-x:nth-child(1){grid-column:1;grid-row:1}
body.in-termokryt-na-mieru #vyrivky-form #hottube-details-other>.grid-x:nth-child(2){grid-column:1;grid-row:2}
body.in-termokryt-na-mieru #vyrivky-form #hottube-details-other>.grid-x:nth-child(3){display:none}
body.in-termokryt-na-mieru #vyrivky-form #hottube-details-other>.grid-x:nth-child(4){grid-column:2;grid-row:1}
body.in-termokryt-na-mieru #vyrivky-form #hottube-details-other>.grid-x:nth-child(5){grid-column:2;grid-row:2}
body.in-termokryt-na-mieru #vyrivky-form #hottube-details-other>.grid-x:nth-child(6){display:none}

body.in-termokryt-na-mieru #vyrivky-form #hottube-details-other .col-md-6{
  width:100%;
  flex-basis:100%;
}

body.in-termokryt-na-mieru #vyrivky-form #hottube-details-other .text-center{
  justify-content:flex-start;
  padding:7px;
  text-align:left;
}

body.in-termokryt-na-mieru #vyrivky-form #hottube-details-other .input-group{
  max-width:none;
  margin-bottom:0;
}

body.in-termokryt-na-mieru #vyrivky-form input[type="submit"]{
  width:100%;
  min-height:56px;
  margin-top:12px;
  border:0;
  border-radius:999px;
  background:var(--tk-orange);
  color:#171717;
  font:inherit;
  font-size:17px;
  font-weight:800;
  box-shadow:0 9px 22px rgba(247,170,70,.24);
  cursor:pointer;
  transition:background .2s ease,transform .2s ease;
}

body.in-termokryt-na-mieru #vyrivky-form input[type="submit"]:hover{
  background:var(--tk-orange-hover);
  transform:translateY(-1px);
}

body.in-termokryt-na-mieru #vyrivky-form.is-submitted>:not(.tk-submit-success){display:none!important}

body.in-termokryt-na-mieru #vyrivky-form .tk-submit-success{
  min-height:560px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  padding:56px 24px;
  text-align:center;
}

body.in-termokryt-na-mieru #vyrivky-form .tk-submit-success__icon{
  display:grid;
  place-items:center;
  width:68px;
  height:68px;
  margin-bottom:22px;
  border-radius:50%;
  background:var(--tk-orange);
  color:#171717;
  font-size:34px;
  font-weight:900;
}

body.in-termokryt-na-mieru #vyrivky-form .tk-submit-success h2{
  margin:0 0 12px!important;
  padding:0!important;
  font-size:clamp(30px,4vw,48px)!important;
  text-align:center!important;
}

body.in-termokryt-na-mieru #vyrivky-form .tk-submit-success p{
  margin:0 0 30px;
  color:var(--tk-muted);
  font-size:18px;
}

body.in-termokryt-na-mieru #vyrivky-form .tk-submit-success__actions{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:12px;
}

body.in-termokryt-na-mieru #vyrivky-form .tk-submit-success__back,
body.in-termokryt-na-mieru #vyrivky-form .tk-submit-success__home{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:52px;
  padding:12px 25px;
  border:1px solid #171717;
  border-radius:999px;
  font:inherit;
  font-size:16px;
  font-weight:800;
  text-decoration:none!important;
  cursor:pointer;
}

body.in-termokryt-na-mieru #vyrivky-form .tk-submit-success__back{
  background:var(--tk-orange);
  border-color:var(--tk-orange);
  color:#171717;
}

body.in-termokryt-na-mieru #vyrivky-form .tk-submit-success__home{
  background:#171717;
  color:#fff;
}

@media(max-width:767px){
  body.in-termokryt-na-mieru .pageArticleDetail>header{margin-bottom:16px}

  body.in-termokryt-na-mieru #vyrivky-form{
    margin-bottom:38px!important;
    padding:14px;
    border-radius:20px;
  }

  body.in-termokryt-na-mieru #vyrivky-form .service-form{
    margin-bottom:15px!important;
    padding:17px 0 26px!important;
    border-radius:0!important;
  }

  body.in-termokryt-na-mieru #vyrivky-form .cell,
  body.in-termokryt-na-mieru #vyrivky-form [class*="col-xs-"],
  body.in-termokryt-na-mieru #vyrivky-form [class*="col-md-"]{
    width:100%;
    flex-basis:100%;
    padding:7px;
  }

  body.in-termokryt-na-mieru #vyrivky-form .service-form .text-center{padding:10px}
  body.in-termokryt-na-mieru #vyrivky-form iframe{height:auto!important;aspect-ratio:16/9}

  body.in-termokryt-na-mieru #vyrivky-form .text-center:has(input[name="type"]) img,
  body.in-termokryt-na-mieru #vyrivky-form .text-center:has(input[name="buckletype"]) img,
  body.in-termokryt-na-mieru #vyrivky-form .text-center:has(input[name="buckletypeswim"]) img{
    width:72%;
    max-height:240px;
  }

  body.in-termokryt-na-mieru #vyrivky-form .text-center:has(input[name="whirlpoolshape"]) img{
    width:52%!important;
    max-height:135px;
  }

  body.in-termokryt-na-mieru #vyrivky-form .text-center:has(input[name="buckletype"]) img,
  body.in-termokryt-na-mieru #vyrivky-form .text-center:has(input[name="buckletypeswim"]) img{
    width:56%!important;
    max-height:170px;
  }

  body.in-termokryt-na-mieru #vyrivky-form .grid-container>
  .grid-x:first-child .service-form .text-center>div:has(iframe),
  body.in-termokryt-na-mieru #vyrivky-form .grid-container>
  .grid-x:first-child .service-form .text-center>img{
    width:100%!important;
  }

  body.in-termokryt-na-mieru #vyrivky-form #hottube-details-other{
    grid-template-columns:1fr;
    gap:5px;
    padding:13px;
  }

  body.in-termokryt-na-mieru #vyrivky-form #hottube-details-other>.grid-x:nth-child(1),
  body.in-termokryt-na-mieru #vyrivky-form #hottube-details-other>.grid-x:nth-child(2),
  body.in-termokryt-na-mieru #vyrivky-form #hottube-details-other>.grid-x:nth-child(4),
  body.in-termokryt-na-mieru #vyrivky-form #hottube-details-other>.grid-x:nth-child(5){
    grid-column:1;
    grid-row:auto;
  }

  body.in-termokryt-na-mieru #vyrivky-form #hottube-details-other>.grid-x:nth-child(4){margin-top:12px}

  body.in-termokryt-na-mieru #vyrivky-form .main-data>.grid-x:nth-child(2)>.cell>.grid-x{
    grid-template-columns:1fr;
    gap:0;
  }

  body.in-termokryt-na-mieru #vyrivky-form .tk-submit-success{
    min-height:440px;
    padding:38px 14px;
  }

  body.in-termokryt-na-mieru #vyrivky-form .tk-submit-success__actions{
    width:100%;
    flex-direction:column;
  }
}