/************************************************************
 Slide Ranch — Classic Events & Registration (CSS-only uplift)
 Targets: event.jsp, eventRegistration.jsp, eventRegistrationSave.do
 Scope: classic page containers under #content
************************************************************/

/* ---- Design tokens (tweak freely) ---- */
:root {
  --sr-bg: #F7F8FA;
  --sr-card: #FFFFFF;
  --sr-text: #17212B;
  --sr-muted: #667789;

  --sr-accent: #2E6E3E;                /* primary green */
  --sr-accent-weak: rgba(46,110,62,.14);
  --sr-danger: #C73939;

  --sr-border: #DDE2E8;
  --sr-border-strong: #C9D1DA;

  --sr-radius: 14px;                   /* card corners */
  --sr-radius-sm: 10px;                /* input corners */
  --sr-radius-btn: 10px;               /* 10px CTA corners */
  --sr-shadow: 0 10px 30px rgba(0,0,0,.08);

  --sr-form-max: 1400px;               /* wider desktop container */
  --sr-pad: clamp(16px, 2.2vw, 40px);
  --sr-field-h: 46px;
}

/* Optional web font (uncomment if allowed)
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700;800&display=swap');
html, body { font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; }
*/

/* ---- Global background behind classic content ---- */
#content { background: var(--sr-bg); }

/* ---- Container width & centering for classic pages ---- */
#content .np-content,
#content > .np-content,
#content .eventDetails,
#content .eventRegistration,
#content form {
  max-width: var(--sr-form-max) !important;
  margin-inline: auto !important;
  padding-inline: var(--sr-pad) !important;
  box-sizing: border-box;
}

/* ---- Card surfaces for main blocks ---- */
#content .eventDetails,
#content .eventBody,
#content .eventSummary,
#content .eventDescription,
#content .eventRegistration,
#content form .section,
#content form .np-section,
#content form .formSection,
#content form .panel,
#content form#eventRegistrationForm,
#content form[action*="eventRegistrationSave.do"] {
  background: var(--sr-card);
  border: 1px solid var(--sr-border);
  border-radius: var(--sr-radius);
  box-shadow: var(--sr-shadow);
  padding: clamp(18px, 2vw, 32px);
  margin: clamp(12px, 1.2vw, 24px) 0;
}

/* ---- Titles ---- */
#content h1, #content .pageTitle, #content h2 {
  color: var(--sr-text);
  font-weight: 800;
  line-height: 1.15;
  margin: 8px 0 14px;
}
#content p, #content li { color: var(--sr-text); }

/* ---- Event Landing: upgrade the CTA link/button ---- */
#content a.button,
#content a[href*="eventRegistration.jsp"],
#content a[href*="eventRegistrationSave.do"] {
  display: inline-block;
  background: var(--sr-accent);
  color: #fff !important;
  font-weight: 800;
  text-decoration: none;
  border: none;
  border-radius: var(--sr-radius-btn);
  padding: 14px 24px;
  box-shadow: 0 8px 18px rgba(46,110,62,.24);
  transition: filter .15s ease, transform .03s ease, box-shadow .15s ease;
}
#content a.button:hover,
#content a[href*="eventRegistration.jsp"]:hover {
  filter: brightness(1.05);
}
#content a.button:active { transform: translateY(1px); }

/* ---- Inputs (text/select/textarea) ---- */
#content input[type="text"],
#content input[type="email"],
#content input[type="tel"],
#content input[type="number"],
#content input[type="search"],
#content input[type="date"],
#content input[type="password"],
#content select,
#content textarea {
  width: 100%;
  height: var(--sr-field-h);
  padding: 10px 12px;
  border-radius: var(--sr-radius-sm);
  border: 1.5px solid var(--sr-border);
  background: #fff;
  color: var(--sr-text);
  font-size: 16px;
  outline: none;
  transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
  box-sizing: border-box;
}
#content textarea { min-height: 120px; height: auto; }
#content input:hover, #content select:hover, #content textarea:hover {
  border-color: var(--sr-border-strong);
}
#content input:focus, #content select:focus, #content textarea:focus {
  border-color: var(--sr-accent);
  box-shadow: 0 0 0 3px var(--sr-accent-weak);
}

