/* Sign-in before a new ride, Bolt-style: Apple, Google, Facebook or the phone number. */
.login-gate{position:fixed;inset:0;width:100%;height:100%;max-width:none;max-height:none;margin:0;padding:0;border:0;background:#fff;color:#1b1f1d;overflow-y:auto;overscroll-behavior:contain}
.login-gate::backdrop{background:#fff}
.login-gate:focus{outline:none}
.login-gate[open]{animation:gate-fade .2s ease-out}
.login-gate[open] .gate{animation:gate-rise .32s cubic-bezier(.2,.8,.2,1)}
@keyframes gate-fade{from{opacity:0}}
@keyframes gate-rise{from{transform:translateY(14px)}}
html:has(.login-gate[open]){overflow:hidden}
.gate{display:flex;flex-direction:column;min-height:100%;max-width:460px;margin:0 auto;padding:calc(8px + env(safe-area-inset-top,0px)) max(20px,env(safe-area-inset-right,0px)) calc(24px + env(safe-area-inset-bottom,0px)) max(20px,env(safe-area-inset-left,0px))}
.gate-bar{display:flex;align-items:center;justify-content:space-between;min-height:48px;margin:0 -10px 8px}
.gate-icon{display:grid;place-items:center;width:44px;height:44px;padding:0;border:0;border-radius:50%;background:none;color:#1b1f1d}
.gate-icon:hover{background:#f0f1f0}
/* A touch screen has no keyboard focus to follow, and Safari can still land its first focus here. */
@media(pointer:coarse){.login-gate .gate-icon:focus-visible{outline:none}}
.gate-icon .ui-icon{width:24px;height:24px;stroke-width:2}
.gate-promo{display:flex;align-items:center;gap:12px;margin:0;padding:12px 16px 12px 12px;border:1px solid #d3ecdc;border-radius:18px;background:#eaf6ef;color:#134e31}
.gate-promo-icon{display:grid;place-items:center;flex:none;width:40px;height:40px;border-radius:50%;background:#2b875b;color:#fff}
.gate-promo-icon .ui-icon{width:21px;height:21px;stroke-width:2}
.gate-promo strong{display:block;font-size:15.5px;font-weight:800;line-height:1.3;letter-spacing:-.2px}
.gate-promo small{display:block;margin-top:2px;color:#3b7556;font-size:12.5px;font-weight:600}
.gate-body{display:flex;flex:1;flex-direction:column;justify-content:center;padding:22px 0 4px}
.gate-step form{position:relative}
.login-gate h2{max-width:380px;margin:0 auto 22px;color:#1b1f1d;font-size:clamp(25px,7vw,29px);font-weight:800;line-height:1.2;letter-spacing:-.8px;text-align:center}

/* Providers: white pills, logo on the left, label centred. */
.gate-providers{display:grid;gap:14px}
.gate-provider{position:relative;display:flex;align-items:center;justify-content:center;width:100%;min-height:58px;padding:0 50px;border:1.5px solid #e2e4e3;border-radius:999px;background:#fff;color:#1b1f1d;font-size:18px;font-weight:600;letter-spacing:-.2px;transition:background .15s,border-color .15s}
.gate-provider:hover{border-color:#d2d6d3;background:#f8f9f8}
.gate-provider:active{background:#f0f1f0}
.gate-provider svg{position:absolute;top:50%;left:22px;width:24px;height:24px;transform:translateY(-50%)}
.gate-provider span{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.gate-or{display:flex;align-items:center;gap:18px;margin:24px 0 22px;color:#5f6461;font-size:16px;font-weight:500}
.gate-or::before,.gate-or::after{content:"";flex:1;height:1px;background:#e6e8e7}

/* Phone number: country picker (a native select over the visual) and the number. */
.gate-phone{display:flex;gap:8px}
.gate-country{position:relative;display:flex;flex:none;align-items:center;gap:9px;height:58px;padding:0 12px 0 14px;border-radius:14px;background:#f0f1f0;color:#1b1f1d;font-size:19px;font-weight:500;cursor:pointer}
.gate-country .ui-icon{width:18px;height:18px;color:#5f6461;stroke-width:2.2}
.gate-country select{position:absolute;inset:0;width:100%;height:100%;opacity:0;border:0;font-size:16px;cursor:pointer;-webkit-appearance:none;appearance:none}
.gate-input{display:block;width:100%;min-width:0;height:56px;padding:0 16px;border:0;border-radius:14px;background:#f0f1f0;color:#1b1f1d;font:inherit;font-size:17px;font-weight:600;-webkit-appearance:none;appearance:none}
.gate-phone .gate-input{flex:1;height:58px;font-size:20px;font-weight:500;letter-spacing:.3px}
.gate-input::placeholder{color:#9a9f9c;font-weight:500}
.gate-country:focus-within,.login-gate .gate-input:focus{outline:none;box-shadow:inset 0 0 0 2px #2b875b}
.login-gate .gate-input[aria-invalid=true]{box-shadow:inset 0 0 0 2px #c24141}

/* Round flags: drawn in CSS where stripes do (Windows has no flag emoji), emoji otherwise. */
.gate-flag{display:grid;flex:none;place-items:center;width:24px;height:24px;overflow:hidden;border-radius:50%;box-shadow:inset 0 0 0 1px #00000017;font-size:34px;line-height:1}
.gate-flag:is([data-iso=FR],[data-iso=BE],[data-iso=IT],[data-iso=DE],[data-iso=NL],[data-iso=LU],[data-iso=MC],[data-iso=ES],[data-iso=PT],[data-iso=CH],[data-iso=AE]){font-size:0}
.gate-flag[data-iso=FR]{background:linear-gradient(90deg,#002395 0 33.4%,#fff 0 66.6%,#ed2939 0)}
.gate-flag[data-iso=BE]{background:linear-gradient(90deg,#000 0 33.4%,#fdda24 0 66.6%,#ef3340 0)}
.gate-flag[data-iso=IT]{background:linear-gradient(90deg,#009246 0 33.4%,#fff 0 66.6%,#ce2b37 0)}
.gate-flag[data-iso=DE]{background:linear-gradient(#000 0 33.4%,#dd0000 0 66.6%,#ffce00 0)}
.gate-flag[data-iso=NL]{background:linear-gradient(#ae1c28 0 33.4%,#fff 0 66.6%,#21468b 0)}
.gate-flag[data-iso=LU]{background:linear-gradient(#ed2939 0 33.4%,#fff 0 66.6%,#00a1de 0)}
.gate-flag[data-iso=MC]{background:linear-gradient(#ce1126 0 50%,#fff 0)}
.gate-flag[data-iso=ES]{background:linear-gradient(#aa151b 0 25%,#f1bf00 0 75%,#aa151b 0)}
.gate-flag[data-iso=PT]{background:radial-gradient(circle at 40% 50%,#ffe000 0 16%,#0000 17%),linear-gradient(90deg,#006600 0 40%,#ff0000 0)}
.gate-flag[data-iso=CH]{background:linear-gradient(#fff,#fff) center/58% 19% no-repeat,linear-gradient(#fff,#fff) center/19% 58% no-repeat,#da291c}
.gate-flag[data-iso=AE]{background:linear-gradient(90deg,#ef3340 0 30%,#0000 0),linear-gradient(#00843d 0 33.4%,#fff 0 66.6%,#000 0)}

.gate-cta{display:flex;align-items:center;justify-content:center;width:100%;min-height:58px;margin-top:16px;padding:0 20px;border:0;border-radius:999px;background:#2b875b;color:#fff;font-size:20px;font-weight:800;letter-spacing:-.2px;transition:background .15s}
.gate-cta:hover{background:#1f6b45}
#gate-signup-form .gate-cta{font-size:18px}
.login-gate button:disabled{opacity:.6;cursor:wait}
.gate-legal{margin:20px 0 0;color:#6b706d;font-size:13px;line-height:1.55;text-align:center}
.gate-legal a{color:#1f7a4a;font-weight:600;text-decoration:underline;text-underline-offset:2px}
.gate-error{margin:14px 0 0;padding:12px 14px;border-radius:14px;background:#fdeeee;color:#9b2c2c;font-size:14px;font-weight:650;line-height:1.45}
.gate-note{margin:12px 0 0;padding:12px 14px;border-radius:14px;background:#eaf6ef;color:#1f5c3c;font-size:14px;font-weight:600;line-height:1.45}
.gate-link{display:block;min-height:44px;margin:12px auto 0;padding:0 12px;border:0;background:none;color:#1f7a4a;font-size:16px;font-weight:700}
.gate-link:hover{text-decoration:underline}

/* Password, provider and sign-up steps. */
.gate-sub{display:flex;flex-direction:column;align-items:center;gap:10px;margin:-6px 0 24px;text-align:center}
.gate-text{margin:-6px 0 24px;color:#5f6461;font-size:16px;line-height:1.5;text-align:center}
.gate-chip{display:inline-flex;align-items:center;gap:8px;max-width:100%;padding:7px 15px 7px 8px;border-radius:999px;background:#f0f1f0;color:#1b1f1d;font-size:16px;font-weight:700;letter-spacing:.2px}
.gate-chip .gate-flag{width:22px;height:22px;font-size:31px}
.gate-chip:has(.gate-flag[hidden]){padding-left:15px}
.gate-gift{color:#1f7a4a;font-size:15px;font-weight:700}
.gate-label{display:block;margin-top:16px;color:#3e4441;font-size:14px;font-weight:700}
.gate-label:first-of-type{margin-top:0}
.gate-label>.gate-input,.gate-secret{margin-top:7px}
.gate-hint{color:#8a8f8c;font-weight:600}
.gate-secret{position:relative;display:block}
.gate-secret .gate-input{padding-right:100px}
.gate-reveal{position:absolute;top:50%;right:8px;min-height:42px;padding:0 12px;border:0;border-radius:10px;background:none;color:#1f7a4a;font-size:14px;font-weight:800;transform:translateY(-50%)}
.gate-username{position:absolute;top:0;left:0;width:1px;height:1px;padding:0;border:0;opacity:0;pointer-events:none}

/* Installed on an iPhone the clock is white: darken its band, as on the pages. */
@media(display-mode:standalone){.login-gate::before{content:"";position:fixed;z-index:1;top:0;right:0;left:0;height:env(safe-area-inset-top,0px);background:linear-gradient(#00000052,#0000);pointer-events:none}}
@media(max-height:700px){.gate-body{padding-top:20px}.gate-providers{gap:10px}.gate-provider,.gate-cta{min-height:54px}.gate-country,.gate-phone .gate-input{height:54px}.gate-or{margin:20px 0 18px}.login-gate h2{margin-bottom:16px}}
@media(max-width:350px){.gate-provider{padding:0 44px;font-size:16px}.gate-provider svg{left:18px}.gate-phone .gate-input{font-size:18px}.gate-country{padding:0 10px}.gate-cta{padding:0 14px}#gate-signup-form .gate-cta{font-size:16px}}
@media(prefers-reduced-motion:reduce){.login-gate[open],.login-gate[open] .gate{animation:none}}