/* =============================================================
   สไตล์สำหรับมือถือและแท็บเล็ต (หน้าบ้านทุกหน้า)
   - ออกแบบให้ Override โดยไม่ต้องแก้ HTML เดิม
   - เป้าหมาย: เต็มจอ, ไม่ล้นแนวนอน, สัดส่วนอ่านง่าย ใช้งานสะดวก
============================================================= */

/* ------------------------------
   ตัวแปรพื้นฐานแบบปลอดภัย
------------------------------ */
:root {
    --mobile-h-padding: 16px;
    --mobile-gap: 12px;
    --mobile-font: clamp(14px, 3.7vw, 16px);
    --mobile-title: clamp(18px, 5.6vw, 24px);
    --mobile-card-min: min(82vw, 20rem);
    --mobile-img-h: clamp(180px, 48vw, 280px);
}

/* ------------------------------------------------------------
   รีเซ็ตการล้นและปรับกล่องให้คำนวณแบบ border-box เพื่อลดการล้นหน้าจอ
------------------------------------------------------------ */
html, body { width: 100%; overflow-x: hidden; }
*, *::before, *::after { box-sizing: border-box; }
img, video { max-width: 100%; height: auto; display: block; }

/* ------------------------------
   Header/Top bar ปรับขนาดโลโก้/พื้นที่
------------------------------ */
@media (max-width: 991.98px) {
    .top-nav-bar {
        padding-left: var(--mobile-h-padding) !important;
        padding-right: var(--mobile-h-padding) !important;
        gap: var(--mobile-gap) !important;
    }

    .header-logo {
        max-width: 120px !important;
        height: auto !important;
    }

    /* แสดงเฉพาะไอคอนค้นหาบนมือถือ และรองรับโหมดขยายเมื่อคลิก */
    .search-bar { width: auto !important; min-width: 36px !important; }
    .search-bar .search-input { display: none !important; }
    .search-bar .search-icon { display: inline-block !important; margin-left: 0 !important; position: static !important; cursor: pointer !important; }
    .search-bar.expanded .search-input { display: block !important; width: 70vw !important; margin-top: 8px !important; }
    .search-bar.expanded .search-icon { display: none !important; }
}

/* ------------------------------
   Hero/หัวข้อหลักใต้ Header
------------------------------ */
@media (max-width: 991.98px) {
    /* ทำให้ส่วน hero/หัวข้อเต็มความกว้างและไม่มีการขยับซ้าย/ขวา */
    .hero-section-ft { margin-left: 0 !important; width: 100% !important; }
    .image-container-ft { display: block !important; }
    .image-container-ft img { width: 100% !important; height: auto !important; object-fit: cover !important; }

    /* ข้อความหัวเรื่องและคำอธิบายอ่านง่าย */
    main.container { margin-left: var(--mobile-h-padding) !important; margin-right: var(--mobile-h-padding) !important; }
    main.container h1 { font-size: var(--mobile-title) !important; }
    main.container p { font-size: 0.9rem !important; margin-right: 8% !important; }
}

/* ------------------------------
   การ์ดเลื่อนแนวนอน (tags/products/promo)
   ลด min-width ให้พอดีจอ และภาพยืดหยุ่น
------------------------------ */
@media (max-width: 768px) {
    /* โอกาสพิเศษ */
    .special-occasions-wrapper { width: 100% !important; padding: 32px var(--mobile-h-padding) 16px !important; margin-top: 0 !important; }
    .special-occasions-wrapper h1 { font-size: var(--mobile-title) !important; }
    .tags-grid { gap: 16px !important; padding-bottom: 12px !important; }
    .tag-item { min-width: var(--mobile-card-min) !important; max-width: var(--mobile-card-min) !important; padding: 0 8px 0 0 !important; }
    .tag-card img { height: var(--mobile-img-h) !important; }

    /* สินค้ายอดนิยม */
    .popular-products-wrapper { width: 100% !important; padding: 0 var(--mobile-h-padding) 0 var(--mobile-h-padding) !important; margin-top: 0 !important; }
    .popular-products-wrapper h1 { font-size: var(--mobile-title) !important; }
    .popular-products-grid { gap: 16px !important; justify-content: center !important; }
    .popular-product-item { min-width: var(--mobile-card-min) !important; max-width: var(--mobile-card-min) !important; padding: 0 8px 0 0 !important; }
    .popular-product-card img { height: var(--mobile-img-h) !important; }

    /* โปรโมชั่นพิเศษ */
    .section-wrapper { width: 100% !important; padding: 24px var(--mobile-h-padding) 24px !important; margin-top: 0 !important; }
    .section-title { font-size: var(--mobile-title) !important; }
    .product-grid-horizontal-scroll { gap: 16px !important; justify-content: center !important; }
    .product-item-fixed-width { min-width: var(--mobile-card-min) !important; max-width: var(--mobile-card-min) !important; padding: 0 8px 0 0 !important; }
    .product-card-common img { height: var(--mobile-img-h) !important; }
}

