:root {
        --font: Inter;
        --alt-font: Inter;
        --accent-color: #000000;
        --secondary-color: #757575;
        --link-color: #3a5bc7;
        --accent-highlight-color: #000000;
        --accent-highlight-background-color: #cccccc;
        --accent-tinted-color-70: #b3b3b3;
        --accent-tinted-color-80: #cccccc;
        --accent-tinted-color-90: #e6e6e6;
        --accent-contrast-color: #fff;
        --accent-contrast-tinted-background-color: #b3b3b3;
        --accent-hover-color: #1a1a1a;
        --secondary-hover-color: #8f8f8f;
        --secondary-contrast-color: #fff;
        --link-hover-color: #899dde;
      }
      
body { background: url('https://d3i9g4671ronu3.cloudfront.net/thoughtindustries-eu/image/upload/v1/course-uploads/78c24333-377a-4a2b-90ec-3de1cbae389a/jpbtea3ihpoi-BackgroundImage.jpeg'); background-attachment: fixed; background-size: cover; }
.company__logo {text-indent: 100%;white-space: nowrap;overflow: hidden;background: url('https://d3i9g4671ronu3.cloudfront.net/thoughtindustries-eu/image/upload/a_exif,c_fit,t_ti_company_logo_hires_v3/v1/course-uploads/3a906a38-d762-468e-ad12-bf41988a6cae/apq5i6okvpa8-UnityAcademy.png') no-repeat center left;background-size: contain;} .company__logo span.h4 {visibility: hidden;}
@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');

/* Apply Inter font globally, but exclude icon fonts */
body, div:not([class*="icon"]), span:not([class*="icon"]), article, section, p {
  font-family: 'Inter', sans-serif !important;
}

/* Headings */
h1, h2, h3, h4, h5, h6 {
  font-family: 'Inter', sans-serif !important;
}

/* Testimonial-specific classes */
.testimonial-quote_author-description,
[class*="testimonial"] {
  font-family: 'Inter', sans-serif !important;
}

/* Buttons and inputs - but not icons */
button:not([class*="icon"]), .btn:not([class*="icon"]), a:not([class*="icon"]), input, textarea, select {
  font-family: 'Inter', sans-serif !important ;
}

/* Lists */
ul, ol, li {
  font-family: 'Inter', sans-serif !important;
}

/* Force icon fonts to use their proper font-family */
i, [class*="icon"], [class*="ti-"], .ms-container, .ms-selection, .star-chooser, .stars {
  font-family: ti-icons-rev2 ;
}

/* Reduce hero caption height by 35% */
.hero__caption {
  padding-top: 30px !important;
  padding-bottom: 30px !important;
  max-height: 65% !important;
}

/* Target the Subscribe button in hero section */
.hero__caption .btn.btn--primary {
  display: block !important;
  width: fit-content !important;
  margin-top: 20px !important;
  background-color: #3a5bc7 !important;
  color: #ffffff !important;
  padding: 12px 32px !important;
  border-radius: 4px !important;
  text-decoration: none !important;
  font-weight: 600 !important;
  transition: background-color 0.3s ease, transform 0.2s ease !important;
  border: none !important;
}

.hero__caption .btn.btn--primary:hover {
  background-color: #2d4aa3 !important;
  color: #ffffff !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 4px 12px rgba(58, 91, 199, 0.3) !important;
}

.hero__caption .btn.btn--primary:active {
  transform: translateY(0) !important;
}

/* Force the h4 subtitle and button to stack vertically */
.hero__caption h4 {
  display: block !important;
  margin-bottom: 0 !important;
}

/* Ensure the link wrapping the button is block level */
.hero__caption > a {
  display: block !important;
  width: fit-content !important;
}

/* HIDE SECTION NUMBERS IN COURSE SUB MENU */
.syllabus__section-title-index { display: none; }

