/* FindClass buyer frontend — functional helpers only.
   All visual design comes from the Educrat template (main.css / vendors.css). */

/* Logo sizing for the transparent FindClass marks */
.fc-logo {
  height: 42px;
  width: auto;
  display: block;
}

.fc-logo--footer {
  filter: none;
}

/* Fit real cover images to Educrat component slots */
.coursesCard__image img {
  aspect-ratio: 16 / 10;
  object-fit: cover;
}

.categoryCard__image .bg-image {
  background-size: cover;
  background-position: center;
}

/* Educrat checkbox tick colour */
.form-checkbox__icon::before {
  color: #fff;
}

/* Inner pages clear the fixed -type-1 header; the home hero (-type-5) overlays it. */
.content-wrapper.-inner-page {
  padding-top: 63px;
}

/* Shared buyer flash message. Each page places it in its own content context
   so the notice aligns with the relevant card without shifting unrelated UI. */
.fc-flash {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 16px 18px;
  border: 1px solid #ccefe0;
  border-left: 4px solid #00b67a;
  border-radius: 10px;
  background: #f2fbf7;
  color: #17795a;
  font-size: 15px;
  line-height: 1.5;
}

.fc-flash__icon {
  flex: 0 0 auto;
  margin-top: 3px;
  color: #00a66b;
}

/* Home (-type-5) header: the inline menu's content stretched to the full row
   width, pushing the Log In / Sign Up actions off the right edge. Let the menu
   flex and size to its content so the right-side buttons stay on screen. */
@media (min-width: 1200px) {
  .header.-type-5 .header-menu {
    flex: 1 1 auto;
    min-width: 0;
  }

  .header.-type-5 .header-menu .header-menu__content {
    width: auto;
  }
}

/* Show the inline nav (not the mobile drawer) from 992px up. The Educrat template
   switches to the hamburger drawer at <=1199px, which is too early for FindClass's
   short nav — laptops got the mobile menu. Below 992px the drawer + hamburger take
   over as normal. (FindClass's nav is flat, so no dropdown handling is needed.) */
@media (min-width: 992px) and (max-width: 1199px) {
  .header .header-menu {
    position: relative !important;
    flex: 1 1 auto;
    min-width: 0;
    width: auto;
    max-width: none;
    height: auto;
    opacity: 1;
    pointer-events: auto;
  }

  .header .header-menu .header-menu__content {
    flex-direction: row;
    width: auto;
    height: auto;
    transform: none;
  }

  .header .header-menu .menu {
    position: relative;
    height: auto;
    padding: 0;
    overflow: visible;
  }

  .header .header-menu .menu ul {
    pointer-events: auto;
  }

  .header .header-menu .menu__nav {
    flex-direction: row;
  }

  .header .header-menu .menu__nav a {
    height: auto;
    padding: 7px 12px;
    color: #fff !important;
  }

  .header .header-menu .menu__nav > li {
    overflow: visible;
  }

  .header .header-menu .menu__nav > li:hover > a {
    color: var(--color-green-1) !important;
    background-color: rgba(255, 255, 255, 0.15);
  }

  /* Drawer-only chrome (and the hamburger) stay hidden in this range. */
  .header .header-menu .mobile-bg,
  .header .header-menu .mobile-footer,
  .header .header-menu-bg,
  .header .header-menu-close,
  .header .header-menu-open {
    display: none !important;
  }
}

/* Mobile nav drawer: the active list is forced to overflow-y: scroll, which shows
   an always-on scrollbar with up/down arrow buttons even when nothing overflows.
   Only scroll when needed, and render a thin thumb without the arrow buttons. */
.header .header-menu.-is-el-visible .menu__nav.-is-active {
  overflow-y: auto;
}

.header .header-menu .menu__nav::-webkit-scrollbar {
  width: 5px;
}

.header .header-menu .menu__nav::-webkit-scrollbar-button {
  display: none;
}

.header .header-menu .menu__nav::-webkit-scrollbar-thumb {
  background-color: rgba(0, 0, 0, 0.2);
  border-radius: 10px;
}

