/*
 * MAWSIM · Client Care and the legal pages.
 * Builds on mawsim.css tokens; classes are prefixed .care- and .legal-.
 *
 *  Care: quick links · questions (sticky topics + accordions) · delivery table · returns · contact form
 *  Legal: hero & counsel note · sticky contents · numbered sections
 */

.page-care, .page-legal { font-variant-numeric: lining-nums; }

/* ── Quick links under the hero ───────────────────────────────────────────── */
.care-quick { border-block-end: 1px solid var(--line); }
.care-quick__list { display: grid; margin-block: 0; }
@media (min-width: 40em) { .care-quick__list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 72em) { .care-quick__list { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.care-quick__list > li { border-block-end: 1px solid var(--line); }
@media (min-width: 40em) {
  .care-quick__list > li { border-block-end: 0; }
  .care-quick__list > li:nth-child(n + 3) { border-block-start: 1px solid var(--line); }
  .care-quick__list > li:nth-child(even) { border-inline-start: 1px solid var(--line); }
}
@media (min-width: 72em) {
  .care-quick__list > li:nth-child(n + 3) { border-block-start: 0; }
  .care-quick__list > li + li { border-inline-start: 1px solid var(--line); }
}
.care-quick__link {
  display: flex;
  align-items: center;
  gap: var(--space-s);
  block-size: 100%;
  min-block-size: 5.5rem;
  padding: var(--space-m) var(--space-s);
  color: var(--fg);
  text-decoration: none;
  transition: background-color var(--dur-2) var(--ease-out);
}
.care-quick__link .seal { color: var(--accent); }
.care-quick__text { display: grid; gap: .1rem; flex: 1; min-inline-size: 0; }
.care-quick__title { font-family: var(--f-display); font-size: var(--step-1); line-height: 1.3; }
.care-quick__title:lang(ar) { line-height: 1.5; }
.care-quick__note { font-size: var(--step--1); color: var(--fg-muted); line-height: 1.45; }
.care-quick__arrow { --icon-size: 1.1rem; color: var(--accent); transition: translate var(--dur-2) var(--ease-out); }
@media (hover: hover) {
  .care-quick__link:hover { background: var(--tint); }
  .care-quick__link:hover .care-quick__arrow { translate: calc(var(--dir) * .3em) 0; }
}

/* ── Section heads ────────────────────────────────────────────────────────── */
.care-head { display: grid; gap: var(--space-s); max-inline-size: 52rem; margin-block-end: var(--space-xl); }
.care-head .section-label { margin-block-end: var(--space-2xs); }
.care-head__title { font-size: var(--step-5); line-height: var(--lh-display); max-inline-size: 15em; }
.care-head__title:lang(ar) { line-height: 1.35; }
.care-head .lede { margin: 0; }

/* ── Questions ────────────────────────────────────────────────────────────── */
.care-faq__layout { display: grid; gap: var(--space-xl); }
.care-faq__aside { display: grid; gap: var(--space-s); align-content: start; }
.care-faq__title { font-size: var(--step-4); line-height: 1.1; }
.care-faq__title:lang(ar) { line-height: 1.4; }
.care-topics { margin-block-start: var(--space-s); }
.care-topics__list { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0; }
.care-topics__link {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  min-block-size: 2.75rem;
  padding: .45rem 1rem;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-pill);
  color: var(--fg);
  font-size: var(--step--1);
  text-decoration: none;
  transition: border-color var(--dur-2), background-color var(--dur-2), color var(--dur-2);
}
.care-topics__link .icon { --icon-size: 1.05rem; color: var(--accent); }
.care-topics__count { font-size: var(--step--2); color: var(--fg-muted); }
@media (hover: hover) { .care-topics__link:hover { border-color: var(--fg); } }

@media (min-width: 64em) {
  .care-faq__layout { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: var(--space-2xl); }
  .care-faq__aside { position: sticky; inset-block-start: calc(var(--header-h) + var(--space-l)); align-self: start; }
  .care-topics__list { display: grid; gap: 0; border-block-start: 1px solid var(--line); }
  .care-topics__link {
    position: relative;
    display: flex;
    inline-size: 100%;
    padding: .75rem 0 .75rem 1rem;
    padding-inline: 1rem 0;
    border: 0;
    border-block-end: 1px solid var(--line);
    border-radius: 0;
    font-size: var(--step-0);
  }
  .care-topics__link::before {
    content: "";
    position: absolute;
    inset-block: .7rem;
    inset-inline-start: 0;
    inline-size: 2px;
    background: var(--c-gold);
    transform: scaleY(0);
    transition: transform var(--dur-3) var(--ease-out);
  }
  .care-topics__link[aria-current]::before { transform: scaleY(1); }
  .care-topics__link[aria-current] { color: var(--fg); }
  .care-topics__count { margin-inline-start: auto; }
  @media (hover: hover) { .care-topics__link:hover { background: var(--tint); } }
}

.care-faq__groups { display: grid; gap: var(--space-2xl); }
.care-group { scroll-margin-block-start: calc(var(--header-h) + var(--space-l)); }
.care-group__title {
  display: flex;
  align-items: center;
  gap: var(--space-s);
  margin-block-end: var(--space-s);
  font-size: var(--step-3);
  line-height: 1.2;
}
.care-group__title .seal { color: var(--accent); }
.care-group__items .accordion:first-child { border-block-start: 1px solid var(--line); }
.care-group .accordion__body a:not(.link-arrow) { color: var(--fg); text-decoration-color: var(--foil); }

.care-steps { display: grid; gap: .6rem; margin: .4rem 0 0; }
.care-steps li { display: grid; grid-template-columns: 1.75rem minmax(0, 1fr); gap: .75rem; align-items: baseline; }
.care-steps__n {
  display: grid;
  place-items: center;
  inline-size: 1.75rem;
  block-size: 1.75rem;
  border: 1px solid color-mix(in srgb, var(--c-gold-ink) 60%, transparent);
  border-radius: 50%;
  color: var(--accent);
  font-family: var(--f-latin-text);
  font-size: .75rem;
  font-weight: 500;
  translate: 0 .3em;
}

/* ── Delivery ─────────────────────────────────────────────────────────────── */
.care-delivery__grid { display: grid; gap: var(--space-xl); align-items: start; }
@media (min-width: 64em) { .care-delivery__grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--space-2xl); } }
.care-table { inline-size: 100%; border-block-start: 1px solid var(--c-ink); text-align: start; }
.care-table th, .care-table td { padding: var(--space-s) var(--space-xs); text-align: start; vertical-align: baseline; }
.care-table thead th {
  padding-block: var(--space-xs);
  border-block-end: 1px solid var(--line);
  font-size: var(--step--2);
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--fg-muted);
}
.care-table thead th:lang(ar) { font-size: var(--step--1); letter-spacing: 0; text-transform: none; }
.care-table tbody tr { border-block-end: 1px solid var(--line); }
.care-table tbody td { color: var(--fg-soft); }
.care-table__place { font-family: var(--f-display); font-size: var(--step-2); font-weight: var(--w-display); color: var(--fg); }
.care-table__fee { text-align: end !important; white-space: nowrap; }
.care-table tbody .care-table__fee { font-family: var(--f-display); font-size: var(--step-2); color: var(--fg); }
.care-table th:first-child, .care-table td:first-child { padding-inline-start: 0; }
.care-table th:last-child, .care-table td:last-child { padding-inline-end: 0; }
@media (max-width: 39.99em) {
  .care-table thead { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); }
  .care-table, .care-table tbody, .care-table tr, .care-table th, .care-table td { display: block; }
  .care-table tbody tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: var(--space-s); padding-block: var(--space-s); }
  .care-table tbody th, .care-table tbody td { padding: 0; }
  .care-table__place { grid-column: 1; }
  .care-table tbody .care-table__fee { grid-column: 2; grid-row: 1; }
  .care-table tbody td:not(.care-table__fee) { grid-column: 1 / -1; font-size: var(--step--1); }
  .care-table tbody td:not(.care-table__fee)::before { content: attr(data-label) " · "; color: var(--fg-muted); }
}
.care-notes { display: grid; gap: var(--space-s); margin: 0; }
.care-note {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--space-s);
  align-items: center;
  padding: var(--space-s) var(--space-m);
  border: 1px solid var(--line);
  border-radius: var(--radius-s);
  background: rgb(246 241 232 / .55);
}
.care-note .seal { color: var(--accent); }
.care-note p { font-size: var(--step--1); line-height: 1.6; color: var(--fg-soft); }
.care-note p:lang(ar) { line-height: 1.85; }
.care-note strong { color: var(--fg); }
.care-note--gift { border-color: color-mix(in srgb, var(--c-gold) 55%, transparent); background: var(--c-ivory); }
.care-note--gift p { font-family: var(--f-display); font-size: var(--step-1); line-height: 1.4; color: var(--fg); }
.care-note--gift p:lang(ar) { line-height: 1.7; }
.care-delivery__track { margin-block-start: var(--space-l); }

