/* ========================================================================= */
/* 1. FAREBNÉ PREMENNÉ (TÉMY) */
/* ========================================================================= */

/* Nastavenie Dark Theme ako predvolené */
:root {
    /* Základné farby */
    --bg: #111115; /* Tmavé pozadie */
    --card: #1d1d23; /* Farba kariet/panelov */
    --border: #2c2c36; /* Jemné ohraničenie */
    --text: #e9eef5; /* Svetlý text */
    --muted: #a3aab7; /* Menej dôležitý text */
    --accent: #f0f3f7; /* Hlavné nadpisy, akcenty */

    /* Farby projektu */
    --brand: #CD7F32; /* bronzová */
    --brand-2: #80e0c1; /* Doplnková zelená (časová os, úspech) */

    /* Stavy bytov */
    --free: #29c26a; /* Voľný */
    --reserved: #ffb020; /* Rezervovaný */
    --sold: #964b4b; /* Predaný/Filtrovaný */
    
    /* Špeciálne farby (pre Dark Mode) */
    --input-bg: #0f1116;
}

/* Light Theme: Prepísanie premenných pre telo s triedou .light-theme */
.light-theme {
    /* Základné farby */
    --bg: #f9f9fb;
    --card: #ffffff;
    --border: #e0e0e0;
    --text: #111115;
    --muted: #666666;
    --accent: #222222;

    /* Farby projektu */
    --brand: #CD7F32; /* bronzová */
    --brand-2: #00a87a; 

    /* Stavy bytov (jemnejšie pozadia) */
    --free: #2db566;
    --reserved: #e8a200;
    --sold: #964b4b;
    
    /* Špeciálne farby (pre Light Mode) */
    --input-bg: #f0f0f0;

    /* Tlmenie farieb */
    --card-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}


/* ========================================================================= */
/* 2. ZÁKLADNÁ ŠTRUKTÚRA & TYPOGRAFIA */
/* ========================================================================= */
html, body {
    margin: 0;
    background: var(--bg);
    color: var(--text);
    font: 16px/1.6 system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,sans-serif;
    transition: background 0.3s, color 0.3s;
}

.wrap {
    max-width: 1200px;
    margin: 0 auto;
    /* ZVÝŠENÉ ODSADENIE PRE MOBILY */
    padding: 0 24px;
}
@media (max-width: 600px) {
    .wrap {
        padding: 0 16px; /* Ešte väčšie odsadenie pre mobily, ak je to potrebné */
    }
}

.section {
    padding: 60px 5px;
}

h1, h2, h3 {
    color: var(--accent);
    line-height: 1.2;
}
h1 { font-size: 2.5rem; margin-bottom: 20px; }
h2 { font-size: 2.2rem; margin-bottom: 40px; }
h3 { font-size: 1.6rem; }

a {
    color: var(--brand);
    text-decoration: none;
    transition: color 0.2s;
}

/* ========================================================================= */
/* 3. NAVIGÁCIA A HEADER */
/* ========================================================================= */
.nav-wrap {
    padding: 16px 0;
    border-bottom: 1px solid var(--border);
}
header {
    display: flex;
    gap: 24px;
    align-items: center;
    justify-content: space-between;
}
.logo {
    font-weight: 800;
    letter-spacing: .4px;
    font-size: 1.4rem;
    line-height: 1; /* Kompaktné logo */
    color: var(--text); /* Logo by malo byť vždy čitateľné */
}

/* Desktop navigácia */
nav a {
    color: var(--text);
    padding: 8px 12px;
    margin-left: 8px;
    border-radius: 6px;
    transition: background 0.2s;
}
nav a:hover {
    background: var(--card);
}
nav a.active {
    color: var(--brand);
    font-weight: 600;
}
.nav-tools {
    display: flex;
    align-items: center;
    gap: 15px;
}

/* Mobilné menu (Hamburgery) */
.nav-links {
    display: flex; /* Zobrazí sa na desktope */
}
.menu-toggle {
    display: none; /* Skryté na desktope */
    cursor: pointer;
    font-size: 24px;
    padding: 5px;
}
@media (max-width: 900px) {
    .nav-links {
        display: none;
        flex-direction: column;
        position: absolute;
        top: 65px; /* Pod headerom */
        left: 0;
        width: 100%;
        background: var(--bg);
        border-top: 1px solid var(--border);
        box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
        z-index: 5;
    }
    .nav-links.open {
        display: flex;
    }
    .nav-links a {
        margin: 0;
        padding: 15px 24px;
        border-bottom: 1px solid var(--border);
    }
    .nav-links a:last-child {
        border-bottom: none;
    }
    .menu-toggle {
        display: block; /* Zobrazí sa na mobile */
    }
}

