/* PERDAMI CHECKOUT MAKNAI STYLE V4 */

.mkx-page {
  --navy:#123b6d;
  --teal:#0d8177;
  --teal-soft:#edf8f5;
  --bg:#f7faf9;
  --text:#18334a;
  --muted:#708290;
  --line:#dce7e5;

  min-height:calc(100vh - 70px);
  padding:30px 0 100px;
  background:var(--bg);
  color:var(--text);
}

.mkx-shell {
  max-width:900px;
}

.mkx-head {
  margin-bottom:18px;
}

.mkx-back {
  display:inline-flex;
  margin-bottom:24px;
  color:var(--teal)!important;
  text-decoration:none;
  font-weight:750;
}

.mkx-title > span {
  color:var(--teal);
  font-size:12px;
  font-weight:850;
  letter-spacing:.09em;
}

.mkx-title h1 {
  margin:6px 0 8px;
  color:var(--navy);
  font-size:clamp(34px,5vw,50px);
  line-height:1.06;
}

.mkx-title p {
  max-width:700px;
  margin:0;
  color:var(--muted);
  line-height:1.6;
}

.mkx-eventbar {
  display:grid;
  grid-template-columns:1.3fr .9fr 1fr;
  gap:1px;
  overflow:hidden;
  margin-bottom:14px;
  border:1px solid var(--line);
  border-radius:16px;
  background:var(--line);
}

.mkx-eventbar > div {
  display:grid;
  gap:3px;
  padding:13px 15px;
  background:#fff;
}

.mkx-eventbar small {
  color:var(--muted);
  font-size:11px;
}

.mkx-eventbar strong {
  color:var(--text);
  font-size:13px;
  line-height:1.35;
}

.mkx-demo {
  display:grid;
  gap:3px;
  margin-bottom:14px;
  padding:12px 14px;
  border:1px solid #efd99d;
  border-radius:13px;
  background:#fff8e7;
  color:#715a19;
  font-size:12px;
}

.mkx-card {
  overflow:hidden;
  border:1px solid var(--line);
  border-radius:22px;
  background:#fff;
}

.mkx-progress {
  display:flex;
  align-items:center;
  justify-content:center;
  gap:7px;
  padding:18px 20px;
  border-bottom:1px solid var(--line);
  background:#fcfdfd;
}

.mkx-progress span {
  display:flex;
  align-items:center;
  gap:5px;
  color:#9aa8b0;
  font-size:11px;
  font-weight:700;
}

.mkx-progress b {
  width:25px;
  height:25px;
  display:grid;
  place-items:center;
  border-radius:50%;
  background:#e8efee;
  color:#71818b;
}

.mkx-progress .active,
.mkx-progress .done {
  color:var(--teal);
}

.mkx-progress .active b,
.mkx-progress .done b {
  background:var(--teal);
  color:#fff;
}

.mkx-progress i {
  width:24px;
  height:1px;
  background:#dbe4e2;
}

.mkx-step {
  padding:28px;
  animation:mkxFade .18s ease;
}

@keyframes mkxFade {
  from { opacity:.5; transform:translateY(4px); }
  to { opacity:1; transform:none; }
}

.mkx-step-head {
  margin-bottom:20px;
}

.mkx-step-head > small {
  color:var(--teal);
  font-weight:800;
}

.mkx-step-head h2 {
  margin:5px 0 5px;
  color:var(--navy);
  font-size:25px;
}

.mkx-step-head p {
  margin:0;
  color:var(--muted);
  font-size:14px;
  line-height:1.5;
}

.mkx-choice-list {
  display:grid;
  gap:10px;
}

.mkx-choice-list label {
  position:relative;
}

.mkx-choice-list input,
.mkx-segment input,
.mkx-payments input {
  position:absolute;
  opacity:0;
  pointer-events:none;
}

.mkx-choice-list label > span {
  position:relative;
  display:grid;
  gap:4px;
  min-height:92px;
  align-content:center;
  padding:16px 54px 16px 17px;
  border:1.5px solid var(--line);
  border-radius:16px;
  cursor:pointer;
}

