/*
Theme Name: Hello SMR
Template: hello-elementor
Version: 1.0.0
*/

/* =========================================================
   SUGAR MILL RESIDENCES
   SINGLE ACCOMMODATION PAGE

   Scope:
   This stylesheet only targets accommodation pages using the
   custom .accomv2 wrapper class.

   Main page flow:
   1. Featured image
   2. Gallery
   3. Accommodation title
   4. Description
   5. Price
   6. Quick property details
   7. Amenities
   8. Reservation form + availability calendar
   ========================================================= */


/* =========================================================
   1. MAIN PAGE WRAPPER
   ========================================================= */

/*
   Restricts the accommodation page to a comfortable content
   width while keeping it centered on larger screens.

   The wrapper uses flex-direction: column because we are
   controlling the display order of MotoPress-generated
   elements using the CSS order property.
*/
.accomv2 {
    position: relative;
    max-width: 1180px;
    margin: 0 auto;
    padding: 34px 20px 70px;

    display: flex;
    flex-direction: column;

    /*
       Prevents any oversized child element from spilling
       outside the main accommodation layout.
    */
    overflow: hidden;
}


/* =========================================================
   2. PAGE CONTENT ORDER
   ========================================================= */

/*
   MotoPress outputs several sections automatically.
   Rather than changing the plugin templates repeatedly,
   these order values control where each section appears
   visually inside the .accomv2 flex container.
*/

/* Main featured property image */
.accomv2 .mphb-single-room-type-post-thumbnail {
    order: 1;
}

/* Thumbnail gallery directly below the main image */
.accomv2 .mphb-single-room-type-gallery-wrapper {
    order: 2;
}

/* Accommodation name, e.g. Sea Scape */
.accomv2 .entry-title {
    order: 3;
}

/* Main accommodation description */
.accomv2 > p {
    order: 4;
}

/* Nightly price */
.accomv2 .mphb-regular-price {
    order: 5;
}

/* Compact property details such as guests, beds and view */
.accomv2 .mphb-single-room-type-attributes {
    order: 6;
}

/*
   Custom amenities section rendered through
   smr_render_amenities_grid().
   Both possible wrapper classes are included here.
*/
.accomv2 .smr-amenities,
.accomv2 .smr-amenities-section {
    order: 7;
}

/*
   Custom booking area containing:
   - Reservation form
   - Availability calendar
*/
.accomv2 .smr-booking-area {
    order: 8;
}


/* =========================================================
   3. FEATURED IMAGE
   ========================================================= */

/*
   Small space between the main image and gallery.
*/
.accomv2 .mphb-single-room-type-post-thumbnail {
    margin: 0 0 18px;
}

/*
   Makes all featured images display at a consistent height,
   regardless of whether the uploaded image is portrait,
   landscape or another aspect ratio.

   clamp() allows the image height to scale responsively:
   - Minimum: 430px
   - Preferred: 48vw
   - Maximum: 570px

   object-fit: cover preserves the layout by cropping excess
   image areas instead of stretching the image.
*/
.accomv2 .mphb-single-room-type-post-thumbnail img {
    display: block;

    width: 100%;
    height: clamp(430px, 48vw, 570px);

    object-fit: cover;

    border-radius: 24px;
}


/* =========================================================
   4. IMAGE GALLERY
   ========================================================= */

/*
   Adds breathing room between the gallery and the start
   of the accommodation information.
*/
.accomv2 .mphb-single-room-type-gallery-wrapper {
    margin-bottom: 38px;
}

/*
   Creates a clean four-column thumbnail gallery on desktop.
*/
.accomv2 .gallery {
    display: grid;
    grid-template-columns: repeat(4, 1fr);

    gap: 14px;

    margin: 0;
}

/*
   Removes WordPress/MotoPress default gallery margins.
*/
.accomv2 .gallery-item {
    margin: 0;
}

.accomv2 .gallery .gallery-item:nth-child(n + 9) {
    display: none;
}

/* =========================================================
   "VIEW ALL PHOTOS" INDICATOR

   The eighth visible thumbnail becomes the entry point
   for opening the complete accommodation gallery.
   ========================================================= */

.accomv2 .gallery .gallery-item:nth-child(8) {
    position: relative;
}

.accomv2 .gallery .gallery-item:nth-child(8)::after {
    content: "View All Photos";

    position: absolute;
    inset: 0;

    display: flex;
    align-items: center;
    justify-content: center;

    background: rgba(15, 23, 42, 0.48);

    border-radius: 12px;

    color: #ffffff;

    font-size: 14px;
    font-weight: 600;

    pointer-events: none;
}

