/* ============================================== */
/* === 1. Global Reset, Fonts & Base Styles === */
/* ============================================== */

:root {
    --light-orange: #ecac61;
    --medium-orange: #a52a22;
    --strong-orange: #fb923c;
    --bright-orange: #ff9800;
    --brand-green: #61963b;
    --dark-green: #4CAF50;
    --btn-green: #d4edda;
    --white: #ffffff;
    --gray-text: #555;
    --error-red: #d32f2f;
    
    --shadow-soft: 0 2px 10px rgba(0,0,0,0.05);
    --shadow-medium: 0 8px 24px rgba(0,0,0,0.1);
    --shadow-strong: 0 10px 25px rgba(0,0,0,0.2);
}

/* 1. ประกาศฟอนต์กระต่าย */
@font-face {
    font-family: 'iannnnn-RABBIT';
    src: url('fonts/iannnnn-RABBIT.woff2') format('woff2'),
         url('fonts/iannnnn-RABBIT.woff') format('woff'),
         url('fonts/iannnnn-RABBIT.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap; 
}

/* 2. ประกาศฟอนต์ Campton (ต่อกันได้เลย) */
@font-face {
    font-family: 'Campton W00 Light';
    src: url('fonts/CamptonW00-Light.woff2') format('woff2'),
         url('fonts/CamptonW00-Light.woff') format('woff');
    font-weight: 400;
    font-style: normal;
    font-display: swap; 
}

html {
    background-color: var(--light-orange); 
    background-image: url('images/bg.png');
}

body {
    
    background-repeat: repeat;
    background-size: auto;
    background-attachment: fixed;
    line-height: 1.6;
    text-align: center;
    font-weight: 400;
    font-size: 1em;
    margin: 0; 
    padding: 0;
    box-sizing: border-box; 
    -webkit-font-smoothing: antialiased;
}

/* บังคับ font ภาษาไทย */
body, input, button, textarea, select, .main-nav a, .btn-login, .account-btn, .lang-list, .account-wrapper {
    font-family: "Campton W00 Light", "Kanit", "Prompt", sans-serif !important;
}

ul, ol { list-style: none; margin: 0; padding: 0; }

/* ============================================== */
/* === 2. Header & Navigation Layout === */
/* ============================================== */

.main-header {
    width: 100%;
    background-color: var(--brand-green);
    padding: 10px 0;
    box-shadow: var(--shadow-strong);
    text-align: left;
    position: relative;
    z-index: 1000;
}

.nav-container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 20px;
    display: flex; 
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    box-sizing: border-box;
}

.logo img {
    display: block;
}



.main-nav ul {
    display: flex;
    gap: 32px;
}

.main-nav a {
    color: #ecf0f1; 
    text-decoration: none;
    font-size: 1.1em;
    transition: all 0.2s;
    font-weight: 500;
    
}

.main-nav a:hover, .main-nav a.active {
    color: #f1c40f;
}

/* ============================================== */
/* === 3. Language & Auth Sections (Fix Ruan) === */
/* ============================================== */

.auth-section {
    display: flex;
    align-items: center;
    gap: 15px;
}

/* Language Dropdown Core Fix */
.lang-dropdown-container {
    position: relative;
    display: inline-block;
}

.lang-selected {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #fff;
    font-size: 1em;
    font-weight: 600;
    padding: 5px 10px;
    cursor: pointer;
}

.lang-list {
    display: none; /* ซ่อนเป็นค่าเริ่มต้น */
    position: absolute;
    top: 100%;
    right: 0;
    background: #fff;
    min-width: 200px;
    border-radius: 12px;
    box-shadow: var(--shadow-strong);
    z-index: 9999;
    padding: 10px 0;
    flex-direction: column; /* บังคับเรียงแนวตั้ง */
}

/* แสดงเมนูเมื่อ Hover หรือมีคลาส .show */
.lang-dropdown-container:hover .lang-list,
.lang-list.show {
    display: flex !important;
}

.lang-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 20px;
    text-decoration: none;
    color: #333;
    font-size: 1em;
    text-align: left;
}

.lang-item:hover {
    background: #f8f8f8;
}

.lang-item.active {
    background: #fff5f5;
    color: #e43f3f;
}

.lang-item img {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    object-fit: cover;
}

.account-btn {
    background: none;
    border: none;
    color: #fff;
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
}

.account-btn:hover .username {
    color: #ffd700; /* เปลี่ยนสี username เมื่อเอาเมาส์วาง (ตัวอย่างเป็นสีทอง) */
    transition: 0.3s;
}