/* Keep buyer form controls consistent, including Livewire panels rendered as
   divs (which Educrat's form.contact-form selectors do not cover). */
.fc-buyer .fc-form-control,
.fc-buyer .contact-form select,
.fc-buyer .contact-form textarea,
.fc-buyer .contact-form input:not([type]),
.fc-buyer .contact-form input[type="text"],
.fc-buyer .contact-form input[type="search"],
.fc-buyer .contact-form input[type="email"],
.fc-buyer .contact-form input[type="password"],
.fc-buyer .contact-form input[type="number"],
.fc-buyer .contact-form input[type="date"],
.fc-buyer .contact-form input[type="tel"],
.fc-buyer .contact-form input[type="url"] {
  width: 100%;
  min-height: 52px;
  background-color: #fff;
  border: 1px solid #dddddd;
  border-radius: 8px;
  color: var(--color-dark-1);
  font-size: 15px;
  line-height: 1.5;
  padding: 15px 22px;
  outline: none;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.fc-buyer .contact-form textarea {
  min-height: 120px;
  resize: vertical;
}

.fc-buyer .contact-form select {
  cursor: pointer;
}

.fc-buyer .contact-form input::placeholder,
.fc-buyer .contact-form textarea::placeholder {
  color: var(--color-light-1);
  opacity: 1;
}

.fc-buyer .fc-form-control:focus,
.fc-buyer .contact-form select:focus,
.fc-buyer .contact-form textarea:focus,
.fc-buyer .contact-form input:not([type]):focus,
.fc-buyer .contact-form input[type="text"]:focus,
.fc-buyer .contact-form input[type="search"]:focus,
.fc-buyer .contact-form input[type="email"]:focus,
.fc-buyer .contact-form input[type="password"]:focus,
.fc-buyer .contact-form input[type="number"]:focus,
.fc-buyer .contact-form input[type="date"]:focus,
.fc-buyer .contact-form input[type="tel"]:focus,
.fc-buyer .contact-form input[type="url"]:focus {
  border-color: var(--color-purple-1);
  box-shadow: 0 0 0 3px rgba(100, 64, 251, 0.12);
}

/* Native date inputs: keep value/placeholder aligned with text inputs and
   give the calendar picker a subtle, clickable look instead of the raw default. */
.fc-buyer .contact-form input[type="date"] {
  /* Compact horizontal padding + font so the From/To pair fits side by side
     in the narrow booking-card sidebar (down to the 992px breakpoint). */
  padding-left: 10px;
  padding-right: 8px;
  font-size: 13px;
}

/* Preferred dates: From/To side by side. A 2-col grid with a small gap keeps the
   inputs as wide as possible (the Bootstrap row gutter wasted too much width for
   native date inputs in the narrow sidebar). */
.fc-date-range {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.fc-buyer .contact-form input[type="date"]::-webkit-calendar-picker-indicator {
  cursor: pointer;
  opacity: 0.5;
}

.fc-buyer .contact-form input[type="date"]:hover::-webkit-calendar-picker-indicator {
  opacity: 0.85;
}

/* Course detail booking card.
   The Educrat template anchors this card with ScrollMagic (.js-pin-content) plus
   `position: absolute; top: 0; right: 0`, and clips its body to 57vh with an inner
   scrollbar (.scroll-bar-1). In this layout the card lives in its own grid column,
   so the absolute rule pinned it to the page's top-right corner and the inner scroll
   hid the lower half. We drop the pin and inner scroll so the card sits naturally in
   its column, beside the content, and stays fully visible. */
.courses-single-info {
  position: relative;
  top: auto;
  right: auto;
  width: auto;
}

.courses-single-info__content {
  height: auto;
  overflow-y: visible;
}

/* ---- Available schedules cards ---- */
.fc-schedule-card {
  gap: 12px;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.fc-schedule-card:hover {
  border-color: var(--color-purple-1) !important;
  box-shadow: 0 8px 22px rgba(100, 64, 251, 0.1);
}

/* Calendar-style date tile (start date) */
.fc-date-tile {
  flex-shrink: 0;
  width: 52px;
  padding: 8px 0;
  border-radius: 10px;
  background-color: var(--color-purple-1);
  color: #fff;
  line-height: 1;
}

.fc-date-tile__day {
  font-size: 20px;
  font-weight: 700;
}

.fc-date-tile__mon {
  margin-top: 4px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  opacity: 0.9;
}

/* Status pills — pale tint + matching text + leading dot */
.fc-status-badge {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 200px;
  font-size: 12px;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
}

.fc-status-badge::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background-color: currentColor;
}

.fc-status-badge--open {
  background-color: var(--color-green-6);
  color: var(--color-green-5);
}

.fc-status-badge--tentative {
  background-color: var(--color-yellow-2);
  color: var(--color-yellow-1);
}

.fc-status-badge--booked {
  background-color: var(--color-blue-6);
  color: var(--color-blue-3);
}

.fc-status-badge--blocked {
  background-color: var(--color-red-2);
  color: var(--color-red-3);
}

/* Compact share button — smaller than the primary "Request Quotation" CTA. */
.fc-share-btn {
  height: 36px;
  padding: 0 10px;
  font-size: 13px;
}

/* Structured quotation entries in the buyer enquiry conversation. */
.fc-quote-message {
  overflow: hidden;
  border: 1px solid #ccefe0;
  border-radius: 12px;
  background: #fff;
}

.fc-quote-message__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 18px 20px;
  background: #f2fbf7;
  border-bottom: 1px solid #dff3e9;
}

.fc-quote-message__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  margin-right: 12px;
  border-radius: 50%;
  background: #dff7eb;
  color: #00a66b;
}

