/*
 * Portal styles.
 *
 * These render inside the active theme's page template, so everything here
 * inherits the theme's fonts, colours and link styles. The layout language -
 * cards with a titled header and a status pill, label/value rows beneath - is
 * deliberately identical to the API-key manage page, so the two client-facing
 * screens read as one product rather than two plugins.
 *
 * Every colour is a custom property that reads the theme's own variable first
 * and falls back to the Dearthwood dark palette, so a theme can restyle the
 * whole portal without touching this file:
 *
 *   .dcp-portal { --dcp-accent: #0b5cad; --dcp-radius: 10px; }
 */

.dcp-portal {
	/* Surfaces and borders, matching the API-key manage page exactly so the
	   two client-facing screens read as one product. */
	--dcp-surface: var(--bg-surface, #141519);
	--dcp-base: var(--bg-base, #0c0d0f);
	--dcp-border: var(--border, var(--border-color, #2a2c38));
	--dcp-text: var(--text-primary, #f0ece4);
	--dcp-text-muted: var(--text-muted, #909099);
	--dcp-accent: var(--accent, var(--accent-color, #7fff00));
	--dcp-radius: 12px;
	--dcp-radius-sm: 6px;

	/* Status colours stay legible on either a light or dark surface. */
	--dcp-ok-bg: rgba(39, 174, 96, 0.16);
	--dcp-ok-fg: #3ddc84;
	--dcp-ok-border: rgba(39, 174, 96, 0.45);
	--dcp-warn-bg: rgba(240, 169, 42, 0.14);
	--dcp-warn-fg: #f0a92a;
	--dcp-warn-border: rgba(240, 169, 42, 0.4);
	--dcp-bad-bg: rgba(192, 57, 43, 0.14);
	--dcp-bad-fg: #ff7b73;
	--dcp-bad-border: rgba(192, 57, 43, 0.4);

	--dcp-input-bg: var(--bg-base, #0c0d0f);
	--dcp-input-fg: var(--text-primary, #f0ece4);

	width: 100%;
	box-sizing: border-box;
	font: inherit;
	color: var(--dcp-text);
}

.dcp-portal * { box-sizing: border-box; }

/* The project view and the standalone notice are read like a document, so
   they're held to a comfortable measure. The public request form is NOT -
   it fills whatever column it's dropped into, because the page decides how
   wide that is, not this plugin. */
.dcp-project,
.dcp-narrow {
	max-width: 760px;
	margin: 0 auto;
}

/* ---------- shared bits ---------- */

.dcp-portal .dcp-empty,
.dcp-portal .dcp-closed-note {
	color: var(--dcp-text-muted);
	font-size: 14px;
	margin: 0;
}

.dcp-portal h2,
.dcp-portal h3,
.dcp-portal h4 {
	font-family: var(--font-display, inherit);
	letter-spacing: -0.01em;
	color: var(--dcp-text);
}

/* ---------- field rows ---------- */

/* Paired fields sit two-up on desktop and stack on narrow screens. The wrap
   plus a 12em flex-basis does it without a media query: two fields need ~24em
   plus the gap, so they drop to one column exactly when they no longer fit.
   The request form's own section only overrides the gap - this is the rule
   that does the work, so removing it silently stacks the form everywhere. */
.dcp-field-row {
	display: flex;
	gap: 1em;
	flex-wrap: wrap;
}

.dcp-field-row label { flex: 1 1 12em; }

/* ---------- cards ---------- */

/* The card is the unit this whole screen is built from: a titled header with
   a status pill on the right, and a body of label/value rows beneath. Same
   construction as the API-key manage page. */
.dcp-card {
	background: var(--dcp-surface);
	border: 1px solid var(--dcp-border);
	border-radius: var(--dcp-radius);
	overflow: hidden;
	margin: 0 0 22px;
}

.dcp-card-head {
	padding: 16px 22px;
	border-bottom: 1px solid var(--dcp-border);
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	flex-wrap: wrap;
}

.dcp-card-head h2,
.dcp-card-head h3 {
	margin: 0;
	font-size: 1.15rem;
	font-weight: 700;
}

.dcp-card-body { padding: 0 22px; }

.dcp-row {
	display: flex;
	align-items: baseline;
	gap: 14px;
	padding: 12px 0;
	border-bottom: 1px solid var(--dcp-border);
}

.dcp-row:last-child { border-bottom: none; }

.dcp-lbl {
	min-width: 130px;
	font-size: 11px;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--dcp-text-muted);
	flex-shrink: 0;
	padding-top: 2px;
}

.dcp-val {
	font-size: 14px;
	color: var(--dcp-text);
	flex: 1 1 auto;
}

.dcp-val-strong { font-weight: 600; }
.dcp-val-muted  { color: var(--dcp-text-muted); }

/* A free-standing card with no header - used for the brief, the timeline
   and the message thread, where the heading sits inside the box. */
.dcp-section {
	background: var(--dcp-surface);
	border: 1px solid var(--dcp-border);
	border-radius: var(--dcp-radius);
	padding: 20px 22px;
	margin: 0 0 16px;
}

.dcp-section > h2,
.dcp-section > h3,
.dcp-section > h4 {
	margin: 0 0 6px;
	font-size: 1.05rem;
	font-weight: 700;
}

.dcp-section > p { font-size: 14px; line-height: 1.55; }
.dcp-section-intro { margin: 0 0 16px; color: var(--dcp-text-muted); }

.dcp-section-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	flex-wrap: wrap;
	margin-bottom: 6px;
}

.dcp-section-head > h2,
.dcp-section-head > h3,
.dcp-section-head > h4 { margin: 0; }

.dcp-section-count { font-size: 12px; color: var(--dcp-text-muted); }

/* ---------- pills ---------- */

.dcp-pill {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	font-size: 12px;
	font-weight: 700;
	padding: 4px 11px;
	border-radius: 20px;
	letter-spacing: 0.03em;
	border: 1px solid transparent;
	white-space: nowrap;
}

.dcp-pill-on {
	background: var(--dcp-ok-bg);
	border-color: var(--dcp-ok-border);
	color: var(--dcp-ok-fg);
}

.dcp-pill-wait {
	background: var(--dcp-warn-bg);
	border-color: var(--dcp-warn-border);
	color: var(--dcp-warn-fg);
}

.dcp-pill-off {
	background: var(--dcp-bad-bg);
	border-color: var(--dcp-bad-border);
	color: var(--dcp-bad-fg);
}

.dcp-pill-muted {
	background: rgba(128, 128, 128, 0.16);
	border-color: var(--dcp-border);
	color: var(--dcp-text-muted);
}

/* ---------- buttons ---------- */

.dcp-button {
	display: inline-block;
	padding: 11px 22px;
	border-radius: var(--dcp-radius-sm);
	font-size: 14px;
	font-weight: 700;
	line-height: 1;
	border: 1px solid var(--dcp-border);
	background: transparent;
	color: var(--dcp-text);
	text-decoration: none;
	cursor: pointer;
	transition: filter 0.15s, border-color 0.15s;
}

.dcp-button:hover,
.dcp-button:focus {
	filter: brightness(0.85);
	text-decoration: none;
	border-color: var(--dcp-accent);
}

.dcp-button-primary {
	background: var(--dcp-accent);
	border-color: var(--dcp-accent);
	color: var(--dcp-base);
}

.dcp-button-primary:hover,
.dcp-button-primary:focus { color: var(--dcp-base); }

.dcp-button:disabled {
	opacity: 0.5;
	cursor: default;
	filter: none;
}

/* ---------- notices ---------- */

.dcp-notice {
	margin: 0 0 20px;
	padding: 13px 18px;
	border-radius: 8px;
	border-left: 4px solid var(--dcp-border);
	font-size: 14px;
	line-height: 1.55;
	color: var(--dcp-text);
}

.dcp-notice p:first-child { margin-top: 0; }
.dcp-notice p:last-child  { margin-bottom: 0; }

.dcp-notice-info    { border-left-color: var(--dcp-warn-fg); background: var(--dcp-warn-bg); }
.dcp-notice-error   { border-left-color: var(--dcp-bad-fg);  background: var(--dcp-bad-bg); }
.dcp-notice-success { border-left-color: var(--dcp-ok-fg);   background: var(--dcp-ok-bg); }

/* ---------- payments ---------- */

.dcp-pay-amount {
	font-size: 15px;
	font-weight: 700;
	margin-right: 8px;
}

.dcp-pay-state {
	display: inline-flex;
	align-items: center;
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	padding: 3px 9px;
	border-radius: 20px;
	border: 1px solid transparent;
}

.dcp-pay-state.is-paid {
	background: var(--dcp-ok-bg);
	border-color: var(--dcp-ok-border);
	color: var(--dcp-ok-fg);
}

.dcp-pay-state.is-due {
	background: var(--dcp-warn-bg);
	border-color: var(--dcp-warn-border);
	color: var(--dcp-warn-fg);
}

.dcp-pay-when {
	font-size: 12px;
	color: var(--dcp-text-muted);
	margin-left: 8px;
}

/* The bottom line of the payments card carries the weight, because it's the
   number the client is actually looking for. */
.dcp-row-total {
	border-top: 1px solid var(--dcp-border);
	border-bottom: none;
	padding-top: 14px;
}

.dcp-row-total .dcp-lbl { color: var(--dcp-text); }
.dcp-row-total .dcp-pay-amount { font-size: 20px; }
.dcp-row-total.is-outstanding .dcp-pay-amount { color: var(--dcp-warn-fg); }
.dcp-row-total.is-clear .dcp-pay-amount { color: var(--dcp-ok-fg); }

.dcp-pay-actions {
	padding: 18px 0 20px;
	border-top: 1px solid var(--dcp-border);
}

.dcp-pay-buttons {
	display: flex;
	flex-wrap: wrap;
	gap: 11px;
}

.dcp-pay-buttons .dcp-button {
	display: inline-flex;
	align-items: baseline;
	gap: 10px;
}

.dcp-pay-btn-amount { opacity: 0.75; font-weight: 700; }

.dcp-pay-note,
.dcp-pay-offline,
.dcp-pay-clear {
	margin: 14px 0 0;
	font-size: 13px;
	color: var(--dcp-text-muted);
	line-height: 1.55;
}

.dcp-pay-clear { color: var(--dcp-ok-fg); }

.dcp-pay-history {
	border-top: 1px solid var(--dcp-border);
	padding: 14px 0 16px;
}

.dcp-pay-history > summary {
	cursor: pointer;
	font-size: 13px;
	font-weight: 700;
	color: var(--dcp-text-muted);
	list-style: none;
}

.dcp-pay-history > summary::-webkit-details-marker { display: none; }
.dcp-pay-history > summary::before { content: '\25B8\00a0'; }
.dcp-pay-history[open] > summary::before { content: '\25BE\00a0'; }

.dcp-pay-history-table {
	width: 100%;
	border-collapse: collapse;
	margin-top: 12px;
	font-size: 13px;
}

.dcp-pay-history-table th {
	text-align: left;
	font-size: 11px;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--dcp-text-muted);
	padding: 0 0 8px;
	border-bottom: 1px solid var(--dcp-border);
}

.dcp-pay-history-table td {
	padding: 9px 0;
	border-bottom: 1px solid var(--dcp-border);
	color: var(--dcp-text);
}

.dcp-pay-history-table tr:last-child td { border-bottom: none; }

/* ---------- timeline ---------- */

/* Each step's state is conveyed by colour and a tick, so it needs a text
   equivalent. Not left to the theme's .screen-reader-text: if the theme
   doesn't define one, this renders as visible duplicate text next to every
   stage label. */
.dcp-portal .dcp-sr {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

.dcp-timeline-track {
	list-style: none;
	margin: 0;
	padding: 0;
}

/* Each step is a marker in a rail plus its label and meta. The rail is drawn
   with a pseudo-element on the marker rather than a background on the list,
   so the line stops cleanly at the last step instead of running past it. */
.dcp-timeline-step {
	position: relative;
	display: flex;
	align-items: flex-start;
	gap: 14px;
	padding: 0 0 22px 0;
}

.dcp-timeline-step:last-child { padding-bottom: 0; }

.dcp-timeline-marker {
	position: relative;
	flex: 0 0 22px;
	width: 22px;
	height: 22px;
	margin-top: 1px;
	border-radius: 50%;
	border: 2px solid var(--dcp-border);
	background: var(--dcp-base);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: var(--dcp-base);
}

.dcp-timeline-step:not(:last-child) .dcp-timeline-marker::after {
	content: '';
	position: absolute;
	top: 100%;
	left: 50%;
	transform: translateX(-50%);
	width: 2px;
	height: 22px;
	background: var(--dcp-border);
}

.dcp-timeline-step.is-complete .dcp-timeline-marker {
	background: var(--dcp-ok-fg);
	border-color: var(--dcp-ok-fg);
}

.dcp-timeline-step.is-complete:not(:last-child) .dcp-timeline-marker::after {
	background: var(--dcp-ok-fg);
}

.dcp-timeline-step.is-current .dcp-timeline-marker {
	border-color: var(--dcp-accent);
	box-shadow: 0 0 0 4px rgba(127, 255, 0, 0.14);
}

.dcp-timeline-body {
	flex: 1 1 auto;
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
	flex-wrap: wrap;
	min-width: 0;
}

.dcp-timeline-label {
	font-size: 14px;
	font-weight: 600;
	color: var(--dcp-text-muted);
}

.dcp-timeline-step.is-complete .dcp-timeline-label,
.dcp-timeline-step.is-current .dcp-timeline-label { color: var(--dcp-text); }
.dcp-timeline-step.is-current .dcp-timeline-label { font-weight: 700; }

.dcp-timeline-meta {
	display: inline-flex;
	align-items: baseline;
	gap: 10px;
	font-size: 12px;
	color: var(--dcp-text-muted);
}

.dcp-timeline-who {
	border: 1px solid var(--dcp-border);
	border-radius: 20px;
	padding: 2px 9px;
}

.dcp-next-milestone {
	margin: 20px 0 0;
	padding: 14px 16px;
	border-radius: 8px;
	background: var(--dcp-base);
	border: 1px solid var(--dcp-border);
	font-size: 14px;
	display: flex;
	align-items: baseline;
	gap: 10px;
	flex-wrap: wrap;
}

.dcp-next-milestone strong {
	font-size: 11px;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--dcp-text-muted);
}

.dcp-next-date { font-weight: 700; color: var(--dcp-text); }
.dcp-next-date-tbc { font-weight: 400; color: var(--dcp-text-muted); }

.dcp-next-who {
	border: 1px solid var(--dcp-border);
	border-radius: 20px;
	padding: 2px 9px;
	font-size: 12px;
	color: var(--dcp-text-muted);
}

.dcp-next-stage { font-size: 13px; color: var(--dcp-text-muted); }

/* ---------- thread ---------- */

.dcp-thread { margin: 0; }

.dcp-msg {
	background: var(--dcp-base);
	border: 1px solid var(--dcp-border);
	border-radius: 8px;
	padding: 14px 16px;
	margin: 0 0 11px;
}

.dcp-msg:last-child { margin-bottom: 0; }

/* Ours and theirs sit in the same column, offset slightly, so the thread
   reads as one conversation rather than two lanes. */
.dcp-msg-client {
	margin-left: 24px;
	background: var(--dcp-surface);
}

/* Ours is marked with an accent edge rather than a different background, so
   the thread stays one column instead of turning into a chat layout. */
.dcp-msg-admin { border-left: 3px solid var(--dcp-accent); }

.dcp-msg-meta {
	display: flex;
	align-items: center;
	gap: 9px;
	flex-wrap: wrap;
	font-size: 12px;
	color: var(--dcp-text-muted);
	margin-bottom: 8px;
}

.dcp-msg-meta strong { color: var(--dcp-text); font-size: 13px; }

.dcp-msg-subject { margin: 0 0 6px; font-size: 14px; color: var(--dcp-text); }

.dcp-msg-body {
	font-size: 14px;
	line-height: 1.6;
	color: var(--dcp-text);
}

.dcp-msg-body p:first-child { margin-top: 0; }
.dcp-msg-body p:last-child  { margin-bottom: 0; }

.dcp-badge {
	display: inline-block;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.03em;
	padding: 2px 9px;
	border-radius: 20px;
	border: 1px solid var(--dcp-border);
	color: var(--dcp-text-muted);
}

.dcp-badge-status-open      { border-color: var(--dcp-warn-border); color: var(--dcp-warn-fg); }
.dcp-badge-status-answered,
.dcp-badge-status-closed    { border-color: var(--dcp-ok-border);   color: var(--dcp-ok-fg); }
.dcp-badge-in  { border-color: var(--dcp-ok-border);  color: var(--dcp-ok-fg); }
.dcp-badge-out { border-color: var(--dcp-warn-border); color: var(--dcp-warn-fg); }

/* ---------- composer ---------- */

/* Shown in place of the composer once the client has written and it's our
   turn. It replaces the box rather than disabling it, so there's nothing to
   type into and no button to press twice. */
.dcp-awaiting {
	margin: 16px 0 0;
	padding: 14px 16px;
	border-top: 1px solid var(--dcp-border);
	font-size: 13px;
	line-height: 1.6;
	color: var(--dcp-text-muted);
}

.dcp-awaiting::before { content: '\2713\00a0'; color: var(--dcp-ok-fg); font-weight: 700; }


/* One box at the foot of the thread. There is no per-message reply, so
   there's exactly one place a client can write and no decision to make
   about where a message goes. */
.dcp-composer {
	margin-top: 16px;
	padding-top: 16px;
	border-top: 1px solid var(--dcp-border);
}

.dcp-composer label { margin-bottom: 0; }

.dcp-composer textarea {
	margin-top: 0;
	min-height: 92px;
}

.dcp-composer-actions {
	display: flex;
	align-items: center;
	gap: 10px;
	flex-wrap: wrap;
	margin-top: 11px;
}

.dcp-composer-actions select {
	padding: 10px 12px;
	font: inherit;
	font-size: 13px;
	color: var(--dcp-input-fg);
	background: var(--dcp-input-bg);
	border: 1px solid var(--dcp-border);
	border-radius: var(--dcp-radius-sm);
}

.dcp-composer-actions .dcp-button { margin-left: auto; }

/* ---------- scope notes ---------- */

.dcp-scope-notes > summary {
	cursor: pointer;
	font-size: 14px;
	font-weight: 700;
	color: var(--dcp-text);
	list-style: none;
}

.dcp-scope-notes > summary::-webkit-details-marker { display: none; }
.dcp-scope-notes > summary::before { content: '\25B8\00a0'; color: var(--dcp-text-muted); }
.dcp-scope-notes[open] > summary::before { content: '\25BE\00a0'; }

.dcp-scope-notes > div {
	margin-top: 12px;
	font-size: 14px;
	line-height: 1.6;
	color: var(--dcp-text-muted);
}

.dcp-prose {
	font-size: 14px;
	line-height: 1.6;
	color: var(--dcp-text-muted);
}

.dcp-prose p:first-child { margin-top: 0; }
.dcp-prose p:last-child  { margin-bottom: 0; }

/* ---------- forms ---------- */

/* Scoped to the project view. The public request form has its own rules and
   must not inherit this - it is a front-of-house form and has to look like the
   theme's contact form, not like an admin field label. */
.dcp-project label {
	display: block;
	margin-bottom: 14px;
	font-size: 11px;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--dcp-text-muted);
}

.dcp-project label input,
.dcp-project label select,
.dcp-project label textarea {
	display: block;
	width: 100%;
	margin-top: 7px;
	padding: 11px 13px;
	font: inherit;
	font-size: 14px;
	text-transform: none;
	letter-spacing: normal;
	color: var(--dcp-input-fg);
	background: var(--dcp-input-bg);
	border: 1px solid var(--dcp-border);
	border-radius: var(--dcp-radius-sm);
}

.dcp-project label textarea { min-height: 120px; resize: vertical; }

.dcp-project label input:focus,
.dcp-project label select:focus,
.dcp-project label textarea:focus {
	outline: none;
	border-color: var(--dcp-accent);
}

.dcp-form-msg {
	margin: 12px 0 0;
	font-size: 13px;
	min-height: 1.2em;
}

.dcp-form-msg.is-ok    { color: var(--dcp-ok-fg); }
.dcp-form-msg.is-error { color: var(--dcp-bad-fg); }

/* ---------- public request form ---------- */

/* Styled to match the site's contact form. Values are read from the theme's
   own CSS variables (with fallbacks), so it looks identical on the Dearthwood
   theme and still sensible on any other theme. */
.dcp-request-wrap {
	width: 100%;
	padding: 36px;
	background: var(--bg-surface, #141519);
	border: 1px solid var(--border, #2a2c38);
	border-radius: 12px;
	box-sizing: border-box;
}
@media (max-width: 560px) {
	.dcp-request-wrap { padding: 22px 18px; }
}

.dcp-request-title { margin: 0 0 0.4em; color: var(--text-primary, #f0ece4); }
.dcp-request-wrap .dcp-intro { margin: 0 0 26px; }

/* ---------- sent state ---------- */

/* Once the request is in, the form and the intro that explained how to fill
   it in are both stale, so they come out and the confirmation sits where they
   were. Hidden rather than removed, so a mis-fire can't lose what they typed. */
.dcp-request-wrap.is-sent .dcp-form,
.dcp-request-wrap.is-sent .dcp-intro {
	display: none;
}

.dcp-form-sent {
	margin: 0;
	padding: 28px;
	text-align: center;
	border: 1px solid var(--dcp-ok-fg, #7bd66a);
	border-radius: 10px;
	background: var(--bg-elevated, rgba(123, 214, 106, 0.06));
	outline: none;
}

.dcp-form-sent-title {
	margin: 0 0 0.5em;
	font-size: 1.15em;
	font-weight: 700;
	color: var(--dcp-ok-fg, #7bd66a);
}

.dcp-form-sent-body {
	margin: 0;
	color: var(--text-primary, #f0ece4);
	line-height: 1.6;
}

/* Paired fields sit two-up on desktop and stack on narrow screens. The base
   .dcp-field-row (flex + wrap + flex-basis 12em) already does the stacking. */
.dcp-request-wrap .dcp-field-row { gap: 20px; }
.dcp-request-wrap .dcp-field-row label { margin-bottom: 22px; }

.dcp-request-wrap .dcp-form label {
	display: block;
	margin-bottom: 22px;
	font-family: var(--font-body, inherit);
	font-weight: 500;
	font-size: 14px;
	text-transform: none;
	letter-spacing: normal;
	line-height: 1.4;
	color: var(--text-primary, #f0ece4);
}

.dcp-request-wrap .dcp-form input[type="text"],
.dcp-request-wrap .dcp-form input[type="email"],
.dcp-request-wrap .dcp-form input[type="tel"],
.dcp-request-wrap .dcp-form input[type="url"],
.dcp-request-wrap .dcp-form input[type="number"],
.dcp-request-wrap .dcp-form input[type="date"],
.dcp-request-wrap .dcp-form textarea {
	display: block;
	width: 100%;
	margin-top: 7px;
	padding: 12px 14px;
	box-sizing: border-box;
	background: var(--bg-base, #0c0d0f);
	border: 1px solid var(--border, #2a2c38);
	border-radius: 6px;
	color: var(--text-primary, #f0ece4);
	font-family: var(--font-body, inherit);
	font-size: 14px;
	font-weight: 400;
	line-height: 1.5;
	transition: border-color 0.2s;
	-webkit-appearance: none;
	appearance: none;
}
.dcp-request-wrap .dcp-form textarea { min-height: 130px; resize: vertical; }

/* iOS zooms the viewport when a focused field is under 16px. That only
   matters on a touch screen, so the bump is confined to one - desktop keeps
   the theme's 14px. */
@media (max-width: 782px) {
	.dcp-request-wrap .dcp-form input,
	.dcp-request-wrap .dcp-form textarea { font-size: 16px; }
}

.dcp-request-wrap .dcp-form input:focus,
.dcp-request-wrap .dcp-form textarea:focus {
	border-color: var(--accent, #7fff00);
	outline: none;
}
.dcp-request-wrap .dcp-form input::placeholder,
.dcp-request-wrap .dcp-form textarea::placeholder { color: var(--text-muted, #909099); }

/* Touch-friendly date "calendar" field: taller tap target and a bigger,
   visible picker icon on the dark input. */
.dcp-request-wrap .dcp-form input[type="date"] { min-height: 48px; }
.dcp-request-wrap .dcp-form input[type="date"]::-webkit-calendar-picker-indicator {
	width: 26px;
	height: 26px;
	padding: 4px;
	cursor: pointer;
	filter: invert(0.8);
}

/* Full-width accent submit, matching the contact form's button. */
.dcp-request-wrap .dcp-submit {
	width: 100%;
	margin-top: 6px;
	padding: 14px;
	background: var(--accent, #7fff00);
	color: var(--bg-base, #0c0d0f);
	border: 2px solid var(--accent, #7fff00);
	border-radius: 6px;
	font-size: 15px;
	font-weight: 700;
	letter-spacing: 0.02em;
	cursor: pointer;
	transition: all 0.3s ease;
}
.dcp-request-wrap .dcp-submit:hover {
	transform: translateY(-2px);
	filter: brightness(0.78);
}

.dcp-req { color: var(--dcp-bad-fg); font-weight: 400; }

.dcp-field-hint {
	display: block;
	margin-top: 0.3em;
	font-size: 0.78em;
	font-weight: 400;
	color: var(--dcp-text-muted);
}

/* Honeypot: hidden from people without display:none, which some bots skip. */
.dcp-hp {
	position: absolute !important;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.dcp-consent {
	margin: 1.4em 0;
	padding: 1em 1.2em;
	border: 1px solid var(--dcp-border);
	border-radius: var(--dcp-radius);
	background: var(--dcp-base);
}

.dcp-consent-label {
	display: flex;
	gap: 0.7em;
	align-items: flex-start;
	margin: 0;
	font-weight: 400;
	font-size: 0.92em;
	line-height: 1.5;
}

.dcp-consent-label input[type="checkbox"] {
	flex: none;
	margin-top: 0.25em;
}

.dcp-turnstile { margin: 0 0 1.2em; }

/* ---------- custom date picker (datepicker.js) ---------- */

.dcp-dp { position: relative; }

/* Trigger looks exactly like the other inputs in the form. */
.dcp-request-wrap .dcp-dp-field,
.dcp-dp-field {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	width: 100%;
	min-height: 48px;
	margin-top: 7px;
	padding: 12px 14px;
	box-sizing: border-box;
	background: var(--bg-base, #0c0d0f);
	border: 1px solid var(--border, #2a2c38);
	border-radius: 6px;
	color: var(--text-primary, #f0ece4);
	font: inherit;
	font-size: 16px;
	text-align: left;
	cursor: pointer;
}
.dcp-dp-field:focus { border-color: var(--accent, #7fff00); outline: none; }
.dcp-dp-field.is-empty .dcp-dp-value { color: var(--text-muted, #909099); }
.dcp-dp-icon { font-size: 1.05em; line-height: 1; opacity: 0.85; }

/* Popup: an anchored panel on desktop. */
.dcp-dp-pop {
	position: absolute;
	z-index: 60;
	top: calc(100% + 6px);
	left: 0;
	width: 320px;
	max-width: calc(100vw - 32px);
	padding: 14px;
	box-sizing: border-box;
	background: var(--bg-surface, #141519);
	border: 1px solid var(--border, #2a2c38);
	border-radius: 12px;
	box-shadow: 0 16px 40px rgba(0, 0, 0, 0.5);
	color: var(--text-primary, #f0ece4);
}
.dcp-dp-backdrop { display: none; }

.dcp-dp-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 10px;
}
.dcp-dp-title { font-weight: 600; font-size: 15px; }
.dcp-dp-nav {
	width: 40px;
	height: 40px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: transparent;
	border: 1px solid var(--border, #2a2c38);
	border-radius: 8px;
	color: var(--text-primary, #f0ece4);
	font-size: 20px;
	line-height: 1;
	cursor: pointer;
}
.dcp-dp-nav:hover { border-color: var(--accent, #7fff00); }

.dcp-dp-grid {
	display: grid;
	grid-template-columns: repeat(7, 1fr);
	gap: 4px;
}
.dcp-dp-dow {
	text-align: center;
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	color: var(--text-muted, #909099);
	padding-bottom: 4px;
}
.dcp-dp-blank { visibility: hidden; }
.dcp-dp-day {
	display: flex;
	align-items: center;
	justify-content: center;
	aspect-ratio: 1 / 1;
	min-height: 40px;
	background: transparent;
	border: 0;
	border-radius: 8px;
	color: var(--text-primary, #f0ece4);
	font: inherit;
	font-size: 15px;
	cursor: pointer;
}
.dcp-dp-day:hover { background: rgba(127, 255, 0, 0.14); }
.dcp-dp-day.is-today { outline: 1px solid var(--border, #2a2c38); outline-offset: -2px; }
.dcp-dp-day.is-selected {
	background: var(--accent, #7fff00);
	color: var(--bg-base, #0c0d0f);
	font-weight: 700;
}

.dcp-dp-foot {
	display: flex;
	justify-content: space-between;
	gap: 10px;
	margin-top: 12px;
	padding-top: 10px;
	border-top: 1px solid var(--border, #2a2c38);
}
.dcp-dp-clear,
.dcp-dp-today {
	min-height: 40px;
	padding: 8px 16px;
	border-radius: 8px;
	border: 1px solid var(--border, #2a2c38);
	background: transparent;
	color: var(--text-primary, #f0ece4);
	font: inherit;
	font-size: 14px;
	cursor: pointer;
}
.dcp-dp-today { border-color: var(--accent, #7fff00); color: var(--accent, #7fff00); }
.dcp-dp-clear:hover,
.dcp-dp-today:hover { filter: brightness(1.15); }

/* Responsive: on small screens the calendar becomes a centred sheet with a
   dimmed backdrop, so it's a big, easy touch target rather than a tiny popover. */
@media (max-width: 560px) {
	.dcp-dp.is-open .dcp-dp-backdrop {
		display: block;
		position: fixed;
		inset: 0;
		z-index: 59;
		background: rgba(0, 0, 0, 0.6);
	}
	.dcp-dp-pop {
		position: fixed;
		top: auto;
		left: 12px;
		right: 12px;
		bottom: 12px;
		width: auto;
		max-width: none;
		padding: 18px;
	}
	.dcp-dp-day { min-height: 46px; font-size: 16px; }
	.dcp-dp-nav { width: 44px; height: 44px; }
}

/* =========================================================================
   Responsive
   =========================================================================
   Kept together at the end rather than scattered, so the breakpoints are in
   one place and can't contradict each other. Three sizes only:

     <= 640px   tablet/phone: paired fields go single-column
     <= 560px   phone: padding comes in, buttons go full width
     <= 380px   small phone: Turnstile's fixed 300px iframe is scaled

   Everything else is fluid and needs no breakpoint - inputs are width:100%
   with border-box, and the field rows wrap on flex-basis. */

/* Long URLs and email addresses are the usual cause of a form that scrolls
   sideways on a phone. */
.dcp-portal {
	overflow-wrap: break-word;
	word-wrap: break-word;
}

@media (max-width: 640px) {
	/* Two-up fields technically still fit here, but at ~240px each the date
	   picker and the budget field are cramped enough to be worth stacking. */
	.dcp-request-wrap .dcp-field-row {
		display: block;
	}
	.dcp-request-wrap .dcp-field-row label {
		width: 100%;
	}
}

@media (max-width: 560px) {
	.dcp-request-wrap { padding: 24px 18px; }
	.dcp-request-wrap .dcp-form textarea { min-height: 120px; }

	.dcp-consent { padding: 0.9em 1em; }
	.dcp-form-sent { padding: 22px 18px; }

	/* Card rows: a 130px label column leaves too little for the value. */
	.dcp-row {
		display: block;
	}
	.dcp-lbl {
		display: block;
		min-width: 0;
		margin-bottom: 4px;
	}

	.dcp-card-body,
	.dcp-section { padding-left: 18px; padding-right: 18px; }

	/* Full-width tap targets rather than two half-width buttons side by side. */
	.dcp-pay-buttons { display: block; }
	.dcp-pay-buttons .dcp-button {
		display: flex;
		justify-content: space-between;
		width: 100%;
		margin-bottom: 9px;
	}
	.dcp-composer-actions { display: block; }
	.dcp-composer-actions select,
	.dcp-composer-actions .dcp-button {
		display: block;
		width: 100%;
		margin: 0 0 9px;
	}

	/* The history table is the one thing here that genuinely can't reflow,
	   so it scrolls inside its own box instead of the page. */
	.dcp-pay-history-table {
		display: block;
		overflow-x: auto;
		white-space: nowrap;
	}
}

@media (max-width: 380px) {
	.dcp-request-wrap { padding: 20px 14px; }

	/* Turnstile injects a fixed 300px iframe, which is wider than the column
	   on a 320px screen and pushes the whole page sideways. Scaling the
	   iframe alone would not help - a transform doesn't change the layout
	   box - so the container is clamped and clips the now-smaller widget's
	   leftover box rather than the widget itself. */
	.dcp-turnstile {
		width: 100%;
		overflow: hidden;
	}
	.dcp-turnstile > * {
		transform: scale(0.92);
		transform-origin: left top;
	}
}