/*
 * ============================================================
 *  public.css — Styles for the public (logged-out) site:
 *  property listings, detail pages, marketing pages.
 *  Loaded alongside theme.css. All colours/spacing use the
 *  tokens defined in theme.css.
 * ============================================================
 */

/* ── Public page body — overrides admin body bg ──────────── */
.pub-body {
  background: var(--color-card-bg);
  font-family: var(--font-family);
  color: var(--color-body-text);
  margin: 0;
}


/* ── Top navbar ──────────────────────────────────────────── */
.pub-nav {
  background: var(--color-card-bg);
  border-bottom: 1px solid var(--color-border);
  padding: 0 var(--space-6);
  height: 4rem;
  display: flex;
  align-items: center;
  gap: var(--space-6);
  flex-wrap: nowrap;
  position: sticky;
  top: 0;
  z-index: var(--z-50);
}
.pub-nav__logo {
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-bold);
  color: var(--color-primary);
  text-decoration: none;
  flex-shrink: 0;
}
.pub-nav__logo-img {
  height: 26px;
  width: auto;
  display: block;
}
.pub-nav__links {
  display: flex;
  gap: var(--space-4);
  margin-left: auto;
  align-items: center;
  flex-wrap: nowrap;
}
.pub-nav__link {
  color: var(--color-muted);
  text-decoration: none;
  font-size: 0.9rem;
  white-space: nowrap;
}
.pub-nav__link:hover { color: var(--color-primary); }
.pub-nav__link--cta {
  background: var(--color-primary);
  color: var(--color-primary-text) !important;
  padding: 0.375rem 0.875rem;
  border-radius: var(--radius-md);
  font-weight: var(--font-weight-semibold);
  font-size: var(--font-size-sm);
}
.pub-nav__link--cta:hover { opacity: 0.9; color: var(--color-primary-text); }

/* Icon-only nav buttons (Rent Search, My Zoobie) */
.pub-nav__icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: var(--radius-md);
  color: var(--color-muted);
  text-decoration: none;
  transition: background var(--transition-fast), color var(--transition-fast);
  flex-shrink: 0;
}
.pub-nav__icon-btn:hover {
  background: var(--color-body-bg);
  color: var(--color-primary);
}
.pub-nav__icon-svg {
  width: 1.15rem;
  height: 1.15rem;
}

/* "M" avatar — clean high-contrast circle */
.pub-nav__avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  border: none;
  padding: 0;
  border-radius: var(--radius-full);
  background: var(--color-primary);
  color: var(--color-primary-text);
  font-family: inherit;
  font-size: 0.8rem;
  font-weight: var(--font-weight-bold);
  text-decoration: none;
  cursor: pointer;
  flex-shrink: 0;
}
.pub-nav__avatar:hover { opacity: 0.9; color: var(--color-primary-text); }

/* Mobile: hide secondary text links, tighten spacing */
@media (max-width: 700px) {
  .pub-nav__hide-mobile { display: none; }
  .pub-nav { padding: 0 0.875rem; gap: var(--space-3); }
  .pub-nav__links { gap: var(--space-2); }
}


/* ── Search bar ──────────────────────────────────────────── */
.pub-search {
  background: var(--color-primary);
  padding: var(--space-8) var(--space-6);
}
.pub-search__inner {
  max-width: 1200px;
  margin: 0 auto;
}
.pub-search__title {
  color: var(--color-primary-text);
  font-size: 1.75rem;
  font-weight: var(--font-weight-bold);
  margin: 0 0 var(--space-4);
}
.pub-search__form {
  display: flex;
  gap: var(--space-2);
  flex-wrap: wrap;
  background: var(--color-card-bg);
  padding: var(--space-2);
  border-radius: var(--radius-lg);
}
.pub-search__input-wrap {
  position: relative;
  flex: 1;
  min-width: 200px;
  display: flex;
  align-items: center;
}
.pub-search__input-wrap > svg {
  position: absolute;
  left: 0.75rem;
  width: 1.125rem;
  height: 1.125rem;
  color: var(--color-muted);
  pointer-events: none;
}
.pub-search__input {
  flex: 1;
  min-width: 0;
  width: 100%;
  border: none;
  outline: none;
  padding: 0.5rem 0.75rem 0.5rem 2.375rem;
  font-size: 0.95rem;
  font-family: inherit;
}
.pub-search__select {
  border: none;
  border-left: 1px solid var(--color-border);
  padding: var(--space-2) var(--space-3);
  font-size: var(--font-size-sm);
  font-family: inherit;
  background: var(--color-card-bg);
  cursor: pointer;
}
.pub-search__btn {
  background: var(--color-primary);
  color: var(--color-primary-text);
  border: none;
  padding: 0.625rem 1.25rem;
  border-radius: var(--radius-md);
  font-weight: var(--font-weight-semibold);
  cursor: pointer;
  font-family: inherit;
  font-size: 0.9rem;
  white-space: nowrap;
}
.pub-search__btn:hover { opacity: 0.9; }

/* Hero variant — used on /search */
.pub-search--hero { padding: var(--space-16) var(--space-6); }
.pub-search__hero-inner {
  max-width: 720px;
  margin: 0 auto;
  text-align: center;
}
.pub-search__title--hero {
  font-size: 2.25rem;
  margin-bottom: var(--space-2);
}
.pub-search__intro {
  color: var(--color-primary-text-muted);
  margin: 0 0 1.75rem;
  font-size: var(--font-size-base);
}
.pub-search__form--left { text-align: left; }
.pub-search__footnote {
  color: var(--color-primary-text-muted);
  margin: var(--space-6) 0 0;
  font-size: 0.9rem;
}
.pub-search__footnote-link {
  color: var(--color-primary-text);
  text-decoration: underline;
  font-weight: var(--font-weight-semibold);
}

