@import url('https://fonts.googleapis.com/css2?family=DM+Serif+Display:ital@0;1&family=Sarabun:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800&display=swap');

:root {
    --font-primary: "DM Serif Display", serif;
    --font-secondary: "Sarabun", sans-serif;
    --primary-color: #B08968;
}

.common-wrapper .common-content .common-row .details .heading-intro .heading-sub {
    color: var(--primary-color);    
    font-size: 16px;
}
.common-navbar .common-navbar-main .common-navbar-container .common-navbar-button a {
    font-size: 16px;
    font-family: var(--font-primary);
    padding: 20px 30px;
    background-color: var(--primary-color);
}
.common-navbar .uk-navbar-nav > li > a, .common-navbar .uk-navbar-dropdown-nav > li > a, .common-navbar .uk-navbar-item, .common-navbar .uk-navbar-toggle ,
.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 {
    color:  var(--primary-color);
    font-family: var(--font-secondary);
    font-size: 14px;
    font-weight: 400;
}
html, body {
    font-size: 14px;
    font-weight: 100;
}
.common-navbar .common-navbar-main .hamburger_box .menu_text:before {
    font-family: var(--font-primary);
}
/* button primary */
.common-wrapper .common-content .common-row .wp-block-button__link , .location-button ,
.common-wrapper .common-content .common-row .uk-button-primary {
    color: var(--primary-color);
    font-family: var(--font-primary);
    font-size: 16px;
    /* border: 1px solid var(--primary-color); */
    /* padding: 0px 15px; */

}
.common-wrapper .common-content .common-row .uk-button-primary , .location-button{
    background-color: #fff !important;
    border: 1px solid var(--primary-color);
    color: var(--primary-color);

}
.heading-intro .wp-block-button__link:hover , .location-button:hover{
    color: #fff !important ;
    
}
 .location-button:hover , .common-wrapper .common-content .common-row .uk-button-primary:hover {
    background-color:var(--primary-color) !important;
    color: #fff;
 }
/* button primary */

/* button secondary */
.uk-button-secondary , .common-footer .common-footer-content .uk-button-secondary {
    background-color: var(--primary-color) !important;
    font-family: var(--font-primary);
    
}
/* button secondary */

.common-wrapper .common-content .common-row .uk-button-default {
    background-color: var(--primary-color);
    border: 1px solid var(--secondary-color);
    font-family: var(--font-primary);
    font-size: 16px;
    color: #fff;
}
.single-accommodation-sub .common-wrapper.uk-background-muted {
    background-color: #fff;
}
.uk-lightbox {
    z-index: 99999;
}
.common-navbar {
    z-index: 99999;
}

.common-navbar .common-navbar-main .common-logo {
        display: flex;
        align-items: center;
}

    /* ตกแต่งปุ่ม Play วงกลม */
.play-circle {
    width: 90px;
    height: 90px;
    border: 2px solid rgba(255, 255, 255, 0.8);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    background: rgba(255, 255, 255, 0.1);
     /* backdrop-filter: blur(4px); เพิ่มความหรูหราแบบโปร่งแสง */
    transition: all 0.3s ease-in-out;
}

.uk-inline:hover .play-circle {
    transform: scale(1.1);
    background: rgba(255, 255, 255, 0.3);
    border-color: #fff;
}
.video-custom-section .uk-icon:not(.uk-preserve) [stroke*='#']:not(.uk-preserve) {
    stroke: currentcolor;
    fill: #fff;
}
.ig-custom-section h2 {   
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;

}
.ig-custom-section h2 svg {   
    width: 30px;
}
.ig-custom-section {
    background: #f0e4ca;
}

