/* =========================================================================
   RESORT CLUB — ELITE LIVE BOOKING PORTAL THEME OVERRIDES  (v39)
   =========================================================================
   Target file: resources/2252/style.css (loaded last — the club's own
   override file, already ahead of ESP's template/theme CSS).

   v39 change from v38: added Section 13 — the My Documents accordion
   (documents.html), recoloured from a grey gradient folder bar and
   light-blue row hover into the theme, with the date/time moved onto
   the same line as the filename (via flex on the row, which also makes
   the icons' existing float:left/right harmless rather than needing to
   be removed) and the file icons sized up now that the row only needs
   one line of height.

   v38 change from v37 — three fixes on the Front Desk tiles:

   1. BUTTON SIZING — reverted v37's width:100% stacking per feedback.
      Checked the real markup first this time: the two forms are DIRECT
      children of .dc_grp_box, no wrapping div — an earlier draft of
      this fix tried a :has()-based wrapper rule that matched nothing
      for exactly that reason, caught and removed before shipping.
      Buttons are auto-width, side by side via plain inline-block
      (which wraps naturally if they don't fit, no flex wrapper
      needed), with modest padding (10px 16px, not the sitewide
      17px 34px) so both fit the tile without overflowing.

   2. ROLLOVER ON MOBILE/TABLET — found a genuine bug in the base
      stylesheet: .dc_grp_item_rollover defaults to display:block
      globally, and only the 901px+ breakpoint ever sets display:none.
      Below that width nothing hides it, so it was permanently covering
      the real buttons on tablet and mobile. Forced hidden by default
      at every breakpoint; the existing hover-to-reveal still works on
      desktop, and naturally stays hidden on touch devices.

   3. TITLE BAR HEIGHT — .dc_grp_box_title now has a shared min-height
      (enough for two lines) with flex vertical-centring, so every tile
      in a row matches regardless of whether its own title wraps.

   v37 change from v36: the two-button fix in v36 put Select and View
   Statement side by side, which looked fine in reasoning but not in
   practice — "View Statement" at the sitewide button's padding and
   letter-spacing is wider than the tile has room for next to "Select",
   so it overflowed the card and was clipped to "VIEW" (confirmed via
   screenshot). Stacked vertically instead, full width, since there's
   spare height below the image but no spare width.

   v36 change from v35: fixed the "Membership Renewal Request" Front
   Desk tile's two invisible buttons (Select / View Statement). Root
   cause confirmed in both the real markup and scratchgolfer.css: this
   is the only Front Desk tile with button forms instead of a full-card
   floatlink, and the base stylesheet's hardcoded height:190px (which
   every other, simpler tile fits inside fine) was clipping that extra
   content via overflow:hidden on .dc_grp_box, rather than just
   shrinking it. height switched to auto, and the two buttons given a
   bit of layout polish (side by side, the secondary one outlined
   rather than filled) since they were being touched anyway.

   TODO, not yet done: table headers on My Profile / Booking History
   have an unwanted text-shadow inherited from scratchgolfer.css —
   flagged for the next update, not fixed this round.

   v35 change from v34: added Section 12 — My Profile and Booking
   History pages, recoloured (the grey section-header bars, both
   tables, and the Bookings tab bar aren't defined in scratchgolfer.css
   beyond bare padding rules, so their current look comes from the
   resort demo theme CSS I can't fetch directly — colour/font/padding
   overrides are safe regardless, the same reasoning used throughout
   this file). Also fixed a genuine bug from several rounds back: the
   "not you?" link styling used #not_you a, but the real markup has
   id="not_you" on the <a> itself, not on a wrapping element — that
   selector never matched anything.

   v34 change from v33: v33's outline-button rule never actually took
   effect — confirmed via computed styles that the sitewide generic
   button rule was winning instead. Cause: that "generic" selector is
   button:not(.main_menu_btn):not(.context_menu_btn), and each :not()
   clause counts toward specificity as if it were the class itself, so
   it's really two classes' worth of specificity — more than a plain
   single-class selector. Bumped this rule to match by using the cell's
   two real classes together (elbr_grid-item elbr_grid-item_avail,
   confirmed in the markup), which ties on specificity; since this rule
   is later in the cascade, the tie now resolves in its favour.

   v33 change from v32: .elbr_grid-item_avail button flipped to
   outline-by-default, filling gold only on hover — the reverse of the
   solid-fill-always look it had, and consistent with the same
   outline-to-fill pattern already used on .ESPAuthBoxbtn_Forgot.
   Scoped to this one button for now, not rolled out sitewide.

   v32 change from v31 — two minor tweaks on the court grid:
   1. .elbr_grid-item_avail button had a fixed 95px width from the base
      stylesheet, leaving the SELECT text off-centre inside it. Width
      unset so padding falls evenly either side.
   2. .elbr_fixed_left (the hour labels) centred vertically within their
      row via flex, rather than sitting at the top.

   v31 change from v30: added Section 11 for the court/location
   selection grid (tabular-view.html). This page's colours are set in
   an inline <style> block in the page itself, not scratchgolfer.css —
   confirmed by grep turning up nothing there. Recoloured the stock
   blue grid (background, border, and available-cell fill) into the
   theme; the SELECT buttons were already gold via the sitewide button
   rule and needed no change.

   v30 change from v29: the defensive height:auto/overflow:visible reset
   from v29 covered .dc_activity_box_body but not .el_ba2_cal_wrapper or
   .dc_calselect_scrollview themselves — spotted directly: the wrapper
   has no min-height while .cal_month_frame (its child) does, and not
   setting a height on the wrapper doesn't guarantee it grows to match a
   child's min-height if something outside the files I can read sets one
   on that class. Same defensive reset now applied to both.

   v29 change from v28:

   1. PANEL HEIGHT — .dc_activity_box_body was still clipping the
      calendar and forcing an internal scrollbar even after v28's
      overflow fixes on the carousel wrapper/scrollview. The base
      stylesheet (scratchgolfer.css) sets no height or overflow on this
      element at all, so whatever was constraining it isn't confirmed
      in any file I can read — likely the resort demo theme CSS, which
      I've been unable to fetch directly. Forced height:auto and
      overflow:visible defensively instead (safe regardless of the
      real source, since it can only reveal more content, never hide
      more), on .dc_activity_box_body, .dc_activity_box_body_desc, and
      — proactively, per your request — .dc_activity_box_body_desc_ft_holder.

   2. ARROW ALIGNMENT — v28 made the card meet the arrows' INSIDE edge
      (the gutter padding equalled the arrow width), not their outside
      edge as asked. Removed the gutter entirely: the card now spans
      the wrapper's full width, and the arrows overlay its corners
      instead of sitting beside it in reserved space.

   v28 change from v27 — all three confirmed against your screenshots and
   the base CSS:

   1. CALENDAR WIDTH — .el_ba2_cal_wrapper reserved 36px of gutter
      padding per side (wider than the 32px arrows actually need) and
      capped .cal_month_frame at 420px regardless of the wrapper's own
      size, leaving a visible gap between the card and the arrows.
      Widened the wrapper, tightened the gutter to match the arrow
      width exactly, and raised the card's cap to fill the resulting
      space.

   2. BOTTOM ROW CUT OFF — found TWO separate layers clipping vertical
      content: .el_ba2_cal_wrapper had `overflow: hidden` (a single
      shorthand clips both axes), and .dc_calselect_scrollview
      separately had `overflow-y: hidden` of its own. Both were only
      ever needed on the X axis, to hide adjacent months during the
      carousel scroll — neither was meant to clip vertically. Split
      both to overflow-x only.

   3. FLEXTIMES SIZING — the base stylesheet lays these out with loose
      flex-wrap + min-width:160px, which can wrap unevenly at in-between
      widths (e.g. tablet). Given explicit responsive column counts
      instead: 4-up desktop, 3-up tablet, 2-up mobile.

   v27 change from v26: found the real cause of the popup swallowing
   neighbouring activity cards — .activity_viewtimes_frame's v22 fix
   (height/width: 90%) was sized correctly for the single-calendar golf
   page it was built for, but it's the SAME shared class on this
   multi-activity accordion page, where the containing block
   (.ah_segment) holds several stacked activities — 90% of that combined
   height is enormous. Switched to fixed max-width/max-height caps that
   can't overwhelm neighbours regardless of which ancestor it centres
   in, and tidied the time-slot buttons to a borderless pill shape
   (confirmed against the working reference page's screenshot).

   v26 change from v25: fixed a genuine mistake in v25, not a new
   feature. The carousel-only properties on .cal_month_frame
   (flex:0 0 100%, min-width:100%, scroll-snap) were put on the BARE
   class on the assumption both would be inert outside a flex/scroll
   container, the same way flex-basis is. min-width isn't — it applies
   to any box regardless of layout mode — so it was unconditionally
   forcing every month frame to 100% width, which broke the date-picker
   page's two-months-side-by-side layout (they stacked into one column
   each instead). Moved the whole block to
   .dc_calselect_scrollview .cal_month_frame so it only ever applies
   inside the actual carousel.

   v25 change from v24 (picked up after v24's off-session edits) —
   confirmed against Select_DC_Activity_Calendar.html and
   elitelive-trust.css:

   1. ACTIVITY-PAGE CALENDAR — this page's calendar wasn't wide or tall
      enough (two static month frames don't fit this layout). Rather
      than redesign from scratch, ported the horizontal-scroll-snap
      single-month carousel already working on another portal
      (elitelive-trust.css: .el_ba2_cal_wrapper /
      .dc_calselect_scrollview / .el_ba2_cal_left / .el_ba2_cal_right),
      recoloured from its generic blue/green into this theme's
      emerald/gold/cream. The date-picker page's two-month layout is
      unaffected — it shares class names with the carousel but the new
      carousel-only properties (flex-basis, scroll-snap) are no-ops
      outside an actual flex/scroll container.

   2. TIME-SLOT POPUP SHADOW — .activity_viewtimes_frame had its own
      one-off shadow value from when it was first fixed; unified it
      with the same soft, emerald-tinted shadow used on .ah_segment
      elsewhere, so every card in the theme now shares one shadow
      language instead of several similar-but-different ones.
   ========================================================================*/


