:root{
	--brand: #e2231a;
	--brand-dark: #8a120c;
	--accent: #f6b40e;
	--dark: #1a120e;
	--ink: #201613;
}
body{ font-family:'Inter',system-ui,-apple-system,sans-serif; color:var(--ink); background:#faf8f6; }
h1,h2,h3,h4,.font-display{ font-family:'Poppins',system-ui,sans-serif; }
a{ text-decoration:none; }

/* Navbar */
.site-navbar{ background:#fff; box-shadow:0 2px 16px rgba(26,18,14,.07); padding:.6rem 0; }
.site-navbar .navbar-brand{ display:flex; align-items:center; gap:.6rem; font-family:'Poppins',sans-serif; font-weight:800; color:var(--dark); font-size:1.2rem; letter-spacing:-.01em; }
.site-navbar .navbar-brand img{ height:44px; width:44px; }
.site-navbar .navbar-brand .brand-live{ color:var(--brand); }
.site-navbar .nav-link{ font-weight:600; color:#4a3f3a; padding:.5rem .9rem !important; border-radius:.5rem; transition:.15s; }
.site-navbar .nav-link:hover{ color:var(--brand); background:#fdf1ef; }
.brand-badge{ font-size:1.4rem; }
.btn-cta{ background:linear-gradient(135deg,var(--brand),#b71a10); color:#fff; font-weight:700; border-radius:2rem; padding:.55rem 1.4rem; box-shadow:0 6px 16px rgba(226,35,26,.3); border:0; }
.btn-cta:hover{ color:#fff; filter:brightness(1.08); box-shadow:0 8px 20px rgba(226,35,26,.4); }
.btn-gold{ background:linear-gradient(135deg,var(--accent),#e0a30a); color:var(--dark); font-weight:700; border-radius:2rem; border:0; }
.btn-gold:hover{ color:var(--dark); filter:brightness(1.05); }

/* Hero */
.hero{
	background:radial-gradient(circle at top right, #b71a10, var(--dark) 72%);
	color:#fff; padding:5rem 0 6.5rem; position:relative; overflow:hidden;
}
.hero::after{ content:'🏏'; position:absolute; font-size:15rem; opacity:.08; right:-2rem; top:-2rem; transform:rotate(15deg); }
.hero::before{ content:''; position:absolute; inset:0; background:radial-gradient(circle at 15% 90%, rgba(246,180,14,.18), transparent 45%); }
.hero .container{ position:relative; z-index:1; }
.hero .eyebrow{ display:inline-flex; align-items:center; gap:.4rem; background:rgba(246,180,14,.15); border:1px solid rgba(246,180,14,.4); color:var(--accent); font-weight:700; font-size:.75rem; text-transform:uppercase; letter-spacing:.08em; padding:.35rem .9rem; border-radius:2rem; margin-bottom:1rem; }
.hero h1{ font-weight:800; font-size:2.75rem; }
.hero h1 .text-accent{ color:var(--accent); }
.hero p.lead{ color:rgba(255,255,255,.85); max-width:560px; }
.hero-stats{ display:flex; gap:2rem; margin-top:2.25rem; flex-wrap:wrap; }
.hero-stats .stat-num{ font-size:1.9rem; font-weight:800; font-family:'Poppins',sans-serif; color:var(--accent); }
.hero-stats .stat-label{ font-size:.8rem; color:rgba(255,255,255,.7); text-transform:uppercase; letter-spacing:.04em; }

/* Section titles */
.section-title{ font-weight:800; margin-bottom:.4rem; }
.section-sub{ color:#786e69; margin-bottom:2rem; }

/* Tournament card */
.t-card{ border:0; border-radius:1.1rem; overflow:hidden; box-shadow:0 4px 18px rgba(26,18,14,.08); transition:transform .18s ease, box-shadow .18s ease; height:100%; }
.t-card:hover{ transform:translateY(-5px); box-shadow:0 14px 30px rgba(26,18,14,.16); }
.t-card .t-banner{ height:150px; background-size:cover; background-position:center; background-color:#f3e2df; position:relative; }
.t-card .t-banner::after{ content:''; position:absolute; inset:0; background:linear-gradient(180deg, rgba(0,0,0,0) 55%, rgba(0,0,0,.35)); }
.t-card .t-banner .badges-row{ position:absolute; top:.6rem; left:.6rem; right:.6rem; display:flex; gap:.35rem; flex-wrap:wrap; z-index:1; }
.t-card .card-body{ padding:1.15rem 1.3rem; }
.t-card .t-name{ font-family:'Poppins',sans-serif; font-weight:700; font-size:1.08rem; margin-bottom:.35rem; }
.t-card .t-meta{ font-size:.82rem; color:#786e69; }
.t-card .t-meta i{ width:16px; color:var(--brand); }
.t-card .fee-tag{ font-weight:800; color:var(--brand); }

/* Filters */
.filter-bar{ background:#fff; border-radius:1.1rem; padding:1rem 1.25rem; box-shadow:0 6px 24px rgba(26,18,14,.08); margin-top:-3rem; position:relative; z-index:2; }
.filter-chip{ border:1px solid #ece3e0; background:#fff; border-radius:2rem; padding:.4rem 1.1rem; font-size:.85rem; font-weight:600; color:#4a3f3a; transition:.15s; }
.filter-chip:hover{ border-color:var(--brand); color:var(--brand); }
.filter-chip.active{ background:var(--brand); border-color:var(--brand); color:#fff; }

/* Empty state */
.empty-state{ text-align:center; padding:4rem 1rem; color:#786e69; }
.empty-state i{ font-size:3rem; color:#e8ddda; }

/* Detail page - modern hero + stat strip + tabbed content layout */
.t-hero{
	background-size:cover; background-position:center; background-color:var(--dark); position:relative;
	padding:6rem 0 3.5rem; margin-bottom:-2.75rem;
}
.t-hero-overlay{ position:absolute; inset:0; background:linear-gradient(180deg, rgba(26,18,14,.35) 0%, rgba(26,18,14,.55) 55%, var(--dark) 100%); }
.t-hero-breadcrumb{ position:relative; z-index:1; font-size:.8rem; color:rgba(255,255,255,.65); margin-bottom:1.25rem; }
.t-hero-breadcrumb a{ color:rgba(255,255,255,.75); }
.t-hero-breadcrumb a:hover{ color:#fff; }
.t-hero-breadcrumb i{ font-size:.65rem; margin:0 .3rem; }
.t-hero .position-relative{ z-index:1; }
.t-detail-logo{ width:84px; height:84px; border-radius:50%; border:4px solid #fff; background:#fff; object-fit:cover; box-shadow:0 6px 18px rgba(0,0,0,.25); flex-shrink:0; }

.t-stat-strip{
	position:relative; z-index:2; background:#fff; border-radius:1.1rem; box-shadow:0 14px 36px rgba(26,18,14,.14);
	padding:1.25rem; display:flex; flex-wrap:wrap; gap:1.25rem; margin-bottom:2rem;
}
.t-stat{ display:flex; align-items:center; gap:.7rem; flex:1 1 200px; }
.t-stat i{ width:42px; height:42px; border-radius:.7rem; background:#fdf1ef; color:var(--brand); display:flex; align-items:center; justify-content:center; font-size:1.1rem; flex-shrink:0; }
.t-stat .label{ font-size:.72rem; text-transform:uppercase; letter-spacing:.04em; color:#a89e9a; font-weight:700; }
.t-stat .value{ font-weight:700; font-size:.9rem; }

.t-content-tabs{ display:flex; gap:.4rem; border-bottom:2px solid #f1ece9; }
.t-content-tabs .nav-link{ border:0; border-bottom:2px solid transparent; margin-bottom:-2px; padding:.6rem 1rem; font-weight:600; color:#9a8f8a; border-radius:0; }
.t-content-tabs .nav-link:hover{ color:var(--brand); }
.t-content-tabs .nav-link.active{ color:var(--brand); border-bottom-color:var(--brand); }
.t-prose{ color:#4a3f3a; line-height:1.75; }

.t-sidebar-banner img{ aspect-ratio:210/297; object-fit:cover; }
.t-sidebar-sticky{ position:sticky; top:5.5rem; }
.t-cta-card{ border:0; border-radius:1.1rem; box-shadow:0 14px 34px rgba(26,18,14,.12); }
.t-cta-fee{ font-size:2.1rem; font-weight:800; font-family:'Poppins',sans-serif; color:var(--ink); }
.t-trust-row{ display:flex; justify-content:center; gap:.9rem; margin-top:1rem; flex-wrap:wrap; }
.t-trust-row span{ font-size:.72rem; color:#9a8f8a; display:flex; align-items:center; gap:.3rem; }

.t-organizer-card{ border:0; border-radius:1.1rem; box-shadow:0 14px 34px rgba(26,18,14,.1); overflow:hidden; transition:box-shadow .25s ease, transform .25s ease; }
.t-organizer-card:hover{ box-shadow:0 18px 42px rgba(26,18,14,.16); transform:translateY(-2px); }
.t-organizer-head{ background:linear-gradient(135deg, rgba(226,35,26,.08), rgba(246,180,14,.12)); padding:1.5rem 1.25rem 1.25rem; text-align:center; }
.t-organizer-avatar-wrap{ position:relative; width:84px; margin:0 auto .75rem; }
.t-organizer-avatar{ width:84px; height:84px; border-radius:50%; padding:3px; background:linear-gradient(135deg,var(--brand),var(--accent)); box-shadow:0 6px 16px rgba(226,35,26,.25); }
.t-organizer-avatar img{ width:100%; height:100%; border-radius:50%; object-fit:cover; border:3px solid #fff; display:block; }
.t-organizer-avatar-fallback{ width:100%; height:100%; border-radius:50%; background:#fff; color:var(--brand); display:flex; align-items:center; justify-content:center; font-size:1.6rem; font-weight:800; font-family:'Poppins',sans-serif; border:3px solid #fff; }
.t-organizer-badge{ position:absolute; bottom:2px; right:0; width:24px; height:24px; border-radius:50%; background:var(--brand); color:#fff; display:flex; align-items:center; justify-content:center; font-size:.8rem; border:2px solid #fff; box-shadow:0 2px 6px rgba(0,0,0,.15); }
.t-organizer-name{ font-family:'Poppins',sans-serif; font-weight:700; color:var(--dark); font-size:1.02rem; }
.t-organizer-role{ font-size:.75rem; color:#9a8f8a; margin-top:.15rem; }
.t-organizer-body{ padding:1rem 1.25rem 1.25rem; text-align:center; border-top:1px dashed rgba(26,18,14,.08); }
.t-organizer-contact{ display:inline-flex; align-items:center; gap:.5rem; background:#fdf1ef; color:var(--brand); font-size:.78rem; font-weight:600; padding:.3rem .9rem .3rem .3rem; border-radius:2rem; text-decoration:none; transition:background .2s ease, color .2s ease; }
.t-organizer-contact:hover{ background:var(--brand); color:#fff; }
.t-organizer-contact-icon{ width:24px; height:24px; border-radius:50%; background:#fff; color:var(--brand); display:flex; align-items:center; justify-content:center; font-size:.75rem; flex-shrink:0; transition:background .2s ease, color .2s ease; }
.t-organizer-contact:hover .t-organizer-contact-icon{ background:rgba(255,255,255,.25); color:#fff; }

.info-pill{ background:#fdf3f1; border-radius:.7rem; padding:.75rem 1rem; border:1px solid #f6e3df; }

@media (max-width: 767.98px){
	.t-hero{ padding:5rem 0 2.5rem; }
	.t-sidebar-sticky{ position:static; }
}

/* Steps */
.step-indicator{ display:flex; justify-content:space-between; margin-bottom:2rem; gap:.25rem; }
.step-indicator .step{ flex:1; text-align:center; font-size:.75rem; color:#b6aca7; position:relative; }
.step-indicator .step .dot{ width:34px; height:34px; border-radius:50%; background:#f1e9e7; color:#b6aca7; display:flex; align-items:center; justify-content:center; margin:0 auto .4rem; font-weight:700; transition:.2s; }
.step-indicator .step.active .dot{ background:var(--brand); color:#fff; box-shadow:0 0 0 5px rgba(226,35,26,.15); }
.step-indicator .step.done .dot{ background:var(--accent); color:var(--dark); }
.step-indicator .step.active{ color:var(--brand); font-weight:700; }

.form-step{ display:none; }
.form-step.active{ display:block; animation:fadeIn .25s ease; }
@keyframes fadeIn{ from{opacity:0; transform:translateY(6px);} to{opacity:1; transform:none;} }

.photo-preview{ width:120px; height:120px; border-radius:1rem; object-fit:cover; background:#fdf3f1; border:2px dashed #f0d9d4; }

/* Footer */
.site-footer{ background:var(--dark); border-top:4px solid var(--brand); }
.site-footer .footer-brand{ display:flex; align-items:center; gap:.6rem; }
.site-footer .footer-brand img{ height:46px; width:46px; }
.footer-links li{ margin-bottom:.55rem; }
.footer-links a{ color:rgba(255,255,255,.7); text-decoration:none; font-size:.9rem; transition:.15s; }
.footer-links a:hover{ color:var(--accent); padding-left:.2rem; }
.site-footer li{ color:rgba(255,255,255,.7); font-size:.9rem; margin-bottom:.5rem; }
.footer-social a{ width:36px; height:36px; border-radius:50%; background:rgba(255,255,255,.08); display:inline-flex; align-items:center; justify-content:center; color:#fff; margin-right:.5rem; transition:.15s; }
.footer-social a:hover{ background:var(--brand); }

@media (max-width: 575.98px){
	.hero{ padding:3rem 0 4.5rem; text-align:center; }
	.hero p.lead{ margin-left:auto; margin-right:auto; }
	.hero-stats{ justify-content:center; }
	.filter-bar{ margin-top:-2rem; }

	/* Registration step indicator: labels get tight below ~400px, so shrink
	   the dot and only keep the active step's label legible. */
	.step-indicator .step{ font-size:.68rem; }
	.step-indicator .step .dot{ width:26px; height:26px; font-size:.8rem; margin-bottom:.25rem; }
	.step-indicator .step:not(.active) span,
	.step-indicator .step:not(.active){ color:#d8cdc9; }

	/* Step nav buttons stack full-width so long labels (e.g. "Continue to
	   Payment") never get clipped on a ~360px viewport. */
	.form-step .d-flex.justify-content-between{ flex-direction:column-reverse; gap:.5rem; }
	.form-step .d-flex.justify-content-between > .btn{ width:100%; }

	.t-card .t-banner{ height:130px; }
}

@media (max-width: 400px){
	.step-indicator .step{ font-size:0; }
	.step-indicator .step .dot{ font-size:.8rem; }
	.step-indicator .step.active{ font-size:.68rem; }
}

/* ---------------------------------------------------------------
   Registration status lookup page
   ---------------------------------------------------------------- */
.status-hero{
	background:radial-gradient(circle at top right, #b71a10, var(--dark) 75%);
	color:#fff; padding:3.5rem 0 5rem; position:relative;
}
.status-hero-icon{
	width:64px; height:64px; border-radius:50%; background:rgba(246,180,14,.15); border:1px solid rgba(246,180,14,.4);
	color:var(--accent); display:flex; align-items:center; justify-content:center; font-size:1.6rem; margin:0 auto 1.25rem;
}
.status-hero p{ color:rgba(255,255,255,.8); max-width:480px; margin:0 auto; }

.status-card{ margin-top:-3rem; border-radius:1.25rem; box-shadow:0 16px 40px rgba(26,18,14,.16); position:relative; z-index:2; }

.lookup-tabs{ display:flex; gap:.5rem; background:#f6f1ef; border-radius:2rem; padding:.35rem; }
.lookup-tab{
	flex:1; border:0; background:transparent; padding:.6rem 1rem; border-radius:2rem; font-weight:600; font-size:.88rem;
	color:#786e69; transition:.15s;
}
.lookup-tab.active{ background:#fff; color:var(--brand); box-shadow:0 3px 10px rgba(26,18,14,.1); }

.result-ticket{ border-radius:1.25rem; box-shadow:0 12px 32px rgba(26,18,14,.12); overflow:hidden; position:relative; }
.result-ticket .ticket-accent{ position:absolute; top:0; left:0; right:0; height:5px; background:linear-gradient(90deg,var(--brand),var(--accent)); }
.result-check-icon{
	width:46px; height:46px; border-radius:50%; background:#eafaf1; color:#1baf7a; display:flex; align-items:center;
	justify-content:center; font-size:1.4rem; flex-shrink:0;
}
.result-tile{ background:#faf8f6; border-radius:.75rem; padding:.85rem 1rem; height:100%; }

/* ---------------------------------------------------------------
   Registration form page polish
   ---------------------------------------------------------------- */
.reg-hero{
	background:radial-gradient(circle at top right, #b71a10, var(--dark) 75%);
	color:#fff; padding:2.75rem 0 5rem; position:relative; overflow:hidden;
}
.reg-hero::after{ content:'🏏'; position:absolute; font-size:11rem; opacity:.07; right:-1rem; top:-1.5rem; transform:rotate(15deg); }
.reg-hero .container{ position:relative; z-index:1; }
.reg-hero-logo{ width:56px; height:56px; border-radius:50%; border:3px solid rgba(255,255,255,.5); background:#fff; object-fit:cover; }
.reg-hero .fee-badge{ font-size:.8rem; font-weight:700; padding:.35rem 1rem; border-radius:2rem; }

.reg-card{ margin-top:-3.25rem; border-radius:1.25rem; box-shadow:0 18px 44px rgba(26,18,14,.18); position:relative; z-index:2; border:0; }

.field-icon-group .input-group-text{ background:#faf8f6; border-color:#ece3e0; color:var(--brand); }
.field-icon-group .form-control, .field-icon-group .form-select{ border-color:#ece3e0; }
.field-icon-group .form-control:focus, .field-icon-group .form-select:focus{ border-color:var(--brand); box-shadow:0 0 0 .2rem rgba(226,35,26,.12); }

.form-select:focus, .form-control:focus{ border-color:var(--brand); box-shadow:0 0 0 .2rem rgba(226,35,26,.12); }

.step-heading{ display:flex; align-items:center; gap:.6rem; margin-bottom:1.5rem; }
.step-heading .step-icon{
	width:38px; height:38px; border-radius:.7rem; background:#fdf1ef; color:var(--brand); display:flex;
	align-items:center; justify-content:center; font-size:1.1rem; flex-shrink:0;
}
.step-heading h5{ margin-bottom:0; }
.step-heading p{ margin-bottom:0; font-size:.82rem; color:#9a8f8a; }

.review-tile{ background:#faf8f6; border-radius:.75rem; padding:.85rem 1rem; height:100%; border:1px solid #f1ece9; }
.review-tile .label{ font-size:.72rem; text-transform:uppercase; letter-spacing:.04em; color:#a89e9a; font-weight:700; margin-bottom:.2rem; }
.review-tile .value{ font-weight:600; word-break:break-word; }

/* Pill-style radio/checkbox options (playing role, batting style, etc.) */
.option-pills{ display:flex; flex-wrap:wrap; gap:.5rem; }
.option-pill{
	border:1.5px solid #ece3e0; background:#fff; color:#4a3f3a; border-radius:2rem; padding:.5rem 1.1rem;
	font-size:.88rem; font-weight:600; cursor:pointer; transition:.15s; user-select:none;
}
.option-pill:hover{ border-color:var(--brand); color:var(--brand); }
.btn-check:checked + .option-pill{ background:linear-gradient(135deg,var(--brand),#b71a10); border-color:var(--brand); color:#fff; box-shadow:0 4px 12px rgba(226,35,26,.25); }
.btn-check:focus-visible + .option-pill{ outline:2px solid var(--brand); outline-offset:2px; }

.upload-drop{ border:2px dashed #e7ded9; border-radius:.75rem; padding:1rem; background:#faf8f6; }
.upload-drop .form-control{ border:0; background:transparent; padding-left:0; }
.upload-drop.is-invalid{ border-color:#dc3545; background:#fdf2f2; }

/* Inline per-field validation error, shown under the field itself so it's
   obvious which field - and which step - needs fixing, instead of only a
   summary banner at the top of an unrelated step. */
.field-error-msg{ color:#dc3545; font-size:.8rem; margin-top:.35rem; font-weight:500; }
.option-pills.is-invalid .option-pill{ border-color:#dc3545; }
.step.has-error .dot{ background:#dc3545 !important; color:#fff !important; box-shadow:0 0 0 4px rgba(220,53,69,.15); }
.step.has-error{ color:#dc3545; font-weight:700; }

/* ---------------------------------------------------------------
   Payment page
   ---------------------------------------------------------------- */
.pay-hero{ text-align:center; }
.pay-amount{ font-size:2.75rem; font-weight:800; font-family:'Poppins',sans-serif; color:var(--brand); }
.pay-secure-badge{ display:inline-flex; align-items:center; gap:.4rem; background:#eafaf1; color:#1baf7a; font-weight:600; font-size:.8rem; padding:.35rem 1rem; border-radius:2rem; }
.pay-option-card{ border:2px solid #f1ece9; border-radius:1.1rem; transition:.15s; }
.pay-option-card:hover{ border-color:var(--brand); box-shadow:0 10px 26px rgba(26,18,14,.1); }