/* ==========================================================================
   Readybet.co — overlays: age gate, cookie consent, login, register, verify,
   mobile menu
   ========================================================================== */

.modal { position: fixed; inset: 0; z-index: 1000; display: flex; align-items: flex-start; justify-content: center; overflow: auto; }
.age-modal, .login-modal, .login-card, .verify-modal, .verify-card { margin: auto; }
.cookie-panel { margin: auto auto 0; }
.input input:focus-visible, .input select:focus-visible, .otp__box input:focus-visible { outline: none; }
.input:focus-within { border-color: var(--ink); }
.modal[hidden] { display: none; }
.modal__backdrop { position: absolute; inset: 0; width: 100%; height: 100%; cursor: default; }
.modal__scroll { position: relative; width: 100%; min-height: 100%; display: flex; justify-content: center; align-items: flex-start; padding: 80px 0; margin: 0; }
.modal--auth { background: var(--ink); }
.modal--auth .modal__backdrop { background: transparent; }
.form-error { font-family: var(--f-body); font-size: 12px; line-height: 1.4; color: var(--orange); margin-top: 8px; }
.pw-toggle { font-family: var(--f-archivo); font-weight: 800; font-size: 11px; letter-spacing: .5px; color: var(--orange); padding: 4px 8px; margin-right: -8px; white-space: nowrap; }

/* --------------------------------------------------------------------------
   Age verification
   -------------------------------------------------------------------------- */
.modal--age { background: var(--ink); overflow: hidden; }
.age-grid { position: absolute; inset: 0; opacity: .05; padding: 64px; display: flex; flex-direction: column; justify-content: space-between; pointer-events: none; }
.age-grid__row { display: flex; justify-content: space-between; height: 4px; }
.age-grid__row i { width: 4px; height: 4px; border-radius: 2px; background: var(--paper); }
.age-line { position: absolute; top: 0; bottom: 0; width: 1px; background: var(--ink); opacity: .5; }
.age-line--1 { left: 300px; }
.age-line--2 { left: 1140px; }

.age-modal {
  position: relative; width: 820px; height: 580px; border-radius: 16px; overflow: hidden; display: flex;
  box-shadow: 0 24px 64px -8px rgba(0, 0, 0, .5);
}
.age-modal__left { width: 320px; flex: 0 0 320px; background: var(--cream); padding: 40px; display: flex; flex-direction: column; justify-content: space-between; overflow: hidden; }
.age-modal__cat { display: flex; flex-direction: column; gap: 4px; width: 32px; }
.age-modal__cat-text { font-family: var(--f-body); font-weight: 700; font-size: 11px; letter-spacing: 2px; text-transform: uppercase; color: var(--ink); opacity: .6; word-break: break-all; }
.age-modal__cat-line { display: block; width: 32px; height: 2px; background: var(--ink); opacity: .6; }
.age-modal__huge { font-family: var(--f-head); font-weight: 700; font-size: 140px; line-height: .8; letter-spacing: -4px; color: var(--ink); }
.age-modal__note { font-family: var(--f-body); font-weight: 500; font-size: 13px; line-height: 1.4; color: var(--ink); opacity: .8; }
.age-modal__right { flex: 1 1 auto; background: var(--paper); padding: 48px; display: flex; flex-direction: column; justify-content: space-between; }
.age-modal__brand { display: flex; align-items: center; gap: 8px; }
.age-modal__brand-name { font-family: var(--f-head); font-weight: 700; font-size: 22px; letter-spacing: 1.5px; color: var(--ink); }
.age-modal__brand-dot { width: 6px; height: 6px; border-radius: 3px; background: var(--orange); }
.age-modal__brand-sub { font-family: var(--f-body); font-weight: 600; font-size: 12px; letter-spacing: 1px; text-transform: uppercase; color: var(--muted); }
.age-modal__copy { display: flex; flex-direction: column; gap: 16px; }
.age-modal__title { font-family: var(--f-head); font-weight: 700; font-size: 36px; line-height: 1.1; text-transform: uppercase; color: var(--ink); }
.age-modal__expl { display: flex; flex-direction: column; gap: 12px; }
.age-modal__p1 { font-family: var(--f-body); font-size: 15px; line-height: 1.5; color: var(--ink); }
.age-modal__p2 { font-family: var(--f-body); font-size: 13px; line-height: 1.4; color: var(--muted); }
.age-modal__actions { display: flex; flex-direction: column; gap: 12px; }
.age-modal__yes, .age-modal__no { display: flex; align-items: center; justify-content: center; border-radius: 8px; font-family: var(--f-head); font-weight: 700; font-size: 16px; letter-spacing: 1px; text-transform: uppercase; }
.age-modal__yes { height: 54px; background: var(--orange); color: var(--paper); box-shadow: 0 4px 12px rgba(232, 100, 44, .2); }
.age-modal__no { height: 52px; border: 1px solid var(--ink); color: var(--ink); }
.age-modal__resp { display: flex; flex-direction: column; gap: 12px; }
.age-modal__resp-line { display: block; height: 1px; background: var(--line); }
.age-modal__resp-text { font-family: var(--f-body); font-size: 11px; line-height: 1.4; color: var(--muted); }

