@charset "UTF-8";
/*!
Theme Name: Luviana Child
Theme URI: https://motopress.com/products/luviana
Author: MotoPress
Author URI: https://motopress.com
Description: Luviana is a Gutenberg theme perfectly fitting for hotels, rental accommodations and services, boarding houses or hostels. The theme comprises an integrated online booking plugin that allows conducting reservations of your rental properties and receiving online payments.
Version: 1.0.46
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: luviana
Template: luviana
*/

/* ============================================================
   Mango Grove custom styles (child theme overrides)
   ============================================================ */
.content-area.front-page .site-main > .hentry > .entry-content {
    margin-top: -72px !important;
}
.our-amenities-section .wp-block-getwid-section__wrapper {
    padding-top: 162px !important;
}
.front-page-widget-area {
    z-index: 99;
}
.site-content {
    padding-bottom: 0 !important;
}
@media screen and (max-width: 768px) {
    .content-area.front-page .site-main > .hentry > .entry-content {
        margin-top: -405px !important;
    }
    .our-amenities-section .wp-block-getwid-section__wrapper {
        padding-top: 485px !important;
    }
}
/* Hero slide readability:
   Adds a dark gradient overlay on each slide's background image so the
   white title and description text stay legible regardless of how bright
   or busy the photo is. A subtle text shadow adds extra punch. */
.luviana-front-page-header .child-pages-list .child-page-thumbnail::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.30) 0%, rgba(0, 0, 0, 0.55) 100%);
    pointer-events: none;
    z-index: 1;
}

/* Make sure the slide content stacks above the overlay */
.luviana-front-page-header .child-pages-list .child-page-content-wrapper {
    position: relative;
    z-index: 2;
}

/* Soft shadow under the headline + description text */
.luviana-front-page-header .child-pages-list .child-page-title h2,
.luviana-front-page-header .child-pages-list .child-page-content {
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.45);
}

/* ====================================================================
   MOCKUP-TO-LIVE STYLES — added for approved Round 2 mockup migration
   These extend Luviana's defaults to match the mockup look. Most apply
   via Block → Advanced → "Additional CSS Class" so they only target
   the blocks we explicitly opt in.
   ==================================================================== */

/* -- Brand variables (mirror Luviana's defaults so we don't duplicate) -- */
:root {
    --mg-tan: #c1b086;
    --mg-tan-light: #d1c39d;
    --mg-navy: #252e59;
    --mg-text: #5f6060;
    --mg-heading: #222222;
    --mg-cream: #f7f4ee;
    --mg-hairline: #ededed;
    --mg-teal: #5fb3c4;
}

/* ====================================================================
   1. HERO SLIDER — thumb rail + dot indicators
   The child-theme override (functions.php) makes the hero pull
   mphb_room_type posts. These rules size the thumbs and dots to match
   the mockup (72px square thumbs with tan border on active; 32px wide
   dots).
   ==================================================================== */

.luviana-front-page-header .child-pages-list .slick-arrow {
    /* Hide default slick arrows; the thumb rail acts as navigation */
    display: none !important;
}

.luviana-front-page-header .child-pages-list .slick-dots {
    bottom: 40px;
    left: calc(50px + 3.125rem);
    text-align: left;
    width: auto;
}
.luviana-front-page-header .child-pages-list .slick-dots li {
    width: 32px;
    height: 3px;
    margin: 0 7px 0 0;
}
.luviana-front-page-header .child-pages-list .slick-dots li button {
    width: 32px;
    height: 3px;
    padding: 0;
    background: rgba(255, 255, 255, 0.35);
}
.luviana-front-page-header .child-pages-list .slick-dots li button::before {
    display: none;
}
.luviana-front-page-header .child-pages-list .slick-dots li.slick-active button {
    background: #fff;
}

/* Shift the entire nav rail down ~15px from parent's `top: 50%` center
   so the welcome thumbnail clears the site header navigation above
   without the bottom thumb (gray casita) crowding the booking band. */
.luviana-front-page-header .child-pages-nav-slider-wrapper {
    top: calc(50% + 15px);
}

/* Enforce uniform thumbnail dimensions across the rail. Casita thumbs
   use `luviana-x-small` (140x90, cropped); the welcome thumb uses the
   raw uploaded image. CSS forces both to render at the same display
   size with object-fit so any aspect mismatch is centre-cropped. */
.luviana-front-page-header .child-pages-nav-slider-item img {
    width: 140px;
    height: 90px;
    object-fit: cover;
    display: block;
}

