/* ══════════════════════════════════════════════════════════
   MY REQUESTS — quote basket (cart)
   ══════════════════════════════════════════════════════════ */

/* ── Add-to-requests button ── */
.cart-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .6rem 1.1rem;
  font-family: var(--font-body);
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--gold);
  background: rgba(10,10,10,.72);
  border: 1px solid rgba(212,175,55,.4);
  border-radius: var(--r-full);
  cursor: pointer;
  backdrop-filter: blur(6px);
  transition: color var(--t-fast), background var(--t-fast),
              border-color var(--t-fast), transform var(--t-fast), box-shadow var(--t-fast);
}
.cart-btn:hover {
  color: var(--black);
  background: var(--grad-gold);
  border-color: var(--gold-light);
  transform: translateY(-2px);
  box-shadow: var(--sh-gold);
}
.cart-btn:focus-visible {
  outline: 2px solid var(--gold-light);
  outline-offset: 3px;
}
.cart-btn.in-cart {
  color: #7BE495;
  background: rgba(26,122,58,.22);
  border-color: rgba(123,228,149,.5);
}
.cart-btn.in-cart:hover {
  color: var(--white);
  background: var(--grad-red);
  border-color: var(--red-light);
  box-shadow: var(--sh-red);
}
.cart-btn.pulse { animation: cartPulse .45s cubic-bezier(.4,0,.2,1); }

@keyframes cartPulse {
  0%   { transform: scale(1); }
  45%  { transform: scale(1.12); }
  100% { transform: scale(1); }
}

/* Button pinned inside a performer / theme card */
.cart-btn-card {
  position: absolute;
  right: 1rem;
  bottom: 1rem;
  z-index: 4;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity var(--t-smooth), transform var(--t-smooth),
              background var(--t-fast), color var(--t-fast), border-color var(--t-fast);
}
.performer-card:hover .cart-btn-card,
.performer-card:focus-within .cart-btn-card,
.theme-card-wrap:hover .cart-btn-card,
.theme-card-wrap:focus-within .cart-btn-card,
.cart-btn-card.in-cart,
.cart-btn-card:focus-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Touch devices have no hover — keep the button visible */
@media (hover: none) {
  .cart-btn-card { opacity: 1; transform: translateY(0); }
}

/* Large button on a theme detail page */
.cart-btn-lg {
  padding: 1rem 2.2rem;
  font-size: .8rem;
  letter-spacing: .14em;
}

/* ── Header badge ── */
.nav-requests {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  padding: .5rem .95rem;
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: var(--r-full);
  transition: color var(--t-fast), border-color var(--t-fast), background var(--t-fast);
}
.nav-requests:hover,
.nav-requests.has-items {
  color: var(--gold);
  border-color: rgba(212,175,55,.45);
  background: rgba(212,175,55,.07);
}
.nav-requests i { font-size: .85rem; }
.cart-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.35rem;
  height: 1.35rem;
  padding: 0 .35rem;
  font-size: .68rem;
  font-weight: 800;
  line-height: 1;
  color: var(--muted);
  background: var(--surface);
  border-radius: var(--r-full);
  transition: color var(--t-fast), background var(--t-fast), transform var(--t-fast);
}
.cart-count.has-items {
  color: var(--black);
  background: var(--grad-gold);
  transform: scale(1.06);
}
.mobile-requests { justify-content: space-between; }

/* ── Toast ── */
.cart-toast {
  position: fixed;
  left: 50%;
  bottom: 2rem;
  z-index: 9000;
  display: flex;
  align-items: center;
  gap: .7rem;
  max-width: min(92vw, 30rem);
  padding: .9rem 1.35rem;
  font-size: .82rem;
  font-weight: 600;
  color: var(--text);
  background: var(--grad-card);
  border: 1px solid rgba(212,175,55,.35);
  border-radius: var(--r-full);
  box-shadow: var(--sh-deep);
  opacity: 0;
  visibility: hidden;
  transform: translate(-50%, 1.5rem);
  transition: opacity var(--t-smooth), transform var(--t-smooth), visibility var(--t-smooth);
}
.cart-toast.show {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, 0);
}
.cart-toast i { color: #7BE495; font-size: 1rem; flex-shrink: 0; }
.cart-toast.is-warn { border-color: rgba(196,30,58,.5); }
.cart-toast.is-warn i { color: var(--red-light); }
.cart-toast span { flex: 1; }
.cart-toast a {
  flex-shrink: 0;
  font-size: .7rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--gold);
  white-space: nowrap;
  border-bottom: 1px solid rgba(212,175,55,.4);
}
.cart-toast a:hover { color: var(--gold-light); }

