/* contact.css - Contact Section Styles - Fixed Button & No Gold */

.contact-section {
    padding: var(--section-padding);
    position: relative;
}

/* Override global glass-card for contact section - Toned Down */
.contact-section .glass-card {
    background: linear-gradient(135deg,
        rgba(235, 235, 223, 0.18),
        rgba(0, 28, 76, 0.12),
        rgba(247, 213, 79, 0.08)
    );
    border: 1px solid rgba(235, 235, 223, 0.15);
    box-shadow:
        0 8px 32px 0 rgba(0, 28, 76, 0.2),
        0 0 20px rgba(235, 235, 223, 0.08),
        0 0 10px rgba(0, 28, 76, 0.12),
        inset 0 1px 0 rgba(235, 235, 223, 0.2),
        inset 0 -1px 0 rgba(0, 28, 76, 0.08);
}

.contact-section .glass-card::before {
    background: linear-gradient(135deg,
        rgba(235, 235, 223, 0.08),
        rgba(247, 213, 79, 0.05),
        rgba(0, 28, 76, 0.04)
    );
}

.contact-section .glass-card::after {
    background: radial-gradient(circle at 30% 30%,
        rgba(235, 235, 223, 0.12),
        transparent 70%
    );
    opacity: 0.3;
}

.contact-section .glass-card:hover {
    background: linear-gradient(135deg,
        rgba(235, 235, 223, 0.20),
        rgba(0, 28, 76, 0.13),
        rgba(247, 213, 79, 0.08)
    );
    box-shadow:
        0 12px 40px 0 rgba(0, 28, 76, 0.18),
        0 0 18px rgba(235, 235, 223, 0.08),
        0 0 12px rgba(0, 28, 76, 0.12),
        0 0 8px rgba(247, 213, 79, 0.08),
        inset 0 1px 0 rgba(235, 235, 223, 0.22),
        inset 0 -1px 0 rgba(0, 28, 76, 0.10);
}

/* Side-by-Side Layout */
.contact-wrapper {
    display: grid;
    grid-template-columns: 400px 1fr; /* Fixed width for cards, flexible for form */
    gap: 60px;
    margin-top: 60px;
    align-items: start; /* Align to top */
}

/* Contact Info Cards - Left Side */
.contact-info {
    display: grid;
    grid-template-columns: 1fr; /* Stack cards vertically on the left */
    gap: 15px; /* Reduced gap */
    margin-bottom: 0; /* Remove bottom margin since we're side by side */
    height: fit-content; /* Allow natural height */
}

