/*
 * I Already Won Fitness: Reusable Component Layer
 * Manifest: IAWF-RCM-20261019 (AVADA-COMPONENTS v3.5)
 * Design system: IAWF-DSM-20261019 (IAWF_Avada_Global_Options.json)
 * Canonical location: child theme assets/css/iawf-components.css, loaded by inc/site-assets.php
 * Revision 2026-10-25 (Prompt 15 final audit): form input / select / textarea
 * border color4 -> color6, hover color6 -> color7 (WCAG 2.2 SC 1.4.11);
 * field validation message text color5 -> color8 (SC 1.4.3).
 *
 * Do not copy these rules into Avada > Options > Custom CSS or into any
 * page, header, footer, form or CPT build. Change them here only.
 *
 * Components
 *   1. Shared tokens and icons (:root)
 *   2. iawf-btn             Avada Button: chevron hover + 22px grow (every button)
 *      iawf-btn--outline    white outline variant
 *      iawf-btn--black      black filled variant
 *      iawf-btn--compact    56px size
 *      iawf-btn--small      52px size, 14px label
 *      iawf-btn--header     52px desktop / 46px tablet header CTA
 *      iawf-btn--arrow      adds the shared arrow after the label
 *   3. Gravity Forms submit adapter (consumes iawf-btn tokens)
 *   4. iawf-link-arrow      text link with red arrow + bracket hover
 *      iawf-link-arrow--back  arrow before the label, pointing left
 *   5. iawf-directions      [iawf_directions] shortcode link
 *   6. iawf-hours--grid     [iawf_hours layout="grid"] shortcode output
 *   6b. iawf-dot            red dot before an eyebrow (Title or Text Block;
 *                           span.iawf-dot__mark in shortcode markup)
 *       iawf-stars          five red stars before an eyebrow (Text Block)
 *   6c. iawf-reviews        [iawf_reviews] shortcode: reviews track + edge fades
 *   6d. iawf-faq            Avada Toggles FAQ list: hairlines, +/- circle on the right
 *   6e. iawf-coach-card     IAWF Coach Card Library Post Card: 4:5 photo or
 *                           "Photo coming soon" tile, whole card links to the coach
 *   6f. iawf-hours--week    [iawf_hours layout="week"]: seven day cards
 *   6g. iawf-map            [iawf_map] dark map layer, iawf-map-card Column host
 *   6h. iawf-hours--times   [iawf_hours layout="times"]: one card per class time
 *   6i. iawf-step           timeline step: 2px line with a red dot (Nested Column)
 *   6j. iawf-check-card     card with a red check marker, text at the bottom
 *       iawf-check-card--hi highlighted card (white marker on red)
 *   6k. iawf-rule-swap      phone: left divider moves to the top
 *       iawf-rule-add-top   phone: adds a top divider, keeps the left one
 *   6l. iawf-circle         Column drawn as a perfect circle
 *   6m. iawf-faq-filter     FAQ topic pills that show one Toggles group at a time
 *   6n. iawf-modal          Avada Modal element drawn as the design's popup
 *   7. Gravity Forms        every form (card, fields, states, footer note), plus
 *                           iawf-form--compact, iawf-form--glass, iawf-booking
 *                           iawf-tabs, iawf-slots (+ --many),
 *                           iawf-pills, iawf-optional, iawf-textarea--short,
 *                           iawf-booking-stack (Column host: stacked booking card)
 *                           iawf-booking-note (Text Block: per-session note, Book Now)
 */

/* ==========================================================================
   1. Shared tokens and icons
   ========================================================================== */

:root {
	/* Shared decorative icons (mask images). Reuse these in menus, cards and
	   other components instead of redrawing them. Both point right. */
	--iawf-icon-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 12'%3E%3Cpath d='M2 1.5 6.5 6 2 10.5' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	--iawf-icon-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 12'%3E%3Cpath d='M1 6h13.5M9.5 1.5 14 6l-4.5 4.5' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");

	/* Motion */
	--iawf-ease-out: cubic-bezier(.2, .7, .2, 1);
	--iawf-ease-snap: cubic-bezier(.2, .8, .2, 1);

	/* Button chevron hover geometry */
	--iawf-btn-grow: 22px;
	--iawf-chev-w: 7px;
	--iawf-chev-h: 12px;
	--iawf-chev-pitch: 8px;
	--iawf-chev-right: 18px;
}

/* One chevron fades and slides through on a 900ms loop. Sampled from the
   design's whole-iteration ease-in-out so the motion matches exactly. */
@keyframes iawf-chev-wave {
	0%   { opacity: 0;     transform: translateX(-4px); }
	10%  { opacity: .039;  transform: translateX(-3.84px); }
	20%  { opacity: .163;  transform: translateX(-3.35px); }
	30%  { opacity: .375;  transform: translateX(-2.5px); }
	40%  { opacity: .664;  transform: translateX(-1.34px); }
	50%  { opacity: 1;     transform: translateX(0); }
	60%  { opacity: .664;  transform: translateX(1.34px); }
	70%  { opacity: .375;  transform: translateX(2.5px); }
	80%  { opacity: .163;  transform: translateX(3.35px); }
	90%  { opacity: .039;  transform: translateX(3.84px); }
	100% { opacity: 0;     transform: translateX(4px); }
}

/* ==========================================================================
   2. iawf-btn: Avada Button Element
   Host: a.fusion-button.iawf-btn (CSS Class field). Colors, font, padding and
   radius stay with Global Options unless a modifier below takes them over.
   DOM dependency: span.fusion-button-text (its ::before/::after) and the
   anchor ::after draw the three chevrons; ::before is reserved for --arrow.
   ========================================================================== */

.fusion-button.iawf-btn {
	--iawf-btn-chev: var(--awb-color8);
	--iawf-chev-op: 0;
	--iawf-chev-anim: none;
	--iawf-grow-now: 0px;
	position: relative;
	margin-right: calc(-1 * var(--iawf-grow-now));
	transition: background-color .25s, color .25s, box-shadow .25s, margin-right .4s var(--iawf-ease-out);
}

.fusion-button.iawf-btn .fusion-button-text {
	position: static; /* chevrons position against the button, not the label */
	margin-right: var(--iawf-grow-now);
	transition: margin-right .4s var(--iawf-ease-out);
}

/* Active state: mouse hover and keyboard focus. Touch gets the resting state. */
@media (hover: hover) and (pointer: fine) {
	.fusion-button.iawf-btn:hover {
		--iawf-btn-chev: var(--awb-color1);
		--iawf-chev-op: 1;
		--iawf-chev-anim: iawf-chev-wave;
	}
	.fusion-button.iawf-btn:not(.fusion-button-span-yes):hover {
		--iawf-grow-now: var(--iawf-btn-grow);
	}
}

.fusion-button.iawf-btn:focus-visible {
	--iawf-btn-chev: var(--awb-color1);
	--iawf-chev-op: 1;
	--iawf-chev-anim: iawf-chev-wave;
}

.fusion-button.iawf-btn:not(.fusion-button-span-yes):focus-visible {
	--iawf-grow-now: var(--iawf-btn-grow);
}

/* Keyboard focus shows the same end state as hover (white pill, black label). */
body .fusion-button.iawf-btn:focus-visible {
	background: var(--awb-color8);
	color: var(--awb-color1);
}

body .fusion-button.iawf-btn:focus-visible .fusion-button-text {
	color: inherit;
}

/* --------------------------------------------------------------------------
   Chevrons: one shared visual rule for every host.
   chev 1 (left), chev 2 (middle), chev 3 (right)
   -------------------------------------------------------------------------- */

.fusion-button.iawf-btn .fusion-button-text::before,
.fusion-button.iawf-btn .fusion-button-text::after,
.fusion-button.iawf-btn::after,
.gform_wrapper .gform_footer button.gform_button.button .iawf-chev::before,
.gform_wrapper .gform_footer button.gform_button.button .iawf-chev::after,
.gform_wrapper .gform_footer button.gform_button.button::after {
	content: "";
	position: absolute;
	top: calc(50% - var(--iawf-chev-h) / 2);
	width: var(--iawf-chev-w);
	height: var(--iawf-chev-h);
	background-color: var(--iawf-btn-chev);
	-webkit-mask: var(--iawf-icon-chevron) center / contain no-repeat;
	mask: var(--iawf-icon-chevron) center / contain no-repeat;
	opacity: var(--iawf-chev-op);
	animation-name: var(--iawf-chev-anim);
	animation-duration: 900ms;
	animation-timing-function: linear;
	animation-iteration-count: infinite;
	transition: opacity .2s, background-color .25s;
	pointer-events: none;
}

.fusion-button.iawf-btn .fusion-button-text::before,
.gform_wrapper .gform_footer button.gform_button.button .iawf-chev::before {
	right: calc(var(--iawf-chev-right) + 2 * var(--iawf-chev-pitch));
	animation-delay: 0ms;
}

.fusion-button.iawf-btn .fusion-button-text::after,
.gform_wrapper .gform_footer button.gform_button.button .iawf-chev::after {
	right: calc(var(--iawf-chev-right) + var(--iawf-chev-pitch));
	animation-delay: 150ms;
}

.fusion-button.iawf-btn::after,
.gform_wrapper .gform_footer button.gform_button.button::after {
	right: var(--iawf-chev-right);
	animation-delay: 300ms;
}

/* --------------------------------------------------------------------------
   Variants (complete color delta from the red global baseline)
   -------------------------------------------------------------------------- */

/* Outline: transparent pill, 1.5px white ring. The ring is an outline drawn
   inside the edge (negative offset) so the button keeps the same height as
   filled buttons. Not a box-shadow: Avada's flat buttons force
   box-shadow: none !important (seen on the target site). */
body .fusion-button.iawf-btn.iawf-btn--outline {
	background: transparent;
	border-color: transparent;
	color: var(--awb-color8);
	outline: 1.5px solid var(--awb-color8);
	outline-offset: -1.5px;
}

/* Black filled */
body .fusion-button.iawf-btn.iawf-btn--black {
	background: var(--awb-color1);
	border-color: var(--awb-color1);
	color: var(--awb-color8);
}

body .fusion-button.iawf-btn.iawf-btn--outline .fusion-button-text,
body .fusion-button.iawf-btn.iawf-btn--black .fusion-button-text {
	color: inherit;
}

/* Both variants end on the same white pill with a black label. */
body .fusion-button.iawf-btn.iawf-btn--outline:focus-visible,
body .fusion-button.iawf-btn.iawf-btn--black:focus-visible {
	background: var(--awb-color8);
	border-color: var(--awb-color8);
	color: var(--awb-color1);
}

