/********** Template CSS **********/

:root {

    --primary: #FEA116;

    --light: #F1F8FF;

    --dark: #0F172B;

}



.fw-medium {

    font-weight: 500 !important;

}



.fw-semi-bold {

    font-weight: 600 !important;

}



.back-to-top {

    position: fixed;

    display: none;

    right: 45px;

    bottom: 45px;

    z-index: 99;

}





/*** Spinner ***/

#spinner {

    opacity: 0;

    visibility: hidden;

    transition: opacity .5s ease-out, visibility 0s linear .5s;

    z-index: 99999;

}



#spinner.show {

    transition: opacity .5s ease-out, visibility 0s linear 0s;

    visibility: visible;

    opacity: 1;

}





/*** Button ***/

.btn {

    font-weight: 500;

    text-transform: uppercase;

    transition: .5s;

}



.btn.btn-primary,

.btn.btn-secondary {

    color: #FFFFFF;

}



.btn-square {

    width: 38px;

    height: 38px;

}



.btn-sm-square {

    width: 32px;

    height: 32px;

}



.btn-lg-square {

    width: 48px;

    height: 48px;

}



.btn-square,

.btn-sm-square,

.btn-lg-square {

    padding: 0;

    display: flex;

    align-items: center;

    justify-content: center;

    font-weight: normal;

    border-radius: 2px;

}





/*** Navbar ***/

.navbar-dark .navbar-nav .nav-link {

    margin-right: 30px;

    padding: 25px 0;

    color: #FFFFFF;

    font-size: 15px;

    text-transform: uppercase;

    outline: none;

}



.navbar-dark .navbar-nav .nav-link:hover,

.navbar-dark .navbar-nav .nav-link.active {

    color: var(--primary);

}



@media (max-width: 991.98px) {

    .navbar-dark .navbar-nav .nav-link  {

        margin-right: 0;

        padding: 10px 0;

    }

}





/*** Header ***/

.carousel-caption {

    top: 0;

    left: 0;

    right: 0;

    bottom: 0;

    background: rgba(15, 23, 43, .7);

    z-index: 1;

}



.carousel-control-prev,

.carousel-control-next {

    width: 10%;

}



.carousel-control-prev-icon,

.carousel-control-next-icon {

    width: 3rem;

    height: 3rem;

}



@media (max-width: 768px) {

    #header-carousel .carousel-item {

        position: relative;

        min-height: 450px;

    }

    

    #header-carousel .carousel-item img {

        position: absolute;

        width: 100%;

        height: 100%;

        object-fit: cover;

    }

}



.page-header {

    background-position: center center;

    background-repeat: no-repeat;

    background-size: cover;

}



.page-header-inner {

    background: rgba(15, 23, 43, .7);

}



.breadcrumb-item + .breadcrumb-item::before {

    color: var(--light);

}



.booking {

    position: relative;

    margin-top: -100px !important;

    z-index: 1;

}





/*** Section Title ***/

.section-title {

    position: relative;

    display: inline-block;

}



.section-title::before {

    position: absolute;

    content: "";

    width: 45px;

    height: 2px;

    top: 50%;

    left: -55px;

    margin-top: -1px;

    background: var(--primary);

}



.section-title::after {

    position: absolute;

    content: "";

    width: 45px;

    height: 2px;

    top: 50%;

    right: -55px;

    margin-top: -1px;

    background: var(--primary);

}



.section-title.text-start::before,

.section-title.text-end::after {

    display: none;

}





/*** Service ***/

.service-item {

    height: 320px;

    padding: 30px;

    display: flex;

    flex-direction: column;

    justify-content: center;

    text-align: center;

    background: #FFFFFF;

    box-shadow: 0 0 45px rgba(0, 0, 0, .08);

    transition: .5s;

}



.service-item:hover {

    background: var(--primary);

}



.service-item .service-icon {

    margin: 0 auto 30px auto;

    width: 65px;

    height: 65px;

    transition: .5s;

}



.service-item i,

.service-item h5,

