/* 
  Homepage Luxury & Premium Colors Enhancement
  สีหรูหรา ไฮโซ น่าใช้งาน สำหรับหน้าแรก
*/

:root {
    /* สีหรูหรา พรีเมี่ยม */
    --luxury-gold: #D4AF37;           /* ทองคลาสสิก */
    --luxury-rose-gold: #E8B4A0;      /* โรสโกลด์ */
    --luxury-platinum: #E5E4E2;       /* แพลทินัม */
    --luxury-navy: #1B2951;           /* กรมท่าเข้ม */
    --luxury-charcoal: #36454F;       /* ถ่านหิน */
    --luxury-cream: #F5F5DC;          /* ครีม */
    --luxury-pearl: #F8F6F0;          /* มุกขาว */
    --luxury-burgundy: #800020;       /* เบอร์กันดี */
    --luxury-emerald: #50C878;        /* มรกต */
    --luxury-sapphire: #0F52BA;       /* ไพลิน */
    
    /* Gradient หรูหรา */
    --gradient-luxury-gold: linear-gradient(135deg, #D4AF37 0%, #FFD700 50%, #B8860B 100%);
    --gradient-luxury-dark: linear-gradient(135deg, #1B2951 0%, #36454F 50%, #2C3E50 100%);
    --gradient-luxury-pearl: linear-gradient(135deg, #F8F6F0 0%, #FFFFFF 50%, #F5F5DC 100%);
    --gradient-luxury-premium: linear-gradient(135deg, #D4AF37 0%, #E8B4A0 50%, #C9B037 100%);
    --gradient-luxury-elegant: linear-gradient(135deg, #36454F 0%, #1B2951 50%, #2C3E50 100%);
}

/* Hero Section - หรูหรา เรียบหรู */
.hero-section {
    background: var(--gradient-luxury-dark) !important;
    position: relative;
    overflow: hidden;
}

.hero-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: 
        radial-gradient(circle at 20% 20%, rgba(212, 175, 55, 0.08) 0%, transparent 50%),
        radial-gradient(circle at 80% 80%, rgba(232, 180, 160, 0.06) 0%, transparent 50%);
    z-index: 0;
}

.hero-section::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: url('data:image/svg+xml,<svg width="60" height="60" xmlns="http://www.w3.org/2000/svg"><defs><pattern id="luxury-pattern" width="60" height="60" patternUnits="userSpaceOnUse"><circle cx="30" cy="30" r="1" fill="rgba(212,175,55,0.1)"/></pattern></defs><rect width="60" height="60" fill="url(%23luxury-pattern)"/></svg>');
    z-index: 0;
}

/* Hero Title - ทองหรูหรา */
.hero-section h1 {
    background: var(--gradient-luxury-gold) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
    filter: drop-shadow(0 2px 8px rgba(212, 175, 55, 0.3)) !important;
    font-weight: 800 !important;
    position: relative;
    z-index: 2;
    text-shadow: none !important;
}

/* Hero Subtitle - ขาวหรูหรา */
.hero-section .hero-subtitle,
.hero-section .lead {
    color: var(--luxury-pearl) !important;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3) !important;
    font-weight: 400 !important;
    position: relative;
    z-index: 2;
}

/* Hero Buttons - หรูหรา */
.hero-section .btn-light {
    background: var(--gradient-luxury-gold) !important;
    color: var(--luxury-navy) !important;
    border: none !important;
    font-weight: 600 !important;
    box-shadow: 0 4px 15px rgba(212, 175, 55, 0.25) !important;
    position: relative;
    z-index: 2;
}

.hero-section .btn-light:hover {
    background: linear-gradient(135deg, #FFD700 0%, #D4AF37 100%) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 20px rgba(212, 175, 55, 0.35) !important;
}

.hero-section .btn-outline-light {
    background: rgba(248, 246, 240, 0.1) !important;
    color: var(--luxury-pearl) !important;
    border: 2px solid rgba(248, 246, 240, 0.3) !important;
    backdrop-filter: blur(10px) !important;
    position: relative;
    z-index: 2;
}

.hero-section .btn-outline-light:hover {
    background: rgba(248, 246, 240, 0.9) !important;
    color: var(--luxury-navy) !important;
    border-color: var(--luxury-pearl) !important;
    transform: translateY(-2px) !important;
}

/* Featured Numbers Section - พื้นหลังหรูหรา */
section.py-5:not(.bg-light):not(.bg-gradient-light) {
    background: var(--gradient-luxury-pearl) !important;
    position: relative;
}

section.py-5:not(.bg-light):not(.bg-gradient-light)::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: 
        radial-gradient(circle at 25% 25%, rgba(212, 175, 55, 0.05) 0%, transparent 50%),
        radial-gradient(circle at 75% 75%, rgba(54, 69, 79, 0.03) 0%, transparent 50%);
}

/* Featured Section Title */
section.py-5:not(.bg-light):not(.bg-gradient-light) .text-gradient {
    background: var(--gradient-luxury-dark) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
    filter: drop-shadow(0 1px 3px rgba(54, 69, 79, 0.2)) !important;
}

/* Featured Section Subtitle */
section.py-5:not(.bg-light):not(.bg-gradient-light) > .container > .text-center > p.text-muted:not(.small) {
    color: var(--luxury-charcoal) !important;
    font-weight: 400;
    opacity: 0.8;
}

/* Number Cards - หรูหรา */
.number-card-glass,
.number-card {
    background: linear-gradient(135deg, 
        rgba(255, 255, 255, 0.95) 0%, 
        rgba(248, 246, 240, 0.9) 100%) !important;
    border: 1px solid rgba(212, 175, 55, 0.2) !important;
    box-shadow: 
        0 8px 32px rgba(0, 0, 0, 0.08), 
        0 2px 8px rgba(212, 175, 55, 0.1) !important;
    backdrop-filter: blur(10px) !important;
    border-radius: 16px !important;
}

.number-card-glass:hover,
.number-card:hover {
    transform: translateY(-5px) !important;
    box-shadow: 
        0 15px 40px rgba(0, 0, 0, 0.12), 
        0 4px 15px rgba(212, 175, 55, 0.2) !important;
    border-color: var(--luxury-gold) !important;
}

/* Number Display - ทองหรูหราและชัด - SAFARI COMPATIBLE */
.number-card-glass .number-display-enhanced,
.number-card .number-display-enhanced,
.number-display-enhanced,
.phone-number {
    color: #1B2951 !important;
    font-weight: 900 !important;
    text-shadow: none !important;
    filter: none !important;
    background: none !important;
    background-image: none !important;
    background-color: transparent !important;
    /* Safari compatibility - use initial instead of specific color for webkit-text-fill-color */
    -webkit-text-fill-color: initial !important;
    -webkit-background-clip: initial !important;
    background-clip: initial !important;
}

/* Price Display - ทองคลาสสิกและชัด - SAFARI COMPATIBLE */
.number-card-glass .price-display-enhanced,
.number-card .price-display-enhanced,
.price-display-enhanced,
.price {
    color: #B8860B !important;
    font-weight: 900 !important;
    text-shadow: none !important;
    filter: none !important;
    background: none !important;
    background-image: none !important;
    background-color: transparent !important;
    /* Safari compatibility - use initial instead of specific color for webkit-text-fill-color */
    -webkit-text-fill-color: initial !important;
    -webkit-background-clip: initial !important;
    background-clip: initial !important;
}

/* Badges - หรูหรา */
.badge.bg-warning {
    background: var(--gradient-luxury-gold) !important;
    color: var(--luxury-navy) !important;
    box-shadow: 0 2px 8px rgba(212, 175, 55, 0.2) !important;
    font-weight: 600 !important;
}

.badge.bg-info {
    background: var(--gradient-luxury-elegant) !important;
    color: var(--luxury-pearl) !important;
    box-shadow: 0 2px 8px rgba(54, 69, 79, 0.2) !important;
}

.badge.bg-light {
    background: linear-gradient(135deg, var(--luxury-pearl) 0%, #FFFFFF 100%) !important;
    color: var(--luxury-navy) !important;
    border: 1px solid rgba(212, 175, 55, 0.2) !important;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1) !important;
}

/* Operator Badges - หรูหรา */
.operator-badge .badge {
    background: var(--gradient-luxury-dark) !important;
    color: var(--luxury-pearl) !important;
    font-weight: 600 !important;
    box-shadow: 0 2px 8px rgba(27, 41, 81, 0.2) !important;
}

/* Buttons in Cards - หรูหรา */
.btn-outline-primary {
    color: var(--luxury-navy) !important;
    border-color: var(--luxury-navy) !important;
    background: rgba(27, 41, 81, 0.05) !important;
    font-weight: 500 !important;
}

.btn-outline-primary:hover {
    background: var(--gradient-luxury-dark) !important;
    color: var(--luxury-pearl) !important;
    border-color: transparent !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 12px rgba(27, 41, 81, 0.25) !important;
}

.btn-primary {
    background: var(--gradient-luxury-gold) !important;
    color: var(--luxury-navy) !important;
    border: none !important;
    box-shadow: 0 4px 12px rgba(212, 175, 55, 0.25) !important;
    font-weight: 600 !important;
}

.btn-primary:hover {
    background: linear-gradient(135deg, #FFD700 0%, #D4AF37 100%) !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 6px 16px rgba(212, 175, 55, 0.35) !important;
}

/* Promotion Section - หรูหรา */
.bg-gradient-light {
    background: linear-gradient(135deg, 
        rgba(245, 245, 220, 0.3) 0%, 
        rgba(248, 246, 240, 0.5) 50%, 
        rgba(229, 228, 226, 0.3) 100%) !important;
    position: relative;
}

.bg-gradient-light::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: 
        radial-gradient(circle at 30% 30%, rgba(212, 175, 55, 0.08) 0%, transparent 50%),
        radial-gradient(circle at 70% 70%, rgba(54, 69, 79, 0.05) 0%, transparent 50%);
}

/* Promotion Title */
.bg-gradient-light .text-gradient {
    background: var(--gradient-luxury-elegant) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
    filter: drop-shadow(0 1px 3px rgba(54, 69, 79, 0.2)) !important;
}

/* Fire Icon */
.bg-gradient-light .fa-fire {
    color: var(--luxury-burgundy) !important;
    filter: drop-shadow(0 0 8px rgba(128, 0, 32, 0.4)) !important;
}

/* Categories Section - หรูหรา */
.bg-light {
    background: linear-gradient(135deg, 
        rgba(248, 246, 240, 0.8) 0%, 
        rgba(255, 255, 255, 0.9) 50%, 
        rgba(245, 245, 220, 0.8) 100%) !important;
}

/* Category Cards - หรูหรา */
.category-card {
    background: linear-gradient(135deg, 
        rgba(255, 255, 255, 0.95) 0%, 
        rgba(248, 246, 240, 0.9) 100%) !important;
    border: 1px solid rgba(212, 175, 55, 0.15) !important;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.06), 0 2px 6px rgba(212, 175, 55, 0.1) !important;
    border-radius: 12px !important;
}

.category-card:hover {
    border-color: var(--luxury-gold) !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1), 0 4px 12px rgba(212, 175, 55, 0.2) !important;
    transform: translateY(-3px) !important;
}

