/* ============================================
   BUSCADOR TU TIENDA MOTERA v2 - FLOTANTE
   ============================================ */

/* === FLOATING BUTTON === */
#bm-float-btn {
  position: fixed;
  bottom: 28px;
  right: 28px;
  z-index: 99990;
  width: 58px;
  height: 58px;
  border-radius: 50%;
  background: linear-gradient(135deg, #e94560, #c0392b);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 4px 20px rgba(233,69,96,0.4), 0 0 0 0 rgba(233,69,96,0.3);
  transition: all 0.3s ease;
  animation: bmPulse 3s ease-in-out infinite;
}

#bm-float-btn:hover {
  transform: scale(1.1);
  box-shadow: 0 6px 30px rgba(233,69,96,0.55);
  animation: none;
}

@keyframes bmPulse {
  0%, 100% { box-shadow: 0 4px 20px rgba(233,69,96,0.4), 0 0 0 0 rgba(233,69,96,0.3); }
  50% { box-shadow: 0 4px 20px rgba(233,69,96,0.4), 0 0 0 12px rgba(233,69,96,0); }
}

/* === MODAL OVERLAY === */
#bm-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 99999;
  background: rgba(0,0,0,0.7);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  overflow-y: auto;
  animation: bmFadeIn 0.25s ease-out;
}

#bm-modal {
  position: relative;
  width: 94%;
  max-width: 1100px;
  margin: 3vh auto;
  min-height: 60vh;
  max-height: 94vh;
  overflow-y: auto;
  border-radius: 20px;
  background: linear-gradient(160deg, #090914 0%, #111128 35%, #0e1a2c 65%, #090914 100%);
  box-shadow: 0 25px 80px rgba(0,0,0,0.6), 0 0 0 1px rgba(255,255,255,0.06);
  animation: bmSlideUp 0.3s ease-out;
}

#bm-modal-close {
  position: sticky;
  top: 12px;
  float: right;
  margin: 12px 16px 0 0;
  z-index: 10;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.1);
  color: #aaa;
  font-size: 1.4rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
  line-height: 1;
}

#bm-modal-close:hover {
  background: rgba(233,69,96,0.2);
  color: #e94560;
  border-color: rgba(233,69,96,0.3);
}

