/* unchanged; cache-busted to v=12 */
* { box-sizing: border-box; margin: 0; padding: 0; }

:root{
  --bg-1: rgba(3,20,12,0.60);
  --bg-2: rgba(3,20,12,0.75);
  --line: 34,197,94;
  --text: #e7f7ec;
  --muted: #9ab7a6;
  --accent: #2ecc71;
  --dark: #04120A;
}
html, body { height: 100%; font-family: "Segoe UI", system-ui, -apple-system, Arial, sans-serif; }

.bg-overlay{
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  color: var(--text);
  background: linear-gradient(var(--bg-2), var(--bg-2)),
              url("./login_background.png") center/cover fixed no-repeat;
}

.league-section{
  position: relative;
  z-index: 1;
  max-width: 1100px;
  width: 85%;
  margin: 46px auto 48px;
  padding: 26px;
  border-radius: 18px;
  border: 2px solid rgba(var(--line), 0.60);
  background: linear-gradient(180deg, rgba(15,49,34,0.55), rgba(10,28,20,0.55));
  box-shadow: 0 15px 40px rgba(0,0,0,0.45), 0 0 0 1px rgba(var(--line),0.25) inset;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  overflow: hidden;
}

.title-banner{ width: 100%; padding: 14px 18px; border-radius: 14px; border: 2px solid rgba(var(--line),0.65); box-shadow: 0 0 18px rgba(0,0,0,0.35), 0 0 0 1px rgba(var(--line),0.2) inset; background: linear-gradient(90deg, var(--dark) 0%, rgba(3,74,31,1) 50%, var(--dark) 100%); margin-bottom: 14px; text-align: center; }
.leagues-title{ font-size: 36px; line-height: 1.2; font-weight: 800; color: var(--text); letter-spacing: .5px; }

