/**
 * CarKIP - Main Stylesheet
 * Design system with Bootstrap 5 base
 * Light theme default + Dark Mode toggle
 *
 * Table of Contents:
 * 1. CSS Variables
 * 2. Base Styles
 * 3. Typography
 * 4. Navbar
 * 5. Buttons
 * 6. Cards & Widgets
 * 7. Forms
 * 8. Badges
 * 9. Footer
 * 10. Auth Pages (Login/Signup)
 * 11. Utilities & Animations
 * 12. Responsive
 */

/* ==========================================================================
   1. CSS Variables
   ========================================================================== */

:root {
    /* Primary Colors */
    --ck-black: #0d0d0d;
    --ck-black-soft: #1a1a1a;
    --ck-red: #e63946;
    --ck-red-dark: #c1121f;
    --ck-red-light: #fef7f7;
    --ck-red-bright: #ff4757;
    --ck-red-glow: rgba(230, 57, 70, 0.25);

    /* Gray Scale */
    --ck-gray-dark: #2d2d2d;
    --ck-gray: #6c757d;
    --ck-gray-light: #f4f4f4;
    --ck-gray-border: #e0e0e0;

    /* Accent Colors */
    --ck-white: #ffffff;
    --ck-yellow: #ffc107;
    --ck-yellow-dark: #e0a800;
    --ck-green: #28a745;
    --ck-blue: #0d6efd;

    /* Shadows */
    --ck-shadow-sm: 0 2px 8px rgba(0,0,0,0.04);
    --ck-shadow-md: 0 4px 20px rgba(0,0,0,0.08);
    --ck-shadow-lg: 0 8px 30px rgba(0,0,0,0.1);
    --ck-shadow-xl: 0 20px 60px rgba(0,0,0,0.15);

    /* Border Radius */
    --ck-radius-sm: 6px;
    --ck-radius-md: 8px;
    --ck-radius-lg: 12px;
    --ck-radius-xl: 16px;
    --ck-radius-full: 50%;
    --ck-radius-pill: 20px;

    /* Transitions */
    --ck-transition: all 0.2s ease;
    --ck-transition-slow: all 0.3s ease;

    /* Z-Index */
    --ck-z-dropdown: 1000;
    --ck-z-sticky: 1020;
    --ck-z-fixed: 1030;
    --ck-z-modal: 1050;

    /* Semantic Colors */
    --ck-surface: #ffffff;
    --ck-border: #e0e0e0;
    --ck-text: #0d0d0d;

    /* Typography */
    --ck-font-display: 'Bebas Neue', 'Impact', sans-serif;
    --ck-font-body: 'Outfit', -apple-system, BlinkMacSystemFont, sans-serif;
}

/* ==========================================================================
   Dark Mode Theme
   ========================================================================== */

body.dark-mode {
    --ck-black: #f5f5f5;
    --ck-black-soft: #e8e8e8;
    --ck-red: #ff5a67;
    --ck-red-dark: #ff4d5a;
    --ck-red-light: #2d1a1b;

    --ck-gray-dark: #e0e0e0;
    --ck-gray: #b0b0b0;
    --ck-gray-light: #121212;
    --ck-gray-border: #2d2d2d;

    --ck-white: #1a1a1a;
    --ck-yellow: #ffd54f;
    --ck-yellow-dark: #ffc107;
    --ck-green: #4caf50;
    --ck-blue: #42a5f5;

    --ck-shadow-sm: 0 2px 8px rgba(0,0,0,0.4);
    --ck-shadow-md: 0 4px 20px rgba(0,0,0,0.5);
    --ck-shadow-lg: 0 8px 30px rgba(0,0,0,0.6);
    --ck-shadow-xl: 0 20px 60px rgba(0,0,0,0.7);

    --ck-surface: #1a1a1a;
    --ck-border: #2d2d2d;
    --ck-text: #f5f5f5;
}

