/* ===================================
   ITALY LIONS — Global Stylesheet
   Black & Gold Modern Theme
   =================================== */

/* ---- LANGUAGE SWITCHER ---- */
#langSwitcher { display:flex; align-items:center; gap:3px; margin-left:8px; }
.lang-btn { background:transparent; border:1px solid var(--border); color:var(--white-muted); font-size:0.72rem; font-weight:700; padding:4px 9px; border-radius:6px; cursor:pointer; transition:var(--transition); font-family:'Lato',sans-serif; letter-spacing:0.5px; }
.lang-btn:hover,.lang-btn.active { border-color:var(--gold); color:var(--gold); background:rgba(201,162,39,0.1); }

/* ---- SHARE DROPDOWN ---- */
.share-wrap { position:relative; display:inline-flex; }
.share-dropdown { display:none; position:absolute; bottom:calc(100% + 8px); left:50%; transform:translateX(-50%); background:var(--black-card); border:1px solid var(--border); border-radius:10px; min-width:200px; z-index:500; box-shadow:0 8px 32px rgba(0,0,0,0.6); overflow:hidden; }
.share-dropdown.open { display:block; }
.share-opt { display:flex; align-items:center; gap:10px; padding:11px 16px; font-size:0.85rem; font-weight:600; color:var(--white-muted); cursor:pointer; transition:var(--transition); border-bottom:1px solid rgba(201,162,39,0.07); }
.share-opt:last-child { border-bottom:none; }
.share-opt:hover { background:rgba(201,162,39,0.1); color:var(--gold); }

/* ---- FEED / SOCIAL LAYOUT ---- */
.app-layout { display:grid; grid-template-columns:260px 1fr 280px; gap:24px; max-width:1200px; margin:0 auto; padding:88px 16px 40px; }
.feed-col { min-width:0; }
.sidebar-left, .sidebar-right { position:sticky; top:88px; height:fit-content; max-height:calc(100vh - 100px); overflow-y:auto; }
.sidebar-left::-webkit-scrollbar, .sidebar-right::-webkit-scrollbar { display:none; }

/* Side nav */
.side-nav { background:var(--black-card); border:1px solid var(--border); border-radius:var(--radius); overflow:hidden; }
.side-nav-item { display:flex; align-items:center; gap:12px; padding:14px 18px; color:var(--white-muted); font-weight:700; font-size:0.9rem; transition:var(--transition); cursor:pointer; border-bottom:1px solid rgba(201,162,39,0.07); }
.side-nav-item:hover,.side-nav-item.active { color:var(--gold); background:rgba(201,162,39,0.07); }
.side-nav-item .nav-icon { font-size:1.2rem; width:28px; text-align:center; }
.side-nav-item .count { margin-left:auto; background:var(--gold); color:var(--black); font-size:0.7rem; font-weight:900; padding:2px 7px; border-radius:10px; }

/* Post box */
.post-box { background:var(--black-card); border:1px solid var(--border); border-radius:var(--radius); padding:18px; margin-bottom:20px; }
.post-box-top { display:flex; gap:12px; align-items:center; margin-bottom:14px; }
.post-input { flex:1; background:var(--black-soft); border:1px solid var(--border); border-radius:50px; padding:12px 20px; color:var(--white-muted); font-size:0.95rem; cursor:pointer; font-family:'Lato',sans-serif; }
.post-input:focus { outline:none; border-color:var(--gold); color:var(--white); }
.post-actions { display:flex; gap:8px; flex-wrap:wrap; }
.post-action-btn { display:flex; align-items:center; gap:6px; padding:8px 14px; background:var(--black-soft); border:1px solid var(--border); border-radius:8px; color:var(--white-muted); font-size:0.82rem; font-weight:700; cursor:pointer; transition:var(--transition); }
.post-action-btn:hover { border-color:var(--gold); color:var(--gold); }

