/* =========================================================
   Spacing presets (toggle by adding/removing .pteg-compact)
   ========================================================= */
.pteg-module {
  /* fixed card width (prevents shrinking / price truncation during resize) */
  --pteg-card-w: 24rem; /* adjust: 23rem–26rem */

  /* card spacing */
  --pteg-card-pad: 0.75rem;
  --pteg-meta-mt: 1rem;
  --pteg-controls-mt: 1rem;
  --pteg-controls-gap: 0.5rem;

  /* date sizing (so we can shrink it on mobile) */
  --pteg-date-font: 0.9rem;
  --pteg-date-ls: 1px;
  --pteg-date-icon: 1.25rem;
  --pteg-date-gap: 0.75ch;

  /* facts row spacing */
  --pteg-facts-pt: 1.5rem;
  --pteg-facts-minh: 5.25rem;
  --pteg-facts-rule-top: 0.75rem;

  /* availability grid */
  --pteg-seat-w: 3.5rem;         /* seat tile width */
  --pteg-seat-gap: 0.35rem;      /* gap between button tile and seat tile */
  --pteg-seat-row-gap: 0.5rem;   /* gap between rows (Public/Early + Sponsored) */

  /* tile heights */
  --pteg-tile-min-h: 3.35rem;    /* button + seat tile base height */
  --pteg-banner-h: 1.45rem;      /* “virtual” banner height used to equalise rows */

  /* button sizing (helps remove dead space) */
  --pteg-btn-pad: 0.25rem;
  --pteg-btn-font: 1.2rem;

  /* seat tile internal spacing */
  --pteg-seat-pad: 0.30rem;
  --pteg-seat-gap-inside: 0.5rem; /* space between label and number */
}

/* Tighter preset */
.pteg-module.pteg-compact {
  --pteg-card-pad: 0.6rem;
  --pteg-meta-mt: 0.8rem;
  --pteg-controls-mt: 0.8rem;

  --pteg-facts-pt: 1.15rem;
  --pteg-facts-minh: 4.75rem;

  --pteg-tile-min-h: 2.15rem; /* height of tile */
  --pteg-banner-h: 1.1rem;
  --pteg-seat-row-gap: 0.30rem;

  --pteg-btn-pad: 0.42rem;
  --pteg-btn-font: 1.1rem;

  --pteg-seat-pad: 0.26rem;
  --pteg-seat-gap-inside: 0.42rem;
}

/* =========================================================
   Base
   ========================================================= */
.pteg-module * {
  box-sizing: border-box;
}

.pteg-module, dialog {
  font-family: "Plus Jakarta Sans", Arial, sans-serif;
}

/* =========================================================
   Filters: slide-fill hover (no layout shift)  (SCOPED)
   ========================================================= */

.pteg-filters{
  display:flex;
  justify-content:center;
  gap:0.75rem;
  margin-bottom:1rem;
  padding-top:0.5rem;          /* lifts filters off the border */
  width:100%;
  overflow-x:auto;
  overflow-y:hidden;
  flex-wrap:wrap;              /* keeps layout stable if they wrap */
}

.pteg-filters .pteg-filter{
  position:relative;
  overflow:hidden;             /* contains the sliding fill */
  isolation:isolate;           /* keeps ::before behind text */
  box-sizing:border-box;

  border:1px solid #A6A6A6;    /* constant border => no shifting */
  background-color: rgba(var(--pteg-primary-rgb), .08);
  font-size:18px;
  line-height:1em;
  padding:0.75em 1em;
  border-radius: calc(1em / 2 + 0.75em);
  font-weight:600;
  cursor:pointer;

  /* FIX: missing "s" previously */
  transition: color 0.3s ease-in-out, background-color 0.3s ease-in-out;
}

/* slide fill layer */
.pteg-filters .pteg-filter::before{
  content:"";
  position:absolute;
  inset:0;
  width:0;
  background:#B9F1FF;          /* blue fill (tweak if needed) */
  transition:width 0.6s ease-in-out;
  z-index:-1;                  /* behind button content */
}

