/* ==========================================================================
   Vánoce v Hradci – Registrační formulář
   Čisté klasické CSS (Vanilla CSS) pro snadné zkopírování a použití
   ========================================================================== */

/* 1. CSS Proměnné pro snadnou úpravu barev */
:root {
  --vvh-bg-color: #242955;          /* Hluboká noční modrá pozadí */
  --vvh-gold: #FDC745;              /* Zlatá barva rámečků, nadpisů a tlačítka */
  --vvh-gold-hover: #ffbf42;        /* Světlejší zlatá při najetí myší */
  --vvh-gold-ring: rgba(251, 176, 59, 0.28); /* Jemná záře při kliknutí do pole */
  --vvh-text-white: #ffffff;        /* Bílý text instrukcí */
  --vvh-text-dark: #152345;         /* Tmavé písmo uvnitř zlatého tlačítka */
  --vvh-placeholder: rgba(226, 232, 240, 0.7); /* Barva zástupného textu */
  --vvh-error: #f87171;             /* Červená chybová barva */
  --vvh-font-family: 'Outfit', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

#clanek.regskola{padding-bottom: 40px;}

/* 2. Základní obal stránky / sekce */
.vvh-page {
  /*min-height: 100vh;*/
  background-color: var(--vvh-bg-color);
  color: var(--vvh-text-white);
  font-family: var(--vvh-font-family);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 40px 10px;
  box-sizing: border-box;
}

/* 3. Hlavní kontejner formuláře */
.vvh-container {
  width: 100%;
  max-width: 940px;
  margin: 0 auto;
  box-sizing: border-box;
}

/* 4. Hlavička formuláře dle obrázku */
.vvh-header {
  margin-bottom: 32px;
}

.vvh-title-primary {
  color: var(--vvh-gold);
  font-size: 38px;
  font-weight: 700;
  line-height: 1.15;
  margin: 0 0 4px 0;
  letter-spacing: -0.5px;
}

.vvh-title-secondary {
  color: var(--vvh-gold);
  font-size: 38px;
  font-weight: 700;
  line-height: 1.15;
  margin: 0 0 16px 0;
  letter-spacing: -0.5px;
}

.vvh-subtitle {
  color: var(--vvh-text-white);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.5;
  margin: 0;
  opacity: 0.95;
}

/* 5. Dvousloupcová mřížka formuláře */
.vvh-form {
  width: 100%;
  margin-bottom:80px;
}

.vvh-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  column-gap: 32px;
  row-gap: 24px;
}

/* 6. Skupina jednoho formulářového pole */
.vvh-form-group {
  display: flex;
  flex-direction: column;
  position: relative;
  margin-bottom: 20px;
}

.vvh-label {
  color: var(--vvh-gold);
  font-size: 24px;
  font-weight: 500;
  line-height: 34px;
  margin-bottom: 10px;
  display: block;
}

/* Vstupní box se zlatým zaobleným rámečkem a ikonou */
.vvh-input-box {
  display: flex;
  align-items: center;
  height: 87px;
  padding: 0 16px;
  background-color: var(--vvh-bg-color);
  border: 1.8px solid var(--vvh-gold);
  border-radius: 16px;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
  box-sizing: border-box;
}

.vvh-input-box:focus-within {
  border-color: #ffd67a;
  box-shadow: 0 0 0 3px var(--vvh-gold-ring);
}

.vvh-input-box.vvh-has-error {
  border-color: var(--vvh-error);
  box-shadow: 0 0 0 2px rgba(248, 113, 113, 0.3);
}

/* Ikona uvnitř vstupního pole */
.vvh-icon {
  width: 34px;
  height: auto;
  color: var(--vvh-gold);
  margin-right: 34px;
margin-left: 14px;
  flex-shrink: 0;
}
.vvh-icon-email {
  width: 41px;
}



.vvh-error-message,
.vvh-error-message-consent {
  color: var(--vvh-error) !important;
  font-size: 13px !important;
  margin-top: 6px !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
}

/* Vykřičník v kruhu před chybovou hláškou */
.vvh-error-message::before,
.vvh-error-message-consent::before {
  content: "" !important;
  display: inline-block !important;
  width: 14px !important;
  height: 14px !important;
  min-width: 14px !important;
  min-height: 14px !important;
  flex-shrink: 0 !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23f87171' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cline x1='12' y1='8' x2='12' y2='12'/%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'/%3E%3C/svg%3E") !important;
  background-size: contain !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
}

.vvh-error-message:empty,
.vvh-error-message-consent:empty {
  display: none !important;
}



