/* =========================================================
   TM AUTO COMPANY – GLOBÁLNY ŠTÝL
   Téma: svetlé (biele) pozadie, biele boxy, zelený akcent, tmavá navbar
   ========================================================= */

/* ------------ Premenné (farby) ------------ */
/* Zelená ako akcent, inak biela/čierna */
:root {
  --primary:       #000000;  /* hlavná tmavá farba (text, akcent) */
  --primary-light: #86FFD7;  /* svetlejší akcent (hover, ikonky, zvýraznenia) */
  --secondary:     #271111;  /* tmavší text na bielom pozadí */
  --bg-light:      #ffffff;  /* svetlé / biele boxy */
  --text-main:     #000000;  /* základná farba textu na svetlom pozadí */
  --bg:            #020202;  /* tmavé pozadie (napr. tlačidlá v hero) */
}

/* =========================================================
   ZÁKLAD LAYOUTU
   ========================================================= */

html, body {
  height: 100%;
}

body {
  background-color: #ffffff;            /* biele pozadie stránky */
  color: var(--text-main);              /* základná farba textu */
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

main {
  flex: 1 0 auto;
}

/* text v klasických .card-text (napr. v bielych boxoch) */
.card-text {
  color: var(--secondary);
}

/* =========================================================
   NAVBAR + LOGÁ
   ========================================================= */

.navbar-main {
  background: #020202;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.6);
  border-bottom: 1px solid rgba(88, 242, 164, 0.35);
  padding-top: 1.5rem;
  padding-bottom: 1.5rem;
}

/* hlavné odkazy v navbare */
.navbar-main .nav-link {
  font-size: 1.1rem;
  font-weight: 700;
  color: #E6FFF7 !important;
}

/* hover + active pre odkazy v .navbar-main */
.navbar-main .nav-link.active,
.navbar-main .nav-link:hover {
  color: var(--primary-light) !important;
}

/* značka / logo text v navbare */
.navbar-main .navbar-brand {
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
}

/* logo v navbare – vedľa názvu TM Auto Company */
.navbar-logo {
  height: 32px;
  width: auto;
  display: block;
}

/* logo vo footeri (ak používaš) */
.footer-logo {
  height: 80px;
  width: auto;
  display: block;
}

/* =========================================================
   HERO SEKCIÁ (ÚVODNÝ BANNER)
   ========================================================= */
.hero {
  position: relative;
  overflow: hidden;
  border-radius: 1rem;
  margin-bottom: 2rem;
  color: #fff;

  /* desktop cinematic pomer */
  aspect-ratio: 2560 / 1080;
}

/* mobile verzia */
@media (max-width: 768px) {
  .hero {
    aspect-ratio: 4 / 5;
  }
}

/* rozmazaná výplň (zabraňuje pásom) */
.hero-fill {
  position: absolute;
  inset: -60px;
  width: 120%;
  height: 120%;
  object-fit: cover;
  filter: blur(40px) brightness(.55);
  z-index: 0;
}

/* hlavný ostrý obraz – NIKDY neoreže */
.hero-main {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  z-index: 1;
}

/* stmavenie pre text */
.hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(0,0,0,.85),
    rgba(0,0,0,.35),
    rgba(0,0,0,.35),
    rgba(0,0,0,.85)
  );
  z-index: 2;
}

/* obsah nad všetkým */
.hero-content {
  position: relative;
  z-index: 3;
  padding: 3rem 2rem;
}

/* mobile úpravy textu */
@media (max-width: 768px) {
  .hero-content { padding: 1.5rem 1.25rem; }

  .hero h1 { font-size: 1.7rem; line-height: 1.15; }

  .hero .btn {
    display: block;
    width: 100%;
  }

  .hero .btn.me-2 {
    margin-right: 0 !important;
    margin-bottom: .75rem;
  }
}

/* =========================
   MOBILE TUNING
   ========================= */