/* Post card */
.post-card { background:var(--black-card); border:1px solid var(--border); border-radius:var(--radius); margin-bottom:18px; overflow:hidden; transition:var(--transition); }
.post-card:hover { border-color:rgba(201,162,39,0.25); }
.post-header { display:flex; align-items:center; gap:12px; padding:16px 18px 12px; }
.post-avatar { width:44px; height:44px; border-radius:50%; background:linear-gradient(135deg,var(--gold),var(--gold-dark)); display:flex; align-items:center; justify-content:center; font-weight:900; font-size:1.1rem; color:var(--black); font-family:'Cinzel',serif; flex-shrink:0; border:2px solid rgba(201,162,39,0.4); }
.post-avatar.biz { border-radius:10px; }
.post-meta { flex:1; }
.post-name { color:var(--white); font-weight:700; font-size:0.95rem; display:flex; align-items:center; gap:6px; }
.post-name .verified { color:#44CC88; font-size:0.8rem; }
.post-name .biz-badge { background:rgba(201,162,39,0.15); color:var(--gold); font-size:0.65rem; padding:2px 7px; border-radius:10px; border:1px solid var(--border); }
.post-time { font-size:0.78rem; color:var(--white-muted); margin-top:2px; }
.post-menu { color:var(--white-muted); cursor:pointer; padding:4px 8px; font-size:1.2rem; }
.post-body { padding:0 18px 12px; }
.post-body p { font-size:0.93rem; color:var(--white-dim); line-height:1.7; }
.post-location { display:inline-flex; align-items:center; gap:5px; font-size:0.8rem; color:var(--gold); background:rgba(201,162,39,0.08); padding:3px 10px; border-radius:20px; border:1px solid var(--border); margin-top:8px; }
.post-image { width:100%; max-height:380px; object-fit:cover; background:var(--black-soft); display:flex; align-items:center; justify-content:center; font-size:5rem; min-height:200px; }
.post-rating { padding:10px 18px; display:flex; align-items:center; gap:8px; }
.star-rating { display:flex; gap:3px; }
.star { font-size:1.1rem; cursor:pointer; transition:var(--transition); color:var(--white-muted); }
.star.filled { color:var(--gold); }
.rating-count { font-size:0.8rem; color:var(--white-muted); }
.post-stats { padding:8px 18px; border-top:1px solid rgba(201,162,39,0.08); border-bottom:1px solid rgba(201,162,39,0.08); display:flex; gap:16px; }
.post-stat { font-size:0.82rem; color:var(--white-muted); }
.post-actions-bar { display:flex; }
.post-btn { flex:1; display:flex; align-items:center; justify-content:center; gap:7px; padding:10px; color:var(--white-muted); font-size:0.85rem; font-weight:700; cursor:pointer; transition:var(--transition); border-radius:4px; }
.post-btn:hover { color:var(--gold); background:rgba(201,162,39,0.06); }
.post-btn.liked { color:#FF6B6B; }
.post-btn.liked span { color:#FF6B6B; }
.comments-section { padding:0 18px 16px; display:none; }
.comment { display:flex; gap:10px; margin-bottom:12px; }
.comment-avatar { width:34px; height:34px; border-radius:50%; background:linear-gradient(135deg,var(--gold-dark),#5A3000); display:flex; align-items:center; justify-content:center; font-size:0.8rem; font-weight:900; color:var(--gold); flex-shrink:0; }
.comment-bubble { background:var(--black-soft); border-radius:12px; padding:10px 14px; flex:1; }
.comment-author { font-size:0.82rem; font-weight:700; color:var(--white); margin-bottom:3px; }
.comment-text { font-size:0.87rem; color:var(--white-muted); }
.comment-input-row { display:flex; gap:10px; align-items:center; margin-top:12px; }
.comment-input { flex:1; background:var(--black-soft); border:1px solid var(--border); border-radius:50px; padding:9px 16px; color:var(--white); font-size:0.87rem; font-family:'Lato',sans-serif; }
.comment-input:focus { outline:none; border-color:var(--gold); }

/* Story bar */
.stories-bar { display:flex; gap:12px; padding:0 0 20px; overflow-x:auto; }
.stories-bar::-webkit-scrollbar { display:none; }
.story-item { display:flex; flex-direction:column; align-items:center; gap:6px; cursor:pointer; flex-shrink:0; }
.story-ring { width:58px; height:58px; border-radius:50%; background:linear-gradient(135deg,var(--gold),var(--gold-dark)); padding:3px; }
.story-ring .inner { width:100%; height:100%; border-radius:50%; background:var(--black-card); border:2px solid var(--black-card); display:flex; align-items:center; justify-content:center; font-size:1.3rem; font-weight:900; color:var(--gold); font-family:'Cinzel',serif; }
.story-name { font-size:0.7rem; color:var(--white-muted); text-align:center; max-width:58px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

/* Boosted post highlight */
.post-card.boosted { border-color:var(--gold); }
.boost-label { background:linear-gradient(135deg,var(--gold),var(--gold-dark)); color:var(--black); font-size:0.65rem; font-weight:900; padding:2px 8px; letter-spacing:1px; text-align:center; }

/* Right sidebar widgets */
.widget { background:var(--black-card); border:1px solid var(--border); border-radius:var(--radius); padding:18px; margin-bottom:16px; }
.widget h4 { font-family:'Cinzel',serif; font-size:0.85rem; color:var(--gold); letter-spacing:1px; margin-bottom:14px; text-transform:uppercase; }
.suggestion-item { display:flex; align-items:center; gap:10px; padding:8px 0; border-bottom:1px solid rgba(201,162,39,0.07); }
.suggestion-item:last-child { border:none; }
.sug-avatar { width:36px; height:36px; border-radius:50%; background:linear-gradient(135deg,var(--gold),var(--gold-dark)); display:flex; align-items:center; justify-content:center; font-weight:900; color:var(--black); font-size:0.85rem; flex-shrink:0; }
.sug-avatar.biz { border-radius:8px; font-size:1rem; }
.sug-info { flex:1; }
.sug-name { font-size:0.85rem; font-weight:700; color:var(--white); }
.sug-sub { font-size:0.75rem; color:var(--white-muted); }
.sug-btn { background:rgba(201,162,39,0.1); border:1px solid var(--border); color:var(--gold); font-size:0.75rem; font-weight:700; padding:4px 10px; border-radius:6px; cursor:pointer; transition:var(--transition); }
.sug-btn:hover { background:var(--gold); color:var(--black); }

/* Profile page */
.profile-cover { height:240px; background:linear-gradient(135deg,#1A0A00,#3A1F00,#1A0A00); border-radius:0 0 var(--radius) var(--radius); position:relative; overflow:hidden; }
.profile-cover::after { content:''; position:absolute; inset:0; background:radial-gradient(ellipse at 50% 100%,rgba(201,162,39,0.2),transparent 70%); }
.profile-body { max-width:900px; margin:0 auto; padding:0 20px; }
.profile-top { display:flex; align-items:flex-end; gap:20px; margin-top:-56px; position:relative; z-index:2; margin-bottom:20px; flex-wrap:wrap; }
.profile-pic { width:120px; height:120px; border-radius:50%; background:linear-gradient(135deg,var(--gold),var(--gold-dark)); display:flex; align-items:center; justify-content:center; font-size:2.8rem; font-weight:900; color:var(--black); font-family:'Cinzel',serif; border:5px solid var(--black); flex-shrink:0; }
.profile-pic.biz { border-radius:20px; }
.profile-info { flex:1; padding-bottom:10px; }
.profile-info h2 { font-size:1.6rem; color:var(--white); margin-bottom:4px; }
.profile-info .handle { font-size:0.9rem; color:var(--gold); margin-bottom:6px; }
.profile-info .bio { font-size:0.9rem; color:var(--white-muted); }
.profile-stats-row { display:flex; gap:28px; padding:16px 0; border-top:1px solid var(--border); border-bottom:1px solid var(--border); margin-bottom:24px; flex-wrap:wrap; }
.profile-stat { text-align:center; }
.profile-stat .num { font-family:'Cinzel',serif; font-size:1.3rem; color:var(--gold); font-weight:700; }
.profile-stat .lbl { font-size:0.75rem; color:var(--white-muted); }
.profile-tabs { display:flex; gap:4px; border-bottom:2px solid var(--border); margin-bottom:24px; }
.ptab { padding:12px 20px; color:var(--white-muted); font-weight:700; font-size:0.9rem; cursor:pointer; border-bottom:3px solid transparent; margin-bottom:-2px; transition:var(--transition); }
.ptab:hover,.ptab.active { color:var(--gold); border-bottom-color:var(--gold); }
.cities-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; }
.city-visited { background:var(--black-card); border:1px solid var(--border); border-radius:10px; padding:14px; text-align:center; transition:var(--transition); }
.city-visited:hover { border-color:var(--gold); }
.city-visited .emoji { font-size:1.6rem; margin-bottom:6px; }
.city-visited .name { font-size:0.85rem; color:var(--white); font-weight:700; }
.city-visited .date { font-size:0.72rem; color:var(--white-muted); }

/* Market / Cards grid */
.market-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:20px; }
.rental-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:20px; }
.market-card { background:var(--black-card); border:1px solid var(--border); border-radius:var(--radius); overflow:hidden; transition:var(--transition); }
.market-card:hover { border-color:var(--border-glow); transform:translateY(-4px); box-shadow:0 12px 30px rgba(201,162,39,0.12); }
.market-img { width:100%; height:180px; background:var(--black-soft); display:flex; align-items:center; justify-content:center; font-size:3.5rem; border-bottom:1px solid var(--border); }
.market-body { padding:16px; }
.market-price { font-family:'Cinzel',serif; font-size:1.2rem; color:var(--gold); font-weight:700; margin-bottom:4px; }
.market-title { color:var(--white); font-weight:700; margin-bottom:6px; font-size:0.95rem; }
.market-meta { font-size:0.8rem; color:var(--white-muted); margin-bottom:12px; }
.market-seller { display:flex; align-items:center; gap:8px; padding-top:10px; border-top:1px solid rgba(201,162,39,0.1); }
.seller-av { width:28px; height:28px; border-radius:50%; background:var(--gold); display:flex; align-items:center; justify-content:center; font-weight:900; font-size:0.75rem; color:var(--black); }
.seller-name { font-size:0.8rem; color:var(--white-muted); }

/* Rental cards */
.rental-card { background:var(--black-card); border:1px solid var(--border); border-radius:var(--radius); overflow:hidden; transition:var(--transition); }
.rental-card:hover { border-color:var(--border-glow); transform:translateY(-4px); }
.rental-img { width:100%; height:200px; background:var(--black-soft); display:flex; align-items:center; justify-content:center; font-size:4rem; border-bottom:1px solid var(--border); }
.rental-body { padding:18px; }
.rental-price { font-family:'Cinzel',serif; font-size:1.3rem; color:var(--gold); margin-bottom:6px; }
.rental-price span { font-size:0.85rem; color:var(--white-muted); }
.rental-title { color:var(--white); font-weight:700; font-size:1rem; margin-bottom:8px; }
.rental-features { display:flex; gap:10px; flex-wrap:wrap; margin-bottom:12px; }
.rental-feat { background:rgba(201,162,39,0.08); border:1px solid var(--border); color:var(--white-muted); font-size:0.75rem; padding:3px 10px; border-radius:20px; }

/* Cargo */
.cargo-card { background:var(--black-card); border:1px solid var(--border); border-radius:var(--radius); padding:24px; transition:var(--transition); }
.cargo-card:hover { border-color:var(--border-glow); transform:translateY(-3px); }
.cargo-route { display:flex; align-items:center; gap:12px; margin-bottom:14px; }
.cargo-flag { font-size:2rem; }
.cargo-arrow { color:var(--gold); font-size:1.4rem; font-weight:900; }
.cargo-card h4 { color:var(--white); margin-bottom:6px; }
.cargo-price { font-family:'Cinzel',serif; color:var(--gold); font-size:1.1rem; margin:10px 0; }

/* Modal overlay */
.modal-overlay { display:none; position:fixed; inset:0; background:rgba(0,0,0,0.85); z-index:9999; align-items:center; justify-content:center; padding:20px; overflow-y:auto; }
.modal-overlay.open { display:flex; }
/* max-height + overflow-y makes the modal itself scroll once its content
   (e.g. a post composer with a photo attached) is taller than the screen,
   instead of the excess — including the submit button — rendering below
   the visible viewport with no way to reach it. z-index is well above the
   mobile app bar's (9500) so the bar can never sit on top of an open modal.
   dvh (not just vh) matters here: iOS Safari's vh unit is sized for the
   viewport WITHOUT the on-screen keyboard and never shrinks when one opens,
   so a modal capped at 90vh could still end up taller than the actual
   visible area once the keyboard appears — the composer's textarea (and
   everything below it, like the Post button) would be pushed out of view,
   which is exactly the "goes blank" report. dvh tracks the real visible
   viewport and shrinks with the keyboard; vh stays as the fallback for
   browsers that don't support dvh. */
.modal { background:var(--black-card); border:1px solid var(--border); border-radius:20px; width:100%; max-width:540px; max-height:90vh; max-height:90dvh; overflow-y:auto; display:flex; flex-direction:column; padding:32px; position:relative; z-index:10000; animation:modalIn 0.2s ease; }
@keyframes modalIn { from{transform:scale(0.9);opacity:0} to{transform:scale(1);opacity:1} }
/* Submit button for composer-style modals — stays reachable at the bottom
   of the scrollable modal instead of being pushed off-screen by a photo
   preview or a long feeling/location list above it. */
.modal-submit-sticky {
  /* !important is required: modern.js's ripple-effect setup runs on every
     .btn and unconditionally sets an INLINE position:relative (so its
     ripple <span> has something to be absolute against) — an inline style
     otherwise always beats a stylesheet rule, which silently downgraded
     this button back to non-sticky. */
  position: sticky !important; bottom: -32px; margin: 12px -32px -32px; padding: 16px 32px;
  background: var(--black-card);
  border-top: 1px solid var(--border);
  z-index: 2;
}
@media (max-width: 640px) {
  .modal-submit-sticky { bottom: -20px; margin: 12px -14px -20px; padding: 14px 14px; }
}
.modal-close { position:absolute; top:16px; right:20px; background:none; border:none; color:var(--white-muted); font-size:1.4rem; cursor:pointer; }
.modal-close:hover { color:var(--gold); }

@media(max-width:1100px){ .app-layout{grid-template-columns:220px 1fr;} .sidebar-right{display:none;} }
@media(max-width:768px){ .app-layout{grid-template-columns:1fr; padding-top:72px;} .sidebar-left{display:none;} .cities-grid{grid-template-columns:repeat(2,1fr);} }

@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;600;700;900&family=Lato:wght@300;400;700&display=swap');

:root {
  --gold:        #C9A227;
  --gold-light:  #FFD700;
  --gold-dark:   #8B6914;
  --black:       #0a0a0a;
  --black-mid:   #111111;
  --black-soft:  #1a1a1a;
  --black-card:  #161616;
  --white:       #FFFFFF;
  --white-dim:   rgba(255,255,255,0.85);
  --white-muted: rgba(255,255,255,0.55);
  --border:      rgba(201,162,39,0.3);
  --border-glow: rgba(201,162,39,0.6);
  --radius:      12px;
  --transition:  0.3s ease;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
  background: var(--black);
  color: var(--white-dim);
  font-family: 'Lato', sans-serif;
  font-weight: 400;
  line-height: 1.7;
  overflow-x: hidden;
}

/* ---- TYPOGRAPHY ---- */
h1, h2, h3, h4 {
  font-family: 'Cinzel', serif;
  color: var(--white);
  line-height: 1.2;
}
h1 { font-size: clamp(2rem, 5vw, 3.8rem); }
h2 { font-size: clamp(1.6rem, 3.5vw, 2.8rem); }
h3 { font-size: clamp(1.2rem, 2.5vw, 1.8rem); }
h4 { font-size: 1.2rem; }

p { color: var(--white-muted); line-height: 1.8; }

a { color: var(--gold); text-decoration: none; transition: var(--transition); }
a:hover { color: var(--gold-light); }

.gold { color: var(--gold); }
.gold-text { background: linear-gradient(135deg, #FFD700, #C9A227, #8B6914); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }

/* ---- LAYOUT ---- */
.container { max-width: 1200px; margin: 0 auto; padding: 0 24px; }
.section { padding: 100px 0; }
.section-sm { padding: 60px 0; }

.section-header { text-align: center; margin-bottom: 60px; }
.section-header h2 { margin-bottom: 16px; }
.section-header p { max-width: 600px; margin: 0 auto; font-size: 1.1rem; }

.divider {
  display: flex; align-items: center; gap: 16px;
  margin: 16px auto 0; max-width: 300px;
}
.divider::before, .divider::after {
  content: ''; flex: 1; height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold));
}
.divider::after { background: linear-gradient(90deg, var(--gold), transparent); }
.divider span { color: var(--gold); font-size: 1.2rem; }

/* ---- NAVBAR ---- */
.navbar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 9700;
  padding: 0 24px;
  background: rgba(10,10,10,0.95);
  backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--border);
  transition: var(--transition);
}
.nav-inner {
  max-width: 1200px; margin: 0 auto;
  display: flex; align-items: center; justify-content: space-between;
  height: 72px;
}
.nav-logo { display: flex; align-items: center; gap: 12px; }
.nav-logo img { width: 48px; height: 48px; }
.nav-logo-text { font-family: 'Cinzel', serif; font-size: 1.3rem; font-weight: 700; }
.nav-logo-text span { color: var(--gold); }

.nav-links {
  display: flex; align-items: center; gap: 8px;
  list-style: none;
}
.nav-links a {
  padding: 8px 16px; border-radius: 6px;
  color: var(--white-muted); font-size: 0.9rem; font-weight: 700;
  letter-spacing: 0.5px; text-transform: uppercase;
  transition: var(--transition);
}
.nav-links a:hover, .nav-links a.active {
  color: var(--gold); background: rgba(201,162,39,0.1);
}

.nav-cta {
  background: linear-gradient(135deg, var(--gold), var(--gold-dark)) !important;
  color: var(--black) !important; border-radius: 8px !important;
  padding: 10px 20px !important; font-weight: 800 !important;
}
.nav-cta:hover { opacity: 0.9; transform: translateY(-1px); }

/* Sign In button — right corner */
.nav-signin {
  border: 1.5px solid var(--gold) !important;
  color: var(--gold) !important;
  background: transparent !important;
  border-radius: 8px !important;
  padding: 8px 18px !important;
  font-weight: 800 !important;
  font-size: 0.82rem !important;
  transition: var(--transition) !important;
}
.nav-signin:hover {
  background: rgba(201,162,39,0.15) !important;
  color: var(--white) !important;
  transform: translateY(-1px) !important;
}

/* Signed-in account avatar — picture only, no name text. A circular
   36px button so the header row stays compact on phones (the old
   avatar + "Profile" text pill overflowed into the logo). */
.nav-account {
  display: inline-flex !important; align-items: center; justify-content: center;
  width: 36px !important; height: 36px !important;
  padding: 0 !important;
  border-radius: 50% !important;
  background: transparent !important;
  border: 1.5px solid rgba(201,162,39,0.55) !important;
  box-shadow: 0 0 0 2px rgba(201,162,39,0.10);
  overflow: hidden;
  flex-shrink: 0;
  font-size: 0 !important;          /* kills any stray whitespace text node */
  transition: var(--transition) !important;
}
.nav-account:hover {
  border-color: var(--gold) !important;
  box-shadow: 0 0 0 2px rgba(201,162,39,0.22), 0 0 14px rgba(201,162,39,0.30);
  transform: none !important;
}
.nav-account img, .nav-account span { border-radius: 50%; }

.hamburger { display: none; flex-direction: column; gap: 5px; cursor: pointer; padding: 6px; border-radius: 8px; transition: var(--transition); }
.hamburger:hover { background: rgba(201,162,39,0.12); }
.hamburger span { display: block; width: 24px; height: 2px; background: var(--white-muted); border-radius: 2px; transition: var(--transition); }
.hamburger:hover span { background: var(--gold); }
/* When menu is open — spans animate gold */
.hamburger.open span { background: var(--gold); }
.hamburger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.hamburger.open span:nth-child(2) { opacity: 0; transform: scaleX(0); }
.hamburger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ---- BUTTONS ---- */
.btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 14px 32px; border-radius: 8px;
  font-family: 'Lato', sans-serif; font-size: 1rem; font-weight: 700;
  letter-spacing: 1px; text-transform: uppercase;
  cursor: pointer; border: none; transition: var(--transition);
  text-decoration: none;
}
.btn-primary {
  background: linear-gradient(135deg, var(--gold-light), var(--gold), var(--gold-dark));
  color: var(--black);
  box-shadow: 0 4px 20px rgba(201,162,39,0.35);
}
.btn-primary:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 30px rgba(201,162,39,0.5);
  color: var(--black);
}
.btn-outline {
  background: transparent;
  color: var(--gold);
  border: 2px solid var(--gold);
}
.btn-outline:hover {
  background: rgba(201,162,39,0.1);
  transform: translateY(-2px);
  color: var(--gold);
}
.btn-lg { padding: 18px 44px; font-size: 1.1rem; }

/* ---- CARDS ---- */
.card {
  background: var(--black-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 32px;
  transition: var(--transition);
}
.card:hover {
  border-color: var(--border-glow);
  transform: translateY(-4px);
  box-shadow: 0 12px 40px rgba(201,162,39,0.15);
}

/* ---- GRID ---- */
.grid-3 { display: grid; grid-template-columns: repeat(3,1fr); gap: 28px; }
.grid-2 { display: grid; grid-template-columns: repeat(2,1fr); gap: 28px; }
.grid-4 { display: grid; grid-template-columns: repeat(4,1fr); gap: 24px; }

/* ---- HERO ---- */
.hero {
  min-height: 100vh;
  background: radial-gradient(ellipse at 50% 40%, rgba(201,162,39,0.08) 0%, var(--black) 70%);
  display: flex; align-items: center;
  padding-top: 72px;
  position: relative; overflow: hidden;
}
.hero::before {
  content: '';
  position: absolute; inset: 0;
  background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23C9A227' fill-opacity='0.03'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}
.hero-content { position: relative; z-index: 2; max-width: 720px; }
.hero-badge {
  display: inline-flex; align-items: center; gap: 8px;
  background: rgba(201,162,39,0.12); border: 1px solid var(--border-glow);
  color: var(--gold); padding: 8px 18px; border-radius: 50px;
  font-size: 0.85rem; font-weight: 700; letter-spacing: 1px;
  text-transform: uppercase; margin-bottom: 28px;
}
.hero-badge span { font-size: 1rem; }
.hero h1 { margin-bottom: 24px; }
.hero p { font-size: 1.2rem; margin-bottom: 40px; max-width: 580px; }
.hero-btns { display: flex; gap: 16px; flex-wrap: wrap; }
.hero-stats {
  display: flex; gap: 40px; margin-top: 60px;
  padding-top: 40px;
  border-top: 1px solid var(--border);
}
.hero-stat h3 { font-size: 2rem; color: var(--gold); margin-bottom: 4px; }
.hero-stat p { font-size: 0.85rem; color: var(--white-muted); }
.hero-logo {
  position: absolute; right: 0; top: 50%; transform: translateY(-50%);
  width: 480px; opacity: 0.12; pointer-events: none;
}

/* ---- FEATURES ---- */
.feature-icon {
  width: 60px; height: 60px;
  background: rgba(201,162,39,0.1);
  border: 1px solid var(--border);
  border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.6rem; margin-bottom: 20px;
}
.card h3 { margin-bottom: 12px; font-size: 1.2rem; }

/* ---- PAGE HERO ---- */
.page-hero {
  padding: 140px 0 80px;
  background: linear-gradient(180deg, rgba(201,162,39,0.06) 0%, var(--black) 100%);
  text-align: center; border-bottom: 1px solid var(--border);
}
.page-hero h1 { margin-bottom: 16px; }
.breadcrumb { color: var(--white-muted); font-size: 0.9rem; margin-bottom: 16px; }
.breadcrumb a { color: var(--gold); }

/* ---- TEAM / COMMUNITY CARDS ---- */
.member-card {
  text-align: center; padding: 32px 24px;
}
.member-avatar {
  width: 80px; height: 80px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--gold), var(--gold-dark));
  display: flex; align-items: center; justify-content: center;
  font-size: 1.8rem; margin: 0 auto 16px; color: var(--black);
  font-weight: 900; font-family: 'Cinzel', serif;
  border: 3px solid var(--border-glow);
}
.member-card h4 { color: var(--white); margin-bottom: 4px; }
.member-card span { font-size: 0.85rem; color: var(--gold); }

/* ---- BUSINESS ---- */
.biz-card { display: flex; gap: 20px; align-items: flex-start; }
.biz-icon {
  min-width: 52px; height: 52px;
  background: rgba(201,162,39,0.1); border: 1px solid var(--border);
  border-radius: 10px; display: flex; align-items: center; justify-content: center;
  font-size: 1.4rem;
}
.biz-info h4 { color: var(--white); margin-bottom: 4px; }
.biz-info p { font-size: 0.9rem; }
.badge {
  display: inline-block; padding: 3px 10px; border-radius: 20px;
  font-size: 0.75rem; font-weight: 700; background: rgba(201,162,39,0.15);
  color: var(--gold); border: 1px solid var(--border); margin-top: 8px;
}

/* ---- FORM ---- */
.form-group { margin-bottom: 20px; }
.form-group label {
  display: block; margin-bottom: 8px;
  font-size: 0.9rem; font-weight: 700; color: var(--white-dim);
  letter-spacing: 0.5px; text-transform: uppercase;
}
.form-group input,
.form-group textarea,
.form-group select {
  width: 100%; padding: 14px 18px;
  background: var(--black-soft); border: 1px solid var(--border);
  border-radius: 8px; color: var(--white);
  font-family: 'Lato', sans-serif; font-size: 1rem;
  transition: var(--transition); outline: none;
}
.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus {
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(201,162,39,0.15);
}
.form-group textarea { resize: vertical; min-height: 140px; }

/* ---- FOOTER ---- */
.footer {
  background: var(--black-mid);
  border-top: 1px solid var(--border);
  padding: 60px 0 30px;
}
.footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 40px; margin-bottom: 50px; }
.footer-brand .nav-logo { margin-bottom: 16px; }
.footer-brand p { font-size: 0.95rem; line-height: 1.8; }
.footer-col h4 {
  font-family: 'Cinzel', serif; font-size: 0.95rem;
  color: var(--gold); letter-spacing: 1px; margin-bottom: 20px;
  text-transform: uppercase;
}
.footer-col ul { list-style: none; }
.footer-col ul li { margin-bottom: 10px; }
.footer-col ul li a { color: var(--white-muted); font-size: 0.9rem; }
.footer-col ul li a:hover { color: var(--gold); padding-left: 4px; }
.footer-bottom {
  border-top: 1px solid var(--border); padding-top: 28px;
  display: flex; justify-content: space-between; align-items: center;
  flex-wrap: wrap; gap: 12px;
}
.footer-bottom p { font-size: 0.85rem; color: var(--white-muted); }
.social-links { display: flex; gap: 12px; }
.social-link {
  width: 38px; height: 38px;
  background: rgba(201,162,39,0.1); border: 1px solid var(--border);
  border-radius: 8px; display: flex; align-items: center; justify-content: center;
  color: var(--gold); font-size: 1rem; transition: var(--transition);
}
.social-link:hover {
  background: var(--gold); color: var(--black); transform: translateY(-2px);
}

