/* ========================================================================
   MOBILE AJAX SEARCH RESULTS (full CSS)
   - Tabs
   - Panes (General = horizontal slider, Actors = vertical list)
   - Poster cards with overlay text
   ======================================================================== */

/* base wrapper (if you still use it somewhere) */
.search-results{
  width: 100%;
  background: #fff;
  margin-top: 20px;
}

/* container */
.search-result-mb[hidden]{ display:none !important; }

.search-result-mb.is-visible{
  display:block;
  position:absolute; /* change to fixed/relative if needed */
  width:min(1024px, 97vw);
  margin-top:10px;
  background: var(--white);
  border-radius:12px;
  overflow:hidden;
  box-shadow: 0 20px 60px rgba(0,0,0,.35);
  z-index:9999;
}

/* inner */
.asr{ width:100%; }

/* tabs */
.asr__tabs{
  display:flex;
  border-bottom:1px solid rgba(0,0,0,.08);
}

.asr__tab{
  box-shadow: 0px 1px 3px 0px var(--faded);

  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  border:0;
  background: var(--heading-color);
  color: var(--white);
  padding: 10px;
  cursor:pointer;
  opacity:.85;
  width: 50%;
}

.asr__tab.is-active{
  opacity:1;
  background: var(--white);
  color: var(--black);
}

.asr__tab-count{
  font-size:12px;
  padding:2px 8px;
  color: var(--adjaranet-color-light);
}


/* panes */
.asr__panes{ padding:10px; }

.asr__pane{ display:none; }
.asr__pane.is-active{ display:block; }

.asr__loading,
.asr__empty{
  padding:14px 10px;
  opacity:.8;
  color: var(--black);
}

/* ========================================================================
   GENERAL tab = horizontal slider
   ======================================================================== */
.asr__pane[data-pane="general"].is-active{
  display:flex;              /* ✅ ONLY when active */
  gap: 12px;
  overflow-x: auto;
  overflow-y: hidden;
  padding: 6px 4px 10px;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
}

/* scrollbar (optional) */
.asr__pane[data-pane="general"].is-active::-webkit-scrollbar{ height: 8px; }
.asr__pane[data-pane="general"].is-active::-webkit-scrollbar-thumb{
  background: rgba(0,0,0,.18);
  border-radius: 999px;
}

/* ========================================================================
   ACTORS tab = vertical list (simple)
   ======================================================================== */
.asr__pane[data-pane="actors"].is-active{
  display:flex;
  flex-direction:column;
  gap: 10px;
}

/* ========================================================================
   Poster card (overlay text like screenshot)
   ======================================================================== */
.asr__card--poster{
  position:relative;
  display:block;
  border-radius: 14px;
  overflow:hidden;
  aspect-ratio: 2 / 3;
  text-decoration:none;
  color:#fff;
  background: rgba(0,0,0,.06);
}

/* general slider card width */
.asr__pane[data-pane="general"].is-active .asr__card--poster{
  flex: 0 0 140px;
  scroll-snap-align: start;
}

@media (min-width: 520px){
  .asr__pane[data-pane="general"].is-active .asr__card--poster{ flex-basis: 160px; }
}
@media (min-width: 900px){
  .asr__pane[data-pane="general"].is-active .asr__card--poster{ flex-basis: 180px; }
}

/* actors list card: make it more “row” style */
.asr__pane[data-pane="actors"].is-active .asr__card--poster{
  aspect-ratio: auto;
  height: 74px;
  display:flex;
  align-items:center;
  box-shadow: none;
  background: rgba(0,0,0,.04);
}

/* media */
.asr__card--poster .asr__media{
  position:absolute;
  inset:0;
}

.asr__card--poster .asr__media img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
}

/* overlay gradient */
.asr__card--poster .asr__overlay{
  position:absolute;
  inset:0;
  pointer-events:none;
  background: linear-gradient(
    to top,
    rgba(0,0,0,.78) 0%,
    rgba(0,0,0,.25) 45%,
    rgba(0,0,0,0) 70%
  );
}

/* text */
.asr__card--poster .asr__text{
  position:absolute;
  left: 12px;
  right: 12px;
  bottom: 12px;
  z-index: 2;
  display:flex;
  flex-direction:column;
  gap: 3px;
}

.asr__card--poster .asr__t1{
  font-size: 14px;
  font-weight: 700;
  line-height: 1.15;
  text-shadow: 0 2px 10px rgba(0,0,0,.65);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.asr__card--poster .asr__t2{
  font-size: 12px;
  font-weight: 500;
  opacity: .9;
  line-height: 1.15;
  text-shadow: 0 2px 10px rgba(0,0,0,.65);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* actors list overrides: show small avatar + text on right */
.asr__pane[data-pane="actors"].is-active .asr__card--poster .asr__media{
  position:relative;
  width: 54px;
  height: 74px;
  flex: 0 0 54px;
}

.asr__pane[data-pane="actors"].is-active .asr__card--poster .asr__media img{
  position:relative;
  width:100%;
  height:100%;
  object-fit:cover;
}

.asr__pane[data-pane="actors"].is-active .asr__card--poster .asr__overlay{
  display:none;
}

.asr__pane[data-pane="actors"].is-active .asr__card--poster .asr__text{
  position:relative;
  left:auto; right:auto; bottom:auto;
  padding: 0 12px;
  color: var(--black);
}

.asr__pane[data-pane="actors"].is-active .asr__card--poster .asr__t1,
.asr__pane[data-pane="actors"].is-active .asr__card--poster .asr__t2{
  text-shadow:none;
  color: var(--black);
  opacity:1;
}

.asr__pane[data-pane="actors"].is-active .asr__card--poster .asr__t2{
  display:none;
}

/* hover */
.asr__card--poster:hover{
  transform: translateY(-1px);
}

/* small screens: a bit wider cards in slider */
@media (max-width: 420px){
  .asr__pane[data-pane="general"].is-active .asr__card--poster{ flex-basis: 150px; }
}