/* dConnect - Customer Portal Styles */
.bg-blur{position:fixed;inset:0;z-index:-1;background:var(--bg)}
.portal{min-height:100vh;display:flex;flex-direction:column}
.portal-header{display:flex;align-items:center;justify-content:space-between;padding:1.2rem 2rem;position:sticky;top:0;z-index:100;background:var(--card);border-bottom:1px solid var(--border)}
.portal-header .brand{display:flex;align-items:center;gap:.6rem;font-size:.9rem;font-weight:600}
.portal-header .actions{display:flex;gap:.5rem}
.portal-main{max-width:1200px;margin:0 auto;padding:2rem;width:100%;flex:1}
.portal-main.centered{display:flex;align-items:center;justify-content:center}

.hero{
  text-align:center;
  padding:5rem 2rem 3rem;
  position:relative;
  overflow:hidden;
}
.hero-deco{
  position:absolute;
  color:var(--primary);
  opacity:.12;
  animation:float 6s ease-in-out infinite;
  pointer-events:none;
}
.hero-deco .icon{
  width:100%;height:100%;
}
.hero-deco-1{
  width:64px;height:64px;
  top:2rem;left:10%;
  animation-delay:0s;
}
.hero-deco-2{
  width:48px;height:48px;
  color:var(--secondary);
  top:4rem;right:15%;
  animation-delay:2s;
}
.hero-deco-3{
  width:36px;height:36px;
  bottom:2rem;left:20%;
  animation-delay:4s;
}
@keyframes float{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-20px)}
}
.hero-content{
  max-width:700px;
  margin:0 auto;
  position:relative;
  z-index:1;
}
.hero-badge{
  display:inline-block;
  padding:.4rem 1rem;
  background:rgba(223,92,115,.1);
  color:var(--primary);
  font-size:.75rem;
  font-weight:600;
  border-radius:999px;
  margin-bottom:1.2rem;
  border:1px solid rgba(223,92,115,.2);
}
.hero-icon{
  width:80px;height:80px;
  background:#fff;
  border-radius:20px;
  display:flex;align-items:center;justify-content:center;
  margin:0 auto 1.5rem;
  box-shadow:0 8px 24px rgba(0,0,0,.1);
  padding:1rem;
}
.hero-icon img{width:100%;height:100%;object-fit:contain}
.hero-content h1{font-size:1.8rem;font-weight:800;margin-bottom:1rem;color:var(--fg);line-height:1.15}
.hero-subtitle{font-size:.75rem;color:var(--muted);max-width:520px;margin:0 auto 2rem;line-height:1.6}

.payment-methods{
  display:flex;flex-wrap:wrap;gap:1rem;justify-content:center;margin-top:1.5rem
}
.payment-item{
  display:flex;align-items:center;gap:.5rem;
  padding:.6rem 1rem;
  background:var(--card);
  border:1px solid var(--border);
  border-radius:12px;
  font-size:.7rem;
  font-weight:500;
  color:var(--fg);
  transition:all .2s ease;
  box-shadow:0 2px 6px rgba(0,0,0,.04);
}
.payment-item span{font-size:.7rem;font-weight:500;color:var(--fg)}
.payment-item:hover{transform:translateY(-2px);border-color:var(--primary);box-shadow:0 4px 12px rgba(223,92,115,.12)}
.payment-icon{color:var(--secondary);display:flex;align-items:center}
.payment-logo{width:24px;height:24px;object-fit:contain;border-radius:4px}

.packages-section{margin-top:3rem}
.section-header{text-align:center;margin-bottom:2rem}
.section-header h2{font-size:1.1rem;font-weight:700;margin-bottom:.4rem;color:var(--fg)}
.section-subtitle{font-size:.7rem;color:var(--muted)}

.payment-methods-section{
  margin-top:3rem;
  padding:2rem 0;
  border-top:1px solid var(--border);
}

.packages-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:1.5rem;max-width:1200px;margin:0 auto}

