/* ============================================================
   hi24 — site-wide tweaks (loaded after the theme CSS, LTR + RTL)
   ============================================================ */

/* 1. Tighter vertical rhythm: 5px between cards / widgets / posts
   ("html body" prefix so these beat the theme's inline !important rules) */
html body .card,
html body .ftabs-wrapper,
html body .card.hi-quick-card,
html body .card.stories-wrapper-container,
html body .card.suggestion-card,
html body .card.main-side-nav-card,
html body .post.card,
html body .posts-feed > .card,
html body .posts-feed > .post,
html body .js_posts-feed > .card,
html body .js_posts-feed > .post,
html body [class*="widget"].card { margin-bottom: 5px !important; }

/* 2. Feed tabs strip: same corners as the publisher card, no ">" arrow */
.ftabs-wrapper { border-radius: 20px !important; }
.ftabs-wrapper .ftabs-nav { width: 30px !important; height: 30px !important; min-width: 30px !important; font-size: 11px !important; }
/* the theme's script slides the track with a transform, so the viewport clips
   and the track must be free to be wider than the viewport */
.ftabs-wrapper .ftabs-viewport { overflow: hidden !important; }
.ftabs-wrapper .ftabs-track { overflow: visible !important; width: max-content !important; min-width: 100%; }

/* 3. Offers / Jobs: keep images from swallowing the screen on phones */
@media (max-width: 767px) {
  .offer-image-wrap img,
  .offer-image-wrap,
  .job-card-image,
  .job-card-image-link img { max-height: 150px !important; object-fit: cover !important; }
  .offer-card .offer-image-wrap { overflow: hidden; }
  .post-offer img, .post-job img,
  .offer-gallery-main img, .job-post-image img { max-height: 220px !important; object-fit: cover !important; width: 100% !important; }
}
/* never let an image push the layout wider than the screen */
img { max-width: 100%; height: auto; }
.post .post-media img, .post-body img, .post-text img { max-width: 100% !important; }
html, body { overflow-x: clip; }  /* clip (not hidden) so position:sticky keeps working */

/* 4. Login / register: logo centred on phones */
@media (max-width: 767px) {
  .sng-login-logo { display: flex !important; flex-direction: column; align-items: center !important; justify-content: center !important; text-align: center !important; width: 100% !important; }
  .sng-login-logo img, .sng-login-logo a { margin-left: auto !important; margin-right: auto !important; }
}

