/* ============================================================
   TutorLMS — student dashboard, registration & login
   Enqueued only where the page contains the [tutor_dashboard],
   [tutor_student_registration_form] or [tutor_instructor_registration_form]
   shortcode (the dashboard shortcode also renders the login form
   for logged-out visitors, hence bundling login styles here too).
   ============================================================ */

/* ---------------- Registration / login ---------------- */
#tutor-registration-wrap.tutor-card,
.tutor-login-wrap {
    padding: 24px!important;
    margin: 48px auto!important;
}
#tutor-registration-wrap #tutor-registration-form,
.tutor-login-wrap>.tutor-login-form-wrapper  {
    padding: 0;
}
.tutor-login-wrap .tutor-login-form-wrapper #tutor-login-form {
    display: flex;
    flex-direction: column;
}

.tutor-login-wrap .tutor-login-form-wrapper .tutor-h3 {
    font-family: var(--heading-font-family);
    font-size: var(--heading-size);
    font-weight: var(--heading-font-weight);
    line-height: var(--heading-line-height);
    letter-spacing: var(--heading-letter-spacing);
    color: var(--text-on-light-primary);
}
#tutor-registration-wrap #tutor-registration-form label,
.tutor-login-wrap .tutor-login-form-wrapper #tutor-login-form label {
    font-family: var(--body-font-family);
    font-size: var(--body-size-base);
    font-weight: var(--body-font-weight-strong);
    line-height: var(--body-line-height);
    letter-spacing: var(--body-letter-spacing);
    margin-bottom: 4px;
}

#tutor-registration-wrap #tutor-registration-form input,
.tutor-login-wrap .tutor-login-form-wrapper #tutor-login-form input {
    display: block;
    border-radius: 0;
    overflow: hidden;
    border-width: 1px;
    border-color: var(--border-on-light);
    padding: 16px;
    width: 100%;
    font-size: 14px;
    background-color: var(--neutrals-0, #FFFFFF);
}

.tutor-login-wrap .tutor-login-form-wrapper #tutor-login-form input[type="checkbox"]{
    width: 16px;
    height: 16px;
    padding: 2px;
    margin-bottom: 4px;
}
.tutor-login-wrap .tutor-login-form-wrapper #tutor-login-form input[type="checkbox"]:checked {
    background-color: var(--neutrals-1000);
}
 
#tutor-registration-wrap #tutor-registration-form input:focus,
.tutor-login-wrap .tutor-login-form-wrapper #tutor-login-form input:focus {
    background-color:  #F2EEF6;
    box-shadow: none;
}

/* Primary button: registration/login submit + dashboard progress card CTA */
#tutor-registration-wrap #tutor-registration-form button.tutor-btn-primary,
.tutor-login-wrap .tutor-login-form-wrapper #tutor-login-form button.tutor-btn-primary,
.tutor-progress-card .tutor-progress-card-actions .tutor-btn.tutor-btn-primary  {
    background-color: var(--button-primary-background-color);
    color: var(--button-primary-text-color);
    border-color: var(--button-primary-border-color);
    border-style: solid;
    border-width: var(--button-primary-border-stroke);
    border-radius: var(--button-primary-border-radius);
    padding-top: var(--button-primary-padding-top) !important;
    padding-bottom: var(--button-primary-padding-bottom) !important;
    padding-left: var(--button-primary-padding-left) !important;
    padding-right: var(--button-primary-padding-right) !important;
    fill: var(--button-primary-icon-color);
    /* For SVG icons */
    transition: all 0.3s ease;
    font-family: var(--body-font-family);
  font-size: var(--body-base-resp-size);
    font-weight: var(--body-font-weight-strong);
  line-height: var(--body-single-line-height)!important;
  letter-spacing: var(--body-letter-spacing);
  text-transform: uppercase;
}
.tutor-login-wrap .tutor-login-form-wrapper #tutor-login-form button.tutor-btn-primary {
    margin-top: 0px;
}

