/* =============================================================================
   SHARED CONTACT FORM STYLING
   ============================================================================= */

/* Contact form styling - shared across all pages */
.contact-form-home {
    /* Enhanced styling for the contact form - Made more compact */
    position: relative;
    background: rgba(255, 255, 255, 0.98);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
    max-width: 350px; /* Smaller to fit better at right edge */
    width: 100%;
    margin-left: auto; /* Align to the right side */
    margin-right: 20px; /* Closer to edge - move as far right as possible */
    transform: none; 
    z-index: 1000; /* Ensure form is always above overlay image */
    border-radius: var(--radius-xl);
}

/* Hero-specific positioning override - Force exact dimensions */
.hero-dark .contact-form-home {
    margin-right: 40px !important; /* Adjusted for hero layout */
    max-width: 350px !important;
    width: 350px !important;
    min-width: 350px !important;
}

/* Additional specificity to ensure dimensions match */
.hero-dark .grid .contact-form-home,
.hero-dark .container .contact-form-home {
    max-width: 350px !important;
    width: 350px !important;
    min-width: 350px !important;
}

/* Reduce padding inside the form */
.contact-form-home .card-body {
    padding: var(--space-6) var(--space-5); /* Reduced from default padding */
}

/* Make form title smaller */
.contact-form-home h3 {
    font-size: var(--text-lg);
    margin-bottom: var(--space-4);
    color: var(--color-neutral-900);
    font-weight: var(--font-semibold);
}

/* Reduce form group spacing */
.contact-form-home .form-group {
    margin-bottom: var(--space-4); /* Reduced spacing between fields */
}

/* Make form inputs more compact */
.contact-form-home .form-input,
.contact-form-home .form-textarea {
    padding: var(--space-3) var(--space-4); /* Reduced padding inside inputs */
    font-size: var(--text-sm);
    resize: none !important; /* Remove resize handle from form elements */
}

/* Make textarea smaller */
.contact-form-home .form-textarea {
    rows: 3; /* Will be applied via template */
    min-height: 80px; /* Reduced minimum height */
    resize: none !important; /* Disable resize handle */
    max-height: 120px; /* Prevent excessive expansion */
}

/* CRITICAL: Make button consistent across all pages - MAXIMUM SPECIFICITY */
.contact-form-home .btn,
.contact-form-home .btn.btn-primary,
.contact-form-home .btn.btn-lg,
.contact-form-home button.btn,
.card.contact-form-home .btn,
.card.contact-form-home .btn.btn-primary,
.card.contact-form-home button.btn {
    padding: var(--space-3) var(--space-6);
    font-size: var(--text-base);
    font-weight: var(--font-medium);
    border-radius: var(--radius-lg);
    min-height: 44px; /* Consistent with standard btn, not btn-lg */
    transition: all var(--transition-base);
    /* Force standard button dimensions */
    height: auto;
    line-height: 1;
}

/* Ensure button hover state is consistent - MAXIMUM SPECIFICITY */
.contact-form-home .btn:hover,
.contact-form-home .btn.btn-primary:hover,
.contact-form-home .btn.btn-lg:hover,
.contact-form-home button.btn:hover,
.card.contact-form-home .btn:hover,
.card.contact-form-home .btn.btn-primary:hover,
.card.contact-form-home button.btn:hover {
    text-decoration: none !important;
    color: white !important;
    transform: translateY(-1px) !important;
    box-shadow: var(--shadow-lg) !important;
}

/* Explicitly remove any potential pseudo-elements that might create lines */
.contact-form-home::before,
.contact-form-home::after {
    display: none !important;
    content: none !important;
}

/* Ensure no top border */
.contact-form-home {
    border-top: none !important;
}

/* Disable resize on ALL form elements within contact form */
.contact-form-home input,
.contact-form-home textarea,
.contact-form-home select {
    resize: none !important;
    -webkit-resize: none !important;
    -moz-resize: none !important;
}

/* Tablet and small desktop responsive */
@media (max-width: 1024px) {
    .hero-dark .contact-form-home {
        margin-left: auto !important;
        margin-right: auto !important;
        max-width: 350px !important;
        width: 350px !important;
    }
    
    .hero-dark .grid {
        justify-items: center;
    }
}

/* Mobile responsive */
@media (max-width: 768px) {
    /* Mobile layout for hero with form */
    .hero-dark h1 {
        font-size: var(--text-2xl);
    }
    
    .hero-dark .hero-content p {
        font-size: var(--text-sm);
    }
    
    .hero-dark .hero-subtitle {
        font-size: var(--text-sm);
    }
    
    .hero-dark .hero-content {
        padding-left: 20px !important;
        text-align: center;
    }
    
    /* Perfect form centering on mobile */
    .contact-form-home {
        margin: 0 auto !important;
        margin-left: auto !important;
        margin-right: auto !important;
        max-width: 100% !important;
        width: calc(100% - var(--space-8)) !important;
        align-self: center;
    }
    
    /* Ensure grid stacks and centers content */
    .hero-dark .grid {
        grid-template-columns: 1fr !important;
        gap: var(--space-6);
        justify-items: center;
        text-align: center;
    }
}

/* Small mobile devices */
@media (max-width: 480px) {
    .contact-form-home {
        margin: 0 var(--space-4) !important;
        width: calc(100% - var(--space-8)) !important;
        max-width: none !important;
    }
    
    .hero-dark .hero-content {
        padding-left: var(--space-4) !important;
        padding-right: var(--space-4) !important;
    }
}

/* Form animations */
.contact-form-home .form-group {
    animation: fadeInUp 0.6s ease forwards;
    opacity: 0;
    transform: translateY(20px);
}

.contact-form-home .form-group:nth-child(1) { animation-delay: 0.1s; }
.contact-form-home .form-group:nth-child(2) { animation-delay: 0.2s; }
.contact-form-home .form-group:nth-child(3) { animation-delay: 0.3s; }
.contact-form-home .form-group:nth-child(4) { animation-delay: 0.4s; }
.contact-form-home .btn { animation-delay: 0.5s; }

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* =============================================================================
   EMERGENCY OVERRIDE - FORCE BUTTON CONSISTENCY
   ============================================================================= */
/* This rule has maximum specificity to ensure consistent button styling */
.contact-form-home button[type="submit"],
.contact-form-home input[type="submit"],
.contact-form-home .btn-primary,
.contact-form-home .btn {
    padding: 12px 24px !important; /* Using px values instead of CSS variables for absolute control */
    font-size: 16px !important;
    font-weight: 500 !important;
    min-height: 44px !important;
    height: auto !important;
    line-height: 1 !important;
    border-radius: 8px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border: 2px solid transparent !important;
    background: linear-gradient(135deg, #2563eb, #1d4ed8) !important;
    color: white !important;
    text-decoration: none !important;
    transition: all 0.2s ease !important;
    cursor: pointer !important;
    box-sizing: border-box !important;
}

.contact-form-home button[type="submit"]:hover,
.contact-form-home input[type="submit"]:hover,
.contact-form-home .btn-primary:hover,
.contact-form-home .btn:hover {
    background: linear-gradient(135deg, #1d4ed8, #1e40af) !important;
    color: white !important;
    text-decoration: none !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15) !important;
}