/* =========================================================
   TICKETS EVENT — Premium Xceed-like (FULL)
   File: /assets/tickets-event.css
========================================================= */

/* Base container */
.xe{
  max-width: 1180px;
  margin: 0 auto;
  padding: 22px 20px 90px;
}

/* Top bar */
.xeTop{ margin-bottom: 14px; }

.xeBack{
  display:inline-flex;
  align-items:center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid rgba(0,0,0,.10);
  background: rgba(255,255,255,.58);
  color: rgba(0,0,0,.84);
  font-weight: 950;
  letter-spacing: .10em;
  text-transform: uppercase;
  font-size: 12px;
  box-shadow: 0 12px 28px rgba(10,14,25,.10);
}

/* =========================================================
   HERO
========================================================= */
.xeHero{
  position: relative;
  border-radius: 28px;
  overflow: hidden;
  border: 1px solid rgba(0,0,0,.10);
  box-shadow: 0 22px 60px rgba(10,14,25,.14);
}

.xeHeroBg{
  height: 290px;
  background:
    radial-gradient(900px 540px at 18% 20%, rgba(90,120,255,.58), transparent 60%),
    radial-gradient(720px 520px at 86% 75%, rgba(0,215,255,.26), transparent 62%),
    linear-gradient(180deg, rgba(0,0,0,.08), rgba(0,0,0,.02)),
    rgba(255,255,255,.40);
}

.xeHeroInner{
  background: rgba(255,255,255,.72);
  backdrop-filter: blur(10px);
  padding: 18px 18px 14px;
}