/* Slightly darken the image behind the label */
.accomv2 .gallery .gallery-item:nth-child(8) img {
    filter: brightness(0.8);
}

.accomv2 .gallery-icon {
    margin: 0;
}

/*
   Forces all gallery thumbnails to remain the same size.
   This is especially important because the source images
   may have mixed portrait and landscape dimensions.
*/
.accomv2 .gallery-icon img {
    display: block;

    width: 100%;
    height: 150px;

    object-fit: cover;

    border-radius: 12px;
	
	transition: transform 0.25s ease, opacity 0.25s ease;
}

.accomv2 .gallery-icon a {
    display: block;
    overflow: hidden;
    border-radius: 12px;
    cursor: zoom-in;
}

.accomv2 .gallery-icon a:hover img {
    transform: scale(1.025);
    opacity: 0.94;
}




/* =========================================================
   5. ACCOMMODATION TITLE
   ========================================================= */

/*
   Primary accommodation heading.

   The warm brown tone connects the page heading with the
   Sugar Mill Residences branding without competing with
   the gold booking accents.
*/
.accomv2 .entry-title {
    margin: 0 0 16px;

    font-size: 40px;
    font-weight: 800;
    line-height: 1.15;

    color: #7A5C2E;
}


/* =========================================================
   6. ACCOMMODATION DESCRIPTION
   ========================================================= */

/*
   Applies to the main paragraph content directly inside
   .accomv2.

   The max-width keeps very long lines readable on large
   screens while still allowing the content to use most of
   the available page width.
*/
/* Main accommodation paragraphs */
.accomv2 > p {
    order: 4;
    margin: 0 0 18px;
    color: #334155;
    font-size: 16px;
    line-height: 1.75;
}

/* Prevent unnecessary spacing after the final paragraph */
.accomv2 > p:last-of-type {
    margin-bottom: 0;
}

/* Description headings */
.accomv2 > h2,
.accomv2 > h3,
.accomv2 > h4 {
    order: 4;
    margin: 24px 0 12px;
    color: #334155;
    line-height: 1.4;
}

/* Description lists */
.accomv2 > ul,
.accomv2 > ol {
    order: 4;
    margin: 0 0 18px;
    padding-left: 24px;
}


/* =========================================================
   7. NIGHTLY PRICE
   ========================================================= */

/*
   Provides separation between the accommodation description
   and the nightly rate.
*/
.accomv2 .mphb-regular-price {
    margin: 28px 0 22px;

    color: #64748b;

    font-size: 16px;
    line-height: 1.4;
}

/*
   Highlights the actual price figure while keeping
   supporting wording such as "From" less dominant.
*/
.accomv2 .mphb-regular-price .mphb-price {
    color: #BF9C40;

    font-size: 24px;
    font-weight: 800;
}

/*
   Default price styling for smaller MotoPress price elements.
*/
.accomv2 .mphb-price {
    color: #b8860b;

    font-size: 12px;
    font-weight: 500;
}


/* =========================================================
   8. QUICK PROPERTY DETAILS
   ========================================================= */

/*
   MotoPress normally outputs a "Details" heading.
   It is hidden because the compact badges are clear enough
   without an additional heading.
*/
.accomv2 .mphb-details-title {
    display: none;
}

/*
   Converts the MotoPress property detail list into compact,
   responsive badges.

   Typical content:
   - Guests
   - View
   - Beds
   - Family suitability
*/
.accomv2 .mphb-single-room-type-attributes {
    display: flex;
    flex-wrap: wrap;

    gap: 10px;

    padding: 0;
    margin: 0 0 42px;

    list-style: none;
}

/*
   Individual detail badge styling.
*/
.accomv2 .mphb-single-room-type-attributes li {
    padding: 10px 15px;

    background: #fff2d2;

    border: 1px solid #e1d5b7;
    border-radius: 4px;

    color: #334155;

    font-size: 13px;
    line-height: 1.2;
}


/* =========================================================
   9. HIDE DUPLICATED MOTOPRESS DETAILS
   ========================================================= */

/*
   These MotoPress fields are hidden because the information
   is either:
   - shown in the custom quick-detail badges,
   - displayed in the custom amenities grid,
   - or not needed on the public-facing page.

   This avoids duplicate content.
*/
.accomv2 .mphb-facilities-title,
.accomv2 .mphb-bed-type-title,
.accomv2 .mphb-view-title,
.accomv2 .mphb-categories-title,
.accomv2 .mphb-room-type-facilities {
    display: none;
}


