/**
 * Green Theme - Custom Styles
 * A clean, modern e-commerce theme with sidebar categories
 */

/* ===========================================
   CSS Variables / Color Scheme
   =========================================== */
:root {
    --gt-primary: #6fd321;           /* Parrot Green 7ED321;*/
    --gt-primary-dark: #5CB318;     /* Darker Parrot Green */
    --gt-primary-light: #A5E34D;    /* Light Parrot Green */
    --gt-secondary: #333333;        /* Dark Gray - Header */
    --gt-secondary-light: #444444;  /* Lighter Gray - Navigation Bar */
    --gt-dark: #1a1a1a;             /* Near Black */
    --gt-light: #f5f5f5;            /* Light Gray */
    --gt-white: #ffffff;
    --gt-border: #e0e0e0;
    --gt-text: #333333;
    --gt-text-muted: #666666;
    --gt-badge-green: #4CAF50;
    --gt-badge-red: #e74c3c;
    --gt-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    --gt-radius: 4px;
    --gt-sidebar-width: 220px;
}

/* ===========================================
   Body Styles
   =========================================== */
.green-theme-body {
    background-color: var(--gt-light);
}

/* ===========================================
   Main Layout Structure
   =========================================== */
.green-theme-wrapper {
    padding: 20px 0;
}

.green-theme-layout {
    display: flex;
    gap: 20px;
    align-items: flex-start;
}

/* ===========================================
   Sidebar - Categories
   =========================================== */
.green-theme-sidebar {
    width: var(--gt-sidebar-width);
    flex-shrink: 0;
    position: sticky;
    top: 20px;
}

.sidebar-categories {
    background: var(--gt-white);
    border-radius: var(--gt-radius);
    overflow: hidden;
    box-shadow: var(--gt-shadow);
}

.sidebar-header {
    background: var(--gt-primary);
    color: var(--gt-white);
    padding: 15px 20px;
    font-weight: 600;
    font-size: 16px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.sidebar-category-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.sidebar-category-item {
    border-bottom: 1px solid var(--gt-border);
}

.sidebar-category-item:last-child {
    border-bottom: none;
}

.sidebar-category-item {
    background: var(--gt-primary);
    border-bottom: 1px solid var(--gt-primary-dark);
}

.sidebar-category-item:last-child {
    border-bottom: none;
}

.sidebar-category-link {
    display: block;
    padding: 12px 20px;
    color: var(--gt-white);
    text-decoration: none;
    font-size: 14px;
    transition: all 0.2s ease;
}

.sidebar-category-link:hover {
    background: var(--gt-primary-dark);
    color: var(--gt-white);
    padding-left: 25px;
}

/* ===========================================
   Main Content Area
   =========================================== */
.green-theme-main {
    flex: 1;
    min-width: 0;
}

/* ===========================================
   Navigation Bar
   =========================================== */
.green-theme-nav {
    background: var(--gt-secondary);
    border-radius: var(--gt-radius);
    margin-bottom: 20px;
    padding: 0 20px;
}

.green-theme-nav .nav-list {
    display: flex;
    list-style: none;
    margin: 0;
    padding: 0;
    gap: 5px;
}

.green-theme-nav .nav-item a {
    display: block;
    padding: 12px 20px;
    color: var(--gt-white);
    text-decoration: none;
    font-size: 14px;
    transition: color 0.2s ease;
}

.green-theme-nav .nav-item a:hover,
.green-theme-nav .nav-item.active a {
    color: var(--gt-primary-light);
}

/* ===========================================
   Hero Banner Section
   =========================================== */
.green-theme-hero {
    margin-bottom: 30px;
    border-radius: var(--gt-radius);
    overflow: hidden;
    width: 100%;
}

.hero-slider {
    position: relative;
    width: 100%;
}

.hero-slide {
    width: 100%;
}

.hero-slide a {
    display: block;
    width: 100%;
}

.hero-image {
    width: 100%;
    height: 400px;
    object-fit: cover;
    object-position: center;
    border-radius: var(--gt-radius);
    display: block;
}

/* Hero Slider - Owl Carousel Full Width */
.hero-slider.owl-carousel .owl-stage-outer,
.hero-slider.owl-carousel .owl-stage,
.hero-slider.owl-carousel .owl-item {
    width: 100%;
}

.hero-slider.owl-carousel .owl-item img {
    width: 100%;
    height: 400px;
    object-fit: cover;
    object-position: center;
}

/* Hero Slider Navigation */
.hero-slider .owl-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 100%;
    display: flex;
    justify-content: space-between;
    padding: 0 10px;
    pointer-events: none;
}

