/*
 * Fixes Tutor LMS's brand colour palette for hover/pressed/dark states.
 *
 * Tutor's own generator (Assets::generate_color_palette in the plugin)
 * builds shades 700-950 from FIXED lightness targets (48%, 40.2%, 33.1%,
 * 20.8%) rather than targets relative to the chosen Brand Color. That
 * works for Tutor's default blue (~56% lightness) but for this site's
 * darker teal (#009EB6, ~36% lightness) it makes shades 700 and 800
 * come out LIGHTER than the base colour instead of darker, so primary
 * buttons flip to a much lighter, washed-out cyan on hover/focus instead
 * of darkening (Tutor LMS > Settings > Appearance > Brand Color).
 *
 * These four shades are recalculated to properly darken in sequence.
 * 700 reuses the site's own "Blue btn:hover" Elementor colour (#078A9E)
 * so the hover shade matches buttons built directly in Elementor too.
 */
:root {
	--tutor-brand-700: #078A9E;
	--tutor-brand-800: #056D7F;
	--tutor-brand-900: #055261;
	--tutor-brand-950: #053742;
	--tutor-text-primary-inverse: white;
	--tutor-button-primary: #009eb6;
}

/*
 * Elementor's global "Button" style (Site Settings > Global Fonts/Colors)
 * doesn't just style .elementor-button, it also targets the bare <button>
 * and input[type="button"/"submit"] elements site-wide (see
 * .elementor-kit-29195 button in the kit's generated CSS), setting a 2px
 * solid border and a fixed text colour. That selector (class + element,
 * specificity 0,1,1) beats Tutor's own single-class button selectors
 * (0,1,0), so on Tutor's buttons the text colour gets overridden to match
 * the border/background colour (invisible text), and a border appears
 * that Tutor never intended. Tutor's own ":hover:not():not()" selectors
 * happen to be specific enough to win on hover, which is why the border
 * visibly disappears on hover instead of staying off consistently.
 *
 * Every Tutor button skin is reasserted here with !important, using the
 * same CSS variables Tutor's own tutor-core.min.css uses for that skin,
 * so this stays correct automatically if the Brand Color setting changes.
 * Tutor never uses a real `border` for its buttons (outline-style buttons
 * use box-shadow instead), so border is always reset to none.
 */
button.tutor-btn, a.tutor-btn, .tutor-btn,
input[type="submit"].tutor-btn, input[type="button"].tutor-btn {
	border: none !important;
	color: var(--tutor-text-primary) !important;
}

button.tutor-btn-primary, a.tutor-btn-primary, .tutor-btn-primary,
button.tutor-btn-destructive, a.tutor-btn-destructive, .tutor-btn-destructive {
	color: var(--tutor-text-primary-inverse) !important;
}

button.tutor-btn-primary-soft, a.tutor-btn-primary-soft, .tutor-btn-primary-soft,
button.tutor-btn-ghost-brand, a.tutor-btn-ghost-brand, .tutor-btn-ghost-brand,
button.tutor-btn-link, a.tutor-btn-link, .tutor-btn-link {
	color: var(--tutor-text-brand) !important;
}

button.tutor-btn-destructive-soft, a.tutor-btn-destructive-soft, .tutor-btn-destructive-soft,
button.tutor-btn-link-destructive, a.tutor-btn-link-destructive, .tutor-btn-link-destructive {
	color: var(--tutor-text-critical) !important;
}

button.tutor-btn-link-gray, a.tutor-btn-link-gray, .tutor-btn-link-gray {
	color: var(--tutor-text-subdued) !important;
}

/*
 * Elementor's kit CSS only sets `color`/`border` on bare buttons (checked
 * above), never `background-color`, so these shouldn't be under the same
 * conflict, they're reasserted anyway for consistency and as insurance
 * against any other theme/plugin CSS that resets background on <button>.
 */