/* ── Returns ──────────────────────────────────────────────────────────────── */
.care-policy { display: grid; gap: var(--space-l); margin: 0; }
@media (min-width: 56em) { .care-policy { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-xl); } }
.care-policy__item { display: grid; gap: .6rem; align-content: start; padding-block-start: var(--space-m); border-block-start: 1px solid var(--c-ink); }
.care-policy__n { font-family: var(--f-latin-display); font-style: italic; font-size: var(--step-3); line-height: 1; color: var(--accent); }
.care-policy__title { font-size: var(--step-2); line-height: 1.25; }
.care-policy__title:lang(ar) { line-height: 1.5; }
.care-policy__item p { color: var(--fg-soft); }
.care-returns__note {
  display: flex;
  gap: .75rem;
  align-items: baseline;
  max-inline-size: 48rem;
  margin-block-start: var(--space-xl);
  font-size: var(--step--1);
  color: var(--fg-muted);
}
.care-returns__note .icon { color: var(--accent); flex: none; translate: 0 .2em; }
.care-returns__note a { color: var(--fg); text-decoration-color: var(--foil); }

/* ── Contact ──────────────────────────────────────────────────────────────── */
.care-contact__layout { display: grid; gap: var(--space-2xl); align-items: start; }
@media (min-width: 64em) { .care-contact__layout { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--space-3xl); } }
.care-contact__intro { display: grid; gap: var(--space-s); align-content: start; }
.care-contact__intro .lede { margin-block-end: var(--space-s); }
.care-channels { display: grid; margin: 0; border-block-start: 1px solid var(--line); }
.care-channel {
  display: flex;
  align-items: center;
  gap: var(--space-s);
  min-block-size: 4rem;
  padding-block: var(--space-xs);
  border-block-end: 1px solid var(--line);
  color: var(--fg);
  text-decoration: none;
}
.care-channel .seal { color: var(--accent); transition: background-color var(--dur-2), color var(--dur-2); }
.care-channel__text { display: grid; gap: .05rem; }
.care-channel__label { font-size: var(--step--2); font-weight: 500; letter-spacing: .16em; text-transform: uppercase; color: var(--fg-muted); }
.care-channel__label:lang(ar) { font-size: var(--step--1); letter-spacing: 0; text-transform: none; }
.care-channel__value { font-family: var(--f-latin-display); font-size: var(--step-1); }
[dir="rtl"] .care-channel__value { text-align: right; }
@media (hover: hover) { .care-channel:hover .seal { background: var(--c-gold-ink); color: var(--c-ivory); border-color: var(--c-gold-ink); } }
.care-contact__address { display: flex; align-items: center; gap: .6rem; margin-block-start: var(--space-xs); font-size: var(--step--1); color: var(--fg-muted); }
.care-contact__address .icon { color: var(--accent); }