.hero-slider .owl-nav button {
    pointer-events: auto;
    width: 40px;
    height: 40px;
    background: rgba(255, 255, 255, 0.9) !important;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    color: var(--gt-text) !important;
    transition: all 0.2s ease;
}

.hero-slider .owl-nav button:hover {
    background: var(--gt-white) !important;
    box-shadow: var(--gt-shadow);
}

/* ===========================================
   Products Section
   =========================================== */
.green-theme-products-section {
    background: var(--gt-white);
    border-radius: var(--gt-radius);
    padding: 20px;
    margin-bottom: 30px;
    box-shadow: var(--gt-shadow);
}

.products-section-header {
    margin-bottom: 20px;
    padding-bottom: 15px;
    border-bottom: 2px solid var(--gt-border);
}

.section-title {
    font-size: 20px;
    font-weight: 600;
    color: var(--gt-text);
    margin: 0;
    text-transform: capitalize;
}

.products-with-promo {
    display: flex;
    gap: 20px;
}

/* Promo Banner Sidebar */
.promo-banner-sidebar {
    width: 200px;
    flex-shrink: 0;
}

.promo-banner-link {
    display: block;
}

.promo-banner-image {
    width: 100%;
    height: auto;
    border-radius: var(--gt-radius);
}

/* Products Grid */
.products-grid-wrapper {
    flex: 1;
}

.products-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

/* ===========================================
   Product Card
   =========================================== */
.green-product-card {
    background: var(--gt-white);
    border: 1px solid var(--gt-border);
    border-radius: var(--gt-radius);
    padding: 15px;
    position: relative;
    transition: all 0.3s ease;
}

.green-product-card:hover {
    box-shadow: var(--gt-shadow);
    transform: translateY(-2px);
}

/* Product Badge */
.product-badge {
    position: absolute;
    top: 10px;
    left: 10px;
    background: var(--gt-badge-green);
    color: var(--gt-white);
    padding: 4px 10px;
    border-radius: var(--gt-radius);
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    z-index: 1;
}

/* Product Image */
.product-image-wrapper {
    width: 100%;
    height: 150px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 15px;
}