/* ---- ANNOUNCEMENT BAR ---- */
.top-bar {
  background: linear-gradient(135deg, var(--gold-dark), var(--gold), var(--gold-dark));
  text-align: center; padding: 10px 16px;
  font-size: 0.85rem; font-weight: 700;
  color: var(--black); letter-spacing: 0.5px;
}
.top-bar a { color: var(--black); text-decoration: underline; }

/* ---- RESPONSIVE ---- */
@media (max-width: 1024px) {
  .grid-4 { grid-template-columns: repeat(2,1fr); }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .hero-logo { width: 320px; opacity: 0.08; }
}
@media (max-width: 768px) {
  .section { padding: 70px 0; }
  .grid-3, .grid-2 { grid-template-columns: 1fr; }
  .grid-4 { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; }
  .hero-stats { flex-wrap: wrap; gap: 24px; }
  .nav-links { display: none; }
  .hamburger { display: flex; flex-shrink: 0; margin-left: auto; z-index: 9601; position: relative; }
  /* Hide lang switcher from nav bar on mobile — too wide, pushes hamburger off screen */
  #langSwitcher { display: none; }
  /* Show lang switcher at the bottom of the mobile open menu */
  #navLinks.open ~ #langSwitcher {
    display: flex;
    position: fixed;
    bottom: 28px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 9601;
    background: rgba(15,15,15,0.97);
    padding: 10px 18px;
    border-radius: 30px;
    border: 1px solid var(--gold);
    gap: 8px;
    box-shadow: 0 4px 24px rgba(0,0,0,0.5);
  }
  #navLinks.open ~ #langSwitcher .lang-btn { font-size: 0.75rem; padding: 6px 12px; }
  /* Mobile logo — tighter text */
  .nav-logo { gap: 8px; }
  .nav-logo img { width: 36px !important; height: 36px !important; }
  .nav-logo-text { font-size: 1rem; letter-spacing: 1px; }
  /* A backdrop-filter/transform on an ancestor makes fixed-position
     descendants size themselves relative to THAT ancestor instead of the
     viewport (CSS containing-block rule). .navbar has backdrop-filter for
     its glass effect, which was squeezing this fixed menu into the
     navbar's own ~72px-tall box instead of stretching down the screen.
     Drop the filter/transform on .navbar while the menu is open so this
     element's fixed positioning resolves against the real viewport. */
  .navbar:has(.nav-links.open) {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    transform: none !important;
  }
  .nav-links.open {
    display: flex; flex-direction: column;
    position: fixed; top: 72px; left: 0; right: 0; bottom: 0;
    background: rgba(5,5,5,0.98);
    backdrop-filter: blur(20px);
    padding: 24px 20px;
    border-top: 2px solid var(--gold);
    z-index: 9600; gap: 4px;
    overflow-y: auto;
  }
  .nav-links.open li a {
    display: block; padding: 14px 18px;
    font-size: 1rem; border-radius: 10px;
    border-left: 3px solid transparent;
    transition: var(--transition);
  }
  .nav-links.open li a:hover,
  .nav-links.open li a.active {
    border-left-color: var(--gold);
    background: rgba(201,162,39,0.08);
    color: var(--white) !important;
    padding-left: 24px;
  }
  .hero-logo { display: none; }
  .hero-btns { flex-direction: column; max-width: 300px; }
  .footer-bottom { flex-direction: column; text-align: center; }
  /* Profile mobile */
  .profile-cover { height: 160px !important; }
  .profile-top { margin-top: -44px !important; flex-wrap: wrap; gap: 12px; }
  .profile-info h2 { font-size: 1.15rem; }
  .profile-info .bio { font-size: 0.83rem; }
  .profile-stats-row { overflow-x: auto; flex-wrap: nowrap !important; gap: 12px; -webkit-overflow-scrolling: touch; scrollbar-width: none; padding-bottom: 8px; }
  .profile-stats-row::-webkit-scrollbar { display: none; }
  .profile-stat { min-width: 54px; flex-shrink: 0; }
  .profile-tabs { overflow-x: auto; scrollbar-width: none; gap: 0; }
  .profile-tabs::-webkit-scrollbar { display: none; }
  .ptab { padding: 10px 12px !important; font-size: 0.78rem !important; white-space: nowrap; }
  .profile-body { padding: 0 10px !important; }
  /* Feed mobile */
  .post-btn { font-size: 0.78rem; padding: 8px 5px; gap: 4px; }
  .post-actions { gap: 4px; }
  .post-action-btn { padding: 6px 9px; font-size: 0.76rem; }
  /* Nav sign in smaller */
  .nav-signin { padding: 7px 12px !important; font-size: 0.75rem !important; }
}
@media(max-width: 480px) {
  .profile-cover { height: 130px !important; }
  .profile-top { margin-top: -36px !important; gap: 8px; }
  .profile-info h2 { font-size: 1rem; }
  .modal { padding: 20px 14px; }
  .hero p { font-size: 1rem; }
  .post-header { padding: 12px 12px 8px; }
  .post-body { padding: 0 12px 10px; }
  .post-stats { padding: 6px 12px; gap: 10px; }
  .post-actions-bar { gap: 0; }
  .post-btn { font-size: 0.76rem; padding: 8px 4px; }
  .btn { padding: 11px 18px; font-size: 0.85rem; }
}

