/*
 * Tutor LMS full frontend branding override.
 * Scope: public frontend + dashboard + course builder frontend.
 */

:root {
  --tutor-color-primary: var(--color-primary);
  --tutor-color-primary-rgb: 182, 56, 136;
  --tutor-color-white: var(--color-white);
  --tutor-body-color: var(--color-text);
  --tutor-border-color: var(--color-border);
  --tutor-color-muted: var(--color-text-soft);
  --tutor-color-subdued: var(--color-text-soft);
}

/* Base */
.tutor-wrap,
.tutor-wrap-parent,
.tutor-dashboard,
.tutor-dashboard-content,
.tutor-course-details-page,
.tutor-container,
.tutor-course-spotlight-mode {
  font-family: var(--font-family-base);
  color: var(--color-text);
}

.tutor-wrap {
  background: transparent;
}

.tutor-container {
  max-width: var(--container-max);
}

.tutor-row {
  row-gap: var(--space-sm);
}

.tutor-fs-4,
.tutor-fs-5,
.tutor-fs-6,
.tutor-fs-7 {
  font-family: var(--font-family-base);
}

/* Cards, panels, layout blocks */
.tutor-card,
.tutor-dashboard .tutor-dashboard-content,
.tutor-dashboard .tutor-dashboard-content-inner,
.tutor-dashboard .tutor-dashboard-left-menu,
.tutor-course-details-tab,
.tutor-single-course-sidebar,
.tutor-course-builder-section,
.tutor-course-builder-section-content,
.tutor-course-builder-section-title,
.tutor-modal-window,
.tutor-pagination,
.tutor-alert,
.tutor-nav-tabs-container,
.tutor-dropdown,
.tutor-announcement,
.tutor-dashboard-inline-links,
.tutor-dashboard-content-wrapper {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
}

.tutor-dashboard .tutor-dashboard-content,
.tutor-dashboard .tutor-dashboard-content-inner,
.tutor-dashboard .tutor-dashboard-left-menu,
.tutor-dashboard .tutor-dashboard-header,
.tutor-course-builder-section,
.tutor-course-builder-section-content,
.tutor-course-builder-section-title {
  padding: var(--space-sm);
}

.tutor-card {
  box-shadow: 0 6px 30px -20px color-mix(in srgb, var(--color-black) 45%, transparent);
}

/* Tutor buttons */
.tutor-btn,
.tutor-button,
.tutor-btn.tutor-btn-primary,
.tutor-btn.tutor-btn-outline-primary,
.tutor-btn.tutor-btn-secondary,
.tutor-btn.tutor-btn-ghost,
.tutor-iconic-btn {
  border-radius: var(--radius-md);
  font-size: var(--font-size-button);
  line-height: var(--line-height-button);
  font-weight: var(--font-weight-button);
}

.tutor-btn.tutor-btn-primary,
.tutor-button,
.tutor-btn.tutor-btn-primary:not(.tutor-btn-outline-primary) {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--color-white);
}

.tutor-btn.tutor-btn-primary:hover,
.tutor-button:hover {
  background: var(--color-pink);
  border-color: var(--color-pink);
}

.tutor-btn.tutor-btn-outline-primary,
.tutor-btn.tutor-btn-secondary,
.tutor-btn.tutor-btn-ghost {
  background: transparent;
  border-color: var(--color-primary);
  color: var(--color-primary);
}

.tutor-btn.tutor-btn-outline-primary:hover,
.tutor-btn.tutor-btn-secondary:hover,
.tutor-btn.tutor-btn-ghost:hover {
  background: var(--color-pink-light);
}

.tutor-btn:focus-visible,
.tutor-button:focus-visible,
.tutor-iconic-btn:focus-visible,
.tutor-dashboard-menu-item-link:focus-visible,
.tutor-nav-link:focus-visible {
  outline: 3px solid var(--state-focus);
  outline-offset: 2px;
}

/* Forms */
.tutor-form-control,
.tutor-form-select,
.tutor-form-textarea,
.tutor-form-check-input,
.tutor-login-form-wrap input,
.tutor-login-form-wrap select,
.tutor-login-form-wrap textarea {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-white);
  color: var(--color-text);
}

.tutor-form-control,
.tutor-form-select,
.tutor-form-textarea {
  min-height: 46px;
  padding: 10px 14px;
}

.tutor-form-control:focus,
.tutor-form-select:focus,
.tutor-form-textarea:focus,
.tutor-form-check-input:focus {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px var(--color-pink-alpha);
  outline: none;
}

.tutor-form-label,
.tutor-dashboard-content label {
  color: var(--color-text);
  font-weight: var(--font-weight-menu);
}

/* Links, nav and pills */
.tutor-nav {
  border-bottom-color: var(--color-border);
}

.tutor-nav-link {
  color: var(--color-text-soft);
}

.tutor-nav-link.is-active,
.tutor-nav-link:hover,
.tutor-dashboard .tutor-dashboard-menu-item.active .tutor-dashboard-menu-item-link,
.tutor-dashboard .tutor-dashboard-menu-item-link:hover {
  color: var(--color-primary);
}

.tutor-dashboard .tutor-dashboard-menu-item.active .tutor-dashboard-menu-item-link {
  background: var(--color-pink-light);
  border-radius: var(--radius-md);
}

.tutor-dashboard .tutor-dashboard-menu-divider,
.tutor-dashboard .tutor-dashboard-menu-divider-header {
  border-color: var(--color-border);
  color: var(--color-text-soft);
}

/* Dashboard shell */
.tutor-dashboard .tutor-frontend-dashboard-header {
  margin-bottom: var(--space-sm);
}

.tutor-dashboard .tutor-dashboard-header {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface-muted);
}

