/* assets/css/style.css */

/* 1. กำหนด Font ทั่วไปสำหรับภาษาไทย และติดตั้งฟอนต์จาก Google Fonts */
/* @import rule for Kanit font */
@import url('https://fonts.googleapis.com/css2?family=Kanit:wght@300;400;500;600;700&display=swap');
/* @import rule for Sukhumvit Set font (Note: Sukhumvit Set is not directly available on Google Fonts. 
   This is a placeholder or a common alternative. If you have a specific CDN/source for Sukhumvit Set, 
   please replace this or use a widely available alternative like 'Prompt' or 'Sarabun'.) */
@import url('https://fonts.googleapis.com/css2?family=Prompt:wght@300;400;500;600;700&display=swap'); /* Using Prompt as a common alternative */

/* Sticky Header CSS */
#main-navbar {
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 1030; /* Ensure it stays on top */
}

#sticky-menu-mobile {
    position: fixed;
    width: 100%;
    z-index: 1029; /* Below main navbar */
    top: 85px; /* Default top, adjusted for main navbar height on mobile */
    left: 0; /* Ensure it's full width */
    background-color: #dc3545 !important; /* Reverted to Bootstrap's default danger color */
}

/* Adjust body padding-top to prevent content overlap with fixed headers */
body {
    font-family: 'Kanit', 'Prompt', 'Sukhumvit Set', Arial, sans-serif; 
    padding-top: 126px; /* Adjusted: Increased padding for desktop (main navbar height + buffer) */
    font-size: 18px; /* Default font size for frontend */
}

/* Media query for mobile/tablet */
@media (max-width: 991.98px) {
    body {
        padding-top: 140px; /* Adjusted: Increased padding for mobile/tablet */
    }
}

/* NEW: Styles specific to Admin Pages */
body.admin-page {
    padding-top: initial !important; /* Removed specific padding-top */
    font-size: initial !important; /* Revert to browser default font size for admin pages */
}


/* Custom styles for Hero Section */
.hero-section {
    background-image: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)), url('/assets/images/hero-wreath-bg.webp'); /* Default: Desktop WebP */
    background-size: cover;
    background-position: center;
    color: white; 
    text-shadow: 1px 1px 3px rgba(0,0,0,0.5); 
    min-height: 400px; /* Default min-height for desktop */
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Media query for Hero Section on Mobile (use mobile-specific WebP) */
@media (max-width: 767.98px) {
    .hero-section {
        background-image: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)), url('/assets/images/hero-wreath-bg-mobile.webp'); /* NEW: Mobile WebP */
        min-height: 250px; /* Reduced height on mobile for better LCP */
    }
}


/* ปรับแต่ง Card ของสินค้า/บทความ */
.card-img-top {
    object-fit: cover; 
    width: 100%; 
}

/* Updated: Responsive max-height for header logo */
.header-logo {
    max-height: 100px; /* Default max-height for desktop */
    height: auto; 
}

@media (max-width: 991.98px) { /* For screens smaller than large (tablet and mobile) */
    .header-logo {
        max-height: 60px; /* Max-height for Mobile and Tablet */
    }
}


/* สไตล์สำหรับ Admin Panel (ถ้าต้องการให้แตกต่างจาก Frontend) */
.admin-header {
    background-color: #212529 !important; 
}

.admin-header .navbar-brand, 
.admin-header .nav-link,
.admin-header .btn-outline-light {
    color: #f8f9fa !important; 
}

/* ปรับสี h1 ใน Admin Panel */
.container-fluid h1 {
    color: var(--bs-primary) !important; 
}

/* ปรับสีปุ่ม Admin - Reverted to Bootstrap defaults */
.admin-main .btn-success {
    background-color: #28a745 !important; 
    border-color: #28a745 !important;
}
.admin-main .btn-warning {
    background-color: #ffc107 !important; 
    border-color: #ffc107 !important;
    color: #212529 !important; 
}
.admin-main .btn-danger {
    background-color: #dc3545 !important; 
    border-color: #dc3545 !important;
}
.admin-main .btn-info {
    background-color: #17a2b8 !important; 
    border-color: #17a2b8 !important;
}
.admin-main .btn-outline-primary {
    color: var(--bs-primary) !important; 
    border-color: var(--bs-primary) !important;
}


/* ปรับสี h2 ใน index.php (สินค้าของเราแบ่งตามหมวดหมู่) */
#product-categories-section h2 {
    color: var(--bs-primary) !important; 
}

/* ปรับสี h3 ใน index.php (ชื่อหมวดหมู่แต่ละ Slider) */
#product-categories-section h3 {
    color: var(--bs-secondary) !important; 
}

/* ปรับสี h2 ใน About Us Section */
.about-us h2 {
    color: var(--bs-secondary) !important; 
}

/* ปรับสีไอคอนใน About Us Section */
.about-us .fas {
    color: var(--bs-primary) !important; 
}

/* ปรับสี h2 ใน Blog Section */
.blog-section h2 {
    color: var(--bs-info) !important; 
}

/* ปรับสีพื้นหลังใน Contact Info Section */
.contact-info {
    background-color: var(--bs-primary) !important; 
}

/* เพิ่มสไตล์อื่นๆ ที่คุณต้องการได้ที่นี่ */