/* Register page-only styles */
.reg-wrap{ padding: 20px 0 34px 0; }
.reg-grid{
  display:grid;
  grid-template-columns: 1.2fr .8fr;
  gap: 16px;
  margin-top: 18px;
}
.reg-card{
  background: rgba(255,255,255,.72);
  border: 1px solid rgba(0,0,0,.10);
  border-radius: 22px;
  box-shadow: var(--shadow-soft);
  padding: 18px;
}
.reg-card--summary{ position: sticky; top: 18px; align-self:start; }
.reg-title{ margin:0 0 10px 0; font-size:22px; text-transform:uppercase; letter-spacing:.4px; }
.reg-subtitle{ margin:0 0 6px 0; font-size:16px; text-transform:uppercase; letter-spacing:.3px; }
.muted{ color: rgba(18,32,51,.74); font-weight:700; margin: 0 0 10px 0; }
.muted.small{ font-size:12px; margin-top:8px; }
.form-grid{ display:grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.reg-divider{ height:1px; background: rgba(0,0,0,.10); margin: 14px 0; }
.card-element{
  background:#fff;
  border:1px solid rgba(0,0,0,.14);
  border-radius: 12px;
  padding: 12px;
}
.reg-actions{ display:flex; gap:10px; flex-wrap:wrap; margin-top: 12px; }
.form-msg{ margin-top: 10px; font-weight:900; }
.hp{ position:absolute; left:-9999px; width:1px; height:1px; opacity:0; }

.summary-lines{ display:flex; flex-direction:column; gap:10px; }
.line{display:flex; align-items:flex-start; gap:12px; font-weight:800; color: rgba(18,32,51,.78);}
.line strong{ color: rgba(18,32,51,.92); }
.line.total{ border-top:1px solid rgba(0,0,0,.10); padding-top:10px; font-weight:1000; }

.summary-lines .line span{
  flex: 0 0 90px;   /* label width */
}

.summary-lines .line strong{
  flex: 1;
  text-align:left;
}

.note{
  margin-top: 12px;
  padding: 12px;
  border-radius: 16px;
  background: rgba(11,35,66,.06);
  border: 1px solid rgba(11,35,66,.12);
  font-weight:800;
  color: rgba(18,32,51,.78);
}

/* =========================================
   SUMMARY: Label left, Value right (clean)
   ========================================= */

#summaryBox .line{
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
}

#summaryBox .line span{
  flex: 0 0 120px;  /* label width */
}

#summaryBox .line strong{
  flex: 1;
  text-align: right;
}