/* 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 print 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;
}

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

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