/* ============================================================
   /submit-a-complaint/ — "Resolution Center hub" (Option A).
   Page sheet for the bespoke .cmpl- vocabulary; the hero shell
   (.av2-hero / .av2-col / .av2-prose / .av2-byline) comes from
   article.css, the buttons (.cv2-btn / --cta / --ghost) from
   chrome-legacy.css + v2-components.css, and the wpDiscuz
   treatment (.cv2-comments) from casino-v2.css. Loads last so its
   overrides on the shared prose vocabulary win by source order.
   ============================================================ */

.cmpl { background: var(--bji-surface-sunken); }

/* section rhythm + wide container for the record grid */
.cmpl-section { margin-block: var(--bji-section-gap); }
.cmpl-section:first-of-type { margin-top: var(--bji-space-7); }
.cmpl-wrap {
  max-width: calc(60rem + 2 * var(--bji-gutter));
  margin-inline: auto;
  padding-inline: var(--bji-gutter);
}

/* anchor targets clear the (non-sticky) chrome comfortably */
#how-it-works, #complaint-record, #submit { scroll-margin-top: var(--bji-space-6); }

.cmpl-h2 {
  font-size: var(--bji-text-2xl);
  font-weight: var(--bji-weight-bold);
  line-height: var(--bji-leading-tight);
  color: var(--bji-navy-900);
  margin: 0 0 var(--bji-space-4);
}

/* ---------- 1. hero CTA row ---------- */
.cmpl-hero-cta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--bji-space-3);
  margin-top: var(--bji-space-5);
}
.cmpl-hero-cta .cv2-btn { min-width: 12rem; }

/* ---------- 2. how it works: guidelines as a step-list ---------- */
.cmpl-guidelines h2 { margin-top: 0; }
.cmpl-guidelines ol {
  list-style: none;
  counter-reset: cmpl-step;
  padding-left: 0;
  margin: var(--bji-space-4) 0 0;
  display: grid;
  gap: var(--bji-space-3);
}
.cmpl-guidelines ol > li {
  counter-increment: cmpl-step;
  position: relative;
  padding: var(--bji-space-1) 0 var(--bji-space-1) 3em;
  margin: 0;
}
.cmpl-guidelines ol > li::before {
  content: counter(cmpl-step);
  position: absolute;
  left: 0;
  top: 0;
  width: 2em;
  height: 2em;
  border-radius: 50%;
  background: var(--bji-blue-600);
  color: #fff;
  display: grid;
  place-items: center;
  font-weight: var(--bji-weight-bold);
  font-size: var(--bji-text-sm);
}

/* free / no-guarantee callout */
.cmpl-callout {
  margin-top: var(--bji-space-5);
  background: var(--bji-blue-050);
  border: 1px solid var(--bji-blue-100);
  border-left: 4px solid var(--bji-blue-500);
  border-radius: var(--bji-radius-md);
  padding: var(--bji-space-4) var(--bji-space-5);
}
.cmpl-callout .av2-prose > * { margin-block: 0 var(--bji-space-2); }
.cmpl-callout .av2-prose > *:last-child { margin-bottom: 0; }
.cmpl-callout h2 {
  margin: 0 0 var(--bji-space-2);
  font-size: var(--bji-text-lg);
  font-weight: var(--bji-weight-bold);
  color: var(--bji-navy-900);
}
.cmpl-callout p { font-size: var(--bji-text-sm); color: var(--bji-text-muted); }

/* ---------- 3. submit CTA banner ---------- */
.cmpl-band {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--bji-space-4);
  background:
    radial-gradient(50rem 20rem at 90% -40%, rgb(6 152 255 / 0.22), transparent 60%),
    linear-gradient(160deg, var(--bji-navy-900), var(--bji-navy-800) 75%);
  color: var(--bji-text-inverse);
  border-radius: var(--bji-radius-lg);
  padding: var(--bji-space-5) var(--bji-space-6);
  box-shadow: var(--bji-shadow-md);
}
.cmpl-band-text {
  margin: 0;
  max-width: 42rem;
  min-width: 0;
  font-size: var(--bji-text-base);
  color: var(--bji-text-inverse-muted);
}
.cmpl-band-text strong { color: #fff; }
.cmpl-band .cv2-btn { flex-shrink: 0; }

/* ---------- 4. complaint record ---------- */
.cmpl-record-head { margin-bottom: var(--bji-space-5); }
.cmpl-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--bji-space-3);
}
.cmpl-search {
  flex: 1 1 16rem;
  min-width: 0;
  padding: 0.6em 0.9em;
  border: 1px solid var(--bji-border-strong);
  border-radius: var(--bji-radius-md);
  background: var(--bji-surface);
  color: var(--bji-text);
  font: inherit;
  font-size: var(--bji-text-sm);
}
.cmpl-search:focus {
  outline: none;
  border-color: var(--bji-blue-400);
  box-shadow: 0 0 0 3px rgb(6 152 255 / 0.15);
}
.cmpl-sort {
  display: flex;
  align-items: center;
  gap: var(--bji-space-2);
  flex-shrink: 0;
}
.cmpl-sort-label {
  font-size: var(--bji-text-xs);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--bji-text-faint);
}
.cmpl-sort-btn {
  padding: 0.45em 0.9em;
  border: 1px solid var(--bji-border-strong);
  border-radius: var(--bji-radius-pill);
  background: var(--bji-surface);
  color: var(--bji-text-muted);
  font: inherit;
  font-size: var(--bji-text-sm);
  font-weight: var(--bji-weight-medium);
  cursor: pointer;
  transition: border-color var(--bji-duration) var(--bji-ease), color var(--bji-duration) var(--bji-ease), background var(--bji-duration) var(--bji-ease);
}
.cmpl-sort-btn:hover { border-color: var(--bji-blue-300); color: var(--bji-text); }
.cmpl-sort-btn.is-active {
  background: var(--bji-navy-900);
  border-color: var(--bji-navy-900);
  color: #fff;
}