/* =========================================================
   10. DISABLE DETAIL ARCHIVE LINKS
   ========================================================= */

/*
   MotoPress can make attribute values clickable archive links.

   For Sugar Mill Residences, these detail badges are intended
   only as information, not navigation.

   pointer-events: none prevents clicking without modifying
   MotoPress templates.
*/
.accomv2 .mphb-single-room-type-attributes a {
    color: inherit;

    text-decoration: none;

    pointer-events: none;
    cursor: default;
}


/* =========================================================
   11. AMENITIES SECTION
   ========================================================= */

/*
   Provides spacing after the custom amenities area before
   the reservation section begins.

   Both wrapper names are included in case your custom
   rendering function uses either class.
*/
.accomv2 .smr-amenities,
.accomv2 .smr-amenities-section {
    margin-bottom: 48px;
}


/*
   Amenities heading.

   Supports three possible heading structures:
   - h2 inside .smr-amenities
   - h2 inside .smr-amenities-section
   - direct .smr-amenities-title class
*/
.accomv2 .smr-amenities h2,
.accomv2 .smr-amenities-section h2,
.accomv2 .smr-amenities-title {
    margin: 0 0 18px;

    color: #0f172a;

    font-size: 28px;
    font-weight: 800;
    line-height: 1.2;
}


/*
   Three-column amenities layout on desktop.

   This works well for your 13 amenities because it keeps
   the section compact while still making each item easy
   to scan.
*/
.accomv2 .smr-amenities-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);

    gap: 10px;
}


/*
   Individual amenity item.

   Uses the same light cream visual language as the property
   details so the entire information section feels related.
*/
.accomv2 .smr-amenities-grid > * {
    display: flex;
    align-items: center;

    gap: 10px;

    min-height: 46px;

    padding: 11px 14px;

    background: #fff2d2;

    border: 1px solid #e1d5b7;
    border-radius: 6px;

    color: #334155;

    font-size: 14px;
    line-height: 1.3;
}


/*
   Keeps all Font Awesome amenity icons aligned consistently,
   even when individual icons have different natural widths.
*/
.accomv2 .smr-amenities-grid i {
    flex: 0 0 auto;

    width: 16px;

    color: #b8860b;

    text-align: center;
}


/* =========================================================
   12. BOOKING + AVAILABILITY LAYOUT
   ========================================================= */

/*
   Desktop booking section.

   Reservation form receives slightly more horizontal space
   than the calendar because the form contains larger input
   fields and more interactive content.

   minmax(0, ...) prevents grid children from forcing the
   layout wider than the page container.
*/
.accomv2 .smr-booking-area {
    display: grid;

    grid-template-columns:
        minmax(0, 1.25fr)
        minmax(320px, 0.75fr);

    gap: 26px;

    align-items: start;

    margin-top: 8px;
    margin-bottom: 40px;
}


/*
   Prevents long internal content from overflowing its
   respective grid column.
*/
.accomv2 .smr-booking-area > * {
    min-width: 0;
}


/* =========================================================
   13. RESERVATION FORM TITLE
   ========================================================= */

/*
   Keeps the reservation heading visually aligned with the
   Availability heading beside it.
*/
.accomv2 .smr-booking-area .mphb-reservation-form-title {
    margin: 0 0 18px;

    color: #0f172a;

    font-size: 28px;
    font-weight: 800;
    line-height: 1.2;
}


/* =========================================================
   14. RESERVATION FORM CARD
   ========================================================= */

/*
   The reservation form is intentionally shown inside a
   subtle card because it is the main action area of the
   accommodation page.

   The shadow and border are deliberately restrained so the
   page still feels like a hospitality website rather than
   a dashboard.
*/
.accomv2 .smr-booking-area .mphb-booking-form {
    margin: 0;

    padding: 28px;

    background: #ffffff;

    border: 1px solid rgba(15, 23, 42, 0.08);
    border-radius: 18px;

    box-shadow: 0 16px 30px rgba(15, 23, 42, 0.07);
}


/*
   General form paragraph styling.
*/
.accomv2 .mphb-booking-form p {
    color: #334155;

    font-size: 14px;
    line-height: 1.5;
}


/*
   Form labels.
*/
.accomv2 .mphb-booking-form label {
    color: #334155;

    font-size: 13px;
    font-weight: 500;
}


/* =========================================================
   15. DATE INPUT FIELDS
   ========================================================= */

/*
   Styles MotoPress date fields to visually match the site's
   gold/brown brand accents.
*/
.accomv2 .mphb-booking-form input[type="text"] {
    width: 100%;

    padding: 12px 14px;

    background: #ffffff;

    border: 1px solid #d6b35f;
    border-radius: 8px;

    color: #0f172a;
}