/* ---------- 0. Fonts + design tokens (from websitestyle.css) ------------ */

@import url('https://fonts.googleapis.com/css2?family=Urbanist:wght@400;500;600;700&family=Epilogue:wght@300;350;400;500;600&display=swap');

:root {
  --ink:         #06251c;
  --emerald:     #064e3b;
  --emerald-mid: #0d7a5f;
  --gold:        #c9a84c;
  --gold-soft:   #e3cd8b;
  --cream:       #f5f0e0;
  --paper:       #fbfaf5;
  --line:        rgba(6, 78, 59, 0.14);
  --line-dark:   rgba(245, 240, 224, 0.18);
  --muted:       #5d6b64;
  --danger:      #B3543E;
  --danger-dark: #8a3d2b;
  --radius:      2px;
  --ease:        cubic-bezier(0.22, 0.61, 0.36, 1);
  --font-display: 'Urbanist', 'Helvetica Neue', Arial, sans-serif;
  --font-body:    'Epilogue', 'Helvetica Neue', Arial, sans-serif;
}

body {
  background: var(--emerald) !important;
  font-family: var(--font-body) !important;
  font-weight: 350;
  color: var(--ink) !important;
}

/* .ah_segment — replacing the base stylesheet's hard, near-black offset
   shadow (3px 3px 5px #111111, zero blur) and flat grey gradient with a
   soft, diffused shadow tinted to the emerald palette, matching the
   treatment already used on .ESPAuthBox. */
.ah_segment {
  box-shadow: 0 20px 45px -28px rgba(6,37,28,0.45) !important;
  background-color: var(--paper) !important;
  background-image: none !important;
  border: 1px solid var(--line);
  border-radius: 10px;
}

.ESPAuthBoxbtn,
.dc_maingrp_box_btn,
input[type="submit"], input[type="button"], button:not(.main_menu_btn):not(.context_menu_btn) {
  font-family: var(--font-display) !important;
  font-size: 12.5px !important;
  font-weight: 600 !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
  text-align: center !important;
  border-radius: var(--radius) !important;
  padding: 17px 34px !important;
  transition: background 0.35s var(--ease), color 0.35s var(--ease), border-color 0.35s var(--ease), transform 0.35s var(--ease);
  cursor: pointer;
}
.ESPAuthBoxbtn:hover,
.dc_maingrp_box_btn:hover,
input[type="submit"]:hover, input[type="button"]:hover, button:not(.main_menu_btn):not(.context_menu_btn):hover {
  transform: translateY(-2px);
}

/* Menu toggle buttons — #showLeft (.main_menu_btn) on the left and
   #showRight (.context_menu_btn, the basket one) on the right. They are
   empty <button> elements; the icon is a background-image supplied by
   scratchgolfer.css.
   Two causes of the vanishing icon, both fixed here:
   1. The generic button rules above/below used the `background`
      SHORTHAND with !important, which also resets background-image to
      none. Those rules now exclude these two classes with :not(), so
      nothing wipes the image any more.
   2. A resort-theme hover rule (.main_menu_btn:hover,
      .context_menu_btn:hover) can also replace the image on hover, so
      the image is re-stated below with !important for BOTH the resting
      and hover states, and can't be swapped out by either.
   Image paths are root-absolute (/elitelive/images/...) so they resolve
   the same way wherever this stylesheet is served from — scratchgolfer.css
   uses the relative form images/btn_menu.png from the /elitelive/ folder.
   If your install lives in a different folder, adjust that prefix. */
