/* Home-only UI (scoped) */

/* ===== Extra homepage hero / features ===== */
body.page-home .home-hero{
  margin-top: 18px;
}

body.page-home .home-hero__inner{
  display: grid;
  grid-template-columns: 1.4fr 0.6fr;
  gap: 16px;
  align-items: stretch;
}

body.page-home .home-hero__title{
  margin: 0;
  font-size: 34px;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--text);
}

body.page-home .home-hero__sub{
  margin: 10px 0 0;
  font-size: 14px;
  line-height: 1.45;
  color: var(--muted);
  max-width: 58ch;
}

body.page-home .home-hero__badges{
  margin-top: 14px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

body.page-home .home-badge{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 10px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--surface);
  box-shadow: var(--shadow);
  color: var(--text);
  font-weight: 800;
  font-size: 12px;
}
body.page-home .home-badge i{ opacity: .92; }

body.page-home .home-hero__card{
  height: 100%;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;
  box-shadow: var(--shadow);
  padding: 14px 14px 12px;
}

body.page-home .home-hero__cardTitle{
  font-weight: 900;
  font-size: 13px;
  letter-spacing: .01em;
  color: var(--text);
}

body.page-home .home-hero__list{
  margin: 10px 0 0;
  padding-left: 18px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.45;
}
body.page-home .home-hero__list li{ margin: 6px 0; }

body.page-home .home-features{
  margin-top: 14px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}

body.page-home .home-feature{
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;
  box-shadow: var(--shadow);
  padding: 14px;
}

body.page-home .home-feature__icon{
  width: 36px;
  height: 36px;
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--surface2);
  border: 1px solid var(--border);
}

body.page-home .home-feature__icon i{ font-size: 18px; }

body.page-home .home-feature__title{
  margin-top: 10px;
  font-weight: 900;
  font-size: 13px;
  color: var(--text);
}

body.page-home .home-feature__text{
  margin-top: 6px;
  font-size: 13px;
  line-height: 1.4;
  color: var(--muted);
}

@media (max-width: 980px){
  body.page-home .home-hero__inner{ grid-template-columns: 1fr; }
  body.page-home .home-features{ grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 650px){
  body.page-home .home-hero__title{ font-size: 26px; }
  body.page-home .home-features{ grid-template-columns: 1fr; }
}


/* Homepage top menu: darker panel + subtle separator */
body.page-home .topbar{
  background-color: #232323;
  border-bottom: 1px solid #111;
}

/* Prevent topbar wrapping on home */
body.page-home .topbar .topbar__inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  flex-wrap:nowrap;
}

/* Brand + Trending icon (home) */
body.page-home .brandwrap{
  display:flex;
  align-items:center;
  gap:10px;
  flex: 0 0 auto;
}

body.page-home .trend-icon{
  position: relative;
  /* Match the compact topbar-link style from the reference:
     no outline/border, no pill background. */
  height: 34px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 12px;
  border: 0;
  background: transparent;
  color: rgba(255,255,255,.92);
  text-decoration: none;
  font-weight: 800;
  letter-spacing: .01em;
}
body.page-home .trend-icon:hover{
  background: rgba(255,255,255,.06);
  color: #fff;
}
body.page-home .trend-icon:active{ transform: translateY(1px); }
body.page-home .trend-emoji{ font-size: 15px; line-height: 1; }
body.page-home .trend-text{ font-size: 13px; line-height: 1; }

