/*
Theme Name: Mellow - Hotel HTML Website Template
Description: ปรับปรุงระยะห่างให้สมดุล (Fixed Pagination Balance)
*/

/*--------------------------------------------------------------
/** 1. VARIABLES
--------------------------------------------------------------*/
:root {
  --primary-color: #D16806;
  --secondary-color: #F9F6F3;
  --black-color: #1A1A1A;
  --dark-color: #353535;
  --primary-color-200: #E8F0F1;
  --primary-color-400: #c4e9ed;
  --gray-color: #777F81;
  --light-color: #fdfdfd;

  /* bootstrap color-scheme */
  --bs-dark-rgb: 80, 80, 80;
  --bs-gray-100: #EAE5DD;
  --bs-gray-300: #DCDCDC;
  --bs-light-rgb: rgba(255, 255, 255, 1);
  --bs-body-color-rgb: 53, 53, 53;
  --bs-primary-rgb: 209, 104, 6;
  --bs-secondary-rgb: 249, 246, 243;

  /* Fonts */
  --heading-font: "Cormorant Upright", serif;
  --body-font: "Sora", sans-serif;
}

/*----------------------------------------------*/
/* 2 GENERAL TYPOGRAPHY
/*----------------------------------------------*/
body {
  font-family: var(--body-font);
  font-size: 16px;
  font-weight: 400;
  line-height: 164%;
  letter-spacing: 0.32px;
  color: var(--dark-color);
  margin: 0;
}

h1, h2, h3, h4, h5, h6 {
  color: var(--black-color);
  font-family: var(--heading-font);
  text-transform: capitalize;
  font-weight: 400;
}

a {
  color: inherit;
  text-decoration: none;
  transition: 0.3s ease-in-out;
}

a:hover {
  color: var(--primary-color);
}

/*--------------------------------------------------------------
/** 2.3 Section (ระยะห่างกระชับ)
--------------------------------------------------------------*/
.padding-small {
  padding-top: 0.5em;
  padding-bottom: 0.5em;
}

.padding-medium {
  padding-top: 1em;
  padding-bottom: 1em;
}

.padding-large {
  padding-top: 1.5em;
  padding-bottom: 1.5em;
}

.padding-side {
  padding-left: 6rem;
  padding-right: 6rem;
}

@media (max-width: 992px) {
  .padding-side {
    padding-left: 2rem;
    padding-right: 2rem;
  }
}

@media (max-width: 576px) {
  .padding-side {
    padding-left: 1rem;
    padding-right: 1rem;
  }
}

/* - Section Margin */
.margin-small { margin: 1em 0; }
.margin-medium { margin: 1.5em 0; }
.margin-large { margin: 2em 0; }

/*--------------------------------------------------------------
/** 3. ROOM CARDS & SWIPER (ปรับแก้ระยะโดด)
--------------------------------------------------------------*/
.room-card {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.room-image-wrap {
  width: 100%;
  aspect-ratio: 4 / 3; /* บังคับสัดส่วนรูปภาพให้เท่ากัน */
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border-radius: 15px;
}

.room-image-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}

.room-card:hover img {
  transform: scale(1.1);
}

/* แก้ไข Swiper Container ให้มีพื้นที่ด้านล่างคงที่ */
.room-swiper {
  padding-bottom: 50px !important; /* เว้นที่ว่างให้จุด Pagination ด้านล่าง */
}

/* ปรับแต่งจุดเลื่อน (Pagination) ให้สมดุล */
.room-pagination.swiper-pagination-bullets {
  position: absolute !important;
  bottom: 0 !important; /* วางไว้ที่ขอบล่างของพื้นที่ที่เว้นไว้ */
  left: 0;
  width: 100%;
  text-align: center;
  line-height: 1;
}

.room-pagination .swiper-pagination-bullet {
  width: 10px;
  height: 10px;
  background-color: var(--primary-color);
  opacity: 0.3;
  margin: 0 6px !important;
  transition: all 0.3s ease;
}

.room-pagination .swiper-pagination-bullet-active {
  opacity: 1;
  width: 30px; /* จุดที่เลือกจะยาวขึ้นแบบ Modern */
  border-radius: 5px;
}

/*--------------------------------------------------------------
/** 4. GALLERY & UTILITIES
--------------------------------------------------------------*/
.gallery-grid-3 { 
  display: grid; 
  grid-template-columns: repeat(3, 1fr); 
  gap: 15px; 
  margin-top: 20px; 
}

