/* PLACE YOUR CUSTOM STYLES IN THIS FILE */

/* Ensure default body text is warm dark (not black) */
body {
  color: hsl(300deg, 10%, 38%) !important;
}
/* Force title/heading color in content (navbar keeps white via its own rules) */
.content-wrap h1, .content-wrap h2, .content-wrap h3, .content-wrap h4, .content-wrap h5, .content-wrap h6,
.content-wrap .card-title, .content-wrap .flq-card-title,
.content-wrap [class*="title"] {
  color: hsl(300deg, 20%, 28%) !important;
}

/* No black: replace with gradient or light gray */
.bg-black {
  background: var(--ac-gradient) !important;
  color: #fff !important;
}
.bg-dark {
  background: var(--ac-gradient) !important;
  color: #fff !important;
}
.text-dark {
  color: #5c5c5c !important;
}

/* ------------------------------------------------------------------
  Light theme – Certification Academy palette
  Pastel Peach, Gold Accents, Fuchsia, Turquoise Highlights, White BG
------------------------------------------------------------------- */
:root {
  --flq-banner-gradient: linear-gradient(90deg, #FFDAB9 0%, #c850c0 100%);
  --flq-color-brand: 300deg, 55%, 55%;
  --flq-color-background-300: 0deg, 0%, 97%;
  --flq-color-title: 300deg, 20%, 28%;
  --flq-color-text: 300deg, 10%, 38%;
  --flq-color-black: 300deg, 15%, 25%;
  /* Extended palette tokens */
  --ac-peach: #FFDAB9;
  --ac-gold: #D4AF37;
  --ac-fuchsia: #c850c0;
  --ac-turquoise: #40E0D0;
  --ac-white: #FFFFFF;
  --ac-gradient: linear-gradient(90deg, #FFDAB9 0%, #c850c0 100%);
  --ac-gradient-reverse: linear-gradient(90deg, #c850c0 0%, #FFDAB9 100%);
}

/* Page banners (hero sections): use gradient, white text */
.flq-banner-gradient {
  background-image: var(--flq-banner-gradient) !important;
}
.flq-banner-gradient .flq-background-image {
  display: none;
}
.flq-banner-gradient .flq-background-overlay {
  background: rgba(255, 255, 255, 0.12) !important;
}

/* Homepage hero slider: title, lead, More Details, and Featured badge white */
.flq-swiper-main .swiper-slide.flq-background .flq-subtitle.badge,
.flq-background .lead,
.flq-swiper-main .swiper-slide.flq-background .lead,
.flq-swiper-main .swiper-slide.flq-background h1,
.flq-swiper-main .swiper-slide.flq-background h2,
.flq-swiper-main .swiper-slide.flq-background .display-5,
.flq-swiper-main .swiper-slide.flq-background .btn-link {
  color: #fff !important;
}
.flq-swiper-main .swiper-slide.flq-background .btn-link:hover {
  color: rgba(255, 255, 255, 0.9) !important;
}
.flq-swiper-main .swiper-slide.flq-background .flq-subtitle.badge.badge-translucent {
  color: #fff !important;
}

/* Featured section (gradient banner): badge and h2 white */
.flq-color-opacity[data-sr="movie"] .flq-subtitle.badge,
.flq-color-opacity[data-sr="movie"] h2 {
  color: #fff !important;
}

/* Swiper pagination custom (01, 02, …) */
.flq-swiper-pagination-custom {
  background-color: hsl(0deg, 0%, 97%) !important;
  color: hsl(300deg, 10%, 38%) !important;
}
.flq-swiper-pagination-custom::before {
  color: hsl(300deg, 8%, 48%);
}
.flq-swiper-pagination-custom > .swiper-pagination-bullet,
.flq-swiper-pagination-custom > .swiper-pagination-bullet-active {
  color: hsl(300deg, 20%, 28%) !important;
}

/* Homepage Trending Courses: dark pink overlay, white text */
[data-sr="upcoming-movies"] .flq-card-movie .card-img-wrap .flq-image::before {
  background-image: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(80, 30, 50, 0.4) 50%, rgba(100, 35, 65, 0.85) 75%, rgba(110, 40, 75, 0.95) 100%);
}
[data-sr="upcoming-movies"] .flq-card-movie .card-title,
[data-sr="upcoming-movies"] .flq-card-movie .card-description,
[data-sr="upcoming-movies"] .flq-card-movie .card-description > span {
  color: #fff !important;
}
[data-sr="upcoming-movies"] .flq-card-movie .card-title + .card-description {
  margin-top: 0.35em;
}

/* Courses page: dark pink overlay, white text */
.flq-isotope-grid[data-sr="movies-item"] .flq-card-movie .card-img-wrap .flq-image::before {
  background-image: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(80, 30, 50, 0.4) 50%, rgba(100, 35, 65, 0.85) 75%, rgba(110, 40, 75, 0.95) 100%);
}
.flq-isotope-grid[data-sr="movies-item"] .flq-card-movie .card-title,
.flq-isotope-grid[data-sr="movies-item"] .flq-card-movie .card-description,
.flq-isotope-grid[data-sr="movies-item"] .flq-card-movie .card-description > span {
  color: #fff !important;
}
.flq-isotope-grid[data-sr="movies-item"] .flq-card-movie .card-title + .card-description {
  margin-top: 0.35em;
}

/* Facebook Live page: no overlay, white title/description, closer together */
.flq-isotope-grid[data-sr="videos-item"] .flq-card-movie .card-img-wrap .flq-image::before {
  background-image: none;
  background-color: transparent;
}
.flq-isotope-grid[data-sr="videos-item"] .flq-card-movie .card-title,
.flq-isotope-grid[data-sr="videos-item"] .flq-card-movie .card-description,
.flq-isotope-grid[data-sr="videos-item"] .flq-card-movie .card-description > span {
  color: #fff !important;
}
.flq-isotope-grid[data-sr="videos-item"] .flq-card-movie .card-title + .card-description {
  margin-top: 0.35em;
}

/* Navbar: gradient bar, white text */
.flq-navbar-top {
  background-image: var(--ac-gradient) !important;
  background-color: var(--ac-fuchsia) !important;
}
.flq-navbar-top .flq-navbar-container {
  background-image: var(--ac-gradient);
  background-color: var(--ac-fuchsia);
  border-radius: var(--flq-border-radius-lg);
}
.flq-navbar-top::before {
  background: var(--ac-gradient) !important;
  opacity: 1 !important;
}
.flq-navbar-top .flq-navbar-brand,
.flq-navbar-top .nav-link,
.flq-navbar-top .nav-link .nav-link-name,
.flq-navbar-top .btn-link,
.flq-navbar-top a {
  color: #fff !important;
}
.flq-navbar-top .nav-link:hover,
.flq-navbar-top .nav-link:hover .nav-link-name,
.flq-navbar-top .nav-link.active .nav-link-name,
.flq-navbar-top .btn-link:hover {
  color: rgba(255,255,255,0.9) !important;
}
.flq-navbar-top .flq-navbar-top-toggle span,
.flq-navbar-top [data-bs-toggle="offcanvas"] span {
  background-color: #fff !important;
}

/* Login/Sign Up on navbar: white outline on gradient */
.flq-navbar-top .btn-outline.btn-white {
  border-color: rgba(255,255,255,0.9);
  color: #fff;
  background: transparent;
}
.flq-navbar-top .btn-outline.btn-white:hover {
  background: rgba(255,255,255,0.2);
  color: #fff;
  border-color: #fff;
}

/* Preloader: gradient, no black, white text */
.flq-preloader,
.flq-preloader::before,
.flq-preloader::after {
  background: var(--ac-gradient) !important;
  background-color: var(--ac-fuchsia) !important;
}
.flq-preloader-title,
.flq-preloader-title > span {
  color: #fff !important;
}
.flq-preloader-bg {
  background: var(--ac-gradient) !important;
}

/* Preloader must fully hide after animation – override gradient when hiding */
.flq-preloader.flq-preloader-hide,
.flq-preloader.flq-preloader-hide::before,
.flq-preloader.flq-preloader-hide::after {
  background: none !important;
  background-color: transparent !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  transition: opacity 0.5s ease, visibility 0.5s ease !important;
}
.flq-preloader-bg.flq-preloader-bg-hide {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  transition: opacity 0.5s ease, visibility 0.5s ease;
}

/* Primary CTA buttons: gradient (Login to Watch, Watch Now, etc.) */
/* Use theme hover variables so the framework’s ::after hover uses our colors, not white */
.btn-icon-sm:not(.btn-disabled):not(.btn-outline),
a.btn-icon-sm[href] {
  --flq-btn-hover--color: 0deg, 0%, 100%;
  --flq-btn-hover--background-color: 300deg, 45%, 48%;
  background: var(--ac-gradient) !important;
  border-color: transparent !important;
  color: #fff !important;
}
.btn-icon-sm:not(.btn-disabled):not(.btn-outline):hover,
a.btn-icon-sm[href]:hover {
  background: var(--ac-gradient-reverse) !important;
  color: #fff !important;
}
/* Keep text/icon white on hover (overrides framework hover color) */
.btn-icon-sm:not(.btn-disabled):not(.btn-outline):hover .btn-name,
.btn-icon-sm:not(.btn-disabled):not(.btn-outline):hover svg,
a.btn-icon-sm[href]:hover .btn-name,
a.btn-icon-sm[href]:hover svg {
  color: #fff !important;
  fill: currentColor;
}
.btn-brand-hover {
  background: var(--ac-gradient) !important;
  border-color: transparent !important;
  color: #fff !important;
}

/* No black: buttons use gradient (#e6aa9d, #be5d6c) or light fills */
.btn-dark, .btn-black,
.btn-dark.btn-active, .btn-black.btn-active,
.btn-dark-hover, .btn-black-hover {
  background: var(--ac-gradient) !important;
  background-color: var(--ac-fuchsia) !important;
  border-color: transparent !important;
  color: #fff !important;
}
.btn-dark:hover, .btn-black:hover,
.btn-dark.btn-active:hover, .btn-black.btn-active:hover {
  background: var(--ac-gradient-reverse) !important;
  color: hsl(300deg, 15%, 25%) !important;
  border-color: transparent !important;
}
/* No red: alerts/buttons use brand gradient */
.alert-danger, .btn-danger {
  background: var(--ac-gradient);
  border-color: transparent;
  color: #fff;
}
.text-danger { color: var(--ac-fuchsia) !important; }
.bg-danger { background-color: var(--ac-fuchsia) !important; }
/* Outline primary buttons: use brand colors, no blue/red */
.btn-outline-primary {
  border-color: var(--ac-fuchsia);
  color: var(--ac-fuchsia);
  background: transparent;
}
.btn-outline-primary:hover {
  background: var(--ac-gradient);
  border-color: transparent;
  color: #fff;
}
.btn-outline-secondary {
  border-color: var(--ac-peach);
  color: var(--ac-fuchsia);
}
/* Card pricing / Get Started buttons */
.btn-outline.btn-brand-hover,
.btn-block.btn-outline.btn-brand-hover {
  border-color: var(--ac-gold);
  color: var(--ac-fuchsia);
}
.btn-outline.btn-brand-hover:hover {
  background: var(--ac-gradient);
  border-color: transparent;
  color: #fff;
}
/* Buttons that use "black" or title color: force warm dark rose (not black) */
.btn-white:not(.btn-outline):not(.btn-glass) {
  color: hsl(300deg, 15%, 25%) !important;
}
.content-wrap .btn-link {
  color: hsl(300deg, 20%, 28%) !important;
}

/* Content wrap: white bg, warm text (not black) */
.content-wrap {
  background-color: var(--ac-white);
  color: hsl(300deg, 10%, 38%);
}
.content-wrap h1, .content-wrap h2, .content-wrap h3, .content-wrap h4, .content-wrap h5, .content-wrap h6 {
  color: hsl(300deg, 20%, 28%);
}
.content-wrap .card-title,
.content-wrap .flq-card-movie .card-title,
.content-wrap .flq-card-blog .card-title {
  color: hsl(300deg, 20%, 28%);
}
.content-wrap .flq-meta,
.content-wrap .breadcrumb,
.content-wrap .breadcrumb-item,
.content-wrap .breadcrumb-item a {
  color: hsl(300deg, 8%, 48%);
}
/* Course cards: year and category in light gray so title stands out */
.content-wrap .flq-card-blog .card-year,
.content-wrap .flq-card-blog .card-category,
.content-wrap .flq-card-movie .card-year,
.content-wrap .flq-card-movie .card-category,
.flq-card-blog .flq-meta .card-year,
.flq-card-blog .flq-meta .card-category {
  color: hsl(0deg, 0%, 58%) !important;
}
.flq-card-blog .flq-meta .card-year:hover,
.flq-card-blog .flq-meta .card-category:hover {
  color: hsl(0deg, 0%, 42%) !important;
}
.content-wrap .breadcrumb-item.active {
  color: hsl(300deg, 10%, 38%);
}
.content-wrap .card-body p,
.content-wrap p {
  color: hsl(300deg, 10%, 38%);
}
/* Course movie cards: description in light gray like year/category on blog cards */
.content-wrap .flq-card-movie .card-description,
.content-wrap .flq-card-movie .card-description > span {
  color: hsl(0deg, 0%, 58%);
}
.content-wrap a:not(.btn):not(.nav-link) {
  color: var(--ac-fuchsia);
}

/* Facebook Live nav: Previous/Next buttons white text */
nav[aria-label="Facebook Live navigation"] .btn-outline-primary,
nav[aria-label="Facebook Live navigation"] .btn-outline-secondary {
  color: #fff !important;
  border-color: rgba(255,255,255,0.8) !important;
}
nav[aria-label="Facebook Live navigation"] .btn-outline-primary:hover,
nav[aria-label="Facebook Live navigation"] .btn-outline-secondary:hover:not(.disabled) {
  color: hsl(300deg, 20%, 28%) !important;
  background-color: #fff !important;
  border-color: #fff !important;
}
nav[aria-label="Facebook Live navigation"] .btn-outline-secondary.disabled {
  color: rgba(255,255,255,0.6) !important;
  border-color: rgba(255,255,255,0.4) !important;
}

/* Pagination: white text */
.content-wrap .pagination .page-link {
  color: #fff !important;
}
.content-wrap .pagination .page-link:hover {
  color: rgba(255,255,255,0.9) !important;
}
.content-wrap .pagination .page-item.active .page-link {
  color: #fff !important;
}
.content-wrap .pagination .page-item.disabled .page-link {
  color: rgba(255,255,255,0.6) !important;
}
.content-wrap a:not(.btn):not(.nav-link):hover {
  color: var(--ac-turquoise);
}
.flq-footer.flq-background {
  background-image: none;
  background-color: hsl(var(--flq-color-background-200));
}
.flq-footer .container {
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}
.flq-footer p {
  margin-bottom: 0;
  font-size: 0.9rem;
}
.flq-footer .flq-background-overlay {
  background-color: transparent !important;
}
.flq-footer,
.flq-footer a {
  color: #5c5c5c;
}
.flq-footer a:hover {
  color: var(--ac-fuchsia);
}

/* Scroll-top button: gradient color, no black */
.flq-scroll-top-button,
.flq-scroll-progress-circle circle {
  color: var(--ac-fuchsia) !important;
  stroke: var(--ac-fuchsia) !important;
}
.flq-scroll-top-wrapper .flq-scroll-top-button:hover {
  color: var(--ac-turquoise) !important;
}

/* Mobile menu: gradient background, white text */
.flq-navbar-mobile,
#flq_navbar_mobile {
  background: var(--ac-gradient) !important;
  background-color: var(--ac-fuchsia) !important;
}
.flq-navbar-mobile .nav-link,
.flq-navbar-mobile .nav-link-name,
.flq-navbar-mobile .flq-fancybox-brand {
  color: #fff !important;
}
.flq-navbar-mobile .nav-link:hover,
.flq-navbar-mobile .nav-link:hover .nav-link-name,
.flq-navbar-mobile .flq-fancybox-brand:hover {
  color: rgba(255,255,255,0.9) !important;
}
.flq-navbar-mobile .flq-fancybox-head,
.flq-navbar-mobile .flq-fancybox-close,
.flq-navbar-mobile .btn-link {
  color: #fff !important;
}
.flq-navbar-mobile .flq-fancybox-close:hover,
.flq-navbar-mobile .btn-link:hover {
  color: rgba(255,255,255,0.85) !important;
}
/* Close X: only the two bars (::before, ::after) are white; span stays transparent so the X is visible */
.flq-navbar-mobile .flq-fancybox-close > span {
  background-color: transparent !important;
}
.flq-navbar-mobile .flq-fancybox-close > span::before,
.flq-navbar-mobile .flq-fancybox-close > span::after {
  background-color: #fff !important;
  width: 28px !important;
  height: 2px !important;
  content: "" !important;
  display: block !important;
  clip-path: inset(0 3px 0 3px round 4px) !important;
}
.flq-navbar-mobile .flq-fancybox-close > span::before {
  transform: rotate(45deg);
  margin-bottom: -1px;
}
.flq-navbar-mobile .flq-fancybox-close > span::after {
  transform: rotate(-45deg);
  margin-top: -1px;
}
/* Search is hidden in mobile menu; login/account links shown instead */
.flq-navbar-mobile .flq-widget-search {
  display: none !important;
}
.flq-navbar-mobile .flq-mobile-menu-account-divider {
  border-top: 1px solid rgba(255,255,255,0.25);
}
.flq-navbar-mobile .flq-widget-title,
.flq-navbar-mobile .flq-widget-title span {
  color: #fff !important;
}
.flq-navbar-mobile .form-control {
  background: rgba(255,255,255,0.2);
  border-color: rgba(255,255,255,0.5);
  color: #fff;
}
.flq-navbar-mobile .form-control::placeholder {
  color: rgba(255,255,255,0.7);
}
.flq-navbar-mobile .form-control:focus {
  background: rgba(255,255,255,0.25);
  border-color: rgba(255,255,255,0.8);
  color: #fff;
}
.flq-dropdown .dropdown-menu,
.flq-dropdown-nav .dropdown-menu {
  background: #fff !important;
  border: 1px solid #eee;
}

