/* ============================================================
 * LncACTdb 4.0 — Search (input) pages
 * Shared styles for the simple search forms: ByGene / ByCe /
 * ByDisease / ByTissue / BySpecie / ByDataset.
 * Depends on home/shared/lncact-tokens.css + lncact-home.css (chrome).
 * ============================================================ */

.la-search{
  background:
    radial-gradient(1100px 520px at 85% -10%, rgba(6,182,212,.07), transparent 60%),
    radial-gradient(900px 560px at -5% 30%, rgba(124,58,237,.05), transparent 55%),
    linear-gradient(180deg,#ffffff 0%,#f7f9fd 100%);}
/* sticky footer: page-wrapper fills the viewport as a column, the search
   section grows to push the footer to the bottom even when content is short */
.la-search .page-wrapper{display:flex;flex-direction:column;min-height:100vh;}
.la-search .la-swrap{flex:1 0 auto;}
.la-swrap{max-width:760px;margin:0 auto;padding:64px 28px 70px;width:100%;}
.la-swrap--wide{max-width:980px;}

/* hero header */
.la-shead{text-align:center;margin-bottom:34px;}
.la-shead__ic{width:64px;height:64px;border-radius:18px;margin:0 auto 18px;display:flex;align-items:center;justify-content:center;
  font-size:28px;color:#fff;background:linear-gradient(135deg,var(--la-primary-d),var(--la-primary) 60%,var(--la-cyan-d));
  box-shadow:0 12px 30px rgba(67,56,202,.28);}
.la-shead h1{font-size:clamp(26px,3vw,36px);font-weight:800;letter-spacing:-.025em;color:var(--la-ink);margin:0 0 10px;}
.la-shead p{font-size:15.5px;line-height:1.6;color:var(--la-muted);margin:0 auto;max-width:56ch;}

/* search card */
.la-scard{background:#fff;border:1px solid var(--la-line);border-radius:20px;
  padding:30px 32px 32px;box-shadow:var(--la-shadow);}
.la-scard__row{margin-bottom:18px;}
.la-scard__row:last-of-type{margin-bottom:0;}
.la-scard__lbl{display:flex;align-items:center;gap:8px;font:700 12.5px var(--la-mono);
  letter-spacing:.06em;text-transform:uppercase;color:var(--la-muted);margin-bottom:9px;}
.la-scard__lbl i{color:var(--la-primary);}

/* submit */
.la-sgo{margin-top:24px;display:flex;gap:12px;align-items:center;flex-wrap:wrap;}
.la-sgo .la-btn{font-size:15px;padding:13px 30px;}

/* example chips — now live INSIDE the search card, between button and the inputs */
.la-sex{margin-top:22px;}
.la-sex__t{font:600 12px var(--la-font);color:var(--la-muted);margin-bottom:9px;}
.la-sex__chips{display:flex;gap:8px;flex-wrap:wrap;}
.la-sex__chips a{font:600 12.5px var(--la-mono);color:var(--la-primary-d);background:var(--la-bg-tint);
  border:1px solid var(--la-line);border-radius:999px;padding:6px 14px;transition:.15s;text-decoration:none;}
.la-sex__chips a:hover{background:var(--la-primary);color:#fff;border-color:var(--la-primary);}
/* divider above the in-card examples */
.la-scard__ex{margin-top:22px;padding-top:20px;border-top:1px dashed var(--la-line);}

/* tom-select tuning to match the design tokens */
.la-search .ts-wrapper{font:500 15px var(--la-font);}
.la-search .ts-control{border:1px solid var(--la-line);border-radius:12px;padding:0 14px;min-height:52px;
  display:flex;align-items:center;flex-wrap:wrap;box-shadow:none;transition:.15s;background:#fff;}
.la-search .ts-wrapper.focus .ts-control{border-color:var(--la-primary);box-shadow:var(--la-ring);}
/* the editable input + the chosen item must sit on the same centered baseline */
.la-search .ts-control > input{font-size:15px;color:var(--la-ink);line-height:normal;margin:0!important;height:auto;}
.la-search .ts-control > .item{display:inline-flex;align-items:center;gap:8px;line-height:1.2;padding:0;}
.la-search .ts-control > .item .la-tag{position:relative;top:0;}
.la-search .ts-dropdown{border:1px solid var(--la-line);border-radius:12px;box-shadow:var(--la-shadow-pop);
  margin-top:6px;overflow:hidden;font-size:14.5px;}
.la-search .ts-dropdown .option{padding:10px 14px;display:flex;align-items:center;gap:10px;}
.la-search .ts-dropdown .active{background:var(--la-bg-tint);color:var(--la-primary-d);}
.la-search .ts-dropdown .option .la-opt-name{font-weight:600;}
.la-search .ts-dropdown .option .la-opt-sub{margin-left:auto;font:600 10.5px var(--la-mono);
  letter-spacing:.04em;color:var(--la-muted);}

/* type badges inside option / selected item */
.la-tag{display:inline-flex;align-items:center;font:700 9.5px var(--la-mono);letter-spacing:.05em;text-transform:uppercase;
  padding:3px 8px;border-radius:999px;white-space:nowrap;line-height:1;}
.la-tag--lnc{background:rgba(124,58,237,.12);color:var(--la-lnc);}
.la-tag--gene,.la-tag--mrna{background:rgba(16,185,129,.14);color:#047857;}
.la-tag--both{background:rgba(245,158,11,.16);color:#b45309;}
/* dropdown option name+tag alignment */
.la-search .ts-dropdown .option .la-tag{margin-left:8px;margin-bottom:0px;}

/* ByCe dual selects */
.la-cepair{display:grid;grid-template-columns:1fr auto 1fr;gap:16px;align-items:end;}
.la-cepair__link{display:flex;align-items:center;justify-content:center;width:42px;height:52px;
  color:var(--la-mir);font-size:20px;}
@media(max-width:640px){ .la-cepair{grid-template-columns:1fr;}
  .la-cepair__link{transform:rotate(90deg);height:30px;} }

/* ByDataset four panels */
.la-dspanels{display:grid;grid-template-columns:repeat(2,1fr);gap:18px;}
.la-dspanel{display:flex;flex-direction:column;gap:12px;text-align:left;text-decoration:none;
  background:#fff;border:1px solid var(--la-line);border-radius:18px;padding:26px 26px 24px;
  box-shadow:var(--la-shadow-sm);transition:.18s;position:relative;overflow:hidden;}
.la-dspanel::before{content:"";position:absolute;inset:0 0 auto 0;height:5px;background:var(--c);}
.la-dspanel:hover{transform:translateY(-4px);box-shadow:var(--la-shadow);border-color:var(--c);}
.la-dspanel__ic{width:54px;height:54px;border-radius:15px;display:flex;align-items:center;justify-content:center;
  font-size:24px;color:#fff;background:var(--c);box-shadow:0 8px 20px color-mix(in srgb,var(--c) 38%,transparent);}
.la-dspanel__t{font-size:19px;font-weight:800;color:var(--la-ink);letter-spacing:-.01em;}
.la-dspanel__d{font-size:13.5px;line-height:1.55;color:var(--la-muted);}
.la-dspanel__n{margin-top:auto;font:700 12.5px var(--la-mono);color:var(--c);display:inline-flex;align-items:center;gap:6px;}
.la-dspanel__go{position:absolute;right:22px;bottom:22px;color:var(--c);font-size:16px;opacity:0;transform:translateX(-6px);transition:.18s;}
.la-dspanel:hover .la-dspanel__go{opacity:1;transform:none;}
@media(max-width:600px){ .la-dspanels{grid-template-columns:1fr;} }