/* ── SearchAgent CTA — sign up for new-listing alerts ──────── */
.pub-search-agent {
  max-width: 1200px;
  margin: var(--space-6) auto 0;
  padding: 0 var(--space-6);
}
.pub-search-agent__inner {
  background: linear-gradient(120deg, #382CDD 0%, #6D3BD6 55%, #C13584 100%);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-6);
  flex-wrap: wrap;
  color: #fff;
}
.pub-search-agent__copy { flex: 1 1 280px; min-width: 260px; }
.pub-search-agent__heading {
  font-size: 1.125rem;
  font-weight: var(--font-weight-bold);
  margin: 0 0 var(--space-1);
  letter-spacing: -0.01em;
}
.pub-search-agent__sub {
  font-size: 0.9rem;
  opacity: 0.9;
  margin: 0;
  line-height: 1.45;
}
.pub-search-agent__form {
  display: flex;
  gap: var(--space-2);
  flex: 1 1 320px;
  min-width: 280px;
  background: var(--color-card-bg);
  padding: var(--space-2);
  border-radius: var(--radius-lg);
}
.pub-search-agent__email {
  flex: 1;
  min-width: 0;
  border: none;
  outline: none;
  padding: 0.5rem 0.75rem;
  font-size: 0.95rem;
  font-family: inherit;
  color: var(--color-body-text);
  background: transparent;
}
.pub-search-agent__btn {
  background: var(--color-primary);
  color: var(--color-primary-text);
  border: none;
  padding: 0.625rem 1.25rem;
  border-radius: var(--radius-md);
  font-weight: var(--font-weight-semibold);
  cursor: pointer;
  font-family: inherit;
  font-size: 0.9rem;
  white-space: nowrap;
}
.pub-search-agent__btn:hover { opacity: 0.9; }

/* ── SearchAgent status pages (verified, unsubscribed, etc.) ── */
.pub-status-card {
  max-width: 540px;
  margin: var(--space-12) auto;
  background: var(--color-card-bg);
  border-radius: var(--radius-xl);
  padding: var(--space-8);
  text-align: center;
  box-shadow: var(--shadow);
}
.pub-status-card__icon {
  width: 3.5rem;
  height: 3.5rem;
  border-radius: 50%;
  background: var(--color-primary);
  color: var(--color-primary-text);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--space-4);
}
.pub-status-card__icon svg { width: 1.75rem; height: 1.75rem; }
.pub-status-card__title {
  font-size: 1.5rem;
  font-weight: var(--font-weight-bold);
  margin: 0 0 var(--space-2);
  letter-spacing: -0.01em;
}
.pub-status-card__body {
  margin: 0 0 var(--space-6);
  color: var(--color-muted);
  line-height: 1.55;
}
.pub-status-card__email {
  color: var(--color-body-text);
  font-weight: var(--font-weight-semibold);
}
.pub-status-card__actions {
  display: flex;
  justify-content: center;
  gap: var(--space-3);
  flex-wrap: wrap;
}
.pub-status-card__btn {
  display: inline-block;
  padding: 0.625rem 1.25rem;
  border-radius: var(--radius-md);
  font-weight: var(--font-weight-semibold);
  font-size: 0.9rem;
  text-decoration: none;
}
.pub-status-card__btn--primary {
  background: var(--color-primary);
  color: var(--color-primary-text);
}
.pub-status-card__btn--ghost {
  border: 1px solid var(--color-border);
  color: var(--color-body-text);
}

@media (max-width: 600px) {
  .pub-search-agent__inner { padding: var(--space-4); gap: var(--space-3); }
  .pub-search-agent__form { flex-direction: column; align-items: stretch; }
}


/* ── Results layout ──────────────────────────────────────── */
.pub-results {
  max-width: 1200px;
  margin: 0 auto;
  padding: var(--space-6);
  display: grid;
  grid-template-columns: 1fr 380px;
  gap: var(--space-6);
  align-items: start;
}
.pub-results__meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--space-4);
  font-size: var(--font-size-sm);
  color: var(--color-muted);
  gap: var(--space-4);
}
.pub-results__count {
  font-weight: var(--font-weight-semibold);
  color: var(--color-body-text);
}
.pub-results__sort-form {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}
.pub-results__sort {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 0.375rem 0.625rem;
  font-size: var(--font-size-sm);
  font-family: inherit;
  background: var(--color-card-bg);
  cursor: pointer;
}
.pub-empty {
  color: var(--color-muted);
  text-align: center;
  padding: var(--space-12) 0;
}


/* ── Property card — horizontal Rightmove style ──────────── */
.prop-card {
  background: var(--color-card-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  margin-bottom: var(--space-4);
  transition: box-shadow var(--transition-fast);
  text-decoration: none;
  color: inherit;
}
.prop-card:hover { box-shadow: var(--shadow-hover); }
.prop-card__inner {
  display: flex;
}
.prop-card__featured-banner {
  background: var(--color-primary);
  color: var(--color-primary-text);
  padding: 0.4rem var(--space-4);
  font-size: 0.7rem;
  font-weight: var(--font-weight-bold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  display: flex;
  align-items: center;
  gap: 0.375rem;
}
.prop-card__featured-banner svg {
  width: 0.875rem;
  height: 0.875rem;
}
.prop-card__img-wrap {
  width: 280px;
  min-width: 280px;
  height: 200px;
  overflow: hidden;
  position: relative;
  background: var(--color-body-bg);
  flex-shrink: 0;
}
.prop-card__img-link {
  display: block;
  height: 100%;
}
.prop-card__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.prop-card__img-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  color: var(--color-gray-300);
}
.prop-card__img-placeholder__label {
  font-size: var(--font-size-sm);
  color: var(--color-muted);
}
.prop-card__body {
  padding: var(--space-4) var(--space-5);
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
}
.prop-card__price {
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-bold);
  color: var(--color-body-text);
}
.prop-card__pcm {
  font-size: 0.8rem;
  color: var(--color-muted);
  font-weight: var(--font-weight-normal);
  margin-left: var(--space-1);
}
.prop-card__address {
  font-weight: var(--font-weight-semibold);
  color: var(--color-primary);
  text-decoration: none;
  font-size: 0.95rem;
}
.prop-card__address:hover { text-decoration: underline; }
.prop-card__meta {
  display: flex;
  gap: var(--space-4);
  font-size: 0.8rem;
  color: var(--color-muted);
  flex-wrap: wrap;
}
.prop-card__meta-item {
  display: flex;
  align-items: center;
  gap: var(--space-1);
}
.prop-card__badges {
  display: flex;
  gap: 0.375rem;
  flex-wrap: wrap;
  margin-top: 0.125rem;
}
.prop-card__badge {
  background: var(--color-primary-light);
  color: var(--color-primary);
  font-size: 0.7rem;
  padding: 0.2rem var(--space-2);
  border-radius: var(--radius-full);
  font-weight: var(--font-weight-medium);
}
.prop-card__desc {
  font-size: 0.8rem;
  color: var(--color-muted);
  line-height: var(--line-height-normal);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin-top: auto;
}
.prop-card__added {
  font-size: var(--font-size-xs);
  color: var(--color-gray-300);
  margin-top: var(--space-1);
}


/* ── Sticky map panel ────────────────────────────────────── */
.pub-map {
  position: sticky;
  top: 5rem;
  background: var(--color-body-bg);
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--color-border);
  height: 500px;
  display: block;
  color: var(--color-muted);
  font-size: var(--font-size-sm);
}
.pub-map-popup__link {
  font-weight: var(--font-weight-semibold);
  color: var(--color-primary);
  text-decoration: none;
}
.pub-map-popup__price {
  font-weight: var(--font-weight-bold);
}