.fc-quote-message__amount {
  flex: 0 0 auto;
  text-align: right;
}

.fc-quote-message__body {
  padding: 18px 20px;
}

.fc-quote-message__terms {
  margin-top: 16px;
  padding: 12px 14px;
  border-radius: 8px;
  background: #f7f8fa;
  color: var(--color-light-1);
  font-size: 13px;
}

@media (max-width: 575px) {
  .fc-quote-message__header {
    align-items: flex-start;
    flex-direction: column;
  }

  .fc-quote-message__amount {
    text-align: left;
  }
}

/* CTA button group (provider landing): a real flex gap spaces the buttons evenly
   in both desktop (side by side) and mobile (stacked). Educrat's x-gap/y-gap
   utilities apply spacing via child padding, which .button's own padding overrides
   — leaving the buttons touching. */
.fc-cta-buttons {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
}

/* Trusted providers slider: equal-height cards regardless of how many
   specialisation tags each provider has. The Swiper slides size to content by
   default; stretch them and pin the "View Profile" button to the bottom. */
.fc-providers-slider .swiper-wrapper {
  align-items: stretch;
}

.fc-providers-slider .swiper-slide {
  display: flex;
  height: auto;
}

.fc-providers-slider .teamCard.-type-2 {
  display: flex;
  flex: 1 1 auto;
  width: 100%;
}

.fc-providers-slider .teamCard.-type-2 .teamCard__content {
  flex: 1 1 auto;
}

.fc-providers-slider .teamCard.-type-2 .teamCard__button {
  margin-top: auto;
  padding-top: 20px;
}