.info-card {
    padding: 20px; /* Reduced from 30px */
    text-align: center;
    transition: var(--transition-smooth);
    border-radius: 12px; /* Match service cards */
    /* Pink theme like featured service card */
    background: linear-gradient(135deg,
        rgba(244, 114, 182, 0.25),
        rgba(244, 114, 182, 0.20),
        rgba(244, 114, 182, 0.15)
    ) !important;
    border: 2px solid rgba(244, 114, 182, 0.4) !important;
    box-shadow: 0 0 25px rgba(244, 114, 182, 0.3) !important;
    min-height: 140px; /* Set consistent height */
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.info-card:hover {
    transform: translateY(-2px); /* Reduced from -3px */
    box-shadow: 0 8px 25px rgba(244, 114, 182, 0.3) !important; /* Reduced hover effect */
    border-color: rgba(244, 114, 182, 0.5) !important; /* Slightly darker pink */
}

.info-card i {
    font-size: 24px; /* Reduced from 30px */
    color: #0f172a !important; /* Same dark color as service cards */
    margin-bottom: 10px; /* Reduced from 15px */
    text-shadow: none !important;
    font-weight: 600 !important;
}

/* Flip phone icon horizontally */
.info-card .fa-phone-alt {
    transform: scaleX(-1);
}

.info-card h4 {
    font-size: 16px; /* Reduced from 18px */
    margin-bottom: 8px; /* Reduced from 10px */
    color: #0f172a !important; /* Same dark color as service cards */
    text-shadow: none !important;
    font-weight: 700 !important;
}

.info-card p {
    font-size: 13px; /* Reduced from 14px */
    line-height: 1.5; /* Reduced from 1.6 */
    color: #1e293b !important; /* Same color as service card descriptions */
    text-shadow: none !important;
    font-weight: 500 !important;
}

/* Contact Form - Right Side - Blue Theme like Regular Service Cards */
.contact-form-wrapper {
    width: 100%;
    max-width: none; /* Remove max-width constraint */
    margin: 0; /* Remove auto centering */
}

.contact-form {
    padding: 40px;
    border-radius: 12px; /* Match service cards */
    /* Blue theme like regular service cards */
    background: linear-gradient(135deg,
        rgba(59, 130, 246, 0.25),
        rgba(59, 130, 246, 0.20),
        rgba(59, 130, 246, 0.15)
    ) !important;
    border: 2px solid rgba(59, 130, 246, 0.4) !important;
    box-shadow: 0 0 25px rgba(59, 130, 246, 0.3) !important;
    transition: var(--transition-smooth);
}

.contact-form:hover {
    transform: translateY(-2px); /* Reduced hover effect */
    box-shadow: 0 8px 30px rgba(59, 130, 246, 0.25) !important; /* Reduced intensity */
    border-color: rgba(59, 130, 246, 0.55) !important; /* Darker blue instead of black */
}

.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px;
    margin-bottom: 30px;
}

.form-group {
    position: relative;
}

.form-group.full-width {
    grid-column: 1 / -1;
}

.form-group input,
.form-group select,
.form-group textarea {
    width: 100%;
    padding: 15px 20px;
    padding-left: 45px;
    /* Blue theme inputs to match form */
    background: rgba(255, 255, 255, 0.8) !important;
    border: 1px solid rgba(59, 130, 246, 0.3) !important;
    border-radius: 15px;
    color: #1a202c !important;
    font-size: 16px;
    transition: var(--transition-smooth);
    font-family: var(--font-primary);
    box-shadow: inset 0 2px 8px rgba(59, 130, 246, 0.1) !important;
    font-weight: 500 !important;
}

/* Fix for select placeholder */
.form-group select {
    color: #1a202c !important;
}

.form-group select option[value=""] {
    color: rgba(107, 114, 128, 0.7) !important;
}

.form-group select:invalid {
    color: rgba(107, 114, 128, 0.7) !important;
}

.form-group select:valid {
    color: #1a202c !important;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    outline: none;
    border-color: rgba(59, 130, 246, 0.6) !important;
    background: rgba(255, 255, 255, 0.95) !important;
    box-shadow:
        0 0 10px rgba(59, 130, 246, 0.15),
        inset 0 2px 8px rgba(59, 130, 246, 0.06) !important;
}

.form-group input::placeholder,
.form-group textarea::placeholder {
    color: #64748b !important;
    opacity: 0.8;
}

.form-group label {
    position: absolute;
    left: 45px;
    top: 50%;
    transform: translateY(-50%);
    color: #64748b !important;
    font-size: 16px;
    pointer-events: none;
    transition: var(--transition-smooth);
    background: transparent;
}

/* Special handling for select label */
.form-group select ~ label {
    display: none; /* Hide label for select since it has options */
}

.form-group textarea ~ label {
    top: 20px;
    transform: translateY(0);
}

