/**
 * ondisos Custom Styles
 *
 * Additional styling for WordPress integration
 */

/* Container styles */
.ondisos-survey-container {
    margin: 2rem 0;
    padding: 0;
}

/* Loading state */
.ondisos-loading {
    text-align: center;
    padding: 3rem 1rem;
    color: #666;
    background: #f9f9f9;
    border-radius: 4px;
}

.ondisos-loading p {
    margin: 0;
    font-size: 1.1em;
}

/* Error styles */
.ondisos-error {
    padding: 1.5rem;
    background: #f8d7da;
    color: #721c24;
    border: 1px solid #f5c6cb;
    border-radius: 4px;
    margin: 1rem 0;
}

.ondisos-error h3 {
    margin-top: 0;
    color: #721c24;
}

/* Success message enhancements */
.sd-completedpage {
    padding: 2rem;
    background: #d4edda;
    border: 1px solid #c3e6cb;
    border-radius: 4px;
    color: #155724;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .ondisos-survey-container {
        margin: 1rem 0;
    }

    .ondisos-loading,
    .ondisos-error,
    .sd-completedpage {
        padding: 1rem;
    }
}

/* WordPress admin bar spacing fix */
body.admin-bar .ondisos-survey-container {
    /* Add spacing if admin bar is visible */
}

/* Integration with common WordPress themes */
.entry-content .ondisos-survey-container {
    max-width: 100%;
}

/* Fix: WP-Theme-CSS (z.B. spacious-pro) setzt margin-bottom:30px auf alle
 * <button>-Elemente. Das bläht den Chevron-Button in SurveyJS-Dropdowns auf:
 * In Flexbox zählt der margin-bottom zur margin-box (40px height + 30px = 70px),
 * was den gesamten sv-action-bar auf 70px treibt → sd-input.sd-dropdown auf 78px. */
.ondisos-survey-container .sd-editor-button-item {
    margin-bottom: 0 !important;
}

/* Fix: WP-Theme-CSS (z.B. spacious-pro) setzt auf input[type="text"] u.a.:
 *   padding: 1%          → ~9-10px oben/unten, bläht Dropdown auf ~78px auf
 *   width: 98%           → verkleinert das Eingabefeld
 *   margin: 0 0 30px     → fügt unten Abstand hinzu
 *   border: 1px solid    → sichtbarer Rahmen um das transparente Feld
 *   background-color: #f8f8f8 → macht das position:absolute-Feld opak
 *
 * SurveyJS erwartet padding:0, width:100%, margin:0 auf diesem Element, aber
 * input[type="text"] (Spezifität 0,1,1) schlägt .sd-dropdown__filter-string-input
 * (Spezifität 0,1,0) + Theme-CSS lädt nach Plugin-CSS (Quell-Reihenfolge).
 * → .ondisos-survey-container .sd-dropdown__filter-string-input (Spez. 0,2,0)
 *   schlägt das Theme; !important als zusätzliche Absicherung. */
.ondisos-survey-container .sd-dropdown__filter-string-input {
    background-color: transparent !important;
    background: transparent !important;
    padding: 0 !important;
    width: 100% !important;
    margin: 0 !important;
    border: none !important;
    border-radius: 0 !important;
    line-height: calc(1.5 * var(--sjs-font-editorfont-size, var(--sjs-font-size, 16px))) !important;
    box-sizing: content-box !important;
}

/* Print styles */
@media print {
    .ondisos-survey-container {
        page-break-inside: avoid;
    }
}