/* Shared timing + easing */
:root {
    --ease-soft: cubic-bezier(0.22, 1, 0.36, 1);
    --dur-fast: 0.16s;
    --dur-main: 0.22s;
    --dur-slow: 0.32s;
}

.modal-backdrop {
    opacity: 0 !important;
}
.modal-backdrop.show {
    opacity: 0.5 !important;
}

/* Button entrance animation (smooth but fast) */
@keyframes optionCardAppear {
    0% {
        opacity: 0;
        transform: translateY(4px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Icon entrance animation */
@keyframes checkoutIconFade {
    0% {
        opacity: 0;
        transform: translateY(3px) scale(0.94);
    }
    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* Base card (button container) */
.options-card {
    opacity: 0;
    animation: optionCardAppear var(--dur-main) var(--ease-soft) forwards;
    transition:
        border-color var(--dur-main) var(--ease-soft),
        background-color var(--dur-main) var(--ease-soft),
        box-shadow var(--dur-main) var(--ease-soft);
    will-change: border-color, background-color, box-shadow;
}

/* Base icon */
.checkout-icon {
    color: #9ca3af;
    opacity: 0;
    animation: checkoutIconFade var(--dur-main) var(--ease-soft) forwards;
    transition:
        color var(--dur-main) ease-out,
        transform var(--dur-main) var(--ease-soft),
        filter var(--dur-main) ease-out;
    will-change: transform, filter;
}

/* Hover: button stays still, icon animates */
.options-card:hover {
    border-color: #2a63d4;
    background-color: rgba(42, 99, 212, 0.06);
    box-shadow: 0 2px 8px rgba(42, 99, 212, 0.08);
}

.options-card:hover .checkout-icon {
    color: #2a63d4;
    transform: scale(1.06);
    filter: drop-shadow(0 2px 4px rgba(42, 99, 212, 0.15));
}

/* Selected state */
.btn-check:checked + .options-card {
    border-color: #2a63d4;
    background-color: rgba(42, 99, 212, 0.1);
    box-shadow: 0 3px 10px rgba(42, 99, 212, 0.12);
}

.btn-check:checked + .options-card .checkout-icon {
    color: #2a63d4;
    transform: scale(1.12);
    filter: drop-shadow(0 3px 6px rgba(42, 99, 212, 0.22));
    transition:
        color var(--dur-main) ease,
        transform var(--dur-slow) var(--ease-soft),
        filter var(--dur-slow) ease;
}