/* Letalife — components (load after base.css). */

/* ================================================================
   SEARCH BOX
   ================================================================ */
.ll-search-wrap {
  position: relative;
  max-width: 540px;
}

.ll-search-hint {
  font-size: 0.8rem;
  color: var(--ll-muted);
  margin-top: 0.5rem;
}

.ll-search-results {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  background: rgba(255,255,255,0.98);
  border: 1px solid var(--ll-border);
  border-radius: var(--ll-r);
  box-shadow: var(--ll-shadow-lg);
  z-index: var(--ll-z-dropdown);
  max-height: 340px;
  overflow-y: auto;
  display: none;
}

.ll-search-results .s-item {
  display: block;
  padding: 0.7rem 1rem;
  color: var(--ll-text);
  text-decoration: none;
  border-bottom: 1px solid var(--ll-border);
  font-size: 0.9rem;
  transition: background 0.1s;
}

.ll-search-results .s-item:last-child {
  border-bottom: none;
}

.ll-search-results .s-item:hover,
.ll-search-results .s-item.active {
  background: var(--ll-blue-50);
  color: var(--ll-blue-700);
}

.ll-search-results .s-item .s-county {
  font-size: 0.78rem;
  color: var(--ll-muted);
  margin-left: 0.35rem;
}


/* ================================================================
   BADGES
   ================================================================ */
.ll-badge {
  display: inline-flex;
  align-items: center;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.025em;
  padding: 0.18em 0.6em;
  /* 99px is functionally identical to 999px for pill shape — using --ll-r-pill */
  border-radius: var(--ll-r-pill);
  white-space: nowrap;
}

.badge-to-let {
  background: var(--ll-blue-100);
  color: var(--ll-blue-900);
}

.badge-wanted {
  background: var(--ll-violet-100);
  color: var(--ll-violet-800);
}

.badge-exchange {
  background: var(--ll-green-100);
  color: var(--ll-green-700);
}

.badge-elevated {
  background: var(--ll-amber-100);
  /* amber-900 is the canonical deep-brown text on amber surfaces (style-bible §3) */
  color: var(--ll-amber-900);
}

.badge-premium {
  background: var(--ll-amber-100);
  color: var(--ll-amber-900);
  font-weight: 700;
}

/* ---- Premium upsell hero card (ad-photos step, zero-balance upsell) ----
   Same amber family as badge-premium/.wiz-note, but pushed harder — this is
   the one moment we're actively asking for money, so it needs to read as
   the dominant element on the page, not another .ll-card in the stack. */
.premium-hero {
  border: 2px solid var(--ll-amber-500);
  border-radius: var(--ll-r-xl);
  background: linear-gradient(180deg, var(--ll-amber-100) 0%, var(--ll-surface) 65%);
  box-shadow: 0 0 0 3px var(--ll-amber-100), var(--ll-shadow-md);
  padding: 1.5rem 1.5rem 1.25rem;
}
/* Success variant: the payoff card shown once the purchase has actually
   landed. Green rather than amber — "action needed" vs "done" — but keeps the
   same dominant treatment so it reads as a continuation of the same moment. */
.premium-hero--success {
  border-color: var(--ll-green-600);
  background: linear-gradient(180deg, var(--ll-green-100) 0%, var(--ll-surface) 65%);
  box-shadow: 0 0 0 3px var(--ll-green-100), var(--ll-shadow-md);
}
.premium-hero--success .premium-hero-eyebrow { color: var(--ll-green-700); }

.premium-hero-eyebrow {
  display: inline-flex; align-items: center; gap: 0.35rem;
  font-size: 0.78rem; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--ll-amber-900);
  margin-bottom: 0.5rem;
}
.premium-hero-title {
  font-size: 1.4rem; font-weight: 900; letter-spacing: -0.02em;
  color: var(--ll-slate-900); margin: 0 0 0.35rem;
}
.premium-hero-sub {
  font-size: 0.92rem; color: var(--ll-muted); margin: 0 0 1rem; max-width: 46rem;
}
.premium-hero-cta-row { display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap; }
.premium-hero-cta-row form { margin: 0; }
/* Equal gap above and below the button (matches premium-hero-sub's margin-bottom)
   — an earlier mismatch here (1.1rem/0.6rem) read as the button sitting off-center. */
