/* =========================================
   1. VARIABLES & RESET
   ========================================= */
:root {
    --neon-orange: #FF6B00;
    --pitch-black: #0D0D0D;
    --card-bg: #111;
    --input-bg: #181818;
    --border: #333;
    --electric-blue: #007BFF;
    --turf-green: #3BA83B;
    --white: #FFFFFF;
    --gray: #888;
    --text-light: #e0e0e0;
    --text-muted: #aaaaaa;
    --status-confirmed: #3BA83B;
    --status-pending: #FFB266;
    --status-cancelled: #666;
}

body { background-color: var(--pitch-black); color: var(--text-light); font-family: 'Inter', sans-serif; margin: 0; padding: 0; line-height: 1.5; font-size: 14px; }
* { box-sizing: border-box; outline: none; }
h1, h2, h3, h4 { font-family: 'Montserrat', sans-serif; text-transform: uppercase; font-weight: 700; margin: 0 0 10px 0; color: var(--white); }
a { text-decoration: none; transition: 0.3s ease; color: inherit; }
ul { list-style: none; padding: 0; margin: 0; }

/* Hide Theme Elements */
#masthead, header:not(.hx-header), footer:not(.hx-footer), .site-header, .site-footer { display: none !important; }
.entry-title, .page-title, .elementor-heading-title, h1.wp-block-post-title { display: none !important; }

/* =========================================
   2. LAYOUT & HEADER
   ========================================= */
.hx-app { padding-top: 80px; min-height: 80vh; padding-bottom: 40px; }
.container { max-width: 1280px; margin: 0 auto; padding: 0 20px; }

