/**
 * Registration pages — the hub (/registracia-uctu/) and the two Gravity Forms
 * wholesale forms (/registracia-ako-platca-dph/, /registracia-ako-neplatca-dph/).
 *
 * Loads on top of pages/ekomaterialy.css (the shared long-form shell supplies
 * .breadcrumb, .cat-head, .leaf-mark, .eko-lead, .eko-content, .eko-sec,
 * .eko-h2) and — on the form pages — on top of Gravity Forms' own formsmain.css,
 * which it overrides. GF is 2.4 (legacy markup): ul.gform_fields > li.gfield,
 * .gfield_label, .ginput_container, .gf_left_half / .gf_right_half, .gsection.
 * The plugin's markup is never touched, only restyled.
 */

/* ============================================================
   Route cards (hub)
   ============================================================ */

.reg-cards {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--space-4);
	margin-top: var(--space-6);
}

/* The retail section offers a single route — keep it card-width, not full-width. */
.reg-cards--single {
	grid-template-columns: 1fr 1fr;
}

.reg-card {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--space-3);
	background: var(--bg);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	padding: var(--space-5);
	transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.reg-card:hover {
	transform: translateY(-3px);
	box-shadow: var(--shadow-card);
	border-color: var(--teal-line);
}

.reg-card__ico {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: var(--radius-sm);
	background: var(--teal-50);
	color: var(--teal);
	flex: none;
}

.reg-card__ico svg {
	width: 24px;
	height: 24px;
}

.reg-card__title {
	margin: 0;
	font-size: 16px;
	font-weight: 800;
	line-height: 1.35;
	letter-spacing: -.01em;
	color: var(--ink);
}

/* Push the button to the bottom so cards of unequal title length line up. */
.reg-card .reg-btn {
	margin-top: auto;
}

/* ============================================================
   Buttons
   ============================================================ */

.reg-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--space-2);
	background: var(--teal);
	color: var(--bg);
	border: 1.5px solid var(--teal);
	border-radius: var(--radius-sm);
	padding: 11px var(--space-5);
	font-size: 14px;
	font-weight: 700;
	line-height: 1;
	cursor: pointer;
	transition: background .18s ease, border-color .18s ease, color .18s ease;
}

.reg-btn:hover {
	background: var(--teal-600);
	border-color: var(--teal-600);
	color: var(--bg);
	text-decoration: none;
}

.reg-btn--ghost {
	background: var(--bg);
	color: var(--teal);
	border-color: var(--line);
}

.reg-btn--ghost:hover {
	background: var(--teal-50);
	border-color: var(--teal);
	color: var(--teal);
}

/* ============================================================
   Form pages — card shell around the Gravity Form
   ============================================================ */

.reg-form .reg-form-card {
	background: var(--bg);
	border: 1px solid var(--line);
	border-radius: var(--radius-lg);
	padding: var(--space-7);
	margin-top: var(--space-7);
	box-shadow: var(--shadow-card);
}

.reg-form .reg-form-fallback {
	margin: 0;
	font-size: 15px;
	color: var(--ink-soft-3);
}

.reg-form .reg-form-fallback a {
	color: var(--teal);
	font-weight: 700;
}

/* ---- GF wrapper reset: strip the plugin's own width/margin machinery ---- */

.reg-form .gform_wrapper {
	max-width: none;
	margin: 0;
}

.reg-form .gform_wrapper form {
	margin: 0;
}

.reg-form .gform_wrapper .gform_body,
.reg-form .gform_wrapper .gform_body > ul {
	width: 100%;
}

/* GF lays fields out as a <ul>; make it a two-column grid instead. */
.reg-form .gform_wrapper ul.gform_fields {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--space-5);
	margin: 0;
	padding: 0;
	list-style: none;
}

.reg-form .gform_wrapper ul.gform_fields > li.gfield {
	margin: 0;
	padding: 0;
	list-style: none;
	grid-column: 1 / -1; /* full width unless GF marked the field as a half. */
}

.reg-form .gform_wrapper ul.gform_fields > li.gfield::before {
	content: none;
}

