/* Website forms built from data/forms/*.json (static/js/mea-form.js) and the send animation
   (static/js/mea-send.js). Builds on request-form.css (rf-* classes, token colours). */
.mf-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.rf .is-locked { background: var(--rf-soft) !important; color: var(--rf-mu); }
.rf input[type=url], .rf input[type=date] { width: 100%; box-sizing: border-box; min-height: 48px; padding: var(--s-3); border: 1px solid var(--c-field); border-radius: var(--r-1); background: var(--c-surface); color: var(--c-ink); font: inherit; font-size: 16px; }
.rf input[type=date] { -webkit-appearance: none; appearance: none; }
.rf-field[hidden] { display: none; }
.rf-step .rf-field.mf-consent { margin-bottom: 4px; }
.rf-step .rf-field.mf-consent .rf-err { margin: 0 0 8px 32px; }
.rf-check a { margin-left: 4px; }
.rf-count.is-ok { color: var(--rf-g); font-weight: 700; }

/* ₦ amounts */
.mf-money { position: relative; }
.mf-money > span { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); font-weight: 700; color: var(--rf-mu); pointer-events: none; }
.rf .mf-money input { padding-left: 32px; font-variant-numeric: tabular-nums; }

/* quick answers */
.mf-quick { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.mf-chip { border: 1px dashed var(--c-field); background: transparent; color: var(--c-ink); border-radius: var(--r-1); padding: var(--s-1) var(--s-3); min-height: 40px; font: inherit; font-size: var(--t-small); font-weight: 600; cursor: pointer; }
.mf-chip:hover, .mf-chip:focus-visible { border-color: var(--c-brand); color: var(--c-link); }

/* stars */
.mf-stars { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.mf-star { position: relative; }
.mf-star input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.mf-star span { display: grid; place-items: center; width: 48px; height: 48px; border-radius: var(--r-1); cursor: pointer; }
.mf-star svg { width: 34px; height: 34px; fill: none; stroke: var(--rf-mu); stroke-width: 1.6; transition: transform .15s, fill .15s; }
.mf-star.is-on svg { fill: var(--c-brand); stroke: var(--c-brand); }
.mf-star input:focus-visible + span { outline: var(--focus-ring); }
.mf-star:hover svg { transform: scale(1.12); }
.mf-stars-say { margin-left: var(--s-2); font-weight: 600; color: var(--c-link); }

/* upload card (same idea as the motion study: a stack of documents in a quiet card) */
.mf-drop { position: relative; display: grid; box-sizing: border-box; width: 100%; font-weight: 400; justify-items: center; text-align: center; gap: 4px; padding: var(--s-5) var(--s-4); border: 1px dashed var(--c-field); border-radius: var(--r-1); background: var(--c-surface); cursor: pointer; transition: border-color .2s, background .2s, transform .2s; }
.mf-drop:hover, .mf-drop:focus-visible, .mf-drop.is-over { border-color: var(--c-brand); background: var(--c-surface-2); outline: none; }
.mf-drop.is-over { transform: scale(1.01); }
.mf-drop[hidden] { display: none; }
.mf-file-input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; overflow: hidden; }
.mf-file-input:focus-visible + .mf-drop { border-color: var(--c-brand); background: var(--c-surface-2); outline: var(--focus-ring); outline-offset: 2px; }
.mf-drop-title, .mf-drop-sub { display: block; }
.mf-file { position: relative; }
.mf-drop-art { position: relative; width: 84px; height: 70px; margin-bottom: 6px; }
.mf-doc { position: absolute; left: 50%; top: 4px; width: 46px; height: 58px; margin-left: -23px; border-radius: 6px; background: #fff; border: 1.5px solid #cbd5e1; box-shadow: 0 4px 10px rgba(15, 23, 42, .08); transition: transform .3s; }
.mf-doc::before, .mf-doc::after { content: ''; position: absolute; left: 8px; right: 8px; height: 3px; border-radius: 2px; background: #e2e8f0; top: 12px; }
.mf-doc::after { top: 20px; right: 16px; }
.mf-doc-a { transform: rotate(-14deg) translateX(-12px); }
.mf-doc-b { transform: rotate(10deg) translateX(12px); }
.mf-doc-c b { position: absolute; left: 6px; bottom: 7px; padding: 2px 5px; border-radius: 4px; background: var(--c-brand); color: #fff; font-size: 10px; letter-spacing: .04em; }
.mf-drop:hover .mf-doc-a, .mf-drop.is-over .mf-doc-a { transform: rotate(-20deg) translateX(-18px); }
.mf-drop:hover .mf-doc-b, .mf-drop.is-over .mf-doc-b { transform: rotate(16deg) translateX(18px); }
.mf-drop-title { margin: 0; font-weight: 700; font-size: 1.02rem; color: var(--rf-tx); }
.mf-drop-sub { margin: 0; font-size: .86rem; line-height: 1.5; color: var(--rf-mu); }
.mf-drop-link { color: var(--c-link); font-weight: 600; text-decoration: underline; }
.mf-files { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 8px; }
.mf-file { display: flex; align-items: center; gap: var(--s-3); padding: var(--s-2); border: 1px solid var(--c-field); border-radius: var(--r-1); background: var(--c-surface); }
.mf-file img, .mf-ext { width: 42px; height: 42px; border-radius: var(--r-1); object-fit: cover; flex: 0 0 auto; }
.mf-ext { display: grid; place-items: center; background: var(--c-brand); color: #fff; font-size: 11px; font-weight: 700; letter-spacing: .04em; }
.mf-file-name { flex: 1 1 auto; min-width: 0; font-weight: 600; font-size: .92rem; overflow-wrap: anywhere; }
.mf-file-name small { display: block; font-weight: 400; color: var(--rf-mu); }
.mf-file-x { width: 44px; height: 44px; border: 0; border-radius: var(--r-1); background: var(--c-surface-2); color: var(--c-ink); font-size: 1.3rem; cursor: pointer; flex: 0 0 auto; }
.mf-warn { background: #ca8a04 !important; }
.mf-done .rf-hint { max-width: 520px; margin: 10px auto 0; }
.mf-auto { min-height: 1.4em; }

/* ── send animation ── */
.ms-lock, .ms-lock body { overflow: hidden; }
.ms-overlay { --ms-card: var(--c-surface); --ms-tx: var(--c-ink); --ms-mu: var(--c-muted); --ms-ln: var(--c-line); --ms-g: var(--c-brand); --ms-g2: var(--c-brand-deep);
  position: fixed; inset: 0; z-index: 10000; display: grid; place-items: center; padding: 16px; background: rgba(15, 23, 42, .55); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px);
  opacity: 0; transition: opacity .25s; font-family: var(--f-sans); }
.ms-overlay.is-in { opacity: 1; }
.ms-overlay.is-out { opacity: 0; }
.ms-card { width: min(420px, 100%); box-sizing: border-box; padding: var(--s-5); border-radius: var(--r-1); background: var(--ms-card); color: var(--ms-tx); text-align: center; box-shadow: 0 30px 60px rgba(2, 6, 23, .35); transform: translateY(14px) scale(.98); transition: transform .35s cubic-bezier(.2, .9, .3, 1.2); max-height: calc(100dvh - 32px); overflow: auto; }
.ms-overlay.is-in .ms-card { transform: none; }
.ms-stage { position: relative; height: 170px; margin: 0 auto 6px; width: 100%; max-width: 300px; }

.ms-stack { position: absolute; left: 50%; top: 22px; width: 64px; height: 82px; margin-left: -32px; transition: transform .45s cubic-bezier(.5, 0, .3, 1), opacity .35s; }
.ms-sheet { position: absolute; left: 0; top: 0; max-width: none; box-sizing: border-box; width: 64px; height: 82px; border-radius: 8px; background: #fff; border: 1.5px solid #cbd5e1; box-shadow: 0 6px 14px rgba(15, 23, 42, .1); transition: transform .45s cubic-bezier(.3, .8, .3, 1.2); }
.ms-sheet::before, .ms-sheet::after { content: ''; position: absolute; left: 10px; right: 10px; top: 16px; height: 4px; border-radius: 2px; background: #e2e8f0; }
.ms-sheet::after { top: 27px; right: 22px; }
.ms-s1 { transform: rotate(-12deg) translateX(-16px); }
.ms-s2 { transform: rotate(9deg) translateX(16px); }
.ms-s3 b { position: absolute; left: 8px; bottom: 10px; padding: 3px 7px; border-radius: 5px; background: var(--ms-g); color: #fff; font-size: 11px; letter-spacing: .04em; }
.is-drag .ms-s1 { transform: rotate(-20deg) translateX(-30px); }
.is-drag .ms-s2 { transform: rotate(16deg) translateX(30px); }

.ms-drag { position: absolute; left: 50%; top: 40px; display: flex; flex-direction: column; align-items: flex-start; animation: ms-drag 1.25s cubic-bezier(.4, 0, .2, 1) both; }
.ms-tile, .ms-flyer { max-width: none; box-sizing: border-box; display: grid; place-items: center; width: 50px; height: 62px; border-radius: 8px; background: #fff; border: 1.5px solid #cbd5e1; box-shadow: 0 10px 20px rgba(15, 23, 42, .18); overflow: hidden; }
.ms-tile img, .ms-flyer img { width: 100%; height: 100%; object-fit: cover; }
.ms-tile b, .ms-flyer b { padding: 2px 6px; border-radius: 5px; background: var(--ms-g); color: #fff; font-size: 10px; }
.ms-chip { margin-top: 6px; max-width: 150px; padding: 3px 8px; border-radius: 6px; background: var(--ms-g); color: #fff; font-size: 11px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; box-shadow: 0 4px 10px rgba(4, 120, 87, .35); }
.ms-cursor { position: absolute; left: 38px; top: 44px; width: 22px; height: 22px; filter: drop-shadow(0 2px 2px rgba(0, 0, 0, .25)); }
@keyframes ms-drag {
  0% { transform: translate(90px, 70px) rotate(8deg); opacity: 0; }
  15% { opacity: 1; }
  70% { transform: translate(14px, -6px) rotate(-3deg); opacity: 1; }
  100% { transform: translate(-20px, -14px) scale(.6); opacity: 0; }
}
.is-folder .ms-drag, .is-done .ms-drag, .is-wa .ms-drag { display: none; }

.ms-folder { position: absolute; left: 50%; top: 34px; width: 156px; height: 112px; margin-left: -78px; opacity: 0; transform: translateY(26px) scale(.8); transition: transform .45s cubic-bezier(.3, .9, .3, 1.15), opacity .3s; }
.ms-folder-back { position: absolute; inset: 0; border-radius: 12px; background: var(--ms-g2); }
.ms-folder-back::before { content: ''; position: absolute; left: 0; top: -12px; width: 62px; height: 24px; border-radius: 10px 10px 0 0; background: var(--ms-g2); }
.ms-flyers { position: absolute; left: 0; right: 0; top: -70px; height: 120px; overflow: hidden; display: grid; justify-items: center; }
.ms-flyer { grid-area: 1 / 1; width: 44px; height: 54px; animation: ms-fly 1s cubic-bezier(.4, 0, .6, 1) both; }
@keyframes ms-fly {
  0% { transform: translateY(-20px) rotate(-8deg); opacity: 0; }
  25% { opacity: 1; }
  100% { transform: translateY(96px) rotate(4deg) scale(.8); opacity: 1; }
}
.ms-folder-front { position: absolute; left: -4px; right: -4px; bottom: -2px; height: 78px; border-radius: 12px; background: linear-gradient(180deg, #059669, var(--ms-g)); display: flex; align-items: center; gap: 10px; padding: 0 12px; box-sizing: border-box; color: #fff; text-align: left; box-shadow: 0 -6px 14px rgba(2, 44, 34, .25); transform-origin: bottom center; transition: transform .45s cubic-bezier(.3, .9, .3, 1.2); }
.ms-folder-front::after { content: ''; position: absolute; left: 12px; right: 12px; top: 8px; height: 3px; border-radius: 3px; background: rgba(255, 255, 255, .35); }
.ms-folder-front b { display: block; font-size: 13px; letter-spacing: .06em; }
.ms-folder-front small { display: block; font-size: 11px; opacity: .9; font-variant-numeric: tabular-nums; }
.is-folder .ms-stack, .is-done .ms-stack, .is-wa .ms-stack { transform: translateY(40px) scale(.5); opacity: 0; }
.is-folder .ms-folder, .is-done .ms-folder, .is-wa .ms-folder { opacity: 1; transform: none; }
.is-folder .ms-folder-front { transform: perspective(300px) rotateX(-14deg); }

.ms-check { position: absolute; left: 50%; top: 4px; width: 44px; height: 44px; margin-left: 44px; border-radius: 50%; display: grid; place-items: center; background: #facc15; color: #0f172a; font-weight: 700; font-size: 22px; transform: scale(0); box-shadow: 0 6px 14px rgba(202, 138, 4, .4); }
.is-done .ms-check, .is-wa .ms-check { animation: ms-pop .5s cubic-bezier(.3, 1.6, .5, 1) .1s both; }
@keyframes ms-pop { from { transform: scale(0) rotate(-30deg); } to { transform: scale(1) rotate(0); } }

.ms-title { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 4px 0 4px; font-weight: 700; font-size: 1.1rem; }
.ms-spin { width: 16px; height: 16px; border-radius: 50%; border: 2.5px solid var(--ms-ln); border-top-color: var(--ms-g); animation: ms-rot .8s linear infinite; }
.is-done .ms-spin, .is-wa .ms-spin { display: none; }
@keyframes ms-rot { to { transform: rotate(360deg); } }
.ms-sub { margin: 0 auto 12px; max-width: 320px; color: var(--ms-mu); font-size: .9rem; line-height: 1.45; }
.ms-bar { height: 6px; border-radius: 6px; background: var(--ms-ln); overflow: hidden; }
.ms-bar i { display: block; height: 100%; width: 0; border-radius: 6px; background: linear-gradient(90deg, var(--ms-g), #34d399); transition: width .3s; }

/* WhatsApp hand-over */
.is-wa .ms-stage { height: 110px; transition: height .4s; }
.is-wa .ms-folder { transform: scale(.7) translateY(-14px); }
.is-wa .ms-bar { display: none; }
.ms-wa { margin-top: 4px; border-radius: 16px; overflow: hidden; border: 1px solid var(--ms-ln); text-align: left; animation: ms-up .5s cubic-bezier(.2, .9, .3, 1.1) both; }
@keyframes ms-up { from { transform: translateY(30px); opacity: 0; } to { transform: none; opacity: 1; } }
.ms-wa-head { display: flex; align-items: center; gap: 10px; padding: 10px 12px; background: #075e54; color: #fff; }
.ms-wa-head svg { width: 26px; height: 26px; flex: 0 0 auto; }
.ms-wa-head b { display: block; font-size: .92rem; letter-spacing: .04em; }
.ms-wa-head small { display: block; font-size: .74rem; opacity: .85; }
.ms-wa-chat { padding: 12px; background: #efeae2; }
html[data-theme="dark"] .ms-wa-chat { background: #0b141a; }
.ms-bubble { position: relative; margin-left: auto; max-width: 92%; padding: 8px 10px 18px; border-radius: 10px 0 10px 10px; background: #d9fdd3; color: #111b21; font-size: .8rem; line-height: 1.45; overflow-wrap: anywhere; box-shadow: 0 1px 1px rgba(0, 0, 0, .1); }
html[data-theme="dark"] .ms-bubble { background: #005c4b; color: #e9edef; }
.ms-attach { display: block; margin-top: 6px; padding: 6px 8px; border-radius: 6px; background: rgba(0, 0, 0, .06); font-weight: 700; }
.ms-time { position: absolute; right: 8px; bottom: 3px; font-size: .66rem; font-style: normal; color: #53bdeb; }

@media (max-width: 380px) { .ms-stage { height: 150px; } .ms-card { padding: 18px 14px 16px; } }
@media (prefers-reduced-motion: reduce) {
  .ms-overlay *, .mf-drop, .mf-doc { animation-duration: .01ms !important; transition: none !important; }
  .ms-flyer { display: none; }
}

/* One-step forms: the Send button sits under the last question (no sticky bar over the fields) */
.rf.mf:not(.mf-multi) .rf-nav { position: static; padding-bottom: 0; }
/* Forms placed inside other pages (Agreement Clinic, property portal) */
.rf-wrap.clinic-form, .rf-wrap.property-form { padding: 0; margin: 16px 0 24px; max-width: none; }
.property-form .rf { text-align: left; }

/* Free viewing times (viewing form) and the note after sending */
.mf-slot[hidden] { display: none; }
.mf-slot-note { margin: var(--s-3) 0; padding: var(--s-2) var(--s-3); border-left: 3px solid var(--c-brand); background: var(--c-surface-2); text-align: left; }

/* Agents' photos (property form) */
.mf-photo-add { margin: var(--s-1) 0 var(--s-2); }
.mf-photo-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(88px, 1fr)); gap: var(--s-2); margin: 0; padding: 0; list-style: none; }
.mf-photo-list li { position: relative; border: 1px solid var(--c-line); border-radius: var(--r-1); overflow: hidden; background: var(--c-surface-2); font-size: var(--t-small); }
.mf-photo-list img { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; }
.mf-photo-list span { display: block; padding: 2px 6px; color: var(--c-muted); }
.mf-photo-list li.is-sent span { color: var(--c-success); font-weight: 600; }
.mf-photo-list li.is-bad span { color: var(--c-error); font-weight: 600; }
/* Property form (owner, 4 Nov 2026): requirement items, the agent's own features, video buttons */
.mf-items { list-style: none; margin: 0 0 var(--s-2); padding: 0; display: grid; gap: var(--s-2); }
.mf-items:empty { display: none; }
.mf-items li { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); padding: var(--s-2) var(--s-3); border: 1px solid var(--c-line); border-radius: var(--r-1); background: var(--c-surface, #fff); }
.mf-items li span { flex: 1 1 12rem; overflow-wrap: anywhere; }
.mf-item-act { min-height: 44px; padding: 0 var(--s-3); border: 1px solid var(--c-line); border-radius: var(--r-1); background: none; color: var(--c-link); font: inherit; font-weight: 600; cursor: pointer; }
.mf-item-act.is-x { color: var(--c-error); }
.mf-item-add { display: flex; gap: var(--s-2); flex-wrap: wrap; margin-top: var(--s-2); }
.mf-item-add .mf-item-input { flex: 1 1 12rem; min-width: 0; min-height: 44px; }
.rf-pill--own { display: inline-flex; align-items: center; gap: 2px; }
.mf-own-x { width: 44px; height: 44px; border: 1px solid var(--c-field); background: var(--c-surface); color: var(--c-ink); font-size: 1.25rem; cursor: pointer; border-radius: var(--r-1); }
.mf-own-x:focus-visible, .mf-item-act:focus-visible { outline: var(--focus-ring); outline-offset: 2px; }
.mf-video-btns { display: flex; gap: var(--s-2); flex-wrap: wrap; margin: var(--s-2) 0; }
.mf-video-btns .rf-btn { text-decoration: none; display: inline-flex; align-items: center; min-height: 44px; }