/* site.css — additions for the full-stack build. Loaded after styles.css;
   the original prototype stylesheet is untouched. */

.primary-nav a.active { color: var(--accent, #e03131); }

.page-hero { padding: 4.5rem 0 2.5rem; }
.page-hero h1 { font-size: clamp(2rem, 4vw, 3rem); margin: 0.35rem 0 0.6rem; }
.page-hero p { max-width: 46rem; }

.auth-wrap { max-width: 26rem; margin: 3rem auto 4rem; padding: 0 1rem; }
.auth-card { background: #131318; border: 1px solid #26262e; border-radius: 14px; padding: 2rem; color: #eee; }
.auth-card h1 { margin-top: 0; }
.auth-card label { display: block; margin-bottom: 1rem; }
.auth-card label span { display: block; font-size: 0.85rem; margin-bottom: 0.3rem; color: #aaa; }
.auth-card input, .auth-card select, .auth-card textarea {
  width: 100%; padding: 0.65rem 0.75rem; border-radius: 8px; border: 1px solid #33333d;
  background: #0d0d11; color: #fff; font: inherit;
}
.auth-card .form-error { background: #3a1214; border: 1px solid #7c2328; color: #ffb4b4; border-radius: 8px; padding: 0.6rem 0.8rem; margin-bottom: 1rem; }
.auth-alt { text-align: center; margin-top: 1rem; font-size: 0.9rem; }
.auth-alt a { color: var(--accent, #e03131); }

.form-success { background: #10281a; border: 1px solid #1f5c38; color: #a4e8c2; border-radius: 8px; padding: 0.6rem 0.8rem; margin-bottom: 1rem; }

/* Shop */
.shop-toolbar { display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: center; margin: 1.5rem 0 2rem; }
.shop-toolbar form { display: flex; gap: 0.5rem; flex: 1 1 16rem; }
.shop-toolbar input[type="search"] { flex: 1; padding: 0.55rem 0.75rem; border-radius: 8px; border: 1px solid #ccc; font: inherit; }
.category-pills { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.category-pills a { padding: 0.4rem 0.9rem; border-radius: 999px; border: 1px solid #bbb; text-decoration: none; color: inherit; font-size: 0.85rem; }
.category-pills a.active { background: #16161b; color: #fff; border-color: #16161b; }
.stock-note { font-size: 0.8rem; margin: 0.25rem 0 0.6rem; color: #666; }
.stock-note.low { color: #b3261e; font-weight: 600; }
.stock-note.out { color: #b3261e; font-weight: 700; }
.product-card .button[disabled] { opacity: 0.45; cursor: not-allowed; }

/* Checkout */
.checkout-wrap { max-width: 40rem; margin: 3rem auto 4rem; padding: 0 1rem; }
.checkout-lines { border: 1px solid #ddd; border-radius: 12px; overflow: hidden; margin: 1.25rem 0; }
.checkout-line { display: flex; justify-content: space-between; gap: 1rem; padding: 0.8rem 1rem; border-bottom: 1px solid #eee; }
.checkout-line:last-child { border-bottom: 0; }
.checkout-total { display: flex; justify-content: space-between; font-size: 1.15rem; font-weight: 700; padding: 0.8rem 0.2rem; }
.reserve-note { font-size: 0.85rem; color: #555; margin-bottom: 1.25rem; }

/* Events */
.event-detail-head { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem; align-items: flex-start; }
.event-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); gap: 1rem; margin: 1.5rem 0; }
.event-facts div { background: #f5f4f0; border-radius: 10px; padding: 0.9rem 1rem; }
.event-facts span { display: block; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.06em; color: #777; }
.event-facts strong { font-size: 1.05rem; }
.capacity-bar { height: 8px; border-radius: 4px; background: #e2e0da; overflow: hidden; margin-top: 0.4rem; }
.capacity-bar i { display: block; height: 100%; background: var(--accent, #e03131); }

.standings-table, .admin-table { width: 100%; border-collapse: collapse; margin: 1rem 0 2rem; font-size: 0.95rem; }
.standings-table th, .standings-table td, .admin-table th, .admin-table td { text-align: left; padding: 0.55rem 0.7rem; border-bottom: 1px solid #e4e2dc; }
.standings-table thead th, .admin-table thead th { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.05em; color: #888; }
.standings-table tr:first-child td { font-weight: 600; }

.round-block { margin-bottom: 1.75rem; }
.round-block h3 { margin-bottom: 0.5rem; }
.match-row { display: flex; align-items: center; gap: 0.75rem; padding: 0.6rem 0.8rem; border: 1px solid #e4e2dc; border-radius: 10px; margin-bottom: 0.5rem; flex-wrap: wrap; }
.match-row .vs { color: #999; font-size: 0.8rem; }
.match-row .winner { font-weight: 700; }
.match-row .table-label { margin-left: auto; font-size: 0.8rem; color: #777; }
.match-row .bye { color: #777; font-style: italic; }
.badge { display: inline-block; padding: 0.15rem 0.6rem; border-radius: 999px; font-size: 0.75rem; font-weight: 600; background: #ece9e2; }
.badge.running { background: #10281a; color: #a4e8c2; }
.badge.finished { background: #16161b; color: #fff; }
.badge.setup { background: #fdf1d6; color: #8a6d1a; }

.champion-banner { background: #16161b; color: #fff; border-radius: 12px; padding: 1.2rem 1.5rem; margin: 1.5rem 0; display: flex; gap: 0.9rem; align-items: center; }
.champion-banner strong { font-size: 1.2rem; }

/* Account */
.account-grid { display: grid; gap: 1.5rem; grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr)); margin: 2rem 0 3rem; }
.account-card { background: #fff; border: 1px solid #e4e2dc; border-radius: 14px; padding: 1.4rem 1.5rem; }
.account-card h2 { margin-top: 0; font-size: 1.1rem; }
.account-list-item { padding: 0.7rem 0; border-bottom: 1px solid #eee; display: flex; justify-content: space-between; gap: 0.75rem; flex-wrap: wrap; }
.account-list-item:last-child { border-bottom: 0; }
.account-list-item small { display: block; color: #777; }
.inline-form { display: inline; }
.link-button { background: none; border: none; color: var(--accent, #e03131); cursor: pointer; font: inherit; padding: 0; text-decoration: underline; }

/* Calendar */
.calendar-head { display: flex; justify-content: space-between; align-items: center; margin: 1.5rem 0 1rem; }
.calendar-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; margin-bottom: 3rem; }
.calendar-grid .dow { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.05em; color: #888; padding: 0.4rem; }
.calendar-cell { min-height: 5.2rem; background: #fff; border: 1px solid #e4e2dc; border-radius: 8px; padding: 0.35rem 0.45rem; font-size: 0.8rem; }
.calendar-cell.blank { background: transparent; border: none; }
.calendar-cell.today { border-color: var(--accent, #e03131); border-width: 2px; }
.calendar-cell .day-num { font-weight: 600; }
.cal-entry { display: block; margin-top: 0.25rem; padding: 0.15rem 0.35rem; border-radius: 5px; font-size: 0.7rem; line-height: 1.25; text-decoration: none; }
.cal-entry.event { background: #16161b; color: #fff; }
.cal-entry.booking { background: #ece9e2; color: #333; }

/* Booking page */
.availability-grid { border: 1px solid #e4e2dc; border-radius: 12px; padding: 1rem; margin: 1.25rem 0; }
.availability-grid table { width: 100%; border-collapse: collapse; font-size: 0.85rem; }
.availability-grid th, .availability-grid td { padding: 0.4rem 0.5rem; text-align: center; border-bottom: 1px solid #eee; }
.availability-grid th:first-child, .availability-grid td:first-child { text-align: left; }
.availability-grid .none-free { color: #b3261e; font-weight: 600; }
.availability-grid.loading { opacity: 0.5; }

/* Admin */
.admin-wrap { max-width: 68rem; margin: 2.5rem auto 4rem; padding: 0 1rem; }
.admin-nav { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 1rem 0 2rem; }
.admin-nav a { padding: 0.45rem 1rem; border-radius: 999px; border: 1px solid #bbb; text-decoration: none; color: inherit; font-size: 0.9rem; }
.admin-nav a.active { background: #16161b; color: #fff; border-color: #16161b; }
.stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr)); gap: 1rem; margin: 1.5rem 0 2rem; }
.stat-card { background: #fff; border: 1px solid #e4e2dc; border-radius: 12px; padding: 1rem 1.1rem; }
.stat-card strong { display: block; font-size: 1.7rem; }
.stat-card span { font-size: 0.8rem; color: #777; }
.stat-card.warn strong { color: #b3261e; }
.admin-form { max-width: 34rem; }
.admin-form label { display: block; margin-bottom: 1rem; }
.admin-form label span { display: block; font-size: 0.85rem; margin-bottom: 0.3rem; color: #555; }
.admin-form input, .admin-form select, .admin-form textarea {
  width: 100%; padding: 0.6rem 0.7rem; border-radius: 8px; border: 1px solid #ccc; font: inherit;
}
.admin-form textarea { min-height: 7rem; }
.admin-form .check-row { display: flex; gap: 0.5rem; align-items: center; }
.admin-form .check-row input { width: auto; }
.form-row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.result-form { display: flex; gap: 0.35rem; align-items: center; }
.result-form select { padding: 0.3rem 0.4rem; border-radius: 6px; font-size: 0.85rem; }
.result-form button { font-size: 0.8rem; padding: 0.3rem 0.7rem; }
.table-actions { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.legal-wrap { max-width: 46rem; margin: 3rem auto 4rem; padding: 0 1rem; }
.legal-wrap h2 { margin-top: 2rem; }

/* Twitch */
.twitch-block { margin: 2rem 0; }
.twitch-head { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; }
.twitch-frame { position: relative; width: 100%; max-width: 52rem; aspect-ratio: 16 / 9; background: #0d0d11; border-radius: 12px; overflow: hidden; margin-top: 0.75rem; }
.twitch-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.twitch-note { font-size: 0.85rem; color: #777; margin-top: 0.5rem; }

/* Roster */
.roster-list { columns: 2; max-width: 30rem; margin: 0.75rem 0 0.5rem; padding-left: 1.5rem; }
.roster-list li { padding: 0.15rem 0; break-inside: avoid; }
@media (max-width: 540px) { .roster-list { columns: 1; } }

/* Tournament entry forms */
.ticket-form label { display: block; margin-bottom: 0.8rem; text-align: left; }
.ticket-form label span { display: block; font-size: 0.8rem; color: #666; margin-bottom: 0.25rem; }
.ticket-form input[type="text"], .ticket-form input[name="faction"] { width: 100%; padding: 0.55rem 0.7rem; border-radius: 8px; border: 1px solid #ccc; font: inherit; }
.ticket-form input[type="file"] { font-size: 0.85rem; }
.entry-card { background: #f5f4f0; border: 1px solid #e4e2dc; border-radius: 12px; padding: 1.2rem 1.4rem; margin: 1.5rem 0; max-width: 34rem; }
.entry-card h2 { margin-top: 0; font-size: 1.1rem; }

/* Weekly schedule cards (home) */
.week-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); gap: 1rem; }
.week-card { background: #fff; border: 1px solid #e4e2dc; border-radius: 12px; padding: 1rem 1.1rem; }
.week-card strong { display: block; margin-bottom: 0.3rem; }
.week-card p { margin: 0 0 0.4rem; font-size: 0.9rem; }
.week-card small { color: #888; }
.week-card.muted { background: #f1efe9; color: #666; }

/* Schedule page */
.week-strip { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0 0 2rem; }
.week-pill { background: #fff; border: 1px solid #e4e2dc; border-radius: 999px; padding: 0.35rem 0.9rem; font-size: 0.8rem; }
.week-pill b { margin-right: 0.35rem; }
.week-pill.muted { color: #999; }
.schedule-grid .calendar-cell { min-height: 6.4rem; }
a.calendar-cell.open-day { text-decoration: none; color: inherit; display: block; transition: border-color .15s, transform .15s; }
a.calendar-cell.open-day:hover { border-color: var(--accent, #e03131); transform: translateY(-2px); }
.calendar-cell.closed-day { background: #efede7; color: #aaa; }
.day-theme { display: block; font-size: 0.65rem; color: #999; margin-top: 0.1rem; line-height: 1.2; }
.avail-line { display: block; margin-top: 0.3rem; font-size: 0.65rem; font-weight: 600; color: #2e6b45; line-height: 1.3; }

/* Booking */
.closed-note { color: #b3261e; font-size: 0.85rem; margin: 0.6rem 0 0; }
.booking-card textarea { width: 100%; padding: 0.6rem 0.7rem; border-radius: 8px; border: 1px solid #ccc; font: inherit; resize: vertical; }

/* Footer opening times */
.opening-row { display: block; font-size: 0.85rem; margin-bottom: 0.3rem; }
.opening-row b { display: inline-block; min-width: 5.2rem; }

/* Contact honeypot (hidden from humans) */
.hp-field { position: absolute !important; left: -9999px !important; }

/* FAQ */
.faq-item { border-bottom: 1px solid #e4e2dc; padding: 0.9rem 0; }
.faq-item h3 { margin: 0 0 0.4rem; font-size: 1.02rem; }
.faq-item p { margin: 0; }

.addon-row.disabled-option { opacity: 0.45; }