/* Homepage featured carousel, membership badges and identity stickers. Loaded on the homepage and the preview only. */
.space-property-card__media { position: relative; }

/* Carousel: three cards on desktop, two on tablet, one (with peek) on mobile. Scroll-snap gives native swipe. */
.sp6-featured { position: relative; }
.sp6-carousel-controls { display: flex; justify-content: flex-end; gap: .5rem; margin: 0 0 1rem; }
.sp6-carousel-btn {
  inline-size: 44px; block-size: 44px; border-radius: 999px;
  border: 1px solid currentColor; background: transparent; color: inherit;
  font-size: 1.5rem; line-height: 1; cursor: pointer;
}
.sp6-carousel-btn:disabled { opacity: .35; cursor: default; }
.sp6-carousel-btn:focus-visible,
.sp6-featured-track:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }
.sp6-featured-track {
  --sp6-gap: 24px;
  display: grid; grid-auto-flow: column; grid-template-columns: none;
  grid-auto-columns: calc((100% - 2 * var(--sp6-gap)) / 3);
  gap: var(--sp6-gap);
  overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory; scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch; padding-bottom: 8px; scrollbar-width: thin;
}
.sp6-featured-track > * { min-width: 0; scroll-snap-align: start; }
@media (max-width: 1023px) {
  .sp6-featured-track { grid-auto-columns: calc((100% - var(--sp6-gap)) / 2); }
}
@media (max-width: 640px) {
  .sp6-featured-track { --sp6-gap: 16px; grid-auto-columns: 84%; }
  .sp6-carousel-controls { display: none; }
}