/* GF's own half-width classes → one grid column each. */
.reg-form .gform_wrapper ul.gform_fields > li.gfield.gf_left_half,
.reg-form .gform_wrapper ul.gform_fields > li.gfield.gf_right_half {
	grid-column: span 1;
	width: auto;
	float: none;
	clear: none;
	padding-right: 0;
}

/* ---- Section headers ([Osobné údaje konateľa], [Adresy], [Firemné údaje]) ---- */

.reg-form .gform_wrapper ul.gform_fields > li.gfield.gsection {
	border-bottom: 1px solid var(--line);
	padding-bottom: var(--space-3);
	margin-top: var(--space-4);
}

/* The first section opens the form — no extra gap above it. */
.reg-form .gform_wrapper ul.gform_fields > li.gfield.gsection:first-child {
	margin-top: 0;
}

.reg-form .gform_wrapper .gsection_title {
	margin: 0;
	font-size: 18px;
	font-weight: 800;
	letter-spacing: -.01em;
	color: var(--ink);
}

/* ---- Labels ---- */

.reg-form .gform_wrapper .gfield_label {
	display: block;
	margin: 0 0 var(--space-2);
	font-size: 13px;
	font-weight: 700;
	color: var(--ink);
}

.reg-form .gform_wrapper .gfield_required {
	color: var(--green-600);
	margin-left: var(--space-1);
}

/* Sub-labels under name / address / password sub-fields. */
.reg-form .gform_wrapper .ginput_complex label,
.reg-form .gform_wrapper .ginput_container label {
	display: block;
	margin: var(--space-1) 0 0;
	font-size: 12px;
	font-weight: 400;
	color: var(--muted);
}

/* ---- Inputs ---- */

.reg-form .gform_wrapper input[type="text"],
.reg-form .gform_wrapper input[type="email"],
.reg-form .gform_wrapper input[type="tel"],
.reg-form .gform_wrapper input[type="number"],
.reg-form .gform_wrapper input[type="password"],
.reg-form .gform_wrapper select,
.reg-form .gform_wrapper textarea {
	width: 100%;
	max-width: none;
	box-sizing: border-box;
	background: var(--bg);
	border: 1px solid var(--line);
	border-radius: var(--radius-sm);
	padding: 11px var(--space-3);
	font-family: var(--font-body);
	font-size: 14px;
	color: var(--ink);
	transition: border-color .18s ease, box-shadow .18s ease;
}

.reg-form .gform_wrapper textarea {
	min-height: 120px;
	resize: vertical;
	line-height: 1.6;
}

.reg-form .gform_wrapper input:focus,
.reg-form .gform_wrapper select:focus,
.reg-form .gform_wrapper textarea:focus {
	outline: none;
	border-color: var(--teal);
	box-shadow: 0 0 0 3px var(--teal-50);
}

.reg-form .gform_wrapper input::placeholder,
.reg-form .gform_wrapper textarea::placeholder {
	color: var(--muted);
}

/* ---- Complex fields (name / address / password): GF's inner column spans ---- */

.reg-form .gform_wrapper .ginput_complex {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--space-3);
	width: 100%;
	overflow: visible;
}

.reg-form .gform_wrapper .ginput_complex > span {
	width: auto;
	margin: 0;
	padding: 0;
	float: none;
	min-height: 0;
}

/* GF sizes name sub-fields with div.ginput_complex.ginput_container.gf_name_has_N span
 * (specificity 0,3,2), which outranks the reset above and pins them to 50%/33%.
 * Match its element count to hand the grid back its columns. */
.reg-form .gform_wrapper div.ginput_complex.ginput_container.ginput_container_name {
	width: 100%;
	margin-left: 0;
}

.reg-form .gform_wrapper div.ginput_complex.ginput_container_name > span {
	width: auto;
	padding: 0;
	margin: 0;
}

/* Street and country run the full width of the address block. */
.reg-form .gform_wrapper .ginput_complex > span.ginput_full,
.reg-form .gform_wrapper .ginput_complex > span.address_line_1,
.reg-form .gform_wrapper .ginput_complex > span.address_line_2,
.reg-form .gform_wrapper .ginput_complex > span.address_country {
	grid-column: 1 / -1;
}

/* ---- Consent checkboxes ---- */

