/* tpl-pricing.css: GENERATED from prototype pricing.css (same order as the prototype head). */
/* ---- pricing.css ---- */
/* ==========================================================================
   pricing.css: page-only styles for pricing.html (/pricing, static page)
   Owner: Designer 2 (UI/UX). Load order: fonts.css → ../tokens.css → styles.css → pricing.css
   Scope: section_breadcrumb (mirrors service.css so the bar looks identical), price-*.
   Shared components (header, hero grid, form, card, project-card, check-list, note-box, FAQ, CTA,
   sticky bar, sheet, footer) come from styles.css (Designer 1) and are not restyled here.
   Rules: logical properties only · transform/opacity motion only · content visible without JS ·
   no letter-spacing / text-transform on Arabic. [ADD] = design-system extension (listed in handover).
   ========================================================================== */

/* ---------- Breadcrumb bar (identical to service.css) ---------- */
.section_breadcrumb { background: var(--bg-page); }
.section_breadcrumb .breadcrumb_list { min-block-size: 3rem; }

/* ---------- Money unit: «[[PRICE]] ريال» never splits across lines (pricing-ar §10 #1) ---------- */
.price-amount { white-space: nowrap; unicode-bidi: isolate; }

/* ---------- Hero ---------- */
.price-hero_sub { font-family: var(--font-heading); font-size: var(--font-size-h4); line-height: var(--lh-h4); font-weight: 600; color: var(--text-accent); max-inline-size: 36rem; }
.price-hero_answer { color: var(--text-secondary); max-inline-size: 40rem; }
.price-hero_meta { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1.25rem; font-size: var(--font-size-small); color: var(--text-muted); }
.price-hero_meta-item { display: inline-flex; align-items: center; gap: 0.375rem; }
.price-hero_meta .icon-embed-small { color: var(--text-accent); }
.price-hero_contact { display: none; flex-wrap: wrap; gap: 0.25rem 1.5rem; }
.price-hero_contact a { display: inline-flex; align-items: center; gap: 0.375rem; min-block-size: var(--touch-min); font-family: var(--font-heading); font-weight: 600; color: var(--text-primary); text-decoration: none; }
.price-hero_contact a:hover { text-decoration: underline; }
.price-hero_contact .is-wa .icon-embed-small { color: var(--whatsapp-500); }
.price-hero_contact .is-call .icon-embed-small { color: var(--text-accent); }
@media (min-width: 992px) { .price-hero_contact { display: flex; } }

/* ---------- Responsive table: real <table> ≥768px, stacked cards below ---------- */
/* [ADD] price-table. ARIA roles on every table element keep table semantics when the
   mobile layout switches the elements to display:block (Safari/Chrome drop them otherwise). */
