/* ============================================================
   BulGhar Homes — Component primitives.
   Reusable across web + mobile UI kits and slide decks.
   Import after colors_and_type.css.
   ============================================================ */

/* ============ BUTTONS ============ */
.bg-btn {
  --_bg: var(--gold);
  --_fg: var(--navy);
  --_bd: var(--gold);
  display: inline-flex; align-items: center; gap: var(--space-2);
  font-family: var(--font-caption);
  font-weight: 600;
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  font-size: var(--fs-13);
  padding: 14px 24px;
  background: var(--_bg);
  color: var(--_fg);
  border: 1px solid var(--_bd);
  border-radius: var(--radius-pill);
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out),
              transform var(--dur-fast) var(--ease-spring),
              box-shadow var(--dur-base) var(--ease-out);
  text-decoration: none;
  white-space: nowrap;
}
.bg-btn:hover  { background: var(--gold-light); color: var(--navy-deep); box-shadow: var(--shadow-gold-glow); }
.bg-btn:active { transform: translateY(1px) scale(0.985); background: var(--gold-deep); }

.bg-btn--ghost {
  background: transparent;
  color: var(--gold);
  border-color: var(--gold);
}
.bg-btn--ghost:hover { background: var(--gold-tint); color: var(--gold-light); }

.bg-btn--solid-navy {
  background: var(--navy);
  color: var(--white);
  border-color: var(--navy);
}
.bg-btn--solid-navy:hover { background: var(--navy-soft); box-shadow: var(--shadow-md); }

.bg-btn--quiet {
  background: transparent;
  color: var(--fg);
  border-color: transparent;
}
.bg-btn--quiet:hover { background: rgba(255,255,255,0.08); }

.bg-btn--sm  { padding: 10px 16px; font-size: var(--fs-12); }
.bg-btn--lg  { padding: 18px 32px; font-size: var(--fs-14); }

/* Icon button */
.bg-icon-btn {
  width: 44px; height: 44px;
  display: inline-grid; place-items: center;
  border-radius: var(--radius-pill);
  background: rgba(255,255,255,0.06);
  color: var(--gold);
  border: 1px solid var(--navy-line);
  cursor: pointer;
  transition: background var(--dur-fast), border-color var(--dur-fast);
}
.bg-icon-btn:hover { background: var(--gold-tint); border-color: var(--gold); }
.on-cream .bg-icon-btn { background: var(--cream-soft); color: var(--gold-deep); border-color: var(--cream-line); }
.on-cream .bg-icon-btn:hover { background: var(--gold-tint); border-color: var(--gold); }

/* ============ CHIPS / BADGES ============ */
.bg-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 12px;
  font-family: var(--font-caption);
  font-size: var(--fs-12);
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  border-radius: var(--radius-pill);
  background: rgba(255,255,255,0.06);
  color: var(--fg-2);
  border: 1px solid var(--navy-line);
  cursor: pointer;
  transition: all var(--dur-fast) var(--ease-out);
}
.bg-chip:hover  { color: var(--gold); border-color: var(--gold); }
.bg-chip--active { background: var(--gold-tint); color: var(--gold); border-color: var(--gold); }
.on-cream .bg-chip { background: transparent; color: var(--ink-2); border-color: var(--cream-line); }
.on-cream .bg-chip--active { background: var(--gold-tint); color: var(--gold-deep); border-color: var(--gold); }

.bg-badge {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 4px 10px;
  font-family: var(--font-caption);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  border-radius: var(--radius-pill);
  background: var(--gold);
  color: var(--navy);
}
.bg-badge--ghost { background: transparent; color: var(--gold); border: 1px solid var(--gold); }
.bg-badge--cream { background: var(--cream); color: var(--navy); }

/* ============ CARDS ============ */
.bg-card {
  background: var(--cream-soft);
  color: var(--ink);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  overflow: hidden;
  transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);
}
.bg-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); }

.bg-card--navy {
  background: var(--navy-soft);
  color: var(--fg);
  border: 1px solid var(--navy-line);
}

.bg-card--gold-edge {
  border: 1px solid var(--gold);
  box-shadow: var(--shadow-gold-glow);
}