/* Casita name overlay on each nav-rail thumbnail. Positioned over the
   image with a bottom-weighted dark gradient for legibility on bright
   photos. pointer-events: none so the click still hits the slick item.
   Also tightens the vertical gap between thumbnails (parent theme uses
   .625rem) so the welcome thumb + 5 casitas all fit without the rail
   overflowing into the site header navigation above. */
.luviana-front-page-header .child-pages-nav-slider-item {
    position: relative;
    margin: 0.3rem 0;
}
.luviana-front-page-header .child-pages-nav-slider-item-title {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    text-align: center;
    color: #fff;
    font-family: 'Open Sans', sans-serif;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    line-height: 1.2;
    padding: 6px 4px;
    background: linear-gradient(to top, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0.25) 55%, rgba(0,0,0,0) 100%);
    text-shadow: 0 1px 2px rgba(0,0,0,0.55);
    pointer-events: none;
    box-sizing: border-box;
}

/* ====================================================================
   2. BOOKING BAND — MotoPress search form
   Navy band with uppercase labels, dark transparent fields, teal button.
   Wrap the [mphb_availability_search] shortcode inside a Getwid Section
   with the class `mg-booking-band` (set via Advanced > CSS Class).
   ==================================================================== */

.mg-booking-band {
    background: var(--mg-navy);
    padding: 32px calc(50px + 3.125rem);
    color: #fff;
}

.mg-booking-band .mphb-search-form,
.mg-booking-band .mphb-search-fields {
    display: grid;
    grid-template-columns: repeat(4, 1fr) auto;
    gap: 28px;
    align-items: end;
    max-width: 1170px;
    margin: 0 auto;
}

.mg-booking-band label {
    display: block;
    font-size: 12px;
    letter-spacing: 1px;
    text-transform: uppercase;
    margin-bottom: 10px;
    color: rgba(255, 255, 255, 0.85);
    font-weight: 600;
}

.mg-booking-band input[type="text"],
.mg-booking-band input[type="date"],
.mg-booking-band select {
    width: 100%;
    padding: 12px 14px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.18);
    color: #fff;
    font-size: 14px;
    font-family: inherit;
}

.mg-booking-band input::placeholder { color: rgba(255, 255, 255, 0.5); }

.mg-booking-band button[type="submit"],
.mg-booking-band .mphb-button {
    background: var(--mg-teal);
    color: #fff;
    border: none;
    padding: 16px 44px;
    font-size: 12px;
    letter-spacing: 1px;
    text-transform: uppercase;
    font-weight: 600;
    cursor: pointer;
    font-family: 'Open Sans', sans-serif;
}

@media (max-width: 900px) {
    .mg-booking-band { padding: 24px; }
    .mg-booking-band .mphb-search-form,
    .mg-booking-band .mphb-search-fields {
        grid-template-columns: 1fr 1fr;
        gap: 16px;
    }
    .mg-booking-band button[type="submit"] { grid-column: 1 / -1; }
}

/* ====================================================================
   3. SECTION VARIANT — photo background (for "Our Amenities",
   "Private retreat in the jungle", "Book the whole property")
   Add class `mg-bg-image` to a Getwid Section block. Set the background
   image via the block's native Background Image setting; this rule
   adds the navy gradient overlay and forces white text.
   ==================================================================== */

