/* --- BAREVNÁ PALETA VYCHÁZEJÍCÍ Z LOGA --- */

:root {

  --primary: #00a0e9; /* Modrá z loga */

  --primary-dark: #0080bd; /* Tmavší modrá pro hover */

  --blue-navy: #2c3e50 --secondary: #1e1e1e; /* Tmavě černá z loga */

  --secondary-light: #2d2d2d; /* Tmavě šedá pro menu/footer */

  --bg-light: #f4f6f8; /* Jemné pozadí */

  --white: #ffffff;

  --text-color: #2c3e50;

  --text-muted: #64748b;

  --border-radius: 8px;

  --box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);

  --transition: all 0.3s ease;

}



* {

  box-sizing: border-box;

  margin: 0;

  padding: 0;

}



body {

  font-family:

    "Inter",

    -apple-system,

    BlinkMacSystemFont,

    "Segoe UI",

    Roboto,

    sans-serif;

  color: var(--text-color);

  background-color: var(--bg-light);

  line-height: 1.6;

  display: flex;

  flex-direction: column;

  min-height: 100vh;

}



a {

  text-decoration: none;

  color: inherit;

}



ul {

  list-style: none;

}

hr.divider-fade {

  border: 0;

  height: 1px;

  background: linear-gradient(to right, transparent, #00a0e9, transparent);

  margin: 40px 0;

}

/* --- ODKAZY V BĚŽNÉM TEXTU (Karty, FAQ, O nás) --- */

.card p a,

.accordion-body p a,

.lead-text a,

.about-section p a,

.person-bio a {

  color: var(--primary); /* Modrá barva z loga */

  font-weight: 600; /* Lehce tučnější text pro lepší viditelnost */

  transition:

    color 0.3s ease,

    text-decoration-color 0.3s ease;

}



/* Efekt po najetí myší */

.card p a:hover,

.accordion-body p a:hover,

.lead-text a:hover,

.about-section p a:hover,

.person-bio a:hover {

  color: var(--primary-dark);

  text-decoration-color: var(

    --primary-dark

  ); /* Podtržení ztmavne a zviditelní se */

}

/* --- SEZNAMY V PATIČCE (Odrážky ») --- */

.main-list {

  list-style: none;

  padding: 0;

  margin-top: 10px;

}



.main-list li {

  margin-bottom: 10px;

  position: relative;

  padding-left: 25px;

}



/* Modrá dvojitá šipka podle vašeho nového screenu */

.main-list li::before {

  content: "»";

  position: absolute;

  left: 0;

  top: -2px;

  color: var(--primary);

  font-size: 1.2rem;

  font-weight: bold;

}







.main-list a:hover {

  color: var(--primary);

}

.container {

  width: 90%;

  max-width: 1200px;

  margin: 0 auto;

}

.container-courses {

  display: flex;

  justify-content: space-between;

  gap: 40 px;

}

.info-box h3 {

  color: var(--secondary);

  font-size: 1.15rem;

  font-weight: 700;

  margin-bottom: 15px;

}

.info-list {

  list-style-type: disc; /* Klasické plné puntíky */

  padding-left: 22px; /* Odsazení zleva pro puntíky */

  margin: 0;

}



.info-list li {

  margin-bottom: 8px; /* Mezera mezi jednotlivými řádky */

}



/* Zrušení mezery pod posledním bodem */

.info-list li:last-child {

  margin-bottom: 0;

}



/* --- HORNÍ KONTAKTNÍ LIŠTA --- */

.top-bar {

  background-color: #2c3e50; /* Jemně šedé pozadí oddělující lištu od navigace */

  border-bottom: 1px solid #e2e8f0;

  padding: 10px 0;

}



.top-bar-container {

  display: flex;

  justify-content: space-between;

  align-items: center;

}



.top-bar-info {

  display: flex;

  align-items: center;

  gap: 8px;

  font-size: 0.85rem;

  font-weight: 500;

  color: #ffffff;

  letter-spacing: 0.5px;

}



.top-bar-icon {

  width: 18px;

  height: 18px;

  fill: var(--primary); /* Modrá barva loga */

  flex-shrink: 0;

}



.top-bar-info a {

  color: #ffffff;

  transition: color 0.2s ease;

}



.top-bar-info a:hover {

  color: var(--primary);

}



/* --- HLAVNÍ NAVIGAČNÍ LIŠTA (BÍLÁ) --- */

.site-header {

  position: sticky;

  top: 0;

  z-index: 1000;

  background-color: #ffffff;

  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);

}



.main-nav-bar {

  background-color: #ffffff;

  padding: 15px 0;

}



.main-nav-container {

  display: flex;

  justify-content: space-between;

  align-items: center;

}



/* --- LOGO PROSTOR S TEXTEM --- */

.footer-brand-wrapper {

  display: flex;

  align-items: center;

  gap: 15px;

  margin-bottom: 15px;

}



.footer-logo {

  height: 55px;

  width: auto;

}



.footer-brand {

  font-size: 1.3rem !important;

  line-height: 1.2;

  margin-bottom: 0 !important;

}



.footer-brand .text-white {

  color: #ffffff;

  font-weight: 700;

}

.footer-brand .text-blue {

  color: var(--primary);

  font-weight: 800;

}



.footer-slogan {

  color: #cbd5e1;

  line-height: 1.5;

}

.nav-brand .brand-link {

  display: flex;

  align-items: center;

  gap: 12px;

  text-decoration: none;

}



.nav-brand img {

  height: 55px; /* Upravte podle toho, aby se věž dobře vykreslila */

  width: auto;

  display: block;

}



.brand-text {

  display: flex;

  flex-direction: column;

  justify-content: center;

  line-height: 1.1;

}



.brand-title {

  font-size: 1.3rem;

  line-height: 1.2;

  margin-bottom: 0;

  text-transform: uppercase;

  color: #2c3e50;

  font-weight: 800;

}