.form-group input:focus ~ label,
.form-group input:not(:placeholder-shown) ~ label {
    top: 1px; /* Set to 0 for maximum overlap with text input area */
    left: 20px;
    font-size: 10px; /* Reduced from 12px */
    /* Smaller badge styling like alert */
    color: #F8FAFC !important; /* Light blue-white like featured badge text */
    background: linear-gradient(135deg, #3B82F6, #1E40AF) !important; /* Blue gradient like featured badge */
    padding: 4px 8px !important; /* Reduced padding for smaller badge */
    border-radius: 12px !important; /* Smaller radius for proportionate look */
    font-weight: 600 !important; /* Reduced from 700 */
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2) !important;
    border: 1px solid rgba(255, 255, 255, 0.8) !important; /* Thinner border */
    backdrop-filter: blur(8px) !important; /* Reduced blur */
    -webkit-backdrop-filter: blur(8px) !important;
    box-shadow: 0 2px 8px rgba(59, 130, 246, 0.25) !important; /* Smaller shadow */
    text-transform: uppercase !important;
    letter-spacing: 0.3px !important; /* Reduced letter spacing */
    z-index: 10 !important; /* Ensure badges stay above other elements */
    line-height: 1; /* Tight line height for compact look */
}

.form-group textarea:focus ~ label,
.form-group textarea:not(:placeholder-shown) ~ label {
    top: -6px; /* Keep textarea labels at the previous position */
    left: 20px;
    font-size: 10px;
    color: #F8FAFC !important;
    background: linear-gradient(135deg, #3B82F6, #1E40AF) !important;
    padding: 4px 8px !important;
    border-radius: 12px !important;
    font-weight: 600 !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2) !important;
    border: 1px solid rgba(255, 255, 255, 0.8) !important;
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
    box-shadow: 0 2px 8px rgba(59, 130, 246, 0.25) !important;
    text-transform: uppercase !important;
    letter-spacing: 0.3px !important;
    z-index: 10 !important;
    line-height: 1 !important;
    transform: translateY(0);
}

.form-group i {
    position: absolute;
    left: 15px;
    top: 18px;
    color: #64748b !important;
    transition: var(--transition-smooth);
}

.form-group textarea ~ i {
    top: 20px;
}

.form-group input:focus ~ i,
.form-group select:focus ~ i,
.form-group textarea:focus ~ i {
    color: #3B82F6 !important; /* Blue color to match theme */
    text-shadow: 0 0 6px rgba(59, 130, 246, 0.4) !important;
}

.form-group select {
    cursor: pointer;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%233B82F6'%3E%3Cpath d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 15px center;
    background-size: 20px;
}

.form-group select option {
    background: #ffffff !important;
    color: #1a202c !important;
}

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

/* FIXED SUBMIT BUTTON - NO MOVEMENT, NO GOLD */
.submit-btn {
    width: 100%;
    padding: 18px 40px;
    font-size: 16px;
    margin-top: 20px;
    border-radius: 15px; /* Match form inputs */
    /* Blue theme submit button */
    background: transparent !important;
    border: 1px solid rgba(59, 130, 246, 0.5) !important;
    color: #0f172a !important;
    cursor: pointer;
    /* FIXED: Only visual transitions - no transform */
    transition: background 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease, color 0.3s ease !important;
    font-weight: 600 !important;
    box-shadow: 0 0 10px rgba(59, 130, 246, 0.2) !important;
    /* Prevent any position changes */
    transform: none !important;
}

.submit-btn:hover {
    background: rgba(59, 130, 246, 0.2) !important;
    border-color: rgba(59, 130, 246, 0.6) !important;
    /* FIXED: No transform - button stays in place */
    transform: none !important;
    box-shadow: 0 0 15px rgba(59, 130, 246, 0.35) !important;
    color: #0f172a !important;
}

/* FIXED: Beige on active/click - NO GOLD */
.submit-btn:active,
.submit-btn:focus {
    background: rgba(245, 245, 220, 0.25) !important; /* Light beige background */
    border-color: rgba(245, 245, 220, 0.6) !important; /* Beige border */
    color: #1e293b !important; /* Darker text for contrast with beige */
    /* FIXED: No transform - button stays in place */
    transform: none !important;
    box-shadow: 0 0 15px rgba(245, 245, 220, 0.4) !important; /* Beige glow */
    text-shadow: none !important;
}

/* Social Links - Centered Across Full Width */
.social-links {
    display: flex;
    justify-content: center;
    gap: 15px;
    margin-top: 40px;
    grid-column: 1 / -1; /* Span across both columns */
    width: 100%; /* Full width */
}

