/* ============================================================================
   Cooke & Co - 2027 shared components (buttons, cards, modal chrome, tokens)
   Ported from the AgreedUK "home2027" design system and recoloured to the Cooke
   brand (red #c92237 / gold #c69c6d). Loaded ONLY by the 2027 split-map search
   page and the 2027 property-details page, so it does not affect the rest of the
   Cooke site. The .btn* rules are scoped under .page-2027 to avoid clobbering the
   Bootstrap .btn styling used in the Cooke header/footer on these pages. The
   .pfs-* / .modal-2027* class names are unique and safe to leave global.
   ASCII-only (currency/symbols rendered by the views, not this file).
   ========================================================================== */

/* Inter (variable) - the 2027 UI typeface, ported from the AgreedUK details page so
   the property pages don't fall back to the browser default serif (Times New Roman).
   Paths are relative to this file (Content/home2027/). */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("fonts/InterVariable.woff2") format("woff2");
}
@font-face {
  font-family: 'Inter';
  font-style: italic;
  font-weight: 100 900;
  font-display: swap;
  src: url("fonts/InterVariable-Italic.woff2") format("woff2");
}

:root {
  --bg: #ffffff;
  --fg: #2b2b2b;
  --muted: #6b6b6b;
  --secondary: #6b6b6b;
  --secondary-soft: rgba(107, 107, 107, 0.10);
  --border: #e2e2e4;
  --border-soft: rgba(226, 226, 228, 0.5);
  /* Cooke brand red is the accent; gold is the premium treatment. */
  --accent: #c92237;
  --premium: #c69c6d;
  --accent-soft: color-mix(in srgb, var(--accent) 10%, transparent);
  --accent-glow: color-mix(in srgb, var(--accent) 35%, transparent);
  --accent-faint: color-mix(in srgb, var(--accent) 6%, transparent);
  --accent-veil: color-mix(in srgb, var(--accent) 18%, transparent);
  --card: #ffffff;
  --card-elev: #f5f5f6;

  --text-xs: 12px;
  --text-sm: 14px;
  --text-base: 16px;
  --text-lg: 18px;

  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 20px;
  --radius-xl: 24px;
  --radius-2xl: 32px;
}