#tutor-registration-wrap #tutor-registration-form button.tutor-btn-primary:hover,
.tutor-login-wrap .tutor-login-form-wrapper #tutor-login-form button.tutor-btn-primary:hover,
.tutor-progress-card .tutor-progress-card-actions .tutor-btn.tutor-btn-primary:hover {
      background-color: var(--button-primary-background-color-hover);
  color: var(--button-primary-text-color-hover);
  border-color: var(--button-primary-border-color-hover);
  fill: var(--button-primary-icon-color-hover);
  padding-top: var(--button-primary-padding-top)!important;
  padding-bottom: var(--button-primary-padding-bottom)!important;
  padding-left: var(--button-primary-padding-left)!important;
  padding-right: var(--button-primary-padding-right)!important;
}

#tutor-registration-wrap #tutor-registration-form button.tutor-btn-primary:disabled,
.tutor-login-wrap .tutor-login-form-wrapper #tutor-login-form button.tutor-btn-primary:disabled,
.tutor-progress-card .tutor-progress-card-actions .tutor-btn.tutor-btn-primary:disabled {
        background-color: var(--button-primary-background-color-disabled);
  color: var(--button-primary-text-color-disabled);
  border-color: var(--button-primary-border-color-disabled);
  fill: var(--button-primary-icon-color-disabled);
  cursor: not-allowed;
}

#tutor-registration-wrap #tutor-registration-form div > div.tutor-flex {
    flex-direction: column;
    margin-top: 48px;
}
#tutor-registration-wrap #tutor-registration-form div > div.tutor-flex .tutor-small,
.tutor-login-wrap .tutor-login-form-wrapper #tutor-login-form .tutor-flex .tutor-small {
  font-family: var(--body-font-family);
  font-size: var(--body-size-small);
  font-weight: var(--body-font-weight-strong);
  line-height: var(--body-line-height);
  letter-spacing: var(--body-letter-spacing);
}

/* Neutral link button: registration/login links + "see all courses" */
#tutor-registration-wrap #tutor-registration-form div > div.tutor-flex .tutor-btn.tutor-btn-link,
.tutor-login-wrap .tutor-login-form-wrapper #tutor-login-form .tutor-btn.tutor-btn-link-gray,
.tutor-login-wrap .tutor-login-form-wrapper #tutor-login-form .tutor-btn.tutor-btn-link,
.tutor-student-dashboard-courses .tutor-btn.tutor-btn-link,
.tutor-dashboard-sidebar .tutor-see-all-courses  {
    background-color: var(--button-neutral-background-color);
  color: var(--button-neutral-text-color);
  border-color: var(--button-neutral-border-color);
  border-style: solid;
  border-width: var(--button-neutral-border-stroke);
  border-radius: var(--button-neutral-border-radius);
  padding-top: var(--button-neutral-padding-top)!important;
  padding-bottom: var(--button-neutral-padding-bottom)!important;
  padding-left: var(--button-neutral-padding-left)!important;
  padding-right: var(--button-neutral-padding-right)!important;
  fill: var(--button-neutral-icon-color); /* For SVG icons */
  transition: all 0.3s ease;
    font-family: var(--body-font-family);
  font-size: var(--body-base-resp-size);
    font-weight: var(--body-font-weight-strong);
  line-height: var(--body-single-line-height)!important;
  letter-spacing: var(--body-letter-spacing);
  text-transform: uppercase;
}
.tutor-calendar-actions .tutor-btn,
.tutor-student-dashboard-courses .tutor-btn.tutor-btn-link {
    width: fit-content;
}
#tutor-registration-wrap #tutor-registration-form div > div.tutor-flex .tutor-btn.tutor-btn-link:hover,
.tutor-login-wrap .tutor-login-form-wrapper #tutor-login-form .tutor-btn.tutor-btn-link-gray:hover,
.tutor-login-wrap .tutor-login-form-wrapper #tutor-login-form .tutor-btn.tutor-btn-link:hover,
.tutor-student-dashboard-courses .tutor-btn.tutor-btn-link:hover,
.tutor-dashboard-sidebar .tutor-see-all-courses:hover {
      background-color: var(--button-neutral-background-color-hover);
  color: var(--button-neutral-text-color-hover);
  border-color: var(--button-neutral-border-color-hover);
  fill: var(--button-neutral-icon-color-hover);
  padding-top: var(--button-neutral-padding-top)!important;
  padding-bottom: var(--button-neutral-padding-bottom)!important;
  padding-left: var(--button-neutral-padding-left)!important;
  padding-right: var(--button-neutral-padding-right)!important;
}

