:root {
    --primary-color: #ECC15D;
    --text-color: #1B1C1E;
    --heading-color: #1B1C1E;
    --bg-light: #f9f9f9;
    --bg-white: #ffffff;
    --bg-dark: #1B1C1E;
    --text-light: #f5f5f5;
    --border-color: #ddd;
    --font-main: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
    --max-width: 1200px;
    --spacing-sm: 0.5rem;
    --spacing-md: 1rem;
    --spacing-lg: 2rem;
    --spacing-xl: 4rem;
    --radius: 8px;
    --shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    font-family: var(--font-main);
    color: var(--text-color);
    line-height: 1.6;
    background-color: var(--bg-white);
}

a {
    text-decoration: none;
    color: inherit;
}

ul {
    list-style: none;
}

img {
    max-width: 100%;
    display: block;
}

/* Typography */
h1,
h2,
h3,
h4,
h5,
h6 {
    color: var(--heading-color);
    font-weight: 700;
    margin-bottom: var(--spacing-md);
}

h1 {
    font-size: 2.5rem;
    line-height: 1.2;
}

h2 {
    font-size: 2rem;
}

h3 {
    font-size: 1.5rem;
}

p {
    margin-bottom: var(--spacing-md);
}

/* Layout Utilities */
.container {
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 0 var(--spacing-md);
}

.btn {
    display: inline-block;
    padding: 12px 24px;
    background-color: var(--primary-color);
    color: var(--heading-color);
    font-weight: 600;
    border-radius: 6px;
    transition: transform 0.2s, opacity 0.2s;
    border: none;
    cursor: pointer;
    font-size: 1rem;
    text-align: center;
}

.btn:hover {
    transform: translateY(-2px);
    opacity: 0.9;
}

.btn-outline {
    background-color: transparent;
    border: 2px solid var(--heading-color);
}

/* Header */


header {
    background-color: var(--bg-dark);
    padding: var(--spacing-md) 0;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
    z-index: 100;
    position: relative;
}

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

.logo {
    display: flex;
    flex-direction: column;
}

.logo-text {
    font-family: 'Playfair Display', serif;
    font-size: 2rem;
    font-weight: 700;
    color: var(--heading-color);
    letter-spacing: -0.5px;
    line-height: 1;
}

.logo-initial {
    font-size: 2.2rem;
}

.tagline {
    font-size: 0.8rem;
    color: #666;
    font-weight: 500;
}

.nav-links {
    display: flex;
    gap: var(--spacing-lg);
}

.nav-links a {
    font-weight: 600;
    font-size: 1rem;
    position: relative;
    color: #ffffff;
}

.nav-links a:hover {
    color: var(--primary-color);
}

.mobile-toggle {
    display: none;
    font-size: 1.5rem;
    cursor: pointer;
    color: #ffffff;
}

/* Footer */
footer {
    background-color: var(--bg-white);
    padding: var(--spacing-xl) 0;
    margin-top: auto;
    border-top: 2px solid var(--primary-color);
}

.footer-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: var(--spacing-lg);
}

.footer-col h4 {
    margin-bottom: var(--spacing-md);
    font-size: 1.2rem;
}

.footer-bottom {
    margin-top: var(--spacing-lg);
    padding-top: var(--spacing-md);
    border-top: 1px solid rgba(0, 0, 0, 0.1);
    text-align: center;
    font-size: 0.9rem;
}

/* Hero Section */
.hero {
    position: relative;
    display: flex;
    min-height: 500px;
    background-color: var(--bg-dark);
    border-bottom: 1px solid var(--primary-color);
}

.hero-content {
    flex: 1;
    background-color: var(--bg-dark);
    color: var(--bg-white);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--spacing-xl);
    position: relative;
    z-index: 2;
}

.hero-text {
    max-width: 500px;
}

.hero-text h1 {
    color: var(--bg-white);
    margin-bottom: var(--spacing-lg);
}

.hero-image {
    flex: 1;
    background-size: cover;
    background-position: center;
    position: relative;
    border-top-left-radius: 8px;
}

/* Yellow Band */
.highlight-band {
    background-color: var(--primary-color);
    padding: var(--spacing-lg) 0;
    text-align: center;
    font-weight: 600;
    font-size: 1.2rem;
}

/* Sections */
.section {
    padding: var(--spacing-xl) 0;
}

.section-title {
    text-align: center;
    margin-bottom: var(--spacing-xl);
}

/* Features Grid */
.features-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: var(--spacing-lg);
    text-align: center;
}

.feature-card {
    padding: var(--spacing-lg);
}

.feature-icon {
    font-size: 3rem;
    margin-bottom: var(--spacing-md);
    display: inline-block;
}

/* Property Grid */
.property-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
    gap: var(--spacing-lg);
}

.property-card {
    background: var(--bg-white);
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: var(--shadow);
    transition: transform 0.2s;
    display: flex;
    flex-direction: column;
}



.card-image {
    height: 250px;
    overflow: hidden;
}

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



.card-content {
    padding: var(--spacing-md);
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

.card-title {
    font-size: 1.25rem;
    margin-bottom: var(--spacing-sm);
}

.card-location {
    color: #666;
    font-size: 0.9rem;
    margin-bottom: var(--spacing-md);
    display: flex;
    align-items: center;
    gap: 5px;
}

.card-meta {
    display: flex;
    gap: var(--spacing-md);
    margin-bottom: var(--spacing-md);
    font-size: 0.9rem;
    color: #555;
}

.card-price {
    font-weight: 700;
    font-size: 1.1rem;
    margin-top: auto;
    margin-bottom: var(--spacing-md);
}

.tags {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    margin-bottom: var(--spacing-md);
}

.tag {
    background-color: rgba(236, 193, 93, 0.3);
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 0.8rem;
    font-weight: 600;
}

/* Contact Section */
.contact-section {
    background-color: var(--primary-color);
    text-align: center;
    padding-top: 64px;
}

.contact-section .btn {
    background-color: var(--heading-color);
    /* Charcoal */
    color: #ffffff;
}

.contact-section .btn:hover {
    background-color: #000000;
    transform: translateY(-2px);
    opacity: 1;
}

.contact-form {
    max-width: 600px;
    margin: 0 auto;
    background: rgba(255, 255, 255, 0.9);
    padding: var(--spacing-lg);
    border-radius: var(--radius);
}

.form-group {
    margin-bottom: var(--spacing-md);
    text-align: left;
}

.form-group label {
    display: block;
    margin-bottom: 5px;
    font-weight: 600;
}

.form-control {
    width: 100%;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-family: inherit;
}

/* Property Detail Page */
.property-hero {
    height: 400px;
    position: relative;
    background-size: cover;
    background-position: center;
    display: flex;
    align-items: flex-end;
}

.property-hero::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(to bottom, transparent 50%, rgba(0, 0, 0, 0.7));
}

.property-hero-content {
    position: relative;
    z-index: 2;
    color: white;
    padding-bottom: var(--spacing-lg);
    width: 100%;
}

.property-hero h1 {
    color: white;
    margin-bottom: 0;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
}

.property-layout {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: var(--spacing-xl);
    margin-top: var(--spacing-xl);
}

.booking-widget {
    background: white;
    padding: var(--spacing-lg);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    position: sticky;
    top: 100px;
}

.booking-result {
    margin-top: var(--spacing-md);
    padding: var(--spacing-md);
    border-radius: 4px;
    display: none;
}

.booking-result.success {
    background-color: #d4edda;
    color: #155724;
    display: block;
}

.gallery-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    margin-top: var(--spacing-md);
    /* Reduced from 2rem (32px) to ~16px */
    margin-bottom: var(--spacing-lg);
    /* Added to separate from Availability section */
}

.gallery-grid img {
    height: 200px;
    width: 100%;
    object-fit: cover;
    border-radius: var(--radius);
    cursor: pointer;
}

