/* Areca — premium warm accents */
:root {
    --areca-gradient: linear-gradient(135deg, #004b1c 0%, #2a7a4a 100%);
    --areca-soft: #E8F2EC;
}

/* ============================================================
   Facilities (merged) page — /facilities
   Single-page long-form view that consolidates 8 facility sub-pages.
   Sticky sub-nav at the top, alternating image/text rows for 8 sections,
   closing CTA. CSS is scoped under .areca-fac-page so nothing leaks.
   ============================================================ */
/* No global smooth-scroll — at 5000+px page height, browser-native smooth
   animation drags on for ~1.2s which feels broken. Instant jump is faster
   and matches how visitors expect tab-style anchor nav to behave. */
.areca-fac-page :where(section[id]) {
    /* Make anchor jumps land below the sticky sub-nav (no header overlap). */
    scroll-margin-top: 90px;
}

/* --- Sticky sub-nav --- */
.areca-fac-nav {
    position: sticky;
    top: 0;
    z-index: 80;
    background: rgba(255, 255, 255, 0.96);
    backdrop-filter: saturate(140%) blur(10px);
    -webkit-backdrop-filter: saturate(140%) blur(10px);
    border-bottom: 1px solid rgba(0, 75, 28, 0.10);
    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.02), 0 8px 24px -18px rgba(0, 75, 28, 0.25);
}
.areca-fac-nav-list {
    list-style: none;
    margin: 0;
    padding: 12px 0;
    display: flex;
    flex-wrap: nowrap;
    gap: 6px;
    overflow-x: auto;
    scrollbar-width: thin;
}
.areca-fac-nav-list::-webkit-scrollbar { height: 4px; }
.areca-fac-nav-list::-webkit-scrollbar-thumb { background: rgba(0, 75, 28, 0.25); border-radius: 4px; }
.areca-fac-nav-list li { flex: 0 0 auto; }
.areca-fac-nav-list a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 16px;
    background: transparent;
    color: #1b4d2e;
    border: 1px solid transparent;
    border-radius: 999px;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.02em;
    text-decoration: none;
    white-space: nowrap;
    transition: all 0.15s ease;
}
.areca-fac-nav-list a:hover {
    background: var(--areca-soft);
    color: #004b1c;
    border-color: rgba(0, 75, 28, 0.18);
}
.areca-fac-nav-list a i { font-size: 13px; opacity: 0.85; }

/* --- Section blocks --- */
.areca-fac-section {
    padding: 90px 0;
    position: relative;
}
.areca-fac-section + .areca-fac-section {
    border-top: 1px solid rgba(0, 75, 28, 0.06);
}
.areca-fac-section--alt {
    background: #fafdfb;
}
.areca-fac-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: center;
}
.areca-fac-section--alt .areca-fac-grid { /* alt sections: text on the right, image on the left
                                              — but with the markup already swapped per section,
                                              no extra ordering needed. This stub kept for future
                                              tweaks. */ }
.areca-fac-image {
    /* No box-shadow, no glow — clean flat card with Ken Burns zoom only. */
    position: relative;
    border-radius: 18px;
    overflow: hidden;
    aspect-ratio: 4 / 3;
    background: #f0f4f1;
    transition: transform 0.4s ease;
    box-shadow: none !important;
}
.areca-fac-image:hover {
    transform: translateY(-5px);
    box-shadow: none !important;
}

.areca-fac-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    /* Layer A — Ken Burns (continuous, alternating zoom + pan).
       Big scale + fast cycle so the motion is clearly visible. */
    animation: areca-fac-kenburns 10s ease-in-out infinite alternate !important;
    transform-origin: 55% 45%;
    will-change: transform;
}

/* Theme-tint gradient overlay (existing, anchors image into brand colour) */
.areca-fac-image::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0, 75, 28, 0) 55%, rgba(0, 75, 28, 0.15) 100%);
    pointer-events: none;
    border-radius: inherit;
    z-index: 1;
}

/* Layer A — Ken Burns keyframes (zoom + pan).
   Bigger scale range + bigger pan so the motion is clearly visible. */
@keyframes areca-fac-kenburns {
    0%   { transform: scale(1.00) translate(0%,   0%);   }
    50%  { transform: scale(1.12) translate(-2.5%, -2%); }
    100% { transform: scale(1.08) translate(2%,  -2.5%); }
}

/* Reduced-motion override removed — animations are always-on regardless of OS
   preference. If you need to honor it later, re-add a @media block disabling
   `animation` on .areca-fac-image and .areca-fac-image img. */
.areca-fac-text { display: flex; flex-direction: column; }
.areca-fac-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: var(--areca-soft);
    color: #004b1c;
    font-size: 22px;
    margin-bottom: 18px;
}
.areca-fac-eyebrow {
    font-size: 12px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: #2a7a4a;
    font-weight: 700;
    margin: 0 0 10px;
}
.areca-fac-title {
    font-size: 36px;
    line-height: 1.15;
    color: #0b1d12;
    margin: 0 0 6px;
    font-weight: 800;
    letter-spacing: -0.01em;
}
.areca-fac-tagline {
    font-size: 18px;
    line-height: 1.4;
    color: #1b4d2e;
    font-weight: 600;
    margin: 0 0 18px;
}
.areca-fac-body {
    font-size: 15.5px;
    line-height: 1.7;
    color: var(--font-color);
    margin: 0 0 22px;
    text-align: justify;
}
.areca-fac-bullets {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 10px;
}
.areca-fac-bullets li {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    font-size: 14.5px;
    line-height: 1.5;
    color: #2b3a2f;
}
.areca-fac-bullets li i {
    color: #2a7a4a;
    margin-top: 4px;
    font-size: 12px;
    flex-shrink: 0;
}

/* --- Closing CTA section --- */
.areca-fac-cta {
    margin-top: 20px;
}

/* --- Responsive --- */
@media (max-width: 991px) {
    .areca-fac-section { padding: 60px 0; }
    .areca-fac-grid {
        grid-template-columns: 1fr;
        gap: 36px;
    }
    /* On mobile, always show the image first (visual hook) regardless of source order */
    .areca-fac-section--alt .areca-fac-image { order: -1; }
    .areca-fac-title { font-size: 28px; }
    .areca-fac-tagline { font-size: 16px; }
}
@media (max-width: 575px) {
    .areca-fac-nav-list { padding: 10px 0; gap: 4px; }
    .areca-fac-nav-list a { padding: 7px 12px; font-size: 13px; }
    .areca-fac-nav-list a span { display: none; }   /* icon-only on phones to fit 8 chips */
    .areca-fac-icon { width: 48px; height: 48px; font-size: 19px; }
}
/* On the very smallest iPhones (320px viewport — iPhone SE 1st gen, older Androids)
   tighten the 8 sub-nav chips further so they fit without overflow. */
@media (max-width: 380px) {
    .areca-fac-nav-list { gap: 2px; padding: 8px 0; }
    .areca-fac-nav-list a { padding: 6px 9px; font-size: 12px; }
    .areca-fac-nav-list a i { font-size: 12px; }
}

/* Belt-and-braces horizontal-overflow guard. Stops any one badly-sized image,
   long URL, or wide CSS grid from causing a horizontal page scroll on phones.
   Per-element overflow is still allowed where intentional (carousels, sticky nav). */
html, body {
    overflow-x: hidden;
    max-width: 100vw;
}

/* ===== Highlighted CTA — site-wide CTA pill =====
   Applies to the legacy .areca-cta-highlight class (Home closing button)
   AND, via :has() attribute matching, ANY .dsn-def-btn wrapper whose inner
   .title-btn has data-animate-text matching one of our priority CTAs:
     • "BOOK YOUR STAY"  (Home closing)
     • "SCHEDULE A VISIT" (Gym, Library, Cafe, services pages, etc.)
     • "BOOK THIS ROOM"   (room pages)
   The [attr="value" i] flag makes matching case-insensitive so both
   UPPERCASE and Title Case variants are caught without listing them twice.
   Browser support: :has() = Chrome 105+, Firefox 121+, Safari 15.4+. */
