/**
 * Gender Conditional Fields Styles
 * Noble Sedcard System v2.30.0
 */

/* ===================================
   GENDER CONDITIONAL FIELDS
   =================================== */

/* Hide gender-conditional fields by default (will be shown by JS) */
.gender-conditional {
    transition: opacity 0.3s ease, max-height 0.3s ease;
}

.gender-conditional[style*="display: none"] {
    max-height: 0;
    overflow: hidden;
    opacity: 0;
}

/* Show gender-conditional fields when visible */
.gender-conditional:not([style*="display: none"]) {
    opacity: 1;
    max-height: none;
}

/* Required indicators for gender-specific fields */
.required-female,
.required-male {
    color: #dc3545;
    font-weight: 700;
    margin-left: 3px;
}

/* Gender selection radio buttons */
.radio-group-horizontal {
    display: flex;
    gap: 20px;
    align-items: center;
    flex-wrap: wrap;
}

.radio-group-horizontal label {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    padding: 10px 15px;
    border: 2px solid transparent;
    border-radius: 8px;
    transition: all 0.3s ease;
}

.radio-group-horizontal label:hover {
    background: rgba(219, 193, 109, 0.1);
    border-color: rgba(219, 193, 109, 0.3);
}

.radio-group-horizontal input[type="radio"]:checked + span {
    color: #dbc16d;
    font-weight: 700;
}

.radio-group-horizontal input[type="radio"] {
    cursor: pointer;
    accent-color: #dbc16d;
    width: 18px;
    height: 18px;
}

/* Field hints */
.field-hint {
    font-size: 13px;
    color: #666;
    margin-top: 5px;
    display: block;
    font-style: italic;
}

/* Male-specific field styling */
.gender-conditional[data-show-for="maennlich"] .form-group {
    position: relative;
}

.gender-conditional[data-show-for="maennlich"] label {
    color: #1c1c1c;
}

.gender-conditional[data-show-for="maennlich"] input[type="number"] {
    border-left: 3px solid #dbc16d;
}

/* Female-specific field styling */
.gender-conditional[data-show-for="weiblich"] .form-group {
    position: relative;
}

.gender-conditional[data-show-for="weiblich"] label {
    color: #1c1c1c;
}

.gender-conditional[data-show-for="weiblich"] select {
    border-left: 3px solid #dbc16d;
}

/* Mobile responsiveness */
@media (max-width: 768px) {
    .radio-group-horizontal {
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
    }
    
    .radio-group-horizontal label {
        padding: 12px;
    }
}