/*--------------------------------------------------------------
# Font & Color Variables
	#B7E402 Lime (headings/links)
	#D4F468 Light-Lime
	#5EA401 Olive-Green (buttons/accent, Golf+)
	#B7E402 Light-Olive (button hover, = Lime)
	#28A745 Green
	#DC3545 Red
	#E5E7EB Light-Gray
	#92969C	Medium-Gray
	#212529 Dark-Gray
	#0D0D0D Near-Black
	#F9FAFB Near-White
	#010203 Footer ONLY
	
	GOLF+ COLOR
	#5EA401
	
	WALKABOUT COLOR
	#EEB002
	
	Transparancy Percetanges Letter
	FF = 100%
	CC = 80%
	99 = 60%
	80 = 50%
	66 = 40%
	33 = 20%
--------------------------------------------------------------*/
/* Fonts */
:root {
  --default-font: "Roboto",  system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  --heading-font: "Roboto",  sans-serif;
  --display-font: "Anton", "Arial Narrow", sans-serif; /* Scoreboard-style numerals & headings */
  --mono-font: "JetBrains Mono", "SFMono-Regular", Consolas, monospace; /* Tabular data: VC, stats, handicap */
}

/* Global Colors - The following color variables are used throughout the website. Updating them here will change the color scheme of the entire website */
:root {
  --background-color: #000; /* Background color (BALCK) for the entire website, including individual sections */
  --default-color: #92969C; /* Default color (DARK GRAY) used for the majority of the text content across the entire website */
  --heading-color: #B7E402; /* Color (LIME) for headings, subheadings and title throughout the website */
  --accent-color: #5EA401; /* Accent color (OLIVE-GREEN) that represents your brand on the website. It's used for buttons, links, and other elements that need to stand out */
  --surface-color: #9CA3AF; /* The surface color is used as a background of boxed elements within sections, such as cards, icon boxes, or other elements that require a visual separation from the global background. */
  --contrast-color: #ffffff; /* Contrast color for text, ensuring readability against backgrounds of accent, heading, or default colors. */
}

/* Prevent horizontal overflow from forcing mobile Safari to shrink the whole page (which then "zooms in" when an input is focused) */
html, body {
  max-width: 100%;
  overflow-x: hidden;
}

/* WebKit/iOS Safari quirk: when a stylesheet has any :hover rule (this one has ~50,
   for tiles/buttons/rows added during the redesign), the first tap on a hover-styled
   element only "arms" :hover and needs a second tap to actually fire the click -
   unless something on the page explicitly declares cursor:pointer. This one rule
   fixes it site-wide without touching every individual :hover selector. */
html { cursor: pointer; }

/* TGCVR Clubhouse Palette - formalizes the documented brand colors above (top of file)
   as variables: Lime = primary/identity, Gold = action/accent, Silver = neutral text. */
:root {
  --heading-color-light: #D4F468; /* Light-Lime: glow/hover variant of --heading-color */
  --accent-color-light: #B7E402;  /* Light-Olive (=Lime): glow/hover variant of --accent-color */
  --ink-color: #E5E7EB;           /* Bright silver text on dark surfaces */
  --success-color: #28A745;
  --danger-color: #DC3545;
  --golfplus-color: #5EA401;
  --walkabout-color: #EEB002;
  --near-black: #0D0D0D;
  --line-color: rgba(229, 231, 235, 0.14);
  --line-color-strong: rgba(229, 231, 235, 0.26);
}

/* Smooth scroll */
:root {
  scroll-behavior: smooth;
}

/*--------------------------------------------------------------
# General Styling & Shared Classes
--------------------------------------------------------------*/
body {
  color: var(--default-color);
  background-color: var(--background-color);
  font-family: var(--default-font);
  color-scheme: dark;
}

a {
  color: var(--heading-color);
  text-decoration: none;
  transition: 0.3s;
}

a:hover {
  color: color-mix(in srgb, var(--heading-color), transparent 25%);
  text-decoration: none;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  color: var(--heading-color);
  font-family: var(--heading-font);
}

/* PHP Email Form Messages
------------------------------*/
.php-email-form .loading {
  display: none;
  background: var(--surface-color);
  text-align: center;
  padding: 15px;
  margin-bottom: 24px;
}

.php-email-form .loading:before {
  content: "";
  display: inline-block;
  border-radius: 50%;
  width: 24px;
  height: 24px;
  margin: 0 10px -6px 0;
  border: 3px solid var(--accent-color);
  border-top-color: var(--surface-color);
  animation: php-email-form-loading 1s linear infinite;
}

@media (max-width: 768px) {
  .memberAccess {
    padding: 0 15px;
  }
}

@media (max-width: 768px) {
  .php-email-form .loginForm {
    padding: 0 15px;
  }
}

@keyframes php-email-form-loading {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

/*--------------------------------------------------------------
# Global Header
--------------------------------------------------------------*/
.header {
  color: var(--default-color);
  background-color: var(--background-color);
  padding: 20px 0;
  transition: all 0.5s;
  z-index: 997;
}

.header .logo {
  line-height: 1;
}

.header .logo img {
  max-height: 32px;
  margin-right: 8px;
}

.header .logo h1 {
  font-size: 30px;
  margin: 0;
  font-weight: 300;
  color: var(--heading-color);
}

.scrolled .header {
  box-shadow: 0px 0 18px rgba(0, 0, 0, 0.1);
}

/*--------------------------------------------------------------
# Global Footer
--------------------------------------------------------------*/
.footer {
  background-color: var(--background-color);
  color: var(--default-color);
  padding: 60px 0;
  font-size: 14px;
  border-top: 1px solid color-mix(in srgb, var(--default-color), transparent 80%);
}

.footer a,
.ssd {
  color:#B7E402 !important;
}

.footer a:hover,
.ssd:hover {
  color:#FF6600 !important;
}

.footer .copyright {
  margin-top: 50px;
  position: relative;
  padding-top: 20px;
  border-top: none;
}

.footer .copyright p,
.footer .copyright .credits {
  margin: 2px 0;
}

.footer .btn-learn-more {
  background-color: var(--accent-color);
  border-radius: 30px;
  padding: 8px 30px;
  border: 2px solid transparent;
  transition: 0.3s all ease-in-out;
  font-size: 14px;
  color: var(--contrast-color) !important;
}

.footer .btn-learn-more:hover {
  border-color: var(--accent-color);
  background-color: #010203;
  color: var(--accent-color) !important;
}

/*--------------------------------------------------------------
# Preloader
--------------------------------------------------------------*/
#preloader {
  position: fixed;
  inset: 0;
  z-index: 999999;
  overflow: hidden;
  background: var(--background-color);
  transition: all 0.6s ease-out;
}

#preloader:before {
  content: "";
  position: fixed;
  top: calc(50% - 30px);
  left: calc(50% - 30px);
  border: 6px solid #ffffff;
  border-color: var(--accent-color) transparent var(--accent-color) transparent;
  border-radius: 50%;
  width: 60px;
  height: 60px;
  animation: animate-preloader 1.5s linear infinite;
}