@media (max-width: 767px) {
  .age-grid { padding: 32px; }
  .age-grid__row i:nth-child(n+5) { display: none; }
  .age-line { background: var(--paper); opacity: .04; }
  .age-line--1 { left: 80px; }
  .age-line--2 { left: 310px; }
  .age-modal { width: 350px; height: auto; flex-direction: column; border-radius: 16px; box-shadow: 0 16px 48px -4px rgba(0, 0, 0, .5); }
  .age-modal__left { width: 100%; flex: 0 0 auto; padding: 32px; align-items: center; gap: 16px; justify-content: flex-start; text-align: center; }
  .age-modal__cat { width: 100%; align-items: center; gap: 6px; }
  .age-modal__cat-text { word-break: normal; text-align: center; }
  .age-modal__huge { font-size: 100px; line-height: .85; letter-spacing: -3px; text-align: center; }
  .age-modal__right { padding: 32px; gap: 24px; justify-content: flex-start; align-items: center; text-align: center; }
  .age-modal__brand { justify-content: center; }
  .age-modal__brand-name { font-size: 20px; }
  .age-modal__copy { gap: 12px; width: 100%; }
  .age-modal__title { font-size: 28px; line-height: 1.15; }
  .age-modal__expl { gap: 16px; }
  .age-modal__p1 { font-size: 14px; line-height: 1.45; }
  .age-modal__p2 { font-size: 12px; }
  .age-modal__actions { gap: 10px; width: 100%; }
  .age-modal__yes { height: 50px; }
  .age-modal__no { height: 48px; background: var(--white); border-width: 1.5px; }
  .age-modal__resp { width: 100%; }
}

/* --------------------------------------------------------------------------
   Cookie consent
   -------------------------------------------------------------------------- */
.modal--cookie { background: rgba(28, 20, 14, .6); align-items: flex-end; padding: 0 32px 24px; }
.cookie-panel { position: relative; width: 100%; max-width: 1376px; min-height: 397px; border-radius: 12px; overflow: hidden; display: flex; box-shadow: 0 16px 32px rgba(0, 0, 0, .25); }
.cookie-panel__left { width: 380px; flex: 0 0 380px; background: var(--cream); padding: 40px; display: flex; flex-direction: column; justify-content: space-between; }
.cookie-panel__brand-block { display: flex; flex-direction: column; gap: 16px; }
.cookie-panel__brand { font-family: var(--f-head); font-weight: 700; font-size: 24px; letter-spacing: 1px; color: var(--orange); }
.cookie-panel__big { font-family: var(--f-head); font-weight: 700; font-size: 48px; line-height: 1; text-transform: uppercase; color: var(--ink); }
.cookie-panel__left-bottom { display: flex; flex-direction: column; gap: 8px; }
.cookie-panel__left-line { display: block; height: 1px; background: var(--muted); }
.cookie-panel__cats { font-family: var(--f-body); font-weight: 600; font-size: 12px; letter-spacing: 1px; text-transform: uppercase; color: var(--muted); }
.cookie-panel__right { flex: 1 1 auto; background: var(--paper); padding: 40px; display: flex; flex-direction: column; gap: 32px; }
.cookie-panel__info { display: flex; flex-direction: column; gap: 12px; }
.cookie-panel__title { font-family: var(--f-head); font-weight: 700; font-size: 20px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--ink); }
.cookie-panel__text { font-family: var(--f-body); font-size: 14px; line-height: 1.6; color: var(--ink); }
.cookie-panel__modules { display: flex; gap: 24px; height: 127px; }
.cookie-module { flex: 1 1 0; display: flex; flex-direction: column; justify-content: space-between; }
.cookie-module--necessary { padding-right: 24px; gap: 8px; justify-content: flex-start; }
.cookie-module--analytics { padding: 0 12px; }
.cookie-module--preferences { padding-left: 24px; }
.cookie-module__body { display: flex; flex-direction: column; gap: 8px; }
.cookie-module__num { font-family: var(--f-head); font-weight: 700; font-size: 14px; color: var(--orange); }
.cookie-module__name { font-family: var(--f-head); font-weight: 700; font-size: 16px; letter-spacing: .5px; text-transform: uppercase; color: var(--ink); }
.cookie-module__desc { font-family: var(--f-body); font-size: 13px; line-height: 1.4; color: var(--muted); }
.cookie-module__status { align-self: flex-start; display: inline-flex; align-items: center; gap: 6px; background: var(--ink); color: var(--paper); border-radius: 4px; padding: 6px 12px; font-family: var(--f-body); font-weight: 700; font-size: 11px; letter-spacing: .5px; }
.cookie-module__lock { width: 10px; height: 10px; color: var(--paper); }
.cookie-module__lock svg { width: 10px; height: 10px; }
.cookie-panel__divider { display: block; width: 1px; height: 100px; background: var(--sand); flex: 0 0 1px; }
.cookie-panel__divider--last { display: none; }
.cookie-panel__actions { display: flex; justify-content: flex-end; gap: 16px; }
.cookie-btn { height: 43px; display: inline-flex; align-items: center; justify-content: center; border-radius: 6px; padding: 12px 24px; font-family: var(--f-head); font-weight: 700; font-size: 14px; letter-spacing: .5px; text-transform: uppercase; white-space: nowrap; }
.cookie-btn--reject { border: 1.5px solid var(--ink); color: var(--ink); }
.cookie-btn--save { background: var(--ink); color: var(--paper); }
.cookie-btn--accept { background: var(--orange); color: var(--paper); padding: 12px 32px; }

