@layer components {

.wrkmc-service-card {
  display: flex;
  flex-direction: column;
  background: var(--wp--preset--color--bg-primary);
  border: 1px solid var(--wp--preset--color--border);
  border-radius: var(--wp--preset--border-radius--lg);
  padding: var(--wp--preset--spacing--4);
  gap: var(--wp--preset--spacing--3);
  transition: box-shadow var(--wp--preset--transition--base), border-color var(--wp--preset--transition--fast);
}

.wrkmc-service-card:hover {
  box-shadow: var(--wp--preset--shadow--lg);
  border-color: var(--wp--preset--color--brand-primary);
}

.wrkmc-service-card__image {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: var(--wp--preset--border-radius--md);
}

.wrkmc-service-card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  background: var(--wp--preset--color--brand-light);
  color: var(--wp--preset--color--brand-primary);
  border-radius: var(--wp--preset--border-radius--md);
  flex-shrink: 0;
}

.wrkmc-service-card__pillar-badge {
  display: inline-flex;
  align-items: center;
  padding: 2px var(--wp--preset--spacing--2);
  font-size: var(--wp--preset--font-size--xs);
  font-weight: var(--wp--preset--font-weight--medium);
  color: var(--wp--preset--color--brand-primary);
  background: var(--wp--preset--color--brand-light);
  border-radius: var(--wp--preset--border-radius--full);
  align-self: flex-start;
}

.wrkmc-service-card__title {
  font-size: var(--wp--preset--font-size--lg);
  font-weight: var(--wp--preset--font-weight--semibold);
  color: var(--wp--preset--color--text-primary);
  line-height: var(--wp--preset--line-height--tight);
  margin: 0;
}

.wrkmc-service-card__excerpt {
  font-size: var(--wp--preset--font-size--base);
  color: var(--wp--preset--color--text-secondary);
  line-height: var(--wp--preset--line-height--base);
  margin: 0;
  flex-grow: 1;
}

.wrkmc-service-card__steps {
  display: flex;
  flex-wrap: wrap;
  gap: var(--wp--preset--spacing--1);
  margin-top: auto;
}

.wrkmc-service-card__step {
  display: inline-flex;
  align-items: center;
  padding: 4px var(--wp--preset--spacing--2);
  font-size: var(--wp--preset--font-size--xs);
  font-weight: var(--wp--preset--font-weight--medium);
  color: var(--wp--preset--color--text-muted);
  background: var(--wp--preset--color--bg-tertiary);
  border-radius: var(--wp--preset--border-radius--full);
}

.wrkmc-service-card__price {
  font-size: var(--wp--preset--font-size--xl);
  font-weight: var(--wp--preset--font-weight--bold);
  color: var(--wp--preset--color--brand-primary);
  font-variant-numeric: tabular-nums;
}

.wrkmc-service-card__button {
  margin-top: auto;
  width: 100%;
  text-align: center;
}

.wrkmc-services-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--wp--preset--spacing--4);
}

@media (min-width: 40rem) {
  .wrkmc-services-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 64rem) {
  .wrkmc-services-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.wrkmc-pricing {
  display: flex;
  flex-direction: column;
  gap: var(--wp--preset--spacing--6);
}

.wrkmc-pricing__toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--wp--preset--spacing--3);
  background: var(--wp--preset--color--bg-secondary);
  border: 1px solid var(--wp--preset--color--border);
  border-radius: var(--wp--preset--border-radius--full);
  padding: var(--wp--preset--spacing--1) var(--wp--preset--spacing--2);
  align-self: flex-start;
}

.wrkmc-pricing__toggle-button {
  display: flex;
  align-items: center;
  gap: var(--wp--preset--spacing--2);
  padding: var(--wp--preset--spacing--1) var(--wp--preset--spacing--3);
  font-size: var(--wp--preset--font-size--sm);
  font-weight: var(--wp--preset--font-weight--medium);
  color: var(--wp--preset--color--text-secondary);
  background: transparent;
  border: none;
  border-radius: var(--wp--preset--border-radius--full);
  cursor: pointer;
  transition: all var(--wp--preset--transition--fast);
}

.wrkmc-pricing__toggle-button[aria-pressed="true"] {
  color: var(--wp--preset--color--bg-primary);
  background: var(--wp--preset--color--brand-primary);
  box-shadow: var(--wp--preset--shadow--sm);
}

.wrkmc-pricing__toggle-button:focus-visible {
  outline: 3px solid var(--wp--preset--color--border-focus);
  outline-offset: 2px;
}

