/** Light color-scheme **/
:root {
  color-scheme: light;

  --cc-bg: #fff;
  --cc-main-bg: #F7F7F7;
  --cc-second-bg: #827A74;

  --cc-text: #2d4156;
  --cc-primary-text: #6a625a;
  --cc-second-text: #707070;

  --cc-input-border: #919ea6;
  --cc-button-border: #c1c1bd;

  --cc-main-ahref: #cfd5db;
  --cc-main-ahref-hover: #919EA6;

  --fs--3: clamp(0.3095rem, 0.1685rem + 0.5128vi, 0.5787rem);
  --fs--2: clamp(0.4376rem, 0.3031rem + 0.4892vi, 0.6944rem);
  --fs--1: clamp(0.6188rem, 0.5064rem + 0.4086vi, 0.8333rem);
  --fs-0: clamp(0.875rem, 0.8095rem + 0.2381vi, 1rem);
  --fs-1: clamp(1.2rem, 1.2568rem + -0.071vi, 1.2373rem);
  --fs-2: clamp(1.44rem, 1.9116rem + -0.5895vi, 1.7495rem);
  --fs-3: clamp(1.728rem, 2.8644rem + -1.4205vi, 2.4738rem);
  --fs-4: clamp(2.0736rem, 4.2439rem + -2.7129vi, 3.4979rem);

  --br-2: 2px;
  
  --ui-max-width: 980px;

  --ui-main-padding: 0rem .75rem;
  --ui-wrappers-padding: .75rem 0rem;
  --ui-wrapper-padding: 1.25rem;
}

@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  font-family: -apple-system,system-ui,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  font-size: var(--fs-0);
  font-weight: 400;
  line-height: 1.5;
  color: var(--cc-text);
  margin-bottom: 5rem;
}
  main {
    background-color: var(--cc-bg);
    width: min(var(--ui-max-width), 100%);
    margin-inline: auto;
    padding: var(--ui-main-padding);
  }
  header {
    background-color: var(--cc-main-bg);
    padding: var(--ui-wrapper-padding);
  }

  section {
    width: 100%;
    margin-inline: auto;
  }
    article.head-content__wrapper {
      background-color: var(--cc-bg);
    }
    section.form__wrapper {
      background-color: var(--cc-main-bg);
      padding: var(--ui-wrapper-padding);
    }

h1, h2, h3, h4, h5 {
  margin-bottom:.5rem 0;
  font-family:inherit;
  font-weight:500;
  line-height:1.1;
  color:var(--cc-primary-text);
}

.h1,
h1 {
  font-size:var(--fs-4);
}
.h2,
h2 {
  font-size:var(--fs-3);
}
.h3,
h3 {
  font-size:var(--fs-2);
}
.h4,
h4 {
  font-size:var(--fs-1);
}
.h5,
h5 {
  font-size:var(--fs-0);
}

input, textarea {
  min-width: 0;
}

img {
  max-width: 100%;
  display: block;
}

a {
  color: var(--cc-main-ahref-hover);
}

p {
  font-size: var(--fs--1);
  color: var(--cc-text);
}

hr.cleaner {
  border: 0;
  margin: 0;
  padding: 0;
}

.information-document__wrapper {
  display: none;
  font-size: var(--fs--1);
  margin: 0 0 1.75rem 0;
  border: 1px solid var(--cc-button-border);
}
  .information-document__inner {
    display: flex;
  }
    .information-document__inner div:first-child {
      flex-basis: 75%;
    }
    .information-document__inner div:nth-child(2) {
      flex-basis: 25%;
    }

    .information-document__inner a {
      color: #d9534f;
      background-image: none;
      background-color: transparent;
      border-color: #d9534f;
      font-size: var(--fs--2);
      text-decoration: none;
      text-align: right;
    }


.helper-content__wrapper.ui-visibility--true {
  display: block;
}
.helper-content__wrapper.ui-visibility--true .helper-content__placeholder {
  padding: var(--ui-wrapper-padding);
}
/* HEADER */
  header > div {
    width: 100%;
    display: flex;
    justify-content: space-between;
  }
  .contact-header__wrapper i {
    padding-left: .5rem;
  }
  .head-content__wrapper .item__wrapper.elem--button {
    margin: 0;
  }
  .header-logo {
    width: 50%;
    height: auto;
  }
  .lang-menu__wrapper {
    min-width: fit-content;
  }
/* HEADER/ */

