/* ============================================================================
   AT Sports Court Designer — Modern "Bold & Sporty / Tech" theme overlay
   ----------------------------------------------------------------------------
   Loaded AFTER atscourtstyle.css to restyle the UI without touching markup or
   behavior. Keeps the AT Sports brand palette (navy + red) and adds a crisp,
   tech-dashboard feel: precise hairlines, card surfaces, mono indices,
   consistent type scale, and glow focus states.

   NOTE: We deliberately do NOT restyle #court_right_content_forCanvas or its
   children — that element is captured for the PNG download, so styling it would
   leak into the downloaded image.
   ============================================================================ */

:root {
  --ats-navy: #23262b;
  --ats-navy-deep: #141619;
  --ats-navy-light: #3c4046;
  --ats-red: #1c1e22;
  --ats-red-bright: #34383e;
  --ats-ink: #1a1c1f;
  --ats-muted: #737880;
  --ats-panel: #f4f5f6;
  --ats-surface: #ffffff;
  --ats-line: #e2e4e7;
  --ats-line-soft: #edeef0;
  --ats-radius: 10px;
  --ats-radius-sm: 8px;
  --ats-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.08);
  --ats-shadow-md: 0 8px 20px rgba(0, 0, 0, 0.12);
  --ats-ease: 0.16s cubic-bezier(0.4, 0, 0.2, 1);
  --ats-mono: ui-monospace, "SF Mono", "Roboto Mono", Menlo, Consolas, monospace;
  --ats-header-h: 70px;
}

/* ---- Global typography ---------------------------------------------------- */
body,
.court_main {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: var(--ats-ink);
}

/* ---- Shell ---------------------------------------------------------------- */
.court_main {
  gap: 0;
  background: var(--ats-surface);
}

.court_left {
  background: linear-gradient(180deg, #f7f8f9 0%, var(--ats-panel) 100%) !important;
  margin-right: 0 !important;
}

/* ---- Headers: identical height so the red accent stripe lines up ---------- */
.court_left h2,
.atscd-header {
  height: var(--ats-header-h);
  min-height: var(--ats-header-h);
  box-sizing: border-box;
  display: flex;
  align-items: center;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  /* Vertical gradient is identical at every x, so the sidebar + preview
     headers form one seamless bar regardless of column widths. */
  background: linear-gradient(180deg, #2b2f36 0%, #16181c 100%) !important;
  border-bottom: 3px solid var(--ats-red) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.court_left h2 {
  padding-left: 20px !important;
  padding-right: 20px !important;
}
.atscd-header {
  justify-content: space-between;
  padding-left: 20px !important;
  padding-right: 20px !important;
}

.court_left h2,
.court_right h2 {
  display: flex !important;
  align-items: center;
  margin: 0 !important;
  top: 0 !important;
  text-transform: uppercase;
  letter-spacing: 2.4px;
  font-weight: 800 !important;
  font-size: 21px !important;
  line-height: 1 !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
}

/* Glowing red accent marker before each top title (no markup change) */
.court_left h2::before,
.court_right h2::before {
  content: "";
  flex: 0 0 auto;
  width: 5px;
  height: 28px;
  margin-right: 14px;
  border-radius: 3px;
  background: linear-gradient(180deg, #3a3e45 0%, var(--ats-red-bright) 100%);
  box-shadow: 0 0 12px rgba(0, 0, 0, 0.75);
}

/* ---- Section headers ("Sport", "Color", "Add Logos") --------------------- */
.court_left_content h4.section-title {
  position: relative;
  display: flex;
  align-items: center;
  background: linear-gradient(90deg, #edeef0 0%, #f4f5f6 70%) !important;
  color: var(--ats-navy) !important;
  text-transform: uppercase;
  letter-spacing: 2.2px;
  font-weight: 800 !important;
  font-size: 15px !important;
  padding: 16px 20px 16px 24px !important;
  border: none !important;
  border-bottom: 1px solid var(--ats-line) !important;
  border-top: 1px solid var(--ats-line-soft) !important;
}
/* Glowing red accent bar (replaces the flat left border) */
.court_left_content h4.section-title::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 5px;
  background: linear-gradient(180deg, #3a3e45 0%, var(--ats-red-bright) 100%);
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.55);
}

/* Sub-headers ("Tennis" / "Pickleball" under Color) */
.color-section-title {
  background: #edeef0 !important;
  color: var(--ats-navy) !important;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  font-weight: 700 !important;
  font-size: 12px !important;
  padding: 9px 20px 9px 20px !important;
  border-bottom: 1px solid var(--ats-line);
}

/* ---- Sidebar body text scale --------------------------------------------- */
.sidenav-section {
  font-size: 15px;
  padding: 12px 22px;
}
.ats-container {
  font-size: 16px;
  padding-top: 4px;
  padding-bottom: 4px;
  color: var(--ats-ink);
  transition: color var(--ats-ease);
}
.ats-container:hover {
  color: var(--ats-navy);
}
.atscd-drpdwn label,
.pickballcourt-drpdwn label,
.filterarealeft {
  font-size: 15px !important;
  font-weight: 600;
  color: var(--ats-ink);
}

/* ---- Custom radios / checkboxes ------------------------------------------ */
.checkmark,
.chckbx-checkmark {
  height: 19px;
  width: 19px;
  background-color: #fff;
  border: 2px solid #c4c7cd;
  box-shadow: var(--ats-shadow-sm);
  transition: background-color var(--ats-ease), border-color var(--ats-ease),
    box-shadow var(--ats-ease);
}
.ats-container:hover input ~ .checkmark,
.chckbx-cntnr:hover input ~ .chckbx-checkmark {
  border-color: var(--ats-red);
}
.ats-container input:checked ~ .checkmark {
  background-color: var(--ats-red) !important;
  border-color: var(--ats-red);
}
.chckbx-cntnr input:checked ~ .chckbx-checkmark {
  background-color: var(--ats-navy) !important;
  border-color: var(--ats-navy);
}
.ats-container input:focus-visible ~ .checkmark,
.chckbx-cntnr input:focus-visible ~ .chckbx-checkmark {
  box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.28);
}

/* ---- Selects ------------------------------------------------------------- */
.atscd-drpdwn select,
.pickballcourt-drpdwn select,
#courtlayout,
.pickleballcourts,
#tennisbballcourts,
#picklebballcourts {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  border: 1.5px solid var(--ats-line) !important;
  border-radius: var(--ats-radius-sm);
  background-color: #fff;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%231b355e' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  padding: 10px 36px 10px 12px !important;
  font-family: "Outfit", sans-serif;
  font-size: 15px;
  color: var(--ats-ink);
  cursor: pointer;
  transition: border-color var(--ats-ease), box-shadow var(--ats-ease);
}
.atscd-drpdwn select:hover,
.pickballcourt-drpdwn select:hover {
  border-color: #b6bac0 !important;
}
.atscd-drpdwn select:focus,
.pickballcourt-drpdwn select:focus {
  border-color: var(--ats-navy) !important;
  box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.16);
  outline: none;
}

/* ===========================================================================
   COLOR ROWS
   Shared color control: a flex row [swatch] [name input] that fills its cell.
   =========================================================================== */
.color-wrapper {
  display: flex !important;
  align-items: center;
  gap: 8px;
  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important;
}
.color-selected {
  flex: 0 0 auto;
  width: 22px !important;
  height: 22px !important;
  margin-right: 0 !important;
  border: 2px solid #fff !important;
  box-shadow: 0 0 0 1px var(--ats-line), var(--ats-shadow-sm);
  transition: transform var(--ats-ease), box-shadow var(--ats-ease);
}
/* "No Fill" swatch: the red slash is an absolutely-positioned ::after, so the
   dot itself must be its containing box (some holders, e.g. the basketball Key,
   are static and the slash otherwise lands outside the circle). */
.color-selected.no-fill {
  position: relative;
  overflow: hidden;
  border-radius: 50%;
}
.color-selected.no-fill::after {
  inset: 0;
  width: auto;
  height: auto;
  max-width: none;
  max-height: none;
  margin: 0;
  border-radius: 50%;
}
.color-selected:hover {
  transform: scale(1.12);
  box-shadow: 0 0 0 1px var(--ats-red), var(--ats-shadow-md);
}
.filterarea span input,
.filterarea input[type="text"] {
  flex: 1 1 auto !important;
  width: auto !important;
  min-width: 0 !important;
  margin-left: 0 !important;
  border-radius: var(--ats-radius-sm) !important;
  border: 1.5px solid var(--ats-line) !important;
  padding: 9px 10px !important;
  font-size: 13px !important;
  font-family: "Outfit", sans-serif;
  color: var(--ats-ink);
  background: #fff;
  cursor: pointer;
  transition: border-color var(--ats-ease), box-shadow var(--ats-ease);
}
.filterarea span input:focus,
.filterarea input[type="text"]:focus {
  border-color: var(--ats-navy) !important;
  box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.16);
  outline: none;
}

