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

/* .custom-gradient-text {
    background: linear-gradient(to right, #790909 0%, #ff0009 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
} */

.plan {
    cursor: pointer !important;
}

/* Custom CSS, adjust according to needs */
/* Customizing panel */
.filepond--panel-root {
    @apply bg-white dark:bg-zinc-900 text-slate-800 dark:text-slate-300;
}

/* Customizing file items */
.filepond--file {
    @apply bg-white dark:bg-zinc-900 text-slate-800 dark:text-slate-300;
}

.filepond--drop-label {
    @apply text-slate-800 dark:text-slate-300;
}

.filepond--credits {
    @apply hidden;
}

html,
body {
    margin: 0 !important;
    padding: 0 !important;
}

.swatchGrid {
    display: grid;
    grid-template-columns: repeat(7, 28px);
    grid-template-rows: repeat(5, 28px);
    grid-gap: 6px;
    margin-bottom: 1em;
}

.swatch {
    border-radius: 4px;
    cursor: pointer;
}

.clickable {
    cursor: pointer;
}

/* CSS Code */
.swiper-wrapper {
    width: 100%;
    height: max-content !important;
    /* padding-bottom: 44px !important; */
    -webkit-transition-timing-function: linear !important;
    transition-timing-function: linear !important;
    position: relative;
}

.swiper-pagination-bullet {
    width: 18px;
    height: 18px;
    background: gray !important;
    margin: 0 8px !important;
}

.qr-code svg {
    width: 85%;
    height: auto;
    border-radius: 10px;
}

.floating-animation {
    animation: float 8s ease-in-out infinite;
}

@keyframes float {

    0%,
    100% {
        transform: translate(0, 0);
    }

    50% {
        transform: translate(0, 15px);
    }
}

.tab-btn {
    @apply py-2 px-4 text-gray-500;
}

.tab-btn.active {
    @apply text-blue-500 border-b-4 border-blue-500;
}

.tab-content {
    @apply hidden;
}

.tab-content.active {
    @apply block;
}