/* ─── CarSell — Social Share Bar ─────────────────────────────────────────── */

.csss-bar {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    padding: 14px 0;
    border-top: 1px solid #e2e8f0;
    border-bottom: 1px solid #e2e8f0;
    margin: 8px 0 24px;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

.csss-label {
    font-size: 13px;
    font-weight: 600;
    color: #64748b;
    margin-right: 4px;
}

/* ── Button base ─────────────────────────────────────────────────────────── */

.csss-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 14px;
    border-radius: 5px;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    border: none;
    cursor: pointer;
    transition: background 0.15s, transform 0.1s, opacity 0.15s;
    line-height: 1;
}

.csss-btn:hover {
    text-decoration: none;
    transform: translateY(-1px);
    opacity: .9;
}

/* ── Twitter / X ─────────────────────────────────────────────────────────── */

.csss-btn--twitter {
    background: #000;
    color: #fff;
}
.csss-btn--twitter:hover { color: #fff; background: #111; }

/* ── Facebook ────────────────────────────────────────────────────────────── */

.csss-btn--facebook {
    background: #1877f2;
    color: #fff;
}
.csss-btn--facebook:hover { color: #fff; background: #166fe5; }

/* ── Copy link ───────────────────────────────────────────────────────────── */

.csss-btn--copy {
    background: #f1f5f9;
    color: #334155;
    border: 1px solid #cbd5e1;
}
.csss-btn--copy:hover { background: #e2e8f0; color: #1d2327; }

.csss-btn--copy.csss-copied {
    background: #dcfce7;
    color: #15803d;
    border-color: #bbf7d0;
}

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

@media ( max-width: 480px ) {
    .csss-btn span { display: none; }
    .csss-btn { padding: 9px 12px; }
    .csss-label { display: none; }
}