/* ---- Radios & checkboxes ---- */
#content input[type="radio"], #content input[type="checkbox"] {
  width: 18px; height: 18px; margin-right: 8px; transform: translateY(2px);
  accent-color: var(--sr-accent); /* modern browsers */
}

/* ---- Two-column grid for rows on wider screens ---- */
#content .row, 
#content .formRow, 
#content .inline {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}
@media (min-width: 760px) {
  #content .row, #content .formRow, #content .inline {
    grid-template-columns: repeat(12, 1fr);
  }
  #content .row > *, #content .formRow > *, #content .inline > * {
    grid-column: span 6; /* 2-up default */
  }
  #content .full { grid-column: 1 / -1; }
  #content .third { grid-column: span 4; }
}

/* ---- Waiver block: compact + scrollable ---- */
#content #waiver, 
#content .waiver, 
#content [class*="waiver"] {
  max-height: 240px;
  overflow: auto;
  border: 1px solid var(--sr-border);
  border-radius: var(--sr-radius-sm);
  background: #FBFCFD;
  padding: 12px 14px;
}

/* ---- Error / validation messages ---- */
#content .error, 
#content .field-error, 
#content .validationMessage {
  color: var(--sr-danger);
  background: #FBECEC;
  border: 1px solid #F4C0C0;
  border-radius: 10px;
  padding: 8px 10px;
  margin-top: 6px;
  font-size: 14px;
}
#content :invalid { border-color: var(--sr-danger); }

/* ---- Price / badges (if amounts appear) ---- */
#content .price, 
#content .amount, 
#content .admission-amount, 
#content [class*="Amount"] {
  font-weight: 800;
  color: var(--sr-accent);
  background: #E8F3EB;
  border-radius: 999px;
  padding: 2px 10px;
  display: inline-block;
}

/* ---- Primary + secondary CTAs in forms ---- */
#content button,
#content .button,
#content input[type="submit"] {
  display: inline-block;
  border: none;
  border-radius: var(--sr-radius-btn) !important;   /* 10px */
  padding: 14px 22px;
  font-weight: 800;
  background: var(--sr-accent);
  color: #fff !important;
  box-shadow: 0 8px 18px rgba(46,110,62,.24);
  cursor: pointer;
  transition: filter .15s ease, transform .03s ease, box-shadow .15s ease;
}
#content button:hover,
#content .button:hover,
#content input[type="submit"]:hover { filter: brightness(1.05); }
#content button:active,
#content .button:active,
#content input[type="submit"]:active { transform: translateY(1px); }

#content .button.secondary,
#content [class*="secondary"] {
  background: transparent;
  color: var(--sr-accent) !important;
  border: 1.5px solid var(--sr-accent);
  box-shadow: none;
}

/* ---- Info pills / tabs (if present) ---- */
#content [role="tablist"] button,
#content .pill,
#content .toggleGroup button {
  border-radius: 999px;
  border: 1.5px solid var(--sr-border);
  background: #fff;
  padding: 10px 14px;
  min-height: 40px;
  font-weight: 700;
}
#content .pill.is-active,
#content .toggleGroup button[aria-selected="true"] {
  border-color: var(--sr-accent);
  background: var(--sr-accent-weak);
}

/* ---- Small polish ---- */
#content a[href*="neonone.com"] { color: var(--sr-muted); font-size: 12px; }
#content p:contains("Internet Explorer") { display: none !important; } /* legacy notice */
@media (max-width: 640px) {
  #content .np-content { padding-inline: 16px !important; }
}
/***** HOTFIX: tighten scope + restore theme + fix width *****/

