/*
 Sweet Billing Portal UI v4
 Goal: preserve the CURRENT live portal content/actions/assets and only modernize presentation.
*/
:root{
  --pv4-bg:#eef5ff;
  --pv4-panel:#fff;
  --pv4-ink:#0b1731;
  --pv4-muted:#66758d;
  --pv4-line:#d8e3f0;
  --pv4-soft:#f7faff;
  --pv4-accent:#1672ff;
  --pv4-accent2:#2d6df5;
  --pv4-green:#16b364;
  --pv4-purple:#6d4aff;
  --pv4-shadow:0 28px 80px rgba(15,23,42,.12);
}
html[data-bs-theme="dark"]{
  --pv4-bg:#07111f;
  --pv4-panel:#0d1726;
  --pv4-ink:#f8fafc;
  --pv4-muted:#9eacbf;
  --pv4-line:rgba(148,163,184,.20);
  --pv4-soft:#0a1524;
  --pv4-shadow:0 28px 80px rgba(0,0,0,.36);
}
html,body{min-height:100%}
body.pv4-body{
  margin:0!important;
  min-height:100vh!important;
  min-height:100dvh!important;
  color:var(--pv4-ink)!important;
  background:
    radial-gradient(circle at 16% 8%,color-mix(in srgb,var(--pv4-accent) 9%,transparent),transparent 30%),
    linear-gradient(135deg,var(--pv4-bg),color-mix(in srgb,var(--pv4-bg) 82%,#fff))!important;
  overflow-x:hidden!important;
}
.pv4-old-hidden{display:none!important}
.pv4-root{
  min-height:100vh;
  min-height:100dvh;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:24px;
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
}
.pv4-shell{
  width:min(1420px,100%);
  min-height:690px;
  display:grid;
  grid-template-columns:minmax(0,1.06fr) minmax(430px,.94fr);
  overflow:hidden;
  border:1px solid var(--pv4-line);
  border-radius:30px;
  background:var(--pv4-panel);
  box-shadow:var(--pv4-shadow);
}

/* LEFT: preserve the user's existing uploaded poster */
.pv4-left{
  display:flex;
  flex-direction:column;
  padding:45px 48px 34px;
  background:
    radial-gradient(circle at 72% 15%,color-mix(in srgb,var(--pv4-accent) 8%,transparent),transparent 28%),
    linear-gradient(145deg,color-mix(in srgb,var(--pv4-accent) 7%,#fbfdff),#eef7ff 68%,#f9fcff);
  overflow:hidden;
}
html[data-bs-theme="dark"] .pv4-left{
  background:
    radial-gradient(circle at 72% 15%,rgba(37,99,235,.17),transparent 28%),
    linear-gradient(145deg,#0a1728,#0c1d31 68%,#0b1727);
}
.pv4-kicker{
  margin:0 0 12px;
  color:var(--pv4-muted);
  font-size:.76rem;
  font-weight:900;
  letter-spacing:.17em;
  text-transform:uppercase;
}
.pv4-title{
  margin:0;
  max-width:620px;
  color:var(--pv4-ink);
  font-size:clamp(2.55rem,4.25vw,4.8rem);
  line-height:.98;
  letter-spacing:-.058em;
  font-weight:950;
}
.pv4-title span{color:var(--pv4-accent)}
.pv4-desc{
  max-width:610px;
  margin:17px 0 18px;
  color:var(--pv4-muted);
  font-size:.94rem;
  line-height:1.55;
}
.pv4-chips{
  display:flex;
  gap:9px;
  flex-wrap:wrap;
  margin-bottom:17px;
}
.pv4-chip{
  display:inline-flex;
  align-items:center;
  gap:7px;
  min-height:35px;
  padding:7px 11px;
  border-radius:999px;
  border:1px solid var(--pv4-line);
  background:color-mix(in srgb,var(--pv4-panel) 82%,transparent);
  color:var(--pv4-muted);
  font-size:.70rem;
  font-weight:800;
}
.pv4-chip i{color:var(--pv4-accent)}
.pv4-poster-wrap{
  flex:1;
  min-height:260px;
  display:flex;
  align-items:center;
  justify-content:center;
}
.pv4-poster-card{
  width:min(660px,96%);
  max-height:385px;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:12px;
  border:1px solid var(--pv4-line);
  border-radius:25px;
  background:color-mix(in srgb,var(--pv4-panel) 84%,transparent);
  box-shadow:0 18px 45px rgba(15,23,42,.07);
  overflow:hidden;
}
.pv4-poster-card img,
.pv4-poster-card picture{
  display:block!important;
  max-width:100%!important;
  width:auto!important;
  max-height:350px!important;
  height:auto!important;
  object-fit:contain!important;
  border-radius:18px!important;
}
.pv4-poster-card picture img{width:100%!important}
.pv4-poster-missing{
  width:100%;
  min-height:260px;
  display:grid;
  place-items:center;
  color:var(--pv4-muted);
}
.pv4-poster-missing i{display:block;text-align:center;font-size:4rem;color:var(--pv4-accent);margin-bottom:10px}

/* RIGHT */
.pv4-right{
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding:42px 50px 32px;
  background:var(--pv4-panel);
}
.pv4-brand{
  min-height:58px;
  display:flex;
  align-items:center;
  margin-bottom:16px;
}
.pv4-brand img{
  display:block!important;
  width:auto!important;
  max-width:260px!important;
  max-height:68px!important;
  object-fit:contain!important;
}
.pv4-brand picture{display:block!important}
.pv4-brand-fallback{
  display:flex;align-items:center;gap:10px;color:var(--pv4-ink)
}
.pv4-brand-mark{
  width:46px;height:46px;display:grid;place-items:center;
  border-radius:14px;color:var(--pv4-accent);
  background:color-mix(in srgb,var(--pv4-accent) 11%,var(--pv4-panel));
}
.pv4-heading{margin-bottom:19px}
.pv4-heading h1{
  margin:0;
  color:var(--pv4-ink);
  font-size:clamp(2.25rem,3.4vw,3.55rem);
  line-height:1;
  letter-spacing:-.05em;
  font-weight:950;
}
.pv4-heading p{
  margin:8px 0 0;
  color:var(--pv4-muted);
  font-size:.91rem;
}
.pv4-form{
  display:block!important;
  width:100%!important;
  margin:0!important;
  padding:0!important;
  border:0!important;
  background:transparent!important;
  box-shadow:none!important;
}
.pv4-form label:not(.pv4-check-label):not(.form-check-label){
  display:block!important;
  margin:0 0 6px!important;
  color:var(--pv4-ink)!important;
  font-size:.78rem!important;
  font-weight:850!important;
}
.pv4-form input[type="text"],
.pv4-form input[type="password"],
.pv4-form input[type="email"],
.pv4-form input[type="tel"]{
  width:100%!important;
  min-height:52px!important;
  padding:0 14px!important;
  border:1px solid var(--pv4-line)!important;
  border-radius:13px!important;
  background:var(--pv4-panel)!important;
  color:var(--pv4-ink)!important;
  box-shadow:none!important;
  outline:0!important;
}
.pv4-form input::placeholder{color:var(--pv4-muted)!important;opacity:.82!important}
.pv4-form input:focus{
  border-color:var(--pv4-accent)!important;
  box-shadow:0 0 0 4px color-mix(in srgb,var(--pv4-accent) 11%,transparent)!important;
}
.pv4-form .input-group,
.pv4-form .form-control-wrap,
.pv4-form .portal-login-input{margin-bottom:13px!important}
.pv4-form .input-group-text{
  border-color:var(--pv4-line)!important;
  background:var(--pv4-panel)!important;
  color:var(--pv4-muted)!important;
}
.pv4-meta{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:15px;
  margin:4px 0 14px;
  font-size:.80rem;
}
.pv4-check-label{
  display:inline-flex!important;
  align-items:center!important;
  gap:7px!important;
  margin:0!important;
  color:var(--pv4-ink)!important;
  font-size:.80rem!important;
  font-weight:750!important;
  cursor:pointer;
}
.pv4-check-label input{margin:0!important}
.pv4-meta a{
  color:var(--pv4-accent)!important;
  text-decoration:none!important;
  font-weight:800!important;
}
.pv4-submit{
  width:100%!important;
  min-height:54px!important;
  margin:0!important;
  border:0!important;
  border-radius:999px!important;
  background:linear-gradient(90deg,var(--pv4-accent),var(--pv4-accent2))!important;
  color:#fff!important;
  font-weight:900!important;
  box-shadow:0 14px 30px color-mix(in srgb,var(--pv4-accent) 22%,transparent)!important;
}
.pv4-more{
  display:flex;align-items:center;gap:10px;
  margin:18px 0 11px;color:var(--pv4-muted);
  font-size:.66rem;font-weight:900;letter-spacing:.12em;text-transform:uppercase;
}
.pv4-more:before,.pv4-more:after{content:"";height:1px;flex:1;background:var(--pv4-line)}
.pv4-actions{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
}
.pv4-action{
  min-height:96px;
  padding:13px;
  display:flex;
  flex-direction:column;
  border:1px solid var(--pv4-line);
  border-radius:16px;
  background:var(--pv4-soft);
}
.pv4-action.signup{background:linear-gradient(145deg,color-mix(in srgb,var(--pv4-green) 7%,var(--pv4-panel)),var(--pv4-panel))}
.pv4-action.app{background:linear-gradient(145deg,color-mix(in srgb,var(--pv4-purple) 7%,var(--pv4-panel)),var(--pv4-panel))}
.pv4-action-top{display:flex;align-items:center;gap:8px;margin-bottom:4px}
.pv4-action-icon{
  width:32px;height:32px;display:grid;place-items:center;border-radius:10px;
}
.pv4-action.signup .pv4-action-icon{color:var(--pv4-green);background:color-mix(in srgb,var(--pv4-green) 10%,var(--pv4-panel))}
.pv4-action.app .pv4-action-icon{color:var(--pv4-purple);background:color-mix(in srgb,var(--pv4-purple) 10%,var(--pv4-panel))}
.pv4-action strong{font-size:.82rem;color:var(--pv4-ink)}
.pv4-action p{margin:0 0 7px;color:var(--pv4-muted);font-size:.68rem;line-height:1.32}
.pv4-action>a,.pv4-action>button{
  margin-top:auto!important;
  width:100%!important;
  min-height:36px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  border-radius:999px!important;
  background:transparent!important;
  text-decoration:none!important;
  font-size:.74rem!important;
  font-weight:850!important;
}
.pv4-action.signup>a,.pv4-action.signup>button{border:1px solid var(--pv4-green)!important;color:var(--pv4-green)!important}
.pv4-action.app>a,.pv4-action.app>button{border:1px solid var(--pv4-purple)!important;color:var(--pv4-purple)!important}
.pv4-footer{
  display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;
  margin-top:15px;padding-top:14px;border-top:1px solid var(--pv4-line);
  color:var(--pv4-muted);font-size:.67rem;
}
.pv4-theme{
  position:fixed!important;top:14px!important;right:14px!important;z-index:1000!important;
  width:43px!important;height:43px!important;display:grid!important;place-items:center!important;
  border-radius:13px!important;border:1px solid var(--pv4-line)!important;
  background:var(--pv4-panel)!important;color:var(--pv4-ink)!important;
  box-shadow:0 10px 28px rgba(15,23,42,.08)!important;
}
.pv4-provider-hide{display:none!important}

@media(min-width:861px) and (min-height:760px){
  body.pv4-body{overflow-y:hidden!important}
  .pv4-root{height:100vh;height:100dvh}
  .pv4-shell{max-height:calc(100vh - 48px);max-height:calc(100dvh - 48px)}
}
@media(max-width:1100px){
  .pv4-root{padding:18px}
  .pv4-shell{grid-template-columns:minmax(0,1fr) minmax(400px,.95fr)}
  .pv4-left{padding:38px 34px 30px}
  .pv4-right{padding:38px 34px 28px}
  .pv4-poster-card{max-height:330px}
  .pv4-poster-card img,.pv4-poster-card picture{max-height:300px!important}
}
@media(max-width:860px){
  body.pv4-body{overflow-y:auto!important}
  .pv4-root{padding:8px;align-items:flex-start}
  .pv4-shell{
    grid-template-columns:1fr;
    width:min(570px,100%);
    min-height:0;
    margin:50px auto 8px;
    border-radius:21px;
  }
  .pv4-right{order:1;padding:28px 20px 22px}
  .pv4-left{
    order:2;
    padding:18px 20px 24px;
    background:var(--pv4-panel);
    border-top:1px solid var(--pv4-line);
  }
  .pv4-left .pv4-kicker,.pv4-left .pv4-title,.pv4-left .pv4-desc,.pv4-left .pv4-chips{display:none}
  .pv4-poster-wrap{min-height:0}
  .pv4-poster-card{max-width:100%;max-height:210px;padding:8px}
  .pv4-poster-card img,.pv4-poster-card picture{max-height:190px!important}
  .pv4-brand{min-height:52px;margin-bottom:14px}
  .pv4-brand img{max-width:220px!important;max-height:58px!important}
  .pv4-heading h1{font-size:2.35rem}
}
@media(max-width:520px){
  .pv4-right{padding:25px 16px 20px}
  .pv4-heading h1{font-size:2.15rem}
  .pv4-actions{grid-template-columns:1fr}
  .pv4-action{min-height:86px}
  .pv4-meta{font-size:.76rem}
  .pv4-theme{top:8px!important;right:8px!important}
}