/* User profile dropdown: match website gradient, styled links */
.flq-navbar-top .flq-dropdown-nav .dropdown-menu {
  background: linear-gradient(180deg, #e6aa9d 0%, #be5d6c 100%) !important;
  border: none !important;
  border-radius: var(--flq-border-radius);
  box-shadow: 0 4px 16px rgba(0,0,0,0.15);
  padding: 0.5rem !important;
  overflow: hidden;
}
/* Keep nav items within dropdown - override negative margins that cause overflow */
.flq-navbar-top .flq-dropdown-nav .dropdown-menu > .nav,
.flq-navbar-top .flq-dropdown-nav .dropdown-menu > ul.nav {
  margin: 0 !important;
}
/* Override framework's ::before dark overlay so our gradient shows */
.flq-navbar-top .flq-dropdown-nav .dropdown-menu::before {
  background: linear-gradient(180deg, #e6aa9d 0%, #be5d6c 100%) !important;
  opacity: 1 !important;
}
.flq-navbar-top .flq-dropdown-nav .dropdown-menu .nav-item {
  margin: 0;
}
.flq-navbar-top .flq-dropdown-nav .dropdown-menu .nav-link {
  color: #fff !important;
  padding: 0.6rem 1rem !important;
  border-radius: 6px;
  transition: background 0.2s ease, color 0.2s ease;
}
/* Hover: white background, dark text for good contrast */
.flq-navbar-top .flq-dropdown-nav .dropdown-menu .nav-link:hover,
.flq-navbar-top .flq-dropdown-nav .dropdown-menu .nav-link:focus {
  color: hsl(300deg, 20%, 28%) !important;
  background: #fff !important;
}
.flq-navbar-top .flq-dropdown-nav .dropdown-menu .nav-link-name {
  color: inherit !important;
}
/* Hide the framework's nav dot bullet on profile dropdown */
.flq-navbar-top .flq-dropdown-nav .dropdown-menu .nav-link .nav-link-name::before {
  display: none !important;
}

/* ------------------------------------------------------------------
  Login page
------------------------------------------------------------------- */
.login-page {
  color: hsla(var(--flq-color-text));
}

.login-form-panel {
  padding: 2.5rem 2rem;
  background-color: hsla(var(--flq-color-background-100));
  border: 1px solid hsla(var(--flq-color-border));
  border-radius: var(--flq-border-radius-xl);
}

.login-form-title {
  color: hsla(var(--flq-color-title));
  font-weight: var(--flq-body--font-weight-bold);
  text-align: center;
}

.login-form-meta {
  color: hsla(var(--flq-color-meta));
  font-size: var(--flq-small--font-size);
}
.login-form-meta:hover {
  color: hsla(var(--flq-color-brand));
}

.login-form-footer .btn-link {
  color: hsla(var(--flq-color-meta));
}
.login-form-footer .btn-link:hover {
  color: hsla(var(--flq-color-brand));
}

.login-form-divider {
  color: hsla(var(--flq-color-meta));
  font-size: var(--flq-small--font-size);
}

/* Login form inputs: use theme default (background-300) - no translucent */
.login-form-panel .form-control {
  color: hsla(var(--flq-form--color));
  background-color: hsla(var(--flq-color-background-300));
  border-color: hsla(var(--flq-form--border-color));
}
.login-form-panel .form-control::placeholder {
  color: hsla(var(--flq-form__placeholder--color));
}
.login-form-panel .form-control:focus {
  color: hsla(var(--flq-form-focus--color));
  background-color: hsla(var(--flq-form-focus--background-color));
  border-color: hsla(var(--flq-form-focus--border-color));
}

.login-form-panel .form-check-label {
  color: hsla(var(--flq-color-text));
}
.login-form-panel .form-check-input {
  background-color: hsla(var(--flq-form-check--background-color));
  border-color: hsla(var(--flq-form-check--border-color));
}

/* Tabs */
.login-page-tabs {
  border-bottom: 1px solid hsla(var(--flq-color-meta), 0.25);
  gap: 0.25rem;
}
.login-page-tabs .nav-link {
  color: hsla(var(--flq-color-meta));
  border: none;
  border-radius: var(--flq-border-radius);
  padding: 0.5rem 1rem;
  background: transparent;
  position: relative;
  margin-bottom: -1px;
}
.login-page-tabs .nav-link:hover {
  color: hsla(var(--flq-color-title));
}
.login-page-tabs .nav-link.active {
  color: hsla(var(--flq-color-brand));
  background: transparent;
  border: none;
  font-weight: var(--flq-body--font-weight-bold, 600);
}
.login-page-tabs .nav-link.active::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 3px;
  background: hsla(var(--flq-color-brand));
  border-radius: 3px 3px 0 0;
}

/* ------------------------------------------------------------------
  Course Page - Module cards in hero (Watch Now button style)
------------------------------------------------------------------- */
.card.course-module-card {
  display: block;
  background: linear-gradient(90deg, #e6aa9d, #be5d6c) !important;
  border: none !important;
  border-radius: var(--flq-border-radius);
  color: #fff;
  box-shadow: 0 2px 8px rgba(0,0,0,0.12);
  overflow: visible;
}
.course-module-card .card-body {
  color: #fff;
}
.course-module-card strong,
.course-module-card h5 {
  color: #fff !important;
}
.course-module-card .course-module-meta {
  color: rgba(255,255,255,0.9);
}
.course-module-card .course-module-badge {
  background: #fff !important;
  color: #be5d6c !important;
}
.course-module-card .course-module-badge-alt {
  background: #fff !important;
  color: #be5d6c !important;
}
.course-module-card .text-success { color: rgba(255,255,255,0.95) !important; }
.course-module-card .text-muted { color: rgba(255,255,255,0.85) !important; }
.course-module-card .text-danger { color: #fff !important; }
.course-module-card .btn {
  background: rgba(255,255,255,0.2) !important;
  border-color: rgba(255,255,255,0.6);
  color: #fff !important;
}
.course-module-card .btn:hover {
  background: rgba(255,255,255,0.35) !important;
  border-color: #fff;
  color: #fff !important;
}
.card.course-module-card-empty {
  background: linear-gradient(90deg, rgba(230,170,157,0.7), rgba(190,93,108,0.7)) !important;
}

/* ------------------------------------------------------------------
  Video Player Page
------------------------------------------------------------------- */
/* Top spacing for video page to prevent content from being hidden under header */
.content-wrap .container.pt-6 {
  padding-top:6rem !important;
}

/* Video player card spacing */
.video-player-card .card-body:not(:first-child) {
  padding-top: 1.5rem;
}

/* Video page: transparent content over flq-background (matches course page background) */
.video-page-content {
  background-color: transparent !important;
  position: relative;
  z-index: 1;
}
.video-page-content .btn-link {
  color: rgba(255,255,255,0.95) !important;
}
.video-page-content .btn-link:hover {
  color: #fff !important;
}

/* Playlist Container - New Design */
.video-playlist-container {
  background: hsla(var(--flq-color-background-100));
  border: 1px solid hsla(var(--flq-color-border));
  border-radius: var(--flq-border-radius-lg);
  box-shadow: 0 2px 8px hsla(var(--flq-color-dark), 0.12);
  display: flex;
  flex-direction: column;
  max-height: calc(100vh - 200px);
  overflow: hidden;
}

/* Playlist Header */
.video-playlist-header {
  padding: 1.25rem 1.5rem;
  border-bottom: 1px solid hsla(var(--flq-color-border));
  background: hsla(var(--flq-color-background-200));
  flex-shrink: 0;
}

.video-playlist-title {
  margin: 0;
  font-size: 1.1rem;
  font-weight: 600;
  color: hsla(var(--flq-color-title));
  display: flex;
  align-items: center;
}

.video-playlist-title svg {
  opacity: 0.7;
}

/* Scrollable Playlist Content */
.video-playlist-scroll {
  overflow-y: auto;
  overflow-x: hidden;
  flex: 1;
  padding: 0.5rem;
}

.video-playlist-scroll::-webkit-scrollbar {
  width: 6px;
}

.video-playlist-scroll::-webkit-scrollbar-track {
  background: hsla(var(--flq-color-background-200));
  border-radius: 3px;
}

.video-playlist-scroll::-webkit-scrollbar-thumb {
  background: hsla(var(--flq-color-border));
  border-radius: 3px;
}

.video-playlist-scroll::-webkit-scrollbar-thumb:hover {
  background: hsla(var(--flq-color-meta), 0.5);
}

/* Empty State */
.video-playlist-empty {
  padding: 3rem 1.5rem;
  text-align: center;
}

/* Playlist Items - Modern Card Design */
.video-playlist-item {
  display: block;
  padding: 0;
  margin-bottom: 0.5rem;
  text-decoration: none;
  color: hsla(var(--flq-color-text));
  border-radius: var(--flq-border-radius);
  transition: all 0.2s ease;
  background: transparent;
}

.video-playlist-item:last-child {
  margin-bottom: 0;
}

.video-playlist-item-content {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.875rem 1rem;
  border-radius: var(--flq-border-radius);
  background: hsla(var(--flq-color-background-200));
  border: 1px solid transparent;
  transition: all 0.2s ease;
}

.video-playlist-item:hover .video-playlist-item-content {
  background: hsla(var(--flq-color-background-300));
  border-color: hsla(var(--flq-color-border));
  transform: translateX(2px);
}

/* Playlist item thumbnail */
.video-playlist-thumb {
  flex-shrink: 0;
  width: 72px;
  height: 42px;
  border-radius: var(--flq-border-radius);
  overflow: hidden;
  background: hsla(var(--flq-color-background-300));
  border: 1px solid hsla(var(--flq-color-border));
}

.video-playlist-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Playlist number badge */
.video-playlist-number {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: hsla(var(--flq-color-background-300));
  border: 1px solid hsla(var(--flq-color-border));
  border-radius: 50%;
  font-size: 0.85rem;
  font-weight: 600;
  color: hsla(var(--flq-color-meta));
  transition: all 0.2s ease;
}

.video-playlist-item:hover .video-playlist-number {
  background: hsla(var(--flq-color-brand), 0.1);
  border-color: hsla(var(--flq-color-brand), 0.3);
  color: hsla(var(--flq-color-brand));
}

/* Active State */
.video-playlist-item.video-playlist-active .video-playlist-item-content {
  background: hsla(var(--flq-color-brand), 0.12);
  border-color: hsla(var(--flq-color-brand), 0.4);
  box-shadow: 0 2px 4px hsla(var(--flq-color-brand), 0.15);
}

.video-playlist-item.video-playlist-active .video-playlist-number {
  background: hsla(var(--flq-color-brand));
  border-color: hsla(var(--flq-color-brand));
  color: #fff;
}

.video-playlist-item.video-playlist-active .video-playlist-item-title {
  color: hsla(var(--flq-color-title));
  font-weight: 600;
}

/* Item Text */
.video-playlist-item-text {
  flex: 1;
  min-width: 0;
}

.video-playlist-item-title {
  font-size: 0.95rem;
  line-height: 1.4;
  color: hsla(var(--flq-color-text));
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  transition: color 0.2s ease;
}

.video-playlist-item:hover .video-playlist-item-title {
  color: hsla(var(--flq-color-title));
}

/* Checkmark Icon */
.video-playlist-check {
  flex-shrink: 0;
  color: hsla(var(--flq-color-success, 120 60% 50%));
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Playing Indicator */
.video-playlist-playing {
  flex-shrink: 0;
  color: hsla(var(--flq-color-brand));
  display: flex;
  align-items: center;
  justify-content: center;
  animation: pulse 2s ease-in-out infinite;
}

/* Locked playlist item */
.video-playlist-item.video-playlist-locked {
  opacity: 0.85;
}

.video-playlist-item.video-playlist-locked:hover .video-playlist-item-content {
  transform: none;
  border-color: transparent;
}

.video-playlist-thumb {
  position: relative;
}

.video-playlist-lock-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255,255,255,0.9);
}

.video-playlist-lock-icon {
  flex-shrink: 0;
  color: hsla(var(--flq-color-meta), 0.7);
  display: flex;
  align-items: center;
  justify-content: center;
}

@keyframes pulse {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.6;
  }
}

/* ------------------------------------------------------------------
  Facebook Live page – thumbnails, play icon, duration
------------------------------------------------------------------- */
.facebook-live-thumb-wrap {
  position: relative;
  display: block;
}

.facebook-live-play-icon {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 4;
  pointer-events: none;
  color: #fff;
  filter: drop-shadow(0 2px 8px rgba(94,94,94,0.5));
  animation: facebook-live-play-blink 2.5s ease-in-out infinite;
}

.facebook-live-play-icon svg {
  display: block;
}

@keyframes facebook-live-play-blink {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.4;
  }
}

