/*
 * TDZ Orders & Pay.
 *
 * Deliberately small and deliberately unopinionated about colour and type:
 * this runs inside somebody else's theme, and a plugin that imposes its own
 * palette on a client's shop is a plugin the client has to fight. Everything
 * here inherits the theme's font and colours, and uses currentColor for its
 * lines, so it looks like it belongs on any site it lands on.
 *
 * The visual decisions taken here are shape, spacing, alignment and hit size.
 * Colour stays the theme's, through the --tdzp-* properties documented above
 * the field rules below (since 25 September 2026; before that this file set
 * no field chrome at all, and a theme that did not either got raw browser
 * defaults).
 */

.tdzp-form {
	display: grid;
	gap: 1.25rem;
	margin: 0 0 1.5rem;
}

.tdzp-form > .tdzp-form__row {
	margin: 0;
}

.tdzp-form__heading {
	margin: 1.75rem 0 0.25rem;
	font-size: 1.05em;
	line-height: 1.3;
}

.tdzp-form__heading:first-child {
	margin-top: 0;
}

.tdzp-form__row {
	display: block;
	margin: 0 0 1rem;
}

/*
 * THE FIELDS HAVE A SHAPE NOW, AND THE THEME STILL OWNS THE COLOUR.
 *
 * Until 25 September 2026 this file set no field chrome at all and trusted the
 * theme to. Palesa's theme styles only its own .pk-* fields, so the order form
 * rendered in raw browser defaults (1px grey boxes, a grey "Choose File"
 * button, a typed mm/dd/yyyy) directly under a fully designed product page.
 * Tony: "the ui looks incomplete, not modern".
 *
 * So the shape (height, padding, radius, focus ring) is set here, and every
 * colour is a custom property a theme sets once. Each falls back to a mix of
 * currentColor, so on a theme that sets nothing it still reads correctly on
 * light or dark:
 *
 *   --tdzp-accent   focus ring, selected day, active states
 *   --tdzp-on-accent text on the accent
 *   --tdzp-field    field background
 *   --tdzp-line     field border
 *   --tdzp-muted    help text
 *   --tdzp-radius   corner radius
 *   --tdzp-panel    the calendar's background
 *   --tdzp-shadow   the calendar's shadow
 */

.tdzp-form__label {
	display: block;
	margin: 0 0 0.5rem;
	font-weight: 600;
	line-height: 1.35;
}

/* The required mark: a quiet accent star, not WooCommerce's dotted <abbr>. */
.tdzp-form__label abbr.required {
	margin-left: 0.15em;
	border: 0;
	text-decoration: none;
	color: var( --tdzp-accent, currentColor );
	cursor: default;
}

.tdzp-form__input,
.tdzp-date__trigger {
	display: block;
	width: 100%;
	max-width: 100%;
	min-height: 48px;
	margin: 0;
	padding: 0.7rem 0.95rem;
	border: 1px solid var( --tdzp-line, color-mix( in srgb, currentColor 22%, transparent ) );
	border-radius: var( --tdzp-radius, 10px );
	background-color: var( --tdzp-field, transparent );
	font: inherit;
	font-size: 15px;
	line-height: 1.4;
	color: inherit;
	box-sizing: border-box;
	transition: border-color 160ms ease-out, box-shadow 160ms ease-out;
}

.tdzp-form__input::placeholder {
	color: var( --tdzp-muted, currentColor );
	opacity: 0.8;
}

textarea.tdzp-form__input {
	min-height: 7.5rem;
	resize: vertical;
}

@media ( hover: hover ) {
	.tdzp-form__input:hover,
	.tdzp-date__trigger:hover {
		border-color: color-mix( in srgb, var( --tdzp-accent, currentColor ) 45%, transparent );
	}
}

.tdzp-form__input:focus,
.tdzp-date__trigger:focus-visible,
.tdzp-date.is-open .tdzp-date__trigger {
	outline: none;
	border-color: var( --tdzp-accent, currentColor );
	box-shadow: 0 0 0 3px color-mix( in srgb, var( --tdzp-accent, currentColor ) 16%, transparent );
}

.tdzp-form__help {
	display: block;
	margin: 0.4rem 0 0;
	font-size: 0.8125rem;
	color: var( --tdzp-muted, inherit );
	line-height: 1.5;
}

/* ------------------------------------------------------------------
 * The picture upload: a drop area, not a grey browser button
 * --------------------------------------------------------------- */

.tdzp-form__input[type="file"] {
	padding: 0.85rem;
	border-style: dashed;
	border-width: 1.5px;
	font-size: 14px;
	color: var( --tdzp-muted, inherit );
	cursor: pointer;
}

.tdzp-form__input[type="file"]::file-selector-button {
	margin-right: 0.85rem;
	padding: 0.55rem 1.1rem;
	border: 1px solid var( --tdzp-accent, currentColor );
	border-radius: 999px;
	background: transparent;
	font: inherit;
	font-size: 13px;
	font-weight: 600;
	color: var( --tdzp-accent, currentColor );
	cursor: pointer;
	transition: background-color 160ms ease-out, color 160ms ease-out;
}

