/* Sibco website forms (Request a call back, Drive for us). A sister to the Sibco quick-quote widgets:
   one card, blue top line, SIBCO TRANSPORT wordmark, uppercase labels, rounded option buttons, one big blue button.
   Work Sans and the site's blues so it blends with sibcotransport.co.uk.
   Dark by default (dark or photo sections); ?style=light / [sibco_form style="light"] = white card like the site's cards. */
.sf-body {
	--card: #0B0F17; --field: #1B2030; --field-line: #2F3547; --ink: #FFFFFF; --soft: #A7B0C0; --label: #C3CAD6;
	--blue: #005EE9; --blue-2: #3D7BFF; --tint: rgba(0, 94, 233, .22); --good: #22C55E; --bad: #FF8A73; --shadow: none;
	--page: #F5F7FA;
	margin: 0; background: var(--page); color: var(--ink); font-family: 'Work Sans', -apple-system, 'Segoe UI', Roboto, Arial, sans-serif; font-size: 15px; line-height: 1.5; -webkit-font-smoothing: antialiased; min-height: 100vh;
}
.sf-body.sf-light {
	--card: #FFFFFF; --field: #FFFFFF; --field-line: #D8DEE8; --ink: #0F172A; --soft: #6B7A8D; --label: #364151;
	--tint: rgba(0, 103, 255, .08); --bad: #B42318; --shadow: 0 2px 16px rgba(0, 0, 0, .07);
}
html:has(.sf-body:not(.sf-embed)) { background: #F5F7FA; }
.sf-body.sf-embed { background: transparent; min-height: 0; }
html:has(.sf-body.sf-embed) { background: transparent; } /* inside a website page: no grey page behind the card */
.sf-body *, .sf-body *::before, .sf-body *::after { box-sizing: border-box; }
#sibco-form { max-width: 760px; margin: 0 auto; padding: 24px 16px 40px; }
.sf-embed #sibco-form { padding: 0; max-width: none; }

/* The card */
.sf-card { background: var(--card); color: var(--ink); border-radius: 14px; box-shadow: var(--shadow); padding: 26px 24px 22px; display: grid; gap: 16px; position: relative; overflow: hidden; }
.sf-card::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 5px; background: var(--blue); }
.sf-logo { height: 36px; width: auto; }
.sf-head { display: grid; gap: 6px; }
.sf-brand { font-size: 15px; font-weight: 700; letter-spacing: .06em; color: var(--soft); }
.sf-brand i { color: var(--blue-2); font-style: italic; }
.sf-light .sf-brand i { color: var(--blue); }
.sf-h1 { font-size: 28px; font-weight: 700; line-height: 1.2; margin: 0; color: var(--ink); }
.sf-lead { margin: 0; color: var(--soft); font-size: 15.5px; }
.sf-h2 { font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: .08em; color: var(--label); margin: 6px 0 0; }
.sf-h2.sf-first { margin-top: 0; }

/* Steps */
.sf-dots { display: flex; gap: 6px; }
.sf-dots span { flex: 1; height: 4px; border-radius: 2px; background: var(--field-line); }
.sf-dots span.on, .sf-dots span.done { background: var(--blue); }
.sf-stepno { font-size: 12px; color: var(--soft); letter-spacing: .06em; text-transform: uppercase; margin-top: -8px; }
section[data-step] { display: grid; gap: 14px; }
section[data-step][hidden] { display: none; }
[hidden] { display: none !important; }

