/*
 * webmarket-components.css
 * Component-level overrides for theme_webmarket.
 * Implements the design system from the React component library into
 * Bootstrap 5 + existing Blade template classes.
 */

/* ═══════════════════════════════════════════════════════════════
   BUTTONS
   ═══════════════════════════════════════════════════════════════ */

.btn {
    border-radius: var(--radius-lg);
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    white-space: nowrap;
    transition: background-color 0.15s ease,
                color 0.15s ease,
                border-color 0.15s ease,
                box-shadow 0.15s ease;
}
.btn:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(254, 106, 0, 0.25);
}
.btn-sm { border-radius: calc(var(--radius-lg) - 2px); padding: 0.375rem 1rem;   font-size: 0.75rem; }
.btn-lg { border-radius: calc(var(--radius-lg) + 2px); padding: 0.75rem 1.5rem;  font-size: 1rem;    }

/* Primary */
.btn-primary {
    --bs-btn-color:              #FFFFFF;
    --bs-btn-bg:                 var(--brand-primary);
    --bs-btn-border-color:       var(--brand-primary);
    --bs-btn-hover-color:        #FFFFFF;
    --bs-btn-hover-bg:           var(--brand-200);
    --bs-btn-hover-border-color: var(--brand-200);
    --bs-btn-active-color:       #FFFFFF;
    --bs-btn-active-bg:          var(--brand-700);
    --bs-btn-active-border-color:var(--brand-700);
    --bs-btn-disabled-bg:        var(--gray-200);
    --bs-btn-disabled-color:     var(--gray-400);
    --bs-btn-disabled-border-color: var(--gray-200);
    --bs-btn-focus-shadow-rgb:   254, 106, 0;
}

/* Outline Primary */
.btn-outline-primary {
    --bs-btn-color:              var(--brand-primary);
    --bs-btn-border-color:       var(--brand-primary);
    --bs-btn-hover-color:        var(--brand-primary);
    --bs-btn-hover-bg:           var(--brand-secondary);
    --bs-btn-hover-border-color: var(--brand-primary);
    --bs-btn-active-color:       var(--brand-700);
    --bs-btn-active-bg:          var(--brand-tertiary);
    --bs-btn-active-border-color:var(--brand-700);
    --bs-btn-focus-shadow-rgb:   254, 106, 0;
}

/* Outline Success — used as primary-outline in theme_aster templates */
.btn-outline-success {
    --bs-btn-color:              var(--brand-primary) !important;
    --bs-btn-border-color:       var(--brand-primary) !important;
    --bs-btn-hover-color:        #FFFFFF !important;
    --bs-btn-hover-bg:           var(--brand-primary) !important;
    --bs-btn-hover-border-color: var(--brand-primary) !important;
    --bs-btn-active-color:       #FFFFFF !important;
    --bs-btn-active-bg:          var(--brand-700) !important;
    --bs-btn-active-border-color:var(--brand-700) !important;
    --bs-btn-focus-shadow-rgb:   254, 106, 0;
}
.btn-outline-success:active {
    background-color: var(--brand-700) !important;
    color: #FFFFFF !important;
}

/* Secondary — outlined orange (e.g. "Buy Now" vs "Add to Cart").
   style.css has two conflicting .btn-secondary rules (#d3d4d5 and var(--bs-secondary)=#FFF4EB
   with white text). We override both with an outline-orange pattern for visibility. */
.btn-secondary,
.btn.btn-secondary {
    --bs-btn-color:              var(--brand-primary) !important;
    --bs-btn-bg:                 transparent !important;
    --bs-btn-border-color:       var(--brand-primary) !important;
    --bs-btn-hover-color:        #FFFFFF !important;
    --bs-btn-hover-bg:           var(--brand-primary) !important;
    --bs-btn-hover-border-color: var(--brand-primary) !important;
    --bs-btn-active-color:       #FFFFFF !important;
    --bs-btn-active-bg:          var(--brand-700) !important;
    --bs-btn-active-border-color:var(--brand-700) !important;
    --bs-btn-disabled-bg:        transparent !important;
    --bs-btn-disabled-color:     var(--gray-400) !important;
    --bs-btn-disabled-border-color: var(--gray-300) !important;
    --bs-btn-focus-shadow-rgb:   254, 106, 0;
}

