@charset "UTF-8";
/*
 * ABA — Tutor LMS brand skin
 * -------------------------------------------------------------------------
 * Loaded ONLY when Tutor LMS is active, AFTER assets/css/main.css.
 * Every class targeted here was verified against the Tutor LMS 4.0.7 PHP
 * templates shipped in wp-content/plugins/tutor — nothing is guessed.
 *
 * Tutor already ships tutor-rtl.min.css and the theme forces frontend
 * is_rtl() to true, so directional flipping is NOT repeated here; only the
 * handful of spots the brand skin actually changes are patched.
 *
 * Consumes the tokens injected by abaplus_css_variables() + main.css.
 * No brand hex values are hardcoded.
 */

/* ─────────────────────────────────────────────────────────────────────────
   1. TOKEN BRIDGE
   Tutor prints `:root{--tutor-color-primary:…}` as an inline style attached
   to the `tutor-frontend` handle (classes/Assets.php::load_color_palette).
   Re-declaring the same custom properties on `body.abaplus` (0,1,1) beats
   that `:root` rule (0,1,0) regardless of stylesheet order — which re-skins
   the vast majority of Tutor's own CSS without a single !important.
   ───────────────────────────────────────────────────────────────────────── */

body.abaplus {
	--tutor-color-primary: var(--aba-primary);
	--tutor-color-primary-rgb: var(--aba-primary-rgb);
	--tutor-color-primary-hover: var(--aba-primary-dark);
	--tutor-color-primary-hover-rgb: var(--aba-primary-rgb);
	--tutor-body-color: var(--aba-ink);
	--tutor-border-color: var(--aba-line);
	--tutor-color-gray: var(--aba-line);
	--tutor-color-gray-10: var(--aba-surface);
	--tutor-color-secondary: var(--aba-text);
	--tutor-color-subdued: var(--aba-muted);
	--tutor-color-hints: var(--aba-muted);
	--tutor-color-muted: var(--aba-muted);
	--tutor-color-white: var(--aba-white);
	--tutor-table-border-radius: var(--aba-radius-sm);
	/* Local shorthands used throughout this file. */
	--aba-tutor-tint: rgba(var(--aba-primary-rgb), .08);
	--aba-tutor-tint-strong: rgba(var(--aba-primary-rgb), .14);
	--aba-tutor-ring: 0 0 0 3px rgba(var(--aba-primary-rgb), .18);
}

/* ─────────────────────────────────────────────────────────────────────────
   2. BASE TYPOGRAPHY INSIDE TUTOR
   ───────────────────────────────────────────────────────────────────────── */

body.abaplus .tutor-wrap,
body.abaplus .tutor-course-details-page,
body.abaplus .tutor-checkout-page,
body.abaplus .tutor-cart-page,
body.abaplus .tutor-dashboard-layout { font-family: var(--aba-font); color: var(--aba-text); line-height: 1.85; }
body.abaplus .tutor-wrap h1,
body.abaplus .tutor-wrap h2,
body.abaplus .tutor-wrap h3,
body.abaplus .tutor-wrap h4,
body.abaplus .tutor-wrap h5,
body.abaplus .tutor-course-details-page h1,
body.abaplus .tutor-course-details-page h2,
body.abaplus .tutor-course-details-page h3,
body.abaplus .tutor-course-details-page h4,
body.abaplus .tutor-course-details-page h5,
body.abaplus .tutor-cart-page h3,
body.abaplus .tutor-cart-page h5,
body.abaplus .tutor-checkout-page h5,
body.abaplus .tutor-dashboard-layout h1,
body.abaplus .tutor-dashboard-layout h2,
body.abaplus .tutor-dashboard-layout h3,
body.abaplus .tutor-dashboard-layout h4 { font-family: var(--aba-font-head); color: var(--aba-ink); line-height: 1.45; }

/* Tutor's colour utility classes → brand ink/teal. */
body.abaplus .tutor-color-black { color: var(--aba-ink); }
body.abaplus .tutor-color-primary,
body.abaplus .tutor-color-brand { color: var(--aba-primary); }
body.abaplus .tutor-color-secondary { color: var(--aba-text); }
body.abaplus .tutor-color-muted,
body.abaplus .tutor-color-subdued,
body.abaplus .tutor-color-hints { color: var(--aba-muted); }
body.abaplus .tutor-bg-primary { background-color: var(--aba-primary); }
body.abaplus .tutor-text-primary { color: var(--aba-ink); }
body.abaplus .tutor-text-subdued,
body.abaplus .tutor-text-secondary { color: var(--aba-muted); }

/* Links inside Tutor markup. */
body.abaplus .tutor-wrap a,
body.abaplus .tutor-course-details-page a,
body.abaplus .tutor-checkout-page a,
body.abaplus .tutor-cart-page a,
body.abaplus .tutor-dashboard-layout a { color: var(--aba-primary); text-decoration: none; transition: color .22s var(--aba-ease); }
body.abaplus .tutor-wrap a:hover,
body.abaplus .tutor-course-details-page a:hover,
body.abaplus .tutor-checkout-page a:hover,
body.abaplus .tutor-cart-page a:hover,
body.abaplus .tutor-dashboard-layout a:hover { color: var(--aba-primary-dark); }
body.abaplus .tutor-course-name a,
body.abaplus .tutor-course-details-title,
body.abaplus .tutor-checkout-course-title a,
body.abaplus .tutor-cart-course-title a { color: var(--aba-ink); }
body.abaplus .tutor-course-name a:hover,
body.abaplus .tutor-checkout-course-title a:hover,
body.abaplus .tutor-cart-course-title a:hover { color: var(--aba-primary); }

/* Focus ring — matches the theme contract §3. */
body.abaplus .tutor-wrap a:focus-visible,
body.abaplus .tutor-btn:focus-visible,
body.abaplus .tutor-form-control:focus-visible,
body.abaplus .tutor-nav-link:focus-visible,
body.abaplus .tutor-dashboard-sidebar-nav a:focus-visible { outline: 2px solid var(--aba-primary); outline-offset: 3px; }

/* ─────────────────────────────────────────────────────────────────────────
   3. BUTTONS — .tutor-btn family
   Verified variants in templates: tutor-btn-primary, tutor-btn-outline-primary,
   tutor-btn-secondary, tutor-btn-ghost, tutor-btn-link, tutor-btn-link-gray,
   tutor-btn-primary-soft, tutor-btn-block, tutor-btn-sm/md/lg,
   tutor-btn-small/x-small, tutor-btn-icon, tutor-iconic-btn.
   ───────────────────────────────────────────────────────────────────────── */

