/**************************/
/****** Lodgings Page *****/
/**************************/

/* Styles pour la section Retraites thématiques */
.home-events{
    padding: 75px 0px;
    background-color: var(--purple-primary);
}
.home-events h3{
    color: var(--white);
}
.home-events .nav-tabs{
    border-color: var(--white);
}
.home-events .nav-tabs .nav-item .nav-link{
    color: #A9A9A9;
    border: none;
}
.home-events .nav-tabs .nav-item .nav-link.active{
    color: var(--white)!important;
    background: transparent;
    border: none;
    font-weight: bold;
}
.home-events .events-list{
    color: var(--white);
}
.home-events .events-list .events-item{
    padding: 24px 0px;
}
.home-events .events-list span{
    display: block;  
    color: #A9A9A9; 
}
.home-events .events-list strong{
    display: block;   
}
.home-events .events-list .btn-primary{
    border: 1px solid var(--white);
    color: var(--white);
    background: transparent;
    width: 100%;
    padding: 8px 0px;
}
.home-events .no-events{
    display: none;
    font-size: 24px;
    color: var(--white);
    margin-top: 25px;
}

@media only screen and (max-width:992px){
    .home-events .events-list .events-item{
        text-align: center;
    }
    .home-events .events-list .order-sm-3,
    .home-events .events-list .order-sm-4{
        margin-top: 15px;
    }
}
@media only screen and (max-width:768px){
    .home-events .nav-tabs .nav-item .nav-link{
        font-size: 14px;
    }
}
@media only screen and (max-width:576px){
    .home-events .events-list .order-sm-1{
        margin-top: 15px;
    }
    .home-events .events-list .order-sm-2{
        margin-top: 15px;
    }
    .home-events .events-list .order-sm-3{
        margin-top: 0px;
    }
    .home-events .events-list .order-sm-4{
        margin-top: 15px;
    }
    .nav-tabs .nav-item {
        width: 100%;
        text-align: center;
    }
    .nav-tabs .nav-item .nav-link {
        width: 100%;
        text-align: center;
        padding: 6px 0px;
    }
}
.home-events .events-list .card {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    border-radius: 12px;
    overflow: hidden;
    background: #fff;
}

.home-events .events-list .card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15) !important;
}

.home-events .events-list .card-header {
    background: #fff;
    border: none;
    padding: 1rem;
    border-radius: 12px 12px 0 0;
}

.home-events .events-list .card-body {
    border-radius: 0 0 12px 12px;
    padding: 1.5rem 1rem;
}

.home-events .events-list .card-header .fas {
    opacity: 0.7;
    font-size: 0.875rem;
}

.home-events .events-list .card-title {
    color: var(--primary-color, #5F2C70) !important;
    font-weight: 600;
    font-size: 1.1rem;
}

.home-events .events-list .card-text {
    color: #6c757d;
    font-size: 0.9rem;
    line-height: 1.5;
}

.home-events .events-list .price-range {
    border-radius: 8px;
    padding: 0.75rem;
    margin: 0.5rem 0;
}

.home-events .events-list .price-range span {
    font-size: 1.1rem;
    color: var(--primary-color, #5F2C70) !important;
}

.home-events .events-list .btn-sm {
    padding: 0.5rem 1rem;
    font-size: 0.875rem;
    border-radius: 6px;
    font-weight: 500;
}

.home-events .events-list .btn-outline-primary {
    border-color: var(--primary-color, #5F2C70);
    color: var(--primary-color, #5F2C70);
}

.home-events .events-list .btn-outline-primary:hover {
    background-color: var(--primary-color, #5F2C70);
    border-color: var(--primary-color, #5F2C70);
    color: #fff;
}

.home-events .events-list .btn-primary {
    background-color: var(--primary-color, #5F2C70);
    border-color: var(--primary-color, #5F2C70);
}

.home-events .events-list .btn-primary:hover {
    background-color: #4a1f5a;
    border-color: #4a1f5a;
}

.home-events .events-list .card {
    opacity: 0;
    transform: translateY(20px);
    animation: fadeInUp 0.6s ease forwards;
}

.home-events .events-list .card:nth-child(2) {
    animation-delay: 0.1s;
}

.home-events .events-list .card:nth-child(3) {
    animation-delay: 0.2s;
}

@keyframes fadeInUp {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}


/* Responsive */
@media (max-width: 768px) {
    .home-events .events-list .card-header {
        padding: 0.75rem;
    }
    
    .home-events .events-list .card-header .d-flex > div {
        font-size: 0.875rem;
    }
    
    .home-events .events-list .card-title {
        font-size: 1rem;
    }
    
    .home-events .events-list .card-text {
        font-size: 0.85rem;
    }
}
#lodgingsHero{
    height:600px;
}
#lodgingsHero.page-header{
    background: url('../../medias/frontend/webp/lodgings-header.webp') center/cover no-repeat;
}
#lodgingsHero h1{
    padding-right:25px;
}

@media only screen and (max-width:1440px){
}
@media only screen and (max-width:1200px){
}
@media only screen and (max-width:992px){
}
@media only screen and (max-width:768px){
    #lodgingsHero{
        height:350px;
    }
    #lodgingsHero h1{
        padding-right:0px;
    }
    #lodgingsHero.page-header {
        padding-top: 175px;
        background: url('../../medias/frontend/webp/lodgings-header-768.webp') center/cover no-repeat;
    }
}
@media only screen and (max-width:576px){
}
@media only screen and (max-width:320px){
}
@media only screen and (max-width:480px){
    #lodgingsHero.page-header {
        background: url('../../medias/frontend/webp/lodgings-header-480.webp') center/cover no-repeat;
    }
}

.lodgings-search{
    padding:75px 0px;
}
#lodgingsSearchForm #personsInput{
    border:none!important;
}

