/* 
  Safari Mobile Fix - แก้ปัญหาเบอร์ซีดบน Safari มือถือ
  Fix faded numbers on Safari mobile browsers
*/

/* Safari-specific fixes for number display */
@supports (-webkit-appearance: none) {

    /* Force solid colors for Safari - no gradients on text */
    .number-display-enhanced,
    .phone-number,
    .number-card-glass .number-display-enhanced,
    .recommended-numbers-grid .number-display-enhanced {
        color: #1B2951 !important;
        background: none !important;
        background-image: none !important;
        background-color: transparent !important;
        -webkit-text-fill-color: #1B2951 !important;
        -webkit-background-clip: initial !important;
        background-clip: initial !important;
        text-shadow: none !important;
        filter: none !important;
        opacity: 1 !important;
        font-weight: 900 !important;
    }

    /* Force solid colors for price display */
    .price-display-enhanced,
    .price,
    .number-card-glass .price-display-enhanced,
    .recommended-numbers-grid .price-display-enhanced {
        color: #B8860B !important;
        background: none !important;
        background-image: none !important;
        background-color: transparent !important;
        -webkit-text-fill-color: #B8860B !important;
        -webkit-background-clip: initial !important;
        background-clip: initial !important;
        text-shadow: none !important;
        filter: none !important;
        opacity: 1 !important;
        font-weight: 900 !important;
    }
}

/* Mobile Safari specific fixes */
@media screen and (max-width: 768px) {
    @supports (-webkit-touch-callout: none) {

        /* iOS Safari specific */
        .number-display-enhanced,
        .phone-number,
        .number-card-glass .number-display-enhanced,
        .recommended-numbers-grid .number-display-enhanced {
            color: #1B2951 !important;
            background: none !important;
            background-image: none !important;
            background-color: transparent !important;
            -webkit-text-fill-color: #1B2951 !important;
            -webkit-background-clip: initial !important;
            background-clip: initial !important;
            text-shadow: 0 1px 2px rgba(27, 41, 81, 0.1) !important;
            filter: none !important;
            opacity: 1 !important;
            font-weight: 900 !important;
            -webkit-font-smoothing: antialiased !important;
            -moz-osx-font-smoothing: grayscale !important;
        }

        .price-display-enhanced,
        .price,
        .number-card-glass .price-display-enhanced,
        .recommended-numbers-grid .price-display-enhanced {
            color: #B8860B !important;
            background: none !important;
            background-image: none !important;
            background-color: transparent !important;
            -webkit-text-fill-color: #B8860B !important;
            -webkit-background-clip: initial !important;
            background-clip: initial !important;
            text-shadow: 0 1px 2px rgba(184, 134, 11, 0.2) !important;
            filter: none !important;
            opacity: 1 !important;
            font-weight: 900 !important;
            -webkit-font-smoothing: antialiased !important;
            -moz-osx-font-smoothing: grayscale !important;
        }

        /* Ensure cards have proper contrast */
        .number-card-glass,
        .recommended-numbers-grid .number-card-glass {
            background: #FFFFFF !important;
            background-color: #FFFFFF !important;
            background-image: none !important;
            backdrop-filter: none !important;
            -webkit-backdrop-filter: none !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;
        }

        /* VIP cards special handling */
        .number-card-glass:has(.badge.bg-warning),
        .recommended-numbers-grid .number-card-glass:has(.badge.bg-warning) {
            background: #FFFBF0 !important;
            background-color: #FFFBF0 !important;
            background-image: none !important;
            border: 1px solid rgba(212, 175, 55, 0.3) !important;
        }
    }
}

/* Webkit-specific overrides for all Safari versions */
@media screen and (-webkit-min-device-pixel-ratio: 0) {

    .number-display-enhanced,
    .phone-number {
        color: #1B2951 !important;
        -webkit-text-fill-color: #1B2951 !important;
        background: none !important;
        -webkit-background-clip: initial !important;
        background-clip: initial !important;
    }

    .price-display-enhanced,
    .price {
        color: #B8860B !important;
        -webkit-text-fill-color: #B8860B !important;
        background: none !important;
        -webkit-background-clip: initial !important;
        background-clip: initial !important;
    }
}

/* Force override for any gradient text that might cause issues */
.text-gradient.number-display-enhanced,
.text-gradient.price-display-enhanced {
    color: #1B2951 !important;
    background: none !important;
    -webkit-text-fill-color: #1B2951 !important;
    -webkit-background-clip: initial !important;
    background-clip: initial !important;
}

/* Ensure readability on all mobile devices */
@media screen and (max-width: 768px) {

    .number-display-enhanced,
    .phone-number {
        font-size: 1.05rem !important;
        line-height: 1.3 !important;
        font-weight: 900 !important;
        color: #1B2951 !important;
        text-rendering: optimizeLegibility !important;
    }

    .price-display-enhanced,
    .price {
        font-size: 1rem !important;
        line-height: 1.2 !important;
        font-weight: 900 !important;
        color: #B8860B !important;
        text-rendering: optimizeLegibility !important;
    }
}

/* High contrast mode support */
@media (prefers-contrast: high) {

    .number-display-enhanced,
    .phone-number,
    .price-display-enhanced,
    .price {
        color: #000000 !important;
        background: none !important;
        -webkit-text-fill-color: #000000 !important;
        -webkit-background-clip: initial !important;
        background-clip: initial !important;
        text-shadow: none !important;
        filter: none !important;
    }
}

/* Dark mode support */
@media (prefers-color-scheme: dark) {

    .number-display-enhanced,
    .phone-number {
        color: #FFFFFF !important;
        -webkit-text-fill-color: #FFFFFF !important;
    }

    .price-display-enhanced,
    .price {
        color: #FFD700 !important;
        -webkit-text-fill-color: #FFD700 !important;
    }
}