/* Guest login screen (2026-10). Everything is scoped under .lv2 so the rest of the site is untouched.
   Brand colour comes from --lv2-brand; each site sets its own. */
.lv2 {
  --lv2-brand: #B3121A; --lv2-brand-ink: #fff;   /* buttons: deeper than the logo red, white text reads clearly */
  --lv2-ink: #16181D; --lv2-ink2: #3D424C; --lv2-muted: #6A707C; --lv2-faint: #A9AEB8;
  --lv2-line: #DFE2E7; --lv2-field: #F5F6F8;
  --lv2-ok: #0E7A4E; --lv2-ok-bg: #EEF8F3; --lv2-ok-line: #B9E2CD;
  --lv2-err: #B42318; --lv2-err-bg: #FEF2F1; --lv2-err-line: #F4C7C2;
  --lv2-ease: cubic-bezier(.2,.8,.2,1);
  font-family: "IBM Plex Sans Arabic", system-ui, sans-serif; color: var(--lv2-ink);
  display: flex; flex-direction: column; min-height: 600px; position: relative; text-align: start;
}
.lv2 *, .lv2 *::before, .lv2 *::after { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
:where(.lv2) button, :where(.lv2) input { font: inherit; color: inherit; }  /* zero specificity: never beats a component colour */
.lv2 [hidden] { display: none !important; }
.lv2 :focus-visible { outline: 3px solid color-mix(in srgb, var(--lv2-brand) 40%, transparent); outline-offset: 2px; }

/* the modal around it: no old header, full screen on phones */
.modal.lv2-on .modal-header, .modal.lv2-on .login-inner-head { display: none; }
.modal.lv2-on .modal-content { border: 0; border-radius: 24px; overflow: hidden; }
.modal.lv2-on .modal-body { padding: 0; }
.modal.lv2-on .modal-dialog { max-width: 430px; }
@media (max-width: 600px) {
  .modal.lv2-on .modal-dialog { margin: 0; max-width: 100%; min-height: 100%; }
  .modal.lv2-on .modal-content { min-height: 100vh; min-height: 100dvh; border-radius: 0; }
  .lv2 { min-height: 100vh; min-height: 100dvh; padding-top: env(safe-area-inset-top); }
}

.lv2-bar { display: grid; grid-template-columns: 48px 1fr 48px; align-items: center; height: 60px; padding: 0 8px; }
.lv2-icon { width: 44px; height: 44px; border-radius: 50%; border: 0; background: none; display: flex; align-items: center; justify-content: center; cursor: pointer; color: var(--lv2-ink2); padding: 0; }
.lv2-icon:active { background: var(--lv2-field); }
.lv2-icon svg { width: 22px; height: 22px; }
.lv2-icon.lv2-hide { visibility: hidden; }
.lv2[dir="ltr"] [data-lv2="back"] svg { transform: scaleX(-1); }
.lv2-logo { justify-self: center; height: 30px; width: auto; }

.lv2-steps { display: flex; gap: 6px; padding: 0 24px; }
.lv2-steps i { flex: 1; height: 4px; border-radius: 4px; background: var(--lv2-line); overflow: hidden; position: relative; }
.lv2-steps i::after { content: ""; position: absolute; inset: 0; background: var(--lv2-brand); transform: scaleX(0); transform-origin: right; transition: transform .45s var(--lv2-ease); }
.lv2[dir="ltr"] .lv2-steps i::after { transform-origin: left; }
.lv2-steps i.on::after { transform: scaleX(1); }

.lv2-screens { flex: 1; display: flex; min-width: 0; }
.lv2-screen { flex: 1; min-width: 0; display: flex; flex-direction: column; padding: 22px 24px calc(18px + env(safe-area-inset-bottom)); }
@media (prefers-reduced-motion: no-preference) {
  .lv2-screen.in-fwd { animation: lv2In .38s var(--lv2-ease); }
  .lv2-screen.in-back { animation: lv2Back .38s var(--lv2-ease); }
}
@keyframes lv2In { from { opacity: 0; transform: translateX(-26px); } }
@keyframes lv2Back { from { opacity: 0; transform: translateX(26px); } }

.lv2-title { font-size: 25px; line-height: 1.35; font-weight: 700; margin: 0 0 8px; color: var(--lv2-ink); }
.lv2-lede { margin: 0 0 22px; color: var(--lv2-muted); font-size: 15.5px; line-height: 1.75; }

.lv2-seg { display: grid; grid-template-columns: 1fr 1fr; background: var(--lv2-field); border-radius: 14px; padding: 4px; margin-bottom: 20px; }
.lv2-seg button { border: 0; background: none; height: 42px; border-radius: 11px; cursor: pointer; color: var(--lv2-muted); font-size: 15px; }
.lv2-seg button[aria-selected="true"] { background: #fff; color: var(--lv2-ink); font-weight: 600; box-shadow: 0 1px 3px rgba(22,24,29,.12); }

.lv2-label { display: block; font-size: 14px; font-weight: 600; color: var(--lv2-ink2); margin-bottom: 8px; }
.lv2-phone { display: flex; direction: ltr; height: 58px; border: 1.5px solid var(--lv2-line); border-radius: 14px; background: #fff; transition: border-color .15s; }
.lv2-phone:focus-within { border-color: var(--lv2-ink); }
.lv2-phone.invalid { border-color: var(--lv2-err); }
.lv2-cc { display: flex; align-items: center; gap: 8px; border: 0; background: var(--lv2-field); border-radius: 12px 0 0 12px; padding: 0 12px 0 14px; cursor: pointer; font-weight: 600; font-size: 16px; font-variant-numeric: tabular-nums; border-right: 1px solid var(--lv2-line); white-space: nowrap; }
.lv2-cc img { width: 24px; height: 17px; border-radius: 3px; object-fit: cover; box-shadow: 0 0 0 1px rgba(0,0,0,.08); }
.lv2-cc svg { width: 10px; height: 10px; opacity: .55; }
.lv2-phone input { flex: 1; min-width: 0; border: 0; outline: 0; background: none; padding: 0 14px; font-size: 19px; letter-spacing: .6px; font-variant-numeric: tabular-nums; text-align: left; box-shadow: none; }
.lv2-phone input::placeholder { color: var(--lv2-faint); }
.lv2-email { width: 100%; height: 58px; border: 1.5px solid var(--lv2-line); border-radius: 14px; padding: 0 14px; font-size: 17px; direction: ltr; text-align: left; outline: 0; }
.lv2-email:focus { border-color: var(--lv2-ink); }
.lv2-note { font-size: 13.5px; color: var(--lv2-muted); margin-top: 9px; min-height: 22px; line-height: 1.6; }
.lv2-note.err { color: var(--lv2-err); }

.lv2-actions { margin-top: auto; padding-top: 18px; }
.lv2-primary { position: relative; width: 100%; height: 56px; border: 0; border-radius: 14px; background: var(--lv2-brand); color: var(--lv2-brand-ink); font-weight: 700; font-size: 16.5px; cursor: pointer; transition: transform .12s, opacity .15s, filter .15s; }
.lv2-primary:active:not(:disabled) { transform: scale(.985); filter: brightness(.94); }
.lv2-primary:disabled { opacity: .4; cursor: not-allowed; }
.lv2-primary.loading { color: transparent; pointer-events: none; }
.lv2-primary.loading::after { content: ""; position: absolute; inset: 0; margin: auto; width: 22px; height: 22px; border-radius: 50%; border: 2.5px solid rgba(255,255,255,.4); border-top-color: #fff; animation: lv2Spin .7s linear infinite; }
@keyframes lv2Spin { to { transform: rotate(360deg); } }
.lv2-legal { text-align: center; font-size: 12.5px; color: var(--lv2-muted); margin: 14px 0 0; line-height: 1.7; }

/* notices: icon, title, details */
.lv2-notice { display: grid; grid-template-columns: 30px 1fr; gap: 0 12px; border-radius: 16px; padding: 14px 16px; margin-bottom: 18px; border: 1px solid; }
.lv2-notice .ic { width: 30px; height: 30px; border-radius: 50%; display: flex; align-items: center; justify-content: center; grid-row: span 3; }
.lv2-notice .ic svg { width: 15px; height: 15px; }
.lv2-notice b { font-size: 15px; font-weight: 700; display: block; margin: 4px 0; }
.lv2-notice p { margin: 0; font-size: 14px; line-height: 1.75; color: var(--lv2-ink2); }
.lv2-notice .dest { display: inline-block; direction: ltr; font-weight: 600; background: #fff; border: 1px solid; border-radius: 8px; padding: 3px 10px; margin: 6px 0 2px; color: var(--lv2-ink); font-variant-numeric: tabular-nums; }
.lv2-notice small { display: block; font-size: 13px; color: var(--lv2-muted); margin-top: 6px; line-height: 1.7; }
.lv2-notice.ok { background: var(--lv2-ok-bg); border-color: var(--lv2-ok-line); }
.lv2-notice.ok b { color: var(--lv2-ok); }
.lv2-notice.ok .ic { background: var(--lv2-ok); }
.lv2-notice.ok .dest { border-color: var(--lv2-ok-line); }
.lv2-notice.err { background: var(--lv2-err-bg); border-color: var(--lv2-err-line); }
.lv2-notice.err b { color: var(--lv2-err); }
.lv2-notice.err .ic { background: var(--lv2-err); }

.lv2-sentto { display: flex; align-items: center; justify-content: space-between; gap: 10px; background: var(--lv2-field); border-radius: 14px; padding: 0 16px; min-height: 52px; margin-bottom: 20px; font-size: 14px; color: var(--lv2-muted); }
.lv2-sentto b { color: var(--lv2-ink); direction: ltr; unicode-bidi: isolate; font-weight: 600; font-variant-numeric: tabular-nums; margin-inline-start: 6px; word-break: break-all; }
.lv2-sentto button { border: 0; background: none; color: var(--lv2-brand); font-weight: 600; cursor: pointer; padding: 10px 0; }

.lv2-otp { display: flex; gap: 8px; justify-content: space-between; direction: ltr; margin-bottom: 16px; }
.lv2-otp input { width: 100%; max-width: 54px; height: 62px; text-align: center; font-size: 26px; font-weight: 600; border: 1.5px solid var(--lv2-line); border-radius: 14px; outline: 0; font-variant-numeric: tabular-nums; caret-color: var(--lv2-brand); background: #fff; padding: 0; }
.lv2-otp input:focus { border-color: var(--lv2-ink); box-shadow: 0 0 0 4px rgba(22,24,29,.08); }
.lv2-otp.bad input { border-color: var(--lv2-err); background: var(--lv2-err-bg); }
@media (prefers-reduced-motion: no-preference) { .lv2-otp.bad { animation: lv2Nudge .32s; } }
@keyframes lv2Nudge { 25% { transform: translateX(-7px); } 75% { transform: translateX(7px); } }

.lv2-resend { display: flex; justify-content: space-between; align-items: center; font-size: 14px; color: var(--lv2-muted); min-height: 40px; }
.lv2-resend button { border: 0; background: none; color: var(--lv2-brand); font-weight: 600; cursor: pointer; padding: 10px 0; }
.lv2-resend button:disabled { color: var(--lv2-faint); cursor: default; }
.lv2-resend time { direction: ltr; font-variant-numeric: tabular-nums; color: var(--lv2-ink2); font-weight: 600; }

.lv2-help { display: flex; align-items: center; justify-content: center; gap: 6px; margin-top: 14px; font-size: 14px; color: var(--lv2-ink2); min-height: 44px; flex-wrap: wrap; }
.lv2-help a { color: #128C4A; font-weight: 600; text-decoration: none; display: inline-flex; align-items: center; gap: 6px; padding: 10px 0; }
.lv2-help svg { width: 19px; height: 19px; }

.lv2-done { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding-bottom: 40px; }
.lv2-big { width: 84px; height: 84px; border-radius: 50%; background: var(--lv2-ok-bg); color: var(--lv2-ok); display: flex; align-items: center; justify-content: center; margin-bottom: 20px; }
.lv2-big svg { width: 38px; height: 38px; }
@media (prefers-reduced-motion: no-preference) { .lv2-big { animation: lv2Pop .5s var(--lv2-ease); } }
@keyframes lv2Pop { from { transform: scale(.6); opacity: 0; } }

.lv2-sheet { position: absolute; inset: 0; background: #fff; z-index: 10; display: flex; flex-direction: column; }
@media (prefers-reduced-motion: no-preference) { .lv2-sheet:not([hidden]) { animation: lv2Up .3s var(--lv2-ease); } }
@keyframes lv2Up { from { transform: translateY(24px); opacity: 0; } }
.lv2-sheet header { display: grid; grid-template-columns: 48px 1fr 48px; align-items: center; height: 60px; padding: 0 8px; border-bottom: 1px solid var(--lv2-line); }
.lv2-sheet h3 { margin: 0; font-size: 17px; font-weight: 700; text-align: center; }
.lv2-search { padding: 12px 16px; }
.lv2-search input { width: 100%; height: 48px; border: 1px solid var(--lv2-line); border-radius: 12px; padding: 0 14px; font-size: 16px; background: var(--lv2-field); outline: 0; }
.lv2-search input:focus { border-color: var(--lv2-ink); background: #fff; }
.lv2-sheet ul { list-style: none; margin: 0; padding: 0 0 16px; overflow-y: auto; flex: 1; overscroll-behavior: contain; }
.lv2-sheet li.grp { font-size: 13px; color: var(--lv2-muted); padding: 14px 20px 6px; }
.lv2-sheet li.opt { display: flex; align-items: center; gap: 12px; padding: 0 20px; height: 54px; cursor: pointer; font-size: 16px; }
.lv2-sheet li.opt img { width: 26px; height: 19px; border-radius: 3px; object-fit: cover; box-shadow: 0 0 0 1px rgba(0,0,0,.08); }
.lv2-sheet li.opt .code { margin-inline-start: auto; color: var(--lv2-muted); direction: ltr; font-variant-numeric: tabular-nums; }
.lv2-sheet li.opt.sel .code::after { content: "✓"; color: var(--lv2-brand); font-weight: 700; margin-left: 10px; }
.lv2-sheet li.opt:active, .lv2-sheet li.opt.hl { background: var(--lv2-field); }
.lv2-sheet li.none { padding: 28px 20px; color: var(--lv2-muted); text-align: center; font-size: 15px; }

/* the old wrappers around the guest screen add their own spacing */
.modal.lv2-on .login-inner, .modal.lv2-on .login-wrapper { padding: 0; margin: 0; }
.modal.lv2-on .login-inner > p { display: none; }

/* text inputs, locked values, email help, sign-out link */
.lv2-input { width: 100%; height: 56px; border: 1.5px solid var(--lv2-line); border-radius: 14px; padding: 0 14px; font-size: 17px; outline: 0; background: #fff; }
.lv2-input:focus { border-color: var(--lv2-ink); }
.lv2-locked { height: 56px; display: flex; align-items: center; justify-content: flex-start; padding: 0 14px; border-radius: 14px; background: var(--lv2-field); color: var(--lv2-ink2); font-size: 17px; font-weight: 600; font-variant-numeric: tabular-nums; letter-spacing: .4px; }
.lv2-opt { color: var(--lv2-muted); font-weight: 400; }
.lv2-emailhelp { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.lv2-emailhelp:empty { margin-top: 0; }
.lv2-chip { border: 1px solid var(--lv2-line); background: #fff; border-radius: 999px; padding: 7px 13px; font-size: 14px; cursor: pointer; color: var(--lv2-ink2); }
.lv2-chip:active { background: var(--lv2-field); }
.lv2-fix { border: 0; background: #FFF6E5; color: #8A5300; border-radius: 10px; padding: 9px 12px; font-size: 14px; cursor: pointer; text-align: start; width: 100%; }
.lv2-fix b { font-weight: 700; }
.lv2-out { display: block; text-align: center; margin-top: 14px; color: var(--lv2-muted); font-size: 14px; text-decoration: underline; padding: 8px; }
.lv2 .lv2-screen > .lv2-label:not(:first-of-type) { margin-top: 4px; }

/* polish (2026-10-23): calm grey disabled button, larger logo, RTL-aligned locked values */
.lv2-primary:disabled { opacity: 1; background: #E6E8EC; color: #9AA0AA; }
.lv2-logo { height: 36px; }
.lv2[dir="rtl"] .lv2-locked { justify-content: flex-end; }
.lv2-sentto > span { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.lv2-sentto b { margin: 0; }
.lv2 .lv2-primary { color: var(--lv2-brand-ink); letter-spacing: .2px; box-shadow: 0 6px 16px -8px rgba(179,18,26,.55); }
.lv2 .lv2-primary:disabled { color: #9AA0AA; box-shadow: none; }

/* "changed your number? sign in with email" link under the main button */
.lv2 .lv2-switch { display: block; width: 100%; margin-top: 12px; padding: 10px; border: 0; background: none; color: var(--lv2-ink2); font-size: 14.5px; font-weight: 600; text-decoration: underline; text-underline-offset: 4px; cursor: pointer; }
.lv2 .lv2-switch:active { color: var(--lv2-brand); }

/* compact (2026-10-24): a sheet from the bottom on phones, a compact card on computers; never a tall empty screen */
.lv2 { min-height: 0; }
.lv2-bar { height: 54px; }
.lv2-screen { padding: 14px 22px 20px; }
.lv2-title { font-size: 22px; margin-bottom: 6px; }
.lv2-lede { font-size: 14.5px; line-height: 1.7; margin-bottom: 18px; }
.lv2-phone, .lv2-email, .lv2-input, .lv2-locked { height: 52px; }
.lv2-phone input { font-size: 18px; }
.lv2-note { min-height: 18px; margin-top: 7px; }
.lv2-actions { margin-top: 18px; padding-top: 0; }
.lv2-primary { height: 52px; font-size: 16px; }
.lv2-otp input { height: 56px; max-width: 50px; font-size: 24px; }
.lv2-done { padding: 28px 0 32px; }
.lv2:has(.lv2-sheet:not([hidden])) { min-height: 560px; }   /* room for the country list */
@media (max-width: 600px) {
  .modal.lv2-on .modal-dialog { margin: 0; max-width: 100%; min-height: 100%; display: flex; align-items: flex-end; }
  .modal.lv2-on .modal-content { min-height: 0; max-height: 94vh; max-height: 94dvh; overflow-y: auto; border-radius: 22px 22px 0 0; }
  .modal.lv2-on .modal-content::before { content: ""; display: block; width: 40px; height: 4px; border-radius: 4px; background: #D5D8DE; margin: 8px auto 0; }
  .lv2 { min-height: 0; padding-top: 0; }
  .lv2-screen { padding-bottom: calc(18px + env(safe-area-inset-bottom)); }
  .lv2:has(.lv2-sheet:not([hidden])) { min-height: 80vh; min-height: 80dvh; }
}

/* phones (2026-10-24): pin the sheet to the bottom edge so it does not move when the browser bar shows/hides,
   and stop the page behind it (and the modal itself) from scrolling or bouncing */
@media (max-width: 600px) {
  .modal.lv2-on { overflow: hidden !important; overscroll-behavior: none; touch-action: none; }   /* touches outside the sheet do nothing */
  .modal.lv2-on .modal-dialog { position: fixed; left: 0; right: 0; bottom: 0; top: auto; min-height: 0; height: auto; display: block; margin: 0; }
  .modal.lv2-on .modal-content { overscroll-behavior: contain; }
  html:has(.modal.lv2-on.show), body:has(.modal.lv2-on.show) { overflow: hidden; overscroll-behavior: none; }
}
@media (max-width: 600px) {
  .modal.lv2-on .modal-dialog::before { display: none; }                      /* Bootstrap's centering spacer */
  .modal.lv2-on .modal-dialog, .modal.lv2-on.fade .modal-dialog { transform: none !important; transition: none; }
  .modal.lv2-on.show .modal-content { animation: lv2Sheet .32s cubic-bezier(.2,.8,.2,1); }
}
@keyframes lv2Sheet { from { transform: translateY(40px); opacity: .5; } }

/* even spacing between fields: an empty message line takes no room; each label sets the gap above it */
.lv2-note:empty { min-height: 0; margin-top: 0; }
.lv2 .lv2-screen > .lv2-label:not(:first-of-type), .lv2 .lv2-screen > div > .lv2-label { margin-top: 16px; }

/* phones, keyboard up (class set by login-v2.js): compact layout so the title, the field and the button fit above it.
   Error notices keep their text; only the "code sent" notice shrinks to its title (the address is shown below it). */
.modal.lv2-kb .modal-content::before, .modal.lv2-kb .lv2-bar, .modal.lv2-kb .lv2-steps, .modal.lv2-kb .lv2-lede,
.modal.lv2-kb .lv2-legal, .modal.lv2-kb .lv2-help, .modal.lv2-kb .lv2-notice.ok p, .modal.lv2-kb .lv2-notice.ok small { display: none; }
.modal.lv2-kb .lv2-screen { padding-top: 14px; }
.modal.lv2-kb .lv2-title { font-size: 19px; margin-bottom: 10px; }
.modal.lv2-kb .lv2-notice.ok { grid-template-columns: 24px 1fr; align-items: center; padding: 8px 12px; margin-bottom: 10px; }
.modal.lv2-kb .lv2-notice.ok .ic { width: 24px; height: 24px; grid-row: auto; }
.modal.lv2-kb .lv2-notice.ok b { margin: 0; font-size: 14px; }
.modal.lv2-kb .lv2-sentto { min-height: 44px; margin-bottom: 12px; }
.modal.lv2-kb .lv2-otp { margin-bottom: 8px; }
.modal.lv2-kb .lv2-otp input { height: 50px; }
.modal.lv2-kb .lv2-resend { min-height: 34px; }
.modal.lv2-kb .lv2-actions { margin-top: 10px; }

/* field errors (2026-10-24): buttons are never greyed out; a tap with something missing marks that field */
.lv2-email.invalid, .lv2-input.invalid, .lv2-email.invalid:focus, .lv2-input.invalid:focus { border-color: var(--lv2-err); }
.lv2-email.invalid, .lv2-input.invalid { background: var(--lv2-err-bg); }
.lv2-otp.invalid input { border-color: var(--lv2-err); }
.lv2-note.err { color: var(--lv2-err); font-weight: 500; }
@media (prefers-reduced-motion: no-preference) { .lv2-nudge { animation: lv2Nudge .32s; } }