@import url('https://fonts.googleapis.com/css2?family=Figtree:ital,wght@0,300..900;1,300..900&display=swap');

/* =====================================================================
   TABLE OF CONTENTS
   1. Root Variables & Base
   2. Loading Page
   3. Common Section Backgrounds (dark / dark-texture / light / blue)
   4. Main Slideshow (hero, image + video mix)
   5. Reservation Widget (Roiback / SmartBooking Pro Engine)
   6. Header / Top Bar / Main Navbar / Mobile Menu
   7. All Page
   8. Home — Our Thematic Resorts
   9. Home — Meeting & Events
   10. Home — Package & Special Offers
   11. Home — Restaurants
   12. Home — Reviews (TripAdvisor)
   13. Home — Hotel Plan
   14. Home — Map (Google Maps Embed)
   15. Home — Experience
   16. Accommodation Page — Thematic Resorts Tabs/Slider
   17. Accommodation Sub Page — Room Variant / Facilities / Other Rooms
   18. Meeting Sub Page — Gallery Row
   19. Meeting Package Tabs
   20. Special Offers Page — Tabs & Cards
   21. Offer Single Page
   22. Restaurants Page
   23. Experiences Page
   24. Conservations Page
   25. News Page
   26. The Meerkat Club — Royal Safari Garden Rewards Page
   27. Privacy Policy
   28. Footer
   29. Global Responsive Overrides (cross-section, small tweaks)
   30. ROYAL SAFARI GARDEN — SITE-WIDE ANIMATIONS ADD-ON
===================================================================== */