/* Job choices = the widget's option buttons, with the site's line icons */
.sf-choices { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.sf-choice { display: grid; justify-items: center; align-content: start; gap: 8px; background: var(--field); border: 1.5px solid var(--field-line); border-radius: 10px; padding: 14px 8px; font: inherit; font-size: 14.5px; font-weight: 500; line-height: 1.25; color: var(--ink); cursor: pointer; text-align: center; transition: border-color .15s, background .15s; }
.sf-choice, .sf-nav .btn, .sf-send { text-transform: none; letter-spacing: normal; box-shadow: none; }
.sf-choice:hover, .sf-choice:focus-visible { border-color: var(--blue); background: var(--tint); outline: none; }
.sf-ci { width: 44px; height: 44px; border-radius: 10px; background: rgba(26, 155, 245, .12); display: grid; place-items: center; }
.sf-ci svg { width: 22px; height: 22px; fill: none; stroke: var(--blue-2); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.sf-light .sf-ci svg { stroke: #0067FF; }

/* Fields = the widget's inputs */
.sf-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.sf-field { display: grid; gap: 6px; min-width: 0; }
.sf-field > span { font-size: 12.5px; font-weight: 500; text-transform: uppercase; letter-spacing: .06em; color: var(--label); }
.sf-field small { color: var(--soft); font-size: 12.5px; }
.sf-full { grid-column: 1 / -1; }
.sf-field input, .sf-field select, .sf-field textarea { width: 100%; max-width: 100%; background: var(--field); border: 1.5px solid var(--field-line); border-radius: 10px; padding: 13px 14px; font-family: inherit; font-size: 16px; color: var(--ink); }
.sf-field select { appearance: none; -webkit-appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--soft) 50%), linear-gradient(135deg, var(--soft) 50%, transparent 50%); background-position: calc(100% - 20px) 55%, calc(100% - 15px) 55%; background-size: 5px 5px; background-repeat: no-repeat; padding-right: 36px; }
.sf-field input::placeholder, .sf-field textarea::placeholder { color: var(--soft); opacity: .8; }
.sf-field textarea { resize: vertical; }
.sf-field input[type=file] { padding: 10px; font-size: 14px; }
.sf-field input:focus, .sf-field select:focus, .sf-field textarea:focus { outline: none; border-color: var(--blue); }
.sf-req { color: var(--bad); font-weight: 700; }
.sf-ticks { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 8px; }
.sf-tick { display: flex; gap: 10px; align-items: flex-start; background: var(--field); border: 1.5px solid var(--field-line); border-radius: 10px; padding: 11px 12px; font-size: 14.5px; line-height: 1.4; cursor: pointer; color: var(--ink); }
.sf-tick:has(input:checked) { border-color: var(--blue); background: var(--tint); }
.sf-tick input { width: 18px; height: 18px; margin: 1px 0 0; flex-shrink: 0; accent-color: var(--blue); }
.sf-consent { background: transparent; }
.sf-card a { color: var(--blue-2); }
.sf-light .sf-card a, .sf-light a { color: #0067FF; }
.sf-bad input, .sf-bad select, .sf-bad textarea, .sf-tick.sf-bad { border-color: var(--bad) !important; }
.sf-instant { margin: 0; background: var(--tint); border: 1.5px solid var(--blue); border-radius: 10px; padding: 11px 13px; font-size: 14.5px; color: var(--ink); }
.sf-instant a { font-weight: 600; }

/* Back / Next, and the big blue button */
.sf-nav { display: flex; justify-content: space-between; gap: 10px; }
.sf-nav .btn { font-family: inherit; font-weight: 600; font-size: 15px; padding: 12px 20px; border-radius: 10px; cursor: pointer; min-height: 46px; }
.sf-nav .sf-back { background: transparent; border: 1.5px solid var(--field-line); color: var(--soft); }
.sf-nav .sf-next { margin-left: auto; background: var(--blue); border: 0; color: #fff; }
.sf-foot { display: grid; gap: 10px; border-top: 1px solid var(--field-line); padding-top: 14px; }
.sf-sum { display: flex; flex-wrap: wrap; gap: 6px; }
.sf-sum span { font-size: 13px; padding: 4px 10px; border-radius: 20px; background: var(--tint); color: var(--ink); }
.sf-send { display: block; width: 100%; background: var(--blue); color: #fff; font-family: inherit; font-weight: 700; font-size: 17px; padding: 16px; border-radius: 10px; border: 0; cursor: pointer; }
.sf-send:disabled { opacity: .6; }
.sf-note, .sf-small { font-size: 13.5px; color: var(--soft); margin: 0; text-align: center; }
.sf-err { background: rgba(255, 138, 115, .14); color: var(--bad); border-radius: 10px; padding: 10px 12px; font-size: 14px; }
.sf-hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.sf-done { text-align: center; justify-items: center; padding: 40px 24px; }
.sf-tickmark { width: 64px; height: 64px; border-radius: 32px; background: var(--good); color: #fff; font-size: 34px; line-height: 64px; }
@media (max-width: 640px) {
	.sf-card { padding: 22px 16px 18px; }
	.sf-grid { grid-template-columns: 1fr; }
	.sf-h1 { font-size: 24px; }
	.sf-choices { grid-template-columns: 1fr 1fr; }
}

/* Drive for us: role chooser and documents list (4 Oct 2026) */
.sf-roles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.sf-role { display: flex; gap: 10px; align-items: flex-start; text-align: left; cursor: pointer; }
.sf-role input { margin-top: 3px; accent-color: #005EE9; }
.sf-role b { display: block; }
.sf-role small { display: block; opacity: .75; font-weight: 400; margin-top: 2px; }
.sf-role.on { border-color: #005EE9; box-shadow: 0 0 0 2px rgba(0, 94, 233, .25); }
.sf-docs { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0; }
.sf-doc { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border-radius: 999px; background: rgba(0, 94, 233, .12); font-size: 13px; }
.sf-doc button { border: 0; background: none; color: inherit; cursor: pointer; font-size: 13px; padding: 0 2px; }
.sf-adddoc { display: inline-flex; cursor: pointer; padding: 10px 14px; border: 1.5px dashed currentColor; border-radius: 12px; font-weight: 600; margin: 4px 0; }
@media (max-width: 520px) { .sf-roles { grid-template-columns: 1fr; } }

.sf-note.sf-left { text-align: left; margin: 0 0 12px; }

/* Inside a website page on a phone: the card fills the screen edge to edge. */
@media (max-width: 600px) { .sf-embed .sf-card { border-radius: 0; box-shadow: none; } }