/* ── Cart page ── */
.cart-layout {
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: 3rem;
  align-items: start;
}
/* display:grid would otherwise beat the [hidden] attribute */
[hidden] { display: none !important; }
.cart-panel {
  padding: 2.5rem;
  background: var(--dark-card);
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
}
.cart-panel-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.75rem;
  padding-bottom: 1.25rem;
  border-bottom: 1px solid var(--border);
}
.cart-panel-head h2 {
  font-family: var(--font-display);
  font-size: 1.6rem;
  color: var(--white);
  margin: 0;
}
.cart-meta {
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--gold);
  white-space: nowrap;
}
.cart-list { list-style: none; margin: 0; padding: 0; }
.cart-item {
  display: flex;
  align-items: center;
  gap: 1.1rem;
  padding: .9rem;
  margin-bottom: .75rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  transition: border-color var(--t-fast), transform var(--t-fast), opacity var(--t-fast);
}
.cart-item:hover { border-color: rgba(212,175,55,.35); transform: translateX(3px); }
.cart-item.removing { opacity: 0; transform: translateX(-1.5rem); }
.cart-item-media {
  flex-shrink: 0;
  width: 4.5rem;
  height: 4.5rem;
  overflow: hidden;
  border-radius: var(--r-sm);
  background: var(--black);
}
.cart-item-media img { width: 100%; height: 100%; object-fit: cover; }
.cart-item-noimg {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  color: var(--gold-dark);
}
.cart-item-info { flex: 1; min-width: 0; }
.cart-item-type {
  display: block;
  font-size: .62rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: .25rem;
}
.cart-item-info h3 {
  font-family: var(--font-body);
  font-size: .95rem;
  font-weight: 600;
  color: var(--white);
  margin: 0;
}
.cart-item-info h3 a { color: inherit; }
.cart-item-info h3 a:hover { color: var(--gold); }
.cart-item-remove {
  flex-shrink: 0;
  width: 2.1rem;
  height: 2.1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--muted);
  background: transparent;
  border: 1px solid var(--border);
  border-radius: var(--r-full);
  cursor: pointer;
  transition: color var(--t-fast), background var(--t-fast), border-color var(--t-fast);
}
.cart-item-remove:hover {
  color: var(--white);
  background: var(--red);
  border-color: var(--red-light);
}
.cart-panel-foot {
  display: flex;
  justify-content: flex-end;
  margin-top: 1.25rem;
}
.cart-clear {
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted);
  background: none;
  border: none;
  cursor: pointer;
  transition: color var(--t-fast);
}
.cart-clear:hover { color: var(--red-light); }

/* Empty state */
.cart-empty { text-align: center; padding: 3rem 1rem; }
.cart-empty i { font-size: 2.6rem; color: var(--gold-dark); margin-bottom: 1.25rem; }
.cart-empty h2 {
  font-family: var(--font-display);
  font-size: 1.8rem;
  color: var(--white);
  margin-bottom: .75rem;
}
.cart-empty p {
  max-width: 34rem;
  margin: 0 auto 2rem;
  color: var(--muted);
  font-size: .92rem;
  line-height: 1.8;
}
.cart-empty-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: center;
}

/* Listing cards are whole-card links, so a button can't nest inside the <a>.
   The wrapper takes over the grid slot (plus the data-category filter hooks and
   the .reveal animation); the card fills it and keeps its own hover styling. */
.theme-card-wrap,
.performer-card-wrap {
  position: relative;
  border-radius: var(--r-lg);
}
.theme-card-wrap    { aspect-ratio: 4/3; }
.performer-card-wrap { aspect-ratio: 3/4; }

.theme-card-wrap .theme-card,
.performer-card-wrap .performer-card {
  display: block;
  width: 100%;
  height: 100%;
  aspect-ratio: auto;
}

@media (max-width: 900px) {
  .cart-layout { grid-template-columns: 1fr; gap: 2rem; }
  .cart-panel { padding: 1.75rem; }
}
@media (max-width: 480px) {
  .cart-item { gap: .8rem; padding: .7rem; }
  .cart-item-media { width: 3.5rem; height: 3.5rem; }
  .cart-toast { bottom: 6rem; padding: .8rem 1rem; font-size: .76rem; }
  .cart-btn-card { right: .6rem; bottom: .6rem; padding: .5rem .8rem; font-size: .62rem; }
}