.tabs{ width: fit-content; margin: 18px auto 6px; display: flex; align-items: center; gap: 4px; padding: 6px; border-radius: 999px; background: rgba(8, 32, 24, 0.55); border: 1px solid rgba(var(--line), 0.35); box-shadow: 0 6px 16px rgba(0,0,0,0.25), inset 0 0 24px rgba(0,255,170,0.06); }
.tab{ border: 0; background: transparent; color: #c5fadd; padding: 10px 22px; border-radius: 999px; font-weight: 700; letter-spacing: .3px; cursor: pointer; transition: transform .18s ease, background .18s ease, color .18s ease; }
.tab:hover{ color: #fff; }
.tab.active{ background: #9ef0c3; color: #082018; box-shadow: 0 2px 0 rgba(0,0,0,0.25); transform: translateY(-1px); }

.section-chip{ display: block; width: fit-content; margin: 26px auto 10px; padding: 8px 14px; border-radius: 999px; background: #e6ffe6; color: #08331e; font-size: 14px; font-weight: 800; letter-spacing: .3px; border: 2px solid rgba(var(--line), 0.55); box-shadow: 0 4px 18px rgba(0,0,0,0.15); }

.league-wrapper{ display: flex; flex-direction: column; align-items: center; }

.league-grid{ display: flex; flex-wrap: wrap; gap: 20px; justify-content: center; margin-top: 18px; width: 100%; }
.league-grid.single{ justify-content: center; }

.league-card{ position: relative; overflow: hidden; width: 180px; height: 180px; border-radius: 30px; text-decoration: none; color: white; transition: transform .25s ease, box-shadow .25s ease; border: 1px solid rgba(255,255,255,0.08); box-shadow: 0 8px 20px rgba(0,0,0,0.35); display: block; flex: 0 0 auto; }
.league-card img{ width: 100%; height: 100%; object-fit: cover; display: block; }
.league-card::before{ content: ""; position: absolute; inset: 0; background: rgba(0, 24, 4, 0.5); transition: opacity .4s ease; z-index: 1; }
.league-card .label{ position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); color: white; font-weight: 800; text-align: center; text-shadow: 2px 2px 4px #000; opacity: 0; z-index: 2; transition: opacity .4s ease; }
.league-card:hover::before{ opacity: 0; }
.league-card:hover .label{ opacity: 1; }

html { scroll-behavior: smooth; }

/* ===== Modal styles (unchanged) ===== */
.modal{ position: fixed; inset: 0; background: rgba(0,0,0,0.65); display: none; justify-content: center; align-items: center; z-index: 1000; padding: 12px; }
.modal.hidden{ display: none; }
.modal-content{ width: min(520px, 92%); max-height: 80vh; overflow-y: auto; background: linear-gradient(180deg, rgba(15,49,34,0.95), rgba(10,28,20,0.95)); color: var(--text); padding: 14px 18px 16px; border-radius: 16px; border: 2px solid rgba(var(--line), 0.5); box-shadow: 0 20px 40px rgba(0,0,0,0.5), 0 0 0 1px rgba(var(--line),0.25) inset; }
.modal-headline{ position: relative; display: flex; align-items: center; justify-content: center; padding: 6px 8px; }
.modal-brgy-title{ font-weight: 900; font-size: 16px; letter-spacing: .4px; padding: 6px 14px; border-radius: 999px; background: #e6ffe6; color: #08331e; border: 2px solid rgba(var(--line), 0.6); box-shadow: 0 4px 18px rgba(0,0,0,0.15); }
.modal-close{ position: absolute; right: 4px; top: 2px; font-size: 28px; line-height: 1; background: transparent; color: #c9ffe2; border: 0; cursor: pointer; padding: 6px 10px; border-radius: 10px; }
.modal-close:hover{ background: rgba(0,0,0,0.2); }
.modal-title{ text-align: center; margin: 6px 0 10px; font-size: 22px; font-weight: 800; color: var(--text); }
.league-search-input{ width: 100%; padding: 12px 14px; margin: 12px 0 6px; border: 1px solid rgba(var(--line), .45); border-radius: 12px; background: rgba(0,0,0,0.25); color: var(--text); font-size: 14px; outline: none; }
.league-search-input::placeholder{ color: var(--muted); }
.league-count-text{ font-size: 13px; color: #d7efe2; margin-bottom: 10px; }

.modal-columns{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.modal-col{ background: rgba(0,0,0,0.15); border: 1px solid rgba(var(--line), 0.3); border-radius: 12px; padding: 10px; }
.modal-col-title{ font-weight: 900; font-size: 13px; letter-spacing: .3px; color: #9ef0c3; margin-bottom: 8px; text-transform: uppercase; }

.modal-league-grid{ display: grid; grid-template-columns: 1fr; gap: 8px; }
.modal-league-tile{ display: flex; align-items: center; gap: 10px; background: rgba(3, 74, 31, 0.95); color: white; border: 1px solid rgba(var(--line), .5); border-radius: 12px; padding: 10px; cursor: pointer; box-shadow: 0 8px 22px rgba(0,0,0,0.35); }
.modal-league-tile:hover{ background: rgba(3, 88, 38, 0.98); }
.modal-league-logo{ width: 36px; height: 36px; border-radius: 50%; overflow: hidden; flex-shrink: 0; border: 1px solid rgba(255,255,255,0.2); }
.modal-league-logo img{ width: 100%; height: 100%; object-fit: cover; display: block; }
.modal-league-info{ display: flex; flex-direction: column; }
.modal-league-name{ font-weight: 800; letter-spacing: .2px; font-size: 14px; line-height: 1.2; }
.modal-league-sub{ font-size: 12px; opacity: .8; }

@media (min-width: 992px){ .modal-content{ width: 820px !important; max-width: 90vw !important; margin: 0 auto !important; } }
@media (min-width: 1400px){ .modal-content{ width: 920px !important; } }

@media (max-width: 1199.98px){
  .league-section{ width: 92%; max-width: 1000px; }
  .league-grid{ width: 100%; justify-content: center; gap: 18px; }
  .league-card{ flex: 0 1 calc(25% - 18px); max-width: calc(25% - 18px); width: auto; height: auto; aspect-ratio: 1 / 1; border-radius: 22px; }
  .league-grid.single .league-card{ flex: 0 1 180px; max-width: 180px; }
}
@media (max-width: 991.98px){ .league-section{ width: 94%; padding: 20px; } .league-grid{ gap: 16px; } .league-card{ flex: 0 1 calc(33.333% - 16px); max-width: calc(33.333% - 16px); } .modal-columns{ grid-template-columns:1fr; } }
@media (max-width: 767.98px){
  .title-banner{ padding: 10px 12px; }
  .leagues-title{ font-size: 20px; }
  .tabs{ width: 100%; justify-content: center; flex-wrap: wrap; }
  .tab{ flex: 1 1 auto; padding: 10px 12px; }
  .league-section{ width: 100%; margin: 46px auto 48px; padding: 12px; border-radius: 12px; }
  .league-wrapper .league-grid.single{ justify-content: center; gap: 12px; }
  .league-wrapper .league-grid.single .league-card{ flex: 0 1 clamp(120px, 45vw, 180px); max-width: clamp(120px,45vw,180px); aspect-ratio: 1 / 1; border-radius: 18px; }
  .league-wrapper .league-grid:not(.single){ gap: 12px; justify-content: center; }
  .league-wrapper .league-grid:not(.single) .league-card{ flex: 0 1 calc(33.333% - 12px); max-width: calc(33.333% - 12px); min-width: 100px; aspect-ratio: 1 / 1; border-radius: 18px; }
  .league-card .label{ font-size: 14px; opacity: 1; }
}
@media (hover: none) and (pointer: coarse){ .league-card::before{ opacity: 0; } .league-card .label{ opacity: 1; } }

.join-link { color:#9ef0c3; text-decoration:underline; cursor:pointer; margin-left:8px; }
.muted-note { color:#cfe6da; font-size:13px; margin-left:8px; }

.join-and-count {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  flex-wrap: wrap;
}
.join-and-count .league-count-text { margin: 0; }
.join-wrap { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }

#leagueModal { position: fixed; inset: 0; z-index: 1000; }
#leagueModal .modal-content { position: relative; z-index: 1001; }

/* Registration & success modals */
#leagueRegModal.reg-modal,
#regSuccessModal.reg-modal,
#loginRequiredModal.reg-modal,
#attachmentPreviewModal.reg-modal,
#privacyModal.reg-modal,
#termsModal.reg-modal {
  position: fixed;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,.65);
  z-index: 3000;
}
#leagueRegModal .reg-dialog,
#regSuccessModal .reg-dialog,
#loginRequiredModal .reg-dialog,
#attachmentPreviewModal .reg-dialog,
#privacyModal .reg-dialog,
#termsModal .reg-dialog {
  background: linear-gradient(180deg, rgba(15,49,34,0.95), rgba(10,28,20,0.95));
  color: var(--text);
  width: 100%;
  max-width: 820px;
  margin: 0 12px;
  border-radius: 16px;
  overflow: hidden;
  border: 2px solid rgba(var(--line), 0.5);
  box-shadow: 0 20px 40px rgba(0,0,0,0.5), 0 0 0 1px rgba(var(--line),0.25) inset;
}
#leagueRegModal .reg-header,
#regSuccessModal .reg-header,
#loginRequiredModal .reg-header,
#attachmentPreviewModal .reg-header,
#privacyModal .reg-header,
#termsModal .reg-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px;
  border-bottom: 1px solid rgba(var(--line),0.35);
  background: rgba(0,0,0,0.2);
}
#leagueRegModal .reg-header h3,
#regSuccessModal .reg-header h3,
#loginRequiredModal .reg-header h3,
#attachmentPreviewModal .reg-header h3,
#privacyModal .reg-header h3,
#termsModal .reg-header h3 {
  margin: 0;
  font-size: 20px;
  font-weight: 800;
  color: var(--text);
}
#leagueRegModal .close,
#regSuccessModal .close,
#loginRequiredModal .close,
#attachmentPreviewModal .close,
#privacyModal .close,
#termsModal .close {
  background: transparent;
  border: 0;
  font-size: 26px;
  line-height: 1;
  cursor: pointer;
  color: #c9ffe2;
  border-radius: 10px;
  padding: 6px 10px;
}
#leagueRegModal .close:hover,
#regSuccessModal .close:hover,
#loginRequiredModal .close:hover,
#attachmentPreviewModal .close:hover,
#privacyModal .close:hover,
#termsModal .close:hover { background: rgba(0,0,0,0.2); }

#leagueRegModal .reg-body,
#regSuccessModal .reg-body,
#loginRequiredModal .reg-body,
#attachmentPreviewModal .reg-body,
#privacyModal .reg-body,
#termsModal .reg-body {
  padding: 16px 18px 18px;
  color: var(--text);
}

#leagueRegModal .reg-footer,
#regSuccessModal .reg-footer,
#loginRequiredModal .reg-footer,
#attachmentPreviewModal .reg-footer,
#privacyModal .reg-footer,
#termsModal .reg-footer {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  padding-top: 12px;
}

.lbl { display:block; font-weight:700; margin:12px 0 6px; color: var(--text); }
.lbl.required::after { content:" *"; color:#ffb4b4; }
.inp, .sel {
  width:100%;
  padding:10px 12px;
  border:1px solid rgba(var(--line),0.45);
  border-radius:10px;
  background: rgba(0,0,0,0.25);
  color: var(--text);
  outline: none;
}
.inp::placeholder, .sel::placeholder { color: var(--muted); }
.sel option { color: #052a19; }

.row { display:flex; gap:12px; flex-wrap:wrap; }
.col { flex:1; min-width:220px; }
.mt-6 { margin-top:6px; }
.mt-10 { margin-top:10px; }
.space-between { justify-content:space-between; align-items:center; }

.players-list { display:flex; flex-direction:column; gap:8px; margin-top:8px; }

/* Player row now has: Name | Position | Jersey | Contact | Remove */
.player-row { display:grid; grid-template-columns: 1.2fr 1fr 0.6fr 1.2fr auto; gap:8px; }
@media (max-width: 800px) {
  .player-row { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 600px) {
  .player-row { grid-template-columns: 1fr; }
}

.btn { border:0; border-radius:10px; padding:10px 14px; cursor:pointer; font-weight:700; }
.btn-sm { padding:8px 12px; font-size:13px; }
.btn-light { background: rgba(0,0,0,0.25); color: var(--text); border:1px solid rgba(var(--line),0.35); }
.btn-secondary { background: rgba(3,74,31,0.85); color:#fff; border:1px solid rgba(var(--line),0.55); }
.btn-primary { background: #9ef0c3; color: #08331e; border:1px solid rgba(var(--line),0.6); }
.btn-danger { background:#e53935; color:#fff; }

.reg-toast { position: sticky; top: 0; padding: 10px 12px; border-radius: 10px; margin-bottom: 10px; opacity: 0; transition: opacity .3s; font-weight: 700; }
.toast-ok { background:#0f3a28; color:#bdf5d7; border:1px solid rgba(var(--line),0.45); }
.toast-error { background:#4a0f12; color:#ffd7db; border:1px solid rgba(255,99,71,0.35); }

.requirements h4 { margin:12px 0 6px; font-weight:800; color: var(--text); }
.requirements ul { margin-left: 18px; }
.chk { display:flex; align-items:center; gap:8px; }

#leagueRegModal .reg-dialog,
#regSuccessModal .reg-dialog,
#loginRequiredModal .reg-dialog,
#attachmentPreviewModal .reg-dialog,
#privacyModal .reg-dialog,
#termsModal .reg-dialog { position: relative; z-index: 2001; }

.hidden { display: none !important; }
/* --- Registration modal: allow vertical scrolling when tall --- */
#leagueRegModal .reg-dialog {
  max-height: 90vh;
  display: flex;
  flex-direction: column;
}
#leagueRegModal .reg-body {
  overflow-y: auto;
}

/* --- Players header + scroll area --- */
.players-wrap {
  margin-top: 8px;
  border: 1px solid rgba(var(--line), 0.35);
  border-radius: 10px;
  overflow: hidden;
  background: rgba(0,0,0,0.2);
}
.players-head {
  display: grid;
  grid-template-columns: 1.2fr 1fr 0.6fr 1.2fr auto;
  gap: 8px;
  padding: 8px;
  font-weight: 800;
  letter-spacing: .2px;
  background: rgba(3, 74, 31, 0.75);
  border-bottom: 1px solid rgba(var(--line), 0.35);
  position: sticky;
  top: 0;
  z-index: 1;
}
.players-scroll {
  max-height: 300px;
  overflow-y: auto;
  padding: 8px;
}
.players-head .actions-col { text-align: right; opacity: .65; }
@media (max-width: 800px) {
  .players-head { display: none; }
  .players-scroll { max-height: 360px; }
}

.requirements-gallery { display:flex; flex-wrap:wrap; gap:.5rem; }
.requirements-gallery .req-example {
  display:inline-block; padding:.4rem .6rem; border:1px solid rgba(var(--line),0.35);
  border-radius:8px; text-decoration:none; color:#dff6ea;
}
.requirements-gallery .req-example:hover { background: rgba(0,0,0,.15); }

/* Attachment preview area */
.attachment-preview { min-height: 300px; border:1px dashed rgba(var(--line),0.35); border-radius:12px; padding:10px; display:flex; align-items:center; justify-content:center; background: rgba(0,0,0,0.15); }
.attachment-preview iframe, .attachment-preview img { width:100%; height:65vh; border:0; border-radius:8px; object-fit:contain; }

/* Policy modal scroll body */
.policy-body { max-height: 70vh; overflow-y: auto; }
.policy-links a { color:#9ef0c3; text-decoration: underline; }

.btn-green {
  background: #9ef0c3 !important;
  color: #08331e !important;
  border: 1px solid rgba(var(--line), 0.6) !important;
  font-weight: 700;
}
.btn-green:hover { filter: brightness(1.05); }
.btn-green:active { transform: translateY(1px); }
.btn-green:focus { box-shadow: 0 0 0 0.2rem rgba(34,197,94,.25); }

#loginRequiredModal .reg-footer .btn-green,
#loginRequiredModal .reg-footer .btn-green:link,
#loginRequiredModal .reg-footer .btn-green:visited {
  background: #9ef0c3 !important;
  color: #08331e !important;
  border: 1px solid rgba(34,197,94,.6) !important;
  opacity: 1 !important;
  filter: none !important;
}
#loginRequiredModal .reg-footer .btn-green:hover,
#loginRequiredModal .reg-footer .btn-green:focus {
  background: #baf5d7 !important;
  color: #082018 !important;
  text-decoration: none !important;
}
/* Emphasize + improve wrapping for the "Want to join..." link */
#openRegistrationLink {
  display: inline-block;
  font-size: 1.15rem;   /* bigger text */
  font-weight: 800;
  letter-spacing: .2px;
  line-height: 1.35;
  text-align: justify;          /* justify on wider screens */
  text-justify: inter-word;     /* better spacing when justified */
  hyphens: auto;                /* allow hyphenation if supported */
  word-break: normal;           /* avoid ugly breaks */
  white-space: normal;          /* allow wrapping */
  max-width: 52ch;              /* keep an optimal text measure */
}

/* Keep the link on its own line when it needs space */
.join-wrap { width: 100%; }

/* Small screens: center it for cleaner reading */
@media (max-width: 640px) {
  #openRegistrationLink {
    font-size: 1.05rem;
    display: block;
    text-align: center;         /* switch from justify -> center on small screens */
    margin: 6px auto 0;
    max-width: 100%;
  }

  /* Stack the left/right bits so nothing feels cramped */
  .join-and-count {
    flex-direction: column;
    align-items: stretch;
    gap: 6px;
  }
}

/* --- League modal spacing improvements --- */
#leagueModal .league-search-input {
  margin-bottom: 12px;           /* space below the search bar */
}

#leagueModal .join-and-count {
  margin-top: 4px;               /* tiny breathing room above */
  margin-bottom: 12px;           /* space before the 3 columns */
}

#leagueModal .modal-columns {
  margin-top: 8px;               /* ensure consistent separation */
}

/* --- League Registration button theming --- */
:root{
  /* fallback in case you want to reuse the brand green elsewhere */
  --gsg-green: #0f5f3a;          /* dark green that matches theme */
  --gsg-green-700: #0c4a2f;      /* hover */
  --gsg-red-700: #7a0b0b;        /* dark red hover for remove */
}

/* Add Player */
#leagueRegModal #addPlayerBtn {
  background: var(--gsg-green);
  border-color: var(--gsg-green);
  color: #fff;
  display: inline-flex;          /* prevent stretching */
  align-items: center;
  justify-content: center;
  min-width: 140px;              /* narrower than full row */
  padding: 8px 14px;
  border-radius: 10px;
}
#leagueRegModal #addPlayerBtn:hover,
#leagueRegModal #addPlayerBtn:focus {
  background: var(--gsg-green-700);
  border-color: var(--gsg-green-700);
}

/* Submit Registration button (dark green) */
#leagueRegModal #regSubmitBtn,
#leagueRegModal .btn.btn-primary {
  background: var(--gsg-green);
  border-color: var(--gsg-green);
  color: #fff;
}
#leagueRegModal #regSubmitBtn:hover,
#leagueRegModal .btn.btn-primary:hover {
  background: var(--gsg-green-700);
  border-color: var(--gsg-green-700);
}

