/* ============================================================
   COMPONENTS — reusable UI building blocks
   Buttons · Glass panels · Cards · Badges · Inputs · Chips
   Every section on the site should reuse these classes.
   ============================================================ */

/* ============================================================
   BUTTONS
   Usage: <a class="btn btn--primary">Buy Now</a>
   Variants: --primary  --outline  --ghost  --dark
   Sizes:    --sm  (default)  --lg
   ============================================================ */
.btn {
  --_pad-y: 0.7rem;
  --_pad-x: 1.5rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--_pad-y) var(--_pad-x);
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  line-height: 1;
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  cursor: pointer;
  white-space: nowrap;
  transition: transform var(--dur-fast) var(--ease-out),
              box-shadow var(--dur-base) var(--ease-out),
              background-color var(--dur-base) var(--ease-out),
              color var(--dur-base) var(--ease-out),
              border-color var(--dur-base) var(--ease-out);
}
.btn:hover  { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }

/* Primary — gold fill (the main CTA) */
.btn--primary {
  background: var(--gold-gradient);
  color: var(--color-on-primary);
  box-shadow: var(--shadow-gold);
}
.btn--primary:hover { box-shadow: 0 14px 36px rgba(166,127,56,0.45); }

/* Outline — bordered, transparent (secondary CTA) */
.btn--outline {
  background: transparent;
  color: var(--color-heading);
  border-color: var(--color-border-strong);
}
.btn--outline:hover {
  border-color: var(--color-primary);
  color: var(--color-primary);
}

/* Ghost — text only with subtle hover */
.btn--ghost {
  background: transparent;
  color: var(--color-heading);
  padding-inline: var(--space-3);
}
.btn--ghost:hover { color: var(--color-primary); }

/* Dark — near-black fill (e.g. hero "Buy Now" pill) */
.btn--dark {
  background: var(--ink-900);
  color: #fff;
  border-color: rgba(255,255,255,0.12);
}
.btn--dark:hover { background: var(--ink-700); }

/* On-glass button (light border over frosted glass) */
.btn--glass {
  background: rgba(255,255,255,0.08);
  color: #fff;
  border-color: var(--glass-light-border);
  backdrop-filter: blur(6px);
}
.btn--glass:hover { background: rgba(255,255,255,0.18); }

/* Sizes */
.btn--sm { --_pad-y: 0.5rem;  --_pad-x: 1.1rem; font-size: var(--fs-xs); }
.btn--lg { --_pad-y: 0.95rem; --_pad-x: 2.1rem; font-size: var(--fs-body); }

/* Full width (mobile CTAs) */
.btn--block { display: flex; width: 100%; }

/* ============================================================
   GLASS PANEL
   Frosted-glass surface. Use .glass--dark over bright images,
   .glass--light over dark/photo backgrounds.
   ============================================================ */
.glass {
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  border-radius: var(--radius-lg);
  border: 1px solid transparent;
}
.glass--dark {
  background: var(--glass-dark-bg);
  border-color: var(--glass-dark-border);
  box-shadow: var(--glass-dark-shadow);
  color: #fff;
}
.glass--light {
  background: var(--glass-light-bg);
  border-color: var(--glass-light-border);
  box-shadow: var(--glass-light-shadow);
  color: #fff;
}
/* subtle top highlight for a real "glass edge" look */
.glass--sheen { position: relative; overflow: hidden; }
.glass--sheen::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 1px;
  background: linear-gradient(90deg,
    transparent, rgba(255,255,255,0.6), transparent);
}

/* ============================================================
   CARD  (base surface for property / blog cards)
   Structure:
     .card
       .card__media   (image + optional .card__badge / .card__tag)
       .card__body
         .card__title
         .card__meta   (icon + label row — repeatable)
         .card__footer (price + CTA, cleanly separated — no overlap)
   ============================================================ */
.card {
  display: flex;
  flex-direction: column;
  /* Frosted glass, matching the filter bar and the property-page panels.
     Border is navy-tinted so the edge stays visible on light backgrounds. */
  background: rgba(255, 255, 255, 0.55);
  -webkit-backdrop-filter: blur(16px) saturate(1.25);
  backdrop-filter: blur(16px) saturate(1.25);
  border: 1px solid rgba(6, 22, 46, 0.14);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: 0 6px 20px rgba(6, 22, 46, 0.05),
              inset 0 1px 0 rgba(255, 255, 255, 0.6);
  transition: transform var(--dur-base) var(--ease-out),
              box-shadow var(--dur-base) var(--ease-out),
              border-color var(--dur-base) var(--ease-out);
}
.card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
  border-color: var(--gold-300);
}

.card__media {
  position: relative;
  aspect-ratio: 16 / 11;
  overflow: hidden;
  background: var(--bg-muted);
}
.card__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform var(--dur-slow) var(--ease-out);
}
.card:hover .card__media img { transform: scale(1.06); }

/* Status tag — top-left of image (e.g. "Off Plan") */
.card__tag {
  position: absolute;
  top: var(--space-3);
  left: var(--space-3);
}
/* Payment-plan / price badge — top-right of image (e.g. "60/40") */
.card__badge {
  position: absolute;
  top: var(--space-3);
  right: var(--space-3);
  padding: 0.35rem 0.7rem;
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: var(--fs-sm);
  letter-spacing: var(--tracking-wide);
  color: var(--color-on-primary);
  background: var(--gold-gradient);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-sm);
}

