* {
  box-sizing: border-box;
}

.usg-reservation-form {
  font-family: 'Roboto', sans-serif;
  max-width: 600px;
  margin: 0 auto;
  padding: 20px;
  background: #fff;
  border-radius: 12px;
  /* box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05); */
}

.usg-reservation-form h2,
.usg-reservation-form h3 {
  color: #a51050;
  font-size: 1.4em;
  margin-top: 1.5em;
  margin-bottom: 0.5em;
  text-transform: none;
}

.usg-reservation-form small {
  display: block;
  font-size: 13px;
  line-height: 1.2rem;
}

.usg-reservation-form label,
#usg-summary label {
  display: block;
  font-weight: 500;
  margin-top: 1em;
  margin-bottom: 0.25em;
  color: #333;
  font-size: 14px;
}

.usg-reservation-form .label-bigger {
  font-size: 18px;
  font-weight: bold;
}

.usg-reservation-form .required {
  vertical-align: super;
  color: red;
}

.usg-reservation-form input,
.usg-reservation-form select,
.usg-reservation-form textarea {
  max-width: unset;
  width: 100%;
  height: 41px;
  padding: 0px 3px !important;
  border: 1px solid #ccc;
  background-color: #fff;
  transition: border-color 0.2s ease;
  color: #013656;
  font-size: 15px;
  font-family: 'Inter', sans-serif;
  line-height: 1.3;
  font-weight: 400;
}

.usg-reservation-form input:focus,
.usg-reservation-form select:focus,
.usg-reservation-form textarea:focus {
  border-color: #f3a6c8;
  outline: none;
}

.usg-reservation-form textarea {
  min-height: 80px;
  resize: vertical;
}

/***** MAMKRCOVEZILI.SK *****/
.style-mamkrcovezili a,
.style-mamkrcovezili a:visited {
  color: #1982d1;
}

.style-mamkrcovezili.usg-reservation-form button,
.style-mamkrcovezili #usg-summary button {
  color: #fff;
  border: 0;
  cursor: pointer;
  font-weight: 400;
  font-size: 21px;
  padding: 20px 30px;
  background: rgb(229, 26, 75);
  background: linear-gradient(313deg, rgba(229, 26, 75, 1) 0%, rgba(255, 110, 126, 1) 100%);
  -webkit-transition: background .3s linear;
  -ms-transition: background .3s linear;
  transition: background .3s linear;
}

.style-mamkrcovezili.usg-reservation-form button.button-sm,
.style-mamkrcovezili #usg-summary button.button-sm {
  font-size: 14px;
  padding: 14px 22px;
}

.style-mamkrcovezili.usg-reservation-form button:hover,
.style-mamkrcovezili #usg-summary button:hover {
  background: rgb(229, 26, 75);
  background: linear-gradient(313deg, rgba(255, 110, 126, 1) 0%, rgba(229, 26, 75, 1) 100%);
  -webkit-transition: background .3s linear;
  -ms-transition: background .3s linear;
  transition: background .3s linear;
  color: white;
}
/***/

/***** PREŠOV *****/
.style-presov a,
.style-presov a:visited {
  color: #1982d1;
}

.style-presov.usg-reservation-form button,
.style-presov #usg-summary button {
  color: black !important;
  background-color: #f3a6c8 !important;
  transition-duration: .3s;
  border: 0 !important;
  padding: 13px 37px;
  font-size: 22px;
  font-weight: 700 !important;
  border-radius: 12px !important;
  text-decoration: none;
  margin-top: 25px;
  background-image: none !important;
}

.style-presov.usg-reservation-form button.button-sm,
.style-presov #usg-summary button.button-sm {
  font-size: 14px;
  padding: 14px 22px;
}

.style-presov.usg-reservation-form button:hover,
.style-presov #usg-summary button:hover {
  background: #d43377 !important;
  color: white !important;
  transition-duration: 0.3s;
  cursor: pointer;
}
/***/

#usg-summary {
  background: #fafafa;
  border-radius: 12px;
  padding: 20px;
  margin-top: 20px;
}

.usg-reservation-form .summary-content p {
  margin: 0.5em 0;
  font-size: 1em;
  color: #333;
}