.mkx-choice-list input:checked + span {
  border-color:var(--teal);
  background:var(--teal-soft);
}

.mkx-choice-list b {
  color:var(--navy);
  font-size:16px;
}

.mkx-choice-list small {
  color:var(--muted);
}

.mkx-choice-list em {
  position:absolute;
  top:50%;
  right:17px;
  transform:translateY(-50%);
  width:24px;
  height:24px;
  display:none;
  place-items:center;
  border-radius:50%;
  background:var(--teal);
  color:#fff;
  font-style:normal;
}

.mkx-choice-list input:checked + span em {
  display:grid;
}

.mkx-segment {
  display:inline-grid;
  grid-template-columns:1fr 1fr;
  gap:4px;
  margin-bottom:16px;
  padding:4px;
  border-radius:12px;
  background:#edf3f2;
}

.mkx-segment label {
  position:relative;
}

.mkx-segment span {
  min-width:150px;
  min-height:38px;
  display:grid;
  place-items:center;
  padding:6px 12px;
  border-radius:9px;
  color:#667984;
  font-weight:750;
  cursor:pointer;
}

.mkx-segment input:checked + span {
  background:#fff;
  color:var(--teal);
}

.mkx-fields {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
}

.mkx-fields label,
.mkx-amount-input {
  display:grid;
  gap:6px;
  color:#405c70;
  font-size:13px;
  font-weight:750;
}

.mkx-fields input,
.mkx-amount-input input {
  width:100%;
  min-height:49px;
  padding:10px 12px;
  border:1px solid #cedddb;
  border-radius:13px;
  background:#fff;
  color:var(--text);
  font:inherit;
}

.mkx-fields input:focus,
.mkx-amount-input input:focus {
  outline:none;
  border-color:var(--teal);
  box-shadow:0 0 0 3px rgba(13,129,119,.09);
}

.mkx-invalid {
  border-color:#c83d48!important;
}

.mkx-error {
  min-height:16px;
  color:#b52f3b;
  font-size:11px;
  font-weight:600;
}

.mkx-amounts {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:8px;
  margin-bottom:14px;
}

.mkx-amounts button {
  min-height:47px;
  border:1px solid var(--line);
  border-radius:13px;
  background:#fff;
  color:var(--teal);
  font-weight:800;
  cursor:pointer;
}

.mkx-amounts button.active {
  border-color:var(--teal);
  background:var(--teal);
  color:#fff;
}

.mkx-amount-input > div {
  display:grid;
  grid-template-columns:52px 1fr;
  overflow:hidden;
  border:1px solid #cedddb;
  border-radius:13px;
}

.mkx-amount-input > div > span {
  display:grid;
  place-items:center;
  background:#edf4f3;
  color:#526b79;
  font-weight:850;
}

.mkx-amount-input input {
  border:0;
  border-radius:0;
}

.mkx-payments {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:9px;
}

.mkx-payments label {
  position:relative;
}

.mkx-payments label > span {
  position:relative;
  display:grid;
  grid-template-columns:42px 1fr 24px;
  grid-template-rows:auto auto;
  gap:0 10px;
  align-items:center;
  min-height:80px;
  padding:12px;
  border:1.5px solid var(--line);
  border-radius:15px;
  cursor:pointer;
}

.mkx-payments input:checked + span {
  border-color:var(--teal);
  background:var(--teal-soft);
}

.mkx-payments i {
  grid-row:1/3;
  width:40px;
  height:40px;
  display:grid;
  place-items:center;
  border-radius:11px;
  background:#eef5f3;
  color:var(--teal);
  font-size:11px;
  font-style:normal;
  font-weight:900;
}

.mkx-payments b {
  grid-column:2;
  color:var(--text);
}

.mkx-payments small {
  grid-column:2;
  color:var(--muted);
  font-size:11px;
}

.mkx-payments em {
  grid-column:3;
  grid-row:1/3;
  width:22px;
  height:22px;
  display:none;
  place-items:center;
  border-radius:50%;
  background:var(--teal);
  color:#fff;
  font-size:11px;
  font-style:normal;
}