.brand-subtitle {

  font-size: 1.3rem;

  line-height: 1.2;

  margin-bottom: 0;

  text-transform: uppercase;

  font-weight: 800;

  color: var(--primary); /* Tmavá barva pro jméno */

  margin-left: 15px;

}



/* MENU ODKAZY */

.nav-links {

  display: flex;

  gap: 25px;

  align-items: center;

}



.nav-item {

  color: #2c3e50;

  font-weight: 600;

  font-size: 0.9rem;

  text-transform: uppercase;

  position: relative;

  padding: 5px 0;

  transition: color 0.3s ease;

}



.nav-item:hover {

  color: var(--primary);

}



/* MODRÝ PROUŽEK ZESPODU (HOVER EFEKT A AKTIVNÍ) */

.nav-item::after {

  content: "";

  position: absolute;

  width: 0;

  height: 3px;

  bottom: -5px;

  left: 0;

  background-color: var(--primary);

  transition: width 0.3s ease;

}



.nav-item:hover::after,

.nav-item.active::after {

  width: 100%;

}



.nav-item.active {

  color: var(--primary);

}



/* TLAČÍTKO PŘIHLÁŠKA */

.btn-prihlaska {

  background-color: var(--primary);

  color: #ffffff;

  font-weight: 700;

  font-size: 0.9rem;

  text-transform: uppercase;

  border-radius: 4px;

  padding: 10px 22px;

  margin-left: 10px;

  transition: background-color 0.3s ease;

  box-shadow: var(--box-shadow);

}



.btn-prihlaska:hover {

  background-color: var(--primary-dark);

}



/* HAMBURGER MENU PRO MOBILY */

.hamburger {

  display: none;

  cursor: pointer;

  font-size: 1.8rem;

  color: #1a1a1a;

}



/* RESPONSIVITA */

@media (max-width: 1024px) {

  .nav-links {

    gap: 15px;

  }

}



/* --- RESPONSIVITA HLAVNÍ NAVIGACE --- */



/* 1. Mírné zmenšení mezer pro menší notebooky (1081px - 1250px) */

@media (max-width: 1250px) {

  .nav-links {

    gap: 12px;

  }

  .nav-item {

    font-size: 0.85rem;

  }

  .btn-prihlaska {

    padding: 8px 16px;

  }

}



/* 2. Dřívější přepnutí na Hamburger menu (Tablety a malé monitory do 1080px) */

@media (max-width: 1080px) {

  .hamburger {

    display: block;

  }



  .nav-links {

    display: none;

    flex-direction: column;

    position: absolute;

    top: 100%; /* Rozbalí se přesně pod hlavičkou */

    left: 0;

    width: 100%;

    background-color: #ffffff;

    box-shadow: 0 10px 15px rgba(0, 0, 0, 0.1);

    padding: 20px;

    gap: 15px;

  }



  .nav-links.show {

    display: flex;

  }



  .nav-item::after {

    display: none; /* Skryje modré podtržení při najetí na mobilu */

  }



  .btn-prihlaska {

    margin-left: 0;

    text-align: center;

    width: 100%;

  }



  /* Schování horní lišty s maily a telefony (aby na mobilu a tabletu nezabírala místo) */

  .top-bar {

    display: none;

  }

}



/* --- ÚVODNÍ SEKCE S OBRÁZKEM (HERO) --- */

.hero {

  /* Nahoře je filtr jen velmi jemný (0.2), dole ztmavne (0.9) pro perfektní čitelnost textu */

  background:

    linear-gradient(

      to bottom,

      rgba(26, 26, 26, 0.2) 0%,

      rgba(26, 26, 26, 0.9) 100%

    ),

    url("../img/autoskola-polisensky-ucitele.jpg") center center/cover no-repeat;

  color: #ffffff;



  /* Větší výška, aby fotka působila majestátněji a obličeje měly prostor */

  min-height: 70vh;



  /* Přeskupení Flexboxu: posune obsah ze středu dolů */

  display: flex;

  align-items: flex-end; /* Zásadní změna: tlačí obsah ke spodnímu okraji */

  justify-content: center;

  text-align: center;



  /* Místo vnitřního odsazení nahoře i dole teď řešíme jen prostor odspodu */

  padding: 0 0 40px 0;

}



.hero-title {

  font-size: 3.5rem;

  font-weight: 800;

  letter-spacing: -1px;

  margin-bottom: 20px;

  text-shadow: 0 4px 15px rgba(0, 0, 0, 0.4); /* Zvedne text od fotky */

}



.hero-title .text-blue {

  color: var(--primary);

}



.hero-subtitle {

  font-size: 1.25rem;

  font-weight: 400;

  color: #e2e8f0;

  max-width: 650px;

  margin: 0 auto 20px auto;

  line-height: 1.6;

  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.4);

}



/* --- TLAČÍTKA V HERO SEKCI --- */

.hero-buttons {

  display: flex;

  gap: 20px;

  justify-content: center;

}

.btn-primary {

  background-color: var(--primary);

  color: #ffffff !important;

  font-weight: 700;

  padding: 14px 35px;

  border-radius: 4px;

  text-transform: uppercase;

  font-size: 0.95rem;

  transition: all 0.3s ease;

  box-shadow: 0 4px 15px rgba(0, 160, 233, 0.3); /* Jemná modrá záře pod tlačítkem */

}



.btn-primary:hover {

  background-color: var(--primary-dark);

  transform: translateY(-2px); /* Tlačítko se při najetí myší lehce nadnese */

}



.btn-outline {

  background-color: transparent;

  color: #ffffff !important;

  font-weight: 700;

  padding: 12px 35px;

  border: 2px solid #ffffff;

  border-radius: 4px;

  text-transform: uppercase;

  font-size: 0.95rem;

  transition: all 0.3s ease;

}



.btn-outline:hover {

  transform: translateY(-2px);

}



/* --- RESPONSIVITA PRO MOBILY --- */

