/* PROFILE PAGE POLISH -------------------------------------------- */
:root{
  --lc-bg:#0f1115;          /* page background */
  --lc-card:#151923;        /* card background */
  --lc-border:#222736;      /* subtle borders */
  --lc-muted:#9aa4b2;
  --lc-text:#e8ecf1;
  --lc-accent:#4da3ff;
  --lc-accent-2:#7bd389;
  --lc-radius:12px;
}

body.profile {
  background: var(--lc-bg);
  color: var(--lc-text);
}

/* Page frame */
.profile-wrap{
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 16px 48px; /* left/right padding to avoid edge-hugging text */
}
@media (min-width: 1024px){
  .profile-wrap { padding: 0 24px 48px; }
}

/* =========================
   HERO (full-bleed inside wrap)
   ========================= */
.profile-hero{
  position: relative;
  width: 100%;
  height: 220px;           /* compact height; adjust if you want taller */
  border-radius: var(--lc-radius);
  overflow: hidden;
  background: #101521 center/cover no-repeat;
  background-image: var(--hero); /* set via inline style --hero:url('...') */
  margin: 16px 0 12px;
}
@media (min-width: 720px){
  .profile-hero{ height: 260px; }
}
.profile-hero--plain{ background:#111; }

.profile-hero__scrim{
  position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(0,0,0,.25) 0, rgba(0,0,0,.55) 70%);
}
.profile-hero__content{
  position:relative; z-index:1;
  display:flex; gap:14px; align-items:flex-end;
  height:100%; padding:16px;
  color:#fff; /* readable over image */
}

/* Avatar + identity on hero */
.profile-avatar{
  width:72px; height:72px; border-radius:50%;
  object-fit:cover; border:2px solid rgba(255,255,255,.85);
}
.profile-ident h1{
  margin:0 0 4px; font-size:1.8rem; line-height:1.2; color:#fff;
}
.profile-ident .muted{ color: rgba(255,255,255,.9); }

/* Optional header image uploader button */
.header-upload .btn.small{ margin-left: auto; }

/* After-hero card (name/meta/actions container) */
.profile-head{ position: relative; margin-top: -64px; }
.profile-card{
  background: var(--lc-card);
  border: 1px solid var(--lc-border);
  border-radius: var(--lc-radius);
  padding: 16px;
  box-shadow: 0 4px 14px rgba(0,0,0,.25);
}

/* Title + username row */
.profile-title{
  display:flex; align-items:baseline; gap:10px; flex-wrap:wrap;
  margin: 0 0 6px 0;
}
.profile-title h1{ font-size: 1.6rem; line-height:1.2; margin:0; }
.profile-username{ color: var(--lc-muted); font-size:.95rem; }

