/* AI Form Generator - Modern Public Styles */

/* ---- Variables ---- */
:root {
    /* Colors */
    --aifg-primary: #3f51b5;
    --aifg-primary-light: #757de8;
    --aifg-primary-dark: #002984;
    --aifg-secondary: #f50057;
    --aifg-success: #4caf50;
    --aifg-error: #f44336;
    --aifg-warning: #ff9800;
    --aifg-info: #2196f3;
    --aifg-text: #212121;
    --aifg-text-secondary: #757575;
    --aifg-border: #e0e0e0;
    --aifg-background: #ffffff;
    --aifg-background-light: #fafafa;
    --aifg-shadow: rgba(0, 0, 0, 0.1);
    
    /* Typography */
    --aifg-font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif;
    --aifg-font-size-small: 0.875rem;
    --aifg-font-size-base: 1rem;
    --aifg-font-size-medium: 1.125rem;
    --aifg-font-size-large: 1.5rem;
    --aifg-font-size-xlarge: 2rem;
    
    /* Spacing */
    --aifg-spacing-xs: 0.25rem;
    --aifg-spacing-sm: 0.5rem;
    --aifg-spacing-md: 1rem;
    --aifg-spacing-lg: 1.5rem;
    --aifg-spacing-xl: 2rem;
    
    /* Borders */
    --aifg-border-radius: 8px;
    --aifg-border-radius-lg: 16px;
    --aifg-border-width: 1px;
    
    /* Transitions */
    --aifg-transition-fast: 0.2s ease;
    --aifg-transition-medium: 0.3s ease;
    --aifg-transition-slow: 0.5s ease;
    
    /* Shadows */
    --aifg-shadow-sm: 0 2px 5px var(--aifg-shadow);
    --aifg-shadow-md: 0 4px 10px var(--aifg-shadow);
    --aifg-shadow-lg: 0 8px 30px var(--aifg-shadow);
}

/* ---- Fonts ---- */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');

/* ---- Base Styles ---- */
.aifg-form-container * {
    box-sizing: border-box;
    font-family: var(--aifg-font-family);
}

.aifg-form-container {
    max-width: 800px;
    margin: var(--aifg-spacing-xl) auto;
    padding: var(--aifg-spacing-md);
    position: relative;
}

/* ---- Loading Overlay ---- */
.aifg-loading-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(255, 255, 255, 0.9);
    display: none;
    justify-content: center;
    align-items: center;
    z-index: 10;
    border-radius: var(--aifg-border-radius-lg);
}

.aifg-loading-spinner {
    width: 50px;
    height: 50px;
    border: 3px solid rgba(63, 81, 181, 0.2);
    border-top-color: var(--aifg-primary);
    border-radius: 50%;
    animation: aifg-spin 1s linear infinite;
}

@keyframes aifg-spin {
    to {
        transform: rotate(360deg);
    }
}

/* ---- Header Styles ---- */
.aifg-form-header {
    margin-bottom: var(--aifg-spacing-xl);
    text-align: center;
}

.aifg-form-title {
    color: var(--aifg-primary);
    font-size: var(--aifg-font-size-xlarge);
    font-weight: 600;
    margin-bottom: var(--aifg-spacing-sm);
    transition: color var(--aifg-transition-fast);
}

.aifg-form-description {
    color: var(--aifg-text-secondary);
    font-size: var(--aifg-font-size-medium);
    max-width: 600px;
    margin: 0 auto;
}

/* ---- Form Messages ---- */
.aifg-form-messages {
    margin-bottom: var(--aifg-spacing-lg);
}

.aifg-success-message,
.aifg-error-message {
    display: flex;
    align-items: center;
    padding: var(--aifg-spacing-md);
    border-radius: var(--aifg-border-radius);
    margin-bottom: var(--aifg-spacing-md);
    animation: aifg-slide-in-down 0.5s ease forwards;
}

.aifg-success-message {
    background-color: rgba(76, 175, 80, 0.1);
    border-left: 4px solid var(--aifg-success);
    color: var(--aifg-success);
}

.aifg-error-message {
    background-color: rgba(244, 67, 54, 0.1);
    border-left: 4px solid var(--aifg-error);
    color: var(--aifg-error);
}

.aifg-success-icon,
.aifg-error-icon {
    width: 24px;
    height: 24px;
    margin-right: var(--aifg-spacing-sm);
    flex-shrink: 0;
}