/* Terms modal Close button = green */
#termsModal .btn.btn-primary {
  background: var(--gsg-green);
  border-color: var(--gsg-green);
  color: #fff;
}
#termsModal .btn.btn-primary:hover {
  background: var(--gsg-green-700);
  border-color: var(--gsg-green-700);
}

/* ========== FINAL TWEAKS (append at end) ========== */

/* Color tokens (reuseable) */
:root{
  --gsg-green: #0f5f3a;
  --gsg-green-700: #0c4a2f;
  --gsg-red-700: #8f1111;  /* dark red for Remove */
}

/* 1) Add Player: keep it compact + green */
#leagueRegModal #addPlayerBtn{
  width: auto !important;        /* defeat any accidental 100% widths */
  max-width: 180px;              /* compact button */
  display: inline-flex;          /* keep content-tight */
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  background: var(--gsg-green);
  border-color: var(--gsg-green);
  color: #fff;
  padding: 8px 14px;
  border-radius: 10px;
}
#leagueRegModal #addPlayerBtn:hover,
#leagueRegModal #addPlayerBtn:focus{
  background: var(--gsg-green-700);
  border-color: var(--gsg-green-700);
}

/* Ensure the label + button row doesn't force weird wrapping */
#leagueRegModal .row.space-between{
  align-items: center;
}
#leagueRegModal .row.space-between .lbl{ margin-bottom: 0; }