/* Success, Danger, Warning keep semantic colors */
.btn-success {
    --bs-btn-bg:                 var(--success-600);
    --bs-btn-border-color:       var(--success-600);
    --bs-btn-hover-bg:           var(--success-700);
    --bs-btn-hover-border-color: var(--success-700);
    --bs-btn-active-bg:          var(--success-700);
}
.btn-danger {
    --bs-btn-bg:                 var(--danger-600);
    --bs-btn-border-color:       var(--danger-600);
    --bs-btn-hover-bg:           var(--danger-700);
    --bs-btn-hover-border-color: var(--danger-700);
    --bs-btn-active-bg:          var(--danger-700);
}
.btn-warning {
    --bs-btn-bg:                 var(--warning-500);
    --bs-btn-border-color:       var(--warning-500);
    --bs-btn-hover-bg:           var(--warning-600);
    --bs-btn-hover-border-color: var(--warning-600);
    --bs-btn-active-bg:          var(--warning-700);
}

/* ═══════════════════════════════════════════════════════════════
   CARDS
   ═══════════════════════════════════════════════════════════════ */

.card {
    border-radius: var(--radius-lg);
    border-color: var(--gray-100);
    box-shadow: 0 1px 3px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04);
    transition: box-shadow 0.2s ease, transform 0.2s ease;
}
.card:hover {
    box-shadow: 0 4px 16px rgba(0,0,0,0.08), 0 1px 4px rgba(0,0,0,0.04);
}

/* Product cards need overflow:hidden for image zoom; generic cards must NOT have it
   (overflow:hidden clips Bootstrap dropdowns that extend below the card boundary) */
.product-card { overflow: hidden; }
.card-header {
    background-color: transparent;
    border-bottom-color: var(--gray-100);
    font-weight: 600;
    padding: 1rem 1.25rem;
}
.card-body  { padding: 1rem 1.25rem; }
.card-footer {
    background-color: transparent;
    border-top-color: var(--gray-100);
    padding: 1rem 1.25rem;
}

/* Product-card image zoom on hover */
.product-card .card-img-top,
.product-card-img,
.product-image-wrapper img {
    transition: transform 0.3s ease;
    will-change: transform;
}
.product-card:hover .card-img-top,
.product-card:hover .product-card-img,
.product-card:hover .product-image-wrapper img {
    transform: scale(1.05);
}

/* ═══════════════════════════════════════════════════════════════
   BADGES
   ═══════════════════════════════════════════════════════════════ */