.areca-cta-highlight,
.dsn-def-btn:has([data-animate-text="book your stay" i]),
.dsn-def-btn:has([data-animate-text="schedule a visit" i]),
.dsn-def-btn:has([data-animate-text="book this room" i]) {
    display: inline-block;
    border-radius: 999px;
    box-shadow: 0 10px 28px -10px rgba(0, 75, 28, 0.55),
                0 0 0 0 rgba(0, 75, 28, 0.45);
    animation: areca-cta-pulse 2.2s ease-in-out infinite;
}
:is(
    .areca-cta-highlight,
    .dsn-def-btn:has([data-animate-text="book your stay" i]),
    .dsn-def-btn:has([data-animate-text="schedule a visit" i]),
    .dsn-def-btn:has([data-animate-text="book this room" i])
) .dsn-btn {
    background: var(--areca-gradient) !important;
    border: 0 !important;
    border-radius: 999px !important;
    padding: 6px 26px 6px 6px !important;
    min-height: 56px;
    box-sizing: border-box;
    transition: transform 0.25s ease, box-shadow 0.25s ease, background 0.25s ease;
    overflow: visible;
}
:is(
    .areca-cta-highlight,
    .dsn-def-btn:has([data-animate-text="book your stay" i]),
    .dsn-def-btn:has([data-animate-text="schedule a visit" i]),
    .dsn-def-btn:has([data-animate-text="book this room" i])
) .dsn-btn > span {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 16px;
    width: 100%;
}
:is(
    .areca-cta-highlight,
    .dsn-def-btn:has([data-animate-text="book your stay" i]),
    .dsn-def-btn:has([data-animate-text="schedule a visit" i]),
    .dsn-def-btn:has([data-animate-text="book this room" i])
) .dsn-btn:hover {
    transform: translateY(-2px) scale(1.03);
    background: linear-gradient(135deg, #2a7a4a 0%, #004b1c 100%) !important;
}

/* Icon pocket — force back into the flex flow (was position:absolute in theme) */
:is(
    .areca-cta-highlight,
    .dsn-def-btn:has([data-animate-text="book your stay" i]),
    .dsn-def-btn:has([data-animate-text="schedule a visit" i]),
    .dsn-def-btn:has([data-animate-text="book this room" i])
) .dsn-btn :is(.dsn-icon, .btn-icon-left) {
    position: relative !important;
    inset: auto !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    transform: none !important;
    margin: 0 !important;
    width: 44px !important;
    height: 44px !important;
    min-width: 44px;
    border-radius: 50% !important;
    background: #ffffff !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0;
}
:is(
    .areca-cta-highlight,
    .dsn-def-btn:has([data-animate-text="book your stay" i]),
    .dsn-def-btn:has([data-animate-text="schedule a visit" i]),
    .dsn-def-btn:has([data-animate-text="book this room" i])
) .dsn-btn .dsn-icon i {
    color: #004b1c !important;
    font-size: 14px !important;
}

/* Title text — clean, white, well-spaced */
:is(
    .areca-cta-highlight,
    .dsn-def-btn:has([data-animate-text="book your stay" i]),
    .dsn-def-btn:has([data-animate-text="schedule a visit" i]),
    .dsn-def-btn:has([data-animate-text="book this room" i])
) .dsn-btn .title-btn {
    position: relative !important;
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1;
    flex: 1;
    text-align: left;
}
:is(
    .areca-cta-highlight,
    .dsn-def-btn:has([data-animate-text="book your stay" i]),
    .dsn-def-btn:has([data-animate-text="schedule a visit" i]),
    .dsn-def-btn:has([data-animate-text="book this room" i])
) .dsn-btn :is(.title-btn, .title-btn > span) {
    color: #ffffff !important;
    font-weight: 800;
    font-size: 14px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    white-space: nowrap;
}

@keyframes areca-cta-pulse {
    0%, 100% { box-shadow: 0 10px 28px -10px rgba(0, 75, 28, 0.55),
                            0 0 0 0   rgba(0, 75, 28, 0.45); }
    50%      { box-shadow: 0 14px 36px -8px  rgba(0, 75, 28, 0.65),
                            0 0 0 12px rgba(0, 75, 28, 0.00); }
}
@media (prefers-reduced-motion: reduce) {
    .areca-cta-highlight { animation: none; }
}

/* Shared site-wide footer bar (appears on every page via _Layout) */
.areca-site-footer {
    background: #ffffff;
    margin-top: 0;
}
.areca-site-footer .box-bottom {
    gap: 20px;
    flex-wrap: wrap;
}
.areca-site-footer #menu-footer,
.areca-site-footer .menu {
    list-style: none;
    padding: 0;
    margin: 0;
}
.areca-site-footer .menu-item {
    font-size: 12px;
    letter-spacing: 0.6px;
    color: var(--font-color);
}
.areca-site-footer .menu-item a.theme-color {
    color: #004b1c;
    font-weight: 600;
    text-decoration: none;
}
.areca-site-footer .menu-item a.theme-color:hover { text-decoration: underline; }
@media (max-width: 640px) {
    .areca-site-footer .box-bottom { justify-content: center; text-align: center; }
}

/* Shared gallery image sizing (replaces 100+ duplicated inline styles) */
.areca-gallery-img {
    width: 100%;
    height: 280px;
    object-fit: cover;
    display: block;
}
.areca-gallery-img--260 {
    height: 260px;
}

/* Bold words inside headings get a warm gradient */
.title b,
.title-h2 b,
h2.title b {
    background: var(--areca-gradient);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Premium banner (over dark image) — force white bold text */
.v-dark-head .title b,
.v-dark-head .title-h2 b {
    background: none !important;
    -webkit-text-fill-color: #ffffff !important;
    color: #ffffff !important;
}

/* About section — match right small image exactly to left large image */
.hero-1 .img-sm {
    width: 100%;
    height: 100%;
    max-width: none;
    align-self: stretch;
    overflow: hidden;
    /* kill JS parallax translate so it lines up with the left image */
    transform: none !important;
}

    .hero-1 .img-sm img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        border-radius: inherit;
        display: block;
    }

@media (max-width: 991px) {
    .hero-1 .img-sm {
        display: block;
        height: auto;
        aspect-ratio: 16 / 10;
        margin-top: 20px;
    }
}

/* Why Choose Us — pill style category tags */
.dsn-category a {
    background: var(--areca-gradient);
    color: #fff !important;
    padding: 4px 14px;
    border-radius: 999px;
    font-weight: 500;
    letter-spacing: 0.5px;
    display: inline-block;
}

/* Entry-date badge for Why Choose Us — vertical stamp on right edge of card image */
.dsn-posts .container-img > .entry-date {
    position: absolute;
    top: 18px;
    right: 18px;
    left: auto;
    writing-mode: vertical-rl;
    padding: 0;
    background: none;
    background-color: transparent;
    color: inherit;
    letter-spacing: 1.5px;
    font-weight: 500;
    z-index: 5;
    font-size: 12px;
    text-transform: uppercase;
}

.entry-date a {
    background: #ffffff;
    color: #004b1c !important;
    padding: 14px 6px;
    border-radius: 999px;
    font-weight: 600;
    font-size: 12px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    display: inline-block;
    box-shadow: 0 4px 14px -4px rgba(0, 75, 28, 0.22);
    text-decoration: none;
    line-height: 1.2;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.entry-date a:hover {
    transform: translateX(-1px);
    box-shadow: 0 6px 18px -4px rgba(0, 75, 28, 0.32);
}

/* Primary button hover — warm glow */
.dsn-btn.dsn-border:hover {
    box-shadow: 0 10px 30px -10px rgba(0, 75, 28, 0.45);
}

/* Social icons — accent on hover */
.dsn-socials a:hover {
    background: var(--areca-gradient) !important;
    color: #fff !important;
}

/* ===== Stats Trio ===== */
.areca-stats-grid {
    gap: 30px;
}

.areca-stat {
    padding: 30px 15px;
}

.areca-stat-num {
    font-size: clamp(44px, 6vw, 72px);
    font-weight: 700;
    line-height: 1;
    margin-bottom: 12px;
    background: var(--areca-gradient);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.areca-plus, .areca-star {
    background: var(--areca-gradient);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.areca-stat-label {
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--heading-color);
}

/* ===== Safety Cards ===== */

.grid-lg-4 {
    grid-template-columns: repeat(4, 1fr);
}

@media (max-width: 991px) {
    .grid-lg-4 {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 575px) {
    .grid-lg-4 {
        grid-template-columns: 1fr;
    }
}

/* HOME-ONLY override: the Safety section has just 3 cards (CCTV, Biometric,
   Emergency Medical), so we force exactly 3 equal-width cols and center them.
   Other pages reuse .areca-safety-grid for 9–11-card amenity grids — those
   still inherit .grid-lg-4 (4 cols) untouched. The modifier class is added
   only on Index.cshtml line 522. */
.d-grid.areca-safety-grid--centered {
    gap: 24px;
    grid-template-columns: repeat(3, minmax(0, 280px));
    justify-content: center;
}
@media (max-width: 991px) {
    .d-grid.areca-safety-grid--centered {
        grid-template-columns: repeat(2, minmax(0, 280px));
    }
}
@media (max-width: 575px) {
    .d-grid.areca-safety-grid--centered {
        grid-template-columns: minmax(0, 1fr);
    }
}

.areca-safety-card {
    background: #fff;
    border-radius: 16px;
    padding: 32px 24px;
    text-align: center;
    box-shadow: 0 4px 20px rgba(0,0,0,0.04);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    border: 1px solid rgba(0, 75, 28, 0.08);
}

    .areca-safety-card:hover {
        transform: translateY(-6px);
        box-shadow: 0 14px 40px -10px rgba(0, 75, 28, 0.25);
    }

.areca-safety-icon {
    width: 64px;
    height: 64px;
    margin: 0 auto 18px;
    border-radius: 50%;
    background: var(--areca-soft);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 26px;
    color: #004b1c;
}

.areca-safety-title {
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 10px;
    color: var(--heading-color);
}

.areca-safety-text {
    font-size: 14px;
    line-height: 1.6;
    color: var(--font-color);
}

/* ===== Testimonials ===== */
.areca-reviews-grid {
    gap: 28px;
}

.areca-rating-inline {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 16px;
}

.areca-stars {
    color: #F5B400;
    font-size: 18px;
    letter-spacing: 2px;
}

.areca-review-card {
    background: #fff;
    border-radius: 16px;
    padding: 32px 28px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.04);
    border: 1px solid rgba(0, 75, 28, 0.08);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

    .areca-review-card:hover {
        transform: translateY(-4px);
        box-shadow: 0 14px 40px -10px rgba(0, 75, 28, 0.2);
    }

.areca-review-stars {
    color: #F5B400;
    font-size: 18px;
    letter-spacing: 3px;
    margin-bottom: 16px;
}

.areca-review-text {
    font-size: 15px;
    line-height: 1.7;
    color: var(--font-color);
    margin-bottom: 24px;
    font-style: italic;
}

.areca-review-author {
    display: flex;
    align-items: center;
    gap: 14px;
    padding-top: 20px;
    border-top: 1px solid rgba(0,0,0,0.06);
}

.areca-review-avatar {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--areca-gradient);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    font-weight: 600;
    overflow: hidden;
}
.areca-review-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
    display: block;
}

.areca-review-name {
    font-size: 16px;
    font-weight: 600;
    margin: 0 0 2px;
    color: var(--heading-color);
}

.areca-review-meta {
    font-size: 13px;
    color: var(--font-color);
}

/* ===== FAQ — Creative Modern ===== */
.areca-faq {
    position: relative;
    overflow: hidden;
}

    .areca-faq::before,
    .areca-faq::after {
        content: "";
        position: absolute;
        border-radius: 50%;
        filter: blur(90px);
        opacity: 0.35;
        z-index: 0;
        pointer-events: none;
    }

    .areca-faq::before {
        width: 320px;
        height: 320px;
        background: #2a7a4a;
        top: -80px;
        left: -80px;
    }

    .areca-faq::after {
        width: 260px;
        height: 260px;
        background: #004b1c;
        bottom: -60px;
        right: -60px;
        opacity: 0.2;
    }

    .areca-faq .container {
        position: relative;
        z-index: 1;
    }

.areca-faq-list {
    max-width: 880px;
    margin: 0 auto;
    display: grid;
    gap: 18px;
}

.areca-faq-item {
    background: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-radius: 22px;
    border: 1.5px solid rgba(0, 75, 28, 0.08);
    box-shadow: 0 6px 26px rgba(0, 75, 28, 0.05);
    overflow: hidden;
    position: relative;
    opacity: 0;
    transform: translateY(20px);
    animation: arecaFaqIn 0.6s cubic-bezier(0.33, 1, 0.68, 1) forwards;
    transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.35s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.3s ease, background 0.3s ease;
}

    .areca-faq-item:nth-child(1) {
        animation-delay: 0.05s;
    }

    .areca-faq-item:nth-child(2) {
        animation-delay: 0.10s;
    }

    .areca-faq-item:nth-child(3) {
        animation-delay: 0.15s;
    }

    .areca-faq-item:nth-child(4) {
        animation-delay: 0.20s;
    }

    .areca-faq-item:nth-child(5) {
        animation-delay: 0.25s;
    }

    .areca-faq-item:nth-child(6) {
        animation-delay: 0.30s;
    }

    .areca-faq-item:nth-child(7) {
        animation-delay: 0.35s;
    }

    .areca-faq-item:nth-child(8) {
        animation-delay: 0.40s;
    }

@keyframes arecaFaqIn {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Gradient border glow on hover */
.areca-faq-item::before {
    content: "";
    position: absolute;
    inset: -1.5px;
    border-radius: inherit;
    padding: 1.5px;
    background: linear-gradient(135deg, transparent 20%, rgba(0, 75, 28, 0.5), transparent 80%);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    opacity: 0;
    transition: opacity 0.35s ease;
    pointer-events: none;
}

.areca-faq-item:hover {
    transform: translateY(-4px);
    box-shadow: 0 18px 44px rgba(0, 75, 28, 0.12);
}

    .areca-faq-item:hover::before {
        opacity: 1;
    }

.areca-faq-item[open] {
    background: linear-gradient(180deg, rgba(255,255,255,0.96) 0%, rgba(232,242,236,0.96) 100%);
    border-color: rgba(0, 75, 28, 0.25);
    box-shadow: 0 22px 54px rgba(0, 75, 28, 0.18);
}

    .areca-faq-item[open]::before {
        opacity: 1;
    }

.areca-faq-q {
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 22px 24px 22px 22px;
    cursor: pointer;
    list-style: none;
    user-select: none;
    position: relative;
}

    .areca-faq-q::-webkit-details-marker,
    .areca-faq-q::marker {
        display: none;
        content: "";
    }

/* Icon circle with gradient */
.areca-faq-icon {
    flex: 0 0 auto;
    width: 52px;
    height: 52px;
    border-radius: 16px;
    background: var(--areca-gradient);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    font-size: 20px;
    box-shadow: 0 8px 22px rgba(0, 75, 28, 0.28);
    transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.areca-faq-item:hover .areca-faq-icon {
    transform: scale(1.08) rotate(-5deg);
}

.areca-faq-item[open] .areca-faq-icon {
    transform: scale(1.05) rotate(8deg);
}

/* Text block (category + question) */
.areca-faq-text {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.areca-faq-cat {
    display: inline-block;
    width: fit-content;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: #2a7a4a;
    background: rgba(42, 122, 74, 0.1);
    padding: 3px 10px;
    border-radius: 999px;
}

.areca-faq-title {
    font-size: 16.5px;
    font-weight: 600;
    color: var(--heading-color);
    line-height: 1.45;
    transition: color 0.3s ease;
}

.areca-faq-item[open] .areca-faq-title {
    color: #004b1c;
}

/* Animated chevron toggle */
.areca-faq-toggle {
    flex: 0 0 auto;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: rgba(0, 75, 28, 0.06);
    position: relative;
    transition: background 0.3s ease, transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

    .areca-faq-toggle::before {
        content: "";
        position: absolute;
        left: 50%;
        top: 50%;
        width: 9px;
        height: 9px;
        border-right: 2.5px solid #004b1c;
        border-bottom: 2.5px solid #004b1c;
        transform: translate(-50%, -70%) rotate(45deg);
        transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.3s ease;
    }

.areca-faq-item[open] .areca-faq-toggle {
    background: #004b1c;
}

    .areca-faq-item[open] .areca-faq-toggle::before {
        border-color: #ffffff;
        transform: translate(-50%, -30%) rotate(-135deg);
    }

/* Answer area */
.areca-faq-a {
    padding: 0 28px 26px 92px;
    font-size: 15px;
    line-height: 1.75;
    color: var(--font-color);
    position: relative;
    animation: arecaFaqSlide 0.45s cubic-bezier(0.33, 1, 0.68, 1);
}

    .areca-faq-a::before {
        content: "";
        position: absolute;
        left: 47px;
        top: -2px;
        bottom: 26px;
        width: 2px;
        border-radius: 2px;
        background: linear-gradient(180deg, #004b1c, transparent);
        opacity: 0.35;
    }

@keyframes arecaFaqSlide {
    from {
        opacity: 0;
        transform: translateY(-6px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@media (max-width: 575px) {
    .areca-faq-q {
        padding: 18px 16px;
        gap: 14px;
    }

    .areca-faq-icon {
        width: 44px;
        height: 44px;
        border-radius: 13px;
        font-size: 17px;
    }

    .areca-faq-cat {
        font-size: 9.5px;
        padding: 2px 8px;
    }

    .areca-faq-title {
        font-size: 14.5px;
    }

    .areca-faq-toggle {
        width: 32px;
        height: 32px;
    }

    .areca-faq-a {
        padding: 0 20px 22px 74px;
        font-size: 14px;
    }

        .areca-faq-a::before {
            left: 36px;
        }
}

/* ===== Enquire Now header button ===== */
.areca-enquire-btn,
.areca-enquire-btn:hover,
.areca-enquire-btn:focus {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--areca-gradient);
    color: #fff !important;
    padding: 10px 22px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 1px;
    text-transform: uppercase;
    box-shadow: 0 6px 20px -6px rgba(0, 75, 28, 0.5);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    margin-left: 20px;
    white-space: nowrap;
    position: relative;
    z-index: 100001;
    isolation: isolate;
    pointer-events: auto;
    text-decoration: none;
}

    .areca-enquire-btn span,
    .areca-enquire-btn span::before,
    .areca-enquire-btn span::after {
        text-decoration: none;
        border-bottom: 0;
        background-image: none;
    }

    .areca-enquire-btn:hover {
        transform: translateY(-2px);
        box-shadow: 0 10px 30px -6px rgba(0, 75, 28, 0.6);
    }

    /* When mobile menu is open, hide enquire button so it doesn't float over the menu overlay */
    .site-header.dsn-open .areca-enquire-btn {
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.3s ease;
    }

/* ===== Responsive Google Map wrapper ===== */
.areca-map-wrap {
    width: 100%;
    line-height: 0;
}

    .areca-map-wrap iframe {
        width: 100%;
        height: 450px;
        border: 0;
        display: block;
    }

@media (max-width: 991px) {
    .areca-map-wrap iframe {
        height: 380px;
    }
}

@media (max-width: 640px) {
    .areca-map-wrap iframe {
        height: 320px;
    }
}

@media (max-width: 360px) {
    .areca-map-wrap iframe {
        height: 280px;
    }
}

/* ===== Global responsive safety: images shouldn't overflow viewport on small screens ===== */
@media (max-width: 991px) {
    .main-root img:not(.custom-logo):not([style*="width"]),
    .main-root video {
        max-width: 100%;
    }
}

/* ===== Skip-to-content link (accessibility) ===== */
.areca-skip-link {
    position: absolute;
    top: -40px;
    left: 8px;
    background: #004b1c;
    color: #fff;
    padding: 8px 14px;
    border-radius: 0 0 6px 6px;
    z-index: 100002;
    text-decoration: none;
    font-weight: 600;
    transition: top 0.2s ease;
}

    .areca-skip-link:focus {
        top: 0;
    }

/* ===== Cookie consent banner ===== */
.areca-cookie-banner {
    position: fixed;
    bottom: 16px;
    left: 16px;
    right: 16px;
    max-width: 720px;
    margin: 0 auto;
    background: #fff;
    border: 1.5px solid rgba(0, 75, 28, 0.15);
    border-radius: 16px;
    box-shadow: 0 18px 48px rgba(0, 75, 28, 0.18);
    padding: 18px 22px;
    z-index: 100002;
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    align-items: center;
    justify-content: space-between;
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.25s ease, transform 0.25s ease;
}

    .areca-cookie-banner.is-visible {
        opacity: 1;
        transform: translateY(0);
    }

.areca-cookie-text {
    flex: 1 1 280px;
    font-size: 14px;
    color: #1b2b21;
    line-height: 1.5;
}

    .areca-cookie-text a {
        color: #004b1c;
        text-decoration: underline;
    }

.areca-cookie-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.areca-cookie-btn {
    border: 0;
    border-radius: 999px;
    padding: 9px 18px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    letter-spacing: 0.3px;
    transition: background 0.2s ease, color 0.2s ease;
}

.areca-cookie-accept {
    background: #004b1c;
    color: #fff;
}

    .areca-cookie-accept:hover {
        background: #006b29;
    }

.areca-cookie-reject {
    background: transparent;
    color: #1b2b21;
    border: 1.5px solid rgba(0, 75, 28, 0.25);
}

    .areca-cookie-reject:hover {
        background: rgba(0, 75, 28, 0.06);
    }

@media (max-width: 640px) {
    .areca-cookie-banner {
        bottom: 12px;
        left: 12px;
        right: 12px;
        padding: 16px;
    }

    .areca-cookie-actions {
        width: 100%;
    }

        .areca-cookie-actions .areca-cookie-btn {
            flex: 1;
            text-align: center;
        }
}

/* ===== Footer redesign ===== */
.areca-footer-grid {
    display: grid;
    grid-template-columns: 1.4fr 1fr 1fr 1.2fr;
    gap: 40px;
    padding: 60px 0 40px;
}

.areca-footer-col h4.areca-footer-heading {
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    margin-bottom: 18px;
    font-weight: 600;
    color: #1b2b21;
}

.areca-footer-logo img {
    height: 56px;
    width: auto;
    margin-bottom: 18px;
}

.areca-footer-tagline {
    font-size: 14px;
    color: #4b5a54;
    line-height: 1.6;
    margin-bottom: 18px;
}

.areca-footer-social {
    display: flex;
    gap: 10px;
}

    .areca-footer-social a {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 38px;
        height: 38px;
        border-radius: 50%;
        background: rgba(0, 75, 28, 0.08);
        color: #004b1c;
        font-size: 16px;
        transition: background 0.2s ease, transform 0.2s ease;
        text-decoration: none;
    }

        .areca-footer-social a:hover {
            background: #004b1c;
            color: #fff;
            transform: translateY(-2px);
        }

.areca-footer-links,
.areca-footer-contact {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

    .areca-footer-links a {
        color: #4b5a54;
        text-decoration: none;
        font-size: 14px;
        transition: color 0.2s ease;
    }

        .areca-footer-links a:hover {
            color: #004b1c;
        }

.areca-footer-contact li {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    font-size: 14px;
    color: #4b5a54;
    line-height: 1.5;
}

    .areca-footer-contact li i {
        color: #004b1c;
        margin-top: 4px;
        flex-shrink: 0;
        width: 16px;
    }

    .areca-footer-contact a {
        color: #1b2b21;
        text-decoration: none;
    }

        .areca-footer-contact a:hover {
            color: #004b1c;
            text-decoration: underline;
        }

.areca-footer-bottom {
    border-top: 1px solid rgba(0, 75, 28, 0.12);
    padding: 22px 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    font-size: 13px;
    color: #6b8a7a;
}

.areca-footer-legal {
    list-style: none;
    display: flex;
    gap: 18px;
    padding: 0;
    margin: 0;
    flex-wrap: wrap;
}

    .areca-footer-legal a {
        color: #4b5a54;
        text-decoration: none;
    }

        .areca-footer-legal a:hover {
            color: #004b1c;
        }

.areca-footer-credit {
    text-align: right;
}

@media (max-width: 991px) {
    .areca-footer-grid {
        grid-template-columns: 1fr 1fr;
        gap: 32px;
    }

    .areca-footer-brand {
        grid-column: 1 / -1;
    }
}

@media (max-width: 575px) {
    .areca-footer-grid {
        grid-template-columns: 1fr;
        padding: 40px 0 24px;
    }

    .areca-footer-bottom {
        flex-direction: column;
        text-align: center;
    }

    .areca-footer-credit {
        text-align: center;
    }
}

/* ===== Legal documents (Privacy, Terms, Refund, Cookie) ===== */
.areca-legal-doc {
    font-size: 15px;
    line-height: 1.7;
    color: #1b2b21;
}

    .areca-legal-doc h2 {
        font-size: 22px;
        font-weight: 600;
        color: #004b1c;
        margin-top: 36px;
        margin-bottom: 14px;
    }

    .areca-legal-doc h3 {
        font-size: 17px;
        font-weight: 600;
        margin-top: 24px;
        margin-bottom: 10px;
        color: #1b2b21;
    }

    .areca-legal-doc p,
    .areca-legal-doc ul {
        margin-bottom: 14px;
    }

    .areca-legal-doc ul {
        padding-left: 22px;
    }

        .areca-legal-doc ul li {
            margin-bottom: 6px;
        }

    .areca-legal-doc a {
        color: #004b1c;
        text-decoration: underline;
    }

.areca-link-btn {
    background: transparent;
    border: 0;
    color: #004b1c;
    cursor: pointer;
    text-decoration: underline;
    padding: 0;
    font: inherit;
}

/* ===== Thank You page ===== */
.areca-thankyou {
    padding: 60px 0;
}

.areca-thankyou-icon {
    font-size: 80px;
    color: #00a651;
    margin-bottom: 20px;
    animation: thankPop 0.6s cubic-bezier(0.4, 0, 0.2, 1) both;
}

@keyframes thankPop {
    from {
        transform: scale(0);
        opacity: 0;
    }

    50% {
        transform: scale(1.2);
    }

    to {
        transform: scale(1);
        opacity: 1;
    }
}

.areca-thankyou-cta {
    display: flex;
    gap: 14px;
    justify-content: center;
    flex-wrap: wrap;
}

.areca-thankyou-next h3 {
    font-size: 18px;
    font-weight: 600;
    color: #1b2b21;
}

.areca-thankyou-link {
    display: flex;
    align-items: center;
    gap: 10px;
    justify-content: center;
    padding: 18px 22px;
    border: 1.5px solid rgba(0, 75, 28, 0.12);
    border-radius: 14px;
    background: #fff;
    color: #1b2b21;
    text-decoration: none;
    font-weight: 500;
    transition: border-color 0.2s ease, transform 0.2s ease;
}

    .areca-thankyou-link:hover {
        border-color: #004b1c;
        transform: translateY(-2px);
        color: #004b1c;
    }

    .areca-thankyou-link i {
        color: #004b1c;
        font-size: 18px;
    }

/* ===== QA fixes (reported issues) ===== */

/* Fix: sub-menu items wrap awkwardly on mobile because theme applies padding: 120px to primary-nav (style.css line 1251). Reduce horizontal padding so items have enough width and stop them from wrapping. */
@media only screen and (max-width: 991px) {
    .site-header.dsn-hamburger ul.primary-nav,
    .site-header.dsn-hamburger ul.primary-nav ul {
        padding-left: 32px;
        padding-right: 32px;
    }

        .site-header.dsn-hamburger ul.primary-nav .overflow,
        .site-header.dsn-hamburger ul.primary-nav ul .overflow {
            white-space: nowrap;
            display: inline-block;
        }
}

/* Fix: header items mis-ordered on mobile (DOM is logo → hamburger → enquire so hamburger lands in the visual middle which makes the enquire tap target sit awkwardly next to it). Use flex order to place enquire in the middle and hamburger at the standard far-right. */
@media (max-width: 991px) {
    .site-header .main-logo { order: 1; }
    .site-header #areca-enquire-btn { order: 2; }
    .site-header #navbar_toggle { order: 3; }
}

/* Fix: "Premium Living" parallax section has excess vertical space on mobile from section-padding (80px top + 80px bottom = 160px) which feels empty on small screens. Tighten on mobile only. */
@media (max-width: 767px) {
    .p-relative.section-padding.v-dark-head {
        padding-top: 50px;
        padding-bottom: 50px;
    }
}

/* Fix: "Smart & Premium by Design" headline in the section-seat block used theme's
   mix-blend-mode: exclusion which inverted colors over the parallax image and rendered
   the text in an unintended pink hue. Disable the blend mode and render in brand-green
   (#065122) with a subtle drop shadow for legibility over the background image. */
.section-seat .parallax-img-text .custom {
    mix-blend-mode: normal;
}

    .section-seat .parallax-img-text .title,
    .section-seat .parallax-img-text .title b {
        color: #065122 !important;
        -webkit-text-fill-color: #065122;
        text-shadow: 0 2px 14px rgba(255, 255, 255, 0.55), 0 1px 2px rgba(0, 0, 0, 0.18);
    }

    .areca-enquire-btn i {
        font-size: 13px;
    }

@media (max-width: 767px) {
    .areca-enquire-btn span {
        display: none;
    }

    .areca-enquire-btn {
        padding: 10px 14px;
        margin-left: 12px;
    }

        .areca-enquire-btn i {
            font-size: 15px;
        }
}

/* ===== Pricing ===== */
.areca-pricing-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
    align-items: stretch;
}

@media (max-width: 1199px) {
    .areca-pricing-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

.areca-price-card {
    background: #fff;
    border-radius: 22px;
    padding: 40px 32px 36px;
    box-shadow: 0 8px 32px rgba(0, 75, 28, 0.06);
    border: 1.5px solid rgba(0, 75, 28, 0.08);
    position: relative;
    display: flex;
    flex-direction: column;
    transition: transform 0.35s cubic-bezier(0.4,0,0.2,1), box-shadow 0.35s ease, border-color 0.3s ease;
}

    .areca-price-card:hover {
        transform: translateY(-6px);
        box-shadow: 0 22px 50px rgba(0, 75, 28, 0.14);
        border-color: rgba(0, 75, 28, 0.25);
    }

.areca-price-popular {
    background: linear-gradient(180deg, #ffffff 0%, #f4faf6 100%);
    border-color: #004b1c;
    box-shadow: 0 16px 44px rgba(0, 75, 28, 0.15);
    transform: translateY(-8px);
}

    .areca-price-popular:hover {
        transform: translateY(-12px);
    }

.areca-price-badge {
    position: absolute;
    top: -14px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--areca-gradient);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    padding: 6px 18px;
    border-radius: 999px;
    box-shadow: 0 6px 16px rgba(0, 75, 28, 0.3);
}

.areca-price-head {
    text-align: center;
    margin-bottom: 20px;
}

.areca-price-icon {
    display: inline-flex;
    width: 64px;
    height: 64px;
    border-radius: 18px;
    background: var(--areca-soft);
    color: #004b1c;
    font-size: 26px;
    align-items: center;
    justify-content: center;
    margin-bottom: 16px;
}

.areca-price-popular .areca-price-icon {
    background: var(--areca-gradient);
    color: #fff;
}

.areca-price-type {
    font-size: 22px;
    font-weight: 700;
    color: var(--heading-color);
    margin: 0 0 4px;
}

.areca-price-sub {
    font-size: 13px;
    color: var(--font-color);
    margin: 0;
}

.areca-price-amount {
    text-align: center;
    margin: 20px 0 24px;
    padding: 20px 0;
    border-top: 1px solid rgba(0, 75, 28, 0.08);
    border-bottom: 1px solid rgba(0, 75, 28, 0.08);
}

.areca-price-currency {
    font-size: 22px;
    font-weight: 600;
    color: #004b1c;
    vertical-align: top;
}

.areca-price-value {
    font-size: 44px;
    font-weight: 700;
    color: var(--heading-color);
    letter-spacing: -1px;
}

.areca-price-period {
    font-size: 14px;
    color: var(--font-color);
    margin-left: 4px;
}

.areca-price-list {
    list-style: none;
    padding: 0;
    margin: 0 0 28px;
    flex: 1;
}

    .areca-price-list li {
        font-size: 14.5px;
        color: var(--font-color);
        padding: 10px 0;
        display: flex;
        align-items: flex-start;
        gap: 10px;
        line-height: 1.5;
    }

    .areca-price-list i {
        color: #004b1c;
        font-size: 12px;
        margin-top: 5px;
        flex-shrink: 0;
    }

.areca-price-cta {
    display: block;
    text-align: center;
    padding: 14px 20px;
    border-radius: 999px;
    background: transparent;
    color: #004b1c !important;
    border: 2px solid #004b1c;
    font-weight: 600;
    font-size: 14px;
    letter-spacing: 1px;
    text-transform: uppercase;
    transition: background 0.3s ease, color 0.3s ease, transform 0.2s ease;
}

    .areca-price-cta:hover {
        background: var(--areca-gradient);
        color: #fff !important;
        border-color: transparent;
        transform: translateY(-2px);
    }

.areca-price-popular .areca-price-cta {
    background: var(--areca-gradient);
    color: #fff !important;
    border-color: transparent;
}

/* Horizontal single-card layout (used on individual Room pages) */
.areca-price-card.areca-price-horizontal {
    max-width: 920px;
    width: 100%;
    padding: 44px 44px 40px;
}
@media (min-width: 768px) {
    .areca-price-card.areca-price-horizontal {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
        column-gap: 48px;
        align-items: stretch;
    }
    .areca-price-card.areca-price-horizontal .areca-price-left {
        display: flex;
        flex-direction: column;
    }
    .areca-price-card.areca-price-horizontal .areca-price-head {
        text-align: left;
        margin-bottom: 16px;
    }
    .areca-price-card.areca-price-horizontal .areca-price-amount {
        text-align: left;
        margin: 14px 0 26px;
        padding: 18px 0;
    }
    .areca-price-card.areca-price-horizontal .areca-price-list {
        margin: 0;
        padding-left: 28px;
        border-left: 1px solid rgba(0, 75, 28, 0.10);
        flex: 1;
    }
    .areca-price-card.areca-price-horizontal .areca-price-cta {
        align-self: flex-start;
        display: inline-block;
        padding: 14px 36px;
    }
}
.areca-price-card.areca-price-horizontal .areca-price-badge {
    left: 44px;
    transform: none;
}
@media (max-width: 480px) {
    .areca-price-card.areca-price-horizontal {
        padding: 32px 24px 28px;
    }
    .areca-price-card.areca-price-horizontal .areca-price-badge {
        left: 24px;
    }
}

.areca-price-note {
    text-align: center;
    margin-top: 32px;
    font-size: 13px;
    color: var(--font-color);
    font-style: italic;
}

/* ===== Virtual Tour ===== */
.areca-tour-frame {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    border-radius: 22px;
    overflow: hidden;
    background-size: cover;
    background-position: center;
    box-shadow: 0 24px 60px rgba(0, 75, 28, 0.18);
    max-width: 1100px;
    margin: 0 auto;
}

    .areca-tour-frame::after {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient(180deg, rgba(0, 0, 0, 0.05) 0%, rgba(0, 0, 0, 0.55) 100%);
        pointer-events: none;
    }

    .areca-tour-frame.is-playing::after {
        display: none;
    }

    .areca-tour-frame iframe {
        width: 100%;
        height: 100%;
        border: 0;
        display: none;
        position: relative;
        z-index: 2;
    }

    .areca-tour-frame .areca-tour-pano {
        position: absolute;
        inset: 0;
        display: none;
        z-index: 2;
        background: #000;
    }

    .areca-tour-frame.is-playing .areca-tour-pano {
        display: block;
    }

.areca-tour-play {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    background: none;
    border: 0;
    color: #fff;
    cursor: pointer;
    z-index: 3;
}

.areca-tour-play-circle {
    width: 92px;
    height: 92px;
    border-radius: 50%;
    background: var(--areca-gradient);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    box-shadow: 0 16px 40px rgba(0, 75, 28, 0.5), 0 0 0 0 rgba(0, 75, 28, 0.5);
    animation: arecaPulse 2s infinite;
}

@keyframes arecaPulse {
    0% {
        box-shadow: 0 16px 40px rgba(0, 75, 28, 0.5), 0 0 0 0 rgba(0, 75, 28, 0.5);
    }

    70% {
        box-shadow: 0 16px 40px rgba(0, 75, 28, 0.5), 0 0 0 22px rgba(0, 75, 28, 0);
    }

    100% {
        box-shadow: 0 16px 40px rgba(0, 75, 28, 0.5), 0 0 0 0 rgba(0, 75, 28, 0);
    }
}

.areca-tour-play-label {
    font-size: 18px;
    font-weight: 600;
    letter-spacing: 1px;
    margin-top: 6px;
}

.areca-tour-play-sub {
    font-size: 13px;
    opacity: 0.85;
    letter-spacing: 2px;
    text-transform: uppercase;
}

.areca-tour-note {
    text-align: center;
    margin-top: 24px;
    font-size: 15px;
    color: var(--font-color);
}

    .areca-tour-note a {
        color: #004b1c;
        font-weight: 600;
    }

/* ===== Location & Landmarks ===== */
.areca-location-grid {
    display: grid;
    grid-template-columns: 1.3fr 1fr;
    gap: 32px;
    align-items: stretch;
}

.areca-location-map {
    border-radius: 22px;
    overflow: hidden;
    box-shadow: 0 16px 44px rgba(0, 75, 28, 0.12);
    min-height: 440px;
}

    .areca-location-map iframe {
        width: 100%;
        height: 100%;
        min-height: 440px;
        border: 0;
        display: block;
    }

.areca-location-info {
    background: #fff;
    border-radius: 22px;
    padding: 36px 32px;
    border: 1.5px solid rgba(0, 75, 28, 0.08);
    box-shadow: 0 8px 32px rgba(0, 75, 28, 0.06);
    display: flex;
    flex-direction: column;
}

.areca-location-heading {
    font-size: 22px;
    font-weight: 700;
    color: var(--heading-color);
    margin: 0 0 20px;
}

.areca-landmark-list {
    list-style: none;
    padding: 0;
    margin: 0;
    flex: 1;
}

    .areca-landmark-list li {
        display: flex;
        align-items: center;
        gap: 14px;
        padding: 14px 0;
        border-bottom: 1px solid rgba(0, 75, 28, 0.08);
    }

        .areca-landmark-list li:last-child {
            border-bottom: 0;
        }

.areca-landmark-icon {
    flex: 0 0 auto;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--areca-soft);
    color: #004b1c;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 17px;
}

.areca-landmark-body {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.areca-landmark-name {
    font-size: 15px;
    font-weight: 600;
    color: var(--heading-color);
}

.areca-landmark-meta {
    font-size: 12.5px;
    color: var(--font-color);
    text-transform: uppercase;
    letter-spacing: 1px;
}

.areca-location-cta {
    margin-top: 22px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 13px 22px;
    background: var(--areca-gradient);
    color: #fff !important;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 1px;
    text-transform: uppercase;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

    .areca-location-cta:hover {
        transform: translateY(-2px);
        box-shadow: 0 12px 28px rgba(0, 75, 28, 0.28);
    }

/* ===== Booking Form ===== */
.areca-booking-wrap {
    display: grid;
    grid-template-columns: 1fr 1.2fr;
    gap: 44px;
    background: #fff;
    border-radius: 28px;
    padding: 48px;
    box-shadow: 0 18px 52px rgba(0, 75, 28, 0.10);
    border: 1.5px solid rgba(0, 75, 28, 0.08);
}

.areca-booking-info .title {
    font-size: 30px;
    line-height: 1.2;
    margin: 0;
}

.areca-booking-lead {
    font-size: 15px;
    color: var(--font-color);
    line-height: 1.7;
}

.areca-booking-perks {
    list-style: none;
    padding: 0;
    margin: 24px 0;
}

    .areca-booking-perks li {
        display: flex;
        align-items: flex-start;
        gap: 10px;
        padding: 8px 0;
        font-size: 14.5px;
        color: var(--heading-color);
    }

    .areca-booking-perks i {
        color: #004b1c;
        font-size: 15px;
        margin-top: 3px;
    }

.areca-booking-contact {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding-top: 20px;
    border-top: 1px solid rgba(0, 75, 28, 0.08);
}

    .areca-booking-contact a {
        display: inline-flex;
        align-items: center;
        gap: 10px;
        font-size: 14px;
        color: var(--heading-color) !important;
        font-weight: 500;
        transition: color 0.2s;
    }

        .areca-booking-contact a:hover {
            color: #004b1c !important;
        }

    .areca-booking-contact i {
        color: #004b1c;
        width: 18px;
    }

.areca-booking-form {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.areca-form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.areca-form-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

    .areca-form-field label {
        font-size: 13px;
        font-weight: 600;
        color: var(--heading-color);
        letter-spacing: 0.3px;
    }

.areca-form-opt {
    color: var(--font-color);
    font-weight: 400;
    font-style: italic;
}

.areca-form-field input,
.areca-form-field select,
.areca-form-field textarea {
    padding: 13px 16px;
    border-radius: 12px;
    border: 1.5px solid rgba(0, 75, 28, 0.15);
    background: #fff;
    font-family: inherit;
    font-size: 14.5px;
    color: var(--heading-color);
    transition: border-color 0.25s ease, box-shadow 0.25s ease;
    width: 100%;
}

    .areca-form-field input:focus,
    .areca-form-field select:focus,
    .areca-form-field textarea:focus {
        outline: none;
        border-color: #004b1c;
        box-shadow: 0 0 0 3px rgba(0, 75, 28, 0.12);
    }

.areca-form-field textarea {
    resize: vertical;
    min-height: 80px;
}

.areca-form-check {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 14px;
    color: var(--font-color);
    cursor: pointer;
    line-height: 1.5;
}

    .areca-form-check input {
        accent-color: #004b1c;
        margin-top: 3px;
        width: 16px;
        height: 16px;
    }

.areca-booking-submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 15px 28px;
    border-radius: 999px;
    background: var(--areca-gradient);
    color: #fff;
    border: 0;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.25s ease;
    box-shadow: 0 10px 28px rgba(0, 75, 28, 0.3);
}

    .areca-booking-submit:hover {
        transform: translateY(-2px);
        box-shadow: 0 16px 38px rgba(0, 75, 28, 0.4);
    }

.areca-form-note {
    font-size: 12.5px;
    color: var(--font-color);
    text-align: center;
    margin: 0;
}

.areca-form-req {
    color: #c83a3a;
    font-weight: 600;
    margin-left: 2px;
}

.areca-field-error {
    display: block;
    min-height: 0;
    margin-top: 6px;
    color: #c83a3a;
    font-size: 12.5px;
    line-height: 1.4;
}
.areca-field-error:empty {
    display: none;
}

.areca-booking-form input.is-invalid,
.areca-booking-form select.is-invalid,
.areca-booking-form textarea.is-invalid {
    border-color: #c83a3a !important;
    box-shadow: 0 0 0 2px rgba(200, 58, 58, 0.12);
}

.areca-form-feedback {
    display: none;
    margin-top: 14px;
    padding: 12px 16px;
    border-radius: 10px;
    font-size: 14px;
    line-height: 1.5;
    text-align: center;
}
.areca-form-feedback.is-success {
    display: block;
    background: #e7f5ec;
    color: #1e5a33;
    border: 1px solid #b8dcc4;
}
.areca-form-feedback.is-error {
    display: block;
    background: #fdecea;
    color: #8a1f1f;
    border: 1px solid #f1b7b2;
}

.areca-booking-submit[disabled] {
    opacity: 0.75;
    cursor: not-allowed;
    transform: none !important;
}

/* ===== Blog ===== */
.areca-blog-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 28px;
}

.areca-blog-card {
    background: #fff;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 8px 28px rgba(0, 75, 28, 0.06);
    border: 1.5px solid rgba(0, 75, 28, 0.08);
    transition: transform 0.35s cubic-bezier(0.4,0,0.2,1), box-shadow 0.35s ease;
    display: flex;
    flex-direction: column;
}

    .areca-blog-card:hover {
        transform: translateY(-6px);
        box-shadow: 0 18px 44px rgba(0, 75, 28, 0.14);
    }

.areca-blog-img {
    position: relative;
    display: block;
    aspect-ratio: 16 / 10;
    overflow: hidden;
}

    .areca-blog-img img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: transform 0.6s cubic-bezier(0.33, 1, 0.68, 1);
    }

.areca-blog-card:hover .areca-blog-img img {
    transform: scale(1.08);
}

.areca-blog-tag {
    position: absolute;
    top: 16px;
    left: 16px;
    background: #fff;
    color: #004b1c;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    padding: 5px 12px;
    border-radius: 999px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.areca-blog-body {
    padding: 24px 24px 26px;
    display: flex;
    flex-direction: column;
    flex: 1;
}

.areca-blog-date {
    font-size: 12px;
    color: var(--font-color);
    letter-spacing: 1px;
    text-transform: uppercase;
}

.areca-blog-title {
    font-size: 18px;
    font-weight: 600;
    line-height: 1.4;
    margin: 10px 0 12px;
}

    .areca-blog-title a {
        color: var(--heading-color) !important;
        transition: color 0.2s;
    }

        .areca-blog-title a:hover {
            color: #004b1c !important;
        }

.areca-blog-excerpt {
    font-size: 14px;
    line-height: 1.65;
    color: var(--font-color);
    margin: 0 0 18px;
    flex: 1;
}

.areca-blog-readmore {
    font-size: 13px;
    font-weight: 600;
    color: #004b1c !important;
    letter-spacing: 0.5px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    width: fit-content;
    transition: gap 0.25s ease;
}

    .areca-blog-readmore:hover {
        gap: 14px;
    }

/* ===== Instagram Feed ===== */
.areca-insta-handle {
    color: #004b1c !important;
    font-weight: 600;
}

.areca-insta-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
}

.areca-insta-item {
    position: relative;
    display: block;
    aspect-ratio: 1 / 1;
    border-radius: 14px;
    overflow: hidden;
}

    .areca-insta-item img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: transform 0.5s cubic-bezier(0.33, 1, 0.68, 1);
    }

.areca-insta-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, rgba(131, 58, 180, 0.85) 0%, rgba(253, 29, 29, 0.85) 50%, rgba(252, 176, 64, 0.85) 100%);
    color: #fff;
    font-size: 34px;
    opacity: 0;
    transition: opacity 0.35s ease;
}

.areca-insta-item:hover .areca-insta-overlay {
    opacity: 1;
}

.areca-insta-item:hover img {
    transform: scale(1.12);
}

.areca-insta-footer {
    text-align: center;
    margin-top: 32px;
}

.areca-insta-follow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 13px 26px;
    border-radius: 999px;
    background: linear-gradient(135deg, #833AB4 0%, #FD1D1D 50%, #FCB045 100%);
    color: #fff !important;
    font-weight: 600;
    font-size: 14px;
    letter-spacing: 1px;
    text-transform: uppercase;
    box-shadow: 0 10px 26px rgba(253, 29, 29, 0.3);
    transition: transform 0.2s ease, box-shadow 0.25s ease;
}

    .areca-insta-follow:hover {
        transform: translateY(-2px);
        box-shadow: 0 16px 36px rgba(253, 29, 29, 0.42);
    }

/* ===== Global Community Map ===== */
.areca-globe {
    text-align: center;
}

.areca-globe-stats {
    display: flex;
    justify-content: center;
    gap: 48px;
    flex-wrap: wrap;
    margin: 0 auto 36px;
}

.areca-globe-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
}

    .areca-globe-stat b {
        font-size: 32px;
        font-weight: 700;
        background: var(--areca-gradient);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
        line-height: 1;
    }

    .areca-globe-stat span {
        font-size: 12.5px;
        text-transform: uppercase;
        letter-spacing: 1.5px;
        color: var(--font-color);
        margin-top: 6px;
    }

.areca-globe-wrap {
    background: linear-gradient(180deg, #ffffff 0%, #f4faf6 100%);
    border-radius: 24px;
    padding: 28px;
    box-shadow: 0 14px 44px rgba(0, 75, 28, 0.08);
    border: 1.5px solid rgba(0, 75, 28, 0.08);
    max-width: 1100px;
    margin: 0 auto;
}

#areca-svgmap {
    width: 100%;
    min-height: 480px;
    border-radius: 18px;
    overflow: hidden;
}
/* Realistic Leaflet map — light theme tweaks */
.leaflet-container {
    background: #aad3df;
    font-family: var(--body-font);
    border-radius: 18px;
}

.leaflet-control-zoom a {
    background: #fff !important;
    color: #004b1c !important;
    border: 1.5px solid rgba(0, 75, 28, 0.15) !important;
    font-weight: 600;
}

    .leaflet-control-zoom a:hover {
        background: var(--areca-soft) !important;
    }

.leaflet-control-attribution {
    font-size: 10.5px !important;
    background: rgba(255,255,255,0.85) !important;
}

    .leaflet-control-attribution a {
        color: #004b1c !important;
    }

/* Custom pin markers */
.areca-marker {
    width: 12px;
    height: 12px;
    position: relative;
}

    .areca-marker.is-home {
        width: 18px;
        height: 18px;
    }

    .areca-marker .areca-marker-dot {
        position: absolute;
        inset: 0;
        border-radius: 50%;
        background: #E76F51;
        border: 2.5px solid #ffffff;
        box-shadow: 0 4px 10px rgba(0,0,0,0.25);
        z-index: 2;
    }

    .areca-marker.is-home .areca-marker-dot {
        background: #ffd24a;
        border: 3px solid #004b1c;
    }

    .areca-marker .areca-marker-pulse {
        position: absolute;
        inset: 0;
        border-radius: 50%;
        background: rgba(231, 111, 81, 0.55);
        transform-origin: center;
        animation: arecaMarkerPulse 1.8s ease-out infinite;
        z-index: 1;
    }

    .areca-marker.is-home .areca-marker-pulse {
        background: rgba(255, 210, 74, 0.6);
        animation-duration: 1.6s;
    }

@keyframes arecaMarkerPulse {
    0% {
        transform: scale(1);
        opacity: 0.7;
    }

    70% {
        transform: scale(3);
        opacity: 0;
    }

    100% {
        transform: scale(3);
        opacity: 0;
    }
}

/* Popup styling */
.areca-popup-wrap .leaflet-popup-content-wrapper {
    background: #ffffff !important;
    border-radius: 14px !important;
    border: 1.5px solid rgba(0, 75, 28, 0.12) !important;
    box-shadow: 0 16px 40px rgba(0, 75, 28, 0.18) !important;
    padding: 0 !important;
    overflow: hidden;
}

.areca-popup-wrap .leaflet-popup-content {
    margin: 0 !important;
    min-width: 200px;
}

.areca-popup-wrap .leaflet-popup-tip {
    background: #ffffff !important;
    box-shadow: 0 6px 20px rgba(0, 75, 28, 0.15) !important;
}

.areca-popup {
    display: flex;
    gap: 12px;
    padding: 14px 16px;
    align-items: center;
}

.areca-popup-flag {
    font-size: 28px;
    line-height: 1;
    background: var(--areca-soft);
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    flex: 0 0 auto;
}

.areca-popup-body {
    display: flex;
    flex-direction: column;
}

.areca-popup-city {
    font-size: 14.5px;
    font-weight: 600;
    color: var(--heading-color);
    line-height: 1.3;
}

.areca-popup-label {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #004b1c;
    margin-top: 2px;
    font-weight: 600;
}

.areca-popup-meta {
    font-size: 13px;
    color: var(--font-color);
    margin-top: 4px;
}

    .areca-popup-meta b {
        color: #004b1c;
        font-weight: 700;
    }

/* Legend */
.areca-globe-legend {
    display: flex;
    justify-content: center;
    gap: 32px;
    flex-wrap: wrap;
    margin-top: 28px;
}

.areca-globe-legend-item {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 13.5px;
    color: var(--font-color);
}

    .areca-globe-legend-item .dot {
        display: inline-block;
        width: 14px;
        height: 14px;
        border-radius: 50%;
    }

    .areca-globe-legend-item .dot-home {
        background: #004b1c;
        box-shadow: 0 0 0 4px rgba(0, 75, 28, 0.15);
    }

    .areca-globe-legend-item .dot-resident {
        background: #9bc4a8;
    }

    .areca-globe-legend-item .dot-pin {
        background: #E76F51;
        box-shadow: 0 0 0 4px rgba(231, 111, 81, 0.25);
    }

@media (max-width: 767px) {
    .areca-globe-stats {
        gap: 28px;
    }

    .areca-globe-stat b {
        font-size: 26px;
    }

    .areca-globe-wrap {
        padding: 18px;
        border-radius: 18px;
    }

    #areca-svgmap {
        min-height: 320px;
    }
}

/* ===== Prime Location (tabs + cards) ===== */
.areca-ploc-tabs {
    display: inline-flex;
    padding: 6px;
    background: #fff;
    border-radius: 999px;
    box-shadow: 0 6px 22px rgba(0, 75, 28, 0.08);
    border: 1.5px solid rgba(0, 75, 28, 0.08);
    margin: 0 auto 48px;
    gap: 4px;
}

.areca-ploc-tabs-wrap {
    text-align: center;
}

.areca-ploc-tab {
    padding: 11px 26px;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: var(--heading-color);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 1px;
    text-transform: uppercase;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.3s ease, color 0.3s ease, box-shadow 0.3s ease;
}

    .areca-ploc-tab:hover {
        color: #004b1c;
    }

    .areca-ploc-tab.is-active {
        background: var(--areca-gradient);
        color: #fff;
        box-shadow: 0 8px 22px rgba(0, 75, 28, 0.28);
    }

.areca-ploc .areca-ploc-tabs {
    display: flex;
    width: fit-content;
}

.areca-ploc > .container > .areca-ploc-tabs {
    margin-left: auto;
    margin-right: auto;
}
/* Center the tabs */
.areca-ploc {
    text-align: center;
}

    .areca-ploc .section-title,
    .areca-ploc .areca-ploc-panel {
        text-align: left;
    }

    .areca-ploc .section-title {
        text-align: center;
    }

.areca-ploc-panel {
    animation: arecaPlocFade 0.4s cubic-bezier(0.33, 1, 0.68, 1);
}

    .areca-ploc-panel[hidden] {
        display: none;
    }

@keyframes arecaPlocFade {
    from {
        opacity: 0;
        transform: translateY(8px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.areca-ploc-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 22px;
}

.areca-ploc-card {
    background: #fff;
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 0 6px 24px rgba(0, 75, 28, 0.05);
    border: 1.5px solid rgba(0, 75, 28, 0.08);
    transition: transform 0.35s cubic-bezier(0.4,0,0.2,1), box-shadow 0.35s ease, border-color 0.3s ease;
}

    .areca-ploc-card:hover {
        transform: translateY(-5px);
        box-shadow: 0 18px 44px rgba(0, 75, 28, 0.14);
        border-color: rgba(0, 75, 28, 0.2);
    }

.areca-ploc-img {
    aspect-ratio: 16 / 10;
    overflow: hidden;
    background: var(--areca-soft);
}

    .areca-ploc-img img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: transform 0.6s cubic-bezier(0.33, 1, 0.68, 1);
    }

.areca-ploc-card:hover .areca-ploc-img img {
    transform: scale(1.08);
}

.areca-ploc-body {
    padding: 18px 20px 22px;
    text-align: left;
}

.areca-ploc-type {
    display: inline-block;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: #004b1c;
    background: var(--areca-soft);
    padding: 3px 10px;
    border-radius: 999px;
    margin-bottom: 8px;
}

.areca-ploc-name {
    font-size: 16px;
    font-weight: 600;
    color: var(--heading-color);
    margin: 0 0 4px;
    line-height: 1.35;
}

.areca-ploc-note {
    font-size: 12.5px;
    color: var(--font-color);
    margin: 0 0 8px;
    font-style: italic;
    line-height: 1.4;
}

.areca-ploc-meta {
    font-size: 13px;
    color: var(--font-color);
    margin: 0;
    display: flex;
    align-items: center;
    gap: 8px;
}

    .areca-ploc-meta i {
        color: #004b1c;
        font-size: 12px;
    }

@media (max-width: 575px) {
    .areca-ploc-grid {
        grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
        gap: 16px;
    }

    .areca-ploc-tab {
        padding: 9px 18px;
        font-size: 11px;
    }

    .areca-ploc-body {
        padding: 14px 16px 18px;
    }

    .areca-ploc-name {
        font-size: 14.5px;
    }
}

/* ===== Responsive breakpoints for all new sections ===== */
@media (max-width: 991px) {
    .areca-pricing-grid {
        grid-template-columns: 1fr;
        max-width: 480px;
        margin: 0 auto;
        gap: 22px;
    }

    .areca-price-popular {
        transform: none;
    }

        .areca-price-popular:hover {
            transform: translateY(-6px);
        }

    .areca-location-grid {
        grid-template-columns: 1fr;
        gap: 24px;
    }

    .areca-location-map, .areca-location-map iframe {
        min-height: 340px;
    }

    .areca-booking-wrap {
        grid-template-columns: 1fr;
        padding: 36px 28px;
        gap: 28px;
    }

    .areca-form-row {
        grid-template-columns: 1fr;
        gap: 14px;
    }

    .areca-blog-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 22px;
    }

    .areca-insta-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 640px) {
    .areca-price-card {
        padding: 32px 26px 30px;
    }

    .areca-price-value {
        font-size: 38px;
    }

    .areca-tour-play-circle {
        width: 72px;
        height: 72px;
        font-size: 22px;
    }

    .areca-tour-play-label {
        font-size: 15px;
    }

    .areca-booking-wrap {
        padding: 28px 20px;
        border-radius: 20px;
    }

    .areca-booking-info .title {
        font-size: 24px;
    }

    .areca-form-row {
        grid-template-columns: 1fr;
        gap: 14px;
    }

    .areca-blog-grid {
        grid-template-columns: 1fr;
    }

    .areca-insta-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 8px;
    }

    .areca-landmark-list li {
        padding: 12px 0;
    }

    .areca-landmark-icon {
        width: 38px;
        height: 38px;
        font-size: 15px;
    }
}

@media (max-width: 360px) {
    .areca-landmark-icon {
        width: 32px;
        height: 32px;
        font-size: 13px;
    }
    .areca-landmark-list li {
        gap: 10px;
    }
    .areca-landmark-name {
        font-size: 13.5px;
    }
}

/* ===== Floating WhatsApp + Call ===== */
.areca-float-actions {
    position: fixed;
    right: 22px;
    bottom: 22px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    z-index: 9999;
    transition: transform 0.3s ease;
}

/* C4: Safe-area padding only — iPhone home-indicator clearance, no FAB reservation.
   The earlier rule added body { padding-bottom: 90px } on phones to keep the floating
   WhatsApp/Call button (FAB) from overlapping content. In practice that created a
   constant 90px gray strip at the bottom of every short page (the body's --bg-color
   shows below the wrapper). FABs are floating UI by design — letting them hover over
   the last bit of content when scrolled all the way down is normal web pattern. */
@media (max-width: 991px) {
    #page_wrapper,
    body > footer,
    .areca-site-footer {
        padding-bottom: env(safe-area-inset-bottom, 0);
    }
}

/* C5: When cookie banner is visible, push FAB stack above it */
body.cookie-banner-visible .areca-float-actions {
    transform: translateY(-160px);
}
@media (max-width: 575px) {
    body.cookie-banner-visible .areca-float-actions {
        transform: translateY(-200px);
    }
}

.areca-float-btn {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    color: #fff !important;
    box-shadow: 0 8px 24px rgba(0,0,0,0.18);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    cursor: pointer;
    text-decoration: none !important;
    outline: none !important;
    position: relative;
    overflow: hidden;
}
.areca-float-btn::before,
.areca-float-btn::after {
    display: none !important;
    content: none !important;
}
.areca-float-btn:focus,
.areca-float-btn:active,
.areca-float-btn:focus-visible {
    text-decoration: none !important;
    outline: none !important;
    box-shadow: 0 8px 24px rgba(0,0,0,0.18);
}
.areca-float-btn i {
    text-decoration: none !important;
}

/* Hide theme's custom dsn cursor when hovering floating contact buttons */
body:has(.areca-float-btn:hover) #dsn_cursor,
body:has(.areca-float-btn:hover) #dsn_cursor_inner,
body:has(.areca-float-btn:active) #dsn_cursor,
body:has(.areca-float-btn:active) #dsn_cursor_inner,
body:has(.areca-float-btn:focus) #dsn_cursor,
body:has(.areca-float-btn:focus) #dsn_cursor_inner {
    opacity: 0 !important;
    visibility: hidden !important;
}

    .areca-float-btn:hover {
        transform: scale(1.08);
        box-shadow: 0 12px 32px rgba(0,0,0,0.24);
    }

.areca-float-whatsapp {
    background: #25D366 !important;
}

.areca-float-call {
    background: var(--areca-gradient) !important;
}

.areca-float-instagram {
    background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%) !important;
    color: #fff !important;
}

    .areca-float-instagram i {
        color: #fff !important;
    }

/* ===== Mini loader for non-home pages ===== */
#areca-mini-loader {
    position: fixed;
    inset: 0;
    background: #ffffff;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity 0.35s ease;
}

    #areca-mini-loader.is-hidden {
        opacity: 0;
        pointer-events: none;
    }