/* Single-value rows (Tennis / Basketball): label + control, vertically tidy */
.filterarea .filterarealeft {
  vertical-align: middle;
}
.filterarea .filterarearight {
  vertical-align: middle;
}

/* ---- Multi-court rows: responsive 2-up grid of aligned cards -------------- */
.kitchen-color-selector {
  display: grid !important;
  grid-template-columns: 1fr; /* single full-width column so names never truncate */
  gap: 8px;
  width: 100%;
  box-sizing: border-box;
  margin: 6px 0 4px;
  padding: 0;
}
.kitchen-group {
  width: auto !important;
  min-width: 0;
  align-items: center;
  gap: 7px;
  background: var(--ats-surface);
  border: 1px solid var(--ats-line);
  border-radius: var(--ats-radius-sm);
  box-shadow: var(--ats-shadow-sm);
  padding: 7px 9px;
  box-sizing: border-box;
}
/* Only flex the VISIBLE groups — the JS hides unused courts via inline
   display:none, so we must not force-display them. */
.kitchen-group:not([style*="none"]) {
  display: flex !important;
}
.kitchen-group .kitchen-number {
  flex: 0 0 auto;
  width: 14px;
  margin: 0 !important;
  text-align: center;
  font-family: var(--ats-mono);
  font-size: 12px;
  font-weight: 700;
  color: var(--ats-navy);
}
.kitchen-group .filterarearight.kitchen-color {
  width: auto !important;
  flex: 1 1 auto;
  min-width: 0;
  margin: 0 !important;
}

/* Color-picker dropdown: keep it from blowing out the narrow column */
.color-picker {
  width: 210px !important;
  max-width: 80vw;
}

/* ---- Logo upload dropzone ------------------------------------------------- */
#uploadContainer {
  border: 2px dashed #c4c7cd;
  border-radius: var(--ats-radius);
  background: #fff;
  color: var(--ats-navy);
  font-weight: 600;
  font-size: 18px;
  transition: border-color var(--ats-ease), background-color var(--ats-ease),
    box-shadow var(--ats-ease);
}
#uploadContainer p {
  font-size: 18px;
}
#uploadContainer:hover {
  border-color: var(--ats-red);
  background: #f4f5f6;
  box-shadow: var(--ats-shadow-sm);
}
/* In 3D the upload dropzone gets a "disabled" class. Keep it clickable (dimmed
   only) — its click handler switches to 2D first, so uploading still works from
   the default 3D view instead of appearing broken. */
#uploadContainer.disabled {
  pointer-events: auto !important;
  opacity: 0.55;
}
#uploadContainer.disabled:hover {
  opacity: 1;
  border-color: var(--ats-red);
}
#clearBtn {
  color: var(--ats-red);
  font-weight: 600;
  transition: color var(--ats-ease);
}

/* ---- Primary action: Download button ------------------------------------- */
#exportandsend {
  background: linear-gradient(135deg, var(--ats-red-bright), var(--ats-red)) !important;
  color: #fff !important;
  border: none !important;
  border-radius: var(--ats-radius) !important;
  padding: 16px !important;
  font-weight: 800 !important;
  font-size: 16px !important;
  text-transform: uppercase;
  letter-spacing: 1.6px;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.35);
  transition: transform var(--ats-ease), box-shadow var(--ats-ease),
    filter var(--ats-ease);
}
#exportandsend:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.45);
  filter: brightness(1.06);
}
#exportandsend:active {
  transform: translateY(0);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.4);
}
#exportandsend:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.35), 0 6px 16px rgba(0, 0, 0, 0.35);
}
.sidenav-bottom-features .export-btn:last-child {
  padding: 4px 22px 22px;
}