.cmpl-cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--bji-space-4);
}
.cmpl-card {
  display: flex;
  flex-direction: column;
  gap: var(--bji-space-2);
  min-width: 0;
  padding: var(--bji-space-4) var(--bji-space-5);
  background: var(--bji-surface);
  border: 1px solid var(--bji-border);
  border-radius: var(--bji-radius-lg);
  box-shadow: var(--bji-shadow-sm);
  transition: box-shadow var(--bji-duration) var(--bji-ease), border-color var(--bji-duration) var(--bji-ease);
}
.cmpl-card:hover { box-shadow: var(--bji-shadow-md); border-color: var(--bji-border-strong); }
.cmpl-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--bji-space-3);
  flex-wrap: wrap;
}
.cmpl-card-casino {
  font-weight: var(--bji-weight-bold);
  font-size: var(--bji-text-base);
  color: var(--bji-link);
  text-decoration: none;
  min-width: 0;
  overflow-wrap: anywhere;
}
.cmpl-card-casino:hover { color: var(--bji-link-hover); text-decoration: underline; }

.cmpl-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  flex-shrink: 0;
  padding: 0.2em 0.7em;
  border-radius: var(--bji-radius-pill);
  font-size: var(--bji-text-xs);
  font-weight: var(--bji-weight-semibold);
  white-space: nowrap;
}
.cmpl-chip--responded {
  background: var(--bji-green-100);
  color: var(--bji-green-700);
}
.cmpl-chip-dot {
  width: 0.55em;
  height: 0.55em;
  border-radius: 50%;
  background: var(--bji-green-600);
}

