/* ── app.css · جزء 1 من 16: الأساس: إعادة الضبط (Tailwind preflight) والمتغيرات والـ container (المصدر: resources/css/shary/app/01-base.css — عدّل هنا وشغّل tools/minify-assets.sh) */
*, ::before, ::after {
  --tw-border-spacing-x: 0;
  --tw-border-spacing-y: 0;
  --tw-translate-x: 0;
  --tw-translate-y: 0;
  --tw-rotate: 0;
  --tw-skew-x: 0;
  --tw-skew-y: 0;
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  --tw-pan-x:  ;
  --tw-pan-y:  ;
  --tw-pinch-zoom:  ;
  --tw-scroll-snap-strictness: proximity;
  --tw-gradient-from-position:  ;
  --tw-gradient-via-position:  ;
  --tw-gradient-to-position:  ;
  --tw-ordinal:  ;
  --tw-slashed-zero:  ;
  --tw-numeric-figure:  ;
  --tw-numeric-spacing:  ;
  --tw-numeric-fraction:  ;
  --tw-ring-inset:  ;
  --tw-ring-offset-width: 0px;
  --tw-ring-offset-color: #fff;
  --tw-ring-color: rgb(59 130 246 / 0.5);
  --tw-ring-offset-shadow: 0 0 #0000;
  --tw-ring-shadow: 0 0 #0000;
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
  --tw-blur:  ;
  --tw-brightness:  ;
  --tw-contrast:  ;
  --tw-grayscale:  ;
  --tw-hue-rotate:  ;
  --tw-invert:  ;
  --tw-saturate:  ;
  --tw-sepia:  ;
  --tw-drop-shadow:  ;
  --tw-backdrop-blur:  ;
  --tw-backdrop-brightness:  ;
  --tw-backdrop-contrast:  ;
  --tw-backdrop-grayscale:  ;
  --tw-backdrop-hue-rotate:  ;
  --tw-backdrop-invert:  ;
  --tw-backdrop-opacity:  ;
  --tw-backdrop-saturate:  ;
  --tw-backdrop-sepia:  ;
  --tw-contain-size:  ;
  --tw-contain-layout:  ;
  --tw-contain-paint:  ;
  --tw-contain-style:  ;
}

::backdrop {
  --tw-border-spacing-x: 0;
  --tw-border-spacing-y: 0;
  --tw-translate-x: 0;
  --tw-translate-y: 0;
  --tw-rotate: 0;
  --tw-skew-x: 0;
  --tw-skew-y: 0;
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  --tw-pan-x:  ;
  --tw-pan-y:  ;
  --tw-pinch-zoom:  ;
  --tw-scroll-snap-strictness: proximity;
  --tw-gradient-from-position:  ;
  --tw-gradient-via-position:  ;
  --tw-gradient-to-position:  ;
  --tw-ordinal:  ;
  --tw-slashed-zero:  ;
  --tw-numeric-figure:  ;
  --tw-numeric-spacing:  ;
  --tw-numeric-fraction:  ;
  --tw-ring-inset:  ;
  --tw-ring-offset-width: 0px;
  --tw-ring-offset-color: #fff;
  --tw-ring-color: rgb(59 130 246 / 0.5);
  --tw-ring-offset-shadow: 0 0 #0000;
  --tw-ring-shadow: 0 0 #0000;
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
  --tw-blur:  ;
  --tw-brightness:  ;
  --tw-contrast:  ;
  --tw-grayscale:  ;
  --tw-hue-rotate:  ;
  --tw-invert:  ;
  --tw-saturate:  ;
  --tw-sepia:  ;
  --tw-drop-shadow:  ;
  --tw-backdrop-blur:  ;
  --tw-backdrop-brightness:  ;
  --tw-backdrop-contrast:  ;
  --tw-backdrop-grayscale:  ;
  --tw-backdrop-hue-rotate:  ;
  --tw-backdrop-invert:  ;
  --tw-backdrop-opacity:  ;
  --tw-backdrop-saturate:  ;
  --tw-backdrop-sepia:  ;
  --tw-contain-size:  ;
  --tw-contain-layout:  ;
  --tw-contain-paint:  ;
  --tw-contain-style:  ;
}

/*
! tailwindcss v3.4.17 | MIT License | https://tailwindcss.com
*/

/*
1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4)
2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116)
*/

*,
::before,
::after {
  box-sizing: border-box;
  /* 1 */
  border-width: 0;
  /* 2 */
  border-style: solid;
  /* 2 */
  border-color: #e5e7eb;
  /* 2 */
}

::before,
::after {
  --tw-content: '';
}

/*
1. Use a consistent sensible line-height in all browsers.
2. Prevent adjustments of font size after orientation changes in iOS.
3. Use a more readable tab size.
4. Use the user's configured `sans` font-family by default.
5. Use the user's configured `sans` font-feature-settings by default.
6. Use the user's configured `sans` font-variation-settings by default.
7. Disable tap highlights on iOS
*/

html,
:host {
  line-height: 1.5;
  /* 1 */
  -webkit-text-size-adjust: 100%;
  /* 2 */
  -moz-tab-size: 4;
  /* 3 */
  -o-tab-size: 4;
     tab-size: 4;
  /* 3 */
  font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  /* 4 */
  font-feature-settings: normal;
  /* 5 */
  font-variation-settings: normal;
  /* 6 */
  -webkit-tap-highlight-color: transparent;
  /* 7 */
}

/*
1. Remove the margin in all browsers.
2. Inherit line-height from `html` so users can set them as a class directly on the `html` element.
*/

body {
  margin: 0;
  /* 1 */
  line-height: inherit;
  /* 2 */
}

/*
1. Add the correct height in Firefox.
2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655)
3. Ensure horizontal rules are visible by default.
*/

hr {
  height: 0;
  /* 1 */
  color: inherit;
  /* 2 */
  border-top-width: 1px;
  /* 3 */
}

/*
Add the correct text decoration in Chrome, Edge, and Safari.
*/

abbr:where([title]) {
  -webkit-text-decoration: underline dotted;
          text-decoration: underline dotted;
}

/*
Remove the default font size and weight for headings.
*/

h1,
h2,
h3,
h4,
h5,
h6 {
  font-size: inherit;
  font-weight: inherit;
}

/*
Reset links to optimize for opt-in styling instead of opt-out.
*/

a {
  color: inherit;
  text-decoration: inherit;
}

/*
Add the correct font weight in Edge and Safari.
*/

b,
strong {
  font-weight: bolder;
}

/*
1. Use the user's configured `mono` font-family by default.
2. Use the user's configured `mono` font-feature-settings by default.
3. Use the user's configured `mono` font-variation-settings by default.
4. Correct the odd `em` font sizing in all browsers.
*/

code,
kbd,
samp,
pre {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  /* 1 */
  font-feature-settings: normal;
  /* 2 */
  font-variation-settings: normal;
  /* 3 */
  font-size: 1em;
  /* 4 */
}

/*
Add the correct font size in all browsers.
*/

small {
  font-size: 80%;
}

/*
Prevent `sub` and `sup` elements from affecting the line height in all browsers.
*/

sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

/*
1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297)
2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016)
3. Remove gaps between table borders by default.
*/

table {
  text-indent: 0;
  /* 1 */
  border-color: inherit;
  /* 2 */
  border-collapse: collapse;
  /* 3 */
}

/*
1. Change the font styles in all browsers.
2. Remove the margin in Firefox and Safari.
3. Remove default padding in all browsers.
*/

button,
input,
optgroup,
select,
textarea {
  font-family: inherit;
  /* 1 */
  font-feature-settings: inherit;
  /* 1 */
  font-variation-settings: inherit;
  /* 1 */
  font-size: 100%;
  /* 1 */
  font-weight: inherit;
  /* 1 */
  line-height: inherit;
  /* 1 */
  letter-spacing: inherit;
  /* 1 */
  color: inherit;
  /* 1 */
  margin: 0;
  /* 2 */
  padding: 0;
  /* 3 */
}

/*
Remove the inheritance of text transform in Edge and Firefox.
*/

button,
select {
  text-transform: none;
}

/*
1. Correct the inability to style clickable types in iOS and Safari.
2. Remove default button styles.
*/

button,
input:where([type='button']),
input:where([type='reset']),
input:where([type='submit']) {
  -webkit-appearance: button;
  /* 1 */
  background-color: transparent;
  /* 2 */
  background-image: none;
  /* 2 */
}

/*
Use the modern Firefox focus style for all focusable elements.
*/

:-moz-focusring {
  outline: auto;
}

/*
Remove the additional `:invalid` styles in Firefox. (https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737)
*/

:-moz-ui-invalid {
  box-shadow: none;
}

/*
Add the correct vertical alignment in Chrome and Firefox.
*/

progress {
  vertical-align: baseline;
}

/*
Correct the cursor style of increment and decrement buttons in Safari.
*/

::-webkit-inner-spin-button,
::-webkit-outer-spin-button {
  height: auto;
}

/*
1. Correct the odd appearance in Chrome and Safari.
2. Correct the outline style in Safari.
*/

[type='search'] {
  -webkit-appearance: textfield;
  /* 1 */
  outline-offset: -2px;
  /* 2 */
}

/*
Remove the inner padding in Chrome and Safari on macOS.
*/

::-webkit-search-decoration {
  -webkit-appearance: none;
}

/*
1. Correct the inability to style clickable types in iOS and Safari.
2. Change font properties to `inherit` in Safari.
*/

::-webkit-file-upload-button {
  -webkit-appearance: button;
  /* 1 */
  font: inherit;
  /* 2 */
}

/*
Add the correct display in Chrome and Safari.
*/

summary {
  display: list-item;
}

/*
Removes the default spacing and border for appropriate elements.
*/

blockquote,
dl,
dd,
h1,
h2,
h3,
h4,
h5,
h6,
hr,
figure,
p,
pre {
  margin: 0;
}

fieldset {
  margin: 0;
  padding: 0;
}

legend {
  padding: 0;
}

ol,
ul,
menu {
  list-style: none;
  margin: 0;
  padding: 0;
}

/*
Reset default styling for dialogs.
*/

dialog {
  padding: 0;
}

/*
Prevent resizing textareas horizontally by default.
*/

textarea {
  resize: vertical;
}

/*
1. Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300)
2. Set the default placeholder color to the user's configured gray 400 color.
*/

input::-moz-placeholder, textarea::-moz-placeholder {
  opacity: 1;
  /* 1 */
  color: #9ca3af;
  /* 2 */
}

input::placeholder,
textarea::placeholder {
  opacity: 1;
  /* 1 */
  color: #9ca3af;
  /* 2 */
}

/*
Set the default cursor for buttons.
*/

button,
[role="button"] {
  cursor: pointer;
}

/*
Make sure disabled buttons don't get the pointer cursor.
*/

:disabled {
  cursor: default;
}

/*
1. Make replaced elements `display: block` by default. (https://github.com/mozdevs/cssremedy/issues/14)
2. Add `vertical-align: middle` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210)
   This can trigger a poorly considered lint error in some tools but is included by design.
*/

img,
svg,
video,
canvas,
audio,
iframe,
embed,
object {
  display: block;
  /* 1 */
  vertical-align: middle;
  /* 2 */
}

/*
Constrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14)
*/

img,
video {
  max-width: 100%;
  height: auto;
}

/* Make elements with the HTML hidden attribute stay hidden by default */

[hidden]:where(:not([hidden="until-found"])) {
  display: none;
}

.\!container {
  width: 100% !important;
}

.container {
  width: 100%;
}

@media (min-width: 640px) {
  .\!container {
    max-width: 640px !important;
  }

  .container {
    max-width: 640px;
  }
}

@media (min-width: 768px) {
  .\!container {
    max-width: 768px !important;
  }

  .container {
    max-width: 768px;
  }
}

@media (min-width: 1024px) {
  .\!container {
    max-width: 1024px !important;
  }

  .container {
    max-width: 1024px;
  }
}

@media (min-width: 1280px) {
  .\!container {
    max-width: 1280px !important;
  }

  .container {
    max-width: 1280px;
  }
}

@media (min-width: 1536px) {
  .\!container {
    max-width: 1536px !important;
  }

  .container {
    max-width: 1536px;
  }
}

/* عرض المحتوى: 1040px + هامش 20px من كل ناحية */

/* أيقونات السوشيال (js/shary/brand-icons.js): بتاخد حجم الخط ولون النص */

/* ── app.css · جزء 2 من 16: الهيدر وقايمة الحساب واللغة ، كروت المقالات والمفضلة وصور المشاريع (المصدر: resources/css/shary/app/02-header-account-cards.css — عدّل هنا وشغّل tools/minify-assets.sh) */
.svg-inline--fa {
  display: inline-block;
  height: 1em;
  overflow: visible;
  vertical-align: -0.125em;
}

.site-container {
  width: 100%;
  max-width: 1080px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 20px;
  padding-right: 20px;
}

/* ديسك توب: عرض المحتوى في كل الصفحات = عرض الصفحة الرئيسية بالظبط (‎--shary-w) — الهيدر والفوتر والمحتوى على نفس الخط ،
       وبيكبر ويصغر مع الشاشة والزوم: 95% من عرض الشاشة لحد 1240px (وشاشات اللابتوب الصغيرة لحد 1180px). الموبايل والتابلت زي ما هم. */

:root {
  --z: 1;
  --unz: 1;
  --z-one: 1;
  --shary-w: min(calc(95vw / var(--z, 1)) - 32px, calc(100vw / var(--z, 1)) - 132px, 1180px);
}

@media (min-width: 1300px) {
  :root {
    --shary-w: min(calc(95vw / var(--z, 1)), calc(100vw / var(--z, 1)) - 152px, 1240px);
  }
}

/* الموقع بيفتح بمقاسه العادي 100% (من غير تكبير). عرض المحتوى سايب هامش على الجنب قد زرارين التواصل العايمين (Shary AI وواتساب) فما بيغطوش الصفحة.
       ‎--z = نسبة تكبير الديسك توب (1 = من غير تكبير). لو حبيتوا تكبّروا الموقع كله بعدين: غيّروا ‎--z (مثلاً 1.1) و‎--unz = 1 / ‎--z جوه media (min-width: 1024px) —
       كل قيم vw / vh في الـ CSS مقسومة على ‎--z (resources/shary-src/zoom-units.cjs) فمفيش حاجة هتطلع بره الشاشة. */

@media (min-width: 1024px) {
  html {
    zoom: var(--z);
  }

  .site-container {
    max-width: calc(var(--shary-w) + 40px);
  }
}

/* "تسجيل الدخول" / "Login" في آخر الهيدر (ديسك توب): نص بعد زرار اللغة.
       مع الماوس أو الضغط: هالة لبني حوالين الكلمة (شادو ناعم) والنص بيبقى أزرق */

.site-login {
  position: relative;
  align-items: center;
  height: 40px;
  border-radius: 9999px;
  padding-inline: 14px;
  font-size: 16.5px;
  font-weight: 800;
  line-height: 1;
  white-space: nowrap;
  color: #123a5c;
  transition: color 0.25s, background-color 0.25s, box-shadow 0.3s, transform 0.15s;
}

button.site-login {
  display: inline-flex;
}

/* شاشات الديسك توب الصغيرة (أو زوم عالي): مسافات أقل عشان الهيدر كله يفضل في سطر واحد */

@media (max-width: 1249px) {
  .site-login {
    padding-inline: 8px;
    font-size: 15px;
  }
}

.site-login:hover,
    .site-login:focus-visible,
    .site-login:active {
  background-color: #eef7ff;
  color: #1f63c6;
  box-shadow: 0 0 0 3px rgba(125, 196, 255, 0.45), 0 6px 18px rgba(96, 177, 255, 0.45);
  outline: none;
}

.site-login:active {
  transform: scale(0.96);
}

/* قايمة الحساب (ديسك توب): بتفتح من اسم العميل في الهيدر — الاسم والإيميل فوق ، وتحتهم تغيير كلمة السر وتسجيل الخروج (أحمر) */

.account-menu {
  min-width: 230px;
  max-width: 280px;
  padding: 8px;
  border: 1px solid #dfe6ee;
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 18px 40px -18px rgba(18, 58, 92, 0.45);
}

.account-menu__who {
  padding: 6px 12px 10px;
  margin-bottom: 6px;
  border-bottom: 1px solid #edf1f5;
  font-size: 15px;
  font-weight: 800;
  color: #123a5c;
}

.account-menu__who span {
  font-size: 12.5px;
  font-weight: 700;
  color: #6b7a90;
  text-align: left;
}

[dir="rtl"] .account-menu__who span {
  text-align: right;
}

.account-menu__item {
  display: flex;
  width: 100%;
  align-items: center;
  gap: 10px;
  padding: 11px 12px;
  border-radius: 12px;
  font-size: 15px;
  font-weight: 800;
  color: #123a5c;
  text-align: start;
  transition: background-color 0.2s, color 0.2s;
}

.account-menu__item:hover,
.account-menu__item:focus-visible {
  background: #f2f6fb;
  color: #1f63c6;
  outline: none;
}

.account-menu__item--out,
.account-menu__item--out:hover,
.account-menu__item--out:focus-visible {
  color: #c0392b;
}

.account-menu__item--out:hover {
  background: #fdf0ee;
}

/* لينكات الهيدر على الديسك توب (الرئيسية / المطورين / المشاريع / بحث / المدونة / من نحن / اتصل بنا / الوكلاء):
       خط هادي مش بولد وبالأسود العادي (الموقع بيفتح مكبّر 110% على الديسك توب فالمقاس محسوب على كده) — عربي وإنجليزي.
       "تسجيل الدخول" وزرار اللغة والقلب ليهم ستايلهم لوحدهم ومش بيتأثروا بالقواعد دي */

@media (min-width: 1024px) {
  header .site-nav {
    gap: 16px;
  }

  header .site-nav .site-nav__link {
    font-size: 15.5px;
    font-weight: 500;
    color: #1c1c1e;
  }

  header .site-nav .site-nav__link.is-active {
    font-weight: 600;
  }

  header .site-nav .site-nav__link:hover,
        header .site-nav .site-nav__link:focus-visible,
        header .site-nav .site-nav__link[aria-expanded="true"] {
    color: #1f63c6;
  }
}

@media (min-width: 1250px) {
  header .site-nav {
    gap: 24px;
  }

  header .site-nav .site-nav__link {
    font-size: 16.5px;
  }

  .site-login {
    font-size: 17.5px;
  }

  header [data-lang-toggle].lang-btn {
    height: 44px;
    min-width: 92px;
    font-size: 15.5px;
  }
}

@media (min-width: 1490px) {
  header .site-nav {
    gap: 30px;
  }

  header .site-nav .site-nav__link {
    font-size: 17px;
  }

  .site-login {
    font-size: 18.5px;
  }

  header [data-lang-toggle].lang-btn {
    font-size: 16px;
  }
}

/* عربي على اللابتوب الصغير: مسافات أقل سِنّة عشان الهيدر كله يفضل جوه عرض المحتوى */

@media (min-width: 1024px) and (max-width: 1249px) {
  [lang="ar"] header .site-nav {
    gap: 13px;
  }

  [lang="ar"] header .site-nav .site-nav__link {
    font-size: 15px;
  }
}

/* أصغر مقاسات الديسك توب (1024 – 1123) مع التكبير: الهيدر درجة أصغر عشان يفضل سطر واحد جوه عرض المحتوى */

@media (min-width: 1024px) and (max-width: 1123px) {
  header .site-nav,
        [lang="ar"] header .site-nav {
    gap: 11px;
  }

  html[lang="en"] header .site-nav {
    gap: 9px;
  }

  header .site-nav .site-nav__link,
        [lang="ar"] header .site-nav .site-nav__link,
        html[lang="en"] header .site-nav .site-nav__link {
    font-size: 14.5px;
  }
}

@media (min-width: 1250px) and (max-width: 1309px) {
  [lang="ar"] header .site-nav {
    gap: 18px;
  }
}

/* إنجليزي: الكلمات أطول — درجة أصغر ومسافة أقل */

@media (min-width: 1024px) and (max-width: 1249px) {
  [lang="en"] header .site-nav {
    gap: 13px;
  }

  [lang="en"] header .site-nav .site-nav__link {
    font-size: 15px;
  }
}

@media (min-width: 1250px) {
  [lang="en"] header .site-nav {
    gap: 22px;
  }

  [lang="en"] header .site-nav .site-nav__link {
    font-size: 16px;
  }
}

@media (min-width: 1490px) {
  [lang="en"] header .site-nav {
    gap: 28px;
  }

  [lang="en"] header .site-nav .site-nav__link {
    font-size: 16.5px;
  }
}

/* زرار اللغة (ديسك توب): مش مصمت — مع الماوس لمعة بتعدّي على الزرار والحروف بتنوّر لبني وتتحرك لفوق سِنّة ، ومع الضغط بيصغر سِنّة */

@media (min-width: 1024px) {
  [data-lang-toggle].lang-btn {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    transition: background-color 0.3s, box-shadow 0.3s, transform 0.15s;
  }

  [data-lang-toggle].lang-btn::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(110deg, transparent 20%, rgba(160, 214, 255, 0.55) 50%, transparent 80%);
    transform: translateX(-130%);
    transition: transform 0.7s ease;
  }

  /* الاسم الكامل (تاني span) هو اللي ظاهر على الديسك توب — الأول (الاختصار) بتاع الموبايل وبيفضل مخفي */

  [data-lang-toggle].lang-btn > span + span {
    display: inline-block;
    transition: color 0.3s, transform 0.3s, letter-spacing 0.3s;
  }

  [data-lang-toggle].lang-btn:hover,
        [data-lang-toggle].lang-btn:focus-visible {
    box-shadow: 0 0 0 3px rgba(125, 196, 255, 0.4), 0 6px 16px rgba(18, 58, 92, 0.25);
    outline: none;
  }

  [data-lang-toggle].lang-btn:hover::before,
        [data-lang-toggle].lang-btn:focus-visible::before {
    transform: translateX(130%);
  }

  [data-lang-toggle].lang-btn:hover > span + span,
        [data-lang-toggle].lang-btn:focus-visible > span + span {
    color: #bfe3ff;
    letter-spacing: 0.04em;
    transform: translateY(-1px);
  }

  [data-lang-toggle].lang-btn:active {
    transform: scale(0.95);
  }
}

/* ---------- كارت المقال الرئيسي: أزرق غامق فوق الصورة ---------- */

/* لون فاتح ورا صورة المقال الرئيسي لحد ما الصورة تحمل — من غير أي تظليل فوق الصورة */

.blog-featured-bg {
  background-color: #e8f0fb;
}

/* الشريط الزجاجي فوق الصور (بدل التظليل): أبيض شفاف + بلور للي وراه. مستخدم في المقال الرئيسي في المدونة */

.shary-glass {
  border: 1px solid rgba(255, 255, 255, 0.65);
  background-color: rgba(255, 255, 255, 0.66);
  -webkit-backdrop-filter: blur(14px) saturate(1.5);
  backdrop-filter: blur(14px) saturate(1.5);
  box-shadow: 0 10px 28px -16px rgba(18, 58, 92, 0.5);
}

/* متصفح من غير بلور: الشريط أبيض أكتر عشان الكلام يفضل واضح */

@supports not (((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) or (-webkit-backdrop-filter: blur(1px))) {
  .shary-glass {
    background-color: rgba(255, 255, 255, 0.9);
  }
}

/* ---------- شريط مؤشر شاري: الزرار ثابت والمناطق بتتحرك ---------- */

/* شريط التمرير في كل الفورمز واللوحات والقوايم (.shary-scroll): رفيع وهادي — من غير مسار ملوّن ولا أسهم، ومؤشر صغير مدوّر
       بعيد سِنّة عن الحافة ومن فوق وتحت (عشان ما يبانش عمود عريض بطول اللوحة). */

.shary-scroll::-webkit-scrollbar {
  height: 10px;
  width: 10px;
}

.shary-scroll::-webkit-scrollbar-track {
  margin-block: 18px;
  background-color: transparent;
}

.shary-scroll::-webkit-scrollbar-thumb {
  border: 3px solid transparent;
  border-radius: 9999px;
  background-color: #c3d2e4;
  background-clip: padding-box;
}

.shary-scroll::-webkit-scrollbar-thumb:hover {
  background-color: #9fb9da;
}

.shary-scroll::-webkit-scrollbar-button {
  display: none;
}

.shary-scroll::-webkit-scrollbar-corner {
  background-color: transparent;
}

@supports not selector(::-webkit-scrollbar) {
  .shary-scroll {
    scrollbar-width: thin;
    scrollbar-color: #c3d2e4 transparent;
  }
}

/* صف كروت بيتسحب بالجنب من غير شريط سحب ظاهر (المشاريع الجديدة في صفحة المنطقة) */

.shary-rail {
  scrollbar-width: none;
}

/* صفحة المفضلة وصفحة المقارنة: التبويب (الوحدات | المشاريع) + رسالة "مفيش حاجة" + جدول المقارنة */

.saved-tabs {
  display: inline-flex;
  align-self: flex-start;
  gap: 4px;
  border-radius: 999px;
  background-color: #e8f0fb;
  padding: 4px;
}

.saved-tabs button {
  display: flex;
  height: 44px;
  align-items: center;
  gap: 8px;
  border-radius: 999px;
  padding-inline: 18px;
  font-size: 15px;
  font-weight: 700;
  line-height: 1;
  color: #123a5c;
  transition: background-color 0.2s, color 0.2s;
}

.saved-tabs button[aria-selected="true"] {
  background-color: #1e4166;
  color: #ffffff;
  box-shadow: 0 6px 14px -8px rgba(18, 58, 92, 0.7);
}

.saved-tabs__count {
  display: inline-flex;
  height: 22px;
  min-width: 22px;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background-color: #ffffff;
  padding-inline: 6px;
  font-size: 12px;
  font-weight: 700;
  color: #123a5c;
}

.saved-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  border-radius: 20px;
  background-color: #e8f0fb;
  padding: 36px 20px;
  text-align: center;
}

.saved-empty.hidden {
  display: none;
}

.saved-empty__icon {
  display: flex;
  height: 60px;
  width: 60px;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background-color: #ffffff;
  color: #1e4166;
  box-shadow: 0 8px 20px -14px rgba(18, 58, 92, 0.6);
}

/* كارت صورة لمشروع (صفحة "أفضل المشاريع" و"المشاريع الجديدة" — collections/partials/project-shot): الصورة مالية الكارت والاسم والمكان عليها من تحت */

.shot-card {
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  border-radius: 18px;
  background-color: #dbe6f6;
  box-shadow: 0 1px 2px rgba(18, 58, 92, 0.05), 0 16px 30px -22px rgba(18, 58, 92, 0.55);
}

.shot-card > img {
  position: absolute;
  inset: 0;
  height: 100%;
  width: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  transition: transform 0.5s;
}

.shot-card:hover > img {
  transform: scale(1.04);
}

/* الاسم والمكان مكتوبين على الصورة على طول (من غير خلفية ولا تظليلة على الصورة كلها) —
       ولما الماوس / صباع اليوزر ييجي على الكارت بيظهر ظل خفيف ورا الكلمة بس (نفس كروت "أفضل الكمبوندات" في الرئيسية) */

.shot-card__text {
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  z-index: 1;
  isolation: isolate;
  padding: 12px 14px 12px;
  text-align: center;
  color: #ffffff;
  text-shadow: 0 1px 2px rgba(4, 31, 56, 0.85), 0 0 12px rgba(4, 31, 56, 0.6);
}

.shot-card__text::before {
  content: "";
  position: absolute;
  inset: 4px 14% 6px;
  z-index: -1;
  border-radius: 999px;
  background-color: rgba(4, 31, 56, 0.44);
  filter: blur(15px);
  opacity: 0;
  transition: opacity 0.25s ease;
  pointer-events: none;
}

.shot-card:hover .shot-card__text::before,
    .shot-card:active .shot-card__text::before,
    .shot-card:focus-within .shot-card__text::before {
  opacity: 1;
}

.shot-card__name {
  font-size: 17px;
  font-weight: 800;
  line-height: 1.4;
}

/* الكارت كله بيفتح صفحة المشروع: لينك شفاف مغطّي الصورة كلها (shot-card__cover) ، والنص فوقه من غير ما يمنع الضغط */

.shot-card__cover,
    .prop-shot__cover {
  position: absolute;
  inset: 0;
  z-index: 1;
}

.shot-card__text,
    .prop-shot__name {
  pointer-events: none;
}

.shot-card__text a,
    .prop-shot__name a {
  pointer-events: auto;
}

.shot-card__place {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-top: 1px;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.5;
  color: #ffffff;
}

.shot-card__place svg {
  color: #ffffff;
}

.shot-card__badge {
  position: absolute;
  top: 10px;
  inset-inline-start: 10px;
  z-index: 2;
  border-radius: 999px;
  background-color: #1f7f72;
  padding: 4px 12px;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.5;
  color: #ffffff;
}

.shot-card__actions {
  position: absolute;
  top: 10px;
  inset-inline-end: 10px;
  z-index: 2;
  display: flex;
  gap: 6px;
}

@media (min-width: 1024px) {
  .shot-card__name {
    font-size: 18.5px;
  }

  .shot-card__place {
    font-size: 14px;
  }
}

/* ── app.css · جزء 3 من 16: بيع/أجّر عقارك ، قوايم الاختيار بالصور ، العروض ، التريند ، شاري كارد ، الوظايف ، الإشعارات ، الشروط (المصدر: resources/css/shary/app/03-requests-offers-pages.css — عدّل هنا وشغّل tools/minify-assets.sh) */
/* صفحة "بيع عقارك" / "أجّر عقارك" (requests/property): البانر + دواير الخطوات + خانات بشكل خانات التطبيق + الأزرار */

.req-banner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  border: 1px solid #d3dfee;
  border-radius: 24px;
  background-image: linear-gradient(180deg, #e3eefb 0%, #e6f1f0 62%, #f4f8fb 100%);
  padding: 24px 16px 22px;
  text-align: center;
}

.req-banner__icon {
  display: flex;
  height: 92px;
  width: 92px;
  align-items: center;
  justify-content: center;
  margin-bottom: 10px;
  border-radius: 999px;
  background-color: #ffffff;
  color: #1e4166;
  box-shadow: 0 14px 30px -18px rgba(18, 58, 92, 0.55);
}

.req-switch {
  display: flex;
  height: 42px;
  align-items: center;
  border-radius: 999px;
  padding-inline: 18px;
  font-size: 14.5px;
  font-weight: 700;
  line-height: 1;
  color: #123a5c;
  text-decoration: none;
  transition: background-color 0.2s, color 0.2s;
}

.req-switch[aria-current="page"] {
  background-color: #1e4166;
  color: #ffffff;
  box-shadow: 0 6px 14px -8px rgba(18, 58, 92, 0.7);
}

.req-steps {
  display: flex;
  align-items: center;
}

.req-steps li {
  display: flex;
  flex: 1 1 0%;
  align-items: center;
}

.req-steps li:last-child {
  flex: 0 0 auto;
}

/* الخط الواصل بين الدواير: أخضر بعد الخطوة اللي خلصت */

.req-steps li:not(:last-child)::after {
  content: "";
  height: 3px;
  flex: 1 1 0%;
  margin-inline: 8px;
  border-radius: 3px;
  background-color: #e8f0fb;
}

.req-steps li[data-state="done"]:not(:last-child)::after {
  background-color: #4bbfb0;
}

.req-steps__dot {
  display: flex;
  height: 38px;
  width: 38px;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  border: 2px solid #c9d1db;
  border-radius: 999px;
  background-color: #ffffff;
  font-size: 15px;
  font-weight: 600;
  line-height: 1;
  color: #8a99a8;
}

.req-steps__dot svg {
  display: none;
}

.req-steps li[data-state="current"] .req-steps__dot {
  border-color: #1e4166;
  background-color: #1e4166;
  color: #ffffff;
}

.req-steps li[data-state="done"] .req-steps__dot {
  border-color: #4bbfb0;
  background-color: #4bbfb0;
  color: #ffffff;
}

.req-steps li[data-state="done"] .req-steps__dot b {
  display: none;
}

.req-steps li[data-state="done"] .req-steps__dot svg {
  display: block;
}

.req-field {
  display: flex;
  height: 56px;
  width: 100%;
  min-width: 0;
  align-items: center;
  gap: 12px;
  border: 1.5px solid #d3dfee;
  border-radius: 16px;
  background-color: #e8f0fb;
  padding-inline: 16px;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.req-field:focus-within {
  border-color: #1e4166;
  box-shadow: 0 0 0 3px rgba(30, 65, 102, 0.12);
}

.req-field.is-invalid,
    .req-textarea.is-invalid {
  border-color: #d2463c;
  background-color: #fdf3f2;
}

.req-field__icon {
  display: flex;
  flex-shrink: 0;
  color: #8a99a8;
}

.req-field__control {
  height: 100%;
  min-width: 0;
  flex: 1 1 0%;
  border: 0;
  background-color: transparent;
  padding: 0;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.4;
  color: #123a5c;
  outline: none;
  box-shadow: none;
}

.req-field__control:focus {
  outline: none;
  box-shadow: none;
}

.req-field__control::-moz-placeholder {
  font-weight: 500;
  color: #5b6b7c;
}

.req-field__control::placeholder {
  font-weight: 500;
  color: #5b6b7c;
}

/* القايمة: اسم الخانة رمادي لحد ما العميل يختار */

.req-field__control--select {
  cursor: pointer;
  -moz-appearance: none;
       appearance: none;
  -webkit-appearance: none;
  background-image: none;
  font-weight: 500;
  color: #5b6b7c;
}

.req-field__control--select.has-value {
  font-weight: 600;
  color: #123a5c;
}

.req-field__control--select option {
  color: #123a5c;
}

.req-textarea {
  display: block;
  min-height: 150px;
  width: 100%;
  resize: vertical;
  border: 1.5px solid #d3dfee;
  border-radius: 20px;
  background-color: #e8f0fb;
  padding: 14px 18px;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.6;
  color: #123a5c;
  outline: none;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.req-textarea:focus {
  border-color: #1e4166;
  box-shadow: 0 0 0 3px rgba(30, 65, 102, 0.12);
}

.req-textarea::-moz-placeholder {
  font-weight: 500;
  color: #5b6b7c;
}

.req-textarea::placeholder {
  font-weight: 500;
  color: #5b6b7c;
}

.req-button {
  display: flex;
  height: 56px;
  width: 100%;
  align-items: center;
  justify-content: center;
  border: 1.5px solid #1e4166;
  border-radius: 14px;
  background-color: #1e4166;
  font-size: 17px;
  font-weight: 700;
  line-height: 1;
  color: #ffffff;
  transition: background-color 0.2s, color 0.2s;
}

.req-button:hover {
  background-color: #123a5c;
}

.req-button--ghost {
  background-color: #ffffff;
  color: #1e4166;
}

.req-button--ghost:hover {
  background-color: #e8f0fb;
}

/* مصغّر الصورة المختارة + X */

/* نجمة الخانة المطلوبة */

.req-star {
  flex-shrink: 0;
  font-size: 18px;
  font-weight: 800;
  line-height: 1;
  color: #d2463c;
}

.req-note b {
  font-size: 15px;
  color: #d2463c;
}

/* علامة + في خانة رفع الصور / الفيديو */

/* التاريخ: العميل يكتبه بإيده أو يضغط على النتيجة ويختاره */

.req-field__pick {
  position: relative;
  display: flex;
  height: 34px;
  width: 34px;
  flex-shrink: 0;
  cursor: pointer;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background-color: #1e4166;
  color: #ffffff;
}

.req-field__pick input {
  position: absolute;
  inset: 0;
  height: 100%;
  width: 100%;
  cursor: pointer;
  opacity: 0;
}

.req-field__pick input::-webkit-calendar-picker-indicator {
  position: absolute;
  inset: 0;
  height: 100%;
  width: 100%;
  cursor: pointer;
}

.req-field__add {
  display: flex;
  height: 30px;
  width: 30px;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background-color: #1e4166;
  color: #ffffff;
}

/* السيرة الذاتية: زرارين "ملف" / "صورة" جوه الخانة */

.cv-pick {
  display: inline-flex;
  height: 34px;
  flex-shrink: 0;
  align-items: center;
  gap: 6px;
  border-radius: 999px;
  border: 1px solid #c6d6ea;
  background-color: #e8f0fb;
  padding-inline: 10px;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.5;
  color: #1e4166;
  transition: background-color 0.15s, color 0.15s;
}

[data-cv-field] {
  gap: 8px;
}

.cv-pick:hover {
  background-color: #1e4166;
  color: #ffffff;
}

[data-cv-label] {
  cursor: pointer;
}

/* قايمة الاختيار اللي بالصور (js/shary/form-select.js): بتفتح تحت الخانة دايمًا */

.req-select__arrow {
  transition: transform 0.2s;
}

/* اسم الخانة رمادي لحد ما العميل يختار */

.req-field [data-select-label].is-empty {
  font-weight: 500;
  color: #5b6b7c;
}

[data-select].is-open .req-select__arrow {
  transform: rotate(180deg);
}

[data-select].is-open > .req-field {
  border-color: #1e4166;
  box-shadow: 0 0 0 3px rgba(30, 65, 102, 0.12);
}

.req-menu {
  position: absolute;
  inset-inline: 0;
  top: calc(100% + 6px);
  z-index: 30;
  max-height: 292px;
  overflow-y: auto;
  border: 1px solid #d3dfee;
  border-radius: 16px;
  background-color: #ffffff;
  padding: 6px;
  box-shadow: 0 22px 44px -14px rgba(18, 58, 92, 0.38);
}

/* خانة البحث فوق أي قايمة [data-select] (بتتضاف من form-select.js): ثابتة فوق والاختيارات بتتحرك تحتها */

.req-menu__search {
  position: sticky;
  top: -6px;
  z-index: 2;
  margin: -6px -6px 4px;
  background-color: #fff;
  padding: 8px 8px 6px;
}

.req-menu__search input {
  height: 42px;
  width: 100%;
  border: 1px solid #d3dfee;
  border-radius: 12px;
  background-color: #e8f0fb;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235b6b7c' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.600-3.600'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: left 12px center;
  background-size: 17px;
  padding: 0 14px 0 38px;
  font-size: 14.5px;
  font-weight: 600;
  color: #123a5c;
  outline: none;
  -webkit-appearance: none;
  -moz-appearance: none;
       appearance: none;
}

[dir="rtl"] .req-menu__search input {
  background-position: right 12px center;
  padding: 0 38px 0 14px;
}

.req-menu__search input:focus {
  border-color: #1f63c6;
  background-color: #fff;
}

.req-menu__search input::-moz-placeholder {
  font-weight: 500;
  color: #8a99a8;
}

.req-menu__search input::placeholder {
  font-weight: 500;
  color: #8a99a8;
}

.req-menu__search input::-webkit-search-cancel-button {
  -webkit-appearance: none;
  appearance: none;
}

.req-menu__item[hidden],
    .req-menu__empty[hidden] {
  display: none;
}

.req-menu__empty {
  padding: 14px 10px;
  text-align: center;
  font-size: 13.5px;
  font-weight: 600;
  color: #5b6b7c;
}

.req-menu__item {
  display: flex;
  min-height: 52px;
  cursor: pointer;
  align-items: center;
  gap: 12px;
  border-radius: 12px;
  padding: 6px 10px;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.4;
  color: #123a5c;
}

.req-menu__item:hover,
    .req-menu__item:focus {
  background-color: #e8f0fb;
  outline: none;
}

.req-menu__item[aria-selected='true'] {
  background-color: #e8f0fb;
  font-weight: 700;
}

.req-menu__icon {
  display: flex;
  height: 38px;
  width: 38px;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background-color: #e8f0fb;
  color: #1e4166;
}

.req-menu__item[aria-selected='true'] .req-menu__icon {
  background-color: #1e4166;
  color: #ffffff;
}

.req-menu__icon--short,
    .req-menu__item[aria-selected='true'] .req-menu__icon--short {
  background-color: #1e4166;
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  color: #ffffff;
}

.req-menu__logo {
  height: 38px;
  width: 38px;
  flex-shrink: 0;
  border: 1px solid #d3dfee;
  border-radius: 999px;
  background-color: #ffffff;
  -o-object-fit: contain;
     object-fit: contain;
}

/* صورة المنطقة جوه القايمة: مربع بحواف ناعمة والصورة ماليّاه */

.req-menu__logo--photo {
  height: 42px;
  width: 54px;
  border-radius: 10px;
  -o-object-fit: cover;
     object-fit: cover;
}

.req-menu__check {
  display: flex;
  height: 22px;
  width: 22px;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  color: transparent;
}

.req-menu__check--box {
  border: 1.5px solid #b7c5d6;
  border-radius: 6px;
  background-color: #ffffff;
}

.req-menu__item[aria-selected='true'] .req-menu__check {
  border-color: #1e4166;
  background-color: #1e4166;
  color: #ffffff;
}

.req-thumb video {
  position: absolute;
  inset: 0;
  height: 100%;
  width: 100%;
  background-color: #123a5c;
  -o-object-fit: cover;
     object-fit: cover;
}

.req-thumb--video::after {
  content: '';
  position: absolute;
  inset: 0;
  margin: auto;
  height: 34px;
  width: 34px;
  border-radius: 999px;
  background: rgba(18, 58, 92, 0.78) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23fff'%3E%3Cpath d='M9 7v10l8-5z'/%3E%3C/svg%3E") center / 20px no-repeat;
}

.req-thumb {
  position: relative;
  display: flex;
  height: 96px;
  width: 96px;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border: 1px solid #d3dfee;
  border-radius: 14px;
  background-color: #e8f0fb;
  padding: 6px;
  font-size: 11px;
  font-weight: 600;
  line-height: 1.4;
  color: #5b6b7c;
  word-break: break-all;
}

.req-thumb img {
  position: absolute;
  inset: 0;
  height: 100%;
  width: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

.req-thumb button {
  position: absolute;
  top: 6px;
  inset-inline-start: 6px;
  display: flex;
  height: 24px;
  width: 24px;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background-color: #ffffff;
  color: #d2463c;
  box-shadow: 0 2px 6px rgba(18, 58, 92, 0.3);
}

@media (min-width: 1024px) {
  .req-banner {
    padding: 36px 24px 30px;
  }

  .req-banner__icon {
    height: 104px;
    width: 104px;
  }

  .req-steps__dot {
    height: 42px;
    width: 42px;
  }

  /* "محتاج مساعدة؟" في العمود الجانبي الضيق: طلب مقابلة بعرض الصف وتحته اتصال وواتساب */

  .req-help .content-cta__buttons {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .req-help .content-cta__button--meeting {
    grid-column: 1 / -1;
  }
}

/* صفحة العروض الحصرية: الفلتر (3 قوايم في صف) + شارة "عرض حصري" على الصورة + نص العرض على الكارت */

.offer-filter {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr)) auto;
  gap: 6px;
}

/* فلتر العروض على الموبايل: 3 خانات بعرض الصف كله (الأسامي كاملة) و"مسح" بيظهر تحتهم لما يبقى فيه اختيار بس */

@media (max-width: 1023px) {
  .offer-filter--wide {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .offer-filter.offer-filter--wide .offer-filter__reset {
    display: none;
    grid-column: 1 / -1;
    justify-self: start;
    height: 38px;
  }

  .offer-filter.offer-filter--wide .offer-filter__reset.is-active {
    display: inline-flex;
  }
}

/* خانة الفلتر + قايمتها (js/shary/form-select.js): القايمة بتفتح تحت الخانة وأعرض منها على الموبايل */

.offer-filter__box {
  position: relative;
  min-width: 0;
}

.offer-filter__box .req-menu {
  inset-inline: 0 auto;
  width: max(100%, 250px);
  max-width: calc(calc(100vw / var(--z, 1)) - 40px);
}

.offer-filter__box:nth-of-type(3) .req-menu {
  inset-inline: auto 0;
}

/* موبايل: قايمة الخانة اللي في النص بتتوسّط تحتها */

@media (max-width: 1023px) {
  .offer-filter__box:nth-of-type(2) .req-menu {
    inset-inline: auto;
    left: 50%;
    transform: translateX(-50%);
  }
}

.offer-filter__box.is-open > .offer-filter__field {
  border-color: #1e4166;
}

.offer-filter__field [data-select-label] {
  font-size: 13px;
  font-weight: 700;
  line-height: 1.4;
  color: #123a5c;
}

/* زرار "مسح" (clear-btn): جنب الخانات في نفس الصف — موبايل وديسك توب */

.offer-filter .offer-filter__reset {
  height: 48px;
  gap: 4px;
  padding-inline: 10px;
}

.offer-filter__field {
  display: flex;
  height: 48px;
  min-width: 0;
  align-items: center;
  gap: 4px;
  border: 1px solid #d3dfee;
  border-radius: 12px;
  background-color: #ffffff;
  padding-inline: 8px;
  transition: border-color 0.2s;
}

.offer-filter__field:focus-within {
  border-color: #1e4166;
}

.offer-filter__field select {
  height: 100%;
  min-width: 0;
  flex: 1 1 0%;
  cursor: pointer;
  -moz-appearance: none;
       appearance: none;
  -webkit-appearance: none;
  border: 0;
  background-color: transparent;
  background-image: none;
  padding: 0;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.4;
  color: #123a5c;
  text-overflow: ellipsis;
  outline: none;
  box-shadow: none;
}

.offer-filter__apply {
  grid-column: 1 / -1;
  height: 46px;
  border-radius: 12px;
  background-color: #1e4166;
  font-size: 15px;
  font-weight: 700;
  color: #ffffff;
}

/* صفحة "فرص إعادة بيع حصرية": المنطقة / النوع / السعر + "فلتر متقدم" + "مسح" — الخمسة بنفس المقاس ، ولوحة الفلتر المتقدم تحتهم */

.offer-filter__adv {
  display: inline-flex;
  height: 44px;
  min-width: 0;
  cursor: pointer;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border: 1px solid #d3dfee;
  border-radius: 12px;
  background-color: #ffffff;
  padding-inline: 10px;
  font-size: 13.5px;
  font-weight: 800;
  line-height: 1;
  color: #123a5c;
  white-space: nowrap;
  transition: border-color 0.15s, background-color 0.15s;
}

.offer-filter__adv:hover,
    .offer-filter__adv[aria-expanded="true"],
    .offer-filter__adv.is-active {
  border-color: #1e4166;
}

.offer-filter__adv.is-active {
  background-color: #eef4fc;
}

.offer-filter__adv-count {
  display: inline-flex;
  height: 20px;
  min-width: 20px;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background-color: #1e4166;
  padding-inline: 5px;
  font-size: 11.5px;
  font-weight: 800;
  color: #ffffff;
}

.offer-filter__adv-count.hidden {
  display: none;
}

.offer-filter--opps .offer-filter__field,
    .offer-filter--opps .offer-filter__reset {
  height: 44px;
}

@media (max-width: 1023px) {
  .offer-filter--opps .offer-filter__adv {
    grid-column: 1 / -1;
  }

  .offer-filter--opps:has(.offer-filter__reset.is-active) .offer-filter__adv {
    grid-column: 1 / 3;
  }

  .offer-filter.offer-filter--opps .offer-filter__reset {
    grid-column: auto;
    justify-self: stretch;
    height: 44px;
  }
}

.opps-adv {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 14px;
  border: 1px solid #d3dfee;
  border-radius: 14px;
  background-color: #f7faff;
  padding: 14px;
}

.opps-adv.hidden {
  display: none;
}

.opps-adv__group {
  min-width: 0;
  border: 0;
  padding: 0;
}

.opps-adv__group legend {
  margin-bottom: 8px;
  font-size: 14px;
  font-weight: 800;
  line-height: 1.5;
  color: #123a5c;
}

.opps-adv__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.opps-chip {
  position: relative;
  cursor: pointer;
}

.opps-chip input {
  position: absolute;
  inset: 0;
  height: 100%;
  width: 100%;
  cursor: pointer;
  opacity: 0;
}

.opps-chip span {
  display: inline-flex;
  height: 40px;
  min-width: 46px;
  align-items: center;
  justify-content: center;
  border: 1px solid #d3dfee;
  border-radius: 999px;
  background-color: #ffffff;
  padding-inline: 14px;
  font-size: 14px;
  font-weight: 700;
  color: #123a5c;
  transition: background-color 0.15s, border-color 0.15s, color 0.15s;
}

.opps-chip input:checked + span {
  border-color: #1e4166;
  background-color: #1e4166;
  color: #ffffff;
}

.opps-chip input:focus-visible + span {
  outline: 2px solid #1f63c6;
  outline-offset: 2px;
}

.opps-adv__range {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #8a99a8;
}

.opps-adv__range input {
  height: 40px;
  min-width: 0;
  flex: 1 1 0%;
  border: 1px solid #d3dfee;
  border-radius: 12px;
  background-color: #ffffff;
  padding-inline: 12px;
  font-size: 14px;
  font-weight: 700;
  color: #123a5c;
  outline: none;
}

.opps-adv__range input:focus {
  border-color: #1e4166;
}

@media (min-width: 1024px) {
  .offer-filter.offer-filter--opps {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 10px;
  }

  .offer-filter--opps .offer-filter__field,
        .offer-filter--opps .offer-filter__adv,
        .offer-filter.offer-filter--opps .offer-filter__reset {
    height: 46px;
    justify-self: stretch;
    padding-inline: 14px;
    font-size: 14.5px;
  }

  .offer-filter--opps .offer-filter__field select,
        .offer-filter--opps .offer-filter__field [data-select-label] {
    font-size: 14.5px;
  }

  .offer-filter.offer-filter--opps:not(.is-live) {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }

  .offer-filter--opps:not(.is-live) .offer-filter__apply {
    grid-column: 1 / -1;
    justify-self: start;
  }

  .opps-adv {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
    padding: 18px 20px;
  }
}

.offer-badge {
  position: absolute;
  top: 10px;
  inset-inline-start: 10px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  border-radius: 999px;
  background-color: #f5a623;
  padding: 4px 12px;
  font-size: 12px;
  font-weight: 800;
  line-height: 1.5;
  color: #123a5c;
  box-shadow: 0 4px 10px -4px rgba(18, 58, 92, 0.5);
}

.offer-text {
  display: flex;
  align-items: center;
  gap: 8px;
  border: 1px dashed #f0c56e;
  border-radius: 12px;
  background-color: #fff8e8;
  padding: 9px 12px;
  font-size: 16px;
  font-weight: 800;
  line-height: 1.5;
  color: #123a5c;
}

.offer-text svg {
  color: #d98a00;
}

@media (min-width: 1024px) {
  /* ديسك توب: الفلتر بعرض صف الكروت اللي تحته كله (الخانات التلاتة بتتمدد بالتساوي) */

  .offer-filter {
    grid-template-columns: repeat(3, minmax(0, 1fr)) auto;
    gap: 12px;
  }

  .offer-filter__field {
    height: 52px;
    padding-inline: 16px;
  }

  .offer-filter__field select,
        .offer-filter__field [data-select-label] {
    font-size: 15px;
  }

  .offer-filter__box .req-menu {
    width: max(100%, 280px);
  }

  .offer-filter .offer-filter__reset {
    height: 52px;
    gap: 6px;
    justify-self: start;
    padding-inline: 20px;
    font-size: 15px;
  }

  .offer-filter__apply {
    grid-column: auto;
    height: 52px;
    padding-inline: 28px;
  }

  .offer-filter:not(.is-live) {
    grid-template-columns: repeat(3, minmax(0, 1fr)) auto auto;
  }

  .offer-text {
    font-size: 17px;
  }
}

/* صفحة "الأكثر رواجًا": كارت الفيديو (الصورة + زرار التشغيل + المدة) ونافذة الفيديو */

.trend-video {
  position: relative;
  display: block;
  aspect-ratio: 16 / 9;
  width: 100%;
  overflow: hidden;
  background-color: #dbe6f6;
}

.trend-video > img {
  position: absolute;
  inset: 0;
  height: 100%;
  width: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  transition: transform 0.5s;
}

.trend-video:hover > img {
  transform: scale(1.04);
}

.trend-video::after {
  content: "";
  position: absolute;
  inset: 0;
  background-color: rgba(9, 26, 43, 0.22);
}

.trend-video__play {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 1;
  display: flex;
  height: 60px;
  width: 60px;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background-color: rgba(255, 255, 255, 0.94);
  color: #1e4166;
  box-shadow: 0 10px 24px -10px rgba(9, 26, 43, 0.7);
  transform: translate(-50%, -50%);
  transition: transform 0.2s;
}

.trend-video:hover .trend-video__play {
  transform: translate(-50%, -50%) scale(1.08);
}

.trend-video__time {
  position: absolute;
  bottom: 10px;
  inset-inline-end: 10px;
  z-index: 1;
  border-radius: 8px;
  background-color: rgba(9, 26, 43, 0.82);
  padding: 2px 8px;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.6;
  color: #ffffff;
}

.trend-player {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}

.trend-player__dim {
  position: absolute;
  inset: 0;
  background-color: rgba(9, 26, 43, 0.82);
}

.trend-player__box {
  position: relative;
  width: 100%;
  max-width: 960px;
}

.trend-player__frame {
  position: relative;
  display: flex;
  aspect-ratio: 16 / 9;
  width: 100%;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border-radius: 16px;
  background-color: #0b1a2b;
  padding: 20px;
  text-align: center;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.8;
  color: #ffffff;
}

.trend-player__frame iframe,
    .trend-player__frame video {
  position: absolute;
  inset: 0;
  height: 100%;
  width: 100%;
  border: 0;
}

/* صفحة شاري كارد: شكل الكارت زي كارت التطبيق (تدريج كحلي ← تركواز ← أصفر، مايل) + لوجو شاري + الشريحة + اسم العميل + شريط الكود + QR */

.card-stage {
  overflow: hidden;
  border-radius: 28px;
  background-image: linear-gradient(180deg, #eef3fb 0%, #f6f9fc 100%);
  padding: 34px 30px 40px;
}

/* الكارت = صورة تصميم شاري كارد الحقيقي (1400×732) ، واسم العميل والكود فوقها في نفس أماكنهم على الكارت */

.shary-card {
  position: relative;
  display: flex;
  aspect-ratio: 1400 / 732;
  width: 100%;
  max-width: 420px;
  flex-direction: column;
  justify-content: flex-end;
  overflow: hidden;
  margin-inline: auto;
  border-radius: 4.6% / 8.8%;
  background-image: linear-gradient(100deg, #1d5a8a 0%, #2a9aa4 26%, #46bfae 50%, #9cc97c 74%, #f4b326 100%);
  padding: 0 19% 5% 6.5%;
  box-shadow: 0 30px 44px -24px rgba(18, 58, 92, 0.75), 0 3px 8px rgba(18, 58, 92, 0.18);
  transform: rotate(-3deg);
}

.shary-card > * {
  position: relative;
}

.shary-card > .shary-card__art {
  position: absolute;
  inset: 0;
  height: 100%;
  width: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

/* اسم العميل: مكتوب جنب الشريحة الدهبي (بعدها على نفس السطر — مش تحتها) ، سطر واحد بيتقصّر بنقط. الزائر بيشوف "Client Name" نفسها.
       كده الاسم بعيد عن سطر الكود وعن كلمة "Click here" */

.shary-card__holder {
  position: absolute;
  top: 40.5%;
  right: 6%;
  left: 18.5%;
  display: flex;
  height: 13%;
  flex-direction: column;
  justify-content: center;
}

.shary-card__holder .shary-card__label {
  font-size: 13.5px;
  line-height: 1.45;
}

.shary-card__holder:has(.shary-card__name:not(:empty)) .shary-card__label {
  display: none;
}

.shary-card__name:empty {
  display: none;
}

.shary-card__name {
  overflow: hidden;
  font-size: 14.5px;
  font-weight: 700;
  letter-spacing: 0.01em;
  line-height: 1.45;
  color: #ffffff;
  text-align: left;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-shadow: 0 1px 2px rgba(13, 44, 73, 0.35);
}

.shary-card__row {
  display: flex;
  align-items: center;
  gap: 4%;
  margin-top: 1.5%;
}

.shary-card__label {
  flex-shrink: 0;
  font-size: 14px;
  font-weight: 500;
  line-height: 1;
  color: #ffffff;
  text-shadow: 0 1px 2px rgba(13, 44, 73, 0.35);
}

/* الكود: مكتوب على الكارت بالأبيض (زي التصميم) — ولو متغطي: شريط رمادي بيتكشف بالضغط */

.shary-card__strip {
  position: relative;
  display: flex;
  height: 26px;
  min-width: 0;
  flex: 1 1 0%;
  cursor: pointer;
  align-items: center;
  justify-content: flex-start;
  border-radius: 4px;
}

.shary-card__code {
  font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0.08em;
  line-height: 1;
  color: #ffffff;
  white-space: nowrap;
  text-shadow: 0 1px 2px rgba(13, 44, 73, 0.4);
}

/* الشريط الرمادي اللي بيغطي الكود */

.shary-card__cover {
  position: absolute;
  inset: 0;
  border-radius: 4px;
  background-image: linear-gradient(90deg, #9a9da1 0%, #86898d 55%, #909397 100%);
  transition: opacity 0.35s;
}

.shary-card__hint {
  position: absolute;
  bottom: calc(100% + 3px);
  right: 4px;
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  font-weight: 600;
  line-height: 1;
  color: #ffffff;
  white-space: nowrap;
}

.shary-card__strip.is-revealed .shary-card__cover,
    .shary-card__strip.is-revealed .shary-card__hint {
  opacity: 0;
  pointer-events: none;
}

@media (min-width: 1024px) {
  .card-stage {
    padding: 48px 44px 54px;
  }

  .shary-card__name {
    font-size: 17px;
  }

  .shary-card__holder .shary-card__label {
    font-size: 15px;
  }

  .shary-card__label {
    font-size: 15px;
  }

  .shary-card__strip {
    height: 30px;
  }

  .shary-card__code {
    font-size: 18px;
  }
}

/* صفحة الوظائف: كارت الوظيفة (بيفتح ويقفل) + شارات القسم / المكان / نوع الدوام */

.job-card {
  overflow: hidden;
}

.job-card__head {
  display: flex;
  cursor: pointer;
  list-style: none;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  color: #123a5c;
}

.job-card__head::-webkit-details-marker {
  display: none;
}

.job-chip {
  border-radius: 999px;
  background-color: #e8f0fb;
  padding: 3px 10px;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.6;
  color: #3d5670;
}

/* صفحة الإشعارات: الإشعار (أيقونة ملوّنة حسب النوع) — غير المقروء خلفيته فاتحة وعليه شارة "جديد" */

.notify-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  border: 1px solid #e4e9ef;
  border-radius: 16px;
  background-color: #ffffff;
  padding: 14px;
  color: #123a5c;
  text-decoration: none;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.notify-item:hover {
  border-color: #1e4166;
  box-shadow: 0 12px 26px -18px rgba(18, 58, 92, 0.45);
}

[data-read="0"] > .notify-item {
  border-color: #cfe0f3;
  background-color: #e8f0fb;
}

.notify-item__icon {
  display: flex;
  height: 46px;
  width: 46px;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  border-radius: 14px;
  background-color: #e8f0fb;
  color: #1e4166;
}

.notify-item__icon--offer {
  background-color: #fdf1dc;
  color: #b97700;
}

.notify-item__icon--price {
  background-color: #e7f5f1;
  color: #1f7f72;
}

.notify-item__icon--meeting {
  background-color: #ede9fb;
  color: #5a45b5;
}

.notify-item__new {
  display: none;
  flex-shrink: 0;
  border-radius: 999px;
  background-color: #1e4166;
  padding: 1px 8px;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.7;
  color: #ffffff;
}

[data-read="0"] .notify-item__new {
  display: inline-block;
}

/* صفحة الشروط / الخصوصية: الفهرس + القسم بعنوان مرقّم */

.legal-toc {
  border: 1px solid #e4e9ef;
  border-radius: 16px;
  background-color: #ffffff;
}

.legal-toc__head {
  display: flex;
  cursor: pointer;
  list-style: none;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 13px 16px;
  font-size: 16px;
  font-weight: 800;
  line-height: 1.5;
  color: #123a5c;
}

.legal-toc__head::-webkit-details-marker {
  display: none;
}

.legal-toc__list {
  display: flex;
  flex-direction: column;
  border-top: 1px solid #e4e9ef;
  padding: 8px;
}

.legal-toc__list a {
  display: flex;
  gap: 6px;
  border-radius: 10px;
  padding: 8px 10px;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.6;
  color: #3d5670;
  text-decoration: none;
  transition: background-color 0.2s, color 0.2s;
}

.legal-toc__list a:hover {
  background-color: #e8f0fb;
  color: #123a5c;
}

.legal-section {
  scroll-margin-top: 110px;
  border-bottom: 1px solid #e4e9ef;
  padding-block: 22px;
}

.legal-section:last-of-type {
  border-bottom: 0;
}

.legal-section__title {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
  font-size: 19px;
  font-weight: 700;
  line-height: 1.5;
  color: #123a5c;
}

.legal-section__number {
  display: flex;
  height: 32px;
  width: 32px;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  background-color: #1e4166;
  font-size: 14px;
  font-weight: 700;
  line-height: 1;
  color: #ffffff;
}

@media (min-width: 1024px) {
  .job-card__head {
    padding: 18px 24px;
  }

  .notify-item {
    padding: 16px 18px;
  }

  .legal-section {
    padding-block: 30px;
  }

  .legal-section__title {
    margin-bottom: 14px;
    font-size: 24px;
  }

  .legal-section__number {
    height: 38px;
    width: 38px;
    font-size: 16px;
  }
}

/* ── app.css · جزء 4 من 16: المطورين ، صفحات عرض الكل ، الستوري ، زرار «مسح» الموحد ، المقارنة ، من نحن / اتصل بنا ، الوكلاء ، قايمة الموبايل (المصدر: resources/css/shary/app/04-developers-compare-company.css — عدّل هنا وشغّل tools/minify-assets.sh) */
/* أيقونة المطور (صفحة "كل المطورين"): لوجو في دايرة بإطار رمادي رفيع — والمطور اللي له ستوري إطاره أخضر تخين */

.dev-icon {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.dev-icon__logo {
  position: relative;
  display: flex;
  height: 96px;
  width: 96px;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border: 1px solid #d3dfee;
  border-radius: 999px;
  background-color: #ffffff;
  font-size: 18px;
  font-weight: 800;
  line-height: 1;
  color: #123a5c;
  text-decoration: none;
  transition: transform 0.2s, box-shadow 0.2s;
}

.dev-icon__logo:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 24px -16px rgba(18, 58, 92, 0.6);
}

.dev-icon__logo > img {
  position: absolute;
  inset: 0;
  height: 100%;
  width: 100%;
  background-color: #ffffff;
  -o-object-fit: contain;
     object-fit: contain;
  padding: 12px;
}

.dev-icon__logo--story {
  border: 4px solid #17a398;
}

/* صفحات عرض الكل (أفضل المشاريع / المشاريع الجديدة / الموصى به): اسم الصفحة ← إعلان ← لينكات المناطق (البحث والفلتر: search-strip بتاع الموقع) */

.coll-tools {
  margin-bottom: 16px;
}

/* عنوان الصفحة تحت البحث: نص كبير من غير خلفية */

.coll-head {
  margin-top: 12px;
}

.coll-title {
  font-size: 30px;
  font-weight: 800;
  line-height: 1.3;
  color: #123a5c;
}

.coll-sub {
  margin-top: 4px;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.75;
  color: #5b6b7c;
}

.coll-sub b {
  font-weight: 700;
  color: #1f7f72;
}

@media (min-width: 1024px) {
  .coll-head {
    margin-top: 18px;
  }

  .coll-title {
    font-size: 42px;
  }

  .coll-sub {
    font-size: 16px;
  }
}

/* المناطق: لينكات مكتوبة في سطر واحد بيتسحب بالجنب — كحلي بخط تحتها ، وأزرق لما العميل يضغط */

.coll-links {
  margin: 12px -20px 0;
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  overflow-x: auto;
  padding: 2px 20px 6px;
  white-space: nowrap;
  font-size: 13.5px;
  font-weight: 700;
  line-height: 1.8;
  scrollbar-width: none;
}

.coll-links::-webkit-scrollbar {
  display: none;
}

.coll-links a {
  flex-shrink: 0;
  color: #123a5c;
  text-decoration: underline;
  text-decoration-color: rgba(18, 58, 92, 0.35);
  text-underline-offset: 4px;
  transition: color 0.15s;
}

.coll-links a:hover,
    .coll-links a:active,
    .coll-links a:focus-visible {
  color: #1f5fc4;
  text-decoration-color: #1f5fc4;
}

.coll-links a + a {
  margin-inline-start: 18px;
}

/* المنطقة المختارة في الشريط (الشريط بيفلتر نفس الصفحة) */

.coll-links a[aria-current="true"] {
  color: #1f5fc4;
  text-decoration-color: #1f5fc4;
  text-decoration-thickness: 2px;
}

@media (min-width: 1024px) {
  .coll-tools {
    margin-bottom: 26px;
  }

  .coll-links {
    margin: 16px 0 0;
    padding-inline: 0;
    font-size: 14.5px;
  }
}

/* ستوري المطور (js/shary/story-viewer.js): فيديو على الشاشة كلها — شرايط التقدم فوق + اللوجو والاسم + الصوت + إغلاق ، وتحت زرار صفحة المطور */

.story {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: rgba(8, 16, 26, 0.94);
}

.story__frame {
  position: relative;
  height: 100%;
  width: 100%;
  max-width: 480px;
  overflow: hidden;
  background-color: #0b1622;
}

.story__stage {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.story__stage video,
    .story__stage img {
  height: 100%;
  width: 100%;
  -o-object-fit: contain;
     object-fit: contain;
}

.story__tap {
  position: absolute;
  top: 0;
  bottom: 0;
  z-index: 1;
  width: 38%;
  -webkit-tap-highlight-color: transparent;
}

.story__tap--prev {
  inset-inline-start: 0;
}

.story__tap--next {
  inset-inline-end: 0;
  width: 62%;
}

.story__top {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  z-index: 2;
  background-image: linear-gradient(180deg, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0));
  padding: calc(10px + env(safe-area-inset-top, 0px)) 12px 26px;
}

.story__bars {
  display: flex;
  gap: 4px;
  direction: ltr;
}

.story__bars span {
  height: 3px;
  min-width: 0;
  flex: 1 1 0%;
  overflow: hidden;
  border-radius: 999px;
  background-color: rgba(255, 255, 255, 0.35);
}

.story__bars i {
  display: block;
  height: 100%;
  width: 0;
  border-radius: 999px;
  background-color: #fff;
}

.story__head {
  margin-top: 10px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.story__who {
  display: flex;
  min-width: 0;
  flex: 1 1 0%;
  align-items: center;
  gap: 9px;
  color: #fff;
}

.story__who img {
  height: 38px;
  width: 38px;
  flex-shrink: 0;
  border-radius: 999px;
  border: 2px solid #fff;
  background-color: #fff;
  -o-object-fit: contain;
     object-fit: contain;
}

.story__who b {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 15px;
  font-weight: 800;
  line-height: 1.4;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
}

.story__btn {
  display: flex;
  height: 40px;
  width: 40px;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background-color: rgba(0, 0, 0, 0.38);
  color: #fff;
}

.story__btn[hidden] {
  display: none;
}

.story__go {
  position: absolute;
  right: 16px;
  bottom: calc(18px + env(safe-area-inset-bottom, 0px));
  left: 16px;
  z-index: 2;
  display: flex;
  height: 50px;
  align-items: center;
  justify-content: center;
  border-radius: 14px;
  background-color: #fff;
  font-size: 15.5px;
  font-weight: 800;
  line-height: 1;
  color: #123a5c;
  box-shadow: 0 12px 26px -12px rgba(0, 0, 0, 0.7);
}

@media (min-width: 1024px) {
  .story__frame {
    height: min(calc(92vh / var(--z, 1)), 860px);
    border-radius: 20px;
  }
}

/* موبايل وتابلت: المطور كارت (2 في الصف) — اللوجو والاسم وتحتهم المشاريع والوحدات */

@media (max-width: 1023px) {
  .dev-icon {
    height: 100%;
    border: 1px solid #e3e9f0;
    border-radius: 16px;
    background-color: #ffffff;
    padding: 14px 12px 12px;
    box-shadow: 0 6px 18px -14px rgba(18, 58, 92, 0.4);
  }

  .dev-icon__logo {
    height: 84px;
    width: 84px;
  }

  .dev-icon__stats {
    margin-top: 8px;
    display: grid;
    width: 100%;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    border-top: 1px solid #e3e9f0;
    padding-top: 8px;
  }
}

@media (min-width: 1024px) {
  .dev-icon__logo {
    height: 124px;
    width: 124px;
    font-size: 22px;
  }

  .dev-icon__logo > img {
    padding: 16px;
  }
}

/* شريط الأدوات فوق كروت المفضلة / جدول المقارنة: التبويب أو العدد من ناحية، والأزرار من الناحية التانية */

.saved-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px 12px;
}

[data-saved-panel] > .saved-toolbar {
  margin-bottom: 12px;
}

/* زرار "مسح" الموحّد في كل الفلاتر والمقارنة: علامة X + الكلمة ، بلون خانات الفورم (لبني) ، ومع الضغط بيبقى كحلي زي زرار الفورم */

.clear-btn {
  display: inline-flex;
  height: 40px;
  flex-shrink: 0;
  cursor: pointer;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border: 1px solid #d3dfee;
  border-radius: 12px;
  background-color: #e8f0fb;
  padding-inline: 14px;
  font-size: 13.5px;
  font-weight: 700;
  line-height: 1;
  color: #1e4166;
  white-space: nowrap;
  text-decoration: none;
  transition: background-color 0.15s, border-color 0.15s, color 0.15s;
}

.clear-btn:hover {
  border-color: #b9cbe2;
  background-color: #e8f0fb;
}

.clear-btn:active {
  border-color: #1e4166;
  background-color: #1e4166;
  color: #ffffff;
}

.clear-btn > svg {
  flex-shrink: 0;
}

/* صغير: جنب عنوان قسم في الفلتر */

.clear-btn--sm {
  height: 30px;
  gap: 4px;
  border-radius: 9px;
  padding-inline: 10px;
  font-size: 12.5px;
}

.clear-btn--sm > svg {
  height: 12px;
  width: 12px;
}

/* كبير: آخر لوحة الفلاتر على الموبايل (جنب "عرض النتائج") */

.clear-btn--lg {
  height: 56px;
  gap: 8px;
  border-radius: 999px;
  font-size: 17px;
}

.clear-btn--lg > svg {
  height: 17px;
  width: 17px;
}

.saved-action {
  display: inline-flex;
  height: 38px;
  align-items: center;
  gap: 6px;
  border: 1px solid #d3dfee;
  border-radius: 999px;
  background-color: #ffffff;
  padding-inline: 12px;
  font-size: 13px;
  font-weight: 700;
  line-height: 1;
  color: #123a5c;
  white-space: nowrap;
  text-decoration: none;
  transition: border-color 0.2s, background-color 0.2s, color 0.2s;
}

.saved-action:hover {
  border-color: #123a5c;
}

.saved-action[aria-pressed="true"] {
  border-color: #1e4166;
  background-color: #1e4166;
  color: #ffffff;
}

.saved-action--solid {
  height: 44px;
  border-color: #1e4166;
  background-color: #1e4166;
  padding-inline: 18px;
  font-size: 14.5px;
  color: #ffffff;
}

.saved-action--solid:hover {
  background-color: #123a5c;
}

/* شارة الأفضل في صف المقارنة (الأقل سعرًا / الأكبر مساحة) + "الفروق فقط" بيخفي الصفوف المتساوية */

.compare-best {
  display: inline-flex;
  align-items: center;
  margin-inline-start: 8px;
  border-radius: 999px;
  background-color: #e7f5f1;
  padding: 2px 9px;
  vertical-align: middle;
  font-size: 11.5px;
  font-weight: 700;
  line-height: 1.6;
  color: #1f7f72;
  white-space: nowrap;
}

.compare-cell.is-best {
  background-color: #f3faf8;
}

.compare-table[data-diff-only] .compare-row.is-same {
  display: none;
}

/* من نحن: شريط الأرقام (موبايل 2×2 ، ديسك توب 4 في صف) — الخطوط الفاصلة من خلفية الشبكة */

.about-stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  overflow: hidden;
  border: 1px solid #e4e9ef;
  border-radius: 20px;
  background-color: #e4e9ef;
  box-shadow: 0 1px 2px rgba(18, 58, 92, 0.04), 0 14px 30px -22px rgba(18, 58, 92, 0.4);
}

.about-stats__item {
  background-color: #ffffff;
  padding: 18px 12px;
  text-align: center;
}

/* اتصل بنا: كارت بيان التواصل (العنوان / الهاتف / البريد) — الكارت كله لينك */

.contact-tile {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 14px;
  border: 1px solid #e4e9ef;
  border-radius: 16px;
  background-color: #ffffff;
  padding: 14px 16px;
  color: #123a5c;
  text-decoration: none;
  box-shadow: 0 1px 2px rgba(18, 58, 92, 0.04);
  transition: border-color 0.2s, box-shadow 0.2s;
}

.contact-tile:hover {
  border-color: #1e4166;
  box-shadow: 0 12px 26px -18px rgba(18, 58, 92, 0.45);
}

.contact-tile__icon {
  display: flex;
  height: 48px;
  width: 48px;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  border-radius: 14px;
  background-color: #1e4166;
  color: #ffffff;
}

.contact-tile__label {
  display: block;
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1.5;
  color: #5b6b7c;
}

.contact-tile__value {
  display: block;
  font-size: 15.5px;
  font-weight: 700;
  line-height: 1.6;
}

.contact-tile__action {
  flex-shrink: 0;
  border-radius: 999px;
  background-color: #e8f0fb;
  padding: 6px 12px;
  font-size: 12.5px;
  font-weight: 700;
  line-height: 1.5;
  white-space: nowrap;
}

/* اتصل بنا: أيقونات السوشيال ميديا بألوان المنصات الأصلية — دايرة ملوّنة والأيقونة بيضا (سناب شات: أصفر والأيقونة سودا) */

/* موبايل: 36px — السبعة في صف واحد مريح. ديسك توب: 48px */

.social-brand {
  display: flex;
  height: 36px;
  width: 36px;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background-color: #123a5c;
  font-size: 17px;
  line-height: 1;
  color: #ffffff;
  text-decoration: none;
  transition: transform 0.2s, filter 0.2s;
}

.social-brand:hover {
  transform: translateY(-2px);
  filter: brightness(1.06);
}

.social-brand--facebook-f {
  background-color: #1877f2;
}

.social-brand--instagram {
  background-image: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285aeb 90%);
}

.social-brand--x-twitter {
  background-color: #000000;
}

.social-brand--youtube {
  background-color: #ff0000;
}

.social-brand--linkedin-in {
  background-color: #0a66c2;
}

.social-brand--snapchat {
  background-color: #fffc00;
  color: #000000;
}

.social-brand--tiktok {
  background-color: #000000;
}

.social-brand--whatsapp {
  background-color: #25d366;
}

.social-brand--telegram {
  background-color: #26a5e4;
}

@media (min-width: 1024px) {
  .social-brand {
    height: 48px;
    width: 48px;
    font-size: 23px;
  }
}

/* التحقق من الوكيل: خطوات التحقق — رقم في دايرة وخط واصل بين الخطوات */

.agent-steps {
  display: flex;
  flex-direction: column;
}

.agent-steps li {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding-bottom: 16px;
}

.agent-steps li:last-child {
  padding-bottom: 0;
}

.agent-steps li:not(:last-child)::before {
  content: "";
  position: absolute;
  top: 30px;
  bottom: 2px;
  inset-inline-start: 13px;
  width: 2px;
  border-radius: 2px;
  background-color: #d5dde7;
}

.agent-steps__number {
  display: flex;
  height: 28px;
  width: 28px;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background-color: #1e4166;
  font-size: 13px;
  font-weight: 700;
  line-height: 1;
  color: #ffffff;
}

@media (min-width: 1024px) {
  .about-stats {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .about-stats__item {
    padding: 30px 20px;
  }

  .contact-tile {
    padding: 18px 20px;
  }

  .saved-action {
    height: 40px;
    gap: 7px;
    padding-inline: 14px;
    font-size: 13.5px;
  }

  .saved-action--solid {
    height: 44px;
    padding-inline: 18px;
    font-size: 14.5px;
  }

  .contact-tile__value {
    font-size: 16.5px;
  }

  /* "محتاج مساعدة؟" تحت المفضلة والمقارنة: العنوان من ناحية والأزرار التلاتة جنبه */

  .saved-help .content-cta {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding: 22px 28px;
  }

  .saved-help .content-cta__title {
    font-size: 19px;
  }

  .saved-help .content-cta__buttons {
    width: 560px;
    flex-shrink: 0;
  }
}

/* جدول المقارنة: --cols = عدد العناصر. موبايل: اسم الصف سطر فوق القيم، والعمود 150px على الأقل (الجدول بيتسحب بالجنب) */

.compare-table {
  overflow-x: auto;
  border: 1px solid #e4e9ef;
  border-radius: 16px;
  background-color: #ffffff;
  box-shadow: 0 1px 2px rgba(18, 58, 92, 0.04), 0 12px 26px -18px rgba(18, 58, 92, 0.35);
}

.compare-table.hidden {
  display: none;
}

.compare-row {
  display: grid;
  min-width: -moz-min-content;
  min-width: min-content;
  grid-template-columns: repeat(var(--cols, 2), minmax(150px, 1fr));
}

.compare-label {
  grid-column: 1 / -1;
  background-color: #e8f0fb;
  padding: 7px 14px;
  font-size: 12.5px;
  font-weight: 700;
  line-height: 1.5;
  color: #5b6b7c;
}

.compare-label span {
  position: sticky;
  inset-inline-start: 14px;
}

.compare-row--head .compare-label,
    .compare-row--foot .compare-label {
  display: none;
}

.compare-cell {
  min-width: 0;
  padding: 12px 14px;
  font-size: 14.5px;
  font-weight: 600;
  line-height: 1.6;
  color: #123a5c;
}

.compare-cell + .compare-cell {
  border-inline-start: 1px solid #e4e9ef;
}

.compare-cell--strong {
  font-size: 16px;
  font-weight: 800;
}

.compare-row--head .compare-cell {
  padding-top: 14px;
}

.compare-row--foot .compare-cell {
  border-top: 1px solid #e4e9ef;
  padding-bottom: 14px;
}

@media (min-width: 1024px) {
  .saved-tabs button {
    height: 48px;
    padding-inline: 24px;
    font-size: 16px;
  }

  .saved-empty {
    padding: 56px 24px;
  }

  /* ديسك توب: اسم الصف عمود في الأول والقيم جنبه */

  .compare-row {
    grid-template-columns: 210px repeat(var(--cols, 2), minmax(0, 1fr));
  }

  .compare-row + .compare-row {
    border-top: 1px solid #e4e9ef;
  }

  .compare-label,
        .compare-row--head .compare-label,
        .compare-row--foot .compare-label {
    display: flex;
    grid-column: auto;
    align-items: center;
    background-color: #f6f9fd;
    padding: 14px 20px;
    font-size: 14.5px;
    color: #123a5c;
  }

  .compare-label span {
    position: static;
  }

  .compare-cell {
    border-inline-start: 1px solid #e4e9ef;
    padding: 14px 20px;
    font-size: 15.5px;
  }

  .compare-cell--strong {
    font-size: 18px;
  }

  .compare-row--head .compare-cell {
    padding-block: 20px 16px;
  }

  .compare-row--foot .compare-cell {
    border-top: 0;
    padding-block: 16px 20px;
  }
}

/* قايمة الموبايل: صفحة كاملة فوق كل حاجة — شريط فوق (اللوجو + إغلاق) وتحته الروابط بتتسكرول */

.site-menu {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: flex;
  flex-direction: column;
  background-color: #ffffff;
}

/* الهيدر ثابت وله ترتيب طبقات خاص بيه: والقايمة مفتوحة بيطلع فوق شريط التواصل والأزرار العايمة */

header:has(> .site-menu:not([class~="hidden"])) {
  z-index: 60;
}

.site-menu__bar {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid #e4e9ef;
  padding: 14px 20px;
}

.site-menu__scroll {
  min-height: 0;
  flex: 1 1 auto;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding-bottom: env(safe-area-inset-bottom, 0px);
}

.site-menu__list {
  display: flex;
  flex-direction: column;
  padding: 8px 12px 12px;
}

.site-menu__link {
  display: flex;
  min-height: 56px;
  align-items: center;
  gap: 14px;
  border-radius: 14px;
  padding: 7px 8px;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.5;
  color: #123a5c;
  transition: background-color 0.15s;
}

.site-menu__link:active,
    .site-menu__link.is-active {
  background-color: #e8f0fb;
}

.site-menu__link.is-active {
  font-weight: 700;
  color: #1f63c6;
}

.site-menu__icon {
  display: flex;
  height: 42px;
  width: 42px;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  background-color: #e8f0fb;
  color: #1e4166;
}

.site-menu__link.is-active .site-menu__icon {
  background-color: #1e4166;
  color: #ffffff;
}

/* المفضلة: القلب بيبقى أحمر طول ما فيه حاجة محفوظة */

.site-menu__link[data-active="true"] .site-menu__icon {
  background-color: #fdecea;
  color: #dc2626;
}

.site-menu__link[data-active="true"] .site-menu__icon svg {
  fill: currentColor;
}

.site-menu__arrow {
  flex-shrink: 0;
  color: #b9c7d6;
}

.site-menu__count {
  display: inline-flex;
  height: 22px;
  min-width: 22px;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background-color: #1e4166;
  padding-inline: 6px;
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  color: #ffffff;
}

.site-menu__count--red {
  background-color: #dc2626;
}

.site-menu__info {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  border-top: 8px solid #f3f6fa;
  padding: 22px 20px 28px;
  text-align: center;
}

.shary-rail::-webkit-scrollbar {
  display: none;
}

.index-ticker {
  overflow: hidden;
}

.index-ticker:hover .index-ticker__track {
  animation-play-state: paused;
}

/* العناصر متكررة 4 مرات، فالحركة بمقدار ربع العرض بترجع لنفس الشكل */

@keyframes index-ticker {
  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(25%);
  }
}

/* في النسخة الإنجليزي (ltr) الحركة في الاتجاه العكسي */

@keyframes index-ticker-ltr {
  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(-25%);
  }
}

/* لو المستخدم موقّف الحركة من إعدادات جهازه: سكرول يدوي بدل الحركة */

@media (prefers-reduced-motion: reduce) {
  .index-ticker {
    overflow-x: auto;
    scrollbar-width: none;
  }

  .index-ticker::-webkit-scrollbar {
    display: none;
  }

  .index-ticker__track {
    animation: none;
  }
}

/* اسم الشبكة بيظهر مكتوب لحد ما أيقونات Font Awesome تتحمل، وبعدها بيتخبى (بيفضل لقارئ الشاشة) */

.social-link .svg-inline--fa + .social-label {
  position: absolute;
  height: 1px;
  width: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
}

/* ── app.css · جزء 5 من 16: محتوى المقال وأزرار التواصل فيه ، صفحة مؤشر شاري وهيدره ، كروت المناطق (المصدر: resources/css/shary/app/05-articles-index.css — عدّل هنا وشغّل tools/minify-assets.sh) */
/* ---------- محتوى المقال (HTML جاي من لوحة التحكم) ---------- */

.article-content {
  display: flex;
  flex-direction: column;
  gap: 18px;
  color: #2e3d4d;
}

.article-content p {
  font-size: 16px;
  font-weight: 500;
  line-height: 1.9;
}

.article-content h2 {
  font-size: 21px;
  font-weight: 700;
  line-height: 1.5;
  color: #123a5c;
  scroll-margin-top: 16px;
}

.article-content h3 {
  font-size: 18px;
  font-weight: 700;
  line-height: 1.6;
  color: #123a5c;
}

/* أرقام مؤشر شاري جوه جداول المقال: متوسط سعر المتر ونسبة التغير (بالأخضر زي شريط المؤشر) */

.article-index {
  white-space: nowrap;
  font-weight: 700;
  color: #123a5c;
}

.article-change {
  display: inline-block;
  white-space: nowrap;
  font-weight: 700;
  color: #1f7f72;
}

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

.article-faq {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.article-faq details {
  border: 1px solid #e4e9ef;
  border-radius: 6px;
  padding: 14px 16px;
}

.article-faq summary {
  cursor: pointer;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.6;
  color: #123a5c;
}

.article-content .article-faq p {
  padding-top: 8px;
  font-size: 15px;
  line-height: 1.85;
}

.article-content ul,
    .article-content ol {
  display: flex;
  flex-direction: column;
  gap: 10px;
  counter-reset: article-item;
}

.article-content li {
  position: relative;
  padding-inline-start: 17px;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.75;
}

.article-content ol li {
  padding-inline-start: 23px;
  counter-increment: article-item;
}

.article-content li::before {
  content: "•";
  position: absolute;
  inset-inline-start: 0;
  top: 0;
  font-weight: 700;
  color: #1f7f72;
}

.article-content ol li::before {
  content: counter(article-item) ".";
  color: #123a5c;
}

/* عنصر قايمة بعنوان وتحته شرح: <li><strong>العنوان</strong> <span>الشرح</span></li> */

.article-content li strong {
  display: block;
  margin-bottom: 2px;
  font-weight: 700;
  line-height: 1.7;
  color: #123a5c;
}

.article-content li span {
  display: block;
  font-weight: 500;
}

.article-content figure {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.article-content figcaption {
  font-size: 12px;
  font-weight: 600;
  line-height: 1.5;
  color: #8a99a8;
}

.article-content img {
  border-radius: 12px;
}

/* صورة جوه المقال (غير صورة الغلاف) */

.article-content figure > img:not([class]) {
  height: auto;
  width: 100%;
  background-color: #e8f0fb;
}

/* الشريط الأخضر (لينك لجزء جوه المقال أو لصفحة تانية) */

.article-content .article-cta {
  display: block;
  border-radius: 6px;
  background-color: #1f7f72;
  padding: 16px;
  text-align: center;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.5;
  color: #ffffff;
}

.article-content .article-cta:hover {
  background-color: #1a6d62;
}

/* أزرار التواصل جوه المحتوى (الكود المختصر [shary-cta] — partials/content-cta): طلب مقابلة بإطار + اتصال كحلي + واتساب أخضر.
       موبايل: طلب مقابلة بعرض السطر وتحته اتصال وواتساب. ديسك توب: التلاتة جنب بعض */

.content-cta {
  display: flex;
  flex-direction: column;
  gap: 12px;
  border-radius: 16px;
  background-color: #e8f0fb;
  padding: 16px;
}

.content-cta__title,
    .article-content .content-cta__title {
  font-size: 17px;
  font-weight: 700;
  line-height: 1.5;
  color: #123a5c;
}

.content-cta__buttons {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.content-cta__button {
  display: flex;
  height: 52px;
  min-width: 0;
  align-items: center;
  justify-content: center;
  gap: 10px;
  border: 1.5px solid transparent;
  border-radius: 12px;
  padding-inline: 6px;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.5;
  color: #ffffff;
  text-decoration: none;
  transition: background-color 0.2s, filter 0.2s;
}

.content-cta__button svg,
    .content-cta__button i {
  flex-shrink: 0;
}

/* اسم الزرار ما يتكسرش على سطرين */

.content-cta__button span {
  white-space: nowrap;
}

.content-cta__button i,
    .content-cta__button .svg-inline--fa {
  font-size: 22px;
  line-height: 1;
}

.content-cta__button--meeting {
  grid-column: 1 / -1;
  border: 1.5px solid #123a5c;
  background-color: #ffffff;
  color: #123a5c;
}

.content-cta__button--meeting:hover {
  background-color: #e8f0fb;
}

.content-cta__button--call {
  background-color: #1e4166;
}

/* فورم الاستشارة جوه المحتوى ([shary-form]) */

.content-form {
  margin-block: 20px;
}

.content-form .consult-form {
  margin-inline: auto;
}

.content-form a {
  text-decoration: none;
}

/* زرار واحد أو اتنين (الكاتب اختارهم): زرار واحد بعرض السطر (ديسك توب: بعرض محدود) ، اتنين جنب بعض بالنص —
       ولو الشاشة أضيق من إن كلام الزرارين يتكتب كامل جنب بعض ، كل زرار بياخد سطر لوحده بدل ما الكلام يتكسر */

.content-cta__buttons--1 {
  grid-template-columns: minmax(0, 1fr);
}

.content-cta__buttons--2 {
  display: flex;
  flex-wrap: wrap;
}

.content-cta__buttons--2 > .content-cta__button {
  flex: 1 1 0%;
  min-width: -moz-max-content;
  min-width: max-content;
}

.content-cta__button--call:hover {
  background-color: #123a5c;
}

.content-cta__button--whatsapp {
  background-color: #4dc35a;
}

.content-cta__button--whatsapp:hover {
  filter: brightness(0.95);
}

@media (min-width: 1024px) {
  .content-cta {
    padding: 20px 24px;
  }

  .content-cta__buttons {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
  }

  .content-cta__button--meeting {
    grid-column: auto;
  }

  .content-cta__buttons--1 {
    grid-template-columns: minmax(0, 320px);
  }

  .content-cta__buttons--2 > .content-cta__button {
    flex: 0 1 260px;
  }
}

/* ملحوظة مهمة: خلفية لبني خفيفة (لون الفورم) ورا النص. للحاجات المهمة بس — مرة أو مرتين في الصفحة */

.shary-note,
    .dev-about p.shary-note,
    .article-content p.article-note {
  border-radius: 12px;
  background-color: #e8f0fb;
  padding: 12px 14px;
  font-weight: 600;
  color: #123a5c;
}

@media (min-width: 1024px) {
  .shary-note,
        .dev-about p.shary-note,
        .article-content p.article-note {
    padding: 14px 18px;
  }
}

/* ---------- صفحة مؤشر شاري ---------- */

/* نسبة التغير: أخضر للزيادة وأحمر للنقص — السهم بيتكتب قبل الرقم عشان المعنى ما يبقاش باللون بس */

.index-change {
  display: inline-block;
  white-space: nowrap;
  border-radius: 9999px;
  padding: 1px 8px;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.6;
}

.index-change[data-sign="up"] {
  background-color: #e7f5f1;
  color: #1f7f72;
}

.index-change[data-sign="down"] {
  background-color: #fdecea;
  color: #b3372b;
}

.index-change[data-sign="up"]::before {
  content: "▲ ";
  font-size: 9px;
}

.index-change[data-sign="down"]::before {
  content: "▼ ";
  font-size: 9px;
}

.index-plot {
  height: 170px;
}

.index-dots li::before {
  content: "";
  display: inline-block;
  height: 6px;
  width: 6px;
  margin-inline-end: 8px;
  border-radius: 50%;
  background-color: #3fb39f;
  vertical-align: middle;
}

/* جدول المناطق / أنواع الوحدات */

.index-table {
  width: 100%;
  border-collapse: collapse;
}

.index-table th,
    .index-table td {
  border-bottom: 1px solid #e4e9ef;
  padding: 12px 8px;
  text-align: center;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.5;
}

.index-table .index-table__name {
  text-align: start;
}

.index-table thead th {
  background-color: #e8f0fb;
  font-size: 12px;
  font-weight: 700;
  color: #123a5c;
}

.index-table tbody tr:last-child th,
    .index-table tbody tr:last-child td {
  border-bottom: 0;
}

.index-table tbody tr:hover {
  background-color: #f6f9fd;
}

.index-table th:first-child,
    .index-table td:first-child {
  padding-inline-start: 14px;
}

.index-table th:last-child,
    .index-table td:last-child {
  padding-inline-end: 14px;
}

.index-table__rank {
  width: 38px;
  color: #5b6b7c;
}

/* زرار اختيار المنطقة: صورة المنطقة دايرة + الاسم + سهم (بيفتح لوحة الاختيار) */

.index-pick {
  display: flex;
  height: 48px;
  width: 100%;
  align-items: center;
  gap: 10px;
  border: 1px solid #e4e9ef;
  border-radius: 12px;
  background-color: #ffffff;
  padding-inline: 14px 12px;
  font-size: 14px;
  font-weight: 700;
  color: #123a5c;
  transition: border-color 0.15s ease;
}

/* زرار الهيدر فيه صورة المنطقة في الأول */

.index-pick--all {
  padding-inline-start: 8px;
}

.index-pick:hover,
    .index-pick:focus-visible {
  border-color: #1f63c6;
  outline: none;
}

/* "مصر كلها": علامة شاري جوه دايرة لبني بدل صورة المنطقة */

.index-pick__mark {
  background-color: #e8f0fb;
  padding: 6px;
  -o-object-fit: contain;
     object-fit: contain;
}

@media (min-width: 1024px) {
  .index-pick {
    font-size: 15px;
  }
}

/* تقييم المنطقة بكلمة (فرصة / مستقر / سعر مرتفع) — الكلمة مكتوبة دايمًا، واللون مساعد بس */

.index-verdict {
  display: inline-block;
  white-space: nowrap;
  border-radius: 9999px;
  padding: 0 7px;
  font-size: 10.5px;
  font-weight: 700;
  line-height: 1.7;
}

.index-verdict[data-verdict="opportunity"] {
  background-color: #e7f5f1;
  color: #1f7f72;
}

.index-verdict[data-verdict="stable"] {
  background-color: #e8f0fb;
  color: #123a5c;
}

.index-verdict[data-verdict="high"] {
  background-color: #fdf1dc;
  color: #7a5a12;
}

/* ميزانيتك تجيب إيه: كارت لكل منطقة (الاسم، المساحة، سعر المتر) */

.index-budget__item {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  border: 1px solid #e4e9ef;
  border-radius: 12px;
  background-color: #e8f0fb;
  padding: 10px 14px;
}

.index-budget__image {
  height: 40px;
  width: 40px;
  flex-shrink: 0;
  border-radius: 9999px;
  -o-object-fit: cover;
     object-fit: cover;
}

.index-budget__name {
  min-width: 0;
  font-size: 14.5px;
  font-weight: 700;
  line-height: 1.4;
  color: #123a5c;
}

a.index-budget__name:hover {
  color: #1f63c6;
}

.index-budget__item:hover {
  border-color: #1f63c6;
}

/* أزرار الاختيار (الميزانية وتصفية الأخبار): المختار وعند وقوف الماوس كحلي والكتابة أبيض */

[data-budget-chip]:hover,
    [data-news-filter]:hover,
    [data-adv-chip]:hover,
    [data-budget-chip][aria-pressed="true"],
    [data-news-filter][aria-pressed="true"],
    [data-adv-chip][aria-pressed="true"] {
  border-color: #1e4166;
  background-color: #1e4166;
  color: #ffffff;
}

/* أرقام الاقتصاد: التغير بسهم ولون محايد (الزيادة مش دايمًا خبر كويس) */

.index-move {
  display: inline-block;
  white-space: nowrap;
  border-radius: 9999px;
  background-color: #e8f0fb;
  padding: 1px 8px;
  font-size: 11.5px;
  font-weight: 700;
  line-height: 1.6;
  color: #123a5c;
}

.index-move[data-dir="up"]::before {
  content: "▲ ";
  font-size: 9px;
}

.index-move[data-dir="down"]::before {
  content: "▼ ";
  font-size: 9px;
}

/* أخبار السوق: نوع الخبر + زرار التصفية المختار */

.index-tag {
  display: inline-block;
  white-space: nowrap;
  border-radius: 9999px;
  background-color: #e8f0fb;
  padding: 0 9px;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.8;
  color: #123a5c;
}

.index-news__filters {
  scrollbar-width: none;
}

.index-news__filters::-webkit-scrollbar {
  display: none;
}

/* بدائل الاستثمار (شهادات بنكية / ذهب / دولار): كل الشرايط بتركواز شاري ، والعقار بأزرق شاري الكحلي — مفيش شريط رمادي */

.index-alt__bar {
  border-radius: 0 4px 4px 0;
  background-color: #35b6a7;
}

.index-alt__bar[data-own="1"] {
  background-color: #1e4166;
}

[dir="rtl"] .index-alt__bar {
  border-radius: 4px 0 0 4px;
}

/* المقارنة: لون ثابت لكل منطقة (الأولى أزرق شاري ، التانية تركواز شاري) — نفس اللون في المربع جنب الاسم وفي الشريط */

.index-swatch {
  display: inline-block;
  height: 10px;
  width: 10px;
  border-radius: 3px;
}

.index-swatch[data-side="a"],
    .index-compare__bar[data-side="a"] {
  background-color: #1e4166;
}

.index-swatch[data-side="b"],
    .index-compare__bar[data-side="b"] {
  background-color: #35b6a7;
}

.index-compare__bar {
  border-radius: 0 4px 4px 0;
  transition: width 0.4s ease;
}

[dir="rtl"] .index-compare__bar {
  border-radius: 4px 0 0 4px;
}

@media (min-width: 1024px) {
  .index-plot {
    height: 240px;
  }

  .index-table th,
        .index-table td {
    padding: 14px 10px;
    font-size: 14px;
  }

  .index-table thead th {
    font-size: 13px;
  }

  .index-table__rank {
    width: 52px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .index-compare__bar {
    transition: none;
  }
}

/* إنفوجراف الأماكن */

.article-places {
  scroll-margin-top: 16px;
}

.article-places__box {
  overflow: hidden;
  border-radius: 6px;
}

.article-places__title {
  background-color: #9eddd4;
  padding: 18px;
  text-align: center;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.5;
  color: #123a5c;
}

/* الدواير 3 في الصف (6 أماكن = صفين متساويين) — وفي المقال على الديسك توب الستة في صف واحد */

.article-places__list {
  display: grid;
  grid-template-columns: repeat(3, max-content);
  justify-content: center;
  gap: 16px 18px;
  background-color: #3aafa0;
  padding: 24px 12px;
}

.article-content .article-places__list span,
    .article-content .article-places__list a,
    .area-places .article-places__list span,
    .area-places .article-places__list a {
  display: flex;
  height: 86px;
  width: 86px;
  align-items: center;
  justify-content: center;
  border-radius: 9999px;
  background-color: #ffffff;
  padding: 8px;
  text-align: center;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.3;
  color: #123a5c;
}

/* الدايرة زرار: بتفتح مقال المكان. لما الماوس يقف عليها بتتلوّن أزرق غامق وتطلع لفوق سِنّة. نفس الدواير في صفحة المنطقة (.area-places) */

.article-content .article-places__list a,
    .area-places .article-places__list a {
  cursor: pointer;
  text-decoration: none;
  box-shadow: 0 4px 10px -6px rgba(18, 58, 92, 0.55);
  transition: background-color 0.18s ease, color 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
}

.article-content .article-places__list a:hover,
    .article-content .article-places__list a:focus-visible,
    .area-places .article-places__list a:hover,
    .area-places .article-places__list a:focus-visible {
  background-color: #1f5aa3;
  color: #ffffff;
  text-decoration: none;
  transform: translateY(-3px);
  box-shadow: 0 12px 20px -10px rgba(18, 58, 92, 0.7);
  outline: none;
}

.article-content .article-places__list a:active,
    .area-places .article-places__list a:active {
  transform: translateY(0);
}

/* كارت مقال مقترح جوه المقال */

.article-related {
  display: flex;
  flex-direction: column;
  gap: 14px;
  border: 1px solid #e4e9ef;
  border-radius: 6px;
  padding: 14px;
}

.article-related__image {
  display: block;
  flex-shrink: 0;
  overflow: hidden;
  border-radius: 4px;
  background-color: #e8f0fb;
}

.article-content .article-related__image img {
  height: 160px;
  width: 100%;
  border-radius: 0;
  -o-object-fit: cover;
     object-fit: cover;
}

.article-related__body {
  display: flex;
  min-width: 0;
  flex: 1 1 0%;
  flex-direction: column;
  gap: 8px;
}

.article-related h3 {
  font-size: 17px;
  font-weight: 700;
  line-height: 1.6;
  color: #123a5c;
}

.article-related h3 a:hover {
  color: #1f63c6;
}

.article-content .article-related p {
  display: -webkit-box;
  overflow: hidden;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.8;
  color: #5b6b7c;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
  line-clamp: 4;
}

.article-related__more {
  align-self: flex-start;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.5;
  color: #1f63c6;
}

.article-related__more:hover {
  text-decoration: underline;
}

.article-related__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: auto;
  padding-top: 4px;
}

.article-related__brand {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  font-weight: 800;
  line-height: 1.5;
  color: #123a5c;
}

.article-related__share {
  display: flex;
  height: 36px;
  width: 36px;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
}

.article-related__share:hover {
  background-color: #e8f0fb;
}

/* جدول المقارنة */

.article-content table {
  width: 100%;
  table-layout: fixed;
  border-collapse: separate;
  border-spacing: 0;
  overflow: hidden;
  border: 1px solid #e4e9ef;
  border-radius: 6px;
}

.article-content th,
    .article-content td {
  border-bottom: 1px solid #e4e9ef;
  padding: 12px 8px;
  text-align: center;
  font-size: 13px;
  line-height: 1.5;
}

.article-content th {
  font-weight: 700;
  color: #123a5c;
}

.article-content td {
  font-weight: 600;
}

.article-content thead th {
  background-color: #e8f0fb;
}

.article-content tbody tr:last-child th,
    .article-content tbody tr:last-child td {
  border-bottom: 0;
}

@media (min-width: 1024px) {
  .article-content p,
        .article-content li {
    font-size: 17px;
  }

  .article-content h2 {
    font-size: 24px;
  }

  .article-content h3 {
    font-size: 20px;
  }

  .article-faq summary {
    font-size: 17px;
  }

  .article-content .article-faq p {
    font-size: 16px;
  }

  .article-content li {
    padding-inline-start: 18px;
  }

  .article-content ol li {
    padding-inline-start: 24px;
  }

  .article-content .article-cta {
    padding: 16px 20px;
    font-size: 17px;
  }

  .article-places__title {
    font-size: 22px;
  }

  .article-places__list {
    gap: 18px 22px;
    padding: 26px 16px;
  }

  .article-content .article-places__list {
    grid-template-columns: repeat(6, max-content);
    gap: 14px;
  }

  .article-content .article-places__list span,
        .article-content .article-places__list a {
    height: 92px;
    width: 92px;
  }

  .article-content .article-places__list span,
        .article-content .article-places__list a,
        .area-places .article-places__list span,
        .area-places .article-places__list a {
    height: 96px;
    width: 96px;
    font-size: 13px;
  }

  .article-content th,
        .article-content td {
    padding: 12px 10px;
    font-size: 15px;
  }

  .article-related {
    flex-direction: row;
    gap: 20px;
    padding: 16px;
  }

  .article-related__image {
    width: 240px;
  }

  .article-content .article-related__image img {
    height: 100%;
    min-height: 180px;
  }
}

/* كارت أبيض بحواف 16px وظل خفيف */

/* الصفحة خلفيتها بيضا، فالكارت بيتحدد بخط خفيف + ظل */

/* الكارت كله كليكابل: لينك العنوان (card-link) بيتمدّ على الكارت كله (card-stretch)، والزراير اللي جوه الكارت فوقه */

.card-stretch {
  position: relative;
}

.card-stretch .card-link::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
}

/* لوجو المطور على الكارت: لينك لصفحة المطور (partials/developer-logo) — بيكبر سِنّة مع الماوس */

.dev-logo-link {
  display: block;
  flex-shrink: 0;
  border-radius: 999px;
  transition: transform 0.2s;
}

a.dev-logo-link:hover {
  transform: scale(1.06);
}

.card-stretch .area-action,
    .card-stretch .card-above {
  position: relative;
  z-index: 2;
}

.area-card {
  border: 1px solid #e4e9ef;
  border-radius: 16px;
  background-color: #fff;
  box-shadow: 0 1px 2px rgba(18, 58, 92, 0.04), 0 12px 26px -18px rgba(18, 58, 92, 0.35);
}

/* الهيدر الأزرق: تدرج من أزرق سماوي لأزرق غامق + نقط خفيفة */

/* عروض المنطقة: أول 3 عروض (موبايل سحب أفقي / ديسك توب 3 في الصف). "عرض الكل" بيفرد كل العروض تحت بعض */

.area-offers:not(.is-open) > [data-offer-extra] {
  display: none;
}

.area-offers.is-open {
  flex-direction: column;
  overflow: visible;
  scroll-snap-type: none;
}

.area-offers.is-open > * {
  width: 100%;
}

@media (min-width: 1024px) {
  .area-offers.is-open > * {
    width: auto;
  }
}

/* ---------- هيدر مؤشر شاري: أزرق غامق بسحاب ملوّن (أزرق + تركواز + دفا أصفر) وخط مؤشر طالع، وفوقه زجاج ---------- */

.index-hero {
  background-color: #1e4166;
  background-image:
            radial-gradient(72% 105% at 86% -12%, rgba(120, 186, 240, 0.78), transparent 70%),
            radial-gradient(56% 82% at 0% 104%, rgba(52, 168, 164, 0.3), transparent 70%),
            linear-gradient(165deg, #2f6fab 0%, #1f5083 50%, #1e4166 100%);
}

/* السحاب: بقع ضوء ناعمة */

.index-hero::before,
    .index-hero::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  background-image: radial-gradient(closest-side, rgba(255, 255, 255, 0.26), rgba(255, 255, 255, 0));
  pointer-events: none;
}

.index-hero::before {
  top: -40%;
  inset-inline-start: 22%;
  height: 95%;
  width: 48%;
}

.index-hero::after {
  top: -30%;
  inset-inline-end: -8%;
  height: 70%;
  width: 36%;
}

/* المحتوى فوق السحاب والخط */

.index-hero > div {
  z-index: 1;
}

.index-hero__chart {
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  height: 60%;
  pointer-events: none;
}

/* النقطة الصفرا في آخر خط المؤشر */

.index-hero__dot {
  position: absolute;
  height: 10px;
  width: 10px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background-color: #fcb424;
  box-shadow: 0 0 0 6px rgba(252, 180, 36, 0.28);
}

/* زرار "فلتر متقدم" الأصفر + عدد الشروط المتطبقة */

.index-adv-open {
  display: inline-flex;
  height: 40px;
  flex-shrink: 0;
  align-items: center;
  gap: 8px;
  border-radius: 10px;
  background-color: #fcb424;
  padding-inline: 12px;
  font-size: 13px;
  font-weight: 700;
  color: #123a5c;
  transition: background-color 0.15s ease;
}

.index-adv-open:hover {
  background-color: #ffc64d;
}

.index-adv-open__count {
  min-width: 20px;
  border-radius: 9999px;
  background-color: #123a5c;
  padding-inline: 5px;
  text-align: center;
  font-size: 11.5px;
  line-height: 20px;
  color: #ffffff;
}

/* زجاج على الخلفية الغامقة: شفاف + بلور + حافة ضوء من فوق */

.index-glass {
  border: 1px solid rgba(255, 255, 255, 0.3);
  background-color: rgba(255, 255, 255, 0.13);
  -webkit-backdrop-filter: blur(18px) saturate(1.6);
  backdrop-filter: blur(18px) saturate(1.6);
  box-shadow: 0 22px 44px -26px rgba(3, 16, 32, 0.85), inset 0 1px 0 rgba(255, 255, 255, 0.35);
}

/* متصفح من غير بلور: الزجاج أغمق شوية عشان الكلام يفضل واضح */

@supports not (((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) or (-webkit-backdrop-filter: blur(1px))) {
  .index-glass {
    background-color: rgba(18, 52, 86, 0.82);
  }
}

.area-hero {
  background-image: radial-gradient(120% 140% at 100% 0%, #4a8cc6 0%, #2f6fa6 45%, #1f5487 100%);
}

.area-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(255, 255, 255, 0.1) 1px, transparent 1.2px);
  background-size: 14px 14px;
  -webkit-mask: linear-gradient(90deg, transparent 30%, #000);
  mask: linear-gradient(90deg, transparent 30%, #000);
}

[dir="ltr"] .area-hero {
  background-image: radial-gradient(120% 140% at 0% 0%, #4a8cc6 0%, #2f6fa6 45%, #1f5487 100%);
}

[dir="ltr"] .area-hero::before {
  -webkit-mask: linear-gradient(270deg, transparent 30%, #000);
  mask: linear-gradient(270deg, transparent 30%, #000);
}

.area-hero__stats {
  background-color: rgba(10, 35, 70, 0.18);
}

/* ── app.css · جزء 6 من 16: صفحة المنطقة ولوحات الفلاتر وصفحة المطور (المصدر: resources/css/shary/app/06-areas-filters.css — عدّل هنا وشغّل tools/minify-assets.sh) */
/* درجات الألوان (بلاطات المشاريع الجديدة ودواير المناطق) */

.area-tone-navy {
  background-image: linear-gradient(135deg, #2e5e8e, #16395c);
}

.area-tone-gold {
  background-image: linear-gradient(135deg, #3a5877, #d19a36);
}

.area-tone-teal {
  background-image: linear-gradient(135deg, #2a8f84, #7fcdbe);
}

/* بلاطة مشروع جديد: الصورة تحت ودرجة اللون فوقها عشان الاسم يبان */

.area-tile__tint {
  background-image: linear-gradient(180deg, rgba(13, 36, 58, 0) 35%, rgba(13, 36, 58, 0.82) 100%);
  transition: opacity 0.2s;
}

.area-tile:hover .area-tile__tint {
  opacity: 0.8;
}

/* الخريطة الحرارية */

.area-map {
  background-color: #e8f0fb;
}

/* التلات دواير (سعر أعلى / عائد أعلى / فرصة) — صغيرين وبسيطين، وزراير + و − بتكبّرهم وتصغّرهم */

.area-map__rings {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 108px;
  aspect-ratio: 1;
  border-radius: 50%;
  transform: translate(-50%, -50%) scale(var(--zoom, 1));
  transition: transform 0.3s ease;
  /* closest-side: النسب محسوبة من نص القطر، فالتلات ألوان بياخدوا مساحة متساوية تقريبًا: أحمر في النص، أخضر، وأزرق بره */
  background: radial-gradient(circle closest-side, #d9604f 0 32%, #fff 32% 35%, #3fb386 35% 65%, #fff 65% 68%, #6baee6 68% 100%);
  box-shadow: 0 6px 16px -10px rgba(18, 58, 92, 0.45);
}

/* صورة المنطقة — موبايل: الاسم والأرقام بالأبيض على الصورة نفسها من تحت (تدريج خفيف ورا الكلام بس، من غير مربع).
       ديسك توب: شريط زجاجي بعرض الصورة */

/* خريطة جوجل جوه الكارت: الدواير فوقها في النص ومش بتمنع السحب، والرسمة وأسماء الطرق بيختفوا لما الخريطة تحمل */

.area-map__frame {
  z-index: 1;
}

.area-map.is-live > .area-map__label,
    .area-map.is-live > svg {
  display: none;
}

.area-map__frame ~ .area-map__zoom {
  z-index: 3;
}

/* الخريطة الحرارية لينك لخريطة شاري التفاعلية: كارت جوجل اللي فوق ("افتح في الخرائط") بيتقص بره الكادر — الخريطة بس */

.area-map--link .area-map__frame {
  top: -92px !important;
  height: calc(100% + 92px) !important;
  pointer-events: none;
}

.area-map--link .area-map__frame ~ .area-map__zoom {
  z-index: 10;
}

.area-map:has(.area-map__frame) .area-map__rings {
  z-index: 2;
  pointer-events: none;
  opacity: 0.85;
}

/* السهمين: الخريطة بتكبر على الشاشة كلها جوه نفس الصفحة */

.area-map.is-expanded {
  position: fixed;
  inset: 12px;
  z-index: 60;
  height: auto;
  border-radius: 16px;
  box-shadow: 0 0 0 100vmax rgba(13, 36, 58, 0.6);
}

.area-map__label {
  position: absolute;
  white-space: nowrap;
  border-radius: 9999px;
  background-color: #fff;
  padding: 4px 12px;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.5;
  box-shadow: 0 2px 6px rgba(18, 58, 92, 0.12);
}

/* السهم / + / − في نص الزرار بالظبط (الـ svg بلوك فلازم flex) */

.area-map__zoom {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  height: 34px;
  width: 34px;
  border-radius: 9px;
  background-color: #fff;
  font-size: 18px;
  font-weight: 700;
  line-height: 1;
  color: #123a5c;
  box-shadow: 0 2px 6px rgba(18, 58, 92, 0.15);
}

.area-map__zoom:hover {
  color: #1f63c6;
}

.area-map__legend-bar {
  height: 6px;
  border-radius: 9px;
  background-image: linear-gradient(90deg, #3fb39f, #6baee6 50%, #d9604f);
}

/* نسبة الزيادة (حبّة خضرا) */

.area-up {
  display: inline-block;
  white-space: nowrap;
  border-radius: 9999px;
  background-color: #e7f5f1;
  padding: 1px 8px;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.6;
  color: #1f7f72;
}

.area-bar {
  background-image: linear-gradient(90deg, #3fb39f, #1e7f72);
  transition: width 0.5s ease;
}

/* رسم سعر المتر */

.area-plot {
  position: relative;
  height: 120px;
  margin: 12px 0 4px;
  touch-action: pan-y;
}

.area-plot svg {
  position: absolute;
  inset: 0;
  height: 100%;
  width: 100%;
  overflow: visible;
}

.area-plot__grid {
  stroke: #e8edf2;
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}

.area-plot__line {
  fill: none;
  stroke: #1e7f72;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}

.area-plot__cursor {
  stroke: #9fb0c0;
  stroke-width: 1;
  stroke-dasharray: 3 3;
  vector-effect: non-scaling-stroke;
  opacity: 0;
}

.area-plot__dot {
  position: absolute;
  height: 10px;
  width: 10px;
  border-radius: 50%;
  background-color: #1e7f72;
  box-shadow: 0 0 0 2px #fff;
  transform: translate(-50%, -50%);
  pointer-events: none;
}

.area-plot__tip {
  position: absolute;
  white-space: nowrap;
  border-radius: 8px;
  background-color: #1e4166;
  padding: 3px 9px;
  font-size: 11px;
  font-weight: 600;
  line-height: 1.4;
  color: #fff;
  pointer-events: none;
}

.area-plot__tip--end {
  right: 0;
  transform: translate(0, -150%);
}

.area-plot__tip--hover {
  top: 0;
  z-index: 2;
  text-align: center;
  transform: translate(-50%, -105%);
}

.area-plot__dot--hover,
    .area-plot__tip--hover {
  display: none;
}

.area-plot.is-active .area-plot__cursor {
  opacity: 1;
}

.area-plot.is-active .area-plot__dot--hover,
    .area-plot.is-active .area-plot__tip--hover {
  display: block;
}

.area-plot.is-active .area-plot__tip--end {
  opacity: 0;
}

/* فلاتر المشاريع: قايمة اختيار بشكل زرار بسهم */

.area-filter {
  position: relative;
  display: block;
  min-width: 0;
}

.area-filter select,
    .area-filter button {
  height: 44px;
  width: 100%;
  cursor: pointer;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  white-space: nowrap;
  border-radius: 12px;
  border: 1px solid #d3dfee;
  background-color: #fff;
  padding-inline: 8px;
  font-size: 12.5px;
  font-weight: 700;
  color: #123a5c;
  box-shadow: 0 1px 2px rgba(18, 58, 92, 0.05);
  transition: border-color 0.2s, box-shadow 0.2s;
}

.area-filter select:hover,
    .area-filter select:focus,
    .area-filter button:hover,
    .area-filter button:focus-visible {
  border-color: #1f63c6;
  outline: none;
  box-shadow: 0 0 0 3px rgba(31, 99, 198, 0.12);
}

/* موبايل: الكلمة في النص ومن غير سهم عشان تبان كاملة. ديسك توب: الكلمة في الأول والسهم في الآخر */

.area-filter__chevron {
  display: none;
  position: absolute;
  inset-inline-end: 6px;
  top: 50%;
  transform: translateY(-50%);
  color: #1f63c6;
  pointer-events: none;
}

/* زرار الفلتر (المطور / المشروع / السعر) بنفس شكل القايمة */

.area-filter button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  text-align: start;
}

/* المختار جنب كلمة الزرار (اسم المنطقة / النوع / المطور ، أو السعر من–إلى): بياخد المساحة الباقية بس ويتقص بـ "…" — الزرار ما يكبرش */

.area-filter__value {
  flex: 1 1 0%;
  width: 0;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: start;
  font-weight: 600;
  color: #1f63c6;
}

.area-filter__value:empty {
  display: none;
}

/* موبايل / تابلت: الزرار ضيق — لما يبقى فيه اختيار، الكلمة صغيرة فوق والمختار تحتها (سطرين جوه نفس الزرار) */

@media (max-width: 1023px) {
  .area-filter button:has(.area-filter__value:not(:empty)) {
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 1px;
    line-height: 1.15;
  }

  .area-filter button:has(.area-filter__value:not(:empty)) > .whitespace-nowrap {
    font-size: 11px;
    font-weight: 700;
    color: #5b7590;
  }

  .area-filter button:has(.area-filter__value:not(:empty)) .area-filter__value {
    flex: none;
    width: 0;
    min-width: 100%;   /* ياخد عرض الزرار من غير ما يكبّر العمود (الاسم الطويل بيتقص بـ «…») */
    font-size: 12.5px;
    font-weight: 800;
  }
}

@media (min-width: 1024px) {
  .area-filter select,
        .area-filter button {
    justify-content: flex-start;
    padding-inline: 14px 30px;
  }

  .area-filter__chevron {
    display: block;
  }
}

/* موبايلات ضيقة جدًا: زرارين الأيقونات أصغر والمسافات أقل، والكلمات تفضل كاملة */

@media (max-width: 359px) {
  form.area-filterbar {
    grid-template-columns: repeat(3, minmax(max-content, 1fr)) 40px 40px;
    gap: 4px;
  }

  .area-filter select,
        .area-filter button {
    padding-inline: 5px;
    font-size: 12px;
  }
}

/* الشريط على قد عدد الأزرار اللي ليها اختيارات (--picks من filters.blade.php) */

form.area-filterbar[data-picks] {
  grid-template-columns: repeat(var(--picks), minmax(max-content, 1fr)) 44px 44px;
}

@media (max-width: 359px) {
  form.area-filterbar[data-picks] {
    grid-template-columns: repeat(var(--picks), minmax(max-content, 1fr)) 40px 40px;
  }
}

@media (min-width: 1024px) {
  form.area-filterbar[data-picks] {
    grid-template-columns: repeat(var(--picks), minmax(0, 1fr)) 48px auto 48px;
  }
}

/* فلتر "مشاريع المطور في المنطقة" (areas/partials/developer-filters): 3 أزرار بسهم على الموبايل كمان + زرار الترتيب بعدهم بمسافة */

.area-filterbar--developer .area-filter button {
  justify-content: flex-start;
  padding-inline: 10px 24px;
}

.area-filterbar--developer .area-filter__chevron {
  display: block;
}

form.area-filterbar--developer[data-picks] {
  grid-template-columns: repeat(var(--picks), minmax(0, 1fr)) 52px;
}

@media (min-width: 1024px) {
  form.area-filterbar--developer[data-picks] {
    grid-template-columns: repeat(var(--picks), minmax(0, 1fr)) 64px;
  }
}

@media (max-width: 359px) {
  form.area-filterbar--developer[data-picks] {
    grid-template-columns: repeat(var(--picks), minmax(0, 1fr)) 46px;
  }

  .area-filterbar--developer .area-filter button {
    padding-inline: 7px 20px;
  }
}

@media (min-width: 1024px) {
  .area-filterbar--developer .area-filter button {
    padding-inline: 14px 30px;
  }
}

.area-filter button.is-active,
    .area-filter button[aria-expanded="true"] {
  border-color: #1f63c6;
  background-color: #e8f0fb;
}

.area-filter__count {
  display: inline-flex;
  height: 18px;
  min-width: 18px;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  border-radius: 9px;
  background-color: #1e4166;
  padding: 0 5px;
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  color: #fff;
}

.area-filter__count:empty {
  display: none;
}

/* صفحة "تصفية": اختيارات + تبويبات + خانات */

.area-chip {
  display: inline-flex;
  height: 46px;
  align-items: center;
  border: 1px solid #d3dfee;
  border-radius: 999px;
  background-color: #fff;
  padding: 0 18px;
  font-size: 14.5px;
  font-weight: 500;
  line-height: 1.5;
  color: #123a5c;
  transition: background-color 0.15s, border-color 0.15s, color 0.15s;
}

.area-chip--box {
  min-width: 46px;
  justify-content: center;
  border-color: transparent;
  border-radius: 14px;
  background-color: #e8f0fb;
  padding: 0 10px;
  font-weight: 600;
}

input:checked + .area-chip {
  border-color: #1e4166;
  background-color: #1e4166;
  color: #fff;
}

input:focus-visible + .area-chip,
    .area-tabs input:focus-visible + span {
  outline: 2px solid #1f63c6;
  outline-offset: 2px;
}

/* تبويبات العرض (وحدات المطور / إعادة البيع / الإيجار): كل تبويب بياخد عرض على قد كلمته (الكلمة الطويلة تاخد مساحة أكبر) والكلمة في سطر واحد متسنترة — عربي وإنجليزي */

.area-tabs {
  display: flex;
  gap: 4px;
  border-radius: 22px;
  background-color: #e8f0fb;
  padding: 6px;
}

.area-tabs label {
  min-width: 0;
  flex: 1 1 auto;
}

.area-tabs span {
  display: flex;
  height: 48px;
  align-items: center;
  justify-content: center;
  border-radius: 16px;
  padding-inline: 8px;
  text-align: center;
  white-space: nowrap;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.3;
  color: #123a5c;
  transition: background-color 0.15s, color 0.15s;
}

@media (max-width: 379px) {
  .area-tabs span {
    padding-inline: 5px;
    font-size: 13.5px;
  }
}

.area-tabs input:checked + span {
  background-color: #1e4166;
  color: #fff;
  box-shadow: 0 6px 14px -6px rgba(30, 65, 102, 0.6);
}

.area-toggle {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
  border-radius: 999px;
  background-color: #fff;
  padding: 5px;
  box-shadow: 0 1px 3px rgba(18, 58, 92, 0.08);
}

.area-toggle span {
  display: flex;
  height: 44px;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  font-size: 15px;
  font-weight: 700;
  color: #123a5c;
  transition: background-color 0.15s, color 0.15s;
}

.area-toggle input:checked + span {
  background-color: #1e4166;
  color: #fff;
}

.area-toggle input:focus-visible + span {
  outline: 2px solid #1f63c6;
  outline-offset: 2px;
}

.area-add {
  display: flex;
  height: 50px;
  width: 100%;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 1px solid #d3dfee;
  border-radius: 999px;
  background-color: #fff;
  font-size: 15px;
  font-weight: 700;
  color: #1f63c6;
  transition: border-color 0.15s;
}

.area-add:hover,
    .area-add.is-active {
  border-color: #1f63c6;
}

.area-field {
  display: flex;
  height: 56px;
  align-items: center;
  gap: 8px;
  border: 1px solid #d3dfee;
  border-radius: 16px;
  background-color: #e8f0fb;
  padding: 0 16px;
  font-size: 14px;
  font-weight: 600;
  color: #123a5c;
}

.area-field:focus-within {
  border-color: #1f63c6;
}

.area-field input {
  min-width: 0;
  flex: 1;
  background: transparent;
  text-align: end;
  font-size: 15px;
  font-weight: 600;
  color: #123a5c;
  outline: none;
}

.area-field input[data-number] {
  text-align: start;
}

.area-field input::-moz-placeholder {
  font-weight: 500;
  color: #123a5c;
  opacity: 0.85;
}

.area-field input::placeholder {
  font-weight: 500;
  color: #123a5c;
  opacity: 0.85;
}

/* لوحة الفلتر: بتطلع من تحت */

.area-sheet {
  animation: area-sheet-up 0.28s cubic-bezier(0.2, 0.8, 0.2, 1);
}

/* كل اللوحات والفورمات اللي بتفتح فوق الصفحة (طلب المقابلة / الفلاتر / اختيار المنطقة والمطور / السعر / فلتر مؤشر شاري / المشاركة / بوب أب التطبيق):
       الصفحة بتفضل ظاهرة وراها بتغميق شفاف خفيف (من غير بلور) ، واللوحة نفسها مش بيضا صريحة: خلفية لبني هادية بتدرّج + خط خفيف بيحددها. */

[data-offer-modal] > [data-offer-close],
    [data-meeting-modal] > [data-meeting-close],
    .shary-share__dim,
    .app-pop__backdrop {
  background-color: rgba(13, 32, 51, 0.46) !important;
}

/* الفلاتر (تصفية / المنطقة / المطور / المشروع / السعر / فلتر مؤشر شاري): اللوحة بتطلع من تحت بس — من غير أي تغميق أو بلور على الصفحة.
       الطبقة الشفافة بتفضل موجودة عشان الضغط بره اللوحة يقفلها ، واللوحة متحددة بظل وخط */

[data-filter-sheet] > [data-sheet-close],
    [data-index-advanced] > [data-adv-close],
    [data-index-picker] > [data-picker-close] {
  background-color: transparent !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

[data-filter-sheet] > .area-sheet,
    [data-filter-sheet] > .meeting-panel,
    [data-index-advanced] > .area-sheet,
    [data-index-advanced] > .meeting-panel,
    [data-index-picker] > .meeting-panel {
  box-shadow: 0 -14px 44px -8px rgba(13, 32, 51, 0.42) !important;
}

/* صفحة "تصفية" الكاملة على الموبايل: لوحة طالعة من تحت — فوقها جزء من الصفحة ظاهر من غير تغميق */

@media (max-width: 1023px) {
  [data-filter-sheet="all"] {
    background-color: transparent;
  }

  [data-filter-sheet="all"] > .area-sheet {
    top: calc(7vh / var(--z, 1)) !important;
    overflow: hidden;
    overflow: clip;               /* clip مش hidden: الموبايل ما يقدرش يسكرول اللوحة نفسها لما اختيار يتعلّم (كانت بتبان فاضية) */
    border-radius: 28px 28px 0 0;
  }
}

/* الاختيار المخفي (sr-only) يفضل جوه الزرار بتاعه: غير كده الموبايل بيسكرول اللوحة لمكانه البعيد لما يتعلّم */

label:has(> input.sr-only) {
  position: relative;
}

/* خلفية اللوحات: لبني هادي بتدرّج بدل الأبيض الصريح (الخانات والكروت اللي جواها بتفضل بيضا فبتبان) */

[data-meeting-modal] > .meeting-panel,
    [data-offer-modal] > .meeting-panel,
    [data-filter-sheet] > .area-sheet,
    [data-filter-sheet] > .meeting-panel,
    [data-index-advanced] > .area-sheet,
    [data-index-advanced] > .meeting-panel,
    [data-index-picker] > .meeting-panel,
    .shary-share__panel {
  border: 1px solid #c6d6ea;
  background-color: #e8f0fb !important;
  background-image: linear-gradient(180deg, #e3edf9 0, #eef4fb 130px, #f6f9fd 100%) !important;
  box-shadow: 0 -18px 44px -18px rgba(13, 32, 51, 0.5);
}

[data-filter-sheet] > .area-sheet:not(.inset-0) {
  border-bottom-width: 0;
}

@keyframes area-sheet-up {
  from {
    transform: translateY(100%);
  }

  to {
    transform: translateY(0);
  }
}

/* قسم في صفحة "تصفية": على الديسك توب كارت أبيض جوه عمودين */

.area-fsec {
  margin-top: 28px;
}

@media (min-width: 1024px) {
  .area-fsec {
    margin-top: 0;
    margin-bottom: 20px;
    -moz-column-break-inside: avoid;
         break-inside: avoid;
    border: 1px solid #e4e9ef;
    border-radius: 20px;
    background-color: #fff;
    padding: 22px 24px 24px;
  }
}

/* شريط السعر بطرفين */

.area-range {
  position: relative;
  height: 30px;
}

.area-range__rail {
  position: absolute;
  inset-inline: 13px;
  top: 50%;
  height: 6px;
  margin-top: -3px;
  border-radius: 3px;
  background-color: #dbe6f6;
}

.area-range__fill {
  position: absolute;
  top: 0;
  bottom: 0;
  inset-inline: 0;
  border-radius: 3px;
  background-color: #1e4166;
}

.area-range input[type="range"] {
  position: absolute;
  inset: 0;
  z-index: 2;
  height: 100%;
  width: 100%;
  margin: 0;
  -moz-appearance: none;
       appearance: none;
  -webkit-appearance: none;
  background: transparent;
  pointer-events: none;
}

.area-range input[type="range"]::-webkit-slider-runnable-track {
  height: 30px;
  background: transparent;
}

.area-range input[type="range"]::-moz-range-track {
  height: 30px;
  background: transparent;
}

.area-range input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  height: 26px;
  width: 26px;
  margin-top: 2px;
  cursor: pointer;
  border: 3px solid #fff;
  border-radius: 50%;
  background-color: #1e4166;
  box-shadow: 0 1px 5px rgba(18, 58, 92, 0.35);
  pointer-events: auto;
}

.area-range input[type="range"]::-moz-range-thumb {
  height: 20px;
  width: 20px;
  cursor: pointer;
  border: 3px solid #fff;
  border-radius: 50%;
  background-color: #1e4166;
  box-shadow: 0 1px 5px rgba(18, 58, 92, 0.35);
  pointer-events: auto;
}

@media (prefers-reduced-motion: reduce) {
  .area-sheet {
    animation: none;
  }
}

/* زراير الصورة في كارت المشروع (قارن / مفضلة / شارك) */

.area-action {
  display: flex;
  height: 32px;
  width: 32px;
  align-items: center;
  justify-content: center;
  border-radius: 9px;
  background-color: #fff;
  color: #123a5c;
  box-shadow: 0 2px 6px rgba(18, 58, 92, 0.16);
  transition: transform 0.2s, color 0.2s;
}

.area-action:hover {
  transform: translateY(-1px);
  color: #1f63c6;
}

.area-action[data-favorite-toggle][aria-pressed="true"] {
  color: #dc2626;
}

.area-action[data-compare-toggle][aria-pressed="true"] {
  background-color: #1e4166;
  color: #fff;
}

/* نصوص الكروت */

.area-text h3 {
  margin-bottom: 6px;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.5;
}

.area-text p {
  margin-bottom: 8px;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.8;
  color: #5b6b7c;
}

.area-dots {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px 12px;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.7;
}

.area-dots li::before {
  content: "";
  display: inline-block;
  height: 6px;
  width: 6px;
  margin-inline-end: 8px;
  border-radius: 50%;
  background-color: #3fb39f;
  vertical-align: middle;
}

.area-faq summary::-webkit-details-marker {
  display: none;
}

/* علامة + جنب السؤال: لما السؤال يتفتح بتلف وتبقى X */

.area-faq summary svg {
  transition: transform 0.2s ease;
}

.area-faq[open] summary svg {
  transform: rotate(45deg);
}

/* التواصل السريع */

.area-ai {
  border: 2px solid transparent;
  background: linear-gradient(#fff, #fff) padding-box, linear-gradient(180deg, #1f5fc4, #5aa9ee) border-box;
}

/* ---- صفحة المطور ---- */

.dev-badge {
  border: 1px solid #cfe9e2;
  background-color: #e7f5f1;
}

.dev-bar {
  background-image: linear-gradient(90deg, #62c5b4, #1f7f72);
}

[dir="ltr"] .dev-bar {
  background-image: linear-gradient(270deg, #62c5b4, #1f7f72);
}

.dev-count {
  background-color: #e7f5f1;
  color: #1f7f72;
}

.dev-count--building {
  background-color: #fdf1dc;
  color: #c8921f;
}

.dev-count--last {
  background-color: #e8f0fb;
  color: #123a5c;
}

/* مناطق المطور بعد "عرض الكل" */

.dev-areas.is-open {
  display: grid;
  grid-template-columns: 1fr 1fr;
  overflow: visible;
  margin-inline: 0;
  padding-inline: 0;
}

.dev-areas.is-open > a {
  min-width: 0;
}

/* نص "عن المطور" */

.dev-about {
  font-size: 14px;
  font-weight: 500;
  line-height: 1.95;
  color: #5b6b7c;
}

.dev-about.is-collapsed {
  max-height: 520px;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(#000 78%, transparent);
  mask-image: linear-gradient(#000 78%, transparent);
}

.dev-about b {
  font-weight: 700;
  color: #123a5c;
}

.dev-about h3 {
  margin: 14px 0 6px;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.5;
  color: #123a5c;
}

.dev-about li {
  position: relative;
  padding: 4px 0;
  padding-inline-start: 20px;
}

.dev-about li::before {
  content: "";
  position: absolute;
  inset-inline-start: 2px;
  top: 17px;
  height: 6px;
  width: 6px;
  border-radius: 50%;
  background-color: #3aaa9b;
}

/* لينكات المحتوى (Backlinks) بلون أزرق واحد في كل الصفحات */

.dev-about a {
  font-weight: 700;
  color: #1f63c6;
}

.dev-about a:hover {
  text-decoration: underline;
}

@media (min-width: 1024px) {
  .dev-about {
    font-size: 15px;
  }

  .dev-about.is-collapsed {
    max-height: 1010px;
  }

  .dev-about h3 {
    margin-top: 18px;
    font-size: 18px;
  }

  .dev-areas.is-open {
    grid-template-columns: repeat(5, 1fr);
  }
}

/* رسالة صغيرة تحت الشاشة (تم نسخ الرابط) */

.shary-toast {
  position: fixed;
  bottom: 96px;
  left: 50%;
  z-index: 80;
  max-width: calc(calc(100vw / var(--z, 1)) - 32px);
  transform: translate(-50%, 12px);
  border-radius: 999px;
  background-color: #0f2f4b;
  padding: 10px 18px;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.5;
  color: #fff;
  opacity: 0;
  pointer-events: none;
  box-shadow: 0 10px 26px -10px rgba(15, 47, 75, 0.6);
  transition: opacity 0.2s, transform 0.2s;
}

.shary-toast.is-shown {
  transform: translate(-50%, 0);
  opacity: 1;
}

/* ── app.css · جزء 7 من 16: صفحة نتايج البحث ، فورم الاستشارة ، شريط الملخص ، بوب أب «قريبًا» ، صفحة المشروع / الوحدة (المصدر: resources/css/shary/app/07-search-property.css — عدّل هنا وشغّل tools/minify-assets.sh) */
/* ====================== صفحة نتايج البحث ====================== */

/* موبايل: الفورم وراس الصفحة من غير صندوق (contents) عشان خانة البحث تفضل ثابتة تحت الهيدر طول النتايج */

.search-layout > form,
    .search-head {
  display: contents;
}

.search-bar {
  position: sticky;
  top: 72px;
  z-index: 20;
  display: flex;
  gap: 10px;
  margin-inline: -20px;
  background-color: #fff;
  padding: 10px 20px;
}

.search-input {
  display: flex;
  height: 48px;
  min-width: 0;
  flex: 1;
  align-items: center;
  gap: 10px;
  border: 1px solid #e4e9ef;
  border-radius: 16px;
  background-color: #f6f9fd;
  padding-inline: 14px;
  transition: border-color 0.15s, box-shadow 0.15s;
}

.search-input:focus-within {
  border-color: #1f63c6;
  box-shadow: 0 0 0 3px rgba(31, 99, 198, 0.12);
}

.search-input input {
  min-width: 0;
  flex: 1;
  background: transparent;
  font-size: 15px;
  font-weight: 600;
  color: #123a5c;
  outline: none;
}

.search-input input::-moz-placeholder {
  font-weight: 500;
  color: #8a99a8;
}

.search-input input::placeholder {
  font-weight: 500;
  color: #8a99a8;
}

.search-input input::-webkit-search-cancel-button {
  display: none;
}

/* خانة البحث في الموقع كله (صفحة البحث + فوق صفحات المشروع / الوحدة / عرض الكل): كبسولة بيضا واحدة زي بحث الصفحة الرئيسية —
       دايرة البحث الكحلي يمين ، الكتابة في النص ، وزرار الفلتر المتقدم جوه الكبسولة شمال (الأماكن ثابتة في العربي والإنجليزي) */

.search-bar .search-input {
  height: 54px;
  border-color: #e3eaf1;
  border-radius: 999px;
  background-color: #fff;
  padding-left: 58px;
  padding-right: 6px;
  box-shadow: 0 10px 24px -14px rgba(18, 58, 92, 0.5);
  direction: rtl;
}

.search-bar .search-input > svg {
  box-sizing: content-box;
  height: 20px;
  width: 20px;
  cursor: pointer;
  border-radius: 999px;
  background-color: #123a5c;
  padding: 11px;
  color: #fff;
  transition: background-color 0.15s, transform 0.15s;
}

/* دايرة البحث زرار: الماوس عليها إيد والضغط عليها بيبحث (js/shary/site-chrome.js) */

.search-bar .search-input > svg:hover {
  background-color: #1e4166;
}

.search-bar .search-input > svg:active {
  transform: scale(0.94);
}

[lang="en"] .search-bar .search-input input,
    [dir="ltr"] .search-bar .search-input input {
  direction: ltr;
  text-align: left;
}

.search-bar > [data-sheet-open],
    .search-bar > [data-filter-modal-open] {
  position: absolute;
  top: 50%;
  left: 26px;
  height: 42px;
  width: 42px;
  border-radius: 999px;
  box-shadow: 0 4px 10px -6px rgba(18, 58, 92, 0.45);
  transform: translateY(-50%);
}

/* فوق صفحات المشروع / الوحدة / عرض الكل: الخانة جزء من الصفحة (مش ثابتة) */

.search-bar.static {
  position: relative;
  top: auto;
  margin-inline: 0;
  padding: 0;
}

.search-bar.static > [data-filter-modal-open] {
  left: 6px;
}

.search-bar.static .search-suggest {
  inset-inline: 0;
  top: calc(100% + 6px);
}

.search-suggest__sub {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 12.5px;
  font-weight: 600;
  color: #5b6b7c;
}

.search-suggest__none {
  padding: 14px 12px;
  text-align: center;
  font-size: 13.5px;
  font-weight: 600;
  color: #5b6b7c;
}

@media (min-width: 1024px) {
  .search-bar .search-input {
    padding-left: 16px;
  }

  /* ديسك توب: خانة البحث بعرض المحتوى اللي تحتها كله (الإعلان / الكروت / الصور) — مش أصغر منه */

  .search-bar.static .search-input {
    max-width: none;
    padding-left: 58px;
  }

  .search-bar.static {
    max-width: none;
  }
}

/* اقتراحات البحث تحت الخانة (منطقة / مطور / كمبوند) */

.search-suggest {
  position: absolute;
  inset-inline: 20px;
  top: calc(100% - 4px);
  z-index: 30;
  max-height: min(calc(60vh / var(--z, 1)), 440px);
  overflow-y: auto;
  border: 1px solid #e4e9ef;
  border-radius: 16px;
  background-color: #fff;
  padding: 6px;
  box-shadow: 0 18px 40px -16px rgba(18, 58, 92, 0.45);
}

.search-suggest[hidden] {
  display: none;
}

.search-suggest__row {
  display: flex;
  width: 100%;
  min-height: 56px;
  align-items: center;
  gap: 12px;
  border-radius: 12px;
  padding: 6px 10px;
  text-align: start;
}

.search-suggest__row:hover,
    .search-suggest__row.is-active {
  background-color: #e8f0fb;
}

.search-suggest__thumb {
  display: flex;
  flex-shrink: 0;
}

.search-suggest__thumb > * {
  width: 40px !important;
  height: 40px !important;
}

.search-suggest__name {
  min-width: 0;
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 15px;
  font-weight: 700;
  color: #123a5c;
}

.search-suggest__kind {
  flex-shrink: 0;
  border-radius: 999px;
  background-color: #e8f0fb;
  padding: 3px 10px;
  font-size: 12px;
  font-weight: 600;
  color: #1f63c6;
}

.search-quick {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 2px;
}

.search-chip {
  display: flex;
  height: 40px;
  flex-shrink: 0;
  align-items: center;
  gap: 6px;
  border: 1px solid transparent;
  border-radius: 12px;
  background-color: #e8f0fb;
  padding-inline: 12px;
  font-size: 13.5px;
  font-weight: 700;
  white-space: nowrap;
  color: #123a5c;
}

.search-chip.is-active,
    .search-chip[aria-expanded="true"] {
  border-color: #1f63c6;
  background-color: #e8f0fb;
}

.search-chip .area-filter__count:empty {
  display: none;
}

.search-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 14px;
}

.search-title__text {
  display: flex;
  min-width: 0;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 2px 10px;
}

.search-subs {
  margin-top: 10px;
  padding-bottom: 4px;
}

.search-notice {
  margin-top: 10px;
}

.search-results {
  margin-top: 14px;
}

/* زراير فوق النتايج (ديسك توب): عرض الخريطة / التحويل بين الوحدات والكمبوندات */

.search-tool {
  display: flex;
  height: 48px;
  align-items: center;
  gap: 8px;
  border: 1px solid #e4e9ef;
  border-radius: 12px;
  background-color: #fff;
  padding-inline: 16px;
  font-size: 14px;
  font-weight: 700;
  white-space: nowrap;
  color: #123a5c;
  transition: border-color 0.15s, color 0.15s;
}

.search-tool:hover {
  border-color: #1f63c6;
  color: #1f63c6;
}

/* لوحة الفلتر السريع (موبايل) */

.search-section > .area-fsec:first-child {
  margin-top: 10px;
}

/* بانر Shary AI بين الكروت */

/* لو مفيش نتايج: رسالة "مفيش نتايج" بس، من غير سطر التحميل */

[data-results-empty]:not([class~="hidden"]) ~ .search-more {
  display: none;
}

/* نص بيتقصّر ويتفرد (مفتوح في الأول): وهو مقفول بيظهر أول كام سطر وآخرهم بيبهت */

.shary-collapsible.is-collapsed {
  max-height: 124px;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(#000 55%, transparent);
  mask-image: linear-gradient(#000 55%, transparent);
}

/* نص قصير (عن الوحدة): وهو مقفول سطرين بس */

.shary-collapsible--short.is-collapsed {
  max-height: 60px;
}

.shary-collapsible__toggle {
  margin-top: 10px;
  display: inline-flex;
  height: 40px;
  align-items: center;
  gap: 6px;
  border-radius: 9999px;
  border: 1px solid #d3dfee;
  background-color: #ffffff;
  padding-inline: 16px;
  font-size: 13.5px;
  font-weight: 700;
  color: #123a5c;
  transition: border-color 0.15s ease, color 0.15s ease;
}

.shary-collapsible__toggle:hover {
  border-color: #1f63c6;
  color: #1f63c6;
}

.shary-collapsible__toggle svg {
  transition: transform 0.2s ease;
}

.shary-collapsible__toggle[aria-expanded="false"] svg {
  transform: rotate(180deg);
}

/* وصف المشروع الطويل (about.html — زي الموقع الحالي): عناوين + فقرات + نقط + لينكات */

.prop-about {
  font-size: 14.5px;
  font-weight: 500;
  line-height: 1.95;
  color: #5b6b7c;
}

.prop-about > * + * {
  margin-top: 10px;
}

/* ترتيب العناوين جوه الوصف: <h2> عنوان رئيسي ، <h3> عنوان فرعي ، <h4> عنوان صغير — اسم المشروع فوق هو الـ <h1> */

.prop-about h2,
    .prop-about h3,
    .prop-about h4 {
  font-weight: 800;
  line-height: 1.5;
  color: #123a5c;
}

.prop-about h2 {
  margin-top: 28px;
  font-size: 19px;
}

.prop-about h3 {
  margin-top: 20px;
  font-size: 16.5px;
}

.prop-about h4 {
  margin-top: 16px;
  font-size: 15px;
}

.prop-about .content-cta {
  margin-block: 18px;
}

.prop-about .content-cta a {
  font-weight: 700;
  color: #ffffff;
}

.prop-about .content-cta a:hover {
  text-decoration: none;
}

.prop-about .content-cta .content-cta__button--meeting {
  color: #123a5c;
}

.prop-about > :first-child {
  margin-top: 0;
}

.prop-about ul,
    .prop-about ol {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding-inline-start: 22px;
}

.prop-about ul {
  list-style: disc;
}

.prop-about ol {
  list-style: decimal;
}

.prop-about li::marker {
  color: #2a9d8f;
}

.prop-about a {
  font-weight: 700;
  color: #1f63c6;
}

.prop-about a:hover {
  text-decoration: underline;
}

.prop-about strong,
    .prop-about b {
  font-weight: 700;
  color: #123a5c;
}

@media (min-width: 1024px) {
  .prop-about {
    font-size: 16px;
  }

  .prop-about h2 {
    margin-top: 34px;
    font-size: 22px;
  }

  .prop-about h3 {
    margin-top: 24px;
    font-size: 18.5px;
  }

  .prop-about h4 {
    margin-top: 18px;
    font-size: 16.5px;
  }

  /* العمود الجانبي (فورم الاستشارة + طلب مقابلة + اتصال / واتساب): ثابت جنب المحتوى تحت شريط الملخص وأنت نازل — زي الموقع الحالي */

  .prop-aside--stick {
    position: sticky;
    top: calc(var(--prop-header, 76px) + 147px);
  }

  /* صفحة الوحدة: الأقسام كلها في العمود الأول (كل قسم في صفه --prop-row) ، والفورم في العمود التاني ممتد جنبهم لآخر قسم — فبيفضل ثابت وأنت نازل */

  .prop-main-row {
    grid-column: 1 / 2;
    grid-row-start: var(--prop-row);
  }

  .prop-aside-cell {
    grid-column: 2 / 3;
    grid-row-start: 3;
    align-self: stretch;
  }
}

/* ---- فورم الاستشارة (partials/consultation-form): نفس شكل فورم الهوم بيج في كل الصفحات ---- */

.cform {
  display: flex;
  width: 100%;
  flex-direction: column;
  gap: 10px;
  border: 1px solid #d3dfee;
  border-radius: 10px;
  background-image: linear-gradient(180deg, #eef5fb 0%, #e5edf6 100%);
  padding: 20px;
  color: #123a5c;
  box-shadow: 0 2px 8px rgba(20, 60, 90, 0.08);
}

.cform__head {
  margin-bottom: 4px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.cform__icon {
  margin-bottom: 4px;
  color: #1e4166;
}

.cform__title {
  font-size: 18px;
  font-weight: 800;
  line-height: 1.5;
  color: #123a5c;
}

.cform__kinds {
  font-size: 16px;
  font-weight: 700;
  line-height: 1.5;
  color: #123a5c;
}

.cform__desc {
  font-size: 12px;
  font-weight: 500;
  line-height: 1.6;
  color: #5b6b7c;
}

.cform__field {
  display: flex;
  width: 100%;
  flex-direction: column;
  gap: 4px;
}

.cform__field > span:first-child {
  font-size: 14px;
  font-weight: 700;
  line-height: 1.5;
  color: #0d2033;
}

.cform__field > span:first-child b {
  font-weight: 700;
  color: #d35454;
}

.cform input[type="text"],
    .cform select,
    .cform textarea,
    .cform__phone {
  width: 100%;
  border: 0;
  border-radius: 6px;
  background-color: #fff;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.4;
  color: #123a5c;
  outline: none;
}

.cform input[type="text"],
    .cform select {
  height: 40px;
  padding: 0 12px;
}

.cform select {
  -webkit-appearance: none;
  -moz-appearance: none;
       appearance: none;
  cursor: pointer;
}

.cform textarea {
  height: 70px;
  resize: none;
  padding: 10px 12px;
}

.cform__phone {
  display: flex;
  height: 40px;
  align-items: center;
}

.cform__phone input {
  height: 100%;
  min-width: 0;
  flex: 1;
  border: 0;
  border-radius: 6px;
  background-color: transparent;
  padding: 0 12px;
  font-size: 16px;
  font-weight: 600;
  color: #123a5c;
  outline: none;
}

.cform input::-moz-placeholder, .cform textarea::-moz-placeholder {
  font-weight: 500;
  color: #8a99a8;
}

.cform input::placeholder,
    .cform textarea::placeholder {
  font-weight: 500;
  color: #8a99a8;
}

.cform input[type="text"]:focus,
    .cform select:focus,
    .cform textarea:focus,
    .cform__phone:focus-within {
  box-shadow: 0 0 0 2px rgba(30, 65, 102, 0.35);
}

.cform__buttons {
  margin-top: 6px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.cform__btn {
  display: flex;
  height: 40px;
  width: 90%;
  cursor: pointer;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border-radius: 999px;
  background-image: linear-gradient(to bottom, #39749e 0%, #245a80 25%, #12466d 55%, #0b3b60 100%);
  font-size: 15px;
  font-weight: 800;
  line-height: 1.2;
  color: #fff;
  box-shadow: inset 0 1px 2px rgba(255, 255, 255, 0.35), inset 0 -2px 3px rgba(0, 20, 40, 0.35), 0 4px 6px rgba(5, 42, 70, 0.28);
  transition: transform 0.15s ease, filter 0.15s ease;
}

.cform__btn:hover {
  filter: brightness(1.08);
  transform: translateY(-1px);
}

/* ديسك توب: الفورم بمقاس مريح للعين — خانات أعلى (50px) وخط أكبر وبولد ، والكارت نفسه أعرض (480px) */

@media (min-width: 1024px) {
  .cform {
    gap: 14px;
    border-radius: 16px;
    padding: 28px 28px 26px;
  }

  .cform__title {
    font-size: 23px;
    font-weight: 800;
  }

  .cform__kinds {
    font-size: 18.5px;
  }

  .cform__desc {
    font-size: 15px;
  }

  .cform__field {
    gap: 6px;
  }

  .cform__field > span:first-child {
    font-size: 15.5px;
  }

  .cform input[type="text"],
        .cform select,
        .cform__phone {
    height: 50px;
    border-radius: 10px;
  }

  .cform input[type="text"],
        .cform select,
        .cform textarea,
        .cform__phone input {
    font-size: 16.5px;
  }

  .cform textarea {
    height: 96px;
    border-radius: 10px;
  }

  .cform__buttons {
    gap: 10px;
    margin-top: 4px;
  }

  .cform__btn {
    height: 50px;
    font-size: 16.5px;
  }

  .cform {
    padding: 22px 24px;
  }

  .cform input[type="text"],
        .cform select,
        .cform textarea,
        .cform__phone input {
    font-size: 14.5px;
  }
}

/* شاشات اللاب توب القصيرة: الفورم الثابت (صفحة المشروع / الوحدة / المقال) بيتضغط سِنّة عشان الزراير تفضل باينة وهو ثابت */

@media (min-width: 1024px) and (max-height: 840px) {
  .prop-aside--stick-compact .cform,
        [data-stick-under-header] .cform {
    gap: 6px;
    padding: 12px 20px;
  }

  [data-stick-under-header] .cform__icon {
    height: 24px;
    width: 24px;
    margin-bottom: 0;
  }

  [data-stick-under-header] .cform__title {
    font-size: 16px;
  }

  [data-stick-under-header] .cform__kinds {
    font-size: 14px;
  }

  [data-stick-under-header] .cform__desc {
    display: none;
  }

  [data-stick-under-header] .cform__field {
    gap: 2px;
  }

  [data-stick-under-header] .cform__field > span:first-child {
    font-size: 13px;
  }

  [data-stick-under-header] .cform input[type="text"],
        [data-stick-under-header] .cform select,
        [data-stick-under-header] .cform__phone,
        [data-stick-under-header] .cform__btn {
    height: 36px;
  }

  [data-stick-under-header] .cform textarea {
    height: 46px;
    padding-top: 8px;
  }

  [data-stick-under-header] .cform__buttons {
    margin-top: 4px;
    gap: 6px;
  }
}

/* الفورم الثابت في صفحة المشروع / الوحدة بحجمه الطبيعي دايمًا (من غير تصغير ولا ضغط للخانات).
       لو الشاشة قصيرة والفورم أطول من المساحة اللي تحت شريط الملخص: بيتحرك مع الصفحة لحد ما آخره يبان وأنت نازل (أو أوله وأنت طالع) وبعدين يثبت — js/shary/property-page.js */

/* ====================== صفحة الوحدة + صفحة المشروع ====================== */

/* سطر آخر الفوتر: حقوق النشر + الروابط في سطر واحد */

.site-footer__bottom {
  gap: 20px;
  font-size: 13px;
}

.site-footer__links {
  gap: 14px;
}

@media (min-width: 1100px) {
  .site-footer__bottom {
    font-size: 14px;
  }

  .site-footer__links {
    gap: 20px;
  }
}

/* شريط الملخص: موبايل — اللوجو + العنوان + الزراير، وتحتهم الأسعار. ديسك توب — سطر واحد ثابت تحت الهيدر وفي آخره اتصال / واتساب */

/* الشريط ثابت تحت الهيدر وأنت نازل (js/shary/property-page.js بيحط top): على الموبايل سطر السعر هو اللي بيفضل ظاهر */

.prop-bar {
  position: sticky;
  top: auto;
  z-index: 25;
  background-color: #fff;
  padding-top: 20px;
  padding-bottom: 12px;
  transition: box-shadow 0.2s ease;
}

.prop-bar.is-stuck {
  box-shadow: 0 12px 18px -14px rgba(18, 58, 92, 0.4);
}

.prop-bar__in {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  grid-template-areas: "logo head actions" "prices prices prices";
  align-items: center;
  -moz-column-gap: 12px;
       column-gap: 12px;
  row-gap: 16px;
}

.prop-bar__logo {
  grid-area: logo;
  display: block;
}

.prop-bar__head {
  grid-area: head;
  min-width: 0;
}

.prop-bar__actions {
  grid-area: actions;
  display: flex;
  align-self: start;
  gap: 6px;
}

/* صفحة المشروع على الموبايل: المكان في سطر واحد بعرض الصف، وقصاده زرار "متابعة" تحت أزرار المقارنة / المفضلة / المشاركة */

@media (max-width: 1023px) {
  .prop-bar--project .prop-bar__in {
    grid-template-areas: "logo head actions" "loc loc loc" "prices prices prices";
    row-gap: 10px;
  }

  .prop-bar--project .prop-bar__head {
    display: contents;
  }

  .prop-bar--project .prop-bar__head > div:first-child {
    grid-area: head;
    min-width: 0;
  }

  /* المكان والزرار في نفس الخانة: المكان بعرض الصف (وسايب مكان الزرار) والزرار في آخر الصف */

  .prop-bar--project .prop-bar__head > p {
    grid-area: loc;
    min-width: 0;
    padding-inline-end: 92px;
  }

  .prop-bar--project .prop-bar__head > p > span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .prop-bar--project .prop-bar__head > .prop-follow {
    grid-area: loc;
    align-self: center;
    justify-self: end;
  }

  .prop-bar--project .prop-bar__prices {
    margin-top: 6px;
  }
}

/* ديسك توب: زرار المتابعة جنب اسم المشروع والمكان تحتهم */

@media (min-width: 1024px) {
  .prop-bar--project .prop-bar__head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    -moz-column-gap: 10px;
         column-gap: 10px;
    row-gap: 2px;
  }

  .prop-bar--project .prop-bar__head > .prop-follow {
    order: 2;
  }

  .prop-bar--project .prop-bar__head > p {
    order: 3;
    flex-basis: 100%;
  }
}

.prop-bar__prices {
  grid-area: prices;
  min-width: 0;
}

.prop-bar__contact {
  display: none;
}

.prop-bar__meeting {
  display: none;
}

/* بوب أب "قريبًا" (Coming Soon): كارت أبيض هادي في نص الشاشة — أيقونة المخطط لما الصورة لسه ما اترفعتش */

.soon-pop {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.soon-pop[hidden] {
  display: none;
}

.soon-pop__dim {
  position: absolute;
  inset: 0;
  background-color: rgba(18, 58, 92, 0.55);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
  opacity: 0;
  transition: opacity 0.22s ease;
}

.soon-pop__card {
  position: relative;
  width: 100%;
  max-width: 360px;
  border-radius: 26px;
  background-color: #fff;
  padding: 30px 24px 22px;
  text-align: center;
  box-shadow: 0 30px 60px -24px rgba(18, 58, 92, 0.55);
  opacity: 0;
  transform: translateY(14px) scale(0.97);
  transition: opacity 0.22s ease, transform 0.22s ease;
}

.soon-pop.is-open .soon-pop__dim {
  opacity: 1;
}

.soon-pop.is-open .soon-pop__card {
  opacity: 1;
  transform: none;
}

.soon-pop__close {
  position: absolute;
  inset-inline-end: 14px;
  top: 14px;
  display: flex;
  height: 34px;
  width: 34px;
  align-items: center;
  justify-content: center;
  border-radius: 9999px;
  background-color: #e8f0fb;
  color: #123a5c;
}

.soon-pop__icon {
  margin-inline: auto;
  display: flex;
  height: 68px;
  width: 68px;
  align-items: center;
  justify-content: center;
  border-radius: 9999px;
  background-color: #e8f0fb;
  color: #1f63c6;
}

.soon-pop__eyebrow {
  margin-top: 16px;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #e9a23b;
}

.soon-pop__title {
  margin-top: 4px;
  font-size: 21px;
  font-weight: 700;
  line-height: 1.5;
  color: #123a5c;
}

.soon-pop__text {
  margin-top: 6px;
  font-size: 14.5px;
  font-weight: 500;
  line-height: 1.8;
  color: #5b6b7c;
}

.soon-pop__actions {
  margin-top: 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.soon-pop__wa,
    .soon-pop__ok {
  display: flex;
  height: 50px;
  width: 100%;
  align-items: center;
  justify-content: center;
  gap: 9px;
  border-radius: 14px;
  font-size: 15.5px;
  font-weight: 700;
  line-height: 1.5;
}

.soon-pop__wa {
  background-color: #4dc35a;
  color: #fff;
}

.soon-pop__ok {
  border: 1.5px solid #123a5c;
  background-color: #fff;
  color: #123a5c;
}

/* سطر الاسم المصغّر: للشريط الثابت على الموبايل بس */

.prop-bar__mini {
  display: none;
}

/* زرار متابعة المشروع جنب الاسم: كبسولة بإطار، ولما العميل يتابع بتتلوّن كحلي وعليها علامة صح */

.prop-follow {
  display: inline-flex;
  height: 30px;
  align-items: center;
  gap: 5px;
  border: 1.5px solid #123a5c;
  border-radius: 9999px;
  padding-inline: 12px;
  font-size: 12.5px;
  font-weight: 700;
  line-height: 1;
  color: #123a5c;
  white-space: nowrap;
  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.prop-follow:hover {
  border-color: #1f63c6;
  color: #1f63c6;
}

.prop-follow__check {
  display: none;
}

.prop-follow[aria-pressed="true"] {
  border-color: #123a5c;
  background-color: #123a5c;
  color: #fff;
}

.prop-follow[aria-pressed="true"] .prop-follow__plus {
  display: none;
}

.prop-follow[aria-pressed="true"] .prop-follow__check {
  display: block;
}

/* زراير قارن / مفضلة / شارك على خلفية بيضا: بإطار */

.prop-action {
  height: 38px;
  width: 38px;
  border: 1.5px solid #123a5c;
  border-radius: 11px;
  box-shadow: none;
}

.prop-action:hover {
  border-color: #1f63c6;
}

.prop-action[data-favorite-toggle][aria-pressed="true"] {
  border-color: #dc2626;
}

/* السعر + العائد على الاستثمار */

.prop-pill {
  display: inline-flex;
  min-height: 50px;
  align-items: center;
  gap: 6px;
  border: 1px solid #e4e9ef;
  border-radius: 9999px;
  background-color: #fff;
  padding: 6px 14px;
  white-space: nowrap;
  box-shadow: 0 1px 2px rgba(18, 58, 92, 0.04), 0 10px 22px -16px rgba(18, 58, 92, 0.35);
}

.prop-pill--price {
  flex: 1 1 auto;
  justify-content: center;
}

.prop-pill--roi {
  flex: 0 1 auto;
  justify-content: center;
  border-color: #cfe9e2;
  background-color: #e7f5f1;
  color: #1f7f72;
  box-shadow: none;
}

/* سعر المطور | سعر إعادة البيع: موبايل كارت بعمودين — ديسك توب جنب بعض وبينهم خط */

.prop-prices {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border: 1px solid #e4e9ef;
  border-radius: 16px;
  background-color: #fff;
  box-shadow: 0 1px 2px rgba(18, 58, 92, 0.04), 0 12px 26px -18px rgba(18, 58, 92, 0.35);
}

.prop-prices > div {
  padding: 14px 10px;
  text-align: center;
}

.prop-prices > div + div {
  border-inline-start: 1px solid #e4e9ef;
}

.prop-prices dt {
  font-size: 12px;
  font-weight: 600;
  line-height: 1.5;
  color: #5b6b7c;
}

.prop-prices dd {
  margin-top: 2px;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: center;
  -moz-column-gap: 4px;
       column-gap: 4px;
  line-height: 1.35;
}

.prop-prices dd b {
  font-size: 18px;
  font-weight: 800;
}

.prop-prices dd span {
  font-size: 11.5px;
  font-weight: 600;
  color: #5b6b7c;
}

.prop-prices dd small {
  font-size: 12.5px;
  font-weight: 600;
  color: #8a99a8;
}

/* صفحة الوحدة على الموبايل: من غير لوجو المطور في سطر العنوان (زي التطبيق) */

.prop-bar--unit .prop-bar__logo {
  display: none;
}

.prop-bar--unit .prop-bar__in {
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "head actions" "prices prices";
}

/* موبايل (الوحدة والمشروع): العنوان سطر واحد بعرض الصف — من غير ما أزرار قارن / مفضلة / شارك تزاحمه.
       الصف الأول: (لوجو المطور في المشروع) + العنوان ، تحته المكان ، وبعدهم صف: الكود + متابعة ... وقصادهم قارن / مفضلة / شارك ، وبعده الأسعار */

@media (max-width: 1023px) {
  .prop-bar .prop-bar__in {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    -moz-column-gap: 8px;
         column-gap: 8px;
    row-gap: 6px;
  }

  .prop-bar .prop-bar__head,
        .prop-bar .prop-bar__head > div:first-child {
    display: contents;
  }

  .prop-bar .prop-bar__head h1 {
    order: 1;
    min-width: 0;
    flex: 0 0 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: clamp(16px, calc(4.9vw / var(--z, 1)), 19px);
  }

  .prop-bar .prop-bar__head > p {
    order: 2;
    min-width: 0;
    flex: 0 0 100%;
    margin-top: -3px;
    padding-inline-end: 0;
  }

  .prop-bar .prop-bar__head > p > span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .prop-bar .prop-bar__head [data-bar-field="code"] {
    order: 3;
  }

  .prop-bar .prop-bar__head > .prop-follow {
    order: 4;
  }

  .prop-bar .prop-bar__actions {
    order: 5;
    margin-inline-start: auto;
    align-self: center;
  }

  .prop-bar .prop-bar__prices {
    order: 6;
    flex: 0 0 100%;
    margin-top: 6px;
  }

  /* الشريط الثابت على الموبايل: فوق السعر بيظهر (لوجو المطور) + الاسم + سطر صغير — في مكان صف الكود / قارن-مفضلة-شارك (من غير ما ارتفاع الشريط يتغير) */

  .prop-bar .prop-bar__prices {
    position: relative;
  }

  .prop-bar .prop-bar__mini {
    position: absolute;
    inset-inline: 0;
    bottom: 100%;
    display: block;
    pointer-events: none;
  }

  .prop-bar .prop-bar__mini-in {
    display: flex;
    height: 46px;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
    background-color: #fff;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.15s ease;
  }

  .prop-bar.is-stuck .prop-bar__mini-in {
    opacity: 1;
    visibility: visible;
  }

  /* وقت التثبيت: العنوان الكبير واللوجو والمكان وصف الأزرار بيستخبّوا (مكانهم محفوظ) — السطر المصغّر هو اللي ظاهر */

  .prop-bar.is-stuck .prop-bar__logo,
        .prop-bar.is-stuck .prop-bar__head h1,
        .prop-bar.is-stuck .prop-bar__head > p,
        .prop-bar.is-stuck .prop-bar__actions,
        .prop-bar.is-stuck .prop-bar__head [data-bar-field="code"],
        .prop-bar.is-stuck .prop-bar__head > .prop-follow {
    visibility: hidden;
  }

  .prop-bar__mini-logo {
    height: 40px;
    width: 40px;
    flex: none;
    border-radius: 9999px;
    border: 1px solid #e4e9ef;
    background-color: #fff;
    -o-object-fit: contain;
    object-fit: contain;
  }

  .prop-bar__mini-logo[hidden] {
    display: none;
  }

  .prop-bar__mini-logo--text:not([hidden]) {
    display: flex;
    align-items: center;
    justify-content: center;
    border-width: 0;
    background-color: #123a5c;
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
    color: #fff;
  }

  .prop-bar__mini-text {
    display: flex;
    min-width: 0;
    flex: 1 1 0%;
    flex-direction: column;
    gap: 1px;
  }

  .prop-bar__mini-text b,
        .prop-bar__mini-text small {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .prop-bar__mini-text b {
    font-size: 15.5px;
    font-weight: 700;
    line-height: 1.4;
    color: #123a5c;
  }

  .prop-bar__mini-text small {
    font-size: 12.5px;
    font-weight: 600;
    line-height: 1.4;
    color: #5b6b7c;
  }

  /* المشروع: لوجو المطور (56px) جنب العنوان والمكان */

  .prop-bar--project .prop-bar__logo {
    position: absolute;
    top: 0;
    inset-inline-start: 20px;
  }

  .prop-bar--project .prop-bar__head h1,
        .prop-bar--project .prop-bar__head > p {
    padding-inline-start: 68px;
  }

  .prop-bar--project .prop-bar__head h1 {
    margin-top: 3px;
  }
}

/* المعرض على الموبايل (الوحدة / المشروع): صورة واحدة بتتسحب بالجنب وتحتها نقط */

.rent-gallery-wrap {
  position: relative;
}

.rent-gallery__dots {
  display: none;
}

/* الصورة اللي واقفين عليها بس هي اللي بالألوان، وباقي الصور أبيض وأسود (موبايل وديسك توب) */

.rent-gallery.rent-gallery--slider .rent-gallery__item img {
  filter: grayscale(1);
  transition: filter 0.6s ease;
}

.rent-gallery.rent-gallery--slider .rent-gallery__item[data-active="1"] img {
  filter: none;
}

/* المعرض اللي بيتقلّب لوحده: الشريحة بتتفتح بالراحة على الديسك توب */

@media (min-width: 1024px) {
  .rent-gallery.rent-gallery--slider .rent-gallery__item {
    transition: flex-grow 0.9s ease;
  }
}

@media (max-width: 1023px) {
  /* الصورة اللي في النص بالألوان، وطرف الصورة اللي قبلها واللي بعدها باين جنبها أبيض وأسود */

  .rent-gallery.rent-gallery--slider:not(.rent-gallery--thumbs) {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    padding-inline: 7%;
    margin-inline: -20px;
    border-radius: 0;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
  }

  .rent-gallery.rent-gallery--slider:not(.rent-gallery--thumbs)::-webkit-scrollbar {
    display: none;
  }

  .rent-gallery.rent-gallery--slider:not(.rent-gallery--thumbs) .rent-gallery__item,
        .rent-gallery.rent-gallery--slider:not(.rent-gallery--thumbs) .rent-gallery__item[data-active="1"] {
    order: 0;
    flex: 0 0 100%;
    aspect-ratio: var(--photo-ratio, 1.5);
    border-radius: 14px;
    scroll-snap-align: center;
  }

  /* صفحة المشروع (box): الصور بتتحرك جوه بوكس واحد ثابت — صورة بعرض البوكس، من غير طرف الصور اللي جنبها (زي الموقع الحالي) */

  .rent-gallery.rent-gallery--slider.rent-gallery--box {
    gap: 0;
    margin-inline: 0;
    padding-inline: 0;
    border-radius: 16px;
  }

  .rent-gallery.rent-gallery--slider.rent-gallery--box .rent-gallery__item,
        .rent-gallery.rent-gallery--slider.rent-gallery--box .rent-gallery__item[data-active="1"] {
    border-radius: 0;
  }

  .rent-gallery.rent-gallery--slider.rent-gallery--box .rent-gallery__item img {
    filter: none;
  }

  /* صفحة الوحدة (thumbs): صورة كبيرة وتحتها الصور الصغيرة بالألوان (زي الموقع الحالي) — الضغط على صورة صغيرة بيكبّرها */

  .rent-gallery.rent-gallery--thumbs .rent-gallery__item img {
    filter: none;
  }

  .rent-gallery--thumbs ~ .rent-gallery__dots {
    display: none;
  }

  .rent-gallery__dots {
    position: absolute;
    inset-inline: 0;
    bottom: 10px;
    display: flex;
    justify-content: center;
    gap: 6px;
    pointer-events: none;
  }

  .rent-gallery__dots i {
    height: 7px;
    width: 7px;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.55);
    box-shadow: 0 1px 3px rgba(13, 36, 58, 0.45);
    transition: background-color 0.2s ease, width 0.2s ease;
  }

  .rent-gallery__dots i[aria-current="true"] {
    width: 18px;
    border-radius: 9999px;
    background-color: #fff;
  }
}

/* جدول التفاصيل: صفوف أزرق فاتح — الاسم وجنبه القيمة */

.prop-rows {
  overflow: hidden;
  border-radius: 14px;
}

.prop-rows > div {
  display: grid;
  grid-template-columns: minmax(0, 42%) minmax(0, 1fr);
  min-height: 46px;
  align-items: center;
  -moz-column-gap: 12px;
       column-gap: 12px;
  background-color: #e8f0fb;
  padding: 8px 16px;
}

.prop-rows > div:nth-child(even) {
  background-color: #e8f0fb;
}

.prop-rows dt {
  font-size: 13.5px;
  font-weight: 700;
  line-height: 1.5;
}

.prop-rows dd {
  font-size: 13.5px;
  font-weight: 700;
  line-height: 1.5;
  color: #123a5c;
}

/* خطط السداد: شريط رمادي فاتح بعرض الشاشة على الموبايل، وكارت على الديسك توب */

.prop-band {
  margin-inline: -20px;
  /* خلفية الصفحة أبيض (من غير شريط رمادي ورا المحتوى) */
  background-color: #fff;
  padding: 18px 20px 20px;
}

/* عنوان مؤشرات الاستثمار: كبسولة بيضا بأيقونة */

.prop-title {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  gap: 8px;
  border: 1px solid #e4e9ef;
  border-radius: 9999px;
  background-color: #fff;
  padding: 6px 18px;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.35;
  box-shadow: 0 1px 2px rgba(18, 58, 92, 0.04), 0 10px 22px -16px rgba(18, 58, 92, 0.35);
}

/* مؤشر السعر / الطلب / النمو */

/* الأربع مؤشرات (معدل النمو / الطلب / الإيجار / السيولة): موبايل صف بيتسحب زي التطبيق (3 ظاهرين والرابع باين طرفه) — ديسك توب 4 جنب بعض */

.prop-stats {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  padding-bottom: 2px;
  scroll-snap-type: x proximity;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

.prop-stats::-webkit-scrollbar {
  display: none;
}

.prop-stat {
  display: flex;
  flex: 0 0 calc((100% - 20px) / 3.25);
  min-width: 104px;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  scroll-snap-align: start;
  /* خلفية لبني زي كروت المؤشرات في التطبيق */
  border: 1px solid #d3dfee;
  border-radius: 16px;
  background-color: #e8f0fb;
  padding: 12px 6px;
  text-align: center;
  color: #1f7f72;
}

.prop-stat__label {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.4;
  white-space: nowrap;
  color: #123a5c;
}

.prop-stat b {
  font-size: 20px;
  font-weight: 800;
  line-height: 1.3;
}

/* لون القيمة: النمو أخضر تركواز ، الطلب ذهبي ، الإيجار تركواز اللوجو ، السيولة أخضر */

.prop-stat--growth b {
  color: #1f7f72;
}

.prop-stat--demand b {
  color: #e89b0c;
}

.prop-stat--rent b {
  color: #2aa89a;
}

.prop-stat--liquidity b {
  color: #2e9e4f;
}

/* نص دايرة المؤشر */

.prop-gauge {
  position: relative;
  width: 92px;
}

.prop-gauge svg {
  display: block;
  width: 100%;
}

.prop-gauge b {
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  font-size: 25px;
  font-weight: 800;
  line-height: 1.1;
  color: #123a5c;
}

/* نسبة جوه نص الدايرة (+16%): أصغر من الرقم العادي (84) عشان ما تلمسش الحواف */

.prop-gauge b.prop-gauge__long {
  bottom: 2px;
  font-size: 18px;
  letter-spacing: -0.2px;
}

/* زراير أول صفحة المشروع والوحدة — موبايل: زرارين (الصور / المخطط — مخطط الوحدة / المخطط) ، ديسك توب: + على الخريطة. الأيقونة فوق الاسم */

.prop-tiles {
  display: flex;
  gap: 8px;
}

.prop-tile {
  display: flex;
  min-height: 78px;
  min-width: 0;
  flex: 1 1 0%;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border: 1px solid #e4e9ef;
  border-radius: 16px;
  background-color: #f6f9fd;
  padding: 10px 6px;
  font-size: 13.5px;
  font-weight: 700;
  line-height: 1.4;
  color: #123a5c;
  text-align: center;
  box-shadow: 0 1px 2px rgba(18, 58, 92, 0.04), 0 12px 26px -18px rgba(18, 58, 92, 0.35);
  transition: border-color 0.15s ease, color 0.15s ease;
}

.prop-tile svg {
  color: #1f63c6;
}

.prop-tile:hover {
  border-color: #1f63c6;
  color: #1f63c6;
}

/* تبويب غير متشطب / متشطب */

.prop-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.prop-tabs__item {
  display: inline-flex;
  min-height: 42px;
  align-items: center;
  justify-content: center;
  border: 1px solid #e4e9ef;
  border-radius: 9999px;
  background-color: #fff;
  padding: 4px 22px;
  font-size: 14px;
  font-weight: 700;
  color: #5b6b7c;
  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.prop-tabs__item:hover {
  border-color: #1e4166;
  color: #123a5c;
}

.prop-tabs__item[aria-pressed="true"] {
  border-color: #1e4166;
  background-color: #1e4166;
  color: #fff;
}

/* تبويب وحدات المشروع: خط تحت التبويب المفتوح. موبايل بيتسحب بالجنب — ديسك توب الأربعة بعرض الصف */

.prop-utabs {
  display: flex;
  overflow-x: auto;
  border-bottom: 1px solid #e4e9ef;
  scrollbar-width: none;
}

.prop-utabs::-webkit-scrollbar {
  display: none;
}

.prop-utabs a {
  flex: 1 0 auto;
  margin-bottom: -1px;
  border-bottom: 2px solid transparent;
  padding: 11px 14px;
  text-align: center;
  font-size: 14.5px;
  font-weight: 700;
  line-height: 1.5;
  white-space: nowrap;
  color: #5b6b7c;
  transition: color 0.15s ease, border-color 0.15s ease;
}

.prop-utabs a:hover {
  color: #123a5c;
}

.prop-utabs a[aria-current="true"] {
  border-bottom-color: #2a9d8f;
  color: #1f7f72;
}

/* أرقام صفحات وحدات المشروع (ديسك توب بس) */

/* خطة السداد: كارت أزرق فاتح بيتفتح ويتقفل */

.prop-plan {
  border: 1px solid #d3e6ee;
  border-radius: 16px;
  background-color: #e8f0fb;
}

.prop-plan__head {
  display: block;
  cursor: pointer;
  list-style: none;
  padding: 14px 16px;
}

.prop-plan__head::-webkit-details-marker {
  display: none;
}

.prop-plan__toggle {
  display: inline-flex;
  height: 30px;
  flex-shrink: 0;
  align-items: center;
  gap: 5px;
  border-radius: 9999px;
  background-color: #fff;
  padding-inline: 12px;
  font-size: 12.5px;
  font-weight: 700;
  color: #123a5c;
  box-shadow: 0 1px 4px rgba(18, 58, 92, 0.14);
}

.prop-plan__rows {
  border-top: 1px solid #c5dde6;
  padding: 4px 16px 12px;
}

.prop-plan__row {
  padding-block: 8px;
}

.prop-plan__row--rule {
  border-top: 1px dashed #b9d3de;
}

/* عروض الوحدة (shary_unit_offers) تحت خطط السداد — property/partials/offers:
       صف كروت بيضا جوه بوكس رمادي فاتح (بيتسحب بالعرض على الموبايل) ، وفوق كل كارت كلمة "عرض" برتقالي */

.offer-rail-wrap {
  margin-top: 12px;
}

.offer-rail {
  border-radius: 18px;
  background-color: #f1f4f7;
  padding: 10px;
}

.offer-rail__track {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  scrollbar-width: none;
}

.offer-rail__track::-webkit-scrollbar {
  display: none;
}

.offer-card {
  flex: 0 0 auto;
  width: min(78%, 250px);
  scroll-snap-align: start;
  border-radius: 14px;
  background-color: #fff;
  padding: 12px 14px 14px;
  box-shadow: 0 1px 4px rgba(18, 58, 92, 0.1);
}

.offer-card:only-child {
  width: 100%;
}

.offer-card__tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12.5px;
  font-weight: 800;
  line-height: 1.5;
  color: #d98a00;
}

.offer-card__name {
  margin-top: 6px;
  font-size: 13.5px;
  font-weight: 700;
  line-height: 1.5;
  color: #123a5c;
}

.offer-card__main {
  margin-top: 2px;
  font-size: 19px;
  font-weight: 800;
  line-height: 1.45;
  color: #123a5c;
}

.offer-card__main small {
  font-size: 12.5px;
  font-weight: 600;
  color: #5c6368;
}

.offer-card__was,
    .offer-card__line {
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1.7;
  color: #5c6368;
}

.offer-card__more {
  margin-top: 8px;
}

.offer-card__more summary {
  display: inline-flex;
  height: 30px;
  cursor: pointer;
  list-style: none;
  align-items: center;
  gap: 5px;
  border-radius: 9999px;
  background-color: #f1f4f7;
  padding-inline: 12px;
  font-size: 12.5px;
  font-weight: 700;
  color: #123a5c;
}

.offer-card__more summary::-webkit-details-marker {
  display: none;
}

.offer-card__rows {
  margin-top: 8px;
  border-top: 1px dashed #d5dde3;
}

.offer-card__rows > div {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 2px 10px;
  padding-block: 7px;
  font-size: 12.5px;
  font-weight: 700;
  line-height: 1.5;
}

.offer-card__rows > div + div {
  border-top: 1px dashed #e2e8ec;
}

.offer-card__rows dd {
  white-space: nowrap;
}

.offer-card__rows small {
  flex-basis: 100%;
  font-size: 11.5px;
  font-weight: 500;
  color: #5c6368;
}

@media (min-width: 1024px) {
  .offer-rail-wrap {
    margin-top: 16px;
  }

  .offer-rail {
    padding: 14px;
  }

  .offer-rail__track {
    flex-wrap: wrap;
    gap: 14px;
    overflow: visible;
  }

  .offer-card {
    width: calc((100% - 28px) / 3);
    padding: 14px 16px 16px;
  }

  .offer-card:only-child {
    width: calc((100% - 28px) / 3);
  }

  .offer-card__name {
    font-size: 14.5px;
  }

  .offer-card__main {
    font-size: 21px;
  }

  .offer-card__was,
        .offer-card__line {
    font-size: 13.5px;
  }
}

/* ── app.css · جزء 8 من 16: تسجيل الدخول وحساب جديد وكلمة السر (المصدر: resources/css/shary/app/08-auth.css — عدّل هنا وشغّل tools/minify-assets.sh) */
/* صفحة تسجيل الدخول / حساب جديد (auth/show): كارت أبيض هادي في نص الصفحة */

/* صفحة تسجيل الدخول: عمودين على الديسك توب (الفورم | تحميل التطبيق) جوه لوحة هادية ، وعلى الموبايل الفورم فوق وتحميل التطبيق تحته */

.auth-wrap {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 22px;
}

.auth-promo {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  overflow: hidden;
  border-radius: 24px;
  background: linear-gradient(160deg, #f1f7ff 0%, #e3eefc 100%);
  padding: 24px 16px 22px;
  text-align: center;
  color: #123a5c;
}

.auth-promo__title {
  font-size: 19px;
  font-weight: 800;
  line-height: 1.5;
}

.auth-promo__title b {
  display: block;
  font-size: 24px;
  font-weight: 800;
  color: #1f63c6;
}

.auth-promo__art {
  position: relative;
  display: flex;
  height: 320px;
  width: 100%;
  max-width: 320px;
  cursor: pointer;
  transition: transform 0.25s;
  align-items: flex-end;
  justify-content: center;
  isolation: isolate;
}

/* دايرة هادية ورا التليفون + نقطتين بألوان اللوجو */

.auth-promo__art::before {
  content: "";
  position: absolute;
  bottom: 6px;
  left: 50%;
  z-index: -1;
  height: 260px;
  width: 260px;
  transform: translateX(-50%);
  border-radius: 999px;
  background: radial-gradient(circle at 35% 30%, #ffffff 0%, #cfe2fb 70%);
}

.auth-promo__art::after {
  content: "";
  position: absolute;
  top: 34px;
  left: 14%;
  z-index: -1;
  height: 16px;
  width: 16px;
  border-radius: 999px;
  background-color: #f5a623;
  box-shadow: 205px 200px 0 2px #2a9d8f;
}

.auth-promo__art:hover {
  transform: translateY(-4px);
}

.auth-promo__phone {
  height: 100%;
  width: auto;
  max-width: 100%;
  -o-object-fit: contain;
     object-fit: contain;
  filter: drop-shadow(0 18px 22px rgba(18, 58, 92, 0.28));
}

.auth-promo__get {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 16px;
}

.auth-promo__qr {
  display: none;
}

.auth-promo__stores {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
}

.auth-store {
  display: inline-flex;
  height: 48px;
  align-items: center;
  gap: 9px;
  border: 1.5px solid #123a5c;
  border-radius: 12px;
  background-color: #ffffff;
  padding-inline: 14px;
  color: #123a5c;
  transition: background-color 0.15s, color 0.15s, transform 0.15s;
}

.auth-store:hover {
  background-color: #123a5c;
  color: #ffffff;
}

.auth-store:active {
  transform: scale(0.97);
}

.auth-store > span {
  display: flex;
  flex-direction: column;
  text-align: left;
}

.auth-store small {
  font-size: 8.5px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.auth-store b {
  font-size: 15.5px;
  font-weight: 800;
  line-height: 1.2;
}

@media (min-width: 1024px) {
  .auth-wrap {
    grid-template-columns: minmax(0, 480px) minmax(0, 1fr);
    align-items: center;
    gap: 40px;
    border-radius: 32px;
    background: linear-gradient(150deg, #f4f9ff 0%, #e4effd 100%);
    padding: 40px 48px;
  }

  .auth-wrap .auth-card {
    margin-inline: 0;
    max-width: none;
  }

  .auth-promo {
    gap: 20px;
    overflow: visible;
    border-radius: 0;
    background: none;
    padding: 0;
  }

  .auth-promo__title {
    font-size: 28px;
  }

  .auth-promo__title b {
    font-size: 36px;
  }

  .auth-promo__art {
    height: 480px;
    max-width: 460px;
  }

  .auth-promo__art::before {
    height: 400px;
    width: 400px;
  }

  .auth-promo__art::after {
    top: 70px;
    left: 8%;
    height: 22px;
    width: 22px;
    box-shadow: 340px 310px 0 3px #2a9d8f;
  }

  .auth-promo__get {
    gap: 22px;
  }

  /* كود QR: الكود أكبر وتحته «امسح الكود وحمّل التطبيق» (زي كارت الكود في الرئيسية) */

  .auth-promo__qr {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    width: 200px;
    border-radius: 18px;
    background-color: #ffffff;
    padding: 12px 12px 11px;
    box-shadow: 0 12px 28px -18px rgba(18, 58, 92, 0.5);
    font-size: 14.5px;
    font-weight: 800;
    line-height: 1.5;
    text-align: center;
  }

  .auth-promo__qr img {
    height: 168px;
    width: 168px;
    border-radius: 8px;
    -o-object-fit: contain;
       object-fit: contain;
  }

  /* زرارين المتجر جنب بعض (مش تحت بعض) */

  .auth-promo__stores {
    flex-direction: row;
    flex-wrap: nowrap;
  }
}

/* صفحة تسجيل الدخول على الديسك توب (auth-fit): الصفحة كلها (الفورم + التليفون + الكود) تبان في أول شاشة من غير نزول —
       الفورم والتليفون بمقاس أهدى (مش مكبّرين) ، والمقاس بيتحدد على ارتفاع الشاشة: اللابتوب القصير أصغر والشاشة الطويلة أكبر */

@media (min-width: 1024px) {
  .site-container.auth-page {
    padding-top: 14px;
    padding-bottom: 20px;
  }

  .auth-wrap {
    zoom: 0.98;
    gap: 32px;
    padding: 16px 40px;
  }

  .auth-wrap .auth-card {
    padding-top: 20px;
    padding-bottom: 16px;
  }

  .auth-wrap .auth-promo {
    gap: 10px;
  }

  .auth-wrap .auth-promo__art {
    height: 450px;
    max-width: 480px;
  }

  .auth-wrap .auth-promo__art::before {
    height: 380px;
    width: 380px;
  }

  .auth-wrap .auth-promo__art::after {
    box-shadow: 330px 290px 0 3px #2a9d8f;
  }

  /* كارت الكود: الكود وتحته «امسح الكود وحمّل التطبيق» سطر واحد */

  .auth-wrap .auth-promo__qr {
    width: 190px;
    gap: 5px;
    padding: 9px 8px 7px;
    font-size: 12.5px;
    white-space: nowrap;
  }

  .auth-wrap .auth-promo__qr img {
    height: 116px;
    width: 116px;
  }

  .auth-wrap .auth-promo__get {
    gap: 18px;
  }
}

@media (min-width: 1024px) and (max-height: 860px) {
  .auth-wrap {
    zoom: 0.9;
  }
}

@media (min-width: 1024px) and (max-height: 780px) {
  .auth-wrap {
    zoom: 0.83;
  }
}

@media (min-width: 1024px) and (max-height: 720px) {
  .auth-wrap {
    zoom: 0.77;
    padding-block: 12px;
  }

  .auth-wrap .auth-promo__art {
    height: 420px;
  }
}

@media (min-width: 1024px) and (max-height: 640px) {
  .auth-wrap {
    zoom: 0.71;
    padding-block: 10px;
  }

  .auth-wrap .auth-card {
    padding-top: 16px;
    padding-bottom: 12px;
  }
}

.auth-card {
  margin-inline: auto;
  width: 100%;
  max-width: 460px;
  border: 1px solid #e4e9ef;
  border-radius: 24px;
  background-color: #fff;
  padding: 26px 20px 24px;
  box-shadow: 0 18px 44px -24px rgba(18, 58, 92, 0.35);
  color: #123a5c;
}

.auth-tabs {
  margin-top: 20px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
  border-radius: 16px;
  background-color: #e8f0fb;
  padding: 5px;
}

.auth-tabs a {
  display: flex;
  height: 44px;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  font-size: 14.5px;
  font-weight: 700;
  color: #123a5c;
  transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
}

.auth-tabs a[aria-selected="true"] {
  background-color: #1e4166;
  color: #fff;
  box-shadow: 0 6px 14px -8px rgba(30, 65, 102, 0.8);
}

.auth-alert {
  margin-top: 14px;
  border-radius: 12px;
  background-color: #fdf3f2;
  padding: 10px 14px;
  font-size: 13.5px;
  font-weight: 600;
  line-height: 1.7;
  color: #b3372e;
}

.auth-alert.is-ok {
  background-color: #e6f6ef;
  color: #17734f;
}

.auth-form {
  margin-top: 4px;
}

.auth-label {
  margin-top: 14px;
  margin-bottom: 6px;
  display: block;
  font-size: 13.5px;
  font-weight: 700;
  line-height: 1.5;
}

.auth-card .req-field {
  height: 52px;
  border-radius: 14px;
}

.auth-card .req-field__control {
  font-size: 15.5px;
}

/* رقم الموبايل في صفحة التسجيل: كود الدولة (الكود + سهم + العلم) جوه الخانة على الطرف ، وبينه وبين الرقم خط رفيع */

.auth-phone {
  padding-inline-end: 6px;
}

.auth-phone__code {
  display: inline-flex;
  height: 40px;
  flex-shrink: 0;
  cursor: pointer;
  align-items: center;
  gap: 6px;
  border-inline-start: 1.5px solid #c9d7ea;
  padding-inline: 10px 6px;
  font-size: 15px;
  font-weight: 800;
  line-height: 1;
  color: #123a5c;
}

/* إنجليزي: الكود قبل الرقم (العلم ← الكود ← الرقم) */

[dir="ltr"] .auth-phone {
  padding-inline-end: 16px;
}

[dir="ltr"] .auth-phone__code {
  order: 1;
  flex-direction: row-reverse;
  border-inline-start: 0;
  border-inline-end: 1.5px solid #c9d7ea;
  padding-inline: 0 10px;
}

[dir="ltr"] .auth-phone .req-field__control {
  order: 2;
}

.auth-phone__code:focus-visible {
  border-radius: 10px;
  outline: 2px solid #1f63c6;
}

.auth-eye {
  display: flex;
  height: 36px;
  width: 36px;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  border-radius: 9999px;
  color: #8a99a8;
  transition: color 0.2s, background-color 0.2s;
}

.auth-eye:hover,
    .auth-eye.is-on {
  background-color: #fff;
  color: #1f63c6;
}

/* «افتكرني» + «نسيت كلمة السر؟» في سطر واحد */
.auth-row {
  margin-top: 14px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 14px;
}

.auth-row .auth-check {
  margin-top: 0;
}

.auth-forgot {
  font-size: 13.5px;
  font-weight: 700;
  color: #1f63c6;
}

.auth-forgot:hover {
  text-decoration: underline;
}

/* «نسيت كلمة السر»: الكود يوصل على (الإيميل / SMS / واتساب) */
.auth-channels {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(96px, 1fr));
  gap: 8px;
}

.auth-channel {
  display: flex;
  cursor: pointer;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 48px;
  border: 1.5px solid #dfe6ee;
  border-radius: 14px;
  background: #fff;
  padding: 8px 10px;
  font-size: 14px;
  font-weight: 700;
  color: #123a5c;
}

.auth-channel input {
  height: 18px;
  width: 18px;
  accent-color: #1f63c6;
}

.auth-channel:has(input:checked) {
  border-color: #1f63c6;
  background: #eef5ff;
}

/* خانة الكود: أرقام كبيرة ومتباعدة */
.auth-code {
  letter-spacing: 8px;
  font-size: 20px !important;
  font-weight: 800;
}

.auth-check {
  margin-top: 14px;
  display: flex;
  cursor: pointer;
  align-items: center;
  gap: 8px;
  font-size: 13.5px;
  font-weight: 600;
  color: #5b6b7c;
}

.auth-check input {
  height: 18px;
  width: 18px;
  border-radius: 5px;
  accent-color: #1e4166;
}

.auth-submit {
  margin-top: 18px;
  display: flex;
  height: 52px;
  width: 100%;
  align-items: center;
  justify-content: center;
  border-radius: 14px;
  background-color: #1e4166;
  font-size: 16px;
  font-weight: 700;
  color: #fff;
  transition: background-color 0.2s, box-shadow 0.25s, transform 0.15s;
}

.auth-submit:hover {
  background-color: #123a5c;
  box-shadow: 0 0 0 3px rgba(125, 196, 255, 0.4), 0 10px 22px -10px rgba(18, 58, 92, 0.6);
}

.auth-submit:active {
  transform: scale(0.985);
}

.auth-submit:disabled {
  cursor: wait;
  opacity: 0.75;
}

.auth-switch {
  margin-top: 14px;
  text-align: center;
  font-size: 13.5px;
  font-weight: 600;
  color: #5b6b7c;
}

.auth-switch a {
  font-weight: 700;
  color: #1f63c6;
}

.auth-switch a:hover {
  text-decoration: underline;
}

.auth-or {
  margin-block: 18px 14px;
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 12.5px;
  font-weight: 600;
  color: #8a99a8;
}

.auth-or::before,
    .auth-or::after {
  content: "";
  height: 1px;
  flex: 1 1 0%;
  background-color: #e4e9ef;
}

/* فيسبوك / جوجل / أبل تحت الفورم: 3 أزرار متساوية في صف واحد */

.auth-socials {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  container-type: inline-size;
}

.auth-socials:has(> :nth-child(2):last-child) {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.auth-socials:has(> :only-child) {
  grid-template-columns: minmax(0, 1fr);
}

.auth-social {
  display: flex;
  height: 50px;
  min-width: 0;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 1.5px solid #e4e9ef;
  border-radius: 14px;
  font-size: 14px;
  font-weight: 700;
  color: #123a5c;
  transition: border-color 0.2s, background-color 0.2s, box-shadow 0.25s, transform 0.15s;
}

.auth-social svg {
  flex-shrink: 0;
}

/* الموبايل (الصف أضيق من 330px): الأيقونة والاسم أصغر سنة عشان أطول اسم (Facebook) ياخد مسافة من الإطار زي جوجل وأبل */

@container (max-width: 330px) {
  .auth-social {
    gap: 6px;
    padding-inline: 6px;
    font-size: 13px;
  }

  .auth-social svg {
    height: 20px;
    width: 20px;
  }
}

/* شاشات 360px وأضيق */

@container (max-width: 290px) {
  .auth-social {
    gap: 5px;
    padding-inline: 4px;
    font-size: 12px;
  }

  .auth-social svg {
    height: 18px;
    width: 18px;
  }
}

.auth-social:hover,
    .auth-social:focus-visible {
  border-color: #a9d3f7;
  background-color: #f3f9ff;
  box-shadow: 0 0 0 3px rgba(125, 196, 255, 0.35);
  outline: none;
}

.auth-social:active {
  transform: scale(0.97);
}

@media (min-width: 1024px) {
  .auth-card {
    padding: 36px 36px 30px;
  }
}

/* ── app.css · جزء 9 من 16: رسم السعر ، الصفوف المتحركة ، الإعلانات ، الإيجار ، بوكس الصور والصورة الطبيعية ، عارض الصور ، التحميل وأنت نازل (المصدر: resources/css/shary/app/09-property-rent-photos.css — عدّل هنا وشغّل tools/minify-assets.sh) */
/* مفتاح ألوان الرسم */

.prop-key {
  display: inline-block;
  height: 4px;
  width: 18px;
  border-radius: 4px;
}

.prop-key--unit {
  background-color: #2a9d8f;
}

.prop-key--market {
  background-color: #e9a23b;
}

/* رسم نمو السعر */

.prop-chart {
  position: relative;
  min-height: 230px;
}

.prop-chart svg {
  display: block;
  max-width: 100%;
  touch-action: pan-y;
}

.prop-chart__tip {
  position: absolute;
  z-index: 5;
  min-width: 190px;
  transform: translateX(-50%);
  border: 1px solid #e4e9ef;
  border-radius: 12px;
  background-color: #fff;
  padding: 9px 12px;
  font-size: 12.5px;
  line-height: 1.6;
  color: #5b6b7c;
  box-shadow: 0 14px 30px -14px rgba(18, 58, 92, 0.5);
  pointer-events: none;
}

.prop-chart__tip[hidden] {
  display: none;
}

.prop-chart__tip strong {
  display: block;
  font-size: 13px;
  font-weight: 800;
  color: #123a5c;
}

.prop-chart__tip p {
  display: flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
  font-weight: 600;
}

.prop-chart__tip p i {
  height: 8px;
  width: 8px;
  flex-shrink: 0;
  border-radius: 50%;
}

.prop-chart__tip p b {
  margin-inline-start: auto;
  padding-inline-start: 10px;
  font-weight: 800;
  color: #123a5c;
}

.prop-chart__tip p small {
  font-size: 11px;
  font-weight: 600;
}

/* نصيحة شاري */

.prop-advice {
  background-image: linear-gradient(135deg, #1e4166 0%, #14385a 100%);
}

/* خريطة المشروع: مستطيل عريض زي التطبيق (العرض 2.45 × الارتفاع) */

.prop-map {
  aspect-ratio: 700 / 285;
  box-shadow: 0 1px 2px rgba(18, 58, 92, 0.04), 0 12px 26px -18px rgba(18, 58, 92, 0.35);
}

.prop-map.is-expanded {
  aspect-ratio: auto;
}

/* علامة مكان المشروع فوق الخريطة المرسومة (بتختفي لما خريطة جوجل تحمل) */

.prop-map__pin {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -100%);
  color: #1f63c6;
  filter: drop-shadow(0 4px 6px rgba(18, 58, 92, 0.3));
}

/* خريطة المشروع (المصغّرة): كارت جوجل اللي فوق ("عرض خريطة أكبر") بيتقص بره الكادر — الخريطة بس */

.prop-map:not(.is-expanded) .area-map__frame {
  top: -92px !important;
  height: calc(100% + 92px) !important;
}

.prop-map.is-live .prop-map__pin {
  display: none;
}

/* صف صور بيتسحب بالجنب (المشروعات الجديدة + مراحل أخرى على الموبايل): بعرض الشاشة على الموبايل */

.prop-rail {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  margin-inline: -20px;
  padding-inline: 20px;
  padding-bottom: 4px;
  scroll-snap-type: x proximity;
  scroll-padding-inline: 20px;
  scrollbar-width: none;
}

.prop-rail::-webkit-scrollbar {
  display: none;
}

/* أسهم الصف المتحرك على الديسك توب (data-rail-arrows — js/shary/property-page.js). الموبايل: سحب بالإيد من غير أسهم */

.rail-wrap {
  position: relative;
}

.rail-arrow {
  display: none;
}

@media (min-width: 1024px) {
  .rail-wrap.is-scrollable .rail-arrow {
    position: absolute;
    top: 50%;
    z-index: 2;
    display: flex;
    height: 44px;
    width: 44px;
    transform: translateY(-50%);
    align-items: center;
    justify-content: center;
    border: 1px solid #d3dfee;
    border-radius: 999px;
    background-color: #fff;
    color: #123a5c;
    box-shadow: 0 8px 20px -8px rgba(18, 58, 92, 0.45);
    transition: opacity 0.2s, background-color 0.2s;
  }

  .rail-wrap.is-scrollable .rail-arrow:hover {
    background-color: #e8f0fb;
  }

  .rail-wrap.is-scrollable .rail-arrow:disabled {
    opacity: 0;
    pointer-events: none;
  }

  /* السابق في أول الصف والتالي في آخره (في العربي: السابق يمين والتالي شمال) */

  .rail-arrow--prev {
    inset-inline-start: -18px;
  }

  .rail-arrow--next {
    inset-inline-end: -18px;
  }

  [dir="rtl"] .rail-arrow svg {
    transform: scaleX(-1);
  }
}

/* بوكس الإعلانات الموحّد (موبايل وتابلت) — class="ad-box" على أي صف إعلانات (المشروعات الجديدة في صفحة المشروع وصفحة المنطقة ...):
       بوكس واحد ثابت في مكانه بكيرف ، إعلان واحد ظاهر بعرض البوكس ، والإعلانات بتتحرك جواه (مش بعرض الشاشة). نفس فكرة partials/ad-strip */

@media (max-width: 1023px) {
  .ad-box {
    margin-inline: 0 !important;
    padding: 0 !important;
    gap: 0 !important;
    overflow-y: hidden;
    border-radius: 16px;
    scroll-snap-type: x mandatory !important;
    scroll-padding-inline: 0 !important;
    scrollbar-width: none;
  }

  .ad-box::-webkit-scrollbar {
    display: none;
  }

  .ad-box > * {
    flex: 0 0 100% !important;
    width: 100% !important;
    border-radius: 0 !important;
    scroll-snap-align: start;
  }
}

/* مقاس بوكس الإعلانات واحد في الموقع كله (نفس ارتفاع بوكس الهوم): 120px موبايل — 160px ديسك توب.
       ‎.ad-strip (partials/ad-strip) و ‎.ad-box (صف إعلانات المشاريع في صفحة المشروع / المنطقة) بنفس الارتفاع */

.ad-strip,
    .ad-box {
  --ad-h: 120px;
}

.ad-box > * {
  height: var(--ad-h) !important;
  aspect-ratio: auto !important;
}

@media (min-width: 1024px) {
  .ad-strip,
        .ad-box {
    --ad-h: 160px;
  }
}

/* كارت صورة وعليه الاسم (إعلان مشروع / مرحلة) */

.prop-shot {
  position: relative;
  flex: 0 0 62%;
  aspect-ratio: 2 / 1;
  overflow: hidden;
  border-radius: 16px;
  background-color: #dbe6f6;
  scroll-snap-align: start;
}

/* كروت المراحل مستطيلة وواطية (مش مربعة عالية) — موبايل وديسك توب */

.prop-rail--phases .prop-shot {
  flex-basis: 72%;
  aspect-ratio: 2 / 1;
}

.prop-shot > img {
  position: absolute;
  inset: 0;
  height: 100%;
  width: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

.prop-shot::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(9, 26, 43, 0.82), rgba(9, 26, 43, 0) 58%);
  pointer-events: none;
}

.prop-shot__name {
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  z-index: 1;
  padding: 10px 14px 12px;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.45;
  color: #fff;
}

.prop-shot__name a {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.prop-shot__name small {
  display: block;
  font-size: 12.5px;
  font-weight: 600;
  opacity: 0.85;
}

.prop-shot__logo {
  position: absolute;
  top: 10px;
  inset-inline-start: 10px;
  z-index: 2;
  display: flex;
  height: 44px;
  width: 44px;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border-radius: 50%;
  border: 2px solid #fff;
  background-color: #fff;
  font-size: 12px;
  font-weight: 700;
  color: #123a5c;
  box-shadow: 0 4px 12px -4px rgba(9, 26, 43, 0.5);
}

.prop-shot__logo img {
  height: 100%;
  width: 100%;
  -o-object-fit: contain;
     object-fit: contain;
}

@media (min-width: 1024px) {
  .prop-rail {
    margin-inline: 0;
    padding-inline: 0;
    scroll-padding-inline: 0;
  }

  .prop-shot {
    flex-basis: calc((100% - 24px) / 3);
    aspect-ratio: 16 / 10;
  }

  /* مراحل أخرى على الديسك توب: كروت مستطيلة عريضة (العرض أكبر من الارتفاع) من أول الصف */

  .prop-rail--phases {
    gap: 20px;
  }

  /* 3 مراحل بعرض الصف بالظبط — الرابعة وما بعدها بالتحريك (الأسهم / السحب) */

  .prop-rail--phases .prop-shot {
    flex: 0 0 calc((100% - 40px) / 3);
    aspect-ratio: 2 / 1;
    scroll-snap-align: start;
  }

  .prop-rail--phases .prop-shot__name {
    padding: 14px 18px 16px;
    font-size: 17px;
  }

  .prop-rail--phases .prop-shot__name small {
    font-size: 13.5px;
  }

  /* الزراير على الديسك توب (زي تنظيم ناوي): مربعات صغيرة في أول الصف، الأيقونة فوق الاسم */

  .prop-tiles {
    justify-content: flex-start;
    gap: 12px;
  }

  .prop-tile {
    min-height: 96px;
    min-width: 168px;
    flex: 0 0 auto;
    flex-direction: column;
    gap: 8px;
    background-color: #fff;
    padding-inline: 20px;
    font-size: 14.5px;
  }

  /* صفحة الوحدة: الأربع زراير (مخطط الوحدة / المخطط / الصور / الخريطة) بيتقسموا على عرض الصف بالتساوي */

  .prop-tiles--fill .prop-tile {
    min-width: 0;
    flex: 1 1 0%;
  }

  /* خريطة المشروع على الديسك توب: مخفية، وزرار "الخريطة" بيفتحها على الشاشة كلها */

  .prop-map:not(.is-expanded) {
    display: none;
  }
}

/* حالة المرحلة */

@media (min-width: 1024px) {
  .prop-bar {
    top: var(--prop-header, 76px);
    margin-top: 24px;
    border-bottom: 1px solid #e4e9ef;
    padding-block: 14px;
  }

  .prop-bar.is-stuck {
    box-shadow: 0 10px 18px -16px rgba(18, 58, 92, 0.35);
  }

  /* ديسك توب: آخر الشريط صفين — قارن / مفضلة / شارك فوق، وتحتهم طلب مقابلة + اتصال + واتساب */

  .prop-bar__in {
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-areas: "logo head actions" "logo prices contact";
    -moz-column-gap: 16px;
         column-gap: 16px;
    row-gap: 8px;
  }

  .prop-bar__actions {
    align-self: center;
    justify-self: end;
    gap: 8px;
  }

  .prop-bar__actions .prop-action {
    height: 34px;
    width: 34px;
    border-radius: 10px;
  }

  .prop-bar__contact {
    grid-area: contact;
    display: flex;
    align-self: center;
    justify-self: end;
    gap: 10px;
  }

  /* "طلب مقابلة" في الشريط: مستخبي والصفحة فوق (الفورم ظاهرة جنبه)، وبيظهر جنب اتصال / واتساب لما الشريط يثبت */

  .prop-bar.is-stuck .prop-bar__meeting {
    display: flex;
  }

  .prop-pill {
    min-height: 40px;
    padding: 3px 16px;
    box-shadow: none;
  }

  .prop-pill--price,
        .prop-pill--roi {
    flex: 0 0 auto;
  }

  .prop-bar--unit .prop-bar__logo {
    display: block;
  }

  .prop-bar--unit .prop-bar__in {
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-areas: "logo head actions" "logo prices contact";
  }

  /* جدول التفاصيل على الديسك توب: صفوف تحت بعض (الاسم وقصاده القيمة) زي صفحة الوحدة على الموقع الحالي */

  .prop-rows > div {
    min-height: 50px;
    padding-inline: 20px;
  }

  .prop-rows dt,
        .prop-rows dd {
    font-size: 14.5px;
  }

  .prop-band {
    margin-inline: 0;
    border-radius: 18px;
    padding: 22px 24px 24px;
  }

  .prop-title {
    min-height: 0;
    border: 0;
    border-radius: 0;
    padding: 0;
    font-size: 24px;
    box-shadow: none;
  }

  .prop-stats {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
    overflow: visible;
  }

  .prop-stat {
    min-width: 0;
    padding-block: 16px;
  }

  .prop-stat__label {
    gap: 4px;
    font-size: 12.5px;
  }

  .prop-stat__label > svg {
    height: 14px;
    width: 14px;
  }

  .prop-stat b {
    font-size: 24px;
  }

  .prop-gauge {
    width: 140px;
  }

  .prop-gauge b {
    font-size: 36px;
  }

  .prop-gauge b.prop-gauge__long {
    bottom: 3px;
    font-size: 27px;
  }

  .prop-prices {
    display: flex;
    border: 0;
    border-radius: 0;
    box-shadow: none;
  }

  .prop-prices > div {
    display: flex;
    align-items: baseline;
    gap: 10px;
    padding: 0;
    text-align: start;
  }

  .prop-prices > div + div {
    margin-inline-start: 24px;
    padding-inline-start: 24px;
  }

  .prop-prices dt {
    font-size: 13.5px;
  }

  .prop-prices dd {
    margin-top: 0;
  }

  .prop-prices dd b {
    font-size: 21px;
  }

  .prop-utabs a {
    flex: 1 1 0%;
    padding-block: 13px;
    font-size: 16px;
  }

  .prop-pages {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding-top: 28px;
  }

  .prop-pages:empty {
    display: none;
  }

  .prop-plan__head {
    padding: 16px 18px;
  }

  .prop-plan__rows {
    padding-inline: 18px;
  }

  .prop-chart {
    min-height: 280px;
  }
}

/* ====================== صفحات الإيجار ====================== */

/* شريط الفلاتر: موبايل — تبويب الفرش بعرض الصف، تحته المنطقة / النوع / السعر (كل واحد بسهم)، وتحتهم "مسح" + الترتيب.
       ديسك توب — التبويب في الأول و"مسح" + الترتيب في الآخر، وتحتهم المنطقة / النوع / السعر */

.rent-bar {
  display: grid;
  grid-template-columns: repeat(3, minmax(max-content, 1fr));
  gap: 10px 6px;
}

.rent-bar[data-picks] {
  grid-template-columns: repeat(var(--picks), minmax(max-content, 1fr));
}

.rent-tabs {
  grid-column: 1 / -1;
  border-radius: 16px;
  padding: 5px;
}

.rent-tabs span {
  height: 42px;
  border-radius: 12px;
  font-size: 14px;
}

.rent-tabs input:checked + span {
  background-color: #1e4166;
  box-shadow: 0 6px 14px -8px rgba(30, 65, 102, 0.8);
}

/* السهم ظاهر على الموبايل كمان عشان يبان إن كل زرار بيفتح قايمة */

.rent-bar .area-filter button {
  justify-content: flex-start;
  padding-inline: 12px 26px;
}

.rent-bar .area-filter__chevron {
  display: block;
}

.rent-bar__tools {
  grid-column: 1 / -1;
  display: flex;
  gap: 8px;
}

.rent-bar__tools > * {
  flex: 1 1 0%;
}

@media (min-width: 1024px) {
  /* ديسك توب: صف واحد بعرض التلات كروت اللي تحته — المنطقة | النوع | السعر وجنبهم "مسح" و"ترتيب" (مش فوقهم) ، والتبويب في صف لوحده فوق */

  .rent-bar {
    grid-template-columns: repeat(3, minmax(0, 1fr)) auto;
    gap: 16px 12px;
  }

  .rent-bar[data-picks] {
    grid-template-columns: repeat(var(--picks), minmax(0, 1fr)) auto;
  }

  .rent-tabs {
    grid-column: 1;
    grid-row: 1;
  }

  /* التبويبات (الكل / مفروش / غير مفروش) وعناوين الفلاتر: بولد وبمقاس واضح على الديسك توب (عربي وإنجليزي) */

  .rent-tabs span {
    height: 46px;
    padding-inline: 22px;
    font-size: 16.5px;
    font-weight: 800;
  }

  .rent-bar .area-filter button {
    height: 50px;
    font-size: 16px;
    font-weight: 800;
  }

  .rent-bar__tools > * {
    height: 50px;
    font-size: 15.5px;
    font-weight: 800;
  }

  .rent-bar .area-filter {
    grid-row: 2;
  }

  .rent-bar .area-filter button {
    padding-inline: 14px 30px;
  }

  .rent-bar__tools {
    grid-column: -2 / -1;
    grid-row: 2;
    align-self: center;
    align-items: center;
    gap: 12px;
  }

  .rent-bar__tools > * {
    flex: none;
  }
}

/* شريط الإعلانات وسط الكروت: بوكس واحد واطي بعرض الصف (نفس الكيرف من الأربع نواحي) والإعلانات بتتحرك جواه — إعلان واحد ظاهر */

.ad-strip {
  position: relative;
  overflow: hidden;
  border-radius: 18px;
  background-color: #2a9d8f;
  background-image:
            radial-gradient(60% 160% at 100% 0%, rgba(255, 255, 255, 0.24), rgba(255, 255, 255, 0)),
            linear-gradient(120deg, #23897d 0%, #4fbfae 100%);
  color: #ffffff;
}

.ad-strip__track {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}

.ad-strip__track::-webkit-scrollbar {
  display: none;
}

.ad-card {
  position: relative;
  display: flex;
  height: var(--ad-h, 120px);
  flex: 0 0 100%;
  overflow: hidden;
  scroll-snap-align: start;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 16px;
}

/* الإعلان كله كليكابل (مش الزرار / السهم بس): لينك الزرار ممدود على البوكس كله */

.ad-card__cta::after {
  content: "";
  position: absolute;
  inset: 0;
}

/* إعلان صورة (مرفوعة من لوحة التحكم): الصورة مالية البوكس والإعلان كله لينك */

.ad-card--image {
  padding: 0;
}

.ad-card--image picture {
  display: block;
  height: 100%;
  width: 100%;
}

.ad-card--image img {
  display: block;
  height: 100%;
  width: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

/* البوكس جوه المقال / الخبر (.article-content): من غير تنسيق عناوين ولينكات المقال */

.article-content .ad-strip,
    .article-content .photo-box {
  margin-block: 22px;
}

.article-content .ad-card .ad-card__title,
    .article-content .ad-card .ad-card__kicker,
    .article-content .ad-card .ad-card__text {
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  color: #ffffff !important;
}

.article-content .ad-card .ad-card__kicker {
  font-size: 11px !important;
  font-weight: 700 !important;
  line-height: 1.5 !important;
}

.article-content .ad-card .ad-card__title {
  font-size: 15.5px !important;
  font-weight: 800 !important;
  line-height: 1.4 !important;
}

.article-content .ad-card .ad-card__text {
  font-size: 12.5px !important;
  font-weight: 500 !important;
  line-height: 1.6 !important;
}

.article-content .ad-card .ad-card__cta {
  color: #123a5c !important;
  text-decoration: none !important;
}

.article-content .ad-card--image img {
  margin: 0 !important;
  border-radius: 0 !important;
}

@media (min-width: 1024px) {
  .article-content .ad-card .ad-card__title {
    font-size: 20px !important;
  }

  .article-content .ad-card .ad-card__text {
    font-size: 14px !important;
  }
}

/* بوكس الصور (partials/photo-box): صور مرفوعة جوه بوكس واحد بكيرف — صورة واحدة ظاهرة والباقي بيتحرك جواه (سحب أو لوحده) + نقط */

.photo-box {
  position: relative;
  overflow: hidden;
  border-radius: 18px;
  background-color: #e8f0fb;
}

.photo-box__track {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}

.photo-box__track::-webkit-scrollbar {
  display: none;
}

.photo-box__slide {
  flex: 0 0 100%;
  margin: 0;
  aspect-ratio: 16 / 9;
  scroll-snap-align: start;
}

.photo-box__slide img {
  display: block;
  height: 100%;
  width: 100%;
  margin: 0;
  border-radius: 0;
  -o-object-fit: cover;
     object-fit: cover;
}

.photo-box__dots {
  position: absolute;
  inset-inline: 0;
  bottom: 10px;
  display: flex;
  justify-content: center;
  gap: 6px;
}

.photo-box__dots button {
  height: 7px;
  width: 7px;
  border-radius: 999px;
  background-color: rgba(255, 255, 255, 0.6);
  box-shadow: 0 1px 3px rgba(13, 36, 58, 0.45);
  transition: width 0.2s ease, background-color 0.2s ease;
}

.photo-box__dots button[aria-current="true"] {
  width: 18px;
  background-color: #fff;
}

.ad-card__body {
  min-width: 0;
}

.ad-card__kicker {
  font-size: 11px;
  font-weight: 700;
  line-height: 1.5;
  opacity: 0.9;
}

.ad-card__title {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  font-size: 15.5px;
  font-weight: 800;
  line-height: 1.4;
}

.ad-card__text {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  font-size: 12.5px;
  font-weight: 500;
  line-height: 1.6;
  opacity: 0.95;
}

.ad-card__cta {
  display: inline-flex;
  height: 40px;
  flex-shrink: 0;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
  border-radius: 12px;
  background-color: #ffffff;
  padding-inline: 12px;
  font-size: 13px;
  font-weight: 700;
  color: #123a5c;
  transition: background-color 0.15s ease;
}

.ad-card__cta:hover {
  background-color: #fcb424;
}

@media (min-width: 1024px) {
  .ad-card {
    gap: 24px;
    padding: 18px 36px;
  }

  .ad-card__text {
    -webkit-line-clamp: 2;
  }

  .ad-card__kicker {
    font-size: 12px;
  }

  .ad-card__title {
    font-size: 22px;
  }

  .ad-card__text {
    font-size: 14.5px;
  }

  .ad-card__cta {
    height: 44px;
    gap: 8px;
    padding-inline: 18px;
    font-size: 14.5px;
  }
}

/* معرض صور الوحدة: موبايل صورة كبيرة وتحتها 4 صغيرة — ديسك توب الصورة المفتوحة عريضة والباقي شرايح */

.rent-gallery {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 6px;
}

.rent-gallery__item {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: 10px;
  background-color: #e8f0fb;
}

.rent-gallery__item img {
  position: absolute;
  inset: 0;
  height: 100%;
  width: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

.rent-gallery__item[data-active="1"] {
  order: -1;
  grid-column: 1 / -1;
  aspect-ratio: 16 / 10;
  border-radius: 14px;
}

/* ---- سيستم "الصورة الطبيعية" (photo-fit): الصورة بتتعرض كاملة بنسبتها من غير تكبير ولا قص ، ومفيش أي صورة تانية وراها.
       الكادر نفسه بياخد نسبة أول صورة في المعرض (--photo-ratio ، السكربت في site-chrome.js بيحسبها أول ما الصورة تحمل — بين 5:4 و 16:9 ، والافتراضي 3:2) ،
       فالصورة بتملى الكادر بالظبط من غير فراغ. باقي الصور لو نسبتها مختلفة بتتعرض كاملة جوه نفس الكادر (object-fit: contain) على لون هادي.
       موبايل: الصورة الكبيرة في معرض المشروع / الوحدة / الإيجار. وأي كادر تاني: class="photo-fit" وجواه <img>.
       ديسك توب: الشريحة المفتوحة عريضة فالصورة بتملاها (cover) عشان ما يبانش فراغ على الجنبين. ---- */

.photo-fit {
  position: relative;
  overflow: hidden;
  background-color: #e8f0fb;
}

.photo-fit > img {
  position: absolute;
  inset: 0;
  height: 100%;
  width: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

@media (max-width: 1023px) {
  .rent-gallery-wrap {
    display: flow-root;
  }

  .rent-gallery .rent-gallery__item[data-active="1"],
        .rent-gallery.rent-gallery--box .rent-gallery__item {
    aspect-ratio: var(--photo-ratio, 1.5);
    background-color: #e8f0fb;
  }

  .rent-gallery .rent-gallery__item[data-active="1"] img,
        .rent-gallery.rent-gallery--box .rent-gallery__item img {
    -o-object-fit: cover;
       object-fit: cover;
  }

  /* صفحة الوحدة (thumbs): الصورة الكبيرة فوق ، وتحتها الصور الصغيرة سلايدر صف واحد بيتحرك يمين وشمال (مهما كان عدد الصور — مفيش صف تاني).
           الصورة المفتوحة بتتحط فوق الصف (بالنسبة لـ .rent-gallery-wrap) فمش بتتحرك مع الصف */

  .rent-gallery.rent-gallery--thumbs {
    position: static;
    display: flex;
    gap: 6px;
    overflow-x: auto;
    margin-top: calc(100% / var(--photo-ratio, 1.5) + 6px);
    scroll-snap-type: x proximity;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }

  .rent-gallery.rent-gallery--thumbs::-webkit-scrollbar {
    display: none;
  }

  .rent-gallery.rent-gallery--thumbs .rent-gallery__item {
    order: 0;
    flex: 0 0 calc((100% - 18px) / 4);
    aspect-ratio: 4 / 3;
    scroll-snap-align: start;
  }

  .rent-gallery.rent-gallery--thumbs .rent-gallery__item[data-active="1"] {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    width: 100%;
    aspect-ratio: var(--photo-ratio, 1.5);
  }

  /* أكتر من 4 صور صغيرة: طرف الصورة اللي بعدها باين عشان العميل يعرف إن الصف بيتحرك */

  .rent-gallery.rent-gallery--thumbs[data-many="1"] .rent-gallery__item:not([data-active="1"]) {
    flex-basis: calc((100% - 18px) / 4.4);
  }
}

.rent-gallery__all {
  position: absolute;
  top: 10px;
  inset-inline-end: 10px;
  display: inline-flex;
  height: 36px;
  align-items: center;
  gap: 6px;
  border-radius: 9999px;
  background-color: rgba(255, 255, 255, 0.92);
  padding-inline: 12px;
  font-size: 12.5px;
  font-weight: 700;
  color: #123a5c;
  box-shadow: 0 6px 16px -8px rgba(18, 58, 92, 0.6);
}

@media (min-width: 1024px) {
  /* ارتفاع المعرض على قد الشاشة (زي الموقع الحالي): مستطيل عريض بحيث شريط الملخص تحته — الاسم والمطور والسعر وزراير التواصل —
           يبان في أول شاشة من غير نزول. أقصى ارتفاع 500px على الشاشات الكبيرة وأقل ارتفاع 320px.
           (240px = الهيدر + مسار الصفحة + سطر الاسم: الصورة أكبر شوية والاسم لسه باين في أول شاشة — السعر والزراير ممكن ينزلوا تحت سِنّة) */

  .rent-gallery {
    display: flex;
    height: 540px;
    height: clamp(340px, calc(calc(100vh / var(--z, 1)) - 256px), 540px);
    gap: 10px;
  }

  .rent-gallery__item,
        .rent-gallery__item[data-active="1"] {
    order: 0;
    aspect-ratio: auto;
    min-width: 0;
    flex: 1 1 0%;
    border-radius: 16px;
    transition: flex-grow 0.35s ease;
  }

  .rent-gallery__item[data-active="1"] {
    flex-grow: 9;
  }

  .rent-gallery__all {
    top: auto;
    bottom: 14px;
    inset-inline-end: 14px;
    height: 40px;
    font-size: 13.5px;
  }
}

/* عارض الصور (بنفس شكل تطبيق شاري): الصفحة بتغمق، الصورة في النص، وصف الصور الصغيرة تحت */

/* الخلفية: بلور خفيف شيك فوق الصفحة (من غير أي لون كحلي) — تفاصيل الصفحة بتفضل باينة من وراه.
       الماستر بلان ومخطط الوحدة: بلور أبسط (الصفحة أوضح).
       معرض الصور: صور المعرض اللي في الصفحة بتستخبى طول ما العارض مفتوح ، فالصورة المفتوحة بتيجي مكانها ومفيش صورة بتبان وراها.
       المتصفح اللي ما بيدعمش البلور: خلفية فاتحة شفافة بداله */

.rent-viewer__dim {
  background-color: rgba(238, 243, 248, 0.82);
}

@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .rent-viewer__dim {
    background-color: rgba(238, 243, 248, 0.18);
    -webkit-backdrop-filter: blur(3px);
    backdrop-filter: blur(3px);
  }

  .rent-viewer[data-group="floor"] .rent-viewer__dim,
        .rent-viewer[data-group="master"] .rent-viewer__dim {
    background-color: rgba(238, 243, 248, 0.1);
    -webkit-backdrop-filter: blur(1.2px);
    backdrop-filter: blur(1.2px);
  }
}

body:has(.rent-viewer[data-group="gallery"]:not([class~="hidden"])) .rent-gallery-wrap {
  visibility: hidden;
}

/* التكبير: الصورة بتتكبّر وتتحرك بالصوابع (السكربت بيحط transform على الكادر) — المتصفح ما يكبّرش الصفحة نفسها */

.rent-viewer__frame {
  touch-action: none;
  will-change: transform;
  cursor: zoom-in;
}

.rent-viewer.is-zoomed .rent-viewer__frame {
  cursor: grab;
}

.rent-viewer {
  touch-action: none;
}

.rent-viewer__thumbs {
  touch-action: pan-x;
}

.rent-viewer__zoom {
  box-shadow: 0 10px 28px -14px rgba(18, 58, 92, 0.55);
}

.rent-viewer__zoom button + button {
  border-inline-start: 1px solid #e3eaf3;
}

/* الصورة المفتوحة: ظل أوضح عشان تبان فوق الخلفية الفاتحة */

.rent-viewer__frame {
  box-shadow: 0 24px 60px -24px rgba(13, 32, 51, 0.6), 0 2px 10px rgba(13, 32, 51, 0.12);
}

.rent-viewer [data-lightbox-count],
    .rent-viewer__frame,
    .rent-viewer__thumbs button {
  box-shadow: 0 10px 28px -14px rgba(18, 58, 92, 0.55);
}

.rent-viewer__stage {
  padding: 84px 16px 112px;
}

.rent-viewer__frame {
  display: flex;
  max-height: 100%;
  max-width: 100%;
  overflow: hidden;
  border-radius: 14px;
}

.rent-viewer__image {
  max-height: calc(calc(100vh / var(--z, 1)) - 196px);
  max-width: 100%;
  -o-object-fit: contain;
     object-fit: contain;
}

/* مخطط الوحدة: جوه كارت أبيض */

.rent-viewer[data-group="floor"] .rent-viewer__stage {
  padding-bottom: 32px;
}

.rent-viewer[data-group="floor"] .rent-viewer__frame {
  border-radius: 18px;
  background-color: #ffffff;
  padding: 18px;
  box-shadow: 0 26px 60px -30px rgba(10, 30, 55, 0.8);
}

.rent-viewer[data-group="floor"] .rent-viewer__image {
  max-height: calc(calc(100vh / var(--z, 1)) - 160px);
}

.rent-viewer[data-group="master"] .rent-viewer__stage {
  padding-bottom: 32px;
}

.rent-viewer__thumbs {
  display: flex;
  justify-content: safe center;
  gap: 10px;
  overflow-x: auto;
  padding: 14px 16px 18px;
  scrollbar-width: none;
}

.rent-viewer__thumbs::-webkit-scrollbar {
  display: none;
}

.rent-viewer__thumbs button {
  height: 64px;
  width: 64px;
  flex-shrink: 0;
  overflow: hidden;
  border: 2px solid #ffffff;
  border-radius: 14px;
  background-color: #e8f0fb;
}

.rent-viewer__thumbs button[aria-current="true"] {
  border-color: #4fc1ae;
  box-shadow: 0 0 0 2px #4fc1ae, 0 10px 28px -14px rgba(18, 58, 92, 0.55);
}

.rent-viewer__thumbs img {
  height: 100%;
  width: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

@media (min-width: 1024px) {
  /* ديسك توب: الصورة المفتوحة أكبر — مالية ارتفاع الشاشة (ناقص شريط العدّاد فوق وصف الصور الصغيرة تحت) حتى لو الصورة الأصلية صغيرة */

  .rent-viewer__stage {
    padding: 70px 56px 112px;
  }

  .rent-viewer__image {
    height: calc(calc(100vh / var(--z, 1)) - 182px);
    max-height: calc(calc(100vh / var(--z, 1)) - 182px);
    width: auto;
    max-width: calc(calc(100vw / var(--z, 1)) - 112px);
  }

  .rent-viewer[data-group="floor"] .rent-viewer__image,
        .rent-viewer[data-group="master"] .rent-viewer__image {
    height: auto;
  }

  .rent-viewer__thumbs button {
    height: 76px;
    width: 76px;
  }
}

/* تبديل الكروت مكانها (أرقام الصفحات على الديسك توب): القايمة بتبهت لحظة التحميل */

.listing-loading {
  opacity: 0.45;
  pointer-events: none;
  transition: opacity 0.15s ease;
}

/* التحميل وأنت نازل */

.search-more {
  display: flex;
  min-height: 72px;
  align-items: center;
  justify-content: center;
  padding-top: 18px;
  font-size: 14px;
  font-weight: 600;
  color: #5b6b7c;
}

.search-more > * {
  display: none;
}

.search-more[data-state="idle"] .search-more__loading,
    .search-more[data-state="loading"] .search-more__loading {
  display: flex;
  align-items: center;
  gap: 10px;
}

.search-more[data-state="done"] .search-more__done {
  display: block;
}

.search-more[data-state="error"] .search-more__error {
  display: block;
  color: #1f63c6;
  text-decoration: underline;
}

.search-more__spin {
  height: 20px;
  width: 20px;
  border: 2.5px solid #d3dfee;
  border-top-color: #1f63c6;
  border-radius: 999px;
  animation: search-spin 0.8s linear infinite;
}

@keyframes search-spin {
  to {
    transform: rotate(360deg);
  }
}

/* زرار التحويل العايم (موبايل) بشكل التطبيق: عرض الخريطة —•— لوجو شاري —•— عرض الكمبوندات */

.search-switch {
  position: fixed;
  inset-inline: 0;
  bottom: calc(78px + env(safe-area-inset-bottom, 0px));
  z-index: 29;
  display: flex;
  width: -moz-max-content;
  width: max-content;
  max-width: calc(calc(100vw / var(--z, 1)) - 16px);
  margin-inline: auto;
  align-items: center;
  gap: 6px;
  border: 1px solid #e4e9ef;
  border-radius: 999px;
  background-color: #f6f9fd;
  padding: 5px;
  font-size: 12.5px;
  font-weight: 700;
  line-height: 1.5;
  white-space: nowrap;
  color: #123a5c;
  box-shadow: 0 14px 30px -14px rgba(18, 58, 92, 0.55);
}

.search-switch__side {
  display: flex;
  align-items: center;
  gap: 6px;
}

.search-switch__icon {
  display: flex;
  height: 36px;
  width: 36px;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background-color: #e8f0fb;
  box-shadow: 0 3px 8px -3px rgba(18, 58, 92, 0.35);
}

.search-switch__link {
  position: relative;
  height: 2px;
  width: 14px;
  flex-shrink: 0;
  border-radius: 2px;
  background-color: #45b3a6;
}

.search-switch__link::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  height: 6px;
  width: 6px;
  transform: translate(-50%, -50%);
  border-radius: 999px;
  background-color: #3d9bd6;
}

.search-switch__logo {
  height: 28px;
  width: auto;
  flex-shrink: 0;
}

@media (max-width: 379px) {
  .search-switch__link {
    display: none;
  }
}

/* ---- ديسك توب: عمود الفلاتر ثابت على الجنب والنتايج جنبه ---- */

@media (min-width: 1024px) {
  .search-layout {
    display: grid;
    grid-template-columns: 256px minmax(0, 1fr);
    -moz-column-gap: 20px;
         column-gap: 20px;
    align-items: start;
  }

  /* تحت عمود الفلاتر والنتايج: المقال والأسئلة ولينكات البحث بعرض الصفحة كلها (بتبدأ من ناحية الفلتر) */

  .search-after {
    grid-column: 1 / -1;
    grid-row: 3;
    min-width: 0;
  }

  /* فوق بعرض الصفحة: البحث + الترتيب + الخريطة + التحويل، وتحتهم العنوان — وبعدين عمود الفلاتر والنتايج */

  .search-head {
    display: grid;
    grid-column: 1 / -1;
    grid-row: 1;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "bar quick" "title title" "subs subs" "notice notice";
    align-items: center;
    gap: 14px 16px;
    margin-bottom: 18px;
  }

  .search-bar {
    position: relative;
    top: auto;
    z-index: 25;
    grid-area: bar;
    margin: 0;
    padding: 0;
  }

  .search-suggest {
    inset-inline: 0;
    top: calc(100% + 6px);
  }

  .search-input {
    height: 48px;
    border-radius: 12px;
    background-color: #fff;
  }

  .search-sort {
    order: 1;
  }

  .search-tools {
    order: 2;
  }

  .search-quick {
    grid-area: quick;
    gap: 10px;
    margin: 0;
  }

  .search-title {
    grid-area: title;
    margin: 0;
  }

  .search-subs {
    grid-area: subs;
    margin: 0;
    padding: 0;
  }

  .search-notice {
    grid-area: notice;
    margin: 0;
  }

  .search-results {
    grid-column: 2;
    grid-row: 2;
    margin: 0;
  }

  /* عمود الفلاتر: بسيط — عنوان القسم وجنبه "مسح"، قوايم بمربعات اختيار، وخط فاصل بين الأقسام. ماشي مع الصفحة (مش ثابت) */

  .search-side {
    position: static !important;
    inset: auto !important;
    z-index: auto !important;
    display: block !important;
    grid-column: 1;
    grid-row: 2;
  }

  .search-side > .area-sheet {
    position: static !important;
    display: block !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    animation: none !important;
  }

  /* رأس العمود: العنوان + "مسح الكل" + زرار الإخفاء */

  .search-side__head {
    align-items: center;
    gap: 8px;
    border-bottom: 1px solid #e4e9ef;
    padding-bottom: 12px;
    margin-bottom: 4px;
  }

  .search-side__title {
    display: flex;
    min-width: 0;
    flex: 1;
    align-items: center;
    gap: 8px;
    font-size: 17px;
    font-weight: 800;
    line-height: 1.5;
    color: #123a5c;
  }

  .search-side__title svg {
    color: #1f5fc4;
  }

  .search-side__clear {
    flex-shrink: 0;
    font-size: 13px;
    font-weight: 700;
    line-height: 1.5;
    color: #1f5fc4;
    text-decoration: underline;
    text-underline-offset: 3px;
  }

  .search-side__hide {
    display: flex;
    height: 34px;
    width: 34px;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    border: 1px solid #e4e9ef;
    border-radius: 10px;
    background-color: #fff;
    color: #123a5c;
    transition: border-color 0.15s, color 0.15s;
  }

  .search-side__hide:hover {
    border-color: #1f5fc4;
    color: #1f5fc4;
  }

  /* العمود مخفي: النتايج بعرض الصفحة كله ، وزرار "الفلتر" بيظهر فوق جنب الترتيب */

  .search-tool--side {
    display: none;
  }

  .search-layout.is-side-hidden {
    grid-template-columns: minmax(0, 1fr);
  }

  .search-layout.is-side-hidden .search-side {
    display: none !important;
  }

  .search-layout.is-side-hidden .search-results {
    grid-column: 1;
  }

  .search-layout.is-side-hidden .search-tool--side {
    display: flex;
    border-color: #1e4166;
    color: #1e4166;
  }

  .search-side__scroll {
    overflow: visible !important;
  }

  .search-side__list {
    display: flex;
    flex-direction: column;
  }

  /* ترتيب الأقسام في العمود */

  .search-side [data-key="area-list"] {
    order: 1;
  }

  .search-side [data-key="developer-list"] {
    order: 2;
  }

  .search-side [data-key="project-list"] {
    order: 2;
  }

  .search-side .area-tabs {
    order: 3;
  }

  .search-side .area-toggle {
    order: 4;
    margin: 10px 0 0;
  }

  .search-side [data-key="bedrooms"] {
    order: 5;
  }

  .search-side [data-key="bathrooms"] {
    order: 6;
  }

  .search-side [data-key="type"] {
    order: 7;
  }

  .search-side [data-key="finishing"] {
    order: 8;
  }

  .search-side [data-key="price"] {
    order: 9;
  }

  .search-side [data-key="payment"] {
    order: 10;
  }

  .search-side [data-key="years"] {
    order: 11;
  }

  .search-side [data-key="delivery"] {
    order: 12;
  }

  .search-side [data-key="size"] {
    order: 13;
  }

  .search-side [data-key="amenities"] {
    order: 14;
  }

  /* القسم: من غير كارت وأيقونة — خط فاصل بس */

  .search-side .area-fsec {
    margin: 0;
    border: 0;
    border-bottom: 1px solid #e4e9ef;
    border-radius: 0;
    background: transparent;
    padding: 16px 0 18px;
  }

  .search-side [data-key="area-list"] {
    padding-top: 0;
  }

  .search-side [data-key="amenities"] {
    border-bottom: 0;
  }

  .search-side .area-fsec > div:first-child {
    margin-bottom: 10px;
    align-items: center;
  }

  .search-side .area-fsec > div:first-child > div > span {
    display: none;
  }

  .search-side .area-fsec [data-filter-title] {
    padding-bottom: 0;
    font-size: 15.5px;
  }

  .search-side .area-fsec [data-filter-title]::after {
    display: none;
  }

  .search-side [data-filter-clear] {
    margin-top: 0;
    font-size: 13px;
    text-decoration: underline;
    text-underline-offset: 3px;
  }

  /* نوع البيع */

  .search-side .area-tabs {
    margin: 16px 0 0;
    border-radius: 14px;
    padding: 4px;
  }

  .search-side .area-tabs span {
    height: 38px;
    border-radius: 10px;
    font-size: 13px;
  }

  .search-side .area-toggle span {
    height: 36px;
    padding-inline: 4px;
    font-size: 12.5px;
    white-space: nowrap;
  }

  /* مربعات الاختيار العادية في الفلتر (المنطقة / المطور / المشروع / المرافق) بنفس شكل مربعات نوع العقار والتشطيب */

  .search-side input[type="checkbox"]:not(.sr-only) {
    -moz-appearance: none;
         appearance: none;
    -webkit-appearance: none;
    height: 18px;
    width: 18px;
    flex-shrink: 0;
    cursor: pointer;
    border: 1.5px solid #b9c9d8;
    border-radius: 5px;
    background: #fff center / 13px no-repeat;
  }

  .search-side input[type="checkbox"]:not(.sr-only):hover {
    border-color: #1f63c6;
  }

  .search-side input[type="checkbox"]:not(.sr-only):checked {
    border-color: #1e4166;
    background-color: #1e4166;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E");
  }

  /* نوع العقار / التشطيب / التسليم: قايمة تحت بعض بمربعات اختيار (نفس الحقول، الشكل بس) */

  .search-side [data-key="type"] .flex-wrap,
        .search-side [data-key="finishing"] .flex-wrap,
        .search-side [data-key="delivery"] .flex-wrap {
    display: block;
  }

  .search-side [data-key="type"] label:not(.hidden),
        .search-side [data-key="finishing"] label:not(.hidden),
        .search-side [data-key="delivery"] label:not(.hidden) {
    display: block;
  }

  .search-side .area-chip:not(.area-chip--box) {
    display: flex;
    height: auto;
    min-height: 34px;
    gap: 10px;
    border: 0;
    border-radius: 0;
    background: transparent;
    padding: 0;
    font-size: 14.5px;
    font-weight: 500;
    color: #123a5c;
  }

  .search-side .area-chip:not(.area-chip--box)::before {
    content: "";
    height: 18px;
    width: 18px;
    flex-shrink: 0;
    border: 1.5px solid #b9c9d8;
    border-radius: 5px;
    background: #fff center / 13px no-repeat;
  }

  .search-side label:hover > .area-chip:not(.area-chip--box)::before {
    border-color: #1f63c6;
  }

  .search-side input:checked + .area-chip:not(.area-chip--box) {
    border: 0;
    background: transparent;
    font-weight: 700;
    color: #123a5c;
  }

  .search-side input:checked + .area-chip:not(.area-chip--box)::before {
    border-color: #1e4166;
    background-color: #1e4166;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E");
  }

  /* الغرف / الحمامات / سنوات التقسيط: دواير صغيرة */

  .search-side .area-fsec .flex-wrap {
    gap: 8px;
  }

  .search-side .area-chip--box {
    height: 36px;
    min-width: 36px;
    border-radius: 999px;
    padding: 0 8px;
    font-size: 13.5px;
  }

  .search-side .area-field {
    height: 44px;
    padding-inline: 10px;
    font-size: 13px;
  }

  .search-side .area-field input {
    font-size: 13px;
  }

  /* المرافق */

  .search-side [data-key="amenities"] label {
    min-height: 34px;
    gap: 10px;
    font-size: 14.5px;
    font-weight: 500;
  }

  .search-side [data-key="amenities"] label input {
    height: 18px;
    width: 18px;
  }

  /* المنطقة / المطور جوه العمود: أول 3 اختيارات، والباقي من "عرض المزيد" */

  .search-list > div {
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
  }

  .search-list label {
    min-height: 34px;
    flex-direction: row-reverse;
    justify-content: flex-end;
    gap: 10px;
    border-bottom: 0;
    padding-block: 0;
  }

  .search-list label img,
        .search-list label > span[dir="ltr"] {
    display: none;
  }

  .search-list label > span.flex-1 {
    flex: 0 1 auto;
    font-size: 14.5px;
    font-weight: 500;
  }

  .search-list label input {
    height: 18px;
    width: 18px;
  }

  .search-list label:nth-child(n + 4) {
    display: none;
  }

  /* عنوان القسم زرار بيفتح نافذة الاختيار */

  .search-list__title {
    display: flex;
    align-items: center;
    gap: 6px;
    color: #123a5c;
    transition: color 0.15s;
  }

  .search-list__title [data-filter-title] {
    font-size: 15.5px;
    font-weight: 700;
    line-height: 1.5;
  }

  .search-list__title svg {
    color: #1f63c6;
  }

  .search-list__title:hover {
    color: #1f63c6;
  }

  .search-list__more {
    margin-top: 6px;
    font-size: 13px;
    font-weight: 600;
    color: #1f63c6;
    text-decoration: underline;
    text-underline-offset: 3px;
  }

  /* "مسح كل الفلاتر": ثابت في آخر العمود */

  /* "مسح الكل" العايم تحت اتشال — بقى في رأس العمود */

  .search-side__reset {
    display: none !important;
  }

  .search-side__reset .clear-btn {
    height: 42px;
    padding-inline: 18px;
    font-size: 14px;
    box-shadow: 0 10px 22px -10px rgba(18, 58, 92, 0.45);
  }

  .search-promo {
    padding: 18px 22px;
  }

  /* كارت النتيجة بالعرض: الصورة على جنب والتفاصيل جنبها (كارت الوحدة وكارت المشروع) */

  /* الكارت العريض: مستطيل واطي — الصورة على جنب، وجنبها البيانات، وآخر سطر السعر وجنبه زراير التواصل */

  .search-results [data-results] .area-card {
    flex-direction: row;
  }

  .search-results [data-results] .area-card > div:first-child {
    width: 34%;
    max-width: 252px;
    min-height: 188px;
    flex-shrink: 0;
    aspect-ratio: auto;
  }

  .search-results [data-results] .area-card > div:last-child {
    min-width: 0;
    padding: 16px 18px;
  }

  .search-results [data-results] .area-card__foot {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 14px;
    margin-top: auto;
    border-top: 1px solid #e4e9ef;
    padding-top: 10px;
  }

  .search-results [data-results] .area-card > div:last-child > :nth-last-child(2) {
    margin-bottom: 12px;
  }

  .search-results [data-results] .area-card__price {
    min-width: 0;
    flex: 1 1 auto;
    margin-top: 0 !important;
    border-top: 0 !important;
    padding-top: 0 !important;
  }

  .search-results [data-results] .area-card__actions {
    display: flex !important;
    flex-shrink: 0;
    gap: 8px;
    margin-top: 0 !important;
    padding-top: 0 !important;
  }

  .search-results [data-results] .area-card__actions a {
    height: 40px;
    padding-inline: 12px;
    font-size: 13.5px;
  }

  /* السعرين في كارت الكمبوند العريض: في سطر واحد من غير ما العملة تنزل تحت */

  .search-results [data-results] .area-card__price--two {
    -moz-column-gap: 10px;
         column-gap: 10px;
  }

  .search-results [data-results] .area-card__price--two > div + div {
    padding-inline-start: 10px;
  }

  .search-results [data-results] .area-card__price--two p {
    flex-wrap: nowrap;
    white-space: nowrap;
    font-size: 17px;
  }

  .search-results [data-results] .area-card__price--two p span + span {
    font-size: 11.5px;
  }
}

@media (min-width: 1024px) and (max-width: 1179px) {
  /* ديسك توب ضيق: زراير التواصل في الكارت العريض بالأيقونة بس عشان السعر والزراير يفضلوا في سطر واحد */

  .search-results [data-results] .area-card__actions a {
    width: 42px;
    padding-inline: 0;
  }

  .search-results [data-results] .area-card__actions a span {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
  }
}

/* ── app.css · جزء 10 من 16: فورم الاجتماع ، زرار المقارنة العايم ، قايمة المشاركة ، شاري AI (المصدر: resources/css/shary/app/10-meeting-share-ai.css — عدّل هنا وشغّل tools/minify-assets.sh) */
/* فورم طلب الاجتماع: موبايل بيطلع من تحت — ديسك توب كارت بيظهر في نص الشاشة فوق الصفحة */

.meeting-panel {
  animation: area-sheet-up 0.28s cubic-bezier(0.2, 0.8, 0.2, 1);
}

@media (min-width: 1024px) {
  .meeting-panel {
    animation: meeting-pop 0.32s cubic-bezier(0.2, 0.8, 0.2, 1);
  }
}

@keyframes meeting-pop {
  from {
    transform: translateY(36px) scale(0.98);
    opacity: 0;
  }

  to {
    transform: translateY(0) scale(1);
    opacity: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  .meeting-panel {
    animation: none;
  }
}

/* زرار المقارنة العايم ("ابدأ المقارنة" + "إلغاء") */

.compare-float {
  box-shadow: 0 14px 30px -12px rgba(18, 58, 92, 0.55);
}

/* قايمة صغيرة بتطلع جنب الزرار على الديسك توب (المشاركة: فيسبوك / X / واتساب / نسخ الرابط — والاتصال: اتصل / واتساب / نسخ الرقم) */

.shary-menu {
  position: fixed;
  z-index: 80;
  min-width: 216px;
  border: 1px solid #d3dfee;
  border-radius: 16px;
  background-color: #ffffff;
  padding: 6px;
  box-shadow: 0 22px 44px -16px rgba(18, 58, 92, 0.45);
  animation: shary-menu-in 0.16s ease-out;
}

.shary-menu__head {
  padding: 8px 10px 6px;
  font-size: 12.5px;
  font-weight: 700;
  line-height: 1.4;
  color: #5b6b7c;
}

.shary-menu__item {
  display: flex;
  min-height: 44px;
  width: 100%;
  cursor: pointer;
  align-items: center;
  gap: 12px;
  border-radius: 11px;
  padding: 6px 10px;
  font-size: 14.5px;
  font-weight: 700;
  line-height: 1.4;
  color: #123a5c;
  text-align: start;
  transition: background-color 0.15s;
}

.shary-menu__item:hover,
    .shary-menu__item:focus-visible {
  background-color: #e8f0fb;
  outline: none;
}

.shary-menu__item .shary-share__icon {
  height: 32px;
  width: 32px;
  flex-shrink: 0;
  font-size: 15px;
}

.shary-menu__item .shary-share__icon svg {
  height: 16px;
  width: 16px;
}

@keyframes shary-menu-in {
  from {
    opacity: 0;
    transform: translateY(-6px) scale(0.97);
  }
}

@media (prefers-reduced-motion: reduce) {
  .shary-menu {
    animation: none;
  }
}

/* قايمة المشاركة (موبايل): بتطلع من تحت */

.shary-share {
  position: fixed;
  inset: 0;
  z-index: 75;
  display: none;
}

.shary-share.is-open {
  display: block;
}

.shary-share__dim {
  position: absolute;
  inset: 0;
  background-color: rgba(15, 47, 75, 0.55);
}

.shary-share__panel {
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  margin-inline: auto;
  max-width: 520px;
  border-radius: 28px 28px 0 0;
  background-color: #fff;
  padding: 10px 20px calc(22px + env(safe-area-inset-bottom, 0px));
  color: #123a5c;
  box-shadow: 0 -18px 50px -18px rgba(15, 47, 75, 0.5);
  animation: area-sheet-up 0.28s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.shary-share__grip {
  display: block;
  height: 6px;
  width: 44px;
  margin: 0 auto 10px;
  border-radius: 999px;
  background-color: #e8f0fb;
}

.shary-share__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.shary-share__head h3 {
  font-size: 20px;
  font-weight: 700;
  line-height: 1.5;
}

.shary-share__close {
  display: flex;
  height: 44px;
  width: 44px;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  margin-inline-end: -10px;
}

.shary-share__link {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 8px;
  border: 1px solid #e4e9ef;
  border-radius: 16px;
  background-color: #f6f9fd;
  padding: 10px 14px;
}

.shary-share__link > div {
  min-width: 0;
  flex: 1;
}

.shary-share__logo {
  display: flex;
  height: 42px;
  width: 42px;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: 1px solid #e4e9ef;
  background-color: #fff;
}

.shary-share__link strong,
    .shary-share__link span {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.shary-share__link strong {
  font-size: 15px;
  font-weight: 700;
  line-height: 1.5;
}

.shary-share__link span {
  font-size: 12.5px;
  font-weight: 500;
  line-height: 1.5;
  color: #5b6b7c;
  text-align: start;
}

[dir="rtl"] .shary-share__link span {
  text-align: right;
}

.shary-share__link button {
  flex-shrink: 0;
  height: 40px;
  min-width: 76px;
  border-radius: 999px;
  background-color: #1e4166;
  padding: 0 16px;
  font-size: 14px;
  font-weight: 700;
  color: #fff;
}

.shary-share__link button.is-done {
  background-color: #1f9d6b;
}

.shary-share__grid {
  display: flex;
  gap: 4px;
  margin-top: 18px;
}

.shary-share__grid a,
    .shary-share__grid button {
  display: flex;
  min-width: 0;
  flex: 1 1 0;
  flex-direction: column;
  align-items: center;
  gap: 7px;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.4;
  color: #123a5c;
}

.shary-share__icon {
  display: flex;
  height: 52px;
  width: 52px;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  font-size: 23px;
  color: #fff;
}

.shary-share__icon--whatsapp {
  background-color: #25d366;
}

.shary-share__icon--telegram {
  background-color: #2aabee;
}

.shary-share__icon--facebook {
  background-color: #1877f2;
}

.shary-share__icon--x {
  background-color: #0f1419;
}

.shary-share__icon--mail {
  background-color: #5b6b7c;
}

.shary-share__icon--more {
  background-color: #e8f0fb;
  color: #123a5c;
}

@media (prefers-reduced-motion: reduce) {
  .shary-share__panel {
    animation: none;
  }
}

/* ---- صفحة Shary AI (partials/ai-panel) — بنفس ألوان وستراكشر نسخة شاري AI المعتمدة ----
       الألوان: كحلي #123A5C / #0D2B44 ، تركواز #3AAFA0 / #12796C ، ذهبي للسعر #C9922B ، خلفية #F4F7F9 ، خطوط #E4EAEF */

.sai {
  --sai-navy: #123a5c;
  --sai-navy-deep: #0d2b44;
  --sai-blue: #5aa9ee;
  --sai-blue-dark: #1f5fc4;
  --sai-gold: #c9922b;
  --sai-bg: #e8f0fb;
  /* اللبني الموحد: الخانات والكروت الصغيرة جوه المحادثة */
  --sai-line: #e4eaef;
  --sai-muted: #6f8091;
  display: flex;
  align-items: stretch;
  justify-content: center;
  color: var(--sai-navy);
}

.sai.hidden {
  display: none;
}

.sai__dim {
  position: absolute;
  inset: 0;
  background-color: rgba(13, 43, 68, 0.6);
}

.sai__app {
  position: relative;
  display: flex;
  min-height: 0;
  width: 100%;
  flex-direction: column;
  overflow: hidden;
  /* خلفية صفحة Shary AI: أبيض صريح (مش لون كاتم) */
  background-color: #fff;
}

/* الهيدر */

.sai__head {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  gap: 10px;
  border-bottom: 1px solid var(--sai-line);
  background-color: #fff;
  padding: 12px 14px;
}

.sai__back {
  display: flex;
  height: 38px;
  width: 34px;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  color: var(--sai-navy);
}

.sai__av,
    .sai__avatar {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  background-image: linear-gradient(145deg, var(--sai-blue), var(--sai-blue-dark));
  font-weight: 800;
  line-height: 1;
  color: #fff;
}

.sai__av {
  height: 42px;
  width: 42px;
  border-radius: 13px;
  font-size: 15px;
}

.sai__title {
  display: flex;
  min-width: 0;
  flex: 1;
  flex-direction: column;
}

.sai__title b {
  font-size: 16px;
  font-weight: 800;
  line-height: 1.4;
}

.sai__title small {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 11.5px;
  font-weight: 700;
  line-height: 1.5;
  color: var(--sai-blue-dark);
}

.sai__title small i {
  height: 7px;
  width: 7px;
  border-radius: 50%;
  background-color: var(--sai-blue);
  box-shadow: 0 0 0 3px rgba(90, 169, 238, 0.28);
}

.sai__reset {
  flex-shrink: 0;
  border-radius: 10px;
  border: 1px solid var(--sai-line);
  background-color: var(--sai-bg);
  padding: 7px 12px;
  font-size: 12.5px;
  font-weight: 700;
  line-height: 1.5;
  color: var(--sai-muted);
  transition: color 0.15s, border-color 0.15s;
}

.sai__reset:hover {
  border-color: var(--sai-blue);
  color: var(--sai-blue-dark);
}

/* أسئلة الاختيار */

.sai__onb,
    .sai__chat {
  min-height: 0;
  flex: 1 1 0%;
  overflow-y: auto;
}

.sai__onb {
  padding: 18px 16px 22px;
}

.sai__hero {
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  gap: 12px;
  border-radius: 22px;
  background-image: linear-gradient(90deg, var(--sai-blue) 0%, var(--sai-blue-dark) 100%);
  padding: 13px 15px;
  color: #fff;
}

[dir="ltr"] .sai__hero {
  background-image: linear-gradient(270deg, var(--sai-blue) 0%, var(--sai-blue-dark) 100%);
}

.sai__hero-dot {
  display: flex;
  height: 46px;
  width: 46px;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background-color: #fff;
  -o-object-fit: cover;
     object-fit: cover;
}

.sai__hero b {
  display: block;
  font-size: 17px;
  font-weight: 800;
  line-height: 1.4;
}

.sai__hero small {
  display: block;
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1.6;
  opacity: 0.92;
}

.sai__q {
  margin-bottom: 9px;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0 8px;
}

.sai__q b {
  font-size: 14.5px;
  font-weight: 800;
  line-height: 1.5;
}

.sai__q span {
  font-size: 11.5px;
  font-weight: 600;
  color: var(--sai-muted);
}

.sai__opts {
  margin-bottom: 18px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.sai__opts button,
    .sai__chips button {
  border-radius: 999px;
  border: 1.5px solid var(--sai-blue);
  background-color: #fff;
  padding: 9px 16px;
  font-size: 13.5px;
  font-weight: 700;
  line-height: 1.5;
  color: var(--sai-navy);
  transition: background-color 0.15s, color 0.15s, box-shadow 0.15s;
}

.sai__opts button:hover {
  box-shadow: 0 6px 14px -8px rgba(31, 95, 196, 0.6);
}

.sai__opts button.is-on {
  border-color: transparent;
  background-image: linear-gradient(120deg, var(--sai-blue), var(--sai-blue-dark));
  color: #fff;
}

.sai__step--new {
  animation: sai-in 0.25s ease;
}

@keyframes sai-in {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
}

.sai__start {
  margin-top: 4px;
  width: 100%;
  border-radius: 15px;
  background-color: var(--sai-blue-dark);
  background-image: linear-gradient(270deg, var(--sai-blue-dark), var(--sai-blue));
  padding: 14px;
  font-size: 15.5px;
  font-weight: 800;
  line-height: 1.5;
  color: #fff;
  transition: opacity 0.15s, background-color 0.15s;
}

.sai__start:hover {
  filter: brightness(1.05);
}

.sai__start:disabled {
  cursor: default;
  opacity: 0.45;
}

.sai__skip {
  width: 100%;
  padding: 14px 0 0;
  font-size: 13.5px;
  font-weight: 700;
  line-height: 1.5;
  color: var(--sai-muted);
}

.sai__skip:hover {
  color: var(--sai-blue-dark);
}

/* الشات */

.sai__chat {
  padding: 16px 12px 8px;
}

.sai__list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.sai__row {
  display: flex;
  max-width: 92%;
  align-items: flex-start;
  gap: 9px;
  animation: sai-in 0.22s ease;
}

.sai__row--bot {
  align-self: flex-start;
}

.sai__row--me {
  flex-direction: row-reverse;
  align-self: flex-end;
}

.sai__avatar {
  height: 34px;
  width: 34px;
  border-radius: 11px;
  background-position: center;
  background-size: cover;
  font-size: 12px;
}

.sai__avatar--me {
  background-image: linear-gradient(145deg, #2c5b80, var(--sai-navy));
}

.sai__avatar--img {
  color: transparent;
}

.sai__col {
  display: flex;
  min-width: 0;
  flex-direction: column;
}

.sai__row--me .sai__col {
  align-items: flex-end;
}

.sai__who {
  margin: 0 3px 4px;
  font-size: 11px;
  font-weight: 800;
  line-height: 1.4;
  color: var(--sai-muted);
}

.sai__msg {
  max-width: 100%;
  border-radius: 16px;
  padding: 10px 14px;
  font-size: 14.5px;
  font-weight: 600;
  line-height: 1.85;
  overflow-wrap: anywhere;
}

.sai__msg p + p {
  margin-top: 6px;
}

.sai__msg b {
  font-weight: 800;
}

.sai__msg--bot {
  border: 1px solid var(--sai-line);
  border-start-start-radius: 5px;
  background-color: #fff;
}

.sai__msg--me {
  border-start-start-radius: 5px;
  background-color: var(--sai-navy);
  color: #fff;
}

.sai__typing {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 14px 16px;
}

.sai__typing i {
  height: 7px;
  width: 7px;
  border-radius: 50%;
  background-color: var(--sai-blue);
  animation: sai-dot 1s ease-in-out infinite;
}

.sai__typing i:nth-child(2) {
  animation-delay: 0.15s;
}

.sai__typing i:nth-child(3) {
  animation-delay: 0.3s;
}

@keyframes sai-dot {
  0%,
        60%,
        100% {
    opacity: 0.35;
    transform: none;
  }

  30% {
    opacity: 1;
    transform: translateY(-4px);
  }
}

/* كروت النتايج (وحدة / مشروع) */

.sai__cards {
  display: flex;
  flex-direction: column;
  gap: 12px;
  animation: sai-in 0.25s ease;
}

.sai__card {
  overflow: hidden;
  border-radius: 18px;
  border: 1px solid var(--sai-line);
  background-color: #fff;
  box-shadow: 0 10px 22px -18px rgba(18, 58, 92, 0.55);
}

.sai__card-photo {
  position: relative;
  display: block;
  aspect-ratio: 16 / 9;
  background-color: #dbe6f6;
}

.sai__card-photo img {
  height: 100%;
  width: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

.sai__card-badge {
  position: absolute;
  top: 10px;
  inset-inline-start: 10px;
  border-radius: 999px;
  background-color: var(--sai-blue-dark);
  padding: 3px 11px;
  font-size: 11.5px;
  font-weight: 700;
  line-height: 1.6;
  color: #fff;
}

.sai__card-body {
  padding: 12px 13px 13px;
}

.sai__card-dev {
  display: flex;
  align-items: center;
  gap: 8px;
  border-bottom: 1px solid var(--sai-line);
  padding-bottom: 9px;
}

.sai__card-logo {
  display: flex;
  height: 32px;
  width: 32px;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background-color: var(--sai-navy);
  font-size: 11px;
  font-weight: 800;
  line-height: 1;
  color: #fff;
  direction: ltr;
}

.sai__card-devname {
  min-width: 0;
  flex: 1;
  font-size: 12.5px;
  font-weight: 700;
  line-height: 1.5;
  color: var(--sai-muted);
}

.sai__card-index {
  display: flex;
  flex-shrink: 0;
  flex-direction: column;
  align-items: center;
  border-inline-start: 1px solid var(--sai-line);
  padding-inline-start: 10px;
  line-height: 1.2;
}

.sai__card-index b {
  font-size: 19px;
  font-weight: 800;
  color: var(--sai-blue-dark);
}

.sai__card-index small {
  font-size: 10px;
  font-weight: 700;
  color: var(--sai-muted);
}

.sai__card-title {
  margin-top: 9px;
  font-size: 15.5px;
  font-weight: 800;
  line-height: 1.45;
}

.sai__card-title a:hover {
  color: var(--sai-blue-dark);
}

.sai__card-place {
  margin-top: 2px;
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.5;
  color: #2f6fa6;
}

.sai__card-price {
  margin-top: 8px;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px;
  line-height: 1.3;
}

.sai__card-price b {
  font-size: 22px;
  font-weight: 800;
  color: var(--sai-gold);
}

.sai__card-price span,
    .sai__card-price small {
  font-size: 12px;
  font-weight: 700;
}

.sai__card-price small {
  color: var(--sai-muted);
}

.sai__card-plan {
  font-size: 12px;
  font-weight: 700;
  line-height: 1.6;
  color: var(--sai-blue-dark);
}

.sai__card-cells {
  margin-top: 10px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  overflow: hidden;
  border-radius: 12px;
  border: 1px solid var(--sai-line);
}

.sai__card-cells li {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  padding: 8px 4px;
  color: var(--sai-blue-dark);
}

.sai__card-cells li + li {
  border-inline-start: 1px solid var(--sai-line);
}

.sai__card-cells b {
  font-size: 14.5px;
  font-weight: 800;
  line-height: 1.3;
  color: var(--sai-navy);
}

.sai__card-cells span {
  font-size: 11px;
  font-weight: 700;
  line-height: 1.4;
  color: var(--sai-muted);
}

.sai__card-types {
  margin-top: 9px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.sai__card-types span {
  border-radius: 999px;
  background-color: #e8f0fb;
  padding: 3px 11px;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.6;
  color: var(--sai-blue-dark);
}

.sai__ways {
  margin-top: 12px;
  display: flex;
  gap: 7px;
}

.sai__way {
  display: flex;
  height: 42px;
  min-width: 0;
  flex: 1 1 auto;
  padding-inline: 10px;
  align-items: center;
  justify-content: center;
  gap: 6px;
  white-space: nowrap;
  border-radius: 12px;
  font-size: 12.5px;
  font-weight: 800;
  line-height: 1.4;
}

.sai__way i {
  font-size: 18px;
  line-height: 1;
}

.sai__way--call {
  background-color: var(--sai-navy);
  color: #fff;
}

.sai__way--wa {
  background-color: #25c05f;
  color: #fff;
}

.sai__way--meet {
  border: 1.5px solid var(--sai-blue);
  background-color: #fff;
  color: var(--sai-blue-dark);
}

.sai__card-more {
  margin-top: 10px;
  display: block;
  text-align: center;
  font-size: 12.5px;
  font-weight: 800;
  line-height: 1.5;
  color: #2f6fa6;
}

.sai__card-more:hover {
  text-decoration: underline;
}

/* كارت حجز الميتنج */

.sai__meet {
  display: flex;
  align-items: center;
  gap: 12px;
  border-radius: 18px;
  background-image: linear-gradient(150deg, var(--sai-navy), var(--sai-navy-deep));
  padding: 14px 15px;
  color: #fff;
  animation: sai-in 0.25s ease;
}

.sai__meet-text {
  min-width: 0;
  flex: 1;
}

.sai__meet-text b {
  display: block;
  font-size: 14px;
  font-weight: 800;
  line-height: 1.5;
}

.sai__meet-text span {
  display: block;
  font-size: 11.5px;
  font-weight: 600;
  line-height: 1.6;
  color: #a9c3d4;
}

.sai__meet-btn {
  height: 42px;
  flex: 0 0 auto;
  border-radius: 12px;
  background-color: var(--sai-blue);
  padding-inline: 13px;
  color: var(--sai-navy-deep);
}

/* سؤال بأكتر من اختيار: علامة صح على المختار */

.sai__opts--multi button.is-on::before {
  content: "\2713";
  margin-inline-end: 6px;
  font-weight: 800;
}

.sai__opts button:disabled {
  cursor: default;
  border-color: var(--sai-line);
  color: #b3c0cb;
  text-decoration: line-through;
  box-shadow: none;
}

/* حجز الميتنج جوه الشات: كارت بخطوات (بخصوص إيه ← النوع ← اليوم ← الساعة ← البيانات) */

.sai__book,
    .sai__booked {
  border-radius: 18px;
  border: 1px solid var(--sai-line);
  background-color: #fff;
  padding: 14px;
  box-shadow: 0 10px 22px -18px rgba(18, 58, 92, 0.55);
  animation: sai-in 0.25s ease;
}

.sai__book-head {
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.sai__book-icon {
  display: flex;
  height: 38px;
  width: 38px;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  background-image: linear-gradient(145deg, var(--sai-blue), var(--sai-blue-dark));
  color: #fff;
}

.sai__book-head b {
  display: block;
  font-size: 14.5px;
  font-weight: 800;
  line-height: 1.5;
}

.sai__book-head small {
  display: block;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.5;
  color: var(--sai-muted);
}

.sai__book .sai__q {
  margin-bottom: 8px;
}

.sai__book .sai__q b {
  font-size: 13.5px;
}

.sai__book .sai__opts {
  margin-bottom: 14px;
}

.sai__book .sai__opts button {
  padding: 8px 14px;
  font-size: 13px;
}

/* الأيام: صف بيتسحب (اسم اليوم فوق التاريخ) */

.sai__days {
  margin-bottom: 14px;
  display: flex;
  gap: 7px;
  overflow-x: auto;
  padding-bottom: 2px;
  scrollbar-width: none;
}

.sai__days::-webkit-scrollbar {
  display: none;
}

.sai__days button {
  display: flex;
  min-width: 74px;
  flex-shrink: 0;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  border-radius: 14px;
  border: 1.5px solid var(--sai-line);
  background-color: #fff;
  padding: 8px 10px;
  font-size: 13px;
  font-weight: 800;
  line-height: 1.5;
  color: var(--sai-navy);
}

.sai__days button small {
  font-size: 11.5px;
  font-weight: 600;
  color: var(--sai-muted);
}

.sai__days button.is-on {
  border-color: transparent;
  background-image: linear-gradient(120deg, var(--sai-blue), var(--sai-blue-dark));
  color: #fff;
}

.sai__days button.is-on small {
  color: #fff;
  opacity: 0.9;
}

.sai__fields {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.sai__phone {
  display: flex;
  gap: 8px;
}

.sai__fields input,
    .sai__fields select {
  height: 46px;
  min-width: 0;
  border-radius: 13px;
  border: 1px solid var(--sai-line);
  background-color: var(--sai-bg);
  padding: 0 13px;
  font-size: 14.5px;
  font-weight: 700;
  line-height: 1.5;
  color: var(--sai-navy);
  outline: none;
}

.sai__fields input {
  width: 100%;
  flex-shrink: 0;
}

.sai__phone input {
  width: auto;
  flex: 1 1 0%;
}

.sai__fields select {
  width: 124px;
  flex-shrink: 0;
}

/* كود الدولة في Shary AI: زرار (علم + الكود بس) بيفتح قايمة فوقها خانة بحث */

.sai__code-box {
  position: relative;
  flex-shrink: 0;
}

.sai__code {
  display: flex;
  height: 46px;
  cursor: pointer;
  align-items: center;
  gap: 7px;
  border-radius: 13px;
  border: 1px solid var(--sai-line);
  background-color: var(--sai-bg);
  padding: 0 11px;
  direction: ltr;
}

.sai__code:focus-visible,
    .sai__code[aria-expanded="true"] {
  border-color: var(--sai-blue);
  background-color: #fff;
  outline: none;
}

.sai__code img,
    .sai__code-menu li img {
  height: 18px;
  width: 24px;
  flex-shrink: 0;
  border-radius: 3px;
  border: 1px solid var(--sai-line);
  -o-object-fit: cover;
     object-fit: cover;
}

.sai__code b {
  font-size: 14.5px;
  font-weight: 700;
  line-height: 1;
  color: var(--sai-navy);
}

.sai__code-arrow {
  height: 6px;
  width: 6px;
  flex-shrink: 0;
  border-bottom: 1.8px solid #7d8fa0;
  border-right: 1.8px solid #7d8fa0;
  transform: translateY(-2px) rotate(45deg);
}

.sai__code-menu {
  position: absolute;
  bottom: calc(100% + 6px);
  left: 0;
  z-index: 5;
  display: flex;
  width: 250px;
  max-width: calc(78vw / var(--z, 1));
  max-height: 270px;
  flex-direction: column;
  overflow: hidden;
  border-radius: 14px;
  border: 1px solid var(--sai-line);
  background-color: #fff;
  box-shadow: 0 16px 34px -14px rgba(13, 32, 51, 0.5);
}

.sai__code-menu[hidden] {
  display: none;
}

.sai__fields .sai__code-menu input {
  height: 40px;
  width: auto;
  flex-shrink: 0;
  margin: 8px 8px 4px;
  border-radius: 10px;
  font-size: 13.5px;
  direction: rtl;
}

[dir="ltr"] .sai__fields .sai__code-menu input,
    [lang="en"] .sai__fields .sai__code-menu input {
  direction: ltr;
}

.sai__code-menu ul {
  min-height: 0;
  flex: 1 1 0%;
  overflow-y: auto;
  padding: 2px 4px 6px;
}

.sai__code-menu li {
  display: flex;
  cursor: pointer;
  align-items: center;
  gap: 9px;
  border-radius: 9px;
  padding: 8px 9px;
  font-size: 13.5px;
  font-weight: 700;
  line-height: 1.4;
  color: var(--sai-navy);
  direction: rtl;
}

[lang="en"] .sai__code-menu li {
  direction: ltr;
}

.sai__code-menu li[hidden] {
  display: none;
}

.sai__code-menu li:hover,
    .sai__code-menu li:focus {
  background-color: var(--sai-bg);
  outline: none;
}

.sai__code-menu li span {
  min-width: 0;
  flex: 1 1 0%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sai__code-menu li b {
  flex-shrink: 0;
  color: #5b6b7c;
}

/* بحث فوق قايمة كود الدولة (كل فورمات الموقع — js/shary/phone-country.js) */

.phone-search {
  position: sticky;
  top: -4px;
  z-index: 1;
  background-color: #fff;
  padding: 6px 10px 6px;
}

.phone-search input {
  height: 40px;
  width: 100%;
  border-radius: 10px;
  border: 1px solid #dfe7ef;
  background-color: #e8f0fb;
  padding: 0 12px;
  font-size: 14px;
  font-weight: 600;
  color: #123a5c;
  outline: none;
}

.phone-search input:focus {
  border-color: #1f5fc4;
  background-color: #fff;
}

.sai__fields input:focus,
    .sai__fields select:focus {
  border-color: var(--sai-blue);
  background-color: #fff;
}

.sai__fields input::-moz-placeholder {
  font-weight: 600;
  color: #8a99a8;
}

.sai__fields input::placeholder {
  font-weight: 600;
  color: #8a99a8;
}

.sai__book-error {
  font-size: 12.5px;
  font-weight: 700;
  line-height: 1.6;
  color: #c0392b;
}

.sai__book-go {
  margin-top: 4px;
  display: flex;
  height: 48px;
  width: 100%;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border-radius: 14px;
  background-color: var(--sai-blue-dark);
  background-image: linear-gradient(270deg, var(--sai-blue-dark), var(--sai-blue));
  font-size: 15px;
  font-weight: 800;
  line-height: 1.5;
  color: #fff;
}

.sai__book-go:disabled {
  opacity: 0.55;
}

/* كارت تأكيد الحجز */

.sai__booked-head {
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 15px;
  font-weight: 800;
  line-height: 1.5;
}

.sai__booked-head span {
  display: flex;
  height: 34px;
  width: 34px;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background-color: #e8f0fb;
  color: var(--sai-blue-dark);
}

.sai__booked dl {
  border-radius: 14px;
  background-color: var(--sai-bg);
  padding: 4px 12px;
}

.sai__booked dl div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 0;
}

.sai__booked dl div + div {
  border-top: 1px solid var(--sai-line);
}

.sai__booked dt {
  flex-shrink: 0;
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1.6;
  color: var(--sai-muted);
}

.sai__booked dd {
  min-width: 0;
  text-align: end;
  font-size: 13.5px;
  font-weight: 800;
  line-height: 1.6;
}

.sai__booked-note {
  margin-top: 10px;
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1.7;
  color: var(--sai-muted);
}

.sai__booked .sai__ways {
  margin-top: 12px;
}

.sai__way--edit {
  border: 1.5px solid var(--sai-line);
  background-color: #fff;
  color: var(--sai-navy);
}

/* الاختصارات + خانة الكتابة */

.sai__chips {
  display: flex;
  flex-shrink: 0;
  gap: 7px;
  overflow-x: auto;
  padding: 8px 12px;
  scrollbar-width: none;
}

.sai__chips.hidden {
  display: none;
}

.sai__chips::-webkit-scrollbar {
  display: none;
}

.sai__chips button {
  flex-shrink: 0;
  white-space: nowrap;
  border-color: var(--sai-line);
  padding: 7px 13px;
  font-size: 12.5px;
}

.sai__chips button:hover {
  border-color: var(--sai-blue);
}

/* ملاحظة المايك (المايك مقفول / مفيش صوت / الخدمة مش مربوطة): سطر واضح فوق خانة الكتابة */

.sai__voice-note {
  flex-shrink: 0;
  margin: 0 14px 8px;
  border: 1px solid #f3e3bd;
  border-radius: 12px;
  background-color: #fff8e8;
  padding: 8px 12px;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.6;
  color: #123a5c;
}

.sai__voice-note[hidden] {
  display: none;
}

.sai__composer {
  display: flex;
  flex-shrink: 0;
  align-items: flex-end;
  gap: 8px;
  border-top: 1px solid var(--sai-line);
  background-color: #fff;
  padding: 10px 12px 8px;
}

.sai__composer textarea {
  max-height: 96px;
  min-width: 0;
  flex: 1;
  resize: none;
  border-radius: 14px;
  border: 1px solid var(--sai-line);
  background-color: #fff;
  padding: 11px 13px;
  font-size: 14.5px;
  font-weight: 600;
  line-height: 1.6;
  color: var(--sai-navy);
  outline: none;
}

.sai__composer textarea:focus {
  border-color: var(--sai-blue);
}

.sai__composer textarea::-moz-placeholder {
  color: #8a99a8;
}

.sai__composer textarea::placeholder {
  color: #8a99a8;
}

.sai__send,
    .sai__mic {
  display: flex;
  height: 46px;
  width: 46px;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  border-radius: 14px;
}

.sai__mic.hidden {
  display: none;
}

.sai__send {
  background-color: var(--sai-blue-dark);
  background-image: linear-gradient(270deg, var(--sai-blue-dark), var(--sai-blue));
  color: #fff;
  transition: opacity 0.15s;
}

.sai__mic {
  border: 1px solid var(--sai-line);
  color: var(--sai-blue-dark);
}

/* بيسجّل: الزرار بتركواز اللوجو (#4CBFB2) بينبض — ضغطة تانية بتبعت */

.sai__mic[aria-pressed="true"] {
  border-color: #4cbfb2;
  background-color: #4cbfb2;
  color: #fff;
  animation: sai-mic-pulse 1.4s ease-out infinite;
}

.sai__mic.is-busy {
  opacity: 0.55;
}

.sai__composer.is-recording textarea::-moz-placeholder {
  color: #38b0a3;
  opacity: 1;
}

.sai__composer.is-recording textarea::placeholder {
  color: #38b0a3;
  opacity: 1;
}

@keyframes sai-mic-pulse {
  0% {
    box-shadow: 0 0 0 0 rgba(76, 191, 178, 0.55);
  }

  100% {
    box-shadow: 0 0 0 12px rgba(76, 191, 178, 0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .sai__mic[aria-pressed="true"] {
    animation: none;
  }
}

.sai__note {
  flex-shrink: 0;
  background-color: #fff;
  padding: 0 16px calc(8px + env(safe-area-inset-bottom, 0px));
  text-align: center;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.6;
  color: #8a99a8;
}

/* ===== الإيجنت: شريط "طلبك" / سياق الصفحة / حالات الانتظار / كروت أذكى / مقارنة / أرقام السوق / تقييم / مستشار يكلمك ===== */

.sai__crit {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  gap: 8px;
  border-bottom: 1px solid var(--sai-line);
  background-color: #fff;
  padding: 8px 12px;
}

.sai__crit.hidden {
  display: none;
}

.sai__crit > b {
  flex-shrink: 0;
  font-size: 12px;
  font-weight: 800;
  line-height: 1.6;
  color: var(--sai-muted);
}

.sai__crit-list {
  display: flex;
  min-width: 0;
  flex: 1;
  gap: 6px;
  overflow-x: auto;
  scrollbar-width: none;
}

.sai__crit-list::-webkit-scrollbar {
  display: none;
}

.sai__crit-list span {
  flex-shrink: 0;
  white-space: nowrap;
  border-radius: 999px;
  background-color: #e8f0fb;
  padding: 4px 10px;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.6;
  color: var(--sai-blue-dark);
}

.sai__crit > button {
  flex-shrink: 0;
  border-radius: 999px;
  border: 1.5px solid var(--sai-blue);
  background-color: #fff;
  padding: 3px 12px;
  font-size: 12px;
  font-weight: 800;
  line-height: 1.6;
  color: var(--sai-blue-dark);
}

.sai__ctx {
  margin-bottom: 16px;
  border-radius: 16px;
  border: 1px solid #cfe1f6;
  background-color: #e8f0fb;
  padding: 12px 13px;
}

.sai__ctx.hidden {
  display: none;
}

.sai__ctx-head {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  font-size: 12.5px;
  font-weight: 700;
  line-height: 1.6;
  color: var(--sai-muted);
}

.sai__ctx-head b {
  font-weight: 800;
  color: var(--sai-navy);
}

.sai__asks {
  margin-top: 9px;
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.sai__asks button,
    .sai__act {
  border-radius: 999px;
  border: 1px solid #c5d9f1;
  background-color: #fff;
  padding: 7px 13px;
  text-align: start;
  font-size: 12.5px;
  font-weight: 700;
  line-height: 1.5;
  color: var(--sai-blue-dark);
}

.sai__asks button:hover,
    .sai__act:hover {
  border-color: var(--sai-blue);
  background-color: #e8f0fb;
}

.sai__asks--chat,
    .sai__acts,
    .sai__fb,
    .sai__src {
  margin-top: -4px;
  padding-inline-start: 43px;
}

.sai__acts {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.sai__act {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border-color: var(--sai-blue);
  font-weight: 800;
}

.sai__act span {
  display: inline;
}

/* حالة الانتظار جنب نقط الكتابة + الرسالة اللي بتتكتب */

.sai__status {
  margin-inline-start: 5px;
  font-size: 12.5px;
  font-weight: 700;
  line-height: 1.5;
  color: var(--sai-muted);
}

.sai__status:empty {
  display: none;
}

.sai__msg--live p:last-child::after {
  content: "";
  margin-inline-start: 3px;
  display: inline-block;
  height: 14px;
  width: 7px;
  border-radius: 2px;
  background-color: var(--sai-blue);
  vertical-align: -2px;
  animation: area-blink 0.9s ease-in-out infinite;
}

.sai__err {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  border-radius: 14px;
  border: 1px solid #f2c9c9;
  background-color: #fdf3f2;
  padding: 10px 13px;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.6;
  color: #a23b3b;
}

.sai__err span {
  min-width: 0;
  flex: 1 1 160px;
}

.sai__err button {
  flex-shrink: 0;
  border-radius: 999px;
  background-color: var(--sai-navy);
  padding: 6px 15px;
  font-size: 12.5px;
  font-weight: 800;
  color: #fff;
}

/* عنوان النتايج + "اعرض كمان" */

.sai__res {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding-inline: 3px;
}

.sai__res b {
  font-size: 13.5px;
  font-weight: 800;
  line-height: 1.5;
}

.sai__res a {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  gap: 5px;
  font-size: 12.5px;
  font-weight: 800;
  line-height: 1.5;
  color: var(--sai-blue-dark);
}

.sai__res a:hover {
  text-decoration: underline;
}

.sai__card {
  position: relative;
}

.sai__card[hidden] {
  display: none;
}

.sai__more {
  display: flex;
  height: 44px;
  width: 100%;
  align-items: center;
  justify-content: center;
  border-radius: 14px;
  border: 1.5px dashed #b9cfe8;
  background-color: #fff;
  font-size: 13.5px;
  font-weight: 800;
  line-height: 1.5;
  color: var(--sai-blue-dark);
}

.sai__more:hover {
  border-color: var(--sai-blue);
  background-color: #e8f0fb;
}

.sai__more--all {
  border-style: solid;
  border-color: var(--sai-navy);
  background-color: var(--sai-navy);
  color: #fff;
}

.sai__more--all:hover {
  border-color: var(--sai-navy-deep);
  background-color: var(--sai-navy-deep);
}

/* المفضلة + المقارنة على صورة الكارت */

.sai__card-tools {
  position: absolute;
  top: 9px;
  inset-inline-end: 9px;
  z-index: 2;
  display: flex;
  gap: 6px;
}

/* نسبة المطابقة + ليه رشحناها */

.sai__card-fit {
  margin-top: 10px;
}

.sai__card-fit p {
  display: flex;
  align-items: baseline;
  gap: 6px;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.5;
  color: var(--sai-muted);
}

.sai__card-fit p b {
  font-size: 14px;
  font-weight: 800;
  color: var(--sai-blue-dark);
}

.sai__card-fit > i {
  margin-top: 5px;
  display: block;
  height: 5px;
  overflow: hidden;
  border-radius: 999px;
  background-color: #e8f0fb;
}

.sai__card-fit > i > i {
  display: block;
  height: 100%;
  border-radius: 999px;
  background-image: linear-gradient(270deg, var(--sai-blue-dark), var(--sai-blue));
}

[dir="ltr"] .sai__card-fit > i > i {
  background-image: linear-gradient(90deg, var(--sai-blue-dark), var(--sai-blue));
}

.sai__card-why {
  margin-top: 10px;
  border-radius: 12px;
  background-color: #e8f0fb;
  padding: 9px 11px;
}

.sai__card-why > b {
  display: block;
  font-size: 12px;
  font-weight: 800;
  line-height: 1.5;
  color: var(--sai-blue-dark);
}

.sai__card-why li {
  margin-top: 4px;
  display: flex;
  align-items: flex-start;
  gap: 6px;
  font-size: 12.5px;
  font-weight: 700;
  line-height: 1.6;
}

.sai__card-why li svg {
  margin-top: 4px;
  flex-shrink: 0;
  color: #1e9e62;
}

/* بلوكات الرد: أرقام السوق + جدول المقارنة + مستشار يكلمك */

.sai__blk {
  border-radius: 18px;
  border: 1px solid var(--sai-line);
  background-color: #fff;
  padding: 13px;
  box-shadow: 0 10px 22px -18px rgba(18, 58, 92, 0.55);
  animation: sai-in 0.25s ease;
}

.sai__blk-title {
  margin-bottom: 10px;
  display: block;
  font-size: 14px;
  font-weight: 800;
  line-height: 1.5;
}

.sai__blk-note {
  margin-top: 9px;
  font-size: 11.5px;
  font-weight: 600;
  line-height: 1.6;
  color: var(--sai-muted);
}

.sai__stats-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.sai__stat {
  min-width: 0;
  border-radius: 13px;
  background-color: var(--sai-bg);
  padding: 10px 11px;
}

.sai__stat > span {
  display: block;
  font-size: 11.5px;
  font-weight: 700;
  line-height: 1.5;
  color: var(--sai-muted);
}

.sai__stat p {
  margin-top: 2px;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px;
}

.sai__stat p b {
  font-size: 18px;
  font-weight: 800;
  line-height: 1.4;
  color: var(--sai-navy);
}

.sai__stat p small {
  font-size: 11px;
  font-weight: 700;
  color: var(--sai-muted);
}

.sai__stat em {
  margin-top: 3px;
  display: block;
  font-size: 11.5px;
  font-style: normal;
  font-weight: 700;
  line-height: 1.5;
  color: var(--sai-muted);
}

.sai__stat em.is-up {
  color: #1e9e62;
}

.sai__stat em.is-down {
  color: #c0453b;
}

.sai__cmp-scroll {
  overflow-x: auto;
  border-radius: 12px;
  border: 1px solid var(--sai-line);
}

.sai__cmp table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12.5px;
  line-height: 1.5;
}

.sai__cmp th,
    .sai__cmp td {
  padding: 8px 10px;
  text-align: start;
  white-space: nowrap;
}

.sai__cmp thead th {
  background-color: var(--sai-navy);
  font-weight: 800;
  color: #fff;
}

.sai__cmp tbody th {
  font-weight: 700;
  color: var(--sai-muted);
}

.sai__cmp tbody td {
  font-weight: 800;
}

.sai__cmp tbody tr + tr {
  border-top: 1px solid var(--sai-line);
}

.sai__cmp td.is-best {
  background-color: #e7f5f1;
  color: #14774a;
}

.sai__src {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  font-size: 11.5px;
  font-weight: 700;
  line-height: 1.6;
  color: var(--sai-muted);
}

.sai__src a {
  color: var(--sai-blue-dark);
  text-decoration: underline;
}

/* التقييم تحت الرد */

.sai__fb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}

.sai__fb-btn {
  display: flex;
  height: 30px;
  width: 30px;
  align-items: center;
  justify-content: center;
  border-radius: 9px;
  color: #8a99a8;
}

.sai__fb-btn:hover {
  background-color: #e8f0fb;
  color: var(--sai-navy);
}

.sai__fb-btn.is-on {
  background-color: #e8f0fb;
  color: var(--sai-blue-dark);
}

.sai__fb-why {
  display: flex;
  flex: 1 1 100%;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.6;
  color: var(--sai-muted);
}

.sai__fb-why button {
  border-radius: 999px;
  border: 1px solid var(--sai-line);
  background-color: #fff;
  padding: 4px 11px;
  font-size: 12px;
  font-weight: 700;
  color: var(--sai-navy);
}

.sai__fb-why button:hover {
  border-color: var(--sai-blue);
}

.sai__lead-head {
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.sai__lead-head b {
  display: block;
  font-size: 14.5px;
  font-weight: 800;
  line-height: 1.5;
}

.sai__lead-head small {
  display: block;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.6;
  color: var(--sai-muted);
}

/* زرار الإرسال وقت الرد = إيقاف */

.sai__send-stop {
  display: none;
}

.sai__composer.is-busy .sai__send {
  background-image: none;
  background-color: var(--sai-navy);
}

.sai__composer.is-busy .sai__send-go {
  display: none;
}

.sai__composer.is-busy .sai__send-stop {
  display: block;
}

/* ديسك توب: نافذة ثابتة على يمين الشاشة (جنب زراير التواصل) من غير أي تغميق — الصفحة وراها شغالة والعميل بيكمّل تصفح */

@media (min-width: 1024px) {
  .sai {
    display: block;
    padding: 0;
    pointer-events: none;
  }

  .sai__dim {
    display: none;
  }

  .sai__app {
    position: fixed;
    right: 108px;
    bottom: 20px;
    height: min(660px, calc(calc(100vh / var(--z, 1)) - 104px));
    width: 400px;
    max-width: calc(calc(100vw / var(--z, 1)) - 132px);
    overflow: hidden;
    border: 1px solid #c9d7e6;
    border-radius: 22px;
    box-shadow: 0 16px 40px -18px rgba(13, 43, 68, 0.5);
    pointer-events: auto;
    animation: sai-in 0.22s ease;
  }

  .sai__head {
    padding: 14px 18px;
  }

  .sai__onb {
    padding: 22px 20px 24px;
  }

  .sai__chat {
    padding: 18px 16px 8px;
  }
}

@keyframes area-blink {
  50% {
    opacity: 0.35;
  }
}

.area-fab {
  position: relative;
  display: flex;
  height: 64px;
  width: 64px;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  box-shadow: 0 10px 24px -8px rgba(18, 58, 92, 0.45);
  transition: transform 0.2s;
}

.area-fab:hover {
  transform: translateY(-2px);
}

/* ── app.css · جزء 11 من 16: زراير التواصل والفوتر ، فرص إعادة البيع ، الأسئلة الشائعة ، كروت وسط المحتوى ، أشهر الأماكن (المصدر: resources/css/shary/app/11-footer-opportunities-content.css — عدّل هنا وشغّل tools/minify-assets.sh) */
/* ديسك توب: زرارين التواصل العايمين (Shary AI وواتساب) لازقين في حافة الشاشة وبمقاس أصغر —
       قاعدين في الهامش الأبيض جنب المحتوى فما بيغطوش الصور ولا الكروت. على الشاشات الأوسع الهامش أكبر فالزرار بيكبر ويبعد عن الحافة */

.quick-fabs {
  right: 28px;
  bottom: 112px;
}

/* ديسك توب: الزرارين في أقصى اليمين جوه الهامش الأبيض (مش فوق المحتوى) وبحجمهم الأصلي 64px — على اللابتوب الصغير (أقل من 1300px) 54px عشان الهامش أضيق */

@media (min-width: 1024px) {
  .quick-fabs {
    right: 4px;
    bottom: 22px;
    gap: 10px;
  }

  .quick-fabs .area-fab {
    height: 54px;
    width: 54px;
  }
}

@media (min-width: 1300px) {
  .quick-fabs .area-fab {
    height: 64px;
    width: 64px;
  }
}

@media (min-width: 1536px) {
  .quick-fabs {
    right: 12px;
  }
}

@media (min-width: 1760px) {
  .quick-fabs {
    right: 28px;
  }
}

/* الفوتر على الديسك توب: القوايم (المناطق / المشاريع / المطورين / الأعلى بحثًا) دايمًا صف واحد جنب بعض — مفيش قايمة بتنزل سطر تاني —
       و«الأعلى بحثًا» عمودين جنب بعض (وعلى أصغر اللابتوبات عمود واحد عشان المساحة) */

@media (min-width: 1024px) {
  .site-footer__cols {
    display: flex;
    flex-wrap: nowrap;
    justify-content: space-between;
    -moz-column-gap: 28px;
         column-gap: 28px;
  }

  .site-footer__col {
    flex: 0 1 auto;
    min-width: 0;
  }

  .site-footer__col li {
    white-space: nowrap;
  }

  .site-footer__col--wide li {
    white-space: normal;
  }

  .site-footer__col--wide > ul {
    max-width: 300px;
  }
}

@media (min-width: 1024px) and (max-width: 1199px) {
  .site-footer__col li {
    white-space: normal;
  }
}

@media (min-width: 1340px) {
  .site-footer__col--wide > ul {
    display: grid;
    max-width: none;
    grid-template-columns: repeat(2, minmax(0, auto));
    -moz-column-gap: 44px;
         column-gap: 44px;
    row-gap: 12px;
  }
}

/* الفورمات ولوحات الفلاتر (طلب مقابلة / طلب عرض / فلاتر البحث والمناطق / اختيارات المؤشر): من غير أي تغميق ورا اللوحة —
       الصفحة بتفضل ظاهرة زي ما هي ، واللوحة نفسها ليها ظل خفيف حواليها عشان تبان. الضغط بره اللوحة لسه بيقفلها (no-form-dim) */

[data-meeting-modal] > .absolute.inset-0,
    [data-offer-modal] > .absolute.inset-0,
    [data-index-advanced] > .absolute.inset-0,
    [data-index-picker] > .absolute.inset-0,
    [data-filter-sheet] > .absolute.inset-0 {
  background-color: transparent !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

[data-meeting-modal] > .absolute.inset-0 + *,
    [data-offer-modal] > .absolute.inset-0 + *,
    [data-index-advanced] > .absolute.inset-0 + *,
    [data-index-picker] > .absolute.inset-0 + *,
    [data-filter-sheet] > .absolute.inset-0 + * {
  box-shadow: 0 0 0 1px rgba(18, 58, 92, 0.1), 0 -6px 44px -10px rgba(18, 58, 92, 0.38);
}

/* صفحة الوظائف: لما العميل يضغط «قدّم الآن» فورم التقديم بينوّر حواليه (career-pick) عشان يبان إن الوظيفة اتختارت فيه */

[data-career-form].is-picked {
  animation: career-pick 1.5s ease-out;
}

@keyframes career-pick {
  0%,
        55% {
    box-shadow: 0 0 0 4px rgba(96, 177, 255, 0.55), 0 14px 34px -14px rgba(31, 99, 198, 0.55);
  }

  100% {
    box-shadow: 0 0 0 0 rgba(96, 177, 255, 0);
  }
}

.area-fab__label {
  position: absolute;
  right: calc(100% + 12px);
  top: 50%;
  transform: translateY(-50%);
  white-space: nowrap;
  border-radius: 10px;
  background-color: #1e4166;
  padding: 7px 12px;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.4;
  color: #fff;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s;
}

.area-fab:hover .area-fab__label,
    .area-fab:focus-visible .area-fab__label {
  opacity: 1;
}

/* مؤشر شاري — "الأعلى طلبًا": الرقم جوه دايرة بتتملى على قد الرقم (من 100) */

.index-ring {
  position: relative;
  display: flex;
  height: 42px;
  width: 42px;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
}

.index-ring svg {
  position: absolute;
  inset: 0;
  height: 100%;
  width: 100%;
  /* القوس بيبدأ من تحت-شمال ويلف 270° — الجزء الفاضي تحت (زي باقي دواير الموقع) */
  transform: rotate(135deg);
}

.index-ring b {
  position: relative;
  font-size: 13.5px;
  font-weight: 800;
  line-height: 1;
  color: #123a5c;
}

.index-ring circle {
  stroke: #e3e9ef;
}

.index-ring circle + circle {
  stroke: #1f7f72;
}

/* مؤشر الطلب في كروت الإحصائيات: دايرة أكبر والرقم جواها */

.index-ring--stat {
  height: 56px;
  width: 56px;
}

.index-ring--stat b {
  font-size: 18px;
}

/* فوق الشريط الكحلي (أول صفحة مؤشر شاري): قوس أصفر على أبيض شفاف */

.index-ring--hero circle {
  stroke: rgba(255, 255, 255, 0.24);
}

.index-ring--hero circle + circle {
  stroke: #fcb424;
}

.index-ring--hero b {
  color: #fcb424;
}

@media (min-width: 1024px) {
  .index-ring--stat {
    height: 68px;
    width: 68px;
  }

  .index-ring--stat b {
    font-size: 22px;
  }
}

/* ---- فرص إعادة بيع حصرية (opportunities/*) ---- */

.opp-hero {
  display: flex;
  align-items: center;
  gap: 14px;
  border-radius: 22px;
  background-image: linear-gradient(105deg, #17304d 0%, #1e4166 45%, #2f6187 100%);
  padding: 20px 18px;
  color: #fff;
}

.opp-hero__title {
  font-size: 21px;
  font-weight: 800;
  line-height: 1.45;
}

.opp-hero__title b {
  font-weight: 800;
  color: #4fd1c0;
}

.opp-hero__points {
  margin-top: 10px;
  display: flex;
  flex-direction: column;
  gap: 7px;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.92);
}

.opp-hero__points li {
  display: flex;
  align-items: center;
  gap: 8px;
}

.opp-hero__tag {
  position: relative;
  display: flex;
  height: 112px;
  width: 112px;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  border-radius: 26px;
  background-color: #e8f0fb;
  color: #1e4166;
}

.opp-hero__pct {
  position: absolute;
  top: -8px;
  inset-inline-start: -8px;
  border-radius: 999px;
  border: 2px solid #fff;
  background-color: #17304d;
  padding: 2px 10px;
  font-size: 12.5px;
  font-weight: 800;
  line-height: 1.6;
  color: #fff;
}

.opp-card {
  position: relative;
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 12px;
  border-radius: 18px;
  border: 1px solid #e3e9ef;
  background-color: #fff;
  padding: 12px;
  color: #123a5c;
  box-shadow: 0 6px 16px -12px rgba(18, 58, 92, 0.35);
  transition: box-shadow 0.2s, transform 0.2s;
}

.opp-out,
    .is-unrelated {
  display: none !important;
}

.opp-card {
  height: 100%;
}

.opp-card__top {
  display: flex;
  min-width: 0;
  gap: 12px;
}

.opp-card__photo {
  position: relative;
  display: block;
  height: 128px;
  width: 108px;
  flex-shrink: 0;
  overflow: hidden;
  border-radius: 14px;
  background-color: #e8f0fb;
}

.opp-card__verified {
  position: absolute;
  top: 7px;
  inset-inline-end: 7px;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  border-radius: 999px;
  background-color: #fff;
  padding: 2px 7px;
  font-size: 11px;
  font-weight: 800;
  line-height: 1.6;
  color: #16a34a;
}

/* الكارت كله بيفتح صفحة الفرصة (لينك العنوان ممدود) — الأزرار فوقه */

.opp-card__link::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
}

/* نسبة الخصم: كبسولة ذهبي بتنبض (حلقة بتكبر وتختفي) */

.opp-card__off {
  position: relative;
  flex-shrink: 0;
  border-radius: 999px;
  background-image: linear-gradient(135deg, #ffe08a, #fcb424 55%, #f0a011);
  padding: 2px 10px;
  font-size: 13px;
  font-weight: 800;
  line-height: 1.7;
  color: #123a5c;
  box-shadow: 0 4px 10px -4px rgba(227, 147, 10, 0.8);
}

.opp-card__off::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 999px;
  border: 2px solid rgba(252, 180, 36, 0.85);
  opacity: 0;
  pointer-events: none;
  animation: opp-ring 2.6s ease-out infinite;
}

.opp-card__foot {
  display: flex;
  align-items: center;
  gap: 10px;
}

.opp-card__btn {
  display: flex;
  height: 44px;
  width: 54px;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  color: #fff;
}

/* "توفير" + المبلغ: كبسولة بيضا وجواها كبسولة كحلي */

/* السعر بعد الخصم: أكبر وبلون التركواز الغامق (سعر الصفقة) — والسعر القديم مشطوب بخط أحمر */

.opp-now,
    .opp-now small {
  color: #0f7f6c;
}

.opp-was,
    .opp-deal__old s {
  text-decoration-line: line-through;
  text-decoration-color: #d92d20;
  text-decoration-thickness: 1.5px;
}

/* "توفير": كبسولة ذهبي متحركة — بتنبض بهدوء ولمعة بتعدّي عليها كل شوية */

.opp-save {
  position: relative;
  display: inline-flex;
  max-width: 100%;
  align-items: center;
  gap: 8px;
  overflow: hidden;
  border-radius: 999px;
  background-image: linear-gradient(135deg, #ffe08a, #fcb424 55%, #f0a011);
  padding: 3px 3px 3px 3px;
  padding-inline-start: 14px;
  font-size: 14px;
  font-weight: 800;
  line-height: 1.5;
  color: #123a5c;
  box-shadow: 0 6px 14px -6px rgba(227, 147, 10, 0.85);
  transform-origin: center;
  animation: opp-save-pop 2.6s ease-in-out infinite;
}

.opp-save::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: -45%;
  width: 34%;
  background-image: linear-gradient(100deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.65), rgba(255, 255, 255, 0));
  transform: skewX(-18deg);
  pointer-events: none;
  animation: opp-save-shine 2.6s ease-in-out infinite;
}

.opp-save b {
  position: relative;
  z-index: 1;
  border-radius: 999px;
  background-color: #123a5c;
  padding: 5px 13px;
  font-size: 14.5px;
  font-weight: 800;
  white-space: nowrap;
  color: #fff;
}

@keyframes opp-save-pop {
  0%,
        58%,
        100% {
    transform: scale(1);
  }

  68% {
    transform: scale(1.07);
  }

  78% {
    transform: scale(0.98);
  }

  88% {
    transform: scale(1.03);
  }
}

@keyframes opp-save-shine {
  0%,
        55% {
    left: -45%;
  }

  95%,
        100% {
    left: 120%;
  }
}

@keyframes opp-ring {
  0% {
    opacity: 0.9;
    transform: scale(1);
  }

  70%,
        100% {
    opacity: 0;
    transform: scale(1.55, 1.9);
  }
}

@media (prefers-reduced-motion: reduce) {
  .opp-save,
        .opp-save::after,
        .opp-card__off::after {
    animation: none;
  }
}

.opp-save--lg {
  font-size: 16px;
}

.opp-save--lg b {
  padding: 7px 16px;
  font-size: 16px;
}

/* صفحة الفرصة: السعر + التوفير + العدّاد */

.opp-deal__row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
  color: #123a5c;
}

.opp-deal__row strong {
  white-space: nowrap;
}

/* صفحة الفرصة على الموبايل: السعر ظاهر في قسم الفرصة — كبسولة السعر بتاعة شريط الملخص بتختفي */

@media (max-width: 1023px) {
  /* كبسولة "توفير" أصغر على الموبايل عشان السعر و "ج.م" يفضلوا باينين كاملين جنبها */

  .opp-deal__row .opp-save--lg {
    gap: 8px;
    padding-inline-start: 12px;
    font-size: 13.5px;
  }

  .opp-deal__row .opp-save--lg b {
    padding: 6px 11px;
    font-size: 13px;
  }

  [data-opportunity-page] .prop-pill--price {
    display: none;
  }
}

/* السعر قبل الخصم (مشطوب): بنفس حجم "توفير" عشان يبان */

.opp-deal__old {
  width: -moz-fit-content;
  width: fit-content;
  border-radius: 999px;
  background-color: #fff;
  padding: 3px 14px;
  text-align: center;
  white-space: nowrap;
  font-size: 13.5px;
  font-weight: 700;
  line-height: 1.5;
  color: #4a5b6b;
  box-shadow: 0 3px 10px -3px rgba(18, 58, 92, 0.25);
}

@media (min-width: 1024px) {
  .opp-deal__row .opp-deal__old {
    padding: 4px 16px;
    font-size: 16px;
  }
}

/* صفحة الفرصة — شريط الملخص الثابت على الديسك توب: "توفير" + السعر قبل الخصم جنب السعر (مكان العائد) لما الشريط يثبت */

.prop-bar__deal {
  display: none;
}

@media (min-width: 1024px) {
  .prop-bar.is-stuck .prop-bar__deal {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    align-self: center;
    gap: 10px;
  }

  .prop-bar--deal.is-stuck .prop-pill--roi {
    display: none;
  }

  .prop-bar__deal .opp-save {
    font-size: 15px;
  }

  .prop-bar__deal .opp-save b {
    padding: 6px 14px;
    font-size: 15px;
  }

  .prop-bar__deal .opp-deal__old {
    font-size: 15px;
  }
}

/* نفس جزء السعر كامل (اسم الوحدة + المكان + السعر + توفير + السعر المشطوب) ثابت تحت الهيدر على الموبايل لما العميل ينزل في صفحة الفرصة */

.opp-sticky {
  position: fixed;
  inset-inline: 0;
  top: 0;
  z-index: 25;
  display: flex;
  flex-direction: column;
  gap: 6px;
  border-radius: 0 0 18px 18px;
  background-color: #fff;
  padding: 8px 20px 10px;
  color: #123a5c;
  box-shadow: 0 12px 22px -16px rgba(18, 58, 92, 0.6);
  opacity: 0;
  pointer-events: none;
  transform: translateY(-100%);
  transition: transform 0.25s ease, opacity 0.2s ease;
}

.opp-sticky.is-on {
  opacity: 1;
  pointer-events: auto;
  transform: none;
}

.opp-sticky__head {
  display: flex;
  min-width: 0;
  flex-direction: column;
}

.opp-sticky__head b {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 16px;
  font-weight: 800;
  line-height: 1.5;
}

.opp-sticky__head small {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 4px;
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1.6;
  color: #2f6fa6;
}

.opp-sticky__head small span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.opp-sticky__row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 10px;
}

.opp-sticky__price {
  min-width: 0;
}

.opp-sticky__price > span {
  display: block;
  font-size: 12.5px;
  font-weight: 700;
  line-height: 1.5;
}

.opp-sticky__price strong {
  display: block;
  white-space: nowrap;
  font-size: 21px;
  font-weight: 800;
  line-height: 1.3;
}

.opp-sticky__price strong small {
  font-size: 14px;
}

.opp-sticky__side {
  display: flex;
  flex-shrink: 0;
  flex-direction: column;
  align-items: center;
  gap: 5px;
}

.opp-sticky .opp-save {
  gap: 8px;
  padding-inline-start: 12px;
  font-size: 13.5px;
}

.opp-sticky .opp-save b {
  padding: 6px 11px;
  font-size: 13px;
}

@media (min-width: 400px) {
  .opp-sticky__price strong {
    font-size: 24px;
  }
}

/* صفحة الفرصة — "إزاي بتتحسب؟" تحت المؤشرات: زرار بيفتح مكونات مؤشر شاري */

.opp-how__btn {
  margin-inline: auto;
  display: flex;
  height: 40px;
  width: -moz-fit-content;
  width: fit-content;
  cursor: pointer;
  list-style: none;
  align-items: center;
  gap: 6px;
  border-radius: 999px;
  border: 1.5px solid #cfe3df;
  background-color: #fff;
  padding-inline: 18px;
  font-size: 13.5px;
  font-weight: 800;
  line-height: 1.5;
  color: #1f7f72;
}

.opp-how__btn::-webkit-details-marker {
  display: none;
}

.opp-how__body {
  margin-top: 12px;
  border-radius: 16px;
  border: 1px solid #e3e9ef;
  background-color: #fff;
  padding: 14px 16px;
}

/* ملخص السداد على كارت الفرصة: "المطلوب كاش" (سطر واحد) أو 3 خانات (المقدم / المتبقي / القسط) */

.opp-card__pay {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
}

.opp-card__pay > div {
  min-width: 0;
  border-radius: 12px;
  background-color: #e8f0fb;
  padding: 7px 8px;
}

.opp-card__pay dt {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 11px;
  font-weight: 600;
  line-height: 1.6;
  color: #5b6b7c;
}

.opp-card__pay dd {
  font-size: 13.5px;
  font-weight: 800;
  line-height: 1.5;
  color: #123a5c;
}

.opp-card__pay dd small {
  display: block;
  font-size: 10.5px;
  font-weight: 600;
  color: #5b6b7c;
}

/* نفس الخانات التلاتة على كارت الوحدة العادي (وحدة إعادة بيع عليها أقساط): فوق السعر */

.unit-card__pay {
  margin-bottom: 8px;
  max-width: 460px;
}

.opp-card__pay--cash {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  border-radius: 12px;
  background-color: #e7f5f1;
  padding: 8px 12px;
  color: #136a5f;
}

.opp-card__pay--cash > span {
  display: flex;
  min-width: 0;
  flex-direction: column;
  font-size: 13.5px;
  font-weight: 800;
  line-height: 1.5;
}

.opp-card__pay--cash > span small {
  font-size: 11px;
  font-weight: 600;
  opacity: 0.85;
}

.opp-card__pay--cash > b {
  flex-shrink: 0;
  white-space: nowrap;
  font-size: 16px;
  font-weight: 800;
  line-height: 1.5;
}

.opp-card__pay--cash > b small {
  font-size: 11.5px;
}

.opp-timer {
  margin-top: 14px;
  display: flex;
  min-height: 50px;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border-radius: 999px;
  background-color: #4cbfae;
  padding: 10px 22px;
  font-size: 14.5px;
  font-weight: 700;
  line-height: 1.5;
  color: #fff;
}

.opp-stat {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 6px;
  border-radius: 16px;
  padding: 18px 16px;
  color: #fff;
  box-shadow: 0 12px 20px -14px rgba(18, 58, 92, 0.6);
}

.opp-stat--teal {
  background-color: #10a597;
}

.opp-stat--navy {
  background-color: #1e4166;
}

.opp-stat span {
  font-size: 14px;
  font-weight: 600;
  line-height: 1.5;
}

.opp-stat b {
  font-size: 20px;
  font-weight: 800;
  line-height: 1.35;
}

.opp-stat small {
  font-size: 12.5px;
  font-weight: 700;
}

/* سرعة البيع: إطار ملوّن (أحمر ← برتقالي ← أخضر) */

.opp-speed {
  display: flex;
  align-items: center;
  gap: 14px;
  border: 2px solid transparent;
  border-radius: 18px;
  background: linear-gradient(#fff, #fff) padding-box, linear-gradient(110deg, #ef4444, #f5a524 45%, #16a34a) border-box;
  padding: 18px 16px;
}

.opp-table {
  overflow: hidden;
  border-radius: 16px;
  border: 1px solid #d3dfee;
  background-color: #fff;
  color: #123a5c;
}

.opp-table p {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 34%;
  align-items: stretch;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.6;
}

.opp-table p + p {
  border-top: 1px solid #d3dfee;
}

.opp-table p > span {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 13px 14px;
}

.opp-table p > b {
  display: flex;
  align-items: center;
  border-inline-start: 1px solid #d3dfee;
  padding: 13px 12px;
  font-size: 13px;
  font-weight: 700;
}

.opp-table p.opp-table__wide {
  grid-template-columns: minmax(0, 1fr);
}

.opp-gauge {
  display: flex;
  min-width: 0;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  text-align: center;
  color: #123a5c;
}

.opp-gauge__ring {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.opp-gauge__ring b {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-top: 6px;
  font-size: 17px;
  font-weight: 800;
}

.opp-gauge__label {
  font-size: 13px;
  font-weight: 700;
  line-height: 1.5;
}

.opp-actions {
  display: flex;
  align-items: stretch;
  gap: 8px;
}

.opp-actions__btn {
  display: flex;
  height: 52px;
  width: 64px;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
}

.opp-actions__offer {
  display: flex;
  height: 52px;
  min-width: 0;
  flex: 1 1 0%;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background-color: #1e4166;
  padding-inline: 18px;
  font-size: 16px;
  font-weight: 800;
  line-height: 1.5;
  color: #fff;
  transition: background-color 0.2s;
}

.opp-actions__offer:disabled {
  opacity: 0.6;
}

/* "قدّم عرضك / Make an offer": الكلمة في سطر واحد جوه الزرار — على الموبايل الأيقونات أضيق سِنّة والزرار ياخد الباقي */

.opp-actions__offer {
  white-space: nowrap;
  line-height: 1.2;
}

@media (max-width: 480px) {
  .opp-actions__btn {
    width: 54px;
  }

  .opp-actions__offer {
    padding-inline: 10px;
    font-size: 15px;
  }
}

@media (max-width: 359px) {
  .opp-actions__btn {
    width: 48px;
  }

  .opp-actions__offer {
    font-size: 14px;
  }
}

/* بوب أب "قدّم عرضك": سطر الوحدة والسعر المطلوب فوق الفورم */

.opp-offer__unit {
  margin-top: 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border-radius: 14px;
  border: 1px solid #d3dfee;
  background-color: #fff;
  padding: 10px 14px;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.6;
  color: #123a5c;
}

.opp-offer__unit b {
  font-weight: 800;
  color: #1f8a7c;
}

/* ---- الأسئلة الشائعة (partials/faq-list): كارت رمادي فاتح + علامة + في دايرة قصاد كل سؤال ---- */

.faq-box {
  border-radius: 18px;
  background-color: #e8f0fb;
  padding: 4px 16px;
}

.faq-box__item {
  border-bottom: 1px solid #d3dfee;
}

.faq-box__item:last-child {
  border-bottom: 0;
}

.faq-box__item summary {
  display: flex;
  min-height: 58px;
  cursor: pointer;
  list-style: none;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding-block: 10px;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.6;
  color: #123a5c;
}

.faq-box__item summary i {
  display: flex;
  height: 32px;
  width: 32px;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background-color: #fff;
  color: #5b6b7c;
  box-shadow: 0 1px 3px rgba(18, 58, 92, 0.12);
  transition: background-color 0.2s, color 0.2s;
}

.faq-box__item[open] summary i {
  background-color: #1e4166;
  color: #fff;
}

.faq-box__answer,
    .article-content .faq-box__answer {
  padding-bottom: 14px;
  padding-inline-end: 46px;
  font-size: 14.5px;
  font-weight: 500;
  line-height: 1.9;
  color: #5b6b7c;
}

@media (min-width: 1024px) {
  .faq-box {
    border-radius: 22px;
    padding: 8px 28px;
  }

  .faq-box__item summary {
    min-height: 66px;
    font-size: 17px;
  }

  .faq-box__item summary i {
    height: 36px;
    width: 36px;
  }

  .faq-box__answer,
        .article-content .faq-box__answer {
    font-size: 16px;
  }
}

/* ---- النص الحر (HTML من لوحة التحكم) في المنطقة / المشروع / المقال: لينكات ، H2 / H3 / H4 ، نقط ---- */

.article-content a:not([class]),
    .prop-about a:not([class]) {
  font-weight: 700;
  color: #1f63c6;
  text-decoration: none;
}

.article-content a:not([class]):hover,
    .prop-about a:not([class]):hover {
  text-decoration: underline;
}

.article-content h4 {
  font-size: 16.5px;
  font-weight: 700;
  line-height: 1.6;
  color: #123a5c;
}

.area-article {
  gap: 14px;
}

/* H2 جوه مقال المنطقة: نفس حجم عناوين أقسام الصفحة */

.area-article h2 {
  margin-top: 14px;
  font-size: 20px;
  line-height: 1.4;
}

@media (min-width: 1024px) {
  .area-article h2 {
    margin-top: 22px;
    font-size: 26px;
  }

  .area-article h3 {
    font-size: 20px;
  }
}

.area-article h3 {
  margin-top: 6px;
}

.area-article p,
    .area-article li {
  font-size: 15px;
}

@media (min-width: 1024px) {
  .area-article p,
        .area-article li {
    font-size: 16px;
  }
}

/* ---- كروت وسط المحتوى: [shary-project] / [shary-area] (كارت كله لينك) و [shary-units] (لينكات وحدات المنطقة) ---- */

.content-card {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  border-radius: 16px;
  border: 1px solid #d3dfee;
  background-color: #f6f9fd;
  padding: 12px;
  color: #123a5c;
  text-decoration: none !important;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.content-card:hover {
  border-color: #1f63c6;
  box-shadow: 0 12px 24px -18px rgba(18, 58, 92, 0.6);
}

.content-card .content-card__img,
    .article-content .content-card .content-card__img {
  height: 76px;
  width: 76px;
  flex-shrink: 0;
  border-radius: 12px;
  background-color: #e8f0fb;
  -o-object-fit: cover;
     object-fit: cover;
}

.content-card__body {
  display: flex;
  min-width: 0;
  flex: 1 1 0%;
  flex-direction: column;
  gap: 1px;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.6;
  color: #5b6b7c;
}

.content-card__body small {
  font-size: 11.5px;
  font-weight: 700;
  color: #1f8a7c;
}

.content-card__body b {
  overflow: hidden;
  font-size: 16px;
  font-weight: 800;
  line-height: 1.5;
  color: #123a5c;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.content-card__body > span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.content-card__price {
  font-weight: 800;
  color: #1f8a7c;
}

.content-card__go {
  display: inline-flex;
  height: 40px;
  width: 100%;
  align-items: center;
  justify-content: center;
  gap: 5px;
  border-radius: 10px;
  background-color: #1e4166;
  font-size: 13.5px;
  font-weight: 700;
  line-height: 1;
  color: #fff;
  white-space: nowrap;
}

.content-units {
  border-radius: 16px;
  border: 1px solid #d3dfee;
  background-color: #f6f9fd;
  padding: 12px 14px 4px;
}

.content-units__title,
    .article-content p.content-units__title {
  font-size: 16px;
  font-weight: 800;
  line-height: 1.5;
  color: #123a5c;
}

.content-units .discover-list a:last-child,
    .content-units .discover-list a:nth-last-child(2):nth-child(odd) {
  border-bottom-color: transparent;
}

.content-units .discover-list {
  grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 640px) {
  .content-card {
    flex-wrap: nowrap;
    padding: 14px;
  }

  .content-card__go {
    width: auto;
    flex-shrink: 0;
    padding-inline: 18px;
  }

  .content-units .discover-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* "اكتشف وحدات أكتر": لينكات صفحات البحث — أيقونة فتح + الاسم + سهم */

.discover-list {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
}

.discover-list a {
  display: flex;
  min-height: 46px;
  align-items: center;
  gap: 10px;
  border-bottom: 1px solid #e6ebf1;
  font-size: 14.5px;
  font-weight: 600;
  line-height: 1.6;
  color: #5b6b7c;
  transition: color 0.2s;
}

.discover-list a:hover {
  color: #1f63c6;
}

.discover-list a > svg:first-child {
  flex-shrink: 0;
  color: #9fb0c2;
}

.discover-list a > span {
  min-width: 0;
}

.discover-list a > svg:last-child {
  flex-shrink: 0;
  color: #9fb0c2;
}

/* ===== أشهر الأماكن في المنطقة (areas/partials/places): كارت لكل مجموعة — أيقونة لبني + عنوان + قايمة أماكن ===== */

.place-card {
  display: flex;
  min-width: 0;
  flex-direction: column;
  padding: 16px;
}

.place-card__head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-bottom: 12px;
  border-bottom: 1px solid #e6ebf1;
}

.place-card__icon {
  display: flex;
  height: 46px;
  width: 46px;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  border-radius: 14px;
  border: 1px solid #d3dfee;
  background-color: #e8f0fb;
  color: #1e4166;
}

.place-card__head h3 {
  font-size: 16.5px;
  font-weight: 700;
  line-height: 1.5;
  color: #123a5c;
}

.place-card__head p {
  margin-top: 2px;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.6;
  color: #5b6b7c;
}

.place-list {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
}

.place-list li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding-block: 10px;
  border-bottom: 1px solid #eef2f6;
}

.place-list li:last-child {
  border-bottom: 0;
  padding-bottom: 2px;
}

.place-list__dot {
  margin-top: 9px;
  height: 7px;
  width: 7px;
  flex-shrink: 0;
  border-radius: 999px;
  background-color: #fcb424;
}

.place-list__name {
  display: block;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.6;
  color: #123a5c;
}

.place-list__name--link {
  display: inline;
  color: #1f63c6;
  transition: color 0.2s;
}

.place-list__name--link:hover {
  text-decoration: underline;
}

.place-list__name--link svg {
  display: inline-block;
  margin-inline-start: 3px;
  vertical-align: middle;
  opacity: 0.75;
}

[dir="rtl"] .place-list__name--link svg {
  transform: scaleX(-1);
}

.place-list small {
  display: block;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.6;
  color: #5b6b7c;
}

.place-card__more {
  margin-top: auto;
  display: flex;
  min-height: 44px;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  border-top: 1px solid #e6ebf1;
  padding-top: 10px;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.6;
  color: #1e4166;
}

.place-card__more:hover {
  color: #1f63c6;
}

/* اللينكات الداخلية التلقائية (data-auto-link — SharyPageController::autoLinks) جوه النصوص اللي مش article-content */

.auto-links a,
    .faq-box__answer a {
  font-weight: 700;
  color: #1f63c6;
  text-decoration: none;
}

.auto-links a:hover,
    .faq-box__answer a:hover {
  text-decoration: underline;
}

@media (min-width: 1024px) {
  .place-card {
    padding: 22px 24px;
  }

  .place-card__head h3 {
    font-size: 18px;
  }

  .place-card__head p {
    font-size: 14px;
  }

  .place-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    -moz-column-gap: 26px;
         column-gap: 26px;
  }

  .place-list li:nth-last-child(2):nth-child(odd) {
    border-bottom: 0;
  }

  .place-list__name {
    font-size: 15.5px;
  }
}

@media (min-width: 640px) {
  .discover-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    -moz-column-gap: 32px;
         column-gap: 32px;
  }
}

@media (min-width: 1024px) {
  .discover-list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    -moz-column-gap: 40px;
         column-gap: 40px;
  }

  .discover-list a {
    min-height: 50px;
    font-size: 15.5px;
  }
}

/* ── app.css · جزء 12 من 16: خريطة شاري التفاعلية (المصدر: resources/css/shary/app/12-map.css — عدّل هنا وشغّل tools/minify-assets.sh) */
/* ---- خريطة شاري التفاعلية (map/show): صفحة لوحدها مالية الشاشة كلها (فوق هيدر الموقع).
       فوق: شريط أبيض (رجوع + بحث ، وتحته الفلاتر) — تحته الخريطة (كرة أرضية / قمر صناعي) وعليها "اختر المنطقة" والقايمة الجلاسي وأزرار الجنب ،
       والمشاريع كروت جلاسي (بالعرض على الموبايل / عمود أبيض على الديسك توب) ---- */

.smap {
  position: fixed;
  inset: 0;
  z-index: 70;
  display: flex;
  flex-direction: column;
  background-color: #dbe6f6;
  color: #123a5c;
}

/* الشريط الأبيض */

.smap__header {
  position: relative;
  z-index: 3;
  flex-shrink: 0;
  background-color: #fff;
  padding: calc(8px + env(safe-area-inset-top, 0px)) 12px 10px;
  box-shadow: 0 6px 16px -10px rgba(13, 32, 51, 0.45);
}

.smap__row {
  position: relative;
  display: flex;
  align-items: center;
  gap: 6px;
}

/* اقتراحات البحث الذكي: قايمة تحت خانة البحث (مشروع / مطور / منطقة / نوع وحدة) */

.smap__suggest {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  left: 0;
  z-index: 6;
  max-height: min(calc(58vh / var(--z, 1)), 420px);
  overflow-y: auto;
  border-radius: 16px;
  border: 1px solid #e3eaf1;
  background-color: #fff;
  padding: 6px;
  box-shadow: 0 18px 40px -16px rgba(13, 32, 51, 0.45);
}

.smap__suggest[hidden] {
  display: none;
}

.smap__suggest-row {
  display: flex;
  width: 100%;
  align-items: center;
  gap: 10px;
  border-radius: 12px;
  padding: 9px 10px;
  text-align: start;
  color: #123a5c;
}

.smap__suggest-row:hover,
    .smap__suggest-row:focus-visible {
  background-color: #e8f0fb;
  outline: none;
}

.smap__suggest-icon {
  display: flex;
  height: 36px;
  width: 36px;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  border-radius: 11px;
  background-color: #e8f0fb;
  color: #1f5fc4;
}

.smap__suggest-row[data-kind="developer"] .smap__suggest-icon {
  background-color: #e8f0fb;
  color: #4b55b8;
}

.smap__suggest-row[data-kind="area"] .smap__suggest-icon {
  background-color: #e7f5f1;
  color: #1f7f72;
}

.smap__suggest-row[data-kind="type"] .smap__suggest-icon {
  background-color: #fdf1dc;
  color: #b9771c;
}

.smap__suggest-body {
  display: flex;
  min-width: 0;
  flex: 1 1 0%;
  flex-direction: column;
  gap: 1px;
}

.smap__suggest-body b {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 14.5px;
  font-weight: 700;
  line-height: 1.5;
}

.smap__suggest-body small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1.5;
  color: #5b6b7c;
}

.smap__suggest-row > i {
  flex-shrink: 0;
  border-radius: 999px;
  background-color: #e8f0fb;
  padding: 3px 9px;
  font-size: 11.5px;
  font-style: normal;
  font-weight: 700;
  line-height: 1.5;
  color: #5b6b7c;
}

.smap__suggest-none {
  padding: 14px 12px;
  text-align: center;
  font-size: 13.5px;
  font-weight: 600;
  line-height: 1.7;
  color: #5b6b7c;
}

.smap__back {
  display: flex;
  height: 46px;
  width: 34px;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  color: #123a5c;
}

.smap__search {
  display: flex;
  height: 46px;
  min-width: 0;
  flex: 1 1 0%;
  align-items: center;
  gap: 9px;
  border-radius: 14px;
  background-color: #e8f0fb;
  padding-inline: 14px;
  color: #5b6b7c;
}

.smap__search input {
  min-width: 0;
  flex: 1 1 0%;
  border: 0;
  background: transparent;
  font-size: 15.5px;
  font-weight: 600;
  color: #123a5c;
  outline: none;
}

.smap__search input::-moz-placeholder {
  color: #8a99a8;
}

.smap__search input::placeholder {
  color: #8a99a8;
}

/* صف الفلاتر: بيتحرك يمين وشمال لو مش مكفّي */

.smap__filters {
  display: flex;
  align-items: center;
  gap: 8px;
  overflow-x: auto;
  margin: 10px -12px 0;
  padding-inline: 12px;
  scrollbar-width: none;
}

.smap__filters::-webkit-scrollbar {
  display: none;
}

.smap__fchip {
  display: inline-flex;
  height: 40px;
  flex-shrink: 0;
  align-items: center;
  gap: 6px;
  border-radius: 12px;
  border: 1px solid transparent;
  background-color: #e8f0fb;
  padding-inline: 14px;
  font-size: 14px;
  font-weight: 700;
  line-height: 1;
  color: #3c5068;
  white-space: nowrap;
}

.smap__fchip b {
  display: inline-flex;
  height: 18px;
  min-width: 18px;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background-color: #1e4166;
  padding-inline: 5px;
  font-size: 11px;
  font-weight: 800;
  color: #fff;
}

.smap__fchip b[hidden] {
  display: none;
}

.smap__fchip.is-set {
  border-color: #1e4166;
  background-color: #e8f0fb;
  color: #123a5c;
}

/* "استلام فوري": زرار مميز بلون شاري التركواز */

.smap__fchip--now {
  border-color: #2fb5a5;
  background-color: #f3faf8;
  color: #178f81;
}

.smap__fchip--now[aria-pressed="true"] {
  background-color: #2fb5a5;
  color: #fff;
}

.smap__ficon {
  display: flex;
  height: 40px;
  width: 40px;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  margin-inline-start: auto;
  color: #3c5068;
}

/* الخريطة: الخلفية ورا الكرة الأرضية لون واحد جلاسي (أزرق سماوي فاتح) — من غير بقع ألوان ولا حركة: درجة واحدة هادية + لمعة زجاج خفيفة ::before */

.smap__map {
  position: relative;
  min-height: 0;
  flex: 1 1 0%;
  overflow: hidden;
  /* ورا الكرة الأرضية: سما مفتوحة (أزرق فاتح لفوق ← أبيض لتحت) */
  background-color: #a9d6ff;
  background-image: linear-gradient(180deg, #62b3ff 0%, #93ccff 32%, #cde7ff 68%, #f3faff 100%);
}

/* بلور زجاجي: سحب نور ناعمة فوق السما (نفس درجات اللون) */

.smap__map::before {
  content: "";
  position: absolute;
  inset: -8%;
  z-index: 0;
  background-image: radial-gradient(40% 26% at 16% 14%, rgba(255, 255, 255, 0.9) 0%, rgba(255, 255, 255, 0) 100%), radial-gradient(34% 22% at 86% 26%, rgba(255, 255, 255, 0.65) 0%, rgba(255, 255, 255, 0) 100%), radial-gradient(48% 28% at 58% 94%, rgba(255, 255, 255, 0.8) 0%, rgba(255, 255, 255, 0) 100%), radial-gradient(32% 22% at 6% 76%, rgba(96, 178, 255, 0.55) 0%, rgba(96, 178, 255, 0) 100%);
  filter: blur(26px);
  pointer-events: none;
}

.smap__frame,
    .smap__gl {
  position: absolute;
  inset: 0;
  z-index: 0;
  height: 100%;
  width: 100%;
  border: 0;
}

.smap__gl[hidden],
    .smap__frame[hidden] {
  display: none;
}

.smap.is-roadmap .smap__map {
  background-color: #c9d8e6;
}

/* على الخريطة: "اختر المنطقة" + القايمة الجلاسي */

.smap__top {
  position: absolute;
  top: 12px;
  right: 12px;
  left: 66px;
  z-index: 1003;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  pointer-events: none;
}

[dir="ltr"] .smap__top {
  right: 66px;
  left: 12px;
}

.smap__top > * {
  pointer-events: auto;
}

.smap__pill {
  display: inline-flex;
  height: 42px;
  max-width: 100%;
  align-items: center;
  gap: 7px;
  border-radius: 999px;
  background-color: rgba(255, 255, 255, 0.94);
  padding-inline: 15px;
  font-size: 14.5px;
  font-weight: 700;
  line-height: 1;
  color: #123a5c;
  box-shadow: 0 8px 18px -10px rgba(3, 12, 22, 0.8);
}

.smap__pill span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.smap__pill.is-set {
  background-color: #1e4166;
  color: #fff;
}

.smap__pill-arrow {
  flex-shrink: 0;
  transition: transform 0.2s;
}

.smap__pill[aria-expanded="true"] .smap__pill-arrow {
  transform: rotate(180deg);
}

/* قايمة المناطق: زجاج شفاف (الخريطة باينة من وراه) */

.smap__areas {
  width: 100%;
  max-width: 420px;
  border-radius: 22px;
  border: 1px solid rgba(255, 255, 255, 0.5);
  background-color: rgba(214, 226, 236, 0.5);
  padding: 18px 16px 16px;
  box-shadow: 0 18px 34px -18px rgba(3, 12, 22, 0.75);
  -webkit-backdrop-filter: blur(16px) saturate(1.5);
  backdrop-filter: blur(16px) saturate(1.5);
  animation: smap-drop 0.28s ease-out;
}

@keyframes smap-drop {
  from {
    opacity: 0;
    transform: translateY(-8px);
  }
}

.smap__areas[hidden],
    .smap__veil[hidden] {
  display: none;
}

/* طبقة شفافة فوق الخريطة: الضغط عليها بيقفل القايمة (مع الخريطة الحقيقية: الخريطة نفسها بتستلم الضغط والسحب) */

.smap__veil {
  position: absolute;
  inset: 0;
  z-index: 1002;
}

.smap.is-gl .smap__veil {
  pointer-events: none;
}

.smap__areas p {
  margin-bottom: 12px;
  font-size: 16.5px;
  font-weight: 800;
  line-height: 1.5;
  color: #0f2f4b;
}

.smap__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
}

.smap__chip {
  display: inline-flex;
  height: 40px;
  align-items: center;
  gap: 6px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.7);
  background-color: rgba(255, 255, 255, 0.82);
  padding-inline: 16px;
  font-size: 14px;
  font-weight: 600;
  line-height: 1;
  color: #2c4258;
  white-space: nowrap;
}

.smap__chip[aria-pressed="true"] {
  border-color: #1e4166;
  background-color: #1e4166;
  color: #fff;
}

/* أزرار الجنب: نوع الخريطة / كل المشاريع / موقعي */

.smap__tools {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 1001;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

[dir="ltr"] .smap__tools {
  right: 12px;
  left: auto;
}

.smap__tools button {
  display: flex;
  height: 44px;
  width: 44px;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.95);
  font-size: 20px;
  font-weight: 700;
  line-height: 1;
  color: #2c4a66;
  box-shadow: 0 8px 16px -8px rgba(3, 12, 22, 0.8);
}

.smap__tools button.is-on {
  background-color: #1e4166;
  color: #fff;
}

.smap__tools .smap__zoom {
  display: none;
}

/* تنبيه صغير فوق الخريطة (أقرب نتائج / الموقع) */

.smap__note {
  position: absolute;
  top: 66px;
  left: 50%;
  z-index: 1004;
  width: -moz-max-content;
  width: max-content;
  max-width: calc(100% - 32px);
  border-radius: 14px;
  background-color: rgba(13, 32, 51, 0.9);
  padding: 9px 14px;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.6;
  color: #fff;
  text-align: center;
  transform: translateX(-50%);
}

.smap__note[hidden] {
  display: none;
}

/* علامة المشروع على الخريطة: اسم المشروع في تابة صغيرة كحلي — والمختار تركواز */

.smap__marker {
  position: relative;
  display: block;
  max-width: 132px;
  overflow: visible;
  border-radius: 9px;
  border: 1.5px solid #fff;
  background-color: #1e4166;
  padding: 3px 9px 4px;
  font-size: 11.5px;
  font-weight: 700;
  line-height: 1.5;
  color: #fff;
  white-space: nowrap;
  box-shadow: 0 6px 14px -4px rgba(13, 32, 51, 0.7);
  cursor: pointer;
}

.smap__marker > span {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
}

.smap__marker::after {
  content: "";
  position: absolute;
  bottom: -6px;
  left: 50%;
  height: 9px;
  width: 9px;
  border-right: 1.5px solid #fff;
  border-bottom: 1.5px solid #fff;
  background-color: inherit;
  transform: translateX(-50%) rotate(45deg);
}

.smap__marker.is-on {
  z-index: 2;
  background-color: #1f9a8b;
}

/* علامة وحدة جوه المشروع (بتظهر لما العميل يقرّب): عمارة صغيرة بشبابيك وفوقها النوع والمساحة ("شقة 170 م²") — المختارة أكبر وكحلي والباقي بيبهت */

.smap__marker--unit {
  display: flex;
  max-width: none;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  border: 0;
  background: none;
  padding: 0;
  box-shadow: none;
  transition: opacity 0.15s;
}

.smap__marker--unit::after {
  display: none;
}

.smap__marker--unit > span {
  max-width: 150px;
  border-radius: 9px;
  background-color: #fff;
  padding: 2px 9px 3px;
  font-size: 12px;
  font-weight: 800;
  color: #123a5c;
  box-shadow: 0 6px 14px -6px rgba(13, 32, 51, 0.55);
}

.smap__bldg {
  display: block;
  height: 34px;
  width: 30px;
  filter: drop-shadow(0 4px 4px rgba(13, 32, 51, 0.35));
  transition: transform 0.15s;
}

.smap__bldg-body {
  fill: #1f9a8b;
  stroke: #fff;
  stroke-width: 1.4;
  stroke-linejoin: round;
}

.smap__bldg-win {
  fill: #fff;
  opacity: 0.9;
}

.smap__marker--unit.is-on {
  z-index: 3;
  gap: 13px;                    /* البناية بتكبر لفوق (scale 1.3) — مسافة عشان ما تغطيش الكلام */
  background: none;
}

.smap__marker--unit.is-on > span {
  background-color: #123a5c;
  color: #fff;
}

.smap__marker--unit.is-on .smap__bldg {
  transform: scale(1.3);
  transform-origin: 50% 100%;   /* السنّ اللي تحت يفضل على مكان الوحدة */
}

.smap__marker--unit.is-on .smap__bldg-body {
  fill: #1e4166;
}

.smap.has-unit-on .smap__marker--unit:not(.is-on) {
  opacity: 0.55;
}

/* كارت الوحدة الصغير: بيطلع على الخريطة فوق البناية اللي اتضغطت (صورة صغيرة + النوع والمساحة + السعر) — الكارت كله لينك لصفحة الوحدة */

.smap__unit {
  z-index: 6;
  width: 236px;
}

.smap__unit[hidden] {
  display: none;
}

.smap__unit-close {
  position: absolute;
  inset-inline-end: -8px;
  top: -10px;
  z-index: 1;
  display: flex;
  height: 26px;
  width: 26px;
  align-items: center;
  justify-content: center;
  border-radius: 9999px;
  background-color: #fff;
  color: #123a5c;
  box-shadow: 0 4px 10px -4px rgba(13, 32, 51, 0.55);
}

.smap__ucard {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  border-radius: 16px;
  background-color: #fff;
  padding: 7px;
  color: #123a5c;
  box-shadow: 0 14px 30px -12px rgba(13, 32, 51, 0.6);
}

.smap__ucard::after {
  content: "";
  position: absolute;
  bottom: -6px;
  left: 50%;
  height: 12px;
  width: 12px;
  background-color: #fff;
  transform: translateX(-50%) rotate(45deg);
}

.smap__ucard-pic {
  height: 56px;
  width: 56px;
  flex: none;
  border-radius: 11px;
  background-color: #dbe2e8;
  object-fit: cover;
}

.smap__ucard-info {
  display: flex;
  min-width: 0;
  flex: 1 1 0%;
  flex-direction: column;
  line-height: 1.4;
}

.smap__ucard-info b {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 13.5px;
  font-weight: 800;
}

.smap__ucard-info strong {
  font-size: 13px;
  font-weight: 800;
  color: #1f7f72;
}

.smap__ucard-go {
  display: flex;
  height: 28px;
  width: 28px;
  flex: none;
  align-items: center;
  justify-content: center;
  border-radius: 9999px;
  background-color: #1e4166;
  color: #fff;
}

[dir="ltr"] .smap__ucard-go svg {
  transform: scaleX(-1);
}

/* العميل قرّب على ماستر بلان معروضة: علامة المشروع بتختفي عشان ما تغطيش المخطط */

.smap.is-close .smap__marker.has-plan {
  visibility: hidden;
  pointer-events: none;
}

/* صورة المشروع مش موجودة (البيانات الحية) */

.smap__thumb.is-empty {
  display: block;
  background-color: #e8f0fb;
  background-image: linear-gradient(145deg, #e9f1f9, #cddcec);
}

.smap__list-btn[hidden],
    .smap__item-actions [hidden],
    .smap__item-price[hidden],
    .smap__filters [hidden],
    .smap__sheet-body [data-empty] {
  display: none;
}

/* على الكرة الأرضية (قبل اختيار منطقة): نقط صغيرة بدل علامات الأسعار عشان ما تتزاحمش */

.smap.is-globe .smap__marker {
  height: 12px;
  width: 12px;
  overflow: hidden;
  border-width: 2px;
  border-radius: 50%;
  background-color: #1e4166;
  padding: 0;
  font-size: 0;
}

.smap.is-globe .smap__marker::after {
  display: none;
}

/* موقع العميل */

.smap__me {
  display: block;
  height: 16px;
  width: 16px;
  border-radius: 50%;
  border: 3px solid #fff;
  background-color: #2f7de1;
  box-shadow: 0 0 0 6px rgba(47, 125, 225, 0.28);
}

.smap .maplibregl-map,
    .smap .mapboxgl-map {
  font-family: inherit;
}

.smap .maplibregl-canvas,
    .smap .mapboxgl-canvas {
  outline: none;
}

/* مصدر صور الخريطة: سطر صغير هادي آخر قايمة "اختر المنطقة" (مفيش علامة فوق الخريطة) */

.smap__credit {
  margin-top: 10px;
  font-size: 10.5px !important;
  font-weight: 600 !important;
  line-height: 1.5;
  opacity: 0.7;
}

.smap__credit:empty {
  display: none;
}

/* المشاريع — موبايل: فوق أسفل الخريطة (زرار "عرض القائمة" + كروت بالعرض) */

.smap__panel {
  position: absolute;
  right: 0;
  bottom: calc(14px + env(safe-area-inset-bottom, 0px));
  left: 0;
  z-index: 1001;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  pointer-events: none;
}

.smap__panel > * {
  pointer-events: auto;
}

/* العنوان: على الموبايل للسيو وقارئ الشاشة بس — ظاهر في عمود الديسك توب */

.smap__head {
  position: absolute;
  height: 1px;
  width: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
}

.smap__list-btn {
  display: inline-flex;
  height: 46px;
  align-items: center;
  gap: 9px;
  border-radius: 999px;
  background-color: #fff;
  padding-inline: 22px;
  font-size: 15px;
  font-weight: 800;
  line-height: 1;
  color: #123a5c;
  box-shadow: 0 12px 24px -10px rgba(3, 12, 22, 0.85);
}

.smap__list {
  display: flex;
  width: 100%;
  gap: 10px;
  overflow-x: auto;
  padding: 2px 12px 4px;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  transition: opacity 0.35s, transform 0.35s;
}

.smap__list::-webkit-scrollbar {
  display: none;
}

.smap__list > li {
  width: min(82%, 310px);
  flex-shrink: 0;
  scroll-snap-align: center;
}

.smap__list > li[hidden] {
  display: none;
}

/* كارت المشروع: زجاج فاتح مصنفر فوق الخريطة (لبني أبيض — مش أسود ولا رمادي ، ومش شفاف قوي) */

.smap__item {
  display: flex;
  height: 100%;
  cursor: pointer;
  flex-direction: column;
  gap: 9px;
  border-radius: 18px;
  border: 1px solid rgba(255, 255, 255, 0.85);
  background-color: rgba(241, 247, 253, 0.82);
  background-image: linear-gradient(135deg, rgba(255, 255, 255, 0.55) 0%, rgba(228, 240, 251, 0.25) 100%);
  padding: 9px;
  color: #123a5c;
  box-shadow: 0 16px 30px -16px rgba(3, 12, 22, 0.85), inset 0 1px 0 rgba(255, 255, 255, 0.9);
  -webkit-backdrop-filter: blur(18px) saturate(1.6);
  backdrop-filter: blur(18px) saturate(1.6);
  transition: border-color 0.2s, background-color 0.2s;
}

.smap__item[aria-current="true"] {
  border-color: #2fb5a5;
  background-color: rgba(246, 251, 255, 0.92);
  box-shadow: 0 16px 30px -16px rgba(3, 12, 22, 0.85), 0 0 0 1.5px #2fb5a5;
}

.smap__item-main {
  display: flex;
  align-items: center;
  gap: 10px;
}

.smap__thumb {
  height: 60px;
  width: 60px;
  flex-shrink: 0;
  border-radius: 13px;
  background-color: #dbe6f6;
  -o-object-fit: cover;
     object-fit: cover;
}

.smap__item-name,
    .smap__item-meta,
    .smap__item-price {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.smap__item-name {
  font-size: 14.5px;
  font-weight: 800;
  line-height: 1.5;
}

.smap__item-meta {
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1.6;
  color: #5b6b7c;
}

.smap__item-price {
  font-size: 13.5px;
  font-weight: 800;
  line-height: 1.5;
  color: #178f81;
}

.smap__item-price small {
  font-size: 11px;
  font-weight: 600;
  color: #5b6b7c;
}

.smap__item-actions {
  display: none;
  grid-template-columns: 1.25fr 1fr 1.1fr;
  gap: 6px;
}

.smap__item[aria-current="true"] .smap__item-actions {
  display: grid;
}

.smap__btn {
  display: flex;
  height: 36px;
  min-width: 0;
  align-items: center;
  justify-content: center;
  gap: 5px;
  border-radius: 10px;
  border: 1px solid rgba(30, 65, 102, 0.22);
  background-color: rgba(255, 255, 255, 0.75);
  padding-inline: 6px;
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  color: #123a5c;
  white-space: nowrap;
}

.smap__btn svg {
  flex-shrink: 0;
}

.smap__btn--main {
  border-color: #1e4166;
  background-color: #1e4166;
  color: #fff;
}

.smap__empty {
  border-radius: 14px;
  background-color: rgba(255, 255, 255, 0.96);
  padding: 12px 18px;
  font-size: 14px;
  font-weight: 700;
  color: #5b6b7c;
}

/* لوحة الفلاتر: موبايل طالعة من تحت — ديسك توب كارت تحت الشريط */

.smap__sheet {
  position: absolute;
  inset: 0;
  z-index: 1010;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}

.smap__sheet[hidden] {
  display: none;
}

.smap__sheet-dim {
  position: absolute;
  inset: 0;
  background-color: rgba(7, 19, 32, 0.5);
}

/* لوحة فلاتر الخريطة: نفس شكل صفحة "تصفية" بتاعة الموقع (لبني هادي بتدرّج + خط خفيف ، سهم رجوع + عنوان بأيقونة ، أقسام بأيقونة وخط تحت العنوان ، كبسولات ، وتحت "عرض النتائج" + "مسح") */

.smap__sheet-dim {
  background-color: transparent;
}

.smap__sheet-box {
  position: relative;
  display: flex;
  max-height: 86%;
  width: 100%;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid #c6d6ea;
  border-bottom-width: 0;
  border-radius: 28px 28px 0 0;
  background-color: #e8f0fb;
  background-image: linear-gradient(180deg, #e3edf9 0, #eef4fb 130px, #f6f9fd 100%);
  box-shadow: 0 -14px 44px -8px rgba(13, 32, 51, 0.42);
  animation: smap-rise 0.28s cubic-bezier(0.2, 0.8, 0.2, 1);
}

@keyframes smap-rise {
  from {
    transform: translateY(24px);
    opacity: 0;
  }
}

.smap__sheet-head {
  position: relative;
  display: flex;
  height: 64px;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  padding-inline: 20px;
}

.smap__sheet-head p {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.5;
  color: #123a5c;
}

.smap__sheet-head p > span {
  display: flex;
  height: 36px;
  width: 36px;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  background-color: #1e4166;
  color: #fff;
}

.smap__sheet-head button {
  position: absolute;
  inset-inline-start: 12px;
  display: flex;
  height: 44px;
  width: 44px;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  color: #123a5c;
}

.smap__sheet-body {
  min-height: 0;
  flex: 1 1 0%;
  overflow-y: auto;
  padding: 0 20px 24px;
}

.smap__sheet-body section {
  margin-top: 24px;
}

.smap__sheet-body section:first-of-type {
  margin-top: 8px;
}

.smap__sheet-body section[hidden] {
  display: none;
}

.smap__fhead {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
}

.smap__fhead > div {
  display: flex;
  align-items: center;
  gap: 12px;
}

.smap__fhead > div > span {
  display: flex;
  height: 40px;
  width: 40px;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  background-color: #e8f0fb;
  color: #1f63c6;
}

.smap__fhead p {
  position: relative;
  padding-bottom: 8px;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.5;
  color: #123a5c;
}

.smap__fhead p::after {
  content: "";
  position: absolute;
  bottom: 0;
  inset-inline-start: 0;
  height: 3px;
  width: 44px;
  border-radius: 999px;
  background-color: #a9c4ec;
}

.smap__fhead .clear-btn {
  margin-top: 6px;
}

.smap__sheet .smap__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.smap__sheet .smap__chip {
  display: inline-flex;
  height: 46px;
  align-items: center;
  border: 1px solid #d3dfee;
  border-radius: 999px;
  background-color: #fff;
  padding: 0 18px;
  font-size: 14.5px;
  font-weight: 500;
  line-height: 1.5;
  color: #123a5c;
  box-shadow: none;
  transition: background-color 0.15s, border-color 0.15s, color 0.15s;
}

.smap__sheet .smap__chip[aria-pressed="true"] {
  border-color: #1e4166;
  background-color: #1e4166;
  color: #fff;
}

.smap__sheet-foot {
  display: flex;
  flex-shrink: 0;
  gap: 12px;
  border-radius: 26px 26px 0 0;
  background-color: #fff;
  padding: 16px 20px calc(20px + env(safe-area-inset-bottom, 0px));
  box-shadow: 0 -8px 24px -14px rgba(18, 58, 92, 0.35);
}

.smap__sheet-apply {
  display: flex;
  height: 56px;
  flex: 2 1 0%;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background-color: #1e4166;
  font-size: 17px;
  font-weight: 700;
  line-height: 1.5;
  color: #fff;
  transition: background-color 0.15s;
}

.smap__sheet-apply:hover {
  background-color: #123a5c;
}

.smap__sheet-clear {
  flex: 1 1 0%;
}

@media (max-width: 1023px) {
  /* على الكرة الأرضية: كروت المشاريع مستخبية لحد ما العميل يختار منطقة / مشروع — "عرض القائمة" بس */

  .smap.is-globe .smap__list {
    height: 0;
    overflow: hidden;
    opacity: 0;
    padding-block: 0;
    pointer-events: none;
    transform: translateY(16px);
  }

  /* حقوق صور الخريطة فوق كروت المشاريع */

  .smap .maplibregl-ctrl-bottom-left,
        .smap .mapboxgl-ctrl-bottom-left {
    bottom: 196px;
  }

  .smap.is-globe .maplibregl-ctrl-bottom-left,
        .smap.is-globe .mapboxgl-ctrl-bottom-left {
    bottom: 70px;
  }
}

@media (min-width: 1024px) {
  .smap {
    display: grid;
    grid-template-columns: 410px minmax(0, 1fr);
    grid-template-rows: auto minmax(0, 1fr);
    background-color: #fff;
  }

  .smap__header {
    grid-column: 2;
    grid-row: 1;
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px 18px;
  }

  .smap__row {
    width: 420px;
    flex-shrink: 0;
  }

  .smap__filters {
    min-width: 0;
    flex: 1 1 0%;
    margin: 0;
    padding-inline: 0;
  }

  .smap__map {
    grid-column: 2;
    grid-row: 2;
  }

  .smap__top {
    top: 16px;
    right: 16px;
    left: auto;
    width: 440px;
  }

  [dir="ltr"] .smap__top {
    right: auto;
    left: 16px;
  }

  .smap__tools {
    top: 16px;
    left: 16px;
  }

  [dir="ltr"] .smap__tools {
    right: 16px;
  }

  .smap__tools .smap__zoom {
    display: flex;
  }

  /* ديسك توب: المشاريع عمود أبيض على الجنب */

  .smap__panel {
    position: static;
    min-height: 0;
    align-items: stretch;
    gap: 12px;
    grid-column: 1;
    grid-row: 1 / span 2;
    padding: 20px 16px 16px;
    pointer-events: auto;
  }

  .smap__head {
    position: static;
    height: auto;
    width: auto;
    overflow: visible;
    clip: auto;
    white-space: normal;
  }

  .smap__head h1 {
    font-size: 23px;
    font-weight: 800;
    line-height: 1.4;
  }

  .smap__head p {
    font-size: 13.5px;
    font-weight: 600;
    line-height: 1.7;
    color: #5b6b7c;
  }

  .smap__list-btn {
    height: 44px;
    justify-content: center;
    border: 1px solid #d3dfee;
    box-shadow: none;
  }

  .smap__list {
    min-height: 0;
    flex: 1 1 0%;
    flex-direction: column;
    gap: 8px;
    overflow-x: hidden;
    overflow-y: auto;
    padding: 0 2px 0 6px;
    scroll-snap-type: none;
  }

  .smap__list > li {
    width: auto;
  }

  .smap__item {
    border-color: #d3dfee;
    background-color: #fff;
    color: #123a5c;
    box-shadow: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }

  .smap__item[aria-current="true"] {
    border-color: #2a9d8f;
    background-color: #f3faf8;
  }

  .smap__thumb {
    background-color: #e8f0fb;
  }

  .smap__item-meta,
        .smap__item-price small {
    color: #5b6b7c;
  }

  .smap__item-price {
    color: #1f9a8b;
  }

  .smap__btn {
    border-color: #d3dfee;
    background-color: #fff;
    color: #123a5c;
  }

  .smap__btn--main {
    border-color: #1e4166;
    background-color: #1e4166;
    color: #fff;
  }

  .smap__empty {
    border: 1px solid #d3dfee;
    text-align: center;
  }

  .smap__sheet {
    align-items: flex-start;
    justify-content: flex-start;
    grid-column: 2;
    grid-row: 2;
    position: relative;
    inset: auto;
    padding: 12px 18px;
  }

  .smap__sheet-box {
    width: 460px;
    max-height: 92%;
    border-bottom-width: 1px;
    border-radius: 24px;
    box-shadow: 0 18px 44px -18px rgba(13, 32, 51, 0.5);
  }
}

/* زرار "مؤشر شاري" في الشريط: نبضة ضغط + حلقة بتكبر وتختفي */

@keyframes index-badge-tap {
  0%,
        62%,
        100% {
    transform: scale(1);
  }

  70% {
    transform: scale(0.93);
  }

  80% {
    transform: scale(1.05);
  }

  88% {
    transform: scale(1);
  }
}

@keyframes index-badge-ring {
  0%,
        70% {
    opacity: 0;
    transform: scale(1);
  }

  76% {
    opacity: 0.9;
  }

  100% {
    opacity: 0;
    transform: scale(1.25, 1.6);
  }
}

/* ── app.css · جزء 13 من 16: قناة شاري ، شاري كارد «سفير» ، نافذة الفلتر بره البحث ، تنبيه الخصوصية ، زرار التطبيق (المصدر: resources/css/shary/app/13-channels-popups.css — عدّل هنا وشغّل tools/minify-assets.sh) */
/* ---- اشترك في قناة شاري (واتساب / تليجرام): partials/channels-cta ---- */

.chan-cta {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 14px;
  overflow: hidden;
  border-radius: 20px;
  border: 1px solid #d3dfee;
  background-color: #e8f0fb;
  background-image: radial-gradient(120% 90% at 100% 0%, #e2f4f1 0%, rgba(226, 244, 241, 0) 60%);
  padding: 18px 16px;
  color: #123a5c;
}

[dir="ltr"] .chan-cta {
  background-image: radial-gradient(120% 90% at 0% 0%, #e2f4f1 0%, rgba(226, 244, 241, 0) 60%);
}

.chan-cta__ring {
  position: absolute;
  inset-inline-end: -46px;
  bottom: -70px;
  height: 170px;
  width: 170px;
  border-radius: 50%;
  border: 22px solid rgba(42, 157, 143, 0.09);
  pointer-events: none;
}

.chan-cta__body {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.chan-cta__bell {
  position: relative;
  display: flex;
  height: 46px;
  width: 46px;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  border-radius: 14px;
  background-color: #123a5c;
  color: #fff;
}

.chan-cta__bell svg {
  transform-origin: 50% 10%;
  animation: fab-ring 5s ease-in-out 1.5s infinite;
}

.chan-cta__bell i {
  position: absolute;
  top: -3px;
  inset-inline-end: -3px;
  height: 12px;
  width: 12px;
  border-radius: 50%;
  border: 2px solid #f2f8fc;
  background-color: #fcb424;
}

.chan-cta__title {
  margin: 0;
  font-size: 18px;
  font-weight: 800;
  line-height: 1.5;
  color: #123a5c;
}

.chan-cta__text {
  margin: 2px 0 0;
  font-size: 13.5px;
  font-weight: 500;
  line-height: 1.8;
  color: #5b6b7c;
}

.chan-cta__tags {
  margin: 8px 0 0;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 0;
  list-style: none;
}

.chan-cta__tags li {
  margin: 0;
  border-radius: 999px;
  border: 1px solid #d3dfee;
  background-color: #fff;
  padding: 3px 10px;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.6;
  color: #1e4166;
}

.chan-cta__tags li::before {
  content: none;
}

.chan-cta__actions {
  position: relative;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.chan-cta__actions--1 {
  grid-template-columns: minmax(0, 1fr);
}

/* 3 قنوات على الموبايل: 3 زراير جنب بعض — الأيقونة فوق والاسم تحت */

.chan-cta__actions--3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.chan-cta__actions--3 .chan-cta__btn {
  height: auto;
  min-height: 78px;
  flex-direction: column;
  gap: 5px;
  padding: 8px;
  font-size: 12.5px;
}

.chan-cta__actions--3 .chan-cta__btn span {
  text-align: center;
}

.chan-cta__actions--3 .chan-cta__btn small {
  display: none;
}

.chan-cta__btn {
  display: flex;
  height: auto;
  min-height: 52px;
  min-width: 0;
  align-items: center;
  justify-content: center;
  gap: 9px;
  border-radius: 14px;
  padding: 6px 12px;
  font-size: 14.5px;
  font-weight: 800;
  line-height: 1.25;
  color: #fff !important;
  text-decoration: none !important;
  transition: transform 0.2s, filter 0.2s;
}

.chan-cta__btn:hover {
  transform: translateY(-2px);
  filter: brightness(1.05);
}

/* الأيقونة: brand-icons.js بيبدّل <i> بـ SVG — المقاس والتوسيط على الاتنين */

.chan-cta__btn i,
    .chan-cta__btn > svg {
  display: block;
  height: 24px;
  width: 24px;
  flex-shrink: 0;
  font-size: 24px;
  line-height: 1;
  vertical-align: middle;
}

.chan-cta__btn span {
  display: flex;
  min-width: 0;
  flex-direction: column;
  text-align: start;
}

.chan-cta__btn small {
  font-size: 10.5px;
  font-weight: 600;
  opacity: 0.88;
}

.chan-cta__btn--wa {
  background-color: #1fae54;
  box-shadow: 0 12px 20px -12px rgba(31, 174, 84, 0.9);
}

.chan-cta__btn--tg {
  background-color: #229ed9;
  box-shadow: 0 12px 20px -12px rgba(34, 158, 217, 0.9);
}

.chan-cta__btn--yt {
  background-color: #e62117;
  box-shadow: 0 12px 20px -12px rgba(230, 33, 23, 0.9);
}

/* 3 قنوات على الموبايل: الكروت التلاتة بيتقسموا نفس الصفوف (subgrid) — الأيقونات على خط واحد والأسامي بتبدأ من خط واحد
       حتى لو اسم قناة نزل سطرين (بالإنجليزي) ، والمجموعة كلها في نص الكارت. المتصفحات القديمة: نفس الشكل من غير المحاذاة دي */

@supports (grid-template-rows: subgrid) {
  .chan-cta__actions--3 {
    grid-template-rows: minmax(8px, 1fr) auto auto minmax(8px, 1fr);
    min-height: 78px;
    row-gap: 0;
  }

  .chan-cta__actions--3 .chan-cta__btn {
    display: grid;
    grid-row: 1 / -1;
    grid-template-rows: subgrid;
    row-gap: 0;
    justify-items: center;
    min-height: 0;
    padding-block: 0;
  }

  .chan-cta__actions--3 .chan-cta__btn > i,
        .chan-cta__actions--3 .chan-cta__btn > svg {
    grid-row: 2;
  }

  .chan-cta__actions--3 .chan-cta__btn > span {
    grid-row: 3;
    margin-top: 5px;
  }
}

/* وسط المقال: مسافة فوق وتحت — والوسوم بتفضل جنب بعض (مش نقط المقال) */

.article-content .chan-cta,
    .prop-about .chan-cta {
  margin-block: 6px;
}

.article-content .chan-cta__tags,
    .prop-about .chan-cta__tags {
  flex-direction: row;
  gap: 6px;
}

.article-content .chan-cta__tags li,
    .prop-about .chan-cta__tags li {
  padding: 3px 10px;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.6;
}

/* جوه المقال: كل كبسولة نقطتها قدامها من بره (مش جوه الكبسولة اللي جنبها) */
.article-content .chan-cta__tags li,
    .prop-about .chan-cta__tags li {
  position: relative;
  margin-inline-start: 14px;
  list-style: none;
}

.article-content .chan-cta__tags li::before,
    .prop-about .chan-cta__tags li::before {
  content: "•";
  position: absolute;
  inset-inline-start: -13px;
  color: #1f7f72;
  font-weight: 700;
  top: 50%;
  transform: translateY(-52%);
  line-height: 1;
}

.article-content .chan-cta__title,
    .article-content .chan-cta__text {
  line-height: 1.6;
}

.article-content p.chan-cta__title {
  font-size: 18px;
  font-weight: 800;
}

.article-content p.chan-cta__text {
  font-size: 13.5px;
  line-height: 1.8;
}

@media (min-width: 1024px) {
  .chan-cta {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 28px;
    padding: 24px 28px;
  }

  /* الكلام ياخد المساحة الباقية. لو الكارت في عمود ضيق (أقل من 880px): الزراير بتنزل تحت الكلام صف واحد بعرض الكارت — زي الموبايل */

  .chan-cta {
    flex-wrap: wrap;
    container-type: inline-size;
  }

  .chan-cta__body {
    min-width: 0;
    flex: 1 1 340px;
  }

  /* صفحة المقال: بوكس الإعلانات بعرض الصفحة فوق (data-article-ad) وكارت القنوات بعرض الصفحة تحت (data-article-channels) — اللي وسط المقال مخفيين على الديسك توب */

  [data-article-page] .article-content .ad-strip,
        [data-article-page] .article-content .chan-cta,
        [data-project-page] .prop-about .chan-cta {
    display: none;
  }

  .chan-cta__bell {
    height: 56px;
    width: 56px;
    border-radius: 16px;
  }

  .chan-cta__title {
    font-size: 22px;
  }

  .chan-cta__text {
    font-size: 15px;
  }

  /* الكروت بمقاس ثابت (150 / 190 / 220px على الأقل) — ولو اسم القناة أطول (زي الإنجليزي) الكروت بتوسع كلها بنفس المقاس
           عشان الاسم ييجي في سطر واحد والأيقونة في النص */

  .chan-cta__actions {
    flex-shrink: 0;
    grid-template-columns: repeat(2, minmax(190px, 1fr));
  }

  .chan-cta__actions--1 {
    grid-template-columns: minmax(220px, 1fr);
  }

  .chan-cta__actions--3 {
    grid-template-columns: repeat(3, minmax(150px, 1fr));
    grid-template-rows: none;
    min-height: 0;
    gap: 10px;
  }

  .chan-cta__actions--3 .chan-cta__btn {
    display: flex;
    grid-row: auto;
    min-height: 58px;
    flex-direction: row;
    gap: 8px;
    padding-block: 6px;
    font-size: 14.5px;
  }

  .chan-cta__actions--3 .chan-cta__btn > i,
        .chan-cta__actions--3 .chan-cta__btn > svg,
        .chan-cta__actions--3 .chan-cta__btn > span {
    grid-row: auto;
    margin-top: 0;
  }

  .chan-cta__actions--3 .chan-cta__btn span {
    text-align: start;
  }

  .chan-cta__actions--3 .chan-cta__btn small {
    display: block;
  }

  .chan-cta__btn {
    min-height: 58px;
    font-size: 15.5px;
  }

  .chan-cta__btn i,
        .chan-cta__btn > svg {
    height: 28px;
    width: 28px;
    font-size: 28px;
  }

  .chan-cta__actions--3 .chan-cta__btn {
    justify-content: center;
    padding-inline: 8px;
  }

  /* لو الكارت في عمود ضيق (أقل من 880px): الزراير تحت الكلام صف واحد بعرض الكارت — زي الموبايل (القاعدة دي بعد المقاسات الثابتة عشان تكسبها) */

  @container (max-width: 880px) {
    .chan-cta__actions {
      flex: 1 1 100%;
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .chan-cta__actions--1 {
      grid-template-columns: minmax(0, 1fr);
    }

    .chan-cta__actions--3 {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }
  }
}

@media (prefers-reduced-motion: reduce) {
  .chan-cta__bell svg {
    animation: none;
  }
}

/* شاري كارد — "سفير شاري": كارت كحلي ← تيل وجواه 3 خطوات */

.card-amb {
  border-radius: 20px;
  background-image: linear-gradient(140deg, #123a5c 0%, #1e4166 55%, #1f8a7c 100%);
  padding: 18px 16px;
  color: #fff;
}

.card-amb__badge {
  display: flex;
  height: 38px;
  width: 38px;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  background-color: rgba(255, 255, 255, 0.16);
  color: #fcd980;
}

.card-amb__step {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  background-color: rgba(255, 255, 255, 0.1);
  padding: 12px;
}

.card-amb__number {
  display: flex;
  height: 26px;
  width: 26px;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background-color: #fcb424;
  font-size: 13.5px;
  font-weight: 800;
  line-height: 1;
  color: #123a5c;
}

@media (min-width: 1024px) {
  .card-amb {
    padding: 26px 28px;
  }

  .card-amb__step {
    flex-direction: column;
    padding: 16px;
  }
}

/* تفاصيل السداد (فرصة إعادة البيع): المدفوع / الأوفر برايس / المطلوب كاش / المتبقي أقساط / حالة الاستلام */

.opp-pay {
  border-radius: 20px;
  border: 1px solid #d3dfee;
  background-color: #fff;
  padding: 16px;
  color: #123a5c;
}

.opp-pay__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.opp-pay__head h2 {
  font-size: 19px;
  font-weight: 800;
  line-height: 1.5;
}

.opp-pay__state {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  gap: 6px;
  border-radius: 999px;
  padding: 6px 12px;
  font-size: 13px;
  font-weight: 800;
  line-height: 1.4;
}

.opp-pay__state--done {
  background-color: #e7f5f1;
  color: #136a5f;
}

.opp-pay__state--wait {
  background-color: #fdf1dc;
  color: #9a5b00;
}

.opp-pay small {
  font-size: 0.68em;
  font-weight: 700;
}

.opp-pay__cash {
  margin-top: 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border-radius: 14px;
  background-color: #123a5c;
  padding: 13px 16px;
  color: #fff;
}

.opp-pay__cash > span {
  display: flex;
  min-width: 0;
  flex-direction: column;
  font-size: 15px;
  font-weight: 800;
  line-height: 1.5;
}

.opp-pay__cash > span small {
  font-size: 12px;
  font-weight: 600;
  opacity: 0.78;
}

.opp-pay__cash > b {
  flex-shrink: 0;
  font-size: 20px;
  font-weight: 800;
  line-height: 1.4;
  white-space: nowrap;
}

.opp-pay__rest-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  font-size: 15px;
  font-weight: 800;
  line-height: 1.5;
}

.opp-pay__rest-row b {
  font-size: 18px;
  white-space: nowrap;
}

/* "المتبقي" سطر لوحده تحت المقدم (فوق كارت خطة الأقساط) */

.opp-pay__rest-row--line {
  margin-top: 10px;
  border-radius: 14px;
  border: 1px dashed #c3d2e4;
  padding: 11px 16px;
}

/* القسط + مدة الأقساط (خانتين جنب بعض) */

@media (min-width: 1024px) {
  .opp-pay {
    padding: 22px 24px;
  }

  .opp-pay__head h2 {
    font-size: 22px;
  }

  .opp-pay__cell dd,
        .opp-pay__rest-row b {
    font-size: 20px;
  }

  .opp-pay__cash > b {
    font-size: 24px;
  }

  .opp-hero {
    border-radius: 26px;
    padding: 36px 48px;
  }

  .opp-hero__title {
    font-size: 38px;
    line-height: 1.3;
  }

  .opp-hero__points {
    margin-top: 16px;
    font-size: 16px;
  }

  .opp-hero__tag {
    height: 156px;
    width: 156px;
    border-radius: 34px;
  }

  .opp-hero__pct {
    font-size: 15px;
    padding: 3px 14px;
  }

  .opp-card {
    padding: 14px;
  }

  .opp-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 14px 26px -16px rgba(18, 58, 92, 0.5);
  }

  .opp-card__photo {
    height: 140px;
    width: 124px;
  }

  .opp-deal {
    border-radius: 20px;
    border: 1px solid #e3e9ef;
    padding: 22px 26px;
  }

  .opp-timer {
    font-size: 16px;
  }

  .opp-stat {
    padding: 24px 26px;
  }

  .opp-stat b {
    font-size: 26px;
  }

  .opp-speed {
    padding: 24px 26px;
  }

  .opp-table p {
    font-size: 15px;
  }

  .opp-gauge__ring b {
    font-size: 20px;
  }

  .opp-gauge__label {
    font-size: 15px;
  }

  .opp-actions {
    max-width: 560px;
  }
}

/* ---- نافذة الفلتر المتقدم بره صفحة البحث (الهوم + صفحة الوحدة / المشروع / الفرصة): نفس فورم فلتر البحث جوه [data-home-filter].
            موبايل: لوحة طالعة من تحت زي صفحة البحث. ديسك توب: نافذة في نص الشاشة (الغلاف هو اللي ثابت، والفلتر نفسه زي عمود البحث). ---- */

.home-filter .search-head {
  display: none !important;
}

@media (min-width: 1024px) {
  /* [class~="hidden"] بدل .hidden: عشان Tailwind ما يعملش من القاعدة نسخ lg:hidden / md:hidden بتتحقق دايمًا وتغمّق الصفحة */

  .home-filter:has([data-filter-sheet="all"]:not([class~="hidden"])) {
    position: fixed;
    inset: 0;
    z-index: 70;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: transparent;
  }

  .home-filter .search-side {
    display: flex !important;
    width: 600px;
    max-width: calc(94vw / var(--z, 1));
    max-height: calc(88vh / var(--z, 1));
    flex-direction: column;
    overflow: hidden;
    border-radius: 24px;
    box-shadow: 0 40px 110px -24px rgba(15, 47, 75, 0.6);
  }

  .home-filter .search-side.hidden {
    display: none !important;
  }

  .home-filter .search-side > .area-sheet {
    display: flex !important;
    min-height: 0;
    max-height: calc(88vh / var(--z, 1));
    flex: 1;
    flex-direction: column;
    background-color: #e8f0fb !important;
    background-image: linear-gradient(180deg, #e3edf9 0, #eef4fb 130px, #f6f9fd 100%) !important;
  }

  .home-filter .search-side > .area-sheet > .lg\:hidden {
    display: flex !important;
  }

  .home-filter .search-side__scroll {
    min-height: 0;
    flex: 1;
    overflow-y: auto !important;
    padding: 0 28px 12px;
  }

  .home-filter .search-side__reset,
        .home-filter .search-side__head {
    display: none !important;
  }
}

/* ---- تنبيه سياسة الخصوصية (أول زيارة): كارت تحت — فوق شريط التواصل على الموبايل ---- */

.privacy-note {
  position: fixed;
  inset-inline: 12px;
  bottom: calc(84px + env(safe-area-inset-bottom, 0px));
  z-index: 35;
  display: flex;
  flex-direction: column;
  gap: 12px;
  border-radius: 18px;
  border: 1px solid #dfe7ef;
  background-color: #fff;
  padding: 14px;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.65;
  color: #3a4c5e;
  box-shadow: 0 18px 36px -18px rgba(13, 32, 51, 0.55);
  animation: quick-up 0.45s ease-out backwards;
}

.privacy-note.hidden {
  display: none;
}

.privacy-note__icon {
  display: flex;
  height: 38px;
  width: 38px;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  background-color: #e7f5f1;
  color: #1f8a7c;
}

/* الزرارين جنب بعض بنفس العرض: موافق (كحلي) + سياسة الخصوصية (بإطار) */

.privacy-note__actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.privacy-note__accept,
    .privacy-note__link {
  display: flex;
  height: 44px;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.5;
}

.privacy-note__accept {
  background-color: #1e4166;
  color: #fff;
}

.privacy-note__link {
  border: 1.5px solid #1e4166;
  background-color: #fff;
  color: #1e4166;
}

@media (min-width: 1024px) {
  .privacy-note {
    inset-inline: auto 28px;
    bottom: 28px;
    width: 440px;
    font-size: 14px;
  }
}

/* زرار "حمل التطبيق" في هيدر الموبايل: مستطيل بحواف ناعمة (مش كبسولة) ، كحلي متدرّج ، وكتابة واضحة */

/* زرار "حمل التطبيق" (موبايل): مستطيل بسيط رفيع — ارتفاع أقل ومن غير ظل تقيل */

.app-btn {
  display: flex;
  height: 34px;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  background-color: #1e4166;
  padding-inline: 13px;
  font-size: 13px;
  font-weight: 700;
  line-height: 1;
  color: #fff;
  white-space: nowrap;
  transition: filter 0.2s;
}

.app-btn:hover {
  filter: brightness(1.08);
}

@media (min-width: 380px) {
  .app-btn {
    padding-inline: 16px;
    font-size: 14px;
  }
}

/* مؤشر شاري — زرار "غيّر المنطقة" جنب جدول الأنواع */

.index-area-change {
  display: inline-flex;
  height: 38px;
  flex-shrink: 0;
  align-items: center;
  gap: 6px;
  border-radius: 10px;
  border: 1.5px solid #1e4166;
  background-color: #fff;
  padding-inline: 12px;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.5;
  color: #1e4166;
}

/* مؤشر شاري — نوع الوحدة في "قارن بين منطقتين" (نفس أنواع الفلتر اللي فوق) */

.index-compare__types {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.index-compare__types button {
  min-height: 38px;
  flex: 1 1 auto;
  white-space: nowrap;
  border-radius: 10px;
  border: 1.5px solid #d3dfee;
  background-color: #fff;
  padding: 6px 12px;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.5;
  color: #123a5c;
  transition: background-color 0.15s, color 0.15s, border-color 0.15s;
}

.index-compare__types button[aria-pressed="true"] {
  border-color: #1e4166;
  background-color: #1e4166;
  color: #fff;
}

/* ── app.css · جزء 14 من 16: عقارات دولية ، بوب أب التطبيق ، حركة زراير التواصل ، شريط الموبايل (المصدر: resources/css/shary/app/14-abroad-app-fab.css — عدّل هنا وشغّل tools/minify-assets.sh) */
/* ---- عقارات دولية (abroad/index + abroad/country): الدول ← المناطق ← المطورين ← المشاريع ---- */

/* كارت الدولة: الصورة مالية الكارت + العلم + الاسم والمدن + عدد المشاريع و"يبدأ من" */

.abroad-country {
  position: relative;
  display: block;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border-radius: 18px;
  background-color: #dbe6f6;
  color: #fff;
  box-shadow: 0 1px 2px rgba(18, 58, 92, 0.05), 0 16px 30px -22px rgba(18, 58, 92, 0.55);
}

.abroad-country__photo {
  position: absolute;
  inset: 0;
  height: 100%;
  width: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  transition: transform 0.5s;
}

.abroad-country:hover .abroad-country__photo {
  transform: scale(1.04);
}

.abroad-country::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(9, 26, 43, 0.9), rgba(9, 26, 43, 0.25) 55%, rgba(9, 26, 43, 0.05));
}

.abroad-country__flag,
    .abroad-hero__flag {
  position: absolute;
  top: 10px;
  inset-inline-start: 10px;
  z-index: 1;
  display: flex;
  height: 34px;
  width: 34px;
  overflow: hidden;
  border-radius: 50%;
  border: 2px solid #fff;
  background-color: #fff;
  box-shadow: 0 4px 12px -4px rgba(9, 26, 43, 0.55);
}

.abroad-country__flag img,
    .abroad-hero__flag img {
  height: 100%;
  width: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

.abroad-country__text {
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  z-index: 1;
  display: flex;
  flex-direction: column;
  padding: 12px;
}

.abroad-country__text b {
  font-size: 17px;
  font-weight: 800;
  line-height: 1.4;
}

.abroad-country__text small {
  font-size: 12px;
  font-weight: 600;
  line-height: 1.6;
  opacity: 0.9;
}

.abroad-country__meta {
  margin-top: 7px;
  display: flex;
  flex-wrap: wrap;
  gap: 4px 6px;
  font-size: 11.5px;
  font-weight: 700;
  line-height: 1.5;
}

.abroad-country__meta > span {
  border-radius: 999px;
  background-color: rgba(255, 255, 255, 0.2);
  padding: 2px 9px;
  white-space: nowrap;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}

/* شريط الدول السريع: علم في دايرة + الاسم + عدد المشاريع */

.abroad-flags {
  display: flex;
  gap: 10px;
  margin-inline: -20px;
  overflow-x: auto;
  padding: 2px 20px 6px;
  scrollbar-width: none;
}

.abroad-flags::-webkit-scrollbar,
    .abroad-jump::-webkit-scrollbar {
  display: none;
}

.abroad-flag {
  display: flex;
  min-width: 86px;
  flex: 1 0 auto;
  flex-direction: column;
  align-items: center;
  border-radius: 16px;
  border: 1px solid #e3e9ef;
  background-color: #fff;
  padding: 10px 10px 9px;
  text-align: center;
  color: #123a5c;
  transition: box-shadow 0.2s, border-color 0.2s;
}

.abroad-flag:hover {
  border-color: #9fc4e6;
  box-shadow: 0 10px 20px -14px rgba(18, 58, 92, 0.5);
}

.abroad-flag__img {
  display: flex;
  height: 46px;
  width: 46px;
  overflow: hidden;
  border-radius: 50%;
  border: 2px solid #eaf1fa;
  background-color: #e8f0fb;
}

.abroad-flag__img img {
  height: 100%;
  width: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

.abroad-flag b {
  margin-top: 6px;
  white-space: nowrap;
  font-size: 13px;
  font-weight: 800;
  line-height: 1.5;
}

.abroad-flag small {
  white-space: nowrap;
  font-size: 11.5px;
  font-weight: 600;
  line-height: 1.5;
  color: #5b6b7c;
}

/* ليه تستثمر برا مصر مع شاري: 4 مميزات */

.abroad-benefit {
  display: flex;
  flex-direction: column;
  border-radius: 16px;
  border: 1px solid #e3e9ef;
  background-color: #fff;
  padding: 14px;
  color: #123a5c;
}

.abroad-benefit__icon {
  display: flex;
  height: 42px;
  width: 42px;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  background-color: #e7f5f1;
  color: #1f7f72;
}

.abroad-benefit b {
  margin-top: 10px;
  font-size: 14.5px;
  font-weight: 800;
  line-height: 1.5;
}

.abroad-benefit small {
  margin-top: 2px;
  font-size: 12.5px;
  font-weight: 500;
  line-height: 1.7;
  color: #5b6b7c;
}

/* زراير هيدر الدولة + التنقل السريع بين الأقسام */

.abroad-hero__actions {
  margin-top: 14px;
  display: flex;
  gap: 8px;
}

.abroad-hero__btn {
  display: inline-flex;
  height: 44px;
  flex: 1;
  align-items: center;
  justify-content: center;
  gap: 7px;
  white-space: nowrap;
  border-radius: 12px;
  font-size: 14px;
  font-weight: 800;
  line-height: 1.5;
}

.abroad-hero__btn--main {
  background-color: #fff;
  color: #123a5c;
}

.abroad-hero__btn--wa {
  background-color: #25c05f;
  color: #fff;
}

.abroad-jump {
  position: sticky;
  top: var(--prop-header, 76px);
  z-index: 20;
  display: flex;
  gap: 6px;
  margin: 10px -20px 0;
  overflow-x: auto;
  background-color: rgba(255, 255, 255, 0.96);
  padding: 8px 20px;
  scrollbar-width: none;
}

.abroad-jump a {
  flex: 1 0 auto;
  white-space: nowrap;
  border-radius: 999px;
  background-color: #e8f0fb;
  padding: 7px 14px;
  text-align: center;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.5;
  color: #123a5c;
  transition: background-color 0.15s, color 0.15s;
}

.abroad-jump a:hover {
  background-color: #1e4166;
  color: #fff;
}

@media (min-width: 1024px) {
  .abroad-flags {
    margin-inline: 0;
    gap: 16px;
    padding-inline: 0;
  }

  .abroad-flag {
    padding: 16px 12px 14px;
  }

  .abroad-flag__img {
    height: 58px;
    width: 58px;
  }

  .abroad-flag b {
    font-size: 15px;
  }

  .abroad-flag small {
    font-size: 13px;
  }

  .abroad-benefit {
    padding: 20px;
  }

  .abroad-benefit b {
    font-size: 16.5px;
  }

  .abroad-benefit small {
    font-size: 14px;
  }

  .abroad-hero__actions {
    gap: 12px;
  }

  .abroad-hero__btn {
    height: 48px;
    flex: 0 0 auto;
    padding-inline: 22px;
    font-size: 15px;
  }

  .abroad-jump {
    top: 96px;
    margin: 14px 0 0;
    gap: 10px;
    border-radius: 14px;
    padding: 10px 0;
  }

  .abroad-jump a {
    flex: 0 0 auto;
    padding: 9px 22px;
    font-size: 14.5px;
  }
}

/* إزاي بتشتري: 3 خطوات */

.abroad-step {
  display: flex;
  align-items: center;
  gap: 12px;
  border-radius: 16px;
  background-color: #e8f0fb;
  padding: 14px 16px;
  color: #123a5c;
}

.abroad-step__num {
  display: flex;
  height: 40px;
  width: 40px;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background-color: #1e4166;
  font-size: 17px;
  font-weight: 800;
  color: #fff;
}

.abroad-step b {
  display: block;
  font-size: 15.5px;
  font-weight: 800;
  line-height: 1.5;
}

.abroad-step small {
  display: block;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.7;
  color: #5b6b7c;
}

/* هيدر الدولة: الصورة وعليها العلم + الاسم + الأرقام */

.abroad-hero {
  position: relative;
  display: flex;
  min-height: 250px;
  align-items: flex-end;
  overflow: hidden;
  border-radius: 18px;
  background-color: #1f5487;
  color: #fff;
}

.abroad-hero__photo {
  position: absolute;
  inset: 0;
  height: 100%;
  width: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

.abroad-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(9, 26, 43, 0.92), rgba(9, 26, 43, 0.45) 55%, rgba(9, 26, 43, 0.15));
}

.abroad-hero__body {
  position: relative;
  z-index: 1;
  width: 100%;
  padding: 40px 18px 18px;
}

/* العلم فوق العنوان جوه نفس العمود (مش فوق الصورة) عشان ما يركبش على العنوان في أي مقاس */

.abroad-hero__flag {
  position: static;
  margin-bottom: 10px;
  height: 42px;
  width: 42px;
}

.abroad-hero h1 {
  font-size: 28px;
  font-weight: 800;
  line-height: 1.3;
}

.abroad-hero p {
  margin-top: 2px;
  font-size: 13.5px;
  font-weight: 600;
  line-height: 1.7;
  opacity: 0.92;
}

.abroad-hero__stats {
  margin-top: 12px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.abroad-hero__stats li {
  display: flex;
  flex-direction: column;
  border-radius: 12px;
  background-color: rgba(255, 255, 255, 0.16);
  padding: 6px 12px;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}

.abroad-hero__stats b {
  font-size: 16px;
  font-weight: 800;
  line-height: 1.4;
}

.abroad-hero__stats span {
  font-size: 11.5px;
  font-weight: 600;
  line-height: 1.5;
  opacity: 0.9;
}

/* معلومات سريعة عن الدولة (العملة / التملك / الإقامة / العائد) */

.abroad-facts {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-content: start;
  gap: 8px;
}

.abroad-facts > div {
  border-radius: 14px;
  background-color: #e8f0fb;
  padding: 11px 13px;
}

.abroad-facts dt {
  font-size: 12px;
  font-weight: 600;
  line-height: 1.6;
  color: #5b6b7c;
}

.abroad-facts dd {
  font-size: 14px;
  font-weight: 800;
  line-height: 1.6;
  color: #123a5c;
}

/* المناطق: موبايل بتتسحب بالجنب — ديسك توب 3 في الصف */

.abroad-areas,
    .abroad-rail {
  display: flex;
  gap: 12px;
  margin-inline: -20px;
  overflow-x: auto;
  padding-inline: 20px;
  scroll-snap-type: x proximity;
  scroll-padding-inline: 20px;
  scrollbar-width: none;
}

.abroad-areas::-webkit-scrollbar,
    .abroad-rail::-webkit-scrollbar,
    .abroad-chips::-webkit-scrollbar {
  display: none;
}

.abroad-rail > * {
  flex: 0 0 46%;
  scroll-snap-align: start;
}

.abroad-area {
  position: relative;
  display: block;
  height: 150px;
  flex: 0 0 72%;
  overflow: hidden;
  border-radius: 16px;
  background-color: #dbe6f6;
  color: #fff;
  scroll-snap-align: start;
  outline: 0 solid #35b6a7;
  transition: outline-width 0.15s;
}

.abroad-area[aria-pressed="true"] {
  outline-width: 3px;
}

.abroad-area > img {
  position: absolute;
  inset: 0;
  height: 100%;
  width: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

.abroad-area::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(9, 26, 43, 0.88), rgba(9, 26, 43, 0.1) 70%);
}

.abroad-area__text {
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  z-index: 1;
  display: flex;
  flex-direction: column;
  padding: 12px 14px;
}

.abroad-area__text b {
  font-size: 17px;
  font-weight: 800;
  line-height: 1.4;
}

.abroad-area__text small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 12.5px;
  font-weight: 500;
  line-height: 1.6;
  opacity: 0.92;
}

.abroad-area__text > span {
  margin-top: 5px;
  align-self: flex-start;
  border-radius: 999px;
  background-color: #35b6a7;
  padding: 1px 10px;
  font-size: 11.5px;
  font-weight: 700;
  line-height: 1.7;
}

/* المطورين في الدولة */

.abroad-devs {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}

.abroad-dev {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 12px;
  border-radius: 16px;
  border: 1px solid #e3e9ef;
  background-color: #fff;
  padding: 12px 14px;
  color: #123a5c;
  transition: box-shadow 0.2s;
}

.abroad-dev:hover {
  box-shadow: 0 10px 22px -14px rgba(18, 58, 92, 0.5);
}

.abroad-dev__logo {
  display: flex;
  height: 52px;
  width: 52px;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: 1px solid #e3e9ef;
  background-color: #1e4166;
  -o-object-fit: contain;
     object-fit: contain;
  font-size: 14px;
  font-weight: 800;
  color: #fff;
}

img.abroad-dev__logo {
  background-color: #fff;
}

.abroad-dev b {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 15.5px;
  font-weight: 800;
  line-height: 1.5;
}

.abroad-dev small {
  display: block;
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1.6;
  color: #5b6b7c;
}

/* شريط المناطق فوق "كل المشاريع" */

.abroad-chips {
  display: flex;
  gap: 8px;
  margin-inline: -20px;
  overflow-x: auto;
  padding-inline: 20px;
  scrollbar-width: none;
}

.abroad-chip {
  flex-shrink: 0;
  white-space: nowrap;
  border-radius: 999px;
  border: 1.5px solid #d3dfee;
  background-color: #fff;
  padding: 7px 16px;
  font-size: 13.5px;
  font-weight: 700;
  line-height: 1.5;
  color: #123a5c;
  transition: background-color 0.15s, color 0.15s, border-color 0.15s;
}

.abroad-chip[aria-pressed="true"] {
  border-color: #1e4166;
  background-color: #1e4166;
  color: #fff;
}

@media (min-width: 1024px) {
  .abroad-country {
    aspect-ratio: 4 / 3;
    border-radius: 22px;
  }

  .abroad-country__flag {
    top: 16px;
    inset-inline-start: 16px;
    height: 44px;
    width: 44px;
  }

  .abroad-country__text {
    padding: 20px;
  }

  .abroad-country__text b {
    font-size: 24px;
  }

  .abroad-country__text small {
    font-size: 14.5px;
  }

  .abroad-country__meta {
    font-size: 13px;
  }

  .abroad-step {
    padding: 20px 22px;
  }

  .abroad-step b {
    font-size: 17px;
  }

  .abroad-step small {
    font-size: 14.5px;
  }

  .abroad-hero {
    min-height: 380px;
    border-radius: 24px;
  }

  .abroad-hero__body {
    padding: 48px;
  }

  .abroad-hero__flag {
    margin-bottom: 14px;
    height: 56px;
    width: 56px;
  }

  .abroad-hero h1 {
    font-size: 46px;
    line-height: 1.2;
  }

  .abroad-hero p {
    font-size: 17px;
  }

  .abroad-hero__stats b {
    font-size: 20px;
  }

  .abroad-hero__stats span {
    font-size: 13px;
  }

  .abroad-hero__stats li {
    padding: 9px 18px;
  }

  .abroad-facts dt {
    font-size: 13px;
  }

  .abroad-facts dd {
    font-size: 15.5px;
  }

  .abroad-areas,
        .abroad-rail,
        .abroad-chips {
    margin-inline: 0;
    padding-inline: 0;
    scroll-padding-inline: 0;
  }

  .abroad-areas {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
    overflow: visible;
  }

  .abroad-area {
    height: 200px;
    border-radius: 20px;
  }

  .abroad-area__text {
    padding: 18px 20px;
  }

  .abroad-area__text b {
    font-size: 21px;
  }

  .abroad-area__text small {
    font-size: 14px;
  }

  .abroad-rail {
    gap: 24px;
  }

  .abroad-rail > * {
    flex-basis: calc((100% - 72px) / 4);
  }

  .abroad-devs {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
  }

  .abroad-chip {
    padding: 9px 20px;
    font-size: 14.5px;
  }
}

/* ---- بوب أب تحميل التطبيق (موبايل): بيدخل من الشمال ---- */

.app-pop {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.app-pop[hidden] {
  display: none;
}

.app-pop__backdrop {
  position: absolute;
  inset: 0;
  background-color: rgba(10, 26, 42, 0.58);
  opacity: 0;
  transition: opacity 0.3s;
}

/* كارت واحد بألوان لوجو شاري: أزرق شاري صافي من فوق لتحت (من غير أي لون رمادي أو بقع) ، ودايرة بيضا كبيرة ورا التليفون ومعاها دايرتين صغيرين صفرا وتركواز (دواير اللوجو) —
       التليفون واضح ، العنوان أبيض ، سطر واحد ، و"حمل التطبيق الآن" سطر نص بسهم (مش زرار). الكارت كله بيفتح المتجر */

.app-pop__card {
  position: relative;
  width: 100%;
  max-width: 340px;
  cursor: pointer;
  overflow: hidden;
  border-radius: 30px;
  background-color: #24598f;
  background-image: linear-gradient(180deg, #2f6fa6 0%, #24598f 55%, #1e4a7c 100%);
  padding: 0 0 26px;
  text-align: center;
  color: #fff;
  box-shadow: 0 30px 60px -24px rgba(6, 20, 34, 0.75);
  opacity: 0;
  transform: translateX(-118%) rotate(-4deg);
  transition: transform 0.6s cubic-bezier(0.2, 0.9, 0.25, 1.06), opacity 0.3s;
}

.app-pop.is-open .app-pop__backdrop {
  opacity: 1;
}

.app-pop.is-open .app-pop__card {
  opacity: 1;
  transform: none;
}

.app-pop__close {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 3;
  display: flex;
  height: 32px;
  width: 32px;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background-color: #fff;
  color: #1e4166;
}

/* التليفون كبير وواضح قدام دايرة بيضا — ودايرتين صغيرين (صفرا وتركواز) زي دواير اللوجو */

.app-pop__art {
  position: relative;
  display: flex;
  height: min(430px, calc(56vh / var(--z, 1)));
  align-items: center;
  justify-content: center;
  background-image:
            radial-gradient(circle at 17% 24%, #fcb424 0 26px, rgba(252, 180, 36, 0) 27px),
            radial-gradient(circle at 85% 80%, #4cbfae 0 34px, rgba(76, 191, 174, 0) 35px);
  padding: 36px 0 4px;
}

.app-pop__art::before {
  content: "";
  position: absolute;
  top: 53%;
  left: 50%;
  height: 292px;
  width: 292px;
  border-radius: 50%;
  background-color: #fff;
  transform: translate(-50%, -50%);
}

/* التليفون كامل بنسبته الطبيعية (طوله وعرضه زي ما هو — من غير ضغط ولا قص) */

.app-pop__device {
  position: relative;
  height: 100%;
  width: auto;
  max-width: 92%;
  flex-shrink: 0;
  -o-object-fit: contain;
     object-fit: contain;
  filter: drop-shadow(0 22px 24px rgba(10, 34, 64, 0.45));
}

.app-pop__body {
  position: relative;
  z-index: 2;
  padding-top: 14px;
}

.app-pop__title {
  margin: 0 24px;
  font-size: 23px;
  font-weight: 800;
  line-height: 1.45;
  color: #fff;
}

.app-pop__text {
  margin: 2px 28px 0;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.88);
}

/* "حمل التطبيق الآن": سطر نص أبيض بسهم وتحته خط أصفر رفيع (مش زرار) */

.app-pop__cta {
  margin: 14px auto 0;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border-bottom: 2px solid #fcb424;
  padding-bottom: 3px;
  font-size: 16.5px;
  font-weight: 800;
  line-height: 1.5;
  color: #fff;
}

.app-pop__cta[data-state="open"] [data-app-icon="get"] {
  display: none;
}

@media (prefers-reduced-motion: reduce) {
  .app-pop__card {
    transform: none;
    transition: opacity 0.3s;
  }
}

/* ---- حركة زراير التواصل (واتساب / Shary AI) ---- */

/* الزرار بيطلع "بوب" أول ما الصفحة تفتح */

.area-fab {
  animation: fab-pop 0.55s cubic-bezier(0.2, 1.5, 0.4, 1) 0.3s backwards;
}

.area-fab + .area-fab {
  animation-delay: 0.45s;
}

/* واتساب: موجتين بيكبروا ويختفوا حوالين الزرار + الأيقونة بترن كل شوية */

.area-fab--wa::before,
    .area-fab--wa::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: 50%;
  background-color: #4fc85b;
  animation: fab-ripple 2.6s ease-out infinite;
}

.area-fab--wa::after {
  animation-delay: 1.3s;
}

.fab-ring {
  transform-origin: 50% 60%;
  animation: fab-ring 4.5s ease-in-out 1.2s infinite;
}

/* Shary AI: توهج بيلف حوالين الزرار + اللوجو بيطفو */

.area-ai::before {
  content: "";
  position: absolute;
  inset: -5px;
  z-index: -1;
  border-radius: 50%;
  background: conic-gradient(from 0deg, #123a5c, #1f5fc4, #5aa9ee, #1f5fc4, #123a5c);
  filter: blur(7px);
  opacity: 0.6;
  animation: fab-spin 6s linear infinite;
}

.area-ai > img {
  animation: fab-float 3s ease-in-out infinite;
}

/* الفقاعة جنب Shary AI: بتطلع بوب، تقعد شوية، وتختفي — وتتكرر */

.area-fab__label--pop {
  border-radius: 14px 14px 4px 14px;
  background-image: linear-gradient(90deg, #123a5c, #1f5fc4);
  padding: 9px 14px;
  box-shadow: 0 12px 24px -12px rgba(18, 58, 92, 0.6);
  transform-origin: right center;
  animation: fab-bubble 11s ease-in-out 2.5s infinite;
}

.area-fab:hover .area-fab__label--pop,
    .area-fab:focus-visible .area-fab__label--pop {
  animation: none;
  opacity: 1;
}

/* موبايل: الشريط بيطلع من تحت + لمعة بتعدّي على زرار Shary AI + لوجو شاري بينبض */

[data-quick-bar] {
  animation: quick-up 0.5s ease-out 0.2s backwards;
}

.quick-ai {
  position: relative;
  overflow: hidden;
}

.quick-ai::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: -60%;
  width: 45%;
  background: linear-gradient(100deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0));
  transform: skewX(-18deg);
  animation: quick-sheen 3.8s ease-in-out 1s infinite;
  pointer-events: none;
}

.fab-beat {
  animation: fab-beat 2.4s ease-in-out infinite;
}

/* أيقونة الاتصال في شريط الموبايل: بترن زي التليفون، بالتبادل مع أيقونة واتساب */

.fab-call {
  transform-origin: 50% 55%;
  animation: fab-call 4.5s ease-in-out 3.4s infinite;
}

@keyframes fab-call {
  0%,
        70%,
        100% {
    transform: rotate(0);
  }

  73% {
    transform: rotate(-18deg) scale(1.16);
  }

  76% {
    transform: rotate(16deg) scale(1.16);
  }

  79% {
    transform: rotate(-16deg) scale(1.16);
  }

  82% {
    transform: rotate(14deg) scale(1.14);
  }

  85% {
    transform: rotate(-10deg) scale(1.1);
  }

  88% {
    transform: rotate(8deg) scale(1.06);
  }

  92% {
    transform: rotate(-4deg);
  }
}

@keyframes fab-pop {
  from {
    opacity: 0;
    transform: scale(0.4) translateY(14px);
  }
}

@keyframes fab-ripple {
  0% {
    opacity: 0.5;
    transform: scale(1);
  }

  80%,
        100% {
    opacity: 0;
    transform: scale(1.75);
  }
}

@keyframes fab-ring {
  0%,
        78%,
        100% {
    transform: rotate(0);
  }

  82% {
    transform: rotate(-16deg) scale(1.12);
  }

  86% {
    transform: rotate(14deg) scale(1.12);
  }

  90% {
    transform: rotate(-10deg) scale(1.08);
  }

  94% {
    transform: rotate(6deg);
  }
}

@keyframes fab-spin {
  to {
    transform: rotate(360deg);
  }
}

@keyframes fab-float {
  0%,
        100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-4px);
  }
}

@keyframes fab-beat {
  0%,
        100% {
    transform: scale(1);
  }

  50% {
    transform: scale(1.14);
  }
}

@keyframes fab-bubble {
  0%,
        52%,
        100% {
    opacity: 0;
    transform: translateY(-50%) scale(0.6);
  }

  5% {
    opacity: 1;
    transform: translateY(-50%) scale(1.06);
  }

  8%,
        46% {
    opacity: 1;
    transform: translateY(-50%) scale(1);
  }
}

@keyframes quick-up {
  from {
    opacity: 0;
    transform: translateY(100%);
  }
}

@keyframes quick-sheen {
  0%,
        55% {
    left: -60%;
  }

  85%,
        100% {
    left: 130%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .area-fab,
        .area-fab--wa::before,
        .area-fab--wa::after,
        .fab-ring,
        .area-ai::before,
        .area-ai > img,
        .area-fab__label--pop,
        [data-quick-bar],
        .quick-ai::after,
        .fab-beat,
        .fab-call {
    animation: none;
  }

  .area-fab--wa::before,
        .area-fab--wa::after {
    display: none;
  }
}

@media (min-width: 1024px) {
  .area-map__rings {
    width: 128px;
  }

  .area-plot {
    height: 150px;
  }

  .area-filter select,
        .area-filter button {
    height: 48px;
    padding-inline: 16px 36px;
    font-size: 15px;
  }

  .area-filter__chevron {
    inset-inline-end: 14px;
  }

  .area-action {
    height: 34px;
    width: 34px;
  }

  .area-text h3 {
    font-size: 18px;
  }

  .area-text p {
    font-size: 15px;
  }

  .area-dots {
    font-size: 14px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .area-map__rings,
        .area-bar {
    transition: none;
  }

  .area-blink {
    animation: none;
  }
}

/* صف الغرف / الحمامات / المساحة في كارت الوحدة (.unit-specs): في الكروت اللي 3 في الصف على الديسك توب المسافات والخط أصغر
       عشان "م²" ما تتقصش — والكارت العريض في صفحة البحث بيفضل بالمقاس الكبير */

@media (min-width: 1024px) {
  .area-card .unit-specs {
    -moz-column-gap: 8px;
         column-gap: 8px;
    font-size: 13px;
  }

  .area-card .unit-specs > li {
    gap: 4px;
  }

  .area-card .unit-specs > li + li {
    padding-inline-start: 8px;
  }

  .area-card .unit-specs svg {
    height: 18px;
    width: 18px;
  }

  .area-card .unit-specs b {
    font-size: 15px;
  }

  .search-results [data-results] .area-card .unit-specs {
    -moz-column-gap: 12px;
         column-gap: 12px;
    font-size: 14px;
  }

  .search-results [data-results] .area-card .unit-specs > li {
    gap: 6px;
  }

  .search-results [data-results] .area-card .unit-specs > li + li {
    padding-inline-start: 12px;
  }

  .search-results [data-results] .area-card .unit-specs svg {
    height: 20px;
    width: 20px;
  }

  .search-results [data-results] .area-card .unit-specs b {
    font-size: 16px;
  }
}

/* ── app.css · جزء 15 من 16: أدوات Tailwind (كلاسات المسافات / الألوان / المقاسات …) — آخر الملف عشان تغلب (المصدر: resources/css/shary/app/15-utilities.css — عدّل هنا وشغّل tools/minify-assets.sh) */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

.pointer-events-none {
  pointer-events: none;
}

.pointer-events-auto {
  pointer-events: auto;
}

.\!visible {
  visibility: visible !important;
}

.visible {
  visibility: visible;
}

.invisible {
  visibility: hidden;
}

.collapse {
  visibility: collapse;
}

.static {
  position: static;
}

.fixed {
  position: fixed;
}

.absolute {
  position: absolute;
}

.relative {
  position: relative;
}

.sticky {
  position: sticky;
}

.inset-0 {
  inset: 0px;
}

.inset-x-0 {
  left: 0px;
  right: 0px;
}

.inset-x-3 {
  left: 0.75rem;
  right: 0.75rem;
}

.inset-y-0 {
  top: 0px;
  bottom: 0px;
}

.-end-0\.5 {
  inset-inline-end: -0.125rem;
}

.-end-1 {
  inset-inline-end: -0.25rem;
}

.-end-1\.5 {
  inset-inline-end: -0.375rem;
}

.-top-0\.5 {
  top: -0.125rem;
}

.-top-1 {
  top: -0.25rem;
}

.-top-1\.5 {
  top: -0.375rem;
}

.bottom-0 {
  bottom: 0px;
}

.bottom-2 {
  bottom: 0.5rem;
}

.bottom-2\.5 {
  bottom: 0.625rem;
}

.bottom-3 {
  bottom: 0.75rem;
}

.bottom-\[150px\] {
  bottom: 150px;
}

.bottom-\[22px\] {
  bottom: 22px;
}

.bottom-\[84px\] {
  bottom: 84px;
}

.end-0 {
  inset-inline-end: 0px;
}

.end-2 {
  inset-inline-end: 0.5rem;
}

.end-2\.5 {
  inset-inline-end: 0.625rem;
}

.end-3 {
  inset-inline-end: 0.75rem;
}

.end-3\.5 {
  inset-inline-end: 0.875rem;
}

.end-4 {
  inset-inline-end: 1rem;
}

.end-5 {
  inset-inline-end: 1.25rem;
}

.left-0 {
  left: 0px;
}

.left-3 {
  left: 0.75rem;
}

.right-0 {
  right: 0px;
}

.start-2 {
  inset-inline-start: 0.5rem;
}

.start-2\.5 {
  inset-inline-start: 0.625rem;
}

.start-3 {
  inset-inline-start: 0.75rem;
}

.start-3\.5 {
  inset-inline-start: 0.875rem;
}

.start-4 {
  inset-inline-start: 1rem;
}

.top-0 {
  top: 0px;
}

.top-1\/2 {
  top: 50%;
}

.top-12 {
  top: 3rem;
}

.top-2 {
  top: 0.5rem;
}

.top-2\.5 {
  top: 0.625rem;
}

.top-3 {
  top: 0.75rem;
}

.top-3\.5 {
  top: 0.875rem;
}

.top-4 {
  top: 1rem;
}

.top-\[46px\] {
  top: 46px;
}

.top-\[58px\] {
  top: 58px;
}

.top-\[60px\] {
  top: 60px;
}

.top-\[62px\] {
  top: 62px;
}

.top-\[72px\] {
  top: 72px;
}

.top-\[calc\(100\%\+6px\)\] {
  top: calc(100% + 6px);
}

.top-full {
  top: 100%;
}

.z-10 {
  z-index: 10;
}

.z-20 {
  z-index: 20;
}

.z-30 {
  z-index: 30;
}

.z-40 {
  z-index: 40;
}

.z-50 {
  z-index: 50;
}

.z-\[-1\] {
  z-index: -1;
}

.z-\[100\] {
  z-index: 100;
}

.z-\[1\] {
  z-index: 1;
}

.z-\[2\] {
  z-index: 2;
}

.z-\[31\] {
  z-index: 31;
}

.z-\[4\] {
  z-index: 4;
}

.z-\[5\] {
  z-index: 5;
}

.z-\[60\] {
  z-index: 60;
}

.z-\[70\] {
  z-index: 70;
}

.order-first {
  order: -9999;
}

.col-span-2 {
  grid-column: span 2 / span 2;
}

.col-span-full {
  grid-column: 1 / -1;
}

.m-auto {
  margin: auto;
}

.-mx-5 {
  margin-left: -1.25rem;
  margin-right: -1.25rem;
}

.mx-0 {
  margin-left: 0px;
  margin-right: 0px;
}

.mx-auto {
  margin-left: auto;
  margin-right: auto;
}

.my-1 {
  margin-top: 0.25rem;
  margin-bottom: 0.25rem;
}

.my-\[3px\] {
  margin-top: 3px;
  margin-bottom: 3px;
}

.-ms-5 {
  margin-inline-start: -1.25rem;
}

.mb-0 {
  margin-bottom: 0px;
}

.mb-1 {
  margin-bottom: 0.25rem;
}

.mb-1\.5 {
  margin-bottom: 0.375rem;
}

.mb-2 {
  margin-bottom: 0.5rem;
}

.mb-2\.5 {
  margin-bottom: 0.625rem;
}

.mb-3 {
  margin-bottom: 0.75rem;
}

.mb-3\.5 {
  margin-bottom: 0.875rem;
}

.mb-4 {
  margin-bottom: 1rem;
}

.mb-5 {
  margin-bottom: 1.25rem;
}

.mb-8 {
  margin-bottom: 2rem;
}

.me-2 {
  margin-inline-end: 0.5rem;
}

.ms-2 {
  margin-inline-start: 0.5rem;
}

.ms-8 {
  margin-inline-start: 2rem;
}

.ms-auto {
  margin-inline-start: auto;
}

.mt-0 {
  margin-top: 0px;
}

.mt-0\.5 {
  margin-top: 0.125rem;
}

.mt-1 {
  margin-top: 0.25rem;
}

.mt-1\.5 {
  margin-top: 0.375rem;
}

.mt-10 {
  margin-top: 2.5rem;
}

.mt-12 {
  margin-top: 3rem;
}

.mt-2 {
  margin-top: 0.5rem;
}

.mt-2\.5 {
  margin-top: 0.625rem;
}

.mt-3 {
  margin-top: 0.75rem;
}

.mt-3\.5 {
  margin-top: 0.875rem;
}

.mt-4 {
  margin-top: 1rem;
}

.mt-5 {
  margin-top: 1.25rem;
}

.mt-6 {
  margin-top: 1.5rem;
}

.mt-7 {
  margin-top: 1.75rem;
}

.mt-8 {
  margin-top: 2rem;
}

.mt-\[10px\] {
  margin-top: 10px;
}

.mt-\[11px\] {
  margin-top: 11px;
}

.mt-\[122px\] {
  margin-top: 122px;
}

.mt-auto {
  margin-top: auto;
}

.line-clamp-2 {
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.line-clamp-3 {
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}

.block {
  display: block;
}

.inline-block {
  display: inline-block;
}

.inline {
  display: inline;
}

.flex {
  display: flex;
}

.inline-flex {
  display: inline-flex;
}

.table {
  display: table;
}

.\!grid {
  display: grid !important;
}

.grid {
  display: grid;
}

.contents {
  display: contents;
}

.hidden {
  display: none;
}

.aspect-\[16\/9\] {
  aspect-ratio: 16/9;
}

.aspect-\[4\/3\] {
  aspect-ratio: 4/3;
}

.aspect-square {
  aspect-ratio: 1 / 1;
}

.aspect-video {
  aspect-ratio: 16 / 9;
}

.h-1\.5 {
  height: 0.375rem;
}

.h-10 {
  height: 2.5rem;
}

.h-11 {
  height: 2.75rem;
}

.h-12 {
  height: 3rem;
}

.h-14 {
  height: 3.5rem;
}

.h-16 {
  height: 4rem;
}

.h-2 {
  height: 0.5rem;
}

.h-2\.5 {
  height: 0.625rem;
}

.h-3 {
  height: 0.75rem;
}

.h-4 {
  height: 1rem;
}

.h-40 {
  height: 10rem;
}

.h-5 {
  height: 1.25rem;
}

.h-6 {
  height: 1.5rem;
}

.h-7 {
  height: 1.75rem;
}

.h-8 {
  height: 2rem;
}

.h-9 {
  height: 2.25rem;
}

.h-\[110px\] {
  height: 110px;
}

.h-\[112px\] {
  height: 112px;
}

.h-\[150px\] {
  height: 150px;
}

.h-\[15px\] {
  height: 15px;
}

.h-\[18px\] {
  height: 18px;
}

.h-\[190px\] {
  height: 190px;
}

.h-\[196px\] {
  height: 196px;
}

.h-\[21px\] {
  height: 21px;
}

.h-\[22px\] {
  height: 22px;
}

.h-\[236px\] {
  height: 236px;
}

.h-\[25px\] {
  height: 25px;
}

.h-\[26px\] {
  height: 26px;
}

.h-\[30px\] {
  height: 30px;
}

.h-\[34px\] {
  height: 34px;
}

.h-\[38px\] {
  height: 38px;
}

.h-\[3px\] {
  height: 3px;
}

.h-\[40px\] {
  height: 40px;
}

.h-\[46\%\] {
  height: 46%;
}

.h-\[46px\] {
  height: 46px;
}

.h-\[50px\] {
  height: 50px;
}

.h-\[52\%\] {
  height: 52%;
}

.h-\[52px\] {
  height: 52px;
}

.h-\[54px\] {
  height: 54px;
}

.h-\[56px\] {
  height: 56px;
}

.h-\[62px\] {
  height: 62px;
}

.h-\[64px\] {
  height: 64px;
}

.h-\[68px\] {
  height: 68px;
}

.h-\[6px\] {
  height: 6px;
}

.h-\[72px\] {
  height: 72px;
}

.h-\[7px\] {
  height: 7px;
}

.h-\[80px\] {
  height: 80px;
}

.h-\[84px\] {
  height: 84px;
}

.h-\[88px\] {
  height: 88px;
}

.h-\[9px\] {
  height: 9px;
}

.h-dvh {
  height: calc(100dvh / var(--z, 1));
}

.h-full {
  height: 100%;
}

.max-h-0 {
  max-height: 0px;
}

.max-h-\[200px\] {
  max-height: 200px;
}

.max-h-\[236px\] {
  max-height: 236px;
}

.max-h-\[calc(82vh / var(--z, 1))\] {
  max-height: calc(82vh / var(--z, 1));
}

.max-h-\[calc(86vh / var(--z, 1))\] {
  max-height: calc(86vh / var(--z, 1));
}

.max-h-\[calc(88vh / var(--z, 1))\] {
  max-height: calc(88vh / var(--z, 1));
}

.max-h-\[calc(92vh / var(--z, 1))\] {
  max-height: calc(92vh / var(--z, 1));
}

.max-h-full {
  max-height: 100%;
}

.min-h-0 {
  min-height: 0px;
}

.min-h-\[44px\] {
  min-height: 44px;
}

.min-h-\[46px\] {
  min-height: 46px;
}

.min-h-\[60px\] {
  min-height: 60px;
}

.w-1\.5 {
  width: 0.375rem;
}

.w-10 {
  width: 2.5rem;
}

.w-11 {
  width: 2.75rem;
}

.w-12 {
  width: 3rem;
}

.w-14 {
  width: 3.5rem;
}

.w-16 {
  width: 4rem;
}

.w-2 {
  width: 0.5rem;
}

.w-3 {
  width: 0.75rem;
}

.w-4 {
  width: 1rem;
}

.w-5 {
  width: 1.25rem;
}

.w-6 {
  width: 1.5rem;
}

.w-7 {
  width: 1.75rem;
}

.w-8 {
  width: 2rem;
}

.w-9 {
  width: 2.25rem;
}

.w-\[110px\] {
  width: 110px;
}

.w-\[112px\] {
  width: 112px;
}

.w-\[140px\] {
  width: 140px;
}

.w-\[15px\] {
  width: 15px;
}

.w-\[18px\] {
  width: 18px;
}

.w-\[21px\] {
  width: 21px;
}

.w-\[22px\] {
  width: 22px;
}

.w-\[230px\] {
  width: 230px;
}

.w-\[25px\] {
  width: 25px;
}

.w-\[26px\] {
  width: 26px;
}

.w-\[280px\] {
  width: 280px;
}

.w-\[30px\] {
  width: 30px;
}

.w-\[36\%\] {
  width: 36%;
}

.w-\[38px\] {
  width: 38px;
}

.w-\[46\%\] {
  width: 46%;
}

.w-\[46px\] {
  width: 46px;
}

.w-\[52\%\] {
  width: 52%;
}

.w-\[52px\] {
  width: 52px;
}

.w-\[540px\] {
  width: 540px;
}

.w-\[60px\] {
  width: 60px;
}

.w-\[62px\] {
  width: 62px;
}

.w-\[64px\] {
  width: 64px;
}

.w-\[72\%\] {
  width: 72%;
}

.w-\[72px\] {
  width: 72px;
}

.w-\[76\%\] {
  width: 76%;
}

.w-\[82\%\] {
  width: 82%;
}

.w-\[84px\] {
  width: 84px;
}

.w-\[88px\] {
  width: 88px;
}

.w-\[92px\] {
  width: 92px;
}

.w-\[96px\] {
  width: 96px;
}

.w-auto {
  width: auto;
}

.w-fit {
  width: -moz-fit-content;
  width: fit-content;
}

.w-full {
  width: 100%;
}

.min-w-0 {
  min-width: 0px;
}

.min-w-\[178px\] {
  min-width: 178px;
}

.min-w-\[18px\] {
  min-width: 18px;
}

.min-w-\[190px\] {
  min-width: 190px;
}

.min-w-\[32px\] {
  min-width: 32px;
}

.min-w-\[40px\] {
  min-width: 40px;
}

.min-w-\[76px\] {
  min-width: 76px;
}

.max-w-\[120px\] {
  max-width: 120px;
}

.max-w-\[170px\] {
  max-width: 170px;
}

.max-w-\[340px\] {
  max-width: 340px;
}

.max-w-\[360px\] {
  max-width: 360px;
}

.max-w-\[380px\] {
  max-width: 380px;
}

.max-w-\[400px\] {
  max-width: 400px;
}

.max-w-\[420px\] {
  max-width: 420px;
}

.max-w-\[52px\] {
  max-width: 52px;
}

.max-w-\[620px\] {
  max-width: 620px;
}

.max-w-\[640px\] {
  max-width: 640px;
}

.max-w-\[680px\] {
  max-width: 680px;
}

.max-w-\[720px\] {
  max-width: 720px;
}

.max-w-\[760px\] {
  max-width: 760px;
}

.max-w-\[calc\(100\%-150px\)\] {
  max-width: calc(100% - 150px);
}

.max-w-\[calc\(100\%-16px\)\] {
  max-width: calc(100% - 16px);
}

.max-w-\[calc\(100\%-20px\)\] {
  max-width: calc(100% - 20px);
}

.max-w-full {
  max-width: 100%;
}

.max-w-sm {
  max-width: 24rem;
}

.flex-1 {
  flex: 1 1 0%;
}

.flex-\[2\] {
  flex: 2;
}

.flex-auto {
  flex: 1 1 auto;
}

.flex-shrink {
  flex-shrink: 1;
}

.shrink-0 {
  flex-shrink: 0;
}

.grow {
  flex-grow: 1;
}

.-translate-y-1\/2 {
  --tw-translate-y: -50%;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.rotate-\[135deg\] {
  --tw-rotate: 135deg;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.scale-\[1\.015\] {
  --tw-scale-x: 1.015;
  --tw-scale-y: 1.015;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.transform {
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.cursor-pointer {
  cursor: pointer;
}

.resize {
  resize: both;
}

.snap-x {
  scroll-snap-type: x var(--tw-scroll-snap-strictness);
}

.snap-mandatory {
  --tw-scroll-snap-strictness: mandatory;
}

.snap-proximity {
  --tw-scroll-snap-strictness: proximity;
}

.snap-start {
  scroll-snap-align: start;
}

.scroll-mt-24 {
  scroll-margin-top: 6rem;
}

.scroll-mt-\[150px\] {
  scroll-margin-top: 150px;
}

.scroll-mt-\[190px\] {
  scroll-margin-top: 190px;
}

.scroll-px-5 {
  scroll-padding-left: 1.25rem;
  scroll-padding-right: 1.25rem;
}

.list-none {
  list-style-type: none;
}

.break-inside-avoid {
  -moz-column-break-inside: avoid;
       break-inside: avoid;
}

.grid-cols-1 {
  grid-template-columns: repeat(1, minmax(0, 1fr));
}

.grid-cols-2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.grid-cols-3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.grid-cols-4 {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.grid-cols-\[auto_minmax\(0\2c 1fr\)\] {
  grid-template-columns: auto minmax(0,1fr);
}

.grid-cols-\[minmax\(0\2c 1\.15fr\)_32px_minmax\(0\2c 1fr\)_26px\] {
  grid-template-columns: minmax(0,1.15fr) 32px minmax(0,1fr) 26px;
}

.grid-cols-\[minmax\(0\2c 1\.15fr\)_minmax\(0\2c 1fr\)_30px\] {
  grid-template-columns: minmax(0,1.15fr) minmax(0,1fr) 30px;
}

.grid-cols-\[minmax\(0\2c 112px\)_34px_minmax\(0\2c 1fr\)_26px\] {
  grid-template-columns: minmax(0,112px) 34px minmax(0,1fr) 26px;
}

.grid-cols-\[minmax\(0\2c 118px\)_minmax\(0\2c 1fr\)_86px\] {
  grid-template-columns: minmax(0,118px) minmax(0,1fr) 86px;
}

.grid-cols-\[minmax\(0\2c 1fr\)_minmax\(0\2c 90px\)_38px\] {
  grid-template-columns: minmax(0,1fr) minmax(0,90px) 38px;
}

.grid-cols-\[minmax\(0\2c 84px\)_minmax\(0\2c 1fr\)_86px\] {
  grid-template-columns: minmax(0,84px) minmax(0,1fr) 86px;
}

.grid-cols-\[repeat\(3\2c minmax\(0\2c 1fr\)\)_52px\] {
  grid-template-columns: repeat(3,minmax(0,1fr)) 52px;
}

.grid-cols-\[repeat\(3\2c minmax\(max-content\2c 1fr\)\)_44px_44px\] {
  grid-template-columns: repeat(3,minmax(max-content,1fr)) 44px 44px;
}

.flex-row-reverse {
  flex-direction: row-reverse;
}

.flex-col {
  flex-direction: column;
}

.flex-col-reverse {
  flex-direction: column-reverse;
}

.flex-wrap {
  flex-wrap: wrap;
}

.flex-nowrap {
  flex-wrap: nowrap;
}

.items-start {
  align-items: flex-start;
}

.items-end {
  align-items: flex-end;
}

.items-center {
  align-items: center;
}

.items-baseline {
  align-items: baseline;
}

.items-stretch {
  align-items: stretch;
}

.justify-end {
  justify-content: flex-end;
}

.justify-center {
  justify-content: center;
}

.justify-between {
  justify-content: space-between;
}

.gap-0\.5 {
  gap: 0.125rem;
}

.gap-1 {
  gap: 0.25rem;
}

.gap-1\.5 {
  gap: 0.375rem;
}

.gap-10 {
  gap: 2.5rem;
}

.gap-2 {
  gap: 0.5rem;
}

.gap-2\.5 {
  gap: 0.625rem;
}

.gap-3 {
  gap: 0.75rem;
}

.gap-3\.5 {
  gap: 0.875rem;
}

.gap-4 {
  gap: 1rem;
}

.gap-5 {
  gap: 1.25rem;
}

.gap-6 {
  gap: 1.5rem;
}

.gap-7 {
  gap: 1.75rem;
}

.gap-8 {
  gap: 2rem;
}

.gap-9 {
  gap: 2.25rem;
}

.gap-\[18px\] {
  gap: 18px;
}

.gap-\[2px\] {
  gap: 2px;
}

.gap-x-1 {
  -moz-column-gap: 0.25rem;
       column-gap: 0.25rem;
}

.gap-x-1\.5 {
  -moz-column-gap: 0.375rem;
       column-gap: 0.375rem;
}

.gap-x-10 {
  -moz-column-gap: 2.5rem;
       column-gap: 2.5rem;
}

.gap-x-2 {
  -moz-column-gap: 0.5rem;
       column-gap: 0.5rem;
}

.gap-x-2\.5 {
  -moz-column-gap: 0.625rem;
       column-gap: 0.625rem;
}

.gap-x-3 {
  -moz-column-gap: 0.75rem;
       column-gap: 0.75rem;
}

.gap-x-4 {
  -moz-column-gap: 1rem;
       column-gap: 1rem;
}

.gap-x-5 {
  -moz-column-gap: 1.25rem;
       column-gap: 1.25rem;
}

.gap-y-0\.5 {
  row-gap: 0.125rem;
}

.gap-y-1 {
  row-gap: 0.25rem;
}

.gap-y-1\.5 {
  row-gap: 0.375rem;
}

.gap-y-2 {
  row-gap: 0.5rem;
}

.gap-y-3 {
  row-gap: 0.75rem;
}

.gap-y-3\.5 {
  row-gap: 0.875rem;
}

.gap-y-4 {
  row-gap: 1rem;
}

.gap-y-5 {
  row-gap: 1.25rem;
}

.gap-y-\[18px\] {
  row-gap: 18px;
}

.divide-x > :not([hidden]) ~ :not([hidden]) {
  --tw-divide-x-reverse: 0;
  border-right-width: calc(1px * var(--tw-divide-x-reverse));
  border-left-width: calc(1px * calc(1 - var(--tw-divide-x-reverse)));
}

.divide-y > :not([hidden]) ~ :not([hidden]) {
  --tw-divide-y-reverse: 0;
  border-top-width: calc(1px * calc(1 - var(--tw-divide-y-reverse)));
  border-bottom-width: calc(1px * var(--tw-divide-y-reverse));
}

.divide-shary-line > :not([hidden]) ~ :not([hidden]) {
  --tw-divide-opacity: 1;
  border-color: rgb(228 233 239 / var(--tw-divide-opacity, 1));
}

.self-start {
  align-self: flex-start;
}

.self-center {
  align-self: center;
}

.self-stretch {
  align-self: stretch;
}

.overflow-auto {
  overflow: auto;
}

.overflow-hidden {
  overflow: hidden;
}

.overflow-x-auto {
  overflow-x: auto;
}

.overflow-y-auto {
  overflow-y: auto;
}

.truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.whitespace-normal {
  white-space: normal;
}

.whitespace-nowrap {
  white-space: nowrap;
}

.break-words {
  overflow-wrap: break-word;
}

.break-all {
  word-break: break-all;
}

.rounded {
  border-radius: 0.25rem;
}

.rounded-2xl {
  border-radius: 1rem;
}

.rounded-3xl {
  border-radius: 1.5rem;
}

.rounded-\[10px\] {
  border-radius: 10px;
}

.rounded-\[12px\] {
  border-radius: 12px;
}

.rounded-\[14px\] {
  border-radius: 14px;
}

.rounded-\[16px\] {
  border-radius: 16px;
}

.rounded-\[17px\] {
  border-radius: 17px;
}

.rounded-\[18px\] {
  border-radius: 18px;
}

.rounded-\[20px\] {
  border-radius: 20px;
}

.rounded-\[24px\] {
  border-radius: 24px;
}

.rounded-\[30px\] {
  border-radius: 30px;
}

.rounded-\[3px\] {
  border-radius: 3px;
}

.rounded-\[45px\] {
  border-radius: 45px;
}

.rounded-\[47px\] {
  border-radius: 47px;
}

.rounded-\[8px\] {
  border-radius: 8px;
}

.rounded-full {
  border-radius: 9999px;
}

.rounded-lg {
  border-radius: 0.5rem;
}

.rounded-md {
  border-radius: 0.375rem;
}

.rounded-xl {
  border-radius: 0.75rem;
}

.rounded-b-2xl {
  border-bottom-right-radius: 1rem;
  border-bottom-left-radius: 1rem;
}

.rounded-t-2xl {
  border-top-left-radius: 1rem;
  border-top-right-radius: 1rem;
}

.rounded-t-\[26px\] {
  border-top-left-radius: 26px;
  border-top-right-radius: 26px;
}

.rounded-t-\[28px\] {
  border-top-left-radius: 28px;
  border-top-right-radius: 28px;
}

.rounded-t-\[35px\] {
  border-top-left-radius: 35px;
  border-top-right-radius: 35px;
}

.rounded-se-3xl {
  border-start-end-radius: 1.5rem;
}

.rounded-ss-3xl {
  border-start-start-radius: 1.5rem;
}

.border {
  border-width: 1px;
}

.border-0 {
  border-width: 0px;
}

.border-2 {
  border-width: 2px;
}

.border-\[1\.5px\] {
  border-width: 1.5px;
}

.border-\[3px\] {
  border-width: 3px;
}

.border-b {
  border-bottom-width: 1px;
}

.border-s {
  border-inline-start-width: 1px;
}

.border-s-4 {
  border-inline-start-width: 4px;
}

.border-t {
  border-top-width: 1px;
}

.border-t-0 {
  border-top-width: 0px;
}

.border-solid {
  border-style: solid;
}

.border-dashed {
  border-style: dashed;
}

.border-\[\#0B5CAD\] {
  --tw-border-opacity: 1;
  border-color: rgb(11 92 173 / var(--tw-border-opacity, 1));
}

.border-\[\#1D4265\] {
  --tw-border-opacity: 1;
  border-color: rgb(29 66 101 / var(--tw-border-opacity, 1));
}

.border-\[\#2563eb\] {
  --tw-border-opacity: 1;
  border-color: rgb(37 99 235 / var(--tw-border-opacity, 1));
}

.border-\[\#3fa9e0\] {
  --tw-border-opacity: 1;
  border-color: rgb(63 169 224 / var(--tw-border-opacity, 1));
}

.border-\[\#92929226\] {
  border-color: #92929226;
}

.border-\[\#99999933\] {
  border-color: #99999933;
}

.border-\[\#BFD9D9\] {
  --tw-border-opacity: 1;
  border-color: rgb(191 217 217 / var(--tw-border-opacity, 1));
}

.border-\[\#D9D9D9\] {
  --tw-border-opacity: 1;
  border-color: rgb(217 217 217 / var(--tw-border-opacity, 1));
}

.border-\[\#E4E4E4\] {
  --tw-border-opacity: 1;
  border-color: rgb(228 228 228 / var(--tw-border-opacity, 1));
}

.border-\[\#EEEEEE\] {
  --tw-border-opacity: 1;
  border-color: rgb(238 238 238 / var(--tw-border-opacity, 1));
}

.border-\[\#F6E2B8\] {
  --tw-border-opacity: 1;
  border-color: rgb(246 226 184 / var(--tw-border-opacity, 1));
}

.border-\[\#c5dde6\] {
  --tw-border-opacity: 1;
  border-color: rgb(197 221 230 / var(--tw-border-opacity, 1));
}

.border-\[\#cfe9e2\] {
  --tw-border-opacity: 1;
  border-color: rgb(207 233 226 / var(--tw-border-opacity, 1));
}

.border-\[\#f1dfb5\] {
  --tw-border-opacity: 1;
  border-color: rgb(241 223 181 / var(--tw-border-opacity, 1));
}

.border-shary-action {
  --tw-border-opacity: 1;
  border-color: rgb(30 65 102 / var(--tw-border-opacity, 1));
}

.border-shary-cloud {
  --tw-border-opacity: 1;
  border-color: rgb(214 226 236 / var(--tw-border-opacity, 1));
}

.border-shary-line {
  --tw-border-opacity: 1;
  border-color: rgb(228 233 239 / var(--tw-border-opacity, 1));
}

.border-shary-navy {
  --tw-border-opacity: 1;
  border-color: rgb(18 58 92 / var(--tw-border-opacity, 1));
}

.border-shary-navy\/40 {
  border-color: rgb(18 58 92 / 0.4);
}

.border-shary-yellow {
  --tw-border-opacity: 1;
  border-color: rgb(252 180 36 / var(--tw-border-opacity, 1));
}

.border-slate-100 {
  --tw-border-opacity: 1;
  border-color: rgb(241 245 249 / var(--tw-border-opacity, 1));
}

.border-white {
  --tw-border-opacity: 1;
  border-color: rgb(255 255 255 / var(--tw-border-opacity, 1));
}

.border-white\/20 {
  border-color: rgb(255 255 255 / 0.2);
}

.border-white\/30 {
  border-color: rgb(255 255 255 / 0.3);
}

.border-white\/40 {
  border-color: rgb(255 255 255 / 0.4);
}

.border-white\/50 {
  border-color: rgb(255 255 255 / 0.5);
}

.bg-\[\#00000040\] {
  background-color: #00000040;
}

.bg-\[\#08A69B\] {
  --tw-bg-opacity: 1;
  background-color: rgb(8 166 155 / var(--tw-bg-opacity, 1));
}

.bg-\[\#0B5CAD\] {
  --tw-bg-opacity: 1;
  background-color: rgb(11 92 173 / var(--tw-bg-opacity, 1));
}

.bg-\[\#123A4B\] {
  --tw-bg-opacity: 1;
  background-color: rgb(18 58 75 / var(--tw-bg-opacity, 1));
}

.bg-\[\#1D4265\] {
  --tw-bg-opacity: 1;
  background-color: rgb(29 66 101 / var(--tw-bg-opacity, 1));
}

.bg-\[\#2972FF1A\] {
  background-color: #2972FF1A;
}

.bg-\[\#378FE5\] {
  --tw-bg-opacity: 1;
  background-color: rgb(55 143 229 / var(--tw-bg-opacity, 1));
}

.bg-\[\#3FB386\] {
  --tw-bg-opacity: 1;
  background-color: rgb(63 179 134 / var(--tw-bg-opacity, 1));
}

.bg-\[\#6BAEE6\] {
  --tw-bg-opacity: 1;
  background-color: rgb(107 174 230 / var(--tw-bg-opacity, 1));
}

.bg-\[\#D9604F\] {
  --tw-bg-opacity: 1;
  background-color: rgb(217 96 79 / var(--tw-bg-opacity, 1));
}

.bg-\[\#D9D9D9\] {
  --tw-bg-opacity: 1;
  background-color: rgb(217 217 217 / var(--tw-bg-opacity, 1));
}

.bg-\[\#EAF4FC\] {
  --tw-bg-opacity: 1;
  background-color: rgb(234 244 252 / var(--tw-bg-opacity, 1));
}

.bg-\[\#F5F5F5\] {
  --tw-bg-opacity: 1;
  background-color: rgb(245 245 245 / var(--tw-bg-opacity, 1));
}

.bg-\[\#F5F9FD\] {
  --tw-bg-opacity: 1;
  background-color: rgb(245 249 253 / var(--tw-bg-opacity, 1));
}

.bg-\[\#FAFAFA\] {
  --tw-bg-opacity: 1;
  background-color: rgb(250 250 250 / var(--tw-bg-opacity, 1));
}

.bg-\[\#FFFFFF8A\] {
  background-color: #FFFFFF8A;
}

.bg-\[\#b3261e\] {
  --tw-bg-opacity: 1;
  background-color: rgb(179 38 30 / var(--tw-bg-opacity, 1));
}

.bg-\[\#b7791f\] {
  --tw-bg-opacity: 1;
  background-color: rgb(183 121 31 / var(--tw-bg-opacity, 1));
}

.bg-\[\#c9d3de\] {
  --tw-bg-opacity: 1;
  background-color: rgb(201 211 222 / var(--tw-bg-opacity, 1));
}

.bg-\[\#e4572e\] {
  --tw-bg-opacity: 1;
  background-color: rgb(228 87 46 / var(--tw-bg-opacity, 1));
}

.bg-\[\#e7f5f1\] {
  --tw-bg-opacity: 1;
  background-color: rgb(231 245 241 / var(--tw-bg-opacity, 1));
}

.bg-\[\#e8f0fb\] {
  --tw-bg-opacity: 1;
  background-color: rgb(232 240 251 / var(--tw-bg-opacity, 1));
}

.bg-\[\#f3faf8\] {
  --tw-bg-opacity: 1;
  background-color: rgb(243 250 248 / var(--tw-bg-opacity, 1));
}

.bg-\[\#f6f9fd\] {
  --tw-bg-opacity: 1;
  background-color: rgb(246 249 253 / var(--tw-bg-opacity, 1));
}

.bg-\[\#fdf3f2\] {
  --tw-bg-opacity: 1;
  background-color: rgb(253 243 242 / var(--tw-bg-opacity, 1));
}

.bg-\[\#fff8e8\] {
  --tw-bg-opacity: 1;
  background-color: rgb(255 248 232 / var(--tw-bg-opacity, 1));
}

.bg-black\/40 {
  background-color: rgb(0 0 0 / 0.4);
}

.bg-shary-action {
  --tw-bg-opacity: 1;
  background-color: rgb(30 65 102 / var(--tw-bg-opacity, 1));
}

.bg-shary-emerald {
  --tw-bg-opacity: 1;
  background-color: rgb(11 94 69 / var(--tw-bg-opacity, 1));
}

.bg-shary-form {
  --tw-bg-opacity: 1;
  background-color: rgb(232 240 251 / var(--tw-bg-opacity, 1));
}

.bg-shary-gold {
  --tw-bg-opacity: 1;
  background-color: rgb(233 162 59 / var(--tw-bg-opacity, 1));
}

.bg-shary-image {
  --tw-bg-opacity: 1;
  background-color: rgb(232 240 251 / var(--tw-bg-opacity, 1));
}

.bg-shary-line {
  --tw-bg-opacity: 1;
  background-color: rgb(228 233 239 / var(--tw-bg-opacity, 1));
}

.bg-shary-navy {
  --tw-bg-opacity: 1;
  background-color: rgb(18 58 92 / var(--tw-bg-opacity, 1));
}

.bg-shary-navy\/60 {
  background-color: rgb(18 58 92 / 0.6);
}

.bg-shary-navy\/75 {
  background-color: rgb(18 58 92 / 0.75);
}

.bg-shary-soft {
  --tw-bg-opacity: 1;
  background-color: rgb(232 240 251 / var(--tw-bg-opacity, 1));
}

.bg-shary-teal {
  --tw-bg-opacity: 1;
  background-color: rgb(31 127 114 / var(--tw-bg-opacity, 1));
}

.bg-shary-whatsapp {
  --tw-bg-opacity: 1;
  background-color: rgb(77 195 90 / var(--tw-bg-opacity, 1));
}

.bg-shary-yellow {
  --tw-bg-opacity: 1;
  background-color: rgb(252 180 36 / var(--tw-bg-opacity, 1));
}

.bg-slate-100 {
  --tw-bg-opacity: 1;
  background-color: rgb(241 245 249 / var(--tw-bg-opacity, 1));
}

.bg-transparent {
  background-color: transparent;
}

.bg-white {
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
}

.bg-white\/10 {
  background-color: rgb(255 255 255 / 0.1);
}

.bg-white\/15 {
  background-color: rgb(255 255 255 / 0.15);
}

.bg-gradient-to-l {
  background-image: linear-gradient(to left, var(--tw-gradient-stops));
}

.from-\[\#1F5FC4\] {
  --tw-gradient-from: #1F5FC4 var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(31 95 196 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.to-\[\#5AA9EE\] {
  --tw-gradient-to: #5AA9EE var(--tw-gradient-to-position);
}

.object-contain {
  -o-object-fit: contain;
     object-fit: contain;
}

.object-cover {
  -o-object-fit: cover;
     object-fit: cover;
}

.object-fill {
  -o-object-fit: fill;
     object-fit: fill;
}

.object-top {
  -o-object-position: top;
     object-position: top;
}

.p-0 {
  padding: 0px;
}

.p-1 {
  padding: 0.25rem;
}

.p-1\.5 {
  padding: 0.375rem;
}

.p-2 {
  padding: 0.5rem;
}

.p-2\.5 {
  padding: 0.625rem;
}

.p-3 {
  padding: 0.75rem;
}

.p-4 {
  padding: 1rem;
}

.p-5 {
  padding: 1.25rem;
}

.p-6 {
  padding: 1.5rem;
}

.px-0 {
  padding-left: 0px;
  padding-right: 0px;
}

.px-1 {
  padding-left: 0.25rem;
  padding-right: 0.25rem;
}

.px-1\.5 {
  padding-left: 0.375rem;
  padding-right: 0.375rem;
}

.px-2 {
  padding-left: 0.5rem;
  padding-right: 0.5rem;
}

.px-2\.5 {
  padding-left: 0.625rem;
  padding-right: 0.625rem;
}

.px-3 {
  padding-left: 0.75rem;
  padding-right: 0.75rem;
}

.px-3\.5 {
  padding-left: 0.875rem;
  padding-right: 0.875rem;
}

.px-4 {
  padding-left: 1rem;
  padding-right: 1rem;
}

.px-5 {
  padding-left: 1.25rem;
  padding-right: 1.25rem;
}

.px-6 {
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}

.px-7 {
  padding-left: 1.75rem;
  padding-right: 1.75rem;
}

.px-8 {
  padding-left: 2rem;
  padding-right: 2rem;
}

.py-0 {
  padding-top: 0px;
  padding-bottom: 0px;
}

.py-0\.5 {
  padding-top: 0.125rem;
  padding-bottom: 0.125rem;
}

.py-1 {
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
}

.py-1\.5 {
  padding-top: 0.375rem;
  padding-bottom: 0.375rem;
}

.py-10 {
  padding-top: 2.5rem;
  padding-bottom: 2.5rem;
}

.py-12 {
  padding-top: 3rem;
  padding-bottom: 3rem;
}

.py-2 {
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}

.py-2\.5 {
  padding-top: 0.625rem;
  padding-bottom: 0.625rem;
}

.py-3 {
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
}

.py-3\.5 {
  padding-top: 0.875rem;
  padding-bottom: 0.875rem;
}

.py-4 {
  padding-top: 1rem;
  padding-bottom: 1rem;
}

.py-5 {
  padding-top: 1.25rem;
  padding-bottom: 1.25rem;
}

.py-6 {
  padding-top: 1.5rem;
  padding-bottom: 1.5rem;
}

.py-8 {
  padding-top: 2rem;
  padding-bottom: 2rem;
}

.py-\[18px\] {
  padding-top: 18px;
  padding-bottom: 18px;
}

.py-\[2px\] {
  padding-top: 2px;
  padding-bottom: 2px;
}

.py-\[3px\] {
  padding-top: 3px;
  padding-bottom: 3px;
}

.py-\[5px\] {
  padding-top: 5px;
  padding-bottom: 5px;
}

.pb-1 {
  padding-bottom: 0.25rem;
}

.pb-1\.5 {
  padding-bottom: 0.375rem;
}

.pb-10 {
  padding-bottom: 2.5rem;
}

.pb-2 {
  padding-bottom: 0.5rem;
}

.pb-2\.5 {
  padding-bottom: 0.625rem;
}

.pb-3 {
  padding-bottom: 0.75rem;
}

.pb-3\.5 {
  padding-bottom: 0.875rem;
}

.pb-4 {
  padding-bottom: 1rem;
}

.pb-5 {
  padding-bottom: 1.25rem;
}

.pb-6 {
  padding-bottom: 1.5rem;
}

.pb-8 {
  padding-bottom: 2rem;
}

.pb-\[134px\] {
  padding-bottom: 134px;
}

.pb-\[70px\] {
  padding-bottom: 70px;
}

.pb-\[calc\(10px\+env\(safe-area-inset-bottom\2c 0px\)\)\] {
  padding-bottom: calc(10px + env(safe-area-inset-bottom,0px));
}

.pe-1 {
  padding-inline-end: 0.25rem;
}

.pe-1\.5 {
  padding-inline-end: 0.375rem;
}

.pe-12 {
  padding-inline-end: 3rem;
}

.pe-16 {
  padding-inline-end: 4rem;
}

.pe-3 {
  padding-inline-end: 0.75rem;
}

.pe-3\.5 {
  padding-inline-end: 0.875rem;
}

.pe-4 {
  padding-inline-end: 1rem;
}

.pe-5 {
  padding-inline-end: 1.25rem;
}

.ps-10 {
  padding-inline-start: 2.5rem;
}

.ps-11 {
  padding-inline-start: 2.75rem;
}

.ps-2 {
  padding-inline-start: 0.5rem;
}

.ps-2\.5 {
  padding-inline-start: 0.625rem;
}

.ps-3 {
  padding-inline-start: 0.75rem;
}

.ps-3\.5 {
  padding-inline-start: 0.875rem;
}

.ps-4 {
  padding-inline-start: 1rem;
}

.ps-5 {
  padding-inline-start: 1.25rem;
}

.ps-6 {
  padding-inline-start: 1.5rem;
}

.ps-7 {
  padding-inline-start: 1.75rem;
}

.pt-1 {
  padding-top: 0.25rem;
}

.pt-1\.5 {
  padding-top: 0.375rem;
}

.pt-10 {
  padding-top: 2.5rem;
}

.pt-16 {
  padding-top: 4rem;
}

.pt-2 {
  padding-top: 0.5rem;
}

.pt-3 {
  padding-top: 0.75rem;
}

.pt-3\.5 {
  padding-top: 0.875rem;
}

.pt-4 {
  padding-top: 1rem;
}

.pt-5 {
  padding-top: 1.25rem;
}

.pt-6 {
  padding-top: 1.5rem;
}

.pt-7 {
  padding-top: 1.75rem;
}

.pt-\[11px\] {
  padding-top: 11px;
}

.pt-\[22px\] {
  padding-top: 22px;
}

.text-left {
  text-align: left;
}

.text-center {
  text-align: center;
}

.text-start {
  text-align: start;
}

.text-end {
  text-align: end;
}

.font-cairo {
  font-family: Cairo, Tahoma, sans-serif;
}

.text-2xl {
  font-size: 1.5rem;
  line-height: 2rem;
}

.text-3xl {
  font-size: 1.875rem;
  line-height: 2.25rem;
}

.text-\[10\.5px\] {
  font-size: 10.5px;
}

.text-\[10px\] {
  font-size: 10px;
}

.text-\[11\.5px\] {
  font-size: 11.5px;
}

.text-\[11px\] {
  font-size: 11px;
}

.text-\[12\.5px\] {
  font-size: 12.5px;
}

.text-\[12px\] {
  font-size: 12px;
}

.text-\[13\.5px\] {
  font-size: 13.5px;
}

.text-\[13px\] {
  font-size: 13px;
}

.text-\[14\.5px\] {
  font-size: 14.5px;
}

.text-\[14px\] {
  font-size: 14px;
}

.text-\[15\.5px\] {
  font-size: 15.5px;
}

.text-\[15px\] {
  font-size: 15px;
}

.text-\[16\.5px\] {
  font-size: 16.5px;
}

.text-\[16px\] {
  font-size: 16px;
}

.text-\[17px\] {
  font-size: 17px;
}

.text-\[18px\] {
  font-size: 18px;
}

.text-\[19px\] {
  font-size: 19px;
}

.text-\[20px\] {
  font-size: 20px;
}

.text-\[21px\] {
  font-size: 21px;
}

.text-\[22px\] {
  font-size: 22px;
}

.text-\[23px\] {
  font-size: 23px;
}

.text-\[24px\] {
  font-size: 24px;
}

.text-\[25px\] {
  font-size: 25px;
}

.text-\[26px\] {
  font-size: 26px;
}

.text-\[27px\] {
  font-size: 27px;
}

.text-\[28px\] {
  font-size: 28px;
}

.text-\[30px\] {
  font-size: 30px;
}

.text-\[32px\] {
  font-size: 32px;
}

.text-\[34px\] {
  font-size: 34px;
}

.text-\[40px\] {
  font-size: 40px;
}

.text-\[56px\] {
  font-size: 56px;
}

.text-\[8px\] {
  font-size: 8px;
}

.text-\[9px\] {
  font-size: 9px;
}

.text-base {
  font-size: 1rem;
  line-height: 1.5rem;
}

.text-lg {
  font-size: 1.125rem;
  line-height: 1.75rem;
}

.text-sm {
  font-size: 0.875rem;
  line-height: 1.25rem;
}

.text-xl {
  font-size: 1.25rem;
  line-height: 1.75rem;
}

.text-xs {
  font-size: 0.75rem;
  line-height: 1rem;
}

.font-black {
  font-weight: 900;
}

.font-bold {
  font-weight: 700;
}

.font-extrabold {
  font-weight: 800;
}

.font-light {
  font-weight: 300;
}

.font-medium {
  font-weight: 500;
}

.font-normal {
  font-weight: 400;
}

.font-semibold {
  font-weight: 600;
}

.uppercase {
  text-transform: uppercase;
}

.not-italic {
  font-style: normal;
}

.leading-4 {
  line-height: 1rem;
}

.leading-5 {
  line-height: 1.25rem;
}

.leading-7 {
  line-height: 1.75rem;
}

.leading-\[1\.1\] {
  line-height: 1.1;
}

.leading-\[1\.25\] {
  line-height: 1.25;
}

.leading-\[1\.2\] {
  line-height: 1.2;
}

.leading-\[1\.35\] {
  line-height: 1.35;
}

.leading-\[1\.3\] {
  line-height: 1.3;
}

.leading-\[1\.45\] {
  line-height: 1.45;
}

.leading-\[1\.4\] {
  line-height: 1.4;
}

.leading-\[1\.55\] {
  line-height: 1.55;
}

.leading-\[1\.5\] {
  line-height: 1.5;
}

.leading-\[1\.6\] {
  line-height: 1.6;
}

.leading-\[1\.75\] {
  line-height: 1.75;
}

.leading-\[1\.7\] {
  line-height: 1.7;
}

.leading-\[1\.8\] {
  line-height: 1.8;
}

.leading-\[1\.95\] {
  line-height: 1.95;
}

.leading-\[1\.9\] {
  line-height: 1.9;
}

.leading-\[12px\] {
  line-height: 12px;
}

.leading-\[18px\] {
  line-height: 18px;
}

.leading-\[22px\] {
  line-height: 22px;
}

.leading-\[2\] {
  line-height: 2;
}

.leading-none {
  line-height: 1;
}

.leading-normal {
  line-height: 1.5;
}

.leading-tight {
  line-height: 1.25;
}

.tracking-\[0\.06em\] {
  letter-spacing: 0.06em;
}

.tracking-\[0\.08em\] {
  letter-spacing: 0.08em;
}

.tracking-wide {
  letter-spacing: 0.025em;
}

.text-\[\#063454\] {
  --tw-text-opacity: 1;
  color: rgb(6 52 84 / var(--tw-text-opacity, 1));
}

.text-\[\#0B3D91\] {
  --tw-text-opacity: 1;
  color: rgb(11 61 145 / var(--tw-text-opacity, 1));
}

.text-\[\#0B5CAD\] {
  --tw-text-opacity: 1;
  color: rgb(11 92 173 / var(--tw-text-opacity, 1));
}

.text-\[\#121212\] {
  --tw-text-opacity: 1;
  color: rgb(18 18 18 / var(--tw-text-opacity, 1));
}

.text-\[\#1563DF\] {
  --tw-text-opacity: 1;
  color: rgb(21 99 223 / var(--tw-text-opacity, 1));
}

.text-\[\#15803d\] {
  --tw-text-opacity: 1;
  color: rgb(21 128 61 / var(--tw-text-opacity, 1));
}

.text-\[\#161E2D\] {
  --tw-text-opacity: 1;
  color: rgb(22 30 45 / var(--tw-text-opacity, 1));
}

.text-\[\#1A2028\] {
  --tw-text-opacity: 1;
  color: rgb(26 32 40 / var(--tw-text-opacity, 1));
}

.text-\[\#1D1D1D\] {
  --tw-text-opacity: 1;
  color: rgb(29 29 29 / var(--tw-text-opacity, 1));
}

.text-\[\#1D4265\] {
  --tw-text-opacity: 1;
  color: rgb(29 66 101 / var(--tw-text-opacity, 1));
}

.text-\[\#1E4164\] {
  --tw-text-opacity: 1;
  color: rgb(30 65 100 / var(--tw-text-opacity, 1));
}

.text-\[\#1f8a7c\] {
  --tw-text-opacity: 1;
  color: rgb(31 138 124 / var(--tw-text-opacity, 1));
}

.text-\[\#2563eb\] {
  --tw-text-opacity: 1;
  color: rgb(37 99 235 / var(--tw-text-opacity, 1));
}

.text-\[\#285A7C\] {
  --tw-text-opacity: 1;
  color: rgb(40 90 124 / var(--tw-text-opacity, 1));
}

.text-\[\#2C6386\] {
  --tw-text-opacity: 1;
  color: rgb(44 99 134 / var(--tw-text-opacity, 1));
}

.text-\[\#333A40\] {
  --tw-text-opacity: 1;
  color: rgb(51 58 64 / var(--tw-text-opacity, 1));
}

.text-\[\#3F474D\] {
  --tw-text-opacity: 1;
  color: rgb(63 71 77 / var(--tw-text-opacity, 1));
}

.text-\[\#4A5560\] {
  --tw-text-opacity: 1;
  color: rgb(74 85 96 / var(--tw-text-opacity, 1));
}

.text-\[\#4bbfb0\] {
  --tw-text-opacity: 1;
  color: rgb(75 191 176 / var(--tw-text-opacity, 1));
}

.text-\[\#7A5A12\] {
  --tw-text-opacity: 1;
  color: rgb(122 90 18 / var(--tw-text-opacity, 1));
}

.text-\[\#8a99a8\] {
  --tw-text-opacity: 1;
  color: rgb(138 153 168 / var(--tw-text-opacity, 1));
}

.text-\[\#9fb0c3\] {
  --tw-text-opacity: 1;
  color: rgb(159 176 195 / var(--tw-text-opacity, 1));
}

.text-\[\#b3261e\] {
  --tw-text-opacity: 1;
  color: rgb(179 38 30 / var(--tw-text-opacity, 1));
}

.text-\[\#b7791f\] {
  --tw-text-opacity: 1;
  color: rgb(183 121 31 / var(--tw-text-opacity, 1));
}

.text-\[\#b9c7d6\] {
  --tw-text-opacity: 1;
  color: rgb(185 199 214 / var(--tw-text-opacity, 1));
}

.text-\[\#c8921f\] {
  --tw-text-opacity: 1;
  color: rgb(200 146 31 / var(--tw-text-opacity, 1));
}

.text-\[\#d9a021\] {
  --tw-text-opacity: 1;
  color: rgb(217 160 33 / var(--tw-text-opacity, 1));
}

.text-\[\#f5a623\] {
  --tw-text-opacity: 1;
  color: rgb(245 166 35 / var(--tw-text-opacity, 1));
}

.text-red-600 {
  --tw-text-opacity: 1;
  color: rgb(220 38 38 / var(--tw-text-opacity, 1));
}

.text-shary-action {
  --tw-text-opacity: 1;
  color: rgb(30 65 102 / var(--tw-text-opacity, 1));
}

.text-shary-cloud {
  --tw-text-opacity: 1;
  color: rgb(214 226 236 / var(--tw-text-opacity, 1));
}

.text-shary-gold {
  --tw-text-opacity: 1;
  color: rgb(233 162 59 / var(--tw-text-opacity, 1));
}

.text-shary-hint {
  --tw-text-opacity: 1;
  color: rgb(138 153 168 / var(--tw-text-opacity, 1));
}

.text-shary-link {
  --tw-text-opacity: 1;
  color: rgb(31 99 198 / var(--tw-text-opacity, 1));
}

.text-shary-mist {
  --tw-text-opacity: 1;
  color: rgb(185 201 216 / var(--tw-text-opacity, 1));
}

.text-shary-muted {
  --tw-text-opacity: 1;
  color: rgb(91 107 124 / var(--tw-text-opacity, 1));
}

.text-shary-navy {
  --tw-text-opacity: 1;
  color: rgb(18 58 92 / var(--tw-text-opacity, 1));
}

.text-shary-navy\/75 {
  color: rgb(18 58 92 / 0.75);
}

.text-shary-teal {
  --tw-text-opacity: 1;
  color: rgb(31 127 114 / var(--tw-text-opacity, 1));
}

.text-shary-yellow {
  --tw-text-opacity: 1;
  color: rgb(252 180 36 / var(--tw-text-opacity, 1));
}

.text-slate-700 {
  --tw-text-opacity: 1;
  color: rgb(51 65 85 / var(--tw-text-opacity, 1));
}

.text-white {
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}

.text-white\/80 {
  color: rgb(255 255 255 / 0.8);
}

.text-white\/85 {
  color: rgb(255 255 255 / 0.85);
}

.text-white\/90 {
  color: rgb(255 255 255 / 0.9);
}

.underline {
  text-decoration-line: underline;
}

.decoration-1 {
  text-decoration-thickness: 1px;
}

.underline-offset-4 {
  text-underline-offset: 4px;
}

.antialiased {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.placeholder-\[\#667085\]::-moz-placeholder {
  --tw-placeholder-opacity: 1;
  color: rgb(102 112 133 / var(--tw-placeholder-opacity, 1));
}

.placeholder-\[\#667085\]::placeholder {
  --tw-placeholder-opacity: 1;
  color: rgb(102 112 133 / var(--tw-placeholder-opacity, 1));
}

.placeholder-white::-moz-placeholder {
  --tw-placeholder-opacity: 1;
  color: rgb(255 255 255 / var(--tw-placeholder-opacity, 1));
}

.placeholder-white::placeholder {
  --tw-placeholder-opacity: 1;
  color: rgb(255 255 255 / var(--tw-placeholder-opacity, 1));
}

.accent-shary-link {
  accent-color: #1F63C6;
}

.opacity-0 {
  opacity: 0;
}

.opacity-100 {
  opacity: 1;
}

.opacity-70 {
  opacity: 0.7;
}

.shadow {
  --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.shadow-2xl {
  --tw-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25);
  --tw-shadow-colored: 0 25px 50px -12px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.shadow-\[0_-8px_22px_-16px_rgba\(18\2c 58\2c 92\2c 0\.4\)\] {
  --tw-shadow: 0 -8px 22px -16px rgba(18,58,92,0.4);
  --tw-shadow-colored: 0 -8px 22px -16px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.shadow-\[0_-8px_24px_-14px_rgba\(18\2c 58\2c 92\2c 0\.35\)\] {
  --tw-shadow: 0 -8px 24px -14px rgba(18,58,92,0.35);
  --tw-shadow-colored: 0 -8px 24px -14px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.shadow-\[0_10px_24px_rgba\(18\2c 58\2c 92\2c 0\.14\)\] {
  --tw-shadow: 0 10px 24px rgba(18,58,92,0.14);
  --tw-shadow-colored: 0 10px 24px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.shadow-\[0_10px_26px_-12px_rgba\(18\2c 58\2c 92\2c 0\.5\)\] {
  --tw-shadow: 0 10px 26px -12px rgba(18,58,92,0.5);
  --tw-shadow-colored: 0 10px 26px -12px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.shadow-\[0_14px_34px_-14px_rgba\(18\2c 58\2c 92\2c 0\.45\)\] {
  --tw-shadow: 0 14px 34px -14px rgba(18,58,92,0.45);
  --tw-shadow-colored: 0 14px 34px -14px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.shadow-\[0_1px_4px_rgba\(18\2c 58\2c 92\2c 0\.3\)\] {
  --tw-shadow: 0 1px 4px rgba(18,58,92,0.3);
  --tw-shadow-colored: 0 1px 4px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.shadow-\[0_24px_48px_-28px_rgba\(18\2c 58\2c 92\2c 0\.55\)\] {
  --tw-shadow: 0 24px 48px -28px rgba(18,58,92,0.55);
  --tw-shadow-colored: 0 24px 48px -28px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.shadow-\[0_2px_6px_rgba\(18\2c 58\2c 92\2c 0\.16\)\] {
  --tw-shadow: 0 2px 6px rgba(18,58,92,0.16);
  --tw-shadow-colored: 0 2px 6px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.shadow-\[0_2px_8px_rgba\(18\2c 58\2c 92\2c 0\.3\)\] {
  --tw-shadow: 0 2px 8px rgba(18,58,92,0.3);
  --tw-shadow-colored: 0 2px 8px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.shadow-\[0_4px_4px_0_rgba\(0\2c 0\2c 0\2c 0\.2\)\] {
  --tw-shadow: 0 4px 4px 0 rgba(0,0,0,0.2);
  --tw-shadow-colored: 0 4px 4px 0 var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.shadow-\[0_6px_14px_-10px_rgba\(18\2c 58\2c 92\2c 0\.5\)\] {
  --tw-shadow: 0 6px 14px -10px rgba(18,58,92,0.5);
  --tw-shadow-colored: 0 6px 14px -10px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.shadow-\[0_6px_18px_rgba\(18\2c 58\2c 92\2c 0\.10\)\] {
  --tw-shadow: 0 6px 18px rgba(18,58,92,0.10);
  --tw-shadow-colored: 0 6px 18px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.shadow-\[0_8px_22px_-12px_rgba\(18\2c 58\2c 92\2c 0\.45\)\] {
  --tw-shadow: 0 8px 22px -12px rgba(18,58,92,0.45);
  --tw-shadow-colored: 0 8px 22px -12px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.shadow-\[0px_-2px_4px_0px_\#00000040\] {
  --tw-shadow: 0px -2px 4px 0px #00000040;
  --tw-shadow-colored: 0px -2px 4px 0px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.shadow-\[0px_4px_4px_0px_\#00000040\] {
  --tw-shadow: 0px 4px 4px 0px #00000040;
  --tw-shadow-colored: 0px 4px 4px 0px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.shadow-\[6px_6px_76\.1px_0px_\#00000040\] {
  --tw-shadow: 6px 6px 76.1px 0px #00000040;
  --tw-shadow-colored: 6px 6px 76.1px 0px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.shadow-lg {
  --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.shadow-md {
  --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.outline-none {
  outline: 2px solid transparent;
  outline-offset: 2px;
}

.\!ring {
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color) !important;
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color) !important;
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000) !important;
}

.ring {
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}

.ring-1 {
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}

.ring-white\/40 {
  --tw-ring-color: rgb(255 255 255 / 0.4);
}

.blur {
  --tw-blur: blur(8px);
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}

.\!filter {
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow) !important;
}

.filter {
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}

.backdrop-blur-sm {
  --tw-backdrop-blur: blur(4px);
  -webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
  backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
}

.backdrop-filter {
  -webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
  backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
}

.transition {
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-backdrop-filter;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

.transition-\[filter\] {
  transition-property: filter;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

.transition-colors {
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

.transition-opacity {
  transition-property: opacity;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

.transition-shadow {
  transition-property: box-shadow;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

.transition-transform {
  transition-property: transform;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

.duration-200 {
  transition-duration: 200ms;
}

.duration-300 {
  transition-duration: 300ms;
}

.ease-in-out {
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

/* ============================== صفحة المنطقة ============================== */

/* ---- كتابة المحتوى من لوحة التحكم (زراير المحرر): «نقط بسهم» ul.shary-arrows ، «مسافة» p.shary-space ، «خط فاصل» hr ---- */

.article-content ul.shary-arrows li {
  padding-inline-start: 24px;
}

.article-content ul.shary-arrows li::before {
  content: "\2190";
}

[dir="ltr"] .article-content ul.shary-arrows li::before {
  content: "\2192";
}

.article-content p.shary-space {
  height: 14px;
  margin: 0;
  font-size: 0;
  line-height: 0;
}

.article-content hr {
  width: 100%;
  margin: 4px 0;
  border: 0;
  border-top: 1px solid #dbe4ee;
}

[data-meeting-modal] > .after\:absolute.inset-0::after,
    [data-offer-modal] > .after\:absolute.inset-0::after,
    [data-index-advanced] > .after\:absolute.inset-0::after,
    [data-index-picker] > .after\:absolute.inset-0::after,
    [data-filter-sheet] > .after\:absolute.inset-0::after {
  content: var(--tw-content);
  background-color: transparent !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

[data-meeting-modal] > .after\:absolute.inset-0 + *::after,
    [data-offer-modal] > .after\:absolute.inset-0 + *::after,
    [data-index-advanced] > .after\:absolute.inset-0 + *::after,
    [data-index-picker] > .after\:absolute.inset-0 + *::after,
    [data-filter-sheet] > .after\:absolute.inset-0 + *::after {
  content: var(--tw-content);
  box-shadow: 0 0 0 1px rgba(18, 58, 92, 0.1), 0 -6px 44px -10px rgba(18, 58, 92, 0.38);
}

@media not all and (min-width: 1024px) {
  .max-lg\:hidden {
    display: none;
  }

  .max-lg\:hidden.saved-empty {
    display: none;
  }

  .max-lg\:hidden {
    display: none;
  }

  .max-lg\:hidden.saved-empty {
    display: none;
  }

  .max-lg\:hidden.offer-filter__adv-count {
    display: none;
  }

  .max-lg\:hidden {
    display: none;
  }

  .max-lg\:hidden.saved-empty {
    display: none;
  }

  .max-lg\:hidden.offer-filter__adv-count {
    display: none;
  }

  .max-lg\:hidden.opps-adv {
    display: none;
  }

  .max-lg\:hidden {
    display: none;
  }

  .max-lg\:hidden.saved-empty {
    display: none;
  }

  .max-lg\:hidden.offer-filter__adv-count {
    display: none;
  }

  .max-lg\:hidden.opps-adv {
    display: none;
  }

  .max-lg\:hidden.compare-table {
    display: none;
  }

  .max-lg\:hidden {
    display: none;
  }

  .max-lg\:hidden.saved-empty {
    display: none;
  }

  .max-lg\:hidden.offer-filter__adv-count {
    display: none;
  }

  .max-lg\:hidden.opps-adv {
    display: none;
  }

  .max-lg\:hidden.compare-table {
    display: none;
  }

  .max-lg\:hidden.sai {
    display: none;
  }

  .max-lg\:hidden {
    display: none;
  }

  .max-lg\:hidden.saved-empty {
    display: none;
  }

  .max-lg\:hidden.offer-filter__adv-count {
    display: none;
  }

  .max-lg\:hidden.opps-adv {
    display: none;
  }

  .max-lg\:hidden.compare-table {
    display: none;
  }

  .max-lg\:hidden.sai {
    display: none;
  }

  .max-lg\:hidden.sai__chips {
    display: none;
  }

  .max-lg\:hidden {
    display: none;
  }

  .max-lg\:hidden.saved-empty {
    display: none;
  }

  .max-lg\:hidden.offer-filter__adv-count {
    display: none;
  }

  .max-lg\:hidden.opps-adv {
    display: none;
  }

  .max-lg\:hidden.compare-table {
    display: none;
  }

  .max-lg\:hidden.sai {
    display: none;
  }

  .max-lg\:hidden.sai__chips {
    display: none;
  }

  .max-lg\:hidden.sai__mic {
    display: none;
  }

  .max-lg\:hidden {
    display: none;
  }

  .max-lg\:hidden.saved-empty {
    display: none;
  }

  .max-lg\:hidden.offer-filter__adv-count {
    display: none;
  }

  .max-lg\:hidden.opps-adv {
    display: none;
  }

  .max-lg\:hidden.compare-table {
    display: none;
  }

  .max-lg\:hidden.sai {
    display: none;
  }

  .max-lg\:hidden.sai__chips {
    display: none;
  }

  .max-lg\:hidden.sai__mic {
    display: none;
  }

  .max-lg\:hidden.sai__crit {
    display: none;
  }

  .max-lg\:hidden {
    display: none;
  }

  .max-lg\:hidden.saved-empty {
    display: none;
  }

  .max-lg\:hidden.offer-filter__adv-count {
    display: none;
  }

  .max-lg\:hidden.opps-adv {
    display: none;
  }

  .max-lg\:hidden.compare-table {
    display: none;
  }

  .max-lg\:hidden.sai {
    display: none;
  }

  .max-lg\:hidden.sai__chips {
    display: none;
  }

  .max-lg\:hidden.sai__mic {
    display: none;
  }

  .max-lg\:hidden.sai__crit {
    display: none;
  }

  .max-lg\:hidden.sai__ctx {
    display: none;
  }

  .max-lg\:hidden {
    display: none;
  }

  .max-lg\:hidden.saved-empty {
    display: none;
  }

  .max-lg\:hidden.offer-filter__adv-count {
    display: none;
  }

  .max-lg\:hidden.opps-adv {
    display: none;
  }

  .max-lg\:hidden.compare-table {
    display: none;
  }

  .max-lg\:hidden.sai {
    display: none;
  }

  .max-lg\:hidden.sai__chips {
    display: none;
  }

  .max-lg\:hidden.sai__mic {
    display: none;
  }

  .max-lg\:hidden.sai__crit {
    display: none;
  }

  .max-lg\:hidden.sai__ctx {
    display: none;
  }

  @media (min-width: 1024px) {
    /* [class~="hidden"] بدل .hidden: عشان Tailwind ما يعملش من القاعدة نسخ lg:hidden / md:hidden بتتحقق دايمًا وتغمّق الصفحة */

    .home-filter .max-lg\:hidden.search-side {
      display: none !important;
    }
  }

  .max-lg\:hidden {
    display: none;
  }

  .max-lg\:hidden.saved-empty {
    display: none;
  }

  .max-lg\:hidden.offer-filter__adv-count {
    display: none;
  }

  .max-lg\:hidden.opps-adv {
    display: none;
  }

  .max-lg\:hidden.compare-table {
    display: none;
  }

  .max-lg\:hidden.sai {
    display: none;
  }

  .max-lg\:hidden.sai__chips {
    display: none;
  }

  .max-lg\:hidden.sai__mic {
    display: none;
  }

  .max-lg\:hidden.sai__crit {
    display: none;
  }

  .max-lg\:hidden.sai__ctx {
    display: none;
  }

  @media (min-width: 1024px) {
    /* [class~="hidden"] بدل .hidden: عشان Tailwind ما يعملش من القاعدة نسخ lg:hidden / md:hidden بتتحقق دايمًا وتغمّق الصفحة */

    .home-filter .max-lg\:hidden.search-side {
      display: none !important;
    }
  }

  .max-lg\:hidden.privacy-note {
    display: none;
  }
}

@media not all and (min-width: 768px) {
  .max-md\:hidden {
    display: none;
  }

  .max-md\:hidden.saved-empty {
    display: none;
  }

  .max-md\:hidden {
    display: none;
  }

  .max-md\:hidden.saved-empty {
    display: none;
  }

  .max-md\:hidden.offer-filter__adv-count {
    display: none;
  }

  .max-md\:hidden {
    display: none;
  }

  .max-md\:hidden.saved-empty {
    display: none;
  }

  .max-md\:hidden.offer-filter__adv-count {
    display: none;
  }

  .max-md\:hidden.opps-adv {
    display: none;
  }

  .max-md\:hidden {
    display: none;
  }

  .max-md\:hidden.saved-empty {
    display: none;
  }

  .max-md\:hidden.offer-filter__adv-count {
    display: none;
  }

  .max-md\:hidden.opps-adv {
    display: none;
  }

  .max-md\:hidden.compare-table {
    display: none;
  }

  .max-md\:hidden {
    display: none;
  }

  .max-md\:hidden.saved-empty {
    display: none;
  }

  .max-md\:hidden.offer-filter__adv-count {
    display: none;
  }

  .max-md\:hidden.opps-adv {
    display: none;
  }

  .max-md\:hidden.compare-table {
    display: none;
  }

  .max-md\:hidden.sai {
    display: none;
  }

  .max-md\:hidden {
    display: none;
  }

  .max-md\:hidden.saved-empty {
    display: none;
  }

  .max-md\:hidden.offer-filter__adv-count {
    display: none;
  }

  .max-md\:hidden.opps-adv {
    display: none;
  }

  .max-md\:hidden.compare-table {
    display: none;
  }

  .max-md\:hidden.sai {
    display: none;
  }

  .max-md\:hidden.sai__chips {
    display: none;
  }

  .max-md\:hidden {
    display: none;
  }

  .max-md\:hidden.saved-empty {
    display: none;
  }

  .max-md\:hidden.offer-filter__adv-count {
    display: none;
  }

  .max-md\:hidden.opps-adv {
    display: none;
  }

  .max-md\:hidden.compare-table {
    display: none;
  }

  .max-md\:hidden.sai {
    display: none;
  }

  .max-md\:hidden.sai__chips {
    display: none;
  }

  .max-md\:hidden.sai__mic {
    display: none;
  }

  .max-md\:hidden {
    display: none;
  }

  .max-md\:hidden.saved-empty {
    display: none;
  }

  .max-md\:hidden.offer-filter__adv-count {
    display: none;
  }

  .max-md\:hidden.opps-adv {
    display: none;
  }

  .max-md\:hidden.compare-table {
    display: none;
  }

  .max-md\:hidden.sai {
    display: none;
  }

  .max-md\:hidden.sai__chips {
    display: none;
  }

  .max-md\:hidden.sai__mic {
    display: none;
  }

  .max-md\:hidden.sai__crit {
    display: none;
  }

  .max-md\:hidden {
    display: none;
  }

  .max-md\:hidden.saved-empty {
    display: none;
  }

  .max-md\:hidden.offer-filter__adv-count {
    display: none;
  }

  .max-md\:hidden.opps-adv {
    display: none;
  }

  .max-md\:hidden.compare-table {
    display: none;
  }

  .max-md\:hidden.sai {
    display: none;
  }

  .max-md\:hidden.sai__chips {
    display: none;
  }

  .max-md\:hidden.sai__mic {
    display: none;
  }

  .max-md\:hidden.sai__crit {
    display: none;
  }

  .max-md\:hidden.sai__ctx {
    display: none;
  }

  .max-md\:hidden {
    display: none;
  }

  .max-md\:hidden.saved-empty {
    display: none;
  }

  .max-md\:hidden.offer-filter__adv-count {
    display: none;
  }

  .max-md\:hidden.opps-adv {
    display: none;
  }

  .max-md\:hidden.compare-table {
    display: none;
  }

  .max-md\:hidden.sai {
    display: none;
  }

  .max-md\:hidden.sai__chips {
    display: none;
  }

  .max-md\:hidden.sai__mic {
    display: none;
  }

  .max-md\:hidden.sai__crit {
    display: none;
  }

  .max-md\:hidden.sai__ctx {
    display: none;
  }

  @media (min-width: 1024px) {
    /* [class~="hidden"] بدل .hidden: عشان Tailwind ما يعملش من القاعدة نسخ lg:hidden / md:hidden بتتحقق دايمًا وتغمّق الصفحة */

    .home-filter .max-md\:hidden.search-side {
      display: none !important;
    }
  }

  .max-md\:hidden {
    display: none;
  }

  .max-md\:hidden.saved-empty {
    display: none;
  }

  .max-md\:hidden.offer-filter__adv-count {
    display: none;
  }

  .max-md\:hidden.opps-adv {
    display: none;
  }

  .max-md\:hidden.compare-table {
    display: none;
  }

  .max-md\:hidden.sai {
    display: none;
  }

  .max-md\:hidden.sai__chips {
    display: none;
  }

  .max-md\:hidden.sai__mic {
    display: none;
  }

  .max-md\:hidden.sai__crit {
    display: none;
  }

  .max-md\:hidden.sai__ctx {
    display: none;
  }

  @media (min-width: 1024px) {
    /* [class~="hidden"] بدل .hidden: عشان Tailwind ما يعملش من القاعدة نسخ lg:hidden / md:hidden بتتحقق دايمًا وتغمّق الصفحة */

    .home-filter .max-md\:hidden.search-side {
      display: none !important;
    }
  }

  .max-md\:hidden.privacy-note {
    display: none;
  }
}

@media (min-width: 768px) {
  .md\:hidden.saved-empty {
    display: none;
  }

  .md\:hidden.offer-filter__adv-count {
    display: none;
  }

  .md\:hidden.opps-adv {
    display: none;
  }

  .md\:hidden.compare-table {
    display: none;
  }

  .md\:hidden.sai {
    display: none;
  }

  .md\:hidden.sai__chips {
    display: none;
  }

  .md\:hidden.sai__mic {
    display: none;
  }

  .md\:hidden.sai__crit {
    display: none;
  }

  .md\:hidden.sai__ctx {
    display: none;
  }

  @media (min-width: 1024px) {
    /* [class~="hidden"] بدل .hidden: عشان Tailwind ما يعملش من القاعدة نسخ lg:hidden / md:hidden بتتحقق دايمًا وتغمّق الصفحة */

    .home-filter .md\:hidden.search-side {
      display: none !important;
    }
  }

  .md\:hidden.privacy-note {
    display: none;
  }
}

@media (min-width: 1024px) {
  .lg\:hidden.saved-empty {
    display: none;
  }

  .lg\:hidden.offer-filter__adv-count {
    display: none;
  }

  .lg\:hidden.opps-adv {
    display: none;
  }

  .lg\:hidden.compare-table {
    display: none;
  }

  @media (min-width: 1024px) {
    /* تحت عمود الفلاتر والنتايج: المقال والأسئلة ولينكات البحث بعرض الصفحة كلها (بتبدأ من ناحية الفلتر) */

    /* فوق بعرض الصفحة: البحث + الترتيب + الخريطة + التحويل، وتحتهم العنوان — وبعدين عمود الفلاتر والنتايج */

    /* عمود الفلاتر: بسيط — عنوان القسم وجنبه "مسح"، قوايم بمربعات اختيار، وخط فاصل بين الأقسام. ماشي مع الصفحة (مش ثابت) */

    /* رأس العمود: العنوان + "مسح الكل" + زرار الإخفاء */

    /* العمود مخفي: النتايج بعرض الصفحة كله ، وزرار "الفلتر" بيظهر فوق جنب الترتيب */

    /* ترتيب الأقسام في العمود */

    /* القسم: من غير كارت وأيقونة — خط فاصل بس */

    /* نوع البيع */

    /* مربعات الاختيار العادية في الفلتر (المنطقة / المطور / المشروع / المرافق) بنفس شكل مربعات نوع العقار والتشطيب */

    /* نوع العقار / التشطيب / التسليم: قايمة تحت بعض بمربعات اختيار (نفس الحقول، الشكل بس) */

    .search-side [data-key="type"] .lg\:flex-wrap,
        .search-side [data-key="finishing"] .lg\:flex-wrap,
        .search-side [data-key="delivery"] .lg\:flex-wrap {
      display: block;
    }

    /* الغرف / الحمامات / سنوات التقسيط: دواير صغيرة */

    .search-side .area-fsec .lg\:flex-wrap {
      gap: 8px;
    }

    /* المرافق */

    /* المنطقة / المطور جوه العمود: أول 3 اختيارات، والباقي من "عرض المزيد" */

    /* عنوان القسم زرار بيفتح نافذة الاختيار */

    /* "مسح كل الفلاتر": ثابت في آخر العمود */

    /* "مسح الكل" العايم تحت اتشال — بقى في رأس العمود */

    /* كارت النتيجة بالعرض: الصورة على جنب والتفاصيل جنبها (كارت الوحدة وكارت المشروع) */

    /* الكارت العريض: مستطيل واطي — الصورة على جنب، وجنبها البيانات، وآخر سطر السعر وجنبه زراير التواصل */

    /* السعرين في كارت الكمبوند العريض: في سطر واحد من غير ما العملة تنزل تحت */

    /* تحت عمود الفلاتر والنتايج: المقال والأسئلة ولينكات البحث بعرض الصفحة كلها (بتبدأ من ناحية الفلتر) */

    /* فوق بعرض الصفحة: البحث + الترتيب + الخريطة + التحويل، وتحتهم العنوان — وبعدين عمود الفلاتر والنتايج */

    /* عمود الفلاتر: بسيط — عنوان القسم وجنبه "مسح"، قوايم بمربعات اختيار، وخط فاصل بين الأقسام. ماشي مع الصفحة (مش ثابت) */

    /* رأس العمود: العنوان + "مسح الكل" + زرار الإخفاء */

    /* العمود مخفي: النتايج بعرض الصفحة كله ، وزرار "الفلتر" بيظهر فوق جنب الترتيب */

    /* ترتيب الأقسام في العمود */

    /* القسم: من غير كارت وأيقونة — خط فاصل بس */

    /* نوع البيع */

    /* مربعات الاختيار العادية في الفلتر (المنطقة / المطور / المشروع / المرافق) بنفس شكل مربعات نوع العقار والتشطيب */

    /* نوع العقار / التشطيب / التسليم: قايمة تحت بعض بمربعات اختيار (نفس الحقول، الشكل بس) */

    .search-side [data-key="type"] .lg\:flex-wrap,
        .search-side [data-key="finishing"] .lg\:flex-wrap,
        .search-side [data-key="delivery"] .lg\:flex-wrap {
      display: block;
    }

    /* الغرف / الحمامات / سنوات التقسيط: دواير صغيرة */

    .search-side .area-fsec .lg\:flex-wrap {
      gap: 8px;
    }

    /* المرافق */

    /* المنطقة / المطور جوه العمود: أول 3 اختيارات، والباقي من "عرض المزيد" */

    /* عنوان القسم زرار بيفتح نافذة الاختيار */

    /* "مسح كل الفلاتر": ثابت في آخر العمود */

    /* "مسح الكل" العايم تحت اتشال — بقى في رأس العمود */

    /* كارت النتيجة بالعرض: الصورة على جنب والتفاصيل جنبها (كارت الوحدة وكارت المشروع) */

    /* الكارت العريض: مستطيل واطي — الصورة على جنب، وجنبها البيانات، وآخر سطر السعر وجنبه زراير التواصل */

    /* السعرين في كارت الكمبوند العريض: في سطر واحد من غير ما العملة تنزل تحت */

    /* تحت عمود الفلاتر والنتايج: المقال والأسئلة ولينكات البحث بعرض الصفحة كلها (بتبدأ من ناحية الفلتر) */

    /* فوق بعرض الصفحة: البحث + الترتيب + الخريطة + التحويل، وتحتهم العنوان — وبعدين عمود الفلاتر والنتايج */

    /* عمود الفلاتر: بسيط — عنوان القسم وجنبه "مسح"، قوايم بمربعات اختيار، وخط فاصل بين الأقسام. ماشي مع الصفحة (مش ثابت) */

    /* رأس العمود: العنوان + "مسح الكل" + زرار الإخفاء */

    /* العمود مخفي: النتايج بعرض الصفحة كله ، وزرار "الفلتر" بيظهر فوق جنب الترتيب */

    /* ترتيب الأقسام في العمود */

    /* القسم: من غير كارت وأيقونة — خط فاصل بس */

    /* نوع البيع */

    /* مربعات الاختيار العادية في الفلتر (المنطقة / المطور / المشروع / المرافق) بنفس شكل مربعات نوع العقار والتشطيب */

    /* نوع العقار / التشطيب / التسليم: قايمة تحت بعض بمربعات اختيار (نفس الحقول، الشكل بس) */

    .search-side [data-key="type"] .lg\:flex-wrap,
        .search-side [data-key="finishing"] .lg\:flex-wrap,
        .search-side [data-key="delivery"] .lg\:flex-wrap {
      display: block;
    }

    /* الغرف / الحمامات / سنوات التقسيط: دواير صغيرة */

    .search-side .area-fsec .lg\:flex-wrap {
      gap: 8px;
    }

    /* المرافق */

    /* المنطقة / المطور جوه العمود: أول 3 اختيارات، والباقي من "عرض المزيد" */

    /* عنوان القسم زرار بيفتح نافذة الاختيار */

    /* "مسح كل الفلاتر": ثابت في آخر العمود */

    /* "مسح الكل" العايم تحت اتشال — بقى في رأس العمود */

    /* كارت النتيجة بالعرض: الصورة على جنب والتفاصيل جنبها (كارت الوحدة وكارت المشروع) */

    /* الكارت العريض: مستطيل واطي — الصورة على جنب، وجنبها البيانات، وآخر سطر السعر وجنبه زراير التواصل */

    /* السعرين في كارت الكمبوند العريض: في سطر واحد من غير ما العملة تنزل تحت */

    /* تحت عمود الفلاتر والنتايج: المقال والأسئلة ولينكات البحث بعرض الصفحة كلها (بتبدأ من ناحية الفلتر) */

    /* فوق بعرض الصفحة: البحث + الترتيب + الخريطة + التحويل، وتحتهم العنوان — وبعدين عمود الفلاتر والنتايج */

    /* عمود الفلاتر: بسيط — عنوان القسم وجنبه "مسح"، قوايم بمربعات اختيار، وخط فاصل بين الأقسام. ماشي مع الصفحة (مش ثابت) */

    /* رأس العمود: العنوان + "مسح الكل" + زرار الإخفاء */

    /* العمود مخفي: النتايج بعرض الصفحة كله ، وزرار "الفلتر" بيظهر فوق جنب الترتيب */

    /* ترتيب الأقسام في العمود */

    /* القسم: من غير كارت وأيقونة — خط فاصل بس */

    /* نوع البيع */

    /* مربعات الاختيار العادية في الفلتر (المنطقة / المطور / المشروع / المرافق) بنفس شكل مربعات نوع العقار والتشطيب */

    /* نوع العقار / التشطيب / التسليم: قايمة تحت بعض بمربعات اختيار (نفس الحقول، الشكل بس) */

    .search-side [data-key="type"] .lg\:flex-wrap,
        .search-side [data-key="finishing"] .lg\:flex-wrap,
        .search-side [data-key="delivery"] .lg\:flex-wrap {
      display: block;
    }

    /* الغرف / الحمامات / سنوات التقسيط: دواير صغيرة */

    .search-side .area-fsec .lg\:flex-wrap {
      gap: 8px;
    }

    /* المرافق */

    /* المنطقة / المطور جوه العمود: أول 3 اختيارات، والباقي من "عرض المزيد" */

    /* عنوان القسم زرار بيفتح نافذة الاختيار */

    /* "مسح كل الفلاتر": ثابت في آخر العمود */

    /* "مسح الكل" العايم تحت اتشال — بقى في رأس العمود */

    /* كارت النتيجة بالعرض: الصورة على جنب والتفاصيل جنبها (كارت الوحدة وكارت المشروع) */

    /* الكارت العريض: مستطيل واطي — الصورة على جنب، وجنبها البيانات، وآخر سطر السعر وجنبه زراير التواصل */

    /* السعرين في كارت الكمبوند العريض: في سطر واحد من غير ما العملة تنزل تحت */

    /* تحت عمود الفلاتر والنتايج: المقال والأسئلة ولينكات البحث بعرض الصفحة كلها (بتبدأ من ناحية الفلتر) */

    /* فوق بعرض الصفحة: البحث + الترتيب + الخريطة + التحويل، وتحتهم العنوان — وبعدين عمود الفلاتر والنتايج */

    /* عمود الفلاتر: بسيط — عنوان القسم وجنبه "مسح"، قوايم بمربعات اختيار، وخط فاصل بين الأقسام. ماشي مع الصفحة (مش ثابت) */

    /* رأس العمود: العنوان + "مسح الكل" + زرار الإخفاء */

    /* العمود مخفي: النتايج بعرض الصفحة كله ، وزرار "الفلتر" بيظهر فوق جنب الترتيب */

    /* ترتيب الأقسام في العمود */

    /* القسم: من غير كارت وأيقونة — خط فاصل بس */

    /* نوع البيع */

    /* مربعات الاختيار العادية في الفلتر (المنطقة / المطور / المشروع / المرافق) بنفس شكل مربعات نوع العقار والتشطيب */

    /* نوع العقار / التشطيب / التسليم: قايمة تحت بعض بمربعات اختيار (نفس الحقول، الشكل بس) */

    /* الغرف / الحمامات / سنوات التقسيط: دواير صغيرة */

    /* المرافق */

    /* المنطقة / المطور جوه العمود: أول 3 اختيارات، والباقي من "عرض المزيد" */

    .search-list label > span.lg\:flex-1 {
      flex: 0 1 auto;
      font-size: 14.5px;
      font-weight: 500;
    }

    /* عنوان القسم زرار بيفتح نافذة الاختيار */

    /* "مسح كل الفلاتر": ثابت في آخر العمود */

    /* "مسح الكل" العايم تحت اتشال — بقى في رأس العمود */

    /* كارت النتيجة بالعرض: الصورة على جنب والتفاصيل جنبها (كارت الوحدة وكارت المشروع) */

    /* الكارت العريض: مستطيل واطي — الصورة على جنب، وجنبها البيانات، وآخر سطر السعر وجنبه زراير التواصل */

    /* السعرين في كارت الكمبوند العريض: في سطر واحد من غير ما العملة تنزل تحت */
  }

  .lg\:hidden.sai {
    display: none;
  }

  .lg\:hidden.sai__chips {
    display: none;
  }

  .lg\:hidden.sai__mic {
    display: none;
  }

  .lg\:hidden.sai__crit {
    display: none;
  }

  .lg\:hidden.sai__ctx {
    display: none;
  }

  [data-meeting-modal] > .lg\:absolute.inset-0,
    [data-offer-modal] > .lg\:absolute.inset-0,
    [data-index-advanced] > .lg\:absolute.inset-0,
    [data-index-picker] > .lg\:absolute.inset-0,
    [data-filter-sheet] > .lg\:absolute.inset-0 {
    background-color: transparent !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }

  [data-meeting-modal] > .lg\:inset-0.absolute,
    [data-offer-modal] > .lg\:inset-0.absolute,
    [data-index-advanced] > .lg\:inset-0.absolute,
    [data-index-picker] > .lg\:inset-0.absolute,
    [data-filter-sheet] > .lg\:inset-0.absolute {
    background-color: transparent !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }

  [data-meeting-modal] > .lg\:absolute.inset-0,
    [data-offer-modal] > .lg\:absolute.inset-0,
    [data-index-advanced] > .lg\:absolute.inset-0,
    [data-index-picker] > .lg\:absolute.inset-0,
    [data-filter-sheet] > .lg\:absolute.inset-0 {
    background-color: transparent !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }

  [data-meeting-modal] > .lg\:inset-0.absolute,
    [data-offer-modal] > .lg\:inset-0.absolute,
    [data-index-advanced] > .lg\:inset-0.absolute,
    [data-index-picker] > .lg\:inset-0.absolute,
    [data-filter-sheet] > .lg\:inset-0.absolute {
    background-color: transparent !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }

  [data-meeting-modal] > .lg\:absolute.inset-0,
    [data-offer-modal] > .lg\:absolute.inset-0,
    [data-index-advanced] > .lg\:absolute.inset-0,
    [data-index-picker] > .lg\:absolute.inset-0,
    [data-filter-sheet] > .lg\:absolute.inset-0 {
    background-color: transparent !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }

  [data-meeting-modal] > .lg\:inset-0.absolute,
    [data-offer-modal] > .lg\:inset-0.absolute,
    [data-index-advanced] > .lg\:inset-0.absolute,
    [data-index-picker] > .lg\:inset-0.absolute,
    [data-filter-sheet] > .lg\:inset-0.absolute {
    background-color: transparent !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }

  [data-meeting-modal] > .lg\:absolute.inset-0,
    [data-offer-modal] > .lg\:absolute.inset-0,
    [data-index-advanced] > .lg\:absolute.inset-0,
    [data-index-picker] > .lg\:absolute.inset-0,
    [data-filter-sheet] > .lg\:absolute.inset-0 {
    background-color: transparent !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }

  [data-meeting-modal] > .lg\:inset-0.absolute,
    [data-offer-modal] > .lg\:inset-0.absolute,
    [data-index-advanced] > .lg\:inset-0.absolute,
    [data-index-picker] > .lg\:inset-0.absolute,
    [data-filter-sheet] > .lg\:inset-0.absolute {
    background-color: transparent !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }

  [data-meeting-modal] > .lg\:absolute.inset-0,
    [data-offer-modal] > .lg\:absolute.inset-0,
    [data-index-advanced] > .lg\:absolute.inset-0,
    [data-index-picker] > .lg\:absolute.inset-0,
    [data-filter-sheet] > .lg\:absolute.inset-0 {
    background-color: transparent !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }

  [data-meeting-modal] > .lg\:inset-0.absolute,
    [data-offer-modal] > .lg\:inset-0.absolute,
    [data-index-advanced] > .lg\:inset-0.absolute,
    [data-index-picker] > .lg\:inset-0.absolute,
    [data-filter-sheet] > .lg\:inset-0.absolute {
    background-color: transparent !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }

  [data-meeting-modal] > .lg\:absolute.inset-0 + *,
    [data-offer-modal] > .lg\:absolute.inset-0 + *,
    [data-index-advanced] > .lg\:absolute.inset-0 + *,
    [data-index-picker] > .lg\:absolute.inset-0 + *,
    [data-filter-sheet] > .lg\:absolute.inset-0 + * {
    box-shadow: 0 0 0 1px rgba(18, 58, 92, 0.1), 0 -6px 44px -10px rgba(18, 58, 92, 0.38);
  }

  [data-meeting-modal] > .lg\:inset-0.absolute + *,
    [data-offer-modal] > .lg\:inset-0.absolute + *,
    [data-index-advanced] > .lg\:inset-0.absolute + *,
    [data-index-picker] > .lg\:inset-0.absolute + *,
    [data-filter-sheet] > .lg\:inset-0.absolute + * {
    box-shadow: 0 0 0 1px rgba(18, 58, 92, 0.1), 0 -6px 44px -10px rgba(18, 58, 92, 0.38);
  }

  [data-meeting-modal] > .lg\:absolute.inset-0 + *,
    [data-offer-modal] > .lg\:absolute.inset-0 + *,
    [data-index-advanced] > .lg\:absolute.inset-0 + *,
    [data-index-picker] > .lg\:absolute.inset-0 + *,
    [data-filter-sheet] > .lg\:absolute.inset-0 + * {
    box-shadow: 0 0 0 1px rgba(18, 58, 92, 0.1), 0 -6px 44px -10px rgba(18, 58, 92, 0.38);
  }

  [data-meeting-modal] > .lg\:inset-0.absolute + *,
    [data-offer-modal] > .lg\:inset-0.absolute + *,
    [data-index-advanced] > .lg\:inset-0.absolute + *,
    [data-index-picker] > .lg\:inset-0.absolute + *,
    [data-filter-sheet] > .lg\:inset-0.absolute + * {
    box-shadow: 0 0 0 1px rgba(18, 58, 92, 0.1), 0 -6px 44px -10px rgba(18, 58, 92, 0.38);
  }

  [data-meeting-modal] > .lg\:absolute.inset-0 + *,
    [data-offer-modal] > .lg\:absolute.inset-0 + *,
    [data-index-advanced] > .lg\:absolute.inset-0 + *,
    [data-index-picker] > .lg\:absolute.inset-0 + *,
    [data-filter-sheet] > .lg\:absolute.inset-0 + * {
    box-shadow: 0 0 0 1px rgba(18, 58, 92, 0.1), 0 -6px 44px -10px rgba(18, 58, 92, 0.38);
  }

  [data-meeting-modal] > .lg\:inset-0.absolute + *,
    [data-offer-modal] > .lg\:inset-0.absolute + *,
    [data-index-advanced] > .lg\:inset-0.absolute + *,
    [data-index-picker] > .lg\:inset-0.absolute + *,
    [data-filter-sheet] > .lg\:inset-0.absolute + * {
    box-shadow: 0 0 0 1px rgba(18, 58, 92, 0.1), 0 -6px 44px -10px rgba(18, 58, 92, 0.38);
  }

  [data-meeting-modal] > .lg\:absolute.inset-0 + *,
    [data-offer-modal] > .lg\:absolute.inset-0 + *,
    [data-index-advanced] > .lg\:absolute.inset-0 + *,
    [data-index-picker] > .lg\:absolute.inset-0 + *,
    [data-filter-sheet] > .lg\:absolute.inset-0 + * {
    box-shadow: 0 0 0 1px rgba(18, 58, 92, 0.1), 0 -6px 44px -10px rgba(18, 58, 92, 0.38);
  }

  [data-meeting-modal] > .lg\:inset-0.absolute + *,
    [data-offer-modal] > .lg\:inset-0.absolute + *,
    [data-index-advanced] > .lg\:inset-0.absolute + *,
    [data-index-picker] > .lg\:inset-0.absolute + *,
    [data-filter-sheet] > .lg\:inset-0.absolute + * {
    box-shadow: 0 0 0 1px rgba(18, 58, 92, 0.1), 0 -6px 44px -10px rgba(18, 58, 92, 0.38);
  }

  [data-meeting-modal] > .lg\:absolute.inset-0 + *,
    [data-offer-modal] > .lg\:absolute.inset-0 + *,
    [data-index-advanced] > .lg\:absolute.inset-0 + *,
    [data-index-picker] > .lg\:absolute.inset-0 + *,
    [data-filter-sheet] > .lg\:absolute.inset-0 + * {
    box-shadow: 0 0 0 1px rgba(18, 58, 92, 0.1), 0 -6px 44px -10px rgba(18, 58, 92, 0.38);
  }

  [data-meeting-modal] > .lg\:inset-0.absolute + *,
    [data-offer-modal] > .lg\:inset-0.absolute + *,
    [data-index-advanced] > .lg\:inset-0.absolute + *,
    [data-index-picker] > .lg\:inset-0.absolute + *,
    [data-filter-sheet] > .lg\:inset-0.absolute + * {
    box-shadow: 0 0 0 1px rgba(18, 58, 92, 0.1), 0 -6px 44px -10px rgba(18, 58, 92, 0.38);
  }

  @media (min-width: 1024px) {
    /* [class~="hidden"] بدل .hidden: عشان Tailwind ما يعملش من القاعدة نسخ lg:hidden / md:hidden بتتحقق دايمًا وتغمّق الصفحة */

    .home-filter .lg\:hidden.search-side {
      display: none !important;
    }
  }

  .lg\:hidden.privacy-note {
    display: none;
  }
}

.placeholder\:font-medium::-moz-placeholder {
  font-weight: 500;
}

.placeholder\:font-medium::placeholder {
  font-weight: 500;
}

.placeholder\:font-semibold::-moz-placeholder {
  font-weight: 600;
}

.placeholder\:font-semibold::placeholder {
  font-weight: 600;
}

.placeholder\:text-shary-hint::-moz-placeholder {
  --tw-text-opacity: 1;
  color: rgb(138 153 168 / var(--tw-text-opacity, 1));
}

.placeholder\:text-shary-hint::placeholder {
  --tw-text-opacity: 1;
  color: rgb(138 153 168 / var(--tw-text-opacity, 1));
}

.placeholder\:text-shary-muted::-moz-placeholder {
  --tw-text-opacity: 1;
  color: rgb(91 107 124 / var(--tw-text-opacity, 1));
}

.placeholder\:text-shary-muted::placeholder {
  --tw-text-opacity: 1;
  color: rgb(91 107 124 / var(--tw-text-opacity, 1));
}

.after\:absolute::after {
  content: var(--tw-content);
  position: absolute;
}

.after\:bottom-0::after {
  content: var(--tw-content);
  bottom: 0px;
}

.after\:start-0::after {
  content: var(--tw-content);
  inset-inline-start: 0px;
}

.after\:h-\[3px\]::after {
  content: var(--tw-content);
  height: 3px;
}

.after\:w-11::after {
  content: var(--tw-content);
  width: 2.75rem;
}

.after\:rounded-full::after {
  content: var(--tw-content);
  border-radius: 9999px;
}

.after\:bg-\[\#a9c4ec\]::after {
  content: var(--tw-content);
  --tw-bg-opacity: 1;
  background-color: rgb(169 196 236 / var(--tw-bg-opacity, 1));
}

.last\:border-b-0:last-child {
  border-bottom-width: 0px;
}

.last\:pb-0:last-child {
  padding-bottom: 0px;
}

.focus-within\:border-shary-link:focus-within {
  --tw-border-opacity: 1;
  border-color: rgb(31 99 198 / var(--tw-border-opacity, 1));
}

.focus-within\:ring-2:focus-within {
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}

.focus-within\:ring-shary-teal:focus-within {
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(31 127 114 / var(--tw-ring-opacity, 1));
}

.hover\:scale-105:hover {
  --tw-scale-x: 1.05;
  --tw-scale-y: 1.05;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.hover\:border-shary-action:hover {
  --tw-border-opacity: 1;
  border-color: rgb(30 65 102 / var(--tw-border-opacity, 1));
}

.hover\:border-shary-link:hover {
  --tw-border-opacity: 1;
  border-color: rgb(31 99 198 / var(--tw-border-opacity, 1));
}

.hover\:border-shary-teal:hover {
  --tw-border-opacity: 1;
  border-color: rgb(31 127 114 / var(--tw-border-opacity, 1));
}

.hover\:border-white:hover {
  --tw-border-opacity: 1;
  border-color: rgb(255 255 255 / var(--tw-border-opacity, 1));
}

.hover\:bg-shary-form:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(232 240 251 / var(--tw-bg-opacity, 1));
}

.hover\:bg-shary-navy:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(18 58 92 / var(--tw-bg-opacity, 1));
}

.hover\:bg-white\/25:hover {
  background-color: rgb(255 255 255 / 0.25);
}

.hover\:text-\[\#b3261e\]:hover {
  --tw-text-opacity: 1;
  color: rgb(179 38 30 / var(--tw-text-opacity, 1));
}

.hover\:text-shary-action:hover {
  --tw-text-opacity: 1;
  color: rgb(30 65 102 / var(--tw-text-opacity, 1));
}

.hover\:text-shary-link:hover {
  --tw-text-opacity: 1;
  color: rgb(31 99 198 / var(--tw-text-opacity, 1));
}

.hover\:underline:hover {
  text-decoration-line: underline;
}

.hover\:shadow-\[0_10px_26px_-14px_rgba\(18\2c 58\2c 92\2c 0\.45\)\]:hover {
  --tw-shadow: 0 10px 26px -14px rgba(18,58,92,0.45);
  --tw-shadow-colored: 0 10px 26px -14px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.hover\:brightness-95:hover {
  --tw-brightness: brightness(.95);
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}

.focus\:border-shary-link:focus {
  --tw-border-opacity: 1;
  border-color: rgb(31 99 198 / var(--tw-border-opacity, 1));
}

.focus\:bg-shary-form:focus {
  --tw-bg-opacity: 1;
  background-color: rgb(232 240 251 / var(--tw-bg-opacity, 1));
}

.focus\:outline-none:focus {
  outline: 2px solid transparent;
  outline-offset: 2px;
}

.focus\:ring-2:focus {
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}

.focus\:ring-shary-link:focus {
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(31 99 198 / var(--tw-ring-opacity, 1));
}

.active\:border-shary-link:active {
  --tw-border-opacity: 1;
  border-color: rgb(31 99 198 / var(--tw-border-opacity, 1));
}

.active\:bg-shary-cloud:active {
  --tw-bg-opacity: 1;
  background-color: rgb(214 226 236 / var(--tw-bg-opacity, 1));
}

.active\:bg-shary-form:active {
  --tw-bg-opacity: 1;
  background-color: rgb(232 240 251 / var(--tw-bg-opacity, 1));
}

.active\:bg-shary-navy:active {
  --tw-bg-opacity: 1;
  background-color: rgb(18 58 92 / var(--tw-bg-opacity, 1));
}

.active\:text-shary-link:active {
  --tw-text-opacity: 1;
  color: rgb(31 99 198 / var(--tw-text-opacity, 1));
}

.active\:brightness-95:active {
  --tw-brightness: brightness(.95);
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}

.disabled\:opacity-60:disabled {
  opacity: 0.6;
}

.group[open] .group-open\:rotate-180 {
  --tw-rotate: 180deg;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.group:hover .group-hover\:text-shary-link {
  --tw-text-opacity: 1;
  color: rgb(31 99 198 / var(--tw-text-opacity, 1));
}

.aria-pressed\:border-shary-action[aria-pressed="true"] {
  --tw-border-opacity: 1;
  border-color: rgb(30 65 102 / var(--tw-border-opacity, 1));
}

.aria-pressed\:border-white[aria-pressed="true"] {
  --tw-border-opacity: 1;
  border-color: rgb(255 255 255 / var(--tw-border-opacity, 1));
}

.aria-pressed\:bg-shary-action[aria-pressed="true"] {
  --tw-bg-opacity: 1;
  background-color: rgb(30 65 102 / var(--tw-bg-opacity, 1));
}

.aria-pressed\:bg-white[aria-pressed="true"] {
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
}

.aria-pressed\:text-shary-navy[aria-pressed="true"] {
  --tw-text-opacity: 1;
  color: rgb(18 58 92 / var(--tw-text-opacity, 1));
}

.aria-pressed\:text-white[aria-pressed="true"] {
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}

.group[aria-pressed="true"] .group-aria-pressed\:fill-current {
  fill: currentColor;
}

.data-\[active\=true\]\:text-red-600[data-active="true"] {
  --tw-text-opacity: 1;
  color: rgb(220 38 38 / var(--tw-text-opacity, 1));
}

.data-\[active\=true\]\:hover\:text-red-600:hover[data-active="true"] {
  --tw-text-opacity: 1;
  color: rgb(220 38 38 / var(--tw-text-opacity, 1));
}

.group[data-active="true"] .group-data-\[active\=true\]\:fill-current {
  fill: currentColor;
}

@media not all and (min-width: 1024px) {
  .max-lg\:me-auto {
    margin-inline-end: auto;
  }

  .max-lg\:ms-2\.5 {
    margin-inline-start: 0.625rem;
  }

  .max-lg\:hidden {
    display: none;
  }

  .max-lg\:gap-2 {
    gap: 0.5rem;
  }

  .max-lg\:px-3 {
    padding-left: 0.75rem;
    padding-right: 0.75rem;
  }

  .max-lg\:\[direction\:ltr\] {
    direction: ltr;
  }
}

@media not all and (min-width: 768px) {
  .max-md\:hidden {
    display: none;
  }
}

@media (min-width: 360px) {
  .min-\[360px\]\:h-\[18px\] {
    height: 18px;
  }

  .min-\[360px\]\:h-\[26px\] {
    height: 26px;
  }

  .min-\[360px\]\:w-\[18px\] {
    width: 18px;
  }

  .min-\[360px\]\:gap-x-2 {
    -moz-column-gap: 0.5rem;
         column-gap: 0.5rem;
  }

  .min-\[360px\]\:text-\[12\.5px\] {
    font-size: 12.5px;
  }

  .min-\[360px\]\:text-\[15px\] {
    font-size: 15px;
  }
}

@media (min-width: 380px) {
  .min-\[380px\]\:block {
    display: block;
  }

  .min-\[380px\]\:h-\[30px\] {
    height: 30px;
  }

  .min-\[380px\]\:gap-3 {
    gap: 0.75rem;
  }

  .min-\[380px\]\:gap-x-5 {
    -moz-column-gap: 1.25rem;
         column-gap: 1.25rem;
  }
}

@media (min-width: 400px) {
  .min-\[400px\]\:h-5 {
    height: 1.25rem;
  }

  .min-\[400px\]\:w-5 {
    width: 1.25rem;
  }

  .min-\[400px\]\:gap-1\.5 {
    gap: 0.375rem;
  }

  .min-\[400px\]\:gap-x-3 {
    -moz-column-gap: 0.75rem;
         column-gap: 0.75rem;
  }

  .min-\[400px\]\:text-\[13px\] {
    font-size: 13px;
  }

  .min-\[400px\]\:text-\[18px\] {
    font-size: 18px;
  }

  .min-\[400px\]\:text-\[26px\] {
    font-size: 26px;
  }
}

@media (min-width: 640px) {
  .sm\:top-\[86px\] {
    top: 86px;
  }

  .sm\:col-span-2 {
    grid-column: span 2 / span 2;
  }

  .sm\:h-\[54px\] {
    height: 54px;
  }

  .sm\:grid-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .sm\:grid-cols-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .sm\:gap-5 {
    gap: 1.25rem;
  }

  .sm\:border-s {
    border-inline-start-width: 1px;
  }

  .sm\:py-2 {
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
  }

  .sm\:py-4 {
    padding-top: 1rem;
    padding-bottom: 1rem;
  }

  .sm\:pe-5 {
    padding-inline-end: 1.25rem;
  }

  .sm\:text-lg {
    font-size: 1.125rem;
    line-height: 1.75rem;
  }

  .sm\:text-sm {
    font-size: 0.875rem;
    line-height: 1.25rem;
  }
}

@media (min-width: 768px) {
  .md\:top-14 {
    top: 3.5rem;
  }

  .md\:mb-2 {
    margin-bottom: 0.5rem;
  }

  .md\:mb-7 {
    margin-bottom: 1.75rem;
  }

  .md\:mt-0 {
    margin-top: 0px;
  }

  .md\:mt-20 {
    margin-top: 5rem;
  }

  .md\:mt-3 {
    margin-top: 0.75rem;
  }

  .md\:mt-4 {
    margin-top: 1rem;
  }

  .md\:mt-8 {
    margin-top: 2rem;
  }

  .md\:mt-\[15px\] {
    margin-top: 15px;
  }

  .md\:block {
    display: block;
  }

  .md\:inline {
    display: inline;
  }

  .md\:table-cell {
    display: table-cell;
  }

  .md\:hidden {
    display: none;
  }

  .md\:h-\[54px\] {
    height: 54px;
  }

  .md\:h-\[60px\] {
    height: 60px;
  }

  .md\:h-full {
    height: 100%;
  }

  .md\:w-\[102px\] {
    width: 102px;
  }

  .md\:w-\[195px\] {
    width: 195px;
  }

  .md\:w-\[42px\] {
    width: 42px;
  }

  .md\:w-\[93px\] {
    width: 93px;
  }

  .md\:grid-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .md\:grid-cols-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .md\:grid-cols-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .md\:gap-1\.5 {
    gap: 0.375rem;
  }

  .md\:gap-4 {
    gap: 1rem;
  }

  .md\:gap-6 {
    gap: 1.5rem;
  }

  .md\:gap-8 {
    gap: 2rem;
  }

  .md\:border-t-0 {
    border-top-width: 0px;
  }

  .md\:p-2 {
    padding: 0.5rem;
  }

  .md\:px-10 {
    padding-left: 2.5rem;
    padding-right: 2.5rem;
  }

  .md\:px-3 {
    padding-left: 0.75rem;
    padding-right: 0.75rem;
  }

  .md\:py-0 {
    padding-top: 0px;
    padding-bottom: 0px;
  }

  .md\:py-2\.5 {
    padding-top: 0.625rem;
    padding-bottom: 0.625rem;
  }

  .md\:py-7 {
    padding-top: 1.75rem;
    padding-bottom: 1.75rem;
  }

  .md\:pb-5 {
    padding-bottom: 1.25rem;
  }

  .md\:pb-6 {
    padding-bottom: 1.5rem;
  }

  .md\:pt-0 {
    padding-top: 0px;
  }

  .md\:pt-1 {
    padding-top: 0.25rem;
  }

  .md\:pt-10 {
    padding-top: 2.5rem;
  }

  .md\:pt-3 {
    padding-top: 0.75rem;
  }

  .md\:text-2xl {
    font-size: 1.5rem;
    line-height: 2rem;
  }

  .md\:text-\[13px\] {
    font-size: 13px;
  }

  .md\:text-\[16px\] {
    font-size: 16px;
  }

  .md\:text-base {
    font-size: 1rem;
    line-height: 1.5rem;
  }

  .md\:text-lg {
    font-size: 1.125rem;
    line-height: 1.75rem;
  }

  .md\:text-sm {
    font-size: 0.875rem;
    line-height: 1.25rem;
  }

  .md\:text-xl {
    font-size: 1.25rem;
    line-height: 1.75rem;
  }

  .md\:font-medium {
    font-weight: 500;
  }

  .md\:font-semibold {
    font-weight: 600;
  }

  .md\:leading-\[22px\] {
    line-height: 22px;
  }
}

@media (min-width: 1024px) {
  .lg\:not-sr-only {
    position: static;
    width: auto;
    height: auto;
    padding: 0;
    margin: 0;
    overflow: visible;
    clip: auto;
    white-space: normal;
  }

  .lg\:pointer-events-none {
    pointer-events: none;
  }

  .lg\:absolute {
    position: absolute;
  }

  .lg\:sticky {
    position: sticky;
  }

  .lg\:inset-0 {
    inset: 0px;
  }

  .lg\:inset-x-auto {
    left: auto;
    right: auto;
  }

  .lg\:bottom-5 {
    bottom: 1.25rem;
  }

  .lg\:bottom-6 {
    bottom: 1.5rem;
  }

  .lg\:bottom-7 {
    bottom: 1.75rem;
  }

  .lg\:end-6 {
    inset-inline-end: 1.5rem;
  }

  .lg\:end-8 {
    inset-inline-end: 2rem;
  }

  .lg\:left-7 {
    left: 1.75rem;
  }

  .lg\:start-5 {
    inset-inline-start: 1.25rem;
  }

  .lg\:start-6 {
    inset-inline-start: 1.5rem;
  }

  .lg\:start-8 {
    inset-inline-start: 2rem;
  }

  .lg\:top-24 {
    top: 6rem;
  }

  .lg\:top-6 {
    top: 1.5rem;
  }

  .lg\:top-\[56px\] {
    top: 56px;
  }

  .lg\:top-\[92px\] {
    top: 92px;
  }

  .lg\:order-1 {
    order: 1;
  }

  .lg\:order-2 {
    order: 2;
  }

  .lg\:order-none {
    order: 0;
  }

  .lg\:col-span-2 {
    grid-column: span 2 / span 2;
  }

  .lg\:col-start-1 {
    grid-column-start: 1;
  }

  .lg\:col-start-2 {
    grid-column-start: 2;
  }

  .lg\:row-span-4 {
    grid-row: span 4 / span 4;
  }

  .lg\:row-start-1 {
    grid-row-start: 1;
  }

  .lg\:row-start-10 {
    grid-row-start: 10;
  }

  .lg\:row-start-11 {
    grid-row-start: 11;
  }

  .lg\:row-start-2 {
    grid-row-start: 2;
  }

  .lg\:row-start-3 {
    grid-row-start: 3;
  }

  .lg\:row-start-4 {
    grid-row-start: 4;
  }

  .lg\:row-start-5 {
    grid-row-start: 5;
  }

  .lg\:row-start-6 {
    grid-row-start: 6;
  }

  .lg\:row-start-7 {
    grid-row-start: 7;
  }

  .lg\:row-start-8 {
    grid-row-start: 8;
  }

  .lg\:row-start-9 {
    grid-row-start: 9;
  }

  .lg\:row-end-\[12\] {
    grid-row-end: 12;
  }

  .lg\:m-auto {
    margin: auto;
  }

  .lg\:mx-0 {
    margin-left: 0px;
    margin-right: 0px;
  }

  .lg\:mx-auto {
    margin-left: auto;
    margin-right: auto;
  }

  .lg\:mb-1 {
    margin-bottom: 0.25rem;
  }

  .lg\:mb-2 {
    margin-bottom: 0.5rem;
  }

  .lg\:mb-3 {
    margin-bottom: 0.75rem;
  }

  .lg\:mb-3\.5 {
    margin-bottom: 0.875rem;
  }

  .lg\:mb-4 {
    margin-bottom: 1rem;
  }

  .lg\:mb-5 {
    margin-bottom: 1.25rem;
  }

  .lg\:mb-6 {
    margin-bottom: 1.5rem;
  }

  .lg\:mb-7 {
    margin-bottom: 1.75rem;
  }

  .lg\:me-0 {
    margin-inline-end: 0px;
  }

  .lg\:me-auto {
    margin-inline-end: auto;
  }

  .lg\:ms-4 {
    margin-inline-start: 1rem;
  }

  .lg\:mt-0 {
    margin-top: 0px;
  }

  .lg\:mt-1 {
    margin-top: 0.25rem;
  }

  .lg\:mt-1\.5 {
    margin-top: 0.375rem;
  }

  .lg\:mt-10 {
    margin-top: 2.5rem;
  }

  .lg\:mt-12 {
    margin-top: 3rem;
  }

  .lg\:mt-14 {
    margin-top: 3.5rem;
  }

  .lg\:mt-2 {
    margin-top: 0.5rem;
  }

  .lg\:mt-2\.5 {
    margin-top: 0.625rem;
  }

  .lg\:mt-3 {
    margin-top: 0.75rem;
  }

  .lg\:mt-3\.5 {
    margin-top: 0.875rem;
  }

  .lg\:mt-4 {
    margin-top: 1rem;
  }

  .lg\:mt-5 {
    margin-top: 1.25rem;
  }

  .lg\:mt-6 {
    margin-top: 1.5rem;
  }

  .lg\:mt-7 {
    margin-top: 1.75rem;
  }

  .lg\:mt-8 {
    margin-top: 2rem;
  }

  .lg\:mt-9 {
    margin-top: 2.25rem;
  }

  .lg\:block {
    display: block;
  }

  .lg\:inline {
    display: inline;
  }

  .lg\:flex {
    display: flex;
  }

  .lg\:inline-flex {
    display: inline-flex;
  }

  .lg\:table-cell {
    display: table-cell;
  }

  .lg\:grid {
    display: grid;
  }

  .lg\:contents {
    display: contents;
  }

  .lg\:hidden {
    display: none;
  }

  .lg\:aspect-auto {
    aspect-ratio: auto;
  }

  .lg\:h-10 {
    height: 2.5rem;
  }

  .lg\:h-11 {
    height: 2.75rem;
  }

  .lg\:h-12 {
    height: 3rem;
  }

  .lg\:h-14 {
    height: 3.5rem;
  }

  .lg\:h-16 {
    height: 4rem;
  }

  .lg\:h-6 {
    height: 1.5rem;
  }

  .lg\:h-7 {
    height: 1.75rem;
  }

  .lg\:h-8 {
    height: 2rem;
  }

  .lg\:h-\[10px\] {
    height: 10px;
  }

  .lg\:h-\[112px\] {
    height: 112px;
  }

  .lg\:h-\[11px\] {
    height: 11px;
  }

  .lg\:h-\[124px\] {
    height: 124px;
  }

  .lg\:h-\[140px\] {
    height: 140px;
  }

  .lg\:h-\[170px\] {
    height: 170px;
  }

  .lg\:h-\[176px\] {
    height: 176px;
  }

  .lg\:h-\[29px\] {
    height: 29px;
  }

  .lg\:h-\[31px\] {
    height: 31px;
  }

  .lg\:h-\[320px\] {
    height: 320px;
  }

  .lg\:h-\[340px\] {
    height: 340px;
  }

  .lg\:h-\[400px\] {
    height: 400px;
  }

  .lg\:h-\[46px\] {
    height: 46px;
  }

  .lg\:h-\[52px\] {
    height: 52px;
  }

  .lg\:h-\[54px\] {
    height: 54px;
  }

  .lg\:h-\[68px\] {
    height: 68px;
  }

  .lg\:h-\[70px\] {
    height: 70px;
  }

  .lg\:h-\[76px\] {
    height: 76px;
  }

  .lg\:h-\[84px\] {
    height: 84px;
  }

  .lg\:h-\[96px\] {
    height: 96px;
  }

  .lg\:h-auto {
    height: auto;
  }

  .lg\:h-fit {
    height: -moz-fit-content;
    height: fit-content;
  }

  .lg\:h-full {
    height: 100%;
  }

  .lg\:max-h-\[calc(80vh / var(--z, 1))\] {
    max-height: calc(80vh / var(--z, 1));
  }

  .lg\:max-h-\[calc(86vh / var(--z, 1))\] {
    max-height: calc(86vh / var(--z, 1));
  }

  .lg\:max-h-\[calc\(calc(100vh / var(--z, 1))-48px\)\] {
    max-height: calc(calc(100vh / var(--z, 1)) - 48px);
  }

  .lg\:min-h-\[300px\] {
    min-height: 300px;
  }

  .lg\:min-h-\[400px\] {
    min-height: 400px;
  }

  .lg\:min-h-\[68px\] {
    min-height: 68px;
  }

  .lg\:w-10 {
    width: 2.5rem;
  }

  .lg\:w-11 {
    width: 2.75rem;
  }

  .lg\:w-12 {
    width: 3rem;
  }

  .lg\:w-14 {
    width: 3.5rem;
  }

  .lg\:w-16 {
    width: 4rem;
  }

  .lg\:w-6 {
    width: 1.5rem;
  }

  .lg\:w-7 {
    width: 1.75rem;
  }

  .lg\:w-8 {
    width: 2rem;
  }

  .lg\:w-\[112px\] {
    width: 112px;
  }

  .lg\:w-\[124px\] {
    width: 124px;
  }

  .lg\:w-\[140px\] {
    width: 140px;
  }

  .lg\:w-\[170px\] {
    width: 170px;
  }

  .lg\:w-\[176px\] {
    width: 176px;
  }

  .lg\:w-\[210px\] {
    width: 210px;
  }

  .lg\:w-\[280px\] {
    width: 280px;
  }

  .lg\:w-\[300px\] {
    width: 300px;
  }

  .lg\:w-\[34px\] {
    width: 34px;
  }

  .lg\:w-\[360px\] {
    width: 360px;
  }

  .lg\:w-\[460px\] {
    width: 460px;
  }

  .lg\:w-\[520px\] {
    width: 520px;
  }

  .lg\:w-\[52px\] {
    width: 52px;
  }

  .lg\:w-\[540px\] {
    width: 540px;
  }

  .lg\:w-\[54px\] {
    width: 54px;
  }

  .lg\:w-\[560px\] {
    width: 560px;
  }

  .lg\:w-\[68px\] {
    width: 68px;
  }

  .lg\:w-\[720px\] {
    width: 720px;
  }

  .lg\:w-\[84px\] {
    width: 84px;
  }

  .lg\:w-\[900px\] {
    width: 900px;
  }

  .lg\:w-\[96px\] {
    width: 96px;
  }

  .lg\:w-\[calc\(\(100\%-48px\)\/3\)\] {
    width: calc((100% - 48px) / 3);
  }

  .lg\:w-auto {
    width: auto;
  }

  .lg\:min-w-0 {
    min-width: 0px;
  }

  .lg\:max-w-\[1240px\] {
    max-width: 1240px;
  }

  .lg\:max-w-\[480px\] {
    max-width: 480px;
  }

  .lg\:max-w-\[760px\] {
    max-width: 760px;
  }

  .lg\:max-w-\[820px\] {
    max-width: 820px;
  }

  .lg\:max-w-\[860px\] {
    max-width: 860px;
  }

  .lg\:max-w-\[92px\] {
    max-width: 92px;
  }

  .lg\:max-w-\[calc\(var\(--shary-w\)\+40px\)\] {
    max-width: calc(var(--shary-w) + 40px);
  }

  .lg\:max-w-none {
    max-width: none;
  }

  .lg\:flex-1 {
    flex: 1 1 0%;
  }

  .lg\:flex-none {
    flex: none;
  }

  .lg\:shrink-0 {
    flex-shrink: 0;
  }

  .lg\:scroll-mt-32 {
    scroll-margin-top: 8rem;
  }

  .lg\:scroll-px-0 {
    scroll-padding-left: 0px;
    scroll-padding-right: 0px;
  }

  .lg\:columns-2 {
    -moz-columns: 2;
         columns: 2;
  }

  .lg\:grid-cols-1 {
    grid-template-columns: repeat(1, minmax(0, 1fr));
  }

  .lg\:grid-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .lg\:grid-cols-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .lg\:grid-cols-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .lg\:grid-cols-5 {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }

  .lg\:grid-cols-6 {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }

  .lg\:grid-cols-7 {
    grid-template-columns: repeat(7, minmax(0, 1fr));
  }

  .lg\:grid-cols-\[1\.05fr_1fr\] {
    grid-template-columns: 1.05fr 1fr;
  }

  .lg\:grid-cols-\[1\.35fr_1fr\] {
    grid-template-columns: 1.35fr 1fr;
  }

  .lg\:grid-cols-\[1fr_1\.15fr\] {
    grid-template-columns: 1fr 1.15fr;
  }

  .lg\:grid-cols-\[300px_minmax\(0\2c 1fr\)\] {
    grid-template-columns: 300px minmax(0,1fr);
  }

  .lg\:grid-cols-\[320px_minmax\(0\2c 1fr\)\] {
    grid-template-columns: 320px minmax(0,1fr);
  }

  .lg\:grid-cols-\[320px_minmax\(0\2c 1fr\)_48px\] {
    grid-template-columns: 320px minmax(0,1fr) 48px;
  }

  .lg\:grid-cols-\[minmax\(0\2c 1\.1fr\)_48px_minmax\(0\2c 1fr\)_40px\] {
    grid-template-columns: minmax(0,1.1fr) 48px minmax(0,1fr) 40px;
  }

  .lg\:grid-cols-\[minmax\(0\2c 130px\)_minmax\(0\2c 1fr\)_100px\] {
    grid-template-columns: minmax(0,130px) minmax(0,1fr) 100px;
  }

  .lg\:grid-cols-\[minmax\(0\2c 150px\)_34px_minmax\(0\2c 1fr\)_26px\] {
    grid-template-columns: minmax(0,150px) 34px minmax(0,1fr) 26px;
  }

  .lg\:grid-cols-\[minmax\(0\2c 1fr\)_320px\] {
    grid-template-columns: minmax(0,1fr) 320px;
  }

  .lg\:grid-cols-\[minmax\(0\2c 1fr\)_360px\] {
    grid-template-columns: minmax(0,1fr) 360px;
  }

  .lg\:grid-cols-\[minmax\(0\2c 1fr\)_380px\] {
    grid-template-columns: minmax(0,1fr) 380px;
  }

  .lg\:grid-cols-\[minmax\(0\2c 1fr\)_400px\] {
    grid-template-columns: minmax(0,1fr) 400px;
  }

  .lg\:grid-cols-\[minmax\(0\2c 1fr\)_420px\] {
    grid-template-columns: minmax(0,1fr) 420px;
  }

  .lg\:grid-cols-\[minmax\(0\2c 1fr\)_520px\] {
    grid-template-columns: minmax(0,1fr) 520px;
  }

  .lg\:grid-cols-\[minmax\(0\2c 1fr\)_minmax\(0\2c 480px\)\] {
    grid-template-columns: minmax(0,1fr) minmax(0,480px);
  }

  .lg\:grid-cols-\[minmax\(0\2c 1fr\)_minmax\(0\2c 520px\)\] {
    grid-template-columns: minmax(0,1fr) minmax(0,520px);
  }

  .lg\:grid-cols-\[minmax\(0\2c 220px\)_minmax\(0\2c 1fr\)_110px\] {
    grid-template-columns: minmax(0,220px) minmax(0,1fr) 110px;
  }

  .lg\:grid-cols-\[minmax\(0\2c 260px\)_minmax\(0\2c 1fr\)_44px\] {
    grid-template-columns: minmax(0,260px) minmax(0,1fr) 44px;
  }

  .lg\:grid-cols-\[repeat\(3\2c minmax\(0\2c 1fr\)\)_48px_auto_48px\] {
    grid-template-columns: repeat(3,minmax(0,1fr)) 48px auto 48px;
  }

  .lg\:grid-cols-\[repeat\(3\2c minmax\(0\2c 1fr\)\)_64px\] {
    grid-template-columns: repeat(3,minmax(0,1fr)) 64px;
  }

  .lg\:flex-row {
    flex-direction: row;
  }

  .lg\:flex-row-reverse {
    flex-direction: row-reverse;
  }

  .lg\:flex-col {
    flex-direction: column;
  }

  .lg\:flex-wrap {
    flex-wrap: wrap;
  }

  .lg\:content-start {
    align-content: flex-start;
  }

  .lg\:items-start {
    align-items: flex-start;
  }

  .lg\:items-end {
    align-items: flex-end;
  }

  .lg\:items-center {
    align-items: center;
  }

  .lg\:items-stretch {
    align-items: stretch;
  }

  .lg\:justify-start {
    justify-content: flex-start;
  }

  .lg\:justify-center {
    justify-content: center;
  }

  .lg\:justify-between {
    justify-content: space-between;
  }

  .lg\:gap-0 {
    gap: 0px;
  }

  .lg\:gap-1 {
    gap: 0.25rem;
  }

  .lg\:gap-1\.5 {
    gap: 0.375rem;
  }

  .lg\:gap-10 {
    gap: 2.5rem;
  }

  .lg\:gap-12 {
    gap: 3rem;
  }

  .lg\:gap-14 {
    gap: 3.5rem;
  }

  .lg\:gap-16 {
    gap: 4rem;
  }

  .lg\:gap-2 {
    gap: 0.5rem;
  }

  .lg\:gap-2\.5 {
    gap: 0.625rem;
  }

  .lg\:gap-3 {
    gap: 0.75rem;
  }

  .lg\:gap-3\.5 {
    gap: 0.875rem;
  }

  .lg\:gap-4 {
    gap: 1rem;
  }

  .lg\:gap-5 {
    gap: 1.25rem;
  }

  .lg\:gap-6 {
    gap: 1.5rem;
  }

  .lg\:gap-7 {
    gap: 1.75rem;
  }

  .lg\:gap-8 {
    gap: 2rem;
  }

  .lg\:gap-9 {
    gap: 2.25rem;
  }

  .lg\:gap-\[26px\] {
    gap: 26px;
  }

  .lg\:gap-\[34px\] {
    gap: 34px;
  }

  .lg\:gap-\[72px\] {
    gap: 72px;
  }

  .lg\:gap-x-10 {
    -moz-column-gap: 2.5rem;
         column-gap: 2.5rem;
  }

  .lg\:gap-x-14 {
    -moz-column-gap: 3.5rem;
         column-gap: 3.5rem;
  }

  .lg\:gap-x-3\.5 {
    -moz-column-gap: 0.875rem;
         column-gap: 0.875rem;
  }

  .lg\:gap-x-4 {
    -moz-column-gap: 1rem;
         column-gap: 1rem;
  }

  .lg\:gap-x-5 {
    -moz-column-gap: 1.25rem;
         column-gap: 1.25rem;
  }

  .lg\:gap-x-6 {
    -moz-column-gap: 1.5rem;
         column-gap: 1.5rem;
  }

  .lg\:gap-y-1\.5 {
    row-gap: 0.375rem;
  }

  .lg\:gap-y-10 {
    row-gap: 2.5rem;
  }

  .lg\:gap-y-5 {
    row-gap: 1.25rem;
  }

  .lg\:gap-y-6 {
    row-gap: 1.5rem;
  }

  .lg\:gap-y-9 {
    row-gap: 2.25rem;
  }

  .lg\:self-stretch {
    align-self: stretch;
  }

  .lg\:overflow-visible {
    overflow: visible;
  }

  .lg\:truncate {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .lg\:whitespace-normal {
    white-space: normal;
  }

  .lg\:rounded-2xl {
    border-radius: 1rem;
  }

  .lg\:rounded-\[24px\] {
    border-radius: 24px;
  }

  .lg\:rounded-\[28px\] {
    border-radius: 28px;
  }

  .lg\:rounded-none {
    border-radius: 0px;
  }

  .lg\:rounded-xl {
    border-radius: 0.75rem;
  }

  .lg\:border {
    border-width: 1px;
  }

  .lg\:border-b {
    border-bottom-width: 1px;
  }

  .lg\:border-b-0 {
    border-bottom-width: 0px;
  }

  .lg\:border-e {
    border-inline-end-width: 1px;
  }

  .lg\:border-s {
    border-inline-start-width: 1px;
  }

  .lg\:border-s-0 {
    border-inline-start-width: 0px;
  }

  .lg\:border-t {
    border-top-width: 1px;
  }

  .lg\:border-t-0 {
    border-top-width: 0px;
  }

  .lg\:border-shary-line {
    --tw-border-opacity: 1;
    border-color: rgb(228 233 239 / var(--tw-border-opacity, 1));
  }

  .lg\:bg-\[\#e8f0fb\] {
    --tw-bg-opacity: 1;
    background-color: rgb(232 240 251 / var(--tw-bg-opacity, 1));
  }

  .lg\:bg-shary-action {
    --tw-bg-opacity: 1;
    background-color: rgb(30 65 102 / var(--tw-bg-opacity, 1));
  }

  .lg\:bg-transparent {
    background-color: transparent;
  }

  .lg\:bg-white {
    --tw-bg-opacity: 1;
    background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
  }

  .lg\:p-0 {
    padding: 0px;
  }

  .lg\:p-3 {
    padding: 0.75rem;
  }

  .lg\:p-4 {
    padding: 1rem;
  }

  .lg\:p-5 {
    padding: 1.25rem;
  }

  .lg\:p-7 {
    padding: 1.75rem;
  }

  .lg\:p-\[18px\] {
    padding: 18px;
  }

  .lg\:p-\[22px\] {
    padding: 22px;
  }

  .lg\:px-0 {
    padding-left: 0px;
    padding-right: 0px;
  }

  .lg\:px-10 {
    padding-left: 2.5rem;
    padding-right: 2.5rem;
  }

  .lg\:px-12 {
    padding-left: 3rem;
    padding-right: 3rem;
  }

  .lg\:px-14 {
    padding-left: 3.5rem;
    padding-right: 3.5rem;
  }

  .lg\:px-2 {
    padding-left: 0.5rem;
    padding-right: 0.5rem;
  }

  .lg\:px-3 {
    padding-left: 0.75rem;
    padding-right: 0.75rem;
  }

  .lg\:px-4 {
    padding-left: 1rem;
    padding-right: 1rem;
  }

  .lg\:px-5 {
    padding-left: 1.25rem;
    padding-right: 1.25rem;
  }

  .lg\:px-6 {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }

  .lg\:px-7 {
    padding-left: 1.75rem;
    padding-right: 1.75rem;
  }

  .lg\:px-8 {
    padding-left: 2rem;
    padding-right: 2rem;
  }

  .lg\:px-9 {
    padding-left: 2.25rem;
    padding-right: 2.25rem;
  }

  .lg\:px-\[18px\] {
    padding-left: 18px;
    padding-right: 18px;
  }

  .lg\:py-0 {
    padding-top: 0px;
    padding-bottom: 0px;
  }

  .lg\:py-10 {
    padding-top: 2.5rem;
    padding-bottom: 2.5rem;
  }

  .lg\:py-12 {
    padding-top: 3rem;
    padding-bottom: 3rem;
  }

  .lg\:py-14 {
    padding-top: 3.5rem;
    padding-bottom: 3.5rem;
  }

  .lg\:py-2\.5 {
    padding-top: 0.625rem;
    padding-bottom: 0.625rem;
  }

  .lg\:py-20 {
    padding-top: 5rem;
    padding-bottom: 5rem;
  }

  .lg\:py-3 {
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
  }

  .lg\:py-3\.5 {
    padding-top: 0.875rem;
    padding-bottom: 0.875rem;
  }

  .lg\:py-4 {
    padding-top: 1rem;
    padding-bottom: 1rem;
  }

  .lg\:py-5 {
    padding-top: 1.25rem;
    padding-bottom: 1.25rem;
  }

  .lg\:py-6 {
    padding-top: 1.5rem;
    padding-bottom: 1.5rem;
  }

  .lg\:py-7 {
    padding-top: 1.75rem;
    padding-bottom: 1.75rem;
  }

  .lg\:py-8 {
    padding-top: 2rem;
    padding-bottom: 2rem;
  }

  .lg\:py-9 {
    padding-top: 2.25rem;
    padding-bottom: 2.25rem;
  }

  .lg\:pb-0 {
    padding-bottom: 0px;
  }

  .lg\:pb-10 {
    padding-bottom: 2.5rem;
  }

  .lg\:pb-11 {
    padding-bottom: 2.75rem;
  }

  .lg\:pb-12 {
    padding-bottom: 3rem;
  }

  .lg\:pb-14 {
    padding-bottom: 3.5rem;
  }

  .lg\:pb-16 {
    padding-bottom: 4rem;
  }

  .lg\:pb-20 {
    padding-bottom: 5rem;
  }

  .lg\:pb-3\.5 {
    padding-bottom: 0.875rem;
  }

  .lg\:pb-4 {
    padding-bottom: 1rem;
  }

  .lg\:pb-5 {
    padding-bottom: 1.25rem;
  }

  .lg\:pb-6 {
    padding-bottom: 1.5rem;
  }

  .lg\:pb-7 {
    padding-bottom: 1.75rem;
  }

  .lg\:pb-8 {
    padding-bottom: 2rem;
  }

  .lg\:pb-9 {
    padding-bottom: 2.25rem;
  }

  .lg\:pe-10 {
    padding-inline-end: 2.5rem;
  }

  .lg\:ps-0 {
    padding-inline-start: 0px;
  }

  .lg\:ps-10 {
    padding-inline-start: 2.5rem;
  }

  .lg\:ps-4 {
    padding-inline-start: 1rem;
  }

  .lg\:ps-5 {
    padding-inline-start: 1.25rem;
  }

  .lg\:pt-0 {
    padding-top: 0px;
  }

  .lg\:pt-1 {
    padding-top: 0.25rem;
  }

  .lg\:pt-10 {
    padding-top: 2.5rem;
  }

  .lg\:pt-11 {
    padding-top: 2.75rem;
  }

  .lg\:pt-12 {
    padding-top: 3rem;
  }

  .lg\:pt-14 {
    padding-top: 3.5rem;
  }

  .lg\:pt-2 {
    padding-top: 0.5rem;
  }

  .lg\:pt-3\.5 {
    padding-top: 0.875rem;
  }

  .lg\:pt-4 {
    padding-top: 1rem;
  }

  .lg\:pt-5 {
    padding-top: 1.25rem;
  }

  .lg\:pt-6 {
    padding-top: 1.5rem;
  }

  .lg\:pt-7 {
    padding-top: 1.75rem;
  }

  .lg\:pt-8 {
    padding-top: 2rem;
  }

  .lg\:pt-9 {
    padding-top: 2.25rem;
  }

  .lg\:pt-\[59px\] {
    padding-top: 59px;
  }

  .lg\:text-start {
    text-align: start;
  }

  .lg\:text-\[10\.5px\] {
    font-size: 10.5px;
  }

  .lg\:text-\[11\.5px\] {
    font-size: 11.5px;
  }

  .lg\:text-\[12\.5px\] {
    font-size: 12.5px;
  }

  .lg\:text-\[12px\] {
    font-size: 12px;
  }

  .lg\:text-\[13\.5px\] {
    font-size: 13.5px;
  }

  .lg\:text-\[13px\] {
    font-size: 13px;
  }

  .lg\:text-\[14\.5px\] {
    font-size: 14.5px;
  }

  .lg\:text-\[14px\] {
    font-size: 14px;
  }

  .lg\:text-\[15\.5px\] {
    font-size: 15.5px;
  }

  .lg\:text-\[15px\] {
    font-size: 15px;
  }

  .lg\:text-\[16\.5px\] {
    font-size: 16.5px;
  }

  .lg\:text-\[16px\] {
    font-size: 16px;
  }

  .lg\:text-\[17px\] {
    font-size: 17px;
  }

  .lg\:text-\[18px\] {
    font-size: 18px;
  }

  .lg\:text-\[19px\] {
    font-size: 19px;
  }

  .lg\:text-\[20px\] {
    font-size: 20px;
  }

  .lg\:text-\[21px\] {
    font-size: 21px;
  }

  .lg\:text-\[22px\] {
    font-size: 22px;
  }

  .lg\:text-\[23px\] {
    font-size: 23px;
  }

  .lg\:text-\[24px\] {
    font-size: 24px;
  }

  .lg\:text-\[25px\] {
    font-size: 25px;
  }

  .lg\:text-\[26px\] {
    font-size: 26px;
  }

  .lg\:text-\[28px\] {
    font-size: 28px;
  }

  .lg\:text-\[30px\] {
    font-size: 30px;
  }

  .lg\:text-\[32px\] {
    font-size: 32px;
  }

  .lg\:text-\[34px\] {
    font-size: 34px;
  }

  .lg\:text-\[36px\] {
    font-size: 36px;
  }

  .lg\:text-\[38px\] {
    font-size: 38px;
  }

  .lg\:text-\[42px\] {
    font-size: 42px;
  }

  .lg\:text-\[44px\] {
    font-size: 44px;
  }

  .lg\:text-\[46px\] {
    font-size: 46px;
  }

  .lg\:text-\[48px\] {
    font-size: 48px;
  }

  .lg\:text-\[56px\] {
    font-size: 56px;
  }

  .lg\:text-\[72px\] {
    font-size: 72px;
  }

  .lg\:font-bold {
    font-weight: 700;
  }

  .lg\:font-extrabold {
    font-weight: 800;
  }

  .lg\:leading-\[1\.25\] {
    line-height: 1.25;
  }

  .lg\:leading-\[1\.2\] {
    line-height: 1.2;
  }

  .lg\:leading-\[1\.35\] {
    line-height: 1.35;
  }

  .lg\:leading-\[1\.3\] {
    line-height: 1.3;
  }

  .lg\:leading-\[1\.45\] {
    line-height: 1.45;
  }

  .lg\:text-\[\#3d5066\] {
    --tw-text-opacity: 1;
    color: rgb(61 80 102 / var(--tw-text-opacity, 1));
  }

  .lg\:shadow-\[0_-20px_60px_-10px_rgba\(18\2c 58\2c 92\2c 0\.38\)\] {
    --tw-shadow: 0 -20px 60px -10px rgba(18,58,92,0.38);
    --tw-shadow-colored: 0 -20px 60px -10px var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
  }

  .lg\:shadow-\[0_18px_40px_-20px_rgba\(18\2c 58\2c 92\2c 0\.55\)\] {
    --tw-shadow: 0 18px 40px -20px rgba(18,58,92,0.55);
    --tw-shadow-colored: 0 18px 40px -20px var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
  }

  .lg\:shadow-\[0_2px_10px_rgba\(18\2c 58\2c 92\2c 0\.06\)\] {
    --tw-shadow: 0 2px 10px rgba(18,58,92,0.06);
    --tw-shadow-colored: 0 2px 10px var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
  }

  .lg\:shadow-\[0_40px_110px_-24px_rgba\(15\2c 47\2c 75\2c 0\.6\)\2c 0_0_0_1px_rgba\(18\2c 58\2c 92\2c 0\.1\)\] {
    --tw-shadow: 0 40px 110px -24px rgba(15,47,75,0.6),0 0 0 1px rgba(18,58,92,0.1);
    --tw-shadow-colored: 0 40px 110px -24px var(--tw-shadow-color), 0 0 0 1px var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
  }

  .lg\:shadow-\[0_40px_110px_-24px_rgba\(15\2c 47\2c 75\2c 0\.6\)\] {
    --tw-shadow: 0 40px 110px -24px rgba(15,47,75,0.6);
    --tw-shadow-colored: 0 40px 110px -24px var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
  }

  .lg\:shadow-none {
    --tw-shadow: 0 0 #0000;
    --tw-shadow-colored: 0 0 #0000;
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
  }

  .lg\:first\:ps-0:first-child {
    padding-inline-start: 0px;
  }

  .lg\:hover\:border-shary-link:hover {
    --tw-border-opacity: 1;
    border-color: rgb(31 99 198 / var(--tw-border-opacity, 1));
  }

  .lg\:hover\:bg-shary-navy:hover {
    --tw-bg-opacity: 1;
    background-color: rgb(18 58 92 / var(--tw-bg-opacity, 1));
  }
}

@media (min-width: 1160px) {
  .min-\[1160px\]\:min-w-\[84px\] {
    min-width: 84px;
  }

  .min-\[1160px\]\:px-4 {
    padding-left: 1rem;
    padding-right: 1rem;
  }
}

@media (min-width: 1250px) {
  .min-\[1250px\]\:ms-8 {
    margin-inline-start: 2rem;
  }

  .min-\[1250px\]\:gap-4 {
    gap: 1rem;
  }
}

@media (min-width: 1280px) {
  .xl\:grid-cols-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.ltr\:left-4:where([dir="ltr"], [dir="ltr"] *) {
  left: 1rem;
}

.ltr\:rotate-180:where([dir="ltr"], [dir="ltr"] *) {
  --tw-rotate: 180deg;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.ltr\:grid-cols-\[auto_minmax\(0\2c 1fr\)\]:where([dir="ltr"], [dir="ltr"] *) {
  grid-template-columns: auto minmax(0,1fr);
}

.ltr\:flex-row-reverse:where([dir="ltr"], [dir="ltr"] *) {
  flex-direction: row-reverse;
}

.ltr\:items-start:where([dir="ltr"], [dir="ltr"] *) {
  align-items: flex-start;
}

.ltr\:pe-2:where([dir="ltr"], [dir="ltr"] *) {
  padding-inline-end: 0.5rem;
}

.ltr\:ps-3:where([dir="ltr"], [dir="ltr"] *) {
  padding-inline-start: 0.75rem;
}

.ltr\:ps-4:where([dir="ltr"], [dir="ltr"] *) {
  padding-inline-start: 1rem;
}

.rtl\:right-4:where([dir="rtl"], [dir="rtl"] *) {
  right: 1rem;
}

.rtl\:rotate-180:where([dir="rtl"], [dir="rtl"] *) {
  --tw-rotate: 180deg;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.rtl\:-scale-x-100:where([dir="rtl"], [dir="rtl"] *) {
  --tw-scale-x: -1;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.rtl\:flex-col-reverse:where([dir="rtl"], [dir="rtl"] *) {
  flex-direction: column-reverse;
}

.rtl\:items-end:where([dir="rtl"], [dir="rtl"] *) {
  align-items: flex-end;
}

.rtl\:divide-x-reverse:where([dir="rtl"], [dir="rtl"] *) > :not([hidden]) ~ :not([hidden]) {
  --tw-divide-x-reverse: 1;
}

.rtl\:text-right:where([dir="rtl"], [dir="rtl"] *) {
  text-align: right;
}

.\[\&\>li\+li\]\:border-s>li+li {
  border-inline-start-width: 1px;
}

.\[\&\>li\+li\]\:border-shary-line>li+li {
  --tw-border-opacity: 1;
  border-color: rgb(228 233 239 / var(--tw-border-opacity, 1));
}

.\[\&\>li\+li\]\:ps-1\.5>li+li {
  padding-inline-start: 0.375rem;
}

@media (min-width: 360px) {
  .min-\[360px\]\:\[\&\>li\+li\]\:ps-2>li+li {
    padding-inline-start: 0.5rem;
  }
}

@media (min-width: 400px) {
  .min-\[400px\]\:\[\&\>li\+li\]\:ps-3>li+li {
    padding-inline-start: 0.75rem;
  }
}

/* ── app.css · جزء 16 من 16: تعديلات مكتوبة بالإيد فوق الأدوات (أسماء الكروت ، الخريطة التفاعلية ، شيت التطبيق ، صفحات الخدمات ، لوجو المطور ، الفوتر …) — آخر الملف عشان تغلب (المصدر: resources/css/shary/app/16-overrides.css — عدّل هنا وشغّل tools/minify-assets.sh) */
/* الأسماء كاملة من غير نقط (…): "المطور - المشروع" في صفحة المشروع ، اسم الوحدة ، المكان ، الشريط الثابت ، أسماء المراحل والفرص —
   لو الاسم طويل بينزل سطر تاني بنفس الخط (من غير تصغير ولا تكبير) */
.prop-bar .prop-bar__head h1,
.prop-bar .prop-bar__head > p > span,
.prop-bar--project .prop-bar__head > p > span,
.prop-bar__mini-text b,
.prop-bar__mini-text small,
.prop-shot__name a,
.opp-sticky__head b,
.opp-sticky__head small span {
  overflow: visible;
  text-overflow: clip;
  white-space: normal;
  overflow-wrap: anywhere;
}
.prop-bar__mini-text b {
  line-height: 1.3;
}

/* ---- صفحة "المشاريع الجديدة" (عرض الكل): نفس كتابة كروت "أحدث المشاريع" في الرئيسية —
       "اسم المشروع – المطور" سطر واحد على الصورة (الخط بيصغر لوحده لو طويل — من غير نقط) وتحته المكان ، مبدوءة من ناحية البداية ، وظل ناعم ورا الكلام بس */
.shot-card--launch .shot-card__text.new-project-caption { inset-inline: 10px; bottom: 10px; padding: 0; text-align: start; text-shadow: none; }
.shot-card--launch .shot-card__text.new-project-caption::before { display: none; }
.shot-card--launch .new-project-caption__inner { position: relative; isolation: isolate; display: inline-block; max-width: 100%; padding: 6px 10px; }
.shot-card--launch .new-project-caption__inner::before { content: ""; position: absolute; inset: 2px 0 4px; z-index: -1; border-radius: 999px; background-color: rgba(4, 31, 56, .44); filter: blur(14px); opacity: 0; transition: opacity .25s ease; pointer-events: none; }
.shot-card--launch:hover .new-project-caption__inner::before, .shot-card--launch:focus-within .new-project-caption__inner::before { opacity: 1; }
@media (hover: none), (max-width: 1023px) { .shot-card--launch .new-project-caption__inner::before { opacity: .85; } }
.shot-card--launch .new-project-caption__name { margin: 0; font-size: 17px; line-height: 1.4; font-weight: 800; color: #fff; white-space: nowrap; max-width: 100%; text-shadow: 0 1px 2px rgba(4, 31, 56, .85), 0 0 12px rgba(4, 31, 56, .6); }
.shot-card--launch .new-project-caption__name span { font-weight: 700; color: rgba(255, 255, 255, .92); }
.shot-card--launch .new-project-caption__name a { color: inherit; }
.shot-card--launch .new-project-caption__place { margin: 4px 0 0; display: flex; align-items: center; gap: 6px; font-size: 13.5px; line-height: 1.5; font-weight: 700; color: rgba(255, 255, 255, .95); text-shadow: 0 1px 2px rgba(4, 31, 56, .85), 0 0 12px rgba(4, 31, 56, .6); }
.shot-card--launch .new-project-caption__place svg { flex: 0 0 auto; }
@media (max-width: 640px) { .shot-card--launch .new-project-caption__name { font-size: 15px; } .shot-card--launch .new-project-caption__place { font-size: 12.5px; } }

/* المشروع اللي الماستر بلان بتاعته ظاهرة: العلامة بتبقى اسم صغير شفاف فوق المخطط (من غير السهم) — الماستر بلان هي اللي باينة مش النقط ،
   ولما العميل يقرّب أكتر (is-close) العلامة بتختفي خالص */
.smap:not(.is-globe) .smap__marker.has-plan { background-color: rgba(30, 65, 102, .74); border-color: rgba(255, 255, 255, .85); padding: 2px 8px 3px; font-size: 10.5px; box-shadow: 0 4px 10px -4px rgba(13, 32, 51, .6); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.smap:not(.is-globe) .smap__marker.has-plan::after { display: none; }
.smap:not(.is-globe) .smap__marker.has-plan.is-on { background-color: rgba(31, 154, 139, .9); }

/* الكتابة فوق الماستر بلان على الخريطة التفاعلية (js/shary/masterplans.js — من لوحة التحكم): بتظهر مع التقريب بس (.mp-labels-on) */
.mp-label { display: none; pointer-events: none; white-space: nowrap; font-family: inherit; font-weight: 800; line-height: 1.3; border-radius: 999px; padding: 3px 10px; font-size: 12px; color: #123a5c; background: rgba(255, 255, 255, .92); box-shadow: 0 2px 8px -2px rgba(13, 32, 51, .45); }
.mp-labels-on .mp-label { display: block; }
.mp-label--project { font-size: 14px; padding: 4px 12px; color: #fff; background: rgba(18, 58, 92, .9); }
.mp-label--phase { font-size: 12.5px; }
.mp-label--building { font-size: 11px; padding: 2px 8px; color: #fff; background: rgba(31, 154, 139, .92); }
.mp-label--unit { font-size: 10.5px; padding: 2px 7px; color: #123a5c; background: #ffe7a3; }

/* مستطيل الخريطة: صورة القمر الصناعي للمكان (بدل خرائط جوجل) — مالية المستطيل ، والضغط بيفتح خريطة شاري التفاعلية */
img.area-map__frame { object-fit: cover; top: 0 !important; height: 100% !important; pointer-events: none; }

/* المشروع ليه اسم مكتوب على الماستر بلان من لوحة التحكم: علامة الاسم بتختفي لما الكتابة تظهر (من غير تكرار) */
.mp-labels-on .smap__marker.has-plan.has-name:not(.is-on) { opacity: 0; pointer-events: none; }
.mp-labels-on .smap__marker.has-plan.has-name.is-on { opacity: 0; }

/* مستويات الزوم: المشروع والمراحل (13.5) ← العماير (15) ← الوحدات (16.5) */
.mp-labels-on:not(.mp-buildings-on) .mp-label--building { display: none; }
.mp-labels-on:not(.mp-units-on) .mp-label--unit { display: none; }
.mp-label.has-units, .mp-label.has-unit { pointer-events: auto; cursor: pointer; border: 0; display: none; align-items: center; gap: 6px; }
.mp-buildings-on .mp-label--building.has-units { display: inline-flex; }
.mp-units-on .mp-label--unit.has-unit { display: inline-flex; }
.mp-label.has-units { font-size: 12.5px; padding: 4px 6px 4px 12px; box-shadow: 0 4px 12px -4px rgba(13, 32, 51, .6); }
.mp-label.has-units:hover { background: #157a6e; }
.mp-label__count { min-width: 20px; height: 20px; border-radius: 999px; background: #fff; color: #157a6e; font-size: 11.5px; font-weight: 800; display: inline-flex; align-items: center; justify-content: center; padding: 0 5px; }

/* لوحات الفلاتر والاختيارات: من غير أي ظل أو تغميق ورا اللوحة (لا على الصفحة ولا حوالين اللوحة) — حد رفيع بس عشان تبان */
[data-filter-sheet] > .area-sheet,
[data-filter-sheet] > .meeting-panel,
[data-filter-sheet] > .absolute.inset-0 + *,
[data-index-advanced] > .area-sheet,
[data-index-advanced] > .meeting-panel,
[data-index-advanced] > .absolute.inset-0 + *,
[data-index-picker] > .meeting-panel,
[data-index-picker] > .absolute.inset-0 + * {
    box-shadow: none !important;
    border: 1px solid #c6d6ea !important;
}
[data-filter-sheet] > .area-sheet:not(.inset-0) { border-bottom-width: 0 !important; }

.smap__map::before {
    inset: 0 !important;
    filter: none !important;
    background-image: radial-gradient(2.2px 2.2px at 289px 163px, rgba(255, 244, 225, 0.91), transparent 70%),
        radial-gradient(1.9px 1.9px at 316px 335px, rgba(255, 244, 225, 0.72), transparent 70%),
        radial-gradient(1.6px 1.6px at 408px 286px, rgba(255, 255, 255, 0.82), transparent 70%),
        radial-gradient(1.6px 1.6px at 246px 324px, rgba(255, 255, 255, 0.76), transparent 70%),
        radial-gradient(1.3px 1.3px at 225px 83px, rgba(255, 255, 255, 0.88), transparent 70%),
        radial-gradient(1.4px 1.4px at 0px 290px, rgba(210, 228, 255, 0.73), transparent 70%),
        radial-gradient(1.3px 1.3px at 314px 13px, rgba(210, 228, 255, 0.76), transparent 70%),
        radial-gradient(1.5px 1.5px at 76px 324px, rgba(210, 228, 255, 0.8), transparent 70%),
        radial-gradient(1.3px 1.3px at 242px 62px, rgba(210, 228, 255, 0.85), transparent 70%),
        radial-gradient(1.5px 1.5px at 245px 247px, rgba(255, 244, 225, 0.74), transparent 70%),
        radial-gradient(1.5px 1.5px at 175px 379px, rgba(255, 255, 255, 0.95), transparent 70%),
        radial-gradient(1.4px 1.4px at 264px 11px, rgba(210, 228, 255, 0.99), transparent 70%) !important;
    background-size: 410px 410px !important;
    animation: smap-twinkle 4.5s ease-in-out infinite alternate;
}
@keyframes smap-twinkle { from { opacity: .3; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .smap__map::before { animation: none; opacity: .8; } }
.smap.is-roadmap .smap__map { background-color: #03060f; }

/* الفضا: canvas النجوم (js/shary/map-page.js — drawSpace) ورا الكرة ، والخلفية سودا */
.smap__map { background: #000 !important; }
.smap__stars { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; }
.smap__map::before { z-index: 0 !important; }

/* أسامي الكروت: من غير قص ولا نقط "…" أبدًا — الخط بيصغر لحد ما الاسم يدخل (js/shary/site-chrome.js) ولو لسه طويل بينزل سطر تاني */
[data-fit-line], .shary-card__name, .prop-shot__name a, .shot-card__name, .abroad-dev b, .content-card__body b, .ad-card__title { text-overflow: clip !important; }
[data-fit-line].fit-wrap, .shary-card__name.fit-wrap, .prop-shot__name a.fit-wrap, .shot-card__name.fit-wrap, .abroad-dev b.fit-wrap, .content-card__body b.fit-wrap, .ad-card__title.fit-wrap { white-space: normal !important; overflow: visible !important; -webkit-line-clamp: unset !important; display: block; }

/* ---- شيت "شوف شاري في..." (موبايل) زي Zillow: بيطلع من تحت — صف التطبيق (حمل / افتح التطبيق) وصف المتصفح (كمّل) */
.app-pop.app-sheet { align-items: flex-end; padding: 0; }
.app-sheet__panel { position: relative; width: 100%; background: #fff; border-radius: 26px 26px 0 0; padding: 10px 22px calc(22px + env(safe-area-inset-bottom)); box-shadow: 0 -10px 30px rgba(10, 26, 42, .18); transform: translateY(105%); transition: transform .38s cubic-bezier(.2, .8, .2, 1); }
.app-pop.is-open .app-sheet__panel { transform: translateY(0); }
.app-sheet__grip { display: block; width: 44px; height: 5px; margin: 0 auto 14px; border-radius: 99px; background: #d6dde5; }
.app-sheet__title { margin: 0 0 6px; padding-bottom: 14px; border-bottom: 1px solid #e4eaef; text-align: center; font-size: 20px; font-weight: 800; color: #1E4266; }
.app-sheet__row { display: flex; align-items: center; gap: 14px; padding: 14px 0; }
.app-sheet__logo { flex: none; width: 50px; height: 50px; border-radius: 14px; background: #fff; border: 1px solid #e4eaef; display: flex; align-items: center; justify-content: center; }
.app-sheet__logo--browser { background: #eef3f8; border-color: #eef3f8; color: #1E4266; }
.app-sheet__name { flex: 1; min-width: 0; font-size: 17px; font-weight: 800; color: #1E4266; }
.app-sheet__btn { flex: none; min-width: 132px; display: inline-flex; align-items: center; justify-content: center; padding: 11px 18px; border-radius: 999px; font-size: 15px; font-weight: 800; color: #1E4266; background: #fff; border: 1.5px solid #c9d5e2; text-decoration: none; cursor: pointer; font-family: inherit; transition: background-color .15s ease, transform .15s ease; }
.app-sheet__btn:active { transform: scale(.96); background: #eef3f8; }
.app-sheet__btn--main { background: #1E4266; border-color: #1E4266; color: #fff; }
.app-sheet__btn--main:hover, .app-sheet__btn--main:active { background: #163352; color: #fff; }
.app-sheet__btn--main[data-state="open"] { background: #4CBFB2; border-color: #4CBFB2; }

/* شيت التطبيق: كلام الزراير ("حمل التطبيق" / "افتح التطبيق" / "كمّل") بولد وأوضح */
.app-sheet__btn, .app-sheet__btn [data-app-label] { font-weight: 800 !important; font-size: 16px; letter-spacing: 0; }
.app-sheet__name { font-weight: 800; }

/* ---- رسايل النجاح (طلب ميتنج ، فورم اتبعت ، تم النسخ …): بوب أب أخضر من فوق زي الموقع الحالي — بأيقونة ✓ ، وبتنزل من فوق بنعومة.
   رسايل الخطأ (data-type="error") أحمر بنفس الشكل */
.shary-toast {
  top: calc(14px + env(safe-area-inset-top, 0px)); bottom: auto; left: 50%;
  z-index: 200 !important;
  width: max-content; max-width: min(520px, calc(calc(100vw / var(--z, 1)) - 24px));
  display: flex; align-items: center; gap: 12px;
  transform: translate(-50%, -24px);
  border-radius: 18px; background-color: #22c55e;
  padding: 14px 18px 14px 20px;
  font-size: 15.5px; font-weight: 800; line-height: 1.5; color: #fff;
  box-shadow: 0 14px 34px -12px rgba(16, 101, 52, .55);
  transition: opacity .25s ease, transform .35s cubic-bezier(.2, .8, .2, 1);
}
.shary-toast::before {
  content: ""; flex: none; width: 28px; height: 28px; border-radius: 50%;
  background: rgba(255, 255, 255, .22) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 12.5 4 4 8-9'/%3E%3C/svg%3E") center / 16px no-repeat;
}
.shary-toast.is-shown { transform: translate(-50%, 0); }
.shary-toast[data-type="error"] { background-color: #e5484d; box-shadow: 0 14px 34px -12px rgba(160, 30, 40, .5); }
.shary-toast[data-type="error"]::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M12 7v6M12 17h.01'/%3E%3C/svg%3E"); }
@media (min-width: 1024px) { .shary-toast { top: 24px; font-size: 16px; } }

/* ---- صفحتي «بيع عقارك» و«أجّر عقارك»: نفس لون زرارهم في كارت الهوم — بيع تركواز اللوجو ، أجّر أصفر اللوجو
   (الزرار المختار في التبديل ، دواير الخطوات ، زرار «التالي / إرسال» ، أيقونة البانر وكلمة «الآن») */
[data-request-page="sell"] { --req-accent: #4CBFB2; --req-accent-dark: #3aa89b; --req-on: #ffffff; }
[data-request-page="rent"] { --req-accent: #FCB424; --req-accent-dark: #e9a312; --req-on: #1E4266; }
[data-request-page] .req-switch[aria-current="page"] { background-color: var(--req-accent); color: var(--req-on); box-shadow: 0 6px 14px -8px var(--req-accent); }
[data-request-page] .req-steps li[data-state="current"] .req-steps__dot { border-color: var(--req-accent); background-color: var(--req-accent); color: var(--req-on); }
[data-request-page] .req-steps li[data-state="done"] .req-steps__dot { border-color: var(--req-accent); background-color: var(--req-accent); color: var(--req-on); }
[data-request-page] .req-steps li[data-state="done"]:not(:last-child)::after { background-color: var(--req-accent); }
[data-request-page] .req-button:not(.req-button--ghost) { border-color: var(--req-accent); background-color: var(--req-accent); color: var(--req-on); }
[data-request-page] .req-button:not(.req-button--ghost):hover { background-color: var(--req-accent-dark); border-color: var(--req-accent-dark); }
[data-request-page] .req-button--ghost { border-color: var(--req-accent); color: #1E4266; }
[data-request-page] .req-banner__icon { color: var(--req-accent-dark); }
[data-request-page="rent"] .req-banner h1 span { color: #e9a312 !important; }

/* ---- جزء مالوش بيانات في لوحة التحكم (partials/dash-box — data-empty-part): القسم كله بيختفي بعنوانه — من غير شرطة "—" */
[data-empty-part] { display: none !important; }
section:has(> [data-empty-part]), section:has(> div > [data-empty-part]:only-child) { display: none !important; }

/* ---- صفحة المشروع: «سعر المطور» باين أكتر — العنوان كحلي بولد والرقم أكبر بلون تركواز اللوجو */
.prop-prices > div dt { font-size: 13.5px; font-weight: 800; color: #1E4266; }
.prop-prices > div dd b { font-size: 22px; font-weight: 800; color: #1E4266; }
@media (max-width: 1023px) { .prop-prices > div { background: linear-gradient(180deg, rgba(76, 191, 178, .12), rgba(76, 191, 178, 0)); } .prop-prices > div:first-child { border-start-start-radius: 16px; border-end-start-radius: 16px; } .prop-prices > div:last-child { border-start-end-radius: 16px; border-end-end-radius: 16px; } }
.prop-prices > div dd span { font-weight: 800; color: #3aa89b; }
.prop-prices > div dd small { font-size: 14px; font-weight: 800; color: #1E4266; }
@media (min-width: 1024px) {
  .prop-prices > div dt { font-size: 15px; }
  .prop-prices > div dd b { font-size: 28px; }
}

/* شيت التطبيق: «تطبيق شاري» سطر واحد دايمًا (الزرار أصغر شوية على الموبايلات الضيقة) */
.app-sheet__name { white-space: nowrap; overflow: visible; }
.app-sheet__btn { min-width: 0; width: 132px; padding-inline: 10px; }
@media (max-width: 380px) { .app-sheet__btn { font-size: 14.5px; width: 118px; padding-inline: 8px; } .app-sheet__name { font-size: 15.5px; } .app-sheet__row { gap: 10px; } }

/* خصم خطة السداد + شارة «عرض» (صفحة المشروع والوحدة) */
.prop-plan__discount{display:inline-flex;align-items:center;padding:2px 10px;border-radius:999px;background:#fff1e6;color:#c2410c;font-size:12.5px;font-weight:800;line-height:1.6;white-space:nowrap}
.prop-plan__offer{display:inline-flex;align-items:center;padding:2px 10px;border-radius:999px;background:#FCB424;color:#1E4266;font-size:12px;font-weight:800;line-height:1.6;white-space:nowrap}
.offer-card .prop-plan__discount{margin-top:4px;align-self:flex-start}

/* تركواز اللوجو: شارة «مشروع جديد» و«جاهز للاستلام» على الكروت */
.bg-\[\#4CBFB2\]{background-color:#4CBFB2}

/* كارت الوحدة: المكان على الصورة بالأبيض من غير خلفية (ظل خفيف بس علشان يتقري على أي صورة) */
.unit-card__place{text-shadow:0 1px 3px rgba(0,0,0,.75),0 0 10px rgba(0,0,0,.35)}
.unit-card__place svg{filter:drop-shadow(0 1px 2px rgba(0,0,0,.7))}

.pt-2\.5{padding-top:.625rem}

/* كارت الوحدة: مقاسات الخط مريحة للعين زي الكروت القديمة (القسط فوق السعر بولد وواضح ، الغرف / الحمامات / المساحة ، العملة) */
.area-card .unit-card__inst{font-size:14px;font-weight:800;color:#333A40;line-height:1.5}
.area-card .unit-card__price{font-size:22px;font-weight:800}
.area-card .unit-card__price > span:nth-child(2){font-size:14px;font-weight:700;color:#333A40}
.area-card .unit-card__price > span:nth-child(3){font-size:13px;font-weight:700}
.area-card .unit-specs{font-size:13px;font-weight:600;color:#3F474D}
.area-card .unit-specs b{font-size:16px}
@media (min-width:1024px){
  .area-card .unit-card__inst{font-size:15px}
  .area-card .unit-card__price{font-size:24px}
  .area-card .unit-card__price > span:nth-child(2){font-size:15px}
  .area-card .unit-card__price > span:nth-child(3){font-size:14px}
  .area-card .unit-specs{font-size:14px}
  .area-card .unit-specs b{font-size:17px}
}
/* الغرف / الحمامات / المساحة: ما يتقصّوش أبدًا — لو المكان ضيق بينزلوا سطر */
.area-card .unit-specs{flex-wrap:wrap;overflow:visible;white-space:nowrap;row-gap:4px;font-size:12.5px}
.area-card .unit-specs b{font-size:15px}
.shary-home-root .area-card .unit-card__inst,body .area-card small.unit-card__inst{font-size:14px;font-weight:800;color:#333A40}
@media (min-width:1024px){.shary-home-root .area-card .unit-card__inst,body .area-card small.unit-card__inst{font-size:15px}.area-card .unit-specs{font-size:14px}.area-card .unit-specs b{font-size:17px}}

/* الغرف / الحمامات / المساحة في سطر واحد (كلام مختصر: غرف / حمام) */
.area-card .unit-specs{flex-wrap:nowrap;overflow:visible;font-size:13px}
.area-card .unit-specs b{font-size:16px}
@media (min-width:1024px){.area-card .unit-specs{font-size:14px}.area-card .unit-specs b{font-size:17px}}

/* كارت الوحدة: لوجو المطور على الطرف التاني (شمال بالعربي) بمقاس 64 */
.unit-card__head > :first-child{order:2;flex:0 0 auto}

/* ===== صفحات خدمات التطبيق (shary/app-feature/show.blade.php): شاري معاك ، الأكاديمية ، المساعد القانوني ، احجز مع المطور ===== */
.afp{color:#1E4266}
.afp-wrap{max-width:1240px;margin:0 auto;padding:0 16px}
@media (min-width:1024px){.afp-wrap{padding:0 32px}}
.afp-hero{background:linear-gradient(180deg,#EAF7F5 0%,#fff 100%);padding:14px 0 34px}
.afp-hero__grid{display:grid;gap:26px;align-items:center}
@media (min-width:1024px){.afp-hero{padding:22px 0 56px}.afp-hero__grid{grid-template-columns:1.15fr .85fr;gap:48px}}
.afp-badge{display:inline-block;margin-top:14px;padding:5px 14px;border-radius:999px;background:#4CBFB2;color:#fff;font-size:13.5px;font-weight:800}
.afp-title{margin:12px 0 0;font-size:34px;line-height:1.3;font-weight:900;color:#1E4266}
@media (min-width:1024px){.afp-title{font-size:48px}}
.afp-intro{margin:12px 0 0;font-size:17px;line-height:1.85;font-weight:700;color:#3F4F60;max-width:640px}
@media (min-width:1024px){.afp-intro{font-size:19px}}
.afp-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px;align-items:center}
.afp-btn{display:inline-flex;align-items:center;justify-content:center;height:52px;padding:0 26px;border-radius:14px;font-size:17px;font-weight:900;text-decoration:none}
.afp-btn--main{background:#1E4266;color:#fff;box-shadow:0 12px 26px -12px rgba(30,66,102,.6)}
.afp-btn--main:hover{background:#163552;color:#fff}
.afp-btn--light{background:#FCB424;color:#1E4266}
.afp-store{display:inline-flex;align-items:center;gap:8px;height:52px;padding:0 18px;border-radius:14px;border:1.5px solid #1E4266;color:#1E4266;font-size:15px;font-weight:800;text-decoration:none;background:#fff}
.afp-store--dark{background:transparent;border-color:rgba(255,255,255,.7);color:#fff}
.afp-hint{margin-top:12px;font-size:14px;font-weight:700;color:#6B7A8C}
.afp-art{position:relative;margin:0 auto;max-width:360px;border-radius:28px;padding:28px 24px;background:linear-gradient(150deg,#1E4266 0%,#1F6F79 60%,#4CBFB2 100%);color:#fff;box-shadow:0 28px 60px -26px rgba(30,66,102,.65)}
.afp-art__icon{display:flex;width:96px;height:96px;border-radius:26px;background:rgba(255,255,255,.14);align-items:center;justify-content:center;color:#FCB424}
.afp-art b{display:block;margin-top:16px;font-size:24px;font-weight:900}
.afp-art small{display:block;font-size:13px;font-weight:700;opacity:.8}
.afp-art ul{list-style:none;margin:18px 0 0;padding:0;display:grid;gap:10px}
.afp-art li{display:flex;align-items:center;gap:10px;background:rgba(255,255,255,.12);border-radius:14px;padding:10px 12px;font-size:15px;font-weight:800}
.afp-art li i{display:flex;width:32px;height:32px;border-radius:10px;background:#fff;color:#1F7F72;align-items:center;justify-content:center}
.afp-section{margin-top:40px}
.afp-section--last{margin-bottom:48px}
.afp-h2{margin:0 0 16px;font-size:24px;font-weight:900;color:#1E4266}
@media (min-width:1024px){.afp-h2{font-size:30px}}
.afp-features{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
@media (min-width:1024px){.afp-features{grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}}
.afp-feature{border:1.5px solid #D5EEEB;border-radius:18px;padding:18px 16px;background:#fff}
.afp-feature__icon{display:flex;width:48px;height:48px;border-radius:14px;background:#EAF7F5;color:#1F7F72;align-items:center;justify-content:center}
.afp-feature h3{margin:14px 0 0;font-size:17px;font-weight:900;color:#1E4266}
.afp-feature p{margin:6px 0 0;font-size:14.5px;line-height:1.75;font-weight:700;color:#5B6B7C}
.afp-steps{list-style:none;margin:0;padding:0;display:grid;gap:12px}
@media (min-width:1024px){.afp-steps{grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}}
.afp-steps li{display:flex;gap:14px;align-items:flex-start;background:#F4F7FB;border-radius:18px;padding:18px}
.afp-steps li > b{flex:none;display:flex;width:40px;height:40px;border-radius:50%;background:#1E4266;color:#fff;align-items:center;justify-content:center;font-size:18px;font-weight:900}
.afp-steps h3{margin:0;font-size:17px;font-weight:900}
.afp-steps p{margin:4px 0 0;font-size:14.5px;line-height:1.7;font-weight:700;color:#5B6B7C}
.afp-faq{display:grid;gap:10px}
.afp-faq details{border:1.5px solid #E4E9EF;border-radius:16px;padding:14px 18px;background:#fff}
.afp-faq summary{cursor:pointer;font-size:16.5px;font-weight:900;color:#1E4266}
.afp-faq p{margin:8px 0 0;font-size:15px;line-height:1.8;font-weight:700;color:#4B5B6B}
.afp-cta{display:flex;flex-direction:column;gap:6px;border-radius:22px;padding:26px 22px;background:#1E4266;color:#fff}
.afp-cta h2{margin:0;font-size:24px;font-weight:900;color:#fff}
.afp-cta p{margin:6px 0 0;font-size:16px;font-weight:700;color:rgba(255,255,255,.85)}
@media (min-width:1024px){.afp-cta{flex-direction:row;align-items:center;justify-content:space-between;padding:32px 36px}.afp-cta .afp-actions{margin-top:0}.afp-cta h2{font-size:28px}}
.afp-others{display:grid;gap:12px}
@media (min-width:768px){.afp-others{grid-template-columns:repeat(3,minmax(0,1fr))}}
.afp-other{display:block;border:1.5px solid #D5EEEB;border-radius:16px;padding:16px 18px;text-decoration:none;background:#fff}
.afp-other b{display:block;font-size:17px;font-weight:900;color:#1E4266}
.afp-other span{display:block;margin-top:4px;font-size:14px;font-weight:800;color:#1F7F72}
.afp-other:hover{border-color:#4CBFB2}
@media (max-width:767px){.afp-actions .afp-btn{flex:1 1 100%}.afp-actions .afp-store{flex:1 1 calc(50% - 5px);justify-content:center}}

.afp-shot{display:block;margin:0 auto;max-width:100%;max-height:460px;border-radius:24px;box-shadow:0 24px 50px -24px rgba(30,66,102,.5)}

/* صفحات خدمات التطبيق — تطوير: لوجو شاري مكان الكلمة ، أزرار المتاجر الحقيقية ، المزايا الصغيرة ، الشريط الفاتح */
.afp-logo{display:inline-block;height:.78em;width:auto;vertical-align:-.04em;margin:0 .08em}
.afp-stores{display:flex;flex-wrap:wrap;gap:10px}
.afp-store{display:inline-flex;align-items:center;gap:10px;height:52px;min-width:154px;padding:0 14px 0 12px;border-radius:12px;border:1.5px solid #1E4266;background:#fff;color:#1E4266;text-decoration:none;transition:transform .2s ease,box-shadow .2s ease}
.afp-store:hover{transform:translateY(-2px);box-shadow:0 10px 20px -12px rgba(14,34,56,.5);color:#1E4266}
.afp-store svg{width:24px;height:24px;flex:none}
.afp-store small{display:block;font-size:9.5px;font-weight:600;letter-spacing:.4px;text-transform:uppercase;line-height:1}
.afp-store b{display:block;font-size:18px;font-weight:700;line-height:1.15}
.afp-store--dark{background:#fff;border-color:#fff;color:#1E4266}
.afp-btn{gap:8px}
.afp-perks{list-style:none;margin:16px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:8px 18px}
.afp-perks li{display:flex;align-items:center;gap:6px;font-size:14.5px;font-weight:800;color:#1E4266}
.afp-perks svg{color:#4CBFB2}
.afp-site{margin-top:14px;font-size:15px;font-weight:700;color:#5B6B7C}
.afp-site a{font-weight:900;color:#1F7F72;text-decoration:underline;text-underline-offset:4px}
.afp-hint{display:none}
.afp-art__logo{display:block;height:22px;width:auto;margin-bottom:18px;opacity:.95}
.afp-art b .afp-logo{height:.8em}
.afp-band{margin-top:44px;background:#F4F7FB;padding:34px 0}
.afp-band .afp-steps li{background:#fff;border:1px solid #E4E9EF}
@media (min-width:1024px){
  .afp-steps{position:relative}
  .afp-band .afp-steps li{position:relative}
}
.afp-faq details{transition:border-color .2s}
.afp-faq details[open]{border-color:#4CBFB2}
.afp-faq summary{list-style:none;display:flex;justify-content:space-between;gap:12px;align-items:center}
.afp-faq summary::-webkit-details-marker{display:none}
.afp-faq summary::after{content:"+";flex:none;display:flex;width:28px;height:28px;border-radius:50%;background:#EAF7F5;color:#1F7F72;align-items:center;justify-content:center;font-size:20px;font-weight:900}
.afp-faq details[open] summary::after{content:"–"}
.afp-cta{background:linear-gradient(120deg,#1E4266 0%,#1F5A6E 100%)}
.afp-cta__copy{display:flex;gap:16px;align-items:center}
.afp-cta__mark{flex:none;width:54px;height:54px;background:#fff;border-radius:16px;padding:8px}
.afp-cta .afp-actions{margin-top:14px}
.afp-cta .afp-store{border-color:#fff}
.afp-other{position:relative;padding-inline-end:44px}
.afp-other i{position:absolute;inset-inline-end:16px;top:50%;transform:translateY(-50%);font-style:normal;font-size:20px;font-weight:900;color:#4CBFB2}
@media (max-width:767px){
  .afp-actions .afp-btn{flex:1 1 100%}
  .afp-stores{width:100%}
  .afp-stores .afp-store{flex:1 1 calc(50% - 5px);min-width:0;justify-content:center;padding:0 10px}
  .afp-store b{font-size:16px}
  .afp-cta__copy{align-items:flex-start}
  .afp-cta__mark{width:46px;height:46px}
}

.afp-body{max-width:900px}
.afp-gallery{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
@media (min-width:1024px){.afp-gallery{grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}}
.afp-gallery img{display:block;width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:16px}
.afp-videos{display:grid;gap:14px}
@media (min-width:1024px){.afp-videos{grid-template-columns:repeat(2,minmax(0,1fr))}}
.afp-video{display:inline-flex;align-items:center;gap:10px;margin-top:16px;padding:8px 16px 8px 8px;border-radius:999px;background:#fff;border:1.5px solid #E3E8F0;font-size:15px;font-weight:800;color:#1E4266;text-decoration:none;transition:border-color .2s}.afp-video:hover{border-color:#FF0033}[dir=rtl] .afp-video{padding:8px 8px 8px 16px}.afp-video__icon{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:50%;background:#FF0033;color:#fff}.afp-video__icon svg{margin-inline-start:2px}
/* صفحات الخدمات: الخلفية بيضا */
.afp-hero{background:#fff}
.afp-band{background:#fff;border-top:1.5px solid #EEF2F6;border-bottom:1.5px solid #EEF2F6}
/* كارت لوجو المطور (أي مكان): شادو أبيض حواليه + ضل ناعم تحته — يبان مجسم ، وبيزيد مع الحركة على الماوس */
.dev-logo-link>img,.dev-logo-link>span,.dev-icon__logo{box-shadow:0 0 0 4px #fff,0 0 18px 6px rgba(255,255,255,.95),0 10px 24px -10px rgba(18,58,92,.45);transition:transform .2s,box-shadow .2s}
a.dev-logo-link:hover>img,a.dev-logo-link:hover>span,.dev-icon__logo:hover{box-shadow:0 0 0 4px #fff,0 0 24px 8px rgba(255,255,255,1),0 16px 30px -12px rgba(18,58,92,.55)}

/* ===== صفحات الخدمات — التصميم المعتمد: تركواز + أصفر ، كحلي للكلام (ترتيب الألوان: أبيض ← تركواز فاتح ← أبيض ← أصفر فاتح ← كحلي) ===== */
.afp-art{background:linear-gradient(150deg,#5CCBBE 0%,#4CBFB2 55%,#36A99C 100%);box-shadow:0 28px 60px -26px rgba(76,191,178,.75)}
.afp-art__brand{display:inline-flex;align-items:center;background:#fff;border-radius:999px;padding:7px 14px;margin-bottom:18px;box-shadow:0 8px 18px -10px rgba(30,66,102,.35)}
.afp-art__brand .afp-art__logo{margin:0;height:22px;opacity:1}
.afp-art__icon{background:rgba(255,255,255,.22)}
.afp-art li{background:rgba(255,255,255,.18)}
.afp-h2{position:relative;padding-bottom:12px;margin-bottom:22px}
.afp-h2::after{content:'';position:absolute;bottom:0;inset-inline-start:0;width:46px;height:5px;border-radius:99px;background:#FCB424}
.afp-h2--center{text-align:center}
.afp-h2--center::after{inset-inline-start:50%;transform:translateX(-50%)}
[dir=rtl] .afp-h2--center::after{transform:translateX(50%)}
.afp-values{margin-top:36px;padding:38px 0;background:linear-gradient(180deg,#EFFAF8 0%,#F7FCFB 100%)}
.afp-values__grid{display:grid;gap:14px}
.afp-value{background:#fff;border-radius:22px;padding:22px 20px;text-align:center;box-shadow:0 14px 34px -24px rgba(30,66,102,.45);transition:transform .2s,box-shadow .2s}
.afp-value:hover{transform:translateY(-4px);box-shadow:0 20px 40px -24px rgba(30,66,102,.55)}
.afp-value__icon{display:inline-flex;width:62px;height:62px;border-radius:20px;background:#4CBFB2;color:#fff;align-items:center;justify-content:center;box-shadow:0 10px 22px -12px rgba(76,191,178,.9)}
.afp-value h3{margin:14px 0 0;font-size:19px;font-weight:900;color:#1E4266}
.afp-value p{margin:6px 0 0;font-size:15px;line-height:1.8;font-weight:700;color:#4B5B6B}
.afp-feature{transition:transform .2s,box-shadow .2s,border-color .2s}
.afp-feature:hover{transform:translateY(-3px);border-color:#4CBFB2;box-shadow:0 16px 30px -22px rgba(30,66,102,.5)}
.afp-feature__icon{background:#EAF7F5;color:#1F7F72;position:relative}
.afp-feature__icon::after{content:'';position:absolute;top:-3px;inset-inline-end:-3px;width:10px;height:10px;border-radius:50%;background:#FCB424;border:2px solid #fff}
.afp-splits{display:grid;gap:22px}
.afp-split{display:grid;gap:18px;align-items:center;border:1.5px solid #E4F2F0;border-radius:24px;padding:20px;background:#fff}
.afp-split__copy h3{margin:0;font-size:22px;font-weight:900;color:#1E4266}
.afp-split__copy p{margin:8px 0 0;font-size:16px;line-height:1.95;font-weight:700;color:#3F4F60}
.afp-split__pic img{display:block;width:100%;aspect-ratio:16/10;object-fit:cover;border-radius:18px}
.afp-band--warm{background:#FFF8E8;border:0}
.afp-band--warm .afp-steps li{background:#fff;border:1.5px solid #FBE7B5}
.afp-band--warm .afp-steps li>b{background:#FCB424;color:#1E4266}
.afp-cta .afp-btn--light{box-shadow:0 12px 26px -12px rgba(252,180,36,.7)}
@media(min-width:768px){.afp-values__grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}.afp-split{grid-template-columns:1.1fr 1fr;padding:28px;gap:32px}.afp-split.is-flip .afp-split__copy{order:2}.afp-split.is-text{grid-template-columns:1fr}}
@media(min-width:1024px){.afp-values{padding:54px 0;margin-top:44px}}
.afp-art__icon{background:rgba(18,58,92,.2)}
.afp-split__actions{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-top:16px}.afp-btn--sm{height:46px;padding:0 20px;font-size:15px}.afp-video--sm{margin-top:0}
/* كارت لوجو المطور (الوحدة وأي مكان): شادو أبيض حواليه وراه + ضل ناعم تحته — يبان مجسم ، وبيزيد مع الحركة على الماوس */
.dev-logo-link>img,.dev-logo-link>span,.dev-icon__logo{box-shadow:0 0 0 4px #fff,0 0 20px 8px rgba(255,255,255,.95),0 12px 26px -10px rgba(18,58,92,.5);transition:transform .2s,box-shadow .2s}
a.dev-logo-link:hover>img,a.dev-logo-link:hover>span,.dev-icon__logo:hover{box-shadow:0 0 0 4px #fff,0 0 26px 10px #fff,0 18px 32px -12px rgba(18,58,92,.6)}
.dev-logo-link>img,.dev-logo-link>span,.dev-icon__logo{box-shadow:0 0 0 4px #fff,0 0 0 5px #E6EDF4,0 10px 22px -6px rgba(18,58,92,.38),0 0 22px 8px rgba(255,255,255,.95)}
a.dev-logo-link:hover>img,a.dev-logo-link:hover>span,.dev-icon__logo:hover{box-shadow:0 0 0 4px #fff,0 0 0 5px #DCE6EF,0 16px 30px -8px rgba(18,58,92,.48),0 0 26px 10px #fff}
.unit-card__head{overflow:visible}
/* الصور من غير تزويم ولا قص (js/shary/img-fit.js): الصورة كاملة + نفس الصورة مغبّشة بتملا الفراغ */
.sx-fit-host{overflow:hidden}
.sx-fit-bg{position:absolute;inset:0;background-size:cover;background-position:center;filter:blur(24px) saturate(1.15) brightness(.97);transform:scale(1.18);pointer-events:none}
img.sx-fit-contain{object-fit:contain!important}
.sx-fit-pic{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;pointer-events:none}
/* فورم «متابعة المشروع» للزائر (property/partials/follow-modal) */
.fmodal{position:fixed;inset:0;z-index:2147483000;display:flex;align-items:center;justify-content:center;padding:16px}
.fmodal[hidden]{display:none}
.fmodal-open,.fmodal-open body{overflow:hidden}
.fmodal__backdrop{position:absolute;inset:0;background:rgba(18,40,64,.6)}
.fmodal__box{position:relative;width:100%;max-width:440px;max-height:calc(100vh - 32px);overflow:auto;background:#fff;border-radius:24px;padding:26px 22px 22px;box-shadow:0 30px 70px -20px rgba(18,40,64,.55);text-align:center}
.fmodal__x{position:absolute;top:12px;inset-inline-end:12px;width:36px;height:36px;border:0;border-radius:50%;background:#F1F5F9;color:#1E4266;font-size:22px;line-height:1;cursor:pointer}
.fmodal__icon{display:inline-flex;width:58px;height:58px;border-radius:18px;background:#4CBFB2;color:#fff;align-items:center;justify-content:center;box-shadow:0 10px 22px -12px rgba(76,191,178,.9)}
.fmodal__icon--ok{background:#FCB424;color:#1E4266}
.fmodal__title{margin:14px 0 0;font-size:21px;line-height:1.45;font-weight:900;color:#1E4266}
.fmodal__text{margin:6px 0 0;font-size:15px;line-height:1.75;font-weight:700;color:#4B5B6B}
.fmodal__social{display:grid;gap:10px;margin-top:18px}
.fmodal__btn{display:flex;align-items:center;justify-content:center;gap:10px;height:50px;border-radius:14px;border:1.5px solid #D9E2EC;background:#fff;color:#1E4266;font-size:15.5px;font-weight:800;text-decoration:none;transition:border-color .2s,background .2s}
.fmodal__btn:hover{border-color:#4CBFB2;background:#F6FBFA}
.fmodal__btn svg{width:22px;height:22px;flex:none}
.fmodal__btn--apple{background:#111;color:#fff;border-color:#111}
.fmodal__btn--apple:hover{background:#000;border-color:#000}
.fmodal__btn--signup{background:#1E4266;border-color:#1E4266;color:#fff}
.fmodal__btn--signup:hover{background:#163552;border-color:#163552}
.fmodal__have{margin:2px 0 0;font-size:14px;font-weight:700;color:#5B6B7C}
.fmodal__have a{font-weight:900;color:#1F7F72}
.fmodal__or{display:flex;align-items:center;gap:12px;margin:18px 0 14px;font-size:13.5px;font-weight:800;color:#8A97A6}
.fmodal__or::before,.fmodal__or::after{content:'';flex:1;height:1.5px;background:#E6ECF2}
.fmodal__wa{display:grid;gap:10px;text-align:start}
.fmodal__label{font-size:15px;font-weight:900;color:#1E4266}
.fmodal__phone{display:flex;align-items:center;gap:8px;height:52px;border:1.5px solid #CFE9E5;border-radius:14px;padding:0 12px;background:#F6FBFA}
.fmodal__phone:focus-within{border-color:#25D366;background:#fff}
.fmodal__wa-ic{display:flex;width:26px;height:26px;color:#25D366;flex:none}
.fmodal__wa-ic svg{width:26px;height:26px}
.fmodal__phone input{flex:1;min-width:0;height:100%;border:0;background:transparent;font-size:17px;font-weight:800;color:#1E4266;outline:none}
.fmodal__name{height:48px;border:1.5px solid #E2E8F0;border-radius:14px;padding:0 14px;font-size:15px;font-weight:700;color:#1E4266;outline:none}
.fmodal__name:focus{border-color:#4CBFB2}
.fmodal__err{margin:0;font-size:13.5px;font-weight:800;color:#D93636}
.fmodal__send{height:52px;border:0;border-radius:14px;background:#25D366;color:#fff;font-size:16.5px;font-weight:900;cursor:pointer;box-shadow:0 12px 24px -14px rgba(37,211,102,.9)}
.fmodal__send:disabled{opacity:.6}
.fmodal__note{font-size:12.5px;line-height:1.6;font-weight:700;color:#8A97A6}
.fmodal__done .fmodal__send{width:100%;margin-top:18px;background:#1E4266;box-shadow:none}
@media(max-width:560px){.fmodal{align-items:flex-end;padding:0}.fmodal__box{max-width:none;border-radius:24px 24px 0 0;max-height:92vh;padding-bottom:calc(22px + env(safe-area-inset-bottom))}}
.sx-fit-bg{filter:saturate(1.1) brightness(.97);transform:scale(1.12)}
.sx-fit-bg--full{filter:blur(14px) saturate(1.1) brightness(.97)}
.saved-follow-note{margin:0 0 14px;font-size:15px;font-weight:700;color:#3F4F60}.saved-follow-badge{position:absolute;z-index:5;top:12px;inset-inline-start:12px;padding:4px 12px;border-radius:999px;background:#FCB424;color:#1E4266;font-size:13px;font-weight:900;box-shadow:0 6px 14px -8px rgba(30,66,102,.6)}
.explore-pages{display:flex;flex-wrap:wrap;justify-content:center;gap:8px}.explore-pages a{min-width:42px;height:42px;display:inline-flex;align-items:center;justify-content:center;border-radius:12px;border:1.5px solid #E3E8F0;font-weight:900;color:#1E4266;text-decoration:none}.explore-pages a.is-on{background:#1E4266;border-color:#1E4266;color:#fff}
.explore-hub{display:grid;gap:16px;grid-template-columns:repeat(auto-fill,minmax(270px,1fr))}
.explore-hub__card{display:flex;flex-direction:column;border:1.5px solid #D5EEEB;border-radius:16px;overflow:hidden;background:#fff;text-decoration:none;transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease}
.explore-hub__card:hover{transform:translateY(-3px);border-color:#4CBFB2;box-shadow:0 18px 34px -24px rgba(18,58,92,.55)}
.explore-hub__pic{position:relative;display:block;aspect-ratio:16/10.5;background:linear-gradient(135deg,#EAF7F5,#D5EEEB);overflow:hidden}
.explore-hub__pic img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.explore-hub__body{display:flex;flex-direction:column;gap:4px;padding:14px 18px 16px}
.explore-hub__body b{font-size:20px;font-weight:900;color:#1E4266}
.explore-hub__body small{font-size:14px;font-weight:800;color:#6B7A8C}
.explore-hub__go{display:inline-flex;align-items:center;gap:6px;margin-top:4px;font-size:15px;font-weight:800;color:#1F7F72}
/* نفس شكل «استكشف المشاريع» في كروت الرئيسية */
.explore-hub__go{color:#1F7F72;font-size:15px;font-weight:800;text-decoration:none}
/* لوجو المطور دايرة: الشادو حوالين الدايرة مش مربع (الصورة نفسها مربعة والدايرة جواها) */
.dev-logo-link>span,.dev-icon__logo{border-radius:50%!important}

/* لوجو المطور: الظل والإطار الأبيض على اللينك اللي حوالين اللوجو (دايرة) — الصورة نفسها من غير حواف مدوّرة،
   عشان الحواف المدوّرة على الصورة كانت بتقص أطراف الكلمة (EMAAR MISR) ، ومن غير ظل عليها عشان مايطلعش مربع ورا الدايرة */
.dev-logo-link{display:inline-flex;flex:none;border-radius:9999px;box-shadow:0 0 0 4px #fff,0 0 0 5px #E6EDF4,0 10px 22px -6px rgba(18,58,92,.38),0 0 22px 8px rgba(255,255,255,.95);transition:transform .2s,box-shadow .2s}
a.dev-logo-link:hover{box-shadow:0 0 0 4px #fff,0 0 0 5px #DCE6EF,0 16px 30px -8px rgba(18,58,92,.48),0 0 26px 10px #fff}
.dev-logo-link>img{box-shadow:none!important}
.dev-logo-link>span{box-shadow:none!important}
a.dev-logo-link:hover>img,a.dev-logo-link:hover>span{box-shadow:none!important}

/* ===== لوجو المطور — الشكل النهائي: دايرة واحدة بس حوالين اللوجو + ظل خفيف كأنها طالعة فوق الكارت.
   الدايرة التانية (تركواز) بتظهر بس لو المطور له ستوري — في كل مكان (الكروت ، شريط المشروع / الوحدة ، الهوم ، صفحة المطور).
   اللوجو نفسه بيتظبط لوحده جوه الدايرة (js/shary/site-chrome.js): من غير قص ومن غير تزويم ، الكلمة بتكبر على قد الدايرة. ===== */
.dev-logo-link{display:inline-flex;flex:none;border-radius:9999px;box-shadow:0 6px 14px -5px rgba(18,58,92,.30),0 1px 3px rgba(18,58,92,.10)!important;transition:transform .2s,box-shadow .2s}
a.dev-logo-link:hover{box-shadow:0 10px 20px -6px rgba(18,58,92,.38),0 1px 3px rgba(18,58,92,.12)!important}
.dev-logo-link>img,.dev-logo-link>span,a.dev-logo-link:hover>img,a.dev-logo-link:hover>span{box-shadow:none!important}
.dev-icon__logo{box-shadow:0 6px 14px -5px rgba(18,58,92,.30),0 1px 3px rgba(18,58,92,.10)!important}
.dev-icon__logo:hover{box-shadow:0 10px 20px -6px rgba(18,58,92,.38),0 1px 3px rgba(18,58,92,.12)!important}
.prop-bar__logo{border-radius:9999px;width:-moz-fit-content;width:fit-content;box-shadow:0 6px 14px -5px rgba(18,58,92,.30),0 1px 3px rgba(18,58,92,.10)}
/* الستوري: دايرة تركواز (فيه فاصل أبيض صغير بينها وبين اللوجو) */
.dev-logo-link.has-story,.prop-bar__logo.has-story{box-shadow:0 0 0 2px #fff,0 0 0 4.5px #17a398,0 8px 16px -6px rgba(18,58,92,.32)!important;cursor:pointer}

/* فلتر صفحة كارت «مشاريع تستحق الاستكشاف» */
.xfilter{display:flex;flex-direction:column;gap:12px;border:1.5px solid #E3E8F0;border-radius:18px;padding:14px;background:#fff;box-shadow:0 10px 26px -22px rgba(18,58,92,.5)}
.xfilter__tabs{display:flex;gap:8px}
.xfilter__tabs label{flex:1 1 0;display:flex;align-items:center;justify-content:center;min-height:44px;border-radius:12px;border:1.5px solid #E3E8F0;font-weight:800;color:#1E4266;cursor:pointer;font-size:15px}
.xfilter__tabs label.is-on{background:#1E4266;border-color:#1E4266;color:#fff}
.xfilter__tabs input{position:absolute;opacity:0;pointer-events:none}
.xfilter__row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
@media (min-width:1024px){.xfilter{padding:18px 20px}.xfilter__tabs{max-width:420px}.xfilter__row{grid-template-columns:repeat(5,minmax(0,1fr))}}
.xfilter__field{display:flex;flex-direction:column;gap:5px;min-width:0}
.xfilter__field span{font-size:13px;font-weight:800;color:#5B6B7F}
.xfilter__field select{width:100%;height:46px;border-radius:12px;border:1.5px solid #E3E8F0;background:#F7F9FC;padding:0 12px;font-weight:700;color:#1E4266;font-size:14.5px}
.xfilter__field select:focus{outline:2px solid #4CBFB2;outline-offset:1px}
/* استكشف: نفس قايمة الاختيار بتاعة فلاتر الموقع (form-select.js) — زرار بنفس شكل الخانة والقايمة بتفتح تحتها */
.xfilter__field[data-select]{position:relative}
.xfilter__native{display:block;margin:0}
.xfilter__toggle{display:flex;align-items:center;gap:8px;width:100%;height:46px;border-radius:12px;border:1.5px solid #E3E8F0;background:#F7F9FC;padding:0 12px;font-weight:700;color:#1E4266;font-size:14.5px;text-align:start;cursor:pointer}
.xfilter__toggle.hidden,.xfilter__native.hidden{display:none}
.xfilter__toggle[aria-expanded="true"],.xfilter__toggle:focus-visible{outline:2px solid #4CBFB2;outline-offset:1px}
.xfilter__field[data-select] .req-menu{inset-inline:0 auto;width:max(100%,250px);max-width:calc(100vw - 40px)}
.xfilter__field[data-select]:nth-child(even) .req-menu{inset-inline:auto 0}
.xfilter__go{height:46px;border-radius:12px;background:#1E4266;color:#fff;font-weight:800;align-self:end}
.xfilter__meta{display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:14.5px;color:#1E4266}
.xfilter__meta a{color:#1F7F72;font-weight:800;text-decoration:underline;text-underline-offset:3px}
[data-xlist][hidden],[data-xlist]>[hidden],[data-xsort][hidden],[data-xempty][hidden],[data-xclear][hidden]{display:none!important}

/* ===== الخريطة التفاعلية زي الخرايط العقارية المعروفة: عدد الكمبوندات جنب المنطقة + لوحة المشروع المختار بوحداته ===== */
.smap__top{flex-direction:row;flex-wrap:wrap;align-items:center}
.smap__top>.smap__areas{flex-basis:100%}
.smap__countpill{pointer-events:auto;display:inline-flex;height:42px;align-items:center;gap:5px;border-radius:999px;background:rgba(232,240,251,.94);padding-inline:15px;font-size:14.5px;font-weight:800;color:#1F7F72;box-shadow:0 6px 16px -8px rgba(18,58,92,.45)}
.smap__countpill b{font-weight:900}
.smap__fchip{background-color:#e8f0fb;color:#1E4266;font-weight:800;border-radius:14px}

.smap__ps{position:absolute;inset-inline:0;bottom:0;z-index:1010;display:flex;flex-direction:column;height:56%;max-height:calc(100% - 70px);background:#fff;border-radius:22px 22px 0 0;box-shadow:0 -14px 34px -14px rgba(18,58,92,.45);transition:height .28s ease}
.smap__ps[hidden]{display:none}
.smap__ps.is-full{height:calc(100% - 70px)}
.smap__ps-grip{display:flex;justify-content:center;padding:10px 0 4px;width:100%;cursor:grab;touch-action:none}
.smap__ps-grip i{width:46px;height:5px;border-radius:9px;background:#D5DCE5}
.smap__ps-head{display:flex;align-items:center;gap:12px;padding:4px 18px 10px;touch-action:none}
.smap__ps-head>div{flex:1}
.smap__ps-head h2{font-size:20px;font-weight:900;color:#1E4266;line-height:1.35;margin:0}
.smap__ps-head p{font-size:13.5px;font-weight:700;color:#5B6B7F;margin:2px 0 0}
.smap__ps-logo{flex:none;width:58px;height:58px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:#fff;border:1px solid #E3E8F0;box-shadow:0 6px 14px -5px rgba(18,58,92,.30),0 1px 3px rgba(18,58,92,.10);font-weight:900;color:#1E4266;overflow:hidden}
.smap__ps-logo img{width:100%;height:100%;object-fit:contain}
.smap__ps-close{flex:none;width:36px;height:36px;border-radius:50%;background:#F1F4F8;color:#1E4266;display:flex;align-items:center;justify-content:center}
.smap__ps-bar{display:flex;align-items:center;gap:10px;padding:0 18px 8px}
.smap__ps-bar>b{flex:1;font-size:17px;font-weight:900;color:#1E4266}
.smap__ps-bar>b span{font-size:14px;color:#5B6B7F;font-weight:800}
.smap__ps-sort{display:inline-flex;align-items:center;gap:4px;color:#1F5E9C;font-weight:800}
.smap__ps-sort select{border:0;background:transparent;font-weight:800;color:#1F5E9C;font-size:14.5px;max-width:150px}
.smap__ps-page{font-size:14px;font-weight:800;color:#1F7F72;text-decoration:underline;text-underline-offset:3px;white-space:nowrap}
.smap__ps-page[hidden]{display:none}
.smap__ps-tabs{display:flex;gap:4px;padding:0 12px;border-bottom:1.5px solid #E3E8F0;overflow-x:auto;scrollbar-width:none}
.smap__ps-tabs button{flex:1 0 auto;padding:10px 12px;font-size:14.5px;font-weight:800;color:#7A8899;border-bottom:3px solid transparent;margin-bottom:-1.5px;white-space:nowrap}
.smap__ps-tabs button[aria-selected=true]{color:#1E4266;border-color:#1E4266}
.smap__ps-tabs button[hidden]{display:none}
.smap__ps-tabs small{font-size:12px;font-weight:800;opacity:.8}
.smap__ps-list{flex:1;overflow-y:auto;padding:12px 14px;display:flex;flex-direction:column;gap:10px;overscroll-behavior:contain}
.smap__ps-note{padding:24px 10px;text-align:center;font-weight:800;color:#5B6B7F}
.smap__ps-unit{display:flex;gap:12px;border:1.5px solid #E3E8F0;border-radius:16px;padding:8px;background:#fff}
.smap__ps-pic{flex:none;width:118px;align-self:stretch;min-height:118px;border-radius:12px;overflow:hidden;background:linear-gradient(135deg,#EAF2FB,#DCE7F3)}
.smap__ps-pic img{width:100%;height:100%;object-fit:cover}
.smap__ps-info{flex:1;min-width:0;display:flex;flex-direction:column;gap:6px;padding:2px 2px 2px 0}
.smap__ps-info>a{display:flex;flex-direction:column;gap:1px;text-decoration:none}
.smap__ps-info>a b{font-size:17px;font-weight:900;color:#1E4266}
.smap__ps-info>a small{font-size:13px;font-weight:700;color:#5B6B7F}
.smap__ps-specs{display:flex;flex-wrap:wrap;align-items:center;gap:6px;font-size:13px;font-weight:700;color:#3C5068;margin:0}
.smap__ps-specs b{font-weight:900;color:#1E4266}
.smap__ps-specs i{width:1px;height:14px;background:#D5DCE5}
.smap__ps-row{display:flex;align-items:center;gap:8px;margin-top:auto}
.smap__ps-row strong{flex:1;font-size:17px;font-weight:900;color:#1E4266;text-align:start}
.smap__ps-row strong small{font-size:12px;font-weight:800;color:#5B6B7F}
.smap__ps-btn{flex:none;width:40px;height:40px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff}
.smap__ps-btn--call{background:#1E4266}
.smap__ps-btn--wa{background:#25D366}
.smap__ps-foot{display:grid;grid-template-columns:1fr 1fr;gap:10px;padding:10px 14px calc(10px + env(safe-area-inset-bottom,0px));border-top:1px solid #E3E8F0}
.smap__ps-foot a{height:48px;border-radius:14px;display:flex;align-items:center;justify-content:center;gap:8px;font-size:16px;font-weight:900;text-decoration:none}
.smap__ps-call{background:#E8EEF5;color:#1E4266}
.smap__ps-wa{background:#25D366;color:#fff}
.smap.has-ps .smap__panel,.smap.has-ps .smap__list-btn{visibility:hidden}
@media (min-width:1024px){
  .smap__ps{inset-inline:auto 16px;bottom:16px;top:auto;width:430px;height:calc(100% - 140px);border-radius:22px}
  .smap__ps.is-full{height:calc(100% - 140px)}
  .smap.has-ps .smap__panel{visibility:visible}
}
.smap__marker.is-crowded{opacity:0;pointer-events:none;transition:opacity .15s}.smap__marker{transition:opacity .15s}
.smap__marker.is-crowded{opacity:0!important;visibility:hidden!important;pointer-events:none!important}
/* التابات (وحدات / مشاريع / بتابعها) ما تخرجش برّه الشاشة على الموبايل */
.saved-tabs{max-width:100%;overflow-x:auto;scrollbar-width:none}.saved-tabs::-webkit-scrollbar{display:none}
@media (max-width:480px){.saved-tabs button{padding-inline:12px;font-size:14px;gap:6px;flex-shrink:0}}
/* صفحة كارت «مشاريع تستحق الاستكشاف»: خانة بحث دايرية وجواها أيقونة الفلتر المتقدم */
.xsearch{display:flex;align-items:center;gap:8px;height:54px;border-radius:999px;border:1.5px solid #D5DEE8;background:#F7F9FC;padding-inline:18px 6px;color:#5B6B7F}
.xsearch:focus-within{border-color:#4CBFB2;background:#fff;box-shadow:0 0 0 3px rgba(76,191,178,.18)}
.xsearch input{flex:1;min-width:0;height:100%;text-overflow:ellipsis;border:0;background:transparent;font-size:15.5px;font-weight:700;color:#1E4266;outline:none}
.xsearch input::placeholder{color:#8A97A8;font-weight:600;font-size:12px}   /* نفس حجم بحث الرئيسية — الجملة كلها ظاهرة من غير ما تتقطع */
@media (min-width:768px){.xsearch input::placeholder{font-size:14px}}
.xsearch__adv{flex:none;width:42px;height:42px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:#1E4266;color:#fff}
.xsearch__adv[aria-expanded=true]{background:#1F7F72}
.xfilter__row[hidden]{display:none!important}
/* الخريطة جاية من صفحة مشروع: المشروع ووحداته بس — من غير فلاتر ولا «اختر المنطقة» ولا كروت المشاريع (بترجع لما لوحة الوحدات تتقفل) */
.smap.is-project .smap__filters,.smap.is-project .smap__top,.smap.is-project .smap__list-btn,.smap.is-project .smap__areas,.smap.is-project .smap__veil{display:none!important}
@media (max-width:1023px){.smap.is-project .smap__panel{visibility:hidden}}

/* لوجو المطور: الدايرة بتقص أي حاجة برّاها (اللوجو اللي خلفيته تدرّج / صورة بيملا الدايرة — عمره ما يبان مربع) */
.dev-logo-link,.prop-bar__logo,.dev-icon__logo,.developer-card,.smap__ps-logo{overflow:hidden;border-radius:9999px}

/* السرعة (نفس الشكل): لمعة زرار Shary AI بتتحرك بـ transform بدل left — الـ left كان بيخلي المتصفح يعيد حساب الصفحة كل فريم (التليفون يهنج) */
.quick-ai::after { will-change: auto; }
@keyframes quick-sheen {
  0%, 55% { transform: translateX(0) skewX(-18deg); }
  85%, 100% { transform: translateX(422%) skewX(-18deg); }
}
/* الحركات اللي بتتكرر على طول بتبدأ بعد ما الصفحة تفتح وتهدى (html.sx-ready) — مش وقت التحميل */
html:not(.sx-ready) .quick-ai::after, html:not(.sx-ready) .fab-beat, html:not(.sx-ready) .fab-call, html:not(.sx-ready) .fab-ring,
html:not(.sx-ready) .market-ticker-badge::after, html:not(.sx-ready) .market-ticker-badge-inner, html:not(.sx-ready) .market-ticker-dot,
html:not(.sx-ready) .own-unit-card__btn, html:not(.sx-ready) .own-unit-card__btn::after { animation-play-state: paused !important; }

/* عارض المخططات: اسم المخطط ودوره + «افتح ملف PDF» تحت المخطط */
.rent-viewer__caption { position: absolute; left: 0; right: 0; bottom: 28px; z-index: 10; display: none; justify-content: center; padding: 0 16px; pointer-events: none; }
.rent-viewer__caption.flex { display: flex; }
.rent-viewer__caption > div { pointer-events: auto; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px; max-width: 100%; background: #fff; color: #123a5c; border-radius: 999px; padding: 8px 16px; font-size: 15px; font-weight: 800; box-shadow: 0 10px 24px -10px rgba(15, 34, 51, .35); }
.rent-viewer__caption [data-lightbox-pdf] { background: #123a5c; color: #fff; border-radius: 999px; padding: 4px 12px; font-size: 13px; font-weight: 800; text-decoration: none; }
.rent-viewer__caption [data-lightbox-pdf].hidden { display: none; }

/* Mapbox / MapLibre: علامات المشاريع لازم تفضل absolute (ملف المكتبة بيتحمّل قبل app.css فـ position: relative كان بيرصّهم تحت بعض) */
.mapboxgl-marker.smap__marker, .maplibregl-marker.smap__marker { position: absolute; }

/* شيت التطبيق: زرار × في الركن فوق يقفل الشيت */
.app-sheet__x{position:absolute;top:12px;inset-inline-end:14px;z-index:1;display:flex;align-items:center;justify-content:center;width:36px;height:36px;padding:0;border:0;border-radius:50%;background:#eef2f6;color:#1E4266;cursor:pointer}
.app-sheet__x:active{background:#dfe6ed}

/* الفوتر ديسك توب: 4 أعمدة ثابتة العرض (الأعلى بحثًا أعرض) — الكلام بينزل سطر جوه عموده وما يدخلش في العمود اللي جنبه ، وخط اللينكات أصغر */
@media (min-width:1024px){
.site-footer__cols{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.25fr) minmax(0,1fr) minmax(0,1.9fr);column-gap:40px;align-items:start}
.site-footer__col li{white-space:normal}
.site-footer__col>ul{font-size:14.5px;line-height:1.55;gap:10px;overflow-wrap:anywhere}
.site-footer__col--wide>ul{max-width:none}
}
@media (min-width:1340px){.site-footer__col--wide>ul{column-gap:28px;row-gap:10px}}

/* تابة المشروع على الخريطة: الاسم بس (من غير المنطقة) — مساحة أكبر عشان الاسم يبان كامل */
.smap__marker{max-width:200px}

/* معرض الوحدة / المشروع ديسك توب: الصورة اللي الماوس عليها بتتفتح وتتلوّن بسرعة */
@media (min-width:1024px){.rent-gallery.rent-gallery--slider .rent-gallery__item{transition:flex-grow .5s ease}.rent-gallery.rent-gallery--slider .rent-gallery__item img{transition:filter .3s ease}}

/* اسم المشروع / الوحدة (فوق تحت الصور) وعنوان «خطط السداد في …»: خط أصغر ومريح للعين — موبايل وديسك توب */
.prop-bar .prop-bar__head h1{font-size:16.5px;line-height:1.5}
[data-plan-list]>h2{font-size:17px;line-height:1.45}
@media (min-width:1024px){.prop-bar .prop-bar__head h1{font-size:19px}[data-plan-list]>h2{font-size:20px}}

/* الفوتر ديسك توب — زي الريفرنس: 4 أعمدة مرتّبة (المناطق ، المشاريع ، المطورين ، الأعلى بحثًا عمودين) ، عناوين صغيرة بولد ،
   لينكات خط صغير رمادي سطر واحد — الاسم الطويل بيتقص بـ «…» (والاسم كامل بيظهر لما الماوس يقف عليه) فمفيش حاجة بتدخل في التانية */
@media (min-width:1024px){
.site-footer__cols{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1fr) minmax(0,1fr) minmax(0,2.1fr);column-gap:48px;align-items:start}
.site-footer__col>button{font-size:15.5px;line-height:1.4}
.site-footer__col>ul{padding-top:14px;font-size:13.5px;font-weight:600;line-height:1.5;gap:9px;color:#5a6b7e;overflow-wrap:normal}
.site-footer__col li{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.site-footer__col li a{display:block;min-width:0;overflow:hidden;text-overflow:ellipsis}
.site-footer__col--wide>ul{display:grid;max-width:none;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:32px;row-gap:9px}
}

/* جرس الإشعارات في الهيدر (ديسك توب وموبايل): دايرة حمرا عليها عدد الجديد — js/shary/web-notify.js */
.notify-bell__count{position:absolute;inset-inline-end:-2px;top:-2px;align-items:center;justify-content:center;height:18px;min-width:18px;padding:0 4px;border-radius:999px;background:#e5484d;color:#fff;font-size:11px;font-weight:800;line-height:18px;text-align:center;box-shadow:0 1px 4px rgba(18,58,92,.3)}
.notify-bell__count--sm{top:0;height:17px;min-width:17px;font-size:10.5px;line-height:17px}
.notify-bell__count.hidden{display:none}
.notify-bell__count.flex{display:flex}

/* أزرار التواصل جوه المحتوى ([shary-cta] — مقالات ، المدونة ، صفحة المشروع والوحدة ، أي مكان): الصندوق اللبني على قد الأزرار وفي النص —
   3 أزرار = التلاتة جنب بعض ، 2 = الاتنين في النص ، 1 = زرار واحد في النص بمقاسه — ولو زرار اتشال ما بيفضلش مكانه فاضي */
.content-cta{align-items:center;text-align:center}
.content-cta__buttons,.content-cta__buttons--1,.content-cta__buttons--2,.content-cta__buttons--3{display:flex !important;flex-wrap:wrap;justify-content:center;width:100%}
.content-cta__buttons > .content-cta__button{flex:1 1 140px;min-width:-moz-max-content;min-width:max-content;padding-inline:18px}
.content-cta__buttons > .content-cta__button--meeting{flex-basis:100%}
.content-cta__buttons > .content-cta__button:only-child{flex:0 1 auto;min-width:220px}
@media (min-width:1024px){
  .content-cta{width:-moz-fit-content;width:fit-content;max-width:100%;margin-inline:auto}
  .content-cta__buttons > .content-cta__button,.content-cta__buttons > .content-cta__button--meeting,.content-cta__buttons--2 > .content-cta__button{flex:0 0 auto;min-width:200px;padding-inline:24px}
}

/* تقييم المشروع جنب المكان (summary-bar) — نفس تقييم بيانات جوجل */
.prop-rating{display:inline-flex;align-items:center;gap:4px;margin-inline-start:8px;padding-inline-start:8px;border-inline-start:1px solid #dfe6ee;white-space:nowrap;color:#1E4266;font-weight:700}
.prop-rating b{font-weight:800}
.prop-rating span{color:#5a6b7e;font-weight:600}
/* الخريطة التفاعلية أخف (موبايل وديسك توب): من غير تغبيش (backdrop-filter) ورا كروت المشاريع وعلامات الماستر بلان —
   المتصفح كان بيعيد تغبيش اللي ورا كل كارت وكل علامة مع كل فريم والخريطة بتتحرك (تقل وسخونية على الموبايل).
   نفس الشكل (لبني أبيض فاتح / كحلي) بخلفية أتقل سنة بدل التغبيش. الديسك توب: الكروت أصلًا بيضا في العمود اللي على الجنب */
@media (max-width: 1023px) {
  .smap__item { -webkit-backdrop-filter: none; backdrop-filter: none; background-color: rgba(241, 247, 253, 0.95); }
}
.smap:not(.is-globe) .smap__marker.has-plan { -webkit-backdrop-filter: none; backdrop-filter: none; background-color: rgba(30, 65, 102, .9); }
/* ديسك توب: لوحة المشروع المفتوحة كانت بتغطي أزرار الجنب (تكبير / تصغير / كل المشاريع / موقعي) — الأزرار بتقف جنب اللوحة */
@media (min-width: 1024px) {
  .smap.has-ps .smap__tools { left: 458px; }
  [dir="ltr"] .smap.has-ps .smap__tools { left: auto; right: 458px; }
}

/* ==========================================================================
   أدوات Tailwind اللي الصفحات بتستخدمها وما كانتش في الملف المبني (app.css مبني مرة واحدة — مفيش build)
   من غيرها: لوحات الفلتر (المنطقة / المطور / المشروع) ونافذة طلب الاجتماع والعرض كانت أطول من الشاشة على الموبايل
   وأولها بيتقص فوق. أي class جديد بقيمة بين [] : شغّل python3 tools/check-css-classes.py
   ========================================================================== */

.max-h-\[82vh\] { max-height: 82vh; }
.max-h-\[86vh\] { max-height: 86vh; }
.max-h-\[88vh\] { max-height: 88vh; }
.max-h-\[92vh\] { max-height: 92vh; }
.max-w-\[560px\] { max-width: 560px; }
.min-h-\[96px\] { min-height: 96px; }
.h-\[120px\] { height: 120px; }
.bg-\[\#e8f6ee\] { background-color: #e8f6ee; }
.bg-\[\#f4f8fb\] { background-color: #f4f8fb; }
.bg-\[\#fdecec\] { background-color: #fdecec; }
.text-\[\#16794a\] { color: #16794a; }
.text-\[\#b42318\] { color: #b42318; }
.text-\[\#c2410c\] { color: #c2410c; }
.accent-\[\#2799b1\] { accent-color: #2799b1; }
.\[\&\:\:-webkit-details-marker\]\:hidden::-webkit-details-marker { display: none; }

@media (min-width: 1024px) {
  .lg\:max-h-\[80vh\] { max-height: 80vh; }
  .lg\:max-h-\[86vh\] { max-height: 86vh; }
  .lg\:max-h-\[calc\(100vh-48px\)\] { max-height: calc(100vh - 48px); }
  .lg\:min-h-\[120px\] { min-height: 120px; }
  .lg\:h-\[160px\] { height: 160px; }
}