/* =============================================================================
   vendor_guide.dealer.css — dealer register, sign in, and account pages

   Two layouts share this file: the auth pages (form beside a short "why register"
   panel) and the account page (shortlist beside details). Depends on
   vendor_guide.shared.css for tokens, buttons and stars.
   ============================================================================= */

.vg-dealer-page {
    background: var(--vg-bg);
    min-height: 70vh;
    padding: 2.5rem 1.5rem 3.5rem;
}

/* ── Auth layout ──────────────────────────────────────────────────────────── */

.vg-dealer-shell {
    max-width: 1000px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 320px;
    gap: 2rem;
    align-items: start;
}

.vg-dealer-card {
    background: #fff;
    border: 1px solid var(--vg-border);
    border-radius: var(--vg-radius);
    padding: 1.75rem;
    box-shadow: var(--vg-shadow-xs);
}

.vg-dealer-back {
    font-size: .82rem;
    font-weight: 600;
    color: var(--vg-primary);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    margin-bottom: .85rem;
}
.vg-dealer-back:hover { text-decoration: underline; }

.vg-dealer-card h1 {
    font-size: 1.5rem;
    font-weight: 800;
    margin: 0 0 .35rem;
    color: var(--vg-text);
}
.vg-dealer-sub { color: var(--vg-text-muted); font-size: .9rem; margin: 0 0 1.25rem; }

/* ── Fields: floating labels ───────────────────────────────────────────────────
   Markup matches the platform form builder (.form-floating, input then label), but
   the rules live here rather than being inherited: .form-floating ships only in the
   full css/bootstrap.min.css, and themes/components/css.php skips that bundle on any
   site that has its own homepage stylesheet. Written to be additive, so where
   Bootstrap IS loaded these refine it rather than fight it.
--------------------------------------------------------------------------- */

.vg-dealer-field {
    position: relative;
    margin-bottom: .9rem;
}

.vg-dealer-field > .form-control,
.vg-dealer-field > .form-select {
    width: 100%;
    box-sizing: border-box;
    /* Top padding leaves room for the label once it floats up. */
    padding: 1.55rem .75rem .45rem;
    height: auto;
    min-height: 3.4rem;
    border: 1px solid var(--vg-border);
    border-radius: var(--vg-radius-sm);
    font-size: .95rem;
    line-height: 1.25;
    color: var(--vg-text);
    background: #fff;
    transition: border-color var(--vg-transition), box-shadow var(--vg-transition);
}

.vg-dealer-field > .form-control:focus,
.vg-dealer-field > .form-select:focus {
    outline: none;
    border-color: var(--vg-border-focus);
    box-shadow: 0 0 0 3px rgba(147, 197, 253, .35);
}

/* The placeholder exists only to drive the floated state; the label is the visible
   caption, so the placeholder itself stays invisible. */
.vg-dealer-field > .form-control::placeholder { color: transparent; }

.vg-dealer-field > label {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    padding: 1rem .8rem;
    margin: 0;
    font-size: .95rem;
    font-weight: 500;
    color: var(--vg-text-muted);
    pointer-events: none;
    transform-origin: 0 0;
    transition: transform .12s ease-out, color .12s ease-out;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: calc(100% - 1.6rem);
}

/* Floated: filled, focused, or an autofilled value the browser put there. */
.vg-dealer-field > .form-control:focus ~ label,
.vg-dealer-field > .form-control:not(:placeholder-shown) ~ label,
.vg-dealer-field > .form-control:-webkit-autofill ~ label,
.vg-dealer-field > .form-select ~ label {
    transform: scale(.8) translateY(-.6rem) translateX(.1rem);
    color: var(--vg-text-soft);
}
.vg-dealer-field > .form-control:focus ~ label { color: var(--vg-primary); }

/* A number input with a value but no placeholder-shown support still floats. */
.vg-dealer-field > input[type="number"]:not(:placeholder-shown) ~ label { transform: scale(.8) translateY(-.6rem) translateX(.1rem); }

/* Error state: set by the page for a server-side field error, and .was-validated is
   what the shared validator marks on the wrapper. */
