/* ============================================
   Mobile Specific Styles for Loto Products Gallery
   ============================================ */

/* CRITICAL: Safe Area & Status Bar Support */
/* iOS Safari: Saydam status bar ve çentik desteği */
@supports (padding: env(safe-area-inset-top)) {
    :root {
        --safe-area-inset-top: env(safe-area-inset-top);
        --safe-area-inset-right: env(safe-area-inset-right);
        --safe-area-inset-bottom: env(safe-area-inset-bottom);
        --safe-area-inset-left: env(safe-area-inset-left);
    }
}

/* THEME-AGNOSTIC Body scroll prevention */
/* High specificity to override theme styles */
html.loto-scroll-locked,
html.modal-open,
body.loto-scroll-locked,
body.modal-open {
    /* CRITICAL: JS sets inline styles with !important */
    /* These fallback rules ensure compatibility if JS fails */
    overflow: hidden !important;
}

/* Extra specificity for stubborn themes */
html.loto-scroll-locked.modal-open {
    overflow: hidden !important;
    height: 100% !important;
}

body.loto-scroll-locked.modal-open {
    overflow: hidden !important;
    /* position:fixed is set by JS with !important and top:-scrollY */
    /* DO NOT set position here - it breaks scroll position restoration */
}

/* iOS Safari: Additional scroll lock */
body.modal-open,
body.loto-scroll-locked {
    -webkit-overflow-scrolling: touch !important;
    overscroll-behavior: none !important;
}

/* Prevent theme interference with body when popup is open */
body.loto-scroll-locked * {
    /* Allow scrolling inside popup content areas */
    -webkit-overflow-scrolling: touch;
}

/* ========================================
   MOBILE: Horizontal Top Filter - Compact
   ======================================== */
@media (max-width: 768px) {
    /* Filter panel - more compact on mobile */
    .loto-products-widget .color-filter-panel {
        padding: 12px 16px;
        margin-bottom: 20px;
        border-radius: 12px;
    }

    /* Filter controls - stack vertically on small screens */
    .loto-products-widget .color-filter-panel .filter-controls {
        flex-direction: column;
        gap: 10px;
        margin-bottom: 12px;
    }

    .loto-products-widget .filter-search {
        max-width: 100%;
    }

    .loto-products-widget .filter-search-input {
        padding: 10px 14px 10px 38px;
        font-size: 13px;
    }

    .loto-products-widget .clear-filters {
        padding: 12px 24px;
        font-size: 13px;
        width: 100%;
        justify-content: center;
        letter-spacing: 0.3px;
    }

    .loto-products-widget .clear-filters svg {
        width: 16px;
        height: 16px;
    }

    /* Color cards - compact product card style on mobile */
    .loto-products-widget .color-card {
        min-width: 150px;
        border-top-width: 2px;
    }

    .loto-products-widget .color-card:hover,
    .loto-products-widget .color-card.active {
        border-top-width: 3px;
        transform: translateY(-2px);
    }

    .loto-products-widget .color-card-content {
        padding: 12px 16px 10px;
        gap: 4px;
    }

    .loto-products-widget .card-title {
        font-size: 11px;
        letter-spacing: 1.2px;
    }

    .loto-products-widget .color-card:hover .card-title {
        letter-spacing: 1.8px;
    }

    .loto-products-widget .card-subtitle {
        font-size: 9px;
        letter-spacing: 0.3px;
    }

    .loto-products-widget .color-card::after {
        height: 1.5px;
    }
}

/* ============================================
   MOBİL EXPANDABLE SEARCH BAR
   ============================================ */