.aifg-success-icon path {
    fill: var(--aifg-success);
}

.aifg-error-icon path {
    fill: var(--aifg-error);
}

/* ---- Form Layout ---- */
.aifg-form {
    display: flex;
    flex-direction: column;
    background-color: var(--aifg-background);
    border-radius: var(--aifg-border-radius-lg);
    box-shadow: var(--aifg-shadow-md);
    padding: var(--aifg-spacing-xl);
    position: relative;
    overflow: hidden;
    transition: transform var(--aifg-transition-medium), box-shadow var(--aifg-transition-medium);
}

.aifg-form:hover {
    transform: translateY(-2px);
    box-shadow: var(--aifg-shadow-lg);
}

.aifg-form::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(to right, var(--aifg-primary), var(--aifg-primary-light));
}

.aifg-fields-container {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--aifg-spacing-lg);
    margin-bottom: var(--aifg-spacing-xl);
}

/* Make certain fields full width */
.aifg-field-full-width {
    grid-column: 1 / -1;
}

.aifg-sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
}

/* ---- Form Fields ---- */
.aifg-field {
    position: relative;
    margin-bottom: var(--aifg-spacing-md);
}

.aifg-label {
    display: block;
    margin-bottom: var(--aifg-spacing-sm);
    color: var(--aifg-text);
    font-weight: 500;
    font-size: var(--aifg-font-size-base);
    transition: color var(--aifg-transition-fast);
}

.aifg-required-mark {
    color: var(--aifg-secondary);
    margin-left: var(--aifg-spacing-xs);
}

.aifg-input-wrapper {
    position: relative;
}

/* ---- Input fields ---- */
.aifg-input,
.aifg-textarea,
.aifg-select {
    width: 100%;
    padding: var(--aifg-spacing-md);
    font-size: var(--aifg-font-size-base);
    color: var(--aifg-text);
    background-color: var(--aifg-background-light);
    border: var(--aifg-border-width) solid var(--aifg-border);
    border-radius: var(--aifg-border-radius);
    transition: border-color var(--aifg-transition-fast), box-shadow var(--aifg-transition-fast);
}

.aifg-input:focus,
.aifg-textarea:focus,
.aifg-select:focus {
    outline: none;
    border-color: var(--aifg-primary);
    box-shadow: 0 0 0 3px rgba(63, 81, 181, 0.2);
}

.aifg-input::placeholder,
.aifg-textarea::placeholder {
    color: var(--aifg-text-secondary);
    opacity: 0.7;
}

.aifg-textarea {
    min-height: 120px;
    resize: vertical;
}

/* ---- Floating labels ---- */
.aifg-floating-label {
    position: absolute;
    left: var(--aifg-spacing-md);
    top: 50%;
    transform: translateY(-50%);
    color: var(--aifg-text-secondary);
    pointer-events: none;
    transition: all var(--aifg-transition-fast);
    z-index: 1;
    font-size: var(--aifg-font-size-base);
    padding: 0 2px;
}

.aifg-input-wrapper {
    position: relative;
}

.aifg-input {
    position: relative;
    z-index: 2;
}

.aifg-input::placeholder {
    color: transparent;
}

.aifg-input:focus + .aifg-floating-label,
.aifg-input:not(:placeholder-shown) + .aifg-floating-label {
    top: -12px;
    left: var(--aifg-spacing-xs);
    transform: translateY(0) scale(0.8);
    opacity: 1;
    color: var(--aifg-primary);
    background-color: var(--aifg-background-light);
    padding: 0 var(--aifg-spacing-xs);
    z-index: 3;
}

/* ---- Select fields ---- */
.aifg-select-wrapper {
    position: relative;
}

.aifg-select-wrapper::after {
    content: '';
    position: absolute;
    right: var(--aifg-spacing-md);
    top: 50%;
    transform: translateY(-50%);
    width: 0;
    height: 0;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-top: 6px solid var(--aifg-text-secondary);
    pointer-events: none;
}

.aifg-select {
    appearance: none;
    padding-right: 2.5rem;
}

/* ---- Checkbox & Radio ---- */
.aifg-checkbox-group,
.aifg-radio-group {
    display: flex;
    flex-direction: column;
    gap: var(--aifg-spacing-sm);
    padding: var(--aifg-spacing-sm) 0;
}

