/* =========================================================
   CAMPORA — FULL STYLE.CSS (REPLACE YOUR ENTIRE FILE)
========================================================= */
:root{

  /* Backgrounds */
  --bin: #f4f7ff;
  --bg-card: #ffffff;
  --bg-soft: #eef4ff;

  /* Text */
  --text-main: #0f172a;      /* dark navy */
  --text-secondary: #475569;
  --text-muted: #64748b;

  /* Brand */
  --primary: #2563eb;
  --primary-dark: #1e40af;

  /* Borders */
  --border-light: rgba(15,23,42,0.12);

}
body.landing{
  background: var(--bg-main);
  color: var(--text-main);
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: Arial, Helvetica, sans-serif;
}



/* Space for fixed topbar + mobile bottom nav */
.page {
  padding-top: 70px;
  padding-bottom: 80px;
}

/* Center content on desktop; full on phone */
.container {
  width: 100%;
  max-width: 760px;
  margin: 0 auto;
  padding: 0 14px;
}

/* =========================================================
   TOP BAR
========================================================= */
.topbar {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 60px;
  background: #fff;
  border-bottom: 1px solid #ddd;

  display: grid;
  grid-template-columns: 56px 1fr 56px;
  align-items: center;
  gap: 10px;

  padding: 0 10px;
  z-index: 1000;

  transform: translateY(0);
  transition: transform 180ms ease;
}

.topbar.hidden {
  transform: translateY(-110%);
}

/* icon buttons */
.icon-btn {
  width: 44px;
  height: 44px;
  border: none;
  background: transparent;
  font-size: 22px;
  cursor: pointer;
  border-radius: 10px;
}

.icon-btn:hover {
  background: #f0f2f5;
}

.icon-btn:active {
  transform: scale(0.96);
}

/* search */
.search-pill {
  height: 34px;
  width: 100%;
  border: 1px solid #e5e7eb;
  background: #f0f2f5;
  border-radius: 999px;

  display: flex;
  align-items: center;
  gap: 10px;

  padding: 0 10px;
  cursor: pointer;
  text-align: left;
}

.search-icon {
  font-size: 18px;
}

.search-text {
  color: #65676b;
  font-size: 12px;
}
/* Ensure these navs can slide without affecting layout */
.topbar,
.desktop-tabs,
.bottom-nav {
  will-change: transform;
  transition: transform 220ms ease;
}

/* Top bar slides up */
.topbar.nav-hidden {
  transform: translateY(-120%);
}

/* Desktop tabs slide up */
.desktop-tabs.nav-hidden {
  transform: translateY(-120%);
}

/* Bottom nav slides down */
.bottom-nav.nav-hidden {
  transform: translateY(120%);
}
/* =========================================================
   DESKTOP TABS (INSIDE .container in your HTML)
========================================================= */
.desktop-tabs {
  display: none;
}

.tab-btn {
  border: 1px solid #e5e7eb;
  background: #fff;
  padding: 10px 14px;
  border-radius: 999px;
  cursor: pointer;
  font-weight: bold;
  color: #65676b;
  text-align: center;
}

.tab-btn.active {
  color: #1877f2;
  border-color: #1877f2;
}

/* hide on scroll (your JS toggles .hidden) */
.desktop-tabs {
  transition: transform 180ms ease, opacity 180ms ease;
}

.desktop-tabs.hidden {
  transform: translateY(-120%);
  opacity: 0;
}

@media (min-width: 1024px) {
  .desktop-tabs {
    display: flex;
    justify-content: space-between;
    gap: 10px;

    position: sticky;
    top: 60px; /* under topbar */
    z-index: 900;

    background: #f0f2f5;
    padding: 12px 0;
  }

  .tab-btn {
    flex: 1;
  }
}

/* =========================================================
   SECTIONS
========================================================= */
.section {
  display: none;
}

.active-section {
  display: block;
}

/* Feed title */
#feed h2,
#market h2,
#opportunities h2,
#socials h2,
#profile h2 {
  font-size: 18px;
  margin: 14px 0 10px;
}

/* empty placeholder */
.empty-state {
  background: #fff;
  border: 1px solid #e5e7eb;
  padding: 14px;
  border-radius: 12px;
  color: #65676b;
}

/* =========================================================
   POST CARD (FULL IMAGE DISPLAY — NO CROP)
========================================================= */
.post-card {
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 14px;
  padding: 14px;
  margin-bottom: 14px;
  box-shadow: 0 10px 20px rgba(0,0,0,0.05);

  display: flex;
  flex-direction: column;
}

.post-head {
  display: flex;
  gap: 10px;
  align-items: center;
  margin-bottom: 10px;
}

.avatar {
  width: 42px;
  height: 42px;
  border-radius: 999px;
  background: #dbeafe;
}

.post-meta {
  flex: 1;
}

.name-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
}

.poster-name {
  font-weight: bold;
  font-size: 14px;
}

.connect-btn {
  border: 1px solid #1877f2;
  background: #fff;
  color: #1877f2;
  padding: 7px 12px;
  border-radius: 999px;
  cursor: pointer;
  font-weight: bold;
  font-size: 13px;
}

.connect-btn:hover {
  background: #e7f0ff;
}

.sub-row {
  color: #65676b;
  font-size: 12px;
  margin-top: 2px;
}


.post-text {
  font-size: 15px;
  line-height: 1.6;
  color: #222;
  margin-top: 4px;
  margin-bottom: 10px;
  font-weight: 400;
}
.post-body {
  margin-top: 6px;
}
/* FULL IMAGE (no crop) */
.post-image {
  width: 100%;
  margin: 12px 0;
  border-radius: 14px;
  overflow: hidden;
  background: transparent;
}

.post-image img {
  width: 100%;
  height: auto;           /* ✅ key */
  display: block;
  object-fit: contain;    /* ✅ no crop */
}

/* actions */
.post-actions {
  display: flex;
  gap: 8px;
  margin-top: 6px;
}

.post-actions button {
  flex: 1;
  border: none;
  background: #f0f2f5;
  padding: 10px 8px;
  border-radius: 10px;
  cursor: pointer;
  font-weight: bold;
  color: #333;
}

.post-actions button:hover {
  background: #e9eef5;
}

.post-actions button:active {
  transform: scale(0.98);
}

/* =========================================================
   BOTTOM NAV (MOBILE)
========================================================= */
.bottom-nav {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 60px;
  background: #fff;

  display: flex;
  justify-content: space-around;
  align-items: center;

  border-top: 1px solid #ddd;
  z-index: 1000;

  transition: transform 180ms ease;
}

/* optional hide on scroll (if your JS adds .hidden) */
.bottom-nav.hidden {
  transform: translateY(110%);
}

.bottom-nav button {
  background: none;
  border: none;
  font-size: 14px;
  font-weight: bold;
  color: #65676b;
  cursor: pointer;
  height: 100%;
  flex: 1;
}

/* blue line without jumping */
.bottom-nav button.active,
.bottom-nav button:focus-visible,
.bottom-nav button:focus {
  color: #1877f2;
  box-shadow: inset 0 3px 0 #1877f2;
  outline: none;
}

.bottom-nav button:hover {
  color: #1877f2;
}

/* Desktop: hide bottom nav */
@media (min-width: 1024px) {
  .bottom-nav {
    display: none;
  }

  .page {
    padding-bottom: 20px;
  }
}

/* =========================================================
   CREATE POST MODAL
========================================================= */
.modal-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.45);
  align-items: center;
  justify-content: center;
  padding: 16px;
  z-index: 3000;
}

.modal-overlay.show {
  display: flex;
}

.modal {
  width: min(94vw, 520px);
  background: #fff;
  border-radius: 14px;
  border: 1px solid #e5e7eb;
  box-shadow: 0 20px 50px rgba(0,0,0,0.25);
  overflow: hidden;
}

.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 14px;
  border-bottom: 1px solid #e5e7eb;
}

.modal-header h3 {
  font-size: 16px;
}

.modal-close {
  border: none;
  background: transparent;
  font-size: 18px;
  cursor: pointer;
}

.modal-body {
  padding: 14px;
  display: grid;
  gap: 12px;
}

.field span {
  display: block;
  font-size: 12px;
  color: #65676b;
  margin-bottom: 6px;
  font-weight: bold;
}

.field input,
.field textarea {
  width: 100%;
  padding: 12px;
  border-radius: 12px;
  border: 1px solid #e5e7eb;
  background: #fff;
  outline: none;
}

.field input:focus,
.field textarea:focus {
  border-color: #1877f2;
}

.image-preview-wrap {
  width: 100%;
  height: 220px;
  border-radius: 14px;
  border: 1px dashed #d1d5db;
  background: #f8fafc;
  overflow: hidden;
  display: grid;
  place-items: center;
}

.image-preview-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: none;
}

.image-preview-empty {
  color: #65676b;
  font-size: 13px;
  font-weight: bold;
}

.modal-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.btn-secondary,
.btn-primary {
  padding: 12px;
  border-radius: 12px;
  font-weight: bold;
  cursor: pointer;
  border: none;
}

.btn-secondary {
  background: #f0f2f5;
  color: #1c1e21;
}

.btn.primary{

  background: var(--primary);

  color: #ffffff;

  font-weight: 800;

}

.btn.primary:hover{

  background: var(--primary-dark);

}

/* Landing / Auth pages */
body.landing::before {
  content: "";
  position: fixed;
  inset: 0;
  background:
    linear-gradient(180deg,
      rgba(10,18,40,0.6),
      rgba(10,18,40,0.85)
    );

}


.landing-hero {
  width: min(92vw, 520px);
  text-align: center;
}

.landing-logo {
  width: 110px;
  height: auto;
  margin-bottom: 14px;
}

.landing-tagline {
  color: rgba(255,255,255,0.95);
  font-size: 18px;
  line-height: 1.5;
  margin-bottom: 20px;
}

.landing-actions {
  display: grid;
  gap: 12px;
}

body.auth {
  min-height: 100vh;
  display: grid;
  place-items: center;
  background: #f0f2f5;
  padding: 24px;
}

.auth-wrap {
  width: 100%;
  display: grid;
  place-items: center;
}

.auth-card{

  background: var(--bg-card);

  border: 1px solid var(--border-light);

  color: var(--text-main);

  box-shadow: 0 10px 30px rgba(0,0,0,0.08);

}


