:root{
  --hp-dark:#5f5f5f;
  --hp-blue:#118bee;
  --hp-blue-deep:#2b3c8f;
  --hp-yellow: #F8BF25;
  --hp-bg:#f4f6f8;
  --hp-card:#ffffff;
  --hp-muted:#9aa3ab;
  --hp-border:#d1d5db;
  --hp-shadow: 0 10px 30px rgba(0,0,0,.12);
  --hp-shadow-soft: 0 4px 12px rgba(0,0,0,.06);
  --radius: 0px;
}

*{
  box-sizing:border-box;
  font-family: -apple-system, system-ui, BlinkMacSystemFont, 'Segoe UI', Roboto,
    'Helvetica Neue', Arial, sans-serif;
}

body{
  margin:0;
  background: #eef1f5;
  color:#1f2937;
}

/* Top bar */
.hp-header{
  background: linear-gradient(to bottom, #3c6e97, #3b5998);
  color:#fff;
  padding: 20px 32px;
  font-size: 22px;
  font-weight: 600;
  letter-spacing: .2px;
  box-shadow: var(--hp-shadow-soft);
}
.hp-header small{
  display:block;
  margin-top:6px;
  font-size: 13px;
  font-weight: 500;
  opacity:.75;
}

/* Layout */
.container{
  max-width: 1200px;
  margin: 28px auto 42px;
  padding: 0 24px;
  display:grid;
  grid-template-columns: 1.05fr 1fr;
  gap: 22px;
  align-items: stretch;
}

/* Left summary panel */
.summary{
  background:#3b5998;
  border-radius: var(--radius);
  color:#fff;
  padding: 30px;
  box-shadow: var(--hp-shadow);
  position: relative;
  overflow:hidden;
  min-height: 520px;
}
.summary:before{
  content:"";
  position:absolute;
  inset:-40px;
  background:
    radial-gradient(circle at 20% 20%, rgba(255,255,255,.18), transparent 55%),
    radial-gradient(circle at 80% 30%, rgba(255,255,255,.10), transparent 50%),
    linear-gradient(45deg, rgba(255,255,255,.06), transparent 40%);
  pointer-events:none;
}
.summary-inner{position:relative; z-index:1;}

.amount{
  font-size: 54px;
  font-weight: 700;
  margin: 0 0 6px;
  letter-spacing: .3px;
}
.subline{
  margin: 0 0 18px;
  opacity: .92;
  font-size: 16px;
  line-height: 1.35;
}

.metrics{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin-top: 18px;
}
.metric{
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.12);
  padding: 16px 14px;
  text-align:center;
  backdrop-filter: blur(2px);
}
.metric i{
  font-size: 18px;
  opacity: .95;
  margin-bottom: 8px;
  display:block;
}
.metric strong{
  display:block;
  font-size: 22px;
  margin-bottom: 2px;
}
.metric span{
  font-size: 13px;
  opacity: .85;
}

/* Right card */
.panel{
  background: rgba(255,255,255,.78);
  border: 1px solid rgba(0,0,0,.06);
  border-radius: var(--radius);
  box-shadow: var(--hp-shadow);
  padding: 28px;
  backdrop-filter: blur(6px);
  min-height: 520px;
}

.panel h2{
  margin: 0 0 6px;
  font-size: 30px;
  font-weight: 700;
  color:#2b3440;
}
.panel p{
  margin: 0 0 18px;
  color:#52606d;
  line-height: 1.45;
}

.field{ margin: 12px 0 14px; }
label{
  display:block;
  font-size: 14px;
  font-weight: 600;
  color:#2b3440;
  margin-bottom: 8px;
}
input[type="tel"], select{
  width:100%;
  padding: 12px 14px;
  border: 1px solid var(--hp-border);
  font-size: 16px;
  background:#fff;
  outline:none;
  box-shadow: inset 0 1px 0 rgba(0,0,0,.03);
}
input[type="tel"]:focus, select:focus{
  border-color: rgba(17,139,238,.55);
  box-shadow: 0 0 0 4px rgba(17,139,238,.12);
}

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding: 12px 16px;
  border: none;
  background: var(--hp-yellow);
  color:#fff;
  font-weight: 700;
  font-size: 15px;
  cursor:pointer;
  box-shadow: 0 10px 16px rgba(17,139,238,.20);
  user-select:none;
}
.btn:disabled{
  opacity:.6;
  cursor:not-allowed;
  box-shadow:none;
}

.btn.secondary{
  width: 100%;
  padding: 14px 16px;
  font-size: 18px;
  margin-top: 12px;
}

.section-title{
  margin-top: 50px;
  font-size: 16px;
  font-weight: 800;
  color:#2b3440;
}

.fee-box{
  margin-top: 10px;
  border: 1px solid rgba(0,0,0,.10);
  overflow:hidden;
  background: rgba(255,255,255,.86);
}
.fee-row{
  display:grid;
  grid-template-columns: 28px 1fr auto;
  gap: 10px;
  align-items:center;
  padding: 12px 12px;
  border-top: 1px solid rgba(0,0,0,.08);
}
.fee-row:first-child{ border-top:none; }

.fee-left{
  display:flex;
  gap: 10px;
  align-items:center;
  min-width:0;
}
.fee-main{
  min-width:0;
}
.fee-name{
  font-weight: 700;
  color:#2b3440;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.fee-meta{
  font-size: 13px;
  color:#64748b;
  margin-top: 2px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.fee-amt{
  font-weight: 800;
  color:#2b3440;
  font-size: 16px;
}

.total-row{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding: 12px 12px;
  border-top: 1px solid rgba(0,0,0,.10);
  background: rgba(245,247,250,.9);
  font-weight: 800;
  color:#2b3440;
}
.total-row .total-amt{
  font-size: 20px;
}

.divider{
  height:1px;
  background: rgba(0,0,0,.10);
  margin: 16px 0 10px;
}

.secure{
  margin-top: 10px;
  color:#6b7280;
  font-size: 13px;
  display:flex;
  align-items:center;
  gap:10px;
  justify-content:center;
}
.secure i{ color:#6b7280; }

.hint{
  margin-top: 8px;
  color: #f3f3f3;
  font-size: 12px;
  line-height: 1.35;
}

.hidden{ display:none !important; }

@media (max-width: 980px){
  .container{ grid-template-columns: 1fr; }
  .summary{ min-height: auto; }
  .panel{ min-height: auto; }
  .metrics{ grid-template-columns: 1fr; }
  .amount{ font-size: 44px; }
  .panel h2{ font-size: 26px; }
}