.facebook-live-duration {
  position: absolute;
  bottom: 8px;
  right: 8px;
  background: rgba(94,94,94,0.85);
  color: #fff;
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 600;
  z-index: 5;
}

/* Account pages: Profile & Settings */
.account-form-panel {
  padding: 2.5rem 2rem;
  background-color: hsla(var(--flq-color-background-100));
  border: 1px solid hsla(var(--flq-color-border));
  border-radius: var(--flq-border-radius-xl);
}

.account-info-list {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.account-info-row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  padding: 1rem 0;
  border-bottom: 1px solid hsla(var(--flq-color-border), 0.6);
}

.account-info-row:last-child {
  border-bottom: none;
}

.account-info-label {
  flex: 0 0 140px;
  font-size: 0.875rem;
  color: hsla(var(--flq-color-meta));
}

.account-info-value {
  flex: 1;
  min-width: 0;
  font-weight: 500;
}

.account-form-group .form-label {
  margin-bottom: 0.5rem;
  font-weight: 500;
}

.account-form-panel .form-control,
.account-form-panel .form-control:focus {
  color: hsla(var(--flq-form--color));
  background-color: hsla(var(--flq-color-background-300));
  border-color: hsla(var(--flq-form--border-color));
}

.account-form-panel .form-control:focus {
  background-color: hsla(var(--flq-form-focus--background-color));
  border-color: hsla(var(--flq-form-focus--border-color));
}

