/*
 * Eleksan Landing - Light Design System Override
 * Version: 1.0.0
 * 
 * This file provides CSS custom properties (variables) and minimal, scoped overrides.
 * It does NOT globally restyle the template - only provides variables and opt-in utilities.
 */

/* ============================================
   Google Fonts Import (Available for Future Use)
   ============================================ */
@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700&family=Source+Sans+3:wght@400;500;600&display=swap');

/* ============================================
   CSS Custom Properties (Design System Variables)
   Available for use via var(--variable-name) but NOT auto-applied
   ============================================ */
:root {
    /* Primary Colors - Brand Blue-Turquoise */
    --elex-primary-50: #F3FAFF;
    --elex-primary-100: #E0F5FF;
    --elex-primary-500: #009EE3;
    --elex-primary-600: #007BB0;
    --elex-primary-700: #005F88;
    /* Secondary Colors - Purple Accent */
    --elex-secondary-50: #F5F3FF;
    --elex-secondary-100: #EDE9FE;
    --elex-secondary-500: #7C3AED;
    --elex-secondary-600: #6D28D9;
    --elex-secondary-700: #5B21B6;
    /* Neutral Colors - Text */
    --elex-text-primary: #111827;
    --elex-text-secondary: #4B5563;
    --elex-text-muted: #9CA3AF;
    /* Neutral Colors - Backgrounds */
    --elex-bg-page: #F9FAFB;
    --elex-bg-section: #F3F4F6;
    --elex-bg-card: #FFFFFF;
    /* Neutral Colors - Borders */
    --elex-border-subtle: #E5E7EB;
    --elex-border-strong: #D1D5DB;
    /* Semantic Colors */
    --elex-success: #16A34A;
    --elex-warning: #EAB308;
    --elex-danger: #DC2626;
    --elex-info: #0284C7;
    /* Overlay Colors */
    --elex-overlay-backdrop: rgba(15, 23, 42, 0.55);
    --elex-shadow-soft: 0 10px 30px rgba(15, 23, 42, 0.10);
    --elex-shadow-strong: 0 20px 45px rgba(15, 23, 42, 0.20);
}

/* ============================================
   Minimal Link Color Override (Light Touch)
   ============================================ */
.header-top .help-info a,
.header-top .help-info-number {
    color: var(--elex-primary-600);
}

    .header-top .help-info a:hover {
        color: var(--elex-primary-700);
    }

/* ============================================
   Logo Visibility Fix
   ============================================ */
.ex_shop_header .header-upper .logo-box .logo {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

    .ex_shop_header .header-upper .logo-box .logo a {
        display: inline-block !important;
        visibility: visible !important;
        opacity: 1 !important;
        width: auto !important;
        height: auto !important;
        line-height: 0 !important;
        font-size: 0 !important;
        text-decoration: none !important;
    }

        .ex_shop_header .header-upper .logo-box .logo a img {
            display: block !important;
            visibility: visible !important;
            opacity: 1 !important;
            width: auto !important;
            height: auto !important;
            max-width: 200px !important;
            max-height: 80px !important;
        }

/* ============================================
   Minimal Navigation Link Color Override
   ============================================ */
.header-upper .main-menu .navigation > li > a:hover,
.header-upper .main-menu .navigation > li.current > a,
.header-upper .main-menu .navigation > li > a.active {
    color: var(--elex-primary-600);
}

/* ============================================
   Minimal Footer Link Color Override
   ============================================ */
.main-footer-one .footer-widget a:hover {
    color: var(--elex-primary-600);
}

.main-footer-one .footer-contact-info {
    color: var(--elex-primary-600);
}

.footer-bottom-one .menu a:hover {
    color: var(--elex-primary-600);
}

/* ============================================
   Opt-in Utility Classes (Use Explicitly When Needed)
   ============================================ */

/* Text Utilities */
.text-elex-primary {
    color: var(--elex-primary-600);
}

.text-elex-secondary {
    color: var(--elex-secondary-600);
}

.text-elex-muted {
    color: var(--elex-text-muted);
}

/* Background Utilities */
.bg-elex-page {
    background-color: var(--elex-bg-page);
}

.bg-elex-section {
    background-color: var(--elex-bg-section);
}

.bg-elex-card {
    background-color: var(--elex-bg-card);
}

/* Border Utilities */
.border-elex-subtle {
    border-color: var(--elex-border-subtle);
}

.border-elex-strong {
    border-color: var(--elex-border-strong);
}

/* Shadow Utilities */
.shadow-elex-soft {
    box-shadow: var(--elex-shadow-soft);
}

.shadow-elex-strong {
    box-shadow: var(--elex-shadow-strong);
}

/* Custom Selection Color (Non-Breaking) */
::selection {
    background-color: var(--elex-primary-100);
    color: var(--elex-primary-700);
}

::-moz-selection {
    background-color: var(--elex-primary-100);
    color: var(--elex-primary-700);
}

/* ============================================
   Contact Form: Softer elevation + clearer borders + muted placeholders
   ============================================ */
.contact-form-wrapper .contact-input {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    border: 1px solid #d8d8d8;
    background: #ffffff;
}

    .contact-form-wrapper .contact-input:focus {
        border-color: #9a9a9a;
        box-shadow: 0 1px 6px rgba(0, 0, 0, 0.12);
    }

    .contact-form-wrapper .contact-input::placeholder {
        color: #9a9a9a;
        opacity: 1;
    }

/* Contact cards equal spacing */
.contact-address .contact-card-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 30px;
    align-items: stretch;
}

