@import url("https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;500;600;700&display=swap");

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

@layer base {
    html {
        font-family: "Nunito", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
            "Segoe UI", sans-serif;
    }

    body {
        @apply min-h-screen bg-slate-50 font-sans text-slate-800 antialiased;
    }

    a {
        @apply text-indigo-600 transition hover:text-indigo-500;
    }

    hr {
        @apply border-slate-200;
    }
}

a#navbarDropdown:hover {
    color: black !important;
}

a#navbarDropdown {
    color: white !important;
}
a.nav-link {
    color: white !important;
}
@layer components {
    .container {
        @apply mx-auto w-full max-w-6xl px-4;
    }

    .row {
        @apply -mx-2 flex flex-wrap;
    }

    .col-2 {
        @apply w-1/6 px-2;
    }

    .col-3 {
        @apply w-1/4 px-2;
    }

    .col-4 {
        @apply w-1/3 px-2;
    }

    .col-6 {
        @apply w-1/2 px-2;
    }

    .col-9 {
        @apply w-3/4 px-2;
    }

    .col-10 {
        @apply w-5/6 px-2;
    }

    .col-12 {
        @apply w-full px-2;
    }

    .col-md-2 {
        @apply w-full px-2 md:w-1/6;
    }

    .col-md-3 {
        @apply w-full px-2 md:w-1/4;
    }

    .col-md-4 {
        @apply w-full px-2 md:w-1/3;
    }

    .col-md-6 {
        @apply w-full px-2 md:w-1/2;
    }

    .col-md-8 {
        @apply w-full px-2 md:w-2/3;
    }

    .col-md-9 {
        @apply w-full px-2 md:w-3/4;
    }

    .col-md-12 {
        @apply w-full px-2;
    }

    .offset-md-4 {
        margin-left: 33.333333%;
    }

    .col-form-label {
        @apply mb-1 block text-sm font-semibold text-slate-600;
    }

    .d-flex {
        @apply flex;
    }

    .d-none {
        @apply hidden;
    }

    .align-items-center {
        @apply items-center;
    }

    .justify-content-between {
        @apply justify-between;
    }

    .justify-content-center {
        @apply justify-center;
    }

    .text-muted {
        @apply text-slate-500;
    }

    .text-md-right {
        @apply text-right md:text-right;
    }

    .text-danger {
        @apply text-red-600;
    }

    .bg-primary {
        @apply bg-indigo-600 text-white;
    }

    .card {
        @apply rounded-3xl border border-slate-200 bg-white shadow;
    }

    .card-body {
        @apply space-y-4 p-6;
    }

    .card-header {
        @apply border-b border-slate-200 px-6 py-4 text-lg font-semibold text-slate-800;
    }

    .card-title {
        @apply text-lg font-semibold text-slate-800;
    }

    .card-text {
        @apply text-sm text-slate-600;
    }

    .btn {
        @apply inline-flex items-center justify-center rounded-lg border border-transparent px-4 py-2 text-sm font-semibold tracking-tight transition focus:outline-none focus:ring-2 focus:ring-offset-2;
    }

    .btn-primary {
        @apply bg-indigo-600 text-white hover:bg-indigo-500 focus:ring-indigo-500;
    }

    .btn-secondary {
        @apply border-slate-300 bg-white text-slate-700 hover:bg-slate-50 focus:ring-slate-400;
    }

    .btn-success {
        @apply bg-emerald-600 text-white hover:bg-emerald-500 focus:ring-emerald-500;
    }

    .btn-danger {
        @apply bg-red-600 text-white hover:bg-red-500 focus:ring-red-500;
    }

    .btn-warning {
        @apply bg-amber-500 text-white hover:bg-amber-400 focus:ring-amber-500;
    }

    .btn-dark {
        @apply bg-slate-800 text-white hover:bg-slate-700 focus:ring-slate-700;
    }

    .btn-link {
        @apply border-transparent bg-transparent px-0 text-indigo-600 underline hover:text-indigo-500 focus:ring-transparent;
    }

    .btn-sm {
        @apply px-3 py-1 text-xs;
    }

    .badge {
        @apply inline-flex items-center rounded-full px-3 py-0.5 text-xs font-semibold uppercase tracking-wide;
    }

    .badge-primary {
        @apply bg-indigo-50 text-indigo-700;
    }

    .alert {
        @apply mb-4 rounded-2xl border px-4 py-3 text-sm font-medium;
    }

    .alert-success {
        @apply border-emerald-200 bg-emerald-50 text-emerald-700;
    }

    .alert-danger {
        @apply border-red-200 bg-red-50 text-red-700;
    }

    .alert-info {
        @apply border-sky-200 bg-sky-50 text-sky-700;
    }

    .alert-dark {
        @apply border-slate-800 bg-slate-900 text-white;
    }

    .alert-secondary {
        @apply border-slate-200 bg-slate-100 text-slate-700;
    }

    .alert-primary {
        @apply border-indigo-200 bg-indigo-50 text-indigo-700;
    }

    .form-group {
        @apply mb-4;
    }

    .form-control {
        @apply block w-full rounded-xl border border-slate-300 bg-white px-3 py-2 text-sm text-slate-800 placeholder-slate-400 shadow-sm transition focus:border-indigo-500 focus:outline-none focus:ring-2 focus:ring-indigo-500;
    }

    .form-control-sm {
        @apply px-2 py-1 text-xs;
    }

    .form-check {
        @apply flex items-center gap-2;
    }

    .form-check-input {
        @apply h-4 w-4 rounded border-slate-300 text-indigo-600 focus:ring-indigo-500;
    }

    .form-check-label {
        @apply text-sm text-slate-700;
    }

    .input-group-text {
        @apply flex items-center gap-2 rounded-xl border border-slate-300 bg-slate-50 p-1;
    }

    .basic-addon2 {
        @apply rounded-l-none;
    }

    .invalid-feedback {
        @apply mt-2 text-sm text-red-600;
    }

    .is-invalid {
        @apply border-red-400 focus:border-red-500 focus:ring-red-500;
    }

    .list-group {
        @apply divide-y divide-slate-200 rounded-2xl border border-slate-200 bg-white;
    }

    .list-group-flush {
        @apply rounded-none border-0;
    }

    .list-group-item {
        @apply px-4 py-3 text-sm text-slate-700;
    }

    .list-unstyled {
        @apply list-none space-y-2;
    }

    .table {
        @apply w-full overflow-hidden rounded-2xl border border-slate-200 text-left text-sm;
    }

    .table thead th {
        @apply bg-slate-50 px-4 py-2 text-xs font-semibold uppercase tracking-wide text-slate-500;
    }

    .table tbody td {
        @apply border-t border-slate-100 px-4 py-2;
    }

    .table-striped tbody tr:nth-child(odd) {
        @apply bg-slate-50;
    }

    .thead-light th {
        @apply bg-slate-100 text-slate-600;
    }

    .navbar {
        @apply border-b border-slate-200 bg-white;
    }

    .navbar .container {
        @apply flex flex-wrap items-center justify-between gap-4;
    }

    .navbar-brand {
        @apply text-xl font-semibold text-slate-900;
    }

    .navbar-nav {
        @apply flex flex-col gap-2 md:flex-row md:items-center;
    }

    .nav-item {
        @apply relative;
    }

    .nav-link {
        @apply inline-flex items-center rounded-xl px-3 py-2 text-sm font-medium text-slate-600 transition hover:text-indigo-600 focus:outline-none focus:ring-2 focus:ring-indigo-500;
    }

    .navbar-light .nav-link {
        @apply text-slate-600;
    }

    .navbar-dark {
        @apply bg-slate-900 text-white;
    }

    .navbar-dark .nav-link {
        @apply text-slate-100 hover:text-white;
    }

    .navbar-dark .navbar-brand {
        @apply text-white;
    }

    .navbar-toggler {
        @apply inline-flex items-center justify-center rounded-xl border border-slate-300 p-2 text-slate-600 hover:bg-slate-100 focus:outline-none focus:ring-2 focus:ring-indigo-500 md:hidden;
    }

    .navbar-toggler-icon {
        @apply relative block h-0.5 w-6 bg-current;
    }

    .navbar-toggler-icon::before,
    .navbar-toggler-icon::after {
        content: "";
        @apply absolute left-0 h-0.5 w-6 bg-current;
    }

    .navbar-toggler-icon::before {
        @apply -top-2;
    }

    .navbar-toggler-icon::after {
        @apply top-2;
    }

    .navbar-collapse {
        @apply w-full;
    }

    .navbar-expand-md .navbar-collapse {
        @apply md:flex md:flex-1 md:items-center md:justify-between;
    }

    .navbar-expand-lg .navbar-collapse {
        @apply lg:flex lg:flex-1 lg:items-center lg:justify-between;
    }

    .collapse:not(.show) {
        @apply hidden;
    }

    .collapse.show {
        @apply block;
    }

    .dropdown {
        @apply relative;
    }

    .dropdown-menu {
        @apply absolute z-40 mt-2 hidden min-w-[12rem] rounded-2xl border border-slate-200 bg-white py-2 shadow-xl;
    }

    .dropdown-menu.show {
        @apply block;
    }

    .dropdown-menu-right {
        @apply right-0;
    }

    .dropdown-item {
        @apply block px-4 py-2 text-sm text-slate-600 hover:bg-slate-100;
    }

    .dropdown-toggle::after {
        content: "";
        @apply ml-2 inline-block h-2 w-2 rotate-45 border-b-2 border-r-2 border-current;
    }

    .caret {
        @apply ml-1 inline-block h-2 w-2 rotate-45 border-b-2 border-r-2 border-current;
    }

    .alert .close {
        @apply ml-2 inline-flex h-6 w-6 items-center justify-center rounded-full text-slate-500 hover:bg-slate-100;
    }

    .modal {
        @apply fixed inset-0 z-50 hidden items-center justify-center bg-black/50 px-4 py-8;
    }

    .modal.show {
        @apply flex;
    }

    .modal-dialog {
        @apply w-full max-w-2xl;
    }

    .modal-dialog-centered {
        @apply items-center;
    }

    .modal-content {
        @apply overflow-hidden rounded-3xl bg-white shadow-2xl;
    }

    .modal-header {
        @apply flex items-center justify-between border-b border-slate-200 px-6 py-4;
    }

    .modal-title {
        @apply text-lg font-semibold text-slate-800;
    }

    .modal-body {
        @apply p-6;
    }

    .modal-footer {
        @apply flex items-center justify-end gap-3 border-t border-slate-200 px-6 py-4;
    }

    .modal-backdrop {
        @apply fixed inset-0 z-40 hidden bg-black/50;
    }

    .modal-backdrop.show {
        @apply block;
    }

    .fade {
        @apply transition-opacity duration-200;
    }

    .fade:not(.show) {
        @apply opacity-0;
    }

    .float {
        @apply flex items-center;
    }

    .order_data {
        @apply grid gap-2 rounded-2xl border border-slate-200 bg-slate-50 p-4 text-sm;
    }

    .quantity {
        position: relative;
        @apply inline-flex items-stretch overflow-hidden rounded-lg border border-slate-200 bg-white;
    }

    .quantity input {
        @apply w-20 border-none px-3 text-center text-sm outline-none;
    }

    .quantity-nav {
        @apply flex flex-col;
    }

    .quantity-button {
        @apply cursor-pointer select-none border-l border-slate-200 px-3 py-1 text-xs text-slate-600 hover:bg-slate-50;
    }

    .quantity-button.quantity-up {
        @apply border-b border-slate-200;
    }

    .switch {
        position: relative;
        display: inline-block;
        width: 50px;
        height: 24px;
    }

    .switch input {
        opacity: 0;
        width: 0;
        height: 0;
    }

    .slider {
        position: absolute;
        cursor: pointer;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-color: rgb(203 213 225);
        transition: 0.3s;
    }

    .slider:before {
        position: absolute;
        content: "";
        height: 16px;
        width: 16px;
        left: 4px;
        bottom: 4px;
        background-color: white;
        transition: 0.3s;
    }

    input:checked + .slider {
        background-color: rgb(79 70 229);
    }

    input:checked + .slider:before {
        transform: translateX(26px);
    }

    .slider.round {
        border-radius: 9999px;
    }

    .slider.round:before {
        border-radius: 9999px;
    }

    .overlay {
        @apply fixed inset-0 z-40 hidden bg-black/40;
    }

    .overlay.show {
        @apply block;
    }

    .proceed_modal,
    .close_modal {
        @apply inline-flex items-center justify-center rounded-lg border border-transparent px-4 py-2 text-sm font-semibold;
    }

    .proceed_modal {
        @apply bg-indigo-600 text-white hover:bg-indigo-500;
    }

    .close_modal {
        @apply bg-slate-200 text-slate-800 hover:bg-slate-300;
    }
}