/* ============ FORM CONTROLS ============ */
.bg-field {
  display: flex; flex-direction: column; gap: 6px;
}
.bg-field > label, .bg-field-label {
  font-family: var(--font-caption);
  font-size: var(--fs-12);
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  color: var(--gold);
}
.bg-input, .bg-select, .bg-textarea {
  font-family: var(--font-body);
  font-size: var(--fs-16);
  padding: 14px 18px;
  background: transparent;
  color: var(--fg);
  border: 1px solid var(--navy-line);
  border-radius: var(--radius-md);
  transition: border-color var(--dur-fast), background var(--dur-fast);
  width: 100%;
}
.bg-input::placeholder { color: var(--fg-3); }
.bg-input:hover, .bg-select:hover, .bg-textarea:hover { border-color: var(--gold); }
.bg-input:focus, .bg-select:focus, .bg-textarea:focus { border-color: var(--gold); outline: none; background: rgba(255,255,255,0.04); }
.on-cream .bg-input, .on-cream .bg-select, .on-cream .bg-textarea {
  border-color: var(--cream-line); color: var(--ink); background: var(--white);
}
.on-cream .bg-input:focus, .on-cream .bg-select:focus, .on-cream .bg-textarea:focus { background: var(--white); }

/* Search field — pill with leading icon */
.bg-search {
  display: flex; align-items: center; gap: var(--space-3);
  padding: 10px 18px;
  border: 1px solid var(--navy-line);
  border-radius: var(--radius-pill);
  background: rgba(255,255,255,0.04);
  transition: border-color var(--dur-fast);
}
.bg-search:focus-within { border-color: var(--gold); }
.bg-search input { all: unset; flex: 1; font-family: var(--font-body); font-size: var(--fs-16); color: inherit; }
.bg-search input::placeholder { color: var(--fg-3); }
.on-cream .bg-search { background: var(--white); border-color: var(--cream-line); }

/* ============ DIVIDER + ORNAMENTS ============ */
.bg-rule {
  height: 1px; background: linear-gradient(to right, transparent, var(--gold) 50%, transparent);
  border: 0; margin: var(--space-8) 0;
}
.bg-rule--solid { background: var(--navy-line); }
.on-cream .bg-rule--solid { background: var(--cream-line); }

/* Tagline ornament — used as decorative section dividers */
.bg-ornament {
  display: inline-flex; align-items: center; gap: var(--space-3);
  font-family: var(--font-tagline);
  text-transform: uppercase;
  letter-spacing: var(--ls-tag);
  color: var(--gold);
  font-size: var(--fs-12);
}
.bg-ornament::before, .bg-ornament::after {
  content: ""; height: 1px; width: 48px; background: currentColor; opacity: 0.55;
}

/* ============ LINK TREATMENTS ============ */
.bg-link {
  color: var(--gold);
  text-decoration: none;
  background-image: linear-gradient(currentColor, currentColor);
  background-size: 0% 1px;
  background-position: 0 100%;
  background-repeat: no-repeat;
  transition: background-size var(--dur-base) var(--ease-out), color var(--dur-fast);
}
.bg-link:hover { background-size: 100% 1px; color: var(--gold-light); }

/* ============ NAV ============ */
.bg-navlink {
  font-family: var(--font-caption);
  font-size: var(--fs-13);
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  color: var(--fg-2);
  text-decoration: none;
  padding: 8px 0;
  position: relative;
  transition: color var(--dur-fast);
}
.bg-navlink:hover, .bg-navlink--active { color: var(--gold); }
.bg-navlink--active::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -2px;
  height: 1px; background: var(--gold);
}

/* ============ HOVER MEDIA ============ */
.bg-media-zoom { overflow: hidden; }
.bg-media-zoom > img { transition: transform var(--dur-slow) var(--ease-out); }
.bg-media-zoom:hover > img { transform: scale(1.06); }

/* ============ BRAND PATTERNS ============ */
/* Usage: add class to any surface element. Combine with brand bg colors. */