@media (max-width: 768px) {
  .hero {
    /* na mobile nech je to vyššie a vyzerá "hero", nie pásik */
    aspect-ratio: 4 / 5;
    padding: 1.5rem 1.25rem;
  }

  .hero h1 {
    font-size: 1.7rem;
    margin-top: 0;        /* ak si mal -33px, tak toto to zruší */
    line-height: 1.15;
  }

  .hero p {
    font-size: 0.98rem;
    max-width: 100%;
  }

  /* tlačidlá pod seba a full width */
  .hero .btn {
    display: block;
    width: 100%;
  }

  .hero .btn.me-2 {
    margin-right: 0 !important;
    margin-bottom: 0.75rem;
  }

  /* posuň obraz viac dole, aby text nešiel cez autá */
  .hero-bg-img {
    object-position: center 80%;
  }
}




/* =========================================================
   SEKČNÉ BOXY (.section-light) – BIELE RÁMČEKY
   ========================================================= */

.section-light {
  background: #ffffff;                       /* biely box */
  color: var(--secondary);                   /* tmavý text vo vnútri */
  padding: 2.2rem;
  margin-bottom: 2rem;
  box-shadow: 0 10px 30px rgba(255, 255, 255, 0.15);
  border: 1px solid rgba(88, 242, 164, 0.5); /* zelený jemný rámik */
  border-radius: 1rem !important;
}

/* =========================================================
   KARTY – VŠEOBECNE (.card) – BIELE BOXY SO ZELENÝM RÁMIKOM
   ========================================================= */

.card {
  border-radius: 1rem !important;
  border: 1px solid rgba(88, 242, 164, 0.45);  /* zelený rámček */
  background: #ffffff;
  color: var(--secondary);                     /* tmavý text */
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.18);
  transition: 0.25s ease;
}

.card:hover {
  transform: translateY(-4px);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.3);
}

/* nadpis v bielej karte */
.card-title {
  color: var(--secondary);
  font-weight: 600;
}

/* cena (aj v kartách) – nech svieti zelenou / tmavou */
.price,
.vehicle-price {
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--primary);
}

/* =========================================================
   FOOTER
   ========================================================= */

.footer-main {
  background: #020202;
  color: #ffffff;
  padding: 1rem 0;
  margin-top: 2rem;
  border-top: 1px solid rgba(31, 41, 55, 0.8);
}

/* =========================================================
   TLAČIDLÁ (globálne)
   ========================================================= */

.btn-primary {
  background-color: var(--primary);
  border-color: var(--primary);
  color: #ffffff;
  font-weight: 600;
}

.btn-primary:hover {
  background-color: var(--primary-light);
  border-color: var(--primary-light);
  color: #045f14;
}

.btn-outline-primary {
  border-width: 2px;
  border-color: var(--primary);
  color: var(--primary);
  font-weight: 500;
}

.btn-outline-primary:hover {
  background-color: var(--primary);
  border-color: var(--primary);
  color: #ffffff;
}

.btn-outline-secondary {
  border-width: 2px;
}

/* =========================================================
   BADGES (štítky – novinka, nízky nájazd, atď.)
   ========================================================= */

.badge-pill {
  border-radius: 999px;
  padding: 0.3rem 0.7rem;
  font-size: 0.75rem;
}

.badge-new {
  background: var(--primary);
  color: #020617;
}

.badge-lowkm {
  background: green;
  color: #020617;
}

.badge-recent {
  background: #FFB14A;  /* teplý oranžový akcent */
  color: #111827;
}

/* malé ikonky v benefitoch (napr. home) */
.benefit-icon {
  font-size: 2rem;
  color: var(--primary);
  margin-bottom: 0.5rem;
}

/* =========================================================
   RECENZIE (spokojní zákazníci)
   ========================================================= */

.review-card {
  border-radius: 1rem;
  border: 1px solid rgba(88, 242, 164, 0.45);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
  background: #ffffff;
  color: var(--secondary);
}

.review-stars {
  color: #facc15;
  font-size: 1rem;
}

.review-name {
  font-weight: 600;
}

.review-badge {
  font-size: 0.8rem;
  color: #6b7280;
}

/* =========================================================
   PONUKA VOZIDIEL – GRID KARTY
   ========================================================= */