.mkx-payments input:checked + span em {
  display:grid;
}

.mkx-confirm {
  display:grid;
  gap:0;
  overflow:hidden;
  border:1px solid var(--line);
  border-radius:15px;
}

.mkx-confirm > div {
  display:grid;
  grid-template-columns:160px 1fr;
  gap:16px;
  padding:12px 14px;
  border-bottom:1px solid var(--line);
}

.mkx-confirm > div:last-child {
  border-bottom:0;
}

.mkx-confirm span {
  color:var(--muted);
  font-size:12px;
}

.mkx-confirm strong {
  color:var(--text);
  text-align:right;
}

.mkx-confirm .total {
  background:#f4f9f8;
}

.mkx-confirm .total strong {
  color:var(--navy);
  font-size:19px;
}

.mkx-account {
  display:grid;
  gap:3px;
  margin-top:14px;
  padding:14px;
  border-radius:14px;
  background:#f1f7f6;
}

.mkx-account small,
.mkx-account span {
  color:var(--muted);
}

.mkx-account em {
  width:max-content;
  margin-top:4px;
  padding:3px 7px;
  border-radius:999px;
  background:#fff0c7;
  color:#745b12;
  font-size:9px;
  font-style:normal;
  font-weight:850;
}

.mkx-secure {
  margin:14px 0 0;
  color:var(--muted);
  font-size:12px;
  line-height:1.5;
}

.mkx-actions {
  display:flex;
  justify-content:space-between;
  gap:10px;
  padding:16px 28px;
  border-top:1px solid var(--line);
  background:#fcfdfd;
}

.mkx-actions button {
  min-height:48px;
  padding:10px 18px;
  border-radius:13px;
  font-weight:800;
  cursor:pointer;
}

.mkx-secondary {
  border:1px solid var(--line);
  background:#fff;
  color:var(--teal);
}

.mkx-primary {
  margin-left:auto;
  border:0;
  background:var(--navy);
  color:#fff;
}

.mkx-primary:disabled {
  opacity:.65;
  cursor:wait;
}

.mkx-hp {
  position:absolute;
  left:-9999px;
  width:1px;
  height:1px;
  overflow:hidden;
}

@media (max-width:767px) {
  .mkx-page {
    padding:18px 0 96px;
  }

  .mkx-shell {
    width:calc(100% - 20px)!important;
  }

  .mkx-back {
    margin-bottom:18px;
    font-size:13px;
  }

  .mkx-title h1 {
    font-size:31px;
  }

  .mkx-title p {
    font-size:14px;
  }

  .mkx-eventbar {
    grid-template-columns:1fr;
  }

  .mkx-eventbar > div {
    padding:11px 13px;
  }

  .mkx-card {
    border-radius:18px;
  }

  .mkx-progress {
    justify-content:space-between;
    gap:3px;
    padding:12px 10px;
  }

  .mkx-progress em {
    display:none;
  }

  .mkx-progress i {
    flex:1;
    width:auto;
  }

  .mkx-progress b {
    width:27px;
    height:27px;
  }

  .mkx-step {
    padding:18px 15px 22px;
  }

  .mkx-step-head h2 {
    font-size:22px;
  }

  .mkx-step-head p {
    font-size:13px;
  }

  .mkx-segment {
    width:100%;
  }

  .mkx-segment span {
    min-width:0;
    font-size:13px;
  }

  .mkx-fields,
  .mkx-payments {
    grid-template-columns:1fr;
  }

  .mkx-amounts {
    grid-template-columns:1fr 1fr;
  }

  .mkx-confirm > div {
    grid-template-columns:1fr;
    gap:3px;
  }

  .mkx-confirm strong {
    text-align:left;
  }

  .mkx-actions {
    position:sticky;
    bottom:0;
    z-index:10;
    padding:10px;
    background:rgba(255,255,255,.98);
    backdrop-filter:blur(12px);
  }

  .mkx-actions button {
    min-height:50px;
  }

  .mkx-primary {
    flex:1;
  }
}