.premium-hero-note {
  font-size: 0.8rem; color: var(--ll-muted); margin: 1rem 0 0;
}

/* Secondary, deliberately smaller/quieter — the monthly-plan alternative to
   the hero one-off purchase above. */
.premium-secondary {
  margin-top: 1.25rem; padding-top: 1.1rem; border-top: 1px dashed var(--ll-border);
}
.premium-secondary-title {
  font-size: 0.8rem; font-weight: 700; color: var(--ll-muted);
  text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 0.6rem;
}

.badge-private {
  background: var(--ll-green-100);
  /* style-bible §3: private landlord = green badge; green-700 is the canonical text */
  color: var(--ll-green-700);
}

.badge-agent {
  background: var(--ll-blue-100);
  /* Tokenized to --ll-blue-800 (#1e40af) to preserve the original rendered colour
     exactly. That value is a foreign Tailwind blue pending a style-bible decision
     (see LETAL-108) — do not assume it's a sanctioned brand colour. */
  color: var(--ll-blue-800);
}

.status-badge {
  display: inline-flex;
  align-items: center;
  font-size: 0.78rem;
  font-weight: 600;
  padding: 0.2em 0.65em;
  border-radius: var(--ll-r-sm);
}

.status-pending {
  background: var(--ll-status-pending-bg);
  color: var(--ll-status-pending-text);
}

.status-approved {
  background: var(--ll-status-approved-bg);
  color: var(--ll-status-approved-text);
}

.status-rejected {
  background: var(--ll-status-rejected-bg);
  color: var(--ll-status-rejected-text);
}

.status-expired {
  background: var(--ll-status-expired-bg);
  color: var(--ll-status-expired-text);
}

.status-hidden {
  background: var(--ll-status-hidden-bg);
  color: var(--ll-status-hidden-text);
}

.status-withdrawn {
  background: var(--ll-slate-100);
  color: var(--ll-slate-600);
}


/* ================================================================
   SURFACE CARDS
   ================================================================ */
.ll-card {
  background: var(--ll-surface);
  border: 1px solid var(--ll-border);
  border-radius: var(--ll-r-lg);
  box-shadow: var(--ll-shadow-sm);
}

.ll-card-body {
  padding: 1.35rem 1.5rem;
}

.ll-section-label {
  font-size: 0.72rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--ll-muted);
  margin-bottom: 0.75rem;
}


/* ================================================================
   FORMS
   ================================================================ */
.form-label {
  font-weight: 600;
  font-size: 0.875rem;
  color: var(--ll-slate-700);
  margin-bottom: 0.3rem;
}

.form-control,
.form-select {
  border-color: var(--ll-slate-300);
  border-radius: var(--ll-r-sm);
  font-size: 0.9375rem;
  transition: border-color 0.15s, box-shadow 0.15s;
}

.form-control:focus,
.form-select:focus {
  border-color: var(--ll-blue-500);
  /* Use --ll-blue-500-rgb (77 145 212) so the ring matches our cornflower-blue
     palette rather than Tailwind's cold #3b82f6 that was previously hardcoded. */
  box-shadow: 0 0 0 3px rgb(var(--ll-blue-500-rgb) / 0.15);
  outline: none;
}

.form-text {
  font-size: 0.8rem;
  color: var(--ll-muted);
  margin-top: 0.3rem;
}

.is-invalid {
  border-color: var(--ll-red-600) !important;
}

.invalid-feedback {
  font-size: 0.8rem;
  color: var(--ll-red-600);
}


/* ================================================================
   FLASH MESSAGES
   ================================================================ */
.ll-flash {
  border-radius: var(--ll-r);
  padding: 0.875rem 1.1rem;
  font-size: 0.9rem;
  font-weight: 500;
  margin-bottom: 1.5rem;
}

.ll-flash-success {
  background: var(--ll-green-50);
  border: 1px solid var(--ll-green-200);
  color: var(--ll-green-700);
}

.ll-flash-danger {
  background: var(--ll-red-50);
  border: 1px solid var(--ll-red-300);
  color: var(--ll-red-700);
}

.ll-flash-warning {
  background: var(--ll-amber-100);
  border: 1px solid var(--ll-amber-200);
  color: var(--ll-amber-900);
}

