/* Sopify_Refactored/css/components/forms.css */

.contact-section {
    padding: 80px 0;
    background: var(--gradient-body-bg); 
    color: var(--text-dark-contrast);
}

.contact-section-title { /* Was .contact-section h2 */
    text-align: center;
    font-size: var(--font-size-h2);
    margin-bottom: 2.5rem;
    color: var(--text-dark-contrast);
    font-weight: 600;
}

.contact-form {
    max-width: 650px; /* Increased max-width slightly to accommodate side-by-side fields better */
    margin: 0 auto;
    background: rgba(var(--glass-form-bg-rgb), 0.65); /* Slightly less transparent for the card */
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(var(--glass-form-border-rgb), 0.3);
    padding: 2.5rem; /* Increased padding */
    border-radius: var(--border-radius-large);
    box-shadow: var(--shadow-glass-form);
}

.form-row {
    display: flex;
    gap: 1.5rem; /* Space between side-by-side fields */
    margin-bottom: 1.25rem; /* Same as .form-group margin */
}

.form-group {
    margin-bottom: 1.25rem;
    flex-grow: 1; /* Allow groups to grow if in a row */
}

.form-group-half {
    flex-basis: calc(50% - 0.75rem); /* 50% minus half the gap */
    /* No margin-bottom here, rely on .form-row's margin */
}
/* Last form group in a row (if it's the last overall element before button) might need margin */
.form-row + .form-group { /* If a full-width group follows a row */
    margin-top: 0; /* Reset any top margin if needed */
}


.form-group label {
    display: block;
    margin-bottom: 0.5rem;
    font-weight: 500;
    color: var(--text-color-medium);
    font-size: var(--font-size-sm);
}

.form-group input,
.form-group textarea,
.form-group select {
    width: 100%;
    padding: 0.85rem 1rem; /* Slightly more vertical padding */
    border: 1px solid var(--input-border-contact); /* VISIBLE BORDER NOW */
    border-radius: var(--border-radius-input);
    font-size: var(--font-size-sm);
    font-family: var(--font-primary);
    background-color: var(--input-bg-contact); 
    color: var(--text-color-dark);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

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

.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus {
    outline: none;
    border-color: var(--color-secondary);
    box-shadow: 0 0 0 3px rgba(var(--color-secondary), 0.25); /* Slightly more prominent focus */
    background-color: rgba(255, 255, 255, 0.98); /* Almost opaque on focus */
}

.form-group select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%234A5568'%3E%3Cpath fill-rule='evenodd' d='M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z' clip-rule='evenodd'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
    background-size: 1.1em;
    padding-right: 2.5rem;
}

.form-group textarea {
    min-height: 100px;
    resize: vertical;
}

.contact-form .submit-btn { 
   margin-top: 1.5rem; /* More space above button */
   background: var(--gradient-submit-btn);
   color: var(--text-color-light);
   padding: 0.85rem 1.5rem; /* Matched input vertical padding */
   border: none;
   border-radius: var(--border-radius-soft);
   font-size: var(--font-size-base);
   font-weight: 500;
   cursor: pointer;
   transition: all 0.3s ease;
   box-shadow: 0 4px 12px rgba(var(--color-accent), 0.3);
   width: 100%; /* Ensure button is full width */
}

.contact-form .submit-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(var(--color-accent), 0.4);
}

@media (max-width: 768px) {
    .contact-section {
        padding: 60px 0;
    }
    .contact-section-title {
        font-size: 1.75rem;
        margin-bottom: 2rem;
    }
    .contact-form {
        padding: 2rem 1.5rem; 
        max-width: 100%; /* Allow form to take full width within container padding */
    }
    .form-row {
        flex-direction: column; /* Stack side-by-side fields on mobile */
        gap: 0; /* Remove gap when stacked, rely on .form-group margin */
        margin-bottom: 0; /* Rely on .form-group margin */
    }
    .form-group-half {
        flex-basis: auto; /* Reset flex-basis */
        margin-bottom: 1.25rem; /* Add margin back when stacked */
    }
    /* Ensure last half group in a row doesn't have double margin if it's truly the last */
    .form-row .form-group-half:last-child {
        /* margin-bottom: 1.25rem; /* It should already have this from .form-group */
    }


    .form-group input,
    .form-group textarea,
    .form-group select {
        padding: 0.8rem 0.9rem; /* Consistent padding on mobile */
    }
    .form-group select {
        padding-right: 2.2rem; 
    }
    .contact-form .submit-btn {
        padding: 0.8rem 1.2rem;
    }
}