.price-table { inline-size: 100%; border-collapse: separate; border-spacing: 0; font-size: var(--font-size-small); line-height: var(--lh-small); }
.price-table caption { text-align: start; }
.price-table th, .price-table td { text-align: start; vertical-align: top; }
.price-table tbody th { font-family: var(--font-heading); font-weight: 600; color: var(--text-primary); }
.price-table td { color: var(--text-secondary); }
@media (max-width: 767px) {
  .price-table, .price-table tbody, .price-table tr, .price-table th, .price-table td { display: block; }
  .price-table thead { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .price-table tbody { display: grid; gap: 0.75rem; }
  .price-table tr { padding: 1rem 1.125rem; background: var(--bg-surface); border: 1px solid var(--border-subtle); border-radius: var(--radius-medium); }
  .price-table tbody th { font-size: 1rem; line-height: 1.5; padding-block-end: 0.5rem; margin-block-end: 0.5rem; border-block-end: 1px solid var(--border-subtle); }
  .price-table td + td { margin-block-start: 0.625rem; }
  .price-table td::before {
    content: attr(data-label); display: block; margin-block-end: 0.125rem;
    font-family: var(--font-heading); font-size: 0.8125rem; font-weight: 600; color: var(--text-muted);
  }
}
@media (min-width: 768px) {
  .price-table { border: 1px solid var(--border-subtle); border-radius: var(--radius-large); background: var(--bg-surface); overflow: hidden; }
  .price-table thead th { padding: 0.875rem 1.25rem; background: var(--steel-900); color: var(--white); font-family: var(--font-heading); font-weight: 600; }
  .price-table tbody th, .price-table tbody td { padding: 1rem 1.25rem; border-block-start: 1px solid var(--border-subtle); }
  .price-table tbody tr:nth-child(even) > * { background: var(--steel-50); }
  .price-table tbody th { inline-size: 24%; }
}
.price-table_note { display: flex; gap: 0.5rem; align-items: flex-start; margin-block-start: 0.75rem; font-size: 0.8125rem; color: var(--text-muted); }
.price-table_note .icon-embed-small { color: var(--text-accent); }

/* ---------- Component "table": one card per part, a row per card on desktop ---------- */
/* [ADD] price-components. Cards (not a <table>) because each part carries an H3 (SEO vocabulary
   variant) and headings are not allowed inside <th>. Desktop aligns the cards into table columns
   with a visual header row; mobile stacks them with the price on the second line (pricing-ar §10 #2). */
.price-reference { display: flex; gap: 0.625rem; align-items: flex-start; margin-block-end: 1rem; }
.price-reference .icon-embed-small { color: var(--steel-700); margin-block-start: 0.15em; }
.price-components_head { display: none; }
.price-components_list { display: grid; gap: 0.75rem; padding: 0; margin: 0; list-style: none; }
.price-component {
  position: relative; display: grid; gap: 0.75rem; padding: 1.25rem;
  background: var(--bg-surface); border: 1px solid var(--border-subtle); border-radius: var(--radius-large);
}
.price-component > * { min-inline-size: 0; }
.price-component_name { display: grid; gap: 0.25rem; align-content: start; }
/* Mobile: price on the card's second line (copy §10 #2) → flatten the name block and send the service link to the end */
@media (max-width: 991px) {
  .price-component { display: flex; flex-direction: column; }
  .price-component_name { display: contents; }
  .price-component_badge { order: 0; }
  .price-component_title { order: 1; }
  .price-component_price { order: 2; }
  .price-component_field.is-in { order: 3; }
  .price-component_field.is-out { order: 4; }
  .price-component_link { order: 5; }
  .price-component_badge, .price-component_link { align-self: flex-start; }
}
.price-component_title { font-size: var(--font-size-h4); line-height: var(--lh-h4); }
.price-component_link { justify-self: start; display: inline-flex; align-items: center; gap: 0.25rem; min-block-size: 2.75rem; font-family: var(--font-heading); font-size: 0.875rem; font-weight: 600; color: var(--text-accent); }
.price-component_price { font-family: var(--font-heading); font-size: 1.0625rem; font-weight: 700; line-height: 1.5; color: var(--text-primary); }
.price-component_price-label { display: block; font-size: 0.8125rem; font-weight: 600; color: var(--text-muted); }
.price-component_field { font-size: var(--font-size-small); line-height: var(--lh-small); color: var(--text-secondary); }
.price-component_field dt { display: flex; align-items: center; gap: 0.375rem; font-family: var(--font-heading); font-size: 0.8125rem; font-weight: 600; color: var(--text-muted); margin-block-end: 0.125rem; }
.price-component_field.is-in dt .icon-embed-xsmall { color: var(--success-600); }
.price-component_field.is-out dt .icon-embed-xsmall { color: var(--steel-500); }
/* Recommended row: tint + border + text badge (never colour alone) */
.price-component.is-recommended { background: var(--bg-accent-tint); border-color: var(--border-accent); }
.price-component_badge {
  justify-self: start; display: inline-flex; align-items: center; gap: 0.25rem; padding: 0.125rem 0.5rem;
  border-radius: var(--radius-small); background: var(--steel-900); color: var(--white);
  font-family: var(--font-heading); font-size: 0.8125rem; font-weight: 600; line-height: 1.5;
}
.price-component_badge .icon-embed-xsmall { color: var(--amber-500); }
@media (min-width: 992px) {
  .price-components_head, .price-component { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1.1fr) minmax(0, 1.3fr) minmax(0, 1.1fr); column-gap: 1.5rem; }
  .price-components_head {
    display: grid; padding: 0.75rem 1.25rem; border-radius: var(--radius-medium); background: var(--steel-900); color: var(--white);
    font-family: var(--font-heading); font-size: var(--font-size-small); font-weight: 600; margin-block-end: 0.5rem;
  }
  .price-component_field dt { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .price-component_price-label { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}
.price-components_after { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; margin-block-start: 1.25rem; }
.price-components_min { font-size: var(--font-size-small); color: var(--text-secondary); }

/* ---------- Worked example: an itemised quote slip ---------- */
/* [ADD] price-quote. Signature element: the page's idea is "every line in the quote has a photo",
   so the example is drawn as the quote itself (dashed line items, total row, fine print). */
.price-structure_extra { display: grid; gap: var(--gutter); margin-block-start: var(--space-large); }
@media (min-width: 992px) { .price-structure_extra { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: start; } }
.price-quote {
  position: relative; display: grid; gap: 1rem; padding: 1.5rem;
  background: var(--white); border: 1px solid var(--border-subtle); border-block-start: 6px solid var(--steel-900);
  border-radius: var(--radius-large); box-shadow: var(--shadow-medium);
}
.price-quote_head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.price-quote_title { font-size: var(--font-size-h4); line-height: var(--lh-h4); }
.price-quote_tag { flex: none; font-family: var(--font-heading); font-size: 0.8125rem; font-weight: 600; color: var(--amber-800); background: var(--amber-100); padding: 0.125rem 0.5rem; border-radius: var(--radius-small); }
.price-quote_system { font-size: var(--font-size-small); line-height: var(--lh-small); color: var(--text-secondary); }
.price-quote_lines { display: grid; margin: 0; }
.price-quote_line { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; padding-block: 0.625rem; border-block-end: 1px dashed var(--steel-200); font-size: var(--font-size-small); }
.price-quote_line dt { color: var(--text-secondary); min-inline-size: 0; }
.price-quote_line dd { font-family: var(--font-heading); font-weight: 600; color: var(--text-primary); text-align: end; }
.price-quote_line.is-total { border-block-end: 0; border-block-start: 2px solid var(--steel-900); margin-block-start: 0.25rem; padding-block-start: 0.875rem; font-size: 1rem; }
.price-quote_line.is-total dt, .price-quote_line.is-total dd { font-family: var(--font-heading); font-weight: 700; color: var(--text-primary); }
.price-quote_fine { font-size: 0.8125rem; color: var(--text-muted); }
.price-nopkg { padding: 1.5rem; border-radius: var(--radius-large); background: var(--bg-surface); border: 1px solid var(--border-subtle); display: grid; gap: 0.5rem; align-content: start; }
.price-nopkg_title { font-size: var(--font-size-h4); line-height: var(--lh-h4); display: flex; align-items: center; gap: 0.5rem; }
.price-nopkg_title .icon-embed-medium { color: var(--text-accent); }
.price-nopkg p { color: var(--text-secondary); }

/* ---------- Contracts + multi-branch ---------- */
.price-contract_component { display: grid; gap: var(--space-medium); }
@media (min-width: 992px) { .price-contract_component { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: start; } }
.price-contract_main { display: grid; gap: 1rem; min-inline-size: 0; }
.price-contract_footnote { font-size: var(--font-size-small); line-height: var(--lh-small); color: var(--text-muted); }
.price-contract_footnote a { color: var(--text-accent); font-weight: 600; }
.price-contract_aside { display: grid; gap: 1rem; padding: 1.5rem; background: var(--bg-surface); border: 1px solid var(--border-subtle); border-radius: var(--radius-large); }
.price-contract_aside-title { font-size: var(--font-size-h4); line-height: var(--lh-h4); }
.price-contract_actions { display: grid; gap: 0.25rem; justify-items: start; }
.price-contract_actions .button:not(.is-text) { inline-size: 100%; }
.price-branches { display: grid; gap: var(--space-medium); margin-block-start: var(--space-large); padding: 1.5rem; border-radius: var(--radius-large); }
@media (min-width: 768px) { .price-branches { padding: 2.5rem; } }
@media (min-width: 992px) { .price-branches { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: start; } }
.price-branches_title { font-size: var(--font-size-h3); line-height: var(--lh-h3); }
.price-branches_actions { display: grid; gap: 0.5rem; align-content: start; }
.price-branches_actions .button:not(.is-text) { inline-size: 100%; }
.price-branches_links { display: grid; gap: 0; }

/* ---------- Why cheap costs more ---------- */
.price-cheap_grid { display: grid; gap: var(--gutter); padding: 0; margin: 0; list-style: none; }
@media (min-width: 768px) { .price-cheap_grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.price-cheap_item { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0.375rem 0.875rem; padding: 1.25rem; background: var(--bg-surface); border: 1px solid var(--border-subtle); border-radius: var(--radius-large); }
.price-cheap_item .card_icon { grid-row: span 2; inline-size: 2.5rem; block-size: 2.5rem; }
.price-cheap_item .card_icon svg { inline-size: 1.25rem; block-size: 1.25rem; }
.price-cheap_title { font-size: 1.0625rem; line-height: 1.5; }
.price-cheap_item p { font-size: var(--font-size-small); line-height: var(--lh-small); color: var(--text-secondary); }
.price-cheap_close { margin-block-start: var(--space-medium); max-inline-size: 46rem; color: var(--text-secondary); }
.price-questions { display: grid; gap: 1rem; margin-block-start: var(--space-large); padding: 1.5rem; border-radius: var(--radius-large); background: var(--bg-surface); border: 1px solid var(--border-subtle); }
@media (min-width: 992px) { .price-questions { grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); column-gap: var(--space-large); padding: 2rem; } }
.price-questions_title { font-size: var(--font-size-h3); line-height: var(--lh-h3); }
.price-questions_list { counter-reset: q; display: grid; gap: 0.625rem; padding: 0; margin: 0; list-style: none; }
.price-questions_list li { counter-increment: q; display: grid; grid-template-columns: 1.75rem minmax(0, 1fr); gap: 0.625rem; align-items: start; line-height: 1.7; }
.price-questions_list li::before {
  content: counter(q); display: grid; place-items: center; inline-size: 1.75rem; block-size: 1.75rem; border-radius: var(--radius-round);
  background: var(--steel-900); color: var(--amber-500); font-family: var(--font-heading); font-size: 0.875rem; font-weight: 700;
}
.price-questions_close { font-family: var(--font-heading); font-weight: 600; color: var(--text-primary); }

/* ---------- Every visit / guarantee / payment ---------- */
.price-visit_component { display: grid; gap: var(--gutter); }
@media (min-width: 992px) { .price-visit_component { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: start; } }
.price-visit_main { display: grid; gap: 1rem; padding: 1.5rem; background: var(--bg-surface); border: 1px solid var(--border-subtle); border-radius: var(--radius-large); }
.price-visit_side { display: grid; gap: var(--gutter); }
.price-guarantee { display: grid; gap: 0.625rem; padding: 1.25rem; border-radius: var(--radius-large); border: 1px dashed var(--amber-700); background: var(--bg-surface); }
.price-guarantee_title, .price-pay_title { display: flex; align-items: center; gap: 0.5rem; font-size: 1.0625rem; line-height: 1.5; }
.price-guarantee_title .icon-embed-medium, .price-pay_title .icon-embed-medium { color: var(--text-accent); }
.price-guarantee_status { font-size: 0.8125rem; color: var(--text-muted); }
.price-pay { display: grid; gap: 0.75rem; padding: 1.25rem; border-radius: var(--radius-large); background: var(--bg-surface); border: 1px solid var(--border-subtle); }
.price-pay .check-list { font-size: var(--font-size-small); gap: 0.5rem; }
.price-pay_ids { display: flex; flex-wrap: wrap; gap: 0.25rem 1rem; font-size: 0.8125rem; color: var(--text-muted); padding-block-start: 0.75rem; border-block-start: 1px solid var(--border-subtle); }
.price-project { margin-block-start: var(--space-large); display: grid; gap: var(--gutter); }
@media (min-width: 768px) { .price-project { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; } }
.price-project .project-card { max-inline-size: 28rem; }

/* ---------- Read also (guides, max 2) ---------- */
.price-readalso { display: grid; gap: 0.5rem; padding: 0; margin: 0; list-style: none; }
@media (min-width: 768px) { .price-readalso { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.price-readalso_link {
  display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; min-block-size: 3.5rem; padding: 0.75rem 1rem;
  background: var(--bg-surface); border: 1px solid var(--border-subtle); border-radius: var(--radius-medium);
  font-family: var(--font-heading); font-weight: 600; line-height: 1.5; text-decoration: none; color: var(--text-primary);
  transition: background-color var(--duration-fast) var(--ease-out);
}
.price-readalso_link .is-directional { color: var(--text-accent); transition: transform var(--duration-fast) var(--ease-out); }
@media (hover: hover) {
  .price-readalso_link:hover { background: var(--bg-accent-tint); }
  .price-readalso_link:hover .is-directional { transform: translateX(calc(var(--dir) * -4px)); }
}

/* ---------- Final CTA extras ---------- */
.price-cta_extra { display: grid; gap: 0.75rem; margin-block-start: var(--space-medium); font-size: var(--font-size-small); color: var(--text-secondary); }
.price-cta_extra a { color: var(--text-primary); font-family: var(--font-heading); font-weight: 600; }
.price-cta_chain { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1rem; padding-block-start: 1rem; border-block-start: 1px solid var(--border-subtle); }
.price-cta_chain-label { font-family: var(--font-heading); font-weight: 600; color: var(--text-primary); }

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .price-readalso_link .is-directional { transition: none; }
  .price-readalso_link:hover .is-directional { transform: none; }
}