/* =====================================================================
   Log in / sign up drawer (Views/Shared/_AuthDrawerMarkup.cshtml, behaviour in js/auth-drawer.js).
   A native <dialog>: slides in from the right at the panel's old width (460px), a bottom sheet on phones.
   Same tokens as the renewed login and sign up pages (css/auth-ui.css): Plus Jakarta Sans, cyan to blue accent, hairline borders.
   Light and dark through [data-bs-theme]. Motion is transform and opacity only, so nothing reflows while it opens.
   ===================================================================== */
.adr {
    --adr-a: #0891b2; --adr-b: #2563eb; --adr-btn-a: #0e7490; --adr-btn-b: #1d4ed8; --adr-glow: 8, 145, 178;
    --adr-ink: #0f1b2d; --adr-body: #46566b; --adr-muted: #64748b;
    --adr-card: #ffffff; --adr-field: #f3f8fb; --adr-line: rgba(20, 90, 140, .18); --adr-soft: rgba(8, 145, 178, .09); --adr-err: #b91c1c;
    --adr-ease: cubic-bezier(.22, 1, .36, 1);
    color-scheme: light;
}
[data-bs-theme="dark"] .adr {
    --adr-a: #22d3ee; --adr-b: #3b82f6; --adr-glow: 34, 211, 238;
    --adr-ink: #eef7ff; --adr-body: #b4c6d9; --adr-muted: #8aa0b8;
    --adr-card: #0a1628; --adr-field: #0e1d33; --adr-line: rgba(110, 190, 230, .22); --adr-soft: rgba(34, 211, 238, .10); --adr-err: #f87171;
    color-scheme: dark;
}

/* ---------- the drawer ---------- */
dialog.adr {
    position: fixed; inset: 0 0 0 auto; margin: 0; padding: 0; border: 0; overflow: hidden;
    width: min(460px, 100%); max-width: 100%; height: 100dvh; max-height: none;
    display: none; flex-direction: column;
    background: var(--adr-card); color: var(--adr-body);
    font-family: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', sans-serif; -webkit-font-smoothing: antialiased;
    box-shadow: -24px 0 60px -28px rgba(8, 40, 80, .45), -1px 0 0 var(--adr-line);
    transform: translate3d(100%, 0, 0); will-change: transform;
    transition: transform .42s var(--adr-ease);
}
dialog.adr[open] { display: flex; }
dialog.adr.is-in { transform: none; }
dialog.adr::backdrop { background: rgba(8, 24, 48, .42); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); opacity: 0; transition: opacity .3s ease; }
dialog.adr.is-in::backdrop { opacity: 1; }
.adr *, .adr *::before, .adr *::after { box-sizing: border-box; }
/* the page behind stays put: the scrollbar's space is kept while the page is locked, so the floating header does not shift */
html.adr-lock { overflow: hidden; scrollbar-gutter: stable; }

.adr-grab { display: none; }
/* the legacy openLogin / OpenSignup set an inline width: 460px on the pane; the pane always fills the drawer instead */
.adr-pane { width: 100% !important; max-width: 100%; flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 22px 28px 28px; scrollbar-width: thin; }
.adr-pane.is-swap { animation: adr-pane .32s var(--adr-ease); }
@keyframes adr-pane { from { opacity: 0; transform: translateY(8px); } }

/* ---------- top row: the header's logo, a close button ---------- */
.adr-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 18px; }
.adr-logo { display: inline-flex; align-items: center; }
.adr-logo img { height: 32px; width: auto; display: block; }
.adr-logo__d { display: none !important; }
[data-bs-theme="dark"] .adr-logo__l { display: none !important; }
[data-bs-theme="dark"] .adr-logo__d { display: block !important; }
.adr-x { display: grid; place-items: center; width: 36px; height: 36px; padding: 0; border: 1px solid var(--adr-line); border-radius: 50%; background: var(--adr-field); color: var(--adr-body); cursor: pointer; transition: transform .25s var(--adr-ease), color .2s, border-color .2s; }
.adr-x svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; }
.adr-x:hover { color: var(--adr-a); border-color: var(--adr-a); transform: rotate(90deg); }

