/* ============================================================
   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.
   This was wrapped in a max-width:767px media query, so the logo only centred on
   phones and stayed left-aligned in the form column on desktop. Requested to be
   centred everywhere, so the media query is gone - the rules themselves are
   unchanged. style.css also centres it under 968px; that rule is now redundant
   but harmless, and left alone so this file stays the single override point. */
.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; }
}


/* sb-restaurant-time-fix: move delivery-time pill onto the photo (bottom-right, small) */
.rst-card2 .rst-card2-time {
    position: absolute;
    top: 150px;
    right: 8px;
    transform: translateY(calc(-100% - 8px));
    z-index: 5;
    font-size: 9.5px;
    padding: 3px 8px;
    margin: 0;
    line-height: 1.4;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

/* ============================================================
   REEL ACTION ICONS
   The like / comment / share buttons are 48px circles with a 26px glyph
   floating in the middle, which reads as a big empty disc with something
   tiny in it - hard to make out over video, worse on a phone. Bigger circle,
   noticeably bigger glyph, and a heavier stroke so the outline survives
   against a bright frame.
   ============================================================ */
.reel-action-btn .action-btn {
  width: 52px !important;
  height: 52px !important;
  background: rgba(255, 255, 255, .10) !important;
  backdrop-filter: blur(12px) saturate(140%) !important;
  -webkit-backdrop-filter: blur(12px) saturate(140%) !important;
  border: 1px solid rgba(255, 255, 255, .18) !important;
}
.reel-action-btn .action-btn svg,
.reel-action-btn .action-btn i {
  width: 34px !important;
  height: 34px !important;
  font-size: 32px !important;
  filter: drop-shadow(0 1px 3px rgba(0, 0, 0, .65));
}
.reel-action-btn .action-btn svg {
  stroke-width: 2px !important;
}
.reels-close-btn i {
  font-size: 26px !important;
}
@media (max-width: 767px) {
  .reel-action-btn .action-btn {
    width: 60px !important;
    height: 60px !important;
  }
  .reel-action-btn .action-btn svg,
  .reel-action-btn .action-btn i {
    width: 34px !important;
    height: 34px !important;
    font-size: 32px !important;
  }
}

/* ============================================================
   OFFER / JOB IMAGES ON DESKTOP
   The existing cap on these images sits inside a max-width: 767px block, so
   it only ever applied to phones. On a desktop a tall portrait photo had
   nothing holding it back and filled the whole screen - which is what a
   customer reported. Same treatment as phones, just a larger ceiling.
   ============================================================ */
@media (min-width: 768px) {
  .post-offer img,
  .post-job img,
  .offer-gallery-main img,
  .job-post-image img {
    max-height: 460px !important;
    object-fit: cover !important;
    width: 100% !important;
  }
}
/* ============================================================
   PROFILE PAGE ON PHONES
   The side column - Profile Completion, Intro, Search, Photos - stacks above
   the posts on a narrow screen, so opening someone's profile meant scrolling
   past four cards before reaching a single post. Every one of them is already
   reachable from the tab strip directly above, so on phones the column comes
   off and the profile opens straight onto the posts. Desktop keeps it.
   Anchored to .profile-tabs-wrapper so this can only ever match a profile.
   ============================================================ */
@media (max-width: 767px) {
  .profile-tabs-wrapper + .row > .col-lg-4.order-1 { display: none !important; }
}
/* ============================================================
   SEND BUTTON BEHIND THE MOBILE NAV BAR
   The chat panel was sized to the full viewport height, so its composer
   ended up underneath the fixed bottom navigation - 70px tall, z-index 999.
   The send button was rendered and enabled, it simply could not be tapped
   because the nav bar was on top of it. That is why messages could not be
   sent on a phone. Shortening the panel lifts the composer clear of the bar.
   ============================================================ */
@media (max-width: 767px) {
  .panel-messages.cr-chat-area {
    height: calc(100vh - 190px) !important;
    max-height: calc(100vh - 190px) !important;
  }
}
/* ============================================================
   COMPOSE ROW ON PHONES
   Send button lifted up beside the message box (the footer script moves it
   into .cr-compose-row) and the box itself rounded off.
   ============================================================ */
@media (max-width: 767px) {
  .cr-compose-row {
    display: flex;
    align-items: flex-end;
    gap: 8px;
    width: 100%;
  }
  .cr-compose-row textarea.js_post-message {
    flex: 1 1 auto;
    border-radius: 22px !important;
    padding: 12px 16px !important;
  }
  .cr-compose-row .cr-send-btn {
    flex: 0 0 46px;
    width: 46px !important;
    height: 46px !important;
    margin: 0 !important;
  }
}
/* ============================================================
   OFF-CANVAS MENU ON PHONES
   The slide-out menu is as tall as its content - the settings menu runs to
   about 1000px - while the screen is around 550px, and it had no scrolling of
   its own. Everything past Blocking simply could not be reached, because the
   page behind it was covered. Capping it to the visible area and letting it
   scroll internally makes the whole menu usable. Applies to every off-canvas
   menu, not just settings.
   ============================================================ */
@media (max-width: 767px) {
  .sg-offcanvas.active .sg-offcanvas-sidebar {
    max-height: calc(100vh - 150px) !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
  }
}
/* ============================================================
   REEL COMMENTS - WRONG CLOSE BUTTON
   Opening the comments on a reel left two X buttons on screen: the comments
   panel's own close at the top right, and the reels close at the top left.
   The reels one quits reels altogether and lands you on the home page, which
   is not what anyone reaching for X while reading comments expects. It is
   hidden while a comments panel is open, so the only X available is the one
   that closes the comments and returns to the reel.
   ============================================================ */
.reels-wrapper:has(.reel-container.comments-shown) .reels-close-btn {
  display: none !important;
}
/* ============================================================
   REEL COMMENTS AS A BOTTOM SHEET
   Comments used to cover the whole screen, and the X people reached for was
   the one that quits reels entirely and lands on the home page. There were in
   fact two of those: the close in the reels header, and an unstyled per-reel
   button carrying an inline onclick - hiding only the first one left the
   second still sitting there, which is why this looked unfixed.
   Comments now rise from the bottom as a sheet with the reel still visible
   above, and while it is open both quit-reels buttons are hidden, so the only
   X on screen is the sheet's own - which closes comments and nothing else.
   ============================================================ */
@media (max-width: 767px) {
  .reel-container.comments-shown .reel-comments-wrapper {
    position: fixed !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    top: auto !important;
    width: 100% !important;
    height: 74vh !important;
    border-radius: 18px 18px 0 0 !important;
    z-index: 3000 !important;
    box-shadow: 0 -8px 30px rgba(0, 0, 0, .45) !important;
    overflow: hidden !important;
  }
  .reel-container.comments-shown .reel-comments-header {
    position: sticky !important;
    top: 0 !important;
    z-index: 2 !important;
  }
  .reel-container.comments-shown .reel-comments-close {
    width: 44px !important;
    height: 44px !important;
    font-size: 20px !important;
  }
}
/* The unstyled per-reel quit button. It has no class of its own, so it is
   reached by position and by the inline onclick it carries. */
.reel-container.comments-shown > .position-relative > button[onclick] {
  display: none !important;
}
body:has(.reel-container.comments-shown) .sb-bubble {
  display: none !important;
}
/* ============================================================
   REACTIONS POPUP - YAY AND THE REST FALLING OUT OF THE CARD
   Sngine pins this popup to width:144px below 480px. The seven reactions are
   43-48px each and float left, so exactly three fit; the container keeps its
   single-row height and reactions four to seven - yay, wow, sad, angry - hang
   outside it. That is the 'fourth one is outside the card': yay is number 4.
   Reproduced by forcing that width, then confirmed fixed with it still forced.
   The width now hugs its content so all seven sit on one row, and it can never
   exceed the screen. On a genuinely tiny screen the items wrap onto further
   rows and the box grows to hold them, instead of spilling - verified at a
   forced 150px, where it became four rows tall with nothing outside.
   float is swapped for inline-block because floats do not add to their
   parent's height, which is what let them escape in the first place.
   ============================================================ */
.reactions-container {
  width: max-content !important;
  max-width: calc(100vw - 20px) !important;
  height: auto !important;
  box-sizing: border-box !important;
  white-space: normal !important;
  font-size: 0 !important;
}
.reactions-container .reactions_item {
  float: none !important;
  display: inline-block !important;
  vertical-align: middle !important;
}
/* ============================================================
   THE IDLE ANIMATION THROWING YAY OUT OF THE CARD
   Each reaction in the picker runs its own animate.css loop - bounce, swing,
   heartBeat and so on. Yay runs 'pulse', and on this build its computed
   transform came out as matrix(1.078, 0, 0, 1.078, -19, -19): a scale plus a
   19px shift up and to the left. That lifted the image 16px clear of the top
   of the white pill, which is exactly the reaction sitting outside the card.
   The other six animate within their own box, so only yay showed it.
   Measured live: yay's image sat at y=204 while the card started at y=220.
   The looping animation comes off the picker images and is replaced by a
   scale on hover, which cannot move anything out of place. The reaction
   animations elsewhere on the page are untouched.
   ============================================================ */
.reactions-container .reactions_item img {
  animation: none !important;
  transform: none !important;
  transform-origin: center center !important;
  transition: transform .18s ease !important;
}
.reactions-container .reactions_item:hover img {
  transform: scale(1.18) !important;
}