/* ============================================================
Matca LMS Plugin — Frontend Styles
============================================================ */
:root {
--matca-primary: #4f46e5;
--matca-primary-dark: #3730a3;
--matca-secondary: #7c3aed;
--matca-accent: #06b6d4;
--matca-success: #10b981;
--matca-warning: #f59e0b;
--matca-danger: #ef4444;
--matca-text: #1e293b;
--matca-text-light: #64748b;
--matca-bg: #f8fafc;
--matca-card-bg: #ffffff;
--matca-border: #e2e8f0;
--matca-radius: 12px;
--matca-shadow: 0 4px 24px rgba(0,0,0,.08);
--matca-shadow-hover: 0 8px 40px rgba(79,70,229,.18);
--matca-transition: .22s cubic-bezier(.4,0,.2,1);
--matca-font: inherit;
/* — Extended tokens (frontend redesign): additive, parallels admin.css.
No existing value above is modified. --matca-shadow stays the
pronounced public-facing elevation; --matca-shadow-sm is the new
resting shadow for bordered cards. — */
--matca-primary-light: #eef2ff;
--matca-success-light: #ecfdf5;
--matca-warning-light: #fffbeb;
--matca-danger-light: #fef2f2;
--matca-radius-sm: 8px;
--matca-shadow-sm: 0 1px 3px rgba(0,0,0,.06);
--matca-space-1: 4px;
--matca-space-2: 8px;
--matca-space-3: 12px;
--matca-space-4: 16px;
--matca-space-5: 24px;
--matca-space-6: 32px;
--matca-fs-label: .92rem;
--matca-fs-desc: .82rem;
}
/* ── Base ── */
.matca-courses-grid,
.matca-single-course,
.matca-dashboard,
.matca-certificate { box-sizing: border-box; font-family: var(--matca-font); color: var(--matca-text); }
.matca-lesson-wrapper { box-sizing: border-box; font-family: var(--matca-font); color: var(--matca-text); max-width: 1920px; margin: auto; }
/* ── Grid ── */
.matca-courses-grid { display: grid; gap: 24px; }
.matca-cols-1 { grid-template-columns: 1fr; }
.matca-cols-2 { grid-template-columns: repeat(2, 1fr); }
.matca-cols-3 { grid-template-columns: repeat(3, 1fr); }
.matca-cols-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1024px) { .matca-cols-4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 768px) { .matca-cols-3,.matca-cols-4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .matca-cols-2,.matca-cols-3,.matca-cols-4 { grid-template-columns: 1fr; } }
/* ── Course Card ── */
.matca-course-card {
background: var(--matca-card-bg);
border: 1px solid var(--matca-border);
border-radius: var(--matca-radius);
box-shadow: var(--matca-shadow-sm);
overflow: hidden;
display: flex;
flex-direction: column;
transition: transform var(--matca-transition), box-shadow var(--matca-transition), border-color var(--matca-transition);
}
.matca-course-card:hover {
transform: translateY(-4px);
box-shadow: var(--matca-shadow-hover);
border-color: transparent;
}
.matca-course-thumb {
aspect-ratio: 16 / 10;
background-size: cover;
background-position: center;
background-color: var(--matca-bg);
position: relative;
overflow: hidden;
}
.matca-badge-free {
position: absolute; top: var(--matca-space-3); left: var(--matca-space-3);
background: var(--matca-success-light); color: #0f6e56;
font-size: 11px; font-weight: 700; text-transform: uppercase;
padding: 3px 10px; border-radius: 20px;
}
.matca-card-progress-bar {
position: absolute; bottom: 0; left: 0; right: 0;
height: 4px; background: rgba(255,255,255,.3);
}
.matca-card-progress-fill { height: 100%; background: var(--matca-success); }
.matca-course-card-body { padding: var(--matca-space-4) var(--matca-space-5); flex: 1; }
.matca-course-cats { display: flex; flex-wrap: wrap; gap: var(--matca-space-1); margin-bottom: var(--matca-space-2); }
.matca-cat-tag {
display: inline-block; font-size: 11px; font-weight: 600;
color: var(--matca-primary-dark); background: var(--matca-primary-light);
text-transform: uppercase; letter-spacing: .5px; text-decoration: none;
padding: 3px 9px; border-radius: 20px; margin: 0;
transition: var(--matca-transition);
}
.matca-cat-tag:hover { background: var(--matca-primary); color: #fff; }
.matca-course-title { font-size: 1.05rem; font-weight: 700; line-height: 1.4; margin: 0 0 8px; }
.matca-course-title a { color: var(--matca-text); text-decoration: none; }
.matca-course-title a:hover { color: var(--matca-primary); }
.matca-course-excerpt { font-size: .88rem; color: var(--matca-text-light); margin: 0 0 12px; line-height: 1.5; }
.matca-course-meta { display: flex; flex-wrap: wrap; gap: 12px; font-size: .8rem; color: var(--matca-text-light); }
.matca-meta-item { display: flex; align-items: center; gap: 4px; }
.matca-meta-item svg { width: 14px; height: 14px; fill: currentColor; }
.matca-course-card-footer {
display: flex; align-items: center; justify-content: space-between;
padding: var(--matca-space-3) var(--matca-space-5); border-top: 1px solid var(--matca-border);
}
.matca-course-instructor { display: flex; align-items: center; gap: 8px; font-size: .82rem; }
.matca-course-instructor img { border-radius: 50%; }
.matca-course-price-action { display: flex; align-items: center; gap: 10px; }
.matca-price { font-weight: 700; color: var(--matca-primary); font-size: 1rem; }
/* ── Buttons ── */
.matca-btn {
display: inline-flex; align-items: center; justify-content: center;
padding: 9px 20px; border-radius: 8px;
font-size: .88rem; font-weight: 600; cursor: pointer;
text-decoration: none; border: none; transition: var(--matca-transition);
white-space: nowrap; line-height: 1;
}
.matca-btn-primary { background: var(--matca-primary); color: #fff; }
.matca-btn-primary:hover { background: var(--matca-primary-dark); color: #fff; }
.matca-btn-outline { background: transparent; color: var(--matca-primary); border: 2px solid var(--matca-primary); }
.matca-btn-outline:hover { background: var(--matca-primary); color: #fff; }
.matca-btn-continue { background: var(--matca-success); color: #fff; }
.matca-btn-continue:hover { background: #059669; color: #fff; }
.matca-btn-enroll { background: var(--matca-primary); color: #fff; }
.matca-btn-enroll:hover { background: var(--matca-primary-dark); color: #fff; }
.matca-btn-complete { background: var(--matca-accent); color: #fff; padding: 12px 28px; font-size: 1rem; }
.matca-btn-complete.matca-completed { background: var(--matca-success); cursor: default; }
.matca-btn-sm { padding: 7px 14px; font-size: .82rem; }
/* ── Notice ── */
.matca-notice {
padding: 16px 20px; border-radius: var(--matca-radius);
background: #eff6ff; color: #1e40af; border: 1px solid #bfdbfe;
font-size: .95rem;
}
.matca-locked { background: #fff7ed; color: #92400e; border-color: #fed7aa; }
/* ── Progress bar ── */
.matca-progress-bar {
width: 100%; height: 8px; border-radius: 100px;
background: var(--matca-border); overflow: hidden;
}
.matca-progress-fill { height: 100%; background: linear-gradient(90deg, var(--matca-primary), var(--matca-accent)); border-radius: 100px; transition: width .5s; }
/* ── Single Course ── */
/* Stacked layout: 2-column hero (image | content), full-width action box,
* then description / curriculum / reviews. */
.matca-course-hero {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--matca-space-6);
align-items: start;
margin-bottom: var(--matca-space-6);
}
.matca-course-hero-image img {
width: 100%;
border-radius: var(--matca-radius);
object-fit: cover;
max-height: 360px;
}
@media (max-width: 768px) {
.matca-course-hero { grid-template-columns: 1fr; }
}
.matca-course-hero-content h1 { font-size: 2rem; font-weight: 800; margin: 0 0 var(--matca-space-3); line-height: 1.2; }
.matca-course-excerpt { color: var(--matca-text-light); font-size: 1.02rem; line-height: 1.6; margin: 0 0 var(--matca-space-4); }
.matca-course-stats { display: flex; flex-wrap: wrap; gap: var(--matca-space-4); margin: var(--matca-space-4) 0; font-size: .9rem; color: var(--matca-text-light); }
.matca-course-stats span::before { content: '•'; margin-right: 8px; }
.matca-course-stats span:first-child::before { content: ''; margin: 0; }
.matca-course-instructor-info { display: flex; align-items: center; gap: 10px; font-size: .9rem; }
.matca-course-instructor-info img { border-radius: 50%; }
/* Enroll / purchase / progress box — full-width, below the hero */
.matca-course-action-box {
--matca-action-pad: var(--matca-space-5);
background: var(--matca-card-bg);
border: 1px solid var(--matca-border);
border-radius: var(--matca-radius);
padding: var(--matca-action-pad);
box-shadow: var(--matca-shadow);
margin-bottom: var(--matca-space-6);
}
.matca-course-action-box .matca-course-completed-badge { margin-bottom: 0; }
.matca-course-action-box .matca-reset-progress { margin-top: var(--matca-space-2); }
.matca-price-big { font-size: 2rem; font-weight: 800; color: var(--matca-primary); display: block; margin-bottom: var(--matca-space-4); }
.matca-progress-wrap { margin-bottom: var(--matca-space-4); }
.matca-progress-wrap p { margin: 0 0 8px; font-weight: 600; }
/* Billing summary helpers (extracted from inline styles) */
.matca-billing-label { font-size: var(--matca-fs-desc); font-weight: 600; color: var(--matca-text-light); }
.matca-billing-edit { font-size: .78rem; }
.matca-billing-meta { color: var(--matca-text-light); }
.matca-course-description { margin-bottom: var(--matca-space-6); }
.matca-course-description h2 { font-size: 1.5rem; font-weight: 700; margin-bottom: 16px; }
.matca-curriculum h2 { font-size: 1.5rem; font-weight: 700; margin-bottom: 8px; }
.matca-curriculum-meta { color: var(--matca-text-light); font-size: .9rem; margin-bottom: 16px; }
.matca-lesson-list-front { list-style: none; padding: 0; margin: 0; border: 1px solid var(--matca-border); border-radius: var(--matca-radius); overflow: hidden; }
.matca-lesson-row {
display: flex; align-items: center; gap: 12px;
padding: 14px 16px; border-bottom: 1px solid var(--matca-border);
transition: background var(--matca-transition);
}
.matca-lesson-row:last-child { border-bottom: none; }
.matca-lesson-row:hover { background: #f8faff; }
.matca-lesson-row.matca-done { background: #f0fdf4; }
.matca-lesson-row.matca-locked { opacity: .65; }
.matca-lesson-number { width: 24px; text-align: center; font-size: .8rem; color: var(--matca-text-light); }
.matca-lesson-icon { width: 20px; text-align: center; }
.matca-lesson-info { flex: 1; }
.matca-lesson-info a { color: var(--matca-text); text-decoration: none; font-weight: 500; }
.matca-lesson-info a:hover { color: var(--matca-primary); }
.matca-preview-badge { font-size: .7rem; font-weight: 600; text-transform: uppercase; background: #dbeafe; color: #1d4ed8; padding: 2px 8px; border-radius: 20px; margin-left: 8px; }
.matca-lesson-duration { font-size: .8rem; color: var(--matca-text-light); }
/* ── Lesson player ── */
/* Sticky offset for the lesson topbar (course title + progress bar).
Override this value via Matca LMS → Settings to match your theme's
sticky header height, e.g. --matca-header-offset: 80px; */
.matca-lesson-wrapper { --matca-header-offset: 0px; }
.matca-lesson-topbar {
display: flex; align-items: center; gap: 16px;
padding: 12px 20px; background: var(--matca-card-bg);
border-bottom: 1px solid var(--matca-border); margin-bottom: 0;
position: sticky;
top: var(--matca-header-offset, 0px);
z-index: 50;
}
.matca-back-link { color: var(--matca-primary); text-decoration: none; font-weight: 600; font-size: .9rem; white-space: nowrap; }
.matca-lesson-progress-bar { flex: 1; height: 6px; border-radius: 100px; background: var(--matca-border); overflow: hidden; }
.matca-lesson-progress-fill { height: 100%; background: linear-gradient(90deg, var(--matca-primary), var(--matca-accent)); }
.matca-progress-label { font-size: .8rem; font-weight: 600; color: var(--matca-primary); }
.matca-lesson-layout { display: grid; grid-template-columns: 300px 1fr; min-height: calc(100vh - 60px); }
@media (max-width: 768px) { .matca-lesson-layout { grid-template-columns: 1fr; } }
.matca-lesson-sidebar {
border-right: 1px solid var(--matca-border);
padding: 24px 16px; background: var(--matca-bg);
/* Stick below the topbar — account for both header and topbar height */
max-height: calc(100vh - var(--matca-header-offset, 0px) - 60px);
overflow-y: auto;
position: sticky;
top: calc(var(--matca-header-offset, 0px) + 60px);
}
@media (max-width: 768px) { .matca-lesson-sidebar { display: none; } }
.matca-lesson-sidebar h3 { font-size: .9rem; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; color: var(--matca-text-light); margin: 0 0 16px; }
.matca-sidebar-lessons { list-style: none; padding: 0; margin: 0; }
.matca-sidebar-lessons li { border-radius: 8px; margin-bottom: 4px; }
.matca-sidebar-lessons li a { display: flex; align-items: center; gap: 10px; padding: 10px 12px; color: var(--matca-text); text-decoration: none; font-size: .87rem; border-radius: 8px; transition: background var(--matca-transition); }
.matca-sidebar-lessons li a:hover { background: #e0e7ff; color: var(--matca-primary); }
.matca-sidebar-lessons li.matca-active a { background: var(--matca-primary); color: #fff; font-weight: 600; }
.matca-sidebar-lessons li.matca-done a { color: var(--matca-success); }
.matca-sidebar-check { width: 22px; height: 22px; border-radius: 50%; border: 2px solid currentColor; display: flex; align-items: center; justify-content: center; font-size: .7rem; flex-shrink: 0; }
.matca-sidebar-lessons li.matca-done .matca-sidebar-check { background: var(--matca-success); border-color: var(--matca-success); color: #fff; }
.matca-lesson-main { padding: 40px; min-width: 860px; }
@media (max-width: 768px) { .matca-lesson-main { padding: 20px; } }
.matca-lesson-title { font-size: 2rem; font-weight: 800; margin: 0 0 32px; }
.matca-video-container { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; border-radius: var(--matca-radius); margin-bottom: 32px; background: #000; }
.matca-video-container iframe,
.matca-video-container video { position: absolute; inset: 0; width: 100%; height: 100%; }
.matca-lesson-content { font-size: 1.05rem; line-height: 1.8; margin-bottom: 32px; }
.matca-lesson-content h2 { font-size: 1.5rem; margin-top: 40px; }
.matca-lesson-content h3 { font-size: 1.25rem; margin-top: 32px; }
.matca-lesson-content img { max-width: 100%; border-radius: 8px; }
.matca-lesson-content pre { background: #1e293b; color: #e2e8f0; padding: 20px; border-radius: 8px; overflow-x: auto; }
.matca-lesson-content code { background: #f1f5f9; padding: 2px 6px; border-radius: 4px; font-size: .9em; }
.matca-lesson-attachments { background: var(--matca-bg); border-radius: var(--matca-radius); padding: 20px; margin-bottom: 32px; }
.matca-lesson-attachments h3 { margin: 0 0 12px; font-size: 1rem; }
.matca-lesson-attachments ul { list-style: none; padding: 0; margin: 0; }
.matca-lesson-attachments li a { color: var(--matca-primary); text-decoration: none; font-size: .9rem; }
.matca-lesson-footer { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 16px; padding-top: 32px; border-top: 1px solid var(--matca-border); }
.matca-lesson-nav { display: flex; gap: 12px; }
.matca-lesson-foot-left { display: flex; gap: 12px; align-items: center; }
/* ── Dashboard ── */
.matca-dashboard-header { display: flex; align-items: center; gap: 20px; background: linear-gradient(135deg, var(--matca-primary), var(--matca-secondary)); color: #fff; border-radius: var(--matca-radius); padding: 28px 32px; margin-bottom: 32px; }
.matca-dashboard-avatar img { border-radius: 50%; border: 3px solid rgba(255,255,255,.4); }
.matca-dashboard-welcome h2 { margin: 0 0 4px; font-size: 1.5rem; }
.matca-dashboard-welcome p { margin: 0; opacity: .8; }
/* Dashboard tab buttons.
* Themes/page builders (Elementor, Astra, etc) often inject aggressive
* styling onto button selectors — orange backgrounds, large padding,
* rounded corners. We explicitly reset to a clean tab-bar look, using
* the !important escape hatch where needed because these overrides
* tend to use very high specificity. */
.matca-dashboard-tabs {
display: flex;
gap: 4px;
margin-bottom: 24px;
border-bottom: 2px solid var(--matca-border);
padding-bottom: 0;
}
.matca-tab-btn,
.matca-tab-btn:focus,
.matca-tab-btn:active,
button.matca-tab-btn {
background: none !important;
background-color: transparent !important;
border: none !important;
border-radius: 0 !important;
box-shadow: none !important;
padding: 0.65rem 1.25rem !important;
margin: 0 !important;
font-size: .95rem !important;
font-weight: 600 !important;
line-height: 1.4 !important;
color: var(--matca-text-light) !important;
cursor: pointer;
border-bottom: 2px solid transparent !important;
margin-bottom: -2px !important;
transition: var(--matca-transition);
text-transform: none !important;
letter-spacing: normal !important;
height: auto !important;
min-height: 0 !important;
}
.matca-tab-btn:hover {
color: var(--matca-primary) !important;
background: none !important;
background-color: transparent !important;
}
.matca-tab-btn.active {
color: var(--matca-primary) !important;
border-bottom-color: var(--matca-primary) !important;
background: none !important;
background-color: transparent !important;
}
.matca-tab-panel { display: none; }
.matca-tab-panel.active { display: block; }
.matca-dashboard-courses { display: flex; flex-direction: column; gap: 16px; }
.matca-dashboard-course-card { display: grid; grid-template-columns: 120px 1fr auto; gap: 20px; align-items: center; background: var(--matca-card-bg); border-radius: var(--matca-radius); padding: 16px; border: 1px solid var(--matca-border); }
@media (max-width: 600px) { .matca-dashboard-course-card { grid-template-columns: 1fr; } }
.matca-dcc-thumb { height: 80px; border-radius: 8px; background-size: cover; background-position: center; background-color: var(--matca-bg); position: relative; overflow: hidden; }
.matca-completion-badge { position: absolute; inset: 0; background: rgba(16,185,129,.8); display: flex; align-items: center; justify-content: center; color: #fff; font-weight: 700; font-size: .8rem; }
.matca-dcc-body h3 { margin: 0 0 12px; font-size: 1rem; }
.matca-dcc-body h3 a { color: var(--matca-text); text-decoration: none; }
.matca-dcc-body h3 a:hover { color: var(--matca-primary); }
.matca-dcc-meta { font-size: .82rem; color: var(--matca-text-light); margin-top: 8px; }
.matca-empty-state { text-align: center; padding: 60px 20px; color: var(--matca-text-light); }
/* Certificates */
.matca-certificates-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 20px; }
.matca-cert-card { background: var(--matca-card-bg); border: 1px solid var(--matca-border); border-radius: var(--matca-radius); padding: 24px; text-align: center; }
.matca-cert-icon { font-size: 3rem; margin-bottom: 12px; }
.matca-cert-card h4 { margin: 0 0 8px; }
.matca-cert-card p { color: var(--matca-text-light); font-size: .85rem; margin-bottom: 16px; }
/* Profile */
.matca-profile-info p { margin: 0 0 12px; }
/* ── Certificate Print ── */
.matca-certificate { max-width: 800px; margin: 40px auto; padding: 20px; }
.matca-certificate-inner { border: 8px solid var(--matca-primary); border-radius: 16px; padding: 60px; text-align: center; background: #fff; box-shadow: var(--matca-shadow); }
.matca-cert-header h1 { font-size: 2.5rem; font-weight: 800; color: var(--matca-primary); margin: 0 0 32px; }
.matca-cert-presented { color: var(--matca-text-light); margin-bottom: 8px; }
.matca-cert-name { font-size: 2rem; font-weight: 800; color: var(--matca-text); margin: 0 0 16px; }
.matca-cert-completed { color: var(--matca-text-light); margin-bottom: 8px; }
.matca-cert-course { font-size: 1.4rem; font-weight: 700; color: var(--matca-primary); margin: 0 0 32px; }
.matca-cert-date,.matca-cert-id { color: var(--matca-text-light); font-size: .9rem; margin: 4px 0; }
.matca-cert-footer { margin-top: 40px; display: flex; justify-content: space-between; align-items: flex-end; }
.matca-cert-signature { font-size: 1.1rem; font-weight: 700; border-top: 2px solid var(--matca-text); padding-top: 8px; }
@media print { .matca-btn { display: none !important; } .matca-certificate { margin: 0; padding: 0; } }
/* ============================================================
Quiz styles
============================================================ */
.matca-quiz-wrapper {
max-width: 760px;
margin: 0 auto;
}
.matca-quiz-header {
background: linear-gradient(135deg, var(--matca-primary), var(--matca-secondary));
color: #fff;
border-radius: var(--matca-radius);
padding: 28px 32px;
margin-bottom: 28px;
}
.matca-quiz-header h2 { margin: 0 0 12px; font-size: 1.6rem; font-weight: 800; }
.matca-quiz-info { display: flex; flex-wrap: wrap; gap: 20px; font-size: .9rem; opacity: .9; }
.matca-quiz-info span { display: flex; align-items: center; gap: 6px; }
.matca-quiz-info span::before { content: '•'; margin-right: -8px; }
.matca-quiz-info span:first-child::before { display: none; }
/* Attempts history */
.matca-quiz-history { margin-bottom: 28px; }
.matca-quiz-history h4 { font-size: 1rem; font-weight: 700; margin: 0 0 12px; }
.matca-attempts-table { width: 100%; border-collapse: collapse; font-size: .9rem; }
.matca-attempts-table th,
.matca-attempts-table td { padding: 10px 14px; text-align: left; border-bottom: 1px solid var(--matca-border); }
.matca-attempts-table th { background: var(--matca-bg); font-weight: 700; font-size: .82rem; text-transform: uppercase; letter-spacing: .4px; color: var(--matca-text-light); }
.matca-badge-pass { background: #dcfce7; color: #166534; padding: 3px 10px; border-radius: 20px; font-size: .78rem; font-weight: 700; }
.matca-badge-fail { background: #fee2e2; color: #991b1b; padding: 3px 10px; border-radius: 20px; font-size: .78rem; font-weight: 700; }
/* Question blocks */
.matca-question {
background: var(--matca-card-bg);
border: 1px solid var(--matca-border);
border-radius: var(--matca-radius);
padding: 24px 28px;
margin-bottom: 20px;
transition: border-color var(--matca-transition);
}
.matca-question:focus-within { border-color: var(--matca-primary); box-shadow: 0 0 0 3px rgba(79,70,229,.1); }
.matca-question-num { font-size: .78rem; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; color: var(--matca-primary); margin-bottom: 10px; }
.matca-question-text { font-size: 1.05rem; font-weight: 600; line-height: 1.5; margin: 0 0 20px; color: var(--matca-text); }
.matca-options-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; }
.matca-option-label {
display: flex; align-items: center; gap: 14px;
padding: 13px 18px;
border: 2px solid var(--matca-border);
border-radius: 10px;
cursor: pointer;
transition: border-color var(--matca-transition), background var(--matca-transition);
font-size: .95rem;
}
.matca-option-label:hover { border-color: var(--matca-primary); background: #f0f0ff; }
.matca-option-label input[type="radio"] { accent-color: var(--matca-primary); width: 18px; height: 18px; flex-shrink: 0; }
.matca-option-label:has(input:checked) { border-color: var(--matca-primary); background: #eef2ff; }
.matca-short-answer {
padding: 12px 16px;
border: 2px solid var(--matca-border);
border-radius: 10px;
font-size: 1rem;
transition: border-color var(--matca-transition);
width: 100%;
box-sizing: border-box;
}
.matca-short-answer:focus { outline: none; border-color: var(--matca-primary); box-shadow: 0 0 0 3px rgba(79,70,229,.1); }
.matca-quiz-submit-row { margin-top: 28px; text-align: center; }
.matca-btn-submit-quiz { padding: 14px 40px; font-size: 1.05rem; }
/* Timer */
.matca-quiz-timer {
display: inline-flex; align-items: center; gap: 8px;
background: var(--matca-bg);
border: 2px solid var(--matca-border);
border-radius: 30px;
padding: 8px 20px;
font-size: 1.1rem;
font-weight: 700;
font-variant-numeric: tabular-nums;
margin-bottom: 24px;
color: var(--matca-text);
}
.matca-quiz-timer.matca-timer-warning { border-color: var(--matca-danger); color: var(--matca-danger); animation: matca-pulse 1s infinite; }
@keyframes matca-pulse { 0%,100% { opacity: 1; } 50% { opacity: .6; } }
/* Quiz result */
.matca-quiz-result {
border-radius: var(--matca-radius);
overflow: hidden;
border: 1px solid var(--matca-border);
margin-top: 16px;
}
/* Compact status bar — message left, score right */
.matca-quiz-status-bar {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
padding: 14px 20px;
color: #fff;
}
.matca-pass-bar { background: linear-gradient(135deg, var(--matca-success), #059669); }
.matca-fail-bar { background: linear-gradient(135deg, var(--matca-danger), #b91c1c); }
.matca-quiz-status-msg { display: flex; flex-direction: column; gap: 2px; }
.matca-quiz-status-msg strong { font-size: .95rem; font-weight: 700; }
.matca-quiz-status-msg span { font-size: .82rem; opacity: .88; }
.matca-quiz-score-inline { font-size: 1.5rem; font-weight: 900; flex-shrink: 0; }
/* Feedback items */
.matca-q-feedback {
padding: 20px 24px;
border-left: 4px solid var(--matca-border);
margin: 1px 0;
background: var(--matca-card-bg);
}
.matca-q-feedback.matca-correct { border-left-color: var(--matca-success); }
.matca-q-feedback.matca-incorrect { border-left-color: var(--matca-danger); }
.matca-q-feedback p { margin: 0 0 6px; font-size: .92rem; }
.matca-q-feedback .matca-q-text { font-weight: 600; margin-bottom: 10px; }
.matca-q-feedback span { font-weight: 700; color: var(--matca-text-light); }
.matca-q-feedback.matca-incorrect span { color: var(--matca-danger); }
.matca-explanation { font-style: italic; color: var(--matca-text-light) !important; }
/* ============================================================
Toast notifications
============================================================ */
.matca-toast {
position: fixed;
bottom: 24px; right: 24px;
min-width: 260px; max-width: 380px;
padding: 14px 20px;
border-radius: 12px;
font-size: .92rem;
font-weight: 600;
color: #fff;
box-shadow: 0 8px 32px rgba(0,0,0,.18);
z-index: 99999;
opacity: 0;
transform: translateY(16px);
transition: opacity .3s, transform .3s;
pointer-events: none;
}
.matca-toast.matca-toast-show { opacity: 1; transform: translateY(0); }
.matca-toast-success { background: var(--matca-success); }
.matca-toast-error { background: var(--matca-danger); }
.matca-toast-info { background: var(--matca-primary); }
.matca-toast-warning { background: var(--matca-warning); color: #1c1917; }
/* ============================================================
Enroll-free loading state
============================================================ */
.matca-btn[disabled] { opacity: .6; cursor: wait; }
.matca-btn-complete.matca-completed[disabled] { opacity: 1; cursor: default; pointer-events: none; }
/* ============================================================
Responsive tweaks
============================================================ */
@media (max-width: 600px) {
.matca-quiz-header { padding: 20px; }
.matca-quiz-header h2 { font-size: 1.3rem; }
.matca-question { padding: 18px; }
.matca-toast { left: 16px; right: 16px; bottom: 16px; max-width: none; min-width: 0; }
.matca-lesson-title { font-size: 1.4rem; }
.matca-course-hero-content h1 { font-size: 1.5rem; }
}
/* ============================================================
Utility: hidden / visible helpers
============================================================ */
.matca-hidden { display: none !important; }
.matca-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
/* ============================================================
Course Archive / Listing page
============================================================ */
.matca-archive-wrap { max-width: 1200px; margin: 0 auto; padding: 0 20px 60px; }
.matca-archive-hero {
text-align: center;
padding: 60px 20px 40px;
}
.matca-archive-hero h1 { font-size: 2.5rem; font-weight: 900; margin: 0 0 12px; }
.matca-archive-desc { font-size: 1.1rem; color: var(--matca-text-light); margin: 0; }
/* Filter bar */
.matca-archive-filters {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: var(--matca-space-3);
margin-bottom: var(--matca-space-4);
padding: var(--matca-space-4) var(--matca-space-5);
background: var(--matca-card-bg);
border: 1px solid var(--matca-border);
border-radius: var(--matca-radius);
box-shadow: var(--matca-shadow-sm);
}
.matca-filter-form {
display: flex;
flex-wrap: wrap;
gap: var(--matca-space-3);
align-items: center;
flex: 1 1 100%;
}
.matca-filter-search {
position: relative;
flex: 1 1 220px;
min-width: 180px;
}
.matca-filter-search input {
width: 100%;
padding: 9px 40px 9px 14px;
border: 2px solid var(--matca-border);
border-radius: 8px;
font-size: .92rem;
outline: none;
transition: border-color var(--matca-transition);
box-sizing: border-box;
}
.matca-filter-search input:focus { border-color: var(--matca-primary); }
/* Search icon lives INSIDE the input. Themes/page builders aggressively
* inject backgrounds + padding onto button selectors (the same problem the
* dashboard tab bar fights), which turned this into an orange square. Reset
* hard with !important so it stays a flat, transparent icon. */
.matca-search-btn,
.matca-search-btn:hover,
.matca-search-btn:focus,
.matca-search-btn:active,
button.matca-search-btn {
position: absolute !important;
right: 10px !important; top: 50% !important;
transform: translateY(-50%) !important;
background: none !important;
background-color: transparent !important;
border: none !important;
border-radius: 0 !important;
box-shadow: none !important;
padding: 0 !important;
margin: 0 !important;
width: auto !important; height: auto !important; min-height: 0 !important;
color: var(--matca-text-light) !important;
display: flex !important; align-items: center; justify-content: center;
cursor: pointer;
}
.matca-search-btn:hover { color: var(--matca-primary) !important; }
.matca-search-btn svg { display: block; }
.matca-filter-form select {
flex: 0 1 190px;
min-width: 150px;
appearance: none; -webkit-appearance: none; -moz-appearance: none;
padding: 9px 34px 9px 14px;
border: 2px solid var(--matca-border);
border-radius: var(--matca-radius-sm);
font-size: .88rem;
color: var(--matca-text);
background-color: #fff;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 12px center;
cursor: pointer;
outline: none;
transition: border-color var(--matca-transition);
}
.matca-filter-form select:focus { border-color: var(--matca-primary); }
.matca-results-count {
font-size: var(--matca-fs-desc);
color: var(--matca-text-light);
margin: 0 0 var(--matca-space-4) var(--matca-space-1);
}
/* Pagination */
.matca-pagination {
display: flex;
justify-content: center;
gap: 6px;
margin-top: 48px;
flex-wrap: wrap;
}
.matca-pagination .page-numbers {
display: inline-flex; align-items: center; justify-content: center;
width: 40px; height: 40px;
border-radius: 8px;
border: 2px solid var(--matca-border);
color: var(--matca-text);
text-decoration: none;
font-weight: 600;
font-size: .9rem;
transition: var(--matca-transition);
}
.matca-pagination .page-numbers:hover { border-color: var(--matca-primary); color: var(--matca-primary); }
.matca-pagination .page-numbers.current { background: var(--matca-primary); border-color: var(--matca-primary); color: #fff; }
.matca-pagination .page-numbers.prev,
.matca-pagination .page-numbers.next { width: auto; padding: 0 14px; }
/* Empty state */
.matca-no-courses {
text-align: center;
padding: 80px 20px;
color: var(--matca-text-light);
}
.matca-empty-icon { font-size: 3.5rem; margin-bottom: 16px; }
.matca-no-courses h3 { font-size: 1.4rem; font-weight: 700; color: var(--matca-text); margin: 0 0 8px; }
.matca-no-courses p { margin: 0 0 24px; }
/* Page wrap */
.matca-page-wrap { padding: 0 20px; }
.matca-single-course { max-width: 1140px; margin-left: auto; margin-right: auto; padding: 40px 20px; }
/* Mobile (≤767px): single course + archive get 3rem vertical padding and drop
their own horizontal padding, so the 20px (1.25rem) from .matca-page-wrap is
the only horizontal padding (instead of stacking to 40px). Scoped to these
two containers — other plugin pages are unaffected; desktop is unchanged. */
@media (max-width: 767px) {
.matca-single-course { padding: 3rem 0; }
.matca-archive-wrap { padding: 3rem 0; }
}
/* ============================================================
Ratings & Reviews
============================================================ */
.matca-ratings-section { margin-top: 48px; padding-top: 40px; border-top: 2px solid var(--matca-border); }
.matca-ratings-section h2 { font-size: 1.5rem; font-weight: 700; margin: 0 0 24px; }
.matca-ratings-summary {
display: flex; gap: 32px; align-items: flex-start;
flex-wrap: wrap; margin-bottom: 32px;
}
.matca-avg-score { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.matca-avg-number { font-size: 3.5rem; font-weight: 900; color: var(--matca-primary); line-height: 1; }
.matca-rating-count { font-size: .85rem; color: var(--matca-text-light); }
.matca-no-ratings { color: var(--matca-text-light); font-style: italic; }
/* Rating bars */
.matca-rating-bars { flex: 1; min-width: 200px; }
.matca-rating-bar-row { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; font-size: .85rem; }
.matca-rating-bar-row span:first-child { width: 28px; text-align: right; color: var(--matca-text-light); white-space: nowrap; }
.matca-rating-bar-row span:last-child { width: 36px; color: var(--matca-text-light); }
.matca-bar-track { flex: 1; height: 8px; background: var(--matca-border); border-radius: 100px; overflow: hidden; }
.matca-bar-fill { height: 100%; background: var(--matca-warning); border-radius: 100px; }
/* Stars */
.matca-star { font-size: 1.3rem; line-height: 1; cursor: default; }
.matca-star-filled { color: var(--matca-warning); }
.matca-star-half { color: var(--matca-warning); opacity: .6; }
.matca-star-empty { color: #d1d5db; }
.matca-stars-interactive .matca-star { cursor: pointer; transition: transform .15s; }
.matca-stars-interactive .matca-star:hover,
.matca-stars-interactive .matca-star.matca-hovered { transform: scale(1.25); color: var(--matca-warning); }
.matca-stars-interactive .matca-star.matca-selected { color: var(--matca-warning); }
/* Review form */
.matca-review-form { background: var(--matca-bg); border-radius: var(--matca-radius); padding: 24px; margin-bottom: 32px; }
.matca-review-form h3 { margin: 0 0 16px; font-size: 1.1rem; font-weight: 700; }
.matca-star-picker { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.matca-star-picker label { font-weight: 600; font-size: .9rem; }
.matca-stars-interactive { font-size: 1.6rem; }
.matca-review-textarea {
width: 100%; box-sizing: border-box;
padding: 12px 14px; border: 2px solid var(--matca-border); border-radius: 8px;
font-size: .95rem; font-family: inherit; resize: vertical; min-height: 100px;
transition: border-color var(--matca-transition); margin-bottom: 12px;
}
.matca-review-textarea:focus { outline: none; border-color: var(--matca-primary); }
.matca-your-review { background: #f0fdf4; border: 1px solid #bbf7d0; border-radius: var(--matca-radius); padding: 20px; margin-bottom: 32px; }
.matca-your-review h3 { margin: 0 0 8px; font-size: 1rem; font-weight: 700; color: var(--matca-success); }
/* Reviews list */
.matca-reviews-list { display: flex; flex-direction: column; gap: 20px; margin-bottom: 20px; }
.matca-review-item { padding: 20px; border: 1px solid var(--matca-border); border-radius: var(--matca-radius); background: var(--matca-card-bg); }
.matca-review-header { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 12px; }
.matca-review-header img { border-radius: 50%; flex-shrink: 0; }
.matca-review-meta { display: flex; flex-direction: column; gap: 3px; }
.matca-review-meta strong { font-size: .95rem; }
.matca-review-date { font-size: .78rem; color: var(--matca-text-light); }
.matca-review-body { margin: 0; font-size: .95rem; line-height: 1.6; color: var(--matca-text); }
/* Load more */
.matca-load-more-reviews { margin-top: 8px; }
/* ============================================================
Stripe Payment styles
============================================================ */
.matca-stripe-msg {
margin-top: 12px;
padding: 10px 14px;
border-radius: 8px;
font-size: .9rem;
}
.matca-stripe-msg.error { background: #fee2e2; color: #991b1b; }
.matca-stripe-msg.success { background: #dcfce7; color: #166534; }
.matca-stripe-success-banner {
display: flex;
align-items: center;
gap: 12px;
background: linear-gradient(135deg, #10b981, #059669);
color: #fff;
padding: 16px 24px;
border-radius: var(--matca-radius);
margin-bottom: 20px;
font-size: 1rem;
font-weight: 600;
animation: matca-slide-in .4s ease;
}
.matca-stripe-success-icon {
width: 32px; height: 32px;
background: rgba(255,255,255,.25);
border-radius: 50%;
display: flex; align-items: center; justify-content: center;
font-size: 1.1rem;
flex-shrink: 0;
}
@keyframes matca-slide-in {
from { opacity: 0; transform: translateY(-12px); }
to { opacity: 1; transform: translateY(0); }
}
/* ============================================================
User Account Widget (Elementor Header)
============================================================ */
.matca-ua-wrap {
display: flex;
align-items: center;
position: relative;
font-family: var(--matca-font);
}
/* ── Logged-in trigger button ── */
.matca-ua-trigger {
display: inline-flex;
align-items: center;
gap: 8px;
background: none;
border: none;
cursor: pointer;
padding: 6px 10px;
border-radius: 8px;
color: inherit;
font-size: .9rem;
font-weight: 600;
font-family: inherit;
transition: background .18s;
line-height: 1;
}
.matca-ua-trigger:hover { background: rgba(0,0,0,.06); }
.matca-ua-trigger.matca-ua-no-dropdown { cursor: default; }
.matca-ua-trigger.matca-ua-no-dropdown:hover { background: none; }
.matca-ua-avatar {
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 50%;
background: rgba(255,255,255,.18);
flex-shrink: 0;
color: currentColor;
}
.matca-ua-avatar svg {
display: block;
}
.matca-ua-avatar img {
display: block;
border-radius: 50%;
object-fit: cover;
}
/* Larger icon in dropdown header */
.matca-ua-dropdown-header .matca-ua-avatar.matca-ua-avatar-lg {
background: #f1f5f9;
color: #64748b;
padding: 4px;
}
.matca-ua-name {
max-width: 120px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.matca-ua-chevron {
display: flex;
align-items: center;
transition: transform .2s;
}
.matca-ua-trigger[aria-expanded="true"] .matca-ua-chevron {
transform: rotate(180deg);
}
/* ── Dropdown ── */
.matca-ua-dropdown {
position: absolute;
top: calc(100% + 10px);
right: 0;
min-width: 220px;
background: #fff;
border-radius: 12px;
box-shadow: 0 8px 40px rgba(0,0,0,.14), 0 0 0 1px rgba(0,0,0,.06);
padding: 6px 0;
z-index: 99999;
opacity: 0;
visibility: hidden;
transform: translateY(-8px) scale(.97);
transform-origin: top right;
transition: opacity .12s, transform .12s, visibility .12s;
pointer-events: none;
}
.matca-ua-dropdown.matca-ua-open {
opacity: 1;
visibility: visible;
transform: translateY(0) scale(1);
pointer-events: auto;
}
.matca-ua-dropdown-header {
display: flex;
align-items: center;
gap: 10px;
padding: 12px 16px 10px;
}
.matca-ua-dropdown-header img {
border-radius: 50%;
flex-shrink: 0;
}
.matca-ua-dropdown-user-info {
min-width: 0;
display: flex;
flex-direction: column;
gap: 2px;
}
.matca-ua-dropdown-user-info strong {
font-size: .88rem;
font-weight: 700;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.matca-ua-dropdown-user-info span {
font-size: .75rem;
color: #64748b;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.matca-ua-dropdown-divider {
height: 1px;
background: #e2e8f0;
margin: 4px 0;
}
.matca-ua-dropdown a {
display: flex;
align-items: center;
gap: 10px;
padding: 9px 16px;
font-size: .88rem;
font-weight: 500;
color: #1e293b;
text-decoration: none;
transition: background .13s, color .13s;
}
.matca-ua-dropdown a:hover {
background: #f1f5f9;
color: #4f46e5;
}
.matca-ua-logout {
color: #ef4444 !important;
}
.matca-ua-logout:hover {
background: #fef2f2 !important;
color: #dc2626 !important;
}
.matca-ua-menu-icon {
font-size: 1rem;
width: 20px;
text-align: center;
flex-shrink: 0;
}
/* ── Logged-out state ── */
.matca-ua-logged-out {
display: flex;
align-items: center;
gap: 10px;
}
.matca-ua-register-link {
font-size: .88rem;
font-weight: 600;
color: #64748b;
text-decoration: none;
padding: 7px 12px;
border-radius: 8px;
transition: color .15s, background .15s;
}
.matca-ua-register-link:hover {
color: #4f46e5;
background: #f1f5f9;
}
.matca-ua-login-btn {
display: inline-flex;
align-items: center;
padding: 8px 18px;
background: #4f46e5;
color: #fff !important;
font-size: .88rem;
font-weight: 700;
border-radius: 8px;
text-decoration: none !important;
transition: background .15s, transform .15s;
line-height: 1.2;
}
.matca-ua-login-btn:hover {
background: #3730a3;
transform: translateY(-1px);
}
/* Login icon: hidden on desktop (text-only button is unchanged); shown on
mobile via the breakpoint below. */
.matca-ua-login-icon {
display: none;
align-items: center;
justify-content: center;
}
.matca-ua-login-icon svg { display: block; }
/* Mobile (≤767px): collapse the User Account widget to icon-only so it fits
next to the logo + hamburger. Both states show the same accent circular
user icon. Logged in -> accent icon only (name + chevron hidden); logged
out -> accent icon only ("Log In" text hidden). */
@media (max-width: 767px) {
/* Logged in */
.matca-ua-name { display: none; }
.matca-ua-chevron { display: none; }
.matca-ua-trigger { padding: 0; gap: 0; }
.matca-ua-trigger:hover { background: none; }
.matca-ua-logged-in .matca-ua-avatar {
width: 40px;
height: 40px;
background: #ff5a00;
color: #fff;
border-radius: 50%;
}
.matca-ua-logged-in .matca-ua-avatar svg {
width: 24px;
height: 24px;
}
/* Logged out */
.matca-ua-login-text { display: none; }
.matca-ua-login-icon { display: inline-flex; }
.matca-ua-login-btn {
padding: 8px;
border-radius: 50%;
}
}
/* ── RTL support ── */
[dir="rtl"] .matca-ua-dropdown { right: auto; left: 0; transform-origin: top left; }
/* ── User Reviews in Dashboard ── */
.matca-user-reviews-list { display: flex; flex-direction: column; gap: 14px; }
.matca-user-review-card {
background: var(--matca-card-bg);
border: 1px solid var(--matca-border);
border-radius: var(--matca-radius);
padding: 16px 20px;
}
.matca-user-review-header {
display: flex;
justify-content: space-between;
align-items: flex-start;
gap: 12px;
margin-bottom: 8px;
}
.matca-user-review-header strong { display: block; font-size: .95rem; margin-bottom: 4px; }
.matca-review-stars { color: #f59e0b; letter-spacing: -1px; font-size: .9rem; }
.matca-review-status-badge {
flex-shrink: 0;
padding: 3px 10px;
border-radius: 20px;
font-size: .75rem;
font-weight: 700;
white-space: nowrap;
}
.matca-user-review-text {
margin: 0 0 8px;
font-size: .9rem;
line-height: 1.6;
color: var(--matca-text);
}
.matca-user-review-date { font-size: .78rem; color: var(--matca-text-light); }
/* Pending review note shown after submission */
.matca-review-pending-note {
margin: 10px 0 0;
padding: 8px 12px;
background: #fef9c3;
border-left: 3px solid #f59e0b;
border-radius: 0 6px 6px 0;
font-size: .85rem;
color: #92400e;
}
/* ── Lesson locked screen ── */
.matca-lesson-locked-screen {
display: flex;
align-items: center;
justify-content: center;
min-height: 60vh;
}
.matca-locked-content {
text-align: center;
max-width: 420px;
padding: 48px 32px;
}
.matca-lock-icon {
font-size: 3.5rem;
display: block;
margin-bottom: 16px;
}
.matca-locked-content h2 {
font-size: 1.6rem;
font-weight: 800;
margin: 0 0 12px;
}
.matca-locked-content p {
color: var(--matca-text-light);
margin: 0 0 24px;
line-height: 1.6;
}
/* ── Course completed badge ── */
.matca-course-completed-badge {
display: inline-flex;
align-items: center;
gap: 8px;
background: linear-gradient(135deg, #10b981, #059669);
color: #fff;
padding: 10px 20px;
border-radius: 8px;
font-weight: 700;
font-size: 1rem;
margin-bottom: 12px;
}
/* ── Reset progress button ── */
.matca-reset-progress {
font-size: .85rem;
opacity: .8;
}
.matca-reset-progress:hover { opacity: 1; }
/* ── Quiz result enhancements ── */
.matca-course-complete-banner {
display: flex;
align-items: center;
gap: 16px;
background: linear-gradient(135deg, #10b981, #059669);
color: #fff;
padding: 20px 24px;
border-radius: var(--matca-radius);
margin: 16px 0;
}
.matca-complete-icon { font-size: 2.5rem; flex-shrink: 0; }
.matca-complete-text { display: flex; flex-direction: column; gap: 4px; }
.matca-complete-text strong { font-size: 1.15rem; font-weight: 800; }
.matca-complete-text span { font-size: .9rem; opacity: .9; }
.matca-quiz-actions {
display: flex;
gap: 12px;
flex-wrap: wrap;
margin: 16px 0;
}
.matca-quiz-feedback-list { margin-top: 20px; }
/* Locked quiz in sidebar */
.matca-sidebar-link-disabled {
display: flex;
align-items: center;
gap: 10px;
padding: 8px 16px;
color: var(--matca-text-light);
opacity: 0.55;
cursor: not-allowed;
font-size: .88rem;
}
/* ── Certificate card title in dashboard (point 5) ── */
.matca-cert-card h4 {
font-size: 1.25rem;
line-height: 1.3;
}
/* ── Completed course badge on dashboard cards (point 3) ── */
.matca-dcc-completed-badge {
display: inline-flex;
align-items: center;
gap: 4px;
font-size: .72rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: .5px;
background: linear-gradient(135deg, #10b981, #059669);
color: #fff;
padding: 3px 10px;
border-radius: 20px;
margin-top: 6px;
}
/* ── Modern Restart Confirm Modal (point 6) ── */
.matca-modal-overlay {
position: fixed;
inset: 0;
background: rgba(15, 23, 42, .55);
backdrop-filter: blur(4px);
z-index: 100000;
display: flex;
align-items: center;
justify-content: center;
opacity: 0;
transition: opacity .2s ease;
}
.matca-modal-overlay.matca-modal-visible { opacity: 1; }
.matca-modal {
background: #fff;
border-radius: 16px;
box-shadow: 0 20px 60px rgba(0,0,0,.2);
max-width: 420px;
width: 90%;
padding: 32px;
text-align: center;
transform: scale(.92);
transition: transform .25s cubic-bezier(.4,0,.2,1);
}
.matca-modal-overlay.matca-modal-visible .matca-modal { transform: scale(1); }
.matca-modal-icon {
width: 56px;
height: 56px;
border-radius: 50%;
background: #fef2f2;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 16px;
font-size: 1.5rem;
}
.matca-modal h3 {
font-size: 1.15rem;
font-weight: 700;
color: #1e293b;
margin: 0 0 8px;
}
.matca-modal p {
color: #64748b;
font-size: .9rem;
line-height: 1.5;
margin: 0 0 8px;
}
.matca-modal-warning {
background: #fffbeb;
border: 1px solid #fde68a;
border-radius: 8px;
padding: 12px 16px;
margin: 16px 0;
text-align: left;
font-size: .82rem;
color: #92400e;
line-height: 1.5;
}
.matca-modal-actions {
display: flex;
gap: 10px;
margin-top: 20px;
}
.matca-modal-actions button {
flex: 1;
padding: 10px 16px;
border-radius: 8px;
font-size: .88rem;
font-weight: 600;
cursor: pointer;
border: none;
transition: all .15s;
}
.matca-modal-cancel {
background: #f1f5f9;
color: #475569;
}
.matca-modal-cancel:hover { background: #e2e8f0; }
.matca-modal-confirm {
background: #ef4444;
color: #fff;
}
.matca-modal-confirm:hover { background: #dc2626; }
/* ============================================================
Sections (Chapters) — Frontend
============================================================ */
/* ── Course page sections ── */
.matca-curriculum-section {
border: 1px solid var(--matca-border);
border-radius: var(--matca-radius);
margin-bottom: 10px;
overflow: hidden;
background: var(--matca-card-bg);
}
.matca-section-front-header {
display: flex;
align-items: center;
gap: 12px;
padding: 14px 18px;
background: var(--matca-bg);
cursor: pointer;
user-select: none;
transition: background .15s;
}
.matca-section-front-header:hover { background: #eef2ff; }
.matca-sec-toggle {
font-size: .65rem;
color: var(--matca-text-light);
width: 14px;
flex-shrink: 0;
transition: transform .2s;
}
.matca-sec-collapsed .matca-sec-toggle { transform: rotate(-90deg); }
.matca-sec-title-wrap { flex: 1; }
.matca-sec-title-wrap strong {
font-size: .95rem;
font-weight: 700;
color: var(--matca-text);
display: block;
}
.matca-sec-meta {
font-size: .78rem;
color: var(--matca-text-light);
}
.matca-sec-progress-mini {
width: 60px;
height: 4px;
background: var(--matca-border);
border-radius: 100px;
overflow: hidden;
flex-shrink: 0;
}
.matca-sec-progress-fill {
height: 100%;
background: var(--matca-success);
border-radius: 100px;
transition: width .3s;
}
.matca-curriculum-section .matca-lesson-list-front {
border-top: 1px solid var(--matca-border);
}
.matca-sec-collapsed .matca-lesson-list-front { display: none; }
.matca-sec-collapsed .matca-section-front-header { border-radius: var(--matca-radius); }
/* ── Sidebar sections ── */
.matca-sidebar-section { margin-bottom: 4px; }
.matca-sidebar-sec-header {
display: flex;
align-items: center;
gap: 8px;
padding: 10px 16px;
cursor: pointer;
user-select: none;
border-radius: 6px;
transition: background .15s;
}
.matca-sidebar-sec-header:hover { background: rgba(79,70,229,.06); }
.matca-sidebar-sec-header strong {
flex: 1;
font-size: .82rem;
font-weight: 700;
color: var(--matca-text);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.matca-sidebar-sec-count {
font-size: .72rem;
color: var(--matca-text-light);
white-space: nowrap;
}
.matca-sidebar-sec-progress {
height: 3px;
background: var(--matca-border);
border-radius: 100px;
margin: 0 16px 4px;
overflow: hidden;
}
.matca-sidebar-sec-progress-fill {
height: 100%;
background: var(--matca-success);
border-radius: 100px;
}
.matca-sec-collapsed .matca-sidebar-lessons { display: none; }
.matca-sec-collapsed .matca-sidebar-sec-progress { display: none; }
/* ============================================================
Orders Tab
============================================================ */
.matca-orders-table {
width: 100%;
border-collapse: collapse;
border-radius: var(--matca-radius);
overflow: hidden;
border: 1px solid var(--matca-border);
font-size: .88rem;
}
.matca-orders-table thead { background: var(--matca-bg); }
.matca-orders-table th,
.matca-orders-table td { padding: 12px 16px; text-align: left; border-bottom: 1px solid var(--matca-border); }
.matca-orders-table th { font-weight: 600; color: var(--matca-text); font-size: .82rem; text-transform: uppercase; letter-spacing: .3px; }
.matca-orders-table tbody tr:hover { background: #fafbfc; }
.matca-order-badge {
display: inline-block;
padding: 3px 10px;
border-radius: 20px;
font-size: .72rem;
font-weight: 700;
}
/* ============================================================
Profile Form
============================================================ */
.matca-profile-section {
background: var(--matca-card-bg);
border: 1px solid var(--matca-border);
border-radius: var(--matca-radius);
padding: 24px;
margin-bottom: 20px;
}
.matca-profile-section h3 {
margin: 0 0 16px;
font-size: 1rem;
font-weight: 700;
color: var(--matca-text);
}
.matca-profile-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 16px;
}
@media (max-width: 600px) { .matca-profile-grid { grid-template-columns: 1fr; } }
.matca-form-group { display: flex; flex-direction: column; gap: 4px; }
.matca-form-group label {
font-size: .82rem;
font-weight: 600;
color: var(--matca-text-light);
}
.matca-input {
padding: 10px 14px;
border: 1px solid var(--matca-border);
border-radius: 8px;
font-size: .9rem;
transition: border-color .15s, box-shadow .15s;
font-family: var(--matca-font);
}
.matca-input:focus {
border-color: var(--matca-primary);
box-shadow: 0 0 0 3px rgba(79,70,229,.1);
outline: none;
}
.matca-input:disabled {
background: var(--matca-bg);
color: var(--matca-text-light);
cursor: not-allowed;
}
.matca-form-hint { font-size: .75rem; color: var(--matca-text-light); }
.matca-profile-actions {
display: flex;
align-items: center;
gap: 16px;
flex-wrap: wrap;
}
.matca-profile-meta { font-size: .82rem; color: var(--matca-text-light); }
/* Profile two-column layout
*
* Defensive rule: hide any direct children of the layout grid. wpautop
* (or other content filters in some themes / page builders) can inject
* empty paragraphs between block-level siblings, and those
elements
* become extra grid children that throw off the column placement of the
* real .matca-profile-col-* divs.
*/
.matca-profile-layout > p {
display: none !important;
}
.matca-profile-layout {
display: grid;
grid-template-columns: 1fr;
gap: 20px;
}
.matca-profile-col-left,
.matca-profile-col-right {
display: flex;
flex-direction: column;
gap: 20px;
min-width: 0;
}
@media (min-width: 768px) {
.matca-profile-layout {
grid-template-columns: 1fr 1fr;
align-items: start;
}
}
/* ============================================================
MOBILE-FIRST: Dashboard Tabs
============================================================ */
.matca-dashboard-tabs {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
}
.matca-dashboard-tabs::-webkit-scrollbar { display: none; }
@media (max-width: 700px) {
.matca-tab-btn { padding: .55rem 1rem; font-size: .82rem; white-space: nowrap; }
}
/* ============================================================
MOBILE-FIRST: Dashboard Course Cards
============================================================ */
@media (max-width: 600px) {
.matca-dashboard-course-card {
grid-template-columns: 1fr;
gap: 10px;
padding: 14px;
}
.matca-dcc-thumb { height: 120px; border-radius: 8px; }
.matca-dcc-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.matca-dcc-actions .matca-btn { flex: 1; text-align: center; min-width: 0; }
}
/* ============================================================
MOBILE-FIRST: Orders Table → Card Layout
============================================================ */
@media (max-width: 700px) {
.matca-orders-table thead { display: none; }
.matca-orders-table,
.matca-orders-table tbody,
.matca-orders-table tr,
.matca-orders-table td { display: block; width: 100%; }
.matca-orders-table tr {
border: 1px solid var(--matca-border);
border-radius: var(--matca-radius);
padding: 14px;
margin-bottom: 12px;
background: var(--matca-card-bg);
}
.matca-orders-table td {
padding: 4px 0;
border: none;
font-size: .88rem;
}
.matca-orders-table td::before {
content: attr(data-label);
display: inline-block;
font-weight: 600;
font-size: .78rem;
color: var(--matca-text-light);
min-width: 80px;
margin-right: 8px;
}
}
/* ============================================================
MOBILE-FIRST: Profile
============================================================ */
@media (max-width: 600px) {
.matca-profile-section { padding: 16px; }
.matca-profile-grid { grid-template-columns: 1fr; gap: 12px; }
.matca-profile-actions { flex-direction: column; align-items: stretch; }
.matca-profile-actions .matca-btn { text-align: center; }
.matca-profile-actions .matca-profile-meta { text-align: center; }
.matca-profile-actions a[style*="margin-left:auto"] { margin-left: 0 !important; }
.matca-billing-type-toggle { flex-direction: column; }
}
/* ============================================================
MOBILE-FIRST: Certificates Grid
============================================================ */
@media (max-width: 600px) {
.matca-certificates-grid { grid-template-columns: 1fr; }
.matca-cert-card { padding: 16px; }
}
/* ============================================================
MOBILE-FIRST: Notifications
============================================================ */
@media (max-width: 600px) {
.matca-notification-item { padding: 12px; }
.matca-notif-link { gap: 10px; }
.matca-notif-icon { font-size: 1.2rem; }
}
/* ============================================================
MOBILE-FIRST: Course Page
============================================================ */
@media (max-width: 768px) {
.matca-course-action-box { --matca-action-pad: var(--matca-space-4); }
.matca-billing-summary { padding: 12px 14px; }
}
/* ============================================================
MOBILE-FIRST: Lesson Page
============================================================ */
@media (max-width: 768px) {
.matca-lesson-topbar { flex-direction: column; gap: 8px; padding: 12px 16px; }
.matca-lesson-footer { flex-direction: column; align-items: stretch; padding: 12px 16px; }
.matca-lesson-foot-left,
.matca-lesson-nav { flex-direction: column; gap: 8px; width: 100%; }
.matca-lesson-foot-left .matca-btn,
.matca-lesson-nav .matca-btn { width: 100%; text-align: center; }
}
/* ============================================================
MOBILE-FIRST: Review Cards
============================================================ */
@media (max-width: 600px) {
.matca-review-card { padding: 14px; }
.matca-review-header { flex-direction: column; gap: 4px; }
.matca-review-meta { font-size: .78rem; }
}
/* ============================================================
MOBILE-FIRST: Quiz
============================================================ */
@media (max-width: 600px) {
.matca-quiz-status-bar { flex-direction: column; gap: 6px; text-align: center; }
.matca-quiz-actions { flex-direction: column; gap: 8px; }
.matca-quiz-actions .matca-btn { width: 100%; text-align: center; }
}
/* ============================================================
MOBILE-FIRST: Curriculum Sections
============================================================ */
@media (max-width: 600px) {
.matca-curriculum-section { border-radius: 8px; }
.matca-sec-header { padding: 12px 14px; }
.matca-lesson-row { padding: 10px 14px; }
}
/* Profile notices */
.matca-notice-success { background: #ecfdf5; border: 1px solid #a7f3d0; color: #065f46; padding: 12px 16px; border-radius: 8px; margin-bottom: 16px; }
.matca-notice-error { background: #fef2f2; border: 1px solid #fecaca; color: #991b1b; padding: 12px 16px; border-radius: 8px; margin-bottom: 16px; }
/* ============================================================
Review Replies (frontend)
============================================================ */
.matca-review-reply {
margin-top: 10px;
padding: 10px 14px;
background: var(--matca-bg);
border-left: 3px solid var(--matca-primary);
border-radius: 0 8px 8px 0;
font-size: .85rem;
}
.matca-review-reply strong {
color: var(--matca-primary);
font-size: .78rem;
text-transform: uppercase;
letter-spacing: .3px;
}
.matca-review-reply p { margin: 4px 0 0; color: var(--matca-text); }
/* ============================================================
News / Notifications Tab
============================================================ */
.matca-tab-badge {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 20px;
height: 20px;
padding: 0 6px;
border-radius: 10px;
background: var(--matca-danger, #ef4444);
color: #fff;
font-size: .68rem;
font-weight: 700;
margin-left: 6px;
line-height: 1;
}
.matca-notifications-list {
display: flex;
flex-direction: column;
gap: 4px;
}
.matca-notification-item {
display: flex;
align-items: center;
gap: 0;
border-radius: var(--matca-radius, 12px);
background: var(--matca-card-bg, #fff);
border: 1px solid var(--matca-border, #e2e8f0);
transition: background .15s, opacity .15s;
overflow: hidden;
}
.matca-notification-item:hover {
background: var(--matca-primary-light, #eef2ff);
}
.matca-notification-item.matca-notif-read {
opacity: .55;
background: var(--matca-bg, #f8fafc);
}
.matca-notification-item.matca-notif-read:hover { opacity: .75; }
.matca-notif-link {
display: flex;
align-items: center;
gap: 14px;
flex: 1;
padding: 14px 18px;
text-decoration: none;
color: var(--matca-text, #1e293b);
min-width: 0;
}
.matca-notif-icon {
font-size: 1.4rem;
flex-shrink: 0;
width: 36px;
height: 36px;
display: flex;
align-items: center;
justify-content: center;
background: var(--matca-bg, #f8fafc);
border-radius: 10px;
}
.matca-notif-body { flex: 1; min-width: 0; }
.matca-notif-body p {
margin: 0;
font-size: .9rem;
line-height: 1.4;
}
.matca-notif-date {
font-size: .75rem;
color: var(--matca-text-light, #64748b);
margin-top: 2px;
display: block;
}
.matca-notif-dismiss {
flex-shrink: 0;
width: 24px;
height: 24px;
display: inline-flex;
align-items: center;
justify-content: center;
background: transparent !important;
border: none !important;
box-shadow: none !important;
outline: none !important;
color: var(--matca-text-light) !important;
font-size: .95rem !important;
cursor: pointer;
transition: color .15s;
padding: 0 !important;
margin-right: 10px;
line-height: 1;
min-height: 0;
min-width: 0;
border-radius: 50%;
}
.matca-notif-dismiss:hover {
color: var(--matca-danger, #ef4444);
background: rgba(239,68,68,.08) !important;
}
/* ============================================================
Billing Summary (Course page) + Billing Form (Profile)
============================================================ */
.matca-billing-summary {
background: var(--matca-bg, #f8fafc);
border: 1px solid var(--matca-border, #e2e8f0);
border-radius: var(--matca-radius, 12px);
padding: 14px 18px;
margin-bottom: 14px;
}
.matca-billing-summary-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 6px;
}
.matca-billing-summary-detail {
display: flex;
flex-direction: column;
gap: 2px;
font-size: .88rem;
}
.matca-billing-summary-detail strong { font-size: .92rem; }
.matca-billing-type-toggle {
display: flex;
gap: 8px;
}
.matca-billing-type-label {
flex: 1;
display: flex;
align-items: center;
justify-content: center;
gap: 6px;
padding: 10px;
border: 2px solid var(--matca-border, #e2e8f0);
border-radius: 8px;
cursor: pointer;
font-size: .85rem;
font-weight: 600;
transition: border-color .15s, background .15s;
}
.matca-billing-type-label:hover { border-color: var(--matca-primary, #4f46e5); }
.matca-billing-type-label.active {
border-color: var(--matca-primary, #4f46e5);
background: rgba(79,70,229,.06);
}
.matca-billing-type-label input[type="radio"] { display: none; }
/* ── Billing Profile Form (PJ fields, CUI lookup) ── */
.matca-billing-pj-profile {
margin-top: 12px;
display: flex;
flex-direction: column;
gap: 12px;
}
.matca-billing-pj-profile.matca-hidden { display: none; }
.matca-billing-pj-profile label {
display: block;
font-size: .82rem;
font-weight: 600;
color: var(--matca-text-light, #64748b);
margin-bottom: 4px;
}
.matca-billing-pj-profile input[type="text"],
.matca-billing-pj-profile textarea {
width: 100%;
padding: 9px 12px;
border: 1px solid var(--matca-border, #e2e8f0);
border-radius: 8px;
font-size: .9rem;
font-family: inherit;
color: var(--matca-text, #1e293b);
background: var(--matca-card-bg, #fff);
transition: border-color .15s, box-shadow .15s;
box-sizing: border-box;
}
.matca-billing-pj-profile input[type="text"]:focus,
.matca-billing-pj-profile textarea:focus {
outline: none;
border-color: var(--matca-primary, #4f46e5);
box-shadow: 0 0 0 3px rgba(79,70,229,.1);
}
/* CUI lookup row */
.matca-cui-row {
display: flex;
gap: 8px;
align-items: flex-end;
}
.matca-cui-row .matca-cui-input-wrap {
flex: 1;
}
.matca-cui-row .matca-btn {
height: 38px;
padding: 0 16px;
white-space: nowrap;
flex-shrink: 0;
font-size: .82rem;
}
/* CUI status message */
#matca-cui-status,
.matca-cui-status {
font-size: .8rem;
margin-top: 4px;
min-height: 1.2em;
line-height: 1.4;
transition: color .15s;
}
/* Autofilled field highlight */
.matca-billing-pj-profile input.matca-autofilled {
background: #f0fdf4;
border-color: var(--matca-success, #10b981);
}
@media (max-width: 480px) {
.matca-cui-row {
flex-direction: column;
align-items: stretch;
}
.matca-cui-row .matca-btn {
width: 100%;
height: auto;
padding: 9px 16px;
}
}
/* ============================================================
Authentication Widget — [matca_login_register]
============================================================ */
/* ── Wrapper ─────────────────────────────────────────────── */
.matca-auth-wrap {
box-sizing: border-box;
font-family: var(--matca-font);
color: var(--matca-text);
width: 100%;
max-width: 600px;
}
.matca-auth-wrap *,
.matca-auth-wrap *::before,
.matca-auth-wrap *::after {
box-sizing: inherit;
}
/* ── Tab bar ─────────────────────────────────────────────── */
.matca-auth-tabs {
display: flex;
position: relative;
gap: 8px;
background: transparent;
border: none;
margin-bottom: 0;
}
/* Tab buttons — pill-style. Inactive = light gray with dark gray text;
active = brand accent with white text. High specificity defeats theme
overrides that were repainting both tabs orange. */
.matca-auth-wrap .matca-auth-tab {
flex: 1;
padding: 12px 20px;
background: var(--matca-bg, #f3f4f6);
border: 1px solid var(--matca-border, #e5e7eb);
border-radius: var(--matca-radius) var(--matca-radius) 0 0;
font-family: inherit;
font-size: .95rem;
font-weight: 600;
color: var(--matca-text, #374151);
cursor: pointer;
position: relative;
z-index: 1;
transition: background var(--matca-transition), color var(--matca-transition), border-color var(--matca-transition);
letter-spacing: -.01em;
/* Defensive resets */
min-height: 0;
box-shadow: none;
text-transform: none;
line-height: 1.4;
}
.matca-auth-wrap .matca-auth-tab:hover {
/* No hover change on inactive tabs — the cursor is enough affordance,
and any color/background shift causes visual snap when crossing tabs. */
}
.matca-auth-wrap .matca-auth-tab.is-active {
background: var(--matca-primary);
border-color: var(--matca-primary);
color: #fff;
}
.matca-auth-wrap .matca-auth-tab.is-active:hover {
/* Active tab also keeps its style on hover. */
}
/* Sliding underline indicator — kept in markup for backwards-compat but
hidden in the new pill-tab design (the active state is conveyed by
the accent background instead). */
.matca-auth-tab-indicator {
display: none;
}
/* ── Panels ──────────────────────────────────────────────── */
.matca-auth-panel {
display: none;
background: var(--matca-card-bg);
border: 1px solid var(--matca-border);
border-radius: 0 0 var(--matca-radius) var(--matca-radius);
padding: 32px;
margin-top: 8px;
animation: matca-auth-fade-in .2s ease;
}
.matca-auth-panel.is-active {
display: block;
}
@keyframes matca-auth-fade-in {
from { opacity: 0; transform: translateY(6px); }
to { opacity: 1; transform: translateY(0); }
}
/* ── Form base ───────────────────────────────────────────── */
.matca-form {
margin: 0;
padding: 0;
}
.matca-form-group {
margin-bottom: 20px;
}
.matca-form-group:last-of-type {
margin-bottom: 0;
}
/* ── Register form: 2-column grid layout ──────────────────
The grid wraps only the dynamic fields (not Terms, CAPTCHA, or Submit).
Each .matca-form-group inside it is placed in column 1 (default span)
or spans both columns when marked .matca-field-full.
Gap handles both horizontal AND vertical spacing, so individual
.matca-form-group elements inside the grid drop their margin-bottom.
Outside the grid, the original 20px margin-bottom still applies for
login/reset/legacy forms. */
.matca-form-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 20px;
}
.matca-form-grid .matca-form-group {
margin-bottom: 0;
}
.matca-form-grid .matca-field-full {
grid-column: 1 / -1;
}
/* .matca-field-half: default grid placement (1 column) — no rule needed.
The "isolated half becomes full" rule is enforced server-side by
MATCA_Auth::normalize_isolated_halves() so we never get visual gaps. */
/* On narrow viewports (<= 480px) the 2-column grid collapses to a single
column so half-width fields don't become unreadably narrow. */
@media (max-width: 480px) {
.matca-form-grid {
grid-template-columns: 1fr;
}
}
/* ── Inline field errors (Profile tab, 1.0.5 Phase 3) ──────
Used for required custom fields that are empty on first load or
that failed validation on submit. The wrapper gets .has-error to
turn the input border red; the error message is a small block
under the input. */
.matca-form-group.has-error .matca-input,
.matca-form-group.has-error .matca-select,
.matca-form-group.has-error .matca-textarea {
border-color: var(--matca-danger, #ef4444);
box-shadow: 0 0 0 1px rgba(239, 68, 68, 0.15);
}
.matca-form-group.has-error .matca-label {
color: var(--matca-danger, #ef4444);
}
.matca-field-error {
display: block;
margin-top: 4px;
font-size: .78rem;
color: var(--matca-danger, #ef4444);
font-weight: 500;
line-height: 1.3;
}
/* ── Labels ──────────────────────────────────────────────── */
.matca-label {
display: block;
font-size: .85rem;
font-weight: 600;
color: var(--matca-text);
margin-bottom: 6px;
letter-spacing: -.01em;
}
/* Row that puts label + forgot-password link side by side */
.matca-label-row {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 6px;
}
.matca-label-row .matca-label {
margin-bottom: 0;
}
.matca-required {
color: var(--matca-danger);
margin-left: 2px;
}
/* ── Input wrapper (icon + input + toggle) ───────────────── */
.matca-input-wrap {
position: relative;
display: flex;
align-items: center;
}
.matca-input-icon {
position: absolute;
left: 12px;
top: 50%;
transform: translateY(-50%);
width: 18px;
height: 18px;
color: var(--matca-text-light);
pointer-events: none;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.matca-input-icon svg {
width: 16px;
height: 16px;
display: block;
}
/* ── Core input ──────────────────────────────────────────── */
.matca-form .matca-input {
width: 100%;
padding: 11px 14px 11px 40px;
border: 2px solid var(--matca-border);
border-radius: 8px;
font-family: inherit;
font-size: .95rem;
color: var(--matca-text);
background: #fff;
transition: border-color var(--matca-transition), box-shadow var(--matca-transition);
appearance: none;
-webkit-appearance: none;
/* Reset any WP admin or theme overrides */
box-shadow: none;
outline: none;
line-height: 1.5;
}
/* No icon variant (e.g. custom fields without icon) */
.matca-form .matca-input:not(.matca-input-wrap .matca-input) {
padding-left: 14px;
}
.matca-form .matca-input:focus {
border-color: var(--matca-primary);
box-shadow: 0 0 0 3px rgba(79, 70, 229, .12);
outline: none;
}
.matca-form .matca-input::placeholder {
color: #94a3b8;
}
/* With password toggle button on the right */
.matca-input-wrap .matca-input {
padding-right: 44px;
}
/* Textarea variant */
.matca-form .matca-textarea {
width: 100%;
padding: 11px 14px;
border: 2px solid var(--matca-border);
border-radius: 8px;
font-family: inherit;
font-size: .95rem;
color: var(--matca-text);
background: #fff;
resize: vertical;
min-height: 90px;
transition: border-color var(--matca-transition), box-shadow var(--matca-transition);
line-height: 1.5;
}
.matca-form .matca-textarea:focus {
border-color: var(--matca-primary);
box-shadow: 0 0 0 3px rgba(79, 70, 229, .12);
outline: none;
}
/* Select variant */
.matca-form .matca-select {
width: 100%;
padding: 11px 36px 11px 14px;
border: 2px solid var(--matca-border);
border-radius: 8px;
font-family: inherit;
font-size: .95rem;
color: var(--matca-text);
background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%2364748b' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 12px center;
appearance: none;
-webkit-appearance: none;
cursor: pointer;
transition: border-color var(--matca-transition);
}
.matca-form .matca-select:focus {
border-color: var(--matca-primary);
box-shadow: 0 0 0 3px rgba(79, 70, 229, .12);
outline: none;
}
/* ── Show / hide password toggle ─────────────────────────── */
/* Show/hide password eye button. High specificity needed because themes
commonly apply styles (background, padding, min-height) that
would balloon this small icon button into a chunky orange thing. */
.matca-auth-wrap .matca-toggle-pass {
position: absolute;
right: 10px;
top: 50%;
transform: translateY(-50%);
background: none;
border: none;
cursor: pointer;
padding: 4px;
color: var(--matca-text-light);
display: flex;
align-items: center;
justify-content: center;
border-radius: 4px;
transition: color var(--matca-transition);
flex-shrink: 0;
/* Defensive resets for opinionated themes. */
min-height: 0;
min-width: 0;
width: auto;
height: auto;
box-shadow: none;
font-size: inherit;
line-height: 1;
text-transform: none;
letter-spacing: normal;
}
.matca-auth-wrap .matca-toggle-pass:hover {
color: var(--matca-primary);
background: none;
box-shadow: none;
}
.matca-auth-wrap .matca-eye-icon {
width: 18px;
height: 18px;
display: block;
}
/* eye-open shown by default; eye-off shown when password is visible */
.matca-auth-wrap .matca-toggle-pass .matca-eye-off { display: none; }
.matca-auth-wrap .matca-toggle-pass.is-visible .matca-eye-open { display: none; }
.matca-auth-wrap .matca-toggle-pass.is-visible .matca-eye-off { display: block; }
/* ── Password strength meter ─────────────────────────────── */
.matca-strength-bar {
height: 4px;
background: var(--matca-border);
border-radius: 100px;
margin-top: 8px;
overflow: hidden;
}
.matca-strength-fill {
height: 100%;
width: 0;
border-radius: 100px;
transition: width .3s ease, background-color .3s ease;
}
.matca-strength-label {
display: block;
font-size: .75rem;
font-weight: 600;
margin-top: 4px;
min-height: 1.1em;
transition: color .3s ease;
}
/* ── Password match indicator ────────────────────────────── */
.matca-match-label {
display: block;
font-size: .75rem;
font-weight: 600;
margin-top: 6px;
min-height: 1.1em;
}
/* ── Forgot password link ────────────────────────────────── */
/* Used on a inside the password label row to trigger the
reset_request tab. High specificity to defeat theme button styles. */
.matca-auth-wrap .matca-forgot-link {
font-size: .82rem;
color: var(--matca-primary);
background: none;
border: none;
padding: 0;
font-family: inherit;
cursor: pointer;
text-decoration: none;
font-weight: 500;
white-space: nowrap;
transition: color var(--matca-transition);
min-height: 0;
box-shadow: none;
text-transform: none;
letter-spacing: normal;
line-height: inherit;
}
.matca-auth-wrap .matca-forgot-link:hover {
color: var(--matca-primary-dark);
text-decoration: underline;
background: none;
box-shadow: none;
}
/* ── Custom checkbox ─────────────────────────────────────── */
.matca-form-check {
margin-bottom: 16px;
}
.matca-checkbox-label {
display: inline-flex;
align-items: flex-start;
gap: 10px;
cursor: pointer;
font-size: .9rem;
color: var(--matca-text);
line-height: 1.5;
user-select: none;
}
/* Hide native checkbox */
.matca-checkbox {
position: absolute;
opacity: 0;
width: 0;
height: 0;
pointer-events: none;
}
/* Custom checkmark box */
.matca-checkmark {
display: inline-flex;
align-items: center;
justify-content: center;
width: 18px;
height: 18px;
min-width: 18px;
border: 2px solid var(--matca-border);
border-radius: 5px;
background: #fff;
margin-top: 2px;
transition: border-color var(--matca-transition), background var(--matca-transition);
flex-shrink: 0;
}
/* Tick SVG via pseudo-element */
.matca-checkmark::after {
content: '';
display: none;
width: 10px;
height: 6px;
border-left: 2px solid #fff;
border-bottom: 2px solid #fff;
transform: rotate(-45deg) translateY(-1px);
}
.matca-checkbox:checked ~ .matca-checkmark {
background: var(--matca-primary);
border-color: var(--matca-primary);
}
.matca-checkbox:checked ~ .matca-checkmark::after {
display: block;
}
.matca-checkbox:focus ~ .matca-checkmark {
box-shadow: 0 0 0 3px rgba(79, 70, 229, .18);
}
/* Terms link inside checkbox label */
.matca-terms-link {
color: var(--matca-primary);
text-decoration: underline;
transition: color var(--matca-transition);
}
.matca-terms-link:hover {
color: var(--matca-primary-dark);
}
/* ── CAPTCHA wrapper ─────────────────────────────────────── */
.matca-captcha-wrap {
display: flex;
justify-content: flex-start;
margin-bottom: 20px;
}
/* ── Error + success message blocks ──────────────────────── */
.matca-form-errors {
background: #fef2f2;
border: 1px solid #fecaca;
border-left: 4px solid var(--matca-danger);
border-radius: 8px;
padding: 12px 16px;
margin-bottom: 20px;
}
.matca-error {
margin: 0 0 4px;
font-size: .88rem;
color: #991b1b;
font-weight: 500;
line-height: 1.5;
}
.matca-error:last-child {
margin-bottom: 0;
}
.matca-form-success {
background: #f0fdf4;
border: 1px solid #bbf7d0;
border-left: 4px solid var(--matca-success);
border-radius: 8px;
padding: 12px 16px;
margin-bottom: 20px;
font-size: .9rem;
color: #166534;
font-weight: 500;
line-height: 1.5;
}
/* ── Submit button (full width) ──────────────────────────── */
.matca-btn-full {
width: 100%;
justify-content: center;
padding: 13px 20px;
font-size: .95rem;
font-weight: 700;
letter-spacing: -.01em;
margin-top: 8px;
border-radius: 8px;
position: relative;
overflow: hidden;
}
/* Loading state */
.matca-btn.is-loading {
color: transparent !important;
pointer-events: none;
}
.matca-btn-spinner {
display: none;
width: 18px;
height: 18px;
border: 2px solid rgba(255, 255, 255, .35);
border-top-color: #fff;
border-radius: 50%;
animation: matca-spin .7s linear infinite;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.matca-btn.is-loading .matca-btn-spinner {
display: block;
}
@keyframes matca-spin {
to { transform: translate(-50%, -50%) rotate(360deg); }
}
/* ── "Switch tab" nudge line ──────────────────────────────── */
.matca-auth-switch {
text-align: center;
margin: 20px 0 0;
font-size: .88rem;
color: var(--matca-text-light);
}
/* Inline text-button switch ("Don't have an account? Create one").
High specificity selector to override theme-level styles. */
.matca-auth-wrap .matca-auth-switch-btn {
background: none;
border: none;
color: var(--matca-primary);
font-size: inherit;
font-family: inherit;
font-weight: 600;
cursor: pointer;
padding: 0;
text-decoration: underline;
text-underline-offset: 2px;
transition: color var(--matca-transition);
/* Defensive: themes sometimes apply min-height/box-shadow/transform on
. Reset them explicitly so this stays a plain inline link. */
min-height: 0;
box-shadow: none;
text-transform: none;
letter-spacing: normal;
line-height: inherit;
}
.matca-auth-wrap .matca-auth-switch-btn:hover {
color: var(--matca-primary-dark);
background: none;
box-shadow: none;
}
/* ── Reset password panels (heading + intro) ─────────────── */
.matca-auth-heading {
font-size: 1.25rem;
font-weight: 700;
margin: 0 0 8px;
color: var(--matca-text);
}
.matca-auth-intro {
font-size: .9rem;
color: var(--matca-text-light);
margin: 0 0 20px;
line-height: 1.5;
}
/* ── [matca_logout] link + button ───────────────────────── */
.matca-logout-link {
color: var(--matca-primary);
text-decoration: none;
font-size: .9rem;
font-weight: 600;
transition: color var(--matca-transition);
}
.matca-logout-link:hover {
color: var(--matca-primary-dark);
text-decoration: underline;
}
.matca-logout-btn {
/* Inherits .matca-btn .matca-btn-outline */
}
/* ── Responsive ──────────────────────────────────────────── */
@media (max-width: 520px) {
.matca-auth-panel {
padding: 24px 20px;
}
.matca-auth-tab {
padding: 12px 14px;
font-size: .88rem;
}
.matca-btn-full {
padding: 12px 16px;
}
}
@media (max-width: 360px) {
.matca-auth-panel {
padding: 20px 16px;
}
.matca-label-row {
flex-direction: column;
align-items: flex-start;
gap: 4px;
}
}
/* ── High-contrast / forced-colors accessibility ─────────── */
@media (forced-colors: active) {
.matca-checkmark { border: 2px solid ButtonText; }
.matca-checkbox:checked ~ .matca-checkmark { background: Highlight; border-color: Highlight; }
.matca-auth-tab-indicator { background: Highlight; }
}
/* ── Honeypot anti-bot field ─────────────────────────────── */
/* Off-screen positioning (the WP "screen-reader-text" pattern). We do NOT
use display:none or visibility:hidden because some bots skip those.
The field must appear "real" to a naive form-filling bot but be
completely inaccessible to real users (no tab stop, no autofill,
no visible space). */
.matca-honeypot {
position: absolute !important;
left: -10000px !important;
top: auto !important;
width: 1px !important;
height: 1px !important;
overflow: hidden !important;
}
.matca-honeypot input {
/* Ensure browser autofill heuristics don't try to fill a field that's
off-screen but technically still a text input. */
pointer-events: none;
}
/* ── Required-fields enforcement on Dashboard (1.0.5 Phase 4) ──────
When the user has required custom fields that are still empty, two
visual elements appear on the dashboard:
1. .matca-required-banner — a persistent amber banner above the tab
bar with a count of missing fields and a CTA button. Sticks on
every tab, non-dismissible by design.
2. .matca-tab-overlay — a translucent layer over every non-Profile
tab panel. The real content is rendered underneath (so the user
sees what's behind locked) but blurred/dimmed and pointer-events
blocked. A centred message + button matches the banner CTA.
Admin users (manage_options) are exempt — neither element renders
for them, consistent with is_locked() / is_enrolled() short-circuits
elsewhere in the codebase. */
.matca-required-banner {
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
gap: 16px;
padding: 14px 20px;
margin-bottom: 20px;
background: #fef3c7; /* amber-100 */
border: 1px solid #fcd34d; /* amber-300 */
border-left: 4px solid #d97706; /* amber-600 — left accent strip */
border-radius: var(--matca-radius);
color: #78350f; /* amber-900 */
font-size: .95rem;
line-height: 1.5;
}
.matca-required-banner-content {
display: flex;
align-items: center;
gap: 12px;
flex: 1 1 auto;
min-width: 240px;
}
.matca-required-banner-icon {
flex-shrink: 0;
font-size: 1.4rem;
line-height: 1;
}
.matca-required-banner-text strong {
font-weight: 700;
}
.matca-required-banner-btn {
flex-shrink: 0;
padding: 8px 18px;
background: #d97706;
color: #fff;
border: none;
border-radius: 6px;
font-size: .9rem;
font-weight: 600;
cursor: pointer;
transition: background var(--matca-transition);
font-family: inherit;
}
.matca-required-banner-btn:hover,
.matca-required-banner-btn:focus {
background: #b45309;
outline: none;
}
/* Tab panels need position:relative so the absolute overlay anchors
to them. The original rule lives near the top of this file
(.matca-tab-panel) but doesn't set position; we add it here without
touching the original declaration so the Phase 4 styles are
self-contained. */
.matca-tab-panel { position: relative; }
.matca-tab-overlay {
position: absolute;
inset: 0;
z-index: 10;
display: flex;
align-items: center;
justify-content: center;
background: rgba(255, 255, 255, 0.85);
backdrop-filter: blur(2px);
-webkit-backdrop-filter: blur(2px);
border-radius: var(--matca-radius);
/* Catch ALL pointer events so the user can't click through to the
locked content underneath. */
cursor: not-allowed;
}
.matca-tab-overlay-inner {
max-width: 360px;
padding: 24px 28px;
text-align: center;
background: #fff;
border: 1px solid var(--matca-border);
border-radius: var(--matca-radius);
box-shadow: 0 4px 20px rgba(0, 0, 0, .08);
}
.matca-tab-overlay-icon {
font-size: 2rem;
line-height: 1;
margin-bottom: 8px;
}
.matca-tab-overlay-title {
margin: 0 0 6px;
font-size: 1.05rem;
font-weight: 600;
color: var(--matca-text);
}
.matca-tab-overlay-desc {
margin: 0 0 16px;
font-size: .88rem;
color: var(--matca-text-light);
line-height: 1.45;
}
.matca-tab-overlay-btn {
display: inline-block;
padding: 9px 20px;
background: var(--matca-primary);
color: #fff;
border: none;
border-radius: 6px;
font-size: .9rem;
font-weight: 600;
cursor: pointer;
transition: opacity var(--matca-transition);
font-family: inherit;
}
.matca-tab-overlay-btn:hover,
.matca-tab-overlay-btn:focus {
opacity: .9;
outline: none;
}
/* Mobile — banner stacks, button goes full-width. */
@media (max-width: 600px) {
.matca-required-banner {
flex-direction: column;
align-items: stretch;
text-align: left;
}
.matca-required-banner-btn {
width: 100%;
text-align: center;
}
.matca-tab-overlay-inner {
margin: 0 16px;
}
}