/* ---- 3D / view controls (3D, fullscreen, pause, help) -------------------- */
.controlsThreeDee button {
  background: linear-gradient(135deg, var(--ats-red-bright), var(--ats-red)) !important;
  border-radius: var(--ats-radius-sm) !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
  transition: transform var(--ats-ease), box-shadow var(--ats-ease),
    filter var(--ats-ease);
}
.controlsThreeDee button:hover {
  transform: translateY(-2px);
  filter: brightness(1.08);
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.42);
}
.controlsThreeDee button:active {
  transform: translateY(0);
}

/* ---- Confirmation modal (hidden in this build, styled for completeness) --- */
.atscd-modal__content {
  border-radius: 16px;
  box-shadow: 0 24px 60px rgba(7, 15, 26, 0.35);
}
.submit-button {
  background: linear-gradient(135deg, var(--ats-red-bright), var(--ats-red)) !important;
  border-radius: var(--ats-radius) !important;
  font-weight: 800 !important;
  text-transform: uppercase;
  letter-spacing: 1px;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.35);
  transition: transform var(--ats-ease), filter var(--ats-ease);
}
.submit-button:hover {
  transform: translateY(-2px);
  filter: brightness(1.06);
}
.form-input {
  border: 1.5px solid var(--ats-line);
  border-radius: var(--ats-radius-sm);
  transition: border-color var(--ats-ease), box-shadow var(--ats-ease);
}
.form-input:focus {
  border-color: var(--ats-navy);
  box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.16);
  outline: none;
}
.atscd-help-modal__dialog {
  border-radius: 16px;
}

/* ---- Scrollbar ----------------------------------------------------------- */
::-webkit-scrollbar-thumb {
  background: #bcc0c6;
  border-radius: 9px;
}
::-webkit-scrollbar-thumb:hover {
  background: var(--ats-navy);
}

/* ===========================================================================
   Sport-selection landing (VersaCourt-style first screen)
   =========================================================================== */
.ats-landing {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  box-sizing: border-box;
  background:
    radial-gradient(
      900px 500px at 50% -10%,
      rgba(58, 96, 158, 0.45),
      transparent 60%
    ),
    linear-gradient(180deg, #1e2126 0%, #101215 100%);
  opacity: 1;
  transition: opacity 0.35s ease, visibility 0.35s ease;
}
/* Faint tech grid texture */
.ats-landing::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: linear-gradient(rgba(255, 255, 255, 0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.04) 1px, transparent 1px);
  background-size: 44px 44px;
  pointer-events: none;
}
.ats-landing.is-hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.ats-landing__inner {
  position: relative;
  text-align: center;
  max-width: 880px;
  width: 100%;
}
.ats-landing__eyebrow {
  margin: 0 0 10px;
  font-family: var(--ats-mono);
  text-transform: uppercase;
  letter-spacing: 3px;
  font-size: 12px;
  font-weight: 700;
  color: #9aa0a8;
}
.ats-landing__title {
  margin: 0 0 8px;
  font-family: "Outfit", sans-serif;
  text-transform: uppercase;
  letter-spacing: 2px;
  font-weight: 800;
  font-size: clamp(28px, 5vw, 46px);
  line-height: 1.05;
  color: #fff;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.35);
}
.ats-landing__title::after {
  content: "";
  display: block;
  width: 64px;
  height: 4px;
  margin: 14px auto 0;
  border-radius: 3px;
  background: linear-gradient(90deg, #3a3e45, var(--ats-red-bright));
  box-shadow: 0 0 14px rgba(0, 0, 0, 0.7);
}
.ats-landing__sub {
  margin: 18px 0 30px;
  font-size: clamp(15px, 2vw, 18px);
  color: #cdd0d5;
  letter-spacing: 0.3px;
}

.ats-landing__cards {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  justify-content: center;
}
.ats-sport-card {
  flex: 1 1 200px;
  max-width: 240px;
  min-width: 170px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 28px 18px 22px;
  background: #ffffff;
  color: var(--ats-navy);
  border: 1.5px solid rgba(255, 255, 255, 0.6);
  border-radius: 16px;
  cursor: pointer;
  font-family: "Outfit", sans-serif;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.28);
  transition: transform var(--ats-ease), box-shadow var(--ats-ease),
    border-color var(--ats-ease), color var(--ats-ease);
}
.ats-sport-card:hover,
.ats-sport-card:focus-visible {
  transform: translateY(-6px);
  border-color: var(--ats-red);
  color: var(--ats-red);
  box-shadow: 0 20px 42px rgba(0, 0, 0, 0.36);
  outline: none;
}
.ats-sport-card__icon {
  width: 64px;
  height: 64px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: inherit;
}
.ats-sport-card__icon svg {
  width: 100%;
  height: 100%;
}
.ats-sport-card__name {
  font-size: 20px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 1.4px;
  color: var(--ats-navy);
}
.ats-sport-card:hover .ats-sport-card__name,
.ats-sport-card:focus-visible .ats-sport-card__name {
  color: var(--ats-red);
}
.ats-sport-card__cta {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.4px;
  color: var(--ats-red);
}

@media (max-width: 560px) {
  .ats-landing__cards {
    flex-direction: column;
    align-items: stretch;
  }
  .ats-sport-card {
    max-width: none;
    flex-direction: row;
    justify-content: flex-start;
    gap: 16px;
    padding: 16px 18px;
  }
  .ats-sport-card__icon {
    width: 44px;
    height: 44px;
  }
  .ats-sport-card__cta {
    margin-left: auto;
  }
}

/* ---- "Change Sport" button (in the project-design header) ----------------- */
.ats-change-sport {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-left: auto;
  padding: 8px 14px;
  font-family: "Outfit", sans-serif;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  color: #fff;
  background: rgba(255, 255, 255, 0.08);
  border: 1.5px solid rgba(255, 255, 255, 0.35);
  border-radius: 999px;
  cursor: pointer;
  transition: background-color var(--ats-ease), border-color var(--ats-ease),
    transform var(--ats-ease);
}
.ats-change-sport svg {
  display: block;
}
.ats-change-sport:hover {
  background: var(--ats-red);
  border-color: var(--ats-red);
  transform: translateY(-1px);
}
.ats-change-sport:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.3);
}