/*---Custom Footer Styling---*/
.footer, .footer .footer__inner {padding: 0;}
.footer .footer__inner .footer__company__info {display: none;}
.cFooter {padding: 40px 8%; background: #000000; color: #ffffff; position: relative;}
.cFooter p {font-size: 14px; line-height: 24px; margin-bottom: 0;}
.cFooter::before {content: ''; display: block; position: absolute; top: -1px; left: 50%; transform: translateX(-50%); width: 0; 
  height: 0; 
  border-left: 20px solid transparent;
  border-right: 20px solid transparent;
  border-top: 20px solid #fff;
}
.cFooter .ftWrap {display: block; /*margin-bottom: 32px;*/}
.cFooter .ftWrap::after {content: ''; display: block; clear: both;}
.cFooter .ftWrap .navigation {float: right; width: 48%;}
.cFooter .ftWrap .socialSignup {float: left; width: 48%;}
.cFooter .ftWrap .social {margin-bottom: 20px;}
.cFooter .ftWrap .social ul {display: block; margin: 0; padding: 0;}
.cFooter .ftWrap .social ul li {display: inline-block; margin-right: 4px;}
.cFooter .ftWrap .social ul li i {display: block; width: 24px; line-height: 24px; background: #a6a6a6; border-radius: 50%; text-align: center; font-size: 16px; color: #000; font-family: "Inter"; font-size: 14px;}
.cFooter .navigation h4 {color: #ffffff; font-weight: 600;}
.cFooter .navigation .col {display: inline-block; width: 48%;}
.cFooter .navigation ul {display: block; margin: 0; padding: 0;}
.cFooter .navigation ul li {display: block; border-top: 1px solid #ffffff;}
.cFooter .navigation ul li a {color: inherit; font-size: 13px; padding: 12px 0; display: block; color: #ffffff;}

/* New overrides for logo sizing */
.cFooter .socialSignup img,
.cFooter img {
  width: 200px !important;
  height: 65px !important;
  max-width: 200px !important;
  max-height: 65px !important;
  object-fit: contain !important;
  margin-bottom: 0 !important;
}

/* New overrides for link hover effect */
.cFooter .navigation ul li a {
  font-weight: 400 !important;
  transition: font-weight 0.1s ease !important;
}

.cFooter .navigation ul li a:hover {
  font-weight: 700 !important;
}

/* Align contact text with Subscribe link */
.cFooter .socialSignup.logoSection {
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
  height: 100% !important;
}

.cFooter .socialSignup.logoSection p {
  margin-top: 20px !important;
  margin-bottom: 0 !important;
}

/* Legal links styling */
.cFooter .legal-links {
  margin-top: 15px;
  display: flex;
  gap: 20px;
}

.cFooter .legal-links a {
  color: #ffffff;
  text-decoration: none;
  font-size: 14px;
  font-weight: 400;
  transition: font-weight 0.1s ease;
}

.cFooter .legal-links a:hover {
  font-weight: 700;
}
/* COURSE PLAYER OUTER AREA BACKGROUND */
.course__container {
  background-color: #ffffff !important;
}

.learner__content {
  background-color: transparent !important;
} 
/* =========================
   COURSE PLAYER CONTENT PANEL
   =========================  */

/* Main lesson content area */
.learner__content {
  background-color: #cbcbcb !important;
  color: #ffffff !important; /* ensures text is readable */
}

  /*=========================
   COURSE SUB-MENU (SIDEBAR)
   ========================= */

/* Sidebar container
.learner__sidebar {
  border: 2px solid #cbcbcb !important;
  box-sizing: border-box;
}
*/
/* ===== Course Details Page - Overview tab styling  ===== */
/* WCAG 2.2 compliant version */
/* Key changes: focus indicators, reduced motion, contrast, touch targets, rem units */

.ti-course-wrapper {
  font-family: Inter, sans-serif;
  font-size: 0.9375rem; /* 15px in rem for user font scaling support */
  max-width: 1100px;
  margin: 0 auto;
}

/* Top grey section */
/* #f3f3f3 background retained — text contrast verified above 4.5:1 against #1a1a1a */
.ti-course-top {
  display: flex;
  flex-wrap: wrap;
  gap: 40px;
  background: #f3f3f3;
  padding: 30px;
  border-radius: 10px;
  margin-bottom: 30px;
}

.ti-course-top-column {
  flex: 1;
  min-width: 280px;
}

/* Intro spacing — 1.7 line height supports readability per WCAG 1.4.12 Text Spacing */
.ti-course-wrapper p {
  line-height: 1.7;
}

/* Reduce bullet indent in top section */
.ti-course-top ul {
  padding-left: 24px;
  margin-left: 0;
}

/* Module grid */
.ti-module-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 30px;
  margin-top: 40px;
}

/* Collapsible cards */
.ti-module-card {
  flex: 1 1 48%;
  max-width: 48%;
}

.ti-module-card details {
  background: #fafafa;
  padding: 0;
  border-radius: 12px;
  border: 1px solid #e6e6e6;
  box-shadow: 0 2px 6px rgba(0,0,0,0.04);
  /* transition moved to prefers-reduced-motion block below */
  overflow: hidden;
}

/* WCAG 2.5.8 Target Size — minimum 44x44px touch target for summary */
.ti-module-card summary {
  padding: 20px 25px;
  min-height: 44px; /* WCAG 2.2 minimum touch target height */
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-weight: 600;
  cursor: pointer;
  list-style: none;
  color: #1a1a1a; /* Explicit color ensures contrast is not inherited unexpectedly */
  /* WCAG 2.4.11/2.4.12 — focus indicator defined below */
}

.ti-module-card summary::-webkit-details-marker {
  display: none;
}

/* WCAG 4.1.2 — Custom arrow communicates open/closed state visually */
/* Screen readers use the native details/summary open attribute for state */
.ti-module-card summary::after {
  content: "＋";
  flex-shrink: 0;
  font-weight: 400;
  /* WCAG 1.4.11 — decorative indicator, state conveyed by native element */
  aria-hidden: true; /* Note: apply aria-hidden="true" on a span in HTML for full support */
}

.ti-module-card details[open] summary::after {
  content: "−";
}

/* WCAG 2.4.11 Focus Appearance — visible focus indicator for keyboard users */
.ti-module-card summary:focus {
  outline: none; /* Remove default to apply custom below */
}

.ti-module-card summary:focus-visible {
  outline: 3px solid #005fcc; /* High contrast focus ring — 3:1 minimum against background */
  outline-offset: 2px;
  border-radius: 12px;
}

/* Content inside collapsible */
.ti-module-content {
  padding: 0 25px 25px 25px;
}

.ti-module-content hr {
  border: none;
  border-top: 1px solid #e0e0e0;
  margin: 15px 0;
}

.ti-module-content ul {
  line-height: 1.8;
  padding-left: 5px;
}

/* Mobile — WCAG 1.4.4 Resize Text, 1.4.10 Reflow */
@media (max-width: 768px) {
  .ti-module-card {
    flex: 1 1 100%;
    max-width: 100%;
  }
}

/* WCAG 2.3.3 / 2.5.3 — Respect user motion preferences */
/* Hover transform and transitions only applied when motion is acceptable */
@media (prefers-reduced-motion: no-preference) {
  .ti-module-card details {
    transition: box-shadow 0.25s ease, transform 0.25s ease;
  }
  .ti-module-card details:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 24px rgba(0,0,0,0.08);
  }
}

/* For users who prefer reduced motion — subtle shadow only, no movement */
@media (prefers-reduced-motion: reduce) {
  .ti-module-card details:hover {
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
  }
}

/* ===== Option 4: Banner + Two Columns ===== */
.ti-opt4 {
  max-width: 1200px;
  margin: 40px auto;
  padding: 0 20px 20px;
}

.ti4-banner {
  width: 100%;
  /* WCAG 1.4.3 — #fff on #2F6F6F end of gradient: ~7.2:1 contrast ratio — passes AAA */
  /* #fff on #4A8C8C lighter end: ~3.8:1 — passes AA for large text (2rem bold) */
  background: linear-gradient(90deg, #4A8C8C 0%, #2F6F6F 100%);
  border-radius: 14px 14px 0 0;
  padding: 22px 26px;
}

.ti4-banner h1 {
  margin: 0;
  color: #fff;
  font-size: 2rem;
}

.ti4-body {
  background: #fff;
  border: 1px solid #e7e7e7;
  border-top: none;
  border-radius: 0 0 14px 14px;
  padding: 26px;
  display: grid;
  grid-template-columns: 1fr 1px 1fr;
  gap: 22px;
  box-shadow: 0 2px 14px rgba(0,0,0,.06);
}

.ti4-col h2 {
  margin: 0 0 8px;
  color: #1a1a1a; /* ~18.1:1 on white — passes AAA */
}

/* WCAG 1.4.3 — #666 on white = 5.74:1, passes AA for normal text */
.ti4-col p {
  margin: 0 0 14px;
  color: #595959; /* Slightly darker than #666 — 7:1 on white, passes AAA */
}

.ti4-col ul {
  margin: 12px 0 18px;
  padding-left: 18px;
  color: #333; /* ~12.6:1 on white — passes AAA */
}

.ti4-divider {
  background: #e7e7e7;
  width: 1px;
  /* WCAG 1.1.1 — purely decorative, no role needed */
}

/* WCAG 2.4.11 + 2.5.8 — Button focus and minimum touch target */
.ti4-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px; /* WCAG 2.2 minimum touch target */
  min-width: 44px;
  padding: 10px 20px;
  border-radius: 999px;
  background: #1a1a1a;
  color: #fff; /* ~18.1:1 on #1a1a1a — passes AAA */
  text-decoration: none;
  font-weight: 700;
  /* WCAG 2.4.4 — ensure button has descriptive text or aria-label in HTML */
}

.ti4-btn:hover {
  background: #333;
  text-decoration: underline; /* WCAG 1.4.1 — not relying on colour alone for hover state */
}

.ti4-btn:focus {
  outline: none;
}

.ti4-btn:focus-visible {
  outline: 3px solid #005fcc;
  outline-offset: 3px;
}

/* WCAG 1.4.10 Reflow — single column below 900px */
@media (max-width: 900px) {
  .ti4-body {
    grid-template-columns: 1fr;
    border-radius: 14px;
    border-top: 1px solid #e7e7e7;
  }
  .ti4-divider {
    display: none;
  }
  .ti4-banner {
    border-radius: 14px;
  }
}

/* WCAG 1.4.12 Text Spacing — ensure layout does not break with user overrides */
/* No fixed heights on text containers so content reflows safely */

/* High contrast mode support (WCAG 1.4.11) */
@media (forced-colors: active) {
  .ti-module-card details {
    border: 1px solid ButtonText;
  }
  .ti-module-card summary:focus-visible {
    outline: 3px solid Highlight;
  }
  .ti4-btn {
    border: 2px solid ButtonText;
    forced-color-adjust: none;
  }
}

/* ===== Course Card - Fixed Height Only ===== */

/* Fixed height image container */
.catalog-grid-item__asset-container {
  width: 100% !important;
  height: 220px !important;
  overflow: hidden !important;
  flex-shrink: 0 !important;
}

/* Image fills container without distortion */
.catalog-grid-item__asset {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
}

/* Card body content area */
.catalog-grid-item__body {
  flex: 1 !important;
  display: flex !important;
  flex-direction: column !important;
}

/* Truncate description to exactly 1 line */
.catalog-grid-item__description,
p.catalog-grid-item__description {
  display: -webkit-box !important;
  -webkit-line-clamp: 1 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: normal !important;
  margin: 0 !important;
}

/* Push source/meta to bottom of card */
.catalog-grid-item__source {
  margin-top: auto !important;
  padding-top: 8px !important;
}

/* Equal height cards in grid */
.ember-view.catalog-grid-item {
  display: flex !important;
  flex-direction: column !important;
  height: 100% !important;
}

/* Responsive */
@media (max-width: 768px) {
  .catalog-grid-item__asset-container {
    height: 180px !important;
  }
}

@media (max-width: 480px) {
  .catalog-grid-item__asset-container {
    height: 160px !important;
  }
}

.featured-content-multi-carousel-item
{
  width: 100% !important;
  height: 350px !important;
  overflow: hidden !important;
  flex-shrink: 0 !important;
}

/* ===== Hide Enroll Today Box Globally ===== */

.enroll {
  display: none !important;
}

.panel:has(.enroll) {
  display: none !important;
}

/* ===== Course Detail Page — Reorder Sample Lesson and Already Subscribed ===== */

.widget--course-purchase_standard .ember-view {
  display: flex !important;
  flex-direction: column !important;
}

.course__detail__enrolled {
  order: 1 !important;
  display: block !important;
  margin-bottom: 8px !important;
}

.widget--course-purchase_standard .ember-view > div:has(.preview-link) {
  order: 2 !important;
}

.widget--course-purchase_standard .panel {
  order: 3 !important;
}

/* ===== Hover Colours ===== */

/* Sample Lesson hover */
a.preview-link:hover,
a.preview-link:hover span {
  color: #3a5bc7 !important;
}

/* Already Subscribed hover */
.course__detail__enrolled a.btn:hover,
.course__detail__enrolled a.btn:hover span {
  color: #3a5bc7 !important;
}

/* ===== Sample Lesson Page ===== */

.purchase-required .enroll,
.purchase-required .panel:has(.enroll) {
  display: none !important;
}

.purchase-required a[href*="sign_in"],
.purchase-required .btn[href*="sign_in"] {
  display: block !important;
}

/* Already Subscribed hover on sample lesson page */
.purchase-required a[href*="sign_in"]:hover,
.purchase-required a[href*="sign_in"]:hover span {
  color: #3a5bc7 !important;
}
/* ============================================================
   UNITY ACADEMY — GLOBAL ONBOARDING SURVEY CSS FIXES v3
   ============================================================ */

/* ----------------------------------------------------------------
   1. REMOVE LOGO HYPERLINK - onboarding survey page ONLY
   ---------------------------------------------------------------- */

body.survey a.company__beta-logo {
  pointer-events: none;
  cursor: default;
  text-decoration: none;
}
 
body.survey a.company__beta-logo:focus {
  outline: none;
}


/* ------------------------------------------------------------
   2. CONSTRAIN SURVEY RESPONSE DROPDOWN WIDTH 
   ------------------------------------------------------------ */

.application__content--survey select,
.survey-question select,
.survey-question .field-wrapper select,
.survey-response select {
  width: auto !important;
  max-width: max-content;
  min-width: 280px;
  display: block;
}

.application__content--survey .select-wrapper,
.application__content--survey .field-select,
.survey-question .field-select {
  width: auto !important;
  max-width: max-content;
  min-width: 280px;
  display: inline-block;
}


/* ------------------------------------------------------------
   3. CTA BUTTON — align left edge to dropdown left edge
   ------------------------------------------------------------ */

.application__content--survey .medium-12.columns {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  padding-top: 0;
  padding-bottom: 0;
}

.application__content--survey .medium-12.columns .btn--right.btn--primary,
.application__content--survey .medium-12.columns .btn--right.btn--large,
.application__content--survey .medium-12.columns button.btn--right {
  float: none !important;
  display: inline-block;
  margin-right: auto !important;
  margin-left: 140px !important; /* ← adjust this value if needed */
}


/* ------------------------------------------------------------
   4. SPACING — between last body text paragraph and dropdown
   ------------------------------------------------------------ */

.application__content--survey select,
.survey-question select,
.survey-question .field-wrapper select {
  margin-top: 20px !important;
}

.application__content--survey .select-wrapper,
.survey-question .field-select {
  margin-top: 20px !important;
}


/* ------------------------------------------------------------
   5. UNITY TERMS OF SERVICE LINK — blue hover
   ------------------------------------------------------------ */

/* ---------------------------------
   Survey link styling
   Purpose:
   Keeps your existing survey link hover/focus styling.
---------------------------------- */
.application__content--survey a:hover,
.application__content--survey a:focus,
.survey-question a:hover,
.survey-question a:focus {
  color: #3a5bc7 !important;
  text-decoration: underline;
}

/* ------------------------------------------------------------
   6. HEADER CODE
   ------------------------------------------------------------ */

/* ---------------------------------
   Survey link styling
---------------------------------- */
.application__content--survey a:hover,
.application__content--survey a:focus,
.survey-question a:hover,
.survey-question a:focus {
  color: #3a5bc7 !important;
  text-decoration: underline;
}

/* ---------------------------------
   Header wrapper reset
---------------------------------- */
.container,
.header_inner,
.header__inner {
  margin-top: 0 !important;
  padding-top: 0 !important;
  border-top: 0 !important;
}

/* ---------------------------------
   Unity header container
   Purpose:
   Full-width black header flush left and right.
---------------------------------- */
.unity-header,
.unity-header:first-child {
  position: relative;
  z-index: 999;
  background: #000000;
  color: #ffffff;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  padding: 0 !important;
  border-top: 0 !important;

  width: 100vw;
  max-width: 100vw;
  left: 50%;
  right: 50%;
  margin-left: -50vw !important;
  margin-right: -50vw !important;
}

/* ---------------------------------
   Header inner layout
---------------------------------- */
.unity-header__inner {
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 4px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-sizing: border-box;
  min-height: 60px;
}

/* ---------------------------------
   Left side layout
---------------------------------- */
.unity-header__left {
  display: flex;
  align-items: center;
  gap: 32px;
  min-width: 0;
}

.unity-header__logo-link {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  flex-shrink: 0;
}

.unity-header__logo {
  display: block !important;
  height: 56px !important;
  width: auto !important;
  max-width: none !important;
}

/* ---------------------------------
   Navigation
---------------------------------- */
.unity-header__nav {
  display: flex;
  align-items: center;
  gap: 24px;
  height: 100%;
}

.unity-header__nav-link {
  position: relative;
  display: inline-flex;
  align-items: center;
  height: 76px;
  color: #ffffff;
  text-decoration: none;
  font-size: 15px;
  font-weight: 700;
  line-height: 1;
  padding: 0;
  transition: color 0.2s ease, opacity 0.2s ease;
}

.unity-header__nav-link:hover,
.unity-header__nav-link:focus,
.unity-header__signin:hover,
.unity-header__signin:focus {
  color: #66b3ff;
}

.unity-header__nav-link.is-active {
  color: #00aef0;
  cursor: default;
  pointer-events: none;
}

.unity-header__nav-link.is-active::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 4px;
  width: 100%;
  height: 2px;
  background: #00aef0;
  border-radius: 2px;
}

/* ---------------------------------
   Right side layout
---------------------------------- */
.unity-header__right {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-shrink: 0;
  height: 76px;
}

/* ---------------------------------
   Search
---------------------------------- */
/* ---------------------------------
   Search
---------------------------------- */
.unity-header__search {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
}

.unity-header__search input {
  height: 34px;
  width: 220px;
  background-color: #111111 !important;
  border: 1px solid #2b2b2b !important;
  color: #ffffff !important;
  caret-color: #ffffff !important;
  border-radius: 18px;
  padding: 0 14px;
  outline: none;
  box-sizing: border-box;
  margin: 0;
  appearance: none;
  -webkit-appearance: none;
  box-shadow: none !important;
}

.unity-header__search input::placeholder {
  color: #b3b3b3 !important;
  opacity: 1;
}

.unity-header__search input:focus,
.unity-header__search input:active {
  background-color: #1a1a1a !important;
  color: #ffffff !important;
  border-color: #00aef0 !important;
  box-shadow: 0 0 0 2px rgba(0, 174, 240, 0.2) !important;
  outline: none !important;
}

.unity-header__search input:-webkit-autofill,
.unity-header__search input:-webkit-autofill:hover,
.unity-header__search input:-webkit-autofill:focus {
  -webkit-text-fill-color: #ffffff !important;
  -webkit-box-shadow: 0 0 0px 1000px #1a1a1a inset !important;
  transition: background-color 5000s ease-in-out 0s;
}

.unity-header__search button {
  height: 34px;
  padding: 0 14px;
  margin: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  border-radius: 18px;
  border: 1px solid #4b5a78;
  background: #1a1a1a;
  color: #ffffff;
  cursor: pointer;
  font-size: 13px;
  font-weight: 700;
  line-height: 1;
  box-shadow: none !important;
  transition:
    background-color 0.2s ease,
    border-color 0.2s ease,
    color 0.2s ease,
    box-shadow 0.2s ease;
}

.unity-header__search button:hover {
  background: #252525;
  border-color: #6c7ea5;
  color: #ffffff;
}

.unity-header__search button:focus {
  outline: none !important;
}

.unity-header__search button:focus-visible {
  background: #252525;
  border-color: #6c7ea5;
  color: #ffffff;
  box-shadow: 0 0 0 2px rgba(108, 126, 165, 0.28);
}

.unity-header__search button:active {
  background: #141414;
  border-color: #5f7194;
  color: #ffffff;
  box-shadow: none !important;
}



/* ---------------------------------
   Auth
---------------------------------- */
.unity-header__auth {
  display: flex;
  align-items: center;
  height: 34px;
}

.unity-header__signin {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 34px;
  color: #ffffff;
  text-decoration: none;
  font-size: 15px;
  font-weight: 700;
  white-space: nowrap;
  line-height: 1;
}

.unity-header__auth--signed-in {
  display: flex;
  align-items: center;
  gap: 10px;
  position: relative;
  height: 34px;
}

.unity-header__user-name {
  display: inline-flex;
  align-items: center;
  height: 34px;
  font-size: 14px;
  font-weight: 600;
  color: #ffffff;
  white-space: nowrap;
}

.unity-header__user-menu {
  position: relative;
  display: flex;
  align-items: center;
  height: 34px;
}

.unity-header__user-trigger {
  background: transparent;
  border: none;
  padding: 0;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  height: 34px;
}

.unity-header__user-initials {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: #2f2f2f;
  border: 1px solid #00aef0;
  color: #ffffff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 700;
  line-height: 1;
}

/* ---------------------------------
   Dropdown
---------------------------------- */
.unity-header__dropdown {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  min-width: 170px;
  background: #111111;
  border: 1px solid #2b2b2b;
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
  overflow: hidden;
}

/* REPLACE any display:none/block dropdown rules with these */
.unity-header__dropdown {
  position: fixed !important;
  top: 72px !important;
  right: 20px !important;
  min-width: 190px !important;
  padding: 8px !important;
  border-radius: 14px !important;
  border: 1px solid rgba(255,255,255,0.14) !important;
  background: linear-gradient(180deg, rgba(18,20,26,0.98), rgba(10,12,16,0.98)) !important;
  box-shadow: 0 18px 40px rgba(0,0,0,0.36) !important;
  backdrop-filter: blur(10px) !important;
  z-index: 999999 !important;

  /* Hidden by default via opacity/visibility, NOT display:none */
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  transform: translateY(-6px) !important;
  transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s ease !important;
}

.unity-header__user-menu.is-open .unity-header__dropdown {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  transform: translateY(0) !important;
}

.unity-header__dropdown a {
  display: block;
  padding: 12px 14px;
  color: #ffffff;
  text-decoration: none;
  font-size: 14px;
}

.unity-header__dropdown a:hover,
.unity-header__dropdown a:focus {
  background: #1b1b1b;
  color: #66b3ff;
}

/* ---------------------------------
   Blue divider line under header
---------------------------------- */
.unity-header__bottom-line {
  width: 100%;
  height: 2px;
  background: #00aef0;
}

/* ---------------------------------
   Accessibility utility
---------------------------------- */
.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;
}

/* ---------------------------------
   Tablet responsive
---------------------------------- */
@media (max-width: 1024px) {
  .unity-header__inner {
    flex-wrap: wrap;
    gap: 10px;
    padding: 8px 20px;
  }

  .unity-header__left,
  .unity-header__right {
    width: 100%;
    justify-content: space-between;
  }

  .unity-header__left {
    flex-wrap: wrap;
    gap: 14px;
  }

  .unity-header__nav {
    flex-wrap: wrap;
    gap: 18px;
  }

  .unity-header__search input {
    width: 180px;
  }
}

/* ---------------------------------
   Mobile responsive
---------------------------------- */
@media (max-width: 640px) {
  .unity-header__inner {
    padding: 8px 16px;
    min-height: auto;
  }

  .unity-header__logo {
    height: 56px;
    max-width: 300px;
  }

  .unity-header__nav-link {
    height: auto;
    font-size: 13px;
  }

  .unity-header__signin,
  .unity-header__user-name {
    font-size: 13px;
  }

  .unity-header__right {
    height: auto;
  }

  .unity-header__search {
    width: 100%;
  }

  .unity-header__search input {
    width: 100%;
    min-width: 0;
  }
}

/* ------------------------------------
   Hide Native Language UI Selector
-------------------------------------- */
.learner__language__selector,
.learner__language__selector--light,
.learner__language__selector.light,
.learner__language__selector__opt-sel,
.learner__language__selector__btn,
.learner__language__selector__btn.light,
.language-selector-content {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

/* =========================================================
   UNITY ACADEMY / THOUGHT INDUSTRIES
   FEATURED CONTENT CAROUSEL + CATALOG CARD STYLING
========================================================= */
/* =========================================================
   UNITY ACADEMY / THOUGHT INDUSTRIES
   GLOBAL CARD TOKENS
========================================================= */
:root {
  --ua-card-bg-top: rgba(18,20,26,0.98);
  --ua-card-bg-bottom: rgba(10,12,16,0.98);
  --ua-card-border: rgba(255,255,255,0.14);
  --ua-card-shadow: rgba(0,0,0,0.42);
  --ua-text-main: #ffffff;
  --ua-text-soft: rgba(255,255,255,0.76);
  --ua-text-muted: rgba(255,255,255,0.62);

  --ua-pill-border: rgba(255,255,255,0.12);
  --ua-pill-bg: rgba(255,255,255,0.08);

  --ua-type-bg: #d93b4f;
  --ua-type-text: #ffffff;

  --ua-beginner: #67d46f;
  --ua-beginner-bg: rgba(103, 212, 111, 0.12);
  --ua-beginner-border: rgba(103, 212, 111, 0.45);

  --ua-intermediate: #ffd24d;
  --ua-intermediate-bg: rgba(255, 210, 77, 0.12);
  --ua-intermediate-border: rgba(255, 210, 77, 0.42);

  --ua-advanced: #ff6b6b;
  --ua-advanced-bg: rgba(255, 107, 107, 0.12);
  --ua-advanced-border: rgba(255, 107, 107, 0.42);

  --ua-duration-bg: rgba(126, 200, 255, 0.10);
  --ua-duration-border: rgba(126, 200, 255, 0.20);
  --ua-duration-text: #7ec8ff;

  --ua-live-bg: rgba(255,255,255,0.08);
  --ua-live-border: rgba(255,255,255,0.16);
  --ua-live-text: #ffffff;

  --ua-cta-bg: rgba(255,255,255,0.07);
  --ua-cta-bg-hover: rgba(255,255,255,0.12);
  --ua-cta-text: #ffffff;
  --ua-cta-border: rgba(255,255,255,0.28);
  --ua-accent: #00c2ff;
  --ua-shadow: rgba(0,0,0,0.44);
}

/* =========================================================
   REMOVE TI BACKGROUND BLOCKING / LINK WRAPPER
========================================================= */
.catalog-item,
.featured-content-multi-carousel-item,
.catalog-grid-item,
.catalog-grid-item .row,
.catalog-grid-item .column,
.featured-content-multi-carousel-item__body,
.catalog-grid-item__body {
  background: transparent !important;
}

.catalog-item {
  display: block !important;
  height: 100% !important;
  text-decoration: none !important;
  color: inherit !important;
}

/* =========================================================
   CARD SHELLS
========================================================= */
.featured-content-multi-carousel-item,
.catalog-grid-item {
  position: relative;
  display: flex !important;
  flex-direction: column !important;
  height: 100% !important;
  overflow: hidden !important;
  border-radius: 20px !important;
  background: linear-gradient(180deg, var(--ua-card-bg-top), var(--ua-card-bg-bottom)) !important;
  border: 1px solid var(--ua-card-border) !important;
  box-shadow:
    0 20px 60px var(--ua-card-shadow),
    inset 0 1px 0 rgba(255,255,255,0.04) !important;
  color: var(--ua-text-main) !important;
}

/* =========================================================
   TI ROW/COLUMN RESET
========================================================= */
.catalog-grid-item .row,
.catalog-grid-item .column,
.featured-content-multi-carousel-item .row,
.featured-content-multi-carousel-item .column {
  margin: 0 !important;
  padding: 0 !important;
}

/* =========================================================
   IMAGE WRAPPERS / IMAGE TREATMENT
========================================================= */
.catalog-grid-item__asset-container {
  position: relative !important;
  overflow: hidden !important;
  background: #13151b !important;
  border-top-left-radius: 20px !important;
  border-top-right-radius: 20px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  line-height: 0 !important;
}

.catalog-grid-item__asset,
.catalog-grid-item__asset-container img,
.catalog-grid-item__asset-container > div > img,
.featured-content-multi-carousel-item .catalog-grid-item__asset-container img {
  display: block !important;
  width: 100% !important;
  height: auto !important;
  aspect-ratio: 16 / 9;
  object-fit: cover !important;
  margin: 0 !important;
  border-radius: 0 !important;
}

.catalog-grid-item__asset-container::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(0,0,0,0.01), rgba(0,0,0,0.05)),
    radial-gradient(circle at 82% 18%, rgba(0,194,255,0.03), transparent 12%);
  pointer-events: none;
}

/* =========================================================
   HIDE NATIVE META LINES
========================================================= */
.featured-content-multi-carousel-item__source,
.catalog-grid-item__source,
.featured-content-multi-carousel-item__start-date {
  display: none !important;
}

/* =========================================================
   CARD BODIES
========================================================= */
.featured-content-multi-carousel-item__body,
.catalog-grid-item__body {
  display: flex !important;
  flex-direction: column !important;
  flex: 1 1 auto !important;
  padding: 16px 18px 18px !important;
  background: transparent !important;
}

/* =========================================================
   TITLES / DESCRIPTIONS
========================================================= */
.featured-content-multi-carousel-item__title,
.catalog-grid-item__title {
  margin: 0 0 12px !important;
  color: var(--ua-text-main) !important;
  font-size: clamp(1.55rem, 2vw, 2rem) !important;
  line-height: 1.08 !important;
  font-weight: 800 !important;
  letter-spacing: -0.03em !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden !important;
  min-height: 2.2em !important;
  height: auto !important;
  text-shadow: 0 4px 18px rgba(0,0,0,0.18);
}

.featured-content-multi-carousel-item__description,
.catalog-grid-item__description {
  margin: 0 0 16px !important;
  color: var(--ua-text-soft) !important;
  font-size: 15px !important;
  line-height: 1.55 !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden !important;
  min-height: 4.65em !important;
  height: auto !important;
}

/* =========================================================
   CONTENT TYPE BADGE - RELIABLE ATTRIBUTE-DRIVEN VERSION
========================================================= */

.ua-content-type-badge {
  position: absolute !important;
  top: 14px !important;
  right: 14px !important;
  z-index: 10 !important;

  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  min-height: 44px !important;
  min-width: 0 !important;
  width: auto !important;
  max-width: calc(100% - 120px) !important;
  padding: 0 16px !important;

  border-radius: 12px !important;
  background: var(--ua-type-bg) !important;
  box-shadow: 0 8px 24px rgba(0,0,0,0.26) !important;
  box-sizing: content-box !important;
  overflow: visible !important;
  pointer-events: none !important;
  white-space: nowrap !important;
}

.ua-content-type-badge::before {
  content: attr(data-ua-type);
  display: block !important;
  width: auto !important;
  color: var(--ua-type-text) !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  letter-spacing: 0.05em !important;
  line-height: 1 !important;
  text-transform: uppercase !important;
  white-space: nowrap !important;
  text-align: center !important;
}

/* =========================================================
   FIX: CONTENT TYPE BADGE IN CONTENT CAROUSEL ONLY
========================================================= */

.featured-content-multi-carousel-item .ua-content-type-badge {
  position: absolute !important;
  top: 14px !important;
  right: 14px !important;
  z-index: 20 !important;

  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  min-width: 0 !important;
  width: auto !important;
  height: 44px !important;
  padding: 0 20px !important;

  border-radius: 12px !important;
  background: var(--ua-type-bg) !important;
  box-sizing: content-box !important;
  overflow: visible !important;
  pointer-events: none !important;
  white-space: nowrap !important;

  transform: none !important;
  line-height: normal !important;
}

