/* ==========================================================================
   property.aspx — responsive overrides
   Base/desktop styles live in booking-plans.css; every media-query rule
   for this page belongs in this file, loaded right after it.
   ========================================================================== */

/* ---- Tablet and up (>= 768px) ---- */
@media (min-width: 768px) {
    /* See booking-plans.css note above #gallerySection: pins the md: values
       that Tailwind's duplicated-instance !important would otherwise block
       (any element pairing a bare utility with its md: variant of the same
       property is at risk — padding, margin and font-size here).
       #gallerySection/#bookingPlansSection/.bp-heading are also reused as-is
       by v1/factsheet.aspx with different base values, so the declarations
       specific to property.aspx's own numbers are scoped with the extra
       .factsheet-wrapper/.bp-section qualifier that only property.aspx's
       markup carries — v1 doesn't have those classes on the same elements. */
    #gallerySection {
        padding-left: 2.5rem !important;
        padding-right: 2.5rem !important;
        padding-top: 7rem !important;
    }
    #gallerySection.factsheet-wrapper {
        padding-bottom: 1.5rem !important;
    }
    #bookingPlansSection {
        padding-left: 2.5rem !important;
        padding-right: 2.5rem !important;
    }
    #spnPropertyName {
        font-size: 2.25rem !important;
    }
    #spnPropDesc {
        font-size: 17px !important;
    }
    .bp-heading {
        font-size: 2.1rem !important;
    }
    #bookingPlansSection.bp-section .bp-heading {
        margin-bottom: 1.5rem !important;
        padding-bottom: 1.5rem !important;
    }
    .bp-feature-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 16px;
    }
    .bp-feature-grid > div {
        padding: 1.25rem !important;
    }

    .bp-room-title {
        font-size: 1.25rem;
    }

    .bp-room-price {
        font-size: 1.875rem;
    }

    .wi-grid {
        grid-template-columns: 1fr 1fr;
    }
}

/* ---- Desktop two-column layout and up (>= 992px) ---- */
@media (min-width: 992px) {
    /* Replaces "lg:sticky lg:top-28 lg:self-start" on the booking summary
       column — the lg: variants don't reliably apply on this page either
       (the leftover inline align-self:flex-start on that element was an
       earlier, partial workaround for the same issue). 112px clears the
       fixed .site-header (~69px topbar + ~45px subnav). */
    .bp-summary-col {
        position: sticky;
        top: 112px;
        align-self: flex-start;
    }
    #spnPropertyName {
        font-size: 3.75rem !important;
    }
}

/* ---- Below desktop two-column breakpoint (<= 991px) ---- */
@media (max-width: 991px) {
    .bp-summary-card {
        margin-top: 32px;
    }
    /* Tablet step-down for grids that are cramped at their desktop column
       count between 768–991px; narrower phone widths collapse these further
       in the <=767px block below. */
    .rv-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .fm-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .loc-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .pf-grid {
        grid-template-columns: 1fr 1fr;
    }
}