.hx-header { position: fixed; top: 0; left: 0; width: 100%; height: 80px; z-index: 1000; background: rgba(13, 13, 13, 0.95); backdrop-filter: blur(10px); border-bottom: 1px solid #222; }
.nav-container { height: 100%; display: flex; justify-content: space-between; align-items: center; }
.logo img { height: 45px; width: auto; }

.main-nav ul { display: flex; gap: 30px; height: 100%; align-items: center; margin: 0; }
.main-nav a { 
    color: #ccc; font-family: 'Inter', sans-serif; font-weight: 600; font-size: 13px !important; 
    text-transform: uppercase; letter-spacing: 0.5px; height: 80px; display: flex; align-items: center; 
    border-bottom: 3px solid transparent; text-decoration: none;
}
.main-nav a:hover, .main-nav a.active { color: var(--white); border-bottom-color: var(--neon-orange); }
.header-actions { display: flex; gap: 15px; align-items: center; }

/* =========================================
   3. GLOBAL COMPONENTS
   ========================================= */
.btn, .hx-btn { padding: 10px 24px; font-weight: 700; text-transform: uppercase; font-size: 12px; letter-spacing: 1px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; cursor: pointer; border: none; border-radius: 4px; transition: all 0.3s ease; text-decoration: none; line-height: 1; }
.btn-orange, .hx-btn { background: var(--neon-orange); color: var(--white); clip-path: polygon(10% 0, 100% 0, 100% 100%, 0% 100%); padding: 12px 28px; }
.btn-orange:hover { background: #e05e00; transform: translateY(-2px); }
.btn-blue { background: var(--electric-blue); color: var(--white); border-radius: 4px; }
.btn-blue:hover { background: #0062cc; }
.btn-outline, .hx-btn-outline { background: transparent; border: 1px solid #666 !important; color: #ddd; padding: 10px 20px; clip-path: none; }
.btn-outline:hover, .btn-outline.active-btn { border-color: var(--white) !important; color: var(--white); background: rgba(255,255,255,0.1); }
.btn-ghost { background: transparent; border: 1px solid #444; color: #ccc; padding: 8px 16px; font-size: 11px; cursor: pointer; text-transform: uppercase; font-weight: 600; border-radius: 4px; display: inline-block; }
.btn-ghost:hover { border-color: #fff; color: #fff; }

.card, .hx-card { background: var(--card-bg); border-radius: 10px; border: 1px solid var(--border); padding: 18px; margin-bottom: 20px; }
.card-header { margin-bottom: 15px; border-bottom: 1px solid #222; padding-bottom: 10px; display: flex; justify-content: space-between; align-items: center; }
.card-title { font-size: 14px; font-weight: 700; color: #fff; margin-bottom: 2px; text-transform: uppercase; }
.card-sub { font-size: 11px; color: var(--text-muted); font-family: 'Inter', sans-serif; text-transform: none; }

.field-group { margin-bottom: 16px; }
.field-group label { display: block; font-size: 11px; text-transform: uppercase; font-weight: 600; color: #777; margin-bottom: 6px; letter-spacing: 0.5px; }
.field-group input, .field-group select, .field-group textarea { width: 100%; background: var(--input-bg); border-radius: 6px; border: 1px solid var(--border); padding: 10px 14px; color: #eee; font-size: 13px; font-family: 'Inter', sans-serif; transition: 0.2s ease; }
.field-group input:focus { border-color: var(--neon-orange); background: #222; }
.field-inline { display: flex; gap: 15px; }
.field-inline .field-group { flex: 1; }

/* =========================================
   4. DASHBOARD COMPONENTS (Fixed)
   ========================================= */
.page-hero, .dashboard-hero { padding-top: 40px; padding-bottom: 20px; border-bottom: 1px solid #222; margin-bottom: 30px; text-align: center; }
.hero-tag { color: var(--electric-blue); font-weight: 700; font-size: 12px; letter-spacing: 3px; margin-bottom: 6px; display: block; }
.hero-title, .hero-heading { font-size: 34px; font-weight: 900; margin-bottom: 8px; color: #fff; }
.hero-sub { font-size: 14px; color: #aaa; max-width: 600px; margin: 0 auto 20px; }
.hero-meta { font-size: 11px; color: #777; margin-top: 8px; }

/* Profile Hero */
.player-profile { display: inline-flex; align-items: center; gap: 25px; background: #111; padding: 20px 30px; border-radius: 12px; border: 1px solid #333; }
.player-avatar-lg { width: 80px; height: 80px; border-radius: 50%; background: linear-gradient(135deg, var(--neon-orange), #FF8C00); display: flex; align-items: center; justify-content: center; overflow: hidden; border: 2px solid #333; }
.player-avatar-lg img { width: 100%; height: 100%; object-fit: cover; }
.player-info h2 { font-size: 26px; font-weight: 900; margin-bottom: 5px; color: #fff; margin-top: 0; line-height: 1; }
.player-meta { color: var(--text-muted); font-size: 13px; display: flex; gap: 20px; align-items: center; }
.player-stat { display: flex; align-items: center; gap: 6px; }

/* Stats & Actions */
.stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 15px; margin: 25px 0; }
.stat-card { background: #111; border-radius: 10px; border: 1px solid #222; padding: 20px; text-align: center; }
.stat-number { font-size: 36px; font-weight: 900; display: block; line-height: 1; margin-bottom: 5px; color: #fff; }
.stat-label { font-size: 11px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 1px; }

.quick-actions { background: #111; border-radius: 12px; border: 1px solid #222; padding: 25px; margin: 25px 0; }
.actions-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 15px; }
.action-card { padding: 20px; background: #1a1a1a; border-radius: 8px; text-align: center; cursor: pointer; transition: 0.2s ease; border: 1px solid #2a2a2a; text-decoration: none; display: block; }
.action-card:hover { background: rgba(255,107,0,0.05); border: 1px solid var(--neon-orange); transform: translateY(-2px); }
.action-icon { font-size: 32px; display: block; margin-bottom: 10px; color: #fff; }
.action-title { font-weight: 700; font-size: 13px; margin-bottom: 2px; color: #fff; }
.action-badge { font-size: 10px; color: var(--text-muted); }

/* Matches List (Dashboard) */
.matches-section { background: #111; border-radius: 12px; border: 1px solid #222; overflow: hidden; margin: 25px 0; }
.match-item { padding: 15px 25px; border-bottom: 1px solid #222; display: flex; gap: 20px; align-items: center; }
.match-status { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
.status-confirmed { background: var(--status-confirmed); }
.match-details { flex: 1; } /* Critical Fix: Pushes action button to the right */
.match-title { font-weight: 700; font-size: 14px; margin-bottom: 3px; color: #fff; }
.match-meta { font-size: 12px; color: var(--text-muted); display: flex; gap: 15px; }
.match-action { white-space: nowrap; } /* Critical Fix: Prevents button wrapping */

/* =========================================
   5. PROFILE & EDIT
   ========================================= */
.layout { display: grid; grid-template-columns: 2fr 1.2fr; gap: 30px; }
.role-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-top: 15px; }
.role-option { background: #181818; border: 1px solid #333; border-radius: 8px; padding: 15px 10px; text-align: center; cursor: pointer; transition: all 0.2s; }
.role-option.active { border-color: var(--neon-orange); background: rgba(255,107,0,0.05); }
.role-option i { font-size: 20px; color: #aaa; margin-bottom: 8px; display: block; }
.role-option.active i { color: var(--neon-orange); transform: scale(1.1); }
.role-option span { font-size: 11px; font-weight: 600; text-transform: uppercase; color: #aaa; display: block; }
.role-option.active span { color: #fff; }

.skill-selector { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin-top: 10px; }
.skill-option { background: #1a1a1a; border: 1px solid var(--border); border-radius: 8px; padding: 15px; cursor: pointer; transition: 0.2s; display: flex; flex-direction: column; align-items: center; text-align: center; }
.skill-option.active { border-color: var(--neon-orange); background: rgba(255,107,0,0.1); color: var(--white); }
.skill-option strong { font-size: 13px; display: block; margin-bottom: 4px; color: #fff; }
.skill-option span { font-size: 10px; color: #aaa; }

.avatar-section { display: flex; align-items: center; gap: 20px; margin-bottom: 20px; }
.avatar-preview-box { width: 80px; height: 80px; border-radius: 50%; background: #222; border: 2px dashed #444; overflow: hidden; display: flex; align-items: center; justify-content: center; }
.avatar-preview-box img { width: 100%; height: 100%; object-fit: cover; }
.upload-btn-wrapper { position: relative; overflow: hidden; display: inline-block; }
.upload-btn-wrapper input[type=file] { font-size: 100px; position: absolute; left: 0; top: 0; opacity: 0; cursor: pointer; width: 100%; height: 100%; }

.profile-preview-card { background: linear-gradient(145deg, #1a1a1a, #0f0f0f); border: 1px solid #333; border-radius: 16px; padding: 30px 20px; text-align: center; }
.preview-img { width: 100px; height: 100px; border-radius: 50%; border: 3px solid #333; background: #222; margin: 0 auto 15px; object-fit: cover; display: block; }
.preview-name { font-size: 20px; font-weight: 700; margin-bottom: 5px; color: #fff; }
.role-badge { display: inline-block; background: #222; color: var(--neon-orange); font-size: 10px; font-weight: 800; padding: 4px 10px; border-radius: 4px; text-transform: uppercase; margin-bottom: 15px; border: 1px solid #333; }
.preview-meta { font-size: 12px; color: #aaa; margin-bottom: 20px; }
.preview-stats-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; background: #111; padding: 15px; border-radius: 8px; margin-top: 15px; }

/* =========================================
   6. BOOKING SPECIFIC
   ========================================= */
.booking-hero-grid { display: grid; grid-template-columns: 2.2fr 1.2fr; gap: 40px; align-items: center; }
.booking-layout { padding: 40px 0 80px; display: grid; grid-template-columns: 2fr 1.4fr; gap: 40px; }
.step-bar { display: flex; gap: 10px; margin-bottom: 25px; }
.step { flex: 1; padding: 8px 10px; border-radius: 999px; border: 1px solid #333; display: flex; align-items: center; gap: 6px; color: #aaa; font-size: 11px; text-transform: uppercase; }
.step.active { border-color: var(--neon-orange); color: var(--white); background: rgba(255,107,0,0.1); }

/* Slots */
.slot-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; }
.slot-pill { background: #181818; border: 1px solid #333; border-radius: 8px; padding: 12px; display: flex; flex-direction: column; align-items: flex-start; cursor: pointer; width: 100%; transition: 0.2s ease; text-align: left; }
.slot-pill:hover { border-color: #666; background: #222; }
.slot-pill.selected { border-color: var(--neon-orange); background: rgba(255,107,0,0.1); }
.slot-pill span.time { font-size: 14px; font-weight: 700; color: #fff; display: block; margin-bottom: 4px; }
.slot-pill span.meta { color: #aaa; font-size: 11px; }
.slot-pill span.price { font-size: 12px; font-weight: 600; color: var(--turf-green); }

/* Pitch Tabs */
.pitch-tabs { display: flex; gap: 8px; }
.pitch-tab { font-size: 11px; padding: 5px 12px; border-radius: 999px; border: 1px solid #333; cursor: pointer; color: #aaa; background: transparent; transition: 0.2s; }
.pitch-tab.active { border-color: var(--turf-green); color: var(--white); background: rgba(59,168,59,0.15); }

/* Confirmation Elements */
.steps-bar { display: flex; gap: 10px; margin-top: 20px; justify-content: center; }
.step-pill { background: #111; padding: 6px 14px; border-radius: 20px; border: 1px solid #333; color: #777; font-size: 11px; text-transform: uppercase; display: flex; align-items: center; gap: 6px; }
.step-pill.current { color: #fff; border-color: var(--neon-orange); background: rgba(255,107,0,0.1); }
.step-pill.done { color: var(--turf-green); border-color: var(--turf-green); }
.badge { font-size: 10px; text-transform: uppercase; padding: 4px 8px; border-radius: 4px; border: 1px solid #444; color: #aaa; float: right; }
.badge.unpaid { border-color: #d9534f; color: #d9534f; }

.summary-row { display: flex; justify-content: space-between; font-size: 13px; margin-bottom: 6px; color: #ddd; }
.summary-total { border-top: 1px dashed #333; margin-top: 10px; padding-top: 10px; }
.check-row { display: flex; align-items: center; gap: 10px; margin-top: 15px; }
.card-footer { border-top: 1px solid #222; padding-top: 15px; margin-top: 15px; display: flex; justify-content: space-between; }

/* =========================================
   7. FIND TEAM / JOIN MATCH SPECIFIC
   ========================================= */
.filter-card { background: #111; border-radius: 10px; border: 1px solid #222; padding: 16px 16px 12px; margin-bottom: 20px; }
.filter-row { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 10px; margin: 8px 0 10px; }
.filter-actions { display: flex; justify-content: flex-end; gap: 8px; }

/* Match Card Structure */
.match-list { display: flex; flex-direction: column; gap: 15px; }
.match-card { border-radius: 10px; border: 1px solid #222; background: #0f1012; display: grid; grid-template-columns: 1.1fr 2.2fr 0.9fr; overflow: hidden; }

/* Match Date */
.match-date { background: radial-gradient(circle at top left, #1a2a3f, #050505 55%); padding: 12px 10px; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; border-right: 1px solid #222; }
.match-date .day { font-size: 22px; font-weight: 900; color: #fff; line-height: 1; }
.match-date .month { font-size: 11px; text-transform: uppercase; color: #bbb; margin-top: 2px; }
.match-date .time { font-size: 11px; color: #aaa; margin-top: 4px; }

/* Match Content */
.match-main { padding: 15px; border-right: 1px solid #222; }
.match-main h3 { font-size: 15px; margin: 0 0 6px 0; color: #fff; font-weight: 700; }
.match-desc { font-size: 12px; color: #ccc; margin-bottom: 10px; line-height: 1.4; }

/* Match Right */
.match-right { padding: 15px; display: flex; flex-direction: column; justify-content: space-between; align-items: flex-end; text-align: right; }
.match-price { font-size: 13px; font-weight: 600; margin-top: 6px; color: #fff; }
.match-price span.per { font-size: 11px; color: #999; font-weight: 400; }
.waitlist-note { font-size: 10px; color: #777; margin-top: 5px; line-height: 1.3; max-width: 150px; }

/* Match Details (Join Page) */
.match-header { background: #111; border-radius: 10px; border: 1px solid #222; padding: 20px; margin-bottom: 24px; }
.match-header-grid { display: grid; grid-template-columns: 1.2fr 2fr 1fr; gap: 20px; align-items: center; }
.match-date-box { background: radial-gradient(circle at top left, #1a2a3f, #050505 55%); border-radius: 8px; padding: 14px 12px; text-align: center; border: 1px solid #222; }
.match-date-box .day { font-size: 28px; font-weight: 900; color: #fff; line-height: 1; }
.match-date-box .month { font-size: 12px; text-transform: uppercase; color: #bbb; margin-top: 2px; }
.match-date-box .time { font-size: 12px; color: #aaa; margin-top: 4px; }
.match-details h3 { font-size: 18px; margin: 0 0 8px 0; color: #fff; }
.match-slots { text-align: right; }
.slots-count { font-size: 20px; font-weight: 700; color: var(--turf-green); }
.slots-total { font-size: 11px; color: #777; text-transform: uppercase; }
.slot-price { font-size: 14px; font-weight: 600; margin-top: 6px; color: #fff; }

/* Meta & Pills */
.match-meta { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.meta-pill { font-size: 10px; text-transform: uppercase; border-radius: 999px; border: 1px solid #333; padding: 3px 8px; color: #999; }
.meta-pill.skill { border-color: var(--turf-green); color: var(--turf-green); }
.meta-pill.type { border-color: var(--electric-blue); color: var(--electric-blue); }

.badge-small { font-size: 9px; text-transform: uppercase; border-radius: 999px; border: 1px solid #333; padding: 2px 6px; color: #777; }
.badge.waitlist { border-color: #f3b06b; color: #f3b06b; }
.badge.open { border-color: var(--turf-green); color: var(--turf-green); }

/* Slots & Sidebar */
.slots-row { display: flex; align-items: center; justify-content: space-between; font-size: 12px; color: #aaa; margin-top: auto; border-top: 1px dashed #222; padding-top: 8px; }
.slots-info span.open { color: var(--turf-green); font-weight: 600; }
.slots-info span.full { color: #f3b06b; }

.sidebar-card h4 { font-size: 13px; text-transform: uppercase; margin-bottom: 10px; color: #fff; border-bottom: 1px solid #222; padding-bottom: 8px; }
.profile-card { font-size: 12px; color: #ccc; }
.profile-row { display: flex; justify-content: space-between; margin-bottom: 6px; border-bottom: 1px solid #1a1a1a; padding-bottom: 4px; }
.profile-row:last-child { border-bottom: none; }
.profile-row span.label { color: #777; }
.step-list { font-size: 12px; color: #bbb; margin-top: 4px; padding-left: 16px; margin-bottom: 0; }
.step-list li { margin-bottom: 6px; }

/* Roster Grid */
.roster-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 10px; margin-top: 15px; }
.roster-player { background: #1a1a1a; border-radius: 8px; padding: 12px 8px; text-align: center; font-size: 12px; border: 1px solid #333; color: #ddd; }
.roster-avatar { width: 40px; height: 40px; border-radius: 50%; background: #333; margin: 0 auto 8px; display: flex; align-items: center; justify-content: center; font-size: 14px; color: #ccc; font-weight: 700; overflow: hidden; }
.player-status { font-size: 10px; text-transform: uppercase; padding: 2px 8px; border-radius: 999px; margin-top: 6px; display: inline-block; font-weight: 700; }
.player-status.confirmed { background: rgba(59,168,59,0.2); color: var(--turf-green); border: 1px solid var(--turf-green); }
.player-status.pending { background: rgba(255,107,0,0.2); color: var(--neon-orange); border: 1px solid var(--neon-orange); }
.player-status.captain { background: rgba(0,123,255,0.2); color: var(--electric-blue); border: 1px solid var(--electric-blue); }

/* Empty Slot Styling */
.slot-open { border: 1px dashed #444; background: transparent; color: #777; }
.slot-open .roster-avatar { background: transparent; border: 1px dashed #555; color: #555; font-size: 18px; }

/* Payment Section */
.payment-section { background: #0f1012; border: 1px solid #333; border-radius: 10px; padding: 16px; margin-top: 15px; }
.payment-row { display: flex; justify-content: space-between; margin-bottom: 8px; font-size: 13px; color: #ddd; }
.payment-total { font-weight: 700; font-size: 16px; color: #fff; }

/* =========================================
   8. FOOTER & RESPONSIVE
   ========================================= */
.hx-footer { background: #050505; padding: 30px 0; border-top: 1px solid #222; margin-top: 40px; text-align: center; font-size: 11px; color: #777; }

@media (max-width: 1080px) {
    .match-card { grid-template-columns: 1fr 2fr; grid-template-rows: auto auto; }
    .match-right { grid-column: 1 / -1; flex-direction: row; align-items: center; border-top: 1px solid #222; justify-content: space-between; text-align: left; }
}
@media (max-width: 900px) { 
    .layout, .booking-hero-grid, .booking-layout { grid-template-columns: 1fr; } 
    aside { position: relative; top: 0; } 
    .match-header-grid { grid-template-columns: 1fr; text-align: center; }
    .match-date-box { display: flex; flex-direction: row; justify-content: center; gap: 15px; align-items: center; }
    .match-slots { text-align: center; border-top: 1px solid #222; padding-top: 15px; margin-top: 10px; }
}
@media (max-width: 768px) { 
    .hx-header { height: 60px; padding: 0 15px; }
    .hx-app { padding-top: 80px; }
    .main-nav { display: none; } 
    .filter-row { grid-template-columns: repeat(2, 1fr); }
    .match-card { display: flex; flex-direction: column; }
    .match-date { border-right: none; border-bottom: 1px solid #222; align-items: center; flex-direction: row; gap: 15px; padding: 8px; }
    .match-main { border-right: none; }
}
/* --- READABILITY FIXES --- */

/* Hero Text & Pills */
.hero-text { color: #e0e0e0 !important; } /* Lighter text */
.info-pill { color: #ddd !important; border-color: #555 !important; }

/* Booking Summary Box */
#summary-placeholder { color: #aaa !important; }
.fine-print { color: #bbb !important; } /* Much lighter gray */

/* Sidebar & Card Subs */
.card-sub { color: #bbb !important; }
.hero-meta { color: #aaa !important; }

/* Match Card Details */
.match-date .time { color: #ddd !important; }
.match-desc { color: #e0e0e0 !important; }
/* =========================================
   DASHBOARD FIXES
   ========================================= */

/* Fix for "Your Upcoming Matches" Header */
.section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 25px;
    border-bottom: 1px solid #222;
    background: #111; /* Ensure background matches card */
    border-radius: 12px 12px 0 0; /* Rounded top corners */
}

.section-title {
    font-size: 15px;
    font-weight: 700;
    color: #fff; /* Fix readability */
    margin: 0;
    text-transform: uppercase;
}

/* Ensure the button in the header looks good */
.section-header .btn-outline {
    font-size: 11px;
    padding: 6px 16px;
    height: auto;
    border-color: #444 !important;
    color: #aaa;
}
.section-header .btn-outline:hover {
    border-color: var(--neon-orange) !important;
    color: #fff;
}

/* Fix spacing for the list below it */
.matches-section .match-item:first-child {
    border-top: none; 
}
/* Force consistent header spacing on all pages */
.hx-app { 
    padding-top: 80px !important; 
    margin-top: 0 !important;
}
body.page {
    padding-top: 0 !important;
}