@media (max-width: 768px) {
    /* Controls wrapper - flex row */
    .loto-products-widget .mobile-controls-wrapper {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        gap: 10px !important;
        padding: 10px 15px !important;
    }

    /* Expandable search container */
    .loto-products-widget .mobile-search-expandable {
        display: flex !important;
        align-items: center !important;
        position: relative !important;
        height: 44px !important;
        transition: all 0.3s ease !important;
    }

    /* Search input - hidden by default, expands left */
    .loto-products-widget .mobile-search-input-exp {
        width: 0 !important;
        padding: 0 !important;
        border: none !important;
        background: #f5f5f5 !important;
        height: 44px !important;
        font-size: 15px !important;
        border-radius: 22px 0 0 22px !important;
        outline: none !important;
        transition: all 0.3s ease !important;
        opacity: 0 !important;
    }

    /* Search input when expanded */
    .loto-products-widget .mobile-search-expandable.expanded .mobile-search-input-exp {
        width: 200px !important;
        padding: 0 15px !important;
        opacity: 1 !important;
        border: 2px solid #333 !important;
        border-right: none !important;
    }

    /* Search button */
    .loto-products-widget .mobile-search-btn-exp {
        width: 44px !important;
        height: 44px !important;
        min-width: 44px !important;
        border-radius: 22px !important;
        background: #333 !important;
        color: #fff !important;
        border: 2px solid #333 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        cursor: pointer !important;
        transition: all 0.3s ease !important;
        -webkit-tap-highlight-color: transparent !important;
        touch-action: manipulation !important;
    }

    /* Search button when expanded */
    .loto-products-widget .mobile-search-expandable.expanded .mobile-search-btn-exp {
        border-radius: 0 22px 22px 0 !important;
    }

    .loto-products-widget .mobile-search-btn-exp svg {
        width: 20px !important;
        height: 20px !important;
        stroke: #fff !important;
    }

    .loto-products-widget .mobile-search-btn-exp:active {
        transform: scale(0.95) !important;
    }

    /* Filter button takes remaining space */
    .loto-products-widget .mobile-filter-btn {
        flex: 1 !important;
        min-width: 0 !important;
    }

    /* Hide old search elements */
    .loto-products-widget .mobile-search-btn,
    .loto-products-widget .mobile-search-bar {
        display: none !important;
    }
}

/* ============================================
   MOBİL PAGİNATİON BUTONLARI
   ============================================ */
@media (max-width: 768px) {
    /* Pagination container */
    .loto-products-widget .loto-pagination {
        display: flex !important;
        flex-wrap: wrap !important;
        justify-content: center !important;
        align-items: center !important;
        gap: 12px !important;
        padding: 15px 10px !important;
    }

    /* Önceki/Sonraki butonları - MOBİL */
    .loto-products-widget .page-btn {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 6px !important;
        padding: 12px 18px !important;
        font-size: 14px !important;
        font-weight: 500 !important;
        color: #333 !important;
        background-color: #fff !important;
        border: 2px solid #333 !important;
        border-radius: 8px !important;
        cursor: pointer !important;
        /* CRITICAL: Mobile touch support */
        -webkit-tap-highlight-color: rgba(0,0,0,0.1) !important;
        touch-action: manipulation !important;
        pointer-events: auto !important;
        position: relative !important;
        z-index: 100 !important;
        /* Remove default button styles */
        -webkit-appearance: none !important;
        -moz-appearance: none !important;
        appearance: none !important;
        outline: none !important;
    }

    .loto-products-widget .page-btn:active:not(:disabled) {
        background-color: #333 !important;
        color: #fff !important;
        transform: scale(0.98) !important;
    }

    .loto-products-widget .page-btn:disabled {
        opacity: 0.3 !important;
        pointer-events: none !important;
        border-color: #ccc !important;
        color: #999 !important;
    }

    .loto-products-widget .page-btn svg {
        width: 16px !important;
        height: 16px !important;
        pointer-events: none !important;
    }

    .loto-products-widget .page-btn span {
        pointer-events: none !important;
    }

    /* Sayfa bilgisi */
    .loto-products-widget .page-info {
        font-size: 14px !important;
        color: #666 !important;
        text-align: center !important;
        width: 100% !important;
        order: -1 !important;
        margin-bottom: 8px !important;
    }

    .loto-products-widget .page-info .current-page {
        font-weight: 700 !important;
        color: #333 !important;
    }
}

/* ============================================
   OLD Mobile Popup Styles (v1) - ESKİ POPUP İÇİN
   SADECE .mobile-loto-popup class'ı için geçerli
   ============================================ */