.care-contact__panel {
  position: relative;
  padding: var(--space-l) var(--space-m);
  border: 1px solid var(--line);
  border-radius: var(--radius-s);
  background: var(--c-ivory);
}
@media (min-width: 40em) { .care-contact__panel { padding: var(--space-xl); } }
.care-form { display: grid; gap: var(--space-m); }
.care-form .form-errors { margin: 0; }
.care-form__foot { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-s) var(--space-m); }
.care-form__note { font-size: var(--step--1); color: var(--fg-muted); }
.care-form__note a { color: var(--fg); text-decoration-color: var(--foil); }
.care-form__status:empty { display: none; }
.care-form__status { font-size: var(--step--1); color: var(--fg); }
.care-form__status.is-error { padding: var(--space-xs) var(--space-s); border-inline-start: 2px solid var(--c-error); background: rgb(148 57 42 / .06); color: var(--c-error); }
.care-form.is-done .care-form__fields,
.care-form.is-done .care-form__foot,
.care-form.is-done .form-errors { display: none; }
.care-form.is-done .care-form__status {
  display: grid;
  justify-items: center;
  gap: var(--space-s);
  padding-block: var(--space-xl);
  text-align: center;
  font-family: var(--f-display);
  font-size: var(--step-3);
  line-height: 1.3;
  outline: none;
}
.care-form.is-done .care-form__status::before {
  content: "";
  inline-size: 2.2rem;
  aspect-ratio: 180.21 / 344.86;
  background: var(--c-gold);
  -webkit-mask: url("../../img/brand/mark.a98092d6a7a9.svg") center / contain no-repeat;
  mask: url("../../img/brand/mark.a98092d6a7a9.svg") center / contain no-repeat;
}
.care-sent { display: grid; justify-items: center; gap: var(--space-s); padding-block: var(--space-xl); text-align: center; }
.care-sent__mark { block-size: 4rem; color: var(--foil); }
.care-sent__mark .brand-svg { block-size: 100%; }
.care-sent__title { font-family: var(--f-display); font-size: var(--step-3); line-height: 1.3; color: var(--fg); }
.care-sent p:not(.care-sent__title) { color: var(--fg-muted); max-inline-size: 28rem; }

