/*
 * Product Detail Page — Zulily Color Alignment
 * Matches: https://www.zulily.com/.../yumi-belize-wide
 */

/* ============================================
   1. Bootstrap/CSS variable overrides
   ============================================ */
:root {
    --primary:     #87189d;
    --hov-primary:  #6a1380;
    --soft-primary: rgba(135, 24, 157, 0.12);
    --secondary:    #6b6b6b;
    --soft-secondary: rgba(107, 107, 107, 0.10);
    --link-color:   #782291;
}

/* ============================================
   2. Product detail page — container & layout
   ============================================ */
.product-detail-section {
    background-color: #ffffff;
}

.product-detail-section .bg-white {
    background-color: #ffffff !important;
    box-shadow: none !important;
    border-radius: 0 !important;
}

/* ============================================
   3. Product title
   ============================================ */
.product-detail-section h1.fs-20,
.product-detail-section .product-title {
    font-family: 'Belltown', 'Proxima Nova', Arial, sans-serif;
    font-weight: 700;
    font-size: 2rem;
    color: #212121;
    line-height: 1.25;
    letter-spacing: -0.01em;
}

/* ============================================
   4. Rating stars
   ============================================ */
.product-detail-section .rating i,
.product-detail-section .rating .fa-star,
.product-detail-section .rating .fas {
    color: #f0a832 !important;
}

.product-detail-section .rating i.fa-star-half-alt,
.product-detail-section .rating .fas.fa-star-half-alt {
    color: #f0a832 !important;
}

.product-detail-section .rating i.fa-star-o,
.product-detail-section .rating .far.fa-star {
    color: #d0d0d0 !important;
}

/* ============================================
   5. Price — regular & discount
   ============================================ */
.product-detail-section .text-primary,
.product-detail-section .product-price .h2,
.product-detail-section .product-price .h4,
.product-detail-section #chosen_price {
    color: #212121 !important;
    font-weight: 700;
}

.product-detail-section del,
.product-detail-section .opacity-60 del,
.product-detail-section .fs-20.opacity-60 {
    color: #6b6b6b !important;
}

/* ============================================
   6. Buttons — Add to Cart & Buy Now
   ============================================ */
.product-detail-section .btn-primary,
.product-detail-section .buy-now {
    background-color: #87189d !important;
    border-color:     #87189d !important;
    color: #ffffff !important;
    border-radius: 8px;
    font-weight: 700;
    letter-spacing: 0.04em;
    transition: background-color 0.2s ease, border-color 0.2s ease;
}

.product-detail-section .btn-primary:hover,
.product-detail-section .btn-primary:focus,
.product-detail-section .btn-primary:active,
.product-detail-section .buy-now:hover,
.product-detail-section .buy-now:focus,
.product-detail-section .buy-now:active {
    background-color: #6a1380 !important;
    border-color:     #6a1380 !important;
    color: #ffffff !important;
    box-shadow: 0 4px 12px rgba(135, 24, 157, 0.35) !important;
}

/* ============================================
   7. Buttons — Add to Cart (soft variant)
   ============================================ */
.product-detail-section .btn-soft-primary,
.product-detail-section .add-to-cart {
    background-color: #f3e8f7 !important;
    border: 2px solid #87189d !important;
    color: #87189d !important;
    border-radius: 8px;
    font-weight: 700;
    letter-spacing: 0.04em;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.product-detail-section .btn-soft-primary:hover,
.product-detail-section .btn-soft-primary:focus,
.product-detail-section .btn-soft-primary:active,
.product-detail-section .add-to-cart:hover,
.product-detail-section .add-to-cart:focus,
.product-detail-section .add-to-cart:active {
    background-color: #87189d !important;
    border-color:     #87189d !important;
    color: #ffffff !important;
}

/* ============================================
   8. Out of Stock button
   ============================================ */
.product-detail-section .out-of-stock {
    background-color: #9e9e9e !important;
    border-color:     #9e9e9e !important;
    color: #ffffff !important;
    border-radius: 8px;
    font-weight: 700;
    cursor: not-allowed;
}

/* ============================================
   9. Secondary / outline buttons
   ============================================ */
.product-detail-section .btn-secondary,
.product-detail-section .btn-outline-secondary {
    border-color: #d0d0d0 !important;
    color: #212121 !important;
    background-color: #ffffff !important;
    border-radius: 8px;
    font-weight: 600;
}

.product-detail-section .btn-secondary:hover,
.product-detail-section .btn-outline-secondary:hover {
    background-color: #f5f5f5 !important;
    border-color: #b0b0b0 !important;
}

/* ============================================
   10. Color swatches (radio selection)
   ============================================ */
.product-detail-section .aiz-megabox input[type="radio"]:checked + span,
.product-detail-section .aiz-radio-inline input[type="radio"]:checked + span {
    border: 2px solid #87189d !important;
    box-shadow: 0 0 0 2px #87189d;
}

.product-detail-section .aiz-megabox input[type="radio"] + span:hover,
.product-detail-section .aiz-radio-inline input[type="radio"] + span:hover {
    border-color: #87189d !important;
}

/* ============================================
   11. Quantity controls
   ============================================ */
.product-detail-section .product-quantity .btn-light {
    background-color: #f5f5f5 !important;
    border-color: #e0e0e0 !important;
    color: #212121 !important;
}

.product-detail-section .product-quantity .btn-light:hover {
    background-color: #e8e8e8 !important;
}

.product-detail-section .product-quantity input.input-number {
    border-color: #e0e0e0 !important;
    color: #212121 !important;
    font-weight: 600;
}

/* ============================================
   12. Link buttons (wishlist, compare)
   ============================================ */
.product-detail-section .btn-link {
    color: #782291 !important;
    font-weight: 600;
    font-size: 0.95rem;
}

.product-detail-section .btn-link:hover {
    color: #5a1a70 !important;
    text-decoration: underline;
}

/* ============================================
   13. Text labels & muted text
   ============================================ */
.product-detail-section .opacity-50,
.product-detail-section .text-muted {
    color: #757575 !important;
    font-size: 0.95rem;
}

.product-detail-section .opacity-60 {
    color: #6b6b6b !important;
}

/* ============================================
   14. Dividers / hr
   ============================================ */
.product-detail-section hr {
    border-color: #f0f0f0;
}

/* ============================================
   15. Seller card / shop info
   ============================================ */
.product-detail-section .bg-white.shadow-sm {
    background-color: #ffffff !important;
    border: 1px solid #f0f0f0;
    border-radius: 8px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06) !important;
}

/* ============================================
   16. Reviews section
   ============================================ */
.product-detail-section .review-section {
    border-top: 1px solid #f0f0f0;
    padding-top: 1.5rem;
    margin-top: 1.5rem;
}

.product-detail-section .review-card {
    border: 1px solid #eeeeee;
    border-radius: 8px;
    padding: 1rem;
    margin-bottom: 1rem;
    background: #fafafa;
}

/* ============================================
   17. Tab navigation (Bootstrap .nav-tabs + AIZ .aiz-nav-tabs)
   ============================================ */
.product-detail-section .nav-tabs .nav-link,
.product-detail-section .aiz-nav-tabs a {
    color: #757575 !important;
    font-weight: 600;
    border-bottom: 2px solid transparent;
    transition: color 0.2s, border-color 0.2s;
}

.product-detail-section .nav-tabs .nav-link.active,
.product-detail-section .nav-tabs .nav-link:hover,
.product-detail-section .aiz-nav-tabs a.active,
.product-detail-section .aiz-nav-tabs a:hover {
    color: #87189d !important;
    border-bottom-color: #87189d;
}

