/* Lindale Area Sports Complex — Supporter Program v2 styles. Served only while PROGRAM_V2 = "true". */
/* Level tables on the Join page */
.levels-table { width: 100%; border-collapse: collapse; background: var(--white); border: 1px solid var(--line); }
.levels-table th, .levels-table td { text-align: left; padding: .7rem .8rem; border-bottom: 1px solid var(--line); vertical-align: top; }
.levels-table th { background: var(--forest); color: var(--white); font: 700 1rem/1.2 var(--display); letter-spacing: .06em; text-transform: uppercase; }
.levels-table td.price { font: 700 1.05rem/1.3 var(--mono); color: var(--gold); white-space: nowrap; }
.levels-table td.lvl { font: 700 1.15rem/1.2 var(--display); text-transform: uppercase; color: var(--forest); white-space: nowrap; }
.levels-table .state { display: inline-block; font: 700 .75rem/1 var(--display); letter-spacing: .08em; text-transform: uppercase; padding: .3rem .5rem; border-radius: 2px; background: var(--mist); color: var(--muted); white-space: nowrap; }
.levels-table .state.open { background: var(--forest); color: var(--white); }
.levels-table .state.sold { background: var(--strawberry); color: var(--white); }
.table-wrap { overflow-x: auto; }
@media (max-width: 640px) { .levels-table th, .levels-table td { padding: .55rem .5rem; font-size: .92rem; } }

/* Disclosure + acceptance (named strings; counsel supplies final wording) */
.disclosure { background: var(--mist); border: 1px solid var(--line); border-left: 5px solid var(--strawberry); padding: 1rem 1.1rem; margin: 1.25rem 0 1rem; font-size: .93rem; }
.disclosure h3 { font-size: 1.15rem; text-transform: uppercase; letter-spacing: .04em; margin: 0 0 .5rem; }
.disclosure p { margin: 0 0 .6rem; }
.disclosure p:last-child { margin-bottom: 0; }

