/* ==========================================================================
   Vehicle Q&A — threaded messaging styles
   ========================================================================== */

/* ── Section ──────────────────────────────────────────────────────────────── */

.vacbp-qa-section {
    margin-top: 2.5rem;
}

.vacbp-qa-section input[type="text"],
.vacbp-qa-section input[type="number"],
.vacbp-qa-section input[type="email"],
.vacbp-qa-section input[type="url"],
.vacbp-qa-section select,
.vacbp-qa-section textarea {
    width: 100%;
    padding: 12px 14px;
    border: 1px solid var(--vacbp-color-border-strong);
    border-radius: var(--vacbp-radius-md);
    font-family: inherit;
    color: var(--vacbp-color-heading);
    transition: all 0.2s;
    background: var(--vacbp-color-bg);
}

/* Title — "Questions & Answers (3)" — plain bold, no badge */
.vacbp-qa-title {
    font-weight: 500 !important;
    color: var(--vacbp-color-heading);
    margin: 0 0 1.25rem;
    line-height: 1.2;
    margin-top: 20px !important;
    margin-bottom: 20px !important;
}

/* ── Ask-a-question bar ───────────────────────────────────────────────────── */

.vacbp-ask-question-wrapper {
    margin-bottom: 2rem;
}

.vacbp-question-form {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

/* Input + button on one row */
.vacbp-qa-input-row {
    display: flex;
    align-items: stretch;
    gap: 1rem;
    border-radius: var(--vacbp-radius-sm);
    /* overflow: hidden; */
}

.vacbp-qa-input-row--guest {
    cursor: pointer;
}

.vacbp-qa-main-input {
    flex: 1;
    border: none;
    outline: none;
    padding: 0.75rem 1rem;
    font-family: inherit;
    color: var(--vacbp-color-heading);
    background: var(--vacbp-color-bg);
    min-width: 0;
    border-radius: 5px;
}

.vacbp-qa-main-input::placeholder {
    color: var(--vacbp-color-text-faint);
}

.vacbp-qa-main-input[readonly] {
    cursor: pointer;
}

/* "Send Question" — black pill button */
.vacbp-qa-btn-send {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--vacbp-color-heading);
    color: var(--vacbp-color-primary-text);
    border: none;
    padding: 10px 16px;
    font-weight: 500;
    font-family: inherit;
    cursor: pointer;
    white-space: nowrap;
    text-decoration: none;
    border-radius: 7px;
    transition: background var(--vacbp-transition);
    line-height: 1;
}

.vacbp-qa-btn-send:hover {
    background: var(--vacbp-color-heading);
    color: var(--vacbp-color-primary-text);
    opacity: 0.85;
}

/* Feedback message under the form */
.vacbp-qa-feedback {
    padding: 0.2rem 0;
}

.vacbp-qa-feedback.vacbp-qa-error   { color: var(--vacbp-color-danger); }
.vacbp-qa-feedback.vacbp-qa-success { color: var(--vacbp-color-success); }

/* ── Thread ──────────────────────────────────────────────────────────────── */

.vacbp-qa-thread {
    display: flex;
    flex-direction: column;
}

.vacbp-qa-empty {
    color: var(--vacbp-color-text-faint);
    font-style: italic;
    margin: 0;
}

/* Horizontal divider between top-level questions */
.vacbp-qa-divider {
    border: none;
    border-top: 1px solid var(--vacbp-color-border);
    margin-bottom: 1.25rem;
}

/* ── Top-level question node ─────────────────────────────────────────────── */

.vacbp-qa-question {
    padding: 0.25rem 0;
}

/* "Q: Are service records available?" — bold */
.vacbp-qa-q-text {
    font-weight: 700;
    color: var(--vacbp-color-heading);
    margin-bottom: 0.3rem;
    line-height: 1.4;
}

/* "Asked by user_xyz - 1 day ago" — small gray */
.vacbp-qa-q-meta {
    font-size: var(--vacbp-font-size-xs);
    color: var(--vacbp-color-text-faint);
    margin-bottom: 0.75rem;
}

/* ── Reply node (any depth > 0) ──────────────────────────────────────────── */