.usg-reservation-form input[type="checkbox"] {
  width: auto;
  height: auto;
  margin-right: 8px;
  vertical-align: middle;
}

@media screen and (max-width: 480px) {
  .usg-reservation-form {
    padding: 15px;
  }

  .usg-reservation-form button,
  #usg-summary button {
    width: 100%;
  }
}

.flatpickr-day.selected,
.flatpickr-day.startRange,
.flatpickr-day.endRange,
.flatpickr-day.selected.inRange,
.flatpickr-day.startRange.inRange,
.flatpickr-day.endRange.inRange,
.flatpickr-day.selected:focus,
.flatpickr-day.startRange:focus,
.flatpickr-day.endRange:focus,
.flatpickr-day.selected:hover,
.flatpickr-day.startRange:hover,
.flatpickr-day.endRange:hover,
.flatpickr-day.selected.prevMonthDay,
.flatpickr-day.startRange.prevMonthDay,
.flatpickr-day.endRange.prevMonthDay,
.flatpickr-day.selected.nextMonthDay,
.flatpickr-day.startRange.nextMonthDay,
.flatpickr-day.endRange.nextMonthDay {
  background: #f3a6c8;
  -webkit-box-shadow: none;
  box-shadow: none;
  color: #fff;
  border-color: #f3a6c8;
}

.time-options {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 0.5rem;
}

.time-options input[type="radio"] {
  display: none;
}

.time-options label.time-button {
  padding: 0.5rem 1rem;
  background-color: #f2f2f2;
  border: 1px solid #ccc;
  border-radius: 6px;
  cursor: pointer;
  user-select: none;
  transition: all 0.2s ease-in-out;
}

.time-options input[type="radio"]:checked + label {
  background-color: #f3a6c8;
  color: white;
  border-color: #f3a6c8;
}

/* Základný layout */
.flatpickr-calendar {
  border: none;
  /* font-family: "Inter", sans-serif; */
  font-family: inherit;
  font-size: 16px;
  width: 100% !important;
  max-width: 100% !important;
  box-shadow: none !important; /* odstráni tieň */
  background: transparent !important; /* odstráni pozadie */
  border: none !important;
}

/* Zabezpeč, aby vnútro kalendára malo správne rozloženie */
.flatpickr-innerContainer {
  width: 100% !important;
}

/* Voliteľne — zamedz overflow */
.flatpickr-calendar.open {
  overflow: hidden;
}

.flatpickr-months .flatpickr-month {
  font-weight: bold;
  font-size: 18px;
  text-align: center;
}

.flatpickr-months {
  margin-bottom: 10px;
}

.flatpickr-current-month {
  padding: 5px 0 0 0;
}

.flatpickr-weekday {
  font-weight: 600;
  color: #000;
}

/* Skryť dni mimo aktuálneho mesiaca (predchádzajúci / nasledujúci) */
.flatpickr-day.prevMonthDay,
.flatpickr-day.nextMonthDay {
  visibility: hidden !important;
  pointer-events: none !important;
}

/* Všetky dni */
.flatpickr-day {
  border-radius: 0;
  width: 40px;
  height: 40px;
  line-height: 40px;
  margin: 2px;
  font-weight: 500;
}

/* Aktuálne vybraný deň (tmavý hnedý) */
.flatpickr-day.selected,
.flatpickr-day.startRange,
.flatpickr-day.endRange {
  background: #a51050;
  background: #f3a6c8;
  color: white;
  font-weight: bold;
}

/* Povolené dni (svetlo hnedé) */
.flatpickr-day.enabled {
  background-color: #EBDDD8;
  color: #000;
}

/* Hover efekt */
.flatpickr-day:hover {
  background-color: #c7b3ac;
  color: #000;
  cursor: pointer;
}

/* Dni zakázané */
.flatpickr-day.disabled {
  color: #e0e0e0;
  background: transparent;
  cursor: not-allowed;
}

/* Zabezpeč šírku aj pre mesiac a dni */
.flatpickr-days,
.flatpickr-months,
.flatpickr-weekdays,
.dayContainer {
  width: 100% !important;
  max-width: unset;
}