/* 1) Put the site background back (don’t repaint the theme) */
#content { background: transparent !important; }

/* 2) Ensure classic containers are wide (desktop) but not squeezed */
#content .np-content,
#content > .np-content {
  max-width: 1360px !important;      /* adjust if you want 1200–1440 */
  width: 100% !important;
  margin-inline: auto !important;
  padding-inline: clamp(12px, 2vw, 36px) !important;
  box-sizing: border-box;
}

/* 3) Don’t “card-ify” the entire <form> wrapper—only its sections */
#content form,
#content .eventRegistration {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
}

/* Keep cards ONLY on inner sections (safe) */
#content form .section,
#content form .np-section,
#content form .formSection,
#content form .panel,
#content .eventDetails,
#content .eventBody,
#content .eventSummary,
#content .eventDescription {
  background: #fff;
  border: 1px solid #DDE2E8;
  border-radius: 14px;
  box-shadow: 0 10px 30px rgba(0,0,0,.08);
  padding: clamp(18px, 2vw, 32px);
  margin: clamp(12px, 1.2vw, 24px) 0;
}

/* 4) Re-scope the grid so we don’t touch non-form rows */
#content .row,
#content .formRow,
#content .inline { display: block !important; } /* reset any global grid */

#content form .row,
#content form .formRow,
#content form .inline {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 12px !important;
}
@media (min-width: 760px) {
  #content form .row,
  #content form .formRow,
  #content form .inline {
    grid-template-columns: repeat(12, 1fr) !important;
  }
  #content form .row > *,
  #content form .formRow > *,
  #content form .inline > * { grid-column: span 6 !important; }
  #content form .full { grid-column: 1 / -1 !important; }
  #content form .third { grid-column: span 4 !important; }
}

/* 5) Keep the 10px CTA radius without shrinking buttons elsewhere */
#content form button,
#content form .button,
#content form input[type="submit"],
#content a[href*="eventRegistration.jsp"] {
  border-radius: 10px !important;
}

/* 6) Waiver stays scrollable—but only inside forms */
#content form #waiver,
#content form .waiver,
#content form [class*="waiver"] {
  max-height: 240px !important;
  overflow: auto !important;
  border: 1px solid #DDE2E8;
  border-radius: 10px;
  background: #FBFCFD;
  padding: 12px 14px;
}
/* ==== Container wideners: Event landing + registration ===== */

/* 1) Widen the event landing card */
#content .eventDetails {
  width: 100% !important;
  max-width: 1200px !important;    /* adjust up/down as needed */
  margin-inline: auto !important;
}

/* 2) Widen the registration form shell */
#content .eventRegistration,
#content form#eventRegistrationForm,
#content form[action*="eventRegistrationSave.do"] {
  width: 100% !important;
  max-width: 1440px !important;    /* match the landing page */
  margin-inline: auto !important;
}

/* 3) Ensure inner sections don’t shrink themselves */
#content .eventRegistration > .section,
#content .eventRegistration > .np-section,
#content form#eventRegistrationForm > .section,
#content form[action*="eventRegistrationSave.do"] > .section {
  width: 100% !important;
}
/* Hide the ZIP code suffix field (ZIP+4) */
#content input[name*="zipSuffix"],
#content input[id*="zipSuffix"],
#content input[name*="zip_suffix"],
#content input[id*="zip_suffix"],
#content input[name*="zipExt"],
#content input[id*="zipExt"],
#content label[for*="zipSuffix"],
#content label[for*="zip_suffix"],
#content label[for*="zipExt"] {
  display: none !important;
}
/* Collapse spacing left behind by hidden suffix */
#content .formRow:has(input[name*="zipSuffix"]) {
  margin-bottom: 0 !important;
}
/* One-liner: hide ZIP+4 suffix and dash */
#content input[name*="zipSuffix"], 
#content input[id*="zipSuffix"], 
#content input[name*="zip_suffix"], 
#content input[id*="zip_suffix"], 
#content input[name*="zipExt"], 
#content input[id*="zipExt"],
#content input[name*="zip"] + *,
#content input[name*="zip"] + * + * { display: none !important; }