.featured-content-multi-carousel-item .ua-content-type-badge::before {
  content: attr(data-ua-type);
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 20px !important;
  width: auto !important;
  height: 100% !important;
  margin: 0 !important;
  color: var(--ua-type-text) !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  letter-spacing: 0.05em !important;
  line-height: 1 !important;
  text-transform: uppercase !important;
  white-space: nowrap !important;
  text-align: center !important;
  transform: none !important;
  position: static !important;
}

/* =========================================================
   TOP-LEFT RIBBON
========================================================= */
.catalog__ribbon,
.catalog__ribbon--attached,
.ribbon,
.card-ribbon,
.content-ribbon {
  position: absolute !important;
  top: 14px !important;
  left: 14px !important;
  right: auto !important;
  z-index: 11 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 32px !important;
  padding: 7px 12px !important;
  border-radius: 10px !important;
  color: #ffffff !important;
  font-size: 12px !important;
  line-height: 1 !important;
  font-weight: 800 !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
  box-shadow: 0 8px 24px rgba(0,0,0,0.22) !important;
  overflow: hidden !important;
  max-width: calc(100% - 120px);
}

.catalog__ribbon-corner {
  display: none !important;
}

/* =========================================================
   META ROWS / LIVE BOX
========================================================= */
.ua-card-meta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0 0 14px;
}

.ua-live-meta {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  margin: 0 0 14px;
}

.ua-live-datebox {
  display: inline-flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: 10px;
  padding: 12px 16px;
  border-radius: 12px;
  border: 1px solid var(--ua-live-border);
  background: var(--ua-live-bg);
  color: var(--ua-live-text);
  width: fit-content !important;
  min-width: 0 !important;
  max-width: 100%;
  align-self: flex-start;
}


.ua-live-datebox__label {
  font-size: 11px;
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: rgba(255,255,255,0.68);
  font-weight: 700;
}

.ua-live-datebox__value {
  font-size: 15px;
  line-height: 1;
  font-weight: 800;
  color: #ffffff;
}

/* =========================================================
   PILLS
========================================================= */
.ua-pill {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 8px 12px;
  border-radius: 10px;
  border: 1px solid var(--ua-pill-border);
  background: var(--ua-pill-bg);
  font-size: 13px;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
}

.ua-pill--duration {
  color: var(--ua-duration-text);
  background: var(--ua-duration-bg);
  border-color: var(--ua-duration-border);
}

.ua-pill--beginner {
  color: var(--ua-beginner);
  background: var(--ua-beginner-bg);
  border-color: var(--ua-beginner-border);
}

.ua-pill--intermediate {
  color: var(--ua-intermediate);
  background: var(--ua-intermediate-bg);
  border-color: var(--ua-intermediate-border);
}

.ua-pill--advanced {
  color: var(--ua-advanced);
  background: var(--ua-advanced-bg);
  border-color: var(--ua-advanced-border);
}

/* =========================================================
   AUTHOR
========================================================= */
.ua-card-author {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: auto;
  color: var(--ua-text-muted);
  font-size: 14px;
  line-height: 1.3;
  min-height: 28px;
}

.ua-card-author__avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 999px;
  background: linear-gradient(135deg, rgba(255,107,107,0.9), rgba(0,194,255,0.9));
  color: #ffffff;
  font-size: 11px;
  font-weight: 800;
  flex: 0 0 auto;
  text-transform: uppercase;
}

.ua-card-author__name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* =========================================================
   CTA STYLING
========================================================= */
.catalog-grid-item__cta-container .btn,
.catalog-grid-item__cta-container .btn--primary,
.catalog-grid-item__cta-container .btn--link,
.featured-content-multi-carousel-item .btn,
.featured-content-multi-carousel-item .btn--primary,
.featured-content-multi-carousel-item .btn--link {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 46px;
  padding: 11px 18px !important;
  border-radius: 10px !important;
  text-decoration: none !important;
  font-weight: 700 !important;
  font-size: 15px !important;
  line-height: 1 !important;
  letter-spacing: 0.01em !important;
  border: 1px solid var(--ua-cta-border) !important;
  background: var(--ua-cta-bg) !important;
  color: var(--ua-cta-text) !important;
  box-shadow: 0 10px 30px var(--ua-shadow) !important;
  transition:
    transform 0.12s ease,
    background-color 0.2s ease,
    border-color 0.2s ease,
    box-shadow 0.2s ease !important;
}

.catalog-grid-item__cta-container .btn:hover,
.catalog-grid-item__cta-container .btn--primary:hover,
.catalog-grid-item__cta-container .btn--link:hover,
.featured-content-multi-carousel-item .btn:hover,
.featured-content-multi-carousel-item .btn--primary:hover,
.featured-content-multi-carousel-item .btn--link:hover {
  transform: translateY(-1px);
  background: var(--ua-cta-bg-hover) !important;
  color: var(--ua-cta-text) !important;
  box-shadow: 0 12px 26px rgba(0,0,0,0.3) !important;
}

.catalog-grid-item__hr {
  display: none !important;
}

/* =========================================================
   HIDE PROGRESS
========================================================= */
.progress,
.progress-bar,
.progress-track,
.enrollment-progress,
.course-progress,
.percent-complete,
.completion-progress {
  display: none !important;
}

/* =========================================================
   CAROUSEL / SLIDER SUPPORT
========================================================= */
.slick-track,
.swiper-wrapper,
.owl-stage {
  display: flex !important;
  align-items: stretch !important;
}

.slick-slide,
.swiper-slide,
.owl-item {
  height: auto !important;
}

.slick-slide > div {
  height: 100%;
}

/* =========================================================
   CONTENT CAROUSEL IMAGE FLUSH + ROUNDED TOP CORNERS
========================================================= */
.featured-content-multi-carousel-item {
  overflow: hidden !important;
  border-radius: 20px !important;
  padding: 0 !important;
  background: linear-gradient(180deg, rgba(18,20,26,0.98), rgba(10,12,16,0.98)) !important;
}

.featured-content-multi-carousel-item > .row,
.featured-content-multi-carousel-item > .column,
.featured-content-multi-carousel-item .row,
.featured-content-multi-carousel-item .column {
  margin: 0 !important;
  padding: 0 !important;
  max-width: none !important;
}

.featured-content-multi-carousel-item .catalog-grid-item__asset-container {
  display: block !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  border-top-left-radius: 20px !important;
  border-top-right-radius: 20px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  background: #13151b !important;
  line-height: 0 !important;
}

.featured-content-multi-carousel-item .catalog-grid-item__asset-container > div,
.featured-content-multi-carousel-item .catalog-grid-item__asset-container > span {
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
  line-height: 0 !important;
}

.featured-content-multi-carousel-item .catalog-grid-item__asset-container img,
.featured-content-multi-carousel-item .catalog-grid-item__asset,
.featured-content-multi-carousel-item .catalog-grid-item__asset-container > div > img {
  display: block !important;
  width: 100% !important;
  height: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  aspect-ratio: 16 / 9;
  object-fit: cover !important;
  border-radius: 0 !important;
}

.featured-content-multi-carousel-item .featured-content-multi-carousel-item__body {
  padding: 16px 18px 18px !important;
  margin: 0 !important;
}

.catalog-item > .featured-content-multi-carousel-item {
  margin: 0 !important;
}

/* =========================================================
   MOBILE
========================================================= */
@media (max-width: 767px) {
  .featured-content-multi-carousel-item__title,
  .catalog-grid-item__title {
    font-size: 22px !important;
  }

  .featured-content-multi-carousel-item__description,
  .catalog-grid-item__description {
    -webkit-line-clamp: 4;
    min-height: 6.2em !important;
  }

  .ua-live-datebox {
    min-width: 0;
    width: 100%;
  }
}

/* =========================================================
   SECTION HEADER CTA LINKS ON LIGHT BACKGROUNDS
   Matches UA button language but adapted for white page areas
========================================================= */

/* Section header row layout */
.widget h2,
.widget h3,
.widget .section-title,
.widget .widget__title {
  display: inline-block;
  vertical-align: middle;
}

.widget .view-all-link:not(.widget__title-cta),
.widget .catalog-view-all:not(.widget__title-cta),
.widget .section-header__link:not(.widget__title-cta),
.widget .featured-content-multi-carousel__view-all:not(.widget__title-cta),
.widget .catalog-header__link:not(.widget__title-cta),
.widget .widget__link:not(.widget__title-cta),
.widget a[href*="catalog"]:not(.ua-btn):not(.ua-ctas__btn):not(.widget__title-cta):not(.catalog-active-filter__remove),
.widget a[href*="live-sessions"]:not(.ua-btn):not(.ua-ctas__btn):not(.widget__title-cta):not(.catalog-active-filter__remove),
.widget a[href*="content"]:not(.ua-btn):not(.ua-ctas__btn):not(.widget__title-cta):not(.catalog-active-filter__remove):not(.catalog-item) {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 36px !important;
  padding: 0 14px !important;
  border-radius: 10px !important;
  margin-top: 0 !important;
  background: #ffffff !important;
  color: #4b5563 !important;
  border: 1px solid #e5e7eb !important;
  box-shadow: 0 6px 18px rgba(0,0,0,0.08) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  line-height: 1 !important;
  letter-spacing: 0.01em !important;
  text-decoration: none !important;
  white-space: nowrap !important;
  transition:
    transform 0.12s ease,
    box-shadow 0.2s ease,
    border-color 0.2s ease,
    color 0.2s ease !important;
}

.widget .view-all-link:not(.widget__title-cta):hover,
.widget .catalog-view-all:not(.widget__title-cta):hover,
.widget .section-header__link:not(.widget__title-cta):hover,
.widget .featured-content-multi-carousel__view-all:not(.widget__title-cta):hover,
.widget .catalog-header__link:not(.widget__title-cta):hover,
.widget .widget__link:not(.widget__title-cta):hover,
.widget a[href*="catalog"]:not(.ua-btn):not(.ua-ctas__btn):not(.widget__title-cta):not(.catalog-active-filter__remove):hover,
.widget a[href*="live-sessions"]:not(.ua-btn):not(.ua-ctas__btn):not(.widget__title-cta):not(.catalog-active-filter__remove):hover,
.widget a[href*="content"]:not(.ua-btn):not(.ua-ctas__btn):not(.widget__title-cta):not(.catalog-active-filter__remove):hover {
  transform: translateY(-1px);
  color: #111827 !important;
  border-color: #d1d5db !important;
  background: #ffffff !important;
  box-shadow: 0 10px 24px rgba(0,0,0,0.10) !important;
}

.widget .view-all-link:focus-visible,
.widget .catalog-view-all:focus-visible,
.widget .section-header__link:focus-visible,
.widget .featured-content-multi-carousel__view-all:focus-visible,
.widget .catalog-header__link:focus-visible,
.widget .widget__link:focus-visible,
.widget a[href*="catalog"]:focus-visible,
.widget a[href*="live-sessions"]:focus-visible,
.widget a[href*="content"]:focus-visible {
  outline: 2px solid #00c2ff !important;
  outline-offset: 3px !important;
}

/* =========================================================
   SECTION HEADER TITLE + CTA ALIGNMENT
========================================================= */

/* Common widget header wrappers */
.widget__header,
.section-header,
.catalog-header,
.featured-content-multi-carousel__header,
.widget .row:first-child {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 16px;
}

/* Section titles */
.widget h2,
.widget h3,
.widget .section-title,
.widget .widget__title {
  margin: 0 !important;
  line-height: 1 !important;
  display: flex !important;
  align-items: center !important;
  min-height: 36px;
}

/* =========================================================
   LIVE SESSION DATE BOX FIT / FORMATTING
========================================================= */

.ua-live-datebox {
  display: inline-flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: 10px;
  padding: 12px 16px;
  border-radius: 12px;
  border: 1px solid var(--ua-live-border);
  background: var(--ua-live-bg);
  color: var(--ua-live-text);
  width: auto !important;
  min-width: 0 !important;
  max-width: 100%;
}

.ua-live-datebox__label {
  flex: 0 0 auto;
  font-size: 11px;
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: rgba(255,255,255,0.68);
  font-weight: 700;
  white-space: nowrap;
}

.ua-live-datebox__value {
  flex: 0 0 auto;
  font-size: 15px;
  line-height: 1;
  font-weight: 800;
  color: #ffffff;
  white-space: nowrap;
}

/* =========================================================
   HARD REMOVE BACKGROUND BLOCKS BEHIND CAROUSEL / CATALOG ROWS
========================================================= */

/* Outer widget wrappers */
.row.widget,
.widget,
.widget--html,
.widget--html_standard,
.ember-view.row.widget,
.ember-view.widget,
.ember-view[class*="widget"] {
  background: transparent !important;
  background-color: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
}

/* Section wrappers often used by TI */
.featured-content-multi-carousel,
.catalog-grid,
.catalog-results,
.catalog-content-listing,
.featured-content-multi-carousel-wrapper,
.catalog-grid-wrapper,
.catalog-section,
.featured-content-section,
.content-carousel,
.content-carousel-wrapper {
  background: transparent !important;
  background-color: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
}

/* Any immediate row/container beneath section title */
.featured-content-multi-carousel .row,
.catalog-grid .row,
.catalog-results .row,
.catalog-content-listing .row,
.content-carousel .row,
.row[class*="catalog"],
.row[class*="carousel"] {
  background: transparent !important;
  background-color: transparent !important;
}

/* Very aggressive fallback: remove background on direct TI row wrappers */
.ember-view.row,
.ember-view.column,
.ember-view[class*="catalog"],
.ember-view[class*="carousel"] {
  background-color: transparent !important;
}

/* Remove shadows / panels behind the cards */
[class*="catalog-grid"],
[class*="carousel"],
[class*="featured-content"] {
  box-shadow: none !important;
}

/* =========================================================
   LEARNER ACCESS / DASHBOARD ACCESS WIDGET
   Unity Academy visual refresh
========================================================= */

/* =========================================================
   OUTER WRAPPERS / PANEL SHELL
========================================================= */
.widget--dashboard-access,
.widget--dashboard-access_standard,
.dashboard-access {
  background: transparent !important;
}

.dashboard-access {
  background: linear-gradient(180deg, rgba(18,20,26,0.96), rgba(10,12,16,0.96)) !important;
  border: 1px solid rgba(255,255,255,0.14) !important;
  border-radius: 18px !important;
  box-shadow:
    0 20px 60px rgba(0,0,0,0.32),
    inset 0 1px 0 rgba(255,255,255,0.04) !important;
  overflow: hidden;
  color: #ffffff !important;
}

/* =========================================================
   TAB BAR
========================================================= */
.dashboard-access-tabs {
  display: flex !important;
  flex-wrap: wrap;
  gap: 8px;
  padding: 10px 14px 0 !important;
  margin: 0 !important;
  list-style: none !important;
  background: transparent !important;
  border: 0 !important;
}

.dashboard-access-tab {
  margin: 0 !important;
  list-style: none !important;
}

.dashboard-access-tab button,
.dashboard-access-tab .btn,
.dashboard-access-tab .btn--link,
.dashboard-access-tab .btn--inherit-font {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px;
  min-height: 32px;
  padding: 7px 12px !important;
  border-radius: 10px !important;
  border: 1px solid rgba(255,255,255,0.14) !important;
  background: rgba(255,255,255,0.05) !important;
  color: rgba(255,255,255,0.82) !important;
  text-decoration: none !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  letter-spacing: 0.01em !important;
  box-shadow: none !important;
  transition:
    background-color 0.2s ease,
    border-color 0.2s ease,
    color 0.2s ease,
    transform 0.12s ease !important;
}

.dashboard-access-tab button:hover,
.dashboard-access-tab .btn:hover,
.dashboard-access-tab .btn--link:hover,
.dashboard-access-tab .btn--inherit-font:hover {
  background: rgba(255,255,255,0.10) !important;
  color: #ffffff !important;
  transform: translateY(-1px);
}

/* =========================================================
   FIX: SELECTED LEARNER ACCESS TAB
   Use actual selected tab state, not sticky wrapper classes
========================================================= */

.dashboard-access-tab {
  position: relative;
  background: transparent !important;
  box-shadow: none !important;
}

/* Base: no underline on any tab wrapper by default */
.dashboard-access-tab::after {
  content: none !important;
}

/* Selected tab button only */
.dashboard-access-tab [role="tab"][aria-selected="true"] {
  background: rgba(255,255,255,0.09) !important;
  color: #ffffff !important;
  border: 1px solid rgba(255,255,255,0.18) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.03) !important;
  outline: none !important;
  transform: none !important;
}

/* Underline only on the wrapper that contains the selected tab */
.dashboard-access-tab:has([role="tab"][aria-selected="true"])::after {
  content: "" !important;
  position: absolute;
  left: 10px;
  right: 10px;
  bottom: -6px;
  height: 2px;
  border-radius: 999px;
  background: #00c2ff;
  opacity: 0.9;
}

/* Keep inner label/count clean only for selected tab */
.dashboard-access-tab:has([role="tab"][aria-selected="true"]) .dashboard-access-tab__label,
.dashboard-access-tab:has([role="tab"][aria-selected="true"]) .dashboard-access-tab__count {
  background: transparent !important;
}

/* Focus/active only for selected tab button */
.dashboard-access-tab [role="tab"][aria-selected="true"]:focus,
.dashboard-access-tab [role="tab"][aria-selected="true"]:active {
  background: rgba(255,255,255,0.13) !important;
  color: #ffffff !important;
  border: 1px solid rgba(255,255,255,0.24) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.04) !important;
  outline: none !important;
}


.dashboard-access-tab__label {
  color: inherit !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
}

.dashboard-access-tab__count {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 20px;
  height: 20px;
  padding: 0 6px !important;
  border-radius: 999px !important;
  background: rgba(255,255,255,0.12) !important;
  color: #ffffff !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  line-height: 1 !important;
  border: 1px solid rgba(255,255,255,0.12) !important;
}

