/* Patient Billing — standalone Direct Debit form
   Branding taken from patientbilling.co.uk:
   Space Grotesk · #001510 ink green · #003D3A deep green · #EDE9D7 cream
   #F5F4EB light cream · #D3F4E9 pale mint · #00B995 teal accent
   Square corners and arrow buttons, as on the site.
   Scoped under .pbddf so it plays nicely with any theme/Elementor. */

.pbddf {
	--pb-ink: #001510;        /* near-black green (site hero) */
	--pb-deep: #003D3A;       /* deep green sections */
	--pb-deep-text: #003F32;  /* deep green text on cream */
	--pb-cream: #EDE9D7;      /* site cream */
	--pb-cream-2: #F5F4EB;    /* lighter cream */
	--pb-mint: #D3F4E9;       /* pale mint (text on dark) */
	--pb-teal: #00B995;       /* accent / buttons */
	--pb-teal-dark: #00A283;
	--pb-body: #1C2B26;
	--pb-muted: #55655E;
	--pb-line: #D9D4C0;       /* cream-tinted rule */
	--pb-error: #B3261E;

	max-width: var(--pbddf-max, 880px);
	margin: 0 auto;
	color: var(--pb-body);
	font-family: "Space Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
	font-size: 16px;
	line-height: 1.55;
}

/* ---------- layout options (shortcode: layout / max_width / logo) ----------
   layout="full"  → the banner, progress strip and cream section run edge-to-edge
                    while the content stays centred at --pbddf-max.
   max_width="…"  → sets --pbddf-max (px) on the root.
   logo="hide"    → hides the wordmark in the banner (site header already shows it).
   Stable hooks for theme CSS: .pbddf-head-inner, .pbddf-progress-wrap, .pbddf-form-inner */
.pbddf-layout-full {
	max-width: none;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
}
.pbddf-head-inner,
.pbddf-layout-full .pbddf-progress,
.pbddf-form-inner {
	max-width: var(--pbddf-max, 880px);
	margin-left: auto;
	margin-right: auto;
}
.pbddf-progress-wrap { background: var(--pb-deep); }
.pbddf-logo-hide .pbddf-head .pbddf-brand { display: none; }
.pbddf-logo-hide .pbddf-head h2 { margin-top: 0; }

.pbddf *, .pbddf *::before, .pbddf *::after { box-sizing: border-box; }
.pbddf [hidden] { display: none !important; }

/* test-mode ribbon (shown when the plugin points at DocuSign's demo environment) */
.pbddf-testmode {
	background: #7A5C00;
	color: #FFF4D6;
	font-size: 13px;
	font-weight: 500;
	letter-spacing: .3px;
	padding: 10px 16px;
	text-align: center;
	border-bottom: 3px solid #FFD200;
}

.pbddf-purpose { margin: 16px 0 18px; }

/* ---------- brand mark ---------- */
.pbddf-brand { display: inline-flex; align-items: center; gap: 9px; line-height: 1; }
.pbddf-brand-text { font-size: 1.15em; letter-spacing: .2px; font-weight: 300; }
.pbddf-brand-text b { font-weight: 600; }
.pbddf-mark { display: inline-block; flex: 0 0 auto; }

