*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html{-webkit-text-size-adjust:100%;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
body{min-height:100vh;line-height:1.5;font-family:"Inter",system-ui,sans-serif;background:#fafaf8}
img,picture,video,canvas,svg{display:block;max-width:100%;height:auto}
button{background:none;border:none;cursor:pointer;font:inherit;color:inherit}
a{color:inherit;text-decoration:none}
ul,ol{list-style:none}
:focus-visible{outline:2px solid currentColor;outline-offset:2px}


.nav [data-lucide]{stroke-width:1.5}

.hero{
    position:relative;
    height:min(100vh,860px);
    margin:0.5rem;
    border-radius:0.5rem;
    overflow:hidden;
    background-image:url("../assets/images/hero.jpg");
    background-size:cover;
    background-position:center;
    background-repeat:no-repeat;
    pointer-events:none;
}

.hero::after{
    content:"";
    position:absolute;
    left:0;right:0;bottom:0;
    height:100%;
    background:linear-gradient(to top,rgba(0,0,0,0.92) 0%,rgba(0,0,0,0.75) 18%,rgba(0,0,0,0.5) 38%,rgba(0,0,0,0.25) 58%,rgba(0,0,0,0) 75%);
    pointer-events:none;
}

.nav{
    position:relative;
    z-index:10;
    pointer-events:auto;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:2.5rem;
    padding:1.1rem clamp(1.25rem,4vw,2.5rem);
    color:#fff;
    font-size:0.9375rem;
    font-weight:500;
}


.nav__left{
    display:flex;
    align-items:center;
    gap:2.75rem;
    flex-shrink:0;
}

.nav__logo{
    display:inline-flex;
    align-items:center;
    gap:0.5rem;
    color:#fff;
    cursor:pointer;
    transition:opacity .3s ease;
}

.nav__logo:hover{opacity:.5}

.nav__logo-icon{
    width:1.85rem;
    height:1.85rem;
}

.nav__logo-text{
    font-size:1.5rem;
    font-weight:700;
    letter-spacing:-0.01em;
    line-height:1;
}

.nav__menu{
    display:flex;
    align-items:center;
    gap:2.35rem;
}

.nav__link{
    display:inline-flex;
    align-items:center;
    color:#fff;
    font-size:0.9375rem;
    font-weight:500;
    line-height:1;
    white-space:nowrap;
    cursor:pointer;
    padding:0.4rem 0;
    transition:opacity .3s ease, color .3s ease;
}


.nav__menu:has(.nav__link:hover) .nav__link:not(:hover){opacity:.5}


.nav__right{
    display:flex;
    align-items:center;
    gap:1.5rem;
    flex-shrink:0;
}


.nav__search{
    position:relative;
    display:flex;
    align-items:center;
    width:380px;
    background:rgba(255,255,255,0.1);
    border:1px solid rgba(255,255,255,0.16);
    border-radius:0.6rem;
    padding:0.7rem 1.25rem;
    backdrop-filter:blur(8px);
    -webkit-backdrop-filter:blur(8px);
}

.nav__search:hover{opacity:1}

.nav__search-input{
    width:100%;
    background:transparent;
    border:none;
    outline:none;
    color:#fff;
    font:inherit;
    font-size:1rem;
    text-align:left;
    padding:0;
    margin:0;
}

.nav__search-input::placeholder{color:rgba(255,255,255,0.7)}

.nav__search-btn{
    position:absolute;
    right:0.6rem;
    top:50%;
    transform:translateY(-50%);
    display:inline-flex;
    align-items:center;
    justify-content:center;
    color:#fff;
    padding:0.2rem;
    border-radius:0.3rem;
    cursor:pointer;
    flex-shrink:0;
    transition:opacity .3s ease;
}

.nav__search-btn:hover{opacity:.5}
.nav__search-btn svg{
    width:1.35rem;
    height:1.35rem;
}


.nav__lang{
    display:inline-flex;
    align-items:center;
    gap:0.45rem;
    color:#fff;
    cursor:pointer;
    padding:0.25rem 0.1rem;
    transition:opacity .3s ease;
}

.nav__lang:hover{opacity:.5}

.nav__lang-icon{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:2.3rem;
    height:2.3rem;
    background:#fff;
    color:#111;
    border-radius:999px;
}

.nav__lang-icon svg{
    width:1.2rem;
    height:1.2rem;
    color:#111;
}

.nav__lang-code{
    font-size:1.0625rem;
    font-weight:500;
    letter-spacing:0.02em;
    line-height:1;
    color:#fff;
}

.nav__login{
    color:#fff;
    font-size:1.0625rem;
    font-weight:500;
    padding:0.45rem 0.1rem;
    cursor:pointer;
    transition:opacity .3s ease;
}

.nav__login:hover{opacity:.5}

.nav__signup{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding:0.75rem 1.5rem;
    background:#fff;
    color:#111;
    font-size:1.0625rem;
    font-weight:600;
    border-radius:0.6rem;
    cursor:pointer;
    transition:opacity .3s ease;
}

.nav__signup:hover{opacity:.5}


.nav__toggle{
    display:none;
    align-items:center;
    justify-content:center;
    width:2rem;
    height:2rem;
    color:#fff;
    transition:opacity .3s ease;
}

.nav__toggle:hover{opacity:.5}

.nav__toggle svg{
    width:1.75rem;
    height:1.75rem;
    stroke-width:1.5;
}


.nav__mobile{
    position:fixed;
    inset:0;
    z-index:60;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:0.35rem;
    padding:2rem 1.5rem;
    background:rgba(17,17,17,0.97);
    backdrop-filter:blur(20px);
    -webkit-backdrop-filter:blur(20px);
    opacity:0;
    visibility:hidden;
    transform:translateY(-12px);
    transition:opacity .35s ease, transform .35s ease, visibility .35s ease;
}

.nav__mobile.is-open{
    opacity:1;
    visibility:visible;
    transform:none;
}


.nav__mobile-close{
    position:absolute;
    top:1.1rem;
    right:1.1rem;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:2.5rem;
    height:2.5rem;
    color:#fff;
    transition:opacity .25s ease;
}

.nav__mobile-close:hover{opacity:.5}

.nav__mobile-close svg{
    width:1.75rem;
    height:1.75rem;
    stroke-width:1.5;
}

.nav__mobile-link{
    padding:0.85rem 1rem;
    color:#fff;
    font-size:1.5rem;
    font-weight:500;
    letter-spacing:-0.01em;
    line-height:1;
    text-align:center;
    transition:opacity .25s ease;
}

.nav__mobile-link:hover{opacity:.5}

.nav__mobile-actions{
    display:flex;
    align-items:center;
    gap:1rem;
    padding-top:1.5rem;
    margin-top:1.25rem;
    border-top:1px solid rgba(255,255,255,0.12);
}

.nav__mobile-actions .nav__login{
    font-size:1.0625rem;
    padding:0.55rem 0.1rem;
}
.nav__mobile-actions .nav__signup{
    font-size:1.0625rem;
    padding:0.7rem 1.5rem;
}


.hero__bottom{
    position:absolute;
    left:clamp(1.25rem,6vw,12rem);
    right:clamp(1.25rem,6vw,12rem);
    bottom:2rem;
    z-index:3;
    pointer-events:auto;
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    gap:2rem;
}

.hero__title{
    margin:0;
    color:#fff;
    font-size:clamp(2.1rem,3.8vw,3rem);
    font-weight:500;
    letter-spacing:-0.03em;
    line-height:1.05;
    pointer-events:none;
    text-shadow:0 2px 12px rgba(0,0,0,0.35);
}


.search{
    display:flex;
    flex-direction:column;
    gap:1rem;
    padding:1.35rem 1.5rem;
    width:100%;
    background:#f3f3f1;
    color:#111;
    border-radius:0.75rem;
    font-size:1rem;
}

.search__row{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:1rem;
}

.search__field{
    display:flex;
    flex-direction:column;
    gap:0.5rem;
    min-width:0;
}

.search__label{
    font-size:0.875rem;
    font-weight:600;
    color:#111;
    line-height:1;
    padding-left:0.1rem;
}

.search__input{
    position:relative;
    display:flex;
    align-items:center;
    gap:0.65rem;
    background:#e9e9e6;
    border-radius:0.625rem;
    padding:0.8rem 1rem;
    cursor:pointer;
}

.search__text{
    flex:1;
    min-width:0;
    background:transparent;
    border:none;
    outline:none;
    color:#111;
    font:inherit;
    font-size:1rem;
    padding:0;
    cursor:pointer;
}

.search__text::placeholder{color:rgba(17,17,17,0.55)}

.search__icon{
    width:1.25rem;
    height:1.25rem;
    color:rgba(17,17,17,0.7);
    flex-shrink:0;
    stroke-width:1.75;
}

.search__caret{
    width:1.15rem;
    height:1.15rem;
    color:rgba(17,17,17,0.55);
    flex-shrink:0;
    stroke-width:1.75;
}

.search__footer{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:1rem;
    flex-wrap:wrap;
}

.search__filter{
    display:flex;
    align-items:center;
    gap:0.65rem;
    flex-wrap:wrap;
}

.search__filter-label{
    font-size:0.9375rem;
    font-weight:600;
    color:#111;
    margin-right:0.25rem;
}

.search__chip{
    display:inline-flex;
    align-items:center;
    padding:0.4rem 0.85rem;
    background:#fff;
    color:#111;
    font-size:0.875rem;
    font-weight:500;
    border:1px solid rgba(17,17,17,0.08);
    border-radius:999px;
    cursor:pointer;
    transition:background .2s ease, color .2s ease, border-color .2s ease;
}

.search__chip:hover{background:#e9e9e6}

.search__chip--active,
.search__chip--active:hover{
    background:#111;
    color:#fff;
    border-color:#111;
}

.search__submit{
    display:inline-flex;
    align-items:center;
    gap:0.6rem;
    padding:0.85rem 2rem;
    background:#111;
    color:#fff;
    font-size:1.0625rem;
    font-weight:400;
    border-radius:0.625rem;
    cursor:pointer;
    transition:opacity .2s ease;
}

.search__submit:hover{opacity:.85}

.search__submit svg{
    width:1.25rem;
    height:1.25rem;
    stroke-width:2;
}



.destinations,
.trending{
    padding:3.5rem clamp(1.25rem,6vw,12.5rem) 1.5rem;
    color:#111;
}

.destinations [data-lucide],
.trending [data-lucide]{stroke-width:1.5}

.section-head{
    display:flex;
    flex-direction:column;
    gap:0.6rem;
    margin-bottom:2rem;
}

.section-head__title{
    font-size:2rem;
    font-weight:600;
    letter-spacing:-0.02em;
    line-height:1.1;
}

.section-head__subtitle{
    font-size:1rem;
    color:rgba(17,17,17,0.65);
}



.destinations__grid{
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:1.5rem;
}

.destination{
    display:flex;
    flex-direction:column;
    gap:1.1rem;
    min-width:0;
}

.destination__top{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:1rem;
}

.destination__info{
    display:flex;
    flex-direction:column;
    gap:0.55rem;
}

.destination__name{
    font-size:1.25rem;
    font-weight:600;
    letter-spacing:-0.01em;
    line-height:1;
}

.destination__count{
    display:inline-flex;
    align-items:center;
    gap:0.45rem;
    font-size:0.9375rem;
    color:rgba(17,17,17,0.65);
}

.destination__count svg{
    width:1.05rem;
    height:1.05rem;
    color:rgba(17,17,17,0.65);
}

.destination__btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:2.6rem;
    height:2.6rem;
    background:#fff;
    border:1px solid rgba(17,17,17,0.12);
    border-radius:0.7rem;
    color:#111;
    flex-shrink:0;
    transition:background .2s ease, color .2s ease;
}

.destination__btn:hover{background:#111;color:#fff}

.destination__btn svg{
    width:1.15rem;
    height:1.15rem;
}

.destination__img{
    width:100%;
    height:210px;
    object-fit:cover;
    border-radius:0.5rem;
}



.trending{padding-top:2.5rem;padding-bottom:3.5rem}

.trending__toolbar{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:1rem;
    flex-wrap:wrap;
    margin-bottom:2rem;
}

.trending__tabs{
    display:flex;
    align-items:center;
    gap:0.6rem;
    flex-wrap:wrap;
}

.trending__tab{
    display:inline-flex;
    align-items:center;
    padding:0.6rem 1.15rem;
    background:transparent;
    color:#111;
    font-size:0.9375rem;
    font-weight:500;
    border-radius:999px;
    transition:background .2s ease;
}

.trending__tab:hover{background:#efefec}

.trending__tab--active,
.trending__tab--active:hover{background:#f3f3f1}

.trending__all{
    display:inline-flex;
    align-items:center;
    gap:0.6rem;
    padding:0.7rem 1.35rem;
    background:#fff;
    border:1px solid rgba(17,17,17,0.12);
    border-radius:0.7rem;
    font-size:0.9375rem;
    font-weight:500;
    transition:background .2s ease, color .2s ease;
}

.trending__all:hover{background:#111;color:#fff}

.trending__all svg{
    width:1.05rem;
    height:1.05rem;
}

.trending__row{position:relative}


.trending__grid{
    display:flex;
    gap:1.5rem;
    overflow-x:auto;
    scroll-snap-type:x mandatory;
    scrollbar-width:none;
    -ms-overflow-style:none;
}

.trending__grid::-webkit-scrollbar{display:none}

.hotel{
    display:flex;
    flex-direction:column;
    min-width:0;
    flex:0 0 calc((100% - 4.5rem)/4);
    scroll-snap-align:start;
}

.hotel__media{
    position:relative;
    margin-bottom:1.1rem;
    border-radius:0.5rem;
    overflow:hidden;
}

.hotel__img{
    width:100%;
    height:260px;
    object-fit:cover;
    border-radius:0.5rem;
    transition:transform .45s ease;
}

.hotel:hover .hotel__img{transform:scale(1.05)}

.hotel__fav{
    position:absolute;
    top:0.85rem;
    right:0.85rem;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:2.3rem;
    height:2.3rem;
    background:rgba(255,255,255,0.35);
    border-radius:999px;
    color:#fff;
    backdrop-filter:blur(6px);
    -webkit-backdrop-filter:blur(6px);
    transition:background .2s ease;
}

.hotel__fav:hover{background:rgba(255,255,255,0.6)}

.hotel__fav svg{
    width:1.15rem;
    height:1.15rem;
    fill:rgba(255,255,255,0.9);
    stroke:rgba(255,255,255,0.9);
    transition:fill .2s ease, stroke .2s ease;
}

.hotel__fav.is-active{background:rgba(255,255,255,0.9)}

.hotel__fav.is-active svg{
    fill:#e5484d;
    stroke:#e5484d;
}

.hotel__name{
    font-size:1.125rem;
    font-weight:600;
    letter-spacing:-0.01em;
    margin-bottom:0.55rem;
}

.hotel__meta{
    display:inline-flex;
    align-items:center;
    gap:0.4rem;
    font-size:0.9375rem;
    color:rgba(17,17,17,0.65);
    margin-bottom:0.4rem;
}

.hotel__meta svg{
    width:1rem;
    height:1rem;
    color:rgba(17,17,17,0.65);
}

.hotel__meta--rating svg{
    color:#f5a623;
    fill:#f5a623;
    stroke:#f5a623;
}

.hotel__price{
    display:flex;
    align-items:baseline;
    gap:0.55rem;
    margin-top:0.5rem;
}

.hotel__price-now{
    font-size:1.375rem;
    font-weight:700;
    letter-spacing:-0.01em;
}

.hotel__price-old{
    font-size:0.9375rem;
    color:rgba(17,17,17,0.45);
    text-decoration:line-through;
}

.hotel__note{
    font-size:0.75rem;
    color:rgba(17,17,17,0.5);
    margin-top:0.2rem;
}

.trending__arrow{
    position:absolute;
    top:130px;
    transform:translateY(-50%);
    z-index:2;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:2.6rem;
    height:2.6rem;
    background:#fff;
    border:1px solid rgba(17,17,17,0.12);
    border-radius:999px;
    color:#111;
    transition:background .2s ease, color .2s ease, opacity .2s ease;
}

.trending__arrow--prev{left:-0.5rem}
.trending__arrow--next{right:-0.5rem}

.trending__arrow:hover{background:#111;color:#fff}

.trending__arrow.is-hidden{
    opacity:0;
    pointer-events:none;
}

.trending__arrow svg{
    width:1.2rem;
    height:1.2rem;
}



.bento{
    padding:2.5rem clamp(1.25rem,6vw,12.5rem) 1.5rem;
    color:#111;
}

.bento [data-lucide]{stroke-width:1.5}

.bento__grid{
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    grid-auto-rows:220px;
    gap:1.5rem;
}

.bento__card{
    position:relative;
    display:flex;
    flex-direction:column;
    justify-content:flex-end;
    gap:0.5rem;
    padding:1.75rem;
    border-radius:0.75rem;
    overflow:hidden;
    min-width:0;
}

.bento__card--hero{
    grid-column:span 2;
    grid-row:span 2;
    padding:2rem;
}

.bento__card--image{grid-column:span 2}

.bento__card--stat,
.bento__card--light{background:#fff;border:1px solid rgba(17,17,17,0.1)}

.bento__card--dark{
    background:#111;
    color:#fff;
}

.bento__img{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    object-fit:cover;
}

.bento__overlay{
    position:relative;
    z-index:1;
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    gap:0.6rem;
    color:#fff;
}

.bento__card--hero::after,
.bento__card--image::after{
    content:"";
    position:absolute;
    inset:0;
    background:linear-gradient(to top,rgba(0,0,0,0.72) 0%,rgba(0,0,0,0.3) 45%,rgba(0,0,0,0) 70%);
}

.bento__overlay{z-index:2}

.bento__overlay-title{
    font-size:1.5rem;
    font-weight:600;
    letter-spacing:-0.02em;
    line-height:1.2;
    max-width:26ch;
}

.bento__overlay-title--sm{font-size:1.25rem}

.bento__overlay-text{
    font-size:0.9375rem;
    color:rgba(255,255,255,0.85);
    max-width:44ch;
}

.bento__icon{
    width:1.75rem;
    height:1.75rem;
    margin-bottom:auto;
}

.bento__card--dark .bento__icon{color:#fff}

.bento__stat{
    font-size:2.25rem;
    font-weight:700;
    letter-spacing:-0.03em;
    line-height:1;
}

.bento__stat-label{
    font-size:0.9375rem;
    color:rgba(17,17,17,0.65);
}

.bento__title{
    font-size:1.25rem;
    font-weight:600;
    letter-spacing:-0.01em;
}

.bento__text{
    font-size:0.9375rem;
    line-height:1.5;
}

.bento__card--dark .bento__text{color:rgba(255,255,255,0.75)}
.bento__card--light .bento__text{color:rgba(17,17,17,0.65)}



.deal{padding:2.5rem clamp(1.25rem,6vw,12.5rem) 1.5rem}

.deal__banner{
    position:relative;
    border-radius:0.75rem;
    overflow:hidden;
    min-height:380px;
    display:flex;
    align-items:center;
}

.deal__img{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    object-fit:cover;
}

.deal__banner::after{
    content:"";
    position:absolute;
    inset:0;
    background:linear-gradient(to right,rgba(0,0,0,0.78) 0%,rgba(0,0,0,0.45) 55%,rgba(0,0,0,0.1) 100%);
}

.deal__content{
    position:relative;
    z-index:1;
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    gap:1rem;
    padding:3rem;
    color:#fff;
    max-width:560px;
}

.deal__title{
    font-size:clamp(1.75rem,3vw,2.5rem);
    font-weight:600;
    letter-spacing:-0.02em;
    line-height:1.15;
}

.deal__text{
    font-size:1rem;
    color:rgba(255,255,255,0.85);
}

.deal__btn{
    display:inline-flex;
    align-items:center;
    gap:0.6rem;
    margin-top:0.5rem;
    padding:0.85rem 1.75rem;
    background:#fff;
    color:#111;
    font-size:1rem;
    font-weight:600;
    border-radius:0.625rem;
    transition:opacity .2s ease;
}

.deal__btn:hover{opacity:.85}

.deal__btn svg{
    width:1.15rem;
    height:1.15rem;
    stroke-width:2;
}



.reviews{
    padding:2.5rem clamp(1.25rem,6vw,12.5rem) 1.5rem;
    color:#111;
}

.reviews__grid{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:1.5rem;
}

.review{
    display:flex;
    flex-direction:column;
    gap:1.1rem;
    padding:1.9rem;
    background:#fff;
    border:1px solid rgba(17,17,17,0.1);
    border-radius:0.75rem;
}

.review__stars{
    display:flex;
    gap:0.25rem;
}

.review__stars svg{
    width:1.05rem;
    height:1.05rem;
    fill:#f5a623;
    stroke:#f5a623;
}

.review__text{
    font-size:1rem;
    line-height:1.6;
    color:rgba(17,17,17,0.85);
}

.review__author{
    display:flex;
    align-items:center;
    gap:0.85rem;
    margin-top:auto;
}

.review__author .review__stars{margin-left:auto;flex-shrink:0}

.review__avatar{
    width:2.75rem;
    height:2.75rem;
    border-radius:999px;
    object-fit:cover;
}

.review__name{
    font-size:0.9375rem;
    font-weight:600;
}

.review__trip{
    font-size:0.8125rem;
    color:rgba(17,17,17,0.55);
}



.newsletter{padding:2.5rem clamp(1.25rem,6vw,12.5rem) 3.5rem}

.newsletter__box{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:2rem;
    flex-wrap:wrap;
    padding:2.75rem 3rem;
    background:#111;
    color:#fff;
    border-radius:0.75rem;
}

.newsletter__info{
    display:flex;
    flex-direction:column;
    gap:0.5rem;
    max-width:520px;
}

.newsletter__title{
    font-size:1.625rem;
    font-weight:600;
    letter-spacing:-0.02em;
    line-height:1.2;
}

.newsletter__text{
    font-size:0.9375rem;
    color:rgba(255,255,255,0.7);
}

.newsletter__form{
    display:flex;
    gap:0.75rem;
    flex:1;
    min-width:280px;
    max-width:480px;
}

.newsletter__input{
    flex:1;
    min-width:0;
    padding:0.9rem 1.2rem;
    background:rgba(255,255,255,0.1);
    border:1px solid rgba(255,255,255,0.16);
    border-radius:0.625rem;
    color:#fff;
    font:inherit;
    font-size:0.9375rem;
    outline:none;
}

.newsletter__input::placeholder{color:rgba(255,255,255,0.6)}

.newsletter__btn{
    padding:0.9rem 1.75rem;
    background:#fff;
    color:#111;
    font-size:0.9375rem;
    font-weight:600;
    border-radius:0.625rem;
    flex-shrink:0;
    transition:opacity .2s ease;
}

.newsletter__btn:hover{opacity:.85}



.footer{
    background:#111;
    color:#fff;
    margin:0.5rem;
    border-radius:0.5rem;
    padding:4rem clamp(1.25rem,6vw,12rem) 2rem;
}

.footer [data-lucide]{stroke-width:1.5}

.footer__top{
    display:grid;
    grid-template-columns:1.6fr repeat(4,1fr);
    gap:3rem;
    padding-bottom:3rem;
    border-bottom:1px solid rgba(255,255,255,0.12);
}

.footer__brand{
    display:flex;
    flex-direction:column;
    gap:1.25rem;
}

.footer__logo{
    display:inline-flex;
    align-items:center;
    gap:0.5rem;
    font-size:1.5rem;
    font-weight:700;
    letter-spacing:-0.01em;
    transition:opacity .3s ease;
}

.footer__logo:hover{opacity:.5}

.footer__logo-icon{
    width:1.85rem;
    height:1.85rem;
}

.footer__desc{
    font-size:0.9375rem;
    color:rgba(255,255,255,0.65);
    max-width:34ch;
    line-height:1.6;
}

.footer__social{
    display:flex;
    gap:0.75rem;
}

.footer__social a{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:2.5rem;
    height:2.5rem;
    background:rgba(255,255,255,0.08);
    border:1px solid rgba(255,255,255,0.12);
    border-radius:999px;
    transition:background .2s ease;
}

.footer__social a:hover{background:rgba(255,255,255,0.2)}

.footer__social svg{
    width:1.1rem;
    height:1.1rem;
}

.footer__col{
    display:flex;
    flex-direction:column;
    gap:0.9rem;
}

.footer__heading{
    font-size:0.9375rem;
    font-weight:600;
    margin-bottom:0.35rem;
}

.footer__col a{
    font-size:0.9375rem;
    color:rgba(255,255,255,0.65);
    transition:color .2s ease;
}

.footer__col a:hover{color:#fff}

.footer__bottom{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:1rem;
    flex-wrap:wrap;
    padding-top:2rem;
    font-size:0.875rem;
    color:rgba(255,255,255,0.55);
}

.footer__bottom-links{
    display:flex;
    gap:1.5rem;
}

.footer__bottom-links a{transition:color .2s ease}
.footer__bottom-links a:hover{color:#fff}



@media (max-width:1440px){
    .nav__search{width:280px}
    .nav__menu{gap:1.75rem}
    .nav__left{gap:2rem}
    .nav__right{gap:1.1rem}
}

@media (max-width:1200px){
    .nav__search{display:none}
    .hotel{flex-basis:calc((100% - 3rem)/3)}
}


@media (max-width:1000px){
    .nav{padding:1rem 1.25rem}
    .nav__menu,
    .nav__login,
    .nav__signup{display:none}
    .nav__toggle{display:inline-flex}
    .nav__mobile-actions .nav__login,
    .nav__mobile-actions .nav__signup{display:inline-flex}
    .hero{height:auto;min-height:100svh}
    .hero__bottom{left:1.25rem;right:1.25rem;bottom:1.25rem;gap:1.75rem}
}

@media (max-width:1024px){
    .destinations__grid{grid-template-columns:repeat(2,minmax(0,1fr))}
    .hotel{flex-basis:calc((100% - 1.5rem)/2)}
    .bento__grid{grid-template-columns:repeat(2,minmax(0,1fr))}
    .reviews__grid{grid-template-columns:1fr}
    .footer__top{grid-template-columns:repeat(2,1fr)}
    .footer__brand{grid-column:span 2}
}

@media (max-width:720px){
    
    .hero{
        display:flex;
        flex-direction:column-reverse;
        justify-content:space-between;
        gap:2.5rem;
    }
    .hero__bottom{
        position:static;
        padding:0 1.25rem 1.25rem;
    }
    .search{padding:1.25rem}
    .search__row{grid-template-columns:1fr}
    .search__footer{flex-direction:column;align-items:stretch}
    .search__submit{justify-content:center}
    .hero__title{font-size:2.1rem}
    .destinations__grid{grid-template-columns:1fr}
    .hotel{flex-basis:86%}
    .trending__arrow--prev{left:0.25rem}
    .trending__arrow--next{right:0.25rem}
    .destinations,
    .trending,
    .bento,
    .deal,
    .reviews,
    .newsletter{padding-left:1.25rem;padding-right:1.25rem}
    .results{padding-left:1.25rem;padding-right:1.25rem}
    .detail{padding-left:1.25rem;padding-right:1.25rem}
    .section-head__title{font-size:1.6rem}
    .bento__grid{grid-template-columns:1fr;grid-auto-rows:auto}
    .bento__card{min-height:200px}
    .bento__card--hero,
    .bento__card--image{grid-column:span 1;grid-row:span 1;min-height:280px}
    .deal__banner{min-height:320px}
    .deal__content{padding:1.75rem}
    .newsletter__box{padding:1.75rem;flex-direction:column;align-items:stretch}
    .newsletter__form{max-width:none}
    .footer{padding:2.5rem 1.5rem 1.5rem}
    .footer__top{grid-template-columns:1fr;gap:2rem}
    .footer__brand{grid-column:span 1}
}

@media (max-width:440px){
    .hero{margin:0.35rem}
    .hero__title{font-size:1.85rem}
    .newsletter__form{flex-direction:column}
    .search__filter-label{display:none}
}



.search__field{position:relative}

.search__panel{
    position:absolute;
    bottom:calc(100% + 0.5rem); 
    left:0;
    right:0;
    z-index:30;
    display:flex;
    flex-direction:column;
    gap:0.35rem;
    padding:0.85rem;
    background:#fff;
    border:1px solid rgba(17,17,17,0.1);
    border-radius:0.75rem;
    max-height:320px;
    overflow-y:auto;
}

.search__panel-title{
    font-size:0.8125rem;
    font-weight:600;
    color:rgba(17,17,17,0.55);
    padding:0.25rem 0.5rem;
}

.search__option{
    display:flex;
    align-items:center;
    gap:0.6rem;
    padding:0.6rem 0.65rem;
    border-radius:0.5rem;
    font-size:0.9375rem;
    text-align:left;
    transition:background .15s ease;
}

.search__option:hover{background:#f3f3f1}
.search__option svg{width:1rem;height:1rem;color:rgba(17,17,17,0.55)}

.search__dates{display:flex;gap:0.75rem}

.search__dates label{
    flex:1;
    display:flex;
    flex-direction:column;
    gap:0.35rem;
    font-size:0.8125rem;
    font-weight:600;
}

.search__dates input{
    padding:0.6rem;
    border:1px solid rgba(17,17,17,0.15);
    border-radius:0.5rem;
    font:inherit;
    font-size:0.875rem;
}

.search__panel-apply{
    margin-top:0.5rem;
    padding:0.65rem;
    background:#111;
    color:#fff;
    border-radius:0.5rem;
    font-size:0.9375rem;
    font-weight:500;
}

.search__stepper{
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:0.5rem 0.65rem;
    font-size:0.9375rem;
    font-weight:500;
}

.search__stepper > div{display:flex;align-items:center;gap:0.9rem}

.search__stepper button{
    width:2rem;
    height:2rem;
    border:1px solid rgba(17,17,17,0.2);
    border-radius:999px;
    font-size:1.1rem;
    line-height:1;
    transition:background .15s ease;
}

.search__stepper button:hover{background:#f3f3f1}



.toast{
    position:fixed;
    left:50%;
    bottom:1.5rem;
    transform:translate(-50%,120%);
    z-index:100;
    padding:0.85rem 1.5rem;
    background:#111;
    color:#fff;
    font-size:0.9375rem;
    border-radius:999px;
    transition:transform .3s ease;
    pointer-events:none;
}

.toast--show{transform:translate(-50%,0)}



.hotel__media{display:block;cursor:pointer}
.hotel__name a:hover{text-decoration:underline}
.hotel__price-per{font-size:0.8125rem;color:rgba(17,17,17,0.5)}
.star--dim{opacity:.25}



.page{background:#fafaf8}

.page-header{
    background:#111;
    margin:0.5rem;
    border-radius:0.5rem;
}

.nav--solid{pointer-events:auto}
.nav__link--active{text-decoration:underline;text-underline-offset:6px}



.results{
    display:grid;
    grid-template-columns:260px 1fr;
    gap:2rem;
    padding:2rem clamp(1.25rem,6vw,12.5rem);
    color:#111;
    align-items:start;
}

.filters{
    position:sticky;
    top:1rem;
    display:flex;
    flex-direction:column;
    gap:1.5rem;
}

.filters__head{
    display:flex;
    align-items:center;
    justify-content:space-between;
}

.filters__title{font-size:1.125rem;font-weight:600}

.filters__clear{
    font-size:0.8125rem;
    color:rgba(17,17,17,0.55);
    text-decoration:underline;
}

.filters__group{display:flex;flex-direction:column;gap:0.6rem}

.filters__label{
    font-size:0.875rem;
    font-weight:600;
    color:rgba(17,17,17,0.8);
}

.filters__search{
    padding:0.65rem 0.85rem;
    border:1px solid rgba(17,17,17,0.15);
    border-radius:0.5rem;
    font:inherit;
    font-size:0.875rem;
    outline:none;
}

.filters__search:focus{border-color:#111}

.filters__check{
    display:flex;
    align-items:center;
    gap:0.55rem;
    font-size:0.9375rem;
    cursor:pointer;
}

.filters__check input{accent-color:#111;width:1rem;height:1rem;cursor:pointer}
.filters input[type="range"]{accent-color:#111;width:100%}
.filters__price-out{font-size:0.9375rem;font-weight:600}

.results__bar{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:1rem;
    flex-wrap:wrap;
    margin-bottom:1.5rem;
}

.results__count{font-size:0.9375rem;color:rgba(17,17,17,0.7)}

.results__sort{
    display:flex;
    align-items:center;
    gap:0.5rem;
    font-size:0.875rem;
    font-weight:500;
}

.results__sort select{
    padding:0.5rem 0.75rem;
    border:1px solid rgba(17,17,17,0.15);
    border-radius:0.5rem;
    font:inherit;
    font-size:0.875rem;
    background:#fff;
    cursor:pointer;
}

.results__grid{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:1.5rem;
}

.results__grid .hotel{flex:none}

.results__empty{
    padding:3rem 1rem;
    text-align:center;
    color:rgba(17,17,17,0.55);
    font-size:1rem;
}



.detail{padding:2rem clamp(1.25rem,6vw,12.5rem);color:#111}

.detail__crumbs{
    display:flex;
    gap:0.5rem;
    font-size:0.875rem;
    color:rgba(17,17,17,0.55);
    margin-bottom:1.25rem;
}

.detail__crumbs a:hover{text-decoration:underline}

.detail__head{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:1rem;
    margin-bottom:1.5rem;
}

.detail__title{
    font-size:clamp(1.6rem,3vw,2.25rem);
    font-weight:600;
    letter-spacing:-0.02em;
    margin-bottom:0.5rem;
}

.detail__loc{
    display:flex;
    align-items:center;
    gap:0.5rem;
    flex-wrap:wrap;
    font-size:0.9375rem;
    color:rgba(17,17,17,0.65);
}

.detail__loc svg{width:1rem;height:1rem}

.detail__stars{display:inline-flex;gap:0.15rem;margin-left:0.5rem}
.detail__stars svg{width:0.95rem;height:0.95rem;fill:#f5a623;stroke:#f5a623}

.detail__fav{
    display:inline-flex;
    align-items:center;
    gap:0.5rem;
    padding:0.65rem 1.2rem;
    border:1px solid rgba(17,17,17,0.15);
    border-radius:0.6rem;
    font-size:0.9375rem;
    font-weight:500;
    background:#fff;
    transition:background .2s ease;
    flex-shrink:0;
}

.detail__fav:hover{background:#f3f3f1}
.detail__fav svg{width:1.1rem;height:1.1rem}
.detail__fav.is-active svg{fill:#e5484d;stroke:#e5484d}

.detail__gallery{margin-bottom:2rem}

.detail__main-img{
    width:100%;
    height:440px;
    object-fit:cover;
    border-radius:0.75rem;
    margin-bottom:0.75rem;
}

.detail__thumbs{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:0.75rem;
}

.detail__thumb{
    width:100%;
    height:96px;
    object-fit:cover;
    border-radius:0.5rem;
    cursor:pointer;
    opacity:.65;
    transition:opacity .2s ease;
}

.detail__thumb:hover,
.detail__thumb.is-active{opacity:1}

.detail__cols{
    display:grid;
    grid-template-columns:1fr 360px;
    gap:2.5rem;
    align-items:start;
}

.detail__info{display:flex;flex-direction:column;gap:2.25rem}

.detail__h2{
    font-size:1.25rem;
    font-weight:600;
    letter-spacing:-0.01em;
    margin-bottom:0.85rem;
}

.detail__desc{
    font-size:0.9375rem;
    line-height:1.7;
    color:rgba(17,17,17,0.75);
    max-width:64ch;
}

.detail__amenities{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:0.75rem;
}

.detail__amenities li{
    display:flex;
    align-items:center;
    gap:0.6rem;
    font-size:0.9375rem;
}

.detail__amenities svg{width:1.1rem;height:1.1rem;color:rgba(17,17,17,0.6)}

.detail__rooms{display:flex;flex-direction:column;gap:0.75rem}

.detail__rooms--inline{gap:0.5rem}
.detail__rooms--inline .room{padding:0.65rem 0.8rem;gap:0.6rem}
.detail__rooms--inline .room__price{font-size:0.9375rem}
.detail__rooms--inline .room__info b{font-size:0.875rem}

.room{
    display:flex;
    align-items:center;
    gap:0.85rem;
    padding:1rem 1.15rem;
    background:#fff;
    border:1px solid rgba(17,17,17,0.12);
    border-radius:0.75rem;
    cursor:pointer;
    transition:border-color .2s ease, background .2s ease;
}

.room:hover{background:#f7f7f5}
.room.is-active{border-color:#111;background:#f3f3f1}
.room input{accent-color:#111}

.room__info{display:flex;flex-direction:column;gap:0.2rem;flex:1}
.room__info b{font-size:0.9375rem}
.room__info small{font-size:0.8125rem;color:rgba(17,17,17,0.55)}

.room__price{font-size:1.05rem;font-weight:700}
.room__price small{font-size:0.75rem;font-weight:400;color:rgba(17,17,17,0.5)}

.detail__reviews{display:flex;flex-direction:column;gap:1rem}
.review--compact{padding:1.35rem;gap:0.85rem}
.review--compact .review__author{margin-top:0}


.booking{
    position:sticky;
    top:1rem;
    display:flex;
    flex-direction:column;
    gap:0.85rem;
    padding:1.5rem;
    background:#fff;
    border:1px solid rgba(17,17,17,0.1);
    border-radius:0.75rem;
}

.booking__price{font-size:1rem}
.booking__price b{font-size:1.5rem;letter-spacing:-0.01em}
.booking__price s{color:rgba(17,17,17,0.45);font-size:0.875rem;margin-left:0.4rem}

.booking__field{
    display:flex;
    flex-direction:column;
    gap:0.35rem;
    font-size:0.8125rem;
    font-weight:600;
}

.booking__field input,
.booking__field select{
    padding:0.7rem 0.85rem;
    border:1px solid rgba(17,17,17,0.15);
    border-radius:0.5rem;
    font:inherit;
    font-size:0.875rem;
    background:#fff;
}

.booking__field{position:relative}

.booking__date-btn{
    text-align:left;
    padding:0.7rem 0.85rem;
    border:1px solid rgba(17,17,17,0.15);
    border-radius:0.5rem;
    font:inherit;
    font-size:0.875rem;
    background:#fff;
    color:#111;
    cursor:pointer;
    transition:border-color .2s ease;
}

.booking__date-btn:hover{border-color:#111}
.booking__date-btn.has-dates{font-weight:600}

.booking__cal-panel{
    position:absolute;
    top:calc(100% + 0.5rem);
    left:0;
    z-index:40;
    width:300px;
    background:#fff;
    border:1px solid rgba(17,17,17,0.1);
    border-radius:0.75rem;
    box-shadow:0 12px 32px rgba(0,0,0,0.14);
}

.booking__summary{
    display:flex;
    flex-direction:column;
    gap:0.5rem;
    padding-top:0.75rem;
    border-top:1px solid rgba(17,17,17,0.1);
    font-size:0.9375rem;
    color:rgba(17,17,17,0.75);
}

.booking__summary p{display:flex;justify-content:space-between}
.booking__total{font-weight:700;color:#111;font-size:1.05rem}

.booking__btn{
    padding:0.95rem;
    background:#111;
    color:#fff;
    font-size:1rem;
    font-weight:600;
    border-radius:0.625rem;
    transition:opacity .2s ease;
}

.booking__btn:hover{opacity:.85}

.booking__note{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:0.45rem;
    font-size:0.8125rem;
    color:rgba(17,17,17,0.55);
}

.booking__note svg{width:1rem;height:1rem}



.filters__toggle-btn{
    display:none;
    align-items:center;
    justify-content:center;
    gap:0.5rem;
    width:100%;
    padding:0.75rem 1rem;
    background:#fff;
    border:1px solid rgba(17,17,17,0.1);
    border-radius:0.75rem;
    font-size:0.9375rem;
    font-weight:500;
    color:#111;
    cursor:pointer;
    transition:background .2s ease;
}

.filters__toggle-btn:hover{background:#f7f7f5}
.filters__toggle-btn svg{width:1.1rem;height:1.1rem;stroke-width:1.75}

@media (max-width:1024px){
    .results{grid-template-columns:1fr}
    .filters{position:static}
    .filters__toggle-btn{display:inline-flex}
    .filters__body{
        display:none;
        flex-direction:column;
        gap:1.5rem;
    }
    .filters__body.is-open{display:flex}
    .results__grid{grid-template-columns:repeat(2,minmax(0,1fr))}
    .detail__cols{grid-template-columns:1fr}
    .booking{position:static}
}

@media (max-width:720px){
    .results{padding:1.25rem}
    .results__grid{grid-template-columns:1fr}
    .detail{padding:1.25rem}
    .detail__main-img{height:260px}
    .detail__thumb{height:64px}
    .detail__amenities{grid-template-columns:1fr}
    .detail__head{flex-direction:column}
    .search__dates{flex-direction:column}
}



.modal{
    position:fixed;
    inset:0;
    z-index:90;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:1.25rem;
    background:rgba(17,17,17,0.55);
    backdrop-filter:blur(8px);
    -webkit-backdrop-filter:blur(8px);
    opacity:0;
    visibility:hidden;
    transform:translateY(8px);
    transition:opacity .3s ease, transform .3s ease, visibility .3s ease;
}

.modal.is-open{opacity:1;visibility:visible;transform:none}

.modal__card{
    position:relative;
    width:100%;
    max-width:440px;
    background:#fff;
    color:#111;
    border-radius:0.75rem;
    padding:2rem;
    max-height:90vh;
    overflow-y:auto;
}

.modal__close{
    position:absolute;
    top:1rem;
    right:1rem;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:2.25rem;
    height:2.25rem;
    color:rgba(17,17,17,0.55);
    transition:opacity .25s ease, color .25s ease;
}

.modal__close:hover{color:#111}

.modal__close svg{width:1.25rem;height:1.25rem;stroke-width:1.75}

.modal__title{
    font-size:1.5rem;
    font-weight:600;
    letter-spacing:-0.02em;
    margin-bottom:0.35rem;
}

.modal__subtitle{
    font-size:0.9375rem;
    color:rgba(17,17,17,0.6);
    margin-bottom:1.5rem;
}


.auth__tabs{
    display:flex;
    gap:0.25rem;
    padding:0.3rem;
    background:#f3f3f1;
    border-radius:0.625rem;
    margin-bottom:1.5rem;
}

.auth__tab{
    flex:1;
    padding:0.65rem;
    font-size:0.9375rem;
    font-weight:500;
    color:rgba(17,17,17,0.6);
    border-radius:0.5rem;
    transition:background .2s ease, color .2s ease;
}

.auth__tab.is-active{background:#fff;color:#111}

.auth__field{
    display:flex;
    flex-direction:column;
    gap:0.4rem;
    margin-bottom:0.9rem;
}

.auth__field label{
    font-size:0.8125rem;
    font-weight:600;
    color:rgba(17,17,17,0.8);
}

.auth__field input{
    padding:0.8rem 1rem;
    border:1px solid rgba(17,17,17,0.15);
    border-radius:0.625rem;
    font:inherit;
    font-size:0.9375rem;
    outline:none;
    transition:border-color .2s ease;
}

.auth__field input:focus{border-color:#111}

.auth__submit{
    width:100%;
    padding:0.85rem;
    margin-top:0.5rem;
    background:#111;
    color:#fff;
    font-size:1rem;
    font-weight:600;
    border-radius:0.625rem;
    transition:opacity .2s ease;
}

.auth__submit:hover{opacity:.85}

.auth__alt{
    text-align:center;
    font-size:0.875rem;
    color:rgba(17,17,17,0.6);
    margin-top:1.1rem;
}

.auth__alt a{font-weight:600;color:#111;text-decoration:underline}

.auth__divider{
    display:flex;
    align-items:center;
    gap:0.75rem;
    margin:1.25rem 0;
    font-size:0.8125rem;
    color:rgba(17,17,17,0.5);
}

.auth__divider::before,
.auth__divider::after{
    content:"";
    flex:1;
    height:1px;
    background:rgba(17,17,17,0.12);
}

.auth__social{
    display:flex;
    flex-direction:column;
    gap:0.6rem;
}

.auth__social button{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:0.6rem;
    padding:0.8rem;
    border:1px solid rgba(17,17,17,0.15);
    border-radius:0.625rem;
    font-size:0.9375rem;
    font-weight:500;
    transition:background .2s ease;
}

.auth__social button:hover{background:#f7f7f5}

.auth__social svg{width:1.1rem;height:1.1rem}



.modal__card--wide{max-width:520px}

.booking-confirm__hotel{
    display:flex;
    gap:1rem;
    padding-bottom:1rem;
    border-bottom:1px solid rgba(17,17,17,0.1);
    margin-bottom:1rem;
}

.booking-confirm__img{
    width:5.5rem;
    height:5.5rem;
    object-fit:cover;
    border-radius:0.5rem;
    flex-shrink:0;
}

.booking-confirm__name{font-size:1.0625rem;font-weight:600;margin-bottom:0.25rem}
.booking-confirm__loc{font-size:0.875rem;color:rgba(17,17,17,0.6)}

.booking-confirm__row{
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:0.55rem 0;
    font-size:0.9375rem;
}

.booking-confirm__row span:first-child{color:rgba(17,17,17,0.65)}
.booking-confirm__row span:last-child{font-weight:500}

.booking-confirm__total{
    display:flex;
    justify-content:space-between;
    align-items:baseline;
    padding-top:0.85rem;
    margin-top:0.5rem;
    border-top:1px solid rgba(17,17,17,0.1);
    font-size:1.0625rem;
    font-weight:700;
}


.success{
    display:flex;
    flex-direction:column;
    align-items:center;
    text-align:center;
    gap:0.85rem;
    padding:1.5rem 0 0.5rem;
}

.success__icon{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:4rem;
    height:4rem;
    border-radius:999px;
    background:#f3f3f1;
    color:#111;
    margin-bottom:0.5rem;
}

.success__icon svg{width:1.75rem;height:1.75rem;stroke-width:2}

.success__title{font-size:1.375rem;font-weight:600;letter-spacing:-0.01em}
.success__text{font-size:0.9375rem;color:rgba(17,17,17,0.65);max-width:36ch}
.success__code{
    display:inline-block;
    padding:0.5rem 1rem;
    background:#f3f3f1;
    border-radius:0.5rem;
    font-size:0.9375rem;
    font-weight:600;
    letter-spacing:0.05em;
    margin-top:0.5rem;
}



.skeleton{
    display:flex;
    flex-direction:column;
    gap:1.1rem;
}

.skeleton__media{
    width:100%;
    height:260px;
    border-radius:0.5rem;
    background:#ececeb;
    position:relative;
    overflow:hidden;
}

.skeleton__line{
    height:0.9rem;
    border-radius:0.3rem;
    background:#ececeb;
    position:relative;
    overflow:hidden;
}

.skeleton__line--title{width:70%;height:1.1rem;margin-bottom:0.4rem}
.skeleton__line--meta{width:50%}
.skeleton__line--price{width:30%;height:1.3rem;margin-top:0.4rem}

.skeleton__media::after,
.skeleton__line::after{
    content:"";
    position:absolute;
    inset:0;
    background:linear-gradient(90deg,transparent,rgba(255,255,255,0.6),transparent);
    transform:translateX(-100%);
    animation:shimmer 1.4s infinite;
}

@keyframes shimmer{100%{transform:translateX(100%)}}



.results__view-toggle{
    display:inline-flex;
    gap:0.25rem;
    padding:0.3rem;
    background:#fff;
    border:1px solid rgba(17,17,17,0.1);
    border-radius:0.625rem;
}

.results__view-btn{
    display:inline-flex;
    align-items:center;
    gap:0.45rem;
    padding:0.55rem 0.95rem;
    font-size:0.875rem;
    font-weight:500;
    color:rgba(17,17,17,0.6);
    border-radius:0.5rem;
    transition:background .2s ease, color .2s ease;
}

.results__view-btn.is-active{background:#f3f3f1;color:#111}
.results__view-btn svg{width:1rem;height:1rem;stroke-width:1.75}

.map-view{
    display:none;
    position:relative;
    height:600px;
    background:#eaeae6;
    border-radius:0.75rem;
    overflow:hidden;
}

.map-view.is-active{display:block}


.detail__map{
    position:relative;
    height:320px;
    background:#eaeae6;
    border-radius:0.75rem;
    overflow:hidden;
    margin-bottom:0.75rem;
}

.detail__map .map-view__bg{position:absolute;inset:0}

.detail__map-loc{
    position:absolute;
    left:1rem;
    bottom:1rem;
    z-index:1000;
    display:inline-flex;
    align-items:center;
    gap:0.5rem;
    padding:0.55rem 1rem;
    background:#fff;
    border-radius:0.5rem;
    font-size:0.9375rem;
    font-weight:500;
    box-shadow:0 4px 12px rgba(0,0,0,0.1);
}

.detail__map-loc svg{width:1rem;height:1rem;color:rgba(17,17,17,0.6)}

.map-view__bg{
    position:absolute;
    inset:0;
    background-image:linear-gradient(rgba(17,17,17,0.04) 1px,transparent 1px),
        linear-gradient(90deg,rgba(17,17,17,0.04) 1px,transparent 1px);
    background-size:32px 32px;
}

.map-pin{
    display:inline-flex;
    flex-direction:column;
    align-items:center;
    gap:0.25rem;
    cursor:pointer;
}

.map-pin__price{
    padding:0.35rem 0.65rem;
    background:#111;
    color:#fff;
    font-size:0.8125rem;
    font-weight:600;
    border-radius:0.4rem;
    white-space:nowrap;
    box-shadow:0 4px 12px rgba(0,0,0,0.18);
}

.map-pin__dot{
    width:0.7rem;
    height:0.7rem;
    background:#111;
    border:2px solid #fff;
    border-radius:999px;
    box-shadow:0 2px 6px rgba(0,0,0,0.25);
}



.empty-state{
    display:flex;
    flex-direction:column;
    align-items:center;
    text-align:center;
    gap:1rem;
    padding:5rem 1rem;
    color:rgba(17,17,17,0.6);
}

.empty-state__icon{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:4rem;
    height:4rem;
    border-radius:999px;
    background:#f3f3f1;
    color:rgba(17,17,17,0.45);
}

.empty-state__icon svg{width:1.75rem;height:1.75rem;stroke-width:1.5}

.empty-state__title{font-size:1.25rem;font-weight:600;color:#111}
.empty-state__text{font-size:0.9375rem;max-width:40ch}

.empty-state__btn{
    display:inline-flex;
    align-items:center;
    gap:0.5rem;
    padding:0.8rem 1.5rem;
    background:#111;
    color:#fff;
    font-size:0.9375rem;
    font-weight:600;
    border-radius:0.625rem;
    margin-top:0.5rem;
    transition:opacity .2s ease;
}

.empty-state__btn:hover{opacity:.85}

.empty-state__btn svg{width:1.05rem;height:1.05rem}

@media (max-width:720px){
    .modal__card{padding:1.5rem}
    .map-view{height:480px}
    .booking-confirm__img{width:4rem;height:4rem}
}



.calendar{
    display:flex;
    flex-direction:column;
    gap:0.75rem;
    padding:0.5rem;
}

.calendar__header{
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:0.25rem 0.5rem;
}

.calendar__title{
    font-size:0.9375rem;
    font-weight:600;
    color:#111;
}

.calendar__nav{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:1.85rem;
    height:1.85rem;
    color:rgba(17,17,17,0.6);
    border-radius:0.4rem;
    transition:background .2s ease, color .2s ease;
}

.calendar__nav:hover{background:#f3f3f1;color:#111}
.calendar__nav svg{width:1.05rem;height:1.05rem;stroke-width:1.75}

.calendar__weekdays,
.calendar__days{
    display:grid;
    grid-template-columns:repeat(7,1fr);
    gap:0.15rem;
}

.calendar__weekday{
    text-align:center;
    font-size:0.75rem;
    font-weight:600;
    color:rgba(17,17,17,0.45);
    padding:0.35rem 0;
}

.calendar__day{
    aspect-ratio:1;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    font-size:0.875rem;
    color:#111;
    border-radius:999px;
    cursor:pointer;
    transition:background .15s ease, color .15s ease;
    border:none;
    background:transparent;
}

.calendar__day:hover:not(.calendar__day--disabled):not(.calendar__day--selected){background:#f3f3f1}

.calendar__day--empty{cursor:default;pointer-events:none}

.calendar__day--disabled{color:rgba(17,17,17,0.3);cursor:not-allowed}

.calendar__day--in-range{background:#ececeb}

.calendar__day--selected{
    background:#111;
    color:#fff;
    font-weight:600;
}

.calendar__day--selected.calendar__day--start{border-top-right-radius:0;border-bottom-right-radius:0}
.calendar__day--selected.calendar__day--end{border-top-left-radius:0;border-bottom-left-radius:0}

.calendar__footer{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:0.75rem;
    padding:0.5rem 0.5rem 0;
    border-top:1px solid rgba(17,17,17,0.08);
    margin-top:0.25rem;
}

.calendar__range{
    font-size:0.8125rem;
    color:rgba(17,17,17,0.65);
}

.calendar__range b{color:#111;font-weight:600}

.calendar__clear{
    font-size:0.8125rem;
    color:rgba(17,17,17,0.55);
    text-decoration:underline;
    margin-right:auto;
}

.calendar__apply{
    padding:0.55rem 1.1rem;
    background:#111;
    color:#fff;
    font-size:0.875rem;
    font-weight:600;
    border-radius:0.5rem;
    transition:opacity .2s ease;
}

.calendar__apply:hover{opacity:.85}
.calendar__apply:disabled{opacity:.4;cursor:not-allowed}