.product-detail-section .nav-tabs,
.product-detail-section .aiz-nav-tabs {
    border-bottom: 1px solid #f0f0f0;
}

/* ============================================
   18. Related products section
   ============================================ */
.product-detail-section .related-products .product-card {
    border: 1px solid #f0f0f0;
    border-radius: 8px;
    overflow: hidden;
    transition: box-shadow 0.2s ease;
}

.product-detail-section .related-products .product-card:hover {
    box-shadow: 0 4px 16px rgba(135, 24, 157, 0.12);
}

.product-detail-section .related-products .product-card .btn-add-cart {
    background-color: #87189d;
    color: #ffffff;
    border-radius: 6px;
    font-weight: 600;
}

/* ============================================
   19. Refund / policy badges
   ============================================ */
.product-detail-section .refund-badge img {
    border-radius: 4px;
}

/* ============================================
   20. Stock availability text
   ============================================ */
.product-detail-section .avialable-amount {
    color: #6b6b6b !important;
    font-size: 0.9rem;
}

/* ============================================
   21. Flash sale / countdown (if present on PDP)
   ============================================ */
.product-detail-section .flashsale-label {
    background-color: #f3e8f7;
    color: #87189d;
    font-weight: 700;
    border-radius: 999px;
    padding: 4px 12px;
    font-size: 0.85rem;
}

/* ============================================
   22. Breadcrumb
   ============================================ */
.product-detail-section .breadcrumb {
    background: transparent;
    padding: 0;
}

.product-detail-section .breadcrumb-item a {
    color: #757575 !important;
    font-size: 0.9rem;
}

.product-detail-section .breadcrumb-item + .breadcrumb-item::before {
    color: #bdbdbd;
}

.product-detail-section .breadcrumb-item.active {
    color: #212121 !important;
    font-size: 0.9rem;
}

/* ============================================
   23. Description tabs / product info
   ============================================ */
.product-detail-section .product-info-tabs .tab-pane {
    color: #424242;
    font-size: 1rem;
    line-height: 1.7;
}

.product-detail-section .product-info-tabs .table th {
    color: #757575;
    font-weight: 600;
    font-size: 0.9rem;
}

.product-detail-section .product-info-tabs .table td {
    color: #212121;
    font-size: 0.95rem;
}

/* ============================================
   24. Brand logo area
   ============================================ */
.product-detail-section .brand-logo img {
    max-height: 36px;
    object-fit: contain;
}

/* ============================================
   25. Message seller button
   ============================================ */
.product-detail-section .btn-soft-primary {
    /* Already defined above, reinforcing here */
    color: #87189d;
    background-color: #f3e8f7;
    border: 1px solid #87189d;
    border-radius: 6px;
    font-weight: 600;
    font-size: 0.9rem;
}

.product-detail-section .btn-soft-primary:hover {
    background-color: #87189d;
    color: #ffffff;
}

/* ============================================
   26. Club point badge
   ============================================ */
.product-detail-section .bg-soft-primary {
    background-color: rgba(135, 24, 157, 0.10) !important;
    border-color: rgba(135, 24, 157, 0.20) !important;
    color: #87189d !important;
    font-weight: 600;
}

/* ============================================
   27. AIZ carousel thumbnails (gallery)
   ============================================ */
.product-detail-section .product-gallery-thumb .carousel-box {
    border-color: #e8e8e8 !important;
    transition: border-color 0.2s;
}

.product-detail-section .product-gallery-thumb .carousel-box.selected,
.product-detail-section .product-gallery-thumb .carousel-box:hover {
    border-color: #87189d !important;
}

/* ============================================
   28. Share buttons
   ============================================ */
.product-detail-section .aiz-share a {
    color: #757575;
    font-size: 1.4rem;
    margin-right: 12px;
    transition: color 0.2s;
}

.product-detail-section .aiz-share a:hover {
    color: #87189d;
}

/* ============================================
   29. Modal — Add to Cart popup
   ============================================ */
#addToCart .modal-content {
    border-radius: 12px;
    border: none;
}

#addToCart .modal-header {
    border-bottom: 1px solid #f0f0f0;
    background: #ffffff;
}

#addToCart .modal-title {
    color: #212121;
    font-weight: 700;
}

#addToCart .btn-primary {
    background-color: #87189d !important;
    border-color: #87189d !important;
    border-radius: 8px;
    font-weight: 700;
}

#addToCart .btn-primary:hover {
    background-color: #6a1380 !important;
    border-color: #6a1380 !important;
}

/* ============================================
   30. Wholesale table
   ============================================ */
.product-detail-section .aiz-table thead {
    background-color: #f9f3fb;
}

.product-detail-section .aiz-table th {
    color: #87189d;
    font-weight: 700;
    font-size: 0.9rem;
}

.product-detail-section .aiz-table td {
    color: #424242;
    font-size: 0.95rem;
}

/* ============================================
   31. Non-homepage nav — top navbar (nav.blade.php)
   Homepage excluded via: body:not(.page-home)
   ============================================ */
body:not(.page-home) .top-navbar {
    background-color: #ffffff !important;
    border-bottom: 1px solid #eeeeee;
}

body:not(.page-home) .top-navbar .list-inline-item a,
body:not(.page-home) .top-navbar .list-inline-item .dropdown-toggle {
    color: #424242 !important;
    font-size: 0.9rem;
}

body:not(.page-home) .top-navbar .list-inline-item a:hover,
body:not(.page-home) .top-navbar .list-inline-item .dropdown-toggle:hover {
    color: #87189d !important;
}

/* ============================================
   32. Non-homepage header search bar (nav.blade.php)
   ============================================ */
body:not(.page-home) .front-header-search {
    background-color: #ffffff !important;
    border: 1px solid #d0d0d0;
    border-radius: 8px;
    overflow: hidden;
}

body:not(.page-home) .front-header-search .form-control {
    background-color: #ffffff;
    border: none;
    color: #212121;
    font-size: 0.95rem;
    padding: 10px 14px;
    border-radius: 0;
    box-shadow: none;
}

body:not(.page-home) .front-header-search .form-control::placeholder {
    color: #9e9e9e;
}

body:not(.page-home) .front-header-search .form-control:focus {
    border: none;
    box-shadow: none;
    outline: none;
    background-color: #ffffff;
}

body:not(.page-home) .front-header-search .input-group-append .btn-primary {
    background-color: #87189d !important;
    border-color: #87189d !important;
    color: #ffffff !important;
    border-radius: 0 6px 6px 0;
    transition: background-color 0.2s ease;
}

body:not(.page-home) .front-header-search .input-group-append .btn-primary:hover {
    background-color: #6a1380 !important;
    border-color: #6a1380 !important;
}

body:not(.page-home) .front-header-search .input-group-append .btn-primary i {
    color: #ffffff !important;
}

/* ============================================
   33. Search dropdown / autocomplete results
   ============================================ */
.typed-search-box {
    border: 1px solid #eeeeee;
    border-radius: 8px !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.10) !important;
    background-color: #ffffff !important;
    z-index: 1050;
}