@media (max-width: 768px) {

  .hero {

    /* Zvětšíme minimální výšku, aby se obrázek natáhl a text mohl sjet níž */



    /* Posuneme pozadí fotky lehce nahoru (center top místo center center), 

           aby byly obličeje blíž k hlavičce a dál od textu */

    background:

      linear-gradient(

        to bottom,

        rgba(26, 26, 26, 0.2) 0%,

        rgba(26, 26, 26, 0.95) 100%

      ),

      url("../img/autoskola-polisensky-ucitele.jpg") center top/cover no-repeat;



    /* Odsazení odspodu můžeme mírně zmenšit, ať text sedí níž */

    padding: 0 0 20px 0;

  }

  .grid-2 {

    grid-template-columns: 1fr;

  }

  .grid-2-tretina {

    grid-template-columns: 1fr;

  }



  .hero-title {

    font-size: 2.2rem; /* Trochu zmenšíme nadpis, aby nezabíral tolik místa na výšku */

    margin-bottom: 15px;

  }



  .hero-subtitle {

    font-size: 1.05rem;

    padding: 0 10px;

    margin-bottom: 15px;

  }



  .hero-buttons {

    flex-direction: column;

    gap: 12px;

    padding: 0 15px;

    width: 100%; /* Zajistí, že se tlačítka roztáhnou */

  }



  .btn-primary,

  .btn-outline {

    width: 100%;

    text-align: center;

  }

}



.btn-cta {

  display: inline-block;

  background-color: var(--primary);

  color: var(--white);

  padding: 12px 30px;

  border-radius: 4px;

  font-weight: 700;

  transition: var(--transition);

}



.btn-cta:hover {

  background-color: var(--primary-dark);

}

/* --- ROZCESTNÍK SLUŽEB (4 KARTY NA ÚVODU) --- */

.services-overview {

  padding: 60px 0 20px 0; /* Zajišťuje prostor mezi hero fotkou a zbytkem stránky */

}



.services-grid {

  display: grid;

  grid-template-columns: repeat(4, 1fr);

  gap: 25px;

}



.grid-2 {

  display: grid;

  grid-template-columns: 1.5fr 1fr;

  gap: 50px;

}

.grid-2-tretina {

  display: grid;

  grid-template-columns: 2fr 1fr; /* Dva stejně široké sloupce */

  gap: 40px;

  margin-top: 20px;

  text-align: justify;

}





.service-card {

  background: var(--white);

  border: 1px solid #e2e8f0;

  border-bottom: 3px solid var(--primary); /* Modrá linka nahoře tvoří "učebnicový" vzhled */

  border-radius: var(--border-radius);

  padding: 35px 25px;

  text-align: center;

  box-shadow: var(--box-shadow);

  transition:

    transform 0.3s ease,

    box-shadow 0.3s ease;

}



.service-card:hover {

  transform: translateY(-7px); /* Karta se lehce zvedne nahoru */

  box-shadow: 0 12px 25px rgba(0, 0, 0, 0.08);

}



.service-icon {

  width: 48px;

  height: 48px;

  fill: var(--primary); /* Vektorová ikona přesně v barvě loga */

  margin: 0 auto 20px auto;

}



.service-card h3 {

  color: var(--secondary);

  font-size: 1.25rem;

  font-weight: 700;

  margin-bottom: 12px;

}



.service-card p {

  line-height: 1.6;

  margin-bottom: 25px;

  text-align: justify;

}



/* Odkazy uvnitř karet přebírají styl vašeho učebnicového formátování */

.service-link {

  color: var(--primary);

  font-weight: 700;

  font-size: 0.95rem;

  text-decoration: underline;

  text-decoration-color: rgba(0, 160, 233, 0.3);

  text-underline-offset: 4px;

  text-decoration-thickness: 2px;

  transition: all 0.3s ease;

}



.service-link:hover {

  color: var(--primary-dark);

  text-decoration-color: var(--primary-dark);

}



/* --- RESPONSIVITA PRO KARTY SLUŽEB --- */

@media (max-width: 1024px) {

  .services-grid {

    grid-template-columns: repeat(

      2,

      1fr

    ); /* Na tabletu a malém notebooku do 2 sloupců */

  }

}



@media (max-width: 600px) {

  .services-grid {

    grid-template-columns: 1fr; /* Na mobilu pěkně pod sebou */

  }

  .grid-2 {

    grid-template-columns: 1fr;

  }

  .grid-2-tretina {

    grid-template-columns: 1fr;

  }

}

.page-header {

  padding: 20px 0;

  text-align: center;

}



.page-header h1 {

  font-size: 1.8rem;

  font-weight: 700;

  color: #00a0e9;

  margin: 0;

}

/* --- SKUPINY ŘIDIČSKÝCH OPRÁVNĚNÍ --- */

.license-groups {

  padding: 60px 0;

}



.text-center {

  text-align: center;

}



.groups-grid {

  display: grid;

  grid-template-columns: repeat(2, 1fr);

  gap: 40px;

  max-width: 1000px;

  margin: 0 auto;

}



.group-card {

  background: var(--white);

  border: 1px solid #e2e8f0;

  border-bottom: 3px solid var(--primary);

  border-radius: var(--border-radius);

  padding: 40px 30px;

  text-align: center;

  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.03);

  transition: transform 0.3s ease;

}



.group-card:hover {

  transform: translateY(-5px);

}



.group-icon-wrapper {

  display: flex;

  justify-content: center;

  align-items: center;

  width: 70px;

  height: 70px;

  background-color: rgba(0, 160, 233, 0.1); /* Světle modré pozadí pro ikonu */

  border-radius: 50%;

  margin: 0 auto 20px auto;

}



.group-icon {

  width: 35px;

  height: 35px;

  fill: var(--primary);

}



.group-card h3 {

  color: var(--secondary);

  font-size: 1.5rem;

  font-weight: 700;

  margin-bottom: 20px;

}



.group-card p {

  color: #64748b;

  margin: 0;

}