/* ========================================================================= */
/* 4. NAVIGÁCIA (HEADER) - Štýly pre .active */
/* ========================================================================= */
.nav-links a {
    /* Uisti sa, že odkaz je position: relative pre pseudo-element ::after */
    position: relative;
    transition: color 0.3s;
}

/* Štýl pre aktívny odkaz (desktop) */
.nav-links a.active {
    color: var(--brand); /* Zmena farby textu na farbu akcentu */
}

/* Podčiarknutie pre aktívny odkaz (len desktop) */
.nav-links a.active::after {
    content: '';
    position: absolute;
    bottom: -5px; /* Poloha pod odkazom, upravte podľa potreby */
    left: 0;
    width: 100%;
    height: 3px; /* Hrúbka podčiarknutia */
    background-color: var(--brand); /* Farba podčiarknutia */
    border-radius: 2px;
}

/* Pre mobilné zobrazenie (pod 900px), kde chceme odstrániť podčiarknutie */
@media (max-width: 900px) {
    .nav-links a.active::after {
        content: none; /* Zruší podčiarknutie na mobiloch */
    }
}
/* ========================================================================= */
/* ŠTÝL PRE DVE LOGÁ (Dark/Light) */
/* ========================================================================= */

/* Základné štýly pre obe logá */
.header-logo {
    height: 68px; 
    width: auto; 
    display: block;
    transition: opacity 0.3s;
}

/* Skryjeme svetlé logo ako štandard (pre Dark Mode) */
.logo-light {
    display: none;
    opacity: 0;
}

/* Light Mode: Skryjeme tmavé logo a zobrazíme svetlé */
.light-theme .logo-dark {
    display: none;
    opacity: 0;
}
.light-theme .logo-light {
    display: block;
    opacity: 1;
}

/* Responzivita (ako predtým) */
@media (max-width: 768px) {
    .header-logo {
        height: 68px; 
    }
}

/* Ostatné štýly pre .logo (ako už máte v style.css) */
.logo { 
    display: flex;
    align-items: center;
    height: 100%;
    /* Prekryjeme logá nad sebou, ak by sa náhodou obe zobrazili */
    position: relative; 
}
/* Aby sa logá neposúvali navzájom */
.header-logo {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}


/* ========================================================================= */
/* 4. KOMPONENTY (TLAČIDLÁ, KARTY, FORMULÁRE) */
/* ========================================================================= */

/* Tlačidlá */
.btn {
    cursor: pointer;
    background: var(--input-bg);
    color: var(--text);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 10px 12px;
    transition: background 0.2s, border-color 0.2s;
}
.btn:hover {
    background: color-mix(in srgb, var(--input-bg) 85%, var(--border));
}
.btn.primary {
    background: var(--brand);
    color: var(--bg); /* V tmavom režime čierne, v svetlom biele */
    border-color: var(--brand);
    font-weight: 600;
}
.btn.primary:hover {
    background: color-mix(in srgb, var(--brand) 85%, black);
    border-color: color-mix(in srgb, var(--brand) 85%, black);
}
.btn.secondary {
    background: var(--bg);
    color: var(--muted);
}

/* Formuláre a Vstupy */
select, input[type="number"], input[type="text"], input[type="email"], input[type="tel"], textarea {
    background: var(--input-bg);
    color: var(--text);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 12px; /* Zvýšený padding */
    transition: border-color 0.2s;
    width: 100%;
    box-sizing: border-box;
}
select:focus, input:focus, textarea:focus {
    outline: none;
    border-color: var(--brand);
}
textarea {
    min-height: 150px;
    resize: vertical;
}
.form-group {
    margin-bottom: 15px;
}

/* Karty */
.card, .svgbox {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 16px;
    box-shadow: var(--card-shadow, none); /* Tieň len v Light Mode */
}

/* Badge (Stav bytu) */
.badge {
    font-size: 12px;
    padding: 4px 10px;
    border-radius: 999px;
    font-weight: 600;
    text-transform: uppercase;
}
.badge.free {
    background: color-mix(in srgb, var(--free) 18%, transparent);
    color: var(--free);
    border: 1px solid color-mix(in srgb, var(--free) 35%, transparent);
}
.badge.reserved {
    background: color-mix(in srgb, var(--reserved) 18%, transparent);
    color: var(--reserved);
    border: 1px solid color-mix(in srgb, var(--reserved) 35%, transparent);
}
.badge.sold {
    background: color-mix(in srgb, var(--sold) 18%, transparent);
    color: var(--sold);
    border: 1px solid color-mix(in srgb, var(--sold) 35%, transparent);
}

/* ========================================================================= */
/* 4. KOMPONENTY (TLAČIDLÁ, KARTY, FORMULÁRE) - Prepínač Dark/Light */
/* ========================================================================= */