.typed-search-box .search-suggestion-group-title {
    color: #87189d;
    font-weight: 700;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.typed-search-box .auto-search-box a {
    color: #212121;
    font-size: 0.95rem;
    padding: 10px 16px;
    display: block;
    border-bottom: 1px solid #f5f5f5;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.typed-search-box .auto-search-box a:hover,
.typed-search-box .auto-search-box a:focus {
    background-color: #f9f3fb;
    color: #87189d;
    text-decoration: none;
}

.typed-search-box .auto-search-box a:last-child {
    border-bottom: none;
}

.typed-search-box .product-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 16px;
    border-bottom: 1px solid #f5f5f5;
}

.typed-search-box .product-item:hover {
    background-color: #f9f3fb;
}

.typed-search-box .product-item img {
    width: 48px;
    height: 48px;
    object-fit: cover;
    border-radius: 4px;
    border: 1px solid #eeeeee;
}

.typed-search-box .product-item .product-name {
    color: #212121;
    font-weight: 500;
    font-size: 0.9rem;
}

.typed-search-box .product-item .product-price {
    color: #87189d;
    font-weight: 700;
    font-size: 0.9rem;
}

.typed-search-box .search-preloader .dot-loader > div {
    background-color: #87189d;
}

/* ============================================
   34. Cart box / wishlist / compare icons (non-homepage)
   ============================================ */

/* ── Cart icon ── */
body:not(.page-home) #cart_items .nav-box-icon {
    color: #424242 !important;
    font-size: 1.4rem;
    transition: color 0.2s ease;
}

body:not(.page-home) #cart_items:hover .nav-box-icon,
body:not(.page-home) #cart_items:focus-within .nav-box-icon {
    color: #87189d !important;
}

/* Cart count badge */
body:not(.page-home) #cart_items .cart-count,
body:not(.page-home) #cart_items .aiz-top-cart-count {
    background-color: #87189d !important;
    color: #ffffff !important;
    font-size: 0.65rem;
    font-weight: 700;
    border-radius: 999px;
    padding: 2px 6px;
    min-width: 18px;
    text-align: center;
    line-height: 1.2;
    border: none;
}

/* ── Compare icon & badge (inside #compare) ── */
body:not(.page-home) #compare .la-refresh {
    color: #424242 !important;
    font-size: 1.4rem;
    transition: color 0.2s ease;
}

body:not(.page-home) #compare:hover .la-refresh {
    color: #87189d !important;
}

body:not(.page-home) #compare .badge-primary {
    background-color: #87189d !important;
    color: #ffffff !important;
    font-size: 0.65rem;
    font-weight: 700;
    border-radius: 999px;
    padding: 2px 6px;
    min-width: 18px;
    text-align: center;
    line-height: 1.2;
    border: none;
}

/* ── Wishlist icon & badge (inside #wishlist) ── */
body:not(.page-home) #wishlist .la-heart-o,
body:not(.page-home) #wishlist .la-heart {
    color: #424242 !important;
    font-size: 1.4rem;
    transition: color 0.2s ease;
}

body:not(.page-home) #wishlist:hover .la-heart-o,
body:not(.page-home) #wishlist:hover .la-heart {
    color: #87189d !important;
}

body:not(.page-home) #wishlist .badge-primary {
    background-color: #87189d !important;
    color: #ffffff !important;
    font-size: 0.65rem;
    font-weight: 700;
    border-radius: 999px;
    padding: 2px 6px;
    min-width: 18px;
    text-align: center;
    line-height: 1.2;
    border: none;
}

/* ── Cart dropdown panel ── */
body:not(.page-home) #cart_items .dropdown-menu {
    border: 1px solid #eeeeee;
    border-radius: 10px;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
    padding: 0;
    min-width: 320px;
    overflow: hidden;
}

body:not(.page-home) #cart_items .dropdown-menu .fs-15.fw-600 {
    color: #212121;
    font-weight: 700 !important;
    font-size: 0.9rem !important;
}

body:not(.page-home) #cart_items .dropdown-menu .list-group-item {
    border-color: #f5f5f5;
    padding: 12px 16px;
}

body:not(.page-home) #cart_items .dropdown-menu .list-group-item .fw-600 {
    color: #212121;
    font-size: 0.9rem;
}

body:not(.page-home) #cart_items .dropdown-menu .list-group-item .minw-0 .opacity-60 {
    color: #6b6b6b;
    font-size: 0.85rem;
}

body:not(.page-home) #cart_items .dropdown-menu .btn-soft-primary {
    background-color: #f3e8f7 !important;
    color: #87189d !important;
    border: 1px solid #87189d;
    border-radius: 6px;
    font-weight: 600;
    font-size: 0.85rem;
    transition: background-color 0.2s ease, color 0.2s ease;
}

body:not(.page-home) #cart_items .dropdown-menu .btn-soft-primary:hover {
    background-color: #87189d !important;
    color: #ffffff !important;
}

body:not(.page-home) #cart_items .dropdown-menu .btn-primary {
    background-color: #87189d !important;
    border-color: #87189d !important;
    border-radius: 6px;
    font-weight: 700;
    font-size: 0.85rem;
    transition: background-color 0.2s ease;
}

body:not(.page-home) #cart_items .dropdown-menu .btn-primary:hover {
    background-color: #6a1380 !important;
    border-color: #6a1380 !important;
}

body:not(.page-home) #cart_items .dropdown-menu .btn-sm {
    padding: 6px 16px;
}

body:not(.page-home) #cart_items .dropdown-menu .la-frown {
    color: #cccccc !important;
}

body:not(.page-home) #cart_items .dropdown-menu .h6 {
    color: #424242;
    font-weight: 600;
}

/* Subtotal in cart dropdown */
body:not(.page-home) #cart_items .dropdown-menu .border-top {
    border-color: #f0f0f0 !important;
}

body:not(.page-home) #cart_items .dropdown-menu .border-top .fw-600 {
    color: #212121;
}

/* ============================================
   35. Nav dropdown menus (language, currency)
   ============================================ */
body:not(.page-home) .top-navbar .dropdown-menu {
    border: 1px solid #eeeeee;
    border-radius: 8px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.10);
    padding: 4px 0;
}

body:not(.page-home) .top-navbar .dropdown-menu .dropdown-item {
    color: #424242;
    font-size: 0.9rem;
    padding: 8px 16px;
    transition: background-color 0.15s ease, color 0.15s ease;
}

body:not(.page-home) .top-navbar .dropdown-menu .dropdown-item:hover,
body:not(.page-home) .top-navbar .dropdown-menu .dropdown-item:focus,
body:not(.page-home) .top-navbar .dropdown-menu .dropdown-item.active {
    background-color: #f9f3fb;
    color: #87189d;
}

body:not(.page-home) .top-navbar .dropdown-menu .dropdown-item img {
    width: 16px;
    height: 12px;
    margin-right: 8px;
    border-radius: 2px;
}

/* ============================================
   36. Category menu sidebar (non-homepage hover)
   ============================================ */
body:not(.page-home) .hover-category-menu {
    background-color: #ffffff;
    border: 1px solid #eeeeee;
    border-top: none;
    border-radius: 0 0 8px 8px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
}

body:not(.page-home) .hover-category-menu .category-sidebar-link {
    color: #424242;
    font-size: 0.9rem;
    padding: 8px 16px;
    display: block;
    transition: background-color 0.15s ease, color 0.15s ease;
}

body:not(.page-home) .hover-category-menu .category-sidebar-link:hover {
    background-color: #f9f3fb;
    color: #87189d;
    text-decoration: none;
}

body:not(.page-home) .hover-category-menu .category-sidebar-link.active {
    background-color: #f9f3fb;
    color: #87189d;
    font-weight: 600;
}

/* ============================================
   37. Product listing page (product_listing.blade.php)
   ============================================ */
.product-listing-section .aiz-filter-sidebar {
    background-color: #ffffff;
}

.product-listing-section .aiz-filter-sidebar .bg-white {
    background-color: #ffffff !important;
    border-radius: 8px;
    border: 1px solid #eeeeee;
}

