/*
 * Mokawala Components Foundation V1
 * Scope: reusable controls, information surfaces, decision objects, data and state patterns.
 * Languages: Arabic (RTL), French (LTR), English (LTR).
 */

.mkw-button {
  display: inline-flex;
  min-block-size: var(--wp--custom--target--minimum, 44px);
  align-items: center;
  justify-content: center;
  gap: var(--wp--preset--spacing--8, 8px);
  padding-block: var(--wp--preset--spacing--12, 12px);
  padding-inline: var(--wp--preset--spacing--16, 16px);
  border: 1px solid transparent;
  border-radius: var(--wp--custom--radius--button, 10px);
  font-family: inherit;
  font-size: var(--wp--preset--font-size--ui, 15px);
  font-weight: 600;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition:
    background-color var(--wp--custom--motion--fast, 120ms) ease,
    border-color var(--wp--custom--motion--fast, 120ms) ease,
    color var(--wp--custom--motion--fast, 120ms) ease,
    transform var(--wp--custom--motion--fast, 120ms) ease;
}

.mkw-button:hover {
  text-decoration: none;
}

.mkw-button:active {
  transform: translateY(1px);
}

.mkw-button:disabled,
.mkw-button[aria-disabled="true"] {
  cursor: not-allowed;
  opacity: 0.48;
  pointer-events: none;
}