@keyframes animate-preloader {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

/*--------------------------------------------------------------
# Scroll Top Button
--------------------------------------------------------------*/
.scroll-top {
  position: fixed;
  visibility: hidden;
  opacity: 0;
  right: 15px;
  bottom: 15px;
  z-index: 99999;
  background-color: var(--accent-color);
  border: 2px solid transparent;
  width: 40px;
  height: 40px;
  border-radius: 4px;
  transition: all 0.4s;
}

.scroll-top i {
  font-size: 24px;
  color: var(--contrast-color);
  line-height: 0;
  transition: color 0.4s;
}

.scroll-top:hover {
  background-color: transparent;
  border-color: var(--accent-color);
}
.scroll-top:hover i {
  color: var(--accent-color);
}

.scroll-top.active {
  visibility: visible;
  opacity: 1;
}

/*--------------------------------------------------------------
# Disable aos animation delay on mobile devices
--------------------------------------------------------------*/
@media screen and (max-width: 768px) {
  [data-aos-delay] {
    transition-delay: 0 !important;
  }
}

/*--------------------------------------------------------------
# Global Sections
--------------------------------------------------------------*/
section,
.section {
  color: var(--default-color);
  background-color: var(--background-color);
  padding: 60px 0;
  scroll-margin-top: 100px;
  overflow: clip;
}

@media (max-width: 1199px) {

  section,
  .section {
    scroll-margin-top: 66px;
  }
}

/*--------------------------------------------------------------
# Global Section Titles
--------------------------------------------------------------*/
.section-title {
  text-align: center;
  padding-bottom: 30px;
  position: relative;
}

.section-title h2 {
  font-size: 22px;
  font-weight: 500;
  margin-bottom: 0;
}

.section-title p {
  font-size: 15px;
  margin-bottom: 10px;
}

/*--------------------------------------------------------------
# About 2 Section (only .about-2 p is actually used - courseList.php/tourneyRank.php/
# tourneyWrank.php's course-list section - everything else here was for a homepage-
# template layout - subtitle/title/lead/buttons - that this section's markup never used)
--------------------------------------------------------------*/
.about-2 p {
  line-height: 1.7;
  color: var(--default-color);
}

/*--------------------------------------------------------------
# Faq Section
--------------------------------------------------------------*/
.faq p {
  line-height: 1.7;
  color: var(--default-color);
}

.accordion-body p,
.accordion-body li {
  font-size: 16px;
}

/* The centered layout (flex/justify-content:center/text-align:center) now lives on
   the shared .custom-accordion .accordion-items h2 .btn-link rule further down -
   it's the site-wide intended look, not leftover cruft (an earlier cleanup pass
   wrongly assumed otherwise and briefly broke it). The chevron icon rules below are
   still needed here - they're the only expand/collapse indicator these buttons have. */
.faq .custom-accordion .accordion-items {
  overflow: hidden;
}

.faq .custom-accordion .accordion-items .btn-link {
  width: 100%;
  padding: 15px 0;
  text-decoration: none;
  border: none;
  position: relative;
}

/* Icon positioning */
.faq .custom-accordion .accordion-items .btn-link:before {
  content: "\f282"; /* default icon */
  font-family: "bootstrap-icons" !important;
  margin-right: 10px;      /* space between icon and text */
  position: relative;       /* relative so it flows with flex */
  top: auto;                /* reset top */
  transform: none;          /* reset transform */
  color: var(--default-color);
  font-style: normal;
  font-weight: normal !important;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
}

.faq .custom-accordion .accordion-items .btn-link[aria-expanded=true] {
  color: var(--accent-color);
}

/* Change icon when expanded */
.faq .custom-accordion .accordion-items .btn-link[aria-expanded="true"]:before {
  font-family: "bootstrap-icons" !important;
  content: "\f286";            /* expanded icon */
  color: var(--accent-color);
}

.faq .custom-accordion .accordion-items .accordion-body {
  padding: 20px;
  color: var(--default-color);
}

/*--------------------------------------------------------------
# Contact Section
--------------------------------------------------------------*/
/* Make SELECT match theme input styles exactly */
.contact .info {
  background-color: #000 !important;
	border: 1px solid #111 !important;
	border-radius: 10px !important;
  padding: 40px;
  box-shadow: 
  0px 2px 10px rgba(0, 0, 0, 0.6),
  0px 0px 8px rgba(255, 255, 255, 0.05) !important;
  overflow: hidden;
}

.contact .info h3 {
  font-weight: 600;
  font-size: 24px;
}

.contact .info p {
  color: var(--default-color);
  margin-bottom: 30px;
  font-size: 15px;
}

.contact .info-item+.info-item {
  padding-top: 20px;
  margin-top: 20px;
  border-top: 1px solid color-mix(in srgb, var(--default-color), transparent 90%);
}

.contact .info-item i {
  font-size: 24px;
  color: var(--accent-color);
  transition: all 0.3s ease-in-out;
  margin-right: 20px;
}

.contact .info-item h4 {
  padding: 0;
  font-size: 18px;
  line-height: 24px;
  font-weight: 600;
  margin-bottom: 5px;
}

.contact .info-item p {
  padding: 0;
  margin-bottom: 0;
  font-size: 14px;
  color: color-mix(in srgb, var(--default-color), transparent 40%);
}

/* ── Member sidebar refresh (gallery/branded/gamesCenter/trophy left column) ──
   Shared version of what was trophy.php-only .hof-sidebar CSS - promoted here
   so every left-column "info" card on these contact-layout pages gets the same
   uppercase accent-bordered heading, soft-gray body copy, and orange/gray
   active-vs-inactive nav-link treatment instead of each page's own ad hoc
   inline colors. */
.member-sidebar h3 {
  text-transform: uppercase;
  letter-spacing: 1px;
  padding-bottom: 12px;
  border-bottom: 2px solid #B7E402;
  margin-bottom: 20px;
}

.member-sidebar > p {
  color: #9CA3AF !important;
}

.member-sidebar .info-item h4 {
  text-transform: uppercase;
  letter-spacing: 0.75px;
  font-size: 15px !important;
}

.member-sidebar .info-item p {
  color: #9CA3AF !important;
}

.member-sidebar .side-link {
  font-size: 13px;
  display: block;
  margin-bottom: 4px;
}

.member-sidebar .side-link-active,
.member-sidebar .side-link-inactive {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  text-decoration: none;
  transition: color 0.2s ease;
}

.member-sidebar .side-link-active::before,
.member-sidebar .side-link-inactive::before {
  content: "\203A";
  font-size: 14px;
}

.member-sidebar .side-link-active {
  color: #B7E402;
}

.member-sidebar .side-link-active:hover {
  color: #FFB066;
}

.member-sidebar .side-link-inactive {
  color: #9CA3AF;
}

.member-sidebar .side-link-inactive:hover {
  color: #B7E402;
}

.notice-box {
  color: #e03c31;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 8px;
  padding-top: 24px;
}
.notice-box i {
  font-size: 24px;
}
.notice-box p {
  margin: 0;
	padding: 0 20px;
}

.contact .php-email-form {
  width: 100%;
}

.contact .php-email-form .form-group {
  padding-bottom: 8px;
}

.contact .php-email-form input[type=text],
.contact .php-email-form input[type=email],
.contact .php-email-form input[type=password],
.contact .php-email-form input[type=number],
.contact .php-email-form input[type=date],
.contact .php-email-form input[type=time],
.contact .php-email-form select,
.contact .notform select,
.contact .php-email-form textarea.form-control {
  color: var(--default-color);
  background-color: var(--surface-color);
  border-radius: 0px;
  box-shadow: none;
  font-size: 14px;
  border-color: color-mix(in srgb, var(--default-color), transparent 75%);
}

.contact .php-email-form textarea.form-control {
	border-color: rgba(33, 37, 41, 0.25);
}

.contact .php-email-form input[type=text]:focus,
.contact .php-email-form input[type=email]:focus,
.contact .php-email-form input[type=password]:focus,
.contact .php-email-form input[type=number]:focus,
.contact .php-email-form input[type=date]:focus,
.contact .php-email-form input[type=time]:focus,
.contact .php-email-form select:focus,
.contact .notform select:focus,
.contact .php-email-form textarea.form-control:focus {
  border-color: var(--accent-color);
}

.contact .php-email-form input[type=text]::placeholder,
.contact .php-email-form input[type=email]::placeholder,
.contact .php-email-form input[type=password]::placeholder,
.contact .php-email-form input[type=number]::placeholder,
.contact .php-email-form input[type=date]::placeholder,
.contact .php-email-form input[type=time]::placeholder,
.contact .php-email-form textarea.form-control::placeholder {
  color: color-mix(in srgb, var(--default-color), transparent 70%);
}

.contact .php-email-form input[type=text],
.contact .php-email-form input[type=email],
.contact .php-email-form input[type=password],
.contact .php-email-form input[type=number],
.contact .php-email-form input[type=date],
.contact .php-email-form input[type=time],
.contact .notform select
.contact .php-email-form select {
  height: 48px;
  padding: 10px 15px;
}

.contact .php-email-form textarea.form-control {
  padding: 10px 12px;
  height: 290px;
}

.contact .php-email-form button[type=submit] {
  background: var(--accent-color);
  color: var(--contrast-color);
  border: 2px solid transparent;
  padding: 8px 30px;
  transition: 0.4s;
  border-radius: 30px;
}

.contact .php-email-form button[type=submit]:hover {
  background: transparent;
  border-color: var(--accent-color);
  color: var(--accent-color);
}

.contact .php-email-form button.btn-outline-danger[type=submit] {
  background: transparent;
  color: #dc3545;
  border: 1px solid #dc3545;
}

.contact .php-email-form button.btn-outline-danger[type=submit]:hover {
  background: #dc3545;
  color: #fff;
}

.contact .php-email-form .form-control {
  border-color: var(--accent);
}

.contact .php-email-form .form-control:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 0.25rem rgba(94,164,1,.25); /* match Bootstrap focus style */
}

