/* HousifyHub – "List your property" step flow (2.7.0).
   Loaded only on the submission form (includes/submission-form.php).

   Everything here is scoped to .hk-flow-on, a class assets/js/submission-flow.js
   adds to .hk-submit-wrap when it starts — so without JS (or if the script
   fails) none of this applies and the form stays one normal, fully visible
   page. The one exception is the fixed bottom bar (.hk-flow-bar): the script
   appends it to <body>, outside the wrap.

   Mobile first, one column. Tap targets are at least 44px high.

   Palette (shared with seo-pages.css):
   green #1C4A2F · orange #F5A61E · surface #F4F7F4 · border #D5DFD8
   muted text #5B6B60 · selected #E8F1EA */

/* Same self-hosted variable font as seo-pages.css (one small latin woff2). */
@font-face {
    font-family: 'Plus Jakarta Sans';
    font-style: normal;
    font-weight: 400 800;
    font-display: swap;
    src: url('../fonts/plus-jakarta-sans-latin.woff2') format('woff2');
}

/* ── Flow-only pieces: invisible until the script is running ─────────────── */
.hk-flow-only { display: none; }
.hk-flow-on .hk-flow-only { display: block; }

/* The script shows/hides with the hidden attribute; several of these elements
   have their own display value, which would otherwise override it. */
.hk-flow-on [hidden],
.hk-flow-bar[hidden],
.hk-flow-bar [hidden] { display: none !important; }

