.mbfav-btn{display:inline-flex;align-items:center;gap:.4rem;border:1px solid #e5e7eb;padding:.4rem .6rem;border-radius:9999px;cursor:pointer;background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.04);font-weight:600}
.mbfav-btn .mbfav-icon{line-height:1;transform:translateY(-1px)}
.mbfav-btn.is-active{background:#fef3c7;border-color:#f59e0b}
.mbfav-btn.small{padding:.25rem .5rem;font-size:.9em}
.mbfav-btn.align-right{float:right}
.mbfav-count{font-size:.9em;opacity:.8;margin-left:.2rem}

.mbfav-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:16px}
.mbfav-card{background:#fff;border:1px solid #e5e7eb;border-radius:12px;overflow:hidden;box-shadow:0 1px 2px rgba(0,0,0,.04);position:relative}
.mbfav-thumb{display:block;aspect-ratio:4/3;background:#f8fafc}
.mbfav-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.mbfav-title{font-size:1rem;margin:.6rem .8rem}
.mbfav-title a{text-decoration:none;color:inherit}
.mbfav-pt{opacity:.7;font-size:.8rem;margin:0 .8rem .8rem}
.mbfav-login-hint,.mbfav-empty{padding:1rem;border:1px dashed #e5e7eb;border-radius:12px;background:#fff}

.mbfav-heading{font-size:1.25rem;margin:.2rem 0 .8rem;font-weight:700}

/* --- Favorites filter --- */
.mbfav-filter{margin:0 0 12px 0;background:#fff;border:1px solid #e5e7eb;border-radius:12px;padding:10px;box-shadow:0 1px 2px rgba(0,0,0,.03)}
.mbfav-filter-row{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.mbfav-filter .mbfav-search{flex:1;min-width:220px;padding:.5rem .6rem;border:1px solid #e5e7eb;border-radius:10px}
.mbfav-results.is-loading{opacity:.6;pointer-events:none;transition:opacity .2s ease}

/* --- Minimal tweaks for filter to match "Ver barco/crucero" button look --- */
.mbfav-filter{background:#fff;border:1px solid #e5e7eb;border-radius:12px;padding:10px;box-shadow:none}
.mbfav-filter .mb-view-btn{display:inline-flex;align-items:center;gap:.4rem;font-weight:700;border-radius:9999px;padding:.45rem .9rem;text-decoration:none}
.mbfav-filter .mbfav-search{border-color:#e5e7eb}

/* --- Match Buscar button to "Ver" button style --- */
.mbfav-filter button.mb-view-btn,
.mbfav-filter a.mb-view-btn {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  font-weight: 700;
  border-radius: 9999px;
  padding: .5rem 1rem;
  text-decoration: none;
  background: var(--mb-blue);
  color: #fff;
  border: none;
  cursor: pointer;
}
.mbfav-filter button.mb-view-btn:hover,
.mbfav-filter a.mb-view-btn:hover { filter: brightness(1.05); }
.mbfav-filter button.mb-view-btn:focus-visible,
.mbfav-filter a.mb-view-btn:focus-visible {
  outline: 2px solid var(--mb-blue);
  outline-offset: 2px;
}

/* --- Mobile UX improvements --- */
@media (max-width: 640px){
  .mbfav-grid{ grid-template-columns: 1fr; gap: 12px; }
  .mbfav-filter{ padding: 12px; }
  .mbfav-filter-row{ flex-direction: column; align-items: stretch; gap: 10px; }
  .mbfav-filter .mbfav-search{ width: 100%; min-width: 0; font-size: 16px; line-height: 1.2; padding: .6rem .8rem; }
  .mbfav-filter .mb-view-btn{ width: 100%; justify-content: center; padding: .6rem 1rem; }
  .mbfav-title{ font-size: 1.05rem; }
  .mb-card-actions{ left: 10px; right: 10px; bottom: 10px; }
}
/* Bigger tap targets */
.mbfav-btn.small{ padding: .4rem .6rem; }
.mbfav-card a, .mb-view-btn, .mbfav-btn{ -webkit-tap-highlight-color: transparent; }
.mbfav-thumb{ aspect-ratio: 4/3; background:#f3f4f6; }
.mbfav-thumb img{ width:100%; height:100%; object-fit:cover; display:block; }