:root {
  --primary:#1a56db; --primary-light:#e8f0fe; --primary-dark:#1240a8;
  --accent:#f5a623; --accent-light:#fff8ec;
  --green:#0d9e5c; --green-light:#e6f7ef;
  --red:#e53e3e; --bg:#f0f2f5; --surface:#fff;
  --border:#e4e8ef; --text:#1a1a2e; --text-muted:#8492a6; --text-dim:#4a5568;
  --shadow:0 1px 4px rgba(0,0,0,.08); --shadow-md:0 4px 16px rgba(0,0,0,.10);
  --radius:14px; --radius-sm:10px;
}
*{box-sizing:border-box;margin:0;padding:0;}
body{font-family:'Cairo',sans-serif;background:var(--bg);color:var(--text);direction:rtl;}

/* ══════════════════════════════════════
   DESKTOP:  sidebar(right) | feed(left)
   In RTL grid: col-1 = visual RIGHT, col-2 = visual LEFT
   ══════════════════════════════════════ */
.page-wrap{
  max-width:1160px; margin:0 auto; padding:20px 16px;
  display:grid;
  grid-template-columns:300px 1fr; /* col1=sidebar RIGHT, col2=feed LEFT */
  gap:20px; align-items:start;
}
.sidebar-col{ order:1; display:flex; flex-direction:column; gap:16px; position:sticky; top:20px; }
.feed-col   { order:2; min-width:0; }

/* ══════════════════════════════════════
   SIDEBAR CARDS
   ══════════════════════════════════════ */