/* Responsive */
@media (max-width: 768px) {
    .hero {
        flex-direction: column;
    }

    .hero-content {
        padding: 32px;
    }

    .hero-text h1 {
        font-size: 2rem;
    }

    .hero-image {
        min-height: 300px;
        order: -1;
    }

    .nav-links {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        background: var(--bg-dark);
        flex-direction: column;
        padding: var(--spacing-md);
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    }

    .nav-links.active {
        display: flex;
    }

    .mobile-toggle {
        display: block;
    }

    .property-layout {
        grid-template-columns: 1fr;
    }

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

/* Property Image Grid */
.property-header {
    margin-bottom: var(--spacing-lg);
}

.property-image-grid {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 8px;
    height: 450px;
    margin-bottom: var(--spacing-xl);
    border-radius: 12px;
    overflow: hidden;
}

.main-image {
    height: 100%;
}

.secondary-images {
    display: grid;
    grid-template-rows: 1fr 1fr;
    gap: 8px;
    height: 100%;
}

.property-image-grid img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    cursor: pointer;
    transition: filter 0.2s;
}

.property-image-grid img:hover {
    filter: brightness(0.9);
}

@media (max-width: 768px) {
    .property-image-grid {
        grid-template-columns: 1fr;
        height: auto;
    }

    .secondary-images {
        display: none;
    }

    .main-image {
        height: 300px;
    }
}

/* Lightbox */
.lightbox {
    display: none;
    position: fixed;
    z-index: 1000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0, 0, 0, 0.9);
    justify-content: center;
    align-items: center;
}

.lightbox.active {
    display: flex;
}

.lightbox-content {
    max-width: 90%;
    max-height: 90vh;
    object-fit: contain;
}

/* Property Content Formatting */
.property-content ul {
    list-style: disc;
    margin-left: var(--spacing-lg);
    margin-bottom: var(--spacing-md);
}

.property-content ol {
    list-style: decimal;
    margin-left: var(--spacing-lg);
    margin-bottom: var(--spacing-md);
}

.property-content li {
    margin-bottom: var(--spacing-sm);
}

.lightbox-close {
    position: absolute;
    top: 20px;
    right: 35px;
    color: #f1f1f1;
    font-size: 40px;
    font-weight: bold;
    cursor: pointer;
    z-index: 1001;
}

.lightbox-prev,
.lightbox-next {
    cursor: pointer;
    position: absolute;
    top: 50%;
    width: auto;
    padding: 16px;
    margin-top: -50px;
    color: white;
    font-weight: bold;
    font-size: 20px;
    transition: 0.6s ease;
    border-radius: 0 3px 3px 0;
    user-select: none;
    background-color: rgba(0, 0, 0, 0.3);
}

.lightbox-next {
    right: 0;
    border-radius: 3px 0 0 3px;
}

.lightbox-prev {
    left: 0;
    border-radius: 3px 0 0 3px;
}

/* MotoPress Booking Form Styling */
.mphb-booking-form p {
    margin-bottom: var(--spacing-lg);
    /* Increased from default */
}

/* Hide the break tag MotoPress inserts between label and input */
.mphb-booking-form br {
    display: none;
}

.mphb-booking-form label {
    display: block;
    margin-bottom: 4px;
    /* Reduced to pull closer to input */
    font-weight: 600;
}

.mphb-booking-form input[type="text"],
.mphb-booking-form input[type="date"],
.mphb-booking-form select {
    width: 100%;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-family: inherit;
    font-size: 1rem;
    background-color: #fff;
}

.mphb-booking-form input[type="submit"],
.mphb-reserve-btn {
    display: inline-block;
    width: 100%;
    padding: 12px 24px;
    background-color: var(--primary-color);
    color: var(--heading-color);
    font-weight: 600;
    border-radius: 6px;
    border: none;
    cursor: pointer;
    font-size: 1rem;
    transition: opacity 0.2s;
    margin-top: 10px;
}

.mphb-reserve-btn:hover {
    opacity: 0.9;
}

/* Hide MotoPress "Details" if they still appear via other hooks */
/* Airbnb Style Calendar (Final Deep Clean) */

/* Checkout Redesign */

.yesnowstays-checkout-wrapper {
    max-width: 1200px;
    margin: 0 auto;
    padding: var(--spacing-lg) 0;
}

.checkout-grid {
    display: grid;
    grid-template-columns: 1.5fr 1fr;
    gap: var(--spacing-xl);
    align-items: start;
}

.checkout-main-column {
    background: #fff;
    padding: var(--spacing-lg);
    border-radius: var(--radius);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
}

.checkout-section {
    margin-bottom: var(--spacing-xl);
    padding-bottom: var(--spacing-lg);
    border-bottom: 1px solid #eee;
}

.checkout-section:last-child {
    border-bottom: none;
    margin-bottom: 0;
}

.section-title {
    font-size: 1.5rem;
    margin-bottom: var(--spacing-md);
    color: var(--heading-color);
    padding-bottom: 10px;
    border-bottom: 2px solid var(--primary-color);
    display: inline-block;
}

/* Sidebar & Sticky Summary */
.checkout-sidebar-column {
    position: relative;
    height: 100%;
}

.sticky-sidebar-inner {
    position: sticky;
    top: 100px;
    /* Reduced from 120px to account for header */
}

.booking-summary-widget {
    background: #fff;
    padding: var(--spacing-lg);
    border-radius: var(--radius);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    border: 1px solid #eee;
}

.booking-summary-widget h3 {
    font-size: 1.3rem;
    margin-bottom: var(--spacing-md);
    border-bottom: 1px solid #eee;
    padding-bottom: var(--spacing-sm);
}

.summary-item {
    margin-bottom: var(--spacing-md);
}

.summary-room-image {
    width: 100%;
    height: 150px;
    object-fit: cover;
    border-radius: var(--radius);
    margin-bottom: var(--spacing-sm);
}

.summary-item h4 {
    font-size: 1.1rem;
    margin-bottom: var(--spacing-xs);
}

.summary-details {
    font-size: 0.95rem;
    color: #555;
}

.detail-row {
    display: flex;
    justify-content: space-between;
    margin-bottom: 6px;
    border-bottom: 1px dashed #eee;
    padding-bottom: 4px;
}

.detail-row:last-child {
    border-bottom: none;
}

.summary-total {
    margin-top: var(--spacing-md);
    padding-top: var(--spacing-md);
    border-top: 2px solid #eee;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-weight: 700;
    font-size: 1.2rem;
    color: var(--heading-color);
}

.total-amount {
    color: var(--primary-color);
    font-size: 1.4rem;
}

/* Search Results Grid Override */
.mphb-search-results {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
    gap: var(--spacing-lg);
    width: 100%;
}

/* Ensure overridden room content acts as a grid item and retains card styling */
.mphb-search-results .property-card {
    height: 100%;
    /* Ensure equal height */
    width: 100%;
}


/* Hide MotoPress Recommendation Section (Hardcoded in plugin) */
.mphb-recommendation-title,
.mphb-recommendation,
.mphb-reservation-cart {
    display: none !important;
}



/* Form Styling overrides */
.mphb-required-fields-tip {
    display: none;
}

/* Hide default Booking Details used by plugin if rendered via shortcode elsewhere or leaky hooks */
/* #mphb-booking-details {
    display: none;
} */

/* Re-enable if we want it, but we replaced it with sidebar summary */


/* Customer Form */
.mphb-customer-details-title {
    display: none;
    /* We used our own h3 */
}

/* Grid for customer fields */
.mphb-customer-details {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-md);
}

.mphb-customer-details p {
    margin-bottom: 0;
}

/* Span full width for some fields */
.mphb-customer-email,
.mphb-customer-note,
.mphb-customer-address1,
.mphb-customer-create-account {
    grid-column: 1 / -1;
}

@media (max-width: 600px) {
    .mphb-customer-details {
        grid-template-columns: 1fr;
    }
}

/* Payment Methods as Cards */
.mphb-gateways-list {
    list-style: none;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    /* Auto-fit cards */
    gap: var(--spacing-md);
}

.mphb-gateways-list li {
    border: 2px solid #eee;
    border-radius: var(--radius);
    padding: var(--spacing-md);
    text-align: center;
    cursor: pointer;
    transition: all 0.2s;
    position: relative;
    background: #fafafa;
}

.mphb-gateways-list li:hover {
    border-color: #ddd;
    background: #fff;
}

/* Selected state - trickier as radio is inside. 
   We can style the label to fill the li and use :has (modern) or adjacent sibling if structure allows.
   Default structure: <li> <label> <input radio> Title ... </label> ... </li>
*/
.mphb-gateways-list li label {
    cursor: pointer;
    display: block;
    font-weight: 600;
}