@media (max-width: 767px) {
  .modal--cookie { padding: 0; background: rgba(28, 20, 14, .6); align-items: flex-end; }
  .cookie-panel { max-width: none; min-height: 0; max-height: 100%; overflow: auto; flex-direction: column; border-radius: 24px 24px 0 0; box-shadow: 0 -8px 24px rgba(0, 0, 0, .25); }
  .cookie-panel__left { width: 100%; flex: 0 0 auto; background: var(--sand); padding: 24px; gap: 16px; }
  .cookie-panel__brand-block { gap: 8px; }
  .cookie-panel__brand { font-size: 18px; }
  .cookie-panel__big { font-size: 36px; line-height: 1.05; }
  .cookie-panel__left-line { opacity: .3; }
  .cookie-panel__right { padding: 24px; gap: 24px; }
  .cookie-panel__info { gap: 10px; }
  .cookie-panel__modules { flex-direction: column; height: auto; gap: 24px; }
  .cookie-module { flex-direction: row; justify-content: space-between; align-items: center; padding: 0; }
  .cookie-module--necessary { padding-right: 0; gap: 0; }
  .cookie-module__body { gap: 6px; width: 260px; }
  .cookie-module--necessary .cookie-module__body { width: 220px; }
  .cookie-module__status { align-self: center; font-size: 10px; }
  .cookie-panel__divider { width: 100%; height: 1px; flex: 0 0 1px; }
  .cookie-panel__divider--last { display: block; }
  .cookie-panel__modules::before { content: ""; display: block; width: 100%; height: 1px; background: var(--sand); }
  .cookie-panel__actions { flex-direction: column; gap: 10px; }
  .cookie-btn { height: 47px; width: 100%; padding: 14px 0; }
  .cookie-btn--reject { background: var(--paper); }
}

/* --------------------------------------------------------------------------
   Auth decor (login)
   -------------------------------------------------------------------------- */
.auth-decor { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.auth-decor__ring { position: absolute; left: -150px; top: -150px; width: 600px; height: 600px; border-radius: 50%; border: 2px solid rgba(242, 92, 5, .03); }
.auth-decor__axis { position: absolute; left: 0; right: 0; top: 300px; height: 1px; background: rgba(242, 92, 5, .02); }
.auth-decor__diag { position: absolute; left: 200px; top: 0; width: 1200px; height: 1px; background: rgba(242, 92, 5, .02); transform: rotate(35deg); transform-origin: 0 0; }
@media (max-width: 767px) {
  .auth-decor__ring { left: -80px; top: -80px; width: 320px; height: 320px; }
  .auth-decor__axis { top: 240px; }
  .auth-decor__diag { display: none; }
}

/* --------------------------------------------------------------------------
   Login — desktop
   -------------------------------------------------------------------------- */
.login-modal { position: relative; width: 800px; height: 560px; border-radius: 12px; overflow: hidden; display: flex; box-shadow: 0 32px 64px rgba(0, 0, 0, .36); }
.login-modal__identity { width: 288px; flex: 0 0 288px; background: var(--cream); padding: 32px; display: flex; flex-direction: column; justify-content: space-between; }
.login-modal__eyebrow-block { display: flex; flex-direction: column; gap: 8px; }
.login-modal__eyebrow { font-family: var(--f-archivo); font-weight: 700; font-size: 11px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--ink); opacity: .8; }
.login-modal__logo { font-family: var(--f-archivo); font-weight: 900; font-size: 24px; letter-spacing: -1px; text-transform: uppercase; color: var(--ink); }
.login-modal__huge { display: flex; flex-direction: column; }
.login-modal__huge span { font-family: var(--f-archivo); font-weight: 900; font-size: 80px; line-height: .8; letter-spacing: -4px; text-transform: uppercase; color: var(--ink); }
.login-modal__arrow { width: 36px; height: 36px; color: var(--ink); display: flex; align-items: center; justify-content: center; }
.login-modal__arrow svg { width: 27px; height: 27px; }
.login-modal__functional { flex: 1 1 auto; background: var(--paper); padding: 48px 48px 40px; display: flex; flex-direction: column; justify-content: space-between; }
.login-modal__head { display: flex; flex-direction: column; gap: 6px; }
.login-modal__title { font-family: var(--f-archivo); font-weight: 800; font-size: 32px; letter-spacing: -.5px; color: var(--ink); }
.login-modal__sub { font-family: var(--f-body); font-size: 15px; line-height: 1.4; color: var(--muted); }
.login-modal__form { display: flex; flex-direction: column; gap: 16px; }
.input--auth input::placeholder { color: var(--muted); opacity: .6; }
.login-modal__bottom { display: flex; flex-direction: column; gap: 20px; }
.login-modal__submit { height: 50px; display: flex; align-items: center; justify-content: center; background: var(--orange); border-radius: 4px; font-family: var(--f-archivo); font-weight: 800; font-size: 15px; letter-spacing: 1px; text-transform: uppercase; color: var(--ink); }
.login-modal__divider { display: block; height: 1px; background: rgba(28, 20, 14, .08); }
.login-modal__reg { display: flex; justify-content: space-between; align-items: center; font-family: var(--f-body); font-size: 14px; color: var(--muted); }
.login-modal__create { display: inline-flex; align-items: center; gap: 4px; font-family: var(--f-archivo); font-weight: 700; font-size: 12px; letter-spacing: .5px; text-transform: uppercase; color: var(--orange); }
.login-modal__chev { width: 14px; height: 14px; display: block; }
.login-modal__chev svg { width: 14px; height: 14px; }

