/*
Theme Name: AgriMarket
Theme URI: https://your-website.com/
Author: Your Name
Author URI: https://your-website.com/
Description: A custom theme for an agricultural marketplace.
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Tags: custom-theme, marketplace, agriculture
Text Domain: agrimarket
*/

/* ==================================================
   CSS Variables from your Color Palette
================================================== */
:root {
    --color-primary-dark: #235D3A;
    --color-primary: #397D54;
    --color-primary-light: #73C088;
    --color-secondary-dark: #74927A;
    --color-secondary: #7BAE6A;
    --color-accent-light: #C8EAD1;
    --color-background-light: #C0EDD0;
    --color-white: #FFFFFF;
    --color-text: #333333;
}

/* ==================================================
   Basic Styling & Reset
================================================== */
body {
    font-family: 'Sarabun', sans-serif; /* แนะนำให้ใช้ Google Fonts */
    background-color: var(--color-white);
    color: var(--color-text);
    margin: 0;
    padding: 0;
    line-height: 1.6;
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
}

a {
    color: var(--color-primary);
    text-decoration: none;
}

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

h1, h2, h3 {
    color: var(--color-primary-dark);
}

/* ==================================================
   Mobile Bottom Navigation Bar Styles
================================================== */

/* 1. ซ่อนเมนูบนจอใหญ่ (Desktop) เป็นค่าเริ่มต้น */
.mobile-bottom-nav {
    display: none;
}

/* 2. แสดงผลและจัดสไตล์เมื่อเป็นจอมือถือ (ความกว้างไม่เกิน 768px) */
@media (max-width: 768px) {

    /* เพิ่มพื้นที่ด้านล่างของเนื้อหาเพื่อไม่ให้เมนูลอยทับ */
    body {
        padding-bottom: 70px !important;
    }

    .mobile-bottom-nav {
        display: flex;
        justify-content: space-around;
        align-items: flex-start;
        position: fixed;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 65px;
        background-color: #ffffff;
        box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.08);
        z-index: 1000;
    }

    .mobile-nav-item {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        flex-grow: 1;
        width: 20%; /* ทำให้เมนูแต่ละอันมีความกว้างเท่าๆ กัน */
        padding-top: 8px;
        color: #888888;
        font-size: 12px;
        text-decoration: none;
        position: relative; /* สำคัญ: เพื่อให้ป้ายแจ้งเตือนลอยอยู่ถูกตำแหน่ง */
        transition: color 0.2s ease-in-out;
    }

    .mobile-nav-item i {
        font-size: 22px;
        margin-bottom: 4px;
    }

    .mobile-nav-item.active {
        color: #2A5A4E;
        font-weight: 700;
    }

    /* ========== สไตล์ปุ่มลอย (FAB) ========== */
    .mobile-nav-fab {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 60px;
        height: 60px;
        background-color: #2A5A4E; /* สีหลักของธีม */
        color: #ffffff;
        border-radius: 50%;
        border: 4px solid #fff; /* สร้างขอบขาวรอบปุ่ม */
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
        transform: translateY(-25px); /* ทำให้ปุ่มลอยขึ้นไปด้านบน */
        transition: transform 0.2s ease-out;
    }

    .mobile-nav-fab:hover {
        transform: translateY(-28px);
    }
    
    .mobile-nav-fab i {
        font-size: 24px;
    }

    /* ========== สไตล์ป้ายนับจำนวนแจ้งเตือน ========== */
    .notification-badge {
        display: flex;
        align-items: center;
        justify-content: center;
        position: absolute;
        top: 5px;
        right: 15px;
        width: 20px;
        height: 20px;
        background-color: #E74C3C; /* สีแดงสำหรับแจ้งเตือน */
        color: white;
        border: 2px solid #ffffff;
        border-radius: 50%;
        font-size: 11px;
        font-weight: bold;
        line-height: 1;
    }
}