/**
 * Curran Forms - Frontend Styles
 * 
 * Styles for form rendering on the frontend.
 * 
 * @package Curran_Forms
 * @since 1.0.0
 */

/* ==========================================================================
   Form Container
   ========================================================================== */

.curran-form-wrapper.curran-form-wrapper .curran-form {
    max-width: 100%;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
}

/* ==========================================================================
   Row Layout (Flexbox)
   ========================================================================== */

.curran-form-wrapper.curran-form-wrapper .curran-row {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    margin-bottom: 20px;
    width: 100%;
}

/* Make fields in a row take equal space */
.curran-form-wrapper.curran-form-wrapper .curran-row .curran-field {
    flex: 1 1 0;
    min-width: 250px;
}

/* Single field in a row takes full width */
.curran-form-wrapper.curran-form-wrapper .curran-row .curran-field:only-child {
    flex: 1 1 100%;
}

/* ==========================================================================
   Field Spacing and Layout
   ========================================================================== */

.curran-form-wrapper.curran-form-wrapper .curran-field {
    margin-bottom: 0;
    box-sizing: border-box;
}

.curran-form-wrapper.curran-form-wrapper .curran-field label {
    display: block;
    margin-bottom: 8px;
    font-weight: 600;
    color: #333;
    font-size: 14px;
}

.curran-form-wrapper.curran-form-wrapper .curran-field .curran-required {
    color: #d63638;
    margin-left: 2px;
}

/* ==========================================================================
   Input Styles
   ========================================================================== */

.curran-form-wrapper.curran-form-wrapper .curran-input {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 14px;
    line-height: 1.5;
    color: #333;
    background-color: #fff;
    transition: border-color 0.2s ease;
    box-sizing: border-box;
}

.curran-form-wrapper.curran-form-wrapper .curran-input:focus {
    outline: none;
    border-color: #2271b1;
    box-shadow: 0 0 0 1px #2271b1;
}

.curran-form-wrapper.curran-form-wrapper .curran-textarea-input {
    resize: vertical;
    min-height: 100px;
}

.curran-form-wrapper.curran-form-wrapper .curran-file-input {
    padding: 8px;
}

/* ==========================================================================
   Radio and Checkbox Groups
   ========================================================================== */

.curran-form-wrapper.curran-form-wrapper .curran-radio-group,
.curran-form-wrapper.curran-form-wrapper .curran-checkbox-group {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.curran-form-wrapper.curran-form-wrapper .curran-radio-label,
.curran-form-wrapper.curran-form-wrapper .curran-checkbox-label {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    font-weight: normal;
    margin-bottom: 0;
    position: relative;
}

.curran-form-wrapper.curran-form-wrapper .curran-radio-input {
    width: auto;
    margin: 0;
    cursor: pointer;
}

/* Checkbox Switch Toggle Styles */
.curran-form-wrapper.curran-form-wrapper .curran-checkbox-input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
    margin: 0;
    pointer-events: none;
}

.curran-form-wrapper.curran-form-wrapper .curran-switch-toggle {
    display: inline-block;
    width: 44px;
    height: 24px;
    background-color: #e4e4e4;
    border-radius: 24px;
    position: relative;
    flex-shrink: 0;
    transition: background-color 0.3s ease;
    cursor: pointer;
}