.wrkmc-pricing__head {
  text-align: center;
  max-width: 60ch;
  margin-inline: auto;
}

.wrkmc-pricing__title {
  font-size: var(--wp--preset--font-size--2xl);
  font-weight: var(--wp--preset--font-weight--bold);
  color: var(--wp--preset--color--text-primary);
  margin: 0 0 var(--wp--preset--spacing--2);
}

.wrkmc-pricing__subtitle {
  font-size: var(--wp--preset--font-size--base);
  color: var(--wp--preset--color--text-secondary);
  margin: 0;
}

.wrkmc-price-card {
  display: flex;
  flex-direction: column;
  background: var(--wp--preset--color--bg-primary);
  border: 1px solid var(--wp--preset--color--border);
  border-radius: var(--wp--preset--border-radius--lg);
  padding: var(--wp--preset--spacing--5);
  gap: var(--wp--preset--spacing--4);
  position: relative;
  transition: box-shadow var(--wp--preset--transition--base), border-color var(--wp--preset--transition--fast);
}

.wrkmc-price-card--featured {
  border-color: var(--wp--preset--color--brand-primary);
  box-shadow: var(--wp--preset--shadow--xl);
}

.wrkmc-price-card--featured::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: var(--wp--preset--border-radius--lg);
  padding: 2px;
  background: linear-gradient(135deg, var(--wp--preset--color--brand-primary), var(--wp--preset--color--brand-hover));
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}

.wrkmc-price-card.has-badge::after {
  content: attr(data-badge);
  position: absolute;
  top: calc(var(--wp--preset--spacing--5) * -1);
  inset-inline-start: 50%;
  transform: translateX(-50%);
  display: inline-flex;
  align-items: center;
  padding: 4px var(--wp--preset--spacing--3);
  font-size: var(--wp--preset--font-size--xs);
  font-weight: var(--wp--preset--font-weight--semibold);
  color: var(--wp--preset--color--bg-primary);
  background: var(--wp--preset--color--warning);
  border-radius: var(--wp--preset--border-radius--full);
  white-space: nowrap;
  box-shadow: var(--wp--preset--shadow--md);
}

.wrkmc-price-card__price {
  display: flex;
  align-items: baseline;
  gap: var(--wp--preset--spacing--1);
}

.wrkmc-price-card__amount {
  font-size: var(--wp--preset--font-size--3xl);
  font-weight: var(--wp--preset--font-weight--bold);
  color: var(--wp--preset--color--text-primary);
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

.wrkmc-price-card__currency {
  font-size: var(--wp--preset--font-size--lg);
  font-weight: var(--wp--preset--font-weight--medium);
  color: var(--wp--preset--color--text-secondary);
}

.wrkmc-price-card__period {
  font-size: var(--wp--preset--font-size--sm);
  color: var(--wp--preset--color--text-muted);
  margin-top: var(--wp--preset--spacing--1);
}

.wrkmc-price-card__features {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--wp--preset--spacing--2);
  flex-grow: 1;
}

.wrkmc-price-card__feature {
  display: flex;
  align-items: flex-start;
  gap: var(--wp--preset--spacing--2);
  font-size: var(--wp--preset--font-size--base);
  color: var(--wp--preset--color--text-secondary);
  line-height: var(--wp--preset--line-height--base);
}

.wrkmc-price-card__feature::before {
  content: "";
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23047857' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  margin-top: 2px;
}

.wrkmc-price-card__button {
  width: 100%;
  text-align: center;
  margin-top: auto;
}

.wrkmc-status-badge {
  display: inline-flex;
  align-items: center;
  padding: 4px var(--wp--preset--spacing--2);
  font-size: var(--wp--preset--font-size--xs);
  font-weight: var(--wp--preset--font-weight--semibold);
  border-radius: var(--wp--preset--border-radius--full);
  white-space: nowrap;
  line-height: 1;
}

.wrkmc-status-badge--new {
  background: var(--wp--preset--color--brand-light);
  color: var(--wp--preset--color--brand-dark);
}

.wrkmc-status-badge--awaiting-payment {
  background: var(--wp--preset--color--warning-bg);
  color: var(--wp--preset--color--warning);
}

.wrkmc-status-badge--paid {
  background: var(--wp--preset--color--success-bg);
  color: var(--wp--preset--color--success);
}

.wrkmc-status-badge--completed {
  background: var(--wp--preset--color--success-bg);
  color: var(--wp--preset--color--success);
}

