/* Bulk-group lightbox — a centered modal shown by bulk_group_controller.js when
   the group-size input is pushed past its max, pointing large groups at the
   Bido XP team. The controller toggles [hidden] + the body lock; this file owns
   all presentation. The dialog carries .bx-light-surface, so the tokens read as
   the light palette even though the host page is .bx-dark. Mirrors the listing
   lightbox (components/lightbox.css) and the date picker's sheet chrome. */
.bido-bulk-group-modal {
  position: fixed;
  inset: 0;
  z-index: 95;
  display: flex;
  align-items: center;
  justify-content: center;
  /* The root carries .bx (for box-sizing, fonts and the .bx .btn scope) but
     must stay see-through so the blurred backdrop shows the page behind it —
     .bx otherwise paints an opaque --bx-paper fill. */
  background: transparent;
  padding-block: max(clamp(16px, 4vw, 56px), env(safe-area-inset-top));
  padding-inline: max(clamp(16px, 4vw, 56px), env(safe-area-inset-left));
}

.bido-bulk-group-modal[hidden] { display: none; }

.bido-bulk-group-backdrop {
  position: absolute;
  inset: 0;
  appearance: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  background: rgba(var(--bx-navy-rgb), 0.72);
  backdrop-filter: blur(6px);
}

.bido-bulk-group-panel {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 12px;
  inline-size: min(100%, 30rem);
  padding: clamp(20px, 4vw, 32px);
  background: var(--bx-paper);
  border: 1px solid var(--bx-line);
  border-radius: var(--bx-r-lg);
  box-shadow: 0 24px 70px rgba(var(--bx-navy-rgb), 0.26);
  color: var(--bx-ink);
}

.bido-bulk-group-ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: var(--bx-control-h-lg);
  block-size: var(--bx-control-h-lg);
  border-radius: var(--bx-r-pill);
  background: var(--bx-accent-soft);
  color: var(--bx-accent-ink);
}

/* Scoped under the modal so the component owns its copy size — base headings
   (.bx h2 = clamp(26px,3.5vw,32px)) and product heading rules would otherwise
   win and make the lightbox look different from one surface to the next. */
.bido-bulk-group-modal .bido-bulk-group-title {
  margin: 0;
  font-family: var(--bx-font-display);
  font-size: var(--bx-text-xl);
  font-weight: 800;
  line-height: 1.15;
}

.bido-bulk-group-modal .bido-bulk-group-text {
  margin: 0;
  color: var(--bx-ink-2);
  font-size: var(--bx-text);
  line-height: 1.5;
}

.bido-bulk-group-contact {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 4px;
}

.bido-bulk-group-close {
  position: absolute;
  inset-block-start: 12px;
  inset-inline-end: 12px;
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: var(--bx-control-h);
  block-size: var(--bx-control-h);
  padding: 0;
  border: 1px solid var(--bx-line);
  border-radius: var(--bx-r-pill);
  background: var(--bx-paper-2);
  color: var(--bx-ink);
  cursor: pointer;
  transition: background .15s, border-color .15s;
}

.bido-bulk-group-close:hover,
.bido-bulk-group-close:focus-visible {
  background: var(--bx-paper-3);
  outline: none;
}

/* Lock body scroll behind the modal. */
body.bulk-group-open { overflow: hidden; }

/* Coarse pointers get a larger tap target for the close control. */
@media (pointer: coarse) {
  .bido-bulk-group-close {
    inline-size: var(--bx-control-h-lg);
    block-size: var(--bx-control-h-lg);
  }
}