.dashboard-access-tab.is-hidden,
.dashboard-access section.is-hidden {
  display: none !important;
}

/* =========================================================
   PANELS
========================================================= */
.dashboard-access section[role="tabpanel"] {
  background: transparent !important;
  padding: 10px 14px 14px !important;
  border: 0 !important;
}

/* =========================================================
   LIST ROWS
========================================================= */
.dashboard-access-list-item {
  border-top: 1px solid rgba(255,255,255,0.08) !important;
  background: transparent !important;
  color: #ffffff !important;
  padding: 12px 0 !important;
}

.dashboard-access-list-item .grid {
  align-items: center !important;
}

.dashboard-access-list-item-expander {
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px;
  width: 100% !important;
  min-height: 40px;
  text-decoration: none !important;
  color: #ffffff !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  cursor: pointer !important;
  position: relative;
  z-index: 2;
}

.dashboard-access-list-item-expander__title {
  color: #ffffff !important;
  font-size: 17px !important;
  font-weight: 700 !important;
  line-height: 1.25 !important;
  letter-spacing: -0.01em;
}

.dashboard-access-list-item-expander:hover {
  color: #ffffff !important;
}

.dashboard-access-list-item-expander:focus,
.dashboard-access-list-item-expander:active {
  outline: none !important;
  box-shadow: none !important;
  background: transparent !important;
}

/* Make sure icons/text don't block click behavior oddly */
.dashboard-access-list-item-expander > * {
  pointer-events: none;
}


.dashboard-access-list-item-expander i {
  color: rgba(255,255,255,0.74) !important;
}

.dashboard-access-list-item strong,
.dashboard-access-list-item .col-span-2,
.dashboard-access-list-item .col-span-3,
.dashboard-access-list-item .text-right,
.dashboard-access-list-item span,
.dashboard-access-list-item div {
  color: rgba(255,255,255,0.82);
}

.dashboard-access-list-item .grid.grid-cols-12 {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 220px 140px !important;
  gap: 18px !important;
  align-items: center !important;
}

.dashboard-access-list-item .col-span-4,
.dashboard-access-list-item .col-span-3,
.dashboard-access-list-item .col-span-2,
.dashboard-access-list-item .col-start-11 {
  width: auto !important;
  max-width: none !important;
}

.dashboard-access-list-item .col-span-3 {
  font-size: 14px !important;
  line-height: 1.45 !important;
  color: rgba(255,255,255,0.84) !important;
}

.dashboard-access-list-item .col-span-3 strong {
  color: #ffffff !important;
  font-weight: 700 !important;
}

.dashboard-access-list-item .col-start-11,
.dashboard-access-list-item .text-right {
  display: flex !important;
  justify-content: flex-end !important;
  align-items: center !important;
}

/* =========================================================
   LEARNER ACCESS CTA STYLING
   Single source of truth
========================================================= */

/* CTA column stays stable */
.dashboard-access-list-item .col-start-11,
.dashboard-access-list-item .text-right {
  display: flex !important;
  justify-content: flex-start !important;
  align-items: center !important;
  width: auto !important;
  min-height: auto !important;
}

/* Base CTA style */
.dashboard-access .btn.btn--primary,
.dashboard-access a.btn.btn--primary,
.dashboard-access .btn--small,
.dashboard-access-list-item .btn,
.dashboard-access-list-item .button,
.dashboard-access-list-item a.btn,
.ua-access-detail__actions .btn,
.ua-access-detail__actions .button,
.ua-access-detail__actions a {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px;
  min-height: 36px;
  width: auto !important;
  max-width: 100% !important;
  flex: 0 0 auto !important;
  white-space: nowrap !important;
  padding: 9px 14px !important;
  border-radius: 10px !important;
  text-decoration: none !important;
  font-weight: 700 !important;
  font-size: 14px !important;
  line-height: 1 !important;
  letter-spacing: 0.01em !important;
  border: 1px solid rgba(255,255,255,0.28) !important;
  background: rgba(255,255,255,0.07) !important;
  color: #ffffff !important;
  box-shadow: none !important;
  transform: none !important;
  translate: none !important;
  transition:
    background-color 0.2s ease,
    border-color 0.2s ease,
    color 0.2s ease !important;
  will-change: auto !important;
}

/* =========================================================
   CTA HOVER — MATCH TAB STYLE
========================================================= */

.dashboard-access .btn.btn--primary:hover,
.dashboard-access a.btn.btn--primary:hover,
.dashboard-access .btn--small:hover,
.dashboard-access-list-item .btn:hover,
.dashboard-access-list-item .button:hover,
.dashboard-access-list-item a.btn:hover,
.ua-access-detail__actions .btn:hover,
.ua-access-detail__actions .button:hover,
.ua-access-detail__actions a:hover,
.dashboard-access .btn.btn--primary:focus,
.dashboard-access a.btn.btn--primary:focus,
.dashboard-access .btn--small:focus,
.dashboard-access-list-item .btn:focus,
.dashboard-access-list-item .button:focus,
.dashboard-access-list-item a.btn:focus,
.ua-access-detail__actions .btn:focus,
.ua-access-detail__actions .button:focus,
.ua-access-detail__actions a:focus {
  transform: none !important;

  /* Match tab hover feel */
  background: rgba(255,255,255,0.10) !important;
  border: 1px solid rgba(255,255,255,0.18) !important;

  color: #ffffff !important;
  box-shadow: none !important;
}

/* Prevent row/container movement */
.dashboard-access-list-item,
.dashboard-access-list-item .grid,
.dashboard-access-list-item-expander,
.ua-access-detail,
.ua-access-detail__body,
.ua-access-detail__actions {
  transform: none !important;
  translate: none !important;
}

/* =========================================================
   EXPANDED DETAILS AREA — HORIZONTAL LAYOUT
========================================================= */

.dashboard-access-list-item [id*="dashboard-access-expandable-item-content"],
.dashboard-access-list-item .dashboard-access-expandable-item-content {
  margin-top: 14px !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
}

.ua-access-detail__top {
  min-width: 0 !important;
}

.ua-access-detail__description {
  margin: 0 !important;
  color: rgba(255,255,255,0.82) !important;
  font-size: 14px !important;
  line-height: 1.55 !important;
  max-width: none !important;
}

/* Flatten metrics into horizontal row */
.ua-access-metrics {
  display: contents !important;
}

.ua-access-metric__top {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  margin-bottom: 10px !important;
}

.ua-access-metric__icon {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 20px !important;
  height: 20px !important;
  border-radius: 999px !important;
  background: rgba(255,255,255,0.08) !important;
  font-size: 11px !important;
  line-height: 1 !important;
  flex: 0 0 auto !important;
}

.ua-access-metric__label {
  display: block !important;
  font-size: 11px !important;
  line-height: 1 !important;
  font-weight: 700 !important;
  letter-spacing: 0.05em !important;
  text-transform: uppercase !important;
  color: rgba(255,255,255,0.58) !important;
  white-space: nowrap !important;
}

.ua-access-metric__value {
  display: block !important;
  font-size: clamp(1.75rem, 2vw, 2.15rem) !important;
  line-height: 1 !important;
  font-weight: 800 !important;
}

.ua-access-metric--hours .ua-access-metric__value,
.ua-access-metric--hours .ua-access-metric__icon {
  color: #56c2ff !important;
}

.ua-access-metric--viewed .ua-access-metric__value,
.ua-access-metric--viewed .ua-access-metric__icon {
  color: #ffffff !important;
}

.ua-access-metric--complete .ua-access-metric__value,
.ua-access-metric--complete .ua-access-metric__icon {
  color: #d946ef !important;
}

/* Remove old hidden TI metric leftovers */
.ua-access-detail--enhanced [class*="total-hours"],
.ua-access-detail--enhanced [class*="content-viewed"],
.ua-access-detail--enhanced [class*="complete"],
.ua-access-detail--enhanced [class*="progress"],
.ua-access-detail--enhanced .icon-clock,
.ua-access-detail--enhanced .icon-eye,
.ua-access-detail--enhanced .icon-check,
.ua-access-detail--enhanced .grid-cols-12 > .col-span-2,
.ua-access-detail--enhanced .grid-cols-12 > .col-span-3 {
  display: none !important;
}

.ua-access-detail--enhanced [class*="total-hours"],
.ua-access-detail--enhanced [class*="content-viewed"],
.ua-access-detail--enhanced [class*="complete"],
.ua-access-detail--enhanced [class*="progress"],
.ua-access-detail--enhanced .icon-clock,
.ua-access-detail--enhanced .icon-eye,
.ua-access-detail--enhanced .icon-check,
.ua-access-detail--enhanced .grid-cols-12 > .col-span-2,
.ua-access-detail--enhanced .grid-cols-12 > .col-span-3 {
  display: none !important;
}

/* Right-side content type / duration metadata alignment */
.dashboard-access-list-item .col-span-3 {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  min-height: 36px;
  white-space: nowrap;
}


/* =========================================================
   MOBILE
========================================================= */
@media (max-width: 1024px) {
  .dashboard-access-list-item .grid.grid-cols-12 {
    grid-template-columns: 1fr !important;
  }

  .dashboard-access-list-item .col-start-11,
  .dashboard-access-list-item .text-right {
    justify-content: flex-start !important;
  }
}

@media (max-width: 767px) {
  .dashboard-access-tabs {
    gap: 6px;
    padding: 8px 12px 0 !important;
  }

  .dashboard-access-tab button,
  .dashboard-access-tab .btn,
  .dashboard-access-tab .btn--link,
  .dashboard-access-tab .btn--inherit-font {
    min-height: 30px;
    padding: 6px 10px !important;
    font-size: 12px !important;
  }

  .dashboard-access-list-item-expander__title {
    font-size: 15px !important;
  }
}

@media (max-width: 1024px) {
  .ua-access-detail {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }
}

/* =========================================================
   FIX: REMOVE WHITE BLOCK ON SELECTED EXPANDER
========================================================= */

.dashboard-access-list-item-expander,
.dashboard-access-list-item-expander:hover,
.dashboard-access-list-item-expander:focus,
.dashboard-access-list-item-expander:active,
.dashboard-access-list-item-expander[aria-expanded="true"] {
  background: transparent !important;
  background-color: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
  outline: none !important;
}

/* Remove browser / TI focus styling on the inner icon/title area */
.dashboard-access-list-item-expander *,
.dashboard-access-list-item-expander:hover *,
.dashboard-access-list-item-expander:focus *,
.dashboard-access-list-item-expander:active * {
  background: transparent !important;
  box-shadow: none !important;
}

/* In case TI adds a selected/current wrapper state */
.dashboard-access-list-item[aria-expanded="true"],
.dashboard-access-list-item.is-active,
.dashboard-access-list-item.is-expanded {
  background: transparent !important;
}

/* Remove any pseudo-element highlight */
.dashboard-access-list-item-expander::before,
.dashboard-access-list-item-expander::after {
  content: none !important;
  display: none !important;
}

/* =========================================================
   LEARNER ACCESS CTA LAYOUT FIX
   - Keep CTA compact
   - Prevent full-width spanning feel
   - Improve responsive behavior
========================================================= */

/* Main row layout */
.dashboard-access-list-item .grid.grid-cols-12 {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) max-content 180px !important;
  gap: 16px !important;
  align-items: center !important;
}

/* Title/content column can shrink properly */
.dashboard-access-list-item .col-span-4,
.dashboard-access-list-item .col-span-3,
.dashboard-access-list-item .col-span-2,
.dashboard-access-list-item .col-start-11 {
  min-width: 0 !important;
}

/* Meta area */
.dashboard-access-list-item .col-span-3 {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  min-height: auto !important;
  white-space: nowrap;
}

/* CTA area */
.dashboard-access-list-item .col-start-11,
.dashboard-access-list-item .text-right {
  display: flex !important;
  justify-content: flex-start !important;
  align-items: center !important;
  width: 180px !important;
  min-width: 180px !important;
  max-width: 180px !important;
}

/* Button should fill the reserved CTA slot consistently */
.dashboard-access .btn.btn--primary,
.dashboard-access a.btn.btn--primary,
.dashboard-access .btn--small,
.dashboard-access-list-item .btn,
.dashboard-access-list-item .button,
.dashboard-access-list-item a.btn {
  display: inline-flex !important;
  justify-content: center !important;
  align-items: center !important;
  width: 180px !important;
  min-width: 180px !important;
  max-width: 180px !important;
  flex: 0 0 180px !important;
  white-space: nowrap !important;
  box-sizing: border-box !important;
}

/* Expanded detail action buttons should stay left-aligned */
.ua-access-detail__actions {
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: flex-start !important;
  align-items: center !important;
  gap: 10px !important;
}

.ua-access-detail__actions .btn,
.ua-access-detail__actions .button,
.ua-access-detail__actions a {
  width: auto !important;
  flex: 0 0 auto !important;
}

/* Tablet/mobile stacking */
@media (max-width: 1024px) {
  .dashboard-access-list-item .grid.grid-cols-12 {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }

  .dashboard-access-list-item .col-span-3,
  .dashboard-access-list-item .col-start-11,
  .dashboard-access-list-item .text-right {
    justify-content: flex-start !important;
    text-align: left !important;
  }

  .dashboard-access-list-item .btn,
  .dashboard-access-list-item .button,
  .dashboard-access-list-item a.btn {
    width: auto !important;
    max-width: 100% !important;
  }
}
/* =========================================================
   FINAL LEARNER ACCESS CTA HOVER OVERRIDE
   Paste at very end of CSS
========================================================= */

/* Keep learner-access CTA wrappers fixed */
.dashboard-access .dashboard-access-list-item .col-start-11,
.dashboard-access .dashboard-access-list-item .text-right,
.dashboard-access .ua-access-detail__actions {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  width: auto !important;
  min-height: auto !important;
  transform: none !important;
}

/* Force only the actual CTA to size to content */
.dashboard-access .dashboard-access-list-item .btn,
.dashboard-access .dashboard-access-list-item .button,
.dashboard-access .dashboard-access-list-item a.btn,
.dashboard-access .ua-access-detail__actions .btn,
.dashboard-access .ua-access-detail__actions .button,
.dashboard-access .ua-access-detail__actions a {
  display: inline-flex !important;
  width: fit-content !important;
  max-width: max-content !important;
  min-width: 0 !important;
  flex: 0 0 auto !important;
  align-self: flex-start !important;
  justify-self: start !important;
  margin: 0 !important;
  position: static !important;
  transform: none !important;
  transition:
    background-color 0.2s ease,
    border-color 0.2s ease,
    box-shadow 0.2s ease !important;
  will-change: auto !important;
}

/* Remove any movement from ancestor elements */
.dashboard-access .dashboard-access-list-item,
.dashboard-access .dashboard-access-list-item-expander,
.dashboard-access .dashboard-access-list-item .grid,
.dashboard-access .ua-access-detail,
.dashboard-access .ua-access-detail__body,
.dashboard-access .ua-access-detail__actions {
  transform: none !important;
}

/* Hover style: visual only, no movement */
.dashboard-access .dashboard-access-list-item .btn:hover,
.dashboard-access .dashboard-access-list-item .button:hover,
.dashboard-access .dashboard-access-list-item a.btn:hover,
.dashboard-access .ua-access-detail__actions .btn:hover,
.dashboard-access .ua-access-detail__actions .button:hover,
.dashboard-access .ua-access-detail__actions a:hover,
.dashboard-access .dashboard-access-list-item .btn:focus,
.dashboard-access .dashboard-access-list-item .button:focus,
.dashboard-access .dashboard-access-list-item a.btn:focus,
.dashboard-access .ua-access-detail__actions .btn:focus,
.dashboard-access .ua-access-detail__actions .button:focus,
.dashboard-access .ua-access-detail__actions a:focus {
  transform: none !important;
  top: auto !important;
  bottom: auto !important;
  margin: 0 !important;
  background: rgba(255,255,255,0.12) !important;
  color: #ffffff !important;
  box-shadow: 0 12px 26px rgba(0,0,0,0.22) !important;
}

.dashboard-access a.btn,
.dashboard-access button.btn,
.dashboard-access .btn {
  transform: none !important;
}
.dashboard-access a.btn:hover,
.dashboard-access button.btn:hover,
.dashboard-access .btn:hover {
  transform: none !important;
}

/* =========================================================
   REMOVE ALL HOVER LIFT IN LEARNER ACCESS
========================================================= */

/* Kill ANY transform on hover inside learner access */
.dashboard-access *:hover {
  transform: none !important;
  translate: none !important;
}

/* Specifically target common TI hover patterns */
.dashboard-access .dashboard-access-list-item-expander:hover,
.dashboard-access .dashboard-access-list-item:hover,
.dashboard-access .dashboard-access-list-item .grid:hover,
.dashboard-access .dashboard-access-list-item a:hover,
.dashboard-access .dashboard-access-list-item button:hover {
  transform: none !important;
}

/* =========================================================
   REPLACE WITH CLEAN HOVER (like Continue button)
========================================================= */

.dashboard-access .btn:hover,
.dashboard-access .button:hover,
.dashboard-access a.btn:hover {
  transform: none !important;
  background: rgba(255,255,255,0.12) !important;
  color: #ffffff !important;
  box-shadow: 0 8px 20px rgba(0,0,0,0.18) !important;
}

/* =========================================================
   STOP LEARNER ACCESS ROW LIFT (ROOT CAUSE FIX)
========================================================= */

/* Kill lift on the expandable row itself */
.dashboard-access .dashboard-access-list-item-expander:hover,
.dashboard-access .dashboard-access-list-item-expander:focus,
.dashboard-access .dashboard-access-list-item-expander:active {
  transform: none !important;
  translate: none !important;
  top: auto !important;
}

/* Kill lift on the parent row/card */
.dashboard-access .dashboard-access-list-item:hover {
  transform: none !important;
}

/* Kill lift on grid wrapper (TI sometimes applies it here) */
.dashboard-access .dashboard-access-list-item .grid:hover {
  transform: none !important;
}

/* Safety: remove any transition that could animate layout */
.dashboard-access .dashboard-access-list-item-expander,
.dashboard-access .dashboard-access-list-item,
.dashboard-access .dashboard-access-list-item .grid {
  transition: none !important;
}

