/* ==========================================================
   Akedi Reels + Explore — shared UI polish
   Visual-only layer. Feed/search/filter logic stays in existing JS/views.
   ========================================================== */

:root{
  --akedi-deep:#075f46;
  --akedi-deeper:#053c2e;
  --akedi-green:#12c25b;
  --akedi-mint:#e9f7f1;
  --akedi-cream:#fff8ea;
  --akedi-orange:#f28b25;
  --akedi-orange-hover:#df7615;
  --akedi-ink:#14231e;
  --akedi-muted:#6f7f79;
  --akedi-line:#dce9e1;
  --akedi-page:#f8fbf9;
}

/* Header */
.feed-nav{
  border-bottom:1px solid var(--akedi-line)!important;
}

.feed-nav .nav-inner{
  align-items:center;
}

.feed-nav .brand{
  color:var(--akedi-deep)!important;
  font-family:var(--suuq-font-heading)!important;
  font-weight:700!important;
  letter-spacing:-.025em!important;
}

.feed-nav .search-pill{
  min-width:0!important;
  border:1px solid var(--akedi-line)!important;
  background:#fff!important;
  box-shadow:none!important;
}

.feed-nav .search-pill:focus-within{
  border-color:#a8d9bc!important;
  box-shadow:0 0 0 3px rgba(18,194,91,.10)!important;
}

.feed-nav .search-pill i{
  color:#65776e!important;
}

.feed-nav .search-pill input{
  color:var(--akedi-ink)!important;
}

.feed-nav .search-pill input::placeholder{
  color:#8a9a92!important;
}

.feed-nav .btn-upload{
  display:inline-flex!important;
  align-items:center;
  justify-content:center;
  flex:0 0 auto;
  min-height:40px;
  border:1px solid var(--akedi-orange)!important;
  border-radius:999px!important;
  background:var(--akedi-orange)!important;
  color:#fff!important;
  box-shadow:none!important;
  font-family:var(--suuq-font-body)!important;
  font-weight:700!important;
}

.feed-nav .btn-upload:hover,
.feed-nav .btn-upload:focus-visible{
  border-color:var(--akedi-orange-hover)!important;
  background:var(--akedi-orange-hover)!important;
  color:#fff!important;
}

/* Filter/navigation area: two deliberate horizontal rails.
   This prevents category controls and hashtag chips from fighting for space. */
#trendChips.chips{
  display:block!important;
  overflow:visible!important;
  white-space:normal!important;
}

.inspo-primary-rail,
.inspo-hashtag-rail{
  min-width:0;
  width:100%;
  display:flex;
  align-items:center;
  gap:8px;
  overflow-x:auto;
  overflow-y:hidden;
  white-space:nowrap;
  scrollbar-width:none;
  overscroll-behavior-x:contain;
  -webkit-overflow-scrolling:touch;
}

.inspo-primary-rail{
  padding:1px 2px 6px;
}

.inspo-hashtag-rail{
  padding:1px 2px 3px;
}

.inspo-primary-rail::-webkit-scrollbar,
.inspo-hashtag-rail::-webkit-scrollbar{
  display:none;
}

.inspo-primary-rail > .chip,
.inspo-hashtag-rail > .chip{
  flex:0 0 auto!important;
}

#trendChips .chip{
  min-height:38px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border:1px solid #b8d9c2;
  border-radius:999px;
  background:#fff;
  color:var(--akedi-deep);
  font-family:var(--suuq-font-body);
  font-size:.86rem;
  font-weight:650;
  line-height:1;
  text-decoration:none;
  box-shadow:none;
}

#trendChips .chip:hover{
  border-color:#8dc5a2;
  background:#f5fbf7;
  color:var(--akedi-deep);
}

#trendChips a.chip.is-active{
  border-color:var(--akedi-deep);
  background:var(--akedi-deep);
  color:#fff;
}

#trendChips button.chip[data-q].is-active,
#trendChips button.chip[data-q].is-match{
  border-color:#9bd0ad;
  background:var(--akedi-mint);
  color:var(--akedi-deep);
}

#trendChips .akedi-filter-form{
  width:auto!important;
  flex:0 0 auto!important;
  flex-wrap:nowrap!important;
  gap:8px!important;
}

#trendChips .akedi-filter-menu{
  flex:0 0 auto!important;
}

#trendChips .akedi-filter-trigger{
  width:auto!important;
  min-width:148px!important;
  max-width:206px!important;
  height:38px!important;
  border-color:#b8d9c2!important;
  background:#fff!important;
  color:var(--akedi-deep)!important;
}

#trendChips [data-select="subSel"] .akedi-filter-trigger{
  min-width:168px!important;
}

#trendChips .akedi-filter-trigger > span{
  max-width:166px!important;
}

#trendChips .akedi-filter-trigger[aria-expanded="true"]{
  border-color:#8dc5a2!important;
  background:#f5fbf7!important;
}

/* Empty states */
.inspo-empty{
  width:min(100%,420px);
  margin:auto;
  padding:28px 22px;
  text-align:center;
  color:var(--akedi-ink);
}

.inspo-empty__icon{
  width:44px;
  height:44px;
  display:grid;
  place-items:center;
  margin:0 auto 12px;
  border:1px solid #cde5d6;
  border-radius:50%;
  background:var(--akedi-mint);
  color:var(--akedi-deep);
}