body.abaplus .tutor-btn {
	font-family: var(--aba-font);
	font-weight: 700;
	border-radius: var(--aba-radius-pill);
	line-height: 1.4;
	gap: 8px;
	transition: background-color .25s var(--aba-ease), color .25s var(--aba-ease),
		border-color .25s var(--aba-ease), transform .25s var(--aba-ease),
		box-shadow .25s var(--aba-ease);
}
body.abaplus .tutor-btn svg,
body.abaplus .tutor-btn img { flex-shrink: 0; }
body.abaplus .tutor-btn-md,
body.abaplus .tutor-btn-sm,
body.abaplus .tutor-btn-small { padding-block: 9px; padding-inline: 20px; font-size: .9375rem; }
body.abaplus .tutor-btn-lg { padding-block: 14px; padding-inline: 28px; font-size: 1.0625rem; }
body.abaplus .tutor-btn-primary {
	background-color: var(--aba-primary);
	border-color: var(--aba-primary);
	color: var(--aba-white);
	box-shadow: 0 6px 18px rgba(var(--aba-primary-rgb), .28);
}
body.abaplus .tutor-btn-primary:hover,
body.abaplus .tutor-btn-primary:focus,
body.abaplus .tutor-btn-primary:active {
	background-color: var(--aba-primary-dark);
	border-color: var(--aba-primary-dark);
	color: var(--aba-white);
	box-shadow: 0 10px 26px rgba(var(--aba-primary-rgb), .34);
}
body.abaplus .tutor-btn-outline-primary {
	background-color: transparent;
	border: 1.5px solid var(--aba-primary);
	color: var(--aba-primary);
}
body.abaplus .tutor-btn-outline-primary:hover,
body.abaplus .tutor-btn-outline-primary:focus,
body.abaplus .tutor-btn-outline-primary:active {
	background-color: var(--aba-primary);
	border-color: var(--aba-primary);
	color: var(--aba-white);
}
body.abaplus .tutor-btn-secondary,
body.abaplus .tutor-btn-primary-soft { background-color: var(--aba-tutor-tint); border-color: transparent; color: var(--aba-primary); }
body.abaplus .tutor-btn-secondary:hover,
body.abaplus .tutor-btn-secondary:focus,
body.abaplus .tutor-btn-primary-soft:hover,
body.abaplus .tutor-btn-primary-soft:focus { background-color: var(--aba-primary); color: var(--aba-white); }
body.abaplus .tutor-btn-ghost,
body.abaplus .tutor-btn-link,
body.abaplus .tutor-btn-link-gray {
	background-color: transparent;
	border-color: transparent;
	color: var(--aba-primary);
	box-shadow: none;
}
body.abaplus .tutor-btn-ghost:hover,
body.abaplus .tutor-btn-link:hover,
body.abaplus .tutor-btn-link-gray:hover { background-color: var(--aba-tutor-tint); color: var(--aba-primary-dark); }
body.abaplus .tutor-btn-link-gray { color: var(--aba-muted); }
body.abaplus .tutor-btn-block,
body.abaplus .tutor-btn.tutor-w-100 { inline-size: 100%; justify-content: center; }

@media (prefers-reduced-motion: no-preference) {
	body.abaplus .tutor-btn-primary:hover,
	body.abaplus .tutor-btn-outline-primary:hover {
		transform: translateY(-2px);
	}
}

/* Small circular icon buttons (wishlist, modal close, share). */
body.abaplus .tutor-iconic-btn {
	border-radius: var(--aba-radius-pill);
	color: var(--aba-ink);
	transition: background-color .22s var(--aba-ease), color .22s var(--aba-ease);
}
body.abaplus .tutor-iconic-btn:hover { background-color: var(--aba-tutor-tint); color: var(--aba-primary); }

/* ─────────────────────────────────────────────────────────────────────────
   4. GENERIC CARDS / SURFACES
   ───────────────────────────────────────────────────────────────────────── */

body.abaplus .tutor-card {
	background-color: var(--aba-white);
	border: 1px solid var(--aba-line);
	border-radius: var(--aba-radius);
	box-shadow: var(--aba-shadow-sm);
	overflow: hidden;
}
body.abaplus .tutor-card-footer,
body.abaplus .tutor-border-bottom { border-color: var(--aba-line); }
body.abaplus .tutor-alert {
	border-radius: var(--aba-radius-sm);
	border: 1px solid var(--aba-line);
	font-family: var(--aba-font);
}
body.abaplus .tutor-alert.tutor-warning {
	background-color: rgba(var(--aba-accent-rgb), .12);
	border-color: rgba(var(--aba-accent-rgb), .4);
}
body.abaplus .tutor-empty-state,
body.abaplus .tutor-cart-empty-state {
	background-color: var(--aba-surface);
	border-radius: var(--aba-radius-lg);
	padding-block: clamp(32px, 5vw, 56px);
	padding-inline: 24px;
	text-align: center;
}

/* ─────────────────────────────────────────────────────────────────────────
   5. COURSE ARCHIVE — .tutor-course-list grid + .tutor-course-card
   From templates/loop/loop-start.php, loop-before-content.php,
   thumbnail.php, title.php, meta.php, footer.php.
   ───────────────────────────────────────────────────────────────────────── */

body.abaplus .tutor-course-list.tutor-grid { gap: var(--aba-space-7); }
body.abaplus .tutor-card.tutor-course-card {
	display: flex;
	flex-direction: column;
	border: 1px solid var(--aba-line);
	border-radius: var(--aba-radius);
	background-color: var(--aba-white);
	box-shadow: var(--aba-shadow-sm);
	overflow: hidden;
	transition: transform .3s var(--aba-ease), box-shadow .3s var(--aba-ease),
		border-color .3s var(--aba-ease);
}
body.abaplus .tutor-card.tutor-course-card:hover { border-color: rgba(var(--aba-primary-rgb), .38); box-shadow: var(--aba-shadow-lg); }

@media (prefers-reduced-motion: no-preference) {
	body.abaplus .tutor-card.tutor-course-card:hover {
		transform: translateY(-6px);
	}
}
body.abaplus .tutor-course-thumbnail { position: relative; overflow: hidden; background-color: var(--aba-surface); }
body.abaplus .tutor-course-thumbnail img,
body.abaplus .tutor-card-image-top {
	inline-size: 100%;
	object-fit: cover;
	border-radius: 0;
	transition: transform .5s var(--aba-ease);
}

@media (prefers-reduced-motion: no-preference) {
	body.abaplus .tutor-card.tutor-course-card:hover .tutor-card-image-top {
		transform: scale(1.05);
	}
}
body.abaplus .tutor-course-bookmark { inset-block-start: 12px; inset-inline-end: 12px; }
body.abaplus .tutor-course-bookmark .tutor-iconic-btn { background-color: rgba(255, 255, 255, .92); box-shadow: var(--aba-shadow-sm); }
body.abaplus .tutor-course-card .tutor-card-body {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	padding: var(--aba-space-6);
}
body.abaplus .tutor-course-name {
	font-family: var(--aba-font-head);
	font-size: 1.125rem;
	font-weight: 700;
	line-height: 1.55;
	margin-block: 0 var(--aba-space-3);
}
body.abaplus .tutor-course-card .tutor-meta,
body.abaplus .tutor-course-card .tutor-meta-value { color: var(--aba-muted); font-size: .9375rem; }
body.abaplus .tutor-course-card .tutor-meta-icon { color: var(--aba-primary); }
body.abaplus .tutor-course-card .tutor-card-footer {
	padding: var(--aba-space-5) var(--aba-space-6);
	background-color: var(--aba-surface);
	border-block-start: 1px solid var(--aba-line);
}
body.abaplus .tutor-course-price,
body.abaplus .tutor-course-card .price { font-family: var(--aba-font-head); font-weight: 700; color: var(--aba-ink); }
body.abaplus .tutor-ratings-stars .tutor-icon-star-bold,
body.abaplus .tutor-ratings-stars .tutor-icon-star-half-bold { color: var(--aba-accent); }
body.abaplus .tutor-ratings-average { color: var(--aba-ink); font-weight: 700; }

/* Archive shell + sorting bar. */
body.abaplus .course-archive-page { padding-block: clamp(32px, 5vw, 64px); }
body.abaplus .tutor-course-filter .tutor-form-select { max-inline-size: 100%; }
body.abaplus .tutor-pagination .page-numbers {
	border-radius: var(--aba-radius-pill);
	color: var(--aba-ink);
	transition: background-color .22s var(--aba-ease), color .22s var(--aba-ease);
}
body.abaplus .tutor-pagination .page-numbers:hover,
body.abaplus .tutor-pagination .page-numbers.current { background-color: var(--aba-primary); color: var(--aba-white); }

