/*
 * ==========================================================
 * VYNEX GLOBAL STORE - UI COMPONENTS
 * Author: Senior Software Architect
 * ==========================================================
 */

/* Typography Helpers */
.text-xs { font-size: var(--font-size-xs) !important; }
.text-sm { font-size: var(--font-size-sm) !important; }
.text-base { font-size: var(--font-size-base) !important; }
.text-lg { font-size: var(--font-size-lg) !important; }
.text-xl { font-size: var(--font-size-xl) !important; }
.text-2xl { font-size: var(--font-size-2xl) !important; }

.fw-300 { font-weight: 300 !important; }
.fw-400 { font-weight: 400 !important; }
.fw-500 { font-weight: 500 !important; }
.fw-600 { font-weight: 600 !important; }
.fw-700 { font-weight: 700 !important; }
.fw-800 { font-weight: 800 !important; }

.text-center { text-align: center !important; }
.text-left { text-align: left !important; }
.text-right { text-align: right !important; }
.uppercase { text-transform: uppercase !important; }
.underline { text-decoration: underline !important; }

/* Colors */
.text-primary { color: var(--color-primary) !important; }
.text-white { color: var(--color-white) !important; }
.text-muted { color: var(--text-muted) !important; }
.text-gray-400 { color: var(--color-gray-400) !important; }
.text-gray-500 { color: var(--color-gray-500) !important; }
.text-danger { color: var(--color-danger) !important; }
.text-success { color: var(--color-success) !important; }

.bg-primary { background-color: var(--color-primary) !important; }
.bg-white { background-color: var(--color-white) !important; }
.bg-light { background-color: var(--color-gray-50) !important; }
.bg-dark { background-color: var(--color-gray-900) !important; }

/* Hover utilities */
.hover-primary:hover { color: var(--color-primary) !important; }
.hover-white:hover { color: var(--color-white) !important; }
.transition { transition: all var(--transition-base) !important; }

/* Borders & Shadows */
.border-1 { border: 1px solid var(--border-color) !important; }
.border-t-1 { border-top: 1px solid var(--border-color) !important; }
.border-b-1 { border-bottom: 1px solid var(--border-color) !important; }
.border-gray-700 { border-color: var(--color-gray-700) !important; }

.rounded { border-radius: var(--border-radius-md) !important; }
.rounded-lg { border-radius: var(--border-radius-lg) !important; }
.rounded-full { border-radius: var(--border-radius-full) !important; }
.rounded-b-lg { border-bottom-left-radius: var(--border-radius-lg) !important; border-bottom-right-radius: var(--border-radius-lg) !important; }
.rounded-r-full { border-top-right-radius: var(--border-radius-full) !important; border-bottom-right-radius: var(--border-radius-full) !important; }

.shadow-sm { box-shadow: var(--shadow-sm) !important; }
.shadow-md { box-shadow: var(--shadow-md) !important; }
.shadow-lg { box-shadow: var(--shadow-lg) !important; }

/* Buttons */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.75rem 1.5rem;
    font-size: var(--font-size-base);
    font-weight: 600;
    border-radius: var(--border-radius-md);
    transition: all var(--transition-base);
    cursor: pointer;
    text-align: center;
    border: 1px solid transparent;
}

.btn-primary {
    background-color: var(--color-primary);
    color: #ffffff;
}
.btn-primary:hover {
    background-color: var(--color-primary-dark);
    transform: translateY(-1px);
    box-shadow: var(--shadow-md);
}

.btn-outline {
    background-color: transparent;
    border-color: var(--color-primary);
    color: var(--color-primary);
}
.btn-outline:hover {
    background-color: var(--color-primary);
    color: #ffffff;
}

.btn-block {
    width: 100%;
    display: flex;
}

/* Forms & Inputs */
.form-group {
    margin-bottom: var(--spacing-4);
}
.form-label {
    display: block;
    margin-bottom: var(--spacing-2);
    font-weight: 500;
    font-size: var(--font-size-sm);
    color: var(--text-main);
}
.form-control {
    width: 100%;
    padding: 0.75rem 1rem;
    font-size: var(--font-size-base);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-md);
    background-color: var(--bg-surface);
    color: var(--text-main);
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}
.form-control:focus {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(255, 69, 0, 0.15); /* Primary color with opacity */
}

/* Cards (Products, Banners) */
.card {
    background-color: var(--bg-surface);
    border-radius: var(--border-radius-lg);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
    transition: box-shadow var(--transition-base), transform var(--transition-base);
    border: 1px solid var(--border-color);
}
.card:hover {
    box-shadow: var(--shadow-lg);
    transform: translateY(-4px);
}

/* Badges (Cart count, status tags) */
.badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.15rem 0.4rem;
    font-size: 0.7rem;
    font-weight: 700;
    border-radius: var(--border-radius-full);
    background-color: var(--color-danger);
    color: white;
}

/* Action Buttons (Header Icons) */
.action-btn {
    position: relative;
    color: var(--text-main);
    transition: color var(--transition-fast);
    display: flex;
    flex-direction: column;
    align-items: center;
}
.action-btn:hover {
    color: var(--color-primary);
}
.action-btn .badge {
    position: absolute;
    top: -5px;
    right: -5px;
    min-width: 18px;
    height: 18px;
}

/* Loader Splash Screen */
.page-loader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: var(--bg-surface);
    z-index: var(--z-loader);
    display: flex;
    justify-content: center;
    align-items: center;
    transition: opacity 0.5s ease;
}
.page-loader.fade-out {
    opacity: 0;
    pointer-events: none;
}
.loader-img {
    width: 80px;
    height: auto;
}
.loader-spin {
    animation: pulse 1.5s infinite cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: .5; transform: scale(0.95); }
}

/* Header & Navigation Specifics */
.sticky-header {
    position: sticky;
    top: 0;
    z-index: var(--z-sticky);
    background-color: var(--bg-surface);
    box-shadow: var(--shadow-sm);
}

.search-input {
    border: 2px solid var(--border-color);
    transition: border-color var(--transition-fast);
}
.search-input:focus {
    border-color: var(--color-primary);
}

/* Mega Menu */
.has-dropdown {
    position: relative;
}
.mega-menu {
    position: absolute;
    top: 100%;
    left: 0;
    width: 100vw;
    background-color: var(--bg-surface);
    border-top: 1px solid var(--border-color);
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: all var(--transition-fast);
    z-index: var(--z-dropdown);
}
.has-dropdown:hover .mega-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}