/**
 * Contact Form Styles
 * Uses CSS variables from theme.css for consistent design
 * This file stays in: content/addons/contactform/contactform.css
 * Loaded dynamically only when contact form block is present
 */

/* Contact form container */
.contact-form-container {
    max-width: var(--form-max-width);
    margin: 0 auto;
    padding: var(--spacing-md);
    font-family: var(--font-family-primary);
    line-height: var(--line-height-relaxed);
}

/* Contact form alignment classes */
.contactform-align-left .block-title,
.contactform-align-left .contactform-description {
    text-align: left;
}

.contactform-align-left .contact-form-wrapper,
.contactform-align-left .contact-form-container {
    margin: 0;
}

.contactform-align-center .block-title,
.contactform-align-center .contactform-description {
    text-align: center;
}

.contactform-align-center .contact-form-wrapper,
.contactform-align-center .contact-form-container {
    margin: 0 auto;
}

#contact-form {
    background: var(--form-bg);
    padding: var(--form-padding);
    border-radius: var(--form-border-radius);
    box-shadow: var(--form-shadow);
}

/* Fix form-group flex behavior from global styles */
#contact-form .form-group {
    display: block; /* Override flex from global styles */
    margin-bottom: var(--form-group-margin);
}

/* Form groups and labels */
.form-group label {
    display: block;
    margin-bottom: var(--form-label-margin);
    font-weight: var(--form-label-font-weight);
    color: var(--form-text);
    font-size: var(--form-input-font-size);
}

.form-group.required label::after {
    content: " *";
    color: var(--color-error);
}

/* Form inputs */
.form-group input[type="text"],
.form-group input[type="email"],
.form-group textarea,
.form-group select {
    width: 100%;
    padding: var(--form-input-padding);
    border: var(--form-input-border-width) solid var(--form-border);
    border-radius: var(--form-input-border-radius);
    font-size: var(--form-input-font-size);
    font-family: var(--font-family-primary);
    transition: border-color var(--transition-normal);
    box-sizing: border-box;
    color: var(--form-text);
    background-color: var(--form-bg);
}

.form-group input[type="text"]:hover,
.form-group input[type="email"]:hover,
.form-group textarea:hover,
.form-group select:hover {
    border-color: var(--form-border-hover);
}

.form-group input[type="text"]:focus,
.form-group input[type="email"]:focus,
.form-group textarea:focus,
.form-group select:focus {
    outline: none;
    border-color: var(--form-border-focus);
    box-shadow: 0 0 0 3px var(--form-focus-shadow);
}

.form-group input.error,
.form-group textarea.error,
.form-group select.error {
    border-color: var(--form-border-error);
    background-color: var(--form-field-error-bg);
}

.form-group input.success,
.form-group textarea.success,
.form-group select.success {
    border-color: var(--form-success-border-color);
}

.form-group input:disabled,
.form-group textarea:disabled,
.form-group select:disabled {
    background-color: var(--form-disabled-bg);
    border-color: var(--form-disabled-border);
    color: var(--form-disabled-text);
    cursor: not-allowed;
}

.form-group input::placeholder,
.form-group textarea::placeholder {
    color: var(--form-placeholder);
}

/* Textarea */
.form-group textarea {
    resize: vertical;
    min-height: var(--form-textarea-min-height);
    font-family: var(--font-family-primary);
}

/* File upload */
.form-group input[type="file"] {
    width: 100%;
    padding: var(--spacing-sm);
    border: var(--form-input-border-width) dashed var(--form-border-file);
    border-radius: var(--form-input-border-radius);
    background: var(--form-bg-file);
    cursor: pointer;
    transition: border-color var(--transition-normal);
    color: var(--form-text);
    font-family: var(--font-family-primary);
}

.form-group input[type="file"]:hover {
    border-color: var(--form-file-border-hover);
}

.form-group input[type="file"].dragover {
    border-color: var(--form-file-border-dragover);
    background-color: rgba(40, 167, 69, 0.05);
}

/* Radio buttons */
.radio-label {
    display: inline-block;
    margin-right: var(--spacing-md);
    margin-bottom: var(--spacing-sm);
    font-weight: var(--font-weight-normal);
    cursor: pointer;
    color: var(--form-text);
}

.radio-label input[type="radio"] {
    margin-right: var(--spacing-xs);
}

/* Submit button */
.btn-submit {
    background: var(--form-btn-bg);
    color: var(--form-btn-text);
    padding: var(--form-btn-padding);
    border: none;
    border-radius: var(--form-btn-border-radius);
    font-size: var(--form-btn-font-size);
    font-weight: var(--form-btn-font-weight);
    font-family: var(--font-family-primary);
    cursor: pointer;
    transition: background-color var(--transition-normal);
    min-width: 120px;
    
    /* Fix width issue - explicit width control */
    width: auto;
    max-width: 200px;
    display: inline-block;
}

.btn-submit:hover {
    background: var(--form-btn-bg-hover);
}

.btn-submit:disabled {
    background: var(--form-btn-disabled-bg);
    cursor: not-allowed;
}

/* Help text */
.form-group small {
    display: block;
    margin-top: var(--spacing-xs);
    color: var(--form-help-text);
    font-size: var(--form-help-font-size);
}

/* Messages */
.form-message {
    padding: var(--spacing-sm);
    margin: var(--spacing-md) 0;
    border-radius: var(--border-radius);
    font-weight: var(--font-weight-medium);
}

.form-message.success {
    background: var(--form-success-bg);
    color: var(--form-success-text);
    border: 1px solid var(--form-success-border);
}

.form-message.error {
    background: var(--form-error-bg);
    color: var(--form-error-text);
    border: 1px solid var(--form-error-border);
}

/* Field errors */
.field-error {
    color: var(--form-field-error-text);
    font-size: var(--font-size-xs);
    margin-top: var(--spacing-xs);
}

/* Loading state */
.form-loading {
    opacity: var(--form-loading-opacity);
    pointer-events: none;
}

/* Accessibility */
.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus,
.btn-submit:focus {
    outline: var(--form-outline-width) solid var(--form-outline-focus);
    outline-offset: var(--form-outline-offset);
}

/* Custom select styling */
.form-group select {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 5'%3E%3Cpath fill='%23666' d='m2 0l2 3h-4z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 12px;
    appearance: none;
    padding-right: 40px;
}

/* Responsive behavior - only full width on very small screens */
@media (max-width: 480px) {
    .btn-submit {
        width: 100%;
        max-width: none;
    }
}

/* Responsive design */
@media (max-width: 768px) {
    .contact-form-container {
        padding: var(--spacing-sm);
    }
    
    #contact-form {
        padding: var(--spacing-md);
    }
    
    .radio-label {
        display: block;
        margin-right: 0;
        margin-bottom: var(--spacing-xs);
    }
    
    .form-group input[type="text"],
    .form-group input[type="email"],
    .form-group textarea,
    .form-group select {
        font-size: var(--font-size-base);
    }
}