.mg-bg-image {
    position: relative;
    color: #fff;
}
.mg-bg-image::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(rgba(37, 46, 89, 0.55), rgba(37, 46, 89, 0.72));
    pointer-events: none;
}
.mg-bg-image > * { position: relative; z-index: 1; }
.mg-bg-image h1, .mg-bg-image h2, .mg-bg-image h3 { color: #fff; }
.mg-bg-image p { color: rgba(255, 255, 255, 0.92); }

/* ====================================================================
   4. AMENITIES FLOATING CARD
   Used on home — Getwid Section with bg image, narrower inner Section
   anchored right with teal background. Add class `mg-amenities-card`
   to the inner Section.
   ==================================================================== */

.mg-amenities-card {
    background: rgba(95, 179, 196, 0.92);
    color: #fff;
    padding: 40px 44px 36px;
    max-width: 360px;
    margin-left: auto;
}
.mg-amenities-card h3 { color: #fff; font-size: 25px; margin-bottom: 22px; }
.mg-amenities-card ul { list-style: none; padding: 0; margin: 0; }
.mg-amenities-card li {
    display: flex;
    align-items: center;
    gap: 16px;
    font-size: 15px;
    margin-bottom: 14px;
    line-height: 1.4;
}
.mg-amenities-card li:last-child { margin-bottom: 0; }

@media (max-width: 900px) {
    .mg-amenities-card { margin: 0 auto; }
}

/* ====================================================================
   5. MOTOPRESS ACCOMMODATION CARDS — shortcode output styling
   Two layout patterns for the [mphb_rooms] shortcode, applied via the
   shortcode's `class=""` attribute:

     [mphb_rooms class="mg-acc-featured" ids="GUEST_HOUSE_ID"]
       → single wide horizontal card (image left, content right)

     [mphb_rooms class="mg-acc-grid" ids="B,Y,V,G"]
       → 2x2 grid of vertical cards

   These rules target the MotoPress markup directly:
     .mphb_sc_rooms-wrapper.mg-acc-* > .mphb-room-type
   ==================================================================== */

/* --- Common card visuals (border, hover, image transition) --- */
.mg-acc-featured .mphb-room-type,
.mg-acc-grid .mphb-room-type {
    background: #fff;
    border: 1px solid var(--mg-hairline);
    overflow: hidden;
    transition: box-shadow 0.3s ease;
    margin: 0;
    position: relative;
}
.mg-acc-featured .mphb-room-type:hover,
.mg-acc-grid .mphb-room-type:hover {
    box-shadow: 0 16px 32px rgba(0, 0, 0, 0.08);
}
.mg-acc-featured .mphb-room-type img,
.mg-acc-grid .mphb-room-type img {
    width: 100%;
    display: block;
    transition: transform 0.5s ease;
}
.mg-acc-featured .mphb-room-type:hover img,
.mg-acc-grid .mphb-room-type:hover img {
    transform: scale(1.04);
}

/* Default padding on content blocks inside the card */
.mg-acc-featured .mphb-room-type > *,
.mg-acc-grid .mphb-room-type > * {
    padding-left: 28px;
    padding-right: 28px;
}

/* --- FEATURED: wide horizontal card (image left, content right) --- */

.mg-acc-featured .mphb-room-type {
    display: grid;
    grid-template-columns: 1fr 1fr;
}

/* First child (image / gallery) spans full left column */
.mg-acc-featured .mphb-room-type > *:first-child {
    grid-row: 1 / -1;
    grid-column: 1;
    padding: 0;
    overflow: hidden;
}
.mg-acc-featured .mphb-room-type > *:first-child img {
    height: 100%;
    min-height: 360px;
    object-fit: cover;
}

/* All other children stack in the right column */
.mg-acc-featured .mphb-room-type > *:not(:first-child) {
    grid-column: 2;
    padding-left: 48px;
    padding-right: 48px;
}
.mg-acc-featured .mphb-room-type > *:nth-child(2) {
    padding-top: 56px;
}
.mg-acc-featured .mphb-room-type > *:last-child {
    padding-bottom: 56px;
}

/* Bigger title for featured */
.mg-acc-featured .mphb-room-type h1,
.mg-acc-featured .mphb-room-type h2,
.mg-acc-featured .mphb-room-type h3 {
    font-size: 39px;
    margin-bottom: 0.5em;
    margin-top: 0;
    line-height: 1.2;
}

/* Price emphasized in serif */
.mg-acc-featured .mphb-room-type .mphb-price,
.mg-acc-featured .mphb-room-type [class*="price"] {
    font-family: 'Noto Serif', serif;
    color: var(--mg-heading);
    font-size: 31px;
}

/* Optional flagship badge (add via Custom HTML inside the wrapper Group if desired) */
.mg-flagship-tag {
    position: absolute;
    top: 20px;
    left: 20px;
    background: var(--mg-tan);
    color: #fff;
    font-size: 11px;
    letter-spacing: 2px;
    text-transform: uppercase;
    padding: 8px 14px;
    font-weight: 700;
    z-index: 2;
}

/* --- GRID: 2x2 vertical cards --- */

/* Luviana adds an inner `.mphb-room-types-wrapper` between the
   outer shortcode wrapper and the cards — that's the actual parent
   we need to make a grid. */
.mg-acc-grid .mphb-room-types-wrapper {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 28px;
}

.mg-acc-grid .mphb-room-type {
    display: flex;
    flex-direction: column;
}

/* First child (image) at the top, fixed height */
.mg-acc-grid .mphb-room-type > *:first-child {
    padding: 0;
    overflow: hidden;
    flex-shrink: 0;
}
.mg-acc-grid .mphb-room-type > *:first-child img {
    height: 220px;
    object-fit: cover;
}

/* Other children stacked below with padding */
.mg-acc-grid .mphb-room-type > *:nth-child(2) {
    padding-top: 24px;
}
.mg-acc-grid .mphb-room-type > *:last-child {
    padding-bottom: 26px;
}

.mg-acc-grid .mphb-room-type h1,
.mg-acc-grid .mphb-room-type h2,
.mg-acc-grid .mphb-room-type h3 {
    font-size: 22px;
    margin-bottom: 0.4em;
    margin-top: 0;
}

/* --- LUVIANA OVERRIDES: parent theme wraps the card in
   .room-images-wrapper (30% width default) + .room-description-wrapper
   (70% width default). Force both to 100% within our cards so the
   image and content take the layout we expect. --- */

.mg-acc-featured .mphb-room-type .room-images-wrapper,
.mg-acc-grid .mphb-room-type .room-images-wrapper {
    width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow: hidden;
}

.mg-acc-featured .mphb-room-type .room-description-wrapper,
.mg-acc-grid .mphb-room-type .room-description-wrapper {
    width: 100% !important;
}

/* Stack the inner content (title/desc/details on top, price/button below)
   instead of Luviana's default 62/35 horizontal split */
.mg-acc-featured .mphb-room-type .room-description-inner-wrapper,
.mg-acc-grid .mphb-room-type .room-description-inner-wrapper {
    flex-direction: column !important;
    flex-wrap: wrap !important;
}

.mg-acc-featured .mphb-room-type .room-description-inner-wrapper .room-details,
.mg-acc-featured .mphb-room-type .room-description-inner-wrapper .room-booking-details,
.mg-acc-grid .mphb-room-type .room-description-inner-wrapper .room-details,
.mg-acc-grid .mphb-room-type .room-description-inner-wrapper .room-booking-details {
    width: 100% !important;
    padding-left: 0 !important;
    margin-left: 0 !important;
    border-left: none !important;
}

/* Add a horizontal hairline above the price+button row instead of the
   vertical border Luviana drew on the left side */
.mg-acc-featured .mphb-room-type .room-description-inner-wrapper .room-booking-details,
.mg-acc-grid .mphb-room-type .room-description-inner-wrapper .room-booking-details {
    border-top: 1px solid var(--mg-hairline);
    padding-top: 14px !important;
    margin-top: 14px !important;
}

/* Luviana adds margin-top: 2.5rem between adjacent room cards, which
   stacks on top of our grid `gap` and creates oversized vertical jumps
   between rows. Zero it out so the grid gap is the only spacing source. */
.mg-acc-grid .mphb-room-types-wrapper .mphb-room-type + .mphb-room-type {
    margin-top: 0 !important;
}

/* Match the gap BETWEEN the featured-card wrapper and the grid wrapper
   to the 28px gap WITHIN the grid, for consistent rhythm */
.mg-acc-featured {
    margin: 0 0 28px 0 !important;
}
.mg-acc-grid {
    margin: 0 !important;
}

/* Featured: image fills the left column at full height */
.mg-acc-featured .mphb-room-type .room-images-wrapper img {
    width: 100%;
    height: 100%;
    min-height: 360px;
    object-fit: cover;
}
.mg-acc-featured .mphb-room-type .room-description-wrapper {
    padding: 56px 48px !important;
}

/* Grid: image fills the top of each card with a fixed height */
.mg-acc-grid .mphb-room-type .room-images-wrapper img {
    width: 100%;
    height: 220px;
    object-fit: cover;
}
.mg-acc-grid .mphb-room-type .room-description-wrapper {
    padding: 24px 24px 26px !important;
}

/* --- MOBILE responsive (≤900px) --- */
@media (max-width: 900px) {
    /* Featured card stacks vertically (image on top, content below) */
    .mg-acc-featured .mphb-room-type {
        grid-template-columns: 1fr;
    }
    .mg-acc-featured .mphb-room-type > *:first-child {
        grid-row: 1;
    }
    .mg-acc-featured .mphb-room-type > *:not(:first-child) {
        grid-column: 1;
    }
    .mg-acc-featured .mphb-room-type .room-images-wrapper img {
        min-height: 220px;
        height: 220px;
    }
    .mg-acc-featured .mphb-room-type .room-description-wrapper {
        padding: 28px 24px !important;
    }
    .mg-acc-featured .mphb-room-type h1,
    .mg-acc-featured .mphb-room-type h2,
    .mg-acc-featured .mphb-room-type h3 {
        font-size: 28px;
    }

    /* Grid drops to 1 column */
    .mg-acc-grid .mphb-room-types-wrapper {
        grid-template-columns: 1fr;
        gap: 20px;
    }
    .mg-acc-grid .mphb-room-type .room-description-wrapper {
        padding: 20px 22px 22px !important;
    }

    /* Gap between featured and grid wrappers tightens on mobile */
    .mg-acc-featured {
        margin-bottom: 20px !important;
    }
}

/* --- MOBILE (≤600px) tighter --- */
@media (max-width: 600px) {
    .mg-acc-featured .mphb-room-type .room-images-wrapper img,
    .mg-acc-grid .mphb-room-type .room-images-wrapper img {
        height: 180px !important;
        min-height: 180px !important;
    }
    .mg-acc-featured .mphb-room-type .room-description-wrapper,
    .mg-acc-grid .mphb-room-type .room-description-wrapper {
        padding: 18px 18px 20px !important;
    }
    .mg-acc-featured .mphb-room-type h1,
    .mg-acc-featured .mphb-room-type h2,
    .mg-acc-featured .mphb-room-type h3 {
        font-size: 24px !important;
    }
    .mg-acc-grid .mphb-room-type h1,
    .mg-acc-grid .mphb-room-type h2,
    .mg-acc-grid .mphb-room-type h3 {
        font-size: 20px !important;
    }
    /* Make sure book + view-details buttons stretch full-width and stack */
    .mg-acc-featured .mphb-room-type .room-booking-details a,
    .mg-acc-featured .mphb-room-type .room-booking-details button,
    .mg-acc-grid .mphb-room-type .room-booking-details a,
    .mg-acc-grid .mphb-room-type .room-booking-details button {
        display: block;
        width: 100%;
        text-align: center;
        margin: 4px 0;
    }
}

/* ====================================================================
   6. PET CIRCLES — About page "Meet the Family" row
   5 columns, each with a 140px round image. Add class `mg-pet-card` to
   each column (or to the parent Section to apply to all images).
   ==================================================================== */

.mg-pet-card { text-align: center; }
.mg-pet-card img {
    width: 140px;
    height: 140px;
    margin: 0 auto 16px;
    border-radius: 50%;
    object-fit: cover;
    background: var(--mg-cream);
}
.mg-pet-card h4 { margin-bottom: 4px; font-size: 18px; }
.mg-pet-card p { font-size: 13px; margin: 0; }

/* ====================================================================
   7. PROPERTY STATS — About page "By the Numbers" row
   Large serif tan numbers + uppercase labels. Add class `mg-stat` to
   each stat column.
   ==================================================================== */

.mg-stat { text-align: center; }
.mg-stat .mg-stat-number {
    font-family: 'Noto Serif', serif;
    font-size: 56px;
    color: var(--mg-tan);
    line-height: 1;
    margin-bottom: 8px;
}
.mg-stat .mg-stat-label {
    font-size: 13px;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--mg-text);
    font-weight: 600;
}

/* ====================================================================
   8. INFO ROWS — Navigating Costa Rica vertical list
   Each Heading + Paragraph pair gets a thin bottom border. Wrap the
   stack of rows in a container with class `mg-info-rows`; each row
   gets class `mg-info-row`.
   ==================================================================== */

.mg-info-rows { max-width: 800px; margin: 0 auto; }
.mg-info-row {
    padding: 28px 0;
    border-bottom: 1px solid var(--mg-hairline);
}
.mg-info-row:last-child { border-bottom: none; }
.mg-info-row h3 { margin-bottom: 0.5em; font-size: 25px; }

/* ====================================================================
   9. PACKING CHECKLIST CARDS — What to Pack page
   Use Getwid Section with 2 columns of List blocks. Add class
   `mg-pack-card` to each column to get the boxed-card look with
   tan checkmarks.
   ==================================================================== */

.mg-pack-card {
    background: #fff;
    border: 1px solid var(--mg-hairline);
    padding: 28px 32px;
    height: 100%;
    box-sizing: border-box;
}
.mg-pack-card h3 { margin-bottom: 0.5em; font-size: 22px; }
.mg-pack-card ul { list-style: none; padding: 0; margin: 0; }
.mg-pack-card li {
    padding: 5px 0 !important;
    margin: 0 !important;
    border-bottom: 1px solid var(--mg-hairline);
    font-size: 15px;
    line-height: 1.4;
    display: flex;
    gap: 10px;
    align-items: flex-start;
}
.mg-pack-card li:last-child { border-bottom: none; }
.mg-pack-card li::before {
    content: '✓';
    color: var(--mg-tan);
    font-weight: 700;
    flex-shrink: 0;
}
/* Kill any inner-element margins that WP / List block might add */
.mg-pack-card li > * {
    margin: 0 !important;
}

@media (max-width: 900px) {
    .mg-pack-card { padding: 24px 22px; }
}

/* ====================================================================
   10. SINGLE ACCOMMODATION — unit info sidebar
   For the right-side sticky card on the single casita page. The single
   accommodation template is auto-generated by MotoPress + Luviana;
   this class can be added via a child-theme template override or to
   a sidebar widget area.
   ==================================================================== */

.mg-unit-info-card {
    background: var(--mg-cream);
    padding: 36px 32px;
    position: sticky;
    top: 24px;
}
.mg-unit-info-card .mg-price-row {
    border-bottom: 1px solid var(--mg-hairline);
    padding-bottom: 20px;
    margin-bottom: 20px;
}
.mg-unit-info-card .mg-price-row .mg-price {
    font-family: 'Noto Serif', serif;
    font-size: 39px;
    color: var(--mg-heading);
}
.mg-unit-info-card .quick-info { list-style: none; padding: 0; }
.mg-unit-info-card .quick-info li {
    display: flex;
    justify-content: space-between;
    padding: 10px 0;
    border-bottom: 1px solid var(--mg-hairline);
    font-size: 14px;
}
.mg-unit-info-card .quick-info li:last-child { border-bottom: none; }
.mg-unit-info-card .quick-info li span:last-child {
    color: var(--mg-heading);
    font-weight: 600;
}

@media (max-width: 900px) {
    .mg-unit-info-card { position: static; }
}

/* ====================================================================
   11. PAGE-HEADER decorative first-letter
   Luviana's page header supports this natively for some templates.
   This class can be applied to a Custom HTML span inside the page
   header if we want to opt-in. Decorative only — semi-transparent.
   ==================================================================== */

.mg-page-header-letter {
    position: absolute;
    top: 40%;
    left: 4.75rem;
    transform: translateY(-50%);
    font-size: 14rem;
    font-family: 'Noto Serif', serif;
    color: rgba(255, 255, 255, 0.10);
    line-height: 1;
    z-index: 1;
    pointer-events: none;
}

@media (max-width: 900px) {
    .mg-page-header-letter { font-size: 10rem; left: -10px; }
}
@media (max-width: 600px) {
    .mg-page-header-letter { font-size: 7rem; }
}

/* ====================================================================
   12. CONTACT PAGE — info row spacing
   Apply class `mg-contact-row` to each info block (Email, Location,
   Best Time to Reach Us, Languages) on the Contact page to space them
   apart vertically.
   ==================================================================== */

.wp-block-group.mg-contact-row {
    margin-top: 35px;
}

/* Mockup-styled heading for each info block — small tan uppercase
   with tight letter-spacing, sits above the value text */
.wp-block-group.mg-contact-row h4 {
    font-size: 14px;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--mg-tan);
    margin: 0 0 6px 0;
    font-weight: 700;
    line-height: 1.4;
}