/* ---- Mobile (<= 767px) ---- */
@media (max-width: 767px) {
    /* Sticky header / hero banners */
    .ph-nav {
        display: none;
    }
    #spnPropaddr {
    font-size:12px;
    }
    .bp-section {
    padding:0;
    }
    .rv-section {
    margin-bottom:20px;
    }
    .ph-inner {
        padding: 12px 16px;
    }
    .wi-category {
        min-height: 20px;
    }
    .wi-heading {
    font-size:1.2rem;
    }
    .rv-heading {
        font-size: 1.2rem;
    }
    .rv-card-desc {
    font-size:0.85rem;
    }
    .header-icon-link span.help {
        padding: 6px 10px !important;
        font-size: 14px!important;
    }
    .factsheet-banners-wrapper-left .card img {
        height: 220px;
        margin-bottom: 10px;
    }

    .factsheet-banners-wrapper-right #GviewPropertyImages {
        grid-gap: 0.5rem;
    }

    .factsheet-banners-wrapper-right #GviewPropertyImages .card img {
        height: 100px;
    }

    .factsheet-banners-wrapper-right .card-text p {
        font-size: 12px;
    }

    .factsheet-banners-wrapper-right .card-text img {
        width: 20px !important;
    }

    .card.hidden-mob {
        display: none;
    }

    .ph-share span {
        display: none;
    }

    /* Rooms & booking plans */
    .bp-stay-tabs {
        flex-wrap: nowrap;
        overflow-x: auto;
        max-width: 100%;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }

    .bp-stay-tabs::-webkit-scrollbar {
        display: none;
    }

    .bp-stay-tab {
        flex-shrink: 0;
        padding: 8px 20px;
    }

    .bp-offers-grid {
        grid-template-columns: 1fr;
    }

    .bp-room-card {
        flex-direction: column;
    }

    .bp-room-thumb {
        width: 100%;
        height: 200px;
    }

    .bp-room-price-col {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        width: 100%;
        min-width: 0;
        text-align: left;
        border-left: none;
        border-top: 1px solid #0000001a;
        padding-left: 0;
        padding-top: 14px;
        margin-top: 14px;
    }

    .bp-room-price-col > div:first-child {
        text-align: left;
    }

    .bp-room-tenure {
        text-align: left;
    }

    .bp-room-check {
        margin-top: 0;
    }

    /* Reviews & ratings */
    .rv-summary {
        flex-direction: column;
        align-items: stretch;
        gap: 24px;
        padding: 20px;
        width:100%;
        min-height:auto;
    }
    .testimonial-carousel .item {
    min-height:auto;
    margin:12px;

    }

    .rv-actions {
        flex-direction: column;
    }

    .rv-btn-outline,
    .rv-btn-solid {
        justify-content: center;
    }

    .rv-grid {
        grid-template-columns: 1fr;
    }

    /* Food menu */
    .fm-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    /* Standard charges */
    .sc-grid {
        grid-template-columns: 1fr;
        gap: 0;
    }

    /* Location */
    .loc-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    /* Property mini footer */
    .pf-grid {
        grid-template-columns: 1fr 1fr;
    }
    #bookingPlansSection {
        padding-left: 0.5rem !important;
        padding-right: 0.5rem !important;
    }
    #spnHighlights p span {
        font-size: 14px!important;
        line-height:24px;
    }
    #spnHighlights span {
        font-size: 14px !important;
        line-height: 24px;
    }
    .bp-heading {
    font-weight:500;
    }
    .reviewblock {
    flex-direction:column;
    gap:0px;
    }
    .room-row {
    flex-direction:column;
    }
    .room-wrapper .price-section .price-card-wrap {
    padding:14px 30px;
    }
    .price-section {
    flex-wrap:nowrap;
    }
    .room-type-card {
        height: auto;
        align-items: center;
    }
        .room-type-card .sharing-img {
        margin-bottom:10px;
        }
        }

/* ---- Small phones (<= 575px) ---- */
@media (max-width: 575px) {
    .wi-list {
        grid-template-columns: 1fr;
    }
    .breadcrumb_booking ul {
        gap: 4px 8px;
    }
    .breadcrumb_booking ul li a {
        font-size: 0.62rem;
        letter-spacing: 0.06em;
    }
    .Grid360degree img {
        width: 70px;
        height: 70px;
        position: absolute;
        top: 60%;
        right: 25px;
    }
    .bp-reserve-modal {
        padding: 24px 20px;
    }
}

/* ---- Food Menu modal (#foodmenuModal) — ported from factsheet.css ----
   The calendar overlay is centered relative to the modal using viewport-
   width-dependent percentages, hence the run of narrow desktop breakpoints. */
@media (max-width: 1800px) and (min-width: 1700px) {
    .calendar-overlay.active {
        left: 37.5%;
        top: 44.7%;
    }
}

@media (max-width: 1700px) and (min-width: 1500px) {
    .calendar-overlay.active {
        left: 36.7%;
        top: 44.3%;
    }
}

@media (max-width: 1500px) and (min-width: 1365px) {
    .calendar-overlay.active {
        left: 34.4%;
        top: 43.7%;
    }
}

@media (max-width: 1365px) and (min-width: 1200px) {
    .calendar-overlay.active {
        left: 33.3%;
        top: 42.9%;
    }
}

@media (max-width: 1200px) and (min-width: 992px) {
    .calendar-overlay.active {
        left: 31.6%;
        top: 41.7%;
    }
}

