/* ===== SAS 90s RAVE SCHEDULE CSS ===== */

.sasRaveWrap{
  margin-top:12px;
  border-radius:16px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.12);
  background:
    radial-gradient(1200px 500px at 10% 0%, rgba(255,0,204,.18), transparent 60%),
    radial-gradient(900px 500px at 90% 10%, rgba(0,255,255,.14), transparent 55%),
    linear-gradient(180deg, rgba(0,0,0,.25), rgba(0,0,0,.40));
  box-shadow: 0 18px 60px rgba(0,0,0,.55);
  position:relative;
}

.sasRaveWrap:before{
  content:"";
  position:absolute; inset:0;
  background-image:
    linear-gradient(45deg, rgba(255,255,255,.06) 25%, transparent 25%, transparent 75%, rgba(255,255,255,.06) 75%, rgba(255,255,255,.06)),
    linear-gradient(45deg, rgba(255,255,255,.06) 25%, transparent 25%, transparent 75%, rgba(255,255,255,.06) 75%, rgba(255,255,255,.06));
  background-size: 22px 22px;
  background-position: 0 0, 11px 11px;
  opacity:.18;
  pointer-events:none;
  mix-blend-mode: overlay;
}

.sasRaveWrap{
  box-shadow:
    0 18px 60px rgba(0,0,0,.55),
    0 0 0 2px rgba(255,255,255,.06) inset,
    0 0 28px rgba(255,0,204,.18),
    0 0 34px rgba(0,255,255,.14);
}

.sasRaveWrap:after{
  content:"";
  position:absolute; inset:0;
  border-radius:16px;
  padding:2px;
  background: linear-gradient(90deg,
    rgba(255,0,204,.75),
    rgba(0,255,255,.75),
    rgba(255,230,0,.70),
    rgba(255,0,204,.75)
  );
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity:.35;
  pointer-events:none;
  animation: sasNeonFrame 2.6s linear infinite;
}

@keyframes sasNeonFrame{
  0%{ filter:hue-rotate(0deg); opacity:.28; }
  50%{ filter:hue-rotate(25deg); opacity:.40; }
  100%{ filter:hue-rotate(0deg); opacity:.28; }
}

.sasRaveHead{
  position:relative;
  z-index:1;
  padding: 12px 14px;
  border-bottom:1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.18);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  flex-wrap:wrap;
}

.sasRaveTitle{
  margin:0;
  display:flex;
  align-items:center;
  gap:10px;
  font-weight: 900;
  font-size: 14px;
  letter-spacing:.3px;
  text-transform: uppercase;
  text-shadow:
    0 0 10px rgba(255,0,204,.35),
    0 0 14px rgba(0,255,255,.25);
}

.sasRaveTitle span:last-child{
  background: linear-gradient(180deg, rgba(255,255,255,.10), rgba(0,0,0,.00));
  border: 1px solid rgba(255,255,255,.10);
  padding: 6px 10px;
  border-radius: 999px;
}

.sasSmiley{
  width:22px;height:22px;border-radius:999px;
  background: radial-gradient(circle at 30% 30%, #fff 0 12%, #ffe600 13% 100%);
  border:1px solid rgba(0,0,0,.25);
  box-shadow: 0 0 0 3px rgba(255,230,0,.12), 0 0 18px rgba(255,230,0,.25);
  position:relative;
  flex:0 0 auto;
}
.sasSmiley:before, .sasSmiley:after{
  content:"";
  position:absolute;
  top:7px;
  width:3px;height:3px;border-radius:999px;
  background:#151515;
}
.sasSmiley:before{ left:6px; }
.sasSmiley:after{ right:6px; }
.sasSmiley i{
  position:absolute; left:50%; top:52%;
  width:10px; height:6px;
  border:2px solid #151515;
  border-color:#151515 transparent transparent transparent;
  border-radius: 14px 14px 0 0;
  transform: translate(-50%,-10%) rotate(180deg);
  display:block;
}

.sasMetaRow{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}

.sasPill{
  font-size: 11px;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(0,0,0,.20);
  white-space: nowrap;
  position:relative;
  z-index:1;
}

.sasTabs{
  position:relative;
  z-index:1;
  display:flex;
  gap:8px;
  padding: 10px 12px;
  border-bottom: 1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.12);
  overflow:auto;
}

.sasTab{
  appearance:none;border:0;cursor:pointer;
  font-size: 11px;
  font-weight: 900;
  letter-spacing:.25px;
  padding: 8px 10px;
  border-radius: 999px;
  color: inherit;
  border:1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.05);
  white-space:nowrap;
  text-transform: uppercase;
}
.sasTab.is-on{
  border-color: rgba(255,0,204,.38);
  background: linear-gradient(180deg, rgba(255,0,204,.18), rgba(0,255,255,.10));
  box-shadow: 0 0 18px rgba(255,0,204,.18);
}