.xeMeta{
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.xeWhen{
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid rgba(0,0,0,.10);
  background: rgba(0,0,0,.03);
  font-size: 12px;
  font-weight: 950;
  letter-spacing: .10em;
  text-transform: uppercase;
  color: rgba(0,0,0,.68);
}

.xeTags{ display:flex; gap: 8px; flex-wrap: wrap; }

.xeTag{
  padding: 7px 10px;
  border-radius: 999px;
  border: 1px solid rgba(0,0,0,.10);
  background: rgba(0,0,0,.03);
  font-size: 12px;
  font-weight: 950;
  letter-spacing: .10em;
  text-transform: uppercase;
  color: rgba(0,0,0,.70);
}

.xeTitle{
  margin: 12px 0 6px;
  font-size: clamp(34px, 4.6vw, 62px);
  line-height: .98;
  font-weight: 1000;
  letter-spacing: -.04em;
  color: rgba(0,0,0,.96);
}

.xeSub{
  display:flex;
  gap: 10px;
  flex-wrap: wrap;
  color: rgba(0,0,0,.62);
  font-weight: 850;
}

.xeVenue{ color: rgba(0,0,0,.86); }
.xeDot{ opacity: .55; }

/* Tabs */
.xeTabs{
  margin-top: 14px;
  display:flex;
  gap: 18px;
  flex-wrap: wrap;
  padding-top: 10px;
  border-top: 1px solid rgba(0,0,0,.08);
}

.xeTab{
  position: relative;
  padding: 10px 0;
  font-weight: 950;
  letter-spacing: .12em;
  text-transform: uppercase;
  font-size: 12px;
  color: rgba(0,0,0,.45);
}
.xeTab:hover{ color: rgba(0,0,0,.78); }
.xeTab.is-active{ color: rgba(0,0,0,.92); }

.xeTab.is-active::after{
  content:"";
  position:absolute;
  left:0;
  bottom:-1px;
  width:100%;
  height:3px;
  border-radius: 999px;
  background: linear-gradient(90deg, #5a78ff, #00d7ff);
  box-shadow: 0 14px 30px rgba(90,120,255,.20);
}

/* =========================================================
   LAYOUT
========================================================= */
.xeGrid{
  display:grid;
  grid-template-columns: 1fr 360px;
  gap: 18px;
  align-items: start;
  margin-top: 16px;
}

@media (max-width: 980px){
  .xeGrid{ grid-template-columns: 1fr; }
}

/* Single-column mode (no sidebar) */
.xeGrid--single{
  grid-template-columns: 1fr !important;
}

/* Sections */
.xeSection{
  border-radius: 24px;
  border: 1px solid rgba(0,0,0,.08);
  background: rgba(255,255,255,.55);
  box-shadow: 0 16px 38px rgba(10,14,25,.10);
  padding: 18px;
  margin-bottom: 14px;
}

.xeH2{
  font-size: 18px;
  font-weight: 1000;
  letter-spacing: -.01em;
  color: rgba(0,0,0,.92);
  margin-bottom: 12px;
}

.xeEmptySmall{
  color: rgba(0,0,0,.58);
  font-weight: 750;
}

/* About */
.xeAbout{
  color: rgba(0,0,0,.72);
  font-size: 15px;
  line-height: 1.65;
}

/* =========================================================
   ARTISTS — Cards lineup (super)
========================================================= */
.xeLineupGrid{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}
@media (max-width: 980px){
  .xeLineupGrid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px){
  .xeLineupGrid{ grid-template-columns: 1fr; }
}

.xeArtistCard{
  position: relative;
  display:flex;
  align-items:center;
  gap: 12px;
  padding: 14px;
  border-radius: 20px;
  border: 1px solid rgba(0,0,0,.10);
  background:
    radial-gradient(420px 220px at 15% 20%, rgba(90,120,255,.12), transparent 62%),
    rgba(0,0,0,.02);
  box-shadow: 0 16px 38px rgba(10,14,25,.10);
  overflow: hidden;
  transition: transform .14s ease, box-shadow .18s ease, background .18s ease;
}

.xeArtistCard:hover{
  transform: translateY(-2px);
  box-shadow: 0 26px 60px rgba(10,14,25,.16);
  background:
    radial-gradient(420px 220px at 15% 20%, rgba(0,215,255,.14), transparent 62%),
    rgba(255,255,255,.70);
}

.xeArtistAvatar{
  width: 46px;
  height: 46px;
  border-radius: 16px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight: 1000;
  letter-spacing: .02em;
  border: 1px solid rgba(0,0,0,.10);
  background:
    radial-gradient(140px 90px at 20% 20%, rgba(0,215,255,.30), transparent 60%),
    rgba(90,120,255,.20);
  color: rgba(0,0,0,.88);
  flex: 0 0 auto;
}

.xeArtistInfo{ min-width: 0; }

.xeArtistName{
  font-weight: 1000;
  color: rgba(0,0,0,.92);
  letter-spacing: -.01em;
  line-height: 1.1;
}

.xeArtistRole{
  margin-top: 4px;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(0,0,0,.55);
}

.xeArtistGlow{
  position:absolute;
  right:-80px;
  top:-80px;
  width: 220px;
  height: 220px;
  border-radius: 999px;
  background: radial-gradient(circle at 30% 30%, rgba(90,120,255,.25), transparent 60%);
  filter: blur(2px);
  pointer-events: none;
}

/* =========================================================
   TICKETS — New grid cards (checkout direct)
========================================================= */
.xeTicketsGrid{
  display:grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
@media (max-width: 980px){
  .xeTicketsGrid{ grid-template-columns: 1fr; }
}

.xeTCard{
  position: relative;
  border-radius: 24px;
  border: 1px solid rgba(0,0,0,.10);
  background:
    radial-gradient(520px 280px at 15% 20%, rgba(0,215,255,.10), transparent 62%),
    rgba(255,255,255,.60);
  box-shadow: 0 16px 38px rgba(10,14,25,.10);
  padding: 16px;
  overflow: hidden;
  transition: transform .14s ease, box-shadow .18s ease, background .18s ease, border-color .18s ease;
}

.xeTCardLink{
  display:block;
  text-decoration:none;
  color: inherit;
}

.xeTCard:hover{
  transform: translateY(-2px);
  box-shadow: 0 26px 60px rgba(10,14,25,.16);
  background:
    radial-gradient(520px 280px at 15% 20%, rgba(90,120,255,.14), transparent 62%),
    rgba(255,255,255,.76);
}

.xeTCard.is-disabled{
  opacity: .60;
  cursor: not-allowed;
}

.xeTBadge{
  position:absolute;
  top: 14px;
  right: 14px;
  padding: 7px 10px;
  border-radius: 999px;
  border: 1px solid rgba(0,0,0,.10);
  background: rgba(0,0,0,.04);
  font-size: 11px;
  font-weight: 1000;
  letter-spacing: .10em;
  text-transform: uppercase;
  color: rgba(0,0,0,.75);
}

.xeTTop{
  display:flex;
  align-items:flex-start;
  justify-content: space-between;
  gap: 12px;
}

.xeTName{
  font-weight: 1000;
  font-size: 16px;
  color: rgba(0,0,0,.92);
  line-height: 1.12;
}

.xeTPrice{
  font-weight: 1000;
  font-size: 18px;
  color: rgba(0,0,0,.92);
  letter-spacing: -.01em;
  white-space: nowrap;
}

.xeTMeta{
  margin-top: 12px;
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  padding-top: 12px;
  border-top: 1px solid rgba(0,0,0,.08);
}

.xeTMetaItem{
  display:flex;
  flex-direction: column;
  gap: 4px;
}

.xeTMetaLabel{
  font-size: 11px;
  font-weight: 1000;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(0,0,0,.52);
}

.xeTMetaValue{
  font-weight: 950;
  color: rgba(0,0,0,.82);
}

.xeTFooter{
  margin-top: 14px;
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 10px;
}

.xeTHint{
  font-size: 12px;
  font-weight: 1000;
  letter-spacing: .10em;
  text-transform: uppercase;
  color: rgba(0,0,0,.55);
}

.xeTArrow{
  width: 42px;
  height: 42px;
  border-radius: 16px;
  border: 1px solid rgba(0,0,0,.10);
  background: rgba(0,0,0,.03);
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight: 1000;
  color: rgba(0,0,0,.70);
  transition: transform .12s ease, box-shadow .18s ease, background .18s ease, color .18s ease;
}

.xeTCardLink:hover .xeTArrow{
  transform: translateY(-1px);
  background: rgba(0,0,0,.05);
  box-shadow: 0 16px 34px rgba(0,0,0,.12);
  color: rgba(0,0,0,.92);
}

/* =========================================================
   TICKETS — Row layout (1 ticket = 1 riga)
========================================================= */

.xeTicketRows{
  display:flex;
  flex-direction: column;
  gap: 10px;
}

.xeTRow{
  position: relative;
  border-radius: 24px;
  border: 1px solid rgba(0,0,0,.10);
  background:
    radial-gradient(520px 280px at 15% 20%, rgba(0,215,255,.08), transparent 62%),
    rgba(255,255,255,.62);
  box-shadow: 0 16px 38px rgba(10,14,25,.10);
  padding: 16px;
  overflow: hidden;
  transition: transform .14s ease, box-shadow .18s ease, background .18s ease, border-color .18s ease;
}

.xeTRowLink{
  display:block;
  text-decoration:none;
  color: inherit;
}

.xeTRow:hover{
  transform: translateY(-2px);
  box-shadow: 0 26px 60px rgba(10,14,25,.16);
  background:
    radial-gradient(520px 280px at 15% 20%, rgba(90,120,255,.12), transparent 62%),
    rgba(255,255,255,.78);
}

.xeTRow.is-disabled{
  opacity: .62;
  cursor: not-allowed;
}

.xeTRowTop{
  display:flex;
  align-items:flex-start;
  justify-content: space-between;
  gap: 12px;
}

.xeTRowTitle{
  font-weight: 1000;
  font-size: 16px;
  color: rgba(0,0,0,.92);
  line-height: 1.12;
}

.xeTRowPrice{
  font-weight: 1000;
  font-size: 18px;
  color: rgba(0,0,0,.92);
  letter-spacing: -.01em;
  white-space: nowrap;
}

.xeTRowDesc{
  margin-top: 10px;
  color: rgba(0,0,0,.70);
  font-size: 14px;
  line-height: 1.55;
  font-weight: 750;
}

.xeTRowMeta{
  margin-top: 12px;
  display:flex;
  gap: 8px;
  flex-wrap: wrap;
}

.xeTRowPill{
  padding: 8px 10px;
  border-radius: 999px;
  border: 1px solid rgba(0,0,0,.10);
  background: rgba(0,0,0,.03);
  font-size: 12px;
  font-weight: 950;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: rgba(0,0,0,.65);
}

.xeTRowFoot{
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid rgba(0,0,0,.08);
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 10px;

  font-size: 12px;
  font-weight: 1000;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(0,0,0,.55);
}

.xeTRowArrow{
  width: 42px;
  height: 42px;
  border-radius: 16px;
  border: 1px solid rgba(0,0,0,.10);
  background: rgba(0,0,0,.03);
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight: 1000;
  color: rgba(0,0,0,.70);
  transition: transform .12s ease, box-shadow .18s ease, background .18s ease, color .18s ease;
}

.xeTRowLink:hover .xeTRowArrow{
  transform: translateY(-1px);
  background: rgba(0,0,0,.05);
  box-shadow: 0 16px 34px rgba(0,0,0,.12);
  color: rgba(0,0,0,.92);
}