/* Membership and Space labels. Paid tiers only when the membership is active (checked by the server). */
.sp6-badge {
  display: inline-flex; align-items: center; gap: .35em;
  border-radius: 999px; padding: .28em .7em;
  font-size: .78rem; font-weight: 600; line-height: 1.2; white-space: nowrap;
  background: #f1efe9; color: #2b2b2b; border: 1px solid #d7d2c6;
}
/* Silver: soft, cool, quiet. */
.sp6-badge--silver { background: linear-gradient(135deg, #f4f6f8, #dfe4ea); border-color: #c9d0d9; color: #4a525d; }
/* Gold: warm and elegant, but clearly lighter than Diamond. */
.sp6-badge--gold { background: linear-gradient(135deg, #f9eec9, #dcb760); border-color: #c49c3f; color: #4a3705; }
/* Diamond: deep plum with a metallic sheen, larger and more luxurious. */
.sp6-badge--diamond {
  background: linear-gradient(120deg, #2b1846 0%, #4b2a72 40%, #7a5ab0 52%, #4b2a72 64%, #2b1846 100%);
  border: 1px solid #c9b3ef; color: #faf6ff;
  font-size: .86rem; font-weight: 700; letter-spacing: .03em;
  padding: .38em .9em .38em .75em;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45), 0 4px 14px rgba(43, 24, 70, .42);
}
.sp6-badge__icon { width: 13px; height: 13px; flex: none; color: #e6d3ff; }
.sp6-badge--space { background: #1f2a24; border-color: #1f2a24; color: #f5f1e6; }

/* Card tiers. Each tier differs in border weight, colour and depth, so the hierarchy reads at a glance. */
.sp6-card { position: relative; }
.sp6-card--silver {
  border: 1px solid #dde1e7;
  box-shadow: 0 4px 12px rgba(80, 90, 105, .07);
}
.sp6-card--gold {
  border: 1px solid #e6cf93;
  box-shadow: 0 10px 24px rgba(184, 134, 40, .14);
}
.sp6-card--diamond {
  overflow: hidden;
  border: 2px solid #5b3a8a;
  background: linear-gradient(180deg, #fcfaff 0%, #ffffff 42%);
  box-shadow: 0 22px 44px rgba(43, 24, 70, .26), 0 0 0 4px rgba(155, 120, 220, .14), inset 0 1px 0 rgba(255, 255, 255, .7);
}
/* Refined top accent bar, metallic plum gradient. */
.sp6-card--diamond::before {
  content: ""; position: absolute; inset-inline: 0; top: 0; height: 5px; z-index: 3;
  background: linear-gradient(90deg, #2b1846, #9b7ad6, #efe4ff, #9b7ad6, #2b1846);
}

/* Identity sticker: a small overlay near the bottom of the photo. Neutral: no names, phone numbers or owner data. */
.sp6-identity-sticker {
  position: absolute; inset-inline-start: 10px; inset-block-end: 10px; z-index: 2;
  display: inline-flex; align-items: center; gap: .4em;
  max-width: calc(100% - 20px); padding: .3em .6em .3em .35em;
  border-radius: 8px; background: rgba(255, 255, 255, .94); color: #1f2a24;
  font-size: .75rem; font-weight: 600; box-shadow: 0 2px 8px rgba(0, 0, 0, .18);
  pointer-events: none;
}
.sp6-identity-sticker img { width: 22px; height: 22px; object-fit: contain; flex: none; }
.sp6-identity-sticker span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sp6-identity-sticker--space { background: #1f2a24; color: #f5f1e6; }
/* Diamond stickers: plum surface with a light border, so they match the premium card. */
.sp6-card--diamond .sp6-identity-sticker {
  background: linear-gradient(135deg, #2b1846, #4b2a72); color: #faf6ff;
  border: 1px solid #c9b3ef; font-weight: 700;
  box-shadow: 0 4px 12px rgba(43, 24, 70, .4);
}
.sp6-card--diamond .sp6-identity-sticker .sp6-identity-icon { color: #e6d3ff; }
@media (max-width: 640px) {
  .sp6-identity-sticker { inset-block-end: 8px; inset-inline-start: 8px; font-size: .7rem; padding: .25em .5em .25em .3em; }
  .sp6-identity-sticker img { width: 18px; height: 18px; }
}

/* Sticker photo, icon and neutral variants. No Space branding on non-Space stickers. */
.sp6-identity-sticker img.sp6-identity-sticker__photo { width: 24px; height: 24px; border-radius: 50%; object-fit: cover; }
.sp6-card--diamond .sp6-identity-sticker img.sp6-identity-sticker__photo { border: 2px solid #e6d3ff; }

/* Higher specificity: the theme's general media image rule would otherwise size sticker images to the photo. */
.space-property-card__media .sp6-identity-sticker img { width: 22px; height: 22px; max-width: none; flex: none; object-fit: contain; border: 0; }
.space-property-card__media .sp6-identity-sticker img.sp6-identity-sticker__photo { width: 24px; height: 24px; border-radius: 50%; object-fit: cover; }
.space-property-card__media .sp6-identity-sticker img.sp6-identity-sticker__logo { width: auto; height: 22px; max-width: 64px; border-radius: 0; object-fit: contain; }
.space-property-card__media .sp6-identity-sticker .sp6-identity-icon { width: 20px; height: 20px; }
.sp6-identity-sticker .sp6-identity-icon { width: 20px; height: 20px; flex: none; color: #3c4650; }
.sp6-identity-sticker--neutral { color: #3c4650; }

/* Paid homepage sections. Elite (Diamond): deep plum. Featured (Gold): champagne. Each section is its own block. */
.sp6-premium .sp6-section-heading h2 { position: relative; padding-block-end: .45rem; }
.sp6-premium .sp6-section-heading h2::after { content: ""; position: absolute; inset-inline-start: 0; bottom: 0; inline-size: 72px; block-size: 3px; border-radius: 3px; }
.sp6-premium--elite .space-eyebrow { color: #5b3a8a; letter-spacing: .08em; }
.sp6-premium--elite .sp6-section-heading h2::after { background: linear-gradient(90deg, #2b1846, #9b7ad6, #2b1846); }
.sp6-premium--elite .sp6-carousel-btn { color: #4b2a72; }
.sp6-premium--featured .space-eyebrow { color: #8a6a1f; letter-spacing: .08em; }
.sp6-premium--featured .sp6-section-heading h2::after { background: linear-gradient(90deg, #b8913a, #f1dfae, #b8913a); }
.sp6-premium--featured .sp6-carousel-btn { color: #7a5c16; }
.sp6-premium--elite .sp6-card--gold {
  overflow: hidden; border: 1.5px solid #d9b866;
  background: linear-gradient(180deg, #fffaf0 0%, #ffffff 42%);
  box-shadow: 0 16px 34px rgba(150, 110, 30, .18), 0 0 0 3px rgba(225, 196, 120, .16);
}
.sp6-premium--elite .sp6-card--gold::before {
  content: ""; position: absolute; inset-inline: 0; top: 0; height: 4px; z-index: 3;
  background: linear-gradient(90deg, #b8913a, #f6e7bf, #fff8e6, #f6e7bf, #b8913a);
}
.sp6-premium--elite .sp6-card--gold .sp6-identity-sticker { border: 1px solid #e6cf93; }
/* A missing or failed photo shows the branded placeholder background instead of a broken image. */
.sp6-premium .space-property-card__media img.is-failed, .sp6-showcase .space-property-card__media img.is-failed { visibility: hidden; }
/* Fewer cards than the row holds: keep card widths, start from the reading edge. */
.sp6-premium .sp6-featured-track, .sp6-showcase .sp6-featured-track { justify-content: start; padding: 6px 6px 14px; scroll-padding-inline: 6px; } /* room for card borders and shadows */

/* Elite: direct Super Admin selections. Refined ivory card with a thin plum and gold edge; clearly below Diamond. */
.sp6-card--elite { overflow: hidden; border: 1.5px solid #cdbbe3; background: linear-gradient(180deg, #fbf9fe 0%, #ffffff 45%); box-shadow: 0 12px 28px rgba(60, 33, 96, .14); }
.sp6-card--elite::before { content: ""; position: absolute; inset-inline: 0; top: 0; height: 3px; z-index: 3; background: linear-gradient(90deg, #4b2a72, #c9a85a, #4b2a72); }
.sp6-badge--elite { background: #fffdf7; border: 1px solid #c9a85a; color: #3b2160; font-weight: 700; letter-spacing: .02em; }
.sp6-badge--elite .sp6-badge__icon { width: 12px; height: 12px; color: #b8913a; }
/* Featured: the curated «مميز» badge, quiet champagne on ivory. */
.sp6-premium--featured .space-badge--featured, .space-badge--featured { background: #fbf5e6; color: #6b4f12; border: 1px solid #e3cf9a; font-weight: 600; }
/* Super Admin premium preview label (private pages only). */
.sp6-preview-flag { display: inline-block; margin: .5rem 0 0; padding: .3em .8em; border-radius: 999px; background: #fff4d6; border: 1px dashed #c49c3f; color: #5c4510; font-size: .82rem; font-weight: 600; }
.sp6-preview-flag--page { margin-block: 1.25rem 0; }
.sre-premium-preview .space-shell { padding-inline: 0; }

/* Preview page: the carousel is wider than the text column. */
.sp6-preview h1 { margin-block: .25rem 1rem; }

/* ================================================================ Membership rebrand (2026-10): classes stay keyed on
   the INTERNAL plan id; the look follows the PUBLIC tier.  silver → GOLD (champagne) · gold → DIAMOND (platinum)
   · diamond → PREMIER (deep plum + champagne). Flat colours, no gradients or glow. */
.sp6-badge--silver { background: #FBF6EC; border-color: #E3D2B0; color: #7A5C2E; }
.sp6-badge--gold { background: #F2F6FA; border-color: #C9D6E3; color: #46607A; }
.sp6-badge--diamond { background: #211A33; border: 1px solid #211A33; color: #E7D3A3; font-size: .8rem; font-weight: 600; letter-spacing: .04em; padding: .3em .8em; box-shadow: none; }
.sp6-badge__icon { color: #C9A961; }
.sp6-card--silver { border: 1px solid #E8DCC3; box-shadow: 0 6px 16px rgba(150, 115, 50, .08); }
.sp6-card--gold { border: 1px solid #CFDAE6; box-shadow: 0 8px 20px rgba(70, 96, 122, .10); }
.sp6-card--diamond { border: 1.5px solid #211A33; background: #fff; box-shadow: 0 14px 30px rgba(33, 26, 51, .16); }
.sp6-card--diamond::before { height: 3px; background: #C9A961; }
.sp6-card--diamond .sp6-identity-sticker { background: #211A33; color: #F4EFE6; border: 1px solid #C9A961; box-shadow: 0 3px 10px rgba(33, 26, 51, .3); font-weight: 600; }
.sp6-card--diamond .sp6-identity-sticker .sp6-identity-icon { color: #E7D3A3; }
.sp6-card--diamond .sp6-identity-sticker img.sp6-identity-sticker__photo { border: 2px solid #E7D3A3; }
.sp6-premium--elite .sp6-card--gold { border: 1.5px solid #B9C9DA; background: #fff; box-shadow: 0 12px 26px rgba(70, 96, 122, .14); }
.sp6-premium--elite .sp6-card--gold::before { height: 3px; background: #8EA4BB; }
.sp6-premium--elite .sp6-card--gold .sp6-identity-sticker { border: 1px solid #C9D6E3; }

/* ================================================================ Homepage section hierarchy (2026-10-20)
   ELITE    flagship carousel: four cards per view on desktop (3 / 2 / 1.2 on smaller screens), premium styling kept.
   FEATURED one editorial row of up to five smaller cards; below 1180 px it becomes a swipeable track (no squeezing).
   LATEST   four compact horizontal rows (two columns of two on desktop, one column below 900 px).
   Same content width (.space-shell) and tokens throughout. */
.sp6-premium + .sp6-premium, .sp6-premium + .sp6-showcase { padding-block-start: clamp(1.25rem, 2.5vw, 2rem); }
.sp6-section-lead { margin: .35rem 0 0; color: var(--space-gray-600); font-size: .98rem; line-height: 1.6; letter-spacing: .01em; }
.sp6-premium .sp6-section-heading, .sp6-showcase .sp6-section-heading { margin-bottom: 1.25rem; }

/* ---- ELITE: four premium cards per view */
.sp6-premium--elite .sp6-featured-track { --sp6-gap: 20px; grid-auto-columns: calc((100% - 3 * var(--sp6-gap)) / 4); }
.sp6-premium--elite .sp6-featured-track > .sp6-card { display: flex; flex-direction: column; }
.sp6-premium--elite .sp6-card .space-property-card__media { aspect-ratio: 4 / 3; }
.sp6-premium--elite .sp6-card .space-property-card__body { display: flex; flex-direction: column; flex: 1; padding: 1rem 1.05rem .95rem; }
.sp6-premium--elite .sp6-card-topline p { font-size: .78rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.sp6-premium--elite .sp6-card h3 { font-size: 1rem; line-height: 1.55; margin: .3rem 0 .1rem; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; min-height: 3.1em; }
.sp6-premium--elite .sp6-card .space-property-card__price { font-size: 1.15rem; margin: .3rem 0 .35rem; }
.sp6-premium--elite .sp6-card-meta > p.space-help { font-size: .76rem; margin: 0 0 .3rem; }
.sp6-premium--elite .sp6-card .space-property-card__facts { font-size: .74rem; gap: .3rem .8rem; margin: 0 0 .75rem; }
.sp6-premium--elite .sp6-card-footer { margin-top: auto; }
.sp6-premium--elite .sp6-card-bottom { padding-top: .65rem; }
.sp6-premium--elite .sp6-card-bottom > .space-help { display: none; } /* listing code stays on the detail page */
.sp6-premium--elite .sp6-card-bottom > a { margin-inline-start: auto; }
.sp6-premium--elite .sp6-identity-sticker { font-size: .68rem; }
@media (max-width: 1180px) { .sp6-premium--elite .sp6-featured-track { grid-auto-columns: calc((100% - 2 * var(--sp6-gap)) / 3); } }
@media (max-width: 860px) { .sp6-premium--elite .sp6-featured-track { grid-auto-columns: calc((100% - var(--sp6-gap)) / 2); --sp6-gap: 16px; } }
@media (max-width: 640px) { .sp6-premium--elite .sp6-featured-track { grid-auto-columns: 82%; --sp6-gap: 14px; } }

/* ---- FEATURED: one editorial row of five */
.sp6-editorial-grid { --sp6-fgap: 16px; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--sp6-fgap); padding: 4px 2px 10px; }
.sp6-editorial-grid > [role="listitem"] { min-width: 0; display: flex; }
.sp6-editorial-grid .sp6-card {
  display: flex; flex-direction: column; inline-size: 100%;
  background: #fffdf9; border: 1px solid #ebe2cf; border-radius: var(--space-radius); box-shadow: none;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.sp6-editorial-grid .sp6-card:hover { border-color: #d9c690; box-shadow: 0 8px 22px rgb(83 32 74 / 8%); }
.sp6-editorial-grid .sp6-card .space-property-card__media { aspect-ratio: 4 / 3; }
.sp6-editorial-grid .space-property-card__body { display: flex; flex-direction: column; flex: 1; padding: .8rem .85rem .75rem; }
.sp6-editorial-grid .sp6-card-topline p { font-size: .74rem; color: #8a6a1f; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.sp6-editorial-grid .sp6-favorite { font-size: 1.2rem; min-width: 26px; padding: 0; }
.sp6-editorial-grid .sp6-card h3 { font-size: .9rem; line-height: 1.5; margin: .2rem 0 .1rem; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; min-height: 3em; }
.sp6-editorial-grid .space-property-card__price { font-size: 1rem; margin: .2rem 0 .35rem; }
.sp6-editorial-grid .sp6-card-meta > p.space-help { display: none; }
.sp6-editorial-grid .space-property-card__facts { margin: 0 0 .6rem; gap: .2rem .7rem; font-size: .72rem; }
.sp6-editorial-grid .space-property-card__facts > span:nth-child(n+3) { display: none; }
.sp6-editorial-grid .sp6-card-footer { margin-top: auto; }
.sp6-editorial-grid .sp6-card-bottom { padding-top: .55rem; border-top-color: #efe7d6; }
.sp6-editorial-grid .sp6-card-bottom > .space-help { display: none; }
.sp6-editorial-grid .sp6-card-bottom > a { margin-inline-start: auto; font-size: .8rem; color: var(--space-purple-900); }
.sp6-editorial-grid .sp6-card-badges { inset-block-start: .6rem; left: .6rem; right: .6rem; }
.sp6-editorial-grid .sp6-card-badges .space-badge { font-size: .66rem; padding: .15em .55em; }
.sp6-editorial-grid .space-badge--featured {
  background: rgb(255 253 247 / 94%); color: #6b4f12; border: 1px solid #dcc58c;
  font-weight: 600; letter-spacing: .05em; box-shadow: 0 1px 4px rgb(0 0 0 / 8%);
}
.sp6-editorial-grid .sp6-identity-sticker { font-size: .64rem; inset-block-end: 6px; inset-inline-start: 6px; }
/* Too narrow for five legible cards: a swipeable row of fixed-width cards inside the section (no page overflow). */
@media (max-width: 1180px) {
  .sp6-editorial-grid {
    grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 232px;
    overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: thin; -webkit-overflow-scrolling: touch;
  }
  .sp6-editorial-grid > [role="listitem"] { scroll-snap-align: start; }
}
@media (max-width: 900px) { .sp6-editorial-grid { grid-auto-columns: calc((100% - 2 * var(--sp6-fgap)) / 3); } }
@media (max-width: 640px) { .sp6-editorial-grid { --sp6-fgap: 12px; grid-auto-columns: 64%; } }
/* ---- LATEST: four compact rows */
.sp6-latest-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 20px; }
.sp6-latest-row { min-width: 0; }
.sp6-latest-row__link {
  display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 14px; align-items: center;
  padding: 10px; border: 1px solid var(--space-gray-300); border-radius: var(--space-radius-sm, 10px);
  background: var(--space-white); color: inherit; text-decoration: none; transition: border-color .2s ease, box-shadow .2s ease;
}
.sp6-latest-row__link:hover { border-color: var(--space-purple-soft, #c8b6d8); box-shadow: 0 6px 16px rgb(83 32 74 / 8%); }
.sp6-latest-row__link:focus-visible { outline: 2px solid var(--space-purple-900); outline-offset: 2px; }
.sp6-latest-row__thumb { display: block; inline-size: 120px; aspect-ratio: 4 / 3; border-radius: 8px; overflow: hidden; background: var(--space-peach-100); }
.sp6-latest-row__thumb img { display: block; inline-size: 100%; block-size: 100%; object-fit: cover; }
.sp6-latest-row__thumb .space-placeholder img { object-fit: contain; inline-size: 48px; block-size: 48px; margin: auto; }
.sp6-latest-row__body { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.sp6-latest-row__top { display: flex; align-items: center; gap: 8px; min-width: 0; }
.sp6-latest-row__top .space-badge { flex: none; font-size: .68rem; padding: .12em .55em; }
.sp6-latest-row__loc { font-size: .78rem; color: var(--space-gray-600); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.sp6-latest-row__title { font-size: .95rem; font-weight: 600; line-height: 1.5; color: var(--space-purple-900); display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
.sp6-latest-row__meta { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; font-size: .82rem; color: var(--space-gray-600); }
.sp6-latest-row__meta strong { color: var(--space-red-text); font-size: .98rem; font-weight: 700; }
@media (max-width: 899px) { .sp6-latest-list { grid-template-columns: 1fr; gap: 10px; } }
@media (max-width: 480px) {
  .sp6-latest-row__link { grid-template-columns: 96px minmax(0, 1fr); gap: 10px; padding: 8px; }
  .sp6-latest-row__thumb { inline-size: 96px; }
  .sp6-latest-row__title { font-size: .9rem; }
}

/* View-all links sit on the heading baseline, like the other section links. */
.sp6-view-all { white-space: nowrap; font-weight: 600; }
/* English pages: the "English description unavailable" notice (translation pending) sits under the card body in the
   Elite and Featured rows, so every photo starts on the same line. The notice itself is unchanged. */
.sp6-premium .sp6-card > p.space-help { order: 3; margin: 0 .85rem .7rem; font-size: .68rem; line-height: 1.45; }
.sp6-premium .sp6-card > p.space-help a { white-space: nowrap; }