/* ============================================================================
   qrq-form-elements.css
   ----------------------------------------------------------------------------
   All form-element styling for the kprocess_72 "New Contract Request — Quick"
   wizard lives here. Chrome / layout / wizard-nav styles stay in ttstyles.css.
   Keeping form-element styles separate makes future tweaks (combo redesign,
   datepicker, file upload widgets, etc.) easy to find and edit in isolation.
   Every rule is scoped to `.qrq-form` so other forms in the app are unaffected.
   ============================================================================ */

/* ----- Font family ----------------------------------------------------------
   Browsers do NOT inherit font-family for form elements by default — without
   this, labels render in Open Sans (inherited from <body>) but inputs fall
   back to system-default (Arial / Liberation Sans), producing the mismatched
   look the wizard used to have. */
.qrq-form,
.qrq-form *,
.qrq-form input,
.qrq-form select,
.qrq-form textarea,
.qrq-form button {
    font-family: 'Open Sans', sans-serif !important;
}
/* Exception: boxicons <i> elements MUST keep their own font-family
   (they render glyphs via Private Use Area, so any other font shows a
   placeholder box where the icon should be — exactly the symptom on the
   chip's × icon). Higher specificity than .qrq-form * so this wins. */
.qrq-form i.bx,
.qrq-form i[class^="bx-"],
.qrq-form i[class*=" bx-"] {
    font-family: 'boxicons' !important;
}

/* ----- Section header (label-type field — the "REQUEST INFORMATION" cap) --- */
.qrq-form .tt_f18 {
    font-size: 11px !important;
    font-weight: 700;
    color: #8a7a56;
    margin: 0 0 8px !important;
    padding: 0 0 5px;
    border-bottom: 1px solid #f0ebe0;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    width: 100% !important;
    height: auto !important;
    line-height: 1.3 !important;
}

/* ----- Subgroup heading (label2 — "Residential Documents" etc.) ----- */
.qrq-form .tt_f13 {
    font-size: 11px !important;
    font-weight: 700 !important;
    color: #8a7a56 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.6px !important;
    margin: 6px 0 4px !important;
    padding: 7px 12px !important;
    background: #faf6ea;
    border-left: 3px solid #bd9e4d;
    border-radius: 0 4px 4px 0;
    width: 100% !important;
    box-sizing: border-box;
}

/* ----- Field label ---------------------------------------------------------
   Matches k116-form-label sizing — small, semibold, brown. */
.qrq-form .tt_f12.k_lnh10 {
    font-size: 11px !important;
    font-weight: 600;
    color: #5a5445;
    letter-spacing: 0;
    text-transform: none;
    height: auto !important;
    line-height: 1.4 !important;
    margin-bottom: 4px;
}

/* ----- Text-like inputs (NOT textarea — textarea is sized separately
   below so its resize handle actually works). -------------------- */
.qrq-form input[type="text"],
.qrq-form input[type="number"],
.qrq-form input[type="date"],
.qrq-form input[type="time"],
.qrq-form input[type="password"],
.qrq-form input[type="email"],
.qrq-form input[type="tel"],
.qrq-form input[type="url"] {
    padding: 0 12px !important;
    font-size: 12px;
    border: 1px solid #e2d7bf !important;
    border-radius: 6px;
    background: #fff !important;
    color: #3d3830;
    box-sizing: border-box;
    height: 34px !important;
    transition: border-color 0.2s, box-shadow 0.2s;
    width: 100%;
}
/* Textarea — vertical resize only (drag handle works).
   No !important on height so the browser's inline `style="height: Npx"`
   set by the drag handle takes effect. min-height keeps the starting
   size; max-width locks the textarea to the column so it can't grow
   horizontally even via the bottom-right grip. */
.qrq-form textarea {
    width: 100%;
    max-width: 100%;
    min-height: 90px;
    padding: 8px 12px !important;
    font-size: 12px;
    border: 1px solid #e2d7bf !important;
    border-radius: 6px;
    background: #fff !important;
    color: #3d3830;
    box-sizing: border-box;
    resize: vertical;        /* only vertical handle */
    line-height: 1.45;
    transition: border-color 0.2s, box-shadow 0.2s;
}

/* Focus ring — gold halo, no harsh outline */
.qrq-form input:focus,
.qrq-form select:focus,
.qrq-form textarea:focus {
    border-color: #c0a76d !important;
    box-shadow: 0 0 0 3px rgba(192, 167, 109, 0.18) !important;
    outline: none;
}
.qrq-form input::placeholder,
.qrq-form textarea::placeholder {
    color: #b5a785;
    font-weight: 400;
}
.qrq-form input[readonly],
.qrq-form .k_txt_gr {
    background: #f5f1e8 !important;
    color: #8a7a56 !important;
    cursor: not-allowed;
}

/* ============================================================================
   COMBO (native <select>) — styled to look like a designed dropdown
   ============================================================================
   The form renderer emits native <select> elements. Native selects can't be
   fully redesigned across browsers (the open-list panel is OS-controlled),
   but the *closed* trigger can be styled to match the rest of the form, and
   the chevron can be replaced with a custom SVG so it sits in the brand tone.
   Phase 2 of this work will swap the trigger for a `.k-mc-wrap` searchable
   wrapper — at which point this combo styling becomes the fallback for
   browsers without JS or for combos we explicitly opt out of. */
.qrq-form select {
    /* Reset native chrome so we own the look */
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;

    /* Match input metrics exactly so a combo + input pair align */
    padding: 0 32px 0 12px !important;       /* right space for the chevron */
    font-size: 12px;
    height: 34px !important;
    box-sizing: border-box;
    width: 100%;

    border: 1px solid #e2d7bf !important;
    border-radius: 6px;
    background-color: #fff !important;
    color: #3d3830;
    cursor: pointer;
    transition: border-color 0.2s, box-shadow 0.2s;

    /* Custom gold chevron baked in as a tiny SVG */
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'><path fill='none' stroke='%23bd9e4d' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round' d='M1 1.5l5 5 5-5'/></svg>");
    background-repeat: no-repeat;
    background-position: right 10px center;
    background-size: 12px 8px;
}
.qrq-form select:hover {
    border-color: #d4c49a !important;
}
.qrq-form select:focus {
    border-color: #c0a76d !important;
    box-shadow: 0 0 0 3px rgba(192, 167, 109, 0.18) !important;
    outline: none;
}
.qrq-form select:disabled {
    background-color: #f5f1e8 !important;
    color: #8a7a56 !important;
    cursor: not-allowed;
    opacity: 1;
}
/* IE / legacy Edge — hide the native dropdown arrow */
.qrq-form select::-ms-expand { display: none; }

/* ============================================================================
   k-sc — single searchable combo (replaces native <select> for case "combo")
   ============================================================================
   Sibling to the k-mc multi-combo system in ttstyles.css.
   PHP renders:
     <div class="k-sc-wrap" data-options='[…]' data-onchange="rselect_combo(id)">
       <div class="k-sc-display">…<i bx-chevron-down/></div>
       <div class="k-sc-dropdown" style="display:none;">
         <div class="k-sc-search-row"><input class="k-sc-search"></div>
         <div class="k-sc-list"></div>
       </div>
       <input type="hidden" id="{id}_cgval">
     </div>
   apps.js handles open/close/search/select. */

.qrq-form .k-sc-wrap {
    position: relative;
    width: 100%;
    box-sizing: border-box;
}