.pkg-card{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:16px;
  padding:1.5rem;
  display:flex;
  flex-direction:column;
  gap:1.2rem;
  transition:all .3s ease;
  position:relative;
  box-shadow:0 2px 8px rgba(0,0,0,.04);
}
.pkg-card:hover{transform:translateY(-4px);box-shadow:0 8px 24px rgba(0,0,0,.08)}
.pkg-card.featured{border-color:var(--primary);box-shadow:0 4px 16px rgba(223,92,115,.15)}
.pkg-card.featured:hover{box-shadow:0 8px 28px rgba(223,92,115,.2)}

.featured-badge{
  position:absolute;
  top:-10px;
  right:1.5rem;
  background:var(--primary);
  color:#fff;
  font-size:.65rem;
  font-weight:600;
  padding:.3rem .7rem;
  border-radius:20px;
  display:flex;
  align-items:center;
  gap:.3rem;
  box-shadow:0 2px 8px rgba(223,92,115,.3);
}

.pkg-header{padding-bottom:.5rem}
.pkg-name{font-size:.85rem;font-weight:600;margin:0;color:var(--fg)}

.pkg-price{text-align:center;padding:.6rem 0}
.price-amount{font-size:1.3rem;font-weight:800;color:var(--primary);display:block}
.price-period{font-size:.65rem;color:var(--muted);text-transform:uppercase;letter-spacing:.05em}

.pkg-divider{height:1px;background:var(--border);margin:0}

.pkg-features{
  position:absolute;
  top:1rem;
  right:1rem;
  display:flex;
  flex-direction:column;
  gap:.5rem;
}
.feature-icon{
  width:18px;height:18px;
  background:var(--bg);
  border:1px solid var(--border);
  border-radius:5px;
  display:flex;align-items:center;justify-content:center;
  color:var(--secondary);
  transition:all .2s ease;
  position:relative;
}
.feature-icon:hover{
  border-color:var(--primary);
  color:var(--primary);
}
.feature-icon::after{
  content:attr(title);
  position:absolute;
  right:100%;
  top:50%;
  transform:translateY(-50%) translateX(-8px);
  background:var(--fg);
  color:var(--bg);
  font-size:.65rem;
  padding:.4rem .6rem;
  border-radius:6px;
  white-space:nowrap;
  opacity:0;
  visibility:hidden;
  transition:all .15s ease;
  z-index:10;
  pointer-events:none;
}
.feature-icon:hover::after{
  opacity:1;
  visibility:visible;
  transform:translateY(-50%) translateX(-4px);
}

.pkg-btn{
  margin-top:auto;
  width:100%;
  padding:.8rem 1.2rem;
  background:var(--primary);
  color:#fff;
  border:none;
  border-radius:10px;
  font-size:.8rem;
  font-weight:600;
  cursor:pointer;
  transition:all .2s ease;
}
.pkg-btn:hover{background:var(--primary-2);transform:scale(1.02)}

.voucher-section{margin-top:4rem;margin-bottom:3rem}
.voucher-card{
  max-width:500px;
  margin:0 auto;
  background:var(--card);
  border:1px solid var(--border);
  border-radius:16px;
  padding:2rem;
  box-shadow:0 4px 16px rgba(0,0,0,.04);
}
.voucher-header{text-align:center;margin-bottom:1.2rem}
.voucher-header h3{font-size:.9rem;font-weight:600;margin-bottom:.3rem;color:var(--fg)}
.voucher-subtitle{font-size:.65rem;color:var(--muted)}