.ll-flash-info {
  background: var(--ll-blue-50);
  border: 1px solid var(--ll-blue-200);
  color: var(--ll-blue-900);
}


/* ================================================================
   AD DETAIL
   ================================================================ */
.ad-detail-wrap {
  max-width: 980px;
  margin: 0 auto;
}

/* Rent/budget figure on the detail page (shown in the photo case; the no-photo
   placeholder overlays its own .media-price — see .detail-v2). */
.ad-detail-price {
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--ll-blue-900);
  letter-spacing: -0.02em;
  margin: 0.1rem 0 0.25rem;
}

.ad-detail-price-period {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--ll-muted);
}

.ad-detail-price-tag {
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--ll-blue-700);
  background: var(--ll-blue-50);
  border: 1px solid var(--ll-blue-200);
  border-radius: 0.35rem;
  padding: 0.1rem 0.4rem;
  vertical-align: middle;
}

/* Feature badges — still used by the admin views (out of reskin scope). */
.feature-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.feature-badge {
  display: inline-flex;
  align-items: center;
  background: var(--ll-slate-100);
  color: var(--ll-slate-700);
  border: 1px solid var(--ll-slate-200);
  border-radius: var(--ll-r-sm);
  font-size: 0.82rem;
  font-weight: 500;
  padding: 0.2em 0.65em;
}

/* Detail sidebar sticky (consumed by the .detail-v2 sidebar). */
.ad-sidebar-sticky {
  position: sticky;
  top: 72px;
}


/* ================================================================
   LISTER TYPE RADIO
   ================================================================ */
.lister-type-radios {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
}

.lister-type-option {
  flex: 1 1 160px;
  display: flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.85rem 1.1rem;
  background: var(--ll-surface);
  border: 2px solid var(--ll-border);
  border-radius: var(--ll-r);
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s, box-shadow 0.15s;
  user-select: none;
}

.lister-type-option input[type="radio"] {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
  pointer-events: none;
}

.lister-type-option:hover {
  border-color: var(--ll-blue-500);
  background: var(--ll-blue-50);
}

.lister-type-option.selected,
.lister-type-option:has(input:checked) {
  border-color: var(--ll-blue-700);
  background: var(--ll-blue-50);
  box-shadow: 0 0 0 3px var(--ll-blue-100);
}

.lister-type-icon {
  font-size: 1.5rem;
  line-height: 1;
  flex-shrink: 0;
}

.lister-type-label {
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--ll-slate-800);
}


/* ================================================================
   MANAGE LINK BOX
   ================================================================ */
.manage-link-box {
  background: var(--ll-blue-50);
  border: 1px solid var(--ll-blue-200);
  border-radius: var(--ll-r);
  padding: 1.25rem 1.5rem;
  margin: 1rem 0;
}

.manage-link-url {
  font-family: "Courier New", Courier, monospace;
  font-size: 0.8rem;
  word-break: break-all;
  color: var(--ll-blue-700);
  background: var(--ll-white);
  padding: 0.5rem 0.75rem;
  border-radius: var(--ll-r-sm);
  border: 1px solid var(--ll-blue-200);
  display: block;
  margin: 0.5rem 0;
}


/* ================================================================
   RADIUS PANEL
   ================================================================ */
.radius-panel {
  background: var(--ll-surface);
  border: 1px solid var(--ll-border);
  border-radius: var(--ll-r-lg);
  padding: 1.25rem 1.5rem;
  margin-bottom: 1rem;
  box-shadow: var(--ll-shadow-xs);
}


/* ================================================================
   EMPTY STATE
   ================================================================ */
.empty-state {
  text-align: center;
  padding: 3rem 1.5rem;
  color: var(--ll-muted);
}

.empty-state-icon {
  font-size: 2.5rem;
  margin-bottom: 0.75rem;
  opacity: 0.4;
  display: block;
}

.empty-state h3 {
  font-size: 1rem;
  font-weight: 600;
  color: var(--ll-slate-600);
  margin-bottom: 0.25rem;
}


/* ================================================================
   SECTION HEADINGS
   ================================================================ */
.ll-section-title {
  font-size: 0.8rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--ll-muted);
  margin-bottom: 0.9rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--ll-border);
}