.product-image {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

/* Product Info */
.product-info {
    text-align: center;
    margin-bottom: 15px;
}

.product-title {
    font-size: 14px;
    font-weight: 600;
    margin: 0 0 8px;
    line-height: 1.3;
}

.product-title a {
    color: var(--gt-primary);
    text-decoration: none;
}

.product-title a:hover {
    color: var(--gt-primary-dark);
}

.product-description {
    font-size: 12px;
    color: var(--gt-text-muted);
    margin: 0 0 10px;
    line-height: 1.4;
}

.product-price {
    margin-bottom: 5px;
}

.current-price {
    font-size: 18px;
    font-weight: 700;
    color: var(--gt-text);
}

/* Product Actions */
.product-actions {
    display: flex;
    gap: 10px;
    justify-content: center;
}

.btn-add-to-cart {
    background: var(--gt-primary);
    color: var(--gt-white);
    border: none;
    padding: 8px 16px;
    border-radius: var(--gt-radius);
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.2s ease;
}

.btn-add-to-cart:hover {
    background: var(--gt-primary-dark);
}

.btn-view {
    background: var(--gt-white);
    color: var(--gt-text);
    border: 1px solid var(--gt-border);
    padding: 8px 16px;
    border-radius: var(--gt-radius);
    font-size: 12px;
    font-weight: 500;
    text-decoration: none;
    transition: all 0.2s ease;
}

.btn-view:hover {
    background: var(--gt-light);
    color: var(--gt-text);
}

/* ===========================================
   Footer Banner Section
   =========================================== */
.green-theme-footer-banner {
    margin-bottom: 30px;
}

.footer-banner-slide {
    width: 100%;
}

.footer-banner-image {
    width: 100%;
    height: auto;
    border-radius: var(--gt-radius);
    max-height: 300px;
    object-fit: cover;
}

.footer-banner-slider .owl-dots {
    text-align: center;
    margin-top: 15px;
}

.footer-banner-slider .owl-dots .owl-dot {
    width: 10px;
    height: 10px;
    background: var(--gt-border);
    border-radius: 50%;
    margin: 0 5px;
    display: inline-block;
}

.footer-banner-slider .owl-dots .owl-dot.active {
    background: var(--gt-primary);
}

/* ===========================================
   Responsive Styles
   =========================================== */
@media (max-width: 1200px) {
    .products-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .promo-banner-sidebar {
        width: 180px;
    }
}

@media (max-width: 992px) {
    .green-theme-layout {
        flex-direction: column;
    }

    .green-theme-sidebar {
        width: 100%;
        position: static;
    }

    .sidebar-category-list {
        display: flex;
        flex-wrap: wrap;
    }

    .sidebar-category-item {
        border-bottom: none;
        border-right: 1px solid var(--gt-border);
    }

    .sidebar-category-link {
        padding: 10px 15px;
    }

    .products-with-promo {
        flex-direction: column;
    }

    .promo-banner-sidebar {
        width: 100%;
        max-width: 400px;
        margin: 0 auto 20px;
    }
}

@media (max-width: 768px) {
    .green-theme-nav .nav-list {
        flex-wrap: wrap;
        justify-content: center;
    }

    .green-theme-nav .nav-item a {
        padding: 10px 15px;
        font-size: 13px;
    }

    .products-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 15px;
    }

    /* Mobile Hero Banner - Clean Override */
    .green-theme-hero {
        overflow: hidden;
        width: 100vw;
    }

    .green-theme-hero .hero-slider.owl-carousel .owl-item {
        width: 100vw !important;
        margin: 0 !important;
    }

    .green-theme-hero .hero-slider.owl-carousel .owl-item img {
        width: 100vw !important;
        height: 150px !important;
        object-fit: cover !important;
        object-position: center !important;
    }

    /* Mobile Products Section */
    .green-theme-products-section {
        width: 100vw;
    }
}

@media (max-width: 576px) {
    .green-theme-wrapper {
        padding: 10px 0;
    }

    .sidebar-category-list {
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .sidebar-category-item {
        flex-shrink: 0;
    }

    .products-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
    }

    .green-product-card {
        padding: 10px;
    }

    .product-image-wrapper {
        height: 120px;
    }

    .product-title {
        font-size: 13px;
    }

    .current-price {
        font-size: 16px;
    }

    .product-actions {
        flex-direction: column;
    }

    .btn-add-to-cart,
    .btn-view {
        width: 100%;
        text-align: center;
    }
}

/* ===========================================
   Dark Footer Override (for Green Theme)
   =========================================== */
.green-theme-body .page-footer {
    background: var(--gt-dark) !important;
}

.green-theme-body .page-footer,
.green-theme-body .page-footer a,
.green-theme-body .page-footer .widget-list-link,
.green-theme-body .page-footer p,
.green-theme-body .page-footer span,
.green-theme-body .page-footer h6 {
    color: var(--gt-white) !important;
}

.green-theme-body .page-footer .footer-header {
    color: var(--gt-white) !important;
}

.green-theme-body .page-footer .widget-list-link:hover {
    color: var(--gt-primary-light) !important;
}

.green-theme-body .page-footer .custom-light-primary-color-20 {
    background: var(--gt-dark) !important;
}

.green-theme-body .page-footer .bg-white-overlay-50 {
    background: rgba(0, 0, 0, 0.5) !important;
}