/*
   Gives users a clear visual indication when a date field
   is active or selected.
*/
.accomv2 .mphb-booking-form input[type="text"]:focus {
    border-color: #b8860b;

    outline: none;

    box-shadow: 0 0 0 2px rgba(184, 134, 11, 0.12);
}


/* =========================================================
   16. RESERVE BUTTON
   ========================================================= */

/*
   Full-width primary call-to-action.

   A modest 4px radius is used intentionally instead of a
   pill-style button so it remains consistent with the rest
   of the Sugar Mill Residences interface.
*/
.accomv2 .mphb-reserve-btn {
    width: 100%;

    padding: 15px 24px !important;

    background: #b8860b !important;

    border: none !important;
    border-radius: 4px !important;

    color: #ffffff !important;

    font-weight: 600 !important;

    /*
       Provides a smoother visual change on hover.
    */
    transition:
        background-color 0.2s ease,
        transform 0.2s ease;
}


/*
   Slightly darkens the button on hover to make the interaction
   feel responsive without using an aggressive animation.
*/
.accomv2 .mphb-reserve-btn:hover {
    background: #9f7509 !important;
}


/* =========================================================
   17. AVAILABILITY HEADING
   ========================================================= */

/*
   Matches the reservation form title so both columns feel
   like one coordinated booking section.
*/
.accomv2 .smr-booking-area .mphb-calendar-title {
    margin: 0 0 18px;

    color: #0f172a;

    font-size: 28px;
    font-weight: 800;
    line-height: 1.2;
}


/* =========================================================
   18. AVAILABILITY CALENDAR WRAPPER
   ========================================================= */

/*
   Allows the calendar to use the full width of its grid
   column instead of the narrower MotoPress default width.
*/
.accomv2 .smr-booking-area .mphb-calendar {
    width: 100%;
    max-width: none;

    margin: 0;

    /*
       Provides fallback horizontal scrolling if MotoPress
       outputs a calendar wider than the available area.
    */
    overflow-x: auto;
}


/*
   Removes the plugin's fixed width limitation and keeps the
   calendar corners visually consistent with the site.
*/
.accomv2 .smr-booking-area .datepick-inline {
    width: 100%;
    max-width: none;

    overflow: hidden;

    border-radius: 10px;
}


/* =========================================================
   19. SHOW ONLY ONE CALENDAR MONTH
   ========================================================= */

/*
   MotoPress may output more than one month at a time.

   This hides every calendar month after the first one,
   producing a cleaner layout for the accommodation page.
*/
.accomv2 .datepick-multi .datepick-month + .datepick-month {
    display: none;
}


/*
   Forces the visible month to use the full width available.
*/
.accomv2 .datepick-month {
    width: 100% !important;
}


/* =========================================================
   20. CALENDAR TABLE
   ========================================================= */

/*
   Ensures each day column receives an equal amount of space.
*/
.accomv2 .datepick-month table {
    width: 100%;

    table-layout: fixed;
}


/*
   There are seven days in a week, so each calendar column
   receives approximately 1/7 of the total width.
*/
.accomv2 .datepick-month td,
.accomv2 .datepick-month th {
    width: 14.285%;

    text-align: center;
}


/*
   Gives each date cell enough vertical space for both:
   - date number
   - nightly price
*/
.accomv2 .datepick-month td a,
.accomv2 .datepick-month td span {
    min-height: 38px;
}


/*
   Styles the nightly price that MotoPress displays inside
   each available calendar date.
*/
.accomv2 .mphb-date-cell-price {
    display: block;

    margin-top: 2px;

    font-size: 10px;
    font-weight: 400;
    line-height: 1.1;
}


/* =========================================================
   21. TABLET LAYOUT
   ========================================================= */

@media (max-width: 900px) {

    /*
       Stack Reservation Form and Availability vertically
       once the screen becomes too narrow for two comfortable
       booking columns.
    */
    .accomv2 .smr-booking-area {
        grid-template-columns: 1fr;
        gap: 38px;
    }
	
	/* Hide Availability calendar section */
    .accomv2 .smr-booking-area .smr-calendar,
    .accomv2 .smr-booking-area .mphb-calendar-title,
    .accomv2 .smr-booking-area .mphb-calendar {
        display: none !important;
    }


    /*
       Reduce amenities from three columns to two columns.
    */
    .accomv2 .smr-amenities-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}


/* =========================================================
   22. MOBILE LAYOUT
   ========================================================= */

