/* Write your code here */
/* ////////////////// select 2 css //////////////// */
.select2-dropdown {
    border: 0 !important;
    margin-top: 8px !important;
    border-radius: 5px !important;
    box-shadow: 0 3px 9px rgba(50, 50, 9, 0.05), 6px 4px 19px rgb(115 103 240 / 20%)
}

.select2-search--dropdown {
    padding: 10px 10px !important;
    border-color: #ced4da !important;
}

.selection {
    width: 100%;
}

.select2-container--default .select2-search--dropdown .select2-search__field {
    border-color: #ced4da !important;
    padding: 10px 20px;
}

.select2-results__option.select2-results__option--selected,
.select2-results__option--selectable,
.select2-container--default .select2-results__option--disabled {
    padding: 12px 14px !important;
    border-bottom: 1px solid #eee;
}

.select2-results__option.select2-results__message {
    text-align: center !important;
    padding: 12px 14px !important;
}

.select2-container--default .select2-results>.select2-results__options::-webkit-scrollbar {
    width: 8px;
    border-radius: 5px;
}

.select2-container--default .select2-results>.select2-results__options::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 5px;
}

.select2-container--default .select2-results>.select2-results__options::-webkit-scrollbar-thumb {
    background: #ddd;
}

.select2-container--default .select2-results>.select2-results__options::-webkit-scrollbar-thumb:hover {
    background: #ddd;
}

.select2-container--default .select2-selection--single .select2-selection__arrow b {
    display: none;
}

.selec2-container:has(.select2-selection--single) {
    width: 100% !important;
}

.select2-container--default .select2-selection--single .select2-selection__arrow:after {
    position: absolute;
    right: 10px;
    top: 3px;
    content: "\f107";
    font-family: "Line Awesome Free";
    font-weight: 900;
    transition: .3s;
}

.select2-container .select2-selection--single .select2-selection__rendered {
    line-height: 32px !important;
}

.select2-container--default .select2-selection--single {
    border-color: hsl(var(--border-color)) !important;
    border-width: 1px !important;
    border-radius: .375rem !important;
    padding: .375rem .75rem !important;
    height: 48px !important;
    background-color: hsl(var(--white)/.5) !important;
}

.select2-container--default .select2-selection--single .select2-selection__arrow {
    top: 8px !important;
}

.select2-container--default.select2-container--open .select2-selection--single .select2-selection__arrow:after {
    transform: rotate(-180deg);
}

.select2-results__option:last-child {
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
}

.select2-results__option:first-child {
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
}

.select2-results__option.select2-results__option--selected,
.select2-container--default .select2-results__option--highlighted.select2-results__option--selectable {
    background-color: #f1f1f1 !important;
    color: #000 !important;
}

.select2-container--default .select2-search--dropdown .select2-search__field:focus {
    border-color: hsl(var(--base)) !important;
    box-shadow: 0 0 25px rgba(115, 103, 240 0.071) !important;
    outline: 0 !important;
    border-radius: 4px;
}

.select2-dropdown .country-flag {
    width: 25px;
    height: 25px;
    border-radius: 8px;
}

.select2-dropdown .gateway-title {
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 0px !important;
}

.select2-dropdown .gateway-subtitle {
    font-size: 12px;
    margin-bottom: 0px !important;
}

.select2-container--open .select2-selection.select2-selection--single,
.select2-container--open .select2-selection.select2-selection--multiple {
    border-color: hsl(var(--base)) !important;
    border-radius: .375rem !important;
}

/* =====================================================================
   ART PLAZA — Boutique editorial redesign (CSS only)
   Tenant: artplaza.ospitus.com · template: oasis · 2026-09-29
   No HTML/JS changes. Loaded via custom.css (before the inline <style>
   blocks in app.blade.php), so conflicting rules use "html body"
   specificity + !important to win over the 2026-08-20 design passes.
   ===================================================================== */

html:root {
    --ap-bg: #F5F3EE;
    --ap-surface: #FFFFFF;
    --ap-ink: #111111;
    --ap-ink-2: #252525;
    --ap-muted: #77736D;
    --ap-line: #E9E4DC;
    --ap-line-2: #D8D1C7;
    --ap-sand: #E9E4DC;
    --ap-accent: #2F5BEA;
    --ap-accent-d: #2248C8;
    --ap-serif: "Cormorant Garamond", "Playfair Display", Georgia, serif;
    --ap-sans: "Inter", "Helvetica Neue", Arial, sans-serif;
    --ap-shadow: 0 1px 2px rgba(17, 17, 17, .04), 0 12px 32px -18px rgba(17, 17, 17, .14);
    --ap-shadow-hover: 0 2px 4px rgba(17, 17, 17, .05), 0 22px 44px -22px rgba(17, 17, 17, .22);
    --ap-ease: cubic-bezier(.22, .61, .36, 1);
    --ap-r-lg: 24px;
    --ap-r-md: 18px;
    --ap-r-sm: 12px;
    --heading-font: var(--ap-serif) !important;
    --body-font: var(--ap-sans) !important;
}