.username{
    font-size:1.2em;
    font-weight: 600;
}
/* เส้นคั่นระหว่างเมนูจัดการกับปุ่มออกจากระบบ */
.dropdown-divider {
    border: 0;
    border-top: 1px solid #eee;
    margin: 8px 0;
}

/* ปรับแต่งลิงก์ภายใน Dropdown */
.account-dropdown a {
    display: block;
    padding: 10px 15px;
    text-decoration: none;
    color: #333;
    font-size: 1em;
    transition: background 0.2s;
}

.account-dropdown a:hover {
    background-color: #f5f5f5;
}

/* เน้นสีปุ่มออกจากระบบให้ต่างออกไป (ทางเลือก) */
.logout-link {
    color: #e74c3c !important; /* สีแดง */
}

/* ============================================== */
/* === 4. Mobile Responsive (<= 900px) === */
/* ============================================== */

.account-wrapper {
    position: relative; /* สำคัญมาก: เพื่อให้ dropdown เกาะติดกับจุดนี้ */
    display: flex;
    align-items: center;
}

.account-dropdown {
    display: none; 
    position: absolute;
    top: 100%; /* อยู่ใต้ตัวแม่พอดี */
    right: 0;
    background: white;
    min-width: 160px;
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.2);
    z-index: 10000; /* ค่าสูงๆ เพื่อให้ทับทุกอย่าง */
    margin-top: 10px; /* ระยะห่างจากไอคอน */
}

.account-dropdown a {
    display: block;
    padding: 12px 16px;
    color: #333;
    text-decoration: none;
    border-bottom: 1px solid #eee;
    
}

.account-dropdown a[href="register.php"] {
    color: #f1c40f !important; /* สีเหลือง */
    font-weight: 600;
    transition: color 0.3s ease;
}

.account-dropdown a[href="register.php"]:hover {
    color: #ff9800 !important; /* สีส้ม */
    text-decoration: none;
}

.account-dropdown.show {
    display: block !important; /* ใช้ block เพื่อความสถียรในโครงสร้าง 
    font-size: 1em;*/
}

.account-wrapper:hover .account-dropdown,

/* ซ่อนเวอร์ชันมือถือในหน้าจอใหญ่ */
.mobile-auth {
    display: none;
    position: relative;
}

.hamburger {
    display: none;
    background: none;
    border: none;
    cursor: pointer;
    flex-direction: column;
    gap: 5px;
}

.hamburger span {
    width: 25px;
    height: 3px;
    background: #fff;
    border-radius: 2px;
}
/* ปรับแต่งเมนู สมัครสมาชิก (Register) ทั้ง Desktop และ Mobile */
.desktop-auth a[href="register.php"], 
.account-dropdown a[href="register.php"] {
    color: #f1c40f !important;    /* สีเหลือง */
    text-decoration: none !important; /* ลบเส้นใต้สีน้ำเงินออก */
    font-weight: 600 !important;
    transition: color 0.3s ease;
}

/* เมื่อเอาเมาส์วาง (Mouseover) ให้เปลี่ยนเป็นสีส้ม */
.desktop-auth a[href="register.php"]:hover, 
.account-dropdown a[href="register.php"]:hover {
    color: #ff9800 !important;    /* สีส้ม */
    text-decoration: none !important;
}


