/* 
  Promotion Mobile Horizontal Scroll
  ปัดเลื่อนซ้าย-ขวาดูเบอร์โปรโมชั่นบนมือถือ
*/

/* Mobile Horizontal Scroll for Promotion Section */
@media (max-width: 768px) {
    /* Container for horizontal scroll */
    #promotionGrid {
        display: flex !important;
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        scroll-behavior: smooth !important;
        -webkit-overflow-scrolling: touch !important;
        gap: 1rem !important;
        padding: 0 1rem 1rem 1rem !important;
        margin: 0 -1rem !important;
    }
    
    /* Individual promotion cards - optimized for mobile portrait */
    #promotionGrid .col-lg-3,
    #promotionGrid .col-md-6,
    #promotionGrid .col-sm-6 {
        flex: 0 0 280px !important;
        max-width: 280px !important;
        width: 280px !important;
        margin: 0 !important;
    }
    
    /* Card styling for mobile scroll - luxury design without orange */
    #promotionGrid .promotion-card,
    #promotionGrid .number-card-glass {
        /* Luxury card design */
        min-height: 320px !important;
        max-height: 320px !important;
        padding: 1rem !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: space-between !important;
        overflow: hidden !important;
        gap: 0.5rem !important;
        /* Luxury styling */
        background: linear-gradient(135deg, #FFFFFF 0%, #F8FAFC 100%) !important;
        border: 1px solid #E2E8F0 !important;
        box-shadow: 0 8px 25px rgba(0, 0, 0, 0.08), 0 4px 12px rgba(0, 0, 0, 0.04) !important;
    }
    
    /* Scrollbar styling */
    #promotionGrid::-webkit-scrollbar {
        height: 6px !important;
    }
    
    #promotionGrid::-webkit-scrollbar-track {
        background: #F1F5F9 !important;
        border-radius: 3px !important;
    }
    
    #promotionGrid::-webkit-scrollbar-thumb {
        background: #CBD5E1 !important;
        border-radius: 3px !important;
    }
    
    #promotionGrid::-webkit-scrollbar-thumb:hover {
        background: #94A3B8 !important;
    }
    
    /* Remove scroll indicators - no fade edges */
    .promotion-scroll-container {
        position: relative !important;
    }
    
    /* Remove fade edges completely */
    .promotion-scroll-container::before,
    .promotion-scroll-container::after {
        display: none !important;
    }
    
    /* Hide pagination on mobile when using scroll */
    .promotion-pagination-mobile-hide {
        display: none !important;
    }
    
    /* Show scroll hint */
    .promotion-scroll-hint {
        display: block !important;
        text-align: center !important;
        margin-top: 0.5rem !important;
        color: #64748B !important;
        font-size: 0.875rem !important;
    }
    
    .promotion-scroll-hint i {
        animation: swipeHint 2s ease-in-out infinite !important;
    }
    
    @keyframes swipeHint {
        0%, 100% { transform: translateX(0); }
        50% { transform: translateX(8px); }
    }
}

/* Desktop - keep normal grid */
@media (min-width: 769px) {
    .promotion-scroll-hint {
        display: none !important;
    }
    
    .promotion-pagination-mobile-hide {
        display: flex !important;
    }
}

