/* Contact form skin for the static mirror. The markup is what Fluent Forms left
   behind; this file re-dresses it in the same language as the booking widget
   (Poppins, soft pink card, pill button) in both light and dark mode. */

form.frm-fluent-form{
  --mvf-pink:#FF77B7; --mvf-deep:#c0264a; --mvf-ink:#221a1d; --mvf-mut:#8a7a80;
  --mvf-soft:#fdf3f7; --mvf-line:#eddbe3; --mvf-card:#fff; --mvf-field:#fffdfe;
  font:16px/1.55 "Poppins",system-ui,-apple-system,"Segoe UI",Arial,sans-serif;
  color:var(--mvf-ink);
  background:var(--mvf-card);
  border:1px solid var(--mvf-line);
  border-radius:16px;
  padding:26px 24px;
  max-width:560px;
  margin:0 auto;
  box-shadow:0 2px 18px rgba(34,26,29,.05);
  text-align:left;
}
form.frm-fluent-form fieldset{border:0;margin:0;padding:0;min-inline-size:100%}

form.frm-fluent-form .ff-el-group{margin:0 0 16px}
form.frm-fluent-form .ff-field_container{margin:0 0 16px}
form.frm-fluent-form .ff-field_container .ff-el-group{margin:0}
form.frm-fluent-form .ff-el-group:last-of-type{margin-bottom:0}

form.frm-fluent-form .ff-el-input--label{margin:0 0 6px}
form.frm-fluent-form .ff-el-input--label label{
  display:block;font-size:12.5px;font-weight:600;letter-spacing:.09em;
  text-transform:uppercase;color:var(--mvf-mut);margin:0;line-height:1.4;
}
form.frm-fluent-form .ff-el-is-required label:after{content:" *";color:var(--mvf-deep)}
form.frm-fluent-form .ff-el-input--label.asterisk-right label:after{color:var(--mvf-deep)}