/* ---------- Log in | Sign up switch, heading ---------- */
.adr-seg { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 4px; margin-bottom: 18px; border: 1px solid var(--adr-line); border-radius: 12px; background: var(--adr-field); }
.adr-seg button { height: 34px; border: 0; border-radius: 9px; background: transparent; color: var(--adr-muted); font: inherit; font-size: .875rem; font-weight: 700; cursor: pointer; transition: background .25s, color .25s, box-shadow .25s; }
.adr-seg button.on { background: var(--adr-card); color: var(--adr-ink); box-shadow: 0 1px 2px rgba(8, 40, 80, .12), 0 0 0 1px var(--adr-line); cursor: default; }
.adr-seg button:not(.on):hover { color: var(--adr-ink); }
.adr-h { margin: 0 0 4px; font-size: 1.5rem; font-weight: 800; line-height: 1.2; letter-spacing: -.02em; color: var(--adr-ink); }
.adr-sub { margin: 0 0 18px; font-size: .875rem; line-height: 1.5; color: var(--adr-muted); }

/* ---------- fields ---------- */
.adr-form { display: block; margin: 0; }
.adr-fld { margin-bottom: 12px; }
.adr-fld > label:not(.error) { display: block; margin-bottom: 6px; font-size: .8125rem; font-weight: 700; color: var(--adr-ink); }
.adr-ctl { position: relative; display: flex; align-items: center; }
.adr-ctl > svg { position: absolute; left: 14px; width: 17px; height: 17px; fill: none; stroke: var(--adr-muted); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; pointer-events: none; }
.adr input, .adr select {
    width: 100%; height: 44px; padding: 0 14px 0 42px; margin: 0; border: 1px solid var(--adr-line); border-radius: 12px; box-shadow: none;
    background-color: var(--adr-field); color: var(--adr-ink); font: inherit; font-size: .9375rem; outline: 0;
    transition: border-color .2s, box-shadow .2s, background-color .2s;
}
.adr .adr-ctl--plain input { padding-left: 14px; }
.adr .adr-ctl--eye input { padding-right: 44px; }
.adr input::placeholder { color: var(--adr-muted); opacity: .85; }
.adr input:hover, .adr select:hover { border-color: rgba(var(--adr-glow), .5); }
.adr input:focus, .adr select:focus { border-color: var(--adr-a); background-color: var(--adr-card); box-shadow: 0 0 0 4px rgba(var(--adr-glow), .16); }
.adr input.error, .adr select.error { border-color: var(--adr-err); }
.adr input:-webkit-autofill, .adr input:-webkit-autofill:focus { -webkit-text-fill-color: var(--adr-ink); caret-color: var(--adr-ink); -webkit-box-shadow: 0 0 0 1000px var(--adr-field) inset; transition: background-color 9999s; }
.adr-eye { position: absolute; right: 5px; display: grid; place-items: center; width: 34px; height: 34px; padding: 0; border: 0; border-radius: 9px; background: transparent; color: var(--adr-muted); cursor: pointer; }
.adr-eye svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.adr-eye:hover, .adr-eye.on { color: var(--adr-a); background: var(--adr-soft); }
.adr-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 12px; }
.adr-phone { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 8px; }
.adr select { padding: 0 28px 0 12px; appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 10px center; background-size: 14px; text-overflow: ellipsis; }
.adr-hint { display: none; margin: -6px 0 12px; font-size: .75rem; color: var(--adr-muted); }
.adr-form:focus-within .adr-hint { display: block; }
.adr label.error { display: block; margin: 5px 0 0; font-size: .78rem; font-weight: 600; line-height: 1.35; color: var(--adr-err); }
.adr label.error:empty { display: none; }
.adr-msg { display: block; margin: 0 0 10px; font-size: .875rem; font-weight: 600; color: var(--adr-err) !important; }
.adr-msg:empty { display: none; }
.adr-aside { display: flex; justify-content: flex-end; margin: -2px 0 14px; font-size: .8125rem; }
.adr a { color: var(--adr-a); font-weight: 700; text-decoration: none; }
.adr a:hover { text-decoration: underline; }
.adr :focus-visible { outline: 2px solid var(--adr-a); outline-offset: 2px; }