.reg-form .gform_wrapper .ginput_container_consent {
	display: flex;
	align-items: flex-start;
	gap: var(--space-3);
	background: var(--teal-50);
	border: 1px solid var(--teal-line-soft);
	border-radius: var(--radius-sm);
	padding: var(--space-4);
}

.reg-form .gform_wrapper .ginput_container_consent input[type="checkbox"] {
	width: 18px;
	height: 18px;
	margin: 0;
	flex: none;
	accent-color: var(--teal);
	cursor: pointer;
}

.reg-form .gform_wrapper .gfield_consent_label,
.reg-form .gform_wrapper .ginput_container_consent label {
	margin: 0;
	font-size: 14px;
	font-weight: 400;
	line-height: 1.5;
	color: var(--teal-600);
	cursor: pointer;
}

/* A consent field's own label holds nothing but the required asterisk — the real
 * text is the checkbox's .gfield_consent_label — so it renders as a stray "*"
 * floating above the box. GF 2.4 puts no marker class on the <li> (it is a plain
 * .gfield), hence :has() on the container rather than a class.
 */
.reg-form .gform_wrapper li.gfield:has(.ginput_container_consent) > .gfield_label {
	display: none;
}

/* ---- Field descriptions ---- */

.reg-form .gform_wrapper .gfield_description {
	padding: 0;
	margin: var(--space-2) 0 0;
	font-size: 12.5px;
	line-height: 1.55;
	color: var(--muted);
}

/* GF renders "description above" fields before the input. */
.reg-form .gform_wrapper .gfield_description.above {
	margin: 0 0 var(--space-2);
}

/* GF's own sheet turns a consent description into a fixed-height, bordered,
 * scrollable box (it assumes a wall of ToS text). Ours is a single sentence, so
 * it reads as a stray empty input — flatten it back to plain copy.
 */
.reg-form .gform_wrapper .gfield_consent_description {
	height: auto;
	max-height: none;
	border: 0;
	padding: 0;
	overflow: visible;
	background: transparent;
}

.reg-form .gform_wrapper .gfield_description a {
	color: var(--teal);
	font-weight: 600;
}

/* ---- Validation ---- */

.reg-form .gform_wrapper .validation_error {
	grid-column: 1 / -1;
	background: var(--danger-bg);
	border: 1px solid var(--danger);
	border-radius: var(--radius-sm);
	padding: var(--space-3) var(--space-4);
	margin: 0 0 var(--space-5);
	font-size: 14px;
	font-weight: 600;
	color: var(--danger);
}

.reg-form .gform_wrapper li.gfield.gfield_error {
	background: transparent;
	border: 0;
	padding: 0;
	margin: 0;
}

.reg-form .gform_wrapper li.gfield.gfield_error input,
.reg-form .gform_wrapper li.gfield.gfield_error select,
.reg-form .gform_wrapper li.gfield.gfield_error textarea {
	border-color: var(--danger);
}

.reg-form .gform_wrapper .gfield_error .validation_message,
.reg-form .gform_wrapper .gfield_error .gfield_label {
	color: var(--danger);
}

.reg-form .gform_wrapper .validation_message {
	margin-top: var(--space-2);
	font-size: 12.5px;
	font-weight: 600;
}

/* ---- Submit ---- */

.reg-form .gform_wrapper .gform_footer {
	display: flex;
	justify-content: flex-end;
	margin: var(--space-7) 0 0;
	padding: var(--space-6) 0 0;
	border-top: 1px solid var(--line);
	clear: both;
}

.reg-form .gform_wrapper .gform_footer input[type="submit"] {
	width: auto;
	background: var(--teal);
	color: var(--bg);
	border: 1.5px solid var(--teal);
	border-radius: var(--radius-sm);
	padding: 13px var(--space-8);
	font-family: var(--font-body);
	font-size: 15px;
	font-weight: 700;
	line-height: 1;
	cursor: pointer;
	transition: background .18s ease, border-color .18s ease;
}

.reg-form .gform_wrapper .gform_footer input[type="submit"]:hover {
	background: var(--teal-600);
	border-color: var(--teal-600);
}