/* ── Detail page ─────────────────────────────────────────── */
.pub-detail-wrap {
  max-width: 1200px;
  margin: 0 auto;
  padding: var(--space-6);
}
.pub-detail {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  gap: var(--space-6);
  align-items: start;
}
.pub-gallery {
  border-radius: var(--radius-lg);
  overflow: hidden;
  margin-bottom: var(--space-4);
  max-width: 100%;
}
.pub-gallery__main-wrap {
  position: relative;
}
.pub-gallery__main {
  width: 100%;
  aspect-ratio: 4/3;
  object-fit: cover;
  display: block;
  background: var(--color-body-bg);
  cursor: pointer;
}
.pub-gallery__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  border: 0;
  background: rgba(0, 0, 0, 0.45);
  color: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  opacity: 0;
  transition: opacity 0.15s ease, background 0.15s ease;
  z-index: 2;
}
.pub-gallery__main-wrap:hover .pub-gallery__nav,
.pub-gallery__nav:focus-visible { opacity: 1; }
.pub-gallery__nav:hover { background: rgba(0, 0, 0, 0.7); }
.pub-gallery__nav--prev { left: var(--space-3); }
.pub-gallery__nav--next { right: var(--space-3); }
.pub-gallery__nav svg { width: 1.5rem; height: 1.5rem; }
@media (hover: none), (max-width: 640px) {
  .pub-gallery__nav { opacity: 1; }
}
.pub-gallery__thumbs-wrap {
  position: relative;
  margin-top: var(--space-2);
}
.pub-gallery__thumbs {
  display: flex;
  gap: var(--space-2);
  margin-top: var(--space-2);
  overflow-x: auto;
  max-width: 100%;
  -webkit-overflow-scrolling: touch;
}
.pub-gallery__thumbs-wrap .pub-gallery__thumbs { margin-top: 0; }
.pub-gallery__thumbs-scroll {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  border: 0;
  background: rgba(0, 0, 0, 0.6);
  color: #fff;
  cursor: pointer;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 0;
  z-index: 2;
}
.pub-gallery__thumbs-scroll:hover { background: rgba(0, 0, 0, 0.85); }
.pub-gallery__thumbs-scroll svg { width: 1rem; height: 1rem; }
.pub-gallery__thumbs-scroll--prev { left: 0; }
.pub-gallery__thumbs-scroll--next { right: 0; }
.pub-gallery__thumbs-wrap.has-overflow .pub-gallery__thumbs-scroll { display: flex; }
.pub-gallery__thumbs-wrap.is-at-start .pub-gallery__thumbs-scroll--prev,
.pub-gallery__thumbs-wrap.is-at-end .pub-gallery__thumbs-scroll--next { display: none; }
.pub-gallery__thumbs-wrap.has-overflow::before,
.pub-gallery__thumbs-wrap.has-overflow::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  width: 2.5rem;
  pointer-events: none;
  z-index: 1;
}
.pub-gallery__thumbs-wrap.has-overflow::before {
  left: 0;
  background: linear-gradient(to right, var(--color-card-bg), transparent);
}
.pub-gallery__thumbs-wrap.has-overflow::after {
  right: 0;
  background: linear-gradient(to left, var(--color-card-bg), transparent);
}
.pub-gallery__thumbs-wrap.is-at-start::before { display: none; }
.pub-gallery__thumbs-wrap.is-at-end::after { display: none; }
@media (max-width: 640px) {
  .pub-gallery__thumbs-scroll { display: none !important; }
}
.pub-gallery__thumb {
  width: 80px;
  height: 60px;
  object-fit: cover;
  border-radius: var(--radius);
  cursor: pointer;
  border: 2px solid transparent;
  flex-shrink: 0;
}
.pub-gallery__thumb.is-active { border-color: var(--color-primary); }
.pub-key-info {
  display: flex;
  gap: var(--space-6);
  padding: var(--space-4) 0;
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
  margin-bottom: var(--space-6);
  flex-wrap: wrap;
}
.pub-key-info__item { display: flex; flex-direction: column; gap: 0.125rem; }
.pub-key-info__label {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-muted);
}
.pub-key-info__value { font-size: var(--font-size-base); font-weight: var(--font-weight-semibold); }
.pub-key-info__epc {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}
.pub-key-info__epc-download {
  color: var(--color-muted);
  display: inline-flex;
  align-items: center;
  line-height: 1;
}
.pub-key-info__epc-download:hover { color: var(--color-primary); }
.pub-section-title { font-size: var(--font-size-base); font-weight: var(--font-weight-bold); margin: var(--space-6) 0 0.75rem; }
.pub-features { display: flex; gap: var(--space-2); flex-wrap: wrap; }
.pub-feature {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  font-size: var(--font-size-sm);
  background: var(--color-primary-light);
  border: 1px solid var(--color-primary-light);
  border-radius: var(--radius-md);
  padding: 0.375rem var(--space-3);
}

/* Detail-page typography */
.pub-detail__title {
  font-size: 1.5rem;
  font-weight: var(--font-weight-bold);
  margin: 0 0 0.25rem;
}
.pub-detail__address {
  color: var(--color-muted);
  margin: 0 0 var(--space-4);
}
.pub-detail__prose {
  line-height: 1.7;
  color: var(--color-body-text);
}

/* Empty-gallery placeholder shown when an advert has no photos */
.pub-gallery--empty {
  width: 100%;
  aspect-ratio: 16/9;
  background: var(--color-body-bg);
  border-radius: var(--radius-md);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  margin-bottom: var(--space-6);
}
.pub-gallery--empty__label {
  font-size: var(--font-size-sm);
  color: var(--color-muted);
}

/* Video / map embeds */
.pub-detail__embed {
  border-radius: var(--radius-md);
  overflow: hidden;
  border: 1px solid var(--color-border);
  aspect-ratio: 16/9;
}
.pub-detail__map {
  height: 300px;
  border-radius: var(--radius-md);
  overflow: hidden;
  border: 1px solid var(--color-border);
}
.pub-detail__map-actions {
  display: flex;
  gap: 0.5rem;
  margin-top: 0.75rem;
  flex-wrap: wrap;
}

/* Favourite / save pill (top-right of detail page) */
.pub-fav-btn {
  flex-shrink: 0;
  background: var(--color-card-bg);
  border: 1px solid var(--color-border);
  color: var(--color-muted);
  border-radius: 9999px;
  padding: 0.4rem 0.85rem;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.85rem;
  font-weight: var(--font-weight-medium);
  text-decoration: none;
  cursor: pointer;
  transition: all 0.15s ease;
}
.pub-fav-btn.is-faved {
  background: var(--color-error-light);
  border-color: var(--color-error);
  color: var(--color-error);
}