/* Social Icons in Footer */
.green-theme-body .page-footer .social-btn {
    background: var(--gt-secondary) !important;
    border: 1px solid var(--gt-text-muted);
}

.green-theme-body .page-footer .social-btn:hover {
    background: var(--gt-primary) !important;
}

/* ===========================================
   Header Override (for Green Theme)
   =========================================== */
.green-theme-body .announcement-bar,
.green-theme-body #announcement {
    background: var(--gt-secondary) !important;
    background-color: var(--gt-secondary) !important;
}

.green-theme-body .topbar {
    background: var(--gt-secondary) !important;
}

.green-theme-body .topbar-link,
.green-theme-body .topbar-text {
    color: var(--gt-white) !important;
}

.green-theme-body .navbar-sticky,
.green-theme-body .navbar-sticky.bg-light,
.green-theme-body .mobile-head,
.green-theme-body .navbar-sticky.bg-light.mobile-head {
    background: var(--gt-secondary) !important;
    background-color: var(--gt-secondary) !important;
    padding-bottom: 0 !important;
    margin-bottom: 0 !important;
}

.green-theme-body .navbar-sticky .navbar,
.green-theme-body .navbar-sticky .navbar-light,
.green-theme-body .navbar-sticky .navbar.navbar-expand-md.navbar-light {
    background: var(--gt-secondary) !important;
    background-color: var(--gt-secondary) !important;
}

.green-theme-body .navbar-sticky.navbar-stuck {
    background: var(--gt-secondary) !important;
}

.green-theme-body .search_button {
    background: var(--gt-primary) !important;
}

.green-theme-body .search_button:hover {
    background: var(--gt-primary-dark) !important;
}

.green-theme-body .navbar-tool-icon-box {
    color: var(--gt-white) !important;
}

.green-theme-body .navbar-tool-label {
    background: var(--gt-primary) !important;
}

.green-theme-body .navbar-tool-text {
    color: var(--gt-white) !important;
}

/* Navigation Bar - Lighter Grey Block with White Text (distinct from header) */
.green-theme-body .navbar-stuck-menu {
    background: var(--gt-secondary-light) !important;
    background-color: var(--gt-secondary-light) !important;
    margin-top: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

.green-theme-body .navbar-stuck-menu .navbar {
    background: var(--gt-secondary-light) !important;
    background-color: var(--gt-secondary-light) !important;
}

.green-theme-body .navbar-stuck-menu .container {
    background: var(--gt-secondary-light) !important;
}

/* Navbar collapse - the main container for navigation items */
.green-theme-body .navbar-stuck-menu .navbar-collapse,
.green-theme-body .navbar-stuck-menu #navbarCollapseDesktop {
    background: var(--gt-secondary-light) !important;
    background-color: var(--gt-secondary-light) !important;
}

/* Mega Nav containers (Categories button & Register as IBO) */
.green-theme-body .navbar-stuck-menu .mega-nav,
.green-theme-body .navbar-stuck-menu .__mega-nav,
.green-theme-body .navbar-stuck-menu .navbar-nav.mega-nav,
.green-theme-body .navbar-stuck-menu ul.navbar-nav.mega-nav {
    background: var(--gt-secondary-light) !important;
    background-color: var(--gt-secondary-light) !important;
}

/* Nav item inside mega-nav */
.green-theme-body .navbar-stuck-menu .__mega-nav .nav-item,
.green-theme-body .navbar-stuck-menu .mega-nav .nav-item,
.green-theme-body .navbar-stuck-menu .mega-nav li {
    background: var(--gt-secondary-light) !important;
    background-color: var(--gt-secondary-light) !important;
}

/* All navbar-nav sections */
.green-theme-body .navbar-stuck-menu .navbar-nav {
    background: var(--gt-secondary-light) !important;
    background-color: var(--gt-secondary-light) !important;
}

.green-theme-body .navbar-stuck-menu .nav-link,
.green-theme-body .navbar-stuck-menu .navbar-nav .nav-link,
.green-theme-body .navbar-stuck-menu a,
.green-theme-body .navbar-stuck-menu span,
.green-theme-body .navbar-stuck-menu .category-menu-toggle-btn-text {
    color: var(--gt-white) !important;
}