@media (max-width: 768px) {

    /*
       Reduce overall page padding so more of the screen width
       is available for content.
    */
    .accomv2 {
        padding: 24px 14px 50px;
    }


    /* -----------------------------------------------------
       Mobile featured image
       ----------------------------------------------------- */

    /*
       A fixed mobile height gives the hero image a strong
       presence without consuming too much of the viewport.
    */
    .accomv2 .mphb-single-room-type-post-thumbnail img {
        height: 280px;

        border-radius: 14px;
    }


    /* -----------------------------------------------------
       Mobile gallery
       ----------------------------------------------------- */

    /*
       Slightly reduce the space below the gallery.
    */
    .accomv2 .mphb-single-room-type-gallery-wrapper {
        margin-bottom: 30px;
    }

    /*
       Two thumbnails per row on mobile.
    */
    .accomv2 .gallery {
        grid-template-columns: repeat(2, 1fr);

        gap: 10px;
    }

    /*
       Shorter thumbnail height suits narrower screens.
    */
    .accomv2 .gallery-icon img {
        height: 105px;

        border-radius: 10px;
    }


    /* -----------------------------------------------------
       Mobile heading
       ----------------------------------------------------- */

    .accomv2 .entry-title {
        font-size: 30px;
    }


    /* -----------------------------------------------------
       Mobile description
       ----------------------------------------------------- */

    .accomv2 > p {
        font-size: 15px;
        line-height: 1.7;
    }


    /* -----------------------------------------------------
       Mobile price
       ----------------------------------------------------- */

    .accomv2 .mphb-regular-price {
        margin-top: 24px;
    }


    /* -----------------------------------------------------
       Mobile quick details
       ----------------------------------------------------- */

    .accomv2 .mphb-single-room-type-attributes {
        gap: 8px;

        margin-bottom: 36px;
    }

    .accomv2 .mphb-single-room-type-attributes li {
        padding: 9px 12px;

        font-size: 12px;
    }


    /* -----------------------------------------------------
       Mobile amenities
       ----------------------------------------------------- */

    /*
       Use one amenity per row for maximum readability.
    */
    .accomv2 .smr-amenities-grid {
        grid-template-columns: 1fr;

        gap: 8px;
    }

    .accomv2 .smr-amenities-grid > * {
        min-height: 42px;
    }


    /* -----------------------------------------------------
       Mobile section headings
       ----------------------------------------------------- */

    /*
       Reduces all key section headings proportionally.
    */
    .accomv2 .smr-amenities h2,
    .accomv2 .smr-amenities-section h2,
    .accomv2 .smr-amenities-title,
    .accomv2 .smr-booking-area .mphb-reservation-form-title,
    .accomv2 .smr-booking-area .mphb-calendar-title {
        font-size: 24px;
    }


    /* -----------------------------------------------------
       Mobile booking section
       ----------------------------------------------------- */

    .accomv2 .smr-booking-area {
        gap: 34px;

        margin-top: 0;
    }


    /*
       Reduce the card padding to preserve usable form width.
    */
    .accomv2 .smr-booking-area .mphb-booking-form {
        padding: 22px;

        border-radius: 14px;
    }


    /* -----------------------------------------------------
       Mobile calendar
       ----------------------------------------------------- */

    /*
       Increase date-cell height slightly to make calendar
       selection easier on touchscreens.
    */
    .accomv2 .datepick-month td a,
    .accomv2 .datepick-month td span {
        min-height: 42px;

        font-size: 12px;
    }

    /*
       Smaller calendar price text prevents overcrowding.
    */
    .accomv2 .mphb-date-cell-price {
        font-size: 9px;
    }
}


/* =========================================================
   23. SMALL MOBILE PHONES
   ========================================================= */

@media (max-width: 480px) {

    /*
       Slightly reduce side padding again for narrow devices.
    */
    .accomv2 {
        padding-left: 12px;
        padding-right: 12px;
    }

    /*
       Prevent the featured image from becoming excessively
       tall on very narrow screens.
    */
    .accomv2 .mphb-single-room-type-post-thumbnail img {
        height: 235px;
    }

    /*
       Compact gallery thumbnail height.
    */
    .accomv2 .gallery-icon img {
        height: 90px;
    }

    /*
       Slightly smaller accommodation title.
    */
    .accomv2 .entry-title {
        font-size: 28px;
    }

    /*
       Reduce reservation form side padding while keeping
       enough internal breathing room.
    */
    .accomv2 .mphb-booking-form {
        padding-left: 18px;
        padding-right: 18px;
    }
}