/* ===========================
Modern Neutral Q&A Card Styling (Final)
=========================== */

/* Design tokens */
:root {
--ab-bg: #ffffff;
--ab-bg-muted: #f7f7f8;
--ab-border: #e5e7eb;
--ab-ring: #cbd5e1;
--ab-text: #1e1f23;
--ab-text-muted: #6b7280;
--ab-title: #111827;
--ab-badge-bg: #e5e7eb; /* neutral gray badge background */
--ab-badge-text: #374151; /* dark gray text */
--ab-shadow: 0 1px 2px rgba(18, 23, 31, .06), 0 8px 24px rgba(18, 23, 31, .06);
}

/* Q&A card boundary */
.answerbase-widget .questions-list .item {
position: relative;
background: var(--ab-bg);
border: 1px solid var(--ab-border);
border-radius: 12px;
box-shadow: var(--ab-shadow);
padding: 20px 24px 20px 68px;
margin: 18px 0;
transition: box-shadow .2s ease, transform .05s ease;
}

.answerbase-widget .questions-list .item:hover {
box-shadow: 0 2px 6px rgba(18, 23, 31, .08), 0 12px 32px rgba(18, 23, 31, .08);
}

/* Title link (question) */
a.ab-link {
margin: 0 0 10px 0 !important;
display: block;
float: none !important;
width: 100%;
font-size: 1.05rem;
font-weight: 700;
color: var(--ab-title);
text-decoration: none;
}

a.ab-link:hover,
a.ab-link:focus-visible {
text-decoration: underline;
text-underline-offset: 3px;
}

/* Divider between Q and A */
.answerbase-widget .questions-list .item .answers-list {
border-top: 1px solid var(--ab-border);
margin-top: 14px;
padding-top: 14px;
}

/* Answer text */
.answers-list .answer-item .cell.auto .text {
position: relative;
margin: 0 0 10px 0 !important;
padding-left: 44px; /* creates space for the "A" */
display: block !important;
float: none !important;
width: 100%;
color: var(--ab-text);
line-height: 1.55;
}

/* Align the "A" circle neatly to the left */
.answers-list .answer-item .cell.auto .text:before {
content: "A";
position: absolute;
left: 0; /* keeps it to the left edge of the answer text */
top: 2px;
width: 30px;
height: 30px;
border-radius: 50%;
background-color: var(--ab-badge-bg);
color: var(--ab-badge-text);
display: flex;
align-items: center;
justify-content: center;
font-weight: bold;
font-size: 14px;
font-family: sans-serif !important;
}

/* Q badge for the question */
.ab-link:before {
content: "Q";
position: absolute;
left: 24px;
top: 20px;
width: 30px;
height: 30px;
border-radius: 50%;
background-color: var(--ab-badge-bg);
color: var(--ab-badge-text);
display: flex;
align-items: center;
justify-content: center;
font-weight: bold;
font-size: 14px;
font-family: sans-serif !important;
}

/* "Did this answer..." text next to voting */
.voting {
display: inline-flex;
align-items: center;
gap: 10px;
margin-top: 6px;
}

.voting:before {
content: "Did this answer your question?";
font-size: 12px;
color: var(--ab-text-muted);
font-weight: 500;
font-family: inherit !important;
margin-right: 6px;
}

/* Timestamp and meta */
span.timestamp {
font-size: 12px !important;
color: var(--ab-text-muted);
font-weight: 500;
}

/* Keep default style for "see full answer" (no overrides) */
.answerbase-widget .item a.see-more {
all: unset;
cursor: pointer;
font-size: 13px;
color: var(--ab-title);
text-decoration: underline;
}

/* Hide "follow" elements entirely */
.answerbase-widget .questions-list .item .follow {
display: none !important;
}

/* Checkbox label alignment */
.answerbase-widget .simple-ask-form input[type=checkbox] + input[type=hidden] + label {
margin-top: -30px;
margin-left: 28px;
display: block;
}

/* Remove legacy grid background/padding */
.grid-x.grid-margin-x.item > .cell.auto {
background: transparent !important;
padding: 0 !important;
}

/* Accessible focus */
.answerbase-widget a:focus-visible {
outline: 2px solid var(--ab-ring);
outline-offset: 2px;
border-radius: 6px;
}

/* Neutral dark mode version */
@media (prefers-color-scheme: dark) {
:root {
--ab-bg: #121417;
--ab-bg-muted: #1a1f26;
--ab-border: #2a2e35;
--ab-text: #e7e9ee;
--ab-text-muted: #9aa3ad;
--ab-title: #f4f6fb;
--ab-badge-bg: #2d323a;
--ab-badge-text: #d1d5db;
--ab-shadow: 0 1px 2px rgba(0,0,0,.4), 0 8px 24px rgba(0,0,0,.35);
}
}

/* ===========================
Keep your existing vote icon definitions AS-IS
=========================== */

/* Upvote/downvote images (your originals) */
.vote-up img[data-image-vote-up],
.vote-down img[data-image-vote-down] {
visibility: hidden; /* hides the image but keeps space */
width: 39px;
height: 24px;
background-size: contain;
background-repeat: no-repeat;
display: inline-block;
}

/* Replace up arrow */
.vote-up {
background-image: url('https://coinguide.services.answerbase.com/images/vote-yes.png');
}

/* Replace down arrow */
.vote-down {
background-image: url('https://coinguide.services.answerbase.com/images/vote-no.png');
margin-left: 5px;
}

/* Replace up arrow when selected */
.vote-up.voted {
background-image: url('https://coinguide.services.answerbase.com/images/vote-yes-selected.png');
}

/* Replace down arrow when selected */
.vote-down.voted {
background-image: url('https://coinguide.services.answerbase.com/images/vote-no-selected.png');
margin-left: 5px;
}