/* "Edit details" pill on the breadcrumb row (landlord only) */
.pub-detail__edit {
  width: auto;
  padding: 0.4rem 0.9rem;
  font-size: 0.85rem;
  margin: 0;
  white-space: nowrap;
}


/* ── Contact card ────────────────────────────────────────── */
.pub-contact-card {
  background: var(--color-card-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  position: sticky;
  top: 5rem;
}
.pub-contact-card__price { font-size: 1.75rem; font-weight: var(--font-weight-bold); margin-bottom: var(--space-1); }
.pub-contact-card__pcm { font-size: var(--font-size-sm); color: var(--color-muted); }
.pub-contact-card__avail {
  font-size: var(--font-size-sm);
  color: var(--color-muted);
  margin-top: var(--space-1);
}
.pub-contact-card__facts {
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
  padding: 0.75rem 0;
  margin-top: var(--space-4);
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}
.pub-contact-card__fact {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: var(--font-size-sm);
}
.pub-contact-card__fact-label { color: var(--color-muted); }
.pub-contact-card__fact-value { font-weight: var(--font-weight-medium); color: var(--color-body-text); }
.pub-contact-card__trust {
  margin-top: var(--space-4);
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-border);
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}
.pub-contact-card__trust-item {
  font-size: 0.75rem;
  color: var(--color-muted);
  display: flex;
  align-items: center;
  gap: 0.375rem;
}
.pub-contact-card__trust-item--verified {
  color: var(--color-success-dark);
  font-weight: var(--font-weight-medium);
}
.pub-contact-card__trust-icon {
  width: 0.875rem;
  height: 0.875rem;
  flex-shrink: 0;
}
.pub-contact-card__title { font-size: var(--font-size-base); font-weight: var(--font-weight-semibold); margin: var(--space-4) 0 0.75rem; }
.pub-contact-card input:not([type="checkbox"]):not([type="radio"]),
.pub-contact-card textarea {
  width: 100%;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 0.625rem 0.75rem;
  font-family: inherit;
  font-size: var(--font-size-sm);
  margin-bottom: 0.75rem;
  box-sizing: border-box;
}
.pub-contact-card input:not([type="checkbox"]):not([type="radio"]):focus,
.pub-contact-card textarea:focus {
  outline: none;
  border-color: var(--color-primary);
}
.pub-contact-card textarea { height: 80px; resize: vertical; }
.pub-contact-card__check {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: var(--font-size-sm);
  color: var(--color-body-text);
  margin: 0 0 0.75rem;
  cursor: pointer;
}
.pub-contact-card__check input[type="checkbox"] {
  width: auto;
  margin: 0;
  flex-shrink: 0;
}


/* ── Buttons ─────────────────────────────────────────────── */
.pub-btn {
  display: block;
  width: 100%;
  background: var(--color-primary);
  color: var(--color-primary-text);
  border: none;
  padding: 0.75rem;
  border-radius: var(--radius-md);
  font-weight: var(--font-weight-semibold);
  cursor: pointer;
  font-family: inherit;
  font-size: 0.95rem;
  text-align: center;
  text-decoration: none;
  box-sizing: border-box;
}
.pub-btn:hover { opacity: 0.9; color: var(--color-primary-text); }
.pub-btn--outline {
  background: var(--color-card-bg);
  color: var(--color-primary);
  border: 1.5px solid var(--color-primary);
  margin-top: var(--space-2);
}
.pub-btn--outline:hover { background: var(--color-primary-light); color: var(--color-primary); }
.pub-btn--whatsapp { background: #25D366; margin-top: var(--space-2); }   /* WhatsApp brand */
.pub-btn--whatsapp:hover { background: #1ebe5d; }                          /* WhatsApp brand */
.pub-btn--cta { background: var(--color-success-dark); margin-top: var(--space-2); }
.pub-btn--cta:hover { background: var(--color-green-800); }

/* Inline pill variant — auto width, larger padding (used on landing-page CTAs) */
.pub-btn--inline {
  display: inline-block;
  width: auto;
  padding: 0.875rem 2.5rem;
  font-size: var(--font-size-base);
  white-space: nowrap;
}
/* Smaller inline pill — for in-line callouts and side banners */
.pub-btn--inline-sm {
  display: inline-block;
  width: auto;
  padding: 0.625rem 1.5rem;
  white-space: nowrap;
}

/* Leading icon inside a .pub-btn (phone, calendar, document) */
.pub-btn__icon {
  vertical-align: middle;
  margin-right: 0.375rem;
}

/* White-on-primary uppercase label (hero kickers) */
.pub-hero-label {
  color: var(--color-primary-text-faint);
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: var(--font-weight-semibold);
  margin: 0 0 0.75rem;
}


/* ── Footer ──────────────────────────────────────────────── */
.pub-footer {
  background: var(--color-lightgray-50);
  border-top: 1px solid var(--color-border);
  padding: var(--space-8) var(--space-6);
  text-align: center;
  color: var(--color-muted);
  font-size: 0.8rem;
  margin-top: var(--space-12);
}
.pub-footer__grid {
  max-width: 1200px;
  margin: 0 auto var(--space-8);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-8);
  text-align: left;
}
.pub-footer__heading {
  font-weight: var(--font-weight-bold);
  color: var(--color-body-text);
  margin: 0 0 0.75rem;
}
.pub-footer__lead {
  margin: 0;
  line-height: 1.7;
}
.pub-footer__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
}
.pub-footer__link {
  color: var(--color-muted);
  text-decoration: none;
}
.pub-footer__link:hover { color: var(--color-primary); }
.pub-footer__bottom {
  border-top: 1px solid var(--color-border);
  padding-top: var(--space-6);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  justify-content: space-between;
  align-items: flex-start;
}
.pub-footer__legal { max-width: 640px; }
.pub-footer__legal-line { margin: 0 0 0.375rem; }
.pub-footer__legal-fine { margin: 0; font-size: 0.75rem; line-height: 1.6; }
.pub-footer__legal-fine a { color: var(--color-muted); }
.pub-footer__legal-nav {
  margin: 0;
  display: flex;
  gap: var(--space-4);
  flex-wrap: wrap;
}


