/*
 * Guest-facing booking styles shared by the homepage and the pages that use page_layout.php.
 * Brand purple #6d3bbf (hover #5a2fa3) is dark enough for white text to read outdoors on a phone.
 */

/* ---- One button style across the public site ------------------------------------------ */
.default-btn,
.default-btn.btn-bg-three,
.default-btn.btn-bg-two,
.book-btn,
.book-more-btn {
    background-color: #6d3bbf !important;
    border-color: #6d3bbf !important;
    color: #fff !important;
    border-radius: 12px;
    font-weight: 700;
}
.default-btn:hover,
.default-btn.btn-bg-three:hover,
.default-btn.btn-bg-two:hover,
.book-btn:hover,
.book-more-btn:hover {
    background-color: #5a2fa3 !important;
    border-color: #5a2fa3 !important;
    color: #fff !important;
}
.default-btn::before,
.default-btn::after { background-color: #5a2fa3 !important; }

.ls-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px; box-sizing: border-box;
    min-height: 48px; padding: 11px 18px; border-radius: 12px; border: 2px solid #6d3bbf;
    font: 700 15px/1.3 "Open Sans", sans-serif; text-decoration: none; cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease;
}
.ls-btn-primary, .ls-btn-primary:hover { background: #6d3bbf; color: #fff; }
.ls-btn-primary:hover { background: #5a2fa3; border-color: #5a2fa3; }
.ls-btn-secondary, .ls-btn-secondary:hover { background: #fff; border-color: #d9c6f5; color: #5a2fa3; }
.ls-btn-secondary:hover { background: #faf7ff; border-color: #b596ea; }
.ls-btn:focus-visible { outline: 3px solid #b596ea; outline-offset: 2px; }

/* ---- "What else will I pay" note beside a nightly rate ---------------------------------- */
.ls-extras-note { display: block; margin: 2px 0 0; font-size: 13px; line-height: 1.4; font-weight: 400; color: #6b6480; }

/* ---- Apartment page: nightly price and the availability button beside it ---------------- */
.ls-price-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; }
.ls-price-row .ls-price-figure { margin: 0; color: #2b2140; }
.ls-price-figure strong { font-size: 26px; font-weight: 700; }
.ls-price-figure > span { font-size: 15px; color: #6b6480; }
.ls-availability-note {
    display: none; margin: 12px 0 0; padding: 10px 12px; border-radius: 10px;
    background: #fff4f2; color: #9a2c1c; font-size: 14px; line-height: 1.5;
}

/* ---- Search results: dates, stay total and booking buttons ------------------------------ */
.ls-results-stay { margin: 4px 0 6px; font-size: 16px; font-weight: 600; color: #2b2140; }
.ls-results-stay a { margin-left: 8px; font-size: 14px; font-weight: 600; color: #5a2fa3; text-decoration: underline; }
.ls-result-price { margin: 14px 0 0; padding: 14px 0 0; border-top: 1px solid #e9defa; }
/* The theme gives every paragraph and link in a result card its own border and display. */
.room-item.reservation-room .content .ls-result-price p { margin: 0 !important; padding: 0 !important; border: 0 !important; }
.room-item .content .ls-result-actions a.ls-btn { display: flex; justify-content: center; text-align: center; }
.room-item .content .ls-result-actions a.ls-btn-primary,
.room-item .content .ls-result-actions a.ls-btn-primary:hover { color: #fff; }
.room-item .content .ls-result-actions a.ls-btn-secondary { color: #5a2fa3; }
.ls-result-nightly { font-size: 14px; color: #6b6480; }
.ls-result-total { font-size: 15px; color: #2b2140; }
.ls-result-total strong { font-size: 22px; font-weight: 700; }
.ls-result-actions { display: flex; flex-wrap: wrap; gap: 10px; margin: 14px 0 0; }
.ls-result-actions .ls-btn { flex: 1 1 150px; }

/* ---- Phone-only bar: the way to dates or WhatsApp is always on screen ------------------- */
.ls-mobile-bar { display: none; }
@media (max-width: 991px) {
    .ls-mobile-bar {
        display: flex; gap: 10px; position: fixed; left: 0; right: 0; bottom: 0; z-index: 900;
        padding: 10px 12px calc(10px + env(safe-area-inset-bottom)); background: #fff;
        box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.12);
    }
    .ls-mobile-bar .ls-btn { flex: 1 1 0; min-width: 0; padding: 10px 8px; font-size: 16px; white-space: nowrap; }
    body.ls-has-bar { padding-bottom: 76px; }
    /* Keep the dates form clear of the fixed header, and the back-to-top button clear of the bar. */
    body.ls-has-bar #booked { scroll-margin-top: 150px; }
    body.ls-has-bar .top-btn { bottom: 86px; }
}

/* ==== Homepage ============================================================================ */

.ls-home .section-title h2,
.ls-section-head h2 { font-size: 28px; line-height: 1.25; color: #2b2140; }
.ls-section-head { margin: 0 0 24px; }
.ls-section-head h2 { margin: 0 0 6px; }
.ls-section-head p { margin: 0; font-size: 15px; color: #6b6480; }

/* ---- Hero ------------------------------------------------------------------------------- */
.ls-hero { padding: 28px 0 36px; background: #faf7ff; }
.ls-hero-grid { display: grid; grid-template-columns: 1fr; gap: 28px; align-items: center; }
.ls-hero h1 { margin: 0 0 10px; font-size: 30px; line-height: 1.2; color: #2b2140; }
.ls-hero-lead { margin: 0 0 20px; font-size: 16px; line-height: 1.6; color: #4d4563; }
.ls-hero-image { display: none; }
.ls-hero-image img { display: block; width: 100%; height: auto; border-radius: 20px; }

.ls-search {
    display: grid; grid-template-columns: 1fr 1fr; gap: 12px; padding: 16px;
    border: 1px solid #e9defa; border-radius: 16px; background: #fff; box-shadow: 0 10px 30px rgba(43, 33, 64, 0.08);
}
.ls-search-field { min-width: 0; }
.ls-search-field:nth-of-type(3) { grid-column: 1 / -1; }
.ls-search label {
    display: block; margin: 0 0 4px; font-size: 11px; font-weight: 600; letter-spacing: 0.08em;
    text-transform: uppercase; color: #7a7290;
}
.ls-search input,
.ls-search select {
    display: block; width: 100%; box-sizing: border-box; height: 48px; padding: 0 12px;
    border: 1px solid #d9d3e6; border-radius: 10px; background: #fff;
    font: 600 15px/1.2 "Open Sans", sans-serif; color: #2b2140; -webkit-appearance: none; appearance: none;
}
.ls-search select {
    padding-right: 36px;
    background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%236b6480' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat right 14px center;
}
.ls-search input:focus,
.ls-search select:focus { outline: 3px solid #d9c6f5; outline-offset: 0; border-color: #6d3bbf; }
.ls-search-submit { grid-column: 1 / -1; width: 100%; min-height: 52px; font-size: 16px; }
.ls-search-error {
    display: none; grid-column: 1 / -1; margin: 0; padding: 10px 12px; border-radius: 10px;
    background: #fff4f2; color: #9a2c1c; font-size: 14px;
}

.ls-hero-points { display: flex; flex-wrap: wrap; gap: 8px; margin: 18px 0 0; padding: 0; list-style: none; }
.ls-hero-points li {
    padding: 6px 12px; border-radius: 999px; background: #fff; border: 1px solid #e9defa;
    font-size: 13px; font-weight: 600; color: #4d4563;
}

/* ---- Apartments --------------------------------------------------------------------------- */
.ls-apartments { padding: 40px 0 16px; }
.ls-apartment-grid { display: grid; grid-template-columns: 1fr; gap: 20px; }
.ls-apartment-card {
    display: flex; flex-direction: column; overflow: hidden; border: 1px solid #ece6f5; border-radius: 16px;
    background: #fff; box-shadow: 0 6px 20px rgba(43, 33, 64, 0.06);
}
.ls-apartment-photo { display: block; aspect-ratio: 4 / 3; background: #f1ecf9; }
.ls-apartment-photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
.ls-apartment-body { display: flex; flex-direction: column; flex: 1; padding: 16px; }
.ls-apartment-body h3 { margin: 0 0 4px; font-size: 20px; line-height: 1.3; }
.ls-apartment-body h3 a { color: #2b2140; text-decoration: none; }
.ls-apartment-facts { margin: 0 0 12px; font-size: 14px; color: #6b6480; }
.ls-apartment-price { margin: 0 0 14px; font-size: 15px; color: #4d4563; }
.ls-apartment-price strong { font-size: 22px; font-weight: 700; color: #2b2140; }
.ls-apartment-body .ls-btn { width: 100%; margin-top: auto; }

/* ---- Shorter sections on the homepage ------------------------------------------------------ */
.ls-home .pt-100 { padding-top: 48px; }
.ls-home .pb-70 { padding-bottom: 32px; }
.ls-home .pt-45 { padding-top: 20px; }
.ls-home .ability-area { margin-top: 24px; }
.ls-home .services-area-two { padding-top: 40px; }
.ls-home .services-area-two .services-card { margin-bottom: 16px; padding: 20px 16px; }

@media (max-width: 991px) {
    /* The header is fixed on small screens; keep the headline clear of it. */
    .ls-hero { padding-top: 84px; }
    #ls-home-search { scroll-margin-top: 96px; }
}

@media (max-width: 575px) {
    /* Apartments as a compact list: photo beside the details, so all nine fit in about two screens. */
    .ls-apartment-grid { gap: 14px; }
    .ls-apartment-card { flex-direction: row; }
    .ls-apartment-photo { flex: 0 0 38%; aspect-ratio: auto; }
    .ls-apartment-body { padding: 12px; }
    .ls-apartment-body h3 { font-size: 17px; }
    .ls-apartment-facts { margin-bottom: 8px; font-size: 13px; }
    .ls-apartment-price { margin-bottom: 10px; font-size: 13px; }
    .ls-apartment-price strong { font-size: 18px; }
    .ls-apartment-price .ls-extras-note { font-size: 12px; }
    .ls-apartment-body .ls-btn { min-height: 44px; padding: 8px 12px; font-size: 14px; }
}

@media (max-width: 575px) {
    /* Amenities as a compact two-column grid of icon and name; the long descriptions stay on larger screens. */
    .ls-home .services-area-two .row > [class*="col-"] { flex: 0 0 50%; max-width: 50%; padding-left: 8px; padding-right: 8px; }
    .ls-home .services-area-two .services-card { min-height: 0; padding: 16px 10px; text-align: center; }
    .ls-home .services-area-two .services-card p { display: none; }
    .ls-home .services-area-two .services-card h3 { margin: 8px 0 0; font-size: 15px; line-height: 1.3; }
    .ls-home .services-area-two .services-card i { font-size: 30px; line-height: 1; }
}

@media (min-width: 576px) {
    .ls-apartment-grid { grid-template-columns: 1fr 1fr; }
    .ls-search { grid-template-columns: 1fr 1fr 1fr; }
    .ls-search-field:nth-of-type(3) { grid-column: auto; }
}
@media (min-width: 992px) {
    /* The desktop menu floats over the top of the page. */
    .ls-hero { padding: 128px 0 64px; }
    .ls-hero-grid { grid-template-columns: 1.05fr 0.95fr; gap: 48px; }
    .ls-hero h1 { font-size: 44px; }
    .ls-hero-lead { font-size: 18px; }
    .ls-hero-image { display: block; }
    .ls-apartments { padding: 64px 0 24px; }
    .ls-apartment-grid { grid-template-columns: repeat(3, 1fr); gap: 24px; }
    .ls-home .section-title h2,
    .ls-section-head h2 { font-size: 34px; }
}