/* --------------------------------------------------------------------------
   Login — mobile card
   -------------------------------------------------------------------------- */
.login-card { position: relative; width: 366px; max-width: calc(100% - 24px); background: var(--paper); border-radius: 16px; padding: 28px 24px 24px; display: flex; flex-direction: column; box-shadow: 0 32px 64px rgba(0, 0, 0, .36); }
.login-card__brand { display: flex; flex-direction: column; gap: 4px; padding-bottom: 16px; border-bottom: 1px solid rgba(28, 20, 14, .08); }
.login-card__eyebrow { font-family: var(--f-archivo); font-weight: 700; font-size: 11px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--ink); opacity: .8; }
.login-card__logo { font-family: var(--f-archivo); font-weight: 900; font-size: 22px; letter-spacing: -1px; text-transform: uppercase; color: var(--ink); }
.login-card__title-block { padding: 16px 0 20px; display: flex; flex-direction: column; gap: 6px; }
.login-card__title { font-family: var(--f-archivo); font-weight: 800; font-size: 32px; letter-spacing: -.5px; color: var(--ink); }
.login-card__sub { font-family: var(--f-body); font-size: 15px; line-height: 1.4; color: var(--muted); }
.login-card__form { display: flex; flex-direction: column; }
.input--m { height: 52px; border: 1px solid #d1cbc5; border-radius: 6px; }
.input--m input::placeholder { color: #a39890; opacity: 1; }
.input--pw { padding-right: 8px; }
.pw-toggle--m { width: 60px; height: 44px; padding: 10px 12px; margin: 0; display: flex; align-items: center; justify-content: center; border-radius: 4px; }
.login-card__spacer-18 { height: 18px; }
.login-card__spacer-28 { height: 28px; }
.login-card__submit { height: 54px; display: flex; align-items: center; justify-content: center; background: var(--orange); border-radius: 6px; font-family: var(--f-archivo); font-weight: 800; font-size: 15px; letter-spacing: 1px; text-transform: uppercase; color: var(--ink); }
.login-card__divider { padding: 18px 0; }
.login-card__divider span { display: block; height: 1px; background: rgba(28, 20, 14, .08); }
.login-card__reg { display: flex; flex-direction: column; align-items: center; gap: 8px; font-family: var(--f-body); font-size: 14px; color: var(--muted); }
.login-card__create { display: inline-flex; align-items: center; gap: 4px; padding: 4px 0; font-family: var(--f-archivo); font-weight: 700; font-size: 12px; letter-spacing: .5px; text-transform: uppercase; color: var(--orange); }
.login-card__arrow { width: 12px; height: 12px; display: block; }
.login-card__arrow svg { width: 12px; height: 12px; }

/* --------------------------------------------------------------------------
   Registration
   -------------------------------------------------------------------------- */
.reg-modal { position: relative; width: 980px; background: var(--cream); border: 1.5px solid var(--ink); border-radius: 8px; overflow: hidden; box-shadow: 0 16px 40px rgba(0, 0, 0, .5); display: flex; flex-direction: column; }
.reg-modal__topbar { height: 56px; background: var(--sand); border-bottom: 1px solid var(--ink); padding: 0 24px; display: flex; justify-content: space-between; align-items: center; }
.reg-modal__brand { font-family: var(--f-head); font-weight: 700; font-size: 22px; letter-spacing: 1.5px; color: var(--ink); }
.reg-modal__topbar-label { font-family: var(--f-head); font-weight: 700; font-size: 13px; letter-spacing: 1.5px; color: var(--muted); }
.reg-modal__zones { display: flex; }
.reg-modal__rail { width: 294px; flex: 0 0 294px; background: var(--cream); border-right: 1px solid var(--ink); padding: 48px 32px; display: flex; flex-direction: column; justify-content: space-between; }
.reg-modal__rail-brand { display: flex; flex-direction: column; gap: 4px; }
.reg-modal__rail-brand span { font-family: var(--f-head); font-weight: 700; font-size: 40px; line-height: 1; letter-spacing: -1px; color: var(--ink); white-space: nowrap; }
.reg-modal__rail-legal { display: flex; flex-direction: column; gap: 4px; }
.reg-modal__rail-18 { font-family: var(--f-head); font-weight: 700; font-size: 72px; line-height: 1; color: var(--ink); }
.reg-modal__rail-gr { font-family: var(--f-body); font-weight: 700; font-size: 11px; letter-spacing: .5px; color: var(--ink); opacity: .8; }
.reg-modal__rail-progress { display: flex; flex-direction: column; gap: 16px; }
.reg-step { display: inline-flex; align-items: center; gap: 8px; font-family: var(--f-head); font-weight: 500; font-size: 13px; letter-spacing: 1px; color: var(--ink); opacity: .6; white-space: nowrap; }
.reg-step i { width: 6px; height: 6px; background: var(--ink); opacity: .3; }
.reg-step.is-active { font-weight: 700; opacity: 1; }
.reg-step.is-active i { opacity: 1; }
.reg-modal__form { flex: 0 0 686px; width: 686px; min-width: 0; background: var(--paper); padding: 40px; display: flex; flex-direction: column; gap: 32px; }
.reg-modal__intro { display: flex; flex-direction: column; gap: 8px; }
.reg-modal__title { font-family: var(--f-head); font-weight: 700; font-size: 28px; letter-spacing: -.5px; color: var(--ink); }
.reg-modal__sub { font-family: var(--f-body); font-size: 14px; line-height: 1.5; color: var(--muted); }
.reg-sec { display: flex; flex-direction: column; gap: 20px; }
.reg-sec__head { display: flex; flex-direction: column; gap: 12px; padding-bottom: 8px; }
.reg-sec__heading { display: flex; align-items: center; gap: 8px; }
.reg-sec__num { font-family: var(--f-head); font-weight: 700; font-size: 14px; letter-spacing: 1px; color: var(--orange); }
.reg-sec__name { font-family: var(--f-head); font-weight: 700; font-size: 14px; letter-spacing: 1.5px; color: var(--ink); }
.reg-sec__line { display: block; height: 1px; background: var(--ink); opacity: .15; }
.input--reg { height: 48px; border: 1px solid var(--ink); border-radius: 4px; }
.input--reg input::placeholder, .input--reg select:invalid { color: var(--muted); }
.input--select select { color: var(--ink); }
.input--select select:invalid, .input--select select option[value=""] { color: var(--muted); }
.input__chev { width: 20px; height: 20px; display: flex; align-items: center; justify-content: center; flex: 0 0 20px; color: var(--ink); }
.input__chev svg { width: 12px; height: 8px; }
.pw-toggle--reg { font-family: var(--f-head); font-weight: 700; font-size: 13px; letter-spacing: .5px; padding: 0 4px; margin: 0 -4px 0 0; }
.reg-row { display: flex; gap: 16px; }
.reg-row > .field { flex: 1 1 0; min-width: 0; }
.reg-row--title .field--title { flex: 0 0 200px; }
.reg-row--address .field--state, .reg-row--address .field--postcode { flex: 0 0 120px; }
.field__label--empty { display: block; height: 17px; }
.reg-dob__inputs { display: flex; gap: 12px; align-items: flex-start; }
.reg-dob__inputs .field { min-width: 0; }
.reg-dob__inputs .field--dd, .reg-dob__inputs .field--mm { flex: 0 0 80px; }
.reg-dob__inputs .field--yyyy { flex: 0 0 110px; }
.reg-dob__labels { display: flex; flex-direction: column; padding-left: 12px; }
.reg-dob__l1 { font-family: var(--f-body); font-weight: 600; font-size: 11px; letter-spacing: .5px; color: var(--muted); }
.reg-dob__l2 { font-family: var(--f-body); font-size: 11px; color: var(--muted); opacity: .8; }
.reg-deposit { border: 1px solid var(--ink); border-radius: 4px; padding: 16px; display: flex; flex-direction: column; gap: 12px; }
.reg-deposit__head { display: flex; justify-content: space-between; align-items: center; }
.reg-deposit__title { font-family: var(--f-body); font-weight: 700; font-size: 14px; color: var(--ink); }
.reg-deposit__opt { background: var(--sand); border-radius: 3px; padding: 2px 8px; font-family: var(--f-head); font-weight: 700; font-size: 10px; letter-spacing: .5px; color: var(--ink); }
.reg-deposit__note { font-family: var(--f-body); font-size: 12px; line-height: 1.4; color: var(--muted); }
.reg-agree { display: flex; flex-direction: column; gap: 16px; }
.reg-agree .check { position: relative; }
.check__link { font-weight: 600; color: var(--orange); text-decoration: underline; }
.reg-modal__submit { height: 50px; display: flex; align-items: center; justify-content: center; background: var(--orange); border-radius: 4px; font-family: var(--f-head); font-weight: 700; font-size: 16px; letter-spacing: 1.5px; color: var(--ink); }
.reg-modal__footer { padding-top: 8px; display: flex; flex-direction: column; gap: 16px; }
.reg-modal__footer-line { display: block; height: 1px; background: var(--ink); opacity: .15; }
.reg-modal__footer-row { display: flex; justify-content: space-between; align-items: center; font-family: var(--f-body); font-size: 14px; color: var(--muted); }
.reg-modal__login { display: inline-flex; align-items: center; gap: 4px; font-family: var(--f-head); font-weight: 700; font-size: 14px; letter-spacing: .5px; color: var(--orange); }
.reg-modal__login-arrow { font-family: var(--f-body); font-weight: 800; font-size: 14px; letter-spacing: 0; }
.reg-modal__intro-m, .reg-modal__progress-m { display: none; }

@media (max-width: 767px) {
  .modal--register .modal__scroll { padding: 20px 0 40px; }
  .reg-modal { width: 350px; max-width: calc(100% - 40px); background: var(--paper); }
  .reg-modal__topbar { padding: 0 20px; }
  .reg-modal__brand { font-size: 20px; }
  .reg-modal__intro-m { display: flex; flex-direction: column; gap: 16px; padding: 24px 20px 16px; background: var(--paper); }
  .reg-modal__intro-text { display: flex; flex-direction: column; gap: 8px; }
  .reg-modal__rg-strip { display: flex; align-items: center; gap: 16px; background: var(--sand); border-radius: 6px; padding: 10px 16px; }
  .reg-modal__rg-18 { font-family: var(--f-head); font-weight: 700; font-size: 24px; line-height: 1; color: var(--ink); }
  .reg-modal__rg-text { display: flex; flex-direction: column; gap: 2px; }
  .reg-modal__rg-text b { font-family: var(--f-body); font-weight: 700; font-size: 11px; letter-spacing: .5px; color: var(--ink); opacity: .8; }
  .reg-modal__rg-text span { font-family: var(--f-body); font-size: 10px; color: var(--muted); opacity: .8; }
  .reg-modal__progress-m { display: flex; flex-wrap: wrap; gap: 8px 12px; background: var(--sand); border-top: 1px solid var(--ink); border-bottom: 1px solid var(--ink); padding: 12px 20px; }
  .reg-modal__progress-m .reg-step { font-size: 12px; letter-spacing: .5px; gap: 6px; }
  .reg-modal__form { flex: 1 1 auto; width: auto; padding: 20px; gap: 32px; }
  .input--reg { height: 52px; }
  .reg-row { flex-direction: column; gap: 20px; }
  .reg-row--title .field--title, .reg-row--address .field--state, .reg-row--address .field--postcode { flex: 0 0 auto; }
  .reg-row--address .field--state { order: 1; }
  .reg-row--address .field--postcode { order: 2; }
  .reg-dob { order: 10; }
  .reg-dob__inputs { flex-wrap: wrap; gap: 8px; }
  .reg-dob__inputs .field--dd, .reg-dob__inputs .field--mm { flex: 0 0 72px; }
  .reg-dob__inputs .field--yyyy { flex: 1 1 0; }
  .reg-dob__labels { flex: 0 0 100%; padding: 2px 0 0; gap: 2px; }
  .reg-modal__submit { height: 54px; border-radius: 6px; }
  .reg-sec[data-reg-section="agreements"] { order: 1; }
  .reg-modal__form > .form-error { order: 2; }
  .reg-modal__submit { order: 3; }
  .reg-modal__footer { order: 4; padding-top: 0; }
}

/* --------------------------------------------------------------------------
   Verify email
   -------------------------------------------------------------------------- */
.modal--verify { padding: 40px; }
.verify-wm { position: absolute; font-family: var(--f-head); font-weight: 700; font-size: 14px; letter-spacing: 2px; color: var(--paper); opacity: .1; white-space: nowrap; pointer-events: none; }
.verify-wm--top { left: 60px; top: 40px; }
.verify-wm--bottom { right: 60px; bottom: 40px; }
.verify-modal { position: relative; width: 800px; height: 520px; border-radius: 8px; overflow: hidden; display: flex; box-shadow: 0 32px 64px rgba(0, 0, 0, .7); }
.verify-modal__identity { width: 288px; flex: 0 0 288px; background: var(--cream); padding: 40px; display: flex; flex-direction: column; justify-content: space-between; }
.verify-modal__labels { display: flex; flex-direction: column; gap: 6px; }
.verify-modal__brand { font-family: var(--f-head); font-weight: 700; font-size: 14px; letter-spacing: 3px; color: var(--ink); }
.verify-modal__label { font-family: var(--f-head); font-weight: 700; font-size: 11px; letter-spacing: 1.5px; color: var(--ink); opacity: .8; }
.verify-modal__art { display: flex; flex-direction: column; gap: 2px; }
.verify-modal__art span { font-family: var(--f-head); font-weight: 700; font-size: 52px; line-height: .85; color: var(--ink); }
.verify-modal__envelope { width: 64px; height: 44px; border: 2px solid var(--ink); border-radius: 4px; position: relative; }
.verify-modal__envelope svg { position: absolute; left: -2px; top: -2px; width: 60px; height: 20px; }
.verify-modal__step { font-family: var(--f-head); font-weight: 700; font-size: 11px; letter-spacing: 1.5px; color: var(--ink); }
.verify-modal__functional { flex: 1 1 auto; background: var(--paper); padding: 44px 48px; display: flex; flex-direction: column; justify-content: space-between; }
.verify-modal__head { display: flex; flex-direction: column; gap: 8px; }
.verify-modal__eyebrow { font-family: var(--f-head); font-weight: 700; font-size: 12px; letter-spacing: 1.5px; color: var(--orange); }
.verify-modal__title { font-family: var(--f-head); font-weight: 700; font-size: 32px; color: var(--ink); }
.verify-modal__message { display: flex; flex-direction: column; gap: 12px; }
.verify-modal__sent { font-family: var(--f-body); font-size: 15px; line-height: 1.4; color: var(--muted); }
.verify-modal__card { display: flex; justify-content: space-between; align-items: center; background: var(--sand); border-radius: 4px; padding: 12px 20px; height: 60px; }
.verify-modal__card-text { display: flex; flex-direction: column; gap: 2px; }
.verify-modal__sentto { font-family: var(--f-head); font-weight: 700; font-size: 10px; letter-spacing: 1px; color: var(--muted); }
.verify-modal__email { font-family: var(--f-body); font-weight: 700; font-size: 16px; color: var(--ink); }
.verify-modal__secure { display: inline-flex; align-items: center; gap: 6px; background: var(--ink); color: var(--yellow); border-radius: 12px; padding: 4px 8px; font-family: var(--f-head); font-weight: 700; font-size: 9px; letter-spacing: .5px; }
.verify-modal__lock { width: 10px; height: 10px; }
.verify-modal__lock svg { width: 10px; height: 10px; }
.verify-modal__hint { font-family: var(--f-body); font-size: 13px; line-height: 1.4; color: var(--muted); }
.verify-modal__input { display: flex; flex-direction: column; gap: 8px; }
.otp { display: flex; gap: 12px; }
.otp__box { position: relative; width: 72px; height: 56px; background: var(--paper); border: 1.5px solid var(--ink); border-radius: 4px; display: flex; align-items: center; justify-content: center; cursor: text; }
.otp__box input { position: absolute; inset: 0; width: 100%; height: 100%; text-align: center; font-family: var(--f-head); font-weight: 700; font-size: 28px; color: var(--ink); background: transparent; caret-color: transparent; }
.otp__ph { font-family: var(--f-head); font-weight: 700; font-size: 28px; color: var(--muted); opacity: .3; pointer-events: none; }
.otp__box.has-value .otp__ph { visibility: hidden; }
.otp__box.is-active { border: 2px solid var(--orange); }
.otp__box.is-active .otp__ph { color: var(--orange); opacity: .8; }
.otp__cursor { display: none; position: absolute; width: 2px; height: 24px; background: var(--orange); left: calc(50% + 6px); top: 16px; }
.otp__box.is-active:not(.has-value) .otp__cursor { display: block; animation: rb-blink 1s steps(2) infinite; }
@keyframes rb-blink { to { visibility: hidden; } }
.verify-modal__cta { height: 50px; display: flex; align-items: center; justify-content: center; background: var(--orange); border-radius: 4px; font-family: var(--f-head); font-weight: 700; font-size: 15px; letter-spacing: 1.5px; color: var(--ink); }
.verify-modal__resend { display: flex; flex-direction: column; gap: 12px; }
.verify-modal__resend-line { display: block; height: 1px; background: #eadfd3; }
.verify-modal__resend-row { display: flex; justify-content: space-between; align-items: center; font-family: var(--f-body); font-size: 13px; color: var(--muted); }
.verify-modal__resend-link { display: inline-flex; align-items: center; gap: 4px; font-family: var(--f-head); font-weight: 700; font-size: 13px; letter-spacing: .5px; color: var(--orange); }
.verify-modal__resend-arrow { width: 14px; height: 14px; display: block; }
.verify-modal__resend-arrow svg { width: 14px; height: 14px; }

/* Verify — mobile card */
.verify-card { position: relative; width: 358px; max-width: 100%; background: var(--paper); border-radius: 14px; padding: 24px 20px; display: flex; flex-direction: column; box-shadow: 0 16px 32px rgba(0, 0, 0, .5); }
.verify-card__header { display: flex; justify-content: space-between; align-items: center; padding-bottom: 16px; border-bottom: 1px solid var(--ink); }
.verify-card__brand-group { display: flex; flex-direction: column; gap: 2px; }
.verify-card__brand { font-family: var(--f-head); font-weight: 700; font-size: 14px; letter-spacing: 2px; color: var(--ink); }
.verify-card__label { font-family: var(--f-head); font-weight: 700; font-size: 10px; letter-spacing: 1.5px; color: var(--muted); }
.verify-card__step { font-family: var(--f-head); font-weight: 700; font-size: 11px; letter-spacing: 1.5px; color: var(--muted); }
.verify-card__sp-12 { height: 12px; } .verify-card__sp-16 { height: 16px; } .verify-card__sp-20 { height: 20px; }
.verify-card__title-group { display: flex; flex-direction: column; gap: 6px; }
.verify-card__eyebrow { font-family: var(--f-head); font-weight: 700; font-size: 12px; letter-spacing: 1.5px; color: var(--orange); }
.verify-card__title { font-family: var(--f-head); font-weight: 700; font-size: 30px; color: var(--ink); }
.verify-card__sent { font-family: var(--f-body); font-size: 15px; line-height: 1.4; color: var(--muted); }
.verify-card__info { background: var(--sand); border-radius: 6px; padding: 14px; display: flex; flex-direction: column; gap: 6px; }
.verify-card__info-top { display: flex; justify-content: space-between; align-items: center; }
.verify-card__sentto { font-family: var(--f-head); font-weight: 700; font-size: 10px; letter-spacing: 1px; color: var(--muted); }
.verify-card__secure { display: inline-flex; align-items: center; gap: 4px; background: var(--ink); color: var(--yellow); border-radius: 12px; padding: 4px 8px; font-family: var(--f-head); font-weight: 700; font-size: 9px; letter-spacing: .5px; }
.verify-card__lock { width: 10px; height: 10px; }
.verify-card__lock svg { width: 10px; height: 10px; }
.verify-card__email { font-family: var(--f-body); font-weight: 700; font-size: 16px; color: var(--ink); }
.verify-card__hint { font-family: var(--f-body); font-size: 13px; line-height: 1.4; color: var(--muted); }
.verify-card__otp { display: flex; flex-direction: column; gap: 8px; }
.otp--m .otp__box { flex: 1 1 0; width: auto; background: var(--white); border: 1.5px solid #d1cbc5; border-radius: 6px; }
.otp--m .otp__ph { color: #a39890; opacity: 1; }
.otp--m .otp__box.is-active { border: 2px solid var(--orange); }
.otp--m .otp__box.is-active .otp__ph { color: #a39890; opacity: 1; }
.verify-card__cta { height: 54px; display: flex; align-items: center; justify-content: center; background: var(--orange); border-radius: 6px; font-family: var(--f-head); font-weight: 700; font-size: 15px; letter-spacing: 1.5px; color: var(--white); }
.verify-card__line { display: block; height: 1px; background: #eadfd3; }
.verify-card__resend { display: flex; flex-direction: column; align-items: center; gap: 10px; font-family: var(--f-body); font-size: 13px; color: var(--muted); }
.verify-card__resend-link { display: inline-flex; align-items: center; gap: 4px; font-family: var(--f-head); font-weight: 700; font-size: 13px; letter-spacing: .5px; color: var(--orange); }
.verify-card__resend-arrow { width: 14px; height: 14px; }
.verify-card__resend-arrow svg { width: 14px; height: 14px; }

@media (max-width: 767px) {
  .modal--verify { padding: 16px; }
  .verify-wm { font-size: 11px; opacity: .06; }
  .verify-wm--top { left: 20px; top: 40px; }
  .verify-wm--bottom { right: 20px; top: 40px; bottom: auto; }
}

/* --------------------------------------------------------------------------
   Mobile menu
   -------------------------------------------------------------------------- */
.m-menu { position: fixed; inset: 0; z-index: 1100; background: var(--ink); display: flex; flex-direction: column; color: var(--paper); }
.m-menu[hidden] { display: none; }
.m-menu__top { height: 56px; flex: 0 0 56px; border-bottom: 1px solid rgba(252, 250, 247, .1); padding: 0 24px; display: flex; justify-content: space-between; align-items: center; }
.m-menu__brand { font-family: var(--f-head); font-weight: 700; font-size: 24px; letter-spacing: -.5px; color: var(--paper); }
.m-menu__close { width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; margin-right: -8px; }
.m-menu__x { width: 24px; height: 24px; color: var(--paper); }
.m-menu__x svg { width: 24px; height: 24px; }
.m-menu__scroll { flex: 1 1 auto; overflow: auto; padding: 12px 0 40px; }
.m-menu__primary { display: flex; flex-direction: column; }
.m-menu__link { height: 64px; border-bottom: 1px solid rgba(252, 250, 247, .1); padding: 0 24px; display: flex; justify-content: space-between; align-items: center; font-family: var(--f-head); font-weight: 700; font-size: 32px; letter-spacing: -.5px; text-transform: uppercase; color: var(--paper); }
.m-menu__arrow { width: 24px; height: 24px; color: var(--orange); display: flex; align-items: center; justify-content: center; }
.m-menu__arrow svg { width: 17px; height: 17px; }
.m-menu__auth { padding: 32px 24px 0; display: flex; flex-direction: column; gap: 12px; }
.m-menu__join, .m-menu__login { height: 52px; display: flex; align-items: center; justify-content: center; border-radius: 26px; font-family: var(--f-head); font-weight: 700; font-size: 16px; letter-spacing: .5px; text-transform: uppercase; color: var(--paper); }
.m-menu__join { background: var(--orange); }
.m-menu__login { border: 1.5px solid var(--paper); }
.m-menu__secondary { padding: 40px 24px 0; display: flex; flex-direction: column; gap: 24px; }
.m-menu__row { display: flex; gap: 24px; }
.m-menu__group { flex: 1 1 0; display: flex; flex-direction: column; gap: 12px; }
.m-menu__heading { font-family: var(--f-head); font-weight: 700; font-size: 12px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--orange); }
.m-menu__links { display: flex; flex-direction: column; gap: 10px; }
.m-menu__links a { font-family: var(--f-body); font-weight: 500; font-size: 14px; color: var(--paper); }
.m-menu__bottom { padding: 48px 24px 0; display: flex; flex-direction: column; gap: 16px; }
.m-menu__line { display: block; height: 1px; background: rgba(252, 250, 247, .1); }
.m-menu__util { display: flex; flex-direction: column; gap: 12px; }
.m-menu__help { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.m-menu__18 { width: 20px; height: 20px; border: 1.5px solid var(--orange); border-radius: 10px; display: flex; align-items: center; justify-content: center; font-family: var(--f-body); font-weight: 700; font-size: 10px; color: var(--paper); }
.m-menu__help-text { font-family: var(--f-body); font-weight: 500; font-size: 12px; color: var(--sand); }
.m-menu__help-text b { font-weight: 700; color: var(--paper); }
.m-menu__deposit { display: inline-flex; align-items: center; gap: 4px; align-self: flex-start; font-family: var(--f-head); font-weight: 700; font-size: 14px; letter-spacing: .5px; text-transform: uppercase; color: var(--orange); }
.m-menu__deposit-arrow { width: 16px; height: 16px; display: block; }
.m-menu__deposit-arrow svg { width: 16px; height: 16px; }