/* Fragbox Contact — accordion, themed to per-panel accent tones.
   Each .fb-acc sets its own --tone (inline from PHP); descendants inherit it. */

.fb-contact{
	--ink:#1a1a1a;
	--line:#e6e9e8;
	--fb-btn:#2E7D74;
	--fb-accent:#85D4CE;   /* default pill-border + heading colour (out of the box) */
	--fb-active-bg:#EDFAFA; /* background of a pill once selected/open */
	max-width:760px;
	margin:0 auto;
	padding:8px 0 4px;
	font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
	color:var(--ink);
	-webkit-font-smoothing:antialiased;
}

.fb-contact .fb-kicker{
	margin:0 0 16px;
	font-size:16px;
	font-weight:600;
	letter-spacing:.18em;
	text-transform:uppercase;
	color:#6b7a78;
	text-align:center;
}

/* ---- accordion item ---- */
.fb-acc{
	border:1px solid var(--line);
	border-radius:14px;
	background:#fff;
	margin-bottom:12px;
	overflow:hidden;
	box-shadow:0 1px 2px rgba(16,24,40,.04);
}
.fb-acc-head{
	display:flex;
	align-items:center;
	gap:14px;
	width:100%;
	padding:18px 20px;
	border:none;
	background:transparent;
	cursor:pointer;
	font-family:inherit;
	font-size:17px;
	font-weight:600;
	color:var(--ink);
	text-align:left;
	transition:background .15s ease;
}
.fb-acc-head:hover{background:color-mix(in srgb,var(--tone) 7%,#fff);}
.fb-acc-bar{
	flex:0 0 auto;
	width:4px;
	height:26px;
	border-radius:3px;
	background:var(--tone);
}
.fb-acc-label{flex:1;}
.fb-acc-chev{
	flex:0 0 auto;
	width:20px;
	height:20px;
	color:var(--tone);
	transition:transform .25s ease;
}
.fb-acc.is-open .fb-acc-head{background:var(--fb-active-bg);}
.fb-acc.is-open .fb-acc-chev{transform:rotate(180deg);}

/* collapsible body (grid trick = smooth on variable height) */
.fb-acc-body{
	display:grid;
	grid-template-rows:0fr;
	transition:grid-template-rows .28s ease;
}
.fb-acc.is-open .fb-acc-body{grid-template-rows:1fr;}
.fb-acc-inner{overflow:hidden;}
.fb-acc-pad{padding:6px 20px 24px;}

.fb-acc h3{
	margin:6px 0 8px;
	font-size:21px;
	font-weight:600;
	letter-spacing:-.01em;
	color:var(--fb-accent);
}
.fb-acc > .fb-acc-body p,
.fb-acc-pad > p{
	margin:0 0 16px;
	font-size:15.5px;
	line-height:1.55;
	color:#3f4a48;
}

/* split layout — only present when a panel has an image.
   Mobile: image stacked on top, body (heading/text/form) below. */
.fb-split{display:flex;flex-direction:column;}
.fb-split-media{min-width:0;}
.fb-split-body{min-width:0;}

/* panel image / banner */
.fb-photo{
	height:180px;
	margin:0 -20px 18px;
	background-size:cover;
	background-position:center 38%;
	border-bottom:1px solid var(--line);
}

/* ---- forms ---- */
.fb-form{display:flex;flex-direction:column;gap:13px;}
.fb-form label{
	display:flex;
	flex-direction:column;
	gap:6px;
	font-size:14px;
	font-weight:600;
	color:#2b3432;
}
.fb-form label span{color:#c2562f;font-weight:600;}
.fb-form input,
.fb-form textarea{
	width:100%;
	box-sizing:border-box;
	padding:13px 14px;
	font-size:16px; /* prevents iOS zoom */
	font-family:inherit;
	color:var(--ink);
	background:#fff;
	border:1.5px solid var(--line);
	border-radius:10px;
	transition:border-color .15s ease,box-shadow .15s ease;
}
.fb-form input:focus,
.fb-form textarea:focus{
	outline:none;
	border-color:var(--tone);
	box-shadow:0 0 0 3px color-mix(in srgb,var(--tone) 18%,#fff);
}
.fb-form textarea{resize:vertical;min-height:90px;}

.fb-row{display:grid;grid-template-columns:1fr 1fr;gap:13px;}

.fb-file input[type=file]{padding:11px 14px;font-size:14px;}
.fb-hint{font-weight:400;color:#8a938f;font-size:13px;}

/* ---- DOA claim form (exact-layout fields) ---- */
.fb-contact .fb-field{display:flex;flex-direction:column;gap:6px;}
.fb-contact .fb-field-label{font-size:14px;font-weight:600;color:#2b3432;}
.fb-contact .fb-field-label span{color:#c2562f;font-weight:600;}
.fb-contact .fb-name-row{display:grid;grid-template-columns:1fr 1fr;gap:13px;}
.fb-contact .fb-name-col{display:flex;flex-direction:column;gap:5px;}
.fb-contact .fb-sublabel{font-size:12.5px;font-weight:500;color:#2E7D74;}
.fb-contact .fb-doa-form .fb-hint{color:#2E7D74;}

/* drop-zone file upload */
.fb-contact .fb-dropzone{
	display:flex;
	flex-direction:column;
	align-items:center;
	justify-content:center;
	gap:8px;
	padding:26px 16px;
	border:1.5px dashed var(--line);
	border-radius:10px;
	background:#fafbfb;
	cursor:pointer;
	text-align:center;
	transition:border-color .15s ease,background .15s ease;
}
.fb-contact .fb-dropzone:hover,
.fb-contact .fb-dropzone.is-drag{border-color:var(--fb-accent);background:var(--fb-active-bg);}
.fb-contact .fb-dropzone input[type=file]{display:none;}
.fb-contact .fb-dropzone-icon{width:30px;height:30px;color:#9aa7a3;}
.fb-contact .fb-dropzone-text{font-size:14px;font-weight:500;color:#2E7D74;}

/* honeypot */
.fb-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden;}

/* ---- buttons ---- */
.fb-btn{
	display:inline-block;
	align-self:flex-start;
	cursor:pointer;
	margin-top:4px;
	min-width:200px;
	padding:14px 26px;
	border:none;
	border-radius:11px;
	background:var(--fb-btn);
	color:#fff;
	font-size:16px;
	font-weight:600;
	font-family:inherit;
	letter-spacing:.01em;
	text-align:center;
	text-decoration:none;
	transition:filter .15s ease,transform .05s ease;
}
.fb-btn:hover{filter:brightness(.93);color:#fff;}
.fb-btn:active{transform:translateY(1px);}

/* ---- banners ---- */
.fb-banner{
	margin:0 0 18px;
	padding:14px 16px;
	border-radius:10px;
	font-size:15px;
	font-weight:500;
	line-height:1.45;
}
.fb-banner--ok{background:#e8f4ef;color:#0c5a45;border:1px solid #b9e0d2;}
.fb-banner--err{background:#fdecea;color:#922118;border:1px solid #f3c4bd;}

/* ---- mobile ---- */
@media (max-width:560px){
	.fb-acc-pad{padding:4px 16px 20px;}
	.fb-photo{height:150px;margin:0 -16px 16px;}
	.fb-acc h3{font-size:19px;}
	.fb-row{grid-template-columns:1fr;}
	.fb-btn{width:100%;text-align:center;align-self:stretch;}
}

/* ---- desktop (≥768px): pills span the full width in one row ---- */
@media (min-width:768px){
	.fb-contact{max-width:1040px;}
	.fb-items{
		display:flex;
		flex-wrap:wrap;          /* lets the open panel drop below; pills stay one row */
		align-items:stretch;
		gap:12px;
	}
	.fb-acc{display:contents;}   /* promote header + body to flex items */

	/* headers become equal-width pills that fill the row */
	.fb-acc-head{
		order:1;
		flex:1 1 0;              /* equal widths, always one row */
		min-width:0;
		width:auto;
		justify-content:center;
		text-align:center;
		line-height:1.25;
		padding:15px 18px;
		border:1.5px solid var(--fb-accent);
		border-radius:13px;
		background:transparent;
		color:#006060;
		font-size:19px;
	}
	.fb-acc-head:hover{background:color-mix(in srgb,var(--tone) 10%,#fff);}
	.fb-acc-head .fb-acc-bar,
	.fb-acc-head .fb-acc-chev{display:none;}
	.fb-acc.is-open .fb-acc-head{background:var(--fb-active-bg);color:#006060;}

	/* open panel: full-width row below the pills, content kept readable */
	.fb-acc-body{
		order:2;
		flex:0 0 100%;
		display:none;
		grid-template-rows:none;
	}
	.fb-acc.is-open .fb-acc-body{display:block;}
	.fb-acc-inner{overflow:visible;}
	.fb-acc-pad{
		max-width:760px;
		margin:12px auto 0;
		padding:26px;
		border:1px solid var(--line);
		border-radius:16px;
		background:#fff;
		box-shadow:0 1px 2px rgba(16,24,40,.04);
	}
	.fb-split{flex-direction:row;align-items:stretch;gap:24px;}
	.fb-split-body{order:1;flex:1 1 auto;}
	.fb-split-media{order:2;flex:0 0 42%;}
	.fb-photo{height:100%;margin:0;border-bottom:none;border-radius:12px;}
}

/* ===========================================================================
   Theme-override guard — FLATSOME.
   Flatsome styles bare <button>, .button, and form inputs (filled background,
   UPPERCASE, its own borders/radius). Our pills/btns are bare <button>/<a> and
   would otherwise inherit that. Scope + !important force the plugin's look to win.
   =========================================================================== */
.fb-contact .fb-acc-head{
	background:transparent !important;
	border:none !important;
	box-shadow:none !important;
	text-shadow:none !important;
	text-transform:none !important;
	letter-spacing:normal !important;
	color:var(--ink) !important;          /* mobile: dark label */
}
.fb-contact .fb-acc.is-open .fb-acc-head{
	background:var(--fb-active-bg) !important;
}
.fb-contact .fb-btn{
	background:var(--fb-btn) !important;
	color:#fff !important;
	border:none !important;
	border-radius:11px !important;
	box-shadow:none !important;
	text-shadow:none !important;
	text-transform:none !important;
	padding:14px 26px !important;
	min-width:200px !important;
	width:auto !important;
	height:auto !important;
	font-size:16px !important;
	font-weight:600 !important;
	line-height:1.2 !important;
	letter-spacing:.01em !important;
	text-align:center !important;
}

/* Flatsome styles inputs (grey fill, its own border/radius, focus shadow).
   Force the plugin's input look so all five forms stay consistent. */
.fb-contact .fb-form input,
.fb-contact .fb-form textarea{
	background:#fff !important;
	border:1.5px solid var(--line) !important;
	border-radius:10px !important;
	box-shadow:none !important;
	color:var(--ink) !important;
	font-size:16px !important;
}
.fb-contact .fb-form input:focus,
.fb-contact .fb-form textarea:focus{
	border-color:var(--tone) !important;
	box-shadow:0 0 0 3px color-mix(in srgb,var(--tone) 18%,#fff) !important;
}
.fb-contact .fb-form label{
	text-transform:none !important;
	letter-spacing:normal !important;
}

@media (min-width:768px){
	.fb-contact .fb-acc-head{
		background:transparent !important;
		border:1.5px solid var(--fb-accent) !important;
		border-radius:13px !important;
		color:#006060 !important;         /* desktop pill text = deep teal */
	}
	.fb-contact .fb-acc.is-open .fb-acc-head{
		background:var(--fb-active-bg) !important;
		border-color:var(--fb-accent) !important;
		color:#006060 !important;
	}
}