/* Štítky (Badges) pro jednotlivé skupiny */

.badge-container {

  display: flex;

  justify-content: center;

  flex-wrap: wrap;

  gap: 10px;

  margin-bottom: 25px;

}



.group-badge {

  background-color: var(--primary);

  color: #ffffff;

  font-size: 1.1rem;

  font-weight: 700;

  padding: 6px 16px;

  border-radius: 6px;

  box-shadow: 0 2px 4px rgba(0, 160, 233, 0.3);

}



/* Alternativní styl štítku pro automat (odlišení) */

.badge-outline {

  background-color: var(--white);

  color: var(--primary);

  border: 2px solid var(--primary);

  box-shadow: none;

}



/* RESPONSIVITA PRO SKUPINY */

@media (max-width: 768px) {

  .groups-grid {

    grid-template-columns: 1fr; /* Na mobilu pod sebou */

    gap: 25px;

  }

}



/* --- LAYOUTS A KARTY --- */

.main-layout {

  padding: 40px 0;

  flex: 1;

}



.full-width-layout {

  padding: 10px 0;

  flex: 1;

}



/* Jednotná moderní karta s modrou spodní linkou */

.card,

.card-custom {

  background: var(--white);

  border-radius: var(--border-radius);

  padding: 30px;

  margin-bottom: 25px;

  box-shadow: var(--box-shadow);

}



.card h2,

.card-custom h2 {

  color: var(--secondary);

  margin-bottom: 18px;

  font-size: 1.4rem;

  font-weight: 700;

}



.card-uvod {

  font-size: 1.3rem;

  font-weight: 600;

}

/* --- ÚVODNÍ TEXT (PEREX) --- */

.card-text {

  font-size: 1.15rem; /* Mírně větší než běžný text */

  font-weight: 400;

  text-align: justify; /* Odstranění zbytečné tučnosti */

  color: #475569; /* Zjemněná břidlicově šedá barva */

  line-height: 1.7; /* Vzdušnější řádkování pro snazší čtení */

  padding-left: 20px; /* Odsazení od linky */

  border-left: 4px solid var(--primary); /* Modrá akcentní linka zleva */

}



/* Úprava pro menší displeje mobilů */

@media (max-width: 600px) {

  .card-text {

    font-size: 1.05rem;

    padding-left: 15px;

    border-left-width: 3px;

  }

}

/* --- SEZNAMY VÝHOD (BENEFITS) --- */

.benefits-list li {

  position: relative;

  padding-left: 28px;

  margin-bottom: 20px;

}



.benefits-list li::before {

  content: "✓";

  position: absolute;

  left: 0;

  color: var(--primary);

  font-weight: 600;

  font-size: 1.1rem;

}



/* Obal pro obě karty (zajistí, že budou vedle sebe a na mobilu pod sebou) */

.container-courses {

  display: grid;

  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));

  gap: 30px;

  margin-bottom: 30px;

}



/* Samotná karta s kurzy */

.card-courses {

  background: var(--white);

  border-radius: var(--border-radius);

  padding: 30px;

  box-shadow: var(--box-shadow);

}



/* Řádek s datem a štítkem */

.course-status {

  display: flex;

  justify-content: space-between;

  align-items: center;

  padding: 12px 0;

  border-bottom: 1px dashed #e2e8f0;

  font-size: 0.95rem;

  color: #333;

}



.course-status:last-child {

  border-bottom: none;

}



/* Štítek (Badge) - klíčová oprava zalamování */

.status-badge {

  padding: 5px 12px;

  border-radius: 20px;

  font-size: 0.8rem;

  font-weight: 600;

  white-space: nowrap; /* Zabrání zalomení textu na druhý řádek */

  text-align: center;

}

.badge-open {

  background: #e8f5e9;

  color: #2e7d32;

}

.badge-almost {

  background-color: #fbe3c6;

  color: #e16a0f;

}



.badge-full {

  background: #ffebee;

  color: #c62828;

}





/* --- TABULKA CENÍKU --- */

.price-table {

  width: 100%;

  border-collapse: collapse;

  margin-bottom: 20px;

}



.price-table tr:nth-child(odd) {

  background-color: var(--bg-light);

}



.price-table td {

  padding: 14px 18px;

  font-size: 0.98rem;

}



.price-table td:last-child {

  text-align: right;

  font-weight: 700;

  color: var(--secondary);

  white-space: nowrap;

}



.price-note {

  font-size: 0.9rem;

  color: var(--text-muted);

  text-align: right;

  margin-bottom: 25px;

}



.payment-info {

  background-color: var(--bg-light);

  border-radius: var(--border-radius);

  padding: 20px 25px;

}



.payment-info h3 {

  color: var(--secondary);

  margin-bottom: 12px;

}



/* --- KONTAKTNÍ STRÁNKA --- */

.about-section {

  display: grid;

  grid-template-columns: 2fr 1fr;

  gap: 25px;

  align-items: center;

}



.about-img {

  width: 100%;

  border-radius: var(--border-radius);

  object-fit: cover;

}



.contact-grid {

  display: grid;

  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));

  gap: 25px;

  margin-top: 60px;

}



.person-card {

  background: var(--white);

  border: 1px solid #e2e8f0;

  border-radius: var(--border-radius);

  padding: 30px 20px;

  text-align: center;

  position: relative;

  box-shadow: var(--box-shadow);

}



.avatar {

  width: 120px;

  height: 120px;

  border-radius: 50%;

  object-fit: cover;

  position: absolute;

  top: -60px;

  left: 50%;

  transform: translateX(-50%);

  border: 3px solid var(--white);

  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);

}



.person-name {

  font-size: 1.35rem;

  font-weight: 700;

  color: var(--secondary);

  margin-top: 35px;

}



.person-role {

  font-size: 0.82rem;

  text-transform: uppercase;

  letter-spacing: 1px;

  color: var(--primary);

  font-weight: 600;

  margin-bottom: 12px;

}