@media (hover: hover) and (pointer: fine) {
	body .fusion-button.iawf-btn.iawf-btn--outline:hover,
	body .fusion-button.iawf-btn.iawf-btn--black:hover {
		background: var(--awb-color8);
		border-color: var(--awb-color8);
		color: var(--awb-color1);
	}
}

/* --------------------------------------------------------------------------
   Sizes (label size and letter spacing only change where noted)
   -------------------------------------------------------------------------- */

/* 56px pill */
body .fusion-button.iawf-btn.iawf-btn--compact {
	padding: 20.5px 32px;
}

/* 52px pill, 14px label */
body .fusion-button.iawf-btn.iawf-btn--small {
	padding: 19px 26px;
	font-size: 14px;
}

/* Header CTA: 52px desktop, 46px tablet, 14px label, 0.1em tracking.
   Hidden on phones by the Header build, not here. */
body .fusion-button.iawf-btn.iawf-btn--header {
	padding: 19px 26px;
	font-size: 14px;
	letter-spacing: .1em;
}

body .fusion-button.iawf-btn.iawf-btn--small .fusion-button-text,
body .fusion-button.iawf-btn.iawf-btn--header .fusion-button-text {
	font-size: inherit;
	letter-spacing: inherit;
}

@media (max-width: 1024px) {
	body .fusion-button.iawf-btn.iawf-btn--header {
		padding: 16px 13px;
	}
}

/* Arrow after the label ("Learn more ->"). Drawn on the anchor ::before and
   moved after the label with flex order; it follows the label color. */
.fusion-button.iawf-btn.iawf-btn--arrow {
	display: inline-flex;
	align-items: center;
}

.fusion-button.iawf-btn.iawf-btn--arrow::before {
	content: "";
	order: 2;
	flex-shrink: 0;
	width: .9em;
	height: .7em;
	margin-left: 10px;
	background-color: var(--iawf-btn-chev);
	-webkit-mask: var(--iawf-icon-arrow) center / contain no-repeat;
	mask: var(--iawf-icon-arrow) center / contain no-repeat;
	transition: background-color .25s;
	pointer-events: none;
}

/* ==========================================================================
   3. Gravity Forms submit adapter
   Host: every Gravity Forms submit button (button.gform_button.button inside
   .gform_footer). Built against reference markup; rendered acceptance is
   pending the Gravity Forms phase. assets/js/iawf-components.js adds the
   span.iawf-chev that carries chevrons 1 and 2.
   !important on every visual property: required to beat the Orbital
   theme's per-form ID styles. inc/site-forms.php guarantees the <button>
   host (it converts Gravity Forms' <input type="submit"> when printed).
   Submits are full width in the design, so this host never grows.
   ========================================================================== */

.gform_wrapper .gform_footer button.gform_button.button {
	--iawf-btn-chev: var(--awb-color8);
	--iawf-chev-op: 0;
	--iawf-chev-anim: none;
	position: relative !important;
	display: block !important;
	width: 100% !important;
	max-width: none !important;
	min-height: 60px !important;
	height: auto !important;
	margin: 0 !important;
	background: var(--awb-color5) !important;
	color: var(--awb-color8) !important;
	border: 0 !important;
	border-radius: 999px !important;
	padding: 22.5px 36px !important;
	box-shadow: none !important;
	font-family: var(--awb-typography3-font-family) !important;
	font-size: 15px !important;
	font-weight: 700 !important;
	line-height: 1 !important;
	letter-spacing: .08em !important;
	text-transform: uppercase !important;
	text-align: center !important;
	white-space: nowrap !important;
	cursor: pointer;
	transition: background-color .25s, color .25s !important;
}

/* Ajax spinner sits inside the pill on the left, clear of the chevrons. */
.gform_wrapper .gform_footer .gform-loader,
.gform_wrapper .gform_footer .gform_ajax_spinner {
	position: absolute !important;
	top: 21px !important;
	left: 24px !important;
	margin: 0 !important;
}

.gform_wrapper .gform_footer button.gform_button.button .iawf-chev {
	position: static;
}

.gform_wrapper .gform_footer button.gform_button.button:focus-visible {
	--iawf-btn-chev: var(--awb-color1);
	--iawf-chev-op: 1;
	--iawf-chev-anim: iawf-chev-wave;
	background: var(--awb-color8) !important;
	color: var(--awb-color1) !important;
}

@media (hover: hover) and (pointer: fine) {
	.gform_wrapper .gform_footer button.gform_button.button:hover {
		--iawf-btn-chev: var(--awb-color1);
		--iawf-chev-op: 1;
		--iawf-chev-anim: iawf-chev-wave;
		background: var(--awb-color8) !important;
		color: var(--awb-color1) !important;
	}
}

/* ==========================================================================
   4. iawf-link-arrow: text link with red arrow and bracket hover
   Hosts: Avada Button Element (a.fusion-button.iawf-link-arrow) and a plain
   link in a Text Block (<a class="iawf-link-arrow">).
   ========================================================================== */

/* Avada Button host: drop the pill completely. */
body .fusion-button.iawf-link-arrow,
body .fusion-button.iawf-link-arrow:hover,
body .fusion-button.iawf-link-arrow:focus,
body .fusion-button.iawf-link-arrow:focus-visible {
	background: transparent;
	border-color: transparent;
	box-shadow: none;
	color: var(--awb-color8);
}

body .fusion-button.iawf-link-arrow {
	position: relative;
	display: inline-flex;
	align-items: center;
	width: fit-content;
	max-width: 100%;
	padding: 0;
	border-width: 0;
	border-radius: 0;
	font-size: 15px;
	font-weight: 600;
	line-height: 1.3;
	letter-spacing: 0;
	text-transform: none;
	white-space: normal;
}

body .fusion-button.iawf-link-arrow .fusion-button-text {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	color: inherit;
	font-size: inherit;
	font-weight: inherit;
	line-height: inherit;
	letter-spacing: inherit;
	text-transform: inherit;
}

/* Text Block host */
a.iawf-link-arrow:not(.fusion-button),
a.iawf-link-arrow:not(.fusion-button):hover,
a.iawf-link-arrow:not(.fusion-button):focus {
	color: var(--awb-color8);
	text-decoration: none;
}

a.iawf-link-arrow:not(.fusion-button) {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	max-width: 100%;
	font-size: 15px;
	font-weight: 600;
	line-height: 1.3;
}

/* Arrow (shared icon, red) */
body .fusion-button.iawf-link-arrow .fusion-button-text::after,
a.iawf-link-arrow:not(.fusion-button)::after {
	content: "";
	flex-shrink: 0;
	width: .9em;
	height: .7em;
	background-color: var(--awb-color5);
	-webkit-mask: var(--iawf-icon-arrow) center / contain no-repeat;
	mask: var(--iawf-icon-arrow) center / contain no-repeat;
	pointer-events: none;
}

/* Back link: arrow first, pointing left */
body .fusion-button.iawf-link-arrow.iawf-link-arrow--back .fusion-button-text,
a.iawf-link-arrow.iawf-link-arrow--back:not(.fusion-button) {
	gap: 10px;
}

body .fusion-button.iawf-link-arrow.iawf-link-arrow--back .fusion-button-text::after,
a.iawf-link-arrow.iawf-link-arrow--back:not(.fusion-button)::after {
	order: -1;
	transform: rotate(180deg);
}

/* Brackets: one layer draws both red brackets; they slide in from 8px out. */
body .fusion-button.iawf-link-arrow::before,
a.iawf-link-arrow:not(.fusion-button)::before,
a.iawf-directions::before {
	content: "";
	position: absolute;
	top: -6px;
	bottom: -6px;
	left: -22px;
	right: -22px;
	opacity: 0;
	pointer-events: none;
	background-image:
		linear-gradient(var(--awb-color5), var(--awb-color5)),
		linear-gradient(var(--awb-color5), var(--awb-color5)),
		linear-gradient(var(--awb-color5), var(--awb-color5)),
		linear-gradient(var(--awb-color5), var(--awb-color5)),
		linear-gradient(var(--awb-color5), var(--awb-color5)),
		linear-gradient(var(--awb-color5), var(--awb-color5));
	background-size: 2px 100%, 8px 2px, 8px 2px, 2px 100%, 8px 2px, 8px 2px;
	background-position: left top, left top, left bottom, right top, right top, right bottom;
	background-repeat: no-repeat;
	transition: left .35s var(--iawf-ease-snap), right .35s var(--iawf-ease-snap), opacity .3s;
}

@media (hover: hover) and (pointer: fine) {
	body .fusion-button.iawf-link-arrow:hover::before,
	a.iawf-link-arrow:not(.fusion-button):hover::before,
	a.iawf-directions:hover::before {
		opacity: 1;
		left: -14px;
		right: -14px;
	}
}

body .fusion-button.iawf-link-arrow:focus-visible::before,
a.iawf-link-arrow:not(.fusion-button):focus-visible::before,
a.iawf-directions:focus-visible::before {
	opacity: 1;
	left: -14px;
	right: -14px;
}

/* ==========================================================================
   5. iawf-directions: [iawf_directions] shortcode link
   Own line under [iawf_address]; footer keeps its own link color and size.
   ========================================================================== */

a.iawf-directions {
	position: relative;
	display: block;
	width: fit-content;
	max-width: 100%;
	text-decoration: none;
}

a.iawf-directions:not(.fusion-tb-footer a, .fusion-footer a),
a.iawf-directions:not(.fusion-tb-footer a, .fusion-footer a):hover,
a.iawf-directions:not(.fusion-tb-footer a, .fusion-footer a):focus {
	color: var(--awb-color8);
	font-size: 15px;
	font-weight: 600;
}

a.iawf-directions > span {
	margin-left: .3em;
}

a.iawf-directions:not(.fusion-tb-footer a, .fusion-footer a) > span {
	color: var(--awb-color5);
}

/* ==========================================================================
   6. iawf-hours--grid: [iawf_hours layout="grid"]
   ========================================================================== */

.iawf-hours.iawf-hours--grid {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 6px 18px;
	font-size: 15px;
	color: var(--awb-color7);
}

.iawf-hours--grid .iawf-hours__row {
	display: contents;
}

.iawf-hours--grid .iawf-hours__days {
	color: var(--awb-color8);
	font-weight: 600;
}

