/* ========================================
   SKIN CUSTOM - Beelongz Color Overrides
   Brand Color: #ff6c00 (Orange)
   Secondary: #0068a2 (Blue)
   
   Purpose: Site-specific color overrides NOT in bootstrap-overrides.css
   Load Order: After bootstrap-overrides.css, before custom.css
   
   NOTE: This file contains ONLY color/branding styles.
         Functional styles (layout, spacing, etc.) belong in custom.css
   ======================================== */

/* ----------------
   CSS Variables (Match bootstrap-overrides.css)
   ---------------- */
:root {
    --brand-primary: #ff6c00;
    --brand-secondary: #0068a2;
    --brand-success: #95c141;
}

/* ----------------
   Header Menu Colors
   ---------------- */
.header.header-6 .header-bottom .menu>li:hover>a, 
.header.header-6 .header-bottom .menu>li:focus>a, 
.header.header-6 .header-bottom .menu>li.active>a {
    color: var(--brand-primary);
}

.menu li:hover > a,
.menu li.show > a,
.menu li.active > a {
    color: var(--brand-primary);
}

.header-bottom .menu>li>a::before {
    background-color: var(--brand-primary);
}

a,
a:hover,
a:focus {
    color: var(--brand-primary);
}

/* Ensure tab navigation uses brand orange */
.nav.nav-pills .nav-item.show .nav-link,
.nav.nav-pills .nav-item .nav-link.active {
    color: var(--brand-primary);
    border-bottom-color: var(--brand-primary);
}

.nav.nav-pills .nav-item.show .nav-link::before,
.nav.nav-pills .nav-item .nav-link.active::before,
.nav.nav-pills .nav-link:hover::before,
.nav.nav-pills .nav-link:focus::before {
    background-color: var(--brand-primary);
}

.nav.nav-border-anim .nav-link::before {
    background-color: var(--brand-primary);
}

/* ----------------
   Dropdown Cart Button Colors
   ---------------- */
.dropdown-cart-action a.btn.btn-outline-primary-2:hover, 
.dropdown-cart-action a.btn.btn-outline-primary-2:focus {
    color: #fff !important;
}

.dropdown-cart-action a.btn.btn-primary {
    color: #fff;
}

/* ----------------
   Dropdown Item Colors (Blue secondary color)
   ---------------- */
.dropdown-item.active, 
.dropdown-item:active, 
.dropdown-item:focus, 
.dropdown-item:hover {
    background-color: var(--brand-secondary);
    color: #fff;
}

/* ----------------
   Order Title Color
   ---------------- */
.order-title {
    color: var(--brand-primary);
}

/* ----------------
   Custom Button Colors
   ---------------- */
.btn-points-use {
    border: 1px solid var(--brand-primary);
    color: white;
    background-color: var(--brand-primary);
}

.btn-points-use:hover {
    background-color: #fff;
    color: var(--brand-primary);
}

/* ----------------
   Table Order Colors
   ---------------- */
.unpaid-details .btn-outline-primary-2, 
.order-details .btn-outline-primary-2, 
.sending-details .btn-outline-primary-2, 
.received-details .btn-outline-primary-2, 
.cancelled-details .btn-outline-primary-2 {
    background-color: var(--brand-primary);
    color: #fff;
}

.unpaid-details .btn-outline-primary-2:hover, 
.unpaid-details .btn-outline-primary-2:focus,
.order-details .btn-outline-primary-2:hover, 
.order-details .btn-outline-primary-2:focus,
.sending-details .btn-outline-primary-2:hover, 
.sending-details .btn-outline-primary-2:focus,
.received-details .btn-outline-primary-2:hover, 
.received-details .btn-outline-primary-2:focus,
.cancelled-details .btn-outline-primary-2:hover, 
.cancelled-details .btn-outline-primary-2:focus {
    background-color: #fdf9ed;
    color: var(--brand-primary);
}

/* ----------------
   Voucher Badge Colors
   ---------------- */
.available-voucher-bar {
    background: var(--brand-success);
    color: white;
}

.expire-voucher-bar {
    background: #adadad;
    color: white;
}

/* ----------------
   Product Button Colors
   ---------------- */
.btn-product.btn-cart:hover span, 
.btn-product.btn-cart:focus span {
    color: #fff;
}

/* ----------------
   Edit Address Button Color
   ---------------- */
a.edit-address.btn.btn-outline-primary-2.btn-order:hover {
    color: white !important;
}

/* ----------------
   Policy Text Color
   ---------------- */
.rules-term {
    color: #333;
}

/* ========================================
   END SKIN CUSTOM
   ======================================== */