.vg-dealer-field--error > .form-control,
.vg-dealer-field.was-validated > .form-control {
    border-color: var(--vg-danger);
}
.vg-dealer-field--error > label,
.vg-dealer-field.was-validated > label { color: var(--vg-danger); }

/* The platform's .gbuc-form-text (css/bigtime.css) is an ATTACHED bar: top border,
   bottom-only corners, 1px side insets, grey fill. It only reads that way flush against
   the field above it, and the field's own .9rem bottom margin plus a -.4rem pull left a
   floating grey slab with a gap over it. So: the field that a hint follows gives up its
   bottom margin and its bottom corners, and the hint keeps the platform's side insets. */
.vg-dealer-field:has(+ .vg-dealer-hint) { margin-bottom: 0; }
.vg-dealer-field:has(+ .vg-dealer-hint) > .form-control,
.vg-dealer-field:has(+ .vg-dealer-hint) > .form-select {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}

.vg-dealer-hint {
    display: block;
    margin: 0 1px .9rem;
    font-size: .76rem;
    line-height: 1.4;
    color: var(--vg-text-muted);
}

/* ── Password rules ───────────────────────────────────────────────────────────
   The platform's five rules, ticked live. Neutral circles until the field is typed
   in: five red crosses on an untouched form reads as failure rather than instruction.
   Built by vg_password_attach() in js/vendor_guide/vendor_guide.password.js. */

.vg-pass-intro { display: block; font-weight: 600; }

