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

@import url('https://fonts.googleapis.com/css2?family=Baloo+Tamma+2:wght@400;500;600;700;800&family=DM+Sans:wght@400;500;700&display=swap');

:root {
    --primary: #2162D2;
    --bg: #1A1A22;
    --box: #272A35;
    --error: #FF3939;
    --success: #73AE5F;
    --modal: #21212C;
    --secondary: #1A1A22;
    --warning: #EB9938;
    --lightbox: #3C4052;
    --red: #FF968E;
    --primary-opacity: #1B2B4D;
}

html {
    scroll-behavior: smooth;
    scroll-padding: 140px;
}

input[type="checkbox"] {
    accent-color: #2162D2;
}

input[type="checkbox"] {
    accent-color: #2162D2;
    background-color: transparent !important;
    border: 1px solid #3C4052;
    border-radius: 3px;
    width: 20px;
    height: 20px;
    min-width: 20px;
    min-height: 20px;
}

input[type="checkbox"]:checked {
    background-image: url(../images/box.png) !important;
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    background-color: transparent !important;
    border: 1px solid #2162D2;
}

input[type="radio"] {
    accent-color: #2162D2;
    background-color: transparent !important;
    border: 1px solid #3C4052;
    border-radius: 50%;
    width: 20px;
    height: 20px;
    min-width: 20px;
    min-height: 20px;
}

input[type="radio"]:checked {
    background-image: url(../images/circle.png) !important;
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    background-color: transparent !important;
    border: 1px solid #2162D2;

}


body {
    background-color: var(--bg);
}

* {
    font-family: 'DM Sans', sans-serif;
    color: #fff;
}

.shadow {
    box-shadow: 0 0 10px #00000010 !important;
}

input.custom {
    background: var(--box);
    padding: 10px 15px;
    width: 100%;
    border-radius: 16px;
    font-size: 14px;
}

textarea.custom {
    background: var(--box);
    padding: 10px 15px;
    width: 100%;
    border-radius: 16px;
    font-size: 14px;
}

.owl-favorites .owl-stage-outer,
.owl-categories .owl-stage-outer,
.owl-histories .owl-stage-outer {
    overflow: visible !important;
}

header {
    transition: all 200ms ease-in-out;
}

header.scroll {
    background-color: var(--modal);
}

.restaurant {
    visibility: hidden;
    transition: all 200ms ease-in-out;
    transform: translateY(100%);
}

.restaurant.active {
    visibility: visible !important;
    transform: translateY(0%);
}

.primary-font {
    font-family: 'Baloo Tamma 2', cursive;
}

.container {
    max-width: 1250px !important;
}

.menu.active .products {
    max-height: 1000px !important;
    opacity: 100 !important;
}

.menu.active .menu-item {
    background-color: #ffffff20;
}

.menu.active .check {
    max-height: 100px !important;
    opacity: 100 !important;
}

.btn-primary {
    font-weight: bold;
    color: white;
    min-height: 50px;
    border-radius: 20px;
    background: rgb(0, 86, 184);
    background: linear-gradient(0deg, rgba(0, 86, 184, 1) 53%, rgba(0, 71, 152, 1) 100%) !important;
}

.text-secondary {
    color: #5f5f5f;
}

.text-primary {
    color: var(--primary) !important;
}

.border-primary {
    border-color: var(--primary) !important;
}

.bg-primary {
    background-color: var(--primary) !important;
}

input:checked+label div {
    opacity: 100%;
    color: white;
    border-color: var(--primary);
}

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

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.owl-nav {
    position: absolute;
    top: 50%;
    width: 100%;
    margin: 0 !important;
}

button.owl-prev,
button.owl-next {
    position: absolute;
    background: #fff !important;
    width: 50px;
    height: 50px;
    display: flex !important;
    border-radius: 50% !important;
    color: #000 !important;
    font-size: 20px !important;
    align-items: center;
    justify-content: center;
    align-content: center;
    transition: all 200ms ease-in-out;
    --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
    --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
    border: 1px solid rgb(229 229 229) !important;
}

button.owl-prev:hover,
button.owl-next:hover {
    background: #fff !important;
}

button.owl-prev {
    left: 0px;
    top: 0;
    transform: translateY(-50%) !important;

}

button.owl-next {
    right: 0px;
    top: 0;
    transform: translateY(-50%) !important;
}

.owl-dots {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: 0;
}

.owl-theme .owl-dots .owl-dot span {
    width: 10px;
    height: 10px;
    background: #ffffff30;
    border-radius: 20px;
    transition: all 300ms ease-in-out !important;
}

.owl-theme .owl-dots .owl-dot.active span {
    width: 20px;
    height: 10px;
    background: var(--primary) !important;
}

input:checked.switch+label .btn {
    background: var(--saved) !important;
}

input:checked.switch+label .btn-circle {
    transform: translateX(100%);
}

input:checked.switch+label .check {
    opacity: 1 !important;
}

input:checked.switch+label .xmark {
    opacity: 0 !important;
}

.doneAnimation {
    animation: doneAnimation .5s ease-in-out;
}

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

    100% {
        transform: scale(1)
    }
}