/* Enhanced mobile card styling - compact design */
@media (max-width: 768px) {
    /* Compact card layout */
    #promotionGrid .promotion-card,
    #promotionGrid .number-card-glass {
        flex-shrink: 0 !important;
    }
    
    /* Proper text sizing to prevent overflow */
    #promotionGrid .promotion-number-display,
    #promotionGrid .number-display-enhanced {
        font-size: 1.15rem !important;
        font-weight: 700 !important;
        margin: 0.5rem 0 !important;
        line-height: 1.3 !important;
        word-wrap: break-word !important;
        overflow-wrap: break-word !important;
        /* Luxury navy blue color */
        color: #1E293B !important;
        background: none !important;
        -webkit-text-fill-color: #1E293B !important;
        text-shadow: 0 1px 2px rgba(30, 41, 59, 0.1) !important;
        position: relative !important;
        z-index: 1 !important;
    }
    
    #promotionGrid .promotion-price-display,
    #promotionGrid .price-display-enhanced {
        font-size: 1.1rem !important;
        font-weight: 600 !important;
        margin: 0.5rem 0 !important;
        line-height: 1.2 !important;
        word-wrap: break-word !important;
        overflow-wrap: break-word !important;
    }
    
    /* Luxury gold color for regular price */
    #promotionGrid .promotion-price-display.regular-price {
        color: #B8860B !important;
        background: none !important;
        -webkit-text-fill-color: #B8860B !important;
        text-shadow: 0 1px 2px rgba(184, 134, 11, 0.2) !important;
    }
    
    /* Luxury emerald for free price */
    #promotionGrid .promotion-price-display.free-price {
        color: #059669 !important;
        background: none !important;
        -webkit-text-fill-color: #059669 !important;
        text-shadow: 0 1px 2px rgba(5, 150, 105, 0.2) !important;
    }
    
    /* Compact badges */
    #promotionGrid .promotion-badges {
        margin: 0.5rem 0 !important;
        gap: 0.25rem !important;
    }
    
    #promotionGrid .promotion-badge,
    #promotionGrid .badge {
        font-size: 0.7rem !important;
        padding: 0.2rem 0.4rem !important;
    }
    
    /* Operator badge with VIP/Free inline layout */
    #promotionGrid .operator-badge {
        margin-bottom: 0.5rem !important;
        position: relative !important;
        z-index: 1 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 0.5rem !important;
        flex-wrap: wrap !important;
    }
    
    /* Make operator and special badges inline */
    #promotionGrid .operator-badge .badge {
        display: inline-flex !important;
        align-items: center !important;
        gap: 0.25rem !important;
    }
    
    /* Luxury operator badge colors */
    #promotionGrid .operator-ais {
        background: linear-gradient(135deg, #059669, #10B981) !important;
        color: white !important;
        box-shadow: 0 2px 8px rgba(5, 150, 105, 0.2) !important;
    }
    
    #promotionGrid .operator-dtac {
        background: linear-gradient(135deg, #2563EB, #3B82F6) !important;
        color: white !important;
        box-shadow: 0 2px 8px rgba(37, 99, 235, 0.2) !important;
    }
    
    #promotionGrid .operator-true {
        background: linear-gradient(135deg, #7C3AED, #8B5CF6) !important;
        color: white !important;
        box-shadow: 0 2px 8px rgba(124, 58, 237, 0.2) !important;
    }
    
    /* Compact buttons to fit in card */
    #promotionGrid .promotion-buttons {
        gap: 0.25rem !important;
        margin-top: 0.5rem !important;
        display: flex !important;
        flex-wrap: nowrap !important;
    }
    
    #promotionGrid .promotion-btn {
        padding: 0.5rem 0.6rem !important;
        font-size: 0.75rem !important;
        font-weight: 500 !important;
        border-radius: 6px !important;
        border: none !important;
        transition: all 0.3s ease !important;
        flex: 1 !important;
        min-width: 0 !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }
    
    #promotionGrid .promotion-btn-copy {
        background: #F1F5F9 !important;
        color: #475569 !important;
        border: 1px solid #E2E8F0 !important;
    }
    
    #promotionGrid .promotion-btn-copy:hover {
        background: #E2E8F0 !important;
        color: #334155 !important;
    }
    
    #promotionGrid .promotion-btn-order {
        background: linear-gradient(135deg, #1E293B 0%, #334155 100%) !important;
        color: #FFFFFF !important;
        box-shadow: 0 2px 8px rgba(30, 41, 59, 0.2) !important;
    }
    
    #promotionGrid .promotion-btn-order:hover {
        background: linear-gradient(135deg, #334155 0%, #475569 100%) !important;
        transform: translateY(-1px) !important;
        box-shadow: 0 4px 12px rgba(30, 41, 59, 0.3) !important;
    }
}

