/* =============================================================
   THE KUNJA — RESPONSIVE CSS
   Tablet : max-width 1030px
   Mobile : max-width 767px
   ============================================================= */

/* ── VILLA CARD BUTTON + PRICE REDESIGN (all breakpoints) ── */

/* Flex layout so text + button always sit on same row at every screen size */
.welcome-container .container,
.welcome-container .container-2 {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
}
.welcome-container .container > img,
.welcome-container .container-2 > img {
    flex: 0 0 100% !important;
    width: 100% !important;
    height: auto !important;
    display: block !important;
}
.welcome-container .container > div[style*="170px"],
.welcome-container .container-2 > div[style*="170px"] {
    flex: 1 1 auto !important;
    float: none !important;
    width: auto !important;
    min-width: 0 !important;
}
.welcome-container .container > div[style*="float: right"],
.welcome-container .container-2 > div[style*="float: right"] {
    flex: 0 0 auto !important;
    float: none !important;
}
.welcome-container .container > div[style*="height: 2px"],
.welcome-container .container-2 > div[style*="height: 2px"] {
    flex: 0 0 100% !important;
    width: 100% !important;
}

.button-1,
.button-2 {
    width: auto !important;
    height: auto !important;
    border-radius: 0 !important;
    border: 1px solid #a09880 !important;
    padding: 7px 14px !important;
    background: transparent !important;
    display: inline-block !important;
    cursor: pointer;
}
.button-1 .more,
.button-2 .more {
    font-size: 12px !important;
    letter-spacing: 0.12em !important;
    color: #5a5748 !important;
    text-transform: uppercase !important;
    white-space: nowrap;
}
.button-1:hover,
.button-2:hover {
    background: #f6a623 !important;
    border-color: #f6a623 !important;
}
.button-1:hover .more,
.button-2:hover .more {
    color: #fff !important;
}
.villa-price {
    color: #c8922a;
    font-size: 15px;
    font-weight: normal;
    display: block;
    margin-top: 2px;
}

/* ── BOOKING BAR SELECTS — custom styling (all breakpoints) ── */
form[name="DateSelect"] select {
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;
    background-color: #1a1a1a !important;
    color: #fff !important;
    border: none !important;
    border-bottom: 1px solid #c8922a !important;
    border-radius: 0 !important;
    padding: 4px 22px 4px 6px !important;
    font-family: 'Avenir Book', sans-serif !important;
    font-size: 12px !important;
    cursor: pointer !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='5' viewBox='0 0 8 5'%3E%3Cpath d='M0 0l4 5 4-5z' fill='%23c8922a'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 6px center !important;
    background-size: 8px !important;
    outline: none !important;
}
form[name="DateSelect"] select:focus {
    border-bottom-color: #f6a623 !important;
    background-color: #222 !important;
}
form[name="DateSelect"] select option {
    background-color: #1a1a1a !important;
    color: #fff !important;
}
/* Scrollbar inside the day select dropdown (Chromium-based browsers) */
form[name="DateSelect"] select::-webkit-scrollbar {
    width: 6px !important;
}
form[name="DateSelect"] select::-webkit-scrollbar-track {
    background: #1a1a1a !important;
}
form[name="DateSelect"] select::-webkit-scrollbar-thumb {
    background-color: #c8922a !important;
    border-radius: 0 !important;
}
form[name="DateSelect"] select::-webkit-scrollbar-thumb:hover {
    background-color: #f6a623 !important;
}

/* ── LETTER-SPACING — elevate luxury register ── */
h1, h2, h3, h4 {
    letter-spacing: 0.16em !important;
}
/* Nav links — style.css sets letter-spacing:0 so override here */
#navigation a.main,
#navigation a.main:link,
#navigation a.main:visited,
#navigation a.main:hover,
#navigation a.main-active {
    letter-spacing: 0.12em !important;
}
/* Accordion section labels */
.accordion-header {
    letter-spacing: 0.12em !important;
}
/* Booking bar label */
.mobile-booking-bar,
div[style*="BOOK YOUR"] strong,
form[name="DateSelect"] strong {
    letter-spacing: 0.12em !important;
}

