/* Reusable component styles */

.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

.section-title { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; }
.section-title .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--gold-300); box-shadow: 0 0 0 4px rgba(199,168,119,0.15); }

.badge { display: inline-flex; align-items: center; gap: 8px; padding: 6px 10px; border-radius: 999px; background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.08); color: var(--silver-300); font-weight: 600; font-size: 12px; letter-spacing: .2px; }

.pill { padding: 2px 8px; border-radius: 999px; background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.08); }

.glass-card { padding: 18px; border-radius: var(--radius-xl); background: var(--glass-bg); backdrop-filter: blur(18px); border: 1px solid var(--glass-border); box-shadow: var(--shadow-1); }

.list-check { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.list-check li { display: grid; grid-template-columns: 22px 1fr; gap: 8px; align-items: flex-start; }
.list-check img { width: 18px; height: 18px; margin-top: 2px; }

.silver-glow { box-shadow: 0 0 0 1px rgba(255,255,255,0.12), 0 10px 30px rgba(207,211,212,0.25); }
.silver-glow:hover { box-shadow: 0 0 0 1px rgba(255,255,255,0.18), 0 14px 38px rgba(207,211,212,0.35); }

.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }

@media (max-width: 768px) {
  .grid-2 { grid-template-columns: 1fr; }
}