/* ---- Trainer team cards ---- */
.fc-trainer-card {
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.fc-trainer-card:hover {
  border-color: var(--color-purple-1) !important;
  box-shadow: 0 8px 22px rgba(100, 64, 251, 0.1);
}

/* Credential tags */
.fc-cred-chip {
  display: inline-flex;
  align-items: center;
  padding: 6px 12px;
  border-radius: 200px;
  background-color: var(--color-purple-5);
  color: var(--color-purple-1);
  font-size: 12px;
  font-weight: 500;
  line-height: 1.4;
}

/* Course-card footer: keep provider + price on one row. The provider name
   truncates with an ellipsis (avatar + price stay intact) so a wider price like
   "RM 8,500.00" no longer wraps to a second line. */
.coursesCard.-type-1 .coursesCard-footer {
  flex-wrap: nowrap;
  gap: 12px;
}

.coursesCard.-type-1 .coursesCard-footer__author {
  min-width: 0;
  flex: 1 1 auto;
}

.coursesCard.-type-1 .coursesCard-footer__author img {
  flex-shrink: 0;
}

.coursesCard.-type-1 .coursesCard-footer__author div {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.coursesCard.-type-1 .coursesCard-footer__price {
  flex-shrink: 0;
}

/* Clamp course-card titles to two lines with an ellipsis so long titles don't
   break card alignment (homepage "Popular Corporate Training" + course listing).
   min-height reserves two lines so single-line titles stay aligned too. */
.fc-course-title {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
  min-height: 3em; /* two lines at line-height 1.5 */
}

/* Account dashboard shell + sidebar logout button */
.dashboard__content {
  min-height: calc(100vh - 90px);
}

.sidebar.-dashboard .sidebar__item form button {
  color: inherit;
  width: 100%;
  text-align: left;
}

/* Buyer account pages: make the dashboard information denser and easier to scan.
   The Educrat defaults are spacious marketing-page utilities; these account views
   need tighter operational spacing. */
.fc-buyer-account {
  padding-top: 24px !important;
  padding-bottom: 24px !important;
}

.fc-buyer-account h1.text-30,
.fc-buyer-account h1.text-24 {
  font-size: 22px !important;
  line-height: 1.25 !important;
}

.fc-buyer-account h2.text-17 {
  font-size: 15px !important;
}

.fc-buyer-account > .row.pb-30,
.fc-buyer-account .row.pb-30 {
  padding-bottom: 18px !important;
}

.fc-buyer-account .row.pt-30,
.fc-buyer-account .pt-30 {
  padding-top: 18px !important;
}

.fc-buyer-account > .row.pb-30:first-child,
.fc-buyer-account .row.justify-between.items-end.pb-30 {
  padding-top: 0 !important;
  padding-bottom: 18px !important;
}

.fc-buyer-account .mt-30 {
  margin-top: 18px !important;
}

.fc-buyer-account .mb-30 {
  margin-bottom: 18px !important;
}

.fc-buyer-account .mt-25 {
  margin-top: 14px !important;
}

.fc-buyer-account .mt-20 {
  margin-top: 12px !important;
}

.fc-buyer-account .mt-15 {
  margin-top: 10px !important;
}

.fc-buyer-account .row.y-gap-30 {
  margin-top: -16px;
}

.fc-buyer-account .row.y-gap-30 > * {
  padding-top: 16px;
}

.fc-buyer-account .row.y-gap-20 {
  margin-top: -12px;
}

.fc-buyer-account .row.y-gap-20 > * {
  padding-top: 12px;
}

.fc-buyer-account .rounded-16.bg-white {
  border-radius: 10px !important;
}

.fc-buyer-account .rounded-16.bg-white.px-30,
.fc-buyer-account .rounded-16.bg-white.px-40,
.fc-buyer-account .rounded-16.bg-white.sm\:px-25 {
  padding-left: 22px !important;
  padding-right: 22px !important;
}

.fc-buyer-account .rounded-16.bg-white.py-50,
.fc-buyer-account .rounded-16.bg-white.py-40,
.fc-buyer-account .rounded-16.bg-white.py-35,
.fc-buyer-account .rounded-16.bg-white.py-30,
.fc-buyer-account .rounded-16.bg-white.py-25 {
  padding-top: 20px !important;
  padding-bottom: 20px !important;
}

.fc-buyer-account a.rounded-16.bg-white.py-35 {
  padding-top: 20px !important;
  padding-bottom: 20px !important;
}

.fc-buyer-account .pt-20 {
  padding-top: 14px !important;
}

.fc-buyer-account .px-30 {
  padding-left: 22px !important;
  padding-right: 22px !important;
}

.fc-buyer-account .py-20 {
  padding-top: 12px !important;
  padding-bottom: 12px !important;
}

.fc-buyer-account .py-15 {
  padding-top: 10px !important;
  padding-bottom: 10px !important;
}

.fc-buyer-account .py-10 {
  padding-top: 8px !important;
  padding-bottom: 8px !important;
}

.fc-buyer-account .contact-form.row.y-gap-20 {
  margin-top: -12px;
}

.fc-buyer-account .contact-form.row.y-gap-20 > * {
  padding-top: 12px;
}

.fc-buyer-account .contact-form label {
  font-size: 14px !important;
  margin-bottom: 7px !important;
}

.fc-buyer-account .contact-form input,
.fc-buyer-account .contact-form select,
.fc-buyer-account .contact-form textarea {
  min-height: 44px;
}

.fc-buyer-account .fc-quote-message__header,
.fc-buyer-account .fc-quote-message__body {
  padding: 16px 18px;
}

.fc-buyer-account-footer.py-30 {
  padding-top: 16px !important;
  padding-bottom: 16px !important;
}

.fc-buyer-account .fc-enquiry-row {
  margin-left: -10px;
  margin-right: -10px;
  padding-left: 10px;
  padding-right: 10px;
  transition: background-color 0.15s ease, box-shadow 0.15s ease;
}

.fc-buyer-account .fc-enquiry-row--highlight {
  background: #f1fbf7;
  box-shadow: inset 3px 0 0 #17c653;
}

.fc-buyer-status-pill {
  align-items: center;
  border-radius: 999px;
  display: inline-flex;
  font-size: 11px;
  font-weight: 600;
  line-height: 1.2;
  padding: 4px 9px;
  white-space: nowrap;
}

.fc-buyer-status-pill--action {
  background: #e8fff3;
  color: #0da84a;
}

.fc-chat-thread {
  background: #f6f8f5;
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  height: 520px;
  overflow-y: auto;
  padding: 16px !important;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
}

.fc-chat-row {
  display: flex;
  width: 100%;
}

.fc-chat-row--incoming {
  justify-content: flex-start;
}

.fc-chat-row--outgoing {
  justify-content: flex-end;
}

.fc-chat-bubble {
  border-radius: 16px;
  max-width: min(720px, 82%);
  padding: 12px 14px 8px;
  position: relative;
  word-break: break-word;
}

.fc-chat-bubble::after {
  border: 8px solid transparent;
  content: "";
  position: absolute;
  top: 12px;
}

.fc-chat-bubble--incoming {
  background: #fff;
  border-top-left-radius: 5px;
  box-shadow: 0 1px 3px rgba(7, 20, 55, 0.08);
}

.fc-chat-bubble--incoming::after {
  border-right-color: #fff;
  left: -15px;
}

.fc-chat-bubble--outgoing {
  background: #e8fff3;
  border-top-right-radius: 5px;
  color: #102b21;
  box-shadow: 0 1px 3px rgba(7, 20, 55, 0.06);
}

.fc-chat-bubble--outgoing::after {
  border-left-color: #e8fff3;
  right: -15px;
}

.fc-chat-bubble--quote {
  background: transparent;
  box-shadow: none;
  max-width: min(920px, 94%);
  padding: 0;
}

.fc-chat-bubble--quote::after {
  display: none;
}

.fc-chat-name {
  color: var(--color-dark-1);
  font-size: 12px;
  font-weight: 600;
  margin-bottom: 4px;
}

.fc-chat-bubble p {
  color: inherit;
  font-size: 14px;
  line-height: 1.45;
  margin: 0;
}

.fc-chat-time {
  color: var(--color-light-1);
  font-size: 11px;
  line-height: 1.3;
  margin-top: 7px;
  text-align: right;
}

.fc-chat-row--incoming .fc-chat-time {
  text-align: left;
}

.fc-chat-bubble--quote .fc-quote-message {
  border-radius: 14px;
  box-shadow: 0 2px 8px rgba(7, 20, 55, 0.08);
}

.fc-chat-bubble--quote .fc-quote-message__body p {
  color: var(--color-dark-1);
}

.fc-attachment-list {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 10px;
}

.fc-attachment-chip {
  align-items: center;
  background: rgba(255, 255, 255, 0.72);
  border: 1px solid #dfe5ee;
  border-radius: 10px;
  color: var(--color-dark-1);
  display: inline-flex;
  gap: 7px;
  max-width: 100%;
  padding: 7px 10px;
}

.fc-attachment-chip span {
  font-size: 12px;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.fc-attachment-chip small {
  color: var(--color-light-1);
  font-size: 11px;
  white-space: nowrap;
}

.fc-file-selection {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 10px;
}

.fc-file-selection__chip {
  align-items: center;
  background: #fff;
  border: 1px solid #dfe5ee;
  border-radius: 999px;
  color: var(--color-dark-1);
  display: inline-flex;
  gap: 7px;
  max-width: 100%;
  padding: 6px 8px 6px 10px;
}

.fc-file-selection__chip span {
  font-size: 12px;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.fc-file-selection__chip small {
  color: var(--color-light-1);
  font-size: 11px;
  white-space: nowrap;
}

.fc-file-selection__chip button {
  align-items: center;
  background: #f1f3f7;
  border: 0;
  border-radius: 999px;
  color: var(--color-light-1);
  cursor: pointer;
  display: inline-flex;
  height: 22px;
  justify-content: center;
  width: 22px;
}

.fc-file-selection__chip button:hover {
  background: #ffe9ef;
  color: #f8285a;
}

.fc-buyer-account .fc-reply-form textarea {
  min-height: 120px;
  resize: vertical;
}

.fc-reply-actions {
  align-items: center;
  display: flex;
  flex-wrap: nowrap;
  gap: 10px;
  margin-top: 14px;
}

.fc-reply-attach-btn,
.fc-reply-send-btn {
  align-items: center;
  border-radius: 8px;
  box-sizing: border-box;
  cursor: pointer;
  display: inline-flex;
  font-size: 14px;
  font-weight: 600;
  gap: 8px;
  height: 44px;
  justify-content: center;
  line-height: 1;
  margin: 0;
  min-width: 132px;
  padding: 0 16px;
  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
  vertical-align: top;
  width: auto;
}

.fc-reply-attach-btn {
  background: #fff;
  border: 1px solid #d8deea;
  color: var(--color-dark-1);
}

.fc-buyer-account .contact-form .fc-reply-attach-btn {
  margin-bottom: 0 !important;
}

.fc-reply-attach-btn:hover {
  background: #f8f6ff;
  border-color: var(--color-purple-1);
  color: var(--color-purple-1);
}

.fc-reply-send-btn {
  appearance: none;
  background: var(--color-purple-1);
  border: 1px solid var(--color-purple-1);
  color: #fff;
  min-width: 128px;
}

.fc-reply-send-btn:hover {
  background: var(--fc-purple-hover);
  border-color: var(--fc-purple-hover);
}

.fc-reply-help {
  color: var(--color-light-1);
  font-size: 12px;
  line-height: 1.35;
  margin-top: 8px;
}

@media (max-width: 767px) {
  .fc-buyer-account {
    padding-top: 18px !important;
    padding-bottom: 18px !important;
  }

  .fc-buyer-account .rounded-16.bg-white.px-30,
  .fc-buyer-account .rounded-16.bg-white.px-40,
  .fc-buyer-account .rounded-16.bg-white.sm\:px-25,
  .fc-buyer-account .px-30 {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  .fc-chat-bubble {
    max-width: 90%;
  }

  .fc-chat-thread {
    height: 420px;
  }

  .fc-chat-bubble--quote {
    max-width: 100%;
  }

  .fc-reply-actions {
    display: grid;
    grid-template-columns: 1fr;
  }

  .fc-reply-attach-btn,
  .fc-reply-send-btn {
    width: 100%;
  }
}

/* Individual training dates selected by the provider for a booking. */
.fc-booking-dates__count {
  color: var(--color-light-1);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.04em;
  margin-bottom: 6px;
  text-transform: uppercase;
}

.fc-booking-dates__list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.fc-booking-date {
  align-items: center;
  background: #f4f1ff;
  border: 1px solid #e3dcff;
  border-radius: 999px;
  color: #39218f;
  display: inline-flex;
  font-size: 11px;
  font-weight: 500;
  line-height: 1.2;
  overflow: hidden;
  white-space: nowrap;
}

.fc-booking-date__day {
  background: #e7e0ff;
  color: var(--color-purple-1);
  font-size: 10px;
  font-weight: 700;
  padding: 6px 7px;
  text-transform: uppercase;
}

.fc-booking-date > span:last-child:not(.fc-booking-date__day) {
  padding: 6px 9px 6px 7px;
}

.fc-booking-date--more {
  background: #f5f5f7;
  border-color: #e2e2e6;
  color: var(--color-light-1);
  padding: 6px 9px;
}

.fc-booking-dates--compact .fc-booking-dates__count {
  margin-bottom: 5px;
}

.fc-booking-dates--compact .fc-booking-date {
  font-size: 10px;
}

.fc-booking-dates--compact .fc-booking-date__day {
  font-size: 9px;
  padding: 5px 6px;
}

.fc-booking-dates--compact .fc-booking-date > span:last-child:not(.fc-booking-date__day) {
  padding: 5px 7px 5px 6px;
}

.fc-booking-dates--compact .fc-booking-date--more {
  padding: 5px 7px;
}

/* Homepage "Top Categories" tiles. Replaces Educrat's categoryCard -type-1
   centre-overlay: the old section mixed column spans (4 small + 3 wide + 1
   dangling), and white text sat mid-tile on the lighter gradients with no
   scrim. A fixed 3:2 tile keeps the grid uniform; the bottom gradient scrim
   keeps the name legible on every cover; the arrow chip only appears on
   hover/focus so resting tiles stay calm. */
.fc-categoryTile {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: 12px;
  isolation: isolate; /* Safari: keep the zooming bg clipped to the radius */
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.fc-categoryTile:hover,
.fc-categoryTile:focus-visible {
  transform: translateY(-4px);
  box-shadow: 0 14px 30px rgba(20, 3, 66, 0.16);
}

.fc-categoryTile::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(180deg, rgba(20, 3, 66, 0) 42%, rgba(20, 3, 66, 0.6) 100%);
  pointer-events: none;
}

.fc-categoryTile__bg {
  transition: transform 0.5s ease;
}

.fc-categoryTile:hover .fc-categoryTile__bg,
.fc-categoryTile:focus-visible .fc-categoryTile__bg {
  transform: scale(1.06);
}

.fc-categoryTile__content {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  padding: 18px 20px;
}

.fc-categoryTile__meta {
  display: inline-flex;
  align-items: center;
  padding: 5px 10px;
  border-radius: 200px;
  background: rgba(255, 255, 255, 0.18);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  color: #fff;
  font-size: 12px;
  font-weight: 500;
  line-height: 1;
}

.fc-categoryTile__arrow {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 100%;
  background: rgba(255, 255, 255, 0.22);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  color: #fff;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.fc-categoryTile:hover .fc-categoryTile__arrow,
.fc-categoryTile:focus-visible .fc-categoryTile__arrow {
  opacity: 1;
  transform: translateY(0);
}

/* ============================================================
   Buyer / public button colour scheme
   ------------------------------------------------------------
   Educrat's stock button hovers are inconsistent: solid buttons
   invert to a hollow transparent state while outline buttons
   fill, and `-outline-white:hover` even paints white text onto a
   white fill (the label vanishes). Normalise every buyer-facing
   button to one predictable model:
       • solid buttons darken on hover, label colour unchanged
       • outline buttons fill with their colour + contrasting text
   Scoped to `.fc-buyer` (the buyer/public <body> class) so the
   provider/admin Metronic `.btn`s are untouched. The extra class
   + `!important` beat Educrat's own `!important` hover rules,
   which sit one class lower in specificity. Resting states still
   come from the Educrat `.button.-*` + `text-*` utilities — only
   the hover needs correcting. */
:root {
  --fc-purple-hover: #5f35d9; /* one darker shade for every solid-purple hover */
}

[x-cloak] {
  display: none !important;
}

.fc-category-filter__group + .fc-category-filter__group {
  margin-top: 8px;
}

.fc-category-filter__parent {
  display: flex;
  align-items: center;
  gap: 6px;
}

.fc-category-filter__label {
  flex: 1 1 auto;
  min-width: 0;
  margin-bottom: 0 !important;
  cursor: pointer;
}

.fc-category-filter__toggle {
  display: inline-flex;
  flex: 0 0 30px;
  width: 30px;
  height: 30px;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--color-light-1);
  cursor: pointer;
}

.fc-category-filter__toggle:hover,
.fc-category-filter__toggle:focus-visible {
  background: var(--color-light-3);
  color: var(--color-purple-1);
}

.fc-category-filter__toggle i {
  display: inline-block;
  font-size: 10px;
  transition: transform .15s ease;
}

.fc-category-filter__toggle i.is-open {
  transform: rotate(180deg);
}

.fc-category-filter__children {
  margin: 6px 0 2px 26px;
  padding-left: 12px;
  border-left: 1px solid rgba(20, 33, 61, .14);
}

.fc-category-filter__children .sidebar-checkbox__item + .sidebar-checkbox__item {
  margin-top: 7px;
}

.fc-category-filter .form-checkbox input:indeterminate ~ .form-checkbox__mark {
  background-color: var(--color-dark-1);
  border-color: var(--color-dark-1);
}

.fc-category-filter .form-checkbox input:indeterminate ~ .form-checkbox__mark::after {
  content: "";
  width: 7px;
  height: 2px;
  background: #fff;
}

/* Primary solid purple (CTAs, "Sign Up", "Request Quotation", footer) —
   darken on hover instead of emptying out to a hollow outline. */
.fc-buyer .button.-purple-1:hover {
  background-color: var(--fc-purple-hover) !important;
  border-color: var(--fc-purple-hover) !important;
  color: #fff !important;
}

/* Secondary outline purple ("Decline", "View receipt", filters) —
   fill with the brand purple + white label. */
.fc-buyer .button.-outline-purple-1:hover {
  background-color: var(--color-purple-1) !important;
  border-color: var(--color-purple-1) !important;
  color: #fff !important;
}

/* Neutral dark outline ("View course", "Cancel", back links) — soft grey fill
   with a dark label, rather than a heavy navy block. */
.fc-buyer .button.-outline-dark-1:hover {
  background-color: var(--color-light-3) !important;
  border-color: var(--color-dark-1) !important;
  color: var(--color-dark-1) !important;
}

.fc-buyer .button.-outline-dark-2:hover {
  background-color: var(--color-light-3) !important;
  border-color: var(--color-dark-2) !important;
  color: var(--color-dark-2) !important;
}

/* Header white pill ("Log In" / "My Account") — gentle light-purple tint on
   hover, keeping the purple label so it stays legible and matches the solid
   purple "Sign Up" beside it (was inverting to transparent + white text). */
.fc-buyer .button.-white:hover {
  background-color: var(--color-purple-3) !important;
  border-color: var(--color-purple-3) !important;
  color: var(--color-purple-1) !important;
}

/* Hero "outline white" CTAs (home + For Providers) — white fill with a dark
   label. Educrat painted white text onto the white fill, so the label vanished
   on hover. */
.fc-buyer .button.-outline-white:hover {
  background-color: var(--color-white) !important;
  border-color: var(--color-white) !important;
  color: var(--color-dark-1) !important;
}

@media print {
  .header,
  .footer,
  .fc-no-print {
    display: none !important;
  }
}