.main_menu_btn, .context_menu_btn,
.main_menu_btn:hover, .context_menu_btn:hover {
  width: 40px !important;
  height: 40px !important;
  padding: 0 !important;
  min-width: 0 !important;
  font-size: 0 !important;
  letter-spacing: 0 !important;
  background-color: var(--cream) !important;
  background-repeat: no-repeat !important;
  background-position: center center !important;
  border: 1px solid var(--line) !important;
  border-radius: var(--radius) !important;
  box-shadow: none !important;
  transform: none !important;
}
.main_menu_btn,
.main_menu_btn:hover {
  background-image: url(https://www.e-s-p.com/elitelive/images/btn_menu.png) !important;
}
.context_menu_btn,
.context_menu_btn:hover {
  background-image: url(https://www.e-s-p.com/elitelive/images/adjust-horiz.png) !important;
}
/* The right-hand button is the basket variant (icon + size from the base CSS) */
.context_menu_btn.context_menu_btn_basket,
.context_menu_btn.context_menu_btn_basket:hover {
  background-image: url(https://www.e-s-p.com/elitelive/images/trolly_96.png) !important;
  background-size: 30px 30px !important;
}
.main_menu_btn:hover, .context_menu_btn:hover {
  border-color: var(--gold) !important;
}

/* Clear space for those two toggle buttons so the main frame is never
   tucked behind them: side padding on wide screens; on narrow screens
   the buttons sit above the frame instead (top padding) and the sides
   stay tight to save room. */
.ah_page_frame {
  padding-left: 56px !important;
  padding-right: 56px !important;
}
@media (max-width: 780px) {
  .ah_page_frame {
    padding: 52px 12px 0 !important;
  }
}

/* "Go Back" — confirmed the base stylesheet hardcodes
   .booking_back_btn_submit to width:100px, which was clipping the
   button text once the generic padding above made it need more room. */
.booking_back_btn_submit {
  width: auto !important;
  min-width: 140px !important;
  height: auto !important;
  padding: 13px 26px !important;
}


/* =========================================================================
   SECTION 1 — LOGIN / REGISTER PAGE  (confirmed against login.html)
   ========================================================================= */

.ah_segment_title {
  font-family: var(--font-display) !important;
  font-weight: 500 !important;
  color: var(--emerald) !important;
  font-size: 20px !important;
  letter-spacing: -0.02em;
}

.ESPAuthBox {
  background: #fff !important;
  border: 1px solid var(--line) !important;
  border-radius: 10px !important;
  box-shadow: 0 30px 70px -40px rgba(6,37,28,0.6);
  max-width: 400px;
  margin: 0 auto;
  overflow: hidden;
}

/* .ESPAuthBox > img { display: none; }  -- uncomment to hide ESP's own banner image */

.ESPAuthBox div[style*="text-align"] {
  font-family: var(--font-display) !important;
  font-weight: 500 !important;
  color: var(--emerald) !important;
  font-size: 22px !important;
  letter-spacing: -0.02em;
  padding: 22px 5px 8px !important;
}

.ESPAuthBoxBody { padding: 8px 28px 28px; }

.ESPAuthBoxBody input[type="text"],
.ESPAuthBoxBody input[type="password"] {
  width: 100%;
  background: var(--paper) !important;
  border: 1px solid var(--line) !important;
  border-radius: var(--radius) !important;
  padding: 12px 14px !important;
  font-family: var(--font-body) !important;
  font-size: 15px !important;
  color: var(--ink) !important;
  box-sizing: border-box;
  margin-bottom: 14px;
}
.ESPAuthBoxBody input[type="text"]:focus,
.ESPAuthBoxBody input[type="password"]:focus {
  outline: 2px solid var(--gold) !important;
  outline-offset: 3px;
  border-color: var(--gold) !important;
  background: #fff !important;
}

.ESPAuthBoxbtn {
  display: block;
  width: 100%;
  box-sizing: border-box;
  margin-bottom: 10px;
  border: 1px solid transparent;
}

/* Primary — gold, matching the site's actual visible CTA (not the base
   emerald class default). */
.ESPAuthBoxSubmit {
  background: var(--gold) !important;
  color: var(--ink) !important;
  border-color: var(--gold) !important;
}
.ESPAuthBoxSubmit:hover { background: transparent !important; color: var(--gold) !important; border-color: var(--gold) !important; }

.ESPAuthBoxbtn_Forgot {
  background: transparent !important;
  color: var(--emerald) !important;
  border-color: rgba(6,78,59,0.4) !important;
}
.ESPAuthBoxbtn_Forgot:hover { background: var(--emerald) !important; color: var(--cream) !important; border-color: var(--emerald) !important; }

.ESPAuthBoxBody hr { border: none; border-top: 1px solid var(--line); margin: 14px 0; }

#authbox_error, .required_text { font-family: var(--font-body) !important; color: #B3543E; font-size: 13px; min-height: 1.2em; }

.no_print { text-align: center; margin-top: 18px; opacity: 0.85; }


/* =========================================================================
   SECTION 2 — LEFT MENU + BASKET DRAWER  (confirmed against
   Select-Category.html — #cbp-spmenu-s1 and #context-menu)
   ========================================================================= */

.cbp-spmenu { background: var(--emerald) !important; }
.cbp-spmenu .main_menu_segment { background: transparent !important; }

.main_menu_segment_title {
  color: var(--gold) !important;
  font-family: var(--font-display) !important;
  font-size: 11.5px !important;
  letter-spacing: 0.28em !important;
  text-transform: uppercase !important;
  font-weight: 600 !important;
  text-align: center !important;
  padding: 12px 16px 4px !important;
}

/* Link-style nav (transparent, gold on hover), matching the real site's
   nav treatment — but with a FULL border restored on all sides. v11 had
   stripped this to a bottom-only border for a minimal look; per
   feedback that read as a missing right border rather than an
   intentional style, so it's back to a complete border. Both the base
   class and the .ah_segment_frm_btn_club combination (confirmed in v10
   to need separate targeting) get the same treatment. */
.cbp-spmenu .ah_segment_frm_btn,
.cbp-spmenu input.ah_segment_frm_btn.ah_segment_frm_btn_club,
.cbp-spmenu .ah_segment_frm_btn_club {
  display: block !important;
  width: 100% !important;
  background: transparent !important;
  color: var(--cream) !important;
  font-family: var(--font-display) !important;
  font-size: 11.5px !important;
  font-weight: 500 !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  text-align: center !important;
  border: 1px solid var(--line-dark) !important;
  border-radius: var(--radius) !important;
  padding: 12px 14px !important;
  margin-bottom: 6px !important;
  opacity: 1 !important;
}
.cbp-spmenu .ah_segment_frm_btn:hover,
.cbp-spmenu .ah_segment_frm_btn_club:hover {
  background: rgba(201,168,76,0.1) !important;
  color: var(--gold) !important;
  border-color: var(--gold) !important;
}

.cbp-spmenu .main_menu_segment { box-shadow: none !important; }

#not_you, .not_you a { color: var(--gold-soft) !important; } /* fixed —
  the real markup has id="not_you" on the <a> itself (inside a div with
  class="not_you"), not on a wrapping element the way the old selector
  assumed, so it never matched anything */


/* =========================================================================
   SECTION 3 — CATEGORY TILES  (confirmed against Select-Category.html —
   .ah_page_frame > .ah_segment > .dc_text_center, no table/wrapper)
   ========================================================================= */

/* Force the whole chain to full width — v10 only widened the grid
   itself; if .ah_segment (its direct parent) has its own narrower fixed
   width from ESP's CSS, that alone explains the leftover gap. */
.ah_page_frame,
.ah_segment {
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

.dc_text_center {
  display: grid !important;
  grid-template-columns: repeat(2, 1fr) !important;
  align-items: stretch;
  gap: 20px !important;
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}
@media (max-width: 700px) {
  .dc_text_center {
    grid-template-columns: 1fr !important;
  }
}

.dc_maingrp_box {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  height: 100%;
  box-sizing: border-box !important;
  float: none !important;
  margin: 0 !important;
  background: #fff !important;
  border: 1px solid var(--line) !important;
  border-radius: var(--radius) !important;
  overflow: hidden !important;
  box-shadow: none !important;
  position: relative;
  display: flex;
  flex-direction: column;
}

.dc_maingrp_box_link { cursor: pointer; }

.dc_maingrp_box,
.dc_maingrp_box_title,
.dc_maingrp_box_body,
.dc_maingrp_box_body_col_left,
.dc_maingrp_box_body_col_right {
  border: 0 !important;
  box-shadow: none !important;
  outline: none !important;
}
.dc_maingrp_box_title::before,
.dc_maingrp_box_title::after {
  display: none !important;
  content: none !important;
}

.dc_maingrp_box_title {
  position: relative;
  z-index: 1;
  background: var(--cream) !important;
  color: var(--emerald) !important;
  font-family: var(--font-display) !important;
  font-weight: 500 !important;
  font-size: 18px !important;
  letter-spacing: -0.02em;
  padding: 14px 20px !important;
  border-bottom: 1px solid var(--line) !important;
}

.dc_maingrp_box_body {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 20px;
  width: 100%;
  flex: 1;
  box-sizing: border-box;
}

.dc_maingrp_box_body_col_left {
  font-family: var(--font-body) !important;
  font-weight: 350;
  color: var(--ink) !important;
  font-size: 14px !important;
  line-height: 1.6;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  flex: 1 1 auto;
  min-width: 0;
}

/* Primary CTA — gold, matching the real site's visible button colour. */
.dc_maingrp_box_btn {
  position: relative;
  z-index: 2;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  align-self: flex-start;
  margin-top: 10px;
  background: var(--gold) !important;
  color: var(--ink) !important;
  text-decoration: none !important;
  padding: 11px 22px !important;
  border: 1px solid var(--gold) !important;
}
.dc_maingrp_box_btn:hover {
  background: transparent !important;
  color: var(--gold) !important;
  border-color: var(--gold) !important;
}

.dc_maingrp_box_body_col_right {
  position: relative;
  z-index: 1;
  flex: 0 0 130px !important;
  width: 130px !important;
  height: 130px !important;
  min-width: 0;
  overflow: hidden !important;
}
.dc_maingrp_box_body_col_right img {
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  max-height: 100% !important;
  object-fit: contain !important;
  display: block !important;
}


/* =========================================================================
   SECTION 4 — GENERAL BOOKING PAGES  (book_group.php, book_activity2.php)
   — still unconfirmed for pages beyond this one, kept to colour/font only.
   ========================================================================= */

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display) !important;
  font-weight: 500;
  color: var(--emerald) !important;
  letter-spacing: -0.02em;
  line-height: 1.1;
}

input[type="submit"], input[type="button"], button:not(.main_menu_btn):not(.context_menu_btn) {
  background: var(--gold) !important;
  color: var(--ink) !important;
  border: 1px solid var(--gold) !important;
}
input[type="submit"]:hover, input[type="button"]:hover, button:not(.main_menu_btn):not(.context_menu_btn):hover {
  background: transparent !important;
  color: var(--gold) !important;
  border-color: var(--gold) !important;
}

.dateAvailable, td.available, .calAvailable /* ADJUST ME */ {
  background-color: var(--gold-soft) !important;
  color: var(--ink) !important;
  border-radius: var(--radius);
}
.dateUnavailable, td.unavailable, .calUnavailable /* ADJUST ME */ {
  background-color: var(--cream) !important;
  color: rgba(6,37,28,0.35) !important;
}
.dateSelected, td.selected /* ADJUST ME */ {
  background-color: var(--emerald) !important;
  color: var(--cream) !important;
}

input[type="text"], input[type="password"], input[type="email"],
input[type="tel"], input[type="number"], select, textarea {
  font-family: var(--font-body) !important;
  background: #fff !important;
  color: var(--ink) !important;
  border: 1px solid var(--line) !important;
  border-radius: var(--radius) !important;
  padding: 9px 12px !important;
}
input:focus, select:focus, textarea:focus {
  outline: 2px solid var(--gold) !important;
  outline-offset: 2px;
  border-color: var(--gold) !important;
}

table.bookingHistory, table.statement /* ADJUST ME */ {
  width: 100%;
  border: 1px solid var(--line) !important;
}
table.bookingHistory th, table.statement th {
  background: var(--emerald) !important;
  color: var(--cream) !important;
  font-family: var(--font-display) !important;
  font-weight: 500;
  text-align: left;
  padding: 10px 12px;
}
table.bookingHistory td, table.statement td {
  border-bottom: 1px solid var(--line) !important;
  padding: 10px 12px;
}
table.bookingHistory tr:nth-child(even), table.statement tr:nth-child(even) {
  background: var(--cream) !important;
}

table {
text-shadow: none;
}
/* =========================================================================
   SECTION 5 — HOMEPAGE "FRONT DESK" TILES  (confirmed against
   scratchgolfer.css — .dc_grp_box and its children)
   ========================================================================= */

.dc_grp_box {
  border: 1px solid var(--line) !important;
  border-radius: var(--radius) !important;
  background: #fff !important;
  box-shadow: none !important;
  overflow: hidden !important;
  transition: border-color 0.35s var(--ease), transform 0.35s var(--ease);
}
.dc_grp_box:hover {
  border-color: var(--gold) !important;
  transform: translateY(-2px);
}

/* The invisible full-card link — no background/padding, same reasoning
   as .dc_maingrp_box_link on the category page. */
.dc_grp_box_floatlink {
  cursor: pointer;
}

/* Base stylesheet bug, not something introduced here: the global
   .dc_grp_item_rollover rule (outside any media query) defaults to
   display:block — always on. Only the desktop breakpoint (901px+)
   switches it to display:none with hover-to-reveal; below that width
   (tablet and mobile) nothing ever hides it, so it sits permanently on
   top of the real Select/View Statement buttons. Forced hidden by
   default at every breakpoint here; the existing :hover rule below
   still reveals it on desktop, and since touch devices have no real
   hover state, it simply stays hidden on tablet/mobile, letting the
   actual buttons underneath show and work normally. */
.dc_grp_item_rollover {
  display: none !important;
}

.dc_grp_box_title {
  background: var(--cream) !important;
  color: var(--emerald) !important;
  font-family: var(--font-display) !important;
  font-weight: 600 !important;
  font-size: 12px !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  height: auto !important;
  min-height: 50px; /* enough for two lines at this font-size, so a long
    title (e.g. "MEMBERSHIP RENEWAL REQUEST £1550.00") never needs more
    room than a short one (e.g. "CLUB DIARY") already reserves — every
    tile in a row ends up the same title-bar height regardless of text
    length, instead of only the longer ones growing taller. */
  display: flex !important;
  align-items: center !important;
  line-height: 1.4 !important;
  padding: 10px 14px !important;
  border-bottom: 1px solid var(--line) !important;
  box-sizing: border-box;
}

/* Height (161px) kept as the base stylesheet defines it — only the
   image's own scaling changes, so icons are fully visible instead of
   cropped, the same fix Section 3 needed for the category tiles. */
.dc_grp_box_img {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 14px;
  box-sizing: border-box;
}
.dc_grp_box_img img {
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  max-height: 100% !important;
  object-fit: contain !important;
  display: block !important;
}

/* Colour/type only on the base class — deliberately NOT touching
   `display` here, since the base stylesheet's own show/hide logic
   (display:none by default, display:block on .dc_grp_box:hover) needs
   to keep controlling visibility. Setting display:flex !important here
   directly (as an earlier version of this file did) overrides that
   default and makes the overlay permanently visible — that was a bug
   in my own CSS, not ESP's. */
.dc_grp_item_rollover {
  color: var(--cream) !important;
  font-family: var(--font-body) !important;
}

/* =========================================================================
   SECTION 6 — CALENDAR / DATE + TIME PICKER  (confirmed against
   calendar-select-date-time.html, Select_DC_Activity_Calendar.html,
   scratchgolfer.css, and elitelive-trust.css)

   Two different calendar layouts share the SAME class names
   (.cal_month_frame, .cal_box_weekrow, .cal_box_dateslot, etc.):
     - the date-picker page: two .cal_month_frame months sit side by
       side, statically, inside .calendar_container
     - the activity/event page (this round's fix): ONE month is shown
       at a time inside a horizontally-scrolling carousel
       (.el_ba2_cal_wrapper > .dc_calselect_scrollview > several
       .cal_month_frame, one per month) with < > nav buttons, using
       CSS scroll-snap so it always settles on a whole month. That
       carousel mechanism is ported from elitelive-trust.css (a fix
       already proven on another portal) and recoloured from its
       generic blue/green into this theme's emerald/gold/cream.
   Cell sizing (~50px date cells) is kept at the larger size requested
   earlier rather than reverting to trust's smaller 28px cells — only
   the carousel MECHANISM is adopted, not its scale.
   The .cal_month_frame flex/scroll-snap properties added below are
   harmless on the date-picker page: flex-basis/scroll-snap only do
   anything when an element is actually inside a flex/scroll container,
   so they're a no-op there and only activate inside the new carousel.
   ========================================================================= */

.calendar_container {
  max-width: 100% !important;
}

/* --- Carousel viewport (activity/event page only) ----------------------
   Fixed-width viewport that clips everything but the active month and
   hosts the < > nav buttons in its own left/right padding gutter, so
   they sit flush against the card rather than floating separately. */
.el_ba2_cal_wrapper {
  display: block !important;
  position: relative !important;
  width: 100% !important;
  max-width: 560px !important;
  min-width: 0 !important;
  margin: 0 auto !important;
  padding: 0 !important; /* was `0 32px` — that gutter made the card
    meet the arrows' INSIDE edge, not their outside edge as asked. No
    gutter at all: the card now spans the full wrapper width, and the
    arrows (still position:absolute, still z-index:10) sit on top of
    its corners instead of beside it in reserved space. */
  overflow-x: hidden !important; /* needed only to hide adjacent months
    peeking past the edge during the carousel scroll */
  overflow-y: visible !important;
  box-sizing: border-box !important;
  /* Same defensive reset as .dc_activity_box_body below: not setting a
     height is not the same as forcing auto — if something outside the
     files I can read sets one on this class, leaving it untouched
     doesn't override it. .cal_month_frame (the child) has its own
     min-height; without this, the wrapper around it has no guarantee
     of growing to match. */
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
}
.dc_calselect_scrollview {
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
}

.el_ba2_cal_left,
.el_ba2_cal_right {
  -webkit-appearance: none !important;
  appearance: none !important;
  position: absolute !important;
  top: 8px !important;
  width: 32px !important;
  height: 34px !important;
  margin: 0 !important;
  padding: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  border: 1px solid var(--line) !important;
  border-radius: 0 !important;
  background-color: var(--cream) !important;
  color: var(--emerald) !important;
  font-family: var(--font-display) !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  cursor: pointer !important;
  z-index: 10 !important;
  box-shadow: none !important;
  transition: background-color 0.2s ease, color 0.2s ease;
}
.el_ba2_cal_left:hover,
.el_ba2_cal_right:hover {
  background-color: var(--emerald) !important;
  color: var(--cream) !important;
}
.el_ba2_cal_left {
  left: 0 !important;
  right: auto !important;
  border-right: none !important;
  border-top-left-radius: 10px !important; /* matches .cal_month_frame's
    own corner radius, so the button reads as part of the card */
}
.el_ba2_cal_right {
  right: 0 !important;
  left: auto !important;
  border-left: none !important;
  border-top-right-radius: 10px !important;
}

/* The horizontally-scrolling track. Scroll-snap means however far the
   < > buttons scroll it (a fixed pixel amount, regardless of the
   calendar's current rendered width), the browser always settles
   exactly on a month boundary. */
.dc_calselect_scrollview {
  display: flex !important;
  flex-wrap: nowrap !important;
  align-items: flex-start !important;
  gap: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
  overflow-x: auto !important;
  overflow-y: visible !important; /* was hidden — this was the SECOND of
    two separate layers clipping the bottom row vertically; see the
    note on .el_ba2_cal_wrapper above for the first */
  box-sizing: border-box !important;
  scroll-snap-type: x mandatory !important;
  scroll-behavior: smooth !important;
  overscroll-behavior-x: contain !important;
  -webkit-overflow-scrolling: touch !important;
  scrollbar-width: none !important;
  -ms-overflow-style: none !important;
}
.dc_calselect_scrollview::-webkit-scrollbar {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
}

/* --- The month card itself — shared by both calendar layouts ----------- */
.cal_month_frame {
  background: #fff !important;
  border: 1px solid var(--line) !important;
  border-radius: 10px !important; /* deliberately larger than the 2px used
    sitewide — bigger standalone cards, and a visible rounded corner
    was asked for here. */
  width: 100% !important;
  max-width: 560px; /* matches the wrapper's own max-width exactly (no
    gutter subtracted any more — see .el_ba2_cal_wrapper) so the card's
    outside edges align with the arrows' outside edges */
  height: auto !important;
  min-height: 420px; /* was 320px — a 6-row month needs roughly this
    much; height:auto still governs actual sizing, this is just a
    sturdier floor */
  padding: 16px !important;
  box-sizing: border-box !important;
  box-shadow: 0 12px 28px -18px rgba(6,37,28,0.35);
}

/* Carousel-only sizing — SCOPED to .dc_calselect_scrollview, not applied
   to the bare .cal_month_frame class. v25 mistake: min-width:100% was
   put on the bare class on the (wrong) assumption that, like flex-basis,
   it would be inert outside a flex container. It isn't — min-width
   applies to any box, flex or not — so it force-stacked the date-picker
   page's two side-by-side months into one column each. flex-basis alone
   really is flex-context-only and was harmless, but it's scoped here
   too now so this whole block only ever touches the carousel. */
.dc_calselect_scrollview .cal_month_frame {
  flex: 0 0 100% !important;
  min-width: 100% !important;
  scroll-snap-align: start !important;
  scroll-snap-stop: always !important;
}

.cal_month_frame_title {
  color: var(--emerald) !important;
  font-family: var(--font-display) !important;
  font-weight: 600 !important;
  font-size: 16px !important;
  letter-spacing: -0.01em;
  margin-bottom: 16px !important;
}

/* Everything inside the frame fills the frame's inner width. */
.cal_box,
.cal_box_datesframe {
  width: 100% !important;
  font-size: 15px !important;
}

/* The seven-column split. Applies to the weekday header row and every
   date row alike (both are .cal_box_weekrow). minmax(0,1fr) lets columns
   shrink below their content width instead of forcing overflow. */
.cal_box_weekrow {
  display: grid !important;
  grid-template-columns: repeat(7, minmax(0, 1fr)) !important;
  gap: 4px !important;
  width: 100% !important;
  margin-bottom: 4px;
  text-align: center !important;
}

.cal_box_weekday_names {
  border-bottom: 1px solid var(--line) !important;
  padding-bottom: 6px;
  margin-bottom: 8px;
}

.cal_box_weekday {
  width: auto !important;
  display: block !important;
  font-family: var(--font-display) !important;
  font-weight: 600;
  font-size: 11px !important;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted) !important;
  white-space: nowrap;
}

/* Every kind of cell (available, past, unavailable, fully booked, blank
   filler) fills its grid column, with no fixed pixel width and no
   margin — the grid's gap provides the spacing instead. */
.cal_box_dateslot,
.cal_box_dateslot_past,
.cal_box_dateslot_notavail,
.cal_box_dateslot_fullybooked,
.cal_box_datespace {
  display: block !important;
  width: 100% !important;
  height: 48px !important;
  margin: 0 !important;
  box-sizing: border-box;
}

.cal_box_dateslot a,
.cal_box_dateslot p,
.cal_box_dateslot_past p,
.cal_box_dateslot_notavail a,
.cal_box_dateslot_notavail p,
.cal_box_dateslot_fullybooked p {
  display: block !important;
  width: 100% !important;
  height: 48px !important;
  line-height: 48px !important;
  margin: 0 !important;
  text-align: center;
  font-size: 15px !important;
  box-sizing: border-box;
  border-radius: 4px;
}

/* Available date — emerald; gold is reserved for the "rebook" state and
   hover accent so the two remain visually distinct. */
.cal_box_dateslot a {
  background: var(--emerald) !important;
  color: var(--cream) !important;
  font-family: var(--font-display) !important;
  font-weight: 500;
  transition: background 0.2s ease;
}
.cal_box_dateslot a:hover {
  background: var(--emerald-mid) !important;
}
.cal_box_dateslot a.rebookdate {
  background: var(--gold) !important;
  color: var(--ink) !important;
}

/* Past dates — plain muted numbers (base opacity of 0.2 was too faint at
   the enlarged size). */
.cal_box_dateslot p,
.cal_box_dateslot_past p {
  color: var(--muted) !important;
  opacity: 0.55 !important;
  font-family: var(--font-body) !important;
}

/* Unavailable / fully booked */
.cal_box_dateslot_notavail a,
.cal_box_dateslot_notavail p,
.cal_box_dateslot_fullybooked p {
  background: #B3543E !important; /* same muted red used for form errors */
  color: var(--cream) !important;
  opacity: 1 !important;
}

/* Time-slot popup — same swap from gold to emerald as the calendar
   above, for the same reason (matching your feedback). */
.fullsheet_container_available {
  background: var(--emerald) !important;
  border-top-color: var(--emerald-mid) !important;
  border-radius: 4px;
}
.fullsheet_container_available a {
  display: block;
  color: var(--cream) !important;
  font-family: var(--font-display) !important;
  font-weight: 500;
  text-decoration: none !important; /* base underlines these; the
    reference's version doesn't */
  text-align: center;
  padding: 10px 14px !important;
  border-radius: 20px !important; /* pill shape, matching the reference */
}
.fullsheet_container_available a.rebooktime {
  background: var(--gold) !important;
  color: var(--ink) !important;
}
.fullsheet_container_notavailable {
  background: #B3543E !important;
  border-top-color: #B3543E !important;
}

@media (max-width: 780px) {
  .cal_month_frame { margin: 0 auto 16px; }
  .el_ba2_cal_wrapper { max-width: 380px !important; padding: 0 !important; }
}

/* =========================================================================
   SECTION 7 — FRONT DESK TILE GRID  (confirmed against home.html — the
   wrapper turned out to be an unclassed `<div class="">`, directly
   inside .ah_segment, not a named class. Targeted structurally with
   :has() instead of guessing a class name.)
   ========================================================================= */

.ah_segment > div:has(> .dc_grp_box) {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 20px !important;
  width: 100% !important;
  box-sizing: border-box !important;
}
@media (max-width: 780px) {
  .ah_segment > div:has(> .dc_grp_box) {
    grid-template-columns: 1fr !important;
  }
}

/* Neutralise the base stylesheet's own fixed-width/inline-block sizing
   on .dc_grp_box (235px desktop / 320px tablet / 90% mobile via media
   queries) so each tile fills its grid cell instead. */
.dc_grp_box {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  height: auto !important; /* base stylesheet hardcodes height:190px in
    its desktop media query. Every other Front Desk tile fits inside
    that fine, but "Membership Renewal Request" has two button forms
    after its image (Select + View Statement) that no other tile has —
    combined with overflow:hidden on .dc_grp_box (set above, originally
    just to clip the image to the card's rounded corners), the extra
    content was being silently clipped off past 190px, making both
    buttons invisible rather than just visually cut short. */
  min-height: 190px;
}

/* The two button forms on tiles that have them (only "Membership
   Renewal Request" currently) — stacked vertically, not side by side.
   "View Statement" is long enough, at the sitewide button's letter-
   spacing and padding, that side by side with "Select" it overflowed
   the tile's width and got clipped to "VIEW". There's no spare width
   in a tile this narrow, but there's plenty of spare height below the
   image, so stacking avoids the overflow entirely rather than trying
   to shrink the text to fit. */
/* The two forms (Select / View Statement) are DIRECT children of
   .dc_grp_box in the real markup — no wrapping div around them at all.
   inline-block keeps them side by side using ordinary inline flow,
   which wraps the second one onto its own line automatically if it
   doesn't fit, with no artificial flex wrapper needed. */
.dc_grp_box form {
  display: inline-block;
  margin-top: 8px;
}
.dc_grp_box form + form {
  margin-left: 10px;
}
.dc_grp_box .dc_maingrp_box_btn {
  width: auto !important; /* was width:100% (stacked) in v37 — reverted
    per feedback to auto-width, side by side, with the padding below
    doing the work instead of forcing full width */
  padding: 10px 16px !important; /* was the sitewide button's 17px 34px —
    far too generous for two buttons sharing one narrow tile; this still
    gives the text clear breathing room on both sides without the pair
    overflowing the card */
  white-space: nowrap;
}
.dc_grp_box .dc_maingrp_box_btn_mv_left {
  /* secondary action — outline instead of the primary gold fill, same
     convention as .ESPAuthBoxbtn_Forgot */
  background: transparent !important;
  color: var(--emerald) !important;
  border: 1px solid var(--emerald) !important;
}
.dc_grp_box .dc_maingrp_box_btn_mv_left:hover {
  background: var(--emerald) !important;
  color: var(--cream) !important;
}

/* =========================================================================
   SECTION 8 — FRONT DESK HOVER OVERLAY + TIME-SLOT POPUP FRAME
   (confirmed against scratchgolfer.css)
   ========================================================================= */

/* .dc_grp_item_rollover had a hardcoded width:225px in the base
   stylesheet, sized to match the OLD fixed 235px tile. Now that
   .dc_grp_box is fluid (Section 7), the overlay needs to fill whatever
   size the tile actually is, not the old fixed one. .dc_grp_box already
   has position:relative from the base CSS, so inset:0 fills it exactly. */
.dc_grp_item_rollover {
  width: 100% !important;
  height: 100% !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  box-sizing: border-box;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 20px !important;
  background: rgba(6,37,28,0.88) !important;
  color: var(--cream) !important;
  font-family: var(--font-body) !important;
  font-size: 13px !important;
  line-height: 1.5 !important;
  /* display is deliberately NOT set here — the base stylesheet handles
     show/hide (display:none by default, display:block on
     .dc_grp_box:hover). Forcing display:flex !important on the bare
     class, as the previous version did, overrode BOTH states and made
     it permanently visible. Only the hover-scoped rule below sets
     display now, so the toggle behaviour is preserved. */
}
.dc_grp_box:hover .dc_grp_item_rollover {
  display: flex !important;
}

/* .activity_viewtimes_frame — was a fixed height:300px with the same
   harsh near-black shadow/border family as .ah_segment. Sized to 90% of
   its containing overlay instead (capped so it doesn't get enormous on
   very tall screens), centred both axes via the existing inset:0 +
   margin:auto already in the base CSS — it just needed an explicit
   width/height for that centring to have something concrete to centre. */
.activity_viewtimes_frame {
  /* v26 mistake, now fixed: sizing this to 90% of the containing block
     was right on the single-calendar golf page it was built for, but
     .activity_viewtimes_frame is the SAME shared class here, where the
     containing block is .ah_segment holding several stacked activity
     accordions at once — 90% of THAT height is enormous, which is why
     the popup was swallowing neighbouring activities below it. Fixed
     caps instead of percentages, so it can never grow past a sensible
     size regardless of which ancestor it's centred in. */
  width: auto !important;
  max-width: 420px !important;
  height: auto !important;
  max-height: 480px !important;
  overflow-y: auto;
  margin: auto !important;
  top: 0 !important;
  left: 0 !important;
  bottom: 0 !important;
  right: 0 !important;
  padding: 20px !important;
  background: #fff !important;
  border: 1px solid var(--line) !important;
  border-radius: 10px !important;
  box-shadow: 0 20px 45px -28px rgba(6,37,28,0.45) !important;
}
.activity_viewtimes_title {
  font-family: var(--font-display) !important;
  font-weight: 600 !important;
  font-size: 16px !important;
  color: var(--emerald) !important;
  border-bottom: 1px solid var(--line) !important;
  padding-bottom: 10px !important;
  margin-bottom: 14px !important;
}
.activity_viewtimes_close {
  color: #B3543E !important;
}

/* =========================================================================
   SECTION 9 — EVENT / ACTIVITY SELECTOR  (confirmed against
   event-selector.html and scratchgolfer.css — .dc_activity_box family)

   The "Select button drifts left on every row" bug: each time-slot row is
   a plain block containing a <form> that the base stylesheet floats
   right. The button (made taller by the sitewide button padding) stuck
   out below its row, and a float that overhangs its row pushes the NEXT
   row's float to sit left of it — so every row shifted further left.
   Fixed properly: each row is now a flex container (no floats), the
   button is pushed to the far right with margin-left:auto, and rows are
   taller so the button sits comfortably inside.
   ========================================================================= */

/* --- Event card (the collapsible "Body Combat" bar) -------------------- */
.dc_activity_box {
  background: var(--cream) !important;
  border: 1px solid var(--line) !important;
  border-radius: 6px;
  margin-bottom: 10px !important;
  overflow: hidden;
  transition: border-color 0.3s var(--ease), box-shadow 0.3s var(--ease);
}
.dc_activity_box:hover {
  background: var(--cream) !important;
  border-color: var(--gold) !important;
  box-shadow: 0 10px 24px -16px rgba(6,37,28,0.4) !important; /* replaces
    the base 2px 2px 3px #222 hover shadow */
}

.dc_activity_box_title {
  font-family: var(--font-display) !important;
  font-size: 18px !important;
  font-weight: 500 !important;
  letter-spacing: -0.02em;
  color: var(--emerald) !important;
}
.dc_activity_box_title_seemore {
  font-family: var(--font-display) !important;
  font-style: normal !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--emerald-mid) !important; /* was stock blue #5d88a8 */
}