.person-contact {

  font-size: 0.95rem;

  margin-bottom: 5px;

}



.person-contact a {

  color: var(--primary);

  font-weight: 600;

}



.person-bio {

  text-align: justify;



  color: var(--text-muted);

  border-top: 1px solid #edf2f7;

  padding-top: 15px;

  margin-top: 15px;

}



.psycholog-list li {

  position: relative;

  padding-left: 30px;

  margin-bottom: 12px;

}



.psycholog-list li::before {

  position: absolute;

  left: 0;

  top: 0;

  font-size: 1.1rem;

}

.psycholog-list li.icon-user::before {

  content: "👤";

}

.psycholog-list li.icon-phone::before {

  content: "📞";

}

.psycholog-list li.icon-email::before {

  content: "✉️";

}

.psycholog-list li.icon-web::before {

  content: "🌐";

}



.psycholog-list a {

  color: var(--primary);

  font-weight: 600;

}



.map-wrapper {

  width: 100%;

  height: 320px;

  border: 0;

  border-radius: var(--border-radius);

  margin-top: 15px;

}



.btn-gray {

  display: inline-block;

  background-color: #e2e8f0;

  color: var(--secondary);

  padding: 12px 30px;

  border-radius: 4px;

  font-weight: 600;

  transition: var(--transition);

}



.btn-gray:hover {

  background-color: #cbd5e1;

}



/* --- PATIČKA (FOOTER) --- */

.site-footer {

  background-color: #2c3e50;

  color: #cbd5e1;

  margin-top: auto;

  font-size: 0.95rem;

}



/* --- ÚPRAVA ROZVRŽENÍ PATIČKY --- */

.footer-grid {

  display: grid;

  /* První sloupec je nyní 1.8x širší než zbylé tři (1fr) */

  grid-template-columns: 1.8fr 1fr 1fr 1fr;

  gap: 40px;

  padding: 60px 0 40px 0;

  max-width: 1150px; /* Lehce zvětšená šířka pro komfortnější rozložení */

}



/* --- NOVÉ KONTAKTY POD SLOGANEM --- */

.footer-contact-info {

  margin-top: 14px;

  display: flex;

  flex-direction: column;

  gap: 14px;

}



.contact-item {

  display: flex;

  align-items: center;

  gap: 10px;

  color: #cbd5e1;

  font-size: 0.95rem;

}



.contact-item .social-icon {

  width: 18px;

  height: 18px;

  fill: var(--primary); /* Modrá barva ikon z proměnné */

}



.contact-item a {

  color: #cbd5e1;

  transition: color 0.2s ease;

}



.contact-item a:hover {

  color: var(--primary);

}



.footer-col h3 {

  color: #ffffff;

  font-size: 1.1rem;

  font-weight: 700;

  margin-bottom: 20px;

}



/* --- LOGO A ZNAČKA V PATIČCE --- */

.footer-brand-wrapper {

  display: flex;

  align-items: center;

  gap: 15px;

  margin-bottom: 15px;

}



.footer-logo {

  height: 55px;

  width: auto;

}



.footer-brand {

  font-size: 1.3rem !important;

  line-height: 1.2;

  margin-bottom: 0 !important;

}



.footer-brand .text-white {

  color: #000000;

  font-weight: 700;

}

.footer-brand .text-blue {

  color: var(--primary);

  font-weight: 800;

  margin-left: 15px;

}



/* --- SEZNAMY V PATIČCE (Odrážky ») --- */

.footer-list {

  list-style: none;

  padding: 0;

}



.footer-list li {

  margin-bottom: 14px;

  position: relative;

  padding-left: 20px;

}



/* Modrá dvojitá šipka podle vašeho nového screenu */

.footer-list li::before {

  content: "»";

  position: absolute;

  left: 0;

  top: -2px;

  color: var(--primary);

  font-size: 1.2rem;

  font-weight: bold;

}



.footer-list a {

  color: #cbd5e1;

  transition: color 0.2s ease;

}



.footer-list a:hover {

  color: var(--primary);

}



/* --- SOCIÁLNÍ SÍTĚ (Ikony místo šipek) --- */

.social-list li {

  padding-left: 0; /* Zrušíme odsazení z běžného seznamu */

}



.social-list li::before {

  display: none; /* Skryjeme modrou šipku */

}



.social-list a {

  display: flex;

  align-items: center;

  gap: 10px;

}



.social-icon {

  width: 18px;

  height: 18px;

  fill: var(--primary); /* Modré ikonky */

  transition: fill 0.2s ease;

}



.social-list a:hover .social-icon {

  fill: var(--primary-dark);

}



/* --- SPODNÍ COPYRIGHT PROUŽEK --- */

.footer-bottom-bar {

  background-color: #121212;

  border-top: 1px solid #2d3748;

  padding: 20px 0;

}



.bottom-bar-content {

  text-align: center;

  font-size: 0.9rem;

  color: #64748b;

}



/* RESPONSIVITA PRO PATIČKU */

@media (max-width: 900px) {

  .footer-grid {

    grid-template-columns: repeat(2, 1fr); /* Na tabletu 2 sloupce */

  }

}



@media (max-width: 600px) {

  .footer-grid {

    grid-template-columns: 1fr; /* Na mobilu 1 sloupec */

    text-align: center;

  }



  .footer-brand-wrapper {

    justify-content: center;

  }

  .footer-contact-info {

    align-items: center; /* Vycentruje kontakty na mobilu */

  }

  .footer-list li {

    padding-left: 0;

  }



  .footer-list li::before {

    display: none; /* Na malém mobilu můžeme šipky skrýt pro čistý středový text */

  }



  .social-list a {

    justify-content: center;

  }

}

/* --- AKORDEON VYLEPŠENÍ --- */

.accordion-item {

  border: 1px solid #e2e8f0;

  border-radius: var(--border-radius);

  margin-bottom: 12px;

  background: var(--white);

  overflow: hidden;

}