@media ( hover: hover ) {
	.tdzp-form__input[type="file"]:hover::file-selector-button {
		background: var( --tdzp-accent, currentColor );
		color: var( --tdzp-on-accent, #fff );
	}
}

.tdzp-form__choices {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem 1.25rem;
}

.tdzp-form__choice {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	/* 44px is the smallest reliable touch target. A row of cake-flavour radios
	   is exactly the thing a customer taps on a phone with one hand. */
	min-height: 44px;
	cursor: pointer;
	line-height: 1.35;
}

.tdzp-form__swatch {
	display: inline-block;
	width: 1.25rem;
	height: 1.25rem;
	border-radius: 50%;
	/* A ring in currentColor, so a white or very pale swatch is still visible
	   against a white card, on a light or a dark theme, without this file
	   having to know which one it is on. */
	box-shadow: inset 0 0 0 1px currentColor;
}

.tdzp-form__check {
	margin-right: 0.5rem;
	accent-color: var( --tdzp-accent, auto );
}

/*
 * An invalid field is marked by the script, but the server refuses it either
 * way. This is the hint, never the rule.
 *
 * The error colour is a custom property with a sober fallback, NOT a hardcoded
 * hex, so a theme can set --tdzp-error once and this file obeys it.
 */
.tdzp-form__input[aria-invalid="true"],
.tdzp-date__trigger[aria-invalid="true"] {
	border-color: var( --tdzp-error, currentColor );
	box-shadow: 0 0 0 3px color-mix( in srgb, var( --tdzp-error, currentColor ) 14%, transparent );
}

.tdzp-form__error {
	display: block;
	margin: 0.4rem 0 0;
	font-size: 0.875em;
	/* Bold as well as coloured, so the message still reads as an error when the
	   theme has not set the property and this falls back to the body colour. */
	font-weight: 600;
	color: var( --tdzp-error, inherit );
	line-height: 1.4;
}

.tdzp-form__error[hidden] {
	display: none;
}

/* ------------------------------------------------------------------
 * The date: a trigger and a calendar (built by assets/js/tdzp.js)
 * --------------------------------------------------------------- */

.tdzp-date {
	position: relative;
	display: block;
}

.tdzp-date__trigger {
	display: flex;
	align-items: center;
	gap: 0.65rem;
	text-align: left;
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
}

.tdzp-date__icon {
	display: inline-flex;
	flex: 0 0 auto;
	color: var( --tdzp-accent, currentColor );
}

.tdzp-date__text {
	flex: 1 1 auto;
	min-width: 0;
	color: var( --tdzp-muted, inherit );
}

.tdzp-date__trigger.has-value .tdzp-date__text {
	color: inherit;
	font-weight: 600;
}

.tdzp-cal {
	position: absolute;
	z-index: 30;
	top: calc( 100% + 8px );
	left: 0;
	display: block;
	width: min( 22rem, 100% );
	padding: 1rem;
	border: 1px solid var( --tdzp-line, color-mix( in srgb, currentColor 18%, transparent ) );
	border-radius: calc( var( --tdzp-radius, 10px ) + 4px );
	background: var( --tdzp-panel, Canvas );
	box-shadow: var( --tdzp-shadow, 0 18px 40px -16px rgba( 0, 0, 0, 0.35 ) );
	box-sizing: border-box;
	transform-origin: top left;
	animation: tdzp-cal-in 180ms cubic-bezier( 0.23, 1, 0.32, 1 );
}

/* An author display on the panel would beat the browser's own [hidden] rule
   and leave the calendar open while every check said it was shut (l-057). */
.tdzp-cal[hidden] {
	display: none;
}

@keyframes tdzp-cal-in {
	from {
		opacity: 0;
		transform: translateY( -4px ) scale( 0.98 );
	}
}

.tdzp-cal__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin: 0 0 0.6rem;
}

.tdzp-cal__title {
	font-weight: 700;
	font-size: 15px;
}

.tdzp-cal__nav {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	padding: 0;
	border: 1px solid var( --tdzp-line, color-mix( in srgb, currentColor 18%, transparent ) );
	border-radius: 50%;
	background: transparent;
	color: inherit;
	cursor: pointer;
	transition: background-color 140ms ease-out;
}

@media ( hover: hover ) {
	.tdzp-cal__nav:not( :disabled ):hover {
		background: color-mix( in srgb, var( --tdzp-accent, currentColor ) 10%, transparent );
	}
}

.tdzp-cal__nav:disabled {
	opacity: 0.3;
	cursor: default;
}

.tdzp-cal__grid {
	display: grid;
	grid-template-columns: repeat( 7, 1fr );
	gap: 2px;
}

.tdzp-cal__dow {
	padding: 0.35rem 0;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-align: center;
	color: var( --tdzp-muted, inherit );
}