.pteg-filters .pteg-filter:hover::before{ width:100%; }
.pteg-filters .pteg-filter:hover{ color:#000; }

.pteg-filters .pteg-filter.active{
  background-color: var(--pteg-primary);
  border-color: transparent;
  color: var(--pteg-text_on_primary);
}
.pteg-filters .pteg-filter.active::before{ display:none; }



/* =========================================================
   FIXED CARD GRID (cards never shrink; they wrap into new rows)
   ========================================================= */
.pteg-event-grid {
  display: grid;
  gap: 1rem;

  /* fixed-width columns that wrap automatically */
  grid-template-columns: repeat(auto-fit, minmax(var(--pteg-card-w), var(--pteg-card-w)));

  /* center the fixed columns within the container */
  justify-content: center;

  /* keep items aligned neatly */
  justify-items: stretch;
}

/* Mobile fallback: 1 fluid column + smaller date text */
@media (max-width: 520px) {
  .pteg-event-grid {
    grid-template-columns: 1fr;
    justify-content: stretch;
  }

  /* Slightly tighten on mobile so the card fits comfortably */
  .pteg-module {
    --pteg-card-pad: 0.65rem;
    --pteg-btn-font: 1.05rem;
    --pteg-btn-pad: 0.45rem;

    /* shrink date on mobile */
    --pteg-date-font: 0.8rem;
    --pteg-date-ls: 0.5px;
    --pteg-date-icon: 1.1rem;
    --pteg-date-gap: 0.6ch;
  }
}

a.pteg-event-link,
a.pteg-event-link:hover,
a.pteg-event-link:visited,
a.pteg-event-link:active {
  text-decoration: none;
  color: unset;
  display: block;
  max-width: var(--pteg-card-w);
}

a.pteg-event-link:has(> .pteg-event.hidden) {
  display: none;
}

.pteg-event {
  border-radius: 1rem;
  box-shadow: 0 9px 14px rgba(0, 0, 0, 0.02);
  background-color: #ffffff;
  border: 3px solid #ECF1F9;
  padding: var(--pteg-card-pad);
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  transition: box-shadow 200ms ease-in-out, transform 200ms ease-out;

  /* fixed width so content doesn’t compress/cut off */
  width: var(--pteg-card-w);
  max-width: var(--pteg-card-w);

  margin: 0; /* grid handles placement */
}

/* Mobile: allow card to be fluid */
@media (max-width: 520px) {
  .pteg-event {
    width: 100%;
    max-width: 100%;
  }
}

.pteg-event--image {
  max-width: 100%;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: 0.5rem;
}

.pteg-event--region {
  position: absolute;
  top: 1.5rem;
  left: 1.5rem;
  letter-spacing: 2px;
  border-radius: 2rem;
  line-height: 1rem;
  background: var(--pteg-primary);
  padding: 0.25rem 1rem;
  font-weight: bold;
  color: var(--pteg-text_on_primary);
  font-size: 0.9rem;
  z-index: 1;
}

.pteg-event--meta {
  display: flex;
  width: 100%;
  gap: 1rem;
  justify-content: space-between;
  align-items: center;
  margin-top: var(--pteg-meta-mt);
  padding: 0 0.5rem;
}

.pteg-meta--date {
  display: flex;
  gap: var(--pteg-date-gap);
  align-items: top;
  font-size: var(--pteg-date-font);
  letter-spacing: var(--pteg-date-ls);
}

.pteg-meta--date svg {
  width: var(--pteg-date-icon);
  fill: var(--pteg-secondary);
}

.pteg-meta--rating {
  display: flex;
}

.pteg-meta--rating svg {
  width: 1.25rem;
  fill: var(--pteg-secondary);
}

/* Keep availability tiles aligned even when titles wrap differently */
.pteg-event h3 {
  font-size: 1.2rem;
  font-weight: 600;
  margin-top: 0.75rem;
  margin-bottom: 0.5rem;
  text-transform: uppercase;
  line-height: 1.15;

  /* Reserve space for 2 lines so 1-line titles don't pull tiles upward */
  min-height: calc(1.15em * 2);

  /* prevent 3+ line titles from pushing tiles down */
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

.pteg-event--controls {
  margin-top: var(--pteg-controls-mt);
}

.pteg-status {
  padding: 0 0.5rem;
  text-align: center;
  border-radius: 0.25rem;
  font-weight: 700;
  font-size: 1.1rem;
  line-height: 42px;
  margin-bottom: var(--pteg-controls-gap);
}

.pteg-sold-out {
  color: var(--pteg-secondary_dark);
  background: rgba(var(--pteg-secondary-rgb), 0.1);
}

/* =========================================================
   Availability grid + tiles
   ========================================================= */
.pteg-availability-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--pteg-seat-w);
  column-gap: var(--pteg-seat-gap);
  row-gap: var(--pteg-seat-row-gap);
  align-items: stretch;
  width: 100%;
}