.voucher-form{display:flex;gap:.6rem}
.input-group{display:flex;gap:.6rem;width:100%}
.voucher-input{
  flex:1;
  padding:.8rem 1rem;
  border:1px solid var(--border);
  border-radius:10px;
  background:var(--bg);
  color:var(--fg);
  font-size:.8rem;
  outline:none;
  transition:border-color .2s ease;
}
.voucher-input:focus{border-color:var(--primary)}
.voucher-btn{
  padding:.8rem 1.5rem;
  background:var(--secondary);
  color:#fff;
  border:none;
  border-radius:10px;
  font-size:.8rem;
  font-weight:600;
  cursor:pointer;
  transition:background .2s ease;
  white-space:nowrap;
}
.voucher-btn:hover{background:var(--secondary-2)}

/* Payment Modal */
.modal-card{
  max-width:420px;
  width:100%;
  padding:0;
  background:var(--card);
  border:1px solid var(--border);
  border-radius:20px;
  box-shadow:0 20px 60px rgba(0,0,0,.15);
  overflow:hidden;
}
.pm-header{
  text-align:center;
  padding:2rem 2rem 1rem;
  background:var(--bg);
  border-bottom:1px solid var(--border);
}
.pm-logo{
  width:56px;
  height:56px;
  object-fit:contain;
  border-radius:12px;
  background:#fff;
  padding:.4rem;
  box-shadow:0 4px 12px rgba(0,0,0,.08);
  margin-bottom:1rem;
}
.pm-header h3{
  margin:0;
  font-size:.95rem;
  font-weight:700;
  color:var(--fg);
}
.pm-package-info{
  text-align:center;
  padding:.8rem 2rem;
  font-size:.75rem;
  font-weight:600;
  color:var(--primary);
  border-bottom:1px solid var(--border);
}
#pay-form{
  padding:1.5rem 2rem;
}
.pm-method-wrap{
  margin-bottom:1.2rem;
}
.pm-method-wrap > label{
  display:block;
  font-size:.75rem;
  font-weight:600;
  color:var(--fg);
  margin-bottom:.5rem;
}
.pm-methods{
  display:flex;
  gap:.6rem;
  flex-wrap:wrap;
}
.pm-method{
  flex:1;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:.3rem;
  padding:.8rem .6rem;
  border:2px solid var(--border);
  border-radius:12px;
  background:var(--bg);
  cursor:pointer;
  transition:all .2s ease;
  text-align:center;
}
.pm-method input{
  position:absolute;
  opacity:0;
  width:0;height:0;
}
.pm-method-title{
  font-size:.8rem;
  font-weight:700;
  color:var(--fg);
}
.pm-method-sub{
  font-size:.6rem;
  font-weight:500;
  color:var(--muted);
}
.pm-method.active,
.pm-method:hover{
  border-color:var(--primary);
  background:rgba(223,92,115,.05);
}
.pm-method.active .pm-method-title{
  color:var(--primary);
}
.pm-input-wrap label{
  display:block;
  font-size:.75rem;
  font-weight:600;
  color:var(--fg);
  margin-bottom:.5rem;
}
.pm-input-wrap input{
  width:100%;
  padding:.9rem 1rem;
  border:2px solid var(--border);
  border-radius:12px;
  background:var(--bg);
  color:var(--fg);
  font-size:.85rem;
  outline:none;
  transition:all .2s ease;
  text-align:center;
  letter-spacing:.05em;
}
.pm-input-wrap input:focus{
  border-color:var(--primary);
  box-shadow:0 0 0 4px rgba(223,92,115,.1);
}
.pm-actions{
  display:flex;
  gap:.6rem;
  margin-top:1.2rem;
}
.pm-btn{
  flex:1;
  padding:.85rem 1rem;
  border-radius:12px;
  font-size:.8rem;
  font-weight:600;
  cursor:pointer;
  transition:all .2s ease;
  border:none;
}
.pm-btn-cancel{
  background:var(--bg);
  color:var(--fg);
  border:1px solid var(--border);
}
.pm-btn-cancel:hover{
  background:var(--border);
}
.pm-btn-pay{
  background:var(--primary);
  color:#fff;
}
.pm-btn-pay:hover{
  background:var(--primary-2);
  transform:translateY(-1px);
  box-shadow:0 4px 12px rgba(223,92,115,.25);
}

