/*
 * Forms of the site (Forms.php): the contact form and the inquiry of Realizácie, only on the Profigarden theme.
 * The controls are the fields of the theme as they are (.pg-label above, .pg-input, .pg-textarea, .pg-select,
 * base.css): the height, the edge 3:1, the padding, the text and the focus of the checkout and the account. Here
 * only their grid, the state of an error (the edge and the label of the checkout's invalid field, the message
 * under the field as under the coupon of the cart), the consent and the busy state. The summary and the notice
 * are the notices of the site (.woocommerce-error, .woocommerce-message, layout.css).
 */

.pg-form {
	display: flex;
	flex-direction: column;
	gap: var(--pg-gap-block);
}

.pg-form__grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--pg-gap-block) var(--pg-gap-grid);
}

.pg-form__field { grid-column: 1 / -1; min-width: 0; }
.pg-form__field--half { grid-column: auto; }
.pg-form--stack .pg-form__field--half { grid-column: 1 / -1; } /* the contact form: every field over the whole width */

/* The look of the form of the live page Kontakt (Jaroslav 10. 11.), the contact form and the inquiry: the labels small,
   bold and in capitals, the fields with the edge of a control (3:1), Odoslať on the right. A field is as high as a button
   (.pg-btn), one token --pg-control-h (Jaroslav 10. 11. večer, zadanie 10, bod 10: the taller fields of the old page were
   "extrém"). */
.pg-form .pg-label {
	font-size: var(--pg-text-xs);
	font-weight: var(--pg-fw-bold);
	letter-spacing: var(--pg-tracking-caps);
	text-transform: uppercase;
}

.pg-form :is(.pg-input, .pg-select) { height: var(--pg-control-h); }

/* The message: the text area of the site (base.css: its first line where the text of a field stands, --pg-textarea-pad-y,
   at least --pg-textarea-min-h high). */

.pg-form__optional {
	color: var(--pg-muted);
	font-weight: var(--pg-fw-regular);
	letter-spacing: normal;
	text-transform: none;
}

/* An error: the edge and the label of an invalid field of the checkout, the message under the field. Quieter (zadanie 10,
   bod 8): the red edge of the field without a second line around it, the message small. */
.pg-form [aria-invalid="true"] { border-color: var(--pg-danger-text); }

.pg-form [aria-invalid="true"]:focus { box-shadow: var(--pg-focus); }

.pg-form__field:has([aria-invalid="true"]) > .pg-label { color: var(--pg-danger-text); }

.pg-form__error {
	margin: var(--pg-space-4) 0 0;
	color: var(--pg-danger-text);
	font-size: var(--pg-fs-13);
	line-height: var(--pg-lh-snug);
}

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

/* The consent: the checkbox of the site (20 px, the green of the buttons) beside its label. */
.pg-form__check {
	display: flex;
	align-items: flex-start;
	gap: var(--pg-space-8);
	line-height: var(--pg-lh-snug);
}

.pg-form__check input {
	flex: none;
	width: var(--pg-space-20);
	height: var(--pg-space-20);
	margin: 0;
	accent-color: var(--pg-accent-text);
	cursor: pointer;
}

.pg-form__check label { cursor: pointer; }

.pg-form__check a {
	color: var(--pg-accent-text);
	font-weight: var(--pg-fw-bold);
	text-decoration: underline;
}

.pg-form__check a:hover { color: var(--pg-accent-text-hover); }

.pg-form__check [aria-invalid="true"] { outline: 2px solid var(--pg-danger-text); outline-offset: 2px; box-shadow: none; }

/* The summary: the error notice of the site with the errors as links to their fields; its first line in the red of the
   notice (--pg-notice-title), the links in the colour of its text, a quiet list without bullets (zadanie 10, bod 8). */
.pg-form__summary[hidden] { display: none; }
.pg-form__summary p { margin: 0; color: var(--pg-notice-title, inherit); font-weight: var(--pg-fw-display); }
.pg-form__summary ul { margin: var(--pg-space-4) 0 0; padding: 0; list-style: none; }
.pg-form__summary li + li { margin-block-start: var(--pg-space-2); }
.pg-form__summary:focus,
.pg-form__done:focus { outline: 2px solid var(--pg-focus-color); outline-offset: 2px; }

.pg-form__actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--pg-space-12); }

/* Sending (forms.js): the button fades and takes no second click. */
.pg-form[aria-busy="true"] .pg-btn {
	opacity: var(--pg-opacity-busy);
	pointer-events: none;
}

@media (max-width: 767px) {
	.pg-form__grid { grid-template-columns: minmax(0, 1fr); }
	.pg-form__field--half { grid-column: 1 / -1; }
	.pg-form__actions .pg-btn { width: 100%; }
}