/* The cookie banner. Injected by /js/consent.js, so nothing here renders
   unless that script decided the visitor should be asked.

   A BOTTOM BAR, NOT A MODAL, deliberately. It does not dim the page, does not
   trap focus and does not block anything: someone who ignores it can still
   browse, sign in and buy. A full-screen wall on a first visit is the worst
   first impression a site can make and is not required by anything. */

.rb-consent {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
  background: #161616;
  border-top: 1px solid #2a2a2a;
  box-shadow: 0 -18px 40px rgba(0,0,0,.55);
  transform: translateY(110%);
  transition: transform .32s cubic-bezier(.4,0,.2,1);
}
.rb-consent-up   { transform: translateY(0); }
.rb-consent-gone { transform: translateY(110%); pointer-events: none; }

.rb-consent-in {
  max-width: 1100px; margin: 0 auto; padding: 20px;
  display: flex; align-items: center; gap: 28px; flex-wrap: wrap;
}
.rb-consent-text { flex: 1 1 380px; min-width: 260px; }
.rb-consent-text h2 { margin: 0 0 5px; font-size: 15px; color: #fff; }
.rb-consent-text p  { margin: 0; font-size: 14px; line-height: 1.6; color: #b4b4b4; }
.rb-consent-text a  { color: #1DB954; }

.rb-consent-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-left: auto; }

.rb-consent-btn {
  font: inherit; font-size: 14px; font-weight: 700;
  padding: 11px 22px; border-radius: 8px; cursor: pointer;
  border: 1px solid transparent; transition: .15s;
}
.rb-consent-yes { background: #1DB954; color: #000; border-color: #1DB954; }
.rb-consent-yes:hover { background: #1ed760; }

/* ⚠️ SAME SIZE, SAME WEIGHT, SAME PLACE AS ACCEPT. Not a courtesy — a choice
   where one answer is harder to reach is not a free choice. Do not shrink this,
   grey it out, or move it behind a "manage preferences" step. */
.rb-consent-no { background: transparent; color: #e8e8e8; border-color: #3a3a3a; }
.rb-consent-no:hover { border-color: #e8e8e8; }

.rb-consent-btn:focus-visible { outline: 2px solid #1DB954; outline-offset: 2px; }

@media (max-width: 620px) {
  .rb-consent-in { padding: 18px 16px; gap: 16px; }
  .rb-consent-actions { margin-left: 0; width: 100%; }
  .rb-consent-btn { flex: 1 1 0; }
}

/* Someone who has asked not to see motion still gets the banner, just present
   rather than sliding. */
@media (prefers-reduced-motion: reduce) {
  .rb-consent { transition: none; }
}