/* 5. Reels: volume/mute button moves to the left-side stack (under the arrows) */
.reel-video-container .plyr__controls { overflow: visible !important; }
.reel-video-container .plyr__controls .plyr__volume {
  position: absolute !important;
  left: 20px !important;
  bottom: calc(50vh - 160px) !important;
  width: 48px !important; height: 48px !important;
  border-radius: 50% !important;
  background: rgba(0, 0, 0, .45) !important;
  backdrop-filter: blur(6px);
  display: flex !important; align-items: center !important; justify-content: center !important;
  margin: 0 !important; padding: 0 !important;
  z-index: 5;
}
.reel-video-container .plyr__controls .plyr__volume .plyr__control { padding: 0 !important; width: 48px; height: 48px; display: flex; align-items: center; justify-content: center; color: #fff; }
.reel-video-container .plyr__controls .plyr__volume input[type="range"] { display: none !important; }
[dir="rtl"] .reel-video-container .plyr__controls .plyr__volume { left: auto !important; right: 20px !important; }

/* 6. RTL (Arabic) safety: flip the few hard-coded LTR bits */
[dir="rtl"] .hi-quick + .hi-quick::before { left: auto; right: -1px; }
[dir="rtl"] .hi-quick-arrow { transform: scaleX(-1); }
[dir="rtl"] .main-side-nav > li > a { text-align: right; }
[dir="rtl"] .rst-float-basket { right: auto !important; left: 18px !important; }
[dir="rtl"] .rst-mkt2-corner { right: auto; left: 12px; }


/* 7. Layout: wider middle column, tighter gutters, no sidebar scrollbar, finer gaps */
@media (min-width: 1400px) { html body .container.sg-offcanvas { max-width: 96%; } }
@media (min-width: 1200px) and (max-width: 1399px) { html body .container.sg-offcanvas { max-width: 1200px; } }
html body .container.sg-offcanvas,
html body .container-fluid.sg-offcanvas { margin-top: 4px !important; }
html body .container.sg-offcanvas > .row,
html body .sg-offcanvas-mainbar > .row { --bs-gutter-x: 14px; }
/* left sidebar: scrolls, but without a visible scrollbar */
.sg-offcanvas-sidebar { scrollbar-width: none !important; -ms-overflow-style: none; }
.sg-offcanvas-sidebar::-webkit-scrollbar { display: none !important; width: 0 !important; }
/* publisher -> tabs strip: no extra gap */
html body .ftabs-wrapper { margin-top: 0 !important; }
/* posts and right-hand widgets: a touch more air than the top cards */
html body .middle-feed .posts-feed > .card,
html body .middle-feed .posts-feed > .post,
html body .middle-feed .js_posts-feed > .card,
html body .middle-feed .js_posts-feed > .post,
html body .middle-feed .post.card,
html body .middle-feed .ftabs-wrapper { margin-bottom: 8px !important; }
html body .right-sidebar .card,
html body .js_sticky-sidebar .card { margin-bottom: 8px !important; }

/* 8. "Meet New People" box: tighter rows, buttons lined up */
html body .suggestion-card .card-header { padding: 12px 14px 4px !important; }
html body .suggestion-card .card-body.with-list { padding: 0 10px 8px !important; }
html body .suggestion-card ul { display: flex; flex-direction: column; gap: 0 !important; }
html body .suggestion-card li.feeds-item { padding: 0 !important; margin: 0 !important; }
html body .suggestion-card li.feeds-item + li.feeds-item { border-top: 1px solid #f1f3f6; }
html body .suggestion-card .data-container { padding: 5px 0 !important; align-items: center !important; }
html body .suggestion-card .data-avatar img { width: 34px !important; height: 34px !important; }
html body .suggestion-card .data-content { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-width: 0; }
html body .suggestion-card .data-content > .mt5 { margin-top: 0 !important; flex: 1; min-width: 0; }
html body .suggestion-card .data-content .float-end { float: none !important; order: 2; flex: 0 0 auto; }
html body .suggestion-card .btn-custom-add,
html body .suggestion-card .btn-custom-follow,
html body .suggestion-card [class*="btn-custom"] { min-width: 62px; height: 28px !important; padding: 0 12px !important; font-size: 12px !important; justify-content: center; }
body.night-mode .suggestion-card li.feeds-item + li.feeds-item { border-top-color: rgba(255,255,255,.07); }

/* 9. Left menu: icons turn dark on hover */
html body .main-side-nav > li > a:hover .main-icon,
html body .main-side-nav > li > a:hover i.main-icon { background: #fff !important; fill: #1f2430 !important; color: #1f2430 !important; box-shadow: 0 6px 14px rgba(0,0,0,.12) !important; }
html body .main-side-nav > li > a:hover .main-icon path,
html body .main-side-nav > li > a:hover .main-icon svg { fill: #1f2430 !important; }
/* quick-links card: no trailing arrow */
html body .hi-quick-card .hi-quick-arrow { display: none !important; }

/* 10. Right-edge floating chat strip (avatars + chat/settings bubbles): hidden */
html body .chat-sidebar { display: none !important; }

/* 11. Fluid layout: use the full width (the theme reserved 90px on the right for the chat strip) */
html body .container-fluid.sg-offcanvas { width: 100% !important; max-width: 100% !important; margin: 4px 0 0 !important; padding-left: 16px !important; padding-right: 16px !important; }
/* left menu: sticky and as tall as the window, scrolls inside without a scrollbar */
@media (min-width: 768px) {
  html body .sg-offcanvas-sidebar { position: sticky !important; top: 80px !important; align-self: flex-start !important; max-height: calc(100vh - 88px) !important; overflow-y: auto !important; }
}