/* Trigger — visually identical metrics to .qrq-form input + select */
.qrq-form .k-sc-display {
    height: 34px;
    padding: 0 32px 0 12px;
    border: 1px solid #e2d7bf;
    border-radius: 6px;
    background-color: #fff;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'><path fill='none' stroke='%23bd9e4d' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round' d='M1 1.5l5 5 5-5'/></svg>");
    background-repeat: no-repeat;
    background-position: right 10px center;
    background-size: 12px 8px;
    cursor: pointer;
    display: flex;
    align-items: center;
    transition: border-color 0.2s, box-shadow 0.2s;
    user-select: none;
    box-sizing: border-box;
}
.qrq-form .k-sc-display:hover {
    border-color: #d4c49a;
}
.qrq-form .k-sc-wrap[data-open="1"] .k-sc-display {
    border-color: #c0a76d;
    box-shadow: 0 0 0 3px rgba(192, 167, 109, 0.18);
}
.qrq-form .k-sc-display-text {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 12px;
    color: #3d3830;
}
.qrq-form .k-sc-placeholder { color: #b5a785; }
.qrq-form .k-sc-arrow { display: none; }

/* Dropdown panel — anchored under the trigger, full trigger width */
.qrq-form .k-sc-dropdown {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    width: 100%;
    z-index: 1500;
    background: #fff;
    border: 1px solid #e2d7bf;
    border-radius: 6px;
    box-shadow: 0 8px 22px rgba(60, 45, 15, 0.14);
    max-height: 260px;
    flex-direction: column;
    overflow: hidden;
    box-sizing: border-box;
}

/* Search bar at the top of the dropdown */
.qrq-form .k-sc-search-row {
    padding: 6px;
    border-bottom: 1px solid #f0ebe0;
    flex-shrink: 0;
    background: #fafaf6;
}
.qrq-form .k-sc-search {
    width: 100% !important;
    height: 28px !important;
    padding: 0 10px !important;
    font-size: 12px;
    border: 1px solid #e2d7bf !important;
    border-radius: 4px !important;
    background: #fff !important;
    box-sizing: border-box;
}
.qrq-form .k-sc-search:focus {
    outline: none;
    border-color: #c0a76d !important;
    box-shadow: 0 0 0 2px rgba(192, 167, 109, 0.12) !important;
}

/* Option list */
.qrq-form .k-sc-list {
    overflow-y: auto;
    flex: 1;
    padding: 4px;
    scrollbar-width: thin;
    scrollbar-color: #cdb985 transparent;
}
.qrq-form .k-sc-list::-webkit-scrollbar { width: 6px; }
.qrq-form .k-sc-list::-webkit-scrollbar-track { background: transparent; }
.qrq-form .k-sc-list::-webkit-scrollbar-thumb {
    background: #cdb985;
    border-radius: 3px;
}
.qrq-form .k-sc-list::-webkit-scrollbar-thumb:hover { background: #bd9e4d; }

.qrq-form .k-sc-option {
    padding: 8px 10px;
    font-size: 12px;
    color: #3d3830;
    cursor: pointer;
    border-radius: 4px;
    transition: background 0.1s;
    line-height: 1.3;
}
.qrq-form .k-sc-option:hover {
    background: #f5f0e6;
}
.qrq-form .k-sc-option-selected {
    background: #ede2c2;
    color: #5a4720;
    font-weight: 600;
}
/* "— None —" clear option — pinned at the top, muted styling so it reads
   as a utility action, separated from real options by a thin divider. */
.qrq-form .k-sc-option-clear {
    color: #b5a785;
    font-style: italic;
    border-bottom: 1px solid #f0ebe0;
    margin-bottom: 4px;
    padding-bottom: 8px;
}
.qrq-form .k-sc-option-clear.k-sc-option-selected {
    background: transparent;
    color: #8a7a56;
    font-weight: 500;
}
.qrq-form .k-sc-empty {
    padding: 12px 10px;
    color: #b5a785;
    font-size: 11px;
    text-align: center;
    font-style: italic;
}

/* ============================================================================
   vtext — read-only display field. Same metrics as a real input so the
   form alternates cleanly between editable + display rows. Slightly tinted
   background + lock icon hint that this value is auto-filled, not editable.
   When empty, shows a muted dash so the row doesn't visually collapse.
   ============================================================================ */
.qrq-form .qrq-vtext {
    width: 100%;
    height: 34px;
    padding: 0 12px 0 30px;          /* room on the left for the lock icon */
    box-sizing: border-box;
    border: 1px solid #e2d7bf;
    border-radius: 6px;
    background: #faf6ea;
    color: #5a4720;
    font-size: 12px;
    line-height: 32px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    cursor: default;
    position: relative;
    user-select: text;               /* still let the user copy the value */
}
/* Lock icon — pure CSS, no extra DOM. boxicons puts bx-lock-alt at U+EB9B */
.qrq-form .qrq-vtext::before {
    content: "\eb9b";
    font-family: 'boxicons';
    font-weight: 400;
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
    color: #bd9e4d;
    font-size: 13px;
    line-height: 1;
    opacity: 0.7;
}
/* Empty-state placeholder dash */
.qrq-form .qrq-vtext:empty::after {
    content: "—";
    color: #c0a76d;
    font-weight: 400;
}

/* ============================================================================
   Unit Picker (k-up-wrap inside .qrq-form)
   ----------------------------------------------------------------------------
   Reuses the access-picker shell (k-ap-wrap / k-ap-chip / k-ap-search /
   k-ap-dropdown / k-ap-opt) and adds its own row layout: a custom checkbox
   on the left + the unit label. Click anywhere on the row → toggle.
   ============================================================================ */

/* Outer shell — give the unit picker its own breathing room so the chip
   row + search input read as a single control sized like our inputs. */
.qrq-form .k-up-wrap {
    width: 100%;
    min-height: 38px;
    background: #fff;
    border: 1px solid #e2d7bf;
    border-radius: 6px;
    padding: 4px 6px;
    box-sizing: border-box;
    transition: border-color 0.2s, box-shadow 0.2s;
    position: relative;
}
.qrq-form .k-up-wrap:focus-within {
    border-color: #c0a76d;
    box-shadow: 0 0 0 3px rgba(192, 167, 109, 0.18);
}

/* Chips row — same look as access picker chips */
.qrq-form .k-up-wrap .k-ap-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    padding: 0;
}
.qrq-form .k-up-wrap .k-ap-chips:empty { display: none; }
.qrq-form .k-up-wrap .k-ap-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: #ede2c2;
    color: #5a4720;
    border: 1px solid #d4c49a;
    border-radius: 12px;
    padding: 2px 8px;
    font-size: 11px;
    font-weight: 500;
}
.qrq-form .k-up-wrap .k-ap-chip-del {
    cursor: pointer;
    color: #8a7a56;
    font-size: 14px;
    line-height: 1;
}
.qrq-form .k-up-wrap .k-ap-chip-del:hover { color: #c84a3a; }

/* Search input inside the picker — flush with chips, no own border */
.qrq-form .k-up-wrap .k-ap-search-row {
    display: flex;
    width: 100%;
}
.qrq-form .k-up-wrap .k-ap-search {
    flex: 1;
    border: none !important;
    background: transparent !important;
    height: 28px !important;
    padding: 0 4px !important;
    font-size: 12px;
    color: #3d3830;
    outline: none !important;
    box-shadow: none !important;
}
.qrq-form .k-up-wrap .k-ap-search:focus {
    outline: none !important;
    box-shadow: none !important;
}

/* Dropdown — absolutely positioned BELOW the wrap, full width, scrollable */
.qrq-form .k-up-wrap .k-ap-dropdown {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    width: 100%;
    z-index: 1500;
    background: #fff;
    border: 1px solid #e2d7bf;
    border-radius: 6px;
    box-shadow: 0 8px 22px rgba(60, 45, 15, 0.14);
    max-height: 260px;
    overflow-y: auto;
    box-sizing: border-box;
    padding: 4px;
    scrollbar-width: thin;
    scrollbar-color: #cdb985 transparent;
}
.qrq-form .k-up-wrap .k-ap-dropdown::-webkit-scrollbar { width: 6px; }
.qrq-form .k-up-wrap .k-ap-dropdown::-webkit-scrollbar-track { background: transparent; }
.qrq-form .k-up-wrap .k-ap-dropdown::-webkit-scrollbar-thumb {
    background: #cdb985;
    border-radius: 3px;
}

/* Each option row — checkbox + label. margin-bottom (not dropdown
   flex gap) gives a small breathing space between rows so
   adjacent checked options don't visually merge into one
   continuous tan block. Directive 2026-07-22 "fix the quick form
   unit picker as well" — mirrors the same fix on the prospect-
   detail Unit section picker. :last-child reset so the trailing
   option doesn't leave dead space at the dropdown's bottom. */
.qrq-form .k-up-wrap .k-ap-opt {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    margin-bottom: 3px;
    font-size: 12px;
    color: #3d3830;
    cursor: pointer;
    border-radius: 4px;
    transition: background 0.1s;
    user-select: none;
}
.qrq-form .k-up-wrap .k-ap-opt:last-child { margin-bottom: 0; }
.qrq-form .k-up-wrap .k-ap-opt:hover {
    background: #f5f0e6;
}
.qrq-form .k-up-wrap .k-ap-opt.is-checked {
    background: #ede2c2;
    color: #5a4720;
}

/* Custom checkbox cell — 18px rounded square, gold-on-check.
   Sizing + position-anchor make the check mark sit dead-centre. */
.qrq-form .k-up-wrap .k-ap-opt-cb {
    flex: 0 0 18px;
    width: 18px;
    height: 18px;
    border: 1.5px solid #cdb985;
    border-radius: 4px;
    background: #fff;
    position: relative;
    pointer-events: none;
    box-sizing: border-box;
    transition: background 0.14s ease, border-color 0.14s ease, box-shadow 0.14s ease;
}
/* Hover on the parent row gives the unchecked box a hint of gold. */
.qrq-form .k-up-wrap .k-ap-opt:hover .k-ap-opt-cb {
    border-color: #bd9e4d;
}
.qrq-form .k-up-wrap .k-ap-opt.is-checked .k-ap-opt-cb {
    background: #bd9e4d;
    border-color: #bd9e4d;
    box-shadow: 0 0 0 1px #bd9e4d inset;
}
/* Crisp white tick — geometric (no font, no SVG round-trip). The
   transform-origin keeps it anchored as we tweak size. */
.qrq-form .k-up-wrap .k-ap-opt.is-checked .k-ap-opt-cb::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 5px;
    height: 10px;
    border: solid #fff;
    border-width: 0 2px 2px 0;
    transform: translate(-50%, -60%) rotate(45deg);
    transform-origin: center;
}