/* ── Legal pages ──────────────────────────────────────────────────────────── */
.legal-hero { padding-block: var(--space-l) var(--space-2xl); }
.legal-hero__inner { display: grid; gap: var(--space-s); justify-items: start; }
.legal-hero__inner .breadcrumbs { margin-block-end: var(--space-l); }
.legal-hero__title { font-size: var(--step-6); }
.legal-hero__updated { font-size: var(--step--1); color: var(--fg-muted); }
.legal-hero__updated time { color: var(--fg); }
.legal-note {
  display: flex;
  gap: .8rem;
  align-items: baseline;
  max-inline-size: 44rem;
  margin-block-start: var(--space-s);
  padding: var(--space-s) var(--space-m);
  border: 1px solid color-mix(in srgb, var(--c-gold) 50%, transparent);
  border-radius: var(--radius-s);
  background: rgb(246 241 232 / .6);
  font-size: var(--step--1);
  line-height: 1.6;
  color: var(--fg-soft);
}
.legal-note .icon { flex: none; color: var(--accent); translate: 0 .2em; }

.legal-layout { display: grid; gap: var(--space-xl); padding-block: var(--space-2xl) var(--space-xl); }
@media (min-width: 64em) {
  .legal-layout { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: var(--space-2xl); }
  .legal-toc { position: sticky; inset-block-start: calc(var(--header-h) + var(--space-l)); align-self: start; }
}
.legal-toc__title { margin-block-end: var(--space-xs); color: var(--fg-muted); }
.legal-toc__list { display: grid; margin: 0; border-block-start: 1px solid var(--line); }
.legal-toc__link {
  position: relative;
  display: flex;
  align-items: baseline;
  gap: .8rem;
  min-block-size: 2.75rem;
  padding-block: .55rem;
  border-block-end: 1px solid var(--line);
  color: var(--fg-soft);
  font-size: var(--step--1);
  text-decoration: none;
  transition: color var(--dur-2);
}
.legal-toc__n { font-family: var(--f-latin-display); font-size: var(--step-0); color: var(--fg-muted); min-inline-size: 1.5rem; }
.legal-toc__link[aria-current] { color: var(--fg); }
.legal-toc__link[aria-current] .legal-toc__n { color: var(--accent); }
.legal-toc__link::after {
  content: "";
  position: absolute;
  inset-block-end: -1px;
  inset-inline-start: 0;
  inline-size: 100%;
  block-size: 1px;
  background: var(--c-gold);
  transform: scaleX(var(--progress, 0));
  transform-origin: 0 50%;
  transition: transform var(--dur-1) linear;
}
[dir="rtl"] .legal-toc__link::after { transform-origin: 100% 50%; }
@media (hover: hover) { .legal-toc__link:hover { color: var(--fg); } }
@media (max-width: 63.99em) {
  .legal-toc__list { grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr)); column-gap: var(--space-m); }
  .legal-toc__link::after { display: none; }
}

.legal-body { max-inline-size: 44rem; }
.legal-intro { font-family: var(--f-display); font-size: var(--step-2); line-height: 1.45; color: var(--fg); }
.legal-intro:lang(ar) { line-height: 1.8; }
.legal-section { scroll-margin-block-start: calc(var(--header-h) + var(--space-l)); }
.legal-section h2 { display: flex; align-items: baseline; gap: .8rem; margin-block-start: 1.8em; font-size: var(--step-3); }
.legal-section h2 + * { margin-block-start: .7em; }
.legal-section > * + * { margin-block-start: 1em; }
.legal-n { font-family: var(--f-latin-display); font-size: .62em; color: var(--accent); letter-spacing: .04em; }
.legal-more { display: grid; gap: var(--space-m); padding-block: 0 var(--space-3xl); }
.legal-more ul { margin: 0; gap: var(--space-xs) var(--space-l); }