/* Media Query สำหรับมือถือ */
@media (max-width: 768px) {
    .desktop-auth {
        display: none !important;
    }

    .mobile-auth {
        display: flex !important; /* แสดงไอคอนรูปคน */
        background: none;
        border: none;
        padding: 5px;
        color: white;
    }

    /* บังคับให้ account-wrapper มีความสูงคงที่เพื่อไม่ให้ Header ยืดหด */
    .account-wrapper {
        height: 40px; 
        justify-content: center;
    }


    /* ปรับตำแหน่ง Dropdown ให้เป๊ะเทียบกับปุ่ม Hamburger */
    .account-dropdown, .main-nav {
        top: 80px; /* กำหนดเป็นค่าคงที่ (Fixed height) แทน % จะลดปัญหาไอคอนเด้งได้ดีกว่า */
        
    }

    /* 2. ปรับแต่งปุ่มไอคอนให้ขนาดคงที่ */
    .account-btn {
        background: none;
        border: none;
        padding: 5px;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        outline: none;
    }

    .account-icon {
        font-size: 2em;
        color: white;
        display: block;
        line-height: 1;
    }
 
    /* เมื่อมีคลาส show ให้แสดงแบบ flex หรือ block */
    .account-dropdown.show {
        display: block !important;
    }
  
    /* 3. ปรับ Dropdown ของ Hamburger (ให้ระดับ top เท่ากัน) */
    .main-nav {
        display: none;
        position: absolute;
        top: calc(100% + 10px); /* ใช้ค่าเดียวกับ account-dropdown เพื่อความเท่ากัน */
        left: 10px;               /* เปลี่ยนจาก 15px เป็น 0 เพื่อให้ชิดขอบ wrapper หรือปรับตามชอบ */
        width: 230px;
        background: var(--brand-green);
        border-radius: 8px;
        box-shadow: var(--shadow-strong);
        z-index: 1001;          /* ให้เมนูอยู่เหนือองค์ประกอบอื่น */
    }
    
        .main-nav.show { display: block; }

    .main-nav ul {
        flex-direction: column;
        gap: 0;
        padding: 10px 0;
    }

    .main-nav a {
        padding: 12px 20px;
        display: block;
    }
    
    .nav-container {
        position: relative; /* เพื่อให้ .main-nav อ้างอิงตำแหน่งจากจุดนี้ */
        padding: 10px 15px;
        display: flex;
        align-items: center;
    }

    .hamburger { display: flex; margin-right: 15px;}

    .logo img {
        max-width: 180px;
        height: auto;
        display: block;
    }

    .auth-links { display: none; } /* ซ่อน Login/Register ข้อความปกติในมือถือ */

        .desktop-auth {
        display: none; /* ซ่อนปุ่มข้อความบนมือถือ */
    }
   
}

/* ============================================== */
/* === 5. Content & Components (Login/Ingredients) === */
/* ============================================== */

.content-card {
    background: white;
    padding: 25px;
    border-radius: 15px;
    box-shadow: var(--shadow-strong);
}

.btn-login {
    background-color: #e67e22;
    color: #fff !important;
    padding: 6px 18px;
    border-radius: 20px;
    text-decoration: none;
    font-size: 1em;
}

