/*
 * The website forgot / reset password pages (task 253, 28 Oct 2026), drawn
 * like the apps' reset screens (driver Android activity_reset_password.xml,
 * passenger iOS ChangePasswordView): back circle, a 22px title and one
 * helper line, 52px boxes with their icon, six code boxes, rule lines that
 * go grey -> red -> green, one full-width button, a red banner for a
 * failure that belongs to no field, and the "Password changed" screen.
 *
 * Self-contained and scoped to .gtr: the rider pages run on Bootstrap 3 with
 * a Barlow Condensed !important rule on every element, the driver pages
 * inside the old .login-box card. Colours come from the site's tokens
 * (layout/theme-vars: --site-color, --gt-accent-*; gotaxi-site.css names
 * for the rest, with the same values as fallbacks where that sheet is not
 * loaded). Label / value: the helper is grey 15px/400; nothing is bold but
 * the title and the button.
 */
.gtr {
    --gtr-ink: var(--gt-ink, #0d1117);
    --gtr-muted: var(--gt-muted, #5f6977);
    --gtr-faint: var(--gt-faint, #8a94a3);
    --gtr-line: var(--gt-line, #e4e7ec);
    --gtr-box: #f6f6f4;
    --gtr-circle: #f4f4f2;
    --gtr-accent: var(--gt-accent-deep, #97690f);
    --gtr-success: #16a34a;
    --gtr-success-ink: var(--gt-success, #147b3b);
    --gtr-success-soft: rgba(22, 163, 74, .12);
    --gtr-danger: #dc2626;
    --gtr-danger-ink: var(--gt-danger, #b91c1c);
    --gtr-danger-soft: rgba(220, 38, 38, .08);
    --gtr-btn: #111111;
    --gtr-btn-ink: #ffffff;
    --gtr-btn-off: #d6d8dc;
    --gtr-btn-off-ink: #6b7280;
    --gtr-focus: var(--gt-focus, 0 0 0 3px rgba(17, 17, 17, .18));
    --gtr-font: var(--gt-font-setting, "Roboto"), ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    display: block;
    width: 100%;
    max-width: 400px;
    margin: 0 auto;
    color: var(--gtr-ink);
    text-align: left;
    box-sizing: border-box;
}
/* The rider layout sets Barlow Condensed on every element with !important. */
html body .gtr,
html body .gtr *:not(svg):not(path):not(rect):not(circle) {
    font-family: var(--gtr-font) !important;
}
.gtr *, .gtr *::before, .gtr *::after { box-sizing: border-box; }
/* asset/css/style.css paints every element (`*`) #000 at weight 300, so
   nothing inherits; inside .gtr everything does again. */
.gtr { font-weight: 400; letter-spacing: normal; }
.gtr * { color: inherit; font-weight: inherit; letter-spacing: inherit; }
.gtr [hidden] { display: none !important; }

.gtr-sr {
    position: absolute !important;
    width: 1px; height: 1px;
    margin: -1px; padding: 0; border: 0;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}

/* The page frame on the rider pages (the driver layout brings its own card). */
.gtr-page {
    min-height: 100vh;
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 72px 16px 40px;
    position: relative;
}
.gtr-page > * { position: relative; }
.gtr-card {
    position: relative;
    width: 100%;
    max-width: 440px;
    background: #fff;
    border-radius: 20px;
    box-shadow: 0 10px 40px rgba(13, 17, 23, .16);
    padding: 16px 20px 28px;
}
.gtr-logo { display: block; margin: 0 auto 20px; }
.gtr-logo img { display: block; width: 72px; height: 72px; object-fit: contain; }

/* Back circle */
.gtr .gtr-back {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    margin: 0 0 12px -4px;
    border-radius: 50%;
    background: var(--gtr-circle);
    color: var(--gtr-ink);
    text-decoration: none;
}
.gtr .gtr-back:focus-visible { outline: none; box-shadow: var(--gtr-focus); }

/* Title and helper */
.gtr .gtr-title {
    margin: 0;
    padding: 0;
    font-size: 22px;
    line-height: 1.25;
    font-weight: 700;
    color: var(--gtr-ink);
    letter-spacing: 0;
    text-transform: none;
}
.gtr .gtr-helper {
    margin: 6px 0 20px;
    font-size: 15px;
    line-height: 1.45;
    font-weight: 400;
    color: var(--gtr-muted);
}
.gtr .gtr-title--centre, .gtr .gtr-helper--centre { text-align: center; }

/* Banner */
.gtr .gtr-banner {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin: 0 0 16px;
    padding: 12px;
    border-radius: 12px;
    font-size: 14px;
    line-height: 1.4;
    font-weight: 400;
}
.gtr .gtr-banner .gtr-icon { flex: 0 0 20px; margin-top: -1px; }
.gtr .gtr-banner--error { border: 1px solid var(--gtr-danger); background: var(--gtr-danger-soft); color: var(--gtr-danger-ink); }
.gtr .gtr-banner--error .gtr-icon { color: var(--gtr-danger); }
.gtr .gtr-banner--success { border: 1px solid var(--gtr-success); background: var(--gtr-success-soft); color: var(--gtr-success-ink); }
.gtr .gtr-banner--success .gtr-icon { color: var(--gtr-success); }
.gtr .gtr-banner--info { border: 1px solid var(--gtr-line); background: var(--gtr-box); color: var(--gtr-ink); }
.gtr .gtr-banner--info .gtr-icon { color: var(--gtr-muted); }

/* Phone / e-mail switch */
.gtr .gtr-tabs {
    display: flex;
    gap: 4px;
    padding: 4px;
    margin: 0 0 16px;
    border-radius: 12px;
    background: var(--gtr-box);
}
.gtr .gtr-tab {
    flex: 1 1 0;
    min-height: 40px;
    border: 0;
    border-radius: 9px;
    background: transparent;
    color: var(--gtr-muted);
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
}
.gtr .gtr-tab[aria-selected="true"] { background: #fff; color: var(--gtr-ink); box-shadow: 0 1px 3px rgba(13, 17, 23, .12); }
.gtr .gtr-tab:focus-visible { outline: none; box-shadow: var(--gtr-focus); }

/* Boxes */
.gtr .gtr-field {
    display: flex;
    align-items: center;
    width: 100%;
    height: 52px;
    padding: 0 4px 0 14px;
    border-radius: 12px;
    background: var(--gtr-box);
    border: 1px solid transparent;
    transition: border-color .12s ease, box-shadow .12s ease;
}
.gtr .gtr-field:focus-within { border-color: var(--gtr-ink); }
.gtr .gtr-field.is-invalid { border-color: var(--gtr-danger); }
.gtr .gtr-field-icon { display: inline-flex; flex: 0 0 20px; margin-right: 10px; color: #a0a3ae; }
.gtr .gtr-field--plain { padding-left: 14px; }
/* A number the country picker wraps shows its flag where the icon would be. */
.gtr .gtr-field:has(.intl-tel-input) { padding-left: 0; }
.gtr .gtr-input,
.gtr .gtr-field input.form-control,
.gtr .gtr-field input {
    flex: 1 1 auto;
    min-width: 0;
    width: 100%;
    height: 100% !important;
    margin: 0 !important;
    padding: 0 8px 0 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    outline: none !important;
    color: var(--gtr-ink) !important;
    font-size: 16px !important;
    line-height: normal;
    font-weight: 400;
}
.gtr .gtr-input::placeholder, .gtr .gtr-field input::placeholder { color: #9a9ca3; opacity: 1; }
.gtr .gtr-field .intl-tel-input { flex: 1 1 auto; min-width: 0; height: 100%; display: flex; }
.gtr .gtr-field .intl-tel-input input { padding-left: 48px !important; }
.gtr .gtr-field .intl-tel-input .flag-container { height: 100%; }
.gtr .gtr-eye {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 44px;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: #6b6e76;
    cursor: pointer;
}
.gtr .gtr-eye:focus-visible { outline: none; box-shadow: var(--gtr-focus); }
.gtr .gtr-eye .gtr-eye-off { display: none; }
.gtr .gtr-eye[data-shown="1"] .gtr-eye-on { display: none; }
.gtr .gtr-eye[data-shown="1"] .gtr-eye-off { display: inline; }
.gtr .gtr-field + .gtr-btn,
.gtr .gtr-field + .gtr-field-error + .gtr-btn { margin-top: 20px; }

.gtr .gtr-field-error {
    margin: 6px 4px 0;
    font-size: 13px;
    line-height: 1.35;
    font-weight: 400;
    color: var(--gtr-danger-ink);
}
.gtr .gtr-field-error--centre { text-align: center; margin: 0 0 12px; }

/* Code boxes: six, flexible so they fit a 260px card at 390px */
.gtr .gtr-code {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin: 0 0 20px;
}
.gtr .gtr-digit {
    flex: 1 1 0;
    min-width: 0;
    max-width: 48px;
    height: 52px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 1px solid #a0a3ae !important;
    border-radius: 10px !important;
    background: #fff !important;
    box-shadow: none !important;
    color: var(--gtr-ink) !important;
    font-size: 20px !important;
    font-weight: 500;
    text-align: center;
    caret-color: var(--gtr-ink);
}
.gtr .gtr-digit:focus { outline: none; border-color: var(--gtr-ink) !important; box-shadow: var(--gtr-focus) !important; }
.gtr .gtr-code.is-invalid .gtr-digit { border-color: var(--gtr-danger) !important; }
.gtr .gtr-code + .gtr-sr + .gtr-otp-plain + .gtr-field-error:not([hidden]) { margin-top: -12px; }
/* Without the script: one plain box, both steps at once, no Continue. */
.gtr:not(.gtr-js) .gtr-code { display: none; }
.gtr:not(.gtr-js) [data-gtr-continue] { display: none; }
.gtr:not(.gtr-js) .gtr-otp-plain {
    display: block;
    height: 52px !important;
    margin: 0 0 20px !important;
    padding: 0 14px !important;
    border-radius: 12px !important;
    background: var(--gtr-box) !important;
    letter-spacing: .3em;
    text-align: center;
}
.gtr.gtr-js .gtr-otp-plain { display: none; }

/* Rule lines */
.gtr .gtr-rule {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 8px 4px 16px;
    font-size: 13px;
    line-height: 1.35;
    font-weight: 400;
    color: var(--gtr-muted);
}
.gtr .gtr-rule-icon { display: none; flex: 0 0 16px; }
.gtr .gtr-rule-icon .gtr-icon { width: 16px; height: 16px; display: block; }
.gtr .gtr-rule[data-state="pending"] .gtr-rule-icon--pending { display: inline-flex; color: #a0a3ae; }
.gtr .gtr-rule[data-state="unmet"] { color: var(--gtr-danger-ink); }
.gtr .gtr-rule[data-state="unmet"] .gtr-rule-icon--unmet { display: inline-flex; color: var(--gtr-danger); }
.gtr .gtr-rule[data-state="met"] { color: var(--gtr-success-ink); }
.gtr .gtr-rule[data-state="met"] .gtr-rule-icon--met { display: inline-flex; color: var(--gtr-success); }

/* Buttons */
.gtr .gtr-btn {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 52px;
    margin: 0;
    padding: 0 16px;
    border: 0;
    border-radius: 12px;
    background: var(--gtr-btn);
    color: var(--gtr-btn-ink);
    font-size: 16px;
    font-weight: 600;
    line-height: 1;
    text-transform: none;
    cursor: pointer;
    transition: background-color .12s ease, opacity .12s ease;
}
.gtr .gtr-btn:focus-visible { outline: none; box-shadow: 0 0 0 3px #fff, 0 0 0 5px var(--gtr-btn); }
.gtr .gtr-btn:disabled { background: var(--gtr-btn-off); color: var(--gtr-btn-off-ink); cursor: not-allowed; }
.gtr .gtr-btn--submit { margin-top: 24px; }
.gtr .gtr-btn .gtr-spinner { display: none; }
.gtr .gtr-btn.is-busy .gtr-btn-label { visibility: hidden; }
.gtr .gtr-btn.is-busy .gtr-spinner {
    display: block;
    position: absolute;
    width: 22px; height: 22px;
    border-radius: 50%;
    border: 2.5px solid rgba(255, 255, 255, .35);
    border-top-color: #fff;
    animation: gtr-spin .8s linear infinite;
}
.gtr .gtr-btn.is-busy:disabled { background: var(--gtr-btn); }
@keyframes gtr-spin { to { transform: rotate(360deg); } }

.gtr .gtr-links {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-top: 8px;
}
.gtr .gtr-link {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 0 4px;
    border: 0;
    background: transparent;
    color: var(--gtr-accent);
    font-size: 15px;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
}
.gtr .gtr-link:disabled { color: var(--gtr-muted); font-weight: 500; cursor: default; text-decoration: none; }
.gtr .gtr-link:focus-visible { outline: none; box-shadow: var(--gtr-focus); border-radius: 6px; }
.gtr .gtr-foot { margin: 16px 0 0; font-size: 14px; color: var(--gtr-muted); text-align: center; }
.gtr .gtr-foot a { color: var(--gtr-accent); font-weight: 600; }

.gtr .gtr-gap { height: 16px; }
.gtr .gtr-step + .gtr-step { margin-top: 32px; }
.gtr.gtr-js .gtr-step + .gtr-step { margin-top: 0; }

/* Done */
.gtr-done-layer {
    position: fixed;
    inset: 0;
    z-index: 2147482000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    background: rgba(13, 17, 23, .45);
    overflow-y: auto;
}
.gtr-done-layer[hidden] { display: none; }
html.gtr-done-open { overflow: hidden; }
.gtr.gtr-done {
    max-width: 400px;
    padding: 40px 24px 24px;
    border-radius: 20px;
    background: #fff;
    box-shadow: 0 20px 60px rgba(13, 17, 23, .25);
    text-align: center;
}
.gtr .gtr-done-mark {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 88px;
    height: 88px;
    margin: 0 auto 20px;
    border-radius: 50%;
    background: var(--gtr-success-soft);
    color: var(--gtr-success);
}
.gtr .gtr-done-mark .gtr-icon { width: 48px; height: 48px; }
.gtr.gtr-done .gtr-helper { margin-bottom: 28px; }
.gtr .gtr-btn--dark { background: #000; color: #fff; }

/* Hover only where there is a pointer that hovers (a tap leaves :hover stuck). */
@media (hover: hover) {
    .gtr .gtr-back:hover { background: #ebebe8; color: var(--gtr-ink); }
    .gtr .gtr-btn:not(:disabled):hover { background: #2a2a2a; color: var(--gtr-btn-ink); }
    .gtr .gtr-btn--dark:not(:disabled):hover { background: #1f1f1f; }
    .gtr .gtr-link:not(:disabled):hover { text-decoration: underline; color: var(--gtr-accent); }
}

/* The driver layout's card: no second frame inside it. */
.login-box .gtr { padding: 0; }

@media (max-width: 480px) {
    .gtr-page { padding: 64px 16px 32px; justify-content: flex-start; }
    .gtr-card { padding: 12px 16px 24px; border-radius: 18px; }
    .gtr .gtr-code { gap: 6px; }
}

@media (prefers-reduced-motion: reduce) {
    .gtr .gtr-btn.is-busy .gtr-spinner { animation-duration: 2.4s; }
}