/* Value text below the heading — body color, normal size */
.wp-block-group.mg-contact-row p {
    font-size: 16px;
    margin: 0;
    line-height: 1.6;
}

/* ====================================================================
   13. CONTACT FORM — WPForms (Modern render) styling
   Selector chained with `.wpforms-container-full` to win specificity
   against WPForms' own `div.wpforms-container-full *` rules. Apply
   the `mangogrove-contact-form` class to the WPForms block via the
   block's Additional CSS Class field.
   ==================================================================== */

/* Cream wrapper around the form — explicit background-color (beats
   anything using `background:` shorthand), applied across all the
   potential wrapper elements WPForms / Gutenberg might emit */
.wpforms-container-full.mangogrove-contact-form,
.mangogrove-contact-form.wpforms-container,
.mangogrove-contact-form .wpforms-container,
div.mangogrove-contact-form,
.wp-block-wpforms.mangogrove-contact-form {
    background-color: var(--mg-cream) !important;
    background-image: none !important;
    padding: 48px 44px !important;
    margin: 0 !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
}

/* The actual <form> should fill the wrapper */
.wpforms-container-full.mangogrove-contact-form .wpforms-form {
    width: 100% !important;
    max-width: 100% !important;
}

/* Each field wrapper — full width, consistent 20px bottom gap */
.wpforms-container-full.mangogrove-contact-form .wpforms-field {
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 0 20px 0 !important;
    margin: 0 !important;
}

