@tailwind base;
@tailwind components;
@tailwind utilities;

@font-face {
    font-family: "vazirmatn";
    src: url("../public/fonts/Vazir.woff") format('woff');
}

@font-face {
    font-family: "vaziren";
    src: url("../public/fonts/VazirEn.woff") format('woff');
}


@layer base {
    * {
        font-family: 'vazirmatn', 'vaziren';
        direction: rtl;
    }

    input[type=number]::-webkit-outer-spin-button,
    input[type=number]::-webkit-inner-spin-button {
        -webkit-appearance: none;
        margin: 0;
    }

    input[type=number] {
        -moz-appearance: textfield;
    }

    button {
        @apply text-base font-medium flex w-full justify-center bg-primary-color max-w-[442px] max-h-[55px] rounded-[20px] p-[18px] text-white
    }

    table {
        @apply w-full border-collapse
    }

    #otp {
        direction: ltr;
    }
}

@layer components {
    .auth-image-desktop {
        @apply size-[550px] max-w-[550px]
    }

    .input-style {
        @apply w-full bg-white rounded-[60px] p-[18px] max-w-[442px] shadow-sm focus:outline-none
    }

    .auth-logo-size {
        @apply w-full max-w-[198px] h-auto
    }

    .otp-inputs {
        @apply !w-full max-w-[40px] min-h-[40px] sm:max-w-[50px] sm:min-h-[50px] lg:max-w-[72px] lg:min-h-[72px] rounded-full ml-2
    }

    .otp-container {
        @apply min-w-max
    }

    .bank-bg {
        @apply bg-contain bg-center bg-no-repeat
    }
}