/* =========================================
   1. VARIABLES Y CONFIGURACIÓN
   ========================================= */
:root {
    /* --- COLORS (BRAND RED & PREMIUM NEUTRALS) --- */
    --primary: #D31628;
    --primary-dark: #A1111E;
    --primary-soft: #FEE2E2;
    --primary-light: rgba(211, 22, 40, 0.08);
    --primary-gradient: linear-gradient(135deg, #D31628 0%, #A1111E 100%);
    --accent: #D31628;
    --success: #10b981;
    --success-dark: #059669;

    --text-main: #1e293b;
    --text-light: #64748b;
    --text-dark: #0f172a;

    --bg-body: #F1F5F9;
    --bg-main: #f8fafc;
    --bg-card: #ffffff;
    --bg-subtle: #f8fafc;
    --bg-input: #f8fafc;
    --border: #e2e8f0;

    /* --- PREMIUM ROUNDING (HIGH RADIUS) --- */
    --radius: 32px;
    --radius-lg: 28px;
    --radius-md: 18px;
    --radius-sm: 12px;
    --radius-pill: 50px;

    /* --- PREMIUM SHADOWS (SOFT & DEEP) --- */
    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.04);
    --shadow-card: 0 10px 30px -5px rgba(0, 0, 0, 0.05), 0 5px 15px -5px rgba(0, 0, 0, 0.02);
    --shadow-float: 0 20px 50px -10px rgba(0, 0, 0, 0.12), 0 10px 20px -10px rgba(0, 0, 0, 0.05);
    --shadow-primary: 0 10px 20px -5px rgba(211, 22, 40, 0.3);

    /* Native Safe Areas */
    --safe-top: env(safe-area-inset-top, 0px);
    --safe-bottom: env(safe-area-inset-bottom, 0px);

    /* --- FONTS --- */
    --font-heading: 'Outfit', 'Inter', system-ui, sans-serif;
    --font-body: 'Inter', system-ui, sans-serif;
}


* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: var(--font-body);
}

/* Standard Body Base */
body {
    color: var(--text-main);
    background-color: var(--bg-body);
    font-family: var(--font-body);
    line-height: 1.5;
    margin: 0;
    transition: background-color 0.3s ease, color 0.3s ease;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: var(--font-heading);
}

/* Apply transition to other components */
.card-product,
.glass-card,
.main-header,
.mobile-nav,
.input-field,
.modal-content,
.btn,
.search-container {
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

/* =========================================
   NUCLEAR RESET FOR SEARCH BAR BORDERS (Phase 15 Final Fix)
   ========================================= */
/* Ensure containers are absolutely transparent and borderless */
.dashboard-controls,
.search-container,
.control-search {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    outline: none !important;
    border-radius: 0 !important;
    padding: 0 !important;
}

/* Ensure ONLY the input has the pill border */
.control-search input {
    background: white !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: var(--radius-pill) !important;
    box-shadow: none !important;
    /* Force remove Safari/Mac Native Styles */
    -webkit-appearance: none !important;
    appearance: none !important;
    /* Remove any weird outer glows */
    outline: none !important;
}

/* Active State */
.control-search input:focus {
    border-color: var(--primary) !important;
    box-shadow: 0 0 0 4px var(--primary-soft) !important;
    outline: none !important;
}

/* Mobile Specific Safety */
@media (max-width: 768px) {
    .dashboard-controls {
        flex-direction: column;
    }
}