.sidebar-card{background:var(--surface);border-radius:var(--radius);padding:16px;box-shadow:var(--shadow);width:100%;box-sizing:border-box;}
.sidebar-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px;}
.sidebar-title{font-size:15px;font-weight:800;color:var(--text);}
.show-all{font-size:12px;font-weight:700;color:var(--primary);cursor:pointer;border:1px solid #c7d9f8;padding:4px 10px;border-radius:20px;background:var(--primary-light);transition:all .18s;}
.show-all:hover{background:#d8e8fe;}

/* company list */
.company-item{display:flex;align-items:center;gap:10px;padding:8px 0;border-bottom:1px solid var(--border);cursor:pointer;transition:all .15s;}
.company-item:last-child{border-bottom:none;padding-bottom:0;}
.company-item:hover{background:var(--bg);margin:0 -16px;padding:8px 16px;border-radius:8px;}
.co-logo{width:42px;height:42px;border-radius:10px;background:var(--bg);border:1px solid var(--border);display:flex;align-items:center;justify-content:center;font-size:20px;flex-shrink:0;}
.co-info{flex:1;min-width:0;}
.co-name{font-size:13px;font-weight:700;color:var(--text);}
.co-rating{display:flex;align-items:center;gap:3px;font-size:12px;font-weight:600;color:var(--text-muted);}
.co-rating .s{color:var(--accent);}
.co-trust{font-size:10px;font-weight:700;padding:3px 8px;border-radius:12px;background:var(--green-light);color:var(--green);white-space:nowrap;}

/* trips scroll */
.trips-scroll{display:flex;gap:10px;overflow-x:auto;scrollbar-width:none;padding-bottom:4px;}
.trips-scroll::-webkit-scrollbar{display:none;}
.trip-mini{flex-shrink:0;width:115px;cursor:pointer;}
.trip-mini-img{width:115px;height:78px;border-radius:10px;object-fit:cover;display:block;margin-bottom:6px;transition:transform .2s;}
.trip-mini:hover .trip-mini-img{transform:scale(1.04);}
.trip-mini-name{font-size:12px;font-weight:700;color:var(--text);margin-bottom:2px;}
.trip-mini-price{font-size:11px;color:var(--primary);font-weight:700;}
.trip-mini-date{font-size:10px;color:var(--text-muted);}

/* leaderboard */
.leaderboard-item{display:flex;align-items:center;gap:10px;padding:9px 0;border-bottom:1px solid var(--border);}
.leaderboard-item:last-child{border-bottom:none;}
.lb-rank{width:26px;height:26px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:900;flex-shrink:0;}
.lb-rank.gold{background:#fff3cd;color:#d4a017;}
.lb-rank.silver{background:#f0f0f0;color:#888;}
.lb-rank.bronze{background:#fde8d8;color:#b05a2f;}
.lb-logo{width:34px;height:34px;border-radius:8px;background:var(--bg);border:1px solid var(--border);display:flex;align-items:center;justify-content:center;font-size:17px;flex-shrink:0;}
.lb-info{flex:1;}
.lb-name{font-size:13px;font-weight:700;color:var(--text);}
.lb-score{font-size:11px;color:var(--text-muted);}
.lb-rating{font-size:13px;font-weight:700;color:var(--accent);}

/* ══════════════════════════════════════
   COMPOSE BOX
   ══════════════════════════════════════ */
.compose-card{background:var(--surface);border-radius:var(--radius);padding:16px;box-shadow:var(--shadow);margin-bottom:12px;}
.compose-top{display:flex;align-items:center;gap:10px;margin-bottom:14px;}
.user-av{width:42px;height:42px;border-radius:50%;background:linear-gradient(135deg,#1a56db,#3b82f6);display:flex;align-items:center;justify-content:center;font-size:18px;flex-shrink:0;}
.compose-input-fake{flex:1;background:var(--bg);border:1.5px solid var(--border);border-radius:24px;padding:10px 16px;font-size:14px;color:var(--text-muted);cursor:pointer;transition:border-color .2s;font-family:'Cairo',sans-serif;}
.compose-input-fake:hover{border-color:var(--primary);}
.compose-actions-row{display:flex;align-items:center;gap:2px;padding-top:12px;border-top:1px solid var(--border);flex-wrap:wrap;}
.c-action{display:flex;align-items:center;gap:4px;padding:7px 10px;border-radius:8px;border:none;background:transparent;color:var(--text-dim);font-size:13px;font-weight:600;cursor:pointer;font-family:'Cairo',sans-serif;transition:all .18s;white-space:nowrap;}
.c-action:hover{background:var(--bg);color:var(--primary);}
.c-action .ico{font-size:16px;}

/* ══════════════════════════════════════
   POST CARDS
   ══════════════════════════════════════ */
@keyframes fadeUp{from{opacity:0;transform:translateY(8px);}to{opacity:1;transform:translateY(0);}}
.post-card{background:var(--surface);border-radius:var(--radius);padding:16px;margin-bottom:12px;box-shadow:var(--shadow);transition:box-shadow .2s;animation:fadeUp .3s ease both;}
.post-card:hover{box-shadow:var(--shadow-md);}
.post-card:nth-child(2){animation-delay:.04s}.post-card:nth-child(3){animation-delay:.08s}
.post-card:nth-child(4){animation-delay:.12s}.post-card:nth-child(5){animation-delay:.16s}

.post-head{display:flex;align-items:flex-start;gap:10px;margin-bottom:12px;}
.post-av{width:44px;height:44px;border-radius:50%;flex-shrink:0;display:flex;align-items:center;justify-content:center;font-size:19px;font-weight:700;overflow:hidden;}
.verified{display:inline-flex;align-items:center;gap:2px;font-size:11px;color:var(--primary);background:var(--primary-light);padding:2px 7px;border-radius:12px;font-weight:700;}
.verified::before{content:'✓';}
.company-tag{font-size:11px;color:var(--text-muted);background:var(--bg);padding:2px 7px;border-radius:12px;font-weight:600;}
.post-info{flex:1;min-width:0;}
.post-name{font-size:15px;font-weight:700;color:var(--text);display:flex;align-items:center;gap:6px;flex-wrap:wrap;}
.post-sub{font-size:12px;color:var(--text-muted);display:flex;align-items:center;gap:5px;margin-top:2px;}
.post-sub .loc{color:var(--primary);}
.post-more-btn{width:30px;height:30px;border-radius:50%;border:none;background:transparent;color:var(--text-muted);font-size:18px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .2s;flex-shrink:0;}
.post-more-btn:hover{background:var(--bg);}
.post-text{font-size:14px;line-height:1.75;color:var(--text-dim);margin-bottom:12px;}
.post-text .tag{color:var(--primary);}
.company-chip{display:inline-flex;align-items:center;gap:6px;background:var(--primary-light);border:1px solid #c7d9f8;border-radius:20px;padding:4px 12px;font-size:12px;color:var(--primary);font-weight:700;margin-bottom:10px;cursor:pointer;}
.trip-chip{display:inline-flex;align-items:center;gap:5px;background:var(--accent-light);border:1px solid #fde8b5;border-radius:20px;padding:4px 12px;font-size:12px;color:#c07a00;font-weight:700;margin-bottom:10px;}
.star-rating{display:flex;align-items:center;gap:2px;margin-bottom:10px;}
.star{color:#f5a623;font-size:15px;}.star.empty{color:#ddd;}
.rating-num{font-size:13px;font-weight:700;color:var(--text);margin-left:4px;}

/* media */
.media-grid{border-radius:var(--radius-sm);overflow:hidden;margin-bottom:12px;display:grid;gap:2px;}
.media-grid.single img{width:100%;height:280px;object-fit:cover;display:block;}
.media-grid.two{grid-template-columns:1fr 1fr;}
.media-grid.two img{width:100%;height:200px;object-fit:cover;display:block;}
.media-grid.three{grid-template-columns:1fr 1fr;}
.media-grid.three img:first-child{grid-column:1/-1;height:180px;width:100%;object-fit:cover;display:block;}
.media-grid.three img:not(:first-child){height:140px;width:100%;object-fit:cover;display:block;}

/* promo */
.promo-post{border-radius:var(--radius-sm);overflow:hidden;margin-bottom:12px;position:relative;cursor:pointer;}
.promo-post img{width:100%;height:220px;object-fit:cover;display:block;}
.promo-overlay{position:absolute;inset:0;background:linear-gradient(to left,rgba(0,0,0,.78) 0%,rgba(0,0,0,.18) 60%,transparent 100%);display:flex;align-items:flex-end;padding:20px;}
.promo-badge{background:rgba(0,0,0,.5);backdrop-filter:blur(4px);border:1px solid rgba(245,166,35,.45);border-radius:var(--radius-sm);padding:14px 18px;color:white;min-width:175px;}
.promo-badge .trip-name{font-size:17px;font-weight:900;margin-bottom:2px;}
.promo-badge .trip-info{font-size:12px;opacity:.85;margin-bottom:8px;}
.promo-badge .price{font-size:20px;font-weight:900;color:var(--accent);}
.promo-badge .book-btn{margin-top:10px;width:100%;background:var(--accent);border:none;border-radius:8px;padding:8px;font-size:13px;font-weight:700;color:white;cursor:pointer;font-family:'Cairo',sans-serif;transition:background .2s;}
.promo-badge .book-btn:hover{background:#d4891e;}

/* video */
.video-thumb{border-radius:var(--radius-sm);overflow:hidden;margin-bottom:12px;position:relative;cursor:pointer;}
.video-thumb img,.video-thumb video{width:100%;height:240px;object-fit:cover;display:block;filter:brightness(.75);}
.play-btn{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:56px;height:56px;background:rgba(255,255,255,.92);border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:22px;color:var(--primary);transition:transform .2s;}
.play-btn:hover{transform:translate(-50%,-50%) scale(1.1);}
.vid-duration{position:absolute;bottom:10px;left:10px;background:rgba(0,0,0,.65);color:white;font-size:11px;padding:2px 7px;border-radius:5px;font-weight:600;}


/* ══════════════════════════════════════
   TIKTOK VIEWER
   ══════════════════════════════════════ */
.tt-overlay{
  display:none; position:fixed; inset:0; z-index:600;
  background:#000; flex-direction:column;
  overflow:hidden; touch-action:none;
}
.tt-overlay.open{ display:flex; }

/* close btn */
.tt-close{
  position:absolute; top:16px; right:16px; z-index:20;
  width:42px; height:42px; border-radius:50%;
  background:rgba(255,255,255,.15); border:none;
  color:#fff; font-size:20px; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  transition:background .2s; backdrop-filter:blur(4px);
}
.tt-close:hover{ background:rgba(255,255,255,.28); }

/* counter top center */
.tt-counter{
  position:absolute; top:22px; left:50%; transform:translateX(-50%); z-index:20;
  color:rgba(255,255,255,.75); font-size:13px; font-weight:700;
  font-family:'Cairo',sans-serif; background:rgba(0,0,0,.35);
  padding:4px 12px; border-radius:20px; backdrop-filter:blur(4px);
  white-space:nowrap;
}

/* the scrollable reel */
.tt-reel{
  width:100%; height:100%;
  display:flex; flex-direction:column;
  transition:transform .38s cubic-bezier(.4,0,.2,1);
  will-change:transform;
}

/* each item fills full screen */
.tt-item{
  width:100%; height:100vh; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  position:relative; overflow:hidden;
}

/* image fill — object-fit contain so full image is visible */
.tt-item img{
  max-width:100%; max-height:100%;
  object-fit:contain;
  user-select:none; -webkit-user-drag:none;
  pointer-events:none;
}

/* video fill */
.tt-item video{
  max-width:100%; max-height:100%;
  object-fit:contain; outline:none;
  background:#000;
}

/* post info overlay — bottom left */
.tt-info{
  position:absolute; bottom:0; right:0; left:0;
  background:linear-gradient(to top, rgba(0,0,0,.75) 0%, transparent 100%);
  padding:40px 16px 24px;
  color:#fff; pointer-events:none;
}
.tt-info .tt-author{ font-size:14px; font-weight:700; margin-bottom:4px; opacity:.95; }
.tt-info .tt-caption{ font-size:13px; opacity:.8; line-height:1.5; }
.tt-info .tt-type-badge{
  display:inline-flex; align-items:center; gap:4px;
  background:rgba(255,255,255,.18); border-radius:20px;
  padding:3px 10px; font-size:11px; font-weight:700;
  margin-bottom:8px; backdrop-filter:blur(4px);
}

/* swipe hint arrows */
.tt-hint{
  position:absolute; left:50%; transform:translateX(-50%);
  color:rgba(255,255,255,.35); font-size:20px; z-index:15;
  pointer-events:none; animation:hintPulse 2s ease-in-out infinite;
}
.tt-hint.up   { top:72px; }
.tt-hint.down { bottom:24px; }
@keyframes hintPulse{
  0%,100%{ opacity:.35; transform:translateX(-50%) translateY(0); }
  50%    { opacity:.7;  transform:translateX(-50%) translateY(4px); }
}
.tt-hint.up { animation-name:hintPulseUp; }
@keyframes hintPulseUp{
  0%,100%{ opacity:.35; transform:translateX(-50%) translateY(0); }
  50%    { opacity:.7;  transform:translateX(-50%) translateY(-4px); }
}

/* type icon badge for videos */
.tt-play-ico{
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  width:60px; height:60px; border-radius:50%;
  background:rgba(255,255,255,.18); backdrop-filter:blur(6px);
  display:flex; align-items:center; justify-content:center;
  font-size:26px; color:#fff; pointer-events:none; z-index:5;
  transition:opacity .3s;
}
.tt-play-ico.hidden{ opacity:0; }



/* ── INLINE FEED CARDS (شركات / عروض بين البوستات) ── */
.feed-ad{
  background:var(--surface);
  border-radius:var(--radius);
  margin-bottom:12px;
  box-shadow:var(--shadow);
  overflow:hidden;
  animation:fadeUp .3s ease both;
}
.feed-ad-label{
  display:flex; align-items:center; gap:6px;
  padding:10px 14px 0;
  font-size:10px; font-weight:700; letter-spacing:.8px;
  text-transform:uppercase; color:var(--text-muted);
}
.feed-ad-label span{ background:var(--bg); border:1px solid var(--border); border-radius:10px; padding:2px 8px; }

/* ── شركة مميزة inline ── */
.feed-co-card{ padding:14px; }
.feed-co-inner{ display:flex; align-items:center; gap:12px; }
.feed-co-logo{
  width:52px; height:52px; border-radius:12px;
  background:var(--bg); border:1px solid var(--border);
  display:flex; align-items:center; justify-content:center; font-size:24px; flex-shrink:0;
}
.feed-co-info{ flex:1; min-width:0; }
.feed-co-name{ font-size:15px; font-weight:800; color:var(--text); margin-bottom:2px; }
.feed-co-meta{ display:flex; align-items:center; gap:8px; font-size:12px; color:var(--text-muted); flex-wrap:wrap; }
.feed-co-meta .stars{ color:var(--accent); font-weight:700; }
.feed-co-meta .trust{ background:var(--green-light); color:var(--green); font-weight:700; padding:2px 8px; border-radius:10px; font-size:10px; }
.feed-co-desc{ font-size:13px; color:var(--text-dim); margin-top:8px; line-height:1.6; }
.feed-co-btn{
  margin-top:12px; display:inline-flex; align-items:center; gap:6px;
  background:var(--primary); color:#fff; border:none; border-radius:20px;
  padding:8px 18px; font-size:13px; font-weight:700; cursor:pointer;
  font-family:'Cairo',sans-serif; transition:background .18s;
}
.feed-co-btn:hover{ background:var(--primary-dark); }

/* ── عرض رحلة inline ── */
.feed-trip-card{ position:relative; }
.feed-trip-card img{ width:100%; height:200px; object-fit:cover; display:block; }
.feed-trip-overlay{
  position:absolute; inset:0;
  background:linear-gradient(to top, rgba(0,0,0,.78) 0%, rgba(0,0,0,.1) 60%, transparent 100%);
  display:flex; flex-direction:column; justify-content:flex-end; padding:16px;
}
.feed-trip-name{ font-size:18px; font-weight:900; color:#fff; margin-bottom:3px; }
.feed-trip-details{ font-size:12px; color:rgba(255,255,255,.8); margin-bottom:10px; }
.feed-trip-footer{ display:flex; align-items:center; justify-content:space-between; }
.feed-trip-price{ font-size:20px; font-weight:900; color:var(--accent); }
.feed-trip-cta{
  background:var(--accent); color:#fff; border:none; border-radius:20px;
  padding:8px 18px; font-size:13px; font-weight:700; cursor:pointer;
  font-family:'Cairo',sans-serif; transition:background .18s;
}
.feed-trip-cta:hover{ background:#d4891e; }

/* ── أكثر الشركات مدحاً inline (leaderboard strip) ── */
.feed-lb-strip{ padding:14px; }
.feed-lb-item{
  display:flex; align-items:center; gap:10px;
  padding:8px 0; border-bottom:1px solid var(--border);
}
.feed-lb-item:last-child{ border-bottom:none; padding-bottom:0; }


.poll-wrap{margin-bottom:12px;}
.poll-opt{position:relative;border-radius:8px;overflow:hidden;border:1.5px solid var(--border);margin-bottom:8px;cursor:pointer;transition:border-color .2s;}
.poll-opt:hover{border-color:var(--primary);}
.poll-fill{position:absolute;top:0;right:0;height:100%;background:var(--primary-light);transition:width .7s ease;}
.poll-inner{position:relative;display:flex;justify-content:space-between;align-items:center;padding:9px 12px;}
.poll-label{font-size:13px;font-weight:600;color:var(--text-dim);}
.poll-pct{font-size:12px;font-weight:700;color:var(--primary);}
.poll-footer{font-size:11px;color:var(--text-muted);font-weight:600;}

/* actions */
.post-actions{display:flex;align-items:center;gap:4px;padding-top:12px;border-top:1px solid var(--border);}
.act-btn{display:flex;align-items:center;gap:5px;padding:7px 12px;border-radius:8px;border:none;background:transparent;color:var(--text-muted);font-size:13px;font-weight:600;cursor:pointer;font-family:'Cairo',sans-serif;transition:all .18s;}
.act-btn .ico{font-size:17px;}
.act-btn:hover{background:var(--bg);}
.act-btn.liked{color:var(--red);}
.act-btn.liked:hover{background:#fff5f5;}
.act-share{margin-right:auto;}

/* ── COMMENTS DRAWER ── */
.comments-drawer{
  display:none; border-top:1px solid var(--border);
  background:var(--surface2); border-radius:0 0 var(--radius) var(--radius);
  overflow:hidden; animation:slideDown .22s ease;
}
.comments-drawer.open{display:block;}
@keyframes slideDown{from{opacity:0;transform:translateY(-6px);}to{opacity:1;transform:translateY(0);}}

.comments-list{ max-height:280px; overflow-y:auto; padding:12px 14px; display:flex; flex-direction:column; gap:12px; }
.comments-list::-webkit-scrollbar{width:3px;}
.comments-list::-webkit-scrollbar-thumb{background:var(--border);border-radius:4px;}

.comment-item{ display:flex; gap:9px; }
.comment-av{
  width:32px; height:32px; border-radius:50%; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  font-size:14px; font-weight:700; color:#fff;
}
.comment-bubble{
  background:var(--surface); border:1px solid var(--border);
  border-radius:0 12px 12px 12px; padding:8px 12px; flex:1;
}
.comment-name{ font-size:12px; font-weight:700; color:var(--text); margin-bottom:3px; }
.comment-text{ font-size:13px; color:var(--text-dim); line-height:1.55; }
.comment-actions{ display:flex; gap:10px; margin-top:6px; }
.comment-like-btn{
  font-size:11px; font-weight:600; color:var(--text-muted);
  border:none; background:transparent; cursor:pointer;
  font-family:'Cairo',sans-serif; transition:color .18s; padding:0;
  display:flex; align-items:center; gap:3px;
}
.comment-like-btn:hover{color:var(--red);}
.comment-like-btn.liked{color:var(--red);}
.comment-time{ font-size:11px; color:var(--text-muted); margin-top:4px; }

.comment-input-row{
  display:flex; align-items:center; gap:8px;
  padding:10px 14px; border-top:1px solid var(--border); background:var(--surface);
}
.comment-input{
  flex:1; background:var(--bg); border:1.5px solid var(--border);
  border-radius:20px; padding:8px 14px;
  font-family:'Cairo',sans-serif; font-size:13px; color:var(--text);
  outline:none; direction:rtl; transition:border-color .2s;
}
.comment-input:focus{border-color:var(--primary); background:#fff;}
.comment-input::placeholder{color:var(--text-muted);}
.comment-send{
  width:34px; height:34px; border-radius:50%; border:none;
  background:var(--primary); color:#fff; font-size:16px;
  cursor:pointer; display:flex; align-items:center; justify-content:center;
  flex-shrink:0; transition:background .18s;
}
.comment-send:hover{background:var(--primary-dark);}

/* ── SHARE PANEL ── */
.share-panel{
  display:none; border-top:1px solid var(--border);
  padding:14px; background:var(--surface);
  border-radius:0 0 var(--radius) var(--radius);
  animation:slideDown .22s ease;
}
.share-panel.open{display:block;}
.share-panel-title{ font-size:12px; font-weight:700; color:var(--text-muted); margin-bottom:10px; text-transform:uppercase; letter-spacing:.5px; }
.share-btns{ display:flex; gap:8px; flex-wrap:wrap; }
.share-btn-item{
  display:flex; flex-direction:column; align-items:center; gap:5px;
  padding:10px 14px; border-radius:12px; border:1.5px solid var(--border);
  background:var(--bg); cursor:pointer; transition:all .18s; min-width:64px;
  font-family:'Cairo',sans-serif;
}
.share-btn-item:hover{border-color:var(--primary); background:var(--primary-light);}
.share-btn-item .s-ico{font-size:22px;}
.share-btn-item .s-lbl{font-size:11px; font-weight:700; color:var(--text-dim);}
.share-copy-row{
  display:flex; gap:8px; margin-top:12px; align-items:center;
}
.share-copy-input{
  flex:1; background:var(--bg); border:1.5px solid var(--border);
  border-radius:10px; padding:8px 12px; font-size:12px; color:var(--text-muted);
  font-family:'Cairo',sans-serif; outline:none; direction:ltr;
}
.share-copy-btn{
  background:var(--primary); color:#fff; border:none; border-radius:10px;
  padding:8px 14px; font-size:12px; font-weight:700; cursor:pointer;
  font-family:'Cairo',sans-serif; transition:background .18s; white-space:nowrap;
}
.share-copy-btn:hover{background:var(--primary-dark);}
.share-copy-btn.copied{background:var(--green);}



/* loader */
.load-more{text-align:center;padding:20px;color:var(--text-muted);font-size:13px;font-weight:600;display:flex;align-items:center;justify-content:center;gap:8px;}
@keyframes spin{to{transform:rotate(360deg);}}
.spinner{width:18px;height:18px;border:2.5px solid var(--border);border-top-color:var(--primary);border-radius:50%;animation:spin .8s linear infinite;}
@keyframes burstAnim{0%{opacity:1;transform:translate(-50%,-50%) scale(.5);}60%{opacity:1;transform:translate(-50%,-130%) scale(1.4);}100%{opacity:0;transform:translate(-50%,-180%) scale(1);}}

/* ══════════════════════════════════════
   MOBILE BOTTOM NAV
   ══════════════════════════════════════ */


/* Floating compose button — mobile only */
.fab-compose{
  display:none;
  position:fixed;
  bottom:70px;
  left:16px;   /* left side in RTL = visual left */
  width:52px; height:52px;
  border-radius:50%;
  background:linear-gradient(135deg,var(--primary),#3b82f6);
  align-items:center; justify-content:center;
  font-size:26px; color:white; font-weight:300;
  box-shadow:0 4px 20px rgba(26,86,219,.45);
  border:none; cursor:pointer;
  transition:transform .2s, box-shadow .2s;
  z-index:150;
}
.fab-compose:hover{transform:scale(1.08);box-shadow:0 6px 24px rgba(26,86,219,.55);}

/* ══════════════════════════════════════
   MODAL
   ══════════════════════════════════════ */
.overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.45);backdrop-filter:blur(4px);z-index:300;align-items:center;justify-content:center;}
.overlay.open{display:flex;}
.modal{background:var(--surface);border-radius:20px;padding:24px;width:520px;max-width:95vw;max-height:90vh;overflow-y:auto;animation:fadeUp .25s ease;box-shadow:var(--shadow-md);}
.modal-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px;}
.modal-title{font-size:18px;font-weight:900;color:var(--text);}
.modal-x{width:32px;height:32px;border-radius:50%;border:none;background:var(--bg);font-size:16px;cursor:pointer;display:flex;align-items:center;justify-content:center;color:var(--text-dim);}
.modal-x:hover{background:var(--border);}
.post-types{display:grid;grid-template-columns:repeat(5,1fr);gap:8px;margin-bottom:16px;}
.pt-btn{padding:10px 4px;border-radius:10px;border:1.5px solid var(--border);background:var(--bg);color:var(--text-dim);font-size:11px;font-weight:700;text-align:center;cursor:pointer;transition:all .18s;font-family:'Cairo',sans-serif;}
.pt-btn .ico{display:block;font-size:20px;margin-bottom:4px;}
.pt-btn:hover,.pt-btn.active{border-color:var(--primary);background:var(--primary-light);color:var(--primary);}
.modal-textarea{width:100%;background:var(--bg);border:1.5px solid var(--border);border-radius:12px;padding:12px 14px;color:var(--text);font-family:'Cairo',sans-serif;font-size:14px;resize:none;min-height:110px;outline:none;margin-bottom:12px;direction:rtl;}
.modal-textarea:focus{border-color:var(--primary);background:#fff;}
.modal-textarea::placeholder{color:var(--text-muted);}
.modal-row{display:flex;gap:10px;margin-bottom:10px;}
.modal-field{flex:1;}
.modal-field label{display:block;font-size:11px;font-weight:700;color:var(--text-muted);margin-bottom:5px;text-transform:uppercase;}
.modal-input,.modal-select{width:100%;background:var(--bg);border:1.5px solid var(--border);border-radius:10px;padding:9px 12px;font-family:'Cairo',sans-serif;font-size:13px;color:var(--text);outline:none;direction:rtl;}
.modal-input:focus,.modal-select:focus{border-color:var(--primary);background:#fff;}
.modal-input::placeholder{color:var(--text-muted);}
.modal-footer{display:flex;justify-content:flex-end;gap:10px;padding-top:14px;border-top:1px solid var(--border);margin-top:8px;}
.btn-cancel{padding:9px 20px;border-radius:20px;border:1.5px solid var(--border);background:transparent;color:var(--text-dim);font-family:'Cairo',sans-serif;font-size:13px;font-weight:700;cursor:pointer;}
.btn-cancel:hover{background:var(--bg);}
.btn-publish{padding:9px 24px;border-radius:20px;border:none;background:var(--primary);color:white;font-family:'Cairo',sans-serif;font-size:13px;font-weight:700;cursor:pointer;}
.btn-publish:hover{background:var(--primary-dark);}

/* upload area */
.upload-area{
  display:none;
  border:2px dashed var(--border);
  border-radius:12px;
  padding:28px 16px;
  text-align:center;
  cursor:pointer;
  transition:border-color .2s, background .2s;
  margin-bottom:12px;
  background:var(--bg);
}
.upload-area:hover{ border-color:var(--primary); background:var(--primary-light); }
.upload-area.active{ display:block; }
.upload-area .up-ico{ font-size:36px; margin-bottom:8px; }
.upload-area .up-title{ font-size:14px; font-weight:700; color:var(--text); margin-bottom:4px; }
.upload-area .up-sub{ font-size:12px; color:var(--text-muted); }
.upload-area input[type=file]{ display:none; }
.upload-previews{
  display:none;
  flex-wrap:wrap;
  gap:8px;
  margin-bottom:12px;
}
.upload-previews.has-files{ display:flex; }
.preview-thumb{
  width:80px; height:80px;
  border-radius:8px;
  object-fit:cover;
  border:1px solid var(--border);
}
.preview-video-thumb{
  width:80px; height:80px;
  border-radius:8px;
  background:var(--text);
  display:flex; align-items:center; justify-content:center;
  font-size:28px;
  border:1px solid var(--border);
  flex-shrink:0;
  color:white;
}

/* ══════════════════════════════════════
   RESPONSIVE — MOBILE SIDEBAR AS CARDS
   ══════════════════════════════════════ */
@media (max-width:860px){

  /* Stack everything vertically: sidebar ON TOP, feed below */
  .page-wrap{
    grid-template-columns:1fr;
    padding:12px;
    padding-bottom:30px;
  }
  .sidebar-col{
    order:1;           /* sidebar comes FIRST = top of page */
    position:static;
    display:flex;
    flex-direction:row;
    gap:12px;
    width:100%;
    overflow-x:auto;
    overflow-y:hidden;
    scrollbar-width:none;
    padding-bottom:4px;
    -webkit-overflow-scrolling:touch;
  }
  .sidebar-col::-webkit-scrollbar{ display:none; }
  .sidebar-card{
    flex-shrink:0;
    width:272px;
  }
  .feed-col{ order:2; } /* feed below */

  /* On mobile: trips scroll cards stay horizontal — already fine */
  /* Company list: show only top 2 */
  .company-item:nth-child(n+3){ display:none; }

  /* Leaderboard: show only top 3 — already 3, keep */

  .mobile-nav{ display:none; }
  .fab-compose{ display:flex; }

  /* post sizing */
  .media-grid.single img{height:210px;}
  .media-grid.two img{height:150px;}
  .media-grid.three img:first-child{height:145px;}
  .media-grid.three img:not(:first-child){height:110px;}
  .promo-post img{height:175px;}
  .video-thumb img,.video-thumb video{height:195px;}
}

@media (max-width:480px){
  .post-card{padding:12px;}
  .post-name{font-size:13px;}
  .post-text{font-size:13px;}
  .act-btn{padding:6px 8px;font-size:12px;}
  .act-btn .ico{font-size:14px;}
  /* hide text labels in compose bar, keep icons */
  .c-action span:not(.ico){display:none;}
  .c-action{padding:7px 12px;}
  .compose-actions-row{gap:0;}
}


/* ── New dynamic elements ── */
.co-logo-text,.lb-logo-text{
  width:38px;height:38px;border-radius:50%;
  background:linear-gradient(135deg,#1a56db,#3b82f6);
  color:#fff;display:flex;align-items:center;justify-content:center;
  font-weight:700;font-size:15px;flex-shrink:0;
}
.lb-logo-text{width:34px;height:34px;font-size:13px;}
.co-logo img,.lb-logo img{width:38px;height:38px;border-radius:50%;object-fit:cover;}
.feed-co-logo img{width:44px;height:44px;border-radius:10px;object-fit:cover;}

.trip-mini-link{text-decoration:none;color:inherit;}

.compose-guest{
  display:flex;align-items:center;justify-content:center;
  padding:20px;gap:14px;flex-direction:column;
}
.compose-guest-inner{
  display:flex;align-items:center;gap:14px;flex-wrap:wrap;justify-content:center;
}
.compose-guest-text{color:#666;font-size:14px;}
.btn-login-cta{
  background:#1a56db;color:#fff;border:none;border-radius:8px;
  padding:9px 20px;font-size:14px;font-weight:600;cursor:pointer;
  text-decoration:none;display:inline-block;
}
.btn-login-cta:hover{background:#1447c0;}

.alert-success{
  background:#d1fae5;border:1px solid #6ee7b7;color:#065f46;
  border-radius:10px;padding:12px 16px;margin-bottom:12px;font-size:14px;
}

.empty-feed{
  text-align:center;padding:60px 20px;background:#fff;border-radius:16px;
  border:1px solid #eee;
}
.empty-feed-ico{font-size:48px;margin-bottom:12px;}
.empty-feed-text{color:#666;font-size:15px;margin-bottom:16px;}

.empty-notice{color:#aaa;font-size:13px;text-align:center;padding:10px 0;}

.user-av-text{
  width:40px;height:40px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-weight:700;font-size:15px;color:#fff;flex-shrink:0;
}

/* ── New modal styles ── */
.upload-label{
  display:flex;flex-direction:column;align-items:center;cursor:pointer;
}
.media-toggle-row{
  display:flex;gap:10px;margin-bottom:14px;
}
.media-toggle-btn{
  flex:1;display:flex;align-items:center;justify-content:center;gap:7px;
  padding:10px 14px;border-radius:10px;
  border:1.5px solid var(--border);background:var(--bg);
  color:var(--text-dim);font-family:'Cairo',sans-serif;font-size:13px;
  font-weight:700;cursor:pointer;transition:all .18s;
}
.media-toggle-btn .ico{font-size:18px;}
.media-toggle-btn:hover{border-color:var(--primary);background:var(--primary-light);color:var(--primary);}
.media-toggle-btn.active{border-color:var(--primary);background:var(--primary-light);color:var(--primary);}

.modal-company-row{margin-bottom:14px;}
.modal-field-full{width:100%;}
.modal-label{
  display:block;font-size:12px;font-weight:700;
  color:var(--text-muted);margin-bottom:6px;
}
.modal-label .optional{font-weight:400;color:var(--text-muted);font-size:11px;}

/* Rating section — hidden by default */
.rating-section{
  display:none;background:var(--bg);border-radius:12px;
  padding:14px 16px;margin-bottom:14px;
  border:1.5px solid var(--border);
}
.rating-section.visible{display:block;}

/* Star picker — RTL: 5 on right, 1 on left, right-to-left fill */
.star-picker{
  display:flex;flex-direction:row-reverse;justify-content:flex-end;
  gap:4px;margin:8px 0 6px;
}
.star-picker input{display:none;}
.star-pick-lbl{
  font-size:32px;color:#ddd;cursor:pointer;
  transition:color .15s,transform .15s;
  line-height:1;
}
/* fill selected star and all stars to its right (higher value) */
.star-picker input:checked ~ label,
.star-picker label:hover,
.star-picker label:hover ~ label{
  color:#f59e0b;
}
.star-pick-lbl:hover{transform:scale(1.15);}
.star-pick-label{
  font-size:13px;font-weight:700;color:var(--primary);
  min-height:20px;
}

/* preview wrap with remove button */
.preview-img-wrap{position:relative;display:inline-block;}
.preview-img-wrap .preview-thumb{display:block;}
.preview-remove{
  position:absolute;top:-6px;left:-6px;
  width:20px;height:20px;border-radius:50%;
  background:#ef4444;color:#fff;border:none;
  font-size:10px;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  line-height:1;
}
.preview-video-thumb{
  flex-direction:column;gap:4px;
}
.pv-ico{font-size:26px;}
.pv-name{
  font-size:9px;color:#fff;
  overflow:hidden;width:72px;
  text-overflow:ellipsis;white-space:nowrap;
  text-align:center;
}

/* ── Comments DB states ── */
.comments-loading{
  display:flex;align-items:center;justify-content:center;
  min-height:60px;
}
.comments-spinner{display:flex;align-items:center;justify-content:center;padding:16px;}
.no-comments{
  text-align:center;color:var(--text-muted);font-size:13px;
  padding:20px 0;
}

/* ── Guest login popup ── */
.gl-modal{
  position:relative;
  background:var(--surface);
  border-radius:24px;
  padding:36px 32px 32px;
  width:340px;
  max-width:92vw;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:10px;
  text-align:center;
  box-shadow:0 20px 60px rgba(0,0,0,.18);
  animation:fadeUp .25s ease;
}
.gl-close{
  position:absolute;
  top:14px;left:14px;
  width:30px;height:30px;
  border-radius:50%;
  border:none;
  background:var(--bg);
  color:var(--text-dim);
  font-size:14px;
  cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  transition:background .15s;
}
.gl-close:hover{background:var(--border);}
.gl-icon-wrap{
  width:72px;height:72px;
  border-radius:50%;
  background:#EEF2FF;
  display:flex;align-items:center;justify-content:center;
  margin-bottom:6px;
}
.gl-icon-wrap svg{width:48px;height:48px;}
.gl-title{
  font-size:20px;font-weight:900;
  color:var(--text);margin:0;
}
.gl-text{
  font-size:13px;color:var(--text-dim);
  line-height:1.7;margin:0 0 6px;
}
.gl-btn-primary{
  display:block;width:100%;
  padding:12px 0;
  border-radius:50px;
  background:var(--primary);
  color:#fff;
  font-family:'Cairo',sans-serif;
  font-size:14px;font-weight:700;
  text-decoration:none;
  text-align:center;
  transition:background .15s,transform .1s;
  margin-top:4px;
}
.gl-btn-primary:hover{background:var(--primary-dark);transform:translateY(-1px);}
.gl-btn-ghost{
  width:100%;padding:10px 0;
  border-radius:50px;
  border:1.5px solid var(--border);
  background:transparent;
  color:var(--text-dim);
  font-family:'Cairo',sans-serif;
  font-size:13px;font-weight:700;
  cursor:pointer;
  transition:background .15s;
}
.gl-btn-ghost:hover{background:var(--bg);}