/* Amman & Sharjah — site styles. Bootstrap is vendor/bootstrap(.rtl).min.css, linked from index.html.
   Every design (components/*.ams) reads the --as-* tokens below. Plain CSS: no build step.
   Brand (from the logo): deep navy #0d2f4f, blue #35648a / #4b8ab9, sky #7bb6e0, light #f3f6fa. Tajawal (Arabic) and Inter (Latin).
   Token names kept from the starter: --as-green* = navy, --as-gold* = sky blue accent, --as-cream = light blue-grey. */

@font-face { font-family: "Inter"; font-style: normal; font-weight: 400; font-display: swap; src: url("vendor/fonts/inter/inter-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 500; font-display: swap; src: url("vendor/fonts/inter/inter-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 600; font-display: swap; src: url("vendor/fonts/inter/inter-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 700; font-display: swap; src: url("vendor/fonts/inter/inter-latin-700-normal.woff2") format("woff2"); }
@font-face { font-family: "Tajawal"; font-style: normal; font-weight: 300; font-display: swap; src: url("vendor/fonts/tajawal/tajawal-arabic-300-normal.woff2") format("woff2"); unicode-range: U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0897-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC; }
@font-face { font-family: "Tajawal"; font-style: normal; font-weight: 400; font-display: swap; src: url("vendor/fonts/tajawal/tajawal-arabic-400-normal.woff2") format("woff2"); unicode-range: U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0897-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC; }
@font-face { font-family: "Tajawal"; font-style: normal; font-weight: 500; font-display: swap; src: url("vendor/fonts/tajawal/tajawal-arabic-500-normal.woff2") format("woff2"); unicode-range: U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0897-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC; }
@font-face { font-family: "Tajawal"; font-style: normal; font-weight: 600; font-display: swap; src: url("vendor/fonts/tajawal/tajawal-arabic-700-normal.woff2") format("woff2"); unicode-range: U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0897-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC; }
@font-face { font-family: "Tajawal"; font-style: normal; font-weight: 700; font-display: swap; src: url("vendor/fonts/tajawal/tajawal-arabic-700-normal.woff2") format("woff2"); unicode-range: U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0897-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC; }
@font-face { font-family: "Tajawal"; font-style: normal; font-weight: 400; font-display: swap; src: url("vendor/fonts/tajawal/tajawal-latin-400-normal.woff2") format("woff2"); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: "Tajawal"; font-style: normal; font-weight: 500; font-display: swap; src: url("vendor/fonts/tajawal/tajawal-latin-500-normal.woff2") format("woff2"); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: "Tajawal"; font-style: normal; font-weight: 700; font-display: swap; src: url("vendor/fonts/tajawal/tajawal-latin-700-normal.woff2") format("woff2"); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }

:root {
  --as-green: #0d2f4f;
  --as-green-950: #071d33;
  --as-green-800: #144170;
  --as-green-600: #1f5a8f;
  --as-gold: #7bb6e0;
  --as-gold-600: #2f6fa5;
  --as-gold-100: #e3f0fa;
  --as-cream: #f3f6fa;
  --as-sand: #e4ebf2;
  --as-ink: #0f1c2b;
  --as-text: #3b4757;
  --as-muted: #677486;
  --as-line: #dce4ed;
  --as-white: #ffffff;
  --as-radius: 0.375rem;
  --as-radius-lg: 0.75rem;
  --as-shadow: 0 1px 2px rgba(13, 47, 79, 0.06), 0 8px 24px -16px rgba(13, 47, 79, 0.25);
  --as-shadow-lg: 0 30px 60px -30px rgba(13, 47, 79, 0.45);
  --as-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --as-font: "Tajawal", "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --as-display: "Tajawal", "Inter", system-ui, sans-serif;
  --bs-body-font-family: var(--as-font);
  --bs-body-color: var(--as-text);
  --bs-link-color: var(--as-green);
  --bs-link-hover-color: var(--as-gold-600);
  --bs-primary: var(--as-green);
  --bs-primary-rgb: 13, 47, 79;
}
:root:lang(en) { --as-font: "Inter", "Tajawal", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif; --as-display: "Inter", system-ui, sans-serif; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { font-family: var(--as-font); color: var(--as-text); background: var(--as-white); overflow-x: hidden; -webkit-font-smoothing: antialiased; font-size: 1rem; line-height: 1.75; }
h1, h2, h3, h4, h5, h6 { font-family: var(--as-display); color: var(--as-ink); }
img, video { max-width: 100%; }
a { text-underline-offset: 0.2em; }
::selection { background: var(--as-gold); color: var(--as-green-950); }
:focus-visible { outline: 2px solid var(--as-gold); outline-offset: 3px; }

/* Page width: 1280px with 20px gutters on phones. */
.as-wrap { width: 100%; max-width: 80rem; margin-inline: auto; padding-inline: 1.25rem; }
@media (min-width: 768px) { .as-wrap { padding-inline: 2rem; } }
@media (min-width: 1200px) { .as-wrap { padding-inline: 2.5rem; } }
.as-sec { padding-block: 4.5rem; }
@media (min-width: 992px) { .as-sec { padding-block: 7rem; } }
.as-tone-white { background: var(--as-white); }
.as-tone-cream { background: var(--as-cream); }
.as-tone-green { background: var(--as-green); color: rgba(255, 255, 255, 0.78); }
.as-tone-green h1, .as-tone-green h2, .as-tone-green h3, .as-tone-green h4 { color: #fff; }

/* Section heading: small gold label with a line, title, one line under it. */
.as-head { max-width: 46rem; margin-bottom: 3rem; }
.as-head--center { margin-inline: auto; text-align: center; }
.as-head--split { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 1.5rem; max-width: none; }
.as-head--split > div { max-width: 44rem; }
.as-eyebrow { display: inline-flex; align-items: center; gap: 0.75rem; margin-bottom: 1rem; color: var(--as-gold-600); font-family: var(--as-display); font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; }
:lang(ar) .as-eyebrow { letter-spacing: 0; font-size: 0.9375rem; }
.as-eyebrow::before { width: 2.25rem; height: 1px; background: currentColor; content: ""; }
.as-head--center .as-eyebrow::after { width: 2.25rem; height: 1px; background: currentColor; content: ""; }
.as-tone-green .as-eyebrow { color: var(--as-gold); }
.as-title { margin: 0 0 1rem; font-size: clamp(1.75rem, 1.2rem + 2.2vw, 3rem); font-weight: 600; line-height: 1.25; letter-spacing: -0.01em; }
:lang(ar) .as-title { letter-spacing: 0; line-height: 1.4; }
.as-title em { color: var(--as-gold-600); font-style: normal; }
.as-tone-green .as-title em { color: var(--as-gold); }
.as-lead { margin: 0; color: var(--as-muted); font-size: 1.0625rem; line-height: 1.85; }
@media (min-width: 768px) { .as-lead { font-size: 1.125rem; } }
.as-tone-green .as-lead { color: rgba(255, 255, 255, 0.72); }
.as-prose { color: var(--as-text); font-size: 1.0625rem; line-height: 1.95; }
.as-prose p { margin: 0 0 1.1rem; }
.as-prose p:last-child { margin-bottom: 0; }
.as-prose strong { color: var(--as-ink); font-weight: 600; }
.as-prose ul { margin: 0 0 1.1rem; padding-inline-start: 1.2rem; }
.as-prose li::marker { color: var(--as-gold-600); }
.as-prose h3 { margin: 1.5rem 0 0.75rem; font-size: 1.25rem; font-weight: 600; }

/* Buttons. */
.as-btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.6rem; min-height: 3.25rem; padding: 0.85rem 1.75rem; border: 1px solid transparent; border-radius: var(--as-radius); background: var(--as-gold); color: var(--as-green-950); font-family: var(--as-display); font-size: 0.9375rem; font-weight: 600; letter-spacing: 0.02em; line-height: 1.2; text-decoration: none; cursor: pointer; transition: background 0.3s var(--as-ease), color 0.3s var(--as-ease), border-color 0.3s var(--as-ease), transform 0.3s var(--as-ease); }
.as-btn:hover { background: #a2cfee; color: var(--as-green-950); }
.as-btn .fi { display: flex; font-size: 1rem; }
.as-btn--green { background: var(--as-green); color: #fff; }
.as-btn--green:hover { background: var(--as-green-800); color: #fff; }
.as-btn--line { border-color: currentColor; background: transparent; color: var(--as-green); }
.as-btn--line:hover { background: var(--as-green); border-color: var(--as-green); color: #fff; }
.as-btn--light { border-color: rgba(255, 255, 255, 0.55); background: transparent; color: #fff; }
.as-btn--light:hover { background: #fff; border-color: #fff; color: var(--as-green); }
.as-btn--sm { min-height: 2.6rem; padding: 0.55rem 1.1rem; font-size: 0.875rem; }
.as-btn--block { width: 100%; }
.as-link { display: inline-flex; align-items: center; gap: 0.5rem; color: var(--as-green); font-family: var(--as-display); font-weight: 600; text-decoration: none; }
.as-link::after { width: 1.5rem; height: 1px; background: var(--as-gold-600); content: ""; transition: width 0.3s var(--as-ease); }
.as-link:hover { color: var(--as-gold-600); }
.as-link:hover::after { width: 2.5rem; }
.as-tone-green .as-link { color: var(--as-gold); }
[dir="rtl"] .as-flip { transform: scaleX(-1); }
.as-icon-btn { display: inline-flex; align-items: center; justify-content: center; width: 2.75rem; height: 2.75rem; border: 1px solid var(--as-line); border-radius: 50%; background: #fff; color: var(--as-green); transition: background 0.25s, color 0.25s, border-color 0.25s; }
.as-icon-btn:hover { background: var(--as-green); border-color: var(--as-green); color: #fff; }
.as-icon-btn .fi, .as-icon-btn svg { display: flex; width: 1.1rem; height: 1.1rem; font-size: 1.1rem; }

/* Property card (featured, all properties, similar properties). */
.as-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.5rem; }
@media (min-width: 640px) { .as-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .as-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2rem; } }
.as-card { position: relative; display: flex; flex-direction: column; height: 100%; overflow: hidden; border: 1px solid var(--as-line); border-radius: var(--as-radius-lg); background: #fff; color: inherit; text-decoration: none; transition: box-shadow 0.4s var(--as-ease), transform 0.4s var(--as-ease), border-color 0.4s; }
.as-card:hover { color: inherit; border-color: transparent; box-shadow: var(--as-shadow-lg); transform: translateY(-4px); }
.as-card__media { position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: var(--as-sand); }
/* A property without a photo yet: green with the gold mark. */
.as-card__media:not(:has(img)), .as-ph { position: relative; background: radial-gradient(circle at 50% 40%, var(--as-green-800), var(--as-green) 70%); }
.as-card__media:not(:has(img))::before, .as-ph::before { position: absolute; inset: 0; background: url(img/mark.svg) 50% 42% / 30% auto no-repeat; content: ""; }
.as-ph { min-height: 16rem; border-radius: var(--as-radius-lg); }
.as-ph::before { background-size: auto 38%; }
.as-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.8s var(--as-ease); }
.as-card:hover .as-card__media img { transform: scale(1.05); }
.as-card__media::after { position: absolute; inset: auto 0 0; height: 45%; background: linear-gradient(to top, rgba(7, 29, 51, 0.55), transparent); content: ""; pointer-events: none; }
.as-card__tags { position: absolute; top: 1rem; inset-inline-start: 1rem; z-index: 2; display: flex; flex-wrap: wrap; gap: 0.4rem; }
.as-tag { display: inline-flex; align-items: center; padding: 0.3rem 0.7rem; border-radius: 999px; background: rgba(255, 255, 255, 0.94); color: var(--as-green); font-size: 0.75rem; font-weight: 600; line-height: 1.3; }
.as-tag--gold { background: var(--as-gold); color: var(--as-green-950); }
.as-tag--green { background: var(--as-green); color: #fff; }
.as-tag--muted { background: #c0392b; color: #fff; }
.as-card.is-sold .as-card__media img { filter: grayscale(0.55); }
.as-card__price { position: absolute; bottom: 0.9rem; inset-inline-start: 1rem; z-index: 2; color: #fff; font-family: var(--as-display); font-size: 1.25rem; font-weight: 600; line-height: 1.2; }
.as-card__price small { display: block; color: rgba(255, 255, 255, 0.8); font-size: 0.75rem; font-weight: 500; }
.as-card__body { display: flex; flex: 1; flex-direction: column; gap: 0.5rem; padding: 1.25rem 1.25rem 1.1rem; }
.as-card__top { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; }
.as-card__code { flex: 0 0 auto; padding: 0.15rem 0.5rem; border: 1px solid var(--as-line); border-radius: var(--as-radius); color: var(--as-muted); font-family: "Inter", sans-serif; font-size: 0.75rem; font-weight: 600; }
.as-card__place { display: flex; min-width: 0; align-items: center; gap: 0.35rem; color: var(--as-gold-600); font-size: 0.8125rem; font-weight: 600; }
.as-card__place .fi { display: flex; }
.as-card__title { margin: 0; color: var(--as-ink); font-size: 1.125rem; font-weight: 600; line-height: 1.45; display: -webkit-box; overflow: hidden; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.as-card__specs { display: flex; flex-wrap: wrap; gap: 0.4rem 1.1rem; margin-top: auto; padding-top: 0.9rem; border-top: 1px solid var(--as-line); color: var(--as-muted); font-size: 0.875rem; list-style: none; padding-inline-start: 0; margin-bottom: 0; }
.as-card__specs li { display: inline-flex; align-items: center; gap: 0.35rem; }
.as-card__specs svg { width: 1rem; height: 1rem; color: var(--as-gold-600); }
.as-empty { grid-column: 1 / -1; padding: 3rem 1rem; color: var(--as-muted); text-align: center; }
.as-skel { border-radius: var(--as-radius-lg); background: linear-gradient(90deg, var(--as-cream), var(--as-sand), var(--as-cream)); background-size: 200% 100%; animation: as-skel 1.4s ease infinite; min-height: 22rem; }
@keyframes as-skel { to { background-position: -200% 0; } }

/* Appearing on scroll (designs mark elements with data-as-in). */
[data-as-in] { opacity: 0; transform: translateY(28px); transition: opacity 0.9s var(--as-ease), transform 0.9s var(--as-ease); transition-delay: var(--as-delay, 0ms); }
[data-as-in].is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  [data-as-in] { opacity: 1; transform: none; transition: none; }
  .as-card, .as-card__media img, .as-btn { transition: none; }
}

/* First load. */
.as-boot { display: grid; place-items: center; min-height: 100vh; background: var(--as-green); }
.as-boot__mark { width: 3rem; height: 3rem; border: 2px solid rgba(123, 182, 224, 0.25); border-top-color: var(--as-gold); border-radius: 50%; animation: as-spin 0.9s linear infinite; }
@keyframes as-spin { to { transform: rotate(360deg); } }
.as-spinner { width: 2rem; height: 2rem; margin: 1.5rem auto; border: 2px solid var(--as-line); border-top-color: var(--as-gold-600); border-radius: 50%; animation: as-spin 0.9s linear infinite; }

/* Builder forms (form.ams gives the frame; these are the fields). */
.cms-form .cms-form-label { display: block; margin-bottom: 0.45rem; color: var(--as-ink); font-size: 0.9rem; font-weight: 600; }
.cms-form .form-control, .cms-form .form-select { min-height: 3.25rem; padding: 0.8rem 1rem; border: 1px solid var(--as-line); border-radius: var(--as-radius); background-color: #fff; color: var(--as-ink); font-family: var(--as-font); font-size: 1rem; }
.cms-form textarea.form-control { min-height: 9rem; }
.cms-form .form-control::placeholder { color: #98a3b1; }
.cms-form .form-control:focus, .cms-form .form-select:focus { border-color: var(--as-gold); box-shadow: 0 0 0 3px rgba(123, 182, 224, 0.25); }
.cms-form-optional { color: var(--as-muted); font-weight: 400; }
.cms-form-submit { width: 100%; min-height: 3.4rem; border: 0; border-radius: var(--as-radius); background: var(--as-green) !important; color: #fff; font-family: var(--as-display); font-weight: 600; letter-spacing: 0.02em; transition: background 0.3s; }
.cms-form-submit:hover { background: var(--as-green-800) !important; }
.cms-form-status { margin: 0.9rem 0 0; color: var(--as-green); font-weight: 600; }
.cms-form-status:empty { display: none; }
.cms-form .form-check-input:checked { background-color: var(--as-green); border-color: var(--as-green); }

/* In-page links stop below the fixed header. */
section[id] { scroll-margin-top: 5.5rem; }
#main > .container.py-5 { min-height: 50vh; padding-top: 9rem !important; }