/**
 * MedExamium LMS — Design Tokens & Claymorphism Layer.
 *
 * Two jobs in one file, deliberately:
 *
 * 1. `:root` declares the canonical default value for every `--me-*`
 *    design token used anywhere in the plugin (frontend + admin). Every
 *    other MedExamium stylesheet is registered with this one as a
 *    dependency, so these defaults are always present before a component
 *    stylesheet's own (optional, legacy) local redeclaration runs. See
 *    class-theme-service.php for the admin-customizable override layer —
 *    these are only the built-in fallbacks, kept byte-for-byte in sync
 *    with MedExamium_Theme_Service::get_defaults().
 *
 * 2. A soft, rounded "Claymorphism" visual treatment (raised dual-tone
 *    shadows, generous radius, gentle hover lift) applied to the small
 *    set of shared class names already reused across every module —
 *    .medexamium-btn, .medexamium-card, .medexamium-status-badge, form
 *    inputs, tables, and progress bars. Because those class names are
 *    reused everywhere, this one additive layer is what makes Quiz
 *    Player, Course Player, Dashboard, Login/Account, Commerce,
 *    Affiliate, Gamification, and every admin screen look consistent —
 *    without editing each component's own layout rules. Nothing here
 *    sets display/position/width/flex — only shape, shadow, and color —
 *    so it can never break an existing layout, only restyle it.
 *
 * Toggle: disabling the "Claymorphism Design System" feature (Feature
 * Manager) stops this file from being enqueued; the `:root` token
 * defaults still load via the same-named block duplicated at the top of
 * each older component stylesheet, so color customization keeps working
 * either way.
 */

:root {
	--me-primary: #4f46e5;
	--me-primary-hover: #4338ca;
	--me-secondary: #6366f1;
	--me-accent: #06b6d4;

	--me-bg: #f6f8fb;
	--me-surface: #ffffff;
	--me-surface-alt: #f1f3f9;
	--me-dark-surface: #1a2333;
	--me-dark-surface-text: #ffffff;

	--me-border: #e3e8f0;
	--me-text: #1a2333;
	--me-text-muted: #6b7789;
	--me-heading: #0f172a;

	--me-link: #4f46e5;
	--me-link-hover: #4338ca;

	--me-success: #16a34a;
	--me-success-bg: #ecfdf3;
	--me-warning: #f59e0b;
	--me-warning-bg: #fffbeb;
	--me-danger: #dc2626;
	--me-danger-bg: #fef2f2;
	--me-info: #0284c7;
	--me-info-bg: #eff6ff;

	--me-table-header-bg: #f1f3f9;
	--me-table-row-hover: #f6f8fb;
	--me-input-bg: #ffffff;
	--me-input-border: #e3e8f0;
	--me-focus-ring: #4f46e533;

	--me-radius: 14px;
	--me-shadow: 0 10px 26px rgba(17, 24, 39, 0.10), 0 2px 6px rgba(17, 24, 39, 0.06);
	--me-shadow-sm: 0 3px 10px rgba(17, 24, 39, 0.08);
	--me-shadow-inset: inset 0 2px 5px rgba(17, 24, 39, 0.08);
}

/* Dark-mode variants some templates opt into via a `.medexamium-dark`
 * class already used by the Quiz/Course players — extended here so the
 * same toggle darkens the shared clay components too. */
.medexamium-dark {
	--me-bg: #10131a;
	--me-surface: #1b2030;
	--me-surface-alt: #222840;
	--me-border: #2b3242;
	--me-text: #e9ecf3;
	--me-text-muted: #9aa3b5;
	--me-table-header-bg: #222840;
	--me-table-row-hover: #232a3c;
	--me-input-bg: #1b2030;
	--me-input-border: #2b3242;
}

/* ---------------------------------------------------------------
 * Claymorphism layer — soft, tactile, rounded.
 * ------------------------------------------------------------- */

.medexamium-card,
.medexamium-clay-card {
	background: var(--me-surface);
	border: 1px solid var(--me-border);
	border-radius: var(--me-radius);
	box-shadow: var(--me-shadow);
	transition: box-shadow .18s ease, transform .18s ease;
}

.medexamium-btn {
	border-radius: calc(var(--me-radius) * 0.7);
	box-shadow: var(--me-shadow-sm);
	transition: box-shadow .15s ease, transform .1s ease, filter .15s ease;
	border: 1px solid transparent;
}
.medexamium-btn:hover { transform: translateY(-1px); filter: brightness(1.03); }
.medexamium-btn:active { transform: translateY(0); box-shadow: var(--me-shadow-inset); }
.medexamium-btn:focus-visible { outline: 3px solid var(--me-focus-ring); outline-offset: 2px; }

.medexamium-btn-primary { background: var(--me-primary); color: var(--me-dark-surface-text); }
.medexamium-btn-primary:hover { background: var(--me-primary-hover); }
.medexamium-btn-secondary { background: var(--me-secondary); color: var(--me-dark-surface-text); }
.medexamium-btn-success { background: var(--me-success); color: var(--me-dark-surface-text); }
.medexamium-btn-warning { background: var(--me-warning); color: var(--me-dark-surface-text); }
.medexamium-btn-danger { background: var(--me-danger); color: var(--me-dark-surface-text); }
.medexamium-btn-info { background: var(--me-info); color: var(--me-dark-surface-text); }
.medexamium-btn-outline {
	background: var(--me-surface); color: var(--me-text); border-color: var(--me-border);
	box-shadow: var(--me-shadow-sm);
}
.medexamium-btn-outline:hover { background: var(--me-bg); }
.medexamium-btn:disabled,
.medexamium-btn[disabled] { opacity: .55; cursor: default; transform: none; box-shadow: none; }

