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

@layer base {
    @font-face {
        font-family: 'Montserrat';
        font-style: normal;
        font-weight: 500;
        src: url('/fonts/Montserrat-Medium.ttf') format('.ttf');
    }
    @font-face {
        font-family: 'Montserrat-bold';
        font-style: normal;
        font-weight: 600;
        src: url('/fonts/Montserrat-SemiBold.ttf') format('.ttf');
    }
}
.big-div {
    @apply bg-sc-main-font pt-[46px] pr-[8px] pb-[24px] pl-[8px] max-w-screen-Android h-[800px] rounded-[36px] font-Montserrat;
}
/*.semi-div {*/
/*    @apply  h-[668px] w-[344px];*/
/*}*/
.form-input{
    @apply bg-sc-form-back text-sc-gray-text rounded-[12px] h-[40.06px] pl-[15px];
}
.form-span {
    @apply text-sc-gray-text mb-[8px] ml-[8px] h-[15.02px];
}
.form-div {
    @apply flex flex-col mt-[16px] ml-[8px] mr-[8px] h-[63px] size-[15.02];
}
/*.button {*/
/*    @apply ;*/
/*}*/
.checkbox {
    @apply flex flex-row min-h-0 w-full mt-[5px];
}
.exist {
    @apply flex justify-center mt-[16px];
}

.form_radio_btn {
    @apply w-[154px] h-[40px] rounded-[12px] border-sc-border bg-white border-[1px]; /* Make it inline-block and full-width */
}

.form_radio_btn input[type=radio] {
    @apply hidden; /* Hide the radio input */
}

.form_radio_btn label {
    @apply inline-flex items-center justify-center text-center text-sc-gray-text cursor-pointer px-4 py-2 leading-9 select-none w-full h-10; /* Make label full-width, set height to 40px, center text, and add 1px border */
}

/* Checked state */
.form_radio_btn input[type=radio]:checked + label {
    @apply bg-sc-check text-white rounded-[12px] border-sc-check; /* Apply custom check background color and text color */
}

/* Hover state */
.form_radio_btn label:hover {
    @apply bg-sc-check text-white rounded-[12px]; /* Apply same styles as checked state on hover */
}

/* Disabled state */
.form_radio_btn input[type=radio]:disabled + label {
    @apply bg-white text-sc-gray-text cursor-not-allowed; /* Customize background and text color for disabled state */
}

.search {
    @apply inline-flex border-[1px] border-black rounded-[30px] p-[10px];
}

.search-icon {
    @apply w-[20px] h-[20px] mr-[10px] -ml-[10px]; /* This adjusts margin-left to achieve similar effect */
}

.search-field {
    @apply w-[300px] border-0;
}

.search-field:focus + .search-icon {
    /* styles for the icon when field is focused */
}
.error {
    @apply text-[15px];
}