.tutor-dashboard .tutor-dashboard-header-avatar img,
.tutor-dashboard .tutor-avatar,
.tutor-dashboard .tutor-avatar img {
  border-radius: var(--radius-pill);
}

.tutor-dashboard .tutor-dashboard-content-inner .tutor-grid {
  gap: var(--space-sm);
}

#tutor-dashboard-footer-mobile {
  border-top: 1px solid var(--color-border);
  background: color-mix(in srgb, var(--color-surface) 92%, transparent);
}

/* Course cards and list */
.tutor-course-card,
.tutor-course-loop,
.tutor-loop-course-container {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--color-surface);
}

.tutor-course-card .tutor-card-body,
.tutor-course-card .tutor-card-footer {
  padding: var(--space-sm);
}

.tutor-course-name a,
.tutor-loop-course-title a {
  color: var(--color-text);
}

.tutor-course-name a:hover,
.tutor-loop-course-title a:hover {
  color: var(--color-primary);
}

/* Single course page */
.tutor-course-details-page .tutor-course-details-tab,
.tutor-course-details-page .tutor-single-course-sidebar,
.tutor-course-details-page .tutor-course-topic,
.tutor-course-details-page .tutor-course-content-list-item,
.tutor-course-details-page .tutor-course-enrolled-nav,
.tutor-course-details-page .tutor-tab {
  border-color: var(--color-border);
  border-radius: var(--radius-md);
}

.tutor-course-details-page .tutor-tab-item,
.tutor-course-details-page .tutor-course-topic {
  background: var(--color-white);
}

.tutor-course-details-page .tutor-tab-item {
  padding: var(--space-sm);
}

/* Lesson and player */
.tutor-course-spotlight-mode .tutor-spotlight-content,
.tutor-course-spotlight-mode .tutor-spotlight-sidebar,
.tutor-lesson-single-sidebar-wrapper,
.tutor-lesson-sidebar-tab-item {
  background: var(--color-surface);
  border-color: var(--color-border);
}

.tutor-course-spotlight-mode .tutor-lesson-sidebar-tab-item.active,
.tutor-course-spotlight-mode .tutor-lesson-sidebar-tab-item:hover {
  color: var(--color-primary);
}

/* Course builder frontend */
body.tutor-screen-course-builder,
body.tutor-screen-course-builder .tutor-wrap,
body.tutor-screen-course-builder .tutor-wrap-parent,
body.tutor-screen-course-builder .tutor-front-wrap,
body.tutor-screen-course-builder .tutor-course-builder {
  background: linear-gradient(180deg, #f9fcff 0%, #fefafc 100%);
}

body.tutor-screen-course-builder .tutor-course-builder-section,
body.tutor-screen-course-builder .tutor-metabox-addons,
body.tutor-screen-course-builder .tutor-option-field-row,
body.tutor-screen-course-builder .tutor-quiz-builder-group,
body.tutor-screen-course-builder .tutor-modal-window,
body.tutor-screen-course-builder .tutor-topbar,
body.tutor-screen-course-builder .tutor-course-builder-header {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
}

body.tutor-screen-course-builder .tutor-course-builder-section-title,
body.tutor-screen-course-builder .tutor-topbar,
body.tutor-screen-course-builder .tutor-course-builder-header {
  background: var(--color-surface-muted);
}

body.tutor-screen-course-builder .tutor-modal-window {
  box-shadow: 0 10px 30px -16px color-mix(in srgb, var(--color-black) 40%, transparent);
}

body.tutor-screen-course-builder .tutor-option-field-label label,
body.tutor-screen-course-builder .tutor-option-field-row h2,
body.tutor-screen-course-builder .tutor-quiz-builder-group h4 {
  color: var(--color-text);
}

/* Alerts, notices, badges */
.tutor-alert.tutor-primary,
.tutor-alert.tutor-success,
.tutor-alert.tutor-danger,
.tutor-alert.tutor-warning {
  background: var(--color-surface);
}

.tutor-alert.tutor-primary {
  border-color: var(--color-pink-alpha);
}

.tutor-alert.tutor-success {
  border-color: var(--color-green-alpha);
}

.tutor-alert.tutor-danger {
  border-color: color-mix(in srgb, var(--color-red) 35%, var(--color-white));
}

.tutor-alert.tutor-warning {
  border-color: var(--color-orange-alpha);
}

.tutor-badge,
.tutor-label,
.tutor-status-context {
  border-radius: var(--radius-pill);
}

/* Pagination and dropdown */
.tutor-pagination .page-numbers.current,
.tutor-pagination .page-numbers:hover {
  color: var(--color-primary);
}

.tutor-pagination .page-numbers.prev,
.tutor-pagination .page-numbers.next {
  border-radius: var(--radius-sm);
}

.tutor-dropdown,
.tutor-dropdown-select-options-container,
.tutor-dropdown-select-selected {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}

/* Tables */
.tutor-table,
.tutor-table table,
.tutor-dashboard table,
.tutor-dashboard .tutor-table-wrapper {
  border-color: var(--color-border);
}

.tutor-table th,
.tutor-table td,
.tutor-dashboard table th,
.tutor-dashboard table td {
  border-bottom-color: var(--color-border);
}

/* Login and registration */
.tutor-login-wrap,
.tutor-login-form-wrap,
.tutor-register-wrap,
.tutor-dashboard-registration-wrap {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  padding: var(--space-md);
}

/* Mobile tuning */
@media (max-width: 767px) {
  .tutor-dashboard .tutor-dashboard-left-menu,
  .tutor-dashboard .tutor-dashboard-content,
  .tutor-dashboard .tutor-dashboard-content-inner,
  .tutor-login-wrap,
  .tutor-login-form-wrap,
  .tutor-register-wrap,
  .tutor-dashboard-registration-wrap {
    padding: var(--space-xs);
  }
}