/**
 * Kirche Form - Frontend Styles
 * 
 * Styles for frontend forms and user interface
 * Using Kirche Stein theme colors
 */

/* Theme Color Variables */
:root { --kirche-color-bg: rgba(255,255,255,0.5); --kirche-color-titel: #900055; --kirche-color-border: #e4e1d5; --kirche-color-hover-bg: #7e7e7e; --kirche-color-hover-bg-sub: #746f5e; --kirche-color-text: #746f5e; --kirche-color-white: #ffffff; --kirche-color-card-bg: #F2F2F2; --kirche-color-service-content: #B94888; --kirche-color-shadow: rgba(0,0,0,0.1); --kirche-font-main: 'Generis Sans', sans-serif; }

/* Form Container */
.kirche-form-container { background: var(--kirche-color-bg); border: 1px solid var(--kirche-color-border); border-radius: 6px; margin: 20px 0; padding: 30px; position: relative; font-family: var(--kirche-font-main), sans-serif; }
.kirche-form-title { border-bottom: 1px solid var(--kirche-color-border); color: var(--kirche-color-titel); font-size: 24px; font-weight: 600; margin-bottom: 20px; padding-bottom: 15px; font-family: var(--kirche-font-main), sans-serif; }
.kirche-form-description { color: var(--kirche-color-text); margin-bottom: 25px; line-height: 1.6; font-family: var(--kirche-font-main), sans-serif; }

/* Form Fields */
.kirche-form-field { margin-bottom: 20px; }
.kirche-form-field label { color: var(--kirche-color-titel); display: block; font-weight: 600; margin-bottom: 5px; font-family: var(--kirche-font-main), sans-serif; }
.kirche-form-field label.required:after { color: var(--kirche-color-service-content); content: " *"; }

.kirche-form-field input[type="text"],
.kirche-form-field input[type="email"],
.kirche-form-field input[type="tel"],
.kirche-form-field input[type="url"],
.kirche-form-field input[type="number"],
.kirche-form-field input[type="date"],
.kirche-form-field input[type="datetime"],
.kirche-form-field input[type="datetime-local"],
.kirche-form-field input[type="time"],
.kirche-form-field input[type="month"],
.kirche-form-field input[type="week"],
.kirche-form-field textarea,
.kirche-form-field select { background: var(--kirche-color-white); border: 2px solid var(--kirche-color-border); border-radius: 4px; color: var(--kirche-color-text) !important; font-size: 16px; font-family: var(--kirche-font-main), sans-serif; padding: 12px; transition: border-color 0.3s ease; width: 100%; box-sizing: border-box; }

.kirche-form-field input:focus,
.kirche-form-field textarea:focus,
.kirche-form-field select:focus { border-color: var(--kirche-color-titel); box-shadow: 0 0 0 3px rgba(144, 0, 85, 0.1); outline: none; }

/* Ensure placeholder text is visible */
.kirche-form-field input::placeholder,
.kirche-form-field textarea::placeholder { color: var(--kirche-color-hover-bg-sub); opacity: 0.7; }

/* Force text visibility in inputs - override any inherited styles */
.kirche-form-field input,
.kirche-form-field textarea,
.kirche-form-field select { -webkit-text-fill-color: var(--kirche-color-text) !important; -webkit-opacity: 1 !important; opacity: 1 !important; }

/* Readonly fields styling */
.kirche-form-field input[readonly],
.kirche-form-field textarea[readonly] { background: var(--kirche-color-card-bg) !important; border-style: dashed !important; color: var(--kirche-color-hover-bg-sub) !important; -webkit-text-fill-color: var(--kirche-color-hover-bg-sub) !important; cursor: not-allowed; }

/* Ensure autofilled inputs remain visible */
.kirche-form-field input:-webkit-autofill,
.kirche-form-field input:-webkit-autofill:hover,
.kirche-form-field input:-webkit-autofill:focus { -webkit-box-shadow: 0 0 0 30px var(--kirche-color-white) inset !important; -webkit-text-fill-color: var(--kirche-color-text) !important; color: var(--kirche-color-text) !important; }

.kirche-form-field textarea { min-height: 100px; resize: vertical; }

/* Checkbox and Radio Fields */
.kirche-form-field-checkbox,
.kirche-form-field-radio { margin-bottom: 15px; }
.kirche-form-field-checkbox .kirche-form-option,
.kirche-form-field-radio .kirche-form-option { align-items: center; display: flex; margin-bottom: 10px; }
.kirche-form-field-checkbox input[type="checkbox"],
.kirche-form-field-radio input[type="radio"] { margin-right: 10px; width: auto; }
.kirche-form-field-checkbox label,
.kirche-form-field-radio label { cursor: pointer; font-weight: normal; margin-bottom: 0; }

/* Radio Button Layouts */
.kirche-form-radio-group.kirche-form-radio-vertical .kirche-form-radio-option { display: block; margin-bottom: 10px; }
.kirche-form-radio-group.kirche-form-radio-horizontal { display: flex; flex-wrap: wrap; gap: 15px; }
.kirche-form-radio-group.kirche-form-radio-horizontal .kirche-form-radio-option { display: flex; align-items: center; margin-bottom: 0; }
.kirche-form-radio-option { align-items: center; display: flex; }
.kirche-form-radio-option input[type="radio"] { margin-right: 8px; width: auto; }
.kirche-form-radio-option label { cursor: pointer; font-weight: normal; margin-bottom: 0; }

/* Checkbox Layouts */
.kirche-form-checkbox-group.kirche-form-checkbox-vertical .kirche-form-checkbox-option { display: block; margin-bottom: 10px; }
.kirche-form-checkbox-group.kirche-form-checkbox-horizontal { display: flex; flex-wrap: wrap; gap: 15px; }
.kirche-form-checkbox-group.kirche-form-checkbox-horizontal .kirche-form-checkbox-option { display: flex; align-items: center; margin-bottom: 0; }
.kirche-form-checkbox-option { align-items: center; display: flex; }
.kirche-form-checkbox-option input[type="checkbox"] { margin-right: 8px; width: auto; }
.kirche-form-checkbox-option label { cursor: pointer; font-weight: normal; margin-bottom: 0; }

/* File Upload */
.kirche-form-file-wrapper { position: relative; }
.kirche-form-field input[type="file"] { background: var(--kirche-color-white); border: 2px dashed var(--kirche-color-border); border-radius: 4px; cursor: pointer; padding: 20px; text-align: center; transition: all 0.3s ease; width: 100%; box-sizing: border-box; }
.kirche-form-field input[type="file"]:hover { border-color: var(--kirche-color-titel); background: rgba(144, 0, 85, 0.05); }
.kirche-form-field input[type="file"]:focus { border-color: var(--kirche-color-titel); box-shadow: 0 0 0 3px rgba(144, 0, 85, 0.1); outline: none; }

.kirche-form-file-info { margin-top: 8px; display: flex; flex-wrap: wrap; gap: 10px; }
.kirche-form-file-info small { color: var(--kirche-color-hover-bg-sub); font-size: 13px; font-family: var(--kirche-font-main), sans-serif; background: var(--kirche-color-card-bg); padding: 4px 8px; border-radius: 3px; border: 1px solid var(--kirche-color-border); }
.kirche-form-file-info .file-size-info { background: rgba(185, 72, 136, 0.1); border-color: var(--kirche-color-service-content); color: var(--kirche-color-titel); }
.kirche-form-file-info .file-types-info { background: rgba(144, 0, 85, 0.1); border-color: var(--kirche-color-titel); color: var(--kirche-color-titel); }

/* Field Validation States */
.kirche-form-field.error input,
.kirche-form-field.error textarea,
.kirche-form-field.error select { border-color: #d63638; }
.kirche-form-field.error input[type="file"] { border-color: #d63638; background: rgba(214, 54, 56, 0.05); }
.kirche-form-field.success input,
.kirche-form-field.success textarea,
.kirche-form-field.success select { border-color: #46b450; }
.kirche-form-field.success input[type="file"] { border-color: #46b450; background: rgba(70, 180, 80, 0.05); }
.kirche-form-field-error { color: #d63638; font-size: 14px; margin-top: 5px; }
.kirche-form-field-help { color: var(--kirche-color-hover-bg-sub); font-size: 14px; margin-top: 5px; font-family: var(--kirche-font-main), sans-serif; }

/* Form Actions */
.kirche-form-actions { border-top: 1px solid var(--kirche-color-border); margin-top: 30px; padding-top: 20px; text-align: left; }
.kirche-form-submit { background: var(--kirche-color-titel); border: none; border-radius: 4px; color: var(--kirche-color-white); cursor: pointer; font-size: 16px; font-family: var(--kirche-font-main), sans-serif; font-weight: 600; padding: 12px 24px; transition: background-color 0.3s ease; text-transform: uppercase; letter-spacing: 1px; }
.kirche-form-submit:hover { background: var(--kirche-color-hover-bg); }
.kirche-form-submit:disabled { background: var(--kirche-color-hover-bg-sub); cursor: not-allowed; }

/* Form submitting state */
.kirche-form-submitting { opacity: 0.8; pointer-events: none; position: relative; }
.kirche-form-submitting::after { background: rgba(255, 255, 255, 0.8); content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: 10; }
.kirche-form-reset { background: var(--kirche-color-card-bg); border: 1px solid var(--kirche-color-border); border-radius: 4px; color: var(--kirche-color-text); cursor: pointer; font-size: 16px; font-family: var(--kirche-font-main), sans-serif; margin-left: 10px; padding: 11px 20px; transition: background-color 0.3s ease; }
.kirche-form-reset:hover { background: var(--kirche-color-hover-bg-sub); color: var(--kirche-color-white); }

/* Messages */
.kirche-form-message,
.kirche-form-success { border-radius: 4px; margin-bottom: 20px; padding: 15px; font-family: var(--kirche-font-main), sans-serif; }
.kirche-form-message.success,
.kirche-form-success { background: rgba(185, 72, 136, 0.1); border: 1px solid var(--kirche-color-service-content); color: var(--kirche-color-titel); font-weight: 600; }
.kirche-form-message.error { background: #f8d7da; border: 1px solid #f5c6cb; color: #721c24; }
.kirche-form-message.error ul { margin: 10px 0 0 0; padding-left: 20px; }
.kirche-form-message.error ul li { margin-bottom: 5px; }
.kirche-form-message.warning { background: #fff3cd; border: 1px solid #ffeaa7; color: #856404; }
.kirche-form-message.info { background: #d1ecf1; border: 1px solid #bee5eb; color: #0c5460; }

/* Loading State */
.kirche-form-loading { opacity: 0.6; pointer-events: none; position: relative; }
.kirche-form-loading::after { background: rgba(255, 255, 255, 0.8); content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: 10; }
.kirche-form-spinner { animation: kirche-form-spin 1s linear infinite; border: 3px solid #f3f3f3; border-radius: 50%; border-top: 3px solid #0073aa; display: none; height: 40px; left: 50%; position: absolute; top: 50%; transform: translate(-50%, -50%); width: 40px; z-index: 11; }
.kirche-form-loading .kirche-form-spinner { display: block; }

@keyframes kirche-form-spin {
    0% { transform: translate(-50%, -50%) rotate(0deg); }
    100% { transform: translate(-50%, -50%) rotate(360deg); }
}

/* Multi-step Forms */
.kirche-form-step {
    display: none;
}

.kirche-form-step.active {
    display: block;
}

.kirche-form-progress {
    background: #f0f0f0;
    border-radius: 20px;
    height: 8px;
    margin-bottom: 30px;
    overflow: hidden;
}

.kirche-form-progress-bar {
    background: #0073aa;
    height: 100%;
    transition: width 0.3s ease;
    width: 0%;
}

.kirche-form-step-navigation {
    display: flex;
    justify-content: space-between;
    margin-top: 20px;
}

.kirche-form-step-prev,
.kirche-form-step-next {
    background: #f7f7f7;
    border: 1px solid #ddd;
    border-radius: 4px;
    color: #333;
    cursor: pointer;
    padding: 10px 20px;
}

.kirche-form-step-prev:hover,
.kirche-form-step-next:hover {
    background: #e8e8e8;
}

.kirche-form-step-next.primary {
    background: #0073aa;
    color: #fff;
}

.kirche-form-step-next.primary:hover {
    background: #005a87;
}

/* Responsive Design */
@media screen and (max-width: 768px) {
    .kirche-form-container {
        margin: 10px 0;
        padding: 20px;
    }
    
    .kirche-form-title {
        font-size: 20px;
    }
    
    .kirche-form-field input,
    .kirche-form-field textarea,
    .kirche-form-field select {
        font-size: 16px; /* Prevents zoom on iOS */
    }
    
    .kirche-form-actions {
        text-align: center;
    }
    
    .kirche-form-submit,
    .kirche-form-reset {
        display: block;
        margin: 10px auto;
        width: 100%;
    }
    
    .kirche-form-step-navigation {
        flex-direction: column;
        gap: 10px;
    }
    
    .kirche-form-file-info {
        flex-direction: column;
        gap: 8px;
    }
    
    .kirche-form-file-info small {
        font-size: 12px;
        padding: 3px 6px;
    }
}

/* ============================== */
/* DESCRIPTION FIELD STYLES */
/* ============================== */

/* Description field specific styling */
.kirche-form-field-description { margin: 20px 0; }
.kirche-form-field-description label { color: var(--kirche-color-titel); font-weight: 600; margin-bottom: 15px; display: block; font-size: 16px; }
.kirche-form-description-content { background: var(--kirche-color-white); border: 1px solid var(--kirche-color-border); border-radius: 4px; padding: 20px; line-height: 1.6; color: var(--kirche-color-text); font-family: var(--kirche-font-main), sans-serif; }

.kirche-form-description-content h1,
.kirche-form-description-content h2,
.kirche-form-description-content h3,
.kirche-form-description-content h4,
.kirche-form-description-content h5,
.kirche-form-description-content h6 { color: var(--kirche-color-titel); margin-top: 1.2em; margin-bottom: 0.6em; font-family: var(--kirche-font-main), sans-serif; }
.kirche-form-description-content h1 { font-size: 24px; border-bottom: 2px solid var(--kirche-color-border); padding-bottom: 10px; }
.kirche-form-description-content h2 { font-size: 20px; }
.kirche-form-description-content h3 { font-size: 18px; }
.kirche-form-description-content p { margin-bottom: 1em; line-height: 1.6; }
.kirche-form-description-content ul,
.kirche-form-description-content ol { margin-bottom: 1em; padding-left: 2em; }
.kirche-form-description-content li { margin-bottom: 0.5em; line-height: 1.5; }
.kirche-form-description-content img { max-width: 100%; height: auto; border-radius: 4px; margin: 10px 0; }
.kirche-form-description-content a { color: var(--kirche-color-service-content); text-decoration: underline; }
.kirche-form-description-content a:hover { color: var(--kirche-color-titel); }
.kirche-form-description-content blockquote { border-left: 4px solid var(--kirche-color-service-content); margin: 20px 0; padding: 15px 20px; background: rgba(185, 72, 136, 0.05); font-style: italic; }
.kirche-form-description-content code { background: #f4f4f4; padding: 2px 6px; border-radius: 3px; font-family: 'Courier New', monospace; font-size: 14px; }
.kirche-form-description-content pre { background: #f4f4f4; padding: 15px; border-radius: 4px; overflow-x: auto; margin: 15px 0; }

/* Additional text styling */
.kirche-form-description-text { background: rgba(185, 72, 136, 0.03); border: 1px solid rgba(185, 72, 136, 0.1); border-radius: 4px; padding: 15px; margin-top: 15px; color: var(--kirche-color-text); font-family: var(--kirche-font-main), sans-serif; line-height: 1.6; }
.kirche-form-description-text p { margin-bottom: 0.8em; }
.kirche-form-description-text p:last-child { margin-bottom: 0; }

/* Margin utility classes for description fields */
.kirche-form-field-description.margin-top-small { margin-top: 10px; }
.kirche-form-field-description.margin-top-medium { margin-top: 20px; }
.kirche-form-field-description.margin-top-large { margin-top: 40px; }
.kirche-form-field-description.margin-top-none { margin-top: 0; }
.kirche-form-field-description.margin-bottom-small { margin-bottom: 10px; }
.kirche-form-field-description.margin-bottom-medium { margin-bottom: 20px; }
.kirche-form-field-description.margin-bottom-large { margin-bottom: 40px; }
.kirche-form-field-description.margin-bottom-none { margin-bottom: 0; }

/* Hide the hidden input that maintains field structure */
.kirche-form-field-description input[type="hidden"] { display: none; }
/* Placeholder text styling */
.kirche-form-description-content em { color: #999; font-style: italic; }

/* Responsive description field */
@media (max-width: 768px) {
    .kirche-form-description-content { padding: 15px; }
    .kirche-form-description-content h1 { font-size: 20px; }
    .kirche-form-description-content h2 { font-size: 18px; }
    .kirche-form-description-content h3 { font-size: 16px; }
}

@media screen and (max-width: 480px) {
    .kirche-form-container { padding: 15px; }
    .kirche-form-field input,
    .kirche-form-field textarea,
    .kirche-form-field select { padding: 10px; }
}

/* High Contrast Mode Support */
@media (prefers-contrast: high) {
    .kirche-form-field input,
    .kirche-form-field textarea,
    .kirche-form-field select { border-width: 3px; }
    .kirche-form-submit { border: 2px solid #000; }
}

/* Reduced Motion Support */
@media (prefers-reduced-motion: reduce) {
    .kirche-form-field input,
    .kirche-form-field textarea,
    .kirche-form-field select,
    .kirche-form-submit,
    .kirche-form-progress-bar { transition: none; }
    .kirche-form-spinner { animation: none; border: 3px solid #0073aa; }
}

/*
@media (prefers-color-scheme: dark) {
    .kirche-form-container {
        background: #1a1a1a;
        border-color: #444;
        color: #fff;
    }
    
    .kirche-form-title {
        border-color: #444;
        color: #fff;
    }
    
    .kirche-form-description {
        color: #ccc;
    }
    
    .kirche-form-field label {
        color: #fff;
    }
    
    .kirche-form-field input,
    .kirche-form-field textarea,
    .kirche-form-field select {
        background: #2a2a2a;
        border-color: #555;
        color: #fff;
    }
    
    .kirche-form-field input:focus,
    .kirche-form-field textarea:focus,
    .kirche-form-field select:focus {
        border-color: #4a9eff;
        box-shadow: 0 0 0 3px rgba(74, 158, 255, 0.1);
    }
}*/

/* Description Field Styles */
.kirche-form-field-description { margin-bottom: 20px; }
.kirche-form-description-content { background: var(--kirche-color-bg); border: 1px solid var(--kirche-color-border); border-radius: 4px; color: var(--kirche-color-text); font-family: var(--kirche-font-main), sans-serif; line-height: 1.6; padding: 20px; }
.kirche-form-description-content h1,
.kirche-form-description-content h2,
.kirche-form-description-content h3,
.kirche-form-description-content h4,
.kirche-form-description-content h5,
.kirche-form-description-content h6 { color: var(--kirche-color-titel); font-family: var(--kirche-font-main), sans-serif; margin-top: 0; margin-bottom: 15px; }
.kirche-form-description-content p { margin-bottom: 15px; }
.kirche-form-description-content p:last-child { margin-bottom: 0; }
.kirche-form-description-content a { color: var(--kirche-color-titel); text-decoration: underline; }
.kirche-form-description-content a:hover { color: var(--kirche-color-hover-bg); }
.kirche-form-description-content ul,
.kirche-form-description-content ol { margin-bottom: 15px; padding-left: 25px; }
.kirche-form-description-content li { margin-bottom: 5px; }
.kirche-form-description-content blockquote { background: rgba(144, 0, 85, 0.05); border-left: 4px solid var(--kirche-color-titel); margin: 15px 0; padding: 15px; }
.kirche-form-description-content strong,
.kirche-form-description-content b { color: var(--kirche-color-titel); font-weight: 600; }
.kirche-form-description-content em,
.kirche-form-description-content i { font-style: italic; }
.kirche-form-description-text { background: var(--kirche-color-card-bg); border-left: 3px solid var(--kirche-color-service-content); margin-top: 15px; padding: 15px; }
/* Margin top variations */
.kirche-form-description-content.margin-top-none { margin-top: 0; }
.kirche-form-description-content.margin-top-small { margin-top: 10px; }
.kirche-form-description-content.margin-top-medium { margin-top: 20px; }
.kirche-form-description-content.margin-top-large { margin-top: 30px; }