/* ================================================================
   PENDING PAGE
   ================================================================ */
.pending-card {
  background: var(--ll-surface);
  border: 1px solid var(--ll-border);
  border-radius: var(--ll-r-xl);
  padding: 2.5rem 2rem;
  text-align: center;
  max-width: 560px;
  margin: 0 auto;
  box-shadow: var(--ll-shadow);
}

.pending-icon {
  font-size: 3rem;
  margin-bottom: 1rem;
  display: block;
}


/* ================================================================
   TOWN GRID
   ================================================================ */
.town-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 0.4rem;
}

.town-link {
  display: block;
  padding: 0.45rem 0.75rem;
  background: var(--ll-surface);
  border: 1px solid var(--ll-border);
  border-radius: var(--ll-r-sm);
  color: var(--ll-slate-700);
  font-size: 0.875rem;
  text-decoration: none;
  transition: all 0.12s;
  box-shadow: var(--ll-shadow-xs);
  line-height: 1.3;
}

.town-link:hover {
  background: var(--ll-blue-50);
  border-color: var(--ll-blue-200);
  color: var(--ll-blue-700);
  text-decoration: none;
  transform: translateX(2px);
}

.town-link-county {
  font-size: 0.75rem;
  color: var(--ll-muted);
  display: block;
}



/* ---- Responsive ---- */
@media (max-width: 991px) {

  /* Below lg: sidebar un-sticks so it flows naturally below main content */
  .ad-sidebar-sticky {
    position: static;
  }
}

@media (max-width: 575px) {
  .pending-card {
    padding: 1.75rem 1.25rem;
  }

  .town-grid {
    grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
  }
}

/* ================================================================
   LIGHTBOX
   ================================================================ */

/* Full-viewport overlay */
.ll-lb {
  position: fixed;
  inset: 0;
  z-index: var(--ll-z-lightbox);
  display: flex;
  align-items: center;
  justify-content: center;
}

.ll-lb[hidden] {
  display: none;
}

.ll-lb-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.88);
}

/* The stage is a FIXED size — never changes shape regardless of image or hover state */
.ll-lb-stage {
  position: relative;
  z-index: 1;
  width: min(92vw, 900px);
  height: min(80vh, 675px);
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Image fills the stage, letterboxed — box never resizes */
.ll-lb-img {
  max-width: 100%;
  max-height: 100%;
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: 4px;
  display: block;
  user-select: none;
  -webkit-user-drag: none;
}

/* Nav arrows — sit just outside the stage edges, fixed size so nothing ever shifts */
.ll-lb-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  width: 54px;
  height: 54px;
  background: rgba(255, 255, 255, 0.95);
  border: none;
  border-radius: 50%;
  color: var(--ll-slate-800);
  font-size: 2rem;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.45);
  transition: background 0.15s, box-shadow 0.15s;
}

.ll-lb-nav:hover {
  background: var(--ll-white);
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.55);
}

/* Outside the stage — no overlap with image */
.ll-lb-prev {
  left: -68px;
}

.ll-lb-next {
  right: -68px;
}

/* Close button — top-right corner of stage */
.ll-lb-close {
  position: absolute;
  top: -44px;
  right: 0;
  width: 36px;
  height: 36px;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 50%;
  color: var(--ll-white);
  font-size: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.15s;
}

.ll-lb-close:hover {
  background: rgba(255, 255, 255, 0.28);
}

/* Counter "2 / 5" */
.ll-lb-counter {
  position: absolute;
  bottom: -32px;
  left: 50%;
  transform: translateX(-50%);
  color: rgba(255, 255, 255, 0.65);
  font-size: 0.82rem;
  white-space: nowrap;
  pointer-events: none;
}

@media (max-width: 575px) {
  .ll-lb-stage {
    width: 98vw;
    height: 70vw;
    /* ~4:3 proportional on narrow phones */
  }

  .ll-lb-nav {
    width: 42px;
    height: 42px;
    font-size: 1.5rem;
  }

  /* On mobile the stage is nearly full-width so arrows move inside */
  .ll-lb-prev {
    left: 6px;
  }

  .ll-lb-next {
    right: 6px;
  }
}


/* ================================================================
   PHOTOS — public ad gallery & upload zone
   ================================================================ */