@media (max-width: 768px) {
    /* CRITICAL: Bu kurallar SADECE eski popup (mobile-loto-popup) için geçerli! */
    /* Yeni popup (mobile-loto-popup-v2) için UYGULANMAYACAK! */

    /* Mobile layout - vertical - SADECE ESKİ POPUP */
    .mobile-loto-popup > div[style*="display:flex"] {
        flex-direction: column !important;
        height: 100% !important;
    }

    /* Gallery section on top - SADECE ESKİ POPUP */
    .mobile-loto-popup > div > div:first-child {
        flex: 0 0 40% !important;
        width: 100% !important;
        border-radius: 13px 13px 0 0 !important;
    }

    /* Hide thumbnails on mobile - SADECE ESKİ POPUP */
    .mobile-loto-popup .gallery-thumbnails {
        display: none !important;
    }

    /* Full width gallery - SADECE ESKİ POPUP */
    .mobile-loto-popup .gallery-main {
        border-radius: 13px 13px 0 0 !important;
        height: 100% !important;
    }

    /* Info section in middle/bottom - SADECE ESKİ POPUP */
    .mobile-loto-popup .loto-popup-info {
        flex: 1 1 auto !important;
        width: 100% !important;
        padding: 16px 16px 0 16px !important;
        border-radius: 0 0 13px 13px !important;
        border-left: none !important;
        border-top: 1px solid rgba(0,0,0,0.08) !important;
        overflow: hidden !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 0 !important;
        max-height: 60vh !important;
    }

    /* Text content wrapper - scrollable - SADECE ESKİ POPUP */
    .mobile-loto-popup .loto-popup-info > div:first-child {
        padding-right: 0 !important;
        margin-bottom: 0 !important;
        flex: 1 1 auto !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        min-height: 0 !important;
        padding-right: 8px !important;
        padding-top: 0 !important;
        margin-top: 0 !important;
    }

    /* Item card at bottom - SADECE ESKİ POPUP */
    .mobile-loto-popup .loto-popup-info > div[style*="position:absolute"] {
        position: relative !important;
        bottom: auto !important;
        left: auto !important;
        right: auto !important;
        width: 100% !important;
        padding: 4px 8px 16px 8px !important;
        background: linear-gradient(to top, rgba(255,255,255,1) 0%, rgba(255,255,255,1) 90%, rgba(255,255,255,0.95) 100%) !important;
        border-radius: 10px !important;
        box-shadow: 0 -4px 16px rgba(0,0,0,0.08) !important;
        margin-top: 4px !important;
        flex-shrink: 0 !important;
        flex-grow: 0 !important;
    }

    /* Remove top margin from mobile item card container - SADECE ESKİ POPUP */
    .mobile-loto-popup .mobile-item-card-container {
        margin-top: 0 !important;
        padding-top: 0 !important;
    }

    /* Ensure mobile item card starts at top - SADECE ESKİ POPUP */
    .mobile-loto-popup .loto-popup-info .mobile-item-card-container {
        position: relative !important;
        top: -8px !important;
    }

    /* Smaller item card on mobile - SADECE ESKİ POPUP */
    .mobile-loto-popup .loto-popup-info div[style*="width:165px"] {
        width: 96px !important;
        height: 144px !important;
    }

    .mobile-loto-popup .loto-popup-info div[style*="width:165px"] > div:first-child {
        width: 96px !important;
        height: 144px !important;
    }

    /* Smaller color block - SADECE ESKİ POPUP */
    .mobile-loto-popup .loto-popup-info div[style*="width:75px"] {
        width: 44px !important;
        height: 64px !important;
        bottom: -20px !important;
    }

    .mobile-loto-popup .loto-popup-info div[style*="width:75px"] > div {
        width: 44px !important;
        height: 64px !important;
        padding-bottom: 8px !important;
    }

    /* Smaller product name in color block - SADECE ESKİ POPUP */
    .mobile-loto-popup .loto-popup-info h4 {
        font-size: 6px !important;
        letter-spacing: 1.2px !important;
    }

    /* Main product title - SADECE ESKİ POPUP */
    .mobile-loto-popup .loto-popup-info h2 {
        font-size: 16px !important;
        margin: 0 0 12px 0 !important;
        letter-spacing: 2px !important;
    }

    /* Section headers - SADECE ESKİ POPUP */
    .mobile-loto-popup .loto-popup-info h3 {
        font-size: 10px !important;
        letter-spacing: 2px !important;
    }

    /* Content text - SADECE ESKİ POPUP */
    .mobile-loto-popup .loto-popup-info p {
        font-size: 11px !important;
        line-height: 1.6 !important;
    }

    /* Adjust line decorations - SADECE ESKİ POPUP */
    .mobile-loto-popup .loto-popup-info div[style*="width:60px"] {
        width: 32px !important;
    }

    /* Close button position - SADECE ESKİ POPUP */
    .mobile-loto-popup button[onclick="closeLotoPopup()"] {
        top: 8px !important;
        right: 8px !important;
        width: 29px !important;
        height: 29px !important;
        background: rgba(0,0,0,0.7) !important;
        color: white !important;
        border: none !important;
        font-size: 14px !important;
        z-index: 1000 !important;
    }

    /* Gallery navigation for mobile - SADECE ESKİ POPUP */
    .mobile-loto-popup .gallery-main button {
        width: 29px !important;
        height: 29px !important;
        font-size: 13px !important;
        background: rgba(255,255,255,0.9) !important;
        backdrop-filter: blur(10px) !important;
        -webkit-backdrop-filter: blur(10px) !important;
    }

    /* Adjust margins for mobile - SADECE ESKİ POPUP */
    .mobile-loto-popup .loto-popup-info > div > div[style*="margin-bottom"] {
        margin-bottom: 20px !important;
    }

    /* Remove gaps and extra spacing in mobile popup - SADECE ESKİ POPUP */
    .mobile-loto-popup .loto-popup-info * {
        margin-top: 0 !important;
    }

    /* Compact spacing between sections - SADECE ESKİ POPUP */
    .mobile-loto-popup .loto-popup-info > div:first-child > div {
        margin-bottom: 10px !important;
    }

    /* Last section before item card - SADECE ESKİ POPUP */
    .mobile-loto-popup .loto-popup-info > div:first-child > div:last-child {
        margin-bottom: 0 !important;
    }

    /* Remove padding from last content section - SADECE ESKİ POPUP */
    .mobile-loto-popup .loto-popup-info > div:first-child {
        padding-bottom: 0 !important;
        padding-top: 0 !important;
    }

    /* First element in text content - remove top spacing - SADECE ESKİ POPUP */
    .mobile-loto-popup .loto-popup-info > div:first-child > div:first-child {
        margin-top: 0 !important;
        padding-top: 0 !important;
    }

    /* Product title - stick to top - SADECE ESKİ POPUP */
    .mobile-loto-popup .loto-popup-info h2 {
        margin-top: 0 !important;
        padding-top: 0 !important;
    }

    /* Force tight spacing by removing all gaps - SADECE ESKİ POPUP */
    .mobile-loto-popup .loto-popup-info .loto-popup-info {
        gap: 0 !important;
    }

    /* Custom scrollbar for text content - SADECE ESKİ POPUP */
    .mobile-loto-popup .loto-popup-info > div:first-child::-webkit-scrollbar {
        width: 5px !important;
    }

    .mobile-loto-popup .loto-popup-info > div:first-child::-webkit-scrollbar-track {
        background: rgba(0,0,0,0.1) !important;
        border-radius: 2px !important;
    }

    .mobile-loto-popup .loto-popup-info > div:first-child::-webkit-scrollbar-thumb {
        background: rgba(0,0,0,0.3) !important;
        border-radius: 2px !important;
    }

    .mobile-loto-popup .loto-popup-info > div:first-child::-webkit-scrollbar-thumb:hover {
        background: rgba(0,0,0,0.5) !important;
    }
}