/* Tooltip bubble */
body.page-home .trend-tooltip{
  position: absolute;
  left: 50%;
  top: calc(100% + 10px);
  transform: translateX(-50%) translateY(-4px);
  background: #000;
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  padding: 8px 10px;
  border-radius: 999px;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity .12s ease, transform .12s ease;
  box-shadow: 0 10px 24px rgba(0,0,0,.35);
  z-index: 30;
}
body.page-home .trend-tooltip::after{
  content: "";
  position: absolute;
  left: 50%;
  top: -6px;
  transform: translateX(-50%);
  border-width: 0 6px 6px 6px;
  border-style: solid;
  border-color: transparent transparent #000 transparent;
}
body.page-home .trend-icon:hover .trend-tooltip,
body.page-home .trend-icon:focus-visible .trend-tooltip{
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* Mobile: keep only the flame (left), My Account and URL Upload in the topbar */
@media (max-width: 720px){
  body.page-home .topbar__actions .topbar-btn--upgrade,
  body.page-home .topbar__actions .topbar-btn--status{
    display:none !important;
  }

  /* Mobile: reduce spacing between topbar buttons */
  body.page-home .topbar__actions{ gap: 6px !important; }
  body.page-home .topbar-btn{ padding: 7px 8px !important; }

  /* Mobile: keep only the flame icon for Trending (hide the text label) */
  body.page-home .trend-text{ display:none !important; }
  body.page-home .trend-icon{ padding: 8px 8px; gap: 0; }
}

/* Video list controls: search + sort */
body.page-home .list-controls{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 12px;
  margin: 6px 0 6px;
}

/* Tighter spacing: title -> search -> grid */
body.page-home .list-title{ margin: 8px 0 6px !important; }
body.page-home #videoGrid{ margin-top: 2px; }

body.page-home .list-search{
  flex: 1 1 auto;
  min-width: 0;
  display:flex;
  align-items:center;
  gap: 10px;
  height: 40px;
  padding: 0 12px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: transparent;
  box-shadow: none;
  backdrop-filter: blur(8px);
}
body.page-home .list-search i{ opacity: .75; }
body.page-home .list-search input{
  flex: 1;
  min-width: 0;
  border: 0;
  outline: none;
  background: transparent;
  color: var(--text);
  font-weight: 600;
  font-size: 13px;
}
body.page-home .list-search.is-active{
  border-color: rgba(0,122,255,.45);
  box-shadow: 0 0 0 3px rgba(0,122,255,.18);
}

body.page-home .sort-btn{
  height: 40px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  font-weight: 700;
  font-size: 13px;
  display:inline-flex;
  align-items:center;
  gap: 8px;
  padding: 0 12px;
  box-shadow: var(--shadow);
}


/* ===== Bulk selection toolbar (Google Photos-like) ===== */
body.page-home .bulk-toolbar{
  position: fixed;
  left: 0;
  right: 0;
  top: 54px; /* sits over the upload bar */
  height: 56px;
  background: #1f1f1f;
  border-bottom: 1px solid #111;
  box-shadow: 0 16px 40px rgba(0,0,0,.35);
  z-index: 5000;
}

body.page-home .bulk-toolbar__inner{
  height: 56px;
  display: flex;
  align-items: center;
  gap: 12px;
}

body.page-home .bulk-toolbar__close{
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 10px;
  background: rgba(255,255,255,.06);
  color: rgba(255,255,255,.90);
  cursor: pointer;
}
body.page-home .bulk-toolbar__close:hover{ background: rgba(255,255,255,.10); color:#fff; }

body.page-home .bulk-toolbar__count{
  color: rgba(255,255,255,.92);
  font-weight: 700;
  font-size: 14px;
  flex: 0 0 auto;
}

body.page-home .bulk-toolbar__actions{
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

body.page-home .bulk-action{
  height: 36px;
  padding: 0 12px;
  position: relative;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.06);
  color: rgba(255,255,255,.92);
  font-weight: 700;
  font-size: 13px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
}

/* Tooltip bubble under bulk actions (same vibe as Trending tooltip) */
body.page-home .bulk-tooltip{
  position: absolute;
  left: 50%;
  top: calc(100% + 10px);
  transform: translateX(-50%) translateY(-4px);
  background: #000;
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  padding: 8px 10px;
  border-radius: 999px;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity .12s ease, transform .12s ease;
  box-shadow: 0 10px 24px rgba(0,0,0,.35);
  z-index: 30;
}
body.page-home .bulk-tooltip::after{
  content: "";
  position: absolute;
  left: 50%;
  top: -6px;
  transform: translateX(-50%);
  border-width: 0 6px 6px 6px;
  border-style: solid;
  border-color: transparent transparent #000 transparent;
}
body.page-home .bulk-action:hover .bulk-tooltip,
body.page-home .bulk-action:focus-visible .bulk-tooltip{
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}
body.page-home .bulk-action i{ font-size: 15px; }
body.page-home .bulk-action:hover{ background: rgba(255,255,255,.10); color:#fff; }
body.page-home .bulk-action:disabled{
  opacity: .45;
  cursor: not-allowed;
}

@media (max-width: 680px){
  body.page-home .bulk-action span{ display: none; }
  body.page-home .bulk-action{ padding: 0 10px; }
}


/* ===== Multi-select checkbox on cards ===== */
body.page-home .card .thumb{ position: relative; }
body.page-home .card-select-btn{
  position: absolute;
  top: 8px;
  left: 8px;
  /* Reduced by ~30% (was 28px) */
  width: 20px;
  height: 20px;
  /* Match Streamable-style subtle rounding (not fully round) */
  border-radius: 3px;
  border: 1px solid rgba(255,255,255,.28);
  background: rgba(0,0,0,.30);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: rgba(255,255,255,.88);
  cursor: pointer;
}
body.page-home .card-select-btn i{ font-size: 14px; opacity: 0; transform: scale(.85); transition: opacity .12s ease, transform .12s ease; }
body.page-home .card-select-btn:hover{ background: rgba(0,0,0,.40); }
body.page-home .card.is-selected{ outline: 2px solid rgba(0,122,255,.85); outline-offset: 0; }
body.page-home .card.is-selected .card-select-btn{
  background: #007aff;
  border-color: #007aff;
  color: #fff;
}
body.page-home .card.is-selected .card-select-btn i{ opacity: 1; transform: scale(1); }

body.page-home .sort-btn:active{ transform: translateY(1px); }

@media (max-width: 767px){
  body.page-home .list-controls{
    flex-direction: row;
    align-items: center;
    flex-wrap: nowrap;
    gap: 10px;
  }
  body.page-home .sort-btn{
    width: auto;
    justify-content: center;
    white-space: nowrap;
    flex: 0 0 auto;
  }
}


/* Mobile: controls stacked like capture */
@media (max-width: 767px){
  body.page-home .list-controls{
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: nowrap;
  }
  body.page-home .list-search{
    flex: 1 1 auto;
    min-width: 0;
  }
  body.page-home .dropdown{
    flex: 0 0 auto;
  }
  body.page-home .sort-btn{
    width: auto;
    justify-content: center;
    flex-shrink: 0;
    white-space: nowrap;
  }
}



/* ===== PATCH: Search form transparent & no border/outline ===== */
body.page-home .list-search,
body.page-home .list-search form,
body.page-home .list-search .search,
body.page-home .list-search input[type="search"],
body.page-home .list-search input[type="text"]{
  background: transparent !important;
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
}

/* Keep spacing/shape without contour */
body.page-home .list-search{
  padding: 0 !important;
  border-radius: 0 !important;
}

/* If you still want rounded corners, comment the line above and use this instead:
body.page-home .list-search{ border-radius: 999px !important; }
*/

body.page-home .list-search input[type="search"],
body.page-home .list-search input[type="text"]{
  height: 40px !important;
  padding: 0 12px !important;
  color: inherit !important;
}

/* Placeholder */
body.page-home .list-search input::placeholder{
  opacity: .8;
}

/* Remove focus ring (some browsers) */
body.page-home .list-search input:focus{
  outline: none !important;
  box-shadow: none !important;
}

/* If there's an icon/wrapper background */
body.page-home .list-search .icon,
body.page-home .list-search .input-wrap{
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}


/* ===== PATCH: tighten spacing between search icon and text ===== */
body.page-home .list-search{
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;          /* distance between icon and input */
  padding-left: 10px !important; /* small breathing room on the left */
  padding-right: 10px !important;
}

body.page-home .list-search > i{
  margin: 0 !important;         /* remove any bootstrap/icon margins */
  padding: 0 !important;
  line-height: 1 !important;
}

body.page-home .list-search input[type="search"],
body.page-home .list-search input[type="text"]{
  padding-left: 2px !important; /* brings placeholder closer to the icon */
}


/* --- Fake list loading (logo + spinner) --- */
body.page-home #videoGrid{
  position: relative;
  min-height: 320px;
}
body.page-home #videoGrid.is-loading{
  /* Keep space so the loader doesn't jump */
  min-height: 320px;
}
body.page-home .home-list-loader{
  position: absolute;
  inset: 0;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding-top: 86px; /* higher than center */
  pointer-events: none;
}
body.page-home .home-list-loader__wrap{
  width: 79px;
  height: 79px;
  position: relative;
}
body.page-home .home-list-loader__logo{
  width: 43px;
  height: 43px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  opacity: .95;
  filter: drop-shadow(0 6px 18px rgba(0,0,0,.55));
}
body.page-home .home-list-loader__ring{
  position: absolute;
  inset: 0;
  border-radius: 999px;
  border: 3px solid rgba(255, 255, 255, .14);
  border-top-color: rgba(13, 110, 253, .95);
  animation: talkzSpin 1s linear infinite;
}
@keyframes talkzSpin{
  from{ transform: rotate(0deg); }
  to{ transform: rotate(360deg); }
}

/* --- Pagination (numbers + Previous/Next) --- */
body.page-home .pagination{
  margin-top: 18px;
  gap: 14px;
}
body.page-home .pagebtn{
  background: transparent !important;
  border: none !important;
  padding: 6px 6px;
  font-size: 13px;
  font-weight: 700;
  color: #838ea2 !important;
  box-shadow: none !important;
}
body.page-home .pagebtn:hover{ background: transparent !important; color: #fff !important; }
body.page-home .pagebtn.active{ color: #fff !important; }
body.page-home .pagebtn.pagebtn-nav{ color: #fff !important; }
body.page-home .pagebtn:disabled{ opacity: .35; cursor: not-allowed; }