/* ============================================================
   Vrool visual (image) search — camera button, crop modal, results.
   ============================================================ */

/* Camera button injected into the search bar */
.vrool-cam-btn{
  flex:0 0 auto;border:none;cursor:pointer;background:transparent;padding:0;margin:0;
  width:34px;height:34px;display:inline-flex;align-items:center;justify-content:center;
  color:#8f72ac;
}
.vrool-cam-btn:hover{color:#7648a8;}
.vrool-cam-btn svg{width:22px;height:22px;display:block;}

/* Full-screen crop modal */
.vis-modal{position:fixed;inset:0;z-index:100000;background:#0b0b0f;display:none;flex-direction:column;}
.vis-modal.is-open{display:flex;}
.vis-modal-head{display:flex;align-items:center;justify-content:space-between;padding:14px 16px;color:#fff;flex:0 0 auto;}
.vis-modal-head .vis-title{font-size:16px;font-weight:800;}
.vis-modal-head button{background:none;border:none;color:#fff;font-size:15px;font-weight:600;cursor:pointer;padding:6px 8px;}
.vis-stage{flex:1 1 auto;min-height:0;position:relative;background:#0b0b0f;overflow:hidden;}
.vis-stage img{max-width:100%;display:block;}
.vis-modal-foot{flex:0 0 auto;padding:16px;}
.vis-search-btn{
  width:100%;padding:15px;border:none;border-radius:14px;background:#8f72ac;color:#fff;
  font-size:16px;font-weight:800;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:8px;
}
.vis-search-btn:disabled{opacity:0.6;cursor:default;}
.vis-search-btn svg{width:18px;height:18px;}

/* Results overlay */
.vis-results{position:fixed;inset:0;z-index:100001;background:#fff;display:none;flex-direction:column;}
.vis-results.is-open{display:flex;}
.vis-results-head{display:flex;align-items:center;gap:12px;padding:14px 16px;border-bottom:1px solid #eef0f4;flex:0 0 auto;}
.vis-results-head .vis-back{background:none;border:none;font-size:20px;cursor:pointer;color:#0f172a;padding:4px 8px;}
.vis-results-head .vis-h{font-size:16px;font-weight:800;color:#0f172a;}
.vis-results-head .vis-sub{font-size:12px;color:#64748b;}
.vis-results-body{flex:1 1 auto;overflow-y:auto;padding:14px;-webkit-overflow-scrolling:touch;}
.vis-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;}
@media(min-width:640px){.vis-grid{grid-template-columns:repeat(3,1fr);}}
@media(min-width:900px){.vis-grid{grid-template-columns:repeat(4,1fr);}}
.vis-card{display:block;text-decoration:none;color:inherit;border:1px solid #eef0f4;border-radius:14px;overflow:hidden;background:#fff;transition:box-shadow .15s;}
.vis-card:hover{box-shadow:0 6px 20px rgba(15,23,42,0.08);}
.vis-card-img{width:100%;aspect-ratio:1/1;object-fit:cover;display:block;background:#f3f4f6;}
.vis-card-b{padding:8px 10px;}
.vis-card-title{font-size:13px;font-weight:700;color:#0f172a;line-height:1.3;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
.vis-card-price{font-size:13px;font-weight:800;color:#8f72ac;margin-top:2px;}
.vis-empty{padding:60px 20px;text-align:center;color:#94a3b8;font-size:14px;}
.vis-loading{position:fixed;inset:0;z-index:100002;background:rgba(11,11,15,0.85);display:none;align-items:center;justify-content:center;flex-direction:column;gap:14px;color:#fff;}
.vis-loading.is-open{display:flex;}
.vis-spin{width:40px;height:40px;border:4px solid rgba(255,255,255,0.25);border-top-color:#fff;border-radius:50%;animation:visSpin 1s linear infinite;}
@keyframes visSpin{to{transform:rotate(360deg);}}
.vis-loading .vis-loading-txt{font-size:14px;font-weight:600;}


/* Desktop inline header search (>=981px) positions its buttons absolutely, so the
   camera must be placed absolutely too (left of the AI icon) and the input needs
   room, otherwise the camera overflows/overlaps the search pill. */
@media (min-width: 981px) {
  .vrool-hdr-search .vrool-hdr-search-form { position: relative !important; }
  .vrool-hdr-search .vrool-cam-btn {
    position: absolute !important;
    right: 80px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: 30px !important;
    height: 30px !important;
    z-index: 3 !important;
  }
  .vrool-hdr-search .vrool-cam-btn svg { width: 20px !important; height: 20px !important; }
  .vrool-hdr-search .vrool-hdr-s-input { padding-right: 118px !important; }
}