/* ==========================================================================
   Live search — woodncraft
   Θέση: templates/ut_tienda/assets/css/mod_vmajaxlivesearch.css

   Το module ελέγχει αν υπάρχει αυτό το αρχείο (mod_vmajaxlivesearch.php,
   γραμμές 150-155) και φορτώνει αυτό ΑΝΤΙ για το δικό του assets/css/style.css.
   Άρα δεν φορτώνεται ούτε η γραμματοσειρά εικονιδίων Flaticon.

   Στο header φαίνεται μόνο ένα στρογγυλό κουμπί με φακό, σαν το καλάθι.
   Πατώντας το ανοίγει πάνελ αναζήτησης:
     κινητό      — πλήρης οθόνη
     υπολογιστής — συρόμενο πάνελ από δεξιά, σε σκοτεινό φόντο
   ========================================================================== */

.wnc-search {
  --wnc-ink:    #2B2A29;
  --wnc-soft:   #5c554d;
  --wnc-muted:  #8c857c;
  --wnc-line:   #e6ded5;
  --wnc-hair:   #f4ede6;
  --wnc-cream:  #FBF6F1;
  --wnc-clay:   #B46E59;

  /* Το στρογγυλό κουμπί στο header */
  --wnc-btn-size:   42px;
  --wnc-btn-border: #d9cfc4;

  /* Πλάτος του πάνελ στον υπολογιστή */
  --wnc-panel-w: 440px;

  /* Ταχύτητα ανοίγματος και κλεισίματος */
  --wnc-speed: .28s;
  --wnc-ease:  cubic-bezier(.32, .72, 0, 1);

  position: relative;
  font-family: inherit;
}

.wnc-search *,
.wnc-search *::before,
.wnc-search *::after { box-sizing: border-box; }

.wnc-search form { margin: 0; }

.wnc-search .clearfix::after { content: ""; display: table; clear: both; }


/* --------------------------------------------------------------------------
   Το στρογγυλό κουμπί στο header — περίγραμμα, χωρίς γέμισμα
   -------------------------------------------------------------------------- */

.wnc-search-trigger {
  display: flex;
  width: var(--wnc-btn-size);
  height: var(--wnc-btn-size);
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 1px solid var(--wnc-btn-border);
  border-radius: 50%;
  background: transparent;
  color: var(--wnc-ink);
  cursor: pointer;
  transition: border-color .15s ease, background .15s ease;
}

.wnc-search-trigger:hover {
  border-color: var(--wnc-ink);
  background: transparent;
}

.wnc-search-trigger:focus-visible {
  outline: 2px solid var(--wnc-clay);
  outline-offset: 2px;
}


/* --------------------------------------------------------------------------
   Το πάνελ

   Δεν χρησιμοποιούμε display:none, γιατί δεν κινείται. Με visibility και
   opacity το κλείσιμο είναι το ίδιο ομαλό με το άνοιγμα.
   -------------------------------------------------------------------------- */

.wnc-search > form {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1200;
  visibility: hidden;
  opacity: 0;
  transition: opacity var(--wnc-speed) var(--wnc-ease),
              visibility 0s linear var(--wnc-speed);
}

.wnc-search.is-open > form {
  visibility: visible;
  opacity: 1;
  transition: opacity var(--wnc-speed) var(--wnc-ease),
              visibility 0s linear 0s;
}

.wnc-search .ajax-search-container {
  display: flex;
  flex-direction: column;
  background: #ffffff;
  transform: translateX(100%);
  transition: transform var(--wnc-speed) var(--wnc-ease);
}

.wnc-search.is-open .ajax-search-container { transform: translateX(0); }

body.wnc-search-open { overflow: hidden; }


/* --------------------------------------------------------------------------
   Η γραμμή αναζήτησης

   Στο DOM το βελάκι είναι μέσα στο .search-input-container, μαζί με το πεδίο.
   Το JS του module μετράει επίπεδα, οπότε δεν το μετακινούμε — το βγάζουμε
   οπτικά έξω από το πλαίσιο με απόλυτη θέση.
   -------------------------------------------------------------------------- */

.wnc-search .search-input-container {
  position: relative;
  flex: none;
  display: flex;
  align-items: center;
  gap: 2px;
  margin-left: 46px;
  padding: 0 7px 0 16px;
  border: 1px solid var(--wnc-line);
  border-radius: 999px;
  background: var(--wnc-cream);
  transition: border-color .18s ease, background .18s ease, box-shadow .18s ease;
}