/* Payment status */
#pm-status{
  text-align:center;
  padding:2.5rem 2rem;
}
.pm-spinner{
  width:48px;
  height:48px;
  border:4px solid var(--border);
  border-top-color:var(--primary);
  border-radius:50%;
  animation:spin 1s linear infinite;
  margin:0 auto 1.5rem;
}
#pm-status-text{
  font-size:.9rem;
  font-weight:600;
  color:var(--fg);
  margin:0 0 .5rem;
}
.pm-status-hint{
  font-size:.75rem;
  color:var(--muted);
}

.pm-terms-wrap{
  margin:1rem 0;
}
.pm-terms-label{
  display:flex;
  align-items:center;
  gap:.5rem;
  font-size:.7rem;
  color:var(--fg);
  cursor:pointer;
}
.pm-terms-label input[type="checkbox"]{
  width:16px;height:16px;
  accent-color:var(--primary);
}
.pm-terms-label a{
  color:var(--primary);
  text-decoration:underline;
}
.pm-terms-text{
  margin-top:.6rem;
  padding:.8rem;
  background:var(--bg);
  border:1px solid var(--border);
  border-radius:8px;
  font-size:.7rem;
  color:var(--fg);
  line-height:1.5;
  max-height:150px;
  overflow-y:auto;
}

.portal-footer{padding:2rem;text-align:center;color:var(--muted);font-size:.7rem;border-top:1px solid var(--border);margin-top:auto}

.status-card{padding:2rem;text-align:center;max-width:500px;width:100%;background:var(--card);border:1px solid var(--border);border-radius:16px;box-shadow:0 4px 16px rgba(0,0,0,.04)}
.status-card .success-icon{color:var(--success);margin-bottom:1rem}
.status-card .success-icon .icon{width:64px;height:64px}
.status-card h1{font-size:1.4rem;font-weight:700;margin-bottom:.5rem;color:var(--fg)}
.status-card .stat{padding:1rem;border:1px solid var(--border);border-radius:10px;text-align:left;margin-bottom:.8rem}
.status-card .stat small{display:block;color:var(--muted);font-size:.65rem;text-transform:uppercase;margin-bottom:.3rem}
.status-card .stat strong{font-size:1.1rem;font-weight:700;color:var(--fg)}
.status-card .grid-2{margin:1.5rem 0;display:grid;grid-template-columns:1fr 1fr;gap:.8rem}

.data-usage-card{
  background:var(--bg);
  border:1px solid var(--border);
  border-radius:12px;
  padding:1rem 1.2rem;
  margin:1.5rem 0;
  text-align:left;
}
.usage-header{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:.6rem;
  font-size:.75rem;
  font-weight:600;
  color:var(--fg);
}
.usage-value{
  font-weight:700;
  color:var(--primary);
  font-size:.75rem;
}
.usage-bar-bg{
  width:100%;
  height:8px;
  background:var(--border);
  border-radius:999px;
  overflow:hidden;
}
.usage-bar-fill{
  height:100%;
  background:var(--success);
  border-radius:999px;
  transition:width .5s ease, background .3s ease;
}
.usage-bar-fill.warning{background:#f0ad4e}
.usage-bar-fill.danger{background:#d9534f}
.usage-hint{
  display:block;
  margin-top:.4rem;
  font-size:.65rem;
}

@media(max-width:768px){
  .portal-header{padding:1rem 1.5rem}
  .portal-main{padding:1.5rem}
  .hero{padding:3.5rem 1.5rem 2.5rem}
  .hero-deco-1{width:44px;height:44px}
  .hero-deco-2{width:32px;height:32px}
  .hero-deco-3{width:24px;height:24px}
  .hero-content h1{font-size:1.4rem}
  .packages-grid{grid-template-columns:1fr}
  .voucher-card{padding:1.5rem}
  .input-group{flex-direction:column}
  .voucher-btn{width:100%}
}