button.tutor-btn, a.tutor-btn, .tutor-btn,
button.tutor-btn-ghost, a.tutor-btn-ghost, .tutor-btn-ghost,
button.tutor-btn-ghost-brand, a.tutor-btn-ghost-brand, .tutor-btn-ghost-brand,
button.tutor-btn-link, a.tutor-btn-link, .tutor-btn-link,
button.tutor-btn-link-gray, a.tutor-btn-link-gray, .tutor-btn-link-gray,
button.tutor-btn-link-destructive, a.tutor-btn-link-destructive, .tutor-btn-link-destructive {
	background-color: transparent !important;
}

button.tutor-btn-primary, a.tutor-btn-primary, .tutor-btn-primary {
	background-color: var(--tutor-button-primary) !important;
}
button.tutor-btn-primary:hover, a.tutor-btn-primary:hover, .tutor-btn-primary:hover {
	background-color: var(--tutor-button-primary-hover) !important;
}

button.tutor-btn-primary-soft, a.tutor-btn-primary-soft, .tutor-btn-primary-soft {
	background-color: var(--tutor-button-primary-soft) !important;
}
button.tutor-btn-primary-soft:hover, a.tutor-btn-primary-soft:hover, .tutor-btn-primary-soft:hover {
	background-color: var(--tutor-button-primary-soft-hover) !important;
}

button.tutor-btn-secondary, a.tutor-btn-secondary, .tutor-btn-secondary {
	background-color: var(--tutor-button-secondary) !important;
}
button.tutor-btn-secondary:hover, a.tutor-btn-secondary:hover, .tutor-btn-secondary:hover {
	background-color: var(--tutor-button-secondary-hover) !important;
}

button.tutor-btn-outline, a.tutor-btn-outline, .tutor-btn-outline {
	background-color: var(--tutor-button-outline-inverse) !important;
}
button.tutor-btn-outline:hover, a.tutor-btn-outline:hover, .tutor-btn-outline:hover {
	background-color: var(--tutor-button-outline-hover) !important;
}

button.tutor-btn-destructive, a.tutor-btn-destructive, .tutor-btn-destructive {
	background-color: var(--tutor-button-destructive) !important;
}
button.tutor-btn-destructive:hover, a.tutor-btn-destructive:hover, .tutor-btn-destructive:hover {
	background-color: var(--tutor-button-destructive-hover) !important;
}

button.tutor-btn-destructive-soft, a.tutor-btn-destructive-soft, .tutor-btn-destructive-soft {
	background-color: var(--tutor-button-destructive-soft) !important;
}
button.tutor-btn-destructive-soft:hover, a.tutor-btn-destructive-soft:hover, .tutor-btn-destructive-soft:hover {
	background-color: var(--tutor-button-destructive-soft-hover) !important;
}

/*
 * LEGACY button system (tutor.min.css / tutor-front.min.css).
 *
 * Course archive/single/sales pages don't load tutor-core.min.css at all
 * (Tutor only loads its modern CSS on the dashboard/login/learning area),
 * so none of the rules above apply there, they use this older, separate
 * component library and variable set instead. It hits the exact same two
 * bugs as the modern system, independently:
 *
 * 1) The same generate_color_palette() 700-shade bug (see top of file):
 *    this system computes --tutor-button-primary-hover server-side with
 *    the identical broken formula and bakes the result directly into an
 *    inline <style>, rather than going through --tutor-brand-700, so it
 *    needs its own separate correction.
 * 2) The same Elementor bare-<button> conflict: unlike the modern system,
 *    several legacy button skins (outline-primary, outline-secondary,
 *    tertiary) intentionally DO have a real border, so instead of a
 *    blanket border:none this reasserts each skin's actual intended
 *    border/colour per state so it wins over Elementor regardless of
 *    specificity.
 */
:root {
	--tutor-button-primary-hover: #078A9E;
	--tutor-button-primary-hover-rgb: 7, 138, 158;
}