#tutor-registration-wrap #tutor-registration-form div > div.tutor-flex .tutor-btn.tutor-btn-link:disabled,
.tutor-login-wrap .tutor-login-form-wrapper #tutor-login-form .tutor-btn.tutor-btn-link-gray:disabled,
.tutor-login-wrap .tutor-login-form-wrapper #tutor-login-form .tutor-btn.tutor-btn-link:disabled,
.tutor-student-dashboard-courses .tutor-btn.tutor-btn-link:disabled,
.tutor-dashboard-sidebar .tutor-see-all-courses:disabled {
      background-color: var(--button-neutral-background-color-disabled);
  color: var(--button-neutral-text-color-disabled);
  border-color: var(--button-neutral-border-color-disabled);
  fill: var(--button-neutral-icon-color-disabled);
  cursor: not-allowed;
}

.tutor-login-wrap .tutor-login-form-wrapper #tutor-login-form .tutor-flex {
    order: 3;
    flex-direction: column;
}
.tutor-login-wrap .tutor-login-form-wrapper #tutor-login-form .tutor-flex.tutor-mt-9 {
    margin-top: 12px;
    flex-direction: column-reverse;
    gap: 12px;
}
.tutor-login-wrap .tutor-login-form-wrapper #tutor-login-form .tutor-flex.tutor-mt-7 {
    margin-top: 48px;
}

.tutor-input-field .tutor-checkbox-md {
    border-radius: var(--radius-default);
}

/* ---------------- Dashboard ---------------- */
.tutor-stat-card {
    border-radius: var(--radius-default);
    border: 0;
    background-color: var(--neutrals-100, #F4F4F5);
    padding: 24px;
}

.tutor-stat-card .tutor-stat-card-header {
   align-items: flex-start;
}
.tutor-stat-card-title,
.tutor-dashboard-sidebar .tutor-dashboard-sidebar-nav ul li a,
.tutor-progress-card .tutor-progress-card-details,
.tutor-screen-frontend-dashboard .tutor-h5,
.tutor-nav button.tutor-nav-item, .tutor-nav .tutor-nav-item {
    font-family: var(--body-font-family);
    font-size: var(--body-size-base);
    font-weight: var(--body-font-weight-strong);
    line-height: var(--body-line-height);
    letter-spacing: var(--body-letter-spacing);
}

.tutor-progress-card {
    border-radius: var(--radius-default);
    border: 0;
    background-color: var(--neutrals-100, #F4F4F5);
    padding: 24px 24px 24px 0;
    display: flex;
    align-items: flex-end;
    gap: 8px;
}
.tutor-progress-card .tutor-progress-card-content{
    flex-basis: 100%;
    flex-shrink: 1;
}
.tutor-progress-card .tutor-progress-card-thumbnail {
    aspect-ratio: 1;
    border-radius:  var(--radius-default);
}
.tutor-progress-card .tutor-progress-card-category  {
    font-family: var(--body-font-family);
    font-size: 12px !important;
    font-weight: var(--body-font-weight-strong);
    line-height: var(--body-line-height);
    letter-spacing: var(--body-letter-spacing);
    display: inline-block;
    color: var(--text-brand-primary);
    text-transform: uppercase;
}
.tutor-progress-card .tutor-progress-card-title {
    font-family: var(--small-heading-font-family);
    font-size: var(--small-heading-size);
    font-weight: var(--small-heading-font-weight);
    line-height: var(--small-heading-line-height);
    letter-spacing: var(--small-heading-letter-spacing);
    overflow: hidden;
    display: -webkit-box;
    line-clamp: 2;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}
.tutor-student-dashboard-courses .tutor-small {
    font-family: var(--heading-font-family);
    font-size: var(--heading-size);
    font-weight: var(--heading-font-weight);
    line-height: var(--heading-line-height);
    letter-spacing: var(--heading-letter-spacing);
}
.tutor-student-dashboard-courses {
    margin-top: 48px;
}
.tutor-student-dashboard-courses > .tutor-mb-4 {
    margin-bottom: 24px;
}
.tutor-progress-card .tutor-progress-card-actions {
    opacity: 1;
    visibility: visible;
    position: static;
}

.tutor-dashboard-courses-card,
.tutor-dashboard-page-card,
.tutor-dashboard-page {
    background-color: transparent;
    border: none;
    border-radius: var(--radius-default)
}
.tutor-dashboard-courses-list {
    gap: 24px;
}