/* Contact Section Base */
.contact-section {
    /* Tailwind bg-gray-50/50 applied for light mode */
}
.dark-mode .contact-section {
    background-color: #050505;
}

.contact-mesh-bg {
    background-image: 
        radial-gradient(at 100% 100%, hsla(253,16%,7%,0) 0, transparent 50%), 
        radial-gradient(at 0% 100%, hsla(225,39%,30%,0.15) 0, transparent 50%), 
        radial-gradient(at 100% 0%, hsla(339,49%,30%,0.15) 0, transparent 50%);
}
.dark-mode .contact-mesh-bg {
    opacity: 0.3;
}

/* Dark Mode Typography */
.dark-mode .contact-title {
    color: #ffffff;
}
.dark-mode .contact-desc {
    color: #9ca3af;
}
.dark-mode label {
    color: #9ca3af;
}

/* Badge */
.dark-mode .contact-badge {
    background-color: rgba(255, 255, 255, 0.03);
    border-color: rgba(255, 255, 255, 0.08);
}
.dark-mode .contact-badge-text {
    color: #a5b4fc;
}

/* Bento Card Style */
.contact-bento-card {
    transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}
.dark-mode .contact-bento-card {
    background-color: rgba(17, 24, 39, 0.45);
    border-color: rgba(255, 255, 255, 0.05);
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.3), 0 10px 10px -5px rgba(0, 0, 0, 0.3);
}
.dark-mode .contact-bento-card:hover {
    border-color: rgba(255, 255, 255, 0.1);
    background-color: rgba(17, 24, 39, 0.6);
}

/* Pills dark mode */
.dark-mode .dark-pills {
    background-color: rgba(255, 255, 255, 0.03);
    border-color: rgba(255, 255, 255, 0.08);
    color: #e5e7eb;
}

/* Copy button styles */
#copyBtn {
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
.dark-mode #copyBtn {
    background-color: rgba(255, 255, 255, 0.05);
    color: #9ca3af;
}
.dark-mode #copyBtn:hover {
    background-color: #6366f1;
    color: #ffffff;
}

.contact-link {
    font-size: clamp(0.75rem, 4.3vw, 1.25rem) !important;
    white-space: nowrap !important;
    display: inline-block;
    max-width: 100%;
}
.dark-mode .contact-link {
    color: #e5e7eb;
}
.dark-mode .contact-link:hover {
    color: #818cf8;
}

/* Form Container */
.dark-mode .contact-form-container {
    background-color: rgba(17, 24, 39, 0.6);
    border-color: rgba(255, 255, 255, 0.08);
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.7);
}

/* Form Inputs */
.contact-page-input {
    outline: none;
    transition: all 0.3s ease;
}
.dark-mode .contact-page-input {
    background-color: rgba(31, 41, 55, 0.4);
    border-color: rgba(255, 255, 255, 0.08);
    color: #ffffff;
}
.dark-mode .contact-page-input::-moz-placeholder {
    color: #4b5563;
}
.dark-mode .contact-page-input::placeholder {
    color: #4b5563;
}
.dark-mode .contact-page-input:focus {
    background-color: rgba(31, 41, 55, 0.75);
    border-color: #6366f1;
    box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.15);
}

/* Form Validation Styles */
.contact-page-input:invalid:focus {
    border-color: #ef4444;
    box-shadow: 0 0 0 4px rgba(239, 68, 68, 0.15);
}
.dark-mode .contact-page-input:invalid:focus {
    border-color: #ef4444;
}

/* Recaptcha Adjustments */
.recaptcha-container {
    width: 100%;
    max-width: 304px;
}

/* Responsive Media Queries down to 280px */
@media (max-width: 480px) {
    .contact-title {
        font-size: 2.25rem !important;
    }
    .contact-form-container {
        padding: 1.5rem !important;
        border-radius: 2rem !important;
    }
    .contact-bento-card {
        padding: 1.5rem !important;
        border-radius: 2rem !important;
    }
    .contact-page-input {
        padding: 0.85rem 1.25rem !important;
        font-size: 0.875rem !important;
    }
}

@media (max-width: 380px) {
    .recaptcha-container {
        transform: scale(0.85);
        transform-origin: 0 0;
        height: 60px;
    }
}

@media (max-width: 320px) {
    .contact-title {
        font-size: 1.85rem !important;
    }
    .contact-form-container {
        padding: 1.25rem !important;
        border-radius: 1.5rem !important;
    }
    .contact-bento-card {
        padding: 1.25rem !important;
        border-radius: 1.5rem !important;
    }
    .contact-page-input {
        padding: 0.75rem 1rem !important;
    }
    .contact-link {
        font-size: 0.8125rem !important;
    }
}

@media (max-width: 300px) {
    .recaptcha-container {
        transform: scale(0.65) !important;
        transform-origin: 0 0;
        height: 48px;
    }
}