.wnc-search .search-input-container:focus-within {
  border-color: var(--wnc-clay);
  background: #ffffff;
  box-shadow: 0 0 0 3px rgba(180, 110, 89, .12);
}

.wnc-search-dismiss {
  position: absolute;
  left: -46px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  width: 42px;
  height: 42px;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: none;
  color: var(--wnc-ink);
  cursor: pointer;
  transition: background .15s ease;
}

.wnc-search-dismiss:hover { background: var(--wnc-cream); }

.wnc-search .search-image {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--wnc-muted);
}

.wnc-search .search-input {
  flex: 1 1 auto;
  min-width: 0;
}

.wnc-search .vmajaxlivesearch-box {
  width: 100%;
  height: 50px;
  padding: 0 8px 0 12px;
  border: 0;
  background: none;
  outline: none;
  font-family: inherit;
  font-size: 16px;            /* κάτω από 16px το iOS κάνει ζουμ στο focus */
  color: var(--wnc-ink);
  appearance: none;
}

.wnc-search .vmajaxlivesearch-box::placeholder { color: #a79e94; opacity: 1; }
.wnc-search .vmajaxlivesearch-box::-webkit-search-cancel-button { display: none; }

.wnc-search .search-area-close {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: #ece2d8;
  color: var(--wnc-soft);
  cursor: pointer;
  transition: background .15s ease;
}

.wnc-search .search-area-close:hover { background: #e0d2c4; }


/* --------------------------------------------------------------------------
   Προτάσεις όσο το πεδίο είναι άδειο
   -------------------------------------------------------------------------- */

.wnc-search .wnc-suggest {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  margin-top: 22px;
}

.wnc-search.has-query .wnc-suggest { display: none; }

.wnc-search .wnc-suggest-title {
  padding: 0 2px 10px;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--wnc-muted);
}

.wnc-search .wnc-recent-list {
  margin: 0 0 26px;
  padding: 0;
  list-style: none;
}

.wnc-search .wnc-recent-list li {
  display: flex;
  align-items: center;
  gap: 8px;
  border-bottom: 1px solid var(--wnc-hair);
}

.wnc-search .wnc-recent-go {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 12px 2px;
  border: 0;
  background: none;
  font-family: inherit;
  font-size: 14.5px;
  color: var(--wnc-ink);
  text-align: left;
  cursor: pointer;
}

.wnc-search .wnc-recent-go svg { flex: none; color: #a79e94; }

.wnc-search .wnc-recent-go span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.wnc-search .wnc-recent-del {
  flex: none;
  display: flex;
  width: 40px;
  height: 40px;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: none;
  color: #a79e94;
  cursor: pointer;
}

.wnc-search .wnc-recent-del:hover { background: var(--wnc-cream); color: var(--wnc-soft); }

.wnc-search .wnc-popular { margin-bottom: 26px; }

.wnc-search .wnc-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding-bottom: 24px;
}

.wnc-search .wnc-chips a {
  display: flex;
  align-items: center;
  height: 38px;
  padding: 0 15px;
  border: 1px solid var(--wnc-line);
  border-radius: 999px;
  background: var(--wnc-cream);
  font-size: 13.5px;
  color: var(--wnc-soft);
  text-decoration: none;
}

.wnc-search .wnc-chips a:hover { border-color: var(--wnc-clay); color: var(--wnc-clay); }


/* --------------------------------------------------------------------------
   Αποτελέσματα
   Το module τα εμφανίζει και τα κρύβει με jQuery show()/hide(),
   που γράφει inline display — γι' αυτό το !important παρακάτω.
   -------------------------------------------------------------------------- */

.wnc-search .search-results:empty { display: none !important; }

.wnc-search .search-results {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  margin-top: 20px;
  text-align: left;
}

.wnc-search .jtvms-results-header {
  padding: 0 2px 10px;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--wnc-muted);
}

.wnc-search .jtvms-cresults,
.wnc-search .jtvms-bresults { margin-top: 26px; }

.wnc-search .jtvs-products-list,
.wnc-search .jtvs-categories-list,
.wnc-search .jtvs-brands-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.wnc-search .jtvs-product,
.wnc-search .jtvs-category,
.wnc-search .jtvs-brand { margin: 0; }

.wnc-search .jtvs-product > a,
.wnc-search .jtvs-category > a,
.wnc-search .jtvs-brand > a {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 2px;
  border-bottom: 1px solid var(--wnc-hair);
  text-decoration: none;
  color: var(--wnc-ink);
}