/* --- Expanded panel ---------------------------------------------------- */
.dc_activity_box_body {
  background: #fff !important;
  border: 1px solid var(--line) !important; /* was 3px solid #C6C8B7 */
  border-radius: 4px;
  padding: 16px !important;
  margin-bottom: 20px;
  /* Defensive reset: the base stylesheet (scratchgolfer.css) sets no
     height or overflow on this element at all, so whatever was
     constraining it and forcing an internal scrollbar isn't confirmed
     in any file I've been able to read — most likely something in the
     resort demo theme CSS, which I can't fetch directly. height:auto /
     overflow:visible can only ever reveal MORE content, never hide
     anything further, so it's safe to force here without knowing the
     exact source. */
  height: auto !important;
  max-height: none !important;
  overflow: visible !important;
}
.dc_activity_box_body_desc {
  height: auto !important;
  max-height: none !important;
  overflow: visible !important;
}
/* Requested proactively, even without a screenshot showing it broken
   yet: same defensive treatment on the flextimes holder, so its own
   height can't become the next version of this same problem. */
.dc_activity_box_body_desc_ft_holder {
  height: auto !important;
  max-height: none !important;
  overflow: visible !important;
}
.dc_activity_box_body_desc {
  font-family: var(--font-body) !important;
  color: var(--ink) !important;
}
.dc_activity_box_body_desc_img img {
  display: block;
  max-width: 180px;
  margin: 0 auto;
}
.dc_timeslot_wrapper {
  border-top: 1px solid var(--line) !important;
}