/* Smaller mobile devices - SADECE ESKİ POPUP (v1) */
@media (max-width: 480px) {
    /* Even smaller item card - SADECE ESKİ POPUP */
    .mobile-loto-popup .loto-popup-info div[style*="width:165px"],
    .mobile-loto-popup .loto-popup-info div[style*="width:120px"] {
        width: 80px !important;
        height: 120px !important;
    }

    .mobile-loto-popup .loto-popup-info div[style*="width:165px"] > div:first-child,
    .mobile-loto-popup .loto-popup-info div[style*="width:120px"] > div:first-child {
        width: 80px !important;
        height: 120px !important;
    }

    /* Even smaller color block - SADECE ESKİ POPUP */
    .mobile-loto-popup .loto-popup-info div[style*="width:75px"],
    .mobile-loto-popup .loto-popup-info div[style*="width:55px"] {
        width: 36px !important;
        height: 52px !important;
        bottom: -16px !important;
    }

    .mobile-loto-popup .loto-popup-info div[style*="width:75px"] > div,
    .mobile-loto-popup .loto-popup-info div[style*="width:55px"] > div {
        width: 36px !important;
        height: 52px !important;
        padding-bottom: 6px !important;
    }

    /* Tiny product name - SADECE ESKİ POPUP */
    .mobile-loto-popup .loto-popup-info h4 {
        font-size: 6px !important;
        letter-spacing: 0.8px !important;
    }

    /* Smaller main title - SADECE ESKİ POPUP */
    .mobile-loto-popup .loto-popup-info h2 {
        font-size: 14px !important;
    }

    /* Adjust info padding - SADECE ESKİ POPUP */
    .mobile-loto-popup .loto-popup-info {
        padding: 12px 12px 0 12px !important;
        max-height: 65vh !important;
    }

    /* More compact spacing on smaller screens - SADECE ESKİ POPUP */
    .mobile-loto-popup .loto-popup-info > div:first-child > div {
        margin-bottom: 6px !important;
    }

    /* Item card even closer on smaller screens - SADECE ESKİ POPUP */
    .mobile-loto-popup .loto-popup-info > div[style*="position:absolute"] {
        margin-top: 2px !important;
        padding: 6px 6px 12px 6px !important;
        flex-shrink: 0 !important;
        flex-grow: 0 !important;
    }

    /* Ensure text content is scrollable on small screens - SADECE ESKİ POPUP */
    .mobile-loto-popup .loto-popup-info > div:first-child {
        padding-right: 6px !important;
    }
}

