/* Calendar / registration flow -- pairs with the existing .ai-page theme
   styles already on the page (ai-title, ai-text, ai-btn, ai-btn-gold,
   ai-btn-blue, etc.). This file only adds classes new to this feature. */

.ai-cal-section { text-align: left; }

.ai-cal-wrap { max-width: 820px; margin: 30px auto 0; text-align: left; }
.ai-cal-wrap .fc {
	font-family: Arial, sans-serif;
	/* FullCalendar's own theme colors -- overrides its library-default blue
	   (nav buttons, "today" highlight, focus rings) to match the brand blue. */
	--fc-button-bg-color: #123b6d;
	--fc-button-border-color: #123b6d;
	--fc-button-hover-bg-color: #0d2a4f;
	--fc-button-hover-border-color: #0d2a4f;
	--fc-button-active-bg-color: #0d2a4f;
	--fc-button-active-border-color: #0d2a4f;
	--fc-today-bg-color: #e8f1ff;
}
.ai-cal-wrap .fc-daygrid-day.ai-has-session { cursor: pointer; }
.ai-cal-wrap .fc-daygrid-day.ai-has-session .fc-daygrid-day-number { font-weight: 800; color: #123b6d; }
.ai-cal-wrap .fc .fc-toolbar-title {
	color: #123b6d !important;
}


.ai-slot-detail { display: none; max-width: 520px; margin: 20px auto; background: #fff; border-radius: 14px; padding: 22px 26px; box-shadow: 0 8px 20px rgba(0,0,0,.08); text-align: left; }
.ai-slot-detail h4 { margin: 0 0 6px; color: #123b6d; font-size: 19px; }
.ai-slot-detail .ai-slot-time { color: #4b5563; font-size: 14px; margin-bottom: 14px; }

.ai-slot-toggle-btn { border: none; cursor: pointer; padding: 10px 20px; border-radius: 8px; font-weight: 700; }
.ai-slot-toggle-btn.select { background: #123b6d; color: #fff; }
.ai-slot-toggle-btn.remove { background: #e5e7eb; color: #123b6d; }

.ai-selected-summary { max-width: 820px; margin: 18px auto 0; text-align: center; }
.ai-chip { display: inline-flex; align-items: center; gap: 8px; background: #e8f1ff; color: #123b6d; padding: 8px 14px; border-radius: 20px; font-weight: 700; font-size: 14px; margin: 4px; }
.ai-chip button { border: none; background: none; color: #123b6d; cursor: pointer; font-weight: 900; }

.ai-slot-actions { text-align: center; margin-top: 22px; }

.ai-gf-embed { max-width: 640px; margin: 30px auto 0; background: #fff; border-radius: 16px; padding: 10px 30px 30px; box-shadow: 0 8px 22px rgba(0,0,0,.08); }

/* ---------- Gravity Forms overrides ----------
   Scoped to .ai-gf-embed only, so nothing else on the site is affected.
   Targets GF 2.5+'s Orbital markup (.gform_wrapper.gravity-theme). If your
   form is set to the "Legacy" theme instead of "Orbital" in the form's
   Styles panel, some of these selectors won't match -- switch it to
   Orbital first (see chat for where that setting lives). */

.ai-gf-embed .gform_wrapper {
	font-family: Arial, sans-serif;
	/* Orbital theme's own accent-color variable -- catches anything (focus
	   rings, checked radio/checkbox dots, progress bars, links) not already
	   covered by the specific overrides below. Verify on staging: property
	   name may differ slightly by GF version -- if any blue accents remain
	   after this, inspect the element in devtools to find the exact custom
	   property GF is using and I'll adjust this. */
	--gf-color-primary: #123b6d;
	--gf-color-primary-rgb: 18, 59, 109;
	--gf-color-primary-darker: #0d2a4f;
	--gf-color-primary-lighter: #e8f1ff;
}

.ai-gf-embed .gfield_label,
.ai-gf-embed legend.gfield_label {
	font-weight: 700;
	color: #123b6d;
	font-size: 15px;
}

.ai-gf-embed .ginput_container input[type=text],
.ai-gf-embed .ginput_container input[type=email],
.ai-gf-embed .ginput_container select,
.ai-gf-embed .ginput_container textarea {
	border: 1px solid #d1d5db !important;
	border-radius: 8px !important;
	padding: 10px !important;
	font-size: 15px !important;
}

.ai-gf-embed .ginput_container input:focus,
.ai-gf-embed .ginput_container select:focus,
.ai-gf-embed .ginput_container textarea:focus {
	border-color: #123b6d !important;
	outline: none !important;
	box-shadow: 0 0 0 2px rgba(18,59,109,.15) !important;
}

.ai-gf-embed .gform_footer,
.ai-gf-embed .gform_page_footer {
	text-align: center;
	border-top: none !important;
}

.ai-gf-embed .gform_button,
.ai-gf-embed input[type=submit] {
	background: #123b6d !important;
	color: #fff !important;
	border: none !important;
	border-radius: 8px !important;
	padding: 13px 30px !important;
	font-weight: 700 !important;
	font-size: 16px !important;
	cursor: pointer;
}
.ai-gf-embed .gform_button:hover,
.ai-gf-embed input[type=submit]:hover {
	background: #0d2a4f !important;
}

/* Hidden field (the one carrying the selected session) should never be
   visible even briefly during page load or GF's own field animations. */
.ai-gf-embed .gfield--type-hidden { display: none !important; }

.ai-gf-embed .validation_error {
	background: #fef2f2;
	color: #b91c1c;
	border-radius: 8px;
	padding: 12px 16px;
	font-weight: 700;
}

.ai-gf-embed .gform_confirmation_message {
	background: #eafbea;
	color: #166534;
	border-radius: 10px;
	padding: 16px;
	font-weight: 700;
	text-align: center;
}

/* Compound-field sub-labels (Name's First/Last, Email's Enter/Confirm) use a
   different class than the main .gfield_label, so this catches them too.
   Uses the #ai-gf-embed ID (not the .ai-gf-embed class) specifically because
   an ID selector guarantees higher specificity than GF's own class-based
   rules, regardless of which stylesheet happens to load second. */
#ai-gf-embed label {
	color: #123b6d !important;
}

/* The "Register for Selected Sessions" button isn't part of Gravity Forms --
   it's ours -- but something GF loads is still overriding it even with
   !important, which points to a specificity tie decided by load order.
   Targeting its own ID sidesteps that entirely. */
#ai-open-register-btn {
	background: #f4b400 !important;
	color: #111827 !important;
}