/*  Estate Fact-Find & Workflow – shared skin (v3)  */
/*  ============================================== */

/* ─── 1  DESIGN TOKENS ─────────────────────────── */
:root{
	--font-body: "Source Sans Pro", system-ui, -apple-system, "Segoe UI",
	             Roboto, "Helvetica Neue", Arial, sans-serif;
	--font-head: "Merriweather", Georgia, "Times New Roman", serif;

	--c-bg:        #ffffff;
	--c-panel:     #f5f7fa;
	--c-line:      #cdd2de;
	--c-text:      #252733;
	--c-accent:    #0059a8;
	--c-accent-d:  #004885;
	--c-danger:    #b81313;

	--radius:      4px;
	--gap:         1.4rem;
	--shadow:      0 0 0 1px rgba(0,0,0,.05), 0 8px 18px rgba(0,0,0,.04);
}


/* =============================================== */
/* EVERY RULE BELOW NOW COVERS:                    */
/*   .estate-fff  (11-step wizard)                 */
/*   .estate-under (10-Q underwriting form)        */
/*   .estate-qa   (QA survey)                      */
/* =============================================== */

.estate-fff,
.estate-under,
.estate-qa{
	max-width:1080px;
	margin:0 auto;
	font:18px/1.5 var(--font-body);
	color:var(--c-text);
}
.estate-fff *, .estate-under *, .estate-qa *{ box-sizing:border-box; }

/* ─── 3  FIELDSET + LEGEND ─────────────────────── */
.estate-fff fieldset,
.estate-under fieldset,
.estate-qa fieldset{
	border:1px solid #4f9795;
	background:#88c4c224;
	padding:2rem;
	margin:0 0 2rem;
	border-radius:var(--radius);
	box-shadow:var(--shadow);
	position:relative;
}
.estate-fff legend,
.estate-under legend,
.estate-qa legend{
	position:relative;
	top:-1.2rem;
	left:1rem;
	padding:0 .75rem;
	background:var(--c-panel);
	font:700 1.35rem/1 var(--font-head);
	border:1px solid var(--c-line);
	border-bottom:none;
	border-radius:var(--radius) var(--radius) 0 0;
}

/* ─── 4  SECTION HEADINGS ─────────────────────── */
.estate-fff h4,
.estate-under h4,
.estate-qa h4{
	font:700 1.1rem/1.2 var(--font-head);
	margin:2rem 0 .8rem;
}

/* ─── 5  GRID HELPERS ─────────────────────────── */
.estate-fff .two-cols,  .estate-under .two-cols,  .estate-qa .two-cols,
.estate-fff .three-cols,.estate-under .three-cols,.estate-qa .three-cols{
	display:grid;
	gap:var(--gap);
	margin-bottom:1.4rem;
}
@media(min-width:620px){
	.estate-fff  .two-cols,
	.estate-under .two-cols,
	.estate-qa .two-cols{ grid-template-columns:repeat(2,1fr); }
}
@media(min-width:820px){
	.estate-fff  .three-cols,
	.estate-under .three-cols,
	.estate-qa .three-cols{ grid-template-columns:repeat(3,1fr); }
}

/* ─── 6  LABEL / CONTROL BLOCK ────────────────── */
.estate-fff label,
.estate-under label,
.estate-qa label{
	display:flex;
	flex-direction:column;
	gap:.35rem;
	font-weight:600;
}
.estate-fff label > span,
.estate-under label > span,
.estate-qa label > span{ font-weight:400; font-size:.9rem; }

/* Yes/No grid rows */
.estate-fff .yesno-grid,  .estate-under .yesno-grid,  .estate-qa .yesno-grid{
	display:flex;
	flex-direction:column;
	gap:.75rem;
	margin-bottom:1.6rem;
}
.estate-fff .yesno-grid label,
.estate-under .yesno-grid label,
.estate-qa .yesno-grid label{
	flex-direction:row;
	align-items:center;
}
.estate-fff .yesno-grid select,
.estate-under .yesno-grid select,
.estate-qa .yesno-grid select,
.estate-fff .yesno-grid input[type=text],
.estate-under .yesno-grid input[type=text],
.estate-qa .yesno-grid input[type=text]{
	width:160px !important;
	margin-left:1rem;
}

/* ─── 7  INPUT / SELECT / TEXTAREA ────────────── */
.estate-fff input[type=text],   .estate-under input[type=text],   .estate-qa input[type=text],
.estate-fff input[type=email],  .estate-under input[type=email],  .estate-qa input[type=email],
.estate-fff input[type=number], .estate-under input[type=number], .estate-qa input[type=number],
.estate-fff select,             .estate-under select,             .estate-qa select,
.estate-fff textarea,           .estate-under textarea,           .estate-qa textarea{
	width:100%;
	padding:.6rem .8rem;
	border:1px solid var(--c-line);
	border-radius:var(--radius);
	background:#fff;
	transition:border-color .15s ease, box-shadow .15s ease;
	font:inherit;
}
.estate-fff input:focus,   .estate-under input:focus,   .estate-qa input:focus,
.estate-fff select:focus,  .estate-under select:focus,  .estate-qa select:focus,
.estate-fff textarea:focus,.estate-under textarea:focus,.estate-qa textarea:focus{
	outline:none;
	border-color:var(--c-accent);
	box-shadow:0 0 0 3px rgba(0,89,168,.18);
}
.estate-fff textarea, .estate-under textarea, .estate-qa textarea{
	resize:vertical; min-height:6.5rem;
}