.badge {
    border-radius: var(--radius-sm);
    font-weight: 500;
    font-size: 0.75rem;
    line-height: 1rem;
    padding: 0.25rem 0.625rem;
    letter-spacing: 0.01em;
}
.badge.bg-primary,
.badge.bg-base   { background-color: var(--brand-primary)   !important; color: #FFFFFF; }
.badge.bg-secondary { background-color: var(--brand-secondary) !important; color: var(--brand-primary); }
.badge.bg-success   { background-color: var(--success-50)      !important; color: var(--success-700); }
.badge.bg-danger    { background-color: var(--danger-50)       !important; color: var(--danger-700);  }
.badge.bg-warning   { background-color: var(--warning-50)      !important; color: var(--warning-700); }
.badge.bg-info      { background-color: var(--info-50)         !important; color: var(--info-700);    }

/* Utility classes for semantic badges */
.wm-badge-success { display: inline-flex; align-items: center; border-radius: var(--radius-sm); padding: 0.25rem 0.625rem; font-size: 0.75rem; font-weight: 500; background-color: var(--success-50);  color: var(--success-700); }
.wm-badge-danger  { display: inline-flex; align-items: center; border-radius: var(--radius-sm); padding: 0.25rem 0.625rem; font-size: 0.75rem; font-weight: 500; background-color: var(--danger-50);   color: var(--danger-700);  }
.wm-badge-warning { display: inline-flex; align-items: center; border-radius: var(--radius-sm); padding: 0.25rem 0.625rem; font-size: 0.75rem; font-weight: 500; background-color: var(--warning-50);  color: var(--warning-700); }
.wm-badge-info    { display: inline-flex; align-items: center; border-radius: var(--radius-sm); padding: 0.25rem 0.625rem; font-size: 0.75rem; font-weight: 500; background-color: var(--info-50);     color: var(--info-700);    }
.wm-badge-muted   { display: inline-flex; align-items: center; border-radius: var(--radius-sm); padding: 0.25rem 0.625rem; font-size: 0.75rem; font-weight: 500; background-color: var(--gray-100);    color: var(--text-secondary); }
.wm-badge-outline { display: inline-flex; align-items: center; border-radius: var(--radius-sm); padding: 0.25rem 0.625rem; font-size: 0.75rem; font-weight: 500; background-color: transparent; color: var(--text-primary); border: 1px solid var(--gray-200); }

/* ═══════════════════════════════════════════════════════════════
   FORMS & INPUTS
   ═══════════════════════════════════════════════════════════════ */

.form-control,
.form-select {
    border-radius: var(--radius-md);
    border-color: var(--gray-200);
    color: var(--text-primary);
    background-color: #FFFFFF;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.form-control:focus,
.form-select:focus {
    border-color: var(--brand-primary);
    box-shadow: 0 0 0 3px rgba(254, 106, 0, 0.15);
    color: var(--text-primary);
    background-color: #FFFFFF;
}
.form-control::placeholder { color: var(--text-tertiary); }
.form-control.is-invalid,
.form-select.is-invalid   { border-color: var(--danger-500); }
.form-control.is-invalid:focus,
.form-select.is-invalid:focus { box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.15); }
.form-control.is-valid,
.form-select.is-valid     { border-color: var(--success-500); }

.form-check-input:checked            { background-color: var(--brand-primary); border-color: var(--brand-primary); }
.form-check-input:focus              { box-shadow: 0 0 0 3px rgba(254, 106, 0, 0.15); border-color: var(--brand-primary); }
.form-range::-webkit-slider-thumb   { background: var(--brand-primary); }
.form-range::-moz-range-thumb       { background: var(--brand-primary); }

/* Floating label focus color */
.form-floating > .form-control:focus          ~ label { color: var(--brand-primary); }
.form-floating > .form-control:not(:placeholder-shown) ~ label { color: var(--brand-primary); }
.form-floating > .form-select                 ~ label { color: var(--text-secondary); }

/* ═══════════════════════════════════════════════════════════════
   NAVIGATION
   ═══════════════════════════════════════════════════════════════ */

.nav-link { transition: color 0.15s ease; }
.nav-link:hover,
.nav-link:focus { color: var(--brand-primary); }
.nav-link.active { color: var(--brand-primary); }

.nav-tabs .nav-link:hover            { color: var(--brand-primary); background: transparent; }
.nav-tabs .nav-link.active,
.nav-tabs .nav-item.show .nav-link   { color: var(--brand-primary); border-bottom-color: var(--brand-primary); }

.nav-pills .nav-link                 { border-radius: var(--radius-md); color: var(--text-secondary); }
.nav-pills .nav-link:hover           { color: var(--brand-primary); background-color: var(--brand-secondary); }
.nav-pills .nav-link.active,
.nav-pills .show > .nav-link         { background-color: var(--brand-primary); color: #FFFFFF; }

/* ═══════════════════════════════════════════════════════════════
   PAGINATION
   ═══════════════════════════════════════════════════════════════ */

.page-link {
    border-radius: var(--radius-md) !important;
    color: var(--text-primary);
    border-color: var(--gray-200);
    transition: all 0.15s ease;
}
.page-link:hover {
    color: var(--brand-primary);
    border-color: var(--brand-primary);
    background-color: var(--brand-secondary);
}
.page-item.active .page-link {
    background-color: var(--brand-primary);
    border-color: var(--brand-primary);
    color: #FFFFFF;
}
.page-item.disabled .page-link { color: var(--gray-400); }

/* ═══════════════════════════════════════════════════════════════
   BREADCRUMBS
   ═══════════════════════════════════════════════════════════════ */

.breadcrumb-item + .breadcrumb-item::before { color: var(--text-tertiary); }
.breadcrumb-item a                          { color: var(--text-secondary); text-decoration: none; }
.breadcrumb-item a:hover                    { color: var(--brand-primary); }
.breadcrumb-item.active                     { color: var(--text-primary);  }

/* ═══════════════════════════════════════════════════════════════
   ALERTS
   ═══════════════════════════════════════════════════════════════ */

.alert-primary { background-color: var(--brand-secondary); border-color: var(--brand-tertiary); color: var(--brand-700); }
.alert-success { background-color: var(--success-50); border-color: var(--success-100); color: var(--success-700); }
.alert-danger  { background-color: var(--danger-50);  border-color: var(--danger-100);  color: var(--danger-700);  }
.alert-warning { background-color: var(--warning-50); border-color: var(--warning-100); color: var(--warning-700); }
.alert-info    { background-color: var(--info-50);    border-color: var(--info-100);    color: var(--info-700);    }
.alert         { border-radius: var(--radius-lg); }

/* ═══════════════════════════════════════════════════════════════
   MODALS
   ═══════════════════════════════════════════════════════════════ */

.modal-content {
    border-radius: var(--radius-xl);
    border: none;
    box-shadow: 0 20px 60px rgba(0,0,0,0.12), 0 4px 16px rgba(0,0,0,0.08);
}
.modal-header {
    border-bottom-color: var(--gray-100);
    border-radius: var(--radius-xl) var(--radius-xl) 0 0;
    padding: 1.25rem 1.5rem;
}
.modal-footer {
    border-top-color: var(--gray-100);
    border-radius: 0 0 var(--radius-xl) var(--radius-xl);
    padding: 1.25rem 1.5rem;
}
.modal-body { padding: 1.25rem 1.5rem; }

/* ═══════════════════════════════════════════════════════════════
   DROPDOWNS — universal orange hover
   Covers three markup patterns:
   1. Bootstrap .dropdown-item  (checkout, user menu, etc.)
   2. .dropdown-menu > li > a   (search "All Categories" dropdown)
   3. .sub-menu > li > a        (desktop nav: Offers, simple sub-menus)
   Mega-menus (div.sub-menu > div > a) are NOT affected because
   they have no direct <li> children.
   ═══════════════════════════════════════════════════════════════ */

/* Panel shape & shadow */
.dropdown-menu,
.sub-menu {
    border-radius: var(--radius-lg) !important;
    box-shadow: 0 8px 24px rgba(0,0,0,0.08), 0 2px 8px rgba(0,0,0,0.04) !important;
    padding: 0.375rem !important;
}
.dropdown-menu { margin-top: 0.375rem; }

/* Reset li padding + border-bottom so the <a> can own the full-row hover area */
.dropdown-menu > li,
.sub-menu > li {
    padding: 0 !important;
    border-bottom: none !important;
    margin: 0.125rem 0;
}

/* ── Pattern 1: Bootstrap .dropdown-item ── */
.dropdown-item {
    border-radius: var(--radius-md);
    color: var(--text-primary);
    padding: 0.55rem 0.875rem;
    font-size: 0.875rem;
    font-weight: 400;
    transition: background-color 0.12s ease, color 0.12s ease;
}
.dropdown-item:hover,
.dropdown-item:focus  { background-color: var(--brand-secondary) !important; color: var(--brand-primary) !important; }
.dropdown-item.active,
.dropdown-item:active { background-color: var(--brand-secondary) !important; color: var(--brand-primary) !important; }

/* ── Pattern 2 & 3: plain <li><a> inside dropdown-menu / sub-menu ── */
.dropdown-menu > li > a,
.sub-menu > li > a {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.55rem 0.875rem;
    border-radius: var(--radius-md);
    color: var(--text-primary);
    font-size: 0.875rem;
    font-weight: 400;
    text-decoration: none;
    width: 100%;
    transition: background-color 0.12s ease, color 0.12s ease;
}
.dropdown-menu > li > a:hover,
.sub-menu > li > a:hover {
    background-color: var(--brand-secondary) !important;
    color: var(--brand-primary) !important;
    text-decoration: none;
}

/* Active/selected link in nav sub-menus */
.dropdown-menu > li.selected > a,
.sub-menu > li.selected > a {
    color: var(--brand-primary);
    font-weight: 500;
}

/* Re-center chevron on li.menu-item-has-children — padding:0 on <li> displaced the
   absolutely-positioned ::after from style.css; top:50% + translateY fixes it. */
.dropdown-menu > li.menu-item-has-children::after,
.sub-menu > li.menu-item-has-children::after {
    top: 50% !important;
    transform: translateY(-50%) !important;
}

.dropdown-divider { border-top-color: var(--gray-100); margin: 0.375rem 0; }

/* ═══════════════════════════════════════════════════════════════
   TABLES
   ═══════════════════════════════════════════════════════════════ */

.table { --bs-table-color: var(--text-primary); }
.table th {
    font-weight: 600;
    color: var(--text-secondary);
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border-bottom: 2px solid var(--gray-200);
    white-space: nowrap;
}
.table td          { border-bottom-color: var(--gray-100); vertical-align: middle; }
.table-hover tbody tr:hover td { background-color: var(--gray-50); }
.table-striped > tbody > tr:nth-of-type(odd) > * { --bs-table-bg-type: var(--gray-50); }

/* ═══════════════════════════════════════════════════════════════
   PRODUCT TYPOGRAPHY
   ═══════════════════════════════════════════════════════════════ */

.product-title,
.product-title a {
    color: var(--text-primary);
    font-size: 0.875rem;
    line-height: 1.4;
    font-weight: 400;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.product-title a:hover { color: var(--brand-primary); text-decoration: none; }

.product-price,
.price {
    color: var(--text-primary);
    font-size: 1rem;
    font-weight: 600;
}
.old-price,
.price-strike {
    color: var(--text-tertiary);
    font-size: 0.75rem;
    text-decoration: line-through;
}
.discount-label { color: var(--danger-600); font-size: 0.75rem; font-weight: 600; }

/* ═══════════════════════════════════════════════════════════════
   RATINGS
   ═══════════════════════════════════════════════════════════════ */

.ratings i.tio-star,
.ratings i.bi-star-fill,
.ratings i.filled,
.star-rating .filled { color: #F59E0B !important; }

/* ═══════════════════════════════════════════════════════════════
   BACK TO TOP
   ═══════════════════════════════════════════════════════════════ */

.back-to-top {
    border-radius: 50%;
    background-color: var(--brand-primary);
    box-shadow: 0 4px 12px rgba(254, 106, 0, 0.35);
    transition: background-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}
.back-to-top:hover {
    background-color: var(--brand-700);
    box-shadow: 0 6px 20px rgba(254, 106, 0, 0.45);
    transform: translateY(-2px);
}

/* ═══════════════════════════════════════════════════════════════
   TOASTR NOTIFICATIONS
   ═══════════════════════════════════════════════════════════════ */

#toast-container > div         { border-radius: var(--radius-lg) !important; box-shadow: 0 4px 16px rgba(0,0,0,0.12) !important; }
#toast-container .toast-success { background-color: var(--success-600) !important; }
#toast-container .toast-error   { background-color: var(--danger-600)  !important; }
#toast-container .toast-warning { background-color: var(--warning-600) !important; }
#toast-container .toast-info    { background-color: var(--info-600)    !important; }

/* ═══════════════════════════════════════════════════════════════
   BOOTSTRAP DROPDOWN ITEMS — sort/filter header (link-hover-base)
   Matches client design: orange hover bg, bullet for selected,
   no visible radio button.
   ═══════════════════════════════════════════════════════════════ */

/* Reset the padding/border-bottom that style.css puts on all <li> */
.dropdown-menu .link-hover-base {
    padding: 0 !important;
    border-bottom: none !important;
    margin: 0.125rem 0.25rem;
}

/* Make label fill the whole row, add hover transition */
.dropdown-menu .link-hover-base label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.55rem 0.875rem;
    border-radius: var(--radius-md);
    cursor: pointer;
    width: 100%;
    margin: 0;
    color: var(--text-primary);
    font-size: 0.875rem;
    font-weight: 400;
    transition: background-color 0.12s ease, color 0.12s ease;
    user-select: none;
}

/* Hide radio button — selection state shown via CSS bullet */
.dropdown-menu .link-hover-base input[type="radio"] {
    display: none;
}

/* Bullet placeholder keeps text aligned on all rows */
.dropdown-menu .link-hover-base label::before {
    content: "";
    display: inline-block;
    width: 0.5rem;
    height: 0.5rem;
    flex-shrink: 0;
}

/* Selected: filled bullet + orange text */
.dropdown-menu .link-hover-base.selected label::before {
    content: "●";
    font-size: 0.45rem;
    color: var(--brand-primary);
    line-height: 1;
}
.dropdown-menu .link-hover-base.selected label {
    color: var(--brand-primary);
    font-weight: 500;
}

/* Hover: light orange background + orange text */
.dropdown-menu .link-hover-base:hover label {
    background-color: var(--brand-secondary);
    color: var(--brand-primary);
}

/* ═══════════════════════════════════════════════════════════════
   SELECT2 — full brand-styled dropdown matching client design
   ═══════════════════════════════════════════════════════════════ */

/* Trigger button */
.select2-container--default .select2-selection--single {
    height: 2.8125rem;
    border-color: var(--gray-200);
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    background-color: var(--bs-white, #fff);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.select2-container--default .select2-selection--single .select2-selection__rendered {
    color: var(--text-primary);
    font-size: 0.875rem;
    font-family: var(--bs-body-font-family);
    padding-left: 0.75rem;
    padding-right: 2.25rem;
    line-height: 2.8125rem;
}
.select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 2.8125rem;
    right: 0.625rem;
}
.select2-container--default.select2-container--focus .select2-selection--single,
.select2-container--default.select2-container--open .select2-selection--single {
    border-color: var(--brand-primary);
    box-shadow: 0 0 0 3px rgba(254, 106, 0, 0.15);
    outline: none;
}

/* Dropdown panel */
.select2-dropdown {
    border-color: var(--gray-200);
    border-radius: var(--radius-lg);
    box-shadow: 0 8px 24px rgba(0,0,0,0.08), 0 2px 8px rgba(0,0,0,0.04);
    overflow: hidden;
    font-family: var(--bs-body-font-family);
}

/* Options list padding */
.select2-results__options {
    padding: 0.375rem;
}

/* Each option row */
.select2-container--default .select2-results__option {
    padding: 0.55rem 0.875rem;
    font-size: 0.875rem;
    color: var(--text-primary);
    border-radius: var(--radius-md);
    transition: background-color 0.12s ease, color 0.12s ease;
}

/* Hover / keyboard-active */
.select2-container--default .select2-results__option--highlighted[aria-selected] {
    background-color: var(--brand-secondary) !important;
    color: var(--brand-primary) !important;
}

/* Currently selected option */
.select2-container--default .select2-results__option[aria-selected="true"] {
    background-color: var(--brand-secondary);
    color: var(--brand-primary);
    font-weight: 500;
}

/* Dark mode */
body[theme="dark"] .select2-container--default .select2-selection--single {
    background-color: var(--gray-100);
    border-color: var(--gray-300);
}
body[theme="dark"] .select2-container--default .select2-selection--single .select2-selection__rendered {
    color: var(--text-primary);
}
body[theme="dark"] .select2-dropdown {
    background-color: var(--gray-50);
    border-color: var(--gray-200);
}
body[theme="dark"] .select2-container--default .select2-results__option {
    color: var(--text-primary);
}

/* ═══════════════════════════════════════════════════════════════
   WISHLIST / ACTION ICON BUTTONS
   ═══════════════════════════════════════════════════════════════ */

.action-btn,
.wishlist-btn,
.quick-view-btn {
    border-radius: var(--radius-lg);
    background: rgba(255,255,255,0.9);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    color: var(--text-tertiary);
    transition: color 0.15s ease, background-color 0.15s ease;
}
.action-btn:hover,
.wishlist-btn:hover,
.quick-view-btn:hover { color: var(--brand-primary); }
.wishlist-btn.active  { color: var(--brand-primary); }

/* ═══════════════════════════════════════════════════════════════
   SWIPER / CAROUSEL NAVIGATION
   ═══════════════════════════════════════════════════════════════ */

.swiper-button-next,
.swiper-button-prev {
    background-color: #FFFFFF;
    border-radius: 50%;
    width: 44px !important;
    height: 44px !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.12);
    transition: background-color 0.15s ease, box-shadow 0.15s ease;
}
.swiper-button-next:hover,
.swiper-button-prev:hover {
    background-color: var(--brand-primary);
    box-shadow: 0 4px 16px rgba(254,106,0,0.3);
}
.swiper-button-next::after,
.swiper-button-prev::after { font-size: 14px !important; color: var(--text-primary); font-weight: 700; }
.swiper-button-next:hover::after,
.swiper-button-prev:hover::after { color: #FFFFFF; }

.swiper-pagination-bullet-active { background-color: var(--brand-primary) !important; }
.swiper-pagination-bullet         { background-color: var(--gray-300); opacity: 1; }

/* ═══════════════════════════════════════════════════════════════
   DARK MODE — COMPONENT OVERRIDES
   ═══════════════════════════════════════════════════════════════ */

body[theme="dark"] .card                  { background-color: var(--gray-50); border-color: var(--gray-200); }
body[theme="dark"] .card-header           { border-bottom-color: var(--gray-200); }
body[theme="dark"] .card-footer           { border-top-color: var(--gray-200); }
body[theme="dark"] .form-control,
body[theme="dark"] .form-select           { background-color: var(--gray-100); border-color: var(--gray-300); color: var(--text-primary); }
body[theme="dark"] .form-control:focus,
body[theme="dark"] .form-select:focus     { background-color: var(--gray-100); }
body[theme="dark"] .dropdown-menu        { background-color: var(--gray-50); border-color: var(--gray-200); }
body[theme="dark"] .dropdown-item:hover  { background-color: var(--gray-100); color: var(--text-primary); }
body[theme="dark"] .modal-content        { background-color: var(--gray-50); }
body[theme="dark"] .modal-header         { border-bottom-color: var(--gray-200); }
body[theme="dark"] .modal-footer         { border-top-color: var(--gray-200); }
body[theme="dark"] .table td             { border-bottom-color: var(--gray-200); }
body[theme="dark"] .table-hover tbody tr:hover td { background-color: var(--gray-100); }
body[theme="dark"] .swiper-button-next,
body[theme="dark"] .swiper-button-prev   { background-color: var(--gray-100); }
body[theme="dark"] .swiper-button-next::after,
body[theme="dark"] .swiper-button-prev::after { color: var(--text-primary); }

/* Footer */
body[theme="dark"] .footer              { background-color: #1A0C06; }
body[theme="dark"] .footer-top         { background-color: rgba(255,255,255,0.06); }
body[theme="dark"] .footer-bottom      { background-color: rgba(255,255,255,0.04); }
body[theme="dark"] .footer a           { color: rgba(255,255,255,0.75); }
body[theme="dark"] .footer a:hover     { color: var(--brand-primary); }
body[theme="dark"] .footer .absolute-white,
body[theme="dark"] .footer .text-absolute-white { color: rgba(255,255,255,0.85) !important; }
body[theme="dark"] .footer h2,
body[theme="dark"] .footer h4,
body[theme="dark"] .footer h5,
body[theme="dark"] .footer h6          { color: rgba(255,255,255,0.9); }
body[theme="dark"] .footer p           { color: rgba(255,255,255,0.6); }

/* Feature/service strip */
body[theme="dark"] .feature-secton     { background-color: #1F1F22; }
body[theme="dark"] .feature-section-inner { background-color: #1F1F22; }

/* ═══════════════════════════════════════════════════════════════
   NATIVE FORM ELEMENTS — accent color
   accent-color changes checkbox/radio/range/select highlight in
   Chrome 93+, Firefox 92+, Safari 15.4+. style.css already sets
   accent-color: var(--bs-primary), but that resolves to the
   PHP-injected green; our token override fixes it to orange.
   ═══════════════════════════════════════════════════════════════ */

html,
.form-select,
.form-control,
input[type="checkbox"],
input[type="radio"],
input[type="range"] {
    accent-color: var(--brand-primary);
}

/* Native select: style the control itself so the arrow is visible */
.form-select {
    border-color: var(--gray-200);
}
.form-select:focus {
    border-color: var(--brand-primary);
    box-shadow: 0 0 0 3px rgba(254, 106, 0, 0.15);
    outline: none;
}

/* Dark mode form controls background fix (our tokens already handle border) */
body[theme="dark"] .form-select,
body[theme="dark"] .form-control {
    background-color: var(--gray-100);
    color: var(--text-primary);
}


/* ═══════════════════════════════════════════════════════════════
   UTILITY CLASSES (wm- prefix)
   ═══════════════════════════════════════════════════════════════ */

.wm-text-brand    { color: var(--brand-primary); }
.wm-bg-brand      { background-color: var(--brand-primary); color: #FFFFFF; }
.wm-bg-brand-soft { background-color: var(--brand-secondary); color: var(--brand-primary); }
.wm-border-brand  { border-color: var(--brand-primary); }
.wm-rounded-xl    { border-radius: var(--radius-xl); }
.wm-rounded-lg    { border-radius: var(--radius-lg); }
.wm-rounded-md    { border-radius: var(--radius-md); }

/* ═══════════════════════════════════════════════════════════════
   MOBILE RESPONSIVE FIXES
   ═══════════════════════════════════════════════════════════════ */

/* ── Touch targets (≤767px) ─────────────────────────────────── */
/* Our padding:0 !important on <li> shifts ownership of the tap area
   entirely to the <a>/label. min-height: 44px restores WCAG 2.5.5. */
@media (max-width: 767px) {
    .dropdown-menu > li > a,
    .dropdown-item {
        min-height: 44px;
        display: flex;
        align-items: center;
        /* Bootstrap sets white-space:nowrap; allow wrapping on mobile
           so long category names don't push the panel off-screen */
        white-space: normal;
        word-break: break-word;
    }

    .dropdown-menu .link-hover-base label {
        min-height: 44px;
        white-space: normal;
        word-break: break-word;
    }

    /* App-bar dropdowns: more padding, constrained so they never
       extend beyond the viewport on narrow phones */
    .app-bar .dropdown-menu {
        min-width: 160px;
        max-width: calc(100vw - 24px);
    }
    .app-bar .dropdown-menu > li > a,
    .app-bar .dropdown-item {
        padding: 0.75rem 1rem;
    }
}

/* ── Ultra-narrow phones (≤480px) ───────────────────────────── */
@media (max-width: 480px) {
    /* Shrink app-bar dropdown min-width so it fits without horizontal scroll */
    .app-bar .dropdown-menu {
        min-width: 140px;
    }

    /* Prevent any absolutely-positioned dropdown from causing body overflow */
    .dropdown-menu,
    .sub-menu {
        max-width: calc(100vw - 16px);
    }
}

/* ── Native <select> focus ring on touch devices ────────────── */
/* Select2 is skipped on coarse-pointer devices (see webmarket-ui.js).
   These rules give native selects the brand focus ring. */
@media (pointer: coarse) {
    select:focus,
    .form-select:focus {
        border-color: var(--brand-primary) !important;
        box-shadow: 0 0 0 3px rgba(254, 106, 0, 0.15) !important;
        outline: none;
    }
}

/* ── Product action buttons — WCAG 2.5.5 44px touch target ──── */
@media (max-width: 575px) {
    .action-btn,
    .wishlist-btn,
    .quick-view-btn {
        min-width: 44px;
        min-height: 44px;
    }
}

/* ── Cart dropdown in landscape mode ────────────────────────── */
/* style.css .scrollY-60 uses max-block-size: 60vh.
   On short landscape viewports (phones, small tablets) cap it lower
   so the checkout button stays reachable. */
@media (max-height: 600px) {
    .scrollY-60 {
        max-block-size: 45vh !important;
    }
}

/* ── Header top: mobile responsive layout ───────────────────── */
/* On mobile, announcement pushes to its own full-width top row;
   phone number and language selector share the row below. */
@media (max-width: 767px) {
    /* Override Bootstrap flex-grow-1 so announcement owns the top row */
    .header-top .announcement-flipper {
        order: -1;
        flex: 0 0 100% !important;
        text-align: center;
        padding-bottom: 22px;
        margin-bottom: 0px;
        border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    }

    /* Language nav: push to right side of the phone row */
    .header-top .container > .d-flex > .nav {
        margin-left: auto;
        flex-shrink: 0;
    }

    /* Ensure the flex container wraps so the two rows stack properly */
    .header-top .container > .d-flex {
        row-gap: 4px;
    }
}