/* Globální reset a fonty */ body { font-family: 'Poppins', sans-serif; /* Použijeme moderní Google Font */ margin: 0; padding: 0; color: #333; background-color: #f5f5ed; /* Světle béžová/krémová */ } /* Import Google Font - přidejte do v HTML */ /* */ /* Základní rozložení - centrování obsahu */ .container { max-width: 1100px; margin: 0 auto; padding: 0 20px; } /* Hlavička a Navigace */ header { background-color: #f0f0e4; /* Světlejší pozadí */ padding: 11px 20px; box-shadow: 0 2px 5px rgba(0,0,0,0.1); position: sticky; top: 0; z-index: 1000; } .header-content { display: flex; justify-content: space-between; align-items: center; max-width: 1100px; margin: 0 auto; position: relative; } nav ul { list-style: none; display: flex; margin: 0; padding: 0; } nav ul li a { text-decoration: none; color: #555; padding: 8px 12px; transition: color 0.3s ease, border-bottom 0.3s ease; font-weight: 400; } nav ul li a:hover { color: #3A5A40; border-bottom: 2px solid #3A5A40; } /* ---- STYLY PRO HERO SEKCI S OBRÁZKEM A PŘEKRYTÍM ---- */ .hero-section { position: relative; /* Důležité pro pozicování překrytí (overlay) */ height: 550px; /* Nastavte pevnou výšku pro zobrazení obrázku (lze upravit) */ display: flex; align-items: center; justify-content: center; text-align: center; color: white; /* Barva textu na pozadí obrázku */ /* Nastavení obrázku na pozadí */ background-image: url('banner.jpg'); background-size: cover; /* Pokrýt celou plochu */ background-position: center center; background-repeat: no-repeat; } /* 1. Vytvoření tmavého překrytí (overlay) */ .hero-section::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; /* Barva a průhlednost překrytí: tmavá zelená s 50% průhledností */ background-color: rgba(16, 26, 16, 0.6); /* tmavá zelená/šedá pro tónování */ z-index: 1; /* Pod textem, ale nad obrázkem */ } /* 2. Zajištění, že text bude nad překrytím */ .hero-content { position: relative; z-index: 2; /* Musí být vyšší než z-index překrytí */ padding: 20px; /* Vylepšení pro čitelnost nad tmavým pozadím */ text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.7); } /* Vylepšení stylu pro hlavní text */ .hero-content h1 { font-size: 2.5em; margin-bottom: 8px; font-weight: 700; } .hero-content p { font-size: 1.1em; margin-bottom: 30px; } /* Tlačítka */ .btn { display: inline-block; padding: 10px 25px; text-decoration: none; border-radius: 5px; font-weight: 600; transition: background-color 0.3s ease, transform 0.2s ease; cursor: pointer; border: none; text-transform: uppercase; font-size: 0.85em; letter-spacing: 0.5px; } .btn-primary { background-color: #3A5A40; /* Tmavě zelená */ color: white; } .btn-primary:hover { background-color: #588157; /* Světlejší zelená */ transform: translateY(-2px); } .btn-secondary { background-color: #A3B18A; /* Světlejší zelená */ color: white; } .btn-secondary:hover { background-color: #8D9F7C; transform: translateY(-2px); } /* Sekce Obsahu */ .content-section { padding: 10px 0; /* Více vertikálního paddingu */ text-align: center; } .content-section h2 { color: #3A5A40; font-size: 2em; margin-top: 15px; margin-bottom: 15px; font-weight: 600; } .content-section p { line-height: 1.8; max-width: 800px; margin: 0 auto 20px auto; } /* ---- STYLY PRO KARTY POKOJŮ NA HOMEPAGE (#pokoje-prehled) ---- */ .room-preview-grid { display: flex; justify-content: center; /* Centrujeme karty */ flex-wrap: wrap; /* Pro zalamování na menších obrazovkách */ gap: 30px; /* Větší mezera mezi kartami */ margin-top: 25px; margin-bottom: 25px; } .room-preview-card { background-color: white; border-radius: 8px; box-shadow: 0 5px 15px rgba(0,0,0,0.08); overflow: hidden; /* Pro zaoblení obrázku */ text-align: left; width: 310px; /* Pevná šířka pro konzistentnost */ transition: transform 0.3s ease, box-shadow 0.3s ease; } .room-preview-card:hover { transform: translateY(-5px); box-shadow: 0 8px 20px rgba(0,0,0,0.12); } .room-preview-card img { width: 100%; height: 170px; object-fit: cover; /* Zajistí, že obrázek vyplní prostor */ display: block; } .room-preview-card-content { padding: 15px; } .room-preview-card-content h3 { margin-top: 0; color: #3A5A40; font-size: 1.15em; margin-bottom: 8px; } .room-preview-card-content p { font-size: 0.9em; color: #666; margin-bottom: 15px; line-height: 1.5; } .room-preview-card-content .btn { padding: 8px 15px; font-size: 0.8em; margin-top: 0; } /* KLÍČOVÉ ÚPRAVY PRO OBRÁZKY: */ .room-preview-card img { width: 100%; /* Obrázek vyplní celou šířku kontejneru */ height: 200px; /* **Nastavte pevnou výšku** pro jednotný vzhled */ object-fit: cover; /* **OPRAVA**: Zabrání deformaci, ale vyplní plochu */ display: block; } .room-preview-card-content { padding: 18px; display: flex; flex-direction: column; flex-grow: 1; /* Zajistí, že obsah vyplní prostor a posune patičku/tlačítko dolů */ } .room-preview-card-content h3 { color: #3A5A40; margin-top: 0; } .room-preview-card-content p { flex-grow: 1; /* Posune tlačítko dolů */ margin-bottom: 15px; max-width: none; /* Reset pro text v kartě */ } /* ========================================= */ /* ==== STYLY PRO SEZNAM POKOJŮ (pokoje.html) ==== */ /* ========================================= */ .room-list-grid { display: flex; flex-direction: column; /* Umožní vertikální řazení boxů */ gap: 30px; /* Mezera mezi jednotlivými boxy */ margin-top: 40px; } .room-card-full { display: flex; /* Zajišťuje layout Obrázek | Text */ background-color: white; border-radius: 8px; box-shadow: 0 4px 15px rgba(0,0,0,0.1); overflow: hidden; /* Důležité pro zaoblené rohy */ text-align: left; max-width: 850px; /* Omezení šířky, aby to nevypadalo moc roztahané */ margin: 0 auto; /* Vycentrování na střed stránky */ } .room-card-image { flex-basis: 40%; /* Obrázek zabere 40% šířky */ max-height: 255px; /* Nastavíme pevnou max. výšku, aby boxy nebyly příliš vysoké */ overflow: hidden; } .room-card-image img { width: 100%; height: 100%; object-fit: cover; /* Důležité: Obrázek pokryje celou plochu bez deformace */ display: block; } .room-card-content { flex-basis: 60%; /* Obsah zabere 60% šířky */ padding: 20px 30px; display: flex; flex-direction: column; } .room-card-content h3 { color: #3A5A40; margin-top: 0; margin-bottom: 10px; font-size: 1.4em; } .room-card-content p { flex-grow: 1; /* Zajistí, že text zabere potřebný prostor před patičkou */ margin-bottom: 15px; } .room-card-footer { display: flex; justify-content: space-between; align-items: center; padding-top: 10px; border-top: 1px solid #eee; /* Lehká dělící čára */ } .price-info p { margin: 0; font-size: 0.9em; color: #777; } .price-info h4 { margin: 0; color: #3A5A40; font-size: 1.3em; font-weight: 700; } /* ---- RESPONZIVITA PRO DETAIL POKOJE ---- */ @media (max-width: 800px) { .room-card-full { flex-direction: column; /* Na mobilu se obrátí na sloupcový layout */ max-width: 95%; } .room-card-image { flex-basis: auto; max-height: 200px; /* Menší výška obrázku na mobilu */ } } /* Sekce s ikonami a textem (jako na obrázku 1) */ .icon-text-grid { display: flex; justify-content: center; flex-wrap: wrap; gap: 30px; padding: 0 20px; /* Padding pro menší obrazovky */ margin-top: 25px; margin-bottom: 25px; } .icon-text-block { background-color: white; border-radius: 8px; box-shadow: 0 3px 10px rgba(0,0,0,0.06); padding: 30px; text-align: center; max-width: 450px; /* Dvě vedle sebe */ flex: 1; /* Aby se roztáhly */ min-width: 300px; /* Minimální šířka */ box-sizing: border-box; /* Zahrnout padding do šířky */ } .icon-text-block h3 { color: #3A5A40; font-size: 1.4em; margin-bottom: 15px; position: relative; padding-bottom: 10px; } .icon-text-block h3::after { content: ''; position: absolute; left: 50%; transform: translateX(-50%); bottom: 0; width: 50px; height: 2px; background-color: #A3B18A; } .icon-text-block p { font-size: 0.95em; color: #555; line-height: 1.7; margin-bottom: 0; } /* Patička */ footer { background-color: #3A5A40; /* Tmavě zelená */ color: white; padding: 60px 20px; margin-top: 25px; font-size: 0.9em; } .footer-grid { display: grid; grid-template-columns: repeat(3, 1fr); /* Tři sloupce */ gap: 40px; max-width: 1200px; margin: 0 auto; text-align: left; } .footer-column h4 { color: white; font-size: 1.1em; margin-bottom: 20px; position: relative; padding-bottom: 10px; } .footer-column h4::after { content: ''; position: absolute; left: 0; bottom: 0; width: 40px; height: 2px; background-color: #A3B18A; } .footer-column ul { list-style: none; padding: 0; margin: 0; } .footer-column ul li { margin-bottom: 10px; } .footer-column ul li a { color: #E0E0D7; /* Světlejší text */ text-decoration: none; transition: color 0.3s ease; } .footer-column ul li a:hover { color: white; } .footer-bottom { text-align: center; margin-top: 60px; padding-top: 30px; border-top: 1px solid rgba(255,255,255,0.1); color: #E0E0D7; } /* ---- STYLY PRO FILTRY POKOJŮ ---- */ .room-filters { display: flex; gap: 20px; align-items: center; justify-content: center; /* Vycentrování na střed */ margin-bottom: 40px; padding: 15px 20px; background-color: #f0f0e8; /* Světlejší pozadí pro odlišení */ border-radius: 8px; max-width: 900px; margin: 20px auto 40px auto; } .room-filters label { font-weight: 600; color: #3A5A40; } .room-filters select { padding: 8px 12px; border: 1px solid #ccc; border-radius: 5px; font-family: 'Poppins', sans-serif; background-color: white; cursor: pointer; font-size: 1em; } /* Styl pro tlačítko zrušení filtrů (můžete přidat do sekce s tlačítky) */ .btn-secondary-small { background-color: #A9B2A9; /* Světlejší šedozelená */ color: white; padding: 8px 15px; border: none; border-radius: 5px; cursor: pointer; font-size: 0.9em; font-weight: 600; text-transform: uppercase; transition: background-color 0.3s; } .btn-secondary-small:hover { background-color: #8D998D; } /* Styl pro skrytí nefiltrovaných pokojů (bude ovládán JS) */ /* Skryje elementy, které neodpovídají kritériím filtru */ .room-card-full.hidden { display: none !important; /* Důležité: zajistí skrytí i při konfliktu stylů */ } /* Responzivita pro filtry */ @media (max-width: 768px) { .room-filters { flex-direction: column; align-items: stretch; gap: 10px; } .btn { padding: 10px 10px; } } /* Stránka Pokoje - detaily pokojů (jako na obrázku 2) */ .room-detail-card { background-color: white; border-radius: 8px; box-shadow: 0 5px 15px rgba(0,0,0,0.08); display: flex; flex-direction: column; /* Pro mobilní zobrazení */ overflow: hidden; margin-bottom: 30px; text-align: left; } .room-detail-card-image { width: 100%; /* Plná šířka na menších */ height: 250px; object-fit: cover; } .room-detail-card-content { padding: 25px; flex: 1; /* Aby zabíralo zbytek místa */ display: flex; flex-direction: column; justify-content: space-between; /* Tlačítko dole */ } .room-detail-card-content h3 { color: #3A5A40; font-size: 1.6em; margin-top: 0; margin-bottom: 10px; } .room-detail-card-content p { font-size: 1em; color: #666; line-height: 1.6; margin-bottom: 20px; max-width: none; /* Reset z content-section */ } .room-detail-card-content .btn { align-self: flex-end; /* Přichytí tlačítko k pravému dolnímu rohu */ margin-top: auto; /* Posune tlačítko dolů */ } /* Stránka Galerie */ .gallery-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); /* Responzivní mřížka */ gap: 20px; margin-top: 50px; } .gallery-item { background-color: white; border-radius: 8px; box-shadow: 0 3px 10px rgba(0,0,0,0.06); overflow: hidden; cursor: pointer; transition: transform 0.3s ease, box-shadow 0.3s ease; } .gallery-item:hover { transform: translateY(-3px); box-shadow: 0 5px 15px rgba(0,0,0,0.1); } .gallery-item img { width: 100%; height: 200px; object-fit: cover; display: block; } .gallery-item-caption { padding: 15px; font-size: 0.9em; color: #555; } /* Stránka Kontakt */ .contact-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 30px; margin-top: 25px; text-align: left; } .contact-info-block, .contact-form-block { background-color: white; border-radius: 8px; box-shadow: 0 5px 15px rgba(0,0,0,0.08); padding: 20px; } .contact-info-block h3, .contact-form-block h3 { color: #3A5A40; font-size: 1.25em; margin-top: 0; margin-bottom: 15px; } .contact-info-block p { margin-bottom: 15px; /* Snížení mezery pod odstavci */ line-height: 1.6; /* Mírné snížení výšky řádku */ max-width: none; text-align: left; } .contact-info-block a { color: #3A5A40; text-decoration: none; font-weight: 600; } .contact-info-block a:hover { text-decoration: underline; } .contact-form-block form { display: flex; flex-direction: column; } .contact-form-block input, .contact-form-block textarea { padding: 12px; margin-bottom: 15px; border: 1px solid #ddd; border-radius: 5px; font-family: 'Poppins', sans-serif; font-size: 1em; } .contact-form-block textarea { resize: vertical; /* Povolí vertikální změnu velikosti */ } /* Modal Styly (použijeme existující ale s novým vzhledem) */ .modal { display: none; /* Skryté ve výchozím stavu */ position: fixed; z-index: 2000; /* Nad vším */ left: 0; top: 0; width: 100%; height: 100%; overflow: auto; background-color: rgba(0,0,0,0.6); /* Tmělší překryv */ display: flex; /* Centrujeme modal */ justify-content: center; align-items: center; } .modal-content { background-color: white; padding: 30px; border-radius: 10px; width: 90%; max-width: 550px; box-shadow: 0 10px 30px rgba(0,0,0,0.2); position: relative; animation: fadeIn 0.3s ease-out; /* Animace pro objevení */ } .modal-content h3 { color: #3A5A40; margin-top: 0; margin-bottom: 25px; font-size: 1.8em; font-weight: 600; } .close-btn { color: #888; position: absolute; top: 15px; right: 25px; font-size: 30px; font-weight: bold; cursor: pointer; transition: color 0.3s ease; } .close-btn:hover { color: #333; } .modal-content input, .modal-content button { width: calc(100% - 24px); /* Šířka s ohledem na padding */ padding: 12px; margin-bottom: 15px; border: 1px solid #ddd; border-radius: 5px; font-family: 'Poppins', sans-serif; font-size: 1em; } .modal-content button.btn-primary { width: 100%; padding: 15px; } /* Animace pro modal */ @keyframes fadeIn { from { opacity: 0; transform: translateY(-20px); } to { opacity: 1; transform: translateY(0); } } /* Responzivita */ @media (max-width: 992px) { nav ul { margin-top: 15px; } .hero-section h1 { font-size: 2em; } .hero-section p { font-size: 1em; } .footer-grid { grid-template-columns: 1fr; /* Jeden sloupec na menších */ text-align: center; } .footer-column h4::after { left: 50%; transform: translateX(-50%); } .icon-text-grid { flex-direction: column; align-items: center; } .icon-text-block { max-width: 90%; } .contact-grid { grid-template-columns: 1fr; } } @media (max-width: 768px) { .hero-section { height: 60vh; } .hero-section h1 { font-size: 2em; } .content-section { padding: 10px 0; } .content-section h2 { font-size: 2em; } .room-preview-card { width: 90%; /* Větší na mobilech */ } .room-detail-card { flex-direction: column; /* Obrázek nahoře, text dole */ } .room-detail-card-image { height: 200px; } } /* ---- DETAIL POKOJE - NOVÝ E-SHOP LAYOUT ---- */ .room-detail-layout { display: grid; grid-template-columns: 2fr 1fr; /* 2/3 pro obsah a galerii, 1/3 pro rezervaci */ gap: 40px; margin-top: 40px; text-align: left; } @media (max-width: 992px) { .room-detail-layout { grid-template-columns: 1fr; /* Na mobilu se sloupce srovnají pod sebe */ gap: 25px; } } /* Sekce Galerie */ .gallery-section { /* Hlavní kontejner pro galerii */ } .main-image-container { height: 450px; /* Pevná výška pro hlavní obrázek */ overflow: hidden; margin-bottom: 15px; border-radius: 8px; box-shadow: 0 4px 10px rgba(0,0,0,0.1); } .main-image-container img { width: 100%; height: 100%; object-fit: cover; } .thumbnail-gallery { display: flex; gap: 10px; overflow-x: auto; /* Pro mobilní zařízení, aby se dalo posouvat */ padding-bottom: 10px; } .thumbnail-gallery img { width: 80px; height: 80px; object-fit: cover; cursor: pointer; border-radius: 5px; border: 2px solid transparent; transition: border-color 0.2s; } .thumbnail-gallery img:hover, .thumbnail-gallery img.active { border-color: #3A5A40; /* Zelený rámeček pro aktivní náhled */ } /* ---- STYLY PRO KALENDÁŘ V DETAILU POKOJE ---- */ .calendar-display { padding: 10px 0; margin-bottom: 15px; } .calendar-header { display: flex; justify-content: space-between; align-items: center; font-weight: 600; font-size: 1.1em; margin-bottom: 10px; color: #3A5A40; } .nav-month { background: none; border: 1px solid #ddd; color: #555; padding: 5px 10px; cursor: pointer; border-radius: 4px; transition: background-color 0.2s; } .nav-month:hover { background-color: #f0f0f0; } .calendar-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; } .day { display: flex; justify-content: center; align-items: center; padding: 8px 0; font-size: 0.9em; font-weight: 600; border-radius: 4px; cursor: default; transition: background-color 0.2s; } .day.header { background-color: #efefef; color: #555; font-size: 0.8em; font-weight: 400; } .day.blank { background-color: transparent; cursor: default; } /* BARVY STAVU POKOJE */ .day.available { background-color: #D4EDDA; /* Světle zelená */ color: #155724; /* Tmavě zelený text */ cursor: pointer; } .day.booked { background-color: #F8D7DA; /* Světle červená */ color: #721C24; /* Tmavě červený text */ text-decoration: line-through; opacity: 0.8; } .day.pending { background-color: #FFEEDB; /* Světle oranžová/žlutá */ color: #856404; /* Tmavě oranžový text */ cursor: pointer; } /* LEGENDA */ .calendar-legend { display: flex; justify-content: space-around; padding: 10px 0; margin-top: 10px; } .legend-item { display: flex; align-items: center; font-size: 0.9em; color: #555; } .legend-item .color-box { width: 15px; height: 15px; border-radius: 3px; margin-right: 3px; } .legend-item .available { background-color: #D4EDDA; border: 1px solid #155724;} .legend-item .booked { background-color: #F8D7DA; border: 1px solid #721C24;} .legend-item .pending { background-color: #FFEEDB; border: 1px solid #856404;} /* ---- STYLY PRO NAVIGAČNÍ ŠIPKY V GALERII (NOVÁ VERZE DLE OBRÁZKU) ---- */ /* Původní .main-image-wrapper můžeme nyní vypustit a nechat jen .main-image-container */ .main-image-container { position: relative; /* Důležité pro pozicování šipek uvnitř */ height: 450px; overflow: hidden; margin-bottom: 15px; border-radius: 8px; box-shadow: 0 4px 10px rgba(0,0,0,0.1); } .main-image-container img { /* Ujistit se, že img vyplňuje kontejner */ width: 100%; height: 100%; object-fit: cover; } .nav-arrow { position: absolute; top: 50%; transform: translateY(-50%); background-color: rgba(255, 255, 255, 0.7); /* Bílé, poloprůhledné pozadí */ color: #333; /* Tmavý text */ border: none; padding: 10px 15px; /* Menší padding */ cursor: pointer; font-size: 1.5em; /* Menší písmo */ line-height: 1; /* Lepší zarovnání textu */ z-index: 10; border-radius: 5px; /* Mírné zaoblení */ opacity: 0.7; /* Výchozí průhlednost */ transition: background-color 0.2s, opacity 0.2s; } .nav-arrow:hover { background-color: rgba(255, 255, 255, 0.9); /* Více neprůhledné při najetí */ opacity: 1; } .left-arrow { left: 15px; /* Odsazení od levého okraje obrázku */ } .right-arrow { right: 15px; /* Odsazení od pravého okraje obrázku */ } /* ---- STYLY PRO LOGO (AKTUALIZOVANÉ DLE ROZMĚRŮ) ---- */ .logo { /* Ujistit se, že logo se zarovná vertikálně se zbytkem hlavičky */ display: flex; align-items: center; padding: 0 !important; margin: 0 !important; } .logo a { /* Ujistěte se, že kotva nemá zbytečně velký padding/margin */ padding: 0 !important; margin: 0 !important; line-height: 1; /* Může pomoci potlačit zbytečnou výšku řádku */ } .logo .desktop-logo { height: 40px; /* Nastavíme vhodnou výšku, aby se logo vešlo do hlavičky */ width: auto; /* Při výšce 40px a poměru 1024:288 bude šířka asi 142px */ } /* Skrýt mobilní logo na desktopu */ .logo .mobile-logo { display: none; } /* ---- STYLY PRO REZERVAČNÍ STRÁNKU (DOPLNĚNÍ) ---- */ .reservation-grid { display: grid; grid-template-columns: 1fr 1fr; /* Dva sloupce vedle sebe */ gap: 40px; margin-bottom: 50px; text-align: left; } .room-selection-area h3, .calendar-area h3, .reservation-form-container h3 { color: #3A5A40; margin-bottom: 20px; border-bottom: 2px solid #A3B18A; display: inline-block; padding-bottom: 5px; } .room-dropdown { width: 100%; padding: 12px; font-size: 1.1em; border: 1px solid #ddd; border-radius: 8px; font-family: 'Poppins', sans-serif; background-color: white; margin-bottom: 20px; cursor: pointer; } .room-mini-card { background: white; padding: 20px; border-radius: 8px; box-shadow: 0 4px 15px rgba(0,0,0,0.08); } .room-mini-card img { width: 100%; height: 200px; object-fit: cover; border-radius: 5px; margin-bottom: 15px; } .room-mini-card p { margin: 0; font-size: 1.2em; color: #3A5A40; font-weight: 600; } .calendar-container { background: white; padding: 20px; border-radius: 8px; box-shadow: 0 4px 15px rgba(0,0,0,0.08); } /* Finální formulář pod mřížkou */ .reservation-form-container { max-width: 900px; margin: 0 auto; background: white; padding: 40px; border-radius: 8px; box-shadow: 0 5px 20px rgba(0,0,0,0.1); text-align: left; } .form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 20px; } .form-group { display: flex; flex-direction: column; } .form-group label { font-size: 0.9em; font-weight: 600; color: #555; margin-bottom: 8px; } .form-group input { padding: 12px; border: 1px solid #ddd; border-radius: 5px; font-family: 'Poppins', sans-serif; } .form-full-width { grid-column: span 2; } /* Responzivita pro mobilní telefony */ @media (max-width: 850px) { .reservation-grid, .form-grid { grid-template-columns: 1fr; } .form-full-width { grid-column: span 1; } } /* ---- HLAVNÍ ROZVRŽENÍ REZERVACE ---- */ .reservation-page-grid { display: grid !important; /* !important vynutí mřížku i přes jiné styly */ grid-template-columns: 1fr 1.2fr; /* Dva sloupce vedle sebe */ gap: 25px; align-items: start; margin-top: 30px; text-align: left; /* Zarovnání textu v mřížce doleva */ } /* Sjednocený styl pro bílé boxy (vlevo i vpravo) */ .res-white-box { background-color: white; border-radius: 10px; box-shadow: 0 5px 20px rgba(0,0,0,0.08); padding: 20px; margin-bottom: 20px; /* Mezera, pokud by se naskládaly pod sebe */ } /* Levý sloupec - naskládání prvků pod sebe */ .res-visual-column { display: flex; flex-direction: column; gap: 20px; } /* Úprava fotky pokoje */ .res-room-photo { width: 100%; border-radius: 8px; height: 220px; object-fit: cover; display: block; } /* Nadpisy v boxech */ .res-box-title { color: #3A5A40; font-size: 1.4em; font-weight: 700; margin-bottom: 20px; text-align: center; } /* Přizpůsobení iframe kalendáře */ .res-calendar-wrapper { width: 100%; overflow: hidden; } /* Responzivita: pod 900px šířky se sloupce dají pod sebe */ @media (max-width: 900px) { .reservation-page-grid { grid-template-columns: 1fr !important; } }¨ /* ========================================= */ /* ==== NOVÝ MODERNÍ DESIGN REZERVACE ==== */ /* ========================================= */ /* 1. Ukazatel kroků nahoře */ .steps-container { background-color: white; padding: 20px 0; border-bottom: 1px solid #eee; margin-bottom: 30px; } .steps-list { display: flex; justify-content: center; gap: 40px; list-style: none; padding: 10px; margin: 0; } .step { display: flex; align-items: center; gap: 10px; color: #999; font-weight: 500; } .step.active { color: #3A5A40; font-weight: 700; } .step-number { display: flex; justify-content: center; align-items: center; width: 30px; height: 30px; border-radius: 50%; background-color: #eee; color: #555; font-size: 0.9em; } .step.active .step-number { background-color: #3A5A40; color: white; } /* 2. Hlavní Layout (Grid) */ .reservation-layout-grid { display: grid; grid-template-columns: 2fr 1fr; /* 2/3 formulář, 1/3 shrnutí */ gap: 30px; align-items: start; } /* 3. Karty (Bílé boxy) */ .res-card, .summary-card { background: white; border-radius: 12px; padding: 30px; box-shadow: 0 4px 20px rgba(0,0,0,0.06); margin-bottom: 25px; border: 1px solid rgba(0,0,0,0.03); } .res-card-title { font-size: 1.4em; color: #333; margin-bottom: 25px; padding-bottom: 15px; border-bottom: 1px solid #f0f0f0; } /* 4. Moderní Inputs */ .modern-input, .modern-select { width: 95%; padding: 7px; border: 1px solid #ddd; border-radius: 8px; font-size: 1em; background-color: #fff; transition: border-color 0.3s; margin-bottom: 15px; font-family: 'Poppins', sans-serif; } .modern-input:focus, .modern-select:focus { border-color: #3A5A40; outline: none; box-shadow: 0 0 0 3px rgba(58, 90, 64, 0.1); } .form-label { display: block; margin-bottom: 8px; font-weight: 600; color: #555; } .dates-row, .form-row { display: flex; gap: 20px; } .form-group-half { flex: 1; } /* 5. Pravý sloupec - Sticky Summary */ .res-sidebar { position: relative; } .sticky-card { position: sticky; top: 100px; /* Aby se přilepila při scrollování */ } .summary-title { margin-top: 0; color: #3A5A40; font-size: 1.3em; margin-bottom: 20px; } .summary-image-wrapper img { width: 100%; height: 180px; object-fit: cover; border-radius: 8px; margin-bottom: 20px; } .summary-details .summary-row { display: flex; justify-content: space-between; margin-bottom: 12px; font-size: 0.95em; color: #555; } .summary-details .value { font-weight: 600; color: #333; text-align: right; } .summary-divider { border: 0; border-top: 1px solid #eee; margin: 20px 0; } .summary-total { display: flex; justify-content: space-between; align-items: center; font-size: 1.2em; font-weight: 700; color: #3A5A40; margin-bottom: 25px; } .btn-block { width: 100%; padding: 16px; font-size: 1.1em; } .summary-note { text-align: center; font-size: 0.8em; color: #999; margin-top: 15px; } /* Responzivita pro mobily */ @media (max-width: 900px) { .reservation-layout-grid { grid-template-columns: 1fr; } .sticky-card { position: static; } .steps-list { gap: 15px; } .step-title { display: none; /* Na malém mobilu skryjeme text kroků */ } .step.active .step-title { display: block; } } /* Logika pro přepínání kroků */ .step-content { display: none; /* Ve výchozím stavu skryté */ animation: fadeIn 0.4s ease; } .step-content.active { display: block; /* Zobrazí se jen ten aktivní */ } @keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } /* Tlačítka vedle sebe */ .buttons-row { display: flex; justify-content: space-between; margin-top: 30px; padding-top: 20px; border-top: 1px solid #eee; } /* Boxík pro shrnutí ve 3. kroku */ .review-box { background: #f9f9f9; padding: 15px; border-radius: 8px; margin-bottom: 15px; border-left: 4px solid #3A5A40; } .addon-item, .payment-item { display: flex; align-items: center; justify-content: space-between; padding: 15px; border: 1px solid #eee; border-radius: 8px; margin-bottom: 10px; cursor: pointer; transition: 0.2s; } .addon-item:hover, .payment-item:hover { border-color: #3A5A40; background-color: #f9fdf9; } .addon-label { display: flex; align-items: center; gap: 10px; flex: 1; cursor: pointer; font-weight: 500; } .addon-price { color: #3A5A40; font-weight: 700; } .step-title { font-size: 0.85em; } input[type="radio"], input[type="checkbox"] { accent-color: #3A5A40; width: 18px; height: 18px; } .thank-you-box { background: white; padding: 50px; border-radius: 12px; box-shadow: 0 4px 20px rgba(0,0,0,0.06); max-width: 600px; margin: 0 auto; text-align: center; } .check-icon { font-size: 60px; color: #3A5A40; margin-bottom: 20px; } .order-info { background: #f9f9f9; padding: 20px; border-radius: 8px; margin: 30px 0; text-align: left; font-size: 0.95em; color: #555; } .mobile-filter-btn { display: none; } /* 2. STAV PRO MOBILY A TABLETY (do 900px) */ @media (max-width: 900px) { /* Zobrazíme tlačítko */ .mobile-filter-btn { display: block; width: 100%; padding: 15px; background-color: #ffffff; color: #333; border: 1px solid #e0e0e0; border-radius: 12px; /* Stejné zaoblení jako karty */ font-weight: 600; font-family: 'Poppins', sans-serif; cursor: pointer; text-align: center; margin-bottom: 20px; box-shadow: 0 4px 15px rgba(0,0,0,0.05); transition: background 0.3s; } .mobile-filter-btn:hover { background-color: #f2f2f2; } /* Skryjeme postranní panel ve výchozím stavu */ #filters-sidebar { display: none; } /* Třída .active panel zobrazí (přidá ji JavaScript) */ #filters-sidebar.active { display: block; animation: slideDown 0.3s ease-out; } } /* Jednoduchá animace pro otevření */ @keyframes slideDown { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: translateY(0); } } /* ========================================================= */ /* ==== OPRAVA MOBILNÍHO ZOBRAZENÍ (FINALNÍ VERZE) ==== */ /* ========================================================= */ @media screen and (max-width: 992px) { /* 1. HLAVNÍ ROZLOŽENÍ - Zrušíme grid a dáme vše pod sebe */ .room-detail-layout { display: block !important; /* Nejjistější způsob, jak dát věci pod sebe */ width: 100% !important; margin-top: 20px !important; } /* 2. LEVÝ SLOUPEC (Galerie a texty) - ve vašem HTML je to 'gallery-section' */ .gallery-section { width: 100% !important; max-width: 100% !important; display: block !important; margin-bottom: 30px !important; } /* 3. PRAVÝ SLOUPEC (Rezervace) - ve vašem HTML je to 'room-booking-aside' */ .room-booking-aside { width: 100% !important; max-width: 100% !important; position: static !important; /* Zrušíme lepení */ display: block !important; } /* 4. HLAVNÍ OBRÁZEK - Zmenšení výšky */ .main-image-container { height: 250px !important; width: 100% !important; } .main-image-container img { object-fit: cover !important; } /* 5. CENA A DOSTUPNOST - Karta */ .price-summary-card { width: 100% !important; box-sizing: border-box !important; /* Aby padding nezvětšoval šířku */ } /* 6. TEXTY - Zmenšení obřího nadpisu */ h1 { font-size: 1.8em !important; margin-bottom: 15px !important; } /* 7. Kalendář (iframe) - přizpůsobení */ .calendar-display iframe { height: 350px !important; /* Zvětšení výšky pro mobilní dotyk */ } .icon-text-block h3{ margin-top: 0; } } /* --- HAMBURGER MENU - OPRAVENÁ VERZE --- */ /* Skrytí hamburgeru na PC */ .hamburger { display: none; } /* --- MOBILNÍ ZOBRAZENÍ (Pod 992px) --- */ @media screen and (max-width: 992px) { .header-content { justify-content: flex-end; /* Tlačí prvky doprava */ } .logo { position: absolute; left: 50%; transform: translateX(-50%); /* Logo přesně na střed */ z-index: 1001; } .hamburger { display: flex; flex-direction: column; justify-content: space-around; width: 30px; height: 25px; background: transparent; border: none; cursor: pointer; z-index: 1100; margin-left: auto; /* Hamburger úplně doprava */ } .hamburger span { width: 30px; height: 3px; background: #3A5A40; border-radius: 10px; transition: all 0.3s linear; } /* MOBILNÍ MENU - PANEL */ .nav-menu { display: none; /* Skryje vodorovné menu */ position: fixed; top: 0; right: -100%; width: 150px; height: 100vh; background-color: #f0f0e4; flex-direction: column; align-items: flex-end; /* Odkazy vpravo v panelu */ justify-content: flex-start; padding: 80px 30px 20px 20px; transition: 0.4s ease-in-out; z-index: 1050; box-shadow: -5px 0 15px rgba(0,0,0,0.1); list-style: none; margin: 0; } .nav-menu.active { display: flex; right: 0; } .nav-menu li { margin: 15px 0; width: 100%; text-align: right; } .nav-menu li a { text-decoration: none; color: #555; padding: 8px 12px; transition: color 0.3s ease, border-bottom 0.3s ease; font-weight: 400; } /* Animace křížku */ .hamburger.active span:nth-child(1) { transform: rotate(45deg) translate(5px, 5px); } .hamburger.active span:nth-child(2) { opacity: 0; } .hamburger.active span:nth-child(3) { transform: rotate(-45deg) translate(7px, -7px); } } @media screen and (max-width: 992px) { /* Kontejner slideru */ .room-preview-grid { display: flex !important; /* Změna z gridu na flex */ flex-wrap: nowrap !important; /* KLÍČOVÉ: Zakáže zalamování pod sebe */ overflow-x: auto !important; /* Povolí vodorovný posun */ gap: 15px !important; padding: 20px 15px !important; /* Moderní plynulé scrollování */ scroll-snap-type: x mandatory !important; scrollbar-width: none; /* Skryje scrollbar ve Firefoxu */ } /* Skryje scrollbar v Chrome a Safari */ .room-preview-grid::-webkit-scrollbar { display: none !important; } /* Jednotlivé karty pokojů */ .room-preview-card { flex: 0 0 85% !important; /* Karta zabere 85% šířky a nesmí se smrsknout */ scroll-snap-align: center !important; /* Magnetické přichytávání na střed */ margin: 0 !important; } }