/* PERDAMI REGISTRATION WIZARD 10E */
.pd-regwiz-stepper{
  display:grid;
  grid-template-columns:auto minmax(24px,1fr) auto minmax(24px,1fr) auto;
  align-items:center;
  gap:12px;
  margin:0 0 28px;
  padding:17px 18px;
  border:1px solid #dce6eb;
  border-radius:18px;
  background:#f8fbfc
}
.pd-regwiz-step{
  display:flex;
  min-width:0;
  align-items:center;
  gap:10px;
  opacity:.55
}
.pd-regwiz-step.is-active,
.pd-regwiz-step.is-complete{
  opacity:1
}
.pd-regwiz-step__num{
  display:flex;
  width:38px;
  height:38px;
  flex:0 0 38px;
  align-items:center;
  justify-content:center;
  border:1px solid #cddce3;
  border-radius:999px;
  background:#fff;
  font-size:16px;
  font-weight:800;
  color:#5c7380
}
.pd-regwiz-step.is-active .pd-regwiz-step__num{
  border-color:#0d8793;
  background:#0d8793;
  color:#fff;
  box-shadow:0 7px 18px rgba(13,135,147,.2)
}
.pd-regwiz-step.is-complete .pd-regwiz-step__num{
  border-color:#b5ded9;
  background:#e9f8f5;
  color:#126c66
}
.pd-regwiz-step strong{
  display:block;
  font-size:15px;
  line-height:1.3;
  color:#18394b
}
.pd-regwiz-step small{
  display:block;
  margin-top:2px;
  font-size:13px;
  line-height:1.3;
  color:#758894
}
.pd-regwiz-stepper__line{
  height:1px;
  background:#d8e4e8
}
.pd-regwiz-panel[hidden],
.pd-regscan[hidden],
.pd-regscan__selected[hidden],
.pd-regscan__quality[hidden],
.pd-regscan__progress[hidden],
.pd-regscan__image[hidden],
.pd-regscan__placeholder[hidden]{
  display:none!important
}
.pd-regwiz-section-head{
  margin-bottom:20px
}
.pd-regwiz-section-head>span{
  display:block;
  margin-bottom:5px;
  font-size:14px;
  line-height:1.4;
  font-weight:760;
  color:#0d808c
}
.pd-regwiz-section-head h2{
  margin:0;
  font-size:25px;
  line-height:1.25;
  font-weight:820;
  color:#102f43
}
.pd-regwiz-section-head p{
  max-width:800px;
  margin:7px 0 0;
  font-size:16px;
  line-height:1.65;
  color:#617784
}
.pd-regwiz-method-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:14px
}
.pd-regwiz-method{
  display:flex;
  min-height:172px;
  padding:21px;
  flex-direction:column;
  align-items:flex-start;
  gap:8px;
  border:1px solid #d8e4e9;
  border-radius:18px;
  background:#fff;
  text-align:left;
  cursor:pointer;
  transition:border-color .18s ease,background .18s ease,box-shadow .18s ease,transform .18s ease
}
.pd-regwiz-method:hover{
  transform:translateY(-2px);
  border-color:#92c4cc
}
.pd-regwiz-method.is-selected{
  border:2px solid #0e8592;
  background:#effafa;
  box-shadow:0 12px 28px rgba(13,126,140,.1)
}
.pd-regwiz-method__icon{
  display:flex;
  min-width:46px;
  height:38px;
  padding:0 10px;
  align-items:center;
  justify-content:center;
  border-radius:10px;
  background:#eef5f7;
  font-size:15px;
  font-weight:850;
  color:#0d7180
}
.pd-regwiz-method strong{
  margin-top:3px;
  font-size:19px;
  line-height:1.35;
  color:#13374a
}
.pd-regwiz-method>span:last-child{
  font-size:15px;
  line-height:1.6;
  color:#637a87
}
.pd-regwiz-footer{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-top:24px;
  padding-top:20px;
  border-top:1px solid #e3eaed
}
.pd-regwiz-footer--end{
  justify-content:flex-end
}
.pd-regwiz-next,
.pd-regwiz-submit,
.pd-regwiz-back{
  min-height:48px;
  padding:0 20px;
  border-radius:13px;
  font-size:16px;
  line-height:1;
  font-weight:780;
  transition:opacity .17s ease,transform .17s ease,box-shadow .17s ease
}
.pd-regwiz-next,
.pd-regwiz-submit{
  border:1px solid #0d7e8b;
  background:#0d7e8b;
  color:#fff;
  box-shadow:0 8px 20px rgba(13,126,139,.16)
}
.pd-regwiz-next:not(:disabled):hover,
.pd-regwiz-submit:hover{
  transform:translateY(-1px)
}
.pd-regwiz-next:disabled{
  opacity:.42;
  cursor:not-allowed
}
.pd-regwiz-back{
  border:1px solid #d4e0e5;
  background:#fff;
  color:#294b5c
}
.pd-regscan{
  margin-bottom:22px;
  padding:20px;
  border:1px solid #dbe7eb;
  border-radius:19px;
  background:#f9fcfc
}
.pd-regscan__head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:20px;
  margin-bottom:14px
}
.pd-regscan__eyebrow{
  display:block;
  margin-bottom:4px;
  font-size:14px;
  font-weight:760;
  color:#0d818d
}
.pd-regscan__head h3{
  margin:0;
  font-size:21px;
  line-height:1.3;
  font-weight:820;
  color:#12364a
}
.pd-regscan__head p{
  max-width:720px;
  margin:6px 0 0;
  font-size:15px;
  line-height:1.6;
  color:#627987
}
.pd-regscan__badge{
  flex:0 0 auto;
  padding:8px 11px;
  border-radius:999px;
  background:#e7f7f4;
  font-size:14px;
  font-weight:760;
  color:#0c746d
}
.pd-regscan__tips{
  display:flex;
  flex-wrap:wrap;
  gap:5px 12px;
  margin-bottom:16px;
  padding:11px 13px;
  border-radius:12px;
  background:#eef6f8;
  font-size:14px;
  line-height:1.5;
  color:#5c7481
}
.pd-regscan__tips strong{
  color:#284a5b
}
.pd-regscan__tips span:not(:last-child)::after{
  content:" /";
  margin-left:10px;
  color:#a2b4bc
}
.pd-regscan__grid{
  display:grid;
  grid-template-columns:minmax(0,1.05fr) minmax(280px,.95fr);
  gap:16px
}
.pd-regscan__drop{
  position:relative;
  display:flex;
  min-height:156px;
  padding:20px;
  align-items:center;
  justify-content:center;
  flex-direction:column;
  gap:8px;
  border:1.5px dashed #158b9a;
  border-radius:16px;
  background:#f8fcfd;
  text-align:center;
  cursor:pointer;
  transition:background .18s ease,transform .18s ease
}
.pd-regscan__drop:hover{
  background:#f1fafb;
  transform:translateY(-1px)
}
.pd-regscan__drop input{
  position:absolute;
  width:1px;
  height:1px;
  overflow:hidden;
  opacity:0;
  pointer-events:none
}
.pd-regscan__drop strong{
  font-size:18px;
  line-height:1.35;
  color:#12364a
}
.pd-regscan__drop span{
  font-size:15px;
  line-height:1.45;
  color:#6b818d
}
.pd-regscan__selected{
  margin-top:10px;
  padding:10px 12px;
  border-radius:11px;
  background:#eaf8f1
}
.pd-regscan__selected strong{
  display:block;
  overflow:hidden;
  font-size:15px;
  color:#1f6744;
  text-overflow:ellipsis;
  white-space:nowrap
}
.pd-regscan__selected span{
  display:block;
  margin-top:2px;
  font-size:13px;
  color:#587668
}
.pd-regscan__quality{
  margin-top:10px;
  padding:10px 12px;
  border-radius:11px;
  font-size:14px;
  line-height:1.5
}
.pd-regscan__quality[data-tone="good"]{
  background:#eaf8f1;
  color:#246b45
}
.pd-regscan__quality[data-tone="warning"]{
  background:#fff6e3;
  color:#805e19
}
.pd-regscan__actions{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top:12px
}
.pd-regscan__read,
.pd-regscan__clear{
  min-height:46px;
  padding:0 17px;
  border-radius:12px;
  font-size:16px;
  font-weight:780
}
.pd-regscan__read{
  border:1px solid #0b8291;
  background:#0b8291;
  color:#fff
}
.pd-regscan__read:disabled{
  opacity:.4;
  cursor:not-allowed
}
.pd-regscan__clear{
  border:1px solid #d4e1e6;
  background:#fff;
  color:#294b5d
}
.pd-regscan__preview{
  display:flex;
  min-height:235px;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  border:1px solid #d7e3e8;
  border-radius:16px;
  background:#edf4f6
}
.pd-regscan__placeholder{
  display:flex;
  padding:24px;
  flex-direction:column;
  gap:7px;
  text-align:center
}
.pd-regscan__placeholder strong{
  font-size:18px;
  color:#244657
}
.pd-regscan__placeholder span{
  font-size:15px;
  line-height:1.5;
  color:#6d818c
}
.pd-regscan__image{
  display:block;
  width:100%;
  max-height:320px;
  object-fit:contain
}
.pd-regscan__progress{
  margin-top:14px
}
.pd-regscan__progress-track{
  height:8px;
  overflow:hidden;
  border-radius:999px;
  background:#dfe9ed
}
.pd-regscan__progress-track span{
  display:block;
  width:0;
  height:100%;
  border-radius:999px;
  background:#0b8291;
  transition:width .2s ease
}
.pd-regscan__progress>span{
  display:block;
  margin-top:6px;
  font-size:14px;
  color:#637985
}
.pd-regscan__status{
  margin-top:13px;
  padding:11px 13px;
  border-radius:11px;
  font-size:15px;
  line-height:1.5
}
.pd-regscan__status[data-tone="neutral"]{
  background:#eef3f5;
  color:#536b79
}
.pd-regscan__status[data-tone="ready"],
.pd-regscan__status[data-tone="working"]{
  background:#eaf6f9;
  color:#17697a
}
.pd-regscan__status[data-tone="success"]{
  background:#eaf8f1;
  color:#236944
}
.pd-regscan__status[data-tone="warning"]{
  background:#fff6e3;
  color:#805e19
}
.pd-regscan__status[data-tone="error"]{
  background:#fff0f0;
  color:#9b3636
}
.pd-regwiz-fields{
  display:grid;
  gap:17px;
  padding:20px;
  border:1px solid #e0e8ec;
  border-radius:18px;
  background:#fff
}
.pd-regwiz-fields__head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:16px;
  padding-bottom:15px;
  border-bottom:1px solid #e7ecef
}
.pd-regwiz-fields__head span{
  display:block;
  font-size:14px;
  font-weight:740;
  color:#0e808b
}
.pd-regwiz-fields__head h3{
  margin:3px 0 0;
  font-size:20px;
  line-height:1.35;
  font-weight:810;
  color:#17394b
}
.pd-regwiz-mode-chip{
  flex:0 0 auto;
  padding:8px 11px;
  border-radius:999px;
  background:#eef6f7;
  font-size:14px;
  font-weight:740;
  color:#38606f
}
.pd-regwiz-label{
  display:block;
  margin-bottom:7px;
  font-size:15px;
  line-height:1.4;
  font-weight:720;
  color:#12364a
}
.pd-regwiz-field-help{
  display:block;
  margin-top:6px;
  font-size:13px;
  line-height:1.45;
  color:#748894
}
.pd-regwiz-field-help[data-valid="false"]{
  color:#8b5e18
}
.pd-regwiz-review{
  overflow:hidden;
  border:1px solid #dce6eb;
  border-radius:18px;
  background:#fff
}
.pd-regwiz-review__method{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding:15px 18px;
  background:#f0f8f9
}
.pd-regwiz-review__method span{
  font-size:14px;
  color:#647a86
}
.pd-regwiz-review__method strong{
  font-size:15px;
  color:#12394c
}
.pd-regwiz-review__grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr))
}
.pd-regwiz-review__item{
  min-width:0;
  padding:16px 18px;
  border-top:1px solid #e6ecef
}
.pd-regwiz-review__item:nth-child(odd){
  border-right:1px solid #e6ecef
}
.pd-regwiz-review__item span{
  display:block;
  margin-bottom:5px;
  font-size:13px;
  color:#778b96
}
.pd-regwiz-review__item strong{
  display:block;
  overflow-wrap:anywhere;
  font-size:16px;
  line-height:1.5;
  color:#17394b
}
.pd-regwiz-consent{
  margin-top:16px;
  padding:14px 16px;
  border-radius:13px;
  background:#f4f8f9;
  font-size:14px;
  line-height:1.65;
  color:#617784
}
@media (max-width:860px){
  .pd-regwiz-stepper{
    grid-template-columns:1fr;
    gap:8px
  }
  .pd-regwiz-stepper__line{
    display:none
  }
  .pd-regwiz-step{
    display:none
  }
  .pd-regwiz-step.is-active{
    display:flex
  }
  .pd-regwiz-method-grid,
  .pd-regscan__grid,
  .pd-regwiz-review__grid{
    grid-template-columns:1fr
  }
  .pd-regwiz-review__item:nth-child(odd){
    border-right:0
  }
  .pd-regwiz-fields__head,
  .pd-regscan__head{
    flex-direction:column
  }
  .pd-regwiz-footer{
    align-items:stretch;
    flex-direction:column-reverse
  }
  .pd-regwiz-next,
  .pd-regwiz-submit,
  .pd-regwiz-back{
    width:100%
  }
}


