/* Booking request pages (both sides): request, accept, decline, counter-offer.
   One page shell (.brq-page), the shared read-only summary (.brq-*), action panels
   and forms. Dark theme matching the Gig Manager (#171717 / #232323 / lime). */

.brq-page { box-sizing: border-box; width: 100%; max-width: 920px; margin: 0 auto; padding: 16px 0 48px; color: #f2f2f2; }
.brq-page *, .brq-page *::before, .brq-page *::after { box-sizing: border-box; }
.brq-page__top { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.brq-page__eyebrow { margin: 0 0 4px; color: #9a9a9a; font-size: .75rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.brq-page__title { margin: 0 0 18px; font-size: clamp(1.6rem, 4vw, 2.3rem); line-height: 1.1; color: #fff; }
.brq-page__lead { margin: -10px 0 20px; color: #b8b8b8; max-width: 62ch; }

/* ── Summary ─────────────────────────────────────────────── */
.brq { display: flex; flex-direction: column; gap: 14px; }
.brq-head { display: grid; grid-template-columns: 200px minmax(0, 1fr); overflow: hidden; border: 1px solid #3a3a3a; border-radius: 12px; background: #232323; }
.brq-head__art { min-height: 170px; background: #111 center / cover no-repeat; }
.brq-head__body { min-width: 0; padding: 18px 20px; display: flex; flex-direction: column; gap: 6px; }
.brq-head__eyebrow { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin: 0; color: #9a9a9a; font-size: .75rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.brq-head__event { margin: 0; font-size: 1.35rem; line-height: 1.2; color: #fff; overflow-wrap: anywhere; }
.brq-head__meta { margin: 0; color: #c8c8c8; font-size: .92rem; }
.brq-status { display: inline-block; padding: 3px 9px; border-radius: 999px; font-size: .72rem; letter-spacing: .02em; text-transform: none; }
.brq-status--open { background: #243056; color: #b8c7ff; }
.brq-status--ok { background: #1e3d28; color: #8fdfa0; }
.brq-status--closed { background: #3d1e1e; color: #f0a0a0; }

.brq-person { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 14px; margin-top: 8px; padding-top: 12px; border-top: 1px solid #333; }
.brq-person__img { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; border: 2px solid #C1FE01; background: #111; }
.brq-person__text { display: flex; flex-direction: column; min-width: 0; margin-right: auto; }
.brq-person__role { color: #9a9a9a; font-size: .72rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.brq-person__text strong { color: #fff; font-size: 1rem; overflow-wrap: anywhere; }
.brq-link { color: #C1FE01; font-size: .85rem; font-weight: 700; text-decoration: none; white-space: nowrap; }
.brq-link:hover, .brq-link:focus-visible { text-decoration: underline; }

.brq-waiting { margin: 0; padding: 10px 14px; border-left: 3px solid #C1FE01; background: #1d1f14; color: #e8f5b0; font-weight: 600; }

.brq-facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.brq-fact { display: flex; flex-direction: column; gap: 4px; min-width: 0; padding: 14px; border: 1px solid #3a3a3a; border-radius: 10px; background: #232323; }
.brq-fact--fee { border-color: #4a5a10; background: #1d2012; }
.brq-fact__label, .brq-note__label, .brq-chips__label { color: #9a9a9a; font-size: .72rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.brq-fact__value { color: #fff; font-size: 1.5rem; line-height: 1.15; overflow-wrap: anywhere; }
.brq-fact__value--sm { font-size: .98rem; line-height: 1.35; }
.brq-fact__value--muted { color: #b8b8b8; font-size: .98rem; }
.brq-fact__note { color: #a8a8a8; font-size: .82rem; }

.brq-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.brq-chips__label { margin-right: 4px; }
.brq-chip { padding: 5px 10px; border: 1px solid #3a3a3a; border-radius: 999px; background: #232323; color: #e8e8e8; font-size: .82rem; }
.brq-chip--muted { color: #a8a8a8; }

.brq-notes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.brq-note { min-width: 0; padding: 14px; border: 1px solid #3a3a3a; border-radius: 10px; background: #1d1d1d; }
.brq-note p { margin: 6px 0 0; color: #e8e8e8; white-space: pre-line; overflow-wrap: anywhere; }
.brq-note .brq-note__empty { color: #8a8a8a; }
.brq-note .brq-note__sub { margin-top: 10px; color: #a8a8a8; font-size: .82rem; }
.brq-note .brq-note__sub + p { margin-top: 2px; }
.brq-note--warn { border-color: #5a2a2a; background: #241818; }

/* ── Action panels ───────────────────────────────────────── */
.brq-panel { margin-top: 18px; padding: 20px; border: 1px solid #3a3a3a; border-radius: 12px; background: #1d1d1d; }
.brq-panel h2 { margin: 0 0 6px; font-size: 1.2rem; color: #fff; }
.brq-panel > p { margin: 0 0 14px; color: #b8b8b8; }
.brq-panel--danger { border-color: #5a2a2a; }
.brq-panel .mud-input-control { margin-top: 4px; }

.brq-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 10px; margin-top: 18px; }
.brq-actions > button { min-width: 150px; margin: 0; }
.brq-actions__hint { flex-basis: 100%; margin: 0; color: #9a9a9a; font-size: .85rem; text-align: right; }
.brq-actions .btn-danger-outline { border: 1px solid #c05050; background: transparent; color: #f0a0a0; }
.brq-actions .btn-danger-outline:hover { background: #2a1616; }

.brq-check { display: flex; align-items: flex-start; gap: 10px; margin-top: 12px; color: #d8d8d8; }
.brq-check input { width: 20px; height: 20px; margin-top: 2px; accent-color: #C1FE01; flex-shrink: 0; }

/* ── Forms (counter-offer, decline) ──────────────────────── */
.brq-form { display: flex; flex-direction: column; gap: 16px; margin-top: 18px; }
.brq-form__section { padding: 18px 20px; border: 1px solid #3a3a3a; border-radius: 12px; background: #1d1d1d; }
.brq-form__section > h2 { margin: 0 0 4px; font-size: 1.1rem; color: #fff; }
.brq-form__section > p.brq-form__hint { margin: 0 0 12px; color: #a8a8a8; font-size: .88rem; }
.brq-form__row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.brq-form .form-group { margin: 12px 0 0; }
.brq-form .form-group:first-of-type { margin-top: 0; }
.brq-form .form-container { width: 100%; max-width: none; margin: 0; padding: 0; }
.brq-form .bordered { border-color: #3a3a3a; border-radius: 10px; }
.brq-form .mud-radio-group > div, .brq-form .mudSelectWrapper { display: flex; flex-wrap: wrap; gap: 4px 16px; }
.brq-form .mud-radio-group .d-flex.flex-row { flex-wrap: wrap; }
.brq-form textarea, .brq-form input[type=text], .brq-form input[type=number] { max-width: 100%; }

/* ── Phone ───────────────────────────────────────────────── */
@media (max-width: 760px) {
    .brq-page { padding: 8px 0 96px; }
    .brq-head { grid-template-columns: 1fr; }
    .brq-head__art { min-height: 120px; }
    .brq-head__body { padding: 14px 16px; }
    .brq-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .brq-fact--fee { grid-column: 1 / -1; }
    .brq-notes, .brq-form__row { grid-template-columns: 1fr; }
    .brq-panel, .brq-form__section { padding: 16px; }
    /* Actions stay in reach at the bottom of the screen. */
    .brq-actions { position: sticky; bottom: 0; z-index: 5; margin: 18px -16px 0; padding: 12px 16px calc(12px + env(safe-area-inset-bottom)); background: rgba(23, 23, 23, .96); border-top: 1px solid #333; }
    .brq-actions > button { flex: 1 1 140px; min-width: 0; white-space: normal; line-height: 1.2; padding-left: 12px; padding-right: 12px; }
    .brq-actions__hint { text-align: left; }
}
@media (max-width: 380px) {
    .brq-facts { grid-template-columns: 1fr; }
}

/* Decline reasons */
.brq-reasons { display: flex; flex-wrap: wrap; gap: 8px; }
.brq-reason { margin: 0; padding: 8px 14px; border: 1px solid #3a3a3a; border-radius: 999px; background: #232323; color: #e8e8e8; font-size: .85rem; font-weight: 600; letter-spacing: normal; text-transform: none; cursor: pointer; }
.brq-reason:hover, .brq-reason:focus-visible { border-color: #C1FE01; outline: none; }
.brq-reason--on { border-color: #C1FE01; background: #C1FE01; color: #111; }

.brq-fee-big { font-size: 1.6rem; color: #c1fe01; white-space: nowrap; }
/* Prompt cards on the booking page (Book again, Rate this booking): one clear ask. */
.gig-confirm{border:1px solid var(--mud-palette-primary, #C1FE01);border-radius:12px;padding:16px;display:flex;flex-direction:column;gap:8px;background:rgba(193,254,1,.06);margin:0 0 16px}
.gig-confirm__eyebrow{margin:0;font-size:.75rem;letter-spacing:.08em;text-transform:uppercase;opacity:.75}
.gig-confirm__title{margin:0;font-size:1.15rem;font-weight:600}
.gig-confirm__text{margin:0;opacity:.85;overflow-wrap:anywhere}
.gig-confirm__actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:4px}
@media (max-width:600px){.gig-confirm__actions > button{flex:1 1 100%}}
.brq-message{padding:6px 12px;min-height:36px;font-size:.8rem;display:inline-flex;align-items:center;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.gig-confirm__actions > a{text-decoration:none;display:inline-flex;align-items:center;justify-content:center}
@media (max-width:600px){.gig-confirm__actions > a{flex:1 1 100%}}

/* Brand pills for LINKS styled as buttons. theme/_buttons.css only shapes <button>, so an
   <a class="btn-primary"> got the colour but not the pill. Same radius, border, weight and
   spacing as the buttons; at least 44px tall to tap; wraps instead of overflowing on phones. */
a.btn-primary:not(.btn-sm):not(.lu-btn-sm), a.btn-alternative:not(.btn-sm):not(.lu-btn-sm), a.btn-secondary:not(.btn-sm):not(.lu-btn-sm) {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  border-radius: 10em; border: 0.15em solid; padding: 10px 22px; min-height: 44px; box-sizing: border-box;
  text-decoration: none; text-transform: uppercase; letter-spacing: 1px; font-weight: 600; font-size: .85rem; line-height: 1.25;
  text-align: center; max-width: 100%; white-space: normal; overflow-wrap: anywhere;
  transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out;
}
a.btn-primary { background-color: #C1FE01; border-color: #C1FE01; color: #272727; }
a.btn-primary:hover, a.btn-primary:focus-visible { background-color: #232323; color: #C1FE01; }
a.btn-alternative { background-color: transparent; border-color: #f8f8f8; color: #f8f8f8; }
a.btn-alternative:hover, a.btn-alternative:focus-visible { border-color: #C1FE01; color: #C1FE01; }
/* Small link-buttons (line-up rows, drawer) keep their size but get the same pill shape. */
a.btn-primary.btn-sm, a.btn-alternative.btn-sm, a.btn-primary.lu-btn-sm, a.btn-alternative.lu-btn-sm { border-radius: 10em; text-decoration: none; display: inline-flex; align-items: center; justify-content: center; }
@media (max-width: 600px) { a.btn-primary:not(.btn-sm):not(.lu-btn-sm), a.btn-alternative:not(.btn-sm):not(.lu-btn-sm), a.btn-secondary:not(.btn-sm):not(.lu-btn-sm) { padding: 10px 16px; } }

/* Set length, availability and reply-by (BookingExtrasSection). */
.brq-extras { display: flex; flex-direction: column; gap: 4px; }
.brq-extras__other { display: inline-flex; align-items: center; gap: 6px; margin: 0; color: #b8b8b8; font-size: .85rem; }
.brq-extras__other input { width: 80px; padding: 6px 10px; border: 1px solid #3a3a3a; border-radius: 999px; background: #232323; color: #fff; }
.brq-extras__dt { display: flex; flex-direction: column; gap: 4px; margin: 0; min-width: 0; color: #b8b8b8; font-size: .8rem; }
.brq-extras__dt input { width: 100%; min-width: 0; padding: 8px 10px; border: 1px solid #3a3a3a; border-radius: 8px; background: #232323; color: #fff; color-scheme: dark; }
.brq-replyby { align-self: flex-start; display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border: 1px solid #3a3a3a; border-radius: 999px; background: #232323; color: #e8e8e8; font-size: .8rem; }
.brq-replyby--soon { border-color: #C1FE01; color: #C1FE01; }
.brq-replyby--gone { border-color: #5a2a2a; color: #ff8a8a; }
.brq-compare { width: 100%; border-collapse: collapse; font-size: .9rem; }
.brq-compare th, .brq-compare td { padding: 8px 10px; border-bottom: 1px solid #2e2e2e; text-align: left; vertical-align: top; overflow-wrap: anywhere; }
.brq-compare th { color: #9a9a9a; font-size: .72rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.brq-compare td:first-child { color: #b8b8b8; width: 32%; }
.brq-compare tr.brq-compare--changed td:not(:first-child) { color: #fff; }
.brq-compare tr.brq-compare--changed td:last-child { color: #C1FE01; font-weight: 700; }
@media (max-width: 600px) { .brq-compare { font-size: .82rem; } .brq-compare th, .brq-compare td { padding: 6px; } }
.brq-fact__note--warn { color: #ffb36b; }
.brq-compare-panel { overflow-x: auto; }
.lu-drawer .brq-compare-panel { margin-top: 12px; padding: 14px; }