.wrkmc-status-badge--rejected {
  background: var(--wp--preset--color--error-bg);
  color: var(--wp--preset--color--error);
}

.wrkmc-status-badge--refunded {
  background: var(--wp--preset--color--error-bg);
  color: var(--wp--preset--color--error);
}

.wrkmc-status-badge--failed {
  background: var(--wp--preset--color--error-bg);
  color: var(--wp--preset--color--error);
}

.wrkmc-status-badge--pending {
  background: var(--wp--preset--color--brand-light);
  color: var(--wp--preset--color--brand-dark);
}

.wrkmc-status-badge--provisioning {
  background: var(--wp--preset--color--brand-light);
  color: var(--wp--preset--color--brand-dark);
}

.wrkmc-status-badge--active {
  background: var(--wp--preset--color--success-bg);
  color: var(--wp--preset--color--success);
}

.wrkmc-status-badge--past-due {
  background: var(--wp--preset--color--warning-bg);
  color: var(--wp--preset--color--warning);
}

.wrkmc-status-badge--suspended {
  background: var(--wp--preset--color--bg-tertiary);
  color: var(--wp--preset--color--text-muted);
}

.wrkmc-status-badge--paused {
  background: var(--wp--preset--color--warning-bg);
  color: var(--wp--preset--color--warning);
}

.wrkmc-status-badge--expired {
  background: var(--wp--preset--color--bg-tertiary);
  color: var(--wp--preset--color--text-muted);
}

.wrkmc-status-badge--cancelled {
  background: var(--wp--preset--color--bg-tertiary);
  color: var(--wp--preset--color--text-muted);
}

@media (prefers-color-scheme: dark) {
  .wrkmc-status-badge--new {
    background: color-mix(in srgb, var(--wp--preset--color--brand-primary) 20%, transparent);
    color: color-mix(in srgb, var(--wp--preset--color--brand-light) 80%, var(--wp--preset--color--bg-primary));
  }
  .wrkmc-status-badge--awaiting-payment,
  .wrkmc-status-badge--paused {
    background: color-mix(in srgb, var(--wp--preset--color--warning) 20%, transparent);
    color: color-mix(in srgb, var(--wp--preset--color--warning-bg) 80%, var(--wp--preset--color--bg-primary));
  }
  .wrkmc-status-badge--paid,
  .wrkmc-status-badge--completed,
  .wrkmc-status-badge--active {
    background: color-mix(in srgb, var(--wp--preset--color--success) 20%, transparent);
    color: color-mix(in srgb, var(--wp--preset--color--success-bg) 80%, var(--wp--preset--color--bg-primary));
  }
  .wrkmc-status-badge--rejected,
  .wrkmc-status-badge--refunded,
  .wrkmc-status-badge--failed {
    background: color-mix(in srgb, var(--wp--preset--color--error) 20%, transparent);
    color: color-mix(in srgb, var(--wp--preset--color--error-bg) 80%, var(--wp--preset--color--bg-primary));
  }
  .wrkmc-status-badge--pending,
  .wrkmc-status-badge--provisioning {
    background: color-mix(in srgb, var(--wp--preset--color--brand-primary) 20%, transparent);
    color: color-mix(in srgb, var(--wp--preset--color--brand-light) 80%, var(--wp--preset--color--bg-primary));
  }
  .wrkmc-status-badge--past-due {
    background: color-mix(in srgb, var(--wp--preset--color--warning) 20%, transparent);
    color: color-mix(in srgb, var(--wp--preset--color--warning-bg) 80%, var(--wp--preset--color--bg-primary));
  }
  .wrkmc-status-badge--suspended,
  .wrkmc-status-badge--expired,
  .wrkmc-status-badge--cancelled {
    background: color-mix(in srgb, var(--wp--preset--color--text-muted) 15%, transparent);
    color: var(--wp--preset--color--text-muted);
  }
}

.wrkmc-data-table {
  width: 100%;
  overflow-x: auto;
  border: 1px solid var(--wp--preset--color--border);
  border-radius: var(--wp--preset--border-radius--lg);
  background: var(--wp--preset--color--bg-primary);
}

.wrkmc-data-table__table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--wp--preset--font-size--sm);
}

.wrkmc-data-table__thead {
  position: sticky;
  top: 0;
  z-index: 1;
  background: var(--wp--preset--color--bg-secondary);
}