.floor-plan-section  .common-card-content .floor-card .uk-icon  {
    background-color: unset;
}
.floor-plan-section .common-card-content .uk-slider-container-offset .floor-card .uk-icon svg {
    width: 30px;
}
.floor-plan-section .common-row {
    overflow: hidden;
}
.floor-plan-section .uk-position-center-right-out {
    right: 0;
    left: auto;
}
.floor-plan-section .uk-position-center-left-out {
    left: 0;
}
.floor-plan-section .common-card-content .common-card-default {
    background: #fff;
    border: 1px solid #B08968;
    display: flex
}
.floor-plan-section .common-card-content .common-card-default .uk-card-body {
    gap: 10px;
}
.floor-plan-section .common-card-content .uk-position-small {
    top:40%;
}
.floor-card .uk-padding-small {
    padding: 30px;
}
.plan-details-content ul {
    list-style-type: none;
    padding-left: 0px;
}
.plan-bg {
    padding: 0 !important;
    /* 1. แก้ไข Path ให้ถูกต้อง */
    background-image: url('../images/Le_Foret_Plan_BG.jpg'); 
    
    /* 2. ตั้งค่าการแสดงผล */
    background-repeat: no-repeat;
    background-position: bottom center;
    
    /* 3. แนะนำให้ใช้ cover หากต้องการให้ภาพเต็ม หรือใช้ contain ตามเดิมถ้าภาพเป็นลายขอบๆ */
    background-size: cover; 
    
    /* 4. สำคัญ: ต้องระบุสีพื้นหลังสำรองและพื้นที่ว่าง (Padding) เพื่อให้เห็นรูป */
    background-color: #f9f7f4; 
    padding: 80px 0; 
    width: 100%;
}



.plan-bg {
    /* ใช้ linear-gradient ทับภาพพื้นหลัง */
    /* จากขาวทึบ (100%) ไล่ไปเป็นโปร่งใส (0%) เพื่อให้เห็นภาพด้านล่าง */
    background-image: linear-gradient(to bottom, rgb(255 255 255) 20%, rgb(255 255 255 / 0%) 60%), url(../images/Le_Foret_Plan_BG.jpg);
    
    background-repeat: no-repeat;
    background-size: cover;
    background-position: bottom center;
}
/* บังคับให้แผนที่แสดงผลเต็มพื้นที่และปรับความสูง */
.google-map-embed iframe {
    width: 100% !important;
    height: 600px !important; /* ปรับความสูงตามต้องการ */
    display: block;
}


/* เส้นขีดด้านซ้ายใน Detail (ถ้ามี) */
.location-description {
    line-height: 1.8;
    font-size: 0.95rem;
}

/* ปรับสไตล์ปุ่มให้เป็นสีดำตามรูป */
.uk-button-secondary {
    background-color: #000 !important;
    color: #fff !important;
    border-radius: 0;
    letter-spacing: 2px;
}

/* สถานะเมื่อถูกซ่อน */
.card-hidden #location-card-content {
    transform: translateX(120%); /* เลื่อนกล่องออกไปทางขวา */
    opacity: 0;
    pointer-events: none;
}

/* ปรับแต่งปุ่มกด */
#toggle-card-btn {
    left: -20px; /* ให้ปุ่มยื่นออกมานอกกล่องเล็กน้อย */
    border-radius: 4px 0 0 4px;
    transition: all 0.5s ease;
}

/* เมื่อซ่อนแล้ว ให้ปุ่มขยับกลับมาติดขอบจอ */
.card-hidden #toggle-card-btn {
    left: 430px; /* ปรับค่านี้ให้พอดีกับความกว้างกล่องของคุณเพื่อให้ปุ่มยังค้างอยู่ขอบจอ */
}


/* บังคับตำแหน่ง Wrapper ให้คงที่และอยู่บนสุด */
#master-location-wrapper {
    z-index: 9999 !important;
    margin-right: 0;
    transition: transform 0.6s cubic-bezier(0.77, 0, 0.175, 1) !important;
    /* ล้างค่า transform ของเดิมของ UIkit เพื่อไม่ให้จม */
    transform: translateY(-50%) translateX(0); 
}

/* เมื่อสั่งซ่อน: เลื่อนไปทางขวา 450px (เท่าความกว้างกล่อง) */
#master-location-wrapper.is-hide {
    transform: translateY(-50%) translateX(600px) !important;
}

/* หมุนลูกศรกลับด้าน */
#master-location-wrapper.is-hide #map-arrow {
    transform: rotate(180deg);
}

/* สไตล์เพิ่มเติม */
.google-map-embed iframe {
    width: 100% !important;
    height: 650px !important;
    display: block;
    border: none;
}
.location-card-overlay {
    padding: 30px 40px !important;
}