/* --- Time-slot row: flex instead of floats ----------------------------- */
.dc_activity_box_body_desc_timeslot,
.dc_activity_box_body_desc_notimeslot {
  display: flex !important;
  align-items: center;
  gap: 16px;
  min-height: 72px !important;
  padding: 10px 18px !important;
  margin-bottom: 8px !important;
  border-radius: var(--radius) !important;
  font-family: var(--font-display) !important;
  font-size: 17px !important;
  font-weight: 500;
  line-height: 1.3 !important;
  box-sizing: border-box;
}
.dc_activity_box_body_desc_timeslot {
  background: var(--cream) !important;
  border: 1px solid var(--line);
  color: var(--ink) !important;
  transition: border-color 0.25s var(--ease), background 0.25s var(--ease);
}
.dc_activity_box_body_desc_timeslot:hover {
  background: var(--cream-2, #efe9d3) !important;
  border-color: var(--gold);
  box-shadow: none !important; /* base: 2px 2px 3px #222 */
}
.dc_activity_box_body_desc_notimeslot {
  background: #B3543E !important; /* was stock red #B51903 */
  color: var(--cream) !important;
}

/* Row contents: [date badge] [time text] ........ [Select].
   The time is a bare text node (an anonymous flex item, order 0), so the
   badge sits before it at order -1 and the form after it at order 1. */
.dc_cal_box {
  order: -1;
  flex: 0 0 auto;
  width: 48px !important;
  height: auto !important;
  border: 1px solid var(--line);
  border-radius: 4px;
  overflow: hidden;
}
.dc_cal_box:hover { box-shadow: none !important; }
.dc_cal_box_weekday {
  background: var(--emerald) !important; /* was stock blue #5d88a8 */
  color: var(--cream) !important;
  font-family: var(--font-display) !important;
  font-size: 10px !important;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  height: 16px !important;
  line-height: 16px !important;
}
.dc_cal_box_day {
  font-family: var(--font-display) !important;
  font-size: 20px !important;
  font-weight: 600;
  color: var(--ink) !important;
  height: 24px !important;
  line-height: 24px !important;
}
.dc_cal_box_month {
  font-family: var(--font-body) !important;
  font-size: 11px !important;
  color: var(--muted) !important;
  height: 16px !important;
  line-height: 16px !important;
}

.dc_activity_timeslot_form {
  order: 1;
  float: none !important;
  margin: 0 0 0 auto !important;
  padding: 0 !important;
  flex: 0 0 auto;
}
.dc_activity_timeslot_form .dc_activity_timeslot_btn,
.dc_activity_timeslot_btn {
  display: block !important;
  width: auto !important;
  min-width: 130px;
  margin: 0 !important;
  padding: 13px 26px !important;
  background: var(--gold) !important;
  color: var(--ink) !important;
  border: 1px solid var(--gold) !important;
  border-radius: var(--radius) !important;
}
.dc_activity_timeslot_btn:hover {
  background: transparent !important;
  color: var(--gold) !important;
}
.activity_viewtimes_iframe_wrapper {
height:90%;
}
/* --- Flex-times variant (same page family, same stock colours) ---------- */
.dc_activity_box_body_desc_flextimes_title {
  font-family: var(--font-display) !important;
  color: var(--emerald) !important;
  border-bottom: 1px solid var(--line) !important;
}
/* The base CSS lays these out as display:flex; flex-wrap:wrap on the
   container with min-width:160px + margin:10px per slot — loose enough
   that at tablet widths it can wrap unevenly (e.g. an orphaned slot
   alone on its own row) rather than filling the row cleanly. Explicit
   responsive columns instead: 4-up desktop, 3-up tablet, 2-up mobile. */
.dc_activity_box_body_desc_flextimes {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 10px !important;
  margin: 0 !important;
}
.dc_activity_box_body_desc_flextimes_slot,
.dc_activity_box_body_desc_flextimes_slot_noavail {
  flex: 1 1 calc(25% - 10px) !important;
  min-width: 130px !important;
  max-width: none !important;
  margin: 0 !important;
  height: 64px !important;
  border: 1px solid var(--line) !important; /* was translucent blue */
  border-radius: 4px;
  overflow: hidden;
  box-sizing: border-box;
}
@media (max-width: 900px) {
  .dc_activity_box_body_desc_flextimes_slot,
  .dc_activity_box_body_desc_flextimes_slot_noavail {
    flex: 1 1 calc(33.333% - 10px) !important;
  }
}
@media (max-width: 600px) {
  .dc_activity_box_body_desc_flextimes_slot,
  .dc_activity_box_body_desc_flextimes_slot_noavail {
    flex: 1 1 calc(50% - 10px) !important;
  }
}
.dc_activity_box_body_desc_flextimes_slot a {
  background: var(--emerald) !important; /* was olive #97af23 */
  color: var(--cream) !important;
  font-family: var(--font-display) !important;
  height: 100% !important;
  line-height: 64px !important; /* matches the slot's new 64px height */
  font-size: 16px !important;
}
.dc_activity_box_body_desc_flextimes_slot a:hover {
  background: var(--emerald-mid) !important; /* was translucent blue */
}
.dc_activity_box_body_desc_flextimes_slot_noavail {
  background: #B3543E !important; /* was darkred */
}



/* --- Filter row ("Date" select and "Find" box) -------------------------- */
#FltrDate,
.form_div_row_input_nosize {
  height: auto !important;
  min-height: 46px;
  line-height: 1.4 !important;   /* the select's text was being clipped */
  padding: 10px 14px !important;
  font-family: var(--font-body) !important;
  font-size: 15px !important;
  color: var(--ink) !important;   /* base was pale #888 */
  background: #fff !important;
  border: 1px solid var(--line) !important;
  border-radius: var(--radius) !important;
  box-sizing: border-box;
}
#sifterbox {
  width: 100%;
  max-width: 320px;
  min-height: 46px;
  padding: 11px 14px !important;
  font-family: var(--font-body) !important;
  font-size: 15px !important;
  border: 1px solid var(--line) !important; /* overrides inline 1px solid black */
  border-radius: var(--radius) !important;
  box-sizing: border-box;
  background: #fff !important;
}
#sifterbox:focus, #FltrDate:focus {
  outline: 2px solid var(--gold) !important;
  outline-offset: 2px;
}