/* --- Buttons (scoped so Bootstrap .btn in the Cooke chrome is untouched) --- */
.page-2027 .btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 48px; padding: 12px 22px; border-radius: 100px;
  font-weight: 600; font-size: 15px; border: none; cursor: pointer;
  transition: transform 0.18s, box-shadow 0.18s, background 0.18s, border-color 0.18s, color 0.18s;
  white-space: nowrap; user-select: none;
}
.page-2027 .btn-primary {
  background: var(--accent);
  color: #fff;
  position: relative;
  overflow: hidden;
}
.page-2027 .btn-primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 24px var(--accent-glow);
}
.page-2027 .btn-ghost { background: transparent; color: var(--fg); }
.page-2027 .btn-ghost:hover { background: var(--card-elev); }
.page-2027 .btn-light { background: var(--fg); color: #fff; }
.page-2027 .btn-light:hover { transform: translateY(-1px); }
.page-2027 .btn-outline { background: var(--card); color: var(--fg); border: 1px solid var(--border); }
.page-2027 .btn-outline:hover { border-color: var(--accent); color: var(--accent); }
.page-2027 .btn-block { width: 100%; }

/* --- Modal chrome (shared by the enquiry modal) --- */
.modal-2027 {
  position: fixed; inset: 0; z-index: 10000;
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
}
.modal-2027-backdrop {
  position: absolute; inset: 0;
  background: rgba(20, 20, 20, 0.55);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  animation: modal-fade 0.25s ease-out;
  cursor: pointer;
}
.modal-2027-card {
  position: relative;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  padding: 48px 40px 40px;
  max-width: 460px;
  width: 100%;
  text-align: center;
  box-shadow: 0 24px 64px rgba(20, 20, 20, 0.25);
  animation: modal-pop 0.32s cubic-bezier(0.32, 1.5, 0.56, 0.96);
}
.modal-2027-close {
  position: absolute; top: 14px; right: 14px;
  width: 36px; height: 36px;
  background: transparent; border: 0; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 8px; color: var(--muted);
  transition: background 0.18s, color 0.18s;
}
.modal-2027-close:hover { background: var(--card-elev); color: var(--fg); }
.modal-2027-icon {
  width: 64px; height: 64px;
  background: var(--accent-soft);
  color: var(--accent);
  border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  margin: 0 auto 20px;
}
.modal-2027-card h3 {
  font-size: 26px; font-weight: 600;
  letter-spacing: -0.025em;
  margin: 0 0 10px;
  color: var(--fg);
  line-height: 1.15;
}
.modal-2027-card p {
  color: var(--muted);
  font-size: 15px;
  line-height: 1.55;
  margin: 0 0 24px;
}
.modal-2027-card .btn { min-width: 140px; }
body.modal-open { overflow: hidden; }

@keyframes modal-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes modal-pop {
  from { opacity: 0; transform: translateY(12px) scale(0.98); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* --- Property card (grid tile + map popup body) --- */
.pfs-card {
  display: block; background: var(--card); border: 1px solid var(--border);
  border-radius: var(--radius-lg); overflow: hidden; text-decoration: none; color: inherit;
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
/* Map->card sync highlight is a JS class - applies on every device. */
.pfs-card.is-hover-from-map {
  transform: translateY(-2px); border-color: var(--accent);
  box-shadow: 0 12px 28px rgba(20, 20, 20, 0.10);
}
/* Pointer hover ONLY where a real pointer exists. On touch a :hover rule makes
   iOS treat the first tap as a "hover" (sticky hover) and require a SECOND tap
   to fire the click - the "tap twice to open the details drawer" bug. */
@media (hover: hover) {
  .pfs-card:hover {
    transform: translateY(-2px); border-color: var(--accent);
    box-shadow: 0 12px 28px rgba(20, 20, 20, 0.10);
  }
}
.pfs-card-img {
  aspect-ratio: 16 / 10; background-color: #e8eaed;
  position: relative; overflow: hidden;
}
.pfs-card-img::after {
  content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 1;
  background: linear-gradient(180deg, transparent 60%, rgba(20,20,20,0.40));
}
.pfs-card-img .pfs-badge {
  position: absolute; top: 12px; left: 12px; z-index: 3;
  background: var(--accent); color: #fff; font-size: 10px; font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase; padding: 4px 10px; border-radius: 100px;
}
.pfs-card-img .pfs-badges {
  position: absolute; top: 12px; left: 12px; z-index: 3;
  display: flex; flex-direction: column; align-items: flex-start; gap: 6px;
}
.pfs-card-img .pfs-badges .pfs-badge { position: static; top: auto; left: auto; }
.pfs-badge.is-status { background: #2b2b2b; color: #fff; }
.pfs-slides { position: absolute; inset: 0; }
.pfs-slide {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: center;
  opacity: 0; transition: opacity .25s ease;
  display: block; border: 0;
}
.pfs-slide.is-active { opacity: 1; }
.pfs-slide-nav {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 30px; height: 30px; border-radius: 100px;
  background: rgba(255,255,255,0.94); border: 1px solid rgba(20,20,20,0.08);
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer; color: var(--fg); padding: 0; z-index: 4;
  opacity: 0; transition: opacity .15s ease, transform .15s ease, background .15s ease;
  box-shadow: 0 2px 6px rgba(0,0,0,0.10);
}
.pfs-slide-prev { left: 10px; }
.pfs-slide-next { right: 10px; }
/* Popups always show the nav (no hover state there). */
.pfs-popup-card .pfs-card-img .pfs-slide-nav { opacity: 1; }
/* Reveal-on-hover only where a real pointer exists - keeps card tiles free of a
   :hover state on touch (which caused the iOS sticky-hover double-tap). Touch
   users move through photos by swiping instead. */
@media (hover: hover) {
  .pfs-card-img:hover .pfs-slide-nav,
  .pfs-dev-img:hover .pfs-slide-nav { opacity: 1; }
  .pfs-slide-nav:hover { background: #fff; transform: translateY(-50%) scale(1.08); }
}
.pfs-slide-dots {
  position: absolute; bottom: 10px; left: 50%; transform: translateX(-50%);
  display: flex; gap: 5px; z-index: 4;
}
.pfs-slide-dots span {
  width: 6px; height: 6px; border-radius: 100px;
  background: rgba(255,255,255,0.55); cursor: pointer;
  transition: background .15s ease, width .15s ease;
  box-shadow: 0 1px 3px rgba(0,0,0,0.30);
}
.pfs-slide-dots span.is-active { background: #fff; width: 16px; }
.pfs-slide-dots span.pfs-dot-hidden { display: none; }
.pfs-slide-dots span.pfs-dot-sm { width: 4px; height: 4px; opacity: 0.75; }
.pfs-card-content { padding: 14px 16px 16px; }
.pfs-card-price { font-size: 18px; font-weight: 600; color: var(--fg); letter-spacing: -0.01em; margin-bottom: 4px; }
.pfs-card-address { font-size: 14px; color: var(--fg); margin-bottom: 8px; line-height: 1.4; }
.pfs-card-address .pfs-addr-line { display: block; }
.pfs-card-address .pfs-addr-town { display: block; font-size: 18px; color: #000; margin-top: 5px; }
.pfs-card-meta { display: flex; gap: 14px; font-size: 12px; color: var(--muted); }
.pfs-card-meta span { display: inline-flex; align-items: center; gap: 4px; }
.pfs-card-meta svg { width: 14px; height: 14px; }