style.css

/* Custom styles for credit card input formatting */
#card-number {
    letter-spacing: 1px;
}

#expiry-date {
    letter-spacing: 1px;
}

#card-number::placeholder,
#expiry-date::placeholder,
#cvc::placeholder {
    letter-spacing: normal;
    color: #9CA3AF;
}

/* Animation for focus state */
input:focus {
    animation: pulse-ring 1.5s cubic-bezier(0.215, 0.61, 0.355, 1) infinite;
}

@keyframes pulse-ring {
    0% {
        box-shadow: 0 0 0 0 rgba(59, 130, 246, 0.5);
    }
    80% {
        box-shadow: 0 0 0 6px rgba(59, 130, 246, 0);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(59, 130, 246, 0);
    }
}

/* Custom checkbox for terms */
.custom-checkbox {
    display: inline-block;
    width: 18px;
    height: 18px;
    border: 2px solid #3B82F6;
    border-radius: 4px;
    position: relative;
    top: 3px;
    margin-right: 8px;
}

.custom-checkbox.checked::after {
    content: "✓";
    position: absolute;
    top: -2px;
    left: 2px;
    color: #3B82F6;
    font-size: 14px;
}