/* SeatLayer buyer 3D proof
 * Reusable click-to-load shell for the released SeatPicker. The page owns the
 * supporting copy; this file owns only the proof states and responsive safety.
 */
.sl3d-proof{
  --sl3d-amber:#f4b740;
  --sl3d-live:#54d395;
  --sl3d-warn:#ffba6b;
  border:1px solid #29344b;
  border-radius:24px;
  background:#0d1420;
  color:#edf2fb;
  box-shadow:0 42px 110px -52px #000;
  overflow:hidden
}
.sl3d-proof *{box-sizing:border-box}
.sl3d-proof-head{
  min-height:52px;
  display:flex;
  align-items:center;
  gap:12px;
  padding:10px 16px;
  border-bottom:1px solid #29344b;
  background:#141d2b
}
.sl3d-proof-dots{display:flex;gap:6px;flex:0 0 auto}
.sl3d-proof-dots i{width:7px;height:7px;border-radius:50%;background:#35435e}
.sl3d-proof-title{
  min-width:0;
  font:700 10px/1.3 var(--mono,monospace);
  letter-spacing:.11em;
  color:#a6b0c2
}
.sl3d-proof-status{
  display:flex;
  align-items:center;
  gap:7px;
  margin-left:auto;
  font:700 9px/1.3 var(--mono,monospace);
  letter-spacing:.08em;
  color:#8d99ad;
  text-align:right
}
.sl3d-proof-status:before{
  content:"";
  width:7px;
  height:7px;
  flex:0 0 auto;
  border-radius:50%;
  background:#657188;
  box-shadow:0 0 0 4px rgba(101,113,136,.1)
}
.sl3d-proof-status[data-tone="live"]{color:var(--sl3d-live)}
.sl3d-proof-status[data-tone="live"]:before{background:var(--sl3d-live);box-shadow:0 0 0 4px rgba(84,211,149,.11)}
.sl3d-proof-status[data-tone="warn"]{color:var(--sl3d-warn)}
.sl3d-proof-status[data-tone="warn"]:before{background:var(--sl3d-warn);box-shadow:0 0 0 4px rgba(255,186,107,.11)}
.sl3d-proof-stage{
  position:relative;
  min-height:clamp(480px,64vw,680px);
  background:#101827;
  overflow:hidden
}
.sl3d-proof-poster{
  position:absolute;
  inset:0;
  z-index:2;
  display:grid;
  align-items:end;
  min-height:100%;
  isolation:isolate
}
.sl3d-proof-poster:after{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  background:
    linear-gradient(180deg,rgba(8,13,22,.02) 28%,rgba(8,13,22,.38) 58%,rgba(8,13,22,.96) 100%),
    radial-gradient(70% 58% at 50% 40%,transparent 30%,rgba(5,9,15,.28) 100%)
}
.sl3d-proof-poster img{
  position:absolute;
  inset:0;
  z-index:-2;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
  background:#101827
}
.sl3d-proof-poster-copy{
  width:min(720px,100%);
  padding:38px clamp(20px,5vw,56px) clamp(26px,5vw,48px)
}
.sl3d-proof-kicker{
  font:700 9px/1.3 var(--mono,monospace);
  letter-spacing:.18em;
  color:var(--sl3d-amber)
}
.sl3d-proof-poster h2{
  margin:10px 0 0;
  max-width:16ch;
  font-size:clamp(27px,4.2vw,46px);
  line-height:1.02;
  letter-spacing:-.04em;
  color:#fff;
  text-wrap:balance
}
.sl3d-proof-poster p{
  max-width:60ch;
  margin:13px 0 0;
  color:#b3bdce;
  font-size:14px;
  line-height:1.6
}
.sl3d-proof-actions{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
  margin-top:20px
}
.sl3d-proof button,.sl3d-proof-link{
  min-height:44px;
  border-radius:10px;
  font:750 12px/1 var(--sans,system-ui,sans-serif);
  text-decoration:none
}
.sl3d-load{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:0 18px;
  border:1px solid #ffd166;
  background:var(--sl3d-amber);
  color:#1a1408;
  box-shadow:0 10px 30px rgba(244,183,64,.16);
  cursor:pointer
}
.sl3d-load:hover{background:#ffc958}
.sl3d-load[disabled]{cursor:wait;opacity:.64}
.sl3d-proof-link{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:0 16px;
  border:1px solid #3a465d;
  color:#dce3ef;
  background:rgba(15,23,36,.74)
}
.sl3d-proof-link:hover{border-color:#68758b;color:#fff}
.sl3d-mobile-link{display:none}
.sl3d-proof-mount{
  position:absolute;
  inset:0;
  z-index:1;
  background:#0d1420
}
.sl3d-proof[data-state="loading"] .sl3d-proof-poster{opacity:.72}
.sl3d-proof[data-state="ready"] .sl3d-proof-poster{display:none}
.sl3d-proof[data-state="failed"] .sl3d-proof-poster:after{
  background:linear-gradient(180deg,rgba(8,13,22,.2),rgba(8,13,22,.97))
}
.sl3d-proof-guides{
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
  padding:12px 14px;
  border-top:1px solid #29344b;
  background:#121b29
}
.sl3d-proof-guides b{
  margin-right:4px;
  font:700 9px/1.2 var(--mono,monospace);
  letter-spacing:.12em;
  color:#718097
}
.sl3d-guide{
  min-height:40px!important;
  padding:0 13px;
  border:1px solid #334059;
  background:#192337;
  color:#d9e0ec;
  cursor:pointer
}
.sl3d-guide:hover:not([disabled]){border-color:#66758e;background:#202c42;color:#fff}
.sl3d-guide[disabled]{opacity:.38;cursor:not-allowed}
.sl3d-guide[data-action="end"]{margin-left:auto;background:transparent}
.sl3d-proof-meta{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  border-top:1px solid #29344b;
  background:#0c131f
}
.sl3d-proof-meta div{padding:15px 16px;border-right:1px solid #29344b}
.sl3d-proof-meta div:last-child{border-right:0}
.sl3d-proof-meta strong{
  display:block;
  font:750 12px/1.35 var(--mono,monospace);
  color:#f1f5fb;
  overflow-wrap:anywhere
}
.sl3d-proof-meta span{
  display:block;
  margin-top:4px;
  font:600 8.5px/1.35 var(--mono,monospace);
  letter-spacing:.09em;
  color:#718097;
  text-transform:uppercase
}
.sl3d-proof-note{
  padding:13px 16px;
  border-top:1px solid #29344b;
  color:#8c98ab;
  background:#101824;
  font-size:11px;
  line-height:1.55
}
.sl3d-proof-note strong{color:#cbd4e2}
.sl3d-proof :focus-visible{
  outline:3px solid #fff;
  outline-offset:3px
}
@media(max-width:760px){
  .sl3d-proof-head{align-items:flex-start;flex-wrap:wrap}
  .sl3d-proof-status{width:100%;margin-left:25px;text-align:left}
  .sl3d-proof-stage{min-height:520px}
  .sl3d-proof-meta{grid-template-columns:1fr 1fr}
  .sl3d-proof-meta div:nth-child(2){border-right:0}
  .sl3d-proof-meta div:nth-child(-n+2){border-bottom:1px solid #29344b}
  .sl3d-guide[data-action="end"]{margin-left:0}
}
@media(max-width:640px){
  .sl3d-proof-stage{min-height:500px}
  .sl3d-proof-poster img{object-fit:cover;object-position:50% 38%}
  .sl3d-proof-poster-copy{padding:24px 18px 22px}
  .sl3d-load{display:none}
  .sl3d-mobile-link{display:inline-flex}
  .sl3d-proof-guides{display:none}
  .sl3d-proof-note{font-size:10.5px}
}
@media(max-width:390px){
  .sl3d-proof-stage{min-height:520px}
  .sl3d-proof-meta{grid-template-columns:1fr}
  .sl3d-proof-meta div{border-right:0;border-bottom:1px solid #29344b!important}
  .sl3d-proof-meta div:last-child{border-bottom:0!important}
}
@media(prefers-reduced-motion:reduce){
  .sl3d-proof *{scroll-behavior:auto!important;transition:none!important;animation:none!important}
}