/* 2) Remove Player: dark red */
#leagueRegModal .remove-player{
  background: var(--gsg-red-700) !important;
  border-color: var(--gsg-red-700) !important;
  color: #fff !important;
  padding: 6px 10px;
  border-radius: 10px;
}
#leagueRegModal .remove-player:hover,
#leagueRegModal .remove-player:focus{
  filter: brightness(.92);
}

/* 3) File input's browse button: green + white text */
#leagueRegModal input[type="file"]::file-selector-button{
  background: var(--gsg-green);
  color: #fff;
  border: none;
  padding: 8px 12px;
  margin-right: 10px;
  border-radius: 10px;
  cursor: pointer;
}
#leagueRegModal input[type="file"]:hover::file-selector-button{
  background: var(--gsg-green-700);
}

/* Safari / old WebKit fallback */
#leagueRegModal input[type="file"]::-webkit-file-upload-button{
  background: var(--gsg-green);
  color: #fff;
  border: none;
  padding: 8px 12px;
  margin-right: 10px;
  border-radius: 10px;
  cursor: pointer;
}
#leagueRegModal input[type="file"]::-webkit-file-upload-button:hover{
  background: var(--gsg-green-700);
}

/* ===== Center + size control for the "Add Player" button ===== */
:root{ --add-player-width: 400px; }
@media (max-width: 600px){
  :root{ --add-player-width: 160px; }
}