/* Field labels — uppercase brand style */
.wpforms-container-full.mangogrove-contact-form .wpforms-field-label,
.wpforms-container-full.mangogrove-contact-form label {
    font-size: 12px !important;
    letter-spacing: 1px !important;
    text-transform: uppercase !important;
    margin-bottom: 8px !important;
    font-weight: 600 !important;
    color: var(--mg-heading) !important;
}

/* (First) / (Last) sub-labels — small, gray, not uppercase */
.wpforms-container-full.mangogrove-contact-form .wpforms-field-sublabel {
    color: var(--mg-text) !important;
    font-size: 11px !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    margin-top: 4px !important;
    font-weight: 400 !important;
}

/* Required asterisk in tan */
.wpforms-container-full.mangogrove-contact-form .wpforms-required-label {
    color: var(--mg-tan) !important;
}

/* Inputs / selects / textarea — FORCE full width regardless of field
   size class (medium/large) and strip rounded corners */
.wpforms-container-full.mangogrove-contact-form input[type="text"],
.wpforms-container-full.mangogrove-contact-form input[type="email"],
.wpforms-container-full.mangogrove-contact-form input[type="date"],
.wpforms-container-full.mangogrove-contact-form input[type="tel"],
.wpforms-container-full.mangogrove-contact-form input[type="number"],
.wpforms-container-full.mangogrove-contact-form input[type="url"],
.wpforms-container-full.mangogrove-contact-form select,
.wpforms-container-full.mangogrove-contact-form textarea {
    width: 100% !important;
    max-width: 100% !important;
    padding: 14px 16px !important;
    border: 1px solid var(--mg-hairline) !important;
    background: #fff !important;
    font-family: inherit !important;
    font-size: 14px !important;
    margin: 0 !important;
    color: var(--mg-text) !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    height: auto !important;
    line-height: 1.4 !important;
}