/* ─────────────────────────────────────────────────────────────────────────
   6. SINGLE COURSE — header, tabs, content, curriculum
   From templates/single-course.php, single/course/lead-info.php,
   course-content.php, course-topics.php, course-benefits.php,
   single/course/enrolled/nav.php.
   ───────────────────────────────────────────────────────────────────────── */

body.abaplus .tutor-course-details-page { padding-block: clamp(28px, 4vw, 56px); }
body.abaplus .tutor-course-details-header { padding-block-end: var(--aba-space-6); border-block-end: 1px solid var(--aba-line); }
body.abaplus .tutor-course-details-title {
	font-family: var(--aba-font-head);
	font-size: clamp(1.6rem, 1.2rem + 1.9vw, 2.6rem);
	font-weight: 800;
	color: var(--aba-ink);
	line-height: 1.4;
}
body.abaplus .tutor-course-details-info,
body.abaplus .tutor-course-details-info a { color: var(--aba-muted); font-size: .9375rem; }
body.abaplus .tutor-course-details-info a { color: var(--aba-primary); font-weight: 600; }
body.abaplus .tutor-course-details-actions .tutor-btn { border-radius: var(--aba-radius-pill); }
body.abaplus .tutor-course-details-page .tutor-ratio img,
body.abaplus .tutor-course-details-page .tutor-video-player { border-radius: var(--aba-radius); overflow: hidden; }

/* --- Tab navigation --------------------------------------------------- */

body.abaplus .tutor-course-details-tab .tutor-nav {
	border-block-end: 1px solid var(--aba-line);
	gap: var(--aba-space-2);
	background-color: var(--aba-white);
}
body.abaplus .tutor-course-details-tab .tutor-nav-link {
	position: relative;
	font-family: var(--aba-font-head);
	font-weight: 700;
	font-size: 1rem;
	color: var(--aba-muted);
	padding-block: 14px;
	padding-inline: 18px;
	border-block-end: 2px solid transparent;
	transition: color .22s var(--aba-ease), border-color .22s var(--aba-ease);
}
body.abaplus .tutor-course-details-tab .tutor-nav-link:hover { color: var(--aba-ink); }
body.abaplus .tutor-course-details-tab .tutor-nav-link.is-active { color: var(--aba-primary); border-block-end-color: var(--aba-primary); }
body.abaplus .tutor-course-details-tab .tutor-is-sticky { background-color: var(--aba-white); z-index: 20; }
body.abaplus .tutor-nav-more-list.tutor-dropdown {
	border-radius: var(--aba-radius-sm);
	border: 1px solid var(--aba-line);
	box-shadow: var(--aba-shadow);
}

/* --- About / description ---------------------------------------------- */

body.abaplus .tutor-course-details-content { color: var(--aba-text); line-height: 1.9; }
body.abaplus .tutor-course-details-content h2,
body.abaplus .tutor-course-content-title { font-family: var(--aba-font-head); color: var(--aba-ink); font-weight: 800; }
body.abaplus .tutor-btn-show-more { border: 1px solid var(--aba-line); border-radius: var(--aba-radius-pill); }

/* --- Widgets (benefits, requirements, audience) ------------------------ */

body.abaplus .tutor-course-details-widget {
	background-color: var(--aba-surface);
	border: 1px solid var(--aba-line);
	border-radius: var(--aba-radius);
	padding: clamp(18px, 2.4vw, 28px);
	margin-block-start: var(--aba-space-7);
}
body.abaplus .tutor-course-details-widget-title { font-family: var(--aba-font-head); color: var(--aba-ink); font-weight: 800; }
body.abaplus .tutor-course-details-widget-list .tutor-icon-bullet-point { color: var(--aba-primary); }

/* --- Curriculum accordion --------------------------------------------- */

body.abaplus .tutor-accordion {
	border-radius: var(--aba-radius);
	border: 1px solid var(--aba-line);
	overflow: hidden;
	background-color: var(--aba-white);
}
body.abaplus .tutor-accordion-item { border-block-end: 1px solid var(--aba-line); border-radius: 0; }
body.abaplus .tutor-accordion-item:last-child { border-block-end: 0; }
body.abaplus .tutor-accordion-item-header {
	font-family: var(--aba-font-head);
	font-size: 1.0625rem;
	font-weight: 700;
	color: var(--aba-ink);
	background-color: var(--aba-white);
	border-radius: 0;
	padding-block: 18px;
	transition: background-color .22s var(--aba-ease), color .22s var(--aba-ease);
}
body.abaplus .tutor-accordion-item-header:hover { background-color: var(--aba-surface); color: var(--aba-primary); }
body.abaplus .tutor-accordion-item-header.is-active { background-color: var(--aba-tutor-tint); color: var(--aba-primary); }
body.abaplus .tutor-accordion-item-header::after { color: var(--aba-primary); }
body.abaplus .tutor-accordion-item-body { background-color: var(--aba-white); }
body.abaplus .tutor-course-content-list-item { border-block-start: 1px solid var(--aba-line); padding-block: 12px; }
body.abaplus .tutor-course-content-list-item:first-child { border-block-start: 0; }
body.abaplus .tutor-course-content-list-item-icon { color: var(--aba-primary); }
body.abaplus .tutor-course-content-list-item-title,
body.abaplus .tutor-course-content-list-item-title a {
	font-family: var(--aba-font);
	font-size: 1rem;
	font-weight: 500;
	color: var(--aba-text);
}
body.abaplus .tutor-course-content-list-item-title a:hover { color: var(--aba-primary); }
body.abaplus .tutor-course-content-list-item-duration,
body.abaplus .tutor-course-content-list-item-status { color: var(--aba-muted); }

/* --- Progress bar ------------------------------------------------------ */

body.abaplus .tutor-progress-bar { background-color: var(--aba-line); border-radius: var(--aba-radius-pill); overflow: hidden; }
body.abaplus .tutor-progress-bar .tutor-progress-value { background-color: var(--aba-primary); }

/* ─────────────────────────────────────────────────────────────────────────
   7. SINGLE COURSE SIDEBAR — .tutor-single-course-sidebar / .tutor-sidebar-card
   From templates/single-course.php + single/course/course-entry-box.php
   and add-to-cart-tutor.php. Our own .aba-track-badge / .aba-buy-note are
   injected here by inc/tutor-integration.php.
   ───────────────────────────────────────────────────────────────────────── */

body.abaplus .tutor-card.tutor-sidebar-card {
	border: 1px solid var(--aba-line);
	border-radius: var(--aba-radius-lg);
	box-shadow: var(--aba-shadow);
	background-color: var(--aba-white);
	overflow: visible;
}
body.abaplus .tutor-card.tutor-sidebar-card > .tutor-card-body { padding: clamp(20px, 2.6vw, 28px); }
body.abaplus .tutor-card.tutor-sidebar-card > .tutor-card-footer {
	padding: clamp(18px, 2.2vw, 24px);
	background-color: var(--aba-surface);
	border-block-start: 1px solid var(--aba-line);
}
body.abaplus .tutor-card.tutor-sidebar-card .tutor-ul li { color: var(--aba-text); }
body.abaplus .tutor-card.tutor-sidebar-card .tutor-ul li span[class*="tutor-icon-"] { color: var(--aba-primary); }
body.abaplus .tutor-course-sidebar-card-pricing span,
body.abaplus .tutor-course-single-pricing span {
	font-family: var(--aba-font-head);
	font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem);
	font-weight: 800;
	color: var(--aba-ink);
}
body.abaplus .tutor-course-sidebar-card-pricing del { color: var(--aba-muted); font-weight: 500; }
body.abaplus .tutor-single-course-sidebar-more > div { margin-block-start: var(--aba-space-6); }