/* Column 2 seat tiles */
.pteg-availability-grid > .pteg-seat-count {
  grid-column: 2 / 3;
  justify-self: stretch;
  width: var(--pteg-seat-w);
  min-width: var(--pteg-seat-w);
  align-self: stretch;
}

/* Stacks in column 1 */
.pteg-early-stack,
.pteg-sponsored-stack {
  grid-column: 1 / 2;
  justify-self: stretch;
  min-width: 0;
  display: flex;
  flex-direction: column;
  width: 100%;
}

/* Buttons should be consistent height in normal state */
.pteg-early-stack > .pteg-sign-up--public,
.pteg-sponsored-stack > .pteg-sign-up--sponsored {
  min-height: var(--pteg-tile-min-h);
  display: flex;
  align-items: center;
}

/* Make non-early-access tiles match the Early Access visual height (button+banner height) */
.pteg-availability-grid:not(.has-sponsored-banner) .pteg-early-stack > .pteg-sign-up--public,
.pteg-availability-grid:not(.has-sponsored-banner) .pteg-sponsored-stack > .pteg-sign-up--sponsored {
  min-height: calc(var(--pteg-tile-min-h) + var(--pteg-banner-h));
}

/* Early access row needs to match sponsored row (button + banner) only when timer is active */
.pteg-availability-grid.has-sponsored-banner .pteg-early-stack > .pteg-sign-up--public {
  min-height: calc(var(--pteg-tile-min-h) + var(--pteg-banner-h));
}

/* We no longer use the empty blue banner for sizing */
.pteg-early-banner {
  display: none !important;
  height: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
}

/* --- AMBER banner --- */
.pteg-sponsored-banner {
  background: #ffb000;
  color: #111;
  padding: 0.35rem 0.5rem;
  font-size: 0.62rem;
  font-weight: 700;
  line-height: 1.15;
  text-align: center;

  display: none;

  border-left: 2px solid #ffb000;
  border-right: 2px solid #ffb000;
  border-bottom: 2px solid #ffb000;
  border-top: 0;

  margin-top: -2px;
  border-bottom-left-radius: 0.25rem;
  border-bottom-right-radius: 0.25rem;

  outline: none !important;
  box-shadow: none !important;
}

.pteg-sponsored-banner.is-active {
  display: block;
}

/* When banner is active, remove sponsored button bottom border so it joins cleanly */
.pteg-availability-grid.has-sponsored-banner .pteg-sponsored-stack .pteg-sign-up--sponsored {
  border-bottom: 0 !important;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}

/* Seat tile layout */
.pteg-seat-count {
  background-color: var(--pteg-border);
  border: 2px solid transparent;
  border-radius: 0.25rem;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  padding: var(--pteg-seat-pad);
  gap: var(--pteg-seat-gap-inside);

  color: #111;
  min-height: var(--pteg-tile-min-h);
}

/* zero state MUST come after base seat tile styles */
.pteg-seat-count--zero {
  background-color: #ffe3e7;
  border-color: #e62323;
  color: #e62323;
}

.pteg-seat-label {
  font-size: 0.5rem;
  font-weight: 700;
  line-height: 1.05;
  text-align: center;
  margin: 0;
}

.pteg-seat-number {
  font-size: 1.0rem;
  font-weight: 800;
  line-height: 1;
  text-align: center;
}

/* =========================================================
   Buttons
   ========================================================= */
.pteg-btn,
.pteg-btn:focus {
  --pteg-btn-txt: var(--pteg-text_on_primary);
  --pteg-btn-bg: var(--pteg-primary);
  --pteg-btn-bg-hov: var(--pteg-primary_light);
  --pteg-btn-border: var(--pteg-primary_dark);

  border: 2px solid var(--pteg-btn-border);
  font-family: "Plus Jakarta Sans", Arial, sans-serif;
  color: var(--pteg-btn-txt);
  background-color: var(--pteg-btn-bg);
  border-radius: 0.25rem;
  padding: var(--pteg-btn-pad);
  font-weight: 700;
  font-size: var(--pteg-btn-font);
  display: flex;
  width: 100%;
  cursor: pointer;
  transition: background-color 250ms ease-in-out, border-bottom-width 100ms ease-out, margin-top 100ms ease-out;
  box-sizing: border-box;
  line-height: 1;
  text-transform: none;
  text-align: center;
  text-decoration: none;
}