.gallery-img-item { 
  width: 100%; 
  aspect-ratio: 4/3; 
  object-fit: cover; 
  border-radius: 15px; 
  cursor: pointer; 
  transition: 0.3s; 
}

.btn {
  padding: 0.8rem 2.4rem;
  border-radius: 10px;
  transition: all 0.4s ease-in-out;
}

.btn-primary {
  background-color: var(--secondary-color);
  border-color: var(--secondary-color);
  color: var(--dark-color);
}
/* จัดการระยะห่างของ Swiper ให้สมดุล */
.room-swiper-container {
    padding-bottom: 45px !important; /* พื้นที่พอดีสำหรับจุดไข่ปลาด้านล่าง */
    position: relative;
}

/* ปรับตำแหน่ง Pagination ให้ชิดข้อความมากขึ้น */
.room-pagination.swiper-pagination {
    bottom: 5px !important;
    left: 0;
    width: 100%;
    text-align: center;
}

/* ดีไซน์จุดไข่ปลาแบบ Modern */
.room-pagination .swiper-pagination-bullet {
    width: 8px;
    height: 8px;
    background-color: var(--primary-color);
    opacity: 0.3;
    margin: 0 5px !important;
    transition: all 0.3s ease;
}

.room-pagination .swiper-pagination-bullet-active {
    opacity: 1;
    width: 22px; /* จุดที่เลือกจะยาวขึ้น */
    border-radius: 4px;
}

/* บังคับสัดส่วนรูปภาพให้เท่ากันทุกใบ */
.room-image-wrap {
    width: 100%;
    aspect-ratio: 4/3;
    overflow: hidden;
}

.room-image-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
/* สไตล์สำหรับกล่องไอคอน Info */
.info-icon-box {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100px;
    height: 100px;
    z-index: 1;
}

.info-icon-box iconify-icon {
    font-size: 60px; /* ปรับขนาดไอคอน */
    z-index: 2;
}

.info-icon-box .pattern-bg {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 80px;
    z-index: -1;
    opacity: 0.5; /* ปรับความจางของลายด้านหลัง */
}

.info-icon-box .pattern-bg img {
    width: 100%;
    height: auto;
}

/* ปรับระยะห่างสำหรับมือถือ */
@media (max-width: 576px) {
    .info-icon-box {
        width: 80px;
        height: 80px;
    }
    .info-icon-box iconify-icon {
        font-size: 45px;
    }
}
/* สไตล์สำหรับกล่องไอคอน Info สีดำหรู */
.info-icon-box {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100px;
    height: 100px;
    z-index: 1;
}

.info-icon-box iconify-icon {
    font-size: 70px !important; /* ปรับขนาดไอคอนให้เด่นขึ้น */
    color: var(--black-color) !important; /* บังคับให้เป็นสีดำ */
    z-index: 2;
}

.info-icon-box .pattern-bg {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 90px;
    z-index: -1;
    opacity: 0.3; /* ปรับความจางของลายPatternด้านหลัง */
}

.info-icon-box .pattern-bg img {
    width: 100%;
    height: auto;
}

/* ปรับระยะห่างสำหรับมือถือ */
@media (max-width: 576px) {
    .info-icon-box {
        width: 80px;
        height: 80px;
    }
    .info-icon-box iconify-icon {
        font-size: 55px !important;
    }
}
/* จัดการระยะห่างของ Swiper ให้สมดุล */
.video-container {
    padding-bottom: 45px !important; /* พื้นที่พอดีสำหรับปุ่มควบคุมด้านล่าง */
    position: relative;
    aspect-ratio: 16/9; /* บังคับสัดส่วนวีดีโอให้เท่ากันทุกรูป */
}

/* ปรับตำแหน่งปุ่มควบคุม (Pagination) ให้ชิดข้อความมากขึ้น */
.video-controls.position-absolute {
    bottom: 5px !important;
    left: 0;
    width: 100%;
    text-align: center;
}

/* ดีไซน์ปุ่มควบคุมให้ดูพรีเมียม */
.video-controls .btn-light {
    width: 32px;
    height: 32px;
    background-color: rgba(255, 255, 255, 0.6);
    opacity: 0.3;
    margin: 0 5px !important;
    transition: all 0.3s ease;
}