/* ------------------------------
   ส่วนหัวรายการสินค้าใน flowers (ให้พื้นที่ซ้าย/ขวาสมดุล)
------------------------------ */
@media (max-width: 768px) {
    .product-header { 
        /* จัดวางแนวตั้ง กึ่งกลาง และให้ padding ซ้าย/ขวาเท่ากัน */
        flex-direction: column !important; 
        align-items: center !important; 
        justify-content: center !important; 
        padding-left: var(--mobile-h-padding) !important; 
        padding-right: var(--mobile-h-padding) !important; 
        gap: 10px !important;
    }

    .product-header .left-title { 
        text-align: center !important; 
        width: 100% !important; 
        margin: 0 auto !important; 
    }

    .product-header .info-sort-section { 
        width: 100% !important; 
        display: flex !important; 
        align-items: center !important; 
        justify-content: center !important; 
        gap: 10px !important;
    }

    .product-header .show-info { margin: 0 !important; text-align: center !important; }
    .product-header form { margin: 0 auto !important; }
    .product-header select { max-width: 70vw !important; }
}

/* =============================================================
   หน้า flowers (จัดสัดส่วนและกึ่งกลางบนมือถือ)
   - สมมติชื่อคลาสที่พบบ่อย หากชื่อแตกต่างกัน สไตล์ทั่วไปนี้ยังช่วยกึ่งกลางได้
============================================================= */
@media (max-width: 768px) {
    /* ส่วนหัว/คำอธิบายผลการค้นหา/หมวดหมู่ ให้กึ่งกลาง */
    .flowers-header,
    .flowers-title,
    .flowers-subtitle,
    .breadcrumbs,
    .result-summary { text-align: center !important; margin-left: auto !important; margin-right: auto !important; }

    /* กริดสินค้า: จัดกึ่งกลางและเว้นระยะเท่ากัน */
    .products-grid,
    .product-grid,
    .product-list,
    .row.products,
    .row.product-list { justify-content: center !important; gap: 16px !important; }

    /* กล่องสินค้า ให้มีความกว้างเหมาะสมบนมือถือ และกึ่งกลาง */
    .product-card,
    .card.product,
    .product-item,
    .flowers-product-item { width: min(82vw, 20rem) !important; margin-left: auto !important; margin-right: auto !important; }

    /* รูปสินค้าไม่ล้น และมีสัดส่วนพอดี */
    .product-card img,
    .card.product img,
    .flowers-product-item img { width: 100% !important; height: auto !important; object-fit: cover !important; }

    /* ปุ่ม/แถบควบคุมต่างๆ ให้กึ่งกลาง */
    .pagination,
    .category-buttons,
    .filter-actions,
    .sort-bar { justify-content: center !important; text-align: center !important; }

    /* คอนเทนเนอร์หลักของหน้า flowers ให้ padding ซ้าย/ขวาเท่ากัน */
    .flowers-container { padding-left: var(--mobile-h-padding) !important; padding-right: var(--mobile-h-padding) !important; }
}

