/* Public quote pages (clients/mp, li, illness, ip). Brokers embed these in a
   670 x 600 iframe, so the layout is built for 670px and reflows to one column
   on narrow screens. Theme colours come from the broker's profile and are set
   as CSS variables by clients/includes/quote_page.php. */

:root {
	--accent: #7db806;
	--accent-text: #ffffff;
	--footer: #032b6c;
	--footer-link: #78a6f6;
	--text: #333333;
	--muted: #6b6b6b;
	--line: #d9d9d9;
	--panel: #f4f4f4;
	--error: #c40000;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
	margin: 0;
	background: #ffffff;
	color: var(--text);
	font: 14px/1.45 Arial, Helvetica, sans-serif;
}

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

.page { max-width: 670px; margin: 0 auto; }

/* Broker logo (only outside the iframe) */
.brand { padding: 12px 16px 8px; }
.brand img { max-width: 100%; height: auto; }
.brand-text { font-size: 32px; color: var(--accent); }

/* Product tabs */
.tabs { display: flex; flex-wrap: wrap; margin: 0; padding: 0; list-style: none; border-bottom: 4px solid var(--accent); }
.tabs li { flex: 1 1 0; min-width: 0; }
.tabs a {
	display: flex; align-items: center; justify-content: center; height: 100%;
	padding: 8px 6px; text-align: center;
	font-size: 12px; font-weight: bold; text-transform: uppercase; letter-spacing: .02em;
	color: var(--accent); background: var(--panel); border-right: 1px solid #ffffff;
}
.tabs a:hover { text-decoration: none; background: #e9e9e9; }
.tabs .on a { color: var(--accent-text); background: var(--accent); }

/* Links under the tabs */
.sublinks { display: flex; flex-wrap: wrap; gap: 4px 18px; justify-content: flex-end; margin: 0; padding: 6px 12px; list-style: none; background: var(--accent); }
.sublinks a { color: var(--accent-text); font-size: 12px; font-weight: bold; text-transform: uppercase; }

/* Steps: 1 My details, 2 My quote, 3 Get cover */
.steps { display: flex; margin: 8px 0 0; padding: 0; list-style: none; counter-reset: step; }
.steps li {
	flex: 1 1 0; display: flex; align-items: center; gap: 8px;
	padding: 7px 12px; background: var(--panel); color: #aaaaaa;
	font-size: 14px; font-weight: bold; text-transform: uppercase;
	border-top: 3px solid transparent;
}
.steps li::before {
	counter-increment: step; content: counter(step);
	display: inline-flex; align-items: center; justify-content: center;
	width: 26px; height: 26px; border-radius: 50%;
	border: 2px solid #cccccc; background: #ffffff; color: #aaaaaa; font-size: 15px;
}
.steps .on { color: var(--accent); background: #ffffff; border-top-color: var(--accent); }
.steps .on::before { border-color: var(--accent); color: var(--accent); }
.steps .done { color: var(--muted); }

/* Form area */
.content { padding: 10px; background: var(--panel); }
.columns { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.panel { background: #ffffff; border: 1px solid var(--line); }
.panel h2 {
	margin: 0; padding: 8px 14px; font-size: 14px; text-transform: uppercase;
	color: var(--accent); border-bottom: 1px solid var(--line);
}
.panel h2::before { content: "\203A"; margin-right: 8px; color: var(--muted); }
.panel .body { padding: 10px 14px 12px; }

.field { margin: 0 0 8px; }
.field label, .field .label { display: block; margin: 0 0 3px; font-size: 13px; color: var(--muted); }
.field input[type=text], .field input[type=email], .field input[type=tel], .field select {
	width: 100%; max-width: 260px; padding: 5px 8px;
	font: inherit; font-size: 14px; color: var(--text);
	border: 1px solid #bdbdbd; border-radius: 3px; background: #ffffff;
}
.field input:focus, .field select:focus { outline: 2px solid var(--accent); outline-offset: 0; border-color: var(--accent); }
.pair { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.pair .field select { max-width: none; }
.note { margin: 0 0 10px; font-size: 12px; color: var(--muted); }
.error { display: block; color: var(--error); font-size: 12px; font-weight: bold; }

.actions { margin: 10px 0 0; }
.button {
	display: inline-block; padding: 10px 26px; border: 0; border-radius: 3px; cursor: pointer;
	font: bold 15px Arial, Helvetica, sans-serif; text-transform: uppercase;
	color: var(--accent-text); background: var(--accent);
}
.button:hover, .button:focus { filter: brightness(.92); }

/* Quote results and summaries */
.summary { margin: 0 0 10px; font-size: 13px; line-height: 1.5; }
.premium { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; margin: 0 0 10px; font-weight: bold; color: var(--accent); }
.premium .label { font-size: 13px; text-transform: uppercase; }
.premium.secondary { font-weight: normal; color: var(--muted); }
.premium.secondary .label { text-transform: none; }
.premium.secondary input, .premium.secondary .amount { font-size: 18px; color: var(--text); }
.premium input, .premium .amount { width: 8em; padding: 0; border: 0; background: transparent; font: bold 24px Arial, Helvetica, sans-serif; color: var(--accent); }
.check { display: flex; align-items: flex-start; gap: 8px; margin: 0 0 8px; }
.check input { margin-top: 3px; }
.disclaimer { margin: 10px 0 0; padding: 8px 10px; font-size: 11px; color: var(--muted); background: var(--panel); border-left: 3px solid var(--accent); }
.hint { font-size: 11px; color: var(--muted); }
.details { width: 100%; border-collapse: collapse; font-size: 13px; }
.details th, .details td { padding: 4px 6px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--line); }
.details th { width: 45%; font-weight: normal; color: var(--muted); }
.full { grid-column: 1 / -1; }

/* Income protection: occupation auto-suggest box (includes/autosuggest2.js),
   radio rows and the day/month/year date of birth */
div.suggestions { position: absolute; min-width: 220px; max-height: 220px; overflow-y: auto; border: 1px solid #bdbdbd; background: #ffffff; box-shadow: 0 2px 6px rgba(0, 0, 0, .15); z-index: 10; }
div.suggestions div { padding: 3px 8px; cursor: default; font-size: 13px; text-align: left; }
div.suggestions div.current { background: var(--accent); color: #ffffff; }
.choices { display: flex; flex-wrap: wrap; gap: 4px 16px; }
.choices label { display: inline-flex; align-items: center; gap: 5px; margin: 0; color: var(--text); font-size: 14px; }
.dob { display: grid; grid-template-columns: 1fr 1.6fr 1.2fr; gap: 6px; max-width: 260px; }

/* Footer */
.footer { display: flex; justify-content: flex-end; gap: 18px; padding: 8px 12px; background: var(--footer); }
.footer a { color: var(--footer-link); font-size: 13px; }

/* "Getting your quote" overlay while the feed is called */
#hideshow { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(255, 255, 255, .8); visibility: hidden; }

/* Narrow screens: one column */
@media (max-width: 560px) {
	.columns { grid-template-columns: 1fr; }
	.tabs li { flex: 1 1 50%; }
	.steps li { font-size: 11px; padding: 8px 6px; gap: 5px; }
	.steps li::before { width: 22px; height: 22px; font-size: 12px; }
	.sublinks { justify-content: flex-start; }
	.field input[type=text], .field input[type=email], .field input[type=tel], .field select { max-width: none; }
}