/* Letalife — listing, form, and user-account page styles.
   Covers: .listing-v2 (county/town/saved listing pages), .ll-breadcrumb (shared
   with detail — detail.html loads this file too), .ll-acard-wrap + .ll-heart-btn
   (ad card wrapper), .ll-formwrap + .ll-page-title/sub (create/edit form chrome),
   .ll-token-strip (My Ads billing strip), .plan-cards (billing plan selector). */

/* ===================== PREMIUM TOKEN STRIP (LETAL-84) =====================
   My Ads header strip linking to billing. Tokens only — no hardcoded colours. */
.ll-token-strip {
   display: flex;
   align-items: center;
   gap: 1rem;
   flex-wrap: wrap;
   background: linear-gradient(180deg, var(--ll-blue-50), #fff);
   border: 1px solid var(--ll-blue-200);
   border-radius: var(--ll-r);
   padding: .8rem 1.1rem;
   color: var(--ll-slate-800);
   transition: border-color .15s, box-shadow .15s
}

.ll-token-strip:hover {
   border-color: var(--ll-blue-500);
   box-shadow: var(--ll-shadow-sm)
}

.ll-token-strip-main {
   font-size: .95rem
}

.ll-token-strip-main strong {
   color: var(--ll-blue-700);
   font-size: 1.05rem
}

.ll-token-strip-sub {
   font-size: .8rem;
   color: var(--ll-muted);
   flex: 1;
   min-width: 0
}

.ll-token-strip-cta {
   font-size: .85rem;
   font-weight: 700;
   color: var(--ll-blue-700)
}

/* ===================== DIRECTION A — LISTINGS (LETAL-39) =====================
   Faithful port of the mockup listing page, scoped under .listing-v2. Card
   container is .ll-acard (not .card) to dodge Bootstrap's .card. */

/* Shared breadcrumb (ll- prefix dodges Bootstrap's .breadcrumb). Used by
   listings and ad detail — detail.html loads this file. */
.ll-breadcrumb {
   font-size: .8rem;
   color: var(--ll-muted);
   padding: .2rem 0 .9rem;
   background: none;
   margin: 0
}

.ll-breadcrumb a {
   color: var(--ll-blue-700)
}

.listing-v2 .area-hero {
   position: relative;
   background: linear-gradient(120deg, var(--ll-blue-900), var(--ll-blue-700));
   color: var(--ll-white);
   border-radius: var(--ll-r-xl);
   padding: 1.8rem 2rem;
   overflow: hidden;
   margin-bottom: 1.4rem;
   box-shadow: var(--ll-shadow-lg)
}

.listing-v2 .area-hero::after {
   content: "";
   position: absolute;
   right: -40px;
   top: -40px;
   width: 220px;
   height: 220px;
   border-radius: 50%;
   background: rgba(255, 255, 255, .06);
   pointer-events: none
}

/* Keep hero content (incl. the place-an-advert button) above the decoration. */
.listing-v2 .area-hero>* {
   position: relative;
   z-index: 1
}

.listing-v2 .area-hero h1 {
   font-size: 2rem;
   font-weight: 900;
   letter-spacing: -.03em;
   color: var(--ll-white);
   margin: 0
}

.listing-v2 .area-hero .ah-sub {
   opacity: .85;
   font-size: .95rem;
   margin-top: .2rem
}

.listing-v2 .area-hero .ah-stats {
   display: flex;
   gap: 1.8rem;
   margin-top: 1.1rem
}

.listing-v2 .area-hero .ah-stat b {
   font-size: 1.3rem;
   display: block;
   font-weight: 900
}

.listing-v2 .area-hero .ah-stat span {
   font-size: .76rem;
   opacity: .8;
   text-transform: uppercase;
   letter-spacing: .06em
}

.listing-v2 .tabs {
   display: flex;
   gap: .4rem;
   margin-bottom: 1rem;
   flex-wrap: wrap
}

.listing-v2 .tab {
   display: inline-block;
   padding: .5rem 1rem;
   border-radius: var(--ll-r-pill);
   font-size: .82rem;
   font-weight: 700;
   border: 1.5px solid var(--ll-blue-200);
   color: var(--ll-blue-700);
   background: var(--ll-white);
   cursor: pointer;
   text-decoration: none
}

.listing-v2 .tab:hover {
   background: var(--ll-blue-50);
   text-decoration: none
}

.listing-v2 .tab.on {
   background: var(--ll-blue-700);
   color: var(--ll-white);
   border-color: var(--ll-blue-700)
}

.listing-v2 .result-row {
   display: flex;
   justify-content: space-between;
   align-items: center;
   margin-bottom: 1rem;
   flex-wrap: wrap;
   gap: .5rem
}

.listing-v2 .result-row .count {
   font-weight: 800;
   font-size: 1.05rem;
   color: var(--ll-slate-900)
}

.listing-v2 .result-row .count span {
   color: var(--ll-muted);
   font-weight: 600;
   font-size: .85rem
}

.listing-v2 .cards {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: 1.25rem
}

/* Listing pagination control (LETAL-45). Tokens only — slate scale + the shared
   border/radius vars — so it sits in the same visual language as the cards. */
.listing-v2 .ll-pagination {
   display: flex;
   justify-content: center;
   align-items: center;
   flex-wrap: wrap;      /* numbered strip can be wide — wrap rather than overflow on mobile */
   gap: .4rem;
   margin-top: 1.75rem
}

.listing-v2 .ll-page-link {
   display: inline-block;
   padding: .45rem .9rem;
   border: 1px solid var(--ll-border);
   border-radius: var(--ll-r-lg);
   background: var(--ll-white);
   color: var(--ll-slate-700);
   font-weight: 600;
   font-size: .9rem;
   text-decoration: none;
   transition: background-color .12s ease, color .12s ease
}

.listing-v2 a.ll-page-link:hover,
.listing-v2 a.ll-page-link:focus-visible {
   background: var(--ll-slate-100);
   color: var(--ll-slate-900)
}

/* Disabled prev/next at the ends — a non-interactive span, dimmed. */
.listing-v2 .ll-page-link.is-disabled {
   color: var(--ll-slate-400);
   background: var(--ll-slate-100);
   cursor: default
}

.listing-v2 .ll-page-status {
   color: var(--ll-slate-600);
   font-weight: 600;
   font-size: .9rem
}

/* Numbered page buttons (the [1] [2] [3] strip between Prev/Next). Square-ish so a
   row of them reads as a selector, distinct from the wider Prev/Next pills. */
.listing-v2 .ll-page-num {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   min-width: 2.25rem;
   padding: .4rem .55rem;
   border: 1px solid var(--ll-border);
   border-radius: var(--ll-r-lg);
   background: var(--ll-white);
   color: var(--ll-slate-700);
   font-weight: 600;
   font-size: .9rem;
   text-decoration: none;
   transition: background-color .12s ease, color .12s ease
}

.listing-v2 a.ll-page-num:hover,
.listing-v2 a.ll-page-num:focus-visible {
   background: var(--ll-slate-100);
   color: var(--ll-slate-900)
}

/* Current page — filled, non-interactive (it's a span, not a link). */
.listing-v2 .ll-page-num.is-current {
   background: var(--ll-slate-800);
   border-color: var(--ll-slate-800);
   color: var(--ll-white);
   cursor: default
}

/* Ellipsis standing in for a skipped run of pages — purely decorative. */
.listing-v2 .ll-page-ellipsis {
   color: var(--ll-slate-400);
   font-weight: 600;
   padding: 0 .15rem
}

.listing-v2 .ll-acard {
   background: var(--ll-white);
   border: 1px solid var(--ll-border);
   border-radius: var(--ll-r-lg);
   overflow: hidden;
   box-shadow: var(--ll-shadow-sm);
   transition: transform .18s, box-shadow .18s;
   display: flex;
   flex-direction: column;
   color: inherit;
   text-decoration: none
}

.listing-v2 .ll-acard:hover {
   transform: translateY(-4px);
   box-shadow: var(--ll-shadow-md);
   text-decoration: none
}

.listing-v2 .ll-acard.is-premium {
   border-color: var(--ll-amber-500);
   box-shadow: 0 0 0 2px var(--ll-amber-100), var(--ll-shadow-sm)
}

.listing-v2 .ll-acard.is-elevated {
   border-color: var(--ll-amber-500)
}

.listing-v2 .ll-acard .photo {
   height: 170px;
   position: relative;
   /* Placeholder gradient when no photo exists. Uses brand blue tokens — slightly
      warmer than the original Tailwind blue-100/50 (#dbeafe/#eff6ff) by design. */
   background: linear-gradient(135deg, var(--ll-blue-100), var(--ll-blue-50))
}

.listing-v2 .ll-acard .photo.pv-wanted {
   /* violet-100 → violet-50 matches the "wanted" identity (style-bible §3) */
   background: linear-gradient(135deg, var(--ll-violet-100), var(--ll-violet-50))
}

.listing-v2 .ll-acard .photo.pv-exch {
   /* green-100 → green-50 matches the "exchange" identity (style-bible §3) */
   background: linear-gradient(135deg, var(--ll-green-100), var(--ll-green-50))
}

.listing-v2 .ll-acard .glyph {
   position: absolute;
   inset: 0;
   display: grid;
   place-items: center;
   opacity: .5;
   color: var(--ll-blue-500)
}

.listing-v2 .ll-acard .photo.pv-wanted .glyph {
   color: var(--ll-violet-800)
}

.listing-v2 .ll-acard .photo.pv-exch .glyph {
   color: var(--ll-green-700)
}

.listing-v2 .type-badge {
   position: absolute;
   top: .7rem;
   left: .7rem;
   font-size: .7rem;
   font-weight: 800;
   text-transform: uppercase;
   letter-spacing: .04em;
   padding: .22rem .55rem;
   border-radius: var(--ll-r-pill)
}

.listing-v2 .tb-let {
   background: var(--ll-blue-100);
   color: var(--ll-blue-900)
}

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

.listing-v2 .tb-exch {
   background: var(--ll-green-100);
   color: var(--ll-green-700)
}

.listing-v2 .ll-acard .pin {
   position: absolute;
   top: .6rem;
   right: .6rem;
   font-size: .68rem;
   font-weight: 800;
   background: rgba(255, 255, 255, .92);
   color: var(--ll-amber-600);
   padding: .15rem .45rem;
   border-radius: var(--ll-r-pill);
   box-shadow: var(--ll-shadow-sm)
}

.listing-v2 .ll-acard .body {
   padding: .85rem 1rem 1rem;
   display: flex;
   flex-direction: column;
   gap: .45rem;
   flex: 1
}

.listing-v2 .ll-acard .price {
   font-weight: 800;
   font-size: 1.2rem;
   color: var(--ll-blue-900);
   letter-spacing: -.01em
}

.listing-v2 .ll-acard .price small {
   font-size: .78rem;
   font-weight: 600;
   color: var(--ll-muted)
}

.listing-v2 .ll-acard .title {
   font-weight: 700;
   font-size: .95rem;
   line-height: 1.35;
   color: var(--ll-slate-800);
   display: -webkit-box;
   -webkit-line-clamp: 2;
   -webkit-box-orient: vertical;
   overflow: hidden
}

.listing-v2 .ll-acard .chips {
   display: flex;
   gap: .4rem;
   flex-wrap: wrap;
   margin-top: .1rem
}

.listing-v2 .ll-acard .chip {
   font-size: .74rem;
   font-weight: 600;
   color: var(--ll-slate-600);
   background: var(--ll-slate-100);
   padding: .18rem .5rem;
   border-radius: .4rem
}

.listing-v2 .ll-acard .loc {
   font-size: .8rem;
   color: var(--ll-muted);
   margin-top: auto;
   padding-top: .5rem;
   border-top: 1px solid var(--ll-slate-100)
}

@media(max-width:900px) {
   .listing-v2 .cards {
      grid-template-columns: repeat(2, 1fr)
   }
}

@media(max-width:560px) {
   .listing-v2 .cards {
      grid-template-columns: 1fr
   }
}

/* ---- Ad card wrapper + heart button (LETAL-28) ----
   The wrapper is position:relative so the heart button can be absolutely
   positioned over the card without breaking the grid cell dimensions.
   The heart is a sibling of the <a> — NOT inside it — because nested
   interactive elements are invalid HTML and break click routing. */
.ll-acard-wrap {
   position: relative;
   /* Fill the grid cell the same way the old bare <a> did */
   display: flex;
   flex-direction: column;
}

/* The inner <a> still needs to grow to fill the wrapper */
.ll-acard-wrap .ll-acard {
   flex: 1;
}

/* Heart button — bottom-right corner of the card */
.ll-heart-btn {
   position: absolute;
   bottom: 0.65rem;
   right: 0.65rem;
   z-index: var(--ll-z-card);
   width: 2rem;
   height: 2rem;
   display: flex;
   align-items: center;
   justify-content: center;
   background: rgba(255, 255, 255, 0.90);
   border: 1px solid var(--ll-border);
   border-radius: 50%;
   cursor: pointer;
   padding: 0;
   box-shadow: var(--ll-shadow-xs);
   transition: background 0.15s, border-color 0.15s, transform 0.12s;
}

.ll-heart-btn:hover {
   background: var(--ll-rose-50);
   border-color: var(--ll-rose-100);
   transform: scale(1.12);
}

.ll-heart-icon {
   color: var(--ll-slate-400);
   transition: color 0.15s, fill 0.15s;
   /* prevent the icon itself from being the click target for pointer-events */
   pointer-events: none;
}

/* Saved state — fill the heart with rose */
.ll-heart-btn.is-saved .ll-heart-icon {
   color: var(--ll-rose-600);
   fill: var(--ll-rose-600);
}

.ll-heart-btn.is-saved {
   border-color: var(--ll-rose-100);
   background: var(--ll-rose-50);
}

/* ===================== DIRECTION A — FORM PAGES (LETAL-39) =====================
   Shared chrome for form pages (create/edit). Centred, readable column. */
.ll-formwrap {
   max-width: 720px;
   margin: 0 auto
}

.ll-page-title {
   font-size: 1.7rem;
   font-weight: 900;
   letter-spacing: -.03em;
   color: var(--ll-slate-900);
   margin: 0 0 .25rem
}

.ll-page-sub {
   color: var(--ll-muted);
   font-size: .92rem;
   margin: 0 0 1.5rem
}

/* Area panels on listing pages (districts / nearby towns / towns in county).
   Replaces the old .ll-card header + grey count badge with the Direction A look. */
.listing-v2 .area-panel {
   background: var(--ll-surface);
   border: 1px solid var(--ll-border);
   border-radius: var(--ll-r-lg);
   box-shadow: var(--ll-shadow-sm);
   overflow: hidden;
   margin-bottom: 1.4rem
}

.listing-v2 .area-panel-head {
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: .75rem;
   padding: .8rem 1.25rem;
   border-bottom: 1px solid var(--ll-slate-100)
}

.listing-v2 .area-panel-title {
   font-size: .74rem;
   font-weight: 800;
   text-transform: uppercase;
   letter-spacing: .08em;
   color: var(--ll-rose-600)
}

.listing-v2 .area-panel-count {
   font-size: .72rem;
   font-weight: 800;
   color: var(--ll-blue-700);
   background: var(--ll-blue-50);
   border: 1px solid var(--ll-blue-100);
   border-radius: var(--ll-r-pill);
   padding: .1rem .55rem
}

.listing-v2 .area-panel-body {
   padding: 1rem 1.25rem
}

.listing-v2 .area-chips {
   display: flex;
   flex-wrap: wrap;
   gap: .4rem
}

/* Shared chip shape only. The transparent 1px border keeps the box size identical
   across the clickable/inert variants below (one uses a solid border, the other a
   dashed one) so the cloud doesn't reflow when chips differ in kind. */
.listing-v2 .area-chip {
   font-size: .78rem;
   border-radius: var(--ll-r-pill);
   padding: .25rem .7rem;
   border: 1px solid transparent;
}

/* Clickable variant: routable districts render as <a> so the chip cloud doubles
   as a directory. Filled + solid-bordered so it reads as an actionable control AT
   REST (not just on hover) — the key signal distinguishing it from an inert label. */
.listing-v2 a.area-chip {
   text-decoration: none;
   font-weight: 600;
   color: var(--ll-slate-700);
   background: var(--ll-slate-100);
   border-color: var(--ll-border);
   cursor: pointer;
   transition: background-color .12s ease, color .12s ease, border-color .12s ease;
}
.listing-v2 a.area-chip:hover,
.listing-v2 a.area-chip:focus-visible {
   background: var(--ll-slate-200);
   color: var(--ll-slate-800);
   border-color: var(--ll-slate-300);
}

/* Inert variant: non-routable content tiers (Hamlet / Suburban Area, etc.) render
   as <span> — they have no page. No fill, muted text, dashed edge so they read as
   informational labels, never as links the user can click. */
.listing-v2 span.area-chip {
   font-weight: 500;
   color: var(--ll-muted);
   background: transparent;
   border: 1px dashed var(--ll-border);
}

.listing-v2 .town-tiles {
   display: grid;
   grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
   gap: .5rem
}

.listing-v2 .town-tile {
   display: block;
   padding: .55rem .8rem;
   background: var(--ll-white);
   border: 1px solid var(--ll-border);
   border-radius: var(--ll-r);
   color: var(--ll-slate-700);
   font-weight: 600;
   font-size: .875rem;
   line-height: 1.3;
   text-decoration: none;
   transition: transform .12s, border-color .12s, background .12s, box-shadow .12s
}

.listing-v2 .town-tile:hover {
   border-color: var(--ll-blue-200);
   background: var(--ll-blue-50);
   color: var(--ll-blue-700);
   transform: translateY(-2px);
   box-shadow: var(--ll-shadow-sm);
   text-decoration: none
}

.listing-v2 .town-tile .meta {
   display: block;
   font-size: .74rem;
   font-weight: 600;
   color: var(--ll-muted);
   margin-top: .1rem
}

/* ===================== BILLING — PLAN CARDS (LETAL-116) =====================
   Subscription plan cards on user/billing.html previously reused the geo county
   browse grid (.areas-v2 > .areas > .area). Giving them own classes means geo
   layout changes (responsive breakpoints, hover decoration) can't break the
   billing page, and vice versa. Visual appearance is intentionally identical to
   the county cards for now; diverge here when billing's design needs differ. */
.plan-cards {
   display: grid;
   grid-template-columns: repeat(4, 1fr);
   gap: .9rem;
   margin-bottom: 1.5rem
}

.plan-card {
   position: relative;
   display: flex;
   flex-direction: column;
   background: var(--ll-white);
   border: 1px solid var(--ll-border);
   border-radius: var(--ll-r);
   padding: 1.1rem 1.1rem 1rem;
   box-shadow: var(--ll-shadow-sm);
   transition: transform .15s, box-shadow .15s, border-color .15s;
   overflow: hidden
}

.plan-card::after {
   content: "";
   position: absolute;
   right: -20px;
   bottom: -20px;
   width: 80px;
   height: 80px;
   border-radius: 50%;
   background: var(--ll-blue-50);
   transition: transform .25s;
   /* Real content sits above this decoration — see plan-name/plan-meta/form below. */
   z-index: 0
}

.plan-card .plan-name {
   font-weight: 800;
   font-size: 1rem;
   color: var(--ll-slate-800);
   position: relative;
   z-index: 1
}

.plan-card .plan-meta {
   font-size: .8rem;
   color: var(--ll-muted);
   position: relative;
   z-index: 1
}

/* Subscribe sits in a grid row of equal-height siblings (grid default stretch)
   — pin it to the card's bottom-left rather than wherever plan-meta's text
   happens to wrap to, so every card's button lines up on the same baseline. */
.plan-card form {
   position: relative;
   z-index: 1;
   margin-top: auto;
   align-self: flex-start
}

@media (max-width: 768px) {
   .plan-cards {
      grid-template-columns: repeat(2, 1fr)
   }
}

@media (max-width: 560px) {
   .plan-cards {
      grid-template-columns: 1fr
   }
}