/*
Filename:      style-sponsor.css
Created by:    Kris Korsmo
Organization:  Leading Edge Digital Media - www.leadingedge.net
Purpose:       /sponsor/ - buying a sponsorship (sponsor/inc.cfm, sponsor.js)
Last Updated:  10/20/2026

The ad previews use the real slot styles from sponsor.css, so what the buyer
sees here is what the page will draw.
*/

.eg-buy {
  --eg-buy-accent: var(--accent, #c9a96a);
  --eg-buy-accent-rgb: var(--accent-rgb, 201, 169, 106);
  padding-bottom: 4rem;
}

.eg-buy .eg-sub {
  color: rgba(255, 255, 255, 0.5);
  font-size: 0.88em;
}

.eg-buy__gate { max-width: 46rem; }
.eg-buy__how { margin: 0.5rem 0 1.25rem; padding-left: 1.25rem; line-height: 1.8; }
.eg-buy__gatebtns { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.eg-buy__pricelist { max-width: 56rem; margin-top: 1rem; }

/* Fomantic's steps are light by default; match the dark page. */
.eg-buy__steps.ui.steps { margin-bottom: 1.25rem; background: transparent; border-color: rgba(255, 255, 255, 0.12); }
.eg-buy__steps.ui.steps .step {
  background: rgba(255, 255, 255, 0.03);
  border-color: rgba(255, 255, 255, 0.12);
  color: rgba(255, 255, 255, 0.55);
}
.eg-buy__steps.ui.steps .step::after {
  background: #141518;
  border-color: rgba(255, 255, 255, 0.12);
}
.eg-buy__steps.ui.steps .step .title { color: inherit; }
.eg-buy__steps.ui.steps .step.active {
  background: rgba(var(--eg-buy-accent-rgb), 0.12);
  color: #fff;
}
.eg-buy__steps.ui.steps .step.active::after { background: #262117; }
.eg-buy__steps.ui.steps .step.active .title { color: var(--eg-buy-accent); }
.eg-buy__steps.ui.steps .step.completed .title { color: rgba(255, 255, 255, 0.8); }

/* ---- Duration and tier choices: big tappable cards ---------------------- */
.eg-buy__durations,
.eg-buy__tiers {
  display: grid;
  gap: 0.6rem;
}
.eg-buy__durations { grid-template-columns: repeat(auto-fill, minmax(7.5rem, 1fr)); }
.eg-buy__tiers { grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr)); }

.eg-buy__dur,
.eg-buy__tier {
  appearance: none;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 0.5rem;
  color: #fff;
  cursor: pointer;
  font: inherit;
  padding: 0.75rem 0.9rem;
  text-align: left;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.eg-buy__dur { text-align: center; font-weight: 600; }
.eg-buy__tier { display: flex; flex-direction: column; gap: 0.2rem; }

.eg-buy__dur:hover,
.eg-buy__tier:hover { border-color: rgba(var(--eg-buy-accent-rgb), 0.5); }

.eg-buy__dur:focus-visible,
.eg-buy__tier:focus-visible { outline: 2px solid var(--eg-buy-accent); outline-offset: 2px; }

.eg-buy__dur.is-selected,
.eg-buy__tier.is-selected {
  border-color: var(--eg-buy-accent);
  background: rgba(var(--eg-buy-accent-rgb), 0.12);
}

.eg-buy__tier.is-disabled { opacity: 0.45; cursor: not-allowed; }
.eg-buy__tiername { font-weight: 700; }
.eg-buy__tierprice { color: var(--eg-buy-accent); font-weight: 600; }
.eg-buy__tierdesc { font-size: 0.88em; color: rgba(255, 255, 255, 0.7); }

/* ---- Target search --------------------------------------------------- */
.eg-buy__results.ui.list { max-height: 16rem; overflow-y: auto; margin-top: 0.5rem; }
.eg-buy__results .item { cursor: pointer; }
.eg-buy__chosen { padding: 0.6rem 0; }
.eg-buy__chosen a { color: var(--eg-buy-accent); margin-left: 0.5rem; }

/* ---- Summary column ----------------------------------------------------- */
.eg-buy__summary { position: sticky; top: 5rem; }
.eg-buy__lines { list-style: none; margin: 0 0 1rem; padding: 0; }
.eg-buy__lines li {
  display: flex;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.6rem 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.eg-buy__lines li.has-error { color: rgba(255, 255, 255, 0.6); }
.eg-buy__linetitle { font-weight: 600; }
.eg-buy__lineprice { white-space: nowrap; display: flex; align-items: flex-start; gap: 0.5rem; }
.eg-buy__remove {
  background: none; border: 0; color: rgba(255, 255, 255, 0.5);
  cursor: pointer; font-size: 1.2rem; line-height: 1; padding: 0 0.2rem;
}
.eg-buy__remove:hover, .eg-buy__remove:focus-visible { color: #fff; }
.eg-buy__err { color: #ff8a80; font-size: 0.88em; margin-top: 0.25rem; }
.eg-buy__row { display: flex; justify-content: space-between; padding: 0.2rem 0; }
.eg-buy__total { font-weight: 700; font-size: 1.15em; border-top: 1px solid rgba(255, 255, 255, 0.15); margin-top: 0.4rem; padding-top: 0.6rem; }

/* ---- Artwork ------------------------------------------------------------ */
.eg-buy__art .ui.form input[type="file"] { padding: 0.5rem; }
.eg-buy__preview { margin-top: 1rem; }
.eg-buy__preview .eg-sp { margin: 0.4rem 0 0; }
.eg-buy__placeholder {
  border: 1px dashed rgba(255, 255, 255, 0.25);
  border-radius: 0.5rem;
  color: rgba(255, 255, 255, 0.4);
  display: flex; align-items: center; justify-content: center;
  margin-top: 0.4rem;
  max-height: 18rem;
}

/* ---- Payment ------------------------------------------------------------ */
.eg-buy__chargeNote { line-height: 1.6; }
.eg-buy__terms {
  border: 1px solid rgba(var(--eg-buy-accent-rgb), 0.35);
  border-radius: 0.5rem;
  padding: 0.9rem 1rem;
  margin: 0 0 1rem;
  line-height: 1.6;
}
.eg-buy__terms .ui.checkbox label { color: #fff !important; }
.eg-buy__wallets { display: grid; gap: 0.6rem; margin-bottom: 1rem; }
.eg-buy__wallets .eg-apple-pay-btn,
.eg-buy__wallets .eg-google-pay-btn { min-height: 44px; }
.eg-buy__or { text-align: center; color: rgba(255, 255, 255, 0.45); font-size: 0.85em; }
.eg-buy__card { min-height: 90px; margin-bottom: 0.75rem; }
.eg-buy__error { color: #ff8a80; min-height: 1.2em; margin-bottom: 0.75rem; }
.eg-buy__fineprint { margin-top: 0.75rem; }

.eg-buy__done { text-align: center; padding: 2rem 1rem !important; }
.eg-buy__done p { max-width: 36rem; margin-left: auto; margin-right: auto; }

.eg-buy__nav { display: flex; justify-content: space-between; margin-top: 1rem; }
.eg-buy__nav #buyNext { margin-left: auto; }

/* ---- Admin booking (sponsor/?admin=1) ----------------------------------- */
#buyAdminSegment .ui.radio.checkbox label,
#buyAdminSegment .ui.checkbox label { color: #fff !important; line-height: 1.5; }
.eg-buy__inkindcalc { padding-top: 0.55rem; line-height: 1.5; }

/* ---- Markets, national, offers, packages (db/042) ------------------------ */
.eg-buy__promo {
  border: 1px solid rgba(var(--eg-buy-accent-rgb), 0.45);
  background: rgba(var(--eg-buy-accent-rgb), 0.1);
  border-radius: 0.5rem;
  color: #fff;
  line-height: 1.55;
  margin: 0 0 1rem;
  padding: 0.75rem 1rem;
}
.eg-buy__promo .icon,
.eg-buy__promoline .icon { color: var(--eg-buy-accent); }
.eg-buy__promoline { color: var(--eg-buy-accent); font-size: 0.9em; margin-top: 0.5rem; }

.eg-buy__national.ui.toggle.checkbox { margin: 0.2rem 0 0.75rem; }
.eg-buy__national.ui.checkbox label { color: #fff !important; }
.eg-buy__lineprice-live { min-height: 1.6em; margin: 0.25rem 0 0.9rem; line-height: 1.5; }
.eg-buy__liveprice { color: var(--eg-buy-accent); font-size: 1.15em; font-weight: 700; margin-right: 0.35rem; }
.eg-buy__mktlist { margin-top: 0.2rem; line-height: 1.45; }

/* Fomantic's multi-select labels default to light grey chips. */
#sponsorBuy .ui.multiple.dropdown > .label {
  background: rgba(var(--eg-buy-accent-rgb), 0.16);
  border: 1px solid rgba(var(--eg-buy-accent-rgb), 0.4);
  color: #fff;
  box-shadow: none;
}

.eg-buy__packages { display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: 0.9rem; }
.eg-buy__package {
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 0.5rem;
  background: rgba(255, 255, 255, 0.03);
  display: flex; flex-direction: column; gap: 0.35rem;
  padding: 0.9rem 1rem;
}
.eg-buy__package .button { align-self: flex-start; margin-top: auto !important; }
.eg-buy__pkgname { font-weight: 700; font-size: 1.05em; }
.eg-buy__pkgprice { color: var(--eg-buy-accent); font-weight: 700; font-size: 1.1em; }
.eg-buy__pkgitems { margin: 0.2rem 0 0.6rem; padding-left: 1.1rem; line-height: 1.6; color: rgba(255, 255, 255, 0.8); }
.eg-buy__pkgline { color: var(--eg-buy-accent); font-weight: 600; margin-bottom: 0.25rem; }

.eg-buy__scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.eg-buy__ratecard td .eg-sub { white-space: nowrap; }

/* =========================================================================
   My Sponsorships (/sponsorships/, sponsorships.js). Shares .eg-buy above.
   ========================================================================= */
.eg-mysp .eg-warn,
#myspModal .eg-warn { color: #f2a65a; }
#myspModal .eg-sub { color: rgba(255, 255, 255, 0.5); font-size: 0.88em; }
.eg-mysp__bar { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; }
.eg-mysp__bar .field { display: flex; flex-direction: column; gap: 0.3rem; min-width: 14rem; }
.eg-mysp__bar #myspNew { margin-left: auto; }
.eg-mysp__h.ui.header { font-size: 1.15rem; margin: 0 0 0.9rem; }
.eg-mysp__h3.ui.header { font-size: 0.95rem; margin: 1rem 0 0.5rem; }

.eg-mysp__tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.9rem; }
.eg-mysp__tile { padding: 0.8rem 1rem; border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 0.4rem; background: rgba(255, 255, 255, 0.02); }
.eg-mysp__num { font-size: 1.6rem; font-weight: 700; line-height: 1.2; color: #f2efe8; font-variant-numeric: tabular-nums; }
.eg-mysp__tiles--sm .eg-mysp__num { font-size: 1.3rem; }
.eg-mysp__chart { min-height: 180px; margin: 0.5rem 0 1rem; }

.eg-mysp__list { display: grid; grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr)); gap: 1rem; }
.eg-mysp__order.ui.segment { margin: 0 !important; display: flex; flex-direction: column; gap: 0.35rem; }
.eg-mysp__order .button { align-self: flex-start; margin-top: 0.5rem !important; }
.eg-mysp__ohead { display: flex; align-items: center; gap: 0.5rem; }
.eg-mysp__num { font-variant-numeric: tabular-nums; }
.eg-mysp__ohead .eg-mysp__num { font-size: 1.05rem; font-weight: 700; }
.eg-mysp__place { font-weight: 600; }
.eg-mysp__stats { font-variant-numeric: tabular-nums; }

#myspModal .ui.dividing.header { margin-top: 1.5rem; }
#myspModal .actions { display: flex; flex-wrap: wrap; gap: 0.4rem; justify-content: flex-end; }
#myspModal .actions .button { margin: 0 !important; }
.eg-mysp__plan { margin-bottom: 0.5rem !important; }
.eg-mysp__cardwrap.ui.segment { margin-top: 1rem; }
.eg-mysp__cardwrap .ui.checkbox label { color: #fff !important; }
.eg-mysp__btns { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.75rem; }

.eg-mysp__fmt.ui.segment { margin: 0 0 1rem; }
.eg-mysp__arts { display: grid; grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr)); gap: 1rem; margin: 0.5rem 0 0.75rem; }
.eg-mysp__art img {
  display: block; width: 100%; height: auto; margin: 0.35rem 0;
  border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 0.35rem; background: #0f1114;
}
.eg-mysp__art .eg-sub { word-break: break-all; }
.eg-mysp__artform { margin-top: 0.75rem; }
.eg-mysp__artform input[type="file"] { padding: 0.5rem !important; }

@media (prefers-reduced-motion: reduce) {
  .eg-buy__dur, .eg-buy__tier { transition: none; }
}

@media only screen and (max-width: 767px) {
  .eg-buy__summary { position: static; }
  .eg-buy__steps.ui.steps .step .title { font-size: 0.8rem; }
  .eg-mysp__tiles { grid-template-columns: 1fr; }
  .eg-mysp__bar #myspNew { margin-left: 0; }
  .eg-mysp__bar .field { min-width: 0; width: 100%; }
}

/* ------------------------------------------------------------------
   Payment processing dimmer (sponsor.js payDimmer)

   Fomantic's page dimmer sits at z-index 1000, under the fixed top bar (up
   to 10000 in style.css) and Square's card iframe. Appended to <body>.
   ------------------------------------------------------------------ */
#egPayDimmer.ui.page.dimmer {
  z-index: 20000;
}