/* Každý deň nech sa roztiahne na rovnú šírku */
.flatpickr-day {
  flex: 1 1 12.5%;
  max-width: 12.5%;
}

#reservation-loader {
  position: fixed;
  inset: 0;
  display: none;
  place-items: center;
  background: rgba(0,0,0,.35);
  z-index: 9999;
  backdrop-filter: blur(1px);
}

#reservation-loader.active {
  display: grid;
}

#reservation-loader .spinner {
  width: 48px;
  height: 48px;
  border: 4px solid rgba(255,255,255,.35);
  border-top-color: #fff;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

.flatpickr-current-month {
  font-size: 18px;
}

.flatpickr-months .flatpickr-month {
  height: 55px;
}

/* aby "country picker" input mal 100% šírku ako ostatné polia */
#usg-form-wrapper .iti {
  width: 100%;
}

#usg-form-wrapper .iti input {
  width: 100%;
}

/* === intl-tel-input FIX: téma štýluje country picker ako tlačidlo === */
#usg-form-wrapper .iti {
  width: 100%;
}

/* 1) Zruš štýl tlačidla/selektora krajiny (knižnica to generuje sama) */
#usg-form-wrapper .iti__selected-country,
#usg-form-wrapper .iti__selected-flag {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  min-height: 0 !important;
  height: 100% !important;
  font: inherit !important;
  line-height: inherit !important;
  color: inherit !important;
}

/* 2) Zarovnanie vlajky doľava + vertikálne do stredu inputu */
#usg-form-wrapper .iti__flag-container {
  left: 12px !important;
  top: 0 !important;
  bottom: 0 !important;
  display: flex !important;
  align-items: center !important;
}

/* 3) Urob miesto v inpute, aby text nezačínal pod vlajkou */
#usg-form-wrapper .iti input#phone {
  padding-left: 72px !important;
}

/* 4) Odstráň obrovské +421 (ak ho nechceš vedľa vlajky vôbec) */
#usg-form-wrapper .iti__selected-dial-code {
  display: none !important;
}

/* 5) Dropdown zoznam krajín nech nie je prekrytý */
#usg-form-wrapper .iti__country-list {
  z-index: 999999 !important;
}

/* === intl-tel-input: skryť lupu v search inpute v dropdown liste === */

/* ak je lupa ako samostatný element (novšie verzie) */
#usg-form-wrapper .iti__search-icon,
#usg-form-wrapper .iti__search-input-container svg {
  display: none !important;
}

/* ak je lupa ako pseudo-element */
#usg-form-wrapper .iti__search-input-container::before {
  content: none !important;
  display: none !important;
}

/* ak je lupa ako background na inpute (téma alebo knižnica) */
#usg-form-wrapper .iti__search-input {
  background-image: none !important;
  padding-left: 12px !important;
}

#usg-form-wrapper .iti__search-input-container button,
#usg-form-wrapper .iti__search-input-container .iti__search-input-clear {
  display: none !important;
}

#usg-form-wrapper .iti__search-input::-webkit-search-cancel-button {
  display: none !important;
}

/* ===== intl-tel-input: dropdown SEARCH (lupa + X) ===== */

/* wrapper search inputu */
#usg-form-wrapper .iti__search-input-wrapper {
  position: relative !important;
}

/* schovaj lupu */
#usg-form-wrapper .iti__search-icon {
  display: none !important;
}

/* keď je lupa preč, zruš veľký padding vľavo + sprav miesto vpravo pre X */
#usg-form-wrapper .iti__search-input {
  padding-left: 12px !important;
  padding-right: 44px !important;
  background-image: none !important;
}

/* X (clear) - zruš "button" štýl z témy a sprav ho malé, bez pozadia */
#usg-form-wrapper .iti__search-clear {
  position: absolute !important;
  right: 10px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  width: 28px !important;
  height: 28px !important;
  padding: 0 !important;
  margin: 0 !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* ak svg v X má "pozadie" (krúžok), tak ho zruš */
#usg-form-wrapper .iti__search-clear-bg {
  fill: transparent !important;
}

/* aj na hover nech nefarbí pozadie */
#usg-form-wrapper .iti__search-clear:hover,
#usg-form-wrapper .iti__search-clear:focus-visible {
  background: transparent !important;
}