/* ── Cookie consent banner ───────────────────────────────── */
.cookie-banner {
  position: fixed;
  left: var(--space-4);
  right: var(--space-4);
  bottom: var(--space-4);
  max-width: 540px;
  margin: 0 auto;
  background: var(--color-gray-900);
  color: var(--color-primary-text);
  border-radius: var(--radius-lg);
  padding: var(--space-4) var(--space-5);
  box-shadow: var(--shadow-modal);
  z-index: 9999;
  font-size: 0.85rem;
  line-height: var(--line-height-normal);
  display: none;
}
.cookie-banner.is-open { display: block; }
.cookie-banner__title {
  font-weight: var(--font-weight-bold);
  font-size: 0.95rem;
  margin: 0 0 0.375rem;
}
.cookie-banner__body { margin: 0 0 0.875rem; color: var(--color-gray-200); }
.cookie-banner__body a { color: var(--color-indigo-200); text-decoration: underline; }
.cookie-banner__actions {
  display: flex;
  gap: var(--space-2);
  flex-wrap: wrap;
}
.cookie-banner__btn {
  flex: 1;
  min-width: 0;
  border: none;
  border-radius: var(--radius-md);
  padding: var(--space-2) 0.75rem;
  font-size: 0.85rem;
  font-weight: var(--font-weight-semibold);
  cursor: pointer;
  font-family: inherit;
  background: var(--color-card-bg);
  color: var(--color-body-text);
}
.cookie-banner__btn--outline {
  background: transparent;
  color: var(--color-primary-text);
  border: 1px solid var(--color-primary-border);
}
.cookie-banner__btn--primary {
  background: var(--color-primary);
  color: var(--color-primary-text);
}
@media (max-width: 520px) {
  .cookie-banner { left: var(--space-2); right: var(--space-2); bottom: var(--space-2); padding: 0.875rem var(--space-4); }
}


/* ── Breadcrumb ──────────────────────────────────────────── */
.pub-breadcrumb { font-size: 0.8rem; color: var(--color-muted); margin-bottom: var(--space-4); }
.pub-breadcrumb a { color: var(--color-primary); text-decoration: none; }
.pub-breadcrumb a:hover { text-decoration: underline; }


/* ── Pagination ──────────────────────────────────────────── */
.pub-pagination {
  display: flex;
  gap: var(--space-1);
  justify-content: center;
  margin-top: var(--space-6);
}
.pub-page-btn {
  padding: var(--space-2) 0.875rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  font-size: var(--font-size-sm);
  text-decoration: none;
  color: var(--color-body-text);
}
.pub-page-btn.is-active {
  background: var(--color-primary);
  color: var(--color-primary-text);
  border-color: var(--color-primary);
}
.pub-page-btn:hover:not(.is-active) { background: var(--color-body-bg); }
.pub-page-btn--ellipsis {
  border: none;
  cursor: default;
}


/* ── Flash messages ──────────────────────────────────────── */
.pub-flash {
  max-width: 1200px;
  margin: var(--space-4) auto 0;
  padding: 0 var(--space-6);
}
.pub-flash__item {
  padding: 0.75rem var(--space-4);
  border-radius: var(--radius-md);
  margin-bottom: var(--space-2);
}
.pub-flash__item--success {
  background: var(--color-success-light);
  color: var(--color-success-dark);
}
.pub-flash__item--error {
  background: var(--color-error-light);
  color: var(--color-error-dark);
}


/* ── Responsive ──────────────────────────────────────────── */
@media (max-width: 900px) {
  .pub-results { grid-template-columns: minmax(0, 1fr); }
  .pub-results > * { min-width: 0; }
  .pub-map { display: none; }
  .prop-card__inner { flex-direction: column; }
  .prop-card__img-wrap { width: 100%; min-width: unset; height: 200px; }
  /* `minmax(0, 1fr)` — without the 0-min, a grid item's default
     `min-width: auto` lets wide content (gallery image, embed, map) push
     the column past the viewport. */
  .pub-detail { grid-template-columns: minmax(0, 1fr); }
  .pub-detail > * { min-width: 0; }
  .pub-contact-card { position: static; }
  .pub-footer__grid { grid-template-columns: repeat(2, 1fr); gap: var(--space-6); }
}
@media (max-width: 600px) {
  .pub-search__select { display: none; }
  .pub-nav { padding: 0 var(--space-4); }
  .pub-detail-wrap { padding: var(--space-4); }
  .pub-detail { gap: var(--space-4); }

  /* Mobile typography on the public detail page — match the compact scale
     used by `.mobile-list-item__name` / `__address` on the To Do List so the
     two surfaces feel visually consistent. Headings collapse to primary
     (13px / 600); body text to tertiary (11.2px / 400). */
  .pub-detail__title    { font-size: var(--mobile-font-primary)  !important;
                          font-weight: var(--font-weight-semibold); }
  .pub-detail__address  { font-size: var(--mobile-font-tertiary); margin-bottom: var(--space-3); }
  .pub-section-title    { font-size: var(--mobile-font-primary);
                          font-weight: var(--font-weight-semibold);
                          margin: var(--space-4) 0 var(--space-2); }
  .pub-detail__prose    { font-size: var(--mobile-font-tertiary); line-height: 1.5; }
  .pub-feature          { font-size: var(--mobile-font-tertiary); }
  .pub-compliance__row  { font-size: var(--mobile-font-tertiary); }
  .pub-compliance__meta { font-size: var(--mobile-font-tertiary); }
  .pub-compliance__download { font-size: var(--mobile-font-tertiary); }
  .pub-breadcrumb       { font-size: var(--mobile-font-tertiary); }

  .pub-key-info { gap: var(--space-4); padding: 0.75rem 0; margin-bottom: var(--space-4); }
  .pub-key-info__label { font-size: var(--mobile-font-tertiary); }
  .pub-key-info__value { font-size: var(--mobile-font-primary);
                         font-weight: var(--font-weight-semibold); }

  .pub-contact-card { padding: var(--space-4); }
  .pub-contact-card__price { font-size: var(--mobile-font-primary);
                             font-weight: var(--font-weight-bold); }
  .pub-contact-card__pcm,
  .pub-contact-card__avail,
  .pub-contact-card__title,
  .pub-contact-card__fact-label,
  .pub-contact-card__fact-value,
  .pub-contact-card__trust-item { font-size: var(--mobile-font-tertiary); }

  .pub-gallery__thumb { width: 60px; height: 45px; }
  .pub-footer__grid { grid-template-columns: minmax(0, 1fr); gap: var(--space-6); }
}

