/* WFARHALI Order UI 12.1 — precision mobile layer (FR + AR) */
:root {
  --wf12-brand: #6c2bd9;
  --wf12-brand-dark: #5017b8;
  --wf12-ink: #171122;
  --wf12-muted: #78717f;
  --wf12-line: #e5e0ea;
  --wf12-soft: #f7f2ff;
  --wf12-bg: #f8f7fc;
  --wf12-success: #21a953;
  --wf12-radius: 22px;
  --wf12-shadow: 0 12px 34px rgba(43, 22, 72, .055);
}

body.wf-order-shell-page {
  background:
    radial-gradient(circle at 16% 8%, rgba(108, 43, 217, .055), transparent 24rem),
    var(--wf12-bg) !important;
  color: var(--wf12-ink);
}

body.wf-order-shell-page .wf10-card,
body.wf-order-shell-page .wf10-summary-card {
  border-color: var(--wf12-line);
  border-radius: var(--wf12-radius);
  box-shadow: var(--wf12-shadow);
}

/* Product accordion: functional at every viewport width. */
body.wf-order-shell-page .wf10-item-head {
  position: relative;
}

body.wf-order-shell-page .wf12-head-total {
  margin-inline-start: auto;
  color: var(--wf12-brand);
  font-size: 13px;
  font-weight: 850;
  white-space: nowrap;
}

body.wf-order-shell-page .wf12-toggle {
  width: 42px;
  height: 42px;
  flex: 0 0 42px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 12px;
  background: transparent;
  color: #332742;
  cursor: pointer;
}

body.wf-order-shell-page .wf12-toggle:hover {
  background: var(--wf12-soft);
  color: var(--wf12-brand);
}

body.wf-order-shell-page .wf12-toggle:focus-visible,
body.wf-order-shell-page .wf12-edit:focus-visible,
body.wf-order-shell-page .wf12-back:focus-visible,
body.wf-order-shell-page .wf12-help:focus-visible {
  outline: 3px solid rgba(108, 43, 217, .22);
  outline-offset: 2px;
}

body.wf-order-shell-page .wf12-toggle svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform .2s ease;
}

body.wf-order-shell-page .wf10-item:not(.wf12-collapsed) .wf12-toggle svg {
  transform: rotate(180deg);
}

body.wf-order-shell-page .wf10-item.wf12-collapsed > :not(.wf10-item-head) {
  display: none !important;
}

body.wf-order-shell-page .wf10-item.wf12-collapsed .wf10-item-head {
  margin-bottom: 0 !important;
}

body.wf-order-shell-page .wf12-back,
body.wf-order-shell-page .wf12-help {
  display: none;
}

/* UI-only review blocks generated from the existing, backend-bound fields. */
body.wf-order-shell-page .wf12-step2-extra,
body.wf-order-shell-page .wf12-review {
  display: none;
}

body.wf-order-shell-page .wf12-panel {
  border: 1px solid var(--wf12-line);
  border-radius: var(--wf12-radius);
  background: #fff;
  box-shadow: var(--wf12-shadow);
}