/* Final learner access row stability fix */
.dashboard-access-list-item {
  min-height: 64px !important;
}

.dashboard-access-list-item .grid.grid-cols-12 {
  min-height: 64px !important;
}

.dashboard-access-list-item .col-start-11,
.dashboard-access-list-item .text-right,
.dashboard-access-list-item .btn,
.dashboard-access-list-item .button,
.dashboard-access-list-item a.btn {
  min-height: 36px !important;
}

/* =========================================================
   CONTENT TYPE + DURATION SPACING FIX
========================================================= */

.dashboard-access-list-item .col-span-3 {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important; /* controls spacing globally */
}

/* Ensure equal spacing around divider */
.dashboard-access-list-item .col-span-3 span,
.dashboard-access-list-item .col-span-3 strong {
  display: inline-flex;
  align-items: center;
}

/* If divider is a pipe "|" */
.dashboard-access-list-item .col-span-3 span:has(+ span),
.dashboard-access-list-item .col-span-3 strong + span {
  margin-left: 8px !important;
}

/* Optional: explicitly style divider */
.dashboard-access-list-item .col-span-3 .divider {
  margin: 0 8px !important;
  opacity: 0.6;
}

/* =========================================
   LIVE SESSION LIST VIEW — MATCH DARK CARDS
========================================= */

.catalog-list-item.ua-live-list-enhanced,
.catalog-list-view-item.ua-live-list-enhanced,
.catalog-search-result.ua-live-list-enhanced {
  background: transparent !important;
  border: 0 !important;
  padding: 0 !important;
}

.ua-live-list-layout {
  display: grid !important;
  grid-template-columns: 280px minmax(0, 1fr) !important;
  align-items: stretch !important;
  gap: 0 !important;
  overflow: hidden !important;
  border-radius: 20px !important;
  background:
    linear-gradient(180deg, var(--ua-card-bg-top), var(--ua-card-bg-bottom)) !important;
  border: 1px solid var(--ua-card-border) !important;
box-shadow: inset 0 1px 0 rgba(255,255,255,0.04) !important;
  color: var(--ua-text-main) !important;
  min-height: 240px !important;
}

.ua-live-list-layout__media {
  width: 100% !important;
  height: 100% !important;
  min-height: 240px !important;
  overflow: hidden !important;
  background: #050505 !important;
  border-right: 1px solid rgba(255,255,255,0.08) !important;
}

.ua-live-list-layout__media img {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 240px !important;
  object-fit: cover !important;
}

.ua-live-list-layout__body {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  grid-template-areas:
    "meta meta"
    "title title"
    "description description"
    "spacer cta" !important;
  column-gap: 28px !important;
  row-gap: 16px !important;
  padding: 24px 28px !important;
  min-width: 0 !important;
  background: transparent !important;
}

.ua-live-list-layout__meta {
  grid-area: meta !important;
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 12px 14px !important;
  width: 100% !important;
}

.ua-live-list-layout__title {
  grid-area: title !important;
  margin: 0 !important;
  color: var(--ua-text-main) !important;
  font-size: clamp(1.35rem, 1.6vw, 1.8rem) !important;
  line-height: 1.12 !important;
  font-weight: 800 !important;
  letter-spacing: -0.03em !important;
  max-width: 100% !important;
}

.ua-live-list-layout__description {
  grid-area: description !important;
  margin: 0 !important;
  max-width: 100% !important;
  color: var(--ua-text-soft) !important;
  font-size: 15px !important;
  line-height: 1.6 !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 3 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
}

.ua-live-list-layout__actions {
  grid-area: cta !important;
  display: flex !important;
  justify-content: flex-end !important;
  align-items: end !important;
  align-self: end !important;
}

.ua-live-list-layout__cta {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  min-height: 46px !important;
  padding: 11px 18px !important;
  border-radius: 10px !important;
  text-decoration: none !important;
  font-weight: 700 !important;
  font-size: 15px !important;
  line-height: 1 !important;
  border: 1px solid var(--ua-cta-border) !important;
  background: var(--ua-cta-bg) !important;
  color: var(--ua-cta-text) !important;
  box-shadow: 0 10px 30px var(--ua-card-shadow) !important;
  transition:
    transform 0.12s ease,
    background-color 0.2s ease,
    border-color 0.2s ease,
    box-shadow 0.2s ease !important;
}

.ua-live-list-layout__cta:hover,
.ua-live-list-layout__cta:focus {
  transform: translateY(-1px) !important;
  background: var(--ua-cta-bg-hover) !important;
  color: var(--ua-cta-text) !important;
}

/* Make the pills spread horizontally better */
.ua-live-list-layout .ua-pill {
  white-space: nowrap !important;
  margin: 0 !important;
}

/* Optional: give date/time pills slightly more breathing room */
.ua-live-list-layout .ua-pill--live-date,
.ua-live-list-layout .ua-pill--live-time,
.ua-live-list-layout .ua-pill--live-type {
  min-height: 36px !important;
  padding: 8px 14px !important;
}

/* Tablet */
@media (max-width: 980px) {
  .ua-live-list-layout {
    grid-template-columns: 220px minmax(0, 1fr) !important;
  }

  .ua-live-list-layout__body {
    padding: 20px 22px !important;
    column-gap: 20px !important;
  }
}

/* Mobile */
@media (max-width: 768px) {
  .ua-live-list-layout {
    grid-template-columns: 1fr !important;
  }

  .ua-live-list-layout__media {
    min-height: 190px !important;
    border-right: 0 !important;
    border-bottom: 1px solid rgba(255,255,255,0.08) !important;
  }

  .ua-live-list-layout__media img {
    min-height: 190px !important;
    max-height: 220px !important;
  }

  .ua-live-list-layout__body {
    grid-template-columns: 1fr !important;
    grid-template-areas:
      "meta"
      "title"
      "description"
      "cta" !important;
    padding: 18px !important;
  }

  .ua-live-list-layout__actions {
    justify-content: flex-start !important;
  }
}

/* ==========================================
   DASHBOARD STATS — FULL-WIDTH HERO BANNER
   Render banner as a real inner layer
   ========================================== */

.widget--dashboard-stats.widget--dashboard-stats_standard {
  position: relative !important;
  left: 50% !important;
  width: 100vw !important;
  max-width: 100vw !important;
  margin-left: -50vw !important;
  margin-right: -50vw !important;

  margin-top: 24px !important;
  padding: 56px 0 !important;
  overflow: hidden !important;
  background: transparent !important;
}

/* real banner layer injected by JS */
.widget--dashboard-stats .ua-dashboard-hero-bg {
  position: absolute !important;
  inset: 0 !important;
  z-index: 0 !important;
  pointer-events: none !important;

  background-image:
    linear-gradient(180deg, rgba(14,17,24,0.42), rgba(14,17,24,0.7)),
    url("https://storage.googleapis.com/protraining-unity-it-fileshare-prd/TI_panoramas/GDC24_KeyArt_Spheres.png") !important;
  background-position: center center !important;
  background-size: cover !important;
  background-repeat: no-repeat !important;
  background-color: #0e1118 !important;
}

/* glow overlay */
.widget--dashboard-stats .ua-dashboard-hero-bg::after {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  background:
    radial-gradient(circle at 18% 25%, rgba(0,174,240,0.16), transparent 28%),
    radial-gradient(circle at 82% 20%, rgba(209,42,197,0.14), transparent 24%) !important;
}

/* keep actual widget content above banner */
.widget--dashboard-stats > * {
  position: relative !important;
  z-index: 1 !important;
}

/* inner wrappers must stay transparent */
.widget--dashboard-stats .row,
.widget--dashboard-stats .columns,
.widget--dashboard-stats .small-12,
.widget--dashboard-stats .small-12.columns {
  background: transparent !important;
  background-color: transparent !important;
}

.widget--dashboard-stats .row {
  max-width: 1240px !important;
  margin: 0 auto !important;
}

.widget--dashboard-stats .small-12.columns {
  padding-left: 24px !important;
  padding-right: 24px !important;
}

/* centered glass card */
.widget--dashboard-stats .dashboard-stats__container {
  position: relative !important;
  z-index: 2 !important;
  overflow: hidden !important;

  max-width: 1180px !important;
  margin: 0 auto !important;
  padding: 36px 40px !important;

  display: grid !important;
  grid-template-columns: minmax(0, 1.4fr) minmax(320px, 0.95fr) !important;
  gap: 28px !important;
  align-items: center !important;

  border-radius: 24px !important;
  background: linear-gradient(180deg, rgba(20,22,30,0.76), rgba(12,14,20,0.82)) !important;
  border: 1px solid rgba(255,255,255,0.10) !important;
  box-shadow: 0 20px 50px rgba(0,0,0,0.24) !important;
  backdrop-filter: blur(8px) !important;
}

.ua-dashboard-hero-copy {
  max-width: 640px;
  margin: 0 auto 0 0;
}

.ua-dashboard-hero-copy h2 {
  margin: 0 0 12px 0 !important;
  color: #ffffff !important;
  font-size: clamp(2.25rem, 4vw, 3.6rem) !important;
  line-height: 0.95 !important;
  letter-spacing: -0.04em !important;
  font-weight: 800 !important;
}

.ua-dashboard-hero-copy p {
  margin: 0 !important;
  color: rgba(255,255,255,0.84) !important;
  font-size: 1rem !important;
  line-height: 1.6 !important;
  max-width: 58ch !important;
}

.widget--dashboard-stats .dashboard-stats {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;

  display: grid !important;
  grid-template-columns: repeat(2, minmax(150px, 1fr)) !important;
  gap: 14px !important;
  align-self: center !important;
}

.widget--dashboard-stats .dashboard-stat--available,
.widget--dashboard-stats .dashboard-stat--collaborations {
  display: none !important;
}

.widget--dashboard-stats .dashboard-stat {
  min-height: 110px !important;
  padding: 18px 16px !important;

  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  align-items: center !important;

  text-align: center !important;
  border-radius: 16px !important;
  background: rgba(255,255,255,0.06) !important;
  border: 1px solid rgba(255,255,255,0.18) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.04) !important;
}

.widget--dashboard-stats .dashboard-stat__label {
  margin-bottom: 8px !important;
  color: rgba(255,255,255,0.58) !important;
  font-size: 11px !important;
  line-height: 1.2 !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.06em !important;
}

.widget--dashboard-stats .dashboard-stat__label svg,
.widget--dashboard-stats .dashboard-stat__label i {
  display: none !important;
}

.widget--dashboard-stats .dashboard-stat__value,
.widget--dashboard-stats .dashboard-stat strong,
.widget--dashboard-stats .dashboard-stat b {
  display: block !important;
  font-size: clamp(2rem, 3vw, 2.7rem) !important;
  line-height: 1 !important;
  font-weight: 800 !important;
  letter-spacing: -0.04em !important;
  color: #ffffff !important;
}

.widget--dashboard-stats .dashboard-stat--started .dashboard-stat__value,
.widget--dashboard-stats .dashboard-stat--started strong,
.widget--dashboard-stats .dashboard-stat--started b {
  color: #11c5b5 !important;
}

.widget--dashboard-stats .dashboard-stat--completed .dashboard-stat__value,
.widget--dashboard-stats .dashboard-stat--completed strong,
.widget--dashboard-stats .dashboard-stat--completed b {
  color: #d12ac5 !important;
}

@media (max-width: 900px) {
  .widget--dashboard-stats.widget--dashboard-stats_standard {
    padding: 40px 0 !important;
  }

  .widget--dashboard-stats .dashboard-stats__container {
    grid-template-columns: 1fr !important;
    gap: 22px !important;
    padding: 28px 22px !important;
  }

  .widget--dashboard-stats .dashboard-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .ua-dashboard-hero-copy {
    max-width: 100%;
    margin: 0;
  }
}

@media (max-width: 640px) {
  .widget--dashboard-stats.widget--dashboard-stats_standard {
    padding: 28px 0 !important;
  }

  .widget--dashboard-stats .small-12.columns {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  .widget--dashboard-stats .dashboard-stats {
    grid-template-columns: 1fr !important;
  }
}

/* ==========================================
   FIX: Remove white seam between header + dashboard
   ========================================== */

/* Remove border/divider above dashboard */
.widget--dashboard-stats.widget--dashboard-stats_standard {
  border-top: none !important;
  margin-top: 0 !important;
}

/* Kill any top border coming from wrappers */
.widget--dashboard-stats.widget--dashboard-stats_standard,
.widget--dashboard-stats.widget--dashboard-stats_standard .row,
.widget--dashboard-stats.widget--dashboard-stats_standard .columns {
  border-top: none !important;
}

/* Remove spacing from previous section */
.widget--dashboard-stats.widget--dashboard-stats_standard {
  margin-top: -1px !important;
}

/* ==========================================
   CONTENT CARD META ROW
   Duration + Skill Level
   ========================================== */

.ua-card-meta-row {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  flex-wrap: wrap !important;
  margin: 0 0 18px 0 !important;
}

.ua-pill {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 36px !important;
  padding: 8px 16px !important;
  border-radius: 14px !important;
  font-size: 0.95rem !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  white-space: nowrap !important;
}

/* duration */
.ua-pill--duration {
  background: rgba(56, 130, 246, 0.14) !important;
  border: 1px solid rgba(96, 165, 250, 0.38) !important;
  color: #7cc7ff !important;
}

/* skill levels */
.ua-pill--beginner {
  background: rgba(34, 197, 94, 0.16) !important;
  border: 1px solid rgba(74, 222, 128, 0.42) !important;
  color: #86efac !important;
}

.ua-pill--intermediate {
  background: rgba(234, 179, 8, 0.16) !important;
  border: 1px solid rgba(250, 204, 21, 0.42) !important;
  color: #fde047 !important;
}

.ua-pill--advanced {
  background: rgba(239, 68, 68, 0.16) !important;
  border: 1px solid rgba(248, 113, 113, 0.42) !important;
  color: #fca5a5 !important;
}

/* ==========================================
   CONTENT CARDS — FORCE EQUAL HEIGHT
   (PASTE AT VERY END OF CSS FILE)
   ========================================== */

.catalog-card,
.course-card,
.learning-path-card {
  height: 100% !important;
  display: flex !important;
  flex-direction: column !important;
}

.catalog-card__body,
.course-card__body,
.learning-path-card__body,
.card__body {
  flex: 1 1 auto !important;
  display: flex !important;
  flex-direction: column !important;
}

/* Reserve space EVEN IF duration is missing */
.ua-card-meta-row {
  min-height: 40px !important;
  margin-bottom: 18px !important;
}

/* Create invisible placeholder if empty */
.ua-card-meta-row:empty::before {
  content: "";
  display: block;
  height: 24px;
}

/* Title alignment */
.catalog-card__title,
.course-card__title,
.card__title,
h3, h4 {
  min-height: 2.6em !important;
}

/* Description alignment */
.catalog-card p,
.course-card p,
.card__description {
  min-height: 3.6em !important;
}

/* Push CTA to bottom */
.catalog-card .btn,
.course-card .btn,
.card__body .btn,
.card__body .button {
  margin-top: auto !important;
}

/* Ensure grid stretches */
.catalog-grid,
.course-grid {
  align-items: stretch !important;
}

.catalog-grid > *,
.course-grid > * {
  display: flex !important;
}

/* Keep live cards aligned with cards that have duration pills */
.ua-live-meta {
  min-height: 40px !important;
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  flex-wrap: wrap !important;
  margin: 0 0 18px 0 !important;
}

.ua-live-meta-spacer {
  display: block !important;
  width: 1px !important;
  height: 36px !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* ==========================================
   HEADER AUTH / USER MENU
   ========================================== */

.unity-header__auth {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
}

.unity-header__signin {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  padding: 0 14px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.14);
  background: rgba(255,255,255,0.06);
  color: #ffffff;
  text-decoration: none;
  font-weight: 700;
  transition: background-color 0.2s ease, border-color 0.2s ease;
}

.unity-header__signin:hover {
  background: rgba(255,255,255,0.10);
  border-color: rgba(255,255,255,0.22);
  color: #ffffff;
}

.unity-header__user-name {
  display: none;
}

.unity-header__user-menu {
  position: relative;
}

.unity-header__user-trigger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  padding: 0;
  border: 1px solid rgba(255,255,255,0.16);
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(255,255,255,0.08), rgba(255,255,255,0.04));
  color: #ffffff;
  cursor: pointer;
  box-shadow: 0 8px 24px rgba(0,0,0,0.24);
  transition: background-color 0.2s ease, border-color 0.2s ease, transform 0.12s ease;
}

.unity-header__user-trigger:hover {
  background: rgba(255,255,255,0.12);
  border-color: rgba(255,255,255,0.24);
  transform: translateY(-1px);
}

.unity-header__user-trigger:focus-visible {
  outline: 2px solid #00c2ff;
  outline-offset: 3px;
}

.unity-header__user-initials {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.03em;
  line-height: 1;
  text-transform: uppercase;
}

.unity-header__dropdown {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  min-width: 180px;
  padding: 8px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,0.12);
  background: linear-gradient(180deg, rgba(18,20,26,0.98), rgba(10,12,16,0.98));
  box-shadow: 0 18px 40px rgba(0,0,0,0.36);
  backdrop-filter: blur(10px);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  pointer-events: none;
  transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s ease;
  z-index: 1000;
}

.unity-header__user-menu.is-open .unity-header__dropdown {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  pointer-events: auto;
}

.unity-header__dropdown a {
  display: block;
  padding: 10px 12px;
  border-radius: 10px;
  color: #ffffff;
  text-decoration: none;
  font-size: 14px;
  font-weight: 600;
}

.unity-header__dropdown a:hover {
  background: rgba(255,255,255,0.08);
  color: #ffffff;
}

.unity-header__auth--signed-in {
  position: relative;
  display: flex;
  align-items: center;
}

.unity-header__user-menu {
  position: relative;
}

.unity-header__user-trigger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  padding: 0;
  border-radius: 999px;
  border: 1px solid rgba(0, 194, 255, 0.55);
  background: rgba(255, 255, 255, 0.06);
  color: #ffffff;
  cursor: pointer;
  box-shadow: 0 0 0 2px rgba(0, 194, 255, 0.18);
}

