.pdb-form{
  --teal:#00A19C;
  --teal-dark:#00918C;
  --teal-darker:#00615E;
  --teal-tint:#E6F6F5;
  --teal-tint-2:#CCECEB;
  --teal-focus-border:#80D0CE;
  --teal-focus-ring:rgba(0,161,156,.25);

  --purple:#6C4196;
  --purple-dark:#5A3480;
  --purple-alt:#763F98;

  --ink:#343A40;
  --ink-soft:#5A6169;
  --muted:#6C757D;
  --line:#DEE2E6;
  --line-input:#CED4DA;
  --surface:#FFFFFF;
  --surface-sunken:#F8F9FA;
  --page:#F4F6F7;

  --danger:#DC3545;
  --danger-tint:#FDF2F3;
  --success:#1A8A4F;

  --r-sm:6px;
  --r:10px;
  --r-lg:16px;
  --r-pill:800px;

  --shadow:0 1px 2px rgba(16,24,40,.04),0 8px 28px rgba(16,24,40,.07);
  --shadow-sm:0 1px 2px rgba(16,24,40,.06);

  --font:"museo-sans","Museo Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",
         Roboto,"Helvetica Neue",Arial,sans-serif;
}

/* ---------- 2. Shell --------------------------------------------------- */
/* The FORM ITSELF is the card. Webform gives us no wrapper div to hook a card
   onto, so styling .pdb-form directly is what produces the panel on the live
   site — and it keeps the preview and Drupal structurally identical.        */
.pdb-form{
  font-family:var(--font);
  font-size:16px!important;
  font-weight:300;
  line-height:1.6!important;
  color:var(--ink);
  max-width:920px;
  margin:0 auto;
  -webkit-font-smoothing:antialiased;

  position:relative;
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  box-shadow:var(--shadow);
  padding:34px clamp(18px,4vw,44px) 30px;
  overflow:hidden;
}
.pdb-form::before{               /* teal → purple accent rail */
  content:"";
  position:absolute;
  inset:0 0 auto 0;
  height:4px;
  background:linear-gradient(90deg,var(--teal) 0%,var(--teal) 60%,var(--purple) 100%);
}
.pdb-form *,.pdb-form *::before,.pdb-form *::after{box-sizing:border-box}

/* ---------- 2b. VERTICAL RHYTHM ---------------------------------------
   Webform stacks every element as a .js-form-item, and puts .mb-3 on many of
   them. Both must carry the SAME spacing value: zeroing .mb-3 with !important
   while spacing .js-form-item normally makes !important win and collapses the
   whole form into one flush block. Set both to the same number.          */
.pdb-form .mb-3{margin-bottom:22px!important}
.pdb-form .js-form-item,
.pdb-form .form-item,
.pdb-form .js-webform-type-fieldset,
.pdb-form .js-webform-type-webform-multiple,
.pdb-form .webform-computed{margin:0 0 22px}

/* Markup-only elements carry their own internal spacing — no extra gap. */
.pdb-form .js-form-type-webform-markup{margin-bottom:0!important}

/* Nested items must not double-space. */
.pdb-form .webform-multiple-table .js-form-item,
.pdb-form td .js-form-item,
.pdb-form th .js-form-item,
.pdb-form .form-check .js-form-item{margin-bottom:0!important}

/* Items grouped inside a fieldset get a tighter rhythm. */
.pdb-form .fieldset-wrapper > .js-form-item{margin-bottom:18px!important}
.pdb-form .fieldset-wrapper > .js-form-item:last-child{margin-bottom:0!important}

/* The wizard page wrapper itself adds nothing. */
.pdb-form > .js-form-wrapper.form-wrapper,
.pdb-form > .form-wrapper{margin-bottom:0!important}

/* ---------- 2c. TWO-COLUMN LAYOUT (live Drupal) ------------------------
   Webform renders a wizard page as a flat list of elements inside a single
   .js-form-wrapper, with no grouping divs — so there is nothing to hang a
   grid off except that wrapper itself. Making it the grid, defaulting every
   child to full width, then opting SHORT fields down to one column gives the
   two-column layout without touching the YAML.

   `:not(.form-actions)` matters: the actions bar is also a direct-child
   .js-form-wrapper and must stay a flex row, not become a grid cell.

   Field names come from Webform's own per-element classes
   (js-form-item-<element-key>), verified present on the live form.        */