/* On narrow screens let the row wrap so the button drops under the time
   instead of squeezing it. */
@media (max-width: 640px) {
  .dc_activity_box_body_desc_timeslot,
  .dc_activity_box_body_desc_notimeslot { flex-wrap: wrap; }
  .dc_activity_timeslot_form { flex: 1 0 100%; margin: 6px 0 0 0 !important; }
  .dc_activity_timeslot_btn { width: 100% !important; }
}

/* =========================================================================
   SECTION 10 — MESSAGE BOXES + NEW-MESSAGE BADGE  (confirmed against
   scratchgolfer.css — .msgbox, .msgbox_error / _ok / _warn,
   .new_message_indicator)

   The base styles are three loud gradient banners (stock red, olive
   green, orange) with light text. Recoloured into the theme's own
   palette, flat instead of gradient, with a slim inset accent bar on the
   left edge and the same soft-shadow treatment as the panels:
     ok    — emerald, cream text, gold accent
     warn  — soft gold, dark text, emerald accent
     error — the muted terracotta already used for unavailable dates and
             form errors, cream text, deeper-red accent
   ========================================================================= */



.msgbox {
  font-family: var(--font-display) !important;
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 0.01em;
  line-height: 1.5;
  padding: 14px 20px !important;
  border-radius: 6px;
  box-shadow: 0 12px 26px -18px rgba(6,37,28,0.5);
  background-image: none !important;   /* removes the stock gradients */
}
.msgbox p { margin-bottom: 0; }
.msgbox a {
  color: inherit !important;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.msgbox_ok {
  background-color: var(--emerald) !important;
  border: 1px solid var(--emerald-mid) !important;
  color: var(--cream) !important;
  box-shadow: inset 4px 0 0 var(--gold), 0 12px 26px -18px rgba(6,37,28,0.5);
}
.msgbox_warn {
  background-color: var(--gold-soft) !important;
  border: 1px solid var(--gold) !important;
  color: var(--ink) !important;
  box-shadow: inset 4px 0 0 var(--emerald), 0 12px 26px -18px rgba(6,37,28,0.5);
}
.msgbox_error {
  background-color: var(--danger) !important;
  border: 1px solid var(--danger-dark) !important;
  color: var(--cream) !important;
  box-shadow: inset 4px 0 0 var(--danger-dark), 0 12px 26px -18px rgba(6,37,28,0.5);
}

/* Unread-message counter: the base version is a bright red square with a
   white border and a hard 3px 3px 5px #111 shadow. Now a round gold
   badge with a paper-coloured ring and a soft shadow. Size, float and
   z-index (needed so it sits above neighbours) are left as the base
   stylesheet has them. */
.new_message_indicator {
  background-color: var(--gold) !important;
  color: var(--ink) !important;
  border: 2px solid var(--paper) !important;
  border-radius: 50%;
  font-family: var(--font-display) !important;
  font-size: 16px !important;
  font-weight: 700;
  line-height: 31px !important;
  box-shadow: 0 6px 14px -6px rgba(6,37,28,0.55) !important;
}

/* --- Noticeboard --*/
.notice_item {
	border: solid 1px var(--gold-soft);
    background-color: var(--paper);
    background-image: none;
}
.notice_item_cal{
background-color: var(--gold);
    border-top: 5px solid var(--emerald);
}

/* --- Long Book Ahead Calendar --- */


/* Month Slider */
/* Row Formatting */
.wpd_month_slider {
  position: relative;
  /*border-bottom: 4px solid #176093; */
  border-bottom: none;
  margin-bottom: 5px;
  max-width: 98%;
}

/* Left Arrow */
div.wpd_month_slider button.wpd_paddle.wpd_paddle_left {
    border-top-left-radius: 15px;
    border-bottom-left-radius: 15px; 
}
/* Right Arrow */
div.wpd_month_slider button.wpd_paddle.wpd_paddle_right {
    border-top-right-radius: 15px;
    border-bottom-right-radius: 15px;   
}

/* Chosen Month */
.wpd_months_container_item_chosen {
    background-color: var(--emerald);
    border: 1px solid var(--emerald);
    border-radius:5px;
}

.wpd_months_container_item {
    border-radius:5px;
}

.wpd_months_container_item:hover {
    background-color: var(--emerald-mid);
    color: white !important;
}

/* Chosen Date */
.wpd_days_container_item_chosen {
  background-color: var(--emerald);
  border-radius:5px;
}

.wpd_days_container_item {
  border-radius:5px;
}

.wpd_days_container_item:hover {
    background-color: var(--emerald-mid);
    color: white !important;
}

/* Available Times */
.wpd_times_container_item {
    border: 1px solid var(--emerald);
    border-radius: 5px;
    box-shadow: none !important;
}

div#ELWR_timeslottine{
    background-color: var(--emerald) !important;
}
div#ELWR_timeslotprice {
    color: var(--emerald);
    font-size: 24px !important;
    font-weight: bold;
}
#avail_datetimes_box {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 20px; /* adjust as needed for spacing between items */
    justify-content: stretch;
    max-width: 98%;
}


