/* ==========================================================================
   أم سارة — الصفحات الداخلية (التصميم الهادئ)
   رأس الصفحة، أقسام الخدمات، المتجر، الأسئلة، ثم إعادة تلوين السلة والمحادثة.
   ========================================================================== */

/* ---------- رأس الصفحة ---------- */

.page-head { padding-block: clamp(2.8rem, 6vw, 4.5rem) clamp(2rem, 4vw, 3rem); border-bottom: 1px solid var(--line); }
.page-head .container { display: flex; flex-direction: column; align-items: flex-start; gap: 1rem; }
.crumbs { display: flex; gap: 0.5rem; font-size: 0.85rem; color: var(--mute); }
.crumbs a:hover { color: var(--primary); }

/* شريط الجامعة المختارة (services.html?uni=ksu) */
.uni-banner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; margin-top: 0.4rem; padding: 0.9rem 1.1rem; border-radius: 12px; background: var(--primary-soft); color: var(--primary); }
.uni-banner[hidden] { display: none; }
.uni-banner b { font-weight: 700; }

/* ---------- أقسام الخدمات الستة ---------- */

.tracks-nav { position: sticky; top: 72px; z-index: 20; padding-block: 0.8rem; background: color-mix(in srgb, var(--bg) 94%, transparent); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); border-bottom: 1px solid var(--line); }
.tracks-nav .container { display: flex; gap: 0.4rem; overflow-x: auto; scrollbar-width: none; }
.tracks-nav a { flex-shrink: 0; padding: 0.4rem 0.9rem; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); font-size: 0.88rem; white-space: nowrap; }
.tracks-nav a:hover { border-color: var(--primary); color: var(--primary); }

.track { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(1.5rem, 4vw, 3.5rem); padding-block: clamp(2.5rem, 5vw, 3.8rem); border-bottom: 1px solid var(--line); scroll-margin-top: 140px; }
.track__aside { display: flex; flex-direction: column; align-items: flex-start; gap: 0.9rem; }
.track__long { color: var(--ink-2); }
.track__features { display: grid; gap: 0.4rem; }
.track__features li { display: flex; gap: 0.55rem; font-size: 0.95rem; }
.track__features li::before { content: "✓"; color: var(--primary); font-weight: 700; }
.track__subs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.6rem; align-content: start; }
.sub { display: flex; justify-content: space-between; align-items: center; gap: 0.8rem; padding: 0.85rem 1rem; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); font-size: 0.95rem; transition: border-color 0.2s, color 0.2s; }
.sub:hover { border-color: var(--primary); color: var(--primary); }
.sub i { font-size: 1rem; color: var(--mute); }

/* ---------- المتجر ---------- */

.store-bar { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 1rem; margin-bottom: 1.6rem; }
.search { position: relative; display: flex; align-items: center; width: min(100%, 20rem); }
.search svg { position: absolute; inset-inline-start: 0.9rem; width: 1rem; height: 1rem; color: var(--mute); pointer-events: none; }
.search input { width: 100%; height: 2.8rem; padding-inline: 2.5rem 1rem; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); color: var(--ink); font: inherit; font-size: 0.95rem; }
.search input:focus { outline: 0; border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-soft); }