/* ---------- header band (site hero style) ---------- */
.pbddf-head {
	position: relative;
	overflow: hidden;
	background: linear-gradient(118deg, #000E0A 0%, var(--pb-ink) 45%, #00291F 78%, #003D30 100%);
	color: var(--pb-mint);
	padding: 42px 44px 40px;
	padding-top: calc(42px + var(--pbddf-topgap, 0px));
}
.pbddf-head::after {
	/* diagonal motif from the site hero */
	content: "";
	position: absolute;
	inset: 0;
	background:
		linear-gradient(52deg, transparent 62%, rgba(0, 185, 149, .14) 62.5%, rgba(0, 185, 149, .14) 70%, transparent 70.5%),
		linear-gradient(52deg, transparent 76%, rgba(211, 244, 233, .07) 76.5%, rgba(211, 244, 233, .07) 86%, transparent 86.5%);
	pointer-events: none;
}
.pbddf-head .pbddf-brand { color: var(--pb-cream); font-size: 15px; }
.pbddf-head h2 {
	margin: 18px 0 8px;
	color: #EFE9D2;
	font-family: inherit;
	font-size: 40px;
	font-weight: 300;
	line-height: 1.1;
	letter-spacing: .2px;
}
.pbddf-head p { margin: 0; color: var(--pb-mint); font-weight: 300; font-size: 15.5px; max-width: 58ch; position: relative; }

/* ---------- progress (page tabs) ---------- */
.pbddf-progress {
	display: flex;
	gap: 2px;
	list-style: none;
	margin: 0;
	padding: 14px 20px;
	background: transparent;
	overflow-x: auto;
}
.pbddf-progress li { display: flex; align-items: center; gap: 8px; flex: 1; min-width: 0; padding: 6px 8px; opacity: .5; }
.pbddf-progress li.is-active, .pbddf-progress li.is-done { opacity: 1; }
.pbddf-dot {
	flex: 0 0 auto;
	width: 24px; height: 24px;
	background: transparent;
	border: 1.5px solid var(--pb-mint);
	color: var(--pb-mint);
	font-size: 12.5px; font-weight: 600;
	display: inline-flex; align-items: center; justify-content: center;
}
.pbddf-progress li.is-active .pbddf-dot { background: var(--pb-teal); border-color: var(--pb-teal); color: var(--pb-ink); }
.pbddf-progress li.is-done .pbddf-dot { background: var(--pb-mint); border-color: var(--pb-mint); color: var(--pb-deep); }
.pbddf-dot-label { font-size: 12.5px; color: var(--pb-mint); font-weight: 400; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ---------- form body: cream desk, paper sheets ---------- */
.pbddf-form {
	background: var(--pb-cream);
	padding: 34px 34px 30px;
}
.pbddf-step { display: none; }
.pbddf-step.is-active { display: block; animation: pbddf-in .3s ease; }
@keyframes pbddf-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

/* the A4-style sheet */
.pbddf-sheet {
	background: #FFFFFF;
	box-shadow: 0 1px 0 rgba(0, 21, 16, .08), 0 14px 34px rgba(0, 21, 16, .13);
	border-top: 4px solid var(--pb-deep);
}
.pbddf-sheet-head {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 18px 34px 0;
	color: var(--pb-deep-text);
}
.pbddf-sheet-title { font-size: 13px; font-weight: 400; letter-spacing: .4px; color: var(--pb-muted); }
.pbddf-sheet-head .pbddf-brand { color: var(--pb-deep-text); font-size: 13px; }
.pbddf-sheet-body { padding: 12px 34px 26px; }
.pbddf-sheet-foot {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 12px 34px;
	background: var(--pb-ink);
	color: var(--pb-cream);
	font-size: 12px;
	font-weight: 300;
	letter-spacing: .4px;
}

.pbddf-page-title {
	color: var(--pb-deep-text);
	font-size: 24px;
	font-weight: 500;
	margin: 8px 0 18px;
	letter-spacing: .1px;
}
.pbddf-sub {
	color: var(--pb-deep-text);
	font-size: 16px;
	font-weight: 600;
	margin: 26px 0 12px;
	padding-bottom: 7px;
	border-bottom: 2px solid var(--pb-cream);
}

.pbddf-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 24px; }
.pbddf-grid-3 { grid-template-columns: 1fr 1fr 1fr; }
@media (max-width: 640px) { .pbddf-grid, .pbddf-grid-3 { grid-template-columns: 1fr; } }

.pbddf-field { display: block; margin: 0 0 6px; }
.pbddf-label { display: block; font-size: 13px; font-weight: 500; color: var(--pb-muted); margin-bottom: 5px; letter-spacing: .1px; }
.pbddf-label em, .pbddf-declare em { color: var(--pb-teal-dark); font-style: normal; }

.pbddf input[type="text"],
.pbddf input[type="email"],
.pbddf input[type="tel"],
.pbddf input[type="number"],
.pbddf textarea {
	width: 100%;
	padding: 11px 13px;
	border: 1.5px solid var(--pb-line);
	border-radius: 0;             /* square, like the site */
	background: var(--pb-cream-2);
	font-family: inherit;
	font-size: 15px;
	color: var(--pb-body);
	transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}
.pbddf input:focus, .pbddf textarea:focus {
	outline: none;
	border-color: var(--pb-teal);
	box-shadow: 0 0 0 3px rgba(0, 185, 149, .18);
	background: #fff;
}
.pbddf input.pbddf-invalid, .pbddf textarea.pbddf-invalid { border-color: var(--pb-error); }

.pbddf-control { display: flex; align-items: stretch; }
.pbddf-prefix {
	display: inline-flex; align-items: center;
	padding: 0 12px;
	border: 1.5px solid var(--pb-line); border-right: 0;
	background: var(--pb-cream);
	color: var(--pb-deep-text);
	font-weight: 600;
}

.pbddf-hint { display: block; font-size: 12.5px; color: var(--pb-muted); margin-top: 4px; font-weight: 300; }
.pbddf-err { display: none; font-size: 12.5px; color: var(--pb-error); margin-top: 4px; font-weight: 500; }
.pbddf-err.is-visible { display: block; }

/* segmented yes/no + title pills — square site style */
.pbddf-seg { display: inline-flex; flex-wrap: wrap; gap: 8px; }
.pbddf-seg label { cursor: pointer; }
.pbddf-seg input { position: absolute; opacity: 0; pointer-events: none; }
.pbddf-seg span {
	display: inline-block;
	padding: 8px 20px;
	border: 1.5px solid var(--pb-line);
	border-radius: 0;
	font-size: 14px;
	font-weight: 400;
	color: var(--pb-muted);
	background: #fff;
	transition: all .15s ease;
}
.pbddf-seg input:checked + span {
	background: var(--pb-deep);
	border-color: var(--pb-deep);
	color: var(--pb-cream);
	font-weight: 500;
}
.pbddf-seg input:focus-visible + span { box-shadow: 0 0 0 3px rgba(0, 185, 149, .25); }
.pbddf-yn { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 10px 0; border-bottom: 1px dashed var(--pb-line); flex-wrap: wrap; }
.pbddf-yn .pbddf-label { margin: 0; flex: 1 1 320px; font-size: 14.5px; color: var(--pb-body); font-weight: 400; }

/* days grid */
.pbddf-days { display: grid; gap: 8px; }
.pbddf-day-row { display: grid; grid-template-columns: 110px 1fr 1fr; gap: 10px; align-items: center; }
.pbddf-day-name { font-size: 14px; font-weight: 500; color: var(--pb-deep-text); }
@media (max-width: 520px) { .pbddf-day-row { grid-template-columns: 90px 1fr 1fr; } }

/* checkboxes */
.pbddf-checks { display: flex; gap: 26px; flex-wrap: wrap; }
.pbddf-checks label { display: inline-flex; align-items: center; gap: 9px; font-size: 15px; cursor: pointer; }
.pbddf-checks input, .pbddf-declare input { width: 18px; height: 18px; accent-color: var(--pb-teal); }

/* procedures */
.pbddf-proc-row { display: grid; grid-template-columns: 1fr 180px; gap: 10px; margin-bottom: 10px; }
.pbddf-proc-fee { display: flex; }
@media (max-width: 520px) { .pbddf-proc-row { grid-template-columns: 1fr 130px; } }

/* change-of-address letter preview */
.pbddf-letter {
	border: 1.5px solid var(--pb-line);
	background: var(--pb-cream-2);
	padding: 24px 28px;
	font-size: 15px;
}
.pbddf-letter p { margin: 0 0 16px; }
.pbddf-letter-rows { border-top: 2px solid var(--pb-cream); margin-top: 4px; }
.pbddf-letter-rows > div {
	display: grid;
	grid-template-columns: 260px 1fr;
	gap: 14px;
	padding: 10px 0;
	border-bottom: 1px dashed var(--pb-line);
	align-items: baseline;
}
.pbddf-letter-rows span { color: var(--pb-muted); font-size: 13.5px; }
.pbddf-letter-rows strong { color: var(--pb-deep-text); font-weight: 600; }
.pbddf-sig-placeholder { color: var(--pb-teal-dark); font-style: normal; font-size: 13.5px; font-weight: 500; }
@media (max-width: 560px) { .pbddf-letter-rows > div { grid-template-columns: 1fr; gap: 2px; } }

/* direct debit + declaration */
.pbddf-secure {
	background: var(--pb-cream-2);
	border: 1.5px solid var(--pb-line);
	border-left: 4px solid var(--pb-teal);
	padding: 13px 16px;
	font-size: 14px;
	color: var(--pb-deep-text);
}
.pbddf-lock { margin-right: 4px; }
.pbddf-declare { display: flex; gap: 12px; align-items: flex-start; background: var(--pb-cream-2); border: 1.5px solid var(--pb-line); border-left: 4px solid var(--pb-teal); padding: 15px 17px; font-size: 14.5px; cursor: pointer; margin-top: 18px; }
.pbddf-declare input { flex: 0 0 auto; margin-top: 2px; }

/* review */
.pbddf-review { display: grid; gap: 10px; }
.pbddf-review .pbddf-rev-group { border: 1.5px solid var(--pb-line); padding: 14px 18px; }
.pbddf-review h4 { margin: 0 0 8px; font-size: 13px; color: var(--pb-deep-text); font-weight: 600; text-transform: uppercase; letter-spacing: .6px; }
.pbddf-review dl { display: grid; grid-template-columns: 230px 1fr; gap: 4px 14px; margin: 0; font-size: 14px; }
.pbddf-review dt { color: var(--pb-muted); font-weight: 300; }
.pbddf-review dd { margin: 0; font-weight: 500; overflow-wrap: anywhere; }
@media (max-width: 560px) { .pbddf-review dl { grid-template-columns: 1fr; } .pbddf-review dd { margin-bottom: 6px; } }

/* nav + buttons — square teal, arrow prefix, like "→ Request a call back" */
.pbddf-nav { display: flex; justify-content: space-between; gap: 12px; margin-top: 26px; }
.pbddf-btn {
	appearance: none;
	border: 1.5px solid var(--pb-teal);
	background: var(--pb-teal);
	color: #EDE9D7;
	font-family: inherit;
	font-size: 15px;
	font-weight: 500;
	letter-spacing: .2px;
	padding: 13px 26px;
	border-radius: 0;
	cursor: pointer;
	transition: background .15s ease, border-color .15s ease, transform .1s ease;
	margin-left: auto;
}
.pbddf-btn:hover { background: var(--pb-teal-dark); border-color: var(--pb-teal-dark); }
.pbddf-btn:active { transform: translateY(1px); }
.pbddf-btn[disabled] { opacity: .6; cursor: wait; }
.pbddf-arrow { display: inline-block; margin-right: 8px; font-weight: 400; }
.pbddf-btn-ghost { background: transparent; color: var(--pb-deep-text); border: 1.5px solid var(--pb-deep); margin-left: 0; margin-right: auto; }
.pbddf-btn-ghost:hover { background: var(--pb-deep); color: var(--pb-cream); }
.pbddf-btn-ghost .pbddf-arrow { margin-right: 8px; }

/* messages & panels */
.pbddf-msg { margin-top: 18px; padding: 13px 16px; font-size: 14.5px; background: #FDECEA; color: var(--pb-error); border: 1.5px solid #F5C6C2; }
.pbddf-panel {
	background: #fff;
	border-top: 4px solid var(--pb-deep);
	box-shadow: 0 14px 34px rgba(0, 21, 16, .13);
	padding: 46px 42px;
	text-align: center;
	max-width: 640px;
	margin: 0 auto;
	font-family: "Space Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
}
.pbddf-panel h3 { color: #003F32; font-size: 25px; font-weight: 500; margin: 14px 0 10px; }
.pbddf-panel p { color: #55655E; font-size: 15.5px; font-weight: 300; }
.pbddf-panel a { color: #00A283; }
.pbddf-panel-icon {
	width: 56px; height: 56px;
	display: inline-flex; align-items: center; justify-content: center;
	font-size: 26px; font-weight: 600;
}
.pbddf-success .pbddf-panel-icon { background: #D3F4E9; color: #003F32; }
.pbddf-warn .pbddf-panel-icon { background: #F5EBD3; color: #7A5C00; }

/* honeypot */
.pbddf-hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; opacity: 0; }

@media (max-width: 640px) {
	.pbddf-testmode { font-size: 11.5px; padding: 7px 12px; }
	.pbddf-head { padding: 18px 20px 22px; padding-top: calc(14px + var(--pbddf-topgap, 0px)); }
	.pbddf-head h2 { font-size: 26px; margin: 10px 0 6px; }
	.pbddf-head p { font-size: 13.5px; line-height: 1.45; }
	.pbddf-progress { padding: 10px 14px; }
	.pbddf-form { padding: 18px 14px; }
	.pbddf-sheet-head, .pbddf-sheet-foot { padding-left: 20px; padding-right: 20px; }
	.pbddf-sheet-body { padding: 10px 20px 22px; }
	.pbddf-dot-label { display: none; }
}