/* Classic Neon: widen & center event + registration containers only */
@media (min-width: 992px) {
  /* Event landing card */
  #content .eventDetails {
    width: 100%;
    max-width: 1440px;          /* try 1200–1440px */
    margin-inline: auto;
    padding-inline: clamp(16px, 2vw, 40px);
    box-sizing: border-box;
  }

  /* Registration shell(s) */
  #content .eventRegistration,
  #content form#eventRegistrationForm,
  #content form[action*="eventRegistrationSave.do"] {
    width: 100%;
    max-width: 1440px;          /* match landing card */
    margin-inline: auto;
    padding-inline: clamp(16px, 2vw, 40px);
    box-sizing: border-box;
  }

  /* Make sure inner sections don’t self-shrink */
  #content .eventRegistration > .section,
  #content .eventRegistration > .np-section,
  #content form#eventRegistrationForm > .section,
  #content form[action*="eventRegistrationSave.do"] > .section {
    width: 100%;
  }
}

/* Optional: gentle max width on the overall classic content wrapper */
@media (min-width: 992px) {
  #content .np-content {
    max-width: 1400px;          /* guardrail, not required */
    margin-inline: auto;
  }
}
/* Extend modern CTA styling to NeonCRM's .neoncrm-button */
#content .neoncrm-button,
.neoncrm-button,
#content .neoncrm-button-primary {
  border-radius: 10px !important;
  background: #2E6E3E !important;
  color: #fff !important;
  font-weight: 800;
  padding: 14px 24px;
  border: none;
  box-shadow: 0 8px 18px rgba(46,110,62,.24);
  transition: filter .15s ease, transform .03s ease, box-shadow .15s ease;
  cursor: pointer;
}

/* Hover & active states */
.neoncrm-button:hover,
#content .neoncrm-button:hover {
  filter: brightness(1.05);
}

.neoncrm-button:active,
#content .neoncrm-button:active {
  transform: translateY(1px);
}
/* === Unify CTA styling with donation form === */
:root {
  --sr-accent: #2E6E3E;
  --sr-accent-shadow: rgba(46,110,62,.24);
}

#content .neoncrm-button,
#content .button,
#content input[type="submit"],
#content button[type="submit"] {
  background: var(--sr-accent) !important;
  color: #fff !important;
  border: none !important;
  border-radius: 10px !important;
  font-weight: 800 !important;
  line-height: 1 !important;
  padding: 14px 24px !important;            /* ~46–48px tall */
  box-shadow: 0 8px 18px var(--sr-accent-shadow) !important;
  transition: filter .15s ease, transform .03s ease, box-shadow .15s ease !important;
  cursor: pointer !important;
  display: inline-block;
}

#content .neoncrm-button:hover,
#content .button:hover,
#content input[type="submit"]:hover,
#content button[type="submit"]:hover {
  filter: brightness(1.05) !important;
}

#content .neoncrm-button:active,
#content .button:active,
#content input[type="submit"]:active,
#content button[type="submit"]:active {
  transform: translateY(1px) !important;
}

/* Disabled state parity */
#content .neoncrm-button:disabled,
#content input[type="submit"]:disabled,
#content button[type="submit"]:disabled {
  opacity: .6 !important;
  cursor: not-allowed !important;
  box-shadow: none !important;
}

/* Focus ring for accessibility (matches form vibe) */
#content .neoncrm-button:focus-visible,
#content input[type="submit"]:focus-visible,
#content button[type="submit"]:focus-visible {
  outline: none !important;
  box-shadow: 0 0 0 3px rgba(46,110,62,.14), 0 8px 18px var(--sr-accent-shadow) !important;
}