/* auth_mobile_v2 (mobile-fixes Part D + the 16 px input fix). Loaded on every page only
   when the switch is on (mfix_head()). Desktop auth (>= 1024 px) keeps its layout: the layout
   rules sit inside the 1023 px query; only the password label row, eye and hint apply at every width. Selectors start with "html body" so they win
   over app.css and wom.css (which load in a different order), and !important appears only
   where the rule being replaced uses it. */

/* ---- Every input on every page gets 16 px text, so iPhones never zoom in. ---- */
html body input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]),html body select,html body textarea,
html body .dispute-side input[type=file],html body .rfx-link input,html body .quick-sharebox input,html body .bld-domain-input,
html body .nt-more textarea,html body .nt-codeline select,html body .nt-codeline input,html body .dispute-side textarea,
html body .rfx-kit-item textarea,html body .rfx-apply textarea{font-size:16px}
/* Inputs that are meant to be big keep their own size. They repeat the :not() chain above so
   they are more specific than it: without it, the rule above won and the new-trade price was
   16 px next to a 44 px euro sign, and the home calculator 16 px instead of 24 px. */
html body .nt-money input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]){font-size:72px}
@media (max-width:760px){html body .nt-money input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]){font-size:54px}}
html body .price-amount input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]){font-size:24px}

/* Every width (5 Oct hotfix): the password label row, the eye and the rule hint used to be phone-only,
   so on desktop the Password label and the gap above it disappeared. The short label ("Password")
   shows everywhere now, since the hint under the field states the rule. */
.auth-lab-d{display:none}
.auth-pw{display:block;position:relative}
/* Password: the eye inside the input, the rule hint under it. */
html body .auth-pw input{padding-right:52px}
html body .auth-eye{display:grid;place-items:center;position:absolute;right:4px;top:50%;width:44px;height:44px;margin-top:-22px;
  padding:0;border:0;border-radius:12px;background:none;color:var(--sub);cursor:pointer}
html body .auth-eye.is-on{color:var(--ink)}
html body .auth-eye:focus-visible{outline:3px solid rgba(14,20,23,.25);outline-offset:0}
html body .auth-hint{display:flex;align-items:center;gap:6px;margin:8px 0 0;font-size:13px;line-height:1.4;color:var(--sub)}
html body .auth-hint svg{display:none}
html body .auth-hint.is-met{color:var(--teal-ink)}
html body .auth-hint.is-met svg{display:block}
/* Login: "Forgot password?" sits right-aligned on the password label's row. */
html body .auth-labrow{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin:20px 0 8px}
html body .auth-labrow label,html body .auth-split-form-in .auth-labrow label{margin:0}
html body .auth-forgot-m{font-size:14px;font-weight:600;color:var(--ink);text-decoration:underline;text-underline-offset:3px}
/* Consent boxes on desktop: the site-wide 44 px input height drew the tick box in the middle of a
   44 px element, below the first line of text. Sized to that line instead; phones have their own rule below. */
html body .auth-consent{align-items:flex-start}
html body .auth-consent input[type=checkbox]{flex:none;width:18px;height:18px;min-height:0;margin:1px 0 0;padding:0}