.vg-pass-rules {
    list-style: none;
    margin: .3rem 0 0;
    padding: 0;
}
.vg-pass-rules li {
    display: flex;
    align-items: baseline;
    gap: .4rem;
    padding: .1rem 0;
}
.vg-pass-rules li > i { font-size: .7rem; opacity: .55; }
.vg-pass-rules li.is-ok  { color: #14532d; }
.vg-pass-rules li.is-bad { color: #7f1d1d; }
.vg-pass-rules li.is-ok  > i,
.vg-pass-rules li.is-bad > i { opacity: 1; }

.vg-req { color: var(--vg-danger); }

.vg-dealer-row {
    display: flex;
    gap: .75rem;
}
.vg-dealer-row .vg-dealer-field { flex: 1 1 auto; min-width: 0; }
.vg-dealer-field--narrow { flex: 0 0 96px; }

.vg-dealer-error {
    background: #fef2f2;
    border: 1px solid #fecaca;
    color: #991b1b;
    border-radius: var(--vg-radius-sm);
    padding: .6rem .8rem;
    font-size: .85rem;
    margin-bottom: 1rem;
}

/* The good-news counterpart, used by the password reset page: "check your email" and
   "password changed" are not errors and must not be styled as one. */
.vg-dealer-notice {
    background: #f0fdf4;
    border: 1px solid #bbf7d0;
    color: #14532d;
    border-radius: var(--vg-radius-sm);
    padding: .6rem .8rem;
    font-size: .85rem;
    margin-bottom: 1rem;
}

.vg-reset-facts { list-style: disc; }

/* ── Claim a listing ──────────────────────────────────────────────────────────
   The claim page reuses the auth card and field styles above. This is only the block
   that names the listing being claimed, which exists so nobody claims the wrong
   company from a link somebody sent them. */

.vg-claim-target {
    display: flex;
    align-items: center;
    gap: .9rem;
    padding: .75rem;
    margin-bottom: 1.25rem;
    border: 1px solid var(--vg-border);
    border-radius: var(--vg-radius-sm);
    background: var(--vg-bg-subtle);
}
.vg-claim-target img,
.vg-claim-target .vg-logo-placeholder {
    width: 52px;
    height: 52px;
    object-fit: contain;
    border-radius: var(--vg-radius-sm);
    background: #fff;
    flex-shrink: 0;
}
.vg-claim-target .vg-logo-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 1.3rem;
    color: var(--vg-text-muted);
}
.vg-claim-target > div { display: flex; flex-direction: column; min-width: 0; }
.vg-claim-target strong { font-size: 1rem; }
.vg-claim-target-url {
    font-size: .78rem;
    color: var(--vg-text-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Taller than the single-line fields it sits among: this one asks for a sentence. */
.vg-claim-note { min-height: 5.5rem; resize: vertical; }

/* ── Account self-management ───────────────────────────────────────────────────
   The details and password panels on both account pages. The forms reuse the field
   styles above; these are only the seams between the sections. */

/* A second heading inside one panel needs air above it, unlike the panel's first. */
.vg-portal-account-head { margin-top: 1.5rem; }
.vg-portal-account-head:first-of-type { margin-top: 0; }

/* What is displayed rather than edited, below the form it belongs to. */
.vg-dealer-details--static {
    margin-top: 1.25rem;
    padding-top: 1rem;
    border-top: 1px solid var(--vg-border);
}

.vg-dealer-switch {
    margin: 1rem 0 0;
    font-size: .85rem;
    color: var(--vg-text-muted);
    text-align: center;
}
.vg-dealer-switch a { color: var(--vg-primary); font-weight: 600; }

/* ── Why register panel ───────────────────────────────────────────────────── */

.vg-dealer-aside {
    background: #fff;
    border: 1px solid var(--vg-border);
    border-radius: var(--vg-radius);
    padding: 1.5rem;
}
.vg-dealer-aside h2 {
    font-size: 1rem;
    font-weight: 800;
    margin: 0 0 1rem;
    color: var(--vg-text);
}

.vg-dealer-benefits { list-style: none; margin: 0; padding: 0; }
.vg-dealer-benefits li {
    display: flex;
    gap: .7rem;
    align-items: flex-start;
    font-size: .85rem;
    color: var(--vg-text-soft);
    line-height: 1.5;
    padding: .55rem 0;
    border-bottom: 1px solid var(--vg-border);
}
.vg-dealer-benefits li:last-child { border-bottom: none; }
.vg-dealer-benefits i {
    color: var(--vg-primary);
    font-size: .9rem;
    margin-top: .15rem;
    width: 18px;
    text-align: center;
    flex-shrink: 0;
}

.vg-dealer-aside-note {
    margin: 1rem 0 0;
    font-size: .76rem;
    color: var(--vg-text-muted);
    line-height: 1.5;
}

/* ── Account page ─────────────────────────────────────────────────────────── */

.vg-dealer-page--account { padding-top: 1.5rem; }

.vg-dealer-account-header {
    max-width: 1200px;
    margin: 0 auto 1.5rem;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1.5rem;
    flex-wrap: wrap;
}
.vg-dealer-eyebrow {
    display: block;
    font-size: .7rem;
    font-weight: 800;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--vg-primary);
}
.vg-dealer-account-header h1 {
    font-size: 1.5rem;
    font-weight: 800;
    margin: .3rem 0 .2rem;
    color: var(--vg-text);
}
.vg-dealer-account-actions { display: flex; gap: .5rem; flex-wrap: wrap; }

.vg-dealer-account-body {
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 320px;
    gap: 1.5rem;
    align-items: start;
}

.vg-dealer-panel {
    background: #fff;
    border: 1px solid var(--vg-border);
    border-radius: var(--vg-radius);
    overflow: hidden;
}
.vg-dealer-panel-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: .9rem 1.15rem;
    border-bottom: 1px solid var(--vg-border);
    background: var(--vg-bg-subtle);
}
.vg-dealer-panel-head h2 {
    font-size: .95rem;
    font-weight: 800;
    margin: 0;
    color: var(--vg-text);
    display: flex;
    align-items: center;
    gap: .5rem;
}
.vg-dealer-panel-head h2 i { color: var(--vg-primary); font-size: .85rem; }

/* Shortlist */
.vg-dealer-saved { list-style: none; margin: 0; padding: 0; }
.vg-dealer-saved li {
    display: grid;
    grid-template-columns: 64px minmax(0, 1fr) auto;
    gap: 1rem;
    align-items: center;
    padding: 1rem 1.15rem;
    border-bottom: 1px solid var(--vg-border);
}
.vg-dealer-saved li:last-child { border-bottom: none; }

.vg-dealer-saved-logo {
    width: 64px;
    height: 64px;
    border: 1px solid var(--vg-border);
    border-radius: var(--vg-radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background: #fff;
}
.vg-dealer-saved-logo img { width: 100%; height: 100%; object-fit: contain; padding: 6px; }

.vg-dealer-saved-main { min-width: 0; }
.vg-dealer-saved-name {
    font-size: 1rem;
    font-weight: 700;
    color: var(--vg-text);
    text-decoration: none;
}
.vg-dealer-saved-name:hover { color: var(--vg-primary); text-decoration: underline; }
.vg-dealer-saved-cat {
    display: inline-block;
    margin-left: .5rem;
    font-size: .72rem;
    color: var(--vg-text-muted);
    background: var(--vg-bg-subtle);
    border: 1px solid var(--vg-border);
    border-radius: 999px;
    padding: 0 .5rem;
}
.vg-dealer-saved-main p {
    margin: .3rem 0 0;
    font-size: .84rem;
    color: var(--vg-text-muted);
    line-height: 1.5;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.vg-dealer-saved-actions {
    display: flex;
    align-items: center;
    gap: .6rem;
}
.vg-dealer-saved-rating {
    display: flex;
    align-items: center;
    gap: .3rem;
    font-size: .82rem;
    white-space: nowrap;
}

.vg-dealer-unsave {
    background: none;
    border: none;
    cursor: pointer;
    color: #ef4444;
    font-size: 1.05rem;
    line-height: 1;
    padding: .25rem;
    transition: transform var(--vg-transition), opacity var(--vg-transition);
}
.vg-dealer-unsave:hover    { transform: scale(1.12); }
.vg-dealer-unsave:disabled { opacity: .4; cursor: default; }

.vg-dealer-empty {
    text-align: center;
    padding: 2.5rem 1.5rem;
    color: var(--vg-text-muted);
}
.vg-dealer-empty i { font-size: 2rem; color: var(--vg-border); display: block; margin-bottom: .75rem; }
.vg-dealer-empty p { margin: 0 0 1rem; }

/* Details */
.vg-dealer-details {
    margin: 0;
    padding: 1.15rem;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: .45rem 1rem;
    font-size: .86rem;
}
.vg-dealer-details dt { color: var(--vg-text-muted); }
.vg-dealer-details dd { margin: 0; color: var(--vg-text); font-weight: 600; word-break: break-word; }
.vg-dealer-panel--details .vg-dealer-aside-note { padding: 0 1.15rem 1.15rem; margin: 0; }

/* ── Responsive ───────────────────────────────────────────────────────────── */

@media (max-width: 860px) {
    .vg-dealer-shell,
    .vg-dealer-account-body { grid-template-columns: 1fr; }

    /* The benefits panel leads on a phone: it is the reason to fill the form in. */
    .vg-dealer-shell .vg-dealer-aside { order: -1; }
}

@media (max-width: 560px) {
    .vg-dealer-page { padding: 1.5rem 1rem 2.5rem; }
    .vg-dealer-card { padding: 1.25rem; }
    .vg-dealer-row  { flex-direction: column; gap: 0; }
    .vg-dealer-field--narrow { flex: 1 1 auto; }

    .vg-dealer-saved li { grid-template-columns: 48px minmax(0, 1fr); }
    .vg-dealer-saved-logo { width: 48px; height: 48px; }
    .vg-dealer-saved-actions { grid-column: 1 / -1; justify-content: space-between; }
}

/* =============================================================================
   Vendor portal (/vendors/vendor-*)

   The vendor pages reuse the layout and field styles above rather than duplicating
   them: an auth card beside an explainer panel, then panels on the dashboard. Only
   what is genuinely new lives here — the status panel, the checklist and the history
   list.

   There is no plan picker: registration never asks which plan a vendor wants (Chris,
   2026-08-05). Tommy assigns it at approval.
   ============================================================================= */

/* ── How listing works ────────────────────────────────────────────────────── */

.vg-portal-steps {
    margin: 0;
    padding-left: 1.15rem;
    font-size: .85rem;
    color: var(--vg-text-soft);
    line-height: 1.55;
}
.vg-portal-steps li { padding: .3rem 0; }

/* ── Status panel ─────────────────────────────────────────────────────────── */

.vg-portal-status {
    padding: 1.15rem;
    margin-bottom: 1.25rem;
    border-left: 4px solid var(--vg-border);
}
.vg-portal-status p { margin: .35rem 0 0; color: var(--vg-text-muted); font-size: .9rem; }

.vg-portal-status--draft     { border-left-color: var(--vg-text-xmuted); }
.vg-portal-status--pending   { border-left-color: #d97706; }
.vg-portal-status--live      { border-left-color: var(--vg-success); }
.vg-portal-status--attention { border-left-color: var(--vg-danger); }

.vg-portal-status-head {
    display: flex;
    align-items: center;
    gap: .7rem;
    flex-wrap: wrap;
}
.vg-portal-status-badge {
    font-size: .7rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .06em;
    padding: .2rem .55rem;
    border-radius: 999px;
    background: var(--vg-bg-subtle);
    border: 1px solid var(--vg-border);
    color: var(--vg-text-soft);
    white-space: nowrap;
}
.vg-portal-status--live      .vg-portal-status-badge { background: #dcfce7; border-color: #86efac; color: #166534; }
.vg-portal-status--pending   .vg-portal-status-badge { background: #fef3c7; border-color: #fcd34d; color: #92400e; }
.vg-portal-status--attention .vg-portal-status-badge { background: #fee2e2; border-color: #fca5a5; color: #991b1b; }

.vg-portal-review-note {
    margin-top: .9rem;
    padding: .75rem .9rem;
    border-radius: var(--vg-radius-sm);
    background: #fef2f2;
    border: 1px solid #fecaca;
}
.vg-portal-review-note span {
    display: block;
    font-size: .72rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: #991b1b;
    margin-bottom: .25rem;
}
.vg-portal-review-note p { margin: 0; color: #7f1d1d; font-size: .88rem; }

.vg-portal-status-actions {
    margin-top: 1rem;
    display: flex;
    align-items: center;
    gap: .75rem;
    flex-wrap: wrap;
}
.vg-portal-submit-msg { font-size: .85rem; color: var(--vg-text-muted); }

/* ── Checklist and history ────────────────────────────────────────────────── */

.vg-portal-count { font-size: .78rem; color: var(--vg-text-muted); }

.vg-portal-checklist {
    list-style: none;
    margin: 0;
    padding: .9rem 1.15rem;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
    gap: .35rem .9rem;
}
.vg-portal-checklist li {
    display: flex;
    align-items: center;
    gap: .5rem;
    font-size: .88rem;
    color: var(--vg-text-muted);
}
.vg-portal-checklist li i { color: var(--vg-border); font-size: .9rem; }
.vg-portal-checklist li.is-done { color: var(--vg-text); }
.vg-portal-checklist li.is-done i { color: var(--vg-success); }

.vg-portal-editor-note {
    display: flex;
    gap: .8rem;
    align-items: flex-start;
    margin: 0 1.15rem 1.15rem;
    padding: .8rem .9rem;
    border: 1px dashed var(--vg-border);
    border-radius: var(--vg-radius-sm);
    background: var(--vg-bg-subtle);
}
.vg-portal-editor-note > i { color: var(--vg-text-xmuted); margin-top: .15rem; }
.vg-portal-editor-note p  { margin: .2rem 0 0; font-size: .85rem; color: var(--vg-text-muted); }

.vg-portal-history { list-style: none; margin: 0; padding: 0; }
.vg-portal-history li {
    padding: .65rem 1.15rem;
    border-bottom: 1px solid var(--vg-border);
    display: flex;
    flex-direction: column;
    gap: .1rem;
}
.vg-portal-history li:last-child { border-bottom: none; }
.vg-portal-history-when { font-size: .76rem; color: var(--vg-text-xmuted); }
.vg-portal-history-what { font-size: .88rem; color: var(--vg-text); }
.vg-portal-history-what em { color: var(--vg-text-muted); font-style: normal; }
.vg-portal-history-note { font-size: .84rem; color: var(--vg-text-muted); }