.mphb-gateways-list li:has(input:checked) {
    border-color: var(--primary-color);
    background-color: rgba(243, 194, 59, 0.05);
    box-shadow: 0 0 0 1px var(--primary-color);
}

.checkout-submit-wrapper {
    margin-top: var(--spacing-lg);
}

.btn-large {
    padding: 16px 32px;
    font-size: 1.1rem;
    width: 100%;
}

/* Mobile Responsive Adjustments */
@media (max-width: 900px) {
    .checkout-grid {
        grid-template-columns: 1fr;
        display: flex;
        flex-direction: column;
    }

    /* Reverse order: Summary first or last? 
       Req: "Sticky... updated to be sticky only on desktop". 
       Usually summary at top is good for Context, but big summary pushes form down.
       Given "Price breakdown ... covers almost half screen", let's put it at TOP but not sticky, 
       or maybe simplified. 
       Let's put it FIRST so they know what they are paying for.
    */
    .checkout-sidebar-column {
        order: -1;
        width: 100%;
    }

    .sticky-sidebar-inner {
        position: static;
    }

    .booking-summary-widget {
        background: #fdfdfd;
        border: none;
        box-shadow: none;
        border-bottom: 2px solid #eee;
        padding: var(--spacing-md) 0;
    }

    .summary-room-image {
        display: none;
        /* Save space on mobile? Or keep small? Req says "featured image... clarity". Let's keep it but maybe smaller grid */
        /* Actually "Price breakdown sticky widget covers almost half..." implies height was issue.
           Let's inline the image and details for mobile if possible, or just stack. 
        */
        height: 100px;
        width: 100px;
        float: left;
        margin-right: var(--spacing-md);
    }

    .summary-item::after {
        /* Clearfix if floating */
        content: "";
        display: table;
        clear: both;
    }
}

/* 1. Global Reset for Datepick */
.datepick,
.datepick-month,
.datepick-month table,
.datepick-month th,
.datepick-month td,
.datepick-header,
.datepick-month-header,
.datepick-nav,
.datepick-ctrl,
.mphb-calendar.is-datepick,
.datepick-popup {
    border: none !important;
    box-shadow: none !important;
    background: transparent !important;
}

/* 2. Container Styling */
/* Popup: Card style */
.datepick-popup {
    background-color: #fff !important;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12) !important;
    border-radius: 12px !important;
    border: 1px solid #eee !important;
    padding: 24px !important;
    z-index: 9999 !important;
    display: block !important;
    /* Back to block for single month */
    width: auto !important;
}

/* Force Single Month: Hide the second month if present */
.datepick-popup .datepick-month:nth-child(n+2) {
    display: none !important;
}

/* 3. Headers & Navigation */
/* 3. Headers & Navigation */
.datepick-month-header {
    background: transparent !important;
    border: none !important;
    padding-bottom: 20px !important;
    display: flex;
    justify-content: center !important;
    align-items: center;
    gap: 6px !important;
    /* Tight gap */
    position: relative;
    z-index: 10;
    pointer-events: none;
}

/* Make sure the text itself is clickable/selectable if needed */
.datepick-month-header select,
.datepick-month-header input {
    width: auto !important;
    /* Shrink wrap content */
    display: inline-block !important;
    margin: 0 !important;
    padding: 0 !important;
    pointer-events: none !important;
    /* Disable dropdown interaction */
    cursor: default !important;

    /* Remove default styling to look like text */
    background: transparent !important;
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;

    /* Font styles */
    font-weight: 700 !important;
    font-size: 1.1rem !important;
    color: #1B1C1E !important;
    line-height: 1 !important;
    text-align: center !important;
    text-align-last: center !important;
}

.datepick-nav {
    position: absolute;
    top: 24px;
    left: 10px;
    right: 10px;
    width: auto !important;
    display: flex !important;
    justify-content: space-between !important;
    pointer-events: none;
    z-index: 20;
}

/* Hide annoying "Today" button that overlaps */
.datepick-cmd-today {
    display: none !important;
}

/* Year/Month Title - Legacy override if specific class used */
.datepick-month-year {
    border: none !important;
    background: transparent !important;
    font-weight: 700 !important;
    font-size: 1.1rem !important;
    color: #1B1C1E !important;
    width: auto !important;
    margin: 0 !important;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    pointer-events: none !important;
}


/* Buttons */
.datepick-cmd {
    color: #1B1C1E !important;
    text-decoration: none !important;
    font-weight: normal !important;
    pointer-events: auto;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: background 0.2s;
    background: #fff;
}

.datepick-cmd:hover {
    background-color: #f7f7f7 !important;
}

.datepick-cmd-prev,
.datepick-cmd-next {
    opacity: 1 !important;
    font-size: 0 !important;
    /* Hide text */
}

/* Inject pseudo icons for cleaner look */
.datepick-cmd-prev::before {
    content: "‹";
    font-size: 24px;
    line-height: 1;
    margin-top: -4px;
}

.datepick-cmd-next::before {
    content: "›";
    font-size: 24px;
    line-height: 1;
    margin-top: -4px;
}

/* 4. Grid & Days */
.datepick-month table {
    width: 100%;
    border-collapse: collapse !important;
    margin: 0 !important;
}

.datepick-month th {
    color: #717171 !important;
    font-size: 0.8rem !important;
    font-weight: 600 !important;
    text-transform: capitalize !important;
    padding-bottom: 10px !important;
    border: none !important;
}

.datepick-month td {
    padding: 0 !important;
    height: 48px;
    vertical-align: middle;
}

/* Day Numbers */
.datepick-month td a,
.datepick-month td span {
    width: 44px !important;
    height: 44px !important;
    line-height: 44px !important;
    /* Vertically center text */
    display: block !important;
    margin: 0 auto !important;
    border-radius: 50% !important;
    text-align: center !important;
    color: #1B1C1E !important;
    font-weight: 500 !important;
    border: 2px solid transparent !important;
    background: transparent !important;
}

/* States */
.datepick-month td a:hover {
    border-color: #1B1C1E !important;
}

.datepick-month td.datepick-selected a,
.datepick-month td.datepick-selected span {
    background-color: #1B1C1E !important;
    color: #fff !important;
    border-color: #1B1C1E !important;
}

.datepick-today a {
    font-weight: 700 !important;
    text-decoration: underline !important;
}

.datepick-unselectable,
.mphb-not-available-date {
    color: #ddd !important;
    text-decoration: line-through !important;
    cursor: not-allowed;
}

/* Scope Widths (Prevent Layout Blowout/Squeeze) */
/* Inline calendar should fill container but not blow out */
.mphb-calendar .datepick-month {
    width: 100% !important;
    max-width: none;
}

.mphb-calendar .datepick-month table {
    width: 100% !important;
}

.mphb-calendar {
    max-width: 100%;
    overflow-x: hidden;
}

/* Fix Popup Width: Prevent it from assuming 2-month width but ensure it fits 1 month */
.datepick-popup .datepick,
.datepick-popup .datepick-month-row {
    width: 100% !important;
    display: block !important;
}

.datepick-popup {
    width: auto !important;
    min-width: 360px !important;
    /* Fixed width to fit 7 cols * 44px + padding */
    max-width: 100% !important;
    display: inline-block !important;
}

/* =========================================
   CHECKOUT PAGE STYLING (Airbnb Style)
   ========================================= */

/* Main Wrapper */
.mphb_sc_checkout-wrapper {
    max-width: 1120px;
    margin: 0 auto;
    padding: 40px 24px;
}

/*
   FIX: The form is the parent of the sections, so WE MUST APPLY GRID HERE.
   The wrapper only contains the Login Msg + Form.
*/
form.mphb_sc_checkout-form {
    display: grid;
    grid-template-columns: 1fr 380px;
    /* Left: Content, Right: Summary */
    gap: 80px;
    align-items: start;
    width: 100%;
}

@media (max-width: 900px) {
    form.mphb_sc_checkout-form {
        grid-template-columns: 1fr;
        /* Stack on mobile */
        gap: 40px;
    }

    /* Move Price Breakdown to top on mobile or keep bottom?
       Usually bottom or sticky bottom on mobile, but for now simple stack.
       MotoPress structure might make reordering hard without flex/order.
       Let's try to assume default order is Booking -> Price -> Customer.
    */
    #mphb-price-details {
        order: -1;
        /* Try to bring summary up if possible, or leave as is */
        grid-column: 1 !important;
        /* Reset on mobile */
        grid-row: auto !important;
    }
}

