/* DJC SmartSearch - DJC brand skin
 *
 * Applied via the `djc` class on .djc-smart-search / .djc-smart-search-pills
 * / .djc-smart-search-overlay. Sets brand colors, gradients, and typography
 * tokens on top of the skeleton in DJC_SmartSearch.css.
 *
 * Brand reference: introducing-smartsearch LP - blue/purple gradients, white
 * pill input, light pills with subtle shadows, dark gradient overlay.
*/

.djc-smart-search.djc,
.djc-smart-search-pills.djc,
.djc-smart-search-overlay.djc {
  /* brand colors */
  --ss-brand-1a: 45, 119, 242;
  --ss-brand-1b: 24, 55, 115;
  --ss-brand-2a: 107, 45, 139;
  --ss-brand-2b: 74, 28, 107;
  --ss-brand-accent: 13, 159, 235;

  /* gradients */
  --ss-gradient-brand: linear-gradient(115deg, rgb(var(--ss-brand-1a)), rgb(var(--ss-brand-1b)));
  --ss-gradient-overlay: linear-gradient(135deg, rgb(var(--ss-brand-2b)) 0%, rgb(var(--ss-brand-1b)) 100%);
  --ss-gradient-icon: linear-gradient(135deg, #328ed8 0%, #7160b4 45%, #ed37af 60%);
}


/* ============================================================ */
/* INPUT - djc skin                                             */
/* ============================================================ */

.djc-smart-search.djc {
  --ss-input-bg: rgba(255, 255, 255, 0.98);
  --ss-input-text: #0f172a;
  --ss-input-border: rgba(255, 255, 255, 0.6);
  --ss-input-shadow: 0 14px 40px rgba(15, 23, 42, 0.18);
  --ss-icon-color: #64748b;
  --ss-input-font-size: 18px;
  --ss-input-height: 60px;
}

.djc-smart-search.djc .djc-smart-search__icon-glass {
  background: var(--ss-gradient-icon);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}


/* ============================================================ */
/* PILLS - djc skin                                             */
/* ============================================================ */

.djc-smart-search-pills.djc {
  --ss-pill-bg: rgba(255, 255, 255, 0.92);
  --ss-pill-text: #1e293b;
  --ss-pill-border: rgba(255, 255, 255, 0.5);
  --ss-pill-hover-bg: #ffffff;
  --ss-pill-shadow: 0 4px 14px rgba(15, 23, 42, 0.12);
  --ss-pill-font-size: 14px;
  --ss-pill-padding: 10px 18px;
}

.djc-smart-search-pills.djc .djc-smart-search-pills__pill--ask {
  background: var(--ss-gradient-brand);
  color: #ffffff;
  border-color: transparent;
}

.djc-smart-search-pills.djc .djc-smart-search-pills__pill--ask:hover {
  filter: brightness(1.08);
}


/* ============================================================ */
/* OVERLAY - djc skin                                           */
/* ============================================================ */

.djc-smart-search-overlay.djc {
  --ss-overlay-bg: var(--ss-gradient-overlay);
  --ss-overlay-text: #ffffff;
  --ss-overlay-close-color: rgba(255, 255, 255, 0.7);
  --ss-overlay-close-hover: #ffffff;
}

.djc-smart-search-overlay.djc .djc-smart-search__logo {
  background: linear-gradient(115deg, #ffffff, #d5edf4);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  font-size: 26px;
}