.auth-title {
  font-size: 18px;
  margin-bottom: 6px;
}

.auth-subtitle {
  color: #65676b;
  font-size: 13px;
  margin-bottom: 14px;
}

.auth-form {
  display: grid;
  gap: 12px;
}

/* Profile display */
.profile-card{
  background:#fff;
  border:1px solid #e5e7eb;
  border-radius:14px;
  padding:14px;
  box-shadow: 0 10px 20px rgba(0,0,0,0.05);
}

.profile-head{
  display:flex;
  gap:12px;
  align-items:center;
  margin-bottom: 12px;
}

.profile-avatar{
  width:64px;
  height:64px;
  border-radius:999px;
  object-fit: cover;
  background:#e5e7eb;
  flex:none;
}

.profile-name{ font-weight:800; font-size:16px; }
.profile-meta{ color:#65676b; font-size:13px; margin-top:2px; }

.profile-actions{
  display: grid;
  gap: 10px;
}

/* Post avatar image */
.avatar-img{
  width:42px;
  height:42px;
  border-radius:999px;
  object-fit:cover;
  background:#dbeafe;
  flex:none;
}
body.auth{
  min-height: 100vh;
  display: grid;
  place-items: center;
  background: #f0f2f5;
  padding: 24px;
}

.auth-card{
  width: min(92vw, 540px);
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 14px;
  padding: 16px;
  box-shadow: 0 10px 20px rgba(0,0,0,0.05);
}

.auth-title{ font-size: 18px; margin-bottom: 6px; }
.auth-subtitle{ color: #65676b; font-size: 13px; margin-bottom: 14px; }

.auth-form{ display: grid; gap: 12px; }

/* 2-column row on desktop, 1-column on phone */
.grid-2{
  display: grid;
  gap: 12px;
  grid-template-columns: 1fr;
}
@media (min-width: 700px){
  .grid-2{ grid-template-columns: 1fr 1fr; }
}

/* Reuse your .field styles; if you don't have them, use these: */
.field span{
  display:block;
  font-size: 12px;
  color:#65676b;
  margin-bottom: 6px;
  font-weight:bold;
}
.field input, .field textarea{
  width: 100%;
  padding: 12px;
  border-radius: 12px;
  border: 1px solid #e5e7eb;
  outline: none;
}
.field input:focus, .field textarea:focus{
  border-color: #1877f2;
}

.landing-actions{
  position: relative;
  z-index: 5;           /* ✅ brings buttons above any overlay */
  display: grid;
  gap: 12px;
}

.landing-actions a{
  display: block;       /* ✅ makes the whole button area clickable */
  text-decoration: none;
}
/* ===== Notifications panel ===== */
.notif-panel{
  position: fixed;
  top: 70px;
  right: 12px;
  width: min(92vw, 320px);
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 14px;
  box-shadow: 0 18px 40px rgba(0,0,0,0.18);
  padding: 12px;
  display: none;
  z-index: 4000;
}
.notif-panel.show{ display:block; }
.notif-head{
  display:flex;
  justify-content: space-between;
  align-items:center;
  margin-bottom: 10px;
}
.notif-close{
  border:none;
  background: transparent;
  font-size: 16px;
  cursor:pointer;
}
.notif-item{
  padding: 10px;
  border-radius: 12px;
  background: #f0f2f5;
  margin-bottom: 8px;
  font-size: 13px;
}

/* ===== Post action states ===== */
.post-actions button.active{
  background: #dbeafe;
}
.connect-btn.connected{
  background:#1877f2;
  color:#fff;
}
.more-toggle{
  border:none;
  background:transparent;
  color:#1877f2;
  font-weight:bold;
  cursor:pointer;
  padding: 0;
  margin-left: 6px;
}

/* Make search input nicer */
#searchInput{ background:#fff; }
/* =====================================================
   LANDING PAGE BACKGROUND
===================================================== */

body.landing {
  min-height: 100vh;

  background-image: url("../assets/landing.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: fixed;

  display: flex;
  align-items: center;
  justify-content: center;
}

/* Optional overlay to make text readable */
body.landing::before {
  content: "";
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.35);
  z-index: -1;
}
.account-row{
  display:flex;
  gap:10px;
  align-items:center;
  justify-content: space-between;
  padding: 10px;
  border:1px solid #e5e7eb;
  border-radius: 12px;
  background:#fff;
}
.account-left{
  display:flex;
  gap:10px;
  align-items:center;
}
.account-avatar{
  width:40px;
  height:40px;
  border-radius:999px;
  object-fit: cover;
  background:#e5e7eb;
}
.account-name{
  font-weight:800;
  font-size:14px;
}
.account-meta{
  font-size:12px;
  color:#65676b;
  margin-top:2px;
}
.account-actions{
  display:flex;
  gap:8px;
}
.account-actions button{
  border:none;
  background:#f0f2f5;
  padding:8px 10px;
  border-radius:10px;
  cursor:pointer;
  font-weight:bold;
  font-size:12px;
}
.account-actions button.primary{
  background:#1877f2;
  color:#fff;
}
.account-actions button.danger{
  background:#fee2e2;
}
/* ===== Landing Auth ===== */

.auth-wrapper{
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
}

.auth-box{
  width:100%;
  max-width:400px;
  background:#fff;
  padding:32px;
  border-radius:20px;
  box-shadow:0 25px 60px rgba(0,0,0,0.2);
}

.brand{
  text-align:center;
  font-size:32px;
  font-weight:900;
  margin-bottom:6px;
}

.subtitle{
  text-align:center;
  color:#65676b;
  margin-bottom:24px;
}

.auth-form .field{
  display:flex;
  flex-direction:column;
  margin-bottom:16px;
}

.auth-form input{
  padding:12px;
  border-radius:10px;
  border:1px solid #ddd;
  font-size:14px;
}

.divider{
  text-align:center;
  margin:16px 0;
  color:#aaa;
  font-size:13px;
}
/* =====================================================
   LANDING PAGE (Professional)
===================================================== */

body.landing{
  min-height: 100vh;
  background-image: url("../assets/landing.png");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: fixed;
}

body.landing::before{
  content:"";
  position: fixed;
  inset: 0;
  background: linear-gradient(180deg, rgba(8,12,24,0.40), rgba(8,12,24,0.80));
  z-index: -1;
}

.landing-wrap{
  min-height: 100vh;
  width: min(980px, 92vw);
  margin: 0 auto;
  padding: 28px 0 40px;
  display: grid;
  gap: 18px;
  align-content: center;
}

.landing-hero{
  color: #fff;
  padding: 18px 18px 6px;
}

.brand-row{
  display:flex;
  gap: 12px;
  align-items:center;
  margin-bottom: 14px;
}

.brand-mark{
  width: 44px;
  height: 44px;
  border-radius: 14px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight: 900;
  font-size: 18px;
  background: rgba(255,255,255,0.12);
  border: 1px solid rgba(255,255,255,0.18);
  backdrop-filter: blur(10px);
}

.brand-title{
  margin: 0;
  font-size: 28px;
  font-weight: 900;
  letter-spacing: 0.2px;
}

.brand-tag{
  margin: 2px 0 0;
  opacity: 0.85;
  font-size: 13px;
}

.hero-headline{
  margin: 10px 0 8px;
  font-size: 28px;
  line-height: 1.1;
  font-weight: 900;
}

.hero-subtext{
  margin: 0 0 14px;
  opacity: 0.9;
  font-size: 14px;
  line-height: 1.55;
  max-width: 64ch;
}

.hero-points{
  display:grid;
  gap: 8px;
  max-width: 520px;
}

.point{
  padding: 10px 12px;
  border-radius: 14px;
  background: rgba(255,255,255,0.10);
  border: 1px solid rgba(255,255,255,0.16);
  backdrop-filter: blur(10px);
  font-size: 13px;
}

.landing-auth{
  display:flex;
  justify-content: center;
  padding: 0 18px;
}

.auth-box{
  width: min(420px, 100%);
  background: rgba(255,255,255,0.94);
  border: 1px solid rgba(255,255,255,0.55);
  border-radius: 20px;
  padding: 20px;
  box-shadow: 0 22px 60px rgba(0,0,0,0.30);
}

.auth-title{
  margin: 0 0 4px;
  font-size: 18px;
  font-weight: 900;
  color: #111827;
}

.auth-subtitle{
  margin: 0 0 14px;
  font-size: 13px;
  color: #6b7280;
}

.auth-form .field{
  display:flex;
  flex-direction: column;
  margin-bottom: 12px;
}

.auth-form .field span{
  font-size: 12px;
  color: #374151;
  font-weight: 700;
  margin-bottom: 6px;
}

.auth-form input{
  height: 42px;
  border-radius: 12px;
  border: 1px solid #e5e7eb;
  padding: 0 12px;
  outline: none;
  font-size: 14px;
  background: #fff;
}

.auth-form input:focus{
  border-color: #1877f2;
  box-shadow: 0 0 0 4px rgba(24,119,242,0.12);
}

.divider{
  position: relative;
  text-align: center;
  margin: 12px 0;
  color: #9ca3af;
  font-size: 12px;
}

.divider span{
  background: rgba(255,255,255,0.94);
  padding: 0 10px;
  position: relative;
  z-index: 1;
}

.divider::before{
  content:"";
  position:absolute;
  left:0;
  right:0;
  top:50%;
  height:1px;
  background:#e5e7eb;
}

.tiny-note{
  margin: 12px 0 0;
  font-size: 11px;
  color: #6b7280;
  line-height: 1.4;
}

/* Desktop layout: hero left, auth right */
@media (min-width: 900px){
  .landing-wrap{
    grid-template-columns: 1.2fr 0.8fr;
    align-items: center;
  }
  .landing-hero{ padding-right: 28px; }
  .landing-auth{ justify-content: flex-end; }
}
/* =====================================================
   LANDING PAGE (Official + smaller card + centered low)
   Uses: /assets/bg.jpg
===================================================== */

body.landing{
  min-height: 100vh;
  background-image: url("../assets/bg.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* clean overlay for readability */
body.landing::before{
  content:"";
  position: fixed;
  inset: 0;
  background:
    radial-gradient(1200px 700px at 20% 20%, rgba(255,255,255,0.10), transparent 60%),
    linear-gradient(180deg, rgba(10,14,26,0.35), rgba(10,14,26,0.82));
  z-index: -1;
}

.landing-shell{
  width: min(980px, 92vw);
  margin: 0 auto;
  min-height: 100vh;
  display: grid;
  grid-template-rows: auto auto;
  gap: 18px;
  padding: 26px 0 34px;
  align-content: start;
}

/* Top area */
.landing-hero{
  color: #fff;
  padding: 10px 0;
}

.brandline{
  display:flex;
  align-items:center;
  gap: 10px;
  margin-bottom: 14px;
}

.branddot{
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: rgba(255,255,255,0.85);
  box-shadow: 0 0 0 6px rgba(255,255,255,0.12);
}

.brandname{
  font-weight: 900;
  font-size: 20px;
  letter-spacing: 0.2px;
}

.brandtag{
  font-size: 12px;
  opacity: 0.85;
  margin-top: 2px;
}

.headline{
  margin: 8px 0 10px;
  font-size: clamp(26px, 4vw, 38px);
  line-height: 1.12;
  font-weight: 900;
  max-width: 18ch;
}

.subtext{

  color: var(--text-secondary);

}

.tiny{

  color: var(--text-muted);

}


.bullets{
  display:flex;
  flex-wrap: wrap;
  gap: 10px;
}

.bullet{
  padding: 10px 12px;
  border-radius: 999px;
  background: rgba(255,255,255,0.10);
  border: 1px solid rgba(255,255,255,0.16);
  backdrop-filter: blur(10px);
  font-size: 12px;
  font-weight: 700;
}

/* Login section: centered and pushed down */
.landing-auth{
  display:flex;
  justify-content:center;
  margin-top: 18px;
  /* push card lower on screen */
  padding-top: 18px;
}

/* Smaller, more official card */
/* ===== GLASS LOGIN CARD ===== */

.auth-card{
  width: min(380px, 100%);
  padding: 22px;

  background: rgba(255,255,255,0.12);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);

  border-radius: 20px;
  border: 1px solid rgba(255,255,255,0.25);

  box-shadow:
    0 20px 50px rgba(0,0,0,0.35),
    inset 0 1px 0 rgba(255,255,255,0.2);

  color: #fff;
}

.auth-top{
  margin-bottom: 10px;
}

.auth-title{
  font-size: 16px;
  font-weight: 900;
  color: #111827;
  margin-bottom: 2px;
}

.auth-note{
  font-size: 12px;
  color: #6b7280;
}

.auth-form .field{
  display:flex;
  flex-direction: column;
  margin-bottom: 10px;
}

.auth-form .field span{
  font-size: 12px;
  font-weight: 800;
  color:#374151;
  margin-bottom: 6px;
}

.auth-form input{
  height: 42px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.35);
  padding: 0 12px;
  font-size: 14px;

  background: rgba(255,255,255,0.15);
  color: #fff;
  outline: none;
}

.auth-form input::placeholder{
  color: rgba(255,255,255,0.6);
}

.auth-form input:focus{
  border-color: #ffffff;
  box-shadow: 0 0 0 3px rgba(255,255,255,0.25);
}

/* Buttons row */
.auth-row{
  display:flex;
  gap: 10px;
  margin-top: 10px;
}

.auth-row .btn{
  flex:1;
}

/* small helper */
.tiny{
  margin-top: 10px;
  font-size: 11px;
  color: #6b7280;
  line-height: 1.4;
}

/* On large screens, keep everything centered (not side-by-side) */
@media (min-width: 900px){
  .landing-shell{
    align-content: center;
    padding-top: 10px;
  }
  .landing-auth{
    margin-top: 8px;
  }
}
.auth-card{
  animation: fadeGlass 0.6s ease-out;
}

@keyframes fadeGlass{
  from{
    opacity:0;
    transform: translateY(20px);
  }
  to{
    opacity:1;
    transform: translateY(0);
  }
}
/* ===== Glass card readability fix ===== */

/* Darker glass base so text doesn't fade */
.auth-card{
  background: rgba(10,14,26,0.45) !important;  /* darker glass */
  border: 1px solid rgba(255,255,255,0.22) !important;
  backdrop-filter: blur(18px) !important;
  -webkit-backdrop-filter: blur(18px) !important;
}

/* Make all text inside card bright + slightly glowing */
.auth-card,
.auth-card {
  color: rgba(255,255,255,0.95);
  text-shadow: 0 2px 10px rgba(0,0,0,0.35);
}

/* Titles a bit stronger */
.auth-title{
  color: rgba(255,255,255,0.98) !important;
  font-weight: 900;
}
.auth-note,
.tiny{
  color: rgba(255,255,255,0.72) !important;
  text-shadow: none;
}

/* Labels */
.auth-form .field span{
  color: rgba(255,255,255,0.9) !important;
  text-shadow: 0 1px 6px rgba(0,0,0,0.25);
}

/* Inputs: darker glass so text is readable */
.auth-form input{
  background: rgba(0,0,0,0.30) !important;
  border: 1px solid rgba(255,255,255,0.28) !important;
  color: rgba(255,255,255,0.96) !important;
}

.auth-form input::placeholder{
  color: rgba(255,255,255,0.55) !important;
}

/* Input focus */
.auth-form input:focus{
  border-color: rgba(255,255,255,0.65) !important;
  box-shadow: 0 0 0 4px rgba(255,255,255,0.14) !important;
}

/* If your ghost buttons look too faint, boost them */
.btn.ghost{
  background: rgba(255,255,255,0.10) !important;
  border: 1px solid rgba(255,255,255,0.20) !important;
  color: rgba(255,255,255,0.92) !important;
}

.btn.ghost:hover{
  background: rgba(255,255,255,0.16) !important;
}

/* Primary button stays crisp */
.btn.primary{
  box-shadow: 0 10px 24px rgba(0,0,0,0.35);
}
/* ===== Fix Button Contrast on Glass ===== */

/* Primary button (Login) */
.btn.primary{
  background: #1877f2 !important;
  color: #ffffff !important;
  border: none !important;
  font-weight: 700;
}

.btn.primary:hover{
  background: #0f5ec7 !important;
}

/* Ghost buttons */
.btn.ghost{

  background: var(--bg-soft);

  color: var(--primary);

  border: 1px solid var(--primary);

}


.btn.ghost:hover{
  background: rgba(255,255,255,0.25) !important;
}
/* ===== Profile mini nav ===== */
.profile-username{
  font-size: 12px;
  color: #6b7280;
  margin-top: 2px;
}

.profile-tabs{
  display:flex;
  gap:10px;
  margin: 14px 0 10px;
  padding: 8px;
  border-radius: 14px;
  background: #f0f2f5;
  overflow-x: auto;
}

.profile-tab{
  border: none;
  background: transparent;
  padding: 10px 12px;
  border-radius: 12px;
  font-weight: 800;
  color: #374151;
  cursor: pointer;
  white-space: nowrap;
}

.profile-tab.active{
  background: #fff;
  box-shadow: 0 10px 22px rgba(0,0,0,0.08);
  color: #111827;
}

.profile-panel{ display:none; }
.profile-panel.active{ display:block; }

.panel-title{
  font-weight: 900;
  margin-bottom: 6px;
  color:#111827;
}

.panel-hint{
  font-size: 13px;
  color:#6b7280;
  margin-bottom: 12px;
  line-height: 1.4;
}

.panel-actions{
  display:flex;
  justify-content:flex-end;
  margin-top: 10px;
}

.grid-2{
  display:grid;
  gap: 10px;
}
@media (min-width: 640px){
  .grid-2{ grid-template-columns: 1fr 1fr; }
}

#myPostsWrap .post-card{ margin-top: 12px; }
.connection-card{
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px;
  background:#fff;
  border: 1px solid #e5e7eb;
  border-radius: 14px;
  margin-top: 10px;
}
.connection-left{
  display:flex;
  gap:10px;
  align-items:center;
}
.connection-left img{
  width:44px;
  height:44px;
  border-radius: 999px;
  object-fit: cover;
  background:#e5e7eb;
}
.connection-name{ font-weight: 900; }
.connection-meta{ font-size: 12px; color:#6b7280; margin-top:2px; }
/* Fix profile buttons visibility */

.profile-actions .btn {

  background: blue(0,0,0,0.6);

  color: yellowgreen;

  border: 1px solid rgba(255,255,255,0.3);

}

.profile-actions .btn:hover{

  background: rgba(0,0,0,0.8);

}

/* Reset button red */

.btn.danger{

  background: #e53935;

  color: white;

}

.btn.danger:hover{

  background: #c62828;

}
/* =========================
   PROFILE ACTION BUTTON FIX
   (forces visibility)
========================= */

#profile .profile-actions{
  display: grid;
  gap: 10px;
  margin-top: 12px;
}

/* make buttons full width like official apps */
#profile .profile-actions .btn{
  width: 100%;
}

/* force ghost buttons to be visible */
#profile .profile-actions .btn.ghost{
  background: rgba(17, 24, 39, 0.85) !important; /* dark */
  color: #ffffff !important;
  border: 1px solid rgba(255,255,255,0.22) !important;
  font-weight: 800;
}

