/* Language-specific fonts */
body[lang="bn"] *:not(select):not(option):not(i):not(.fa):not(.far):not(.fas) {
    font-family: 'Hind Siliguri', sans-serif !important;
}

body[lang="ar"] *:not(select):not(option):not(i):not(.fa):not(.far):not(.fas){
   font-family: 'Almarai', serif !important;
}
body[lang="ur"] *:not(select):not(option):not(i):not(.fa):not(.far):not(.fas) {
    font-family: 'noto-nastaleeq', serif !important;
 }
 
 @font-face {
    font-family: 'noto-nastaleeq';
    src: url('https://cdn.jsdelivr.net/gh/tariq-abdullah/urdu-web-font-CDN/NotoNastaliqUrduDraft.woff') format('woff');
    font-display: swap;
 }

/* Mobile optimizations */
@media (max-width: 768px) {
   body[lang="ur"] *:not(select):not(option):not(i):not(.fa):not(.far):not(.fas),
   body[lang="ar"] *:not(select):not(option):not(i):not(.fa):not(.far):not(.fas) {
       font-family: 'Almarai', serif !important;
       
       
   }
}

/* Override for controls and menu items */
button, select, option,
nav.hidden.md\:flex a,
#mobile-menu a,
body[lang="ur"] nav a,
body[lang="ar"] nav a,
body[lang="ur"] #mobile-menu a,
body[lang="ar"] #mobile-menu a,
body[lang="ur"] input[type="number"],
body[lang="ar"] input[type="number"] {
   font-family: 'Montserrat', sans-serif !important;
   direction: ltr;
   text-align: left;
} 
 @font-face {
    font-family: 'noto-nastaleeq';
    src: url('https://cdn.jsdelivr.net/gh/tariq-abdullah/urdu-web-font-CDN/NotoNastaliqUrduDraft.woff') format('woff');
    font-display: swap;
 }

/* Default to Montserrat for other languages and dropdowns */
body:not([lang="bn"]):not([lang="ur"]):not([lang="ar"]) *:not(i):not(.fa):not(.far):not(.fas),
select,
option {
    font-family: 'Montserrat', sans-serif !important;
}

button,
.vipps-mobilepay-button {
    direction: ltr !important;
    text-align: center !important;
}

/* Your existing styles... */
.rtl {
    direction: rtl;
    text-align: right;
}

@keyframes gradientFlow {
    0% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0% 50%;
    }
}

.animate-gradient {
    background-size: 200% 200%;
    animation: gradientFlow 3s ease infinite;
}

.price-pulse {
    animation: pulsate 2s ease-in-out infinite;
}

@keyframes pulsate {
    0% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.02);
    }

    100% {
        transform: scale(1);
    }
}

.rtl {
    direction: rtl;
    text-align: right;
}

@keyframes gradientFlow {
    0% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0% 50%;
    }
}

.animate-gradient {
    background-size: 200% 200%;
    animation: gradientFlow 3s ease infinite;
}

.price-pulse {
    animation: pulsate 2s ease-in-out infinite;
}


/* Fix dropdown alignment */
.dropdown-fix {
    text-align-last: center;
    direction: ltr;
}


@keyframes pulsate {
    0% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.02);
    }

    100% {
        transform: scale(1);
    }
}



/* Button hover animation */
.animate-button {
    transition: transform 0.2s ease-in-out, box-shadow 0.3s;
}

.animate-button:hover {
    transform: translateY(-3px);
    box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.15);
}

/* iOS PWA specific styles */
:root {
    --sat: env(safe-area-inset-top);
    --sar: env(safe-area-inset-right);
    --sab: env(safe-area-inset-bottom);
    --sal: env(safe-area-inset-left);
}

/* Only apply safe area insets in iOS standalone mode */
@supports (-webkit-touch-callout: none) {
    @media all and (display-mode: standalone) {
        body {
            padding: var(--sat) var(--sar) var(--sab) var(--sal);
            -webkit-touch-callout: none;
            -webkit-user-select: none;
            -webkit-tap-highlight-color: transparent;
        }
    }
}

/* Fix for notched devices - only in standalone mode */
@media all and (display-mode: standalone) {
    .fixed-header {
        padding-top: max(var(--sat), 20px);
        padding-left: max(var(--sal), 16px);
        padding-right: max(var(--sar), 16px);
    }
}

/* iOS-specific button styling */
@supports (-webkit-touch-callout: none) {
    button, 
    .button {
        -webkit-touch-callout: none;
        min-height: 44px;
        min-width: 44px;
    }
}

/* Prevent rubber-band scrolling on iOS - only in standalone mode */
@supports (-webkit-touch-callout: none) {
    @media all and (display-mode: standalone) {
        html {
            overflow: hidden;
            height: 100%;
        }
        
        body {
            overflow-y: auto;
            -webkit-overflow-scrolling: touch;
            height: 100%;
        }
    }
}

/* Regular desktop and non-iOS styles */
@media screen and (min-width: 1024px) {
    body {
        padding: 0 !important; /* Override any iOS padding on desktop */
    }
    
    html {
        overflow: auto !important;
        height: auto !important;
    }
}

/* Base body styles */
body {
    transition: padding-top 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    padding-top: 80px; /* Keep your existing top padding */
}

/* Force enable number input spinners with maximum specificity */
html body input[type="number"].zakat-input {
    -webkit-appearance: textfield !important;
    -moz-appearance: textfield !important;
    appearance: textfield !important;
    padding-right: 20px !important;
}

html body input[type="number"].zakat-input::-webkit-inner-spin-button,
html body input[type="number"].zakat-input::-webkit-outer-spin-button {
    -webkit-appearance: inner-spin-button !important;
    appearance: inner-spin-button !important;
    opacity: 1 !important;
    height: 100% !important;
    position: absolute !important;
    right: 0 !important;
    top: 0 !important;
    cursor: pointer !important;
    display: block !important;
    background: transparent !important;
}

/* Firefox specific */
@-moz-document url-prefix() {
    html body input[type="number"].zakat-input {
        -moz-appearance: spinner-textfield !important;
    }
}

/* Enable native spinners */
input[type="number"] {
    -webkit-appearance: auto !important;
    -moz-appearance: textfield !important;
    appearance: auto !important;
}

/* Show spinners in Webkit browsers (Chrome, Safari, Edge) */
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
    -webkit-appearance: auto !important;
    appearance: auto !important;
    opacity: 1 !important;
    margin: 0 !important;
}

/* Ensure padding for the spinner */
.spinner-input {
    padding-right: 20px !important;
    width: 100% !important;
}