.vehicle-card {
  border-radius: 1rem !important;
  border: 1px solid rgba(88, 242, 164, 0.6);  /* výraznejší zelený rámček */
  background: #ffffff;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.25);
  cursor: pointer;                             /* celá karta je klikateľná */
}

.vehicle-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.4);
}

/* fotka auta v karte */
.vehicle-card-img {
  width: 100%;
  height: 280px;
  object-fit: cover;
  padding: 6px;
  border-top-left-radius: 1rem;
  border-top-right-radius: 1rem;
}

/* textová časť */
.vehicle-card .card-body {
  display: flex;
  flex-direction: column;
  padding: 1.4rem 1.4rem 1.3rem;
  color: var(--secondary);
}

.vehicle-card-title {
  font-size: 1.05rem;
  font-weight: 600;
  color: #111827;
  margin-bottom: 0.35rem;
}

.vehicle-meta,
.vehicle-desc {
  font-size: 0.9rem;
  color: #4b5563;
}

/* spodok karty – cena + „Detail vozidla“ */
.vehicle-footer {
  margin-top: auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.5rem;
}

/* =========================================================
   DETAIL VOZIDLA – STRÁNKA
   ========================================================= */

.vehicle-detail-page {
  max-width: 1100px;
  margin: 0 auto;
}

/* karta s veľkou fotkou vľavo */
.vehicle-photo-card {
  border-radius: 1rem;
  overflow: hidden;
  background: #000;
}

/* hlavná fotka */
.vehicle-photo-main {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  cursor: zoom-in;
}

/* malé náhľady */
.vehicle-photo-thumb {
  width: 80px;
  height: 60px;
  object-fit: cover;
  border-radius: 0.5rem;
  cursor: pointer;
  border: 2px solid transparent;
  transition: transform .15s ease, border-color .15s ease, box-shadow .15s ease;
}

.vehicle-photo-thumb:hover {
  transform: translateY(-2px);
  border-color: var(--primary);
  box-shadow: 0 6px 16px rgba(0, 0, 0, .4);
}

/* text „Popis vozidla“ */
.vehicle-description-text {
  color: #4b5563 !important;
}

/* horná pravá info časť (názov, cena, badgy) */
.vehicle-header-block {
  margin-bottom: .5rem;
  color: black;
}

.vehicle-detail-title {
  font-size: 1.6rem;
  font-weight: 700;
  color: #000000;
}

.vehicle-detail-price {
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--primary);
}

/* malé štvorčeky „Rok výroby, Najazdené…“ */
.vehicle-summary-card {
  background: #ffffff;
  border-radius: .75rem;
  padding: .6rem .8rem;
  border: 1px solid rgba(88, 242, 164, 0.7);
  width: 185px;
  height: 75px;
  color: #111827;
}

.vehicle-summary-card .label {
  font-size: .75rem;
  color: #000000;
  text-transform: uppercase;
}

.vehicle-summary-card .value {
  font-size: .95rem;
  font-weight: 600;
  color: #111827;
}

/* nadpisy sekcií v detaile (Popis, Špecifikácie, Výbava…) */
.vehicle-section-title {
  font-size: 1rem;
  font-weight: 600;
  margin-bottom: 0.4rem;
  color: #111827;
}

/* tabuľka špecifikácií vľavo dole */
.vehicle-spec-table {
  font-size: .9rem;
}

.vehicle-spec-table .spec-row {
  display: flex;
  justify-content: space-between;
  padding: .35rem 0;
  border-bottom: 1px solid rgba(209, 213, 219, 0.8);
}

.vehicle-spec-table .spec-row:last-child {
  border-bottom: none;
}

.spec-label {
  color: #6b7280;
  margin-right: 1rem;
}

.spec-value {
  font-weight: 500;
  color: #111827;
}

/* výbava – zoznam s check ikonou */
.vehicle-equipment-list li {
  font-size: .9rem;
  margin-bottom: .25rem;
  color: #111827;
}

.vehicle-equipment-list i {
  color: var(--primary);
  font-size: .85rem;
}

