/**
 * Bioclear brand for MightyCourse (registration form, session cards, calendar).
 *
 * Plain CSS (not part of the Mix build) so it can ship without a theme
 * rebuild. Loaded by Bioclear_Matrix\Theme::enqueue_mightycourse() only on
 * pages where MightyCourse's own styles are enqueued, and always after them.
 *
 * MightyCourse is themed mainly through its --mc-* tokens; the few rules below
 * cover what tokens can't (button shape, tinted backgrounds, focus rings).
 * Rules marked !important mirror the plugin's own !important Divi guards.
 */

:root {
	--mc-blue:      var(--bioclear-corporate-purple, #8180BD); /* primary accent */
	--mc-blue-dk:   #64639f;                                   /* primary hover */
	--mc-green:     hsl(89, 52%, 51%);                         /* brand green (top bar) */
	--mc-gray:      #5f6f7c;                                   /* muted slate text */
	--mc-light:     #f7f7fb;
	--mc-border:    #e7e7f0;
	--mc-radius:    .5em;
	--mc-cal-color: var(--bioclear-corporate-purple, #8180BD);
}

/* Use the full width of the section the form sits in, as on the live site
   (the plugin's full stylesheet caps it at 760px), with a little side
   breathing room so cards don't touch the edges. */
.mc-registration-wrap {
	max-width: none;
	padding-left: clamp(1rem, 3vw, 1.5rem);
	padding-right: clamp(1rem, 3vw, 1.5rem);
}

/* Typography + text colour follow the site */
.mc-registration-wrap,
.mc-modal {
	font-family: inherit;
	color: var(--bioclear-corporate-grey, #3F5262);
}
.mc-registration-wrap h2,
.mc-registration-wrap h3,
.mc-session-card-name {
	color: var(--bioclear-corporate-grey, #3F5262);
}

/* Session cards: purple selected ring (plugin hard-codes a blue tint) */
.mc-session-card:has(input:checked),
.mc-session-card.is-checked,
.mc-addon-card:has(input:checked) {
	border-color: var(--mc-blue) !important;
	box-shadow: 0 0 0 3px rgba(129, 128, 189, .2) !important;
}
/* Start and end date on one line ("May 12, 2027 – May 15, 2027"); wraps
   only when the card is too narrow. The plugin stacks them by default. */
.mc-session-date {
	flex-direction: row;
	flex-wrap: wrap;
	column-gap: .3em;
	min-height: 0;
}
.mc-session-date-start {
	white-space: nowrap;
}
/* Price + seats row: no shaded background, just the divider line */
.mc-session-card-footer {
	background: transparent !important;
}
.mc-seats-left {
	background: #eef7e4;
	color: #3f6b14;
}

/* Fields match the site's forms: purple outline, rounded */
.mc-field-group input,
.mc-field-group select,
.mc-field-group textarea {
	border: 1px solid var(--bioclear-corporate-purple, #8180BD) !important;
	border-radius: .5em;
}
.mc-field-group input:focus,
.mc-field-group select:focus,
.mc-field-group textarea:focus {
	border-color: var(--mc-blue-dk) !important;
	box-shadow: 0 0 0 3px rgba(129, 128, 189, .2);
}

/* Buttons match the site's pill buttons */
.mc-btn {
	border-radius: 2em;
	padding: .75em 2.5em;
	font-weight: normal;
	font-size: inherit;
	border: 1px solid transparent;
	transition: var(--bioclear-transition, all .35s ease-in-out);
}
.mc-btn-primary {
	background: var(--bioclear-corporate-purple, #8180BD);
	color: #fff;
}
.mc-btn-primary:hover,
.mc-btn-primary:focus {
	background: #fff;
	color: var(--bioclear-corporate-grey, #3F5262);
	border-color: var(--bioclear-corporate-grey, #3F5262);
}
.mc-btn-secondary {
	background: #fff;
	color: var(--bioclear-corporate-grey, #3F5262);
	border-color: var(--bioclear-corporate-grey, #3F5262);
}
.mc-btn-secondary:hover,
.mc-btn-secondary:focus {
	background: var(--bioclear-corporate-grey, #3F5262);
	color: #fff;
}

/* Tinted panels: purple tint instead of the plugin's light blue */
.mc-group-toggle,
.mc-plan-option:has(input:checked) {
	background: #f3f3fa;
	border-color: #dcdcef;
}

/* Small text links / "Change" use the brand purple */
.mc-view-all-dates a,
.mc-change-session {
	color: var(--mc-blue-dk);
}