.pteg-btn:disabled,
.pteg-btn.disabled {
  --pteg-btn-txt: var(--pteg-text_on_primary);
  --pteg-btn-bg: var(--pteg-disabled_btn);
  --pteg-btn-bg-hov: var(--pteg-disabled_btn);
  --pteg-btn-border: var(--pteg-disabled_btn_dark);
}

.pteg-sign-up,
.pteg-sign-up:focus {
  font-size: 1rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.pteg-sign-up {
  min-width: 0;
  gap: 0.5rem;
  align-items: center;
}

.pteg-sign-up .pteg-partner,
.pteg-sign-up .pteg-price {
  display: flex;
  align-items: center;
  line hookup: 1;
  white-space: nowrap;
}

.pteg-sign-up--sponsored .js-sponsored-countdown {
  font-size: 0.78rem;
  font-weight: 500;
}

.pteg-sign-up .pteg-price {
  margin-left: auto;
  justify-content: flex-end;
  overflow: hidden;
  text-overflow: ellipsis;
}

.pteg-sign-up .pteg-partner {
  font-weight: 800;
  flex: 0 0 auto;
}

.pteg-sign-up .pteg-price {
  font-weight: 400;
  font-size: 0.9rem;
  flex: 1 1 auto;
  min-width: 0;
  text-align: right;
}

/* Mobile fix: stop “price” collapsing/truncating by stacking label + price */
@media (max-width: 520px) {
  .pteg-sign-up {
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 0.35rem;
  }

  .pteg-sign-up .pteg-partner,
  .pteg-sign-up .pteg-price {
    width: 100%;
    justify-content: flex-start;
    white-space: normal;
  }

  .pteg-sign-up .pteg-price {
    margin-left: 0;
    text-align: left;
    overflow: visible;
    text-overflow: clip;
  }
}

.pteg-btn.closed {
  --pteg-btn-txt: var(--pteg-primary);
  --pteg-btn-bg: rgba(var(--pteg-primary-rgb), 0);
  --pteg-btn-bg-hov: rgba(var(--pteg-primary-rgb), 0.075);
  --pteg-btn-border: var(--pteg-border);
}

.pteg-btn.pteg-btn--inline {
  display: inline-block;
  width: auto;
}

.pteg-btn.pteg-btn--centered {
  justify-content: center;
}

.pteg-btn:focus {
  color: var(--pteg-btn-txt) !important;
  outline: 2px solid var(--pteg-primary_dark) !important;
  outline-offset: 2px;
}

.pteg-btn:hover,
.pteg-btn:active {
  background-color: var(--pteg-btn-bg-hov);
  color: var(--pteg-btn-txt) !important;
  border: 2px solid var(--pteg-btn-border) !important;
  text-decoration: none !important;
}

/* =========================================================
   Facts row
   ========================================================= */
.pteg-event--facts {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  margin: 0;
  margin-top: auto;
  position: relative;
  z-index: 0;
  padding-top: var(--pteg-facts-pt);
  min-height: var(--pteg-facts-minh);
}

.pteg-event--facts::before {
  content: "";
  position: absolute;
  top: var(--pteg-facts-rule-top);
  left: 1rem;
  right: 1rem;
  border-top: 2px dashed var(--pteg-border);
}

.pteg-event--fact {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  font-size: 0.8rem;
  letter-spacing: 1px;
  white-space: nowrap;
  position: relative;
  z-index: 1;
}

.pteg-event--fact svg {
  display: block;
  width: 1.25rem;
  fill: var(--pteg-primary);
}

/* =========================================================
   Dialogs + forms
   ========================================================= */
dialog {
  border: none;
  border-radius: 1rem;
  box-sizing: border-box;
}

dialog:focus { outline: none; }

.hidden { display: none !important; }

/* =========================================================
   Modal close button (fix: keep X top-right, not in flow)
   ========================================================= */
.pteg-modal-wrapper {
  position: relative; /* anchor for absolute close button */
}

.pteg-modal-close {
  position: absolute;
  top: 1rem;
  right: 1rem;

  width: 44px;
  height: 44px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  border: 0;
  border-radius: 0.6rem;

  background: rgba(var(--pteg-primary-rgb), 0.15);
  color: var(--pteg-primary);

  cursor: pointer;
  z-index: 10;
}

.pteg-modal-close svg {
  width: 18px;
  height: 18px;
  fill: currentColor;
}

.pteg-modal-close:hover {
  background: rgba(var(--pteg-primary-rgb), 0.25);
}

.pteg-modal-close:focus {
  outline: 2px solid var(--pteg-primary_dark);
  outline-offset: 2px;
}

/* =========================================================
   Experimental / area to test and overide code
   ========================================================= */
@media (max-width: 520px) {
  .dnd_area-row-2-padding:has(.pteg-module) {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
}


/* =========================================================
   Modal fixes: center the X + make tier buttons bigger + more spacing
   Scoped to the Adobe Partner modal only
   ========================================================= */
/* =========================================================
   Modal tier buttons: fix Community colour + inline layout + equal sizing
   ========================================================= */

/* 1) Make the close "X" stay centred in its square */
#ptegSponsoredSignupModal .pteg-modal-close{
  display:flex;
  align-items:center;
  justify-content:center;
  width: 44px;          /* adjust if you want bigger/smaller */
  height: 44px;
  line-height: 1;
  padding: 0;
}

/* 2) Lay the tier buttons out side-by-side (wrapping on small screens) */
#ptegSponsoredSignupModal .pteg-partner-tier-group{
  display:flex;
  flex-wrap: wrap;
  gap: 0.75rem;         /* spacing between buttons */
  align-items: flex-start;
  margin-bottom: 1.25rem;
}