@media (min-width: 1200px) {
	body.abaplus .tutor-single-course-sidebar {
		position: sticky;
		inset-block-start: calc(var(--aba-header-h) + 16px);
	}
}

/* Theme additions injected into the entry box. */
body.abaplus .aba-track-badge {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-block-end: var(--aba-space-4);
	padding: 10px 14px;
	border-radius: var(--aba-radius-sm);
	background: linear-gradient(135deg, var(--aba-primary-tint), var(--aba-white));
	border: 1px solid rgba(var(--aba-primary-rgb), .28);
}
body.abaplus .aba-track-badge span {
	font-family: var(--aba-font-head);
	font-weight: 900;
	color: var(--aba-primary-dark);
	direction: ltr;
	unicode-bidi: isolate;
}
body.abaplus .aba-track-badge em { font-style: normal; font-size: .8125rem; color: var(--aba-muted); }
body.abaplus .aba-buy-note {
	margin-block-start: var(--aba-space-5);
	padding: 14px 16px;
	border-radius: var(--aba-radius-sm);
	background-color: var(--aba-surface);
	border: 1px dashed var(--aba-line);
}
body.abaplus .aba-buy-note__head {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0 0 6px;
	font-family: var(--aba-font-head);
	font-weight: 700;
	font-size: .9375rem;
	color: var(--aba-ink);
}
body.abaplus .aba-buy-note__head svg { color: var(--aba-primary); flex-shrink: 0; }
body.abaplus .aba-buy-note__text {
	margin: 0;
	font-size: .875rem;
	line-height: 1.75;
	color: var(--aba-muted);
}
body.abaplus .aba-buy-note__wa {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin-block-start: 10px;
	font-weight: 700;
	font-size: .875rem;
	color: var(--aba-primary);
}

/* ─────────────────────────────────────────────────────────────────────────
   8. CART — templates/ecommerce/cart.php
   ───────────────────────────────────────────────────────────────────────── */

body.abaplus .tutor-cart-page { padding-block: clamp(32px, 5vw, 72px); background-color: var(--aba-surface); }
body.abaplus .tutor-cart-course-list {
	background-color: var(--aba-white);
	border: 1px solid var(--aba-line);
	border-radius: var(--aba-radius);
	box-shadow: var(--aba-shadow-sm);
	overflow: hidden;
}
body.abaplus .tutor-cart-course-item { padding: var(--aba-space-6); border-block-end: 1px solid var(--aba-line); }
body.abaplus .tutor-cart-course-item:last-child { border-block-end: 0; }
body.abaplus .tutor-cart-course-thumb img { border-radius: var(--aba-radius-sm); object-fit: cover; }
body.abaplus .tutor-cart-course-title h5 { font-family: var(--aba-font-head); font-weight: 700; }
body.abaplus .tutor-cart-course-info { color: var(--aba-muted); font-size: .875rem; }
body.abaplus .tutor-cart-discount-price { color: var(--aba-muted); text-decoration: line-through; }
body.abaplus .tutor-cart-remove-button { color: var(--aba-muted); font-weight: 600; }
body.abaplus .tutor-cart-remove-button:hover { color: #D94A3D; background-color: transparent; }
body.abaplus .tutor-cart-summery {
	background-color: var(--aba-white);
	border: 1px solid var(--aba-line);
	border-radius: var(--aba-radius);
	box-shadow: var(--aba-shadow-sm);
	padding: var(--aba-space-6);
	position: sticky;
	inset-block-start: calc(var(--aba-header-h) + 16px);
}
body.abaplus .tutor-cart-summery-item {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding-block: 8px;
	color: var(--aba-text);
}
body.abaplus .tutor-cart-summery-bottom {
	border-block-start: 1px solid var(--aba-line);
	margin-block-start: var(--aba-space-4);
	padding-block-start: var(--aba-space-4);
}
body.abaplus .tutor-cart-summery-bottom .tutor-cart-summery-item {
	font-family: var(--aba-font-head);
	font-size: 1.125rem;
	font-weight: 800;
	color: var(--aba-ink);
}

/* ─────────────────────────────────────────────────────────────────────────
   9. CHECKOUT — templates/ecommerce/checkout.php + checkout-details.php
   ───────────────────────────────────────────────────────────────────────── */

body.abaplus .tutor-checkout-page { padding-block: clamp(28px, 4.5vw, 64px); background-color: var(--aba-surface); }
body.abaplus .tutor-checkout-details-inner,
body.abaplus .tutor-checkout-billing-inner {
	background-color: var(--aba-white);
	border: 1px solid var(--aba-line);
	border-radius: var(--aba-radius);
	box-shadow: var(--aba-shadow-sm);
	padding: clamp(20px, 2.8vw, 32px);
}
body.abaplus .tutor-checkout-details-inner > h5,
body.abaplus .tutor-checkout-billing-inner > h5 {
	font-family: var(--aba-font-head);
	font-weight: 800;
	color: var(--aba-ink);
	border-color: var(--aba-line);
}
body.abaplus .tutor-checkout-course-item { padding-block: var(--aba-space-4); border-block-end: 1px dashed var(--aba-line); }
body.abaplus .tutor-checkout-course-thumb-title img { border-radius: var(--aba-radius-sm); object-fit: cover; }
body.abaplus .tutor-checkout-course-title { font-family: var(--aba-font-head); font-weight: 700; line-height: 1.6; }
body.abaplus .tutor-checkout-discount-price { color: var(--aba-muted); text-decoration: line-through; font-size: .875rem; }
body.abaplus .tutor-checkout-coupon-badge {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 3px 10px;
	border-radius: var(--aba-radius-pill);
	background-color: var(--aba-tutor-tint);
	color: var(--aba-primary-dark);
	font-size: .8125rem;
	font-weight: 700;
}
body.abaplus .tutor-checkout-summary {
	border-block-start: 1px solid var(--aba-line);
	margin-block-start: var(--aba-space-4);
	padding-block-start: var(--aba-space-4);
}
body.abaplus .tutor-checkout-summary-item {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding-block: 6px;
	color: var(--aba-text);
}
body.abaplus .tutor-checkout-grand-total { font-family: var(--aba-font-head); font-weight: 800; color: var(--aba-primary-dark); }
body.abaplus .tutor-apply-coupon-form input[type="text"] {
	border: 1px solid var(--aba-line);
	border-radius: var(--aba-radius-sm);
	padding: 10px 14px;
	font-family: var(--aba-font);
}

/* --- Payment method radio cards --------------------------------------- */

body.abaplus .tutor-checkout-payment-options { display: grid; gap: 12px; }
body.abaplus .tutor-checkout-payment-item {
	display: flex;
	align-items: center;
	gap: 12px;
	flex-wrap: wrap;
	margin: 0;
	padding: 14px 16px;
	cursor: pointer;
	border: 1.5px solid var(--aba-line);
	border-radius: var(--aba-radius-sm);
	background-color: var(--aba-white);
	transition: border-color .22s var(--aba-ease), background-color .22s var(--aba-ease),
		box-shadow .22s var(--aba-ease);
}
body.abaplus .tutor-checkout-payment-item:hover { border-color: rgba(var(--aba-primary-rgb), .45); background-color: var(--aba-surface); }
body.abaplus .tutor-checkout-payment-item .tutor-payment-item-content {
	display: flex;
	align-items: center;
	gap: 10px;
	font-family: var(--aba-font-head);
	font-weight: 700;
	color: var(--aba-ink);
}
body.abaplus .tutor-checkout-payment-item .tutor-payment-item-content img { max-block-size: 26px; inline-size: auto; }

/* Modern selected state. */
body.abaplus .tutor-checkout-payment-item:has(.tutor-form-check-input:checked) {
	border-color: var(--aba-primary);
	background-color: var(--aba-primary-tint);
	box-shadow: var(--aba-tutor-ring);
}

/* Fallback for engines without :has() — the input is a direct sibling of
   .tutor-payment-item-content inside the <label>. */
body.abaplus .tutor-checkout-payment-item .tutor-form-check-input:checked ~ .tutor-payment-item-content { color: var(--aba-primary-dark); }
body.abaplus .tutor-checkout-payment-item .tutor-form-check-input:checked ~ .tutor-payment-item-instructions { color: var(--aba-primary-dark); }
body.abaplus .tutor-payment-item-instructions,
body.abaplus .tutor-payment-instructions {
	flex-basis: 100%;
	white-space: pre-wrap;
	font-size: .875rem;
	line-height: 1.8;
	color: var(--aba-muted);
}
body.abaplus .tutor-payment-instructions {
	padding: 14px 16px;
	border-radius: var(--aba-radius-sm);
	background-color: var(--aba-surface);
	border: 1px dashed var(--aba-line);
}

/* Terms checkbox row. */
body.abaplus .tutor-form-check label { color: var(--aba-text); font-size: .9375rem; }
body.abaplus .tutor-form-check-input {
	accent-color: var(--aba-primary);
	inline-size: 18px;
	block-size: 18px;
	flex-shrink: 0;
}
body.abaplus #tutor-checkout-pay-now-button { margin-block-start: var(--aba-space-5); font-size: 1.0625rem; }

/* Theme-injected checkout notice (tutor_before_checkout_order_details). */
body.abaplus .aba-checkout-notice {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	margin-block-end: var(--aba-space-5);
	padding: 14px 16px;
	border-radius: var(--aba-radius-sm);
	background-color: var(--aba-primary-tint);
	border: 1px solid rgba(var(--aba-primary-rgb), .3);
}
body.abaplus .aba-checkout-notice__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	inline-size: 38px;
	block-size: 38px;
	flex-shrink: 0;
	border-radius: var(--aba-radius-pill);
	background-color: var(--aba-white);
	color: var(--aba-primary);
	box-shadow: var(--aba-shadow-sm);
}
body.abaplus .aba-checkout-notice strong {
	display: block;
	font-family: var(--aba-font-head);
	color: var(--aba-ink);
	font-size: .9375rem;
}
body.abaplus .aba-checkout-notice p {
	margin: 4px 0 0;
	font-size: .875rem;
	color: var(--aba-muted);
	line-height: 1.75;
}

