/* Explain: Styles for buttons with hover effects and basic element resets. */
* {
    box-sizing: border-box;
}

html {
    background: var(--background-color);
    scroll-behavior: smooth;
}

body {
    overflow-x: hidden;
}

[x-cloak] {
    display: none !important;
}

.wizard-btn {
    @apply w-full text-left px-4 py-4 border-2 border-[var(--border-color)] rounded-xl font-medium text-[var(--text-color)] cursor-pointer;
    transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.25s ease, border-color 0.2s ease, background-color 0.2s ease;
}

.wizard-btn:hover {
    border-color: var(--primary-color);
    background-color: #eff6ff;
    transform: translateY(-4px) scale(1.02);
    box-shadow: 0 10px 25px -5px rgba(30, 58, 138, 0.15), 0 8px 10px -6px rgba(30, 58, 138, 0.08);
}

.wizard-btn:active {
    transform: translateY(-1px) scale(0.99);
}

.wizard-btn .shrink-0 {
    transition: transform 0.25s ease, background-color 0.25s ease;
}

.wizard-btn:hover .shrink-0 {
    transform: scale(1.1);
    background-color: #dbeafe;
}