.pdb-form > .js-form-wrapper:not(.form-actions){
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:22px 26px;
  align-items:start;
}
/* default: full width, and let the grid gap own the spacing */
.pdb-form > .js-form-wrapper:not(.form-actions) > *{
  grid-column:1/-1;
  margin-bottom:0!important;
}
/* short fields that read better side by side */
.pdb-form .js-form-item-identity-card-no,
.pdb-form .js-form-item-date-of-birth,
.pdb-form .js-form-item-age,
.pdb-form .js-form-item-birthplace,
.pdb-form .js-form-item-email,
.pdb-form .js-form-item-highest-academic,
.pdb-form .js-form-item-mobile-no,
.pdb-form .js-form-item-home-tel-no,
.pdb-form .js-form-item-current-account,
.pdb-form .js-form-item-savings-account,
.pdb-form .js-form-item-passport-photo,
.pdb-form .js-form-item-identity-card-copy,
.pdb-form .js-form-item-race-others,
.pdb-form .js-form-item-religion-others,
.pdb-form .js-form-item-spoken-language-others{
  grid-column:span 1!important;
}
/* the three preferred-state selects sit inside a fieldset — grid that too */
.pdb-form .js-webform-type-fieldset .fieldset-wrapper{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
  gap:18px 26px;
}
.pdb-form .js-webform-type-fieldset .fieldset-wrapper > .js-form-item{
  margin-bottom:0!important;
}

@media(max-width:720px){
  .pdb-form > .js-form-wrapper:not(.form-actions){grid-template-columns:1fr}
  .pdb-form > .js-form-wrapper:not(.form-actions) > *{grid-column:1/-1!important}
  .pdb-form .js-webform-type-fieldset .fieldset-wrapper{grid-template-columns:1fr}
}

/* ---------- 3. Progress tracker --------------------------------------- */
/* Replaces the default blue-circle tracker with a brand teal one that
   shows a tick for completed steps and a ring for the current step.       */
.pdb-form .webform-progress{margin:0 0 34px}

.pdb-form .progress-tracker{
  display:flex;
  list-style:none;
  margin:0;
  padding:0;
  counter-reset:pdbstep;
  gap:0;
}
.pdb-form .progress-step{
  flex:1 1 0;
  position:relative;
  text-align:center;
  padding:0;
  min-width:0;
}
/* connector line */
.pdb-form .progress-step::before{
  content:"";
  position:absolute;
  top:15px;
  left:50%;
  width:100%;
  height:3px;
  background:var(--line);
  border-radius:2px;
}
.pdb-form .progress-step:last-child::before{display:none}
.pdb-form .progress-step.is-complete::before{background:var(--teal)}

/* marker */
.pdb-form .progress-marker{
  position:relative;
  z-index:1;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:32px;height:32px;
  border-radius:50%;
  background:var(--surface);
  border:2px solid var(--line);
  color:var(--muted);
  font-size:13.5px!important;
  font-weight:700!important;
  line-height:1;
  counter-increment:pdbstep;
  transition:background .2s,border-color .2s,color .2s,box-shadow .2s;
}
.pdb-form .progress-marker::before{
  content:counter(pdbstep);
  background:none!important;
  color:inherit!important;
  width:auto!important;height:auto!important;
  border-radius:0!important;
  font:inherit;
}
.pdb-form .progress-marker::after{display:none!important}

.pdb-form .progress-step.is-active .progress-marker{
  background:var(--teal);
  border-color:var(--teal);
  color:#fff;
  box-shadow:0 0 0 4px var(--teal-focus-ring);
}
.pdb-form .progress-step.is-complete .progress-marker{
  background:var(--teal);
  border-color:var(--teal);
  color:#fff;
}
.pdb-form .progress-step.is-complete .progress-marker::before{
  content:"\2713";               /* tick for finished steps */
  font-size:15px;
}

.pdb-form .progress-text{
  display:block;
  margin-top:9px;
  padding:0 4px;
  font-size:12.5px!important;
  font-weight:400!important;
  line-height:1.35!important;
  color:var(--muted)!important;
}
.pdb-form .progress-step.is-active .progress-text{
  color:var(--ink)!important;
  font-weight:700!important;
}
.pdb-form .progress-title{display:none}   /* hide Webform's duplicate title */