.service-item p {

    transition: .5s;

}



.service-item:hover i,

.service-item:hover h5,

.service-item:hover p {

    color: #FFFFFF !important;

}





/*** Youtube Video ***/

.video {

    position: relative;

    height: 100%;

    min-height: 500px;

    background: linear-gradient(rgba(15, 23, 43, .1), rgba(15, 23, 43, .1)), url(../img/video.jpg);

    background-position: center center;

    background-repeat: no-repeat;

    background-size: cover;

}



.video .btn-play {

    position: absolute;

    z-index: 3;

    top: 50%;

    left: 50%;

    transform: translateX(-50%) translateY(-50%);

    box-sizing: content-box;

    display: block;

    width: 32px;

    height: 44px;

    border-radius: 50%;

    border: none;

    outline: none;

    padding: 18px 20px 18px 28px;

}



.video .btn-play:before {

    content: "";

    position: absolute;

    z-index: 0;

    left: 50%;

    top: 50%;

    transform: translateX(-50%) translateY(-50%);

    display: block;

    width: 100px;

    height: 100px;

    background: var(--primary);

    border-radius: 50%;

    animation: pulse-border 1500ms ease-out infinite;

}



.video .btn-play:after {

    content: "";

    position: absolute;

    z-index: 1;

    left: 50%;

    top: 50%;

    transform: translateX(-50%) translateY(-50%);

    display: block;

    width: 100px;

    height: 100px;

    background: var(--primary);

    border-radius: 50%;

    transition: all 200ms;

}



.video .btn-play img {

    position: relative;

    z-index: 3;

    max-width: 100%;

    width: auto;

    height: auto;

}



.video .btn-play span {

    display: block;

    position: relative;

    z-index: 3;

    width: 0;

    height: 0;

    border-left: 32px solid var(--dark);

    border-top: 22px solid transparent;

    border-bottom: 22px solid transparent;

}



@keyframes pulse-border {

    0% {

        transform: translateX(-50%) translateY(-50%) translateZ(0) scale(1);

        opacity: 1;

    }



    100% {

        transform: translateX(-50%) translateY(-50%) translateZ(0) scale(1.5);

        opacity: 0;

    }

}



#videoModal {

    z-index: 99999;

}



#videoModal .modal-dialog {

    position: relative;

    max-width: 800px;

    margin: 60px auto 0 auto;

}



#videoModal .modal-body {

    position: relative;

    padding: 0px;

}



#videoModal .close {

    position: absolute;

    width: 30px;

    height: 30px;

    right: 0px;

    top: -30px;

    z-index: 999;

    font-size: 30px;

    font-weight: normal;

    color: #FFFFFF;

    background: #000000;

    opacity: 1;

}





/*** Testimonial ***/

.testimonial {

    background: linear-gradient(rgba(15, 23, 43, .7), rgba(15, 23, 43, .7)), url(../img/carousel-2.jpg);

    background-position: center center;

    background-repeat: no-repeat;

    background-size: cover;

}



.testimonial-carousel {

    padding-left: 65px;

    padding-right: 65px;

}



.testimonial-carousel .testimonial-item {

    padding: 30px;

}



.testimonial-carousel .owl-nav {

    position: absolute;

    width: 100%;

    height: 40px;

    top: calc(50% - 20px);

    left: 0;

    display: flex;

    justify-content: space-between;

    z-index: 1;

}



.testimonial-carousel .owl-nav .owl-prev,

.testimonial-carousel .owl-nav .owl-next {

    position: relative;

    width: 40px;

    height: 40px;

    display: flex;

    align-items: center;

    justify-content: center;

    color: #FFFFFF;

    background: var(--primary);

    border-radius: 2px;

    font-size: 18px;

    transition: .5s;

}



.testimonial-carousel .owl-nav .owl-prev:hover,

.testimonial-carousel .owl-nav .owl-next:hover {

    color: var(--primary);

    background: #FFFFFF;

}





/*** Team ***/

.team-item,