/* ---------- the button: the home page's gradient pill, 46px, with the small arrow chip ---------- */
.adr .adr-btn {
    position: relative; display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; height: 46px; padding: 0 8px 0 22px; border: 0; border-radius: 999px;
    background: linear-gradient(135deg, var(--adr-btn-a), var(--adr-btn-b)); color: #fff; font: inherit; font-size: .9375rem; font-weight: 700; cursor: pointer;
    box-shadow: 0 1px 0 rgba(255, 255, 255, .28) inset, 0 14px 24px -14px rgba(29, 78, 216, .7);
    transition: transform .2s var(--adr-ease), box-shadow .25s, filter .2s;
}
.adr .adr-btn:hover { transform: translateY(-1px); filter: brightness(1.06); box-shadow: 0 1px 0 rgba(255, 255, 255, .28) inset, 0 18px 28px -14px rgba(29, 78, 216, .8); }
.adr .adr-btn:active { transform: scale(.985); }
.adr .adr-btn[disabled] { opacity: .75; cursor: progress; transform: none; padding: 0 22px; }
.adr-btn__ic { display: grid; place-items: center; width: 32px; height: 32px; margin-left: auto; border-radius: 50%; background: rgba(255, 255, 255, .22); transition: transform .25s var(--adr-ease); }
.adr-btn .adr-btn__ic svg { width: 15px; height: 15px; fill: none; stroke: #fff; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.adr-btn:hover .adr-btn__ic { transform: translateX(2px); }
.adr-btn:has(.adr-btn__ic) { justify-content: flex-start; }
.adr-spin { width: 16px; height: 16px; border: 2px solid rgba(255, 255, 255, .45); border-top-color: #fff; border-radius: 50%; animation: adr-spin .7s linear infinite; }
@keyframes adr-spin { to { transform: rotate(360deg); } }
.adr-fine { margin: 12px 0 0; font-size: .78rem; line-height: 1.5; color: var(--adr-muted); text-align: center; }
.adr-fine a { font-weight: 600; }
.adr-recaptcha { margin: 12px 0 0; font-size: .7rem; line-height: 1.5; text-align: center; color: var(--adr-muted); }
.adr-recaptcha a { font-weight: 600; }
/* Google's floating badge would sit over the drawer; the notice above replaces it while the drawer is open */
html.adr-lock .grecaptcha-badge { visibility: hidden !important; }
.adr-switch { margin: 18px 0 0; font-size: .875rem; text-align: center; color: var(--adr-muted); }

/* ---------- phones: a bottom sheet with a drag handle ---------- */
@media (max-width: 640px) {
    dialog.adr {
        inset: auto 0 0 0; width: 100%; height: auto; max-height: 92dvh; border-radius: 24px 24px 0 0;
        box-shadow: 0 -20px 50px -24px rgba(8, 40, 80, .5), 0 -1px 0 var(--adr-line);
        transform: translate3d(0, 100%, 0);
    }
    dialog.adr.is-in { transform: none; }
    dialog.adr.is-drag { transition: none; }
    .adr-grab { display: grid; place-items: center; flex: none; height: 26px; cursor: grab; touch-action: none; }
    .adr-grab i { width: 40px; height: 4px; border-radius: 4px; background: var(--adr-line); }
    .adr-pane { padding: 4px 20px max(22px, env(safe-area-inset-bottom)); }
    .adr-top { margin-bottom: 12px; }
    .adr-h { font-size: 1.3rem; }
    .adr-sub { margin-bottom: 12px; }
    .adr-seg { margin-bottom: 12px; }
    .adr-fld { margin-bottom: 10px; }
    .adr-switch { margin-top: 12px; }
}
@media (prefers-reduced-motion: reduce) {
    dialog.adr, dialog.adr::backdrop { transition: opacity .2s ease; transform: none; opacity: 0; }
    dialog.adr.is-in, dialog.adr.is-in::backdrop { opacity: 1; }
    .adr-pane.is-swap, .adr-spin { animation: none; }
    .adr-x:hover { transform: none; }
}