/* A grid typed around the shortcode in a Text Block flattens into one grid,
   so a page can add rows (Parking, Phone) after the hours and every row
   shares one days column:
   <div class="iawf-hours iawf-hours--grid">[iawf_hours layout="grid"]<div class="iawf-hours__row">...</div></div> */
.iawf-hours--grid > .iawf-hours--grid {
	display: contents;
}

/* WordPress auto-paragraphs can drop a <br> or an empty <p> between the
   shortcode output and the typed rows; each one would take a grid cell and
   shift every cell after it. Stray tags take no cell; a <p> that wraps rows
   passes them through. */
.iawf-hours--grid > br,
.iawf-hours--grid > p:empty {
	display: none;
}

.iawf-hours--grid > p {
	display: contents;
}

/* Links in a value cell (the [iawf_phone] row) keep the grey value color. */
.iawf-hours--grid .iawf-hours__time a,
.iawf-hours--grid .iawf-hours__time a:hover,
.iawf-hours--grid .iawf-hours__time a:focus {
	color: inherit;
	text-decoration: none;
}

/* ==========================================================================
   6b. Eyebrow markers
   iawf-dot   Title (h1/h2 .fusion-title-heading) or Text Block (p): 8px red
              dot, 12px before the text, centered on the cap height.
              iawf-dot__mark: the same dot as an empty span in shortcode
              markup (Training tiles tag line); a flex parent's gap spaces it.
   iawf-stars Text Block (p): five red stars, 12px before the text.
   Inline-block, so the element's Builder Alignment (left/center) still
   places the whole line. Owner of the repeated decorative marker.
   ========================================================================== */

.iawf-dot .fusion-title-heading::before,
.fusion-text.iawf-dot > p::before,
.iawf-dot__mark {
	content: "";
	display: inline-block;
	width: 8px;
	height: 8px;
	margin-right: 12px;
	border-radius: 50%;
	background: var(--awb-color5);
	vertical-align: .1em;
}

.fusion-text.iawf-stars > p::before {
	content: "\2605\2605\2605\2605\2605";
	display: inline-block;
	margin-right: 12px;
	color: var(--awb-color5);
	font-size: 16px;
	font-style: normal;
	letter-spacing: .1em;
	vertical-align: -.05em;
}

/* ==========================================================================
   6c. iawf-reviews: [iawf_reviews] shortcode output
   The reviews track around the Trustindex widget: full width, clips the
   widget's overflow, and a black fade on each edge (clamp(40px,10vw,200px)
   wide, solid for the first 15%). Fades ignore the pointer so the widget's
   cards and arrows stay clickable. Place the shortcode in a full-width
   Column with no side padding.
   ========================================================================== */

.iawf-reviews {
	position: relative;
	overflow: hidden;
}

.iawf-reviews__fade {
	position: absolute;
	top: 0;
	bottom: 0;
	z-index: 1;
	width: clamp(40px, 10vw, 200px);
	pointer-events: none;
}

.iawf-reviews__fade--left {
	left: 0;
	background: linear-gradient(90deg, var(--awb-color1) 15%, rgba(0, 0, 0, 0));
}

.iawf-reviews__fade--right {
	right: 0;
	background: linear-gradient(270deg, var(--awb-color1) 15%, rgba(0, 0, 0, 0));
}

/* ==========================================================================
   6d. iawf-faq: Avada Toggles Element (FAQ list)
   The design's FAQ list (Memberships, FAQ, Free Class, service pages, Refer
   a Friend, 21-Day Challenge): a 1px color3 line above the first question
   and under every question; the question row is 22px top and bottom with
   the answer below it (56px clear on the right, 24px under); a 34px circle
   (1px color4 ring) on the right shows "+" closed and the minus sign open.
   The class owns lines, spacing and the circle; the element's Builder
   fields own typography and colors (Divider Line No, Title Tag DIV).
   Avada's own toggle icons are hidden; the circle replaces them.
   ========================================================================== */

.fusion-accordian.iawf-faq .panel-group {
	margin: 0;
	border-top: 1px solid var(--awb-color3);
}

.fusion-accordian.iawf-faq .fusion-panel {
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	border-bottom: 1px solid var(--awb-color3) !important;
	border-radius: 0 !important;
	background: none !important;
	box-shadow: none !important;
}

.fusion-accordian.iawf-faq .panel-heading,
.fusion-accordian.iawf-faq .panel-title {
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
}

.fusion-accordian.iawf-faq .panel-title a {
	display: flex !important;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	width: 100%;
	padding: 22px 0 !important;
	text-align: left;
	text-decoration: none;
	font-style: normal;
}

.fusion-accordian.iawf-faq .fusion-toggle-heading {
	flex: 1 1 auto;
	min-width: 0;
	margin: 0 !important;
	padding: 0 !important;
	font-style: normal;
}

.fusion-accordian.iawf-faq .fusion-toggle-icon-wrapper {
	order: 2;
	display: flex !important;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	box-sizing: border-box;
	width: 34px;
	height: 34px;
	margin: 0 !important;
	padding: 0 !important;
	border: 1px solid var(--awb-color4);
	border-radius: 50%;
	background: none !important;
	color: var(--awb-color8);
	font-family: var(--awb-typography4-font-family);
	font-size: 18px;
	font-style: normal;
	font-weight: 400;
	line-height: 1;
}

.fusion-accordian.iawf-faq .fusion-toggle-icon-wrapper i {
	display: none !important;
}

.fusion-accordian.iawf-faq .fusion-toggle-icon-wrapper::before {
	content: "+";
}

.fusion-accordian.iawf-faq .panel-title a.active .fusion-toggle-icon-wrapper::before,
.fusion-accordian.iawf-faq .panel-title a[aria-expanded="true"] .fusion-toggle-icon-wrapper::before {
	content: "\2212";
}

.fusion-accordian.iawf-faq .toggle-content {
	margin: 0 !important;
	padding: 0 56px 24px 0 !important;
	border: 0 !important;
	background: none !important;
	text-wrap: pretty;
}

.fusion-accordian.iawf-faq .toggle-content > p {
	margin: 0;
}

.fusion-accordian.iawf-faq .toggle-content > p + p {
	margin-top: 1em;
}

/* ==========================================================================
   6e. iawf-coach-card: IAWF Coach Card (Library Post Card)
   The about page "Meet the team" card: a 4:5 photo tile (24px radius, color2,
   1px color9 ring) from [iawf_coach_card_media], or the "Photo coming soon"
   tile (96px badge over a 12px color6 label); the red role line and the H3
   name come from the Builder. The name's link (Title Link, post permalink)
   is stretched over the whole card, so the card is one link with the coach's
   name as its text. No hover change (as designed); keyboard focus draws a
   white ring around the card. Host: CSS Class of the Post Card root Column.
   ========================================================================== */

.iawf-coach-card .fusion-column-wrapper {
	position: relative;
}

.iawf-coach-card__media {
	display: block;
	width: 100%;
	aspect-ratio: 4 / 5;
	border: 1px solid var(--awb-color9);
	border-radius: 24px;
	overflow: hidden;
	background: var(--awb-color2);
}

.iawf-coach-card__img {
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
	object-position: center 25%;
}

.iawf-coach-card__media--empty {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 16px;
}

.iawf-coach-card__np-img {
	display: block;
	width: 96px;
	height: 96px;
	opacity: .9;
}

.iawf-coach-card__np-label {
	font-family: var(--awb-typography3-font-family);
	font-size: 12px;
	font-style: normal;
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--awb-color6);
}

.iawf-coach-card .fusion-title-heading,
.iawf-coach-card .fusion-text > p {
	margin: 0;
	font-style: normal;
}

.iawf-coach-card .fusion-title-heading a {
	text-decoration: none;
}

.iawf-coach-card .fusion-title-heading a::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	border-radius: 24px;
}

.iawf-coach-card .fusion-title-heading a:focus-visible {
	outline: none;
}

.iawf-coach-card .fusion-title-heading a:focus-visible::after {
	outline: 2px solid var(--awb-color8);
	outline-offset: 4px;
}

/* ==========================================================================
   6f. iawf-hours--week: [iawf_hours layout="week"]
   The contact page week: seven cards in one row (color2, 1px color3 border,
   18px radius), the red Bricolage day name over the class times (15px 700
   white, one per line). A closed day is see-through with a color9 border and
   color11 text. At 640px and below each day is one row: name on the left,
   times inline on the right. Place the shortcode in a Code Block.
   ========================================================================== */