/* ─────────────────────────────────────────────────────────────────────────
   10. FORM CONTROLS — match .aba-field input from main.css
   .tutor-form-control / .tutor-form-select / .tutor-input / .tutor-form-label
   ───────────────────────────────────────────────────────────────────────── */

body.abaplus .tutor-form-control,
body.abaplus .tutor-form-select,
body.abaplus input.tutor-input {
	inline-size: 100%;
	font-family: var(--aba-font);
	font-size: 1rem;
	color: var(--aba-ink);
	background-color: var(--aba-white);
	border: 1px solid var(--aba-line);
	border-radius: var(--aba-radius-sm);
	padding-block: 12px;
	padding-inline: 16px;
	line-height: 1.6;
	box-shadow: none;
	transition: border-color .22s var(--aba-ease), box-shadow .22s var(--aba-ease);
}
body.abaplus .tutor-form-control::placeholder,
body.abaplus input.tutor-input::placeholder { color: var(--aba-muted); opacity: 1; }
body.abaplus .tutor-form-control:focus,
body.abaplus .tutor-form-select:focus,
body.abaplus input.tutor-input:focus { border-color: var(--aba-primary); box-shadow: var(--aba-tutor-ring); outline: none; }
body.abaplus .tutor-form-label,
body.abaplus .tutor-label {
	display: block;
	margin-block-end: 6px;
	font-family: var(--aba-font);
	font-weight: 600;
	font-size: .9375rem;
	color: var(--aba-ink);
}
body.abaplus select.tutor-form-control,
body.abaplus .tutor-form-select { background-position: left 14px center; }
body.abaplus .tutor-input-field { position: relative; }

/* ─────────────────────────────────────────────────────────────────────────
   11. STUDENT DASHBOARD
   Tutor 4.x shell: .tutor-dashboard-layout > .tutor-dashboard-sidebar +
   .tutor-dashboard-main > .tutor-dashboard-header + .tutor-dashboard-body >
   .tutor-dashboard-page  (templates/dashboard.php + dashboard/components/*).
   ───────────────────────────────────────────────────────────────────────── */

body.abaplus .tutor-dashboard-layout { background-color: var(--aba-surface); }
body.abaplus .tutor-dashboard-sidebar { background-color: var(--aba-white); border-inline-end: 1px solid var(--aba-line); }
body.abaplus .tutor-dashboard-sidebar-logo .site-title { font-family: var(--aba-font-head); font-weight: 800; color: var(--aba-ink); }
body.abaplus .tutor-dashboard-sidebar-nav ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 4px;
}
body.abaplus .tutor-dashboard-sidebar-nav a {
	display: flex;
	align-items: center;
	gap: 10px;
	padding-block: 11px;
	padding-inline: 14px;
	border-radius: var(--aba-radius-sm);
	font-family: var(--aba-font);
	font-weight: 600;
	font-size: .9375rem;
	color: var(--aba-text);
	transition: background-color .22s var(--aba-ease), color .22s var(--aba-ease);
}
body.abaplus .tutor-dashboard-sidebar-nav a svg { flex-shrink: 0; color: currentColor; }
body.abaplus .tutor-dashboard-sidebar-nav a:hover { background-color: var(--aba-surface); color: var(--aba-primary); }
body.abaplus .tutor-dashboard-sidebar-nav a.active { background-color: var(--aba-tutor-tint); color: var(--aba-primary-dark); }
body.abaplus .tutor-see-all-courses {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin: var(--aba-space-4) 14px;
	font-weight: 700;
	font-size: .9375rem;
	color: var(--aba-primary);
}
body.abaplus .tutor-dashboard-header { background-color: var(--aba-white); border-block-end: 1px solid var(--aba-line); }
body.abaplus .tutor-dashboard-header-left .tutor-h5 { font-family: var(--aba-font-head); font-weight: 800; color: var(--aba-ink); }
body.abaplus .tutor-dashboard-header-user-avatar {
	border-radius: var(--aba-radius-pill);
	border: 1px solid var(--aba-line);
	background-color: var(--aba-white);
}
body.abaplus .tutor-dashboard-header-user-avatar.active,
body.abaplus .tutor-dashboard-header-user-avatar:hover { border-color: var(--aba-primary); }
body.abaplus .tutor-popover,
body.abaplus .tutor-dashboard-header-user-popover {
	border-radius: var(--aba-radius);
	border: 1px solid var(--aba-line);
	box-shadow: var(--aba-shadow-lg);
	background-color: var(--aba-white);
}
body.abaplus .tutor-dashboard-header-user-popover-menu a {
	display: flex;
	align-items: center;
	gap: 10px;
	padding-block: 9px;
	padding-inline: 14px;
	border-radius: var(--aba-radius-sm);
	color: var(--aba-text);
	font-weight: 600;
}
body.abaplus .tutor-dashboard-header-user-popover-menu a:hover,
body.abaplus .tutor-dashboard-header-user-popover-menu a.active { background-color: var(--aba-tutor-tint); color: var(--aba-primary-dark); }
body.abaplus .tutor-dashboard-body { background-color: var(--aba-surface); }
body.abaplus .tutor-dashboard-page { padding-block: clamp(20px, 3vw, 36px); }
body.abaplus .tutor-dashboard-page .tutor-card { border-radius: var(--aba-radius); box-shadow: var(--aba-shadow-sm); }