.social-link {
    width: 45px;
    height: 45px;
    background: linear-gradient(135deg,
        rgba(235, 235, 223, 0.08),
        rgba(0, 28, 76, 0.06),
        rgba(247, 213, 79, 0.04)
    );
    border: 1px solid rgba(235, 235, 223, 0.12);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--alabaster);
    text-decoration: none;
    transition: var(--transition-smooth);
    box-shadow: 0 4px 15px rgba(0, 28, 76, 0.1);
}

.social-link:hover {
    background: linear-gradient(135deg,
        rgba(235, 235, 223, 0.12),
        rgba(0, 28, 76, 0.08),
        rgba(247, 213, 79, 0.08)
    );
    /* FIXED: Use beige instead of gold/mustard */
    border-color: rgba(245, 245, 220, 0.3) !important;
    transform: translateY(-3px); /* Reduced from -5px */
    box-shadow:
        0 6px 20px rgba(0, 28, 76, 0.12), /* Reduced from 0.15 */
        0 0 10px rgba(245, 245, 220, 0.15) !important; /* Beige glow instead of mustard */
}

.social-link:hover i {
    /* FIXED: Use beige instead of gold/mustard */
    color: rgba(245, 245, 220, 0.9) !important;
    text-shadow: 0 0 8px rgba(245, 245, 220, 0.4) !important;
}

/* Form Validation Styles */
.form-group input:invalid:not(:focus):not(:placeholder-shown),
.form-group select:invalid:not(:focus):not(:placeholder-shown),
.form-group textarea:invalid:not(:focus):not(:placeholder-shown) {
    border-color: #ff6b6b;
    box-shadow:
        0 0 12px rgba(255, 107, 107, 0.3),
        inset 0 2px 8px rgba(255, 107, 107, 0.1);
}

.form-group input:valid:not(:focus):not(:placeholder-shown),
.form-group select:valid:not(:focus):not(:placeholder-shown),
.form-group textarea:valid:not(:placeholder-shown) {
    border-color: #51cf66;
    box-shadow:
        0 0 12px rgba(81, 207, 102, 0.3),
        inset 0 2px 8px rgba(81, 207, 102, 0.1);
}

/* Success/Error Messages */
.form-message {
    padding: 15px 20px;
    border-radius: 10px;
    margin-top: 20px;
    text-align: center;
    font-size: 14px;
    animation: slideInUp 0.3s ease;
}

.form-message.success {
    background: rgba(81, 207, 102, 0.1);
    border: 1px solid #51cf66;
    color: #51cf66;
    box-shadow: 0 0 15px rgba(81, 207, 102, 0.2);
}

.form-message.error {
    background: rgba(255, 107, 107, 0.1);
    border: 1px solid #ff6b6b;
    color: #ff6b6b;
    box-shadow: 0 0 15px rgba(255, 107, 107, 0.2);
}