.team-item .bg-primary,

.team-item .bg-primary i {

    transition: .5s;

}



.team-item:hover {

    border-color: var(--secondary) !important;

}



.team-item:hover .bg-primary {

    background: var(--secondary) !important;

}



.team-item:hover .bg-primary i {

    color: var(--secondary) !important;

}





/*** Footer ***/

.newsletter {

    position: relative;

    z-index: 1;

}



.footer {

    position: relative;

    margin-top: -110px;

    padding-top: 180px;

}



.footer .btn.btn-social {

    margin-right: 5px;

    width: 35px;

    height: 35px;

    display: flex;

    align-items: center;

    justify-content: center;

    color: var(--light);

    border: 1px solid #FFFFFF;

    border-radius: 35px;

    transition: .3s;

}



.footer .btn.btn-social:hover {

    color: var(--primary);

}



.footer .btn.btn-link {

    display: block;

    margin-bottom: 5px;

    padding: 0;

    text-align: left;

    color: #FFFFFF;

    font-size: 15px;

    font-weight: normal;

    text-transform: capitalize;

    transition: .3s;

}



.footer .btn.btn-link::before {

    position: relative;

    content: "\f105";

    font-family: "Font Awesome 5 Free";

    font-weight: 900;

    margin-right: 10px;

}



.footer .btn.btn-link:hover {

    letter-spacing: 1px;

    box-shadow: none;

}



.footer .copyright {

    padding: 25px 0;

    font-size: 15px;

    border-top: 1px solid rgba(256, 256, 256, .1);

}



.footer .copyright a {

    color: var(--light);

}



.footer .footer-menu a {

    margin-right: 15px;

    padding-right: 15px;

    border-right: 1px solid rgba(255, 255, 255, .3);

}



.footer .footer-menu a:last-child {

    margin-right: 0;

    padding-right: 0;

    border-right: none;

}

.bg-navy { background:#0f2033 !important; } /* příklad */

/* Odkazy uvnitř karty – standardně oranžové… */

.service-item a {

  color: var(--bs-primary);

  font-weight: 600;

  transition: color .15s ease-in-out;

}



/* …ale při hoveru celé karty přepnout na bílou kvůli kontrastu */

.service-item:hover a,

.service-item:focus-within a {

  color: #fff !important;

  text-decoration: underline; /* volitelné */

}



/* Pro jistotu i ikona uvnitř karty do bílé při hoveru */

.service-item:hover i {

  color: #fff !important;

}

/* výchozí stav – oranžová jako zbytek webu */

.service-item .rest-link,

.service-item .rest-link:visited {

  color: var(--bs-primary);

  font-weight: 600;

  text-decoration: none;

}



/* při hoveru celé karty -> bílé odkazy (kvůli oranžovému pozadí) */

.service-item:hover .rest-link,

.service-item:focus-within .rest-link {

  color: #fff;

  text-decoration: underline; /* volitelné */

}

/* =======================================================

   OPRAVENÉ A PŘESNĚ ZACÍLENÉ styly pro karty služeb

   ======================================================= */



/* Pravidlo se aplikuje jen na sloupce uvnitř #nase-doporuceni */

#nase-doporuceni .row > [class*='col-'] {

    display: flex;

}



/* Pravidlo se aplikuje jen na karty uvnitř #nase-doporuceni */

#nase-doporuceni .service-item {

    height: 100%;

    display: flex;

    flex-direction: column;

}



/* Pravidlo se aplikuje jen na seznamy uvnitř karet v #nase-doporuceni */

#nase-doporuceni .service-item .list-unstyled {

    margin-top: auto;

    padding-top: 1rem;

}



/* Pravidlo pro ikony v zacílené sekci, aby se nezmenšovaly */

#nase-doporuceni .service-item .service-icon {

    flex-shrink: 0;

}

/* Pravidlo se aplikuje jen na seznamy uvnitř karet v #nase-doporuceni */

#nase-doporuceni .service-item .list-unstyled {

    margin-top: auto;

    padding-top: 1rem;

}

