@tailwind base;
@tailwind components;
@tailwind utilities;
.view {
    padding-left: 1rem; /* px-4 */
    padding-right: 1rem;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
}

/* sm breakpoint (640px) */
@media (min-width: 640px) {
    .view {
        padding-left: 3rem; /* px-12 */
        padding-right: 3rem;
    }
}

/* md breakpoint (768px) */
@media (min-width: 768px) {
    .view {
        padding-left: 4rem; /* px-16 */
        padding-right: 4rem;
    }
}

/* lg breakpoint (1024px) */
@media (min-width: 1024px) {
    .view {
        padding-left: 5rem; /* px-20 */
        padding-right: 5rem;
    }
}

/* xl breakpoint (1280px) */
@media (min-width: 1280px) {
    .view {
        padding-left: 5rem;
        padding-right: 5rem;
    }
}

/* 2xl breakpoint (1536px) */
@media (min-width: 1536px) {
    .view {
        padding-left: 5rem;
        padding-right: 5rem;
    }
}
@keyframes waveMove {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-50%);
    }
}

.animate-wave {
    animation: waveMove 6s linear infinite;
}
.btn-new::before {
    background: #fff;
    content: "";
    height: 155px;
    opacity: 0;
    position: absolute;
    top: -50px;
    transform: rotate(35deg);
    width: 30px;
    left: -50%;
    transition: all 3000ms cubic-bezier(0.19, 1, 0.22, 1);
}

.btn-new:hover::before {
    left: 120%;
    opacity: 0.5;
}

@keyframes customPulse {
    0%,
    100% {
        transform: scale(1);
        opacity: 1;
    }
    50% {
        transform: scale(1.5);
        opacity: 0;
    }
}

@keyframes ring {
    0% {
        transform: rotate(-15deg);
    }
    2% {
        transform: rotate(15deg);
    }
    4%,
    12% {
        transform: rotate(-18deg);
    }
    6%,
    14% {
        transform: rotate(18deg);
    }
    8% {
        transform: rotate(-22deg);
    }
    10% {
        transform: rotate(22deg);
    }
    16% {
        transform: rotate(-12deg);
    }
    18% {
        transform: rotate(12deg);
    }
    20%,
    100% {
        transform: rotate(0);
    }
}

.animate-custom-pulse {
    animation: customPulse 2s infinite;
}

.animate-ring {
    animation: ring 2s infinite;
    transform-origin: center;
}

#toast.success {
    background-color: #16a34a; /* green */
}
 
#toast.error {
background-color: #dc2626; /* red */
}

.btn-loading {
pointer-events: none;
opacity: 0.7;
}

.btn-spinner {
width: 18px;
height: 18px;
border: 2px solid #fff;
border-top-color: transparent;
border-radius: 50%;
animation: spin 0.8s linear infinite;
display: inline-block;
vertical-align: middle;
}

@keyframes spin {
to { transform: rotate(360deg); }
}
.logoSwiper .swiper-wrapper {
  transition-timing-function: linear !important;
}
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
outline: none;
box-shadow: none;
}