/**
 * Custom Styles - Theme Overrides
 * These styles work with theme CSS variables
 */

/* ================================
   Form Controls
================================ */
.form-control {
    border-color: var(--border-color, #e5e7eb);
    border-radius: var(--border-radius, 8px);
}

.form-control:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px var(--soft-primary, rgba(230, 46, 4, 0.15));
}

/* ================================
   Buttons
================================ */
.btn-primary {
    background-color: var(--primary);
    border-color: var(--primary);
}

.btn-primary:hover,
.btn-primary:focus {
    background-color: var(--hov-primary, var(--primary-dark));
    border-color: var(--hov-primary, var(--primary-dark));
}

.btn-outline-primary {
    color: var(--primary);
    border-color: var(--primary);
}

.btn-outline-primary:hover,
.btn-outline-primary:focus {
    background-color: var(--primary);
    border-color: var(--primary);
    color: #fff;
}

/* ================================
   Cards
================================ */
.card {
    background: var(--card-bg, #fff);
    border-color: var(--border-color, #e5e7eb);
    border-radius: var(--border-radius, 8px);
}

/* ================================
   Links
================================ */
a {
    color: var(--primary);
}

a:hover {
    color: var(--hov-primary, var(--primary-dark));
}

/* ================================
   Alerts
================================ */
.alert-success {
    background-color: rgba(var(--success-rgb, 133, 181, 103), 0.1);
    border-color: var(--success);
    color: var(--success);
}

.alert-danger {
    background-color: rgba(var(--danger-rgb, 255, 98, 98), 0.1);
    border-color: var(--danger);
    color: var(--danger);
}

.alert-warning {
    background-color: rgba(var(--warning-rgb, 255, 199, 0), 0.1);
    border-color: var(--warning);
    color: #856404;
}

.alert-info {
    background-color: rgba(var(--info-rgb, 52, 144, 220), 0.1);
    border-color: var(--info);
    color: var(--info);
}

/* ================================
   Badges
================================ */
.badge-primary {
    background-color: var(--primary);
}

.badge-success {
    background-color: var(--success);
}

.badge-danger {
    background-color: var(--danger);
}

.badge-warning {
    background-color: var(--warning);
    color: #333;
}

.badge-info {
    background-color: var(--info);
}

/* ================================
   Text Colors
================================ */
.text-primary {
    color: var(--primary) !important;
}

.text-success {
    color: var(--success) !important;
}

.text-danger {
    color: var(--danger) !important;
}

.text-warning {
    color: var(--warning) !important;
}

.text-info {
    color: var(--info) !important;
}

.text-dark {
    color: var(--dark) !important;
}

.text-gray {
    color: var(--gray) !important;
}

/* ================================
   Background Colors
================================ */
.bg-primary {
    background-color: var(--primary) !important;
}

.bg-soft-primary {
    background-color: var(--soft-primary, rgba(230, 46, 4, 0.15)) !important;
}

.bg-light {
    background-color: var(--light) !important;
}

/* ================================
   Border Colors
================================ */
.border-primary {
    border-color: var(--primary) !important;
}

.border-light {
    border-color: var(--border-color, #e5e7eb) !important;
}

/* ================================
   Pagination
================================ */
.pagination .page-link {
    color: var(--dark);
    border-color: var(--border-color, #e5e7eb);
}

.pagination .page-item.active .page-link {
    background-color: var(--primary);
    border-color: var(--primary);
    color: #fff;
}

.pagination .page-link:hover {
    color: var(--primary);
    border-color: var(--primary);
}

/* ================================
   Dropdown
================================ */
.dropdown-item.active,
.dropdown-item:active {
    background-color: var(--primary);
    color: #fff;
}

.dropdown-item:hover {
    background-color: var(--soft-primary, rgba(230, 46, 4, 0.1));
}

/* ================================
   Modal
================================ */
.modal-header {
    border-bottom-color: var(--border-color, #e5e7eb);
}

.modal-footer {
    border-top-color: var(--border-color, #e5e7eb);
}

/* ================================
   Tables
================================ */
.table thead th {
    border-bottom-color: var(--border-color, #e5e7eb);
}

.table td, .table th {
    border-top-color: var(--border-color, #e5e7eb);
}

/* ================================
   Spinners
================================ */
.spinner-border.text-primary {
    color: var(--primary) !important;
}

/* ================================
   Progress Bars
================================ */
.progress-bar {
    background-color: var(--primary);
}

/* ================================
   Nav & Tabs
================================ */
.nav-link {
    color: var(--gray);
}

.nav-link:hover {
    color: var(--primary);
}

.nav-link.active {
    color: var(--primary);
}

.nav-tabs .nav-link.active {
    border-color: var(--border-color, #e5e7eb);
    border-bottom-color: transparent;
}

.nav-pills .nav-link.active {
    background-color: var(--primary);
    color: #fff;
}

/* ================================
   Global Mobile Overrides
================================ */
@media (max-width: 576px) {
    /* Prevent iOS zoom on input focus */
    input[type="text"],
    input[type="email"],
    input[type="password"],
    input[type="number"],
    input[type="tel"],
    input[type="url"],
    input[type="search"],
    select,
    textarea {
        font-size: 16px !important;
    }

    /* Responsive modals */
    .modal-lg,
    .modal-xl {
        max-width: calc(100vw - 1rem);
        margin: 0.5rem;
    }

    .modal-dialog {
        margin: 0.5rem;
    }

    .modal-body {
        padding: 1rem;
    }

    /* Touch-friendly pagination (WCAG 2.5.8: 44px minimum) */
    .pagination .page-link {
        padding: 0.5rem 0.75rem;
        font-size: 0.875rem;
        min-width: 44px;
        min-height: 44px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    /* Touch-friendly links in footer and nav */
    footer a,
    .footer a,
    .aiz-footer a {
        display: inline-block;
        min-height: 44px;
        line-height: 44px;
    }

    /* Touch-friendly breadcrumb links */
    .breadcrumb-item a {
        display: inline-flex;
        align-items: center;
        min-height: 44px;
    }

    /* Touch-friendly dropdown items */
    .dropdown-item {
        min-height: 44px;
        display: flex;
        align-items: center;
        padding: 0.5rem 1rem;
    }

    /* Ensure table-responsive works */
    .table-responsive {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* Full-width buttons on mobile */
    .btn-block-sm {
        display: block;
        width: 100%;
    }

    /* Minimum readable font sizes */
    small,
    .small,
    .text-xs,
    .fs-10,
    .fs-11 {
        font-size: 12px !important;
    }

    /* Headings minimum readable size — body prefix for specificity */
    body h4, body .h4 { font-size: 16px !important; }
    body h5, body .h5 { font-size: 14px !important; }
    body h6, body .h6 { font-size: 13px !important; }

    /* Footer text readable */
    footer,
    .footer,
    .aiz-footer {
        font-size: 13px;
    }

    footer small,
    footer .small,
    .footer small,
    .footer .small,
    .aiz-footer small,
    .aiz-footer .small {
        font-size: 12px !important;
    }

    /* Badge minimum readable size — body prefix beats theme .badge !important */
    body .badge,
    span.badge,
    a.badge {
        font-size: 12px !important;
        padding: 0.35em 0.65em;
    }

    /* Product card hover action buttons (wishlist/compare) */
    .aiz-p-hov-icon a,
    .aiz-p-hov-icon button {
        min-width: 44px;
        min-height: 44px;
        padding: 10px;
    }

    /* Header login/register links and icon buttons */
    .top-navbar a,
    a.opacity-60.hov-opacity-100,
    a.text-reset.opacity-60 {
        min-height: 44px;
        min-width: 44px;
        display: inline-flex;
        align-items: center;
    }

    /* Header action buttons (cart, close) */
    a.p-2.d-block,
    button.btn.px-2 {
        min-width: 44px;
        min-height: 44px;
    }

    /* Currency/language dropdown */
    .top-navbar .dropdown-toggle,
    a.dropdown-toggle.text-secondary {
        min-width: 44px;
        min-height: 44px;
        display: inline-flex;
        align-items: center;
    }

    /* Footer accordion buttons */
    .aiz-accordion {
        min-height: 44px;
        padding-top: 10px;
        padding-bottom: 10px;
        display: flex;
        align-items: center;
    }

    /* Footer accordion panel links */
    .aiz-accordion-panel a {
        min-height: 44px;
        display: inline-flex;
        align-items: center;
    }

    /* Footer widget links */
    .footer-widget a.fs-13,
    a.fs-13.text-soft-light {
        min-height: 44px;
        min-width: 44px;
        display: inline-flex;
        align-items: center;
    }

    /* Sort dropdown and form selects */
    select.form-select,
    select.form-select-sm,
    .form-select-sm {
        min-height: 44px !important;
    }

    /* Footer newsletter input */
    .footer-widget input.form-control,
    .footer-widget .form-control {
        min-height: 44px;
    }

    /* Prevent body horizontal overflow */
    body {
        overflow-x: hidden;
    }
}