/* ---------- 0. Base ------------------------------------------------- */
html body {
    background-color: var(--ap-bg);
    color: var(--ap-muted);
    font-family: var(--ap-sans);
    font-size: 15px;
    line-height: 1.7;
    -webkit-font-smoothing: antialiased;
    overflow-x: clip;
}
html body h1, html body h2, html body h3, html body h4, html body h5, html body h6 {
    font-family: var(--ap-serif);
    color: var(--ap-ink);
    font-weight: 500;
    letter-spacing: -.01em;
}
html body a { transition: color .3s var(--ap-ease); }
html body .section-bg { background-color: transparent !important; }
html body .py-100 { padding-top: 104px !important; padding-bottom: 104px !important; }
@media (min-width: 1400px) {
    html body .container { max-width: 1320px; }
}

/* ---------- 1. Buttons ---------------------------------------------- */
html body .btn.btn--base,
html body .btn.btn--base-two {
    border-radius: 999px !important;
    padding: 13px 28px;
    font-family: var(--ap-sans);
    font-size: 14px;
    font-weight: 500;
    letter-spacing: .01em;
    line-height: 1.2;
    box-shadow: none !important;
    transition: background-color .3s var(--ap-ease), color .3s var(--ap-ease), transform .3s var(--ap-ease), border-color .3s var(--ap-ease) !important;
}
html body .btn.btn--base {
    background-color: var(--ap-accent) !important;
    border: 1px solid var(--ap-accent) !important;
    color: #fff !important;
}
html body .btn.btn--base:hover,
html body .btn.btn--base:focus-visible {
    background-color: var(--ap-accent-d) !important;
    border-color: var(--ap-accent-d) !important;
    transform: translateY(-1px);
    box-shadow: none !important;
}
html body .btn.btn--base-two {
    background-color: var(--ap-ink) !important;
    border: 1px solid var(--ap-ink) !important;
    color: #fff !important;
}
html body .btn.btn--base-two:hover {
    background-color: var(--ap-accent) !important;
    border-color: var(--ap-accent) !important;
    transform: translateY(-1px);
}
html body .facilities .text-center > .btn.btn--base {
    background-color: transparent !important;
    color: var(--ap-ink) !important;
    border: 1px solid var(--ap-line-2) !important;
}
html body .facilities .text-center > .btn.btn--base:hover {
    background-color: var(--ap-ink) !important;
    border-color: var(--ap-ink) !important;
    color: #fff !important;
}

/* ---------- 2. Section headings (eyebrow + serif title) ------------- */
html body .section-heading { margin-bottom: 56px; }
html body .section-heading__subtitle {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    font-family: var(--ap-sans) !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    letter-spacing: .2em !important;
    text-transform: uppercase;
    color: var(--ap-muted) !important;
    margin-bottom: 14px;
}
html body .section-heading__subtitle::before {
    content: "";
    width: 28px;
    height: 1px;
    background: var(--ap-line-2);
}
html body .section-heading__title {
    font-family: var(--ap-serif) !important;
    font-weight: 500 !important;
    font-size: clamp(2.1rem, 1.4rem + 2.2vw, 3.4rem) !important;
    line-height: 1.08 !important;
    color: var(--ap-ink) !important;
    padding-bottom: 0 !important;
    margin-bottom: 18px;
}
html body .section-heading__title::before,
html body .section-heading__title::after { display: none !important; }
html body .section-heading__desc {
    color: var(--ap-muted);
    font-size: 16px;
    line-height: 1.75;
    max-width: 620px;
    margin-left: auto;
    margin-right: auto;
}
html body .section-heading.style-left .section-heading__desc { margin-left: 0; }

/* ---------- 3. Top strip -------------------------------------------- */
html body .header-top {
    background: transparent !important;
    border-bottom: 1px solid var(--ap-line);
    font-size: 12.5px;
}
html body .header-top .contact-list__link,
html body .header-top .account-list__link,
html body .header-top .contact-list__item-icon,
html body .header-top .account-list__link .icon {
    color: var(--ap-muted) !important;
    font-size: 12.5px !important;
    letter-spacing: .02em;
}
html body .header-top .contact-list__link:hover,
html body .header-top .account-list__link:hover { color: var(--ap-ink) !important; }

/* ---------- 4. Header: floating glass pill -------------------------- */
/* Glass lives on ::before so the header never becomes a containing
   block for the fixed mobile offcanvas (backdrop-filter would do that). */
