/* Car Dealership Simulation styles. Color tokens (--ld-navy, --ld-gold,
   etc.) and base .ld-btn classes come from livedemos-core's
   site-chrome.php, loaded on every page via render_header(). This file
   only adds what's specific to the simulation itself. */

.ld-sim-main { max-width: 1100px; margin: 0 auto; padding: 50px 24px 40px; }

/* ---------------- Role picker ---------------- */
.ld-role-picker-hero { text-align: center; padding: 20px 0 10px; }
.ld-sim-kicker {
    display:inline-block; background: var(--ld-bg-alt); color: var(--ld-navy);
    font-size:12px; font-weight:600; padding:5px 14px; border-radius:999px;
    text-transform:uppercase; letter-spacing:.03em; margin-bottom:18px;
}
.ld-picker-headline { font-size: clamp(26px,4vw,38px); margin: 0 0 14px; }
.ld-picker-subhead { color: var(--ld-muted); font-size:15.5px; max-width:560px; margin:0 auto 40px; }
.ld-picker-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:22px; text-align:left; }
.ld-picker-card {
    border:1px solid var(--ld-border); border-radius:14px; padding:28px;
    background:#fff; transition: box-shadow .2s ease, transform .2s ease;
}
.ld-picker-card:hover { box-shadow: 0 16px 34px rgba(11,27,51,0.12); transform: translateY(-3px); }
.ld-picker-card h3 { margin:0 0 10px; font-size:19px; }
.ld-picker-card p { color: var(--ld-muted); font-size:14px; line-height:1.6; margin:0 0 16px; }
.ld-picker-meta { font-size:12.5px; color: var(--ld-muted); margin-bottom:18px; }
.ld-picker-meta code { background: var(--ld-bg-alt); padding:2px 7px; border-radius:5px; }

/* ---------------- Dashboard shell ---------------- */
.ld-dashboard-view { padding-top: 6px; }
.ld-dash-header { display:flex; align-items:flex-end; justify-content:space-between; gap:16px; flex-wrap:wrap; margin-bottom: 28px; }
.ld-dash-header h2 { margin: 6px 0 0; font-size: 24px; }
.ld-badge-buyer, .ld-badge-dealer {
    display:inline-block; font-size:11.5px; font-weight:600; padding:4px 11px;
    border-radius:999px; text-transform:uppercase; letter-spacing:.02em;
}
.ld-badge-buyer { background:#e6f4ea; color:#1a7f37; }
.ld-badge-dealer { background:#fff4e5; color:#92610c; }

/* ---------------- Bottom conversion bar ---------------- */
.ld-bottom-bar { background: var(--ld-navy); color:#fff; position: sticky; bottom:0; z-index: 30; margin-top: 40px; }
.ld-bottom-bar-inner { max-width:1100px; margin:0 auto; padding:14px 24px; display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; }
.ld-bottom-text { font-size: 13.5px; color:#c3cadb; }
.ld-bottom-text strong { color:#fff; }

/* ---------------- Loading / error ---------------- */
.ld-loading, .ld-error { padding: 24px; text-align: center; color: var(--ld-muted); }
.ld-error { color: #b3261e; }

/* ---------------- Buyer: vehicle grid ---------------- */
.ld-vehicle-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:20px; }
.ld-vehicle-card {
    border:1px solid var(--ld-border); border-radius:12px; overflow:hidden;
    background:#fff; min-width:0; transition: box-shadow .2s ease, transform .2s ease;
}
.ld-vehicle-card:hover { box-shadow: 0 14px 30px rgba(11,27,51,0.10); transform: translateY(-2px); }
.ld-vc-image { height:160px; background-size:cover; background-position:center; background-color: var(--ld-bg-alt); }
.ld-vc-body { padding:16px; }
.ld-vc-body h4 { margin:0 0 6px; font-size:15.5px; word-break:break-word; }
.ld-vc-meta { color: var(--ld-muted); font-size:13px; margin:0 0 8px; }
.ld-vc-price { font-weight:700; font-size:18px; margin:0 0 14px; color: var(--ld-navy); }
.ld-vc-actions { display:flex; flex-wrap:wrap; gap:8px; }

.ld-btn-small { padding:7px 13px; font-size:12.5px; }

/* ---------------- Modal (finance, valuation, contact dealer) ---------------- */
.ld-modal-overlay {
    position: fixed; inset: 0; background: rgba(11,27,51,0.55);
    display: flex; align-items: center; justify-content: center;
    z-index: 9999; padding: 16px;
}
.ld-modal { background: #fff; border-radius: 14px; padding: 28px; max-width: 440px; width: 100%; }
.ld-modal h3 { margin-top:0; }
.ld-modal-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 20px; }
.ld-success-text { color: #1a7f37; }
.ld-modal label { display:block; font-size:13px; font-weight:600; margin:14px 0 5px; }
.ld-modal input, .ld-modal select {
    width:100%; padding:9px 11px; border:1px solid var(--ld-border); border-radius:7px; font-size:14px;
}
.ld-valuation-result {
    background: var(--ld-bg-alt); border-radius: 10px; padding: 16px; margin-top: 16px; text-align:center;
}
.ld-valuation-result strong { font-size: 22px; color: var(--ld-navy); display:block; }

/* ---------------- Dealer: tables ---------------- */
.ld-dealer-section { margin-bottom: 36px; }
.ld-dealer-section-head { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:14px; flex-wrap:wrap; }
.ld-dealer-section h3 { margin: 0; }
.ld-table-scroll { overflow-x: auto; width: 100%; border:1px solid var(--ld-border); border-radius:12px; }
.ld-table { width: 100%; border-collapse: collapse; min-width: 560px; }
.ld-table th, .ld-table td {
    text-align: left; padding: 12px 14px; border-bottom: 1px solid var(--ld-border);
    font-size: 14px; vertical-align: middle;
}
.ld-table tbody tr { transition: background .15s ease; }
.ld-table tbody tr:hover { background: var(--ld-bg-alt); }
.ld-table tbody tr:last-child td { border-bottom: none; }
.ld-price-input { width: 110px; padding: 6px 8px; border:1px solid var(--ld-border); border-radius:6px; }
.ld-status-select { padding: 6px 8px; border:1px solid var(--ld-border); border-radius:6px; }
.ld-status-pill {
    display: inline-block; padding: 3px 10px; border-radius: 999px;
    background: var(--ld-bg-alt); color: #333; font-size: 12px;
}
.ld-lead-phone { color: var(--ld-muted); font-size: 12px; }
.ld-save-status { font-size: 12.5px; margin-left: 8px; color: var(--ld-muted); }

@media (max-width: 600px) {
    .ld-vehicle-grid { grid-template-columns: 1fr; }
    .ld-bottom-bar-inner { flex-direction: column; align-items: flex-start; }
}