.video-controls .btn-light-active {
    opacity: 1;
    width: 25px; /* จุดที่เลือกจะยาวขึ้น */
    border-radius: 4px;
}
/* Container วิดีโอ: ปรับให้ยืดหยุ่นตามขนาดวิดีโอจริง */
.about-video-wrapper {
    position: relative;
    width: 100%;
    background: #000;
    line-height: 0; /* กำจัดช่องว่างใต้ตัววิดีโอ */
}

/* ปุ่มควบคุมวิดีโอแบบลอย (Overlay) */
.video-overlay-controls {
    position: absolute;
    bottom: 15px;
    left: 15px;
    right: 15px;
    display: flex;
    gap: 10px;
    z-index: 10;
}

.v-btn {
    background: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(8px); /* เอฟเฟกต์กระจกฝ้า */
    border: 1px solid rgba(255, 255, 255, 0.3);
    color: #fff;
    width: 35px;
    height: 35px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    cursor: pointer;
}

.v-btn:hover {
    background: var(--primary-color);
    border-color: var(--primary-color);
    transform: scale(1.1);
}

.v-btn iconify-icon {
    font-size: 18px;
}

/* ปรับระยะห่าง Section Our Gallery ให้ขยับมาชิดขึ้นเพื่อความสมดุล */
#gallery.padding-medium {
    padding-top: 2em !important;
}
/*--------------------------------------------------------------
/** 5. FLOATING CONTACT BUTTONS (ปรับปรุงใหม่ให้ชิดขอบจอ)
--------------------------------------------------------------*/
/* บังคับแสดงผลทันทีและอยู่บนสุดเสมอ */
.floating-contact-wrapper {
    position: fixed !important;
    bottom: 25px !important;    /* สูงจากขอบล่างพอดีๆ */
    right: 15px !important;     /* ขยับให้ชิดขอบขวามากขึ้นตามรูป */
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;       /* ระยะห่างระหว่างปุ่มที่สมดุล */
    z-index: 2147483647 !important; 
    pointer-events: auto !important;
}

/* สไตล์ปุ่มวงกลม */
.f-btn {
    width: 52px !important;      /* ขนาดปุ่มที่พอดีกับนิ้วและไม่บังจอ */
    height: 52px !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-decoration: none !important;
    box-shadow: 0 4px 12px rgba(0,0,0,0.2) !important;
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
    opacity: 1 !important;
    visibility: visible !important;
}

/* สีแต่ละแบรนด์ */
.f-phone { background-color: #D16806 !important; color: white !important; }
.f-line { background-color: #06C755 !important; color: white !important; }
.f-messenger { 
    background-color: #ffffff !important; 
    color: #0084FF !important; 
    border: 1px solid #eee !important; 
}

/* ขนาดไอคอนภายใน */
.f-btn iconify-icon {
    font-size: 28px !important;
    display: block !important;
}

/* เอฟเฟกต์เมื่อแตะหรือเอาเมาส์วาง */
.f-btn:hover {
    transform: scale(1.1) translateX(-5px) !important;
}

/* ป้ายกำกับข้างปุ่ม (จะซ่อนในหน้าจอมือถืออัตโนมัติ) */
.f-label {
    position: absolute;
    right: 65px;
    background: rgba(0,0,0,0.8);
    color: #fff;
    padding: 4px 12px;
    border-radius: 8px;
    font-size: 13px;
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    transition: 0.3s;
}

.f-btn:hover .f-label {
    opacity: 1;
    visibility: visible;
}

/* ปรับแต่งพิเศษสำหรับหน้าจอมือถือเล็ก (Mobile Optimization) - แก้ไขให้ไม่ตกขอบ */
@media (max-width: 576px) {
    .floating-contact-wrapper {
        bottom: 15px !important;    /* ลดระยะจากขอบล่างลงเล็กน้อย */
        right: 18px !important;     /* เพิ่มระยะห่างจากขอบขวาเพื่อไม่ให้ตกขอบ */
        gap: 8px !important;        /* ลดช่องว่างระหว่างปุ่มให้ดูไม่ยาวเกินไป */
    }
    .f-btn {
        width: 46px !important;      /* ลดขนาดปุ่มลงเล็กน้อยให้ดูพอดีกับจอ */
        height: 46px !important;
        box-shadow: 0 3px 8px rgba(0,0,0,0.2) !important;
    }
    .f-btn iconify-icon {
        font-size: 22px !important;  /* ปรับขนาดไอคอนให้เข้ากับปุ่ม */
    }
    .f-label {
        display: none !important;    /* ซ่อนป้ายชื่อในมือถือแน่นอน */
    }
}