button.tutor-btn, a.tutor-btn, .tutor-btn,
input[type="submit"].tutor-btn, input[type="button"].tutor-btn {
	border: none !important;
	color: var(--tutor-button-primary) !important;
}

button.tutor-btn-primary, a.tutor-btn-primary, .tutor-btn-primary,
button.tutor-btn-danger, a.tutor-btn-danger, .tutor-btn-danger,
button.tutor-btn-ghost-light, a.tutor-btn-ghost-light, .tutor-btn-ghost-light {
	color: #fff !important;
}

button.tutor-btn-ghost-light:hover, a.tutor-btn-ghost-light:hover, .tutor-btn-ghost-light:hover {
	color: rgba(255, 255, 255, .8) !important;
}

button.tutor-btn-ghost, a.tutor-btn-ghost, .tutor-btn-ghost {
	color: #757c8e !important;
}

button.tutor-btn-secondary:hover, a.tutor-btn-secondary:hover, .tutor-btn-secondary:hover {
	color: #fff !important;
}

button.tutor-btn-tertiary, a.tutor-btn-tertiary, .tutor-btn-tertiary {
	border: 1px solid var(--tutor-border-color) !important;
	color: var(--tutor-color-secondary) !important;
}

button.tutor-btn-outline-primary, a.tutor-btn-outline-primary, .tutor-btn-outline-primary {
	border: 2px solid var(--tutor-button-primary) !important;
}

button.tutor-btn-outline-primary:hover, a.tutor-btn-outline-primary:hover, .tutor-btn-outline-primary:hover {
	border-color: var(--tutor-button-primary-hover) !important;
	background-color: var(--tutor-button-primary-hover) !important;;
	color: #fff !important;
}

button.tutor-btn-outline-secondary, a.tutor-btn-outline-secondary, .tutor-btn-outline-secondary {
	border: 1px solid rgba(var(--tutor-button-primary-rgb), .1) !important;
}

button.tutor-btn-outline-secondary:hover, a.tutor-btn-outline-secondary:hover, .tutor-btn-outline-secondary:hover {
	border-color: var(--tutor-button-primary-hover) !important;
	background-color: var(--tutor-button-primary-hover) !important;
	color: #fff !important;
}

button.tutor-btn-ghost, a.tutor-btn-ghost, .tutor-btn-ghost,
button.tutor-btn-ghost-light, a.tutor-btn-ghost-light, .tutor-btn-ghost-light,
button.tutor-btn-link, a.tutor-btn-link, .tutor-btn-link,
button.tutor-btn-outline-primary, a.tutor-btn-outline-primary, .tutor-btn-outline-primary {
	background-color: transparent !important;
}

button.tutor-btn-primary, a.tutor-btn-primary, .tutor-btn-primary {
	background-color: var(--tutor-button-primary) !important;
}
button.tutor-btn-primary:hover, a.tutor-btn-primary:hover, .tutor-btn-primary:hover {
	background-color: var(--tutor-button-primary-hover) !important;
}

button.tutor-btn-secondary, a.tutor-btn-secondary, .tutor-btn-secondary {
	background-color: rgba(var(--tutor-button-primary-rgb), .15) !important;
}
button.tutor-btn-secondary:hover, a.tutor-btn-secondary:hover, .tutor-btn-secondary:hover {
	background-color: var(--tutor-button-primary-hover) !important;
}

button.tutor-btn-danger, a.tutor-btn-danger, .tutor-btn-danger {
	background-color: #f44337 !important;
}

button.tutor-btn-tertiary, a.tutor-btn-tertiary, .tutor-btn-tertiary {
	background-color: #fff !important;
}
button.tutor-btn-tertiary:hover, a.tutor-btn-tertiary:hover, .tutor-btn-tertiary:hover {
	background-color: #f5f6fa !important;
}