.medexamium-status-badge {
	display: inline-block; padding: 5px 12px; border-radius: 999px;
	font-size: 12px; font-weight: 700; box-shadow: var(--me-shadow-sm);
}

/* Inputs — same rounded, gently inset treatment everywhere a MedExamium
 * form appears (Login/Register/Account, Checkout, Assignments, admin). */
.medexamium-input,
.medexamium-wrap input[type="text"],
.medexamium-wrap input[type="email"],
.medexamium-wrap input[type="password"],
.medexamium-wrap input[type="number"],
.medexamium-wrap input[type="search"],
.medexamium-wrap input[type="url"],
.medexamium-wrap select,
.medexamium-wrap textarea,
.medexamium-account-shell input[type="text"],
.medexamium-account-shell input[type="email"],
.medexamium-account-shell input[type="password"],
.medexamium-account-shell select,
.medexamium-dashboard-shell input[type="text"],
.medexamium-curriculum input[type="text"],
.medexamium-checkout input[type="text"],
.medexamium-checkout input[type="email"] {
	background: var(--me-input-bg);
	border: 1px solid var(--me-input-border);
	border-radius: calc(var(--me-radius) * 0.6);
	box-shadow: var(--me-shadow-inset);
	transition: box-shadow .15s ease, border-color .15s ease;
}
.medexamium-input:focus,
.medexamium-wrap input:focus,
.medexamium-wrap select:focus,
.medexamium-wrap textarea:focus,
.medexamium-account-shell input:focus,
.medexamium-dashboard-shell input:focus {
	outline: none;
	border-color: var(--me-primary);
	box-shadow: var(--me-shadow-inset), 0 0 0 3px var(--me-focus-ring);
}

/* Tables */
.medexamium-table thead th,
table.medexamium-table th {
	background: var(--me-table-header-bg);
	border-radius: 0;
}
.medexamium-table tbody tr:hover,
table.medexamium-table tbody tr:hover {
	background: var(--me-table-row-hover);
}

/* Progress bars — used on Dashboard, My Courses, Curriculum, Course Player */
.medexamium-progress-bar {
	background: var(--me-border);
	border-radius: 999px;
	box-shadow: var(--me-shadow-inset);
	overflow: hidden;
}
.medexamium-progress-fill {
	background: linear-gradient(90deg, var(--me-primary), var(--me-secondary));
	border-radius: 999px;
}

/* Notices */
.medexamium-notice {
	border-radius: var(--me-radius);
	box-shadow: var(--me-shadow-sm);
	background: var(--me-surface);
	border: 1px solid var(--me-border);
}

/* Radial progress ("speedometer") — Dashboard, My Courses */
.medexamium-radial-progress { position: relative; display: inline-block; }
.medexamium-radial-progress svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.medexamium-radial-track {
	fill: none; stroke: var(--me-border); stroke-width: 8;
}
.medexamium-radial-fill {
	fill: none; stroke: var(--me-primary); stroke-width: 8; stroke-linecap: round;
	transition: stroke-dashoffset .4s ease;
}
.medexamium-radial-label {
	position: absolute; inset: 0; display: flex; flex-direction: column;
	align-items: center; justify-content: center; text-align: center; line-height: 1.1;
}
.medexamium-radial-percent { font-size: 18px; font-weight: 800; color: var(--me-heading); }
.medexamium-radial-caption { font-size: 9px; color: var(--me-text-muted); margin-top: 2px; }
/* Elementor Course Display widgets (Phase 21) */
.medexamium-el-course-title { margin: 0 0 12px; color: var(--me-heading); }
.medexamium-el-course-image img { border-radius: var(--me-radius); display: block; width: 100%; height: auto; }
.medexamium-el-course-description { color: var(--me-text); line-height: 1.6; }
.medexamium-el-course-stats { display: flex; flex-wrap: wrap; gap: 18px; }
.medexamium-el-stat { display: flex; flex-direction: column; }
.medexamium-el-stat-value { font-size: 20px; font-weight: 800; color: var(--me-heading); }
.medexamium-el-stat-label { font-size: 11px; color: var(--me-text-muted); text-transform: uppercase; letter-spacing: .4px; }
.medexamium-el-course-price { font-size: 28px; font-weight: 800; color: var(--me-primary); }
.medexamium-el-course-price-free { color: var(--me-success); }
.medexamium-el-course-price-manual { font-size: 16px; color: var(--me-text-muted); }
.medexamium-el-notice { color: var(--me-text-muted); font-style: italic; font-size: 13px; }
.medexamium-el-lesson-title { margin: 0 0 12px; color: var(--me-heading); }
.medexamium-el-prev-next { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin: 20px 0; }
.medexamium-lesson-elementor-content { min-height: 40px; }

.medexamium-breadcrumbs {
	display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
	font-size: 13px; color: var(--me-text-muted); margin: 0 0 16px;
}
.medexamium-breadcrumbs a { color: var(--me-link); text-decoration: none; }
.medexamium-breadcrumbs a:hover { color: var(--me-link-hover); text-decoration: underline; }
.medexamium-breadcrumbs .medexamium-crumb-sep { opacity: .6; }
.medexamium-breadcrumbs .medexamium-crumb-current { color: var(--me-text); font-weight: 600; }

/* Modals / overlays */
.medexamium-modal-overlay {
	background: rgba(15, 23, 42, 0.5);
}
.medexamium-modal,
.medexamium-pause-overlay > div {
	background: var(--me-surface);
	border-radius: var(--me-radius);
	box-shadow: var(--me-shadow);
}