/* Mobile bottom nav / hamburger drawer. */
body.abaplus .tutor-dashboard-menu-toggler { color: var(--aba-primary); }

/* ─────────────────────────────────────────────────────────────────────────
   12. TABLES — .tutor-table / .tutor-table-wrapper
   ───────────────────────────────────────────────────────────────────────── */

body.abaplus .tutor-table-wrapper { overflow-x: auto; border-radius: var(--aba-radius-sm); border: 1px solid var(--aba-line); }
body.abaplus .tutor-table {
	inline-size: 100%;
	border-collapse: collapse;
	font-family: var(--aba-font);
	font-size: .9375rem;
	background-color: var(--aba-white);
}
body.abaplus .tutor-table thead th {
	background-color: var(--aba-surface);
	font-family: var(--aba-font-head);
	font-weight: 700;
	color: var(--aba-ink);
	text-align: start;
	padding-block: 12px;
	padding-inline: 14px;
	border-block-end: 1px solid var(--aba-line);
}
body.abaplus .tutor-table td {
	padding-block: 12px;
	padding-inline: 14px;
	color: var(--aba-text);
	border-block-end: 1px solid var(--aba-line);
	vertical-align: middle;
}
body.abaplus .tutor-table tbody tr:last-child td { border-block-end: 0; }
body.abaplus .tutor-table tbody tr:hover td { background-color: var(--aba-surface); }

/* ─────────────────────────────────────────────────────────────────────────
   13. LOGIN MODAL / LOGIN + REGISTRATION FORMS
   views/modal/login.php → .tutor-modal.tutor-login-modal, .tutor-modal-overlay,
   .tutor-modal-window(-sm), .tutor-modal-content(-white), .tutor-modal-body,
   .tutor-modal-close-o, .tutor-is-active.
   ───────────────────────────────────────────────────────────────────────── */

body.abaplus .tutor-modal .tutor-modal-overlay { background-color: rgba(var(--aba-ink-rgb), .6); backdrop-filter: blur(3px); }
body.abaplus .tutor-modal .tutor-modal-content {
	border-radius: var(--aba-radius-lg);
	box-shadow: var(--aba-shadow-lg);
	border: 1px solid var(--aba-line);
	overflow: hidden;
}
body.abaplus .tutor-modal .tutor-modal-content-white { background-color: var(--aba-white); }
body.abaplus .tutor-modal .tutor-modal-body { padding-inline: clamp(20px, 4vw, 40px); font-family: var(--aba-font); }
/* Tutor pins the close button to the right with a physical `right`, which in
   RTL puts it on top of the modal heading. Reset that and use a logical
   property so it lands on the left — the far side from the title. */
body.abaplus .tutor-modal .tutor-modal-close-o {
	background-color: var(--aba-surface);
	color: var(--aba-ink);
	border-radius: var(--aba-radius-pill);
	right: auto;
	left: auto;
	inset-inline-end: 16px;
	inset-block-start: 16px;
}
body.abaplus .tutor-modal .tutor-modal-close-o:hover { background-color: var(--aba-tutor-tint); color: var(--aba-primary); }
body.abaplus #tutor-login-modal-title { font-family: var(--aba-font-head); font-weight: 800; color: var(--aba-ink); }
body.abaplus .tutor-login-form-wrapper,
body.abaplus #tutor-registration-wrap {
	background-color: var(--aba-white);
	border: 1px solid var(--aba-line);
	border-radius: var(--aba-radius-lg);
	box-shadow: var(--aba-shadow);
}
body.abaplus .tutor-login-error { color: #D94A3D; font-size: .875rem; }
body.abaplus .tutor-password-strength-checker .tutor-password-field label { color: var(--aba-ink); }

/* ─────────────────────────────────────────────────────────────────────────
   14. THEME BLOCKS THAT LIVE INSIDE TUTOR PAGES
   (.aba-checkout-auth is printed on the Tutor checkout page for guests.)
   ───────────────────────────────────────────────────────────────────────── */

body.abaplus .tutor-checkout-page .aba-checkout-auth,
body.abaplus .aba-checkout-auth { padding-block: clamp(28px, 4vw, 56px); }
body.abaplus .aba-checkout-auth__course {
	display: flex;
	align-items: center;
	gap: var(--aba-space-4);
	flex-wrap: wrap;
	margin-block-end: var(--aba-space-7);
	padding: var(--aba-space-4);
	background-color: var(--aba-white);
	border: 1px solid var(--aba-line);
	border-radius: var(--aba-radius);
	box-shadow: var(--aba-shadow-sm);
}
body.abaplus .aba-checkout-auth__course img {
	inline-size: 72px;
	block-size: 72px;
	object-fit: cover;
	border-radius: var(--aba-radius-sm);
	flex-shrink: 0;
}
body.abaplus .aba-checkout-auth__course span { display: block; font-size: .8125rem; color: var(--aba-muted); }
body.abaplus .aba-checkout-auth__course strong { font-family: var(--aba-font-head); font-size: 1.0625rem; color: var(--aba-ink); }
body.abaplus .aba-checkout-auth__price {
	margin-inline-start: auto;
	font-family: var(--aba-font-head);
	font-weight: 800;
	font-size: 1.25rem;
	color: var(--aba-primary-dark);
}
body.abaplus .aba-checkout-auth__grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--aba-space-7);
	align-items: start;
}
body.abaplus .aba-card--login .aba-help {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	margin-block-start: var(--aba-space-5);
	padding-block-start: var(--aba-space-5);
	border-block-start: 1px dashed var(--aba-line);
}
body.abaplus .aba-card--login .aba-help svg { color: var(--aba-primary); flex-shrink: 0; }

/* ─────────────────────────────────────────────────────────────────────────
   15. RTL PATCHES
   Tutor's own tutor-rtl.min.css is loaded, so only the few decorative
   absolute offsets the brand skin introduces are corrected here.
   ───────────────────────────────────────────────────────────────────────── */

body.abaplus .tutor-course-bookmark { inset-inline-end: 12px; inset-inline-start: auto; }

/* The accordion chevron is positioned with a physical `right` in Tutor's
   LTR sheet; the RTL sheet mirrors it, but our padding change needs to
   follow the logical edge. */
body.abaplus .tutor-accordion-item-header { padding-inline-start: 20px; padding-inline-end: 44px; }

/* Latin-only strings (prices, codes) stay LTR inside the RTL flow. */
body.abaplus .tutor-course-price,
body.abaplus .tutor-checkout-grand-total,
body.abaplus .tutor-cart-summery-bottom .tutor-cart-summery-item div:last-child { direction: ltr; unicode-bidi: isolate; text-align: start; }