/* Samotný textový input */
.vvh-input {
  width: 100%;
  background: transparent;
  border: none;
  outline: none;
  color: var(--vvh-text-white);
  font-family: inherit;
  font-size: 24px;
  line-height: 34px;
font-family: 'Hradec-Regular';
}

.vvh-input::placeholder {
  color: var(--vvh-placeholder);
}

/* 7. Spodní lišta se souhlasem a tlačítkem */
.vvh-bottom-bar {
  margin-top: 32px;
  display: flex;
  justify-content: flex-end;
}

.vvh-actions {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 20px;
}

/* Zaškrtávací pole souhlasu */
.vvh-checkbox-row {
  display: flex;
  align-items: center;
  gap: 12px;
  cursor: pointer;
  user-select: none;
}


.vvh-checkbox.vvh-checked {
  background-color: var(--vvh-bg-color) !important;
  border-color: var(--vvh-gold) !important;
  color: var(--vvh-bg-color) !important;
}

@keyframes checkmarkSlideUp {
  0% {
    background-position: center 30px; /* Začíná schovaná dole pod rámečkem */
    opacity: 0;
  }
  65% {
    background-position: center -2px; /* Mírné vyskočení nahoru (pružný efekt) */
    opacity: 1;
  }
  100% {
    background-position: center center; /* Ustálení přesně ve středu */
    opacity: 1;
  }
}




input[type="checkbox"] {
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  appearance: none !important;
  
  width: 54px !important;
  height: 54px !important;
  min-width: 54px !important;
  min-height: 54px !important;
  background-color: var(--vvh-bg-color) !important;
  border: 2px solid var(--vvh-gold) !important; /* Zlatý rámeček */
  border-radius: 8px !important;        /* Zaoblené rohy dle návrhu */
  cursor: pointer !important;
  outline: none !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  vertical-align: middle !important;
  flex-shrink: 0 !important;
  margin: 0 10px 0 0 !important;
  padding: 0 !important;
  box-sizing: border-box !important;
  transition: all 0.15s ease-in-out !important;
}

/* 2. Zvýraznění při najetí myší (hover) */
input[type="checkbox"]:hover {
  border-color: var(--vvh-gold) !important;
  box-shadow: 0 0 0 3px rgba(251, 176, 59, 0.25) !important;
}









/* 3. Zaškrtnutý stav (zlatá výplň + tmavě modrá fajfka uvnitř) */
/*
input[type="checkbox"]:checked {
  background-color: #fbb03b !important;
  border-color: #fbb03b !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23182649' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E") !important;
  background-size: 24px 24px !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
}
*/
/* Alternativa: Pokud chcete, aby pozadí zůstalo tmavé a pouze fajfka byla zlatá: */

input[type="checkbox"]:checked {
  background-color: transparent !important;
  border-color: var(--vvh-gold) !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fbb03b' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E") !important;
  background-size: 34px 34px !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  animation: checkmarkSlideUp 0.26s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards !important;
}


.vvh-checkbox-text {
  color: var(--vvh-text-white);
  font-size: 24px;
  line-height: 34px;
  font-family: 'Hradec-Regular';
}

.vvh-link {
  color: var(--vvh-gold);
  text-decoration: none;
  cursor: pointer;
  background: none;
  border: none;
  padding: 0;
  font-size: inherit;
  font-family: inherit;
}

.vvh-link:hover {
  color: #ffd67a;
}


input[type="checkbox"].vvh-has-error,
.vvh-checkbox.vvh-has-error,
.vvh-checkbox-row.vvh-has-error input[type="checkbox"],
.vvh-has-error input[type="checkbox"] {
  border-color: var(--vvh-error) !important;
  box-shadow: 0 0 0 3px rgba(248, 113, 113, 0.35) !important;
}



.vvh-submit-btn {
  background-color: var(--vvh-gold);
  color: var(--vvh-text-dark);
  font-family: inherit;
  font-size: 24px;
  font-weight: 700;
  padding: 14px 32px;
  border-radius: 9999px; /* Plně zaoblená pilulka dle obrázku */
  border: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  box-shadow: 0 4px 14px rgba(251, 176, 59, 0.25);
  transition: background-color 0.15s ease, transform 0.1s ease, box-shadow 0.15s ease;
}

.vvh-submit-btn:hover {
  background-color: var(--vvh-gold-hover);
  box-shadow: 0 6px 20px rgba(251, 176, 59, 0.35);
}

.vvh-submit-btn:active {
  transform: scale(0.98);
}

.vvh-arrow {
  font-size: 20px;
  line-height: 1;
  width:25px;height: 20px;
}