/* =========================================================
   PERDAMI PUBLIC FORMS R5
   Registration + Support Checkout consistency layer
   ========================================================= */

:root{
  --pf-navy:#0b4d6e;
  --pf-navy-strong:#073f5c;
  --pf-teal:#0b8f83;
  --pf-teal-hover:#087b73;
  --pf-bg:#f5f8fb;
  --pf-card:#fff;
  --pf-text:#17243d;
  --pf-muted:#718198;
  --pf-line:#e1e9ef;
  --pf-success:#0ca678;
  --pf-warning:#d98a12;
  --pf-danger:#d94c5c;
  --pf-shadow:0 10px 30px rgba(20,45,70,.07);
}

body.pd-registration-page .site-main,
body.pd-payment-page .site-main{
  background:var(--pf-bg);
}

body.pd-registration-page .site-main > section{
  background:var(--pf-bg)!important;
  padding:34px 0 64px;
}

body.pd-registration-page .site-main > section > div{
  width:min(1240px,calc(100% - 40px));
  max-width:none!important;
  margin:0 auto!important;
  padding:0!important;
}

body.pd-registration-page .site-main > section > div > a{
  display:inline-flex!important;
  align-items:center;
  gap:7px;
  color:var(--pf-teal)!important;
  font-size:14px!important;
  font-weight:700!important;
  text-decoration:none;
}