/* ===========================================================================
   Lead-capture modal (name / email / zip)
   =========================================================================== */
.ats-modal {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 10050;
}
.ats-modal.is-open {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  box-sizing: border-box;
}
.ats-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(8, 18, 36, 0.55);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
}
.ats-modal__dialog {
  position: relative;
  width: 100%;
  max-width: 420px;
  max-height: 92vh;
  overflow-y: auto;
  background: #fff;
  border-radius: 18px;
  border-top: 5px solid var(--ats-red);
  box-shadow: 0 30px 70px rgba(7, 15, 26, 0.45);
  padding: 30px 28px 24px;
  box-sizing: border-box;
  font-family: "Outfit", sans-serif;
  animation: atsModalIn 0.22s cubic-bezier(0.2, 0.7, 0.3, 1);
}
@keyframes atsModalIn {
  from { opacity: 0; transform: translateY(14px) scale(0.98); }
  to { opacity: 1; transform: none; }
}
.ats-modal__close {
  position: absolute;
  top: 12px;
  right: 14px;
  width: 34px;
  height: 34px;
  border: none;
  background: transparent;
  font-size: 26px;
  line-height: 1;
  color: #9aa0a8;
  cursor: pointer;
  border-radius: 8px;
  transition: background-color var(--ats-ease), color var(--ats-ease);
}
.ats-modal__close:hover {
  background: #eef0f2;
  color: var(--ats-navy);
}
.ats-modal__title {
  margin: 0 0 6px;
  font-size: 24px;
  font-weight: 800;
  color: var(--ats-navy);
  letter-spacing: 0.2px;
}
.ats-modal__sub {
  margin: 0 0 20px;
  font-size: 15px;
  color: var(--ats-muted);
  line-height: 1.4;
}
.ats-field {
  display: block;
  margin-bottom: 14px;
}
.ats-field__label {
  display: block;
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: var(--ats-navy);
  margin-bottom: 6px;
}
.ats-field input {
  width: 100%;
  box-sizing: border-box;
  padding: 12px 14px;
  font-size: 15px;
  font-family: "Outfit", sans-serif;
  color: var(--ats-ink);
  border: 1.5px solid var(--ats-line);
  border-radius: var(--ats-radius-sm);
  background: #fff;
  transition: border-color var(--ats-ease), box-shadow var(--ats-ease);
}
.ats-field input:focus {
  outline: none;
  border-color: var(--ats-navy);
  box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.16);
}
.ats-turnstile {
  margin: 4px 0 10px;
  min-height: 0;
}
.ats-turnstile:not(:empty) {
  margin-bottom: 14px;
}
.ats-form-error {
  color: var(--ats-red-bright);
  font-size: 14px;
  font-weight: 600;
  min-height: 0;
  margin-bottom: 6px;
}
.ats-form-error:not(:empty) {
  margin-bottom: 12px;
}
.ats-modal__submit {
  width: 100%;
  padding: 15px;
  font-family: "Outfit", sans-serif;
  font-size: 16px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 1.4px;
  color: #fff;
  border: none;
  border-radius: var(--ats-radius);
  background: linear-gradient(135deg, var(--ats-red-bright), var(--ats-red));
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.35);
  cursor: pointer;
  transition: transform var(--ats-ease), box-shadow var(--ats-ease),
    filter var(--ats-ease);
}
.ats-modal__submit:hover {
  transform: translateY(-2px);
  filter: brightness(1.06);
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.45);
}
.ats-modal__submit:disabled {
  opacity: 0.7;
  cursor: default;
  transform: none;
  box-shadow: none;
}
.ats-modal__disclaimer {
  margin: 14px 0 0;
  font-size: 11.5px;
  line-height: 1.45;
  color: #9aa0a8;
}
.ats-modal__success {
  text-align: center;
  padding: 14px 6px 6px;
}
.ats-modal__success-icon {
  width: 64px;
  height: 64px;
  margin: 0 auto 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 32px;
  color: #fff;
  border-radius: 50%;
  background: linear-gradient(135deg, #3c4046, #23262b);
  box-shadow: 0 8px 20px rgba(31, 122, 68, 0.35);
}
.ats-modal__success-title {
  margin: 0 0 8px;
  font-size: 22px;
  font-weight: 800;
  color: var(--ats-navy);
}
.ats-modal__success-text {
  margin: 0 0 22px;
  font-size: 15px;
  color: var(--ats-muted);
  line-height: 1.45;
}

/* ---- White-label landing (solid white background, no AT Sports labels) ----- */
.ats-landing--light {
  background: #ffffff;
}
.ats-landing--light::before {
  display: none; /* remove the blueprint grid texture */
}
.ats-landing--light .ats-landing__title {
  color: var(--ats-navy);
  text-shadow: none;
}
.ats-landing--light .ats-landing__sub {
  color: var(--ats-muted);
}
.ats-landing--light .ats-landing__eyebrow {
  color: var(--ats-red);
}
.ats-landing--light .ats-sport-card {
  border: 1.5px solid var(--ats-line);
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.10);
}
.ats-landing--light .ats-sport-card:hover,
.ats-landing--light .ats-sport-card:focus-visible {
  border-color: var(--ats-red);
  box-shadow: 0 16px 34px rgba(0, 0, 0, 0.16);
}

/* Branded landing: transparent so the host page background shows through
   (no boxed navy/grid). The designer behind is hidden via JS while the landing
   is up, so the page is what shows through. */
.ats-landing {
  background: transparent !important;
}
.ats-landing::before {
  display: none !important; /* remove the blueprint grid texture */
}

/* Reliably hide the designer behind the landing while it's showing, so the
   transparent landing reveals the host page (not the opaque panels). Pure CSS,
   keyed off the landing state — no dependence on script timing. */