/* Headings occupy full row so buttons start beneath */
#ptegSponsoredSignupModal .pteg-partner-tier-group > h3{
  flex: 0 0 100%;
  margin: 0 0 0.5rem 0;
}

/* 3) Make ALL tier buttons the same size as the “I don’t know” button */
#ptegSponsoredSignupModal{
  --pteg-tier-btn-w: 14rem;   /* <— single knob to match “I don’t know” */
  --pteg-tier-btn-h: 2.75rem;
}

/* Apply sizing to tier buttons/links */
#ptegSponsoredSignupModal .pteg-partner-tier-group .pteg-btn,
#ptegSponsoredSignupModal .pteg-partner-tier-group .pteg-registration-link{
  width: var(--pteg-tier-btn-w) !important;
  max-width: var(--pteg-tier-btn-w) !important;
  min-height: var(--pteg-tier-btn-h);
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius: 0.5rem;
  font-weight: 800;
}

/* Match “I don’t know” size too (leave its colour alone) */
#ptegSponsoredSignupModal .pteg-centered .pteg-btn{
  width: var(--pteg-tier-btn-w) !important;
  max-width: var(--pteg-tier-btn-w) !important;
  min-height: var(--pteg-tier-btn-h);
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius: 0.5rem;
}

/* 4) Tier colours (these rely on the class names on the buttons/links) */
#ptegSponsoredSignupModal .pteg-btn.platinum,
#ptegSponsoredSignupModal a.pteg-btn.platinum{
  background: #686964 !important;
  border-color: #686964 !important;
  color: #fff !important;
}

#ptegSponsoredSignupModal .pteg-btn.gold,
#ptegSponsoredSignupModal a.pteg-btn.gold{
  background: #bc9537 !important;
  border-color: #bc9537 !important;
  color: #111 !important;
}

#ptegSponsoredSignupModal .pteg-btn.silver,
#ptegSponsoredSignupModal a.pteg-btn.silver{
  background: #a1a2a4 !important;
  border-color: #a1a2a4 !important;
  color: #111 !important;
}

/* Bronze (you currently use class "platinum" for Bronze in HTML.
   If you want a true bronze class, change HTML to .bronze and enable below.) */

#ptegSponsoredSignupModal .pteg-btn.bronze,
#ptegSponsoredSignupModal a.pteg-btn.bronze{
  background: #c7561b !important;
  border-color: #c7561b !important;
  color: #fff !important;
}

/* Community (requires you to change HTML class from "gold" to "community") */
#ptegSponsoredSignupModal .pteg-btn.community,
#ptegSponsoredSignupModal a.pteg-btn.community{
  background: #2f2f90 !important;
  border-color: #2f2f90 !important;
  color: #fff !important;
}

/* Mobile: let buttons become full width if needed */
@media (max-width: 520px){
  #ptegSponsoredSignupModal{
    --pteg-tier-btn-w: 100%;
  }
}