.unity-header__user-initials {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  color: #ffffff;
}

.unity-header__user-initials svg {
  display: block;
}

.unity-header__dropdown {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  min-width: 190px;
  padding: 8px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,0.14);
  background: linear-gradient(180deg, rgba(18,20,26,0.98), rgba(10,12,16,0.98));
  box-shadow: 0 18px 40px rgba(0,0,0,0.36);
  z-index: 2000;

  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(-6px);
  transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s ease;
}

.unity-header__user-menu.is-open .unity-header__dropdown {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0);
}

.unity-header__dropdown a {
  display: block;
  padding: 10px 12px;
  border-radius: 10px;
  color: #ffffff;
  text-decoration: none;
  font-size: 14px;
  font-weight: 600;
}

.unity-header__dropdown a:hover {
  background: rgba(255,255,255,0.08);
}

/* ==========================================
   HEADER USER DROPDOWN — FORCE VISIBLE
   ========================================== */

.unity-header,
.unity-header__inner,
.unity-header__right {
  overflow: visible !important;
}

.unity-header {
  position: relative !important;
  z-index: 5000 !important;
}

.unity-header__inner {
  position: relative !important;
  z-index: 5001 !important;
}

.unity-header__right {
  position: relative !important;
  z-index: 5002 !important;
}

.unity-header__auth--signed-in {
  position: relative !important;
  z-index: 5003 !important;
}

.unity-header__user-menu {
  position: relative !important;
  z-index: 5004 !important;
}

.unity-header__dropdown {
  position: absolute !important;
  top: calc(100% + 10px) !important;
  right: 0 !important;
  min-width: 190px !important;
  padding: 8px !important;
  border-radius: 14px !important;
  border: 1px solid rgba(255,255,255,0.14) !important;
  background: linear-gradient(180deg, rgba(18,20,26,0.98), rgba(10,12,16,0.98)) !important;
  box-shadow: 0 18px 40px rgba(0,0,0,0.36) !important;
  backdrop-filter: blur(10px) !important;
  z-index: 99999 !important;

  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  transform: translateY(-6px) !important;
  transition:
    opacity 0.18s ease,
    transform 0.18s ease,
    visibility 0.18s ease !important;
}

.unity-header__user-menu.is-open .unity-header__dropdown {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  transform: translateY(0) !important;
}

.unity-header__dropdown a {
  display: block !important;
  padding: 10px 12px !important;
  border-radius: 10px !important;
  color: #ffffff !important;
  text-decoration: none !important;
  font-size: 14px !important;
  font-weight: 600 !important;
}

.unity-header__dropdown a:hover {
  background: rgba(255,255,255,0.08) !important;
}

/* ==========================================
   HEADER DROPDOWN — FIX CLIPPING
   ========================================== */

.unity-header,
.unity-header__inner,
.unity-header__right,
.unity-header__auth,
.unity-header__auth--signed-in,
.unity-header__user-menu {
  overflow: visible !important;
}

.unity-header {
  position: relative !important;
  z-index: 5000 !important;
}

.unity-header__inner {
  position: relative !important;
  z-index: 5001 !important;
}

.unity-header__right {
  position: relative !important;
  z-index: 5002 !important;
}

.unity-header__auth--signed-in {
  position: relative !important;
  z-index: 5003 !important;
}

.unity-header__user-menu {
  position: relative !important;
  z-index: 5004 !important;
}

.unity-header__dropdown {
  position: fixed !important;
  top: 72px !important;
  right: 20px !important;
  min-width: 190px !important;
  padding: 8px !important;
  border-radius: 14px !important;
  border: 1px solid rgba(255,255,255,0.14) !important;
  background: linear-gradient(180deg, rgba(18,20,26,0.98), rgba(10,12,16,0.98)) !important;
  box-shadow: 0 18px 40px rgba(0,0,0,0.36) !important;
  backdrop-filter: blur(10px) !important;
  z-index: 999999 !important;

  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  transform: translateY(-6px) !important;
  transition:
    opacity 0.18s ease,
    transform 0.18s ease,
    visibility 0.18s ease !important;
}

.unity-header__user-menu.is-open .unity-header__dropdown {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  transform: translateY(0) !important;
}

.unity-header__dropdown a {
  display: block !important;
  padding: 10px 12px !important;
  border-radius: 10px !important;
  color: #ffffff !important;
  text-decoration: none !important;
  font-size: 14px !important;
  font-weight: 600 !important;
}

.unity-header__dropdown a:hover {
  background: rgba(255,255,255,0.08) !important;
}

/* Header user trigger */
.unity-header__auth--signed-in {
  display: flex;
  align-items: center;
}

.unity-header__user-trigger {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 42px !important;
  height: 42px !important;
  padding: 0 !important;
  border-radius: 999px !important;
  border: 1px solid rgba(0, 194, 255, 0.55) !important;
  background: rgba(255,255,255,0.06) !important;
  color: #ffffff !important;
  cursor: pointer !important;
  box-shadow: 0 0 0 2px rgba(0, 194, 255, 0.18) !important;
}

.unity-header__user-initials {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  line-height: 1 !important;
  color: #ffffff !important;
}

.unity-header__user-initials svg {
  display: block !important;
}

/* Portal dropdown appended to body */
.unity-header__dropdown-portal {
  position: fixed !important;
  top: 72px !important;
  right: 20px !important;
  min-width: 190px !important;
  padding: 8px !important;
  border-radius: 14px !important;
  border: 1px solid rgba(255,255,255,0.14) !important;
  background: linear-gradient(180deg, rgba(18,20,26,0.98), rgba(10,12,16,0.98)) !important;
  box-shadow: 0 18px 40px rgba(0,0,0,0.36) !important;
  backdrop-filter: blur(10px) !important;
  z-index: 2147483647 !important;

  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  transform: translateY(-6px) !important;
  transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s ease !important;
}

.unity-header__dropdown-portal.is-open {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  transform: translateY(0) !important;
}

.unity-header__dropdown-portal a {
  display: block !important;
  padding: 10px 12px !important;
  border-radius: 10px !important;
  color: #ffffff !important;
  text-decoration: none !important;
  font-size: 14px !important;
  font-weight: 600 !important;
}

.unity-header__dropdown-portal a:hover {
  background: rgba(255,255,255,0.08) !important;
}

.unity-header__dropdown-portal {
  transform: translateY(-8px) scale(0.96) !important;
}

.unity-header__dropdown-portal.is-open {
  transform: translateY(0) scale(1) !important;
}

.unity-header__dropdown-portal a + a {
  border-top: 1px solid rgba(255,255,255,0.08);
}

.unity-header__dropdown-portal a:hover {
  background: rgba(0, 194, 255, 0.12) !important;
  box-shadow: inset 0 0 0 1px rgba(0,194,255,0.25);
}

.unity-header__user-trigger:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(0,0,0,0.35);
}

/* ==========================================
   HEADER RIGHT ALIGNMENT FIX
   ========================================== */

.unity-header__right {
  display: flex !important;
  align-items: center !important;   /* 🔥 THIS IS THE KEY */
  gap: 14px !important;
}

/* Normalize search bar height */
.unity-header__search {
  display: flex !important;
  align-items: center !important;
  height: 42px !important;
}

/* Normalize input + button */
.unity-header__search input,
.unity-header__search button {
  height: 42px !important;
  display: flex !important;
  align-items: center !important;
}

/* ==========================================
   FIX AVATAR ICON CENTERING
   ========================================== */

.unity-header__user-trigger {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* Force the wrapper to fully center */
.unity-header__user-initials {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  height: 100% !important;
}

/* Fix SVG alignment quirks */
.unity-header__user-initials svg {
  display: block !important;
  width: 18px !important;
  height: 18px !important;
  margin: 0 auto !important;
}

/* ==========================================
   HEADER SEARCH + ACCOUNT CTA ALIGNMENT
   FINAL OVERRIDE
   ========================================== */

.unity-header__right {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 14px !important;
}

/* Force both direct children onto the same vertical center */
.unity-header__right > .unity-header__search,
.unity-header__right > .unity-header__auth {
  align-self: center !important;
  margin: 0 !important;
}

/* Normalize the search wrapper */
.unity-header__search {
  display: flex !important;
  align-items: center !important;
  margin: 0 !important;
}

/* Normalize the search field group */
.unity-header__search input,
.unity-header__search button {
  margin: 0 !important;
  vertical-align: middle !important;
}

/* Force the auth wrappers to center */
.unity-header__auth,
.unity-header__auth--signed-in,
.unity-header__auth--signed-out {
  display: flex !important;
  align-items: center !important;
  margin: 0 !important;
}

/* Make the visible CTA/control line up with the search */
.unity-header__signin,
.unity-header__user-trigger {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin: 0 !important;
  line-height: 1 !important;
  vertical-align: middle !important;
}

/* Remove any baseline weirdness from the icon wrapper */
.unity-header__user-initials,
.unity-header__user-initials svg {
  display: block !important;
  line-height: 1 !important;
}

/* Prevent hover lift from making it look off-center */
.unity-header__user-trigger:hover {
  transform: none !important;
}

/* ==========================================
   HEADER AUTH FINAL FIX
   ========================================== */

.unity-header__right {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 14px !important;
}

.unity-header__right > .unity-header__search,
.unity-header__right > #unitySignedOut,
.unity-header__right > #unitySignedIn {
  align-self: center !important;
  margin: 0 !important;
}

/* DO NOT force both auth states visible */
#unitySignedOut,
#unitySignedIn {
  align-items: center !important;
  margin: 0 !important;
}

.unity-header__search {
  display: flex !important;
  align-items: center !important;
  margin: 0 !important;
}

.unity-header__search input,
.unity-header__search button {
  margin: 0 !important;
  vertical-align: middle !important;
}

/* Keep trigger perfectly centered */
.unity-header__user-trigger {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 42px !important;
  height: 42px !important;
  padding: 0 !important;
  line-height: 1 !important;
}

/* Full-size icon wrapper */
.unity-header__user-initials {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  height: 100% !important;
  line-height: 1 !important;
}

/* Vertically center the SVG visually */
.unity-header__user-initials svg {
  display: block !important;
  width: 18px !important;
  height: 18px !important;
  margin: 0 !important;
  transform: translateY(-1px) !important;
}

/* ==========================================
   HEADER AUTH — FINAL CLEAN VISIBILITY RULES
   ========================================== */

#unitySignedOut,
#unitySignedIn {
  align-items: center !important;
  margin: 0 !important;
}

#unitySignedOut[hidden],
#unitySignedIn[hidden] {
  display: none !important;
}

#unitySignedOut:not([hidden]) {
  display: flex !important;
}

#unitySignedIn:not([hidden]) {
  display: flex !important;
}

#unitySignedOut,
#unitySignedIn {
  align-items: center !important;
  margin: 0 !important;
}

#unitySignedOut[hidden],
#unitySignedIn[hidden] {
  display: none !important;
}

#unitySignedOut:not([hidden]) {
  display: flex !important;
}

#unitySignedIn:not([hidden]) {
  display: flex !important;
}

/* ==========================================
   NATIVE TI AUTH CONTROL IN CUSTOM HEADER
   ========================================== */

#unitySignedOut,
#unityTiAuthMount {
  align-items: center !important;
  margin: 0 !important;
}

#unitySignedOut[hidden],
#unityTiAuthMount[hidden] {
  display: none !important;
}

#unitySignedOut:not([hidden]),
#unityTiAuthMount:not([hidden]) {
  display: flex !important;
}

/* Keep it aligned with search */
.unity-header__right {
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
}

.unity-header__right > .unity-header__search,
.unity-header__right > #unitySignedOut,
.unity-header__right > #unityTiAuthMount {
  align-self: center !important;
  margin: 0 !important;
}

/* Reset the moved TI wrapper */
#unityTiAuthMount .ml-auto,
#unityTiAuthMount .ember-view,
#unityTiAuthMount .relative {
  margin: 0 !important;
}

/* Make the native TI button behave like your avatar trigger */
#unityTiAuthMount button[id^="headlessui-menu-button-"] {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
  margin: 0 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  cursor: pointer !important;
}

/* Hide TI name text so only the avatar bubble remains */
#unityTiAuthMount button[id^="headlessui-menu-button-"] .truncate {
  display: none !important;
}

/* Hide TI chevron */
#unityTiAuthMount button[id^="headlessui-menu-button-"] .w-4.h-4,
#unityTiAuthMount button[id^="headlessui-menu-button-"] svg.w-4.h-4 {
  display: none !important;
}

/* Style the native initials bubble */
#unityTiAuthMount button[id^="headlessui-menu-button-"] .rounded-full {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 42px !important;
  height: 42px !important;
  min-width: 42px !important;
  min-height: 42px !important;
  margin: 0 !important;
  border-radius: 999px !important;
  background: rgba(255,255,255,0.06) !important;
  border: 1px solid rgba(0, 194, 255, 0.55) !important;
  box-shadow: 0 0 0 2px rgba(0, 194, 255, 0.18) !important;
  color: #ffffff !important;
  font-size: 13px !important;
  font-weight: 800 !important;
  line-height: 1 !important;
  text-transform: uppercase !important;
}

/* Keep the actual TI dropdown above the page when it opens */
div.fixed.z-\[50004\] {
  z-index: 2147483647 !important;
}

/* ==========================================
   NATIVE TI AUTH CONTROL — LAYOUT FIX
   ========================================== */

.unity-header__right {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 14px !important;
}

.unity-header__right > .unity-header__search,
.unity-header__right > #unitySignedOut,
.unity-header__right > #unityTiAuthMount {
  align-self: center !important;
  margin: 0 !important;
}

#unitySignedOut {
  display: flex !important;
  align-items: center !important;
}

#unitySignedOut[hidden] {
  display: none !important;
}

#unityTiAuthMount {
  display: flex !important;
  align-items: center !important;
  margin: 0 !important;
  padding: 0 !important;
  min-width: 0 !important;
}

#unityTiAuthMount[hidden] {
  display: none !important;
  width: 0 !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
}

/* reset moved TI wrapper */
#unityTiAuthMount .ml-auto,
#unityTiAuthMount .ember-view,
#unityTiAuthMount .relative {
  margin: 0 !important;
  padding: 0 !important;
  min-width: 0 !important;
  width: auto !important;
}

/* native TI button in your style */
#unityTiAuthMount button[id^="headlessui-menu-button-"] {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
  margin: 0 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  cursor: pointer !important;
}

#unityTiAuthMount button[id^="headlessui-menu-button-"] .truncate {
  display: none !important;
}

#unityTiAuthMount button[id^="headlessui-menu-button-"] .w-4.h-4,
#unityTiAuthMount button[id^="headlessui-menu-button-"] svg.w-4.h-4 {
  display: none !important;
}

#unityTiAuthMount button[id^="headlessui-menu-button-"] .rounded-full {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 42px !important;
  height: 42px !important;
  min-width: 42px !important;
  min-height: 42px !important;
  margin: 0 !important;
  border-radius: 999px !important;
  background: rgba(255,255,255,0.06) !important;
  border: 1px solid rgba(0, 194, 255, 0.55) !important;
  box-shadow: 0 0 0 2px rgba(0, 194, 255, 0.18) !important;
  color: #ffffff !important;
  font-size: 13px !important;
  font-weight: 800 !important;
  line-height: 1 !important;
  text-transform: uppercase !important;
}

/* ==========================================
   NATIVE TI DROPDOWN — RESTYLE TO YOUR UI
   ========================================== */

/* the TI menu panel you pasted */
#unityTiAuthMount div.fixed.min-h-min.z-\[50004\],
div.fixed.min-h-min.z-\[50004\] {
  z-index: 2147483647 !important;
}

/* style the actual TI menu content inside the fixed panel */
#unityTiAuthMount div.fixed.min-h-min.z-\[50004\] > *,
div.fixed.min-h-min.z-\[50004\] > * {
  border-radius: 14px !important;
  border: 1px solid rgba(255,255,255,0.14) !important;
  background: linear-gradient(180deg, rgba(18,20,26,0.98), rgba(10,12,16,0.98)) !important;
  box-shadow: 0 18px 40px rgba(0,0,0,0.36) !important;
  backdrop-filter: blur(10px) !important;
  overflow: hidden !important;
}

/* menu links/buttons */
#unityTiAuthMount div.fixed.min-h-min.z-\[50004\] a,
#unityTiAuthMount div.fixed.min-h-min.z-\[50004\] button,
div.fixed.min-h-min.z-\[50004\] a,
div.fixed.min-h-min.z-\[50004\] button {
  display: block !important;
  width: 100% !important;
  padding: 10px 12px !important;
  border: 0 !important;
  background: transparent !important;
  color: #ffffff !important;
  text-decoration: none !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  text-align: left !important;
  box-shadow: none !important;
}

#unityTiAuthMount div.fixed.min-h-min.z-\[50004\] a:hover,
#unityTiAuthMount div.fixed.min-h-min.z-\[50004\] button:hover,
div.fixed.min-h-min.z-\[50004\] a:hover,
div.fixed.min-h-min.z-\[50004\] button:hover {
  background: rgba(255,255,255,0.08) !important;
}

/* keep search + sign in aligned when signed out */
.unity-header__search {
  display: flex !important;
  align-items: center !important;
  margin: 0 !important;
}

#unitySignedOut[hidden],
#unityTiAuthMount[hidden] {
  display: none !important;
}

#unitySignedOut:not([hidden]),
#unityTiAuthMount:not([hidden]) {
  display: flex !important;
}

/* ==========================================
   TI AUTH MOUNT — REMOVE LAYOUT SIDE EFFECTS
   ========================================== */

#unityTiAuthMount {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex: 0 0 auto !important;
  width: auto !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}

#unityTiAuthMount[hidden] {
  display: none !important;
  width: 0 !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
}

/* Reset TI wrappers once moved */
#unityTiAuthMount .ember-view,
#unityTiAuthMount .relative {
  display: flex !important;
  align-items: center !important;
  width: auto !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  position: relative !important;
}