/* remove number spinners */
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button{ -webkit-appearance:none; margin:0; }
input[type=number]{ -moz-appearance:textfield; }

/* ─── 8  TABLES ───────────────────────────────── */
.estate-fff table, .estate-under table, .estate-qa table{
	width:100%; border-collapse:collapse; margin:1.2rem 0;
}
.estate-fff th, .estate-under th, .estate-qa th,
.estate-fff td, .estate-under td, .estate-qa td{
	border:1px solid var(--c-line);
	padding:.7rem .9rem;
	text-align:left;
}
.estate-fff thead th,
.estate-under thead th,
.estate-qa thead th{
	background:#edf0f5;
	font-weight:700;
	font-family:var(--font-head);
}
.estate-fff tbody tr:nth-child(even),
.estate-under tbody tr:nth-child(even),
.estate-qa tbody tr:nth-child(even){ background:#fafbfc; }

/* ─── 9  CALC OUTPUT SPANS ───────────────────── */
[id^="tot_"], [id^="prob_"], [id^="iht_"], [id^="rep_"]{
	font-weight:700;
	font-variant-numeric:tabular-nums lining-nums;
}

/* ─── 10  BUTTONS ─────────────────────────────── */
.estate-fff button,
.estate-under button,
.estate-qa button{
	border:none;
	padding:.75rem 1.6rem;
	border-radius:var(--radius);
	font-weight:700;
	cursor:pointer;
	transition:background .15s ease, box-shadow .15s ease;
	line-height:1.2;
	font-size:1rem;
}
.estate-fff .next-step, .estate-qa .next-step, .estate-under .next-step,
.estate-fff .submit-form, .estate-under .submit-form, .estate-qa .submit-form{
	background:var(--c-accent); color:#fff;
}
.estate-fff .next-step:hover,  .estate-under .next-step:hover,  .estate-qa .next-step:hover,
.estate-fff .submit-form:hover,.estate-under .submit-form:hover,.estate-qa .submit-form:hover{
	background:var(--c-accent-d);
}
.estate-fff .prev-step, .estate-under .prev-step, .estate-qa .prev-step{
	background:#e5e8f0;
}
.estate-fff .prev-step:hover, .estate-under .prev-step:hover, .estate-qa .prev-step:hover{
	background:#d8dbe4;
}
.estate-fff .danger, .estate-under .danger, .estate-qa .danger{
	background:var(--c-danger); color:#fff;
}
.estate-fff .danger:hover, .estate-under .danger:hover, .estate-qa .danger:hover{
	background:#9d1010;
}

/* ensure margin under nav buttons */
.estate-fff .prev-step,  .estate-under .prev-step,  .estate-qa .prev-step,
.estate-fff .next-step,  .estate-under .next-step,  .estate-qa .next-step,
.estate-fff .submit-form,.estate-under .submit-form,.estate-qa .submit-form,
#clear-form{ margin-top:2rem; }
.estate-fff .prev-step + .next-step,
.estate-under .prev-step + .next-step,
.estate-qa .prev-step + .next-step{ margin-left:auto; }

/* ─── 11  RESPONSIVE ─────────────────────────── */
@media(max-width:599px){
	.estate-fff fieldset,  .estate-under fieldset,  .estate-qa fieldset{ padding:1.5rem; }
	.estate-fff legend,    .estate-under legend,    .estate-qa legend { left:.75rem; font-size:1.15rem; }
	.estate-fff button,    .estate-under button,    .estate-qa button{ width:100%; }
	.estate-fff .prev-step, .estate-under .prev-step, .estate-qa .prev-step{ margin-right:0; }
	.estate-fff .prev-step + .next-step,
	.estate-under .prev-step + .next-step,
	.estate-qa .prev-step + .next-step{ margin-left:0; margin-top:var(--gap); }
}

/* ─── 12  PRINT ───────────────────────────────── */
@media print{
	:root{ --c-panel:#fff; --shadow:none; }
	body{ background:#fff !important; }
	.estate-fff fieldset,
	.estate-under fieldset,
	.estate-qa fieldset{ page-break-inside:avoid; }
	/* show all steps & hide nav */
	.estate-fff fieldset[hidden],
	.estate-under fieldset[hidden],
	.estate-qa fieldset[hidden]{ display:block !important; }
	button, #clear-form{ display:none !important; }
}

/* ─── 13  GLOBAL LAYOUT CLEAN-UP (unchanged) ─── */
legend.visually-hidden{ display:none !important; }
h1.wp-block-post-title,
footer.wp-block-template-part,
.wp-block-group.alignfull.is-layout-flow.wp-block-group-is-layout-flow{ display:none !important; }

h1, h2{ text-wrap:pretty; font-weight:700; }
h2.step-heading{ margin-top:7px !important; }

.long-input{
	width:100%; max-width:600px; padding:.5rem; font-size:1rem; box-sizing:border-box;
}
button.danger, .clear-form.danger{
	background:#d52b1e; color:#fff; border:none; padding:.5rem 1rem;
	border-radius:4px; font-weight:bold; cursor:pointer;
	transition:background-color .2s ease;
}
button.danger:hover, .clear-form.danger:hover{ background:#b92419; }

.estate-fff input,
.estate-under input,
.estate-qa input {
	width: 100%;
	padding: 0.6rem 0.8rem;
	border: 1px solid var(--c-line);
	border-radius: var(--radius);
	background: #fff;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
	font: inherit;
}


.estate-status-box {
	margin-top: 3rem;
}

.pending-box {
	border: 2px solid var(--c-line);
	background: #fefefe;
	padding: 1.5rem;
	border-radius: var(--radius);
	box-shadow: var(--shadow);
	text-align: center;
	max-width: 400px;
	margin: 0 auto;
}

.pending-status {
	color: var(--c-accent);
	font-size: 1.4rem;
	font-weight: bold;
	margin: 0;
}

/* ===== Pending Status Box ===== */
.pending-container {
	margin: 2rem auto 0;
	max-width: 300px;
}

.pending-box {
	border: 1px solid #4f9795;
	background: #e6f2f2;
	padding: 1rem 1.25rem;
	border-radius: var(--radius);
	box-shadow: var(--shadow);
	text-align: center;
	font-size: 1.4rem;
	font-weight: bold;
	color: var(--c-accent);
}

/* =====  Status card  ===== */
.status-wrapper{
	max-width:320px;
	margin:0 auto 0;
}
.decision{
	border:1px solid #4f9795;
	padding:1rem 1.25rem;
	border-radius:var(--radius);
	box-shadow:var(--shadow);
	text-align:center;
	font-size:1.5rem;
	font-weight:700;
	font-variant-numeric:tabular-nums;
}

/* colour themes – JS just toggles these classes */
.pending-box{ background:#e6f2f2; color:var(--c-accent); }       /* default */
.approved-box{ background:#e4f9ef; color:#008600;  }             /* green  */
.denied-box  { background:#fdecec; color:#b81313;  }             /* red    */

/* smaller placeholders for postcode / house inputs */
::placeholder{ font-size:.78rem; opacity:.65; }

/* ---------- status grid layout ---------- */
.status-grid{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:1.4rem;
}
.status-col,
.status-grid .span-2{
    text-align:center;                   /* centre headings + boxes */
}
.status-grid .span-2{ grid-column:1 / -1; }  /* full-row span */

/* ---------- make <a class="submit-form"> look like buttons ---------- */
.estate-fff a.submit-form.link-button{
    display:inline-block;
    text-decoration:none;
    text-align:center;
    color:#fff;
    background:var(--c-accent);
    padding:.75rem 1.6rem;
    border-radius:var(--radius);
    font-weight:700;
    transition:background .15s ease, box-shadow .15s ease;
    margin:2.2rem auto 0;                /* centred with space */
}
.estate-fff a.submit-form.link-button:hover{
    background:var(--c-accent-d);
}

/* centre QA button */
a.link-button{ margin:2.2rem auto 0; }

/* heading + box sit flush in the Fast-Track row */
.status-col span-2 h4{ margin-bottom:.6rem; }

/* ─── HEADER & FOOTER STRIP ───────────────────────────── */
.estate-header,
.estate-footer{
	background:#4f9795;
	text-align:center;
	padding:1rem;
}

.estate-header img{
	max-height:60px;
	width:auto;
}

.estate-footer{
	color:#fff;
	font-size:.9rem;
	margin-top:3rem;
}

.wp-block-group.alignfull.has-global-padding.is-layout-constrained.wp-block-group-is-layout-constrained {
    padding-top: 0px !important;
}

div#wpadminbar {
    display: none !important;
}

/* ── quick-jump strip ───────────────────────────────────────── */
.step-nav{
	display:flex; flex-wrap:wrap; justify-content:flex-start;
	margin:2rem 0 0; padding:0; list-style:none;
}
.step-nav li{margin:0 .4rem .6rem 0}
.step-nav button{
	cursor:pointer; border:1px solid #ccc; background:#f9f9f9;
	padding:.45rem .8rem; border-radius:4px; font-weight:600;
}
.step-nav button .title{
	display:block; font-size:.78em; font-weight:400; color:#666;
}
.step-nav button.active{
	background:#4f9795; border-color:#4f9795; color:#fff !important;
}
.step-nav button.active .title {
	color: #fff;
}