/* ═══════════════════════════════════════
   BOTTOM MOBILE NAVIGATION
═══════════════════════════════════════ */
.bottom-nav {
  display: none;
  position: fixed;
  bottom: 0; left: 0; right: 0;
  z-index: 9500;
  background: rgba(8,8,8,0.97);
  border-top: 1px solid rgba(201,162,39,0.3);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
.bottom-nav-inner {
  display: flex;
  align-items: flex-end;
  justify-content: space-around;
  padding: 6px 0 10px;
  max-width: 520px;
  margin: 0 auto;
}
.bnav-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  flex: 1;
  padding: 4px 6px;
  color: rgba(255,255,255,0.4);
  text-decoration: none;
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.3px;
  transition: color 0.2s;
  cursor: pointer;
}
.bnav-item .bnav-icon {
  font-size: 1.35rem;
  line-height: 1;
  display: block;
}
.bnav-item.active { color: var(--gold); }
.bnav-item:hover { color: rgba(201,162,39,0.8); }

/* Center FEED button */
.bnav-center {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  flex: 1;
  text-decoration: none;
  cursor: pointer;
  padding-bottom: 2px;
}
.bnav-center-disc {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: linear-gradient(135deg, #FFD700, var(--gold), #8B6914);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.6rem;
  box-shadow: 0 4px 20px rgba(201,162,39,0.5), 0 0 0 3px rgba(201,162,39,0.15);
  margin-top: -22px;
  transition: transform 0.2s, box-shadow 0.2s;
}
.bnav-center:hover .bnav-center-disc,
.bnav-center.active .bnav-center-disc {
  transform: scale(1.1);
  box-shadow: 0 6px 28px rgba(201,162,39,0.7), 0 0 0 4px rgba(201,162,39,0.25);
}
.bnav-center-lbl {
  font-size: 0.6rem;
  font-weight: 700;
  color: var(--gold);
  letter-spacing: 0.5px;
}

@media (max-width: 768px) {
  .bottom-nav { display: block; }
  .app-layout { padding-bottom: 80px !important; }
  .profile-body { padding-bottom: 80px !important; }
  body { padding-bottom: 0; overflow-x: hidden; }
  #toast { bottom: 82px !important; }
  /* Tighter navbar height on mobile */
  .nav-inner { height: 60px; }
  /* Cover starts right below navbar */
  .profile-cover { margin-top: 60px !important; }
  /* Post cards fit mobile */
  .post-card { border-radius: 10px; margin-bottom: 10px; }
  .post-header { padding: 12px 14px 8px; gap: 10px; }
  .post-body { padding: 0 14px 10px; }
  .post-body p { font-size: 0.88rem; line-height: 1.6; }
  .post-body img { max-height: 300px; border-radius: 8px; }
  .post-image { max-height: 280px; }
  .post-stats { padding: 6px 14px; gap: 8px; font-size: 0.78rem; }
  .post-btn { font-size: 0.78rem; padding: 8px 4px; gap: 3px; }
  .stories-bar { gap: 10px; padding-bottom: 12px; }
  .story-ring { width: 52px; height: 52px; }
  .modal { max-height: 90vh; overflow-y: auto; border-radius: 16px 16px 0 0; margin: auto 0 0; max-width: 100%; }
  .modal-overlay { align-items: flex-end; padding: 0; }
}

/* ═══════════════════════════════════════
   REACTION SYSTEM
═══════════════════════════════════════ */
.reaction-wrap {
  position: relative;
  display: inline-flex;
  flex: 1;
}
.reaction-btn-trigger {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 10px 6px;
  color: var(--white-muted);
  font-size: 0.85rem;
  font-weight: 700;
  cursor: pointer;
  border-radius: 4px;
  transition: all 0.2s;
  user-select: none;
  -webkit-user-select: none;
}
.reaction-btn-trigger:hover { color: #FF6B6B; background: rgba(255,107,107,0.06); }
.reaction-btn-trigger.reacted-heart  { color: #FF6B6B; }
.reaction-btn-trigger.reacted-superlike { color: #4fc3f7; }
.reaction-btn-trigger.reacted-funny  { color: #FFD700; }
.reaction-btn-trigger.reacted-sad    { color: #90caf9; }

.reaction-picker {
  display: none;
  position: absolute;
  bottom: calc(100% + 10px);
  left: 50%;
  transform: translateX(-50%);
  background: var(--black-card);
  border: 1px solid rgba(201,162,39,0.4);
  border-radius: 50px;
  padding: 8px 14px;
  gap: 6px;
  z-index: 800;
  box-shadow: 0 8px 40px rgba(0,0,0,0.8);
  white-space: nowrap;
  align-items: center;
  animation: pickerIn 0.18s ease;
}
.reaction-picker.open { display: flex; }
@keyframes pickerIn {
  from { transform: translateX(-50%) scale(0.6); opacity: 0; }
  to   { transform: translateX(-50%) scale(1); opacity: 1; }
}
.rp-opt {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  cursor: pointer;
  transition: transform 0.15s;
  padding: 2px 4px;
}
.rp-opt:hover { transform: scale(1.4); }
.rp-opt .rp-emoji { font-size: 1.7rem; line-height: 1; }
.rp-opt .rp-label {
  font-size: 0.52rem;
  color: var(--white-muted);
  font-family: 'Lato', sans-serif;
  font-weight: 700;
  letter-spacing: 0.2px;
  white-space: nowrap;
}

/* ═══════════════════════════════════════
   POST MENU DROPDOWN
═══════════════════════════════════════ */
.post-menu-wrap {
  position: relative;
  margin-left: auto;
}
.post-menu-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  color: var(--white-muted);
  cursor: pointer;
  font-size: 1.25rem;
  transition: all 0.2s;
  user-select: none;
  line-height: 1;
}
.post-menu-icon:hover { background: rgba(201,162,39,0.1); color: var(--gold); }
.post-menu-dropdown {
  display: none;
  position: absolute;
  top: calc(100% + 4px);
  right: 0;
  background: var(--black-card);
  border: 1px solid rgba(201,162,39,0.25);
  border-radius: 12px;
  min-width: 168px;
  z-index: 900;
  box-shadow: 0 8px 36px rgba(0,0,0,0.75);
  overflow: hidden;
  animation: menuDropIn 0.15s ease;
}
.post-menu-dropdown.open { display: block; }
@keyframes menuDropIn {
  from { transform: scale(0.88) translateY(-6px); opacity: 0; }
  to   { transform: scale(1) translateY(0); opacity: 1; }
}
.pm-opt {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 16px;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--white-muted);
  cursor: pointer;
  transition: all 0.15s;
  border-bottom: 1px solid rgba(255,255,255,0.04);
}
.pm-opt:last-child { border-bottom: none; }
.pm-opt:hover { background: rgba(201,162,39,0.08); color: var(--white); }
.pm-opt.pm-danger:hover { background: rgba(255,50,50,0.08); color: #ff5555; }
.pm-opt .pm-icon { font-size: 1rem; width: 18px; text-align: center; flex-shrink: 0; }
.pm-privacy-row {
  padding: 4px 16px 10px 44px;
  display: flex;
  gap: 6px;
  border-bottom: 1px solid rgba(255,255,255,0.04);
}
.pm-privacy-btn {
  background: rgba(201,162,39,0.06);
  border: 1px solid var(--border);
  color: var(--white-muted);
  padding: 3px 10px;
  border-radius: 20px;
  font-size: 0.72rem;
  cursor: pointer;
  font-weight: 600;
  transition: all 0.2s;
  font-family: 'Lato', sans-serif;
}
.pm-privacy-btn:hover, .pm-privacy-btn.active {
  background: rgba(201,162,39,0.18);
  border-color: var(--gold);
  color: var(--gold);
}

/* ═══════════════════════════════════════
   SHARE PREVIEW CARD (WhatsApp / Telegram style)
═══════════════════════════════════════ */
.share-prev-card {
  background: linear-gradient(135deg, rgba(22,16,0,0.98), rgba(10,8,0,0.99));
  border: 1px solid rgba(201,162,39,0.3);
  border-radius: 14px;
  overflow: hidden;
  margin: 14px 0;
}
.share-prev-img {
  width: 100%;
  max-height: 190px;
  object-fit: cover;
  display: block;
}
.share-prev-body {
  padding: 12px 14px;
  display: flex;
  gap: 10px;
  align-items: flex-start;
}
.share-prev-av {
  width: 38px; height: 38px;
  border-radius: 50%;
  background: linear-gradient(135deg,var(--gold),#8B6914);
  display: flex; align-items: center; justify-content: center;
  font-weight: 900; color: #111; font-size: 1rem;
  flex-shrink: 0; overflow: hidden;
}
.share-prev-av img { width:100%;height:100%;object-fit:cover; }
.share-prev-info { flex: 1; min-width: 0; }
.share-prev-name { font-weight: 700; font-size: 0.9rem; color: var(--white); }
.share-prev-city { font-size: 0.73rem; color: var(--gold); margin-top: 1px; }
.share-prev-text {
  font-size: 0.82rem;
  color: rgba(255,255,255,0.6);
  margin-top: 5px;
  line-height: 1.4;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.share-prev-brand {
  padding: 8px 14px;
  border-top: 1px solid rgba(201,162,39,0.15);
  font-size: 0.68rem;
  font-weight: 800;
  color: var(--gold);
  letter-spacing: 1px;
  display: flex;
  align-items: center;
  gap: 6px;
  text-transform: uppercase;
}
.share-channel-btns {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 4px;
}
.share-ch-btn {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 13px 18px;
  border-radius: 12px;
  font-size: 0.9rem;
  font-weight: 700;
  cursor: pointer;
  border: 1px solid var(--border);
  transition: all 0.2s;
  color: var(--white);
  background: var(--black-soft);
}
.share-ch-btn:hover { border-color: var(--gold); background: rgba(201,162,39,0.08); }
.share-ch-btn .ch-icon { font-size: 1.3rem; width: 24px; text-align: center; }

/* ═══════════════════════════════════════
   MOBILE PROFILE FIXES
═══════════════════════════════════════ */
@media (max-width: 768px) {
  .profile-top {
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    gap: 12px !important;
    padding: 18px 14px 16px !important;
  }
  .profile-pic-wrap { margin-top: -48px !important; }
  .profile-info { min-width: 0 !important; width: 100%; }
  .profile-info h2 { font-size: 1.15rem !important; }
  /* Buttons centered on mobile */
  .profile-top > div:last-child {
    width: 100%;
    align-items: center !important;
  }
  .profile-top > div:last-child > div {
    justify-content: center;
    flex-wrap: wrap;
  }
  /* Tab bar scrollable */
  .profile-tabs { overflow-x: auto !important; scrollbar-width: none; }
  .profile-tabs::-webkit-scrollbar { display: none; }
  /* posts grid single column */
  .posts-grid-layout { grid-template-columns: 1fr !important; }
  /* Jobs columns single column on mobile */
  .jobs-columns { grid-template-columns: 1fr !important; }
}

/* ═══════════════════════════════════════
   COMPREHENSIVE MOBILE + DESKTOP FIXES
   v2.0 – Facebook-style mobile UI
═══════════════════════════════════════ */

/* ── 1. ALWAYS hide bottom nav on desktop ── */
@media (min-width: 769px) {
  .bottom-nav { display: none !important; }
}

/* ── 2. PROFILE – Facebook-style mobile layout ── */
@media (max-width: 768px) {
  /* Cover taller on mobile */
  .profile-cover { height: 200px !important; }

  /* Profile-top: left-aligned like Facebook */
  .profile-top {
    flex-direction: column !important;
    align-items: flex-start !important;
    text-align: left !important;
    gap: 10px !important;
    padding: 8px 14px 16px !important;
    margin-top: 0 !important;
    margin-bottom: 10px !important;
  }

  /* Profile pic – overlaps cover, left offset */
  .profile-pic-wrap {
    margin-top: -52px !important;
    margin-left: 12px !important;
    width: 88px !important;
    height: 88px !important;
    border: 3px solid #111 !important;
    border-radius: 50% !important;
  }

  /* Profile info – full width, left-aligned text */
  .profile-info {
    width: 100% !important;
    min-width: 0 !important;
    padding: 0 2px !important;
  }
  .profile-info h2 { font-size: 1.1rem !important; margin-bottom: 2px !important; }

  /* Action buttons row – slim, modern */
  .profile-top > div:last-child {
    width: 100%;
    align-items: flex-start !important;
    gap: 6px !important;
  }
  #ownProfileBtns { justify-content: flex-start !important; }
  #ownProfileBtns .btn,
  #viewerProfileBtns .btn,
  #followBtn {
    padding: 7px 16px !important;
    font-size: 0.8rem !important;
    border-radius: 8px !important;
  }

  /* Job buttons – pill style, compact */
  .job-post-btn {
    padding: 6px 13px !important;
    font-size: 0.76rem !important;
    border-radius: 20px !important;
  }

  /* Profile stats bar – fit 5 items */
  .profile-stats-row { margin: 8px 0 !important; }
  .profile-stat { padding: 10px 4px !important; }
  .profile-stat .num { font-size: 1.05rem !important; }
  .profile-stat .lbl { font-size: 0.6rem !important; }

  /* Tabs – compact on mobile */
  .ptab { padding: 8px 10px !important; font-size: 0.74rem !important; }

  /* Posts grid – FORCE single column (overrides inline style) */
  .posts-grid-layout {
    display: block !important;
    grid-template-columns: unset !important;
  }
  /* Hide left sidebar on mobile — show only posts */
  .posts-grid-layout > div:first-child { display: none !important; }
  .posts-grid-layout > div:last-child { width: 100% !important; }
}

/* ── 3. MODERN POST CARD ── */
.post-card {
  border-radius: 14px !important;
  border: 1px solid rgba(201,162,39,0.12) !important;
  background: #161616 !important;
  box-shadow: 0 2px 12px rgba(0,0,0,0.3) !important;
  margin-bottom: 14px !important;
  overflow: hidden;
}
.post-header {
  padding: 14px 16px 10px !important;
  gap: 11px !important;
  align-items: flex-start !important;
}
.post-meta { display: flex; flex-direction: column; gap: 2px; }
.post-meta a { font-size: 0.92rem !important; font-weight: 700 !important; }
.post-time {
  font-size: 0.74rem !important;
  color: var(--white-muted) !important;
  line-height: 1.4 !important;
}
.post-body { padding: 0 16px 10px !important; }
.post-body p { font-size: 0.9rem !important; line-height: 1.65 !important; }
.post-body img {
  width: 100% !important;
  max-height: 360px !important;
  object-fit: cover !important;
  border-radius: 10px !important;
  margin-top: 10px !important;
}
.post-stats {
  padding: 6px 16px !important;
  font-size: 0.78rem !important;
  color: var(--white-muted) !important;
  border-top: 1px solid rgba(255,255,255,0.05) !important;
  display: flex !important;
  gap: 12px !important;
  align-items: center !important;
}
.post-actions-bar {
  display: flex !important;
  border-top: 1px solid rgba(255,255,255,0.06) !important;
  padding: 2px 0 !important;
}
.reaction-btn-trigger, .post-btn {
  flex: 1 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  padding: 9px 4px !important;
  font-size: 0.82rem !important;
  font-weight: 600 !important;
  color: var(--white-muted) !important;
  cursor: pointer !important;
  border-radius: 6px !important;
  transition: background 0.2s, color 0.2s !important;
  background: none !important;
  border: none !important;
}
.reaction-btn-trigger:hover, .post-btn:hover {
  background: rgba(255,255,255,0.06) !important;
  color: var(--gold) !important;
}

/* ── 4. AUTHOR AVATAR IN POST (circle, gold border) ── */
.post-av-circle {
  width: 42px !important;
  height: 42px !important;
  min-width: 42px !important;
  border-radius: 50% !important;
  background: linear-gradient(135deg, var(--gold), #8b6914) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-weight: 900 !important;
  color: #111 !important;
  font-size: 1rem !important;
  overflow: hidden !important;
  border: 2px solid rgba(201,162,39,0.4) !important;
}
.post-av-circle img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }

/* ── 5. BOTTOM NAV – fix text wrapping on small screens ── */
.bottom-nav-inner {
  padding: 0 4px !important;
  gap: 0 !important;
}
.bnav-item {
  flex: 1 !important;
  min-width: 0 !important;
  padding: 6px 2px 8px !important;
}
.bnav-icon { font-size: 1.35rem !important; }
.bnav-item > span:last-child { font-size: 0.6rem !important; line-height: 1.1 !important; }
.bnav-center {
  flex: 1.2 !important;
  min-width: 0 !important;
}
.bnav-center-disc {
  width: 48px !important;
  height: 48px !important;
  margin-top: -18px !important;
  border: 3px solid #111 !important;
}
.bnav-center-disc img { width: 34px !important; height: 34px !important; }

/* ── 6. FEED – desktop sidebar cleanup ── */
@media (min-width: 769px) {
  .sidebar-left { display: block; }
}

/* ── 7. PROFILE WALL – cover image display improvement ── */
.profile-cover {
  background-size: cover !important;
  background-position: center top !important;
  background-repeat: no-repeat !important;
}

/* ── 8. POSTS GRID LAYOUT (profile page) ── */
.posts-grid-layout {
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: 20px;
  align-items: start;
}
@media (max-width: 768px) {
  .posts-grid-layout {
    display: block !important;
  }
  /* Hide sidebar on mobile — full width posts */
  .posts-grid-layout > div:first-child { display: none !important; }
  .posts-grid-layout > div:last-child { width: 100% !important; }
}

/* ── 9. BOTTOM NAV – prevent any wrapping on tiny screens ── */
@media (max-width: 768px) {
  .bottom-nav-inner {
    flex-wrap: nowrap !important;
    overflow: hidden !important;
  }
  .bnav-item span, .bnav-center-lbl {
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    max-width: 52px !important;
  }
  /* Ensure FEED center label stays visible */
  .bnav-center-lbl {
    font-size: 0.58rem !important;
    letter-spacing: 0.5px !important;
  }
}

/* ── 10. PROFILE – "Edit Cover" button positioning ── */
#coverEditBtn {
  position: absolute !important;
  bottom: 12px !important;
  right: 14px !important;
  z-index: 5 !important;
  background: rgba(0,0,0,0.6) !important;
  border: 1px solid rgba(201,162,39,0.5) !important;
  color: var(--white) !important;
  padding: 6px 12px !important;
  font-size: 0.75rem !important;
  border-radius: 8px !important;
  cursor: pointer !important;
}

/* ═══════════════════════════════════════════════════════════
   ▼  MODERN POLISH 2026 — glassmorphism, unified buttons,
      smoother animations, mobile/tablet refinements
   ═══════════════════════════════════════════════════════════ */

/* ── Glassmorphism cards ── */
.card,
.post-card,
.modal,
.price-card,
.culture-box,
.feature-icon-card {
  background: linear-gradient(180deg, rgba(20,20,20,0.85), rgba(10,10,10,0.92)) !important;
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  border: 1px solid rgba(201,162,39,0.18) !important;
  transition: transform .28s cubic-bezier(.2,.8,.2,1), border-color .28s, box-shadow .28s !important;
}
.card:hover,
.post-card:hover,
.price-card:hover {
  transform: translateY(-3px);
  border-color: rgba(201,162,39,0.45) !important;
  box-shadow: 0 12px 40px rgba(0,0,0,0.5), 0 0 0 1px rgba(201,162,39,0.12);
}

/* ── Smoother default transitions on every interactive thing ── */
a, button, .btn, .pill, .chip, .bnav-item, .bnav-center,
.story-ring, input, select, textarea {
  transition: all .25s cubic-bezier(.2,.8,.2,1) !important;
}

/* ── Modern rounded buttons (premium) ── */
.btn {
  border-radius: 12px !important;
  letter-spacing: 0.3px;
}
.btn-primary {
  background: linear-gradient(135deg, #FFD56B 0%, var(--gold) 45%, #8B6914 100%) !important;
  color: #0a0a0a !important;
  border: none !important;
  box-shadow: 0 6px 18px rgba(201,162,39,0.35), inset 0 1px 0 rgba(255,255,255,0.25);
}
.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 28px rgba(201,162,39,0.5), inset 0 1px 0 rgba(255,255,255,0.3);
  filter: brightness(1.06);
}
.btn-outline {
  background: rgba(255,255,255,0.02) !important;
  border: 1px solid rgba(201,162,39,0.5) !important;
  color: var(--white) !important;
  backdrop-filter: blur(8px);
}
.btn-outline:hover {
  background: rgba(201,162,39,0.08) !important;
  border-color: var(--gold) !important;
  transform: translateY(-2px);
}

/* ═══ UNIFIED FOLLOW / UNFOLLOW / NOTIFICATION BUTTONS ═══ */
/* Use class="il-follow" for follow, "il-following" for unfollow state, "il-notif" for bell */
.il-follow,
.il-following,
.il-notif,
.btn-follow,
.btn-unfollow,
.btn-notification {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 8px 18px;
  border-radius: 999px;
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.3px;
  cursor: pointer;
  border: 1px solid transparent;
  text-decoration: none;
  white-space: nowrap;
  transition: all .25s cubic-bezier(.2,.8,.2,1) !important;
  font-family: inherit;
  line-height: 1;
  min-height: 36px;
}
.il-follow,
.btn-follow {
  background: linear-gradient(135deg, #FFD56B, var(--gold), #8B6914);
  color: #0a0a0a;
  box-shadow: 0 4px 14px rgba(201,162,39,0.35);
}
.il-follow:hover,
.btn-follow:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 22px rgba(201,162,39,0.5);
  filter: brightness(1.06);
}
.il-following,
.btn-unfollow {
  background: rgba(255,255,255,0.04);
  border-color: rgba(201,162,39,0.4);
  color: var(--gold);
  backdrop-filter: blur(8px);
}
.il-following:hover,
.btn-unfollow:hover {
  background: rgba(220,53,69,0.12);
  border-color: rgba(220,53,69,0.5);
  color: #ff6b7a;
}
.il-following:hover::after,
.btn-unfollow:hover::after { content: ' Unfollow'; }
.il-following::after,
.btn-unfollow::after { content: ''; }

/* Notification bell — ghost icon button with optional dot badge */
.il-notif,
.btn-notification {
  width: 38px;
  height: 38px;
  min-height: 38px;
  padding: 0;
  border-radius: 50%;
  background: rgba(255,255,255,0.04);
  border-color: rgba(201,162,39,0.25);
  color: var(--white);
  position: relative;
  font-size: 1rem;
}
.il-notif:hover,
.btn-notification:hover {
  background: rgba(201,162,39,0.12);
  border-color: var(--gold);
  color: var(--gold);
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(201,162,39,0.3);
}
/* Subscribed ("notify me about this member") state — solid gold fill, no
   count, since this toggle never has a number to show. Distinct from the
   red [data-badge] count badge below, which is for the header bell only. */
.il-notif.active,
.btn-notification.active {
  background: var(--gold);
  border-color: var(--gold);
  color: var(--black);
}
.il-notif.active:hover,
.btn-notification.active:hover {
  background: var(--gold-light, var(--gold));
  color: var(--black);
}
.il-notif[data-badge]::after,
.btn-notification[data-badge]::after {
  content: attr(data-badge);
  position: absolute;
  top: -3px;
  right: -3px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  background: linear-gradient(135deg, #ff4757, #c0392b);
  color: #fff;
  font-size: 0.62rem;
  font-weight: 800;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid #0a0a0a;
}

/* ── Bottom nav — modern polish (bigger touch, animated active) ── */
.bottom-nav {
  background: rgba(8,8,8,0.85) !important;
  backdrop-filter: blur(24px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(24px) saturate(180%) !important;
  border-top: 1px solid rgba(201,162,39,0.22) !important;
  box-shadow: 0 -8px 30px rgba(0,0,0,0.6);
}
.bnav-item {
  position: relative;
  transition: color .25s, transform .2s !important;
}
.bnav-item.active {
  color: var(--gold) !important;
}
.bnav-item.active::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 26px;
  height: 3px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
  border-radius: 0 0 4px 4px;
}
.bnav-item:active { transform: scale(0.92); }
.bnav-center-disc {
  background: linear-gradient(135deg, #FFE38A 0%, #FFD56B 30%, var(--gold) 60%, #8B6914 100%) !important;
  box-shadow: 0 6px 24px rgba(201,162,39,0.55), 0 0 0 4px rgba(201,162,39,0.12), inset 0 1px 0 rgba(255,255,255,0.4) !important;
  animation: bnavPulse 3s ease-in-out infinite;
}
@keyframes bnavPulse {
  0%, 100% { box-shadow: 0 6px 24px rgba(201,162,39,0.55), 0 0 0 4px rgba(201,162,39,0.12), inset 0 1px 0 rgba(255,255,255,0.4); }
  50%      { box-shadow: 0 8px 32px rgba(201,162,39,0.75), 0 0 0 6px rgba(201,162,39,0.18), inset 0 1px 0 rgba(255,255,255,0.5); }
}
.bnav-center:active .bnav-center-disc { transform: scale(0.94) !important; }

/* ── Inputs — modern feel ── */
input[type="text"], input[type="email"], input[type="password"],
input[type="search"], input[type="tel"], textarea, select {
  border-radius: 12px !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
  background: rgba(255,255,255,0.03) !important;
  color: var(--white);
  transition: border-color .25s, box-shadow .25s, background .25s !important;
}
input:focus, textarea:focus, select:focus {
  outline: none !important;
  border-color: rgba(201,162,39,0.6) !important;
  background: rgba(255,255,255,0.05) !important;
  box-shadow: 0 0 0 3px rgba(201,162,39,0.15) !important;
}

/* ── Tablet polish ── */
@media (min-width: 481px) and (max-width: 1024px) {
  .container { padding: 0 24px; }
  .grid-3 { grid-template-columns: repeat(2, 1fr) !important; gap: 18px; }
  .nav-links { gap: 18px; }
  .post-card { border-radius: 14px; }
  .bnav-center-disc { width: 56px; height: 56px; }
}

/* ── Mobile polish (≤480) ── */
@media (max-width: 480px) {
  body { font-size: 0.93rem; }
  .btn { border-radius: 12px !important; }
  .post-card { border-radius: 14px !important; margin-bottom: 12px; }
  .il-follow, .il-following, .btn-follow, .btn-unfollow {
    padding: 7px 14px;
    font-size: 0.78rem;
    min-height: 34px;
  }
  .il-notif, .btn-notification { width: 36px; height: 36px; min-height: 36px; }
  .bnav-center-disc { width: 54px !important; height: 54px !important; }
}

/* ── Subtle scroll-in animation for cards ── */
@keyframes ilFadeUp {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}
.card, .post-card, .price-card {
  animation: ilFadeUp .55s cubic-bezier(.2,.8,.2,1) both;
}

/* ── Page wrapper bottom-padding when bottom nav is shown ── */
@media (max-width: 768px) {
  body { padding-bottom: 84px !important; }
}
/* ▲ END MODERN POLISH 2026 ▲ */

/* ═══════════════════════════════════════════════════════════
   ▼  MODERN POLISH 2026 — glassmorphism, unified buttons,
      smoother animations, mobile/tablet refinements
   ═══════════════════════════════════════════════════════════ */

/* ── Glassmorphism cards ── */
.card,
.post-card,
.modal,
.price-card,
.culture-box {
  background: linear-gradient(180deg, rgba(20,20,20,0.85), rgba(10,10,10,0.92)) !important;
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  border: 1px solid rgba(201,162,39,0.18) !important;
  transition: transform .28s cubic-bezier(.2,.8,.2,1), border-color .28s, box-shadow .28s !important;
}
.card:hover,
.post-card:hover,
.price-card:hover {
  transform: translateY(-3px);
  border-color: rgba(201,162,39,0.45) !important;
  box-shadow: 0 12px 40px rgba(0,0,0,0.5), 0 0 0 1px rgba(201,162,39,0.12);
}

/* ── Smoother default transitions ── */
a, button, .btn, .pill, .chip, .bnav-item, .bnav-center,
.story-ring, input, select, textarea {
  transition: all .25s cubic-bezier(.2,.8,.2,1) !important;
}

/* ── Modern rounded buttons (premium) ── */
.btn { border-radius: 12px !important; letter-spacing: 0.3px; }
.btn-primary {
  background: linear-gradient(135deg, #FFD56B 0%, var(--gold) 45%, #8B6914 100%) !important;
  color: #0a0a0a !important;
  border: none !important;
  box-shadow: 0 6px 18px rgba(201,162,39,0.35), inset 0 1px 0 rgba(255,255,255,0.25);
}
.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 28px rgba(201,162,39,0.5), inset 0 1px 0 rgba(255,255,255,0.3);
  filter: brightness(1.06);
}
.btn-outline {
  background: rgba(255,255,255,0.02) !important;
  border: 1px solid rgba(201,162,39,0.5) !important;
  color: var(--white) !important;
  backdrop-filter: blur(8px);
}
.btn-outline:hover {
  background: rgba(201,162,39,0.08) !important;
  border-color: var(--gold) !important;
  transform: translateY(-2px);
}

/* ═══ UNIFIED FOLLOW / UNFOLLOW / NOTIFICATION BUTTONS ═══ */
.il-follow, .il-following, .il-notif,
.btn-follow, .btn-unfollow, .btn-notification {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 8px 18px;
  border-radius: 999px;
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.3px;
  cursor: pointer;
  border: 1px solid transparent;
  text-decoration: none;
  white-space: nowrap;
  transition: all .25s cubic-bezier(.2,.8,.2,1) !important;
  font-family: inherit;
  line-height: 1;
  min-height: 36px;
}
.il-follow, .btn-follow {
  background: linear-gradient(135deg, #FFD56B, var(--gold), #8B6914);
  color: #0a0a0a;
  box-shadow: 0 4px 14px rgba(201,162,39,0.35);
}
.il-follow:hover, .btn-follow:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 22px rgba(201,162,39,0.5);
  filter: brightness(1.06);
}
.il-following, .btn-unfollow {
  background: rgba(255,255,255,0.04);
  border-color: rgba(201,162,39,0.4);
  color: var(--gold);
  backdrop-filter: blur(8px);
}
.il-following:hover, .btn-unfollow:hover {
  background: rgba(220,53,69,0.12);
  border-color: rgba(220,53,69,0.5);
  color: #ff6b7a;
}

/* Notification bell — unified */
.il-notif, .btn-notification {
  width: 38px;
  height: 38px;
  min-height: 38px;
  padding: 0;
  border-radius: 50%;
  background: rgba(255,255,255,0.04);
  border-color: rgba(201,162,39,0.25);
  color: var(--white);
  position: relative;
  font-size: 1rem;
}
.il-notif:hover, .btn-notification:hover {
  background: rgba(201,162,39,0.12);
  border-color: var(--gold);
  color: var(--gold);
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(201,162,39,0.3);
}
.il-notif[data-badge]::after, .btn-notification[data-badge]::after {
  content: attr(data-badge);
  position: absolute; top: -3px; right: -3px;
  min-width: 16px; height: 16px;
  padding: 0 4px;
  background: linear-gradient(135deg, #ff4757, #c0392b);
  color: #fff;
  font-size: 0.62rem;
  font-weight: 800;
  border-radius: 999px;
  display: flex; align-items: center; justify-content: center;
  border: 2px solid #0a0a0a;
}

/* ── Bottom nav modern polish ── */
.bottom-nav {
  background: rgba(8,8,8,0.85) !important;
  backdrop-filter: blur(24px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(24px) saturate(180%) !important;
  border-top: 1px solid rgba(201,162,39,0.22) !important;
  box-shadow: 0 -8px 30px rgba(0,0,0,0.6);
}
.bnav-item { position: relative; transition: color .25s, transform .2s !important; }
.bnav-item.active { color: var(--gold) !important; }
.bnav-item.active::before {
  content: '';
  position: absolute; top: 0; left: 50%;
  transform: translateX(-50%);
  width: 26px; height: 3px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
  border-radius: 0 0 4px 4px;
}
.bnav-item:active { transform: scale(0.92); }
.bnav-center-disc {
  background: linear-gradient(135deg, #FFE38A 0%, #FFD56B 30%, var(--gold) 60%, #8B6914 100%) !important;
  box-shadow: 0 6px 24px rgba(201,162,39,0.55), 0 0 0 4px rgba(201,162,39,0.12), inset 0 1px 0 rgba(255,255,255,0.4) !important;
  animation: bnavPulse 3s ease-in-out infinite;
}
@keyframes bnavPulse {
  0%, 100% { box-shadow: 0 6px 24px rgba(201,162,39,0.55), 0 0 0 4px rgba(201,162,39,0.12), inset 0 1px 0 rgba(255,255,255,0.4); }
  50%      { box-shadow: 0 8px 32px rgba(201,162,39,0.75), 0 0 0 6px rgba(201,162,39,0.18), inset 0 1px 0 rgba(255,255,255,0.5); }
}
.bnav-center:active .bnav-center-disc { transform: scale(0.94) !important; }

/* ── Inputs modern feel ── */
input[type="text"], input[type="email"], input[type="password"],
input[type="search"], input[type="tel"], textarea, select {
  border-radius: 12px !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
  background: rgba(255,255,255,0.03) !important;
  color: var(--white);
  transition: border-color .25s, box-shadow .25s, background .25s !important;
}
input:focus, textarea:focus, select:focus {
  outline: none !important;
  border-color: rgba(201,162,39,0.6) !important;
  background: rgba(255,255,255,0.05) !important;
  box-shadow: 0 0 0 3px rgba(201,162,39,0.15) !important;
}

/* ── Tablet polish ── */
@media (min-width: 481px) and (max-width: 1024px) {
  .container { padding: 0 24px; }
  .grid-3 { grid-template-columns: repeat(2, 1fr) !important; gap: 18px; }
  .nav-links { gap: 18px; }
  .post-card { border-radius: 14px; }
  .bnav-center-disc { width: 56px; height: 56px; }
}

/* ── Mobile polish (≤480) ── */
@media (max-width: 480px) {
  body { font-size: 0.93rem; }
  .btn { border-radius: 12px !important; }
  .post-card { border-radius: 14px !important; margin-bottom: 12px; }
  .il-follow, .il-following, .btn-follow, .btn-unfollow {
    padding: 7px 14px;
    font-size: 0.78rem;
    min-height: 34px;
  }
  .il-notif, .btn-notification { width: 36px; height: 36px; min-height: 36px; }
  .bnav-center-disc { width: 54px !important; height: 54px !important; }
}

/* ── Subtle scroll-in animation ── */
@keyframes ilFadeUp {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}
.card, .post-card, .price-card { animation: ilFadeUp .55s cubic-bezier(.2,.8,.2,1) both; }

/* ── Page wrapper bottom-padding when bottom nav is shown ── */
@media (max-width: 768px) {
  body { padding-bottom: 84px !important; }
}
/* ▲ END MODERN POLISH 2026 ▲ */


/* ═══ PREMIUM INTERFACE OVERHAUL 2026 (compact, balanced) ═══ */
.navbar { background: rgba(8,8,8,0.75) !important; backdrop-filter: blur(28px) saturate(180%) !important; -webkit-backdrop-filter: blur(28px) saturate(180%) !important; border-bottom: 1px solid rgba(201,162,39,0.15) !important; box-shadow: 0 4px 30px rgba(0,0,0,0.4); }
.nav-inner { padding: 0 28px; }
.nav-logo img { filter: drop-shadow(0 0 12px rgba(201,162,39,0.4)); transition: filter .3s; }
.nav-logo:hover img { filter: drop-shadow(0 0 20px rgba(201,162,39,0.7)); }
.nav-logo-text { font-family: 'Cinzel', serif !important; font-weight: 700; letter-spacing: 1.2px; }
.nav-links a { position: relative; padding: 6px 2px; font-weight: 600; letter-spacing: 0.3px; }
.nav-signin { padding: 7px 16px !important; border: 1px solid rgba(201,162,39,0.4) !important; border-radius: 999px !important; }
.nav-signin:hover { background: rgba(201,162,39,0.1) !important; border-color: var(--gold) !important; color: var(--gold) !important; }

.top-bar { background: linear-gradient(90deg, rgba(201,162,39,0.18), rgba(201,162,39,0.08), rgba(201,162,39,0.18)) !important; border-bottom: 1px solid rgba(201,162,39,0.2); font-size: 0.82rem !important; letter-spacing: 0.4px; padding: 9px 16px !important; }
.top-bar a { color: var(--gold) !important; font-weight: 700; }

.hero { position: relative; overflow: hidden; }
.hero::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse 80% 60% at 50% 0%, rgba(201,162,39,0.12), transparent 70%); pointer-events: none; z-index: 0; }
.hero-inner { position: relative; z-index: 1; }
.hero h1 { font-family: 'Cinzel', serif; font-size: clamp(2.4rem, 5vw, 4.2rem) !important; line-height: 1.05 !important; letter-spacing: -0.5px; }
.hero p { font-size: 1.1rem !important; line-height: 1.7; color: rgba(255,255,255,0.75) !important; max-width: 540px; }

.hero-badge { background: linear-gradient(135deg, rgba(201,162,39,0.15), rgba(201,162,39,0.05)); border: 1px solid rgba(201,162,39,0.3); backdrop-filter: blur(8px); padding: 8px 18px !important; border-radius: 999px; font-size: 0.78rem !important; letter-spacing: 0.5px; text-transform: uppercase; font-weight: 700; color: var(--gold); display: inline-flex; align-items: center; gap: 8px; }

.hero-stats { display: grid; grid-template-columns: repeat(3,1fr); gap: 24px; margin-top: 48px; padding: 24px; background: linear-gradient(180deg, rgba(20,20,20,0.6), rgba(10,10,10,0.4)); border: 1px solid rgba(201,162,39,0.15); border-radius: 16px; }
.hero-stat h3 { font-family: 'Cinzel', serif !important; font-size: 2.4rem !important; color: var(--gold); margin-bottom: 4px; }
.hero-stat p { font-size: 0.78rem !important; text-transform: uppercase; letter-spacing: 1.5px; color: rgba(255,255,255,0.5) !important; margin: 0 !important; }

.section-header h2 { font-family: 'Cinzel', serif; font-size: clamp(1.8rem, 4vw, 2.8rem) !important; letter-spacing: -0.3px; margin-bottom: 16px !important; }
.section-header p { color: rgba(255,255,255,0.6) !important; font-size: 1.05rem; max-width: 640px; margin: 0 auto 24px; }

.feature-icon { width: 56px; height: 56px; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, rgba(201,162,39,0.18), rgba(201,162,39,0.06)); border: 1px solid rgba(201,162,39,0.25); border-radius: 14px; font-size: 1.6rem; margin-bottom: 20px; }

.footer { background: linear-gradient(180deg, rgba(8,8,8,0.95), rgba(0,0,0,1)) !important; border-top: 1px solid rgba(201,162,39,0.18) !important; padding: 60px 0 24px !important; }
.footer-col h4 { font-family: 'Cinzel', serif; font-size: 0.85rem !important; letter-spacing: 1.5px; text-transform: uppercase; color: var(--gold); margin-bottom: 16px; }
.footer-col ul li a { color: rgba(255,255,255,0.55) !important; font-size: 0.9rem; }
.footer-col ul li a:hover { color: var(--gold) !important; }
.footer-bottom { border-top: 1px solid rgba(201,162,39,0.1); padding-top: 20px; margin-top: 40px; text-align: center; font-size: 0.82rem; color: rgba(255,255,255,0.45); }
.social-link { width: 38px; height: 38px; display: inline-flex; align-items: center; justify-content: center; background: rgba(255,255,255,0.04); border: 1px solid rgba(201,162,39,0.2); border-radius: 50%; color: var(--gold); margin-right: 8px; text-decoration: none; }
.social-link:hover { background: rgba(201,162,39,0.15); border-color: var(--gold); transform: translateY(-2px); }

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: rgba(0,0,0,0.3); }
::-webkit-scrollbar-thumb { background: rgba(201,162,39,0.3); border-radius: 10px; }
::-webkit-scrollbar-thumb:hover { background: rgba(201,162,39,0.5); }
::selection { background: rgba(201,162,39,0.4); color: #fff; }

.modal { border-radius: 20px !important; border: 1px solid rgba(201,162,39,0.2) !important; box-shadow: 0 30px 80px rgba(0,0,0,0.7) !important; }
.modal-overlay { background: rgba(0,0,0,0.75) !important; backdrop-filter: blur(8px); }

@media (max-width: 768px) {
  .nav-inner { padding: 0 16px; height: 60px; }
  .nav-logo img { width: 36px !important; height: 36px !important; }
  .nav-logo-text { font-size: 0.95rem; }
  .top-bar { font-size: 0.74rem !important; padding: 7px 12px !important; }
  .hero-stats { grid-template-columns: repeat(3,1fr); gap: 12px; padding: 16px; margin-top: 28px; }
  .hero-stat h3 { font-size: 1.4rem !important; }
  .hero-stat p { font-size: 0.65rem !important; letter-spacing: 1px; }
  .feature-icon { width: 48px; height: 48px; font-size: 1.3rem; }
  .footer { padding: 40px 0 20px !important; }
}
/* ═══ END PREMIUM OVERHAUL ═══ */


/* ═══ ABSOLUTE FINAL OVERRIDE — bottom-nav must hide on desktop ═══ */
.bottom-nav { display: none !important; }
@media (max-width: 768px) {
  .bottom-nav { display: block !important; }
  .bottom-nav-inner { display: flex !important; align-items: flex-end; justify-content: space-around; }
}

/* ═══ REACTION PICKER FIX — never overflow screen ═══ */
.reaction-wrap { position: relative; }
.reaction-picker {
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%) scale(0.5);
  transform-origin: bottom center;
  display: none;
  background: rgba(20,20,20,0.96);
  backdrop-filter: blur(20px);
  border: 1px solid rgba(201,162,39,0.3);
  border-radius: 999px;
  padding: 8px 12px;
  gap: 6px;
  z-index: 9100;
  box-shadow: 0 12px 32px rgba(0,0,0,0.6), 0 0 0 1px rgba(201,162,39,0.15);
  white-space: nowrap;
  opacity: 0;
  transition: transform .25s cubic-bezier(.34,1.56,.64,1), opacity .2s;
  /* Constrain to viewport on mobile */
  max-width: calc(100vw - 24px);
  overflow-x: auto;
  scrollbar-width: none;
}
.reaction-picker::-webkit-scrollbar { display: none; }
.reaction-picker.open {
  display: flex;
  opacity: 1;
  transform: translateX(-50%) scale(1);
}
.rp-opt {
  display: flex;
  flex-direction: column;
  align-items: center;
  cursor: pointer;
  padding: 6px 8px;
  border-radius: 12px;
  transition: all .2s cubic-bezier(.2,.8,.2,1);
  min-width: 48px;
  flex-shrink: 0;
}
.rp-opt:hover {
  background: rgba(201,162,39,0.15);
  transform: translateY(-4px) scale(1.15);
}
.rp-emoji { font-size: 1.6rem; line-height: 1; margin-bottom: 2px; }
.rp-label { font-size: 0.62rem; color: rgba(255,255,255,0.7); font-weight: 700; letter-spacing: 0.3px; }

/* Mobile: position picker so it never overflows */
@media (max-width: 768px) {
  .reaction-picker {
    left: 8px;
    transform: scale(0.5);
    transform-origin: bottom left;
    padding: 6px 10px;
    gap: 4px;
  }
  .reaction-picker.open {
    transform: scale(1);
  }
  .rp-opt { padding: 4px 6px; min-width: 42px; }
  .rp-emoji { font-size: 1.35rem; }
  .rp-label { font-size: 0.58rem; }
}

/* ═══ LIKE COUNT + WHO LIKED — modern stats row ═══ */
.post-stats {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 16px;
  font-size: 0.82rem;
  color: rgba(255,255,255,0.7);
  border-bottom: 1px solid rgba(255,255,255,0.04);
}
.post-stats .stat-clickable {
  cursor: pointer;
  transition: color .2s;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.post-stats .stat-clickable:hover { color: var(--gold); text-decoration: underline; }
.reaction-stack {
  display: inline-flex;
  align-items: center;
  margin-right: 4px;
}
.reaction-stack .react-bubble {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: linear-gradient(135deg, #FFE38A, #C9A227);
  border: 2px solid #0a0a0a;
  font-size: 0.85rem;
  margin-left: -6px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.5);
}
.reaction-stack .react-bubble:first-child { margin-left: 0; }

/* Who-liked modal */
.who-liked-modal {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.75);
  backdrop-filter: blur(8px);
  z-index: 10000;
  align-items: center;
  justify-content: center;
  padding: 16px;
}
.who-liked-modal.open { display: flex; }
.who-liked-card {
  width: 100%;
  max-width: 420px;
  max-height: 80vh;
  background: linear-gradient(180deg, #141414, #0a0a0a);
  border: 1px solid rgba(201,162,39,0.3);
  border-radius: 18px;
  padding: 0;
  overflow: hidden;
  box-shadow: 0 30px 80px rgba(0,0,0,0.7);
  display: flex;
  flex-direction: column;
}
.wlc-head {
  padding: 18px 20px 14px;
  border-bottom: 1px solid rgba(201,162,39,0.18);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.wlc-title {
  font-family: 'Cinzel', serif;
  font-size: 1rem;
  color: var(--gold);
  letter-spacing: 0.5px;
}
.wlc-close {
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.1);
  color: #fff;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  cursor: pointer;
  font-size: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
}
.wlc-close:hover { background: rgba(201,162,39,0.15); border-color: var(--gold); color: var(--gold); }
.wlc-body { padding: 12px 0; overflow-y: auto; flex: 1; }
.wlc-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 20px;
  cursor: pointer;
  transition: background .2s;
}
.wlc-row:hover { background: rgba(201,162,39,0.06); }
.wlc-av {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--gold), #8B6914);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  color: #0a0a0a;
  font-family: 'Cinzel', serif;
  font-size: 0.95rem;
  position: relative;
  overflow: hidden;
  flex-shrink: 0;
}
.wlc-av img { width: 100%; height: 100%; object-fit: cover; }
.wlc-av .react-mini {
  position: absolute;
  bottom: -2px;
  right: -2px;
  background: #0a0a0a;
  border-radius: 50%;
  width: 18px;
  height: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.7rem;
  border: 1px solid rgba(201,162,39,0.3);
}
.wlc-info { flex: 1; min-width: 0; }
.wlc-name { color: #fff; font-weight: 700; font-size: 0.92rem; }
.wlc-sub  { color: rgba(255,255,255,0.45); font-size: 0.75rem; margin-top: 2px; }
.wlc-follow {
  flex-shrink: 0;
  padding: 6px 14px !important;
  font-size: 0.72rem !important;
  min-height: 30px !important;
}

/* ═══ FIX: hide back-to-top on mobile (covers bottom nav FEED button) ═══ */
@media (max-width: 768px) {
  #ilBackToTop { display: none !important; }
}
/* Move desktop back-to-top to right side, away from any side panels */
@media (min-width: 769px) {
  #ilBackToTop { left: auto !important; right: 80px !important; bottom: 24px !important; }
}

/* ═══════════════════════════════════════════════════════════
   ▼  MODERN UX 3.0 — page transitions, scroll reveals,
      skeleton loaders, smooth flow
   ═══════════════════════════════════════════════════════════ */

/* ── Page entrance fade-in ──
   Opacity only: a transform or filter on <body> creates a new containing
   block for position:fixed descendants (top-bar/navbar/bottom-nav), which
   would mispositon them relative to the full page instead of the viewport
   for the animation's duration on every single page load. */
@keyframes ilPageEnter {
  from { opacity: 0; }
  to   { opacity: 1; }
}
body { animation: ilPageEnter .4s ease both; }

/* ── Scroll reveal for cards/sections (auto-applied via JS) ── */
.il-reveal {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity .8s cubic-bezier(.2,.8,.2,1), transform .8s cubic-bezier(.2,.8,.2,1);
}
.il-reveal.il-visible {
  opacity: 1;
  transform: translateY(0);
}
.il-reveal-delay-1 { transition-delay: .08s; }
.il-reveal-delay-2 { transition-delay: .16s; }
.il-reveal-delay-3 { transition-delay: .24s; }
.il-reveal-delay-4 { transition-delay: .32s; }

/* ── Modern toast notifications (override default) ── */
#toast {
  position: fixed !important;
  bottom: 96px !important;
  left: 50% !important;
  transform: translateX(-50%) translateY(20px) !important;
  background: linear-gradient(135deg, #1a1a1a, #0a0a0a) !important;
  color: #fff !important;
  border: 1px solid rgba(201,162,39,0.4);
  padding: 12px 22px !important;
  border-radius: 999px !important;
  font-weight: 700;
  font-size: 0.85rem;
  letter-spacing: 0.3px;
  box-shadow: 0 12px 32px rgba(0,0,0,0.6), 0 0 0 1px rgba(201,162,39,0.1) !important;
  backdrop-filter: blur(20px);
  opacity: 0;
  pointer-events: none;
  transition: opacity .3s, transform .3s cubic-bezier(.34,1.56,.64,1) !important;
  z-index: 99999 !important;
  display: block !important;
}
#toast.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0) !important;
}

/* ── Skeleton loader (for content loading) ── */
.il-skeleton {
  background: linear-gradient(90deg, rgba(255,255,255,0.04) 0%, rgba(201,162,39,0.08) 50%, rgba(255,255,255,0.04) 100%);
  background-size: 200% 100%;
  animation: ilShimmer 1.4s infinite linear;
  border-radius: 8px;
}
@keyframes ilShimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

/* ── Modern link underline (animated) ── */
.footer a, .nav-links a:not(.btn):not(.nav-signin) {
  background-image: linear-gradient(90deg, currentColor, currentColor);
  background-size: 0% 1px;
  background-position: 0 100%;
  background-repeat: no-repeat;
  transition: background-size .3s cubic-bezier(.2,.8,.2,1), color .25s !important;
}
.footer a:hover { background-size: 100% 1px; }

/* ── Card hover — premium lift with gold halo ── */
.card, .post-card, .price-card {
  position: relative;
  overflow: hidden;
}
.card::before, .post-card::before, .price-card::before {
  content: '';
  position: absolute;
  inset: -1px;
  background: linear-gradient(135deg, transparent, rgba(201,162,39,0.18), transparent);
  opacity: 0;
  transition: opacity .4s;
  pointer-events: none;
  border-radius: inherit;
  z-index: -1;
}
.card:hover::before, .post-card:hover::before, .price-card:hover::before { opacity: 1; }

/* ── Smooth navbar (auto-hide on scroll down, show on scroll up) ── */
.navbar {
  transition: transform .35s cubic-bezier(.2,.8,.2,1) !important;
}
.navbar.il-hide { transform: translateY(-105%); }

/* ── Gold gradient sweep on hero badge ── */
.hero-badge { position: relative; overflow: hidden; }
.hero-badge::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg, transparent 30%, rgba(255,255,255,0.25) 50%, transparent 70%);
  transform: translateX(-100%);
  animation: ilSweep 3s ease-in-out infinite;
}
@keyframes ilSweep {
  0%, 100% { transform: translateX(-100%); }
  50% { transform: translateX(100%); }
}

/* ── Smooth scroll for whole page ── */
html { scroll-behavior: smooth; }

/* ── Modern image hover zoom inside cards ── */
.post-card img, .card img {
  transition: transform .6s cubic-bezier(.2,.8,.2,1);
}
.post-card:hover img, .card:hover img { transform: scale(1.03); }

/* ── Pull-to-refresh indicator ── */
#ilPullRefresh {
  position: fixed;
  top: 0;
  left: 50%;
  transform: translateX(-50%) translateY(-60px);
  z-index: 9990;
  background: linear-gradient(135deg, #FFE38A, #C9A227);
  color: #0a0a0a;
  padding: 8px 16px;
  border-radius: 999px;
  font-weight: 800;
  font-size: 0.8rem;
  box-shadow: 0 8px 22px rgba(201,162,39,0.4);
  transition: transform .3s cubic-bezier(.34,1.56,.64,1);
}
#ilPullRefresh.show { transform: translateX(-50%) translateY(70px); }

/* ── Scroll progress bar (top of page) ── */
#ilScrollProgress {
  position: fixed;
  top: 0;
  left: 0;
  height: 3px;
  background: linear-gradient(90deg, #FFE38A, #C9A227, #FFE38A);
  width: 0%;
  z-index: 99998;
  transition: width .1s linear;
  pointer-events: none;
}

/* ── Better focus states (keyboard accessibility) ── */
button:focus-visible, a:focus-visible, input:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
}

/* ── Premium ambient glow on hero ── */
.hero {
  position: relative;
}
.hero::after {
  content: '';
  position: absolute;
  width: 400px;
  height: 400px;
  background: radial-gradient(circle, rgba(201,162,39,0.15), transparent 70%);
  top: 30%;
  left: 60%;
  filter: blur(60px);
  pointer-events: none;
  z-index: 0;
  animation: ilFloat 8s ease-in-out infinite;
}
@keyframes ilFloat {
  0%, 100% { transform: translate(0, 0); }
  33% { transform: translate(30px, -20px); }
  66% { transform: translate(-20px, 30px); }
}

/* ▲ END MODERN UX 3.0 ▲ */

/* ════════════════════════════════════════════════════════════
   PHASE 1 — DESIGN SYSTEM LAYER (il-ui.js companion)
   Professional SVG iconography, elegant motion, notifications,
   official-account styling. Black & gold identity preserved.
   ════════════════════════════════════════════════════════════ */

/* ── SVG icons ── */
.il-ic { display: inline-block; vertical-align: -0.22em; flex-shrink: 0; }
.bnav-icon .il-ic { vertical-align: middle; }
.il-nav-link { display: inline-flex; align-items: center; gap: 7px; }
.il-nav-link .il-ic { opacity: 0.85; }
.side-nav-item .nav-icon .il-ic { vertical-align: middle; }

/* ── Elegant motion ── */
@keyframes ilRiseIn {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}
@keyframes ilFadeIn { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: no-preference) {
  body { animation: ilFadeIn .35s ease both; }        /* opacity only — keeps fixed nav stable */
  .btn, .post-btn, .bnav-item, .il-bell {
    transition: transform .18s cubic-bezier(.34,1.56,.64,1), color .2s ease,
                background .2s ease, border-color .2s ease, box-shadow .25s ease;
  }
  .btn:active { transform: scale(0.97); }
  .post-card, .biz-card, .card { transition: border-color .25s ease, transform .25s ease, box-shadow .3s ease; }
  .post-card:hover, .biz-card:hover { transform: translateY(-2px); box-shadow: 0 10px 34px rgba(0,0,0,0.45); }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
}

/* ── Accessible focus ── */
:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; border-radius: 4px; }

/* ── Notification bell (lives in .nav-inner, visible on mobile too) ── */
.il-bell {
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; margin-left: 10px;
  background: rgba(201,162,39,0.08); border: 1px solid var(--border); border-radius: 50%;
  color: var(--white-dim); cursor: pointer;
}
.il-bell:hover { color: var(--gold); border-color: var(--border-glow); box-shadow: 0 0 18px rgba(201,162,39,0.25); }
/* Unread state: bell itself turns gold; a red badge with the count sits on top */
.il-bell.has-unread { color: var(--gold); border-color: rgba(201,162,39,0.5); background: rgba(201,162,39,0.14); }
.il-bell-badge {
  position: absolute; top: -3px; right: -3px; min-width: 17px; height: 17px; padding: 0 4px;
  display: flex; align-items: center; justify-content: center;
  background: #e5342e; color: #fff;
  font-size: 0.62rem; font-weight: 900; border-radius: 10px; border: 2px solid var(--black);
}

/* ── Notification panel ── */
.il-notif-panel {
  position: fixed; top: 78px; right: 18px; z-index: 1200;
  width: 372px; max-width: calc(100vw - 20px); max-height: min(68vh, 540px);
  display: none; flex-direction: column; overflow: hidden;
  background: rgba(16,16,16,0.92); backdrop-filter: blur(24px) saturate(160%);
  -webkit-backdrop-filter: blur(24px) saturate(160%);
  border: 1px solid var(--border); border-radius: 16px;
  box-shadow: 0 18px 60px rgba(0,0,0,0.65), 0 0 0 1px rgba(201,162,39,0.06);
}
.il-notif-panel.open { display: flex; animation: ilRiseIn .28s cubic-bezier(.22,.61,.36,1); }
.il-notif-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 18px; border-bottom: 1px solid rgba(201,162,39,0.12);
  font-family: 'Cinzel', serif; font-weight: 700; font-size: 0.95rem; color: var(--white);
}
.il-notif-markall {
  background: none; border: none; color: var(--gold); font-size: 0.72rem; font-weight: 700;
  cursor: pointer; letter-spacing: 0.4px; text-transform: uppercase; font-family: 'Lato', sans-serif;
}
.il-notif-markall:hover { text-decoration: underline; }
.il-notif-list { overflow-y: auto; }
.il-notif-item {
  display: flex; align-items: flex-start; gap: 12px; padding: 13px 18px;
  cursor: pointer; border-bottom: 1px solid rgba(201,162,39,0.06); transition: background .2s ease;
}
.il-notif-item:hover { background: rgba(201,162,39,0.07); }
.il-notif-item.unread { background: rgba(201,162,39,0.045); }
.il-notif-ic {
  width: 34px; height: 34px; flex-shrink: 0; display: flex; align-items: center; justify-content: center;
  background: rgba(201,162,39,0.1); border: 1px solid var(--border); border-radius: 50%; color: var(--gold);
}
.il-notif-body { flex: 1; font-size: 0.84rem; color: var(--white-dim); line-height: 1.45; }
.il-notif-body strong { color: var(--white); font-weight: 700; }
.il-notif-body em { display: block; font-style: normal; font-size: 0.72rem; color: var(--white-muted); margin-top: 3px; }
.il-notif-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--gold); margin-top: 6px; flex-shrink: 0; }
.il-notif-empty { padding: 42px 26px; text-align: center; color: var(--white-muted); }
.il-notif-empty .il-ic { color: var(--gold); opacity: 0.6; margin-bottom: 10px; }
.il-notif-empty p { font-size: 0.84rem; line-height: 1.6; }
@media (max-width: 560px) {
  .il-notif-panel { top: 66px; right: 8px; left: 8px; width: auto; }
}