/* GLightbox – detailné fotky */
.gslide img {
  object-fit: contain;
  max-height: 90vh;
}

/* =========================================================
   FORMULÁRE (kontakt, login, atď.)
   ========================================================= */

.form-control,
.form-select {
  background-color: #ffffff;
  border-color: #d1d5db;
  color: #111827;
}

.form-control:focus,
.form-select:focus {
  background-color: #ffffff;
  border-color: var(--primary);
  box-shadow: 0 0 0 0.15rem rgba(88, 242, 164, 0.35);
  color: #111827;
}

.form-control::placeholder {
  color: #9ca3af;
}

/* =========================================================
   KARUSEL – NAJNOVŠIE AUTÁ (šípky na krajoch)
   ========================================================= */

#latestCarsCarousel .carousel-control-prev,
#latestCarsCarousel .carousel-control-next {
  width: 8%;                   /* väčší klikateľný priestor */
  top: 50%;
  transform: translateY(-50%);
}

#latestCarsCarousel .carousel-control-prev {
  left: -40px;                 /* šípka vonku naľavo */
}

#latestCarsCarousel .carousel-control-next {
  right: -40px;                /* šípka vonku napravo */
}

/* biele šípky na tmavom pozadí */
#latestCarsCarousel .carousel-control-prev-icon,
#latestCarsCarousel .carousel-control-next-icon {
  filter: invert(100%);
  opacity: 0.9;
}

/* =========================================================
   ŠTATISTIKY – „TM Auto Company v číslach“
   ========================================================= */

/* Ideálne pridaj class="mb-5 stats-section" na tú sekciu */
.stats-section .card {
  background: #ffffff;
  border-radius: 1.2rem;
  padding: 1.2rem;
  box-shadow: 0 8px 25px rgba(0,0,0,0.2);
  border: 1px solid rgba(88, 242, 164, 0.6);
  text-align: center;
}

.stats-section .card h3 {
  color: var(--primary);
  font-weight: 700;
}

.stats-section .card p {
  color: #374151 !important;
  opacity: 1 !important;
}

/* =========================================================
   SUBNAV – pre ponuku vozidiel
   ========================================================= */

.subnav-vehicles {
  background: #ffffff;
  border-bottom: 1px solid rgba(88, 242, 164, 0.35);
}

.subnav-vehicles .nav-link {
  color: #b10e0e;
  font-weight: 500;
  padding: 0.45rem 1.1rem;
}

.subnav-vehicles .nav-link:hover {
  color: var(--primary-light);
}

.subnav-vehicles .nav-link.active {
  background-color: var(--primary-light);
  color: #23a829;
}

/* =========================================================
   DROPDOWN pre "Ponuka vozidiel" + všeobecný štýl dropdownov
   ========================================================= */

/* špeciálny layout pre dropdown "Ponuka vozidiel" */
.custom-vehicle-dropdown {
  min-width: 180px;
  padding-top: .4rem;
  padding-bottom: .4rem;
  border-radius: 0.75rem;
}

/* všeobecne – všetky dropdowny v .navbar (vrátane custom-vehicle-dropdown) */
.navbar .dropdown-menu {
  background-color: var(--primary) !important; /* tmavé pozadie dropdownu */
  border: 1px solid #2ef7a3 !important;        /* zelený rámik */
  border-radius: 0.75rem;
  padding: 0.3rem 0;
}

/* položky — text normálne */
.navbar .dropdown-item {
  color: #e8fff6 !important;
  padding: 0.55rem 1rem;
}

/* hover – zosvetlenie pozadia + tmavší text */
.navbar .dropdown-item:hover {
  background-color: #ffffff !important;
  color: var(--primary) !important;
}

/* aktívna položka pri kliknutí */
.navbar .dropdown-item:active,
.navbar .dropdown-item.active {
  background-color: rgba(46, 247, 163, 0.20) !important;
  color: var(--primary) !important;
}