/* GF's AJAX spinner sits next to the button. */
.reg-form .gform_wrapper .gform_ajax_spinner {
	margin-left: var(--space-3);
	align-self: center;
}

/* ---- Confirmation (AJAX success replaces the form in place) ---- */

.reg-form .gform_confirmation_message {
	background: var(--teal-50);
	border: 1px solid var(--teal-line-soft);
	border-radius: var(--radius-sm);
	padding: var(--space-6);
	font-size: 15px;
	line-height: 1.65;
	color: var(--teal-600);
}

/* GF's honeypot / screen-reader-only bits must stay invisible. */
.reg-form .gform_wrapper .gform_validation_container,
.reg-form .gform_wrapper li.gform_validation_container {
	display: none !important;
}

/* ============================================================
   Help band (cross-link between the two form pages)
   ============================================================ */

.reg-help {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-5);
	flex-wrap: wrap;
	background: var(--bg);
	border: 1px solid var(--line);
	border-radius: var(--radius-lg);
	padding: var(--space-5) var(--space-6);
	margin: var(--space-6) 0 var(--space-9);
}

.reg-help__title {
	margin: 0 0 var(--space-1);
	font-size: 15px;
	font-weight: 800;
	color: var(--ink);
}

.reg-help__text {
	margin: 0;
	font-size: 14px;
	color: var(--muted);
}

/* ============================================================
   My Account — the register column is now a route chooser
   ============================================================ */

.reg-choose {
	margin: 0;
}

.reg-choose__list {
	margin: 0 0 var(--space-5);
	padding: 0;
	list-style: none;
}

.reg-choose__list li {
	position: relative;
	margin: 0 0 var(--space-2);
	padding-left: var(--space-6);
	font-size: 14px;
	line-height: 1.6;
	color: var(--ink-soft-3);
}

/* The eco leaf glyph as the bullet — the site's list marker. */
.reg-choose__list li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 3px;
	width: 15px;
	height: 15px;
	background: var(--leaf-green) center / contain no-repeat;
}

/* ---- Register form (?register=1): WC generates the username and password, so
   the whole form is one email field, this note, and the consent box. ---- */

.woocommerce-account .reg-pass-note {
	margin: 0 0 var(--space-4);
	font-size: 14px;
	line-height: 1.6;
	color: var(--ink-soft-3);
}

/* The GDPR consent row (inc/woocommerce.php). Aligned as checkbox + wrapping
   text, not WC's default inline run. */
.woocommerce-account #privacy_policy_reg_field > label {
	display: flex;
	align-items: flex-start;
	gap: var(--space-3);
	margin: 0;
	font-size: 14px;
	line-height: 1.5;
	color: var(--ink-soft-3);
	cursor: pointer;
}

.woocommerce-account #privacy_policy_reg_field input[type="checkbox"] {
	margin: 0;
	flex: none;
	accent-color: var(--teal);
	cursor: pointer;
}

.woocommerce-account #privacy_policy_reg_field a {
	color: var(--teal);
	font-weight: 600;
}

/* The browser's default dotted underline on <abbr> reads as a rendering glitch
   next to the consent text. */
.woocommerce-account #privacy_policy_reg_field .required {
	border: 0;
	text-decoration: none;
	color: var(--green-600);
}

/* ============================================================
   Mobile
   ============================================================ */

@media (max-width: 860px) {

	.reg-cards,
	.reg-cards--single {
		grid-template-columns: 1fr;
	}

	.reg-form .reg-form-card {
		padding: var(--space-5);
	}

	/* One column: GF's halves and every complex sub-field stack. */
	.reg-form .gform_wrapper ul.gform_fields,
	.reg-form .gform_wrapper ul.gform_fields > li.gfield.gf_left_half,
	.reg-form .gform_wrapper ul.gform_fields > li.gfield.gf_right_half,
	.reg-form .gform_wrapper .ginput_complex {
		grid-template-columns: 1fr;
		grid-column: 1 / -1;
	}

	.reg-form .gform_wrapper .gform_footer {
		justify-content: stretch;
	}

	.reg-form .gform_wrapper .gform_footer input[type="submit"] {
		width: 100%;
	}

	.reg-help {
		flex-direction: column;
		align-items: flex-start;
	}
}