@font-face {
  font-family: "yekan";
  font-style: normal;
  font-weight: 400;
    src: url("../../assets-preview/font/yekan/yekan-400.woff2") format("woff2");
}

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

@layer base {
    :root {
        --background-app: 255, 255, 255;
        --secondary: 151, 151, 151;
        --tertiary: 22, 22, 32;
        --forth: 240, 240, 240;
        --fifth: 248, 248, 249;
        --sixth: 76, 75, 92;
        --blue: 6, 143, 255;
        --nav: 45, 53, 85;
        --success: 70, 158, 109;

        --color-primary-400: 76, 75, 92;
        --color-primary-300: 113, 114, 129;
        --color-primary-200: 139, 138, 153;
        --color-primary-100: 191, 191, 202;
        --color-secondary-300: 237, 237, 237;
        --color-secondary-200: 224, 223, 213;
        --color-secondary-100: 247, 249, 251;
        --color-secondary-50: 249, 249, 250;
        --color-success: 70, 158, 109;
        --color-warning: 255, 153, 0;
        --color-error: 255, 71, 87;
        --color-blue: 6, 143, 255;
        --gradient-blue: linear-gradient(148.78deg, #8cc9fa 18.87%, #259cfc 91.65%);
    }
}

@layer components {
    .nav {
        @apply w-full md:w-fit py-2 px-[14px] text-nav whitespace-nowrap rounded-lg hover:bg-tertiary/5 hover:font-semibold cursor-pointer;
    }
    .tab {
        @apply relative flex items-center gap-2 p-5 min-w-fit whitespace-nowrap hover:font-bold border border-fifth hover:border-black/5 hover:bg-background rounded-xl cursor-pointer;
    }
    .tab-border {
        @apply absolute bottom-0 left-1/2 transform -translate-x-1/2 hidden group-hover:block transition-colors duration-300;
    }
    .tab-active {
        @apply font-bold border-black/5 bg-background;
    }
    .divider {
        @apply w-12 h-px bg-black/5 rotate-90;
    }
    .card--shadow {
        @apply rounded-xl shadow-2xl shadow-blue;
    }
    .country {
        @apply relative flex flex-col items-center px-5 py-4 gap-3 rounded-xl border border-background hover:border hover:border-black/5 cursor-pointer;
    }
    .country-border {
        @apply absolute top-0 left-1/2 transform -translate-x-1/2 hidden group-hover:block transition-colors duration-300;
    }
    .country-active {
        @apply border-black/5;
    }
    .duration {
        @apply px-4 py-3 rounded-lg text-center border border-gray-300 text-sixth peer-checked:bg-blue peer-checked:text-white hover:bg-blue/50 transition-colors whitespace-nowrap h-12;
    }
    .config {
        @apply flex-1 flex flex-col items-center bg-fifth rounded-lg text-sixth text-sm font-semibold gap-2 p-1 pt-3 whitespace-nowrap;
    }
    .config-badge {
        @apply rounded-lg bg-background py-3 px-2 w-full text-center;
    }
    .badge-primary {
        @apply text-success bg-success/10 rounded-full py-1 px-2;
    }
    .badge-danger {
        @apply text-danger bg-danger/10 rounded-full py-1 px-2;
    }
    .btn-primary {
        @apply rounded-xl w-full text-background text-lg font-semibold px-6 py-5 bg-[linear-gradient(148.78deg,_#8CC9FA_18.87%,_#259CFC_91.65%)] hover:bg-[linear-gradient(248.78deg,_#8CC9FA_18.87%,_#259CFC_91.65%)];
    }
    .btn-secondary {
        @apply rounded-xl w-full text-nav border border-black/10 text-lg font-semibold px-6 py-5 bg-background hover:border-blue/5 hover:bg-[linear-gradient(248.78deg,_#8CC9FA_18.87%,_#259CFC_91.65%)] hover:text-background;
    }
}

html,
body {
    margin: 0;
    padding: 0;
    font-family: yekan;
    min-height: 100vh;
    width: 100%;
    overflow-x: hidden;
    background-color: rgb(var(--background-app));
}

.card-transform {
    transform: perspective(1000px) rotateX(0deg) rotateY(0deg);
    transition: transform 0.3s ease-out;
}
.card-transform:hover {
    transform: perspective(1000px) rotateX(10deg) rotateY(10deg);
}

.hide-scroll {
    overflow: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.hide-scroll::-webkit-scroll {
    display: none;
}