.card__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-5);
  flex: 1;                 /* footer sinks to bottom → equal-height cards */
}
.card__title {
  font-size: var(--fs-h3);
  text-transform: uppercase;
  letter-spacing: var(--tracking-display);
  line-height: 1.1;
  margin-bottom: var(--space-1);
}
/* Icon + label row (location, developer) — icons align, text can't collide */
.card__meta {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--fs-sm);
  color: var(--color-text-muted);
  min-width: 0;
}
.card__meta > svg,
.card__meta-icon {
  flex: 0 0 auto;
  width: 16px; height: 16px;
  color: var(--gold-500);
}
.card__meta span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Footer: price on the left, CTA on the right — a clean divider, no overlap */
.card__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin-top: var(--space-4);
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-border);
}
.card__price {
  display: flex;
  flex-direction: column;
  line-height: 1.1;
}
.card__price small {
  font-size: var(--fs-xs);
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
}
.card__price b {
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  font-weight: var(--fw-bold);
  color: var(--color-heading);
}

/* ------------------------------------------------------------
   PROPERTY CARD  (matches the "Latest Launched Projects" grid)
   - image is INSET inside a padded frame (rounded), not full-bleed
   - location + developer stacked on the left
   - payment plan "60/40 PP" as gold text on the right
   - full-width gold CTA at the bottom
   ------------------------------------------------------------ */
.card--property { padding: var(--space-3); }              /* 12px frame */
.card--property .card__media {
  border-radius: var(--radius-md);
  aspect-ratio: 16 / 11;
}
.card--property .card__body {
  padding: var(--space-4) 2px 2px;   /* align text with the inset image */
  gap: var(--space-3);
}

/* left meta stack + right payment plan on one row */
.card__info {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}
.card__meta-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}
.card__plan {
  font-family: var(--font-display);
  font-size: 1.55rem;
  line-height: 1;
  letter-spacing: var(--tracking-display);
  color: var(--gold-500);
  white-space: nowrap;
}
.card__plan small {
  font-size: 0.6em;
  font-weight: var(--fw-bold);
  letter-spacing: 0;
}

/* ============================================================
   BADGE / PRICE TAG / CHIP
   ============================================================ */
.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: 0.3rem 0.7rem;
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  border-radius: var(--radius-sm);
  background: var(--gold-100);
  color: var(--gold-700);
}
/* Gold price pill (bottom-right of property cards) */
.price-tag {
  display: inline-flex;
  align-items: center;
  padding: 0.4rem 0.9rem;
  font-weight: var(--fw-bold);
  font-size: var(--fs-sm);
  color: var(--color-on-primary);
  background: var(--gold-gradient);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-sm);
}
/* Chip — used for filters / tags */
.chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: 0.35rem 0.8rem;
  font-size: var(--fs-sm);
  border-radius: var(--radius-pill);
  border: 1px solid var(--color-border);
  background: var(--bg-surface);
  color: var(--color-text);
}
.chip--active {
  background: var(--ink-900);
  color: #fff;
  border-color: var(--ink-900);
}

/* ============================================================
   FORM CONTROLS  (search bar, filters)
   ============================================================ */
.field { display: flex; flex-direction: column; gap: var(--space-1); }
.field__label {
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-text-muted);
}
.input, .select {
  width: 100%;
  padding: 0.7rem 0.9rem;
  font-size: var(--fs-sm);
  color: var(--color-heading);
  background: var(--bg-surface);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-sm);
  transition: border-color var(--dur-fast) var(--ease-out),
              box-shadow var(--dur-fast) var(--ease-out);
}
.input:focus, .select:focus {
  outline: none;
  border-color: var(--gold-400);
  box-shadow: 0 0 0 3px rgba(203,169,90,0.2);
}
.select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%236b7178' d='M6 8 0 0h12z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.9rem center;
  padding-right: 2.2rem;
}

/* ============================================================
   DIVIDER / DECORATIVE GOLD RULE
   ============================================================ */
.rule-gold {
  width: 64px; height: 3px;
  margin: var(--space-3) auto 0;
  background: var(--gold-gradient);
  border-radius: var(--radius-pill);
}

/* ============================================================
   STAR RATING (testimonials)
   ============================================================ */
.stars { display: inline-flex; gap: 2px; color: var(--gold-400); }

/* ============================================================
   ACCENT WORD (section headings)
   Inherits the heading colour in light theme; turns gold in dark
   theme — matching the Figma "Home version 2" dark design where
   part of each section title is gold.
   Usage: <h2>Latest Launched Projects <span class="accent">in Dubai</span></h2>
   ============================================================ */
.accent { color: inherit; }
:root[data-theme="dark"] .accent {
  background: var(--gold-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}


/* ---- Card glass: dark theme ---- */
:root[data-theme="dark"] .card,
:root[data-theme="dark"] .card.card--property {
  background: rgba(255, 255, 255, 0.055);
  border: 1px solid rgba(255, 255, 255, 0.16);
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.35),
              inset 0 1px 0 rgba(255, 255, 255, 0.10);
}