/* Explicit Grid Placement (Desktop) */
@media (min-width: 901px) {

    /* Right Column: Price Breakdown */
    #mphb-price-details {
        grid-column: 2;
        grid-row: 1 / span 10;
        /* Span multiple rows to stick alongside full content */
        height: fit-content;
    }

    /* Left Column: All other known sections */
    #mphb-booking-details,
    #mphb-customer-details,
    #mphb-billing-details,
    .mphb-checkout-terms-wrapper,
    .mphb-confirm-reservation-btn-wrapper,
    /* Login link is OUTSIDE the form, so we don't need to position it in this grid. It will just sit on top. */
    form#mphb-checkout-form>p

    /* Catch-all for stray paragraphs inside form */
        {
        grid-column: 1;
    }
}

/* Headings */
.mphb-checkout-section h3,
.mphb-checkout-section h4 {
    font-size: 22px;
    font-weight: 600;
    margin-bottom: 24px;
    color: var(--heading-color);
}

/* Sections */
.mphb-checkout-section {
    margin-bottom: 48px;
    border-bottom: 1px solid #DDDDDD;
    padding-bottom: 48px;
}

.mphb-checkout-section:last-child {
    border-bottom: none;
}

/* -----------------------------------------
   LEFT COLUMN: Booking & Customer Details
   ----------------------------------------- */

/* Booking Details (Dates) */
#mphb-booking-details .mphb-check-in-date,
#mphb-booking-details .mphb-check-out-date {
    font-size: 16px;
    margin-bottom: 8px;
    color: var(--text-color);
}

#mphb-booking-details strong {
    font-weight: 500;
    color: var(--heading-color);
}

/* Accommodation Details */
.mphb-room-details {
    margin-top: 24px;
}

.mphb-room-details .mphb-room-type-title {
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 16px;
}

/* Form Inputs (General) */
.mphb-checkout-section input[type="text"],
.mphb-checkout-section input[type="email"],
.mphb-checkout-section input[type="tel"],
.mphb-checkout-section input[type="number"],
.mphb-checkout-section select,
.mphb-checkout-section textarea {
    width: 100%;
    padding: 16px;
    border: 1px solid #B0B0B0;
    border-radius: 8px;
    font-size: 16px;
    color: var(--heading-color);
    background-color: #fff;
    transition: all 0.2s ease;
    margin-bottom: 16px;
    appearance: none;
    /* Remove default browser styling */
}

.mphb-checkout-section input:focus,
.mphb-checkout-section select:focus,
.mphb-checkout-section textarea:focus {
    border-color: #1B1C1E;
    outline: 2px solid #1B1C1E;
    /* High contrast focus */
    outline-offset: -1px;
}

/* Labels */
.mphb-checkout-section label {
    display: block;
    margin-bottom: 8px;
    font-weight: 500;
    font-size: 14px;
    color: var(--heading-color);
}

/* Customer Details Form Grid */
#mphb-customer-details {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 16px;
    /* Row gap handled by input margin */
}

/* Span full width for some fields */
.mphb-customer-email,
.mphb-customer-phone,
.mphb-customer-country,
.mphb-customer-note {
    grid-column: span 2;
}

/* -----------------------------------------
   RIGHT COLUMN: Price Breakdown (Sticky Card)
   ----------------------------------------- */

#mphb-price-details {
    background: #fff;
    border: 1px solid #DDDDDD;
    border-radius: 12px;
    padding: 24px;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08);
    /* Airbnb subtle lift */
    position: sticky;
    top: 40px;
    /* Sticky top */
    margin-bottom: 0;
    /* Override section margin */
    border-bottom: 1px solid #DDDDDD;
    /* Reset border */
}

.mphb-price-breakdown {
    width: 100%;
    border-collapse: collapse;
}

.mphb-price-breakdown th,
.mphb-price-breakdown td {
    padding: 12px 0;
    text-align: left;
    border-bottom: 1px solid #DDDDDD;
    font-size: 16px;
    color: var(--text-color);
}

.mphb-price-breakdown tr:last-child th,
.mphb-price-breakdown tr:last-child td {
    border-bottom: none;
    font-weight: 800;
    color: var(--heading-color);
    font-size: 18px;
    padding-top: 20px;
}

.mphb-price-breakdown-total {
    text-align: right !important;
}

/* Hide the duplicate accommodation title in price breakdown if redundant */
.mphb-price-breakdown .mphb-room-type-name {
    font-weight: 500;
}

/* -----------------------------------------
   Action Buttons
   ----------------------------------------- */

.mphb-confirm-reservation-btn-wrapper {
    margin-top: 32px;
    text-align: left;
    /* Airbnb usually has action on left or full width */
}

#mphb_confirm_reservation_button {
    background-color: #E51D53;
    /* Using Airbnb Brand Color (start of gradient) or Black? User said "Airbnb". Let's use Theme Primary (Black) if not specified, but Airbnb is #FF385C. Let's stick to Theme Black (#1B1C1E) to match rest of site, requested "look and feel with the website". */
    background-color: var(--primary-color, #1B1C1E);
    /* Fallback to black */
    color: #fff;
    font-size: 18px;
    font-weight: 600;
    padding: 14px 24px;
    border-radius: 8px;
    border: none;
    cursor: pointer;
    width: 100%;
    transition: transform 0.1s active;
}

#mphb_confirm_reservation_button:hover {
    opacity: 0.9;
}

#mphb_confirm_reservation_button:active {
    transform: scale(0.98);
}

/* Terms Checkbox */
.mphb-terms-and-conditions-acceptance {
    margin-top: 24px;
    font-size: 14px;
}

/* =========================================
   CHECKOUT PAGE REFINEMENTS
   ========================================= */

/* 1. Hide Login / Account Text */
.mphb-login-form-wrap {
    display: none !important;
}

/* 2. Reduce Gaps Between Sections */
/* 2. Reduce Gaps Between Sections */
.mphb-checkout-section {
    margin-bottom: 16px;
    padding-bottom: 16px;
    border-bottom: 1px solid #EBEBEB;
    margin-top: 32px !important;
    /* Reduced from default 64px by 50% */
}

/* 
   FIX TOP GAP (Booking Details) 
   User wants total gap <= 32px.
   Currently: Header(16) + Section(64) + Wrapper(40) + Margin(32) = 152px!
   Fix: Reduce all to near zero or minimal.
*/
.page-template-default .section {
    padding-top: 16px !important;
    /* Reduce from 64px */
}

.mphb_sc_checkout-wrapper {
    padding-top: 0px !important;
    /* Remove 40px padding */
    margin-top: 0px !important;
}

#mphb-booking-details.mphb-checkout-section {
    margin-top: 0px !important;
    /* Remove top margin for FIRST section only */
    border-top: none !important;
}

/* Reset heading margins inside sections to prevent double-gap */
.mphb-checkout-section h3,
.mphb-checkout-section .mphb-checkout-section-title {
    margin-top: 0px !important;
    padding-top: 0px !important;
}

/* Tighter gap for the grid too */
form.mphb_sc_checkout-form {
    gap: 16px;
    /* Reduced to 16px */
}

/* 
   AGGRESSIVE FIELD SPACING FIX
   1. Reset Paragraph Margins (the wrappers)
   2. Reduce Label Margins
   3. Hide BR tags (CRITICAL FIX)
   4. Remove Input Margins (let wrapper handle spacing)
*/

form.mphb_sc_checkout-form p {
    margin-bottom: 8px !important;
    /* Very tight spacing between fields */
}

.mphb_sc_checkout-form br {
    display: none !important;
    /* Hide the break tag causing the gap */
}

.mphb-checkout-section label {
    margin-bottom: 0px !important;
    /* Ultra-tight label-to-input */
    line-height: 1.2 !important;
    /* Prevent line-height from adding gap */
    display: block !important;
}