.cmpl-card-meta {
  display: flex;
  align-items: center;
  gap: var(--bji-space-2);
  font-size: var(--bji-text-xs);
  color: var(--bji-text-faint);
  min-width: 0;
}
.cmpl-card-avatar { display: inline-flex; flex-shrink: 0; }
.cmpl-card-avatar-img { width: 24px; height: 24px; border-radius: 50%; display: block; }
.cmpl-card-author {
  font-style: italic;
  color: var(--bji-text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}
.cmpl-card-dot { color: var(--bji-border-strong); }
.cmpl-card-date { flex-shrink: 0; white-space: nowrap; }

.cmpl-card-body { min-width: 0; }
.cmpl-excerpt {
  margin: 0;
  font-size: var(--bji-text-sm);
  line-height: var(--bji-leading-body);
  color: var(--bji-text);
  overflow-wrap: anywhere;
}
.cmpl-excerpt.is-clamped {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.cmpl-expand {
  margin-top: var(--bji-space-1);
  padding: 0;
  border: 0;
  background: none;
  color: var(--bji-link);
  font: inherit;
  font-size: var(--bji-text-xs);
  font-weight: var(--bji-weight-medium);
  cursor: pointer;
}
.cmpl-expand:hover { text-decoration: underline; }

.cmpl-card-link {
  margin-top: auto;
  padding-top: var(--bji-space-2);
  font-size: var(--bji-text-sm);
  font-weight: var(--bji-weight-medium);
  color: var(--bji-link);
  text-decoration: none;
}
.cmpl-card-link:hover { color: var(--bji-link-hover); text-decoration: underline; }
.cmpl-no-results { color: var(--bji-text-muted); }

/* ---------- 5. participating casinos ---------- */
.cmpl-reps {
  background: var(--bji-surface);
  border: 1px solid var(--bji-border);
  border-radius: var(--bji-radius-lg);
  padding: var(--bji-space-5) var(--bji-space-6);
}
.cmpl-reps-head {
  display: flex;
  align-items: center;
  gap: var(--bji-space-5);
}
.cmpl-reps-count {
  flex-shrink: 0;
  font-size: var(--bji-text-4xl);
  font-weight: var(--bji-weight-black);
  line-height: 1;
  color: var(--bji-blue-600);
}
.cmpl-reps-intro { min-width: 0; }
.cmpl-reps-intro h2 { margin-bottom: var(--bji-space-1); }
.cmpl-reps-intro p { margin: 0; color: var(--bji-text-muted); font-size: var(--bji-text-sm); }

.cmpl-reps-disclose { margin-top: var(--bji-space-4); border-top: 1px solid var(--bji-border); padding-top: var(--bji-space-3); }
.cmpl-reps-disclose > summary {
  cursor: pointer;
  font-weight: var(--bji-weight-medium);
  color: var(--bji-link);
  font-size: var(--bji-text-sm);
  list-style-position: inside;
}
.cmpl-reps-disclose > summary:hover { color: var(--bji-link-hover); }
.cmpl-reps-search { margin: var(--bji-space-3) 0; width: 100%; flex: none; }
.cmpl-reps-list {
  list-style: none;
  margin: 0;
  padding: 0;
  column-count: 3;
  column-gap: var(--bji-space-5);
}
.cmpl-reps-list li {
  break-inside: avoid;
  padding: var(--bji-space-1) 0;
  border-bottom: 1px dotted var(--bji-border);
}
.cmpl-reps-list a { color: var(--bji-link); text-decoration: none; font-size: var(--bji-text-sm); }
.cmpl-reps-list a:hover { text-decoration: underline; }

/* ---------- 6. submit form + thread ---------- */
.cmpl-thread-intro { margin-bottom: var(--bji-space-4); }
.cmpl-thread-intro h2 { margin-bottom: var(--bji-space-2); }
.cmpl-thread-intro p { margin: 0; color: var(--bji-text-muted); }

/* "Casino Name" custom field on a thread comment (wpDiscuz frontHtml output).
   Only renders when the value is non-empty (Form.php gates on the value), so
   the ~180 blank historical rows show nothing; the filled ones (e.g. MODO.us)
   get a compact v2 pill consistent with the record cards. Plain text — the
   value is free text and often names casinos we do not list, so never a link.
   wpDiscuz lays this out as display:table with fixed-width table-cell children
   (some !important), so the overrides below neutralise that into an inline tag. */
.cv2-comments .wpd-custom-field.wpd-cf-text {
  display: inline-flex !important;
  align-items: center;
  gap: 0.5em;
  width: auto !important;
  max-width: 100%;
  margin: var(--bji-space-2) 0 var(--bji-space-1) !important;
  padding: 0.3em 0.8em;
  background: var(--bji-blue-050);
  border: 1px solid var(--bji-blue-100);
  border-radius: var(--bji-radius-md);
  line-height: 1.4;
}
.cv2-comments .wpd-custom-field.wpd-cf-text .wpd-cf-label {
  display: inline !important;
  width: auto !important;
  margin: 0;
  padding: 0;
  background: none !important;
  border: 0 !important;
  opacity: 1;
  white-space: nowrap;
  font-size: var(--bji-text-xs);
  font-weight: var(--bji-weight-semibold);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--bji-text-faint);
}
.cv2-comments .wpd-custom-field.wpd-cf-text .wpd-cf-value {
  display: inline !important;
  width: auto !important;
  margin: 0;
  padding: 0;
  border: 0 !important;
  opacity: 1;
  font-size: var(--bji-text-sm);
  font-weight: var(--bji-weight-semibold);
  color: var(--bji-navy-900);
  overflow-wrap: anywhere;
}

/* "Casino Name" field on the submit form itself: keep the wpDiscuz input in
   the v2 idiom (matches the .cmpl-search / native field look, not wpDiscuz's
   default). Scoped to the complaint form's custom text field. */
.cv2-comments .wpd-field-text .wpd-field-input input[type="text"] {
  border-radius: var(--bji-radius-md);
}

/* ---- Guest form layout (complaint form 8299) ----
   The shared .cv2-comments wpDiscuz treatment in casino-v2.css was built for
   the CASINO form (8280): it hides .wpd-form-col-right and expects the submit
   button and a comment-type select in the left column. The COMPLAINT form has
   a different field set — Name, Email and a full-width Casino Name in the left
   column, and its submit button in the RIGHT column — so that shared rule hid
   this form's "Post Comment" button, and the fields wrapped oddly (Casino Name
   + Name on one row, Email orphaned below). Re-lay-out for THIS form only
   (scoped to .cmpl): dissolve the plugin's two 49% columns into one grid so the
   right-column submit reappears, then order the fields deliberately —
   Casino Name full-width first (it is the complaint's subject), Name + Email
   side by side, the Post Comment button below. Stacks to one column on mobile.
   These selectors carry .cmpl (complaint page only) so casino pages keep the
   casino-v2 treatment untouched; !important defeats the plugin's own
   equal-selector rules and casino-v2's col hiding. */
.cmpl #wpdcom .wpd-form-row {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--bji-space-3);
  align-items: start;
  margin: 0 !important;
}
/* dissolve the plugin's two 49% field columns into the row grid so the
   right-column submit reappears; the full-width column (the consent notice)
   spans both tracks instead of splitting into one */
