/* ── PROFILE TAB ── */
.profile-grad { height: 160px; background: linear-gradient(180deg, #3D0070, var(--dark2)); position: relative; display: flex; align-items: flex-end; padding: 0 20px 16px; }
.profile-avatar-big { width: 72px; height: 72px; border-radius: 20px; background: linear-gradient(135deg, var(--neon-dim), var(--neon)); display: flex; align-items: center; justify-content: center; font-size: 34px; border: 3px solid var(--dark2); box-shadow: 0 0 20px rgba(200,85,255,0.4); }
.profile-name-block { margin-left: 14px; }
.profile-name   { font-family: 'Bebas Neue', sans-serif; font-size: 26px; letter-spacing: 1px; }
.profile-handle { font-size: 15px; color: var(--text-muted); display: flex; align-items: center; gap: 4px; }
.handle-edit-icon { font-size: 11px; opacity: 0.7; }
.profile-body   { padding: 16px; }

/* ── Position selector ── */
.position-selector {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px;
  margin-bottom: 4px;
}
.position-chip {
  border-radius: 12px; border: 1.5px solid var(--dark4);
  background: var(--surface); padding: 10px 8px;
  text-align: center; cursor: pointer; transition: all 0.2s;
}
.position-chip:hover {
  transform: translateY(-2px);
  border-color: var(--neon-dim);
}
.position-chip.active {
  border-color: var(--neon);
  background: rgba(200,85,255,0.15);
}
.position-icon  { font-size: 22px; margin-bottom: 4px; }
.position-label { font-size: 10px; color: var(--text-muted); font-weight: 600; }
.position-chip.active .position-label { color: var(--neon); }

/* ── Next reservation card (large) ── */
.next-reservation-card {
  background: var(--surface); border: 1px solid var(--dark4);
  border-radius: var(--radius); overflow: hidden;
  margin-bottom: 8px;
}
.next-res-header {
  display: flex; gap: 14px; padding: 16px;
  border-bottom: 1px solid var(--dark4);
}
.next-res-date {
  width: 56px; height: 56px; border-radius: 12px;
  background: linear-gradient(135deg, var(--neon-dim), var(--neon));
  display: flex; flex-direction: column; align-items: center;
  justify-content: center; flex-shrink: 0;
}
.next-res-day  { font-size: 10px; font-weight: 700; letter-spacing: 0.5px; }
.next-res-num  { font-size: 24px; font-weight: 700; line-height: 1; }
.next-res-info { flex: 1; }
.next-res-pitch    { font-weight: 700; font-size: 15px; margin-bottom: 4px; }
.next-res-time     { font-size: 12px; color: var(--text-muted); margin-bottom: 2px; }
.next-res-location { font-size: 11px; color: var(--text-muted); }
.next-res-field {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 16px; background: rgba(200,85,255,0.05);
  border-bottom: 1px solid var(--dark4);
}
.field-icon    { font-size: 28px; }
.field-details { flex: 1; }
.field-name    { font-size: 12px; color: var(--text-muted); margin-bottom: 2px; }
.field-price   { font-family: 'Bebas Neue', sans-serif; font-size: 20px; color: var(--neon); letter-spacing: 0.5px; }
.next-res-actions { display: flex; gap: 8px; padding: 12px 16px; }
.res-action-btn {
  flex: 1; padding: 10px; border-radius: 10px;
  font-family: 'Outfit', sans-serif; font-size: 12px; font-weight: 600;
  cursor: pointer; transition: all 0.2s; border: none;
}
.res-action-btn.secondary { background: var(--dark4); color: var(--text-muted); }
.res-action-btn.secondary:hover { background: var(--surface2); color: var(--text); }
.res-action-btn.primary {
  background: linear-gradient(135deg, var(--neon-dim), var(--neon));
  color: white; box-shadow: 0 2px 12px rgba(200,85,255,0.3);
}
.res-action-btn.primary:hover { box-shadow: 0 4px 16px rgba(200,85,255,0.45); transform: translateY(-1px); }

/* ── Upcoming matches (smaller cards) ── */
.upcoming-match-card {
  display: flex; align-items: center; gap: 12px;
  background: var(--surface); border: 1px solid var(--dark4);
  border-radius: 14px; padding: 12px 14px;
  margin-bottom: 8px; cursor: pointer;
  transition: all 0.2s;
}
.upcoming-match-card:hover { border-color: var(--neon-dim); transform: translateX(2px); }
.upcoming-match-date {
  width: 48px; height: 48px; border-radius: 10px;
  background: var(--dark4); display: flex;
  flex-direction: column; align-items: center;
  justify-content: center; flex-shrink: 0;
}
.upcoming-day  { font-size: 9px; font-weight: 700; color: var(--text-muted); letter-spacing: 0.5px; }
.upcoming-num  { font-size: 20px; font-weight: 700; }
.upcoming-match-info    { flex: 1; }
.upcoming-match-name    { font-weight: 600; font-size: 13px; margin-bottom: 2px; }
.upcoming-match-details { font-size: 11px; color: var(--text-muted); }
.upcoming-match-arrow   { color: var(--text-muted); font-size: 20px; }

/* ── Settings button ── */
.settings-main-btn {
  width: 100%; margin-top: 20px;
  display: flex; align-items: center; gap: 14px;
  background: var(--surface); border: 1px solid var(--dark4);
  border-radius: 14px; padding: 14px 16px;
  cursor: pointer; transition: all 0.2s;
  font-family: 'Outfit', sans-serif;
}
.settings-main-btn:hover {
  border-color: var(--neon-dim);
  transform: translateY(-2px);
  box-shadow: 0 4px 16px rgba(200,85,255,0.15);
}
.settings-icon    { font-size: 28px; }
.settings-text    { flex: 1; text-align: left; }
.settings-title   { font-size: 14px; font-weight: 600; color: var(--text); }
.settings-subtitle { font-size: 11px; color: var(--text-muted); margin-top: 2px; }
.settings-arrow   { color: var(--text-muted); font-size: 20px; }

/* ── Settings screen menu ── */
.menu-section       { margin-bottom: 16px; }
.menu-section-label { font-size: 10px; font-weight: 700; color: var(--text-muted); text-transform: uppercase; letter-spacing: 1.5px; margin-bottom: 8px; }
.menu-item {
  display: flex; align-items: center; gap: 14px;
  background: var(--surface); padding: 14px 16px;
  border-radius: 14px; margin-bottom: 6px;
  cursor: pointer; border: 1px solid var(--dark4); transition: all 0.2s;
}
.menu-item:hover { border-color: var(--neon-dim); }
.menu-icon  { width: 38px; height: 38px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 18px; background: var(--dark4); flex-shrink: 0; }
.menu-text  { flex: 1; }
.menu-text h4 { font-size: 14px; font-weight: 600; }
.menu-text p  { font-size: 11px; color: var(--text-muted); }
.menu-arrow   { color: var(--text-muted); font-size: 16px; }
.neon-badge-count { background: var(--neon); color: white; border-radius: 20px; padding: 1px 8px; font-size: 11px; font-weight: 700; }

/* ── Modify reservation button (on upcoming cards) ── */
.modify-res-btn {
  background: var(--dark4); border: 1px solid var(--dark4);
  color: var(--text-muted); border-radius: 8px;
  padding: 6px 12px; font-family: 'Outfit', sans-serif;
  font-size: 11px; font-weight: 600; cursor: pointer;
  transition: all 0.18s; white-space: nowrap; flex-shrink: 0;
}
.modify-res-btn:hover { border-color: var(--neon-dim); color: var(--neon); background: rgba(200,85,255,0.08); }

/* ── Phone section in modify overlay ── */
.modify-phone-section {
  display: flex; align-items: center; gap: 8px;
  background: rgba(200,85,255,0.07); border: 1px solid var(--dark4);
  border-radius: 10px; padding: 10px 14px; margin-top: 16px;
}
.modify-phone-label { font-size: 12px; color: var(--text-muted); }
.modify-phone-number {
  font-size: 13px; font-weight: 600; color: var(--neon);
  text-decoration: none; transition: opacity 0.18s;
}
.modify-phone-number:hover { opacity: 0.75; }