/**
 * Site-wide fixes — 2026-07-26.
 *
 * One file, loaded everywhere, so the whole batch can be pulled in one move if
 * anything misbehaves. Each block says which reported fault it answers.
 */

/* ---- 1. two buttons look active at once ---------------------------------
   custom-css.css paints .page-switcher .menu-item button:hover red with no
   touch guard, so on iOS the tapped button keeps its hover while the other
   keeps current-menu-item. On a device with no hover, only the current one
   may be red. */

@media (hover: none) {
  .page-switcher .menu-item:not(.current-menu-item) button,
  .page-switcher .menu-item:not(.current-menu-item) a,
  .deal-type-filter .toggle-loop-filter-item:not(.active) {
    background-color: transparent !important;
    color: #333 !important;
  }
  .page-switcher .menu-item:not(.current-menu-item) button::before,
  .deal-type-filter .toggle-loop-filter-item:not(.active)::before {
    background-color: #333 !important;
  }
}

/* ---- 2. floating bubbles take the click meant for the card ---------------
   #tiktikShareWrap sits at z-index 9998 over the card's own WhatsApp link, and
   elementsFromPoint returns the share button first. The card's controls are in
   the same stacking context as the bubbles, so lifting them is enough to win
   the click back; the bubbles keep working everywhere else. */

.ticket-loop__whatsapp,
.ticket-loop__button,
.ticket-loop__price {
  position: relative;
  z-index: 10000;
}

/* NOTE 2026-07-26: an earlier version set inset-inline-start on the share
   bubble. Its own stylesheet already sets left, so pinning both edges stretched
   it to the full width of the desktop — a white bar lying across the page. The
   bubble keeps its own position; on a phone it is hidden further down. */

/* ---- 3. accessibility button under the 44px touch minimum ----------------
   Negishot renders its button inside a shadow root, so its own rules cannot be
   reached from here. The host element can be: scaling it scales what it holds.
   40 x 1.15 = 46. */

/* the host carries transform:none !important inline, so the size is set from
   inside its shadow root by site-fixes.js instead. Nothing to do here. */

/* ---- 4. the guide at the foot of a league page never ends ----------------
   .tiktik-deep-guide runs 12,833px — about 19 screens. Folded to one screen
   with the same read-more pattern the intro text already uses. */

.tiktik-deep-guide {
  position: relative;
  max-height: 420px;
  overflow: hidden;
  transition: max-height .35s ease;
}

.tiktik-deep-guide.is-open { max-height: none; }

.tiktik-deep-guide:not(.is-open)::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  height: 110px;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0), #fff 85%);
  pointer-events: none;
}

.tiktik-guide-more {
  display: block;
  margin: 10px auto 24px;
  padding: 10px 26px;
  border: 1px solid var(--clr-primary, #b53b3b);
  border-radius: 24px;
  background: #fff;
  color: var(--clr-primary, #b53b3b);
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
}

/* ---- 5. "load more" in place of the page numbers -------------------------
   100 cards a page keeps the server at ~2.5s; the button carries the reader
   on without ever asking them to pick a page number. */

.tk-load-more {
  display: block;
  margin: 18px auto 6px;
  padding: 13px 42px;
  min-height: 44px;
  border: 0;
  border-radius: 26px;
  background: var(--clr-primary, #b53b3b);
  color: #fff;
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
}

.tk-load-more[disabled] { opacity: .6; cursor: default; }

/* ---- 6. the search panel sat on top of the page -------------------------
   .music-filter / .sport-filter are absolutely positioned at z-index 999, so
   the box landed on the hero image and cut the title in half, and the close
   mark measured 7x16 — a sixth of the 44px a finger needs. In the concerts
   panel it had no size at all. */

@media (max-width: 767px) {
  .sport-filter,
  .music-filter {
    position: static !important;
    background: #fff;
    padding: 10px 12px 14px;
    box-shadow: 0 6px 18px rgba(0, 0, 0, .08);
  }
}

.close-filter {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: 44px !important;
  height: 44px !important;
  font-size: 22px;
  line-height: 1;
  color: #555;
  cursor: pointer;
}

/* the results page had no headline and no count */
.search-template__title {
  font-size: 26px;
  margin: 0 0 14px;
}

.search-template__count {
  margin: 14px 0 4px;
  font-size: 16px;
  font-weight: 700;
}

.search-template__hint {
  font-weight: 400;
  color: #6b7480;
  font-size: 14px;
}

.search-template__empty { text-align: center; padding: 48px 20px; }
.search-template__empty h2 { margin: 0 0 12px; font-size: 24px; }
.search-template__empty p { margin: 0 auto 24px; max-width: 520px; font-size: 16px; line-height: 1.6; }

/* ---- 7. the reviews page opened zoomed out ------------------------------
   The off-canvas drawer is inline-styled position:absolute with
   transform:translateX(102%), so while closed it still parked 332px past the
   right edge and stretched the document to 506px on a 390px phone — the whole
   page then rendered at 77% with a dead band down the side. Fixed positioning
   takes it out of the document's width without changing how it slides in. */

.ttk-dr { position: fixed !important; }

/* the drawer slides in from outside its own container, so the container is
   what should clip it — an off-canvas panel is exactly what overflow:hidden on
   a full-screen shell is for. Without it the parked drawer stretched the
   document to 506px and the phone rendered the whole page at 77%. */
#ttk-mnav { overflow: hidden; }

/* ---- 8. the "read more" link inside a review sticks out ------------------
   The plugin pins it with left:20px AND right:-20px, so on an RTL page it
   measures 328px inside a 330px card and ends 19px past the edge. Twelve cards
   later the document is 506px wide on a 390px phone, which is what made the
   reviews page render at 77%. Nothing is hidden — the link is simply held
   inside the card it belongs to. */

#wprev-slider-1 .wprs_rd_more,
#wprev-slider-1 .wprs_rd_less,
.wprevpro .wprs_rd_more,
.wprevpro .wprs_rd_less {
  inset-inline: 20px !important;
  width: auto !important;
  max-width: calc(100% - 40px);
}

/* the same card pins its source badge with right:445px, which on a 330px card
   lands it at x = -115 — off the left edge of an RTL page, and that is exactly
   the 116px the document was over. Letting its own left offset place it puts
   the badge back on the card. */

@media (max-width: 900px) {
  #wprev-slider-1 .indrevdiv::after,
  .wprevpro .indrevdiv::after {
    right: auto !important;
  }
}

/* ---- 9. the share bubble ran across the page ----------------------------
   Yehuda, 2026-07-26: "כפתור שיתוף רץ על הדף". It is a fixed bubble with no
   page of its own to belong to, so on a phone it always lands on a card. The
   phone already has a share control in its own browser bar; the bubble stays
   on the desktop, where there is room for it. */

@media (max-width: 767px) {
  #tiktikShareWrap { display: none !important; }
}

/* ---- 10. a way out of the wizard ----------------------------------------
   The wizard's own header carried a phone number and a logo that was not a
   link, and nothing else — no back. */

header.hdr { position: relative; }

.tk-exit {
  position: absolute;
  inset-block-start: 50%;
  inset-inline-start: 10px;
  transform: translateY(-50%);
  width: 38px;
  height: 38px;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, .18);
  color: #fff;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
}

.tk-exit:hover { background: rgba(255, 255, 255, .3); }

/* ---- 11. the search switch button was squeezed into two lines ------------
   On the desktop home page "חפש הופעות" wrapped inside an 83px box, so it read
   as a broken red block hanging off the side of the strip rather than a button. */

.hp-filter__switch-btn {
  white-space: nowrap;
  padding-inline: 20px;
}