/* ==========================================================================
   Contact us — "bailrbet-contact-us" (1440) / "bailrbet-contact-us-mobile" (390)
   Mobile-first; @media (min-width: 1024px) = desktop frame.
   ========================================================================== */

/* Editorial intro + support route flow ------------------------------------- */
.cu-intro { background: var(--navy); padding: 32px 0 24px; }
.cu-intro__inner { display: flex; flex-direction: column; gap: 32px; }
.cu-intro__left { display: flex; flex-direction: column; gap: 12px; }
.cu-intro__kicker { font-size: 11px; line-height: 14px; font-weight: 800; color: var(--yellow); text-transform: uppercase; }
.cu-intro__title { font-family: var(--font-display); font-weight: 900; font-size: 44px; line-height: 42px; color: var(--white); }
.cu-intro__text { font-size: 14px; line-height: 20px; color: var(--ink-4); }
.cu-intro__right { display: flex; flex-direction: column; gap: 12px; }
.cu-flow__title { font-family: var(--font-display); font-weight: 800; font-size: 16px; line-height: 19px; color: var(--white); }
.cu-flow { display: flex; flex-direction: column; gap: 8px; }
.cu-flow__step { display: flex; align-items: center; gap: 14px; min-height: 51px; padding: 9px; background: var(--navy-2); border: 1px solid var(--line); border-radius: 4px; transition: border-color var(--t); }
.cu-flow__step:hover { border-color: var(--line-2); }
.cu-flow__num { flex: none; font-family: var(--font-display); font-weight: 900; font-size: 20px; line-height: 24px; color: var(--yellow); }
.cu-flow__copy { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.cu-flow__name { font-size: 12px; line-height: 16px; font-weight: 700; color: var(--white); }
.cu-flow__desc { font-size: 11px; line-height: 14px; color: var(--ink-4); }
@media (min-width: 1024px) {
  .cu-intro { background: var(--navy-3); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 63px 0; }
  .cu-intro__inner { flex-direction: row; align-items: flex-start; gap: 48px; }
  .cu-intro__left { flex: 1 1 0; min-width: 0; gap: 16px; }
  .cu-intro__title { font-size: 64px; line-height: 60px; }
  .cu-intro__text { font-size: 15px; line-height: 22px; }
  .cu-intro__right { flex: 0 0 480px; }
  .cu-flow__title { font-size: 18px; line-height: 22px; }
  .cu-flow__step { min-height: 56px; padding: 11px; gap: 16px; }
  .cu-flow__num { font-size: 22px; line-height: 26px; }
  .cu-flow__copy { gap: 2px; }
}

/* Workspace ------------------------------------------------------------------ */
.cu-workspace { background: var(--cream); color: var(--ink); padding: 24px 0 32px; }
.cu-workspace__inner { display: flex; flex-direction: column; gap: 24px; }
.cu-card { background: var(--white); border: 1px solid var(--line-light); border-radius: 8px; }
.cu-form-card { padding: 19px; scroll-margin-top: 80px; }
.cu-form-card:focus { outline: 0; }
@media (min-width: 1024px) {
  .cu-workspace { padding: 64px 0; }
  .cu-workspace__inner { flex-direction: row; align-items: flex-start; gap: 48px; }
  .cu-form-card { flex: 1 1 0; min-width: 0; padding: 39px; scroll-margin-top: 24px; }
}

/* Form ----------------------------------------------------------------------- */
.cu-form { display: flex; flex-direction: column; gap: 24px; position: relative; }
.cu-form[hidden] { display: none; }
.cu-form__head { display: flex; flex-direction: column; gap: 6px; }
.cu-form__title { font-family: var(--font-display); font-weight: 900; font-size: 28px; line-height: 34px; color: var(--navy); }
.cu-form__text { font-size: 13px; line-height: 18px; color: var(--ink-2); }
.cu-form__req { font-size: 11px; line-height: 14px; font-weight: 600; color: var(--blue); }

.cu-stage { display: flex; flex-direction: column; gap: 16px; }
.cu-stage__head { display: flex; align-items: center; gap: 10px; }
.cu-stage__badge { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 50%; background: var(--blue); color: var(--white); font-family: var(--font-display); font-weight: 900; font-size: 14px; line-height: 17px; }
.cu-stage__title { font-family: var(--font-display); font-weight: 800; font-size: 18px; line-height: 22px; color: var(--navy); }
.cu-stage__row { display: contents; }

.cu-field { gap: 6px; }
.cu-field .field__label, .cu-field__label { display: flex; align-items: center; gap: 4px; font-size: 12px; line-height: 16px; font-weight: 700; color: var(--navy); }
.cu-field__req { color: var(--blue); }
.cu-field__label--optional { gap: 6px; }
.cu-field__optional { font-size: 11px; line-height: 14px; font-weight: 500; color: var(--ink-3); text-transform: uppercase; }
.cu-field .field__input { height: 48px; padding: 0 15px; border-color: var(--line-light); border-radius: 4px; font-size: 14px; line-height: 18px; color: var(--ink); }
.cu-field .field__input::placeholder { color: var(--ink-3); opacity: 1; }
.cu-field .field__input:hover { border-color: var(--ink-4); }
.cu-field .field__input:focus { border-color: var(--blue); box-shadow: 0 0 0 3px rgba(0, 71, 255, .15); }
.cu-field .field__input[aria-invalid="true"] { border-color: var(--red); }
.cu-field .cu-field__select { cursor: pointer; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%234e5459' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-size: 14px 14px; background-position: right 16px center; padding-right: 44px; }
.cu-field .cu-field__select.is-placeholder { color: var(--ink-2); }
.cu-field .cu-field__textarea { height: 160px; min-height: 160px; padding: 11px; resize: vertical; }
.cu-field__hint { font-size: 11px; line-height: 14px; color: var(--ink-3); }
.cu-field .field__error { color: var(--red); font-weight: 500; }

/* Attachment */
.cu-attach__box { position: relative; display: flex; align-items: center; gap: 12px; padding: 13px; background: var(--cream); border: 1px dashed var(--line-light); border-radius: 4px; cursor: pointer; transition: border-color var(--t), background-color var(--t); }
.cu-attach__box:hover { border-color: var(--ink-4); }
.cu-attach__box:focus-within { border-color: var(--blue); box-shadow: 0 0 0 3px rgba(0, 71, 255, .15); }
.cu-attach.has-error .cu-attach__box { border-color: var(--red); }
.cu-attach__box.is-filled { border-style: solid; border-color: var(--blue); }
.cu-attach__input { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; clip: rect(0 0 0 0); }
.cu-attach__icon { flex: none; width: 18px; height: 18px; color: var(--navy); }
.cu-attach__copy { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.cu-attach__title { font-size: 12px; line-height: 16px; font-weight: 700; color: var(--navy); }
.cu-attach__text { font-size: 10px; line-height: 13px; color: var(--ink-3); overflow-wrap: anywhere; }

/* Honeypot */
.cu-hp { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }

.cu-form__submit-row { display: flex; }
.cu-form__submit { width: 100%; height: 52px; padding: 14px 16px; font-size: 14px; line-height: 18px; font-weight: 800; color: var(--navy); }

@media (min-width: 1024px) {
  .cu-form { gap: 32px; }
  .cu-form__head { gap: 8px; }
  .cu-form__title { font-size: 32px; line-height: 38px; }
  .cu-form__text { font-size: 14px; line-height: 18px; }
  .cu-form__req { font-size: 12px; line-height: 16px; }
  .cu-stage { gap: 20px; }
  .cu-stage__head { gap: 12px; }
  .cu-stage__badge { width: 28px; height: 28px; font-size: 16px; line-height: 19px; }
  .cu-stage__title { font-size: 20px; line-height: 24px; }
  .cu-stage__row { display: flex; gap: 20px; }
  .cu-stage__row > .cu-field { flex: 1 1 0; min-width: 0; }
  .cu-field { gap: 8px; }
  .cu-field .field__label, .cu-field__label { color: var(--ink); }
  .cu-field .cu-field__textarea { padding: 15px; }
  .cu-attach__box { padding: 15px; }
  .cu-attach__icon { width: 20px; height: 20px; }
  .cu-attach__title { font-size: 13px; line-height: 17px; color: var(--ink); }
  .cu-attach__text { font-size: 11px; line-height: 14px; }
  .cu-form__submit-row { padding-top: 8px; }
  .cu-form__submit { width: 200px; height: 48px; padding: 14px 28px; font-size: 13px; line-height: 17px; }
}

/* Success state -------------------------------------------------------------- */
.cu-success { display: flex; flex-direction: column; gap: 16px; animation: cu-in .35s var(--ease); }
.cu-success[hidden] { display: none; }
@keyframes cu-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.cu-success__kicker { display: flex; align-items: center; gap: 6px; font-size: 11px; line-height: 14px; font-weight: 800; color: var(--green); }
.cu-success__title { font-family: var(--font-display); font-weight: 900; font-size: 28px; line-height: 34px; color: var(--navy); }
.cu-success__text { font-size: 13px; line-height: 18px; color: var(--ink-2); }
.cu-success__ref { display: flex; flex-direction: column; gap: 4px; padding: 12px; background: var(--cream); border-radius: 4px; }
.cu-success__ref-label { font-size: 11px; line-height: 14px; font-weight: 800; color: var(--ink-2); }
.cu-success__ref-value { font-family: var(--font-mono); font-size: 16px; line-height: 21px; font-weight: 700; color: var(--blue); }
.cu-success__next-title { margin-top: 8px; font-family: var(--font-display); font-weight: 800; font-size: 18px; line-height: 22px; color: var(--navy); }
.cu-success__list { display: flex; flex-direction: column; gap: 12px; }
.cu-success__item { display: flex; align-items: center; gap: 10px; font-size: 13px; line-height: 18px; color: var(--ink-2); }
.cu-success__actions { display: flex; flex-direction: column; gap: 12px; margin-top: 8px; }
.cu-success__btn { width: 100%; height: 48px; }
@media (min-width: 1024px) {
  .cu-success { gap: 20px; }
  .cu-success__kicker { font-size: 12px; line-height: 16px; }
  .cu-success__title { font-size: 32px; line-height: 38px; }
  .cu-success__text { font-size: 14px; line-height: 20px; max-width: 640px; }
  .cu-success__ref { align-self: flex-start; min-width: 316px; }
  .cu-success__next-title { font-size: 20px; line-height: 24px; }
  .cu-success__item { gap: 12px; font-size: 14px; }
  .cu-success__actions { flex-direction: row; }
  .cu-success__btn { width: auto; min-width: 200px; }
}

/* Contact information panel -------------------------------------------------- */
.cu-panel { display: flex; flex-direction: column; gap: 24px; padding: 19px; }
.cu-panel__title { font-family: var(--font-display); font-weight: 900; font-size: 22px; line-height: 26px; color: var(--navy); }
.cu-panel__block { display: flex; flex-direction: column; gap: 12px; }
.cu-panel__kicker { display: flex; align-items: center; gap: 8px; font-size: 11px; line-height: 14px; font-weight: 800; color: var(--ink-2); }
.cu-panel__kicker::before { content: ''; flex: none; width: 4px; height: 16px; background: var(--blue); }
.cu-panel__kicker--yellow::before { background: var(--yellow); }
.cu-panel__kicker--navy::before { background: var(--navy); }
.cu-panel__name { font-family: var(--font-display); font-weight: 800; font-size: 24px; line-height: 29px; color: var(--navy); }
.cu-panel__text { font-size: 13px; line-height: 18px; color: var(--ink-2); }
.cu-panel__email { display: flex; flex-direction: column; gap: 4px; padding: 12px; background: var(--cream); border-radius: 4px; transition: background-color var(--t), box-shadow var(--t); }
.cu-panel__email:hover { box-shadow: inset 0 0 0 1px var(--blue); }
.cu-panel__email-label { font-size: 11px; line-height: 14px; font-weight: 800; color: var(--ink-2); }
.cu-panel__email-value { font-size: 13px; line-height: 17px; font-weight: 700; color: var(--blue); overflow-wrap: anywhere; }
.cu-panel__email:hover .cu-panel__email-value { text-decoration: underline; text-underline-offset: 2px; }
.cu-panel__rule { height: 1px; margin: 0 0 -1px; background: var(--line-light); }
.cu-panel__help { display: flex; flex-direction: column; gap: 4px; }
.cu-panel__help-title { font-size: 13px; line-height: 17px; font-weight: 800; color: var(--navy); }
.cu-panel__phone { align-self: flex-start; font-family: var(--font-display); font-weight: 900; font-size: 32px; line-height: 38px; color: var(--blue); transition: opacity var(--t); }
.cu-panel__phone:hover { opacity: .8; }
.cu-panel__note { font-size: 11px; line-height: 14px; color: var(--ink-3); }
.cu-panel__link { align-self: flex-start; font-size: 13px; line-height: 17px; font-weight: 700; color: var(--blue); text-decoration: underline; text-underline-offset: 2px; transition: opacity var(--t); }
.cu-panel__link:hover { opacity: .8; }
@media (min-width: 1024px) {
  .cu-panel { flex: 0 0 380px; gap: 28px; padding: 31px; }
}