.iawf-hours.iawf-hours--week {
	display: grid;
	grid-template-columns: repeat(7, minmax(0, 1fr));
	gap: 10px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.iawf-hours--week .iawf-hours__day {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 14px;
	margin: 0;
	padding: clamp(16px, 1.6vw, 24px);
	border: 1px solid var(--awb-color3);
	border-radius: 18px;
	background: var(--awb-color2);
}

.iawf-hours--week .iawf-hours__name {
	font-family: var(--awb-typography1-font-family);
	font-size: clamp(18px, 1.5vw, 24px);
	font-style: normal;
	font-weight: 800;
	line-height: normal;
	letter-spacing: 0;
	text-transform: uppercase;
	color: var(--awb-color5);
}

.iawf-hours--week .iawf-hours__times {
	display: flex;
	flex-direction: column;
	flex-wrap: wrap;
	gap: 6px 14px;
}

.iawf-hours--week .iawf-hours__time {
	font-size: 15px;
	font-style: normal;
	font-weight: 700;
	line-height: normal;
	white-space: nowrap;
	color: var(--awb-color8);
}

.iawf-hours--week .iawf-hours__day--closed {
	border-color: var(--awb-color9);
	background: transparent;
}

.iawf-hours--week .iawf-hours__day--closed .iawf-hours__name,
.iawf-hours--week .iawf-hours__day--closed .iawf-hours__time {
	color: var(--awb-color11);
}

@media (max-width: 640px) {
	.iawf-hours.iawf-hours--week {
		grid-template-columns: minmax(0, 1fr);
		gap: 8px;
	}

	.iawf-hours--week .iawf-hours__day {
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		padding: 16px 18px;
	}

	.iawf-hours--week .iawf-hours__times {
		flex-direction: row;
		justify-content: flex-end;
	}
}

/* ==========================================================================
   6g. iawf-map: [iawf_map] map layer, and the iawf-map-card Column host
   The contact page "find us" strip: a Google map of the Avada address under
   a black shade (darkest on the left, clear from 70%), filling the card. The
   embed is oversized (280px each side, 160px top and bottom) so Google's own
   controls sit outside the card, greyed and inverted to read as a dark map,
   and ignores the pointer. a.iawf-map__link (link="cover") makes the whole
   card open Google Maps.
   Host: Avada Column with CSS Class iawf-map-card. The Builder owns the
   card's background, border, radius, Overflow Hidden, padding, Gap and
   Content Alignment; the class owns the card height (320px, 300px at 640px
   and below), the positioned wrapper the layer fills and is clipped by, and
   Text Blocks sitting above the layer (clicks on text fall through to the
   cover link; links inside Text Blocks stay clickable).
   DOM dependency: .fusion-column-wrapper inside the Column.
   ========================================================================== */

.iawf-map-card .fusion-column-wrapper {
	position: relative !important;
	isolation: isolate;
	min-height: 320px !important; /* Avada's column rules override it otherwise (seen on the target site) */
}

.iawf-map {
	position: absolute;
	inset: 0;
	z-index: 0;
	overflow: hidden;
	border-radius: inherit;
}

.iawf-map__frame {
	position: absolute;
	top: -160px;
	left: -280px;
	width: calc(100% + 560px);
	max-width: none;
	height: calc(100% + 320px);
	border: 0;
	pointer-events: none;
	filter: grayscale(1) invert(.92) contrast(.85) brightness(.85);
}

.iawf-map::after {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	background: linear-gradient(90deg, rgba(0, 0, 0, .92) 0%, rgba(0, 0, 0, .7) 35%, rgba(0, 0, 0, 0) 70%);
}

.iawf-map__link {
	position: absolute;
	inset: 0;
	z-index: 1;
}

.iawf-map-card .fusion-text {
	position: relative;
	z-index: 1;
	pointer-events: none;
}

.iawf-map-card .fusion-text a {
	pointer-events: auto;
}

@media (max-width: 640px) {
	.iawf-map-card .fusion-column-wrapper {
		min-height: 300px !important;
	}
}

/* ==========================================================================
   6h. iawf-hours--times: [iawf_hours layout="times"]
   The Group Fitness Classes class times list: one card per class time
   (color2, 1px color3 border, 20px radius), the time in Bricolage 800 on the
   left and its days label in red on the right. A narrow card lets the days
   label drop under the time instead of running off the card. Same look as
   the Builder-built training hours cards on Personal Training and Buddy
   Training. Place the shortcode in a Code Block. No hover (as designed).
   ========================================================================== */

.iawf-hours.iawf-hours--times {
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.iawf-hours--times .iawf-hours__slot {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
	gap: 4px 16px;
	margin: 0;
	padding: clamp(18px, 1.8vw, 24px) clamp(20px, 2.2vw, 30px);
	border: 1px solid var(--awb-color3);
	border-radius: 20px;
	background: var(--awb-color2);
}

.iawf-hours--times .iawf-hours__time {
	font-family: var(--awb-typography1-font-family);
	font-size: clamp(28px, 2.6vw, 40px);
	font-style: normal;
	font-weight: 800;
	line-height: 1;
	letter-spacing: -0.015em;
	text-transform: none;
	white-space: nowrap;
	color: var(--awb-color8);
}

.iawf-hours--times .iawf-hours__days {
	font-family: var(--awb-typography3-font-family);
	font-size: 14px;
	font-style: normal;
	font-weight: 700;
	line-height: normal;
	letter-spacing: 0.06em;
	white-space: nowrap;
	color: var(--awb-color5);
}

/* ==========================================================================
   6i. iawf-step: timeline step (Nested Column host)
   Personal Training "How it works": each step sits on a 2px color3 line with
   an 18px red dot on its start, ringed 6px in the page black so the line
   breaks around it. Above 640px the line runs along the top (the Builder's
   Column Border Size Top 2px) and the dot sits on its left end; at 640px and
   below the line moves to the left side and the dot to its top end.
   The Builder owns the line (Column Border Size Top 2px, Color, Style), the
   padding that clears the dot (Top 34px / 34px / 0px, Left 0px / 0px / 34px),
   Width, Gap and Margin. The class owns the dot and the phone line swap.
   DOM dependency: .fusion-column-wrapper inside the Nested Column (it carries
   the Builder border).
   ========================================================================== */

.iawf-step {
	position: relative;
}

.iawf-step::before {
	content: "";
	position: absolute;
	top: -8px;
	left: 0;
	z-index: 1;
	width: 18px;
	height: 18px;
	border-radius: 50%;
	background: var(--awb-color5);
	box-shadow: 0 0 0 6px var(--awb-color1);
	pointer-events: none;
}

@media (max-width: 640px) {
	.iawf-step::before {
		top: 0;
		left: -8px;
	}

	.iawf-step > .fusion-column-wrapper {
		border-top-width: 0 !important;
		border-left-width: 2px !important;
		border-left-style: solid !important;
	}
}

/* ==========================================================================
   6j. iawf-check-card: card with a check marker (Nested Column host)
   Nutrition Coaching "What you get": a 40px red circle with a white check
   (U+2713, 17px 700) at the top of the card, the title and text pushed to the
   bottom, cards at least 220px tall above 640px (content height on phones).
   iawf-check-card--hi: the highlighted card (white circle, red check) on the
   red card. The Builder owns the card: background, border, 22px radius,
   padding, Content Layout Column, Gap and the Title's top margin. The class
   owns the marker, the push to the bottom and the minimum height.
   DOM dependency: .fusion-column-wrapper inside the Nested Column (the flex
   column the marker joins as its first item).
   ========================================================================== */

.iawf-check-card > .fusion-column-wrapper::before {
	content: "\2713";
	display: flex;
	flex: 0 0 auto;
	align-self: flex-start;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	margin-bottom: auto;
	border-radius: 50%;
	background: var(--awb-color5);
	font-family: var(--awb-typography3-font-family);
	font-size: 17px;
	font-style: normal;
	font-weight: 700;
	line-height: 1;
	color: var(--awb-color8);
}

.iawf-check-card.iawf-check-card--hi > .fusion-column-wrapper::before {
	background: var(--awb-color8);
	color: var(--awb-color5);
}

@media (min-width: 641px) {
	.iawf-check-card > .fusion-column-wrapper {
		min-height: 220px !important; /* Avada's column rules override a plain value (seen on the target site with iawf-map-card) */
	}
}

/* ==========================================================================
   6k. iawf-rule-swap / iawf-rule-add-top: phone divider change
   (Column or Nested Column host)
   Items that sit side by side above 640px are split by the Builder's
   Column Border Size Left 1px. At 640px and below they stack, so the divider
   has to run along the top instead:
   iawf-rule-swap: the left divider moves to the top (Buddy Training price
   cells; the third Group Fitness stat, first in its phone row).
   iawf-rule-add-top: keeps the left divider and adds the same top divider
   (the fourth Group Fitness stat, second in its phone row).
   The Builder owns the divider color, style and width; the class only moves
   it. DOM dependency: .fusion-column-wrapper (it carries the Builder border).
   ========================================================================== */

@media (max-width: 640px) {
	.iawf-rule-swap > .fusion-column-wrapper {
		border-left-width: 0 !important;
		border-top-width: 1px !important;
		border-top-style: solid !important;
	}

	.iawf-rule-add-top > .fusion-column-wrapper {
		border-top-width: 1px !important;
		border-top-style: solid !important;
	}
}

/* ==========================================================================
   6l. iawf-circle: a Column drawn as a perfect circle (Nested Column host)
   Buddy Training "Here's the math" (You + Your partner + 1 coach). The
   Builder owns the Width (the circle's diameter), the 2px ring (Column Border
   Size, Color, Style), Border Radius 50%, and centering the text (Content
   Layout Row, Content Alignment Center, Content Vertical Alignment Center).
   The class makes the card as tall as it is wide.
   DOM dependency: .fusion-column-wrapper inside the Nested Column.
   ========================================================================== */

.iawf-circle > .fusion-column-wrapper {
	width: 100%;
	aspect-ratio: 1 / 1;
}

/* ==========================================================================
   6m. iawf-faq-filter: FAQ topic filter (Container host)
   The FAQ page "Pick a topic" list: one pill per topic plus "All questions",
   each with its question count, that shows only the chosen topic's group.
   Above 1024px the pills stack in one column (the Builder makes that Column
   sticky); at 1024px and below they sit in a wrapping row. Pill: 48px tall,
   20px side padding, 1.5px color4 ring, Instrument Sans 600 15px white, the
   count 13px color6 on the right (16px gap). Chosen: color5 fill and ring,
   count white. Hover and keyboard focus: white ring. .25s.
   Hosts: Container CSS Class `iawf-faq-filter`; inside it a Code Block
   printing `div.iawf-faq-topics` (empty: the script adds the pills from the
   groups) and one Nested Columns element per topic with CSS Class
   `iawf-faq-group`, holding the topic's H2 Title and its Toggles `iawf-faq`.
   Script: FAQ topic filter block in assets/js/iawf-components.js.
   ========================================================================== */

.iawf-faq-filter .iawf-faq-topics {
	display: flex;
	flex-direction: column;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0;
	padding: 0;
}

.iawf-faq-filter .iawf-faq-topics .iawf-faq-topic {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 16px;
	box-sizing: border-box;
	min-height: 48px;
	margin: 0;
	padding: 0 20px !important;
	border: 1.5px solid var(--awb-color4) !important;
	border-radius: 999px !important;
	background: transparent !important;
	box-shadow: none !important;
	color: var(--awb-color8) !important;
	cursor: pointer;
	font-family: var(--awb-typography4-font-family);
	font-size: 15px;
	font-style: normal;
	font-weight: 600;
	letter-spacing: 0;
	line-height: 1.2;
	text-align: left;
	text-transform: none;
	white-space: nowrap;
	transition: background-color .25s, border-color .25s;
}

.iawf-faq-filter .iawf-faq-topic__count {
	font-size: 13px;
	font-weight: 600;
	color: var(--awb-color6);
}

.iawf-faq-filter .iawf-faq-topics .iawf-faq-topic[aria-selected="true"] {
	border-color: var(--awb-color5) !important;
	background: var(--awb-color5) !important;
}

.iawf-faq-filter .iawf-faq-topic[aria-selected="true"] .iawf-faq-topic__count {
	color: var(--awb-color8);
}

.iawf-faq-filter .iawf-faq-topics .iawf-faq-topic:focus {
	outline: none;
}

.iawf-faq-filter .iawf-faq-topics .iawf-faq-topic:focus-visible {
	border-color: var(--awb-color8) !important;
}

@media (hover: hover) and (pointer: fine) {
	.iawf-faq-filter .iawf-faq-topics .iawf-faq-topic:hover {
		border-color: var(--awb-color8) !important;
	}
}

.iawf-faq-filter .iawf-faq-group[hidden] {
	display: none !important;
}

@media (max-width: 1024px) {
	.iawf-faq-filter .iawf-faq-topics {
		flex-direction: row;
	}
}

@media (prefers-reduced-motion: reduce) {
	.iawf-faq-filter .iawf-faq-topics .iawf-faq-topic {
		transition: none;
	}
}

/* ==========================================================================
   6n. iawf-modal: Avada Modal element drawn as the design's popup
   (Refer a Friend "Start a referral", 21-Day Challenge "Start the 21-Day
   Reset"). Host: CSS Class field of the Modal element; add iawf-modal--sm
   for the 640px card. A div.iawf-modal__form[data-iawf-form] in the Contents
   receives that page form while the popup is open (script block four). Avada/Bootstrap own opening, closing, Escape, the backdrop click
   and the body scroll lock; this layer owns the look only.
   ========================================================================== */

.fusion-modal.iawf-modal {
	overflow: hidden !important;
}

/* The card never grows past the screen: the dialog is the screen minus 20px
   on every side and the card scrolls inside it, so its border and corners
   always show (Avada sizes the dialog itself; this overrides it). */
.fusion-modal.iawf-modal .modal-dialog {
	display: flex;
	align-items: center;
	justify-content: center;
	width: min(680px, calc(100% - 40px)) !important;
	max-width: none !important;
	height: calc(100% - 40px) !important;
	min-height: 0 !important;
	max-height: none !important;
	margin: 20px auto !important;
	overflow: visible !important;
}

.fusion-modal.iawf-modal.iawf-modal--sm .modal-dialog {
	width: min(640px, calc(100% - 40px)) !important;
}

.fusion-modal.iawf-modal .modal-content {
	position: relative;
	width: 100%;
	max-height: 100%;
	overflow-y: auto;
	overscroll-behavior: contain;
	scrollbar-width: thin;
	scrollbar-color: var(--awb-color4) transparent;
	padding: clamp(24px, 4vw, 48px);
	border: 1.5px solid var(--awb-color5) !important;
	border-radius: 28px !important;
	background: var(--awb-color1) !important;
	box-shadow: 0 40px 80px -20px rgba(0, 0, 0, .8) !important;
}

.fusion-modal.iawf-modal .modal-header {
	min-height: 0;
	padding: 0;
	border: 0;
}

.fusion-modal.iawf-modal .modal-header .modal-title {
	display: none;
}

.fusion-modal.iawf-modal .modal-header .close {
	position: absolute;
	top: 16px;
	right: 16px;
	z-index: 2;
	width: 44px;
	height: 44px;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: var(--awb-color5);
	color: var(--awb-color8);
	font-family: var(--awb-typography3-font-family);
	font-size: 22px;
	font-weight: 400;
	line-height: 44px;
	text-align: center;
	text-shadow: none;
	opacity: 1;
	float: none;
	cursor: pointer;
	transition: background-color .25s, color .25s;
}

.fusion-modal.iawf-modal .modal-header .close:focus {
	outline: none;
}

.fusion-modal.iawf-modal .modal-header .close:focus-visible {
	background: var(--awb-color8);
	color: var(--awb-color1);
	opacity: 1;
}

@media (hover: hover) and (pointer: fine) {
	.fusion-modal.iawf-modal .modal-header .close:hover {
		background: var(--awb-color8);
		color: var(--awb-color1);
		opacity: 1;
	}
}

.fusion-modal.iawf-modal .modal-body {
	display: flex;
	flex-direction: column;
	gap: 24px;
	padding: 0;
}

.fusion-modal.iawf-modal .modal-body > p:empty,
.fusion-modal.iawf-modal .modal-body > br {
	display: none;
}

.fusion-modal.iawf-modal .iawf-modal__head {
	display: flex;
	flex-direction: column;
	gap: 14px;
	padding-right: 48px;
}

.fusion-modal.iawf-modal .iawf-modal__eyebrow {
	margin: 0;
	font-family: var(--awb-typography3-font-family);
	font-size: 13px;
	font-weight: 700;
	font-style: normal;
	line-height: 1.2;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: var(--awb-color5);
}

.fusion-modal.iawf-modal .iawf-modal__title {
	margin: 0;
	font-family: var(--awb-typography1-font-family);
	font-size: clamp(32px, 4vw, 52px);
	font-weight: 800;
	font-style: normal;
	line-height: .92;
	letter-spacing: -.02em;
	text-transform: uppercase;
	color: var(--awb-color8);
}

.fusion-modal.iawf-modal .iawf-modal__text {
	margin: 0;
	font-size: clamp(15px, 1.1vw, 16px);
	font-style: normal;
	line-height: 1.65;
	color: var(--awb-color7);
	text-wrap: pretty;
}

.fusion-modal.iawf-modal .iawf-modal__title-row {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 8px 16px;
}

.fusion-modal.iawf-modal .iawf-modal__price {
	font-family: var(--awb-typography1-font-family);
	font-size: clamp(28px, 3vw, 40px);
	font-weight: 800;
	font-style: normal;
	line-height: 1;
	letter-spacing: -.015em;
	color: var(--awb-color5);
}

.fusion-modal.iawf-modal .iawf-modal__pills {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.fusion-modal.iawf-modal .iawf-modal__pills li {
	display: flex;
	align-items: center;
	gap: 8px;
	height: 34px;
	margin: 0;
	padding: 0 14px;
	border: 1px solid var(--awb-color3);
	border-radius: 999px;
	font-size: 13px;
	font-weight: 600;
	font-style: normal;
	line-height: 1;
	color: #e6e6e6;
}

.fusion-modal.iawf-modal .iawf-modal__pills li::before {
	content: "";
	flex: 0 0 auto;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--awb-color5);
}

/* A page form shown in the popup (moved in by the iawf-modal script) takes
   the popup's inner card, whatever its own Form CSS Class draws on the page. */
.fusion-modal.iawf-modal .gform_wrapper form {
	padding: clamp(18px, 2.4vw, 28px) !important;
	border: 1px solid var(--awb-color9) !important;
	border-radius: 20px !important;
	background: var(--awb-color2) !important;
	-webkit-backdrop-filter: none !important;
	backdrop-filter: none !important;
}

.fusion-modal.iawf-modal .gform_wrapper {
	margin: 0 !important;
}

body:has(.fusion-modal.iawf-modal:is(.in, .show)) .modal-backdrop {
	background: rgba(0, 0, 0, .6) !important;
	opacity: 1 !important;
	-webkit-backdrop-filter: blur(8px);
	backdrop-filter: blur(8px);
}

/* Fit the screen: spacing, title, fields and the submit shrink with the
   window height (full design size from about 900px tall), so the whole card
   shows without scrolling on laptop screens. Only on very short windows does
   the card scroll inside its own border. */
.fusion-modal.iawf-modal .modal-content {
	padding: clamp(20px, min(4vw, 5svh), 48px);
}

.fusion-modal.iawf-modal .modal-body {
	gap: clamp(14px, 2.6svh, 24px);
}

.fusion-modal.iawf-modal .iawf-modal__head {
	gap: clamp(8px, 1.5svh, 14px);
}

.fusion-modal.iawf-modal .iawf-modal__title {
	font-size: clamp(28px, min(4vw, 5.6svh), 52px);
}

.fusion-modal.iawf-modal .iawf-modal__price {
	font-size: clamp(24px, min(3vw, 4.4svh), 40px);
}

.fusion-modal.iawf-modal .iawf-modal__pills li {
	height: clamp(30px, 3.8svh, 34px);
}

.fusion-modal.iawf-modal .gform_wrapper form {
	padding: clamp(16px, min(2.4vw, 3svh), 28px) !important;
}

.fusion-modal.iawf-modal .gform_wrapper .gform_fields {
	row-gap: clamp(8px, 1.3svh, 12px) !important;
}

.fusion-modal.iawf-modal .gform_wrapper .gfield:not(.hidden_label) > .gfield_label {
	margin-bottom: clamp(4px, .7svh, 6px) !important;
}

.fusion-modal.iawf-modal .gform_wrapper .gfield input:is([type="text"], [type="email"], [type="tel"]) {
	min-height: clamp(44px, 6svh, 54px) !important;
	height: clamp(44px, 6svh, 54px) !important;
}

.fusion-modal.iawf-modal .gform_wrapper .gfield--type-section:not(:first-child) {
	margin-top: 0 !important;
	padding-top: clamp(12px, 2.2svh, 20px) !important;
}

.fusion-modal.iawf-modal .gform_wrapper .gfield--type-section:not(.gfield--type-section ~ .gfield--type-section) {
	padding-top: 0 !important;
	border-top: 0 !important;
}

.fusion-modal.iawf-modal .gform_wrapper .gform_footer {
	margin-top: clamp(12px, 2.2svh, 20px) !important;
	gap: clamp(8px, 1.3svh, 12px) !important;
}

.fusion-modal.iawf-modal .gform_wrapper .gform_footer button.gform_button.button {
	padding-top: clamp(16px, 2.5svh, 22.5px) !important;
	padding-bottom: clamp(16px, 2.5svh, 22.5px) !important;
}

@media (prefers-reduced-motion: reduce) {
	.fusion-modal.iawf-modal .modal-header .close {
		transition: none;
	}
}

/* ==========================================================================
   Reduced motion: keep every resting and end state, drop the movement.
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
	.fusion-button.iawf-btn,
	.fusion-button.iawf-btn .fusion-button-text {
		transition: background-color .25s, color .25s, box-shadow .25s;
	}

	.fusion-button.iawf-btn .fusion-button-text::before,
	.fusion-button.iawf-btn .fusion-button-text::after,
	.fusion-button.iawf-btn::after,
	.gform_wrapper .gform_footer button.gform_button.button .iawf-chev::before,
	.gform_wrapper .gform_footer button.gform_button.button .iawf-chev::after,
	.gform_wrapper .gform_footer button.gform_button.button::after {
		animation: none;
	}

	body .fusion-button.iawf-link-arrow::before,
	a.iawf-link-arrow:not(.fusion-button)::before,
	a.iawf-directions::before {
		transition: opacity .3s;
		left: -14px;
		right: -14px;
	}
}

/* ==========================================================================
   7. Gravity Forms (GRAVITY-FORMS-INITIAL v4.5, Prompt 04)
   Baseline: every form, styled from .gform_wrapper, no per-form class needed.
   !important on every visual property: Orbital prints per-form ID styles.
   Form-level classes render on the wrapper with _wrapper added.
   No theme class (gform-theme--*) and no form or field IDs in any selector.
   Submit button: Section 3 adapter. Footer note: inc/site-forms.php prints
   p.iawf-form-note from the form Description.
   ========================================================================== */

/* --- 7.1 Card ----------------------------------------------------------- */

.gform_wrapper form {
	box-sizing: border-box !important;
	margin: 0 !important;
	padding: clamp(20px, 2.6vw, 40px) !important;
	background: var(--awb-color2) !important;
	border: 1px solid var(--awb-color3) !important;
	border-radius: 24px !important;
	font-family: inherit !important;
}

/* Popup forms (Membership, Refer a Friend) */
.gform_wrapper.iawf-form--compact_wrapper form {
	padding: clamp(18px, 2.4vw, 28px) !important;
	border-color: var(--awb-color9) !important;
	border-radius: 20px !important;
}

/* Over a photo (21-Day Reset hero): black at 88% with a 10px blur */
.gform_wrapper.iawf-form--glass_wrapper form {
	padding: clamp(22px, 2.6vw, 40px) !important;
	background: color-mix(in srgb, var(--awb-color1) 88%, transparent) !important;
	-webkit-backdrop-filter: blur(10px) !important;
	backdrop-filter: blur(10px) !important;
}

/* --- 7.2 Field grid ----------------------------------------------------- */

.gform_wrapper .gform_fields {
	row-gap: 12px !important;
	column-gap: 12px !important;
}

.gform_wrapper .gfield {
	margin: 0 !important;
	padding: 0 !important;
	min-width: 0 !important;
}

/* Email + phone rows line up on the input, not the label */
.gform_wrapper .gfield--type-email,
.gform_wrapper .gfield--type-phone {
	align-self: end !important;
}

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

.gform_wrapper .gfield:not(.hidden_label) > .gfield_label,
.gform_wrapper .gform-field-label--type-sub {
	display: block !important;
	margin: 0 0 6px !important;
	padding: 0 !important;
	font-family: inherit !important;
	font-size: 14px !important;
	font-weight: 400 !important;
	line-height: 1.4 !important;
	letter-spacing: 0 !important;
	text-transform: none !important;
	color: var(--awb-color7) !important;
}

/* Hidden labels stay available to screen readers */
.gform_wrapper .gfield.hidden_label > .gfield_label,
.gform_wrapper .gfield_required {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	margin: -1px !important;
	padding: 0 !important;
	overflow: hidden !important;
	clip: rect(0 0 0 0) !important;
	clip-path: inset(50%) !important;
	white-space: nowrap !important;
	border: 0 !important;
}

/* "(optional)" after the label of fields that are not required */
.gform_wrapper .gfield.iawf-optional > .gfield_label::after {
	content: " (optional)";
	color: var(--awb-color6) !important;
	white-space: nowrap;
}

/* --- 7.4 Inputs, select, textarea --------------------------------------- */

.gform_wrapper .gfield input:is([type="text"], [type="email"], [type="tel"], [type="url"], [type="number"], [type="password"]),
.gform_wrapper .gfield select,
.gform_wrapper .gfield textarea {
	box-sizing: border-box !important;
	width: 100% !important;
	max-width: none !important;
	min-height: 54px !important;
	margin: 0 !important;
	padding: 0 18px !important;
	background: var(--awb-color1) !important;
	color: var(--awb-color8) !important;
	border: 1px solid var(--awb-color6) !important; /* Text Subtle: 5.3:1 on black (WCAG 1.4.11 needs 3:1; color4 was 2:1) */
	border-radius: 14px !important;
	box-shadow: none !important;
	outline: none !important;
	font-family: inherit !important;
	font-size: 16px !important;
	font-weight: 400 !important;
	line-height: 1.5 !important;
	transition: border-color .2s !important;
}

.gform_wrapper .gfield textarea {
	height: 148px !important; /* 5 rows, as designed */
	min-height: 148px !important;
	padding: 14px 18px !important;
	resize: none !important;
}

.gform_wrapper .gfield.iawf-textarea--short textarea {
	height: 100px !important; /* 3 rows */
	min-height: 100px !important;
}

@media (hover: hover) and (pointer: fine) {
	.gform_wrapper .gfield input:is([type="text"], [type="email"], [type="tel"], [type="url"], [type="number"], [type="password"]):hover,
	.gform_wrapper .gfield select:hover,
	.gform_wrapper .gfield textarea:hover {
		border-color: var(--awb-color7) !important;
	}
}

.gform_wrapper .gfield input:is([type="text"], [type="email"], [type="tel"], [type="url"], [type="number"], [type="password"]):focus,
.gform_wrapper .gfield select:focus,
.gform_wrapper .gfield textarea:focus {
	border-color: var(--awb-color8) !important;
	outline: none !important;
	box-shadow: none !important;
}

.gform_wrapper .gfield ::placeholder {
	color: var(--awb-color6) !important;
	opacity: 1 !important;
}

/* Select: native control, design chevron from the shared icon */
.gform_wrapper .ginput_container_select {
	position: relative !important;
}

.gform_wrapper .gfield select {
	-webkit-appearance: none !important;
	appearance: none !important;
	height: 54px !important;
	padding: 14px 48px 14px 18px !important; /* 14 + 24 + 14 + 2px border = 54px, label centered */
	line-height: 24px !important;
	cursor: pointer !important;
}

/* Avada wraps Gravity Forms selects and adds its own arrow box after the
   select (seen on the target site as a black box under the field). The
   shared chevron below replaces it, so anything after the select inside the
   select container is hidden. */
.gform_wrapper .ginput_container_select select ~ * {
	display: none !important;
}

.gform_wrapper .gfield select option {
	background: var(--awb-color2) !important;
	color: var(--awb-color8) !important;
}

.gform_wrapper .ginput_container_select::after {
	content: "";
	position: absolute;
	top: calc(50% - 6px);
	right: 20px;
	width: 7px;
	height: 12px;
	background-color: var(--awb-color8);
	-webkit-mask: var(--iawf-icon-chevron) center / contain no-repeat;
	mask: var(--iawf-icon-chevron) center / contain no-repeat;
	transform: rotate(90deg);
	pointer-events: none;
}

/* Name field: First | Last side by side, stacked on phones */
.gform_wrapper .ginput_container--name {
	display: flex !important;
	flex-wrap: wrap !important;
	gap: 12px !important;
	margin: 0 !important;
}

.gform_wrapper .ginput_container--name > span {
	flex: 1 1 0 !important;
	min-width: 0 !important;
	max-width: none !important;
	margin: 0 !important;
	padding: 0 !important;
}

@media (max-width: 640px) {
	.gform_wrapper .ginput_container--name > span {
		flex-basis: 100% !important;
	}
}

/* --- 7.5 Descriptions, validation, confirmation ------------------------- */

.gform_wrapper .gfield_description:not(.validation_message) {
	margin: 8px 0 0 !important;
	padding: 0 !important;
	font-size: 13px !important;
	line-height: 1.5 !important;
	color: var(--awb-color6) !important;
}

.gform_wrapper .gfield_error input:is([type="text"], [type="email"], [type="tel"], [type="url"], [type="number"], [type="password"]),
.gform_wrapper .gfield_error select,
.gform_wrapper .gfield_error textarea {
	border-color: var(--awb-color5) !important;
}

.gform_wrapper .gfield_error .gfield_label,
.gform_wrapper .gfield_error .gform-field-label--type-sub {
	color: var(--awb-color7) !important;
}

.gform_wrapper .gfield_validation_message,
.gform_wrapper .validation_message {
	margin: 6px 0 0 !important;
	padding: 0 !important;
	background: none !important;
	border: 0 !important;
	font-size: 13px !important;
	line-height: 1.4 !important;
	color: var(--awb-color8) !important; /* white: red 13px text on the color2 card is 4.2:1 (WCAG 1.4.3 needs 4.5:1); the red field border still marks the error */
	overflow-wrap: anywhere !important;
}

.gform_wrapper .gform_validation_errors {
	margin: 0 0 16px !important;
	padding: 14px 18px !important;
	background: none !important;
	border: 1px solid var(--awb-color5) !important;
	border-radius: 14px !important;
	box-shadow: none !important;
}

.gform_wrapper .gform_validation_errors .gform_submission_error {
	margin: 0 !important;
	font-family: inherit !important;
	font-size: 15px !important;
	font-weight: 600 !important;
	line-height: 1.4 !important;
	letter-spacing: 0 !important;
	text-transform: none !important;
	color: var(--awb-color8) !important;
}

.gform_wrapper .gform_validation_errors .gform-icon {
	color: var(--awb-color5) !important;
}

.gform_wrapper .gform_validation_errors ol,
.gform_wrapper .gform_validation_errors li,
.gform_wrapper .gform_validation_errors a {
	font-size: 14px !important;
	color: var(--awb-color7) !important;
}

.gform_confirmation_message {
	font-size: 16px !important;
	line-height: 1.65 !important;
	color: var(--awb-color8) !important;
}

/* --- 7.6 Footer and note ------------------------------------------------ */

.gform_wrapper .gform_footer {
	position: relative !important;
	display: flex !important;
	flex-direction: column !important;
	align-items: stretch !important;
	gap: 12px !important;
	margin: 20px 0 0 !important;
	padding: 0 !important;
	border: 0 !important;
}

.gform_wrapper .gform_footer .iawf-form-note {
	margin: 0 !important;
	padding: 0 !important;
	font-size: 14px !important;
	line-height: 1.5 !important;
	color: var(--awb-color6) !important;
	text-align: center !important;
}

/* --- 7.7 Section headings (Refer a Friend: "You", "Your friend") -------- */

.gform_wrapper .gfield--type-section {
	border: 0 !important;
}

.gform_wrapper .gfield--type-section:not(:first-child) {
	margin-top: 8px !important;
	padding-top: 20px !important;
	border-top: 1px solid var(--awb-color3) !important;
}

/* The first section heading never draws the divider, even when Gravity
   Forms prints a hidden field or notice before it (it is not :first-child). */
.gform_wrapper .gfield--type-section:not(.gfield--type-section ~ .gfield--type-section) {
	margin-top: 0 !important;
	padding-top: 0 !important;
	border-top: 0 !important;
}

.gform_wrapper .gsection_title {
	margin: 0 !important;
	padding: 0 !important;
	font-family: inherit !important;
	font-size: 13px !important;
	font-weight: 700 !important;
	line-height: 1.2 !important;
	letter-spacing: .14em !important;
	text-transform: uppercase !important;
	color: var(--awb-color8) !important;
}

/* --- 7.8 Choice buttons: tabs, slots, pills ----------------------------- */
/* Native radios stay in place (focusable, keyboard and validation intact);
   only the label is drawn. */

.gform_wrapper :is(.iawf-tabs, .iawf-slots, .iawf-pills) .gchoice {
	position: relative !important;
	display: block !important;
	margin: 0 !important;
	padding: 0 !important;
}

.gform_wrapper :is(.iawf-tabs, .iawf-slots, .iawf-pills) .gfield-choice-input {
	position: absolute !important;
	top: 0 !important;
	left: 0 !important;
	width: 1px !important;
	height: 1px !important;
	margin: 0 !important;
	opacity: 0 !important;
	pointer-events: none !important;
}

.gform_wrapper :is(.iawf-tabs, .iawf-slots, .iawf-pills) .gchoice label {
	box-sizing: border-box !important;
	margin: 0 !important;
	max-width: none !important;
	font-family: inherit !important;
	letter-spacing: 0 !important;
	white-space: nowrap !important;
	cursor: pointer !important;
}

.gform_wrapper :is(.iawf-tabs, .iawf-slots, .iawf-pills) .gchoice label::before,
.gform_wrapper :is(.iawf-tabs, .iawf-slots, .iawf-pills) .gchoice label::after {
	display: none !important;
}

.gform_wrapper :is(.iawf-tabs, .iawf-slots, .iawf-pills) .gfield-choice-input:focus-visible + label {
	outline: 2px solid var(--awb-color8) !important;
	outline-offset: 3px !important;
}

/* Tabs: "What are you booking?" (Book Now) */
/* Orbital lays choices out as a column (flex-direction: column), so the row
   direction and the choice width are claimed here (Book Now live-site fix). */
.gform_wrapper .gfield.iawf-tabs .gfield_radio {
	display: flex !important;
	flex-direction: row !important;
	flex-wrap: nowrap !important;
	align-items: flex-end !important;
	gap: clamp(20px, 3vw, 48px) !important;
	overflow-x: auto !important;
	scrollbar-width: none !important;
	box-shadow: inset 0 -1px 0 var(--awb-color3) !important;
}

.gform_wrapper .gfield.iawf-tabs .gfield_radio::-webkit-scrollbar {
	display: none;
}

.gform_wrapper .gfield.iawf-tabs .gchoice {
	flex: 0 0 auto !important;
	width: auto !important;
	margin: 0 !important;
}

.gform_wrapper .gfield.iawf-tabs .gchoice label {
	display: block !important;
	padding: 0 0 18px !important;
	border: 0 !important;
	border-bottom: 3px solid transparent !important;
	background: none !important;
	font-family: var(--awb-typography1-font-family) !important;
	font-size: clamp(18px, 1.8vw, 28px) !important;
	font-weight: 800 !important;
	line-height: 1 !important;
	text-transform: uppercase !important;
	color: var(--awb-color8) !important;
	opacity: .4 !important; /* white at 40% on black: the design's inactive tab */
	transition: opacity .25s, border-color .25s !important;
}

.gform_wrapper .gfield.iawf-tabs .gfield-choice-input:checked + label {
	opacity: 1 !important;
	border-bottom-color: var(--awb-color5) !important;
}

@media (hover: hover) and (pointer: fine) {
	.gform_wrapper .gfield.iawf-tabs .gchoice label:hover {
		opacity: 1 !important;
	}
}

@media (max-width: 1024px) {
	.gform_wrapper .gfield.iawf-tabs .gfield_radio {
		justify-content: safe center !important;
	}
}

/* Time slots */
.gform_wrapper .gfield.iawf-slots .gfield_radio {
	display: grid !important;
	grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
	gap: 10px !important;
}

.gform_wrapper .gfield.iawf-slots--many .gfield_radio {
	grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
}

.gform_wrapper .gfield.iawf-slots .gchoice label {
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	width: 100% !important;
	min-height: 60px !important;
	padding: 0 6px !important;
	background: var(--awb-color1) !important;
	border: 1.5px solid var(--awb-color4) !important;
	border-radius: 14px !important;
	font-size: 17px !important;
	font-weight: 700 !important;
	line-height: 1.2 !important;
	color: var(--awb-color8) !important;
	transition: background-color .25s, border-color .25s !important;
}

.gform_wrapper .gfield.iawf-slots--many .gchoice label {
	min-height: 52px !important;
	font-size: 16px !important;
}

.gform_wrapper .iawf-day-label {
	margin: 0 0 12px !important;
	font-size: 13px !important;
	font-weight: 700 !important;
	line-height: 1.2 !important;
	letter-spacing: .14em !important;
	text-transform: uppercase !important;
	color: var(--awb-color7) !important;
}

/* Day + time slots (Homepage Quick Booking): 4 per row (2 on phones),
   each choice a two-line button. Choice text in the form import:
   <span class="iawf-slot-day">Mon-Fri</span><span class="iawf-slot-time">5:30 AM</span> */
.gform_wrapper .gfield.iawf-slots--days .gfield_radio {
	grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
}

.gform_wrapper .gfield.iawf-slots--days .gchoice label {
	flex-direction: column !important;
	gap: 3px !important;
	min-height: 76px !important;
	padding: 10px 8px !important;
	border-radius: 16px !important;
}

.gform_wrapper .gfield.iawf-slots--days .iawf-slot-day {
	font-size: clamp(11px, .95vw, 13px);
	font-weight: 600;
	letter-spacing: .06em;
	text-transform: uppercase;
	opacity: .75;
}

.gform_wrapper .gfield.iawf-slots--days .iawf-slot-time {
	font-size: clamp(17px, 1.5vw, 22px);
	font-weight: 700;
}

@media (max-width: 640px) {
	.gform_wrapper .gfield.iawf-slots--days .gfield_radio {
		grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
	}

	.gform_wrapper .gfield.iawf-slots--days .gchoice label {
		min-height: 72px !important;
	}

	.gform_wrapper .gfield.iawf-slots--days .iawf-slot-time {
		font-size: 20px;
	}
}

/* Step legends ("1 - Choose a class time", "2 - Your details"): the field
   label of a choice field, or a Section field, drawn as a small grey
   uppercase legend with no divider. Host: field CSS Class iawf-legend. */
.gform_wrapper .gfield.iawf-legend > .gfield_label,
.gform_wrapper .gfield--type-section.iawf-legend .gsection_title {
	margin: 0 0 14px !important;
	padding: 0 !important;
	font-size: 13px !important;
	font-weight: 700 !important;
	line-height: 1.2 !important;
	letter-spacing: .14em !important;
	text-transform: uppercase !important;
	color: var(--awb-color7) !important;
}

.gform_wrapper .gfield--type-section.iawf-legend,
.gform_wrapper .gfield--type-section.iawf-legend:not(:first-child) {
	margin-top: 12px !important;
	margin-bottom: 0 !important;
	padding-top: 0 !important;
	border-top: 0 !important;
}

.gform_wrapper .gfield--type-section.iawf-legend .gsection_title {
	margin-bottom: 2px !important;
}

/* Goal pills (Nutrition) */
.gform_wrapper .gfield.iawf-pills .gfield_radio {
	display: flex !important;
	flex-wrap: wrap !important;
	gap: 8px !important;
}

.gform_wrapper .gfield.iawf-pills > .gfield_label {
	margin-bottom: 10px !important;
}

.gform_wrapper .gfield.iawf-pills .gchoice label {
	display: flex !important;
	align-items: center !important;
	min-height: 46px !important;
	padding: 0 18px !important;
	background: var(--awb-color1) !important;
	border: 1.5px solid var(--awb-color4) !important;
	border-radius: 999px !important;
	font-size: 15px !important;
	font-weight: 600 !important;
	line-height: 1.2 !important;
	color: var(--awb-color8) !important;
	transition: background-color .2s, border-color .2s !important;
}

.gform_wrapper :is(.iawf-slots, .iawf-pills) .gfield-choice-input:checked + label {
	background: var(--awb-color5) !important;
	border-color: var(--awb-color5) !important;
}

@media (hover: hover) and (pointer: fine) {
	.gform_wrapper :is(.iawf-slots, .iawf-pills) .gfield-choice-input:not(:checked):not(:disabled) + label:hover {
		border-color: var(--awb-color8) !important;
	}
}

/* Fully booked time (availability from inc/site-forms.php): same dim
   treatment as a closed calendar day, not clickable. */
.gform_wrapper .gfield.iawf-slots .gfield-choice-input:disabled + label {
	background: transparent !important;
	border-color: var(--awb-color3) !important;
	color: var(--awb-color4) !important;
	cursor: default !important;
	pointer-events: none !important;
}

/* --- 7.9 Booking layout (Free Class, Book Now) -------------------------- */
/* Desktop: calendar on the left, time, details and submit on the right, all
   in one card. Book Now's tabs sit above the card. The form is the grid;
   .gform-body and .gform_fields pass their children through
   (display: contents). form::before (absolutely positioned on its grid
   area) draws the card, form::after reserves the rows above it. Local layout properties only (--iawf-bk-*). */

.gform_wrapper.iawf-booking_wrapper form {
	--iawf-bk-pad-x: clamp(20px, 2.6vw, 40px);
	--iawf-bk-pad-y: clamp(20px, 2.6vw, 40px);
	--iawf-bk-gap: clamp(24px, 3vw, 48px);
	position: relative !important;
	isolation: isolate !important;
	display: grid !important;
	grid-template-columns:
		[card-start] var(--iawf-bk-pad-x)
		[cal-start] minmax(0, 3fr)
		[cal-end] var(--iawf-bk-gap)
		[right-start] minmax(0, 2fr)
		[r-mid] 12px
		[r-phone] minmax(0, 1fr)
		[right-end] var(--iawf-bk-pad-x)
		[card-end] !important;
	grid-template-rows:
		[errors] auto
		[tabs] auto
		[card-top] var(--iawf-bk-pad-y)
		[content-start] repeat(16, auto)
		[filler] 1fr
		[content-end] var(--iawf-bk-pad-y)
		[card-bottom] !important;
	row-gap: 0 !important;
	column-gap: 0 !important;
	padding: 0 !important;
	background: none !important;
	border: 0 !important;
	border-radius: 0 !important;
}

.gform_wrapper.iawf-booking_wrapper form::before {
	content: "";
	position: absolute; /* drawn over its grid area without occupying cells */
	inset: 0;
	grid-column: card-start / card-end;
	grid-row: card-top / card-bottom;
	z-index: -1;
	background: var(--awb-color2);
	border: 1px solid var(--awb-color3);
	border-radius: 24px;
}

.gform_wrapper.iawf-booking_wrapper form::after {
	content: "";
	grid-column: card-start / card-end;
	grid-row: errors / content-start;
}

.gform_wrapper.iawf-booking_wrapper :is(.gform-body, .gform_body, .gform_fields) {
	display: contents !important;
}

.gform_wrapper.iawf-booking_wrapper .gform_validation_errors {
	grid-column: card-start / card-end !important;
	grid-row: errors !important;
}

.gform_wrapper.iawf-booking_wrapper .gform_fields > .gfield {
	grid-column: right-start / right-end !important;
	grid-row: auto !important;
	margin: 0 0 12px !important;
}

.gform_wrapper.iawf-booking_wrapper .gform_fields > .gfield--type-hidden {
	display: none !important;
}

.gform_wrapper.iawf-booking_wrapper .gform_fields > .gfield.iawf-tabs {
	grid-column: card-start / card-end !important;
	grid-row: tabs !important;
	margin: 0 0 clamp(28px, 3.4vw, 48px) !important;
}

.gform_wrapper.iawf-booking_wrapper .gform_fields > .gfield.iawf-calendar {
	grid-column: cal-start / cal-end !important;
	grid-row: content-start / content-end !important;
	margin: 0 !important;
}

.gform_wrapper.iawf-booking_wrapper .gform_fields > .gfield.iawf-slots {
	margin-bottom: 20px !important;
}

.gform_wrapper.iawf-booking_wrapper .gform_fields > .gfield--type-name {
	padding-top: 20px !important;
	border-top: 1px solid var(--awb-color3) !important;
}

.gform_wrapper.iawf-booking_wrapper .gform_fields > .gfield--type-email {
	grid-column: right-start / r-mid !important;
}

.gform_wrapper.iawf-booking_wrapper .gform_fields > .gfield--type-phone {
	grid-column: r-phone / right-end !important;
}

.gform_wrapper.iawf-booking_wrapper .gform_fields > .gfield--type-html {
	margin: 8px 0 8px !important;
}

.gform_wrapper.iawf-booking_wrapper:not(.iawf-booking-ready) .gform_fields > .gfield--type-html {
	display: none !important;
}

.gform_wrapper.iawf-booking_wrapper .gform_footer {
	grid-column: right-start / right-end !important;
	margin: 12px 0 0 !important;
}

.gform_wrapper .iawf-booking-summary {
	margin: 0 !important;
	font-size: 15px !important;
	line-height: 1.5 !important;
	color: var(--awb-color7) !important;
}

.gform_wrapper .iawf-booking-summary__value {
	font-weight: 700 !important;
	color: var(--awb-color8) !important;
}

/* Session note outside the form (Book Now heading row): a Text Block with
   CSS Class iawf-booking-note holds one <p data-iawf-session="Choice text">
   per tab choice. The script shows the paragraph of the checked tab; before
   it runs (or without JavaScript) only the first paragraph shows. */
.fusion-text.iawf-booking-note > [data-iawf-session][hidden],
.fusion-text.iawf-booking-note:not(.iawf-booking-note--ready) > [data-iawf-session] ~ [data-iawf-session] {
	display: none !important;
}

@media (max-width: 1024px) {
	.gform_wrapper.iawf-booking_wrapper form {
		grid-template-columns:
			[card-start] var(--iawf-bk-pad-x)
			[cal-start right-start] minmax(0, 2fr)
			[r-mid] 12px
			[r-phone] minmax(0, 1fr)
			[cal-end right-end] var(--iawf-bk-pad-x)
			[card-end] !important;
	}

	.gform_wrapper.iawf-booking_wrapper .gform_fields > .gfield.iawf-calendar {
		grid-row: auto !important;
		margin-bottom: var(--iawf-bk-gap) !important;
	}
}

@media (max-width: 640px) {
	.gform_wrapper.iawf-booking_wrapper form {
		--iawf-bk-pad-x: 8px;
		--iawf-bk-pad-y: 16px;
	}

	.gform_wrapper.iawf-booking_wrapper .gform_fields > :is(.gfield--type-email, .gfield--type-phone) {
		grid-column: right-start / right-end !important;
	}

	.gform_wrapper .gfield.iawf-slots--many .gfield_radio {
		grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
	}
}

/* Stacked card at every width (calendar on top, then time, details and
   submit) for a booking form placed in a narrow column. Host: the Column's
   CSS Class iawf-booking-stack (homepage booking section). Same geometry as
   the 1024px rules above. */
.iawf-booking-stack .gform_wrapper.iawf-booking_wrapper form {
	grid-template-columns:
		[card-start] var(--iawf-bk-pad-x)
		[cal-start right-start] minmax(0, 2fr)
		[r-mid] 12px
		[r-phone] minmax(0, 1fr)
		[cal-end right-end] var(--iawf-bk-pad-x)
		[card-end] !important;
}

.iawf-booking-stack .gform_wrapper.iawf-booking_wrapper .gform_fields > .gfield.iawf-calendar {
	grid-row: auto !important;
	margin-bottom: var(--iawf-bk-gap) !important;
}

/* --- 7.10 Inline booking calendar (built by iawf-components.js) --------- */

.gform_wrapper .gfield.iawf-calendar.iawf-cal-ready .ginput_container_date {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	overflow: hidden !important;
	clip-path: inset(50%) !important;
}

.gform_wrapper .iawf-cal {
	display: flex !important;
	flex-direction: column !important;
	gap: 16px !important;
}

.gform_wrapper .iawf-cal__head {
	display: flex !important;
	align-items: center !important;
	justify-content: space-between !important;
	gap: 16px !important;
}

.gform_wrapper .iawf-cal__title {
	margin: 0 !important;
	font-family: var(--awb-typography1-font-family) !important;
	font-size: clamp(22px, 1.8vw, 28px) !important;
	font-weight: 800 !important;
	line-height: 1 !important;
	letter-spacing: 0 !important;
	text-transform: uppercase !important;
	color: var(--awb-color8) !important;
}

.gform_wrapper .iawf-cal__nav {
	display: flex !important;
	gap: 8px !important;
}

.gform_wrapper .iawf-cal__btn {
	position: relative !important;
	width: 44px !important;
	height: 44px !important;
	min-height: 0 !important;
	margin: 0 !important;
	padding: 0 !important;
	background: transparent !important;
	border: 1.5px solid var(--awb-color4) !important;
	border-radius: 50% !important;
	box-shadow: none !important;
	cursor: pointer !important;
	transition: border-color .25s !important;
}

.gform_wrapper .iawf-cal__btn::before {
	content: "" !important;
	display: block !important;
	position: absolute !important;
	inset: 0 !important;
	margin: auto !important;
	width: 16px !important;
	height: 12px !important;
	opacity: 1 !important;
	background: var(--awb-color8) !important;
	-webkit-mask: var(--iawf-icon-arrow) center / contain no-repeat !important;
	mask: var(--iawf-icon-arrow) center / contain no-repeat !important;
}

.gform_wrapper .iawf-cal__btn--prev::before {
	transform: rotate(180deg) !important;
}

.gform_wrapper .iawf-cal__btn:disabled {
	opacity: .35 !important;
	cursor: default !important;
}

.gform_wrapper .iawf-cal__grid {
	display: grid !important;
	grid-template-columns: repeat(7, minmax(0, 1fr)) !important;
	gap: 6px !important;
}

.gform_wrapper .iawf-cal__dow {
	padding: 4px 0 !important;
	font-size: 12px !important;
	font-weight: 700 !important;
	line-height: 1.2 !important;
	letter-spacing: .08em !important;
	text-align: center !important;
	color: var(--awb-color6) !important;
}

.gform_wrapper .iawf-cal__day {
	box-sizing: border-box !important;
	width: 100% !important;
	height: auto !important;
	min-height: 0 !important;
	max-height: 60px !important;
	aspect-ratio: 1 / 1 !important;
	margin: 0 !important;
	padding: 0 !important;
	background: transparent !important;
	border: 1.5px solid var(--awb-color4) !important;
	border-radius: 14px !important;
	box-shadow: none !important;
	font-family: inherit !important;
	font-size: clamp(14px, 1.1vw, 16px) !important;
	font-weight: 600 !important;
	line-height: 1 !important;
	color: var(--awb-color8) !important;
	cursor: pointer !important;
	transition: background-color .2s, border-color .2s !important;
}

.gform_wrapper .iawf-cal__day:disabled {
	border-color: transparent !important;
	color: var(--awb-color4) !important;
	cursor: default !important;
}

.gform_wrapper .iawf-cal__day--blank {
	visibility: hidden !important;
}

.gform_wrapper .iawf-cal__day[aria-pressed="true"] {
	background: var(--awb-color5) !important;
	border-color: var(--awb-color5) !important;
}

.gform_wrapper :is(.iawf-cal__day, .iawf-cal__btn):focus {
	outline: none !important;
	box-shadow: none !important;
}

.gform_wrapper :is(.iawf-cal__day, .iawf-cal__btn):focus-visible {
	outline: 2px solid var(--awb-color8) !important;
	outline-offset: 2px !important;
}

@media (hover: hover) and (pointer: fine) {
	.gform_wrapper .iawf-cal__btn:not(:disabled):hover,
	.gform_wrapper .iawf-cal__day:not(:disabled):not([aria-pressed="true"]):hover {
		border-color: var(--awb-color8) !important;
	}
}

@media (max-width: 640px) {
	.gform_wrapper .iawf-cal__grid {
		gap: 2px !important;
	}

	.gform_wrapper .iawf-cal__day {
		aspect-ratio: auto !important;
		height: 46px !important;
		border-radius: 12px !important;
	}
}

@media (prefers-reduced-motion: reduce) {
	.gform_wrapper :is(.iawf-tabs, .iawf-slots, .iawf-pills) .gchoice label,
	.gform_wrapper :is(.iawf-cal__day, .iawf-cal__btn),
	.gform_wrapper .gfield :is(input, select, textarea) {
		transition: none !important;
	}
}