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

@import url('https://fonts.googleapis.com/css2?family=Ubuntu:wght@400;500;700&display=swap');

body {
    @apply grid bg-msf-magnolia font-msf-font-family text-msf-font-size font-msf-font-regular md:place-content-center;
}

main {
    @apply grid gap-5 md:mt-[100px] md:gap-28 md:rounded-md md:bg-msf-white md:pb-3 md:pl-3 md:pr-20 md:pt-3 md:shadow-md;

    height: 100vh;
    grid-template:
		'sidebar' 0.1fr
		'form' 1fr
		/ 1fr;

    @media screen and (min-width: 920px) {
        height: auto;
        grid-template:
			'sidebar form' 1fr
			/ 274px minmax(440px, 1fr);
    }
}

h1 {
    @apply mb-2 text-2xl font-msf-font-bold text-msf-marine-blue md:text-3xl;
}

label {
    @apply text-sm text-msf-marine-blue;
}

.text-input {
    @apply mb-2 mt-0 w-full rounded-md border border-msf-cool-gray p-2 bg-white text-msf-marine-blue;
    @apply focus:outline-none focus:ring-2 focus:ring-msf-light-blue focus:border-msf-light-blue appearance-none;
    height: auto;
    padding: 2px 3px;
}

.text-input:focus {
    @apply outline-none;
}

.form-step {
    @apply self-end rounded-md md:relative md:max-w-[440px] md:self-auto md:bg-msf-white md:pt-8;
    grid-area: form;
}

.form-content {
    @apply relative bottom-24 m-3 rounded-lg bg-msf-white p-5 shadow-md md:static md:m-0 md:max-w-[440px] md:rounded-none md:p-0 md:shadow-none;
}

.tarife-listesi {
    max-height: 400px;
    overflow-y: auto;
    padding-bottom: 30px;
}

.info-section {
    max-height: 400px;
    overflow-y: auto;
    padding-bottom: 30px;
}
.form-button-wrapper {
    @apply flex w-full bg-msf-white p-5 md:absolute md:bottom-5 md:p-0;
}

.form-button {
    @apply cursor-pointer rounded-md pb-3 pl-5 pr-5 pt-3 font-msf-font-medium;
}

.btn-back {
    @apply form-button text-msf-cool-gray hover:text-msf-marine-blue;
}

.btn-next {
    @apply form-button bg-msf-marine-blue text-msf-white hover:bg-msf-marine-blue/80;
}

.btn-confirm {
    @apply form-button bg-msf-purplish-blue text-msf-white hover:bg-msf-purplish-blue/80;
}

ol {
    @apply flex h-[172px] w-full items-start justify-center gap-5 bg-sidebar-mobile bg-cover bg-no-repeat p-8 md:h-[568px] md:w-[274px] md:flex-col md:justify-start md:bg-sidebar-desktop md:bg-contain;
    grid-area: sidebar;
}

.list-item-number {
    @apply flex h-10 w-10 items-center justify-center rounded-full border border-msf-white font-msf-font-bold text-msf-white;
}

.list-item-number.active {
    @apply border-msf-light-blue bg-msf-light-blue text-msf-marine-blue;
}

.radio-button {
    @apply flex cursor-pointer items-center gap-3 rounded-md border border-msf-cool-gray p-3 hover:border-msf-purplish-blue md:w-1/3 md:flex-col md:items-start md:gap-5 md:pr-10;
}

.radio-button.active {
    @apply border-msf-purplish-blue bg-msf-magnolia text-msf-marine-blue font-bold shadow-md;
}

.select2-container {
    @apply w-full;
    margin: 0 !important;
    padding: 0 !important;
}

.select2-container .select2-selection--single {
    @apply mb-2 mt-0 w-full rounded-md border border-msf-cool-gray p-2 bg-white text-msf-marine-blue;
    @apply focus:outline-none focus:ring-2 focus:ring-msf-light-blue focus:border-msf-light-blue appearance-none;
    height: auto;
    margin: 0 !important;
    padding: 2px 3px !important;
}

.select2-container .select2-selection--single .select2-selection__rendered {
    @apply text-msf-marine-blue truncate;
    padding-left: 0.5rem !important;
    padding-right: 0.5rem !important;
}

.select2-dropdown {
    @apply bg-white border border-msf-cool-gray mt-0 rounded-md shadow-lg;
    margin-top: 1px !important;
}

.select2-results__option {
    @apply cursor-pointer px-3 py-2 text-msf-marine-blue hover:bg-msf-magnolia;
}

.select2-results__option[aria-selected="true"] {
    @apply bg-msf-light-blue text-msf-marine-blue;
}

.select2-search--dropdown .select2-search__field {
    @apply w-full rounded-md border border-msf-cool-gray p-2 text-msf-marine-blue font-msf-font-medium focus:outline-none focus:ring-2 focus:ring-msf-light-blue;
}

@media screen and (max-width: 767px) {
    .select2-container .select2-selection--single {
        @apply text-sm;
    }
    .select2-container .select2-selection--single .select2-selection__rendered {
        @apply text-sm;
        padding-left: 0.3rem !important;
        padding-right: 0.3rem !important;
    }
    .select2-dropdown {
        @apply text-sm;
    }
    .select2-results__option {
        @apply text-sm;
    }
}

@media screen and (max-width: 480px) {
    main {
        @apply p-2;
    }

    h1 {
        @apply text-xl;
    }

    .form-button {
        @apply pb-2 pl-3 pr-3 pt-2;
    }
}

.loader {
    border-top-color: #02295A;
    animation: spin 1s infinite linear;
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

@layer utilities {
    .checkbox-wrapper {
        @apply mb-3 flex items-center justify-between gap-5 rounded-lg border border-msf-light-gray pb-3 pl-5 pr-5 pt-3;
    }

    .checkbox-wrapper.active {
        @apply border-msf-marine-blue bg-msf-magnolia;
    }
}