.tdzp-cal__day {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	aspect-ratio: 1;
	min-height: 40px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: transparent;
	font: inherit;
	font-size: 14px;
	font-variant-numeric: tabular-nums;
	color: inherit;
	cursor: pointer;
	transition: background-color 120ms ease-out, color 120ms ease-out, transform 120ms ease-out;
}

@media ( hover: hover ) {
	.tdzp-cal__day:not( [aria-disabled="true"] ):not( .is-selected ):hover {
		background: color-mix( in srgb, var( --tdzp-accent, currentColor ) 10%, transparent );
	}
}

.tdzp-cal__day:not( [aria-disabled="true"] ):active {
	transform: scale( 0.94 );
}

.tdzp-cal__day:focus-visible {
	outline: 2px solid var( --tdzp-accent, currentColor );
	outline-offset: 1px;
}

/* Closed, past, or inside the notice period: visibly out, and struck through
   so the difference does not depend on colour alone. */
.tdzp-cal__day[aria-disabled="true"] {
	cursor: not-allowed;
	opacity: 0.32;
	text-decoration: line-through;
	text-decoration-thickness: 1px;
}

.tdzp-cal__day.is-today::after {
	content: "";
	position: absolute;
	bottom: 5px;
	left: 50%;
	width: 4px;
	height: 4px;
	margin-left: -2px;
	border-radius: 50%;
	background: currentColor;
}

.tdzp-cal__day.is-selected {
	background: var( --tdzp-accent, currentColor );
	color: var( --tdzp-on-accent, Canvas );
	font-weight: 700;
}

.tdzp-cal__foot {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 0.5rem;
	margin: 0.75rem 0 0;
	padding: 0.75rem 0 0;
	border-top: 1px solid var( --tdzp-line, color-mix( in srgb, currentColor 14%, transparent ) );
}

.tdzp-cal__soonest {
	padding: 0.45rem 0.85rem;
	border: 0;
	border-radius: 999px;
	background: color-mix( in srgb, var( --tdzp-accent, currentColor ) 10%, transparent );
	font: inherit;
	font-size: 12.5px;
	color: var( --tdzp-accent, inherit );
	cursor: pointer;
	transition: background-color 140ms ease-out;
}

@media ( hover: hover ) {
	.tdzp-cal__soonest:hover {
		background: color-mix( in srgb, var( --tdzp-accent, currentColor ) 18%, transparent );
	}
}

.tdzp-cal__legend {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	font-size: 11.5px;
	color: var( --tdzp-muted, inherit );
}

.tdzp-cal__legend i {
	display: inline-block;
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: currentColor;
	opacity: 0.35;
}

/* ------------------------------------------------------------------
 * The running total (the theme may dress it further)
 * --------------------------------------------------------------- */

.tdzp-form .tdzp-total {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 1rem;
	margin: 0;
	padding: 1rem 0 0;
	border-top: 1px solid var( --tdzp-line, color-mix( in srgb, currentColor 14%, transparent ) );
}

.tdzp-form .tdzp-total.is-pending {
	font-weight: 500;
	color: var( --tdzp-muted, inherit );
}

/* ------------------------------------------------------------------
 * The deposit choice
 * --------------------------------------------------------------- */

.tdzp-deposit {
	margin: 0 0 1.5rem;
	padding: 0.85rem 1rem;
	border: 1px solid currentColor;
	border-radius: 6px;
	/* A hairline at full strength reads as a heavy box on a light theme. */
	border-color: color-mix(in srgb, currentColor 22%, transparent);
}

/* color-mix is not everywhere yet. Without it the border above simply falls
   back to currentColor, which is legible, just heavier. Nothing breaks. */

.tdzp-deposit__legend {
	display: block;
	margin: 0 0 0.5rem;
	font-weight: 600;
}

.tdzp-deposit__option {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 0.15rem 0.6rem;
	align-items: center;
	min-height: 44px;
	cursor: pointer;
}

.tdzp-deposit__option + .tdzp-deposit__option {
	margin-top: 0.35rem;
}

.tdzp-deposit__label {
	line-height: 1.35;
}

.tdzp-deposit__hint {
	grid-column: 2;
	font-size: 0.875em;
	opacity: 0.75;
	line-height: 1.4;
}

/* ------------------------------------------------------------------
 * The running total, and the amount due now
 * --------------------------------------------------------------- */

.tdzp-total {
	margin: 0 0 1rem;
	font-weight: 600;
}

.tdzp-total__value {
	white-space: nowrap;
}

.tdzp-due-now th,
.tdzp-due-now td {
	/* Sits directly under the order total in WooCommerce's own review table,
	   so it has to keep that table's alignment rather than invent its own. */
	vertical-align: top;
}

.tdzp-due-now small {
	display: block;
	margin-top: 0.2rem;
	opacity: 0.75;
	font-weight: 400;
	line-height: 1.4;
}

/* ------------------------------------------------------------------
 * Motion
 * --------------------------------------------------------------- */

@media ( prefers-reduced-motion: reduce ) {
	.tdzp-form *,
	.tdzp-deposit * {
		transition: none !important;
		animation: none !important;
	}
}