@theme {
    --color-primary: #312a57;
    --color-warning: #22c55e;
}

body {
    font-family: 'Oxygen', sans-serif;
}

.typewriter-text {
    display: inline-block;
    white-space: nowrap;
    overflow: hidden;
    border-right: 3px solid #22c55e;
    width: 0;
    animation: typing 4.5s steps(20, end) infinite alternate, blink-caret 0.75s step-end infinite;
}

@keyframes typing {
    from {
        width: 0;
    }

    to {
        width: 100%;
    }
}

@keyframes blink-caret {

    from,
    to {
        border-color: transparent;
    }

    50% {
        border-color: #22c55e;
    }
}

        .btn-primary {
            box-shadow: 0 4px 20px rgba(23, 255, 7, 0.22);
        }

        .btn-secondary {
            border: 1px solid rgba(255, 255, 255, .15);
            background: rgba(255, 255, 255, .05);
        }

        .slot-tile {
            @apply rounded-xl border border-white/10 px-2 py-3.5 text-center text-sm font-semibold text-gray-300 transition-all duration-150 cursor-pointer select-none;
            background: rgba(255, 255, 255, .04);
        }
        .slot-tile:hover {
            border-color: rgba(7, 255, 40, 0.35);
            background: rgba(255, 193, 7, .05);
            color: #fff;
        }
        .peer:checked ~ .slot-tile,
        .slot-tile.slot-active {
            border-color: #22c55e !important;
            background: rgba(7, 255, 19, 0.13) !important;
            color: #078c1f !important;
            box-shadow: 0 0 0 1px rgba(19, 255, 7, 0.3), 0 4px 12px rgba(255, 193, 7, .1);
        }
        .preset-btn {
            @apply rounded-full text-xs font-bold px-3.5 py-1.5 transition-all duration-200;
            background: rgba(255,255,255,.06);
            border: 1px solid rgba(255,255,255,.12);
            color: #d1d5db;
        }
        .preset-btn:hover {
            background: rgba(34,197,94,.12);
            border-color: rgba(34,197,94,.35);
            color: #22c55e;
        }
        .preset-clear {
            background: rgba(239,68,68,.08) !important;
            border-color: rgba(239,68,68,.2) !important;
            color: #fca5a5 !important;
        }
        .preset-clear:hover {
            background: rgba(239,68,68,.16) !important;
            border-color: rgba(239,68,68,.4) !important;
        }

        /* ── Calendar day styles ── */
        .cal-day {
            @apply flex items-center justify-center rounded-lg text-sm h-9 w-full select-none;
        }
        .cal-day-btn { cursor: pointer; transition: background .15s, color .15s; }
        .cal-day-normal { color: rgb(209 213 219); }
        .cal-day-normal:hover { background: rgba(34,197,94,.15); color: #22c55e; }
        .cal-day-today {
            color: #22c55e;
            font-weight: 700;
            border: 1px solid rgba(34,197,94,.5);
            background: rgba(34,197,94,.08);
        }
        .cal-day-today:hover { background: rgba(34,197,94,.22); }
        .cal-day-sel {
            background: #22c55e;
            color: #000;
            font-weight: 800;
            box-shadow: 0 0 0 2px rgba(34,197,94,.35), 0 4px 14px rgba(34,197,94,.25);
        }

        @keyframes stepIn {
            from {
                opacity: 0;
                transform: translateY(10px);
            }

            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        .pay-btn-primary {
            @apply inline-flex items-center rounded-full bg-green-600 text-white px-6 py-2.5 text-sm font-bold transition-all duration-200 hover:bg-green-500;
            box-shadow: 0 4px 20px rgba(255, 193, 7, .22);
        }
        .pay-btn-secondary {
            @apply inline-flex items-center rounded-full px-6 py-2.5 text-sm font-semibold text-white transition-all duration-200 hover:bg-white/10;
            border: 1px solid rgba(255, 255, 255, .15);
            background: rgba(255, 255, 255, .05);
        }
        .otp-box {
            caret-color: #22c55e;
        }
        .otp-box:focus {
            background: rgba(255, 193, 7, .06) !important;
        }
        .upi-app-btn {
            @apply flex flex-col items-center gap-1 px-4 py-2.5 rounded-xl transition-all duration-200 cursor-pointer;
            background: rgba(255, 255, 255, .05);
            border: 1px solid rgba(255, 255, 255, .12);
            color: #d1d5db;
        }
        .upi-app-btn:hover {
            background: rgba(255, 193, 7, .1);
            border-color: rgba(255, 193, 7, .35);
            color: #22c55e;
        }
        .success-check {
            animation: checkPop .5s cubic-bezier(.175,.885,.32,1.275) .2s both;
        }
        @keyframes checkPop {
            from { transform: scale(0); opacity: 0; }
            to   { transform: scale(1); opacity: 1; }
        }
        @keyframes stepIn {
            from { opacity: 0; transform: translateY(10px); }
            to   { opacity: 1; transform: translateY(0); }
        }