/*
 * WordPress theme compatibility layer.
 *
 * Loaded after mk-app.css. Keep catalog and dialog rules under .mk-root so
 * host pages and unrelated PrimeVue components are not restyled. PrimeVue
 * teleports date picker panels to body; those rules use :has(.mk-root) as a
 * page-level guard.
 */

.mk-root {
  container-name: mk-catalog;
  container-type: inline-size;
  font-size: 14px;
}

/*
 * Some school themes set typography directly on every descendant element,
 * for example `.body span { font: ...; font-size: 2rem }`. A value set on the
 * element wins over the 14px inherited from `.mk-root`, which inflates plain
 * text inside cards, filters and the powered-by footer. Match the theme's
 * selector strength and load later, while keeping classed elements available
 * to PrimeVue, Tailwind and component-scoped typography rules.
 */
.mk-root :where(p, table, a, li, ul, input, textarea, button, span, i),
body:has(.mk-root) :is(
    .p-dialog-mask,
    .p-dialog,
    .p-popover,
    .p-select-overlay,
    .p-multiselect-overlay,
    .p-datepicker-panel,
    .p-toast,
    .p-tooltip
  ) :where(p, table, a, li, ul, input, textarea, button, span, i) {
  font-family: inherit !important;
}

.body span:where(.mk-root span:not([class])),
.body a:where(.mk-root a:not([class])),
.body p:where(.mk-root p:not([class])),
.body li:where(.mk-root li:not([class])),
.body ul:where(.mk-root ul:not([class])),
.body table:where(.mk-root table:not([class])) {
  font-size: inherit;
  line-height: inherit;
}

.mk-root .p-inputnumber {
  font-family: inherit !important;
  font-size: 14px !important;
  line-height: 1.5 !important;
}

.mk-root .mk-powered-by,
.mk-root .mk-powered-by > * {
  font-family: inherit !important;
  font-size: inherit !important;
  line-height: inherit !important;
}

/* The same theme forces all <i> elements to FontAwesome with !important and
 * its span rule also catches PrimeVue icons rendered as <span>. PrimeIcons
 * must always use their own font or they render as empty square glyphs. */
.mk-root .pi,
body:has(.mk-root) :is(
    .p-dialog-mask,
    .p-dialog,
    .p-popover,
    .p-select-overlay,
    .p-multiselect-overlay,
    .p-datepicker-panel,
    .p-toast,
    .p-tooltip
  ) .pi {
  font-family: primeicons !important;
  font-style: normal !important;
  font-variant: normal !important;
  font-weight: normal !important;
  text-transform: none !important;
  line-height: 1;
}

/* School themes commonly uppercase all headings with !important. Component
 * styles still own their size and weight; this only restores the widget's
 * font family and casing. */
.mk-root :where(h1, h2, h3, h4, h5, h6),
body:has(.mk-root) :is(.p-dialog-mask, .p-dialog) :where(h1, h2, h3, h4, h5, h6) {
  font-family: inherit !important;
  text-transform: none !important;
}

.mk-root button,
.mk-root input,
.mk-root select,
.mk-root textarea {
  font-family: inherit !important;
  letter-spacing: 0 !important;
}

.mk-root button {
  box-shadow: none !important;
  text-shadow: none !important;
  text-transform: none !important;
}

/* Hestia draws Material-style underlines as two background gradients on
 * .form-control. PrimeVue already supplies a complete input border. */
.mk-root .p-inputtext,
.mk-root .p-inputnumber-input {
  background-image: none !important;
}

/* Catalog filters */
.mk-root .mk-filters-panel {
  gap: 14px;
  padding: 16px;
  border-radius: 12px;
}

.mk-root .mk-filter-row {
  gap: 12px;
}

.mk-root .mk-filter-row + .mk-filter-row {
  padding-top: 14px;
}

.mk-root .mk-filter-search {
  position: relative;
  flex: 1 1 280px;
  min-width: 0;
  margin: 0 !important;
}

