/* ============================================================
   Tachli Brand - Complete Theme Overrides (v4)
   Synchronizes all template elements with Tachli brand palette:
   - Honey: #C89B3C | Dark Honey: #A87E2A
   - Chocolate: #4E3B2B | Dark Choco: #3A2A1C
   - Olive Green: #7A8A57 | Warm Beige: #DCCEB3 / #EFE7D5
   ============================================================ */

:root {
    --tachli-bg: #F5F0E6;
    --tachli-text: #5F5245;
    --tachli-heading: #4E3B2B;
    --tachli-honey: #C89B3C;
    --tachli-honey-dark: #A87E2A;
    --tachli-choco: #4E3B2B;
    --tachli-choco-dark: #3A2A1C;
    --tachli-olive: #7A8A57;
    --tachli-beige: #DCCEB3;
}

/* ============ 1. Main Header & Navbar Brand Overrides ============ */
.site-header .navigation .navbar-header .navbar-brand {
    color: #4E3B2B !important;
    font-weight: 700 !important;
    transition: color 0.25s ease !important;
}

    .site-header .navigation .navbar-header .navbar-brand:hover {
        color: #C89B3C !important;
    }

/* Navbar Links (Desktop) */
.site-header #navbar > ul > li > a {
    color: #4E3B2B !important;
    font-weight: 600 !important;
    transition: all 0.25s ease !important;
}

    .site-header #navbar > ul > li > a:hover,
    .site-header #navbar > ul > li > a:focus,
    .site-header #navbar > ul > li > a.active {
        color: #C89B3C !important;
    }

    /* Honeycomb hover indicator under active/hovered link */
    .site-header #navbar > ul > li > a:before {
        color: #C89B3C !important;
    }

/* Dropdown Submenus */
.site-header #navbar > ul .sub-menu {
    border-top: 3px solid #C89B3C !important;
    border-radius: 0 0 10px 10px !important;
    box-shadow: 0 10px 30px rgba(78, 59, 43, 0.12) !important;
    border-left: 1px solid #EFE7D5 !important;
    border-right: 1px solid #EFE7D5 !important;
    border-bottom: 1px solid #EFE7D5 !important;
}

.site-header #navbar > ul > li .sub-menu a {
    color: #5F5245 !important;
    font-weight: 500 !important;
    transition: all 0.2s ease !important;
}

    .site-header #navbar > ul > li .sub-menu a:hover {
        color: #C89B3C !important;
        background-color: #FBF6EC !important;
        padding-right: 20px !important;
    }

/* Mobile Navbar Toggle Button */
.site-header .navbar-header button {
    background-color: #4E3B2B !important;
    border-radius: 8px !important;
    transition: background-color 0.2s ease !important;
}

    .site-header .navbar-header button:hover {
        background-color: #C89B3C !important;
    }

/* Mobile Menu Close Button */
.site-header .menu-close {
    background: #4E3B2B !important;
    color: #ffffff !important;
    transition: background-color 0.2s ease !important;
}

    .site-header .menu-close:hover {
        background: #C89B3C !important;
    }

/* Mobile Menu Links */
@media (max-width: 991px) {
    .site-header #navbar ul a {
        color: #4E3B2B !important;
    }

        .site-header #navbar ul a:hover,
        .site-header #navbar ul li.current a,
        .site-header #navbar ul li a.active {
            color: #C89B3C !important;
        }
}

/* Sticky Header */
.site-header .sticky-header {
    box-shadow: 0 4px 20px rgba(78, 59, 43, 0.08) !important;
}