/* <NAV> */
  nav {
    margin: 1.75rem auto 4rem auto;
    padding: 10px 0px 0px 0px;
    width: 100%;
    max-width: var(--ui-max-width);
    text-align: left;
  }
    .nav-bar_wrapper {
      margin:0px 50px 0px 50px; 
      padding:18px 0px 0px 0px;
      border-top:1px solid #66625f;
      position:relative;
    }
    .tc_step {
      position:absolute;
      top:-2px;
      left:0px;
      height:3px;
      background-color:var(--cl-product-red);
      padding:0px;
      margin:0px;
    }
    .tc_step_marker {
      position:absolute;
      top:-20px;
      left:0px;
      border:3px solid #6a625a;
      width:34px;
      height:34px;
      line-height:25px;
      text-align:center;
      -webkit-border-radius: 17px;
      -moz-border-radius: 17px;
      border-radius: 17px;
      font-size:20px;
      background:#f4f4f4;
      color:#6a625a;
    }
    .tc_step_marker.on {
      border:3px solid var(--cl-product-red);
      color: var(--cl-product-red);
    }
    .tc_step_marker.on a {
      color:var(--cl-product-red);
      text-decoration: none;
    }
    .tc_step_marker.tc_step1 {
      left:0%;
    }
    .tc_step_marker.tc_step2 {
      left:32%;
    }
    .tc_step_marker.tc_step3 {
      left:64%;
    }
    .tc_step_marker.tc_step4 {
      right:0%;
      left:auto;
    }
    .tc_step_marker img {
      margin:7px auto 0px auto
    }
    .tc_step_legend {
      position:relative;
      margin:15px 15px 0px 20px;
    }
    .tc_step_label {
      font-size:20px;
      color:#6a625a;
      text-align:center;
      position:absolute;
      top:0px;
      left:0%;
    }
    .tc_step_label.on {
      font-weight:bold;
    }
    .tc_step_label1 {
      left:1%;
    }
    .tc_step_label2 {
      left:29%;
    }
    .tc_step_label3 {
      left:60%;
    }
    .tc_step_label4 {
      right:1%;
      left:auto;
      text-align:right;
    }

    /* LABEL bar */
    .tc_step_label5-1 {
      left:5%;
    }
    .tc_step_label5-2 {
      left:33%;
    }
    .tc_step_label5-3 {
      left:59%;
    }
    .tc_step_label5-4 {
      right:7%;
      left:auto;
      text-align:right;
    }
    /* LABEL bar/ */

    @media (min-width: 1px) {
      .tc_step_marker.tc_step5-2 {
        left: 25%;
      }
      .tc_step_marker.tc_step5-3 {
        left: 55%
      }
      .tc_step_marker.tc_step5-4 {
        right:5%;
        left:auto;
      }
    }  

    @media(width < 767px) {
      .tc_step_legend, .tc_step_label {
        font-size: var(--fs--1);
      }
      .tc_step_marker.tc_step2 {
        left:32%;
      }
      .tc_step_marker.tc_step3 {
        left:60%;
      }
      .tc_step_label5-1 {
        left: 0;
      }
      .tc_step_label5-2 {
        left: 25%;
      }
      .tc_step_label5-3 {
        left: 46%;
      }
      .tc_step_label5-4 {
        right: 12%;
      }
    }
        
    @media (width > 768px) {
      .tc_step_marker.tc_step5-1 {
        left:5%;
      }
      .tc_step_marker.tc_step5-2 {
        left:35%;
      }
      .tc_step_marker.tc_step5-3 {
        left:65%;
      }
      .tc_step_marker.tc_step5-4 {
        right:5%;
        left:auto;
      }
    }
/* <NAV/> */

  .head-content__wrapper > p {
    color: var(--cc-primary-text);
    font-size: var(--fs--1);
    letter-spacing: .75px;
    padding: .5rem 1rem;
    line-height: 1.2;
    word-break: break-word;
  }

