/* Portal Pelanggan — reuse token/tema dari style.css, layout beda
   (mobile-first, single column, gak pakai sidebar admin) */

.portal-body{
  background: var(--bg); min-height:100vh;
  display:flex; align-items:flex-start; justify-content:center;
  padding: 24px 16px;
}

.portal-wrap{ width:100%; max-width:480px; }

.portal-card{
  background: var(--bg-panel); border:1px solid var(--line); border-radius:16px;
  padding:32px 26px; box-shadow: var(--shadow-md); text-align:center;
  animation: modalIn .2s ease;
}

.portal-logo{
  font-family: var(--font-display); font-weight:700; font-size:20px;
  color: var(--text); margin-bottom:18px;
}
.portal-logo span{ color: var(--accent); }

.portal-card h1{ font-family: var(--font-display); font-size:19px; font-weight:600; margin-bottom:6px; }
.portal-sub{ color: var(--text-muted); font-size:13px; margin-bottom:24px; }

.portal-btn-full{ width:100%; justify-content:center; padding:11px; font-size:13.5px; }

.portal-error{
  color: var(--danger); font-size:12px; margin-top:10px; min-height:16px;
}

.portal-otp-info{
  font-size:13px; color: var(--text-muted); margin-bottom:18px;
  background: var(--bg-panel-raised); padding:10px 14px; border-radius:8px;
}

/* Portal utama (setelah login) */
.portal-topbar{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  margin-bottom:20px; padding-bottom:16px; border-bottom:1px solid var(--line);
}
.portal-topbar-name{ font-family: var(--font-display); font-weight:600; font-size:16px; }
.portal-topbar-sub{ color: var(--text-muted); font-size:11.5px; margin-top:2px; }

.portal-tabs{
  display:flex; gap:4px; background: var(--bg-panel); border:1px solid var(--line);
  border-radius:10px; padding:4px; margin-bottom:18px;
}
.portal-tab{
  flex:1; text-align:center; padding:9px 6px; border-radius:8px; cursor:pointer;
  font-size:12.5px; font-weight:600; color: var(--text-muted);
  transition: background-color .15s ease, color .15s ease;
}
.portal-tab:hover{ color: var(--text); }
.portal-tab.active{ background: var(--accent); color:#fff; }

.portal-tab-content{ animation: fadein .15s ease; }

.portal-info-row{
  display:flex; justify-content:space-between; align-items:center;
  padding:12px 0; border-bottom:1px solid var(--line); font-size:13.5px;
}
.portal-info-row:last-child{ border-bottom:none; }
.portal-info-label{ color: var(--text-muted); font-size:12px; }
.portal-info-value{ font-weight:600; text-align:right; }

.portal-tagihan-card, .portal-hotspot-card{
  background: var(--bg-panel); border:1px solid var(--line); border-radius:12px;
  padding:16px 18px; margin-bottom:12px; box-shadow: var(--shadow-sm);
}

@media (max-width: 420px){
  .portal-card{ padding:26px 18px; }
  .portal-body{ padding:16px 10px; }
}