.product-listing-section .aiz-filter-sidebar .fs-15.fw-600 {
    color: #212121;
    font-weight: 700 !important;
    font-size: 0.9rem !important;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.product-listing-section .aiz-filter-sidebar .aiz-checkbox label {
    color: #424242;
    font-size: 0.9rem;
}

.product-listing-section .aiz-filter-sidebar .aiz-checkbox input[type="checkbox"]:checked + .aiz-square-check {
    background-color: #87189d;
    border-color: #87189d;
}

.product-listing-section .aiz-filter-sidebar .aiz-checkbox input[type="checkbox"]:checked + .aiz-square-check::after {
    border-color: #ffffff;
}

.product-listing-section .aiz-filter-sidebar .aiz-megabox input[type="radio"]:checked + span {
    border-color: #87189d !important;
    box-shadow: 0 0 0 2px #87189d;
}

.product-listing-section .aiz-filter-sidebar .aiz-megabox input[type="radio"] + span:hover {
    border-color: #87189d !important;
}

/* Sort / filter dropdown */
.product-listing-section .aiz-selectpicker,
.product-listing-section select.form-control {
    border-color: #d0d0d0 !important;
    color: #424242;
    font-size: 0.9rem;
    border-radius: 6px;
    background-color: #ffffff;
}

.product-listing-section .aiz-selectpicker:focus,
.product-listing-section select.form-control:focus {
    border-color: #87189d !important;
    box-shadow: 0 0 0 3px rgba(135, 24, 157, 0.10) !important;
}

/* ============================================
   38. Filter toggle button (mobile)
   ============================================ */
.product-listing-section .btn-icon {
    color: #424242 !important;
    transition: color 0.2s ease;
}

.product-listing-section .btn-icon:hover {
    color: #87189d !important;
}

/* ============================================
   39. General links (non-homepage)
   ============================================ */
body:not(.page-home) .text-reset {
    color: #424242;
}

body:not(.page-home) .text-reset:hover {
    color: #87189d;
}

/* ============================================
   40. Header bottom menu strip (menu labels)
   ============================================ */
body:not(.page-home) .border-top.border-gray-200 {
    border-color: #eeeeee !important;
    background-color: #ffffff;
}

body:not(.page-home) .mobile-hor-swipe li a {
    color: #757575 !important;
    font-size: 0.9rem;
    font-weight: 600;
    transition: color 0.2s ease;
}

body:not(.page-home) .mobile-hor-swipe li a:hover {
    color: #87189d !important;
}

/* ============================================
   41. Footer (non-homepage)
   ============================================ */
body:not(.page-home) footer .footer-top {
    background-color: #f9f9f9;
    border-top: 1px solid #eeeeee;
}

body:not(.page-home) footer .footer-widget-title {
    color: #212121;
    font-weight: 700;
    font-size: 0.95rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 12px;
}

body:not(.page-home) footer .footer-links a {
    color: #757575;
    font-size: 0.9rem;
    transition: color 0.2s ease;
}

body:not(.page-home) footer .footer-links a:hover {
    color: #87189d;
}

body:not(.page-home) footer .footer-bottom {
    background-color: #ffffff;
    border-top: 1px solid #eeeeee;
    color: #9e9e9e;
    font-size: 0.85rem;
}

/* ============================================
   42. Pagination (non-homepage)
   ============================================ */
body:not(.page-home) .aiz-pagination .pagination .page-item .page-link {
    color: #757575;
    border-color: #eeeeee;
    font-size: 0.9rem;
    padding: 6px 12px;
    border-radius: 6px;
    transition: all 0.2s ease;
}

body:not(.page-home) .aiz-pagination .pagination .page-item .page-link:hover {
    background-color: #f9f3fb;
    border-color: #87189d;
    color: #87189d;
}

body:not(.page-home) .aiz-pagination .pagination .page-item.active .page-link {
    background-color: #87189d;
    border-color: #87189d;
    color: #ffffff;
    font-weight: 700;
}

/* ============================================
   43. Category / Product Listing Page (product_listing.blade.php)
   Matches: https://www.zulily.com/collections/fashion-accessories
   ============================================ */

/* ── Breadcrumb ── */
.product-listing-section .breadcrumb {
    background: transparent;
    padding: 0;
}

.product-listing-section .breadcrumb-item a {
    color: #757575 !important;
    font-size: 0.9rem;
}

.product-listing-section .breadcrumb-item + .breadcrumb-item::before {
    color: #bdbdbd;
}

.product-listing-section .breadcrumb-item.active {
    color: #212121 !important;
    font-weight: 600;
    font-size: 0.9rem;
}

/* ── Page title / category heading ── */
.product-listing-section h1 {
    font-family: 'Belltown', 'Proxima Nova', Arial, sans-serif;
    font-weight: 700;
    font-size: 1.75rem;
    color: #212121;
    letter-spacing: -0.01em;
}

.product-listing-section .text-body {
    color: #212121 !important;
}

/* ── Product count label ── */
.product-listing-section .product-count-label {
    color: #6b6b6b;
    font-size: 0.85rem;
}

/* ── Filter sidebar cards ── */
.product-listing-section .aiz-filter-sidebar .bg-white {
    background-color: #ffffff !important;
    border-radius: 8px;
    border: 1px solid #eeeeee;
    box-shadow: none;
}

.product-listing-section .aiz-filter-sidebar .fs-15.fw-600 {
    color: #212121;
    font-weight: 700 !important;
    font-size: 0.9rem !important;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.product-listing-section .aiz-filter-sidebar .p-3 .list-unstyled a {
    color: #424242;
    font-size: 0.9rem;
    transition: color 0.2s ease;
}

.product-listing-section .aiz-filter-sidebar .p-3 .list-unstyled a:hover {
    color: #87189d;
    text-decoration: none;
}

.product-listing-section .aiz-filter-sidebar .p-3 .list-unstyled a.fw-600 {
    color: #212121;
}

.product-listing-section .aiz-filter-sidebar .p-3 .list-unstyled a.fw-600:hover {
    color: #87189d;
}

/* ── Filter section dividers ── */
.product-listing-section .aiz-filter-sidebar .border-bottom {
    border-color: #f0f0f0 !important;
}

/* ── Price range slider ── */
.product-listing-section .aiz-filter-sidebar .range-slider-value {
    color: #6b6b6b;
}

.product-listing-section .aiz-filter-sidebar .aiz-range-slider .noUi-base .noUi-connect {
    background-color: #87189d;
}

.product-listing-section .aiz-filter-sidebar .aiz-range-slider .noUi-handle {
    border-color: #87189d;
}

/* ── Checkbox filters ── */
.product-listing-section .aiz-filter-sidebar .aiz-checkbox label {
    color: #424242;
    font-size: 0.9rem;
}

.product-listing-section .aiz-filter-sidebar .aiz-checkbox input[type="checkbox"]:checked + .aiz-square-check {
    background-color: #87189d;
    border-color: #87189d;
}

.product-listing-section .aiz-filter-sidebar .aiz-checkbox input[type="checkbox"]:checked + .aiz-square-check::after {
    border-color: #ffffff;
}

/* ── Color swatch filters ── */
.product-listing-section .aiz-filter-sidebar .aiz-megabox input[type="radio"]:checked + span {
    border-color: #87189d !important;
    box-shadow: 0 0 0 2px #87189d;
}

.product-listing-section .aiz-filter-sidebar .aiz-megabox input[type="radio"] + span:hover {
    border-color: #87189d !important;
}

/* ── Sort dropdown ── */
.product-listing-section .aiz-selectpicker,
.product-listing-section select.form-control {
    border-color: #d0d0d0 !important;
    color: #424242;
    font-size: 0.9rem;
    border-radius: 6px;
    background-color: #ffffff;
}

.product-listing-section .aiz-selectpicker:focus,
.product-listing-section select.form-control:focus {
    border-color: #87189d !important;
    box-shadow: 0 0 0 3px rgba(135, 24, 157, 0.10) !important;
}

/* ── Mobile filter toggle button ── */
.product-listing-section .btn-icon {
    color: #424242 !important;
    transition: color 0.2s ease;
}

.product-listing-section .btn-icon:hover {
    color: #87189d !important;
}

/* ── Product cards (product_box_1.blade.php) ── */
.product-listing-section .aiz-card-box {
    background-color: #ffffff;
    border: 1px solid #f0f0f0;
    border-radius: 8px;
    overflow: hidden;
    transition: box-shadow 0.2s ease, border-color 0.2s ease;
}

.product-listing-section .aiz-card-box:hover {
    box-shadow: 0 4px 20px rgba(135, 24, 157, 0.12);
    border-color: #e8d4f0;
}

/* Discount badge */
.product-listing-section .badge-custom {
    background-color: #d64a4a;
    color: #ffffff;
    font-size: 0.75rem;
    font-weight: 700;
    border-radius: 4px;
    padding: 2px 6px;
    position: absolute;
    top: 8px;
    left: 8px;
    z-index: 2;
}

.product-listing-section .badge-custom .box {
    background-color: #ffffff;
    color: #d64a4a;
    font-weight: 700;
}

/* Product image hover overlay icon bar */
.product-listing-section .aiz-p-hov-icon a {
    background-color: #ffffff;
    color: #424242;
    border-radius: 50%;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.12);
    transition: background-color 0.2s ease, color 0.2s ease;
}

.product-listing-section .aiz-p-hov-icon a:hover {
    background-color: #87189d;
    color: #ffffff;
}

/* Product price */
.product-listing-section .aiz-card-box .fw-700.text-primary {
    color: #212121 !important;
    font-weight: 700;
    font-size: 1rem;
}

.product-listing-section .aiz-card-box del {
    color: #9e9e9e !important;
    font-size: 0.85rem;
}

/* Rating stars on product card */
.product-listing-section .aiz-card-box .rating i,
.product-listing-section .aiz-card-box .rating .fa-star,
.product-listing-section .aiz-card-box .rating .fas {
    color: #f0a832 !important;
    font-size: 0.8rem;
}

.product-listing-section .aiz-card-box .rating i.fa-star-o,
.product-listing-section .aiz-card-box .rating .far.fa-star {
    color: #d0d0d0 !important;
}

/* Product card title */
.product-listing-section .aiz-card-box h3 a {
    color: #424242;
    font-size: 0.875rem;
    font-weight: 500;
    line-height: 1.4;
    transition: color 0.2s ease;
}

.product-listing-section .aiz-card-box h3 a:hover {
    color: #87189d;
}

/* ── Pagination ── */
.product-listing-section .aiz-pagination .pagination .page-item .page-link {
    color: #757575;
    border-color: #eeeeee;
    font-size: 0.9rem;
    padding: 6px 12px;
    border-radius: 6px;
    transition: all 0.2s ease;
}

.product-listing-section .aiz-pagination .pagination .page-item .page-link:hover {
    background-color: #f9f3fb;
    border-color: #87189d;
    color: #87189d;
}

.product-listing-section .aiz-pagination .pagination .page-item.active .page-link {
    background-color: #87189d;
    border-color: #87189d;
    color: #ffffff;
    font-weight: 700;
}

/* ── Brand logo area ── */
.product-listing-section .brand-logo-area img {
    max-height: 40px;
    object-fit: contain;
    opacity: 0.8;
    transition: opacity 0.2s ease;
    filter: grayscale(20%);
}

.product-listing-section .brand-logo-area img:hover {
    opacity: 1;
    filter: none;
}

/* ── "Sold out" badge on product card ── */
.product-listing-section .sold-out-badge {
    background-color: rgba(0, 0, 0, 0.6);
    color: #ffffff;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    padding: 2px 8px;
    border-radius: 4px;
}

/* ── Wholesale badge ── */
.product-listing-section .absolute-bottom-left {
    background-color: #87189d !important;
}

/* ============================================
   44. Auth Pages — Login & Registration
   (user_login.blade.php, user_registration.blade.php)
   Matches: zulily.com/account/login style
   ============================================ */

/* ── Page background ── */
.auth-section {
    background-color: #ffffff !important;
    min-height: calc(100vh - 120px);
}

/* ── Card container ── */
.auth-section .card {
    background-color: #ffffff;
    border: 1px solid #eeeeee;
    border-radius: 12px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
    overflow: hidden;
}

/* ── Page heading ── */
.auth-section .text-center .h4,
.auth-section .text-center h1 {
    font-family: 'Belltown', 'Proxima Nova', Arial, sans-serif;
    font-weight: 700;
    font-size: 1.5rem;
    color: #212121;
    letter-spacing: -0.01em;
}

/* ── Form labels ── */
.auth-section .form-group label {
    color: #424242;
    font-size: 0.875rem;
    font-weight: 600;
    margin-bottom: 6px;
}

/* ── Form inputs ── */
.auth-section .form-control {
    background-color: #ffffff;
    border: 1px solid #d0d0d0;
    border-radius: 6px;
    color: #212121;
    font-size: 0.95rem;
    padding: 10px 14px;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.auth-section .form-control::placeholder {
    color: #9e9e9e;
}

.auth-section .form-control:focus {
    border-color: #87189d;
    box-shadow: 0 0 0 3px rgba(135, 24, 157, 0.10);
    outline: none;
    background-color: #ffffff;
}

.auth-section .form-control.is-invalid {
    border-color: #d64a4a;
}

.auth-section .form-control.is-invalid:focus {
    box-shadow: 0 0 0 3px rgba(214, 74, 74, 0.10);
}

/* ── Validation error messages ── */
.auth-section .invalid-feedback {
    color: #d64a4a;
    font-size: 0.8rem;
    font-weight: 500;
    margin-top: 4px;
}

/* ── Remember me / checkbox ── */
.auth-section .aiz-checkbox {
    font-size: 0.875rem;
}

.auth-section .aiz-checkbox input[type="checkbox"]:checked + .aiz-square-check {
    background-color: #87189d;
    border-color: #87189d;
}

.auth-section .aiz-checkbox input[type="checkbox"]:checked + .aiz-square-check::after {
    border-color: #ffffff;
}

.auth-section .aiz-checkbox .opacity-60 {
    color: #757575;
}

/* ── Forgot password link ── */
.auth-section .opacity-60.fs-14 {
    color: #87189d !important;
    font-size: 0.875rem;
    transition: color 0.2s ease;
}

.auth-section .opacity-60.fs-14:hover {
    color: #6a1380 !important;
}

/* ── Primary CTA button (Login / Create Account) ── */
.auth-section .btn-primary {
    background-color: #87189d !important;
    border-color: #87189d !important;
    color: #ffffff !important;
    font-weight: 700;
    font-size: 0.95rem;
    letter-spacing: 0.04em;
    border-radius: 6px;
    padding: 12px 24px;
    transition: background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.auth-section .btn-primary:hover,
.auth-section .btn-primary:focus,
.auth-section .btn-primary:active {
    background-color: #6a1380 !important;
    border-color: #6a1380 !important;
    box-shadow: 0 4px 12px rgba(135, 24, 157, 0.30) !important;
    color: #ffffff !important;
}

/* ── Secondary / link button (Use Phone/Email Instead) ── */
.auth-section .btn-link {
    color: #87189d !important;
    font-size: 0.85rem;
    font-weight: 600;
    transition: color 0.2s ease;
}

.auth-section .btn-link:hover {
    color: #6a1380 !important;
    text-decoration: underline;
}

/* ── Social login separator ── */
.auth-section .separator {
    position: relative;
    text-align: center;
    border-top: 1px solid #eeeeee;
    margin: 1.5rem 0;
}

.auth-section .separator span {
    position: absolute;
    top: -10px;
    left: 50%;
    transform: translateX(-50%);
    background: #ffffff;
    padding: 0 16px;
    color: #9e9e9e;
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

/* ── Social login buttons ── */
.auth-section .social.colored .list-inline-item a {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    border: 1px solid #eeeeee;
    background-color: #ffffff;
    color: #424242;
    transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}

.auth-section .social.colored .list-inline-item a:hover {
    background-color: #87189d;
    border-color: #87189d;
    color: #ffffff;
    box-shadow: 0 4px 12px rgba(135, 24, 157, 0.25);
}

.auth-section .social.colored .list-inline-item a.facebook:hover {
    background-color: #1877f2;
    border-color: #1877f2;
}

.auth-section .social.colored .list-inline-item a.twitter:hover {
    background-color: #1da1f2;
    border-color: #1da1f2;
}

/* ── Bottom link (Already have account / Dont have account) ── */
.auth-section .text-muted {
    color: #757575 !important;
    font-size: 0.875rem;
}

.auth-section .text-center a:not(.btn) {
    color: #87189d;
    font-weight: 700;
    font-size: 0.875rem;
    transition: color 0.2s ease;
}

.auth-section .text-center a:not(.btn):hover {
    color: #6a1380;
    text-decoration: underline;
}

/* ── Demo mode table (if shown) ── */
.auth-section .table-bordered {
    border-color: #eeeeee;
}

.auth-section .table-bordered th,
.auth-section .table-bordered td {
    border-color: #eeeeee;
    color: #424242;
    font-size: 0.875rem;
}

.auth-section .btn-info {
    background-color: #f3e8f7 !important;
    border-color: #87189d !important;
    color: #87189d !important;
    font-weight: 600;
    font-size: 0.8rem;
    border-radius: 4px;
    transition: background-color 0.2s ease;
}

.auth-section .btn-info:hover {
    background-color: #87189d !important;
    color: #ffffff !important;
}

/* ============================================
   45. User Panel — Customer & Seller Dashboard
   (layouts/user_panel.blade.php)
   ============================================ */

/* ── Page section ── */
.user-panel-section {
    background-color: #ffffff;
}

/* ── Sidebar (user_side_nav.blade.php) ── */
.user-panel-section .aiz-user-sidenav-wrap {
    border: 1px solid #eeeeee;
    border-radius: 10px;
    overflow: hidden;
    background-color: #ffffff;
    box-shadow: none;
}

.user-panel-section .aiz-user-sidenav {
    background-color: #ffffff;
}

/* Profile header in sidebar */
.user-panel-section .aiz-user-sidenav .p-4.text-xl-center {
    background-color: #87189d !important;
    color: #ffffff;
    border-bottom: none;
    padding: 24px 16px !important;
}

.user-panel-section .aiz-user-sidenav .avatar img {
    border: 3px solid rgba(255, 255, 255, 0.4);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.user-panel-section .aiz-user-sidenav .h5 {
    font-family: 'Belltown', 'Proxima Nova', Arial, sans-serif;
    font-weight: 700;
    color: #ffffff;
}

/* Sidebar nav items */
.user-panel-section .aiz-side-nav-list .aiz-side-nav-link {
    color: #424242;
    font-size: 0.9rem;
    font-weight: 500;
    padding: 10px 14px;
    border-radius: 6px;
    transition: background-color 0.2s ease, color 0.2s ease;
    margin: 2px 6px;
    width: calc(100% - 12px);
}

.user-panel-section .aiz-side-nav-list .aiz-side-nav-link:hover {
    background-color: #f9f3fb;
    color: #87189d;
}

.user-panel-section .aiz-side-nav-list .aiz-side-nav-link.active,
.user-panel-section .aiz-side-nav-list .aiz-side-nav-link:active {
    background-color: #87189d;
    color: #ffffff;
    font-weight: 700;
}

.user-panel-section .aiz-side-nav-list .aiz-side-nav-link.active .aiz-side-nav-icon,
.user-panel-section .aiz-side-nav-list .aiz-side-nav-link:active .aiz-side-nav-icon {
    color: #ffffff;
}

.user-panel-section .aiz-side-nav-icon {
    color: #757575;
    font-size: 1.1rem;
    transition: color 0.2s ease;
}

.user-panel-section .aiz-side-nav-link:hover .aiz-side-nav-icon,
.user-panel-section .aiz-side-nav-link.active .aiz-side-nav-icon {
    color: inherit;
}

/* Sidebar badges (New, support ticket count) */
.user-panel-section .badge-inline {
    background-color: #87189d !important;
    color: #ffffff !important;
    font-size: 0.7rem;
    font-weight: 700;
    border-radius: 999px;
    padding: 2px 7px;
}

.user-panel-section .badge-inline.badge-success {
    background-color: #27ae60 !important;
}

/* Sidebar "Be A Seller" button */
.user-panel-section .btn-soft-primary {
    background-color: #f3e8f7 !important;
    color: #87189d !important;
    border: 1px solid #87189d;
    font-weight: 700;
    font-size: 0.875rem;
    border-radius: 6px;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.user-panel-section .btn-soft-primary:hover {
    background-color: #87189d !important;
    color: #ffffff !important;
}

/* ── Panel content area ── */
.user-panel-section .aiz-user-panel {
    padding: 0 0 0 24px;
}

/* Dashboard title bar */
.user-panel-section .aiz-titlebar {
    margin-bottom: 24px;
}

.user-panel-section .aiz-titlebar h1,
.user-panel-section .aiz-titlebar h1.h3 {
    font-family: 'Belltown', 'Proxima Nova', Arial, sans-serif;
    font-weight: 700;
    font-size: 1.5rem;
    color: #212121;
}

/* ── Stat cards — replace all gradients with purple theme ── */
.user-panel-section .bg-grad-1 {
    background-color: #87189d !important;
    background-image: linear-gradient(135deg, #87189d 0%, #b054a0 100%) !important;
}

.user-panel-section .bg-grad-2 {
    background-color: #87189d !important;
    background-image: linear-gradient(135deg, #6a1380 0%, #87189d 100%) !important;
}

.user-panel-section .bg-grad-3 {
    background-color: #87189d !important;
    background-image: linear-gradient(135deg, #4a0d60 0%, #6a1380 100%) !important;
}

.user-panel-section .bg-grad-4 {
    background-color: #87189d !important;
    background-image: linear-gradient(135deg, #9b27af 0%, #87189d 100%) !important;
}

/* Stat card numbers & labels */
.user-panel-section .bg-grad-1 .h3,
.user-panel-section .bg-grad-2 .h3,
.user-panel-section .bg-grad-3 .h3,
.user-panel-section .bg-grad-4 .h3 {
    color: #ffffff;
    font-weight: 700;
    font-size: 1.5rem;
}

.user-panel-section .bg-grad-1 .opacity-50,
.user-panel-section .bg-grad-2 .opacity-50,
.user-panel-section .bg-grad-3 .opacity-50,
.user-panel-section .bg-grad-4 .opacity-50 {
    color: rgba(255, 255, 255, 0.75) !important;
    font-size: 0.85rem;
}

/* ── General cards ── */
.user-panel-section .card {
    background-color: #ffffff;
    border: 1px solid #eeeeee;
    border-radius: 10px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04);
    overflow: hidden;
}

.user-panel-section .card-header {
    background-color: #ffffff;
    border-bottom: 1px solid #f0f0f0;
    padding: 14px 20px;
}

.user-panel-section .card-header h6,
.user-panel-section .card-header h5,
.user-panel-section .card-header .h6 {
    color: #212121;
    font-weight: 700;
    font-size: 0.95rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.user-panel-section .card-body {
    padding: 20px;
    color: #424242;
    font-size: 0.9rem;
}

/* ── Tables ── */
.user-panel-section .aiz-table {
    color: #424242;
    font-size: 0.9rem;
}

.user-panel-section .aiz-table td {
    padding: 10px 4px;
    border-color: #f0f0f0;
}

.user-panel-section .aiz-table td:first-child {
    color: #6b6b6b;
}

.user-panel-section .aiz-table td:last-child {
    font-weight: 600;
    color: #212121;
}

/* ── Buttons in panel ── */
.user-panel-section .btn-primary {
    background-color: #87189d !important;
    border-color: #87189d !important;
    color: #ffffff !important;
    font-weight: 700;
    font-size: 0.875rem;
    border-radius: 6px;
    padding: 8px 20px;
    transition: background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.user-panel-section .btn-primary:hover {
    background-color: #6a1380 !important;
    border-color: #6a1380 !important;
    box-shadow: 0 4px 12px rgba(135, 24, 157, 0.30);
    color: #ffffff !important;
}

.user-panel-section .btn-soft-primary {
    background-color: #f3e8f7 !important;
    color: #87189d !important;
    border: 1px solid #87189d;
    font-weight: 700;
    font-size: 0.875rem;
    border-radius: 6px;
    padding: 8px 20px;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.user-panel-section .btn-soft-primary:hover {
    background-color: #87189d !important;
    color: #ffffff !important;
}

.user-panel-section .btn-success {
    background-color: #27ae60 !important;
    border-color: #27ae60 !important;
    color: #ffffff !important;
    font-weight: 700;
    font-size: 0.875rem;
    border-radius: 6px;
    transition: background-color 0.2s ease;
}

.user-panel-section .btn-success:hover {
    background-color: #219150 !important;
    border-color: #219150 !important;
    color: #ffffff !important;
}

/* ── Upgrade Package / Verify Now text ── */
.user-panel-section .text-primary {
    color: #87189d !important;
    font-weight: 700;
}

/* ── Address list in card ── */
.user-panel-section .card-body ul li {
    color: #424242;
    font-size: 0.875rem;
    border-bottom: 1px solid #f5f5f5;
    padding: 8px 0;
}

.user-panel-section .card-body ul li:last-child {
    border-bottom: none;
}

/* ── "Sold Amount" widget in sidebar ── */
.user-panel-section .widget-balance {
    color: #424242;
}

.user-panel-section .widget-balance .heading-4 {
    font-family: 'Belltown', 'Proxima Nova', Arial, sans-serif;
    font-weight: 700;
    color: #212121;
}

.user-panel-section .widget-balance .fw-600.fs-18 {
    background-color: #87189d !important;
    color: #ffffff !important;
    border-radius: 6px;
    padding: 6px 16px;
    font-weight: 700;
}

.user-panel-section .widget-balance table td {
    font-size: 0.875rem;
    color: #6b6b6b;
}

.user-panel-section .widget-balance table td.fw-600 {
    color: #212121;
    font-weight: 700;
}

/* ── Seller verification card ── */
.user-panel-section .card.p-5.text-center {
    padding: 32px 24px !important;
}

.user-panel-section .card.p-5.text-center img {
    border-radius: 8px;
}

/* ── Section heading (Sold Amount) ── */
.user-panel-section .h5.fw-600 {
    font-family: 'Belltown', 'Proxima Nova', Arial, sans-serif;
    font-weight: 700;
    color: #212121;
    font-size: 0.95rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

/* ============================================
   46. Seller Registration Form
   (frontend/seller_form.blade.php)
   ============================================ */

/* ── Page heading ── */
.seller-form-section h1.fw-600,
.seller-form-section .h4 {
    font-family: 'Belltown', 'Proxima Nova', Arial, sans-serif;
    font-weight: 700;
    font-size: 1.5rem;
    color: #212121;
    letter-spacing: -0.01em;
}

/* ── Breadcrumb ── */
.seller-form-section .breadcrumb {
    background: transparent;
    padding: 0;
}

.seller-form-section .breadcrumb-item a {
    color: #757575 !important;
    font-size: 0.9rem;
}

.seller-form-section .breadcrumb-item + .breadcrumb-item::before {
    color: #bdbdbd;
}

.seller-form-section .breadcrumb-item.active {
    color: #212121 !important;
    font-weight: 600;
    font-size: 0.9rem;
}

/* ── Form cards ── */
.seller-form-section .bg-white.rounded {
    background-color: #ffffff !important;
    border: 1px solid #eeeeee;
    border-radius: 10px !important;
    box-shadow: none;
    overflow: hidden;
}

.seller-form-section .fs-15.fw-600 {
    color: #212121;
    font-weight: 700 !important;
    font-size: 0.9rem !important;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

/* ── Form labels ── */
.seller-form-section label {
    color: #424242;
    font-size: 0.875rem;
    font-weight: 600;
    margin-bottom: 6px;
}

.seller-form-section label .text-primary {
    color: #87189d !important;
}

/* ── Form inputs ── */
.seller-form-section .form-control {
    background-color: #ffffff;
    border: 1px solid #d0d0d0;
    border-radius: 6px;
    color: #212121;
    font-size: 0.95rem;
    padding: 10px 14px;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.seller-form-section .form-control::placeholder {
    color: #9e9e9e;
}

.seller-form-section .form-control:focus {
    border-color: #87189d;
    box-shadow: 0 0 0 3px rgba(135, 24, 157, 0.10);
    outline: none;
    background-color: #ffffff;
}

.seller-form-section .form-control.is-invalid {
    border-color: #d64a4a;
}

.seller-form-section .form-control.is-invalid:focus {
    box-shadow: 0 0 0 3px rgba(214, 74, 74, 0.10);
}

/* ── Validation errors ── */
.seller-form-section .invalid-feedback {
    color: #d64a4a;
    font-size: 0.8rem;
    font-weight: 500;
    margin-top: 4px;
}

/* ── Card dividers ── */
.seller-form-section .border-bottom {
    border-color: #f0f0f0 !important;
}

/* ── File input area ── */
.seller-form-section input[type="file"].form-control {
    border: 1px dashed #d0d0d0;
    border-radius: 6px;
    background-color: #fafafa;
    padding: 10px 14px;
}

.seller-form-section input[type="button"] {
    background-color: #f3e8f7 !important;
    color: #87189d !important;
    border: 1px solid #87189d;
    border-radius: 6px;
    padding: 8px 18px;
    font-weight: 700;
    font-size: 0.875rem;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.seller-form-section input[type="button"]:hover {
    background-color: #87189d !important;
    color: #ffffff !important;
}

/* ── Submit button ── */
.seller-form-section .btn-primary {
    background-color: #87189d !important;
    border-color: #87189d !important;
    color: #ffffff !important;
    font-weight: 700;
    font-size: 0.95rem;
    letter-spacing: 0.04em;
    border-radius: 6px;
    padding: 12px 28px;
    transition: background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.seller-form-section .btn-primary:hover {
    background-color: #6a1380 !important;
    border-color: #6a1380 !important;
    box-shadow: 0 4px 12px rgba(135, 24, 157, 0.30);
    color: #ffffff !important;
}

/* ── Recaptcha area ── */
.seller-form-section .g-recaptcha {
    transform-origin: top left;
}

/* ============================================
   47. Mobile Bottom Navigation
   (frontend/inc/footer.blade.php)
   ============================================ */

/* Nav container — white bg, no border-top (border-top class is enough) */
.aiz-mobile-bottom-nav {
    border-top: 1px solid rgba(38, 38, 38, 0.10) !important;
    box-shadow: 0 -2px 12px rgba(0, 0, 0, 0.08) !important;
    border-radius: 0 !important;
}

/* Icon — neutral gray, active = primary purple */
.aiz-mobile-bottom-nav .las,
.aiz-mobile-bottom-nav [class*=" la-"],
.aiz-mobile-bottom-nav [class^="la-"] {
  
    font-size: 1.25rem !important;
    transition: color 0.2s ease;
}
.aiz-mobile-bottom-nav .opacity-100.text-primary[class*=" la-"],
.aiz-mobile-bottom-nav .opacity-100.text-primary .las,
.aiz-mobile-bottom-nav .opacity-100.text-primary [class*=" la-"],
.aiz-mobile-bottom-nav .opacity-100.text-primary [class^="la-"] {
    color: #87189d !important;
}

/* Label text — neutral gray, active = primary purple */
.aiz-mobile-bottom-nav .fs-10 {
    font-size: 0.65rem !important;
    letter-spacing: 0.03em;
}
.aiz-mobile-bottom-nav .fw-600 {
    font-weight: 600 !important;
}

.aiz-mobile-bottom-nav .opacity-100.fw-600 {
    color: #87189d !important;
    font-weight: 600 !important;
}

/* Cart button center circle */
.aiz-mobile-bottom-nav .size-50px {
    width: 48px !important;
    height: 48px !important;
}
.aiz-mobile-bottom-nav .bg-primary {
    background-color: #87189d !important;
}

/* Notification badge */
.aiz-mobile-bottom-nav .badge-primary {
    background-color: #87189d !important;
}

/* ============================================
   48. Mobile Side Nav Drawer (aiz-mobile-side-nav)
   triggered from bottom nav "Account"
   ============================================ */

/* Overlay backdrop */
.aiz-mobile-side-nav .overlay {
    background-color: rgba(0, 0, 0, 0.50);
}

/* The sliding panel */
.aiz-mobile-side-nav .collapse-sidebar {
    position: fixed !important;
    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 300px !important;
    max-width: 85vw !important;
    z-index: 1041;
    box-shadow: -4px 0 24px rgba(0, 0, 0, 0.15) !important;
    overflow: hidden;
}

/* Inner sidenav scrollable area */
.aiz-mobile-side-nav .aiz-user-sidenav {
    height: 100%;
    background-color: #ffffff;
}
.aiz-mobile-side-nav .aiz-user-sidenav-wrap {
    height: 100%;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

/* Profile header — zulily purple */
.aiz-mobile-side-nav .aiz-user-sidenav .p-4.text-xl-center,
.aiz-mobile-side-nav .aiz-user-sidenav [class*=" p-4 text-xl-center"] {
    background-color: #87189d !important;
    color: #ffffff !important;
    padding: 28px 16px 20px !important;
    border-bottom: none !important;
}

/* Avatar */
.aiz-mobile-side-nav .aiz-user-sidenav .avatar img {
    border: 3px solid rgba(255, 255, 255, 0.35);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.18);
    width: 64px;
    height: 64px;
}

/* Name */
.aiz-mobile-side-nav .aiz-user-sidenav .h5,
.aiz-mobile-side-nav .aiz-user-sidenav h4 {
    font-family: 'Belltown', 'Proxima Nova', Arial, sans-serif;
    font-weight: 700;
    color: #ffffff !important;
    font-size: 1rem !important;
}

/* Email / phone subtext */
.aiz-mobile-side-nav .aiz-user-sidenav .opacity-60 {
    color: rgba(255, 255, 255, 0.70) !important;
    font-size: 0.8rem;
}

/* Nav items list */
.aiz-mobile-side-nav .aiz-side-nav-list {
    padding: 6px 8px !important;
}

/* Nav link default */
.aiz-mobile-side-nav .aiz-side-nav-link {
    color: #424242 !important;
    font-size: 0.9rem !important;
    font-weight: 500 !important;
    padding: 10px 14px !important;
    border-radius: 8px;
    transition: background-color 0.18s ease, color 0.18s ease;
    margin: 2px 0;
    display: flex !important;
    align-items: center;
}

/* Nav link hover */
.aiz-mobile-side-nav .aiz-side-nav-link:hover,
.aiz-mobile-side-nav .aiz-side-nav-link:focus {
    background-color: #f5edfa !important;
    color: #87189d !important;
    text-decoration: none;
}

/* Nav link active */
.aiz-mobile-side-nav .aiz-side-nav-link.active,
.aiz-mobile-side-nav .aiz-side-nav-link:active {
    background-color: #87189d !important;
    color: #ffffff !important;
    font-weight: 700 !important;
}

/* Nav icon */
.aiz-mobile-side-nav .aiz-side-nav-icon {
    color: rgba(38, 38, 38, 0.50) !important;
    font-size: 1.1rem !important;
    min-width: 24px;
    transition: color 0.18s ease;
}
.aiz-mobile-side-nav .aiz-side-nav-link:hover .aiz-side-nav-icon {
    color: #87189d !important;
}
.aiz-mobile-side-nav .aiz-side-nav-link.active .aiz-side-nav-icon,
.aiz-mobile-side-nav .aiz-side-nav-link:active .aiz-side-nav-icon {
    color: #ffffff !important;
}

/* Arrow for submenus */
.aiz-mobile-side-nav .aiz-side-nav-arrow {
    color: rgba(38, 38, 38, 0.35) !important;
}

/* Badges inside nav */
.aiz-mobile-side-nav .badge-inline {
    background-color: #87189d !important;
    color: #ffffff !important;
    font-size: 0.65rem !important;
    padding: 2px 6px !important;
    border-radius: 10px !important;
    font-weight: 600 !important;
}

/* Bottom bar — logout + close */
.aiz-mobile-side-nav .fixed-bottom.bg-white.border-top {
    background-color: #ffffff !important;
    border-top: 1px solid rgba(38, 38, 38, 0.08) !important;
    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.08) !important;
    padding: 6px 12px !important;
    gap: 8px;
}

/* Logout button */
.aiz-mobile-side-nav .fixed-bottom .btn {
    font-size: 0.85rem !important;
    font-weight: 600 !important;
    color: #424242 !important;
    padding: 8px 14px !important;
    border-radius: 8px;
    transition: background-color 0.18s ease, color 0.18s ease;
}
.aiz-mobile-side-nav .fixed-bottom .btn:hover {
    background-color: #f5edfa !important;
    color: #87189d !important;
}
.aiz-mobile-side-nav .fixed-bottom .btn i {
    color: rgba(38, 38, 38, 0.55) !important;
    transition: color 0.18s ease;
}
.aiz-mobile-side-nav .fixed-bottom .btn:hover i {
    color: #87189d !important;
}

/* Close (X) button */
.aiz-mobile-side-nav .fixed-bottom .btn:last-child {
    color: rgba(38, 38, 38, 0.45) !important;
}
.aiz-mobile-side-nav .fixed-bottom .btn:last-child:hover {
    background-color: #f5f5f5 !important;
    color: rgba(38, 38, 38, 0.75) !important;
}

/* Be A Seller button */
.aiz-mobile-side-nav .btn-soft-primary {
    background-color: #f3e8f7 !important;
    color: #87189d !important;
    border: 1px solid rgba(135, 24, 157, 0.25) !important;
    font-weight: 700 !important;
    font-size: 0.85rem !important;
    border-radius: 8px;
    padding: 10px 16px;
    transition: background-color 0.18s ease;
}
.aiz-mobile-side-nav .btn-soft-primary:hover {
    background-color: #87189d !important;
    color: #ffffff !important;
}