/* ------------------------------
   จัดองค์ประกอบหลักให้อยู่กึ่งกลาง และพื้นที่ซ้าย/ขวาเท่ากัน
------------------------------ */
@media (max-width: 768px) {
    /* หัวข้อในส่วนต่างๆ ให้อยู่ตรงกลางจริง */
    .special-occasions-wrapper h1,
    .popular-products-wrapper h1,
    .section-title,
    .why-cupid-title,
    main.container h1 { text-align: center !important; margin-left: auto !important; margin-right: auto !important; }

    /* ปุ่มลิงก์ดูทั้งหมดให้อยู่ตรงกลาง */
    .view-all-link { display: inline-block; margin-left: auto !important; margin-right: auto !important; }

    /* แถบปุ่มเลือกหมวดหมู่ให้อยู่ตรงกลาง */
    .category-buttons { justify-content: center !important; }

    /* คุม padding ซ้าย/ขวาให้สมดุลกับทุก Section หลัก */
    .special-occasions-wrapper,
    .popular-products-wrapper,
    .section-wrapper,
    .why-cupid-section { padding-left: var(--mobile-h-padding) !important; padding-right: var(--mobile-h-padding) !important; }

    /* แถบค้นหาบนมือถือ ไม่ให้เอียงไปขวา */
    .search-bar { margin-left: 1rem !important; margin-right: 0 !important; margin-top: 1rem !important; }

    /* ปุ่มเปลี่ยนภาษา (ให้รูปแสดงแน่นอนและกึ่งกลาง) */
    .lang-switch { padding: 8px !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; min-width: 40px !important; min-height: 40px !important; }
    .lang-switch img { display: block !important; width: 36px !important; height: auto !important; visibility: visible !important; opacity: 1 !important; }
}

/* ------------------------------
   ปุ่ม/ป้าย/Badge ให้สัมผัสง่ายขึ้น
------------------------------ */
@media (max-width: 768px) {
    .add-to-cart-btn { padding: 12px !important; font-size: 1rem !important; }
    .view-all-link { padding: 12px 32px !important; font-size: 0.95rem !important; }
    #cart-count { transform: translateY(-1px); }
}

/* ------------------------------
   Contact Buttons แถวรองรับมือถือ (ไม่ทับซ้อน)
------------------------------ */
@media (max-width: 991.98px) {
    /* ยกเลิก margin ติดลบบริเวณปุ่มติดต่อ เพื่อลดการเลื่อนแนวนอน */
    .contact-buttons-section { margin-top: 0 !important; margin-bottom: 0 !important; margin-left: 0 !important; margin-right: var(--mobile-h-padding) !important; justify-content: center !important; gap: 8px !important; width: 100% !important; }
    /* ทำให้ปุ่มทั้งสามมีขนาดเท่ากันและกึ่งกลาง */
    .contact-buttons-section .btn { flex: 1 1 0 !important; height: 44px !important; padding: 8px 10px !important; font-size: 12px !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; text-align: center !important; white-space: nowrap !important; }
    .contact-buttons-section .btn i { margin-right: 6px !important; }
}

/* ------------------------------
   Floating Action Buttons (ซ้อนน้อยลง)
------------------------------ */
@media (max-width: 768px) {
    #floatingContainer { right: 24px !important; bottom: 80px !important; }
    #floatingContainer .social-button { margin-right: 0.8rem !important; }
}

/* ------------------------------
   ฟอร์ม/อินพุตบนมือถือ (อ่านง่าย แตะง่าย)
------------------------------ */
@media (max-width: 576px) {
    input[type="text"], input[type="password"], input[type="tel"], input[type="email"], select, textarea {
        font-size: var(--mobile-font) !important;
    }
}

/* ------------------------------
   Grid อื่นๆ ที่ใช้ display: grid (fallback เป็น flex)
------------------------------ */
@media (max-width: 768px) {
    .other-products-grid { gap: 16px !important; padding-left: var(--mobile-h-padding) !important; padding-right: var(--mobile-h-padding) !important; }
    .other-product-card { width: min(65vw, 260px) !important; }
}

/* ------------------------------
   ปรับเมนู Overlay บนมือถือ (ระยะ/ช่องไฟ)
------------------------------ */
@media (max-width: 991.98px) {
    .mobile-overlay-menu .navbar-nav { gap: 14px !important; }
    .mobile-overlay-menu .mega-menu .column { margin-bottom: 10px !important; }
    .mobile-overlay-menu .mega-menu .column h3 { font-size: 1rem !important; }
}

/* ------------------------------------------------------------
   ป้องกันการล้นแนวนอนจากองค์ประกอบที่มีความกว้างคงที่เกินจอ
   - ถ้ามี element ภายในกว้างเกิน ให้ซ่อนส่วนเกินบนมือถือ
------------------------------------------------------------ */
@media (max-width: 768px) {
    body, .main-header, .top-nav-bar, .special-occasions-wrapper, .popular-products-wrapper, .section-wrapper {
        overflow-x: hidden !important;
    }
}