/* ============================================
   YENİ MOBİL POPUP TASARIMI V2 - SIFIRDAN
   ============================================ */
@media (max-width: 768px) {

    /* Overlay animasyonu */
    .loto-popup-overlay-widget.active {
        opacity: 1 !important;
    }

    /* CRITICAL FIX: Popup container - Ensure proper display and layout */
    .mobile-loto-popup-v2 {
        will-change: transform, opacity !important;
        transform-origin: center center !important;
        backface-visibility: hidden !important;
        -webkit-backface-visibility: hidden !important;
        /* CRITICAL: Force proper flexbox layout */
        display: flex !important;
        flex-direction: column !important;
        /* CRITICAL: Ensure popup has proper dimensions */
        width: 96vw !important;
        max-width: 600px !important;
        height: 92vh !important;
        max-height: 900px !important;
        min-height: 400px !important;
    }

    /* CRITICAL FIX: Content area - flex container */
    .mobile-loto-popup-v2 > div[style*="flex:1"] {
        flex: 1 1 auto !important;
        overflow: hidden !important;
        display: flex !important;
        flex-direction: column !important;
        min-height: 0 !important;
    }

    /* RESİM ALANI - SABİT BOYUT, asla küçülmez */
    .mobile-loto-popup-v2 #popup-image-display {
        flex: 0 0 auto !important;
        height: clamp(180px, 40vw, 280px) !important;
        min-height: clamp(180px, 40vw, 280px) !important;
        max-height: clamp(180px, 40vw, 280px) !important;
        width: 100% !important;
        overflow: hidden !important;
    }

    /* RENK BUTONLARI - SABİT, asla küçülmez */
    .mobile-loto-popup-v2 .color-buttons-container {
        flex: 0 0 auto !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
    }

    /* AÇIKLAMA ALANI - SCROLL EDİLEBİLİR, kalan alanı doldurur */
    .mobile-loto-popup-v2 #popup-description {
        flex: 1 1 auto !important;
        min-height: 60px !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        -webkit-overflow-scrolling: touch !important;
    }

    /* Açıklama içindeki metin */
    .mobile-loto-popup-v2 #popup-description-text {
        overflow: visible !important;
    }

    /* Popup opening animation - only on first load */
    .mobile-loto-popup-v2.popup-opening {
        animation: popupSlideIn 0.3s ease;
    }

    @keyframes popupSlideIn {
        from {
            opacity: 0;
            transform: scale(0.9) translateX(0);
        }
        to {
            opacity: 1;
            transform: scale(1) translateX(0);
        }
    }

    /* Swipe gesture için smooth transitions */
    .mobile-loto-popup-v2.swiping {
        transition: none !important;
        animation: none !important; /* Disable CSS animation during swipe */
    }

    /* Close button - küçültülmüş ve üst çerçeveye sığdırılmış */
    .mobile-loto-popup-v2 button[onclick="closeLotoPopup()"] {
        width: clamp(24px, 6vw, 32px) !important;
        height: clamp(24px, 6vw, 32px) !important;
        top: clamp(4px, 1vw, 8px) !important;
        right: clamp(4px, 1vw, 8px) !important;
        font-size: clamp(16px, 4vw, 20px) !important;
    }

    /* Close button hover */
    .mobile-loto-popup-v2 button[onclick="closeLotoPopup()"]:hover {
        background: rgba(0,0,0,0.8) !important;
        transform: scale(1.1) !important;
    }

    /* Başlık container - relative positioning için */
    .mobile-loto-popup-v2 > div:first-of-type {
        position: relative !important;
    }

    /* Başlık - popup çerçevesinin tam ortasında (absolute positioning) */
    .mobile-loto-popup-v2 #popup-product-title {
        transition: none !important;
        position: absolute !important;
        left: 50% !important;
        transform: translateX(-50%) !important;
        text-align: center !important;
        max-width: 60% !important; /* Ürün koduna ve close butona çarpmamak için */
    }

    /* Ürün kodu - solda (normal flow) */
    .mobile-loto-popup-v2 #popup-product-code {
        text-align: left !important;
        position: relative !important;
        z-index: 1 !important; /* Başlığın altında kalmaması için */
    }

    /* Resim alanı - smooth zoom efekti */
    .mobile-loto-popup-v2 #popup-image-display {
        transition: all 0.3s ease !important;
    }

    .mobile-loto-popup-v2 #popup-main-image {
        transition: transform 0.3s ease !important;
    }

    /* Renk butonları hover efekti */
    .mobile-loto-popup-v2 button[onclick*="showPopupImage"]:hover {
        transform: scale(1.1) !important;
        box-shadow: 0 4px 12px rgba(0,0,0,0.2) !important;
    }

    /* Ölçüler butonu hover */
    .mobile-loto-popup-v2 button[onclick="showDimensionsImage()"]:hover {
        transform: translateY(-2px) !important;
        box-shadow: 0 4px 12px rgba(255,167,38,0.4) !important;
    }

    /* Scrollbar styling */
    .mobile-loto-popup-v2 > div[style*="overflow-y:auto"]::-webkit-scrollbar {
        width: 4px !important;
    }

    .mobile-loto-popup-v2 > div[style*="overflow-y:auto"]::-webkit-scrollbar-track {
        background: transparent !important;
    }

    .mobile-loto-popup-v2 > div[style*="overflow-y:auto"]::-webkit-scrollbar-thumb {
        background: rgba(0,0,0,0.2) !important;
        border-radius: 2px !important;
    }

    .mobile-loto-popup-v2 > div[style*="overflow-y:auto"]::-webkit-scrollbar-thumb:hover {
        background: rgba(0,0,0,0.4) !important;
    }


    /* Sepete ekle button hover - Mavimsi gri buton için */
    .mobile-loto-popup-v2 #mobile-add-to-cart:not(:has(.mobile-cart-quantity)):hover {
        transform: translateY(-2px) !important;
        box-shadow: 0 6px 16px rgba(96,125,139,0.3) !important;
        background: linear-gradient(135deg, #C5CAE9 0%, #B0BEC5 100%) !important;
    }

    .mobile-loto-popup-v2 #mobile-add-to-cart:not(:has(.mobile-cart-quantity)):active {
        transform: translateY(0) !important;
    }

    /* Quantity controls hover - Gri buton için */
    .mobile-loto-popup-v2 .mobile-cart-minus:hover,
    .mobile-loto-popup-v2 .mobile-cart-plus:hover {
        background: rgba(31,41,55,0.95) !important;
        color: white !important;
        transform: scale(1.05) !important;
    }

    .mobile-loto-popup-v2 .mobile-cart-minus:active,
    .mobile-loto-popup-v2 .mobile-cart-plus:active {
        transform: scale(0.95) !important;
    }

    /* Horizontal scroll için custom scrollbar */
    .mobile-loto-popup-v2 div[style*="overflow-x:auto"]::-webkit-scrollbar {
        height: 4px !important;
    }

    .mobile-loto-popup-v2 div[style*="overflow-x:auto"]::-webkit-scrollbar-track {
        background: rgba(0,0,0,0.05) !important;
        border-radius: 2px !important;
    }

    .mobile-loto-popup-v2 div[style*="overflow-x:auto"]::-webkit-scrollbar-thumb {
        background: rgba(0,0,0,0.2) !important;
        border-radius: 2px !important;
    }

    /* iOS smooth scrolling */
    .mobile-loto-popup-v2 * {
        -webkit-overflow-scrolling: touch !important;
    }

    /* Gap consistency */
    .mobile-loto-popup-v2 div[style*="gap"] {
        gap: 16px !important;
    }
}