/* Bayto — Gravity Forms order recap
   Live hierarchical summary of the user's selections, rendered into
   #bayto-order-recap just above the form's Total field. Class-based DOM
   hooks; see form-lineitems.js for rendering logic. */

/* Fields (Product fields + Price Data section) hidden on the frontend but
   kept in the DOM so the Total calculation still runs. */
.bayto-hidden-lineitem { display: none !important; }

/* Recap container — reset font-size because GF's wrapper collapses it to 0 */
.bayto-order-recap {
	margin: 1rem 0 1.5rem;
	padding: 1rem 1.25rem;
	background: #f6f6f6;
	border-left: 3px solid var(--bayto-blue, #39C5EF);
	border-radius: 0 4px 4px 0;
	font-size: 1rem;
	line-height: 1.4;
}

.bayto-order-recap * { font-size: inherit; }

.bayto-recap-title {
	margin: 0 0 0.75rem;
	font-size: 1.05em;
	font-weight: 600;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	color: #333;
}

.bayto-recap-block + .bayto-recap-block {
	margin-top: 1rem;
	padding-top: 0.75rem;
	border-top: 1px dashed #d5d5d5;
}

/* Two-column row: item name left, price right.
   Flex is more reliable than grid here because GF's wrapper sometimes injects
   text-align: center upstream, which spans inherit through grid cells. */
.bayto-order-recap .bayto-recap-row {
	display: flex !important;
	flex-direction: row !important;
	justify-content: space-between !important;
	align-items: baseline !important;
	gap: 1rem;
	padding: 0.4rem 0.25rem;
	border-bottom: 1px solid #ebebeb;
	text-align: left !important;
}
.bayto-order-recap .bayto-recap-row:last-child { border-bottom: 0; }

.bayto-order-recap .recap-label {
	flex: 1 1 auto;
	text-align: left !important;
	min-width: 0;
}

.bayto-order-recap .bayto-recap-main {
	font-weight: 600;
	font-size: 1.02em;
}

/* Indentation only — no dashes */
.bayto-order-recap .bayto-recap-sub {
	padding-left: 1.75rem;
	font-size: 0.95em;
	color: #555;
}

.bayto-order-recap .recap-price {
	flex: 0 0 auto;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
	text-align: right !important;
	color: #333;
}

.bayto-order-recap .bayto-recap-main .recap-price { color: #111; }

.bayto-order-recap .bayto-recap-total {
	margin-top: 0.5rem;
	padding-top: 0.75rem;
	border-top: 2px solid #111;
	font-weight: 700;
	font-size: 1.1em;
}
.bayto-order-recap .bayto-recap-total .recap-price { color: #111; }

.bayto-recap-empty {
	color: #888;
	font-style: italic;
	margin: 0;
}

/* Multi-currency dropdown — on mobile it was rendering too narrow ("U.S. D…"
   truncated). Force minimum width that fits the longest French choice
   "Dollar canadien" plus the dropdown chevron. */
.gform_wrapper.gravity-theme .ginput_container_multicurrency select,
.gform_wrapper.gravity-theme select[name="input_1"] {
	min-width: 220px;
	max-width: 100%;
	box-sizing: border-box;
}

/* Larger labels across all Gravity Forms — easier to read, especially on
   Enhanced Choice fields where the label can sit above swatches and feel
   small at default sizing. Sub-labels (e.g. address line components) get
   a smaller bump so the hierarchy stays clear. */
.gform_wrapper.gravity-theme .gfield_label,
.gform_wrapper.gravity-theme legend.gfield_label {
	font-size: 1.1em;
	font-weight: 600;
}
/* Sub-input labels (Address: Street/City/State/Zip/Country, name parts, etc.).
   Use rem instead of em — GF's compound-input wrappers (.ginput_full /
   .ginput_left / .ginput_right) set font-size: 0 to suppress inline whitespace,
   so any em-based size on a child evaluates to 0 and the label disappears. */
.gform_wrapper.gravity-theme .gfield_label_before_complex,
.gform_wrapper.gravity-theme .ginput_complex .gform-field-label {
	font-size: 0.95rem;
}

/* Inline-editable recap (custom-priced forms 23 + 24, 1.6.0+). The recap
   IS the editor — prices render as <input>, custom rows have a ✕ remove
   button, and a "+ Add line item" button per group reveals an inline draft
   row. Edits sync to two hidden JSON fields (100, 101) on every keystroke;
   server reads those as the source of truth. */
.bayto-order-recap .recap-price-edit {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
}
.bayto-order-recap .recap-price-edit input[type="number"] {
	width: 6.5rem;
	padding: 0.25rem 0.5rem;
	font: inherit;
	font-variant-numeric: tabular-nums;
	text-align: right;
	border: 1px solid #cfcfcf;
	border-radius: 3px;
	background: #fff;
	color: #111;
	box-sizing: border-box;
	-moz-appearance: textfield;
}
.bayto-order-recap .recap-price-edit input[type="number"]::-webkit-outer-spin-button,
.bayto-order-recap .recap-price-edit input[type="number"]::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}
.bayto-order-recap .recap-price-edit input[type="number"]:focus {
	outline: 2px solid var(--bayto-blue, #39C5EF);
	outline-offset: 1px;
	border-color: transparent;
}

/* Custom-row inputs — narrower description, same price input, plus a
   group dropdown. */
.bayto-order-recap .bayto-recap-custom-edit .bayto-custom-label {
	width: 100%;
	padding: 0.25rem 0.5rem;
	font: inherit;
	border: 1px solid #cfcfcf;
	border-radius: 3px;
	background: #fff;
	box-sizing: border-box;
}
.bayto-order-recap .bayto-recap-custom-edit .bayto-custom-price {
	width: 6.5rem;
	padding: 0.25rem 0.5rem;
	font: inherit;
	text-align: right;
	border: 1px solid #cfcfcf;
	border-radius: 3px;
	background: #fff;
	box-sizing: border-box;
}
.bayto-order-recap .bayto-recap-custom-edit .bayto-custom-group {
	flex: 0 0 auto;
	font: inherit;
	padding: 0.25rem 0.4rem;
	border: 1px solid #cfcfcf;
	border-radius: 3px;
	background: #fff;
}
.bayto-order-recap .bayto-recap-custom-edit .recap-label {
	flex: 1 1 auto;
}

/* + Add line item button per group. Lives in its own row at the bottom
   of each .bayto-recap-block, before the next block / total. The General
   block always renders on custom forms even with zero items, so the top
   button is always visible. Pool/Spa buttons indent to align with the
   catalog rows under their group heading. */
.bayto-order-recap .bayto-recap-add-wrap {
	margin-top: 0.4rem;
	text-align: left;
}
.bayto-order-recap .bayto-recap-add-indented {
	padding-left: 1.75rem;
}
/* Empty general block — no items, just the top + Add button. Suppress the
   block separator margin so the button sits clean above Pool. */
.bayto-order-recap .bayto-recap-block-general .bayto-recap-add-wrap {
	margin-top: 0;
}
.bayto-order-recap .bayto-recap-block-general:empty {
	display: none;
}
.bayto-order-recap .bayto-recap-add {
	font: inherit;
	font-size: 0.9em;
	color: var(--bayto-blue, #39C5EF);
	background: transparent;
	border: 1px dashed var(--bayto-blue, #39C5EF);
	border-radius: 3px;
	padding: 0.25rem 0.7rem;
	cursor: pointer;
	transition: background 0.15s, color 0.15s;
}
.bayto-order-recap .bayto-recap-add:hover,
.bayto-order-recap .bayto-recap-add:focus {
	background: var(--bayto-blue, #39C5EF);
	color: #fff;
	outline: none;
}

/* ✕ remove (custom rows + included rows) and ↺ reset (overridden rows).
   Both share the same compact 1.6rem square shape, sit flush right of
   the price, and tint on hover. Reset uses a subtle blue tint to read
   as "restore" rather than "destroy". */
.bayto-order-recap .bayto-recap-remove,
.bayto-order-recap .bayto-recap-remove-included,
.bayto-order-recap .bayto-recap-reset {
	flex: 0 0 auto;
	width: 1.6rem;
	height: 1.6rem;
	margin-left: 0.4rem;
	padding: 0;
	font-size: 1.1em;
	line-height: 1;
	color: #777;
	background: transparent;
	border: none;
	border-radius: 3px;
	cursor: pointer;
	transition: background 0.15s, color 0.15s;
}
.bayto-order-recap .bayto-recap-remove:hover,
.bayto-order-recap .bayto-recap-remove:focus,
.bayto-order-recap .bayto-recap-remove-included:hover,
.bayto-order-recap .bayto-recap-remove-included:focus {
	background: #f3d3d3;
	color: #b32d2e;
	outline: none;
}
.bayto-order-recap .bayto-recap-reset:hover,
.bayto-order-recap .bayto-recap-reset:focus {
	background: #d9eef9;
	color: #0d6685;
	outline: none;
}

/* "Included" inputs render with a faint italic placeholder so the row
   visually reads like the old static "included" text until the user
   actually types a price. */
.bayto-order-recap .bayto-recap-edit-included::placeholder {
	color: #9ca3af;
	font-style: italic;
}

/* Visual flag on overridden rows — a small left-border accent so users
   can scan and see at a glance which rows they've changed. */
.bayto-order-recap .bayto-recap-overridden .recap-label {
	border-left: 2px solid var(--bayto-blue, #39C5EF);
	padding-left: 0.4rem;
	margin-left: -0.4rem;
}

/* Clear all customizations — final-resort button below the Total. Small
   and tertiary; not the visual focus, just available when needed. */
.bayto-order-recap .bayto-recap-clear-wrap {
	margin-top: 0.5rem;
	text-align: right;
}
.bayto-order-recap .bayto-recap-clear-all {
	font: inherit;
	font-size: 0.85em;
	color: #6B7280;
	background: transparent;
	border: 1px solid #d5d5d5;
	border-radius: 3px;
	padding: 0.25rem 0.7rem;
	cursor: pointer;
	transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.bayto-order-recap .bayto-recap-clear-all:hover,
.bayto-order-recap .bayto-recap-clear-all:focus {
	background: #f3d3d3;
	color: #b32d2e;
	border-color: #b32d2e;
	outline: none;
}

/* Visual hint that custom rows are editable — slight tint. */
.bayto-order-recap .bayto-recap-custom {
	background: #fcfaee;
}

/* Quote recap (retail tier / form 22): faint middle column showing the
   wholesale (installer-paid) price next to the retail (customer-paid) price,
   so installers can see their margin per item. Only present in retail-tier
   recaps — see renderRow() in form-lineitems.js. */
.bayto-order-recap .recap-wholesale {
	flex: 0 0 auto;
	color: #9CA3AF;
	font-size: 0.85em;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
	text-align: right;
	min-width: 5rem;
}
/* Enhanced Choices field labels (above swatches). MUST be rem, not em — when
   nested inside GF wrappers that set font-size: 0 (or any zeroed parent), an
   em-based size collapses to 0 and the label disappears. Same trap that hit
   the address sub-input labels in 1.0.23. Carmyn confirmed values 2026-04-28. */
.gform_wrapper.gravity-theme .ec-field.ec-enabled .gfield_label {
	font-size: 1.5rem;
}
.gform_wrapper.gravity-theme .ec-choice .ec-label {
	font-size: 1em;
}
/* EC swatch row alignment — anchor to the start so a single swatch doesn't
   stretch awkwardly across the row. */
.ec-cards-wrap {
	justify-content: start;
}

/* [bayto-pricing] shortcode — pipe-separated inline row of price-list PDF links.
   Wrapper is a <p> so typography (font-size, line-height, color) inherits from
   the page's paragraph styles. Only link colors are overridden here. */
.bayto-pricing-download__link {
	color: inherit;
	text-decoration: none;
	font-weight: 600;
	transition: color 0.15s ease;
}
.bayto-pricing-download__link:hover,
.bayto-pricing-download__link:focus {
	color: #3CC2EC;
	text-decoration: underline;
}

/* GF Total field — render as a row that visually extends the recap's price column.
   Label left, total right, with the same horizontal padding as recap rows.
   !important needed to override GF's default block layout + gray-box styling. */
.gform_wrapper.gravity-theme .gfield--type-total {
	display: flex !important;
	flex-direction: row !important;
	justify-content: space-between !important;
	align-items: baseline !important;
	gap: 1rem !important;
	padding: 0.6rem 1.25rem !important;
	margin-top: 0.5rem !important;
	border-top: 2px solid #d0d0d0 !important;
	font-weight: 700;
	font-size: 1.1em;
	text-align: left !important;
}

.gform_wrapper.gravity-theme .gfield--type-total .gfield_label {
	margin: 0 !important;
	flex: 1 1 auto;
	text-align: left !important;
}

.gform_wrapper.gravity-theme .gfield--type-total .ginput_container,
.gform_wrapper.gravity-theme .gfield--type-total .ginput_container_total {
	flex: 0 0 auto;
	margin: 0 !important;
	padding: 0 !important;
	background: transparent !important;
	border: 0 !important;
}

.gform_wrapper.gravity-theme .gfield--type-total .ginput_total {
	display: inline-block;
	background: transparent !important;
	border: 0 !important;
	padding: 0 !important;
	margin: 0 !important;
	text-align: right !important;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

/* ────────────────────────────────────────────────────────────────────────
   Larger, easier-to-tap standard checkbox + radio fields on ALL Gravity Forms.
   Targets the .gfield_checkbox / .gfield_radio containers, which the Enhanced
   Choices plugin replaces — so EC card fields stay untouched.
   ──────────────────────────────────────────────────────────────────────── */

.gform_wrapper.gravity-theme .gfield_checkbox,
.gform_wrapper.gravity-theme .gfield_radio {
	font-size: 1.15rem;
	line-height: 1.5;
}

.gform_wrapper.gravity-theme .gfield_checkbox .gchoice,
.gform_wrapper.gravity-theme .gfield_radio .gchoice {
	padding: 0.55rem 0;
}

.gform_wrapper.gravity-theme .gfield_checkbox input[type="checkbox"],
.gform_wrapper.gravity-theme .gfield_radio input[type="radio"] {
	width: 1.35em;
	height: 1.35em;
	margin-right: 0.65em;
	cursor: pointer;
	vertical-align: middle;
}

.gform_wrapper.gravity-theme .gfield_checkbox label,
.gform_wrapper.gravity-theme .gfield_radio label {
	font-size: inherit;
	cursor: pointer;
	vertical-align: middle;
}