.mkw-button--primary {
  background: var(--wp--preset--color--ink, #171717);
  border-color: var(--wp--preset--color--ink, #171717);
  color: var(--wp--preset--color--surface, #FFFFFF);
}

.mkw-button--primary:hover {
  background: var(--wp--preset--color--text-muted, #62605C);
  border-color: var(--wp--preset--color--text-muted, #62605C);
  color: var(--wp--preset--color--surface, #FFFFFF);
}

.mkw-button--brand {
  background: var(--wp--preset--color--accent, #F25A24);
  border-color: var(--wp--preset--color--accent, #F25A24);
  color: var(--wp--preset--color--ink, #171717);
}

.mkw-button--brand:hover {
  background: var(--wp--preset--color--accent-soft, #FFF0E9);
  color: var(--wp--preset--color--ink, #171717);
}

.mkw-button--secondary {
  background: var(--wp--preset--color--surface, #FFFFFF);
  border-color: var(--wp--preset--color--border, #DDD8D0);
  color: var(--wp--preset--color--ink, #171717);
}

.mkw-button--secondary:hover {
  background: var(--wp--preset--color--surface-soft, #F0ECE6);
  border-color: var(--wp--preset--color--ink, #171717);
  color: var(--wp--preset--color--ink, #171717);
}

.mkw-button--ghost {
  background: transparent;
  border-color: transparent;
  color: var(--wp--preset--color--ink, #171717);
}

.mkw-button--ghost:hover {
  background: var(--wp--preset--color--surface-soft, #F0ECE6);
  color: var(--wp--preset--color--ink, #171717);
}

.mkw-button--icon {
  inline-size: var(--wp--custom--target--minimum, 44px);
  min-inline-size: var(--wp--custom--target--minimum, 44px);
  padding: 0;
}

.mkw-field {
  display: grid;
  gap: var(--wp--preset--spacing--8, 8px);
}

.mkw-label {
  color: var(--wp--preset--color--ink, #171717);
  font-size: var(--wp--preset--font-size--ui, 15px);
  font-weight: 600;
  line-height: 1.4;
}

.mkw-help,
.mkw-field-error {
  margin: 0;
  font-size: var(--wp--preset--font-size--ui, 15px);
  line-height: 1.5;
}

.mkw-help {
  color: var(--wp--preset--color--text-muted, #62605C);
}

.mkw-field-error {
  color: var(--wp--preset--color--danger, #B42318);
}

.mkw-input,
.mkw-select,
.mkw-textarea,
.mkw-search {
  inline-size: 100%;
  min-block-size: var(--wp--custom--target--minimum, 44px);
  padding-block: var(--wp--preset--spacing--12, 12px);
  padding-inline: var(--wp--preset--spacing--16, 16px);
  background: var(--wp--preset--color--surface, #FFFFFF);
  border: 1px solid var(--wp--preset--color--border, #DDD8D0);
  border-radius: var(--wp--custom--radius--input, 12px);
  color: var(--wp--preset--color--ink, #171717);
  font: inherit;
  line-height: 1.4;
  text-align: start;
  transition:
    border-color var(--wp--custom--motion--fast, 120ms) ease,
    box-shadow var(--wp--custom--motion--fast, 120ms) ease,
    background-color var(--wp--custom--motion--fast, 120ms) ease;
}

.mkw-textarea {
  min-block-size: 120px;
  resize: vertical;
}

.mkw-input::placeholder,
.mkw-textarea::placeholder,
.mkw-search::placeholder {
  color: var(--wp--preset--color--text-muted, #62605C);
  opacity: 1;
}

.mkw-input:hover,
.mkw-select:hover,
.mkw-textarea:hover,
.mkw-search:hover {
  border-color: var(--wp--preset--color--text-muted, #62605C);
}

.mkw-input:focus,
.mkw-select:focus,
.mkw-textarea:focus,
.mkw-search:focus {
  border-color: var(--wp--preset--color--accent, #F25A24);
  box-shadow: 0 0 0 3px var(--wp--preset--color--accent-soft, #FFF0E9);
  outline: 0;
}

.mkw-field[data-state="error"] .mkw-input,
.mkw-field[data-state="error"] .mkw-select,
.mkw-field[data-state="error"] .mkw-textarea,
.mkw-field[data-state="error"] .mkw-search {
  border-color: var(--wp--preset--color--danger, #B42318);
}

.mkw-input:disabled,
.mkw-select:disabled,
.mkw-textarea:disabled,
.mkw-search:disabled {
  background: var(--wp--preset--color--surface-soft, #F0ECE6);
  color: var(--wp--preset--color--text-muted, #62605C);
  cursor: not-allowed;
  opacity: 0.72;
}

.mkw-choice {
  display: flex;
  min-block-size: var(--wp--custom--target--minimum, 44px);
  align-items: flex-start;
  gap: var(--wp--preset--spacing--12, 12px);
  padding-block: var(--wp--preset--spacing--8, 8px);
  color: var(--wp--preset--color--ink, #171717);
  cursor: pointer;
}

.mkw-choice input {
  inline-size: 20px;
  block-size: 20px;
  margin-block-start: 2px;
  accent-color: var(--wp--preset--color--accent, #F25A24);
  flex: 0 0 auto;
}

.mkw-choice input:disabled {
  cursor: not-allowed;
  opacity: 0.56;
}

.mkw-chip {
  display: inline-flex;
  min-block-size: 32px;
  align-items: center;
  gap: var(--wp--preset--spacing--8, 8px);
  padding-block: var(--wp--preset--spacing--4, 4px);
  padding-inline: var(--wp--preset--spacing--12, 12px);
  border: 1px solid var(--wp--preset--color--border, #DDD8D0);
  border-radius: 999px;
  background: var(--wp--preset--color--surface, #FFFFFF);
  color: var(--wp--preset--color--ink, #171717);
  font-size: var(--wp--preset--font-size--ui, 15px);
  font-weight: 500;
  line-height: 1.2;
}

.mkw-chip[data-tone="success"] {
  border-color: var(--wp--preset--color--success, #177245);
  color: var(--wp--preset--color--success, #177245);
}

.mkw-chip[data-tone="warning"] {
  border-color: var(--wp--preset--color--warning, #9A6700);
  color: var(--wp--preset--color--warning, #9A6700);
}

.mkw-chip[data-tone="danger"] {
  border-color: var(--wp--preset--color--danger, #B42318);
  color: var(--wp--preset--color--danger, #B42318);
}

.mkw-chip[data-tone="info"] {
  border-color: var(--wp--preset--color--info, #175CD3);
  color: var(--wp--preset--color--info, #175CD3);
}

.mkw-alert,
.mkw-status-banner {
  display: grid;
  gap: var(--wp--preset--spacing--8, 8px);
  padding: var(--wp--preset--spacing--16, 16px);
  border: 1px solid var(--wp--preset--color--border, #DDD8D0);
  border-radius: var(--wp--custom--radius--input, 12px);
  background: var(--wp--preset--color--surface, #FFFFFF);
}

.mkw-alert[data-tone="success"],
.mkw-status-banner[data-tone="success"] {
  border-inline-start: 4px solid var(--wp--preset--color--success, #177245);
}

.mkw-alert[data-tone="warning"],
.mkw-status-banner[data-tone="warning"] {
  border-inline-start: 4px solid var(--wp--preset--color--warning, #9A6700);
}

.mkw-alert[data-tone="danger"],
.mkw-status-banner[data-tone="danger"] {
  border-inline-start: 4px solid var(--wp--preset--color--danger, #B42318);
}

.mkw-alert[data-tone="info"],
.mkw-status-banner[data-tone="info"] {
  border-inline-start: 4px solid var(--wp--preset--color--info, #175CD3);
}

.mkw-alert__title,
.mkw-status-banner__title {
  margin: 0;
  font-weight: 600;
}

.mkw-alert__body,
.mkw-status-banner__body {
  margin: 0;
  color: var(--wp--preset--color--text-muted, #62605C);
}

.mkw-breadcrumbs ol {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--wp--preset--spacing--8, 8px);
  margin: 0;
  padding: 0;
  list-style: none;
  color: var(--wp--preset--color--text-muted, #62605C);
  font-size: var(--wp--preset--font-size--ui, 15px);
}

.mkw-breadcrumbs a {
  color: inherit;
}

.mkw-breadcrumbs [aria-current="page"] {
  color: var(--wp--preset--color--ink, #171717);
  font-weight: 500;
}

.mkw-tabs {
  display: grid;
  gap: var(--wp--preset--spacing--16, 16px);
}

.mkw-tabs__list {
  display: flex;
  max-inline-size: 100%;
  gap: var(--wp--preset--spacing--8, 8px);
  padding-block-end: var(--wp--preset--spacing--8, 8px);
  border-block-end: 1px solid var(--wp--preset--color--border, #DDD8D0);
  overflow-x: auto;
}

.mkw-tab {
  min-block-size: var(--wp--custom--target--minimum, 44px);
  padding-block: var(--wp--preset--spacing--8, 8px);
  padding-inline: var(--wp--preset--spacing--12, 12px);
  border: 0;
  border-block-end: 2px solid transparent;
  background: transparent;
  color: var(--wp--preset--color--text-muted, #62605C);
  font: inherit;
  font-weight: 500;
  white-space: nowrap;
  cursor: pointer;
}

.mkw-tab:hover {
  color: var(--wp--preset--color--ink, #171717);
}

.mkw-tab[aria-selected="true"] {
  border-block-end-color: var(--wp--preset--color--accent, #F25A24);
  color: var(--wp--preset--color--ink, #171717);
  font-weight: 600;
}

.mkw-faq {
  border-block-start: 1px solid var(--wp--preset--color--border, #DDD8D0);
}

.mkw-faq details {
  border-block-end: 1px solid var(--wp--preset--color--border, #DDD8D0);
}

.mkw-faq summary {
  min-block-size: var(--wp--custom--target--minimum, 44px);
  padding-block: var(--wp--preset--spacing--16, 16px);
  color: var(--wp--preset--color--ink, #171717);
  font-weight: 600;
  cursor: pointer;
}

.mkw-faq__body {
  padding-block-end: var(--wp--preset--spacing--16, 16px);
  color: var(--wp--preset--color--text-muted, #62605C);
}

.mkw-source {
  display: grid;
  gap: var(--wp--preset--spacing--12, 12px);
  padding: var(--wp--preset--spacing--16, 16px);
  border: 1px solid var(--wp--preset--color--border, #DDD8D0);
  border-radius: var(--wp--custom--radius--input, 12px);
  background: var(--wp--preset--color--surface-soft, #F0ECE6);
}

.mkw-source__eyebrow {
  color: var(--wp--preset--color--text-muted, #62605C);
  font-size: var(--wp--preset--font-size--ui, 15px);
  font-weight: 600;
}

.mkw-source__title,
.mkw-source__meta {
  margin: 0;
}

.mkw-source__meta {
  color: var(--wp--preset--color--text-muted, #62605C);
  font-size: var(--wp--preset--font-size--ui, 15px);
}

.mkw-card {
  display: grid;
  gap: var(--wp--preset--spacing--16, 16px);
  padding: var(--wp--preset--spacing--24, 24px);
  border: 1px solid var(--wp--preset--color--border, #DDD8D0);
  border-radius: var(--wp--custom--radius--panel, 16px);
  background: var(--wp--preset--color--surface, #FFFFFF);
  color: var(--wp--preset--color--ink, #171717);
}

.mkw-card__header,
.mkw-card__body,
.mkw-card__footer {
  display: grid;
  gap: var(--wp--preset--spacing--8, 8px);
}

.mkw-card__eyebrow {
  margin: 0;
  color: var(--wp--preset--color--text-muted, #62605C);
  font-size: var(--wp--preset--font-size--ui, 15px);
  font-weight: 600;
}

.mkw-card__title {
  margin: 0;
  font-size: var(--wp--preset--font-size--h3, 24px);
  line-height: 1.25;
}

.mkw-card__text {
  margin: 0;
  color: var(--wp--preset--color--text-muted, #62605C);
}

.mkw-programme-card {
  border-block-start: 4px solid var(--wp--preset--color--accent, #F25A24);
}

.mkw-tool-card {
  background: var(--wp--preset--color--ink, #171717);
  border-color: var(--wp--preset--color--ink, #171717);
  color: var(--wp--preset--color--surface, #FFFFFF);
}

.mkw-tool-card .mkw-card__eyebrow,
.mkw-tool-card .mkw-card__text {
  color: var(--wp--preset--color--border, #DDD8D0);
}

.mkw-tool-card .mkw-card__title {
  color: var(--wp--preset--color--surface, #FFFFFF);
}

.mkw-opportunity-card {
  background: var(--wp--preset--color--accent-soft, #FFF0E9);
  border-color: var(--wp--preset--color--accent, #F25A24);
}

.mkw-quick-facts {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--wp--preset--spacing--16, 16px);
  margin: 0;
}

.mkw-quick-facts > div {
  display: grid;
  gap: var(--wp--preset--spacing--4, 4px);
  padding-block-end: var(--wp--preset--spacing--16, 16px);
  border-block-end: 1px solid var(--wp--preset--color--border, #DDD8D0);
}

.mkw-quick-facts dt {
  color: var(--wp--preset--color--text-muted, #62605C);
  font-size: var(--wp--preset--font-size--ui, 15px);
  font-weight: 500;
}

.mkw-quick-facts dd {
  margin: 0;
  color: var(--wp--preset--color--ink, #171717);
  font-weight: 600;
}

.mkw-eligibility-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--wp--preset--spacing--16, 16px);
  align-items: center;
  padding-block: var(--wp--preset--spacing--12, 12px);
  border-block-end: 1px solid var(--wp--preset--color--border, #DDD8D0);
}

.mkw-eligibility-row__label,
.mkw-eligibility-row__value {
  margin: 0;
}

.mkw-eligibility-row__label {
  color: var(--wp--preset--color--text-muted, #62605C);
}

.mkw-eligibility-row__value {
  font-weight: 600;
  text-align: end;
}

.mkw-metric {
  display: grid;
  gap: var(--wp--preset--spacing--4, 4px);
}

.mkw-metric__label {
  color: var(--wp--preset--color--text-muted, #62605C);
  font-size: var(--wp--preset--font-size--ui, 15px);
  font-weight: 500;
}

.mkw-metric__value {
  color: var(--wp--preset--color--ink, #171717);
  font-size: var(--wp--preset--font-size--h2, 32px);
  font-weight: 600;
  line-height: 1.15;
}

.mkw-decision-result {
  display: grid;
  gap: var(--wp--preset--spacing--16, 16px);
  padding: var(--wp--preset--spacing--24, 24px);
  border: 1px solid var(--wp--preset--color--border, #DDD8D0);
  border-inline-start: 4px solid var(--wp--preset--color--accent, #F25A24);
  border-radius: var(--wp--custom--radius--panel, 16px);
  background: var(--wp--preset--color--surface, #FFFFFF);
}

.mkw-decision-result__title,
.mkw-decision-result__body {
  margin: 0;
}

.mkw-decision-result__body {
  color: var(--wp--preset--color--text-muted, #62605C);
}

.mkw-next-step {
  display: grid;
  gap: var(--wp--preset--spacing--16, 16px);
  padding: var(--wp--preset--spacing--24, 24px);
  border-radius: var(--wp--custom--radius--panel, 16px);
  background: var(--wp--preset--color--ink, #171717);
  color: var(--wp--preset--color--surface, #FFFFFF);
}

.mkw-next-step__title,
.mkw-next-step__body {
  margin: 0;
  color: inherit;
}

.mkw-next-step__body {
  color: var(--wp--preset--color--border, #DDD8D0);
}

.mkw-table-wrap {
  max-inline-size: 100%;
  border: 1px solid var(--wp--preset--color--border, #DDD8D0);
  border-radius: var(--wp--custom--radius--input, 12px);
  overflow-x: auto;
}

.mkw-table {
  inline-size: 100%;
  min-inline-size: 640px;
  border-collapse: collapse;
  background: var(--wp--preset--color--surface, #FFFFFF);
}

.mkw-table th,
.mkw-table td {
  padding-block: var(--wp--preset--spacing--12, 12px);
  padding-inline: var(--wp--preset--spacing--16, 16px);
  border-block-end: 1px solid var(--wp--preset--color--border, #DDD8D0);
  text-align: start;
  vertical-align: top;
}

.mkw-table th {
  background: var(--wp--preset--color--surface-soft, #F0ECE6);
  color: var(--wp--preset--color--ink, #171717);
  font-size: var(--wp--preset--font-size--ui, 15px);
  font-weight: 600;
}

.mkw-table tbody tr:last-child td {
  border-block-end: 0;
}

.mkw-table--comparison th:first-child,
.mkw-table--comparison td:first-child {
  font-weight: 600;
}

.mkw-state {
  display: grid;
  justify-items: start;
  gap: var(--wp--preset--spacing--12, 12px);
  padding: var(--wp--preset--spacing--24, 24px);
  border: 1px solid var(--wp--preset--color--border, #DDD8D0);
  border-radius: var(--wp--custom--radius--panel, 16px);
  background: var(--wp--preset--color--surface, #FFFFFF);
}

.mkw-state__title,
.mkw-state__body {
  margin: 0;
}

.mkw-state__body {
  color: var(--wp--preset--color--text-muted, #62605C);
}

.mkw-state[data-state="error"] {
  border-inline-start: 4px solid var(--wp--preset--color--danger, #B42318);
}

.mkw-state[data-state="success"] {
  border-inline-start: 4px solid var(--wp--preset--color--success, #177245);
}

.mkw-state[data-state="empty"] {
  background: var(--wp--preset--color--surface-soft, #F0ECE6);
}

.mkw-skeleton {
  display: block;
  inline-size: 100%;
  min-block-size: 16px;
  border-radius: var(--wp--custom--radius--button, 10px);
  background: var(--wp--preset--color--surface-soft, #F0ECE6);
  animation: mkw-skeleton-pulse 1.2s ease-in-out infinite alternate;
}

@keyframes mkw-skeleton-pulse {
  from {
    opacity: 0.56;
  }

  to {
    opacity: 1;
  }
}

@media (min-width: 768px) {
  .mkw-button {
    min-block-size: var(--wp--custom--target--minimum, 44px);
  }

  .mkw-quick-facts {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 767px) {
  .mkw-button {
    min-block-size: var(--wp--custom--target--mobile-preferred, 48px);
  }

  .mkw-eligibility-row {
    grid-template-columns: 1fr;
  }

  .mkw-eligibility-row__value {
    text-align: start;
  }

  .mkw-card,
  .mkw-decision-result,
  .mkw-next-step,
  .mkw-state {
    padding: var(--wp--preset--spacing--16, 16px);
  }
}