/**

 * CoffeeTropic Investment Form Styles

 * Modern, responsive form design with SOLID principles

 * @version 2.0.0

 */



/* Reset and Base Styles */

#custom-footer-form * {

    /*margin: 0;*/

    /*padding: 0;*/

    box-sizing: border-box;

}



#custom-footer-form {

    /*font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;*/

    /*background-color: #f5f5f5;*/

	margin-top: 100px;

    /*padding: 20px;*/

}



/* Container Layout */

.investment-form-container {

    max-width: 1200px;

    margin: 0 auto;

    background: white;

    border-radius: 12px;

    overflow: hidden;

    box-shadow: 4px 6px 4px 6px rgba(0, 0, 0, 0.1);

    display: grid;

    grid-template-columns: 1fr 1fr;

    min-height: 600px;

}



/* Image Section */

.investment-form-image {

    background: url('robot-barista.jpg') center/cover;

    background-color: #2c3e50;

    position: relative;

}



.investment-form-image::after {

    content: '';

    position: absolute;

    top: 0;

    left: 0;

    right: 0;

    bottom: 0;

    background: linear-gradient(135deg, rgba(44, 62, 80, 0.3), rgba(0, 0, 0, 0.2));

}



/* Form Section */

.investment-form-section {

    padding: 60px 50px;

    display: flex;

    flex-direction: column;

    justify-content: center;

}



/* Typography */

#form-heading {

    font-size: 28px;

    font-weight: 700;

    color: #1a1a1a;

    margin-bottom: 20px;

    line-height: 1.3;

    text-align: left;

}



.form-description {

    color: #555;

    font-size: 15px;

    line-height: 1.6;

    margin-bottom: 35px;

}



/* Form Groups */

.form-group {

    margin-bottom: 25px;

}



.form-group label {

    display: block;

    font-size: 14px;

    font-weight: 500;

    color: #333;

    margin-bottom: 8px;

}



.form-group label .required {

    color: #e74c3c;

}



/* Input Fields */

.form-group input[type="text"],

.form-group input[type="email"],

.form-group input[type="tel"] {

    width: 100%;

    padding: 14px 16px;

    border: 1px solid #ddd;

    border-radius: 6px;

    font-size: 15px;

    transition: all 0.3s ease;

    background-color: #fff;

}



.form-group input:focus {

    outline: none;

    border-color: #3498db;

    box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.1);

}



.form-group input.error {

    border-color: #e74c3c;

}



.form-group input.error:focus {

    box-shadow: 0 0 0 3px rgba(231, 76, 60, 0.1);

}



/* Phone Input Group */

.phone-input-group {

    display: flex;

    gap: 10px;

}



.country-code-select {

    width: 100px;

    padding: 14px 12px;

    border: 1px solid #ddd;

    border-radius: 6px;

    font-size: 15px;

    background-color: #fff;

    cursor: pointer;

    transition: all 0.3s ease;

}



.country-code-select:focus {

    outline: none;

    border-color: #3498db;

    box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.1);

}



.phone-number-input {

    flex: 1;

}



/* Submit Button */

.submit-btn {

    width: 100%;

    padding: 16px;

    background: linear-gradient(135deg, #00a8ff, #0086cc);

    color: white;

    border: none;

    border-radius: 50px;

    font-size: 16px;

    font-weight: 600;

    cursor: pointer;

    transition: all 0.3s ease;

    text-transform: uppercase;

    letter-spacing: 0.5px;

    margin-top: 10px;

}



.submit-btn:hover:not(:disabled) {

    background: linear-gradient(135deg, #0086cc, #006ba6);

    transform: translateY(-2px);

    box-shadow: 0 6px 20px rgba(0, 168, 255, 0.3);

}



.submit-btn:active:not(:disabled) {

    transform: translateY(0);

}



.submit-btn:disabled {

    opacity: 0.6;

    cursor: not-allowed;

}



/* Consent Checkbox */

.consent-group {

    margin-top: 25px;

    display: flex;

    align-items: flex-start;

    gap: 12px;

}



.consent-group input[type="checkbox"] {

    width: 20px;

    height: 20px;

    margin-top: 2px;

    cursor: pointer;

    accent-color: #00a8ff;

}



.consent-group label {

    font-size: 13px;

    color: #666;

    line-height: 1.5;

    font-weight: 400;

    cursor: pointer;

}



.consent-group a {

    color: #00a8ff;

    text-decoration: none;

}



.consent-group a:hover {

    text-decoration: underline;

}



/* Error Messages */

.error-message {

    color: #e74c3c;

    font-size: 12px;

    margin-top: 5px;

    display: none;

}



.error-message.show {

    display: block;

}



/* Success Message */

.success-message {

    text-align: center;

    padding: 40px;

    color: #27ae60;

    font-size: 18px;

    font-weight: 600;

}



/* Form Message Area */

.form-message {

    margin-top: 20px;

    padding: 15px;

    border-radius: 6px;

    text-align: center;

    display: none;

}



.form-message.success {

    background-color: #d4edda;

    color: #155724;

    border: 1px solid #c3e6cb;

    display: block;

}



.form-message.error {

    background-color: #f8d7da;

    color: #721c24;

    border: 1px solid #f5c6cb;

    display: block;

}



/* Loading Spinner */

.loading-spinner {

    display: inline-block;

    width: 16px;

    height: 16px;

    border: 2px solid rgba(255, 255, 255, 0.3);

    border-radius: 50%;

    border-top-color: white;

    animation: spin 0.8s linear infinite;

    margin-left: 10px;

    vertical-align: middle;

}



@keyframes spin {

    to { transform: rotate(360deg); }

}



/* Responsive Design */

@media (max-width: 968px) {

    .investment-form-container {

        grid-template-columns: 1fr;

    }



    .investment-form-image {

        min-height: 300px;

    }



    .investment-form-section {

        padding: 40px 30px;

    }



    #form-heading {

        font-size: 24px;

    }

}



@media (max-width: 480px) {

    #custom-footer-form {

        padding: 10px;

    }



    .investment-form-section {

        padding: 30px 20px;

    }



    #form-heading {

        font-size: 22px;

    }



    .phone-input-group {

        flex-direction: column;

    }



    .country-code-select {

        width: 100%;

    }

}



/* Accessibility Improvements */

.visually-hidden {

    position: absolute;

    width: 1px;

    height: 1px;

    margin: -1px;

    padding: 0;

    overflow: hidden;

    clip: rect(0, 0, 0, 0);

    white-space: nowrap;

    border: 0;

}



/* Focus visible for keyboard navigation */

input:focus-visible,

select:focus-visible,

button:focus-visible {

    outline: 2px solid #00a8ff;

    outline-offset: 2px;

}