@media only screen and (max-width: 992px) {
    .selectmonth {
        position: absolute;
        right: 8%;
    }

    .cata-sub-nav {
        margin: 0 25px;
    }

    .nav-next, .nav-prev {
        display: none !important;
    }

    .foodmenuModal .modal-dialog {
        max-width: 95% !important;
        min-width: auto;
    }

    #foodmenuModal .form-select {
        padding: 0.375rem 1rem 0.375rem 0.5rem;
        font-size: 12px;
        background-position: right 0.5rem center;
        background-size: 16px 10px;
        width: 100px;
        border-radius: 100px;
    }

    .foodmenuModal .modal-title {
        font-size: 16px;
    }

    .mobFoodMenuSection .tab {
        display: none;
    }

    .mobFoodMenuSection .tab:target {
        display: block;
    }

    .mobFoodMenuSection .breakfastSection, .mobFoodMenuSection .dinnerSection {
        display: block;
        background: #fff;
        border-radius: 5px;
        padding: 0px 0 15px 0;
        margin-bottom: 10px
    }

    .mobFoodMenuSection .tab-header a {
        padding: 5px 12px;
        margin: 5px 0;
        background-color: #fff7fb;
        text-decoration: none;
        color: #4E4E4E;
        text-align: center;
        font-size: 12px;
    }

    .mobFoodMenuSection .tab-header a:hover {
        background-color: rgba(242, 0, 108, 0.1);
        border: 1px solid #F2006C;
        border-radius: 100px;
        color: #4E4E4E;
    }

    .mobFoodMenuSection .tab-header {
        background-color: rgba(242, 0, 108, 0.03);
        overflow-y: scroll;
        height: 85vh;
        display: flex;
        flex-direction: column;
        align-items: center;
        padding: 10px 0px 10px 13px;
    }

    .mobFoodMenuSection .tab-body {
        background-color: #F4F4F4;
        padding: 10px 5px 15px 10px;
        height: 70vh;
        overflow-y: scroll;
        width: 63.5%;
    }

    .mobFoodMenuSection ul.day-menu1 {
        padding-top: 5px;
        display: flex;
        flex-direction: column;
        padding-left: 0;
    }

    .mobFoodMenuSection ul.day-menu1 > li {
        padding-left: 0px;
        font-size: 12px;
        line-height: 1.8;
        list-style: disc;
        margin-left: 30px;
    }

    .mobFoodMenuSection ul.day-menu1 li:nth-child(1) {
        color: red;
        text-decoration: none;
        font-size: 12px;
        margin-left: 15px;
        list-style: none;
    }

    .mobFoodMenuSection.modal-body {
        padding: 0 !important;
    }

    .mobFoodMenuSection .breakfastInfo {
        position: absolute;
        bottom: 3px;
        padding-left: 5%;
    }

    .mobFoodMenuSection .breakfastInfo h6 {
        font-size: 13px;
        font-weight: 500;
        margin-bottom: -3px;
    }

    .mobFoodMenuSection .breakfastInfo label {
        font-size: 10px;
        font-weight: 400;
    }

    #foodmenuModal .modal-header .close {
        display: block;
        margin: -1rem -1.5rem -1rem auto;
    }

    .mobFoodMenuSection .tab-header a.active {
        background-color: rgba(242, 0, 108, 0.1);
        border: 1px solid #F2006C;
        border-right: 0;
        border-radius: 0;
        color: #4E4E4E;
        border-left: 0;
        width: 100%;
    }

    #foodmenuModal {
        overflow-x: hidden;
        overflow-y: hidden;
    }

    #foodmenuModal .modal-dialog {
        transform: translate(-50%,-50%);
        top: 50%;
        left: 50%;
        margin: auto;
    }

    .breakfastSection .breakfastImage, .dinnerSection .breakfastImage {
        position: relative;
        width: 250px;
    }

    .foodmenuModal .modal-body {
        background-color: revert;
    }
}

@media only screen and (max-width: 768px) {
    .breakfastSection .breakfastImage, .dinnerSection .breakfastImage {
        width: auto;
    }

    .mobFoodMenuSection .tab-header {
        height: 70vh;
    }

    .foodmenuModal .modal-body img {
        width: 100%;
        border-radius: 5px 5px 0 0;
    }

    .breakfastSection .noFoodMsg h5 {
        font-size: 16px;
    }

    /* Resident Speak testimonials */
    .testimonial.residentSpeakWrap {
        padding: 0px;
    }
}
@media only screen and (max-width: 355px) {
    .bp-stay-tab {
        padding: 8px 15px;
    }
    }