body:has(#ats-landing:not(.is-hidden)) .court_main { visibility: hidden !important; }

/* Branded landing sits on a LIGHT page section (AT Sports Court Designer page):
   navy text, no eyebrow, and top-aligned so the title sits high (no big gap). */
.ats-landing { align-items: flex-start !important; padding-top: 18px !important; }
.ats-landing__eyebrow { display: none !important; }
.ats-landing__title { color: var(--ats-navy) !important; text-shadow: none !important; }
.ats-landing__sub { color: var(--ats-navy) !important; }

/* ============================================================================
   Landing sport tiles v2 — 3D court-render cards
   Dark "floor" art area with the court drawn top-down and tilted into
   perspective, a navy title, and a solid AT Sports-red "Start Designing"
   button. Appended last so it overrides the earlier icon-based card styles.
   ============================================================================ */
.ats-landing__cards {
  gap: 22px !important;
  max-width: 1140px;
  margin-left: auto;
  margin-right: auto;
}
.ats-landing .ats-sport-card {
  flex: 1 1 240px;
  max-width: 300px;
  min-width: 214px;
  flex-direction: column;
  align-items: stretch;
  gap: 0;
  padding: 0;
  overflow: hidden;
  background: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.10);
  border-radius: 14px;
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.20);
}
.ats-landing .ats-sport-card:hover,
.ats-landing .ats-sport-card:focus-visible {
  transform: translateY(-6px);
  border-color: rgba(0, 0, 0, 0.10);
  box-shadow: 0 26px 52px rgba(0, 0, 0, 0.32);
  color: var(--ats-navy);
  outline: none;
}

/* Dark render "floor" ---------------------------------------------------- */
.ats-sport-card__art {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 16 / 10;
  background: radial-gradient(120% 92% at 50% 16%, #3b3e43 0%, #242629 56%, #151618 100%);
  overflow: hidden;
  perspective: 660px;
}
.ats-sport-card__art::before {
  content: "";
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(92deg, rgba(255, 255, 255, 0.04) 0 2px, rgba(0, 0, 0, 0) 2px 9px);
  opacity: 0.55;
  pointer-events: none;
}
.ats-sport-card__court {
  position: absolute;
  left: 50%;
  top: 53%;
  width: 90%;
  transform: translate(-50%, -50%) rotateX(52deg) rotateZ(-25deg) scale(1.06);
  transform-origin: center center;
  filter: drop-shadow(0 26px 15px rgba(0, 0, 0, 0.55));
  transition: transform var(--ats-ease);
}
.ats-sport-card__court svg {
  display: block;
  width: 100%;
  height: auto;
}
.ats-landing .ats-sport-card:hover .ats-sport-card__court,
.ats-landing .ats-sport-card:focus-visible .ats-sport-card__court {
  transform: translate(-50%, -53%) rotateX(49deg) rotateZ(-25deg) scale(1.1);
}

/* Body ------------------------------------------------------------------- */
.ats-sport-card__body {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  padding: 20px 18px 22px;
}
.ats-landing .ats-sport-card__name {
  font-size: 19px;
  font-weight: 800;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--ats-navy);
  margin: 0;
}
.ats-landing .ats-sport-card:hover .ats-sport-card__name,
.ats-landing .ats-sport-card:focus-visible .ats-sport-card__name {
  color: var(--ats-navy);
}
.ats-landing .ats-sport-card__cta {
  display: inline-block;
  padding: 11px 22px;
  border-radius: 8px;
  background: var(--ats-red);
  color: #ffffff;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 1.3px;
  text-transform: uppercase;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.34);
  transition: filter var(--ats-ease), transform var(--ats-ease);
}
.ats-landing .ats-sport-card:hover .ats-sport-card__cta,
.ats-landing .ats-sport-card:focus-visible .ats-sport-card__cta {
  filter: brightness(1.08);
}

@media (max-width: 620px) {
  .ats-landing .ats-sport-card {
    flex: 1 1 100%;
    max-width: none;
    flex-direction: column;
    align-items: stretch;
    padding: 0;
  }
}

/* ----------------------------------------------------------------------------
   Sport tiles: standing nets + surface sheen (realistic depth).
   The court SVG lies flat in a tilted 3D scene; the net is a child plane that
   stands up (rotateY) along the court's center line so it reads as a real net.
   NOTE: a CSS `filter` flattens 3D, so the drop-shadow moves onto the SVG leaf
   and the scene element stays filter-free to keep preserve-3d working.
   -------------------------------------------------------------------------- */