body.pd-registration-page .site-main > section > div > div{
  display:grid!important;
  grid-template-columns:minmax(0,1fr) 350px!important;
  gap:22px!important;
  align-items:start;
  margin-top:22px!important;
}

body.pd-registration-page .site-main > section > div > div > div:first-child{
  min-width:0;
  border:1px solid var(--pf-line)!important;
  border-radius:20px!important;
  background:var(--pf-card)!important;
  padding:28px!important;
  box-shadow:var(--pf-shadow);
}

body.pd-registration-page .site-main > section > div > div > div:first-child > span:first-child{
  display:inline-block;
  color:var(--pf-teal)!important;
  font-size:12px!important;
  font-weight:750!important;
  letter-spacing:.08em;
  text-transform:uppercase;
}

body.pd-registration-page .site-main h1{
  margin:8px 0 0!important;
  color:var(--pf-text)!important;
  font-size:clamp(27px,3vw,36px)!important;
  line-height:1.16!important;
  letter-spacing:-.035em!important;
  font-weight:700!important;
}

body.pd-registration-page .site-main h1 + p{
  margin:10px 0 0!important;
  color:var(--pf-muted)!important;
  font-size:15px!important;
  line-height:1.7!important;
}

body.pd-registration-page [class*="amber"]{
  margin-top:22px!important;
  border:1px solid #f3d6a1!important;
  border-radius:14px!important;
  background:#fff9ed!important;
  padding:16px 18px!important;
  color:#855d14!important;
}

