/* ============================================================
   Bellostas Studio — attribution badge (shared)
   Discreet, fixed bottom-right pill. Closed by default; opens a
   small card on click (video · site · contact). Uses the host
   page's design tokens (colors_and_type.css) so it blends in.
   Never auto-opens. Sits below the Buscador drawer/overlay so it
   never covers the app's detail or filters on mobile.
   ============================================================ */

.bs-badge {
  position: fixed; right: 18px; z-index: 45;
  bottom: calc(18px + env(safe-area-inset-bottom, 0px));
  font-family: var(--font-body);
}

/* ---------- closed pill ---------- */
.bs-pill {
  display: inline-flex; align-items: center; gap: 8px;
  background: rgba(255,255,255,0.92); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  border: 1px solid var(--border); border-radius: var(--r-pill);
  padding: 7px 13px 7px 8px; box-shadow: var(--shadow-md);
  cursor: pointer; color: var(--fg2);
  font: 600 12.5px/1 var(--font-body); white-space: nowrap;
  transition: box-shadow var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.bs-pill:hover { box-shadow: var(--shadow-lg); transform: translateY(-1px); color: var(--fg1); }
.bs-pill:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 2px; }
.bs-pill__mark {
  width: 22px; height: 22px; border-radius: 6px; background: var(--ink-900); color: #fff;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
  font: 800 12px/1 var(--font-display); letter-spacing: -0.02em;
}
.bs-pill__tx b { font-weight: 700; color: var(--fg1); }
.bs-pill__chev {
  display: inline-flex; color: var(--fg4); margin-left: 1px;
  transition: transform var(--dur-base) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.bs-pill:hover .bs-pill__chev { color: var(--fg2); }
.bs-badge.is-open .bs-pill__chev { transform: rotate(180deg); color: var(--orange-600); }

/* ---------- expanded card ---------- */
.bs-card {
  position: absolute; bottom: calc(100% + 10px); right: 0;
  width: 270px; max-width: calc(100vw - 32px);
  background: #fff; border: 1px solid var(--border); border-radius: var(--r-lg);
  box-shadow: var(--shadow-lg); padding: 6px;
  transform-origin: bottom right;
  opacity: 0; transform: translateY(6px) scale(0.98); visibility: hidden; pointer-events: none;
  transition: opacity var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out), visibility var(--dur-base);
}
.bs-badge.is-open .bs-card { opacity: 1; transform: none; visibility: visible; pointer-events: auto; }

.bs-card__head { padding: 12px 12px 10px; position: relative; }
.bs-card__title { font: 700 13px/1.2 var(--font-display); color: var(--fg1); }
.bs-card__sub { font: var(--text-xs); color: var(--fg3); margin-top: 4px; max-width: 205px; line-height: 1.4; }
.bs-card__close {
  position: absolute; top: 8px; right: 8px; width: 26px; height: 26px;
  border: 0; background: transparent; color: var(--fg4); cursor: pointer; border-radius: var(--r-sm);
  display: flex; align-items: center; justify-content: center;
}
.bs-card__close:hover { background: var(--slate-100); color: var(--fg2); }

.bs-action {
  display: flex; align-items: center; gap: 11px; padding: 9px 10px;
  border-radius: var(--r-md); text-decoration: none; color: inherit;
  transition: background var(--dur-fast) var(--ease-out);
}
.bs-action:hover { background: var(--slate-50); }
.bs-action__ic {
  width: 32px; height: 32px; border-radius: var(--r-sm); background: var(--slate-100);
  display: flex; align-items: center; justify-content: center; color: var(--ink-800); flex-shrink: 0;
}
.bs-action--video .bs-action__ic { background: var(--orange-500); color: #fff; }
.bs-action__tx { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.bs-action__tx b { font: 600 13px/1.15 var(--font-body); color: var(--fg1); }
.bs-action__tx small { font: var(--text-xs); color: var(--fg3); }
.bs-action__arr { color: var(--fg4); flex-shrink: 0; }
.bs-action:hover .bs-action__arr { color: var(--orange-600); }

.bs-badge svg { display: block; }

/* ---------- inside the Buscador app: bottom-LEFT, always a compact chip ----------
   (bottom-right holds prices/stock; the left side is just the decorative
   thumbnails, so the chip never sits over anything important. It also stays
   below the drawer/overlay z-index, so the detail and filters cover it.) */
.bs-badge--app { left: 14px; right: auto; }
.bs-badge--app .bs-pill { padding: 7px 9px; gap: 5px; }
.bs-badge--app .bs-pill__tx { display: none; }
.bs-badge--app .bs-pill__mark { width: 24px; height: 24px; }
.bs-badge--app .bs-card { left: 0; right: auto; transform-origin: bottom left; }

/* ---------- mobile: shrink to a mark-only chip ---------- */
@media (max-width: 620px) {
  .bs-badge { right: 14px; bottom: calc(14px + env(safe-area-inset-bottom, 0px)); }
  .bs-pill { padding: 7px 9px; gap: 5px; }
  .bs-pill__tx { display: none; }
  .bs-pill__mark { width: 24px; height: 24px; }
}

/* ---------- desktop / mouse: open on hover (and keyboard focus) ---------- */
@media (hover: hover) and (pointer: fine) {
  /* invisible bridge across the pill→card gap so it doesn't close mid-move */
  .bs-card::after { content: ''; position: absolute; top: 100%; left: 0; right: 0; height: 14px; }
  .bs-badge:hover .bs-card,
  .bs-badge:focus-within .bs-card {
    opacity: 1; transform: none; visibility: visible; pointer-events: auto;
  }
  .bs-badge:hover .bs-pill__chev,
  .bs-badge:focus-within .bs-pill__chev { transform: rotate(180deg); color: var(--orange-600); }
  /* hover-out closes it, so the explicit close button isn't needed here */
  .bs-card__close { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .bs-pill, .bs-card, .bs-action { transition: none; }
  .bs-pill:hover { transform: none; }
}