.mk-root .mk-filter-search .p-inputicon {
  position: absolute !important;
  z-index: 1;
  top: calc(50% - 2px) !important;
  inset-inline-start: 14px !important;
  width: 14px !important;
  height: 14px !important;
  margin: 0 !important;
  font-size: 14px !important;
  line-height: 14px !important;
  transform: translateY(-50%) !important;
  color: var(--p-text-muted-color, #94a3b8) !important;
  transition: color 160ms ease;
  pointer-events: none;
}

.mk-root .mk-filter-search .p-inputtext,
.mk-root .mk-filter-age .p-inputtext {
  border: 1px solid var(--p-form-field-border-color, #cbd5e1) !important;
  border-radius: 8px !important;
  background: var(--p-form-field-background, #fff) !important;
  color: var(--p-inputtext-color, #334155) !important;
  box-shadow: none !important;
  transition:
    border-color 160ms ease,
    box-shadow 160ms ease,
    background-color 160ms ease;
}

.mk-root .mk-filter-search:hover .p-inputtext,
.mk-root .mk-filter-age:hover .p-inputtext {
  border-color: var(--p-form-field-hover-border-color, #94a3b8) !important;
}

.mk-root .mk-filter-search:focus-within .p-inputtext,
.mk-root .mk-filter-age:focus-within .p-inputtext {
  border-color: var(--p-form-field-focus-border-color, var(--p-primary-color, #10b981)) !important;
  box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.16) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--p-primary-color, #10b981) 18%, transparent) !important;
  outline: none !important;
}

.mk-root .mk-filter-search:focus-within .p-inputicon {
  color: var(--p-primary-color, #10b981) !important;
}

.mk-root .mk-filter-search .p-inputtext {
  width: 100%;
  height: 44px;
  padding: 10px 14px 10px 42px !important;
  font-size: 14px !important;
  line-height: 22px !important;
}

.mk-root .mk-filter-age {
  flex: 0 0 76px;
  width: 76px;
  margin: 0 !important;
}

.mk-root .mk-filter-age .p-inputtext {
  width: 100%;
  height: 44px;
  padding: 10px 8px !important;
  font-size: 14px !important;
  font-variant-numeric: tabular-nums;
  line-height: 22px !important;
  text-align: center;
}

.mk-root .mk-filter-search .p-inputtext::placeholder,
.mk-root .mk-filter-age .p-inputtext::placeholder {
  color: var(--p-inputtext-placeholder-color, #64748b) !important;
  opacity: 1 !important;
}

.mk-root .mk-filter-label {
  min-height: 32px;
  font-size: 12px;
  line-height: 18px;
}

.mk-root .mk-chip {
  min-height: 32px;
  padding: 6px 12px;
  font-size: 12px;
  line-height: 18px;
}

.mk-root .mk-chip:not(.mk-chip--active):not(.mk-chip--clear):hover,
.mk-root .mk-chip:not(.mk-chip--active):not(.mk-chip--clear):focus-visible {
  border-color: var(--p-primary-color, #16a34a) !important;
  background: var(--p-primary-50, #ecfdf5) !important;
  color: var(--p-primary-color, #16a34a) !important;
}

.mk-root .mk-chip--active,
.mk-root .mk-chip--active:hover,
.mk-root .mk-chip--active:focus-visible {
  border-color: var(--p-primary-color, #16a34a) !important;
  background: var(--p-primary-color, #16a34a) !important;
  color: #fff !important;
}

.mk-root .mk-chip--clear:hover,
.mk-root .mk-chip--clear:focus-visible {
  border-color: #dc2626 !important;
  background: var(--p-surface-0, #fff) !important;
  color: #dc2626 !important;
}

/* Course cards and container-responsive grid */
.mk-root .mk-course-grid {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  gap: 16px !important;
}

.mk-root .course-card {
  min-width: 0;
  font-size: 14px;
}

.mk-root .course-card .card-content {
  padding: 16px;
}

.mk-root .course-card .card-title {
  margin: 0;
  font-family: inherit !important;
  font-size: 16px !important;
  font-weight: 600 !important;
  line-height: 1.35 !important;
}

.mk-root .course-card .card-info {
  gap: 7px;
}

.mk-root .course-card .info-row,
.mk-root .course-card .teacher-text,
.mk-root .course-card .branch-text {
  min-width: 0;
  font-size: 13px !important;
  line-height: 1.45 !important;
}

.mk-root .course-card .info-row :where(span, a, p, strong, b, em, small, time, label),
.mk-root .course-card .teacher-text-label,
.mk-root .course-card .branch-text-label {
  font-family: inherit !important;
  font-size: inherit !important;
  line-height: inherit !important;
}

.mk-root .course-card .info-icon,
.mk-root .course-card .teacher-text-icon,
.mk-root .course-card .branch-text-icon {
  flex: 0 0 14px;
  width: 14px !important;
  height: 14px !important;
  margin-top: 2px;
  font-size: 14px !important;
}

.mk-root .course-card .teacher-text-label,
.mk-root .course-card .branch-text-label {
  min-width: 0;
  overflow-wrap: anywhere;
}

.mk-root .course-card .info-row:has(> .branch-text) {
  flex-direction: column !important;
  align-items: stretch !important;
  gap: 2px !important;
}

.mk-root .course-card .info-row:has(> .branch-text) > .branch-text {
  width: 100% !important;
}

.mk-root .course-card .info-row:has(> .branch-text) > .info-facility {
  display: block !important;
  min-width: 0;
  margin-left: 21px !important;
  overflow: hidden;
  line-height: 1.45 !important;
  text-indent: -8px;
  overflow-wrap: anywhere;
}

.mk-root .course-card .program-badge,
.mk-root .course-card .spot-badge,
.mk-root .course-card .start-badge {
  font-size: 11px !important;
  line-height: 16px !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}

.mk-root .course-card .price-value {
  font-size: 15px !important;
}

.mk-root .course-card .price-info-btn {
  font-size: 12px !important;
}

.mk-root .course-card .card-desc {
  font-family: inherit !important;
  font-size: 13px !important;
  line-height: 1.5 !important;
}

.mk-root .course-card .cta-button {
  min-height: 44px;
  padding: 10px 16px;
  font-size: 14px !important;
  font-weight: 600 !important;
  line-height: 22px !important;
}

.mk-root .course-card .cta-arrow {
  font-family: inherit !important;
  font-size: 16px !important;
  line-height: 1 !important;
}

.mk-root .course-card .enrollment-notice {
  gap: 9px;
  margin-bottom: 11px;
  padding: 9px 12px;
  border-radius: 9px;
}

.mk-root .course-card .enrollment-notice-icon {
  width: 14px !important;
  height: 14px !important;
  font-size: 14px !important;
}

.mk-root .course-card .enrollment-notice-text {
  font-family: inherit !important;
  font-size: 13px !important;
  line-height: 1.25 !important;
}

.mk-root .course-card .enrollment-notice-label,
.mk-root .course-card .enrollment-notice-countdown {
  font-family: inherit !important;
  font-size: 10px !important;
  line-height: 1.25 !important;
}

.mk-root .course-card .enrollment-notice-date {
  font-family: inherit !important;
  font-size: 13px !important;
  line-height: 1.4 !important;
}

.mk-root .course-card .enrollment-notice-plain {
  font-family: inherit !important;
  font-size: 12px !important;
  line-height: 1.4 !important;
}

@container mk-catalog (min-width: 560px) {
  .mk-root .mk-course-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@container mk-catalog (min-width: 900px) {
  .mk-root .mk-course-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
}

@container mk-catalog (min-width: 1200px) {
  .mk-root .mk-course-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  }
}

.mk-root .mk-catalog-pagination {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding-top: 16px;
}

.mk-root .mk-catalog-count,
.mk-root .app-pagination__info {
  margin: 0 !important;
  font-family: inherit !important;
  font-size: 14px !important;
  line-height: 1.5 !important;
}

.mk-root .app-pagination .p-button {
  width: 40px !important;
  height: 40px !important;
  padding: 0 !important;
}

.mk-root .app-pagination .pi {
  font-size: 14px !important;
}

/* Course detail and application dialog */
.mk-root .course-detail-dialog .enrollment-notice {
  box-sizing: border-box;
  max-width: 100%;
  gap: 12px;
  padding: 14px 18px;
  border-radius: 12px;
}

.mk-root .course-detail-dialog .enrollment-notice-icon {
  width: 20px;
  height: 20px;
  font-size: 20px !important;
}

.mk-root .course-detail-dialog .enrollment-notice-text {
  font-family: inherit !important;
  line-height: 1.25 !important;
}

.mk-root .course-detail-dialog .enrollment-notice-label,
.mk-root .course-detail-dialog .enrollment-notice-countdown {
  font-family: inherit !important;
  font-size: 12px !important;
  line-height: 1.25 !important;
}

.mk-root .course-detail-dialog .enrollment-notice-date {
  font-family: inherit !important;
  font-size: 18px !important;
  line-height: 1.5 !important;
}

.mk-root .course-detail-dialog .enrollment-notice-plain {
  font-family: inherit !important;
  font-size: 16px !important;
  line-height: 1.5 !important;
}

.mk-root .course-detail-dialog {
  width: min(860px, calc(100vw - 32px)) !important;
  max-width: calc(100vw - 32px) !important;
  max-height: calc(100dvh - 24px);
}

.mk-root .course-detail-dialog .p-dialog-content {
  max-height: calc(100dvh - 24px);
  overflow: hidden;
}

.mk-root .course-detail-dialog .detail-close {
  width: 36px;
  height: 36px;
  padding: 0;
  border-radius: 50%;
  background: #fff !important;
  color: #334155 !important;
}

.mk-root .course-detail-dialog .detail-close .pi {
  width: 14px;
  height: 14px;
  font-size: 14px;
  line-height: 14px;
}

.mk-root .course-detail-dialog .detail-sheet {
  padding: 24px !important;
}

.mk-root .course-detail-dialog .detail-title {
  font-family: inherit !important;
  font-size: 24px !important;
  font-weight: 600 !important;
  line-height: 1.3 !important;
}

.mk-root .course-detail-dialog .detail-footer {
  padding: 16px 24px !important;
}

.mk-root .course-detail-dialog .detail-footer .cta-button {
  min-height: 44px;
  padding: 10px 18px;
  font-size: 14px !important;
  font-weight: 600 !important;
  line-height: 22px !important;
}

.mk-root .course-detail-dialog .detail-footer .cta-arrow {
  font-size: 16px !important;
  line-height: 1 !important;
}

.mk-root .course-detail-dialog .form-header {
  gap: 10px;
  padding: 20px 24px 16px !important;
}

.mk-root .course-detail-dialog .form-title {
  margin: 0;
  font-family: inherit !important;
  font-size: 20px !important;
  font-weight: 600 !important;
  line-height: 1.35 !important;
}

.mk-root .course-detail-dialog .back-link,
.mk-root .course-detail-dialog .mode-back,
.mk-root .course-detail-dialog .mode-back-link,
.mk-root .course-detail-dialog .btn-cancel {
  font-size: 13px !important;
  line-height: 20px !important;
  color: var(--p-text-muted-color, #64748b) !important;
  box-shadow: none !important;
  text-decoration: none !important;
}

.mk-root .course-detail-dialog .back-link,
.mk-root .course-detail-dialog .mode-back,
.mk-root .course-detail-dialog .btn-cancel {
  background: transparent !important;
}

.mk-root .course-detail-dialog .mode-back-link {
  background: var(--p-surface-0, #fff) !important;
}

.mk-root .course-detail-dialog .back-link:hover,
.mk-root .course-detail-dialog .back-link:focus-visible,
.mk-root .course-detail-dialog .mode-back:hover,
.mk-root .course-detail-dialog .mode-back:focus-visible,
.mk-root .course-detail-dialog .btn-cancel:hover,
.mk-root .course-detail-dialog .btn-cancel:focus-visible {
  color: var(--p-primary-color, #10b981) !important;
  background: transparent !important;
  text-decoration: none !important;
}

.mk-root .course-detail-dialog .mode-back-link:hover,
.mk-root .course-detail-dialog .mode-back-link:focus-visible {
  color: var(--p-primary-color, #10b981) !important;
  background: var(--p-surface-50, #f8fafc) !important;
  text-decoration: none !important;
}

.mk-root .course-detail-dialog .back-link svg,
.mk-root .course-detail-dialog .mode-back svg,
.mk-root .course-detail-dialog .mode-back-link svg,
.mk-root .course-detail-dialog .btn-cancel svg,
.mk-root .course-detail-dialog .mode-icon {
  width: 14px !important;
  height: 14px !important;
  font-size: 14px !important;
  color: currentColor !important;
}

.mk-root .course-detail-dialog .form-body {
  padding: 20px 24px 32px !important;
}

/* Preserve full-width form controls against host theme input sizing. */
.mk-root .course-detail-dialog .form-body .p-floatlabel {
  display: block;
  width: 100%;
  min-width: 0;
}

.mk-root .course-detail-dialog .form-body .w-full {
  box-sizing: border-box !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
}

.mk-root .course-detail-dialog .form-grid,
.mk-root .course-detail-dialog .manual-grid {
  gap: 14px 16px;
}

.mk-root .course-detail-dialog .section-legend {
  font-size: 12px !important;
  line-height: 18px !important;
  letter-spacing: 0.06em !important;
  margin-bottom: 0 !important;
  padding-bottom: 8px !important;
}

.mk-root .course-detail-dialog .form-section > .section-legend + * {
  margin-top: 16px !important;
}

.mk-root .course-detail-dialog .p-inputtext,
.mk-root .course-detail-dialog .p-select {
  min-height: 44px;
  font-size: 14px !important;
  line-height: 22px !important;
}

.mk-root .course-detail-dialog input.p-inputtext {
  height: 44px;
  padding: 10px 12px !important;
}

.mk-root .course-detail-dialog textarea.p-inputtext,
.mk-root .course-detail-dialog textarea.p-textarea {
  min-height: 96px;
  padding: 10px 12px !important;
}

.mk-root .course-detail-dialog .p-floatlabel label {
  font-size: 12px !important;
  line-height: 18px !important;
}

.mk-root .course-detail-dialog .p-select {
  align-items: stretch;
  height: 44px;
}

.mk-root .course-detail-dialog .p-select-label {
  display: flex;
  align-items: center;
  min-height: 42px;
  padding: 10px 12px !important;
  font-size: 14px !important;
  line-height: 22px !important;
}

.mk-root .course-detail-dialog .p-select-dropdown {
  display: flex;
  flex: 0 0 40px;
  align-items: center;
  justify-content: center;
  width: 40px;
  min-width: 40px;
  height: 42px;
}

.mk-root .course-detail-dialog .p-select-dropdown .p-icon {
  width: 14px !important;
  height: 14px !important;
}

.mk-root .course-detail-dialog .phone-wrap {
  align-items: stretch;
  height: 44px;
  min-height: 44px;
  min-width: 0;
}

.mk-root .course-detail-dialog .phone-prefix {
  flex: 0 0 104px;
  height: 44px;
  width: 104px;
  min-width: 104px;
  min-height: 44px;
}

.mk-root .course-detail-dialog .phone-prefix .p-select-label {
  min-width: 0;
  padding: 10px 4px 10px 12px !important;
  white-space: nowrap;
}

.mk-root .course-detail-dialog .phone-prefix .p-select-dropdown {
  flex-basis: 32px;
  width: 32px;
  min-width: 32px;
}

.mk-root .course-detail-dialog .phone-prefix .pv {
  font-size: 14px !important;
  font-weight: 500 !important;
  line-height: 22px !important;
}

.mk-root .course-detail-dialog .phone-number {
  height: 44px !important;
  min-width: 0;
  min-height: 44px !important;
}

.mk-root .course-detail-dialog .p-datepicker-dropdown {
  display: flex;
  flex: 0 0 44px;
  align-items: center;
  justify-content: center;
  width: 44px;
  min-width: 44px;
  height: 44px;
  padding: 0 !important;
  box-shadow: none !important;
}

.mk-root .course-detail-dialog .p-datepicker-dropdown .p-icon {
  width: 14px !important;
  height: 14px !important;
}

.mk-root .course-detail-dialog .consent-row {
  align-items: flex-start;
  gap: 10px;
}

.mk-root .course-detail-dialog .p-checkbox,
.mk-root .course-detail-dialog .p-checkbox-box {
  flex: 0 0 18px;
  width: 18px !important;
  min-width: 18px !important;
  height: 18px !important;
}

.mk-root .course-detail-dialog .p-checkbox-icon {
  width: 12px !important;
  height: 12px !important;
  font-size: 12px !important;
}

.mk-root .course-detail-dialog .consent-label {
  min-width: 0;
  margin: 0 !important;
  font-family: inherit !important;
  font-size: 13px !important;
  font-weight: 400 !important;
  line-height: 1.45 !important;
}

.mk-root .course-detail-dialog .consent-label :where(a, span, p) {
  font-family: inherit !important;
  font-size: inherit !important;
  font-weight: inherit !important;
  line-height: inherit !important;
}

.mk-root .course-detail-dialog .consent-row > .p-checkbox {
  margin: 1px 0 0 !important;
  padding: 0 !important;
  align-self: flex-start;
}

.mk-root .course-detail-dialog .p-checkbox-box {
  box-sizing: border-box !important;
  padding: 0 !important;
}

.mk-root .course-detail-dialog .form-actions {
  gap: 12px;
  padding-top: 20px;
}

.mk-root .course-detail-dialog .form-actions .cta-button {
  min-height: 44px;
  padding: 10px 18px;
  font-size: 14px !important;
  font-weight: 600 !important;
  line-height: 22px !important;
}

.mk-root .course-detail-dialog .form-success h3 {
  font-size: 20px !important;
  line-height: 1.35 !important;
}

.mk-root .course-detail-dialog .form-success .success-desc {
  font-size: 14px !important;
  line-height: 1.5 !important;
}

.mk-root .course-detail-dialog .form-success .info-card {
  font-size: 13px !important;
  line-height: 1.45 !important;
}

.mk-root .course-detail-dialog .success-actions .cta-button {
  min-height: 44px;
  padding: 10px 18px;
  font-size: 14px !important;
  font-weight: 600 !important;
  line-height: 22px !important;
}

.mk-root .course-detail-dialog .success-actions .cta-arrow {
  font-size: 16px !important;
  line-height: 1 !important;
}

.mk-root .course-detail-dialog .success-actions .btn-secondary {
  min-height: 36px;
  padding: 7px 12px;
  font-size: 13px !important;
  line-height: 20px !important;
}

/* Teleported PrimeVue overlays on pages containing this plugin. */
body:has(.mk-root) .p-datepicker-panel {
  box-sizing: border-box !important;
  min-width: 0 !important;
  width: min(360px, calc(100vw - 24px)) !important;
  max-width: calc(100vw - 24px) !important;
  padding: 12px !important;
  border-radius: 8px !important;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif !important;
  font-size: 14px !important;
}

body:has(.mk-root) .p-datepicker-panel button {
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  text-shadow: none !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
}

body:has(.mk-root) .p-datepicker-header {
  padding: 0 0 10px !important;
}

body:has(.mk-root) .p-datepicker-prev-button,
body:has(.mk-root) .p-datepicker-next-button {
  width: 32px !important;
  height: 32px !important;
}

body:has(.mk-root) .p-datepicker-prev-button .p-icon,
body:has(.mk-root) .p-datepicker-next-button .p-icon {
  width: 14px !important;
  height: 14px !important;
}

body:has(.mk-root) .p-datepicker-select-month,
body:has(.mk-root) .p-datepicker-select-year {
  min-height: 32px;
  padding: 4px 6px !important;
  font-size: 14px !important;
  line-height: 20px !important;
}

body:has(.mk-root) .p-datepicker-weekday-cell {
  text-align: center !important;
  padding: 4px !important;
  font-size: 12px !important;
  line-height: 18px !important;
}

body:has(.mk-root) .p-datepicker-weekday {
  font-family: inherit !important;
  font-size: 12px !important;
  line-height: 18px !important;
  font-weight: 600 !important;
}

body:has(.mk-root) .p-datepicker-day-table {
  width: 100% !important;
  table-layout: fixed;
  margin: 0 !important;
  font-family: inherit !important;
  font-size: 14px !important;
}

body:has(.mk-root) .p-datepicker-day-cell {
  padding: 2px !important;
}

body:has(.mk-root) .p-datepicker-day {
  width: 30px !important;
  height: 30px !important;
  font-size: 12px !important;
  line-height: 30px !important;
}

body:has(.mk-root) .p-datepicker-month,
body:has(.mk-root) .p-datepicker-year {
  font-size: 13px !important;
}

body:has(.mk-root) .p-select-overlay {
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif !important;
  font-size: 14px !important;
}

/* Select panels can be teleported outside the widget root. */
body.body.admin-bar:has(.mk-root) > .p-select-overlay {
  translate: 0 calc(-1 * var(--wp-admin--admin-bar--height, 32px));
}

@media (max-width: 782px) {
  body.body.admin-bar:has(.mk-root) > .p-select-overlay {
    translate: 0 calc(-1 * var(--wp-admin--admin-bar--height, 46px));
  }
}

body:has(.mk-root) .p-select-overlay .p-iconfield {
  position: relative;
  width: 100%;
}

body:has(.mk-root) .p-select-overlay .p-select-filter {
  box-sizing: border-box !important;
  width: 100% !important;
  height: 40px !important;
  padding: 8px 36px 8px 12px !important;
  font-family: inherit !important;
  font-size: 14px !important;
  line-height: 22px !important;
}

body:has(.mk-root) .p-select-overlay .p-inputicon {
  position: absolute !important;
  top: 50% !important;
  right: 12px !important;
  margin-top: 0 !important;
  transform: translateY(-50%);
  width: 18px;
  height: 18px;
  line-height: 1 !important;
}

body:has(.mk-root) .p-select-overlay .p-inputicon svg {
  display: block;
  width: 18px !important;
  height: 18px !important;
}

body:has(.mk-root) .p-select-overlay .p-select-option {
  padding: 10px 12px !important;
  font-size: 14px !important;
  line-height: 20px !important;
}

body:has(.mk-root) .p-select-overlay .p-select-option :where(span) {
  font-family: inherit !important;
  font-size: inherit !important;
  line-height: inherit !important;
}

@media (max-width: 640px) {
  .mk-root .mk-filter-row--top {
    align-items: stretch;
    flex-wrap: wrap;
    gap: 8px;
  }

  .mk-root .mk-filter-search {
    flex: 1 1 calc(100% - 84px);
    width: auto;
    min-width: 0;
  }

  .mk-root .mk-filter-age {
    flex: 0 0 76px;
    width: 76px;
  }

  .mk-root .mk-filter-row--top .mk-chip--clear {
    margin-top: 2px;
  }

  .mk-root .course-detail-dialog {
    box-sizing: border-box !important;
    flex-shrink: 0 !important;
    width: 90% !important;
    min-width: 0 !important;
    max-width: 90% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: 90% !important;
  }

  .mk-root .course-detail-dialog .p-dialog-content {
    display: flex;
    flex: 1 1 auto;
    min-height: 0;
    height: auto;
    max-height: none;
    overflow: hidden;
  }

  .mk-root .course-detail-dialog .detail-wrapper {
    flex: 1 1 auto;
    height: auto;
    max-height: none;
    min-height: 0;
  }

  .mk-root .course-detail-dialog .detail-scroll,
  .mk-root .course-detail-dialog .form-body {
    min-height: 0;
    overflow-y: auto;
  }

  .mk-root .course-detail-dialog .detail-sheet,
  .mk-root .course-detail-dialog .form-header,
  .mk-root .course-detail-dialog .form-body,
  .mk-root .course-detail-dialog .detail-footer {
    padding-right: 16px !important;
    padding-left: 16px !important;
  }

  .mk-root .course-detail-dialog .form-title {
    padding-right: 34px;
    font-size: 18px !important;
  }

  .mk-root .course-detail-dialog .phone-prefix {
    flex-basis: 96px;
    width: 96px;
    min-width: 96px;
  }
}