@media (max-width:1023px){
  /* ---- Layout: the field card on top, the form on paper below. ---- */
  html body.bare{background:var(--paper-2,#FAFBFC)}
  html body.bare main{display:block}
  html body .auth-split{display:flex;flex-direction:column;position:relative;width:auto;min-height:0;margin:0;padding:0;
    border-radius:0;overflow:visible;clip-path:none;-webkit-transform:none;transform:none;background:none;box-shadow:none}
  html body .auth-split>.bh-grain-split{display:none}

  /* The card: 10 px from the edges (plus the top safe area), the home card's 24 px radius. */
  html body .auth-split-visual{order:-1;flex:none;display:flex;align-items:flex-end;justify-content:flex-start;
    margin:calc(10px + env(safe-area-inset-top)) 10px 0;padding:78px 12px 12px;height:auto;min-height:220px;max-height:none;
    border-radius:24px;overflow:hidden;isolation:isolate;clip-path:inset(0 round 24px);
    background:#5b4a43 url('/assets/bonfihero/auth-flat.webp') center/cover no-repeat!important}
  /* Desktop's light scrim: the quote sits on its own tinted glass, as on desktop. */
  html body .auth-split-visual::after{display:block;content:'';position:absolute;inset:0;z-index:1;
    background:linear-gradient(180deg,rgba(20,10,10,.08) 0%,rgba(20,10,10,.22) 100%)}
  html body .auth-split-visual .bh-grain{display:block;z-index:2}
  /* The whole quote and the name in the tinted liquid-glass sheet, exactly as on desktop. */
  html body .auth-quote{position:relative;z-index:3;width:100%;max-width:none;margin:0;padding:22px 22px 20px;border-radius:20px;
    background:rgba(18,14,14,.5);border:1px solid rgba(255,255,255,.16);
    -webkit-backdrop-filter:blur(20px) saturate(1.3);backdrop-filter:blur(20px) saturate(1.3);
    box-shadow:0 30px 60px -24px rgba(0,0,0,.5),inset 0 1px 0 rgba(255,255,255,.14)}
  html body .auth-quote p{margin:0;font-weight:500;font-size:19px;line-height:1.42;letter-spacing:-.02em;color:#fff;display:block;overflow:visible}
  html body .auth-quote .aq-rest{display:inline}
  html body .auth-quote cite{display:block;margin-top:16px;font-style:normal;font-size:13px;font-weight:600;letter-spacing:.02em;text-transform:none;color:rgba(255,255,255,.72)}

  /* The logo: small, white, top-left on the card, where the home header puts it. */
  html body .auth-split-form,html body .auth-split-form-in{position:static}
  html body .auth-split-form-in a.auth-split-logo,html body .auth-split-logo{position:absolute;z-index:4;top:calc(17px + env(safe-area-inset-top));left:-4px;width:auto;margin:0;color:#fff!important}
  html body .auth-split-logo svg{width:156px;height:auto}

  /* The form on paper. */
  html body .auth-split-form{flex:none;display:block;max-width:none;min-height:0;padding:28px 20px calc(32px + env(safe-area-inset-bottom));background:none}
  html body .auth-split-form-in{max-width:520px;width:auto;margin:0 auto;padding:0;background:none;border-radius:0;box-shadow:none;z-index:auto}
  html body .auth-split-form-in h1{margin:0;font-family:var(--ff-display);font-weight:400;font-size:30px;line-height:1.1;letter-spacing:-.04em;color:var(--ink)}
  html body .auth-split-form-in>.sub,html body .auth-split-form-in .sub{color:var(--sub)}
  html body .auth-split-form-in>p.sub:first-of-type{margin:8px 0 24px;font-size:15px;line-height:1.5}
  html body .auth-split-form-in a{color:var(--ink)!important}
  html body .auth-split-form-in label{display:block;margin:20px 0 8px;font-size:14px;font-weight:600;color:var(--ink);text-transform:none;letter-spacing:0}
  html body .auth-split-form-in form>label:first-of-type,html body .auth-split-form-in form>.auth-labrow:first-child{margin-top:0}

  /* Inputs: 52 px, a soft fill, no black border. */
  html body .auth-split-form-in input:not([type=checkbox]):not([type=radio]),html body .auth-split-form-in select{
    height:52px;min-height:52px;padding:0 16px;background:#F4F6F8;border:1px solid transparent;border-radius:14px;
    font-size:16px;color:var(--ink);box-shadow:none;transition:background .15s,border-color .15s,box-shadow .15s}
  html body .auth-split-form-in input::placeholder{color:var(--sub)}
  html body .auth-split-form-in input:hover{border-color:transparent}
  html body .auth-split-form-in input:focus,html body .auth-split-form-in select:focus{outline:0;background:#fff;border-color:var(--ink);box-shadow:0 0 0 4px rgba(14,20,23,.08)}
  html body .auth-split-form-in input:user-invalid{border-color:var(--coral-ink)}
  html body .auth-split-form-in input:disabled{opacity:.5}
  html body .auth-split-form-in input:-webkit-autofill{-webkit-box-shadow:0 0 0 100px #F4F6F8 inset;-webkit-text-fill-color:var(--ink);caret-color:var(--ink)}
  html body .auth-split-form-in input:-webkit-autofill:focus{-webkit-box-shadow:0 0 0 100px #fff inset,0 0 0 4px rgba(14,20,23,.08)}
  /* The phone code keeps its big spaced digits, in the new box. */
  html body #pl-code,html body #pv-code{height:56px}


  /* Referral: a text link, not a box; open (and filled) when a code came with the visit. */
  html body .reg-ref{margin-top:16px;padding:0;border:0;border-radius:0;background:none}
  html body .reg-ref summary{display:flex;align-items:center;min-height:44px;font-size:14px;font-weight:600;color:var(--ink)}
  html body .reg-ref summary::before{content:'+\00a0';color:var(--ink);font-weight:600}
  html body .reg-ref[open] summary::before{content:'\2013\00a0'}
  html body .reg-ref input{margin-top:4px}
  html body .reg-ref .sub{margin-top:8px;font-size:13px}

  /* Terms: a 22 px box with a 44 px tap area. */
  html body .auth-split-form-in .auth-consent{display:flex;align-items:flex-start;gap:12px;min-height:44px;margin-top:16px;padding:10px 0;
    font-size:14px;line-height:1.45;color:var(--ink-2)}
  html body .auth-split-form-in .auth-consent input{appearance:none;-webkit-appearance:none;flex:none;width:22px;height:22px;min-height:0;margin:0;padding:0;
    border:1.5px solid var(--line-2);border-radius:6px;background:#fff center/14px no-repeat;cursor:pointer}
  html body .auth-split-form-in .auth-consent input:checked{background-color:var(--ink);border-color:var(--ink);
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 8.5 6.5 11.5 12.5 4.5'/%3E%3C/svg%3E")}
  html body .auth-split-form-in .auth-consent input:focus-visible{outline:3px solid rgba(14,20,23,.25);outline-offset:2px}
  html body .auth-split-form-in .auth-consent a{text-decoration:underline;font-weight:600}

  /* The main button: an ink pill, full width; a spinner while it submits. */
  html body .auth-split-form-in .btn.dark{width:100%;min-height:52px;height:52px;margin-top:24px!important;background:var(--ink);color:#fff;border:0;box-shadow:none;font-size:16px;font-weight:600}
  html body .auth-split-form-in .btn.dark:hover{background:#000}
  html body .auth-split-form-in .btn.dark:focus-visible{outline:3px solid rgba(14,20,23,.25);outline-offset:2px;box-shadow:none}
  html body .auth-split-form-in .btn.dark.is-busy{position:relative;color:transparent;pointer-events:none}
  html body .auth-split-form-in .btn.dark.is-busy::after{content:'';position:absolute;left:50%;top:50%;width:20px;height:20px;margin:-10px 0 0 -10px;
    border:2px solid rgba(255,255,255,.35);border-top-color:#fff;border-radius:50%;animation:auth2-spin .8s linear infinite}
  @keyframes auth2-spin{to{transform:rotate(360deg)}}

  /* "or", the other ways in as outline pills, then the switch link. */
  html body .auth-split-form-in .alt-or{margin:24px 0 16px;font-size:13px;color:var(--sub)}
  html body .auth-split-form-in .alt-or::before,html body .auth-split-form-in .alt-or::after{background:var(--line)}
  html body .auth-split-form-in .alt-btn{min-height:52px;margin-top:10px;background:#fff;color:var(--ink)!important;border:1px solid var(--line-2);border-radius:999px;
    -webkit-backdrop-filter:none;backdrop-filter:none;box-shadow:none;font-size:16px;font-weight:600}
  html body .auth-split-form-in .alt-btn:hover{background:var(--paper-3,#F4F6F8)}
  html body .auth-split-form-in .alt-in+p.sub{margin-top:24px!important;text-align:center;font-size:14px;color:var(--ink-2)}
  html body .auth-split-form-in .alt-in+p.sub a{border-bottom:0!important;font-weight:600!important;color:var(--ink)!important;text-decoration:underline;text-underline-offset:3px}

  /* The saved-trade note: one 14 px line under the subline, no box. */
  html body .auth-split-form-in .draft-note{margin:-12px 0 20px;padding:0;background:none;border:0;font-size:14px;line-height:1.45;color:var(--ink-2)}
  html body .auth-split-form-in .draft-note svg{display:none}
  html body .auth-split-form-in .draft-note b,html body .auth-split-form-in .draft-note span{display:inline;color:var(--ink-2);font-size:14px}
  html body .auth-split-form-in .draft-note b{font-weight:600;color:var(--ink)}
  html body .auth-split-form-in .draft-note b::after{content:' · '}
  /* The page-level error (the server's message) reads as an error, not a gold notice. */
  html body .auth-split-form-in .mode{margin:0 0 16px;padding:12px 14px;border-radius:14px;background:#fff;border:1px solid var(--coral-ink);color:var(--coral-ink)!important;font-size:14px}
  html body .auth-split-form-in .link-btn{min-height:44px}
}
/* Narrow phones: the quote a size down so it stays within three lines. */
@media (max-width:380px){html body .auth-quote p{font-size:17px}}
/* Short screens (an iPhone with Safari's bars showing is under 680 px tall) keep the quote and the
   name too: the card stays at its normal size and the form scrolls under it. */
@media (prefers-reduced-motion:reduce){html body .auth-split-form-in .btn.dark.is-busy::after{animation-duration:2s}}