.curran-form-wrapper.curran-form-wrapper .curran-switch-toggle::after {
    content: '';
    position: absolute;
    left: 2px;
    top: 50%;
    transform: translateY(-50%);
    width: 20px;
    height: 20px;
    background-color: #fff;
    border-radius: 50%;
    transition: transform 0.3s cubic-bezier(0.4, 0.0, 0.2, 1);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

.curran-form-wrapper.curran-form-wrapper .curran-checkbox-input:checked+.curran-switch-toggle {
    background-color: #2271b1;
}

.curran-form-wrapper.curran-form-wrapper .curran-checkbox-input:checked+.curran-switch-toggle::after {
    transform: translate(20px, -50%);
}

.curran-form-wrapper.curran-form-wrapper .curran-checkbox-input:focus-visible+.curran-switch-toggle {
    box-shadow: 0 0 0 2px #fff, 0 0 0 4px #2271b1;
}

.curran-form-wrapper.curran-form-wrapper .curran-switch-text {
    cursor: pointer;
    user-select: none;
}

/* ==========================================================================
   Multi-Answer Fields
   ========================================================================== */

.curran-form-wrapper.curran-form-wrapper .curran-multi-answer .curran-multi-container {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 10px;
}

.curran-form-wrapper.curran-form-wrapper .curran-multi-answer .curran-multi-row {
    display: flex;
    gap: 10px;
    align-items: center;
}

.curran-form-wrapper.curran-form-wrapper .curran-multi-answer .curran-multi-row .curran-input {
    flex: 1;
}

.curran-form-wrapper.curran-form-wrapper .curran-multi-answer .curran-remove-row {
    flex-shrink: 0;
    padding: 8px 12px;
    background-color: #d63638;
    color: #fff;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 13px;
    transition: background-color 0.2s ease;
}

.curran-form-wrapper.curran-form-wrapper .curran-multi-answer .curran-remove-row:hover {
    background-color: #b32d2e;
}

.curran-form-wrapper.curran-form-wrapper .curran-multi-answer .curran-add-another {
    padding: 8px 16px;
    background-color: #2271b1;
    color: #fff;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 13px;
    transition: background-color 0.2s ease;
}

.curran-form-wrapper.curran-form-wrapper .curran-multi-answer .curran-add-another:hover {
    background-color: #135e96;
}

.curran-form-wrapper.curran-form-wrapper .curran-multi-answer .curran-add-another:disabled {
    background-color: #ddd;
    color: #999;
    cursor: not-allowed;
}

/* ==========================================================================
   Field Help Text
   ========================================================================== */

.curran-form-wrapper.curran-form-wrapper .curran-field-help {
    display: block;
    margin-top: 6px;
    font-size: 12px;
    color: #666;
    font-style: italic;
}

/* ==========================================================================
   Submit Button
   ========================================================================== */

.curran-form-wrapper.curran-form-wrapper .curran-submit {
    margin-top: 25px;
}

.curran-form-wrapper.curran-form-wrapper .curran-submit-button {
    padding: 12px 24px;
    background-color: #2271b1;
    color: #fff;
    border: none;
    border-radius: 4px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.curran-form-wrapper.curran-form-wrapper .curran-submit-button:hover {
    background-color: #135e96;
}

.curran-form-wrapper.curran-form-wrapper .curran-submit-button:active {
    background-color: #0a4b78;
}

/* ==========================================================================
   Error Messages
   ========================================================================== */

.curran-form-wrapper.curran-form-wrapper .curran-error {
    padding: 12px 16px;
    background-color: #fcf0f1;
    border-left: 4px solid #d63638;
    color: #d63638;
    margin-bottom: 20px;
    border-radius: 4px;
}

/* ==========================================================================
   Responsive Design
   ========================================================================== */

@media screen and (max-width: 768px) {
    .curran-form-wrapper.curran-form-wrapper .curran-row {
        flex-direction: column;
        gap: 15px;
    }

    .curran-form-wrapper.curran-form-wrapper .curran-row .curran-field {
        min-width: 100%;
    }

    .curran-form-wrapper.curran-form-wrapper .curran-multi-answer .curran-multi-row {
        flex-direction: column;
        align-items: stretch;
    }

    .curran-form-wrapper.curran-form-wrapper .curran-multi-answer .curran-remove-row {
        width: 100%;
    }
}

@media screen and (max-width: 480px) {
    .curran-form-wrapper.curran-form-wrapper .curran-input {
        font-size: 16px;
        /* Prevents zoom on iOS */
    }

    .curran-form-wrapper.curran-form-wrapper .curran-submit-button {
        width: 100%;
    }
}

/* Dynamic Text Fields */
.curran-form-wrapper.curran-form-wrapper .curran-dynamic-text-container {
    width: 100%;
}

.curran-form-wrapper.curran-form-wrapper .curran-dynamic-text-inputs {
    margin-bottom: 10px;
}

.curran-form-wrapper.curran-form-wrapper .curran-dynamic-text-item {
    display: flex;
    gap: 8px;
    margin-bottom: 8px;
    align-items: center;
}

.curran-form-wrapper.curran-form-wrapper .curran-dynamic-text-item .curran-dynamic-input {
    flex: 1;
}

.curran-form-wrapper.curran-form-wrapper .curran-remove-dynamic-field {
    background: #dc3545;
    color: #fff;
    border: none;
    border-radius: 4px;
    width: 32px;
    height: 32px;
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
    flex-shrink: 0;
    transition: background-color 0.2s;
}

.curran-form-wrapper.curran-form-wrapper .curran-remove-dynamic-field:hover {
    background: #c82333;
}

.curran-form-wrapper.curran-form-wrapper .curran-add-dynamic-field {
    background: #007bff;
    color: #fff;
    border: none;
    border-radius: 4px;
    padding: 8px 16px;
    font-size: 14px;
    cursor: pointer;
    transition: background-color 0.2s;
}

.curran-form-wrapper.curran-form-wrapper .curran-add-dynamic-field:hover {
    background: #0056b3;
}

/* Field Width Classes */
.curran-form-wrapper.curran-form-wrapper .curran-form {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 20px !important;
    width: 100% !important;
}

.curran-form-wrapper.curran-form-wrapper .curran-form .curran-field {
    box-sizing: border-box !important;
}

.curran-form-wrapper.curran-form-wrapper .curran-form .curran-field-width-100 {
    width: 100% !important;
    flex: 0 0 100% !important;
    max-width: 100% !important;
}

.curran-form-wrapper.curran-form-wrapper .curran-form .curran-field-width-50 {
    width: calc(50% - 10px) !important;
    flex: 0 0 calc(50% - 10px) !important;
    max-width: calc(50% - 10px) !important;
}

.curran-form-wrapper.curran-form-wrapper .curran-form .curran-field-width-25 {
    width: calc(25% - 15px) !important;
    flex: 0 0 calc(25% - 15px) !important;
    max-width: calc(25% - 15px) !important;
}

/* Mobile responsive - all fields full width on small screens */
@media (max-width: 768px) {

    .curran-form-wrapper.curran-form-wrapper .curran-form .curran-field-width-50,
    .curran-form-wrapper.curran-form-wrapper .curran-form .curran-field-width-25 {
        width: 100% !important;
        flex: 0 0 100% !important;
        max-width: 100% !important;
    }
}

/* Section Heading */
.curran-form-wrapper.curran-form-wrapper .curran-section-heading {
    font-size: 20px;
    font-weight: 700;
    color: #333;
    margin: 0 0 10px 0;
    padding-bottom: 10px;
    border-bottom: 2px solid #333;
}

.curran-form-wrapper.curran-form-wrapper .curran-field-section-heading {
    margin-bottom: 20px !important;
}