.green-theme-body .navbar-stuck-menu .nav-link:hover,
.green-theme-body .navbar-stuck-menu a:hover {
    color: var(--gt-primary-light) !important;
}

.green-theme-body .navbar-stuck-menu .dropdown-toggle,
.green-theme-body .navbar-stuck-menu .mega-nav .nav-link,
.green-theme-body .navbar-stuck-menu .__mega-nav .nav-link {
    color: var(--gt-white) !important;
}

/* SVG icons in navigation - white fill */
.green-theme-body .navbar-stuck-menu svg path,
.green-theme-body .navbar-stuck-menu svg {
    fill: var(--gt-white) !important;
    color: var(--gt-white) !important;
}

/* Categories button and Register as IBO button */
.green-theme-body .navbar-stuck-menu .category-accordion-toggle-btn,
.green-theme-body .navbar-stuck-menu .category-menu-toggle-btn {
    color: var(--gt-white) !important;
    background: transparent !important;
}

/* Dropdown arrows */
.green-theme-body .navbar-stuck-menu .czi-arrow-down,
.green-theme-body .navbar-stuck-menu .desktop-category-arrow,
.green-theme-body .navbar-stuck-menu i {
    color: var(--gt-white) !important;
}

.green-theme-body .web-text-primary,
.green-theme-body .text-primary {
    color: var(--gt-primary) !important;
}

.green-theme-body .btn--primary,
.green-theme-body .btn-primary {
    background: var(--gt-primary) !important;
    border-color: var(--gt-primary) !important;
}

.green-theme-body .btn--primary:hover,
.green-theme-body .btn-primary:hover {
    background: var(--gt-primary-dark) !important;
    border-color: var(--gt-primary-dark) !important;
}

/* ===========================================
   1. Categories Mega Menu Dropdown - Green Theme
   =========================================== */
.green-theme-body .category-mega-menu {
    background: var(--gt-white) !important;
}

.green-theme-body .category-mega-menu .mega-menu-header {
    background: var(--gt-primary) !important;
    border-bottom: 2px solid var(--gt-primary-dark);
}

.green-theme-body .category-mega-menu .mega-menu-header a,
.green-theme-body .category-mega-menu .mega-menu-view-all {
    color: var(--gt-white) !important;
}

.green-theme-body .category-mega-menu .mega-menu-columns {
    background: var(--gt-white) !important;
}

.green-theme-body .category-mega-menu .mega-menu-column {
    background: var(--gt-white) !important;
}

.green-theme-body .category-mega-menu .mega-menu-item,
.green-theme-body .category-mega-menu .mega-menu-subitem,
.green-theme-body .category-mega-menu .mega-menu-subsubitem {
    background: var(--gt-white) !important;
}

.green-theme-body .category-mega-menu .mega-menu-link,
.green-theme-body .category-mega-menu .mega-menu-sublink,
.green-theme-body .category-mega-menu .mega-menu-subsublink,
.green-theme-body .category-mega-menu .mega-menu-name,
.green-theme-body .category-mega-menu span {
    color: var(--gt-text) !important;
}

.green-theme-body .category-mega-menu .mega-menu-item:hover,
.green-theme-body .category-mega-menu .mega-menu-item.active {
    background: var(--gt-primary-light) !important;
}

.green-theme-body .category-mega-menu .mega-menu-item:hover .mega-menu-name,
.green-theme-body .category-mega-menu .mega-menu-item.active .mega-menu-name,
.green-theme-body .category-mega-menu .mega-menu-item:hover .mega-menu-link,
.green-theme-body .category-mega-menu .mega-menu-item.active .mega-menu-link {
    color: var(--gt-dark) !important;
}

.green-theme-body .category-mega-menu .mega-menu-subitem:hover,
.green-theme-body .category-mega-menu .mega-menu-subitem.active {
    background: var(--gt-light) !important;
}

.green-theme-body .category-mega-menu .mega-menu-arrow i {
    color: var(--gt-text-muted) !important;
}