/* Native TI button styled like your UI */
#unityTiAuthMount button[id^="headlessui-menu-button-"] {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
  margin: 0 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  cursor: pointer !important;
  width: auto !important;
  min-width: 0 !important;
}

/* Hide TI name text */
#unityTiAuthMount button[id^="headlessui-menu-button-"] .truncate {
  display: none !important;
}

/* Hide TI chevron */
#unityTiAuthMount button[id^="headlessui-menu-button-"] .w-4.h-4,
#unityTiAuthMount button[id^="headlessui-menu-button-"] svg.w-4.h-4 {
  display: none !important;
}

/* Style initials bubble */
#unityTiAuthMount button[id^="headlessui-menu-button-"] .rounded-full {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 42px !important;
  height: 42px !important;
  min-width: 42px !important;
  min-height: 42px !important;
  margin: 0 !important;
  border-radius: 999px !important;
  background: rgba(255,255,255,0.06) !important;
  border: 1px solid rgba(0, 194, 255, 0.55) !important;
  box-shadow: 0 0 0 2px rgba(0, 194, 255, 0.18) !important;
  color: #ffffff !important;
  font-size: 13px !important;
  font-weight: 800 !important;
  line-height: 1 !important;
  text-transform: uppercase !important;
}

/* ==========================================
   SAFE HEADER AUTH UI
   ========================================== */

#unitySignedOut,
#unityTiAuthProxy {
  align-items: center !important;
  margin: 0 !important;
}

#unitySignedOut[hidden],
#unityTiAuthProxy[hidden] {
  display: none !important;
}

#unitySignedOut:not([hidden]),
#unityTiAuthProxy:not([hidden]) {
  display: flex !important;
}

.unity-header__user-trigger {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 42px !important;
  height: 42px !important;
  min-width: 42px !important;
  min-height: 42px !important;
  padding: 0 !important;
  border-radius: 999px !important;
  background: rgba(255,255,255,0.06) !important;
  border: 1px solid rgba(0,194,255,0.55) !important;
  box-shadow: 0 0 0 2px rgba(0,194,255,0.18) !important;
  color: #ffffff !important;
  cursor: pointer !important;
}

.unity-header__user-initials {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  height: 100% !important;
  font-size: 13px !important;
  font-weight: 800 !important;
  line-height: 1 !important;
  text-transform: uppercase !important;
}

/* Restyle native TI dropdown when it opens */
.ua-ti-menu-panel {
  z-index: 2147483647 !important;
}

.ua-ti-menu-panel > * {
  border-radius: 14px !important;
  border: 1px solid rgba(255,255,255,0.14) !important;
  background: linear-gradient(180deg, rgba(18,20,26,0.98), rgba(10,12,16,0.98)) !important;
  box-shadow: 0 18px 40px rgba(0,0,0,0.36) !important;
  backdrop-filter: blur(10px) !important;
  overflow: hidden !important;
}

.ua-ti-menu-panel a,
.ua-ti-menu-panel button {
  display: block !important;
  width: 100% !important;
  padding: 10px 12px !important;
  border: 0 !important;
  background: transparent !important;
  color: #ffffff !important;
  text-decoration: none !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  text-align: left !important;
  box-shadow: none !important;
}

.ua-ti-menu-panel a:hover,
.ua-ti-menu-panel button:hover {
  background: rgba(255,255,255,0.08) !important;
}

/* ==========================================
   TI DROPDOWN PANEL — FORCE VISIBLE + STYLED
   ========================================== */

.ua-ti-menu-panel {
  z-index: 2147483647 !important;
}

/* When TI removes "hidden", this should show cleanly */
.ua-ti-menu-panel:not(.hidden) {
  display: block !important;
}

/* Style the actual menu box inside */
.ua-ti-menu-panel > * {
  border-radius: 14px !important;
  border: 1px solid rgba(255,255,255,0.14) !important;
  background: linear-gradient(180deg, rgba(18,20,26,0.98), rgba(10,12,16,0.98)) !important;
  box-shadow: 0 18px 40px rgba(0,0,0,0.36) !important;
  backdrop-filter: blur(10px) !important;
  overflow: hidden !important;
}

/* Menu items */
.ua-ti-menu-panel a,
.ua-ti-menu-panel button {
  display: block !important;
  width: 100% !important;
  padding: 10px 12px !important;
  border: 0 !important;
  background: transparent !important;
  color: #ffffff !important;
  text-decoration: none !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  text-align: left !important;
  box-shadow: none !important;
}

.ua-ti-menu-panel a:hover,
.ua-ti-menu-panel button:hover {
  background: rgba(255,255,255,0.08) !important;
}

/* ==========================================
   TI MENU PANEL — POSITIONED FROM PROXY
   ========================================== */

.ua-ti-menu-panel {
  min-width: 190px !important;
  max-width: min(24rem, calc(100vw - 24px)) !important;
  border-radius: 14px !important;
  border: 1px solid rgba(255,255,255,0.14) !important;
  background: linear-gradient(180deg, rgba(18,20,26,0.98), rgba(10,12,16,0.98)) !important;
  box-shadow: 0 18px 40px rgba(0,0,0,0.36) !important;
  backdrop-filter: blur(10px) !important;
  overflow: hidden !important;
}

.ua-ti-menu-panel a,
.ua-ti-menu-panel button {
  display: block !important;
  width: 100% !important;
  padding: 10px 12px !important;
  border: 0 !important;
  background: transparent !important;
  color: #ffffff !important;
  text-decoration: none !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  text-align: left !important;
  box-shadow: none !important;
}

.ua-ti-menu-panel a:hover,
.ua-ti-menu-panel button:hover {
  background: rgba(255,255,255,0.08) !important;
}

/* ==========================================
   TI ACCOUNT DROPDOWN — FINAL UI OVERRIDE
   ========================================== */

.ua-ti-menu-panel {
  min-width: 220px !important;
  max-width: min(24rem, calc(100vw - 24px)) !important;
  padding: 8px !important;
  border-radius: 14px !important;
  border: 1px solid rgba(255,255,255,0.14) !important;
  background: linear-gradient(180deg, rgba(18,20,26,0.98), rgba(10,12,16,0.98)) !important;
  box-shadow: 0 18px 40px rgba(0,0,0,0.36) !important;
  backdrop-filter: blur(10px) !important;
  overflow: hidden !important;
  list-style: none !important;
}

/* all menu links */
.ua-ti-menu-panel a[role="menuitem"] {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 10px 12px !important;

  border: 0 !important;
  border-bottom: 1px solid rgba(255,255,255,0.08) !important;
  background: transparent !important;

  color: #ffffff !important;
  text-decoration: none !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  line-height: 1.35 !important;
  text-align: left !important;

  box-shadow: none !important;
}

/* remove final divider */
.ua-ti-menu-panel a[role="menuitem"]:last-child {
  border-bottom: 0 !important;
}

/* hover/focus state */
.ua-ti-menu-panel a[role="menuitem"]:hover,
.ua-ti-menu-panel a[role="menuitem"]:focus {
  background: rgba(255,255,255,0.08) !important;
  color: #ffffff !important;
  outline: none !important;
}

/* sign out icon */
.ua-ti-menu-panel a[role="menuitem"] svg {
  width: 16px !important;
  height: 16px !important;
  flex: 0 0 auto !important;
  color: rgba(255,255,255,0.82) !important;
}

/* make panel animation feel smoother */
.ua-ti-menu-panel {
  transform-origin: top right !important;
}

.ua-ti-menu-panel {
  min-width: 220px !important;
  max-width: 260px !important;
  padding: 8px !important;
  border-radius: 14px !important;
  border: 1px solid rgba(255,255,255,0.14) !important;
  background: linear-gradient(180deg, rgba(18,20,26,0.98), rgba(10,12,16,0.98)) !important;
  box-shadow: 0 18px 40px rgba(0,0,0,0.36) !important;
  backdrop-filter: blur(10px) !important;
  overflow: hidden !important;
}

.ua-ti-menu-panel a[role="menuitem"] {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  width: 100% !important;
  padding: 10px 12px !important;
  border: 0 !important;
  border-bottom: 1px solid rgba(255,255,255,0.08) !important;
  background: transparent !important;
  color: #ffffff !important;
  text-decoration: none !important;
  font-size: 14px !important;
  font-weight: 600 !important;
}

.ua-ti-menu-panel a[role="menuitem"]:last-child {
  border-bottom: 0 !important;
}

.ua-ti-menu-panel a[role="menuitem"]:hover,
.ua-ti-menu-panel a[role="menuitem"]:focus {
  background: rgba(255,255,255,0.08) !important;
  color: #ffffff !important;
}

.ua-ti-menu-panel svg {
  width: 16px !important;
  height: 16px !important;
  color: rgba(255,255,255,0.82) !important;
}

/* ==========================================
   FIX HEADLESS UI COLLAPSE (CRITICAL)
   ========================================== */

.ua-ti-menu-panel {
  transform: none !important;
  scale: 1 !important;
  opacity: 1 !important;
  display: block !important;
  visibility: visible !important;
  width: 220px !important;
  min-width: 220px !important;
}

/* Kill any collapse animation issues */
.ua-ti-menu-panel[style*="scale(0)"],
.ua-ti-menu-panel[style*="transform"] {
  transform: none !important;
}

/* Ensure children render */
.ua-ti-menu-panel * {
  visibility: visible !important;
}

#unitySignedOut,
#unityTiAuthProxy {
  align-items: center !important;
  margin: 0 !important;
}

#unitySignedOut[hidden],
#unityTiAuthProxy[hidden],
#unityTiAuthProxyMenu[hidden] {
  display: none !important;
}

#unitySignedOut:not([hidden]),
#unityTiAuthProxy:not([hidden]) {
  display: flex !important;
}

.unity-header__user-trigger {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 42px !important;
  height: 42px !important;
  min-width: 42px !important;
  min-height: 42px !important;
  padding: 0 !important;
  border-radius: 999px !important;
  background: rgba(255,255,255,0.06) !important;
  border: 1px solid rgba(0,194,255,0.55) !important;
  box-shadow: 0 0 0 2px rgba(0,194,255,0.18) !important;
  color: #ffffff !important;
  cursor: pointer !important;
}

.unity-header__user-initials {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  height: 100% !important;
  font-size: 13px !important;
  font-weight: 800 !important;
  line-height: 1 !important;
  text-transform: uppercase !important;
}

.unity-header__dropdown-portal {
  position: fixed !important;
  min-width: 220px !important;
  max-width: min(24rem, calc(100vw - 24px)) !important;
  padding: 8px !important;
  border-radius: 14px !important;
  border: 1px solid rgba(255,255,255,0.14) !important;
  background: linear-gradient(180deg, rgba(18,20,26,0.98), rgba(10,12,16,0.98)) !important;
  box-shadow: 0 18px 40px rgba(0,0,0,0.36) !important;
  backdrop-filter: blur(10px) !important;
  z-index: 2147483647 !important;
  overflow: hidden !important;

  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  transform: translateY(-6px) !important;
  transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s ease !important;
}

.unity-header__dropdown-portal.is-open {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  transform: translateY(0) !important;
}

.unity-header__dropdown-portal a {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  width: 100% !important;
  padding: 10px 12px !important;
  border: 0 !important;
  border-bottom: 1px solid rgba(255,255,255,0.08) !important;
  background: transparent !important;
  color: #ffffff !important;
  text-decoration: none !important;
  font-size: 14px !important;
  font-weight: 600 !important;
}

.unity-header__dropdown-portal a:last-child {
  border-bottom: 0 !important;
}

.unity-header__dropdown-portal a:hover,
.unity-header__dropdown-portal a:focus {
  background: rgba(255,255,255,0.08) !important;
  color: #ffffff !important;
}

/* ==========================================
   USE NATIVE TI ACCOUNT WIDGET AS-IS
   Position it in the custom header
   ========================================== */

/* Let header show overlays/dropdowns */
.unity-header,
.unity-header__inner,
.unity-header__right {
  overflow: visible !important;
}

.unity-header {
  position: relative !important;
  z-index: 5000 !important;
}

.unity-header__inner {
  position: relative !important;
}

.unity-header__right {
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  padding-right: 64px !important; /* room for native TI widget */
}

/* ------------------------------------------
   NATIVE TI SIGNED-IN CONTROL
   Keep TI functionality, only reposition visually
   ------------------------------------------ */

/* target the real TI user widget wrapper */
.ml-auto:has(button[id^="headlessui-menu-button-"][aria-haspopup="true"]) {
  position: fixed !important;
  top: 14px !important;
  right: 24px !important;
  z-index: 6000 !important;
  margin: 0 !important;
  width: auto !important;
  min-width: 0 !important;
}

/* strip the extra name + chevron if you only want the circle */
.ml-auto:has(button[id^="headlessui-menu-button-"][aria-haspopup="true"]) .truncate {
  display: none !important;
}

.ml-auto:has(button[id^="headlessui-menu-button-"][aria-haspopup="true"]) svg.w-4.h-4,
.ml-auto:has(button[id^="headlessui-menu-button-"][aria-haspopup="true"]) .w-4.h-4 {
  display: none !important;
}

/* style the native TI initials bubble to match your UI */
.ml-auto:has(button[id^="headlessui-menu-button-"][aria-haspopup="true"]) .rounded-full {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 42px !important;
  height: 42px !important;
  min-width: 42px !important;
  min-height: 42px !important;
  margin: 0 !important;
  border-radius: 999px !important;
  background: rgba(255,255,255,0.06) !important;
  border: 1px solid rgba(0, 194, 255, 0.55) !important;
  box-shadow: 0 0 0 2px rgba(0, 194, 255, 0.18) !important;
  color: #ffffff !important;
  font-size: 13px !important;
  font-weight: 800 !important;
  line-height: 1 !important;
  text-transform: uppercase !important;
}

/* remove extra wrapper spacing */
.ml-auto:has(button[id^="headlessui-menu-button-"][aria-haspopup="true"]) .flex.items-center,
.ml-auto:has(button[id^="headlessui-menu-button-"][aria-haspopup="true"]) .whitespace-nowrap.flex.items-center {
  gap: 0 !important;
  margin: 0 !important;
}

/* ------------------------------------------
   NATIVE TI DROPDOWN
   Keep TI behavior, just skin it
   ------------------------------------------ */

[id^="headlessui-menu-items-"][role="menu"] {
  min-width: 220px !important;
  max-width: min(24rem, calc(100vw - 24px)) !important;
  padding: 8px !important;
  border-radius: 14px !important;
  border: 1px solid rgba(255,255,255,0.14) !important;
  background: linear-gradient(180deg, rgba(18,20,26,0.98), rgba(10,12,16,0.98)) !important;
  box-shadow: 0 18px 40px rgba(0,0,0,0.36) !important;
  backdrop-filter: blur(10px) !important;
  overflow: hidden !important;
  z-index: 2147483647 !important;
}

/* menu items */
[id^="headlessui-menu-items-"][role="menu"] a[role="menuitem"] {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 10px 12px !important;
  border: 0 !important;
  border-bottom: 1px solid rgba(255,255,255,0.08) !important;
  background: transparent !important;
  color: #ffffff !important;
  text-decoration: none !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  line-height: 1.35 !important;
  text-align: left !important;
}

[id^="headlessui-menu-items-"][role="menu"] a[role="menuitem"]:last-child {
  border-bottom: 0 !important;
}

[id^="headlessui-menu-items-"][role="menu"] a[role="menuitem"]:hover,
[id^="headlessui-menu-items-"][role="menu"] a[role="menuitem"]:focus {
  background: rgba(255,255,255,0.08) !important;
  color: #ffffff !important;
  outline: none !important;
}

[id^="headlessui-menu-items-"][role="menu"] a[role="menuitem"] svg {
  width: 16px !important;
  height: 16px !important;
  flex: 0 0 auto !important;
  color: rgba(255,255,255,0.82) !important;
}

/* ==========================================
   GLOBAL SCROLL + BACKGROUND FIX
   ========================================== */

html {
  overflow-x: hidden !important;
  background-color: #ffffff !important;
}

body {
  margin: 0 !important;
  padding: 0 !important;
  overflow-x: hidden !important;
  background-color: #ffffff !important;
}

/* Restore scroll on non-dashboard pages only */
body:not(.dashboard):not(.learn) {
  overflow-y: auto !important;
}

/* Background fixes */
body.learn {
  background-color: #ffffff !important;
}

body.dashboard {
  background-color: #ffffff !important;
}

body.dashboard .widget.widget--html.widget--html_standard:first-of-type {
  padding-top: 0 !important;
}

/* ==========================================
   UA CUSTOM BUTTON STYLES
   ========================================== */

.ua-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  min-height: 42px !important;
  padding: 0 20px !important;
  border-radius: 6px !important;
  text-decoration: none !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  cursor: pointer !important;
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease !important;
}

.ua-btn--primary {
  background-color: #3a5bc7 !important;
  color: #ffffff !important;
  border: none !important;
}

.ua-btn--primary:hover {
  background-color: #2d4aa3 !important;
  color: #ffffff !important;
}

.ua-btn--secondary {
  background-color: #000000 !important;
  color: #ffffff !important;
  border: 1px solid rgba(255,255,255,0.2) !important;
}

.ua-btn--secondary:hover {
  background-color: #1a1a1a !important;
  color: #ffffff !important;
}

.ua-btn svg {
  width: 16px !important;
  height: 16px !important;
  flex-shrink: 0 !important;
}

/* ==========================================
   REMOVE TI NATIVE HEADER TOP PADDING
   ========================================== */
.header.header--microsite {
  padding-top: 0 !important;
}

/* Hide View Details button */
.dashboard-access-list-view-detail-page,
a.btn.btn--alt.dashboard-access-list-view-detail-page {
  display: none !important;
}

/* Hide progress bar */
.user-engagement-progress-bar {
  display: none !important;
}

/* Row layout — horizontal */
[id^="dashboard-access-expandable-item-content"] .row {
  display: flex !important;
  flex-direction: row !important;
  align-items: flex-start !important;
  gap: 20px !important;
  padding: 12px 0 !important;
}

