/*
 * faq-modern.css — scoped styles for the "Weitere häufige Fragen" / "Дополнительные вопросы" block on /de/fragen-und-antworten and /ru/vopros-otvet.
 * Reuses Preise design tokens from design-system.css. No global resets.
 * All selectors are nested under .faq-additional or .faq-additional-cta.
 */

.faq-additional,
.faq-additional-cta,
.faq-section__ask {
    box-sizing: border-box;
    font-family: var(--pa-font, Inter, "Segoe UI", Roboto, Arial, sans-serif);
    color: var(--pa-text, #1f2937);
}

/* ---------- "Frage stellen" / RU ask button ---------- */
.faq-section__ask {
    max-width: 980px;
    margin: 0 auto;
    padding: 24px 16px 8px;
    display: flex;
    justify-content: flex-end;
}

.faq-ask-button {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 44px;
    padding: 10px 22px;
    border-radius: var(--pa-radius-btn, 6px);
    background: var(--pa-accent, #c9a666);
    color: var(--pa-primary-dark, #1f2937);
    border: 1px solid var(--pa-accent, #c9a666);
    font-weight: 600;
    font-size: 15px;
    line-height: 1.2;
    text-decoration: none;
    transition: background-color .18s ease, color .18s ease, border-color .18s ease, transform .12s ease;
    cursor: pointer;
}

.faq-ask-button:hover,
.faq-ask-button:focus {
    background: var(--pa-primary-dark, #1f2937);
    border-color: var(--pa-primary-dark, #1f2937);
    color: #ffffff;
    text-decoration: none;
}

.faq-ask-button:focus-visible {
    outline: 2px solid var(--pa-accent, #c9a666);
    outline-offset: 2px;
}

.faq-ask-button:active { transform: translateY(1px); }

.faq-ask-button__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .55);
    color: inherit;
    font-weight: 700;
    font-size: 16px;
    line-height: 1;
}

.faq-ask-button:hover .faq-ask-button__icon,
.faq-ask-button:focus .faq-ask-button__icon {
    background: rgba(255, 255, 255, .18);
    color: #ffffff;
}

/* ---------- Section wrapper ---------- */
.faq-additional {
    padding: 24px 0 32px;
    background: var(--pa-bg-alt, #f9f8f6);
}

/* Primary list (old DB questions) — sits directly under the ask-button row */
.faq-additional.faq-additional--primary {
    padding-top: 8px;
    padding-bottom: 8px;
}

/* When followed by the secondary block, keep them visually as one continuous section */
.faq-additional.faq-additional--primary + .faq-additional { padding-top: 24px; }

.faq-additional .uibox-container {
    max-width: 980px;
    margin: 0 auto;
    padding: 0 16px;
}

/* ---------- Heading + intro ---------- */
.faq-additional__head {
    margin-bottom: 28px;
    text-align: center;
}

.faq-additional__title {
    font-size: clamp(26px, 4.2vw, 36px);
    line-height: 1.15;
    font-weight: 700;
    color: var(--pa-primary-dark, #1f2937);
    margin: 0 0 10px;
    letter-spacing: -0.01em;
}

.faq-additional__title .text-accent {
    color: var(--pa-accent-text, #8a6a2f);
}

.faq-additional__intro {
    font-size: 16px;
    line-height: 1.55;
    color: var(--pa-text-muted, #6b7280);
    margin: 0 auto;
    max-width: 640px;
}

/* ---------- Card list ---------- */
.faq-additional__list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.faq-additional .faq-card {
    background: var(--pa-bg, #ffffff);
    border: 1px solid var(--pa-border, #e5e7eb);
    border-radius: var(--pa-radius-card, 8px);
    box-shadow: var(--pa-shadow-card, 0 1px 6px rgba(0, 0, 0, .07));
    overflow: hidden;
    transition: box-shadow .2s ease, border-color .2s ease;
}

.faq-additional .faq-card[open] {
    border-color: var(--pa-accent, #c9a666);
    box-shadow: 0 4px 14px rgba(31, 41, 55, .08);
}

/* ---------- Question (summary) ---------- */
.faq-additional .faq-card__q {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 18px 20px;
    cursor: pointer;
    list-style: none;
    -webkit-user-select: none;
    user-select: none;
    color: var(--pa-primary-dark, #1f2937);
    font-weight: 600;
    font-size: 16px;
    line-height: 1.4;
}

/* hide native marker (WebKit + Firefox) */
.faq-additional .faq-card__q::-webkit-details-marker { display: none; }
.faq-additional .faq-card__q::marker { content: ""; }

.faq-additional .faq-card__q:hover {
    color: var(--pa-accent-dark, #b8935a);
}

.faq-additional .faq-card__q:focus-visible {
    outline: 2px solid var(--pa-accent, #c9a666);
    outline-offset: -2px;
}

.faq-additional .faq-card__q-text {
    flex: 1 1 auto;
    min-width: 0;
    word-wrap: break-word;
    overflow-wrap: anywhere;
    hyphens: auto;
}

/* +/- icon */
.faq-additional .faq-card__icon {
    flex: 0 0 28px;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--pa-bg-alt, #f9f8f6);
    color: var(--pa-primary-dark, #1f2937);
    position: relative;
    transition: background-color .2s ease, transform .25s ease;
}

.faq-additional .faq-card__icon::before,
.faq-additional .faq-card__icon::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    background: currentColor;
    border-radius: 2px;
}

.faq-additional .faq-card__icon::before {
    width: 12px;
    height: 2px;
    transform: translate(-50%, -50%);
}

.faq-additional .faq-card__icon::after {
    width: 2px;
    height: 12px;
    transform: translate(-50%, -50%);
    transition: transform .25s ease, opacity .25s ease;
}

.faq-additional .faq-card[open] .faq-card__icon {
    background: var(--pa-accent, #c9a666);
    color: #ffffff;
}

.faq-additional .faq-card[open] .faq-card__icon::after {
    transform: translate(-50%, -50%) rotate(90deg);
    opacity: 0;
}

/* ---------- Answer ---------- */
.faq-additional .faq-card__a {
    border-top: 1px solid var(--pa-border, #e5e7eb);
    background: var(--pa-bg, #ffffff);
}

.faq-additional .faq-card__a-body {
    padding: 16px 20px 20px;
    color: var(--pa-text, #1f2937);
    font-size: 15.5px;
    line-height: 1.65;
}

.faq-additional .faq-card__a-body p {
    margin: 0 0 10px;
}

.faq-additional .faq-card__a-body p:last-child { margin-bottom: 0; }

.faq-additional .faq-card__a-body a {
    color: var(--pa-accent-dark, #b8935a);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 2px;
    word-break: break-word;
}

.faq-additional .faq-card__a-body a:hover {
    color: var(--pa-primary-dark, #1f2937);
}

/* Inherited DB content: lists, strong sub-headings, entry wrapper */
.faq-additional .faq-card__a-body .entry { display: contents; }

.faq-additional .faq-card__a-body ol,
.faq-additional .faq-card__a-body ul {
    margin: 0 0 12px 22px;
    padding: 0;
}

.faq-additional .faq-card__a-body ol li,
.faq-additional .faq-card__a-body ul li {
    margin-bottom: 6px;
    line-height: 1.55;
}

.faq-additional .faq-card__a-body strong {
    color: var(--pa-primary-dark, #1f2937);
    font-weight: 600;
}

.faq-additional .faq-card__a-body p > strong:only-child {
    display: inline-block;
    margin-top: 8px;
}

/* ---------- CTA block ---------- */
.faq-additional-cta {
    padding: 28px 0 56px;
    background: var(--pa-bg-alt, #f9f8f6);
}

.faq-additional-cta .uibox-container {
    max-width: 980px;
    margin: 0 auto;
    padding: 0 16px;
}

.faq-additional-cta__card {
    background: var(--pa-primary-dark, #1f2937);
    color: #ffffff;
    border-radius: var(--pa-radius-card, 8px);
    padding: 32px 28px;
    text-align: center;
    box-shadow: 0 6px 20px rgba(31, 41, 55, .12);
}

.faq-additional-cta__title {
    font-size: clamp(22px, 3.6vw, 28px);
    font-weight: 700;
    color: #ffffff;
    margin: 0 0 10px;
    line-height: 1.2;
}

.faq-additional-cta__text {
    font-size: 16px;
    line-height: 1.55;
    color: rgba(255, 255, 255, .85);
    margin: 0 auto 22px;
    max-width: 560px;
}

.faq-additional-cta__actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
}

.faq-additional-cta__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 10px 22px;
    border-radius: var(--pa-radius-btn, 6px);
    font-weight: 600;
    font-size: 15px;
    text-decoration: none;
    transition: background-color .18s ease, color .18s ease, border-color .18s ease, transform .12s ease;
    border: 1px solid transparent;
    line-height: 1.2;
    cursor: pointer;
}

.faq-additional-cta__btn--primary {
    background: var(--pa-accent, #c9a666);
    color: var(--pa-text-on-gold, #1f2937);
    border-color: var(--pa-accent, #c9a666);
}

.faq-additional-cta__btn--primary:hover,
.faq-additional-cta__btn--primary:focus {
    background: var(--pa-accent-dark, #b8935a);
    border-color: var(--pa-accent-dark, #b8935a);
    color: var(--pa-text-on-gold, #1f2937);
}

.faq-additional-cta__btn--secondary {
    background: transparent;
    color: #ffffff;
    border-color: rgba(255, 255, 255, .55);
}

.faq-additional-cta__btn--secondary:hover,
.faq-additional-cta__btn--secondary:focus {
    background: #ffffff;
    color: var(--pa-primary-dark, #1f2937);
    border-color: #ffffff;
}

.faq-additional-cta__btn:active { transform: translateY(1px); }

/* ----------------------------------------------------------------
 * FAQ success modal — scoped override.
 * Background: the shared .success-msg sits inside .col.s6.form-layout
 * (50% column). On desktop (>1024px) the legacy CSS leaves it at
 * width: 83.33% of that column → renders shifted left & partly
 * off-screen. We re-position only the FAQ instance as a true centered
 * fixed modal with a backdrop, in the site palette.
 * Scoped under .faq-section .review-form-section so global feedback /
 * review success popups are untouched.
 * ---------------------------------------------------------------- */

.faq-section .review-form-section .success-msg {
    /* neutralise legacy rotate + green tint so transition stays smooth */
    color: var(--pa-text, #1f2937);
    transform: none;
}

.faq-section .review-form-section .success-msg.active {
    position: fixed;
    top: 50%;
    left: 50%;
    right: auto;
    bottom: auto;
    margin: 0;
    transform: translate(-50%, -50%);
    width: min(520px, calc(100vw - 32px));
    height: auto;
    max-height: calc(100vh - 32px);
    overflow-y: auto;
    padding: 40px 28px 32px;
    background: #ffffff;
    color: var(--pa-text, #1f2937);
    border-radius: var(--pa-radius-card, 8px);
    box-shadow: 0 24px 60px rgba(31, 41, 55, .35);
    z-index: 10010;
    text-align: center;
}

/* Backdrop overlay, CSS-only via :has() (Chrome 105+, Safari 15.4+, Firefox 121+).
 * Modal sits at z-index 10010, overlay at 10000, so the close button stays clickable
 * above the backdrop; the overlay blocks accidental interaction with content behind. */
.faq-section .review-form-section:has(.success-msg.active)::before {
    content: "";
    position: fixed;
    inset: 0;
    background: rgba(31, 41, 55, .55);
    z-index: 10000;
}

/* Title + body text inside success */
.faq-section .review-form-section .success-msg .h2 {
    font-size: 22px;
    font-weight: 700;
    color: var(--pa-primary-dark, #1f2937);
    margin: 0 0 8px;
    line-height: 1.25;
}

.faq-section .review-form-section .success-msg .success-text {
    padding: 0;
    font-size: 16px;
    line-height: 1.55;
    color: var(--pa-text, #1f2937);
    margin: 0 0 20px;
}

.faq-section .review-form-section .success-msg svg {
    padding: 8px 0 0;
}

/* SVG check-icon colour: legacy JS draws path with fill="#80d72f" as a
 * presentation attribute — CSS fill overrides it cleanly without
 * touching the JS source. Scoped to the FAQ icon id only. */
.faq-section .review-form-section #faq-success-icon path {
    fill: var(--pa-accent, #c9a666);
}

/* Close button — always visible in the FAQ modal */
.faq-section .review-form-section .success-remove-btn {
    display: block;
    position: absolute;
    right: 10px;
    top: 10px;
    width: 36px;
    height: 36px;
    border: none;
    background: transparent;
    color: var(--pa-text-muted, #6b7280);
    font-size: 20px;
    line-height: 36px;
    text-align: center;
    border-radius: 50%;
    cursor: pointer;
    transition: background-color .15s ease, color .15s ease;
}

.faq-section .review-form-section .success-remove-btn:hover,
.faq-section .review-form-section .success-remove-btn:focus {
    background: var(--pa-bg-alt, #f9f8f6);
    color: var(--pa-primary-dark, #1f2937);
}

.faq-section .review-form-section .success-remove-btn:focus-visible {
    outline: 2px solid var(--pa-accent, #c9a666);
    outline-offset: 2px;
}

@media (max-width: 600px) {
    .faq-section .review-form-section .success-msg.active {
        width: calc(100vw - 24px);
        max-height: calc(100vh - 24px);
        padding: 32px 20px 26px;
    }
    .faq-section .review-form-section .success-msg .h2 { font-size: 20px; }
    .faq-section .review-form-section .success-msg .success-text { font-size: 15px; }
}

/* ---------- Mobile ---------- */
@media (max-width: 600px) {
    .faq-additional { padding: 32px 0 24px; }
    .faq-additional .uibox-container,
    .faq-additional-cta .uibox-container { padding: 0 12px; }

    .faq-additional .faq-card__q {
        padding: 14px 14px;
        font-size: 15px;
        gap: 12px;
    }

    .faq-additional .faq-card__icon { flex-basis: 26px; width: 26px; height: 26px; }

    .faq-additional .faq-card__a-body {
        padding: 14px 14px 16px;
        font-size: 15px;
    }

    .faq-additional-cta { padding: 24px 0 40px; }
    .faq-additional-cta__card { padding: 24px 18px; }

    .faq-additional-cta__actions { flex-direction: column; }
    .faq-additional-cta__btn { width: 100%; }
}