/* Frontend styles for LatePoint Custom Field Conditions */

/* Hide conditional fields by default when they have the hidden class */
.lpcfc-hidden {
    display: none !important;
}

/* Smooth transitions for showing/hiding fields */
.os-form-group,
.custom-field-holder,
.os-form-block,
.latepoint-form-group {
    transition: opacity 0.3s ease, max-height 0.3s ease;
}

/* Animation for field appearance */
.lpcfc-field-showing {
    animation: lpcfc-fadeIn 0.3s ease-in;
}

.lpcfc-field-hiding {
    animation: lpcfc-fadeOut 0.3s ease-out;
}

@keyframes lpcfc-fadeIn {
    from {
        opacity: 0;
        max-height: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        max-height: 200px;
        transform: translateY(0);
    }
}

@keyframes lpcfc-fadeOut {
    from {
        opacity: 1;
        max-height: 200px;
        transform: translateY(0);
    }
    to {
        opacity: 0;
        max-height: 0;
        transform: translateY(-10px);
    }
}

/* Ensure hidden fields don't take up space */
.lpcfc-hidden {
    max-height: 0 !important;
    overflow: hidden !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
}

/* Loading state for form fields */
.lpcfc-field-loading {
    position: relative;
    pointer-events: none;
}

.lpcfc-field-loading::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(255, 255, 255, 0.8);
    z-index: 1;
}

.lpcfc-field-loading::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 20px;
    height: 20px;
    border: 2px solid #ddd;
    border-top: 2px solid #007cba;
    border-radius: 50%;
    animation: lpcfc-spin 1s linear infinite;
    z-index: 2;
}

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

/* Improved visibility for conditional fields */
.lpcfc-conditional-field {
    position: relative;
}

/* Debug mode styles (can be enabled via JavaScript) */
.lpcfc-debug .lpcfc-conditional-field {
    border: 1px dashed #007cba !important;
}

.lpcfc-debug .lpcfc-conditional-field::before {
    content: "Conditional Field";
    position: absolute;
    top: -10px;
    left: 10px;
    background-color: #007cba;
    color: white;
    padding: 2px 6px;
    font-size: 10px;
    border-radius: 3px;
    z-index: 10;
}

.lpcfc-debug .lpcfc-hidden::before {
    content: "Hidden Field";
    background-color: #dc3232;
}

/* Ensure proper spacing when fields are shown/hidden */
.os-form-group + .os-form-group,
.custom-field-holder + .custom-field-holder,
.latepoint-form-group + .latepoint-form-group {
    margin-top: 15px;
}

.lpcfc-hidden + .os-form-group,
.lpcfc-hidden + .custom-field-holder,
.lpcfc-hidden + .latepoint-form-group {
    margin-top: 0;
}

/* Mobile responsive adjustments */
@media (max-width: 768px) {
    @keyframes lpcfc-fadeIn {
        from {
            opacity: 0;
            max-height: 0;
        }
        to {
            opacity: 1;
            max-height: 300px;
        }
    }

    @keyframes lpcfc-fadeOut {
        from {
            opacity: 1;
            max-height: 300px;
        }
        to {
            opacity: 0;
            max-height: 0;
        }
    }
}