.accordion-header {

  width: 100%;

  text-align: left;

  padding: 18px 25px;

  background: #f8f9fa; /* Lehce šedé pozadí neaktivního */

  border: none;

  font-weight: 600;

  font-size: 1.05rem;

  color: var(--secondary);

  cursor: pointer;

  display: flex;

  justify-content: space-between;

  align-items: center;

  transition:

    background-color 0.3s,

    color 0.3s;

}



.accordion-header.active {

  background: var(--white); /* Bílé pozadí otevřeného */

  color: var(--primary); /* Modrý text aktivního (jako na screenu) */

  border-bottom: 1px solid #e2e8f0;

}



.acc-icon {

  font-size: 1.4rem;

  font-weight: bold;

  color: var(--secondary);

  transition: transform 0.3s;

}



.accordion-header.active .acc-icon {

  color: var(--primary);

  transform: rotate(45deg); /* Znaménko + se plynule otočí na x */

}



.accordion-body {

  max-height: 0;

  overflow: hidden;

  transition: max-height 0.3s ease-out;

}



.accordion-body p {

  padding: 20px 25px;

  color: #4a5568;

  line-height: 1.6;

}

/* --- KATEGORIE FAQ --- */

.faq-category {

  margin-bottom: 45px; /* Výraznější mezera mezi celými sekcemi */

}



.faq-category:last-child {

  margin-bottom: 0;

}



.faq-category h3 {

  color: var(--secondary);

  font-size: 1.4rem;

  font-weight: 700;

  margin-bottom: 20px;

  padding-bottom: 10px;

}

/* --- NAVIGAČNÍ ŠTÍTKY SKUPIN (V KARTĚ) --- */

.course-links-bar {

  display: flex;

  flex-wrap: wrap;

  gap: 12px;

  margin-top: 35px;

  padding-top: 25px;

}



.course-badge {

  flex: 1; /* Toto pravidlo zajistí rovnoměrné roztažení přes celou šířku */

  min-width: 50px; /* Brání tomu, aby se tlačítka na malých displejích úplně smrskla */

  background-color: var(--primary);

  color: #ffffff !important;

  font-weight: 700;

  font-size: 1.05rem;

  text-align: center;

  padding: 10px 5px;

  border-radius: 6px;

  text-decoration: none !important;

  transition: all 0.3s ease;

  box-shadow: 0 2px 6px rgba(0, 160, 233, 0.2);

}



.course-badge:hover {

  background-color: var(--primary-dark);

  transform: translateY(-3px);

  box-shadow: 0 6px 12px rgba(0, 160, 233, 0.3);

}



/* Odlišení skupiny Ba (Automat) */

.course-badge-outline {

  background-color: #ffffff;

  color: var(--primary) !important;

  border: 2px solid var(--primary);

  box-shadow: none;

  /* Drobné ubrání paddingu kvůli 2px rámečku, aby tlačítko nebylo vyšší než ostatní */

  padding: 8px 5px;

}



.course-badge-outline:hover {

  background-color: var(--primary);

  color: #ffffff !important;

}



/* --- RESPONSIVITA --- */

@media (max-width: 600px) {

  .course-links-bar {

    gap: 10px;

  }

  .course-badge {

    flex: 1 1 25%; /* Na mobilu se tlačítka zalomí (např. 3 v jednom řádku) pro lepší dotykové ovládání */

    padding: 12px 5px;

  }

}

/* --- DÁRKOVÝ POUKAZ --- */

.voucher-section {

  display: grid;

  grid-template-columns: 2fr 1fr; /* Dva stejně široké sloupce */

  gap: 40px;

  margin-top: 20px;

}



.voucher-text h2 {

  color: var(--secondary);

  margin-bottom: 20px;

}



.voucher-text p {

  color: var(--text-color);

  line-height: 1.7;

  margin-bottom: 15px;

}



.voucher-img {

  width: 250px;

  height: auto;

  border-radius: 8px; /* Jemně zakulacené rohy obrázku */

  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1); /* Lehký stín, aby poukaz vystoupil do prostoru */

  display: block;

}



/* RESPONSIVITA PRO POUKAZ */

@media (max-width: 800px) {

  .voucher-section {

    grid-template-columns: 1fr; /* Na menších displejích se obrázek přesune pod text */

    gap: 30px;

  }

}

/* --- SEKCE O NÁS + VÝHODY (INDEX) --- */

.about-overview {

  padding: 60px 0;

}



.about-split {

  display: grid;

  grid-template-columns: 1.3fr 1fr; /* Levý sloupec (text) je širší než pravý (karta) */

  gap: 60px;

  align-items: start; /* Zarovná oba sloupce nahoru */

}

.about-text {

  text-align: justify;

}

.about-text h2 {

  color: var(--secondary);

  margin-bottom: 25px;

}



.about-text p {

  color: var(--text-color);

  line-height: 1.7;

  margin-bottom: 20px;

}



/* KARTA S VÝHODAMI */

.benefits-card {

  

  font-weight: 600;



}



.benefits-card h3 {

  color: var(--secondary);

  font-size: 1.3rem;

  font-weight: 700;

  margin-bottom: 25px;

}



/* SEZNAM S FAJFKAMI */

.benefits-list-custom {

  list-style: none;

  padding: 0;

  margin: 0;

}



.benefits-list-custom li {

  display: flex;

  align-items: center;

  gap: 15px;

  color: var(--secondary); /* Tmavší text pro lepší kontrast */

  font-size: 1.05rem;

  margin-bottom: 20px;

  font-weight: 500;

}



.benefits-list-custom li:last-child {

  margin-bottom: 0;

}



.check-icon {

  width: 22px;

  height: 22px;

  fill: var(--primary); /* Využití vaší korporátní modré barvy */

  flex-shrink: 0; /* Zabrání smrsknutí ikony, pokud by se text zalomil */

}



/* --- RESPONSIVITA PRO TUTO SEKCI --- */