.bg-pattern-diamond {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24'%3E%3Cpath d='M12 0L24 12L12 24L0 12Z' fill='none' stroke='%23cbb26a' stroke-width='0.7' opacity='0.35'/%3E%3C/svg%3E");
}
.bg-pattern-dots {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20'%3E%3Ccircle cx='10' cy='10' r='1.2' fill='%23cbb26a' opacity='0.28'/%3E%3C/svg%3E");
}
.bg-pattern-arch {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40'%3E%3Cpath d='M0 40C10 18 30 18 40 40' fill='none' stroke='%23cbb26a' stroke-width='0.8' opacity='0.32'/%3E%3C/svg%3E");
}
.bg-pattern-diagonal {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10'%3E%3Cline x1='0' y1='10' x2='10' y2='0' stroke='%23cbb26a' stroke-width='0.55' opacity='0.22'/%3E%3C/svg%3E");
}
.bg-pattern-ogee {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28'%3E%3Cpath d='M0 0C7 14 21 14 28 0' fill='none' stroke='%23cbb26a' stroke-width='0.7' opacity='0.32'/%3E%3Cpath d='M0 28C7 14 21 14 28 28' fill='none' stroke='%23cbb26a' stroke-width='0.7' opacity='0.32'/%3E%3C/svg%3E");
}
/* On cream: darker gold for visibility */
.on-cream .bg-pattern-diamond  { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24'%3E%3Cpath d='M12 0L24 12L12 24L0 12Z' fill='none' stroke='%23a8924f' stroke-width='0.7' opacity='0.3'/%3E%3C/svg%3E"); }
.on-cream .bg-pattern-dots      { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20'%3E%3Ccircle cx='10' cy='10' r='1.2' fill='%23a8924f' opacity='0.3'/%3E%3C/svg%3E"); }
.on-cream .bg-pattern-arch      { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40'%3E%3Cpath d='M0 40C10 18 30 18 40 40' fill='none' stroke='%23a8924f' stroke-width='0.8' opacity='0.28'/%3E%3C/svg%3E"); }
.on-cream .bg-pattern-diagonal  { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10'%3E%3Cline x1='0' y1='10' x2='10' y2='0' stroke='%23a8924f' stroke-width='0.55' opacity='0.22'/%3E%3C/svg%3E"); }
.on-cream .bg-pattern-ogee      { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28'%3E%3Cpath d='M0 0C7 14 21 14 28 0' fill='none' stroke='%23a8924f' stroke-width='0.7' opacity='0.28'/%3E%3Cpath d='M0 28C7 14 21 14 28 28' fill='none' stroke='%23a8924f' stroke-width='0.7' opacity='0.28'/%3E%3C/svg%3E"); }

/* ============ BRAND TEXTURES ============ */
/* Grain/noise overlays — apply on top of brand surface colors */

.bg-texture-grain {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)' opacity='0.06'/%3E%3C/svg%3E");
}
.bg-texture-linen {
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)' opacity='0.055'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='4' height='4'%3E%3Cline x1='0' y1='0' x2='4' y2='4' stroke='%23c8b88a' stroke-width='0.3' opacity='0.15'/%3E%3C/svg%3E");
}
.bg-texture-stone {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='turbulence' baseFrequency='0.5' numOctaves='5' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)' opacity='0.07'/%3E%3C/svg%3E");
}

/* ============ BRAND FRAMES ============ */
/* Corner marks — add to a position:relative container */

/* 2-corner minimal (top-left + bottom-right) */
.bg-frame-2corner::before,
.bg-frame-2corner::after {
  content: ""; position: absolute;
  width: 10px; height: 10px;
  border-color: var(--gold); border-style: solid;
  opacity: 0.7;
}
.bg-frame-2corner::before { top: 10px; left: 10px; border-width: 1.5px 0 0 1.5px; }
.bg-frame-2corner::after  { bottom: 10px; right: 10px; border-width: 0 1.5px 1.5px 0; }

/* 4-corner full — requires nested .bg-frame-4corner-inner element */
.bg-frame-4corner { position: relative; }
.bg-frame-4corner::before,
.bg-frame-4corner::after {
  content: ""; position: absolute;
  width: 14px; height: 14px;
  border-color: var(--gold); border-style: solid;
  opacity: 0.8; pointer-events: none; z-index: 1;
}
.bg-frame-4corner::before { top: 10px; left: 10px; border-width: 1.5px 0 0 1.5px; }
.bg-frame-4corner::after  { top: 10px; right: 10px; border-width: 1.5px 1.5px 0 0; }
.bg-frame-4corner-bl::before,
.bg-frame-4corner-bl::after {
  content: ""; position: absolute;
  width: 14px; height: 14px;
  border-color: var(--gold); border-style: solid;
  opacity: 0.8; pointer-events: none; z-index: 1;
}
.bg-frame-4corner-bl::before { bottom: 10px; left: 10px; border-width: 0 0 1.5px 1.5px; }
.bg-frame-4corner-bl::after  { bottom: 10px; right: 10px; border-width: 0 1.5px 1.5px 0; }

/* Full inset border */
.bg-frame-inset {
  box-shadow: inset 0 0 0 10px transparent,
              inset 0 0 0 11px rgba(203,178,106,0.35);
}

/* ============ UTILITY ============ */
.bg-skeleton {
  background: linear-gradient(90deg, var(--navy-soft) 0%, var(--navy-line) 50%, var(--navy-soft) 100%);
  background-size: 200% 100%;
  animation: bg-shimmer 1.4s linear infinite;
  border-radius: var(--radius-sm);
}
@keyframes bg-shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }