/* ── Elmley Foundation Application Form v1.6.0 ─────────────────────────── */

/* ── Design tokens ───────────────────────────────────────────────────────── */
:root {
    --emaf-border:       #c8c8c8;
    --emaf-border-focus: #1a3a6b;
    --emaf-radius:       4px;
    --emaf-input-bg:     #fff;
    --emaf-input-pad:    9px 11px;
    --emaf-label-color:  #222;
    --emaf-label-size:   10.5pt;
    --emaf-font:         Arial, sans-serif;
    --emaf-q-gap:        30px;
}

.emaf-wrap {
    font-family: var(--emaf-font);
    font-size: 11pt;
    color: #111;
    max-width: 760px;
    line-height: 1.5;
}

/* ── Notices ─────────────────────────────────────────────────────────────── */
.emaf-notice { padding: 12px 16px; border-radius: var(--emaf-radius); margin-bottom: 22px; font-size: 10.5pt; }
.emaf-success      { background:#eafaf1; border-left:4px solid #27ae60; color:#1a5e36; }
.emaf-error        { background:#fdf0f0; border-left:4px solid #c0392b; color:#7b1c1c; }
.emaf-draft-notice { background:#eaf4fb; border-left:4px solid #2980b9; color:#1a4a6e; }

/* ── Universal field wrapper ─────────────────────────────────────────────── */
.emaf-field {
    margin-bottom: var(--emaf-q-gap);
}
/* suppress bottom margin on the last field before submit */
.emaf-field:last-of-type { margin-bottom: 0; }

/* ── Universal label ─────────────────────────────────────────────────────── */
.emaf-label {
    display: block;
    font-size: var(--emaf-label-size);
    font-weight: bold;
    color: var(--emaf-label-color);
    margin-bottom: 6px;
    line-height: 1.4;
}
.emaf-label-note {
    font-weight: normal;
    color: #555;
    font-size: 10pt;
}

/* ── Universal text/email/tel/date input ─────────────────────────────────── */
.emaf-input {
    display: block;
    width: 100%;
    box-sizing: border-box;
    border: 1px solid var(--emaf-border);
    border-radius: var(--emaf-radius);
    background: var(--emaf-input-bg);
    padding: var(--emaf-input-pad);
    font-family: var(--emaf-font);
    font-size: 11pt;
    color: #111;
    outline: none;
    transition: border-color 0.15s, box-shadow 0.15s;
    -webkit-appearance: none;
}
.emaf-input:focus {
    border-color: var(--emaf-border-focus);
    box-shadow: 0 0 0 3px rgba(26,58,107,0.1);
}

/* ── Universal textarea ──────────────────────────────────────────────────── */
.emaf-textarea {
    display: block;
    width: 100%;
    box-sizing: border-box;
    border: 1px solid var(--emaf-border);
    border-radius: var(--emaf-radius);
    background: var(--emaf-input-bg);
    padding: var(--emaf-input-pad);
    font-family: var(--emaf-font);
    font-size: 11pt;
    color: #111;
    outline: none;
    resize: vertical;
    line-height: 1.5;
    transition: border-color 0.15s, box-shadow 0.15s;
}
.emaf-textarea:focus {
    border-color: var(--emaf-border-focus);
    box-shadow: 0 0 0 3px rgba(26,58,107,0.1);
}

/* ── Two-column grid (used for address town/postcode, date from/to, reserves) */
.emaf-grid-2 {
    display: grid;
    grid-template-columns: 1fr 180px;
    gap: 16px;
    align-items: start;
}
.emaf-grid-2-equal {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    align-items: start;
}
.emaf-grid-3 {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 16px;
    align-items: start;
}

/* ── Part / section headings ─────────────────────────────────────────────── */
.emaf-part-heading {
    font-weight: bold;
    font-size: 11pt;
    border-bottom: 2px solid #1a3a6b;
    padding-bottom: 5px;
    margin: 36px 0 6px;
    color: #1a3a6b;
}
.emaf-section-heading {
    font-size: 10.5pt;
    color: #444;
    margin: 0 0 22px;
}

/* ── Numbered question rows ──────────────────────────────────────────────── */
.emaf-q-row {
    display: flex;
    align-items: flex-start;
    gap: 4px;
    margin-bottom: var(--emaf-q-gap);
}
.emaf-q-num {
    min-width: 28px;
    flex-shrink: 0;
    font-weight: bold;
    font-size: 11pt;
    padding-top: 0;
    line-height: 1.5;
    color: #333;
}
.emaf-q-body { flex: 1; min-width: 0; }

/* ── Intro ───────────────────────────────────────────────────────────────── */
.emaf-intro {
    background: #f7f9fc;
    border: 1px solid #d0d9e8;
    border-radius: var(--emaf-radius);
    padding: 16px 18px;
    margin-bottom: 28px;
    font-size: 10.5pt;
}
.emaf-intro p  { margin-bottom: 8px; }
.emaf-intro ul { margin: 6px 0 0 20px; }
.emaf-intro li { margin-bottom: 5px; }

/* ── Checkboxes ──────────────────────────────────────────────────────────── */
.emaf-checkboxes {
    border: 1px solid var(--emaf-border);
    border-radius: var(--emaf-radius);
    padding: 10px 14px;
    background: #fafafa;
}
.emaf-check {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    margin-bottom: 8px;
    font-size: 11pt;
    cursor: pointer;
    font-weight: normal;
    line-height: 1.4;
}
.emaf-check:last-child { margin-bottom: 0; }
.emaf-check input[type="checkbox"] { margin-top: 3px; flex-shrink: 0; width: 15px; height: 15px; cursor: pointer; }

/* Other-status inline text input */
.emaf-other-text {
    display: none;
    width: 100%;
    margin-top: 6px;
    border: 1px solid var(--emaf-border);
    border-radius: var(--emaf-radius);
    padding: var(--emaf-input-pad);
    font-family: var(--emaf-font);
    font-size: 11pt;
    outline: none;
    box-sizing: border-box;
}
.emaf-other-text:focus { border-color: var(--emaf-border-focus); box-shadow: 0 0 0 3px rgba(26,58,107,0.1); }

/* ── Conditional Q (constitution) ───────────────────────────────────────── */
.emaf-q-conditional {
    display: none;
    margin-bottom: var(--emaf-q-gap);
    padding-left: 32px;
}

/* ── Radio Yes/No ────────────────────────────────────────────────────────── */
.emaf-radio-row { display: flex; gap: 24px; margin-top: 2px; }
.emaf-radio {
    display: flex; align-items: center; gap: 7px;
    font-size: 11pt; cursor: pointer; font-weight: normal;
    background: #fafafa;
    border: 1px solid var(--emaf-border);
    border-radius: var(--emaf-radius);
    padding: 8px 16px;
}
.emaf-radio:hover { border-color: #999; }
.emaf-radio input { width:15px; height:15px; cursor:pointer; }

/* ── Cost table (B6) ─────────────────────────────────────────────────────── */
.emaf-cost-table {
    border: 1px solid var(--emaf-border);
    border-radius: var(--emaf-radius);
    overflow: hidden;
    max-width: 440px;
}
.emaf-cost-row {
    display: flex;
    align-items: center;
    gap: 0;
    border-bottom: 1px solid #eee;
    background: #fff;
}
.emaf-cost-row:last-child { border-bottom: none; }
.emaf-cost-row:nth-child(even) { background: #fafafa; }
.emaf-cost-label {
    flex: 1;
    padding: 8px 12px;
    font-size: 10.5pt;
    border-right: 1px solid #eee;
}
.emaf-cost-pound {
    padding: 8px 4px 8px 10px;
    font-size: 11pt;
    color: #444;
    flex-shrink: 0;
}
.emaf-cost-input {
    width: 110px;
    flex-shrink: 0;
    border: none;
    border-left: 1px solid #eee;
    padding: 8px 10px;
    font-family: var(--emaf-font);
    font-size: 11pt;
    background: transparent;
    outline: none;
    text-align: right;
}
.emaf-cost-input:focus { background: #f0f6ff; }
.emaf-cost-total { background: #f0f4f9 !important; }
.emaf-cost-total .emaf-cost-label,
.emaf-cost-total .emaf-cost-input { font-weight: bold; }

/* ── Income / accounts tables (B7, B8) ──────────────────────────────────── */
.emaf-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 10.5pt;
    margin-top: 6px;
    border: 1px solid var(--emaf-border);
    border-radius: var(--emaf-radius);
    overflow: hidden;
}
.emaf-table th {
    background: #f0f4f9;
    border-bottom: 1px solid var(--emaf-border);
    padding: 8px 8px;
    text-align: left;
    font-size: 10pt;
    font-weight: bold;
    color: #1a3a6b;
}
.emaf-table td {
    border-bottom: 1px solid #ebebeb;
    padding: 5px 7px;
    vertical-align: middle;
}
.emaf-table tr:last-child td { border-bottom: none; }
.emaf-table tr:nth-child(even) td { background: #fafafa; }
.emaf-income-table .emaf-th-source { width:34%; }
.emaf-income-table .emaf-th-total  { width:16%; }
.emaf-income-table .emaf-th-status { width:25%; }
.emaf-income-table .emaf-th-date   { width:25%; }
.emaf-subheader-row td { background:#edf1f7 !important; font-weight:bold; font-size:10pt; color:#333; }
.emaf-td-dash { color:#bbb; text-align:center; letter-spacing:2px; }
.emaf-total-row td { font-weight:bold; background:#e8eef6 !important; }

.emaf-cell-input {
    width: 100%;
    border: none;
    border-bottom: 1px solid #ccc;
    padding: 3px 3px;
    font-family: var(--emaf-font);
    font-size: 10.5pt;
    background: transparent;
    outline: none;
    box-sizing: border-box;
}
.emaf-cell-input:focus { border-bottom-color: var(--emaf-border-focus); background: #f0f6ff; }
.emaf-cell-amt    { max-width: 80px; text-align: right; }
.emaf-cell-price  { width: 55px; text-align: right; }
.emaf-cell-amt-sm { max-width: 70px; text-align: right; }
.emaf-cell-expitem { min-width: 80px; }
.emaf-note { font-size: 10pt; margin-top: 8px; color: #555; }

.emaf-accounts-period {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 10px;
    font-size: 10.5pt;
}
.emaf-accounts-table .emaf-accounts-divider { border-left: 2px solid #1a3a6b !important; }

/* ── Declaration ─────────────────────────────────────────────────────────── */
.emaf-decl-intro { margin-bottom: 20px; font-size: 10.5pt; color: #444; }
.emaf-decl-text  { margin: 18px 0; font-size: 10.5pt; line-height: 1.6; }

/* ── Signature pad ───────────────────────────────────────────────────────── */
.emaf-sig-wrap {
    border: 1px solid var(--emaf-border);
    border-radius: var(--emaf-radius);
    background: #fff;
    padding: 8px;
    max-width: 520px;
    margin-top: 4px;
}
.emaf-sig-canvas {
    display: block; width: 100%;
    border: 1px dashed #ccc;
    background: #fdfdfd;
    cursor: crosshair;
    touch-action: none;
    border-radius: 3px;
}
.emaf-sig-controls { display:flex; align-items:center; gap:12px; margin-top:7px; }
.emaf-sig-clear-btn {
    background:#fff; border:1px solid #ccc; padding:5px 12px;
    font-size:9.5pt; font-family:var(--emaf-font); cursor:pointer; border-radius:3px; color:#555;
}
.emaf-sig-clear-btn:hover { border-color:#999; color:#000; }
.emaf-sig-hint { font-size:9pt; color:#888; font-style:italic; }

/* ── Supporting documents ────────────────────────────────────────────────── */
.emaf-uploads-section {
    margin-top: 32px;
    padding-top: 26px;
    border-top: 2px solid #e0e0e0;
}
.emaf-enclose-note { margin:0 0 6px; font-size:10.5pt; }
.emaf-upload-hint  { font-size:10pt; color:#555; margin-bottom:14px; }
.emaf-upload-area {
    border: 2px dashed #bbb;
    border-radius: var(--emaf-radius);
    padding: 28px 20px;
    text-align: center;
    cursor: pointer;
    background: #fafafa;
    transition: border-color 0.15s, background 0.15s;
    position: relative;
}
.emaf-upload-area:hover,
.emaf-upload-area.emaf-drag-over { border-color: #1a3a6b; background: #f0f4fb; }
.emaf-upload-area svg { display:block; margin:0 auto 10px; }
.emaf-upload-cta  { font-size:11pt; margin:0 0 4px; color:#333; }
.emaf-upload-sub  { font-size:9.5pt; color:#888; margin:0; }
.emaf-upload-browse { color:#1a3a6b; text-decoration:underline; cursor:pointer; font-weight:bold; }
.emaf-file-input  { position:absolute; inset:0; opacity:0; cursor:pointer; width:100%; height:100%; }
.emaf-file-list   { list-style:none; margin:10px 0 0; padding:0; }
.emaf-file-item   { display:flex; align-items:center; gap:10px; padding:8px 12px; background:#f4f7fb; border:1px solid #d0d9e8; border-radius:3px; margin-bottom:5px; font-size:10pt; }
.emaf-file-name   { flex:1; word-break:break-all; }
.emaf-file-size   { color:#888; white-space:nowrap; }
.emaf-file-remove { background:none; border:none; color:#c0392b; cursor:pointer; font-size:16px; line-height:1; padding:0 2px; flex-shrink:0; }
.emaf-file-remove:hover { color:#922b21; }
.emaf-file-error  { color:#c0392b; font-size:9.5pt; margin-top:6px; }

/* ── Submit ──────────────────────────────────────────────────────────────── */
.emaf-submit-wrap {
    margin-top: 32px;
    padding-top: 22px;
    border-top: 1px solid #ddd;
    display: flex;
    align-items: center;
    gap: 16px;
}
.emaf-submit-btn {
    background:#1a3a6b; color:#fff; border:none;
    padding:12px 36px; font-size:11pt; font-family:var(--emaf-font);
    cursor:pointer; border-radius:var(--emaf-radius); font-weight:bold;
    transition: background 0.15s;
}
.emaf-submit-btn:hover    { background:#122a50; }
.emaf-submit-btn:disabled { background:#999; cursor:not-allowed; }
.emaf-spinner { font-style:italic; color:#555; font-size:10.5pt; }

/* ── Floating save button ─────────────────────────────────────────────────── */
.emaf-save-float-btn {
    position:fixed; bottom:80px; left:24px; z-index:9000;
    display:flex; align-items:center; gap:8px;
    background:#2c5f2e; color:#fff; border:none;
    padding:11px 18px; font-size:10.5pt; font-family:var(--emaf-font);
    font-weight:bold; cursor:pointer; border-radius:30px;
    box-shadow:0 3px 12px rgba(0,0,0,0.25);
    transition:background 0.15s, box-shadow 0.15s, transform 0.1s;
    white-space:nowrap;
}
.emaf-save-float-btn:hover { background:#1e4220; box-shadow:0 5px 18px rgba(0,0,0,0.3); transform:translateY(-1px); }
.emaf-save-float-btn svg { flex-shrink:0; }

/* ── Save modal ──────────────────────────────────────────────────────────── */
.emaf-modal-overlay {
    position:fixed; inset:0; background:rgba(0,0,0,0.55);
    z-index:9999; display:flex; align-items:center; justify-content:center; padding:16px;
}
.emaf-modal {
    background:#fff; border-radius:6px; padding:28px 30px 24px;
    max-width:420px; width:100%; position:relative;
    box-shadow:0 8px 40px rgba(0,0,0,0.2);
}
.emaf-modal-close {
    position:absolute; top:12px; right:14px; background:none; border:none;
    font-size:22px; line-height:1; color:#777; cursor:pointer; padding:2px 6px; border-radius:3px;
}
.emaf-modal-close:hover { color:#000; background:#f0f0f0; }
.emaf-modal-title { font-size:14pt; font-weight:bold; margin:0 0 10px; color:#111; }
.emaf-modal-body  { font-size:10.5pt; color:#333; margin-bottom:16px; }
.emaf-modal-error   { background:#fdf0f0; border-left:3px solid #c0392b; color:#7b1c1c; padding:8px 12px; font-size:10pt; border-radius:2px; margin-bottom:12px; }
.emaf-modal-success { background:#eafaf1; border-left:3px solid #27ae60; color:#1a5e36; padding:10px 12px; font-size:10.5pt; border-radius:2px; }
.emaf-modal-email-input {
    width:100%; border:1px solid #bbb; border-radius:var(--emaf-radius);
    padding:10px 12px; font-size:11pt; font-family:var(--emaf-font);
    outline:none; margin-bottom:10px; box-sizing:border-box;
}
.emaf-modal-email-input:focus { border-color:#2c5f2e; box-shadow:0 0 0 2px rgba(44,95,46,0.12); }
.emaf-modal-save-btn {
    width:100%; background:#2c5f2e; color:#fff; border:none;
    padding:11px 20px; font-size:11pt; font-family:var(--emaf-font);
    font-weight:bold; cursor:pointer; border-radius:var(--emaf-radius);
}
.emaf-modal-save-btn:hover    { background:#1e4220; }
.emaf-modal-save-btn:disabled { background:#7a9b7c; cursor:not-allowed; }

/* ── Autosave toast ──────────────────────────────────────────────────────── */
#emaf-autosave-indicator {
    position:fixed; bottom:80px; left:50%; transform:translateX(-50%);
    background:rgba(0,0,0,0.68); color:#fff; padding:6px 16px;
    border-radius:20px; font-size:9.5pt; font-family:var(--emaf-font);
    z-index:8999; pointer-events:none; opacity:0; transition:opacity 0.3s;
    white-space: nowrap;
}
#emaf-autosave-indicator.emaf-autosave-show { opacity:1; }

.emaf-sr-only { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; }

/* ── Responsive ──────────────────────────────────────────────────────────── */
@media (max-width: 580px) {
    .emaf-grid-2, .emaf-grid-2-equal, .emaf-grid-3 { grid-template-columns: 1fr; }
    .emaf-income-table thead { display:none; }
    .emaf-income-table td { display:block; border-bottom:none; }
    .emaf-income-table td:first-child { font-weight:bold; border-top:1px solid #ccc; padding-top:6px; }
    .emaf-income-table tr { display:block; margin-bottom:4px; }
    .emaf-save-float-btn { left:12px; bottom:80px; padding:10px 14px; font-size:10pt; }
    .emaf-radio-row { flex-direction:column; gap:8px; }
    .emaf-cost-table { max-width:100%; }
}