.inspo-empty__icon svg{
  width:22px;
  height:22px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.8;
  stroke-linecap:round;
  stroke-linejoin:round;
}

.inspo-empty h2{
  margin:0;
  color:var(--akedi-deeper);
  font-family:var(--suuq-font-heading);
  font-size:1.05rem;
  font-weight:650;
  line-height:1.25;
}

.inspo-empty p{
  max-width:34ch;
  margin:7px auto 0;
  color:var(--akedi-muted);
  font-size:.88rem;
  line-height:1.5;
}

.inspo-empty__actions{
  display:flex;
  justify-content:center;
  gap:8px;
  margin-top:14px;
}

.inspo-empty__action{
  min-height:38px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:0 14px;
  border:1px solid #b8d9c2;
  border-radius:999px;
  background:#fff;
  color:var(--akedi-deep);
  font-size:.84rem;
  font-weight:700;
  text-decoration:none;
}

.inspo-empty__action:hover{
  border-color:#8dc5a2;
  background:#f5fbf7;
  color:var(--akedi-deep);
}

.inspo-empty__action--primary{
  border-color:var(--akedi-orange);
  background:var(--akedi-orange);
  color:#fff;
}

.inspo-empty__action--primary:hover{
  border-color:var(--akedi-orange-hover);
  background:var(--akedi-orange-hover);
  color:#fff;
}

/* Explore empty state should span the whole content grid. */
.grid > .inspo-empty{
  grid-column:1 / -1;
  min-height:240px;
  display:flex;
  flex-direction:column;
  justify-content:center;
}

/* Reels empty state: remove the giant black mock-phone when there is nothing. */
.reel.reel--empty{
  background:#fff!important;
}

.reel.reel--empty .inspo-empty{
  min-height:360px;
  display:flex;
  flex-direction:column;
  justify-content:center;
}

/* Mobile */
@media(max-width:767.98px){
  .feed-nav .nav-inner{
    display:grid!important;
    grid-template-columns:minmax(0,1fr) auto!important;
    gap:10px!important;
    padding-left:12px!important;
    padding-right:12px!important;
  }

  .feed-nav .brand{
    display:none!important;
  }

  .feed-nav .search-pill{
    order:initial!important;
    width:100%!important;
    min-width:0!important;
    flex:none!important;
    margin:0!important;
  }

  .feed-nav .btn-upload{
    order:initial!important;
    display:inline-flex!important;
    height:38px!important;
    min-height:38px!important;
    margin:0!important;
    padding:0 14px!important;
  }

  #trendChips.chips{
    width:100%!important;
    display:block!important;
    padding:4px 0 8px!important;
    overflow:visible!important;
  }

  .inspo-primary-rail,
  .inspo-hashtag-rail{
    width:100%;
    overflow-x:auto;
    overflow-y:hidden;
    padding-left:12px;
    padding-right:12px;
    scrollbar-width:none;
  }

  .inspo-primary-rail{
    padding-top:1px;
    padding-bottom:6px;
  }

  .inspo-hashtag-rail{
    gap:7px;
    padding-top:1px;
    padding-bottom:2px;
  }

  .inspo-primary-rail::-webkit-scrollbar,
  .inspo-hashtag-rail::-webkit-scrollbar{
    display:none;
  }

  #trendChips .chip{
    min-height:36px;
    padding:.34rem .72rem;
    font-size:.84rem;
  }

  #trendChips .akedi-filter-trigger{
    min-width:142px!important;
    max-width:190px!important;
    height:36px!important;
    font-size:.84rem!important;
  }

  #trendChips [data-select="subSel"] .akedi-filter-trigger{
    min-width:158px!important;
  }

  #trendChips .akedi-filter-trigger > span{
    max-width:152px!important;
  }

  .grid > .inspo-empty{
    min-height:210px;
    padding:22px 18px;
  }

  .reel.reel--empty{
    min-height:var(--reel-visible-h)!important;
    height:var(--reel-visible-h)!important;
  }

  .reel.reel--empty .inspo-empty{
    min-height:0;
    padding:24px 22px calc(88px + env(safe-area-inset-bottom));
  }
}

@media(max-width:380px){
  .feed-nav .nav-inner{
    gap:8px!important;
  }

  .feed-nav .btn-upload{
    padding:0 12px!important;
    font-size:.86rem!important;
  }

  #trendChips .akedi-filter-trigger{
    min-width:136px!important;
  }

  #trendChips [data-select="subSel"] .akedi-filter-trigger{
    min-width:152px!important;
  }
}


/* Explore mobile package badge: match desktop placement beside the shop handle.
   The older mobile rule gave the icon pill-like width/padding, which forced it
   onto a second line inside narrow two-column cards. */
@media(max-width:767.98px){
  .grid .handle-line{
    flex-wrap:nowrap!important;
    gap:4px!important;
  }

  .grid .meta .handle{
    min-width:0;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap!important;
    overflow-wrap:normal!important;
  }

  .grid .plan-badge-mini{
    flex:0 0 auto!important;
    min-width:0!important;
    width:auto!important;
    height:auto!important;
    padding:0!important;
    margin:0!important;
  }

  .grid .plan-badge-mini .plan-icon{
    width:14px!important;
    height:14px!important;
  }
}