/* Put the label on its own line, then center the button beneath it */
#leagueRegModal .row.space-between{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-start;   /* label stays left */
}

/* Make the "Team Players" label take full row, aligned left */
#leagueRegModal .row.space-between .lbl{
  flex: 0 0 100%;
  margin-bottom: 6px;            /* small gap above the button */
}

/* Center the Add Player button and control its length */
#leagueRegModal #addPlayerBtn{
  display: block;
  margin: 0 auto;                /* <-- centers the button */
  width: var(--add-player-width, auto) !important;  /* fixed width if you set it */
  min-width: var(--add-player-min);                 /* keeps it from getting too small */
  max-width: none !important;    /* cancel any earlier max-width rules */
}


/* Force modal primary buttons to use the GSG green style */
.reg-modal .btn-primary,
#attachmentPreviewModal #attDownload {
  background: #0b6b3a !important;   /* deep dark green */
  color: #ffffff !important;         /* white text */
  border: 1px solid #0a5c32 !important; 
}

/* ===== File size hint + modal styling (similar to User_Bookings.css) ===== */
.limit-note-user{
  display:block;
  margin-top:6px;
  font-size:13px;
  background:#0f2a20;
  border:1px dashed #33cc85;
  padding:6px 10px;
  border-radius:8px;
  color:#eafff3 !important;
}

