/**
 * Mudah Developer Projects Hub — lead-capture form styles.
 *
 * Measurements pulled from Figma Dev Mode, not eyeballed:
 *   Register Your Interest / Idle  -- node 5593:72540
 *   Request Brochure / Idle modal  -- node 5585:28664
 *   Request Brochure / Success     -- node 5591:29104
 *
 * The floating-label input is the CSS-only ":placeholder-shown" technique:
 * every input/select needs placeholder=" " (a single space, not empty) for
 * the selector below to distinguish "empty" from "has a value" reliably
 * across browsers -- an empty placeholder="" attribute does not reliably
 * match :placeholder-shown the same way in all engines.
 */

.mlp-form-card {
    width: 336px;
    max-width: 100%;
    background: var(--mlp-surface-white);
    border: 1px solid var(--mlp-border-subtle);
    border-radius: 4px;
    padding: 16px;
    box-sizing: border-box;
}

.mlp-form-head h3 {
    font-family: var(--mlp-font);
    font-weight: 700;
    font-size: 16px;
    line-height: 22px;
    color: var(--mlp-text-hi-emp);
    margin: 0 0 4px;
}

.mlp-form-head p {
    font-family: var(--mlp-font);
    font-size: 14px;
    line-height: 22px;
    color: var(--mlp-text-med-emp);
    margin: 0 0 12px;
    max-width: 304px;
}

.mlp-form { display: flex; flex-direction: column; gap: 12px; }
/* Author-origin declarations always beat the browser's built-in
   `[hidden] { display: none }` UA rule, regardless of specificity -- so
   `.mlp-form { display: flex }` above silently defeated
   `form.hidden = true` in forms.js, leaving the "submitted" form still
   visible on top of the success panel. Caught by actually submitting the
   form and watching the result, not just reading the JS. This explicit
   author-origin rule (not just relying on the attribute) is the standard
   fix. */
.mlp-form[hidden] { display: none; }

/* ---- Floating-label field ------------------------------------------ */

.mlp-field { position: relative; }

