/* MyDesk Q&A – frontend styles v7. Column layout. */

/* Hide the plugin's built-in search/filter controls */
body .mdqa__controls { display: none !important; }

/* ── Status bar ─────────────────────────────────────────────────────────── */
body .mdqa__status {
    font-size: .85rem;
    color: #64748b !important;
    min-height: 1.2em;
    margin-bottom: .5rem;
}

/* ── List ───────────────────────────────────────────────────────────────── */
body .mdqa__list {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: .75rem !important;
    border: none !important;
    overflow: visible !important;
    background: transparent !important;
    height: auto !important;
}

body .mdqa__loading,
body .mdqa__no-results,
body .mdqa__error {
    padding: 2rem 1rem;
    text-align: center;
    color: #64748b !important;
    background: #ffffff !important;
    border-radius: 8px;
    border: 1px solid #e2e8f0 !important;
}

body .mdqa__error { color: #dc2626 !important; }

/* ── Item card ──────────────────────────────────────────────────────────── */
body .mdqa__item {
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 8px !important;
    box-shadow: 0 1px 3px rgba(0,0,0,.08), 0 4px 12px rgba(0,0,0,.06) !important;
    transition: box-shadow .15s, border-color .15s, transform .1s !important;
    overflow: hidden !important;
    list-style: none !important;
    color: #1e293b !important;
    height: auto !important;
    display: block !important;
}

body .mdqa__item:hover {
    box-shadow: 0 4px 16px rgba(0,0,0,.12) !important;
    transform: translateY(-1px) !important;
}

/* ── Item button (COLUMN layout: question top, footer bottom) ──────────── */
html body .mdqa__item-btn {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 10px !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: visible !important;
    padding: 14px 20px !important;
    background: #ffffff !important;
    color: #1e293b !important;
    cursor: pointer !important;
    border: none !important;
    box-sizing: border-box !important;
    text-align: left !important;
    writing-mode: horizontal-tb !important;
    text-decoration: none !important;
}

html body .mdqa__item-btn:hover,
html body .mdqa__item-btn:focus,
html body .mdqa__item-btn:active {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    height: auto !important;
    overflow: visible !important;
    writing-mode: horizontal-tb !important;
    background: transparent !important;
    outline: none !important;
}

/* ── Question text ──────────────────────────────────────────────────────── */
html body .mdqa__item-question {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    writing-mode: horizontal-tb !important;
    color: #1e293b !important;
    font-weight: 500 !important;
    font-size: 0.9375rem !important;
    line-height: 1.5 !important;
    white-space: normal !important;
    word-break: break-word !important;
    flex: none !important;
}

/* ── Footer row (badges + stats) ────────────────────────────────────────── */
html body .mdqa__item-footer {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 6px !important;
    width: 100% !important;
    writing-mode: horizontal-tb !important;
    flex: none !important;
}

/* ── Badges ─────────────────────────────────────────────────────────────── */
html body .mdqa__badge {
    display: inline-flex !important;
    align-items: center !important;
    padding: 2px 8px !important;
    border-radius: 4px !important;
    font-size: 0.75rem !important;
    font-weight: 500 !important;
    line-height: 1.4 !important;
    white-space: nowrap !important;
    writing-mode: horizontal-tb !important;
}

html body .mdqa__badge--popular {
    background: #fef3c7 !important;
    color: #92400e !important;
    border: 1px solid #fcd34d !important;
}

html body .mdqa__badge--product {
    background: #dbeafe !important;
    color: #1d4ed8 !important;
    border: 1px solid #bfdbfe !important;
}

html body .mdqa__badge--tag {
    background: #f1f5f9 !important;
    color: #475569 !important;
    border: 1px solid #e2e8f0 !important;
}

/* ── Stats ──────────────────────────────────────────────────────────────── */
html body .mdqa__item-stats {
    display: inline-flex !important;
    align-items: center !important;
    gap: 12px !important;
    margin-left: auto !important;
    color: #94a3b8 !important;
    font-size: 0.8rem !important;
    white-space: nowrap !important;
    writing-mode: horizontal-tb !important;
}

html body .mdqa__stat {
    display: inline-flex !important;
    align-items: center !important;
    gap: 3px !important;
    writing-mode: horizontal-tb !important;
}

/* ── Pagination ─────────────────────────────────────────────────────────── */
body .mdqa__pagination {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: .5rem !important;
    margin-top: 1.5rem !important;
    flex-wrap: wrap !important;
}

body .mdqa__pagination button {
    padding: .4rem .9rem !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 6px !important;
    background: #fff !important;
    color: #1e293b !important;
    cursor: pointer !important;
    font-size: .875rem !important;
    transition: background .15s, border-color .15s !important;
}

body .mdqa__pagination button:hover {
    background: #f0f7ff !important;
    border-color: #93c5fd !important;
}

body .mdqa__pagination button.active,
body .mdqa__pagination button[aria-current="page"] {
    background: #2563eb !important;
    color: #fff !important;
    border-color: #2563eb !important;
}

body .mdqa__pagination button:disabled {
    opacity: .4 !important;
    cursor: not-allowed !important;
}

/* ── Modal ──────────────────────────────────────────────────────────────── */
body #mdqa-modal {
    position: fixed !important;
    inset: 0 !important;
    z-index: 99999 !important;
    display: none !important;
}