/* ---------- 4. Step header -------------------------------------------- */
/* (the card is .pdb-form itself — see section 2) */

.pdb-form .pdb-eyebrow{
  font-size:11.5px!important;
  font-weight:700!important;
  letter-spacing:1.6px;
  text-transform:uppercase;
  color:var(--teal-dark)!important;
  margin:0 0 6px;
}
.pdb-form .pdb-step-title{
  font-size:clamp(23px,3.4vw,29px)!important;
  font-weight:400!important;
  line-height:1.22!important;
  color:var(--ink)!important;
  margin:0;
  letter-spacing:-.2px;
}
.pdb-form .pdb-step-title .pdb-bm{
  display:block;
  font-size:15px!important;
  margin-top:3px;
}
.pdb-form .pdb-step-intro{
  margin:12px 0 0;
  color:var(--ink-soft);
  font-size:15px!important;
}
.pdb-form .pdb-card-head{
  padding-bottom:22px;
  border-bottom:1px solid var(--line);
  margin-bottom:26px;
}

/* Bilingual secondary (Malay) text — used everywhere as <span class="pdb-bm"> */
.pdb-form .pdb-bm{
  color:var(--muted)!important;
  font-weight:300!important;
}

/* ---------- 5. Section grouping --------------------------------------- */
.pdb-form .pdb-section{margin:0 0 30px}
.pdb-form .pdb-section:last-child{margin-bottom:0}
.pdb-form .pdb-section-title{
  display:flex;align-items:baseline;gap:9px;flex-wrap:wrap;
  font-size:17px!important;
  font-weight:700!important;
  color:var(--ink)!important;
  margin:0 0 4px;
  padding-bottom:9px;
  border-bottom:1px solid var(--line);
}
.pdb-form .pdb-section-title .pdb-bm{font-size:14.5px!important}
.pdb-form .pdb-section-note{
  font-size:13.5px!important;
  color:var(--muted);
  margin:8px 0 0;
}

/* ---------- 6. Field grid --------------------------------------------- */
.pdb-form .pdb-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:20px 26px;
  margin-top:18px;
}
.pdb-form .pdb-grid--3{grid-template-columns:repeat(3,minmax(0,1fr))}
.pdb-form .pdb-grid--1,
.pdb-form .pdb-grid .pdb-span-all{grid-column:1/-1}
@media(max-width:720px){
  .pdb-form .pdb-grid,
  .pdb-form .pdb-grid--3{grid-template-columns:1fr}
}

/* ---------- 7. Labels + inputs ---------------------------------------- */
/* (spacing for .js-form-item lives in section 2b) */

.pdb-form label,
.pdb-form .fieldset-legend{
  display:block;
  font-size:14px!important;
  font-weight:700!important;
  line-height:1.4!important;
  color:var(--ink)!important;
  margin:0 0 7px!important;
}
.pdb-form label .pdb-bm{
  font-size:13px!important;
  font-weight:300!important;
}
/* required asterisk — Webform adds .form-required */
.pdb-form label.form-required::after,
.pdb-form .fieldset-legend.form-required::after{
  content:" *";
  color:var(--danger);
  font-weight:700;
}

