/* =========================================================
   Accessibility (a11y) overrides
   Loaded after the theme CSS to fix contrast, touch-target
   size and focus visibility on the public frontend.
   ========================================================= */

/* ---------------------------------------------------------
   1. Colour contrast fixes (target >= 4.5:1 on light bg)
   --------------------------------------------------------- */

/* Brand yellow used as text on white/light surfaces */
.text-secondary {
    color: #b37400 !important;
}

/* Yellow outline buttons: dark text on white gives much better contrast */
.btn-outline-secondary {
    color: #b37400 !important;
    border-color: #b37400 !important;
}

/* Solid yellow buttons: keep white text across the site */
.btn-secondary {
    color: #ffffff !important;
}

.btn-outline-secondary {
    color: #b37400 !important;
    border-color: #b37400 !important;
}

/* Category badges: dark maroon text on the light pink tinted background */
.theme-2-menu .card .cat-name,
.card .cat-name,
.favourite .cat-name,
.item-details .cat-name {
    color: #4a101a !important;
}

/* Low-contrast grey body/helper text on white */
.quality .quality-wrapper .quality-content p,
.sp-loading,
.sku-title,
#sales-booster-popup .close {
    color: #595959 !important;
}

/* Medium-contrast grey that is still a bit light */
.item-details .item-description p,
.checkout-view .heading span,
.address-list .address-card .address p,
.continue-shopping,
.category-swipe-hint {
    color: #495057 !important;
}

/* Product card + modal descriptions: readable, neutral color on desktop & mobile */
.card .item-description,
.modalitemdetails .item-description,
.menu-special .item-description,
.listing-view .item-description {
    color: #555 !important;
    font-style: normal !important;
    line-height: 1.45;
}

/* Placeholders are often too light */
.form-control::placeholder,
.form-control::-webkit-input-placeholder,
.form-control::-moz-placeholder,
.form-control:-ms-input-placeholder,
.form-control::-ms-input-placeholder {
    color: #757575 !important;
    opacity: 1 !important;
}

.auth_form .form-control::placeholder,
.auth_form .form-control::-webkit-input-placeholder,
.auth_form .form-control::-moz-placeholder,
.auth_form .form-control:-ms-input-placeholder,
.auth_form .form-control::-ms-input-placeholder {
    color: #595959 !important;
    opacity: 1 !important;
}

/* ---------------------------------------------------------
   2. Touch target size & spacing (mobile / tablet)
   --------------------------------------------------------- */
@media (max-width: 991.98px) {

    /* Generic interactive controls */
    .btn,
    button,
    a.btn,
    .page-link,
    .nav-link,
    .dropdown-item,
    .form-control,
    .form-select,
    textarea {
        min-height: 44px;
    }

    /* Header / footer / social icon boxes */
    .header-bar .header-box,
    .footer .footer-box,
    .social-icon-box,
    .item-details .icon-box,
    .address-icon {
        min-width: 44px;
        min-height: 44px;
    }

    /* Heart / wishlist / favourite icons */
    .heart-icon,
    .heart-icon-3,
    .heart-icon-6,
    .heart-icon-8 {
        min-width: 44px;
        min-height: 44px;
    }

    /* Product card add-to-cart & quick-action links */
    .card-7.product-grid .add-to-cart,
    .card-7.product-list .add-to-cart,
    .theme-4 .product-grid .product-links li,
    .theme-4-list .product-grid .product-links li,
    .theme-5 .product-links li,
    .theme-5-list .product-links li,
    .view-list-grid {
        min-width: 44px;
        min-height: 44px;
    }

    /* Quantity controls in product cards / cart */
    .btn.item-quantity-2,
    .btn-plus {
        min-width: 44px;
        min-height: 44px;
    }

    .item-quantity {
        width: auto;
        min-width: 120px;
    }

    .item-quantity .item-quantity-minus,
    .item-quantity .item-quantity-plus {
        min-width: 44px;
        min-height: 44px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    .item-quantity input {
        min-width: 44px;
        text-align: center;
    }

    .product-quantity .quantity {
        height: auto;
        min-height: 44px;
    }

    .product-quantity .quantity button {
        min-width: 44px;
        min-height: 44px;
    }

    .qtladd > li > button {
        min-width: 44px;
        min-height: 44px;
        padding: 0.5rem 0.75rem;
    }

    /* Cart / checkout small action buttons */
    .tbl_pr_action .tbl_remove {
        min-width: 44px;
        min-height: 44px;
    }

    .btn-allergens {
        min-width: 44px;
        min-height: 44px;
        font-size: 12px;
    }

    /* Address / payment radio custom indicators */
    .address-list .address-input .check-icon,
    .payment-option .form-check-label .check-icon {
        min-width: 44px;
        min-height: 44px;
    }

    /* Navigation */
    .category-nav-btns .btn {
        width: 44px;
        height: 44px;
    }

    .navbar-container .hamburger-lines {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: 44px;
        min-height: 44px;
    }

    /* Carousel controls */
    .frequently_together .owl-nav .owl-next,
    .frequently_together .owl-nav .owl-prev,
    .carousel-control-next,
    .carousel-control-prev {
        min-width: 44px;
        min-height: 44px;
    }

    /* Progress / avatar / team social / small image arrows */
    .progress-step .step-count,
    .avatar-upload .avatar-edit input + label,
    .team-5 .our-team .social-links li a,
    .small-img .icon-left,
    .small-img .icon-right {
        min-width: 44px;
        min-height: 44px;
    }

    /* Add a little spacing between stacked adjacent touch targets */
    .product-links li,
    .social-icon-box,
    .header-bar .header-box,
    .footer .footer-box {
        margin: 2px;
    }
}

/* ---------------------------------------------------------
   3. Focus visibility
   The theme removes outlines globally, so restore a clear
   focus indicator for keyboard navigation.
   --------------------------------------------------------- */
:focus-visible {
    outline: 3px solid var(--bs-primary);
    outline-offset: 2px;
}

button:focus-visible,
.btn:focus-visible,
a:focus-visible,
.form-control:focus-visible,
.form-select:focus-visible,
input:focus-visible,
textarea:focus-visible {
    outline: 3px solid var(--bs-primary);
    outline-offset: 2px;
}