/* ── SEO TEXT BLOCK — de-emphasised fine print ── */
.welcome-container[style*="1000px"] {
    width: 100% !important;
    max-width: 900px !important;
    height: auto !important;
    padding: 30px 40px !important;
    box-sizing: border-box !important;
    border-top: 1px solid #e8e4d9 !important;
    text-align: left !important;
}
/* Heading */
.welcome-container[style*="1000px"] > div[style*="21px"] {
    font-size: 10px !important;
    font-weight: normal !important;
    letter-spacing: 0.18em !important;
    text-transform: uppercase !important;
    color: #b0a898 !important;
    margin-bottom: 12px !important;
}
/* Body paragraphs */
.welcome-container[style*="1000px"] .teks-bawah,
.welcome-container[style*="1000px"] p {
    font-size: 11px !important;
    color: #b0a898 !important;
    line-height: 1.9 !important;
    margin: 0 0 6px !important;
}
/* Neuter the bold keyword stuffing */
.welcome-container[style*="1000px"] b {
    font-weight: normal !important;
    color: #b0a898 !important;
}

/* Mobile-only line breaks */
br.mobile-br { display: none; }
@media (max-width: 767px) {
    br.mobile-br { display: block; }
    .welcome-container h1 { line-height: 1.5; }
}

/* ── HAMBURGER BUTTON ─────────────────────────────────────── */
.nav-toggle {
    display: none;
    position: absolute;
    right: 15px;
    top: 32px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 6px;
    z-index: 200;
}
.nav-toggle span {
    display: block;
    width: 26px;
    height: 2px;
    background: #7e7b68;
    margin: 5px 0;
    transition: 0.25s;
}

/* ── TABLET  (≤ 1030px) ───────────────────────────────────── */
@media (max-width: 1030px) {

    body { overflow-x: hidden; margin: 0; padding: 0; }
    #main-container { overflow: hidden; }

    /* Header — z-index keeps it above any absolutely-positioned third-party
       widgets (e.g. SiteMinder booking iframe injected at top:0) */
    .header {
        width: 100% !important;
        position: relative;
        z-index: 1000;
        box-sizing: border-box;
    }
    #navigation {
        width: 100% !important;
        box-sizing: border-box;
    }

    /* Hero */
    .top-container,
    .top-container-weddings,
    .middle-container-weddings {
        min-width: 0 !important;
        width: 100% !important;
    }

    /* Full-width overrides */
    .welcome-container,
    .welcome-container-villas,
    .welcome-container-weddings,
    .facilities-container,
    .gallery-container,
    .contact-container,
    .middle-container-villas,
    .rates-container,
    .villas-container,
    .footer,
    .footer-2 {
        min-width: 0 !important;
        width: 100% !important;
        box-sizing: border-box;
    }

    /* Booking bar outer containers */
    div[style*="width: 1006px"],
    div[style*="width: 950px"],
    div[style*="width: 1030px"],
    div[style*="width: 940px"] {
        width: 100% !important;
        box-sizing: border-box !important;
    }

    .footer > div[style*="width: 1030px"] {
        width: 100% !important;
        box-sizing: border-box !important;
    }
}