.wnc-search .jtvs-product > a:hover,
.wnc-search .jtvs-category > a:hover,
.wnc-search .jtvs-brand > a:hover { background: var(--wnc-cream); }

.wnc-search .jtvs-product-img,
.wnc-search .jtvs-category-img,
.wnc-search .jtvs-brand-img {
  flex: none;
  display: block;
  width: 46px;
  height: 46px;
  border-radius: 10px;
  overflow: hidden;
  background: #efe6dc;
}

.wnc-search .jtvs-product-img img,
.wnc-search .jtvs-category-img img,
.wnc-search .jtvs-brand-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.wnc-search .jtvs-product-data,
.wnc-search .jtvs-category-data,
.wnc-search .jtvs-brand-data {
  flex: 1 1 auto;
  min-width: 0;
  display: block;
}

.wnc-search .jtvs-product-name,
.wnc-search .jtvs-category-name,
.wnc-search .jtvs-brand-name {
  display: block;
  font-size: 14.5px;
  line-height: 1.3;
  color: var(--wnc-ink);
}

.wnc-search .jtvs-product-sdesc,
.wnc-search .jtvs-category-sdesc,
.wnc-search .jtvs-brand-sdesc,
.wnc-search .jtvs-product-sku {
  display: block;
  margin-top: 3px;
  font-size: 12.5px;
  line-height: 1.35;
  color: var(--wnc-muted);
}

.wnc-search .jtvs-product-price {
  display: block;
  margin-top: 3px;
  font-size: 12.5px;
  color: var(--wnc-muted);
}

.wnc-search .no-products,
.wnc-search .no-categories,
.wnc-search .no-brands {
  margin: 0;
  padding: 2px 2px 14px;
  font-size: 13.5px;
  color: var(--wnc-muted);
}

/* «Load more» — σαν τον σύνδεσμο «Όλα τα αποτελέσματα» του σχεδίου */
.wnc-search .jtvs-loadmore { padding: 4px 0 20px; }

.wnc-search .jtvs-loadmore > a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 11px 2px;
  font-size: 14px;
  font-weight: 500;
  color: var(--wnc-clay);
  text-decoration: none;
}

.wnc-search .jtvs-loadmore > a::after {
  content: "";
  width: 7px;
  height: 7px;
  border-top: 1.8px solid currentColor;
  border-right: 1.8px solid currentColor;
  transform: rotate(45deg);
}

.wnc-search .jtvs-loadmore > a:hover { color: #8a5a49; }


/* --------------------------------------------------------------------------
   Δείκτης φόρτωσης σε CSS — αντικαθιστά το GIF του module
   -------------------------------------------------------------------------- */

.wnc-search .jtvms-ajax-loader,
.wnc-search .ajax-loader {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 70px;
}

.wnc-search .jtvms-ajax-loader img,
.wnc-search .ajax-loader img { display: none; }

.wnc-search .jtvms-ajax-loader::after,
.wnc-search .ajax-loader::after {
  content: "";
  width: 22px;
  height: 22px;
  border: 2px solid var(--wnc-line);
  border-top-color: var(--wnc-clay);
  border-radius: 50%;
  animation: wnc-spin .7s linear infinite;
}

@keyframes wnc-spin { to { transform: rotate(360deg); } }


/* --------------------------------------------------------------------------
   Κινητό και tablet — πλήρης οθόνη
   -------------------------------------------------------------------------- */

@media (max-width: 991.98px) {

  .wnc-search > form { background: #ffffff; }

  .wnc-search .ajax-search-container {
    height: 100vh;
    height: 100dvh;
    padding: 16px 16px 0;
  }
}


/* --------------------------------------------------------------------------
   Υπολογιστής — συρόμενο πάνελ από δεξιά
   -------------------------------------------------------------------------- */

@media (min-width: 992px) {

  .wnc-search > form {
    background: rgba(43, 42, 41, .5);
    overflow: hidden;
  }

  .wnc-search .ajax-search-container {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: var(--wnc-panel-w);
    max-width: 92vw;
    padding: 20px 22px 0;
    box-shadow: -18px 0 44px rgba(43, 42, 41, .22);
  }
}


@media (prefers-reduced-motion: reduce) {
  .wnc-search > form,
  .wnc-search .ajax-search-container { transition-duration: .01s; }

  .wnc-search .jtvms-ajax-loader::after,
  .wnc-search .ajax-loader::after { animation-duration: 2s; }
}