.category-card i {
    background: var(--gradient-luxury-gold) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
    filter: drop-shadow(0 1px 3px rgba(212, 175, 55, 0.2)) !important;
}

.category-card:hover i {
    background: var(--gradient-luxury-dark) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
    filter: drop-shadow(0 1px 3px rgba(27, 41, 81, 0.2)) !important;
}

.category-card h5 {
    color: var(--luxury-navy) !important;
    font-weight: 600 !important;
}

.category-card p {
    color: var(--luxury-charcoal) !important;
    opacity: 0.7;
}

/* Category Title */
.bg-light .text-gradient {
    background: var(--gradient-luxury-dark) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
    filter: drop-shadow(0 1px 3px rgba(27, 41, 81, 0.2)) !important;
}

/* Pagination Buttons - หรูหรา */
#loadPrevPromotion,
#loadMorePromotion {
    background: var(--gradient-luxury-dark) !important;
    color: var(--luxury-pearl) !important;
    border: none !important;
    box-shadow: 0 4px 12px rgba(27, 41, 81, 0.2) !important;
    font-weight: 500 !important;
}

#loadPrevPromotion:hover,
#loadMorePromotion:hover {
    background: var(--gradient-luxury-gold) !important;
    color: var(--luxury-navy) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 16px rgba(212, 175, 55, 0.3) !important;
}