/* Chips / badges */
.badges{ display:flex; gap:8px; flex-wrap:wrap; margin:8px 0 0; }
.badge{
  font-size:.78rem; padding:4px 8px; border-radius:999px;
  border:1px solid var(--lc-border); background:#0f1420;
}
.badge.business{ border-color:#2b7cff; color:#cfe3ff; }
.badge.joined  { color: var(--lc-muted); }

/* Generic chips (for social links etc.) */
.chip{
  display:inline-block; padding:.25rem .6rem; border-radius:999px;
  background:#0f1420; border:1px solid var(--lc-border);
  color:var(--lc-text); font-weight:600; font-size:.85rem;
}
.chip.link{ text-decoration:none; }
.chip.link:hover{ border-color:#2a3246; }

/* Actions */
.profile-actions{ display:flex; gap:8px; flex-wrap:wrap; margin-top:10px; }
.btn{
  display:inline-block; padding:8px 12px; border-radius:8px;
  text-decoration:none; color: var(--lc-text);
  border:1px solid var(--lc-border); background:#101521;
}
.btn:hover{ border-color:#2a3246; }
.btn.primary{ background: var(--lc-accent); color:#0b1020; border-color: transparent; }
.btn.outline{ background: transparent; }
.btn.small{ font-size:.9rem; padding:.35rem .6rem; }

/* =========================
   TABS (visuals + behavior)
   ========================= */
.tabs{
  display:flex; gap:6px; flex-wrap:wrap;
  margin:14px 0 10px;
}
.tab{
  padding:8px 12px; border-radius:8px; cursor:pointer;
  background:#0f1420; border:1px solid var(--lc-border);
  font-size:.92rem; color: var(--lc-text);
}
.tab.active,
.tab[aria-selected="true"]{
  background:#1a2333; border-color:#2a3a55;
}

/* Panels: hidden by default, shown when active */
.tab-panel{ display:none; }
.tab-panel.active,
.tab-panel[aria-hidden="false"]{ display:block; }

/* =========================
   Sections / cards
   ========================= */
.section{
  background: var(--lc-card);
  border: 1px solid var(--lc-border);
  border-radius: var(--lc-radius);
  padding: 16px;
  margin-top: 12px;
}
.section h2{ margin: 0 0 10px; font-size:1.15rem; }

/* Grid listings */
.listings{
  display:grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 12px;
}
.listing-card{
  border:1px solid var(--lc-border);
  border-radius:10px;
  background:#0f1420;
  overflow:hidden;
}
.listing-card .thumb{
  height: 140px; background:#0d111a;
  background-size:cover; background-position:center;
}
.listing-card .body{ padding:10px; }
.listing-card .title{ font-weight:600; margin:0 0 4px; }
.listing-card .meta{
  font-size:.85rem; color: var(--lc-muted);
  display:flex; gap:8px;
}

/* Utilities / tweaks */
.muted{ color: var(--lc-muted); }
hr.card-sep{ border:0; height:1px; background: var(--lc-border); margin: 12px 0; }
a.simple{ color: var(--lc-accent); text-decoration:none; }
a.simple:hover{ text-decoration:underline; }

/* Footer spacing */
.profile-wrap + footer{ margin-top: 24px; }

/* ================================
   BUSINESS PROFILE • COVER HERO (LEGACY MARKUP SUPPORT)
   ================================ */

/* Wrapper */
.business-cover-container {
  height: auto;                  /* let image set height */
  width: 100%;
  overflow: hidden;
  border-radius: 12px;
  position: relative;
  z-index: 2;
  margin-bottom: 24px;
  background: #0f0f10;
}

/* Image: show full image, no crop */
.business-cover-container img.business-cover {
  width: 100%;
  height: auto;
  max-height: 380px;             /* keep big but reasonable */
  display: block;
  object-fit: contain;            /* key: show entire cover */
  object-position: center;
}

.business-cover-container + * {
  position: relative;
  z-index: 1;
  margin-top: 0 !important;
}

@media (max-width: 480px) {
  .business-cover-container img.business-cover { max-height: 280px; }
}

/* Extra breathing room and centering for business info */
.business-profile-info {
  padding: 0 32px;
  max-width: 1120px;
  margin: 0 auto;
}
@media (max-width: 768px){
  .business-profile-info { padding: 0 16px; }
}

/* ================================
   BUSINESSES DIRECTORY CARDS
   ================================ */
.biz-grid {
  list-style: none;
  padding: 0;
  margin: 24px 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 18px;
}

.biz-card {
  display: block;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 14px;
  overflow: hidden;
  text-decoration: none;
  transition: transform .15s ease, box-shadow .15s ease;
}
.biz-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0,0,0,.25);
}

/* Card covers (contain full image) */
.biz-card-cover {
  width: 100%;
  height: auto;
  max-height: 160px;
  object-fit: contain;      /* key: full image in card */
  display: block;
  background-color: #0f0f10;
}

/* Card body */
.biz-card-body {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px 14px;
}

/* Logo */
.biz-card-logo {
  width: 44px;
  height: 44px;
  flex: 0 0 44px;
  border-radius: 50%;
  object-fit: cover;
  background: #1b1b1c;
}

/* Text info */
.biz-card-meta { min-width: 0; }
.biz-card-name {
  display: block;
  font-weight: 700;
  font-size: 15px;
  color: #fff;
  margin-bottom: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.biz-card-location {
  color: #9aa0a6;
  font-size: 13px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Small devices */
@media (max-width: 480px) {
  .biz-card-cover { max-height: 120px; }
  .biz-card-logo  { width: 40px; height: 40px; }
}

/* Business public page head row */
.biz-head{
  display:flex; align-items:flex-end; justify-content:space-between;
  gap:16px; margin-bottom:12px;
}
.biz-ident{ min-width:0; }
.biz-title{ margin:0; font-size:1.8rem; line-height:1.2; }
.biz-handle{ color: var(--lc-muted); margin-top:4px; }
.biz-actions .btn{ margin-left:8px; }
.biz-actions .btn:first-child{ margin-left:0; }

/* Business avatar + bio (legacy view that shows square avatar) */
.biz-avatar{
  width:96px; height:96px; border-radius:12px; object-fit:cover;
  border:1px solid var(--lc-border); background:#0f1420; margin:8px 0;
}
.biz-bio{ margin-top:6px; color: var(--lc-text); }

/* Ensure lower nav can show even in admin layout if forced */
.lower-nav { display: block !important; visibility: visible !important; }

/* ===========================================
   NEW MARKUP SUPPORT (UNIFIED)
   =========================================== */

/* Shared layout wrappers for new views */
.profile-page,
.biz-page {
  max-width: 900px;
  margin: 0 auto;
  padding: 0 16px 48px;
  color: var(--lc-text);
  background: var(--lc-bg);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

/* User header (new view) */
.profile-header {
  position: relative;
  background-size: cover;
  background-position: center;
  height: 260px;
  border-radius: 0 0 16px 16px;
  overflow: hidden;
}
.profile-header-overlay { position: absolute; inset: 0; background: rgba(0,0,0,0.3); }
.profile-header-inner { position: absolute; bottom:16px; left:16px; right:16px; display:flex; align-items:center; gap:16px; color:#fff; }
.profile-text h1 { margin:0; font-size:1.5rem; color:#fff; }
.profile-content { margin-top:24px; font-size:1rem; line-height:1.5; }
@media (max-width: 600px){
  .profile-header-inner{ flex-direction:column; align-items:flex-start; }
  .profile-avatar{ width:80px; height:80px; border:3px solid #fff; background:#fff; }
}

/* Business cover (new view) — show full image */
.biz-cover-wrap{ width:100%; overflow:hidden; border-radius:0 0 16px 16px; }
.biz-cover{
  width:100%;
  height:auto;
  max-height:380px;
  object-fit: contain;      /* key: full image on business page */
  background:#0f0f10;
}
.biz-info{ margin-top:20px; text-align:center; }
.biz-text h1{ margin:8px 0 4px; font-size:1.6rem; }
.biz-actions{ margin:10px 0; display:flex; justify-content:center; gap:8px; flex-wrap:wrap; }
.biz-bio{ margin-top:12px; font-size:1rem; line-height:1.5; }

/* Latest listings grid (new view) */
.biz-latest{ margin-top:32px; }
.biz-latest-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:16px; }
.biz-latest-card{ display:block; text-decoration:none; color:inherit; background:var(--lc-card); border-radius:12px; overflow:hidden; border:1px solid var(--lc-border); }
.biz-latest-img{ width:100%; height:130px; object-fit:cover; }
.biz-latest-title{ padding:8px 10px; font-weight:600; }

@media (max-width:600px){
  .biz-cover{ max-height:280px; }
}