#profile .profile-actions .btn.ghost:hover{
  background: rgba(17, 24, 39, 0.95) !important;
}

/* keep primary as primary */
#profile .profile-actions .btn.primary{
  color: #ffffff !important;
}

/* reset button red stays clear */
#profile .profile-actions .btn.danger{
  background: #e53935 !important;
  color: #ffffff !important;
  border: none !important;
  font-weight: 900;
}
#profile .profile-actions .btn.danger:hover{
  background: #c62828 !important;
}
.section-filterbar{
  margin: 10px 0 14px;
  display: flex;
  gap: 10px;
}
.section-filterbar select{
  width: 100%;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.18);
  background: rgba(255,255,255,0.08);
  color: inherit;
}

.type-chip{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding: 6px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .2px;
  background: rgba(255,255,255,0.12);
  border: 1px solid rgba(255,255,255,0.16);
}

.type-market{ color:#22c55e; }
.type-opportunity{ color:#f59e0b; }
.type-social{ color:#60a5fa; }

.preview-strip{
  display:flex;
  gap:10px;
  overflow-x:auto;
  padding: 10px;
}
.preview-strip img{
  height: 90px;
  width: auto;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.14);
}

.carousel{
  overflow-x:auto;
  display:flex;
  gap:10px;
  scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 6px;
}
.carousel::-webkit-scrollbar{ height: 8px; }
.carousel img{
  scroll-snap-align: start;
  width: 100%;
  max-width: 520px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,0.12);
  display:block;
}

.post-image-wrap{
  position: relative;
}
.price-badge{
  position:absolute;
  right: 10px;
  bottom: 10px;
  padding: 7px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 900;
  background: rgba(0,0,0,0.62);
  color: #fff;
  border: 1px solid rgba(255,255,255,0.18);
  backdrop-filter: blur(6px);
}
/* =========================================================
   CAMPORA PATCH (for new app.js)
   Paste at the VERY BOTTOM of style.css
========================================================= */

/* --- Post type badge (market/opportunity/social) --- */
.post-badge{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding: 6px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .2px;
  background: #f0f2f5;
  border: 1px solid #e5e7eb;
  color: #111827;
  white-space: nowrap;
}

.post-badge.market{
  background: rgba(34,197,94,0.12);
  border-color: rgba(34,197,94,0.25);
  color: #15803d;
}
.post-badge.opportunity{
  background: rgba(245,158,11,0.14);
  border-color: rgba(245,158,11,0.25);
  color: #b45309;
}
.post-badge.social{
  background: rgba(96,165,250,0.14);
  border-color: rgba(96,165,250,0.25);
  color: #1d4ed8;
}

/* --- Multi-image slider (new structure) --- */
.post-media{
  position: relative;
  width: 100%;
  margin-top: 12px;
  border-radius: 14px;
  overflow: hidden;
  background: transparent;
}

.post-media-track{
  display:flex;
  gap: 10px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 6px;
}

.post-media-track::-webkit-scrollbar{
  height: 8px;
}

.post-media-item{
  flex: 0 0 100%;
  scroll-snap-align: start;
}

.post-media-item img{
  width: 100%;
  height: auto;           /* ✅ no crop */
  display: block;
  object-fit: contain;    /* ✅ no crop */
  border-radius: 14px;
  border: 1px solid #e5e7eb;
  background: #fff;
}

/* --- Price badge ON the image (bottom-right) --- */
.post-price-badge{
  position: absolute;
  right: 10px;
  bottom: 10px;
  padding: 7px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 900;
  background: rgba(0,0,0,0.62);
  color: #fff;
  border: 1px solid rgba(255,255,255,0.22);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

/* --- Post actions: active like state + count readability --- */
.post-actions button .count{
  font-weight: 900;
  opacity: 0.85;
}

.post-actions button.active{
  background: #dbeafe !important;
  color: #0f172a;
}

/* --- Make connect button show "Connected" nicely --- */
.connect-btn.connected{
  background:#1877f2 !important;
  color:#fff !important;
  border-color:#1877f2 !important;
}

/* --- Safety: your CSS uses .avatar-img already; keep consistent --- */
.avatar-img{
  width:42px;
  height:42px;
  border-radius:999px;
  object-fit:cover;
  background:#dbeafe;
  flex:none;
}

/* --- Optional: small reshared line style --- */
.sub-row{
  line-height: 1.35;
}
/* =========================================================
   FIX: Create Post modal too tall (enable scrolling)
   Paste at VERY BOTTOM of style.css
========================================================= */

/* allow the overlay itself to scroll on small screens */
.modal-overlay{
  overflow-y: auto;
  align-items: flex-start;      /* not centered, so top is visible */
  padding-top: 16px;
  padding-bottom: 16px;
}

/* keep modal within viewport */
.modal{
  max-height: calc(100vh - 32px); /* account for overlay padding */
  display: flex;
  flex-direction: column;
}

/* modal body becomes scrollable when content is long */
.modal-body{
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

/* optional: prevent "scroll lock" feeling on iOS/Edge */
body{
  overscroll-behavior: contain;
}
/* =========================================================
   FIX: Create Post modal must scroll + keep buttons visible
========================================================= */

.modal{
  max-height: calc(100vh - 28px);
  display: flex;
  flex-direction: column;
}

/* Make the form area scroll if it's taller than screen */
.modal-body{
  max-height: calc(100vh - 140px); /* header + padding space */
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

/* Keep buttons always reachable */
.modal-actions{
  position: sticky;
  bottom: 0;
  background: #fff;
  padding-top: 10px;
  padding-bottom: 6px;
  z-index: 5;
}

/* =========================================================
   FIX: Multi-image preview strip must be visible
========================================================= */

.image-preview-wrap{
  height: auto !important;
  min-height: 140px;
  display: block !important;
  padding: 10px;
  overflow: hidden;
}

.preview-strip{
  width: 100%;
  display: flex;
  gap: 10px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  padding: 6px 2px;
}

.preview-strip img{
  display: block;
  height: 96px;
  width: auto;
  border-radius: 12px;
  border: 1px solid rgba(0,0,0,0.12);
}
/* =========================
   DELETE POST BUTTON
   ========================= */

.delete-btn {
  margin-left: 8px;
  padding: 4px 10px;
  font-size: 12px;
  border-radius: 999px;
  border: 1px solid rgba(255, 80, 80, 0.5);
  background: rgba(255, 80, 80, 0.08);
  color: #ff6b6b;
  cursor: pointer;
  transition: all 0.2s ease;
}

/* hover */
.delete-btn:hover {
  background: rgba(255, 80, 80, 0.18);
  border-color: rgba(255, 80, 80, 0.8);
  color: #ff4d4d;
}

/* click */
.delete-btn:active {
  transform: scale(0.95);
}

/* glass compatibility */
.profile-card .delete-btn,
.post-card .delete-btn {
  backdrop-filter: blur(6px);
}

/* mobile friendly */
@media (max-width: 600px) {
  .delete-btn {
    font-size: 11px;
    padding: 3px 8px;
  }
}
/* WhatsApp floating icon on post image */

.post-wa-icon {

position: absolute;

bottom: 10px;
left: 10px;

width: 38px;
height: 38px;

background: #25D366;

border-radius: 50%;

display: flex;
align-items: center;
justify-content: center;

cursor: pointer;

box-shadow: 0 4px 12px rgba(0,0,0,0.25);

transition: 0.2s;
}

.post-wa-icon:hover {

transform: scale(1.1);

background: #1ebe5d;

}

.post-wa-icon img {

width: 20px;
height: 20px;

pointer-events: none;

}
/* ===== Landing: Mobile-first ===== */
body.landing{
  margin: 0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  background: #f6f9ff;
  color: #0f172a;
}

.landing-shell{
  max-width: 1080px;
  margin: 0 auto;
  padding: 16px 14px 28px;
  display: grid;
  gap: 16px;
}

/* top */
.landing-top{
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.brandline{
  display: flex;
  align-items: center;
  gap: 10px;
}

.branddot{
  width: 38px;
  height: 38px;
  border-radius: 12px;
  background: linear-gradient(135deg, #1d6fff, #6a5bff);
  box-shadow: 0 10px 24px rgba(29,111,255,.18);
}

.brandname{
  font-weight: 900;
  font-size: 18px;
  letter-spacing: .2px;
}

.brandtag{
  font-size: 12px;
  opacity: .75;
  font-weight: 700;
}

/* hero */
.landing-hero{
  padding: 6px 0;
}

.trust-pill{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid rgba(15,23,42,.10);
  background: rgba(255,255,255,.8);
  font-weight: 800;
  font-size: 12px;
}

.headline{
  margin: 12px 0 8px;
  font-size: 30px;
  line-height: 1.08;
  letter-spacing: -0.4px;
  font-weight: 950;
}

.subtext{
  margin: 0 0 14px;
  font-size: 14px;
  line-height: 1.55;
  color: rgba(15,23,42,.78);
}

/* feature cards */
.feature-grid{
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}

.feature-card{

  background: #ffffff;

  color: var(--text-main);

  border: 1px solid var(--border-light);

}

.feature-card p{

  color: var(--text-secondary);

}


.feature-icon{
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 14px;
  background: #eef5ff;
  font-size: 18px;
  margin-bottom: 8px;
}

.feature-card h3{
  margin: 0 0 6px;
  font-size: 15px;
  font-weight: 900;
}

.feature-card p{
  margin: 0;
  font-size: 13px;
  line-height: 1.45;
  color: rgba(15,23,42,.75);
}

/* auth */
.landing-auth{
  display: flex;
  justify-content: center;
}

.auth-card{
  width: 100%;
  max-width: 420px;
  background: rgba(255,255,255,.9);
  border: 1px solid rgba(15,23,42,.10);
  border-radius: 20px;
  padding: 14px;
  box-shadow: 0 12px 40px rgba(2, 30, 84, .10);
}

.auth-top{
  margin-bottom: 10px;
}

.auth-title{
  font-size: 16px;
  font-weight: 950;
}

.auth-note{
  font-size: 12px;
  color: rgba(15,23,42,.70);
  margin-top: 2px;
}

.field{
  display: grid;
  gap: 6px;
  margin: 10px 0;
}

.field span{
  font-weight: 800;
  font-size: 12px;
  color: rgba(15,23,42,.78);
}

.field input{
  width: 100%;
  padding: 12px 12px;
  border-radius: 14px;
  border: 1px solid rgba(15,23,42,.12);
  outline: none;
  background: #fff;
  font-size: 14px;
}

.btn{
  border: 0;
  cursor: pointer;
  border-radius: 14px;
  padding: 12px 12px;
  font-weight: 900;
}

.btn.primary{
  width: 100%;
  background: linear-gradient(135deg, #1d6fff, #6a5bff);
  color: #fff;
  box-shadow: 0 10px 22px rgba(29,111,255,.18);
}

.btn.ghost{
  background: #eef5ff;
  color: #0f172a;
  border: 1px solid rgba(15,23,42,.10);
}

.auth-row{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 10px;
}

.tiny{
  margin-top: 10px;
  font-size: 11px;
  color: rgba(15,23,42,.65);
}

/* footer */
.landing-foot{
  padding-top: 6px;
  text-align: center;
}
.foot-note{
  font-size: 12px;
  color: rgba(15,23,42,.60);
}

/* ===== Desktop enhancements ===== */
@media (min-width: 900px){
  .landing-shell{
    grid-template-columns: 1.15fr 0.85fr;
    gap: 22px;
    align-items: start;
    padding-top: 22px;
  }
  .headline{
    font-size: 40px;
  }
  .feature-grid{
    grid-template-columns: 1fr 1fr;
  }
}
.field input{

  background: #ffffff;

  color: var(--text-main);

  border: 1px solid var(--border-light);

}

.field span{

  color: var(--text-secondary);

}
:root{
  --bg-main: #f4f7ff;
  --bg-card: #ffffff;
  --bg-soft: #eef4ff;

  --text-main: #0f172a;
  --text-secondary: #475569;
  --text-muted: #64748b;

  --primary: #2563eb;
  --primary-dark: #1e40af;

  --border-light: rgba(15,23,42,0.12);
  --shadow: 0 18px 50px rgba(2,6,23,0.10);
}

/* Reset-ish */
*{ box-sizing: border-box; }
body{ margin: 0; font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; }

/* =========================
   LANDING (Premium)
========================= */
body.landing{
  background: url(../assets/bg.jpg);
  color: var(--text-main);
}

.landing-topbar{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px;
  max-width: 1150px;
  margin: 0 auto;
}

.topbar-left{
  display: flex;
  align-items: center;
  gap: 10px;
}

.logo-badge{
  width: 42px;
  height: 42px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  background: #ffffff;
  border: 1px solid var(--border-light);
  box-shadow: 0 10px 30px rgba(2,6,23,0.10);
  color: var(--primary);
  font-weight: 900;
  font-size: 22px;
  text-transform: lowercase;
}

.topbar-brand .brandname{
  font-size: 18px;
  font-weight: 900;
  letter-spacing: 0.2px;
}

.topbar-brand .brandtag{
  font-size: 12.5px;
  color: var(--text-secondary);
  margin-top: 1px;
}

.landing-wrap{
  max-width: 1150px;
  margin: 0 auto;
  padding: 6px 16px 28px;
}

.hero{
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap: 18px;
  align-items: start;
  padding-top: 8px;
}

.hero-copy{
  padding: 10px 6px;
}

.pill{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #ffffff;
  border: 1px solid var(--border-light);
  padding: 8px 12px;
  border-radius: 999px;
  color: var(--text-main);
  font-weight: 700;
  font-size: 13px;
  box-shadow: 0 10px 24px rgba(2,6,23,0.06);
}

.headline{
  margin: 14px 0 8px;
  font-size: clamp(28px, 4.4vw, 44px);
  line-height: 1.08;
  letter-spacing: -0.6px;
  font-weight: 900;
}

.subtext{
  margin: 0;
  color: var(--text-secondary);
  font-size: 16px;
  line-height: 1.55;
  max-width: 62ch;
}

.quick-grid{
  margin-top: 16px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.quick-card{
  background: #ffffff;
  border: 1px solid var(--border-light);
  border-radius: 18px;
  padding: 14px 14px;
  box-shadow: 0 14px 34px rgba(2,6,23,0.06);
}

.quick-ico{
  width: 44px;
  height: 44px;
  border-radius: 16px;
  display: grid;
  place-items: center;
  background: var(--bg-soft);
  border: 1px solid rgba(37,99,235,0.18);
  font-size: 20px;
}

.quick-title{
  margin-top: 10px;
  font-weight: 900;
  font-size: 15.5px;
  color: var(--text-main);
}

.quick-desc{
  margin-top: 6px;
  color: var(--text-secondary);
  font-size: 13.5px;
  line-height: 1.45;
}

.trust-row{
  margin-top: 12px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  color: var(--text-secondary);
  font-weight: 700;
  font-size: 13px;
}

.trust-item{
  background: rgba(255,255,255,0.7);
  border: 1px solid var(--border-light);
  border-radius: 999px;
  padding: 8px 12px;
}

/* Auth */
.auth{
  position: sticky;
  top: 12px;
}

.auth-card{
  background: var(--bg-card);
  border: 1px solid var(--border-light);
  border-radius: 22px;
  padding: 16px;
  box-shadow: var(--shadow);
}

.auth-top{
  margin-bottom: 10px;
}

.auth-title{
  font-size: 18px;
  font-weight: 900;
}

.auth-note{
  margin-top: 3px;
  color: var(--text-secondary);
  font-size: 13px;
}

.auth-form{
  display: grid;
  gap: 10px;
  margin-top: 10px;
}

.field{
  display: grid;
  gap: 6px;
}

.field span{
  font-size: 13px;
  font-weight: 800;
  color: var(--text-secondary);
}

.field input{
  height: 46px;
  border-radius: 14px;
  border: 1px solid var(--border-light);
  padding: 0 12px;
  background: #ffffff;
  color: var(--text-main);
  outline: none;
}

.field input:focus{
  border-color: rgba(37,99,235,0.55);
  box-shadow: 0 0 0 4px rgba(37,99,235,0.12);
}

.btn{
  height: 46px;
  border-radius: 14px;
  border: 1px solid transparent;
  font-weight: 900;
  cursor: pointer;
  padding: 0 14px;
}

.btn.primary{
  background: var(--primary);
  color: #ffffff;
}

.btn.primary:hover{
  background: var(--primary-dark);
}

.btn.ghost{
  background: var(--bg-soft);
  color: var(--primary);
  border: 1px solid rgba(37,99,235,0.35);
}

.btn.ghost:hover{
  border-color: rgba(37,99,235,0.55);
}

.auth-row{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
#changePhotoBtn{
  margin-top: 10px;
}
.mini-del{
  padding: 6px 10px;
  border-radius: 10px;
  font-size: 12px;
  margin-left: 8px;
}
/* Hide/show navs on scroll */
.topbar.nav-hidden {
  transform: translateY(-120%);
  transition: transform 200ms ease;
}

.desktop-tabs.nav-hidden {
  transform: translateY(-120%);
  transition: transform 200ms ease;
}

.bottom-nav.nav-hidden {
  transform: translateY(120%);
  transition: transform 200ms ease;
}
.post-comments { margin-top: 10px; }
.comment-box { display:flex; gap:8px; margin-bottom:10px; }
.comment-input { flex:1; padding:10px; border-radius:10px; border:1px solid #ddd; }
.comment-row { padding:10px; border-radius:10px; border:1px solid #eee; margin-bottom:8px; }
.comment-time { font-size:12px; opacity:.7; margin-top:4px; }
.shop-grid{
  display:grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.shop-card{
  border:1px solid rgba(0,0,0,.12);
  border-radius:12px;
  padding:10px;
  background:#fff;
  text-align:left;
}

.shop-card-img{
  height:120px;
  border-radius:10px;
  overflow:hidden;
  display:flex;
  align-items:center;
  justify-content:center;
  background: rgba(0,0,0,.04);
}

.shop-card-img img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

.shop-card-title{
  margin-top:8px;
  font-weight:700;
}

.shop-tile{
  width:100%;
  max-width:240px;

  display:flex;
  flex-direction:column;

  background:#fff;
  border-radius:12px;

  overflow:hidden;

  box-shadow:0 4px 12px rgba(0,0,0,0.08);
}

.shop-tile:hover{
  transform:translateY(-4px);
  box-shadow:0 8px 20px rgba(0,0,0,0.12);
}

.shop-tile-img{
  position:relative;

  width:100%;

  aspect-ratio:4 / 5;   /* ✅ perfect square */

  background:#f8f8f8;

  display:flex;
  align-items:center;
  justify-content:center;

  overflow:hidden;
}

.shop-tile-img img{
  width:100%;
  height:100%;
  object-fit:cover;    /* ✅ keeps proportions */
}


.visit-shop-btn{
  border: 1px solid rgba(0,0,0,.12);
  background: #fff;
  padding: 8px 10px;
  border-radius: 999px;
  font-weight: 700;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.visit-shop-btn:hover{
  filter: brightness(.98);
}
.reshare-banner {
  font-size: 13px;
  color: #16a34a;
  font-weight: 600;
  margin-bottom: 6px;
}

.reshare-time {
  color: #777;
  font-weight: normal;
  margin-left: 6px;
}
.wa-contact-btn {
  background: none;
  border: none;
  cursor: pointer;
  padding: 6px;
}

.wa-contact-btn img {
  width: 28px;
  height: 28px;
}
.shop-wa-icon{
  position:absolute;
  right:8px;
  bottom:8px;

  border:none;
  outline:none;
  background:transparent;

  padding:0;

  width:28px;
  height:28px;

  display:flex;
  align-items:center;
  justify-content:center;

  cursor:pointer;

  z-index:5;
}

.shop-wa-icon img{
  width:100%;
  height:100%;
  object-fit:contain;
}

.shop-wa-icon img{
  width:22px;
  height:22px;
}

.shop-wa-icon img{
  width:22px;
  height:22px;
}

.shop-tile-img > img{
  width:100%;
  height:100%;

  object-fit:contain;
}
.shop-tile-name{
  padding:8px 10px;

  font-size:14px;
  font-weight:600;

  line-height:1.3;

  color:#222;

  text-align:left;
}

/* smaller visit shop button for header */
.name-row .visit-shop-btn{
  padding:6px 10px;
  border-radius:999px;
  font-size:12px;
  line-height:1;
  margin-left:8px;
}
.post-actions{
  display:flex;
  align-items:center;
  gap:12px;

  padding:6px 10px;   /* ✅ smaller height */

  border-top:1px solid #eee;

  font-size:13px;     /* ✅ smaller text */

  background:#fff;
}
.post-actions button{
  border:none;
  background:transparent;

  padding:4px 6px;   /* ✅ much smaller */

  font-size:13px;
  font-weight:500;

  cursor:pointer;

  display:flex;
  align-items:center;
  gap:4px;

  color:#444;
}

.post-actions button:hover{
  color:#000;
}
.post-actions .count{
  font-size:12px;
  opacity:0.7;
}
.post-media{
  margin-bottom:4px;
}
/* ===============================
   FACEBOOK-STYLE POST ACTION BAR
   =============================== */

.post-actions{

  display:flex;
  align-items:center;
  justify-content:space-around;

  padding:2px 6px;      /* ultra thin */

  border-top:1px solid #eee;

  height:32px;          /* force compact height */

  margin-top:2px;
}


/* override ALL global button styles */
.post-actions button{

  all:unset;            /* removes inherited padding, height, borders */

  cursor:pointer;

  display:flex;
  align-items:center;
  justify-content:center;

  font-size:13px;

  color:#65676B;

  padding:2px 6px;

}


/* hover like Facebook */
.post-actions button:hover{

  background:#f2f2f2;

  border-radius:6px;
}


/* count */
.post-actions .count{

  font-size:12px;

  margin-left:4px;

  opacity:0.8;
}
.post-media{
  margin-bottom:0;
}

.post-body{
  padding-bottom:2px;
}
/* Fullscreen image modal */
.img-modal{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,0.92);
  display:none;
  align-items:center;
  justify-content:center;
  z-index:9999;
  padding:18px;
}
.img-modal.show{ display:flex; }

.img-modal img{
  max-width:100%;
  max-height:100%;
  object-fit:contain;
  border-radius:10px;
}

.img-modal-close{
  position:absolute;
  top:14px;
  right:14px;
  width:40px;
  height:40px;
  border:none;
  border-radius:999px;
  background:rgba(255,255,255,0.15);
  color:#fff;
  font-size:20px;
  cursor:pointer;
}
.shop-card-wrap{ position:relative; }

.shop-del-cat{
  position:absolute;
  top:8px;
  right:8px;
  border:none;
  background:rgba(255,255,255,0.92);
  border-radius:999px;
  padding:6px;
  cursor:pointer;
}

.shop-del-prod{
  position:absolute;
  left:8px;
  bottom:8px;
  border:none;
  background:rgba(255,255,255,0.92);
  border-radius:999px;
  padding:6px;
  cursor:pointer;
}
/* container must be relative */
.shop-tile-img{
  position:relative;
}


/* DELETE → top right */
.delete-product{

  position:absolute;

  top:8px;
  right:8px;

  padding:6px 10px;

  border:none;

  background:white;

  border-radius:6px;

  cursor:pointer;

  z-index:5;
}


/* WHATSAPP → bottom right */
.shop-wa-btn{

  position:absolute;

  bottom:8px;
  right:8px;

  width:34px;
  height:34px;

  border:none;

  background:white;

  border-radius:6px;

  cursor:pointer;

  z-index:4;

  padding:5px;
}

.shop-wa-btn img{

  width:100%;
  height:100%;
}


/* PRICE → bottom left */
.shop-tile-price{

position:absolute;

bottom:8px;
left:8px;

background:black;
color:white;

padding:4px 10px;

border-radius:6px;

font-size:13px;

display:inline-block;   /* ⭐ important */
width:auto;             /* ⭐ important */
max-width:max-content;  /* ⭐ important */

white-space:nowrap;

z-index:2;

}
/* =========================
   SHOP: CATALOGUE GRID SIZE
   ========================= */

#catalogueGrid{
  display: grid;
  gap: 14px;

  /* ✅ mobile default: 2 per row */
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

/* Catalogue card itself */
.shop-card{
  width: 100%;
  border-radius: 14px;
  overflow: hidden;
  background: #fff;
  border: 1px solid rgba(0,0,0,0.08);
}

/* cover area bigger */
.shop-card-img{
  width: 100%;
  aspect-ratio: 4 / 3; /* ✅ makes it look bigger */
  overflow: hidden;
}

.shop-card-img img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.shop-card-title{
  padding: 10px 12px;
  font-size: 14px;
  font-weight: 600;
}

/* ✅ desktop: larger cards, 3–4 per row depending screen */
@media (min-width: 900px){
  #catalogueGrid{
    gap: 18px;
    grid-template-columns: repeat(3, minmax(240px, 1fr));
  }

  .shop-card-title{
    font-size: 15px;
    padding: 12px 14px;
  }
}

/* ✅ large desktop: even nicer spacing */
@media (min-width: 1200px){
  #catalogueGrid{
    grid-template-columns: repeat(4, minmax(260px, 1fr));
  }

  .shop-card-img{
    aspect-ratio: 16 / 10;
  }
}
.shop-tile-name{
  position:absolute;
  top:8px;
  left:8px;
  z-index:4;

  max-width: calc(100% - 90px);
  padding:6px 10px;
  border-radius:6px;

  background: blueviolet;
  color:#fff;

  font-size:13px;
  font-weight:600;

  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.notif-item{
  padding:10px 12px;
  border-bottom:1px solid rgba(0,0,0,0.08);
  cursor:pointer;
}

.notif-item.unread{
  background: rgba(0,0,0,0.04);
}

.notif-text{
  font-size:14px;
  font-weight:600;
}

.notif-time{
  font-size:12px;
  opacity:0.7;
  margin-top:4px;
}
.notif-item{
  display:flex;
  gap:10px;
  padding:10px 12px;
  border-bottom:1px solid rgba(0,0,0,0.08);
  cursor:pointer;
  align-items:flex-start;
}

.notif-item.unread{
  background: rgba(0,0,0,0.04);
}

.notif-avatar{
  width:34px;
  height:34px;
  border-radius:50%;
  object-fit:cover;
  flex:0 0 34px;
}

.notif-avatar.fallback{
  display:flex;
  align-items:center;
  justify-content:center;
  background: rgba(0,0,0,0.08);
}

.notif-body{ flex:1; }

.notif-text{
  font-size:14px;
  font-weight:600;
  line-height:1.25;
}

.notif-time{
  font-size:12px;
  opacity:0.7;
  margin-top:4px;
}
/* Notification bell badge */
.notif-badge{
  position:absolute;
  top:-4px;
  right:-4px;
  min-width:18px;
  height:18px;
  padding:0 5px;
  border-radius:999px;
  background:#e53935;
  color:#fff;
  font-size:11px;
  font-weight:700;
  display:none;
  align-items:center;
  justify-content:center;
  line-height:18px;
  border:2px solid #fff;
}
/* --- Facebook-style carousel --- */
.post-media{
  position:relative;
  margin-top:10px;
}

.post-media-track{
  display:flex;
  gap:0;
  overflow-x:auto;
  scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
}
.post-media-track::-webkit-scrollbar{ display:none; }

.post-media-item{
  flex:0 0 100%;
  scroll-snap-align:center;
  position:relative;
}
.post-media-item img{
  width:100%;
  height:auto;
  display:block;
  border-radius:12px;
}

/* Dots (small black like Facebook) */
.carousel-dots{
  position:absolute;
  left:50%;
  bottom:10px;
  transform:translateX(-50%);
  display:flex;
  gap:6px;
  z-index:3;
}
.carousel-dots .dot{
  width:6px;
  height:6px;
  border-radius:999px;
  border:none;
  background:rgba(0,0,0,0.35);
  padding:0;
  cursor:pointer;
}
.carousel-dots .dot.active{
  background:rgba(0,0,0,0.85);
}

/* Optional arrows (only show when multi-image) */
.carousel-nav{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  z-index:3;
  width:34px;
  height:34px;
  border-radius:999px;
  border:none;
  background:rgba(0,0,0,0.35);
  color:#fff;
  font-size:22px;
  line-height:34px;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
}
.carousel-nav.prev{ left:8px; }
.carousel-nav.next{ right:8px; }

/* On small screens keep arrows subtle */
@media (max-width: 600px){
  .carousel-nav{ width:30px; height:30px; font-size:20px; line-height:30px; }
}
.post-apply-badge{
  position:absolute;
  right:10px;
  bottom:10px;
  border:none;
  border-radius:999px;
  padding:8px 12px;
  font-weight:600;
  background:rgba(0,0,0,0.75);
  color:#fff;
  cursor:pointer;
  z-index:5;
}
.post-apply-badge:hover{ filter:brightness(1.05); }
.post-apply-badge:active{ transform:scale(0.98); }
/* =========================
   weSPACE AUTH PAGES (Register/Login)
   Scoped to body.auth only
   ========================= */

body.auth{
  margin: 0;
  color: #0f172a;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;

  /* Same premium light background as landing */
  background:
    radial-gradient(900px 500px at 18% 10%, rgba(10,102,194,0.10), transparent 60%),
    radial-gradient(900px 500px at 82% 18%, rgba(34,197,94,0.08), transparent 60%),
    linear-gradient(180deg, #eef3f8 0%, #f6f8fb 55%, #eef3f8 100%);
}

/* Top bar (same as landing) */
body.auth .topbar{
  position: sticky;
  top: 0;
  z-index: 10;
  background: rgba(238,243,248,0.92);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(229,231,235,0.95);
}

body.auth .topbar-inner{
  width: min(1100px, 92vw);
  margin: 0 auto;
  padding: 14px 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

body.auth .brand{
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  color: inherit;
}

body.auth .logo{
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: #0a66c2;
  color: #fff;
  display: grid;
  place-items: center;
  font-weight: 900;
  font-size: 18px;
  box-shadow: 0 10px 22px rgba(10,102,194,0.18);
}

body.auth .brandname{
  font-weight: 900;
  letter-spacing: -0.2px;
  font-size: 18px;
  line-height: 1.1;
}

body.auth .brandtag{
  font-size: 12px;
  color: #64748b;
  margin-top: 2px;
}

body.auth .top-actions{
  display: flex;
  align-items: center;
  gap: 14px;
}

body.auth .link{
  color: #64748b;
  text-decoration: none;
  font-weight: 800;
  font-size: 14px;
}

body.auth .link:hover{ color: #0f172a; }

/* Center shell */
body.auth .auth-shell{
  width: min(980px, 92vw);
  margin: 0 auto;
  padding: 22px 0 32px;
  display: grid;
  place-items: center;
}

/* Auth card */
body.auth .auth-card{
  width: min(560px, 100%);
  background: #ffffff;
  border: 1px solid rgba(229,231,235,0.95);
  border-radius: 14px;
  box-shadow: 0 12px 34px rgba(2,6,23,0.08);
  padding: 18px;
}

body.auth .auth-head{
  margin-bottom: 12px;
}

body.auth .auth-title{
  margin: 0 0 6px;
  font-weight: 950;
  font-size: 22px;
  letter-spacing: -0.4px;
}

body.auth .auth-subtitle{
  margin: 0;
  color: #64748b;
  line-height: 1.55;
  font-size: 14px;
}

/* Form */
body.auth .auth-form{
  display: grid;
  gap: 12px;
}

body.auth .grid2{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

@media (max-width: 620px){
  body.auth .grid2{ grid-template-columns: 1fr; }
  body.auth .top-actions{ display:none; }
}

body.auth .field{
  display: grid;
  gap: 6px;
}

body.auth .field span{
  font-size: 12px;
  color: #64748b;
  font-weight: 800;
}

body.auth .field input{
  width: 100%;
  padding: 12px 12px;
  border-radius: 12px;
  border: 1px solid rgba(229,231,235,0.95);
  outline: none;
  font-size: 14px;
  background: #fff;
}

body.auth .field input:focus{
  border-color: rgba(10,102,194,0.45);
  box-shadow: 0 0 0 4px rgba(10,102,194,0.12);
}

body.auth .hint{
  display: block;
  margin-top: 6px;
  font-size: 12px;
  color: #64748b;
}

/* Buttons */
body.auth .btn{
  border: 0;
  cursor: pointer;
  border-radius: 12px;
  padding: 12px 14px;
  font-weight: 950;
  font-size: 14px;
}

body.auth .btn.primary{
  background: #0a66c2;
  color: #fff;
}

body.auth .btn.primary:hover{
  background: #084f96;
}

body.auth .btn.full{ width: 100%; }

body.auth .tiny{
  font-size: 12px;
  color: #64748b;
  line-height: 1.4;
  margin-top: 2px;
}

body.auth .center{ text-align: center; }

body.auth .link2{
  color: #0a66c2;
  font-weight: 900;
  text-decoration: none;
}

body.auth .link2:hover{ text-decoration: underline; }
.verifiedBadge{
  margin-left:6px;
  font-weight:700;
  color:#16a34a;
  font-size:13px;
  vertical-align:middle;
}
.verified-badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  margin-left:6px;
  width:18px;
  height:18px;
  border-radius:999px;
  background:#2563eb;
  color:#fff;
  font-size:12px;
  font-weight:800;
  line-height:1;
}
/* Twitter-style header row */
.name-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}

.name-left{
  min-width:0;
  flex:1;
}

.poster-name{
  display:inline-flex;
  align-items:center;
  gap:6px;
  font-weight:700;
  min-width:0;
}

/* If names are long, prevent breaking layout */
.poster-name{
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.name-right{
  display:inline-flex;
  align-items:center;
  gap:8px;
  flex:0 0 auto;
}

/* Verified badge */
.verified-badge{
  width:16px;
  height:16px;
  border-radius:50%;
  background:#1d9bf0;
  color:#fff;
  font-size:11px;
  font-weight:800;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;

}
/* =========================
   Premium Post UI (weSPACE)
   ========================= */

.post-card{
  background:#fff;
  border:1px solid #e7e9ee;
  border-radius:16px;
  padding:14px 14px 12px;
  margin:12px 0;
  box-shadow:0 1px 0 rgba(0,0,0,.03);
}

.post-head{
  display:flex;
  gap:10px;
  align-items:flex-start;
}

.avatar-img{
  width:42px;
  height:42px;
  border-radius:999px;
  object-fit:cover;
  border:1px solid #eef0f4;
}

.post-meta{ flex:1; min-width:0; }

.name-row{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:8px;
}

.poster-name{
  font-weight:700;
  font-size:14px;
  color:#111827;
}

.sub-row{
  margin-top:4px;
  font-size:12px;
  color:#6b7280;
  line-height:1.35;
}

.post-body{
  margin-top:10px;
}

.post-text{
  font-size:15px;
  line-height:1.65;
  color:#111827;
  white-space:pre-wrap;
  word-break:break-word;
  margin:0 0 10px;
}

.more-toggle{
  display:inline-block;
  margin-top:6px;
  padding:0;
  border:0;
  background:transparent;
  color:#2563eb;
  font-weight:700;
  cursor:pointer;
}

.more-toggle:hover{ text-decoration:underline; }

.post-badge{
  font-size:12px;
  font-weight:700;
  padding:5px 10px;
  border-radius:999px;
  border:1px solid #e7e9ee;
  background:#f7f8fb;
  color:#111827;
}

/* Optional: subtle badge tints without being “loud” */
.post-badge.market{ background:#f3f7ff; }
.post-badge.opportunity{ background:#f3fff7; }
.post-badge.social{ background:#fff7f1; }

.connect-btn,
.mini-del{
  border:1px solid #e7e9ee;
  background:#fff;
  color:#111827;
  border-radius:999px;
  padding:6px 10px;
  font-size:12px;
  font-weight:700;
  cursor:pointer;
}

.connect-btn:hover,
.mini-del:hover{
  background:#f7f8fb;
}

.danger.mini-del{
  border-color:#f1c7c7;
  color:#b42318;
}

.post-media{
  margin-top:10px;
  border-radius:14px;
  overflow:hidden;
  border:1px solid #eef0f4;
  background:#f3f4f6;
}

.post-media-track{
  display:flex;
  overflow:auto;
  scroll-snap-type:x mandatory;
  gap:10px;
  padding:10px;
}

.post-media-item{
  position:relative;
  flex:0 0 85%;
  scroll-snap-align:start;
  border-radius:12px;
  overflow:hidden;
  background:#e5e7eb;
}

.post-media-item img{
  width:100%;
  height:auto;
  display:block;
}

.post-wa-icon{
  position:absolute;
  right:10px;
  bottom:10px;
  width:44px;
  height:44px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.8);
  background:rgba(255,255,255,.92);
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
}

.post-wa-icon img{
  width:22px;
  height:22px;
}

.post-price-badge{
  position:absolute;
  left:12px;
  bottom:12px;
  background:rgba(17,24,39,.92);
  color:#fff;
  font-weight:800;
  font-size:12px;
  padding:6px 10px;
  border-radius:999px;
}

.post-actions{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  margin-top:12px;
  padding-top:10px;
  border-top:1px solid #eef0f4;
}

.post-actions button{
  border:1px solid #e7e9ee;
  background:#fff;
  color:#111827;
  border-radius:999px;
  padding:8px 12px;
  font-size:13px;
  font-weight:700;
  cursor:pointer;
}

.post-actions button:hover{
  background:#f7f8fb;
}

.post-actions button:disabled{
  opacity:.5;
  cursor:not-allowed;
}

/* Make the page background “premium” (optional but recommended) */
body{
  background:#f5f7fb;
  color:#111827;
}

/* Mobile polish */
@media (max-width:480px){
  .post-card{ border-radius:14px; padding:12px; }
  .post-media-item{ flex-basis:92%; }
  .post-text{ font-size:14px; }
}
/* =========================
   weSPACE Post UI Fixes (MERGED)
   ========================= */

/* 1) Bring description UP (remove extra top spacing) */
.post-body{
  margin-top: 8px !important;
}
.post-text{
  margin: 0 0 10px !important;
}

/* 2) Swipeable media that fills the card (no empty padding/gaps) */
.post-media{
  position: relative !important;       /* needed for badges positioning */
  margin-top: 8px !important;
  border-radius: 14px;
  overflow: hidden;                    /* keep badges inside */
  border: 1px solid #eef0f4;
  background: #f3f4f6;
}

/* Keep swipe + remove the space */
.post-media-track{
  display: flex !important;
  overflow-x: auto !important;         /* swipe */
  overflow-y: hidden !important;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x mandatory !important;

  padding: 0 !important;               /* remove side space */
  gap: 0 !important;                   /* remove gaps */
}

/* Each slide fills full width */
.post-media-item{
  flex: 0 0 100% !important;
  scroll-snap-align: start !important;

  position: relative;
  border-radius: 0 !important;
  overflow: hidden;
  background: #e5e7eb;
}

/* Image fills slide cleanly */
.post-media-item img{
  width: 100% !important;
  height: auto !important;
  display: block !important;
  object-fit: cover !important;
}

/* Optional: hide scrollbar but keep swipe */
.post-media-track::-webkit-scrollbar{ height: 0; }
.post-media-track{ scrollbar-width: none; }

/* 3) Price badge: neat, RIGHT, not stretching */
.post-price-badge{
  position: absolute !important;
  right: 12px !important;
  left: auto !important;
  bottom: 12px !important;

  width: auto !important;
  max-width: 70% !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

/* 4) WhatsApp button: LEFT */
.post-wa-icon{
  position: absolute !important;
  left: 10px !important;
  right: auto !important;
  bottom: 10px !important;
}

/* 5) Tighter post tile */
.post-card{
  padding-bottom: 10px !important;
}
/* =========================
   weSPACE Mobile Feed "FB-like" UI
   Paste at END of style.css
   ========================= */

:root{
  --fb-bg: #f0f2f5;
  --card: #ffffff;
  --text: #050505;
  --muted: #65676b;
  --border: #dddfe2;
}

/* Page background like FB */
body{
  background: var(--fb-bg) !important;
  color: var(--text) !important;
}

/* If you have a main container/wrapper, remove big side padding on mobile */
@media (max-width: 600px){
  .container, .main, .page, .feed, .content{
    width: 100% !important;
    max-width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  /* Make post card feel full-width like FB */
  .post-card, .post, .feed-item{
    width: 100% !important;
    max-width: 100% !important;
    margin: 10px 0 !important;
    border-radius: 14px !important;
    background: var(--card) !important;
    border: 1px solid var(--border) !important;
    box-shadow: 0 1px 2px rgba(0,0,0,.06) !important;
  }

  /* Tighter header spacing */
  .post-header{
    padding: 12px 12px 6px !important;
  }

  /* Better text like FB */
  .post-body{
    padding: 0 12px 10px !important;
    margin-top: 4px !important;
  }
  .post-text{
    color: var(--text) !important;
    font-size: 16px !important;
    line-height: 1.35 !important;
    margin: 6px 0 10px !important;
    word-break: break-word;
  }
  .post-meta, .post-subtitle, .post-time, .post-hint{
    color: var(--muted) !important;
    font-size: 13px !important;
  }

  /* Media should be edge-to-edge inside the card */
  .post-media{
    margin: 8px 0 8px !important;
    border-radius: 0 !important;
    overflow: hidden !important;
  }
  .post-media-track{
    padding: 0 !important;
    gap: 0 !important;
  }
  .post-media-item{
    flex: 0 0 100% !important;
    border-radius: 0 !important;
  }
  .post-media img, .post-media video{
    width: 100% !important;
    height: auto !important;
    display: block !important;
    object-fit: cover !important;
  }
}
/* Action buttons should never break on mobile */
.post-actions{
  display: flex !important;
  gap: 8px !important;
  padding: 8px 12px 12px !important;
}

.post-actions button{
  flex: 1 1 0 !important;
  min-width: 0 !important;
  border-radius: 999px !important;
  white-space: nowrap !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
}

/* If you have the count span */
.post-actions .count{
  color: #65676b !important;
  font-weight: 600;
}
/* Hide connect button inside feed posts (show it only on profile page UI) */
.post-card .connect-btn,
.post .connect-btn,
.feed-item .connect-btn{
  display: none !important;
}
/* =========================
   FB-like Media Edge-to-Edge
   ========================= */

:root{
  --fb-bg: #f0f2f5;
  --card: #ffffff;
  --text: #050505;
  --muted: #65676b;
  --border: #dadde1;
}

body{
  background: var(--fb-bg) !important;
  color: var(--text) !important;
}

/* Stronger “card pop” like FB */
.post-card, .post, .feed-item{
  background: var(--card) !important;
  border: 1px solid var(--border) !important;
  border-radius: 14px !important;
  box-shadow: 0 1px 2px rgba(0,0,0,.10) !important;
}

/* IMPORTANT:
   Your card has inner padding (often 12px).
   We make media “bleed” left/right by using negative margins. */
.post-media{
  margin-left: -12px !important;
  margin-right: -12px !important;
  border-radius: 0 !important;
  overflow: hidden !important;
}

/* Ensure media truly fills */
.post-media-track{
  padding: 0 !important;
  gap: 0 !important;
}

.post-media-item{
  flex: 0 0 100% !important;
  border-radius: 0 !important;
  overflow: hidden !important;
}

.post-media img,
.post-media video{
  width: 100% !important;
  height: auto !important;
  display: block !important;
  object-fit: cover !important;
}
/* =========================
   Fix media to edge inside padded card
   Your card padding = 14px
   ========================= */

.post-card{
  padding: 14px;
  overflow: hidden; /* important */
}

/* This is the KEY fix */
.post-media{
  margin-left: -14px !important;
  margin-right: -14px !important;
  margin-top: 8px !important;
  margin-bottom: 8px !important;
  border-radius: 0 !important;
  overflow: hidden !important;
}

.post-media-track{
  padding: 0 !important;
  gap: 0 !important;
}

.post-media-item{
  flex: 0 0 100% !important;
}

.post-media img,
.post-media video{
  width: 100% !important;
  display: block !important;
  object-fit: cover;
}
body{
  background: #f0f2f5 !important;
}

.post-card{
  background: #ffffff !important;
  border: 1px solid #dadde1 !important;
  box-shadow: 0 1px 2px rgba(0,0,0,.10) !important;
}

.post-text{
  color: #050505 !important;
}

.post-meta{
  color: #65676b !important;
}
.post-actions{
  border-top: 1px solid #dadde1;
  margin-top: 6px;
  padding-top: 6px;

  display: flex;
  justify-content: space-around;
}

.post-actions button{
  background: none !important;
  border: none !important;
  box-shadow: none !important;
  color: #65676b;
  font-weight: 600;
}
/* =========================
   weSPACE: Edge-to-edge media (your structure)
   post-body contains media
   ========================= */

/* Card */
.post-card{
  background: #fff;
  border: 1px solid #dadde1;
  border-radius: 14px;
  overflow: hidden; /* critical */
  box-shadow: 0 1px 2px rgba(0,0,0,.10);
}

/* Header + body padding like FB */
.post-head{
  padding: 10px 14px 6px !important;
}
.post-body{
  padding: 0 17px 10px !important; /* left/right padding stays for text */
  margin: 0 !important;
}

/* Make ONLY media escape the body padding */
.post-body .post-media{
  margin-left: -17px !important;
  margin-right: -17px !important;
  margin-top: 7px !important;
  margin-bottom: 8px !important;
  border-radius: 0 !important;
  overflow: hidden !important;
}

/* Ensure no inner gaps */
.post-media-track{ padding: 0 !important; gap: 0 !important; }
.post-media-item{ flex: 0 0 100% !important; border-radius: 0 !important; }
.post-media img, .post-media video{
  width: 100% !important;
  display: block !important;
  object-fit: cover !important;
}
/* Remove title line from UI (keep DB field) */
.post-title{
  display: none !important;
}
.post-text{
  margin-top: 2px !important;
  margin-bottom: 8px !important;
  line-height: 1.35 !important;
  color: #050505 !important;
}
.sub-row{
  color: #65676b !important;
}
/* =========================
   FB-like action row alignment
   ========================= */

.post-actions{
  display: flex !important;
  align-items: center !important;
  justify-content: space-around !important;
  gap: 0 !important;
  padding: 8px 10px !important;
  border-top: 1px solid #dadde1 !important;
  background: transparent !important;
}

.post-actions button{
  flex: 1 1 0 !important;
  min-width: 0 !important;

  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;

  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;

  padding: 10px 6px !important;
  font-size: 14px !important;
  line-height: 1 !important;
  color: #65676b !important;
  font-weight: 600 !important;
  border-radius: 10px !important;
}

.post-actions button:active{
  transform: scale(0.98);
}

/* Optional: hide counts for a cleaner FB look */
.post-actions .count{
  display: none !important;
}
.post-card .connect-btn{
  display: none !important;
}
/* =========================
   weSPACE FB-like FIX (stable)
   Works with your HTML structure:
   .post-card > .post-head + .post-body + .post-actions
   ========================= */

@media (max-width: 700px){

  /* make the page not look washed + remove side gutters */
  html, body{
    margin: 0 !important;
    padding: 0 !important;
    background: #f0f2f5 !important;
    color: #050505 !important;
  }

  /* remove any outer container padding that creates side space */
  .container, .main, .page, .feed, .content{
    max-width: 100% !important;
    width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  /* Post card */
  .post-card{
    background: #fff !important;
    border: 1px solid #dadde1 !important;
    border-radius: 14px !important;
    box-shadow: 0 1px 2px rgba(0,0,0,.12) !important;
    overflow: hidden !important;

    /* IMPORTANT: remove padding from the card */
    padding: 0 !important;

    /* FB style: full width card */
    margin: 10px 0 !important;
  }

  /* Header spacing like FB */
  .post-head{
    padding: 12px 14px 6px !important;
  }

  /* Body: NO side padding so media can be full width */
  .post-body{
    padding: 0 !important;
    margin: 0 !important;
  }

  /* You don’t want title showing */
  .post-title{
    display: none !important;
  }

  /* Text gets padding (FB style) */
  .post-text{
    padding: 4px 14px 10px !important;
    margin: 0 !important;
    font-size: 16px !important;
    line-height: 1.35 !important;
    color: #050505 !important;
    text-align: left !important; /* fixes the “centered” look */
    word-break: break-word;
  }

  .post-meta .sub-row{
    color: #65676b !important;
    font-size: 13px !important;
  }

  /* Media must be true full width INSIDE card */
  .post-media{
    margin: 0 !important;
    padding: 0 !important;
    border-radius: 0 !important;
    overflow: hidden !important;
  }

  .post-media-track{
    padding: 0 !important;
    gap: 0 !important;
  }

  .post-media-item{
    flex: 0 0 100% !important;
    border-radius: 0 !important;
    overflow: hidden !important;
  }

  .post-media img,
  .post-media video{
    width: 100% !important;
    height: auto !important;
    display: block !important;
    border-radius: 0 !important;
    object-fit: cover !important;
  }

  /* Action buttons aligned + clean */
  .post-actions{
    display: flex !important;
    align-items: center !important;
    justify-content: space-around !important;
    gap: 0 !important;

    padding: 8px 10px !important;
    border-top: 1px solid #dadde1 !important;
    background: #fff !important;
  }

  .post-actions button{
    flex: 1 1 0 !important;
    min-width: 0 !important;

    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;

    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;

    padding: 10px 6px !important;
    font-size: 14px !important;
    line-height: 1 !important;
    color: #65676b !important;
    font-weight: 600 !important;
    border-radius: 10px !important;
  }
   /* ==================================
   RESTORE NORMAL POST CARD PADDING
   ================================== */

/* Card boxed again */
.post-card{
  padding: 14px !important;   /* restore original padding */
}

/* Body should NOT remove card padding */
.post-body{
  padding: 0 !important;
}

/* Remove any negative margins on media */
.post-body .post-media{
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* Ensure media stays inside card */
.post-media{
  width: 100% !important;
  border-radius: 12px !important; /* nice inner rounding */
}
/* =========================
   Fix: Name left, Visit Shop right (your real button)
   ========================= */

.post-head{
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
}

.avatar-img{
  width: 38px !important;
  height: 38px !important;
  flex: 0 0 auto !important;
}

/* meta takes remaining space */
.post-meta{
  flex: 1 1 auto !important;
  min-width: 0 !important; /* allow shrink */
}

/* name row: keep in one line */
.name-row{
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  flex-wrap: nowrap !important;
}

/* name shrinks nicely instead of colliding */
.poster-name{
  flex: 1 1 auto !important;
  min-width: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

/* Push Visit Shop to the far right */
#visitShopBtn{
  margin-left: auto !important;
  flex: 0 0 auto !important;
  white-space: nowrap !important;
}
/* === Make description start normally (no title space, no indent) === */
.post-title{ 
  display: none !important;
  margin: 0 !important;
  padding: 0 !important;
  height: 0 !important;
}

.post-text{
  margin-top: 0 !important;      /* remove the 4px */
  padding-top: 0 !important;
  text-indent: 0 !important;
  text-align: left !important;
  white-space: normal !important;
}
/* =========================
   Shift Visit Shop slightly further right
   ========================= */

#visitShopBtn{
  margin-left: auto !important;   /* pushes it to far right */
  margin-right: 6px !important;   /* adds breathing space from edge */
}
/* ===== Minimal Feed Brand Header ===== */
.feed-brand {
  font-size: 16px;
  font-weight: 700;
  color: #1877f2;
  padding: 8px 16px 6px 16px;
  margin: 0;
  letter-spacing: 0.3px;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}