/*--------------------------------------------------------------
# Vegas Dark Theme (Members)
--------------------------------------------------------------*/

body.contact-page {
  background: #000 !important;
  background-image:
    radial-gradient(ellipse at 18% 50%, rgba(94,164,1,.07) 0%, transparent 55%),
    radial-gradient(ellipse at 82% 15%, rgba(94,164,1,.04) 0%, transparent 50%);
  background-attachment: fixed;
}
.main { background: transparent !important; }
#faq.section { background: transparent !important; overflow: visible !important; }

/* ── Casino Sign ───────────────────────── */
.casino-sign-wrap {
  text-align: center;
  padding: 1rem 1rem 2.25rem;
}
.casino-sign {
  display: inline-block;
  background: linear-gradient(180deg, #141414 0%, #0d0d0d 100%);
  border: 2px solid #2a2a2a;
  border-radius: 18px;
  padding: .75rem 2.5rem 1rem;
  box-shadow:
    0 0 30px rgba(94,164,1,.2),
    0 0 80px rgba(94,164,1,.07),
    inset 0 1px 0 rgba(255,255,255,.04);
  min-width: 260px;
  max-width: calc(100vw - 2rem);
  word-break: break-word;
  overflow: hidden;
}
@media (max-width: 480px) {
  .casino-sign { padding: .75rem 1rem 1rem; }
}
.marquee-row {
  display: flex;
  justify-content: center;
  gap: 9px;
  padding: 5px 0;
}
.bulb {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #1a1400;
  flex-shrink: 0;
}
@keyframes chaseLit {
  0%,  30%  { background: #B7E402; box-shadow: 0 0 5px #B7E402, 0 0 12px #ffaa00; }
  31%, 100% { background: #1a1400; box-shadow: none; }
}
.casino-pre {
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .45em;
  color: #555;
  text-transform: uppercase;
  margin-bottom: .15rem;
}
.casino-title {
  font-size: clamp(2rem, 8vw, 3.8rem);
  font-weight: 900;
  letter-spacing: .22em;
  color: #fff;
  line-height: 1;
  padding: .2rem 0;
  text-shadow:
    0 0 8px  #5EA401,
    0 0 20px #5EA401,
    0 0 45px #ff4400,
    0 0 90px rgba(255,80,0,.35);
  animation: neonFlicker 6s ease-in-out infinite;
}
@keyframes neonFlicker {
  0%,  88%, 91%, 94%, 100% {
    text-shadow: 0 0 8px #5EA401, 0 0 20px #5EA401, 0 0 45px #ff4400, 0 0 90px rgba(255,80,0,.35);
    opacity: 1;
  }
  89%, 93% { text-shadow: none; opacity: .7; }
}
.casino-sub { font-size: .8rem; color: #555; margin-top: .4rem; letter-spacing: .04em; }
.casino-sub .vc-balance {
  color: var(--accent-color-light) !important;
  font-weight: 700;
  font-size: 1.05rem;
  font-family: var(--mono-font);
  text-shadow: 0 0 8px rgba(94,164,1,.6), 0 0 20px rgba(94,164,1,.35);
}

/* ── Accordion (Clubhouse: Anton headers, rounded cards, glow) ──────────── */
.custom-accordion { margin-top: 24px; }
.custom-accordion .accordion-items {
  background: #111 !important;
  border: 1px solid #222 !important;
  border-radius: 16px !important;
  margin-bottom: 10px !important;
  box-shadow: 0 8px 24px -16px rgba(0,0,0,.75) !important;
  overflow: hidden !important;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.custom-accordion .accordion-items:hover {
  border-color: color-mix(in srgb, var(--accent-color) 55%, #222) !important;
}
.custom-accordion .accordion-items:has(.btn-link[aria-expanded="true"]) {
  border-color: var(--accent-color) !important;
}
.accordion-body {
  background: #141414 !important;
  color: #bbb !important;
  border-top: 1px solid #1f1f1f !important;
}
.custom-accordion .accordion-items h2 .btn-link,
.faq .custom-accordion .accordion-items .btn-link {
  display: flex;
  justify-content: center;
  align-items: center;
  background: #111 !important;
  width: 100%;
  text-align: center;
  text-decoration: none;
  padding: 1rem 1.25rem;
  font-family: var(--display-font) !important;
  font-weight: 400 !important;
  font-size: 1.05rem !important;
  letter-spacing: .02em !important;
  color: var(--ink-color, #E5E7EB) !important;
  border-radius: 16px 16px 0 0 !important;
  transition: color .1s ease, background .1s ease;
}
.custom-accordion .accordion-items h2 .btn-link:hover {
  color: var(--accent-color-light, #B7E402) !important;
  background: color-mix(in srgb, var(--accent-color, #5EA401) 10%, #111) !important;
}
.custom-accordion .accordion-items h2 .btn-link[aria-expanded="true"] {
  color: var(--accent-color, #5EA401) !important;
  background: color-mix(in srgb, var(--accent-color, #5EA401) 14%, #111) !important;
  box-shadow: inset 0 -1px 0 var(--line-color, #222);
}
/* Walkabout FAQ/round accordions (faqWhow.php, faqWtourney.php, teetimesW.php,
   tourneyWregister/Wrounds/Wscore.php) - gold theme instead of the generic
   accent-color green, same idea as .quick-col.tr-walkabout for Quick Access. */
.custom-accordion.tr-walkabout .accordion-items:hover {
  border-color: color-mix(in srgb, var(--walkabout-color) 55%, #222) !important;
}
.custom-accordion.tr-walkabout .accordion-items:has(.btn-link[aria-expanded="true"]) {
  border-color: var(--walkabout-color) !important;
}
.custom-accordion.tr-walkabout .accordion-items h2 .btn-link:hover {
  color: var(--walkabout-color) !important;
  background: color-mix(in srgb, var(--walkabout-color) 10%, #111) !important;
}
.custom-accordion.tr-walkabout .accordion-items h2 .btn-link[aria-expanded="true"] {
  color: var(--walkabout-color) !important;
  background: color-mix(in srgb, var(--walkabout-color) 14%, #111) !important;
  box-shadow: inset 0 -1px 0 var(--line-color, #222);
}
.custom-accordion .accordion-items .accordion-body,
.accordion-body {
  border-radius: 0 0 16px 16px;
  padding: 1.3rem 1.4rem !important;
}

/* ── Cards ─────────────────────────────── */
.card { background: #181818 !important; border-color: #252525 !important; color: #bbb !important; }
.tourney-card.selected { background: #1f1200 !important; border-color: #5EA401 !important; }
.tourney-card.locked   { opacity: .35 !important; }
.fw-bold { color: #ddd !important; }

/* ── Tables ────────────────────────────── */
.table {
  color: var(--ink-color, #E5E7EB) !important;
  --bs-table-color: var(--ink-color, #E5E7EB);
  --bs-table-bg: #181818;
  --bs-table-border-color: #000;
  font-size: .85rem;
}
.table td, .table th { border-color: #000 !important; color: var(--ink-color, #E5E7EB) !important; }

/* Tables inside accordions: only horizontal row dividers (no vertical grid
   lines), same shape as the matchplay bracket's .round-table. Lines use the
   light-gray translucent token so they're actually visible against the
   dark accordion background — plain #000 (the site default) nearly
   vanishes there, which is why lime got tried first, but coloring every
   cell/row border lime (via --bs-table-border-color + a td/th override) is
   too much for the eyes. The lime accent stays reserved for the
   .table-card wrapper's own outer frame below. */
.accordion-body .table,
.accordion-body .misc-rounds-table {
  --bs-table-border-color: var(--line-color-strong, rgba(229, 231, 235, 0.26));
}
.accordion-body .table td,
.accordion-body .table th,
.accordion-body .misc-rounds-table th,
.accordion-body .misc-rounds-table td {
  border-left: none !important;
  border-right: none !important;
  border-top: none !important;
  border-color: var(--line-color-strong, rgba(229, 231, 235, 0.26)) !important;
}

/* ── Schedule tables (myschedules.php) ── */
.tournaments-container .table {
  --bs-table-color: var(--ink-color, #E5E7EB);
  --bs-table-bg: #181818;
  --bs-table-striped-bg: #222222;
  --bs-table-striped-color: var(--ink-color, #E5E7EB);
  --bs-table-border-color: #000;
}
.tournaments-container .table thead th {
  background-color: #111 !important;
  color: #B7E402 !important;
}

/* ── Forms ─────────────────────────────── */
.form-select, .form-control, select {
  background-color: #1c1c1c !important;
  color: #E5E7EB !important;
  -webkit-text-fill-color: #E5E7EB !important;
  border-color: #333 !important;
  color-scheme: dark;
}
.form-select:focus, .form-control:focus, select:focus {
  background-color: #222 !important;
  border-color: #5EA401 !important;
  box-shadow: 0 0 0 .2rem rgba(94,164,1,.2) !important;
  color: #fff !important;
}
.form-select option, select option {
  background-color: #1c1c1c;
  color: #E5E7EB;
}
.form-select option:disabled, select option:disabled {
  color: #666;
}
.form-label, .fw-semibold { color: #999 !important; }
.text-muted   { color: #888 !important; }
.section-label { color: #B7E402 !important; }

/* Site-wide continuity pass: plain <label> tags (no .form-label class) and headings
   inside form/accordion content areas didn't inherit any of the new design tokens.
   These retroactively bring every page using this common pattern onto the dashboard's look. */
.php-email-form label,
.accordion-body label,
.card-body label {
  display: block; color: #92969C; font-weight: 600; font-size: .82rem;
  margin-bottom: 4px; text-transform: uppercase; letter-spacing: .04em;
}
.accordion-body h3, .accordion-body h4, .accordion-body h5,
.card-body h3, .card-body h4, .card-body h5 {
  font-family: var(--display-font); color: var(--ink-color); font-weight: 400; letter-spacing: .02em;
}
input[type="file"]::file-selector-button,
input[type="file"]::-webkit-file-upload-button {
  background-color: #333 !important;
  color: #E5E7EB !important;
  border: 1px solid #555 !important;
  border-radius: 4px !important;
  padding: 4px 12px !important;
  margin-right: 10px !important;
  cursor: pointer !important;
}
input[type="file"]::file-selector-button:hover,
input[type="file"]::-webkit-file-upload-button:hover {
  background-color: #5EA401 !important;
  border-color: #5EA401 !important;
  color: #fff !important;
}

/* ── Bet / type buttons ─────────────────── */
.quick-btn { background: #1c1c1c !important; border-color: #303030 !important; color: #999 !important; }
.quick-btn:hover  { border-color: #5EA401 !important; color: #5EA401 !important; }
.quick-btn.active-bet { background: #5EA401 !important; border-color: #5EA401 !important; color: #fff !important; }

/* ── Alerts ─────────────────────────────── */
.alert-success { background: rgba(40,167,69,.15) !important; border-color: #28a745 !important; color: #55cc77 !important; }
.alert-danger  { background: rgba(220,53,69,.15)  !important; border-color: #dc3545 !important; color: #ff7070 !important; }

/* ── Wager table ────────────────────────── */
.wager-thead th { background-color: #331000 !important; }
.odds-table td { color: #bbb !important; }
.odds { color: #fff !important; }

/* ── Header ─────────────────────────────── */
#header {
  background: color-mix(in srgb, #000 90%, transparent) !important;
  backdrop-filter: blur(10px);
  box-shadow: 0 2px 24px rgba(0,0,0,.75) !important;
}
#header::after {
  content: "";
  position: absolute; bottom: -1px; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, var(--heading-color), transparent 45%, transparent 55%, var(--accent-color));
  opacity: .55;
}
#header .sitename { color: var(--ink-color) !important; }

/* ── Footer ─────────────────────────────── */
#footer {
  background: #010203 !important;
  border-top: none !important;
  position: relative;
}
#footer::before {
  content: "";
  position: absolute; top: -1px; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, var(--heading-color), transparent 45%, transparent 55%, var(--accent-color));
  opacity: .55;
}
#footer,
#footer p,
#footer span { color: #666 !important; }
#footer .sitename { color: var(--heading-color) !important; }
#footer .btn-learn-more {
  border-color: #5EA401 !important;
  color: #fff !important;
}
#footer .btn-learn-more:hover {
  background: #010203 !important;
  color: var(--accent-color) !important;
}
/* .footer a { color: var(--default-color) !important; } (above) has higher specificity
   than .qa-logout's own color rule (class+tag beats a plain class, even !important vs
   !important) and was silently winning - #footer .qa-logout needs the id to beat it. */
#footer .qa-logout { color: #ff6b6b !important; }
#footer .qa-logout:hover { color: #fff !important; }

/* ── Section Titles ─────────────────────── */
body.contact-page h4,
body.contact-page h5 { color: #B7E402 !important; }

/* ── Message Threads (Global Chat / Personal Messages) ───────────────────── */
/* .message-section (thread column wrapper) stays a PLAIN wrapper, not a panel -
   individual .message-card tiles below need to sit directly on the page's pure
   black background to get real contrast, the same trick .stat-tile/.trophy use.
   A #141414 panel behind #141414 cards flattened that contrast to nothing, which
   is what made messages hard to tell apart the first time this was tried.
   .messages-panel (the compose column - a single box, not a repeated list, so
   this contrast problem doesn't apply) keeps the full panel treatment. */
.messages-panel {
  background: #141414; border: 1px solid var(--line-color); border-radius: 20px;
  padding: 20px; box-shadow: 0 20px 50px -20px rgba(0,0,0,.85);
}
.messages-panel .panel-title {
  /* body.contact-page h5 { color:#B7E402 !important; } (legacy rule, still used by
     untouched pages) would otherwise win over this despite lower specificity. */
  font-family: var(--display-font); font-size: 1.1rem; color: var(--ink-color) !important;
  font-weight: 400; letter-spacing: .02em; margin: 0 0 14px; text-align: center;
}
/* "MESSAGE THREAD" micro-label - same mono-uppercase treatment as .stat-tile .l / th.cell */
.message-section.h-100 > p.text-center {
  font-family: var(--mono-font); font-size: .72rem; text-transform: uppercase;
  letter-spacing: .08em; color: #6E8478; margin-bottom: 14px;
}
/* Each message/thread gets its own tile (same recipe as .stat-tile/.trophy), so
   the boundary between one message and the next is unambiguous. */
.message-card {
  background: #141414; border: 1px solid var(--line-color); border-radius: 14px;
  padding: 14px 16px; margin-bottom: 12px; color: var(--ink-color) !important;
  font-family: var(--default-font) !important;
}
/* These are literal account usernames (s.username AS sender_name), not display names -
   mono, matching .player-handle/the username column on memberList.php/memberCompare.php. */
.message-card strong { color: var(--heading-color-light) !important; font-size: .95rem; font-family: var(--mono-font) !important; font-weight: 600 !important; }
/* Timestamp had zero typographic treatment (bare 12px span, default font/color) -
   same mono-muted "meta text" treatment as .player-handle/dt labels elsewhere. */
.msg-time { font-family: var(--mono-font) !important; font-size: .72rem; color: #6E8478; }
.message-text, .message-text-display { color: var(--ink-color) !important; line-height: 1.5; margin-top: 2px; font-family: var(--default-font) !important; display: block; overflow-wrap: break-word; }
/* Emoji wrapped in a <span class="emoji"> by linkify() in memberMessages.php/memberPersonal.php -
   bumped up relative to surrounding message text so they don't disappear at 16px. */
.emoji { font-size: 1.4em; line-height: 1; vertical-align: -0.15em; }
/* Like/laugh counts are numbers - same .tnum tabular-mono treatment as every other
   number on the site (rank, points, balance, stat tiles, table cells). */
.like-count, .laugh-count { font-family: var(--mono-font); font-variant-numeric: tabular-nums; }

/* ── Unread Reply Indicator ─────────────────── */
.unread-message {
  background-color: color-mix(in srgb, var(--accent-color) 12%, transparent);
  border-radius: 10px;
  padding: 6px 8px;
}
.unread-message strong,
.unread-message .message-text,
.unread-message .message-text-display {
  color: var(--accent-color-light) !important;
  font-weight: 600;
}
.new-message textarea, .reply-form textarea { width: 100%; }
.new-message textarea { min-height: 50px; }
.reply-form textarea  { min-height: 20px; }
.reply-form, .new-message { margin-top: 10px; }
.edit-textarea { display: none; width: 100%; min-height: 60px; margin-top: 10px; }
.edited-label  { font-size: 11px; color: #6E8478; font-style: italic; }

.like-btn  { border: 1px solid var(--line-color-strong) !important; background-color: transparent; color: var(--ink-color); border-radius: 999px; }
.laugh-btn { border: 1px solid var(--line-color-strong) !important; background-color: transparent; color: var(--ink-color); border-radius: 999px; }
.like-btn:hover  { border-color: var(--heading-color-light) !important; color: var(--heading-color-light) !important; }
.laugh-btn:hover { border-color: var(--golfplus-color) !important; color: var(--golfplus-color) !important; }
/* Liked/laughed active state - server-rendered on load via these two classes;
   toggle_like.php/toggle_laugh.php's JS sets the same colors inline on click,
   so the two stay visually identical whichever fires first. */
.btn-lightblue          { background-color: #90D5FF !important; color: #000 !important; border-color: #90D5FF !important; }
.btn-lightblue-outline  { background-color: transparent; color: #57B9FF; }
.btn-lightgreen         { background-color: #b7e4c7 !important; color: #000 !important; border-color: #b7e4c7 !important; }
.btn-lightgreen-outline { background-color: transparent; color: #b7e4c7; }

/* Reply indent (memberPersonal.php) - was a hardcoded inline style */
.reply { margin-left: 20px; border-left: 2px solid var(--line-color-strong); padding-left: 12px; }

/* ── Form Placeholders ───────────────────── */
body.contact-page .form-control::placeholder { color: #666 !important; }

/* Bootstrap badges ("New", "sent", "received", "AMATEUR", etc, used on memberMessages.php/
   memberPersonal.php/memberList.php) never got the mono-uppercase pill treatment every
   other short label/tag on the site uses (.action-tab, th.cell). */
.badge { font-family: var(--mono-font); text-transform: uppercase; letter-spacing: .04em; font-weight: 700; }

/* ── Pagination ─────────────────────────── */
.pagination { flex-wrap: wrap; }
.pagination .page-link {
  background-color: transparent !important;
  border-color: #B7E402 !important;
  color: #B7E402 !important;
  font-family: var(--mono-font);
}
.pagination .page-item.active .page-link {
  background-color: transparent !important;
  border-color: #B7E402 !important;
  color: #fff !important;
  font-weight: bold;
}
.pagination .page-link:hover {
  background-color: rgba(183,228,2,.15) !important;
  color: #B7E402 !important;
}
.pagination .page-item.disabled .page-link {
  background-color: transparent !important;
  border-color: #333 !important;
  color: #555 !important;
}

/* ── Tee-times card overrides ───────────── */
body.contact-page .teetimes-available .accordion-body { background: #000 !important; }
body.contact-page .teetimes-available .accordion-body p { color: #bbb !important; }
.teetimes-available p { color: #bbb !important; }

/* ── Misc rounds ─────────────────────────── */
.misc-rounds-container { margin: 20px 0; width: 100%; box-sizing: border-box; }
.misc-rounds-table { border-collapse: collapse; margin-bottom: 20px; table-layout: auto; font-size: 14px; }
.misc-rounds-table th,
.misc-rounds-table td { padding: 10px; text-align: center; border-bottom: 1px solid #000 !important; color: #bbb !important; word-wrap: break-word; }
.misc-rounds-table th { background-color: #111 !important; color: #B7E402 !important; font-weight: bold; }
.misc-rounds-table tbody tr:nth-child(odd)  { background-color: #181818; }
.misc-rounds-table tbody tr:nth-child(even) { background-color: #222222; }
.misc-rounds-table tbody tr:hover           { background-color: #2a2a2a; }
.misc-rounds-table tfoot .totals-row { background-color: #111 !important; color: #bbb !important; font-weight: bold; border-top: 2px solid #000 !important; }
.misc-rounds-container .pagination { justify-content: center; }

/* Prevent iOS Safari from zooming on input focus (requires font-size >= 16px) */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="tel"],
input[type="search"],
input[type="url"],
input[type="date"],
input[type="time"],
input[type="datetime-local"],
input[type="month"],
input[type="week"],
select,
textarea {
  font-size: max(16px, 1em) !important;
}

/* On desktop there's no iOS zoom-on-focus risk, so bring inputs down to the
   dashboard's compact type scale instead of the oversized mobile-safe 16px. */
@media (min-width: 768px) {
  input[type="text"],
  input[type="email"],
  input[type="password"],
  input[type="number"],
  input[type="tel"],
  input[type="search"],
  input[type="url"],
  input[type="date"],
  input[type="time"],
  input[type="datetime-local"],
  input[type="month"],
  input[type="week"],
  select,
  textarea {
    font-size: .85rem !important;
  }
}

/*--------------------------------------------------------------
# TGCVR Clubhouse Components (dashboard redesign, 2026-08)
--------------------------------------------------------------*/
.tnum { font-family: var(--mono-font); font-variant-numeric: tabular-nums; }

/* Brand lockup (used in menu.php in place of the plain .sitename text) */
.brand-mark { font-family: var(--display-font); font-weight: 400; letter-spacing: .02em; position: relative; display: inline-block; padding-bottom: 3px; color: var(--ink-color); }
.brand-mark::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px;
  background: linear-gradient(90deg, var(--accent-color), transparent 85%);
}

/* Online presence pill */
.online-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--heading-color); box-shadow: 0 0 10px var(--heading-color); margin-right: 4px; }

/* Player Card (dashboard hero) */
.player-card {
  background: linear-gradient(165deg, #161616, #1e1e1e);
  border: 1px solid var(--line-color-strong);
  border-radius: 20px;
  padding: 26px;
  box-shadow: 0 20px 50px -20px rgba(0,0,0,.85);
  position: relative;
  overflow: hidden;
}
.player-card::before {
  content: ""; position: absolute; inset: -40% -10% auto auto; width: 220px; height: 220px;
  background: radial-gradient(circle, color-mix(in srgb, var(--accent-color) 28%, transparent), transparent 70%);
  pointer-events: none;
}
.player-top { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; }
.player-avatar {
  width: 120px; height: 120px; border-radius: 20px; flex-shrink: 0; object-fit: cover;
  border: 2px solid var(--line-color-strong);
}
@media (max-width: 576px) {
  .player-top { flex-direction: column; align-items: center; text-align: center; gap: 12px; }
  .player-avatar { width: 140px; height: 140px; border-radius: 20px; }
  .player-name { justify-content: center; }
}
.player-name { font-size: 1.4rem; font-weight: 800; color: var(--ink-color); display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.player-handle { color: #6E8478; font-size: .85rem; font-family: var(--mono-font); }

.vc-strip {
  margin-top: 20px; display: flex; align-items: center; justify-content: space-between;
  background: #0d0d0d; border: 1px solid var(--line-color); border-radius: 14px; padding: 14px 18px; flex-wrap: wrap; gap: 10px;
}
.vc-strip .lbl { font-size: .7rem; letter-spacing: .1em; text-transform: uppercase; color: #6E8478; }
.vc-strip .amt { font-family: var(--mono-font); font-size: 1.5rem; font-weight: 700; color: var(--accent-color-light); }
.vc-strip .amt.is-blue { color: var(--ink-color); }

/* Card action buttons (player-card, etc.) - targets the SAME .btn class the markup uses,
   defined after bootstrap.min.css so this wins regardless of Bootstrap's own .btn rules. */
.card-actions { display: flex; gap: 10px; margin-top: 20px; flex-wrap: wrap; }
.card-actions .btn,
a.btn.btn-accent,
a.btn.btn-ghost {
  font-family: var(--default-font) !important; font-weight: 700 !important; font-size: .82rem !important;
  border-radius: 999px !important; padding: 10px 18px !important; text-decoration: none !important;
  display: inline-flex !important; align-items: center; gap: 6px; line-height: 1.2 !important;
  border: 1px solid transparent; cursor: pointer;
}
.btn-accent { background: var(--accent-color) !important; color: #fff !important; border-color: var(--accent-color) !important; }
.btn-accent:hover { background: transparent !important; color: var(--accent-color) !important; border-color: var(--accent-color) !important; }
.btn-ghost { background: transparent !important; color: var(--ink-color) !important; border-color: var(--line-color-strong) !important; }
.btn-ghost:hover { background: #1a1a1a !important; border-color: var(--accent-color-light) !important; }

/* Bootstrap's stock button palette (blue/yellow/red/gray) was never re-skinned and is
   used everywhere for form actions - Create/Update/Delete, Reply/Edit/Save/Cancel,
   Join/Leave, Lock/Unlock, Post/Send Message, etc, on memberMessages.php,
   memberPersonal.php, teetimes.php and every other page using this stylesheet. Loads
   after bootstrap.min.css, so this wins on equal specificity without needing !important
   for shape/font; colors need !important since Bootstrap's own variants use it. */
.btn {
  border-radius: 999px !important;
  font-family: var(--default-font) !important;
  font-weight: 700 !important;
}
/* Scoped to the colored variants only - NOT blanket .btn, which would also force a
   border onto .btn-link (e.g. the FAQ accordion toggles in main.css, which rely on
   border: none and have no border-color of their own to fall back to). */
.btn-primary, .btn-outline-primary,
.btn-danger, .btn-outline-danger,
.btn-warning, .btn-outline-warning,
.btn-success, .btn-outline-success,
.btn-secondary, .btn-outline-secondary,
.btn-dark {
  border-width: 1px !important;
  border-style: solid !important;
}
/* .btn-sm keeps its own tighter padding (used heavily on data-dense pages like
   tourneyLead.php's leaderboard) - only .btn without a size modifier gets
   mydashboard.php's exact padding/font-size. */
.btn:not(.btn-sm):not(.btn-lg) {
  padding: 10px 18px !important;
  font-size: .82rem !important;
}

/* One state solid fill, the other state border-only - same flip .btn-accent/
   .qa-dashboard-btn already use, applied to every Bootstrap variant. A lightened-
   shade hover (color-mix) wasn't noticeable enough; solid<->outline always is. */
.btn-primary { background: var(--accent-color) !important; border-color: var(--accent-color) !important; color: #000 !important; }
.btn-primary:hover, .btn-primary:focus { background: transparent !important; border-color: var(--accent-color) !important; color: var(--accent-color-light) !important; }
.btn-outline-primary { background: transparent !important; border-color: var(--accent-color) !important; color: var(--accent-color-light) !important; }
.btn-outline-primary:hover { background: var(--accent-color) !important; color: #000 !important; }

.btn-danger { background: var(--danger-color) !important; border-color: var(--danger-color) !important; color: #fff !important; }
.btn-danger:hover, .btn-danger:focus { background: transparent !important; border-color: var(--danger-color) !important; color: var(--danger-color) !important; }
.btn-outline-danger { background: transparent !important; border-color: var(--danger-color) !important; color: var(--danger-color) !important; }
.btn-outline-danger:hover { background: var(--danger-color) !important; color: #fff !important; }

/* Literal amber (not var(--walkabout-color)) - this is a generic "update/caution"
   action color used on every page, not a Walkabout track-identity marker. */
.btn-warning { background: #EEB002 !important; border-color: #EEB002 !important; color: #000 !important; }
.btn-warning:hover, .btn-warning:focus { background: transparent !important; border-color: #EEB002 !important; color: #EEB002 !important; }
.btn-outline-warning { background: transparent !important; border-color: #EEB002 !important; color: #EEB002 !important; }
.btn-outline-warning:hover { background: #EEB002 !important; color: #000 !important; }

.btn-success { background: var(--golfplus-color) !important; border-color: var(--golfplus-color) !important; color: #000 !important; }
.btn-success:hover, .btn-success:focus { background: transparent !important; border-color: var(--golfplus-color) !important; color: var(--golfplus-color) !important; }
.btn-outline-success { background: transparent !important; border-color: var(--golfplus-color) !important; color: var(--golfplus-color) !important; }
.btn-outline-success:hover { background: var(--golfplus-color) !important; color: #000 !important; }

.btn-secondary { background: #333 !important; border-color: var(--line-color-strong) !important; color: var(--ink-color) !important; }
.btn-secondary:hover, .btn-secondary:focus { background: transparent !important; border-color: var(--accent-color-light) !important; color: var(--accent-color-light) !important; }
.btn-outline-secondary { background: transparent !important; border-color: var(--line-color-strong) !important; color: var(--ink-color) !important; }
.btn-outline-secondary:hover { background: #1a1a1a !important; border-color: var(--accent-color-light) !important; color: var(--accent-color-light) !important; }

.btn-dark { border-color: var(--line-color-strong) !important; }
.btn-dark:hover { background: #222 !important; border-color: var(--accent-color-light) !important; }

/* Quick Access panel (mydashboard.php's "Quick Access" card) */
.quick-panel {
  background: #141414; border: 1px solid var(--line-color); border-radius: 20px;
  padding: 22px; box-shadow: 0 20px 50px -20px rgba(0,0,0,.85); height: 100%;
}
.quick-panel h2 { font-family: var(--display-font); font-size: 1.1rem; letter-spacing: .02em; color: var(--ink-color); margin: 0 0 4px; }
.quick-panel p { color: #6E8478; font-size: .82rem; margin: 0 0 16px; }

/* Quick Access - 3 category columns (Member Tools & FAQs / Golf+ / Walkabout) */
.quick-columns { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
@media (max-width: 820px) { .quick-columns { grid-template-columns: 1fr; } }
.quick-col { display: flex; flex-direction: column; gap: 8px; }
.quick-col-head {
  font-family: var(--mono-font); font-size: .68rem; text-transform: uppercase; letter-spacing: .1em;
  padding-bottom: 6px; margin-bottom: 2px; border-bottom: 1px solid var(--line-color); color: var(--ink-color);
}
.quick-col-head.tr-member { color: #fff; border-color: #fff; }
.quick-col-head.tr-golfplus { color: var(--golfplus-color); border-color: var(--golfplus-color); }
.quick-col-head.tr-walkabout { color: var(--walkabout-color); border-color: var(--walkabout-color); }

.qtile-row {
  position: relative; text-decoration: none; color: var(--ink-color); background: #0d0d0d;
  border: 1px solid var(--line-color); border-radius: 10px; padding: 10px 12px;
  display: flex; align-items: center; gap: 10px; transition: .18s;
}
.qtile-row .qi { font-size: 1.05rem; flex-shrink: 0; }
.qtile-row .qt { font-weight: 600; font-size: .78rem; line-height: 1.2; }
.qtile-row .qd { margin-left: auto; width: 8px; height: 8px; border-radius: 50%; background: var(--danger-color); box-shadow: 0 0 6px var(--danger-color); flex-shrink: 0; }

/* Quick Access hover - color-coded per category, strong enough to notice at a glance */
.qtile-row:hover {
  border-color: var(--accent-color); color: var(--accent-color-light);
  background: color-mix(in srgb, var(--accent-color) 16%, #0d0d0d);
  box-shadow: 0 8px 20px -10px rgba(94,164,1,.65);
}
.quick-col.tr-member .qtile-row:hover {
  border-color: #fff; color: #fff;
  background: color-mix(in srgb, #fff 16%, #0d0d0d);
  box-shadow: 0 8px 20px -10px rgba(255,255,255,.35);
}
.quick-col.tr-golfplus .qtile-row:hover {
  border-color: var(--golfplus-color); color: var(--golfplus-color);
  background: color-mix(in srgb, var(--golfplus-color) 16%, #0d0d0d);
  box-shadow: 0 8px 20px -10px color-mix(in srgb, var(--golfplus-color) 65%, transparent);
}
.quick-col.tr-walkabout .qtile-row:hover {
  border-color: var(--walkabout-color); color: var(--walkabout-color);
  background: color-mix(in srgb, var(--walkabout-color) 16%, #0d0d0d);
  box-shadow: 0 8px 20px -10px color-mix(in srgb, var(--walkabout-color) 65%, transparent);
}

/* Tiered disclosure: top-5 tiles show by default, .qtile-extra hidden until expanded */
.qtile-extra { display: none; }
.quick-col.expanded .qtile-extra { display: flex; }
.quick-col-more {
  background: none; border: none; color: var(--accent-color-light); font-family: var(--mono-font);
  font-size: .68rem; text-transform: uppercase; letter-spacing: .06em; text-align: left;
  padding: 6px 2px; cursor: pointer;
}
.quick-col-more:hover { color: var(--accent-color); text-decoration: underline; }
.quick-col.tr-member .quick-col-more { color: #ddd; }
.quick-col.tr-member .quick-col-more:hover { color: #fff; text-decoration: underline; }
.quick-col.tr-golfplus .quick-col-more { color: color-mix(in srgb, var(--golfplus-color) 85%, white 5%); }
.quick-col.tr-golfplus .quick-col-more:hover { color: var(--golfplus-color); text-decoration: underline; }
.quick-col.tr-walkabout .quick-col-more { color: color-mix(in srgb, var(--walkabout-color) 85%, white 5%); }
.quick-col.tr-walkabout .quick-col-more:hover { color: var(--walkabout-color); text-decoration: underline; }

/* Global Quick Access trigger + overlay panel (replaces the old dropdown megamenu).
   .qa-trigger is a <button>, the other two are <a> tags - browsers give buttons their
   own default line-height/margin/vertical-align even with identical padding on all
   three, which threw the row a few px out of vertical alignment. Pinning line-height,
   margin, box-sizing and vertical-align here makes all three render at the same height
   regardless of tag. */
.qa-dashboard-btn, .qa-trigger, .qa-logout {
  line-height: 1.2; margin: 0; box-sizing: border-box; vertical-align: middle;
}
.qa-dashboard-btn {
  display: inline-flex; align-items: center; gap: 8px;
  background: transparent; border: 1px solid var(--accent-color); color: var(--accent-color) !important;
  font-family: var(--mono-font); font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em;
  padding: 9px 16px; border-radius: 999px; text-decoration: none !important;
}
.qa-dashboard-btn:hover { background: var(--accent-color); color: #000 !important; }
.qa-trigger {
  display: inline-flex; align-items: center; gap: 8px;
  background: #141414; border: 1px solid var(--heading-color-light); color: var(--heading-color-light);
  font-family: var(--mono-font); font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em;
  padding: 9px 16px; border-radius: 999px; cursor: pointer; position: relative;
}
.qa-trigger:hover { background: var(--heading-color-light); border-color: var(--heading-color-light); color: #000 !important; }
.qa-trigger-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--danger-color); box-shadow: 0 0 6px var(--danger-color); }
.qa-logout {
  display: inline-flex; align-items: center; gap: 8px;
  color: #ff6b6b !important; font-family: var(--mono-font); font-size: .72rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .06em; text-decoration: none !important; padding: 9px 16px;
  background: #141414 !important; border: 1px solid color-mix(in srgb, var(--danger-color) 45%, var(--line-color-strong)) !important;
  border-radius: 999px;
}
.qa-logout:hover { color: #fff !important; border-color: var(--danger-color) !important; background: var(--danger-color) !important; }

.qa-panel {
  position: fixed; inset: 0; z-index: 9999;
  background: rgba(0,0,0,.75);
  display: flex; align-items: flex-start; justify-content: center;
  padding: 90px 16px 40px; overflow-y: auto;
}
.qa-panel.d-hidden { display: none; }
.qa-panel-inner {
  background: #141414; border: 1px solid var(--line-color-strong); border-radius: 20px;
  padding: 24px; max-width: 1100px; width: 100%; box-shadow: 0 30px 80px -20px rgba(0,0,0,.9);
}
.qa-panel-head {
  display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px;
  font-family: var(--display-font); font-size: 1.3rem; color: var(--ink-color); letter-spacing: .02em; font-weight: 400;
}
.qa-close {
  background: none; border: 1px solid var(--line-color-strong); color: var(--ink-color);
  width: 34px; height: 34px; border-radius: 50%; cursor: pointer; font-size: .9rem; flex-shrink: 0;
}
.qa-close:hover { border-color: var(--accent-color); color: var(--accent-color-light); }
@media (max-width: 600px) {
  .qa-panel { padding: 70px 8px 20px; }
  .qa-panel-inner { padding: 16px; border-radius: 14px; }
}

/* Rounded-corner wrapper for legacy border-collapse:collapse data tables, so the
   outer edge matches the 14-20px radius used elsewhere in the facelift. overflow-x:auto
   (not hidden) so wide tables scroll horizontally on mobile instead of clipping columns
   off the right edge; overflow-y stays hidden just to keep the rounded corners clean.
   Standard wrapper - use on every member-facing data table. */
.table-card { border-radius: 14px; overflow-x: auto; overflow-y: hidden; border: 1px solid var(--accent-color); -webkit-overflow-scrolling: touch; }

/* Inside accordions, match the .table-card wrapper to the light-lime cell
   borders above instead of the darker --accent-color green, so the table
   reads as one distinct border color against the accordion's own border. */
.accordion-body .table-card { border-color: var(--heading-color-light, #D4F468); }

/* Member Access pages (login.php / loginForgot.php / loginReset.php / loginUnregister.php)
   - markup carried .login-card/.login-eyebrow from the main.css template, but neither
   ever existed in members.css, so the card rendered as flat unstyled text on the page's
   plain black background instead of the raised dark panel it's meant to be. Matches the
   #141414/border/radius/shadow pattern already used for .qa-panel-inner. */
.login-card {
  background: #141414;
  border: 1px solid var(--line-color-strong);
  border-radius: 20px;
  box-shadow: 0 30px 80px -20px rgba(0,0,0,.9);
  padding: 30px;
  width: 100%;
  max-width: 400px;
}
.login-eyebrow {
  font-size: 12px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--ink-color, #E5E7EB);
  opacity: .7;
  font-weight: 600;
  margin-bottom: 4px;
}

/* Tournament card grid (tourneyMatchplay.php/tourneyScramble.php/tourneyStableford.php
   "Active Tournament Registrations" panels) - the markup used this class name but no
   rule for it ever existed, so the panels rendered full-width with sparse title/date/
   user-list content spread thin across the row instead of sitting in a compact card. */
.tourney-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 16px; }

/* Stat tiles */
.stat-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
@media (max-width: 820px) { .stat-grid { grid-template-columns: repeat(2, 1fr); } }
.stat-tile { background: #141414; border: 1px solid var(--line-color); border-radius: 14px; padding: 16px 18px; display: flex; flex-direction: column; gap: 6px; }
.stat-tile .n { font-family: var(--display-font); font-size: 2.2rem; color: var(--ink-color); line-height: 1; }
.stat-tile .l { font-size: .72rem; text-transform: uppercase; letter-spacing: .08em; color: #6E8478; }

/* Trophy rack - wraps (not horizontal-scroll) so it works in a half-width column on mobile */
.trophy-rack { display: flex; flex-wrap: wrap; gap: 12px; padding: 6px 2px 0; }
.trophy { flex: 0 0 auto; width: 120px; background: #141414; border: 1px solid var(--line-color); border-radius: 14px; padding: 14px 10px; text-align: center; cursor: default; }
/* Only the icon opens the full-size lightbox (title/count below it are plain text) -
   without this, the site-wide html{cursor:pointer} rule (see the iOS double-tap fix
   note further up this file) makes the whole card look clickable when it isn't. */
.trophy .ico a { cursor: zoom-in; }
.trophy .ico { width: 56px; height: 56px; margin: 0 auto 8px; }
.trophy .ico img { width: 100%; height: 100%; object-fit: contain; }
.trophy .t { font-size: .68rem; font-weight: 700; line-height: 1.25; color: var(--ink-color); }

/* Base trophy-rack (e.g. mydashboard.php's full-width Trophy Case): fixed 120px tiles
   fit fine on desktop, but 3 tiles + gaps (3*120 + 2*12 ~= 390px) don't fit most phone
   viewports, so it wraps to 2 per row. Below 576px, size tiles off the row width instead
   (same approach as the .player-card variant below) so 3 fit consistently. */
@media (max-width: 576px) {
  .trophy-rack { gap: 8px; }
  .trophy-rack .trophy { flex: 1 1 calc(33.333% - 6px); width: auto; min-width: 0; padding: 10px 4px; }
  .trophy-rack .trophy .ico { width: 46px; height: 46px; }
}

/* Inside the (narrower) player card, fixed 108px tiles leave a wide dead gap after 2
   columns on mobile - fit 3 per row instead by sizing tiles off the row width. */
.player-card .trophy-rack { gap: 10px; }
.player-card .trophy { flex: 1 1 calc(33.333% - 7px); width: auto; min-width: 0; padding: 12px 6px; }
.trophy .c { font-family: var(--mono-font); color: var(--accent-color-light); font-size: .82rem; margin-top: 4px; }

/* Trophy Case (left) + Golf+/Walkabout stat panels (right) */
.trophy-panels-row { display: grid; grid-template-columns: 1.2fr 1fr; gap: 18px; align-items: start; }
@media (max-width: 820px) { .trophy-panels-row { grid-template-columns: 1fr; } }
.track-stats-col { display: flex; flex-direction: row; gap: 14px; align-items: stretch; }
.track-stats-col .panel { flex: 1 1 0; min-width: 0; }
@media (max-width: 500px) { .track-stats-col { flex-direction: column; } }

/* Golf+ / Walkabout track panels */
.panels { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 760px) { .panels { grid-template-columns: 1fr; } }
.panel { background: #141414; border: 1px solid var(--line-color); border-radius: 20px; padding: 20px; box-shadow: 0 20px 50px -20px rgba(0,0,0,.85); }
.panel-head { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.panel-head .sw { width: 10px; height: 10px; border-radius: 50%; }
.panel-head h3 { font-family: var(--display-font); font-size: 1.05rem; color: var(--ink-color); margin: 0; font-weight: 400; }
.panel dl { margin: 0; display: grid; grid-template-columns: 1fr auto; gap: 10px 12px; font-size: .86rem; align-items: baseline; }
.panel dt { color: #6E8478; font-family: var(--mono-font); text-transform: uppercase; letter-spacing: .05em; font-size: .72rem; }
.panel dd { margin: 0; font-family: var(--mono-font); text-align: right; font-weight: 600; color: var(--ink-color); }

/* Account details mini-panel (shared - was previously stuck in mydashboard.php's own <style>,
   so it silently didn't apply anywhere else .acct-panel was reused, e.g. memberView.php) */
.acct-panel dl { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 8px 14px; font-size: .85rem; align-items: baseline; }
.acct-panel dt { color: #6E8478; white-space: nowrap; font-family: var(--mono-font); text-transform: uppercase; letter-spacing: .05em; font-size: .72rem; text-align: left; }
.acct-panel dd { margin: 0; color: var(--ink-color, #E5E7EB); word-break: break-word; text-align: left; }
.acct-panel dd.ok { color: #6E8478; }
.acct-panel dd.warn { color: var(--danger-color, #DC3545); font-weight: 700; }

/* GLightbox "clean" skin caption box (used by trophy image popups) ships with a
   solid white background and left-aligned text by default - clashes with the dark
   theme and reads as an unstyled error box. Swap it for a bordered, centered,
   dark-matching caption with breathing room above it instead of flush against the image. */
.glightbox-clean .gslide-description {
  background: transparent;
  border: 1px solid var(--line-color-strong, rgba(229, 231, 235, 0.26));
  border-radius: 10px;
  margin-top: 14px;
  text-align: center;
}
.glightbox-clean .gslide-title {
  color: var(--ink-color, #E5E7EB);
  text-align: center;
}
.glightbox-clean .gslide-desc {
  color: var(--ink-color, #E5E7EB);
  text-align: center;
}