html body .header,
html body .header.fixed-header {
    width: min(1280px, calc(100% - 48px)) !important;
    margin: 16px auto 0 !important;
    left: 0;
    right: 0;
    border-radius: 999px !important;
    background: transparent !important;
    box-shadow: none !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    isolation: isolate;
    transition: top .4s var(--ap-ease), background-color .4s var(--ap-ease) !important;
}
html body .header::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    border-radius: inherit;
    background: rgba(255, 255, 255, .72);
    border: 1px solid rgba(17, 17, 17, .06);
    -webkit-backdrop-filter: blur(18px) saturate(140%);
    backdrop-filter: blur(18px) saturate(140%);
    box-shadow: 0 10px 30px -20px rgba(17, 17, 17, .25);
    transition: background-color .4s var(--ap-ease), border-color .4s var(--ap-ease), box-shadow .4s var(--ap-ease);
    pointer-events: none;
}
html body .header .container { max-width: none; padding-left: 32px; padding-right: 20px; }
html body .header .navbar { padding-top: 10px !important; padding-bottom: 10px !important; }
html body .header .navbar-brand.logo img { max-height: 34px; width: auto; transition: filter .4s var(--ap-ease); }
html body .header .nav-menu .nav-link {
    font-family: var(--ap-sans) !important;
    font-size: 13.5px !important;
    font-weight: 400 !important;
    letter-spacing: .02em;
    color: var(--ap-ink-2) !important;
    padding: 8px 16px !important;
    transition: color .3s var(--ap-ease), opacity .3s var(--ap-ease);
}
html body .header .nav-menu .nav-link:hover,
html body .header .nav-menu .nav-item.active > .nav-link { color: var(--ap-accent) !important; }
html body .header .nav-menu .nav-link::before,
html body .header .nav-menu .nav-link::after { display: none !important; }
html body .header .booking-btn { margin-left: 18px; }
html body .header .booking-btn .btn { padding: 11px 24px !important; font-size: 13.5px !important; }

html body .header.fixed-header {
    position: sticky;
    top: 12px !important;
    animation: none !important;
}
html body .header.fixed-header::before {
    background: rgba(255, 255, 255, .86);
    border-color: rgba(17, 17, 17, .08);
    box-shadow: 0 16px 40px -24px rgba(17, 17, 17, .35);
}

