/* Accommodation (Casita integration) pages.
   The search/filter/results page intentionally reuses the site's existing global classes
   (course-card, container-courses, user-side-filter, subjects-container, etc. - all defined
   in webroot/css/new-css/newstyles.css) so it matches /results without touching that page or
   its CSS. Only the small additions below and the building/enquiry pages need their own rules. */

.accommodation-building,
.accommodation-enquire {
    padding: 40px 0 60px;
}

/* Listing card images vary wildly in natural height (portrait/landscape/tall/short source photos).
   Scoped to .accommodation-listing-grid (an extra class on our own .container-courses wrapper) so
   this doesn't affect the real /results courses page, which shares the same .top-img class. */
.accommodation-listing-grid .top-img {
    height: 180px;
}

.accommodation-listing-grid .top-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.container-courses .course-card .location-course{
        min-height: 48px;
}
/* Minor fit for chip-style checkboxes (room type / facilities) reusing .subject/.grid-subjects */
.grid-room-types .subject,
.grid-facilities .subject {
    cursor: pointer;
    display: inline-block;
}

.grid-room-types .subject input,
.grid-facilities .subject input {
    pointer-events: none;
}

/* Building detail */
.accommodation-building h1 {
    color: #0b4c97;
    margin-bottom: 10px;
}

.back-link {
    display: inline-block;
    margin-bottom: 14px;
    color: #0b4c97;
    text-decoration: none;
}

.building-location,
.building-distance {
    color: #6b7280;
    margin: 0 0 6px;
}

.building-gallery {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 12px;
    margin: 20px 0;
}

.building-gallery img {
    width: 100%;
    height: 160px;
    object-fit: cover;
    border-radius: 6px;
}

.building-description {
    margin: 20px 0;
    line-height: 1.6;
}

.building-facilities h4 {
    color: #0b4c97;
    margin: 16px 0 8px;
}

.building-facilities ul {
    list-style: none;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.building-facilities li {
    background: #f0f4fa;
    color: #0b4c97;
    padding: 6px 12px;
    border-radius: 20px;
    font-size: 13px;
}

.room-cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 16px;
    margin-top: 16px;
}

.room-card {
    border: 1px solid #e5eaf1;
    border-radius: 8px;
    padding: 16px;
    text-align: center;
}

.room-card h4 {
    margin: 0 0 8px;
}

.room-price {
    font-weight: 700;
    color: #0b4c97;
    margin: 0 0 12px;
}

.building-enquire-cta {
    display: inline-block;
    margin-top: 30px;
}

/* Enquiry form styling now comes from partners.css (loaded on enquire.php alongside this file) -
   it already defines .form-container/.form-header/.partnership-form-modern/.form-row/.form-group/
   .form-section-header/.form-submit/.form-note/.submit-btn-modern globally (unscoped), which is
   exactly what the /partnership page's form uses. enquire.php reuses those same class names, so no
   scoped rules are needed here - keeping our own would just override partners.css by specificity
   and defeat the point of matching that page's look. */

/* Countries landing page + country (cities) page */
.accommodation-countries,
.accommodation-popular,
.accommodation-cities {
    padding: 50px 0;
}

.accommodation-popular {
    background: #f7f9fc;
}

.accommodation-section-title {
    text-align: center;
    color: #0b4c97;
    margin-bottom: 10px;
}

.accommodation-section-subtitle {
    text-align: center;
    color: #6b7280;
    margin-bottom: 24px;
}

.accommodation-countries .accommodation-section-title {
    margin-bottom: 30px;
}

.accommodation-place-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 20px;
}

.accommodation-place-card {
    position: relative;
    display: block;
    height: 200px;
    border-radius: 16px;
    overflow: hidden;
    background: linear-gradient(107deg, #0b4c97 6.38%, #68b8e8 147.19%);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.07);
    text-decoration: none;
}

.accommodation-place-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.accommodation-place-card:hover img {
    transform: scale(1.05);
}

.place-card-overlay {
    position: absolute;
    inset: auto 0 0 0;
    padding: 40px 16px 14px;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.7), transparent);
    color: #fff;
}

.place-card-overlay h3 {
    margin: 0;
    font-size: 20px;
    color: #fff;
}

.place-card-overlay span {
    font-size: 13px;
    opacity: 0.9;
}

.popular-city-tabs {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    margin-bottom: 24px;
}

.popular-city-tab {
    border: 1px solid #0b4c97;
    background: #fff;
    color: #0b4c97;
    border-radius: 20px;
    padding: 6px 18px;
    cursor: pointer;
}

.popular-city-tab.active {
    background: linear-gradient(107deg, #0b4c97 6.38%, #68b8e8 147.19%);
    border-color: transparent;
    color: #fff;
}

.popular-rooms-grid {
    grid-template-columns: repeat(4, 1fr);
}

.popular-view-all {
    text-align: center;
    margin-top: 24px;
}

.accommodation-cities .city-search {
    max-width: 400px;
    margin: 0 auto 24px;
}

.accommodation-city-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 14px;
}

.accommodation-city-card {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 16px;
    border: 1px solid #e5eaf1;
    border-radius: 12px;
    text-decoration: none;
    transition: box-shadow 0.2s ease, border-color 0.2s ease;
}

.accommodation-city-card[hidden] {
    display: none;
}

.accommodation-city-card:hover {
    border-color: #68b8e8;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.07);
}

.accommodation-city-card .city-name {
    color: #0b4c97;
    font-weight: 600;
}

.accommodation-city-card .city-count {
    color: #6b7280;
    font-size: 13px;
}

@media (max-width: 991px) {
    .popular-rooms-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 575px) {
    .popular-rooms-grid {
        grid-template-columns: 1fr;
    }
}

/* Floating casita.com referral button (element accommodation/casita_float_button) */
.casita-float-btn {
    position: fixed;
    left: 20px;
    bottom: 20px;
    z-index: 999;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 20px;
    border-radius: 30px;
    background: linear-gradient(107deg, #0b4c97 6.38%, #68b8e8 147.19%);
    color: #fff;
    font-weight: 600;
    text-decoration: none;
    box-shadow: 0 6px 20px rgba(11, 76, 151, 0.35);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.casita-float-btn:hover,
.casita-float-btn:focus {
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 10px 24px rgba(11, 76, 151, 0.45);
}

@media (max-width: 575px) {
    .casita-float-btn {
        left: 16px;
        bottom: 16px;
        padding: 12px 14px;
    }

    .casita-float-btn span {
        display: none;
    }
}

/* Floating casita.com referral button (element accommodation/casita_float_button) */
.casita-float-btn {
    position: fixed;
    left: 20px;
    bottom: 20px;
    z-index: 999;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 20px;
    border-radius: 30px;
    background: linear-gradient(107deg, #0b4c97 6.38%, #68b8e8 147.19%);
    color: #fff;
    font-weight: 600;
    text-decoration: none;
    box-shadow: 0 6px 20px rgba(11, 76, 151, 0.35);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.casita-float-btn:hover,
.casita-float-btn:focus {
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 10px 24px rgba(11, 76, 151, 0.45);
}

@media (max-width: 575px) {
    .casita-float-btn {
        left: 16px;
        bottom: 16px;
        padding: 12px 14px;
    }

    .casita-float-btn span {
        display: none;
    }
}