/* ── MOBILE  (≤ 767px) ────────────────────────────────────── */
@media (max-width: 767px) {

    /* ---- Navigation ---- */
    .nav-toggle { display: block; }

    .header {
        height: auto !important;
        padding-bottom: 0;
    }

    #navigation {
        display: block !important;
        float: none !important;
        height: auto !important;
        background: #fff;
    }

    /* Logo row */
    #navigation > li:first-child {
        float: none !important;
        display: block;
        text-align: left;
        padding: 10px 50px 10px 10px;
    }
    .logo {
        width: 120px !important;
        height: auto !important;
        padding: 0 !important;
    }

    /* Hide flags on mobile */
    #navigation table { display: none !important; }

    /* Nav links hidden until toggled */
    #navigation li:not(:first-child) {
        display: none;
        float: none !important;
        width: 100%;
        border-top: 1px solid #eee;
        text-align: center;
    }
    #navigation li:not(:first-child) a {
        padding: 12px 0 !important;
        display: block !important;
    }
    #navigation.nav-open li:not(:first-child) {
        display: block;
    }

    /* ---- Hero ---- */
    .top-container,
    .top-container-weddings {
        min-width: 0 !important;
        width: 100% !important;
        height: 55vw !important;
        max-height: 280px !important;
        min-height: 0 !important;
    }

    /* Slideshow images */
    .top-container img.bgM,
    .top-container-weddings img.bgM {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover;
    }

    /* ---- Booking bar ---- */
    /* Remove the table layout that positions booking bar at bottom */
    .top-container > table,
    .top-container-weddings > table { display: none !important; }

    /* Detach booking bar from hero and show below it as a block */
    form[name="DateSelect"] {
        position: static !important;
    }
    .ibe-bar {
        background: rgba(0,0,0,0.85);
        padding: 12px;
        color: #fff;
        font-size: 13px;
    }
    .ibe-bar > div {
        float: none !important;
        width: 100% !important;
        height: auto !important;
        padding: 5px 0 !important;
        margin: 0 !important;
    }
    .ibe-bar select {
        font-size: 13px;
        margin: 2px;
    }
    .ibe-bar .button-4 {
        width: 100% !important;
        margin-top: 8px;
        border-radius: 4px !important;
    }

    /* Fallback: override inline-style booking divs */
    div[style*="width: 1006px"] {
        width: 100% !important;
        height: auto !important;
        padding: 10px !important;
        box-sizing: border-box !important;
        margin: 0 !important;
    }
    div[style*="width: 950px"] {
        width: 100% !important;
        height: auto !important;
        padding: 4px !important;
        box-sizing: border-box !important;
    }
    div[style*="width: 212px"][style*="float: left"],
    div[style*="width: 270px"][style*="float: left"],
    div[style*="width: 120px"][style*="float: left"] {
        float: none !important;
        width: 100% !important;
        margin-bottom: 6px !important;
        padding-top: 4px !important;
    }
    div[style*="float: right"][style*="padding-top: 13px"] {
        float: none !important;
        width: 100% !important;
        text-align: center;
        margin-top: 4px !important;
    }
    button.button-4 {
        width: 100% !important;
        border-radius: 4px !important;
    }

    /* ---- Welcome section ---- */
    .welcome-container {
        width: 100% !important;
        height: auto !important;
        padding: 20px 15px !important;
        box-sizing: border-box !important;
    }
    /* Villa card: flex container so image is full-width, text+button share a row */
    .welcome-container .container,
    .welcome-container .container-2 {
        float: none !important;
        width: 100% !important;
        height: auto !important;
        padding: 10px 0 !important;
        display: flex !important;
        flex-wrap: wrap !important;
        align-items: stretch !important;
    }
    /* Image: full width row */
    .welcome-container .container > img {
        flex: 0 0 100% !important;
        width: 100% !important;
        height: auto !important;
        display: block !important;
    }
    /* Text (name + price): grows to fill available space */
    .welcome-container .container > div[style*="170px"] {
        flex: 1 1 auto !important;
        float: none !important;
        width: auto !important;
        margin-top: 10px !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
    }
    /* Button: sits to the right, vertically centred with text */
    .welcome-container .container > div[style*="float: right"] {
        flex: 0 0 auto !important;
        float: none !important;
        width: auto !important;
        margin-top: 10px !important;
        display: flex !important;
        align-items: center !important;
        padding-left: 10px !important;
    }
    /* Dividing line: spans full width below the flex row */
    .welcome-container .container > div[style*="height: 2px"] {
        flex: 0 0 100% !important;
        width: 100% !important;
        margin-top: 10px !important;
        clear: both !important;
    }

    /* ---- Facilities tabs ---- */
    .facilities-container {
        height: auto !important;
        min-height: 0 !important;
        background-image: none !important;
        background-color: #f9f9f9 !important;
        padding-bottom: 20px;
    }
    #tabs {
        width: 100% !important;
        padding-top: 15px !important;
        box-sizing: border-box;
    }
    /* Horizontal scrolling tab list */
    #tabs .ui-tabs-nav,
    #tabs > ul {
        display: flex !important;
        overflow-x: auto !important;
        white-space: nowrap;
        -webkit-overflow-scrolling: touch;
        padding: 0 !important;
        border-bottom: 1px solid #ccc;
    }
    #tabs .ui-tabs-nav li,
    #tabs > ul > li {
        display: inline-block !important;
        float: none !important;
        flex-shrink: 0;
    }
    .facilities-right {
        float: none !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 15px !important;
        box-sizing: border-box !important;
    }
    .facilities-image {
        padding: 15px !important;
        display: block;
    }
    .facilities-image img {
        max-width: 100% !important;
        height: auto !important;
    }

    /* ---- Middle villa image strip ---- */
    .middle-container-villas {
        min-width: 0 !important;
        width: 100% !important;
        height: 50vw !important;
        min-height: 0 !important;
    }

    /* ---- Contact background strip ---- */
    .contact-container {
        min-width: 0 !important;
        width: 100% !important;
        min-height: 180px !important;
        height: auto !important;
        background-size: cover !important;
    }

    /* ---- Gallery ---- */
    .gallery-container {
        height: auto !important;
        min-height: 0 !important;
        min-width: 0 !important;
    }

    /* ---- Villas page two-column layout ---- */
    /* Kill the fixed-height wrapper that clips stacked cards on mobile */
    .welcome-container-villas div[style*="height: 500px"] {
        height: auto !important;
    }
    .welcome-container-villas,
    .welcome-container-weddings {
        width: 100% !important;
        height: auto !important;
        padding: 15px !important;
        box-sizing: border-box !important;
    }
    .welcome-container-villas .container,
    .welcome-container-villas .container2,
    .welcome-container-weddings .container,
    .welcome-container-weddings .container2 {
        float: none !important;
        width: 100% !important;
        height: auto !important;
        padding: 10px 0 !important;
        display: flex !important;
        flex-wrap: wrap !important;
        align-items: center !important;
    }
    /* Image: full-width row */
    .welcome-container-villas .container > img,
    .welcome-container-villas .container2 > img {
        flex: 0 0 100% !important;
        width: 100% !important;
        height: auto !important;
        display: block !important;
    }
    /* Text: capped so the button always has room on the same row */
    .welcome-container-villas .container > div[style*="320px"],
    .welcome-container-villas .container2 > div[style*="320px"] {
        flex: 1 1 auto !important;
        float: none !important;
        width: auto !important;
        max-width: calc(100% - 130px) !important;
        min-width: 0 !important;
        margin-top: 10px !important;
        line-height: 1.5 !important;
    }
    /* Button: sits inline to the right */
    .welcome-container-villas .container > div[style*="float: right"],
    .welcome-container-villas .container2 > div[style*="float: right"] {
        flex: 0 0 auto !important;
        float: none !important;
        margin-top: 10px !important;
        padding-left: 10px !important;
    }
    .villas-container {
        width: 100% !important;
        margin: 0 !important;
        padding: 0 10px !important;
        box-sizing: border-box !important;
    }
    .villas-container .column-1,
    .villas-container .column-2 {
        float: none !important;
        width: 100% !important;
        height: auto !important;
    }
    .villas-container .column-2 .booking-box {
        width: 100% !important;
        box-sizing: border-box !important;
        background: #111 !important;
        padding: 22px 20px 24px !important;
        height: auto !important;
    }
    /* Heading "Book Your Villa" */
    .villas-container .column-2 .booking-box div[style*="24px"] {
        font-size: 14px !important;
        letter-spacing: 0.16em !important;
        text-transform: uppercase !important;
        padding-bottom: 16px !important;
        font-weight: normal !important;
        width: 100% !important;
        color: #fff !important;
    }
    /* Stack the floated field groups */
    .villas-container .column-2 .booking-box div[style*="float: left"],
    .villas-container .column-2 .booking-box div[style*="float:left"] {
        float: none !important;
        width: 100% !important;
        margin-bottom: 12px !important;
        text-align: center !important;
        color: #fff !important;
    }
    /* BOOK NOW button — full width gold */
    .villas-container .column-2 .booking-box button.button-4 {
        width: 100% !important;
        height: 50px !important;
        font-size: 15px !important;
        letter-spacing: 0.12em !important;
        background-color: #f6a623 !important;
        border-radius: 0 !important;
    }

    /* ---- Rates ---- */
    /* Hide N/A package rows on mobile — nothing to book */
    .rates-container .container2,
    .rates-container .container3,
    .rates-container .container5 {
        display: none !important;
    }

    .rates-container {
        width: 100% !important;
        height: auto !important;
        margin: 0 !important;
        padding: 10px !important;
        box-sizing: border-box !important;
    }
    .rates-container .container1,
    .rates-container .container2,
    .rates-container .container3,
    .rates-container .container4,
    .rates-container .container5,
    .rates-container .container6 {
        float: none !important;
        width: 100% !important;
        height: 180px !important;
        margin-top: 8px !important;
        background-size: cover !important;
        background-position: center !important;
        position: relative !important;
    }
    .rates-box1, .rates-box2 {
        position: absolute !important;
        bottom: 0 !important;
        left: 0 !important;
        right: 0 !important;
        width: auto !important;
        margin: 0 !important;
        padding: 8px 15px !important;
        box-sizing: border-box !important;
        overflow: hidden !important;   /* contain inner floats */
    }
    /* Inner floated divs — override desktop fixed widths */
    .rates-box1 > div,
    .rates-box2 > div {
        float: none !important;
        width: auto !important;
        display: inline-block !important;
        vertical-align: middle !important;
        margin: 0 !important;
    }
    /* Rate label + price row — flex so they sit side by side */
    .rates-box1 > div:first-child,
    .rates-box2 > div:first-child {
        width: calc(100% - 80px) !important;
        display: inline-block !important;
    }
    .rates-box1 > div:first-child > div,
    .rates-box2 > div:first-child > div {
        float: left !important;
        width: auto !important;
        font-size: 12px !important;
    }
    /* Book button — keep to the right */
    .rates-box1 > div:last-child,
    .rates-box2 > div:last-child {
        float: right !important;
        width: auto !important;
        margin-top: 0 !important;
        margin-right: 0 !important;
    }

    /* ---- Footer contact bar (footer-2): 2 columns ---- */
    .footer-2 {
        display: flex !important;
        flex-wrap: nowrap !important;
        width: 100% !important;
        height: auto !important;
        box-sizing: border-box !important;
    }
    /* CALL US - direct child container */
    .footer-2 > .container {
        flex: 1 1 50% !important;
        float: none !important;
        width: 50% !important;
        height: auto !important;
        padding: 8px 12px !important;
        text-align: center !important;
        font-size: 13px !important;
        box-sizing: border-box !important;
    }
    /* EMAIL US - the <a> wrapper */
    .footer-2 > a {
        flex: 1 1 50% !important;
        float: none !important;
        width: 50% !important;
        display: block !important;
        text-align: center !important;
        box-sizing: border-box !important;
    }
    .footer-2 > a .container {
        width: 100% !important;
        padding: 8px 12px !important;
        text-align: center !important;
        font-size: 13px !important;
        height: auto !important;
        box-sizing: border-box !important;
    }
    /* Hide the empty third div */
    .footer-2 .container-right {
        display: none !important;
    }
    .footer-2 > a:not([href]) { display: none !important; }

    /* ---- Main dark footer: 2-column grid ---- */
    .footer {
        min-width: 0 !important;
        width: 100% !important;
        height: auto !important;
        padding: 20px 0 10px !important;
    }
    /* Make the inner 1030px wrapper a flex container */
    .footer > div[style] {
        width: 100% !important;
        box-sizing: border-box !important;
        display: flex !important;
        flex-wrap: wrap !important;
        padding: 0 10px !important;
    }
    /* Each named container = one column (50%) */
    .footer .container {
        float: none !important;
        width: 50% !important;
        height: auto !important;
        padding: 12px 8px !important;
        text-align: left !important;
        box-sizing: border-box !important;
        color: #fff;
    }
    /* Social bar and copyright — full width */
    .footer div[style*="float: left"][style*="width: 500px"],
    .footer div[style*="float:left"][style*="width:500px"] {
        float: none !important;
        width: 100% !important;
        text-align: center !important;
        height: auto !important;
        padding: 10px 0 !important;
    }
    .footer div[style*="width: 1030px"],
    .footer div[style*="width:1030px"] {
        width: 100% !important;
        font-size: 9px !important;
        padding: 4px 10px !important;
        box-sizing: border-box !important;
        float: none !important;
        height: auto !important;
    }

    /* ---- General ---- */
    img { max-width: 100%; height: auto; }

    div[style*="width: 1030px"],
    div[style*="width: 1006px"],
    div[style*="width: 940px"],
    div[style*="width: 746px"] {
        width: 100% !important;
        box-sizing: border-box !important;
    }
}

