/* ==========================================================================
   Trip Designer form kit, owner 2026-10-04 ("sob form redesign koro").
   One look for every website form, taken from the insurance buy form:
   5px corners, clear labels with a red * for required fields, helper text,
   inline errors under each field, grouped sections with titles, a sticky
   summary where there is a price and a bottom action bar on phones.

   Usage: add class "fk" to the page wrapper and @include('partials._form-kit').
   New markup uses the fk-* classes. Older markup (bk-* booking classes and
   Bootstrap form-control / card) is re-skinned inside .fk so every form
   looks the same without renaming any field, id or JS hook.
   ========================================================================== */

.fk {
    --fk-navy: var(--tp, #04107C);
    --fk-navy-hover: #0a1d9e;
    --fk-ink: #0f172a;
    --fk-body: #475569;
    --fk-muted: #94a3b8;
    --fk-line: #e2e8f0;
    --fk-danger: #dc2626;
    --fk-ring: rgba(4,16,124,.10);
}

/* ── Section cards ─────────────────────────────────────────────────────── */
.fk-card,
.fk .bk-section {
    background: #fff; border: 1px solid #e8eaf0; border-radius: 5px;
    box-shadow: 0 2px 12px rgba(15,23,42,.05); margin-bottom: 16px; overflow: visible;
}
.fk-head,
.fk .bk-section-header {
    display: flex; align-items: center; gap: 12px; padding: 14px 18px;
    background: #fff; border-bottom: 1px solid #eef1f6; border-radius: 5px 5px 0 0;
    font-size: 14px; font-weight: 800; color: var(--fk-ink); line-height: 1.2;
}
.fk-head-icon,
.fk .bk-section-header > i:first-child {
    width: 34px; height: 34px; border-radius: 5px; background: #eef2ff; color: var(--fk-navy);
    display: inline-flex; align-items: center; justify-content: center; font-size: 15px; flex-shrink: 0;
}
.fk-head-title { font-size: 14px; font-weight: 800; color: var(--fk-ink); line-height: 1.2; }
.fk-head-sub { font-size: 11.5px; font-weight: 600; color: var(--fk-muted); margin-top: 2px; }
.fk-head-step,
.fk-head-aside { margin-left: auto; font-size: 10.5px; font-weight: 800; color: var(--fk-muted); letter-spacing: .4px; text-transform: uppercase; }
.fk-body,
.fk .bk-section-body { padding: 18px; }

/* Bootstrap cards inside a kit page get the same section look */
.fk .card { border-radius: 5px; }
.fk .card > .card-header:first-child { border-radius: 5px 5px 0 0; }
/* Plain white header (pages opt in with .fk-card-head on the header) */
.fk .card > .card-header.fk-card-head { background: #fff; border-bottom: 1px solid #eef1f6; padding: 14px 18px; }
.fk .card > .card-header.fk-card-head h5 { font-size: 15px; font-weight: 800; color: var(--fk-ink); margin: 0; }

/* ── Grid ──────────────────────────────────────────────────────────────── */
.fk-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 16px; }
.fk-grid.two { grid-template-columns: repeat(2, minmax(0,1fr)); }
.fk-grid.four { grid-template-columns: repeat(4, minmax(0,1fr)); }
.fk-span-2 { grid-column: span 2; }
.fk-span-all { grid-column: 1 / -1; }
.fk-field { min-width: 0; }

/* ── Labels ────────────────────────────────────────────────────────────── */
.fk-label,
.fk .bk-label,
.fk .form-group > label,
.fk .fk-field > label,
.fk [class*="col-"] > label:not(.form-check-label):not(.custom-control-label):not([class*="btn"]):not(.switch),
.fk .mb-3 > label:not(.form-check-label):not([class*="btn"]),
.fk .mb-2 > label:not(.form-check-label):not([class*="btn"]),
.fk label.col-form-label {
    display: block; font-size: 12.5px; font-weight: 700; color: #334155; margin-bottom: 6px;
    text-transform: none; letter-spacing: 0; line-height: 1.35;
}
.fk-req { color: var(--fk-danger); margin-left: 2px; font-weight: 800; }
.fk label small.text-muted { font-weight: 500; color: var(--fk-muted); font-size: 11.5px; }

/* Group title inside one card: splits a long form into titled parts */
.fk-group-title {
    display: flex; align-items: center; gap: 10px; margin: 6px 0 14px; padding-bottom: 10px;
    border-bottom: 1px solid #eef1f6; font-size: 13.5px; font-weight: 800; color: var(--fk-ink);
}
.fk-group-title i { width: 28px; height: 28px; border-radius: 5px; background: #eef2ff; color: var(--fk-navy); display: inline-flex; align-items: center; justify-content: center; font-size: 13px; flex-shrink: 0; }
.fk-group-title small { font-size: 11.5px; font-weight: 600; color: var(--fk-muted); margin-left: 2px; }
.fk-group-title.spaced { margin-top: 22px; }

/* ── Inputs ────────────────────────────────────────────────────────────── */
.fk-input, .fk-select, .fk-textarea,
.fk .bk-input, .fk .bk-select,
.fk .form-control {
    width: 100%; box-sizing: border-box; border: 1.5px solid var(--fk-line); border-radius: 5px;
    background-color: #fff; color: #1e293b; font-size: 13.5px; font-weight: 600;
    padding: 0 12px; height: 42px; outline: none; box-shadow: none;
    transition: border-color .15s, box-shadow .15s;
}
.fk .form-control-sm { height: 36px; font-size: 13px; }
.fk textarea.fk-input, .fk-textarea,
.fk textarea.bk-input,
.fk textarea.form-control {
    height: auto; min-height: 70px; padding: 10px 12px; resize: vertical; line-height: 1.45;
}
.fk select[multiple].form-control,
.fk select[multiple].bk-select,
.fk select[size].form-control { height: auto; min-height: 90px; padding: 6px 8px; background-image: none; }
.fk input[type=file].form-control,
.fk input[type=file].bk-input,
.fk input[type=file].fk-input { height: auto; min-height: 42px; padding: 8px 10px; font-size: 12.5px; }
.fk input[type=color].form-control { padding: 4px; width: 64px; }
.fk-input::placeholder, .fk-textarea::placeholder,
.fk .bk-input::placeholder, .fk .form-control::placeholder { color: #cbd5e1; font-weight: 500; text-transform: none; letter-spacing: 0; }
.fk-input:focus, .fk-select:focus, .fk-textarea:focus,
.fk .bk-input:focus, .fk .bk-select:focus,
.fk .form-control:focus { border-color: var(--fk-navy); box-shadow: 0 0 0 3px var(--fk-ring); outline: none; }
.fk-input[readonly], .fk .bk-input[readonly]:not(.flatpickr-input), .fk .form-control[readonly]:not(.flatpickr-input),
.fk .form-control:disabled, .fk .bk-input:disabled, .fk-input:disabled {
    background-color: #f8fafc; color: #64748b;
}
.fk-select,
.fk .bk-select,
.fk select.bk-input:not([multiple]),
.fk select.form-control:not([multiple]):not([size]) {
    appearance: none; -webkit-appearance: none; padding-right: 34px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='7' viewBox='0 0 12 7'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%2394a3b8' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right 12px center;
}
/* select2 / bootstrap-select keep their own widgets, just match the frame */
.fk .select2-container--default .select2-selection--single { height: 42px !important; border: 1.5px solid var(--fk-line) !important; border-radius: 5px !important; background-color: #fff !important; }
.fk .select2-container--default .select2-selection--single .select2-selection__rendered { line-height: 39px !important; font-size: 13.5px; font-weight: 600; color: #1e293b !important; }
.fk .select2-container--default .select2-selection--single .select2-selection__arrow { height: 40px !important; top: 0 !important; }
.fk .select2-container--default.select2-container--focus .select2-selection--single,
.fk .select2-container--default.select2-container--open .select2-selection--single { border-color: var(--fk-navy) !important; box-shadow: 0 0 0 3px var(--fk-ring) !important; }
.fk .select2-container .select2-selection--multiple { min-height: 42px; border: 1.5px solid var(--fk-line); border-radius: 5px; }
.fk .input-group > .form-control { border-radius: 0; }
.fk .input-group > .form-control:first-child { border-radius: 5px 0 0 5px; }
.fk .input-group > .form-control:last-child { border-radius: 0 5px 5px 0; }
.fk .input-group-text, .fk .input-group-addon { border: 1.5px solid var(--fk-line); background: #f8fafc; color: var(--fk-body); font-weight: 700; font-size: 13px; border-radius: 5px; }
.fk .form-group { margin-bottom: 16px; }

/* Phone: code + number in one frame */
.fk-phone { display: flex; border: 1.5px solid var(--fk-line); border-radius: 5px; overflow: hidden; background: #fff; transition: border-color .15s, box-shadow .15s; }
.fk-phone:focus-within { border-color: var(--fk-navy); box-shadow: 0 0 0 3px var(--fk-ring); }
.fk-phone .fk-input, .fk-phone .bk-input, .fk-phone .form-control { border: none; border-radius: 0; box-shadow: none !important; height: 39px; }
.fk-phone .fk-code { width: 74px; flex: none; padding: 0 6px; text-align: center; background: #f8fafc; border-right: 1.5px solid var(--fk-line); color: #475569; }

/* ── Helper text and inline errors ─────────────────────────────────────── */
.fk-help,
.fk .form-text,
.fk small.text-muted.d-block { font-size: 11.5px; font-weight: 500; color: var(--fk-muted); margin-top: 5px; line-height: 1.4; }
.fk-error,
.fk .invalid-feedback {
    display: none; font-size: 12px; font-weight: 600; color: var(--fk-danger); margin-top: 5px; line-height: 1.35;
}
.fk-error:before,
.fk .invalid-feedback:before { content: "\f06a"; font-family: FontAwesome; margin-right: 5px; }
.fk .has-error .fk-error,
.fk .is-invalid ~ .invalid-feedback,
.fk .invalid-feedback.d-block,
.fk .has-error .invalid-feedback { display: block; }
.fk .has-error .fk-help,
.fk .has-error .form-text { display: none; }
.fk .has-error .fk-input, .fk .has-error .fk-select, .fk .has-error .fk-textarea,
.fk .has-error .bk-input, .fk .has-error .bk-select, .fk .has-error .form-control,
.fk .has-error .fk-phone, .fk .has-error .fk-file, .fk .has-error .select2-selection,
.fk .has-error .ps-input, .fk .has-error .ps-select, .fk .has-error .ps-textarea,
.fk .has-error .us-input, .fk .has-error .ie-input, .fk .has-error .sc-input,
.fk .form-control.is-invalid, .fk .bk-input.is-invalid, .fk .fk-input.is-invalid {
    border-color: var(--fk-danger);
}
.fk .has-error .fk-tagbox { border-color: var(--fk-danger) !important; }
.fk .fk-tagbox:focus-within { border-color: var(--fk-navy) !important; box-shadow: 0 0 0 3px var(--fk-ring); }
.fk .has-error .fk-input:focus, .fk .has-error .bk-input:focus, .fk .has-error .form-control:focus { box-shadow: 0 0 0 3px rgba(220,38,38,.10); }

/* ── File tile ─────────────────────────────────────────────────────────── */
.fk-file { position: relative; display: flex; align-items: center; gap: 12px; border: 1.5px dashed #c7d2fe; background: #f8faff; border-radius: 5px; padding: 12px 14px; cursor: pointer; transition: border-color .15s, background .15s; min-height: 62px; }
.fk-file:hover { border-color: var(--fk-navy); background: #eef2ff; }
.fk-file input[type=file] { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; }
.fk-file-icon { width: 38px; height: 38px; border-radius: 5px; background: #fff; border: 1px solid #e0e7ff; color: var(--fk-navy); display: flex; align-items: center; justify-content: center; font-size: 16px; flex-shrink: 0; }
.fk-file-title { font-size: 13px; font-weight: 800; color: var(--fk-ink); line-height: 1.25; word-break: break-all; }
.fk-file-sub { font-size: 11.5px; font-weight: 600; color: var(--fk-muted); margin-top: 2px; }
.fk-file.is-set { border-style: solid; border-color: #bbf7d0; background: #f0fdf4; }
.fk-file.is-set .fk-file-icon { color: #15803d; border-color: #bbf7d0; }
.fk-file-clear { position: relative; z-index: 2; margin-left: auto; border: none; background: #fff; color: #64748b; width: 28px; height: 28px; border-radius: 5px; cursor: pointer; display: none; flex-shrink: 0; }
.fk-file.is-set .fk-file-clear { display: block; }

/* Any file tile (owner 2026-10-05, 'click dile kaj kore na'): form-kit.js
   lays the real input, invisible, over its tile so a tap on the tile is a
   tap on the input in every phone browser and in-app webview. Links and
   buttons inside the tile stay on top and keep working. */
.fk .fk-tap-pos { position: relative; }
.fk .fk-tap-tile { cursor: pointer; -webkit-tap-highlight-color: rgba(4,16,124,.08); }
.fk input[type=file].fk-tap-input {
    display: block !important; visibility: visible !important; pointer-events: auto !important;
    position: absolute !important; top: 0 !important; left: 0 !important; right: auto !important; bottom: auto !important;
    width: 100% !important; height: 100% !important; min-height: 0 !important; max-width: none !important;
    margin: 0 !important; padding: 0 !important; border: 0 !important; opacity: 0 !important;
    z-index: 2; cursor: pointer; font-size: 16px; color: transparent; background: transparent;
}
.fk .fk-tap-tile a, .fk .fk-tap-tile button { position: relative; z-index: 3; }

/* ── Notes, alerts, facts ──────────────────────────────────────────────── */
.fk-note { display: flex; gap: 10px; align-items: flex-start; background: #eff6ff; border: 1px solid #dbeafe; border-radius: 5px; padding: 10px 12px; font-size: 12px; font-weight: 600; color: #1e3a8a; line-height: 1.45; margin-bottom: 16px; }
.fk-note i { margin-top: 2px; }
.fk-alert { background: #fef2f2; border: 1.5px solid #fecaca; border-radius: 5px; padding: 14px 18px; margin-bottom: 16px; display: flex; gap: 12px; align-items: flex-start; color: var(--fk-danger); font-size: 13px; font-weight: 600; }
.fk-alert > i { font-size: 18px; margin-top: 1px; flex-shrink: 0; }
.fk-alert-title { font-size: 14px; font-weight: 800; }
.fk-alert ul { margin: 4px 0 0; padding-left: 18px; }
.fk-alert.ok { background: #f0fdf4; border-color: #bbf7d0; color: #15803d; }
.fk .alert { border-radius: 5px; }
.fk-facts { display: grid; grid-template-columns: repeat(5, minmax(0,1fr)); gap: 10px; }
.fk-fact { background: #f8fafc; border: 1px solid #eef1f6; border-radius: 5px; padding: 10px 12px; min-width: 0; }
.fk-fact-label { font-size: 11px; font-weight: 700; color: var(--fk-muted); }
.fk-fact-val { font-size: 13px; font-weight: 800; color: var(--fk-ink); margin-top: 3px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ── Saved traveller search ────────────────────────────────────────────── */
.fk-search { position: relative; margin-bottom: 16px; }
.fk-search .fa-search { position: absolute; left: 12px; top: 14px; color: var(--fk-muted); font-size: 13px; pointer-events: none; }
.fk-search .fk-input, .fk-search .bk-input { padding-left: 34px; }
.fk .trav-dropdown, .fk .traveler-dd {
    position: absolute; top: 100%; left: 0; right: 0; z-index: 1050; margin-top: 4px; background: #fff;
    border: 1.5px solid var(--fk-line); border-radius: 5px; max-height: 220px; overflow-y: auto;
    box-shadow: 0 8px 20px rgba(0,0,0,.1);
}
.fk .trav-dropdown .trav-opt, .fk .traveler-dd-item { padding: 9px 14px; cursor: pointer; font-size: 13px; border-bottom: 1px solid #f0f3fb; display: flex; align-items: center; gap: 8px; }
.fk .trav-dropdown .trav-opt:hover, .fk .traveler-dd-item:hover { background: #eef1fb; }
.fk .trav-dropdown .trav-opt:last-child, .fk .traveler-dd-item:last-child { border-bottom: none; }
.fk .trav-opt-name { font-weight: 700; color: #1e293b; }
.fk .trav-opt-meta { font-size: 11px; color: #64748b; }

/* ── Passenger accordion (booking forms) ───────────────────────────────── */
.fk .pax-card, .fk .bk-pax-card { border: 1.5px solid #e8eaf0; border-radius: 5px; margin-bottom: 12px; }
.fk .pax-card.pax-open { border-color: var(--fk-navy); }
.fk .pax-card-header, .fk .bk-pax-head { border-radius: 5px 5px 0 0; padding: 12px 16px; background: #f8fafc; font-size: 13px; font-weight: 800; color: #1e293b; }
.fk .pax-card-header .pax-badge { border-radius: 5px; }
.fk .pax-card-body, .fk .bk-pax-body { padding: 16px; }
.fk .pax-counter { border-radius: 5px; }

/* ── Buttons ───────────────────────────────────────────────────────────── */
.fk-btn {
    display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; height: 48px;
    background: var(--fk-navy); color: #fff; border: none; border-radius: 5px; font-size: 15px; font-weight: 800;
    cursor: pointer; transition: background .2s, opacity .2s; text-decoration: none;
}
.fk-btn:hover, .fk-btn:focus { background: var(--fk-navy-hover); color: #fff; text-decoration: none; outline: none; }
.fk-btn:disabled { opacity: .7; cursor: wait; }
.fk-btn.ghost { background: #f1f5f9; color: #475569; }
.fk-btn.ghost:hover { background: #e2e8f0; color: #1e293b; }
.fk-btn.inline { display: inline-flex; width: auto; padding: 0 24px; height: 44px; font-size: 14px; }
.fk-actions { display: flex; gap: 10px; justify-content: flex-end; align-items: center; flex-wrap: wrap; padding-top: 4px; }

/* ── Sticky summary ────────────────────────────────────────────────────── */
.fk-sum,
.fk .bk-price-card {
    position: sticky; top: 80px; background: #fff; border: 1px solid #e8eaf0; border-radius: 5px;
    overflow: hidden; box-shadow: 0 8px 32px rgba(4,16,124,.12);
}
.fk-sum-head,
.fk .bk-price-header { background: linear-gradient(135deg, var(--fk-navy) 0%, #1a2fa8 100%); padding: 18px 20px; display: flex; gap: 12px; align-items: center; }
.fk .bk-price-header { display: block; }
.fk-sum-logo { width: 42px; height: 42px; border-radius: 5px; background: #fff; display: flex; align-items: center; justify-content: center; overflow: hidden; flex-shrink: 0; color: var(--fk-navy); }
.fk-sum-logo img { max-width: 100%; max-height: 100%; object-fit: contain; }
.fk-sum-name, .fk .bk-price-header-name { font-size: 14.5px; font-weight: 900; color: #fff; line-height: 1.3; }
.fk-sum-sub, .fk .bk-price-header-sub { font-size: 11px; color: rgba(255,255,255,.7); font-weight: 600; margin-top: 2px; }
.fk-sum-row, .fk .bk-price-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 10px 20px; border-bottom: 1px solid #f1f5f9; font-size: 13px; }
.fk-sum-row span:first-child, .fk .bk-price-label { color: #64748b; font-weight: 600; }
.fk-sum-row span:last-child, .fk .bk-price-val { color: #1e293b; font-weight: 800; text-align: right; }
.fk-sum-total, .fk .bk-price-total { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 14px 20px; background: #f0f4ff; border-top: 2px solid #dde5f7; }
.fk-sum-total.disc { background: #f0fdf4; border-top-color: #bbf7d0; }
.fk-sum-total-label, .fk .bk-price-total-label { font-size: 14px; font-weight: 800; color: var(--fk-navy); }
.fk-sum-total-val, .fk .bk-price-total-val { font-size: 21px; font-weight: 900; color: var(--fk-navy); }
.fk-sum-total.disc .fk-sum-total-label, .fk-sum-total.disc .fk-sum-total-val { color: #15803d; }
.fk-sum-foot { padding: 16px 20px; }
.fk-sum-safe { text-align: center; font-size: 11px; color: var(--fk-muted); font-weight: 600; margin-top: 10px; }
.fk-admin-lock { background: #fef3c7; border: 1.5px solid #fcd34d; border-radius: 5px; padding: 14px; text-align: center; font-size: 13px; color: #92400e; font-weight: 700; }

/* ── Page header strip (title + back) ──────────────────────────────────── */
.fk-top { background: #fff; border: 1px solid #e8eaf0; border-radius: 5px; padding: 14px 18px; margin-bottom: 16px; display: flex; align-items: center; flex-wrap: wrap; gap: 12px 22px; box-shadow: 0 2px 12px rgba(15,23,42,.05); }
.fk-top-title { display: flex; align-items: center; gap: 12px; min-width: 0; }
.fk-top-title h1, .fk-top-title .fk-top-h { font-size: 16px; font-weight: 900; color: var(--fk-ink); margin: 0; line-height: 1.25; }
.fk-top-meta { min-width: 0; }
.fk-top-meta .fk-fact-label { font-size: 11px; }
.fk-top-back { margin-left: auto; display: inline-flex; align-items: center; gap: 7px; background: #f1f5f9; color: #334155; padding: 0 16px; height: 38px; border-radius: 5px; font-size: 13px; font-weight: 800; text-decoration: none; white-space: nowrap; }
.fk-top-back:hover { background: #e2e8f0; color: var(--fk-ink); text-decoration: none; }

/* ── Older per-page form families, re-skinned to the same look ─────────
   ps-* (deposit / withdraw), to-/svc-/ho-/vm-* (manual entry + hotel),
   us-* (user edit), ie-* (import edit), sc-* (support).                  */
.fk .ps-card, .fk .to-form-section, .fk .svc-form-section, .fk .ho-form-section, .fk .vm-form-section, .fk .us-section {
    background: #fff; border: 1px solid #e8eaf0; border-radius: 5px; box-shadow: 0 2px 12px rgba(15,23,42,.05); margin-bottom: 16px; overflow: visible;
}
.fk .ps-card-header, .fk .to-form-section-hdr, .fk .svc-form-section-hdr, .fk .ho-form-section-hdr, .fk .vm-form-section-hdr {
    display: flex; align-items: center; gap: 12px; padding: 14px 18px; background: #fff; border-bottom: 1px solid #eef1f6;
    border-radius: 5px 5px 0 0; font-size: 14px; font-weight: 800; color: var(--fk-ink);
}
.fk .ps-card-header > i:first-child, .fk .to-form-section-hdr > i:first-child, .fk .svc-form-section-hdr > i:first-child,
.fk .ho-form-section-hdr > i:first-child, .fk .vm-form-section-hdr > i:first-child,
.fk .ps-card-header > span > i:first-child,
.fk .to-form-section-hdr > span > i:first-child, .fk .svc-form-section-hdr > span > i:first-child,
.fk .ho-form-section-hdr > span > i:first-child, .fk .vm-form-section-hdr > span > i:first-child {
    width: 34px; height: 34px; border-radius: 5px; background: #eef2ff; color: var(--fk-navy);
    display: inline-flex; align-items: center; justify-content: center; font-size: 15px; flex-shrink: 0; margin-right: 8px;
}
.fk .ps-card-body, .fk .to-form-section-body, .fk .svc-form-section-body, .fk .ho-form-section-body, .fk .vm-form-section-body { padding: 18px; }
.fk .ps-label, .fk .to-label, .fk .svc-label, .fk .ho-label, .fk .vm-label, .fk .us-label, .fk .ie-label, .fk .sc-label {
    display: block; font-size: 12.5px; font-weight: 700; color: #334155; margin-bottom: 6px; text-transform: none; letter-spacing: 0;
}
.fk .ps-input, .fk .ps-select, .fk .ps-textarea, .fk .us-input, .fk .ie-input, .fk .sc-input {
    width: 100%; box-sizing: border-box; border: 1.5px solid var(--fk-line); border-radius: 5px; background-color: #fff; color: #1e293b;
    font-size: 13.5px; font-weight: 600; padding: 0 12px; height: 42px; outline: none; transition: border-color .15s, box-shadow .15s;
}
.fk textarea.ps-textarea, .fk .ps-textarea, .fk textarea.us-input, .fk textarea.ie-input, .fk textarea.sc-input { height: auto; min-height: 80px; padding: 10px 12px; line-height: 1.45; }
.fk .ps-input:focus, .fk .ps-select:focus, .fk .ps-textarea:focus, .fk .us-input:focus, .fk .ie-input:focus, .fk .sc-input:focus {
    border-color: var(--fk-navy); box-shadow: 0 0 0 3px var(--fk-ring);
}
.fk .ps-summary { border-radius: 5px; }
.fk .ps-summary-header { background: linear-gradient(135deg, var(--fk-navy) 0%, #1a2fa8 100%); }
.fk .ie-hint { font-size: 11.5px; font-weight: 500; color: var(--fk-muted); }
/* public pages: career apply (cr-field), universal payment (up-*) */
.fk .cr-field label, .fk .up-label { font-size: 12.5px; font-weight: 700; color: #334155; text-transform: none; letter-spacing: 0; margin-bottom: 6px; }
.fk .cr-field input:not([type=file]):not([type=checkbox]):not([type=radio]), .fk .cr-field select,
.fk .up-input, .fk .up-select {
    height: 42px; min-height: 42px; box-sizing: border-box; border: 1.5px solid var(--fk-line); border-radius: 5px; background-color: #fff;
    font-size: 13.5px; font-weight: 600; color: #1e293b; padding-top: 0; padding-bottom: 0;
}
.fk .cr-field textarea, .fk textarea.up-input { height: auto; min-height: 84px; padding: 10px 12px; border: 1.5px solid var(--fk-line); border-radius: 5px; font-size: 13.5px; }
.fk .cr-field input:focus, .fk .cr-field select:focus, .fk .cr-field textarea:focus, .fk .up-input:focus, .fk .up-select:focus {
    border-color: var(--fk-navy); box-shadow: 0 0 0 3px var(--fk-ring); background-color: #fff;
}
.fk .has-error .up-input, .fk .cr-field.has-error input, .fk .cr-field.has-error textarea { border-color: var(--fk-danger); }

/* profile page (pf-*) */
.fk .pf-field-label { font-size: 12.5px; font-weight: 700; color: #334155; text-transform: none; letter-spacing: 0; }
.fk .pf-inline { height: 42px; border: 1.5px solid var(--fk-line); border-radius: 5px; font-size: 13.5px; font-weight: 600; padding: 0 12px; }
.fk textarea.pf-inline { height: auto; min-height: 70px; padding: 10px 12px; line-height: 1.45; }
.fk .pf-inline:focus { border-color: var(--fk-navy); box-shadow: 0 0 0 3px var(--fk-ring); }
.fk .has-error .pf-inline { border-color: var(--fk-danger); }
.fk .pf-save-btn { background: var(--fk-navy); height: 46px; padding: 0 26px; font-size: 14px; display: inline-flex; align-items: center; gap: 8px; box-shadow: none; }
.fk .pf-save-btn:hover { background: var(--fk-navy-hover); box-shadow: none; transform: none; }
.fk .ps-err { font-size: 12px; font-weight: 600; color: var(--fk-danger); margin-top: 5px; line-height: 1.35; }
.fk small.text-danger { font-size: 12px; font-weight: 600; display: block; margin-top: 5px; }

/* ── Phone action bar ──────────────────────────────────────────────────── */
.fk-mbar { display: none; }

@media (max-width: 991px) {
    .fk-grid, .fk-grid.four { grid-template-columns: repeat(2, minmax(0,1fr)); }
    .fk-facts { grid-template-columns: repeat(3, minmax(0,1fr)); }
    .fk-sum, .fk .bk-price-card { position: static; margin-top: 4px; margin-bottom: 16px; }
}
@media (max-width: 575px) {
    .fk-grid, .fk-grid.two, .fk-grid.four { grid-template-columns: 1fr; }
    .fk-span-2 { grid-column: auto; }
    .fk-facts { grid-template-columns: repeat(2, minmax(0,1fr)); }
    .fk-body, .fk .bk-section-body { padding: 14px; }
    .fk-head, .fk .bk-section-header { padding: 12px 14px; }
    .fk-head-step { display: none; }
    .fk-top-back { margin-left: 0; }
    /* Sits right above the panel's bottom nav (.mob-nav, z-index 9990),
       never behind it: form-kit.js sets --fk-mbar-offset to that nav's
       height (0 on pages without one). */
    .fk-mbar {
        display: flex; position: fixed; left: 0; right: 0; bottom: var(--fk-mbar-offset, 0px); z-index: 1040; background: #fff;
        border-top: 1px solid #e8eaf0; padding: 10px 16px; align-items: center; gap: 12px;
        box-shadow: 0 -6px 20px rgba(15,23,42,.08);
    }
    .fk-mbar { padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px)); }
    html.fk-mbar-on-nav .fk-mbar { padding-bottom: 10px; }
    /* The panel's floating chat / pay buttons move up over the bar. */
    html.fk-mbar-shown .floating-buttons { bottom: calc(var(--fk-mbar-offset, 0px) + var(--fk-mbar-h, 65px) + 10px) !important; transform: none !important; }
    .fk-mbar-label { font-size: 10.5px; font-weight: 800; color: var(--fk-muted); }
    .fk-mbar-val { font-size: 17px; font-weight: 900; color: var(--fk-navy); }
    .fk-mbar .fk-btn { width: auto; padding: 0 22px; height: 44px; font-size: 14px; margin-left: auto; }
    .fk-mbar.solo .fk-btn { width: 100%; margin-left: 0; }
    /* Room for the bar at the very end of the page, so nothing (form,
       summary, footer credit) ends up under it; the panel already keeps
       room for .mob-nav. The fallback covers the moment before the script
       has measured the bar. */
    .fk-wrap { padding-bottom: 16px; }
    html.fk-mbar-shown body { padding-bottom: var(--fk-mbar-h, 72px) !important; }
    html:not(.fk-mbar-shown) .fk-wrap { padding-bottom: 84px; }
    .fk.fk-has-mbar .fk-desk-submit { display: none; }
}