/* Levels page styles — scoped, minimal, responsive. Avoid duplicating base.css. */

.levels-hero { position: relative; overflow: hidden; background: linear-gradient(180deg, rgba(15,45,80,0.25), rgba(15,45,80,0)); }
.levels-hero__media img { width: 100%; height: auto; display: block; object-fit: cover; }
.levels-hero__content { max-width: 1100px; margin: 0 auto; padding: 1.5rem; text-align: center; }
.levels-hero__cta { margin-top: 1rem; display: flex; gap: .75rem; justify-content: center; flex-wrap: wrap; }

.section-inner { max-width: 1100px; margin: 0 auto; padding: 2rem 1.25rem; }

/* Chips grid for quick selection */
.levels-select__controls { display: grid; grid-template-columns: 1fr; gap: .75rem; margin-top: 1rem; }
#level-search { width: 100%; padding: .75rem 1rem; border: 1px solid var(--border-color, #d6dbe1); border-radius: .5rem; }
.levels-select__filters { display: flex; gap: .5rem; flex-wrap: wrap; }
.filter-btn { padding: .5rem .75rem; border: 1px solid var(--border-color, #d6dbe1); border-radius: 999px; background: var(--surface, #fff); cursor: pointer; }
.filter-btn.is-active, .filter-btn[aria-pressed="true"] { background: var(--primary-50, #e6f0ff); border-color: var(--primary-300, #6ea8fe); color: var(--primary-800, #0b3d91); }

.levels-select__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: .5rem; margin-top: 1rem; list-style: none; padding: 0; }
.level-chip .chip { display: inline-block; width: 100%; text-align: center; padding: .65rem .75rem; border-radius: .75rem; border: 1px solid var(--border-color, #d6dbe1); background: var(--surface, #fff); text-decoration: none; color: inherit; transition: transform .12s ease, box-shadow .12s ease; }
.level-chip .chip:hover, .level-chip .chip:focus { transform: translateY(-1px); box-shadow: 0 2px 10px rgba(0,0,0,.08); outline: none; }

/* Accordion */
.accordion-item { border-top: 1px solid var(--border-color, #e5e8ec); }
.accordion-item:last-child { border-bottom: 1px solid var(--border-color, #e5e8ec); }
.accordion-toggle { display: block; width: 100%; text-align: left; padding: 1rem 0; font-size: 1.05rem; background: none; border: none; cursor: pointer; }
.accordion-body { padding: 0 0 1rem 0; color: var(--text-muted, #4d5661); }

/* Difficulty badges */
.badge { display: inline-block; padding: .25rem .5rem; border-radius: .5rem; font-size: .85rem; border: 1px solid transparent; }
.badge-easy { background: #e8f8ec; color: #1f7a3a; border-color: #b8e6c6; }
.badge-medium { background: #fff4e5; color: #8a5300; border-color: #ffd7a6; }
.badge-hard { background: #ffebee; color: #a3001a; border-color: #ffcdd2; }
.badge-bonus { background: #e9f0ff; color: #0b3d91; border-color: #c8dcff; }
.difficulty-legend { display: flex; gap: .5rem; flex-wrap: wrap; margin: .5rem 0 1rem; }

/* Feature/tips/rewards lists */
.feature-list, .tips-list, .rewards-list { display: grid; gap: .5rem; padding-left: 1rem; }

/* Bonus section */
.levels-bonus__wrap { display: grid; grid-template-columns: 1fr; gap: 1rem; align-items: center; }
.levels-bonus__media img { width: 100%; height: auto; border-radius: .5rem; }
@media (min-width: 900px) { .levels-bonus__wrap { grid-template-columns: 1.2fr 1fr; } }

/* Progression */
.progression-steps { counter-reset: step; list-style: none; padding: 0; display: grid; gap: .5rem; }
.progression-steps li { position: relative; padding-left: 2.25rem; }
.progression-steps li::before { counter-increment: step; content: counter(step); position: absolute; left: 0; top: 0; width: 1.6rem; height: 1.6rem; border-radius: 999px; background: var(--primary-600, #2b6cb0); color: #fff; display: grid; place-items: center; font-size: .9rem; }

/* Checklist */
.checklist-grid { display: grid; grid-template-columns: 1fr; gap: 1rem; }
.checklist-col { background: var(--surface, #fff); border: 1px solid var(--border-color, #e5e8ec); border-radius: .5rem; padding: 1rem; }
.checklist-list { display: grid; gap: .25rem; list-style: none; padding: 0; }
.checklist-actions { display: flex; gap: .75rem; flex-wrap: wrap; margin-top: 1rem; }

/* Feedback form */
.form-grid { display: grid; grid-template-columns: 1fr; gap: 1rem; }
.form-field { display: grid; gap: .35rem; }
.form-field--full { grid-column: 1 / -1; }
.form-field input[type="text"], .form-field input[type="email"], .form-field select, .form-field textarea { width: 100%; padding: .6rem .75rem; border: 1px solid var(--border-color, #d6dbe1); border-radius: .5rem; }
.form-consent { font-size: .9rem; color: var(--text-muted, #4d5661); }
.form-actions { display: flex; align-items: center; gap: .75rem; margin-top: .5rem; }
.form-status { margin: 0; color: var(--text-muted, #4d5661); }
.stars { display: flex; gap: .5rem; }

/* Bottom CTA nav */
.levels-bottom-cta .section-inner { display: flex; flex-wrap: wrap; gap: .75rem; justify-content: center; padding-top: 0; padding-bottom: 2.5rem; }

/* Utility */
.visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

/* Media queries */
@media (min-width: 680px) {
  .levels-select__controls { grid-template-columns: 1fr auto; align-items: center; }
  .form-grid { grid-template-columns: 1fr 1fr; }
}