.vacbp-qa-reply {
    margin-top: 0.5rem;
    margin-left: 0;       /* indent is on .vacbp-qa-a-wrap */
}

/* Blue left border wrap */
.vacbp-qa-a-wrap {
    border-left: 3px solid var(--vacbp-color-heading);
    padding-left: 1rem;
    margin-bottom: 0.25rem;
}

.vacbp-qa-seller-response-wrap{
    border-left: 3px solid var(--vacbp-color-primary) !important;
}

/* "A: Yes, full service history available" — bold */
.vacbp-qa-a-text {
    font-weight: 700;
    color: var(--vacbp-color-heading);
    margin-bottom: 0.3rem;
    line-height: 1.4;
}

/* "Seller response - 18 hrs ago" — small gray */
.vacbp-qa-a-meta {
    font-size: var(--vacbp-font-size-xs);
    color: var(--vacbp-color-text-faint);
}

.vacbp-qa-seller-badge {
    background-color: var(--vacbp-color-primary);
    color: var(--vacbp-color-primary-text);
    /* font-size: 0.65rem; */
    padding: 0.15rem 0.45rem;
    border-radius: var(--vacbp-radius-sm);
}

/* Nested replies get a slight left shift */
.vacbp-qa-replies {
    display: flex;
    flex-direction: column;
    margin-left: 2rem;
}

/* ── Reply button & inline form ──────────────────────────────────────────── */

/* Hide reply button by default; show on hover over the question node */
.vacbp-qa-node-actions {
    margin-top: 0.25rem;
    opacity: 0;
    transition: opacity var(--vacbp-transition);
}

.vacbp-qa-node:hover .vacbp-qa-node-actions,
.vacbp-qa-node:focus-within .vacbp-qa-node-actions {
    opacity: 1;
}

.vacbp-qa-reply-btn, .vacbp-qa-reply-btn-disabled {
    background: none;
    border-radius: 5px !important;
    color: var(--vacbp-color-primary);
    font-weight: 600;
    cursor: pointer;
    font-size: var(--vacbp-font-size-xs);
    padding: 5px 10px !important;
    font-family: inherit;
}

.vacbp-qa-reply-btn:hover {
    text-decoration: underline;
}

/* Inline reply form */
.vacbp-qa-reply-form-wrapper {
    margin-top: 0.65rem;
}

.vacbp-qa-inline-form {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    border: 1px solid var(--vacbp-color-border-strong);
    border-radius: var(--vacbp-radius-sm);
    overflow: hidden;
}

.vacbp-qa-reply-input {
    flex: 1;
    border: none;
    outline: none;
    padding: 0.6rem 0.85rem;
    font-family: inherit;
    min-width: 0;
}

.vacbp-qa-reply-actions {
    display: flex;
    gap: 0;
}

.vacbp-qa-reply-actions .vacbp-qa-btn-send {
    border-radius: 7px;
    /* padding: 0.6rem 1rem; */
}

.vacbp-qa-btn-cancel {
    background: none;
    border: none;
    color: var(--vacbp-color-text-muted);
    font-family: inherit;
    cursor: pointer;
    padding: 0.6rem 0.75rem;
    white-space: nowrap;
}

.vacbp-qa-btn-cancel:hover {
    color: var(--vacbp-color-heading);
}

/* ── Thread collapse / expand ─────────────────────────────────────────────── */

.vacbp-qa-expand-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    background: none;
    border: none;
    color: var(--vacbp-color-heading);
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    padding: 0.35rem 0;
    margin: 0.35rem 0 0.1rem;
    line-height: 1;

    margin-bottom: 1rem;

    /* position: relative;
    left: -2rem; */
}

.vacbp-qa-expand-btn:hover {
    text-decoration: underline;
    background-color: transparent;
}

.vacbp-qa-expand-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    margin: 0;
    width: 1.15rem;
    height: 1.15rem;
    background: var(--vacbp-color-heading);
    color: var(--vacbp-color-primary-text);
    /* font-size: 0.75rem; */
    /* font-weight: 700; */
    border-radius: 50%;
    /* line-height: 1; */
    /* flex-shrink: 0; */
}