/* =====================================================================
   1. ROOT VARIABLES & BASE
===================================================================== */
header { --topbar-bg: #f2f2e8; --navbar-bg: #f2f2e8; --text-dark: #3F3530; --accent-gold: #ffb853; --icon-bg: #3F3530; --divider-color: #3F3530; font-family: inherit; }

:root { --font-primary: "Figtree", sans-serif; --font-secondary: "Figtree", sans-serif; --background-muted: #3F3530; }

hr { border-top: 1px solid var(--primary-color); }

.uk-tab > .uk-active > a { border-color: var(--primary-color); }

.common-wrapper .common-content .common-row { padding: 100px 0; }

a, .uk-link { color: var(--secondary-color); }

/* =====================================================================
   2. LOADING PAGE
===================================================================== */
#site-loader.is-hidden { opacity: 0; visibility: hidden; pointer-events: none; }

.site-loader__logo { width: 140px; height: auto; opacity: 0; animation: site-loader-fade-in 0.7s ease forwards 0.15s; }

#site-loader { position: fixed; inset: 0; z-index: 999999; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0px; background: #f2f2e8; transition: opacity 0.5s ease, visibility 0.5s ease; }

.site-loader__text { font-size: 14px; letter-spacing: 3px; font-weight: 400; color: var(--primary-color); opacity: 0; text-transform: uppercase; animation: site-loader-fade-in 0.7s ease forwards 0.4s; }

body.is-loading .icon-whatsapp-popup, body.is-loading .btn-book-footer { display: none !important; }

.site-loader__dot { display: inline-block; animation: site-loader-dot-pulse 1.2s ease-in-out infinite; }

.site-loader__dot:nth-child(2) { animation-delay: 0.15s; }

.site-loader__dot:nth-child(3) { animation-delay: 0.3s; }

@keyframes site-loader-dot-pulse {
    0%, 80%, 100% { opacity: 0.2; }
    40% { opacity: 1; }
}

@keyframes site-loader-fade-in {
    to { opacity: 1; }
}

body.is-loading { overflow: hidden; }

/* =====================================================================
   3. COMMON SECTION BACKGROUNDS
===================================================================== */
/* ----- background-dark ----- */
.common-wrapper.background-dark { background-image: url('/wp-content/themes/wcl/assets/images/bg-brown-2.jpg'); background-blend-mode: overlay; background-size: 1440px !important; background-position: center !important; background-repeat: repeat !important; }

.common-wrapper.background-dark p { color: #f2f2e8; font-size: 14px; font-weight: lighter; letter-spacing: 0.5px; }

.common-wrapper.background-dark h1 { color: var(--secondary-color); text-align: center; font-size: 44px !important; font-weight: 700; text-transform: none !important; }

.common-wrapper.background-dark h2 { color: var(--secondary-color); text-align: center; font-size: 44px !important; font-weight: 700; text-transform: none !important; }

/* ----- background-dark-texture ----- */
.common-wrapper.background-dark-texture { background-image: url('/wp-content/themes/wcl/assets/images/bg-brown-texture.jpg'); background-blend-mode: overlay; background-size: 1440px !important; background-position: center !important; background-repeat: repeat !important; }

.common-wrapper.background-dark-texture p { color: #f2f2e8; font-size: 14px; font-weight: lighter; letter-spacing: 0.4px; }

.common-wrapper.background-dark-texture h1 { color: var(--secondary-color); text-align: center; font-size: 44px !important; font-weight: 700; text-transform: none !important;  }

.common-wrapper.background-dark-texture h2 { color: var(--secondary-color); text-align: center; font-size: 44px !important; font-weight: 700; text-transform: none !important;  }

/* ----- background-light ----- */
.common-wrapper.background-light { background-image: url('/wp-content/themes/wcl/assets/images/bg-texture-2.jpg'); background-blend-mode: overlay; background-size: 1440px !important; background-position: center !important; background-repeat: repeat !important; }

.common-wrapper.background-light p, .common-wrapper.background-light li { font-size: 14px; font-weight: lighter; letter-spacing: 0.4px; color: var(--primary-color); }

.common-wrapper.background-light h1 { text-align: center; font-size: 44px !important; font-weight: 700; text-transform: none !important; }

.common-wrapper.background-light h2 { text-align: center; font-size: 44px !important; font-weight: 700; text-transform: none !important; }

h4 { font-weight: 600; font-size: 22px; letter-spacing: .5px; text-transform: uppercase !important; line-height: 1.2; }

/* ----- background-blue ----- */
.common-wrapper.background-blue { background-color: #f2f2e8; }

.common-wrapper.background-blue p { font-size: 14px; font-weight: lighter; letter-spacing: 0.4px; }

.common-wrapper.background-blue h1 { text-align: center; font-size: 44px !important; font-weight: 700; text-transform: none !important; }

.common-wrapper.background-blue h2 { text-align: center; font-size: 44px !important; font-weight: 700; text-transform: none !important; }

/* =====================================================================
   4. MAIN SLIDESHOW (hero, image + video mix)
===================================================================== */
.common-header-cover .common-header-intro .uk-position-center, .common-slideshow .common-slideshow-intro .slideshow-title { text-align: center; top: 80%; }

.common-header-cover .common-header-intro h1.header-title, .common-slideshow .common-slideshow-intro .slideshow-title  { font-size: 44px !important; font-weight: 700; text-transform: none !important; line-height: 1.2; color: #f2f2e8; }

.common-slideshow .common-slideshow-intro .slideshow-sub-title { color: #f2f2e8; font-size: 16px; font-weight: 600; }

.common-header-cover .common-header-intro .header-sub-title { font-size: 16px; letter-spacing: 0.5px; font-weight: 600; }

.common-slideshow .common-slideshow-intro .uk-position-center { text-align: center; top: 75%; }

.main-slideshow-nav { position: absolute; top: 60%; transform: translateY(-50%); z-index: 3; display: flex; align-items: center; justify-content: center; transition: transform 0.2s ease;   }

.main-slideshow-nav-prev { left: 30px; }

.main-slideshow-nav-next { right: 30px; }

.main-slideshow-nav img { width: 24px; height: auto; display: block; pointer-events: none; }

.main-slideshow-nav:hover { transform: translateY(-50%) scale(1.1); }

@media (max-width: 1024px) {
    #uk-slideshow-1.uk-slideshow-items, .common-slideshow .main-slideshow .uk-slideshow-items { min-height: 0 !important; aspect-ratio: 4 / 3 !important; }
}

@media (max-width: 767px) {
    .main-slideshow-nav { width: 20px; height: 20px; }
    .main-slideshow-nav-prev { left: 15px; }
    .main-slideshow-nav-next { right: 15px; }
}

@media (max-width: 480px) {
    #uk-slideshow-1.uk-slideshow-items, .common-slideshow .main-slideshow .uk-slideshow-items { min-height: 0 !important; aspect-ratio: 3 / 4 !important; }
    .common-header-cover .common-header-intro h1.header-title, .common-slideshow .common-slideshow-intro .slideshow-title { font-size: 34px !important; }
}

/* =====================================================================
   5. RESERVATION WIDGET (Roiback / SmartBooking Pro Engine)
===================================================================== */
.booking-widget-wrap div#roi-search-engine { width: 100%; max-width: 1200px !important; }

.roi-search-engine__form { width: 100% !important; max-width: 1200px !important; border-radius: 0 !important; background: #f2f2e8 !important; padding: 24px 40px !important; box-shadow: none !important; }

.roi-search-engine__label { color: var(--primary-color) !important; font-size: 12px !important; font-weight: 700 !important; letter-spacing: 1px !important; text-transform: uppercase !important; }

.roi-search-engine__field--day { font-family: var(--font-primary); color: var(--primary-color) !important; }

.roi-search-engine__occupancy-text { color: var(--primary-color) !important; font-size: 12px !important; font-weight: 600 !important; letter-spacing: 0px !important; text-transform: uppercase !important; font-family: var(--font-secondary); }

.roi-search-engine__occupancy-info .svg-roi { filter: brightness(0) saturate(100%) invert(17%) sepia(11%) saturate(890%) hue-rotate(336deg) brightness(98%) contrast(86%); }

.roi-search-engine__occupancy-info { background-color: var(--secondary-color); }

.roi-search-engine__occupancy-button { display: flex; flex-direction: column; justify-content: space-between; }

.roi-search-engine__occupancy-text { margin-bottom: 6px; }

.roi-search-engine__item { width: 35%; }

.roi-search-engine__field--promo { background-color: unset; border-color: var(--primary-color); }

.booking-widget-wrap { position: relative; z-index: 15; margin-top: -58px; margin-bottom: -50px; padding: 0 0px; box-sizing: border-box; max-width: 1200px; margin-left: auto; margin-right: auto; display: flex; align-items: stretch; background: #f2f2e8; border-radius: 10px; box-shadow: 0 20px 50px rgba(0, 0, 0, 0.25); overflow: hidden; }

.booking-widget-label { flex-shrink: 0; display: flex; flex-direction: column; justify-content: center; padding: 24px 30px; font-family: var(--font-primary); line-height: 1.15; }

.booking-widget-label strong { font-size: 30px; font-weight: 700; color: var(--primary-color); text-transform: uppercase; letter-spacing: 0.5px; }

.booking-widget-label span { font-size: 22px; font-weight: 400; color: var(--primary-color); text-transform: uppercase; }

.roi-engine-container { flex: 1; min-width: 0; display: flex; align-items: center; min-height: 96px; }

.roi-search-engine__form { max-width: none !important; width: 100% !important; margin: 0 !important; box-shadow: none !important; border-radius: 0 !important; padding: 0px 20px !important; box-sizing: border-box; display: flex; justify-content: space-between; align-items: stretch; }

:focus-visible { outline: unset; }

.roi-search-engine__field--action { background-color: #3f3530 !important; background-blend-mode: overlay; background-size: 500% !important; background-position: center !important; background-repeat: no-repeat !important; border: none !important; color: var(--secondary-color) !important; font-size: 16px !important; width: 150px; font-weight: 600; letter-spacing: 1px; text-transform: uppercase; padding: 10px 20px; display: inline-block; transition: opacity 0.2s ease; border-radius: 5px; text-align: center; background-image: url(/wp-content/themes/wcl/assets/images/bg-btn-white-3.png) !important; }

.roi-search-engine__occupancy-button { -webkit-appearance: none !important; appearance: none !important; width: 100% !important; display: -webkit-box !important; display: -webkit-flex !important; display: flex !important; }

.roi-search-engine__occupancy-wrap { width: 100% !important; }

.roi-search-engine__occupancy-info { width: auto !important; -webkit-box-flex: 1 !important; -webkit-flex: 1 1 0% !important; flex: 1 1 0% !important; min-width: 0 !important; }

@media (max-width: 991px) {
    .booking-widget-wrap { margin-top: -50px; margin-bottom: -30px; padding: 0 12px; flex-direction: column; }
    .booking-widget-label { border-right: none; border-bottom: 1px solid rgba(63, 53, 48, 0.15); padding: 16px 20px; flex-direction: row; gap: 8px; align-items: baseline; }
    .roi-engine-container { min-height: 70px; }
    .roi-search-engine__form { padding: 16px 20px !important; }
}

@media (max-width: 600px) {
    .booking-widget-wrap { margin-top: -30px; margin-bottom: 0; }
    .booking-widget-label strong { font-size: 22px; }
    .booking-widget-label span { font-size: 16px; }
}

/* =====================================================================
   6. HEADER / TOP BAR / MAIN NAVBAR / MOBILE MENU
===================================================================== */
header a { text-decoration: none; color: var(--text-dark); }

.common-navbar .uk-navbar-nav > .current-menu-item > a, .common-navbar .uk-navbar-nav > .current-menu-parent > a, .common-navbar .uk-navbar-nav .sub-menu .current-menu-item.menu-item-type-post_type > a, .common-navbar .uk-navbar-nav .uk-navbar-dropdown-nav .current-menu-item.menu-item-type-post_type > a { color: var(--secondary-color) !important; }

.common-navbar .uk-navbar-dropdown-nav .menu-group-heading a:hover { color: var(--primary-color); }

.common-topbar { background: var(--topbar-bg); position: relative; z-index: 20; }

.common-topbar-inner { max-width: 1600px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; padding: 30px 40px; position: relative; }

.common-topbar-left { display: flex; align-items: center; gap: 30px; flex: 1; }

.lang-switcher { position: relative; }

.lang-current { background: none; border: none; cursor: pointer; display: flex; align-items: center; gap: 6px; font-size: 13px; letter-spacing: 1px; color: var(--text-dark); text-transform: uppercase; }

.lang-dropdown { background: #f2f2e8; padding: 10px 15px; box-shadow: 0 4px 12px rgba(0,0,0,0.1); border-radius: 4px; }

.common-topbar-logo { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); text-align: center; }

.common-topbar-logo img { max-width: 140px; height: auto; }

.common-topbar-right { display: flex; align-items: center; gap: 18px; flex: 1; justify-content: flex-end; }

.topbar-signin { display: flex; align-items: center; gap: 8px; font-size: 12px; letter-spacing: 1px; text-transform: uppercase; white-space: nowrap; }

.topbar-signin span[uk-icon], .topbar-signin svg { font-size: 16px; }

.topbar-social { display: flex; align-items: center; gap: 10px; list-style: none; margin: 0; padding: 0; }

.topbar-social li a svg, .topbar-social li a img { width: 25px; height: 25px; fill: #f2f2e8; }

.topbar-social li a:hover { background: var(--accent-gold); }

.topbar-divider-1, .topbar-divider-2 { width: 1px; height: 20px; background: var(--divider-color); display: inline-block; }

.topbar-member { font-size: 12px; letter-spacing: 0px; text-transform: uppercase; white-space: nowrap; }

.topbar-member:hover, .topbar-signin:hover { color: var(--accent-gold); }

.common-navbar { background: var(--navbar-bg); box-shadow: none; position: fixed; z-index: 100; transition: top 0.1s ease; }

.common-navbar.is-scrolled { top: 0; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); }

.common-navbar .common-navbar-main { max-width: 1600px; margin: 0 auto; position: relative; display: flex !important; align-content: space-between; flex-wrap: wrap; padding: 30px 30px 20px 30px; gap: 30px; justify-content: center; }

.common-navbar .common-navbar-main .common-logo { width: auto; }

.common-navbar-container.common-navbar-fixed { display: block; width: 100%; }

.common-navbar-container.common-navbar-fixed [uk-navbar] { display: grid; grid-template-columns: 1fr auto; align-items: center; width: 100%; padding: 0; }

.common-navbar-offcanvas .uk-subnav .uk-dropdown .uk-nav > li > a { padding: 10px 0 !important; }

.common-navbar-fixed .uk-navbar-right { margin-left: 0; justify-self: end; }

.uk-navbar-nav { display: flex; align-items: center; list-style: none; margin: 0; padding: 0; gap: 34px; }

.uk-navbar-nav > li > a { font-size: 12px !important; letter-spacing: 0.5px; text-transform: uppercase; color: var(--text-dark) !important; padding: 6px 0; position: relative; transition: color 0.2s ease; }

.uk-navbar-nav > li > a:hover { color: var(--accent-gold); }

.uk-navbar-nav > li { position: relative; }

.uk-navbar-nav .sub-menu { position: absolute; top: 100%; left: 0; background: #f2f2e8; min-width: 200px; box-shadow: 0 8px 20px rgba(0,0,0,0.08); list-style: none; padding: 10px 0; margin: 0; display: none; z-index: 30; }

.uk-navbar-nav > li:hover .sub-menu { display: block; }

.uk-navbar-nav .sub-menu li a { display: block; padding: 8px 20px; font-size: 13px; white-space: nowrap; }

.uk-navbar-nav .sub-menu li a:hover { background: #f6f4ec; color: var(--accent-gold); }

.uk-offcanvas-overlay::before { background: rgb(0 0 0 / 25%); }

.common-header-cover::after { content: none; }

.common-header-cover .uk-background-cover { position: relative; }

.common-navbar .uk-navbar-dropdown li { border-bottom: none; }

.common-header-cover .uk-background-cover::after { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.2); display: block; z-index: 1; pointer-events: none; }

.common-navbar .common-navbar-main .hamburger_box { margin: 0 auto; margin-bottom: 0px; padding: 0 20px; }

.common-navbar-button { background-image: url('/wp-content/themes/wcl/assets/images/bg-btn-white-3.png') !important; background-color: var(--primary-color) !important; background-blend-mode: overlay; background-size: 500% !important; background-position: center !important; background-repeat: no-repeat !important; border: none !important; color: var(--secondary-color) !important; font-size: 13px !important; width: 150px; font-weight: 600; letter-spacing: 1px; text-transform: uppercase; padding: 10px 10px; display: inline-block; transition: opacity 0.2s ease; border-radius: 5px; text-align: center; }

.common-navbar-button:hover { opacity: 0.9; }

.common-navbar-button-org { position: relative; overflow: hidden; background-image: none !important; background-color: var(--secondary-color) !important; border: none !important; color: #3f3530 !important; font-size: 13px !important; width: 150px; font-weight: 600; letter-spacing: 1px; text-transform: uppercase; padding: 10px 20px; display: inline-block; transition: opacity 0.2s ease; border-radius: 5px; text-align: center; z-index: 1; }

.common-navbar-button-org::before { content: ''; position: absolute; inset: 0; background-image: url('/wp-content/themes/wcl/assets/images/bg-btn-brown-01.png'); background-size: 500%; background-position: center; background-repeat: no-repeat; opacity: 0.4; pointer-events: none; z-index: 0; }

.common-navbar-container.common-navbar-hamburger { display: none; }

.common-navbar-container.common-navbar-hamburger [uk-navbar] { display: flex; align-items: center; justify-content: space-between; padding: 14px 20px; }

.hamburger_box { width: 26px; height: 20px; position: relative; cursor: pointer; }

.hamburger_inner, .hamburger_inner::before, .hamburger_inner::after { content: ''; position: absolute; width: 100%; height: 2px; background: var(--text-dark); left: 0; }

.hamburger_inner { top: 50%; transform: translateY(-50%); }

.hamburger_inner::before { top: -8px; }

.hamburger_inner::after { top: 8px; }

.common-navbar-hamburger .common-navbar-button { background: var(--icon-bg); color: var(--accent-gold) !important; font-size: 13px !important; font-weight: 600; letter-spacing: 1px; text-transform: uppercase; padding: 10px 30px !important; display: inline-block; transition: opacity 0.2s ease; border-radius: 5px; min-height: auto; }

.common-navbar .uk-navbar-dropdown-nav .menu-group-heading a { display: block; color: var(--primary-color); font-weight: 500; letter-spacing: 1px; text-transform: uppercase; font-size: 14px; display: flex; }

.sub-menu--auto-cols { columns: 2 !important; column-gap: 50px !important; column-rule: 1px solid var(--primary-color) !important; min-width: 440px !important; /* padding: 14px 20px !important; */; }

.sub-menu--auto-cols > li { break-inside: avoid; }

.menu-group-heading a:after { display: block; background: var(--primary-color); width: 40%; height: 1px; position: absolute; content: ""; right: 0px; margin-right: 20px; }

.uk-offcanvas-bar { background: #f2f2e8; padding: 30px 24px; }

.uk-offcanvas-close { background: none; border: none; font-size: 20px; cursor: pointer; margin: 10px; }

.common-navbar-offcanvas .uk-offcanvas-bar { background: var(--topbar-bg); }

.uk-subnav { list-style: none; margin: 0; padding: 0; }

.uk-subnav > li > a { display: block; padding: 10px 0; font-size: 14px; text-transform: uppercase; letter-spacing: 0.5px; color: var(--text-dark); }

.main-social-media { margin-top: 30px; }

.main-social-media label { display: block; font-size: 12px; text-transform: uppercase; letter-spacing: 1px; color: #888; margin-bottom: 12px; }

.main-social-media ul { display: flex; gap: 10px; list-style: none; margin: 0; padding: 0; }

.main-social-media ul li a { width: 34px; height: 34px; display: flex; align-items: center; justify-content: center; background: var(--icon-bg); border-radius: 4px; color: #f2f2e8; }

.common-navbar-offcanvas .uk-offcanvas-bar .uk-close, .common-navbar-offcanvas .uk-offcanvas-bar .uk-subnav > * > :first-child, .common-navbar-offcanvas .main-social-media ul li a, .common-navbar-offcanvas .uk-dropdown-nav > li > a, .common-navbar-offcanvas .main-social-media label { font-size: 12px; color: var(--primary-color); }

.btn-book-footer { display: none; }

.btn-book-footer .btn-book::before { content: ''; position: absolute; inset: 0; background-image: url(/wp-content/themes/wcl/assets/images/bg-btn-brown-01.png); background-size: 300%; background-position: center; background-repeat: no-repeat; opacity: 0.4; pointer-events: none; z-index: 0; }

.btn-content-left { display: flex; align-items: center; }

.btn-content-left img { width: 60px; padding-right: 10px; }

.btn-content-right { padding: 0 0 0 25px; border-left: 1px solid var(--primary-color); }

.btn-content-right span { letter-spacing: 0; font-size: 13px; line-height: 1; display: flex; }

.btn-content-right h4 { line-height: 1; }

.common-navbar-fixed.is-collapsed { display: none !important; }

.common-navbar-hamburger.is-active { display: block !important; }

.common-navbar .uk-drop.uk-open.uk-navbar-dropdown { min-width: max-content; padding: 10px 20px; }

.common-navbar .uk-navbar-dropdown-nav > li > a { font-size: 12px; padding: 7px 0; color: var(--primary-color); }

.common-navbar .common-navbar-main .hamburger { padding: 0 0px; }

#uk-mobile-menu > li { padding: 5px 20px 0px 0; }

/* ให้ลูกศรทุกตัวหมุนลื่นๆ ตอนเปิด/ปิด */
.uk-navbar-parent-icon svg {
    transition: transform 0.2s ease;
}

/* 1. กำหนดให้รายการเมนูแม่ใน MORE เป็นจุดอ้างอิงตำแหน่ง */
#uk-menu-more-list > li.menu-item-has-children,
.uk-navbar-dropdown-nav > li.menu-item-has-children,
.uk-menu-more-nested {
    position: relative !important;
}

/* 2. Override ค่า inline style ของ UIkit JS ล็อกขอบบนให้ตรงกับข้อความเมนูแม่ */
#uk-menu-more-list li .uk-navbar-dropdown,
.uk-navbar-dropdown-nav li .uk-navbar-dropdown,
.uk-menu-more-nested > .uk-navbar-dropdown {
    top: -10px !important;       /* ชดเชย Padding 10px ของกล่องแม่ เพื่อให้บรรทัดแรกตรงกันเป๊ะ */
    right: 100% !important;      /* ให้ยื่นออกไปทางซ้าย */
    left: auto !important;
    margin: 0 !important;
}

/* =========================================================
   1. รีเซ็ตคุณสมบัติไอคอนลูกศร UIkit (.uk-navbar-parent-icon)
   ========================================================= */
.common-navbar .uk-navbar-parent-icon,
#uk-menu-desktop .uk-navbar-parent-icon,
#uk-menu-more-list .uk-navbar-parent-icon,
.uk-navbar-dropdown .uk-navbar-parent-icon {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: transform 0.3s cubic-bezier(0.25, 1, 0.4, 1) !important;
    transform-origin: center center !important;
    pointer-events: none !important; /* ป้องกันลูกศรแย่งโฟกัสเมาส์ */
}

/* =========================================================
   2. เมนูหลักด้านนอก (เช่น ROOMS & VILLAS) -> หมุนลง 180deg
   ========================================================= */
#uk-menu-desktop > li > a[aria-expanded="true"] .uk-navbar-parent-icon,
#uk-menu-desktop > li:hover > a .uk-navbar-parent-icon {
    transform: rotate(180deg) !important;
}

/* =========================================================
   3. หมุนลูกศรเมนูใน MORE และ Submenu ย่อย (ให้ชี้ไปทางเดียวกับเมนูย่อยทางซ้าย)
   ========================================================= */
/* =========================================================
   หมุนลูกศรเมนูใน MORE ให้หันไปทาง "ซ้าย" (90deg)
   ========================================================= */
.uk-navbar-dropdown-nav .uk-navbar-parent-icon,
#uk-menu-more-list .uk-navbar-parent-icon {
    display: inline-flex !important;
    transition: transform 0.3s cubic-bezier(0.25, 1, 0.4, 1) !important;
    transform-origin: center center !important;
    pointer-events: none !important;
}

/* เมื่อ Hover หรือเปิดเมนูย่อย ให้หมุน 90 องศา หันไปทางซ้าย */
.uk-navbar-dropdown-nav li > a[aria-expanded="true"] .uk-navbar-parent-icon,
.uk-navbar-dropdown-nav li:hover > a .uk-navbar-parent-icon,
#uk-menu-more-list li > a[aria-expanded="true"] .uk-navbar-parent-icon,
#uk-menu-more-list li:hover > a .uk-navbar-parent-icon {
    transform: rotate(90deg) !important; /* เปลี่ยนจาก 180deg เป็น 90deg เพื่อให้หันไปทางซ้าย */
}


/* ----- เลื่อนแบบ smooth เวลาคลิกลิงก์ anchor ----- */
html { scroll-behavior: smooth; }

/* ซ่อนปุ่ม WhatsApp popup และแถบ Book Now ล่างจอ ตอนเปิดเมนู offcanvas
   (UIkit ใส่คลาส uk-offcanvas-page ให้ <html> เองอัตโนมัติเมื่อ offcanvas เปิดอยู่ —
   ไม่ต้องเขียน JS เพิ่ม อาศัยกลไกนี้ของ UIkit โดยตรง) */
html.uk-offcanvas-page .icon-whatsapp-popup, html.uk-offcanvas-page .btn-book-footer { display: none !important; }

/* ----- ชดเชยความสูงของแถบเมนู fixed (topbar + navbar) ไม่ให้บัง section เป้าหมาย
   ตอนเลื่อนไปถึง — ปรับตัวเลขให้ตรงกับความสูงจริงของแถบเมนูตอนนี้ ----- */
section[id] { scroll-margin-top: 100px; /* ปรับค่านี้ให้พอดีกับความสูง topbar+navbar จริง */; }

@media (max-width: 1100px) {
    .topbar-social, .topbar-divider-1 { display: none; }
}

@media (max-width: 1080px) {
    .common-topbar-inner { display: flex; align-items: center; justify-content: center; padding: 14px 16px; position: relative; flex-wrap: nowrap; }
    .common-topbar-left { display: none; }
    .common-topbar-logo { position: static; transform: none; text-align: left; }
    .common-topbar-logo img { max-width: 90px; }
    /* .common-topbar-right { display: none; } */
    .topbar-social li a, .topbar-social li { width: 28px; height: 28px; }
    .topbar-social li a svg, .topbar-social li a img { width: 14px; height: 14px; }
    .common-navbar-container.common-navbar-hamburger [uk-navbar] { display: flex; align-items: center; justify-content: space-between; padding: 0px 0px; }
    .common-navbar-container.common-navbar-hamburger .navbar-responsive-top { display: flex; justify-content: flex-end; }
    .common-navbar-container.common-navbar-hamburger .navbar-responsive-top .uk-navbar-right { gap: 10px; }
    .common-navbar-container.common-navbar-hamburger .navbar-responsive-top .uk-navbar-right a { gap: 3px; font-weight: 400; font-size: 10px; }
    .common-navbar-container.common-navbar-hamburger .navbar-responsive-top a:hover , .common-navbar-container.common-navbar-hamburger .navbar-responsive-top span:hover { color: #f2f2e8; }
    .common-navbar-container.common-navbar-hamburger img { width: 80px; }
    .hamburger { display: flex; flex-direction: column; align-items: center; gap: 4px; cursor: pointer; }
    .common-navbar .common-navbar-main .hamburger { padding: 0px; }
    .common-navbar-main .common-navbar-hamburger .uk-navbar-right { margin-left: 0px; }
    .hamburger_box { width: 24px; height: 16px; position: relative; }
    .hamburger_inner, .hamburger_inner::before, .hamburger_inner::after { content: ''; position: absolute; width: 100%; height: 2px; background: var(--text-dark); left: 0; border-radius: 1px; }
    .hamburger_inner { top: 50%; transform: translateY(-50%); }
    .hamburger_inner::before { top: -7px; }
    .hamburger_inner::after { top: 7px; }
    .menu_text { font-size: 10px; letter-spacing: 1px; text-transform: uppercase; color: var(--text-dark); margin-top: 2px; }
    .menu_text::after { content: 'MENU'; }
    .common-navbar-hamburger .uk-navbar-nav { display: flex; align-items: center; margin: 0; padding: 0; list-style: none; }
    .common-navbar .common-navbar-main .common-navbar-hamburger .common-navbar-button a { min-height: auto; padding: 0px; }
    .common-topbar-logo img { max-width: 100px; }
    .common-navbar .common-navbar-main { max-width: 1600px; margin: 0 auto; position: relative; display: flex !important; align-content: space-between; flex-wrap: wrap; padding: 30px 30px 20px 30px; gap: 20px; justify-content: center; }
    .common-navbar .common-navbar-main .common-logo img { padding: 0px; width: 100px; }
}

@media (max-width: 950px) {
    .btn-book-footer { display: flex; bottom: 50px; position: fixed; width: 100%; justify-content: center; z-index: 999999; }
    .btn-book-footer .btn-book { position: relative; background: var(--secondary-color); padding: 12px 20px 10px 20px; font-size: 16px; text-transform: uppercase; font-weight: bold; color: var(--primary-color); width: 90%; text-align: center; border-radius: 5px; display: flex; align-items: center; justify-content: space-between; }
    .booking-widget-wrap { display: none !important; }
}

@media (max-width: 768px) {
    .common-navbar-button { width: 150px; padding: 10px 20px; }
    .common-navbar .common-navbar-main .common-navbar-container.common-navbar-fixed { display: none; }
    .common-navbar .common-navbar-main .common-navbar-container.common-navbar-hamburger { display: block; width: 100%; padding: 0px 30px; }
    .common-navbar .common-navbar-main .common-navbar-container.common-navbar-hamburger.custom-navbar-top { background: var(--secondary-color); padding: 10px 30px; }
    .common-navbar .common-navbar-main { padding: 0px; gap: 0; }
}

@media (max-width: 480px) {
    .common-topbar-logo img { max-width: 75px; }
    .common-navbar-hamburger .common-navbar-button { padding: 8px 14px; font-size: 11px; }
    .common-navbar-button, .common-navbar-hamburger .common-navbar-button, .common-navbar-button-org { font-size: 10px !important; width: 130px; padding: 10px 10px; }
    .btn-content-right span { font-size: 11px; }
    .btn-content-right { padding: 0 0 0 20px; }
    .btn-content-left img { width: 40px; }
    .btn-book-footer .btn-book h4 { font-size: 18px; }
}
@media (max-width: 480px) {
    .btn-content-right span { font-size: 9px; }
    .btn-book-footer .btn-book h4 { font-size: 15px; }
    .btn-content-right { padding: 0 0 0 8px; }
    .btn-book-footer .btn-book { padding: 12px 15px 10px 15px; }
}

/* =====================================================================
   7. ALL PAGE
======================================================================== */
.space-for-bookingbar { padding-bottom: 0 !important; padding-top: 50px !important; }

@media (max-width: 950px) {
    .space-for-bookingbar { padding-top: 0px !important;}
}

/* =====================================================================
   8. HOME — OUR THEMATIC RESORTS
===================================================================== */
.common-wrapper.background-dark .custom-topic { margin: 80px 0px 50px 0px; }

.sec-intro-home { position: relative; overflow: visible; }

.sec-intro-home::before, .sec-intro-home::after { content: ""; position: absolute; z-index: 2; background-repeat: no-repeat; background-size: contain; pointer-events: none; }

.sec-intro-home::before { left: 0; top: 26%; width: 100%; max-width: 400px; height: 400px; background-image: url('../images/bg-bird.png'); }

.sec-intro-home::after { right: 0; top: 25%; width: 100%; max-width: 500px; height: 500px; background-image: url('../images/bg-jerapah.png'); }

.thematic-resort-circle { width: 220px; height: 220px; aspect-ratio: 1/1; margin: 0 auto; border-radius: 50%; background-color: #5a5048; background-size: cover; background-position: center; transition: transform .35s ease, box-shadow .35s ease; }

.thematic-resort-item:hover .thematic-resort-circle { transform: translateY(-6px); box-shadow: 0 12px 24px rgba(0,0,0,.35); }

.thematic-resort-icon { position: absolute; right: 0; bottom: 6px; width: 52px; height: 52px; display: flex; align-items: center; justify-content: center; }

.thematic-resort-icon img { width: 100%; height: 100%; object-fit: contain; }

.thematic-resort-name { font-weight: 600; font-size: 22px; letter-spacing: .5px; text-transform: uppercase; color: #f2f2e8; }

.thematic-resort-col.uk-grid-margin { margin-top: 30px !important; }

.custom-thematic-list { display: flex; flex-wrap: wrap; justify-content: center; gap: 40px; text-align: center; }

.custom-thematic-list .thematic-resort-col { flex: 0 0 calc(25% - 30px); }

@media (max-width: 1140px) {
    .thematic-resort-circle { width: 150px; height: 150px; }
    .sec-intro-home::before, .sec-intro-home::after { display: none; }
    .thematic-resort-name { font-size: 16px; }
}

@media (max-width: 1090px) {
    .thematic-resort-section:last-of-type::after { display: none; }
}

@media (max-width: 960px) {
    .custom-thematic-list { gap: 32px; }
}

@media (max-width: 768px) {
    .custom-thematic-list .thematic-resort-col { flex: 0 0 calc(33.333% - 27px); }
}

@media (max-width: 640px) {
    .thematic-resort-circle { width: 120px; height: 120px; }
    .thematic-resort-icon { width: 40px; height: 40px; }
    .custom-thematic-list { gap: 20px; }
    .custom-thematic-list .thematic-resort-col { flex: 0 0 calc(50% - 10px); }
    .thematic-resort-name { font-size: 14px !important; }
    .sec-thematic-resorts .uk-container { padding: 0; }
}

/* =====================================================================
   9. HOME — MEETING & EVENTS
===================================================================== */
.meeting-events-home-section { position: relative; overflow: hidden; }

.meeting-events-home-section .thematic-slider-nav { top: 35%; }

.section-heading-row { display: flex; align-items: center; justify-content: space-between; margin-bottom: 50px; flex-wrap: wrap; gap: 16px; position: relative; z-index: 1; }

.meeting-slider-home .section-heading-row { margin-bottom: 0px; }

/* .section-title-paw { font-size: 32px; font-weight: 600; color: var(--primary-color); margin: 0; position: relative; } */

.common-wrapper.background-light .section-title-paw { text-align: left; }

.btn-view-more { background: var(--me-dark) !important; color: #f2f2e8 !important; border: none !important; padding: 13px 28px; font-size: 12px; font-weight: 600; letter-spacing: 1px; text-transform: uppercase; border-radius: 4px; transition: .25s; }

.btn-view-more:hover { background: #000 !important; color: #f2f2e8 !important; }

.meeting-events-home-section .common-content .common-row { padding: 100px 0 0 0; }

.common-row .meeting-slider-home { padding: 0 0 100px 0; }

.meeting-events-home-section .section-title-paw.uk-navbar-left { position: relative; display: inline-block; }

.meeting-events-home-section .section-title-paw.uk-navbar-left::after { content: ''; position: absolute; top: -60px; left: 90%; width: 100%; height: 100px; z-index: 0; pointer-events: none; background-image: url('/wp-content/themes/wcl/assets/images/icon-footprints2.svg'); background-repeat: no-repeat; background-size: contain; }

/* .section-title-paw h1 { position: relative; z-index: 1; } */

.meeting-slider-home.uk-slider-container { overflow: visible; }

.meeting-slider-home { position: relative; }

.meeting-card-home { display: block; }

.meeting-card-image { position: relative; aspect-ratio: 3 / 4; border-radius: 8px; overflow: hidden; background: #ddd; }

.meeting-card-image img { transition: transform .4s ease; }

.meeting-card-home:hover .meeting-card-image img { transform: scale(1.06); }

.meeting-card-overlay { position: absolute; left: 0; right: 0; bottom: 0; padding: 40px 20px 20px 20px; background: linear-gradient(to top, rgb(0 0 0 / 50%), #00000000 100%);}

.meeting-card-title { font-weight: 600; font-size: 22px; letter-spacing: 0px; text-transform: uppercase; color: #f2f2e8; }

.meeting-slidenav { background: rgba(0,0,0,.35); color: #f2f2e8 !important; border-radius: 50%; width: 38px; height: 38px; display: flex; align-items: center; justify-content: center; }

.meeting-slidenav:hover { background: rgba(0,0,0,.6); }

.thematic-slider-nav.meeting-slider-nav-next { right: 50px; left: auto; }

.thematic-slider-nav.meeting-slider-nav-prev { left: 50px; }

.meeting-slider-home .uk-slider-items > li { width: 85%; padding-left: 20px; }

@media (min-width: 1441px) {
    .meeting-slider-home .thematic-slider-nav.meeting-slider-nav-prev { left: calc(50% - 670px); right: auto; }
    .meeting-slider-home .thematic-slider-nav.meeting-slider-nav-next { right: calc(50% - 670px); left: auto; }
}

@media (min-width: 640px) {
    .meeting-slider-home .uk-slider-items > li { width: 45%; padding-left: 25px; }
}

@media (min-width: 960px) {
    .meeting-slider-home .uk-slider-items > li { width: 30%; padding-left: 25px; }
}

@media (min-width: 1200px) {
    .meeting-slider-home .uk-slider-items > li { width: 25%; padding-left: 25px; }
}

@media (min-width: 1600px) {
    .meeting-slider-home .uk-slider-items > li { width: 22%; padding-left: 30px; }
}

@media (max-width: 767px) {
    .meeting-events-home-section .section-title-paw.uk-navbar-left::after { display: none; }
}
@media (max-width: 480px) {
    .meeting-card-image { aspect-ratio: 3.5 / 4; }
    .meeting-card-title { font-size: 18px; }
}
/* @media (max-width: 400px) {
    .thematic-slider-nav.meeting-slider-nav-next { right: 0px; left: auto; }
    .thematic-slider-nav.meeting-slider-nav-prev { left: 0px; }
} */

/* =====================================================================
   10. HOME — PACKAGE & SPECIAL OFFERS
===================================================================== */
.sec-offer-home { position: relative; }

.sec-offer-home::after { content: ''; position: absolute; inset: 0; background-image: url('https://royalsafarigarden.webconnection.app/wp-content/themes/wcl/assets/images/bg-animal.png'); background-repeat: no-repeat; background-position: center bottom; background-size: 100%; z-index: 0; pointer-events: none; }

.sec-offer-home .common-content { position: relative; z-index: 2; }

.offers-slider-wrap { position: relative; display: flex; align-items: center; gap: 20px; }

.offers-slider-el { flex: 1; min-width: 0; overflow: hidden; }

.offers-slider-items { display: flex !important; list-style: none; margin: 0; padding: 0; gap: 24px; }

.offers-slider-items > li { flex-shrink: 0; box-sizing: border-box; width: 100%; }

@media (min-width: 600px) {
    .offers-slider-items > li { width: calc((100% - 24px) / 2); }
}

@media (min-width: 960px) {
    .offers-slider-items > li { width: calc((100% - 48px) / 3); }
}

.offer-card { display: flex; flex-direction: column; height: 100%; border-radius: 16px; overflow: hidden; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15); }

.offer-card-media { position: relative; width: 100%; aspect-ratio: 3 / 4; flex-shrink: 0; overflow: hidden; }

.offer-card-img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; display: block; }

.offer-card-footer { display: flex; align-items: center; background: var(--primary-color); padding: 20px; text-decoration: none; transition: background 0.2s ease; flex: 1; box-sizing: border-box; }

.offer-card-footer:hover { background: var(--secondary-color); }

.offer-card-title { color: #f2f2e8; font-size: 18px; font-weight: 600; letter-spacing: 0px; text-transform: uppercase; line-height: 1.5; margin: 0; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }

.offer-card-footer:hover .offer-card-title { color: var(--primary-color); }

.offer-card-ribbon { position: absolute; top: 16px; left: 16px; z-index: 2; background: var(--secondary-color); color: #2b2118; font-size: 11px; font-weight: 600; letter-spacing: 0.5px; text-transform: uppercase; padding: 6px 14px; border-radius: 4px; }

.offer-card-ribbon-hot { background: #c0392b; color: #f2f2e8; }

.offers-slidenav { flex-shrink: 0; display: flex; align-items: center; justify-content: center; transition: transform 0.2s ease; opacity: 1; position: absolute; z-index: 1;   }

.offers-slidenav img.ico.icon { width: 24px; height: auto; display: block; pointer-events: none; }

.offers-slidenav:hover { transform: scale(1.1); }

@media (min-width: 1280px) {
    .offers-slidenav-next { right: -50px; }
    .offers-slidenav-prev { left: -50px; }
}

@media (max-width: 1279px) {
    .offers-slidenav-next { right: 20px; }
    .offers-slidenav-prev { left: 20px; }
}

@media (max-width: 767px) {
    .offers-slider-wrap { gap: 8px; }
    /* .offer-card-title { font-size: 13px; } */
    .offers-slidenav { width: 22px; height: 22px; }
}

@media (max-width: 480px) {
    .sec-offer-home::after { background-position: left bottom; background-size: 300%; }
}

/* =====================================================================
   11. HOME — RESTAURANTS (slot-rotation แบบเดียวกับ thematic-variant-slider)
===================================================================== */
.restaurants-home-section { position: relative; overflow: hidden; }

.section-conservations-page .common-content .common-row { padding: 100px 0 0; }

.restaurant-home-slider { position: relative; }

.restaurant-home-track { display: flex; align-items: stretch; gap: 24px; }

.restaurant-home-track { --hover-expand-ratio: 2.4; }

.restaurant-home-image { position: relative; width: 100%; height: 460px; overflow: hidden; border-radius: 20px; }

.restaurant-home-image .slot-img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; display: block; transition: opacity 0.3s ease, transform 0.4s ease; }

.restaurant-home-image:hover .slot-img { transform: scale(1.08); }

.restaurant-home-detail-link { position: absolute; top: 16px; right: 16px; z-index: 6; width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; background: rgba(255, 255, 255, 0.15); border: 1px solid rgba(255, 255, 255, 0.6); border-radius: 50%; color: #f2f2e8; transition: background 0.2s ease; }

.restaurant-home-detail-link:hover { background: rgba(255, 255, 255, 0.3); }

.restaurant-home-card-link { position: absolute; inset: 0; z-index: 5; }

.restaurant-home-overlay { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; padding: 20px; color: #f2f2e8; background: linear-gradient(to top, rgb(0 0 0 / 45%) 0%, rgb(0 0 0 / 0%) 100%); transform: translateY(24px); opacity: 0; transition: transform 0.5s ease, opacity 0.5s ease, background 0.3s ease, top 0.3s ease, height 0.3s ease; }

.restaurant-home-overlay.is-visible { transform: translateY(0); opacity: 1; }

.restaurant-home-slot:hover .restaurant-home-overlay { top: 0; height: 100%; background: linear-gradient(to top, rgb(0 0 0 / 45%) 0%, rgb(0 0 0 / 0%) 100%); display: flex; flex-direction: column; justify-content: flex-end; }

.restaurant-home-title { color: #f2f2e8; text-transform: uppercase; letter-spacing: 0px; margin: 0; line-height: 1.2; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }

.restaurant-home-desc { max-height: 0; opacity: 0; margin-top: 0; font-size: 14px; /* line-height: 1.7; */
    color: #f2f2e8; letter-spacing: 0px; font-weight: lighter; overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; transition: max-height 0.35s ease, opacity 0.3s ease, margin-top 0.35s ease; }

.restaurant-home-slot:hover .restaurant-home-desc { max-height: 200px; opacity: 1; margin-top: 10px; }

.restaurant-home-nav-prev { left: 20px !important; right: auto !important; }

.restaurant-home-nav-next { left: auto !important; right: 20px !important; }

@media (max-width: 768px) {
    .restaurant-home-slot:nth-child(n+3) { display: none !important; }
    .restaurant-home-track { gap: 16px; }
    .restaurant-home-image { height: 400px; }
}

@media (max-width: 480px) {
    .restaurant-home-slot:nth-child(n+2) { display: none !important; }
    .restaurant-home-slot:first-child { width: 100%; flex-grow: 1 !important; }
    .restaurant-home-image { height: 380px; }
    .restaurant-home-overlay { top: 0; height: 100%; background: linear-gradient(to top, rgb(0 0 0 / 45%) 0%, rgb(0 0 0 / 0%) 100%); display: flex; flex-direction: column; justify-content: flex-end; }
    .restaurant-home-desc { max-height: 200px; opacity: 1; margin-top: 10px; }
    .restaurant-home-title { font-size: 18px; }
}

/* =====================================================================
   12. HOME — REVIEWS (TripAdvisor)
===================================================================== */
.reviews-home-section .common-content .common-row { padding: 100px 0; }

.reviews-home-row { display: flex; align-items: flex-start; gap: 60px; }

.reviews-home-summary { width: 260px; flex-shrink: 0; text-align: left; }

.reviews-home-logo { width: 90px; height: 55px; border: 2px solid var(--primary-color); margin-bottom: 15px; border-radius: 6px; overflow: hidden; }

.reviews-home-logo img { width: 100%; height: 100%; object-fit: cover; display: block; }

.reviews-home-title { margin: 0 0 10px; font-size: 18px; font-weight: 600 !important; line-height: 1.3; text-transform: none !important; letter-spacing: normal !important; color: var(--primary-color); display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; text-overflow: ellipsis; }

.reviews-home-count { margin: 10px 0px; font-size: 14px; font-weight: normal; letter-spacing: 0px; color: var(--primary-color); }

.reviews-home-write-btn { display: inline-block; }

.common-navbar-button.reviews-home-write-btn { width: fit-content; }

.reviews-home-rating { display: flex; gap: 4px; }

.rating-dot { position: relative; width: 20px; height: 20px; border-radius: 50%; border: 2px solid #4fa988; background: transparent; flex-shrink: 0; }

.rating-dot.is-filled::before { content: ''; position: absolute; inset: 3px; border-radius: 50%; background: #4fa988; }

.reviews-home-rating-sm .rating-dot { width: 16px; height: 16px; border-width: 1.5px; }

.reviews-home-rating-sm .rating-dot.is-filled::before { inset: 2.5px; }

.reviews-home-gallery { width: 100%; flex: 1; min-width: 0; position: relative; }

.reviews-home-slider-items { display: flex !important; list-style: none; margin: 0; padding: 0; gap: 24px; }

.reviews-home-slider-items > li { flex-shrink: 0; box-sizing: border-box; width: 100%; }

@media (min-width: 640px) {
    .reviews-home-slider-items > li { width: calc((100% - 24px) / 2); }
}

@media (min-width: 960px) {
    .reviews-home-slider-items > li { width: calc((100% - 48px) / 3); }
}

.reviews-home-card { background: #fff; border-radius: 12px; padding: 24px; height: 100%; box-shadow: 0 6px 20px rgba(0, 0, 0, 0.06); box-sizing: border-box; }

.reviews-home-card-head { display: flex; align-items: stretch; gap: 12px; margin-bottom: 12px; }

.reviews-home-avatar { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }

.reviews-home-card-head-text { flex: 1; min-width: 0; overflow: hidden; }

.reviews-home-reviewer-name { font-weight: 600; font-size: 15px; color: var(--primary-color); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.reviews-home-review-date { font-size: 13px; color: #999; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.reviews-home-badge { width: 26px; height: 26px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: #4fa988; color: #f2f2e8; }

.reviews-home-badge svg { display: block; }

.reviews-home-text { font-size: 14px; line-height: 1.7; color: var(--primary-color); display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; }

.reviews-home-text p { margin-top: 10px; }

.reviews-home-text.is-expanded { display: block; -webkit-line-clamp: unset; overflow: visible; }

.reviews-home-readmore { margin-top: 10px; background: none; border: none; padding: 0; font-size: 13px; color: #999; cursor: pointer; }

.reviews-home-readmore:hover { color: var(--primary-color); text-decoration: underline; }

.reviews-home-nav-btn { position: absolute; top: 50%; transform: translateY(-50%); background: var(--primary-color); border: 2px solid #f2f2e8; color: #f2f2e8 !important; border-radius: 50%; width: 38px; height: 38px; display: flex; align-items: center; justify-content: center; z-index: 10; transition: background 0.2s ease; }

.reviews-home-nav-btn:hover { background: var(--secondary-color); color: var(--primary-color) !important; }

.reviews-home-nav-prev { left: -20px; }

.reviews-home-nav-next { right: -20px; }

@media (max-width: 767px) {
    .reviews-home-row { flex-direction: column; gap: 30px; }
    .reviews-home-summary { width: 100%; }
}

/* =====================================================================
   13. HOME — HOTEL PLAN
===================================================================== */
.hotelplan-home-row { display: flex; align-items: flex-start; gap: 60px; }

.hotelplan-home-map-col { width: 55%; flex-shrink: 0; }

.hotelplan-home-title { text-align: left !important; margin-bottom: 30px; }

.hotelplan-home-map-wrap { position: relative; }

.hotelplan-home-map-img { width: 100%; height: auto; display: block; }

.hotelplan-home-bird { position: absolute; top: -160px; right: 5%; width: 160px; height: auto; pointer-events: none; z-index: 1; }

.hotelplan-home-info-col { flex: 1; min-width: 0; padding-top: 10px; width: 100%; }

.hotelplan-home-subtitle { font-size: 16px; font-weight: 600; letter-spacing: 0; margin-bottom: 12px; text-transform: none !important; }

.hotelplan-home-desc { font-size: 15px; /* line-height: 1.8; */
    color: var(--primary-color); margin-bottom: 20px; }

.hotelplan-home-desc p { margin-top: 10px; }

.hotelplan-home-accordion-wrap { max-height: 280px; overflow-y: auto; padding-right: 20px; }

.hotelplan-home-accordion-wrap .uk-accordion-content p { margin-top: 0px; }

.hotelplan-home-accordion-wrap::-webkit-scrollbar { width: 2px !important; }

.hotelplan-home-accordion-wrap::-webkit-scrollbar-track { background: transparent; }

.hotelplan-home-accordion-wrap::-webkit-scrollbar-thumb { background: var(--secondary-color); border-radius: 2px !important; }

.hotelplan-home-accordion-wrap { scrollbar-width: thin; scrollbar-color: var(--secondary-color) transparent; }

.hotelplan-home-accordion { list-style: none; margin: 0; padding: 0; }

.hotelplan-home-accordion > li { border-bottom: 1px solid rgba(63, 53, 48, 0.15); padding: 20px 0; margin: 0 !important; }

.hotelplan-home-accordion > li:first-child { padding-top: 0; }

.hotelplan-home-accordion .uk-accordion-title { display: flex; align-items: center; justify-content: space-between; font-weight: 600; font-size: 14px; color: var(--primary-color); text-decoration: none; flex-direction: row-reverse; }

.hotelplan-home-accordion .uk-accordion-title::before { display: none !important; }

.hotelplan-home-accordion .uk-accordion-title { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-direction: row; }

.hotelplan-home-accordion-label { flex: 1; }

.hotelplan-home-accordion-icon { flex-shrink: 0; color: var(--primary-color); transition: transform 0.25s ease; }

.hotelplan-home-accordion > li.uk-open .hotelplan-home-accordion-icon { transform: rotate(180deg); }

.hotelplan-home-accordion .uk-accordion-content { margin-top: 12px; font-size: 14px; line-height: 1.8; color: var(--primary-color); }

.hotelplan-home-accordion .uk-accordion-content ul { margin: 0; padding-left: 18px; }

.hotelplan-home-accordion .uk-accordion-content li::marker { color: var(--secondary-color); }

@media (max-width: 991px) {
    .hotelplan-home-row { flex-direction: column; gap: 30px; }
    .hotelplan-home-map-col { width: 100%; }
    .hotelplan-home-bird { width: 130px; top: -150px; }
}

@media (max-width: 480px) {
    .hotelplan-home-bird { display: none; }
}

/* =====================================================================
   14. HOME — MAP (Google Maps Embed)
===================================================================== */
.home-map-section { width: 100%; padding-top: 100px; }

.home-map-embed-wrap { position: relative; width: 100%; padding-bottom: 40%; height: 0; overflow: hidden; }

.home-map-embed-wrap iframe { position: absolute; top: 0; left: 0; width: 100% !important; height: 100% !important; border: 0; }

@media (max-width: 767px) {
    .home-map-embed-wrap { padding-bottom: 75%; }
}

/* =====================================================================
   15. HOME — EXPERIENCE
===================================================================== */
.home-experience-section { position: relative; overflow: hidden; }

.home-experience-section .common-content .common-row { padding: 100px 0 0 0; }

.common-row .home-experience-row { padding: 0 0 100px 0; }

.home-experience-row { position: relative; display: flex; align-items: stretch; gap: 30px; }

.home-experience-peek { position: relative; width: 6%; flex-shrink: 0; height: auto; cursor: pointer; overflow: hidden; max-height: 400px; }

.home-experience-peek img { width: 100%; height: 100%; object-fit: cover; display: block; }

.home-experience-peek.home-experience-peek-prev { border-radius: 0px 20px 20px 0px; }

.home-experience-peek.home-experience-peek-next { border-radius: 20px 0px 0px 20px; }

.home-experience-text { width: 30%; padding: 30px; flex-shrink: 0; display: flex; flex-direction: column; justify-content: flex-start; }

.home-experience-title { margin-bottom: 0; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }

.home-experience-desc { margin-top: 20px; font-size: 14px; font-weight: lighter; letter-spacing: 0.4px; color: var(--primary-color); display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 6; overflow: hidden; }

.home-experience-btns { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 25px; }

.home-experience-main-wrap { position: relative; flex: 1; height: auto; aspect-ratio: 3 / 2; max-height: 400px; }

.home-experience-main-img { width: 100%; height: 100%; object-fit: cover; display: block; transition: opacity 0.25s ease; border-radius: 20px; }

.home-experience-text { position: relative; overflow: visible; }

.home-experience-text::after { content: ''; position: absolute; left: 15%; bottom: -100px; width: 100%; height: 200px; background-image: url('/wp-content/themes/wcl/assets/images/icon-footprints4.svg'); background-repeat: no-repeat; background-size: contain; background-position: left bottom; pointer-events: none; z-index: 0; }

.home-experience-arrow { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; z-index: 3; border-radius: 50%; padding: 4px; opacity: 1; transition: opacity 0.2s ease, transform 0.2s ease, background 0.2s ease;   }

.home-experience-arrow img { width: 100%; height: auto; display: block; pointer-events: none; }

.home-experience-arrow:hover { transform: translate(-50%, -50%) scale(1.08); }

.home-experience-arrow-mobile { display: none; }

@media (min-width: 1441px) {
    .home-experience-row .home-experience-main-wrap , .home-experience-row .home-experience-peek { max-height: 600px; }
    .home-experience-row { max-width: none; margin-left: 0; margin-right: 0; gap: 40px; }
    .home-experience-text { flex: 0 0 432px; width: 432px; }
    .home-experience-main-wrap { flex: 0 0 745px; width: 745px; }
    .home-experience-peek-prev, .home-experience-peek-next { flex: 1 1 auto; width: auto; margin-left: 0; margin-right: 0; }
    .home-experience-peek-prev .home-experience-arrow { left: auto; right: 20px; }
    .home-experience-peek-next .home-experience-arrow { left: 20px; right: auto; }
    .home-experience-desc { -webkit-line-clamp: 10; }
}

@media (max-width: 1240px) {
    .home-experience-text { width: 20%; padding: 30px 0; }
    .home-experience-text::after { display: none; }
}

@media (max-width: 1080px) {
    .home-experience-text::after { bottom: -60px; }
}

@media (max-width: 767px) {
    .home-experience-section .common-content .common-row { padding: 80px 0 0 0; }
    .common-row .home-experience-row { padding: 0 0 80px 0; }
    .home-experience-row { flex-direction: column; gap: 0px; }
    .home-experience-text, .home-experience-main-wrap { width: 100%; }
    .home-experience-main-wrap { aspect-ratio: 3 / 4; height: 100%; max-height: 400px; max-width: none; padding: 0 30px; }
    .home-experience-peek { display: none; }
    .home-experience-arrow-mobile { display: flex; }
    .home-experience-arrow-mobile.home-experience-arrow-prev { left: 40px; transform: translateY(-50%); }
    .home-experience-arrow-mobile.home-experience-arrow-next { left: auto; right: 40px; transform: translateY(-50%); }
    .home-experience-text { padding: 0 30px 30px 30px; }
}

@media (max-width: 480px) {
    .home-experience-arrow { width: 28px; height: 28px; }
}

/* =====================================================================
   GLOBAL UTILITY — Hover Push-Effect Slider
   ---------------------------------------------------------------------
   ใช้กับสไลด์แบบ "การ์ดเรียงแนวนอนเท่ากัน hover ใบไหนใบนั้นขยาย ใบอื่นหดลง"
   ใช้ได้กับทุกจุดในเว็บที่มีสไลด์ลักษณะนี้ (Restaurant home, Accommodation
   thematic-variant, หรือจุดใหม่ในอนาคต) โดยไม่ต้องเขียน CSS ซ้ำทุกครั้ง

   วิธีใช้:
   1. Parent container (ที่เป็น display:flex อยู่แล้ว) เพิ่มคลาส .hover-expand-track
   2. การ์ด/สล็อตแต่ละใบข้างใน เพิ่มคลาส .hover-expand-item
   3. (ไม่บังคับ) ปรับความ "แรง" ของการดันขยายต่อ section ได้ด้วย CSS variable
      --hover-expand-ratio บน .hover-expand-track
   4. ตอน responsive ที่เหลือการ์ดใบเดียว ใส่ override flex-grow:1 !important; ตรงๆ
      ที่ selector เฉพาะของ component นั้น (ดูตัวอย่างใน Restaurant/Accommodation)
===================================================================== */
.hover-expand-track { display: flex; }

.hover-expand-item { flex-grow: 1 !important; flex-shrink: 1; flex-basis: 0; min-width: 0; transition: flex-grow 0.45s ease; }

.hover-expand-item:hover { flex-grow: 1.5 !important; }

.hover-expand-item.is-solo { flex-grow: 1 !important; }

/* =====================================================================
   16. ACCOMMODATION PAGE — THEMATIC RESORTS TABS/SLIDER
===================================================================== */
.thematic-resort-section { overflow: hidden; padding: 100px 0 0 0; position: relative; }

.thematic-resort-section:last-of-type::after { content: ''; position: absolute; right: 0; top: -10%; width: 100%; max-width: 400px; height: 500px; background-image: url(../images/bg-bird.png); background-size: contain; background-repeat: no-repeat; pointer-events: none; z-index: 1; transform: scaleX(-1); }

.thematic-section-title { margin-bottom: 12px; }

.thematic-section-intro { max-width: 900px; margin: 50px 0; font-size: 15px; line-height: 1.8; }

.thematic-theme-header h2, .thematic-section-title { text-align: left !important; }

.thematic-tab-icon { width: 30px; height: 30px; object-fit: contain; }

.thematic-tab-nav { display: flex; list-style: none; margin: 0 0 50px; padding: 0; border: 1px solid var(--primary-color); border-radius: 5px; overflow: hidden; }

.thematic-tab-nav li a { padding: 0; column-gap: 5px; }

.thematic-tab-nav::before { border-bottom: none; }

.thematic-tab-nav li { flex: 1; border-left: 1px solid var(--primary-color); padding-left: 0; padding: 10px 20px; display: flex; background: var(--background-light, #f2f2e8); justify-content: center; align-items: center; }

.thematic-tab-nav li:first-child { border-left: none; }

.thematic-tab-nav li span { display: flex; text-align: center; color: var(--primary-color); font-weight: 600; letter-spacing: 1px; text-transform: uppercase; font-size: 13px; border: none; }

.thematic-tab-nav li.uk-active span { color: var(--secondary-color); }

.thematic-tab-nav li.uk-active { background: var(--primary-color); }

.thematic-tab-icon { filter: brightness(0) saturate(100%) invert(10%) sepia(58%) saturate(322%) hue-rotate(347deg) brightness(95%) contrast(93%); }

.uk-active .thematic-tab-icon { filter: brightness(0) saturate(100%) invert(72%) sepia(65%) saturate(247%) hue-rotate(350deg) brightness(98%) contrast(88%); }
/* .uk-active .thematic-tab-icon{ filter: brightness(0) saturate(100%) invert(75%) sepia(36%) saturate(854%) hue-rotate(335deg) brightness(103%) contrast(103%); } */

.thematic-theme-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 50px; }

.uk-button.thematic-more-info { flex-shrink: 0; background: var(--primary-color) !important; color: var(--secondary-color) !important; border: none !important; padding: 10px 24px; text-transform: uppercase; font-size: 12px; letter-spacing: 1px; border-radius: 4px; }

.uk-button.thematic-more-info:hover { background: #000 !important; color: var(--secondary-color) !important; }

.thematic-variant-slider { position: relative; padding: 0px; }

.thematic-variant-image img { transition: opacity 0.2s ease; }

.thematic-variant-track { display: flex; align-items: stretch; gap: 20px; justify-content: flex-start; /* เปลี่ยนจาก space-between: กันไม่ให้การ์ดถูกดันแยกห่างกันตอนมีแค่ 1-2 ใบ */; }

/* ----- ล็อกความกว้างฐานของการ์ดให้เท่ากับตอนมี "3 การ์ดเสมอ" (แถวเต็ม)
   ไม่ว่าจริงๆ จะมี 1, 2 หรือ 3 การ์ดก็ตาม แทนการให้ flex-grow ยืดเต็มพื้นที่ที่เหลือ
   (ที่ทำให้การ์ดเดียวยืดเต็มแถวเวลาธีมนั้นมีห้องแบบเดียว) — override เฉพาะ section นี้
   ไม่กระทบ .hover-expand-item ของ Restaurant home section ที่อื่น เพราะ selector
   นี้ผูกกับ .thematic-variant-track โดยเฉพาะ (specificity สูงกว่ากฎ global)
   ครอบด้วย min-width:769px เพราะที่ breakpoint มือถือ/แท็บเล็ต (768px ลงมา)
   ยังต้องการให้การ์ดที่เหลือยืดเต็มพื้นที่ตามปกติ ไม่ใช่ล็อกความกว้างแบบนี้ ----- */
@media (min-width: 769px) {
    .thematic-variant-track .hover-expand-item { flex-grow: 0 !important; flex-basis: calc((100% - 40px) / 3); transition: flex-basis 0.45s ease; /* เปลี่ยนจาก transition flex-grow เดิม เพราะตอนนี้คุมด้วย flex-basis ล้วนๆ */; }
    /* ----- Hover: ล็อกความกว้างเป็นค่าตายตัวที่คำนวณจาก "สัดส่วนเดียวกับตอน hover ในเคส 3 การ์ดพอดี"
           แทนการใช้ flex-grow (ที่ผลลัพธ์ขึ้นกับพื้นที่ว่างเหลือ ซึ่งมีไม่เท่ากันในแต่ละจำนวนการ์ด
           ทำให้ตอนมี 1-2 การ์ด ยืดเกินกว่าที่ควรเพราะมีพื้นที่ว่างให้กินเยอะกว่า)
           สูตร: ตอนมี 3 การ์ดเท่ากัน (grow:1 ทุกใบ) hover แล้ว grow เป็น 1.5 -> น้ำหนักรวม 1+1+1.5=3.5
           ใบที่ hover ได้ส่วนแบ่ง 1.5/3.5 = 3/7 ของพื้นที่แถวทั้งหมด (หลังหัก gap) เท่ากันทุกจำนวนการ์ด ----- */
    .thematic-variant-track .hover-expand-item:hover { flex-basis: calc((100% - 40px) * 3 / 7); }
}

/* ----- ความกว้าง + hover push-effect: ใช้ global utility class (.hover-expand-track /
   .hover-expand-item) ที่เพิ่มไว้ใน PHP แล้ว ไม่ต้องเขียน flex-grow ซ้ำที่นี่ ----- */
.thematic-variant-image { position: relative; width: 100%; height: 380px; overflow: hidden; border-radius: 20px; }

.is-simple-slide .thematic-variant-image { height: 380px; }

.thematic-variant-image .ico.icon { position: relative; top: 0; left: 0; width: 15px; height: 1; object-fit: cover; display: block; }

.thematic-variant-image img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; display: block; }

.thematic-variant-overlay { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; padding: 20px; color: #f2f2e8; /* อนิเมชันเลื่อนขึ้น + จางเข้า ทำงานคู่กับ playOverlayAnimation() ใน
       thematic-variant-slider.js — transition ต้องอยู่บน base selector นี้ */
    transform: translateY(24px); opacity: 0; transition: transform 0.5s ease, opacity 0.5s ease; }

.thematic-variant-overlay.is-visible { transform: translateY(0); opacity: 1; }

.thematic-variant-slot.is-featured-slide .thematic-variant-overlay { top: 0; bottom: 0; left: 0; right: 0; height: 100%; background: linear-gradient(to top, rgb(0 0 0 / 48%) 0%, rgb(0 0 0 / 0%) 100%); display: flex; flex-direction: column; justify-content: flex-end; }

.is-simple-slide .thematic-variant-overlay { padding: 14px; top: 0; bottom: 0; left: 0; right: 0; height: 100%; background: linear-gradient(to top, rgb(0 0 0 / 48%) 0%, rgb(0 0 0 / 0%) 100%); display: flex; flex-direction: column; justify-content: flex-end; }

.thematic-variant-title { color: #f2f2e8; /* font-size: 18px; */
    text-transform: uppercase; letter-spacing: 0px; margin: 0 0 10px; line-height: 1.2; margin-bottom: 0; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }

/* ----- Capacity: ซ่อนไว้เป็นค่าเริ่มต้น "ทุกสล็อต" (รวม featured ด้วย ไม่มีข้อยกเว้นแล้ว)
   เปิดออกมาตอน hover เท่านั้น เหมือนพฤติกรรมที่ทำไปกับ Restaurant home section ----- */
.thematic-variant-capacity { max-height: 0; opacity: 0; margin-top: 0; display: flex; align-items: center; gap: 16px; font-size: 13px; overflow: hidden; transition: max-height 0.35s ease, opacity 0.3s ease, margin-top 0.35s ease; }

.thematic-variant-slot:hover .thematic-variant-capacity { max-height: 60px; opacity: 1; margin-top: 15px; }

.capacity-item { display: flex; align-items: center; gap: 6px; color: #f2f2e8; }

.capacity-item span { color: #f2f2e8; }

.capacity-item i { color: var(--secondary-color); }

.thematic-variant-detail-link { display: none; }

/* ----- Stretched link: ลิงก์โปร่งใสคลุมเต็มพื้นที่การ์ด อยู่บนสุด (z-index สูงสุด)
   ทำให้คลิกได้ทั้งการ์ด ไปหน้าธีมนั้นๆ (data-detail-link ระดับธีม เหมือนกันทุกสล็อต) ----- */
.thematic-variant-card-link { position: absolute; inset: 0; z-index: 5; }

.thematic-slider-nav { position: absolute; top: 40%; left: 50%; display: flex; align-items: center; justify-content: center; z-index: 10; /* เพิ่มจาก 3 -> 10 กันไม่ให้ .thematic-variant-card-link (z-index:5) บังคลิก */
    border-radius: 50%; padding: 4px; opacity: 1; transition: opacity 0.2s ease, transform 0.2s ease, background 0.2s ease;   }

.thematic-slider-nav.thematic-slider-nav-prev { left: 20px; right: auto; }

.thematic-slider-nav.thematic-slider-nav-next { left: auto; right: 20px; }

.thematic-slider-nav img { width: 24px; height: auto; display: block; pointer-events: none; }

.thematic-slider-nav:hover { transform: scale(1.08); }

.thematic-slider-nav:focus-visible { outline: none; }

@media (max-width: 1090px) {
    .thematic-resort-section:last-of-type::after { display: none; }
}

@media (max-width: 768px) {
    /* จอแท็บเล็ต/มือถือแนวนอน: ลดเหลือ 2 การ์ด (จาก 3 บน desktop) เหมือนแพทเทิร์น
           Restaurant home section — ซ่อนตั้งแต่การ์ดใบที่ 3 เป็นต้นไป (ไม่สนใจว่าเป็น
           featured หรือ simple เพราะอิงตำแหน่งจริงใน DOM ไม่ใช่ class) */
    .thematic-variant-track { flex-wrap: nowrap; gap: 16px; }
    .thematic-variant-slot:nth-child(n+3) { display: none !important; }
    .thematic-variant-image, .is-simple-slide .thematic-variant-image { height: 380px; }
    .thematic-theme-header { flex-direction: column; align-items: center; gap: 16px; }
    .common-wrapper.background-light h2 , .common-wrapper.background-blue h2 { font-size: 38px !important; text-align: center !important; }
    /* .thematic-slider-nav { display: flex !important; width: 28px !important; height: 28px !important; } */
    .thematic-slider-nav-prev { left: 20px !important; }
    .thematic-slider-nav-next { right: 20px !important; }
    .thematic-variant-slider { padding: 0px; }
    .thematic-tab-nav { flex-direction: column; }
    .thematic-tab-nav li { border-left: none; border-bottom: 1px solid var(--primary-color); }
    .thematic-tab-nav li:last-child { border-bottom: none; }
}

@media (max-width: 480px) {
    /* จอมือถือแนวตั้ง: ลดเหลือการ์ดเดียว (เต็มความกว้าง) เหมือนแพทเทิร์น
           Restaurant home section — ใช้ :first-child แทน .is-featured-slide เพราะ
           featured อยู่ตำแหน่งแรกใน DOM เสมออยู่แล้ว ใช้ตำแหน่งแทน class ได้เลย */
    .thematic-variant-slot:nth-child(n+2) { display: none !important; }
    .thematic-variant-slot:first-child { flex-grow: 1 !important; width: 100%; }
    /* มือถือไม่มี hover จริง (touch device) และเหลือแค่การ์ดแรกใบเดียว
           จึงเปิดโชว์ capacity ไว้ตลอดเวลาแทนการรอ hover ที่ทำไม่ได้จริงบนจอสัมผัส */
    .thematic-variant-slot:first-child .thematic-variant-capacity { max-height: 60px; opacity: 1; margin-top: 15px; }
    .thematic-variant-image { height: 380px; }
    .thematic-variant-title { font-size: 18px; }
}

/* =====================================================================
   17. ACCOMMODATION SUB PAGE — ROOM VARIANT / FACILITIES / OTHER ROOMS
===================================================================== */
.theme-intro-text { max-width: 700px; margin: 16px auto 0; font-size: 15px; line-height: 1.8; }

.room-variant-section { padding: 100px 0; }

.room-variant-section.background-dark-texture { color: #f2ede4; }

.room-variant-section.background-dark-texture .room-variant-desc, .room-variant-section.background-dark-texture h3 { color: #f2ede4; }

.room-variant-row { display: flex; align-items: center; gap: 50px; }

.room-variant-row.row-reverse { flex-direction: row-reverse; }

.room-variant-text { width: 40%; flex-shrink: 0; }

.background-dark-texture .room-variant-text h4, .background-dark-texture .room-variant-capacity .capacity-item { color: var(--secondary-color); }

.background-dark-texture .room-variant-capacity img.ico.icon { filter: brightness(0) saturate(100%) invert(100%) sepia(93%) saturate(0%) hue-rotate(278deg) brightness(111%) contrast(101%); }

.room-variant-text h3 { font-size: 20px; text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 14px; line-height: 1.5; }

.room-variant-capacity { display: flex; gap: 20px; margin: 15px 0 30px 0; font-size: 14px; }

.room-variant-capacity .capacity-item { display: flex; align-items: center; gap: 6px; color: var(--primary-color); font-weight: 600; text-transform: uppercase; letter-spacing: 0; }

.room-variant-capacity img.ico.icon { width: 18px; height: 18px; object-fit: contain; }

.room-variant-desc { font-size: 14px; /* line-height: 1.8; */; }

.room-variant-gallery { width: 60%; }

.room-variant-slider-items > li img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; border-radius: 20px; }

.room-variant-dotnav { display: flex; justify-content: center; gap: 10px; list-style: none; margin: 16px 0 0; padding: 0; }

.room-variant-dotnav li a { display: block; width: 9px; height: 9px; border-radius: 50%; background: rgba(0, 0, 0, 0.25); }

.background-dark-texture .room-variant-dotnav li a { background: rgba(255, 255, 255, 0.35); }

.room-variant-dotnav li.uk-active a { background: var(--secondary-color); }

.room-variant-facilities-section { background-color: #f2f2e8; padding: 40px 0; border-top: 1px solid var(--primary-color); border-bottom: 1px solid var(--primary-color); }

.facilities-heading-wrap { padding: 0 60px; box-sizing: border-box; }

.facilities-heading { margin: 0 0 15px 0; }

.facilities-slider.uk-position-relative { position: relative !important; padding: 0 60px !important; width: 100% !important; overflow: hidden !important; box-sizing: border-box; }

.facilities-slider-items { display: flex !important; align-items: stretch; list-style: none; margin: 0; padding: 0; gap: 40px; height: auto !important; }

.facility-item { display: flex; align-items: center; gap: 10px; height: 100%; font-size: 14px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.3px; white-space: nowrap; color: var(--primary-color); }

.facility-item i { font-size: 34px; color: inherit; flex-shrink: 0; }

.facility-item img.ico.icon { width: 26px; height: 26px; object-fit: contain; flex-shrink: 0; }

.facilities-nav { position: absolute; top: 50%; transform: translateY(-50%); display: flex; align-items: center; justify-content: center; z-index: 2; }

.facilities-nav-prev { left: 10px; }

.facilities-nav-next { right: 10px; }

.facilities-nav img.ico.icon { width: 24px; height: 24px; object-fit: contain;   }

.facilities-nav.room-img-slide img.ico.icon { width: 45px; height: 45px; object-fit: contain; }

.facilities-nav:hover img.ico.icon { opacity: 0.6; }

.room-variant-facilities { position: relative; height: auto !important; max-height: none !important; overflow: visible !important; }

.facilities-slider { position: relative; height: auto !important; max-height: none !important; }

.facilities-slider-inner { overflow: hidden; box-sizing: border-box; }

.other-rooms-section { padding: 100px 0 0 0; overflow: hidden; }

.other-rooms-variant-slider { position: relative; padding: 0px; box-sizing: border-box; }

.other-rooms-track { display: flex; gap: 20px; justify-content: space-between; }

.other-room-slot { flex: 1; min-width: 0; }

.other-room-slot-link { display: block; color: inherit; text-decoration: none; }

.other-room-slot-image { height: 380px; }




@media (max-width: 767px) {
    .room-variant-row, .room-variant-row.row-reverse { flex-direction: column; }
    .room-variant-text, .room-variant-gallery { width: 100%; }
    .facilities-heading-wrap { padding: 0 35px; }
    .facilities-slider-items { gap: 20px; }
    .facility-item { font-size: 12px; }
    .facility-item i, .facility-item img.ico.icon { font-size: 22px; width: 22px; height: 22px; }
    .other-rooms-variant-slider { padding: 0; }
    .other-rooms-track { gap: 12px; }
    .other-room-slot:not(.is-first-slot) { display: none; }
    .other-room-slot-image { height: 300px; }
}

@media (max-width: 480px) {
    .facilities-slider.uk-position-relative { padding: 0 40px !important; }
    .facilities-nav.room-img-slide img.ico.icon { width: 38px; height: 38px; }
    .facilities-nav-next.room-img-slide { right: 10px; }
    .facilities-nav-prev.room-img-slide { left: 10px; }
    .facilities-heading { font-size: 18px; }
}

@media (min-width: 1441px) {
    .common-wrapper .common-content { max-width: var(--breakpoint-l); }
}

/* =====================================================================
   18. MEETING SUB PAGE — GALLERY ROW
===================================================================== */
.meeting-sub-section { padding: 100px 0; overflow-x: hidden; }

.meeting-sub-row { position: relative; display: flex; align-items: stretch; gap: 30px; }

.meeting-sub-row.row-reverse { flex-direction: row-reverse; }

.meeting-sub-peek { position: relative; width: 6%; flex-shrink: 0; height: auto; cursor: pointer; overflow: hidden; max-height: 400px; }

.meeting-sub-peek img { width: 100%; height: 100%; object-fit: cover; display: block; }

.background-light .meeting-sub-peek.meeting-sub-peek-prev { border-radius: 0px 20px 20px 0px; }

.background-light .meeting-sub-peek.meeting-sub-peek-next { border-radius: 20px 0px 0px 20px; }

.background-dark-texture .meeting-sub-peek.meeting-sub-peek-next { border-radius: 0px 20px 20px 0px; }

.background-dark-texture .meeting-sub-peek.meeting-sub-peek-prev { border-radius: 20px 0px 0px 20px; }

.meeting-sub-text { width: 40%; padding: 30px; flex-shrink: 0; display: flex; flex-direction: column; justify-content: center; }

.background-dark-texture .meeting-sub-text h4 { color: var(--secondary-color); }

.meeting-sub-main-wrap { position: relative; flex: 1; height: auto; aspect-ratio: 3 / 2; max-height: 400px; }

.meeting-sub-main-img { width: 100%; height: 100%; object-fit: cover; display: block; transition: opacity 0.25s ease; border-radius: 20px; }

.meeting-sub-main-img.is-fading { opacity: 0; }

.meeting-sub-arrow { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; z-index: 3; border-radius: 50%; padding: 4px; opacity: 1; transition: opacity 0.2s ease, transform 0.2s ease, background 0.2s ease; }

.meeting-sub-arrow img { width: 100%; height: auto; display: block; pointer-events: none; }

.meeting-sub-arrow:hover { transform: translate(-50%, -50%) scale(1.08); }

.meeting-sub-row.row-reverse .meeting-sub-arrow img { transform: scaleX(-1); }

.meeting-sub-arrow-mobile { display: none; }

.meeting-sub-dots { position: absolute; bottom: -25px; transform: translateX(-50%); display: flex; gap: 10px; list-style: none; margin: 0; padding: 0; z-index: 2; }

.background-light .meeting-sub-dots { left: 8%; }

.background-dark-texture .meeting-sub-dots { right: 0%; }

.meeting-sub-dots li { width: 12px; height: 12px; border-radius: 50%; background-color: transparent; cursor: pointer; transition: background-color 0.2s ease; }

.background-light .meeting-sub-dots li { border: 1px solid var(--primary-color); }

.background-dark-texture .meeting-sub-dots li { border: 1px solid #f2f2e8; }

.meeting-sub-dots li.is-active { background-color: var(--secondary-color); }

.custom-row { display: flex; gap: 5px; margin-top: 25px; align-items: center; }

.custom-row .icon-btn:hover { opacity: 0.9; }

@media (min-width: 1441px) {
    .meeting-sub-text { flex: 0 0 576px; width: 576px; }
    .meeting-sub-main-wrap { flex: 0 0 570px; width: 570px; max-height: none; }
    .meeting-sub-peek { flex: 1 1 auto; width: auto; }
    .meeting-sub-row { gap: 40px; }
    .meeting-sub-arrow { left: auto; right: auto; }
    .meeting-sub-row.row-normal .meeting-sub-peek-prev .meeting-sub-arrow { right: 20px; }
    .meeting-sub-row.row-normal .meeting-sub-peek-next .meeting-sub-arrow { left: 20px; }
    .meeting-sub-row.row-reverse .meeting-sub-peek-prev .meeting-sub-arrow { left: 20px; }
    .meeting-sub-row.row-reverse .meeting-sub-peek-next .meeting-sub-arrow { right: 20px; }
}

@media (max-width: 1024px) {
}

@media (max-width: 768px) {
    .background-light .meeting-sub-dots { left: 50%; }
    .background-dark-texture .meeting-sub-dots { left: 50%; right: auto; }
    .meeting-sub-row, .meeting-sub-row.row-reverse { flex-direction: column; gap: 0px; }
    .meeting-sub-text, .meeting-sub-main-wrap { width: 100%; }
    .meeting-sub-main-wrap { aspect-ratio: 3 / 2; height: 100%; max-height: 400px; max-width: none; padding: 0 30px; }
    .meeting-sub-peek { display: none; }
    .meeting-sub-arrow-mobile { display: flex; }
    .meeting-sub-arrow-mobile.meeting-sub-arrow-prev { left: 40px; transform: translateY(-50%); }
    .meeting-sub-arrow-mobile.meeting-sub-arrow-next { left: auto; right: 40px; transform: translateY(-50%); }
    .meeting-sub-row.row-reverse .meeting-sub-arrow-mobile img { transform: none; }
    .meeting-sub-text { padding: 0 30px 30px 30px; }
}

@media (max-width: 480px) {
    .meeting-sub-arrow { width: 28px; height: 28px; }
    .custom-row .icon-btn { width: 35px; height: 35px; }
}

/* =====================================================================
   19. MEETING PACKAGE TABS
===================================================================== */
.meeting-package-section { /* padding: 60px 0; */
    position: relative; }

.meeting-package-tab-nav { display: flex; list-style: none; margin: 0 0 40px; padding: 0; border: 1px solid var(--primary-color); border-radius: 5px; overflow: hidden; }

.meeting-package-tab-nav::before { border-bottom: none; }

.meeting-package-tab-nav li { display: flex; flex: 1; border-left: 1px solid var(--primary-color); padding-left: 0; background: var(--background-light, #f2f2e8); align-items: center; justify-content: center; }

.meeting-package-tab-nav li:first-child { border-left: none; }

.meeting-package-tab-nav li a { display: block; text-align: center; padding: 15px 20px; color: var(--primary-color); font-weight: 600; letter-spacing: 1px; text-transform: uppercase; font-size: 13px; border: none; }

.meeting-package-tab-nav li.uk-active a { color: var(--secondary-color); }

.meeting-package-tab-nav li.uk-active { background: var(--primary-color); }

.meeting-package-title { text-transform: none !important; }

.meeting-package-desc { max-width: 700px; }

.meeting-package-desc p { text-align: center; }

.meeting-package-space { margin: 50px 0px; display: flex; flex-direction: column; align-items: center; }

.meeting-package-section::after { content: ''; position: absolute; left: 0; bottom: 0; width: 100%; height: 100%; background-image: url('https://royalsafarigarden.webconnection.app/wp-content/themes/wcl/assets/images/bg-animal.png'); background-repeat: no-repeat; background-position: center bottom; background-size: contain; z-index: 0; pointer-events: none; }

.meeting-package-section .common-content { position: relative; z-index: 2; }

.meeting-package-card { border: 1px solid var(--primary-color); background: var(--background-light, #f2f2e8); border-radius: 10px; overflow: hidden; height: 100%; }

.meeting-package-card-title { border-bottom: 1px solid var(--primary-color); background: var(--secondary-color); color: #2b2118; padding: 15px 20px; }

.meeting-package-card-desc { padding: 20px; }

.meeting-package-card-desc ul { padding-left: 18px; margin: 10px 0; }

.meeting-package-card-desc strong { margin-bottom: 5px; }

.meeting-package-card-desc li::marker { list-style-type: disc !important; }

@media (max-width: 991px) {
    #meeting-package-switcher { min-height: auto; }
}

@media (max-width: 767px) {
    .meeting-package-tab-nav { flex-direction: column; }
    .meeting-package-title { font-size: 24px; }
    .meeting-package-tab-nav li { border-left: none; border-bottom: 1px solid var(--primary-color); }
    .meeting-package-tab-nav li:last-child { border-bottom: none; }
}

@media (max-width: 480px) {
    .meeting-package-section::after { background-position: left bottom; background-size: 300%; }
}

#meeting-package-switcher { min-height: 850px; }

/* =====================================================================
   20. SPECIAL OFFERS PAGE — TABS & CARDS
===================================================================== */
.section-offer-page .common-content .common-row { padding-bottom: 0; }

.offer-type-tabs, .simple-filter-tabs { display: flex; list-style: none; margin: 0 0 50px; padding: 0; border: 1px solid var(--primary-color); border-radius: 8px; overflow: hidden; }

.offer-type-tab, .simple-filter-tab { flex: 1; text-align: center; padding: 15px 20px; font-size: 13px !important; font-weight: 600 !important; letter-spacing: 1px !important; text-transform: uppercase; color: var(--primary-color); background: var(--background-light, #f2f2e8); border-left: 1px solid var(--primary-color); cursor: pointer; transition: background 0.2s ease, color 0.2s ease; display: flex; align-items: center; justify-content: center; }

.offer-type-tab:first-child, .simple-filter-tab:first-child { border-left: none; }

.offer-type-tab.is-active, .simple-filter-tab.is-active { background: var(--primary-color); color:var(--secondary-color) !important; }

.offer-type-item { display: none; opacity: 0; transition: opacity 0.35s ease; }

.offer-type-item.is-visible { display: block; }

.offer-type-item.is-visible.is-faded-in { opacity: 1; }

.offer-card-v2 { border: 1px solid var(--primary-color) !important; border-radius: 20px; overflow: hidden; background: var(--background-light, #f2f2e8); height: 100%; display: flex; flex-direction: column; }

.offer-card-v2 .uk-card-media-top img { width: 100%; aspect-ratio: 3/4; object-fit: cover; display: block; border-bottom: 1px solid var(--primary-color); }

.offer-card-v2 .uk-card-body { padding: 20px; display: flex; flex-direction: column; flex: 1; }

.offer-card-v2-title { font-size: 18px; font-weight: 600; text-transform: uppercase; letter-spacing: 0px; line-height: 1.4; margin: 0 0 20px; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; flex: 1; }

.offer-card-v2-btns { display: flex; gap: 10px; align-items: center; justify-content: center; }

.offer-btn { flex: 1; text-align: center; padding: 12px 10px; font-size: 12px; font-weight: 600; letter-spacing: 0.5px; text-transform: uppercase; border-radius: 6px; text-decoration: none; transition: opacity 0.2s ease; }

.offer-btn-explore { background: transparent; border: 1px solid var(--primary-color); color: var(--primary-color); }

.offer-btn-book { background: var(--primary-color); color: var(--secondary-color); border: 1px solid var(--primary-color); }

.offer-btn:hover { opacity: 0.8; }





@media (max-width: 767px) {
    .offer-type-tabs, .simple-filter-tabs { flex-direction: column; border-radius: 8px; }
    .offer-type-tab, .simple-filter-tab { border-left: none; border-top: 1px solid var(--primary-color); }
    .offer-type-tab:first-child, .simple-filter-tab:first-child { border-top: none; }
}

/* =====================================================================
   21. OFFER SINGLE PAGE
===================================================================== */
.offer-single-section .offer-single-row { padding-bottom: 0 !important; }

.offer-single-row { display: flex; align-items: flex-start; gap: 60px; }

.offer-single-content { flex: 0 0 40%; max-width: 40%; }

.offer-single-content .heading-intro h1 { font-size: 26px; text-transform: uppercase; text-align: left; margin-bottom: 20px; }

.offer-single-content .heading-intro { margin-bottom: 20px; }

.offer-single-terms { font-size: 14px; line-height: 1.8; margin-bottom: 30px; }

.offer-single-terms p { margin: 0 0 15px; }

.offer-single-btns { display: flex; gap: 12px; flex-wrap: wrap; }

.offer-single-media { flex: 1; min-width: 0; }

.offer-single-img { display: block; width: 100%; height: auto; max-width: 100%; border-radius: 12px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15); }

@media (max-width: 991px) {
    .offer-single-row { flex-direction: column; gap: 40px; }
    .offer-single-content { flex: 1 1 100%; max-width: 100%; }
}

/* =====================================================================
   22. RESTAURANTS PAGE
===================================================================== */
.restaurant-row-section { padding: 100px 0; }

.restaurant-row { display: flex; align-items: center; gap: 50px; }

.restaurant-row.row-reverse { flex-direction: row-reverse; }

.restaurant-row-text { width: 40%; flex-shrink: 0; }

.background-dark-texture .restaurant-row-text { color: #f2f2e8; }

.background-dark-texture .restaurant-row-text h4 { color: var(--secondary-color); }

.restaurant-row-section .restaurant-row-text h4 { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }

.restaurant-row-desc { margin-top: 20px; font-size: 14px; font-weight: lighter; letter-spacing: 0.4px; }

.background-light .restaurant-row-desc { color: var(--primary-color); }

.restaurant-row-btns { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }

.restaurant-youtube-btn { display: flex; align-items: center; justify-content: center; border-radius: 50%; transition: opacity 0.2s ease; }

.restaurant-youtube-btn:hover { opacity: 0.8; }

.restaurant-youtube-btn img { width: 40px; height: 40px; }

.restaurant-row-gallery { width: 60%; }

.restaurant-slider-items > li img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; border-radius: 20px; }

.restaurant-info-table { display: flex; flex-wrap: wrap; border: 1px solid var(--primary-color); border-radius: 12px; overflow: hidden; }

.restaurant-info-table-col { flex: 1; min-width: 220px; display: flex; flex-direction: column; border-left: 1px solid var(--primary-color); }

.restaurant-info-table-col:first-child { border-left: none; }

.restaurant-info-table-col h5 { margin: 0; padding: 18px 20px; background: var(--accent-gold, var(--secondary-color)); color: var(--primary-color, #2b2118); font-size: 13px; font-weight: 600; letter-spacing: 0.5px; text-transform: uppercase; border-bottom: 1px solid var(--primary-color); }

.restaurant-info-table-desc { padding: 0 20px; background: var(--background-light, #f2f2e8); font-size: 13px; /* line-height: 1.7; */
    flex: 1; }

.other-restaurants-section { padding: 100px 0 0; overflow: hidden; }

@media (max-width: 980px) {
    .restaurant-row, .restaurant-row.row-reverse { flex-direction: column; }
    .restaurant-row-text, .restaurant-row-gallery { width: 100%; }
    .restaurant-info-table-col { flex: 1 1 100%; border-left: none; border-top: 1px solid var(--primary-color); }
    .restaurant-info-table-col:first-child { border-top: none; }
}

@media (max-width: 480px) {
    .restaurant-youtube-btn img { width: 35px; height: 35px; }

    .restaurant-row-btns { gap: 8px; }

}

/* =====================================================================
   23. EXPERIENCES PAGE
===================================================================== */
.experiences-row-section { padding: 80px 0; }

/* ใช้ section.experiences-row-section:last-of-type แทน :last-child */
.page-id-1301 section.experiences-row-section:last-of-type { padding: 80px 0 0 !important; }

.section-experiences-sub-page .common-content .common-row { padding: 100px 0 0; }

.experiences-row { display: flex; align-items: center; gap: 50px; }

.experiences-row.row-reverse { flex-direction: row-reverse; }

.experiences-row-text { width: 40%; flex-shrink: 0; }

.background-dark-texture .experiences-row-text { color: #f2f2e8; }

.background-dark-texture .experiences-row-text h4 { color: var(--secondary-color); }

.experiences-row-section .experiences-row-text h4 { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }

.experiences-row-desc { margin-top: 20px; font-size: 14px; font-weight: lighter; letter-spacing: 0.4px; }

.background-light .experiences-row-desc { color: var(--primary-color); }

.experiences-row-btns { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }

.experiences-youtube-btn { display: flex; align-items: center; justify-content: center; border-radius: 50%; transition: opacity 0.2s ease; }

.experiences-youtube-btn:hover { opacity: 0.8; }

.experiences-youtube-btn img { width: 40px; height: 40px; }

.experiences-row-gallery { width: 60%; }

.experiences-slider-items > li img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; border-radius: 20px; }

.experiences-info-section .common-content { padding-top: 100px; }

.experiences-info-table { display: flex; flex-wrap: wrap; border: 1px solid var(--primary-color); border-radius: 12px; overflow: hidden; }

.experiences-info-table-col { flex: 1; min-width: 220px; display: flex; flex-direction: column; border-left: 1px solid var(--primary-color); }

.experiences-info-table-col:first-child { border-left: none; }

.experiences-info-table-col h5 { margin: 0; padding: 18px 20px; background: var(--accent-gold, var(--secondary-color)); color: var(--primary-color, #2b2118); font-size: 13px; font-weight: 600; letter-spacing: 0.5px; text-transform: uppercase; border-bottom: 1px solid var(--primary-color); }

.experiences-info-table-desc { padding: 0 20px; background: var(--background-light, #f2f2e8); font-size: 13px; /* line-height: 1.7; */
    flex: 1; }

.other-experiences-section { padding: 100px 0 0 0; overflow: hidden; }

@media (max-width: 980px) {
    .experiences-row, .experiences-row.row-reverse { flex-direction: column; }
    .experiences-row-text, .experiences-row-gallery { width: 100%; }
    .experiences-info-table-col { flex: 1 1 100%; border-left: none; border-top: 1px solid var(--primary-color); }
    .experiences-info-table-col:first-child { border-top: none; }
}

@media (max-width: 480px) {
    .experiences-youtube-btn img { width: 35px; height: 35px; }
}

/* =====================================================================
   24. CONSERVATIONS PAGE
===================================================================== */
.conser-card-v2 { border: 1px solid var(--primary-color) !important; border-radius: 20px; overflow: hidden; background: var(--background-light, #f2f2e8); height: 100%; display: flex; flex-direction: column; }

.conser-card-v2 .uk-card-media-top img { width: 100%; aspect-ratio: 3/4; object-fit: cover; display: block; border-bottom: 1px solid var(--primary-color); }

.conser-card-v2 .uk-card-body { padding: 20px; display: flex; flex-direction: column; flex: 1; }

.conser-card-v2-title { font-size: 18px; font-weight: 600; text-transform: uppercase; letter-spacing: 0px; line-height: 1.4; margin: 0 0 20px; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; flex: 1; }

.conser-card-v2-btns { display: flex; justify-content: center; }

.conser-row { display: flex; align-items: center; gap: 50px; }

.conser-row-text { width: 40%; flex-shrink: 0; }

.conser-row-desc { font-size: 14px; /* line-height: 1.8; */
    margin-top: 15px; }

.conser-row-media { width: 60%; }

.conser-row-img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; border-radius: 20px; }

.conser-content-section { padding: 100px 0; }

.conser-content-block { color: #f2ede4; }

.conser-content-block h1, .conser-content-block h2, .conser-content-block h3, .conser-content-block h4 { color: var(--secondary-color); margin-top: 40px; margin-bottom: 16px; }

.conser-content-block h1:first-child, .conser-content-block h2:first-child, .conser-content-block h3:first-child, .conser-content-block h4:first-child { margin-top: 0; }

.conser-content-block p { font-size: 14px; line-height: 1.8; margin-bottom: 16px; }

.conser-content-block img { max-width: 100%; height: auto; border-radius: 20px; margin: 20px 0; }

@media (max-width: 767px) {
    .conser-row { flex-direction: column; }
    .conser-row-text, .conser-row-media { width: 100%; }
}

/* =====================================================================
   25. NEWS PAGE
===================================================================== */
.section-news-page .common-content .common-row { padding: 100px 0 0; }

/* News Tab Filter Animation - กำหนด scope เฉพาะหน้า News เท่านั้น */
.section-news-page .conser-type-item {
    opacity: 0;
    transform: scale(0.95) translateY(12px);
    transition: opacity 0.4s cubic-bezier(0.25, 1, 0.4, 1), transform 0.4s cubic-bezier(0.25, 1, 0.4, 1);
    will-change: opacity, transform;
}

.section-news-page .conser-type-item.is-faded-in {
    opacity: 1;
    transform: scale(1) translateY(0);
}


/* =====================================================================
   26. THE MEERKAT CLUB — ROYAL SAFARI GARDEN REWARDS PAGE
   Uses the site's existing tokens: --primary-color, --accent-gold,
   --background-light, --background-dark. Adjust the fallbacks below if
   those variables aren't already defined in main.css.
===================================================================== */
/* ----- Shared section shell ----- */
#sec__reward-tiers .common-row { padding: 0; }

.meerkat-club-intro { text-align: center; margin: 0 auto 50px; }

.meerkat-club-intro .meerkat-club-copy p { margin-bottom: 0; }

.meerkat-club-logo { display: block; margin: 0 auto 50px; max-width: 150px; height: auto; }

.meerkat-club-copy { font-size: 14px; line-height: 1.8; color: var(--primary-color) }

.meerkat-club-buttons { display: flex; justify-content: center; gap: 14px; margin-top: 24px; flex-wrap: wrap; }

/* ----- Perk cards (plate / envelope / map icons) ----- */
.meerkat-club-perks-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; margin: 0 auto; }

.meerkat-club-perk-card { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 10px; }

.meerkat-club-perk-card p { margin-top: 0; font-size: 12px; color: var(--primary-color) }

.meerkat-club-perk-icon { width: 100%; height: 100%; display: flex; align-items: center; margin-bottom: 4px; justify-content: center; }

.meerkat-club-perk-icon img { width: 200px; height: auto; object-fit: contain; }

.meerkat-club-perk-card h4 { margin: 0; /* font-size: 13px; */
    letter-spacing: 1px; text-transform: uppercase; color: var(--primary-color) }

/* ----- Tier tabs -----
   Same uk-tab component the site already uses elsewhere (Meetings & Events
   package tabs, Accommodation thematic tabs) — here it's <ul uk-tab> / <li><a>,
   styled as the boxed/divider look to match thematic-tab-nav on the other
   pages. UIkit adds "uk-active" to the current <li>; no custom JS needed. */
.meerkat-club-tier-tabs { display: flex; list-style: none; margin: 0 0 40px; padding: 0; border: 1px solid var(--primary-color); border-radius: 5px; overflow: hidden; }

.meerkat-club-tier-tabs::before { border-bottom: none; }

.meerkat-club-tier-tabs li { flex: 1; border-left: 1px solid var(--primary-color); padding-left: 0; background: var(--background-light, #f2f2e8); }

.meerkat-club-tier-tabs li:first-child { border-left: none; }

.meerkat-club-tier-tabs li a { display: block; text-align: center; padding: 15px 20px; color: var(--primary-color); font-weight: 600; letter-spacing: 1px; text-transform: uppercase; font-size: 13px; border: none; }

.meerkat-club-tier-tabs li.uk-active a { color: var(--secondary-color); }

.meerkat-club-tier-tabs li.uk-active { background: var(--background-dark, #2b2118); }

/* ----- Tier switcher panels (uk-switcher) + card (membership card + stats) ----- */
.meerkat-club-tier-switcher { list-style: none; margin: 0; padding: 0; }

.meerkat-club-tier-card { margin: 0 auto; border-radius: 20px; overflow: hidden; width: 100%; }

/* Image + card-body row — offer-list sits below this, spanning the full card width */
.meerkat-club-tier-card-top { display: flex; justify-content: space-between; width: 100%; }

.meerkat-club-tier-card-visual { display: flex; align-items: flex-start; justify-content: flex-start; width: 60%; }

.meerkat-club-tier-card-visual img { width: 100%; max-width: 650px; height: auto; display: block; }

.meerkat-club-tier-card-body { padding: 40px; text-align: center; width: 40%; display: flex; flex-direction: column; justify-content: center; }

.meerkat-club-tier-card-body h3 { text-transform: uppercase; letter-spacing: 3px; font-size: 20px; color: var(--mc-text); margin: 0 0 20px; }

.meerkat-club-tier-meta { display: flex; flex-direction: column; align-items: center; gap: 4px; margin-bottom: 24px; }

.meerkat-club-tier-meta p { margin-top: 0px; text-transform: uppercase; }

.meerkat-club-tier-meta-value { font-size: 40px; font-weight: 700; color: var(--mc-text); line-height: 1.1; }

.meerkat-club-offer-list { list-style: none; margin: 0; padding: 40px 0 0 0; display: flex; justify-content: center; gap: 0; width: 100%; }

.meerkat-club-offer-list p { margin-top: 0; text-transform: uppercase; }

.meerkat-club-offer-list li { flex: 1; text-align: center; padding: 20px 15px; border-left: 1px solid var(--primary-color); display: flex; flex-direction: column; gap: 4px; align-items: center; justify-content: center; }

.meerkat-club-offer-list li:first-child { border-left: none; }

@media (max-width: 767px) {
    .meerkat-club-tier-card-top { flex-direction: column; }
    .meerkat-club-tier-card-visual, .meerkat-club-tier-card-body { width: 100%; }
    .meerkat-club-offer-list { flex-direction: column; gap: 0px; padding: 0px; }
    .meerkat-club-offer-list li { border-left: none; border-top: 1px solid var(--primary-color); padding-top: 15px; }
    .meerkat-club-offer-list li:first-child { border-top: none; padding-top: 0; }
}

@media (max-width: 480px) {
    .meerkat-club-tier-tabs { flex-direction: column; }
    .meerkat-club-tier-tabs li { border-left: none; border-bottom: 1px solid var(--primary-color); }
    .meerkat-club-tier-tabs li:last-child { border-bottom: none; }
    .meerkat-club-intro .sub-title { font-size: 18px; margin-bottom: 10px; width: 280px; }
    .meerkat-club-intro { display: flex; flex-direction: column; align-items: center; }
    .meerkat-club-logo { margin: 0 auto 30px; }
}

/* ----- Benefits comparison table -----
   A single <table> (thead + tbody together) wrapped in the rounded/
   bordered .meerkat-club-table-wrap box. A small prev/next card switcher
   (.meerkat-club-benefit-switcher) sits above the table purely as a compact
   header for narrow screens: hidden on desktop (the table's own <thead>
   already shows every tier's card there) and shown at <=768px, where the
   <thead> itself is hidden instead. The switcher also pages the table's
   own tier <col> elements (collapsing the hidden ones) via JS, 2 tiers/
   page from 768px down to 481px, 1 tier/page at <=480px.

   Named meerkat-club-benefit-* rather than meerkat-club-tier-switcher: the
   Member Tiers section earlier on the page already has its own, unrelated
   uk-switcher panel using that exact class name. They collided here once —
   hiding this switcher on desktop (display:none) hid that other section's
   switcher too, since one CSS rule matched both — so this one now has its
   own name that nothing else on the page uses. */
.meerkat-club-tier-head { margin-bottom: 30px; }

.meerkat-club-benefit-switcher-row { display: none; }

.meerkat-club-table-benefit-head { text-align: left; text-transform: uppercase; letter-spacing: .5px; font-weight: 600; font-size: 22px; line-height: 1.2; color: var(--primary-color); margin-bottom: 15px; }

.meerkat-club-table-benefit-head small { display: block; font-size: 14px; text-transform: none; letter-spacing: normal; }

/* Prev/next card switcher — desktop: hidden, the table's own <thead> below
   already shows every tier's card as a normal column header. */
.meerkat-club-benefit-switcher { display: none; }

.meerkat-club-benefit-switcher-card { position: relative; flex: 1 1 auto; display: flex; justify-content: center; align-items: flex-start; gap: 16px; }

/* Up to 2 cards can be .is-active at once (2 per page from 768px down to
   481px, 1 per page at <=480px — see the JS pageSize()), so each visible
   item needs to share the row rather than each claiming the full width. */
.meerkat-club-benefit-switcher-item { display: none; flex: 1 1 0; min-width: 0; text-align: center; }

.meerkat-club-benefit-switcher-item.is-active { display: block; }

.meerkat-club-benefit-switcher-item img { max-width: 180px; width: 100%; height: auto; display: inline-block; border-radius: 6px; }

.meerkat-club-benefit-switcher-item span { display: block; margin-top: 6px; font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: 1px; color: var(--primary-color); }

.meerkat-club-benefit-arrow { background: none; border: none; cursor: pointer; font-size: 28px; line-height: 1; color: var(--primary-color); padding: 6px 10px; }

.meerkat-club-table--head { margin-bottom: 40px; }

.meerkat-club-table-wrap { overflow: hidden; border: 1px solid var(--primary-color); border-radius: 20px; background: #f2f2e8; }

.meerkat-club-table { width: 100%; table-layout: fixed; border-collapse: collapse; background: transparent; }

.meerkat-club-table-row { border-bottom: 1px solid var(--primary-color); }

.meerkat-club-table-row:not(:has(~ .meerkat-club-table-row)) { border-bottom: none; }

.meerkat-club-table thead th { background: transparent; padding: 0px 10px; font-weight: 600; font-size: 22px; letter-spacing: .5px; text-transform: uppercase !important; line-height: 1.2; color: var(--primary-color); }

.meerkat-club-table thead th small { font-size: 14px; }

.meerkat-club-table-card { width: 100%; max-width: 180px; height: auto; display: inline-block; border-radius: 6px; }

.meerkat-club-table tbody th { text-align: left; /* Same 30px left/right as tbody td above, for the same reason: padding
       sits inside the label column's own fixed width, so it only pulls the
       row-label content (bullet + text + toggle) in from the column's
       edges — it doesn't change where the column itself starts or ends,
       so the label column still lines up with the head table's own first
       column exactly as before. */
    padding: 25px 30px; color: var(--mc-text); white-space: nowrap; position: relative; }

/* display:flex directly on a <th> is unreliable — browsers can generate an
   anonymous table wrapper around it for table-layout purposes, and the flex
   distribution then computes against that inner box rather than the cell's
   actual rendered edge, so justify-content:space-between silently fails to
   reach it. Flexing this inner div instead (th stays a plain table-cell)
   sidesteps that entirely — the toggle chevron now reliably sits flush at
   the cell's real right edge. */
.meerkat-club-table-row-label { display: flex; align-items: center; justify-content: flex-start; width: 100%; }

.meerkat-club-table tbody th p { font-weight: 600 !important; text-transform: uppercase; text-align: left; margin: 0; letter-spacing: normal; }

.meerkat-club-table tbody td { text-align: center; /* Left/right breathing room for the values (icons, %) away from each
       column's edges. Padding is inside a fixed-layout table cell's own
       column width, not extra width added on top, so this doesn't shift
       any column boundary or reopen the alignment-with-the-cards issue —
       it only moves the content in from the edges of its own column.
       Narrower breakpoints below override this back down (30px each side
       is too much once columns are down to 1-2 tiers wide on mobile). */
    padding: 14px 30px; font-size: 14px; color: var(--primary-color); white-space: nowrap; }

.meerkat-club-table tbody tr.meerkat-club-table-row:last-of-type th, .meerkat-club-table tbody tr.meerkat-club-table-row:last-of-type td { border-bottom: none; }

.meerkat-club-table-wrap .meerkat-club-table-detail p { color: var(--secondary-color); text-align: left; margin: 0; }

.meerkat-club-table-toggle { background: none; border: none; cursor: pointer; margin-left: auto; width: 18px; height: 18px; position: relative; vertical-align: middle; flex-shrink: 0; color: var(--primary-color); }

.meerkat-club-table-toggle::before { content: ''; position: absolute; inset: 0; margin: auto; width: 8px; height: 8px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); transition: transform 0.2s ease; }

.meerkat-club-table-row.is-open .meerkat-club-table-toggle::before { transform: rotate(-135deg); }

/* Higher specificity than ".meerkat-club-table tbody td { white-space:
   nowrap; }" above (needs to win, or the detail text never wraps — it
   forces the whole table wider instead, until .meerkat-club-table-wrap's
   overflow:hidden clips it, which is what made the box look like it
   "broke"/shifted when opened). word-break/overflow-wrap are extra
   insurance for a single long word/URL with no spaces to break on. */
.meerkat-club-table tbody .meerkat-club-table-detail-row td { display: none; background: var(--primary-color); color: rgba(255, 255, 255, 0.85); text-align: left; font-size: 12px; line-height: 1.7; padding: 16px 20px; white-space: normal; word-break: break-word; overflow-wrap: break-word; }

.meerkat-club-table tbody .meerkat-club-table-detail-row.is-open td { display: table-cell; }

/* Elephant "included" check mark — uses /assets/images/icon-elephent.svg (see content-meerkat-club.php) */
.meerkat-club-icon-check { display: inline-block; width: 40px; height: auto; object-fit: contain; vertical-align: middle; }

.meerkat-club-terms { margin-top: 50px; }

/* ----- Sign-up CTA banner ----- */
.meerkat-club-signup { position: relative; /* background-color: var(--mc-brown); */
    background-size: cover; background-position: center; padding: 90px 20px; text-align: center; }

.meerkat-club-signup::before { content: ''; position: absolute; inset: 0; background: rgba(20, 14, 9, 0.55); }

.meerkat-club-signup__box { position: relative; z-index: 1; /* max-width: 600px; */
    margin: 0 auto; color: #f2f2e8; }

.meerkat-club-signup__box h2 { color: var(--mc-gold); font-size: 30px; margin: 0 0 14px; }

.meerkat-club-signup__box div { font-size: 14px; line-height: 1.8; color: rgba(255, 255, 255, 0.85); margin-bottom: 24px; }

/* .common-navbar-button / .common-navbar-button-org are already styled for use on
   both light and dark backgrounds elsewhere in the site, so no override is needed
   here for the dark sign-up banner. */
/* ----- Responsive ----- */
@media (max-width: 1024px) {
    .meerkat-club-perks-grid { grid-template-columns: repeat(3, 1fr); gap: 20px; }
    /* Benefits table from 1024px down: kept on table-layout:fixed (the
           default set on .meerkat-club-table) rather than switching to auto —
           auto let each tier column shrink to fit its small icon, leaving big
           uneven gaps between columns instead of the 4 columns sharing the
           remaining width evenly. Fixed + the colgroup's percentages (label
           column wider, tier columns split the rest equally) hold that split
           at every size down to the 768px paging breakpoint below. */
    .meerkat-club-table thead th { /* font-size: 16px; */
        padding: 12px 6px; }
    .meerkat-club-table tbody th { white-space: normal; }
}

@media (max-width: 768px) {
    .meerkat-club-perks-grid { grid-template-columns: 1fr; gap: 30px; }
    /* .meerkat-club-intro h1 {
            font-size: 24px;
        } */
    /* .meerkat-club-tier-tabs li a {
            padding: 10px 8px;
            font-size: 10px;
        } */
    /* At and below 768px: the separate head table (.meerkat-club-table--head,
           floating above the bordered box) is hidden entirely — its per-column
           tier cards take up too much width next to 4 columns of data — and
           the compact prev/next card switcher takes over as the header
           instead. Pages 2 tier cards at a time here (down to 481px — see the
           480px block below for the 1-card page). The table body itself is
           untouched besides which columns are hidden: every visible tier's
           value still shows for every row. */
    .meerkat-club-table--head { display: none; }
    /* Heading + switcher now share one row instead of stacking: without
           this, the heading (.meerkat-club-table-benefit-head) sits in its own
           block above the switcher and reads as "pushed to the top", detached
           from the tier card it describes. Flexing them together keeps the
           heading fixed on the left while the switcher's current card stays
           lined up with it — and with the data column it pages below — as you
           tap prev/next.
    
           Widths below (40% / 60%, for the 2-card page from 768px down to
           481px) are hard-coded to match pagingLabelWidth() in the PHP's
           script — keep the two in sync if either changes; the 60% / 40%
           1-card version lives in the 480px block below. Fixed widths (not
           flex:auto content-sizing) are what makes this row's label + card
           columns line up with the table's label + data columns underneath,
           instead of sizing to the arrows and text and drifting out of
           alignment with the table.
    
           .meerkat-club-benefit-switcher-card used to reserve 26px of padding
           on each side for the prev/next arrows — but that shrank the card
           area to less than its true 60%/40% share while the table's data
           columns underneath stayed at the full percentage, so each card
           ended up centered in a narrower box than its column and drifted off
           that column's actual center (worse the narrower the screen, since
           the 26px was fixed while the columns scale with %). Dropping that
           padding entirely and letting the transparent arrows overlay the
           card's own edges with position:absolute instead keeps the card
           area at exactly the same percentage as the table's data columns —
           nothing left to cause drift. */
    .meerkat-club-benefit-switcher-row { display: flex; align-items: center; margin-bottom: 20px; }
    .meerkat-club-table-benefit-head { margin-bottom: 0; box-sizing: border-box; flex: 0 0 40%; max-width: 40%; padding-right: 10px; font-size: 20px; }
    .meerkat-club-benefit-switcher { display: flex; align-items: center; margin-bottom: 0; box-sizing: border-box; flex: 0 0 60%; max-width: 60%; position: relative; }
    .meerkat-club-benefit-switcher-card { width: 100%; box-sizing: border-box; }
    /* Arrows sit outside the card row (negative left/right offset) instead
           of inside it, so they overlay without consuming any of the row's
           layout width — the card area keeps exactly the 40%/60% split above,
           nothing shifts to make room for them. top: calc(50% - 10px) nudges
           them up from dead-center so they land visually centered between the
           two cards rather than against the (taller) card image. */
    .meerkat-club-benefit-arrow { position: absolute; top: calc(50% - 10px); transform: translateY(-50%); z-index: 1; }
    .meerkat-club-benefit-arrow--prev { left: -20px; }
    .meerkat-club-benefit-arrow--next { right: -20px; }
    /* table-layout stays fixed here too — the paging JS now writes each
           visible tier <col>'s width directly (see the script), splitting the
           70% left after the label column evenly across whichever 1-2 tiers
           are on screen, so the visible column(s) always fill the row instead
           of leaving gaps where the hidden ones used to be reserved.
    
           Hidden tiers are collapsed via visibility:collapse on their <col>
           (set in the script), not display:none on the <td>s — display:none
           on a cell makes the browser re-count the remaining cells in that
           row into the wrong <col> slots, which was cramming a visible
           tier's data into a sliver on the left instead of filling its own
           column. Collapsing the <col> itself removes the whole column as a
           unit, so there's no is-hidden-tier CSS rule needed here anymore. */
    .meerkat-club-table tbody td { font-size: 12px; padding: 10px 20px; }
    .meerkat-club-table tbody th { padding: 20px 20px; }
    .meerkat-club-icon-check { width: 28px; }
}

@media (max-width: 480px) {
    /* Down from 2 cards/columns to 1 here — the JS's own pageSize()
           switches to 1 at this same breakpoint. The heading column widens
           further to 60% (card column down to 40%) since there's now only
           one tier's data below it to line up with — matches
           pagingLabelWidth() in the script and the table's own label <col>,
           which the script widens to 60% too while paging with 1 card
           visible. Smaller card image so it still fits its narrower 40%. */
    .meerkat-club-table-benefit-head { flex-basis: 60%; max-width: 60%; padding-right: 20px; font-size: 20px; }
    .meerkat-club-benefit-switcher { flex-basis: 40%; max-width: 40%; }
    .meerkat-club-benefit-switcher-item img { max-width: 140px; }
    .meerkat-club-table tbody td { font-size: 13px; }
}

/* =====================================================================
   27. Privacy Policy
===================================================================== */
.custom-policy { text-align: left; }

.custom-policy h1 { color: var(--secondary-color); text-align: center; font-size: 44px !important; font-weight: 700; text-transform: none !important; }

.custom-policy h3 { font-size: 22px; letter-spacing: .5px; text-transform: uppercase !important; line-height: 1.2; color: #f2f2e8; }

.custom-policy p { margin-bottom: 20px; color: #f2f2e8; }

/* =====================================================================
   28. FOOTER
===================================================================== */
.section-custom-footer { position: relative; display: flex; justify-content: center; flex-direction: column; }

.section-custom-footer::after { content: ''; position: absolute; left: 0; bottom: 0; width: 100%; height: 100%; background-image: url('https://royalsafarigarden.webconnection.app/wp-content/themes/wcl/assets/images/bg-animal-dark.svg'); background-repeat: no-repeat; background-position: bottom center; background-size: 100%; z-index: 0; pointer-events: none; }

.section-custom-footer > * { position: relative; z-index: 2; }

.common-copyright-content p { margin: 0; padding: 15px 0; color: #f2f2e8; }

.footer-logo-groups { text-align: center; }

.footer-logo-title { margin-bottom: 15px; }

.footer-logo-block { margin-bottom: 40px; }

.common-footer-content a { color:  var(--primary-color); }

.common-footer-content a:hover { color: var(--secondary-color); }

.common-copyright-content a { padding: 0; color: var(--secondary-color); }

.common-copyright-content .copyright-left, .common-copyright-content .copyright-right { color: var(--secondary-color); }

.common-copyright-content { display: flex; justify-content: space-between; padding: 10px 30px; }

.footer-logo-row { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 30px; }

.footer-logo-item { display: flex; align-items: center; justify-content: center; }

.footer-logo-item img { max-height: 60px; width: auto; display: block; }

.common-footer-content { padding: 0 30px 80px 30px; color: var(--primary-color); }

.icon-whatsapp-popup { position: fixed; right: 30px; bottom: 120px; z-index: 99999999; width: 60px; }

@media (max-width: 767px) {
    .footer-logo-row { gap: 16px; }
    .footer-logo-item img { max-height: 40px; }
    .icon-whatsapp-popup { /* width: 50px; */
        right: 20px; }
}

@media (max-width: 675px) {
    .common-copyright-content { display: flex; justify-content: space-between; padding: 10px 30px; flex-direction: column; align-items: center; }
    .section-custom-footer::after { background-size: 180%; background-position: -150px bottom; }
    .common-footer-content { padding: 0 30px 40px 30px; }
}

@media (max-width: 480px) {
    .section-custom-footer::after { background-size: 200%; background-position: -150px bottom; }
    .common-footer-content { padding: 0 30px 0px 30px; }
    .common-copyright-content .copyright-left, .common-copyright-content .copyright-right { text-align: center; font-size: 10px; }
}

/* =====================================================================
   29. GLOBAL RESPONSIVE OVERRIDES
===================================================================== */
.offer-type-empty { text-align: center; padding: 60px 20px; color: var(--text-color, #3f3530); opacity: 0.6; }

.offer-type-empty p { font-size: 15px; margin: 0; }

@media (max-width: 767px) {
    .section-heading-row { justify-content: center; flex-direction: column; }
    .section-heading-row .uk-navbar-right { margin-left: unset; }
}

@media (max-width: 480px) {
    .common-wrapper.background-dark h2, .common-wrapper.background-light h2, .common-wrapper.background-blue h2 { font-size: 30px !important; }

    .common-wrapper.background-dark h1, .common-wrapper.background-light h1, .common-wrapper.background-blue h1 { font-size: 38px !important; }

    /* h4 { font-size: 18px !important; } */
}