/* Ensure Bootstrap modal is on top of the glassmorphism layout */
.modal-backdrop{ 
  z-index:2000 !important; 
}
.modal{ 
  z-index:2005 !important; 
}

/* Dark green modal theme */
.modal-darkgreen{
  background:#0b1410;
  color:#e8f5ee;
  border:1px solid #234735;
  box-shadow:0 20px 40px rgba(0,0,0,.45);
  border-radius:14px;
}
.modal-darkgreen .modal-header,
.modal-darkgreen .modal-footer{
  background:#0f2a20;
  color:#e8f5ee;
}
.modal-darkgreen .modal-title{
  color:#e8f5ee;
}
.modal-darkgreen .modal-body{
  background:#0b1410 !important;
  color:#e8f5ee !important;
}

/* OK button + white close icon */
.btn-ok-green{
  background:#15803d;
  color:#fff;
  border:none;
  border-radius:10px;
  padding:.45rem .9rem;
}
.btn-ok-green:hover{
  background:#166534;
}
.btn-close-white{
  filter: invert(1) grayscale(100%);
}


/* Fix: remove white box around "File too large" modal on League page */
#leagueFileSizeModal .modal-content {
  background: #0b1410 !important;    /* same dark green as inside */
  border: none !important;           /* remove white border */
  box-shadow: 0 20px 40px rgba(0,0,0,.45); /* keep the shadow */
}

/* Remove borders/lines inside the League "File too large" modal */
#leagueFileSizeModal .modal-content{
  border: none !important;          /* no outer border */
}

#leagueFileSizeModal .modal-header,
#leagueFileSizeModal .modal-footer{
  border: none !important;          /* remove top/bottom divider lines */
}

#leagueFileSizeModal .modal-body{
  border: none !important;          /* make sure body has no border */
}