.contact-address .contact-card-grid-item {
    display: flex;
    flex: 0 1 350px;
    max-width: 380px;
}

/* Toast notifications */
.eleksan-toast-container {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.eleksan-toast {
    min-width: 220px;
    max-width: 320px;
    padding: 12px 16px;
    border-radius: 6px;
    font-size: 14px;
    color: #fff;
    box-shadow: 0 10px 25px rgba(15, 23, 42, 0.18);
}

.eleksan-toast-success {
    background-color: #16A34A;
}

.eleksan-toast-error {
    background-color: #DC2626;
}

/* ============================================
   Floating WhatsApp Button
   ============================================ */
.eleksan-whatsapp-btn {
    position: fixed;
    bottom: 25px;
    right: 25px;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 60px;
    height: 60px;
    background-color: #25D366;
    border-radius: 50%;
    box-shadow: 0 4px 15px rgba(37, 211, 102, 0.4);
    transition: all 0.3s ease;
    text-decoration: none;
}

.eleksan-whatsapp-btn i {
    color: #fff;
    font-size: 32px;
    line-height: 1;
}

.eleksan-whatsapp-btn:hover {
    background-color: #128C7E;
    transform: scale(1.1);
    box-shadow: 0 6px 25px rgba(37, 211, 102, 0.5);
}

.eleksan-whatsapp-btn:active {
    transform: scale(1.05);
}

/* Pulse animation */
.eleksan-whatsapp-btn::before {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: rgba(37, 211, 102, 0.4);
    animation: whatsapp-pulse 2s infinite;
    z-index: -1;
}

@keyframes whatsapp-pulse {
    0% {
        transform: scale(1);
        opacity: 0.6;
    }
    100% {
        transform: scale(1.5);
        opacity: 0;
    }
}

@media (max-width: 768px) {
    .eleksan-whatsapp-btn {
        width: 52px;
        height: 52px;
        bottom: 20px;
        right: 20px;
    }
    
    .eleksan-whatsapp-btn i {
        font-size: 28px;
    }
}

/* Header cart icon primary color */
.shopping-cart .icon-shopping-cart {
    color: var(--elex-primary-500);
}

/* Match template rounded style for primary buttons */
.theme-btn.theme-btn-eight {
    border-radius: 5px;
}

/* (Cart visuals use original template CSS from cart_section.css) */

/* Outlined primary button variant for cart */
.btn-outline-elex {
    background-color: transparent;
    color: #DC2626; /* kırmızı metin */
    border: 1px solid #DC2626;
}

    .btn-outline-elex:hover {
        background-color: rgba(220, 38, 38, 0.06);
        color: #B91C1C;
    }

/* Small / large button helpers for cart actions */
.btn-sm-elex {
    padding: 6px 14px;
    font-size: 13px;
}

.btn-lg-elex {
    padding: 12px 26px;
    font-size: 15px;
}

/* (Cart table uses original template styles from cart_section.css) */

/* ============================================
   Top Rated Products List
   ============================================ */
.top-rated-products-list {
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin-bottom: 20px;
}

.top-rated-product-item {
    display: flex;
    gap: 15px;
    padding: 15px;
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
    transition: all 0.3s ease;
}

.top-rated-product-item:hover {
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
    transform: translateY(-2px);
}

.top-rated-product-item .item-left-image {
    flex-shrink: 0;
    width: 100px;
    height: 100px;
}

.top-rated-product-item .item-left-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 8px;
}