div#avail_datetimes_box.wpd_avail_datetimes_box div.wpd_times_container_item a {
    background-color: var(--emerald) !important;
    border-radius: 50px;
    font-size: 24px !important;
    margin: 6px 0px 0px 0px !important;
    }

div#avail_datetimes_box.wpd_avail_datetimes_box div.wpd_times_container_item a:hover {
    background-color: var(--emerald-mid) !important;
}

/* Hide Sun Image */
 .wpd_times_container_item > div:nth-child(3) {
    display:none;
}

/* Members Guest Toggle */
.membguestswitch-inner:before {
    background-color: var(--emerald);
}

/* Drop Down Lists */ 
.wpd_droplist{
	height:40px !important;
}
/* =========================================================================
   SECTION 11 — LOCATION / COURT SELECTION GRID  (confirmed against
   tabular-view.html — .elbr_grid-container and its children)

   These classes are defined in an inline <style> block embedded
   directly in this page's HTML — not in scratchgolfer.css — with the
   stock colours hardcoded there: pale blue background (#D3EAFC),
   a 5px bright-blue border (#2196F3), and vivid blue on every
   available cell (rgb(33,150,243)). None of those inline rules use
   !important, so matching !important here is enough to win regardless
   of the inline block's position in the page — no extra specificity
   fight needed.

   The SELECT buttons in each available cell already render gold —
   they're plain <button> elements, already caught by the sitewide
   button rule near the top of this file. Only the surrounding grid
   colours needed attention here.
   ========================================================================= */

.elbr_grid-container {
  background-color: var(--paper) !important; /* was #D3EAFC */
  border: 1px solid var(--line) !important;   /* was 5px solid #2196F3 */
  border-radius: 10px !important;
}

.elbr_grid-item {
  background-color: #fff !important;          /* was #D3EAFC */
  border-right: 1px solid var(--line) !important;  /* was #777 */
  border-top: 1px solid var(--line) !important;    /* was #777 */
  color: var(--ink) !important;                /* was black */
  font-family: var(--font-body) !important;
}

/* Available slot — a soft tint rather than the stock solid blue, since
   the cell already contains a solid gold Select button; a second
   saturated colour in the same cell would compete with it rather than
   support it. */
.elbr_grid-item_avail {
  background-color: rgba(6,78,59,0.06) !important; /* was rgb(33,150,243) */
}
.elbr_grid-item_avail button,
.elbr_grid-item.elbr_grid-item_avail button {
  /* The duplicated, two-class version of this selector isn't
     decorative — it's load-bearing. The sitewide generic rule is
     `button:not(.main_menu_btn):not(.context_menu_btn)`, and each
     :not() clause counts toward specificity as if it were the class
     itself, so that selector is actually TWO classes' worth of
     specificity, not zero — higher than a plain single-class selector
     like `.elbr_grid-item_avail button` on its own, even though it
     reads as "the generic rule". Both this cell's real classes
     (elbr_grid-item elbr_grid-item_avail, confirmed in the markup)
     together match that same weight, and this rule comes later in the
     cascade, so the tie resolves in its favour. */
  border: 1px solid var(--gold) !important; /* was #97AF23 */
  background-color: transparent !important; /* outline by default, fills
    on hover — the reverse of a solid fill, matching the same
    outline-to-fill pattern already used on .ESPAuthBoxbtn_Forgot */
  color: var(--gold) !important;
  font-family: var(--font-display) !important;
  font-weight: 600 !important;
  font-size: 12px !important;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  width: auto !important; /* base sets a fixed 95px, which left the
    SELECT text sitting off-centre inside it */
  padding: 10px 18px !important;
  transition: background-color 0.2s ease, color 0.2s ease;
}
.elbr_grid-item_avail button:hover,
.elbr_grid-item.elbr_grid-item_avail button:hover {
  background-color: var(--gold) !important;
  color: var(--ink) !important;
}