/* =======================================================

   FINÁLNÍ A KOMPLETNÍ STYLY pro sekci "Naše doporučení"

   ======================================================= */



/* Aplikuje se na sloupce a zajistí, že se budou moci natahovat na stejnou výšku */

#nase-doporuceni .row > [class*='col-'] {

    display: flex;

    flex-direction: column;

}



/* Hlavní styl pro naše nové, flexibilní karty */

#nase-doporuceni .service-item {

    /* KROK 1: Přepíšeme pevnou výšku šablony a nastavíme flexibilní */

    height: 100%;



    /* KROK 2: Přepíšeme centrování šablony a zarovnáme obsah nahoru a doleva */

    justify-content: flex-start; /* Zarovnání obsahu NAHORU */

    text-align: left;            /* Zarovnání textu DOLEVA */



    /* KROK 3: Ponecháme flexbox pro vnitřní uspořádání */

    display: flex;

    flex-direction: column;

}



/* Odkazy uvnitř karet v této sekci */

#nase-doporuceni .service-item .list-unstyled {

    margin-top: auto;   /* Odsune seznam odkazů dolů */

    padding-top: 1rem;  /* Přidá mezeru nad seznamem */

}



/* Ochrana ikony proti zmenšování v této sekci */

#nase-doporuceni .service-item .service-icon {

    flex-shrink: 0;

    text-align: center; /* Ikonu chceme na střed, i když je text v kartě vlevo */

}

/* ==============================================

   Styl pro sekci s výzvou do fotogalerie

   ============================================== */

.gallery-cta {

    /* DŮLEŽITÉ: Vyměňte za cestu k vaší nejlepší fotce apartmánu */

    background-image: linear-gradient(rgba(15, 23, 43, .7), rgba(15, 23, 43, .7)), url('../img/IMG-6859.jpg');

    background-position: center center;

    background-size: cover;

    background-attachment: fixed; /* Vytváří elegantní parallax efekt při scrollování */

}



/* Změna barvy textu a nadpisů na bílou, aby byly na tmavém pozadí čitelné */

.gallery-cta h1,

.gallery-cta p {

    color: #FFFFFF;

}

/* =======================================================

   Vylepšení vzhledu rezervačního formuláře

   ======================================================= */



.booking-form-wrapper {

    /* Hlavní změna: Tlustý rámeček nahoře v primární barvě */

    border-top: 5px solid var(--primary);

    border-radius: 8px; /* Jemně zaoblené rohy */

    padding: 35px; /* Zachováme původní vnitřní odsazení */

}



/* Zvětšíme a zpřehledníme input pole */

.booking-form-wrapper .form-control {

    min-height: 55px; /* Lehce vyšší pole pro lepší klikání */

    border-radius: 6px;

    border: 1px solid #ced4da;

}



/* Vylepšení tlačítka */

.booking-form-wrapper .btn {

    min-height: 55px; /* Stejná výška jako input pole */

    border-radius: 6px;

    font-weight: 600; /* Lehce tučnější písmo */

}

/* ==============================================

   Styly pro sekci Vybavení apartmánu

   ============================================== */

.amenity-list li {

    display: flex;

    align-items: flex-start;

    margin-bottom: 0.5rem; /* Mezera mezi položkami */

}



.amenity-list .fa-check {

    margin-top: 5px; /* Lehce posune fajfku dolů pro lepší zarovnání */

}

:root{

  --cc-bg: #0e0f12;

  --cc-card: #15171c;

  --cc-text: #eaecef;

  --cc-muted:#a9b0bb;

  --cc-border: #262a32;

  --cc-accent: #ff7a00;       /* sladíš s primární barvou webu (oranžová apod.) */

  --cc-radius: 14px;

  --cc-shadow: 0 14px 40px rgba(0,0,0,.35);

}



.cc-banner[hidden]{ display:none !important; }

.cc-banner{

  position: fixed; inset: auto 0 0 0; z-index: 9999;

  display:flex; justify-content:center; padding: 12px;

  background: transparent;

}

