/* ===========================================================
   RIANO — Diskuze u produktu (frontend)
   Bubliny dotazů (vlevo, šedé) + odpovědi adminů (odsazené, brand accent),
   kruhový avatar, meta řádek, modal formulář, load-more. Responzivní.
   Brand barva = var(--default-color).
   =========================================================== */

.discussion {
    margin: 10px 0 20px;
}

/* --- horní CTA --- */
.discussion-cta-top {
    margin-bottom: 22px;
}

/* --- seznam --- */
.discussion-list {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.discussion-item {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* --- bublina dotazu --- */
.discussion-q {
    max-width: 78%;
}

.discussion-bubble {
    background: #f4f4f6;
    border-radius: 16px 16px 16px 4px;
    padding: 14px 18px;
    position: relative;
}

.discussion-meta {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 6px;
}

.discussion-author {
    font-weight: 700;
    font-size: 15px;
    color: #222;
}

.discussion-date {
    font-size: 12px;
    color: #9a9aa2;
}

.discussion-text {
    font-size: 15px;
    line-height: 1.5;
    color: #333;
    word-break: break-word;
}

/* --- odpověď admina --- */
.discussion-a {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    max-width: 82%;
    margin-left: auto;
    flex-direction: row-reverse;
}

.discussion-avatar {
    flex: 0 0 40px;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    overflow: hidden;
    background: var(--default-color);
    display: flex;
    align-items: center;
    justify-content: center;
}

.discussion-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.discussion-avatar-fallback {
    color: #fff;
    font-size: 16px;
    line-height: 1;
}

.discussion-bubble--admin {
    background: #fff;
    border: 1px solid var(--default-color);
    border-radius: 16px 16px 4px 16px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, .04);
}

.discussion-bubble--admin .discussion-author {
    color: var(--default-color);
}

.discussion-position {
    font-size: 12px;
    color: #9a9aa2;
    margin-bottom: 6px;
    margin-top: -2px;
}

/* --- prázdný stav --- */
.discussion-empty {
    text-align: center;
    padding: 30px 15px;
    background: #fafafb;
    border-radius: 14px;
}

.discussion-empty p {
    font-size: 16px;
    color: #666;
    margin-bottom: 16px;
}

/* --- načíst další --- */
.discussion-more-wrap {
    text-align: center;
    margin-top: 22px;
}

/* --- modal formulář --- */
.discussion-form .form-group {
    margin-bottom: 16px;
}

.discussion-form label {
    display: block;
    font-weight: 600;
    margin-bottom: 6px;
    font-size: 14px;
}

.discussion-gdpr {
    display: block;
    margin-top: 6px;
    font-size: 12px;
    color: #9a9aa2;
}

.discussion-form .btn-block {
    width: 100%;
    margin-top: 6px;
}

/* honeypot — skryté pole (vizuálně mimo obraz, ne display:none) */
.discussion-hp {
    position: absolute !important;
    left: -9999px !important;
    width: 1px;
    height: 1px;
    opacity: 0;
    overflow: hidden;
}

/* inline chyby k polím */
.discussion-field-error {
    display: none;
    color: #d9534f;
    font-size: 13px;
    margin-top: 5px;
}

.discussion-field-error.show {
    display: block;
}

/* obecná chybová hláška */
.discussion-form-msg {
    color: #d9534f;
    font-size: 14px;
    margin: 8px 0;
}

.discussion-form-msg.show {
    padding: 10px 14px;
    background: #fdecea;
    border-radius: 10px;
}

/* success hláška — skrytá do odeslání formuláře, zobrazí ji JS (discussion-v2.js) */
.discussion-form-success {
    display: none;
    padding: 16px 18px;
    background: #eaf7ee;
    border: 1px solid #b7e0c3;
    border-radius: 12px;
    color: #256b39;
    font-size: 15px;
    text-align: center;
}

/* modal s formulářem dotazu — nad ostatními modaly / lightboxem */
.discussion-modal {
    z-index: 9999999;
}

/* --- mobil --- */
@media (max-width: 767px) {
    .discussion-q,
    .discussion-a {
        max-width: 100%;
    }
}