@media (max-width: 950px) {

  .about-split {

    grid-template-columns: 1fr; /* Na menších monitorech a tabletech se karta přesune pod text */

    gap: 40px;

  }



  .about-text h2 {

    font-size: 1.8rem;

  }

}

/* --- SEKCE RECENZÍ --- */

.reviews-section {

  padding: 0 0 80px 0;

}



.section-subtitle {

  color: var(--primary);

  font-weight: 700;

  text-transform: uppercase;

  font-size: 0.9rem;

  letter-spacing: 1px;

  margin-bottom: 10px;

}



.slider-wrapper {

  position: relative;

  display: flex;

  align-items: center;

  margin-top: 40px;

}



/* Kontejner slideru */

.reviews-slider {

  display: flex;

  gap: 30px;

  overflow-x: auto;

  scroll-snap-type: x mandatory;

  scroll-behavior: smooth;

  padding: 15px 5px; /* Místo pro stíny karet */



  /* Skrytí posuvníku (scrollbaru) pro čistý vzhled */

  -ms-overflow-style: none;

  scrollbar-width: none;

}



.reviews-slider::-webkit-scrollbar {

  display: none;

}



/* Tlačítka šipek (Desktop) */

.slider-btn {

  background-color: var(--white);

  color: var(--primary);

  border: 1px solid #e2e8f0;

  border-radius: 50%;

  width: 45px;

  height: 45px;

  font-size: 1.5rem;

  display: flex;

  justify-content: center;

  align-items: center;

  cursor: pointer;

  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);

  transition: all 0.3s ease;

  position: absolute;

  z-index: 10;

}



.slider-btn:hover {

  background-color: var(--primary);

  color: var(--white);

  border-color: var(--primary);

}



.prev-btn {

  left: -20px;

}



.next-btn {

  right: -20px;

}



/* Samotná karta recenze */

.review-card {

  flex: 0 0 calc(33.333% - 20px); /* Na desktopu se zobrazí 3 vedle sebe */

  scroll-snap-align: start;

  background: var(--white);

  border: 1px solid #e2e8f0;

  border-radius: var(--border-radius);

  padding: 30px;

  box-shadow: var(--box-shadow);

  display: flex;

  flex-direction: column;

}



.review-header {

  display: flex;

  align-items: center;

  gap: 15px;

  margin-bottom: 20px;

}



.review-avatar {

  width: 50px;

  height: 50px;

  background-color: var(--primary);

  color: var(--white);

  border-radius: 50%;

  display: flex;

  justify-content: center;

  align-items: center;

  font-weight: 700;

  font-size: 1.2rem;

}



.review-meta h4 {

  margin: 0 0 5px 0;

  color: var(--secondary);

  font-size: 1.1rem;

}



.stars {

  font-size: 0.9rem;

  letter-spacing: 2px;

}



.review-divider {

  border: none;

  height: 3px;

  width: 40px;

  background-color: var(--primary);

  margin: 0 0 20px 0;

  border-radius: 2px;

}



.review-text {

  color: #4a5568;

  line-height: 1.6;

  font-size: 0.95rem;

  margin: 0;

  font-style: italic;

}



/* --- RESPONSIVITA SLIDERU --- */

@media (max-width: 1024px) {

  .review-card {

    flex: 0 0 calc(50% - 15px); /* Tablet: 2 karty vedle sebe */

  }

}



@media (max-width: 768px) {

  .slider-btn {

    display: none; /* Na mobilu šipky skryjeme, uživatel scrolluje tahem prstu */

  }



  .reviews-slider {

    gap: 15px;

  }



  .review-card {

    flex: 0 0 85%; /* Mobil: 1 karta + kousek další jako nápověda pro scrollování */

  }

}

/* --- SEZNAMY S TENKOU MODROU FAJFKOU (Školení, O nás) --- */

.about-benefits-list {

  list-style: none;

  padding: 0;

  margin: 0;

  display: flex;

  flex-direction: column;

  gap: 15px; /* Mezera mezi jednotlivými řádky */

}



.about-benefits-list li {

  display: flex;

  align-items: flex-start; /* Zarovná ikonu nahoru pro případ, že se text zalomí na více řádků */

  gap: 12px; /* Mezera mezi ikonou a textem */

  font-size: 0.98rem;

  color: var(--text-color);

  line-height: 1.5;

}



.check-icon-thin {

  width: 22px;

  height: 22px;

  color: var(--primary); /* Modrá barva tahu */

  flex-shrink: 0; /* Zabrání deformaci nebo smrsknutí ikony */

  margin-top: 1px; /* Jemné posunutí ikony, aby seděla přesně v ose s prvním řádkem textu */

}

/* --- VLASTNÍ FORMULÁŘ (ŠKOLENÍ REFERENTŮ) --- */

.custom-form-wrapper {

  background-color: var(

    --bg-light

  ); /* Použije jemné pozadí definované ve vašich proměnných */

  border-radius: var(--border-radius);

  padding: 40px;

  margin-top: 50px;

  border: 1px solid #e2e8f0;

}



.form-title {

  color: var(--secondary);

  font-size: 1.5rem;

  margin-bottom: 10px;

  text-align: center;

}



.form-desc {

  color: var(--text-color);

  text-align: center;

  margin-bottom: 35px;

  max-width: 800px;

  margin: 20px auto;

}



.custom-form {

  display: grid;

  grid-template-columns: 1fr 1fr; /* Na desktopu rozdělí pole do dvou sloupců */

  gap: 20px 30px; /* Mezera: 20px vertikálně, 30px horizontálně */

  max-width: 800px;

  margin: 0 auto;

}



.form-group {

  display: flex;

  flex-direction: column;

  text-align: left;

}



/* Třída pro pole, která mají zabrat celou šířku formuláře (Poznámka, Tlačítko) */

.form-group.full-width,

.form-submit.full-width {

  grid-column: 1 / -1;

}