/* Prepinac temy (SWICH) */
#theme-toggle {
    position: relative;
    width: 60px; /* Šírka switcha */
    height: 30px; /* Výška switcha */
    border-radius: 15px;
    cursor: pointer;
    padding: 0;
    transition: background 0.3s, border-color 0.3s;
    
    /* DARK MODE (PREDNÁ NASTAVENÁ FARBA) */
    background: #113642; /* Tmavo-zelený základ pre Dark mode */
    border: 1px solid #113642; 
}

/* Kruhový indikátor a ikona */
#theme-toggle::before {
    content: '🌙'; /* Ikonka pre Dark mode */
    position: absolute;
    width: 20px;
    height: 20px;
    top: 4px; /* Centrovanie */
    left: 4px; /* Poloha kruhu */
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    transition: transform 0.3s, background 0.3s;
    color: var(--bg);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
    
    /* V DARK MODE JE KRUH V PRAVO A UKAZUJE MESIAC */
    content: '🌙'; 
    background: var(--brand); /* Modrozelený kruh pre mesiac */
    transform: translateX(30px); /* Kruh je vpravo */
    color: white;
}

/* Light Theme: Switch je vľavo (Slnko) */
.light-theme #theme-toggle {
    background: #fdf5d6; /* Svetlo žltý základ pre Light mode */
    border-color: #fdf5d6;
}
.light-theme #theme-toggle::before {
    content: '☀️'; /* Ikonka pre Light mode */
    transform: translateX(4px); /* Presun kruhu doľava */
    background: #ffc83b; /* Žltý kruh pre slnko */
    color: white;
}

/* ========================================================================= */
/* 5. FOOTER */
/* ========================================================================= */
footer {
    text-align: center;
    padding: 30px 0;
    margin-top: 50px;
    border-top: 1px solid var(--border);
    color: var(--muted);
}




/* ========================================================================= */
/* PÔDORYS A SVG PREKRÝVANIE (OPRAVA ZAROVNANIA) */
/* ========================================================================= */

/* 1. Rodičovský kontajner pre absolútne pozicovanie */
.map-container {
    position: relative;
}

/* 2. Umiestnenie oboch vrstiev presne na seba a odstránenie vonkajších odsadení */
.svgbox,
.floorplan-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    /* Zabezpečí, že nebudú mať žiadny vonkajší okraj/margin (odstráni margin-top:20px a pod.) */
    margin: 0 !important; 
}

/* 3. Kontrola SVG vrstvy */
.svgbox {
    padding: 0 !important; /* KĽÚČOVÉ! Odstráni vnútorné odsadenie, ktoré posúvalo SVG */
    z-index: 2; /* SVG je navrchu */
    height: 100%; /* SVG zaberie celú výšku kontajnera */
}

/* 4. Kontrola obrázkovej vrstvy */
.floorplan-image {
    border: none; /* Odstráni okraj, ktorý mohol spôsobovať 1-2px posun */
    z-index: 1; /* Obrázok je v pozadí */
}


/* ========================================================================= */
/* 7. ŠTÝLY PRE DETAILNÝ MODAL BYTU */
/* ========================================================================= */

.modal-details-grid {
    /* Desktop: 2 stĺpce (pôdorys vľavo, detaily vpravo) */
    display: grid;
    grid-template-columns: 1fr 1fr; /* 2 rovnako široké stĺpce */
    gap: 30px;
    padding: 10px 0;
    align-items: start;
}

/* Kontajner obrázka pôdorysu (Ľavá strana na desktope / Vrch na mobile) */
.floorplan-container {
    padding: 10px;
    background: var(--card);
    border-radius: 10px;
}
.floorplan-container img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 8px;
}

/* Štýly pre detaily bytu (Pravá strana na desktope / Spodok na mobile) */
.details-info h3 {
    margin-top: 0;
    margin-bottom: 10px;
}
.details-info p {
    margin: 6px 0;
    color: var(--muted);
}
.details-info strong {
    color: var(--text);
    font-weight: 600;
}
/* Zabezpečenie, že odznaky statusu vyzerajú dobre */
.details-info .badge {
    display: inline-block;
    padding: 4px 8px;
    border-radius: 5px;
    font-weight: 600;
    font-size: 0.9em;
}

/* Mobilné zobrazenie (pre malé obrazovky - prepnutie na 1 stĺpec) */
@media (max-width: 768px) {
    .modal-details-grid {
        grid-template-columns: 1fr;
    }

    /* Kľúčové: Pôdorys pôjde na prvé miesto (order: 1) a detaily pod neho (order: 2) */
    .floorplan-container {
        order: 1; 
    }
    .details-info {
        order: 2;
    }
}

/* --- KĽÚČOVÉ VÝHODY --- */
.usp-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* desktop = 3 stĺpce */
  gap: 24px;
  text-align: center;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 12px;
  box-sizing: border-box;
}