/* Public ad gallery */
.ad-photo-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 0.5rem;
  margin-bottom: 0.75rem;
}

/* Single photo: don't stretch full width */
.ad-photo-gallery:has(.ad-photo-thumb:only-child) {
  grid-template-columns: minmax(0, 320px);
}

.ad-photo-thumb {
  display: block;
  aspect-ratio: 4/3;
  border-radius: var(--ll-r-sm);
  overflow: hidden;
  border: 1px solid var(--ll-border);
}

.ad-photo-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.18s ease;
}

.ad-photo-thumb:hover img {
  transform: scale(1.04);
}

/* Photo management grid (edit page) */
.photo-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-bottom: 1rem;
}

.photo-tile {
  position: relative;
  width: 150px;
  border-radius: var(--ll-r-sm);
  overflow: hidden;
  border: 1px solid var(--ll-border);
  background: var(--ll-slate-50);
}

.photo-tile img {
  width: 150px;
  height: 110px;
  object-fit: cover;
  display: block;
}

.photo-tile-status {
  font-size: 0.7rem;
  font-weight: 700;
  text-align: center;
  padding: 0.2rem 0.4rem;
}

.photo-tile-status.status-approved {
  background: var(--ll-status-approved-bg);
  color: var(--ll-status-approved-text);
}

.photo-tile-status.status-pending {
  background: var(--ll-status-pending-bg);
  color: var(--ll-status-pending-text);
}

.photo-tile-actions {
  display: flex;
  gap: 0.3rem;
  padding: 0.35rem;
  background: var(--ll-slate-100);
  justify-content: center;
}

.btn-xs {
  padding: 0.15rem 0.5rem;
  font-size: 0.72rem;
  font-weight: 600;
  border-radius: var(--ll-r-xs);
}

/* Drop zone */
.photo-dropzone {
  border: 2px dashed var(--ll-border);
  border-radius: var(--ll-r-sm);
  min-height: 90px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
  background: var(--ll-slate-50);
}

.photo-dropzone:hover,
.photo-dropzone.dragover {
  border-color: var(--ll-blue-500);
  background: var(--ll-blue-50);
}

.photo-dropzone-inner {
  text-align: center;
  padding: 1rem;
  font-size: 0.88rem;
  color: var(--ll-muted);
}

.photo-dropzone-icon {
  font-size: 1.75rem;
  margin-bottom: 0.25rem;
}

.photo-dropzone-inner a {
  color: var(--ll-blue-700);
  text-decoration: underline;
  cursor: pointer;
}

.photo-upload-progress {
  text-align: center;
  padding: 1rem;
  font-size: 0.88rem;
  color: var(--ll-blue-700);
  font-style: italic;
}

@media (max-width: 540px) {
  .ad-photo-gallery {
    grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
  }

  .photo-tile {
    width: 130px;
  }

  .photo-tile img {
    width: 130px;
    height: 95px;
  }
}


/* ================================================================
   FILTER BAR
   ================================================================ */

/* Listing filter/sort bar (shared town + county partial). Flex-wrap row of
   compact fields; collapses to stacked on narrow screens.
   (Recovered after the CSS split — had been adjacent to the deleted .ad-card block.) */
.ll-filter-bar {
  background: var(--ll-slate-50);
  border: 1px solid var(--ll-border);
  border-radius: 0.6rem;
  padding: 0.7rem 0.85rem;
}

.ll-filter-row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 0.6rem;
}

.ll-filter-field {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  flex: 1 1 8rem;
  min-width: 6rem;
}

.ll-filter-label {
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--ll-muted);
}

.ll-filter-actions {
  display: flex;
  gap: 0.4rem;
  align-items: flex-end;
  flex: 0 0 auto;
}
/* ================================================================
   HEART BUTTON
   ================================================================ */

/* Keyboard focus ring for the save/heart toggle (LETAL-58). An explicit,
   higher-specificity rule so the button reset can't defeat the global
   *:focus-visible; matches the site focus style. Uses --ll-blue-500 directly
   (--ll-accent was never defined, so the Tailwind fallback was always firing). */
.ll-heart-btn:focus-visible {
    outline: 2px solid var(--ll-blue-500);
    outline-offset: 2px;
}