.pdb-form .form-control,
.pdb-form .form-select,
.pdb-form input[type=text],
.pdb-form input[type=email],
.pdb-form input[type=tel],
.pdb-form input[type=number],
.pdb-form input[type=date],
.pdb-form select,
.pdb-form textarea{
  display:block;
  width:100%;
  min-height:46px;
  padding:11px 14px;
  font-family:var(--font);
  font-size:15.5px!important;
  font-weight:300;
  line-height:1.45;
  color:var(--ink);
  background-color:var(--surface);
  border:1px solid var(--line-input);
  border-radius:var(--r);
  box-shadow:none;
  transition:border-color .16s ease,box-shadow .16s ease,background-color .16s ease;
  appearance:none;
  -webkit-appearance:none;
}
.pdb-form textarea,
.pdb-form textarea.form-control{
  min-height:104px;
  line-height:1.6;
  resize:vertical;
}
.pdb-form select,
.pdb-form .form-select{
  padding-right:42px;
  background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%236C757D' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
  background-repeat:no-repeat;
  background-position:right 15px center;
  background-size:14px 12px;
  cursor:pointer;
}
.pdb-form .form-control::placeholder,
.pdb-form textarea::placeholder{color:#9AA1A9;font-weight:300}

.pdb-form .form-control:hover,
.pdb-form select:hover,
.pdb-form textarea:hover{border-color:#B4BCC4}

.pdb-form .form-control:focus,
.pdb-form .form-select:focus,
.pdb-form select:focus,
.pdb-form textarea:focus,
.pdb-form input:focus{
  outline:0;
  border-color:var(--teal-focus-border);
  box-shadow:0 0 0 4px var(--teal-focus-ring);
}

/* read-only / auto-filled fields */
.pdb-form .form-control[readonly],
.pdb-form input[readonly]{
  background-color:var(--teal-tint);
  border-color:var(--teal-tint-2);
  color:var(--teal-darker);
  font-weight:400;
  cursor:default;
}
.pdb-form .form-control[readonly]:focus{box-shadow:none;border-color:var(--teal-tint-2)}

/* description / helper text */
.pdb-form .description,
.pdb-form .form-item .description,
.pdb-form .webform-element-description{
  font-size:12.5px!important;
  line-height:1.5!important;
  color:var(--muted)!important;
  margin-top:6px;
}

/* auto-filled badge (inserted by webform-custom.js as a sibling after the
   label, so the required asterisk stays glued to the label text) */
.pdb-form .pdb-auto{
  display:inline-flex;align-items:center;gap:5px;
  margin:0 0 7px;
  padding:2px 9px;
  border-radius:var(--r-pill);
  background:var(--teal-tint);
  color:var(--teal-darker);
  font-size:10.5px!important;
  font-weight:700!important;
  letter-spacing:.5px;
  text-transform:uppercase;
  vertical-align:middle;
}

/* ---------- 8. Radios & checkboxes as tappable chips ------------------ */
.pdb-form fieldset{
  border:0;margin:0;padding:0;min-width:0;
}
.pdb-form legend{
  float:none;width:auto;padding:0;margin:0;
  font-size:14px!important;
}
/* Live Webform DOM: each option is a .form-check that is ALSO a .js-form-item,
   sitting directly inside fieldset > .fieldset-wrapper. Making that wrapper the
   grid is what produces the chip layout on the real form.                   */
.pdb-form .pdb-options,
.pdb-form fieldset.radios--wrapper .fieldset-wrapper,
.pdb-form fieldset.checkboxes--wrapper .fieldset-wrapper,
.pdb-form .js-webform-type-radios .fieldset-wrapper,
.pdb-form .js-webform-type-checkboxes .fieldset-wrapper{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(190px,1fr));
  gap:10px;
}
/* grid gap owns the spacing — kill the per-item margin from section 2b */
.pdb-form .fieldset-wrapper > .form-check,
.pdb-form .fieldset-wrapper > .form-check:last-child{margin-bottom:0!important}

/* Yes/No pairs read better as two columns than as auto-fit thirds */
.pdb-form .pdb-options--2{grid-template-columns:repeat(2,minmax(0,1fr));max-width:420px}
.pdb-form .js-webform-type-radios .fieldset-wrapper:has(> .form-check:nth-child(2):last-child){
  grid-template-columns:repeat(2,minmax(0,1fr));
  max-width:440px;
}

.pdb-form .form-check{
  position:relative;
  display:flex;
  align-items:flex-start;
  gap:10px;
  margin:0;
  padding:12px 14px;
  border:1px solid var(--line-input);
  border-radius:var(--r);
  background:var(--surface);
  cursor:pointer;
  transition:border-color .15s,background-color .15s,box-shadow .15s;
  min-height:46px;
}
.pdb-form .form-check:hover{border-color:var(--teal-focus-border);background:var(--teal-tint)}
.pdb-form .form-check-input{
  flex:0 0 auto;
  width:19px;height:19px;
  margin:1px 0 0;
  accent-color:var(--teal);
  cursor:pointer;
}
.pdb-form .form-check-input:focus{
  outline:0;box-shadow:0 0 0 4px var(--teal-focus-ring)
}
.pdb-form .form-check-label{
  margin:0!important;
  font-size:14.5px!important;
  font-weight:400!important;
  line-height:1.4!important;
  cursor:pointer;
}
/* selected state — .is-checked is applied by webform-custom.js */
.pdb-form .form-check.is-checked{
  border-color:var(--teal);
  background:var(--teal-tint);
  box-shadow:inset 0 0 0 1px var(--teal);
}

/* Full-width declaration checkboxes (step 5) read better as plain rows */
.pdb-form .pdb-declare .form-check,
.pdb-form .pdb-declare.form-check{
  align-items:flex-start;
  padding:14px 16px;
  min-height:0;
}
.pdb-form .pdb-declare .form-check-label{font-size:14.5px!important;font-weight:300!important}
.pdb-form .pdb-declare .form-check-label strong{font-weight:700}

/* ---------- 9. Callout / markup blocks -------------------------------- */
.pdb-form .pdb-callout{
  background:var(--surface-sunken);
  border:1px solid var(--line);
  border-left:3px solid var(--teal);
  border-radius:var(--r-sm);
  padding:16px 18px;
  margin:18px 0;
  font-size:14px!important;
}
.pdb-form .pdb-callout--teal{background:var(--teal-tint);border-color:var(--teal-tint-2);border-left-color:var(--teal)}
.pdb-form .pdb-callout p:last-child{margin-bottom:0}
.pdb-form .pdb-callout p:first-child{margin-top:0}

.pdb-form ol,.pdb-form ul{padding-left:22px;margin:10px 0 18px}
.pdb-form ol li,.pdb-form ul li{margin-bottom:10px;font-size:14.5px!important;line-height:1.55!important}
.pdb-form ol li strong{font-weight:700}
.pdb-form ol ol{margin:8px 0 4px}

/* Numbered requirement cards (step 1) */
.pdb-form .pdb-reqs{list-style:none;padding:0;margin:14px 0 0;counter-reset:pdbreq;display:grid;gap:10px}
.pdb-form .pdb-reqs li{
  counter-increment:pdbreq;
  display:flex;gap:13px;align-items:flex-start;
  background:var(--surface-sunken);
  border:1px solid var(--line);
  border-radius:var(--r);
  padding:13px 16px;
  margin:0;
}
.pdb-form .pdb-reqs li::before{
  content:counter(pdbreq);
  flex:0 0 auto;
  width:24px;height:24px;
  border-radius:50%;
  background:var(--teal);
  color:#fff;
  font-size:12px;font-weight:700;
  display:grid;place-items:center;
  margin-top:1px;
}

/* ---------- 10. Repeatable tables (webform_custom_composite) ---------- */
.pdb-form .webform-multiple-table{margin:14px 0 0}
.pdb-form .webform-multiple-table table,
.pdb-form table.responsive-enabled,
.pdb-form .pdb-table{
  width:100%;
  border-collapse:separate;
  border-spacing:0;
  border:1px solid var(--line);
  border-radius:var(--r);
  overflow:hidden;
  font-size:14px!important;
}
.pdb-form .webform-multiple-table thead th,
.pdb-form .pdb-table thead th{
  background:var(--surface-sunken);
  color:var(--ink)!important;
  text-align:left;
  padding:11px 13px;
  font-size:12px!important;
  font-weight:700!important;
  letter-spacing:.4px;
  text-transform:uppercase;
  border-bottom:1px solid var(--line);
  white-space:nowrap;
}
.pdb-form .webform-multiple-table thead th .pdb-bm,
.pdb-form .pdb-table thead th .pdb-bm{
  display:block;text-transform:none;letter-spacing:0;
  font-size:11.5px!important;font-weight:300!important;
}
.pdb-form .webform-multiple-table tbody td,
.pdb-form .pdb-table tbody td{
  padding:9px 11px;
  border-bottom:1px solid #EEF0F2;
  vertical-align:middle;
}
.pdb-form .webform-multiple-table tbody tr:last-child td,
.pdb-form .pdb-table tbody tr:last-child td{border-bottom:0}
.pdb-form .webform-multiple-table tbody td .form-control,
.pdb-form .pdb-table tbody td .form-control,
.pdb-form .pdb-table tbody td input,
.pdb-form .pdb-table tbody td select{
  min-height:40px;
  padding:8px 11px;
  font-size:14.5px!important;
  border-radius:var(--r-sm);
}
/* drag handle / operations column */
.pdb-form .webform-multiple-table td.webform-multiple-table--operations,
.pdb-form .pdb-table td.pdb-ops{width:44px;text-align:center}

.pdb-form .pdb-rowdel{
  background:none;border:0;padding:6px;
  color:#AAB2BA;cursor:pointer;line-height:1;border-radius:var(--r-sm);
}
.pdb-form .pdb-rowdel:hover{color:var(--danger);background:var(--danger-tint)}

/* "ADD MORE +" — Webform renders it as an input/button.webform-multiple-add */
.pdb-form .webform-multiple-add input[type=submit],
.pdb-form .webform-multiple-add button,
.pdb-form .pdb-addmore{
  display:inline-flex;align-items:center;gap:7px;
  margin-top:12px;
  background:var(--surface)!important;
  color:var(--teal-dark)!important;
  border:1px dashed var(--teal)!important;
  border-radius:var(--r-pill)!important;
  padding:9px 20px!important;
  font-family:var(--font);
  font-size:13px!important;
  font-weight:700!important;
  letter-spacing:.5px;
  text-transform:uppercase;
  cursor:pointer;
  box-shadow:none!important;
  transition:background-color .15s,color .15s;
  width:auto!important;
  min-height:0!important;
}
.pdb-form .webform-multiple-add input[type=submit]:hover,
.pdb-form .pdb-addmore:hover{
  background:var(--teal)!important;
  color:#fff!important;
  border-style:solid!important;
}
/* hide Webform's "add N more items" number spinner — noisy */
.pdb-form .webform-multiple-add-items-number,
.pdb-form .webform-multiple-add-items-more{display:none!important}

/* ---------- 11. Computed total panel ---------------------------------- */
.pdb-form .pdb-total{
  margin-top:20px;
  background:var(--teal-tint);
  border:1px solid var(--teal-tint-2);
  border-radius:var(--r);
  padding:20px 22px;
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:14px;
  flex-wrap:wrap;
}
.pdb-form .pdb-total-label{
  font-size:15px!important;font-weight:700!important;color:var(--ink)!important;margin:0;
}
.pdb-form .pdb-total-value{
  font-size:clamp(28px,4.6vw,36px)!important;
  font-weight:800!important;
  color:var(--teal-darker)!important;
  line-height:1!important;
  font-variant-numeric:tabular-nums;
  letter-spacing:-.5px;
}
.pdb-form .pdb-total-note{
  flex-basis:100%;
  margin:0;
  font-size:13px!important;
  font-weight:700!important;
  display:flex;align-items:flex-start;gap:7px;
}
.pdb-form .pdb-total-warn{color:var(--danger)!important}
.pdb-form .pdb-total-ok{color:var(--success)!important}
/* Webform wraps computed output in .webform-computed — strip its chrome */
.pdb-form .webform-computed > label{display:none}
.pdb-form .webform-computed .webform-computed-wrapper{padding:0;border:0;background:none}

/* ---------- 12. File uploads ----------------------------------------- */
.pdb-form .form-managed-file,
.pdb-form .js-form-managed-file{
  display:block;
  border:1.5px dashed var(--line-input);
  border-radius:var(--r);
  background:var(--surface-sunken);
  padding:18px;
  transition:border-color .15s,background-color .15s;
}
.pdb-form .form-managed-file:hover,
.pdb-form .js-form-managed-file:hover{border-color:var(--teal);background:var(--teal-tint)}
.pdb-form input[type=file]{
  display:block;width:100%;
  font-size:14px!important;font-family:var(--font);
  color:var(--ink-soft);
  border:0;background:none;padding:0;min-height:0;
}
.pdb-form input[type=file]::file-selector-button{
  margin-right:12px;
  padding:9px 18px;
  border:0;border-radius:var(--r-pill);
  background:var(--purple);
  color:#fff;
  font-family:var(--font);
  font-size:13px;font-weight:700;
  cursor:pointer;
}
.pdb-form input[type=file]::file-selector-button:hover{background:var(--purple-dark)}
.pdb-form .form-managed-file .form-submit{   /* Webform's Upload/Remove buttons */
  margin-left:8px;
  padding:8px 16px!important;
  font-size:13px!important;
  border-radius:var(--r-pill)!important;
  background:var(--surface)!important;
  color:var(--ink)!important;
  border:1px solid var(--line-input)!important;
  min-height:0!important;
}
.pdb-form .file{font-size:14px!important}

/* ---------- 13. Action buttons --------------------------------------- */
.pdb-form .form-actions,
.pdb-form .webform-actions{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  margin-top:32px;
  padding-top:24px;
  border-top:1px solid var(--line);
  flex-wrap:wrap;
}

.pdb-form .form-actions .button,
.pdb-form .webform-button--next,
.pdb-form .webform-button--previous,
.pdb-form .webform-button--submit,
.pdb-form .form-submit,
.pdb-form .pdb-btn{
  /* neutralise Bootstrap's var-driven button skin */
  --bs-btn-bg:transparent;
  --bs-btn-border-color:transparent;
  --bs-btn-color:inherit;
  --bs-btn-padding-x:0;
  --bs-btn-padding-y:0;
  display:inline-flex;
  align-items:center;
  gap:9px;
  font-family:var(--font);
  font-size:15px!important;
  font-weight:700!important;
  line-height:1.2;
  padding:14px 32px!important;
  border-radius:var(--r-pill)!important;
  border:1px solid transparent!important;
  cursor:pointer;
  transition:background-color .16s,color .16s,border-color .16s,box-shadow .16s,transform .08s;
  text-decoration:none;
  min-height:0!important;
  width:auto!important;
  box-shadow:none;
}
/* primary: Next / Submit — Mesra purple pill */
.pdb-form .webform-button--next,
.pdb-form .webform-button--submit,
.pdb-form .pdb-btn--primary{
  background:var(--purple)!important;
  color:#fff!important;
  border-color:var(--purple)!important;
  box-shadow:0 1px 2px rgba(108,65,150,.28);
}
.pdb-form .webform-button--next:hover,
.pdb-form .webform-button--submit:hover,
.pdb-form .pdb-btn--primary:hover{
  background:var(--purple-dark)!important;
  border-color:var(--purple-dark)!important;
}
.pdb-form .webform-button--next:active,
.pdb-form .webform-button--submit:active,
.pdb-form .pdb-btn--primary:active{transform:translateY(1px)}
.pdb-form .webform-button--next:focus-visible,
.pdb-form .webform-button--submit:focus-visible,
.pdb-form .pdb-btn--primary:focus-visible{
  outline:0;box-shadow:0 0 0 4px rgba(108,65,150,.3)
}
/* secondary: Previous — quiet ghost */
.pdb-form .webform-button--previous,
.pdb-form .pdb-btn--ghost{
  background:var(--surface)!important;
  color:var(--ink)!important;
  border-color:var(--line-input)!important;
  order:-1;
}
.pdb-form .webform-button--previous:hover,
.pdb-form .pdb-btn--ghost:hover{
  background:var(--surface-sunken)!important;
  border-color:var(--muted)!important;
}
.pdb-form .pdb-btn[disabled],
.pdb-form .form-submit[disabled]{opacity:.5;cursor:not-allowed}

/* keep Submit on the right even when Previous is absent */
.pdb-form .form-actions > .webform-button--submit:only-child,
.pdb-form .form-actions > .webform-button--next:only-child{margin-left:auto}

/* ---------- 14. Validation ------------------------------------------- */
.pdb-form .form-control.error,
.pdb-form input.error,
.pdb-form select.error,
.pdb-form textarea.error,
.pdb-form .form-control[aria-invalid=true],
.pdb-form .pdb-invalid{
  border-color:var(--danger)!important;
  background:var(--danger-tint);
}
.pdb-form .form-control.error:focus,
.pdb-form .pdb-invalid:focus{box-shadow:0 0 0 4px rgba(220,53,69,.2)}

.pdb-form .pdb-error,
.pdb-form .form-item--error-message{
  display:flex;align-items:flex-start;gap:6px;
  margin-top:6px;
  font-size:12.5px!important;
  font-weight:700!important;
  color:var(--danger)!important;
}
.pdb-form .pdb-error::before,
.pdb-form .form-item--error-message::before{content:"\26A0";font-weight:400}

/* Drupal's own message block */
.pdb-form .messages,
.pdb-form .messages--error{
  border-radius:var(--r);
  border:1px solid #F5C2C7;
  background:var(--danger-tint);
  color:#842029;
  padding:14px 18px;
  margin-bottom:22px;
  font-size:14px!important;
}
.pdb-form .messages--status{
  border-color:var(--teal-tint-2);background:var(--teal-tint);color:var(--teal-darker);
}

/* ---------- 15. CAPTCHA ---------------------------------------------- */
.pdb-form .captcha{
  margin-top:26px;
  padding:16px 18px;
  border:1px solid var(--line);
  border-radius:var(--r);
  background:var(--surface-sunken);
  display:inline-block;
}
.pdb-form .captcha__title,
.pdb-form .captcha legend{font-size:13px!important;font-weight:700!important;margin-bottom:10px!important}

/* ---------- 16. Confirmation ----------------------------------------- */
.pdb-form .webform-confirmation,
.pdb-form .pdb-done{
  text-align:center;
  padding:44px 20px 38px;
}
.pdb-form .pdb-done-icon{
  width:66px;height:66px;border-radius:50%;
  background:var(--teal);color:#fff;
  display:grid;place-items:center;
  font-size:32px;margin:0 auto 20px;
  box-shadow:0 0 0 8px var(--teal-tint);
}
.pdb-form .pdb-done h2{
  font-size:26px!important;font-weight:400!important;margin:0 0 6px;color:var(--ink)!important;
}

/* ---------- 17. Mobile ----------------------------------------------- */
@media(max-width:720px){
  .pdb-form{font-size:15.5px!important}
  .pdb-form .pdb-card{padding:28px 18px 24px;border-radius:var(--r)}

  /* tracker: markers only, labels hidden to avoid a cramped 5-column row */
  .pdb-form .progress-text{display:none}
  .pdb-form .progress-tracker{
    justify-content:center;gap:0;
    padding:14px 0;margin-bottom:8px;
  }
  .pdb-form .progress-marker{width:28px;height:28px;font-size:12.5px!important}
  .pdb-form .progress-step::before{top:13px}

  /* stacked repeatable tables */
  .pdb-form .pdb-table thead{display:none}
  .pdb-form .pdb-table,
  .pdb-form .pdb-table tbody,
  .pdb-form .pdb-table tr,
  .pdb-form .pdb-table td{display:block;width:100%}
  .pdb-form .pdb-table{border:0;overflow:visible}
  .pdb-form .pdb-table tbody tr{
    border:1px solid var(--line);border-radius:var(--r);
    padding:8px 10px;margin-bottom:12px;background:var(--surface);
    position:relative;
  }
  .pdb-form .pdb-table tbody td{border:0;padding:7px 2px}
  .pdb-form .pdb-table tbody td::before{
    content:attr(data-label);
    display:block;
    font-size:11px;font-weight:700;letter-spacing:.4px;
    text-transform:uppercase;color:var(--muted);
    margin-bottom:4px;
  }
  .pdb-form .pdb-table td.pdb-ops{
    position:absolute;top:6px;right:6px;width:auto;padding:0;
  }
  .pdb-form .pdb-table td.pdb-ops::before{display:none}

  /* full-width stacked actions, primary first */
  .pdb-form .form-actions,
  .pdb-form .webform-actions{flex-direction:column-reverse;align-items:stretch}
  .pdb-form .form-actions .button,
  .pdb-form .webform-button--next,
  .pdb-form .webform-button--previous,
  .pdb-form .webform-button--submit,
  .pdb-form .pdb-btn{width:100%!important;justify-content:center}
  .pdb-form .webform-button--previous,
  .pdb-form .pdb-btn--ghost{order:0}

  .pdb-form .pdb-total{flex-direction:column;align-items:flex-start;gap:6px}
}

/* ---------- 18. Print / accessibility ------------------------------- */
@media(prefers-reduced-motion:reduce){
  .pdb-form *{transition:none!important;animation:none!important}
}
.pdb-form .visually-hidden,
.pdb-form .sr-only{
  position:absolute!important;width:1px;height:1px;overflow:hidden;
  clip:rect(1px,1px,1px,1px);white-space:nowrap;
}