/* ==========================================================================
   contact.html
   Clinic location card, enquiry form, map and reach list.
   Field, input, textarea and custom-select styles live in css/styles.css.
   ========================================================================== */

/* ---------- Clinic location card ---------- */
.clinic{
  min-width:0; overflow-wrap:anywhere;
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-xl);
  padding:clamp(24px,3vw,34px); align-self:start;
}
.clinic__h{margin:0 0 12px; font-family:var(--font-head); font-weight:400; font-size:clamp(22px,2.2vw,28px); line-height:1.18; letter-spacing:-.01em}
.clinic__addr{margin:0 0 18px; color:var(--ink-2)}
.clinic__note{margin:0 0 12px; font-size:16px; color:var(--ink-2)}
.fees{margin:22px 0; padding:18px 0 0; border-top:1px solid var(--border-light); display:grid; gap:10px}
.fees__row{display:flex; align-items:baseline; justify-content:space-between; gap:16px}
.fees dt{font-weight:500; color:var(--ink-2); font-size:16px}
.fees dd{margin:0; font-family:var(--font-head); font-size:clamp(19px,1.8vw,23px); color:var(--coral-deep)}

/* ---------- Enquiry form ---------- */
.enq{
  margin-top:clamp(28px,3.5vw,44px);
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-xl);
  padding:clamp(22px,3vw,40px);
}
.enq__grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:clamp(14px,1.6vw,22px)}
.enq .field{margin-bottom:18px}
.enq__grid .field{margin-bottom:0}
.enq__foot{display:flex; flex-wrap:wrap; align-items:center; gap:16px; margin-top:6px}
.enq__status{margin:0; font-size:15px; font-weight:500; color:var(--ink-2)}
.enq__status.is-ok{color:var(--coral-deep)}
.enq__status.is-err{color:#b4232a}
[data-theme="dark"] .enq__status.is-err{color:#ff9c9c}

/* ---------- Map and reach list ---------- */
.map{border:1px solid var(--border); background:var(--surface-2)}
.map iframe{display:block; width:100%; height:100%; border:0}
.reach__addr{margin:0 0 22px; font-family:var(--font-head); font-size:clamp(20px,2.2vw,27px); line-height:1.3; letter-spacing:-.01em; text-wrap:pretty}
.reach__list{margin:0 0 22px; padding:0; list-style:none; display:grid; gap:2px}
.reach__list li{
  display:flex; flex-wrap:wrap; align-items:baseline; gap:6px 18px;
  padding:14px 0; border-top:1px solid var(--border-light);
}
.reach__list li:last-child{border-bottom:1px solid var(--border-light)}
.reach__k{flex:0 0 100px; font-size:13px; font-weight:700; letter-spacing:.09em; text-transform:uppercase; color:var(--ink-3)}
.reach__v{font-weight:600; min-height:44px; display:inline-flex; align-items:center; min-width:0; overflow-wrap:anywhere}
a.reach__v{color:var(--coral-deep); text-decoration:none}
a.reach__v:hover{text-decoration:underline}
.ph-inline{
  color:var(--ink-3); font-weight:500; font-style:italic;
  border-bottom:1px dashed var(--coral); padding-bottom:1px;
}

@media (max-width:600px){
  .reach__k{flex:0 0 100%}
}

@media (max-width:767px){ .enq__status{font-size:16px} }