/* ============================================================
   Optishop 2k26 — Styles spécifiques à la division
   Couleur accent : --clr-optishop (#F5BF1F)
   ============================================================ */

/* ---- Navbar ---- */
.navbar {
    border-top:    1px solid var(--clr-optishop);
    border-bottom: 1px solid var(--clr-optishop);
}
.navbar nav a i     { color: var(--clr-optishop); }
.navbar nav a:hover { color: var(--clr-optishop); }

/* ---- Z-index : navbar au-dessus de tout le reste ---- */
.navbar,
.navbar[class*="uk-sticky"] {
    z-index: 980 !important;
}
.uk-navbar-dropdown,
.uk-navbar-dropdown[class*="uk-open"] {
    z-index: 1050 !important;
}
.search-bar-hero,
.search-bar-hero[class*="uk-sticky"] {
    z-index: 10 !important;
}

/* ---- Navbar dropdown catégories (megamenu) ---- */
.uk-navbar-dropdown {
    background: var(--clr-light2);
    border-top: 3px solid var(--clr-optishop);
    border-radius: 0 0 12px 12px;
    box-shadow: 0 8px 24px rgba(0,0,0,.12);
    padding: .75rem 1.25rem 1rem;
    max-height: calc(100vh - 120px);
    overflow-y: auto;
    top:45px !important;
}
.uk-navbar-dropdown .uk-nav-header {
    color: var(--clr-optigroup);
    font-weight: 700;
    font-size: 1rem;
    border-bottom: 1px solid #e0e0e0;
    padding-bottom: .3rem;
    margin-bottom: .5rem;
    text-transform: uppercase;
    font-family: 'Poppins', sans-serif;
}
.uk-navbar-dropdown .uk-nav-header a{
    font-weight:bold;
}
.uk-navbar-dropdown .uk-navbar-dropdown-nav a {
    color: var(--clr-dark);
    font-size: .9rem;
    padding: .1rem 0;
    transition: color .2s;
    min-height:26px;
}
/* Réduit l'espace entre les items de la liste */
.uk-navbar-dropdown .uk-navbar-dropdown-nav > li {
    margin-bottom: .05rem;
}
.uk-navbar-dropdown .uk-navbar-dropdown-nav a:hover {
    color: var(--clr-optishop);
}
.uk-navbar-dropdown .uk-navbar-dropdown-nav a i {
    color: var(--clr-optishop);
    margin-right: .3rem;
}

/* ---- Slider ---- */
.slide .overlay-shop {
    background: rgba(245, 191, 31, 0.12);
}

/* ---- Section accueil catégories ---- */
.home-categories {
    padding: 3rem 2rem;
    background: var(--clr-light);
}
.home-categories h2 {
    color: var(--clr-dark2);
    font-size: 2.25rem;
    font-weight: 700;
    margin-bottom: 2rem;
}
.home-categories .uk-heading-line > ::after,
.home-categories .uk-heading-line > ::before {
    border-bottom: 1px solid var(--clr-optishop) !important;
    top: 30px;
}
.cat-icon-card {
    border: none;
    border-radius: 16px;
    background: #fff;
    text-align: center;
    padding: 1.5rem 1rem;
    transition: transform .3s ease, box-shadow .3s ease;
    box-shadow: 2px 2px 8px rgba(0,0,0,.07);
    cursor: pointer;
}
.cat-icon-card:hover {
    transform: translateY(-4px);
    box-shadow: 4px 8px 20px rgba(0,0,0,.13);
}
.cat-icon-card i {
    font-size: 2.5rem;
    color: var(--clr-optishop);
    display: block;
    margin-bottom: .75rem;
}
.cat-icon-card span {
    font-size: 1rem;
    font-weight: 600;
    color: var(--clr-dark);
}
.cat-icon-card a {
    text-decoration: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    color: inherit;
}

/* ---- Section promotions / nouveautés ---- */
.home-products {
    padding: 3rem 2rem;
    background: var(--clr-light2);
}
.home-products h2 {
    color: var(--clr-dark2);
    font-size: 2.25rem;
    font-weight: 700;
    margin-bottom: 2rem;
}
.home-products.promos h2   { color: var(--clr-optishop); }
.home-products .uk-heading-line > ::after,
.home-products .uk-heading-line > ::before {
    border-bottom: 1px solid var(--clr-optishop) !important;
    top: 30px;
}