/* Description text */
.dashboard-access-list-item__description p {
  margin: 0 0 14px !important;
  font-size: 14px !important;
  line-height: 1.55 !important;
  color: rgba(255,255,255,0.82) !important;
}

/* Stats grid — horizontal row */
.user-engagement-stats {
  margin-top: 0 !important;
}

.user-engagement-stats ul {
  display: flex !important;
  flex-direction: row !important;
  gap: 24px !important;
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

.user-engagement-stats li {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 4px !important;
  min-width: 80px !important;
}

/* Stat label */
.user-engagement-stat__label {
  font-size: 11px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
  color: rgba(255,255,255,0.58) !important;
  text-align: center !important;
}

/* Hide help icon */
.user-engagement-stat__label-hint {
  display: none !important;
}

/* Stat value */
.user-engagement-stat__value-container {
  display: flex !important;
  align-items: baseline !important;
  gap: 2px !important;
}

.user-engagement-stat__value-container i {
  display: none !important;
}

.user-engagement-stat__value {
  font-size: clamp(1.8rem, 2.5vw, 2.4rem) !important;
  font-weight: 800 !important;
  line-height: 1 !important;
  letter-spacing: -0.04em !important;
  color: #ffffff !important;
}

.user-engagement-stat__value--percent {
  font-size: 14px !important;
  font-weight: 700 !important;
  color: rgba(255,255,255,0.7) !important;
}

/* Color the stats */
.user-engagement-stat--hours .user-engagement-stat__value {
  color: #56c2ff !important;
}

.user-engagement-stat--percent-viewed .user-engagement-stat__value {
  color: #ffffff !important;
}

.user-engagement-stat--percent-complete .user-engagement-stat__value {
  color: #d946ef !important;
}

.dashboard-access-list-item .medium-4.columns {
  width: 260px !important;
  min-width: 260px !important;
  max-width: 260px !important;
  flex-shrink: 0 !important;
  float: none !important;
  padding: 0 !important;
}

.dashboard-access-list-item .medium-4.columns img {
  width: 260px !important;
  height: 146px !important;
  object-fit: cover !important;
  border-radius: 8px !important;
  display: block !important;
  max-width: 260px !important;
}

[id^="dashboard-access-expandable-item-content"] .medium-4 {
  width: 260px !important;
  min-width: 260px !important;
  max-width: 260px !important;
  float: none !important;
  padding: 0 !important;
}

/* CTA button sizes to content, anchored right */
.dashboard-access-list-item .grid.grid-cols-12 {
  grid-template-columns: minmax(0, 1fr) max-content max-content !important;
}

.dashboard-access-list-item .col-start-11,
.dashboard-access-list-item .text-right {
  width: auto !important;
  min-width: 0 !important;
  max-width: none !important;
  justify-content: flex-end !important;
}

.dashboard-access-list-item .btn.btn--primary,
.dashboard-access-list-item a.btn.btn--primary {
  width: auto !important;
  min-width: 0 !important;
  max-width: none !important;
  flex: 0 0 auto !important;
  white-space: nowrap !important;
  padding: 9px 14px !important;
  font-size: 13px !important;
}

/* ── Hide 'Gift This Learning Path' button ──────────
   Targets the secondary actions container on all
   Learning Path detail pages globally.
   ───────────────────────────────────────────────── */

.enroll__secondary-actions {
  display: none !important;
}

/* ── Sidebar button alignment — video player top edge ── */

.course__detail__sidebar .widget--learning-path-purchase {
  padding-top: 105px !important;
}

.widget--course-purchase {
  padding-top: 95px !important;
}

/* Prevent last card in catalog grid from stretching full width */
ul.large-block-grid-3 > li,
ul.medium-block-grid-2 > li {
  max-width: 33.333% !important;
  box-sizing: border-box !important;
}

@media (max-width: 1024px) {
  ul.medium-block-grid-2 > li {
    max-width: 50% !important;
  }
}

@media (max-width: 640px) {
  ul.small-block-grid-1 > li {
    max-width: 100% !important;
  }
}

/* ==========================================
   CAROUSEL SECTION HEADERS
   ========================================== */

/* Section title */
.widget__alt-title__container--with-cta h3,
.widget__alt-title__container--with-cta h2 {
  font-size: clamp(1.4rem, 2vw, 1.8rem) !important;
  font-weight: 800 !important;
  letter-spacing: -0.02em !important;
  line-height: 1.1 !important;
  color: #111318 !important;
  margin: 0 !important;
}

a.widget__title-cta {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 40px !important;
  padding: 0 20px !important;
  border-radius: 8px !important;
  border: none !important;
  background: #111318 !important;
  color: #ffffff !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  text-decoration: none !important;
  white-space: nowrap !important;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15) !important;
  transition: background 0.15s ease, box-shadow 0.15s ease !important;
}

a.widget__title-cta:hover {
  background: #1f2937 !important;
  color: #ffffff !important;
  box-shadow: 0 6px 16px rgba(0,0,0,0.2) !important;
}

/* Remove gap between FAQ and section above */
.widget:has(#ua-faq) {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

.row.widget + .row.widget {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

/* Kill white background on widget wrappers between dark sections */
.container.sidebar--closed--right,
.container.sidebar--closed--right > div {
  background-color: transparent !important;
}

/* ==========================================
   CONTENT TYPE BADGE COLORS PER TYPE
   ========================================== */

/* Default — red (Course) */
.ua-content-type-badge {
  background: #d93b4f !important;
}

/* Live Session — cyan/teal */
.ua-content-type-badge[data-ua-type="Live Session"] {
  background: #0891b2 !important;
}

/* Learning Path — purple */
.ua-content-type-badge[data-ua-type="Learning Path"] {
  background: #7c3aed !important;
}

/* On Demand Course — dark blue */
.ua-content-type-badge[data-ua-type="On Demand Course"] {
  background: #1d4ed8 !important;
}

/* QuickStart Course — orange */
.ua-content-type-badge[data-ua-type="QuickStart Course"] {
  background: #ea580c !important;
}

/* Article — slate */
.ua-content-type-badge[data-ua-type="Article"] {
  background: #475569 !important;
}

/* Microcourse — green */
.ua-content-type-badge[data-ua-type="Microcourse"] {
  background: #16a34a !important;
}

/* Webinar — pink */
.ua-content-type-badge[data-ua-type="Webinar"] {
  background: #db2777 !important;
}

/* ==========================================
   CONTENT TYPE ACTIVE FILTER — MATCH TI STYLE
   ========================================== */

/* Make the content type remove button look like TI's native filter chips */
.catalog-active-filters button.catalog-active-filter__remove {
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  padding: 0 14px !important;
  border-radius: 10px !important;
  border: 1px solid rgb(229, 231, 235) !important;
  background: rgb(255, 255, 255) !important;
  color: rgb(75, 85, 99) !important;
  font-size: 13px !important;
  font-weight: 400 !important;
  text-decoration: none !important;
  white-space: nowrap !important;
  cursor: pointer !important;
  min-height: 36px !important;
  height: 36px !important;
  line-height: 1 !important;
  box-shadow: 0 1px 3px rgba(0,0,0,0.08), 0 1px 2px rgba(0,0,0,0.06) !important;
}

.catalog-active-filters button.catalog-active-filter__remove:hover {
  background: #f3f4f6 !important;
  border-color: #9ca3af !important;
  color: #111827 !important;
}

/* Also fix the container to prevent overlap */
.catalog-active-filters {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 8px !important;
}

/* Make both native and custom active filters look identical */
.catalog-active-filter__remove,
a.catalog-active-filter__remove,
button.catalog-active-filter__remove {
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  padding: 0 14px !important;
  border-radius: 10px !important;
  border: 1px solid rgb(229, 231, 235) !important;
  background: #ffffff !important;
  color: rgb(75, 85, 99) !important;
  font-size: 13px !important;
  font-weight: 400 !important;
  text-decoration: none !important;
  white-space: nowrap !important;
  cursor: pointer !important;
  min-height: 36px !important;
  height: 36px !important;
  line-height: 1 !important;
  box-shadow: none !important;
}

.catalog-active-filter__remove:hover,
a.catalog-active-filter__remove:hover,
button.catalog-active-filter__remove:hover {
  background: #f3f4f6 !important;
  border-color: #9ca3af !important;
  color: #111827 !important;
}

.catalog-active-filter {
  font-weight: 400 !important;
}

.catalog-active-filter * {
  font-weight: 400 !important;
}

a.catalog-active-filter__remove {
  font-weight: 400 !important;
}

.catalog-active-filters button.catalog-active-filter__remove {
  box-shadow: none !important;
}
.catalog-active-filter__remove:hover,
a.catalog-active-filter__remove:hover,
button.catalog-active-filter__remove:hover {
  transform: none !important;
  box-shadow: none !important;
  background: #f3f4f6 !important;
  border-color: #9ca3af !important;
  color: #111827 !important;
}

.ua-content-type-badge[data-ua-type="On Demand Course"] {
  background: #1d4ed8 !important;
}

.ua-content-type-badge[data-ua-type="QuickStart Course"] {
  background: #ea580c !important;
}

.ua-content-type-badge[data-ua-type="Microcourse"] {
  background: #16a34a !important;
}

.ua-content-type-badge[data-ua-type="Article"] {
  background: #475569 !important;
}

.ua-content-type-badge[data-ua-type="vILT"] {
  background: #9333ea !important;
}

/* Left anchor titles on content cards */
.featured-content-multi-carousel-item__title,
.catalog-grid-item__title {
  text-align: left !important;
}

/* ==========================================
   HEADER SEARCH + SIGN IN — UNIFIED STYLE
   ========================================== */

.unity-header__search button,
.unity-header__signin {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 38px !important;
  padding: 0 16px !important;
  border-radius: 8px !important;
  border: 1px solid rgba(255,255,255,0.28) !important;
  background: rgba(255,255,255,0.07) !important;
  color: #ffffff !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  letter-spacing: 0.01em !important;
  cursor: pointer !important;
  text-decoration: none !important;
  white-space: nowrap !important;
  transition: background 0.2s ease, border-color 0.2s ease !important;
  box-shadow: none !important;
}

.unity-header__search button:hover,
.unity-header__signin:hover {
  background: rgba(255,255,255,0.12) !important;
  border-color: rgba(255,255,255,0.4) !important;
  color: #ffffff !important;
  box-shadow: none !important;
  transform: none !important;
}

.unity-header__search button:focus,
.unity-header__search button:active,
.unity-header__signin:focus,
.unity-header__signin:active {
  background: rgba(255,255,255,0.15) !important;
  border-color: rgba(255,255,255,0.5) !important;
  color: #ffffff !important;
  outline: 2px solid rgba(0,194,255,0.5) !important;
  outline-offset: 2px !important;
  box-shadow: none !important;
}

.unity-header__search input,
.unity-header__search button {
  height: 38px !important; }

/* ==========================================
   FIX WHITE HEADER IN LEARNER PREVIEW MODE
   ========================================== */

/* Hide TI's native ember header in learner preview */
body.learn:not(.manager) .ember-view.header,
body.dashboard .ember-view.header,
.ember-view.header--dashboard,
.ember-view.header--microsite {
  background-color: #000000 !important;
}

.unity-header,
.unity-header:first-child {
  background-color: #000000 !important;
  background: #000000 !important;
}

/* ==========================================
   LEARNER PREVIEW MODE — FIX HEADER GAP
   ========================================== */

/* Make the management bar dark */
#ember2006,
.panel.panel--secondary.flex.py-2.px-4.rounded,
[class*="panel--secondary"] {
  background-color: #111318 !important;
  color: #ffffff !important;
}

[class*="panel--secondary"] i,
[class*="panel--secondary"] span,
[class*="panel--secondary"] a {
  color: #ffffff !important;
}

/* ==========================================
   FIX TI NATIVE HEADER IN LEARNER PREVIEW
   ========================================== */

/* FIX TI NATIVE HEADER IN LEARNER PREVIEW — SCOPED */
body.learn:not(.manager) .header.header--dashboard,
body.learn:not(.manager) .header.header--microsite,
body.learn:not(.manager) .header.header--learn {
  background: #000000 !important;
  background-color: #000000 !important;
}

body.learn:not(.manager) .header .header__inner,
body.learn:not(.manager) .header .container,
body.learn:not(.manager) .header nav {
  background: #000000 !important;
  background-color: #000000 !important;
}

body.learn:not(.manager) .header a,
body.learn:not(.manager) .header nav a {
  color: #ffffff !important;
}

#unityDashboardHeader {
  background-color: #000000 !important;
  background: #000000 !important;
}

#unityDashboardHeader {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

/* Remove gap between management bar and header */
.panel.panel--secondary {
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}

#unityDashboardHeader .unity-header__logo {
  height: 52px !important;
  width: auto !important;
}

#unityDashboardHeader .unity-header__inner {
  min-height: 60px !important;
}

/* FIX TI NATIVE HEADER IN LEARNER PREVIEW — SCOPED */
body.learn:not(.manager) .header.header--dashboard,
body.learn:not(.manager) .header.header--microsite,
body.learn:not(.manager) .header.header--learn {
  background: #000000 !important;
  background-color: #000000 !important;
}

body.learn:not(.manager) .header .header__inner,
body.learn:not(.manager) .header .container,
body.learn:not(.manager) .header nav {
  background: #000000 !important;
  background-color: #000000 !important;
}

body.learn:not(.manager) .header a,
body.learn:not(.manager) .header nav a {
  color: #ffffff !important;
}

/* ==========================================
   ACCOUNT PAGE — DARK HEADER
   ========================================== */

body.account .header.header--dashboard {
  background: #000000 !important;
  background-color: #000000 !important;
  border-bottom: 2px solid #00aef0 !important;
}

body.account .header.header--dashboard .header__inner {
  background: #000000 !important;
  background-color: #000000 !important;
}

body.account .header.header--dashboard a,
body.account .header.header--dashboard nav a,
body.account .header.header--dashboard .nav__link {
  color: #ffffff !important;
}

body.account .header.header--dashboard a:hover {
  color: #66b3ff !important;
}

/* Style the logo area */
body.account .header.header--dashboard .company__beta-logo img {
  filter: brightness(0) invert(1) !important;
}

/* Style any nav links */
body.account .header.header--dashboard .header__nav-link,
body.account .header.header--dashboard .nav-link {
  color: #ffffff !important;
  font-weight: 700 !important;
}

/* ==========================================
   ACCOUNT PAGE — REPLACE LOGO
   ========================================== */

body.account .company__beta-logo img,
body.account .company-logo__container img {
  content: url('https://storage.googleapis.com/protraining-unity-it-fileshare-prd/Assets/U_Logo_Small_White_RGB_1C%201.png') !important;
  height: 52px !important;
  width: auto !important;
  object-fit: contain !important;
}

/* Hide TI logo container background */
body.account .company-logo__container {
  background: transparent !important;
}

body.account .company__beta-logo {
  padding-bottom: 16px !important;
  display: inline-flex !important;
  align-items: center !important;
}

body.account .header .header__inner .row {
  display: flex !important;
  align-items: stretch !important;
  min-height: 80px !important;
}

body.account .header .header__inner .column {
  display: flex !important;
  align-items: center !important;
}

body.account .header .column.small-6:first-child {
  display: flex !important;
  align-items: center !important;
}

body.account .header .company__beta-logo {
  display: inline-flex !important;
  align-items: center !important;
}

body.account .header .ml-auto,
body.account .header .flex.items-center.gap-4 {
  display: none !important;
}

.ua-content-type-badge {
  position: absolute !important;
  top: 14px !important;
  right: 14px !important;
  z-index: 10 !important;

  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  min-height: 32px !important;
  min-width: 0 !important;
  width: auto !important;
  max-width: calc(100% - 120px) !important;
  padding: 7px 12px !important;

  border-radius: 10px !important;
  background: var(--ua-type-bg) !important;
  box-shadow: 0 8px 24px rgba(0,0,0,0.22) !important;
  box-sizing: content-box !important;
  overflow: visible !important;
  pointer-events: none !important;
  white-space: nowrap !important;
}

.catalog__ribbon,
.catalog__ribbon--attached,
.ribbon,
.card-ribbon,
.content-ribbon {
  position: absolute !important;
  top: 14px !important;
  left: 14px !important;
  right: auto !important;
  z-index: 11 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 44px !important;
  padding: 0 16px !important;
  border-radius: 12px !important;
  color: #ffffff !important;
  font-size: 12px !important;
  line-height: 1 !important;
  font-weight: 800 !important;
  letter-spacing: 0.05em !important;
  text-transform: uppercase !important;
  box-shadow: 0 8px 24px rgba(0,0,0,0.22) !important;
  overflow: hidden !important;
  max-width: calc(100% - 120px);
}

/* Hide TI native microsite header — but not our custom one or account page */
body:not(.manager):not(.account) .ember-view.header.header--microsite {
  display: none !important;
} 

body.dashboard #ua-injected-footer {
  margin-top: -20px !important;
  position: relative !important;
  z-index: 1 !important;
}

body:not(.dashboard) #ua-injected-footer {
  display: none !important;
}

/* Industry panorama — dashboard stats hero image */
.unity-header__dropdown:has(a[href*="client=industry"]) ~ * .widget--dashboard-stats .ua-dashboard-hero-bg,
body:has(a[href*="client=industry"]) .widget--dashboard-stats .ua-dashboard-hero-bg {
  background-image:
    linear-gradient(180deg, rgba(14,17,24,0.42), rgba(14,17,24,0.7)),
    url("https://storage.googleapis.com/protraining-unity-it-fileshare-prd/Assets/U_ATM_Wheel_SH01%20(1).png") !important;
}

/* Games & Entertainment panorama — dashboard stats hero image */
body:has(a[href*="client=games-entertainment"]) .widget--dashboard-stats .ua-dashboard-hero-bg {
  background-image:
    linear-gradient(180deg, rgba(14,17,24,0.42), rgba(14,17,24,0.7)),
    url("https://storage.googleapis.com/protraining-unity-it-fileshare-prd/Assets/DragonCrashers_ZoomBackground_HeroA.png") !important;
}