.ga-search-page{padding:20px 0}
.ga-search-hero{margin-bottom:14px}
.ga-search-title{margin:0 0 12px;font-size:22px;font-weight:700}
.ga-search-box{position:relative;display:flex;align-items:center;gap:10px;background:#111;border:1px solid rgba(255,255,255,.08);border-radius:14px;height: 48px;padding:0 14px;}
.ga-search-box .ga-search-ico{opacity:.8}
.ga-search-input{flex:1;min-width:0;background:transparent;border:0;outline:0;color:#fff;font-size: 16px;height: 48px;line-height: 48px;padding:0;}
.ga-search-clear{display:none;align-items:center;justify-content:center;background:transparent;border:0;color:#fff;opacity:.8}
.ga-search-clear:hover{opacity:1}
.ga-search-controls{display:flex;flex-wrap:wrap;gap:10px;align-items:center;justify-content:space-between;margin-top:12px}
/* --- GA Search Tabs: unified (no fixed height) --- */
.ga-search-tabs{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  background:#111;
  border:1px solid rgba(255,255,255,.10);
  border-radius:999px;
  padding:4px;
  gap:0;
  min-height:46px;
  box-sizing:border-box;
  box-shadow:0 8px 24px rgba(0,0,0,.12);
}
.ga-search-tabs .ga-tab{
  background:transparent;
  border:0;
  color:#fff;
  font-weight:700;
  height:38px;
  line-height:38px;
  padding:0 14px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:999px;
  box-sizing:border-box;
}
.ga-search-tabs .ga-tab:hover{background:rgba(255,255,255,.08)}
.ga-search-tabs .ga-tab:focus{outline:2px solid rgba(255,255,255,.25);outline-offset:2px}
.ga-search-tabs .ga-tab.is-active{background:#243bff;color:#fff}

@media (max-width: 480px){
  .ga-search-tabs{width:100%;justify-content:space-between;}
  .ga-search-tabs .ga-tab{flex:1;text-align:center;}
}

.ga-tab{display:flex;align-items:center;justify-content:center;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.08);color:#fff;border-radius:999px;height: 40px;display:inline-flex;align-items:center;justify-content:center;padding:0 12px;font-size:13px;cursor:pointer;line-height:1;}
.ga-tab.is-active{background:rgba(255,255,255,.16);border-color:rgba(255,255,255,.25)}
.ga-search-select{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.10);color:#fff;border-radius:12px;height:40px;padding:0 10px;font-size:13px;line-height:40px;}
.ga-search-status{min-height:22px;margin:10px 0;color:rgba(255,255,255,.75);font-size:13px}
.ga-search-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
@media (min-width:700px){.ga-search-grid{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media (min-width:1100px){.ga-search-grid{grid-template-columns:repeat(6,minmax(0,1fr))}}
.ga-card{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.06);border-radius:14px;overflow:hidden;display:flex;flex-direction:column}
.ga-card a{color:inherit;text-decoration:none;display:block}
.ga-card .ga-thumb{aspect-ratio:2/3;background:rgba(255,255,255,.05);position:relative;overflow:hidden}
.ga-card .ga-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.ga-card .ga-badge{position:absolute;top:8px;left:8px;background:rgba(0,0,0,.55);border:1px solid rgba(255,255,255,.14);padding:4px 8px;border-radius:999px;font-size:11px}
.ga-card .ga-meta{padding:10px}
.ga-card .ga-title{font-size:13px;line-height:1.3;margin:0 0 6px;font-weight:700;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.ga-card .ga-sub{font-size:12px;opacity:.75;display:flex;gap:8px;flex-wrap:wrap}
.ga-search-footer{display:flex;flex-direction:column;align-items:center;gap:10px;margin:16px 0}
.ga-search-more{background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.16);color:#fff;border-radius:14px;padding:10px 16px;font-size:14px;cursor:pointer;display:none}
.ga-search-more[disabled]{opacity:.5;cursor:not-allowed}
.ga-search-spinner{display:none;width:30px;height:30px;border-radius:999px;border:3px solid rgba(255,255,255,.15);border-top-color:rgba(255,255,255,.7);animation:gaSpin 1s linear infinite}
@keyframes gaSpin{to{transform:rotate(360deg)}}
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}


/* -------------------------
   Light mode overrides
   (Fix: white controls on white background)
-------------------------- */
html:not(.ga-dark) .ga-search-page{background:#fff;color:#111}
html:not(.ga-dark) .ga-search-title{color:#111}
html:not(.ga-dark) .ga-search-status{color:rgba(0,0,0,.65)}
html:not(.ga-dark) .ga-card{background:#fff;border-color:rgba(0,0,0,.08)}
html:not(.ga-dark) .ga-card .ga-badge{background:rgba(0,0,0,.55);border-color:rgba(255,255,255,.18)}
html:not(.ga-dark) .ga-search-more{background:rgba(0,176,255,.10);border-color:rgba(0,0,0,.12);color:#111}

/* Ensure "الأكثر صلة" (sort) stays visible in light mode */
html:not(.ga-dark) .ga-search-select{
  background:#111;
  color:#fff;
  border-color:rgba(255,255,255,.10);
}

/*
  ---------------------------------------------------------
  Search template: vertical alignment fixes
  - Center placeholder/text inside search bar
  - Keep tabs pills perfectly centered within their bar
  (Overrides earlier rules to avoid mixed heights/paddings)
  ---------------------------------------------------------
*/

/* Search bar */
.ga-search-box{
  box-sizing:border-box;
  height:46px;
  padding:0 14px;
  display:flex;
  align-items:center;
}
.ga-search-input{
  box-sizing:border-box;
  width:100%;
  height:auto;
  margin:0;
  padding:0;
  line-height:1.2;
}
/* Keep the sort select aligned with tabs */
.ga-search-select{
  box-sizing:border-box;
  height:38px;
  line-height:38px;
}