.account-avatar-upload {
  flex-shrink: 0;
}

.account-avatar-label {
  display: block;
  cursor: pointer;
  width: 100px;
  height: 100px;
}

.account-avatar-img-wrap {
  display: block;
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  overflow: hidden;
  border: 3px solid hsla(var(--flq-color-border));
}

.account-avatar-img-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.account-avatar-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.5);
  color: #fff;
  opacity: 0;
  transition: opacity 0.2s ease;
}

.account-avatar-label:hover .account-avatar-overlay {
  opacity: 1;
}

.account-avatar-overlay svg {
  width: 28px;
  height: 28px;
}

/* Account page nav (mobile - when sidebar hidden) */
.account-page-nav {
  display: flex;
  gap: 1rem;
  justify-content: center;
  flex-wrap: wrap;
}

.account-page-nav-link {
  color: rgba(255, 255, 255, 0.9);
  text-decoration: none;
  font-size: 0.9rem;
  padding: 0.25rem 0.5rem;
  border-radius: 4px;
  transition: color 0.2s, background 0.2s;
}

.account-page-nav-link:hover {
  color: #fff;
  background: rgba(255, 255, 255, 0.2);
}

/* Profile / Settings: hide sidebar and add top space on mobile */
@media (max-width: 991.98px) {
  .account-sidebar {
    display: none !important;
  }
  .account-page-container {
    padding-top: 2rem !important;
  }
}

/* Exam page: Cancel button - white text, different color on hover */
.btn-exam-cancel {
  background: #5c5c5c;
  border-color: #5c5c5c;
  color: #fff !important;
  transition: color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease;
}
.btn-exam-cancel:hover {
  color: #e6aa9d !important;
  background-color: #4a4a4a;
  border-color: #4a4a4a;
}

/* Exam page: Submit button - different text color on hover */
.btn-exam-submit {
  transition: color 0.2s ease, filter 0.2s ease;
}
.btn-exam-submit:hover {
  color: #2d2d2d !important;
  filter: brightness(1.1);
}

/* Download Certificate button - dark text on hover for contrast */
.btn-certificate-download:hover {
  color: #2d2d2d !important;
  filter: brightness(1.1);
}