.sasGrid{position:relative;z-index:1;padding: 10px 12px 12px}

.sasDayCard{
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.16);
  overflow:hidden;
}
.sasDayCardHead{
  padding: 10px 12px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  background: rgba(0,0,0,.18);
  border-bottom: 1px solid rgba(255,255,255,.10);
}
.sasDayName{
  font-weight: 900;
  font-size: 12px;
  letter-spacing:.35px;
  text-transform: uppercase;
}
.sasDayHint{
  font-size: 11px;
  opacity:.85;
}

.sasScroll{
  max-height: 520px;
  overflow:auto;
  padding: 10px;
}

.sasSlot{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding: 9px 10px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.14);
  margin-bottom: 8px;
  box-shadow: 0 0 0 1px rgba(255,255,255,.04) inset;
}
.sasSlot:hover{
  box-shadow:
    0 0 0 1px rgba(255,255,255,.08) inset,
    0 0 18px rgba(0,255,255,.10);
}

.sasSlot.is-available{
  border-color: rgba(60,255,120,.20);
  background: linear-gradient(180deg, rgba(60,255,120,.08), rgba(0,0,0,.14));
}
.sasSlot.is-booked{
  border-color: rgba(255,0,204,.35);
  background: linear-gradient(180deg, rgba(255,0,204,.14), rgba(0,0,0,.14));
  box-shadow:
    0 0 0 1px rgba(255,0,204,.12) inset,
    0 0 22px rgba(255,0,204,.12);
}
.sasSlot.is-live{
  border-color: rgba(0,255,255,.45);
  background: linear-gradient(180deg, rgba(0,255,255,.18), rgba(0,0,0,.12));
  box-shadow:
    0 0 0 1px rgba(0,255,255,.14) inset,
    0 0 26px rgba(0,255,255,.14);
}

.sasLeft{min-width:0}
.sasTime{
  font-weight: 900;
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  letter-spacing:.2px;
  display:inline-block;
  padding: 5px 8px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.05);
}
.sasDJ{
  margin-top:6px;
  font-weight: 900;
  font-size: 13px;
  white-space: nowrap;
  overflow:hidden;
  text-overflow: ellipsis;
}
.sasTag{
  margin-top:2px;
  font-size: 11px;
  opacity:.86;
  white-space: nowrap;
  overflow:hidden;
  text-overflow: ellipsis;
}

.sasRight{
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
  justify-content:flex-end;
  flex-shrink:0;
}

.sasChip{
  font-size: 10.5px;
  padding: 5px 8px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.05);
  opacity:.92;
  white-space: nowrap;
}
.sasSlot.is-available .sasChip{ border-color: rgba(60,255,120,.22); background: rgba(60,255,120,.10); }
.sasSlot.is-booked .sasChip{ border-color: rgba(255,0,204,.28); background: rgba(255,0,204,.12); }

/* LIVE NOW chip */
.sasChipLiveNow{
  font-size:10.5px;
  padding:5px 8px;
  border-radius:999px;
  border:1px solid rgba(0,255,255,.45);
  background:rgba(0,255,255,.14);
  font-weight:900;
  letter-spacing:.2px;
  text-transform:uppercase;
  display:inline-flex;
  align-items:center;
  gap:6px;
  white-space:nowrap;
}
.sasChipLiveNow:before{
  content:"";
  width:8px;height:8px;border-radius:999px;
  background:rgb(0,255,255);
  box-shadow:0 0 0 4px rgba(0,255,255,.16);
}

.sasBtn{
  appearance:none;border:0;cursor:pointer;
  font-size: 11px;
  font-weight: 900;
  letter-spacing:.2px;
  padding: 7px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.16);
  background: rgba(255,255,255,.06);
  color: inherit;
  text-transform: uppercase;
}
.sasBtn--book{border-color: rgba(60,255,120,.24);background: rgba(60,255,120,.10)}
.sasBtn--manage{border-color: rgba(255,0,204,.26);background: rgba(255,0,204,.12)}
.sasBtn--danger{border-color: rgba(255,60,60,.35);background: rgba(255,60,60,.14)}
.sasBtn:disabled{cursor:not-allowed;opacity:.45}

.sasFoot{
  position:relative;
  z-index:1;
  padding: 10px 14px;
  border-top: 1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.12);
  font-size: 11px;
  opacity:.9;
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  justify-content:space-between;
}