body.pd-registration-page [class*="amber"] strong{
  display:block;
  color:#7a5310!important;
  font-size:15px!important;
  font-weight:700!important;
}

body.pd-registration-page [class*="amber"] p{
  margin:5px 0 0!important;
  color:#8a681f!important;
  font-size:14px!important;
  line-height:1.6!important;
}

body.pd-registration-page aside{
  min-width:0;
}

body.pd-registration-page aside > div{
  position:sticky!important;
  top:92px!important;
  display:grid!important;
  gap:14px!important;
}

body.pd-registration-page aside > div > div{
  border:1px solid var(--pf-line)!important;
  border-radius:18px!important;
  background:#fff!important;
  padding:20px!important;
  box-shadow:0 8px 24px rgba(20,45,70,.05);
}

body.pd-registration-page aside h2,
body.pd-registration-page aside h3{
  color:var(--pf-text)!important;
  margin:5px 0 0!important;
}

body.pd-registration-page aside p,
body.pd-registration-page aside span{
  color:var(--pf-muted);
}

body.pd-registration-page aside [class*="border-t"]{
  border-top:1px solid var(--pf-line)!important;
  padding-top:15px!important;
  margin-top:15px!important;
}

body.pd-registration-page aside [class*="space-y-4"] > * + *{
  margin-top:13px;
}