.mphb-checkout-section input[type="text"],
.mphb-checkout-section input[type="email"],
.mphb-checkout-section input[type="tel"],
.mphb-checkout-section input[type="number"],
.mphb-checkout-section select,
.mphb-checkout-section textarea {
    margin-bottom: 0px !important;
    /* Remove input margin, rely on P wrapper */
    margin-top: 4px !important;
    /* Small visual separation from label */
}

/* 3. Style "Book Now" Button */
/* Target specific parent wrapper to override default input styles if needed */
.mphb_sc_checkout-submit-wrapper input[type="submit"],
.mphb_sc_checkout-submit-wrapper .button,
input[name="mphb_confirm_reservation"] {
    background-color: #1B1C1E;
    /* Primary Black */
    color: #ffffff;
    font-size: 18px;
    font-weight: 600;
    padding: 16px 32px;
    border-radius: 8px;
    border: none;
    cursor: pointer;
    width: 100%;
    transition: all 0.2s ease;
    margin-top: 16px;
    -webkit-appearance: none;
    appearance: none;
    /* Remove iOS default styles */
}

.mphb_sc_checkout-submit-wrapper input[type="submit"]:hover,
.mphb_sc_checkout-submit-wrapper .button:hover {
    background-color: #1B1C1E;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.mphb_sc_checkout-submit-wrapper input[type="submit"]:active {
    transform: translateY(0);
}

/* 
   FINAL CHECKOUT REDESIGN CSS 
   Appending to end of styles.css 
*/

.checkout-grid {
    display: grid;
    grid-template-columns: 3fr 1fr;
    gap: 20px;
    align-items: start;
    margin-top: 24px;
}

.checkout-main-column {
    background: #fff;
    padding: 32px;
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
}

.checkout-section {
    margin-bottom: 40px;
    padding-bottom: 32px;
    border-bottom: 1px solid #eee;
}

.checkout-section:last-child {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
}

.section-title {
    font-size: 1.5rem;
    margin-bottom: 20px;
    color: #1B1C1E;
    font-weight: 700;
}

/* Sidebar */
.checkout-sidebar-column {
    position: relative;
    height: 100%;
}

.sticky-sidebar-inner {
    position: sticky;
    top: 100px;
}

.booking-summary-widget {
    background: #fff;
    padding: 24px;
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    border: 1px solid #eee;
}

.booking-summary-widget h3 {
    font-size: 1.25rem;
    margin-bottom: 16px;
    border-bottom: 1px solid #eee;
    padding-bottom: 12px;
}

/* Summary Items */
.summary-item {
    margin-bottom: 24px;
}

.summary-room-image {
    width: 100%;
    height: 180px;
    object-fit: cover;
    border-radius: 8px;
    margin-bottom: 12px;
}

.summary-item h4 {
    font-size: 1.1rem;
    margin-bottom: 8px;
    font-weight: 600;
}

.detail-row {
    display: flex;
    justify-content: space-between;
    margin-bottom: 8px;
    font-size: 0.95rem;
    color: #555;
    border-bottom: 1px dashed #f0f0f0;
    padding-bottom: 4px;
}

.detail-row span {
    color: #777;
}

.detail-row strong {
    color: #1B1C1E;
}

.summary-total {
    margin-top: 16px;
    padding-top: 16px;
    border-top: 2px solid #eee;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-weight: 700;
}