/* ── Documents on file (compliance summary on advert detail) ───────────── */
.pub-compliance {
  list-style:     none;
  margin:         0;
  padding:        0;
  display:        flex;
  flex-direction: column;
  gap:            0.5rem;
}
.pub-compliance__row {
  display:        flex;
  align-items:    center;
  gap:            0.625rem;
  font-size:      var(--font-size-sm);
  color:          var(--color-body-text);
}
.pub-compliance__icon {
  flex-shrink:     0;
  width:           1.5rem;
  height:          1.5rem;
  border-radius:   50%;
  display:         inline-flex;
  align-items:     center;
  justify-content: center;
}
.pub-compliance__icon--ok      { background: var(--color-green-50);  color: var(--color-green-700); }
.pub-compliance__icon--warn    { background: var(--color-orange-50); color: var(--color-orange-700); }
.pub-compliance__icon--missing { background: var(--color-gray-100);  color: var(--color-muted); }
.pub-compliance__label {
  font-weight: var(--font-weight-medium);
}
.pub-compliance__meta {
  margin-left: auto;
  font-size:   var(--font-size-xs);
  color:       var(--color-muted);
  text-align:  right;
}
.pub-compliance__download {
  margin-left:     auto;
  font-size:       var(--font-size-sm);
  color:           var(--color-primary);
  text-decoration: none;
  font-weight:     var(--font-weight-medium);
  white-space:     nowrap;
}
.pub-compliance__download:hover { text-decoration: underline; }
@media (max-width: 600px) {
  .pub-compliance__meta { font-size: 0.7rem; }
  .pub-compliance__download { font-size: 0.75rem; }
}


/* ─────────────────────────────────────────────────────────── */
/*  APPLICATION read-only view (templates/application/view.html) */
/* ─────────────────────────────────────────────────────────── */

.application-view-callout {
  margin-bottom:   var(--space-6);
  padding:         0.875rem var(--space-4);
  background:      var(--color-body-bg);
  border:          1px solid var(--color-border);
  border-radius:   var(--radius-lg);
  display:         flex;
  align-items:     center;
  gap:             var(--space-3);
}

.application-view-card-body {
  padding:         var(--space-3) var(--space-4);
  display:         flex;
  flex-direction:  column;
  gap:             var(--space-3);
}

.application-view-field-label {
  margin:          0 0 0.125rem;
  font-size:       var(--font-size-xs);
  color:           var(--color-muted);
  font-weight:     var(--font-weight-medium);
  text-transform:  uppercase;
  letter-spacing:  0.04em;
}

.application-view-signature {
  margin:          0;
  font-size:       var(--font-size-sm);
  color:           var(--color-body-text);
  font-family:     var(--font-family-serif, 'DM Serif Display', Georgia, serif);
  font-style:      italic;
}

/* ── SEO landing pages (city hub, category hub etc.) ──────────────────── */
.seo-page-wrap {
  max-width: 1200px;
  margin:    0 auto;
  padding:   2rem 1.5rem;
}
.seo-h1 {
  font-size:   2rem;
  font-weight: 700;
  margin:      0 0 0.5rem;
}
.seo-subhead {
  color:  #67798E;
  margin: 0 0 2rem;
}
.seo-h2 {
  font-size:   1.4rem;
  font-weight: 600;
  margin:      0;
}

/* SEO empty-state pages (no listings yet for this city/category). */
.seo-empty-page {
  max-width: 800px;
  margin:    0 auto;
  padding:   4rem 1.5rem;
  text-align: center;
}
.seo-empty-h1 {
  font-size:   2rem;
  font-weight: 700;
  margin:      0 0 1rem;
}
.pub-btn--inline {
  display: inline-block;
  width:   auto;
  padding: 0.75rem 1.5rem;
}

/* ═══════════════════════════════════════════════════════════════════════
 * Patterns migrated from template <style> blocks
 * ═══════════════════════════════════════════════════════════════════════
 * Anything below was previously declared inline in a per-template <style>
 * block. They live here because they are reusable typography / spacing /
 * colour patterns — not page-unique design. Add new patterns here rather
 * than dropping them into a template <style> block.
 */

/* ── Legal pages (cookies, terms, privacy) ────────────────────────────
 * Long-form legal text wrapper. The same .legal-wrap declaration was
 * duplicated verbatim across cookies.html, terms.html and privacy.html.
 * Includes optional .legal-updated stamp, button row, and a borderless
 * data table for the cookies inventory.
 */
.legal-wrap {
  max-width:   820px;
  margin:      0 auto;
  padding:     3.5rem 1.5rem 4rem;
  color:       var(--color-body-text);
  line-height: 1.7;
  font-size:   1rem;
}
.legal-wrap h1 {
  font-size:   clamp(1.75rem, 4vw, 2.5rem);
  font-weight: 700;
  margin:      0 0 0.5rem;
  line-height: 1.2;
}
.legal-wrap .legal-updated {
  color:     var(--color-muted);
  font-size: 0.9rem;
  margin:    0 0 2.5rem;
}
.legal-wrap h2 {
  font-size:   1.25rem;
  font-weight: 700;
  margin:      2.5rem 0 0.75rem;
  color:       var(--color-body-text);
}
.legal-wrap h3 {
  font-size:   1rem;
  font-weight: 700;
  margin:      1.5rem 0 0.5rem;
  color:       var(--color-body-text);
}
.legal-wrap p,
.legal-wrap ul,
.legal-wrap td { color: var(--color-body-text); }
.legal-wrap p,
.legal-wrap ul { margin: 0 0 1rem; }
.legal-wrap ul { margin-left: 1.25rem; }
.legal-wrap li { margin-bottom: 0.375rem; }
.legal-wrap a { color: var(--color-primary); font-weight: 500; }
.legal-wrap strong { color: var(--color-body-text); }
.legal-wrap table {
  width:           100%;
  border-collapse: collapse;
  margin:          0 0 1.5rem;
  font-size:       0.9rem;
}
.legal-wrap th,
.legal-wrap td {
  text-align:    left;
  padding:       0.625rem 0.75rem;
  border-bottom: 1px solid var(--color-border);
  vertical-align: top;
}
.legal-wrap th {
  background:    var(--color-body-bg);
  font-weight:   600;
  color:         var(--color-body-text);
  border-bottom: 2px solid var(--color-border);
}
.legal-wrap .btn-row {
  display:   flex;
  gap:       0.5rem;
  margin:    1rem 0 2rem;
  flex-wrap: wrap;
}
.legal-wrap .legal-btn {
  display:         inline-block;
  background:      var(--color-primary);
  color:           #fff;
  padding:         0.625rem 1rem;
  border-radius:   0.375rem;
  text-decoration: none;
  font-weight:     500;
  font-size:       0.9rem;
  border:          none;
  cursor:          pointer;
  font-family:     inherit;
}
.legal-wrap .legal-btn--outline {
  background: var(--color-card-bg);
  color:      var(--color-primary);
  border:     1.5px solid var(--color-primary);
}
/* On mobile the cookies inventory table is wider than the viewport;
 * scroll horizontally inside the table itself rather than overflowing
 * the page. `display: block` is required to make `overflow-x` apply
 * to <table>. */
@media (max-width: 700px) {
  .legal-wrap table {
    display:    block;
    overflow-x: auto;
    max-width:  100%;
  }
}

