/* ==========================================================================
   BARG Vendor Portal — extends css/theme.css (same tokens, cards & buttons)
   ========================================================================== */

.vp-spacer { height: 120px; }
.vp-hero { padding-bottom: 64px; }
.vp-section { padding: 56px 0; }
.vp-narrow { max-width: 920px; }
.vp-section-title { text-align: left; margin-bottom: 1.5rem; }
.vp-title { font-size: clamp(1.8rem, 4vw, 2.6rem); display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem; margin-bottom: 0.4rem; }
.vp-muted { color: var(--muted); }
.vp-strong { font-weight: 600; }
.vp-hint { display: block; color: var(--muted); font-size: 0.85rem; margin: 0.35rem 0 0.75rem; }
.vp-meta { font-size: 0.85rem; color: var(--muted); margin: 0; }
.vp-back { font-size: 0.9rem; text-decoration: none; font-weight: 600; }
.vp-back i { margin-right: 0.35rem; }
.vp-error-text { color: var(--danger); font-weight: 600; }
.vp-inline { display: inline; }

/* Cards */
.vp-card {
    background: var(--surface);
    border: 2px solid var(--ink);
    border-radius: var(--radius);
    padding: 1.75rem;
    margin: 0 0 1.25rem;
    box-shadow: 4px 4px 0 var(--ink);
    min-width: 0;
}
.vp-card h3 { font-size: 1.1rem; display: flex; align-items: center; gap: 0.5rem; }
.vp-card h3 i { color: var(--accent); }
fieldset.vp-card { margin-inline: 0; }
.vp-card.contact-form-container { padding: 2.25rem; }

/* Steps (landing) */
.vp-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; }
.vp-step { background: var(--surface); border: 2px solid var(--ink); border-radius: var(--radius); padding: 1.5rem; }
.vp-step span { display: inline-block; font-family: var(--font-display); font-weight: 700; color: var(--accent); margin-bottom: 0.5rem; }
.vp-step h3 { font-size: 1.15rem; margin-bottom: 0.4rem; }
.vp-step p { color: var(--muted); font-size: 0.92rem; margin: 0; }