/* <FORM ELEMENT> */
  /* <SELECT> */
  .item--selectbox {
    overflow: hidden;
    padding: 0px 40px 0px 0px;
    margin: 0px 0px 0px 0px;
    background: white url(/Data/Images/Design/Web/120/formelements-select.png) no-repeat center right;
    display: block;
    float: left;
    border: 1px solid #b3b2b0;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    width: 100%;
    min-height: 42px;
  }

  .item--selectbox select {
    background-color: transparent;
    background-image: none;
    -webkit-appearance: none;
    border: none;
    box-shadow: none;
    margin: 0px;
    padding: 10px 10px 10px 10px !important;
    /* font-size: 17px; */
    font-family: Arial, Helvetica, sans-serif;
    display: block;
    width: 112%;
    color: var(--cc-primary-text);
    line-height: 18px;
  }
  /* <SELECT/> */

  /* <INPUT> */ 
  input[type="text"], input[type="email"], input[type="password"], input[type="number"], input[type="date"], input[type="time"], input[type="tel"], textarea, select {
    display: inline-block;
    width: 100%;
    padding: 12px 15px 10px 12px;
    margin: 0;
    font-family: Arial, sans-serif;
    font-size: var(--fs-0);
    font-weight: normal;
    line-height: 1;
    color: #6a625a;
    background-color: var(--cc-bg);
    border: 1px solid var(--cc-button-border);
    border-radius: 0;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    -moz-user-select: none;
    resize: none;
    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
    -webkit-font-smoothing: antialiased;
    -moz-font-smoothing: antialiased;
    -ms-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    outline: none;
    -webkit-transition: outline .2s ease-out;
    transition: outline .2s ease-out;
  }
  /* <INPUT/> */

  /* <INPUT DATEPICKER> */
  .rl-date_select {
    overflow: hidden;
    padding: 0px 40px 0px 0px;
    margin: 0px 0px 0px 0px;
    background: white url(../img/formelements-date.png) no-repeat center right;
    display: block;
    float: left;
    border: 1px solid #b3b2b0;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    width: 100%;
  }
  /* <INPUT DATEPICKER/> */

  /* <BUTTON> */
  button {
    display: flex;
    padding: 12px 20px 12px 16px;
    margin: 0;
    font-family: Arial, sans-serif;
    font-size: var(--fs-0);
    font-weight: bold;
    color: var(--cc-primary-text);
    background-color: #fff;
    border: 1px solid var(--cc-button-border);
    border-radius: 0;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    -moz-user-select: none;
    resize: none;
    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
    -webkit-font-smoothing: antialiased;
    -moz-font-smoothing: antialiased;
    -ms-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    outline: 0 solid transparent;
    -webkit-transition: background-color 150ms ease-out;
    transition: background-color 150ms ease-out;
    cursor: pointer;
    flex-direction: row;
    content: '';
    align-items: center;
    justify-content: left;
  }
  button:hover {
    transform: scale(1.05);
    font-weight: 800;
  }
    button img {
      height: 22px;
      margin: 0px 5px 1px 0px;
    }
  /* <BUTTON/> */

  /*<CHECKBOX> */
    .item-box__wrapper.item-checkbox input[type="checkbox"] {
      display: none;
      -webkit-appearance: none;
      appearance: none;
    }
    .item-box__wrapper.item-checkbox .box__layout label {
      padding-left: 35px;
      background-image: url('/Data/Images/Design/Web/120/checkbox.png');
      background-repeat: no-repeat;
      background-size: 32px;
      cursor: pointer;

      color: var(--cc-primary-text);
      font-size: var(--fs--1);
      line-height: 1.5;
      word-break: break-word;
      display: block;
      height: 35px;
      font-weight: 600;
      align-content: center;
    }
    .item-box__wrapper.item-checkbox .box__layout input[type="checkbox"]:checked + label {
      background-image: url('/Data/Images/Design/Web/120/checkbox-checked.png');
      background-repeat: no-repeat;
      background-size: 32px;
    }
  /*<CHECKBOX/> */

  /* <RADIO> */
    .item-box__wrapper.item-radio input[type="radio"] {
      display: none;
      -webkit-appearance: none;
      appearance: none;
    }
    .item-box__wrapper.item-radio .content label {
      padding-left: 35px;
      background-image: url('/Data/Images/Design/Web/120/radio.png');
      background-repeat: no-repeat;
      background-size: 32px;
      cursor: pointer;

      color: var(--cc-primary-text);
      font-size: var(--fs--1);
      line-height: 1.5;
      word-break: break-word;
      display: block;
      height: 35px;
      font-weight: 600;
    }
    .item-box__wrapper.item-radio .content input[type="radio"]:checked + label {
      background-image: url('/Data/Images/Design/Web/120/radio-checked.png');
      background-repeat: no-repeat;
      background-size: 32px;
    }
  /* <RADIO/> */
/* <FORM ELEMENT/> */

/* TEXT STYLE */
  .heading label,
  .heading .label {
    color: var(--cc-primary-text);
    font-size: var(--fs-0);
    letter-spacing: .75px;
    line-height: 1.5;
    word-break: break-word;
  }
  .simple-html__box h2,
  .simple-html__box h3 {
    font-size: var(--fs-1);
    font-weight: 600;
    padding-bottom: .75rem;
  }
  .simple-text__box p {
    color: var(--cc-primary-text);
    font-size: var(--fs--1);
    line-height: 1.5;
    word-break: break-word;
  }
    .text-marked {
      font-weight: 600;
    }
  .payments-mod__wrapper h5 {
    font-weight: 600;
  }
  
  .contact-text {
    color: var(--cc-primary-text);
    font-size: var(--fs--2);
    line-height: 3.5;
    word-break: break-word;
    font-weight: 300;
  }