.wrkmc-data-table__th {
  padding: var(--wp--preset--spacing--3) var(--wp--preset--spacing--4);
  font-weight: var(--wp--preset--font-weight--semibold);
  color: var(--wp--preset--color--text-primary);
  text-align: start;
  border-bottom: 2px solid var(--wp--preset--color--border);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.wrkmc-data-table__td {
  padding: var(--wp--preset--spacing--3) var(--wp--preset--spacing--4);
  color: var(--wp--preset--color--text-secondary);
  border-bottom: 1px solid var(--wp--preset--color--border);
  vertical-align: middle;
}

.wrkmc-data-table__tr:last-child .wrkmc-data-table__td {
  border-bottom: none;
}

.wrkmc-data-table__tr:hover {
  background: var(--wp--preset--color--bg-secondary);
}

.wrkmc-data-table__row--muted .wrkmc-data-table__td {
  color: var(--wp--preset--color--text-muted);
}

@media (max-width: 39.9375rem) {
  .wrkmc-data-table__thead {
    display: none;
  }
  .wrkmc-data-table__table,
  .wrkmc-data-table__tbody,
  .wrkmc-data-table__tr,
  .wrkmc-data-table__td {
    display: block;
    width: 100%;
  }
  .wrkmc-data-table__tr {
    padding: var(--wp--preset--spacing--4);
    border-bottom: 1px solid var(--wp--preset--color--border);
    background: var(--wp--preset--color--bg-primary);
  }
  .wrkmc-data-table__tr:last-child {
    border-bottom: none;
  }
  .wrkmc-data-table__td {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--wp--preset--spacing--2) 0;
    border-bottom: 1px solid var(--wp--preset--color--border);
    gap: var(--wp--preset--spacing--3);
  }
  .wrkmc-data-table__td:last-child {
    border-bottom: none;
  }
  .wrkmc-data-table__td::before {
    content: attr(data-label);
    font-weight: var(--wp--preset--font-weight--medium);
    color: var(--wp--preset--color--text-primary);
    flex-shrink: 0;
  }
}

.wrkmc-form-field {
  display: flex;
  flex-direction: column;
  gap: var(--wp--preset--spacing--1);
}

.wrkmc-form-field__label {
  display: flex;
  align-items: center;
  gap: var(--wp--preset--spacing--1);
  font-size: var(--wp--preset--font-size--sm);
  font-weight: var(--wp--preset--font-weight--medium);
  color: var(--wp--preset--color--text-primary);
}

.wrkmc-form-field__label--required::after {
  content: "*";
  color: var(--wp--preset--color--error);
  margin-inline-start: 2px;
}

.wrkmc-form-field__input,
.wrkmc-form-field__select {
  width: 100%;
  padding: var(--wp--preset--spacing--2) var(--wp--preset--spacing--3);
  font-size: var(--wp--preset--font-size--base);
  font-family: var(--wp--preset--font-family--base);
  color: var(--wp--preset--color--text-primary);
  background: var(--wp--preset--color--bg-primary);
  border: 1px solid var(--wp--preset--color--border);
  border-radius: var(--wp--preset--border-radius--md);
  transition: border-color var(--wp--preset--transition--fast), box-shadow var(--wp--preset--transition--fast);
}

.wrkmc-form-field__input::placeholder {
  color: var(--wp--preset--color--text-muted);
}

.wrkmc-form-field__input:hover,
.wrkmc-form-field__select:hover {
  border-color: var(--wp--preset--color--text-muted);
}

.wrkmc-form-field__input:focus,
.wrkmc-form-field__select:focus {
  outline: none;
  border-color: var(--wp--preset--color--border-focus);
  box-shadow: var(--wp--preset--shadow--focus);
}

.wrkmc-form-field__input.is-error,
.wrkmc-form-field__select.is-error {
  border-color: var(--wp--preset--color--error);
}

.wrkmc-form-field__input.is-error:focus,
.wrkmc-form-field__select.is-error:focus {
  box-shadow: 0 0 0 3px var(--wp--preset--color--error-bg);
}

.wrkmc-form-field__hint {
  font-size: var(--wp--preset--font-size--xs);
  color: var(--wp--preset--color--text-muted);
}

.wrkmc-form-field__error {
  display: flex;
  align-items: center;
  gap: var(--wp--preset--spacing--1);
  font-size: var(--wp--preset--font-size--xs);
  color: var(--wp--preset--color--error);
}

.wrkmc-form-field__error::before {
  content: "";
  width: 12px;
  height: 12px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b91c1c' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='8' x2='12' y2='12'%3E%3C/line%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'%3E%3C/line%3E%3C/svg%3E");
  background-size: contain;
  flex-shrink: 0;
}