.qrq-form .k-up-wrap .k-ap-opt-label {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.qrq-form .k-up-wrap .k-ap-empty,
.qrq-form .k-up-wrap .k-ap-loading {
    padding: 10px;
    text-align: center;
    color: #b5a785;
    font-size: 11px;
    font-style: italic;
}


/* ----- Required asterisk --------------------------------------------------- */
.qrq-form span[style*="ab050b"] {
    color: #c84a3a !important;
    font-weight: 700;
    margin-left: 3px;
}

/* ----- Field column spacing — only vertical now. The horizontal gap
   between sibling columns is supplied by `column-gap: 14px` on the
   inner-wrapper flex container in ttstyles.css, so no padding-right
   here is needed — and removing it lets 2x 50% rows fill 100%. */
.qrq-form div[class*="k_floatl"][class*="k_padr5"] {
    margin-bottom: 16px !important;
    padding-right: 0 !important;
}

/* ----- Validation error highlight + inline error message ------------------- */
.qrq-form input.qrq-error,
.qrq-form select.qrq-error,
.qrq-form textarea.qrq-error {
    border-color: #c84a3a !important;
    background: #fff5f3 !important;
    box-shadow: 0 0 0 2px rgba(200, 74, 58, 0.18) !important;
}
/* Also highlight the k-sc trigger when its hidden input has .qrq-error */
.qrq-form .k-sc-wrap input[type="hidden"].qrq-error + .k-sc-display,
.qrq-form .k-sc-wrap .k-sc-display.qrq-error {
    border-color: #c84a3a !important;
    background-color: #fff5f3 !important;
    box-shadow: 0 0 0 2px rgba(200, 74, 58, 0.18) !important;
}
/* Inline error message — injected by apps.js under the failing column.
   display:block + width:100% + clear:both keeps it on its own line,
   clearing any floats that the column wrapper still has from the
   legacy renderer. */
.qrq-form .qrq-error-msg {
    display: block !important;
    width: 100% !important;
    clear: both !important;
    box-sizing: border-box;
    /* margin-top: small gap between control and message
       margin-bottom: negative so the column's 16px margin-bottom doesn't
                      pile on top of the message, keeping the row-to-row
                      spacing roughly the same whether an error is shown or not */
    margin: 4px 0 -6px 0 !important;
    padding: 0 !important;
    font-size: 11px;
    font-weight: 500;
    line-height: 1.3;
    color: #c84a3a;
}

/* Paired-50% layout fix.
   The legacy renderer puts `k_padr5` (padding-right: 5px) on EVERY
   .w_50p .qrq-field. The form is a flex container with
   `column-gap: 14px` (see ttstyles.css ~line 16364) and the
   `.qrq-form > div > .w_50p` rule sets each pair half to
   `flex: 0 0 calc(50% - 7px); max-width: calc(50% - 7px);`. So the
   gutter is ALREADY handled by flex column-gap — and every pair half
   is the same width.

   The ONLY job for us here is:
     1. box-sizing: border-box so any inner padding does not push the
        layout past 100%.
     2. Zero out the legacy 5px lateral padding so it does not stack
        on top of the column-gap (the prior version of this rule
        attempted to ADD 5px back via padding-left/right; with CSS
        sibling selectors, runs of 3+ `.w_50p` in a row matched both
        the first-of-pair and second-of-pair selectors, leaving
        middle items with padding on BOTH sides — which is the
        "Passport / Work Place input shifted right" pattern fixed
        here on 2026-06-29).

   Left column of a pair: starts at row's x=0, ends at x=calc(50% - 7px)
   Right column of a pair: starts at x=calc(50% + 7px), ends at x=100%
   Both columns are the same width and align with full-width fields'
   left & right edges respectively. The 14px gutter between them is
   the natural flex column-gap, NOT a hand-rolled padding. */
.qrq-form .qrq-field {
    box-sizing: border-box;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* Tenant Company Information sub-section.
   The renderer (pages/kprocess_72.php ~line 2301) wraps qvreq2_25..30
   in <div class="qrq-company-section" id="qrq_company_section">. That
   wrapper breaks the flex layout from ttstyles.css ~16353 because the
   company fields are no longer DIRECT children of the main flex
   container — they're nested one level deeper inside this wrapper.
   Result without this rule: .w_50p falls back to the bare
   `width: 50%;` from ttstyles.css line 7438 and the two halves sit
   flush against each other with NO gutter (the 14px column-gap from
   the parent flex doesn't reach here).
   Fix: make the wrapper its own flex container with identical layout
   rules so Company Name / Name Arabic etc. align the same way as
   the unwrapped sections above. width:100% so the wrapper takes a
   full row in the parent flex.  */
.qrq-form .qrq-company-section {
    width: 100% !important;
    display: flex !important;
    flex-wrap: wrap;
    align-content: flex-start;
    column-gap: 14px;
    row-gap: 0;
}
/* Hidden state — takes precedence over the display:flex above.
   JS applies this class via qrq_form.js _qrqContractTypeCompanyWire
   whenever the section shouldn't be visible (Contract Type = Personal
   OR Tenant Type = Existing Tenant). Without an !important-beating
   rule the inline style.display='none' the JS used to set was silently
   overridden by the flex rule and the section stayed visible — that
   was the "regardless still visible" bug fixed on 2026-06-29. */
.qrq-form .qrq-company-section.qrq-hidden {
    display: none !important;
}
.qrq-form .qrq-company-section > .w_100p { flex: 0 0 100%;                  max-width: 100%; }
.qrq-form .qrq-company-section > .w_50p  { flex: 0 0 calc(50% - 7px);       max-width: calc(50% - 7px); }
.qrq-form .qrq-company-section > .w_33_3p,
.qrq-form .qrq-company-section > .w_33p  { flex: 0 0 calc(33.333% - 9.333px); max-width: calc(33.333% - 9.333px); }
.qrq-form .qrq-company-section > .w_25p  { flex: 0 0 calc(25% - 10.5px);    max-width: calc(25% - 10.5px); }
.qrq-form .qrq-company-section > .w_35p  { flex: 0 0 calc(35% - 9.1px);     max-width: calc(35% - 9.1px); }
.qrq-form .qrq-company-section > .w_65p  { flex: 0 0 calc(65% - 4.9px);     max-width: calc(65% - 4.9px); }

/* Kill all the wrapper height/padding/margin that adds invisible space
   between the visible field control and the error message below. The
   legacy renderer uses several intermediate divs — each one was sitting
   on its own height / float context. Squashing them all to natural
   block flow with auto height makes the error message hug the control. */
.qrq-form .qrq-field > div.h_30,
.qrq-form .qrq-field > div[class*=" h_30"] {
    height: auto !important;
    min-height: 0 !important;
    padding: 0 !important;
    margin-bottom: 0 !important;
    line-height: 0 !important;     /* kills any text-baseline gap below children */
    display: block !important;
}
.qrq-form .qrq-field [id^="upd_"] {
    height: auto !important;
    min-height: 0 !important;
    line-height: 0 !important;
    display: block !important;
}
/* Restore line-height inside the actual control */
.qrq-form .qrq-field input,
.qrq-form .qrq-field select,
.qrq-form .qrq-field .k-sc-display,
.qrq-form .qrq-field .k-sc-display-text {
    line-height: 1.4 !important;
}

/* The legacy input wrapper inside each field column is h_30 (30 px), but
   our combo / textarea / inputs are 34 px tall — they overflow downward
   and eat the gap above the error message. Let the wrapper auto-size to
   its content so the error message gets its full margin. */
.qrq-form .qrq-field > div.h_30,
.qrq-form .qrq-field > div[class*=" h_30"],
.qrq-form .qrq-field > div[class*="h_30 "] {
    height: auto !important;
    min-height: 34px;
}
.qrq-form .qrq-error-msg::before {
    content: "⚠ ";
    color: #c84a3a;
    margin-right: 2px;
}

/* ----- Checkboxes / radios — gold-accented custom UI ----------------------- */
.qrq-form input[type="checkbox"],
.qrq-form input[type="radio"] {
    appearance: none;
    -webkit-appearance: none;
    width: 18px !important;
    height: 18px !important;
    border: 1.5px solid #d4c49a;
    background: #fff;
    cursor: pointer;
    transition: background .12s, border-color .12s, box-shadow .12s;
    position: relative;
    vertical-align: middle;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    flex-shrink: 0;
}
.qrq-form input[type="checkbox"] { border-radius: 4px; }
.qrq-form input[type="radio"]    { border-radius: 50%; }
.qrq-form input[type="checkbox"]:hover,
.qrq-form input[type="radio"]:hover {
    border-color: #bd9e4d;
}
.qrq-form input[type="checkbox"]:checked,
.qrq-form input[type="radio"]:checked {
    background: #bd9e4d;
    border-color: #bd9e4d;
}
.qrq-form input[type="checkbox"]:checked::after {
    content: "";
    position: absolute;
    /* Transform-based centering — fixed-pixel positioning drifted off
       centre at different zoom levels. The -60% Y compensates for the
       check's optical centre sitting a hair above its geometric centre
       after the 45deg rotation, so it looks visually centred. */
    top: 50%;
    left: 50%;
    width: 4px;
    height: 8px;
    border: solid #fff;
    border-width: 0 2px 2px 0;
    transform: translate(-50%, -60%) rotate(45deg);
}
.qrq-form input[type="radio"]:checked::after {
    content: "";
    position: absolute;
    /* Same approach for the radio dot — pixel-perfect centred at every
       scale via translate. */
    top: 50%;
    left: 50%;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #fff;
    transform: translate(-50%, -50%);
}
.qrq-form input[type="checkbox"]:focus,
.qrq-form input[type="radio"]:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(189, 158, 77, 0.18);
}

/* Checkbox / radio row — option label + box on the same baseline */
.qrq-form div[class*="k_floatl"][class*="w_33_3p"],
.qrq-form div[class*="k_floatl"][class*="w_100p"][class*="h_26"] {
    display: flex !important;
    align-items: center;
    gap: 8px;
    margin-bottom: 6px !important;
}
.qrq-form div[class*="k_floatl"][class*="w_33_3p"] > div,
.qrq-form div[class*="k_floatl"][class*="w_100p"][class*="h_26"] > div {
    float: none !important;
    width: auto !important;
    height: auto !important;
    margin: 0 !important;
}
.qrq-form div[class*="k_floatl"][class*="w_33_3p"] > div:last-child,
.qrq-form div[class*="k_floatl"][class*="w_100p"][class*="h_26"] > div:last-child {
    font-size: 12px !important;
    color: #3d3830 !important;
    line-height: 1.3 !important;
    cursor: pointer;
    flex: 1;
}

/* =====================================================================
   Unit Information dynamic details panel + per-unit cards.
   Injected into the form by apps.js _kUpEnsureUnitDetailsPanel() the
   first time fi_qvreq0_1 (Unit ID picker) is touched. Server-side
   handler fetch_unit_details_multi fills it.

   Static qvreq0_6..12 (Electricity, Water, Rooms, Area, Type, Rent, Min)
   are hidden visually because the cards now own that display. The DOM
   nodes stay so kUpSetPrimary can still copy primary-unit values into
   them for the existing form-submit flow.
   ================================================================== */
.qrq-form .qrq-field:has(#fi_qvreq0_6),
.qrq-form .qrq-field:has(#fi_qvreq0_7),
.qrq-form .qrq-field:has(#fi_qvreq0_8),
.qrq-form .qrq-field:has(#fi_qvreq0_9),
.qrq-form .qrq-field:has(#fi_qvreq0_10),
.qrq-form .qrq-field:has(#fi_qvreq0_11),
.qrq-form .qrq-field:has(#fi_qvreq0_12) {
    display: none !important;
}

.qrq-unit-details-panel {
    margin-top: 8px;
}
.qrq-unit-details-empty {
    color: #9a8e6a;
    font-size: 12.5px;
    padding: 14px 16px;
    text-align: center;
    background: #faf6e9;
    border: 1px dashed #d8c98a;
    border-radius: 6px;
}
.qrq-unit-card {
    background: #fff;
    border: 1px solid #e7dfbf;
    border-radius: 6px;
    padding: 10px 14px;
    margin-bottom: 8px;
    box-shadow: 0 1px 2px rgba(0,0,0,0.03);
}
.qrq-unit-card:last-child {
    margin-bottom: 0;
}
.qrq-unit-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 8px;
    border-bottom: 1px solid #efe6c2;
    margin-bottom: 8px;
    gap: 12px;
}
.qrq-unit-card-title {
    font-weight: 600;
    color: #8a7126;
    font-size: 13px;
    flex: 1 1 auto;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
/* Primary unit picker — styled as a Kate-gold pill toggle. The native
   radio is visually hidden; the LABEL is the button. Selected state
   flips background to filled gold with a check mark. */
.qrq-primary-radio {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    color: #8a7126;
    cursor: pointer;
    user-select: none;
    flex: 0 0 auto;
    padding: 4px 12px;
    border: 1.5px solid #d8c98a;
    border-radius: 14px;
    background: #faf6e9;
    transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
    white-space: nowrap;
    position: relative;
}
.qrq-primary-radio:hover {
    background: #f0e8c8;
    border-color: #bd9e4d;
}
.qrq-primary-radio input[type="radio"] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
    width: 0;
    height: 0;
}
.qrq-primary-radio:has(input[type="radio"]:checked) {
    background: #bd9e4d;
    border-color: #bd9e4d;
    color: #fff;
}
.qrq-primary-radio:has(input[type="radio"]:checked):hover {
    background: #a8893d;
    border-color: #a8893d;
}
.qrq-primary-radio:has(input[type="radio"]:checked) span::before {
    content: '\2713';
    margin-right: 4px;
    font-weight: 700;
}
.qrq-unit-card-body {
    display: flex;
    flex-wrap: wrap;
}
.qrq-unit-card-field {
    flex: 1 1 50%;
    padding: 4px 6px;
    min-width: 0;
}
.qrq-unit-card-field-label {
    color: #9a8e6a;
    font-size: 10.5px;
    line-height: 1.2;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    margin-bottom: 2px;
}
.qrq-unit-card-field-value {
    color: #2a2a2a;
    font-size: 13px;
    line-height: 1.4;
    word-break: break-word;
}

/* ============================================================================
   check_h checkbox group — Contract Include Information etc.
   Each option is a <label> so clicking text/whitespace toggles the box.
   3 columns at narrow widths, 2 at very narrow, 1 on tiny screens.
   ============================================================================ */
.qrq-form .qrq-check-h {
    display: block;
}
.qrq-form .qrq-check-h > div {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px 14px;
}
.qrq-form .qrq-check-h-opt {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 7px 10px;
    border: 1px solid #ece1bc;
    border-radius: 6px;
    background: #fdfaf0;
    cursor: pointer;
    user-select: none;
    transition: background 0.12s ease, border-color 0.12s ease;
    min-width: 0;
}
.qrq-form .qrq-check-h-opt:hover {
    background: #f5edd1;
    border-color: #d8c98a;
}
.qrq-form .qrq-check-h-opt:has(input[type="checkbox"]:checked) {
    background: #faf3d9;
    border-color: #bd9e4d;
}
.qrq-form .qrq-check-h-text {
    font-size: 12.5px;
    font-weight: 500;
    color: #3d3830;
    line-height: 1.3;
    flex: 1 1 auto;
    min-width: 0;
    /* Let long labels wrap to a second line instead of getting cut off
       with an ellipsis — at 2 columns there's enough horizontal room
       for "Commercial License" / "Representative QID" / "Establishment
       Card" / "Credit Statement" to display fully or wrap gracefully. */
    white-space: normal;
    overflow: visible;
    word-break: break-word;
}
.qrq-form .qrq-check-h-opt input[type="checkbox"] {
    flex-shrink: 0;
}

@media (max-width: 720px) {
    .qrq-form .qrq-check-h > div { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
    .qrq-form .qrq-check-h > div { grid-template-columns: 1fr; }
}

/* Disabled state — driven by Contract Type (Personal vs Company).
   The wrapper gets .qrq-check-h-disabled so the whole block dims
   uniformly and clicks are ignored at the layout level (no need to
   trust the disabled attribute alone). Section header above the
   options also dims so the operator sees "this whole group is off",
   not just "the checkboxes are off". */
.qrq-form .qrq-check-h.qrq-check-h-disabled {
    opacity: 0.55;
    pointer-events: none;
    filter: saturate(0.65);
}
.qrq-form .qrq-check-h.qrq-check-h-disabled .qrq-check-h-opt {
    background: #f5f1e8;
    border-color: #ebe2c8;
    cursor: not-allowed;
}
.qrq-form .qrq-check-h.qrq-check-h-disabled .qrq-check-h-opt:hover {
    background: #f5f1e8;
    border-color: #ebe2c8;
}
.qrq-form .qrq-check-h.qrq-check-h-disabled .qrq-check-h-text {
    color: #8a7a56;
}

/* ============================================================================
   segment_picker — mutually-exclusive pill buttons (e.g. New Tenant /
   Existing Tenant). The native radios are hidden; the labels are the
   buttons. :has() drives the checked-state styling.
   ============================================================================ */
.qrq-form .qrq-segment-picker {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 4px;
    border: 1px solid #e7dfbf;
    border-radius: 8px;
    background: #fdfaf0;
}
.qrq-form .qrq-segment-opt {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 8px 18px;
    border-radius: 6px;
    background: transparent;
    color: #6b5e30;
    font-size: 12.5px;
    font-weight: 600;
    cursor: pointer;
    user-select: none;
    transition: background 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
    min-width: 120px;
    text-align: center;
    position: relative;
}
.qrq-form .qrq-segment-opt:hover {
    background: #f0e8c8;
}
.qrq-form .qrq-segment-opt input[type="radio"] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
    width: 0;
    height: 0;
}
.qrq-form .qrq-segment-opt:has(input[type="radio"]:checked) {
    background: #bd9e4d;
    color: #fff;
    box-shadow: 0 1px 2px rgba(0,0,0,0.08);
}
.qrq-form .qrq-segment-opt:has(input[type="radio"]:checked):hover {
    background: #a8893d;
}
/*: Disabled segment pill — toggled by _qrqContractTypeDisplayNameWire
    when the contract type is Personal and the option (e.g. Company Name)
    can't apply. Locks pointer events, mutes color, and disables hover
    + checked highlights so the operator clearly sees the pill is off. */
.qrq-form .qrq-segment-opt.qrq-segment-opt-disabled,
.qrq-form .qrq-segment-opt.qrq-segment-opt-disabled:hover {
    background: #f3f3f3;
    color: #999;
    cursor: not-allowed;
    pointer-events: none;
    opacity: 0.65;
    box-shadow: none;
}

/* ============================================================================
   Existing Tenant searchable picker (.qrq-tenant-search).
   Hidden by default; apps.js shows it when qvreq2_TS is "Existing Tenant".
   Search results render absolutely below the input — z-indexed so they
   float over any sibling fields.
   ============================================================================ */
.qrq-tenant-search-input-row {
    position: relative;
}
.qrq-tenant-search-icon {
    position: absolute;
    top: 50%;
    left: 10px;
    transform: translateY(-50%);
    color: #bd9e4d;
    font-size: 16px;
    pointer-events: none;
}
/* Higher-specificity selector — `input.qrq-tenant-search-input` (0,2,1)
   matches `.qrq-form input[type="text"]` (0,2,1) and the latter rule
   was clobbering the left padding so the icon overlapped the text.
   Adding the type attribute pushes us to (0,3,1) which wins cleanly. */
.qrq-form input[type="text"].qrq-tenant-search-input {
    width: 100% !important;
    height: 34px !important;
    padding: 0 12px 0 36px !important;
    border: 1px solid #e2d7bf !important;
    border-radius: 6px !important;
    background: #fff !important;
    font-size: 12.5px !important;
    color: #3d3830 !important;
    box-sizing: border-box !important;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.qrq-form input[type="text"].qrq-tenant-search-input:focus {
    border-color: #c0a76d !important;
    box-shadow: 0 0 0 3px rgba(192, 167, 109, 0.18) !important;
    outline: none !important;
}
.qrq-tenant-search-results {
    position: absolute;
    left: 0;
    right: 0;
    top: calc(100% + 4px);
    z-index: 50;
    background: #fff;
    border: 1px solid #e2d7bf;
    border-radius: 6px;
    max-height: 280px;
    overflow-y: auto;
    box-shadow: 0 6px 24px rgba(0,0,0,0.08);
}
.qrq-tenant-search-row {
    padding: 8px 12px;
    cursor: pointer;
    border-bottom: 1px solid #f5f1e8;
    transition: background 0.12s ease;
}
.qrq-tenant-search-row:last-child {
    border-bottom: none;
}
.qrq-tenant-search-row:hover {
    background: #faf6ea;
}
.qrq-tenant-search-row-name {
    font-size: 13px;
    font-weight: 600;
    color: #2a2a2a;
    margin-bottom: 2px;
}
.qrq-tenant-search-row-sub {
    font-size: 11.5px;
    color: #8a7e58;
}
.qrq-tenant-search-empty,
.qrq-tenant-search-hint {
    padding: 10px 12px;
    color: #9a8e6a;
    font-size: 12px;
    text-align: center;
}
.qrq-tenant-search-empty b {
    color: #3d3830;
    font-weight: 600;
}

/* ===== Dynamic Payment Information section =====
   Replaces the legacy qvreq4 static fields. The PHP renderer emits
   #qrq_payment_dynamic; JS builds:
     - .qrq-payment-summary    — top card with unit count + rent baseline
     - .qrq-charge-card        — one per charge type, with editable fields
     - .qrq-payment-grand      — bottom grand-total card
     - .qrq-payment-empty      — placeholder when no units picked
   All amounts come from the server-side aggregator + per-unit popover. */
#qrq_payment_dynamic {
    width: 100%;
    box-sizing: border-box;
    padding: 0;
    margin: 8px 0 0 0;
}

.qrq-payment-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 28px 16px;
    border: 1px dashed #d4c8a8;
    border-radius: 8px;
    background: #fdfbf5;
    color: #8a7a56;
    font-size: 12.5px;
    text-align: center;
}
.qrq-payment-empty i {
    font-size: 18px;
    color: #c0a76d;
}

.qrq-payment-summary {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    background: linear-gradient(to right, #faf6ea, #fff);
    border: 1px solid #e2d7bf;
    border-left: 3px solid #c0a76d;
    border-radius: 6px;
    margin-bottom: 12px;
    box-sizing: border-box;
}
.qrq-payment-summary-left i {
    font-size: 22px;
    color: #c0a76d;
}
.qrq-payment-summary-body { flex: 1; min-width: 0; }
.qrq-payment-summary-line1 {
    font-size: 12.5px;
    font-weight: 600;
    color: #3d3830;
}
.qrq-payment-summary-line2 {
    font-size: 11.5px;
    color: #8a7e58;
    margin-top: 2px;
}

/* Per-unit payment section — one block per picked unit. Header
   shows the unit id + rent baseline, followed by that unit's own
   charge cards. Makes multi-unit selections legible by separating
   each unit's schedule into its own visual group. */
.qrq-payment-unit-section {
    margin: 8px 0 18px 0;
    padding: 0;
}
.qrq-payment-unit-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    background: linear-gradient(to right, #f5ecd3, #faf6ea);
    border: 1px solid #d4c8a8;
    border-bottom: 0;
    border-radius: 6px 6px 0 0;
    color: #5a4a1c;
    margin-bottom: -1px;
    cursor: pointer;
    user-select: none;
    transition: background 0.15s, border-color 0.15s;
}
.qrq-payment-unit-header:hover {
    background: linear-gradient(to right, #f0e3c0, #f5ecd3);
}
.qrq-payment-unit-header:focus-visible {
    outline: none;
    box-shadow: 0 0 0 2px rgba(192, 167, 109, 0.4);
}
.qrq-payment-unit-chev {
    font-size: 20px;
    color: #b89a4c;
    transition: transform 0.25s ease;
    flex-shrink: 0;
}

/* Cards wrapper — animated collapse via max-height. 4000px ceiling
   covers the deepest charge stack we expect (6 charges × ~280px each
   + room to grow) without revealing during the animation. */
.qrq-payment-unit-cards {
    max-height: 4000px;
    overflow: hidden;
    transition: max-height 0.3s ease, opacity 0.2s ease;
    opacity: 1;
}

/* Collapsed state — hides the cards container and rotates the chevron.
   Header keeps its full-rounded bottom corners so it doesn't look like
   half a sandwich. */
.qrq-payment-unit-collapsed .qrq-payment-unit-cards {
    max-height: 0;
    opacity: 0;
}
.qrq-payment-unit-collapsed .qrq-payment-unit-chev {
    transform: rotate(-90deg);
}
.qrq-payment-unit-collapsed .qrq-payment-unit-header {
    border-radius: 6px;
    margin-bottom: 0;
    border-bottom: 1px solid #d4c8a8;
}
.qrq-payment-unit-header > i {
    font-size: 18px;
    color: #b89a4c;
}
.qrq-payment-unit-title {
    flex: 1;
    font-weight: 700;
    font-size: 13.5px;
    color: #3d3830;
    letter-spacing: 0.2px;
}
.qrq-payment-unit-sub {
    font-size: 11.5px;
    color: #7a6a3a;
    font-weight: 600;
    white-space: nowrap;
}
/* Stack the unit's charge cards inside a bordered container so they
   read as belonging to the unit above. */
.qrq-payment-unit-section .qrq-charge-card {
    border-top: 1px solid #ebe2c8;
    border-radius: 0;
    margin-bottom: 0;
}
.qrq-payment-unit-section .qrq-charge-card:last-child {
    border-radius: 0 0 6px 6px;
}

.qrq-charge-card {
    background: #fff;
    border: 1px solid #ebe2c8;
    border-left: 3px solid #c0a76d;
    border-radius: 6px;
    padding: 10px 12px 10px 14px;
    margin-bottom: 10px;
    box-sizing: border-box;
}
.qrq-charge-header {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 10px;
}
.qrq-charge-icon {
    width: 32px;
    height: 32px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    background: #c0a76d;
    flex-shrink: 0;
}
.qrq-charge-icon i { font-size: 18px; }
.qrq-charge-name { flex: 1; min-width: 140px; }
.qrq-charge-title {
    font-size: 13px;
    font-weight: 600;
    color: #3d3830;
}
.qrq-charge-sub {
    font-size: 10.5px;
    color: #8a7e58;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    margin-top: 2px;
}
.qrq-charge-badges {
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
}
.qrq-charge-badge {
    font-size: 10.5px;
    padding: 2px 7px;
    border-radius: 10px;
    background: #faf6ea;
    color: #8a7a56;
    border: 1px solid #ebe2c8;
    line-height: 1.4;
    font-weight: 600;
}
.qrq-charge-badge-req    { background: #f5d6c2; color: #8d3a18; border-color: #ddb59a; }
.qrq-charge-badge-refund { background: #e0f0ff; color: #1a5790; border-color: #b5d3eb; }
.qrq-charge-badge-tax    { background: #ffe9a8; color: #7a5b00; border-color: #e8c97a; }
.qrq-charge-units-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 9px;
    background: #faf6ea;
    border: 1px solid #e2d7bf;
    border-radius: 10px;
    font-size: 10.5px;
    color: #8a7a56;
    cursor: pointer;
    user-select: none;
    transition: background 0.15s;
}
.qrq-charge-units-chip:hover {
    background: #f3eada;
    border-color: #c0a76d;
    color: #3d3830;
}
.qrq-charge-units-chip i { font-size: 12px; }

.qrq-charge-fields {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}
/* Successive rows stack with a small gap so the money row, schedule
   row, and date row read as distinct groups. */
.qrq-charge-fields + .qrq-charge-fields {
    margin-top: 10px;
}
.qrq-charge-field {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 110px;
}
.qrq-charge-field-label {
    font-size: 11px;
    color: #8a7e58;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}
.qrq-form .qrq-charge-field input,
.qrq-charge-field input,
.qrq-form .qrq-charge-field select,
.qrq-charge-field select {
    height: 32px !important;
    padding: 0 10px !important;
    font-size: 12px !important;
    border: 1px solid #e2d7bf !important;
    border-radius: 5px !important;
    background: #fff !important;
    color: #3d3830 !important;
    width: 100%;
    box-sizing: border-box;
    transition: border-color 0.15s, box-shadow 0.15s;
}
.qrq-form .qrq-charge-field input:focus,
.qrq-charge-field input:focus,
.qrq-form .qrq-charge-field select:focus,
.qrq-charge-field select:focus {
    border-color: #c0a76d !important;
    box-shadow: 0 0 0 3px rgba(192, 167, 109, 0.18) !important;
    outline: none;
}
.qrq-charge-field select {
    appearance: none;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'><path fill='none' stroke='%23bd9e4d' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round' d='M1 1.5l5 5 5-5'/></svg>") !important;
    background-repeat: no-repeat !important;
    background-position: right 8px center !important;
    background-size: 10px 7px !important;
    padding-right: 24px !important;
}
/* Read-only "Default Amount" — looks like a tag, not an input.
   Audit anchor showing the runits_charges/rchargetype source value
   before any discount is applied. */
.qrq-form .qrq-charge-field-ro input,
.qrq-charge-field-ro input {
    background: #faf6ea !important;
    color: #8a7a56 !important;
    cursor: not-allowed !important;
    font-weight: 600 !important;
}
.qrq-charge-field-ro .qrq-charge-field-label {
    color: #b39959;
}

/* Request Flow lock — applied to #qrq_payment_dynamic when Request
   Flow = "Standard Flow". Discount / Amount / Months / From / To
   inputs all have `readonly`; we layer pointer-events: none + a muted
   background so the operator can't accidentally focus them and gets a
   clear "this is locked" visual. Frequency / Payment Mode / Due Day
   stay editable in both modes so they're left alone. */
.qrq-payment-flow-locked .qrq-charge-field input[id$="__discount"],
.qrq-payment-flow-locked .qrq-charge-field input[id$="__amount"],
.qrq-payment-flow-locked .qrq-charge-field input[id$="__months"],
.qrq-payment-flow-locked .qrq-charge-field input[id$="__from_date"],
.qrq-payment-flow-locked .qrq-charge-field input[id$="__to_date"] {
    background: #f5f1e8 !important;
    color: #8a7a56 !important;
    cursor: not-allowed !important;
    pointer-events: none !important;
}

/* Full-width banner above the payment summary card explaining WHY
   the inputs are locked. Auto-injected by _qrqApplyRequestFlowLock;
   auto-removed when Exception Flow is picked. */
.qrq-payment-flow-badge {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    box-sizing: border-box;
    margin: 0 0 10px 0;
    padding: 8px 12px;
    background: #fff7e5;
    border: 1px solid #f0d9a0;
    border-left: 3px solid #b88b00;
    border-radius: 6px;
    font-size: 12px;
    color: #7a5b00;
    font-weight: 600;
    line-height: 1.4;
}
.qrq-payment-flow-badge i {
    font-size: 16px;
    color: #b88b00;
    flex-shrink: 0;
}
.qrq-payment-flow-badge span {
    flex: 1;
    min-width: 0;
}

/* Per-card totals summary — appears below the input row. Shows Total
   always; Discount + After Discount rows only when discount != 0. */
.qrq-charge-totals {
    margin-top: 10px;
    padding-top: 8px;
    border-top: 1px dashed #ebe2c8;
}
.qrq-charge-total-row,
.qrq-charge-disc-row,
.qrq-charge-after-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 4px 0;
    font-size: 12.5px;
}
.qrq-charge-total-label,
.qrq-charge-disc-label,
.qrq-charge-after-label {
    color: #8a7a56;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    font-size: 11px;
}
.qrq-charge-total-value {
    color: #3d3830;
    font-weight: 600;
    font-size: 13px;
}
.qrq-charge-disc-value {
    color: #8d3a18;
    font-weight: 600;
}
.qrq-charge-after-label {
    color: #3d3830;
    font-weight: 600;
    text-transform: none;
    letter-spacing: 0;
    font-size: 12.5px;
}
.qrq-charge-after-value {
    color: #3d3830;
    font-weight: 600;
    font-size: 13px;
}
/* Total row sits at the bottom — strong divider above so it visually
   reads as the sum of the rows above it. */
.qrq-charge-total-row {
    margin-top: 2px;
    padding-top: 6px;
    border-top: 1px solid #f3eada;
}
.qrq-charge-total-label {
    color: #3d3830 !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    font-size: 12.5px !important;
    font-weight: 600 !important;
}
.qrq-charge-total-value {
    color: #3d3830;
    font-weight: 700;
    font-size: 14px;
}

.qrq-charge-warn {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 8px;
    padding: 6px 10px;
    background: #fff7e5;
    border: 1px solid #f0d9a0;
    border-radius: 5px;
    color: #7a5b00;
    font-size: 11.5px;
}
/* Min-rent floor violation — red warning row + red Amount input.
   Different palette from the per-unit-disagreement warning above so
   the operator can distinguish "data inconsistency" from "below
   minimum" at a glance. */
.qrq-charge-minwarn {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 8px;
    padding: 6px 10px;
    background: #fff5f3;
    border: 1px solid #ddb59a;
    border-left: 3px solid #c84a3a;
    border-radius: 5px;
    color: #8d3a18;
    font-size: 11.5px;
    font-weight: 500;
}
.qrq-charge-minwarn i {
    font-size: 14px;
    color: #c84a3a;
}
.qrq-form .qrq-charge-field input.qrq-charge-input-error,
.qrq-charge-field input.qrq-charge-input-error {
    border-color: #c84a3a !important;
    background: #fff5f3 !important;
    box-shadow: 0 0 0 2px rgba(200, 74, 58, 0.18) !important;
}
.qrq-charge-warn i {
    font-size: 14px;
    color: #b88b00;
}

.qrq-charge-reset-row {
    margin-top: 8px;
    text-align: right;
}
.qrq-charge-reset-link {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    color: #8a7e58;
    text-decoration: none;
    cursor: pointer;
}
.qrq-charge-reset-link:hover { color: #3d3830; }
.qrq-charge-reset-link i { font-size: 13px; }

.qrq-charge-popover {
    position: fixed;
    background: #fff;
    border: 1px solid #d4c8a8;
    border-radius: 6px;
    box-shadow: 0 8px 22px rgba(60, 45, 15, 0.18);
    min-width: 240px;
    max-height: 260px;
    overflow-y: auto;
    z-index: 5000;
    padding: 0;
}
.qrq-charge-popover-title {
    padding: 8px 12px;
    background: #faf6ea;
    border-bottom: 1px solid #ebe2c8;
    font-size: 11px;
    font-weight: 600;
    color: #8a7a56;
    text-transform: uppercase;
    letter-spacing: 0.4px;
}
.qrq-charge-popover-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 7px 12px;
    border-bottom: 1px solid #f3eada;
    font-size: 12px;
}
.qrq-charge-popover-row:last-child { border-bottom: 0; }
.qrq-charge-popover-uid {
    color: #3d3830;
    font-weight: 500;
    word-break: break-all;
    padding-right: 12px;
}
.qrq-charge-popover-amt {
    color: #8a7a56;
    font-weight: 600;
    white-space: nowrap;
}

.qrq-payment-grand {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    background: linear-gradient(to right, #faf6ea, #ebe2c8);
    border: 1px solid #c0a76d;
    border-radius: 6px;
    margin-top: 6px;
    box-sizing: border-box;
}
.qrq-payment-grand-label {
    font-size: 12.5px;
    font-weight: 600;
    color: #3d3830;
    text-transform: uppercase;
    letter-spacing: 0.4px;
}
.qrq-payment-grand-amount {
    font-size: 15px;
    font-weight: 700;
    color: #3d3830;
}

/* ===== Tenant lead-history chip =====
   Rendered above the Lead Source Information section header when the
   picked existing tenant has prior lead events. Two-line: "Last
   contact" + the date/channel/score/status summary, plus an optional
   referrals counter for tenants who've sent business our way. */
.qrq-tenant-lead-chip {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    width: 100%;
    margin: 6px 0 12px 0;
    padding: 10px 12px;
    background: linear-gradient(to right, #faf6ea, #fff);
    border: 1px solid #e2d7bf;
    border-left: 3px solid #c0a76d;
    border-radius: 6px;
    box-sizing: border-box;
    font-size: 12px;
    color: #3d3830;
}
.qrq-tenant-lead-chip > i {
    font-size: 18px;
    color: #c0a76d;
    line-height: 1.2;
    flex-shrink: 0;
}
.qrq-tenant-lead-body { flex: 1; min-width: 0; }
.qrq-tenant-lead-line1 {
    font-size: 10.5px;
    color: #8a7a56;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    margin-bottom: 2px;
}
.qrq-tenant-lead-line2 {
    font-size: 12.5px;
    color: #3d3830;
    font-weight: 600;
}
.qrq-tenant-lead-refs {
    margin-top: 4px;
    font-size: 11.5px;
    color: #8a7e58;
}

/* ===== Tenant alternates chip + dropdown =====
   Rendered next to a field label (or the company-section header) when
   the picked existing tenant has more than one stored value for that
   slot (multiple phones / emails / companies / addresses). Click to
   open a small picker; click an option to apply. The dropdown is
   position: fixed so wizard popups + ancestor flex don't clip it. */
.qrq-tenant-alt-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-left: 8px;
    padding: 1px 8px;
    background: #faf6ea;
    border: 1px solid #e2d7bf;
    border-radius: 10px;
    font-size: 11px;
    color: #8a7a56;
    cursor: pointer;
    user-select: none;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
    vertical-align: middle;
    line-height: 1;
}
.qrq-tenant-alt-chip:hover {
    background: #f3eada;
    border-color: #c0a76d;
    color: #3d3830;
}
.qrq-tenant-alt-chip i {
    font-size: 12px;
    line-height: 1;
}
.qrq-tenant-alt-dropdown {
    position: fixed;
    background: #fff;
    border: 1px solid #d4c8a8;
    border-radius: 6px;
    box-shadow: 0 8px 22px rgba(60, 45, 15, 0.18);
    max-height: 280px;
    overflow-y: auto;
    z-index: 5000;
    box-sizing: border-box;
}
.qrq-tenant-alt-row {
    padding: 8px 12px;
    border-bottom: 1px solid #f3eada;
    cursor: pointer;
    font-size: 12px;
}
.qrq-tenant-alt-row:last-child { border-bottom: 0; }
.qrq-tenant-alt-row:hover { background: #faf6ea; }
.qrq-tenant-alt-row b {
    display: block;
    color: #3d3830;
    font-weight: 600;
    margin-bottom: 2px;
    font-size: 12.5px;
}
.qrq-tenant-alt-row-val {
    color: #8a7e58;
    font-size: 11.5px;
    word-break: break-all;
}

/* ===== mobile_picker — dial-code dropdown + number input
   Matches the wizard's standard input metric (34px tall, 6px corners,
   #e2d7bf border) so it lines up with the Email / Address inputs in
   the same row. The inner <input> inherits the global `.qrq-form
   input[type="text"]` rules which use `!important` for border / padding
   / height / background — so every override here must also be
   `!important`, otherwise we get a double border + 34px input inside
   a 30px shell (the bug from before). */
.qrq-mobile-picker {
    position: relative;
    display: flex;
    align-items: stretch;
    width: 100%;
    height: 34px;
    border: 1px solid #e2d7bf;
    border-radius: 6px;
    background: #fff;
    overflow: visible;
    box-sizing: border-box;
    transition: border-color 0.2s, box-shadow 0.2s;
}
.qrq-mobile-picker:focus-within {
    border-color: #c0a76d;
    box-shadow: 0 0 0 3px rgba(192, 167, 109, 0.18);
}
.qrq-mobile-dial {
    display: flex;
    align-items: center;
    gap: 3px;
    padding: 0 6px 0 10px;
    cursor: pointer;
    background: #faf6ea;
    border-right: 1px solid #ebe2c8;
    border-radius: 6px 0 0 6px;
    user-select: none;
    flex: 0 0 auto;
    white-space: nowrap;
    height: 100%;
}
.qrq-mobile-dial:hover {
    background: #f3eada;
}
/* Fixed min-width so the chip stays the same size regardless of
   whether the user picks +1 (2 chars) or +1242 (5 chars) — keeps
   the phone input from sliding left/right when codes change. */
.qrq-mobile-dial-text {
    font-size: 12px;
    font-weight: 600;
    color: #3d3830;
    letter-spacing: 0;
    line-height: 1;
    min-width: 34px;
    text-align: center;
    display: inline-block;
}
.qrq-mobile-arrow {
    font-size: 14px;
    color: #8a7e58;
    line-height: 1;
    margin-left: -1px;
}
/* number input — every property needs !important to beat the global
   `.qrq-form input[type="text"]` rule (which has !important on border,
   padding, background, height, width). */
.qrq-form input[type="text"].qrq-mobile-number,
input[type="text"].qrq-mobile-number {
    flex: 1 1 auto !important;
    width: auto !important;
    min-width: 0 !important;
    height: 100% !important;
    border: 0 !important;
    outline: none !important;
    padding: 0 10px !important;
    font-size: 12px !important;
    color: #3d3830 !important;
    background: transparent !important;
    border-radius: 0 6px 6px 0 !important;
    box-shadow: none !important;
    margin: 0 !important;
    box-sizing: border-box !important;
}
.qrq-mobile-number::placeholder {
    color: #b5a785;
    font-size: 12px;
}
/* Kill focus ring on the inner input — focus ring lives on the
   wrapper (:focus-within) so we don't get two halos. */
.qrq-form input[type="text"].qrq-mobile-number:focus,
input[type="text"].qrq-mobile-number:focus {
    border: 0 !important;
    box-shadow: none !important;
}
/* Error state — the validator adds .qrq-error to the hidden input
   that sits just before the picker shell. Style the visible shell
   via adjacent-sibling selector so the red highlight is actually
   visible. */
.qrq-form input.qrq-error + .qrq-mobile-picker,
input.qrq-error + .qrq-mobile-picker {
    border-color: #c84a3a !important;
    background: #fff5f3 !important;
    box-shadow: 0 0 0 2px rgba(200, 74, 58, 0.18) !important;
}

/* Locked field state — used when tenant = Existing Tenant. Inputs +
   selects pick up `readonly` / `disabled` via JS (existing gray-out
   handles them), but custom pickers (k-sc-wrap, qrq-mobile-picker,
   qrq-segment-picker) need explicit interaction blocking + visual
   muting because they don't respect native readonly. */
.qrq-form .qrq-field.qrq-locked .k-sc-display,
.qrq-form .qrq-field.qrq-locked .qrq-mobile-picker,
.qrq-form .qrq-field.qrq-locked .qrq-segment-picker {
    pointer-events: none;
    background: #f5f1e8 !important;
    color: #8a7a56 !important;
    cursor: not-allowed;
    border-color: #ebe2c8 !important;
    box-shadow: none !important;
}
.qrq-form .qrq-field.qrq-locked .qrq-mobile-dial,
.qrq-form .qrq-field.qrq-locked .qrq-mobile-number {
    background: #f5f1e8 !important;
    color: #8a7a56 !important;
}
.qrq-form .qrq-field.qrq-locked .k-sc-display-text,
.qrq-form .qrq-field.qrq-locked .k-sc-placeholder {
    color: #8a7a56 !important;
}
/* Plain text / number / email / date / tel / textarea — these use
   the standard browser controls. Belt-and-suspenders: even if the
   `readonly` attribute somehow isn't applied (older browser quirks,
   override by another script), pointer-events: none guarantees the
   user can't focus or type into them. Visual cue piggy-backs on the
   existing readonly styling so it stays consistent. */
.qrq-form .qrq-field.qrq-locked input[type="text"],
.qrq-form .qrq-field.qrq-locked input[type="number"],
.qrq-form .qrq-field.qrq-locked input[type="email"],
.qrq-form .qrq-field.qrq-locked input[type="tel"],
.qrq-form .qrq-field.qrq-locked input[type="date"],
.qrq-form .qrq-field.qrq-locked input[type="time"],
.qrq-form .qrq-field.qrq-locked textarea {
    background: #f5f1e8 !important;
    color: #8a7a56 !important;
    cursor: not-allowed !important;
    pointer-events: none !important;
}
/* Subtle "lock" cue on the label so the user sees this group is
   intentionally read-only (vs an actual disabled field). */
.qrq-form .qrq-field.qrq-locked > div:first-child {
    opacity: 0.75;
}
/* Dropdown uses `position: fixed` so it's anchored to the viewport,
   immune to any ancestor `overflow: hidden`, transform, or flex
   sizing quirks (the wizard popup is nested deep — those edge cases
   bit the earlier `position: absolute` attempts). JS computes the
   picker's getBoundingClientRect() on open and sets top/left/width
   inline. Scroll closes the dropdown (so picker + dropdown don't
   visually separate when the user scrolls the form). */
.qrq-form .qrq-mobile-dial-dropdown,
.qrq-mobile-dial-dropdown {
    position: fixed !important;
    max-height: 280px;
    background: #fff;
    border: 1px solid #e2d7bf;
    border-radius: 6px;
    box-shadow: 0 8px 22px rgba(60, 45, 15, 0.14);
    z-index: 5000;
    overflow: hidden;
    box-sizing: border-box;
    /* top / left / width are set inline by qrqMobileToggleDial */
}
/* Chevron flips when the dropdown is open — JS toggles
   .qrq-mobile-open on the picker shell. */
.qrq-mobile-arrow {
    transition: transform 0.15s ease;
}
.qrq-mobile-picker.qrq-mobile-open .qrq-mobile-arrow {
    transform: rotate(180deg);
}
.qrq-mobile-picker.qrq-mobile-open .qrq-mobile-dial {
    background: #f3eada;
}
.qrq-mobile-dial-search {
    padding: 6px;
    border-bottom: 1px solid #ebe2c8;
    background: #faf6ea;
}
.qrq-mobile-dial-search input[type="text"],
.qrq-form .qrq-mobile-dial-search input[type="text"] {
    width: 100% !important;
    height: 28px !important;
    padding: 0 10px !important;
    border: 1px solid #d4c8a8 !important;
    border-radius: 4px !important;
    font-size: 12px !important;
    outline: none !important;
    background: #fff !important;
    margin: 0 !important;
    box-shadow: none !important;
    box-sizing: border-box !important;
}
.qrq-mobile-dial-list {
    overflow-y: auto;
    max-height: 230px;
}
.qrq-mobile-dial-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 10px;
    font-size: 12.5px;
    color: #2a2a2a;
    cursor: pointer;
    border-bottom: 1px solid #f3eada;
}
.qrq-mobile-dial-row:last-child {
    border-bottom: 0;
}
.qrq-mobile-dial-row:hover {
    background: #faf6ea;
}
.qrq-mobile-dial-row .qrq-mobile-dial-text {
    flex: 0 0 50px;
    color: #8a7e58;
    font-weight: 600;
}
.qrq-mobile-country-name {
    flex: 1 1 auto;
    color: #3d3830;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.qrq-mobile-empty {
    padding: 12px;
    text-align: center;
    color: #9a8e6a;
    font-size: 12px;
}

/* =================================================================
   qrq-textarea-counter — live char counter under a textarea whose
   fillvalidation declared min:N / max:N. Sits below the textarea
   inside the field's H_50 container, right-aligned, low-contrast
   until the user approaches the limit.
   ================================================================= */
.qrq-form .qrq-textarea-counter {
    text-align: right;
    font-size: 11px;
    color: #8c8c8c;
    margin-top: 2px;
    line-height: 14px;
    user-select: none;
    pointer-events: none;
}
.qrq-form .qrq-textarea-counter.near-max  { color: #b8861c; }     /* amber — within 10% of max */
.qrq-form .qrq-textarea-counter.over-max  { color: #c0392b; font-weight: 600; }
.qrq-form .qrq-textarea-counter.under-min { color: #c0392b; }

/* =================================================================
   qrq-textarea-wrap — auto-height container for textareas + counter.
   Replaces the legacy h_50 fixed wrapper that caused the inline
   error message (a sibling appended by the validator) to overlap
   the textarea visible area.
   ================================================================= */
.qrq-form .qrq-field > .qrq-textarea-wrap {
    height: auto !important;
    min-height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    line-height: 0 !important;    /* kills the inline-block gap below children */
    display: block !important;
    overflow: visible;
}
.qrq-form .qrq-textarea {
    line-height: 1.4;
    resize: vertical;             /* user can drag taller if they want */
    display: block;
    margin: 0;                    /* no inherited gap below */
}
/* Reset the legacy negative margin for textarea error msgs — they
   sit directly below the auto-height wrap (no fixed-height parent
   above them), so the original -6px collapse isn't needed. */
.qrq-form .qrq-field > .qrq-textarea-wrap + .qrq-error-msg {
    margin: 4px 0 0 0 !important;
}

/* ================================================================
   Exception Rules (qvreqr_6) — checklist shown only on Exception Flow
   ================================================================ */
.qrq-exc-wrap .qrq-exc-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 4px;
    padding: 10px 12px;
    border: 1px solid #e3e3e3;
    border-radius: 8px;
    background: #fafafa;
}
.qrq-exc-item {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    cursor: pointer;
    font-size: 13px;
    color: #333;
}
.qrq-exc-chk {
    width: 15px;
    height: 15px;
    accent-color: #bd9e4d;
    cursor: pointer;
    flex: 0 0 auto;
}
.qrq-exc-lbl { font-weight: 600; }
.qrq-exc-amt {
    width: 120px;
    height: 26px;
    padding: 2px 8px;
    border: 1px solid #ccc;
    border-radius: 5px;
    font-size: 12.5px;
}
.qrq-exc-desc {
    width: 100%;
    padding-left: 23px;
    font-size: 11.5px;
    color: #8a8a8a;
    font-style: italic;
}
.qrq-exc-empty {
    padding: 10px 12px;
    font-size: 12.5px;
    color: #999;
    font-style: italic;
}