/* Shops In City: shared identity for login and business onboarding. */
.auth-page { --brand: #237e3e; --brand-dark: #1c6933; --brand-light: #eaf7e6; --ink: #26382b; --muted: #647366; --bg: #f3f9ef; background: #f3f9ef; color: #26382b; }
.auth-login .auth-wrapper-left,
.auth-signup .su-brand { background: linear-gradient(145deg, #edf8e5 0%, #d7efcb 48%, #bfe4b3 100%); color: #26382b; position: relative; isolation: isolate; }
.auth-login .auth-wrapper-left::before { content: ''; position: absolute; width: 340px; height: 340px; border-radius: 50%; background: #ffffff40; top: -110px; right: -140px; z-index: -1; }
.auth-signup .su-brand::before, .auth-signup .su-brand::after { background: #ffffff40; }
.auth-login .auth-wrapper, .auth-signup .su-card { border-color: #dcebd6; box-shadow: 0 24px 70px -36px #58854a45; }
.auth-login .auth-wrapper-right, .auth-signup .su-form { background: #fff; }
.auth-login .auth-left-cont .title, .auth-signup .su-brand h1 { color: #26382b; }
.auth-login .auth-left-cont .title span, .auth-signup .su-brand h1 span { color: #237e3e; }
.auth-login .login-brand-body p, .auth-signup .su-brand p.lead { color: #49634c; opacity: 1; }
.auth-page .welcome-eyebrow { color: #3c7041; }
.auth-page .login-brand-logo, .auth-signup .brand-logo { align-self: flex-start; padding: 10px 14px; border-radius: 12px; background: #fff; box-shadow: 0 3px 16px #5e8e4a12; max-width: 100%; }
.auth-login .login-brand-logo img.city-wordmark,
.auth-signup .brand-logo img.city-wordmark { width: 232px; max-width: 100%; height: auto; max-height: none; padding: 0; margin: 0; border-radius: 0; object-fit: contain; }
.auth-page .login-benefits { color: #3c5840; }
.auth-page .login-benefits i, .auth-signup .su-feats li i { background: #ffffff85; color: #237e3e; }
.auth-signup .su-feats { color: #3c5840; }
.auth-page .login-brand-foot, .auth-signup .brand-foot { color: #49634c; opacity: 1; }
.auth-page .welcome-note { box-shadow: 0 8px 22px #59844b20; color: #36623b; }
.auth-page .shop-front { box-shadow: 0 12px 28px #5e8b4933; }
.auth-page .shop-roof span { background: #f4f9cd; }
.auth-page .shop-roof span:nth-child(even) { background: #82c56e; }
.auth-page .shop-front { background: #fffef0; }
.auth-page .shop-window, .auth-page .shop-door { border-color: #a2ca92; background: #e2f2d8; }
.auth-login .auth-header .title, .auth-signup .head h2, .auth-signup .step-intro h3 { color: #26382b; }
.auth-login .login-kicker, .auth-signup .onboarding-kicker, .auth-signup .stepper .st.active { color: #237e3e; }
.auth-login .text-primary, .auth-signup .foot-note a, .auth-signup .link { color: #237e3e !important; }
.auth-login .btn-block, .auth-signup .btn-primary { background: #237e3e; border-color: #237e3e; box-shadow: 0 6px 14px -8px #62a94b77; }
.auth-login .btn-block:hover, .auth-signup .btn-primary:hover:not(:disabled) { background: #1c6933; box-shadow: 0 10px 22px -10px #62a94b99; }
.auth-login .form-control:focus, .auth-signup .inp:focus { border-color: #64a957; box-shadow: 0 0 0 4px #eaf7e6; }
.auth-signup .stepper, .auth-login #reload-captcha { background: #f3f9ef; border-color: #dcebd6; }
.auth-signup .stepper .num { background: #e0efda; color: #587354; }
.auth-signup .stepper .st.active .num, .auth-signup .stepper .st.done .num { background: #237e3e; color: #fff; }
.auth-signup .cat-card.selected { background: #eaf7e6; border-color: #64a957; }
.auth-page button:focus-visible, .auth-page a:focus-visible, .auth-page [role=button]:focus-visible { outline: 3px solid #83ba70; outline-offset: 4px; }
@keyframes city-arrive { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }
@keyframes city-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
@keyframes city-glow { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.08); } }
@media (prefers-reduced-motion: no-preference) {
    .auth-login .auth-wrapper, .auth-signup .su-card { animation: city-arrive .55s ease-out both; }
    .auth-login .login-brand-body, .auth-signup .brand-body { animation: city-arrive .65s .1s ease-out both; }
    .auth-page .welcome-visual { animation: city-float 5s ease-in-out infinite; }
    .auth-login .auth-wrapper-left::before, .auth-signup .su-brand::before { animation: city-glow 9s ease-in-out infinite; }
    .auth-login .btn-block, .auth-signup .btn-primary, .auth-page .city-wordmark { transition: transform .2s ease, box-shadow .2s ease, background-color .2s ease; }
    .auth-login .btn-block:hover, .auth-signup .btn-primary:hover:not(:disabled) { transform: translateY(-2px); }
    .auth-login .btn-block:active, .auth-signup .btn-primary:active:not(:disabled) { transform: translateY(0); }
    .auth-page .city-wordmark:hover { transform: scale(1.025); }
}
@media (max-width: 480px) {
    .auth-login .login-brand-logo img.city-wordmark, .auth-signup .brand-logo img.city-wordmark { width: 210px; }
}
@media (prefers-reduced-motion: reduce) {
    .auth-page *, .auth-page *::before, .auth-page *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

/* Screen-aware cards: fit desktop windows, keep natural scrolling on phones. */
.auth-page { --brand: #248339; --brand-dark: #1b6b2d; --brand-light: #e8f8e8; --bg: #f2faf1; background: #f2faf1; padding: 0; }
.auth-login .auth-wrapper-left, .auth-signup .su-brand { background: linear-gradient(135deg, #37b246 0%, #44b93d 45%, #21aa4c 100%); }
.auth-login .auth-left-cont .title, .auth-signup .su-brand h1,
.auth-login .auth-left-cont .title span, .auth-signup .su-brand h1 span { color: #12351d; }
.auth-login .login-brand-body p, .auth-signup .su-brand p.lead { color: #12351d; font-size: 16px; line-height: 1.6; }
.auth-page .login-brand-foot, .auth-signup .brand-foot { color: #12351d; font-size: 14px; }
.auth-page .login-benefits, .auth-signup .su-feats { display: none; }
.auth-page .welcome-note { font-size: 13px; }
.auth-login .input-label, .auth-signup .fg label.lbl { font-size: 15px; }
.auth-login .custom-control-label, .auth-login .mt-5 { font-size: 14px; }
.auth-login .auth-header, .auth-signup .head p, .auth-signup .step-intro p { font-size: 16px; }
.auth-signup .step-intro h3 { font-size: 22px; }
.auth-signup .hint, .auth-login .login-account-link, .auth-signup .foot-note { font-size: 14px; }
.auth-signup .stepper .st { font-size: 13px; }
#step-count { font-size: 14px; }
.auth-login .btn-block, .auth-signup .btn-primary { font-size: 16px; }
.auth-login .login-brand-body, .auth-signup .su-brand .brand-body { margin-top: 28px; }
.auth-login .welcome-visual, .auth-signup .welcome-visual { margin-top: 24px; margin-bottom: 20px; }
.auth-signup .onboarding-meta { justify-content: flex-end; margin-bottom: 8px; }
.auth-signup #form-details { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 16px; }
.auth-signup #form-details .fg { margin-bottom: 0; }
.auth-signup #form-details .btn-primary { grid-column: 1 / -1; }

@media (min-width: 861px) {
    .auth-login .login-shell, .auth-signup .su-shell { min-height: 100dvh; padding: 20px; align-items: center; }
    .auth-login .auth-wrapper, .auth-signup .su-card { height: min(680px, calc(100dvh - 40px)); min-height: 0; max-width: 1120px; }
    .auth-login .auth-wrapper-left, .auth-signup .su-brand { padding: clamp(24px, 4vh, 36px); }
    .auth-login .auth-wrapper-right, .auth-signup .su-form { padding: clamp(22px, 3.5vh, 34px) clamp(26px, 3vw, 44px); justify-content: center; }
    .auth-login .auth-left-cont .title, .auth-signup .su-brand h1 { font-size: clamp(30px, 3vw, 38px); }
    .auth-login .auth-header .title, .auth-signup .head h2 { font-size: 32px; }
    .auth-signup .head { margin-bottom: 18px; }
    .auth-signup .head p { margin-bottom: 0; }
    .auth-signup .stepper { padding: 12px 8px; margin-bottom: 18px; }
    .auth-signup .step-intro { margin-bottom: 16px; }
    .auth-signup .fg { margin-bottom: 16px; }
    .auth-signup .foot-note, .auth-login .login-account-link { margin-top: 20px !important; padding-top: 16px; }
    .auth-login .auth-header { margin-bottom: 22px; }
    .auth-login .form-group { margin-bottom: 16px; }
    .auth-login #reload-captcha { margin-bottom: 18px; padding: 6px 10px !important; }
    .auth-login #reload-captcha img { max-height: 44px; }
    .auth-signup .cat-grid { max-height: clamp(96px, 18vh, 180px); }
    .auth-signup #form-category { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 14px; }
    .auth-signup #form-category:has(#subcategory-wrap[style*="none"]) { grid-template-columns: 1fr; }
    .auth-signup #form-category > .lbl { grid-column: 1; grid-row: 1; }
    .auth-signup #category-grid { grid-column: 1; grid-row: 2; }
    .auth-signup #subcategory-wrap { grid-column: 2; grid-row: 1 / span 2; }
    .auth-signup #form-category .btn-primary { grid-column: 1 / -1; }
}
@media (min-width: 861px) and (max-height: 700px) {
    .auth-login .login-brand-body, .auth-signup .su-brand .brand-body { margin-top: 20px; }
    .auth-login .welcome-visual, .auth-signup .welcome-visual { margin-top: 16px; margin-bottom: 8px; }
    .auth-login .login-brand-foot, .auth-signup .brand-foot { display: none; }
    .auth-login .auth-header, .auth-signup .head { margin-bottom: 14px; }
    .auth-signup .step-intro { margin-bottom: 12px; }
    .auth-signup .stepper { padding: 10px 6px; margin-bottom: 14px; }
    .auth-signup .head h2, .auth-login .auth-header .title { font-size: 30px; }
    .auth-login .auth-wrapper-right, .auth-signup .su-form { padding-top: 20px; padding-bottom: 20px; }
    .auth-login .form-control, .auth-signup .inp, .auth-signup .inp-group .toggle { height: 46px; min-height: 46px; }
    .auth-login .form-group, .auth-signup .fg { margin-bottom: 12px; }
    .auth-login .login-account-link, .auth-signup .foot-note { margin-top: 14px !important; padding-top: 12px; }
}
@media (min-width: 861px) and (max-height: 560px) {
    .auth-login .auth-wrapper, .auth-signup .su-card { height: auto; min-height: calc(100dvh - 40px); }
    .auth-login .login-shell, .auth-signup .su-shell { align-items: flex-start; }
}
@media (max-width: 860px) {
    .auth-login .auth-wrapper, .auth-signup .su-card { height: auto; }
    .auth-signup #form-details { display: block; }
    .auth-signup #form-details .fg { margin-bottom: 20px; }
    .auth-signup .su-brand p.lead, .auth-login .login-brand-body p { font-size: 16px; }
    .auth-signup .stepper .st { font-size: 12px; }
    .auth-login .auth-header .title, .auth-signup .head h2 { font-size: 29px; }
}

/* City streets and uniform greens, using the supplied brand artwork. */
.auth-page { --brand: #277833; --brand-dark: #1b5d29; --brand-light: #edf5e5; background: #f4f7ef; }
.auth-login .auth-wrapper-left, .auth-signup .su-brand { background: linear-gradient(145deg, #e6f2d9, #c7dfad 56%, #a5cd88); }
.auth-login .auth-left-cont .title, .auth-signup .su-brand h1 { color: #183e24; }
.auth-login .auth-left-cont .title span, .auth-signup .su-brand h1 span { color: #287532; }
.auth-login .login-brand-body p, .auth-signup .su-brand p.lead,
.auth-page .login-brand-foot, .auth-signup .brand-foot { color: #365537; }
.auth-login .btn-block, .auth-signup .btn-primary { background: #277833; border-color: #277833; }
.auth-login .btn-block:hover, .auth-signup .btn-primary:hover:not(:disabled) { background: #1b5d29; }
.auth-login .text-primary, .auth-signup .foot-note a, .auth-signup .link { color: #277833 !important; }
.auth-signup .stepper .st.active .num, .auth-signup .stepper .st.done .num { background: #277833; }
.auth-login .welcome-visual, .auth-signup .welcome-visual { width: calc(100% + 48px); margin-left: -24px; margin-right: -24px; padding-top: 0; }
.auth-page .welcome-visual .shop-roof, .auth-page .welcome-visual .shop-front { display: none; }
.auth-login .auth-left-cont img.city-streetscape,
.auth-signup img.city-streetscape { display: block; width: 100%; max-width: none; height: auto; margin: 0; object-fit: contain; border-radius: 10px; mix-blend-mode: multiply; }
.auth-page .welcome-note { width: fit-content; max-width: calc(100% - 24px); margin: 8px auto 0; text-align: center; background: #ffffffc9; color: #365537; box-shadow: 0 6px 18px #52773918; }
@media (max-width: 860px) {
    .auth-login .auth-wrapper-left, .auth-signup .su-brand { overflow: hidden; }
    .auth-login .auth-wrapper-left::after, .auth-signup .su-brand::after {
        content: ''; position: absolute; width: 250px; height: 94px; bottom: 0; right: -25px;
        background: url('../../brand/city-streetscape.png') center / contain no-repeat;
        border-radius: 0; opacity: .12; mix-blend-mode: multiply; pointer-events: none; z-index: -1;
    }
}
/* Final brand treatment: a continuous green panel with transparent city artwork. */
.auth-login .auth-wrapper, .auth-signup .su-card { align-items: stretch; }
.auth-login .auth-wrapper-left, .auth-signup .su-brand { background: linear-gradient(145deg, #16763b, #0b512c); align-self: stretch; position: relative; overflow: hidden; }
.auth-login .auth-left-cont { height: 100%; }
.auth-login .auth-left-cont .title, .auth-signup .su-brand h1 { color: #fff; }
.auth-login .auth-left-cont .title span, .auth-signup .su-brand h1 span { color: #c4eda4; }
.auth-login .login-brand-body p, .auth-signup .su-brand p.lead { color: #e0f1e4; }
.auth-page .brand-tagline { position: relative; z-index: 1; color: #e8f6df; font-size: 14px; font-weight: 600; margin: 12px 0 0; line-height: 1.5; }
.auth-login .login-brand-body, .auth-signup .su-brand .brand-body { position: relative; margin-top: 22px; z-index: 1; }
.auth-page .login-brand-foot, .auth-signup .brand-foot, .auth-page .welcome-note { display: none; }
.auth-login .welcome-visual, .auth-signup .welcome-visual { width: 100%; margin: 16px 0 0; }
.auth-login .auth-left-cont img.city-delivery, .auth-signup img.city-delivery { display: block; width: 100%; height: clamp(150px, 24vh, 220px); object-fit: contain; margin: 0; border-radius: 16px; }
.auth-login .auth-left-cont img.city-streetscape, .auth-signup img.city-streetscape { display: none; }
.auth-login .auth-wrapper-left::after, .auth-signup .su-brand::after { content: ''; position: absolute; inset: auto 0 0; width: 100%; height: 110px; background: url('../../brand/city-streetscape.png') bottom center / cover no-repeat; border-radius: 0; opacity: .5; mix-blend-mode: normal; pointer-events: none; z-index: 0; }
.auth-login .auth-wrapper-left::before, .auth-signup .su-brand::before { background: #ffffff08; }
@media (min-width: 861px) and (max-height: 700px) {
    .auth-login .login-brand-body, .auth-signup .su-brand .brand-body { margin-top: 16px; }
    .auth-login .auth-left-cont img.city-delivery, .auth-signup img.city-delivery { height: 150px; }
    .auth-login .auth-wrapper-left::after, .auth-signup .su-brand::after { height: 70px; opacity: .35; }
}
@media (max-width: 860px) {
    .auth-page .brand-tagline { font-size: 13px; }
    .auth-login .auth-wrapper-left::after, .auth-signup .su-brand::after { height: 80px; opacity: .18; }
}
.auth-login .auth-left-cont img.city-delivery, .auth-signup img.city-delivery { max-width: none; object-position: center; }