@media (min-width: 992px) {
    html body:has(.banner-section) .header-top {
        position: absolute !important;
        top: 0; left: 0; right: 0;
        z-index: 20;
        border-bottom: 0;
    }
    html body:has(.banner-section) .header-top .container { max-width: min(1280px, calc(100% - 48px)); }
    html body:has(.banner-section) .header-top .contact-list__link,
    html body:has(.banner-section) .header-top .account-list__link,
    html body:has(.banner-section) .header-top .contact-list__item-icon,
    html body:has(.banner-section) .header-top .account-list__link .icon { color: rgba(255, 255, 255, .78) !important; }
    html body:has(.banner-section) .header-top .contact-list__link:hover,
    html body:has(.banner-section) .header-top .account-list__link:hover { color: #fff !important; }

    html body:has(.banner-section) .header:not(.fixed-header) {
        position: absolute !important;
        top: 46px;
        margin-top: 0 !important;
        z-index: 30;
    }
    html body:has(.banner-section) .header:not(.fixed-header)::before {
        background: rgba(255, 255, 255, .10);
        border-color: rgba(255, 255, 255, .26);
        box-shadow: none;
    }
    html body:has(.banner-section) .header:not(.fixed-header) .nav-menu .nav-link { color: rgba(255, 255, 255, .92) !important; }
    html body:has(.banner-section) .header:not(.fixed-header) .nav-menu .nav-link:hover { color: #fff !important; opacity: .7; }
    html body:has(.banner-section) .header:not(.fixed-header) .navbar-brand.logo img { filter: brightness(0) invert(1); }
    html body:has(.banner-section) .header:not(.fixed-header) .booking-btn .btn {
        background-color: #fff !important;
        border-color: #fff !important;
        color: var(--ap-ink) !important;
    }
    html body:has(.banner-section) .header:not(.fixed-header) .booking-btn .btn:hover {
        background-color: var(--ap-accent) !important;
        border-color: var(--ap-accent) !important;
        color: #fff !important;
    }
    html body:has(.banner-section) .header.fixed-header {
        position: fixed !important;
        top: 12px !important;
        z-index: 999 !important;
    }
}

/* ---------- 5. Hero ------------------------------------------------- */
html body .banner-section.bg-img {
    min-height: 88vh;
    min-height: 88svh;
    display: flex;
    align-items: flex-end;
    padding: 190px 0 0 !important;
    background-size: cover !important;
    background-position: center !important;
    overflow: visible !important;
    margin-bottom: 0;
}
html body .banner-section::before,
html body .banner-section.bg-img::before {
    background: rgba(18, 16, 13, .38) !important;
    z-index: 0 !important;
}
html body .banner-section.bg-img::after { display: none !important; }
html body .banner-section > .container { position: relative; z-index: 2; }
html body .banner-section .row { row-gap: 0 !important; justify-content: flex-start !important; align-items: flex-end !important; }
html body .banner-section .row > .col-xl-8 { flex: 0 0 100%; max-width: 820px; width: 100%; }
html body .banner-content { padding-bottom: 72px; }
html body .banner-content__title {
    font-family: var(--ap-serif) !important;
    font-weight: 500 !important;
    font-size: clamp(2.8rem, 1.4rem + 3.6vw, 5rem) !important;
    line-height: 1.02 !important;
    letter-spacing: -.02em;
    color: #fff !important;
    margin-bottom: 24px !important;
    max-width: 11em;
}
html body .banner-content__desc {
    color: rgba(255, 255, 255, .84) !important;
    font-size: 16px !important;
    line-height: 1.75 !important;
    max-width: 440px;
    margin-bottom: 0;
}

/* ---------- 6. Booking panel (overlaps hero → next section) --------- */
html body .banner-section .row > .col-xl-4 {
    flex: 0 0 100%;
    max-width: 100%;
    width: 100%;
    position: relative;
    z-index: 5;
    margin-bottom: -50px;
}
html body .booking-filter {
    display: flex;
    align-items: center;
    gap: 28px;
    padding: 18px 18px 18px 32px !important;
    background: rgba(255, 255, 255, .88) !important;
    -webkit-backdrop-filter: blur(20px) saturate(140%);
    backdrop-filter: blur(20px) saturate(140%);
    border: 1px solid rgba(255, 255, 255, .7) !important;
    border-radius: var(--ap-r-lg) !important;
    box-shadow: 0 2px 6px rgba(17, 17, 17, .04), 0 30px 60px -30px rgba(17, 17, 17, .35) !important;
    overflow: visible !important;
}
html body .booking-filter__title {
    flex: 0 0 auto;
    margin: 0 !important;
    font-family: var(--ap-serif) !important;
    font-weight: 500 !important;
    font-size: 1.55rem !important;
    line-height: 1.1;
    color: var(--ap-ink) !important;
    max-width: 120px;
}
html body .booking-filter .t-datepicker-form {
    flex: 1 1 auto;
    display: grid;
    grid-template-columns: minmax(0, 2.1fr) minmax(0, 1fr) minmax(0, 1fr) auto;
    gap: 10px;
    align-items: stretch;
    border-radius: 0 !important;
    box-shadow: none !important;
    margin: 0;
}
html body .booking-filter .t-datepicker-form > * { margin: 0 !important; min-width: 0; }
html body .booking-filter .t-datepicker,
html body .booking-filter .form-group {
    background: #fff;
    border: 1px solid var(--ap-line) !important;
    border-radius: 14px !important;
    box-shadow: none !important;
    min-height: 58px;
    transition: border-color .3s var(--ap-ease), box-shadow .3s var(--ap-ease);
}
html body .booking-filter .t-datepicker:hover,
html body .booking-filter .form-group:hover { border-color: var(--ap-line-2) !important; box-shadow: none !important; }
html body .booking-filter .form-group:focus-within { border-color: var(--ap-accent) !important; box-shadow: 0 0 0 3px rgba(47, 91, 234, .12) !important; }
html body .booking-filter .form-group.mb-0.pt-3 {
    padding: 0 !important;
    background: transparent;
    border: 0 !important;
    display: flex;
}
html body .booking-filter .form-group.mb-0.pt-3:hover,
html body .booking-filter .form-group.mb-0.pt-3:focus-within { box-shadow: none !important; }
html body .booking-filter .form-group.mb-0.pt-3 .btn {
    height: 100%;
    min-height: 58px;
    padding: 0 30px !important;
    border-radius: 14px !important;
    white-space: nowrap;
}
html body .booking-filter .form--control {
    height: 56px;
    border: 0 !important;
    border-radius: 14px !important;
    background: transparent !important;
    padding: 0 44px 0 18px !important;
    font-size: 14px !important;
    color: var(--ap-ink) !important;
    box-shadow: none !important;
}
html body .booking-filter .form--control::placeholder { color: var(--ap-muted); opacity: 1; }
html body .booking-filter .calendar-icon { right: 16px; color: var(--ap-muted); font-size: 18px; }
html body .booking-filter .t-datepicker { display: flex; overflow: visible; }
html body .booking-filter .t-check-in,
html body .booking-filter .t-check-out { flex: 1 1 50%; min-width: 0; }
html body .booking-filter .t-check-in { border-right: 1px solid var(--ap-line); }
html body .booking-filter .t-dates {
    padding: 8px 18px !important;
    height: 100%;
    min-height: 56px;
    display: flex !important;
    flex-direction: column;
    justify-content: center;
    cursor: pointer;
}
html body .booking-filter .t-date-info-title {
    font-family: var(--ap-sans);
    font-size: 11px !important;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--ap-muted) !important;
}

/* ---------- 7. About / story --------------------------------------- */
html body .about { padding-top: 168px !important; }
html body .about::before { display: none !important; }
html body .about > .container > .row {
    background: var(--ap-surface);
    border: 1px solid var(--ap-line);
    border-radius: var(--ap-r-lg);
    box-shadow: var(--ap-shadow);
    padding: 20px;
    margin: 0;
    --bs-gutter-x: 0;
}
html body .about-thumb { border-radius: var(--ap-r-md); overflow: hidden; }
@media (min-width: 992px) {
    html body .about > .container > .row { flex-wrap: wrap !important; align-items: flex-start !important; }
}
html body .about-thumb img,
html body .about .about-thumb img {
    width: 100%;
    height: auto;
    border-radius: var(--ap-r-md) !important;
    transition: transform .6s var(--ap-ease);
}
html body .about-thumb:hover img { transform: scale(1.03); }
html body .about-content { padding: 36px 40px 36px 48px; }
html body .about-content .section-heading { margin-bottom: 0; text-align: left; }
html body .about-content .section-heading__desc,
html body .about-content .section-heading__desc * {
    font-family: var(--ap-sans) !important;
    color: var(--ap-muted) !important;
    font-size: 15px !important;
    line-height: 1.8 !important;
}
html body .about-content .section-heading__desc b,
html body .about-content .section-heading__desc b *,
html body .about-content .section-heading__desc [style*="bolder"],
html body .about-content .section-heading__desc [style*="bolder"] * {
    color: var(--ap-ink) !important;
    font-weight: 600 !important;
    font-size: 11.5px !important;
    letter-spacing: .16em;
    text-transform: uppercase;
}
html body .about-content .section-heading__desc .la { color: var(--ap-accent) !important; margin-right: 6px; }
html body .about-content .section-heading__desc::after {
    content: "";
    display: block;
    width: 56px;
    height: 1px;
    background: var(--ap-accent);
    margin-top: 28px;
}

/* ---------- 8. Services → brochure cards --------------------------- */
html body .service .row.g-2 { --bs-gutter-x: 16px; --bs-gutter-y: 16px; }
html body .service-item,
html body .service .row > [class*="col-"]:nth-child(4n+1) .service-item {
    background: var(--ap-surface) !important;
    border: 1px solid var(--ap-line);
    border-radius: var(--ap-r-md) !important;
    box-shadow: none !important;
    padding: 32px 22px 28px !important;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 16px;
    min-height: 168px;
    height: 100%;
    text-align: center;
}
html body .service-item.op-visible { transition: opacity .5s var(--ap-ease), transform .5s var(--ap-ease), border-color .3s var(--ap-ease), box-shadow .3s var(--ap-ease) !important; }
html body .service-item.op-visible:hover,
html body .service-item:hover {
    transform: translateY(-3px) !important;
    border-color: var(--ap-line-2);
    box-shadow: var(--ap-shadow-hover) !important;
}
html body .service-item__icon {
    margin: 0 !important;
    width: 64px;
    height: 64px;
    border-radius: 50%;
    border: 1px solid var(--ap-line);
    background: var(--ap-bg);
    display: grid;
    place-items: center;
    transition: border-color .3s var(--ap-ease) !important;
}
html body .service-item:hover .service-item__icon { transform: none !important; border-color: var(--ap-line-2); }
html body .service-item__icon img {
    width: 30px !important;
    height: 30px !important;
    object-fit: contain;
    filter: grayscale(1) contrast(1.15) brightness(.55);
    opacity: .9;
}
html body .service-item__title,
html body .service .row > [class*="col-"]:nth-child(4n+1) .service-item .service-item__title {
    font-family: var(--ap-sans) !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    letter-spacing: .01em;
    line-height: 1.4;
    color: var(--ap-ink-2) !important;
    margin: 0 !important;
}
html body .service-item:hover .service-item__title { color: var(--ap-ink) !important; }

/* ---------- 9. Facilities → editorial image cards ------------------ */
html body .facilities { padding-top: 40px !important; }
html body .facility-item {
    background: var(--ap-surface);
    border: 1px solid var(--ap-line);
    border-radius: var(--ap-r-lg);
    padding: 12px 12px 22px;
    box-shadow: none;
    height: 100%;
    transition: transform .35s var(--ap-ease), box-shadow .35s var(--ap-ease), border-color .35s var(--ap-ease);
}
html body .facility-item:hover { transform: translateY(-3px); box-shadow: var(--ap-shadow-hover); border-color: var(--ap-line-2); }
html body .facility-item__thumb { border-radius: var(--ap-r-md); overflow: hidden; margin-bottom: 20px; }
html body .facility-item__thumb img {
    width: 100%;
    height: auto !important;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border-radius: var(--ap-r-md);
    transition: transform .6s var(--ap-ease);
}
html body .facility-item:hover .facility-item__thumb img { transform: scale(1.03); }
html body .facility-item__title { margin: 0; padding: 0 10px; font-size: 1.6rem !important; font-weight: 500; }
html body .facility-item__title .link { color: var(--ap-ink) !important; }
html body .facility-item__title .link:hover { color: var(--ap-accent) !important; }
html body .facility-item__thumb-link::before,
html body .facility-item__thumb-link::after { display: none !important; }

/* ---------- 10. Testimonials --------------------------------------- */
html body .testimonial-section::after { display: none !important; }
html body .testimonial-item-slider,
html body .testimonial-slider {
    background: var(--ap-surface);
    border: 1px solid var(--ap-line);
    border-radius: var(--ap-r-lg);
    padding: 56px clamp(24px, 6vw, 96px) !important;
}
html body .testimonial-slider:not(:has(.slick-slide)) { display: none; }
html body .testimonial-item { text-align: left; border-radius: 0 !important; background: transparent; box-shadow: none; }
html body .testimonial-item__desc {
    font-family: var(--ap-serif) !important;
    font-style: normal !important;
    font-weight: 500 !important;
    font-size: clamp(1.35rem, 1rem + 1.2vw, 2rem) !important;
    line-height: 1.4 !important;
    color: var(--ap-ink) !important;
}
html body .testimonial-item__desc::before {
    content: "\201C";
    display: block;
    font-family: var(--ap-serif);
    font-size: 72px;
    line-height: .6;
    color: var(--ap-line-2);
    margin-bottom: 16px;
}
html body .testimonial-item__name { font-family: var(--ap-sans) !important; font-size: 14px !important; font-weight: 600 !important; color: var(--ap-ink) !important; }
html body .testimonial-item__designation,
html body .testimonial-item__date { font-size: 12.5px !important; color: var(--ap-muted) !important; font-weight: 400 !important; }
html body .testimonial-item__date::before { background-color: var(--ap-line-2) !important; height: 1px !important; }
html body .testimonial-item img { border-radius: 50%; }
html body .testimonial-section .slick-arrow {
    width: 44px; height: 44px;
    border-radius: 50%;
    border: 1px solid var(--ap-line-2);
    background: transparent;
    color: var(--ap-ink);
}
html body .testimonial-section .slick-dots li button { background: var(--ap-line-2); }
html body .testimonial-section .slick-dots li.slick-active button { background: var(--ap-ink); }

/* ---------- 11. Room cards (rooms pages) -------------------------- */
html body .room-card {
    background: var(--ap-surface);
    border: 1px solid var(--ap-line);
    border-radius: var(--ap-r-lg) !important;
    padding: 10px;
    box-shadow: none;
    height: 100%;
    overflow: hidden;
    transition: transform .35s var(--ap-ease), box-shadow .35s var(--ap-ease), border-color .35s var(--ap-ease);
}
html body .room-card:hover { transform: translateY(-3px); box-shadow: var(--ap-shadow-hover); border-color: var(--ap-line-2); }
html body .room-card__thumb { border-radius: var(--ap-r-md); overflow: hidden; position: relative; }
html body .room-card__thumb::before { background: rgba(17, 17, 17, .12) !important; opacity: 0; transition: opacity .35s var(--ap-ease); }
html body .room-card:hover .room-card__thumb::before { opacity: 1; }
html body .room-card__thumb img {
    width: 100%;
    height: auto !important;
    aspect-ratio: 3 / 2;
    object-fit: cover;
    transition: transform .6s var(--ap-ease);
}
html body .room-card:hover .room-card__thumb img { transform: scale(1.03); }
html body .room-card__info { z-index: 2; }
html body .room-card__capacity {
    background: rgba(255, 255, 255, .88);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    border-radius: 999px;
    padding: 6px 14px;
    color: var(--ap-ink);
    font-size: 12px;
}
html body .room-card__capacity * { color: var(--ap-ink) !important; }
html body .room-card__content { padding: 20px 14px 12px; }
html body .room-card__title { font-size: 1.6rem !important; font-weight: 500; margin-bottom: 4px; }
html body .room-card__title .link { color: var(--ap-ink) !important; }
html body .room-card__title .link:hover { color: var(--ap-accent) !important; }
html body .room-card__price .text,
html body .room-card__price .text--base {
    font-family: var(--ap-sans);
    font-size: 15px !important;
    font-weight: 600;
    color: var(--ap-ink) !important;
}
html body .room-card__amenities,
html body .room-card__amenities * { font-size: 12.5px; color: var(--ap-muted); }

/* ---------- 12. Footer --------------------------------------------- */
html body .footer {
    background-color: #151515 !important;
    margin-top: 40px;
}
html body .footer__inner { padding-top: 88px; padding-bottom: 56px; }
html body .footer-item__title {
    font-family: var(--ap-sans) !important;
    font-size: 11.5px !important;
    font-weight: 600 !important;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: #fff !important;
    margin-bottom: 24px !important;
}
html body .footer-item__title::before,
html body .footer-item__title::after { display: none !important; }
html body .footer-menu__link,
html body .footer-info__text,
html body .footer-info__icon {
    color: rgba(255, 255, 255, .62) !important;
    font-size: 14px !important;
}
html body .footer-menu__link:hover,
html body a.footer-info__text:hover { color: #fff !important; }
html body .footer-menu__item { margin-bottom: 10px; }
html body .footer-menu__link::before { display: none !important; }
html body .footer-info { gap: 14px; margin-bottom: 14px; }
html body .footer-newsletter-form .input-group {
    background: rgba(255, 255, 255, .06);
    border: 1px solid rgba(255, 255, 255, .14);
    border-radius: 999px;
    padding: 5px;
    flex-wrap: nowrap;
}
html body .footer-newsletter-form .form--control {
    background: transparent !important;
    border: 0 !important;
    color: #fff !important;
    padding: 0 18px !important;
    height: 46px;
    font-size: 14px;
    box-shadow: none !important;
}
html body .footer-newsletter-form .form--control { min-width: 0; }
html body .footer-newsletter-form .form--control::placeholder { color: rgba(255, 255, 255, .45); }
html body .footer-newsletter-form .btn {
    border-radius: 999px !important;
    padding: 0 22px !important;
    height: 46px;
}
html body .social-list { gap: 10px; margin-top: 28px; }
html body .social-list__link {
    width: 40px !important;
    height: 40px !important;
    border-radius: 50% !important;
    border: 1px solid rgba(255, 255, 255, .16) !important;
    background: transparent !important;
    color: rgba(255, 255, 255, .78) !important;
    font-size: 14px !important;
    display: grid !important;
    place-items: center;
    transition: background-color .3s var(--ap-ease), color .3s var(--ap-ease), border-color .3s var(--ap-ease) !important;
}
html body .social-list__link:hover { background: #fff !important; color: var(--ap-ink) !important; border-color: #fff !important; }
html body .footer-bottom,
html body .footer-bottom.section-bg {
    background: #151515 !important;
    border-top: 1px solid rgba(255, 255, 255, .08);
}
html body .bottom-footer-text,
html body .bottom-footer-text * { color: rgba(255, 255, 255, .5) !important; font-size: 12.5px; letter-spacing: .02em; }

/* ---------- 13. Inner pages: header sits on ivory ----------------- */
html body:not(:has(.banner-section)) .main-wrapper > section:first-child { padding-top: 72px !important; }
html body .breadcumb { border-radius: 0 0 var(--ap-r-lg) var(--ap-r-lg); overflow: hidden; }

/* ---------- 14. Responsive ---------------------------------------- */
@media (max-width: 1199px) {
    html body .booking-filter { flex-direction: column; align-items: stretch; gap: 16px; padding: 22px !important; }
    html body .booking-filter__title { max-width: none; }
    html body .booking-filter .t-datepicker-form { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr) auto; }
}
@media (max-width: 991px) {
    html body .py-100 { padding-top: 72px !important; padding-bottom: 72px !important; }
    html body .header,
    html body .header.fixed-header {
        width: calc(100% - 24px) !important;
        margin: 12px auto 0 !important;
        border-radius: 22px !important;
        padding: 0 !important;
    }
    html body .header .container { padding-left: 18px; padding-right: 12px; }
    html body .header .navbar-toggler { color: var(--ap-ink); font-size: 26px; border: 0; box-shadow: none; }
    html body .header .booking-btn { margin-left: 0; }
    html body .banner-section.bg-img { min-height: 88svh; padding-top: 140px !important; }
    html body .banner-content { padding-bottom: 40px; }
    html body .booking-filter .t-datepicker-form { grid-template-columns: 1fr 1fr; }
    html body .booking-filter .t-datepicker,
    html body .booking-filter .form-group.mb-0.pt-3 { grid-column: 1 / -1; }
    html body .about { padding-top: 140px !important; }
    html body .about-content { padding: 32px 12px 12px; }
    html body .offcanvas-nav { background: var(--ap-bg) !important; }
    html body .offcanvas-nav .nav-link { font-size: 20px !important; font-family: var(--ap-serif) !important; color: var(--ap-ink) !important; }
}
@media (max-width: 767px) {
    html body .section-heading { margin-bottom: 36px; }
    html body .banner-section .row > .col-xl-4 { margin-bottom: -96px; }
    html body .about { padding-top: 150px !important; }
    html body .about > .container > .row { padding: 12px; }
    html body .service-item,
    html body .service .row > [class*="col-"]:nth-child(4n+1) .service-item { padding: 24px 12px 20px !important; min-height: 140px; gap: 12px; }
    html body .service-item__icon { width: 54px; height: 54px; }
    html body .service-item__title { font-size: 13px !important; }
    html body .footer__inner { padding-top: 64px; }
}
@media (max-width: 575px) {
    html body .booking-filter { padding: 16px !important; border-radius: 20px !important; }
    html body .booking-filter .t-datepicker-form { grid-template-columns: 1fr; }
    html body .booking-filter .t-datepicker { flex-direction: column; }
    html body .booking-filter .t-check-in { border-right: 0; border-bottom: 1px solid var(--ap-line); }
    html body .banner-section .row > .col-xl-4 { margin-bottom: -150px; }
    html body .about { padding-top: 190px !important; }
}
@media (prefers-reduced-motion: reduce) {
    html body * { transition: none !important; animation: none !important; }
}
/* ===================== /ART PLAZA redesign ========================= */

/* fix 2026-09-29: date picker dropdown must sit above the sections below the hero */
html body .banner-section.bg-img { z-index: 40 !important; }
html body .booking-filter .t-datepicker-days, html body .t-datepicker-days { z-index: 60 !important; }

/* fix 2026-09-29b: header must stay above the raised hero; remove leftover scroll-to-top button */
@media (min-width: 992px) {
    html body:has(.banner-section) .header:not(.fixed-header) { z-index: 70 !important; }
    html body:has(.banner-section) .header-top { z-index: 65 !important; }
}
html body .scroll-top { display: none !important; }

/* fix 2026-09-30: OASIS layout — booking card lives in the RIGHT column of the hero (differs from luxury template) */
@media (min-width: 992px) {
    html body .banner-section.bg-img { align-items: center !important; padding: 170px 0 90px !important; min-height: 92vh; min-height: 92svh; }
    html body .banner-section .row { flex-wrap: nowrap !important; justify-content: space-between !important; align-items: center !important; column-gap: 48px; }
    html body .banner-section .row > .col-xl-8 { flex: 1 1 auto !important; max-width: 640px !important; width: auto !important; }
    html body .banner-section .row > .col-xl-4 { flex: 0 0 min(430px, 40%) !important; max-width: 430px !important; width: auto !important; margin-bottom: 0 !important; margin-left: auto; }
    html body .banner-content { padding-bottom: 0 !important; }
    html body .about { padding-top: 120px !important; }
    html body .booking-filter { flex-direction: column !important; align-items: stretch !important; gap: 20px !important; padding: 32px !important; width: 100%; }
    html body .booking-filter__title { max-width: none !important; font-size: 1.9rem !important; margin: 0 !important; }
    html body .booking-filter .t-datepicker-form { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 12px !important; width: 100%; }
    html body .booking-filter .t-datepicker { grid-column: 1 / -1; display: grid !important; grid-template-columns: 1fr 1fr; gap: 12px; }
    html body .booking-filter .t-datepicker .t-check-in, html body .booking-filter .t-datepicker .t-check-out { width: 100% !important; min-width: 0; float: none !important; }
    html body .booking-filter .form-group.mb-0 { grid-column: 1 / -1; padding-top: 4px !important; }
    html body .booking-filter .form-group.mb-0 .btn { width: 100%; }
}
@media (max-width: 991px) {
    html body .banner-section.bg-img { padding: 150px 0 60px !important; }
    html body .banner-section .row > .col-xl-4 { margin-bottom: 0 !important; }
    html body .about { padding-top: 90px !important; }
}
html body .booking-filter .t-dates { white-space: nowrap; }
html body .booking-filter .t-dates > *:not(label) { display: inline !important; }
/* /fix 2026-09-30 */

/* fix 2026-09-30b: compact date fields — small caption + "01 Oct" on one line, year hidden */
html body .booking-filter .t-dates { display: block !important; min-height: 54px !important; height: auto !important; padding: 10px 16px !important; white-space: nowrap; line-height: 1.25; }
html body .booking-filter .t-dates .t-date-info-title { display: none !important; }
html body .booking-filter .t-date-check-in::before, html body .booking-filter .t-date-check-out::before { display: block; font: 600 .68rem/1 'Inter', sans-serif; letter-spacing: .12em; text-transform: uppercase; color: #77736D; margin-bottom: 6px; }
html body .booking-filter .t-date-check-in::before { content: "Check In"; }
html body .booking-filter .t-date-check-out::before { content: "Check Out"; }
html body .booking-filter .t-dates:not(:has(span))::after { content: "Select date"; font: 500 .95rem/1.2 'Inter', sans-serif; color: #A8A39B; }
html body .booking-filter .t-dates > span { display: inline !important; font: 600 .95rem/1.2 'Inter', sans-serif !important; color: #111111 !important; padding: 0 !important; margin: 0 !important; }
html body .booking-filter .t-dates > span + span { margin-left: .28em !important; }
html body .booking-filter .t-year-check-in, html body .booking-filter .t-year-check-out { display: none !important; }
html body .booking-filter .form-control, html body .booking-filter .form--control { min-height: 54px; }
html body .booking-filter .t-dates > span.t-year-check-in, html body .booking-filter .t-dates > span.t-year-check-out { display: none !important; }
/* /fix 2026-09-30b */
/* lang dropdown above header */
.header-top{z-index:80!important}
.header-top .dropdown-lang .dropdown-menu{z-index:90!important;background:#1b1b22!important;border:1px solid rgba(255,255,255,.12)!important;border-radius:12px!important;min-width:150px}
.header-top .dropdown-lang .dropdown-menu a{color:#f1f1f5!important}
.header-top .dropdown-lang .dropdown-menu a:hover{background:rgba(255,255,255,.08)!important}
html body div.header-top{z-index:80!important}
html body header.header{z-index:70!important}
@media (min-width:992px){html body:has(.banner-section) .header-top{z-index:80!important}}