.areca-mini-spinner {
    width: 54px;
    height: 54px;
    border: 4px solid rgba(0, 75, 28, 0.15);
    border-top-color: #004b1c;
    border-radius: 50%;
    animation: areca-mini-spin 0.9s linear infinite;
}

@keyframes areca-mini-spin {
    to {
        transform: rotate(360deg);
    }
}

@media (max-width: 575px) {
    .areca-float-actions {
        right: 14px;
        bottom: 14px;
        gap: 10px;
    }

    .areca-float-btn {
        width: 50px;
        height: 50px;
        font-size: 21px;
    }
}

/* ===== Hero slider — frosted-glass patti behind title (same blur effect as behind enquire button) ===== */
.main-slider .swiper-slide.slide-item .image-bg {
    position: relative;
}

.main-slider .inner-content .title,
.dsn-slider-content .inner-content .title {
    display: inline-block;
    overflow: visible !important;
    line-height: 1.2;
    padding: 22px 40px 24px;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.10);
    -webkit-backdrop-filter: blur(32px) saturate(140%);
    backdrop-filter: blur(32px) saturate(140%);
    border: 1px solid rgba(255, 255, 255, 0.28);
    box-shadow: 0 18px 44px -14px rgba(0, 0, 0, 0.38), inset 0 1px 0 rgba(255, 255, 255, 0.20);
}

    .main-slider .inner-content .title a,
    .dsn-slider-content .inner-content .title a {
        overflow: visible !important;
        display: inline-block;
    }

