/* Dark Theme Override - แก้ไขสีเมนูบาร์จากฟ้าเป็นดำ-เทา */

/* Top Bar - แถบด้านบน */
.top-bar {
    background: linear-gradient(135deg, #2c3e50 0%, #34495e 100%) !important;
    box-shadow: 0 2px 15px rgba(44, 62, 80, 0.12) !important;
}

/* Main Navigation - เมนูหลัก */
.main-nav {
    background: linear-gradient(135deg, #2c3e50 0%, #34495e 100%) !important;
    box-shadow: 0 6px 25px rgba(44, 62, 80, 0.2) !important;
}

/* Category Buttons - ปุ่มหมวดหมู่สินค้า */
a.category-button-v2 {
    background-color: #2c3e50 !important;
    color: white !important;
}

a.category-button-v2:hover {
    background-color: #34495e !important;
    color: white !important;
    box-shadow: 0 4px 12px rgba(52, 73, 94, 0.3) !important;
}

a.category-button-v2.active {
    background-color: #1a252f !important;
    outline-color: #34495e !important;
    box-shadow: 0 3px 7px rgba(52, 73, 94, 0.25) !important;
}

/* Blog Section Colors - คงโทนสีฟ้าทะเลเข้มและฟ้าอ่อน */
.modern-blog-section {
    background: linear-gradient(135deg, #dbeafe 0%, #e0f2fe 25%, #ffffff 50%, #f0f9ff 75%, #dbeafe 100%) !important;
}

.modern-blog-section::before {
    background: 
        radial-gradient(circle at 20% 80%, rgba(15, 58, 141, 0.12) 0%, rgba(59, 130, 246, 0.06) 30%, transparent 70%),
        radial-gradient(circle at 80% 20%, rgba(96, 165, 250, 0.15) 0%, rgba(147, 197, 253, 0.08) 40%, transparent 80%) !important;
}

.section-badge {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.2) 0%, rgba(96, 165, 250, 0.15) 100%) !important;
    border: 1px solid rgba(59, 130, 246, 0.4) !important;
    color: #0f3460 !important;
    backdrop-filter: blur(20px) !important;
}

.section-title {
    color: #1e40af !important;
    text-shadow: 0 4px 20px rgba(30, 64, 175, 0.1) !important;
}

.author-avatar {
    background: linear-gradient(135deg, #0f3460, #1e40af, #3b82f6, #60a5fa) !important;
    box-shadow: 0 4px 15px rgba(59, 130, 246, 0.3) !important;
}

.action-btn:hover {
    background: #1e40af !important;
    color: white !important;
}

.primary-read-btn {
    background: linear-gradient(135deg, #0f3460 0%, #1e40af 25%, #3b82f6 75%, #60a5fa 100%) !important;
    box-shadow: 0 4px 15px rgba(59, 130, 246, 0.4) !important;
    border: 1px solid rgba(96, 165, 250, 0.3) !important;
}

.primary-read-btn:hover {
    background: linear-gradient(135deg, #1e3a8a 0%, #0f3460 25%, #1e40af 75%, #3b82f6 100%) !important;
    box-shadow: 0 8px 30px rgba(59, 130, 246, 0.6) !important;
    border: 1px solid rgba(147, 197, 253, 0.5) !important;
}

/* Image Overlay สำหรับ Blog Cards */
.image-overlay {
    background: linear-gradient(
        135deg,
        rgba(15, 52, 96, 0.9) 0%,
        rgba(30, 64, 175, 0.8) 25%,
        rgba(59, 130, 246, 0.7) 75%,
        rgba(96, 165, 250, 0.6) 100%
    ) !important;
}

/* Category Tag ใน Blog */
.category-tag {
    color: #1e40af !important;
}

/* Blog Badge */
.blog-card .badge {
    background: linear-gradient(135deg, #1e40af, #3b82f6) !important;
    box-shadow: 0 4px 12px rgba(30, 64, 175, 0.3) !important;
}

.blog-card .card-title a:hover {
    color: #1e40af !important;
}

.blog-card .card-meta i {
    color: #1e40af !important;
}

.blog-card .btn {
    background: linear-gradient(135deg, #1e40af, #3b82f6) !important;
}

.blog-card .btn:hover {
    background: linear-gradient(135deg, #1e3a8a, #1e40af) !important;
    box-shadow: 0 8px 25px rgba(30, 64, 175, 0.4) !important;
}

/* Root Variables Override */
:root {
    --search-focus-color: #2c3e50 !important;
    --primary-accent: #2c3e50 !important;
    --secondary-accent: #34495e !important;
    --gradient-primary: linear-gradient(135deg, #2c3e50 0%, #34495e 100%) !important;
    --gradient-secondary: linear-gradient(135deg, #2c3e50 0%, #34495e 100%) !important;
    --product-title-color: #0066cc !important; /* สีฟ้าเข้มสำหรับชื่อสินค้าในโหมดมืด */
}

/* Live Search ปรับสี */
.live-search-item-price {
    color: #2c3e50 !important;
}

/* Search Button */
.search-bar button {
    background: linear-gradient(135deg, #2c3e50 0%, #34495e 100%) !important;
}

.search-bar button:hover {
    background: linear-gradient(135deg, #34495e 0%, #2c3e50 100%) !important;
}

/* ปุ่มอื่นๆ ที่อาจมีสีฟ้า */
.btn-primary {
    background: linear-gradient(135deg, #2c3e50 0%, #34495e 100%) !important;
    border-color: #2c3e50 !important;
}

.btn-primary:hover {
    background: linear-gradient(135deg, #34495e 0%, #2c3e50 100%) !important;
    border-color: #34495e !important;
}

/* Links และ Accents */
a:hover,
.text-primary {
    color: #2c3e50 !important;
}

/* Border และ Focus States */
.form-control:focus {
    border-color: #2c3e50 !important;
    box-shadow: 0 0 0 0.2rem rgba(44, 62, 80, 0.25) !important;
}

/* Shopping Cart และ Elements อื่นๆ */
.badge-primary {
    background-color: #2c3e50 !important;
}

/* Menu Items Active State */
.nav-link.active,
.active {
    color: #2c3e50 !important;
}

/* Social Media และ Icons */
.fa-primary,
.text-info {
    color: #2c3e50 !important;
}