/* ── Official Italy Lions account ── */
:root { --il-verified: #3ddc84; --il-verified-dim: rgba(61,220,132,0.14); }
.il-official-badge {
  display: inline-flex; align-items: center; gap: 5px; margin-left: 7px;
  padding: 3px 10px 3px 7px; border-radius: 20px;
  background: rgba(10,14,10,0.75); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(61,220,132,0.4); color: var(--il-verified);
  font-size: 0.62rem; font-weight: 800; letter-spacing: 0.7px; vertical-align: middle;
  box-shadow: 0 0 12px rgba(61,220,132,0.15), inset 0 1px 0 rgba(255,255,255,0.05);
}
.il-official-badge .il-ic { color: var(--il-verified); filter: drop-shadow(0 0 4px rgba(61,220,132,0.6)); }
.il-official-post {
  border-color: rgba(61,220,132,0.35) !important;
  box-shadow: 0 0 0 1px rgba(61,220,132,0.12), 0 8px 30px rgba(61,220,132,0.06);
  position: relative;
}

/* ▲ END PHASE 1 DESIGN SYSTEM ▲ */

/* ── Bottom-nav Alerts (bell) item ── */
button.bnav-item {
  background: none; border: none; font-family: inherit; font-size: inherit;
  cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.bnav-icon { position: relative; display: inline-block; }
.il-bnav-badge {
  position: absolute; top: -5px; right: -11px;
  min-width: 16px; height: 16px; padding: 0 4px;
  display: flex; align-items: center; justify-content: center;
  background: #e5342e;
  color: #fff; font-size: 0.58rem; font-weight: 900;
  border-radius: 9px; border: 2px solid var(--black); line-height: 1;
}
/* Unread state: bottom-nav Alerts bell icon turns gold (its badge is always red) */
.il-bnav-bell.has-unread .bnav-icon { color: var(--gold); }