body.wf-order-shell-page .wf12-notice {
  display: grid;
  grid-template-columns: 48px 1fr;
  gap: 14px;
  align-items: center;
  padding: 16px;
  border: 8px solid #fff;
  border-radius: var(--wf12-radius);
  background: linear-gradient(135deg, #f6f0ff, #fbf9ff);
}

body.wf-order-shell-page .wf12-notice-icon,
body.wf-order-shell-page .wf12-review-icon {
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  border-radius: 13px;
  background: var(--wf12-soft);
  color: var(--wf12-brand);
  font-size: 22px;
  font-weight: 900;
}

body.wf-order-shell-page .wf12-notice b {
  display: block;
  color: var(--wf12-brand);
  font-size: 14px;
}

body.wf-order-shell-page .wf12-notice small {
  display: block;
  margin-top: 4px !important;
  color: var(--wf12-muted);
  font-size: 12px;
  line-height: 1.45 !important;
}

body.wf-order-shell-page .wf12-mini-products {
  margin-top: 14px;
  padding: 18px;
}

body.wf-order-shell-page .wf12-mini-row,
body.wf-order-shell-page .wf12-review-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

body.wf-order-shell-page .wf12-mini-row b,
body.wf-order-shell-page .wf12-review-head h2 {
  margin: 0;
  color: var(--wf12-ink);
  font-size: 18px;
  font-weight: 850;
}

body.wf-order-shell-page .wf12-edit {
  min-height: 42px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  border: 0;
  border-radius: 11px;
  background: transparent;
  color: var(--wf12-brand);
  font: 800 13px Inter, Arial, sans-serif;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}

body.wf-order-shell-page .wf12-review {
  gap: 14px;
}

body.wf-order-shell-page .wf12-review-card {
  padding: 18px;
}

body.wf-order-shell-page .wf12-review-list {
  display: grid;
  gap: 0;
  margin-top: 10px;
}

body.wf-order-shell-page .wf12-review-product {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  padding: 12px 0;
  border-top: 1px solid #eee9f2;
}

body.wf-order-shell-page .wf12-review-product:first-child {
  border-top: 0;
}

body.wf-order-shell-page .wf12-review-product b,
body.wf-order-shell-page .wf12-review-product small {
  display: block;
}

body.wf-order-shell-page .wf12-review-product b {
  color: #30263b;
  font-size: 13px;
}

body.wf-order-shell-page .wf12-review-product small {
  margin-top: 3px !important;
  color: #8a8291;
  font-size: 11px;
}

body.wf-order-shell-page .wf12-review-product strong {
  color: var(--wf12-ink);
  font-size: 13px;
  white-space: nowrap;
}

body.wf-order-shell-page .wf12-delivery-value {
  display: grid;
  grid-template-columns: 48px 1fr;
  gap: 12px;
  align-items: center;
  margin-top: 12px;
}

body.wf-order-shell-page .wf12-delivery-value b {
  font-size: 14px;
}

@media (max-width: 760px) {
  body.wf-order-shell-page {
    padding-bottom: calc(104px + env(safe-area-inset-bottom)) !important;
  }

  body.wf-order-shell-page .wf10-header {
    position: sticky;
    top: 0;
    z-index: 1100;
    border-bottom: 1px solid #ece8f0;
    background: rgba(255, 255, 255, .97);
    box-shadow: 0 5px 18px rgba(43, 24, 63, .035);
    backdrop-filter: blur(18px);
  }

  body.wf-order-shell-page .wf10-header-inner {
    position: relative;
    width: 100% !important;
    height: 70px !important;
    padding: 0 18px;
  }

  body.wf-order-shell-page .wf10-brand {
    position: absolute;
    inset-inline-start: 50%;
    top: 50%;
    z-index: 2;
    transform: translate(-50%, -50%);
  }

  html[dir="rtl"] body.wf-order-shell-page .wf10-brand {
    transform: translate(50%, -50%);
  }

  body.wf-order-shell-page .wf10-brand img {
    width: 146px !important;
    max-height: 48px;
    object-fit: contain;
  }

  body.wf-order-shell-page .wf10-header-actions {
    width: 100%;
    display: flex !important;
    align-items: center;
    justify-content: space-between;
  }

  body.wf-order-shell-page .wf10-menu-toggle {
    order: -1;
    width: 46px !important;
    height: 46px !important;
    display: block !important;
    margin: 0 !important;
    border-radius: 14px;
    border-color: #ded8e5;
    background: #fff;
  }

  body.wf-order-shell-page .wf10-account-link {
    width: 46px;
    height: 46px;
    display: grid !important;
    place-items: center;
    margin: 0 !important;
    padding: 0;
    border-radius: 14px;
  }

  body.wf-order-shell-page .wf10-account-link span {
    display: none;
  }

  body.wf-order-shell-page .wf10-account-link svg {
    width: 23px;
    height: 23px;
  }

  body.wf-order-shell-page[data-wf12-step="2"] .wf10-menu-toggle,
  body.wf-order-shell-page[data-wf12-step="2"] .wf10-account-link,
  body.wf-order-shell-page[data-wf12-step="3"] .wf10-menu-toggle,
  body.wf-order-shell-page[data-wf12-step="3"] .wf10-account-link {
    display: none !important;
  }

  body.wf-order-shell-page[data-wf12-step="2"] .wf12-back,
  body.wf-order-shell-page[data-wf12-step="2"] .wf12-help,
  body.wf-order-shell-page[data-wf12-step="3"] .wf12-back,
  body.wf-order-shell-page[data-wf12-step="3"] .wf12-help {
    width: 46px;
    height: 46px;
    display: grid;
    place-items: center;
    border: 1px solid #ded8e5;
    border-radius: 14px;
    background: #fff;
    color: #1f1829;
    text-decoration: none;
  }

  body.wf-order-shell-page .wf12-back {
    order: -1;
    font-size: 28px;
    line-height: 1;
    cursor: pointer;
  }

  body.wf-order-shell-page .wf12-help {
    font-size: 20px;
    font-weight: 900;
  }

  body.wf-order-shell-page .wf-order10 {
    padding: 20px 0 20px !important;
  }

  body.wf-order-shell-page .wf10-shell {
    width: min(100% - 28px, 680px) !important;
    display: flex;
    flex-direction: column;
  }

  body.wf-order-shell-page .wf10-hero { order: 1; }
  body.wf-order-shell-page .wf10-steps { order: 2; }
  body.wf-order-shell-page .wf10-layout { order: 3; }

  body.wf-order-shell-page[data-wf12-step="2"] .wf10-steps,
  body.wf-order-shell-page[data-wf12-step="3"] .wf10-steps { order: 1; }
  body.wf-order-shell-page[data-wf12-step="2"] .wf10-hero,
  body.wf-order-shell-page[data-wf12-step="3"] .wf10-hero { order: 2; }

  body.wf-order-shell-page .wf10-hero {
    gap: 14px;
    padding: 14px 2px 22px !important;
  }

  body.wf-order-shell-page[data-wf12-step="2"] .wf10-hero,
  body.wf-order-shell-page[data-wf12-step="3"] .wf10-hero {
    padding-top: 26px !important;
  }

  body.wf-order-shell-page[data-wf12-step="2"] .wf10-hero-icon,
  body.wf-order-shell-page[data-wf12-step="3"] .wf10-hero-icon {
    display: none;
  }

  body.wf-order-shell-page .wf10-hero-icon {
    width: 52px !important;
    height: 52px !important;
    border-radius: 16px !important;
  }

  body.wf-order-shell-page .wf10-hero h1 {
    margin: 0;
    color: #100b19;
    font-size: clamp(28px, 7.1vw, 35px) !important;
    line-height: 1.12;
    letter-spacing: -.9px;
  }

  body.wf-order-shell-page .wf10-hero p {
    margin-top: 8px;
    color: #7d7684;
    font-size: 15px !important;
    line-height: 1.55 !important;
  }

  body.wf-order-shell-page .wf10-steps {
    width: 100%;
    grid-template-columns: 1fr 36px 1fr 36px 1fr !important;
    margin: 0 0 20px !important;
    padding: 16px 12px !important;
    border: 1px solid var(--wf12-line) !important;
    border-radius: var(--wf12-radius) !important;
    background: #fff !important;
    box-shadow: var(--wf12-shadow) !important;
  }

  body.wf-order-shell-page[data-wf12-step="2"] .wf10-steps,
  body.wf-order-shell-page[data-wf12-step="3"] .wf10-steps {
    margin-top: 0 !important;
    border-color: transparent !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  body.wf-order-shell-page .wf10-steps button {
    min-width: 0;
    display: flex !important;
    flex-direction: column;
    justify-content: center;
    gap: 7px !important;
    color: #8b8491;
    text-align: center !important;
  }

  body.wf-order-shell-page .wf10-steps button > span {
    width: 42px !important;
    height: 42px !important;
    border: 1.5px solid #d9d3df !important;
    color: #837b8a;
    font-size: 16px;
  }

  body.wf-order-shell-page .wf10-steps button b {
    max-width: 112px;
    color: #7f7786;
    font-size: 12px !important;
    line-height: 1.25;
  }

  body.wf-order-shell-page .wf10-steps button small {
    display: none !important;
  }

  body.wf-order-shell-page .wf10-steps button.is-active > span {
    border-color: var(--wf12-brand) !important;
    background: var(--wf12-brand) !important;
    color: #fff !important;
    box-shadow: 0 8px 22px rgba(108, 43, 217, .24);
  }

  body.wf-order-shell-page .wf10-steps button.is-active b {
    color: var(--wf12-brand) !important;
  }

  body.wf-order-shell-page .wf10-steps button.is-complete > span {
    border-color: var(--wf12-success) !important;
    background: var(--wf12-success) !important;
    color: transparent !important;
    font-size: 0 !important;
  }

  body.wf-order-shell-page .wf10-steps button.is-complete > span::before {
    content: "\2713";
    color: #fff;
    font-size: 22px;
    font-weight: 900;
  }

  body.wf-order-shell-page .wf10-steps button.is-complete b {
    color: #77717d;
  }

  body.wf-order-shell-page .wf10-steps > i {
    background: #ddd8e2;
  }

  body.wf-order-shell-page[data-wf12-step="2"] .wf10-steps > i:first-of-type,
  body.wf-order-shell-page[data-wf12-step="3"] .wf10-steps > i {
    height: 2px;
    background: var(--wf12-success);
  }

  body.wf-order-shell-page .wf10-layout {
    display: block !important;
  }

  body.wf-order-shell-page .wf10-form {
    display: block !important;
  }

  body.wf-order-shell-page .wf10-form > .wf10-card,
  body.wf-order-shell-page .wf12-step2-extra,
  body.wf-order-shell-page .wf12-review {
    display: none !important;
  }

  body.wf-order-shell-page[data-wf12-step="1"] .wf10-form > .wf10-products,
  body.wf-order-shell-page[data-wf12-step="2"] .wf10-form > .wf10-delivery {
    display: block !important;
  }

  body.wf-order-shell-page[data-wf12-step="2"] .wf12-step2-extra {
    display: block !important;
    margin-top: 14px;
  }

  body.wf-order-shell-page[data-wf12-step="3"] .wf10-form > .wf10-confirm {
    display: block !important;
  }

  body.wf-order-shell-page[data-wf12-step="3"] .wf12-review {
    display: grid !important;
    margin-bottom: 14px;
  }

  body.wf-order-shell-page .wf10-card {
    padding: 20px !important;
    border-radius: var(--wf12-radius) !important;
  }

  body.wf-order-shell-page .wf10-section-head {
    margin-bottom: 18px !important;
  }

  body.wf-order-shell-page .wf10-kicker {
    margin-bottom: 7px;
    color: var(--wf12-brand);
    font-size: 12px;
    letter-spacing: .12em;
  }

  body.wf-order-shell-page .wf10-section-head h2 {
    color: var(--wf12-ink);
    font-size: 23px !important;
    line-height: 1.25;
  }

  body.wf-order-shell-page .wf10-section-head p {
    margin-top: 8px;
    color: #7d7684;
    font-size: 14px !important;
    line-height: 1.55;
  }

  body.wf-order-shell-page .wf10-count {
    padding: 7px 10px;
    font-size: 11px;
  }

  body.wf-order-shell-page .wf10-items {
    gap: 14px;
  }

  body.wf-order-shell-page .wf10-item {
    padding: 16px !important;
    border-radius: 18px !important;
  }

  body.wf-order-shell-page .wf10-item-head {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto auto auto;
    gap: 6px !important;
    margin-bottom: 18px !important;
  }

  body.wf-order-shell-page .wf10-item-title {
    min-width: 0;
    gap: 11px;
  }

  body.wf-order-shell-page .wf10-item-title > span {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    font-size: 15px;
  }

  body.wf-order-shell-page .wf10-item-title b {
    font-size: 15px;
  }

  body.wf-order-shell-page .wf10-item-title small {
    max-width: 190px;
    overflow: hidden;
    color: #8f8795;
    font-size: 11px;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  body.wf-order-shell-page .wf10-remove {
    width: 44px;
    height: 44px;
    border-radius: 12px;
  }

  body.wf-order-shell-page .wf10-field {
    gap: 8px;
  }

  body.wf-order-shell-page .wf10-field > span {
    color: #30263a;
    font-size: 14px;
    font-weight: 800;
  }

  body.wf-order-shell-page .wf10-field > small {
    color: #938b99;
    font-size: 11px;
  }

  body.wf-order-shell-page .wf10-input-icon,
  body.wf-order-shell-page .wf10-price-row input,
  body.wf-order-shell-page .wf10-price-row select,
  body.wf-order-shell-page .wf10-select-wrap,
  body.wf-order-shell-page .wf10-pricing-category select {
    height: 54px !important;
    border-radius: 14px !important;
  }

  body.wf-order-shell-page .wf10-select-wrap select {
    height: 52px !important;
  }

  body.wf-order-shell-page .wf10-item-grid {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
    margin-top: 18px !important;
  }

  body.wf-order-shell-page .wf10-price-row {
    grid-template-columns: minmax(0, 1fr) 116px !important;
    gap: 10px;
  }

  body.wf-order-shell-page .wf10-quantity {
    width: min(100%, 270px);
    height: 54px;
    grid-template-columns: 54px 1fr 54px;
    border-radius: 14px;
  }

  body.wf-order-shell-page .wf10-pricing-category {
    margin-top: 18px;
    padding: 14px;
    border-radius: 15px;
    background: linear-gradient(135deg, #fbf8ff, #f6efff);
  }

  body.wf-order-shell-page .wf10-line-total {
    min-height: 72px;
    margin-top: 14px !important;
    padding: 14px !important;
    border: 0 !important;
    border-radius: 15px !important;
    background: linear-gradient(135deg, #faf6ff, #f2eaff) !important;
  }

  body.wf-order-shell-page .wf10-line-total > span {
    color: #4a335e;
    font-size: 13px;
    font-weight: 800;
  }

  body.wf-order-shell-page .wf10-line-total > strong {
    color: var(--wf12-brand);
    font-size: 16px;
  }

  body.wf-order-shell-page .wf10-product-actions {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 10px;
    margin-top: 14px;
  }

  body.wf-order-shell-page .wf10-add,
  body.wf-order-shell-page .wf10-bulk {
    min-height: 54px;
    border-radius: 15px;
    font-size: 14px;
  }

  body.wf-order-shell-page .wf10-add {
    border: 1.5px dashed #9a6ee1;
    background: #fff;
    color: var(--wf12-brand);
  }

  body.wf-order-shell-page .wf10-limit {
    margin-top: 10px;
    font-size: 11px;
  }

  body.wf-order-shell-page .wf10-delivery .wf10-section-head {
    margin-bottom: 20px !important;
  }

  body.wf-order-shell-page .wf10-wilaya-field {
    max-width: none;
  }

  body.wf-order-shell-page .wf10-confirm > .wf10-section-head {
    display: none !important;
  }

  body.wf-order-shell-page .wf10-confirm {
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  body.wf-order-shell-page .wf10-confirm-trust {
    margin: 0 !important;
    padding: 18px;
    border: 8px solid #fff;
    border-radius: var(--wf12-radius);
    background: linear-gradient(135deg, #f6f0ff, #fbf9ff);
  }

  body.wf-order-shell-page .wf10-confirm-trust b {
    color: var(--wf12-brand);
    font-size: 14px;
  }

  body.wf-order-shell-page .wf10-confirm-trust small {
    font-size: 12px;
  }

  body.wf-order-shell-page .wf10-sidebar,
  body.wf-order-shell-page .wf10-primary,
  body.wf-order-shell-page .wf10-submit,
  body.wf-order-shell-page .wf-order-footer,
  body.wf-order-shell-page .wf-whatsapp-float {
    display: none !important;
  }

  body.wf-order-shell-page .wf10-mobile-bar {
    position: fixed !important;
    inset-inline: 0 !important;
    bottom: 0 !important;
    z-index: 1200 !important;
    min-height: 88px;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(150px, 43%);
    align-items: center;
    gap: 14px !important;
    padding: 12px 16px calc(12px + env(safe-area-inset-bottom)) !important;
    border-top: 1px solid #e4dfe8;
    background: rgba(255, 255, 255, .98) !important;
    box-shadow: 0 -10px 30px rgba(42, 22, 66, .12) !important;
    backdrop-filter: blur(18px);
  }

  body.wf-order-shell-page .wf10-mobile-bar > div {
    min-width: 0;
  }

  body.wf-order-shell-page .wf10-mobile-bar small {
    display: block;
    margin: 0 !important;
    color: #7f7786;
    font-size: 12px;
    line-height: 1.3 !important;
  }

  body.wf-order-shell-page .wf10-mobile-bar strong {
    display: block;
    margin-top: 3px !important;
    overflow: hidden;
    color: #15101d !important;
    font-size: clamp(18px, 5vw, 24px) !important;
    line-height: 1.15 !important;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  body.wf-order-shell-page .wf10-mobile-bar button {
    width: 100%;
    min-width: 0 !important;
    height: 58px !important;
    padding: 0 14px;
    border-radius: 16px !important;
    background: linear-gradient(135deg, #7b2cf1, var(--wf12-brand-dark)) !important;
    color: #fff;
    font-size: 14px;
    font-weight: 850;
    box-shadow: 0 10px 24px rgba(108, 43, 217, .22);
  }

  body.wf-order-shell-page .wf10-mobile-bar button:disabled {
    opacity: .7;
  }
}

@media (max-width: 430px) {
  body.wf-order-shell-page .wf10-header-inner { padding-inline: 12px; }
  body.wf-order-shell-page .wf10-brand img { width: 132px !important; }
  body.wf-order-shell-page .wf10-shell { width: calc(100% - 20px) !important; }
  body.wf-order-shell-page .wf10-card { padding: 16px !important; }
  body.wf-order-shell-page .wf10-section-head { gap: 10px; }
  body.wf-order-shell-page .wf10-section-head h2 { font-size: 20px !important; }
  body.wf-order-shell-page .wf10-count { display: none; }
  body.wf-order-shell-page .wf10-item { padding: 13px !important; }
  body.wf-order-shell-page .wf10-item-title > span { width: 40px; height: 40px; }
  body.wf-order-shell-page .wf12-head-total { max-width: 82px; overflow: hidden; text-overflow: ellipsis; }
  body.wf-order-shell-page .wf12-toggle,
  body.wf-order-shell-page .wf10-remove { width: 40px; height: 40px; flex-basis: 40px; }
  body.wf-order-shell-page .wf10-price-row { grid-template-columns: minmax(0, 1fr) 104px !important; }
  body.wf-order-shell-page .wf10-steps { grid-template-columns: 1fr 20px 1fr 20px 1fr !important; padding-inline: 6px !important; }
  body.wf-order-shell-page .wf10-steps button > span { width: 38px !important; height: 38px !important; }
  body.wf-order-shell-page .wf10-steps button b { font-size: 10.5px !important; }
  body.wf-order-shell-page .wf10-mobile-bar { grid-template-columns: minmax(0, 1fr) minmax(142px, 48%); padding-inline: 12px !important; }
  body.wf-order-shell-page .wf10-mobile-bar button { font-size: 13px; }
}

@media (prefers-reduced-motion: reduce) {
  body.wf-order-shell-page *,
  body.wf-order-shell-page *::before,
  body.wf-order-shell-page *::after {
    scroll-behavior: auto !important;
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
  }
}

/* 12.1 — precision mobile header, delivery locality and RTL polish. */
@media (max-width: 760px) {
  body.wf-order-shell-page .wf10-header {
    width: 100% !important;
    height: 66px !important;
    min-height: 66px !important;
    max-height: 66px !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow: visible !important;
  }

  body.wf-order-shell-page .wf10-header-inner {
    position: relative !important;
    display: block !important;
    width: 100% !important;
    height: 66px !important;
    min-height: 66px !important;
    max-height: 66px !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  body.wf-order-shell-page .wf10-header-nav,
  body.wf-order-shell-page .wf10-mobile-menu:not(.is-open) {
    display: none !important;
  }

  body.wf-order-shell-page .wf10-brand {
    position: absolute !important;
    inset-inline-start: 50% !important;
    top: 50% !important;
    z-index: 3 !important;
    width: 138px !important;
    height: 48px !important;
    display: grid !important;
    place-items: center !important;
    margin: 0 !important;
    padding: 0 !important;
    transform: translate(-50%, -50%) !important;
  }

  html[dir="rtl"] body.wf-order-shell-page .wf10-brand {
    transform: translate(50%, -50%) !important;
  }

  body.wf-order-shell-page .wf10-brand img {
    width: 132px !important;
    height: auto !important;
    max-width: 132px !important;
    max-height: 46px !important;
  }

  body.wf-order-shell-page .wf10-header-actions {
    position: absolute !important;
    inset: 0 !important;
    z-index: 4 !important;
    display: block !important;
    width: 100% !important;
    height: 66px !important;
    margin: 0 !important;
    padding: 0 !important;
    pointer-events: none !important;
  }

  body.wf-order-shell-page .wf10-menu-toggle,
  body.wf-order-shell-page .wf10-account-link,
  body.wf-order-shell-page .wf12-back,
  body.wf-order-shell-page .wf12-help {
    position: absolute !important;
    top: 11px !important;
    width: 44px !important;
    min-width: 44px !important;
    max-width: 44px !important;
    height: 44px !important;
    min-height: 44px !important;
    max-height: 44px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 1px solid #e1dce7 !important;
    border-radius: 14px !important;
    background: #fff !important;
    box-shadow: 0 2px 8px rgba(28, 18, 42, .035) !important;
    pointer-events: auto !important;
  }

  html:not([dir="rtl"]) body.wf-order-shell-page .wf10-menu-toggle,
  html:not([dir="rtl"]) body.wf-order-shell-page .wf12-back { left: 14px !important; right: auto !important; }
  html:not([dir="rtl"]) body.wf-order-shell-page .wf10-account-link,
  html:not([dir="rtl"]) body.wf-order-shell-page .wf12-help { right: 14px !important; left: auto !important; }
  html[dir="rtl"] body.wf-order-shell-page .wf10-menu-toggle,
  html[dir="rtl"] body.wf-order-shell-page .wf12-back { right: 14px !important; left: auto !important; }
  html[dir="rtl"] body.wf-order-shell-page .wf10-account-link,
  html[dir="rtl"] body.wf-order-shell-page .wf12-help { left: 14px !important; right: auto !important; }

  body.wf-order-shell-page .wf10-account-link,
  body.wf-order-shell-page .wf12-back,
  body.wf-order-shell-page .wf12-help {
    align-items: center !important;
    justify-content: center !important;
  }

  body.wf-order-shell-page .wf-order10 {
    padding-top: 14px !important;
  }

  body.wf-order-shell-page .wf10-hero {
    padding-top: 10px !important;
  }

  body.wf-order-shell-page[data-wf12-step="2"] .wf10-hero,
  body.wf-order-shell-page[data-wf12-step="3"] .wf10-hero {
    padding-top: 18px !important;
  }

  body.wf-order-shell-page .wf10-delivery {
    overflow: visible !important;
  }

  body.wf-order-shell-page .wf12-commune-field {
    margin-top: 16px !important;
  }

  body.wf-order-shell-page .wf12-combobox {
    position: relative;
    height: 54px !important;
    display: grid;
    grid-template-columns: 22px minmax(0, 1fr) 20px;
    align-items: center;
    gap: 10px;
    padding: 0 14px;
    border: 1px solid #ddd6e6;
    border-radius: 14px;
    background: #fff;
    transition: border-color .18s ease, box-shadow .18s ease;
  }

  body.wf-order-shell-page .wf12-combobox:focus-within {
    border-color: #8e5ddf;
    box-shadow: 0 0 0 4px rgba(108, 43, 217, .09);
  }

  body.wf-order-shell-page .wf12-combobox.is-invalid {
    border-color: #d9475c;
    box-shadow: 0 0 0 4px rgba(217, 71, 92, .08);
  }

  body.wf-order-shell-page .wf12-combobox svg {
    width: 21px;
    height: 21px;
    fill: none;
    stroke: #785da8;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
  }

  body.wf-order-shell-page .wf12-combobox input {
    width: 100%;
    min-width: 0;
    height: 50px;
    padding: 0 !important;
    border: 0 !important;
    outline: 0 !important;
    background: transparent !important;
    color: #211929;
    box-shadow: none !important;
    font: 700 15px Inter, "Noto Sans Arabic", Arial, sans-serif;
  }

  html[dir="rtl"] body.wf-order-shell-page .wf12-combobox input {
    text-align: right;
  }

  body.wf-order-shell-page .wf12-combobox-chevron {
    color: #43364f;
    font-size: 20px;
    line-height: 1;
    transform: rotate(90deg);
  }

  html[dir="rtl"] body.wf-order-shell-page .wf12-combobox-chevron {
    transform: rotate(-90deg);
  }

  body.wf-order-shell-page .wf12-commune-error {
    min-height: 16px;
    color: #b72f43 !important;
  }

  body.wf-order-shell-page [data-total-grand],
  body.wf-order-shell-page [data-line-total-value],
  body.wf-order-shell-page .wf12-head-total,
  body.wf-order-shell-page .wf12-review-product strong {
    direction: ltr !important;
    unicode-bidi: isolate !important;
  }

  html[dir="rtl"] body.wf-order-shell-page .wf10-mobile-bar > div {
    text-align: right !important;
  }
}

@media (max-width: 380px) {
  body.wf-order-shell-page .wf10-brand,
  body.wf-order-shell-page .wf10-brand img {
    width: 118px !important;
    max-width: 118px !important;
  }
  body.wf-order-shell-page .wf10-menu-toggle,
  body.wf-order-shell-page .wf10-account-link,
  body.wf-order-shell-page .wf12-back,
  body.wf-order-shell-page .wf12-help {
    width: 42px !important;
    min-width: 42px !important;
    max-width: 42px !important;
    height: 42px !important;
  }
}

/* =========================================================
   WFARHALI ORDER — DESIGN 12.2
   Mobile-first premium UI polish
   ========================================================= */

@media (max-width: 768px) {

  /* Global mobile rhythm */
  .wf12-shell,
  .wf12-container,
  .order-page,
  .order-container {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  /* Premium cards */
  .wf12-card,
  .order-card,
  .product-card,
  .shipping-card {
    border-radius: 22px !important;
    border: 1px solid rgba(28, 20, 48, .08) !important;
    box-shadow: 0 8px 30px rgba(44, 24, 80, .045) !important;
  }

  /* Compact progress area */
  .wf12-steps,
  .order-steps,
  .steps,
  .stepper {
    padding: 18px 14px !important;
    min-height: 0 !important;
    gap: 0 !important;
  }

  .wf12-step,
  .order-step,
  .step {
    min-width: 0 !important;
    flex: 1 1 0 !important;
  }

  /* Step circles */
  .wf12-step-number,
  .step-number,
  .step-circle,
  .step-indicator {
    width: 42px !important;
    height: 42px !important;
    min-width: 42px !important;
    min-height: 42px !important;
    font-size: 17px !important;
    line-height: 42px !important;
  }

  /* SHORT connectors */
  .wf12-step-line,
  .step-line,
  .step-connector,
  .steps-line {
    flex: 0 1 46px !important;
    width: 46px !important;
    max-width: 46px !important;
    min-width: 20px !important;
    height: 2px !important;
    margin-left: 8px !important;
    margin-right: 8px !important;
  }

  /* Step labels */
  .wf12-step-label,
  .step-label,
  .step-title {
    font-size: 12px !important;
    line-height: 1.25 !important;
    margin-top: 8px !important;
  }

  /* Fields */
  input,
  select,
  .wf12-field,
  .form-control,
  .form-select {
    min-height: 54px;
    border-radius: 15px !important;
  }

  /* Product cards less bulky */
  .wf12-product,
  .product-item,
  .product-card {
    margin-bottom: 12px !important;
  }

  /* Sticky action area */
  .wf12-sticky,
  .order-sticky,
  .sticky-summary,
  .sticky-order-summary,
  .bottom-summary {
    padding: 12px 16px calc(12px + env(safe-area-inset-bottom)) !important;
    min-height: 78px !important;
    box-shadow: 0 -8px 28px rgba(37, 22, 63, .08) !important;
    border-top: 1px solid rgba(28, 20, 48, .07) !important;
    background: rgba(255,255,255,.97) !important;
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
  }

  /* Main CTA */
  .wf12-sticky button,
  .order-sticky button,
  .sticky-summary button,
  .sticky-order-summary button,
  .bottom-summary button {
    min-height: 52px !important;
    border-radius: 15px !important;
    font-weight: 700 !important;
    box-shadow: 0 8px 20px rgba(108,43,217,.18) !important;
  }
}

/* Arabic RTL refinement */
html[dir="rtl"] .wf12-card,
html[dir="rtl"] .order-card,
html[dir="rtl"] .product-card,
html[dir="rtl"] .shipping-card {
  text-align: right;
}

html[dir="rtl"] input,
html[dir="rtl"] select {
  text-align: right;
}


/* ===== WFARHALI 12.2 — PREMIUM COMMUNE DROPDOWN ===== */

.wf12-commune-field {
  position: relative !important;
  overflow: visible !important;
  z-index: 40;
}

.wf122-commune-menu {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  right: 0;
  z-index: 9999;

  max-height: 220px;
  overflow-y: auto;
  overscroll-behavior: contain;

  padding: 6px;
  background: #fff;
  border: 1px solid rgba(35,25,55,.10);
  border-radius: 16px;

  box-shadow:
    0 18px 45px rgba(31,18,55,.14),
    0 4px 12px rgba(31,18,55,.06);

  -webkit-overflow-scrolling: touch;
}

.wf122-commune-menu[hidden] {
  display: none !important;
}

.wf122-commune-option {
  width: 100%;
  min-height: 46px;

  display: flex;
  align-items: center;

  padding: 10px 13px;
  border: 0;
  border-radius: 11px;

  background: transparent;
  color: #171321;

  font: inherit;
  font-size: 15px;
  font-weight: 600;

  text-align: left;
  cursor: pointer;
}

.wf122-commune-option:active,
.wf122-commune-option:hover {
  background: rgba(108,43,217,.07);
  color: #6C2BD9;
}

html[dir="rtl"] .wf122-commune-option {
  text-align: right;
  direction: rtl;
}

@media (max-width:768px) {
  .wf122-commune-menu {
    max-height: 190px;
  }
}


/* WFARHALI — Mobile progress connector fix */
@media (max-width: 768px) {

  .wf12-steps,
  .wf12-progress,
  .wf12-stepper {
    overflow: hidden !important;
  }

  .wf12-step-line,
  .wf12-step-connector,
  .wf12-steps .line,
  .wf12-progress .line {
    width: 38px !important;
    max-width: 38px !important;
    min-width: 38px !important;
    flex: 0 0 38px !important;
    height: 2px !important;
  }

  .wf12-steps::before,
  .wf12-steps::after,
  .wf12-progress::before,
  .wf12-progress::after {
    max-width: 100% !important;
  }
}



/* WFARHALI 12.2.1 — COMMUNE FIELD DESKTOP SAFETY */
@media (min-width: 761px) {
  body.wf-order-shell-page .wf12-combobox {
    position: relative;
    height: 56px;
    display: grid;
    grid-template-columns: 22px minmax(0, 1fr) 20px;
    align-items: center;
    gap: 10px;
    padding: 0 14px;
    border: 1px solid #ddd6e6;
    border-radius: 14px;
    background: #fff;
  }

  body.wf-order-shell-page .wf12-combobox svg {
    width: 21px;
    height: 21px;
    fill: none;
    stroke: #785da8;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
  }

  body.wf-order-shell-page .wf12-combobox input {
    width: 100%;
    min-width: 0;
    height: 52px;
    padding: 0 !important;
    border: 0 !important;
    outline: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  body.wf-order-shell-page .wf12-combobox-chevron {
    font-size: 20px;
    line-height: 1;
  }
}


/* WFARHALI 12.3 — OPTIONAL PRODUCT DETAILS */
[data-wf-multi-quote] .wf13-product-options {
  margin: 18px 0;
  border: 1px solid rgba(108,43,217,.14);
  border-radius: 20px;
  overflow: hidden;
  background: linear-gradient(135deg,#fbf9ff 0%,#f5f0ff 100%);
  box-shadow: 0 10px 28px rgba(72,34,130,.06);
}

[data-wf-multi-quote] .wf13-product-options > summary {
  min-height: 76px;
  padding: 14px 16px;
  display: grid;
  grid-template-columns: 46px minmax(0,1fr) auto 22px;
  align-items: center;
  gap: 12px;
  cursor: pointer;
  list-style: none;
  user-select: none;
}

[data-wf-multi-quote] .wf13-product-options > summary::-webkit-details-marker {
  display: none;
}

[data-wf-multi-quote] .wf13-option-icon {
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border-radius: 14px;
  color: #6c2bd9;
  background: #fff;
  box-shadow: 0 6px 18px rgba(108,43,217,.10);
}

[data-wf-multi-quote] .wf13-option-icon svg {
  width: 25px;
  height: 25px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

[data-wf-multi-quote] .wf13-option-title {
  min-width: 0;
  display: grid;
  gap: 4px;
}

[data-wf-multi-quote] .wf13-option-title b {
  color: #21182d;
  font-size: 16px;
  font-weight: 800;
  line-height: 1.25;
}

[data-wf-multi-quote] .wf13-option-title small {
  color: #777080;
  font-size: 12px;
  line-height: 1.45;
}

[data-wf-multi-quote] .wf13-optional-badge {
  padding: 6px 10px;
  border-radius: 999px;
  color: #6c2bd9;
  background: rgba(108,43,217,.09);
  font-size: 11px;
  font-weight: 800;
  white-space: nowrap;
}

[data-wf-multi-quote] .wf13-option-chevron {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: #33283e;
  stroke-width: 2;
  transition: transform .22s ease;
}

[data-wf-multi-quote] .wf13-product-options[open] .wf13-option-chevron {
  transform: rotate(180deg);
}

[data-wf-multi-quote] .wf13-options-body {
  padding: 4px 16px 17px;
  border-top: 1px solid rgba(108,43,217,.09);
}

[data-wf-multi-quote] .wf13-options-grid {
  display: grid;
  grid-template-columns: repeat(2,minmax(0,1fr));
  gap: 12px;
  padding-top: 15px;
}

[data-wf-multi-quote] .wf13-option-field {
  min-width: 0;
  display: grid;
  gap: 8px;
  color: #21182d;
  font-size: 13px;
  font-weight: 800;
}

[data-wf-multi-quote] .wf13-option-field select,
[data-wf-multi-quote] .wf13-option-field textarea {
  width: 100%;
  border: 1px solid #dcd5e5;
  border-radius: 14px;
  outline: none;
  color: #21182d;
  background: #fff;
  font: inherit;
  font-weight: 600;
  transition: border-color .2s ease,box-shadow .2s ease;
}

[data-wf-multi-quote] .wf13-option-field select {
  height: 52px;
  padding: 0 14px;
}

[data-wf-multi-quote] .wf13-option-field textarea {
  min-height: 92px;
  padding: 13px 14px;
  resize: vertical;
  line-height: 1.55;
}

[data-wf-multi-quote] .wf13-option-field select:focus,
[data-wf-multi-quote] .wf13-option-field textarea:focus {
  border-color: #6c2bd9;
  box-shadow: 0 0 0 4px rgba(108,43,217,.10);
}

[data-wf-multi-quote] .wf13-option-note {
  margin-top: 14px;
}

[data-wf-multi-quote] .wf13-options-helper {
  display: block;
  margin-top: 10px;
  color: #81798a;
  font-size: 11px;
  font-weight: 600;
}

html[dir="rtl"] [data-wf-multi-quote] .wf13-product-options {
  direction: rtl;
  text-align: right;
}

html[dir="rtl"] [data-wf-multi-quote] .wf13-option-field select,
html[dir="rtl"] [data-wf-multi-quote] .wf13-option-field textarea {
  text-align: right;
}

@media (max-width: 430px) {
  [data-wf-multi-quote] .wf13-product-options {
    margin: 15px 0;
    border-radius: 17px;
  }

  [data-wf-multi-quote] .wf13-product-options > summary {
    min-height: 70px;
    padding: 12px;
    grid-template-columns: 42px minmax(0,1fr) auto 18px;
    gap: 9px;
  }

  [data-wf-multi-quote] .wf13-option-icon {
    width: 42px;
    height: 42px;
  }

  [data-wf-multi-quote] .wf13-option-title b {
    font-size: 15px;
  }

  [data-wf-multi-quote] .wf13-option-title small {
    font-size: 11px;
  }

  [data-wf-multi-quote] .wf13-optional-badge {
    padding: 5px 8px;
    font-size: 10px;
  }

  [data-wf-multi-quote] .wf13-options-body {
    padding: 3px 12px 14px;
  }

  [data-wf-multi-quote] .wf13-options-grid {
    gap: 9px;
  }
}


/* WFARHALI 12.3.1 — URL INLINE ERROR */
[data-wf-multi-quote] .wf13-url-inline-error {
  display: block;
  margin-top: 9px;
  padding: 10px 12px;
  border: 1px solid rgba(198,40,40,.22);
  border-radius: 11px;
  color: #b42318;
  background: #fff2f0;
  font-size: 12px;
  font-weight: 750;
  line-height: 1.5;
}

[data-wf-multi-quote] .wf13-url-inline-error[hidden] {
  display: none !important;
}

[data-wf-multi-quote] input.wf13-url-invalid {
  border-color: #d92d20 !important;
  box-shadow: 0 0 0 4px rgba(217,45,32,.10) !important;
}


/* =========================================================
   WFARHALI ORDER 13.0 — CONVERSION UI
   ========================================================= */

body.wf-order-shell-page {
  --wf13-purple:#6c2bd9;
  --wf13-purple-dark:#4d16b5;
  --wf13-ink:#17101f;
  --wf13-muted:#756d7d;
  --wf13-border:#e6e0eb;
  --wf13-surface:#ffffff;
  --wf13-soft:#f7f3fd;
  background:
    radial-gradient(circle at 50% -6%,rgba(108,43,217,.08),transparent 390px),
    #f8f7fb !important;
}

body.wf-order-shell-page .wf10-card,
body.wf-order-shell-page .wf10-item,
body.wf-order-shell-page .wf12-panel {
  border:1px solid var(--wf13-border) !important;
  background:var(--wf13-surface) !important;
  box-shadow:0 10px 35px rgba(43,24,64,.055) !important;
}

body.wf-order-shell-page input,
body.wf-order-shell-page select,
body.wf-order-shell-page textarea {
  font-family:Inter,"Noto Sans Arabic",Arial,sans-serif;
}

@media (max-width:760px) {
  body.wf-order-shell-page {
    padding-bottom:calc(92px + env(safe-area-inset-bottom)) !important;
  }

  /* Focused checkout header */
  body.wf-order-shell-page .wf10-header {
    height:68px !important;
    min-height:68px !important;
    border-bottom:1px solid rgba(37,24,52,.07) !important;
    background:rgba(255,255,255,.96) !important;
    box-shadow:0 4px 20px rgba(38,22,55,.045) !important;
    backdrop-filter:blur(18px);
  }

  body.wf-order-shell-page .wf10-header-inner {
    height:68px !important;
    min-height:68px !important;
  }

  body.wf-order-shell-page .wf10-menu-toggle,
  body.wf-order-shell-page .wf10-account-link {
    display:none !important;
  }

  body.wf-order-shell-page .wf12-back,
  body.wf-order-shell-page .wf12-help {
    top:12px !important;
    width:44px !important;
    min-width:44px !important;
    height:44px !important;
    display:grid !important;
    place-items:center !important;
    padding:0 !important;
    border:1px solid #e1dbe7 !important;
    border-radius:14px !important;
    background:#fff !important;
    color:#201729 !important;
    box-shadow:0 4px 12px rgba(38,22,55,.045) !important;
  }

  body.wf-order-shell-page .wf12-back svg,
  body.wf-order-shell-page .wf12-help svg {
    width:22px;
    height:22px;
    fill:none;
    stroke:currentColor;
    stroke-width:2;
    stroke-linecap:round;
    stroke-linejoin:round;
  }

  html[dir="rtl"] body.wf-order-shell-page .wf12-back svg {
    transform:scaleX(-1);
  }

  body.wf-order-shell-page .wf10-brand,
  body.wf-order-shell-page .wf10-brand img {
    width:134px !important;
    max-width:134px !important;
  }

  /* Page rhythm */
  body.wf-order-shell-page .wf-order10 {
    padding:16px 0 12px !important;
  }

  body.wf-order-shell-page .wf10-shell {
    width:calc(100% - 24px) !important;
    max-width:680px !important;
  }

  body.wf-order-shell-page .wf10-hero {
    padding:13px 3px 18px !important;
    gap:0 !important;
  }

  body.wf-order-shell-page .wf10-hero-icon {
    display:none !important;
  }

  body.wf-order-shell-page .wf10-hero h1 {
    font-size:clamp(27px,7vw,34px) !important;
    line-height:1.14 !important;
    letter-spacing:-.65px !important;
  }

  body.wf-order-shell-page .wf10-hero p {
    max-width:560px;
    margin-top:8px !important;
    color:var(--wf13-muted) !important;
    font-size:14px !important;
    line-height:1.55 !important;
  }

  /* Progress */
  body.wf-order-shell-page .wf10-steps {
    min-height:0 !important;
    margin-bottom:16px !important;
    padding:14px 9px !important;
    grid-template-columns:1fr 24px 1fr 24px 1fr !important;
    border:1px solid var(--wf13-border) !important;
    border-radius:20px !important;
    background:#fff !important;
    box-shadow:0 8px 28px rgba(43,24,64,.045) !important;
  }

  body.wf-order-shell-page .wf10-steps button {
    gap:6px !important;
  }

  body.wf-order-shell-page .wf10-steps button > span {
    width:38px !important;
    height:38px !important;
    border-width:1px !important;
    font-size:15px !important;
  }

  body.wf-order-shell-page .wf10-steps button b {
    max-width:96px;
    font-size:11px !important;
    line-height:1.2 !important;
  }

  body.wf-order-shell-page .wf10-steps > i {
    width:24px !important;
    max-width:24px !important;
    height:2px !important;
  }

  /* Main sections */
  body.wf-order-shell-page .wf10-card {
    padding:17px !important;
    border-radius:21px !important;
  }

  body.wf-order-shell-page .wf10-section-head {
    margin-bottom:16px !important;
  }

  body.wf-order-shell-page .wf10-section-head h2 {
    font-size:21px !important;
    line-height:1.28 !important;
  }

  body.wf-order-shell-page .wf10-section-head p {
    margin-top:7px !important;
    font-size:13px !important;
    line-height:1.55 !important;
  }

  /* Product card */
  body.wf-order-shell-page .wf10-item {
    padding:14px !important;
    border-radius:18px !important;
  }

  body.wf-order-shell-page .wf10-item-head {
    margin-bottom:16px !important;
  }

  body.wf-order-shell-page .wf10-item-title > span,
  body.wf-order-shell-page .wf12-toggle,
  body.wf-order-shell-page .wf10-remove {
    width:40px !important;
    height:40px !important;
    min-width:40px !important;
    border-radius:12px !important;
  }

  body.wf-order-shell-page .wf10-item-title b {
    font-size:15px !important;
  }

  body.wf-order-shell-page .wf10-item-title small {
    font-size:11px !important;
  }

  /* Clean fields */
  body.wf-order-shell-page .wf10-input-icon,
  body.wf-order-shell-page .wf10-price-row input,
  body.wf-order-shell-page .wf10-price-row select,
  body.wf-order-shell-page .wf10-pricing-category select,
  body.wf-order-shell-page .wf10-select-wrap,
  body.wf-order-shell-page .wf12-combobox {
    height:52px !important;
    border:1px solid #ddd7e5 !important;
    border-radius:14px !important;
    background:#fff !important;
    box-shadow:none !important;
  }

  body.wf-order-shell-page .wf10-input-icon:focus-within,
  body.wf-order-shell-page .wf10-price-row input:focus,
  body.wf-order-shell-page .wf10-price-row select:focus,
  body.wf-order-shell-page .wf10-pricing-category select:focus,
  body.wf-order-shell-page .wf10-select-wrap:focus-within,
  body.wf-order-shell-page .wf12-combobox:focus-within {
    border-color:var(--wf13-purple) !important;
    box-shadow:0 0 0 3px rgba(108,43,217,.10) !important;
    outline:0 !important;
  }

  body.wf-order-shell-page .wf10-price-row {
    grid-template-columns:minmax(0,1fr) 108px !important;
    gap:9px !important;
  }

  body.wf-order-shell-page .wf10-quantity {
    width:100% !important;
    height:52px !important;
    border-radius:14px !important;
  }

  body.wf-order-shell-page .wf10-pricing-category {
    margin-top:16px !important;
    padding:13px !important;
    border:1px solid rgba(108,43,217,.09);
    border-radius:16px !important;
    background:#faf7ff !important;
  }

  body.wf-order-shell-page .wf13-product-options {
    margin:14px 0 !important;
    border-radius:16px !important;
    box-shadow:none !important;
  }

  body.wf-order-shell-page .wf13-product-options > summary {
    min-height:66px !important;
    padding:11px 12px !important;
  }

  body.wf-order-shell-page .wf10-line-total {
    min-height:66px !important;
    margin-top:12px !important;
    padding:13px !important;
  }

  body.wf-order-shell-page .wf10-add,
  body.wf-order-shell-page .wf10-bulk {
    min-height:52px !important;
    border-radius:14px !important;
  }

  /* Delivery and confirmation */
  body.wf-order-shell-page .wf12-notice,
  body.wf-order-shell-page .wf10-confirm-trust {
    border-width:6px !important;
    border-radius:20px !important;
  }

  body.wf-order-shell-page .wf12-mini-products,
  body.wf-order-shell-page .wf12-review-card {
    border-radius:20px !important;
  }

  /* Single persuasive sticky action */
  body.wf-order-shell-page .wf10-mobile-bar {
    min-height:84px !important;
    grid-template-columns:minmax(0,1fr) minmax(152px,46%) !important;
    gap:12px !important;
    padding:10px 14px calc(10px + env(safe-area-inset-bottom)) !important;
    border-top:1px solid rgba(37,24,52,.08) !important;
    background:rgba(255,255,255,.97) !important;
    box-shadow:0 -10px 34px rgba(42,22,66,.10) !important;
    backdrop-filter:blur(18px);
  }

  body.wf-order-shell-page .wf10-mobile-bar small {
    font-size:11px !important;
  }

  body.wf-order-shell-page .wf10-mobile-bar strong {
    font-size:clamp(18px,5.2vw,23px) !important;
  }

  body.wf-order-shell-page .wf10-mobile-bar button {
    height:56px !important;
    border:0 !important;
    border-radius:15px !important;
    background:linear-gradient(135deg,#7c2df2,#5017b8) !important;
    box-shadow:0 10px 25px rgba(108,43,217,.25) !important;
    font-size:14px !important;
    transition:transform .16s ease,box-shadow .16s ease !important;
  }

  body.wf-order-shell-page .wf10-mobile-bar button:active {
    transform:translateY(1px) scale(.99);
    box-shadow:0 6px 16px rgba(108,43,217,.22) !important;
  }

  body.wf-order-shell-page .wf10-sidebar,
  body.wf-order-shell-page .wf10-submit,
  body.wf-order-shell-page .wf-order-footer,
  body.wf-order-shell-page .wf-whatsapp-float {
    display:none !important;
  }
}

@media (max-width:370px) {
  body.wf-order-shell-page .wf10-shell {
    width:calc(100% - 16px) !important;
  }

  body.wf-order-shell-page .wf10-card {
    padding:14px !important;
  }

  body.wf-order-shell-page .wf10-mobile-bar {
    grid-template-columns:minmax(0,1fr) 146px !important;
    padding-inline:10px !important;
  }
}

/* WFARHALI HEADER 13.0.1 */
@media (max-width: 760px) {
  body.wf-order-shell-page .wf10-header-inner {
    display: grid !important;
    grid-template-columns: 46px minmax(0, 1fr) 46px !important;
    align-items: center !important;
    gap: 12px !important;
  }

  body.wf-order-shell-page .wf10-menu-toggle,
  body.wf-order-shell-page .wf10-account-link {
    display: none !important;
  }

  body.wf-order-shell-page .wf10-brand {
    grid-column: 2 !important;
    grid-row: 1 !important;
    justify-self: center !important;
    margin: 0 !important;
  }

  body.wf-order-shell-page .wf12-back,
  body.wf-order-shell-page .wf12-help {
    width: 46px !important;
    height: 46px !important;
    display: grid !important;
    place-items: center !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 1px solid #ded8e5 !important;
    border-radius: 14px !important;
    color: #1f1829 !important;
    background: #fff !important;
    box-shadow: 0 4px 14px rgba(39, 23, 55, .045) !important;
  }

  body.wf-order-shell-page .wf12-back {
    grid-column: 1 !important;
    grid-row: 1 !important;
    justify-self: start !important;
  }

  body.wf-order-shell-page .wf12-help {
    grid-column: 3 !important;
    grid-row: 1 !important;
    justify-self: end !important;
  }

  body.wf-order-shell-page .wf12-back svg,
  body.wf-order-shell-page .wf12-help svg {
    width: 22px !important;
    height: 22px !important;
  }
}

/* WFARHALI CLEAN HEADER AND SELECT 13.0.2 */
@media (max-width: 760px) {
  /* إزالة زر المساعدة مع إبقاء الشعار في المنتصف */
  body.wf-order-shell-page .wf12-help {
    display: none !important;
  }

  /* إطار Focus واحد فقط حول حقل الولاية */
  body.wf-order-shell-page .wf10-select-wrap select,
  body.wf-order-shell-page .wf10-select-wrap select:focus,
  body.wf-order-shell-page .wf10-select-wrap select:focus-visible {
    border: 0 !important;
    outline: 0 !important;
    outline-offset: 0 !important;
    box-shadow: none !important;
    background-color: transparent !important;
  }

  body.wf-order-shell-page .wf10-select-wrap:focus-within {
    border-color: #6C2BD9 !important;
    outline: 0 !important;
    box-shadow: 0 0 0 3px rgba(108, 43, 217, .10) !important;
  }
}

/* WFARHALI ORDER POLISH 13.0.3 */
@media (max-width: 760px) {
  /* إزالة Focus الداخلي المزدوج من رابط المنتج */
  body.wf-order-shell-page .wf10-input-icon input,
  body.wf-order-shell-page .wf10-input-icon input:focus,
  body.wf-order-shell-page .wf10-input-icon input:focus-visible {
    border: 0 !important;
    outline: 0 !important;
    outline-offset: 0 !important;
    box-shadow: none !important;
    background: transparent !important;
  }

  body.wf-order-shell-page .wf10-input-icon:focus-within {
    border-color: #6C2BD9 !important;
    outline: 0 !important;
    box-shadow: 0 0 0 3px rgba(108, 43, 217, .10) !important;
  }

  /* الشريط يصبح داخل نهاية الصفحة ولا يغطي المحتوى */
  body.wf-order-shell-page {
    padding-bottom: max(16px, env(safe-area-inset-bottom)) !important;
  }

  body.wf-order-shell-page .wf10-mobile-bar {
    position: static !important;
    inset: auto !important;
    bottom: auto !important;
    width: calc(100% - 24px) !important;
    min-height: 82px !important;
    margin: 18px auto calc(18px + env(safe-area-inset-bottom)) !important;
    padding: 11px 13px !important;
    border: 1px solid #e4dfe9 !important;
    border-radius: 20px !important;
    background: #fff !important;
    box-shadow: 0 10px 30px rgba(42, 22, 66, .08) !important;
  }

  /* صفحة راجع طلبك أكثر اختصاراً */
  body.wf-order-shell-page[data-wf12-step="3"] .wf12-review {
    gap: 12px !important;
    margin-bottom: 12px !important;
  }

  body.wf-order-shell-page[data-wf12-step="3"] .wf12-review-card {
    padding: 16px !important;
    border-radius: 18px !important;
    box-shadow: 0 8px 24px rgba(43, 24, 64, .045) !important;
  }

  body.wf-order-shell-page .wf12-review-head h2 {
    font-size: 17px !important;
  }

  body.wf-order-shell-page .wf12-review-product {
    min-height: 0 !important;
    grid-template-columns: 44px minmax(0, 1fr) auto !important;
    gap: 11px !important;
    padding: 14px 0 !important;
  }

  body.wf-order-shell-page .wf12-review-icon {
    width: 44px !important;
    height: 44px !important;
    border-radius: 13px !important;
    font-size: 19px !important;
  }

  body.wf-order-shell-page .wf12-review-product > div {
    min-width: 0 !important;
  }

  body.wf-order-shell-page .wf12-review-product b {
    overflow: hidden !important;
    font-size: 14px !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  body.wf-order-shell-page .wf12-review-product small {
    direction: ltr !important;
    unicode-bidi: isolate !important;
    text-align: start !important;
  }

  body.wf-order-shell-page .wf12-delivery-value {
    grid-template-columns: 44px minmax(0, 1fr) !important;
    gap: 11px !important;
    margin-top: 10px !important;
  }

  body.wf-order-shell-page .wf13-location-icon svg {
    width: 22px !important;
    height: 22px !important;
    fill: none !important;
    stroke: currentColor !important;
    stroke-width: 1.9 !important;
    stroke-linecap: round !important;
    stroke-linejoin: round !important;
  }
}

/* WF CUSTOMER EXPERIENCE 14.1.0 */
.wf-cart-added-icon svg {
  display: block;
  width: 46px;
  height: 46px;
}

.wf-cart-added-whatsapp {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  width: 100%;
  margin: 18px 0 22px;
  padding: 14px 16px;
  border: 1px solid rgba(31, 166, 83, .22);
  border-radius: 16px;
  background: rgba(37, 211, 102, .08);
  color: #26352c;
  font-size: 14px;
  line-height: 1.65;
  text-align: start;
  box-sizing: border-box;
}

.wf-cart-added-whatsapp > span {
  display: grid;
  flex: 0 0 38px;
  width: 38px;
  height: 38px;
  place-items: center;
  margin-top: 1px;
  border-radius: 12px;
  background: #fff;
  color: #159447;
  box-shadow: 0 5px 16px rgba(21, 148, 71, .10);
}

.wf-cart-added-whatsapp p {
  margin: 0;
}

html[dir="rtl"] .wf-cart-added-whatsapp {
  direction: rtl;
  text-align: right;
}

.wf141-message-icon {
  display: grid;
  place-items: center;
}

.wf141-message-icon svg {
  display: block;
}

.wf90-step > span {
  font-family: inherit;
  font-variant-numeric: tabular-nums;
  font-weight: 800;
}

@media (max-width: 760px) {
  html[lang^="fr"] .wf10-mobile-bar {
    direction: ltr !important;
    flex-direction: row-reverse !important;
  }

  html[lang^="fr"] .wf10-mobile-bar > div {
    text-align: right !important;
    align-items: flex-end;
  }
}


/* WF_STEP_SVG_CHECK_15_3_1 */
body.wf-order-shell-page .wf10-steps button.is-complete > span{
  position:relative !important;
  display:grid !important;
  place-items:center !important;
}

body.wf-order-shell-page .wf10-steps button.is-complete > span::before{
  content:"" !important;
  width:21px !important;
  height:21px !important;
  display:block !important;
  border:0 !important;
  border-radius:0 !important;
  transform:none !important;
  background-color:transparent !important;
  background-image:url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27 fill=%27none%27 stroke=%27white%27 stroke-width=%272.6%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27%3E%3Cpath d=%27M5 12.5l4.2 4.2L19 6.9%27/%3E%3C/svg%3E") !important;
  background-repeat:no-repeat !important;
  background-position:center !important;
  background-size:21px 21px !important;
}

/* WF_ORDER_MOBILE_POLISH_15_4_0 */
@media (max-width:760px){

body.wf-order-shell-page .wf13-product-options{
  margin:12px 0 !important;
  border:1px solid #e6dff0 !important;
  border-radius:18px !important;
  background:#fbf9ff !important;
}

body.wf-order-shell-page .wf13-product-options > summary{
  min-height:64px !important;
  grid-template-columns:40px minmax(0,1fr) auto 18px !important;
  gap:9px !important;
  padding:10px 12px !important;
}

body.wf-order-shell-page .wf13-option-icon{
  width:40px !important;
  height:40px !important;
  border-radius:12px !important;
}

body.wf-order-shell-page .wf13-option-icon svg{
  width:22px !important;
  height:22px !important;
}

body.wf-order-shell-page .wf13-option-title{
  gap:2px !important;
}

body.wf-order-shell-page .wf13-option-title b{
  font-size:14px !important;
  line-height:1.25 !important;
}

body.wf-order-shell-page .wf13-option-title small{
  font-size:10.5px !important;
  line-height:1.4 !important;
}

body.wf-order-shell-page .wf13-optional-badge{
  padding:5px 8px !important;
  font-size:10px !important;
}

body.wf-order-shell-page .wf10-line-total{
  min-height:72px !important;
  display:grid !important;
  grid-template-columns:minmax(0,1fr) auto !important;
  grid-template-rows:auto auto !important;
  align-items:center !important;
  gap:2px 12px !important;
  margin-top:12px !important;
  padding:14px 16px !important;
  border-radius:17px !important;
  text-align:start !important;
}

body.wf-order-shell-page .wf10-line-total > span{
  grid-column:1 !important;
  grid-row:1 !important;
  font-size:12px !important;
  line-height:1.35 !important;
  text-transform:none !important;
}

body.wf-order-shell-page .wf10-line-total > strong{
  grid-column:2 !important;
  grid-row:1 / span 2 !important;
  margin:0 !important;
  font-size:22px !important;
  line-height:1 !important;
  white-space:nowrap !important;
  text-align:end !important;
}

body.wf-order-shell-page .wf10-line-total > small{
  grid-column:1 !important;
  grid-row:2 !important;
  margin:2px 0 0 !important;
  font-size:10px !important;
}

body.wf-order-shell-page[data-wf12-step="3"] .wf10-confirm{
  padding:0 !important;
  border:0 !important;
  background:transparent !important;
  box-shadow:none !important;
}

body.wf-order-shell-page .wf12-review{
  gap:12px !important;
}

body.wf-order-shell-page .wf12-review-card{
  padding:16px !important;
  border:1px solid #e8e2ed !important;
  border-radius:18px !important;
  background:#fff !important;
  box-shadow:0 8px 24px rgba(39,23,55,.045) !important;
}

body.wf-order-shell-page .wf12-review-head h2{
  font-size:18px !important;
}

body.wf-order-shell-page .wf12-edit{
  min-height:36px !important;
  gap:5px !important;
  font-size:12px !important;
  text-decoration:none !important;
}

body.wf-order-shell-page .wf12-review-product{
  grid-template-columns:40px minmax(0,1fr) auto !important;
  gap:10px !important;
  padding:12px 0 !important;
}

body.wf-order-shell-page .wf12-review-icon{
  width:40px !important;
  height:40px !important;
  border-radius:12px !important;
  font-size:16px !important;
}

body.wf-order-shell-page .wf12-review-product b{
  font-size:13px !important;
}

body.wf-order-shell-page .wf12-review-product strong{
  font-size:13px !important;
  white-space:nowrap !important;
}

body.wf-order-shell-page .wf12-delivery-value{
  grid-template-columns:40px minmax(0,1fr) !important;
  gap:10px !important;
  margin-top:8px !important;
}

body.wf-order-shell-page .wf10-mobile-bar{
  display:grid !important;
  grid-template-columns:minmax(0,1fr) minmax(150px,46%) !important;
  min-height:82px !important;
  gap:12px !important;
  padding:10px 14px calc(10px + env(safe-area-inset-bottom)) !important;
}

html[lang^="fr"] body.wf-order-shell-page .wf10-mobile-bar{
  direction:ltr !important;
  flex-direction:initial !important;
}

html[lang^="fr"] body.wf-order-shell-page .wf10-mobile-bar > div{
  grid-column:1 !important;
  text-align:left !important;
  align-items:flex-start !important;
}

html[lang^="fr"] body.wf-order-shell-page .wf10-mobile-bar > button{
  grid-column:2 !important;
}

html[dir="rtl"] body.wf-order-shell-page .wf10-mobile-bar{
  direction:rtl !important;
}

html[dir="rtl"] body.wf-order-shell-page .wf10-mobile-bar > div{
  grid-column:1 !important;
  text-align:right !important;
}

html[dir="rtl"] body.wf-order-shell-page .wf10-mobile-bar > button{
  grid-column:2 !important;
}

body.wf-order-shell-page .wf10-mobile-bar button{
  width:100% !important;
  min-width:0 !important;
  height:54px !important;
  border-radius:16px !important;
  font-size:15px !important;
}
}

/* WFARHALI_DESKTOP_NO_MOBILE_STICKY_V1
   Mobile sticky CTA is touch/mobile only.
   Desktop/laptop must use the normal page summary. */

@media (hover: hover) and (pointer: fine) {
  body.wf-order-shell-page .wf10-mobile-bar {
    display: none !important;
  }

  body.wf-order-shell-page {
    padding-bottom: 0 !important;
  }
}

/* WFARHALI_DESKTOP_NO_MOBILE_STICKY_V1
   Mobile sticky CTA is touch/mobile only.
   Desktop/laptop must use the normal page summary. */

@media (hover: hover) and (pointer: fine) {
  body.wf-order-shell-page .wf10-mobile-bar {
    display: none !important;
  }

  body.wf-order-shell-page {
    padding-bottom: 0 !important;
  }
}

/* WFARHALI_DESKTOP_NO_MOBILE_STICKY_V1
   Mobile sticky CTA is touch/mobile only.
   Desktop/laptop must use the normal page summary. */

@media (hover: hover) and (pointer: fine) {
  body.wf-order-shell-page .wf10-mobile-bar {
    display: none !important;
  }

  body.wf-order-shell-page {
    padding-bottom: 0 !important;
  }
}