/* ============================================================
   MABA SUITEZ · REGISTRATION FORM
   Underline fields, source chips, consent checks — laid out to
   match the supplied reference, but in the site's palette rather
   than the reference's grey glass.
   ============================================================ */

.rf{
  --rf-line:rgba(233,214,196,.34);
  --rf-line-on:#C9A45E;
  --rf-text:#F1E7DA;
  --rf-dim:rgba(241,231,218,.62);
  --rf-err:#E0876A;

  width:min(660px,100%);
}

.rf-title{
  font-family:"MinervaModern-Regular",serif;
  font-size:clamp(22px,2.5vw,31px);font-weight:400;letter-spacing:.02em;
  text-transform:uppercase;color:var(--rf-text);margin:0;margin-bottom: 30px;
}
.rf-sub{margin:8px 0 20px;color:var(--rf-dim);font-size:13px;line-height:1.6}

/* ---- honeypot: off-screen, never focusable by tab ---- */
.rf-trap{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* ---- fields ---- */
.rf-row{margin-bottom:17px}
.rf-row--2{display:grid;grid-template-columns:1fr 1fr;gap:18px}
/* salutation only needs room for "Puan Sri" */
.rf-row--sal{display:grid;grid-template-columns:minmax(120px,.34fr) 1fr;gap:18px}
.rf-f{position:relative}

.rf-f input,
.rf-f select{
  width:100%;box-sizing:border-box;
  background:none;border:0;border-bottom:1px solid var(--rf-line);
  padding:8px 2px 9px;
  font-family:inherit;font-size:15px;color:var(--rf-text);
  border-radius:0;                 /* iOS rounds inputs by default */
  -webkit-appearance:none;appearance:none;
  transition:border-color .25s ease;
}
.rf-f input::placeholder{color:var(--rf-dim)}
.rf-f select{color:var(--rf-dim);cursor:pointer}
.rf-f select:valid{color:var(--rf-text)}
.rf-f select option{background:#5E2A1A;color:var(--rf-text)}
.rf-f::after{                       /* chevron for the select */
  content:"";position:absolute;right:6px;top:15px;width:7px;height:7px;
  border-right:1px solid var(--rf-dim);border-bottom:1px solid var(--rf-dim);
  transform:rotate(45deg);pointer-events:none;opacity:0;
}
.rf-f--sel::after{opacity:1}
.rf-f input:focus,.rf-f select:focus{outline:none;border-bottom-color:var(--rf-line-on)}

.rf-err{
  position:absolute;left:0;top:100%;margin-top:3px;
  font-size:10.5px;letter-spacing:.04em;color:var(--rf-err);
  opacity:0;transform:translateY(-3px);transition:.25s ease;
}
.rf-f.err input,.rf-f.err select{border-bottom-color:var(--rf-err)}
.rf-f.err .rf-err{opacity:1;transform:translateY(0)}

/* ---- source chips ---- */
.rf-q{
  margin:22px 0 10px;color:var(--rf-text);
  font-family:"MinervaModern-Regular",serif;font-size:clamp(14px,1.25vw,16px);line-height:1.45;
}
.rf-chips{display:flex;flex-wrap:wrap;gap:8px}
.rf-chip{
  font-family:inherit;font-size:13px;color:var(--rf-dim);
  background:rgba(241,231,218,.08);
  border:1px solid transparent;padding:8px 14px;
  transition:.22s ease;
}
.rf-chip:hover{background:rgba(241,231,218,.14);color:var(--rf-text)}
.rf-chip.on{
  background:rgba(201,164,94,.18);border-color:var(--rf-line-on);color:#F6EBD8;
}

/* ---- consent ---- */
.rf-check{
  display:grid;grid-template-columns:19px 1fr;gap:11px;align-items:start;
  margin-top:15px;cursor:pointer;
}
.rf-check input{position:absolute;opacity:0;width:0;height:0}
.rf-box{
  width:19px;height:19px;margin-top:1px;
  border:1px solid var(--rf-line);background:rgba(241,231,218,.06);
  position:relative;transition:.2s ease;
}
.rf-box::after{
  content:"";position:absolute;left:6px;top:2px;width:5px;height:9px;
  border-right:2px solid #4A2114;border-bottom:2px solid #4A2114;
  transform:rotate(45deg) scale(.4);opacity:0;transition:.2s ease;
}
.rf-check input:checked + .rf-box{background:var(--rf-line-on);border-color:var(--rf-line-on)}
.rf-check input:checked + .rf-box::after{opacity:1;transform:rotate(45deg) scale(1)}
.rf-check input:focus-visible + .rf-box{outline:2px solid var(--rf-line-on);outline-offset:3px}
.rf-ctext{color:var(--rf-dim);font-size:11.5px;line-height:1.5}
.rf-check.err .rf-box{border-color:var(--rf-err)}

/* ---- submit ---- */
.rf-fail{
  margin:22px 0 0;padding:11px 14px;
  background:rgba(224,135,106,.12);border-left:2px solid var(--rf-err);
  color:#F0C3B2;font-size:13px;line-height:1.6;
}
.rf-submit{
  width:100%;margin-top:20px;padding:15px;
  background:var(--rf-line-on);color:#3A1A0F;
  font-family:inherit;font-size:13px;letter-spacing:.24em;text-transform:uppercase;
  transition:.25s ease;
}
.rf-submit:hover{background:#DCBB7C}
.rf-submit[disabled]{opacity:.6;cursor:default}

/* ---- success ---- */
.rf-done{padding:8px 0}
.rf-tick{
  display:grid;place-items:center;width:46px;height:46px;margin-bottom:20px;
  border-radius:50%;background:var(--rf-line-on);color:#3A1A0F;font-size:20px;
}
.rf-again{
  margin-top:26px;padding:14px 26px;
  border:1px solid var(--rf-line);color:var(--rf-text);
  font-family:inherit;font-size:12px;letter-spacing:.2em;text-transform:uppercase;
  transition:.25s ease;
}
.rf-again:hover{border-color:var(--rf-line-on);color:#F6EBD8}

/* ============ MOBILE ============ */
@media (max-width:860px){
  .rf{width:100%}
  .rf-sub{margin-bottom:24px}
  .rf-row{margin-bottom:22px}
  .rf-row--2,.rf-row--sal{grid-template-columns:1fr;gap:17px}
  .rf-row{margin-bottom:17px}
  /* 16px keeps iOS from zooming the viewport on focus */
  .rf-f input,.rf-f select{font-size:16px}
  .rf-chip{font-size:13px;padding:10px 15px}
  .rf-q{margin-top:28px}
  .rf-submit{padding:17px}
}

/* ---- footer links (carried over from the previous form) ---- */
.rf-links{
  display:flex;flex-wrap:wrap;gap:6px 22px;margin-top:16px;
  padding-top:13px;border-top:1px solid var(--rf-line);
}
.rf-links a{
  color:var(--rf-dim);font-size:11px;letter-spacing:.06em;
  text-decoration:none;transition:color .2s ease;
}
.rf-links a:hover{color:var(--rf-line-on)}

/* ---- short viewports: laptops at 768/800px tall ----
   Everything above is sized for comfort; below this the form has to
   fit the screen instead, so the least load-bearing space goes. */
@media (min-width:861px) and (max-height:820px){
  .rf-title{font-size:24px}
  .rf-sub{margin-bottom:14px;font-size:12px}
  .rf-row{margin-bottom:13px}
  .rf-f input,.rf-f select{padding:6px 2px 7px;font-size:14px}
  .rf-q{margin:16px 0 8px;font-size:14px}
  .rf-chip{padding:7px 12px;font-size:12px}
  .rf-check{margin-top:11px}
  .rf-ctext{font-size:11px;line-height:1.45}
  .rf-submit{margin-top:15px;padding:13px}
  .rf-links{margin-top:12px;padding-top:10px}
}
@media (min-width:861px) and (max-height:700px){
  .rf-sub{display:none}
  /*.rf-links{display:none}*/
}