/* ===== FONTAWESOME & BUTTON FIX ===== */
/* Perbaikan untuk FontAwesome icons dan button styling */

/* FONTAWESOME ICONS - PAKSA TAMPIL */
i[class*="fa-"],
i[class*="fas"],
i[class*="far"],
i[class*="fab"],
.fa,
.fas,
.far,
.fab {
    display: inline-block !important;
    font-family: "Font Awesome 5 Free" !important;
    font-style: normal !important;
    font-variant: normal !important;
    text-rendering: auto !important;
    line-height: 1 !important;
    -webkit-font-smoothing: antialiased !important;
    -moz-osx-font-smoothing: grayscale !important;
    visibility: visible !important;
    opacity: 1 !important;
    width: auto !important;
    height: auto !important;
    position: relative !important;
    z-index: 1 !important;
    overflow: visible !important;
    clip: none !important;
    clip-path: none !important;
    transform: none !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
    text-decoration: none !important;
    vertical-align: baseline !important;
    color: inherit !important;
    font-size: inherit !important;
    font-weight: 900 !important;
}

/* SOLID ICONS */
.fas,
i.fas {
    font-weight: 900 !important;
    font-family: "Font Awesome 5 Free" !important;
}

/* REGULAR ICONS */
.far,
i.far {
    font-weight: 400 !important;
    font-family: "Font Awesome 5 Free" !important;
}

/* BRAND ICONS */
.fab,
i.fab {
    font-weight: 400 !important;
    font-family: "Font Awesome 5 Brands" !important;
}

/* SPECIFIC ICON FIXES */
.fa-sign-in-alt::before,
.fas.fa-sign-in-alt::before {
    content: "\f2f6" !important;
    font-family: "Font Awesome 5 Free" !important;
    font-weight: 900 !important;
}

.fa-user-plus::before,
.fas.fa-user-plus::before {
    content: "\f234" !important;
    font-family: "Font Awesome 5 Free" !important;
    font-weight: 900 !important;
}

.fa-user::before,
.fas.fa-user::before {
    content: "\f007" !important;
    font-family: "Font Awesome 5 Free" !important;
    font-weight: 900 !important;
}

.fa-chevron-down::before,
.fas.fa-chevron-down::before {
    content: "\f078" !important;
    font-family: "Font Awesome 5 Free" !important;
    font-weight: 900 !important;
}

.fa-shopping-cart::before,
.fas.fa-shopping-cart::before {
    content: "\f07a" !important;
    font-family: "Font Awesome 5 Free" !important;
    font-weight: 900 !important;
}

.fa-seedling::before,
.fas.fa-seedling::before {
    content: "\f4d8" !important;
    font-family: "Font Awesome 5 Free" !important;
    font-weight: 900 !important;
}

.fa-user-circle::before,
.fas.fa-user-circle::before {
    content: "\f2bd" !important;
    font-family: "Font Awesome 5 Free" !important;
    font-weight: 900 !important;
}

.fa-shopping-bag::before,
.fas.fa-shopping-bag::before {
    content: "\f290" !important;
    font-family: "Font Awesome 5 Free" !important;
    font-weight: 900 !important;
}

.fa-truck::before,
.fas.fa-truck::before {
    content: "\f0d1" !important;
    font-family: "Font Awesome 5 Free" !important;
    font-weight: 900 !important;
}

.fa-sign-out-alt::before,
.fas.fa-sign-out-alt::before {
    content: "\f2f5" !important;
    font-family: "Font Awesome 5 Free" !important;
    font-weight: 900 !important;
}

/* BUTTON FIXES - PAKSA STYLING BUTTON */
.main-header .auth-btn,
.main-header .login-btn,
.main-header .register-btn,
.main-header .user-toggle,
.main-header .cart-button,
.main-header .mobile-menu-toggle {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0.6rem !important;
    padding: 0.7rem 1.2rem !important;
    border-radius: 20px !important;
    text-decoration: none !important;
    font-size: 0.9rem !important;
    font-weight: 600 !important;
    transition: all 0.3s ease !important;
    border: 2px solid transparent !important;
    min-height: 40px !important;
    cursor: pointer !important;
    outline: none !important;
    background: transparent !important;
    position: relative !important;
    overflow: visible !important;
    visibility: visible !important;
    opacity: 1 !important;
    z-index: 1 !important;
    white-space: nowrap !important;
    font-family: inherit !important;
    line-height: 1.2 !important;
    vertical-align: middle !important;
    box-sizing: border-box !important;
}

/* LOGIN BUTTON */
.main-header .login-btn {
    color: var(--latte) !important;
    border-color: var(--latte) !important;
    background: transparent !important;
}