.wpforms-container-full.mangogrove-contact-form textarea {
    min-height: 140px !important;
    resize: vertical !important;
}

/* Focus — tan border, no glow */
.wpforms-container-full.mangogrove-contact-form input:focus,
.wpforms-container-full.mangogrove-contact-form select:focus,
.wpforms-container-full.mangogrove-contact-form textarea:focus {
    outline: none !important;
    border-color: var(--mg-tan) !important;
    box-shadow: none !important;
}

/* --- Modern dropdown (Choices.js) — WPForms swaps native <select>
   for a custom Choices.js component when in modern render mode. --- */
.wpforms-container-full.mangogrove-contact-form .choices {
    margin-bottom: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
}
.wpforms-container-full.mangogrove-contact-form .choices__inner {
    padding: 14px 16px !important;
    min-height: auto !important;
    border: 1px solid var(--mg-hairline) !important;
    background: #fff !important;
    border-radius: 0 !important;
    font-size: 14px !important;
    font-family: inherit !important;
    color: var(--mg-text) !important;
    line-height: 1.4 !important;
}
.wpforms-container-full.mangogrove-contact-form .choices__list--single {
    padding: 0 !important;
}
.wpforms-container-full.mangogrove-contact-form .choices__list--single .choices__item {
    padding: 0 !important;
    color: var(--mg-text) !important;
}
.wpforms-container-full.mangogrove-contact-form .choices__list--dropdown {
    border: 1px solid var(--mg-hairline) !important;
    border-radius: 0 !important;
    background: #fff !important;
    margin-top: 2px !important;
}
.wpforms-container-full.mangogrove-contact-form .choices {
    position: relative !important;
}
.wpforms-container-full.mangogrove-contact-form .choices[data-type*="select-one"]::after {
    content: '' !important;
    display: block !important;
    height: 0 !important;
    width: 0 !important;
    border-style: solid !important;
    border-color: var(--mg-text) transparent transparent transparent !important;
    border-width: 6px 5px 0 5px !important;
    position: absolute !important;
    right: 18px !important;
    top: 50% !important;
    margin-top: -3px !important;
    pointer-events: none !important;
}
.wpforms-container-full.mangogrove-contact-form .choices[data-type*="select-one"].is-open::after {
    border-color: transparent transparent var(--mg-text) transparent !important;
    border-width: 0 5px 6px 5px !important;
    margin-top: -3px !important;
}