@media only screen and (max-width:1440px){
}
@media only screen and (max-width:1200px){
}
@media only screen and (max-width:992px){
}
@media only screen and (max-width:768px){
    #lodgingsSearchForm .datepicker-range-start,
    #lodgingsSearchForm .datepicker-range-end{
        border:none!important;
        border-bottom:1px solid #D9D9D9!important;
    }
    #lodgingsSearchForm .btn{
        display:block;
        width:100%;
    }
    .lodgings-search{
        padding:75px 0px;
        padding-bottom:45px;
    }
}
@media only screen and (max-width:576px){
}
@media only screen and (max-width:480px){
    .events-featured-search{
        background-size:50%;
    }
}
@media only screen and (max-width:320px){
}

.lodgings-intro{
    padding-top:75px;
}

.lodgings-types-wrapper {
    background-image: 
        url('/public/assets/medias/frontend/webp/bg-right-1.webp'),
        url('/public/assets/medias/frontend/webp/bg-right-1.webp'),
        url('/public/assets/medias/frontend/webp/bg-left-1.webp'),
        url('/public/assets/medias/frontend/webp/bg-left-1.webp');
    background-position: 
        right top, 
        right center, 
        left bottom 15%,
        left top 25%;
    background-repeat: no-repeat, no-repeat, no-repeat, no-repeat;
}
.lodgings-types{
    padding:75px 0px;
}
.lodgings-types .btn{
    margin-top:15px;
}
.lodging-carrousel img{
    max-height: 500px;
    width: 100%;
    object-fit: cover;
}

.lodgings-results{
    padding-bottom:75px;
}

@media only screen and (max-width:1440px){
}
@media only screen and (max-width:1200px){
}
@media only screen and (max-width:992px){
}
@media only screen and (max-width:768px){
    .lodgings-intro{
        padding-bottom:0px;
    }
    .lodging-carrousel{
        margin-top:25px;
        margin-bottom:25px;
    }
    .lodging-carrousel img {
        aspect-ratio: 1 / 1;
        width: 100%;
        height: auto;
        object-fit: cover;
    }
    .lodgings-types{
        padding:50px 0px;
    }
}
@media only screen and (max-width:576px){
}
@media only screen and (max-width:480px){
    .lodgings-types-wrapper {
        background-size:50%;
    }
}
@media only screen and (max-width:320px){
}

/**************************/
/*** Lodging Single Page **/
/**************************/
#lodgingSingleHero{
    height:600px;
    padding-top: 300px;
}
#lodgingSingleHero.page-header{
    background-size:cover;
    background-position:center center;
    background-repeat:no-repeat;
}
#lodgingSingleHero h1{
    margin-bottom:20px;
}
#lodgingSingleHero .btn{
    margin-top:0px;
}

@media only screen and (max-width:1440px){
}
@media only screen and (max-width:1200px){
}
@media only screen and (max-width:992px){
}
@media only screen and (max-width:768px){
    #lodgingSingleHero{
        height:500px;
    }
    #lodgingSingleHero h1{
        padding-right:0px;
    }
    #lodgingSingleHero.page-header {
        padding-top: 200px;
    }
}
@media only screen and (max-width:576px){
}
@media only screen and (max-width:320px){
}
@media only screen and (max-width:480px){
}

.lodging-gallery{
    margin:75px 0px;
}
.lodging-gallery img{
    border-radius:var(--radius);
}
.lodging-gallery img.big{
    max-height: 450px;
    width: 100%;
    object-fit: cover;
}
.lodging-gallery img.small{
    max-height: 213px;
    width: 100%;
    object-fit: cover;
}


