/* ==========================================================================
   Winfo Search — fullscreen AJAX vyhľadávací modal (rose/blush dizajn)
   ========================================================================== */
:root{
  --wbs-rose:#f7b1c1;
  --wbs-rose-deep:#e07d96;
  --wbs-teal:#69bcb6;
  --wbs-ink:#41474d;
  --wbs-line:#efe7e4;
}

body.wb-search-lock{ overflow:hidden; }

.wb-search-modal{
  position:fixed; inset:0; z-index:99999;
  background:rgba(255,255,255,.98);
  backdrop-filter:blur(4px);
  display:flex; flex-direction:column;
  opacity:0; visibility:hidden; pointer-events:none;
  transition:opacity .22s ease, visibility .22s ease;
}
.wb-search-modal.is-open{ opacity:1; visibility:visible; pointer-events:auto; }

/* hlavička s inputom */
#wbSearchModal .wb-search-head{
  display:flex !important; align-items:center !important; gap:14px !important;
  max-width:1040px !important; width:100% !important; margin:0 auto !important;
  padding:46px 24px 14px !important; box-sizing:border-box !important;
}
#wbSearchModal .wb-search-field{
  flex:1 1 auto !important; position:relative !important; display:flex !important;
  align-items:center !important; width:auto !important; margin:0 !important;
}
#wbSearchModal .wb-search-field::before{
  content:"" !important; position:absolute !important; left:22px !important; top:50% !important;
  width:20px !important; height:20px !important; margin:0 !important;
  transform:translateY(-50%) !important;
  background:no-repeat center/contain !important;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23e07d96' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cline x1='21' y1='21' x2='16.7' y2='16.7'/%3E%3C/svg%3E") !important;
  opacity:.85 !important; pointer-events:none !important; z-index:2 !important;
}
#wbSearchModal input.wb-search-input{
  flex:1 1 auto !important; width:100% !important; max-width:none !important;
  min-height:0 !important; height:auto !important;
  border:1.5px solid var(--wbs-line) !important;
  border-radius:18px !important;
  background:#fff !important;
  font-size:23px !important; line-height:1.2 !important;
  color:var(--wbs-ink) !important;
  padding:20px 22px 20px 56px !important;
  margin:0 !important;
  outline:none !important;
  font-family:inherit !important;
  box-shadow:0 8px 30px rgba(224,125,150,.07) !important;
  transition:border-color .18s, box-shadow .18s !important;
  box-sizing:border-box !important;
  text-transform:none !important; letter-spacing:normal !important;
}
#wbSearchModal input.wb-search-input::placeholder{ color:#d8c4c9 !important; opacity:1 !important; }
#wbSearchModal input.wb-search-input:focus,
#wbSearchModal input.wb-search-input:focus-visible{
  border-color:var(--wbs-rose) !important;
  box-shadow:0 10px 34px rgba(224,125,150,.16) !important;
  outline:none !important;
}
#wbSearchModal button.wb-search-close{
  flex:0 0 auto !important; width:54px !important; height:54px !important;
  min-width:0 !important; min-height:0 !important;
  border:0 !important; outline:none !important; cursor:pointer !important;
  background:#fdeef1 !important; border-radius:16px !important;
  box-shadow:none !important; margin:0 !important; padding:0 !important;
  font-size:24px !important; line-height:1 !important; color:var(--wbs-rose-deep) !important;
  display:flex !important; align-items:center !important; justify-content:center !important;
  text-transform:none !important; letter-spacing:normal !important;
  transition:background .18s, color .18s, transform .18s !important;
}
#wbSearchModal button.wb-search-close:hover{
  background:var(--wbs-rose) !important; color:#fff !important;
  transform:rotate(90deg) !important;
}

/* telo */
.wb-search-body{
  flex:1; overflow-y:auto;
  max-width:1100px; width:100%; margin:0 auto;
  padding:10px 24px 60px;
}
.wb-search-hint{
  text-align:center; color:#9a8e8e; font-size:15px; padding:40px 0;
}

/* mriežka výsledkov */
.wb-search-grid{
  display:grid; grid-template-columns:repeat(4,1fr); gap:24px;
  transition:opacity .15s;
}
.wb-search-grid.is-loading{ opacity:.5; }

.wb-search-card{
  display:flex; flex-direction:column; text-decoration:none;
  color:var(--wbs-ink);
}
.wb-search-thumb{
  position:relative; border-radius:14px; overflow:hidden;
  background:#faf6f5; aspect-ratio:1/1; margin-bottom:10px;
}
.wb-search-thumb img{ width:100%; height:100%; object-fit:cover; display:block; }
.wb-search-sale{
  position:absolute; top:10px; right:10px; z-index:2;
  background:var(--wbs-rose); color:#fff; font-size:11px; font-weight:700;
  padding:5px 11px; border-radius:999px;
}
.wb-search-title{
  font-size:14px; line-height:1.35; margin-bottom:5px;
  color:var(--wbs-teal); font-weight:600;
}
.wb-search-title mark{ background:#fdeef1; color:var(--wbs-rose-deep); padding:0 1px; border-radius:3px; }
.wb-search-price{ font-size:14px; color:var(--wbs-ink); }
.wb-search-price del{ color:#b3a6a6; margin-right:6px; font-size:13px; }
.wb-search-price ins{ text-decoration:none; font-weight:700; }
.wb-search-price .woocommerce-Price-amount{ font-weight:600; }

/* odkaz na všetky výsledky */
.wb-search-all{
  display:block; text-align:center; margin:30px auto 0;
  color:var(--wbs-rose-deep); font-weight:700; font-size:15px;
  text-decoration:none;
}
.wb-search-all:hover{ text-decoration:underline; }

/* responzivita */
@media(max-width:1024px){
  .wb-search-grid{ grid-template-columns:repeat(3,1fr); gap:18px; }
  #wbSearchModal input.wb-search-input{ font-size:20px !important; padding:18px 20px 18px 52px !important; }
}
@media(max-width:680px){
  .wb-search-grid{ grid-template-columns:repeat(2,1fr); gap:16px; }
  #wbSearchModal .wb-search-head{ padding:30px 16px 12px !important; gap:10px !important; }
  #wbSearchModal input.wb-search-input{ font-size:18px !important; padding:16px 16px 16px 48px !important; border-radius:14px !important; }
  #wbSearchModal button.wb-search-close{ width:48px !important; height:48px !important; border-radius:13px !important; }
  #wbSearchModal .wb-search-field::before{ left:18px !important; width:18px !important; height:18px !important; }
  .wb-search-body{ padding:10px 16px 40px; }
}
@media(max-width:400px){
  .wb-search-grid{ grid-template-columns:1fr 1fr; gap:12px; }
}