form.frm-fluent-form .ff-el-form-control{
  display:block;width:100%;box-sizing:border-box;
  padding:12px 14px;border:1px solid var(--mvf-line);border-radius:10px;
  background:var(--mvf-field);color:var(--mvf-ink);
  font:inherit;font-size:15px;line-height:1.4;
  transition:border-color .15s,box-shadow .15s;
}
form.frm-fluent-form textarea.ff-el-form-control{min-height:120px;resize:vertical}
form.frm-fluent-form .ff-el-form-control::placeholder{color:#b6a6ac}
form.frm-fluent-form .ff-el-form-control:focus{
  outline:0;border-color:var(--mvf-pink);box-shadow:0 0 0 3px rgba(255,119,183,.18);
}

/* yes / no as two chips, the way the booking widget shows its days */
form.frm-fluent-form .ff-el-input--content:has(.ff-el-form-check){display:flex;gap:10px;flex-wrap:wrap}
form.frm-fluent-form .ff-el-form-check{margin:0}
form.frm-fluent-form .ff-el-form-check-label{
  display:inline-flex;align-items:center;gap:8px;cursor:pointer;margin:0;
  padding:9px 18px;border:1px solid var(--mvf-line);border-radius:999px;
  background:var(--mvf-field);font-size:15px;line-height:1.2;color:var(--mvf-ink);
  transition:border-color .15s,background .15s,color .15s;
}
form.frm-fluent-form .ff-el-form-check-label:hover{border-color:var(--mvf-pink)}
form.frm-fluent-form .ff-el-form-check-input{
  appearance:none;-webkit-appearance:none;margin:0;width:15px;height:15px;flex:0 0 15px;
  border:1.5px solid #d9c4ce;border-radius:50%;background:#fff;transition:.15s;
}
form.frm-fluent-form .ff-el-form-check-input:checked{
  background:var(--mvf-pink);border-color:var(--mvf-pink);border-width:1.5px;
  box-shadow:inset 0 0 0 3px var(--mvf-card);
}
form.frm-fluent-form .ff-el-form-check-label:has(:checked){
  border-color:var(--mvf-pink);background:var(--mvf-soft);color:var(--mvf-deep);font-weight:600;
}

/* the phone field only belongs on screen once a call-back is asked for */
form.frm-fluent-form .has-conditions{display:none}
form.frm-fluent-form .has-conditions.mv-show{display:block;animation:mvf-in .2s ease}
@keyframes mvf-in{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}

form.frm-fluent-form .ff-t-container{display:block}
form.frm-fluent-form .ff-t-cell{width:100%;padding:0}

form.frm-fluent-form .ff_submit_btn_wrapper{margin-top:20px}
form.frm-fluent-form .ff-btn-submit{
  display:block;width:100%;padding:14px 20px;border:0;border-radius:999px;
  background:var(--mvf-pink) !important;color:#fff !important;
  font:inherit;font-size:16px;font-weight:600;letter-spacing:.01em;cursor:pointer;
  transition:background .15s,transform .06s;
}
form.frm-fluent-form .ff-btn-submit:hover{background:#f0509d !important}
form.frm-fluent-form .ff-btn-submit:active{transform:translateY(1px)}
form.frm-fluent-form .ff-btn-submit:disabled{opacity:.65;cursor:default}

form.frm-fluent-form .mv-form-message{margin-top:16px}
form.frm-fluent-form .mv-field-error{color:var(--mvf-deep);font-size:13px;margin-top:5px}
form.frm-fluent-form .mv-invalid{border-color:var(--mvf-deep) !important}

/* a line of reassurance under the button, filled in by marveen-form.js */
form.frm-fluent-form .mv-form-note{
  margin:12px 0 0;font-size:13.5px;line-height:1.5;color:var(--mvf-mut);text-align:center;
}
form.frm-fluent-form .mv-form-note a{color:var(--mvf-deep);font-weight:600;text-decoration:none}
form.frm-fluent-form .mv-form-note a:hover{text-decoration:underline}

/* dark mode: same shapes, darker ground */
html[data-mvdark] form.frm-fluent-form{
  --mvf-ink:#f3e9ed; --mvf-mut:#b09aa3; --mvf-soft:#2a2024; --mvf-line:#3a2c32;
  --mvf-card:#221a1e; --mvf-field:#1c1518;
  box-shadow:0 2px 18px rgba(0,0,0,.35);
}
html[data-mvdark] form.frm-fluent-form .ff-el-form-control::placeholder{color:#7d6a72}
html[data-mvdark] form.frm-fluent-form .ff-el-form-check-input{background:#1c1518;border-color:#4d3a41}
html[data-mvdark] form.frm-fluent-form .ff-el-form-check-input:checked{
  background:var(--mvf-pink);border-color:var(--mvf-pink);box-shadow:inset 0 0 0 3px var(--mvf-soft);
}
html[data-mvdark] form.frm-fluent-form .ff-el-form-check-label:has(:checked){color:#ffb3d4}

@media(max-width:560px){
  form.frm-fluent-form{padding:20px 16px;border-radius:14px}
}

/* The home page ships its own Elementor rules for buttons and labels, and they
   win on specificity; these three win them back without touching that CSS. */
html body form.frm-fluent-form .ff-el-input--label label{color:var(--mvf-mut) !important}
html body form.frm-fluent-form .ff-btn-submit{background-color:var(--mvf-pink) !important;color:#fff !important}
html body form.frm-fluent-form .ff-btn-submit:hover{background-color:#f0509d !important}
html body form.frm-fluent-form .mv-form-note{color:var(--mvf-mut) !important}
html body form.frm-fluent-form .mv-form-note a{color:var(--mvf-deep) !important}
html[data-mvdark] body form.frm-fluent-form .mv-form-note a{color:#ff8fc0 !important}

/* Elementor paints this button from a per-page widget rule with five classes of
   specificity; match it with the wrapper plus the button's own classes. */
html body .fluentform-widget-wrapper form.frm-fluent-form .ff-el-group .ff-btn-submit.ff-btn.ff-btn-md{
  background-color:var(--mvf-pink) !important;border-color:var(--mvf-pink) !important;
  color:#fff !important;border-radius:999px !important;border-width:0 !important;
}
html body .fluentform-widget-wrapper form.frm-fluent-form .ff-el-group .ff-btn-submit.ff-btn.ff-btn-md:hover{
  background-color:#f0509d !important;border-color:#f0509d !important;
}