.aifg-checkbox-item,
.aifg-radio-item {
    display: flex;
    align-items: center;
    cursor: pointer;
}

.aifg-checkbox,
.aifg-radio {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.aifg-checkbox-label,
.aifg-radio-label {
    position: relative;
    padding-left: 2rem;
    cursor: pointer;
    line-height: 1.5;
    display: inline-block;
    color: var(--aifg-text);
    transition: color var(--aifg-transition-fast);
}

.aifg-checkbox-label:before,
.aifg-radio-label:before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.25em;
    width: 1.25rem;
    height: 1.25rem;
    border: 2px solid var(--aifg-border);
    background-color: var(--aifg-background-light);
    transition: all var(--aifg-transition-fast);
}

.aifg-radio-label:before {
    border-radius: 50%;
}

.aifg-checkbox-label:after {
    content: '';
    position: absolute;
    left: 0.35rem;
    top: 0.6em;
    width: 0.55rem;
    height: 0.3rem;
    border-left: 2px solid white;
    border-bottom: 2px solid white;
    transform: rotate(-45deg) scale(0);
    transition: transform var(--aifg-transition-fast);
}

.aifg-radio-label:after {
    content: '';
    position: absolute;
    left: 0.3rem;
    top: 0.55em;
    width: 0.65rem;
    height: 0.65rem;
    border-radius: 50%;
    background-color: white;
    transform: scale(0);
    transition: transform var(--aifg-transition-fast);
}

.aifg-checkbox:checked + .aifg-checkbox-label:before {
    background-color: var(--aifg-primary);
    border-color: var(--aifg-primary);
}

.aifg-radio:checked + .aifg-radio-label:before {
    background-color: var(--aifg-primary);
    border-color: var(--aifg-primary);
}

.aifg-checkbox:checked + .aifg-checkbox-label:after {
    transform: rotate(-45deg) scale(1);
}

.aifg-radio:checked + .aifg-radio-label:after {
    transform: scale(1);
}

.aifg-checkbox:focus + .aifg-checkbox-label:before,
.aifg-radio:focus + .aifg-radio-label:before {
    box-shadow: 0 0 0 3px rgba(63, 81, 181, 0.2);
}

/* ---- File Upload ---- */
.aifg-file-wrapper {
    position: relative;
}

.aifg-file {
    position: absolute;
    height: 0.1px;
    width: 0.1px;
    opacity: 0;
    overflow: hidden;
    z-index: -1;
}

.aifg-file-label {
    display: flex;
    align-items: center;
    padding: var(--aifg-spacing-md);
    background-color: var(--aifg-background-light);
    border: var(--aifg-border-width) solid var(--aifg-border);
    border-radius: var(--aifg-border-radius);
    cursor: pointer;
    transition: border-color var(--aifg-transition-fast);
}

.aifg-file:focus + .aifg-file-label {
    outline: none;
    border-color: var(--aifg-primary);
    box-shadow: 0 0 0 3px rgba(63, 81, 181, 0.2);
}

.aifg-file-button {
    background-color: var(--aifg-primary);
    color: white;
    padding: var(--aifg-spacing-sm) var(--aifg-spacing-md);
    border-radius: var(--aifg-border-radius);
    margin-right: var(--aifg-spacing-md);
    transition: background-color var(--aifg-transition-fast);
}