.cc-card{

  width:min(1000px, calc(100% - 24px));

  display:flex; gap:20px; align-items:center; justify-content:space-between;

  background: var(--cc-card); color: var(--cc-text);

  border:1px solid var(--cc-border); border-radius: var(--cc-radius);

  padding: 18px 20px; box-shadow: var(--cc-shadow);

}

.cc-text{ font-size: 15px; line-height:1.4 }

.cc-text p{ margin:.35rem 0 0 }

.cc-link{ color: var(--cc-accent); text-decoration: underline; }

.cc-actions{ display:flex; gap:10px; flex-wrap:wrap; }

.cc-actions-end{ justify-content:flex-end; margin-top: 8px; }



.cc-btn{

  appearance:none; border-radius: 11px; padding:10px 14px; font-weight:600;

  border:1px solid var(--cc-border); background:#1a1d23; color: var(--cc-text);

  cursor:pointer; transition: all .15s ease;

}

.cc-btn:hover{ transform: translateY(-1px); }

.cc-btn-primary{ background: var(--cc-accent); color:#111; border-color: transparent; }

.cc-btn-primary:hover{ filter:brightness(0.95); }

.cc-btn-outline{ background:transparent; color: var(--cc-text); }

.cc-btn-secondary{ background:#20242b; }



@media (max-width: 768px){

  .cc-card{ flex-direction:column; align-items:stretch; }

  .cc-actions{ justify-content:space-between; }

}



/* Modal */

.cc-modal[aria-hidden="true"]{ display:none; }

.cc-modal{

  position: fixed; inset:0; z-index: 10000;

}

.cc-backdrop{

  position:absolute; inset:0; background: rgba(0,0,0,.55); backdrop-filter: blur(2px);

}

.cc-dialog{

  position: relative; margin: 7vh auto 0; width:min(720px, calc(100% - 24px));

  background: var(--cc-card); color: var(--cc-text);

  border:1px solid var(--cc-border); border-radius: var(--cc-radius);

  box-shadow: var(--cc-shadow); padding: 22px 20px 18px;

}

.cc-muted{ color: var(--cc-muted); margin:.25rem 0 1rem }

.cc-list{ list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:12px; }

.cc-row{ display:flex; align-items:center; justify-content:space-between; gap:20px; padding:12px 10px; border:1px solid var(--cc-border); border-radius:12px; }

.cc-label{ font-weight:700; }

.cc-note{ color: var(--cc-muted); font-size: .9rem; }



/* Switch */

.cc-switch{ position:relative; width:52px; height:30px; display:inline-block; }

.cc-switch input{ width:0; height:0; opacity:0; position:absolute; }

.cc-switch span{

  position:absolute; inset:0; background:#2a2f38; border-radius:999px; transition:.2s;

  box-shadow: inset 0 0 0 1px var(--cc-border);

}

.cc-switch span:before{

  content:""; position:absolute; width:22px; height:22px; left:4px; top:4px; border-radius:50%;

  background:#c9cfd9; transition:.2s;

}

.cc-switch input:checked + span{ background: var(--cc-accent); box-shadow:none; }

.cc-switch input:checked + span:before{ left:26px; background:#111; }



.cc-close{

  position:absolute; top:6px; right:10px; border:0; background:transparent; color:var(--cc-muted);

  font-size:22px; cursor:pointer; padding:6px; line-height:1;

}

.cc-close:hover{ color: var(--cc-text); }



/* Reopen floating button */

.cc-reopen[hidden]{ display:none !important; }

.cc-reopen{

  position: fixed; left:16px; bottom:16px; z-index:9998;

  border-radius: 999px; border:1px solid var(--cc-border); background: var(--cc-card); color: var(--cc-text);

  width:46px; height:46px; display:grid; place-items:center; box-shadow: var(--cc-shadow);

  cursor: pointer; transition: transform .15s ease;

}

.cc-reopen:hover{ transform: translateY(-1px); }