.top-rated-product-item .item-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.top-rated-product-item .item-content h5 {
    margin: 0 0 8px 0;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.3;
}

.top-rated-product-item .item-content h5 a {
    color: var(--elex-text-primary);
    text-decoration: none;
}

.top-rated-product-item .item-content h5 a:hover {
    color: var(--elex-primary-500);
}

.top-rated-product-item .rating {
    margin-bottom: 8px;
}

.top-rated-product-item .rating i {
    color: #FFB800;
    font-size: 12px;
}

.top-rated-product-item .rating i.empty-star {
    color: #D1D5DB;
}

.top-rated-product-item .item-content h6 {
    margin: 0;
    font-size: 15px;
    font-weight: 700;
    color: var(--elex-primary-600);
}

.top-rated-product-item .item-content h6 span {
    font-size: 13px;
    font-weight: 400;
    color: var(--elex-text-muted);
    text-decoration: line-through;
    margin-left: 8px;
}



/* ============================================
   Eleksan Pure CSS/JS Slider
   ============================================ */
.eleksan-slider {
    position: relative;
    width: 100%;
    height: 523px;
    border-radius: 10px;
    overflow: hidden;
    background: #1a1a1a;
}

.eleksan-slider-track {
    position: relative;
    width: 100%;
    height: 100%;
}

.eleksan-slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: opacity 0.6s ease-in-out;
    z-index: 1;
}

.eleksan-slide.active {
    opacity: 1;
    z-index: 2;
}

.eleksan-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Navigation Arrows */
.eleksan-slider-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
    width: 48px;
    height: 48px;
    border: none;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.9);
    color: var(--elex-primary-600);
    font-size: 18px;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
}

.eleksan-slider-nav:hover {
    background: var(--elex-primary-500);
    color: #fff;
    box-shadow: 0 6px 20px rgba(0, 158, 227, 0.35);
}

.eleksan-slider-prev {
    left: 20px;
}

.eleksan-slider-next {
    right: 20px;
}

/* Pill-shaped Bullet Dots */
.eleksan-slider-dots {
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 10;
    display: flex;
    gap: 8px;
    padding: 8px 16px;
    background: rgba(255, 255, 255, 0.85);
    border-radius: 20px;
    backdrop-filter: blur(4px);
}

.eleksan-dot {
    width: 24px;
    height: 6px;
    border: none;
    border-radius: 3px;
    background: #D1D5DB;
    cursor: pointer;
    transition: all 0.3s ease;
    padding: 0;
}

.eleksan-dot:hover,
.eleksan-dot.active {
    background: var(--elex-primary-500);
    width: 32px;
}

/* Responsive */
@media (max-width: 768px) {
    .eleksan-slider {
        height: 320px;
    }
    
    .eleksan-slider-nav {
        width: 36px;
        height: 36px;
        font-size: 14px;
    }
    
    .eleksan-slider-prev {
        left: 10px;
    }
    
    .eleksan-slider-next {
        right: 10px;
    }
    
    .eleksan-slider-dots {
        padding: 6px 12px;
        bottom: 12px;
    }
    
    .eleksan-dot {
        width: 18px;
        height: 5px;
    }
    
    .eleksan-dot.active {
        width: 24px;
    }
}

@media (max-width: 480px) {
    .eleksan-slider {
        height: 240px;
    }
}