.lodging-presentation{
    margin-bottom:100px;
}
.lodging-presentation .btn{
    margin-top:20px;
}
.lodging-presentation ul {
    list-style: none;
    padding-left: 15px;
}
.lodging-presentation ul li {
    position: relative;
    padding-left: 24px; 
    margin-bottom:6px;
}
.lodging-presentation ul li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 18px;
    height: 12px;
    background-image: url("data:image/svg+xml,%3Csvg width='18' height='12' viewBox='0 0 18 12' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M13.278 0.217309C12.9838 -0.0742744 12.5089 -0.0721557 12.2173 0.222041C11.9257 0.516238 11.9278 0.991107 12.222 1.28269L13.985 3.03C14.7005 3.73914 15.1913 4.22718 15.5234 4.64071C15.6313 4.77509 15.7155 4.8934 15.7809 5L0.75 5C0.335786 5 0 5.33579 0 5.75C0 6.16422 0.335786 6.5 0.75 6.5L15.7809 6.5C15.7155 6.6066 15.6313 6.72491 15.5234 6.85929C15.1913 7.27282 14.7005 7.76086 13.985 8.47L12.222 10.2173C11.9278 10.5089 11.9257 10.9838 12.2173 11.278C12.5089 11.5722 12.9838 11.5743 13.278 11.2827L15.0727 9.5039C15.7487 8.83395 16.3011 8.28641 16.6929 7.79854C17.1004 7.29121 17.3953 6.77628 17.4741 6.15816C17.4914 6.02265 17.5 5.88632 17.5 5.75C17.5 5.61368 17.4914 5.47735 17.4741 5.34184C17.3953 4.72372 17.1004 4.20878 16.6929 3.70146C16.3011 3.21358 15.7487 2.66604 15.0727 1.99609L13.278 0.217309Z' fill='%235F2C70'/%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
}
.lodging-presentation .card{
    border-color:var(--beige);
    color:var(--purple-secondary);
    font-weight:bold;
    text-align:center;
    margin-bottom:25px;
}
.lodging-reservation{
    padding-bottom:75px;
}
.lodging-reservation .card{
    border-color:var(--beige);
    background-color:#fff;
}
.lodging-reservation .card .card-body{
    border-radius:var(--radius);
}
.lodging-reservation #package{
    border-color:var(--beige);
    background-color:#fff;
    border-radius:var(--radius);
}
.lodging-reservation #packageDetails{
    display:none;
    height:355px;
    font-size:13px;
    line-height:16px;
}
.lodging-reservation #packageDetails .title{
    font-weight:bold;
    font-size:16px;
    margin-bottom:6px;
}
.lodging-reservation #packageDetails p{
    margin-bottom:6px;
}
.lodging-reservation #packageDetails .spacer{
    width:100%;
    height:2px;
    margin-bottom:6px;
}
.lodging-reservation #packageDetails .table tr td:first-child{
    border-right:1px solid #e3e3e3;
}
.lodging-reservation #packageDetails .table tr:last-child td{
    border-bottom:none;
}
.lodging-reservation .table>:not(caption)>*>*{
    padding: .3rem .3rem;
}
.lodging-reservation #packageOptionsSummary{
    display:none;
}
.lodging-reservation #packageOptionsSummary .title{
    font-weight:bold;
    margin-top:3px;
}
.lodging-reservation #packageOptionsSummary p{
    margin-bottom:0px;
}
.lodging-reservation #packageOptionsSummary .spacer{
    background-color:#e3e3e3;
    width:100%;
    height:1px;
    margin-top:15px;
    margin-bottom:15px;
}
.lodging-reservation #packageSummary{
    
}
.lodging-reservation #packageSummary .title{
    font-size:18px;
}
.lodging-reservation #packageSummary .table-wrapper{
    padding-left:20px;
}
.lodging-reservation #packageSummary .table{
    width:100%;
}
.lodging-reservation #packageSummary .table tr td:last-child{
    text-align:right;
}
.lodging-reservation #packageSummary .table tr:last-child td{
    border:none;
}
.lodging-reservation #packageSummary .table-package tr:first-child td{
    border:none;
    font-weight:bold;
}
.lodging-reservation #packageSummary .table-subtotal tr{
    font-weight:bold;
}
.lodging-reservation #packageSummary .table-subtotal tr td:nth-child(2),
.lodging-reservation #packageSummary .table-subtotal tr td:nth-child(3) {
    border-bottom:1px solid #e3e3e3;
}

@media only screen and (max-width:1440px){
}
@media only screen and (max-width:1200px){
}
@media only screen and (max-width:992px){
}
@media only screen and (max-width:768px){
    .lodging-reservation #packageOptionsSummary p{
        margin-bottom:8px;
    }
}
@media only screen and (max-width:576px){
}
@media only screen and (max-width:320px){
}
@media only screen and (max-width:480px){
}

.lodgings-bottom{
    padding:75px 0px;
    text-align:center;
}
.lodgings-bottom .title{
    font-size:32px;
}


@media only screen and (max-width:1440px){
}
@media only screen and (max-width:1200px){
    .lodgings-bottom .title{
        font-size:30px;
    }
}
@media only screen and (max-width:1048px){
    .lodgings-bottom .title{
        font-size:28px;
    }
}
@media only screen and (max-width:992px){
    .lodgings-bottom .title{
        font-size:26px;
    }
}
@media only screen and (max-width:768px){
}
@media only screen and (max-width:576px){
}
@media only screen and (max-width:320px){
}
@media only screen and (max-width:480px){
}