body.pd-registration-page aside [class*="space-y-3"] > * + *{
  margin-top:9px;
}

.pd-registration-input{
  width:100%;
  min-height:47px;
  border:1px solid #d6e0e7;
  border-radius:11px;
  background:#fff;
  padding:11px 13px;
  color:var(--pf-text);
  font:inherit;
  outline:none;
  transition:border-color .16s ease,box-shadow .16s ease;
}
textarea.pd-registration-input{
  min-height:108px;
  resize:vertical;
}
.pd-registration-input:focus{
  border-color:#69b7ae;
  box-shadow:0 0 0 4px rgba(11,143,131,.09);
}

body.pd-registration-page .grid{display:grid}
body.pd-registration-page .gap-4{gap:16px}
body.pd-registration-page .sm\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}

body.pd-payment-page .mkx-page{
  background:var(--pf-bg)!important;
  padding-top:32px;
  padding-bottom:64px;
}
body.pd-payment-page .mkx-shell{
  width:min(1180px,calc(100% - 40px));
  max-width:none;
}
body.pd-payment-page .mkx-title h1{
  color:var(--pf-text);
}
body.pd-payment-page .mkx-card,
body.pd-payment-page .mkx-eventbar{
  box-shadow:var(--pf-shadow);
}
body.pd-payment-page .mkx-hp{
  position:absolute!important;
  width:1px!important;
  height:1px!important;
  overflow:hidden!important;
  opacity:0!important;
  pointer-events:none!important;
}
body.pd-payment-page input[name="website"]{
  display:none!important;
}

.actions .btn.edit-action{
  border-color:#b9ded9;
  background:#eef9f7;
  color:#087b73;
  font-weight:700;
}
.actions .btn.edit-action:hover{
  border-color:#8fcac2;
  background:#e4f6f3;
}
.actions .btn.manage-action{
  color:#3f5871;
}

@media(max-width:900px){
  body.pd-registration-page .site-main > section{
    padding-top:24px;
  }
  body.pd-registration-page .site-main > section > div{
    width:min(100% - 28px,1240px);
  }
  body.pd-registration-page .site-main > section > div > div{
    grid-template-columns:1fr!important;
  }
  body.pd-registration-page .site-main > section > div > div > div:first-child{
    padding:20px!important;
  }
  body.pd-registration-page aside > div{
    position:static!important;
  }
  body.pd-registration-page .sm\:grid-cols-2{
    grid-template-columns:1fr;
  }
}