.usp-item {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  box-sizing: border-box;
}

.usp-item h3 {
  margin: 0 0 8px;
  font-size: 1.3rem;
  color: var(--brand);
}

.usp-item p {
  color: var(--muted);
  margin: 0;
}

/* --- tablet (do 900px): 2 stĺpce --- */
@media (max-width: 900px) {
  .usp-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

/* --- mobil (do 600px): 1 stĺpec --- */
@media (max-width: 600px) {
  .usp-grid {
    grid-template-columns: 1fr !important;
  }
}





/* GRIDY & USP */
.info-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
}
@media (max-width: 768px) {
  .info-grid { grid-template-columns: 1fr; }
}

.usp-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  text-align: center;
  margin-bottom: 50px;
}
@media (max-width: 768px) {
  .usp-grid { grid-template-columns: 1fr; }
}

.usp-item {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.usp-item h3 { margin: 0 0 8px; font-size: 1.3rem; color: var(--brand); }
.usp-item p  { color: var(--muted); margin: 0; }

/* GALLERY */
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}
@media (max-width: 768px) {
  .gallery-grid { grid-template-columns: 1fr; }
}
.gallery-item img {
  width: 100%;
  height: auto;
  border-radius: 12px;
  border: 1px solid var(--border);
  display: block;
}

/* TIMELINE - desktop */
.timeline {
  position: relative;
  margin: 40px auto;
  max-width: 800px;
  padding-left: 0;
}
.timeline::before {
  content: '';
  position: absolute;
  left: 50%;
  top: 0;
  bottom: 0;
  width: 2px;
  background: var(--border);
  transform: translateX(-50%);
}

.timeline-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 0;
  position: relative; /* needed for item pseudo */
}
.timeline-item:nth-child(even) { flex-direction: row-reverse; }

.timeline-date {
  background: var(--brand);
  color: var(--bg);
  padding: 8px 16px;
  border-radius: 10px;
  font-weight: 600;
  min-width: 120px;
  text-align: center;
  box-shadow: 0 4px 10px rgba(0,0,0,.2);
  position: relative;
}
/* ensure any old pseudo on .timeline-date is hidden */
.timeline-date::after { display: none; }

.timeline-date.done    { background: var(--brand-2); }
.timeline-date.current { background: var(--reserved); }
.timeline-date.future  { background: #444a57; color: #f0f3f7; }

.timeline-content {
  width: calc(50% - 100px);
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 18px;
  box-shadow: 0 2px 10px rgba(0,0,0,.1);
}

/* Decorative dot: centered relative to the item (so it matches the central line) */
.timeline-item::before {
  content: "";
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: 28px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--bg);
  border: 2px solid var(--border);
  z-index: 2;
  box-shadow: 0 1px 0 rgba(0,0,0,0.05);
}

/* right-align content for reversed items on desktop */
.timeline-item:nth-child(even) .timeline-content { text-align: right; }

/* MOBILE: stacked timeline - remove left/right alternation and align dot to the line */
@media (max-width: 600px) {

  .timeline {
    max-width: 100%;
    padding-left: 0;
  }

  /* move vertical line left to leave space for date/content */
  .timeline::before { left: 16px; transform: none; }

  /* stack items vertically and override row-reverse */
  .timeline-item,
  .timeline-item:nth-child(even) {
    display: block;
    flex-direction: column;
    align-items: flex-start;
    padding: 14px 12px;
    margin-bottom: 12px;
    position: relative;
  }

  /* date above content, aligned left and indented from the line */
  .timeline-date {
    display: inline-block;
    margin: 0 0 8px 40px;
    order: 0;
    min-width: auto;
    text-align: left;
    position: relative;
    box-shadow: 0 4px 10px rgba(0,0,0,.12);
  }

  /* content full width and aligned under date */
  .timeline-content {
    width: auto;
    margin-left: 40px;
    margin-top: 0;
    text-align: left;
    box-sizing: border-box;
    order: 1;
  }

  /* move decorative dot to align with left vertical line on mobile */
  .timeline-item::before {
    left: 16px;
    transform: none;
    top: 22px;
    width: 10px;
    height: 10px;
  }

  .timeline .timeline-item:first-child { padding-top: 8px; }
  .timeline .timeline-item:last-child  { padding-bottom: 8px; }

  /* ensure any previous right-align rules are overridden */
  .timeline-item:nth-child(even) .timeline-content { text-align: left; }
  .timeline-date { min-width: 0; }
}

/* show the dot only for the current timeline item */
.timeline-item::before {
  display: none; /* hide all dots by default */
}

/* show the dot only where .timeline-date.current exists */
.timeline-item:has(.timeline-date.current)::before {
  display: block;
}