/* ---- Produits: product cards grid ---- */
.products-grid { padding: 2rem; background: var(--clr-light); }

/* ---- Sidebar filtres ---- */
.sidebar-filters {
    background: var(--clr-light2);
    border-radius: 16px;
    padding: 1.25rem;
    box-shadow: 2px 2px 8px rgba(0,0,0,.06);
    border-top: 3px solid var(--clr-optishop);
}
.sidebar-filters h3 {
    color: var(--clr-optigroup);
    font-size: 1.25rem;
    font-weight: 700;
    margin-bottom: 1rem;
}
.sidebar-filters h4 {
    color: var(--clr-dark2);
    font-size: 1rem;
    font-weight: 700;
    margin-bottom: .5rem;
    text-transform: uppercase;
    font-size: .9rem;
    border-bottom: 1px solid #e0e0e0;
    padding-bottom: .3rem;
}
.sidebar-filters .uk-checkbox:checked { background-color: var(--clr-optishop); border-color: var(--clr-optishop); }
.filter-apply {
    background: var(--clr-optishop);
    color: var(--clr-dark);
    border: none; border-radius: 50px;
    font-weight: bold; padding: .5rem 1.5rem;
    width: 100%; cursor: pointer;
    transition: background .3s;
}
.filter-apply:hover { background: #e0ac00; }

/* ---- Pagination ---- */
.uk-pagination .uk-active > * {
    background: var(--clr-optishop);
    color: var(--clr-dark) !important;
    border-radius: 6px;
}
.uk-pagination a:hover { color: var(--clr-optishop) !important; }

/* ---- Fiche produit ---- */
.product-detail {
    padding: 2rem;
    background: var(--clr-light);
}
.product-detail .product-price-incl {
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--clr-dark);
    font-family: 'Poppins', sans-serif;
}
.product-detail .product-price-excl {
    font-size: 1.1rem;
    color: var(--clr-dark2);
}
.product-detail .product-price-old {
    text-decoration: line-through;
    color: var(--clr-dark2);
    font-size: 1.5rem;
}
.product-detail .add-to-cart-btn {
    background: var(--clr-optishop);
    color: var(--clr-dark);
    border: none; border-radius: 50px;
    font-weight: bold; font-size: 1.25rem;
    padding: .75rem 2rem;
    transition: background .3s, transform .2s;
    cursor: pointer;
}
.product-detail .add-to-cart-btn:hover {
    background: #e0ac00;
    transform: scale(1.02);
}
.product-detail .stock-badge {
    display: inline-flex; align-items: center; gap: .4rem;
    font-weight: 600; font-size: 1rem;
    padding: .3rem .8rem; border-radius: 20px;
}
.stock-badge.in-stock  { background: #d4edda; color: #155724; }
.stock-badge.on-order  { background: #fff3cd; color: #856404; }
.product-detail .specs-table th {
    background: var(--clr-light2);
    color: var(--clr-dark2);
    font-weight: 600;
    width: 35%;
}
.product-detail .uk-tab > li.uk-active > a {
    color: var(--clr-dark);
    border-color: var(--clr-optishop);
}

/* ---- Panier ---- */
.cart-page {
    padding: 2rem;
    background: var(--clr-light);
    min-height: 60vh;
}
.cart-page h1 { color: var(--clr-dark2); font-size: 2rem; font-weight: 700; }
.cart-table th {
    background: var(--clr-light2);
    color: var(--clr-dark2);
    font-weight: 700;
    text-transform: uppercase;
    font-size: .9rem;
}
.cart-summary {
    background: var(--clr-light2);
    border-radius: 16px;
    border-top: 3px solid var(--clr-optishop);
    padding: 1.5rem;
}
.cart-summary .total-row {
    display: flex; justify-content: space-between;
    font-size: 1.1rem; padding: .4rem 0;
    border-bottom: 1px solid #e9ecef;
}
.cart-summary .grand-total {
    font-size: 1.5rem; font-weight: 700;
    color: var(--clr-dark);
    border-bottom: none !important;
    padding-top: .8rem;
}
.btn-checkout {
    display: block;
    background: var(--clr-optishop);
    color: var(--clr-dark);
    border: none; border-radius: 50px;
    font-weight: bold; font-size: 1.15rem;
    padding: .85rem 2rem;
    width: 100%; box-sizing: border-box;
    cursor: pointer;
    transition: background .3s;
    text-align: center; text-decoration: none;
}
.btn-checkout:hover { background: #e0ac00; color: var(--clr-dark) !important; }

/* ---- Commande / Checkout ---- */
.checkout-page {
    padding: 2rem;
    background: var(--clr-light);
    min-height: 60vh;
}
.checkout-steps {
    display: flex; gap: 1rem;
    margin-bottom: 2rem; align-items: center;
}
.checkout-step {
    display: flex; align-items: center; gap: .5rem;
    font-weight: 600; color: var(--clr-dark2); font-size: 1rem;
}
.checkout-step.active { color: var(--clr-dark); }
.checkout-step .step-num {
    width: 28px; height: 28px;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: .85rem; font-weight: 700;
    background: var(--clr-light2); color: var(--clr-dark2);
    border: 2px solid #ccc;
}
.checkout-step.active .step-num {
    background: var(--clr-optishop);
    color: var(--clr-dark);
    border-color: var(--clr-optishop);
}
.checkout-step.done .step-num {
    background: var(--clr-optigroup);
    color: white;
    border-color: var(--clr-optigroup);
}
.checkout-sep { flex: 1; height: 2px; background: #ddd; }

/* ---- Compte client ---- */
.account-page {
    padding: 2rem;
    background: var(--clr-light);
    min-height: 60vh;
}
.account-nav .uk-tab > li.uk-active > a {
    color: var(--clr-dark);
    border-color: var(--clr-optishop);
}
.order-status-badge {
    display: inline-block; font-size: .8rem;
    font-weight: 700; padding: .2rem .7rem;
    border-radius: 20px; text-transform: uppercase;
}
.badge-pending    { background: #fff3cd; color: #856404; }
.badge-paid       { background: #d4edda; color: #155724; }
.badge-processing { background: #cce5ff; color: #004085; }
.badge-shipped    { background: #d1ecf1; color: #0c5460; }
.badge-delivered  { background: #d4edda; color: #155724; }
.badge-cancelled  { background: #f8d7da; color: #721c24; }
.badge-refunded   { background: #e2e3e5; color: #383d41; }

/* ---- Footer Optishop ---- */
.footer i { color: var(--clr-optishop) !important; }
.footer .social-ico a i:hover { color: var(--clr-optigroup) !important; }

/* ---- Search bar inline ---- */
.search-bar-hero {
    background: var(--clr-light2);
    border-top: 1px solid var(--clr-optishop);
    border-bottom: 1px solid var(--clr-optishop);
    padding: 1.5rem 2rem;
    background-image: repeating-linear-gradient(45deg, #FFF8DC 0, #FFF8DC 1.5px, #f1f1f1 0, #f1f1f1 50%);
    background-size: 15px 15px;
}
.search-bar-hero input[type=text] {
    border-radius: 50px 0 0 50px;
    border: 1px solid var(--clr-optishop);
    border-right: none;
    padding: .6rem 1.25rem;
    font-size: 1.1rem;
    width: 100%;
    outline: none;
}
.search-bar-hero button {
    border-radius: 0 50px 50px 0;
    background: var(--clr-optishop);
    color: var(--clr-dark);
    border: 2px solid var(--clr-optishop);
    padding: .6rem 1.5rem;
    font-weight: bold; font-size: 1.1rem;
    cursor: pointer; transition: background .3s;
}
.search-bar-hero button:hover { background: #e0ac00; }

/* ---- Responsive ---- */
@media screen and (max-width: 959px) {
    .home-categories, .home-products, .products-grid,
    .cart-page, .checkout-page, .account-page, .product-detail {
        padding: 1.5rem 1rem;
    }
    .product-detail .product-price-incl { font-size: 2rem; }
}