/* ============================================================================
   GoSeller — Auth shell + scoped form restyling
   Loaded on customer/seller auth pages via layouts.front-end.goseller-auth.
   Uses the same --gs-* tokens from goseller-landing.css. Scoped restyles the
   theme's .form-control / .btn markup so existing auth forms look GoSeller
   without changing any field names, ids or JS hooks.
   ============================================================================ */
.gs-auth-body { background: var(--gs-bg-soft); }

.gs-auth-shell { display: grid; grid-template-columns: 1fr 1fr; min-height: 100vh; }

/* Brand panel */
.gs-auth-aside {
    background: var(--gs-gradient); color: #fff; padding: 44px 48px;
    display: flex; flex-direction: column; justify-content: space-between;
    position: relative; overflow: hidden;
}
.gs-auth-aside::after {
    content: ""; position: absolute; width: 480px; height: 480px; right: -160px; bottom: -180px;
    background: radial-gradient(circle, rgba(255,255,255,.16), transparent 65%); border-radius: 50%;
}
.gs-auth-brand { display: inline-flex; align-items: center; gap: 10px; font-weight: 800; font-size: 1.4rem; color: #fff; }
.gs-auth-brand img { height: 40px; width: auto; max-width: 210px; filter: brightness(0) invert(1); }
.gs-auth-brand b { color: #fff; }
.gs-auth-aside .gs-brand-mark { background: rgba(255,255,255,.2); box-shadow: none; }
.gs-auth-aside-body { position: relative; z-index: 1; max-width: 440px; }
.gs-auth-aside-body h2 { font-size: clamp(1.6rem, 2.4vw, 2.3rem); line-height: 1.15; letter-spacing: -.02em; margin: 0 0 14px; color: #fff; }
.gs-auth-aside-body p { font-size: 1.05rem; color: rgba(255,255,255,.9); margin: 0 0 26px; }
.gs-auth-points { list-style: none; padding: 0; margin: 0; display: grid; gap: 13px; }
.gs-auth-points li { display: flex; align-items: center; gap: 11px; font-weight: 600; color: #fff; font-size: 1rem; }
.gs-auth-points svg { width: 20px; height: 20px; flex: none; }
.gs-auth-aside-foot { position: relative; z-index: 1; font-size: .85rem; color: rgba(255,255,255,.75); }

/* Form column */
.gs-auth-main { display: flex; flex-direction: column; padding: 28px clamp(20px, 5vw, 64px) 48px; overflow-y: auto; }
.gs-auth-topbar { display: flex; align-items: center; justify-content: space-between; margin-bottom: 24px; }
.gs-auth-brand--mobile { display: none; color: var(--gs-ink); font-size: 1.25rem; }
.gs-auth-brand--mobile img { height: 36px; filter: none; }
.gs-auth-brand--mobile b { color: var(--gs-primary); }
.gs-auth-back { margin-left: auto; font-weight: 700; color: var(--gs-muted); font-size: .9rem; }
.gs-auth-back:hover { color: var(--gs-primary); }
.gs-auth-card-wrap { flex: 1; display: flex; flex-direction: column; justify-content: center; align-items: center; width: 100%; }
.gs-auth-card { width: 100%; max-width: 560px; background: #fff; border: 1px solid var(--gs-line); border-radius: var(--gs-radius-lg); box-shadow: var(--gs-shadow); padding: clamp(24px, 4vw, 44px); }

/* ---- Scoped restyle of existing theme form markup inside the auth card ---- */
.gs-auth-card h2, .gs-auth-card h1 { color: var(--gs-ink); letter-spacing: -.01em; }
.gs-auth-card .form-control,
.gs-auth-card input[type="text"],
.gs-auth-card input[type="email"],
.gs-auth-card input[type="password"],
.gs-auth-card input[type="number"],
.gs-auth-card input[type="tel"],
.gs-auth-card select,
.gs-auth-card textarea {
    border: 1px solid var(--gs-line) !important; border-radius: 12px !important;
    min-height: 50px; padding: 12px 15px !important; font-size: .98rem; color: var(--gs-ink); background: #fff;
    box-shadow: none !important; transition: border-color .2s, box-shadow .2s;
}
.gs-auth-card .form-control:focus,
.gs-auth-card input:focus, .gs-auth-card select:focus, .gs-auth-card textarea:focus {
    border-color: var(--gs-primary) !important; box-shadow: 0 0 0 4px var(--gs-primary-050) !important; outline: none;
}
.gs-auth-card label { font-weight: 700; color: var(--gs-ink); font-size: .9rem; margin-bottom: 7px; }
.gs-auth-card .btn--primary,
.gs-auth-card .btn-primary {
    background: var(--gs-gradient) !important; border: none !important; border-radius: 12px !important;
    min-height: 52px; font-weight: 700 !important; box-shadow: 0 14px 28px -12px rgba(91,61,245,.7) !important;
    color: #fff !important; transition: transform .2s;
}
.gs-auth-card .btn--primary:hover, .gs-auth-card .btn-primary:hover { transform: translateY(-2px); color: #fff !important; }
.gs-auth-card .btn { border-radius: 12px; }
.gs-auth-card a { color: var(--gs-primary); font-weight: 600; }
.gs-auth-card .social-media-login-btn {
    display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%;
    border: 1px solid var(--gs-line); border-radius: 12px; padding: 12px; font-weight: 600; color: var(--gs-ink);
    background: #fff; transition: border-color .2s, background .2s;
}
.gs-auth-card .social-media-login-btn:hover { border-color: var(--gs-primary); background: var(--gs-primary-050); }
.gs-auth-card .social-media-login-btn img { width: 22px; height: 22px; }
.gs-auth-card .or-sign-in-with { color: var(--gs-muted); }
.gs-auth-card img.w-70px { width: 60px; }

/* ---- Full-width mode (vendor registration) ---- */
.gs-auth-fw { min-height: 100vh; }
.gs-auth-fw-bar {
    display: flex; align-items: center; justify-content: space-between; gap: 16px;
    padding: 14px clamp(16px, 4vw, 40px); background: rgba(255,255,255,.9);
    backdrop-filter: saturate(160%) blur(12px); -webkit-backdrop-filter: saturate(160%) blur(12px);
    border-bottom: 1px solid var(--gs-line); position: sticky; top: 0; z-index: 900;
}
.gs-auth-brand--dark { color: var(--gs-ink); font-size: 1.25rem; }
.gs-auth-brand--dark img { height: 38px; filter: none; }
.gs-auth-brand--dark b { color: var(--gs-primary); }
.gs-auth-fw-nav { display: flex; align-items: center; gap: 14px; }
.gs-auth-fw-body { padding: 0; }
/* Soften the legacy vendor-registration marketing sections inside GoSeller chrome */
.gs-auth-fw-body .create-an-account { border-radius: var(--gs-radius-lg); }

/* Responsive */
@media (max-width: 900px) {
    .gs-auth-shell { grid-template-columns: 1fr; }
    .gs-auth-aside { display: none; }
    .gs-auth-brand--mobile { display: inline-flex; align-items: center; gap: 10px; }
    .gs-auth-main { padding-top: 20px; }
}

/* ============================================================================
   Mobile fix — full-width auth topbar (vendor registration / login)
   Prevents the 'Back to site' link from collapsing to one letter per line and
   keeps the logo + Vendor Login button on one tidy row on phones.
   ============================================================================ */
.gs-auth-back { white-space: nowrap; }
@media (max-width: 600px) {
    .gs-auth-fw-bar { gap: 10px; padding: 12px 16px; }
    .gs-auth-brand--dark { font-size: 1.1rem; min-width: 0; }
    .gs-auth-brand--dark img { height: 30px; max-width: 46vw; object-fit: contain; }
    .gs-auth-fw-nav { gap: 10px; flex: none; }
    /* Logo already links home, so the arrow link is redundant on small screens */
    .gs-auth-fw-nav .gs-auth-back { display: none; }
    .gs-auth-fw-nav .gs-btn { padding: 9px 16px; font-size: .85rem; white-space: nowrap; }
}