@keyframes bmSlideUp {
  from { opacity: 0; transform: translateY(30px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes bmFadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* Hide float button when modal is open */
#bm-modal-overlay[style*="block"] ~ #bm-float-btn,
body.bm-modal-open #bm-float-btn { display: none !important; }

/* === INLINE MODE (shortcode) - hide float button on that page === */
.bm-inline-mode { /* No special styling, just a marker */ }

/* === MAIN APP STYLES === */
#buscador-motera-app {
  font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
  color: #fff;
  padding: 1.5rem 1.2rem 2rem;
}

#buscador-motera-app *, #buscador-motera-app *::before, #buscador-motera-app *::after {
  box-sizing: border-box;
  margin: 0; padding: 0;
}

.bm-container { max-width: 1060px; margin: 0 auto; }

/* Header */
.bm-header { text-align: center; margin-bottom: 1.5rem; }

.bm-title {
  font-size: clamp(1.5rem, 3.5vw, 2rem);
  font-weight: 900;
  letter-spacing: -0.02em;
  margin-bottom: 0.15rem;
  background: linear-gradient(135deg, #e94560, #f39c12, #e94560);
  background-size: 200% auto;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.bm-subtitle { font-size: 0.8rem; color: #4a4a5a; }

/* Search */
.bm-search-wrap { position: relative; margin-bottom: 1rem; }

.bm-search-box {
  position: relative;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.09);
  border-radius: 14px;
  transition: all 0.3s;
}

.bm-search-box.active { animation: bmGlow 2.5s ease-in-out infinite; }

@keyframes bmGlow {
  0%,100% { box-shadow: 0 0 12px rgba(233,69,96,0.1); }
  50% { box-shadow: 0 0 28px rgba(233,69,96,0.22); }
}

.bm-search-icon {
  position: absolute; left: 14px; top: 50%; transform: translateY(-50%);
  font-size: 1rem; color: #e94560; pointer-events: none;
}

.bm-search-input {
  width: 100%; padding: 0.85rem 2.5rem 0.85rem 2.8rem;
  background: transparent; border: none; outline: none;
  color: #fff; font-size: 0.95rem; font-family: inherit;
  caret-color: #e94560;
}

.bm-search-input::placeholder { color: #555; }

.bm-search-clear {
  position: absolute; right: 12px; top: 50%; transform: translateY(-50%);
  width: 22px; height: 22px; display: flex; align-items: center; justify-content: center;
  border-radius: 50%; background: rgba(255,255,255,0.07); border: none;
  color: #777; font-size: 0.65rem; cursor: pointer;
}

/* Suggestions */
.bm-suggestions {
  position: absolute; z-index: 100; width: 100%; margin-top: 6px;
  background: rgba(14,14,28,0.98); border: 1px solid rgba(255,255,255,0.09);
  border-radius: 12px; overflow: hidden; backdrop-filter: blur(20px);
  box-shadow: 0 15px 40px rgba(0,0,0,0.5); animation: bmFadeIn 0.2s ease-out;
}

.bm-suggestion-item {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 14px; cursor: pointer; transition: background 0.15s;
}

.bm-suggestion-item:hover { background: rgba(233,69,96,0.07); }

.bm-suggestion-img {
  width: 32px; height: 32px; border-radius: 6px;
  object-fit: cover; flex-shrink: 0; background: rgba(255,255,255,0.03);
}

.bm-suggestion-placeholder {
  width: 32px; height: 32px; border-radius: 6px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; background: rgba(233,69,96,0.07); font-size: 0.85rem;
}

.bm-suggestion-info { flex: 1; min-width: 0; }
.bm-suggestion-name { font-size: 0.8rem; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bm-suggestion-meta { font-size: 0.7rem; color: #555; }
.bm-suggestion-price { font-size: 0.8rem; font-weight: 700; color: #e94560; flex-shrink: 0; }

/* Quick cats */
.bm-quick-cats { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; margin-bottom: 1.2rem; }

.bm-cat-tag {
  font-size: 0.7rem; padding: 5px 12px; border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.05); background: rgba(255,255,255,0.03);
  color: #666; cursor: pointer; transition: all 0.2s; font-family: inherit;
}

.bm-cat-tag:hover, .bm-cat-tag.active {
  background: rgba(233,69,96,0.18); color: #e94560; border-color: rgba(233,69,96,0.25);
}

/* Filters */
.bm-filters { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 1.2rem; }

.bm-filter-select, .bm-filter-check {
  font-size: 0.8rem; padding: 8px 12px; border-radius: 10px;
  background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.07);
  color: #888; outline: none; cursor: pointer; font-family: inherit;
}

.bm-filter-select.active, .bm-filter-check.active {
  border-color: rgba(233,69,96,0.35); color: #e94560;
}

.bm-filter-select option { background: #12122a; color: #bbb; }

.bm-filter-check { display: flex; align-items: center; gap: 6px; user-select: none; }
.bm-filter-check input { accent-color: #e94560; }

.bm-filter-clear {
  font-size: 0.7rem; padding: 6px 12px; border-radius: 10px;
  background: rgba(233,69,96,0.1); border: none; color: #e94560;
  cursor: pointer; font-family: inherit;
}

.bm-filter-count { font-size: 0.7rem; color: #444; margin-left: auto; }

/* Product Grid */
.bm-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 12px; animation: bmFadeIn 0.25s ease-out;
}

/* Product Card */
.bm-card {
  padding: 14px; border-radius: 14px;
  background: rgba(255,255,255,0.045); border: 1px solid rgba(255,255,255,0.06);
  cursor: pointer; transition: all 0.2s;
}

.bm-card:hover {
  background: rgba(255,255,255,0.09);
  border-color: rgba(233,69,96,0.35);
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(233,69,96,0.08);
}

.bm-card-img-wrap { display: flex; justify-content: center; margin-bottom: 10px; }

.bm-card-img { width: 56px; height: 56px; border-radius: 10px; object-fit: cover; background: rgba(255,255,255,0.03); }
.bm-card-img-placeholder { width: 56px; height: 56px; border-radius: 10px; display: flex; align-items: center; justify-content: center; background: rgba(233,69,96,0.07); font-size: 1.6rem; }

.bm-badges { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 6px; }
.bm-badge { font-size: 0.65rem; padding: 2px 7px; border-radius: 999px; }
.bm-badge-cat { background: rgba(52,152,219,0.1); color: #5dade2; }
.bm-badge-stock { background: rgba(39,174,96,0.1); color: #27ae60; }
.bm-badge-nostock { background: rgba(233,69,96,0.12); color: #e94560; }
.bm-badge-sale { background: rgba(39,174,96,0.12); color: #27ae60; font-weight: 700; }

.bm-card-name { color: #fff; font-weight: 700; font-size: 0.82rem; line-height: 1.3; margin-bottom: 4px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.bm-card-desc { font-size: 0.7rem; color: #777; margin-bottom: 10px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

.bm-price { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; }
.bm-price-current { font-weight: 900; color: #e94560; }
.bm-price-current.lg { font-size: 1.6rem; }
.bm-price-current.md { font-size: 1.1rem; }
.bm-price-current.sm { font-size: 0.82rem; }
.bm-price-old { font-size: 0.7rem; color: #555; text-decoration: line-through; }

/* Compact card */
.bm-card-compact {
  display: flex; align-items: center; gap: 10px; padding: 10px;
  border-radius: 10px; background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.06); cursor: pointer; transition: all 0.2s;
}

.bm-card-compact:hover { background: rgba(255,255,255,0.08); border-color: rgba(233,69,96,0.35); transform: translateX(3px); }
.bm-card-compact .bm-card-img, .bm-card-compact .bm-card-img-placeholder { width: 40px; height: 40px; font-size: 1.1rem; }
.bm-card-compact-info { flex: 1; min-width: 0; }
.bm-card-compact-name { font-size: 0.82rem; font-weight: 600; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bm-card-compact-meta { font-size: 0.7rem; color: #777; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Detail */
.bm-detail { animation: bmFadeIn 0.25s ease-out; }

.bm-back-btn { display: inline-flex; align-items: center; gap: 6px; margin-bottom: 1.2rem; font-size: 0.82rem; color: #777; background: none; border: none; cursor: pointer; font-family: inherit; }
.bm-back-btn:hover { color: #e94560; }

.bm-detail-main { border-radius: 14px; padding: 20px; background: rgba(255,255,255,0.045); border: 1px solid rgba(255,255,255,0.07); display: flex; flex-direction: column; gap: 1.2rem; margin-bottom: 1.2rem; }
@media (min-width: 640px) { .bm-detail-main { flex-direction: row; } }

.bm-detail-images { display: flex; flex-direction: column; align-items: center; gap: 6px; flex-shrink: 0; }
.bm-detail-main-img { width: 100px; height: 100px; border-radius: 12px; object-fit: cover; }
.bm-detail-main-img-placeholder { width: 100px; height: 100px; border-radius: 12px; display: flex; align-items: center; justify-content: center; background: rgba(233,69,96,0.07); font-size: 2.8rem; }
.bm-detail-gallery { display: flex; gap: 5px; flex-wrap: wrap; justify-content: center; }
.bm-detail-gallery img { width: 36px; height: 36px; border-radius: 6px; object-fit: cover; opacity: 0.5; transition: opacity 0.2s; cursor: pointer; }
.bm-detail-gallery img:hover { opacity: 1; }

.bm-detail-info { flex: 1; min-width: 0; }
.bm-detail-name { font-size: clamp(1.1rem, 2.5vw, 1.35rem); font-weight: 900; color: #fff; line-height: 1.2; margin-bottom: 6px; }
.bm-detail-sku { font-size: 0.7rem; font-family: monospace; color: #444; margin-bottom: 6px; }
.bm-detail-desc { font-size: 0.82rem; color: #999; line-height: 1.5; margin-bottom: 10px; }
.bm-detail-attrs { display: flex; flex-wrap: wrap; gap: 3px 14px; margin-bottom: 10px; }
.bm-detail-attr { font-size: 0.7rem; }
.bm-detail-attr-label { color: #555; }
.bm-detail-attr-value { color: #999; }
.bm-detail-tags { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 14px; }
.bm-tag { font-size: 0.7rem; padding: 2px 8px; border-radius: 999px; background: rgba(255,255,255,0.03); color: #666; }
.bm-detail-price-wrap { margin-bottom: 14px; }
.bm-igic-note { font-size: 0.7rem; color: #444; margin-left: 4px; }

.bm-cta {
  display: inline-flex; align-items: center; gap: 6px; padding: 10px 22px;
  border-radius: 10px; background: linear-gradient(135deg, #e94560, #c0392b);
  color: white; font-weight: 700; font-size: 0.82rem; text-decoration: none;
  box-shadow: 0 4px 12px rgba(233,69,96,0.25); transition: all 0.2s; font-family: inherit;
}

.bm-cta:hover { transform: translateY(-1px); box-shadow: 0 6px 18px rgba(233,69,96,0.35); color: white; }

.bm-similar-title { font-size: 1rem; font-weight: 700; color: #fff; margin-bottom: 0.8rem; display: flex; align-items: center; gap: 6px; }
.bm-similar-title span { color: #e94560; }
.bm-similar-grid { display: grid; grid-template-columns: 1fr; gap: 10px; }
@media (min-width: 640px) { .bm-similar-grid { grid-template-columns: 1fr 1fr; } }

/* Loading / Empty / Error */
.bm-loading { display: flex; flex-direction: column; align-items: center; padding: 3rem 0; }
.bm-spinner-wrap { position: relative; width: 52px; height: 52px; margin-bottom: 1rem; }
.bm-spinner { position: absolute; inset: 0; border-radius: 50%; border: 3px solid rgba(233,69,96,0.12); border-top-color: #e94560; animation: bmSpin 1s linear infinite; }
@keyframes bmSpin { to { transform: rotate(360deg); } }
.bm-spinner-icon { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 1.4rem; }
.bm-loading-text { color: #fff; font-weight: 600; margin-bottom: 3px; font-size: 0.9rem; }
.bm-loading-sub { font-size: 0.7rem; color: #555; }

.bm-empty { text-align: center; padding: 3rem 0; }
.bm-empty-icon { font-size: 2.8rem; margin-bottom: 0.8rem; }
.bm-empty-text { color: #fff; font-size: 1rem; font-weight: 700; margin-bottom: 6px; }
.bm-empty-sub { font-size: 0.8rem; color: #555; }

.bm-error { text-align: center; padding: 3rem 0; }
.bm-error-icon { font-size: 2.8rem; margin-bottom: 0.8rem; }
.bm-error-text { color: #fff; font-weight: 600; margin-bottom: 6px; }
.bm-error-sub { font-size: 0.8rem; color: #777; margin-bottom: 3px; }
.bm-error-detail { font-size: 0.7rem; font-family: monospace; color: #e94560; margin-bottom: 0.8rem; }
.bm-retry-btn { padding: 8px 18px; border-radius: 10px; background: linear-gradient(135deg, #e94560, #c0392b); color: white; font-weight: 600; font-size: 0.82rem; border: none; cursor: pointer; font-family: inherit; }

.bm-footer { text-align: center; margin-top: 2rem; padding-top: 1rem; border-top: 1px solid rgba(255,255,255,0.03); font-size: 0.7rem; color: #2a2a3a; }

/* Responsive */
@media (max-width: 640px) {
  #bm-modal { width: 98%; margin: 1vh auto; border-radius: 16px; }
  #bm-float-btn { width: 50px; height: 50px; bottom: 20px; right: 20px; }
  .bm-grid { grid-template-columns: 1fr 1fr; gap: 8px; }
  .bm-card { padding: 10px; }
  .bm-filters { gap: 6px; }
  .bm-filter-select, .bm-filter-check { font-size: 0.75rem; padding: 6px 8px; }
}

@media (max-width: 380px) {
  .bm-grid { grid-template-columns: 1fr; }
}

/* Scrollbar inside modal */
#bm-modal::-webkit-scrollbar { width: 5px; }
#bm-modal::-webkit-scrollbar-track { background: transparent; }
#bm-modal::-webkit-scrollbar-thumb { background: rgba(233,69,96,0.2); border-radius: 3px; }