.total-amount {
    color: var(--primary-color, #ECC15D);
    font-size: 1.3rem;
}

/* Customer Form Grid */
.form-grid .mphb-customer-details {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

/* Span full width */
.mphb-customer-email,
.mphb-customer-note,
.mphb-customer-address1,
.mphb-customer-create-account {
    grid-column: 1 / -1;
}

/* Payment Methods (Card Style) */
.payment-methods-wrapper .mphb-gateways-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
    gap: 12px;
    list-style: none;
    padding: 0;
}

.payment-methods-wrapper .mphb-gateways-list li {
    border: 2px solid #eee;
    border-radius: 8px;
    text-align: center;
    padding: 16px 8px;
    cursor: pointer;
    background: #fafafa;
    transition: all 0.2s;
}

.payment-methods-wrapper .mphb-gateways-list li:hover {
    border-color: #ccc;
}

/* Selected state (requires :has or JS class, we assume mostly :has support or fallback to valid checked styling) */
.payment-methods-wrapper .mphb-gateways-list li:has(input:checked) {
    border-color: var(--primary-color, #ECC15D);
    background-color: rgba(236, 193, 93, 0.05);
    box-shadow: 0 0 0 1px var(--primary-color, #ECC15D);
}

.mphb-gateway-title {
    display: block;
    font-size: 0.9rem;
    font-weight: 700;
    margin-top: 4px;
}

/* Hide Description in card mode to keep clean, or keep it */
.mphb-gateway-description {
    font-size: 0.8rem;
    color: #777;
    margin-top: 4px;
    display: none;
    /* Often too much text for cards */
}

/* Submit Wrapper */
.checkout-submit-wrapper {
    margin-top: 32px;
}

.checkout-submit-wrapper input[type="submit"] {
    width: 100%;
    padding: 16px;
    font-size: 1.1rem;
    font-weight: 700;
    text-transform: uppercase;
    border-radius: 8px;
    background: #1B1C1E;
    color: #fff;
    cursor: pointer;
    border: none;
}

.checkout-submit-wrapper input[type="submit"]:hover {
    background: #1B1C1E;
}

/* Mobile Responsive */
@media (max-width: 900px) {
    .checkout-grid {
        grid-template-columns: 1fr;
        gap: 0;
        margin-top: 0;
    }

    .checkout-main-column {
        padding: 0;
        /* Remove card padding on mobile to use full width */
        box-shadow: none;
        background: transparent;
    }

    /* Summary First */
    .checkout-sidebar-column {
        order: -1;
        margin-bottom: 24px;
    }

    .sticky-sidebar-inner {
        position: static;
    }

    .booking-summary-widget {
        background: #fdfdfd;
        padding: 16px;
        border-radius: 8px;
    }

    .summary-room-image {
        display: none;
        /* Hide on mobile to save space as requested */
    }

    .form-grid .mphb-customer-details {
        grid-template-columns: 1fr;
    }

    .checkout-section {
        margin-bottom: 24px;
        padding-bottom: 24px;
    }
}

/* 
   CHECKOUT LAYOUT FIXES
   Forcing full width breakout & wider container
*/
.yesnowstays-checkout-wrapper {
    width: 100vw;
    margin-left: calc(50% - 50vw);
    padding: 0 40px;
    /* Prevent edge touching on small screens */
    box-sizing: border-box;
}

.checkout-grid {
    max-width: 1600px;
    margin: 0 auto;
    width: 100%;
    /* Reverting to 2fr 1fr for better balance on wide screen */
    grid-template-columns: 2fr 1fr;
    gap: 40px;
    /* Increase gap for breathing room */
}

@media (max-width: 1200px) {
    .checkout-grid {
        padding: 0;
    }
}

@media (max-width: 900px) {
    .yesnowstays-checkout-wrapper {
        width: 100%;
        margin-left: 0;
        padding: 0;
    }

    .checkout-grid {
        grid-template-columns: 1fr;
        padding: 0;
    }
}

/* 
   FINAL LAYOUT FIX (VERIFIED)
   Removing previous 100vw hack and using safer container expansion
*/

.yesnowstays-checkout-wrapper {
    width: 100%;
    margin-left: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Hard override for container on checkout page (using body class if available or specific targeting) 
   We will target the container inside page-template-default if we can find a unique hook.
   But earlier grep showed .container { max-width: 1200px }.
   We simply override it for the checkout wrapper's parents if possible?
   Actually, the checkout wrapper sits inside the container. We can't change parent width from child CSS easily.
   
   However, we verified injecting:
   .page-id-17 .container.section { max-width: 1600px; width: 95%; }
   worked.
   
   But 'page-id-17' is specific to that environment.
   We should use '.mphb-checkout-page' if available, or target by body class.
   The Motopress plugin usually adds body classes. 'mphb_checkout' or similar.
   Since we can't be sure of the ID in production, we'll try to target a broader selector.
   
   Or we can use the JS solution to force the parent width, which is safer cross-environment.
   Wait, I already have a JS file running!
   I will use the JS I wrote earlier (move_submit_button_script) to ALSO widen the container.
   That is the most robust way since I can't guess the body class ID for production.
*/

/* Reset wrapper styles first */
.yesnowstays-checkout-wrapper {
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: 0 !important;
    width: 100% !important;
}

.checkout-grid {
    grid-template-columns: 2fr 1fr;
    gap: 40px;
    width: 100%;
}

@media (max-width: 900px) {
    .checkout-grid {
        grid-template-columns: 1fr;
    }
}

/* 
   CRITICAL LAYOUT UNBLOCKERS
   Overriding plugin and theme bottlenecks to allow full width
*/

/* 1. Uncap the Theme Content Width for this page (handled by JS, but adding CSS backup) */


/* 2. Uncap the Plugin Shortcode Wrapper (was 1120px) */
.mphb_sc_checkout-wrapper {
    max-width: 100% !important;
    width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* 3. Disable Plugin Form Grid (was limiting width and columns) */
form.mphb_sc_checkout-form {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    grid-template-columns: none !important;
}

/* 4. Ensure our wrapper fills the space */
.yesnowstays-checkout-wrapper {
    width: 100% !important;
    max-width: 100% !important;
    /* padding handled in previous rules */
}

/* 
   CHECKOUT UI REFINEMENTS
   1. Hide duplicate Payment Heading from plugin
*/
.mphb-gateway-chooser-title {
    display: none !important;
}

/* 2. Adjust T&Cs spacing if moved */
.terms-section {
    margin-top: 24px;
    margin-bottom: 24px;
    border: none;
    /* If it had a border, remove it for cleaner look near button */
    padding-bottom: 0;
}

/* Booking Confirmation Page */
.mphb_sc_booking_confirmation {
    max-width: 800px;
    margin: 0 auto;
    padding: var(--spacing-xl) 0;
}

.mphb-booking-details-section {
    background: #fff;
    border-radius: var(--radius);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
    margin-bottom: var(--spacing-lg);
    padding: 0 !important;
    /* Override default padding if any */
    overflow: hidden;
}

.mphb-booking-details-section.payment {
    padding: var(--spacing-lg) !important;
}

.booking-confirmation-card {
    display: flex;
    flex-direction: column;
}

.booking-confirmation-image {
    width: 100%;
    height: 300px;
    overflow: hidden;
}

.booking-confirmation-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.booking-confirmation-content {
    padding: var(--spacing-lg);
}

.mphb-booking-details-title {
    margin-top: 0;
    margin-bottom: var(--spacing-md);
    padding-bottom: var(--spacing-sm);
    border-bottom: 2px solid var(--primary-color);
    display: inline-block;
    font-size: 1.5rem;
}

.mphb-booking-details {
    margin: 0;
    padding: 0;
    list-style: none;
}

.mphb-booking-details li {
    display: flex;
    justify-content: space-between;
    margin-bottom: var(--spacing-sm);
    padding-bottom: var(--spacing-sm);
    border-bottom: 1px dashed #eee;
}

.mphb-booking-details li:last-child {
    border-bottom: none;
    margin-bottom: 0;
}

.mphb-booking-details .label {
    font-weight: 600;
    color: var(--heading-color);
}

.mphb-booking-details .value {
    color: #555;
    text-align: right;
}

.accommodations {
    margin-top: var(--spacing-md);
    padding-top: var(--spacing-md);
    border-top: 1px solid #eee;
}

.accommodations-title {
    display: block;
    font-weight: 600;
    margin-bottom: var(--spacing-xs);
}

.accommodations-list a {
    color: var(--primary-color);
    font-weight: 600;
}

/* Payment Instructions */
.mphb-payment-instructions {
    background: #f9f9f9;
    padding: var(--spacing-md);
    border-left: 4px solid var(--primary-color);
    margin-top: var(--spacing-lg);
    border-radius: 4px;
}

@media (min-width: 768px) {
    .booking-confirmation-card {
        flex-direction: row;
    }

    .booking-confirmation-image {
        width: 40%;
        height: auto;
        min-height: 100%;
    }

    .booking-confirmation-content {
        width: 60%;
    }
}

/* Refined Booking Confirmation Styling */

/* Celebratory Message */
.celebratory-text {
    text-align: center;
    color: var(--heading-color);
    margin-bottom: var(--spacing-lg);
    font-family: 'Playfair Display', serif;
    /* Use heading font if available */
    font-size: 1.8rem;
    font-weight: 700;
}

/* Grid Layout for Booking Details */
/* Grid Layout for Booking Details (Confirmation Page Only) */
/* Scoped to avoid breaking checkout page which shares class names */
/* Grid Layout for Booking Details (Default - Confirmation Page) */
/* Apply to .booking-confirmation-card which we added to the template */
/* Grid Layout for Booking Details (Default - Confirmation Page) */
/* Apply to .booking-confirmation-card which we added to the template */
/* Grid Layout for Booking Details (Default - Confirmation Page) */
/* Apply to .booking-confirmation-card which we added to the template */
/* Also apply to the default Payment Section wrapper to ensure consistency */
.booking-confirmation-card .mphb-booking-details,
.mphb-booking-details-section.payment ul,
.mphb-booking-details-section.payment .mphb-booking-details {
    display: grid !important;
    grid-template-columns: 1fr !important;
    /* Force Single column */
    gap: 0 !important;
    /* Condensed spacing */
}

/* Ensure list items reset full width flex behavior */
/* Ensure list items reset full width flex behavior */
.booking-confirmation-card .mphb-booking-details li,
.mphb-booking-details-section.payment li {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    border-bottom: none !important;
    /* Force no border */
    border-right: none !important;
    /* Ensure no vertical lines */
    margin-bottom: 0 !important;
    margin-right: 0 !important;
    /* Fix alignment issues */
    padding: 6px 0 !important;
    /* Condensed row height */
}

/* Status should be full width */
.booking-confirmation-card .mphb-booking-details li:last-child,
.mphb-booking-details-section.payment li:last-child {
    grid-column: 1 / -1 !important;
    margin-top: 5px !important;
    padding-top: 10px !important;
}

/* Reset/Protect Checkout Page Layout */
/* The checkout page also uses .booking-confirmation-card but needs default styling */
.yesnowstays-checkout-wrapper .booking-confirmation-card .mphb-booking-details {
    display: block !important;
    /* Revert grid */
}

.yesnowstays-checkout-wrapper .booking-confirmation-card .mphb-booking-details li {
    border-bottom: 1px dashed #eee !important;
    /* Restore original dashed line for checkout */
}

.yesnowstays-checkout-wrapper .booking-confirmation-card .mphb-booking-details li:last-child {
    border-bottom: none !important;
}

/* Adjustments for labels/values */
.booking-confirmation-card .mphb-booking-details .label {
    font-weight: 700;
    color: var(--heading-color);
    font-size: 0.95rem;
}

.booking-confirmation-card .mphb-booking-details .value {
    color: #444;
    font-weight: 600;
    font-size: 1rem;
}

/* Spacing adjustment for the card content */
.booking-confirmation-content .mphb-booking-details-title {
    margin-bottom: var(--spacing-lg);
}

/* Responsive adjustments for Grid */
.booking-confirmation-card .mphb-booking-details {
    grid-template-columns: 1fr;
}


/* 
   FINAL CHECKOUT COMPATIBILITY FIX
   Ensure datepickers don't get hidden behind modals or stickies 
*/
.datepick-popup {
    z-index: 10000 !important;
}

/* =========================================
   HERO SEARCH FORM STYLING (Airbnb / Booking Style)
   ========================================= */

/* Wrapper: Overhead Floating Pill */
.hero-search-wrapper {
    position: absolute;
    bottom: 15%;
    left: 50%;
    transform: translateX(-50%);
    width: 94%;
    max-width: 880px;
    /* Slightly tighter max width for cleaner look */
    background: #ffffff;
    border-radius: 50px;
    padding: 10px;
    /* More breathing room inside pill */
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.2);
    /* Strong shadow for depth */
    border: 2px solid var(--primary-color);
    z-index: 20;
}

/* 
   LAYOUT FIXES - CRITICAL
   1. Target generic form element to force flex
   2. Hide break tags that cause stacking
*/
.hero-search-wrapper br {
    display: none !important;
}

.hero-search-wrapper form {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    flex-wrap: nowrap !important;
    margin: 0 !important;
    padding: 0 10px !important;
    width: 100% !important;
    height: 100% !important;
}

/* Field Containers (Paragraphs) */
.hero-search-wrapper form>p {
    flex: 1 1 auto !important;
    width: auto !important;
    float: none !important;
    margin: 0 !important;
    padding: 4px 24px !important;
    /* Space inside each section */
    border-right: 1px solid #e0e0e0;
    /* Divider */
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    position: relative;
    background: transparent !important;
}

/* Remove border from last item */
.hero-search-wrapper form>p:last-of-type,
.hero-search-wrapper form .mphb_sc_search-submit-button-wrapper {
    border-right: none !important;
}

/* Labels: Small, bold, uppercase */
.hero-search-wrapper label {
    font-size: 0.7rem !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    color: #1B1C1E !important;
    margin-bottom: 4px !important;
    display: block !important;
    line-height: 1 !important;
    cursor: pointer;
}

/* Inputs: TOTAL RESET */
.hero-search-wrapper input:not([type="submit"]),
.hero-search-wrapper select {
    width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    border: 0 !important;
    /* No borders */
    border-bottom: none !important;
    border-radius: 0 !important;
    background: transparent !important;
    /* See-through */
    box-shadow: none !important;
    outline: none !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;

    /* Text styling */
    font-size: 0.95rem !important;
    color: #666 !important;
    font-weight: 400 !important;
    height: auto !important;
    line-height: 1.2 !important;
}

.hero-search-wrapper input:focus,
.hero-search-wrapper select:focus {
    outline: none !important;
    box-shadow: none !important;
    color: #1B1C1E !important;
}

/* Submit Button Container */
.hero-search-wrapper .mphb_sc_search-submit-button-wrapper {
    flex: 0 0 auto !important;
    width: auto !important;
    margin: 0 !important;
    padding: 0 0 0 10px !important;
}

/* Submit Button: Red/Yellow Circle/Pill */
.hero-search-wrapper input[type="submit"] {
    background-color: var(--primary-color, #E51D53) !important;
    color: #fff !important;
    border: none !important;
    border-radius: 50px !important;
    width: auto !important;
    height: 52px !important;
    /* Big clickable area */
    min-width: 52px !important;
    padding: 0 28px !important;
    font-size: 1rem !important;
    font-weight: 700 !important;
    cursor: pointer !important;
    box-shadow: none !important;
    transition: background-color 0.2s, transform 0.2s !important;
    text-shadow: none !important;
    margin: 0 !important;
}

.hero-search-wrapper input[type="submit"]:hover {
    transform: translateY(-2px) !important;
    box-shadow: none !important;
}

/* Hide Tip - Make specific to override flex rules */
.hero-search-wrapper .mphb-required-fields-tip {
    display: none !important;
}

/* Hide Asterisks */
.hero-search-wrapper .mphb-required-fields-mark,
.hero-search-wrapper .mphb-required-fields-asterisk,
.hero-search-wrapper abbr[title="required"] {
    display: none !important;
}

/* MOBILE RESPONSIVE (<900px) */
@media (max-width: 900px) {
    .hero-search-wrapper {
        position: relative !important;
        bottom: auto !important;
        left: auto !important;
        transform: none !important;
        width: 100% !important;
        max-width: 100% !important;
        margin-top: -30px !important;
        border-radius: 20px !important;
        padding: 20px !important;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1) !important;
    }

    .hero-search-wrapper form {
        flex-direction: column !important;
        align-items: stretch !important;
        padding: 0 !important;
    }

    .hero-search-wrapper form>p {
        width: 100% !important;
        border-right: none !important;
        border-bottom: 1px solid #eee !important;
        padding: 12px 0 !important;
        margin-bottom: 0 !important;
    }

    .hero-search-wrapper form>p:last-of-type {
        border-bottom: none !important;
        margin-bottom: 16px !important;
    }

    .hero-search-wrapper .mphb_sc_search-submit-button-wrapper {
        padding: 0 !important;
        width: 100% !important;
    }

    .hero-search-wrapper input[type="submit"] {
        width: 100% !important;
        border-radius: 12px !important;
        height: 56px !important;
        margin-top: 10px !important;
    }
}

/* =========================================
   GENERIC LAYOUT & ABOUT PAGE STYLES
   (Ported from demobuild)
   ========================================= */



/* Checkout Page Spacing Overrides */
.page-id-17 .section-title,
.page-id-17 h3 {
    margin-bottom: 0px !important;
    margin-top: 32px !important;
}

.page-id-17 .checkout-section.customer-section {
    margin-bottom: 0px !important;
    padding-bottom: 0px !important;
}

.page-id-17 .checkout-section.payment-section {
    margin-bottom: 40px !important;
    padding-bottom: 0px !important;
}

.page-id-17 .mphb-checkout-terms-wrapper.mphb-checkout-section {
    margin-bottom: 0px !important;
    padding-bottom: 0px !important;
}

.page-id-17 .mphb_sc_checkout-submit-wrapper input[type="submit"],
.page-id-17 .mphb_sc_checkout-submit-wrapper .button,
.page-id-17 input[name="mphb_confirm_reservation"] {
    margin-top: 0px !important;
}

/* Fix for strange asterisk display (remove dotted underline from abbr) */
/* Fix for strange asterisk display (remove dotted underline from all abbrs used as required marks) */
abbr,
abbr[title],
.mphb-required-fields-mark {
    text-decoration: none !important;
    border-bottom: none !important;
    cursor: default !important;
}

/* 3. Spacing Adjustments for Stripe & Terms */

/* A. Payment Method Title (Pay by Card) */
/* FIX: Specificity was too low. Combined class + tag + prop matches existing overrides */
label.mphb-gateway-title {
    margin-bottom: 12px !important;
    display: block !important;
}

/* Reset generic label margin to avoid conflicts */
.mphb-gateways-list li label {
    margin-bottom: 0 !important;
}

/* B. Terms & Conditions Section Gap */

/* FIX: The gap is primarily from the PREVIOUS section (Payment) having large bottom spacing. */
.checkout-section.payment-section {
    margin-bottom: 24px !important;
    /* Reduced from 40px */
    padding-bottom: 0px !important;
    /* Reduced from 32px to minimize gap */
    border-bottom: 1px solid #eee;
    /* Keep separator if needed, or remove */
}

/* Target the wrapper from checkout-helper.php */
.terms-section {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

/* Target the inner container. */
.terms-section .mphb-checkout-section,
.checkout-section.terms-section {
    margin-top: 0px !important;
    /* Reduced to 0 to sit tight against payment section */
    padding-top: 0 !important;
    border-top: none !important;
}

/* Ensure the checkbox container itself doesn't add extra margin */
.mphb-terms-and-conditions-accept {
    margin-top: 0 !important;
}

/* 4. Premium Styling for Terms & Conditions */

/* Custom Checkbox Styling Wrapper */
/* FIX: Corrected class name from -acceptance to -accept based on inspection */
.mphb-terms-and-conditions-accept {
    position: relative;
    display: flex !important;
    /* Ensure flex alignment */
    align-items: center;
    justify-content: center;
    /* Center the checkbox/terms for better mobile access & premium look */
    /* gap: 16px; REMOVED - gap is now handled inside the label flex */
    padding: 12px 0;
    /* Add vertical breathing room */
}

/* Hide default checkbox but keep it accessible/clickable */
.mphb-terms-and-conditions-accept input[type="checkbox"] {
    appearance: none;
    -webkit-appearance: none;
    width: 25px;
    /* Increased size (prev 22px) */
    height: 25px;
    border: 1px solid #ccc;
    border-radius: 6px;
    /* Softer rounding */
    background-color: #fff;
    cursor: pointer;
    flex-shrink: 0;
    transition: all 0.2s ease;

    /* Inline positioning */
    display: inline-block !important;
    vertical-align: middle;
    margin-right: 12px !important;
    margin-top: -3px !important;
    position: relative;
}

/* Hover state for checkbox */
.mphb-terms-and-conditions-accept input[type="checkbox"]:hover {
    border-color: var(--primary-color);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    /* Subtle lift */
}

/* Checked state */
.mphb-terms-and-conditions-accept input[type="checkbox"]:checked {
    background-color: var(--primary-color);
    border-color: var(--primary-color);
}

/* Checkmark */
.mphb-terms-and-conditions-accept input[type="checkbox"]:checked::after {
    content: '';
    position: absolute;
    left: 50%;
    top: 50%;
    width: 6px;
    height: 12px;
    /* Slightly larger checkmark */
    border: solid #1B1C1E;
    border-width: 0 2px 2px 0;
    /* Use translate to center, then rotate. Adjust Y slightly usually looks better */
    transform: translate(-50%, -60%) rotate(45deg);
    margin-top: 0;
}

/* Text Stylings - FIX: Revert flex to allow text wrapping, use inline alignment */
.mphb-terms-and-conditions-accept label {
    display: inline-block !important;
    /* Allow natural text flow */
    text-align: left;
    /* Keep text readable if it wraps */
    font-weight: 500;
    color: var(--text-color);
    font-size: 1rem;
    cursor: pointer;
    line-height: 1.5;
    /* Good reading height */
}

/* Adjust checkbox for inline alignment */
.mphb-terms-and-conditions-accept input[type="checkbox"] {
    display: inline-block !important;
    vertical-align: middle;
    margin-right: 12px !important;
    /* Space between box and text */
    margin-top: -3px !important;
    /* Visual optical center adjustment */
    float: none;
}

/* Link Styling */
.mphb-terms-and-conditions-link {
    color: var(--text-color);
    text-decoration: underline !important;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
    font-weight: 600;
    transition: color 0.2s, text-decoration-color 0.2s;
}

.mphb-terms-and-conditions-link:hover {
    color: var(--primary-color);
    text-decoration-color: var(--primary-color);
}

/* Property Map */
.property-location-map {
    margin-top: var(--spacing-xl);
    padding-top: var(--spacing-lg);
    border-top: 1px solid #eee;
}

.property-location-map h3 {
    margin-bottom: var(--spacing-sm);
}

#property-map {
    background-color: #f0f0f0;
    /* Placeholder color while loading */
    border: 1px solid #ddd;
}

/* Custom Marker */
.custom-map-marker {
    background: transparent;
    border: none;
}

/* Sticky Mobile CTA */
.sticky-mobile-cta {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: #fff;
    border-top: 1px solid #ddd;
    padding: 6px 0;
    /* Reduced vertical space as requested */
    box-shadow: 0 -4px 10px rgba(0, 0, 0, 0.1);
    z-index: 9999;
    transform: translateY(0);
    transition: transform 0.3s ease;
    display: none;
    /* Hidden by default */
}

.sticky-mobile-cta.is-hidden {
    transform: translateY(110%);
}

@media (max-width: 768px) {
    .sticky-mobile-cta {
        display: block;
    }
}

/* Testimonials Strip */
.testimonials-strip {
    background-color: var(--bg-white);
    color: var(--text-color);
    padding: var(--spacing-lg) 0;
    text-align: center;
}

.testimonials-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: var(--spacing-xl);
}

.testimonial-item {
    font-size: 0.95rem;
    font-style: italic;
}

.testimonial-item p {
    margin-bottom: var(--spacing-sm);
    font-weight: 500;
}

.testimonial-item cite {
    font-size: 0.85rem;
    opacity: 0.9;
    font-style: normal;
    font-weight: 600;
    display: block;
}

/* Book Direct Section */
.book-direct-section {
    background-color: var(--bg-dark);
    color: var(--bg-white);
}

.book-direct-section .section-title {
    color: var(--bg-white);
    margin-bottom: var(--spacing-lg);
}

.book-direct-wrapper {
    max-width: 600px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
}

.book-direct-row {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    background: rgba(255, 255, 255, 0.05);
    /* Subtle row highlights or just omit */
    padding: var(--spacing-md);
    border-radius: var(--radius);
    transition: background 0.3s;
}

.book-direct-row:hover {
    background: rgba(255, 255, 255, 0.1);
}

.book-direct-icon {
    color: var(--primary-color);
    flex-shrink: 0;
    display: flex;
    align-items: flex-start;
    /* Align with top of text */
    padding-top: 4px;
}

.book-direct-content {
    display: flex;
    flex-direction: column;
}

.book-direct-title {
    font-size: 1.15rem;
    font-weight: 600;
    margin-bottom: 4px;
    display: block;
}

.book-direct-desc {
    font-size: 0.95rem;
    color: rgba(255, 255, 255, 0.8);
    margin-bottom: 0;
    line-height: 1.4;
}

/* About Page Personal Touch */
.about-mission-box {
    margin-top: var(--spacing-lg);
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    background: rgba(255, 255, 255, 0.9);
    padding: var(--spacing-md);
    border-radius: var(--radius);
    color: var(--text-color);
}

.about-avatar {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid var(--primary-color);
}

@media (max-width: 768px) {
    .about-mission-box {
        flex-direction: column;
        text-align: center;
    }
}

/* -------------------------------------------------------------------------
   FEATURED PROPERTIES REDESIGN
------------------------------------------------------------------------- */
.featured-property-row {
    background: var(--bg-white);
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    /* Slightly stronger shadow */
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: 0;
    margin-bottom: var(--spacing-xl);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* Alternating layout for Desktop */
@media (min-width: 901px) {
    .featured-property-row:nth-child(even) {
        grid-template-columns: 1fr 1.2fr;
    }

    .featured-property-row:nth-child(even) .featured-image-grid {
        order: 2;
    }

    .featured-property-row:nth-child(even) .featured-content {
        order: 1;
    }
}



.featured-image-grid {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 70% 1fr !important;
    gap: 4px;
    min-height: 450px;
    height: 100%;
}

.featured-main-img {
    height: 100%;
    overflow: hidden;
}

.featured-sub-imgs {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr;
    gap: 4px;
    height: 100%;
}

.featured-sub-imgs div {
    height: 100%;
    overflow: hidden;
}

.featured-main-img img,
.featured-sub-imgs img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.8s ease;
}



.featured-content {
    padding: var(--spacing-xl);
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.featured-title {
    font-size: 2rem;
    margin-bottom: var(--spacing-sm);
    line-height: 1.2;
}

.featured-title a {
    text-decoration: none;
    color: var(--heading-color);
    transition: color 0.2s;
}

.featured-title a:hover {
    color: var(--primary-color);
}

.featured-location {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: var(--spacing-md);
    color: #777;
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: 600;
}

.featured-meta {
    display: flex;
    gap: var(--spacing-lg);
    margin-bottom: var(--spacing-md);
    padding-bottom: var(--spacing-md);
    border-bottom: 1px solid #eee;
    font-weight: 500;
    color: #444;
}

.featured-amenities {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: var(--spacing-md);
}

.featured-excerpt {
    margin-bottom: var(--spacing-lg);
    color: #555;
    line-height: 1.7;
    font-size: 1.05rem;
}

/* Responsive Featured Properties */
@media (max-width: 900px) {
    .featured-property-row {
        grid-template-columns: 1fr;
    }

    .featured-image-grid {
        height: 350px;
    }

    .featured-content {
        padding: var(--spacing-lg);
    }
}

@media (max-width: 600px) {
    .featured-image-grid {
        grid-template-columns: 1fr;
        grid-template-rows: 1fr !important;
        min-height: 250px;
        height: 250px;
    }

    .featured-sub-imgs {
        display: none !important;
    }
}

/* -------------------------------------------------------------------------
   FOOTER UPDATES
------------------------------------------------------------------------- */
.footer-top {
    padding-bottom: var(--spacing-lg);
    /* border-bottom: 1px solid rgba(0, 0, 0, 0.1); */
    margin-bottom: var(--spacing-lg);
}

.footer-grid {
    display: flex;
    justify-content: center;
    gap: 80px;
    /* Bring columns closer but keep distinct */
    flex-wrap: wrap;
    text-align: left;
}

/* Ensure overrides for inline styles if needed */
.footer-links li {
    margin-bottom: 0.8rem !important;
}

.footer-links a {
    font-size: 1.05rem;
    transition: color 0.2s;
}

.footer-links a:hover {
    color: var(--primary-color) !important;
    padding-left: 0;
}

.footer-email-link {
    font-size: 1.1rem;
    padding: 10px 0;
    transition: color 0.2s;
}

.footer-email-link:hover {
    color: var(--primary-color) !important;
}