.hk-flow-progress .screen-reader-text,
.hk-flow-acc-progress .screen-reader-text {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

/* ── Page ────────────────────────────────────────────────────────────────── */
.hk-submit-wrap.hk-flow-on {
    max-width: 640px;
    margin: 0 auto;
    padding: 0 16px 40px; /* the room for the fixed bottom bar is on <body>, below */
    font-family: 'DM Sans', system-ui, sans-serif;
    color: #16241B;
    box-sizing: border-box;
}

/* Room for the fixed bottom bar at the very end of the page, under the site
   footer, so the footer can be scrolled clear of the bar. The script sets the
   class while the bar is shown and --hk-flow-bar-h to its measured height
   (which already holds the safe-area inset). The fallback is the bar at its
   tallest: buttons plus the extra line of text on the last step. */
body.hk-flow-has-bar {
    padding-bottom: var(--hk-flow-bar-h, calc(112px + env(safe-area-inset-bottom, 0px)));
}
.hk-flow-on *,
.hk-flow-bar * { box-sizing: border-box; }

.hk-flow-on .hk-submit-header { padding: 16px 0 8px; text-align: left; }
.hk-flow-on .hk-submit-header h2 { color: #1C4A2F; font-size: 20px; font-weight: 800; margin: 0; }
.hk-flow-on .hk-submit-header p { display: none; }

/* Replaced by the bottom bar */
.hk-flow-on .hk-submit-footer { display: none; }

/* ── Progress ────────────────────────────────────────────────────────────── */
.hk-flow-on .hk-flow-progress {
    padding: 8px 0 14px;
    scroll-margin-top: 90px; /* stays clear of a sticky site header */
}
.hk-flow-progress-top {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
    font-size: 13px;
}
.hk-flow-progress-step { font-weight: 700; color: #1C4A2F; }
.hk-flow-progress-note { color: #5B6B60; text-align: right; }
.hk-flow-progress-bar {
    display: grid;
    /* Four segments for a signed-in landlord, five for a guest (account step) */
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
    gap: 6px;
    list-style: none;
    margin: 8px 0 0;
    padding: 0;
}
.hk-flow-seg {
    height: 6px;
    border-radius: 3px;
    background: #D5DFD8;
    margin: 0;
    padding: 0;
}
.hk-flow-seg.is-done { background: #1C4A2F; }
.hk-flow-seg[aria-current="step"] { background: #F5A61E; }
.hk-flow-draft-note { margin: 8px 0 0; font-size: 13px; color: #5B6B60; }

/* ── Steps ───────────────────────────────────────────────────────────────── */
.hk-flow-on .hk-step-title {
    margin: 4px 0 12px;
    font-size: 22px;
    line-height: 1.25;
    font-weight: 800;
    color: #1C4A2F;
    outline: none; /* focused by script on step change, not by the user */
}
.hk-flow-on .hk-step-subtitle {
    margin: 0 0 10px;
    font-size: 16px;
    font-weight: 700;
    color: #16241B;
}
.hk-flow-on .hk-form-section {
    background: #fff;
    border: 1px solid #D5DFD8;
    border-radius: 14px;
    box-shadow: none;
    padding: 16px;
    margin-bottom: 12px;
}

/* ── Fields ──────────────────────────────────────────────────────────────── */
.hk-flow-on .hk-form-grid { grid-template-columns: 1fr; gap: 14px; }
.hk-flow-on .hk-form-grid.hk-flow-pair { grid-template-columns: 1fr 1fr; gap: 10px; align-items: start; }
.hk-flow-on .hk-field { gap: 6px; }
.hk-flow-on .hk-field + .hk-field { margin-top: 16px; }
.hk-flow-on .hk-form-grid > .hk-field + .hk-field { margin-top: 0; }
.hk-flow-on .hk-field > label,
.hk-flow-on .hk-field label[for] { font-size: 14px; font-weight: 600; color: #16241B; }
.hk-flow-on .hk-field-hint,
.hk-flow-on .hk-hint { font-size: 13px; color: #5B6B60; }

.hk-flow-on .hk-field input:not([type="checkbox"]),
.hk-flow-on .hk-field select,
.hk-flow-on .hk-field textarea {
    width: 100%;
    min-height: 48px;
    padding: 12px 14px;
    border: 1px solid #D5DFD8;
    border-radius: 12px;
    background: #fff;
    color: #16241B;
    font-family: inherit;
    font-size: 16px; /* 16px stops iOS Safari zooming in on focus */
}
.hk-flow-on .hk-field input:not([type="checkbox"]):focus,
.hk-flow-on .hk-field select:focus,
.hk-flow-on .hk-field textarea:focus {
    outline: none;
    border-color: #1C4A2F;
    box-shadow: 0 0 0 3px rgba(28, 74, 47, .18);
}

/* The selects the cards and chips stand in for */
.hk-flow-on #sf-listing-type,
.hk-flow-on #sf-type { display: none; }

/* Input with a fixed "KES" / "m²" label inside its border */
.hk-flow-on .hk-flow-affix {
    display: flex;
    align-items: center;
    min-height: 48px;
    border: 1px solid #D5DFD8;
    border-radius: 12px;
    background: #fff;
    overflow: hidden;
}
.hk-flow-on .hk-flow-affix:focus-within {
    border-color: #1C4A2F;
    box-shadow: 0 0 0 3px rgba(28, 74, 47, .18);
}
.hk-flow-on .hk-flow-affix-text {
    flex: 0 0 auto;
    padding: 0 0 0 12px;
    font-size: 14px;
    font-weight: 700;
    color: #5B6B60;
}
.hk-flow-on .hk-flow-affix--suffix .hk-flow-affix-text { padding: 0 12px 0 0; }
.hk-flow-on .hk-field .hk-flow-affix input:not([type="checkbox"]) {
    flex: 1 1 auto;
    min-width: 0;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    padding: 12px 10px;
    background: transparent;
}
.hk-flow-on .hk-field .hk-flow-affix input:not([type="checkbox"]):focus { box-shadow: none; }
.hk-flow-on input[type="number"] { -moz-appearance: textfield; appearance: textfield; }
.hk-flow-on input[type="number"]::-webkit-outer-spin-button,
.hk-flow-on input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* Errors — shown at the field they belong to */
.hk-flow-error {
    margin: 2px 0 0;
    font-size: 13px;
    font-weight: 600;
    color: #B42318;
}
.hk-flow-on .hk-flow-invalid input:not([type="checkbox"]),
.hk-flow-on .hk-flow-invalid select,
.hk-flow-on .hk-flow-invalid .hk-flow-affix { border-color: #B42318; }
.hk-flow-on .hk-flow-invalid .hk-flow-affix input { border: 0; }

/* ── Buttons (explicit colours/padding: the theme styles bare <button>s) ─── */
.hk-flow-on .hk-flow-card,
.hk-flow-on .hk-flow-chip,
.hk-flow-on .hk-flow-btn,
.hk-flow-on .hk-flow-link,
.hk-flow-bar button {
    font-family: 'DM Sans', system-ui, sans-serif;
    line-height: 1.3;
    text-transform: none;
    letter-spacing: 0;
    box-shadow: none;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
/* Focus ring. Browsers before Chrome 86 do not know :focus-visible and drop
   every rule that mentions it, so the ring is given on plain :focus first
   (their only signal). Browsers that do know it take it off again for a focus
   that did not come from the keyboard, and are left exactly as they were. */
.hk-flow-on .hk-flow-card:focus,
.hk-flow-on .hk-flow-chip:focus,
.hk-flow-on .hk-flow-btn:focus,
.hk-flow-on .hk-flow-link:focus,
.hk-flow-on summary:focus,
.hk-flow-bar button:focus {
    outline: 3px solid #F5A61E;
    outline-offset: 2px;
}
.hk-flow-on .hk-flow-card:focus:not(:focus-visible),
.hk-flow-on .hk-flow-chip:focus:not(:focus-visible),
.hk-flow-on .hk-flow-btn:focus:not(:focus-visible),
.hk-flow-on .hk-flow-link:focus:not(:focus-visible),
.hk-flow-on summary:focus:not(:focus-visible),
.hk-flow-bar button:focus:not(:focus-visible) {
    outline: none;
}
.hk-flow-on .hk-flow-card:focus-visible,
.hk-flow-on .hk-flow-chip:focus-visible,
.hk-flow-on .hk-flow-btn:focus-visible,
.hk-flow-on .hk-flow-link:focus-visible,
.hk-flow-on summary:focus-visible,
.hk-flow-bar button:focus-visible {
    outline: 3px solid #F5A61E;
    outline-offset: 2px;
}

/* Step 1 — listing type cards */
.hk-flow-on .hk-flow-cards { display: grid; grid-template-columns: 1fr; gap: 10px; }
.hk-flow-on .hk-flow-card,
.hk-flow-on .hk-flow-card:hover,
.hk-flow-on .hk-flow-card:focus {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 2px;
    width: 100%;
    min-height: 64px;
    padding: 12px 16px;
    border: 2px solid #D5DFD8;
    border-radius: 14px;
    background: #fff;
    color: #16241B;
    text-align: left;
}
.hk-flow-on .hk-flow-card-title { font-size: 17px; font-weight: 700; }
.hk-flow-on .hk-flow-card-sub { font-size: 13px; color: #5B6B60; }
.hk-flow-on .hk-flow-card.is-selected,
.hk-flow-on .hk-flow-card.is-selected:hover,
.hk-flow-on .hk-flow-card.is-selected:focus {
    border-color: #1C4A2F;
    background: #E8F1EA;
}
.hk-flow-on .hk-flow-card.is-selected .hk-flow-card-title { color: #1C4A2F; }

/* Step 1 — property type chips; step 3 — amenity chips (same look) */
.hk-flow-on .hk-flow-chip-heading {
    margin: 12px 0 8px;
    font-size: 13px;
    font-weight: 700;
    color: #5B6B60;
}
.hk-flow-on .hk-flow-chip-heading:first-child { margin-top: 0; }
.hk-flow-on .hk-flow-chips,
.hk-flow-on .hk-checkbox-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0;
    font-size: 14px;
}
.hk-flow-on .hk-flow-chip,
.hk-flow-on .hk-flow-chip:hover,
.hk-flow-on .hk-flow-chip:focus,
.hk-flow-on .hk-checkbox-text {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 8px 14px;
    border: 1px solid #D5DFD8;
    border-radius: 12px;
    background: #fff;
    color: #16241B;
    font-size: 14px;
    font-weight: 600;
}
.hk-flow-on .hk-flow-chip.is-selected,
.hk-flow-on .hk-flow-chip.is-selected:hover,
.hk-flow-on .hk-flow-chip.is-selected:focus,
.hk-flow-on .hk-checkbox-label input:checked + .hk-checkbox-text {
    border-color: #1C4A2F;
    background: #E8F1EA;
    color: #1C4A2F;
    font-weight: 700;
}

/* Amenities: the real checkbox stays (keyboard + form value), visually it is
   the chip. No display here on purpose — hkApplyCommercialFields() hides whole
   labels with an inline display:none, which must keep winning. */
.hk-flow-on .hk-checkbox-label {
    position: relative;
    width: auto;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 12px;
    background: none;
    cursor: pointer;
}
.hk-flow-on .hk-checkbox-label:hover { background: none; }
.hk-flow-on .hk-checkbox-label input {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: 0;
    opacity: 0;
}
/* Same three-step focus ring as the buttons above (pre-Chrome 86 fallback). */
.hk-flow-on .hk-checkbox-label input:focus + .hk-checkbox-text {
    outline: 3px solid #F5A61E;
    outline-offset: 2px;
}
.hk-flow-on .hk-checkbox-label input:focus:not(:focus-visible) + .hk-checkbox-text {
    outline: none;
}
.hk-flow-on .hk-checkbox-label input:focus-visible + .hk-checkbox-text {
    outline: 3px solid #F5A61E;
    outline-offset: 2px;
}

.hk-flow-on .hk-flow-btn,
.hk-flow-on .hk-flow-btn:hover,
.hk-flow-on .hk-flow-btn:focus {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 48px;
    padding: 12px 16px;
    border: 1px solid #1C4A2F;
    border-radius: 12px;
    background: #1C4A2F;
    color: #fff;
    font-size: 15px;
    font-weight: 700;
    text-align: center;
    text-decoration: none;
}
.hk-flow-on .hk-flow-btn--secondary,
.hk-flow-on .hk-flow-btn--secondary:hover,
.hk-flow-on .hk-flow-btn--secondary:focus { background: #fff; color: #1C4A2F; }
.hk-flow-on .hk-flow-btn:disabled { opacity: .6; cursor: default; }

.hk-flow-on .hk-flow-link,
.hk-flow-on .hk-flow-link:hover,
.hk-flow-on .hk-flow-link:focus {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 0 4px;
    border: 0;
    border-radius: 8px;
    background: none;
    color: #1C4A2F;
    font-size: 14px;
    font-weight: 700;
    text-decoration: underline;
}

/* "More details" / "Cannot find it?" */
.hk-flow-on .hk-flow-manual,
.hk-flow-on .hk-flow-more { margin-top: 14px; }
.hk-flow-on .hk-flow-manual > summary,
.hk-flow-on .hk-flow-more > summary {
    display: flex;
    align-items: center;
    min-height: 44px;
    font-size: 14px;
    font-weight: 700;
    color: #1C4A2F;
    text-decoration: underline;
    cursor: pointer;
    list-style: none;
}
.hk-flow-on .hk-flow-manual > summary::-webkit-details-marker,
.hk-flow-on .hk-flow-more > summary::-webkit-details-marker { display: none; }
.hk-flow-on .hk-flow-more > summary::after { content: '+'; margin-left: 8px; text-decoration: none; }
.hk-flow-on .hk-flow-more[open] > summary::after { content: '–'; }
.hk-flow-on .hk-flow-manual[open] > summary,
.hk-flow-on .hk-flow-more[open] > summary { margin-bottom: 8px; }

/* ── Step 2 ──────────────────────────────────────────────────────────────── */
.hk-flow-on .hk-flow-search-box { position: relative; }
.hk-flow-on .hk-flow-place-list {
    position: absolute;
    z-index: 1100; /* above the Leaflet map just below */
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    margin: 0;
    padding: 4px;
    list-style: none;
    background: #fff;
    border: 1px solid #D5DFD8;
    border-radius: 12px;
    box-shadow: 0 8px 24px rgba(22, 36, 27, .14);
    max-height: 300px;
    overflow-y: auto;
}
.hk-flow-on .hk-flow-place-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    min-height: 44px;
    margin: 0;
    padding: 8px 12px;
    border-radius: 8px;
    font-size: 15px;
    cursor: pointer;
}
.hk-flow-on .hk-flow-place-item.is-active,
.hk-flow-on .hk-flow-place-item:hover { background: #E8F1EA; }
.hk-flow-on .hk-flow-place-sub { flex: 0 0 auto; font-size: 13px; color: #5B6B60; }
.hk-flow-on .hk-flow-place-item--action { color: #1C4A2F; font-weight: 700; }

.hk-flow-on #hk-flow-locate { margin-top: 10px; }
.hk-flow-on .hk-flow-status { min-height: 20px; margin: 8px 0 0; font-size: 14px; color: #5B6B60; }

.hk-flow-on .hk-flow-location-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: 4px 0 12px;
    padding: 10px 14px;
    border: 1px solid #1C4A2F;
    border-radius: 12px;
    background: #E8F1EA;
    font-size: 15px;
}
.hk-flow-on .hk-flow-location-lines span { color: #5B6B60; }

/* The form's own status lines — the flow has its own (status + result card) */
.hk-flow-on #sf-location-status,
.hk-flow-on #sf-coords-display { display: none !important; }
.hk-flow-on #hk-flow-map-hint { margin: 12px 0 8px; }

/* ── Step 3 ──────────────────────────────────────────────────────────────── */
.hk-flow-on .hk-flow-title {
    margin-top: 16px;
    padding: 12px 14px;
    border-radius: 12px;
    background: #F4F7F4;
}
.hk-flow-on .hk-flow-title-label { display: block; font-size: 13px; color: #5B6B60; }
.hk-flow-on .hk-flow-title-preview strong { display: block; margin-top: 2px; font-size: 16px; line-height: 1.35; }
.hk-flow-on .hk-flow-title .hk-field { margin-top: 8px; }

/* ── Step 4 ──────────────────────────────────────────────────────────────── */
.hk-flow-on .hk-flow-photo-btns { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 12px; }
/* The two buttons replace these */
.hk-flow-on #hk-add-more-btn { display: none !important; }
.hk-flow-on .hk-photo-counter { font-family: inherit; }

@media (max-width: 767px) {
    .hk-flow-on #hk-upload-zone { display: none !important; } /* drag & drop is a desktop thing */
}

/* ── Fixed bottom bar (appended to <body> by the script) ─────────────────── */
.hk-flow-bar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 9990; /* below the mobile fullscreen overlays (100000) */
    padding: 10px 16px calc(10px + env(safe-area-inset-bottom, 0px));
    background: #fff;
    border-top: 1px solid #D5DFD8;
    font-family: 'DM Sans', system-ui, sans-serif;
}
.hk-flow-bar-inner { display: flex; gap: 10px; max-width: 608px; margin: 0 auto; }
.hk-flow-bar button,
.hk-flow-bar button:hover,
.hk-flow-bar button:focus {
    min-height: 48px;
    margin: 0;
    padding: 12px 18px;
    border-radius: 12px;
    font-size: 16px;
    font-weight: 700;
    transform: none;
}
.hk-flow-bar .hk-flow-bar-back,
.hk-flow-bar .hk-flow-bar-back:hover,
.hk-flow-bar .hk-flow-bar-back:focus {
    flex: 0 0 auto;
    border: 1px solid #D5DFD8;
    background: #fff;
    color: #16241B;
}
.hk-flow-bar .hk-flow-bar-next,
.hk-flow-bar .hk-flow-bar-next:hover,
.hk-flow-bar .hk-flow-bar-next:focus {
    flex: 1 1 auto;
    border: 1px solid #1C4A2F;
    background: #1C4A2F;
    color: #fff;
}
.hk-flow-bar #hk-submit-btn,
.hk-flow-bar #hk-submit-btn:hover,
.hk-flow-bar #hk-submit-btn:focus {
    flex: 1 1 auto;
    border: 1px solid #F5A61E;
    background: #F5A61E;
    color: #16241B;
}
.hk-flow-bar #hk-submit-btn:disabled { opacity: .6; cursor: default; }
.hk-flow-bar-note {
    display: none;
    max-width: 608px;
    margin: 8px auto 0;
    font-size: 12px;
    color: #5B6B60;
    text-align: center;
}
.hk-flow-bar.is-last .hk-flow-bar-note { display: block; }

/* ── Submitted ───────────────────────────────────────────────────────────── */
.hk-flow-success { padding: 32px 0 8px; text-align: center; }
.hk-flow-success-tick {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    margin: 0 auto 16px;
    border-radius: 50%;
    background: #E8F1EA;
    color: #1C4A2F;
    font-size: 32px;
    font-weight: 800;
}
.hk-flow-success-title { margin: 0 0 8px; font-size: 24px; font-weight: 800; color: #1C4A2F; outline: none; }
.hk-flow-success-text { margin: 0 0 20px; font-size: 16px; color: #5B6B60; }
.hk-flow-success-card {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    margin: 0 0 20px;
    padding: 14px 16px;
    border: 1px solid #D5DFD8;
    border-radius: 14px;
    background: #fff;
    text-align: left;
    font-size: 16px;
}
.hk-flow-badge {
    padding: 4px 10px;
    border-radius: 999px;
    background: #FDF1D7;
    color: #7A4B00;
    font-size: 13px;
    font-weight: 700;
}
.hk-flow-success .hk-flow-btn { margin-bottom: 10px; }

/* ── Step 5: create your account (guests only, 2.8.0) ────────────────────── */
.hk-flow-on .hk-flow-posting-as {
    margin: 0 0 14px;
    font-size: 15px;
    color: #16241B;
}
.hk-flow-on .hk-flow-acc-exists {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin: 0 0 16px;
    padding: 14px;
    border: 1px solid #F5A61E;
    border-radius: 12px;
    background: #FDF1D7;
    color: #7A4B00;
    font-size: 15px;
}

/* Password with a show/hide button inside the field */
.hk-flow-on .hk-flow-pw { position: relative; }
.hk-flow-on .hk-field .hk-flow-pw input { padding-right: 72px; }
.hk-flow-on .hk-flow-pw-toggle,
.hk-flow-on .hk-flow-pw-toggle:hover,
.hk-flow-on .hk-flow-pw-toggle:focus {
    position: absolute;
    top: 2px;
    right: 2px;
    min-width: 64px;
    min-height: 44px;
    padding: 0 12px;
    border: 0;
    border-radius: 10px;
    background: none;
    box-shadow: none;
    color: #1C4A2F;
    font-family: inherit;
    font-size: 14px;
    font-weight: 700;
    text-transform: none;
    letter-spacing: 0;
    cursor: pointer;
}
.hk-flow-on .hk-flow-pw-toggle:focus { outline: 3px solid #F5A61E; outline-offset: 0; }
.hk-flow-on .hk-flow-pw-toggle:focus:not(:focus-visible) { outline: none; }
.hk-flow-on .hk-flow-pw-toggle:focus-visible { outline: 3px solid #F5A61E; outline-offset: 0; }
.hk-flow-on .hk-flow-forgot {
    align-self: flex-end;
    display: inline-flex;       /* 44px tap target around the small link text */
    align-items: center;
    justify-content: flex-end;
    min-height: 44px;
    min-width: 44px;
    font-size: 13px;
    color: #1C4A2F;
}

.hk-flow-on .hk-flow-terms-label {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    min-height: 44px;
    font-size: 14px;
    font-weight: 400;
    color: #16241B;
    cursor: pointer;
}
.hk-flow-on .hk-flow-terms-label input { flex: 0 0 auto; width: 22px; height: 22px; margin: 1px 0 0; }
.hk-flow-on .hk-flow-terms-label a { position: relative; color: #1C4A2F; font-weight: 700; }
/* Terms / Privacy: the links stay in the sentence; an invisible area above and
   below the text makes each one 44px high to tap. */
.hk-flow-on .hk-flow-terms-label a::after {
    content: '';
    position: absolute;
    top: -13px;
    right: 0;
    bottom: -13px;
    left: 0;
}

/* Honeypot: off-screen rather than display:none, which bots look for */
.hk-flow-hp {
    position: absolute !important;
    left: -9999px !important;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.hk-flow-on .hk-flow-turnstile { margin-top: 16px; min-height: 0; }
.hk-flow-on .hk-flow-acc-switch { margin: 12px 0 0; font-size: 14px; color: #5B6B60; }
.hk-flow-on #hk-flow-login-btn { margin-top: 16px; }
.hk-flow-on #hk-flow-acc-error { margin-bottom: 12px; font-size: 14px; }

/* Progress of the three calls */
.hk-flow-on .hk-flow-progress-line { margin: 0; font-size: 16px; font-weight: 700; color: #1C4A2F; }
.hk-flow-on .hk-flow-failed { list-style: none; margin: 12px 0 0; padding: 0; }
.hk-flow-on .hk-flow-failed:empty { margin: 0; }
.hk-flow-on .hk-flow-failed li {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0;
    padding: 8px 0;
    border-top: 1px solid #D5DFD8;
    font-size: 14px;
    color: #B42318;
}
.hk-flow-on .hk-flow-failed img { flex: 0 0 48px; width: 48px; height: 48px; border-radius: 8px; object-fit: cover; }
.hk-flow-on .hk-flow-failed span { flex: 1 1 auto; }
.hk-flow-on .hk-flow-acc-progress-actions { margin-top: 14px; text-align: center; }

/* Step list while the three calls run (2.9.4, assets/js/flow-run-steps.js).
   Colours of the progress bar: green = done, yellow = now, grey = to come.
   No flex gap (Chrome 80): the icon keeps its distance with a margin. */
.hk-flow-on .hk-flow-run { list-style: none; margin: 0; padding: 0; }
.hk-flow-on .hk-flow-run-step {
    display: flex;
    align-items: center;
    min-height: 44px;
    margin: 0;
    padding: 6px 0;
    box-sizing: border-box;
    font-size: 16px;
    line-height: 1.35;
    color: #1F2A23;
}
.hk-flow-on .hk-flow-run-step + .hk-flow-run-step { border-top: 1px solid #EEF2EF; }
.hk-flow-on .hk-flow-run-text { flex: 1 1 auto; min-width: 0; overflow-wrap: break-word; word-wrap: break-word; }
.hk-flow-on .hk-flow-run-icon {
    position: relative;
    flex: 0 0 22px;
    width: 22px;
    height: 22px;
    margin-right: 12px;
    border-radius: 50%;
    box-sizing: border-box;
}
/* to come: empty grey dot, muted text */
.hk-flow-on .hk-flow-run-step.is-pending { color: #5B6B60; }
.hk-flow-on .is-pending .hk-flow-run-icon { border: 2px solid #D5DFD8; }
/* now: spinner, a little bolder */
.hk-flow-on .hk-flow-run-step.is-active { font-weight: 700; color: #1C4A2F; }
.hk-flow-on .is-active .hk-flow-run-icon {
    border: 3px solid #D5DFD8;
    border-top-color: #F5A61E;
    -webkit-animation: hk-spin .9s linear infinite;
    animation: hk-spin .9s linear infinite;
}
/* done: green tick */
.hk-flow-on .is-done .hk-flow-run-icon { background: #1C4A2F; }
.hk-flow-on .is-done .hk-flow-run-icon:after {
    content: "";
    position: absolute;
    left: 7px;
    top: 3px;
    width: 5px;
    height: 10px;
    border: solid #fff;
    border-width: 0 2px 2px 0;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
}
/* failed: red cross */
.hk-flow-on .hk-flow-run-step.is-error { color: #B42318; font-weight: 600; }
.hk-flow-on .is-error .hk-flow-run-icon { background: #B42318; }
.hk-flow-on .is-error .hk-flow-run-icon:before,
.hk-flow-on .is-error .hk-flow-run-icon:after {
    content: "";
    position: absolute;
    left: 10px;
    top: 5px;
    width: 2px;
    height: 12px;
    background: #fff;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
}
.hk-flow-on .is-error .hk-flow-run-icon:after { -webkit-transform: rotate(-45deg); transform: rotate(-45deg); }

.hk-flow-on .hk-flow-run-note { margin: 12px 0 0; font-size: 14px; color: #5B6B60; }
.hk-flow-on .hk-flow-run-slow { margin: 8px 0 0; font-size: 14px; font-weight: 600; color: #1C4A2F; }
.hk-flow-on .hk-flow-run-slow:empty { display: none; }
/* Status line under the list: only once it carries a message (a failure) */
.hk-flow-on .hk-flow-run + .hk-flow-run-note + .hk-flow-run-slow + .hk-flow-progress-line { margin-top: 12px; }
.hk-flow-on .hk-flow-acc-progress .hk-flow-progress-line:empty { display: none; }

/* No spinning for those who asked for less motion: a still yellow dot */
@media (prefers-reduced-motion: reduce) {
    .hk-flow-on .is-active .hk-flow-run-icon {
        -webkit-animation: none;
        animation: none;
        border-color: #F5A61E;
        background: #FDF0D5;
    }
}

.hk-flow-verify { margin: 0 0 10px; }
.hk-flow-verify .hk-flow-status { margin: 6px 0 0; font-size: 14px; color: #5B6B60; }

/* ── Wider screens ───────────────────────────────────────────────────────── */
@media (min-width: 560px) {
    .hk-flow-on .hk-flow-cards { grid-template-columns: repeat(3, 1fr); }
    .hk-flow-on .hk-flow-manual .hk-form-grid,
    .hk-flow-on .hk-flow-more .hk-form-grid { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 768px) {
    .hk-flow-on .hk-form-section { padding: 20px; }
    /* A desktop has no camera roll to pick between — one button is enough */
    .hk-flow-on .hk-flow-photo-btns { grid-template-columns: 1fr; }
    .hk-flow-on .hk-flow-take-photo { display: none; }
}

/* ── Narrow phones (under 360px) ─────────────────────────────────────────── */
@media (max-width: 359px) {
    /* Price and Floor size under each other: side by side leaves no room for
       a price like 15,000,000 next to the KES prefix. */
    .hk-flow-on .hk-form-grid.hk-flow-pair { grid-template-columns: 1fr; }
}

/* ── Messages for browsers that cannot run the flow / the security check ─── */
.hk-flow-unsupported { margin: 16px 0; }
.hk-flow-on .hk-flow-turnstile-failed { margin: 8px 0 0; font-size: 14px; font-weight: 600; color: #B42318; }
.hk-flow-on .hk-flow-turnstile-failed a { color: #1C4A2F; font-weight: 700; }

/* ── Old Android: Chrome / WebView 80+, Samsung Internet 12+ ─────────────── */
/* Fallbacks only; see "Browserbasislijn" in CONTEXT.md.
 *
 * gap on FLEX containers arrived in Chrome 84 (grid gap works everywhere we
 * care about). It cannot be asked for directly: "@supports (gap: 1px)" is
 * already true in Chrome 66 because of grid, so "@supports not (gap: 1px)"
 * would skip exactly the browsers that need this. The inset property arrived
 * three versions later (Chrome 87, Samsung Internet 14) and stands in for it.
 * Inside the block gap is switched off, so the few versions in between
 * (84-86), which do have flex gap, get the margins and no double spacing. */
@supports not (inset: 0) {
    /* Bottom bar: Back | Continue / Submit. Hidden buttons take no margin. */
    .hk-flow-bar-inner { gap: 0; }
    .hk-flow-bar-inner > :not([hidden]) ~ :not([hidden]) { margin-left: 10px; }

    /* Chips (property types, amenities): they wrap, so every chip gets a
       margin all round and the container pulls the outer edge back in. */
    .hk-flow-on .hk-flow-chips,
    .hk-flow-on .hk-checkbox-grid { gap: 0; margin: -4px; }
    .hk-flow-on .hk-flow-chips > *,
    .hk-flow-on .hk-checkbox-grid > * { margin: 4px; }

    /* A field: label, control, hint, error under each other. */
    .hk-flow-on .hk-field { gap: 0; }
    .hk-flow-on .hk-field > * + * { margin-top: 6px; }

    .hk-flow-on .hk-flow-card { gap: 0; }
    .hk-flow-on .hk-flow-card > * + * { margin-top: 2px; }

    .hk-flow-progress-top { gap: 0; }
    .hk-flow-progress-top > * + * { margin-left: 12px; }

    .hk-flow-on .hk-flow-place-item { gap: 0; }
    .hk-flow-on .hk-flow-place-item > * + * { margin-left: 10px; }

    .hk-flow-on .hk-flow-location-card { gap: 0; }
    .hk-flow-on .hk-flow-location-card > * + * { margin-left: 12px; }

    .hk-flow-success-card { gap: 0; }
    .hk-flow-success-card > * + * { margin-top: 8px; }

    .hk-flow-on .hk-flow-acc-exists { gap: 0; }
    .hk-flow-on .hk-flow-acc-exists > * + * { margin-top: 10px; }

    .hk-flow-on .hk-flow-terms-label { gap: 0; }
    .hk-flow-on .hk-flow-terms-label > * + * { margin-left: 10px; }

    .hk-flow-on .hk-flow-failed li { gap: 0; }
    .hk-flow-on .hk-flow-failed li > * + * { margin-left: 10px; }
}

/* ── 2.10.4: step 1 in two parts (submission-flow.js setPhase()) ────────────
   Part a: listing type + the group as four big buttons (Short stay: three).
   Part b: "For rent · Apartment" + Change, then the exact type as chips.
   Still step 1 for the progress bar and for hk:listing-step. Without JS none
   of this applies (.hk-flow-on) and the plain selects stay. */
.hk-flow-on .hk-step.is-phase-a #sf-type-wrap,
.hk-flow-on .hk-step.is-phase-a #hk-flow-typepick,
.hk-flow-on .hk-step.is-phase-b #sf-listing-type-wrap,
.hk-flow-on .hk-step.is-phase-b #hk-flow-group-wrap { display: none; }
.hk-flow-on .hk-step.is-phase-b #sf-type-wrap > label { display: none; }

.hk-flow-on .hk-flow-groups { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.hk-flow-on .hk-flow-group,
.hk-flow-on .hk-flow-group:hover,
.hk-flow-on .hk-flow-group:focus {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 84px;
    padding: 8px;
    border: 2px solid #D5DFD8;
    border-radius: 12px;
    background: #fff;
    color: #1C4A2F;
    font-family: 'DM Sans', system-ui, sans-serif;
    font-size: 15px;
    font-weight: 700;
    line-height: 1.25;
    text-align: center;
    text-transform: none;
    box-shadow: none;
    cursor: pointer;
}
.hk-flow-on .hk-flow-group svg { margin-bottom: 6px; }
.hk-flow-on .hk-flow-group.is-selected,
.hk-flow-on .hk-flow-group.is-selected:hover,
.hk-flow-on .hk-flow-group.is-selected:focus { border-color: #1C4A2F; background: #E8F1EA; }
.hk-flow-on .hk-flow-group:focus { outline: 3px solid #F5A61E; outline-offset: 2px; }
.hk-flow-on .hk-flow-group:focus:not(:focus-visible) { outline: none; }
.hk-flow-on .hk-flow-group:focus-visible { outline: 3px solid #F5A61E; outline-offset: 2px; }

.hk-flow-on .hk-flow-choice-row { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.hk-flow-on .hk-flow-choice-tag {
    display: inline-flex;
    align-items: center;
    min-height: 36px;
    padding: 0 12px;
    border-radius: 999px;
    background: #E8F1EA;
    color: #1C4A2F;
    font-size: 14px;
    font-weight: 700;
    margin-right: 8px;
}
.hk-flow-on #hk-flow-choice-change { min-height: 44px; }
.hk-flow-on .hk-flow-typepick-title { margin: 0 0 10px; font-size: 20px; font-weight: 800; color: #1C4A2F; }

/* ── 2.14.0 At least one photo ───────────────────────────────────────────────
   The photo part's own message (#hk-photo-msg, role="alert": messages from
   the server and "A listing needs at least 1 photo." when the last photo is
   removed while editing) and the error state of the whole photo part, also
   for the step-4 check (.hk-flow-invalid). Colour as the other field errors. */
.hk-photo-msg { margin: 4px 0 10px; font-size: 13px; font-weight: 600; color: #B42318; }
.hk-photo-msg:empty { display: none; }
#hk-flow-photos.hk-photo-invalid #hk-upload-zone,
#hk-flow-photos.hk-flow-invalid #hk-upload-zone { border-color: #B42318; background: #fef3f2; }
#hk-flow-photos.hk-photo-invalid .hk-flow-photo-btns .hk-flow-btn,
#hk-flow-photos.hk-flow-invalid .hk-flow-photo-btns .hk-flow-btn { border-color: #B42318; }