/* === ANDAXI SEARCH — assets/front.css === */

/* ────────────────────────────────────────────────────────────
   Rădăcina componentei: variabile cu fallback-uri safe
   (JS va rescrie valorile via element.style.setProperty)
   ──────────────────────────────────────────────────────────── */
.andaxi-search{
  /* backgrounds */
  --ax-bg-search:   #ffffff;
  --ax-bg-dropdown: #ffffff;
  --ax-bg-cat:      #f2f2f2;
  --ax-bg-tag:      #eef6ff;

  /* text colors */
  --ax-t-title:     #111111;
  --ax-t-excerpt:   #555555;
  --ax-t-cat:       #555555;
  --ax-t-tag:       #2a4f7a;
  --ax-t-search:    #333333;

  /* borders */
  --ax-b-search:    #e6e6e6;
  --ax-b-dropdown:  #e6e6e6;
  --ax-b-cat:       #e6e6e6;
  --ax-b-tag:       #d6eaff;

  /* effects */
  --ax-highlight:   #fff3a6;
  --ax-hover:       #f7f7f7;

  /* geometry */
  --ax-r-search:    12px;
  --ax-r-thumb:     8px;
  --ax-r-dropdown:  12px;
  --ax-r-cat:       999px;
  --ax-r-tag:       999px;

  /* stacking */
  --ax-z:           9999;

  /* layout */
  position: relative;
  max-width: 720px;
  margin: 0 auto;
  display: flex;
  gap: 8px;
}

/* ────────────────────────────────────────────────────────────
   Input + Buton
   ──────────────────────────────────────────────────────────── */
.andaxi-search-input{
  flex: 1;
  padding: 12px 14px;
  background: var(--ax-bg-search);
  color: var(--ax-t-search);
  border: 1px solid var(--ax-b-search);
  border-radius: var(--ax-r-search);
  outline: none;
}
.andaxi-search-input::placeholder{ color: color-mix(in srgb, var(--ax-t-search) 60%, transparent); }

.andaxi-search-input:focus{
  border-color: var(--ax-t-search);
  box-shadow: 0 0 0 3px rgba(16,8,41,.08);
}

.andaxi-search-btn{
  display: inline-grid;
  place-items: center;
  padding: 0 12px;
  background: var(--ax-bg-search);
  color: var(--ax-t-search);
  border: 1px solid var(--ax-b-search);
  border-radius: var(--ax-r-search);
  line-height: 1;
  cursor: pointer;
}
.andaxi-search-btn:hover{
  border-color: var(--ax-t-search);
  background: color-mix(in srgb, var(--ax-bg-search) 85%, var(--ax-hover));
}

/* ────────────────────────────────────────────────────────────
   Dropdown
   ──────────────────────────────────────────────────────────── */
.andaxi-results{
  position: absolute;
  left: 0; right: 0;
  top: calc(100% + 8px);
  z-index: var(--ax-z);
}
.andaxi-results-inner{
  background: var(--ax-bg-dropdown);
  color: var(--ax-t-excerpt);
  border: 1px solid var(--ax-b-dropdown);
  border-radius: var(--ax-r-dropdown);
  max-height: 60vh;
  overflow: auto;
  /* shadow-urile sunt controlate prin clase */
  box-shadow: 0 18px 40px rgba(0,0,0,.12);
}

/* Shadow variants (setate de JS: ax-shadow-none/sm/md/lg) */
.andaxi-search.ax-shadow-none .andaxi-results-inner{ box-shadow: none; }
.andaxi-search.ax-shadow-sm   .andaxi-results-inner{ box-shadow: 0 8px 18px rgba(0,0,0,.10); }
.andaxi-search.ax-shadow-md   .andaxi-results-inner{ box-shadow: 0 18px 40px rgba(0,0,0,.12); }
.andaxi-search.ax-shadow-lg   .andaxi-results-inner{ box-shadow: 0 28px 60px rgba(0,0,0,.18); }

/* ────────────────────────────────────────────────────────────
   Listă + Item
   ──────────────────────────────────────────────────────────── */
.andaxi-list{ list-style: none; margin: 0; padding: 6px; }
.andaxi-list li{ list-style: none; }

.andaxi-item a{
  display: flex;
  gap: 12px;
  align-items: center;
  padding: 10px;
  border-radius: 10px; /* feeling bun în interior, independent de dropdown */
  text-decoration: none;
  color: inherit;
}
.andaxi-item a:hover{ background: var(--ax-hover); }

/* Thumbnail */
.andaxi-thumb{
  width: 48px; height: 48px; flex: 0 0 48px;
  border-radius: var(--ax-r-thumb);
  background: #eee center/cover no-repeat;
}

/* Text blocks */
.andaxi-meta{ display: block; }
.andaxi-title{ display:block; font-weight:700; color: var(--ax-t-title); }
.andaxi-sub  { display:block; font-size:12px; color:#666; margin-top:2px; }
.andaxi-excerpt{
  display:block; margin-top:6px; font-size:13px; line-height:1.45;
  color: var(--ax-t-excerpt);
}

/* Highlight */
.andaxi-title mark,
.andaxi-excerpt mark,
.andaxi-list mark{
  background: var(--ax-highlight);
  padding: 0 2px;
  border-radius: 3px;
}

/* Empty/Footer rows */
.andaxi-empty,
.andaxi-more{
  padding: 12px 14px;
  color: #666;
  border-top: 1px solid #f0f0f0;
}

/* ────────────────────────────────────────────────────────────
   Chips: Categorii & Taguri
   ──────────────────────────────────────────────────────────── */
.andaxi-chips{
  margin-top: 6px;
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.andaxi-chip{
  display: inline-block;
  font-size: 11px;
  line-height: 1;
  padding: 5px 8px;
  border-radius: var(--ax-r-cat);
  background: var(--ax-bg-cat);
  color: var(--ax-t-cat);
  border: 1px solid var(--ax-b-cat);
}
.andaxi-chip.is-tag{
  border-radius: var(--ax-r-tag);
  background: var(--ax-bg-tag);
  color: var(--ax-t-tag);
  border-color: var(--ax-b-tag);
}

/* ────────────────────────────────────────────────────────────
   Compatibilitate Divi: să nu taie overlay-ul
   ──────────────────────────────────────────────────────────── */
.andaxi-search-row,
.andaxi-search-row .et_pb_row,
.andaxi-search-row .et_pb_column{
  overflow: visible !important;
  position: relative;
  z-index: var(--ax-z);
}

/* ────────────────────────────────────────────────────────────
   Mobile
   ──────────────────────────────────────────────────────────── */
@media (max-width: 600px){
  .andaxi-search{ max-width: 100%; }
  .andaxi-thumb{ width: 40px; height: 40px; flex-basis: 40px; }
}