.btn-outline-secondary {
    color: var(--luxury-charcoal) !important;
    border-color: var(--luxury-charcoal) !important;
    background: rgba(54, 69, 79, 0.05) !important;
}

.btn-outline-secondary:hover {
    background: var(--gradient-luxury-dark) !important;
    color: var(--luxury-pearl) !important;
    border-color: transparent !important;
}

/* Page Indicator */
#pageIndicator {
    background: var(--gradient-luxury-gold) !important;
    color: var(--luxury-navy) !important;
    box-shadow: 0 2px 8px rgba(212, 175, 55, 0.25) !important;
    font-weight: 600 !important;
}

/* Loading Spinner */
.spinner-border.text-primary {
    color: var(--luxury-gold) !important;
}

/* Text Colors */
.text-muted {
    color: var(--luxury-charcoal) !important;
    opacity: 0.7;
}

/* Subtle Animation */
@keyframes luxury-glow {
    0%, 100% { 
        box-shadow: 0 0 20px rgba(212, 175, 55, 0.1);
    }
    50% { 
        box-shadow: 0 0 30px rgba(212, 175, 55, 0.2);
    }
}

.number-card-glass:hover,
.category-card:hover {
    animation: luxury-glow 3s ease-in-out infinite;
}

/* Mobile Responsiveness */
@media (max-width: 768px) {
    .hero-section h1 {
        font-size: clamp(2rem, 8vw, 3rem) !important;
    }
    
    .hero-section .btn {
        font-size: clamp(0.875rem, 3vw, 1rem) !important;
        padding: 0.75rem 1.5rem !important;
    }
    
    .number-card-glass,
    .category-card {
        margin-bottom: 1rem;
    }
}

/* Premium Touch */
.number-card-glass::before,
.category-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: var(--gradient-luxury-gold);
    border-radius: 16px 16px 0 0;
}

/* VIP Badge Enhancement */
.badge.bg-warning i.fa-crown {
    color: var(--luxury-gold) !important;
    filter: drop-shadow(0 0 4px rgba(212, 175, 55, 0.5)) !important;
}