/* Fallback: if WPForms is rendering in "Default" (classic) mode, the
   dropdown is a native <select>. Hide the browser arrow and draw our
   own via inline SVG so the visual matches Modern mode. */
.wpforms-container-full.mangogrove-contact-form select {
    appearance: none !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%235f6060' d='M6 8L0 0h12z'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 16px center !important;
    background-size: 12px 8px !important;
    padding-right: 40px !important;
}

/* Submit button — full-width tan pill, navy on hover */
.wpforms-container-full.mangogrove-contact-form .wpforms-submit-container {
    padding: 0 !important;
    margin: 8px 0 0 0 !important;
}
.wpforms-container-full.mangogrove-contact-form button[type="submit"],
.wpforms-container-full.mangogrove-contact-form .wpforms-submit {
    display: block !important;
    width: 100% !important;
    border-radius: 1.875rem !important;
    font-size: 12px !important;
    text-transform: uppercase !important;
    line-height: 1.2 !important;
    padding: 1.4em 3em !important;
    font-weight: 600 !important;
    letter-spacing: 1px !important;
    background: var(--mg-tan) !important;
    color: #fff !important;
    border: 1px solid var(--mg-tan) !important;
    transition: all 0.3s ease !important;
    cursor: pointer !important;
    font-family: 'Open Sans', sans-serif !important;
    text-align: center !important;
    box-shadow: none !important;
}
.wpforms-container-full.mangogrove-contact-form button[type="submit"]:hover,
.wpforms-container-full.mangogrove-contact-form .wpforms-submit:hover {
    background: var(--mg-navy) !important;
    border-color: var(--mg-navy) !important;
    color: #fff !important;
}