.common-footer {
    background-color: #D6BFA6;
}
.common-copyright .common-copyright-content , .common-copyright .common-copyright-content a {
    color: var(--primary-color)
}
.common-copyright {
    background-color: #fff;
}



/* เลือก section ที่มีคลาส leaf-01 */
.common-wrapper.leaf-01 {
    position: relative; /* กำหนดให้ section เป็นจุดอ้างอิง */
    overflow: hidden;
}

/* สร้างรูปใบไม้ด้วย ::before */
.common-wrapper.leaf-01::before {
    content: ""; 
    position: absolute;
    
    /* ปรับตำแหน่งตามรูปตัวอย่าง (ขวาบน) */
    top: 0px;           /* ปรับระยะห่างจากด้านบนของ section */
    right: -40px;        /* ชิดขอบขวา */
    
    /* เรียกรูปใบไม้ */
    background-image: url('../images/leaf-01.png'); /* ตรวจสอบ path รูปภาพให้ถูกต้อง */
    background-size: contain;
    background-repeat: no-repeat;
    
    /* กำหนดขนาดใบไม้ */
    width: 300px;         /* ปรับความกว้างตามต้องการ */
    height: 400px;        /* ปรับความสูงตามต้องการ */
    
    z-index: 1;           /* ให้อยู่เหนือพื้นหลัง */
    pointer-events: none; /* ให้เมาส์คลิกทะลุได้ */
}
.common-wrapper.leaf-02::after {
    content: "";
    position: absolute;
    bottom: -130px;
    right: 0px;
    background-image: url(../images/leaf-02.png);
    background-size: contain;
    background-repeat: no-repeat;
    width: 300px;
    height: 400px;
    z-index: 1;
    pointer-events: none;
}

.pdpa-custom {
    display: flex;
    flex-wrap: wrap;
    text-align: justify;
    flex-direction: column;
}
.privacy-policy .common-wrapper.uk-background-muted {
    background-color: #fff;
}



/* ======================================================= */
.video-custom-section {
    display: none;
}
.intro-custom-section .common-content .common-row {
    padding-bottom: 0;
}
#BOOKING_WIDGET {
    display: none;
}
.nav-btn-custom {
    background-color: var(--primary-color);
    border: 1px solid var(--secondary-color);

    padding: 0 20px;
}
.nav-btn-custom a {
    color: #fff !important;
    font-family: var(--font-primary) !important;
    font-size: 16px !important;
}
.nav-btn-custom:hover {
    background-color: var(--secondary-color);
    border: 1px solid var(--secondary-color);
}
/* ======================================================= */





@media (min-width: 2654px) {
    .common-wrapper.leaf-01::before , .common-wrapper.leaf-02::after  {
    width: 400px;
    height: 600px;
    }
}
@media (max-width: 1350px) {
    .common-wrapper.leaf-02::after  {
        width: 200px;
        height: 300px;
    }
}
@media (max-width: 959px) {
    .common-wrapper.leaf-01::before {
        width: 170px;
        height: 250px;
        top: 50px;
    }
}
@media (max-width: 900px) {
    .common-wrapper.leaf-02::after  {
        display: none;
    }
}
@media (max-width: 710px) {
    .common-wrapper.leaf-01::before   {
        display: none;
    }
}
@media (max-width: 640px) {
    .common-switch-places-content .uk-grid-collapse .uk-card-body {
        text-align: left;
    }

    .common-navbar .common-navbar-main .common-navbar-container .common-navbar-button a {
        padding: 10px;
    }
    .common-navbar .uk-navbar-right {
        gap: 0px;
    }
    .floor-plan-section .common-card-content .uk-slider .uk-grid {
        justify-content: end;
    }
    .common-switch-places-content .uk-grid-collapse .uk-flex {
        display: flex;
        justify-content: flex-start;
    }
    .video-custom-section .uk-container {
        padding: 0 30px;
    }
}
@media (max-width: 400px) {
    .ig-custom-section h2 svg {
        width: 22px;
    }
    .ig-custom-section h2 {
        font-size: 20px !important;
    }
    .ig-custom-section .common-lightbox {
        margin-top: 40px;
    }
}