/* Smooth scroll behavior */
@media (max-width: 768px) {
    #promotionGrid {
        scroll-snap-type: x mandatory !important;
    }
    
    #promotionGrid .col-lg-3,
    #promotionGrid .col-md-6,
    #promotionGrid .col-sm-6 {
        scroll-snap-align: start !important;
    }
}

/* Hide loading indicator on mobile scroll */
@media (max-width: 768px) {
    #promotionLoading {
        display: none !important;
    }
}

/* Touch-friendly improvements and final styling */
@media (max-width: 768px) {
    /* Touch-friendly button sizing */
    #promotionGrid .promotion-btn,
    #promotionGrid .btn {
        min-height: 36px !important;
        min-width: 60px !important;
    }
    
    #promotionGrid .d-flex.gap-2,
    #promotionGrid .promotion-buttons {
        gap: 0.25rem !important;
    }
    
    #promotionGrid .flex-fill {
        flex: 1 1 auto !important;
    }
    
    /* Remove absolute positioning for VIP badge - make it inline */
    #promotionGrid .position-absolute {
        position: static !important;
        top: auto !important;
        left: auto !important;
        margin: 0 !important;
    }
    
    #promotionGrid .badge.bg-warning {
        background: linear-gradient(135deg, #f59e0b 0%, #fcd34d 100%) !important;
        color: #1f2937 !important;
        font-size: 0.7rem !important;
        padding: 0.25rem 0.5rem !important;
    }
    
    #promotionGrid .badge.bg-info {
        background: linear-gradient(135deg, #0ea5e9 0%, #0284c7 100%) !important;
        color: white !important;
    }
    
    #promotionGrid .badge.bg-light {
        background: #f8fafc !important;
        color: #475569 !important;
        border: 1px solid #e2e8f0 !important;
    }
    
    /* Make special price badge inline with operator */
    #promotionGrid .special-price-badge {
        position: static !important;
        top: auto !important;
        right: auto !important;
        font-size: 0.7rem !important;
        padding: 0.25rem 0.5rem !important;
        z-index: auto !important;
        background: linear-gradient(135deg, #059669 0%, #10B981 100%) !important;
        color: #FFFFFF !important;
        font-weight: 600 !important;
        box-shadow: 0 2px 6px rgba(5, 150, 105, 0.2) !important;
        display: inline-flex !important;
        align-items: center !important;
        border-radius: 6px !important;
    }
    
    #promotionGrid .special-price-badge.free-badge {
        background: linear-gradient(135deg, #059669 0%, #10B981 100%) !important;
    }
    
    /* Luxury VIP and other badges */
    #promotionGrid .badge.bg-warning {
        background: linear-gradient(135deg, #B8860B 0%, #D4AF37 100%) !important;
        color: #FFFFFF !important;
        font-size: 0.7rem !important;
        padding: 0.25rem 0.5rem !important;
        font-weight: 600 !important;
        box-shadow: 0 2px 6px rgba(184, 134, 11, 0.2) !important;
    }
    
    #promotionGrid .badge.bg-info {
        background: linear-gradient(135deg, #0F766E 0%, #14B8A6 100%) !important;
        color: white !important;
        box-shadow: 0 2px 6px rgba(15, 118, 110, 0.2) !important;
    }
    
    #promotionGrid .badge.bg-light {
        background: #F8FAFC !important;
        color: #475569 !important;
        border: 1px solid #E2E8F0 !important;
        font-weight: 500 !important;
    }
    
    /* Remove extra spacing */
    #promotionGrid .text-center {
        margin-bottom: 0.5rem !important;
    }
    
    /* Luxury card styling */
    #promotionGrid .promotion-card::before {
        height: 3px !important;
        background: linear-gradient(90deg, #B8860B 0%, #D4AF37 50%, #B8860B 100%) !important;
    }
    
    #promotionGrid .promotion-card.vip-card::before {
        height: 4px !important;
        background: linear-gradient(90deg, #D4AF37 0%, #FFD700 50%, #D4AF37 100%) !important;
    }
    
    /* Better spacing for card content */
    #promotionGrid .promotion-card {
        padding-top: 1.25rem !important;
        border-radius: 12px !important;
    }
    
    #promotionGrid .promotion-card:hover {
        transform: translateY(-4px) !important;
        box-shadow: 0 12px 35px rgba(0, 0, 0, 0.12), 0 6px 20px rgba(184, 134, 11, 0.1) !important;
    }
    
    /* VIP card luxury styling */
    #promotionGrid .promotion-card.vip-card {
        background: linear-gradient(135deg, #FFFBF0 0%, #FFF8E1 100%) !important;
        border: 1px solid rgba(212, 175, 55, 0.3) !important;
    }
    
    #promotionGrid .promotion-card.vip-card:hover {
        box-shadow: 0 12px 35px rgba(0, 0, 0, 0.12), 0 6px 20px rgba(212, 175, 55, 0.2) !important;
    }
    
    /* Ensure no overlap between elements */
    #promotionGrid .promotion-card > * {
        position: relative !important;
        z-index: 1 !important;
    }
    
    /* Alternative layout for cards with badges */
    #promotionGrid .promotion-card .operator-badge + .promotion-number-display {
        margin-top: 0.25rem !important;
    }
    
    /* Text overflow prevention */
    #promotionGrid .promotion-card * {
        max-width: 100% !important;
        box-sizing: border-box !important;
    }
    
    /* Clean scrollbar for better appearance */
    #promotionGrid::-webkit-scrollbar {
        height: 4px !important;
    }
    
    #promotionGrid::-webkit-scrollbar-track {
        background: rgba(0, 0, 0, 0.05) !important;
        border-radius: 2px !important;
    }
    
    #promotionGrid::-webkit-scrollbar-thumb {
        background: rgba(0, 0, 0, 0.2) !important;
        border-radius: 2px !important;
    }
    
    #promotionGrid::-webkit-scrollbar-thumb:hover {
        background: rgba(0, 0, 0, 0.3) !important;
    }
}
/* E
nhanced mobile button layout - prevent overflow */
@media (max-width: 768px) {
    /* Ensure buttons fit within card */
    #promotionGrid .promotion-buttons {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        overflow: hidden !important;
        display: flex !important;
        flex-wrap: nowrap !important;
        gap: 0.25rem !important;
    }
    
    #promotionGrid .promotion-btn {
        flex: 1 !important;
        min-width: 0 !important;
        max-width: none !important;
        padding: 0.4rem 0.3rem !important;
        font-size: 0.7rem !important;
        line-height: 1.2 !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 0.2rem !important;
    }
    
    /* Responsive icon sizing */
    #promotionGrid .promotion-btn i {
        font-size: 0.65rem !important;
        flex-shrink: 0 !important;
    }
    
    /* Compact card content spacing */
    #promotionGrid .promotion-card {
        padding: 0.875rem !important;
    }
    
    #promotionGrid .promotion-number-display,
    #promotionGrid .number-display-enhanced {
        font-size: 1.05rem !important;
        margin: 0.4rem 0 !important;
    }
    
    #promotionGrid .promotion-price-display,
    #promotionGrid .price-display-enhanced {
        font-size: 1rem !important;
        margin: 0.4rem 0 !important;
    }
    
    #promotionGrid .promotion-badges {
        margin: 0.4rem 0 !important;
        gap: 0.2rem !important;
    }
    
    #promotionGrid .promotion-badge {
        font-size: 0.65rem !important;
        padding: 0.15rem 0.3rem !important;
    }
}/* Mobil
e header alignment - center title and description */
@media (max-width: 768px) {
    /* Center align promotion section header */
    .promotion-section .text-center,
    .bg-gradient-light .text-center {
        text-align: center !important;
        margin-bottom: 1.5rem !important;
    }
    
    /* Promotion title styling for mobile */
    .promotion-section .text-gradient,
    .bg-gradient-light .text-gradient {
        font-size: 1.5rem !important;
        line-height: 1.3 !important;
        margin-bottom: 0.75rem !important;
        text-align: center !important;
        padding: 0 1rem !important;
    }
    
    /* Promotion description styling for mobile */
    .promotion-section .text-muted,
    .bg-gradient-light .text-muted {
        font-size: 0.9rem !important;
        line-height: 1.4 !important;
        text-align: center !important;
        padding: 0 1rem !important;
        margin-bottom: 1rem !important;
        color: #64748B !important;
    }
    
    /* Ensure container has proper spacing */
    .promotion-section .container,
    .bg-gradient-light .container {
        padding-left: 1rem !important;
        padding-right: 1rem !important;
    }
    
    /* Section padding adjustment */
    .py-5 {
        padding-top: 2rem !important;
        padding-bottom: 2rem !important;
    }
}/* Apply mob
ile card styling to desktop as well */
@media (min-width: 769px) {
    /* Desktop cards use same luxury styling as mobile */
    .promotion-card,
    .number-card-glass {
        background: linear-gradient(135deg, #FFFFFF 0%, #F8FAFC 100%) !important;
        border: 1px solid #E2E8F0 !important;
        box-shadow: 0 8px 25px rgba(0, 0, 0, 0.08), 0 4px 12px rgba(0, 0, 0, 0.04) !important;
        border-radius: 12px !important;
        transition: all 0.3s ease !important;
    }
    
    .promotion-card:hover,
    .number-card-glass:hover {
        transform: translateY(-4px) !important;
        box-shadow: 0 12px 35px rgba(0, 0, 0, 0.12), 0 6px 20px rgba(184, 134, 11, 0.1) !important;
    }
    
    /* VIP card luxury styling for desktop */
    .promotion-card.vip-card {
        background: linear-gradient(135deg, #FFFBF0 0%, #FFF8E1 100%) !important;
        border: 1px solid rgba(212, 175, 55, 0.3) !important;
    }
    
    .promotion-card.vip-card:hover {
        box-shadow: 0 12px 35px rgba(0, 0, 0, 0.12), 0 6px 20px rgba(212, 175, 55, 0.2) !important;
    }
    
    /* Luxury operator badge colors for desktop */
    .operator-ais {
        background: linear-gradient(135deg, #059669, #10B981) !important;
        color: white !important;
        box-shadow: 0 2px 8px rgba(5, 150, 105, 0.2) !important;
    }
    
    .operator-dtac {
        background: linear-gradient(135deg, #2563EB, #3B82F6) !important;
        color: white !important;
        box-shadow: 0 2px 8px rgba(37, 99, 235, 0.2) !important;
    }
    
    .operator-true {
        background: linear-gradient(135deg, #7C3AED, #8B5CF6) !important;
        color: white !important;
        box-shadow: 0 2px 8px rgba(124, 58, 237, 0.2) !important;
    }
    
    /* Luxury number display for desktop */
    .promotion-number-display,
    .number-display-enhanced {
        color: #1E293B !important;
        background: none !important;
        -webkit-text-fill-color: #1E293B !important;
        text-shadow: 0 1px 2px rgba(30, 41, 59, 0.1) !important;
        font-weight: 700 !important;
    }
    
    /* Luxury price colors for desktop */
    .promotion-price-display.regular-price {
        color: #B8860B !important;
        background: none !important;
        -webkit-text-fill-color: #B8860B !important;
        text-shadow: 0 1px 2px rgba(184, 134, 11, 0.2) !important;
    }
    
    .promotion-price-display.free-price {
        color: #059669 !important;
        background: none !important;
        -webkit-text-fill-color: #059669 !important;
        text-shadow: 0 1px 2px rgba(5, 150, 105, 0.2) !important;
    }
    
    /* Luxury buttons for desktop */
    .promotion-btn-copy {
        background: #F1F5F9 !important;
        color: #475569 !important;
        border: 1px solid #E2E8F0 !important;
        border-radius: 8px !important;
        transition: all 0.3s ease !important;
    }
    
    .promotion-btn-copy:hover {
        background: #E2E8F0 !important;
        color: #334155 !important;
    }
    
    .promotion-btn-order {
        background: linear-gradient(135deg, #1E293B 0%, #334155 100%) !important;
        color: #FFFFFF !important;
        box-shadow: 0 2px 8px rgba(30, 41, 59, 0.2) !important;
        border: none !important;
        border-radius: 8px !important;
        transition: all 0.3s ease !important;
    }
    
    .promotion-btn-order:hover {
        background: linear-gradient(135deg, #334155 0%, #475569 100%) !important;
        transform: translateY(-1px) !important;
        box-shadow: 0 4px 12px rgba(30, 41, 59, 0.3) !important;
        color: #FFFFFF !important;
    }
    
    /* Luxury VIP and special badges for desktop */
    .badge.bg-warning {
        background: linear-gradient(135deg, #B8860B 0%, #D4AF37 100%) !important;
        color: #FFFFFF !important;
        font-weight: 600 !important;
        box-shadow: 0 2px 6px rgba(184, 134, 11, 0.2) !important;
    }
    
    .badge.bg-info {
        background: linear-gradient(135deg, #0F766E 0%, #14B8A6 100%) !important;
        color: white !important;
        box-shadow: 0 2px 6px rgba(15, 118, 110, 0.2) !important;
    }
    
    .special-price-badge {
        background: linear-gradient(135deg, #059669 0%, #10B981 100%) !important;
        color: #FFFFFF !important;
        font-weight: 600 !important;
        box-shadow: 0 2px 6px rgba(5, 150, 105, 0.2) !important;
    }
    
    /* Card top border accent */
    .promotion-card::before {
        content: '' !important;
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        height: 3px !important;
        background: linear-gradient(90deg, #B8860B 0%, #D4AF37 50%, #B8860B 100%) !important;
        border-radius: 12px 12px 0 0 !important;
    }
    
    .promotion-card.vip-card::before {
        height: 4px !important;
        background: linear-gradient(90deg, #D4AF37 0%, #FFD700 50%, #D4AF37 100%) !important;
    }
    
    /* Ensure proper positioning */
    .promotion-card {
        position: relative !important;
        overflow: hidden !important;
    }
}/
* MOBILE HEADER CENTER FIX - Override previous styles */
@media (max-width: 768px) {
    /* Force center alignment for promotion section header */
    .bg-gradient-light .text-center,
    .bg-gradient-light .text-center *,
    .text-center,
    .text-center * {
        text-align: center !important;
        margin-left: auto !important;
        margin-right: auto !important;
        display: block !important;
        width: 100% !important;
    }
    
    /* Specific targeting for title */
    h2.text-gradient,
    .text-gradient,
    .bg-gradient-light h2,
    .bg-gradient-light .text-gradient {
        text-align: center !important;
        font-size: 1.4rem !important;
        line-height: 1.3 !important;
        margin: 0 auto 0.75rem auto !important;
        padding: 0 1rem !important;
        width: 100% !important;
        display: block !important;
    }
    
    /* Specific targeting for description */
    p.text-muted,
    .text-muted,
    .bg-gradient-light p,
    .bg-gradient-light .text-muted {
        text-align: center !important;
        font-size: 0.85rem !important;
        line-height: 1.4 !important;
        margin: 0 auto 1rem auto !important;
        padding: 0 1rem !important;
        color: #64748B !important;
        width: 100% !important;
        display: block !important;
    }
    
    /* Container center alignment */
    .bg-gradient-light .container {
        text-align: center !important;
        padding-left: 1rem !important;
        padding-right: 1rem !important;
    }
    
    /* Section adjustments */
    section.py-5.bg-gradient-light {
        text-align: center !important;
        padding: 2rem 0 !important;
    }
}