/* TEXT STYLE/ */

/* WRAPPERS */
  .item-box__wrapper {
    width: 100%;
    margin: var(--ui-wrappers-padding);
  }  
    .box__layout {
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;
      container-type: inline-size;
      container-name: item-box;
    }
    .item-box__wrapper .heading {
      margin: auto;
      flex: 0 0 35%; /* zabírá 35% šířky */
    }
    .item-box__wrapper .content {
      flex: 1;
    }
    
  .item-box__wrapper.simple-html__box {
    border-bottom: 2px solid var(--cc-input-border);
    font-size: var(--fs-0);
    color: vr(--cc-text);
  }
  .item-box__wrapper.payments-mod__wrapper {
    display: flex;
    flex-direction: row;
    flex-basis: 50%;
  }
    .payments-mod__wrapper div {
      flex: 0 0 50%;
      padding: .5rem;
    }
  @media (width < 600px) {
    .item-box__wrapper.payments-mod__wrapper {
      flex-direction: column;
    } 
  } 
      .payment-card__wrapper {
        display: flex;
        flex-direction: column;
        gap: 1.5rem;
      }
      .payment-acc__wrapper {
        background-color: var(--cc-bg);
      }
        .payment-acc__wrapper > div {
          display: flex;
          flex-direction: row;
        }
        .payment-acc__wrapper p {
          display: flex;
          flex-direction: column;
        }
        @media (width < 600px) {
          .payment-acc__wrapper > div {
            flex-direction: column;
          } 
          .payment-acc__wrapper p {
            flex-direction: row;
            font-size: var(--fs-0);
          }
        }

  .contact-header__wrapper {
    font-size: var(--fs--2);
    text-align: right;
    color: var(--cc-primary-text);
    text-decoration: none;
  }
    .contact-header__wrapper a {
      color: var(--cc-primary-text);
      text-decoration: none;
    }

  .item-radio .content {
    display: flex;
    justify-content: start;
  }

  @media (max-width: 440px) {
    .box__layout  {
      display: flex;
      flex-direction: column;
    } 
  }

  @container item-box (width > 440px) {
    .heading {
      width: 35%;
    }
    .content {
      width: calc( 100% - 35%);
    }
  }
  @container item-box (width < 440px) {
    .heading,
    .content {
      width: 100%;
    }
  }
/* WRAPPERS/ */

/* HELPERS */
  .heading:has(.helper-icon) {
    display: flex;
    justify-content: left;
    align-items: center;
  }
  .helper-icon {
    /* background-image: url("/Data/Images/Design/Web/120/info-2-24.png");
    background-color: var(--cc-main-bg); */

    color: var(--cl-product-red);
    height: 24px;
    width: 24px;
    cursor: help;
    margin-left: .5rem;
  }

  .helper-content__wrapper {
    display: none;
    border: 2px solid var(--cc-second-bg);
    font-size: var(--fs--1);
    color: var(--cc-primary-text);
    background-color: #fff;
    font-weight: 200;
    margin-top: var(--ui-wrapper-padding);
  }

    .helper-content__placeholder {
      padding: var(--ui-wrapper-padding) var(--ui-wrapper-padding) 0 var(--ui-wrapper-padding);
    }
    .helper-button button {
      background-color: var(--cl-product-red);
      margin: 0;
    }
/* HELPERS/ */

/* low res HACK */
  @media (width < 600px) {
    header h2 {
      font-size: var(--fs-1);
    }
    .lang-menu__wrapper > a {
      font-size: var(--fs-0);
    }
    section.form__wrapper {
      padding: 0;
    }
    .information-document__inner {
      flex-direction: column;
    }
      .information-document__inner div:nth-child(2) {
        align-items: center;
        display: flex;
        flex-direction: column;
      }
    .table--column {
      min-width: 95px;
    }
    .table-static--row, .table-result--row {
      min-height: 24px;
    }
    .buy-button--action.buy-button--action {
      padding-left: 1rem;
    }
  }

  /*FOLD*/
  @media (width < 300px) {
    .nav-bar_wrapper {
      margin: 0;
    }
    .tc_step_label {
      font-size: var(--fs--2);
    }
    .table-static--row, .table-result--row {
      min-height: 55px;
    }
    .table-result--row img {
      height: 25px;
    }
  }
/* low res HACK/ */