/* The look of filament.app.registration-plans (resources/views/filament/app/registration-plans.blade.php). */

.reg-plans { display: flex; flex-direction: column; align-items: center; gap: 1.75rem; }
.reg-toggle { display: inline-flex; gap: 0.25rem; padding: 0.25rem; border-radius: 999px; background: var(--ambex-tint); border: 1px solid var(--ambex-rule); }
.reg-toggle a { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.5rem 1.125rem; border-radius: 999px; font-size: 0.875rem; font-weight: 600; color: var(--ambex-text); text-decoration: none; transition: background-color 0.2s ease, color 0.2s ease; }
.reg-toggle a:hover { color: var(--ambex-navy); }
.reg-toggle a.is-active { background: var(--ambex-navy); color: #fff; box-shadow: 0 6px 16px -8px rgba(0, 0, 0, 0.55); }
.reg-toggle-save { padding: 0.125rem 0.5rem; border-radius: 999px; font-size: 0.75rem; background: rgba(31, 117, 222, 0.12); color: var(--ambex-blue); }
.reg-toggle a.is-active .reg-toggle-save { background: rgba(90, 165, 255, 0.25); color: #cfe4ff; }
.reg-grid { display: grid; gap: 1rem; width: 100%; grid-template-columns: repeat(auto-fit, minmax(min(100%, 14.5rem), 1fr)); }
.reg-card { display: flex; flex-direction: column; gap: 1rem; padding: 1.5rem; border-radius: 18px; background: #fff; border: 1px solid var(--ambex-rule); box-shadow: 0 1px 2px rgba(7, 26, 51, 0.04); transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease; }
.reg-card:hover { transform: translateY(-3px); border-color: var(--ambex-blue); box-shadow: 0 1px 2px rgba(7, 26, 51, 0.05), 0 14px 34px -10px rgba(7, 40, 80, 0.16); }
.reg-card h3 { font: 600 1.25rem/1.2 var(--ambex-head); letter-spacing: -0.02em; color: var(--ambex-navy); }
.reg-price { display: flex; flex-direction: column; gap: 0.25rem; }
.reg-price strong { font: 700 2.25rem/1 var(--ambex-head); letter-spacing: -0.03em; color: var(--ambex-navy); }
.reg-price span { font-size: 0.8125rem; color: var(--ambex-dim); }
.reg-price em { font-style: normal; font-size: 0.8125rem; color: var(--ambex-blue); font-weight: 600; }
.reg-limits { flex: 1; display: flex; flex-direction: column; gap: 0.5rem; padding-top: 1rem; border-top: 1px solid var(--ambex-rule); font-size: 0.875rem; color: var(--ambex-text); }
.reg-limits li { display: flex; gap: 0.5rem; }
.reg-limits svg { width: 1.125rem; height: 1.125rem; flex-shrink: 0; margin-top: 0.0625rem; color: var(--ambex-blue); }
.reg-limits strong { color: var(--ambex-navy); font-weight: 700; }
.reg-cta { width: 100%; }

.dark .reg-toggle { background: rgba(7, 26, 51, 0.6); border-color: rgba(90, 165, 255, 0.25); }
.dark .reg-toggle a { color: #9fb3cc; }
.dark .reg-toggle a:hover { color: #fff; }
.dark .reg-toggle a.is-active { background: var(--ambex-blue); color: #fff; }
.dark .reg-card { background: rgba(7, 26, 51, 0.55); border-color: rgba(90, 165, 255, 0.22); }
.dark .reg-card:hover { border-color: var(--ambex-sky); }
.dark .reg-card h3, .dark .reg-price strong, .dark .reg-limits strong { color: #fff; }
.dark .reg-price span { color: #9fb3cc; }
.dark .reg-price em, .dark .reg-limits svg { color: var(--ambex-sky); }
.dark .reg-limits { color: #cdd9e8; border-top-color: rgba(90, 165, 255, 0.2); }

@media (prefers-reduced-motion: reduce) {
    .reg-card, .reg-card:hover { transition: none; transform: none; }
}