.main-header .login-btn:hover {
    background: var(--latte) !important;
    color: var(--hijau) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 12px rgba(255, 255, 255, 0.2) !important;
}

/* REGISTER BUTTON */
.main-header .register-btn {
    background: var(--latte) !important;
    color: var(--hijau) !important;
    border-color: var(--latte) !important;
}

.main-header .register-btn:hover {
    background: #fff !important;
    border-color: #fff !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 12px rgba(255, 255, 255, 0.3) !important;
}

/* USER TOGGLE BUTTON */
.main-header .user-toggle {
    background: rgba(255, 255, 255, 0.1) !important;
    border: 2px solid var(--latte) !important;
    color: var(--latte) !important;
}

.main-header .user-toggle:hover,
.main-header .user-toggle.active {
    background: var(--latte) !important;
    color: var(--hijau) !important;
    transform: translateY(-2px) !important;
}

/* CART BUTTON */
.main-header .cart-button {
    width: 48px !important;
    height: 48px !important;
    background: rgba(255, 255, 255, 0.1) !important;
    border: 2px solid var(--latte) !important;
    border-radius: 50% !important;
    color: var(--latte) !important;
    font-size: 1.3rem !important;
    padding: 0 !important;
}

.main-header .cart-button:hover {
    background: var(--latte) !important;
    color: var(--hijau) !important;
    transform: translateY(-2px) scale(1.05) !important;
}

/* BUTTON ICONS */
.main-header .auth-btn i,
.main-header .user-toggle i,
.main-header .cart-button i {
    display: inline-block !important;
    font-family: "Font Awesome 5 Free" !important;
    font-weight: 900 !important;
    font-style: normal !important;
    font-variant: normal !important;
    text-rendering: auto !important;
    line-height: 1 !important;
    -webkit-font-smoothing: antialiased !important;
    visibility: visible !important;
    opacity: 1 !important;
    color: inherit !important;
    font-size: inherit !important;
    width: auto !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    background: transparent !important;
    vertical-align: middle !important;
}

/* BUTTON TEXT */
.main-header .auth-btn .btn-text,
.main-header .user-toggle .user-name {
    display: inline-block !important;
    color: inherit !important;
    font-size: inherit !important;
    font-weight: inherit !important;
    font-family: inherit !important;
    line-height: inherit !important;
    visibility: visible !important;
    opacity: 1 !important;
    white-space: nowrap !important;
    text-decoration: none !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    background: transparent !important;
    vertical-align: middle !important;
}

/* MOBILE RESPONSIVE */
@media (max-width: 768px) {
    .main-header .btn-text {
        display: none !important;
    }
    
    .main-header .auth-btn {
        width: 40px !important;
        height: 40px !important;
        border-radius: 50% !important;
        padding: 0 !important;
        justify-content: center !important;
    }
    
    .main-header .user-name {
        display: none !important;
    }
    
    .main-header .user-toggle {
        width: 40px !important;
        height: 40px !important;
        border-radius: 50% !important;
        padding: 0 !important;
        justify-content: center !important;
    }
    
    .main-header .cart-button {
        width: 40px !important;
        height: 40px !important;
        font-size: 1.1rem !important;
    }
}

/* FALLBACK COLORS */
.main-header .login-btn {
    color: #f5f5dc !important; /* fallback untuk var(--latte) */
    border-color: #f5f5dc !important;
}

.main-header .register-btn {
    background: #f5f5dc !important;
    color: #2d5016 !important; /* fallback untuk var(--hijau) */
    border-color: #f5f5dc !important;
}

.main-header .user-toggle {
    border-color: #f5f5dc !important;
    color: #f5f5dc !important;
}

.main-header .cart-button {
    border-color: #f5f5dc !important;
    color: #f5f5dc !important;
}

/* HAMBURGER MENU */
.main-header .hamburger-line {
    display: block !important;
    width: 100% !important;
    height: 3px !important;
    background: var(--latte) !important;
    border-radius: 2px !important;
    transition: all 0.3s ease !important;
    margin: 3px 0 !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* FORCE FONTAWESOME LOAD */
@font-face {
    font-family: "Font Awesome 5 Free";
    font-style: normal;
    font-weight: 900;
    font-display: block;
    src: url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/webfonts/fa-solid-900.woff2") format("woff2");
}

@font-face {
    font-family: "Font Awesome 5 Free";
    font-style: normal;
    font-weight: 400;
    font-display: block;
    src: url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/webfonts/fa-regular-400.woff2") format("woff2");
}

@font-face {
    font-family: "Font Awesome 5 Brands";
    font-style: normal;
    font-weight: 400;
    font-display: block;
    src: url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/webfonts/fa-brands-400.woff2") format("woff2");
}