/* ─────────────────────────────────────────────────────────────────────────
   16. RESPONSIVE
   ───────────────────────────────────────────────────────────────────────── */

@media (max-width: 1100px) {
	body.abaplus .tutor-cart-summery {
		position: static;
	}
}

@media (max-width: 860px) {
	body.abaplus .aba-checkout-auth__grid {
		grid-template-columns: 1fr;
	}
	body.abaplus .tutor-course-details-tab .tutor-nav {
		overflow-x: auto;
		flex-wrap: nowrap;
		scrollbar-width: none;
	}
	body.abaplus .tutor-course-details-tab .tutor-nav::-webkit-scrollbar {
		display: none;
	}
	body.abaplus .tutor-course-details-tab .tutor-nav-link {
		white-space: nowrap;
		padding-inline: 14px;
	}
	body.abaplus .tutor-checkout-details-inner,
	body.abaplus .tutor-checkout-billing-inner {
		padding: var(--aba-space-5);
	}
}

@media (max-width: 600px) {
	body.abaplus .tutor-course-card .tutor-card-body {
		padding: var(--aba-space-5);
	}
	body.abaplus .aba-checkout-auth__price {
		margin-inline-start: 0;
	}
	body.abaplus .tutor-checkout-payment-item {
		padding: 12px 14px;
	}
	body.abaplus .tutor-cart-course-item {
		padding: var(--aba-space-5);
	}
}

/* ─────────────────────────────────────────────────────────────────────────
   17. HARD OVERRIDES
   The only !important rules in this file. Each one beats a plugin utility
   class or inline style that cannot be won on specificity alone.
   ───────────────────────────────────────────────────────────────────────── */

/* .tutor-course-filter is emitted with an inline `style="text-align:right"`
   in course-archive-filter-bar.php — inline styles need !important. */
body.abaplus .tutor-course-filter[tutor-course-filter] { text-align: start !important; }

/* Tutor's icon font sets `font-family: tutor !important` on the accordion
   marker; re-assert our colour at the same weight. */
body.abaplus .tutor-accordion-item-header::after { color: var(--aba-primary) !important; }

/* ─────────────────────────────────────────────────────────────────────────
   13. PURCHASE BUTTON — legibility + mobile sticky bar

   Earlier revision pinned `.tutor-native-add-to-cart`, which turned out to be
   a class on the BUTTON itself rather than a wrapper — that is what produced
   the empty white pill floating at the bottom of the viewport. The button is
   now wrapped by the theme in `.aba-buy-bar` (see abaplus_add_to_cart_note in
   inc/tutor-integration.php), so the sticky container is markup we own and
   cannot be broken by a Tutor class rename.
   ───────────────────────────────────────────────────────────────────────── */

/* The label sits in nested spans that pick up colour from their own utility
   classes; on a filled button that landed same-on-same and read as blank. */
body.abaplus .tutor-btn-primary,
body.abaplus .tutor-btn-primary * {
	color: var(--aba-white) !important;
	-webkit-text-fill-color: var(--aba-white);
}

body.abaplus .tutor-btn-primary {
	background-color: var(--aba-primary) !important;
	border-color: var(--aba-primary) !important;
	min-height: 50px;
	/* Icon + label centred as one group. */
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	text-align: center;
}

body.abaplus .tutor-btn-primary:hover,
body.abaplus .tutor-btn-primary:focus {
	background-color: var(--aba-primary-dark) !important;
	border-color: var(--aba-primary-dark) !important;
}

/* Tutor's icon font renders as a ::before glyph inside a bare span; the
   utility margin it ships with fights the flex gap above. */
body.abaplus .tutor-btn-primary [class*="tutor-icon-"] {
	margin: 0 !important;
	font-size: 1.1em;
	line-height: 1;
}

/* "View Cart" — outline variant. Kept legible in the brand colour rather
   than inheriting whatever the surrounding utility class sets. */
body.abaplus .tutor-btn-outline-primary,
body.abaplus .tutor-btn-outline-primary * {
	color: var(--aba-primary) !important;
	-webkit-text-fill-color: var(--aba-primary);
}

body.abaplus .tutor-btn-outline-primary {
	background-color: var(--aba-white) !important;
	border-color: var(--aba-primary) !important;
	min-height: 50px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
}

body.abaplus .tutor-btn-outline-primary:hover,
body.abaplus .tutor-btn-outline-primary:hover * {
	color: var(--aba-white) !important;
	-webkit-text-fill-color: var(--aba-white);
}

body.abaplus .tutor-btn-outline-primary:hover {
	background-color: var(--aba-primary) !important;
}

/* ── The buy bar ──────────────────────────────────────────────────────── */
body.abaplus .aba-buy-bar {
	margin: 15px 0;
}

body.abaplus .aba-buy-bar .tutor-btn {
	width: 100%;
}

/* Mobile: pin it. On a phone the price card scrolls far above the fold once
   the description loads, leaving no reachable CTA. */
@media (max-width: 860px) {
	body.abaplus.abaplus-lms .aba-buy-bar {
		position: fixed;
		inset-inline: 0;
		inset-block-end: 0;
		z-index: 95;
		margin: 0;
		padding: 15px;
		padding-block-end: calc(15px + env(safe-area-inset-bottom));
		background: var(--aba-white);
		border-block-start: 1px solid var(--aba-line-soft);
		box-shadow: 0 -6px 20px rgba(var(--aba-ink-rgb), .10);
	}

	/* The WhatsApp note belongs in the sidebar, not in a pinned bar. */
	body.abaplus.abaplus-lms .aba-buy-bar .aba-buy-note {
		display: none;
	}

	/* Clear the bar, and lift the floating WhatsApp bubble above it. */
	body.abaplus.abaplus-lms {
		padding-block-end: 92px;
	}

	body.abaplus.abaplus-lms .wa-float {
		inset-block-end: 100px;
	}
}

/* ─────────────────────────────────────────────────────────────────────────
   14. CHECKOUT — billing fields
   The theme overrides Tutor's billing template (tutor/ecommerce/
   checkout-billing-form-fields.php) so every input carries a real
   <label for>. Layout is a plain two-column grid rather than Tutor's
   tutor-row/tutor-col classes, which is what collapsed the fields into a
   borderless table with no visible labels.
   ───────────────────────────────────────────────────────────────────────── */
body.abaplus .aba-billing-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 18px 16px;
}

body.abaplus .aba-billing-grid .aba-field--full {
	grid-column: 1 / -1;
}

/* The asterisk is decorative — the input's own `required` carries the
   meaning for assistive tech, hence aria-hidden in the template. */
body.abaplus .aba-req {
	color: var(--aba-bad);
}

body.abaplus .aba-field__hint {
	color: var(--aba-muted);
	font-size: .82rem;
	line-height: 1.6;
}

/* Tutor's own control class is still on the inputs so its JS keeps working;
   these rules make it defer to the theme's field styling. */
body.abaplus .aba-billing-grid .tutor-form-control {
	width: 100%;
	min-height: 46px;
}

@media (max-width: 640px) {
	body.abaplus .aba-billing-grid {
		grid-template-columns: 1fr;
		gap: 14px;
	}
}



/* ─────────────────────────────────────────────────────────────────────────
   15. LESSON PLAYER — custom UI over the YouTube IFrame API

   YouTube renders nothing here (controls=0): no logo, no title bar, no
   channel avatar. Everything visible below is ours, which is the only way
   to keep working controls while removing every link to youtube.com —
   `modestbranding` no longer suppresses the logo, and the logo lives inside
   YouTube's own control bar, so it cannot be masked without masking the
   controls too. Driven by assets/js/player.js.
   ───────────────────────────────────────────────────────────────────────── */