/* šípka nad dropdownom */
.navbar .dropdown-menu::before {
  content: "";
  position: absolute;
  top: -7px;
  left: 24px;
  width: 12px;
  height: 12px;
  background-color: #0b1a14;
  border-left: 1px solid #2ef7a3;
  border-top: 1px solid #2ef7a3;
  transform: rotate(45deg);
}

/* Otváranie dropdownu na HOVER na desktopoch (Bootstrap default je click) */
@media (min-width: 992px) {
  .navbar-main .nav-item.dropdown:hover .dropdown-menu {
    display: block;
    margin-top: 0;
  }
}

/* všeobecný hover pre iné navbary než navbar-main (ak by boli) */
.navbar:not(.navbar-main) .nav-link:hover,
.navbar:not(.navbar-main) .nav-link.show {
  color: var(--primary) !important;
}

.vehicle-price {
    display: flex;
    align-items: baseline;
    gap: 6px;
    white-space: nowrap;       /* nič sa nezalomí na nový riadok */
}

.vehicle-dph-badge {
    font-size: 15px;
    line-height: 1;
    white-space: nowrap;
}
.vehicle-price-main {
    font-size: 1.2rem;
    font-weight: 700;
}


/* ===== HEADER LOGO ===== */

.navbar-main .navbar-brand {
  padding-top: 0;
  padding-bottom: 0;
  display: flex;
  align-items: center;
}

.navbar-main .navbar-full-logo {
  height: 100px;        /* <- TU si nastav veľkosť */
  width: auto;
  display: block;
  object-fit: contain;
}


/* ===== INSTAGRAM BOX ===== */

.instagram-box {
    border: 1px solid rgba(88,242,164,0.5);
    background: linear-gradient(135deg, #ffffff, #f5fffb);
}

.instagram-link {
    display: inline-block;
    font-size: 1.3rem;
    font-weight: 700;
    color: #111;
    text-decoration: none;
    padding: 0.4rem 1rem;
    border-radius: 999px;
    border: 2px solid #86FFD7;
    transition: .25s ease;
}

.instagram-link:hover {
    background: #86FFD7;
    color: #003b26;
    transform: translateY(-2px) scale(1.03);
    box-shadow: 0 10px 30px rgba(88,242,164,.5);
}

#cookieModal{
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.75);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}

.cookie-box{
  background: #050505;
  color: #eafff6;
  padding: 26px 32px;
  border-radius: 18px;
  max-width: 460px;
  width: 100%;
  box-shadow: 0 20px 80px rgba(0,0,0,.8);
  border: 1px solid rgba(88, 242, 164, 0.85);
}

.cookie-box h5{
  font-weight: 800;
  margin-bottom: 10px;
}

.cookie-box p{
  font-size: 0.95rem;
  color: #b6fce6;
  margin-bottom: 0;
  line-height: 1.45;
}

.cookie-actions{
  margin-top: 18px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
}

.cookie-link{
  color: #b6fce6;
  text-decoration: underline;
  font-weight: 600;
}

.btn-accept{
  background: #00e5a0;
  border: none;
  color: #003b28;
  padding: 8px 22px;
  font-weight: 800;
  border-radius: 999px;
  cursor: pointer;
}
.btn-accept:hover{
  filter: brightness(0.95);
}



/* jednotné karty – aj pre kroky */
.home-step{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:48px;
  height:48px;
  border-radius:50%;
  background: linear-gradient(135deg, #20c997, #0dcaf0);
  color:white;
  font-weight:700;
  font-size:1.25rem;
  margin-bottom:.75rem;
}


.section-frame {
    border: 1.5px solid rgba(88,242,164,.6);
    border-radius: 18px;
    padding: 2.2rem;
    background: #fff;
}

.feature-card {
    height: 100%;
    border-radius: 16px;
    border: 1.5px solid rgba(88,242,164,.55);
    background: #ffffff;
    box-shadow: 0 8px 25px rgba(0,0,0,.06);
    padding: 1.8rem;
    text-align: center;
    transition: all .25s ease;
}

.feature-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 14px 40px rgba(0,0,0,.12);
}

.feature-icon {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: #1dd3b0;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    margin: 0 auto 1rem;
}