/* White-label layer loaded after the core Connect Bookings portal styles. */
.connect-booking-page,
.connect-order-pay,
.connect-booking-page .content,
.connect-order-pay .content,
.connect-booking-portal {
	background-color: var(--connect-black) !important;
}

.connect-booking-portal {
	background-image:
		radial-gradient(circle at 86% 4%, color-mix(in srgb, var(--connect-primary) 10%, transparent), transparent 29%) !important;
}

.connect-panel,
.connect-acceptance-panel,
.connect-financial-panel,
.connect-state-card,
.connect-staff-login-panel {
	background: var(--connect-panel) !important;
}

.connect-primary-button,
.connect-money-row--deposit,
.connect-panel-heading > span,
.connect-confirmed-icon {
	background: var(--connect-primary) !important;
}

.connect-primary-button:disabled {
	background: color-mix(in srgb, var(--connect-primary) 34%, #777) !important;
	color: color-mix(in srgb, var(--connect-white) 68%, transparent) !important;
	filter: saturate(.45);
}

.connect-booking-portal,
.connect-booking-portal h1,
.connect-booking-portal h2,
.connect-booking-portal strong,
.connect-details-grid dd {
	color: var(--connect-white);
}

.connect-portal-brandbar,
.connect-portal-footer {
	background-color: var(--connect-black) !important;
}

.connect-staff-login-panel { background:var(--connect-primary)!important;color:var(--connect-primary-contrast)!important;border-color:var(--connect-primary)!important }
.connect-staff-login-panel>span { background:var(--connect-primary-contrast)!important;color:var(--connect-primary)!important }
.connect-staff-login-panel strong,.connect-staff-login-panel p { color:var(--connect-primary-contrast)!important }
.connect-staff-login-panel .connect-outline-button { border-color:var(--connect-primary-contrast)!important;color:var(--connect-primary-contrast)!important }
.connect-staff-login-panel .connect-outline-button:hover { background:var(--connect-primary-contrast)!important;color:var(--connect-primary)!important }

/* Customer portal colour modes share a neutral palette and one brand accent. */
html[data-connect-portal-theme="light"] { --connect-black:var(--connect-light-background);--connect-panel:var(--connect-light-surface);--connect-panel-2:color-mix(in srgb,var(--connect-light-surface) 92%,var(--connect-light-text));--connect-line:color-mix(in srgb,var(--connect-light-text) 18%,transparent);--connect-white:var(--connect-light-text);--connect-muted:color-mix(in srgb,var(--connect-light-text) 68%,transparent) }
html[data-connect-portal-theme="light"] .connect-booking-page,html[data-connect-portal-theme="light"] .connect-booking-page .content,html[data-connect-portal-theme="light"] .connect-booking-portal,html[data-connect-portal-theme="light"] .connect-portal-brandbar,html[data-connect-portal-theme="light"] .connect-portal-footer{background-color:var(--connect-light-background)!important}
html[data-connect-portal-theme="light"] .connect-panel,html[data-connect-portal-theme="light"] .connect-acceptance-panel,html[data-connect-portal-theme="light"] .connect-financial-panel,html[data-connect-portal-theme="light"] .connect-state-card{background:var(--connect-light-surface)!important}
html[data-connect-portal-theme="light"] .connect-booking-portal,html[data-connect-portal-theme="light"] .connect-booking-portal h1,html[data-connect-portal-theme="light"] .connect-booking-portal h2,html[data-connect-portal-theme="light"] .connect-booking-portal strong,html[data-connect-portal-theme="light"] .connect-details-grid dd,html[data-connect-portal-theme="light"] .connect-portal-brandbar nav a,html[data-connect-portal-theme="light"] .connect-theme-toggle{color:var(--connect-light-text)!important}
html[data-connect-portal-theme="light"] .connect-portal-intro p,html[data-connect-portal-theme="light"] .connect-job-description,html[data-connect-portal-theme="light"] .connect-check-row,html[data-connect-portal-theme="light"] .connect-money-row span,html[data-connect-portal-theme="light"] .connect-secure-note,html[data-connect-portal-theme="light"] .connect-form-footnote,html[data-connect-portal-theme="light"] .connect-help-text{color:var(--connect-muted)!important}
html[data-connect-portal-theme="light"] .connect-check-row,html[data-connect-portal-theme="light"] .connect-booking-status,html[data-connect-portal-theme="light"] .connect-theme-toggle{border-color:var(--connect-line)}
html[data-connect-portal-theme="light"] .connect-check-row a{color:var(--connect-primary)!important}
html[data-connect-portal-theme="light"] .connect-portal-footer a{color:var(--connect-light-text)!important}
html[data-connect-portal-theme="light"] .connect-confirmed-actions .connect-outline-button{border-color:var(--connect-line);color:var(--connect-light-text)!important}
html[data-connect-portal-theme="light"] .connect-job-description p,html[data-connect-portal-theme="light"] .connect-secure-note p,html[data-connect-portal-theme="light"] .connect-secure-note strong{color:var(--connect-light-text)!important}
html[data-connect-portal-theme="light"] .connect-booking-status{background:var(--connect-light-surface);color:var(--connect-light-text)!important}

/* WooCommerce pay-for-order screens must follow the same saved portal theme. */
html[data-connect-portal-theme="light"] body.connect-order-pay,
html[data-connect-portal-theme="light"] body.connect-order-pay .content,
html[data-connect-portal-theme="light"] body.connect-order-pay .connect-booking-portal {
	background-color:var(--connect-light-background)!important;
	color:var(--connect-light-text)!important;
}
html[data-connect-portal-theme="light"] body.connect-order-pay .woocommerce {
	border-color:var(--connect-line)!important;
	background:var(--connect-light-surface)!important;
	color:var(--connect-light-text)!important;
}
html[data-connect-portal-theme="light"] body.connect-order-pay .woocommerce table.shop_table,
html[data-connect-portal-theme="light"] body.connect-order-pay .woocommerce table.shop_table th,
html[data-connect-portal-theme="light"] body.connect-order-pay .woocommerce table.shop_table td {
	border-color:var(--connect-line)!important;
	color:var(--connect-light-text)!important;
}
html[data-connect-portal-theme="light"] body.connect-order-pay #payment,
html[data-connect-portal-theme="light"] body.connect-order-pay #payment ul.payment_methods,
html[data-connect-portal-theme="light"] body.connect-order-pay #payment .form-row {
	background:var(--connect-light-surface)!important;
	color:var(--connect-light-text)!important;
}
html[data-connect-portal-theme="light"] body.connect-order-pay #payment div.payment_box {
	background:color-mix(in srgb,var(--connect-light-text) 7%,var(--connect-light-surface))!important;
	color:var(--connect-light-text)!important;
}
html[data-connect-portal-theme="light"] body.connect-order-pay #payment div.payment_box:before {
	border-bottom-color:color-mix(in srgb,var(--connect-light-text) 7%,var(--connect-light-surface))!important;
}
html[data-connect-portal-theme="light"] body.connect-order-pay .connect-pay-heading h2,
html[data-connect-portal-theme="light"] body.connect-order-pay .connect-pay-heading p,
html[data-connect-portal-theme="light"] body.connect-order-pay .woocommerce p,
html[data-connect-portal-theme="light"] body.connect-order-pay .woocommerce label,
html[data-connect-portal-theme="light"] body.connect-order-pay .woocommerce strong {
	color:var(--connect-light-text)!important;
}
html[data-connect-portal-theme="light"] body.connect-order-pay .woocommerce-error,
html[data-connect-portal-theme="light"] body.connect-order-pay .woocommerce-info,
html[data-connect-portal-theme="light"] body.connect-order-pay .woocommerce-message {
	background:color-mix(in srgb,var(--connect-light-text) 7%,var(--connect-light-surface))!important;
	color:var(--connect-light-text)!important;
}