/* ==========================================================================
   567 AGRI MOBILE & TABLET RESPONSIVE HEADER STYLESHEET
   DESKTOP (>= 1200PX): UNCHANGED 100%
   TABLET & MOBILE (< 1200PX): CUSTOM 2-ROW HEADER WITH OFFCANVAS MENU
   ========================================================================== */

/* PREVENT HORIZONTAL SCROLLBAR OVERFLOW */
html, body {
    max-width: 100% !important;
    overflow-x: hidden !important;
}

/* DESKTOP VISIBILITY SWITCH */
@media (min-width: 1200px) {
    .mobile-header-wrapper,
    .mobile-offcanvas-backdrop,
    .mobile-offcanvas-panel {
        display: none !important;
    }
}

@media (max-width: 1199px) {
    .desktop-header-only {
        display: none !important;
    }

    /* --------------------------------------------------
       MOBILE HEADER WRAPPER
    -------------------------------------------------- */
    .mobile-header-wrapper {
        display: block !important;
        position: sticky;
        top: 0;
        z-index: 9999;
        box-shadow: 0 4px 18px rgba(0, 0, 0, 0.08);
    }

    /* ROW 1: GREEN TOPBAR (42px) */
    .mobile-topbar {
        background-color: #1F7A3E;
        height: 42px;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 0 16px;
    }

    .mobile-topbar-inner {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 20px;
        width: 100%;
    }

    .topbar-info-item {
        color: #ffffff;
        font-size: 13px;
        font-weight: 500;
        text-decoration: none;
        display: inline-flex;
        align-items: center;
        gap: 6px;
        transition: opacity 0.2s;
    }

    .topbar-info-item:hover {
        opacity: 0.85;
    }

    .topbar-info-item i {
        font-size: 14px;
        color: #ffffff;
    }

    /* ROW 2: WHITE MAIN HEADER (72px, 3 COLS) */
    .mobile-main-header {
        background-color: #ffffff;
        height: 72px;
        border-bottom: 1px solid #E2E8F0;
    }

    .mobile-main-inner {
        max-width: 1200px;
        height: 100%;
        margin: 0 auto;
        padding: 0 16px;
        display: grid;
        grid-template-columns: 60px 1fr 60px;
        align-items: center;
    }

    /* LEFT COL: MENU BUTTON */
    .mobile-col-left {
        display: flex;
        align-items: center;
        justify-content: flex-start;
    }

    .mobile-menu-button {
        width: 48px;
        height: 48px;
        background-color: #3AAA35;
        color: #ffffff;
        border: none;
        border-radius: 14px;
        font-size: 20px;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        transition: all 0.25s ease;
        box-shadow: 0 4px 12px rgba(58, 170, 53, 0.35);
    }

    .mobile-menu-button:hover,
    .mobile-menu-button:active {
        background-color: #2e8b2a;
        transform: scale(0.96);
    }

    /* CENTER COL: LOGO */
    .mobile-col-center {
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .mobile-logo-link {
        text-decoration: none;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .mobile-logo-img {
        height: 50px;
        max-height: 50px;
        width: auto;
        max-width: 180px;
        object-fit: contain;
        display: block;
    }

    /* RIGHT COL: CART BUTTON */
    .mobile-col-right {
        display: flex;
        align-items: center;
        justify-content: flex-end;
    }

    .mobile-cart-btn {
        width: 48px;
        height: 48px;
        background-color: #3AAA35;
        color: #ffffff;
        border-radius: 14px;
        font-size: 20px;
        display: flex;
        align-items: center;
        justify-content: center;
        text-decoration: none;
        position: relative;
        transition: all 0.25s ease;
        box-shadow: 0 4px 12px rgba(58, 170, 53, 0.35);
    }

    .mobile-cart-btn:hover,
    .mobile-cart-btn:active {
        background-color: #2e8b2a;
        transform: scale(0.96);
    }

    .mobile-cart-badge {
        position: absolute;
        top: -4px;
        right: -4px;
        background-color: #F68B1F;
        color: #ffffff;
        font-size: 11px;
        font-weight: 700;
        width: 20px;
        height: 20px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        border: 2px solid #ffffff;
        box-shadow: 0 2px 6px rgba(0,0,0,0.15);
    }

    /* --------------------------------------------------
       OFFCANVAS MENU (SLIDE LEFT 320PX)
    -------------------------------------------------- */
    .mobile-offcanvas-backdrop {
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, 0.55);
        z-index: 99998;
        opacity: 0;
        visibility: hidden;
        transition: all 0.3s ease;
        backdrop-filter: blur(2px);
    }

    .mobile-offcanvas-backdrop.active {
        opacity: 1;
        visibility: visible;
    }

    .mobile-offcanvas-panel {
        position: fixed;
        top: 0;
        left: 0;
        width: 320px;
        max-width: 85vw;
        height: 100vh;
        background-color: #ffffff;
        z-index: 99999;
        visibility: hidden;
        transform: translateX(-100%);
        transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.3s;
        box-shadow: 6px 0 30px rgba(0, 0, 0, 0.18);
        display: flex;
        flex-direction: column;
    }

    .mobile-offcanvas-panel.active {
        visibility: visible;
        transform: translateX(0);
    }

    /* Offcanvas Header */
    .mobile-offcanvas-panel .offcanvas-header {
        padding: 16px 20px;
        background: #ffffff;
        border-bottom: 1px solid #E2E8F0;
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    .offcanvas-close-btn {
        width: 36px;
        height: 36px;
        border-radius: 50%;
        background: #F1F5F9;
        color: #334155;
        border: none;
        font-size: 18px;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        transition: all 0.2s ease;
    }

    .offcanvas-close-btn:hover {
        background: #DC2626;
        color: #ffffff;
    }

    /* Offcanvas Body */
    .mobile-offcanvas-panel .offcanvas-body {
        flex: 1;
        overflow-y: auto;
        padding: 12px 0 20px;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
    }

    /* Navigation List */
    .mobile-offcanvas-nav .mobile-nav-ul {
        list-style: none !important;
        margin: 0;
        padding: 0;
    }

    .mobile-offcanvas-nav .mobile-nav-ul li {
        position: relative;
        border-bottom: 1px solid #F1F5F9;
        list-style: none !important;
    }

    .mobile-offcanvas-nav .mobile-nav-ul li::before,
    .mobile-offcanvas-nav .mobile-nav-ul li::after,
    .mobile-offcanvas-nav .mobile-nav-ul li::marker {
        display: none !important;
        content: "" !important;
    }

    .mobile-offcanvas-nav .mobile-nav-ul li a {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 14px 24px;
        font-size: 15px;
        font-weight: 600;
        color: #0F172A;
        text-decoration: none;
        transition: all 0.25s ease;
        list-style: none !important;
    }

    .mobile-offcanvas-nav .mobile-nav-ul li a:hover,
    .mobile-offcanvas-nav .mobile-nav-ul li.current-menu-item > a {
        color: #1F7A3E;
        background: #F0FDF4;
    }

    /* Submenu Accordion Style */
    .mobile-offcanvas-nav .mobile-nav-ul li .sub-menu,
    .mobile-offcanvas-nav .mobile-nav-ul li > ul {
        display: none;
        list-style: none !important;
        margin: 0;
        padding: 0;
        background: #F8F9FA;
        border-top: 1px solid #E2E8F0;
        border-bottom: 1px solid #E2E8F0;
    }

    .mobile-offcanvas-nav .mobile-nav-ul li.open > .sub-menu,
    .mobile-offcanvas-nav .mobile-nav-ul li.open > ul {
        display: block !important;
    }

    .mobile-offcanvas-nav .mobile-nav-ul li .sub-menu li,
    .mobile-offcanvas-nav .mobile-nav-ul li > ul li {
        list-style: none !important;
        border-bottom: 1px solid #E2E8F0;
    }

    .mobile-offcanvas-nav .mobile-nav-ul li .sub-menu li a,
    .mobile-offcanvas-nav .mobile-nav-ul li > ul li a {
        padding: 12px 20px 12px 36px !important;
        font-size: 14px !important;
        color: #334155 !important;
        font-weight: 500 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
    }

    .mobile-offcanvas-nav .mobile-nav-ul li .sub-menu li a:hover,
    .mobile-offcanvas-nav .mobile-nav-ul li > ul li a:hover {
        color: #1F7A3E !important;
        background: #E8F5E9 !important;
    }

    .sub-toggle-icon {
        width: 32px;
        height: 32px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border-radius: 50%;
        color: #1F7A3E;
        background: #DCFCE7;
        margin-left: 8px;
        transition: transform 0.25s ease;
        flex-shrink: 0;
    }

    .mobile-nav-ul li.open > a .sub-toggle-icon {
        transform: rotate(180deg);
        background: #1F7A3E;
        color: #ffffff;
    }

    /* Offcanvas Footer */
    .offcanvas-footer {
        padding: 20px 24px;
        border-top: 1px solid #E2E8F0;
        background: #F8F9FA;
        margin-top: auto;
    }

    .offcanvas-hotline-btn {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        background: #1F7A3E;
        color: #ffffff;
        padding: 12px;
        border-radius: 12px;
        font-size: 14px;
        font-weight: 700;
        text-decoration: none;
        margin-bottom: 10px;
        transition: background 0.2s;
    }

    .offcanvas-hotline-btn:hover {
        background: #15542A;
    }

    .offcanvas-email-text {
        font-size: 13px;
        color: #64748B;
        text-align: center;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 6px;
    }
}

/* TABLET SPECIFIC (768px - 1199px) */
@media (min-width: 768px) and (max-width: 1199px) {
    .mobile-main-inner {
        grid-template-columns: 70px 1fr 70px;
        padding: 0 28px;
    }
    .mobile-logo-img {
        height: 52px;
        max-height: 52px;
    }
    .mobile-topbar-inner {
        gap: 32px;
    }
}