/* ============ 2. Offer Badge on Products ============ */
.product-wrap .product-item .product-img .offer-thumb::before {
    background: linear-gradient(to left, #C89B3C, #A87E2A) !important;
}

.product-wrap .product-item .product-img .offer-thumb {
    color: #fff !important;
}

.product-wrap .product-item:hover .product-img .offer-thumb {
    color: #4E3B2B !important;
}

/* ============ 3. Price Range Slider (noUiSlider) ============ */
.noUi-connect {
    background: #C89B3C !important;
}

.noUi-handle {
    border-color: #A87E2A !important;
    background: #fff !important;
    box-shadow: 0 2px 6px rgba(78, 59, 43, 0.25) !important;
}

    .noUi-handle:after,
    .noUi-handle:before {
        background: #C89B3C !important;
    }

.noUi-touch-area {
    background: transparent !important;
}

/* ============ 4. Category Radio Buttons ============ */
.topcoat-radio-button:before {
    border-color: #5F5245 !important;
}

.topcoat-radio-button:after {
    background: #C89B3C !important;
    border-color: #C89B3C !important;
}

/* ============ 5. Product Count Badge in Sidebar ============ */
.shop-filter-wrap .badge.bg-secondary,
.filter-item .badge.bg-secondary {
    background-color: #DCCEB3 !important;
    color: #4E3B2B !important;
}

/* ============ 6. Category Icon Hover ============ */
.category-area .category-wrap .category-item .category-icon:before,
.category-area-s2 .category-wrap .category-item .category-icon:before {
    background: linear-gradient(0deg, #B8860B 0%, #C89B3C 100%) !important;
}

/* ============ 7. Projects Hover ============ */
.tp-projects .grid .project-inner .hover-content {
    background: rgba(78, 59, 43, 0.92) !important;
}

/* ============ 8. Offer Section Background ============ */
.offer-area .offer-img:before {
    background: linear-gradient(#A87E2A, #C89B3C) !important;
}

/* ============ 9. MiniCart Action Buttons ============ */
.view-cart-btn {
    background-color: #4E3B2B !important;
}

    .view-cart-btn:hover {
        background-color: #C89B3C !important;
    }

.mini-checkout-price {
    color: #4E3B2B !important;
}

/* ============ 10. Title Decorative Underlines ============ */
.category-title:after, .category-title:before,
.offer-title:after, .offer-title:before,
.about-title:after, .about-title:before,
.service-sidebar .widget h3:after, .service-sidebar .widget h3:before,
.shop-filter-item h2:after {
    background: linear-gradient(to left, #C89B3C, #B8860B) !important;
}

/* ============ 11. Services Section ============ */
.service-area:before {
    background: linear-gradient(0deg, #5F5245 24%, #4E3B2B) !important;
}

.service-area .service-item:hover .service-icon {
    background: #C89B3C !important;
}

/* ============ 12. Top Filter Bar ============ */
.shop-section .shop-section-top-inner .shoping-list .nav-link.active {
    background-color: #4E3B2B !important;
}

.shop-filter-search form button {
    background: #4E3B2B !important;
}

.shop-filter-search input:focus {
    background-color: rgba(200, 155, 60, 0.15) !important;
}

/* ============ 13. Footer / Newsletter / Modals ============ */
.subscribe-dialog .subscribe-box input[type="submit"] {
    background: #4E3B2B !important;
}

    .subscribe-dialog .subscribe-box input[type="submit"]:hover {
        background: #C89B3C !important;
    }

.modal-content button:hover {
    background-color: #C89B3C !important;
}

.newsletter-widget form .submit button {
    color: #C89B3C !important;
}

/* ============ 14. Blog / Team / Testimonials ============ */
.blog-area .blog-wrap .blog-item .blog-content ul li i {
    color: #C89B3C !important;
}

.blog-area .blog-wrap .blog-item .blog-content h3 a:hover,
.blog-pg-section .details h3 a:hover,
.blog-single-section .details h3 a:hover,
.blog-single-section .post h2:hover {
    color: #A87E2A !important;
}

.testimonial-area .testimonial-wrap .testimonial-item .testimonial-content .testimonial-author span {
    color: #C89B3C !important;
}

.testimonial-area .testimonial-wrap .testimonial-item .testimonial-img .t-quote {
    color: #C89B3C !important;
}

.tp-fun-fact-section .grid h3 {
    color: #C89B3C !important;
}

.team-section .grid .details ul a:hover,
.team-section .owl-nav button:hover {
    color: #C89B3C !important;
}

/* ============ 15. Flash Sale Countdown ============ */
.flash-Sale-area .countdown_area .single_countdown {
    background: #EFE7D5 !important;
    color: #4E3B2B !important;
}

/* ============ 16. Breadcrumb Section ============ */
.tp-breadcumb-area:before {
    background: #4E3B2B !important;
    opacity: 0.72 !important;
}

.tp-breadcumb-area .tp-breadcumb-wrap ul li a:hover {
    color: #C89B3C !important;
}

/* ============ 17. Header Profile Menu & Social Links ============ */
.site-header .header-right .header-profile-content ul li a:hover {
    color: #C89B3C !important;
}

.social-links li a {
    background-color: #C89B3C !important;
}

    .social-links li a:hover {
        background-color: #A87E2A !important;
    }

.contact-pg-contact-section .icon i {
    color: #C89B3C !important;
}

/* ============ 18. Single Product Page ============ */
.product-details .product-single-content .product-filter-item.color.filter-size ul li input:checked ~ label {
    background: #4E3B2B !important;
}

.product-single-section .product-tab-area .main-tab button.active {
    color: #4E3B2B !important;
    border-bottom-color: #4E3B2B !important;
}

.comment-reply-link {
    background: #C89B3C !important;
}

    .comment-reply-link:hover {
        background: #A87E2A !important;
    }

/* ============ 19. Cart Page ============ */
.cart-area .submit-btn-area button {
    background: #4E3B2B !important;
}

    .cart-area .submit-btn-area button:hover {
        background: #C89B3C !important;
    }

.cart-area .cart-wrap .action a {
    background: #4E3B2B !important;
}

    .cart-area .cart-wrap .action a:hover {
        background: #C89B3C !important;
    }

.cart-area .cart-product-list ul li.cart-b {
    color: #C89B3C !important;
}

/* ============ 20. Checkout Page ============ */
.checkout-area .coupon label {
    border-right-color: #C89B3C !important;
}

.checkout-area .s1.active-border .coupon-active label,
.checkout-area .s3.coupon-2 .coupon-3 label {
    border-top-color: #C89B3C !important;
}

.checkout-area .payment-area h2 span {
    color: #C89B3C !important;
}

.checkout-area .cout-order-area .oreder-item ul .o-bottom {
    color: #C89B3C !important;
}

/* ============ 21. Video / Media Controls ============ */
.about-section .video-holder .fi:before {
    color: #C89B3C !important;
}

/* ============ 22. Navigation & Links ============ */
.blog-sidebar .category-widget ul a:hover,
.blog-sidebar .recent-post-widget .post h4 a:hover,
.blog-sidebar .tag-widget ul li a:hover,
.blog-pg-section .details .read-more:hover,
.service-single-section .pagi ul a:hover {
    color: #A87E2A !important;
}

.blog-sidebar .tag-widget ul li a:hover {
    background: #C89B3C !important;
    color: #fff !important;
}

.projects-menu li a.current {
    background-color: #C89B3C !important;
}

/* ============ 23. User Panel - SMS OTP & Input Controls ============ */
.up-btn-sms,
.up-content .btn-outline-primary {
    background-color: rgba(200, 155, 60, 0.08) !important;
    border: 1.5px solid #C89B3C !important;
    color: #4E3B2B !important;
    border-radius: 8px !important;
    padding: 0.42rem 1.1rem !important;
    font-size: 0.87rem !important;
    font-weight: 600 !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    transition: all 0.25s ease !important;
}

    .up-btn-sms i,
    .up-content .btn-outline-primary i {
        color: #C89B3C;
        font-size: 1rem;
        transition: color 0.25s ease;
    }

    .up-btn-sms:hover,
    .up-content .btn-outline-primary:hover {
        background-color: #C89B3C !important;
        border-color: #C89B3C !important;
        color: #FFFFFF !important;
        box-shadow: 0 3px 12px rgba(200, 155, 60, 0.25);
    }

        .up-btn-sms:hover i,
        .up-content .btn-outline-primary:hover i {
            color: #FFFFFF !important;
        }

    .up-btn-sms:disabled,
    .up-content .btn-outline-primary:disabled {
        background-color: #EFE7D5 !important;
        border-color: #DCCEB3 !important;
        color: #8A7B6A !important;
        cursor: not-allowed !important;
        box-shadow: none !important;
    }

.up-otp-input {
    letter-spacing: 5px;
    font-size: 1.15rem !important;
    font-weight: 700;
    text-align: center;
    color: #4E3B2B !important;
    max-width: 230px;
}