button.tutor-btn-outline-secondary, a.tutor-btn-outline-secondary, .tutor-btn-outline-secondary {
	background-color: rgba(var(--tutor-button-primary-rgb), .1) !important;
}

/*
 * .tutor-iconic-btn (modal close buttons, e.g. the login/registration
 * popup's close icon) is a separate legacy component that doesn't use
 * the tutor-btn class family at all, so none of the rules above cover
 * it, it needs its own fix for the same Elementor bare-<button> conflict.
 */
button.tutor-iconic-btn, a.tutor-iconic-btn, .tutor-iconic-btn {
	border: none !important;
	background-color: transparent !important;
	color: #757c8e !important;
}
button.tutor-iconic-btn:hover, a.tutor-iconic-btn:hover, .tutor-iconic-btn:hover {
	color: var(--tutor-button-primary-hover) !important;
	background-color: rgba(var(--tutor-button-primary-rgb), .1) !important;
}

/*
 * Fonts: align Tutor with the site's Figtree font (used sitewide via
 * Elementor's Global Fonts, already loaded on every page as a Google Font).
 *
 * The MODERN system (tutor-core.min.css, tutor-dashboard.min.css,
 * tutor-learning-area.min.css) sets font-family directly on hundreds of
 * individual elements as `var(--tutor-font-family-body, "Inter")` /
 * `var(--tutor-font-family-heading, "Inter")`, rather than just inheriting
 * from the page. Tutor never defines either variable itself, so every one
 * of those elements was falling back to "Inter" regardless of the page's
 * own font. Defining them here is Tutor's own built-in override point, so
 * it fixes the whole modern system in one place, no per-selector overrides
 * or !important needed.
 *
 * The LEGACY system (tutor.min.css, tutor-front.min.css) doesn't do this,
 * it already inherits Figtree correctly from the page, except for two
 * small hardcoded exceptions (a datepicker widget and a tooltip style)
 * fixed directly below.
 */
:root {
	--tutor-font-family-body: "Figtree", Helvetica, Arial, sans-serif;
	--tutor-font-family-heading: "Figtree", Helvetica, Arial, sans-serif;
}

.react-datepicker,
.tutor-tooltip-inside .tooltip {
	font-family: "Figtree", Helvetica, Arial, sans-serif;
}

#tutor-registration-wrap {
	max-width: 100% !important;
	padding: 0 !important;
}

.plyr--video {
	height: 100%;
}

button.tutor-btn-link, a.tutor-btn-link, .tutor-btn-link {
	color: var( --e-global-color-secondary ) !important;
}
button.tutor-btn-link:hover, a.tutor-btn-link:hover, .tutor-btn-link:hover {
	color: #1B1B1B !important;
}

/*
 * Marks every required Tutor LMS field label with a "*", using :has() so
 * it works off the actual `required` attribute rather than hardcoding it
 * per field, it stays correct automatically if fields are added/changed.
 * Tutor reuses the same handful of field-wrapper classes across its whole
 * template library (registration, instructor registration, profile,
 * checkout, etc.), so this covers those forms generally, not just the
 * student registration form.
 * Checkbox/radio labels (terms & conditions, newsletter opt-in) are
 * intentionally excluded, the "*" convention is for text-style fields.
 */
.tutor-form-group:has(> input[required], > select[required], > .tutor-input-field input[required], > .tutor-input-field select[required], > .tutor-form-wrap input[required]) > label::after,
.tutor-input-field:has(> input[required], > select[required]) > label::after,
.tutor-password-field:has(input[required]) > label::after {
	content: " *";
	color: #f44337;
}