.wrkmc-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: var(--wp--preset--spacing--8) var(--wp--preset--spacing--4);
  gap: var(--wp--preset--spacing--4);
}

.wrkmc-empty-state__icon {
  width: 80px;
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--wp--preset--color--bg-tertiary);
  border-radius: var(--wp--preset--border-radius--full);
  color: var(--wp--preset--color--text-muted);
  flex-shrink: 0;
}

.wrkmc-empty-state__title {
  font-size: var(--wp--preset--font-size--xl);
  font-weight: var(--wp--preset--font-weight--semibold);
  color: var(--wp--preset--color--text-primary);
  margin: 0;
}

.wrkmc-empty-state__text {
  font-size: var(--wp--preset--font-size--base);
  color: var(--wp--preset--color--text-secondary);
  max-width: 40ch;
  margin: 0;
  line-height: var(--wp--preset--line-height--base);
}

.wrkmc-empty-state__action {
  margin-top: var(--wp--preset--spacing--2);
}

.wrkmc-empty-state.is-empty {
  display: flex;
}

/* ==========================================================================
   W8 P1 — أنماط الصفحة الرئيسية (patterns/) + front-page.php
   مكوّنات عرض مقترنت للاستخدام في الأنماط. رموز tokens فقط (بلا ألوان حرفية).
   ========================================================================== */

/* تباعد أفقي للقسم حتى لا يلامس المحتوى حواف الشاشة (موبايل أولاً) */
.wrkmc-section {
  padding-inline: var(--wp--preset--spacing--4);
}

/* ترويسة القسم الموحدة: عنوان + وصف */
.wrkmc-section__header {
  display: grid;
  gap: var(--wp--preset--spacing--2);
  margin-block-end: var(--wp--preset--spacing--5);
}
.wrkmc-section__title {
  margin: 0;
}
.wrkmc-section__subtitle {
  margin: 0;
  max-width: 60ch;
  color: var(--wp--preset--color--text-secondary);
}
.wrkmc-section__cta {
  display: flex;
  justify-content: center;
  margin-block-start: var(--wp--preset--spacing--5);
}

/* صور ولوحات البطل: تملأ المساحة دون تشويه */
.wrkmc-hero__image,
.wrkmc-hero__placeholder {
  display: block;
  inline-size: 100%;
  block-size: auto;
}

/* صيغتا زر تستخدمهما بطاقة السعر (templates/parts/pricing-table.php) */
.wrkmc-button--outline {
  background: var(--wp--preset--color--bg-primary);
  color: var(--wp--preset--color--brand-primary);
  border-color: var(--wp--preset--color--brand-primary);
}
.wrkmc-button--outline:hover:not(:disabled),
.wrkmc-button--outline:focus:not(:disabled) {
  background: var(--wp--preset--color--brand-light);
  border-color: var(--wp--preset--color--brand-primary);
}
.wrkmc-button--block {
  display: block;
  inline-size: 100%;
  text-align: center;
}

/* ترويسة قسم التسعير: مسافة قبل بطاقات الأسعار */
.wrkmc-pricing__head {
  margin-block-end: var(--wp--preset--spacing--5);
}

/* صيغ الحالة التي يُخرجها wrkmc_status_badge() (نجاح/تحذير/خطأ/معلومة) */
.wrkmc-status-badge--success {
  background: var(--wp--preset--color--success-bg);
  color: var(--wp--preset--color--success);
}
.wrkmc-status-badge--warning {
  background: var(--wp--preset--color--warning-bg);
  color: var(--wp--preset--color--warning);
}
.wrkmc-status-badge--error {
  background: var(--wp--preset--color--error-bg);
  color: var(--wp--preset--color--error);
}
.wrkmc-status-badge--info {
  background: var(--wp--preset--color--brand-light);
  color: var(--wp--preset--color--brand-dark);
}

/* FAQ — عناصر details/summary داخل بطاقة */
.wrkmc-card__faq-item {
  margin: 0;
  padding-block: var(--wp--preset--spacing--3);
  border-block-start: 1px solid var(--wp--preset--color--border);
}
.wrkmc-card__faq-item:first-child {
  border-block-start: 0;
  padding-block-start: 0;
}
.wrkmc-card__faq-question {
  cursor: pointer;
  color: var(--wp--preset--color--text-primary);
  font-weight: var(--wp--preset--font-weight--semibold);
}
.wrkmc-card__faq-answer {
  margin: var(--wp--preset--spacing--2) 0 0;
  color: var(--wp--preset--color--text-secondary);
}
}