/* Unavailable slot — muted, matching the same "greyed out" language
   used for past calendar dates elsewhere in the theme. */
.elbr_grid-item_navail {
  background-color: var(--cream) !important;
  color: var(--muted) !important;
  opacity: 0.7;
}

/* Sticky header row / first column / corner tile */
.elbr_fixed_left,
.elbr_fixed_top,
.elbr_fixed_tilezero {
  background-color: #fff !important; /* already white in the base —
    restated so the sticky tiles can't show through as the old pale
    blue while scrolling */
  border-color: var(--line) !important;
}
.elbr_fixed_top {
  color: var(--emerald) !important;
  font-family: var(--font-display) !important;
  font-weight: 600 !important;
}
.elbr_fixed_left {
  font-family: var(--font-display) !important;
  color: var(--ink) !important;
  display: flex !important; /* vertically centres the hour label within
    its (button-height) row — base CSS only centred it horizontally */
  align-items: center !important;
  justify-content: center !important;
}

/* =========================================================================
   SECTION 12 — MY PROFILE + BOOKING HISTORY  (confirmed against
   my-profile.html and booking-history.html)

   Both pages' section-header bars, data tables and tab bar aren't
   defined in scratchgolfer.css (just bare padding/min-width rules there
   — .table_scores_border_padding, .table_scores_td_padding,
   .table_set_min_width) and have no page-level <style> block either, so
   their current grey/plain look is coming from the resort demo theme
   CSS, which I've never been able to fetch directly. Colour/font/
   padding overrides are safe regardless of the exact base values, the
   same reasoning used throughout this file — only layout-affecting
   properties would need the real source confirmed first, and nothing
   here touches those.
   ========================================================================= */

.table_scroller {
  padding-top: 12px !important;
}

/* The three profile tables (Details / Available Opt-Ins / Additional
   Details) and the booking-history table share this base class. */
.table_scores_border_padding {
  border: 1px solid var(--line) !important;
  border-radius: 8px !important;
  border-collapse: separate !important;
  border-spacing: 0 !important;
  overflow: hidden !important;
  background: #fff !important;
}

/* Section-header bar — "Details", "Available Opt-Ins", "Additional
   Details" (th[colspan="2"]) */
.table_scores_td_padding {
  background: var(--emerald) !important;
  color: var(--cream) !important;
  font-family: var(--font-display) !important;
  font-weight: 600 !important;
  font-size: 15px !important;
  letter-spacing: 0.02em;
  text-align: left !important;
  padding: 12px 16px !important;
}

/* Ordinary data rows in those same tables (Firstname/Surname/etc, and
   the Available Opt-Ins checkbox rows) */
.table_scores_border_padding td,
.table_scores_border_padding th:not(.table_scores_td_padding) {
  font-family: var(--font-body) !important;
  color: var(--ink) !important;
  border-top: 1px solid var(--line) !important;
  padding: 10px 16px !important;
}
.table_scores_border_padding tr:nth-child(even) td {
  background: var(--cream) !important;
}

.table_scores_border_padding input[type="text"],
.table_scores_border_padding input[type="email"],
.table_scores_border_padding input[type="tel"] {
  width: 100% !important;
  box-sizing: border-box !important;
  font-family: var(--font-body) !important;
  color: var(--ink) !important;
  background: #fff !important;
  border: 1px solid var(--line) !important;
  border-radius: var(--radius) !important;
  padding: 8px 10px !important;
}
.table_scores_border_padding input:focus {
  outline: 2px solid var(--gold) !important;
  outline-offset: 2px;
}

/* Opt-in checkboxes — tinted gold rather than the browser's default
   blue, matching the accent colour used everywhere else. */
.table_scores_border_padding input[type="checkbox"] {
  accent-color: var(--gold) !important;
  width: 18px !important;
  height: 18px !important;
}

/* Booking-history table — a plain, unclassed <table> inside
   .table_scroller, so targeted via that ancestor rather than its own
   class (it doesn't have one). */
.table_scroller table {
  width: 100% !important;
  border: 1px solid var(--line) !important;
  border-radius: 8px !important;
  border-collapse: separate !important;
  border-spacing: 0 !important;
  overflow: hidden !important;
  background: #fff !important;
}
.table_scroller table thead th {
  background: var(--emerald) !important;
  color: var(--cream) !important;
  font-family: var(--font-display) !important;
  font-weight: 600 !important;
  font-size: 13px !important;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-align: left !important;
  padding: 12px 16px !important;
}
.table_scroller table tbody td {
  font-family: var(--font-body) !important;
  color: var(--ink) !important;
  border-top: 1px solid var(--line) !important;
  padding: 12px 16px !important;
}
.table_scroller table tbody tr.even td {
  background: var(--cream) !important;
}
.table_scroller table tbody tr:hover td {
  background: rgba(6,78,59,0.06) !important;
}

/* Tab bar ("Bookings", and whatever other tabs exist alongside it) */
.EL_mngrs_office_tab_bar {
  border-bottom: 1px solid var(--line) !important;
  margin-bottom: 20px !important;
  display: flex !important;
  gap: 8px !important;
}
.tablinks {
  background: transparent !important;
  color: var(--emerald) !important;
  font-family: var(--font-display) !important;
  font-weight: 600 !important;
  font-size: 13px !important;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border: none !important;
  border-bottom: 3px solid transparent !important;
  border-radius: 0 !important;
  padding: 12px 20px !important;
  box-shadow: none !important;
  transform: none !important;
}
.tablinks:hover {
  color: var(--gold) !important;
  transform: none !important;
}
.tablinks.active {
  color: var(--emerald) !important;
  border-bottom-color: var(--gold) !important;
  background: var(--cream) !important;
}

/* =========================================================================
   SECTION 13 — MY DOCUMENTS ACCORDION  (confirmed against documents.html
   and scratchgolfer.css — .attachment_container and children)
   ========================================================================= */

.attachment_container {
  max-width: 100% !important;
  border: 1px solid var(--line) !important;
  border-radius: 8px !important;
  overflow: hidden !important;
  box-shadow: 0 12px 28px -18px rgba(6,37,28,0.3);
}

/* Folder header bar — was a grey gradient with an inset highlight */
.attachment_container_folder {
  background: var(--cream) !important;
  box-shadow: none !important;
  color: var(--emerald) !important;
  font-family: var(--font-display) !important;
  font-weight: 600 !important;
  font-size: 13px !important;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-shadow: none !important;
  border-bottom: 1px solid var(--line) !important;
}
.attachment_container_folder .attachment_image_folder {
  color: var(--gold) !important;
  font-size: 20px !important;
}
.attachment_container_folder .attachment_image_download {
  color: var(--emerald) !important;
}

.attachment_container_entry {
  border-top: 1px solid var(--line) !important;
}
.attachment_container_entry:hover {
  background-color: rgba(6,78,59,0.06) !important; /* was a light blue tint */
}

/* The row's content — switching to flex is what puts the filename and
   the date/time on one line: the bare filename text, the icon, and the
   date div (a separate element, see below) all become flex items
   automatically, and `float` on a flex item is simply ignored by the
   spec, so the icons' existing float:left/right become harmless rather
   than needing to be unset. */
.attachment_container_entry_spacer {
  display: flex !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 4px 10px;
  font-family: var(--font-body) !important;
  color: var(--ink) !important;
  font-size: 15px;
}

/* The date/time text has no class — it's an inline style in the real
   markup (style="margin-left:35px; font-size:12px; color:#AAAAAA"),
   the same pattern used elsewhere in this file for similarly unclassed
   elements. Targeted by that attribute instead of guessing a class.
   margin-left:auto pushes it to the right edge of the row — filename
   on the left, date on the right, rather than sitting right next to
   each other. */
.attachment_container_entry_spacer div[style*="margin-left:35px"] {
  margin-left: auto !important;
  color: var(--muted) !important;
  font-family: var(--font-body) !important;
  white-space: nowrap;
}

/* Icons — base stylesheet leaves .attachment_image_file/_folder
   completely empty, so there's nothing to override here, only to add.
   Sized up now that the date/time no longer needs its own line below
   the filename. */
.attachment_container_entry .attachment_image_file {
  font-size: 28px !important;
  color: var(--emerald) !important;
}

/* The green "viewed/complete" checkmark is an inline style
   (style="color: green") on a few entries — recoloured to the theme's
   emerald rather than the browser-default green. */
.attachment_container_entry div[style*="color: green"] {
  color: var(--emerald) !important;
}

/* =========================================================================
   END OF OVERRIDES
   ========================================================================= */