/* ── FACILITIES ACCORDION (mobile) ──────────────────────── */
@media (max-width: 767px) {
    /* Hide jQuery UI tab nav — JS builds accordion headers instead */
    #tabs .ui-tabs-nav,
    #tabs > ul { display: none !important; }

    /* Each fragment div becomes an accordion item */
    #tabs [id^="fragment-"] {
        display: block !important;
        border-bottom: 1px solid #ddd;
    }

    /* Clickable header */
    .accordion-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 13px 15px;
        background: #f5f3ec;
        cursor: pointer;
        font-size: 14px;
        text-transform: uppercase;
        letter-spacing: 0.06em;
        color: #5a5748;
        user-select: none;
    }
    .accordion-header::after {
        content: '▼';
        font-size: 10px;
        transition: transform 0.2s;
        flex-shrink: 0;
    }
    .accordion-header.open::after {
        transform: rotate(180deg);
    }

    /* Body content */
    .accordion-body {
        padding: 10px 0 15px;
        overflow: hidden;
    }
    .accordion-body img.facilities-image {
        width: 100% !important;
        height: auto !important;
        display: block !important;
        padding: 0 !important;
    }
    .accordion-body .facilities-right {
        float: none !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 10px 15px !important;
        box-sizing: border-box !important;
    }
    .accordion-body img[width="420"] {
        width: 100% !important;
        height: auto !important;
    }

    /* ── GALLERY 2-COLUMN GRID (mobile) ── */
    /* Accordion body becomes a flex grid */
    .gallery-container .accordion-body {
        display: flex !important;
        flex-wrap: wrap !important;
        padding: 0 !important;
        gap: 3px !important;
    }
    /* Every thumbnail link is a 2-col cell */
    .gallery-container .accordion-body a.thumbnail {
        flex: 0 0 calc(50% - 2px) !important;
        width: calc(50% - 2px) !important;
        display: block !important;
        overflow: hidden !important;
        line-height: 0 !important;   /* remove gap under img */
    }
    /* First thumbnail (large hero) spans full width */
    .gallery-container .accordion-body a.thumbnail:first-child {
        flex: 0 0 100% !important;
        width: 100% !important;
    }
    /* Strip desktop float divs — images fill the cell */
    .gallery-container .accordion-body a.thumbnail div {
        float: none !important;
        margin: 0 !important;
        width: 100% !important;
        line-height: 0 !important;
    }
    .gallery-container .accordion-body a.thumbnail img {
        width: 100% !important;
        height: 140px !important;      /* consistent tile height */
        object-fit: cover !important;
        display: block !important;
    }
    /* Hero image taller */
    .gallery-container .accordion-body a.thumbnail:first-child img {
        height: 220px !important;
    }
}