.mlp-field input,
.mlp-field select {
    width: 100%;
    height: 44px;
    box-sizing: border-box;
    padding: 0 12px;
    border: 1px solid var(--mlp-surface-gray700, #9e9e9e);
    border-radius: 4px;
    font-family: var(--mlp-font);
    font-size: 14px;
    color: var(--mlp-text-hi-emp);
    background: var(--mlp-surface-white);
    appearance: none;
}

/* 16px on touch widths -- QA sheet: "When tapping on the submit interest or
   request brochure field the pop-up is zoom in". iOS Safari zooms the page
   whenever a focused input's font-size is UNDER 16px, and the base rule
   above is 14px. It's the font size that triggers it, nothing to do with the
   sheet or modal itself -- the whole viewport scales up and the user is left
   having to pinch back out mid-form.
   16px is the fix rather than adding maximum-scale=1 to the viewport meta:
   that would also work, but it disables pinch-zoom for the entire page,
   which is a real accessibility regression and not the plugin's meta to
   change anyway. Desktop keeps 14px, where no such behaviour exists. */
@media (max-width: 899px) {
    .mlp-field input,
    .mlp-field select {
        font-size: 16px;
    }
}

.mlp-field select {
    /* Room for the native arrow we draw ourselves below, matching the
       chevron_down icon in the Figma Unit Selection field. */
    padding-right: 36px;
    cursor: pointer;
}

.mlp-field-select::after {
    content: "";
    position: absolute;
    right: 12px;
    top: 50%;
    width: 10px;
    height: 10px;
    margin-top: -6px;
    border-right: 2px solid var(--mlp-text-med-emp);
    border-bottom: 2px solid var(--mlp-text-med-emp);
    transform: rotate(45deg);
    pointer-events: none;
}

.mlp-field label {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    font-family: var(--mlp-font);
    font-size: 14px;
    color: var(--mlp-text-med-emp);
    background: var(--mlp-surface-white);
    padding: 0 4px;
    pointer-events: none;
    transition: top .12s ease, font-size .12s ease, transform .12s ease;
    max-width: calc(100% - 24px);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mlp-field label em { font-style: italic; }

/* Float the label to sit on the border once the field is focused or has a
   real value.
     - input/textarea: :placeholder-shown is a real CSS pseudo-class, so
       this needs no JS. placeholder=" " (a single space, not empty) is
       required for it to match reliably across browsers.
     - select: :placeholder-shown does NOT apply to <select> in any browser
       -- it's spec'd for input/textarea only. There is no CSS-only way to
       detect "a select has a real value chosen", so forms.js toggles
       .mlp-has-value on the wrapper on 'change'. */
.mlp-field input:focus + label,
.mlp-field input:not(:placeholder-shown) + label,
.mlp-field select:focus + label,
.mlp-field.mlp-has-value label,
.mlp-field-invalid label {
    top: 0;
    font-size: 12px;
    transform: translateY(-50%);
}

.mlp-field input:focus,
.mlp-field select:focus {
    /* Not --mlp-red: Figma's Filled screenshot shows a plain neutral
       border on a focused/filled-but-valid field -- red is reserved for
       the actual error state (.mlp-field-invalid) below. Reusing it here
       would make every focused field look like a mistake. */
    outline: none;
    border-color: var(--mlp-text-hi-emp);
}

/* ---- Error state -----------------------------------------------------
   Toggled by forms.js adding .mlp-field-invalid; kept as a class (not a
   pseudo-class like :invalid) because validity here also covers rules the
   browser has no native concept of, e.g. the MY/SG phone pattern and
   "select a unit". */

.mlp-field-error {
    display: none;
    align-items: center;
    gap: 4px;
    margin: 4px 0 0;
    font-family: var(--mlp-font);
    font-size: 12px;
    line-height: 16px;
    color: var(--mlp-red);
}

.mlp-field-error::before {
    content: "!";
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: var(--mlp-red);
    color: var(--mlp-surface-white);
    font-size: 10px;
    font-weight: 700;
    flex-shrink: 0;
}

.mlp-field-invalid input,
.mlp-field-invalid select {
    border-color: var(--mlp-red);
}

.mlp-field-invalid .mlp-field-error { display: flex; }

/* ---- Eligibility box -------------------------------------------------- */

.mlp-eligibility {
    background: var(--mlp-surface-off-white);
    border-radius: 4px;
    padding: 8px;
    max-width: 304px;
}

.mlp-eligibility-title {
    font-family: var(--mlp-font);
    font-weight: 600;
    font-size: 14px;
    line-height: 22px;
    color: var(--mlp-text-hi-emp);
    margin: 0 0 4px;
}

.mlp-eligibility ul {
    margin: 0;
    padding-left: 18px;
    font-family: var(--mlp-font);
    font-size: 12px;
    line-height: 21px;
    color: var(--mlp-text-hi-emp);
}

.mlp-eligibility li { margin: 0; }
.mlp-eligibility strong { font-weight: 600; }
/* Scheme footnote (the "*This is for the Rumah SelangorKu (RSKU) scheme."
   line in column X). Sits under the list, not as another bullet -- it
   qualifies the starred criteria above rather than being one itself. */
.mlp-eligibility-note {
    margin: 6px 0 0;
    font-size: 11px;
    line-height: 15px;
    color: var(--mlp-text-med-emp);
}

/* ---- Submit button ------------------------------------------------------
   opacity:.4 is the Figma IDLE state itself (node 5593:72596), not a
   guess -- "disabled until valid" is literally how the design specifies
   the button before the form is filled in, not just a UX add-on. */

.mlp-form-submit {
    width: 100%;
    height: 36px;
    border: none;
    border-radius: 8px;
    background: var(--mlp-btn-pri);
    color: var(--mlp-text-rev);
    font-family: var(--mlp-font);
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    box-shadow: var(--mlp-shadow-2dp);
}

.mlp-form-submit:disabled {
    opacity: .4;
    cursor: default;
    box-shadow: none;
}

/* Submission target -- a Google Forms POST needs a real <iframe> target to
   avoid a CORS-blocked fetch/XHR; the response is never read, so it can
   stay invisible. */
.mlp-form-sink {
    position: absolute;
    width: 1px; height: 1px;
    border: 0;
    opacity: 0;
    pointer-events: none;
}

/* ---- Success panel ------------------------------------------------------
   Replaces the form entirely on success, per Figma (node 5598:95869 /
   5591:29104) -- not an inline banner above a now-empty form. */

.mlp-form-success h3 {
    font-family: var(--mlp-font);
    font-weight: 600;
    font-size: 20px;
    line-height: 28px;
    color: var(--mlp-text-hi-emp);
    margin: 0 0 16px;
}

.mlp-form-success p {
    font-family: var(--mlp-font);
    font-size: 14px;
    line-height: 22px;
    color: var(--mlp-text-med-emp);
    margin: 0 0 16px;
}

.mlp-form-back { /* Register Interest success CTA: "Back to Listings" -- a
                    real <a>, not a button; it's pure navigation. */
    display: flex; align-items: center; justify-content: center;
    width: 100%; height: 36px; border-radius: 8px; box-sizing: border-box;
    background: var(--mlp-btn-pri); color: var(--mlp-text-rev);
    font-family: var(--mlp-font); font-weight: 600; font-size: 14px;
    text-decoration: none; cursor: pointer;
}

/* ---- Request Brochure: modal ------------------------------------------- */

.mlp-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, .5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    padding: 16px;
}

.mlp-modal-overlay[hidden] { display: none; }

.mlp-modal {
    position: relative;
    width: 360px;
    max-width: 100%;
    max-height: calc(100vh - 32px);
    overflow-y: auto;
    background: var(--mlp-surface-white);
    border-radius: 4px;
    box-shadow: 0 12px 36px rgba(0, 0, 0, .25);
}

.mlp-modal-body { padding: 20px 16px 16px; }

.mlp-modal-body h3 {
    font-family: var(--mlp-font);
    font-weight: 600;
    font-size: 20px;
    line-height: 28px;
    color: var(--mlp-text-hi-emp);
    margin: 0 0 16px;
}

.mlp-modal-body > p {
    font-family: var(--mlp-font);
    font-size: 14px;
    line-height: 22px;
    color: var(--mlp-text-med-emp);
    margin: 0 0 16px;
}

.mlp-modal-close {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 32px;
    height: 32px;
    border: none;
    background: transparent;
    font-size: 22px;
    line-height: 1;
    color: var(--mlp-text-med-emp);
    cursor: pointer;
}

@media (max-width: 580px) {
    .mlp-form-card,
    .mlp-eligibility { width: 100%; max-width: 100%; }
    .mlp-modal { width: calc(100vw - 32px); }
}

/* ---- Sticky mobile CTA bar --------------------------------------------
   Injected by script.js on the PDP below 900px. Pulled from node
   7824:479159 ("Stick CTA Bar") -- 68px bar, 40px developer-avatar
   circle + an outline "Download Brochure" button + a solid red
   "Register Your Interest" button. The brochure button is neutral
   (--mlp-btn-sec border, high-emphasis black text), NOT red outline --
   an earlier version had that backwards, there being no Dev Mode node
   pulled for this bar at the time. */
/* Reserve the fixed bar's height at the foot of the page. Added by
   script.js only while the bar exists, so desktop keeps no dead space.
   Without it the bar overlays the last 68px of the page permanently. */
body.mlp-has-sticky-cta {
    padding-bottom: 68px;
}

.mlp-sticky-mobile-cta {
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 999;
    display: flex;
    align-items: center;
    gap: 8px;
    height: 68px;
    padding: 8px 18px;
    background: var(--mlp-surface-white);
    box-shadow: 0 -2px 12px rgba(0, 0, 0, .12);
}

.mlp-sticky-cta-avatar {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--mlp-btn-sec);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    font-weight: 800;
    font-size: .68rem;
    color: #fff;
}