/* Level banners (Business and Individual Supporters pages) */
.level { margin: 0 0 2.25rem; }
.level-banner { display: flex; align-items: baseline; gap: .75rem; font: 700 1.5rem/1.1 var(--display); letter-spacing: .08em; text-transform: uppercase; color: var(--white); background: var(--forest); padding: .7rem 1rem; margin: 0 0 1rem; border-left: 8px solid var(--gold); }
.level-banner small { font: 400 .85rem/1.2 var(--sans); letter-spacing: 0; text-transform: none; color: #D5E4D8; }
.level.diamond .level-banner { font-size: 2.1rem; padding: 1rem 1.2rem; border-left-width: 14px; }
.level.platinum .level-banner { font-size: 1.85rem; padding: .9rem 1.1rem; border-left-width: 12px; }
.level.gold .level-banner { font-size: 1.7rem; padding: .85rem 1.05rem; border-left-width: 10px; background: var(--gold); color: var(--forest); border-left-color: var(--forest); }
.level.gold .level-banner small { color: var(--forest); }
.level.silver .level-banner { background: #5E6B62; border-left-color: #C9D2CC; }
.level.bronze .level-banner { background: #6B4B2A; border-left-color: #C4882B; font-size: 1.25rem; }
.biz-grid { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
.level.diamond .biz-grid { grid-template-columns: repeat(auto-fill, minmax(min(100%, 430px), 1fr)); gap: 1.5rem; }  /* each Diamond card about half the page wide (owner, 2026-10-06) */
.biz { background: var(--white); border: 1px solid var(--line); padding: 1.1rem; text-align: center; display: flex; flex-direction: column; align-items: center; gap: .35rem; }
.biz .logo-box { display: flex; align-items: center; justify-content: center; width: 100%; height: 80px; }
.biz .logo-box img { max-width: 100%; max-height: 100%; object-fit: contain; }
.level.diamond .biz .logo-box { height: clamp(160px, 22vw, 260px); }
.level.diamond .biz { padding: 1.75rem 1.5rem; gap: .5rem; }
.level.diamond .biz .contact { font-size: 1rem; }
.level.platinum .biz .logo-box { height: 120px; }
.biz .nm { font-weight: 700; font-size: 1.05rem; }
.level.diamond .biz .nm { font: 700 clamp(1.5rem, 3vw, 2rem)/1.2 var(--display); text-transform: uppercase; color: var(--forest); }
.biz .contact { font-size: .9rem; color: var(--muted); overflow-wrap: anywhere; }
.biz .contact a { color: var(--forest); }
.name-only { columns: 3 14rem; column-gap: 2rem; list-style: none; padding: 0; margin: 0; }
.name-only li { break-inside: avoid; padding: .3rem 0; border-bottom: 1px solid var(--line); }
.level.diamond .name-only li { font: 700 1.45rem/1.3 var(--display); color: var(--forest); }
.level.platinum .name-only li { font: 700 1.25rem/1.3 var(--display); color: var(--forest); }
.level.gold .name-only li { font-weight: 700; font-size: 1.08rem; }
.sponsored-tag { display: inline-block; font: 600 .68rem/1 var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); border: 1px solid var(--line); padding: .15rem .35rem; border-radius: 2px; }

/* Featured placement slot — today the Diamond spotlight; later reusable for paid web banners */
.spotlight { background: var(--forest); color: var(--white); border-bottom: 4px solid var(--gold); }
.spotlight .wrap { display: flex; align-items: center; justify-content: center; gap: clamp(1rem, 4vw, 2.5rem); padding-top: 1.25rem; padding-bottom: 1.25rem; flex-wrap: wrap; text-align: center; }
.spotlight .tag { font: 700 .95rem/1 var(--display); letter-spacing: .14em; text-transform: uppercase; color: #F2D29B; }
.spotlight a, .spotlight .item { display: flex; align-items: center; gap: clamp(.75rem, 3vw, 1.5rem); color: var(--white); text-decoration: none; flex-wrap: wrap; justify-content: center; }
.spotlight .logo-box { background: var(--white); padding: .6rem .9rem; border-radius: 4px; display: flex; align-items: center; justify-content: center; }
.spotlight .logo-box img { max-height: clamp(70px, 14vw, 110px); max-width: min(320px, 70vw); object-fit: contain; display: block; }
.spotlight .nm { font: 700 clamp(1.4rem, 4vw, 2rem)/1.1 var(--display); letter-spacing: .03em; text-transform: uppercase; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Front-page Diamond and Platinum recognition */
.front-logos { display: flex; flex-wrap: wrap; gap: 1.25rem 2rem; justify-content: center; align-items: center; }
.front-logos .fl { display: flex; align-items: center; justify-content: center; text-decoration: none; }
.front-logos .fl img { object-fit: contain; display: block; }
.front-logos .fl.diamond img { max-height: 120px; max-width: min(300px, 80vw); }
.front-logos .fl.platinum img { max-height: 80px; max-width: min(210px, 60vw); }
.front-names { text-align: center; }
.front-names .d { font: 700 1.5rem/1.5 var(--display); color: var(--forest); text-transform: uppercase; letter-spacing: .03em; }
.front-names .p { font: 700 1.15rem/1.6 var(--display); color: var(--forest); }
.front-names ul { list-style: none; margin: 0; padding: 0; }
.front-names li { display: inline; }
.front-names li + li::before { content: " · "; color: var(--gold); }
.hub-cards { display: grid; gap: 1.25rem; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
.hub-cards a.card { text-decoration: none; color: var(--charcoal); display: block; }
.hub-cards a.card:hover { border-top-color: var(--gold); }

/* Supporter Program v2: "Before you pay" dialog, name-to-show field, saved / continue-to-checkout panel */
.linklike { background: none; border: 0; padding: 0; font: inherit; color: var(--forest); text-decoration: underline; text-decoration-color: var(--gold); text-underline-offset: .15em; cursor: pointer; }
.linklike:hover, .linklike:focus-visible { color: var(--strawberry); }
.before-pay { margin: 1.25rem 0 .5rem; font-weight: 600; }
.display-name { margin: -.25rem 0 1rem 1.75rem; }
.form-panel .display-name label { font-weight: 600; }
.pay-dialog { width: min(40rem, calc(100vw - 1.5rem)); max-height: calc(100vh - 1.5rem); max-height: calc(100dvh - 1.5rem); padding: 0; border: 0; border-top: 6px solid var(--strawberry); background: var(--white); color: var(--charcoal); box-shadow: 0 12px 40px rgba(0,0,0,.35); overflow: auto; }
.pay-dialog::backdrop { background: rgba(20, 40, 26, .6); }
.pay-dialog-body { padding: clamp(1.1rem, 4vw, 1.75rem); font-size: .97rem; }
.pay-dialog-body h2 { margin: 0 0 .75rem; }
.pay-dialog-body p { margin: 0 0 .75rem; }
.pay-dialog-body form { margin: 1.25rem 0 0; text-align: right; }
.form-light button[type=submit]:disabled { opacity: .5; cursor: not-allowed; }
.saved-panel { background: var(--white); border: 1px solid var(--line); border-top: 4px solid var(--gold); padding: clamp(1.25rem, 4vw, 2rem); }
.saved-panel h3 { margin: 0 0 .5rem; }
.saved-panel .btn { margin-top: .75rem; }
.pay-dialog-x { position: sticky; top: 0; display: flex; justify-content: flex-end; margin: 0; height: 0; }
.pay-dialog-x button { margin: .35rem .35rem 0 0; width: 2.5rem; height: 2.5rem; font: 400 1.75rem/1 var(--sans); border: 0; background: var(--white); color: var(--forest); cursor: pointer; border-radius: 50%; }
.pay-dialog-x button:hover, .pay-dialog-x button:focus-visible { background: var(--mist); }
.pay-dialog-body h2 { padding-right: 2.5rem; }
/* The two paid forms: side by side on wide screens, stacked on phones and tablets */
.grid-2.paid-forms { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
@media (max-width: 860px) { .grid-2.paid-forms { grid-template-columns: 1fr; } }

/* Example listings on the Business Supporters page (a level with no businesses yet) — LASC badge as the stand-in logo */
.biz.example { position: relative; border: 2px dashed var(--gold); background: #FFFDF8; }
.biz.example .logo-box img { opacity: .9; }
.biz.example .nm, .biz.example .contact { color: var(--muted); }
.example-tag { display: inline-block; font: 700 .72rem/1 var(--display); letter-spacing: .12em; text-transform: uppercase; color: var(--white); background: var(--gold); padding: .3rem .55rem; border-radius: 2px; }
.biz.example > .example-tag { position: absolute; top: .6rem; left: .6rem; z-index: 1; }
.example-cta { margin-top: .4rem; font-weight: 600; color: var(--forest); }
.example-names .example-name { color: var(--muted); border-bottom-style: dashed; }
.example-names .example-tag { margin-left: .4rem; vertical-align: middle; }

/* Gold and Silver as lists (owner, 2026-10-06): Gold rows carry a larger logo, Silver rows a small one, like Bronze
   with a logo. Diamond and Platinum keep the large cards. */
.biz-list { list-style: none; margin: 0; padding: 0; display: grid; column-gap: 2rem; }
.biz-list.gold { grid-template-columns: repeat(auto-fill, minmax(min(100%, 380px), 1fr)); }
.biz-list.silver { grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); }
.biz-row { display: flex; align-items: center; gap: 1rem; padding: .7rem 0; border-bottom: 1px solid var(--line); min-width: 0; }
.biz-row .logo-box { flex: none; display: flex; align-items: center; justify-content: center; }
.biz-row .logo-box img { max-width: 100%; max-height: 100%; object-fit: contain; display: block; }
.biz-list.gold .logo-box { width: 104px; height: 78px; }
.biz-list.silver .logo-box { width: 52px; height: 40px; }
.biz-row .txt { min-width: 0; }
.biz-row .nm { font-weight: 700; }
.biz-list.gold .nm { font-size: 1.15rem; }
.biz-row .contact { font-size: .88rem; color: var(--muted); overflow-wrap: anywhere; }
.biz-row .contact a { color: var(--forest); }
.biz-row.example { border-bottom-style: dashed; }
.biz-row.example .nm, .biz-row.example .contact { color: var(--muted); }
.biz-row.example .example-cta { display: inline-block; margin-top: .2rem; font-size: .9rem; }

/* "Become a [level] supporter →" at the right end of each level banner */
.level-banner { flex-wrap: wrap; }
.level-banner .banner-cta { margin-left: auto; font: 600 .9rem/1.2 var(--sans); letter-spacing: 0; text-transform: none; color: inherit; text-decoration: underline; text-underline-offset: .2em; text-decoration-color: currentColor; align-self: center; }
.level-banner .banner-cta:hover, .level-banner .banner-cta:focus-visible { text-decoration-thickness: 2px; }
.level-banner .banner-cta.sold { text-decoration: none; opacity: .85; }
@media (max-width: 560px) { .level-banner .banner-cta { margin-left: 0; flex-basis: 100%; margin-top: .35rem; font-size: .85rem; } }

/* Diamond spotlight EXAMPLE on the home page (no Diamond supporter yet) */
.spotlight .item.example .logo-box img { max-height: clamp(70px, 12vw, 100px); }
.spotlight .item.example .txt { display: flex; flex-direction: column; align-items: flex-start; gap: .35rem; text-align: left; }
.spotlight .item.example .nm { opacity: .85; }
.spotlight .spot-cta { font: 600 .95rem/1.2 var(--sans); text-decoration: underline; text-underline-offset: .2em; color: #F2D29B; }
@media (max-width: 560px) { .spotlight .item.example .txt { align-items: center; text-align: center; } }

/* Scrolling Diamond spotlight (owner, 2026-10-08): all Diamond supporters in one moving band, like the club strip */
.spotlight .wrap { flex-wrap: nowrap; }
.spotlight .spot-marquee { flex: 1 1 0; min-width: 0; margin: 0; }
.spotlight .spot-marquee .track { gap: 0; animation: none; }
.spotlight .spot-marquee .track.go { animation: scroll var(--dur, 30s) linear infinite; }
.spotlight .spot-marquee:hover .track, .spotlight .spot-marquee:focus-within .track { animation-play-state: paused; }
.spotlight .spot-marquee .item { flex: none; flex-wrap: nowrap; margin-right: clamp(1.5rem, 4vw, 3rem); }
.spotlight .spot-marquee .logo-box img { max-height: clamp(56px, 9vw, 84px); max-width: min(220px, 48vw); }
.spotlight .spot-marquee .nm { font-size: clamp(1.1rem, 2.6vw, 1.5rem); white-space: nowrap; }
@media (max-width: 640px) { .spotlight .wrap { flex-wrap: wrap; } .spotlight .spot-marquee { flex-basis: 100%; } }
@media (prefers-reduced-motion: reduce) {
  .spotlight .spot-marquee { -webkit-mask-image: none; mask-image: none; }
  .spotlight .spot-marquee .track, .spotlight .spot-marquee .track.go { animation: none; width: auto; flex-wrap: wrap; justify-content: center; gap: 1rem 2rem; }
  .spotlight .spot-marquee .track [aria-hidden="true"] { display: none; }
  .spotlight .spot-marquee .item { margin-right: 0; }
}