.cmpl #wpdcom .wpd-form-row .wpd-form-col-left,
.cmpl #wpdcom .wpd-form-row .wpd-form-col-right {
  display: contents !important;
}
.cmpl #wpdcom .wpd-form-row .wpd-form-col-full {
  grid-column: 1 / -1;
  width: 100% !important;
  margin: 0 !important;
}
/* the plugin drops an empty clearfix into each row; it must not take a grid cell */
.cmpl #wpdcom .wpd-form-row > [class*="clearfix"] { display: none !important; }

.cmpl #wpdcom .wpd-form-col-left .custom_field_6808a8b64465b-wrapper { grid-column: 1 / -1; order: 1; }
.cmpl #wpdcom .wpd-form-col-left .wc_name-wrapper  { grid-column: auto; order: 2; }
.cmpl #wpdcom .wpd-form-col-left .wc_email-wrapper { grid-column: auto; order: 3; }
.cmpl #wpdcom .wpd-form-col-right .wc-field-submit {
  grid-column: 1 / -1;
  order: 4;
  display: flex !important;
  justify-content: flex-end;
  align-items: center;
  gap: var(--bji-space-3);
  margin: 0 !important;
  padding: 0 !important;
}
/* consent notice: full width, tight to the form rhythm (the raw HTMLField
   renders a bare .card.card--info straight into the full-width column) */
.cmpl #wpdcom .wpd-form-col-full .card.card--info {
  margin: var(--bji-space-1) 0 0;
  width: 100%;
  box-sizing: border-box;
}

/* Align the form-foot's left edge with the editor wrapper above it. wpDiscuz
   indents the foot by 44px avatar + a 15px gap (59px), but the editor sits
   flush against the avatar with no gap, so the foot overshoots by 15px — drop
   it to the 44px avatar width so fields, submit and notice line up with the
   editor's left AND right edges. */
.cmpl #wpdcom .wpd-main-form-wrapper .wpd-form-foot { margin-left: 44px !important; }

/* Vertically centre the Casino Name tooltip "?" on the input — the plugin pins
   it to top:8px, which reads as touching the field's bottom border. !important
   because the plugin's own #wpdcom-scoped rule ties on specificity. */
.cmpl #wpdcom .custom_field_6808a8b64465b-wrapper .wpd-field-desc {
  top: 50% !important;
  transform: translateY(-50%);
}

@media (max-width: 640px) {
  .cmpl #wpdcom .wpd-form-row { grid-template-columns: 1fr !important; }
  .cmpl #wpdcom .wpd-form-col-right .wc-field-submit { justify-content: stretch; }
  .cmpl #wpdcom .wpd-form-col-right .wc-field-submit input[type="submit"] { flex: 1; }
}
/* the plugin hides the form avatar at 600px; drop the foot indent with it so
   the fields stay flush-left on mobile */
@media (max-width: 600px) {
  .cmpl #wpdcom .wpd-main-form-wrapper .wpd-form-foot { margin-left: 0 !important; }
}

/* ---------- responsive ---------- */
@media (max-width: 860px) {
  .cmpl-cards { grid-template-columns: 1fr; }
  .cmpl-reps-list { column-count: 2; }
}
@media (max-width: 640px) {
  .cmpl-controls { flex-direction: column; align-items: stretch; }
  /* in the stacked (column) layout flex-grow would expand the input's HEIGHT,
     so pin it back to its natural height and let it fill the width */
  .cmpl-controls .cmpl-search { flex: 0 0 auto; width: 100%; }
  .cmpl-sort { justify-content: flex-start; }
  .cmpl-band { flex-direction: column; align-items: flex-start; }
  .cmpl-band .cv2-btn { width: 100%; }
  .cmpl-hero-cta .cv2-btn { flex: 1 1 auto; min-width: 0; }
  .cmpl-reps-head { flex-direction: column; align-items: flex-start; gap: var(--bji-space-2); }
  .cmpl-reps-list { column-count: 1; }
}