.vvh-checkbox-row {
  display: flex !important;
  flex-wrap: wrap !important; /* DŮLEŽITÉ: zalomí hlášku pod prvek */
  align-items: center !important;
}

.vvh-error-message-consent::before {margin-right:5px !important;}

.vvh-checkbox-row .vvh-error-message {
  width: 100% !important;
  flex-basis: 100% !important;
  margin-top: 8px !important;
  margin-left: 40px !important; /* Zarovnání s textem vedle zlatého čtverečku */
}


/* Chybová hláška souhlasu zarovnaná doprava */
.vvh-error-message-consent {
  color: var(--vvh-error) !important;
  font-size: 13px !important;
  margin-top: 0 !important;
  text-align: right !important; 
  align-self: flex-end !important;
  display: block !important;
  width: 100% !important;
}

.seznam-check .vvh-checkbox-row{
	margin-bottom: 10px;
}
.seznam-check .vvh-checkbox-text{
	color:var(--vvh-gold);
}
.seznam-check .vvh-checkbox-text .white{color:var(--vvh-text-white); }

/* Radioboxy termínů – ČTVERCOVÝ TVAR identický s checkboxem (čtverec, ne kolo) */
.vvh-radio,
input[type="radio"].vvh-radio,
.vvh-form input[type="radio"],
.seznam-check input[type="radio"],
.seznam-check input[type="checkbox"] {
  -webkit-appearance: none !important;
  appearance: none !important;
  width: 28px !important;
  height: 28px !important;
  min-width: 28px !important;
  min-height: 28px !important;
  border: 2px solid var(--vvh-gold, #fbb03b) !important;
  border-radius: 8px !important; /* Čtverec přesně jako checkbox, NE KOLO */
  background-color: transparent !important;
  cursor: pointer !important;
  outline: none !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: all 0.15s ease-in-out;
  flex-shrink: 0 !important;
  padding: 0;
  margin: 2px 0 0 0 !important;
  box-sizing: border-box !important;
}

.vvh-radio:hover,
input[type="radio"].vvh-radio:hover,
.seznam-check input[type="radio"]:hover,
.seznam-check input[type="checkbox"]:hover {
  border-color: #ffd67a !important;
  box-shadow: 0 0 0 3px rgba(251, 176, 59, 0.28) !important;
}

/* Zaškrtnutý stav (zlatý čtverec s tmavě modrou fajfkou) */
.vvh-radio:checked,
input[type="radio"].vvh-radio:checked,
.vvh-radio.vvh-checked,
.seznam-check input[type="radio"]:checked,
.seznam-check input[type="checkbox"]:checked {
  background-color: #fbb03b !important;
  border-color: #fbb03b !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23152345' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E") !important;
  background-size: 16px 16px !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
}

/* Chybový stav – červené zvýraznění čtverce při nezaškrtnutí */
.vvh-checkbox-row.vvh-has-error input[type="radio"],
.vvh-has-error input[type="radio"],
.seznam-check.vvh-has-error input {
  border-color: #f87171 !important;
  box-shadow: 0 0 0 3px rgba(248, 113, 113, 0.4) !important;
}








input[type="checkbox"],
.vvh-checkbox {
  flex-shrink: 0 !important;         
  margin: 2px 0 0 0 !important;      
}




.vvh-checkbox-row {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;        
  align-items: flex-start !important;  
  justify-content: flex-start !important;
  gap: 12px !important;
  cursor: pointer !important;
  user-select: none !important;
  width: 100% !important;
  max-width: 100% !important;
}


input[type="checkbox"],
.vvh-checkbox {
  flex-shrink: 0 !important;         
  margin: 2px 0 0 0 !important;      
}


.vvh-checkbox-text,
.vvh-checkbox-row span,
.vvh-checkbox-row label {
  flex: 1 1 auto !important;         
  min-width: 0 !important;
  line-height: 1.4 !important;       
  text-align: left !important;
  word-break: normal !important;
}





/* 9. Responzivní zobrazení (Mobilní telefony a tablety) */
@media (max-width: 768px) {
  
.vvh-error-message-consent {
  text-align: left !important; 
  align-self: flex-start !important;
}

  
  
  .vvh-title-primary,
  .vvh-title-secondary {
    font-size: 28px;
  }

  .vvh-grid {
    grid-template-columns: 1fr; /* Na mobilu pod sebe */
    gap: 18px;
  }

  .vvh-bottom-bar {
    justify-content: flex-start;
  }

  .vvh-actions {
    align-items: flex-start;
    width: 100%;
  }

  .vvh-submit-btn {
    width: 100%; /* Na mobilu plná šířka tlačítka pro snadný stisk */
  }
}