/* ── Landing-page (lp) component set ──────────────────────────────────
 * Generic hero / section / benefit-grid / steps / CTA / divider
 * components used by the static marketing pages. Originally duplicated
 * verbatim as `.lp-*` (landlords.html) and `.pro-*` (service_providers.html).
 * Both pages now use this single `.lp-*` namespace.
 */

/* Hero band — solid primary background, large white title and subtitle. */
.lp-hero {
  background: var(--color-primary);
  padding:    4rem 1.5rem;
  text-align: center;
}
.lp-hero__title {
  color:       #fff;
  font-size:   2.5rem;
  font-weight: 700;
  margin:      0 0 1rem;
  line-height: 1.2;
}
.lp-hero__sub {
  color:       rgba(255,255,255,0.85);
  font-size:   1.1rem;
  margin:      0 auto 2rem;
  max-width:   560px;
  line-height: 1.6;
}
.lp-hero__ctas {
  display:         flex;
  gap:             0.75rem;
  justify-content: center;
  flex-wrap:       wrap;
}
.lp-hero__btn {
  background:      #fff;
  color:           var(--color-primary);
  font-weight:     700;
  padding:         0.875rem 2rem;
  border-radius:   0.5rem;
  text-decoration: none;
  font-size:       1rem;
  display:         inline-block;
}
.lp-hero__btn:hover { opacity: 0.9; color: var(--color-primary); }
.lp-hero__btn--outline {
  background: transparent;
  color:      #fff;
  border:     2px solid rgba(255,255,255,0.6);
  font-weight: 600;
}
.lp-hero__btn--outline:hover { background: rgba(255,255,255,0.1); color: #fff; }

/* Content section — centred max-width column with eyebrow / title / sub. */
.lp-section {
  max-width: 1000px;
  margin:    0 auto;
  padding:   4rem 1.5rem;
}
.lp-section__label {
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size:      0.75rem;
  font-weight:    700;
  color:          var(--color-primary);
  margin-bottom:  0.5rem;
}
.lp-section__title {
  font-size:   1.75rem;
  font-weight: 700;
  margin:      0 0 0.75rem;
}
.lp-section__sub {
  color:         var(--color-muted);
  font-size:     1rem;
  line-height:   1.6;
  max-width:     560px;
  margin-bottom: 2.5rem;
}

/* Benefits grid — 3-column on desktop, single-column on mobile via the
 * generic minmax(0, 1fr) collapse pattern. */
.lp-benefits {
  display:               grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap:                   1.5rem;
}
.lp-benefit {
  background:    var(--color-primary-light);
  border:        1px solid var(--color-primary-light);
  border-radius: 0.75rem;
  padding:       1.5rem;
}
.lp-benefit__icon {
  width:           2.5rem;
  height:          2.5rem;
  background:      var(--color-primary);
  border-radius:   0.5rem;
  display:         flex;
  align-items:     center;
  justify-content: center;
  margin-bottom:   1rem;
  color:           #fff;
}
.lp-benefit__title {
  font-size:   1rem;
  font-weight: 700;
  margin:      0 0 0.5rem;
}
.lp-benefit__desc {
  font-size:   0.875rem;
  color:       var(--color-muted);
  line-height: 1.6;
  margin:      0;
}

/* Numbered steps — 3-column on desktop. */
.lp-steps {
  display:               grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap:                   2rem;
  position:              relative;
}
.lp-step { text-align: center; }
.lp-step__num {
  width:           3rem;
  height:          3rem;
  border-radius:   50%;
  background:      var(--color-primary);
  color:           #fff;
  font-size:       1.25rem;
  font-weight:     700;
  display:         flex;
  align-items:     center;
  justify-content: center;
  margin:          0 auto 1rem;
}
.lp-step__title {
  font-size:   1rem;
  font-weight: 700;
  margin:      0 0 0.5rem;
}
.lp-step__desc {
  font-size:   0.875rem;
  color:       var(--color-muted);
  line-height: 1.6;
  margin:      0;
}

/* Final CTA strip — soft body-bg, centred title + button. */
.lp-cta {
  background: var(--color-body-bg);
  text-align: center;
  padding:    4rem 1.5rem;
}
.lp-cta__title {
  font-size:   1.75rem;
  font-weight: 700;
  margin:      0 0 0.75rem;
}
.lp-cta__sub {
  color:       var(--color-muted);
  margin:      0 auto 2rem;
  max-width:   480px;
  line-height: 1.6;
}

/* Section divider — full-width hairline between bands. */
.lp-divider {
  border:     none;
  border-top: 1px solid var(--color-border);
  margin:     0;
}

/* Service-providers-only callout — illustrates the public profile URL.
 * Page-unique to /pro/, but shaped like a benefit card so it sits in this
 * file rather than its own template <style>. */
.lp-url-demo {
  background:    var(--color-primary-light);
  border:        1px solid var(--color-primary-light);
  border-radius: 0.75rem;
  padding:       2rem;
  text-align:    center;
  margin-top:    2rem;
}
.lp-url-demo__code {
  display:         inline-block;
  background:      var(--color-card-bg);
  border:          1px solid var(--color-border);
  border-radius:   0.375rem;
  padding:         0.625rem 1rem;
  font-family:     ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size:       0.95rem;
  color:           var(--color-body-text);
}
.lp-url-demo__code strong { color: var(--color-primary); }
.lp-url-demo__note {
  font-size: 0.875rem;
  color:     var(--color-muted);
  margin:    0.75rem 0 0;
}

/* Mobile collapse: titles shrink, grids drop to single column. The
 * `minmax(0, 1fr)` matches the `.grid-1col-mobile` convention. */
@media (max-width: 700px) {
  .lp-hero__title { font-size: 1.75rem; }
  .lp-benefits,
  .lp-steps { grid-template-columns: minmax(0, 1fr); }
  .lp-benefits > *,
  .lp-steps > * { min-width: 0; }
}

/* ── Tenant guide article pages ───────────────────────────────────────
 * Each guide page sets its accent colour via a modifier class:
 *   .guide-wrap--indigo  (preparing)
 *   .guide-wrap--green   (finding)
 *   .guide-wrap--orange  (moving in)
 *   .guide-wrap--purple  (rights)
 * These map to the same indigo/green/orange/purple palette as the cards
 * on the hub page.
 */
.guide-wrap {
  --guide-accent:        var(--color-primary);
  --guide-accent-strong: var(--color-primary);
  --guide-accent-bg:     var(--color-primary-light);
  --guide-callout-bg:    var(--color-indigo-50);
  --guide-callout-border: var(--color-primary-light);
  max-width: 760px;
  margin:    0 auto;
  padding:   2.5rem 1.5rem 4rem;
}
.guide-wrap--indigo {
  --guide-accent:        var(--color-primary);
  --guide-accent-strong: var(--color-primary);
  --guide-accent-bg:     #F0F4FF;
  --guide-callout-bg:    #F8FAFF;
  --guide-callout-border: #E8EEFF;
}
.guide-wrap--green {
  --guide-accent:        #059669;
  --guide-accent-strong: #047857;
  --guide-accent-bg:     #ECFDF5;
  --guide-callout-bg:    #F8FAFF;
  --guide-callout-border: #E8EEFF;
}
.guide-wrap--orange {
  --guide-accent:        #EA580C;
  --guide-accent-strong: #C2410C;
  --guide-accent-bg:     #FFF7ED;
  --guide-callout-bg:    #F8FAFF;
  --guide-callout-border: #E8EEFF;
}
.guide-wrap--purple {
  --guide-accent:        #9333EA;
  --guide-accent-strong: #7E22CE;
  --guide-accent-bg:     #FDF4FF;
  --guide-callout-bg:    #F0FDF4;
  --guide-callout-border: #BBF7D0;
}
.guide-breadcrumb {
  font-size:    0.8rem;
  color:        var(--color-muted);
  margin-bottom: 1.75rem;
}
.guide-breadcrumb a       { color: var(--color-primary); text-decoration: none; }
.guide-breadcrumb a:hover { text-decoration: underline; }
.guide-header { margin-bottom: 2.5rem; }
.guide-header__label {
  font-size:      0.75rem;
  font-weight:    700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color:          var(--guide-accent);
  margin-bottom:  0.5rem;
}
.guide-header__title {
  font-size:   2rem;
  font-weight: 700;
  margin:      0 0 0.75rem;
  line-height: 1.25;
}
.guide-header__intro {
  font-size:   1.05rem;
  color:       var(--color-body-text);
  line-height: 1.7;
  border-left: 3px solid var(--guide-accent);
  padding-left: 1rem;
  margin:      0;
}
.guide-body h2 {
  font-size:   1.2rem;
  font-weight: 700;
  margin:      2.5rem 0 0.75rem;
  padding-top: 2rem;
  border-top:  1px solid var(--color-border);
}
.guide-body h2:first-child { border-top: none; padding-top: 0; }
.guide-body p,
.guide-body li {
  font-size:   0.95rem;
  line-height: 1.75;
  color:       var(--color-body-text);
}
.guide-body p { margin: 0 0 1rem; }
.guide-body ul,
.guide-body ol { padding-left: 1.5rem; margin: 0 0 1rem; }
.guide-body li { margin-bottom: 0.375rem; }
.guide-tip {
  background:   var(--guide-accent-bg);
  border-left:  3px solid var(--guide-accent);
  border-radius: 0 0.375rem 0.375rem 0;
  padding:      1rem 1.25rem;
  margin:       1.5rem 0;
  font-size:    0.9rem;
  color:        var(--color-body-text);
  line-height:  1.6;
}
.guide-tip strong { color: var(--guide-accent-strong); }
.guide-checklist {
  background:    var(--guide-callout-bg);
  border:        1px solid var(--guide-callout-border);
  border-radius: 0.5rem;
  padding:       1.25rem 1.5rem;
  margin:        1.5rem 0;
}
.guide-checklist__title {
  font-size:   0.875rem;
  font-weight: 700;
  margin:      0 0 0.75rem;
  color:       var(--color-body-text);
}
.guide-checklist ul { margin: 0; padding-left: 1.25rem; }
.guide-checklist li {
  font-size:    0.875rem;
  margin-bottom: 0.25rem;
  color:        var(--color-body-text);
}
.guide-steps {
  counter-reset: steps;
  list-style:    none;
  padding:       0;
  margin:        0 0 1rem;
}
.guide-steps li {
  counter-increment: steps;
  display:           flex;
  gap:               1rem;
  align-items:       flex-start;
  margin-bottom:     1.25rem;
}
.guide-steps li::before {
  content:         counter(steps);
  min-width:       1.75rem;
  height:          1.75rem;
  border-radius:   50%;
  background:      var(--color-primary);
  color:           #fff;
  font-size:       0.8rem;
  font-weight:     700;
  display:         flex;
  align-items:     center;
  justify-content: center;
  flex-shrink:     0;
  margin-top:      0.1rem;
}
.guide-steps li span {
  font-size:   0.95rem;
  line-height: 1.7;
  color:       var(--color-body-text);
}
.guide-highlight {
  background:    var(--guide-callout-bg);
  border:        1px solid var(--guide-callout-border);
  border-radius: 0.5rem;
  padding:       1.25rem 1.5rem;
  margin:        1.5rem 0;
  font-size:     0.9rem;
  color:         var(--color-body-text);
  line-height:   1.6;
}
.guide-highlight strong { color: var(--guide-accent-strong); }
.guide-nav {
  display:        flex;
  justify-content: space-between;
  align-items:    center;
  margin-top:     3rem;
  padding-top:    2rem;
  border-top:     1px solid var(--color-border);
  gap:            1rem;
  flex-wrap:      wrap;
}
.guide-nav__link {
  display:         flex;
  align-items:     center;
  gap:             0.375rem;
  font-size:       0.875rem;
  font-weight:     600;
  color:           var(--color-primary);
  text-decoration: none;
}
.guide-nav__link:hover { text-decoration: underline; }

/* ── Feedback page (form + thanks) ─────────────────────────────────── */
.feedback-hero {
  background: linear-gradient(135deg, var(--color-primary) 0%, #2318a8 100%);
  padding:    4rem 1.5rem 3rem;
  text-align: center;
  color:      #fff;
}
.feedback-hero__title {
  font-size:   clamp(1.75rem, 4vw, 2.5rem);
  font-weight: 700;
  line-height: 1.15;
  margin:      0 0 0.75rem;
}
.feedback-hero__sub {
  font-size:   1.05rem;
  opacity:     0.85;
  max-width:   38rem;
  margin:      0 auto;
  line-height: 1.6;
}
.feedback-section {
  max-width: 640px;
  margin:    0 auto;
  padding:   3rem 1.5rem 4rem;
}
.feedback-section .card {
  background:    var(--color-card-bg);
  border:        1px solid var(--color-border);
  border-radius: var(--radius-xl);
  box-shadow:    var(--shadow);
}
.feedback-section .card-body {
  padding:        2rem;
  display:        flex;
  flex-direction: column;
  gap:            1rem;
}
.feedback-section__actions { display: flex; gap: 0.5rem; }
.feedback-form {
  display:        flex;
  flex-direction: column;
  gap:            1.25rem;
}
.feedback-form__actions {
  display:     flex;
  gap:         0.5rem;
  padding-top: 0.25rem;
}