.aifg-file-name {
    color: var(--aifg-text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.aifg-file:focus + .aifg-file-label .aifg-file-button,
.aifg-file-label:hover .aifg-file-button {
    background-color: var(--aifg-primary-dark);
}

/* ---- Error Handling ---- */
.aifg-field-error {
    font-size: var(--aifg-font-size-small);
    color: var(--aifg-error);
    margin-top: var(--aifg-spacing-xs);
    min-height: 1.5rem;
}

.aifg-field.has-error .aifg-input,
.aifg-field.has-error .aifg-textarea,
.aifg-field.has-error .aifg-select,
.aifg-field.has-error .aifg-file-label {
    border-color: var(--aifg-error);
}

.aifg-field.has-error .aifg-label,
.aifg-field.has-error .aifg-checkbox-label,
.aifg-field.has-error .aifg-radio-label {
    color: var(--aifg-error);
}

/* ---- reCAPTCHA ---- */
.aifg-recaptcha-container {
    margin-bottom: var(--aifg-spacing-lg);
    display: flex;
    flex-direction: column;
    align-items: center;
}

.aifg-recaptcha-info {
    display: flex;
    align-items: center;
    margin-top: var(--aifg-spacing-sm);
    font-size: var(--aifg-font-size-small);
    color: var(--aifg-text-secondary);
}

.aifg-recaptcha-info svg {
    margin-right: var(--aifg-spacing-xs);
}

/* ---- Submit Button ---- */
.aifg-form-actions {
    display: flex;
    justify-content: center;
}

.aifg-submit-button {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 180px;
    padding: var(--aifg-spacing-md) var(--aifg-spacing-lg);
    background: linear-gradient(to right, var(--aifg-primary), var(--aifg-primary-light));
    color: white;
    border: none;
    border-radius: 50px;
    font-size: var(--aifg-font-size-medium);
    font-weight: 500;
    cursor: pointer;
    overflow: hidden;
    transition: transform var(--aifg-transition-fast), box-shadow var(--aifg-transition-fast);
    box-shadow: var(--aifg-shadow-sm);
}

.aifg-submit-button:hover,
.aifg-submit-button:focus {
    transform: translateY(-2px);
    box-shadow: var(--aifg-shadow-md);
}

.aifg-submit-button:active {
    transform: translateY(0);
}

.aifg-button-text {
    z-index: 2;
    transition: transform var(--aifg-transition-fast);
}

.aifg-button-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    right: 1.5rem;
    opacity: 0;
    transform: translateX(20px);
    transition: all var(--aifg-transition-fast);
}

.aifg-button-icon svg {
    fill: white;
}

.aifg-submit-button:hover .aifg-button-text {
    transform: translateX(-10px);
}

.aifg-submit-button:hover .aifg-button-icon {
    opacity: 1;
    transform: translateX(0);
}

.aifg-submit-button .aifg-spinner {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 24px;
    height: 24px;
    margin-top: -12px;
    margin-left: -12px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-top-color: white;
    border-radius: 50%;
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--aifg-transition-fast);
    animation: aifg-spin 0.8s linear infinite;
}

.aifg-submit-button.is-loading .aifg-button-text,
.aifg-submit-button.is-loading .aifg-button-icon {
    opacity: 0;
    visibility: hidden;
}

.aifg-submit-button.is-loading .aifg-spinner {
    opacity: 1;
    visibility: visible;
}

/* ---- Animations ---- */
@keyframes aifg-slide-in-down {
    from {
        transform: translateY(-20px);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

@keyframes aifg-shake {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-5px); }
    75% { transform: translateX(5px); }
}

.aifg-shake {
    animation: aifg-shake 0.3s ease-in-out;
}

/* ---- Responsive Styles ---- */
@media (max-width: 768px) {
    .aifg-fields-container {
        grid-template-columns: 1fr;
    }
    
    .aifg-form {
        padding: var(--aifg-spacing-lg);
    }
    
    .aifg-form-title {
        font-size: var(--aifg-font-size-large);
    }
    
    .aifg-form-description {
        font-size: var(--aifg-font-size-base);
    }
}

@media (max-width: 480px) {
    .aifg-form-container {
        padding: var(--aifg-spacing-sm);
    }
    
    .aifg-form {
        padding: var(--aifg-spacing-md);
    }
    
    .aifg-submit-button {
        width: 100%;
    }
}

/* ---- Dark Mode ---- */
@media (prefers-color-scheme: dark) {
    :root {
        --aifg-text: #e0e0e0;
        --aifg-text-secondary: #9e9e9e;
        --aifg-border: #424242;
        --aifg-background: #303030;
        --aifg-background-light: #424242;
        --aifg-shadow: rgba(0, 0, 0, 0.3);
    }
    
    .aifg-form::before {
        background: linear-gradient(to right, var(--aifg-primary-light), var(--aifg-primary));
    }
    
    .aifg-loading-overlay {
        background-color: rgba(48, 48, 48, 0.9);
    }
    
    .aifg-input::placeholder,
    .aifg-textarea::placeholder {
        color: #757575;
    }
    
    .aifg-submit-button {
        background: linear-gradient(to right, var(--aifg-primary-dark), var(--aifg-primary));
    }
    
    .aifg-input:focus + .aifg-floating-label,
    .aifg-input:not(:placeholder-shown) + .aifg-floating-label {
        background-color: var(--aifg-background-light);
    }
}