/* Responsive */
@media (max-width: 968px) {
    /* Stack vertically on tablets and mobile */
    .contact-wrapper {
        grid-template-columns: 1fr;
        gap: 30px;
    }

    /* Horizontal layout for contact info cards on mobile */
    .contact-info {
        grid-template-columns: repeat(3, 1fr); /* 3 cards horizontally */
        gap: 12px; /* Smaller gap between cards */
        margin-bottom: 0;
    }

    /* Smaller info cards for mobile horizontal layout */
    .info-card {
        padding: 16px 12px; /* More compact padding */
        min-height: 110px; /* Reduced height */
        text-align: center;
        /* Keep pink theme for info cards */
        background: linear-gradient(135deg,
            rgba(244, 114, 182, 0.25),
            rgba(244, 114, 182, 0.20),
            rgba(244, 114, 182, 0.15)
        ) !important;
        border: 2px solid rgba(244, 114, 182, 0.4) !important;
        box-shadow: 0 0 20px rgba(244, 114, 182, 0.25) !important;
    }

    .info-card i {
        font-size: 20px; /* Smaller icons */
        margin-bottom: 8px;
    }

    .info-card h4 {
        font-size: 14px; /* Smaller title */
        margin-bottom: 6px;
    }

    .info-card p {
        font-size: 11px; /* Smaller text */
        line-height: 1.4;
    }

    /* Form styling - KEEP BLUE THEME ON MOBILE */
    .contact-form {
        padding: 25px 20px; /* Reduced padding for mobile */
        /* FIXED: Keep blue theme on mobile */
        background: linear-gradient(135deg,
            rgba(59, 130, 246, 0.25),
            rgba(59, 130, 246, 0.20),
            rgba(59, 130, 246, 0.15)
        ) !important;
        border: 2px solid rgba(59, 130, 246, 0.4) !important;
        box-shadow: 0 0 25px rgba(59, 130, 246, 0.3) !important;
    }

    /* Mobile form elements - reduced sizes */
    .form-row {
        grid-template-columns: 1fr;
        gap: 18px; /* Reduced gap */
        margin-bottom: 20px; /* Reduced margin */
    }

    .form-group input,
    .form-group select,
    .form-group textarea {
        padding: 12px 16px; /* Reduced padding */
        padding-left: 38px; /* Reduced left padding for icon */
        font-size: 14px; /* Smaller font */
        border-radius: 12px; /* Smaller border radius */
    }

    .form-group i {
        left: 12px; /* Adjust icon position */
        top: 15px; /* Adjust icon position */
        font-size: 14px; /* Smaller icons */
    }

    .form-group textarea ~ i {
        top: 18px; /* Adjust textarea icon */
    }

    .form-group label {
        font-size: 14px; /* Smaller label font */
        left: 38px; /* Adjust label position */
    }

    .form-group input:focus ~ label,
    .form-group input:not(:placeholder-shown) ~ label {
        font-size: 9px; /* Even smaller badge on mobile */
        padding: 3px 6px !important; /* Smaller badge padding */
    }

    .form-group textarea:focus ~ label,
    .form-group textarea:not(:placeholder-shown) ~ label {
        font-size: 9px; /* Even smaller badge on mobile */
        padding: 3px 6px !important; /* Smaller badge padding */
    }

    .form-group textarea {
        min-height: 100px; /* Smaller textarea */
    }

    .submit-btn {
        padding: 14px 32px; /* Reduced padding */
        font-size: 14px; /* Smaller font */
        margin-top: 15px; /* Reduced margin */
        border-radius: 12px; /* Match inputs */
    }

    .social-links {
        justify-content: center;
    }
}

@media (max-width: 640px) {
    .contact-form {
        padding: 20px 15px; /* Even more compact */
    }

    /* Even smaller info cards for very small screens */
    .info-card {
        padding: 14px 10px; /* More compact */
        min-height: 100px; /* Smaller height */
    }

    .info-card i {
        font-size: 18px;
        margin-bottom: 6px;
    }

    .info-card h4 {
        font-size: 13px;
        margin-bottom: 4px;
    }

    .info-card p {
        font-size: 10px;
        line-height: 1.3;
    }

    /* Very compact form elements */
    .form-row {
        gap: 15px; /* Minimal gap */
        margin-bottom: 18px; /* Reduced margin */
    }

    .form-group input,
    .form-group select,
    .form-group textarea {
        padding: 10px 14px; /* Very compact padding */
        padding-left: 35px; /* Compact left padding */
        font-size: 13px; /* Smaller font */
        border-radius: 10px; /* Smaller radius */
    }

    .form-group i {
        left: 10px; /* Adjust icon position */
        top: 13px; /* Adjust icon position */
        font-size: 13px; /* Smaller icons */
    }

    .form-group textarea ~ i {
        top: 16px; /* Adjust textarea icon */
    }

    .form-group label {
        font-size: 13px; /* Smaller label font */
        left: 35px; /* Adjust label position */
    }

    .form-group textarea {
        min-height: 80px; /* Very compact textarea */
    }

    .submit-btn {
        padding: 12px 24px; /* Compact padding */
        font-size: 13px; /* Smaller font */
        margin-top: 12px; /* Reduced margin */
    }
}