/* Forms */
.vp-form .submit-btn { margin-top: 0.5rem; }
.vp-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 1.25rem; }
.vp-checks { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.vp-check, .vp-radio, .form-group label.vp-check { display: inline-flex; align-items: flex-start; gap: 0.5rem; cursor: pointer; font-weight: 500 !important; }
.vp-checks .vp-check {
    padding: 0.5rem 0.85rem;
    border: 1.5px solid var(--line);
    border-radius: var(--pill);
    background: var(--bg);
    font-size: 0.88rem;
    line-height: 1.3;
    margin: 0 !important;
    transition: border-color 0.2s ease, background 0.2s ease;
}
.vp-checks .vp-check:hover { border-color: var(--ink); }
.vp-checks .vp-check:has(input:checked) { background: var(--accent-soft); border-color: var(--accent); color: var(--ink); }
/* theme.css styles every .form-group input (width:100%, appearance:none); undo that for checkboxes/radios */
.vp input[type="checkbox"], .vp input[type="radio"] {
    -webkit-appearance: auto !important;
    appearance: auto !important;
    width: 16px !important; height: 16px !important;
    padding: 0 !important; margin: 0.2rem 0 0 !important;
    border: 0; box-shadow: none !important; background: none;
    accent-color: var(--accent); flex-shrink: 0;
}
.vp-radio, .form-group label.vp-radio { display: flex; margin-bottom: 0.85rem; }
.vp-consent, .form-group label.vp-consent { display: flex; margin-top: 0.5rem; font-size: 0.9rem; }
.vp-cap-group { margin-bottom: 1.5rem; }
.has-error input, .has-error select, .has-error textarea { border-color: var(--danger) !important; }
.has-error .vp-checks .vp-check { border-color: rgba(229, 72, 77, 0.5); }
.vp-field-error { display: block; color: var(--danger); font-size: 0.82rem; font-weight: 600; margin-top: 0.35rem; }
.vp-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.vp-linkbtn { background: none; border: 0; padding: 0; color: var(--accent); font: inherit; font-weight: 600; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }

/* Alerts */
.vp-alert { padding: 0.9rem 1.15rem; border-radius: var(--radius-sm); border: 2px solid var(--ink); margin: 0 0 1.25rem; font-weight: 500; }
.vp-alert-success { background: #E3F6EA; }
.vp-alert-error { background: #FDE8E8; }
main > .container > .vp-alert { margin-top: 1.5rem; }

/* Auth */
.vp-auth { max-width: 520px; }
.vp-auth-links { margin: 1.25rem 0 0; text-align: center; font-size: 0.92rem; }

/* Badges & tags */
.vp-badge { display: inline-block; padding: 0.25rem 0.7rem; border-radius: var(--pill); font-size: 0.75rem; font-weight: 700; letter-spacing: 0.02em; border: 1.5px solid var(--ink); white-space: nowrap; font-family: var(--font-body); vertical-align: middle; }
.vp-badge-pending { background: #FFF4CC; }
.vp-badge-approved, .vp-badge-interested, .vp-badge-open { background: #D6F5E1; }
.vp-badge-rejected, .vp-badge-suspended { background: #FDE0E0; }
.vp-badge-declined, .vp-badge-closed { background: var(--bg-alt); color: var(--muted); }
.vp-tags { display: flex; flex-wrap: wrap; gap: 0.3rem; }
.vp-tag { display: inline-block; padding: 0.15rem 0.55rem; border-radius: var(--pill); background: var(--bg-alt); border: 1px solid var(--line); font-size: 0.75rem; line-height: 1.5; white-space: nowrap; }
.vp-tag-accent { background: var(--accent-soft); border-color: #B9CCFF; }

/* Toolbar & stats */
.vp-toolbar { display: flex; justify-content: space-between; align-items: flex-end; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.5rem; }
.vp-toolbar-tight { align-items: center; margin-bottom: 1rem; }
.vp-toolbar-tight h3 { margin: 0; }
.vp-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 0.75rem; margin-bottom: 1.25rem; }
.vp-stat { display: flex; flex-direction: column; padding: 1rem 1.2rem; border: 2px solid var(--ink); border-radius: var(--radius-sm); background: var(--surface); text-decoration: none; color: var(--ink); }
.vp-stat b { font-family: var(--font-display); font-size: 1.8rem; line-height: 1.1; }
.vp-stat span { font-size: 0.85rem; color: var(--muted); }
.vp-stat.is-active { background: var(--accent-soft); box-shadow: 3px 3px 0 var(--ink); }
.vp-status-form { display: flex; flex-wrap: wrap; gap: 0.6rem; align-items: center; }
.vp-status-form .primary-btn, .vp-status-form .secondary-btn { padding: 0.75rem 1.2rem; }

/* Filters */
.vp-filters { display: grid; grid-template-columns: 2fr repeat(5, 1fr) auto; gap: 0.75rem; align-items: end; padding: 1.25rem; }
.vp-filters .form-group { margin: 0; }
.vp-filters .form-group label { font-size: 0.8rem; }
.vp-filters input, .vp-filters select { padding: 0.65rem 0.8rem !important; font-size: 0.9rem; }
.vp-filter-actions { display: flex; gap: 0.75rem; align-items: center; }
.vp-filter-actions .primary-btn { padding: 0.7rem 1.2rem; }

/* Tables */
.vp-table-wrap { overflow-x: auto; }
.vp-card.vp-table-wrap { padding: 0.5rem; }
.vp-table { width: 100%; border-collapse: collapse; font-size: 0.9rem; }
.vp-table th { text-align: left; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); padding: 0.75rem; border-bottom: 2px solid var(--ink); white-space: nowrap; }
.vp-table td { padding: 0.85rem 0.75rem; border-bottom: 1px solid var(--line); vertical-align: top; }
.vp-table tbody tr:hover { background: var(--bg); }
.vp-table td .vp-tags { max-width: 280px; }

/* Detail */
.vp-detail-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; }
.vp-dl { display: grid; grid-template-columns: 170px 1fr; gap: 0.6rem 1rem; margin: 0 0 1rem; }
.vp-dl dt { font-weight: 600; color: var(--ink); font-size: 0.9rem; }
.vp-dl dd { margin: 0; overflow-wrap: anywhere; }
.vp-dl-wide { grid-template-columns: 260px 1fr; }
.vp-prose { white-space: normal; overflow-wrap: anywhere; }
.vp-mini-list { list-style: none; padding: 0; margin: 0; }
.vp-mini-list li { display: flex; justify-content: space-between; gap: 0.75rem; padding: 0.55rem 0; border-bottom: 1px solid var(--line); }
details.vp-card summary { cursor: pointer; font-family: var(--font-display); font-weight: 600; font-size: 1.05rem; color: var(--ink); }
details.vp-card summary i { color: var(--accent); margin-right: 0.35rem; }
details.vp-card[open] summary { margin-bottom: 1.25rem; }
.vp-danger summary i { color: var(--danger) !important; }
.vp-btn-danger { border-color: var(--danger) !important; color: var(--danger) !important; }
.vp-btn-danger:hover { background: var(--danger) !important; color: #fff !important; }

/* Profile summary */
.vp-summary { display: grid; grid-template-columns: 1.3fr 1fr; gap: 1.5rem; align-items: center; }
.vp-summary-status p { color: var(--muted); font-size: 0.92rem; margin: 0.6rem 0 1rem; }

/* Lists */
.vp-list { display: grid; gap: 0.9rem; }
.vp-list-item { display: flex; justify-content: space-between; gap: 1rem; align-items: center; text-decoration: none; color: inherit; margin: 0; transition: transform 0.2s var(--ease), box-shadow 0.2s var(--ease); }
.vp-list-item:hover { transform: translate(-2px, -2px); box-shadow: 6px 6px 0 var(--accent); }
.vp-list-item h3 { margin-bottom: 0.25rem; }
.vp-list-item p { margin: 0 0 0.25rem; }
.vp-list-status { display: flex; align-items: center; gap: 0.75rem; }
.vp-empty { text-align: center; padding: 2.5rem 1.5rem; }
.vp-empty i { font-size: 2rem; color: var(--accent); margin-bottom: 0.75rem; }

/* Progress */
.vp-progress { display: flex; gap: 0.5rem; list-style: none; padding: 0; margin: 0.75rem 0 1.5rem; counter-reset: s; flex-wrap: wrap; }
.vp-progress li { counter-increment: s; padding: 0.4rem 0.9rem; border-radius: var(--pill); border: 1.5px solid var(--line); font-size: 0.85rem; color: var(--muted); }
.vp-progress li::before { content: counter(s) ". "; font-weight: 700; }
.vp-progress li.is-current { border-color: var(--ink); background: var(--ink); color: #fff; }
.vp-progress li.is-done { border-color: var(--accent); color: var(--accent); }
.vp-bar { height: 12px; border: 2px solid var(--ink); border-radius: var(--pill); overflow: hidden; background: var(--bg); margin: 0.75rem 0; }
.vp-bar span { display: block; height: 100%; background: var(--accent-grad); transition: width 0.4s var(--ease); }
.vp-sending.is-js [data-send-fallback] { display: none; }

.vp-footer { padding-top: 0; }
.vp-footer .footer-bottom { margin-top: 0; }

@media (max-width: 1100px) {
    .vp-filters { grid-template-columns: repeat(3, 1fr); }
    .vp-filters .form-group:first-child { grid-column: 1 / -1; }
}
@media (max-width: 860px) {
    .vp-steps { grid-template-columns: 1fr 1fr; }
    .vp-detail-grid, .vp-summary { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
    .vp-section { padding: 36px 0; }
    .vp-card, .vp-card.contact-form-container { padding: 1.25rem; }
    .vp-steps, .vp-grid-2, .vp-filters { grid-template-columns: 1fr; }
    .vp-dl, .vp-dl-wide { grid-template-columns: 1fr; gap: 0.15rem; }
    .vp-dl dd { margin-bottom: 0.6rem; }
    .vp-list-item { flex-direction: column; align-items: flex-start; }
}

/* Invite vendors */
.vp-more { margin: 0.25rem 0 1.25rem; }
.vp-more summary { cursor: pointer; font-weight: 600; color: var(--accent); margin-bottom: 0.75rem; }
.vp-more code { font-size: 0.85em; background: var(--bg-alt); padding: 0.05rem 0.35rem; border-radius: 4px; }
.vp-invite-note { margin-bottom: 1.5rem; }

/* Team / sender note */
.vp-sender { display: flex; gap: 0.9rem; align-items: flex-start; }
.vp-sender > i { color: var(--accent); font-size: 1.2rem; margin-top: 0.2rem; }
.vp-sender p { margin: 0; }

/* NDA */
.vp-nda-doc { max-height: 460px; overflow-y: auto; padding: 1.25rem 1.4rem; margin-bottom: 1.25rem; background: var(--bg); border: 1.5px solid var(--line); border-radius: var(--radius-sm); font-family: Georgia, 'Times New Roman', serif; font-size: 0.95rem; line-height: 1.6; }
.vp-nda-doc p { margin: 0 0 0.85rem; }
.vp-nda-doc:focus { outline: 2px solid var(--accent); }
.vp-nda-form .submit-btn { margin-top: 1rem; }
.vp-nda-cta, .vp-nda-signed { display: flex; gap: 1rem; align-items: center; justify-content: space-between; flex-wrap: wrap; }
.vp-nda-cta { background: var(--accent-soft); }
.vp-nda-cta > i { font-size: 1.8rem; color: var(--accent); }
.vp-nda-cta > div { flex: 1; min-width: 220px; }
.vp-nda-cta h3, .vp-nda-signed h3 { margin: 0.25rem 0; }
.vp-nda-cta p, .vp-nda-signed p { margin: 0; }
.vp-nda-link { display: inline-block; margin-top: 0.75rem; font-size: 0.9rem; }
.vp-locked { margin: 1rem 0 0; }
.vp-mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace !important; font-size: 0.85rem !important; line-height: 1.5; }

/* NDA signatures */
.vp-sig-script { font-family: 'Dancing Script', 'Brush Script MT', 'Segoe Script', cursive; font-size: 1.35em; padding: 0 0.25rem; }
.vp-nda-cs { margin-top: 1rem !important; padding-top: 0.85rem; border-top: 1px dashed var(--line); font-family: var(--font-body); font-size: 0.9rem; }

.vp-badge-completed { background: var(--accent-soft); }
.vp-visibility { margin: 0 0 1.25rem; }