/* Mishk HUB — public form styles. Theme-friendly: minimal opinionated rules.
   Sprint 5.1b: structural colors (text, borders, default button states) now
   inherit from the host page wherever possible. The only hardcoded colors
   left are (1) named functional/semantic state colors — listed and
   justified at their first use below — and (2) a small number of
   fallback-only values, marked FALLBACK ONLY in a comment, used solely so
   a component still has a visible edge on a completely unstyled page; the
   host theme is expected to override these via normal CSS specificity. */

/* v0.6.0 — new field types */
.mh-form-strength{display:flex;align-items:center;gap:8px;margin:4px 0 0;height:6px}
/* FALLBACK ONLY: the meter's empty/track segments need *some* visible fill
   to read as a meter at all on an unstyled page. */
.mh-form-strength span{display:block;height:6px;background:#ddd;border-radius:3px;width:0;transition:width .2s,background .2s;flex:0 0 auto}
/* Semantic exception: password-strength tiers. Weak=error red, medium=
   warning amber, strong/very-strong=success green — a functional signal
   (how strong is this password), not a brand or structural choice. */
.mh-form-strength span[data-s="0"],.mh-form-strength span[data-s="1"]{background:#c0392b}
.mh-form-strength span[data-s="2"]{background:#d97706}
.mh-form-strength span[data-s="3"]{background:#1e8449}
.mh-form-strength span[data-s="4"]{background:#0a5c36}
.mh-form-strength small{font-size:11px;color:inherit;opacity:.7;margin-left:4px}
.mh-phone-intl{display:flex;gap:6px}
.mh-phone-intl .mh-phone-cc{flex:0 0 auto;max-width:130px}
.mh-phone-intl input[type="tel"]{flex:1 1 auto}
.mh-range{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.mh-range-lab{font-size:12px;color:inherit;opacity:.7}
.mh-range-sep{color:inherit;opacity:.5;padding:0 4px}
/* FALLBACK ONLY: border so the stepper's boundary is visible unstyled. */
.mh-qty{display:inline-flex;align-items:stretch;gap:0;border:1px solid #ddd;border-radius:6px;overflow:hidden;width:max-content}
.mh-qty-btn{background:transparent;border:0;padding:0 12px;font-size:18px;cursor:pointer;line-height:1;color:inherit}
.mh-qty-btn:hover{filter:brightness(.92);background:rgba(0,0,0,.06)}
.mh-qty input{border:0;text-align:center;width:60px;padding:8px 0;background:transparent;color:inherit}
.mh-qty input:focus{outline:2px solid currentColor;outline-offset:-1px}
/* FALLBACK ONLY: border so the calculated-value box reads as a box unstyled. */
.mh-calc{display:inline-flex;align-items:center;gap:4px;background:transparent;border:1px solid #ddd;border-radius:6px;padding:0 8px}
.mh-calc input[readonly]{border:0;background:transparent;padding:8px 0;text-align:right;font-weight:600;color:inherit;font-variant-numeric:tabular-nums}
.mh-calc-prefix,.mh-calc-suffix{color:inherit;opacity:.7;font-size:13px}
/* FALLBACK ONLY: border so the notice box reads as a box unstyled; no
   accent/background color — purely informational, not a success/error
   state, so nothing here is semantic. */
.mh-payment-notice{display:flex;align-items:center;gap:10px;background:transparent;border:1px solid #ddd;padding:12px 14px;border-radius:6px;font-size:14px;color:inherit}
.mh-payment-icon{font-size:18px}

/* Columns */
.mh-form-cols{display:flex;flex-wrap:wrap;gap:14px;margin:0 0 0}
.mh-form-row.mh-col-1-2{flex:1 1 calc(50% - 7px)}
.mh-form-row.mh-col-1-3{flex:1 1 calc(33.333% - 10px)}
.mh-form-row.mh-col-2-3{flex:1 1 calc(66.666% - 5px)}
.mh-form-row.mh-col-1-4{flex:1 1 calc(25% - 11px)}
.mh-form-row.mh-col-3-4{flex:1 1 calc(75% - 3px)}
@media (max-width:600px){.mh-form-row[class*=" mh-col-"]{flex:1 1 100%}}

/* Popup / modal */
/* Backdrop dimmer + drop-shadow: a universal modal convention, not a
   design-system color — every site dims behind a modal in some flavor of
   translucent black regardless of theme, so this isn't something a host
   theme defines or expects to override. Left as neutral black. */
.mh-form-popup-overlay{position:fixed;inset:0;background:rgba(0,0,0,.55);z-index:99999;display:none;align-items:center;justify-content:center;padding:18px}
.mh-form-popup-overlay.is-open{display:flex}
/* FALLBACK ONLY: the panel needs an opaque surface so the dimmed page
   behind it doesn't show through; #fff is the lightest viable fallback. */
.mh-form-popup-panel{background:#fff;border-radius:12px;max-width:680px;width:100%;max-height:88vh;overflow:auto;padding:24px;position:relative;box-shadow:0 20px 60px rgba(0,0,0,.3)}
.mh-form-popup-close{position:absolute;top:10px;right:14px;border:0;background:transparent;font-size:22px;cursor:pointer;color:inherit;opacity:.6}
.mh-form-popup-trigger{display:inline-block;padding:10px 22px;border-radius:6px;text-decoration:none;font-size:14px;font-weight:500;cursor:pointer;border:1px solid currentColor}
.mh-form-popup-trigger:hover{filter:brightness(.92)}

/* Rating */
.mh-rating{display:flex;gap:6px}
/* FALLBACK ONLY: unfilled-star color so the rating control is visible at
   all on an unstyled page. */
.mh-rating-star{background:transparent;border:0;cursor:pointer;font-size:28px;color:#ddd;padding:0;line-height:1;font-family:inherit;transition:color .15s}
/* Semantic/functional exception: a filled star has to look filled — this
   is the rating value itself, not decoration, so it keeps a deliberate
   gold regardless of host theme (same logic as a star icon anywhere). */
.mh-rating-star.is-on,.mh-rating-star:hover{color:#f0a830}

/* NPS */
.mh-nps{display:flex;gap:4px;flex-wrap:wrap}
/* FALLBACK ONLY: border so each NPS option reads as a discrete button. */
.mh-nps-btn{flex:1;min-width:32px;background:transparent;border:1px solid #ddd;border-radius:4px;padding:8px 0;font-size:14px;cursor:pointer;font-family:inherit;color:inherit;transition:background .15s,border-color .15s}
.mh-nps-btn:hover{border-color:currentColor}
/* Selection-state fallback: "is-on" has to look visibly chosen — there's
   no host-theme convention for "selected NPS score" to inherit, so this
   keeps a minimal low-opacity dark fill plus a bolder, currentColor-based
   border instead of a fixed brand/grey background. */
.mh-nps-btn.is-on{background:rgba(0,0,0,.08);color:inherit;border-color:currentColor;font-weight:600}
.mh-nps-labels{display:flex;justify-content:space-between;color:inherit;opacity:.6;margin-top:4px}

/* Range */
.mh-range-wrap{display:flex;gap:14px;align-items:center}
.mh-range-wrap input[type=range]{flex:1}
.mh-range-wrap output{font-weight:600;color:inherit;min-width:40px;text-align:right}

/* Image choice */
.mh-image-choice{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:10px}
/* FALLBACK ONLY: border so each option tile reads as a discrete box. */
.mh-image-choice-opt{display:flex;flex-direction:column;align-items:center;gap:6px;padding:10px;border:2px solid #ddd;border-radius:8px;cursor:pointer;transition:border-color .15s,background .15s;font-size:13px;color:inherit}
.mh-image-choice-opt:hover{border-color:currentColor}
/* Selection-state fallback — same reasoning as .mh-nps-btn.is-on above. */
.mh-image-choice-opt.is-on{border-color:currentColor;background:rgba(0,0,0,.06)}
.mh-image-choice-opt input{display:none}
.mh-image-choice-opt img{width:100%;height:80px;object-fit:cover;border-radius:4px}

/* Signature */
.mh-signature{display:flex;flex-direction:column;gap:6px}
/* FALLBACK ONLY: border + opaque background so the signature pad's drawing
   surface is visible and the ink is legible against it. */
.mh-signature-canvas{border:1px solid #ddd;border-radius:6px;background:#fff;width:100%;max-width:500px;touch-action:none;cursor:crosshair}
.mh-signature-clear{align-self:flex-start;background:transparent;border:0;color:#c0392b;cursor:pointer;font-size:12px;text-decoration:underline;font-family:inherit;padding:0}

/* Repeater */
.mh-repeater{display:flex;flex-direction:column;gap:10px}
/* FALLBACK ONLY: border so each repeated row reads as a discrete group. */
.mh-repeater-row{padding:12px;border:1px solid #ddd;border-radius:8px;background:transparent}
.mh-repeater-add{align-self:flex-start;background:transparent;color:inherit;border:1px solid currentColor;padding:6px 14px;border-radius:6px;cursor:pointer;font-size:13px;font-family:inherit}
.mh-repeater-del{background:transparent;border:0;color:#c0392b;cursor:pointer;font-size:12px;text-decoration:underline;font-family:inherit;padding:0;margin-top:6px}

/* AJAX flash — semantic exception: success state, see .mh-form-notice--ok
   below for the same justification. */
.mh-form-ajax-response{padding:14px;border-radius:8px;background:#eaf7ee;border:1px solid #bfe3c9;color:#1f7a3d;font-size:14px}
.mh-form-public{display:flex;flex-direction:column;gap:14px;max-width:680px;font-family:inherit}
.mh-form-public *{box-sizing:border-box}
.mh-form-public .mh-hp{position:absolute;left:-9999px;top:-9999px;width:1px;height:1px;opacity:0}
.mh-form-title{margin:0 0 4px;font-size:22px;font-weight:600}
.mh-form-row{display:flex;flex-direction:column;gap:5px}
.mh-form-label{font-weight:500;font-size:14px}
/* Semantic exception: required-field marker. Universally red across the
   web (the same convention as error states) — a functional signal, not
   decoration. */
.mh-form-req{color:#c0392b;margin-left:3px}

/* FALLBACK ONLY: border, white background, and a dark text color so
   inputs are usable and legible on a completely unstyled page. Most host
   themes already style their own inputs and will override all three via
   normal CSS specificity; the background is kept white (not transparent)
   because an input needs a readable surface for typed text even where the
   host page itself is dark — and the text color has to be a fixed dark
   value to stay legible against that white, rather than inheriting a
   light page-wide text color that would vanish on its own input. */
.mh-form-public input[type=text],
.mh-form-public input[type=email],
.mh-form-public input[type=tel],
.mh-form-public input[type=url],
.mh-form-public input[type=number],
.mh-form-public input[type=date],
.mh-form-public input[type=time],
.mh-form-public input[type=password],
.mh-form-public input[type=file],
.mh-form-public textarea,
.mh-form-public select{
	padding:10px 12px;border:1px solid #ddd;border-radius:6px;
	font-size:15px;font-family:inherit;background:#fff;color:#1c1a17;width:100%;
}
.mh-form-public textarea{min-height:90px;resize:vertical}
/* Native focus indicator left alone deliberately (no outline:none, no
   custom ring) — the browser's own focus styling already adapts to the
   user's OS/browser settings and is more theme-neutral than anything we
   could hardcode here. */
.mh-form-public input.mh-error,.mh-form-public select.mh-error,.mh-form-public textarea.mh-error{border-color:#c0392b;box-shadow:0 0 0 3px rgba(192,57,43,.12)}

.mh-form-group{border:0;padding:0;margin:0;display:flex;flex-direction:column;gap:6px}
.mh-form-group legend{font-weight:500;font-size:14px;margin-bottom:4px}
.mh-form-opt{display:flex;align-items:flex-start;gap:8px;font-size:14px;cursor:pointer}
.mh-form-opt input{margin-top:3px}
.mh-form-consent{align-items:flex-start}
.mh-form-help{color:inherit;opacity:.65;font-size:12.5px}

.mh-form-multi{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.mh-form-multi-sub{display:flex;flex-direction:column;gap:4px}
.mh-form-multi-sub label{font-size:12px;color:inherit;opacity:.65}
.mh-form-multi-sub--wide{grid-column:1 / -1}

/* FALLBACK ONLY: divider so sections read as distinct groups unstyled. */
.mh-form-section{padding:10px 0;border-bottom:1px solid #ddd;margin:4px 0}
.mh-form-section-title{margin:0 0 4px;font-size:17px;font-weight:600}
.mh-form-section-desc{margin:0;font-size:13px;color:inherit;opacity:.65}
.mh-form-html{font-size:14px;line-height:1.55}

.mh-form-actions{margin-top:6px;display:flex;gap:8px}
/* FALLBACK ONLY: a 1px currentColor border so Submit/Next/Back always
   read as clickable buttons even if the host page's own CSS reset strips
   default button chrome — no background/text color imposed, both inherit
   from whatever's already in effect on the page. */
.mh-form-submit,.mh-form-next,.mh-form-prev{
	background:transparent;color:inherit;border:1px solid currentColor;padding:10px 22px;border-radius:6px;
	font-size:15px;font-weight:500;cursor:pointer;font-family:inherit;
}
.mh-form-submit:hover,.mh-form-next:hover,.mh-form-prev:hover{filter:brightness(.92);background:rgba(0,0,0,.06)}

/* Semantic exception: form-level success/error notices — the same
   justification as .mh-form-ajax-response above. These report whether the
   submission worked, which is functional information, not branding. */
.mh-form-notice{padding:10px 14px;border-radius:6px;font-size:13.5px;border:1px solid transparent}
.mh-form-notice--ok{background:#eaf7ee;border-color:#bfe3c9;color:#1f7a3d}
.mh-form-notice--err{background:#fbeaea;border-color:#f0c4c4;color:#a13a3a}

.mh-form-page{display:none}
.mh-form-page.is-active{display:flex;flex-direction:column;gap:14px}

.mh-form-progress{display:flex;gap:8px;margin-bottom:8px;flex-wrap:wrap}
/* FALLBACK ONLY: border so idle progress steps read as discrete chips. */
.mh-form-progress-step{display:flex;align-items:center;gap:6px;padding:6px 12px;border:1px solid #ddd;border-radius:20px;font-size:12.5px;color:inherit;opacity:.7}
/* Selection-state fallback — same reasoning as .mh-nps-btn.is-on above:
   "which step is current" needs to look different, no host-theme
   convention exists for it, so this keeps a minimal low-opacity fill. */
.mh-form-progress-step.is-active{background:rgba(0,0,0,.08);border-color:currentColor;color:inherit;font-weight:600;opacity:1}
/* Semantic exception: a completed step is a success signal (this step
   was submitted successfully), reusing the same justified success green. */
.mh-form-progress-step.is-done{background:#eaf7ee;color:#1f7a3d;border-color:#bfe3c9;opacity:1}
.mh-form-progress-num{display:inline-flex;align-items:center;justify-content:center;min-width:20px;height:20px;background:rgba(0,0,0,.08);border-radius:50%;font-weight:600;font-size:11px}
.mh-form-progress-step.is-active .mh-form-progress-num{background:rgba(255,255,255,.18)}

/* Size hints (optional, theme can override) */
.mh-size-small input,.mh-size-small textarea,.mh-size-small select{max-width:200px}
.mh-size-large input,.mh-size-large textarea,.mh-size-large select{max-width:none}

@media (max-width:600px){.mh-form-multi{grid-template-columns:1fr}}