/* ==========================================================================
   Upskilling Skin — legacy LaraBuild pages (transitional)
   Override layer loaded AFTER main.css. Retheme the light "Lernen" (Amentotech)
   theme to the Kampe design system: near-black canvas, #c9a3ff accent, Clash Display.
   Reversible: delete this file + its <link> to restore the stock theme.
   TRANSITIONAL: applies only to pages not yet reforged (auth, course detail,
   dashboards). Delete each block as its page is rebuilt; retire the file entirely
   once no legacy page remains.
   v2 — 2026-07-28 (retinted #c9a3ff, renamed from kampe-skin.css)
   ========================================================================== */

@import url('https://api.fontshare.com/v2/css?f[]=clash-display@600,700,500&f[]=clash-grotesk@500,600&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

:root {
  --k-canvas:      #0a0a0a;
  --k-surface-1:   #121212;
  --k-surface-2:   #1a1a1a;
  --k-surface-3:   #252525;
  --k-line:        #262626;
  --k-line-soft:   #1e1e1e;
  --k-accent:        #c9a3ff;
  --k-accent-dim:    #b48ae8;
  --k-accent-tint:   rgba(201,163,255,.12);
  --k-purple:      #9800ff; /* deep accent, sparingly */
  --k-purple-soft: #c9a3ff;
  --k-ink:         #ffffff;
  --k-ink-2:       #a0a29b;
  --k-ink-3:       #6c6e68;
  --k-radius:      16px;
  --k-radius-pill: 999px;
  --k-display: 'Clash Display', 'Space Grotesk', system-ui, sans-serif;
  --k-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

/* ---- base / canvas -------------------------------------------------------- */
html, body,
.am-bodywrap,
body.am-bodywrap {
  background: var(--k-canvas) !important;
  color: var(--k-ink-2) !important;
  font-family: var(--k-body) !important;
  -webkit-font-smoothing: antialiased;
}

/* broad surface inversion: elements the light theme painted white/off-white */
.am-bodywrap section,
.pb-themesection,
main, .am-main, .am-content-wrap,
[class*="am-"][style*="background"] { background-color: transparent !important; }

/* the common light fills used across the theme -> dark surfaces */
.bg-white, .am-bg-white, .am-white-bg,
[class*="_wrap"], [class*="_card"], .card, .am-card {
  background-color: var(--k-surface-1) !important;
  border-color: var(--k-line) !important;
  color: var(--k-ink-2) !important;
}

/* ---- typography: bold Kampe display --------------------------------------- */
h1, h2, h3, h4, .am-title, [class*="_title"], [class*="-title"],
.pb-themesection h1, .pb-themesection h2, .pb-themesection h3,
h1 strong, h2 strong, h3 strong, h4 strong,
h1 b, h2 b, h3 b, h4 b,
h1 span, h2 span, h3 span, h4 span,
[class*="_title"] strong, [class*="_title"] span, [class*="_title"] b,
.am-learning_title, .am-learning_title strong, .am-learning_title span {
  font-family: var(--k-display) !important;
  color: var(--k-ink) !important;
  font-weight: 600 !important;
  letter-spacing: -.02em !important;
  line-height: 1.03 !important;
}
h1, .am-banner_title, [class*="banner"] h1,
.am-learning_title h3, .am-learning_title strong {
  font-size: clamp(2rem, 3.4vw, 3.4rem) !important;
  font-weight: 700 !important;
  letter-spacing: -.03em !important;
  line-height: 1.07 !important;
}
/* let the hero use its full column (a ch-based max-width collapsed it) */
.am-learning_title, .am-learning_title h3 { max-width: none !important; width: 100% !important; }
.am-learning_details { max-width: 640px !important; }
.am-learning_details p, .am-learning_paragraph { max-width: 46ch !important; font-size: 1.02rem !important; line-height: 1.65 !important; }
/* two-tone headline: the <strong> half goes lime, like Kampe */
.am-learning_title strong, h1 strong, [class*="banner"] h1 strong {
  color: var(--k-accent) !important;
  -webkit-text-fill-color: var(--k-accent) !important;
  display: inline !important;
}
/* eyebrow / highlighted phrase that was purple -> lime */
.am-banner_subtitle, .am-section_subtitle, .am-subtitle,
[class*="subtitle"], .am-primary-color, .text-primary,
.am-learning_title > span:first-child, .am-learning_subtitle,
[class*="_title"] > span:first-child {
  color: var(--k-accent) !important;
  font-family: var(--k-display) !important;
  font-weight: 600 !important;
  -webkit-text-fill-color: var(--k-accent) !important;
}
p, li, span, .am-desc, [class*="_desc"], [class*="-desc"] { color: var(--k-ink-2) !important; }
a { color: var(--k-ink); }
a:hover { color: var(--k-accent); }

/* ---- eyebrow pill: dark chip + lime dot (emoji/icon hidden) ---------------- */
.am-banner_tag, .am-section_tag, [class*="_tag"], .am-badge, .badge,
.am-learning_tag, [class*="learning_tag"] {
  background: var(--k-surface-2) !important;
  color: var(--k-ink) !important;
  border: 1px solid var(--k-line) !important;
  border-radius: var(--k-radius-pill) !important;
  padding: .5rem 1.1rem !important;
  font-family: var(--k-body) !important;
  font-size: .82rem !important;
  font-weight: 500 !important;
  letter-spacing: .01em !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: .55rem !important;
}
/* hero search bar -> dark pill */
.am-learning_search, [class*="_search"]:not(input):not(button) {
  background: var(--k-surface-2) !important;
  border: 1px solid var(--k-line) !important;
  border-radius: var(--k-radius-pill) !important;
  padding: .35rem .35rem .35rem .35rem !important;
  box-shadow: none !important;
}
.am-learning_search input, .am-learning_search_input, [class*="_search"] input {
  background: transparent !important;
  border: none !important;
  color: var(--k-ink) !important;
  box-shadow: none !important;
}
.am-learning_search input::placeholder { color: var(--k-ink-3) !important; }
.am-learning_search_btn, [class*="_search_btn"] {
  background: var(--k-accent) !important;
  border-radius: 50% !important;
  width: 46px !important; height: 46px !important;
  display: inline-flex !important; align-items: center; justify-content: center;
}
.am-learning_search_btn svg, .am-learning_search_btn i, [class*="_search_btn"] svg { color: #0a0a0a !important; fill: #0a0a0a !important; }

/* the hero eyebrow is a classless <span> straight inside .am-learning_details */
.am-learning_details > span {
  background: var(--k-surface-2) !important;
  color: var(--k-ink) !important;
  border: 1px solid var(--k-line) !important;
  border-radius: var(--k-radius-pill) !important;
  padding: .5rem 1.1rem !important;
  font-family: var(--k-body) !important;
  font-size: .82rem !important;
  font-weight: 500 !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: .55rem !important;
  margin-bottom: 1.5rem !important;
}
.am-learning_details > span svg { display: none !important; }
.am-learning_details > span::before {
  content: "" !important;
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--k-accent); flex: 0 0 auto;
}

/* drop the stock emoji/icon image inside the eyebrow */
.am-learning_tag img, [class*="learning_tag"] img, .am-banner_tag img,
.am-section_tag img, [class*="_tag"] > img { display: none !important; }
.am-learning_tag::before, [class*="learning_tag"]::before, .am-banner_tag::before {
  content: "" !important;
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--k-accent); flex: 0 0 auto;
}

/* ---- buttons -> pills ----------------------------------------------------- */
.am-btn, a.am-btn, button.am-btn,
.am-learning_search_btn, .am-marketplace_content_list_btn {
  background: var(--k-accent) !important;
  color: #0a0a0a !important;
  border: none !important;
  border-radius: var(--k-radius-pill) !important;
  font-family: var(--k-body) !important;
  font-weight: 650 !important;
  box-shadow: none !important;
  transition: transform .12s ease, background .12s ease;
}
.am-btn:hover { background: #d9bcff !important; transform: translateY(-1px); color:#0a0a0a !important; }
.am-white-btn, a.am-white-btn, .am-btn-outline, .am-cancel {
  background: transparent !important;
  color: var(--k-ink) !important;
  border: 1px solid var(--k-line) !important;
  border-radius: var(--k-radius-pill) !important;
  font-family: var(--k-body) !important;
  font-weight: 600 !important;
}
.am-white-btn:hover { border-color: var(--k-accent) !important; color: var(--k-accent) !important; }

/* ---- header --------------------------------------------------------------- */
.am-header_two, .am-header_one, .am-header, header {
  background: rgba(10,10,10,.85) !important;
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--k-line-soft) !important;
}
.am-navigation a, .am-navigation li a, .am-menu a { color: var(--k-ink-2) !important; font-family: var(--k-body) !important; font-weight: 500 !important; }
.am-navigation a:hover { color: var(--k-ink) !important; }
.am-switch-language, .am-switch-currency { color: var(--k-ink-2) !important; }

/* ---- cards / course tiles ------------------------------------------------- */
.am-course_card, .am-coursecard, [class*="course_card"], [class*="_item_card"],
.am-blog_card, .am-instructor_card {
  background: var(--k-surface-1) !important;
  border: 1px solid var(--k-line) !important;
  border-radius: var(--k-radius) !important;
  color: var(--k-ink-2) !important;
}
.am-course_card:hover, [class*="course_card"]:hover { border-color: var(--k-accent) !important; }

/* ---- inputs / search ------------------------------------------------------ */
input, select, textarea, .form-control, .am-form_control, .select2-container--default .select2-selection {
  background: var(--k-surface-2) !important;
  border: 1px solid var(--k-line) !important;
  color: var(--k-ink) !important;
  border-radius: 12px !important;
}
input::placeholder { color: var(--k-ink-3) !important; }
input:focus, select:focus, textarea:focus { border-color: var(--k-accent) !important; box-shadow: 0 0 0 3px var(--k-accent-tint) !important; }

/* ---- footer --------------------------------------------------------------- */
footer, .am-footer, [class*="footer"] {
  background: var(--k-surface-1) !important;
  border-top: 1px solid var(--k-line) !important;
  color: var(--k-ink-2) !important;
}

/* ==========================================================================
   HOMEPAGE SECTIONS
   ========================================================================== */

/* section eyebrow + centered titles */
.am-section_title, .am-section_title_center, .am-steps_title, .am-marketplace_title {
  color: var(--k-ink) !important;
}
.am-section_title h2, .am-section_title h3, [class*="section_title"] h2,
.am-steps h2, .am-marketplace h2, .am-works_info h2, .am-feedback h2 {
  font-family: var(--k-display) !important;
  color: var(--k-ink) !important;
  font-weight: 700 !important;
  letter-spacing: -.03em !important;
  font-size: clamp(1.9rem, 4vw, 3.2rem) !important;
  line-height: 1.05 !important;
}
/* a highlighted word in section titles -> lime */
.am-section_title span, [class*="section_title"] .am-primary-color,
.am-steps h2 span, .am-marketplace h2 span { color: var(--k-accent) !important; -webkit-text-fill-color: var(--k-accent) !important; }

/* STEPS ("Unlock Your Potential…") — numbered step cards */
.am-steps, .am-marketplace, .am-works_info, .am-feedback, .am-home-support-section, .am-home-guide-section {
  background: transparent !important;
}
.am-steps_card, .am-step_card, [class*="steps_item"], [class*="step_item"],
.am-marketplace_card, [class*="marketplace_item"], .am-works_card, [class*="works_item"] {
  background: var(--k-surface-1) !important;
  border: 1px solid var(--k-line) !important;
  border-radius: var(--k-radius) !important;
  color: var(--k-ink-2) !important;
  transition: border-color .15s ease, transform .15s ease;
}
.am-steps_card:hover, .am-marketplace_card:hover, [class*="steps_item"]:hover { border-color: var(--k-accent) !important; transform: translateY(-2px); }
/* step numbers / icons -> lime */
.am-steps_number, [class*="_number"], [class*="_count"], .am-steps_icon, [class*="_icon"] i {
  color: var(--k-accent) !important;
}
.am-steps_icon, [class*="step"] [class*="icon"] {
  background: var(--k-accent-tint) !important;
  border-radius: 14px !important;
}

/* MARKETPLACE feature list check icons -> lime */
.am-marketplace i, .am-works_info i, .am-list i, [class*="_list"] i, .fa-check, [class*="check"] { color: var(--k-accent) !important; }

/* FEEDBACK / testimonials cards */
.am-feedback_card, [class*="feedback_item"], [class*="testimonial"], .am-review_card {
  background: var(--k-surface-1) !important;
  border: 1px solid var(--k-line) !important;
  border-radius: var(--k-radius) !important;
  color: var(--k-ink-2) !important;
}
.am-feedback_card *, [class*="feedback_item"] * { color: inherit !important; }
.am-feedback_card [class*="name"], [class*="feedback"] h4, [class*="feedback"] h5 { color: var(--k-ink) !important; font-family: var(--k-display) !important; }
.am-rating i, [class*="star"], [class*="rating"] i { color: var(--k-accent) !important; }

/* decorative shapes -> subtle */
.am-section-shape, [class*="section-shape"], [class*="_shape"] { opacity: .25 !important; filter: grayscale(1) brightness(.5); }

/* ==========================================================================
   GRADIENT PLACEHOLDERS (Kampe-style) for demo/missing imagery
   ========================================================================== */
/* Replace demo / placeholder imagery with a real Kampe gradient using CSS
   `content:` (swaps the rendered <img> bitmap, so opaque grey demo files vanish).
   Scoped away from logos, svgs and the header brand. */
.am-learning img, .am-learning_img img, [class*="banner"] img,
[class*="course"] img, [class*="tutor"] img, [class*="instructor"] img,
[class*="marketplace"] img, [class*="steps"] img, [class*="works"] img,
[class*="thumbnail"] img, [class*="_media"] img, [class*="_poster"] img {
  content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='640' height='420'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0' stop-color='%23161616'/%3E%3Cstop offset='0.6' stop-color='%231d1d1d'/%3E%3Cstop offset='1' stop-color='%23202600'/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect width='640' height='420' fill='url(%23g)'/%3E%3Ccircle cx='560' cy='60' r='120' fill='%23c9a3ff' opacity='0.05'/%3E%3C/svg%3E") !important;
  object-fit: cover !important;
  border-radius: 14px !important;
  background: linear-gradient(135deg,#161616,#202600) !important;
}
/* avatars -> circular lime-tinted gradient */
[class*="avatar"] img, [class*="_user"] img, .am-feedback img, [class*="author"] img, [class*="client"] img {
  content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cdefs%3E%3ClinearGradient id='a' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0' stop-color='%23252d00'/%3E%3Cstop offset='1' stop-color='%23161616'/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect width='120' height='120' fill='url(%23a)'/%3E%3C/svg%3E") !important;
  border-radius: 50% !important;
  object-fit: cover !important;
}
/* flags / svg icons untouched */
img[src*="flag"], .am-switch-language img { content: normal !important; background: none !important; border-radius: 0 !important; }

/* ---- BRAND LOGO: swap the "Lernen" mark for the Upskilling "U" logo ------- */
.am-logo img, header .am-logo img, .am-logo a img {
  content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='232' height='44' viewBox='0 0 232 44'%3E%3Crect x='2' y='2' width='40' height='40' rx='13' fill='%23c9a3ff'/%3E%3Ctext x='22' y='32' font-family='Poppins,Arial,sans-serif' font-size='27' font-weight='700' fill='%230a0a0a' text-anchor='middle'%3EU%3C/text%3E%3Ctext x='52' y='30' font-family='Poppins,Arial,sans-serif' font-size='23' font-weight='700' fill='%23ffffff'%3EUpskilling%3C/text%3E%3C/svg%3E") !important;
  height: 40px !important; width: auto !important; background: none !important; border-radius: 0 !important;
}

/* ---- remaining light cards the QA scan caught ----------------------------- */
.am-steps_content_start_info, .am-feedback_content_list_info,
[class*="_content_start_info"], [class*="_list_info"],
.am-steps_content_start, [class*="content_list_card"], [class*="_review"] {
  background: var(--k-surface-1) !important;
  border: 1px solid var(--k-line) !important;
  border-radius: var(--k-radius) !important;
  color: var(--k-ink-2) !important;
}
.am-steps_content_start_info:hover, .am-feedback_content_list_info:hover { border-color: var(--k-accent) !important; }
.am-steps_content_start_info *, .am-feedback_content_list_info * { color: inherit !important; }
.am-steps_content_start_info h3, .am-steps_content_start_info h4,
.am-feedback_content_list_info h3, .am-feedback_content_list_info h4,
.am-feedback_content_list_info h5, [class*="_list_info"] [class*="name"] {
  color: var(--k-ink) !important; font-family: var(--k-display) !important;
}
/* the hero media / video frame */
.am-learning_video, .am-banner_img, [class*="_video"], [class*="banner_img"] {
  background: linear-gradient(135deg, #141414 0%, #1a1a1a 50%, rgba(201,163,255,.08) 100%) !important;
}
.am-learning_video img, [class*="_video"] img, .vjs-poster, video.js .vjs-poster { opacity: 0 !important; }
/* video.js player defaults to white here — force it to the Kampe gradient */
.am-learning_video, .video-js, .vjs-tech, .vjs-poster,
.am-learning_video video, .am-learning_video .video-js,
[class*="_video"] video, [class*="_video"] .video-js {
  background: linear-gradient(135deg,#141414 0%,#1a1a1a 55%,rgba(201,163,255,.07) 100%) !important;
  background-color: #141414 !important;
}
/* hide the light demo banner-video frames; show the dark gradient tile behind */
.am-learning_video video.vjs-tech, .am-learning_video .vjs-tech,
[class*="_video"] video.vjs-tech { opacity: 0 !important; }
.vjs-big-play-button {
  background: var(--k-accent) !important;
  border: none !important;
  border-radius: 50% !important;
  box-shadow: 0 0 40px rgba(201,163,255,.35) !important;
}
.vjs-big-play-button .vjs-icon-placeholder:before { color: #0a0a0a !important; }
.am-learning_video_info, .video-js.vjs-paused { background: linear-gradient(135deg,#141414 0%,#1a1a1a 55%,rgba(201,163,255,.08) 100%) !important; }

/* ==========================================================================
   FULL SECTION COVERAGE (classes confirmed from the rendered page)
   ========================================================================== */
.am-explore-tutor, .am-handpick-tutor, .am-home-support, .am-home-guide,
.am-marketplace_content, .am-feedback-two_wrap, .am-steps, .am-home {
  background: transparent !important;
}
/* every "card"-ish info block the theme paints white */
.am-marketplace_content_list, .am-marketplace_content_list_info,
.am-marketplace_content_list_details, .am-feedback_content_list,
.am-feedback_content_list_info, .am-feedback_content_list_info_prof,
.am-explore-tutor [class*="_list"], .am-handpick-tutor [class*="_list"],
.am-steps [class*="_list"], .am-home-support [class*="_list"], .am-home-guide [class*="_list"] {
  background: var(--k-surface-1) !important;
  border-color: var(--k-line) !important;
  color: var(--k-ink-2) !important;
}
.am-marketplace_content_list_info, .am-feedback_content_list_info {
  border: 1px solid var(--k-line) !important;
  border-radius: var(--k-radius) !important;
}
.am-marketplace_content_video { background: linear-gradient(135deg,#141414,#1c1c1c) !important; border-radius: var(--k-radius) !important; }
/* star ratings + section icons -> lime */
.am-feedback_content_list_stars i, .am-feedback_content_list_stars svg,
.am-feedbackicon, .am-feedbackicon svg { color: var(--k-accent) !important; fill: var(--k-accent) !important; }

/* footer: darker plinth + lime hovers */
.am-footer, .am-footer_wrap, .am-footer_bottom, .am-footer_contact, .am-footer_info, .am-footer_logoarea {
  background: var(--k-surface-1) !important;
  border-color: var(--k-line) !important;
  color: var(--k-ink-2) !important;
}
.am-footer a, .am-fnavigation a { color: var(--k-ink-2) !important; }
.am-footer a:hover, .am-fnavigation a:hover { color: var(--k-accent) !important; }
.am-footer h3, .am-footer h4, .am-footer h5, .am-footer_info h4 {
  color: var(--k-ink) !important; font-family: var(--k-display) !important;
}
/* footer logo -> white "U" wordmark on dark */
.am-flogo img, .am-footer_logoarea img {
  content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='232' height='44' viewBox='0 0 232 44'%3E%3Crect x='2' y='2' width='40' height='40' rx='13' fill='%23c9a3ff'/%3E%3Ctext x='22' y='32' font-family='Poppins,Arial,sans-serif' font-size='27' font-weight='700' fill='%230a0a0a' text-anchor='middle'%3EU%3C/text%3E%3Ctext x='52' y='30' font-family='Poppins,Arial,sans-serif' font-size='23' font-weight='700' fill='%23ffffff'%3EUpskilling%3C/text%3E%3C/svg%3E") !important;
  height: 40px !important; width: auto !important; background: none !important;
}
/* back-to-top + language/currency popovers */
.am-clicktop { background: var(--k-accent) !important; color: #0a0a0a !important; border: none !important; }
.am-language, .am-currency, .am-lang, [class*="popup"], [class*="dropdown-menu"] {
  background: var(--k-surface-2) !important;
  border: 1px solid var(--k-line) !important;
  color: var(--k-ink) !important;
  border-radius: 14px !important;
}
.am-language a, .am-currency a, [class*="dropdown-menu"] a { color: var(--k-ink-2) !important; }
.am-language a:hover, .am-currency a:hover { color: var(--k-accent) !important; background: var(--k-surface-3) !important; }

/* ---- kill leftover light shadows/borders that read wrong on dark ---------- */
.am-bodywrap [class*="shadow"], .shadow, .shadow-sm { box-shadow: none !important; }
hr { border-color: var(--k-line) !important; }

/* ---- hero media frame (was brand purple #4e49c0) -------------------------- */
.am-learning_video, .am-banner_img, .am-banner_video, [class*="_video"], [class*="banner_img"] {
  background: var(--k-surface-2) !important;
  border-radius: var(--k-radius) !important;
  border: 1px solid var(--k-line) !important;
}
.am-learning_video .am-play, [class*="play"] { filter: hue-rotate(60deg) saturate(1.4); }

/* ---- accent-swap: elements painted the old purple #4e49c0 ----------------- */
[style*="4e49c0"], [style*="#4E49C0"] { color: var(--k-accent) !important; }
/* elements whose brand purple was a *background* -> lime accent block */
.am-primary-bg, .am-bg-primary, .bg-primary { background: var(--k-accent) !important; color:#0a0a0a !important; }

/* strong/b in hero copy should read as bright ink, not the theme's black ---- */
.pb-themesection strong, .am-learning_wrap strong, .am-learning_content strong { color: var(--k-ink) !important; }