@media (max-width: 600px) {
    .wpforms-container-full.mangogrove-contact-form {
        padding: 32px 24px !important;
    }
}

/* ====================================================================
   14. SINGLE ACCOMMODATION PAGE — hide clutter
   The single accommodation template inherits Luviana's blog sidebar
   + comments form, neither of which belong on a property booking
   page. Body class `single-mphb_room_type` is added by WP on each
   single accommodation post.
   ==================================================================== */

.single-mphb_room_type #comments,
.single-mphb_room_type .comments-area,
.single-mphb_room_type .post-comments,
.single-mphb_room_type .comment-respond,
.single-mphb_room_type #respond,
.single-mphb_room_type #secondary,
.single-mphb_room_type .widget-area,
.single-mphb_room_type aside.sidebar,
.single-mphb_room_type .sidebar-primary {
    display: none !important;
}

/* If the layout reserves space for a sidebar via grid/flex columns,
   give the main content full width once the sidebar is hidden */
.single-mphb_room_type #primary,
.single-mphb_room_type .content-area,
.single-mphb_room_type main {
    width: 100% !important;
    max-width: 100% !important;
    float: none !important;
}

/* ====================================================================
   15. SITE FOOTER — match mockup
   Dark near-black background, white headings, gray body text, tan links
   that turn white on hover.
   ==================================================================== */

.site-footer,
.site-footer-bottom,
footer.site-footer,
.luviana-footer-bottom {
    background-color: #1c1c1c !important;
    color: #999 !important;
}
.site-footer .footer-bottom, .site-footer .site-info, .site-footer .copyright {
    width: 100%;
}
/* Force inner wrapper divs transparent so the dark .site-footer
   background shows through (Luviana defaults them to white) */
.site-footer .footer-widgets,
.site-footer .footer-widgets-wrapper,
.site-footer .wrapper,
.site-footer .widget-area,
.site-footer .widget,
.site-footer section.widget,
.site-footer .textwidget,
.site-footer .site-info-wrapper,
.site-footer .site-info {
    background-color: transparent !important;
}

/* Hide the per-article entry footer (separate from the site footer).
   It renders as a thin light-colored band between the page content
   and the site footer, which we don't want on a vacation-rental site. */
.entry-footer,
footer.entry-footer {
    display: none !important;
}

/* Headings (column titles like "Mango Grove", "Explore", "Contact Us") */
.site-footer h1,
.site-footer h2,
.site-footer h3,
.site-footer h4,
.site-footer .widget-title,
.site-footer .wp-block-heading {
    color: #fff !important;
}

/* Paragraphs + lists */
.site-footer p,
.site-footer li,
.site-footer span,
.site-footer address {
    color: #999 !important;
}

/* Links — tan with white on hover */
.site-footer a {
    color: var(--mg-tan) !important;
    text-decoration: none;
    transition: color 0.25s;
}
.site-footer a:hover {
    color: #fff !important;
}

/* Bottom copyright bar — just darker gray text, no divider line above */
.site-footer .footer-bottom,
.site-footer .site-info,
.site-footer .copyright {
    color: #666 !important;
    border-top: none !important;
    padding-top: 0 !important;
}

/* Hairline divider between widget areas and copyright */
.site-footer .footer-widgets {
    border-bottom: 1px solid #2a2a2a;
    padding-bottom: 3rem;
}