body.abaplus .aba-player {
	overflow: hidden;
	border-radius: var(--aba-radius, 14px);
	background: #0b0b0f;
	box-shadow: var(--aba-shadow, 0 8px 24px rgba(0, 0, 0, .12));
}

body.abaplus .aba-player__title {
	margin: 0;
	padding: 12px 16px;
	color: #fff;
	font-size: 1rem;
	line-height: 1.5;
	background: rgba(255, 255, 255, .04);
	border-block-end: 1px solid rgba(255, 255, 255, .07);
}

body.abaplus .aba-player__stage {
	position: relative;
	aspect-ratio: 16 / 9;
	background: #000;
}

/* The API swaps this div for the iframe, so both need to fill the stage. */
body.abaplus .aba-player__frame,
body.abaplus .aba-player__stage iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

/* Full-surface click catcher: every click becomes play/pause via the API,
   so no click ever reaches the iframe. */
body.abaplus .aba-player__surface {
	position: absolute;
	inset: 0;
	z-index: 2;
	width: 100%;
	height: 100%;
	padding: 0;
	border: 0;
	background: transparent;
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
}

body.abaplus .aba-player__surface:focus-visible {
	outline: 2px solid var(--aba-primary);
	outline-offset: -4px;
}

body.abaplus .aba-player__big {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	z-index: 3;
	display: grid;
	place-items: center;
	width: 74px;
	height: 74px;
	border-radius: 50%;
	background: rgba(var(--aba-primary-rgb), .92);
	color: #fff;
	pointer-events: none;
	box-shadow: 0 8px 28px rgba(0, 0, 0, .35);
	transition: opacity .2s ease, transform .2s ease;
}

body.abaplus .aba-player:hover .aba-player__big {
	transform: translate(-50%, -50%) scale(1.05);
}

body.abaplus .aba-player__spinner {
	position: absolute;
	top: 50%;
	left: 50%;
	margin: -17px 0 0 -17px;
	z-index: 4;
	width: 34px;
	height: 34px;
	border: 3px solid rgba(255, 255, 255, .25);
	border-top-color: #fff;
	border-radius: 50%;
	pointer-events: none;
	animation: abaSpin .8s linear infinite;
}

@keyframes abaSpin {
	to {
		transform: rotate(360deg);
	}
}

/* ── Control bar ──────────────────────────────────────────────────────── */
body.abaplus .aba-player__bar {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 10px 14px;
	background: #14141b;
	/* Latin numerals and a left-to-right transport order, even in RTL —
	   a seek bar that runs right-to-left reads as broken. */
	direction: ltr;
}

body.abaplus .aba-player__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: 36px;
	height: 36px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: transparent;
	color: #fff;
	cursor: pointer;
	transition: background-color .2s ease;
}

body.abaplus .aba-player__btn:hover {
	background: rgba(255, 255, 255, .12);
}

body.abaplus .aba-player__btn:focus-visible {
	outline: 2px solid var(--aba-primary);
	outline-offset: 2px;
}

body.abaplus .aba-player__time {
	flex-shrink: 0;
	color: rgba(255, 255, 255, .82);
	font-size: .8rem;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

/* Range input, restyled in both engines. --aba-progress is set by the JS
   each tick so the played portion reads as filled. */
body.abaplus .aba-player__seek {
	flex: 1 1 auto;
	min-width: 0;
	height: 20px;
	margin: 0;
	padding: 0;
	background: transparent;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
}

body.abaplus .aba-player__seek::-webkit-slider-runnable-track {
	height: 5px;
	border-radius: 9999px;
	background:
		linear-gradient(to right, var(--aba-primary) 0%, var(--aba-primary) var(--aba-progress, 0%), rgba(255, 255, 255, .22) var(--aba-progress, 0%), rgba(255, 255, 255, .22) 100%);
}

body.abaplus .aba-player__seek::-webkit-slider-thumb {
	-webkit-appearance: none;
	appearance: none;
	width: 13px;
	height: 13px;
	margin-top: -4px;
	border: 0;
	border-radius: 50%;
	background: #fff;
	box-shadow: 0 1px 4px rgba(0, 0, 0, .4);
}

body.abaplus .aba-player__seek::-moz-range-track {
	height: 5px;
	border-radius: 9999px;
	background: rgba(255, 255, 255, .22);
}

body.abaplus .aba-player__seek::-moz-range-progress {
	height: 5px;
	border-radius: 9999px;
	background: var(--aba-primary);
}

body.abaplus .aba-player__seek::-moz-range-thumb {
	width: 13px;
	height: 13px;
	border: 0;
	border-radius: 50%;
	background: #fff;
}

body.abaplus .aba-player__seek:focus-visible {
	outline: 2px solid var(--aba-primary);
	outline-offset: 3px;
	border-radius: 9999px;
}

body.abaplus .aba-player__rate {
	flex-shrink: 0;
	min-height: 30px;
	padding: 2px 6px;
	border: 1px solid rgba(255, 255, 255, .18);
	border-radius: 8px;
	background: transparent;
	color: #fff;
	font-size: .78rem;
	cursor: pointer;
}

body.abaplus .aba-player__rate option {
	color: #14141b;
}

/* Fullscreen: the whole player goes full-screen, so our bar stays visible
   instead of handing control back to YouTube. */
body.abaplus .aba-player:fullscreen {
	display: flex;
	flex-direction: column;
	border-radius: 0;
	background: #000;
}

body.abaplus .aba-player:fullscreen .aba-player__stage {
	flex: 1 1 auto;
	aspect-ratio: auto;
}

body.abaplus .aba-player:fullscreen .aba-player__title {
	flex-shrink: 0;
}

@media (max-width: 640px) {
	body.abaplus .aba-player__title {
		padding: 10px 12px;
		font-size: .92rem;
	}

	body.abaplus .aba-player__bar {
		gap: 6px;
		padding: 8px 10px;
	}

	body.abaplus .aba-player__btn {
		width: 32px;
		height: 32px;
	}

	body.abaplus .aba-player__time {
		font-size: .72rem;
	}

	/* Speed is the first thing to go when width runs out. */
	body.abaplus .aba-player__rate {
		display: none;
	}

	body.abaplus .aba-player__big {
		width: 60px;
		height: 60px;
	}
}

@media (prefers-reduced-motion: reduce) {
	body.abaplus .aba-player__spinner {
		animation-duration: 2s;
	}

	body.abaplus .aba-player:hover .aba-player__big {
		transform: translate(-50%, -50%);
	}
}

/* ─────────────────────────────────────────────────────────────────────────
   16. DASHBOARD — hide the tabs whose routes we blocked
   Student::get_courses_tab() builds this nav with no filter and the markup
   is rendered by a component that offers none either, so the only way to
   drop these two without forking a 135-line plugin template is to hide the
   links. The enforcement is not here: the routes themselves redirect (see
   abaplus_block_removed_dashboard_pages), so this is presentation only.
   ───────────────────────────────────────────────────────────────────────── */
body.abaplus .tutor-dashboard-courses-tab a[href*="my-quiz-attempts"],
body.abaplus .tutor-dashboard-courses-tab a[href*="courses/wishlist"],
body.abaplus .tutor-dashboard-permalinks a[href*="my-quiz-attempts"],
body.abaplus .tutor-dashboard-permalinks a[href*="courses/wishlist"] {
	display: none !important;
}