.ats-sport-card__court { filter: none; transform-style: preserve-3d; }
.ats-sport-card__court > svg { filter: drop-shadow(0 26px 15px rgba(0, 0, 0, 0.55)); }
.ats-sport-card__court::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  transform: translateZ(0.6px);
  border-radius: 7px;
  background: linear-gradient(158deg, rgba(255, 255, 255, 0.14) 0%, rgba(255, 255, 255, 0) 42%, rgba(0, 0, 0, 0.22) 100%);
}
.ats-net {
  position: absolute;
  left: 50%;
  transform-origin: left center;
  transform: translateZ(1.2px) rotateY(-90deg);
}
.ats-net__mesh {
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(0deg, var(--nc) 0 1px, transparent 1px 3.5px),
    repeating-linear-gradient(90deg, var(--nc) 0 1px, transparent 1px 3.5px);
  border-top: 2.5px solid var(--tape);
}
.ats-net::before,
.ats-net::after {
  content: "";
  position: absolute;
  left: 0;
  width: 100%;
  height: 3px;
  background: var(--post);
}
.ats-net::before { top: -1px; }
.ats-net::after { bottom: -1px; }
.ats-net--tennis { top: 16%; height: 68%; width: 15px; --nc: rgba(255, 255, 255, 0.8); --tape: #ffffff; --post: #2a2a2a; }
.ats-net--pickle { top: 18%; height: 64%; width: 13px; --nc: rgba(20, 20, 20, 0.85); --tape: #111111; --post: #111111; }

/* Court render wrapper (SVG injected by embed-overrides.js atsRenderCourtTiles). */
.ats-court-render {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 3% 3% 5%;
}
.ats-court-render svg {
  width: 100%;
  height: auto;
  overflow: visible;
  filter: drop-shadow(0 15px 12px rgba(0, 0, 0, 0.6));
}

/* ============================================================================
   Landing sport tiles v3 — real photographic court renders.
   Each tile's dark "floor" art area shows a supplied render (object-fit cover
   via background). The dark gradient stays as a fallback layer, so a missing
   image degrades to the dark floor instead of a broken-image box.
   ============================================================================ */
.ats-sport-card__art::before { display: none; } /* renders carry their own floor texture */
.ats-sport-card[data-sport="tennis"] .ats-sport-card__art {
  background: url("../images/tiles/tennis.jpg") center/cover no-repeat,
    radial-gradient(120% 92% at 50% 16%, #3b3e43 0%, #242629 56%, #151618 100%);
}
.ats-sport-card[data-sport="pickleball"] .ats-sport-card__art {
  background: url("../images/tiles/pickleball.jpg") center/cover no-repeat,
    radial-gradient(120% 92% at 50% 16%, #3b3e43 0%, #242629 56%, #151618 100%);
}
.ats-sport-card[data-sport="basketball"] .ats-sport-card__art {
  background: url("../images/tiles/basketball.jpg") center/cover no-repeat,
    radial-gradient(120% 92% at 50% 16%, #3b3e43 0%, #242629 56%, #151618 100%);
}
.ats-sport-card[data-sport="multi"] .ats-sport-card__art {
  background: url("../images/tiles/multi.jpg") center/cover no-repeat,
    radial-gradient(120% 92% at 50% 16%, #3b3e43 0%, #242629 56%, #151618 100%);
}

/* ===========================================================================
   Modern "Add a Sport" accordion (Sport section)
   Turns the cross-sport "Add Basketball / Add Pickleball" checkboxes into
   collapsible panels: a header bar (checkbox + name + chevron) that expands its
   settings when selected. Scoped with :has() to the add-on blocks only (those
   carrying an .atsAdd* checkbox) so a primary sport's own config is untouched.
   =========================================================================== */
.ats-addsport-head {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: var(--ats-muted);
  margin: 16px 0 9px;
}

/* Add-on panel card */
.basketball-court:has(.atsAddBasketball),
.pickleball-court:has(.atsAddPickleball) {
  border: 1.5px solid var(--ats-line);
  border-radius: 10px;
  background: #fff;
  overflow: hidden;
  margin-bottom: 10px;
  transition: border-color var(--ats-ease), box-shadow var(--ats-ease);
}
.basketball-court:has(.atsAddBasketball:checked),
.pickleball-court:has(.atsAddPickleball:checked) {
  border-color: var(--ats-navy);
  box-shadow: var(--ats-shadow-md);
}

/* Header bar = the checkbox label */
.basketball-court:has(.atsAddBasketball) > .ats-container,
.pickleball-court:has(.atsAddPickleball) > .ats-container {
  display: block;
  position: relative;
  margin: 0;
  padding: 14px 46px 14px 46px;
  font-size: 15px;
  font-weight: 700;
  color: var(--ats-ink);
  background: linear-gradient(180deg, #f7f8f9, #f4f5f6);
  transition: background var(--ats-ease), color var(--ats-ease);
}
.basketball-court:has(.atsAddBasketball) > .ats-container:hover,
.pickleball-court:has(.atsAddPickleball) > .ats-container:hover {
  background: linear-gradient(180deg, #f4f5f6, #e7e9eb);
}
.basketball-court:has(.atsAddBasketball:checked) > .ats-container,
.pickleball-court:has(.atsAddPickleball:checked) > .ats-container {
  background: linear-gradient(180deg, #2b2f36, #16181c);
  color: #fff;
}
/* Center the custom checkbox in the taller header, inset from the edge */
.basketball-court:has(.atsAddBasketball) > .ats-container .checkmark,
.pickleball-court:has(.atsAddPickleball) > .ats-container .checkmark {
  top: 50%;
  transform: translateY(-50%);
  left: 16px;
}
/* Chevron (rotates when the sport is enabled/expanded) */
.basketball-court:has(.atsAddBasketball) > .ats-container::after,
.pickleball-court:has(.atsAddPickleball) > .ats-container::after {
  content: "";
  position: absolute;
  right: 18px;
  top: 50%;
  width: 9px;
  height: 9px;
  border-right: 2.4px solid currentColor;
  border-bottom: 2.4px solid currentColor;
  transform: translateY(-70%) rotate(45deg);
  transition: transform var(--ats-ease);
  opacity: 0.75;
}
.basketball-court:has(.atsAddBasketball:checked) > .ats-container::after,
.pickleball-court:has(.atsAddPickleball:checked) > .ats-container::after {
  transform: translateY(-30%) rotate(-135deg);
}

/* Folded via the chevron: court stays added, settings hidden, chevron points down */
.basketball-court.ats-addsport-folded > .atscd-drpdwn,
.pickleball-court.ats-addsport-folded > .pickballcourt-drpdwn {
  display: none !important;
}
.basketball-court.ats-addsport-folded:has(.atsAddBasketball:checked) > .ats-container::after,
.pickleball-court.ats-addsport-folded:has(.atsAddPickleball:checked) > .ats-container::after {
  transform: translateY(-70%) rotate(45deg);
}

/* Body (settings) — engine reveals it (display) when checked; we style it */
.basketball-court:has(.atsAddBasketball) > .atscd-drpdwn,
.pickleball-court:has(.atsAddPickleball) > .pickballcourt-drpdwn {
  padding: 14px 16px 16px !important;
  background: var(--ats-panel);
  border-top: 1px solid var(--ats-line);
}

/* Basketball base is always a full court: hide its own Court Layout block. */
.basketball-additional-courts > .basketball-court:not(:has(.atsAddBasketball)) {
  display: none !important;
}

/* Pickleball base is a single court: hide its own Number of Courts / Court
   Position block (the count stays at 1, centered). */
.pickleball-additional-courts > .pickleball-court:not(:has(.atsAddPickleball)) {
  display: none !important;
}

/* A primary sport's OWN config block (no add checkbox) = simple settings card */
.basketball-court:not(:has(.atsAddBasketball)),
.pickleball-court:not(:has(.atsAddPickleball)) {
  background: var(--ats-panel);
  border: 1px solid var(--ats-line);
  border-radius: 10px;
  padding: 12px 14px;
  margin-bottom: 10px;
}

/* ===========================================================================
   Collapsible sidebar sections (SPORT / COLOR / ADD LOGOS).
   The header toggles a class; content is hidden via .ats-sec-hidden so the
   engine's own inner show/hide logic survives re-expanding.
   =========================================================================== */
.court_left_content .section-title.ats-collapsible {
  cursor: pointer;
  user-select: none;
  padding-right: 46px !important;
}
.court_left_content .section-title.ats-collapsible::after {
  content: "";
  position: absolute;
  right: 22px;
  top: 50%;
  width: 9px;
  height: 9px;
  border-right: 2.4px solid currentColor;
  border-bottom: 2.4px solid currentColor;
  transform: translateY(-30%) rotate(-135deg); /* expanded: chevron up */
  transition: transform var(--ats-ease);
  opacity: 0.7;
}
.court_left_content .section-title.ats-collapsible.is-collapsed::after {
  transform: translateY(-70%) rotate(45deg); /* collapsed: chevron down */
}
.court_left_content .section-title.ats-collapsible:hover::after { opacity: 1; }
.ats-sec-hidden { display: none !important; }

/* ===========================================================================
   v4 — Landing tile grid + modern collapsed sidebar + no top header
   =========================================================================== */

/* --- Landing tiles: 4-up on one line, 2x2 medium, 1-up on phones --------- */
.ats-landing__cards {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr);
  gap: 22px !important;
  max-width: 1180px;
  width: 100%;
  margin: 0 auto;
}
.ats-landing .ats-sport-card { max-width: none !important; min-width: 0 !important; }
@media (max-width: 1040px) { .ats-landing__cards { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px)  { .ats-landing__cards { grid-template-columns: 1fr; } }

/* --- Remove the black top header bars (sleeker, modern) ------------------- */
.court_left h2 { display: none !important; }
.atscd-header {
  background: transparent !important;
  border-bottom: none !important;
  box-shadow: none !important;
  height: auto !important;
  min-height: 0 !important;
  padding: 12px 16px !important;
}
.atscd-header h2 { display: none !important; }
.court_left_content { padding-top: 62px; } /* room for the floating home button */

/* Change-Sport becomes a compact floating "home/back" icon, top-left --------*/
.court_main { position: relative; }
.ats-change-sport {
  position: absolute !important;
  top: 12px;
  left: 12px;
  z-index: 40;
  width: 42px;
  height: 42px;
  padding: 0 !important;
  border-radius: 10px !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 0 !important;
  font-size: 0 !important;            /* hide the "Change Sport" text, keep the icon */
  background: #ffffff !important;
  color: var(--ats-ink) !important;
  border: 1px solid var(--ats-line) !important;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.14) !important;
}
.ats-change-sport svg { width: 18px; height: 18px; }
.ats-change-sport:hover { background: #f4f5f6 !important; }

/* --- Sidebar sections as dark rounded collapsible bars -------------------- */
.ats-acc { margin: 0 14px 12px; }
.court_left_content .section-title.ats-collapsible {
  background: #33363c !important;
  color: #ffffff !important;
  border: none !important;
  border-top: none !important;
  border-bottom: none !important;
  border-radius: 10px !important;
  margin: 0 !important;
  padding: 17px 48px 17px 20px !important;
  font-size: 16px !important;
  letter-spacing: 0.4px !important;
  text-transform: none !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.16) !important;
}
.court_left_content .section-title.ats-collapsible::before { display: none !important; } /* drop left accent bar */
.court_left_content .section-title.ats-collapsible::after {
  right: 20px;
  border-color: #ffffff;
  opacity: 0.9;
}
.court_left_content .section-title.ats-collapsible:hover { background: #3c4046 !important; }
/* Expanded section body sits in a light rounded panel under the bar */
.ats-acc > *:not(.section-title):not(.ats-sec-hidden) {
  background: var(--ats-surface);
  margin: 6px 0 0 !important;
  border-radius: 10px;
}

/* Primary sport radios are chosen on the landing — hide them (the base sport
   stays checked for the engine; users add sports via "Add a Sport"). */
.sports-options > label.ats-container { display: none !important; }

/* ===========================================================================
   v5 — sidebar title, spacing, controls-up, standout Download button
   =========================================================================== */
/* Title next to the home button */
.court_left_content { padding-top: 16px !important; }
.ats-designer-title {
  font-size: 24px;
  font-weight: 800;
  letter-spacing: 0.3px;
  color: var(--ats-ink);
  padding-left: 60px;            /* clear the home icon */
  min-height: 42px;
  display: flex;
  align-items: center;
  margin: 0 0 26px;             /* space between title and first tab */
}

/* Move the 3D control icons up to the very top of the preview */
.court_right .atscd-header { padding: 0 16px !important; }
.court_right #controls { margin-top: 0 !important; }

/* Standout "Download Court Design" button — narrower, centered, blue accent */
#exportandsend {
  display: block !important;
  width: auto !important;
  min-width: 240px;
  max-width: 88%;
  margin: 10px auto 4px !important;
  padding: 15px 30px !important;
  background: linear-gradient(180deg, #327EA8, #26668A) !important;
  color: #ffffff !important;
  border: none !important;
  border-radius: 11px !important;
  font-weight: 800 !important;
  letter-spacing: 1.4px !important;
  text-transform: uppercase !important;
  box-shadow: 0 8px 20px rgba(50, 126, 168, 0.36) !important;
  cursor: pointer;
  transition: filter var(--ats-ease), transform var(--ats-ease), box-shadow var(--ats-ease);
}
#exportandsend:hover {
  filter: brightness(1.06) !important;
  transform: translateY(-1px);
  box-shadow: 0 12px 26px rgba(50, 126, 168, 0.42) !important;
}

/* ===========================================================================
   v6 — sidebar panel to court bottom, uppercase titles, title effect,
   centered home icon, controls inline with title, smaller download button
   =========================================================================== */
/* Sidebar = full-height light-grey panel; content fills it, download pinned bottom */
.court_main { display: flex !important; align-items: stretch !important; }
.court_left { background: #edeff2 !important; display: flex; flex-direction: column; }
.court_left_content {
  display: flex !important;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
}
.court_left_content > .export-btn { margin-top: auto; padding: 10px 16px 16px; }

/* Smaller Download Court Design button */
#exportandsend {
  min-width: 0 !important;
  width: auto !important;
  max-width: 100% !important;
  margin: 0 auto !important;
  padding: 10px 20px !important;
  font-size: 12px !important;
  letter-spacing: 1px !important;
  border-radius: 9px !important;
}

/* Uppercase tab titles */
.court_left_content .section-title.ats-collapsible {
  text-transform: uppercase !important;
  letter-spacing: 1.2px !important;
}

/* Home icon perfectly centered in its (already absolutely-positioned) button */
.ats-change-sport svg {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 18px;
  height: 18px;
}

/* Title: ALL CAPS + standout accent underline */
.ats-designer-title {
  text-transform: uppercase !important;
  font-weight: 900 !important;
  letter-spacing: 1.8px !important;
  color: var(--ats-ink) !important;
  position: relative;
  padding-bottom: 10px;
  margin: 0 0 22px !important;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.6);
}
.ats-designer-title::after {
  content: "";
  position: absolute;
  left: 60px;
  bottom: 0;
  width: 60px;
  height: 4px;
  border-radius: 2px;
  background: linear-gradient(90deg, #3a3e45, #2b2f36);
}

/* Play / 2D / fullscreen / help controls moved up, inline with the title */
.court_right { position: relative; }
.court_right .atscd-header { padding: 0 !important; }
.court_right #controls {
  position: absolute !important;
  top: 12px !important;
  left: 16px !important;
  margin: 0 !important;
  z-index: 30;
}

/* ===========================================================================
   v7 — full-height app, centered title, bigger home icon, sport sub-title
   =========================================================================== */
/* Key + court stretch to the bottom of the page (VersaCourt-style full height) */
html, body { height: 100%; }
/* 100dvh accounts for the mobile browser's dynamic toolbar (iOS Safari / Android
   Chrome) so the app isn't taller than the visible area; 100vh is the fallback. */
.court_main { min-height: 100vh; min-height: 100dvh; }

/* Title centered at the top */
.ats-designer-title {
  justify-content: center !important;
  text-align: center;
  padding-left: 0 !important;
}
.ats-designer-title::after {
  left: 50% !important;
  transform: translateX(-50%);
}

/* Home icon a bit larger + solid (filled markup) */
.ats-change-sport svg { width: 22px; height: 22px; }

/* Sport sub-title ("TENNIS") sits on the white panel with a red underline,
   marking the main sport of the page. */
.color-section-title {
  background: #ffffff !important;
  color: var(--ats-ink) !important;
  border: none !important;
  position: relative;
  font-weight: 800 !important;
  letter-spacing: 1.2px !important;
  padding: 12px 20px 13px !important;
}
.color-section-title::after {
  content: "";
  position: absolute;
  left: 20px;
  bottom: 6px;
  width: 46px;
  height: 3px;
  border-radius: 2px;
  background: linear-gradient(90deg, #3a3e45, #2b2f36);
}

/* ===========================================================================
   v8 — round white-box top, nudge download up, center court in full height
   =========================================================================== */
/* Clip the colors white panel so its TOP corners round like the bottom */
.ats-acc > *:not(.section-title):not(.ats-sec-hidden) { overflow: hidden; }

/* ...but the color panels hold the "Player's Choice Colors" flyout, which is
   absolutely positioned and was getting clipped by that overflow:hidden (users
   couldn't see the full palette — and in multi-court layouts the added sport's
   Court Lines picker was clipped entirely). Let them overflow, and round the
   white section header's top corners so the panel top still reads rounded.
   Covers both the primary sport panel (.court-color-selector) and the added
   sport panel in multi-court (#additional-court-colors, plus the second add-on
   panel #ats-second-court-colors built in embed-overrides.js). */
.court-color-selector,
#additional-court-colors,
#ats-second-court-colors { overflow: visible !important; }
.court-color-selector > .color-section-title:first-child,
#additional-court-colors > .color-section-title:first-child,
#ats-second-court-colors > .color-section-title:first-child {
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
}

/* Download button moved up; the "Powered by AT Sports" credit sits below it at
   the very bottom. The button keeps margin-top:auto (floats to the bottom of the
   column) and the credit follows it as the last child. */
.court_left_content > .export-btn { padding: 10px 16px 10px !important; }

/* "Powered by AT Sports" footer credit */
.ats-powered-by {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 2px 16px 20px;
}
.ats-powered-by span {
  font-size: 8px;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: #8a9099;
}
.ats-powered-by .ats-pb-logo {
  height: 14px;
  width: auto;
  display: block;
}

/* (court centering handled below without flex, to keep the 3D canvas sizing intact) */

/* Nudge the 3D court down so it sits centered in the full-height court area
   (margin only — does not affect the width-driven canvas sizing) */
.court_right .inner-court { margin-top: 5vh; }

/* Anchor controls to court_right so the court's margin nudge doesn't move them;
   keeps play/2D/fullscreen/help at the top, inline with the title. */
.court_right .atscd-header { position: static !important; }

/* ===========================================================================
   v8 — play / 2D / fullscreen / help controls sit a bit lower; the customization
   column has even side padding (sections no longer carry their own side margins,
   so everything lines up on one edge).
   =========================================================================== */
.court_right #controls { top: 32px !important; }
.court_left_content {
  padding-left: 30px !important;
  padding-right: 20px !important;
  box-sizing: border-box;
}
.court_left_content .ats-acc { margin-left: 0; margin-right: 0; }
.court_left_content .ats-court-type-picker { padding-left: 0 !important; padding-right: 0 !important; }
.court_left_content .ats-share-wrap { padding-left: 0 !important; padding-right: 0 !important; }
.court_left_content > .export-btn { padding-left: 0; padding-right: 0; }
/* Download sits right under Share Design; only the "Powered by" credit stays
   pinned to the bottom of the column. */
.court_left_content > .export-btn { margin-top: 0 !important; }
.court_left_content > .ats-powered-by { margin-top: auto; }

/* ===========================================================================
   v9 — iPhone embeds. iOS Safari grows an <iframe> to fit any content wider
   than the frame (and may inflate text inside frames), which pushed the designer
   past the screen edge on atsports.com. Keep the page exactly frame-width.
   =========================================================================== */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
html, body { max-width: 100%; overflow-x: clip; } /* clip: no extra scroll container */
#threeCanvas { max-width: 100%; }
.ats-court-type-picker__options { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
.ats-court-type-picker__opt { min-width: 0; overflow: hidden; text-overflow: ellipsis; }