/*
 *  PropertyVisibles — Shared UI Components
 *  Source of truth: homepage-concept.html
 *  Reusable across ALL pages
 */

/* ═══ FEATURED PROPERTY CARDS ═══ */
.feat-card {
  flex-shrink: 0;
  width: 280px;
  background: var(--bg-card);
  border: none;
  border-radius: 5px;
  overflow: hidden;
  box-shadow: 0 2px 12px rgba(0,0,0,.07), 0 0 0 1px rgba(0,0,0,.04);
  transition: background .3s, box-shadow .25s, transform .25s;
  cursor: pointer;
}
.feat-card:hover { box-shadow: 0 8px 28px rgba(0,0,0,.14), 0 0 0 1px rgba(0,0,0,.05); transform: translateY(-3px); }


.feat-img {
  height: 165px;
  background: var(--bg-secondary);
  position: relative;
  display: flex; align-items: center; justify-content: center;
  transition: background .3s;
  overflow: hidden;
}
.feat-img.g1 { background: linear-gradient(135deg, #c8beb0 0%, #a09080 100%); }
.feat-img.g2 { background: linear-gradient(135deg, #a8b8b0 0%, #788890 100%); }
.feat-img.g3 { background: linear-gradient(135deg, #b0b0a0 0%, #888878 100%); }
.feat-img.g4 { background: linear-gradient(135deg, #b8c0c0 0%, #909898 100%); }
.feat-img.g5 { background: linear-gradient(135deg, #c0b0a0 0%, #988070 100%); }
[data-theme="dark"] .feat-img.g1 { background: linear-gradient(135deg, #484038 0%, #302820 100%); }
[data-theme="dark"] .feat-img.g2 { background: linear-gradient(135deg, #303838 0%, #202830 100%); }
[data-theme="dark"] .feat-img.g3 { background: linear-gradient(135deg, #383830 0%, #282818 100%); }
[data-theme="dark"] .feat-img.g4 { background: linear-gradient(135deg, #383c3c 0%, #282c2c 100%); }
[data-theme="dark"] .feat-img.g5 { background: linear-gradient(135deg, #403830 0%, #302018 100%); }

.feat-badge {
  position: absolute; top: .65rem; left: .65rem;
  font-size: .55rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
  padding: .2rem .55rem; border-radius: 2px;
}
.fb-new { background: var(--orange); color: #fff; }
.fb-exc { background: rgba(28,28,28,.85); color: #f0ede8; backdrop-filter: blur(4px); }
.fb-gem { background: rgba(90,85,80,.85); color: #f0ede8; backdrop-filter: blur(4px); }

.feat-fav {
  position: absolute; top: .65rem; right: .65rem;
  width: 27px; height: 27px; border-radius: 50%;
  background: var(--bg-primary); border: 1px solid var(--border);
  display: flex; align-items: center; justify-content: center;
  font-size: .75rem; cursor: pointer; transition: all .2s;
}
.feat-fav:hover { background: var(--orange-soft); border-color: var(--orange); }

.feat-body { padding: .95rem 1rem 1.1rem; }
.feat-type {
  font-size: .58rem; font-weight: 500; letter-spacing: .1em; text-transform: uppercase;
  color: var(--orange-text); margin-bottom: .25rem; transition: color .3s;
}
.feat-loc {
  font-size: .68rem; font-weight: 600; letter-spacing: -.01em;
  color: var(--text-primary); margin-bottom: .2rem; transition: color .3s;
}
.feat-title {
  font-size: .78rem; font-weight: 400; color: var(--text-secondary);
  margin-bottom: .65rem; line-height: 1.4; transition: color .3s;
}
.feat-specs {
  font-family: 'Inter', sans-serif; font-size: .63rem; color: var(--text-muted);
  display: flex; gap: .75rem; margin-bottom: .75rem;
  padding-bottom: .75rem; border-bottom: 1px solid var(--border);
  transition: color .3s, border-color .3s;
}
.feat-footer { display: flex; align-items: center; justify-content: space-between; }
.feat-price { font-size: .98rem; font-weight: 600; letter-spacing: -.02em; color: var(--text-primary); transition: color .3s; }
.feat-price small { font-family: 'Inter', sans-serif; font-size: .58rem; font-weight: 400; color: var(--text-muted); display: block; margin-bottom: .1rem; }
.feat-arrow { font-size: .75rem; color: var(--text-muted); transition: color .2s, transform .2s; }
.feat-card:hover .feat-arrow { color: var(--orange); transform: translateX(3px); }


/* ═══ INSIGHT CARDS ═══ */
.ins-card {
  background: var(--bg-card); border: 1px solid var(--border); border-radius: 5px;
  overflow: hidden; cursor: pointer;
  transition: background .3s, border-color .3s, box-shadow .25s;
}
.ins-card:hover { box-shadow: var(--shadow-hover); }
.ins-img { height: 150px; background: var(--bg-secondary); position: relative; transition: background .3s; display: flex; align-items: center; justify-content: center; }
.ins-img-sm { height: 90px; }
.ins-cat {
  position: absolute; bottom: .65rem; left: .65rem;
  font-size: .55rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
  padding: .2rem .55rem; border-radius: 2px;
}
.ic-market { background: var(--text-primary); color: var(--bg-primary); transition: background .3s, color .3s; }
.ic-legal  { background: rgba(60,100,200,.85); color: #fff; }
.ic-guide  { background: rgba(50,140,80,.85); color: #fff; }
.ins-body { padding: .95rem 1rem 1.1rem; }
.ins-date { font-family: 'Inter', sans-serif; font-size: .6rem; color: var(--text-muted); margin-bottom: .35rem; transition: color .3s; }
.ins-title { font-size: .88rem; font-weight: 600; letter-spacing: -.015em; line-height: 1.35; color: var(--text-primary); transition: color .3s; }
.ins-card:hover .ins-title { color: var(--orange-text); }
.ins-excerpt { font-family: 'Inter', sans-serif; font-size: .73rem; font-weight: 300; color: var(--text-secondary); line-height: 1.7; margin-top: .45rem; transition: color .3s; }


/* ═══ AGENT CARDS ═══ */
.agent-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 6px;
  overflow: hidden;
  transition: background .3s, border-color .3s, box-shadow .25s, transform .25s;
  cursor: pointer;
}
.agent-card:hover { box-shadow: var(--shadow-hover); transform: translateY(-3px); }

.agent-photo {
  height: 240px;
  background: var(--bg-secondary);
  position: relative;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
  transition: background .3s;
}
.agent-photo::after {
  content: '';
  position: absolute; bottom: 0; left: 0; right: 0;
  height: 60px;
  background: linear-gradient(to top, var(--bg-card), transparent);
  transition: background .3s;
}
.agent-photo.ap1 { background: linear-gradient(160deg, #c8c0b8 0%, #a89888 100%); }
.agent-photo.ap2 { background: linear-gradient(160deg, #b8c0b8 0%, #909890 100%); }
.agent-photo.ap3 { background: linear-gradient(160deg, #c0b8b0 0%, #988878 100%); }
[data-theme="dark"] .agent-photo.ap1 { background: linear-gradient(160deg, #3a3228 0%, #2a2218 100%); }
[data-theme="dark"] .agent-photo.ap2 { background: linear-gradient(160deg, #283028 0%, #182818 100%); }
[data-theme="dark"] .agent-photo.ap3 { background: linear-gradient(160deg, #322820 0%, #221810 100%); }

.agent-photo-placeholder {
  display: flex; flex-direction: column; align-items: center;
  gap: .5rem; opacity: .18; z-index: 1;
}
[data-theme="dark"] .agent-photo-placeholder { opacity: .12; }
.agent-photo-placeholder svg { display: block; }
.agent-photo-label {
  font-family: 'Inter', sans-serif;
  font-size: .58rem; letter-spacing: .12em;
  text-transform: uppercase; color: var(--text-primary);
}

.agent-avail {
  position: absolute; top: .75rem; right: .75rem; z-index: 2;
  display: flex; align-items: center; gap: .35rem;
  background: var(--bg-primary); border: 1px solid var(--border);
  border-radius: 20px; padding: .22rem .65rem;
  font-family: 'Inter', sans-serif; font-size: .58rem; font-weight: 500;
  color: var(--text-secondary); transition: background .3s, border-color .3s;
}
.avail-dot { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; }
.ad-green, .avail--green .avail-dot { background: #22C55E; }
.ad-orange, .avail--orange .avail-dot { background: var(--orange); }

.agent-langs {
  position: absolute; bottom: .85rem; left: .85rem; z-index: 2;
  display: flex; gap: .3rem;
}
.agent-lang-flag, .agent-lang-badge {
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--bg-primary); border: 1px solid var(--border);
  display: flex; align-items: center; justify-content: center;
  font-family: 'Inter', sans-serif;
  font-size: .52rem; font-weight: 600; line-height: 1;
  color: var(--text-secondary);
  transition: background .3s, border-color .3s;
}

.agent-body, .agent-info { padding: 1.2rem 1.3rem 1.4rem; }
.agent-name {
  font-size: 1rem; font-weight: 600;
  letter-spacing: -.02em; color: var(--text-primary);
  margin-bottom: .15rem; transition: color .3s;
}
.agent-role {
  font-size: .65rem; font-weight: 500;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--orange-text); margin-bottom: .75rem;
  transition: color .3s;
}
.agent-bio {
  font-family: 'Inter', sans-serif;
  font-size: .76rem; font-weight: 300;
  color: var(--text-secondary); line-height: 1.7;
  margin-bottom: 1.1rem; transition: color .3s;
}
.agent-specialisms, .agent-tags { display: flex; gap: .4rem; flex-wrap: wrap; margin-bottom: 1.1rem; }
.agent-spec, .agent-tag {
  font-family: 'Inter', sans-serif; font-size: .6rem; font-weight: 500;
  letter-spacing: .05em; padding: .22rem .6rem; border-radius: 20px;
  background: var(--tag-bg); color: var(--tag-text);
  transition: background .3s, color .3s;
}
.agent-footer {
  display: flex; align-items: center; gap: .75rem;
  padding-top: .9rem; border-top: 1px solid var(--border);
  transition: border-color .3s;
}
.agent-contact-btns { display: flex; gap: .5rem; }
.agent-btn {
  display: inline-flex; align-items: center; gap: .3rem;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: .72rem; font-weight: 500;
  padding: .46rem 1.2rem; border-radius: 3px;
  cursor: pointer; transition: all .2s; border: none;
  white-space: nowrap;
}
.agent-btn-primary { background: var(--orange); color: #fff !important; }
.agent-btn-primary:hover { background: var(--orange-dark); color: #fff !important; }
.agent-btn-secondary {
  background: var(--bg-secondary); color: var(--text-secondary);
  border: 1px solid var(--border);
  transition: all .2s, background .3s, color .3s, border-color .3s;
}
.agent-btn-secondary:hover { border-color: var(--border-strong); color: var(--text-primary); }
.agent-btn-ghost {
  display: flex; align-items: center; gap: .3rem;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: .65rem; font-weight: 500;
  color: var(--text-secondary) !important;
  transition: color .2s;
}
.agent-btn-ghost:hover { color: var(--orange) !important; }
.agent-listings-count, .agent-listings {
  font-family: 'Inter', sans-serif; font-size: .63rem; color: var(--text-muted);
  margin-left: auto;
  transition: color .3s;
}
.agent-listings-count strong { color: var(--text-primary); font-weight: 500; transition: color .3s; }


/* ═══ SERVICE CARDS ═══ */
.srv-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 5px;
  overflow: hidden;
  transition: background .3s, border-color .3s, box-shadow .25s;
}
.srv-card:hover { box-shadow: var(--shadow-hover); }
.srv-header {
  background: var(--bg-secondary);
  padding: 1.5rem 1.75rem 1.25rem;
  border-bottom: 1px solid var(--border);
  transition: background .3s, border-color .3s;
}
.srv-icon {
  width: 36px; height: 36px; border-radius: 6px;
  background: var(--orange-soft);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.1rem; margin-bottom: .9rem;
  transition: background .3s;
}
.srv-title {
  font-size: 1rem; font-weight: 600; letter-spacing: -.02em;
  color: var(--text-primary); margin-bottom: .35rem;
  transition: color .3s;
}
.srv-subtitle {
  font-family: 'Inter', sans-serif;
  font-size: .72rem; color: var(--text-muted);
  transition: color .3s;
}
.srv-body { padding: 1.4rem 1.75rem 1.75rem; }
.srv-desc {
  font-family: 'Inter', sans-serif;
  font-size: .79rem; font-weight: 300; line-height: 1.75;
  color: var(--text-secondary);
  margin-bottom: 1.4rem; transition: color .3s;
}
.process-steps { display: flex; flex-direction: column; gap: 0; margin-top: .25rem; }
.step {
  display: flex; gap: 1rem; align-items: flex-start;
  padding: .7rem 0; border-bottom: 1px solid var(--border);
  transition: border-color .3s;
}
.step:last-child { border-bottom: none; }
.step-num {
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--orange); color: #fff;
  font-size: .6rem; font-weight: 600;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; margin-top: .1rem;
}
.step-label {
  font-size: .72rem; font-weight: 600; letter-spacing: -.01em;
  color: var(--text-primary); margin-bottom: .15rem;
  transition: color .3s;
}
.step-desc {
  font-family: 'Inter', sans-serif;
  font-size: .68rem; color: var(--text-muted);
  line-height: 1.5; transition: color .3s;
}
.srv-cta {
  display: inline-block; background: var(--orange); color: #fff; border: none;
  padding: .6rem 1.4rem; font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: .72rem; font-weight: 500; cursor: pointer; border-radius: 3px;
  transition: background .2s; margin-top: 1.25rem;
}
.srv-cta:hover { background: var(--orange-dark); }
.srv-cta-ghost {
  display: inline-block; background: transparent; color: var(--orange-text);
  border: 1.5px solid var(--orange);
  padding: .6rem 1.4rem; font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: .72rem; font-weight: 500; cursor: pointer; border-radius: 3px;
  transition: all .2s; margin-top: 1.25rem;
}
.srv-cta-ghost:hover { background: var(--orange-soft); }

.partner-badge {
  display: inline-flex; align-items: center; gap: .5rem;
  background: var(--bg-secondary);
  border: 1px solid var(--border); border-radius: 3px;
  padding: .5rem .9rem; font-family: 'Inter', sans-serif;
  font-size: .65rem; color: var(--text-muted);
  margin-bottom: 1rem;
  transition: background .3s, border-color .3s, color .3s;
}
.partner-dot { width: 6px; height: 6px; border-radius: 50%; background: #22C55E; flex-shrink: 0; }


/* ═══ TRUST BAR ═══ */
.trust-bar {
  background: var(--bg-secondary);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  padding: 2rem 0;
  transition: background .3s, border-color .3s;
}
.trust-inner { max-width: 1280px; margin: 0 auto; padding: 0 2rem; display: flex; gap: 3rem; align-items: center; justify-content: center; }
.trust-item { text-align: center; }
.trust-num { font-size: 1.6rem; font-weight: 600; letter-spacing: -.03em; color: var(--text-primary); line-height: 1; transition: color .3s; }
.trust-num span { color: var(--orange); }
.trust-lbl { font-family: 'Inter', sans-serif; font-size: .62rem; font-weight: 400; letter-spacing: .08em; text-transform: uppercase; color: var(--text-muted); margin-top: .3rem; transition: color .3s; }
.trust-divider { width: 1px; height: 36px; background: var(--border); transition: background .3s; }


/* ═══ ARROW BUTTONS ═══ */
.arr-btn {
  width: 34px; height: 34px; border-radius: 50%;
  border: 1px solid var(--border);
  background: var(--bg-primary);
  color: var(--text-secondary);
  font-size: .85rem; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: all .2s;
}
.arr-btn:hover { border-color: var(--orange); color: var(--orange); }


/* ═══ CONTACT FORM ═══ */
.cf-title {
  font-size: 1rem; font-weight: 600; letter-spacing: -.02em;
  color: var(--text-primary); margin-bottom: .3rem; transition: color .3s;
}
.cf-sub {
  font-family: 'Inter', sans-serif;
  font-size: .72rem; color: var(--text-muted);
  margin-bottom: 1.5rem; transition: color .3s;
}
.cf-row { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; }
.cf-field { margin-bottom: .85rem; }
.cf-label {
  font-family: 'Inter', sans-serif;
  font-size: .62rem; font-weight: 500;
  color: var(--text-secondary); letter-spacing: .04em;
  display: block; margin-bottom: .3rem; transition: color .3s;
}
.cf-input, .cf-select, .cf-textarea {
  width: 100%; padding: .6rem .85rem;
  border: 1px solid var(--border); border-radius: 3px;
  background: var(--bg-primary); color: var(--text-primary);
  font-family: 'Plus Jakarta Sans', sans-serif; font-size: .75rem;
  outline: none; transition: all .3s;
  -webkit-appearance: none;
}
.cf-input:focus, .cf-select:focus, .cf-textarea:focus { border-color: var(--orange); }
.cf-input::placeholder, .cf-textarea::placeholder { color: var(--text-muted); }
.cf-textarea { height: 90px; resize: none; }
.cf-submit {
  width: 100%; background: var(--orange); color: #fff; border: none;
  padding: .75rem; font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: .76rem; font-weight: 500; cursor: pointer;
  border-radius: 3px; transition: background .2s; margin-top: .25rem;
}
.cf-submit:hover { background: var(--orange-dark); }


/* ═══ TAGS / PILLS ═══ */
.lang-pill {
  font-family: 'Inter', sans-serif;
  font-size: .6rem; font-weight: 500;
  padding: .25rem .65rem; border-radius: 20px;
  background: var(--tag-bg); color: var(--tag-text);
  transition: background .3s, color .3s;
}