.form-group label {

  font-weight: 600;

  margin-bottom: 8px;

  color: var(--secondary);

  font-size: 0.95rem;

}



.form-group input,

.form-group select,

.form-group textarea {

  width: 100%;

  padding: 14px 15px;

  border: 1px solid #cbd5e1;

  border-radius: 6px;

  font-family: inherit;

  font-size: 1rem;

  color: var(--text-color);

  background-color: var(--white);

  transition:

    border-color 0.3s ease,

    box-shadow 0.3s ease;

}



/* Vzhled při kliknutí (focus) do pole */

.form-group input:focus,

.form-group select:focus,

.form-group textarea:focus {

  outline: none;

  border-color: var(--primary);

  box-shadow: 0 0 0 3px rgba(0, 160, 233, 0.15); /* Jemná modrá záře */

}



/* Změna barvy placeholderu pro čistší vzhled */

.form-group input::placeholder,

.form-group textarea::placeholder {

  color: #94a3b8;

}



/* --- RESPONSIVITA FORMULÁŘE --- */

@media (max-width: 768px) {

  .custom-form {

    grid-template-columns: 1fr; /* Na mobilech a tabletech budou všechna pole pod sebou */

    gap: 15px;

  }



  .custom-form-wrapper {

    padding: 30px 20px;

  }

}

/* --- GALERIE VOZIDEL (SKUPINY ŘP) --- */

.moto-gallery {

    display: grid;

    grid-template-columns: repeat(3, 1fr);

    gap: 20px;

    margin-top: 20px;

}



.moto-img {

    width: 100%;

    height: 220px;

    object-fit: cover;

    border-radius: var(--border-radius);

    box-shadow: 0 4px 10px rgba(0,0,0,0.05);

    transition: transform 0.3s ease;

}



.moto-img:hover {

    transform: translateY(-5px);

}



@media (max-width: 768px) {

    .moto-gallery {

        grid-template-columns: 1fr;

    }

}

/* --- LIGHTBOX (ZVĚTŠENÍ OBRÁZKŮ) --- */

.lightbox-overlay {

    position: fixed;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    background-color: rgba(18, 18, 18, 0.9); /* Velmi tmavé, téměř neprůhledné pozadí */

    display: flex;

    justify-content: center;

    align-items: center;

    z-index: 9999; /* Zaručí, že bude nad hlavičkou i vším ostatním */

    opacity: 0;

    visibility: hidden;

    transition: opacity 0.3s ease, visibility 0.3s ease;

    cursor: zoom-out;

}



/* Třída pro zobrazení lightboxu */

.lightbox-overlay.active {

    opacity: 1;

    visibility: visible;

}



.lightbox-image {

    max-width: 90%;

    max-height: 90vh;

    border-radius: 8px;

    box-shadow: 0 10px 40px rgba(0,0,0,0.5);

    transform: scale(0.95);

    transition: transform 0.3s ease;

}



/* Efekt jemného přiblížení při otevření */

.lightbox-overlay.active .lightbox-image {

    transform: scale(1);

}



.lightbox-close {

    position: absolute;

    top: 25px;

    right: 35px;

    color: #ffffff;

    font-size: 45px;

    font-weight: 300;

    cursor: pointer;

    transition: color 0.2s ease;

    line-height: 1;

}



.lightbox-close:hover {

    color: var(--primary); /* Při najetí zmodrá */

}



/* Úprava zavíracího křížku pro mobily */

@media (max-width: 768px) {

    .lightbox-close {

        top: 15px;

        right: 20px;

    }

}

/* --- COOKIES BANNER --- */

.cookie-banner {

    position: fixed;

    bottom: 0;

    left: 0;

    width: 100%;

    background-color: var(--white);

    box-shadow: 0 -5px 25px rgba(0, 0, 0, 0.1); /* Silnější stín nahoru, aby banner vystoupil */

    padding: 20px;

    z-index: 10000; /* Zaručí, že bude absolutně nad vším */

    border-top: 3px solid var(--primary); /* Firemní modrá linka */

    display: none; /* Skryto ve výchozím stavu, JS jej zobrazí */

}



/* Třída, kterou přidá JavaScript pro zobrazení banneru */

.cookie-banner.show {

    display: block;

    animation: slideUp 0.5s ease-out; /* Plynulé vyjetí zespodu */

}



@keyframes slideUp {

    from { transform: translateY(100%); }

    to { transform: translateY(0); }

}



.cookie-content {

    max-width: 1200px; /* Stejná šířka jako váš kontejner */

    margin: 0 auto;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 30px;

}



.cookie-content p {

    margin: 0;

    font-size: 0.95rem;

    line-height: 1.6;

    color: var(--text-color);

}



.cookie-content a {

    color: var(--primary);

    font-weight: 600;

    text-decoration: underline;

    transition: color 0.2s ease;

}



.cookie-content a:hover {

    color: var(--primary-dark);

}



.cookie-buttons {

    display: flex;

    gap: 15px;

    flex-shrink: 0; /* Zabrání zmenšování tlačítek na úkor textu */

}



/* Specifické tlačítko pro odmítnutí cookies (šedý rámeček, aby neodvádělo pozornost) */

.btn-cookie-outline {

    background-color: transparent;

    color: var(--text-color);

    font-weight: 700;

    padding: 12px 25px;

    border: 1px solid #cbd5e1;

    border-radius: 4px;

    font-size: 0.95rem;

    cursor: pointer;

    transition: background-color 0.3s ease;

}



.btn-cookie-outline:hover {

    background-color: #f8fafc;

}



/* RESPONSIVITA PRO COOKIES BANNER */

@media (max-width: 900px) {

    .cookie-content {

        flex-direction: column;

        text-align: center;

        gap: 20px;

    }

    

    .cookie-buttons {

        width: 100%;

        flex-direction: column; /* Tlačítka pod sebou */

        gap: 10px;

    }

    

    .cookie-buttons button {

        width: 100%; /* Na mobilu roztažená tlačítka */

    }

}