body #mdqa-modal.is-open {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

body #mdqa-modal-backdrop {
    position: absolute !important;
    inset: 0 !important;
    background: rgba(15,23,42,.5) !important;
    backdrop-filter: blur(2px) !important;
}

body #mdqa-modal-inner {
    position: relative !important;
    z-index: 1 !important;
    background: #fff !important;
    border-radius: 12px !important;
    padding: 2rem !important;
    max-width: 640px !important;
    width: 90vw !important;
    max-height: 80vh !important;
    overflow-y: auto !important;
    color: #1e293b !important;
    box-shadow: 0 20px 60px rgba(0,0,0,.2) !important;
}

body #mdqa-modal-close {
    position: absolute !important;
    top: 1rem !important;
    right: 1rem !important;
    background: none !important;
    border: none !important;
    font-size: 1.5rem !important;
    cursor: pointer !important;
    color: #64748b !important;
    line-height: 1 !important;
    padding: 0 !important;
}

body #mdqa-modal-inner h2 {
    font-size: 1.25rem !important;
    font-weight: 600 !important;
    margin: 0 0 1rem !important;
    color: #0f172a !important;
}

body #mdqa-modal-inner .mdqa__answer {
    font-size: .9375rem !important;
    line-height: 1.7 !important;
    color: #334155 !important;
}

/* ── Modal box wrapper ────────────────────────────────────────────────────── */
body .mdqa__modal-box {
    position: relative !important;
    background: #fff !important;
    border-radius: 12px !important;
    max-width: 640px !important;
    width: 90vw !important;
    max-height: 80vh !important;
    overflow-y: auto !important;
    box-shadow: 0 20px 60px rgba(0,0,0,.2) !important;
}

/* ── Modal close button ───────────────────────────────────────────────────── */
body .mdqa__modal-close,
body #mdqa-modal-close {
    position: absolute !important;
    top: .75rem !important;
    right: .75rem !important;
    width: 2rem !important;
    height: 2rem !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: #f1f5f9 !important;
    border: none !important;
    border-radius: 50% !important;
    font-size: 1.25rem !important;
    cursor: pointer !important;
    color: #475569 !important;
    line-height: 1 !important;
    padding: 0 !important;
    z-index: 10 !important;
    transition: background .15s !important;
}

body .mdqa__modal-close:hover,
body #mdqa-modal-close:hover {
    background: #e2e8f0 !important;
    color: #0f172a !important;
}

/* ── Modal meta (badges in modal) ─────────────────────────────────────────── */
body #mdqa-modal-inner .mdqa__modal-meta {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
    margin-bottom: 1.25rem !important;
    margin-top: .25rem !important;
}