.svc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 19rem), 1fr)); gap: 1.1rem; align-items: start; }
.svc { display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); overflow: hidden; }
.svc[hidden] { display: none; }
.svc__head { display: flex; flex-direction: column; gap: 0.6rem; padding: 1.1rem 1.2rem 0.8rem; }
.svc__top { display: flex; justify-content: space-between; align-items: center; gap: 1rem; }
.svc__top .label { font-size: 0.8rem; font-weight: 600; color: var(--gold); }
.svc__icon { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 12px; background: var(--primary-soft); color: var(--primary); font-size: 1.3rem; }
.svc__title { font-family: var(--f-display); font-weight: 700; font-size: 1.3rem; line-height: 1.45; }
.svc__body { padding: 0 1.2rem 0.9rem; }
.svc__desc { color: var(--ink-2); font-size: 0.92rem; margin-bottom: 0.4rem; }
.svc__opt { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 0.8rem; min-height: 3rem; border-top: 1px solid var(--line); font-size: 0.93rem; }
.svc__price { font-weight: 700; white-space: nowrap; }
.svc__price small { font-weight: 400; font-size: 0.75rem; color: var(--mute); margin-inline-start: 0.2em; }
.svc__add { position: relative; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; background: var(--primary-soft); color: var(--primary); transition: background-color 0.2s, color 0.2s; }
.svc__add::before, .svc__add::after { content: ""; position: absolute; width: 12px; height: 2px; border-radius: 2px; background: currentColor; transition: transform 0.3s var(--ease); }
.svc__add::after { transform: rotate(90deg); }
.svc__add:hover { background: var(--primary); color: #fff; }
.svc__add.is-added { background: #1f9d55; color: #fff; }
.svc__add.is-added::before { transform: rotate(45deg) translate(-2px, 3px) scaleX(0.5); }
.svc__add.is-added::after { transform: rotate(-45deg) translate(2px, 1px) scaleX(0.9); }
.svc-empty { grid-column: 1 / -1; padding: 3rem 0; text-align: center; color: var(--mute); }
.skeleton { border-radius: var(--radius); background: linear-gradient(100deg, var(--sand) 30%, #fff 50%, var(--sand) 70%) 0 0 / 300% 100%; animation: shimmer 1.6s linear infinite; min-height: 16rem; }
@keyframes shimmer { to { background-position: -150% 0; } }

/* ---------- الأسئلة الشائعة ---------- */

.faq { display: grid; gap: 0.6rem; max-width: 860px; }
.faq details { border: 1px solid var(--line); border-radius: 14px; background: var(--surface); }
.faq summary { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: 1rem 1.2rem; font-weight: 600; cursor: pointer; list-style: none; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-size: 1.3rem; line-height: 1; color: var(--primary); transition: transform 0.25s; }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq p { padding: 0 1.2rem 1.1rem; color: var(--ink-2); }

/* ---------- صفحة العمل ---------- */

.doc-page .doc { max-width: 1100px; margin-inline: auto; }
.notfound { display: flex; flex-direction: column; align-items: flex-start; gap: 1rem; padding-block: 5rem; }

/* ---------- الاستجابة ---------- */

@media (max-width: 900px) {
  .track { grid-template-columns: 1fr; }
  .tracks-nav { top: 72px; }
}
@media (max-width: 560px) {
  .track__subs { grid-template-columns: 1fr; }
}

/* ==========================================================================
   السلة — إعادة تلوين ur-cart.css
   ========================================================================== */

.urc, .urc-toast {
  --urc-ink: var(--ink);
  --urc-mute: var(--mute);
  --urc-line: var(--line);
  --urc-card: var(--surface);
  --urc-body: var(--bg);
  --urc-green: var(--primary);
  --urc-lime: var(--primary);
  --urc-dark: var(--ink);
  --urc-ease: var(--ease);
  font-family: var(--f-body);
}
.urc__title { font-family: var(--f-display); font-weight: 700; }
.urc__count, .urc .urc__btn--primary { color: #fff; }
.urc .urc__btn--primary:hover { background: #57234b; color: #fff; }
.urc .urc__btn--dark { background: var(--ink); color: #fff; }
.urc .urc__btn--dark:hover { background: var(--primary); color: #fff; }
.urc__steps li.is-past span { color: #fff; }
.urc-toast { color: #fff; }
.urc-toast i { color: #f3d9a8; }
.urc-toast button { color: #fff; }

/* ==========================================================================
   تواصل — إعادة تلوين محادثة ur-contact.css
   ========================================================================== */

.ur-contact.ur-contact {
  --pf-body: var(--bg);
  --pf-card: var(--surface);
  --pf-ink: var(--ink);
  --pf-mute: var(--mute);
  --pf-line: var(--line);
  --pf-green: var(--primary);
  --pf-ease: var(--ease);
  --c-lime: #f3d9a8;
  --c-deep: var(--primary);
  --c-me: var(--primary);
  --c-h: clamp(540px, calc(100svh - 240px), 720px);
  background: transparent;
}
.ur-contact .contact-wrap { padding-block: clamp(2rem, 4vw, 3rem) 0; }
.ur-contact .c-title { margin: 0; font-family: var(--f-display); font-weight: 700; font-size: clamp(1.6rem, 1.1rem + 1.4vw, 2.2rem); color: #fff; }
.ur-contact .c-title em { font-style: normal; color: #f3d9a8; font-feature-settings: "swsh" 1; }
.ur-contact .c-panel::before { background: radial-gradient(30rem 22rem at 0% 100%, rgba(255, 255, 255, 0.12), transparent 70%); }
.ur-contact .c-wa-main { color: var(--primary); background: #fff; }
.ur-contact .c-wa-main:hover { background: #f3d9a8; color: var(--ink); }
.ur-contact .c-wa-main__icon { background: var(--primary); color: #fff; }
.ur-contact .c-wa-main small { color: var(--mute); }
.ur-contact .c-avatar { position: relative; background: var(--primary); color: #fff; font-family: var(--f-display); font-weight: 700; }
.ur-contact .c-chat { box-shadow: var(--shadow); }
.ur-contact .c-opt:hover:not(:disabled) { color: #fff; }
.ur-contact .c-sum__head { color: #fff; }
.ur-contact .c-send { color: #fff; }
.ur-contact .c-composer textarea { font-family: var(--f-body); }

/* ==========================================================================
   الرئيسية: «من نحن» + الأقسام الستة في مستوى واحد (ربع + ثلاثة أرباع)
   ========================================================================== */
.intro__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 3fr);
  gap: clamp(1.75rem, 3.5vw, 3.5rem);
  align-items: start;
}
.intro__about {
  position: sticky;
  top: 100px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1rem;
}
.intro__title { font-size: clamp(2.6rem, 1.6rem + 2.8vw, 4.4rem); line-height: 1.25; }
/* الوصف: أصغر بخط النص، مع إبقاء تدرّج الخفوت في هوية «من نحن» */
.statement__text.intro__text {
  max-width: none;
  font-family: var(--f-body);
  font-weight: 500;
  font-size: clamp(1rem, 0.92rem + 0.3vw, 1.12rem);
  line-height: 1.95;
}
.intro__text b { color: var(--primary); font-weight: 700; }
.intro__head { margin-bottom: clamp(1.1rem, 2vw, 1.5rem); }
.intro__subtitle { font-size: clamp(1.5rem, 1.1rem + 1.2vw, 2.2rem); }
/* بطاقات أخفّ: أيقونة + اسم القسم + وصفه، بمسافات أقل */
.intro__tracks { gap: clamp(0.8rem, 1.4vw, 1.1rem); }
.intro__tracks .card { gap: 0.55rem; padding: clamp(1.1rem, 1.8vw, 1.4rem); }
.intro__tracks .card__icon { width: 44px; height: 44px; font-size: 1.35rem; margin-bottom: 0.25rem; }
.intro__tracks .card__title { font-size: 1.22rem; }
.intro__tracks .card__text { font-size: 0.9rem; line-height: 1.75; }

/* لابتوب صغير/تابلت أفقي: التعريف فوق الأقسام بعرض كامل */
@media (max-width: 1100px) {
  .intro__grid { grid-template-columns: 1fr; }
  .intro__about { position: static; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr); column-gap: 2.5rem; align-items: end; }
  .intro__about .kicker, .intro__about .intro__title { grid-column: 1; }
  .intro__about .intro__text { grid-column: 2; grid-row: 1 / span 3; align-self: center; }
  .intro__about .link { grid-column: 1; }
}
@media (max-width: 900px) {
  .intro__tracks { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .intro__about { display: flex; }
  .intro__tracks { grid-template-columns: 1fr; }
}

/* ---------- شريطا الجامعات: الثاني بالاتجاه المعاكس وبنفس البطاقات ---------- */
.unis .belt:not(.belt--rev) { padding-bottom: 0.45rem; }
.belt--rev { padding-top: 0.45rem; }
.belt--rev .belt__track { animation-direction: reverse; }
@media (prefers-reduced-motion: reduce) { .belt--rev { display: none; } }

/* ---------- المتجر: شريط واحد يتقلّب وتبرز بطاقة الوسط ---------- */
.shop__rail {
  position: relative;
  overflow: hidden;
  padding-block: 1.6rem 2.2rem;
  margin-block: -1.6rem -2.2rem;
  touch-action: pan-y;
  user-select: none;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 9%, #000 91%, transparent);
  mask-image: linear-gradient(to right, transparent, #000 9%, #000 91%, transparent);
}
.shop__track { display: flex; gap: clamp(0.9rem, 1.6vw, 1.3rem); will-change: transform; }
/* السهمان على طرفي الشريط فوق منطقة التلاشي */
.shop__stage { position: relative; }
.shop__arrow {
  position: absolute;
  top: 50%;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 3.2rem;
  height: 3.2rem;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--primary);
  box-shadow: 0 14px 30px -18px rgba(43, 18, 38, 0.45);
  translate: 0 -50%;
  transition: background-color 0.3s, color 0.3s, border-color 0.3s, transform 0.3s var(--ease);
}
.shop__arrow--prev { inset-inline-start: 0; }
.shop__arrow--next { inset-inline-end: 0; }
.shop__arrow svg { width: 1.25rem; height: 1.25rem; transition: transform 0.3s var(--ease); }
.shop__arrow:hover, .shop__arrow:focus-visible { background: var(--primary); border-color: var(--primary); color: #fff; }
.shop__arrow--prev:hover svg { transform: translateX(3px); }
.shop__arrow--next:hover svg { transform: translateX(-3px); }
.shop__arrow:active { transform: scale(0.92); }
.shop__rail.is-live { cursor: grab; }
.shop__rail.is-dragging { cursor: grabbing; }
.shop__rail.is-dragging .shop-card { pointer-events: none; }
.shop-card {
  flex: 0 0 clamp(250px, 24vw, 310px);
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-areas: "icon cat" "title title" "text text" "foot foot";
  grid-template-rows: auto auto auto 1fr;
  align-items: center;
  gap: 0.35rem 0.9rem;
  padding: clamp(1.2rem, 2vw, 1.55rem);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  transform: perspective(1100px) rotateY(var(--ry, 0deg)) scale(var(--s, 1));
  opacity: var(--o, 1);
  transition: border-color 0.4s, box-shadow 0.4s;
}
.shop-card.is-center {
  border-color: color-mix(in srgb, var(--primary) 30%, var(--line));
  box-shadow: 0 28px 50px -30px rgba(43, 18, 38, 0.5), 0 0 0 1px rgba(28, 27, 34, 0.03);
}
.shop-card.is-center .shop-card__icon { background: var(--primary); color: #fff; }
.shop-card__icon { grid-area: icon; display: grid; place-items: center; width: 52px; height: 52px; border-radius: 14px; background: var(--primary-soft); color: var(--primary); font-size: 1.55rem; margin-bottom: 0.75rem; transition: background-color 0.3s, color 0.3s; }
.shop-card__cat { grid-area: cat; justify-self: end; align-self: start; padding: 0.2rem 0.75rem; border-radius: 999px; background: var(--sand); color: var(--ink-2); font-size: 0.78rem; font-weight: 600; }
.shop-card__title { grid-area: title; font-family: var(--f-display); font-weight: 700; font-size: 1.25rem; line-height: 1.45; }
.shop-card__text { grid-area: text; color: var(--mute); font-size: 0.9rem; }
.shop-card__foot { grid-area: foot; display: flex; align-items: center; justify-content: space-between; gap: 1rem; align-self: end; margin-top: 1rem; padding-top: 1rem; border-top: 1px dashed var(--line); }
.shop-card__price { color: var(--ink-2); font-size: 0.9rem; }
.shop-card__price small { margin-inline-end: 0.35rem; color: var(--mute); font-size: 0.82rem; }
.shop-card__price b { color: var(--primary); font-family: var(--f-display); font-size: 1.35rem; font-weight: 700; }
.shop-card__go { display: grid; place-items: center; flex: none; width: 2.5rem; height: 2.5rem; border-radius: 50%; border: 1px solid var(--line); color: var(--primary); transition: background-color 0.3s, color 0.3s, border-color 0.3s; }
.shop-card__go svg { width: 1.05rem; height: 1.05rem; transform: rotate(45deg); transition: transform 0.45s var(--ease); }
.shop-card:hover, .shop-card:focus-visible { border-color: color-mix(in srgb, var(--primary) 40%, var(--line)); }
.shop-card:hover .shop-card__icon, .shop-card:focus-visible .shop-card__icon { background: var(--primary); color: #fff; }
.shop-card:hover .shop-card__go, .shop-card:focus-visible .shop-card__go { background: var(--primary); border-color: var(--primary); color: #fff; }
.shop-card:hover .shop-card__go svg, .shop-card:focus-visible .shop-card__go svg { transform: rotate(0deg); }

@media (max-width: 560px) {
  .shop-card { flex-basis: min(280px, 74vw); }
  .shop__arrow { width: 2.6rem; height: 2.6rem; }
  .shop__arrow--prev { inset-inline-start: -0.4rem; }
  .shop__arrow--next { inset-inline-end: -0.4rem; }
  .shop__rail { -webkit-mask-image: linear-gradient(to right, transparent, #000 5%, #000 95%, transparent); mask-image: linear-gradient(to right, transparent, #000 5%, #000 95%, transparent); }
}
/* بلا حركة: شريط يُمرَّر يدوياً */
.shop__rail.is-still { overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; -webkit-mask-image: none; mask-image: none; }
.shop__rail.is-still .shop-card { scroll-snap-align: center; }

/* ---------- شريط الخدمات النصي: أصغر وأقرب إلى الواجهة ---------- */
body .ticker { padding-block: 0.6rem; }
body .hero + .ticker { margin-top: calc(-1 * clamp(1.4rem, 3vw, 2.4rem)); }
body .ticker__group { gap: clamp(0.9rem, 2vw, 1.5rem); padding-inline-end: clamp(0.9rem, 2vw, 1.5rem); }
body .ticker__item { font-size: clamp(1.05rem, 0.85rem + 0.8vw, 1.45rem); line-height: 1.6; }
body .ticker__star { font-size: 0.75rem; }