@media (max-width: 767px) {
    .main-slider .inner-content .title,
    .dsn-slider-content .inner-content .title {
        padding: 16px 26px 18px;
        border-radius: 10px;
    }
}

@media (max-width: 480px) {
    .main-slider .inner-content .title,
    .dsn-slider-content .inner-content .title {
        padding: 12px 16px 14px;
        border-radius: 8px;
        font-size: 26px;
        line-height: 1.25;
    }
}

@media (max-width: 360px) {
    .main-slider .inner-content .title,
    .dsn-slider-content .inner-content .title {
        padding: 10px 12px 12px;
        font-size: 22px;
    }
}

/* =====================================================================
   ADMIN DASHBOARD
   ===================================================================== */
.admin-body {
    margin: 0;
    font-family: 'Poppins', sans-serif;
    background:
        radial-gradient(1200px 600px at 85% -10%, rgba(42, 122, 74, 0.08), transparent 60%),
        radial-gradient(900px 500px at -10% 110%, rgba(0, 75, 28, 0.07), transparent 60%),
        linear-gradient(180deg, #f6faf8 0%, #eef4f1 100%);
    background-attachment: fixed;
    color: #1b2b21;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

/* Custom scrollbar */
.admin-body::-webkit-scrollbar { width: 10px; height: 10px; }
.admin-body::-webkit-scrollbar-track { background: transparent; }
.admin-body::-webkit-scrollbar-thumb {
    background: #c7d4cc;
    border-radius: 10px;
    border: 2px solid transparent;
    background-clip: padding-box;
}
.admin-body::-webkit-scrollbar-thumb:hover { background: #8fa99a; background-clip: padding-box; border: 2px solid transparent; }

.admin-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 32px;
    background: rgba(255, 255, 255, 0.92);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-bottom: 1px solid #e3e8e5;
    box-shadow: 0 2px 14px rgba(0, 75, 28, 0.05);
    position: sticky;
    top: 0;
    z-index: 10;
}
.admin-topbar::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 3px;
    background: linear-gradient(90deg, #004b1c 0%, #2a7a4a 50%, #ffd24a 100%);
}
.admin-brand {
    display: flex;
    align-items: center;
    gap: 14px;
}
.admin-brand img {
    height: 36px;
    width: auto;
    filter: drop-shadow(0 2px 4px rgba(0, 75, 28, 0.12));
}
.admin-brand-text {
    font-size: 15px;
    letter-spacing: 0.6px;
    color: #1b2b21;
    padding-left: 14px;
    border-left: 2px solid #cadbd1;
}
.admin-brand-text b {
    background: linear-gradient(135deg, #004b1c, #2a7a4a);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    font-weight: 600;
}

.admin-main {
    flex: 1;
    padding: 32px clamp(16px, 4vw, 48px);
    max-width: 1400px;
    width: 100%;
    margin: 0 auto;
    box-sizing: border-box;
}

.admin-footer {
    padding: 18px 32px;
    text-align: center;
    color: #7a8681;
    font-size: 12.5px;
    border-top: 1px solid #e3e8e5;
    background: #ffffff;
}

/* Buttons */
.admin-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    border-radius: 8px;
    border: 1px solid transparent;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.18s ease;
    font-family: inherit;
}
.admin-btn-primary {
    background: #004b1c;
    color: #fff;
    border-color: #004b1c;
}
.admin-btn-primary:hover {
    background: #00631f;
    box-shadow: 0 6px 18px rgba(0, 75, 28, 0.25);
}
.admin-btn-ghost {
    background: #ffffff;
    color: #1b2b21;
    border-color: #d4dcd7;
}
.admin-btn-ghost:hover {
    background: #fff5f5;
    border-color: #e8b9b3;
    color: #a33a2a;
    box-shadow: 0 4px 12px rgba(163, 58, 42, 0.1);
    transform: translateY(-1px);
}
.admin-btn-block {
    width: 100%;
    justify-content: center;
    padding: 12px 18px;
}

/* Login */
.admin-login-wrap {
    min-height: calc(100vh - 140px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px 16px;
}
.admin-login-card {
    position: relative;
    background: #ffffff;
    border-radius: 20px;
    padding: 44px 40px;
    width: 100%;
    max-width: 440px;
    box-shadow: 0 30px 70px rgba(0, 75, 28, 0.12), 0 4px 14px rgba(17, 45, 31, 0.06);
    border: 1px solid #e3e8e5;
    animation: adminCardIn 0.55s cubic-bezier(0.22, 1, 0.36, 1) both;
    overflow: hidden;
}
.admin-login-card::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 4px;
    background: linear-gradient(90deg, #004b1c, #2a7a4a, #ffd24a);
}
@keyframes adminCardIn {
    from { opacity: 0; transform: translateY(14px) scale(0.98); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}
.admin-login-icon {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background: linear-gradient(135deg, #004b1c, #2a7a4a);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 26px;
    margin: 0 auto 22px;
    box-shadow: 0 14px 32px rgba(0, 75, 28, 0.35), 0 0 0 6px rgba(0, 75, 28, 0.08);
    animation: adminPulse 2.6s ease-in-out infinite;
}
@keyframes adminPulse {
    0%, 100% { box-shadow: 0 14px 32px rgba(0, 75, 28, 0.35), 0 0 0 6px rgba(0, 75, 28, 0.08); }
    50%      { box-shadow: 0 14px 32px rgba(0, 75, 28, 0.35), 0 0 0 12px rgba(0, 75, 28, 0.04); }
}
.admin-login-title {
    text-align: center;
    font-size: 22px;
    font-weight: 600;
    margin: 0 0 6px;
    color: #1b2b21;
}
.admin-login-sub {
    text-align: center;
    margin: 0 0 22px;
    font-size: 13.5px;
    color: #6b7974;
}
.admin-login-error {
    background: #fdecea;
    color: #8a1f1f;
    border: 1px solid #f1b7b2;
    padding: 10px 14px;
    border-radius: 8px;
    font-size: 13px;
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    gap: 8px;
}
.admin-login-form label {
    display: block;
    font-size: 13px;
    font-weight: 500;
    color: #1b2b21;
    margin-bottom: 6px;
}
.admin-pass-wrap {
    position: relative;
    margin-bottom: 0;
}
.admin-login-form .areca-field-error {
    margin: 6px 0 14px;
}
.admin-login-form .areca-field-error:empty {
    margin: 0 0 18px;
    display: block;
    min-height: 0;
}
.admin-pass-wrap input {
    width: 100%;
    padding: 12px 44px 12px 14px;
    border: 1px solid #d4dcd7;
    border-radius: 8px;
    font-size: 14px;
    background: #fff;
    box-sizing: border-box;
    font-family: inherit;
}
.admin-pass-wrap input:focus {
    outline: none;
    border-color: #004b1c;
    box-shadow: 0 0 0 3px rgba(0, 75, 28, 0.12);
}
.admin-pass-wrap input.is-invalid {
    border-color: #c83a3a;
    box-shadow: 0 0 0 3px rgba(200, 58, 58, 0.12);
}
.admin-pass-toggle {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: 0;
    color: #6b7974;
    cursor: pointer;
    padding: 6px 8px;
    font-size: 14px;
}
.admin-pass-toggle:hover { color: #004b1c; }

/* Dashboard sections */
.admin-section { margin-bottom: 36px; }
.admin-section-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 18px;
    flex-wrap: wrap;
}
.admin-h1 {
    font-size: 28px;
    margin: 0;
    font-weight: 600;
    color: #1b2b21;
    letter-spacing: -0.5px;
}
.admin-h2 {
    font-size: 20px;
    margin: 0;
    font-weight: 600;
    color: #1b2b21;
    letter-spacing: -0.3px;
}
.admin-sub { margin: 6px 0 0; color: #6b7974; font-size: 13.5px; max-width: 620px; }

/* Stat cards */
.admin-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 12px;
    margin-bottom: 22px;
}
.admin-stat {
    position: relative;
    background: #fff;
    border: 1px solid #e3e8e5;
    border-radius: 12px;
    padding: 13px 14px;
    display: flex;
    align-items: center;
    gap: 11px;
    box-shadow: 0 3px 10px rgba(17, 45, 31, 0.04);
    overflow: hidden;
    transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
    animation: adminFadeUp 0.5s ease both;
}
.admin-stat::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    background: linear-gradient(180deg, #004b1c, #2a7a4a);
    opacity: 0;
    transition: opacity 0.25s ease;
}
.admin-stat:hover {
    transform: translateY(-3px);
    box-shadow: 0 16px 36px rgba(0, 75, 28, 0.1);
    border-color: #cadbd1;
}
.admin-stat:hover::before { opacity: 1; }
.admin-stats .admin-stat:nth-child(1) { animation-delay: 0.00s; }
.admin-stats .admin-stat:nth-child(2) { animation-delay: 0.05s; }
.admin-stats .admin-stat:nth-child(3) { animation-delay: 0.10s; }
.admin-stats .admin-stat:nth-child(4) { animation-delay: 0.15s; }
.admin-stats .admin-stat:nth-child(5) { animation-delay: 0.20s; }
.admin-stats .admin-stat:nth-child(6) { animation-delay: 0.25s; }

.admin-stat-icon {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    background: linear-gradient(135deg, #e8f2ec, #d5e8dc);
    color: #004b1c;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    flex-shrink: 0;
    box-shadow: inset 0 0 0 1px rgba(0, 75, 28, 0.05);
}
.admin-stat-icon-amber { background: linear-gradient(135deg, #fff3dd, #ffe3b0); color: #a66a00; }
.admin-stat-icon-blue  { background: linear-gradient(135deg, #e2edf8, #c7dcf1); color: #1a5a95; }
.admin-stat-icon-purple{ background: linear-gradient(135deg, #ece4f5, #dacbed); color: #5b3a8a; }
.admin-stat-icon-red   { background: linear-gradient(135deg, #fde6e3, #f8cec8); color: #b3301a; }
.admin-stat-icon-green { background: linear-gradient(135deg, #e2f5ea, #c6ecd6); color: #0f6c39; }

.admin-stat-num {
    font-size: 22px;
    font-weight: 600;
    line-height: 1.05;
    background: linear-gradient(135deg, #1b2b21, #2a7a4a);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    letter-spacing: -0.5px;
}
.admin-stat-label {
    font-size: 11.5px;
    color: #6b7974;
    margin-top: 2px;
    letter-spacing: 0.2px;
}

@keyframes adminFadeUp {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Split (3 card breakdown) */
.admin-split {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 16px;
}
.admin-card {
    background: #fff;
    border: 1px solid #e3e8e5;
    border-radius: 12px;
    padding: 16px 18px;
    box-shadow: 0 3px 10px rgba(17, 45, 31, 0.04);
    animation: adminFadeUp 0.5s ease 0.3s both;
}
.admin-card-title {
    font-size: 12px;
    font-weight: 600;
    margin: 0 0 12px;
    color: #1b2b21;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    display: flex;
    align-items: center;
    gap: 8px;
}
.admin-card-title::before {
    content: "";
    width: 4px;
    height: 16px;
    background: linear-gradient(180deg, #004b1c, #2a7a4a);
    border-radius: 2px;
}
.admin-empty { color: #6b7974; font-size: 13.5px; margin: 0; }

/* Bars */
.admin-bars {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 12px;
}
.admin-bars > li {
    flex: 1 1 0;
    min-width: 120px;
}
.admin-bar-label {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 12px;
    margin-bottom: 6px;
    color: #1b2b21;
    text-transform: capitalize;
    gap: 6px;
}
.admin-bar-label span {
    font-weight: 600;
    color: #004b1c;
    background: #e8f2ec;
    padding: 1px 8px;
    border-radius: 999px;
    font-size: 11px;
}
.admin-bar {
    height: 8px;
    background: #eef2ef;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.04);
}
@media (max-width: 575px) {
    .admin-bars > li { flex: 1 1 45%; }
}
.admin-bar > span {
    display: block;
    height: 100%;
    background: linear-gradient(90deg, #004b1c, #2a7a4a, #3a9a5e);
    border-radius: 10px;
    transition: width 0.9s cubic-bezier(0.22, 1, 0.36, 1);
    box-shadow: 0 2px 6px rgba(0, 75, 28, 0.25);
}

/* Ring chart (WhatsApp opt-in) */
.admin-ring {
    --p: 0;
    --size: 130px;
    width: var(--size);
    height: var(--size);
    border-radius: 50%;
    background: conic-gradient(#004b1c calc(var(--p) * 1%), #eef2ef 0);
    margin: 4px auto 14px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.admin-ring-inner {
    width: calc(var(--size) - 28px);
    height: calc(var(--size) - 28px);
    border-radius: 50%;
    background: #fff;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.admin-ring-inner strong { font-size: 22px; color: #004b1c; line-height: 1; }
.admin-ring-inner span { font-size: 11px; color: #6b7974; margin-top: 3px; text-transform: uppercase; letter-spacing: 0.6px; }
.admin-kv {
    display: flex;
    justify-content: space-around;
    font-size: 13px;
    color: #6b7974;
    gap: 8px;
}
.admin-kv b { color: #1b2b21; font-weight: 600; }

/* Head actions (search + export) */
.admin-head-actions {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

/* Page-size dropdown */
.admin-pagesize-wrap {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #ffffff;
    border: 1px solid #d4dcd7;
    border-radius: 10px;
    padding: 4px 6px 4px 12px;
    font-size: 13px;
    color: #6b7974;
    box-shadow: 0 2px 6px rgba(17, 45, 31, 0.04);
    transition: all 0.2s ease;
}
.admin-pagesize-wrap:focus-within {
    border-color: #004b1c;
    box-shadow: 0 0 0 4px rgba(0, 75, 28, 0.12), 0 4px 10px rgba(17, 45, 31, 0.06);
    color: #004b1c;
}
.admin-pagesize-wrap label {
    font-weight: 500;
    letter-spacing: 0.3px;
    user-select: none;
}
.admin-pagesize-wrap select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    border: 0;
    background: transparent;
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    color: #1b2b21;
    padding: 7px 28px 7px 8px;
    border-radius: 6px;
    cursor: pointer;
    outline: none;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'><path fill='%23004b1c' d='M5 6L0 0h10z'/></svg>");
    background-repeat: no-repeat;
    background-position: right 10px center;
}
.admin-pagesize-wrap select:hover { background-color: #eef5f0; }

/* Excel export button */
.admin-btn-export {
    background: linear-gradient(135deg, #107c41, #0d623a);
    color: #ffffff;
    border-color: #0d623a;
    text-decoration: none;
    padding: 11px 18px;
    border-radius: 10px;
    font-weight: 500;
    box-shadow: 0 6px 16px rgba(16, 124, 65, 0.25);
    transition: all 0.2s ease;
}
.admin-btn-export:hover {
    background: linear-gradient(135deg, #138a4a, #0f7342);
    box-shadow: 0 10px 24px rgba(16, 124, 65, 0.35);
    transform: translateY(-2px);
    color: #ffffff;
}
.admin-btn-export i { font-size: 16px; }

/* Search */
.admin-search-wrap {
    position: relative;
}
.admin-search-wrap i {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: #9aa7a2;
    font-size: 13px;
}
.admin-search-wrap input {
    padding: 11px 16px 11px 38px;
    border: 1px solid #d4dcd7;
    border-radius: 10px;
    background: #fff;
    font-size: 13.5px;
    min-width: 300px;
    font-family: inherit;
    transition: all 0.2s ease;
    box-shadow: 0 2px 6px rgba(17, 45, 31, 0.04);
}
.admin-search-wrap input::placeholder { color: #9aa7a2; }
.admin-search-wrap input:focus {
    outline: none;
    border-color: #004b1c;
    box-shadow: 0 0 0 4px rgba(0, 75, 28, 0.12), 0 4px 10px rgba(17, 45, 31, 0.06);
    min-width: 320px;
}
.admin-search-wrap:focus-within i { color: #004b1c; }

/* Table */
.admin-table-wrap {
    background: #fff;
    border: 1px solid #e3e8e5;
    border-radius: 16px;
    overflow-x: auto;
    box-shadow: 0 4px 14px rgba(17, 45, 31, 0.04);
    animation: adminFadeUp 0.5s ease 0.35s both;
}
.admin-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13.5px;
}
.admin-table thead {
    background: linear-gradient(180deg, #f4f8f6, #eaf1ec);
    border-bottom: 1px solid #dce5df;
}
.admin-table th {
    text-align: left;
    padding: 14px 16px;
    font-size: 11.5px;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    color: #556661;
    font-weight: 600;
    white-space: nowrap;
}
.admin-table th:first-child { padding-left: 20px; }
.admin-table td {
    padding: 14px 16px;
    border-bottom: 1px solid #f0f4f2;
    vertical-align: middle;
}
.admin-table td:first-child { padding-left: 20px; }
.admin-table tbody tr {
    transition: background 0.15s ease;
}
.admin-table tbody tr:nth-child(even) { background: #fafdfb; }
.admin-table tbody tr:hover { background: #eef5f0 !important; }
.admin-table tbody tr:last-child td { border-bottom: 0; }
.admin-td-num { color: #9aa7a2; font-weight: 500; }
.admin-td-nowrap { white-space: nowrap; color: #556661; }
.admin-td-msg { max-width: 320px; color: #4b5a54; }
.admin-td-phone { color: #1b2b21; font-variant-numeric: tabular-nums; }
.admin-td-reached { color: #0f6c39; font-weight: 500; }
.admin-table tbody tr.is-reached .admin-td-reached { color: #6b8a7a; }
.admin-table a { color: #004b1c; text-decoration: none; font-weight: 500; }
.admin-table a:hover { color: #00631f; text-decoration: underline; }

/* Pagination */
.admin-pagination {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 18px;
    padding: 14px 18px;
    background: #ffffff;
    border: 1px solid #e3e8e5;
    border-radius: 14px;
    flex-wrap: wrap;
    gap: 12px;
    box-shadow: 0 2px 8px rgba(17, 45, 31, 0.03);
}
.admin-pagination-info {
    color: #6b7974;
    font-size: 13px;
}
.admin-pagination-info b { color: #1b2b21; font-weight: 600; }
.admin-pagination-sep { margin: 0 6px; color: #c7d1cb; }
.admin-pagination-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 4px;
    flex-wrap: wrap;
}
.admin-pg-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 34px;
    height: 34px;
    padding: 0 10px;
    border-radius: 8px;
    border: 1px solid #dae1dd;
    background: #fff;
    color: #1b2b21;
    font-size: 13px;
    font-weight: 500;
    text-decoration: none;
    transition: all 0.15s ease;
}
.admin-pg-btn:hover {
    background: #e8f2ec;
    border-color: #b8d4c3;
    color: #004b1c;
    text-decoration: none;
}
.admin-pg-btn.is-active {
    background: linear-gradient(135deg, #004b1c, #2a7a4a);
    border-color: #004b1c;
    color: #fff;
    box-shadow: 0 4px 10px rgba(0, 75, 28, 0.25);
    cursor: default;
}
.admin-pg-btn.is-disabled {
    opacity: 0.4;
    pointer-events: none;
    cursor: not-allowed;
}
.admin-pg-ellipsis {
    padding: 0 4px;
    color: #9aa7a2;
    font-size: 14px;
    user-select: none;
}

/* AJAX partial-reload loading state */
.admin-pjax-area {
    position: relative;
    transition: opacity 0.15s ease;
}
.admin-pjax-area.is-loading {
    opacity: 0.55;
    pointer-events: none;
}
.admin-pjax-area.is-loading::after {
    content: "";
    position: absolute;
    top: 14px;
    right: 14px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: 3px solid #cadbd1;
    border-top-color: #004b1c;
    animation: adminSpin 0.8s linear infinite;
    z-index: 5;
}
@keyframes adminSpin {
    to { transform: rotate(360deg); }
}

/* Search clear button inside search input */
.admin-search-wrap form,
form.admin-search-wrap { position: relative; display: inline-block; }
.admin-search-clear {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: #eef2ef;
    color: #6b7974;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    text-decoration: none;
    transition: all 0.15s ease;
}
.admin-search-clear:hover {
    background: #dce5df;
    color: #1b2b21;
    text-decoration: none;
}
form.admin-search-wrap { display: inline-flex; align-items: center; gap: 8px; }
form.admin-search-wrap input { padding-right: 42px; }

.admin-search-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 11px 18px;
    border-radius: 10px;
    border: 1px solid #004b1c;
    background: linear-gradient(135deg, #004b1c, #2a7a4a);
    color: #ffffff;
    font-size: 13.5px;
    font-weight: 500;
    font-family: inherit;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 6px 16px rgba(0, 75, 28, 0.2);
    white-space: nowrap;
}
.admin-search-btn:hover {
    background: linear-gradient(135deg, #00631f, #348c58);
    box-shadow: 0 10px 22px rgba(0, 75, 28, 0.3);
    transform: translateY(-1px);
}
.admin-search-btn:active {
    transform: translateY(0);
    box-shadow: 0 4px 10px rgba(0, 75, 28, 0.25);
}

.admin-badge {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 11.5px;
    font-weight: 500;
    background: #e8f2ec;
    color: #004b1c;
    text-transform: capitalize;
}
.admin-dim { color: #b8c1bd; }

/* Reached-out checkbox */
.admin-check {
    display: inline-flex;
    align-items: center;
    cursor: pointer;
    position: relative;
    width: 22px;
    height: 22px;
}
.admin-check input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
    pointer-events: none;
}
.admin-check-box {
    width: 22px;
    height: 22px;
    border-radius: 6px;
    border: 1.5px solid #c7d1cb;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 11px;
    transition: all 0.18s ease;
}
.admin-check-box i { opacity: 0; transform: scale(0.6); transition: all 0.18s ease; }
.admin-check input:checked + .admin-check-box {
    background: #0f6c39;
    border-color: #0f6c39;
    box-shadow: 0 3px 8px rgba(15, 108, 57, 0.3);
}
.admin-check input:checked + .admin-check-box i { opacity: 1; transform: scale(1); }
.admin-check:hover .admin-check-box { border-color: #0f6c39; }
.admin-check input:disabled + .admin-check-box { opacity: 0.5; cursor: wait; }

/* Dim a row that's been reached out */
.admin-table tbody tr.is-reached { background: #f6faf8; }
.admin-table tbody tr.is-reached td {
    color: #7a8681;
}
.admin-table tbody tr.is-reached td b { color: #4b5a54; }
.admin-table tbody tr.is-reached:hover { background: #eef5f1; }

/* Empty */
.admin-empty-card {
    text-align: center;
    padding: 56px 24px;
    background: #fff;
    border: 1px dashed #d4dcd7;
    border-radius: 12px;
    color: #6b7974;
}
.admin-empty-card i { font-size: 38px; color: #b8c1bd; margin-bottom: 12px; }
.admin-empty-card h3 { margin: 8px 0 4px; color: #1b2b21; }
.admin-empty-card p { margin: 0; font-size: 13.5px; }

/* Responsive */
@media (max-width: 1024px) {
    .admin-section-head {
        flex-direction: column;
        align-items: stretch;
    }
    .admin-head-actions {
        width: 100%;
        justify-content: flex-start;
    }
    form.admin-search-wrap {
        flex: 1 1 100%;
        min-width: 0;
    }
    .admin-search-wrap input,
    .admin-search-wrap input:focus {
        min-width: 0;
        width: 100%;
        flex: 1;
    }
    .admin-btn-export {
        flex-shrink: 0;
    }
}

@media (max-width: 640px) {
    .admin-topbar { padding: 12px 16px; }
    .admin-brand-text { font-size: 13px; }
    .admin-main { padding: 20px 14px; }
    .admin-h1 { font-size: 20px; }
    .admin-head-actions {
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
    }
    .admin-pagesize-wrap {
        align-self: flex-start;
    }
    form.admin-search-wrap {
        width: 100%;
        flex-wrap: nowrap;
    }
    .admin-search-wrap input { min-width: 0; width: 100%; }
    .admin-btn-export {
        width: 100%;
        justify-content: center;
        text-align: center;
    }
}

@media (max-width: 360px) {
    .admin-pagesize-wrap { padding-left: 8px; }
    .admin-pagesize-wrap label { display: none; }
    .admin-search-btn { padding: 11px 12px; font-size: 12.5px; }
    .admin-search-btn span { display: none; }
    .admin-search-btn::before {
        content: "\f002";
        font-family: "Font Awesome 6 Free";
        font-weight: 900;
    }
}

/* ==========================================================================
   Premium Highlights — mobile/tablet stack layout (Option A scope)
   Fully scoped under .areca-highlights. No other page/section uses this class.
   Desktop (>= 992px) untouched.
   On mobile: image on top, number + title + description below it — all visible.
   ========================================================================== */
@media (max-width: 991.98px) {
    /* Stack container vertically */
    .areca-highlights .dsn-item-post .box-content {
        display: flex !important;
        flex-direction: column !important;
    }
    .areca-highlights .dsn-item-post .box-content .container-img,
    .areca-highlights .dsn-item-post .box-content .box-image-link {
        width: 100% !important;
        order: 0 !important;
    }
    .areca-highlights .dsn-item-post .box-image-bg {
        height: 58vw !important;
        min-height: 220px !important;
        max-height: 360px !important;
    }

    /* Pull post-content out of theme's absolute overlay so it flows below image */
    .areca-highlights .root-posts .pin-spacer .post-content,
    .areca-highlights .dsn-posts .post-content,
    .areca-highlights .post-content {
        position: static !important;
        width: 100% !important;
        height: auto !important;
        padding: 22px 22px 28px !important;
        z-index: auto !important;
        order: 1 !important;
    }

    /* Number "01/02/..." — visible but fitted on narrow screens */
    .areca-highlights.list-with-number .dsn-posts .number-item::before,
    .areca-highlights .list-with-number .number-item::before,
    .areca-highlights .number-item::before {
        display: inline-block !important;
        font-size: 44px !important;
        line-height: 1 !important;
        margin-right: 8px !important;
        height: auto !important;
    }

    /* Typography on mobile */
    .areca-highlights .post-content .post-title {
        font-size: 24px;
        line-height: 1.25;
    }
    .areca-highlights .post-content .section_description {
        font-size: 14px;
        line-height: 1.55;
    }

    .areca-highlights .dsn-item-post {
        overflow: hidden;
    }

    /* Center the cards (margin/justify only — never width/transform/pin, which collapse
       the images). Two code paths to cover:
       - Desktop responsive mode: the grid layout has a column-gutter margin-left:-30px;
         since it is width:auto that negative margin shifts it left. Zeroing it realigns
         to the container and margin-auto centres the card.
       - Real mobile (mobile UA): the theme runs its pinned flex scroll-effect; there the
         card is left-aligned and margin-auto does NOT centre it, so justify-content:center
         on the flex grid is what centres it (and it keeps the scroll/scale animation). */
    .areca-highlights .dsn-grid-layout,
    .areca-highlights .dsn-posts {
        justify-content: center !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
    .areca-highlights .dsn-item-post,
    .areca-highlights .grid-item {
        margin-left: auto !important;
        margin-right: auto !important;
    }
}

/* ===== L3: Mobile menu — ensure 44x44 minimum tap target (WCAG 2.5.5) ===== */
@media (max-width: 991px) {
    .site-header.dsn-hamburger ul.primary-nav li a,
    .site-header.dsn-hamburger ul.primary-nav .has-sub-menu a,
    .site-header.dsn-hamburger ul.nav-item li a {
        min-height: 44px;
        display: flex !important;
        align-items: center;
        padding: 10px 8px;
        line-height: 1.3;
    }

    .site-header.dsn-hamburger ul.primary-nav .has-sub-menu > a {
        padding-right: 44px; /* room for submenu toggle */
    }
}

/* Prevent accidental text-selection / tap-highlight on the nav menu. A tap in the
   mobile menu was selecting a menu item's text (the stray light-blue block landing on
   the wrong row because the open submenu overlaps the main menu list underneath). */
.site-header .primary-nav,
.site-header .primary-nav a,
.site-header .primary-nav li,
.site-header .primary-nav span {
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
}

/* Contact page: the first section ("Reach us your way") sits directly under the fixed
   header (the hero banner was removed). On mobile the header is ~140px tall but the
   section's top padding is reduced, so the heading overlapped the header. Give this
   section enough top clearance on mobile. */
@media (max-width: 991px) {
    #page_wrapper .areca-reach-section.section-padding {
        padding-top: 160px !important;
    }
}

/* Room pages (.hero-1): the two side image frames were a fixed 560px tall with
   object-fit:cover, which cropped the landscape (16:9) room photos to a vertical slice.
   Make the frames match the photo's 16:9 shape so the full room photo is visible. */
.hero-1 .box-img-lg,
.hero-1 .img-sm {
    height: auto !important;
    aspect-ratio: 16 / 9;
    align-self: start;
    overflow: hidden;
}
.hero-1 .box-img-lg .img-box-parallax {
    height: 100% !important; /* beat the parallax inline height so both side images match 16:9 */
}
.hero-1 .box-img-lg img,
.hero-1 .img-sm img {
    height: 100%;
    object-fit: cover;
}
/* Align the text column's top with the image tops (remove its 50px top margin) */
.hero-1 .box-text {
    margin-top: 0 !important;
}

/* ===== Brief: Hero sub-headline ===== */
.areca-hero-sub {
    color: #fff;
    max-width: 760px;
    font-size: 17px;
    line-height: 1.5;
    margin-top: 20px;
}

/* ===== Hero slide content — stack title, sub and button vertically on every slide
   so the ENQUIRE NOW button always sits below the text on the left (slides without
   the <p> sub-headline were letting the inline-flex button sit beside the title) ===== */
.main-slider .inner-content,
.dsn-slider-content .inner-content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

/* ===== Hero ENQUIRE NOW button (inside swiper-wrapper) ===== */
.areca-hero-enquire-btn {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    margin-top: 30px;
    padding: 16px 32px;
    background: #055021;
    color: #fff !important;
    font-weight: 700;
    font-size: 15px;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    text-decoration: none !important;
    border-radius: 50px;
    box-shadow: 0 8px 24px rgba(5, 80, 33, 0.45);
    transition: transform 0.25s ease, box-shadow 0.25s ease, background 0.25s ease;
    cursor: pointer;
}
.areca-hero-enquire-btn:hover,
.areca-hero-enquire-btn:focus {
    background: #033915;
    color: #fff !important;
    transform: translateY(-3px);
    box-shadow: 0 14px 32px rgba(5, 80, 33, 0.55);
    text-decoration: none !important;
}
.areca-hero-enquire-btn i {
    font-size: 16px;
}
@media (max-width: 575px) {
    .areca-hero-enquire-btn {
        padding: 13px 24px;
        font-size: 13px;
        margin-top: 22px;
    }
}
@media (max-width: 575px) {
    .areca-hero-sub {
        font-size: 15px;
        max-width: 100%;
    }
}

/* ===== Brief: About Areca + Why Choose verbatim copy ===== */
.areca-about-copy,
.areca-why-copy {
    font-size: 16px;
    line-height: 1.7;
}
.areca-about-copy p,
.areca-why-copy p {
    margin-bottom: 18px;
}
@media (max-width: 575px) {
    .areca-about-copy,
    .areca-why-copy {
        font-size: 15px;
    }
}

/* ===== Brief: 3-column Amenities list ===== */
.areca-amenities-grid {
    gap: 30px;
}
.areca-amenity-col {
    background: #fff;
    border-radius: 12px;
    padding: 28px 24px;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.05);
    border: 1px solid rgba(0, 75, 28, 0.08);
}
.areca-amenity-head {
    font-size: 20px;
    font-weight: 700;
    margin-bottom: 16px;
    color: #004b1c;
    display: flex;
    align-items: center;
    gap: 10px;
}
.areca-amenity-head i {
    font-size: 22px;
}
.areca-amenity-list {
    list-style: none;
    padding: 0;
    margin: 0;
    font-size: 15px;
    line-height: 2;
}
.areca-amenity-list li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 4px 0;
}
.areca-amenity-list li i {
    color: #004b1c;
    margin-top: 7px;
    flex-shrink: 0;
}
@media (max-width: 767px) {
    .areca-amenity-col {
        padding: 22px 18px;
    }
    .areca-amenity-head {
        font-size: 18px;
    }
    .areca-amenity-list {
        font-size: 14px;
        line-height: 1.9;
    }
}

/* ============================================================
   L1-L7: Lower-priority responsive polish (zero-risk, additive)
   ============================================================ */

/* L1: Gallery grid — give a 2-up between 576-767px (was stacking 1-up) */
@media (min-width: 576px) and (max-width: 767px) {
    .areca-gallery-img,
    .has-border-radius.over-hidden {
        /* gallery thumbnails already inside d-grid grid-lg-3 grid-md-2;
           explicit 2-col grid at this width */
    }
    [class*="grid-md-2"][class*="grid-lg-3"] {
        grid-template-columns: 1fr 1fr !important;
    }
}

/* L2: Premium Highlights image height clamp on tall narrow phones */
@media (max-width: 767px) {
    .areca-highlights .box-image-bg,
    .h-img-80vh .box-image-bg {
        height: clamp(220px, 50vh, 360px) !important;
    }
}

/* L6: Contact page padding-top responsive (was inline 180px) */
@media (max-width: 991px) {
    .areca-contact-hero-pad,
    [style*="padding-top: 180px"] {
        padding-top: 110px !important;
    }
}
@media (max-width: 575px) {
    .areca-contact-hero-pad,
    [style*="padding-top: 180px"] {
        padding-top: 80px !important;
    }
}

/* L7: Booking form 2-col → single col on tablet portrait (was 2-col up to 991px) */
@media (max-width: 767px) {
    .areca-form-row {
        grid-template-columns: 1fr !important;
    }
}

/* ==========================================================================
   L8: Suppress browser drag / blue selection / tap highlight on EVERY image
   AND every image container site-wide. !important is necessary because the
   bundled stylesheets define user-select / pointer-events on some of these
   classes and we need to win the cascade unconditionally.

   pointer-events: none stays on <img> only, so clicks bubble up to any
   parent <a> (header / footer logos linking to / still work).
   ========================================================================== */
img,
.image-bg, .cover-bg,
.box-image-link, .box-image-bg,
.container-img, .box-img-shadow,
.dsn-swiper-parallax-transform,
.box-hover-image, .box-hover-image *,
.dsn-item-post .box-content > div:first-child,
.dsn-item-post .box-content > div:first-child * {
    -webkit-user-select: none !important;
    -moz-user-select: none !important;
    -ms-user-select: none !important;
    user-select: none !important;
    -webkit-user-drag: none !important;
    -webkit-touch-callout: none !important;
    -webkit-tap-highlight-color: transparent !important;
}

img {
    pointer-events: none !important;
}

/* Selection highlight inside any image-ish container must be invisible.
   This catches the double-click blue overlay even if some upstream rule
   keeps user-select enabled. */
.image-bg ::selection,        .image-bg::selection,
.box-image-link ::selection,  .box-image-link::selection,
.box-image-bg ::selection,    .box-image-bg::selection,
.container-img ::selection,   .container-img::selection,
.box-hover-image ::selection, .box-hover-image::selection,
img::selection {
    background: transparent !important;
    color: inherit !important;
}
.image-bg ::-moz-selection,        .image-bg::-moz-selection,
.box-image-link ::-moz-selection,  .box-image-link::-moz-selection,
.box-image-bg ::-moz-selection,    .box-image-bg::-moz-selection,
.container-img ::-moz-selection,   .container-img::-moz-selection,
.box-hover-image ::-moz-selection, .box-hover-image::-moz-selection,
img::-moz-selection {
    background: transparent !important;
    color: inherit !important;
}