/*
 * Modern-system `<select>` fields (registration form: State, Special
 * Interest Group member, etc.) use the same `.tutor-input` class as text
 * inputs so they pick up its background-color/color/padding rule
 * (`.tutor-input-field .tutor-input` in tutor-core.min.css). That rule
 * alone isn't enough for a <select>, though: browsers render a <select>'s
 * box using native OS widget chrome by default, which ignores or partially
 * overrides an author's background-color/color/padding until the native
 * appearance is explicitly turned off. Safari in particular keeps its own
 * background and padding regardless of what's declared here otherwise.
 * Turning appearance off also removes the browser's built-in dropdown
 * arrow, so one is re-added as a background image (same arrow/colour
 * Tutor's own legacy tutor.min.css uses for its .tutor-form-select), with
 * padding-right added so the arrow never overlaps the selected text.
 */
.tutor-input-field select.tutor-input {
	appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
	background-repeat: no-repeat;
	background-position: right 12px center;
	background-size: 16px 12px;
	padding-right: 36px;
}

/*
 * Browsers don't inherit page font settings into form controls by
 * default, select/textarea fall back to the browser/OS's own native
 * control font unless every font property is set explicitly on them.
 * tutor-core.min.css's `.tutor-input-field .tutor-input` rule does set
 * these explicitly and, being a plain class selector, matches a <select>
 * or <textarea> exactly the same as an <input>, so this should already be
 * unified, but that native control font can still win in some
 * browsers regardless. Restating the same values here with !important,
 * pulled from the same custom properties/selector Tutor itself uses so it
 * can't drift out of sync with input styling, removes any doubt.
 */
.tutor-input-field select.tutor-input,
.tutor-input-field textarea.tutor-input {
	font-family: var(--tutor-font-family-body, "Inter"), -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
	font-size: 1rem !important;
	font-weight: var(--tutor-input-font-weight, 400) !important;
	line-height: 1.5rem !important;
}

/*
 * `:placeholder-shown` (used above to fade a text input's background/text
 * colour while it still shows its placeholder) only exists for <input>/
 * <textarea>, a <select> can never match it even when its own "Please
 * select" placeholder option is showing. Without this, every select on
 * the registration form looks permanently "filled" (full-strength text
 * colour, filled background) while its sibling text inputs still look
 * empty/muted, so the two field types never match until every select has
 * a real answer chosen. This mirrors that same idle styling for as long as
 * the placeholder option (value="") is the one selected.
 */
.tutor-input-field select.tutor-input:has(option[value=""]:checked):not(:focus) {
	background-color: var(--tutor-surface-l3);
	color: var(--tutor-text-subdued);
}

body .tutor-stat-card-header .tutor-stat-card-title {
	font-family: var(--e-global-typography-29b6955-font-family), Figtree, Helvetica, Arial, sans-serif;
    font-size: var(--e-global-typography-29b6955-font-size);
    font-weight: var(--e-global-typography-29b6955-font-weight);
    line-height: var(--e-global-typography-29b6955-line-height);
}

.tutor-dashboard-header-user-avatar {
	border: none !important;
	background: none !important;
}

.tutor-sidebar-card .tutor-card-footer {
	border-top: 0 !important;
}

/*
 * Elementor's global "Text Field" style (Site Settings > Style > Form
 * Fields) targets `input:not([type="button"]):not([type="submit"])`,
 * the same broad-bare-element pattern documented at the top of this file
 * for buttons, except here the exclusion list only rules out buttons, not
 * checkboxes/radios, so it also pads every input[type="checkbox"] and
 * input[type="radio"] site-wide (Tutor's own .tutor-checkbox/.tutor-radio
 * classes are single-class selectors and lose that specificity fight).
 * Padding on a checkbox/radio just distorts its fixed-size box and
 * misaligns the check/dot mark, so it's removed here.
 */
input[type="checkbox"],
input[type="radio"] {
	padding: 0 !important;
}


.tutor-progress-card .tutor-progress-card-thumbnail {
	flex: unset;
}

#tutor-certificate-showcase .tutor-cs-text h3 {
	white-space: normal;
}

.tutor-card {
	overflow: hidden;
}

.tutor-course-thumbnail .tutor-card-image-top {
	border-radius: 0 !important;
}