/* ===========================================
   2 & 3. Register as IBO & Profile Dropdowns
   =========================================== */
.green-theme-body .dropdown-menu {
    background: var(--gt-white) !important;
    border: 1px solid var(--gt-border) !important;
    box-shadow: var(--gt-shadow) !important;
}

.green-theme-body .dropdown-menu .dropdown-item {
    color: var(--gt-text) !important;
    background: var(--gt-white) !important;
}

.green-theme-body .dropdown-menu .dropdown-item:hover,
.green-theme-body .dropdown-menu .dropdown-item:focus {
    background: var(--gt-primary-light) !important;
    color: var(--gt-dark) !important;
}

.green-theme-body .dropdown-menu .dropdown-item i {
    color: var(--gt-primary) !important;
}

.green-theme-body .dropdown-menu .dropdown-divider {
    border-color: var(--gt-border) !important;
}

/* Auth dropdown specific styling */
.green-theme-body .__auth-dropdown .dropdown-item,
.green-theme-body .__dropdown-menu-3 .dropdown-item {
    color: var(--gt-text) !important;
}

.green-theme-body .__auth-dropdown .dropdown-item:hover,
.green-theme-body .__dropdown-menu-3 .dropdown-item:hover {
    background: var(--gt-primary-light) !important;
    color: var(--gt-dark) !important;
}

/* ===========================================
   4. Favourites, Cart, Profile Icons - Theme Colors
   =========================================== */
.green-theme-body .navbar-tool-icon-box.bg-secondary {
    background: var(--gt-primary) !important;
    background-color: var(--gt-primary) !important;
}

.green-theme-body .navbar-tool-icon-box.bg-secondary:hover {
    background: var(--gt-primary-dark) !important;
    background-color: var(--gt-primary-dark) !important;
}

.green-theme-body .navbar-tool-icon-box i,
.green-theme-body .navbar-tool-icon-box .czi-heart,
.green-theme-body .navbar-tool-icon-box .czi-cart {
    color: var(--gt-white) !important;
}

.green-theme-body .navbar-tool-label {
    background: var(--gt-badge-red) !important;
    color: var(--gt-white) !important;
}

/* Search button icon */
.green-theme-body .search_button .input-group-text {
    background: var(--gt-primary) !important;
    border-color: var(--gt-primary) !important;
}

.green-theme-body .search_button .input-group-text:hover {
    background: var(--gt-primary-dark) !important;
}

/* ===========================================
   5. Hide Hamburger Menu on Desktop
   =========================================== */
@media (min-width: 768px) {
    .green-theme-body .navbar-toggler,
    .green-theme-body .navbar-stuck-toggler {
        display: none !important;
    }
}

/* ===========================================
   6. Language/Currency Dropdown - Fix Text Visibility
   =========================================== */
.green-theme-body .topbar .dropdown-menu {
    background: var(--gt-white) !important;
}

.green-theme-body .topbar .dropdown-menu li,
.green-theme-body .topbar .dropdown-menu .dropdown-item {
    color: var(--gt-text) !important;
    background: var(--gt-white) !important;
}

.green-theme-body .topbar .dropdown-menu li:hover,
.green-theme-body .topbar .dropdown-menu .dropdown-item:hover {
    background: var(--gt-primary-light) !important;
    color: var(--gt-dark) !important;
}

/* Language dropdown specific */
.green-theme-body .__language-bar .dropdown-menu li,
.green-theme-body .__language-bar .dropdown-menu .dropdown-item,
.green-theme-body .__language-bar .dropdown-menu a {
    color: var(--gt-text) !important;
}

.green-theme-body .__language-bar .dropdown-menu li:hover,
.green-theme-body .__language-bar .dropdown-menu .dropdown-item:hover {
    background: var(--gt-primary-light) !important;
}

/* Currency dropdown */
.green-theme-body .topbar-text .dropdown-menu li {
    color: var(--gt-text) !important;
    cursor: pointer;
}

.green-theme-body .topbar-text .dropdown-menu li:hover {
    background: var(--gt-primary-light) !important;
}