/* Karaoke V7 V15 Commercial Foundation
   License UI only. Core room/playback/queue/fullscreen/ticker styles remain untouched.
*/

.commercial-license-badge{
  display:none;
  position:fixed;
  top:24px;
  left:26px;
  z-index:120;
  align-items:center;
  gap:9px;
  max-width:min(390px,44vw);
  padding:9px 13px;
  border:1px solid rgba(91,238,216,.32);
  border-radius:999px;
  background:rgba(5,12,25,.88);
  color:#fff;
  box-shadow:0 12px 32px rgba(0,0,0,.34);
  font:800 12px/1.2 system-ui,-apple-system,Segoe UI,sans-serif;
  pointer-events:none;
}
.commercial-license-badge-dot{
  flex:0 0 9px;
  width:9px;
  height:9px;
  border-radius:50%;
  background:#36e4c9;
  box-shadow:0 0 13px rgba(54,228,201,.9);
}
.commercial-license-badge-copy{
  min-width:0;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.commercial-license-badge-expiry{
  color:#a7b5cb;
  font-size:10px;
  font-weight:700;
}
body.route-tv.license-state-active .commercial-license-badge{display:flex}
body.route-tv.license-warning .commercial-license-badge{
  border-color:rgba(255,190,74,.55);
  background:rgba(38,24,6,.9);
}
body.route-tv.license-warning .commercial-license-badge-dot{
  background:#ffbe4a;
  box-shadow:0 0 13px rgba(255,190,74,.9);
}

.commercial-license-overlay{
  display:none;
  position:fixed;
  inset:0;
  z-index:30000;
  align-items:center;
  justify-content:center;
  box-sizing:border-box;
  padding:18px;
  overflow:hidden;
  background:
    radial-gradient(circle at 20% 18%,rgba(110,70,255,.23),transparent 34%),
    radial-gradient(circle at 82% 84%,rgba(24,211,194,.13),transparent 38%),
    rgba(3,7,16,.97);
  color:#fff;
  font-family:system-ui,-apple-system,Segoe UI,sans-serif;
}
body.route-tv.license-state-checking .commercial-license-overlay,
body.route-tv.license-state-missing .commercial-license-overlay,
body.route-tv.license-state-expired .commercial-license-overlay,
body.route-tv.license-state-suspended .commercial-license-overlay,
body.route-tv.license-state-invalid .commercial-license-overlay,
body.route-tv.license-state-error .commercial-license-overlay{display:flex}

.commercial-license-card{
  width:min(620px,94vw);
  max-height:calc(100vh - 28px);
  box-sizing:border-box;
  padding:28px;
  border:1px solid rgba(255,255,255,.13);
  border-radius:26px;
  background:linear-gradient(145deg,rgba(19,29,53,.98),rgba(7,13,27,.98));
  box-shadow:0 30px 90px rgba(0,0,0,.58),0 0 55px rgba(86,67,255,.10);
  text-align:center;
  overflow:hidden;
}
.commercial-license-copy-panel{min-width:0}
.commercial-license-mark{
  display:grid;
  place-items:center;
  width:64px;
  height:64px;
  margin:0 auto 15px;
  border:1px solid rgba(107,243,226,.32);
  border-radius:20px;
  background:linear-gradient(145deg,rgba(106,70,255,.58),rgba(24,207,191,.45));
  box-shadow:0 14px 32px rgba(0,0,0,.3);
  font-size:29px;
}
.commercial-license-eyebrow{
  margin-bottom:7px;
  color:#69ead8;
  font-size:11px;
  font-weight:950;
  letter-spacing:.18em;
  text-transform:uppercase;
}
.commercial-license-card h2{
  margin:0;
  color:#fff;
  font-size:clamp(25px,3.4vw,42px);
  line-height:1.08;
}
.commercial-license-message{
  max-width:520px;
  margin:11px auto 18px;
  color:#aebbd0;
  font-size:14px;
  font-weight:650;
  line-height:1.5;
}
.commercial-license-device{
  margin:0 auto;
  padding:14px 16px;
  border:1px solid rgba(255,255,255,.1);
  border-radius:17px;
  background:rgba(255,255,255,.045);
}
.commercial-license-device span{
  display:block;
  margin-bottom:6px;
  color:#8999b2;
  font-size:10px;
  font-weight:900;
  letter-spacing:.16em;
}
.commercial-license-device strong{
  display:block;
  color:#fff;
  font:950 clamp(21px,3.8vw,34px)/1.1 ui-monospace,SFMono-Regular,Consolas,monospace;
  letter-spacing:.08em;
  word-break:break-word;
}
.commercial-license-detail{
  min-height:18px;
  margin:11px 0 0;
  color:#d5deec;
  font-size:12px;
  font-weight:750;
}
.commercial-license-actions{
  display:flex;
  justify-content:center;
  gap:10px;
  margin-top:16px;
}
.commercial-license-action{
  min-height:44px;
  padding:10px 17px;
  border:1px solid rgba(255,255,255,.12);
  border-radius:13px;
  background:#17223a;
  color:#fff;
  font:850 12px/1 system-ui,-apple-system,Segoe UI,sans-serif;
  cursor:pointer;
}
.commercial-license-action.primary{
  border-color:transparent;
  background:linear-gradient(135deg,#6947ff,#18cdbd);
}
.commercial-license-action:focus{
  outline:3px solid rgba(98,235,218,.45);
  outline-offset:3px;
}
.commercial-license-note{
  display:block;
  margin-top:13px;
  color:#74849d;
  font-size:10px;
  font-weight:700;
  line-height:1.45;
}
body.license-state-expired .commercial-license-mark,
body.license-state-suspended .commercial-license-mark,
body.license-state-invalid .commercial-license-mark,
body.license-state-error .commercial-license-mark{
  border-color:rgba(255,100,116,.36);
  background:linear-gradient(145deg,rgba(149,38,58,.72),rgba(72,20,32,.64));
}

.commercial-license-renew-panel{display:none}

/*
 * /tv is ALWAYS a television layout.
 * Do not switch the activation/renewal screen into a stacked mobile layout
 * even when a browser reports a small CSS viewport.
 */
body.route-tv .commercial-license-card.commercial-license-renew-mode{
  width:min(1180px,96vw);
  height:min(620px,calc(100vh - 28px));
  max-height:calc(100vh - 28px);
  display:grid!important;
  grid-template-columns:minmax(0,1.12fr) minmax(240px,.88fr)!important;
  gap:clamp(14px,2.3vw,30px);
  align-items:stretch;
  padding:clamp(18px,2.4vw,32px);
  text-align:left!important;
  overflow:hidden!important;
}
body.route-tv .commercial-license-renew-mode .commercial-license-copy-panel{
  min-width:0;
  display:flex;
  flex-direction:column;
  justify-content:center;
}
body.route-tv .commercial-license-renew-mode .commercial-license-mark{
  width:clamp(44px,6vh,60px);
  height:clamp(44px,6vh,60px);
  margin:0 0 11px!important;
  border-radius:17px;
  font-size:clamp(21px,3vh,28px);
}
body.route-tv .commercial-license-renew-mode .commercial-license-eyebrow{
  margin-bottom:6px;
  font-size:clamp(8px,1.5vh,11px);
}
body.route-tv .commercial-license-renew-mode h2{
  font-size:clamp(26px,4.4vw,52px);
  line-height:1.02;
}
body.route-tv .commercial-license-renew-mode .commercial-license-message{
  max-width:570px;
  margin:clamp(7px,1.4vh,12px) 0 clamp(10px,1.9vh,18px)!important;
  font-size:clamp(11px,1.8vh,15px);
  line-height:1.42;
}
body.route-tv .commercial-license-renew-mode .commercial-license-device{
  margin:0!important;
  max-width:570px;
  padding:clamp(9px,1.6vh,14px) 15px;
}
body.route-tv .commercial-license-renew-mode .commercial-license-device strong{
  font-size:clamp(19px,3.6vw,34px);
}
body.route-tv .commercial-license-renew-mode .commercial-license-detail{
  margin-top:clamp(7px,1.3vh,11px);
  font-size:clamp(10px,1.6vh,13px);
}
body.route-tv .commercial-license-renew-mode .commercial-license-actions{
  flex-direction:row!important;
  justify-content:flex-start!important;
  margin-top:clamp(9px,1.8vh,17px);
}
body.route-tv .commercial-license-renew-mode #commercialLicenseCopy{display:none}
body.route-tv .commercial-license-renew-mode .commercial-license-action.primary{
  width:auto!important;
  min-width:190px;
  min-height:46px;
  font-size:13px;
}
body.route-tv .commercial-license-renew-mode .commercial-license-note{
  margin-top:clamp(7px,1.3vh,11px);
  font-size:clamp(8px,1.35vh,10px);
}
body.route-tv .commercial-license-renew-mode .commercial-license-renew-panel{
  display:flex!important;
  min-width:0;
  height:100%!important;
  margin:0!important;
  align-items:center;
  justify-content:center;
  flex-direction:column;
  box-sizing:border-box;
  padding:clamp(12px,2vh,22px);
  border:1px solid rgba(98,235,218,.18);
  border-radius:22px;
  background:
    radial-gradient(circle at 50% 22%,rgba(58,213,194,.10),transparent 46%),
    rgba(255,255,255,.035);
  text-align:center;
  overflow:hidden;
}
.commercial-license-renew-kicker{
  color:#69ead8;
  font-size:clamp(8px,1.4vh,10px);
  font-weight:950;
  letter-spacing:.17em;
}
.commercial-license-renew-title{
  margin:4px 0 clamp(7px,1.4vh,13px);
  color:#fff;
  font-size:clamp(16px,2.8vh,22px);
  font-weight:950;
}
.commercial-license-renew-qr{
  width:clamp(145px,28vh,250px);
  height:clamp(145px,28vh,250px);
  display:grid;
  place-items:center;
  padding:9px;
  box-sizing:border-box;
  border-radius:17px;
  background:#fff;
  box-shadow:0 18px 44px rgba(0,0,0,.34);
  overflow:hidden;
}
.commercial-license-renew-qr canvas,
.commercial-license-renew-qr img{
  display:block!important;
  width:100%!important;
  height:100%!important;
  max-width:100%!important;
  max-height:100%!important;
  object-fit:contain;
}
.commercial-license-renew-qr-fallback{
  color:#111827;
  font-size:12px;
  font-weight:850;
  line-height:1.35;
}
.commercial-license-renew-price{
  margin-top:clamp(7px,1.3vh,12px);
}
.commercial-license-renew-price strong{
  display:block;
  color:#7ef3e1;
  font-size:clamp(15px,2.4vh,20px);
  line-height:1.1;
}
.commercial-license-renew-price span{
  display:block;
  margin-top:3px;
  color:#93a3ba;
  font-size:clamp(8px,1.35vh,11px);
  font-weight:750;
}
.commercial-license-renew-steps{
  width:100%;
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:6px;
  margin-top:clamp(7px,1.4vh,13px);
}
.commercial-license-renew-steps div{
  min-width:0;
  padding:clamp(5px,1vh,8px) 4px;
  border:1px solid rgba(255,255,255,.07);
  border-radius:10px;
  background:rgba(5,12,25,.48);
  color:#b8c5d7;
  font-size:clamp(7px,1.15vh,9px);
  font-weight:800;
  line-height:1.2;
}
.commercial-license-renew-steps b{
  display:grid;
  place-items:center;
  width:18px;
  height:18px;
  margin:0 auto 4px;
  border-radius:50%;
  background:rgba(105,234,216,.12);
  color:#69ead8;
  font-size:9px;
}
.commercial-license-renew-steps span{display:block}

/* Small-screen rules are only for non-TV pages/components. */
@media(max-width:820px){
  body:not(.route-tv) .commercial-license-badge{top:18px;left:18px;max-width:70vw;padding:8px 11px}
  body:not(.route-tv) .commercial-license-card{padding:24px 18px;border-radius:22px}
  body:not(.route-tv) .commercial-license-actions{flex-direction:column}
  body:not(.route-tv) .commercial-license-action{width:100%}
}