/* เพิ่มเติมในส่วน Tabs และ Grid ของคุณ */
.tabs { display: flex; justify-content: center; flex-wrap: wrap; gap: 10px; margin: 20px 0; }
.tab-button { padding: 8px 18px; border-radius: 20px; border: 1px solid #ccc; cursor: pointer; }
.tab-button.active { background: #e67e22; color: white; border-color: #e67e22; }

.ingredient-grid { 
    display: grid; 
    grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); 
    gap: 15px; 
    padding: 15px;
}

.ingredient-card {
    background: white;
    border: 1px solid #eee;
    border-radius: 12px;
    padding: 10px;
    box-shadow: var(--shadow-strong);
}

.tag-clickable {
    background: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(5px);
    border: 1px solid rgba(255,255,255,0.3);
    color: white;
    padding: 5px 15px;
    border-radius: 20px;
    font-size: 0.85rem;
    cursor: pointer; /* ทำให้เป็นรูปมือเวลาเอาเมาส์วาง */
    transition: all 0.2s ease;
    user-select: none; /* กันการคลุมดำเวลาคลิกย้ำๆ */
    display: inline-block;
}

.tag-clickable:hover {
    background: #61963b; /* เปลี่ยนสีเป็นเขียวเมื่อ Hover */
    border-color: #61963b;
    transform: translateY(-2px); /* ให้ดูมีการตอบสนอง */
}

.tag-clickable:active {
    transform: translateY(0);
    filter: brightness(0.9);
}
.how-it-works-v2 {
    padding: 60px 0;
    background-color: #fdfdfd; /* สีขาวนวลตามรูป */
    text-align: center;
}

.section-title {
    color: #4a6d32; /* สีเขียวเข้มแบบธรรมชาติ */
    font-size: 1.8rem;
    margin-bottom: 40px;
    font-weight: bold;
}

.steps-container {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px;
    flex-wrap: wrap;
    margin-bottom: 30px;
}

.step-item {
    position: relative;
    width: 280px;
}

/* ตัวเลขลำดับด้านบน */
.step-number {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    font-size: 1.2rem;
    margin: 0 auto -20px auto; /* ให้เลขเกยทับขอบการ์ด */
    position: relative;
    z-index: 2;
}

.step-1 { background-color: #61963b; } /* เขียว */
.step-2 { background-color: #f6c344; } /* เหลือง */
.step-3 { background-color: #fb923c; } /* ส้ม */

.step-card-v2 {
    background: white;
    border-radius: 20px;
    padding: 30px 20px 20px 20px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
    border: 1px solid #f0f0f0;
}

.step-text {
    font-size: 1.1rem;
    color: #555;
    margin-bottom: 15px;
    font-weight: 500;
}

.step-image img {
    max-width: 100%;
    height: 150px;
    object-fit: contain;
}

.step-arrow {
    font-size: 1.5rem;
    color: #61963b;
    font-weight: bold;
}

/* ลิงก์ด้านล่าง */
.how-it-works-links {
    margin-top: 30px;
}

.how-it-works-links a {
    color: #444;
    text-decoration: none;
    font-size: 1rem;
    margin: 0 15px;
    transition: 0.3s;
}

.how-it-works-links a:hover {
    color: #61963b;
}

.how-it-works-links .divider {
    color: #ddd;
}

/* สำหรับมือถือ */
@media (max-width: 768px) {
    .steps-container {
        flex-direction: column;
    }
    .step-arrow {
        transform: rotate(90deg); /* หมุนลูกศรลงล่างในมือถือ */
        margin: 10px 0;
    }
}

/* ============================================== */
/* === 6. login-container (Login.php)=== */
/* ============================================== */ /
        
        .login-container {
            max-width: 400px;
            margin: 50px auto;
            background: #ffffff;
            padding: 40px;
            border-radius: 15px;
            box-shadow: var(--shadow-strong);
            text-align: center;
        }
        
        .form-container {
            max-width: 400px;
            margin: 50px auto;
            background: #ffffff;
            padding: 40px;
            border-radius: 15px;
            box-shadow: var(--shadow-strong);
            text-align: center;
        }

        .login-container h2 {
            color: #4CAF50; /* สีเขียวตามโลโก้ */
            margin-bottom: 25px;
            font-size: 1.5em;
        }

        /* การจัดฟอร์ม */
        .form-group {
            text-align: left;
            margin-bottom: 20px;
        }

        .form-group label {
            display: block;
            margin-bottom: 8px;
            color: #555;
            font-weight: bold;
        }

        .form-group input {
            width: 100%;
            padding: 12px;
            border: 1px solid #ddd;
            border-radius: 8px;
            box-sizing: border-box; /* สำคัญเพื่อให้ padding ไม่ล้น */
            font-size: 1em;
            transition: border-color 0.3s;
        }

        .form-group input:focus {
            outline: none;
            border-color: #ff9800; /* สีส้มเมื่อกดเลือก */
        }

        /* ปุ่มเข้าสู่ระบบ */
        .btn-submit {
            width: 100%;
            padding: 12px;
            background-color: #ff9800; /* สีส้มสดใส */
            color: white;
            border: none;
            border-radius: 8px;
            font-size: 1em;
            font-weight: bold;
            cursor: pointer;
            transition: background 0.3s;
            margin-top: 10px;
        }

        .btn-submit:hover {
            background-color: #e68a00;
        }

        /* ข้อความแจ้งเตือน (Alerts) */
        .alert {
            padding: 12px;
            border-radius: 8px;
            margin-bottom: 20px;
            font-size: 1em;
        }
        .error {
            background-color: #fdecea;
            color: #d32f2f;
            border: 1px solid #f5c6cb;
        }
        .success {
            background-color: #e8f5e9;
            color: #2e7d32;
            border: 1px solid #c8e6c9;
        }

        /* ลิงก์ด้านล่าง */
        .register-link {
            margin-top: 20px;
            font-size: 1em;
            color: #666;
        }

        .register-link a {
            color: #4CAF50;
            text-decoration: none;
            font-weight: bold;
            margin: 0 5px;
        }

        .register-link a:hover {
            text-decoration: underline;
        }  
        
        
/* ============================================== */
/* === 6. search-container (Menu_list.php) === */
/* ============================================== */ 

        .search-container {
            flex: 1; 
            max-width: 600px;
            margin: 20px auto;
            font-weight: 400;
        }
        
        .search-wrapper {
            position: relative; /* เพื่อให้ปุ่มอิงตำแหน่งกับกรอบนี้ */
            display: flex;
            align-items: center;
            font-size: 1em;
        }
        
        .search-container input {
            width: 100%;
            padding: 8px 40px 8px 15px; /* เว้นด้านขวา (40px) เพื่อไม่ให้ตัวหนังสือทับแว่นขยาย */
            border-radius: 20px;
            border: none;
            outline: none;
            font-size: 1em;
            box-sizing: border-box;
        }
        
        .search-btn {
            position: absolute;
            right: 5px; /* วางห่างจากขอบขวาของ input */
            background: none;
            border: none;
            cursor: pointer;
            font-size: 1em;
            padding: 5px 10px;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: transform 0.2s;
        }