/**
 * Legal Fields Styles
 * 
 * Styles für Legal Consent und Legal Info Felder mit Accordion-Animation
 */

/* Button-Info / Button-Close: Basis-Layout im Plugin, Optik im Theme */
.button-info,
.button-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    padding: 4px;
    cursor: pointer;
    vertical-align: middle;
}

/* Legal Consent: Label-Text mit font-weight 400 */
.nf-field-type-legalconsent .nf-field-label label,
.nf-field-type-legalconsent .nf-field-label .nf-label-body {
    font-weight: 400;
}

/* Angezeigter Text (erstes RTE) – kann Formatierung enthalten */
.legal-info-header .legal-info-title {
    display: inline;
    line-height: 1.5;
}
.legal-info-header .legal-info-title p {
    margin: 0 0 0.25em 0;
}
.legal-info-header .legal-info-title p:last-child {
    margin-bottom: 0;
}

/* Accordion: Aufklappbereich (zweites RTE) – animiert nach unten */
.legal-accordion-content {
    display: block;
    overflow: hidden;
    max-height: 0;
    opacity: 0;
    padding: 0;
    margin-top: 0;
    margin-bottom: 0;
    height: 0;
    transition: max-height 0.35s ease-out, opacity 0.3s ease-out, padding 0.35s ease-out, margin-top 0.35s ease-out;
}

.legal-accordion-content.expanded {
    max-height: 2000px;
    height: auto;
    opacity: 1;
    padding: 16px 0 0;
    margin-top: 12px;
    display: flex;
    flex-direction: column;
    overflow: visible;
}

/* Accordion Text */
.legal-accordion-text {
    margin-bottom: 12px;
    line-height: 1.6;
    color: #333;
    flex: 1;
}

.legal-accordion-text p {
    margin-bottom: 12px;
}

.legal-accordion-text p:last-child {
    margin-bottom: 0;
}

.legal-accordion-content .button-close {
    margin-top: 8px;
    margin-left: auto;
    align-self: flex-end;
    flex-shrink: 0;
    visibility: visible !important;
    opacity: 1 !important;
}

/* Legal Consent - Ensure label and info icon are visible */
.nf-field-type-legalconsent .nf-field-label {
    display: block !important;
}

.nf-field-type-legalconsent .nf-field-label label {
    display: flex !important;
    align-items: flex-start;
    gap: 8px;
    flex-wrap: wrap;
}

.nf-field-type-legalconsent .nf-field-label label input[type="checkbox"] {
    margin-top: 2px;
    flex-shrink: 0;
}

.nf-field-type-legalconsent .nf-field-label label .button-info {
    margin-left: auto;
    display: inline-flex !important;
}

.nf-field-type-legalconsent .button-info {
    display: inline-flex !important;
    visibility: visible !important;
}

.nf-field-type-legalconsent .checkbox-wrap .button-info,
.nf-field-type-legalconsent .nf-field-element .button-info {
    display: inline-flex !important;
}

.field-wrap.legalconsent-wrap {
    justify-content: flex-start;
}

    .field-wrap.legalconsent-wrap > * {
        width: auto !important;
        font-weight: normal !important;
    }

/* Legal Info Title */
.legal-info-header {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.legal-info-title {
    display: inline-block;
    margin: 0;
    font-size: 1em;
    font-weight: 400;
    vertical-align: middle;
}

.nf-field-type-legalinfo .nf-field-label {
    display: block;
}

.nf-field-type-legalinfo .nf-field-label .legal-info-header {
    width: 100%;
}

/* Responsive Adjustments */
@media (max-width: 768px) {
    .legal-accordion-content.expanded {
        padding: 12px;
    }
    
    .button-info {
        margin-left: 4px;
    }
}