.mlp-sticky-cta-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.mlp-sticky-cta-brochure,
.mlp-sticky-cta-interest {
    flex: 1;
    height: 36px;
    border-radius: 8px;
    font-family: var(--mlp-font);
    font-weight: 600;
    font-size: .75rem;
    text-transform: capitalize;
    cursor: pointer;
    white-space: nowrap;
}

.mlp-sticky-cta-brochure {
    background: var(--mlp-surface-white);
    color: var(--mlp-text-hi-emp);
    border: 1px solid var(--mlp-btn-sec);
}

.mlp-sticky-cta-interest {
    background: var(--mlp-btn-pri);
    color: var(--mlp-text-rev);
    border: none;
}

/* ---- Mobile bottom sheet (Register Your Interest) --------------------
   Only opened by JS on <900px when the sticky CTA bar button is tapped.
   Hidden by default via opacity+pointer-events so it's invisible on
   desktop even though the markup is always in the DOM. */
.mlp-sheet-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, .5);
    z-index: 1001;
    display: flex;
    align-items: flex-end;
    opacity: 0;
    pointer-events: none;
    transition: opacity .25s ease;
}

.mlp-sheet-overlay.open {
    opacity: 1;
    pointer-events: all;
}

.mlp-sheet {
    width: 100%;
    background: var(--mlp-surface-white);
    border-radius: 16px 16px 0 0;
    transform: translateY(100%);
    transition: transform .3s cubic-bezier(.4, 0, .2, 1);
    max-height: 90vh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

.mlp-sheet-overlay.open .mlp-sheet {
    transform: translateY(0);
}

.mlp-sheet-handle {
    width: 40px;
    height: 4px;
    background: #d1d5db;
    border-radius: 2px;
    margin: 12px auto 0;
}

.mlp-sheet-body {
    padding: 16px 16px 40px;
}

/* Hide the inline sidebar form on mobile — form is accessed via sheet */
@media (max-width: 899px) {
    .mlp-form-card[data-mlp-form="register-interest"] {
        display: none;
    }
}