/* ── BOOKING BAR MOBILE ──────────────────────────────────── */
@media (max-width: 767px) {

    /* Hide the hero table that positions the booking bar overlay */
    .top-container > table { display: none !important; }
    .top-container td[valign="bottom"] { display: none !important; }

    /* Booking bar: standalone centered black box below hero */
    .mobile-booking-bar {
        background: #111 !important;
        color: #fff !important;
        padding: 22px 20px 24px !important;
        box-sizing: border-box !important;
        width: 100% !important;
        height: auto !important;
        border: none !important;
        text-align: center !important;
    }

    /* Flatten nested wrapper divs */
    .mobile-booking-bar > div,
    .mobile-booking-bar > div > div {
        width: 100% !important;
        height: auto !important;
        padding: 0 !important;
        margin: 0 !important;
        border: none !important;
        box-sizing: border-box !important;
        background: none !important;
    }

    /* Each field block: stack and center */
    .mobile-booking-bar div[style*="float: left"],
    .mobile-booking-bar div[style*="float:left"],
    .mobile-booking-bar div[style*="float: right"],
    .mobile-booking-bar div[style*="float:right"] {
        float: none !important;
        width: 100% !important;
        text-align: center !important;
        padding: 0 !important;
        margin: 0 0 12px !important;
        color: #fff !important;
        font-size: 14px !important;
    }

    /* "BOOK YOUR VILLA" heading */
    .mobile-booking-bar div[style*="float: left"]:first-of-type strong,
    .mobile-booking-bar div[style*="float:left"]:first-of-type strong {
        font-size: 20px !important;
        letter-spacing: 0.14em !important;
        font-family: 'Avenir Book', sans-serif !important;
        display: block !important;
        margin-bottom: 16px !important;
    }

    /* Arrival date label */
    .mobile-booking-bar div[style*="270px"] {
        line-height: 2 !important;
    }

    /* Style the dropdowns */
    .mobile-booking-bar select {
        /* inherits dark/gold style from global form[name="DateSelect"] select rule */
        margin: 4px 2px !important;
        font-size: 14px !important;
        padding: 6px 26px 6px 8px !important;
    }

    /* BOOK NOW button */
    .mobile-booking-bar button.button-4 {
        width: 100% !important;
        border-radius: 3px !important;
        height: 50px !important;
        font-size: 15px !important;
        letter-spacing: 0.12em !important;
        background-color: #f6a623 !important;
        border-color: #f6a623 !important;
        margin-top: 4px !important;
    }
    .mobile-booking-bar .book {
        font-size: 15px !important;
        letter-spacing: 0.12em !important;
    }
}