@media (max-width: 480px) {
    /* Even more compact on very small screens */
    .contact-info {
        gap: 8px; /* Minimal gap */
    }

    .info-card {
        padding: 12px 8px; /* Very compact */
        min-height: 90px; /* Minimal height */
    }

    .info-card i {
        font-size: 16px;
        margin-bottom: 4px;
    }

    .info-card h4 {
        font-size: 12px;
        margin-bottom: 3px;
    }

    .info-card p {
        font-size: 9px;
        line-height: 1.2;
    }

    .contact-form {
        padding: 18px 12px; /* Very compact form */
    }

    /* Ultra compact form elements */
    .form-row {
        gap: 12px; /* Minimal gap */
        margin-bottom: 15px; /* Minimal margin */
    }

    .form-group input,
    .form-group select,
    .form-group textarea {
        padding: 9px 12px; /* Ultra compact padding */
        padding-left: 32px; /* Ultra compact left padding */
        font-size: 12px; /* Smallest font */
        border-radius: 8px; /* Smallest radius */
    }

    .form-group i {
        left: 9px; /* Minimal icon position */
        top: 12px; /* Minimal icon position */
        font-size: 12px; /* Smallest icons */
    }

    .form-group textarea ~ i {
        top: 15px; /* Adjust textarea icon */
    }

    .form-group label {
        font-size: 12px; /* Smallest label font */
        left: 32px; /* Adjust label position */
    }

    .form-group input:focus ~ label,
    .form-group input:not(:placeholder-shown) ~ label,
    .form-group textarea:focus ~ label,
    .form-group textarea:not(:placeholder-shown) ~ label {
        font-size: 8px; /* Tiny badge on small screens */
        padding: 2px 5px !important; /* Tiny badge padding */
    }

    .form-group textarea {
        min-height: 70px; /* Ultra compact textarea */
    }

    .submit-btn {
        padding: 10px 20px; /* Ultra compact padding */
        font-size: 12px; /* Smallest font */
        margin-top: 10px; /* Minimal margin */
    }
}

/* GLOBAL OVERRIDES - REMOVE ALL GOLD/MUSTARD COLORS */

/* Override any global gold/mustard colors */
.submit-btn:focus,
.submit-btn:active,
.submit-btn:focus-visible {
    background: rgba(245, 245, 220, 0.25) !important; /* Beige only */
    border-color: rgba(245, 245, 220, 0.6) !important;
    box-shadow: 0 0 15px rgba(245, 245, 220, 0.4) !important;
    transform: none !important;
}

/* Global button override - remove all gold/mustard from buttons */
button:active,
button:focus,
.glass-button:active,
.glass-button:focus,
.cta-button:active,
.cta-button:focus {
    background: rgba(245, 245, 220, 0.2) !important;
    border-color: rgba(245, 245, 220, 0.5) !important;
    box-shadow: 0 0 12px rgba(245, 245, 220, 0.3) !important;
}

/* Ensure no transform transitions on any buttons */
.submit-btn,
.glass-button,
.cta-button {
    transition: background 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease, color 0.3s ease !important;
    transform: none !important;
}

.submit-btn:hover,
.submit-btn:active,
.submit-btn:focus {
    transform: none !important;
}

/* Replace mustard variable with beige */
:root {
    --mustard: rgba(245, 245, 220, 0.8) !important; /* Replace mustard with beige */
    --mustard-hover: rgba(245, 245, 220, 0.9) !important;
}

/* Nav link hover - use beige instead of gold */
.nav-link:hover {
    color: rgba(245, 245, 220, 0.9) !important;
    text-shadow: 0 0 8px rgba(245, 245, 220, 0.3) !important;
}