/* ═══════════════════════════════════════════
   FlexPay — Custom Styles
   Tailwind utility classes handle the rest.
   ═══════════════════════════════════════════ */

/* ── Glass card ── */
.glass-panel {
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
}

/* ── Hero gradient background ── */
.gradient-bg {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

/* ── Card lift on hover ── */
.card-hover {
    transition: all 0.3s ease;
}
.card-hover:hover {
    transform: translateY(-4px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
}

/* ── Onboarding step indicator (active state) ── */
.step-active {
    background: linear-gradient(135deg, #0ea5e9 0%, #0284c7 100%);
    color: white;
}

/* ── Membership tier gradients ── */
.tier-bronze   { background: linear-gradient(135deg, #cd7f32 0%, #8b4513 100%); }
.tier-silver   { background: linear-gradient(135deg, #c0c0c0 0%, #808080 100%); }
.tier-gold     { background: linear-gradient(135deg, #ffd700 0%, #daa520 100%); }
.tier-platinum { background: linear-gradient(135deg, #e5e4e2 0%, #a0a0a0 100%); }

/* ── Form focus ring (overrides browser default) ── */
input:focus,
select:focus,
textarea:focus {
    outline: none;
    border-color: #0ea5e9;
}

/* ── SVG progress ring animation ── */
.progress-ring__circle {
    transition: stroke-dashoffset 0.35s;
    transform: rotate(-90deg);
    transform-origin: 50% 50%;
}

/* ── Scrollbar hide utility ── */
.hide-scrollbar::-webkit-scrollbar {
    display: none;
}
.hide-scrollbar {
    -ms-overflow-style: none;
    scrollbar-width: none;
}