body.dark-mode .navbar-ck { background: #0d0d0d !important; }

body.dark-mode .card,
body.dark-mode .widget-card,
body.dark-mode .feed-card,
body.dark-mode .search-box-hero {
    background-color: var(--ck-white);
    border-color: var(--ck-gray-border);
    color: var(--ck-black);
}

body.dark-mode .form-control,
body.dark-mode .form-select {
    background-color: var(--ck-gray-light);
    border-color: var(--ck-gray-border);
    color: var(--ck-black);
}

body.dark-mode .form-control:focus,
body.dark-mode .form-select:focus {
    background-color: var(--ck-gray-light);
    border-color: var(--ck-red);
    color: var(--ck-black);
}

body.dark-mode .dropdown-menu {
    background-color: var(--ck-white);
    border-color: var(--ck-gray-border);
}

body.dark-mode .dropdown-item { color: var(--ck-black); }
body.dark-mode .dropdown-item:hover { background-color: var(--ck-gray-light); }

body.dark-mode .text-muted { color: var(--ck-gray) !important; }
body.dark-mode img:not(.avatar-nav) { opacity: 0.9; }

body.dark-mode .border,
body.dark-mode .border-bottom,
body.dark-mode .border-top {
    border-color: var(--ck-gray-border) !important;
}

body.dark-mode hr { border-color: var(--ck-gray-border); opacity: 1; }
body.dark-mode .bg-light { background-color: var(--ck-gray-light) !important; }

body.dark-mode .provider-card {
    background: var(--ck-white);
    border-color: var(--ck-gray-border);
    color: var(--ck-black);
}

body.dark-mode .brands-section { background: var(--ck-white); }
body.dark-mode .providers-section { background: var(--ck-gray-light); }

/* Dark Mode Toggle */
#darkModeToggle { transition: transform 0.3s ease; }
#darkModeToggle:hover { transform: scale(1.1); }
body.dark-mode #darkModeToggle i { color: var(--ck-yellow) !important; }

/* ==========================================================================
   2. Base Styles
   ========================================================================== */

* {
    font-family: var(--ck-font-body);
}

body {
    background-color: var(--ck-gray-light);
    color: var(--ck-black);
    line-height: 1.6;
}

a {
    color: var(--ck-red);
    text-decoration: none;
    transition: var(--ck-transition);
}

a:hover { color: var(--ck-red-dark); }
img { max-width: 100%; height: auto; }

::selection {
    background: var(--ck-red);
    color: #fff;
}

/* ==========================================================================
   3. Typography
   ========================================================================== */

h1, h2, h3, h4, h5, h6 {
    font-weight: 700;
    line-height: 1.3;
    color: var(--ck-black);
}

.text-red { color: var(--ck-red) !important; }
.text-yellow { color: var(--ck-yellow) !important; }
.text-green { color: var(--ck-green) !important; }
.text-gray { color: var(--ck-gray) !important; }
.bg-red { background-color: var(--ck-red) !important; }
.bg-black { background-color: var(--ck-black) !important; }

/* ==========================================================================
   4. Navbar
   ========================================================================== */

.navbar-ck {
    background: var(--ck-black) !important;
    padding: 0.75rem 0;
}

.navbar-ck .navbar-brand {
    font-family: var(--ck-font-display);
    font-weight: 800;
    font-size: 1.8rem;
    color: #fff !important;
    letter-spacing: 0.04em;
}

.navbar-ck .navbar-brand span { color: var(--ck-red); }

.nav-ck .nav-link {
    color: rgba(255,255,255,0.7);
    font-weight: 500;
    padding: 0.5rem 1rem;
    border-radius: var(--ck-radius-sm);
    transition: var(--ck-transition);
}

.nav-ck .nav-link:hover {
    color: #fff;
    background: rgba(255,255,255,0.1);
}

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

.nav-ck .nav-link i { margin-right: 6px; }

/* Search Input in Navbar */
.search-input {
    background: var(--ck-gray-dark);
    border: none;
    color: #fff;
    border-radius: var(--ck-radius-pill);
    padding: 0.5rem 1rem;
    width: 280px;
}

.search-input::placeholder { color: rgba(255,255,255,0.5); }
.search-input:focus { background: var(--ck-gray-dark); color: #fff; box-shadow: 0 0 0 2px var(--ck-red); }

/* Avatar Nav */
.avatar-nav {
    width: 38px;
    height: 38px;
    border-radius: var(--ck-radius-full);
    border: 2px solid var(--ck-red);
    object-fit: cover;
    transition: var(--ck-transition);
}

.avatar-nav:hover {
    transform: scale(1.05);
    box-shadow: 0 0 0 3px rgba(230, 57, 70, 0.3);
}

/* Country Badge (logged-in user) */
.navbar-ck .country-badge,
.navbar-ck .country-badge span {
    color: #fff !important;
    font-size: 0.9rem;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.5rem 0.75rem;
}

/* Country Dropdown */
.country-dropdown .dropdown-toggle {
    background: var(--ck-gray-dark);
    border: none;
    color: #fff;
    padding: 0.5rem 0.75rem;
    border-radius: var(--ck-radius-sm);
    font-size: 0.9rem;
}

.country-dropdown .dropdown-menu { max-height: 400px; overflow-y: auto; }
.country-dropdown .dropdown-item { padding: 0.5rem 1rem; font-size: 0.9rem; }
.country-dropdown .dropdown-item:hover { background: var(--ck-red-light); color: var(--ck-red); }

/* Navbar toggler for mobile */
.navbar-ck .navbar-toggler {
    border-color: rgba(255,255,255,0.2);
    padding: 0.4rem 0.6rem;
}

.navbar-ck .navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 0.7%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

/* ==========================================================================
   5. Buttons
   ========================================================================== */

.btn-red {
    background: var(--ck-red);
    color: #fff;
    border: none;
    transition: var(--ck-transition);
}

.btn-red:hover { background: var(--ck-red-dark); color: #fff; }

.btn-outline-red {
    border: 1px solid var(--ck-red);
    color: var(--ck-red);
    background: transparent;
}

.btn-outline-red:hover { background: var(--ck-red); color: #fff; }

.btn-premium {
    background: var(--ck-yellow);
    color: var(--ck-black);
    font-weight: 600;
    border-radius: var(--ck-radius-pill);
    border: none;
}

.btn-premium:hover { background: var(--ck-yellow-dark); color: var(--ck-black); }

/* ==========================================================================
   6. Cards & Widgets
   ========================================================================== */

.card-ck {
    background: var(--ck-white);
    border: 1px solid var(--ck-gray-border);
    border-radius: var(--ck-radius-lg);
    transition: var(--ck-transition);
}

.card-ck:hover {
    box-shadow: var(--ck-shadow-md);
    border-color: var(--ck-red);
}

/* Widget Card */
.widget-card {
    background: var(--ck-white);
    border: 1px solid var(--ck-gray-border);
    border-radius: var(--ck-radius-lg);
    padding: 1.25rem;
    height: 100%;
}

.widget-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
}

.widget-header h6 {
    font-weight: 700;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.widget-header h6 i { color: var(--ck-red); }
.widget-header a { font-size: 0.85rem; color: var(--ck-red); }

/* Section Title */
.section-title {
    font-weight: 700;
    font-size: 1.25rem;
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.section-title i { color: var(--ck-red); }

/* ==========================================================================
   7. Forms
   ========================================================================== */

.form-control:focus,
.form-select:focus {
    border-color: var(--ck-red);
    box-shadow: 0 0 0 3px rgba(230, 57, 70, 0.1);
}

.form-check-input:checked {
    background-color: var(--ck-red);
    border-color: var(--ck-red);
}

/* Filter Pills */
.filter-pill {
    background: var(--ck-gray-light);
    border: none;
    padding: 0.4rem 1rem;
    border-radius: var(--ck-radius-pill);
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--ck-gray-dark);
    transition: var(--ck-transition);
}

.filter-pill:hover, .filter-pill.active { background: var(--ck-red); color: #fff; }

/* ==========================================================================
   8. Badges
   ========================================================================== */

.badge-pro {
    background: var(--ck-yellow);
    color: var(--ck-black);
    font-size: 0.65rem;
    padding: 2px 6px;
    border-radius: 4px;
    font-weight: 600;
}

.badge-dealer {
    background: var(--ck-red);
    color: #fff;
    font-size: 0.65rem;
    padding: 2px 6px;
    border-radius: 4px;
    font-weight: 600;
}

/* Status Dots */
.status-dot { width: 10px; height: 10px; border-radius: var(--ck-radius-full); display: inline-block; }
.status-available { background: var(--ck-green); }
.status-busy { background: var(--ck-yellow); }
.status-offline { background: var(--ck-red); }

/* ==========================================================================
   9. Footer
   ========================================================================== */

.footer-ck {
    background: var(--ck-black);
    color: #fff;
    padding: 3rem 0 1.5rem;
}

.footer-brand {
    font-family: var(--ck-font-display);
    font-weight: 800;
    font-size: 1.8rem;
    margin-bottom: 0.5rem;
    letter-spacing: 0.04em;
}

.footer-brand span { color: var(--ck-red); }
.footer-links { list-style: none; padding: 0; }
.footer-links li { margin-bottom: 0.5rem; }
.footer-links a { color: rgba(255,255,255,0.6); font-size: 0.9rem; }
.footer-links a:hover { color: var(--ck-red); }
.footer-title { font-weight: 600; margin-bottom: 1rem; }

.social-link {
    width: 36px;
    height: 36px;
    background: var(--ck-gray-dark);
    border-radius: var(--ck-radius-full);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    margin-right: 0.5rem;
    transition: var(--ck-transition);
}

.social-link:hover { background: var(--ck-red); color: #fff; }

/* ==========================================================================
   10. Auth Pages (Login / Signup)
   ========================================================================== */

.auth-layout { display: flex; min-height: 100vh; }

.auth-brand {
    flex: 0 0 50%;
    background: #0d0d0d;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 3rem;
    position: relative;
    overflow: hidden;
}

.auth-brand::before {
    content: '';
    position: absolute;
    top: -20%; right: -5%;
    width: 120px; height: 140%;
    background: linear-gradient(180deg, transparent, var(--ck-red), transparent);
    opacity: 0.06;
    transform: rotate(15deg);
}

.auth-brand::after {
    content: '';
    position: absolute;
    top: -20%; right: 6%;
    width: 2px; height: 140%;
    background: linear-gradient(180deg, transparent, var(--ck-red), transparent);
    opacity: 0.15;
    transform: rotate(15deg);
}

.auth-brand-pattern {
    position: absolute; inset: 0; opacity: 0.03;
    background-image:
        linear-gradient(45deg, #fff 25%, transparent 25%),
        linear-gradient(-45deg, #fff 25%, transparent 25%),
        linear-gradient(45deg, transparent 75%, #fff 75%),
        linear-gradient(-45deg, transparent 75%, #fff 75%);
    background-size: 4px 4px;
    background-position: 0 0, 0 2px, 2px -2px, -2px 0;
}

.auth-brand-content { position: relative; z-index: 2; text-align: center; max-width: 420px; }

.auth-brand-logo {
    font-family: var(--ck-font-display);
    font-size: 4.5rem;
    color: #eaeaec;
    letter-spacing: 0.06em;
    line-height: 1;
    margin-bottom: 1rem;
}

.auth-brand-logo span { color: var(--ck-red); }

.auth-brand-tagline {
    font-family: var(--ck-font-display);
    font-size: 1.5rem;
    color: #8e8e96;
    letter-spacing: 0.15em;
    margin-bottom: 2.5rem;
}

.auth-brand-features { text-align: left; display: flex; flex-direction: column; gap: 1rem; }
.auth-brand-feature { display: flex; align-items: center; gap: 0.8rem; color: #8e8e96; font-size: 0.9rem; }
.auth-brand-feature i { color: var(--ck-red); font-size: 1.1rem; width: 20px; text-align: center; }

.auth-brand-divider {
    width: 60px; height: 3px;
    background: var(--ck-red);
    border-radius: 2px;
    margin: 2rem auto;
    box-shadow: 0 0 15px var(--ck-red-glow);
}

.auth-form-panel {
    flex: 0 0 50%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 3rem;
    background: #131316;
    position: relative;
}

.auth-form-panel::before {
    content: '';
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 3px;
    background: linear-gradient(90deg, var(--ck-red), transparent 60%);
}

.auth-form-wrapper { width: 100%; max-width: 400px; }

.auth-form-title {
    font-family: var(--ck-font-display);
    font-size: 2.5rem;
    color: #eaeaec;
    margin-bottom: 0.3rem;
    letter-spacing: 0.04em;
}

.auth-form-subtitle { color: #8e8e96; font-size: 0.95rem; margin-bottom: 2rem; }

.auth-step { display: none; animation: fadeSlideUp 0.3s ease forwards; }
.auth-step.active { display: block; }

@keyframes fadeSlideUp {
    from { opacity: 0; transform: translateY(12px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Auth form inputs (dark background) */
.auth-form-panel .form-input-ck,
.auth-form-panel .form-select-ck {
    background: #1a1a1f;
    border-color: #2a2a32;
    color: #eaeaec;
}

.auth-form-panel .form-input-ck:focus,
.auth-form-panel .form-select-ck:focus {
    border-color: var(--ck-red);
    box-shadow: 0 0 0 3px var(--ck-red-glow);
    background: #1a1a1f;
}

.auth-form-panel .form-input-ck::placeholder { color: #55555e; }
.auth-form-panel .form-label-ck { color: #8e8e96; }

.form-group-ck { margin-bottom: 1.25rem; }

.form-label-ck {
    display: block;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--ck-gray);
    margin-bottom: 0.4rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.form-input-ck {
    width: 100%;
    padding: 0.75rem 1rem;
    font-family: var(--ck-font-body);
    font-size: 0.95rem;
    color: var(--ck-black);
    background: var(--ck-gray-light);
    border: 1px solid var(--ck-gray-border);
    border-radius: var(--ck-radius-sm);
    transition: var(--ck-transition);
    outline: none;
}

.form-input-ck:focus {
    border-color: var(--ck-red);
    box-shadow: 0 0 0 3px rgba(230,57,70,0.1);
}

.form-input-ck:focus-visible {
    outline: 2px solid var(--ck-red);
    outline-offset: 2px;
}

.form-select-ck {
    width: 100%;
    padding: 0.75rem 2.5rem 0.75rem 1rem;
    font-family: var(--ck-font-body);
    font-size: 0.95rem;
    color: var(--ck-black);
    background: var(--ck-gray-light);
    border: 1px solid var(--ck-gray-border);
    border-radius: var(--ck-radius-sm);
    transition: var(--ck-transition);
    outline: none;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath fill='%238e8e96' d='M4.427 6.427l3.396 3.396a.25.25 0 00.354 0l3.396-3.396A.25.25 0 0011.396 6H4.604a.25.25 0 00-.177.427z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
}

.form-select-ck:focus {
    border-color: var(--ck-red);
    box-shadow: 0 0 0 3px rgba(230,57,70,0.1);
}

.form-select-ck:focus-visible {
    outline: 2px solid var(--ck-red);
    outline-offset: 2px;
}

/* Auth buttons */
.btn-ck {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.7rem 1.6rem;
    font-family: var(--ck-font-body);
    font-size: 0.9rem;
    font-weight: 600;
    border: none;
    border-radius: var(--ck-radius-sm);
    cursor: pointer;
    transition: var(--ck-transition);
    text-decoration: none;
    line-height: 1.4;
}

.btn-ck:disabled { opacity: 0.5; cursor: not-allowed; }

.btn-ck.btn-red {
    background: var(--ck-red);
    color: #fff;
    box-shadow: 0 2px 12px rgba(230, 57, 70, 0.3);
}

.btn-ck.btn-red:hover:not(:disabled) {
    background: var(--ck-red-bright);
    color: #fff;
    transform: translateY(-1px);
}

.btn-ck.btn-ghost {
    background: transparent;
    color: #8e8e96;
    border: 1px solid #2a2a32;
}

.btn-ck.btn-ghost:hover:not(:disabled) {
    color: #eaeaec;
    border-color: #3a3a44;
    background: #28282f;
}

.btn-sm { padding: 0.45rem 1rem; font-size: 0.8rem; }
.btn-lg { padding: 0.9rem 2.2rem; font-size: 1rem; }
.btn-full { width: 100%; }

/* Dividers */
.auth-divider {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin: 1.5rem 0;
    color: #55555e;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

.auth-divider::before,
.auth-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: #2a2a32;
}

/* Social buttons (auth) */
.btn-social {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    width: 100%;
    padding: 0.7rem 1rem;
    font-family: var(--ck-font-body);
    font-size: 0.9rem;
    font-weight: 500;
    border: 1px solid #2a2a32;
    border-radius: var(--ck-radius-sm);
    background: #1a1a1f;
    color: #eaeaec;
    cursor: pointer;
    transition: var(--ck-transition);
}

.btn-social:hover { border-color: #3a3a44; background: #28282f; }
.auth-social-row { display: flex; gap: 0.75rem; }
.auth-social-row .btn-social { flex: 1; }

.auth-footer-link { text-align: center; margin-top: 1.5rem; font-size: 0.875rem; color: #8e8e96; }
.auth-footer-link a { color: var(--ck-red); font-weight: 600; }
.auth-footer-link a:hover { text-decoration: underline; }

.auth-mobile-logo {
    display: none;
    font-family: var(--ck-font-display);
    font-size: 2.2rem;
    color: #eaeaec;
    letter-spacing: 0.05em;
    margin-bottom: 2rem;
    text-align: center;
}

.auth-mobile-logo span { color: var(--ck-red); }

/* Code input (6-digit verification) */
.code-inputs { display: flex; gap: 0.5rem; justify-content: center; }

.code-input {
    width: 52px; height: 60px;
    text-align: center;
    font-family: var(--ck-font-display);
    font-size: 1.8rem;
    color: #eaeaec;
    background: #1a1a1f;
    border: 2px solid #2a2a32;
    border-radius: var(--ck-radius-md);
    transition: var(--ck-transition);
    outline: none;
    caret-color: var(--ck-red);
}

.code-input:focus-visible {
    outline: 2px solid var(--ck-red);
    outline-offset: 2px;
}

.code-input:focus {
    border-color: var(--ck-red);
    box-shadow: 0 0 0 3px var(--ck-red-glow);
    background: #1a1a1f;
}

.code-input.filled { border-color: var(--ck-red); color: var(--ck-red); }

/* Alerts */
.alert-ck {
    padding: 0.8rem 1rem;
    border-radius: var(--ck-radius-sm);
    font-size: 0.875rem;
    margin-bottom: 1rem;
    display: none;
    align-items: center;
    gap: 0.5rem;
    animation: fadeSlideUp 0.3s ease forwards;
}

.alert-ck.show { display: flex; }
.alert-error { background: rgba(230,57,70,0.1); border: 1px solid rgba(230,57,70,0.25); color: var(--ck-red-bright); }
.alert-success { background: rgba(46,204,113,0.1); border: 1px solid rgba(46,204,113,0.25); color: var(--ck-green); }
.alert-info { background: rgba(59,130,246,0.1); border: 1px solid rgba(59,130,246,0.25); color: var(--ck-blue); }

/* Spinner */
.spinner-ck {
    display: inline-block;
    width: 18px; height: 18px;
    border: 2px solid transparent;
    border-top-color: currentColor;
    border-radius: 50%;
    animation: spin 0.6s linear infinite;
}

@keyframes spin { to { transform: rotate(360deg); } }

.btn-ck.loading { position: relative; color: transparent; pointer-events: none; }

.btn-ck.loading::after {
    content: '';
    position: absolute;
    width: 18px; height: 18px;
    border: 2px solid transparent;
    border-top-color: #fff;
    border-radius: 50%;
    animation: spin 0.6s linear infinite;
}

/* ==========================================================================
   11. Utilities & Animations
   ========================================================================== */

/* Page Header */
.page-header {
    background: linear-gradient(135deg, #0d0d0d 0%, #2d2d2d 100%);
    padding: 2rem 0;
    position: relative;
    overflow: hidden;
}

.page-header h1 { color: #fff; font-weight: 800; margin: 0; }
.page-header p { color: rgba(255,255,255,0.7); margin: 0.5rem 0 0; }

/* Hero Search */
.hero-search {
    background: linear-gradient(135deg, rgba(13,13,13,0.9) 0%, rgba(45,45,45,0.85) 100%),
                url('https://images.unsplash.com/photo-1503376780353-7e6692767b70?w=1920') center/cover no-repeat;
    padding: 4rem 0;
    position: relative;
}

.hero-search h1 {
    color: #fff;
    font-weight: 800;
    font-size: 2.5rem;
    text-shadow: 0 2px 10px rgba(0,0,0,0.3);
}

.hero-search p { color: rgba(255,255,255,0.85); }

.search-tabs { display: flex; gap: 0.5rem; margin-bottom: 1rem; }
.search-tab { background: rgba(255,255,255,0.1); color: #fff; border: none; padding: 0.5rem 1rem; border-radius: var(--ck-radius-pill); font-weight: 500; transition: var(--ck-transition); cursor: pointer; }
.search-tab:hover, .search-tab.active { background: var(--ck-red); color: #fff; }
.search-box-hero { background: var(--ck-white); border-radius: var(--ck-radius-lg); padding: 1.5rem; }
.search-box-hero .form-control, .search-box-hero .form-select { border: 1px solid var(--ck-gray-border); border-radius: var(--ck-radius-md); }

/* Brands Section */
.brands-section { background: var(--ck-white); padding: 2.5rem 0; }
.brand-logo { width: 100px; height: 60px; display: flex; align-items: center; justify-content: center; background: var(--ck-gray-light); border-radius: var(--ck-radius-md); padding: 0.5rem; transition: var(--ck-transition); cursor: pointer; text-decoration: none; }
.brand-logo:hover { background: var(--ck-red-light); border: 2px solid var(--ck-red); transform: scale(1.05); }
.brand-logo img { max-width: 100%; max-height: 100%; object-fit: contain; filter: grayscale(100%); transition: var(--ck-transition); }
.brand-logo:hover img { filter: grayscale(0%); }

/* Mini Cards */
.mini-car-card { display: flex; gap: 0.75rem; padding: 0.75rem 0; border-bottom: 1px solid #f0f0f0; }
.mini-car-card:last-child { border-bottom: none; }
.mini-car-img { width: 80px; height: 60px; border-radius: var(--ck-radius-md); object-fit: cover; background: var(--ck-gray-light); }
.mini-car-info h6 { font-size: 0.9rem; font-weight: 600; margin-bottom: 0.25rem; }
.mini-car-info .price { color: var(--ck-red); font-weight: 700; }
.mini-car-info small { color: var(--ck-gray); }

/* Forum Widget */
.forum-item { padding: 0.75rem 0; border-bottom: 1px solid #f0f0f0; }
.forum-item:last-child { border-bottom: none; }
.forum-item h6 { font-size: 0.9rem; font-weight: 600; margin-bottom: 0.25rem; }
.forum-meta { display: flex; gap: 1rem; color: var(--ck-gray); font-size: 0.8rem; }

/* Charger Widget */
.charger-mini { display: flex; justify-content: space-between; align-items: center; padding: 0.6rem 0; border-bottom: 1px solid #f0f0f0; }
.charger-mini:last-child { border-bottom: none; }
.charger-mini h6 { font-size: 0.85rem; margin: 0; }
.charger-mini small { color: var(--ck-gray); }

/* RFP Widget */
.rfp-item { background: var(--ck-gray-light); border-radius: var(--ck-radius-md); padding: 0.75rem; margin-bottom: 0.5rem; }
.rfp-item:last-child { margin-bottom: 0; }
.rfp-item h6 { font-size: 0.85rem; font-weight: 600; margin-bottom: 0.25rem; }
.rfp-item .offers { color: var(--ck-red); font-weight: 600; font-size: 0.8rem; }

/* Video Widget */
.video-mini { position: relative; border-radius: var(--ck-radius-md); overflow: hidden; margin-bottom: 0.75rem; }
.video-mini:last-child { margin-bottom: 0; }
.video-mini img { width: 100%; height: 100px; object-fit: cover; }
.video-mini .play-icon { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 36px; height: 36px; background: var(--ck-red); border-radius: var(--ck-radius-full); display: flex; align-items: center; justify-content: center; color: #fff; }
.video-mini .duration { position: absolute; bottom: 5px; right: 5px; background: rgba(0,0,0,0.7); color: #fff; font-size: 0.7rem; padding: 2px 6px; border-radius: 4px; }
.video-mini-info { padding: 0.5rem 0; }
.video-mini-info h6 { font-size: 0.8rem; font-weight: 600; margin: 0; line-height: 1.3; }

/* Trending Gallery */
.trending-gallery { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.75rem; }
.trending-item { position: relative; border-radius: var(--ck-radius-md); overflow: hidden; aspect-ratio: 1; }
.trending-item img { width: 100%; height: 100%; object-fit: cover; }
.trending-item .votes { position: absolute; bottom: 8px; left: 8px; background: rgba(0,0,0,0.7); color: #fff; padding: 4px 8px; border-radius: 4px; font-size: 0.75rem; display: flex; align-items: center; gap: 4px; }
.trending-item .votes i { color: var(--ck-red); }

/* Feed */
.feed-card { background: var(--ck-white); border: 1px solid var(--ck-gray-border); border-radius: var(--ck-radius-lg); margin-bottom: 1rem; overflow: hidden; }
.feed-header { padding: 1rem; display: flex; align-items: center; gap: 0.75rem; }
.feed-avatar { width: 44px; height: 44px; border-radius: var(--ck-radius-full); object-fit: cover; }
.feed-user h6 { margin: 0; font-weight: 600; font-size: 0.95rem; }
.feed-user small { color: var(--ck-gray); }
.feed-body { padding: 0 1rem 1rem; }
.feed-img { width: 100%; max-height: 400px; object-fit: cover; }
.feed-actions { padding: 0.75rem 1rem; border-top: 1px solid #f0f0f0; display: flex; gap: 1rem; }
.feed-actions button { background: none; border: none; color: var(--ck-gray); display: flex; align-items: center; gap: 0.4rem; cursor: pointer; }
.feed-actions button:hover { color: var(--ck-red); }

/* Providers Masonry */
.providers-section { background: var(--ck-gray-light); padding: 3rem 0; }
.providers-masonry { columns: 4; column-gap: 1rem; }
@media (max-width: 1200px) { .providers-masonry { columns: 3; } }
@media (max-width: 992px) { .providers-masonry { columns: 2; } }
@media (max-width: 576px) { .providers-masonry { columns: 1; } }

.provider-card { break-inside: avoid; background: var(--ck-white); border-radius: 12px; margin-bottom: 1rem; overflow: hidden; transition: all 0.3s; border: 1px solid var(--ck-gray-border); }
.provider-card:hover { transform: translateY(-4px); box-shadow: 0 8px 25px rgba(0,0,0,0.1); border-color: var(--ck-red); }
.provider-card a { text-decoration: none; color: inherit; }
.provider-header { padding: 1rem; display: flex; align-items: center; gap: 0.75rem; }
.provider-logo { width: 50px; height: 50px; border-radius: 10px; object-fit: cover; background: var(--ck-gray-light); }
.provider-info h6 { font-weight: 700; margin: 0 0 0.25rem; font-size: 0.95rem; }
.provider-info .type { font-size: 0.65rem; padding: 0.15rem 0.5rem; border-radius: 4px; font-weight: 600; }
.provider-info .type.dealer { background: var(--ck-red); color: #fff; }
.provider-info .type.pro { background: var(--ck-yellow); color: #000; }
.provider-rating { display: flex; align-items: center; gap: 0.25rem; font-size: 0.85rem; font-weight: 600; }
.provider-rating i { color: var(--ck-yellow); }
.provider-body { padding: 0 1rem 1rem; }
.provider-location { font-size: 0.8rem; color: var(--ck-gray); margin-bottom: 0.5rem; display: flex; align-items: center; gap: 0.25rem; }
.provider-stats { display: flex; gap: 1rem; font-size: 0.75rem; color: var(--ck-gray); margin-bottom: 0.75rem; }
.provider-brands { display: flex; flex-wrap: wrap; gap: 0.35rem; }
.provider-brands img { width: 22px; height: 22px; object-fit: contain; padding: 3px; background: var(--ck-gray-light); border-radius: 4px; }
.provider-featured { padding: 0.75rem 1rem; background: var(--ck-gray-light); font-size: 0.8rem; }
.provider-featured strong { color: var(--ck-red); }

/* Empty State */
.empty-state { text-align: center; padding: 3rem 2rem; }
.empty-state i { font-size: 3rem; color: #ddd; margin-bottom: 1rem; display: block; }
.empty-state p { color: var(--ck-gray); }

/* Animations */
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes slideUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }
.animate-fade-in { animation: fadeIn 0.3s ease; }
.animate-slide-up { animation: slideUp 0.3s ease; }
.hover-lift { transition: var(--ck-transition); }
.hover-lift:hover { transform: translateY(-2px); box-shadow: var(--ck-shadow-lg); }

/* ==========================================================================
   12. Responsive
   ========================================================================== */

@media (max-width: 991px) {
    .auth-layout { flex-direction: column; }
    .auth-brand { display: none; }
    .auth-form-panel { flex: 1; min-height: 100vh; padding: 2rem 1.5rem; }
    .auth-mobile-logo { display: block; }
    .search-input { width: 100%; margin-top: 1rem; }
}

@media (max-width: 767px) {
    .hero-search h1 { font-size: 1.75rem; }
}

@media (max-width: 575px) {
    .code-input { width: 44px; height: 52px; font-size: 1.5rem; }
    .auth-form-title { font-size: 2rem; }
    .auth-form-panel { padding: 1.5rem 1rem; }
}

@media (min-width: 1440px) {
    .auth-brand { flex: 0 0 55%; }
    .auth-form-panel { flex: 0 0 45%; }
}