/*
 * Mobile Flag Size Force Override
 * Purpose: Increase flag icon size on mobile devices with maximum specificity
 * Created: Force flag to be larger and more visible on mobile screens
 */

/* =================================================================
   MOBILE FLAG SIZE INCREASE - ULTRA HIGH SPECIFICITY
   ================================================================= */

/* Mobile Small Screens (<575px) - Increase flag by 40% */
@media (max-width: 575px) {
    /* Flag Icon Image - Mobile Small */
    .language-flag-selector .flag-link .flag-icon,
    .phone-flag-col .language-flag-selector .flag-link .flag-icon,
    div.phone-flag-col div.language-flag-selector a.flag-link img.flag-icon {
        width: 35px !important;
        height: 35px !important;
        min-width: 35px !important;
        min-height: 35px !important;
        max-width: 35px !important;
        max-height: 35px !important;
        object-fit: contain !important;
        display: inline-block !important;
    }

    /* Flag Link Container */
    .language-flag-selector .flag-link,
    .phone-flag-col .language-flag-selector .flag-link,
    div.phone-flag-col div.language-flag-selector a.flag-link {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        padding: 4px !important;
        min-width: 43px !important;
        min-height: 43px !important;
    }

    /* Language Flag Selector Container */
    .language-flag-selector,
    .phone-flag-col .language-flag-selector,
    div.phone-flag-col div.language-flag-selector {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
    }
}

/* Mobile Medium Screens (576px - 767px) - Increase flag by 35% */
@media (min-width: 576px) and (max-width: 767px) {
    /* Flag Icon Image - Mobile Medium */
    .language-flag-selector .flag-link .flag-icon,
    .phone-flag-col .language-flag-selector .flag-link .flag-icon,
    div.phone-flag-col div.language-flag-selector a.flag-link img.flag-icon {
        width: 34px !important;
        height: 34px !important;
        min-width: 34px !important;
        min-height: 34px !important;
        max-width: 34px !important;
        max-height: 34px !important;
        object-fit: contain !important;
        display: inline-block !important;
    }

    /* Flag Link Container */
    .language-flag-selector .flag-link,
    .phone-flag-col .language-flag-selector .flag-link,
    div.phone-flag-col div.language-flag-selector a.flag-link {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        padding: 4px !important;
        min-width: 42px !important;
        min-height: 42px !important;
    }

    /* Language Flag Selector Container */
    .language-flag-selector,
    .phone-flag-col .language-flag-selector,
    div.phone-flag-col div.language-flag-selector {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
    }
}

/* =================================================================
   ADDITIONAL MOBILE OPTIMIZATIONS
   ================================================================= */

/* Ensure smooth transitions on mobile */
@media (max-width: 767px) {
    .language-flag-selector .flag-link .flag-icon {
        transition: transform 0.2s ease !important;
    }

    .language-flag-selector .flag-link:hover .flag-icon {
        transform: scale(1.05) !important;
    }

    .language-flag-selector .flag-link:active .flag-icon {
        transform: scale(0.95) !important;
    }

    /* Ensure flag doesn't get squished */
    .language-flag-selector .flag-link img {
        flex-shrink: 0 !important;
    }
}

/* =================================================================
   TABLET AND DESKTOP - MAINTAIN NORMAL SIZE
   ================================================================= */

/* Tablets (768px+) - UPDATED: Changed from 28px to 64px as requested */
@media (min-width: 768px) and (max-width: 991px) {
    .language-flag-selector .flag-link .flag-icon {
        width: 64px !important;  /* Changed from 28px to 64px */
        height: 64px !important; /* Changed from 28px to 64px */
        object-fit: contain !important;
        display: inline-block !important;
        border: none !important; /* NO BORDER */
        border-radius: 0px !important; /* NO BORDER RADIUS */
    }

    .language-flag-selector .flag-link {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        padding: 3px !important;
        border: none !important; /* NO BORDER */
    }
}

/* Desktop (992px+) - Let desktop-flag-search-positioning-force.css handle it */
/* Removing conflicting desktop rules to allow larger flag size */

/* =================================================================
   ACCESSIBILITY & QUALITY
   ================================================================= */

/* Ensure high quality rendering on all devices */
@media (max-width: 767px) {
    .language-flag-selector .flag-link .flag-icon {
        image-rendering: -webkit-optimize-contrast !important;
        image-rendering: crisp-edges !important;
        -ms-interpolation-mode: nearest-neighbor !important;
    }
}

/* Touch target size for better mobile UX */
@media (max-width: 767px) {
    .language-flag-selector .flag-link {
        min-width: 44px !important;
        min-height: 44px !important;
        -webkit-tap-highlight-color: rgba(16, 185, 129, 0.1) !important;
        cursor: pointer !important;
    }
}

/* =================================================================
   Z-INDEX & VISIBILITY
   ================================================================= */

/* Ensure flag is always visible and clickable */
@media (max-width: 767px) {
    .language-flag-selector {
        z-index: 10 !important;
        position: relative !important;
    }

    .language-flag-selector .flag-link {
        position: relative !important;
        z-index: 11 !important;
        pointer-events: auto !important;
    }

    .language-flag-selector .flag-link .flag-icon {
        pointer-events: none !important;
        user-select: none !important;
        -webkit-user-select: none !important;
        -moz-user-select: none !important;
        -ms-user-select: none !important;
    }
}