@import url('variables.css');
@import url('flexbox.css');
@import url('styles.css');

/* ==================================
            CONTACT US - ENHANCED
===================================== */

/* Header Styles */
.contact-header-main {
    width: 70%;
    display: flex;
    justify-content: center;
}

.contact-header-content {
    padding: 34px 16px 0 16px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.contact-title {
    font-family: 'Aeonik', sans-serif;
    white-space: nowrap;
    text-align: center;
    margin: 0 auto 16px auto;
    font-size: 2.5rem;
    font-weight: 700;
    color: black;
}

.contact-subtitle {
    font-family: 'Satoshi', sans-serif;
    margin: 0 auto 24px auto;
    font-size: 1.2rem;
    color: black;
    line-height: 1.2;
    max-width: 600px;
}

/* Contact Badges */
.contact-badges {
    display: flex;
    gap: 24px;
    flex-wrap: wrap;
    justify-content: center;
}

.contact-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    background: #f0f9ff;
    border: 1px solid #0384C7;
    border-radius: 20px;
    font-family: 'Satoshi', sans-serif;
    font-size: 14px;
    font-weight: 600;
    color: #0384C7;
}

.contact-badge-icon {
    width: 16px;
    height: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

    .contact-badge-icon img {
        width: 17px;
        height: auto;
        display: block;
    }

/* Main Content Layout */
.body {
    font-family: 'Satoshi', sans-serif;
    color: black;
    display: flex;
    justify-content: center;
    padding: 60px 20px 40px 20px; /* Small bottom padding for footer spacing */
    min-height: fit-content; /* Allow dynamic resizing */
    max-height: none; /* No height restriction for long content */
    overflow-x: hidden; /* Prevent horizontal scrolling */
    box-sizing: border-box; /* Include padding in height calculations */
}

.contact-container {
    max-width: 1200px;
    width: 100%;
    position: relative;
    margin-bottom: 0;
    flex-grow: 1; /* Allow container to grow with content */
    display: flex;
    flex-direction: column;
}

/* Force remove any trailing space after contact section */
.contact-container::after {
    content: '';
    display: block;
    clear: both;
    height: 0;
    margin: 0;
    padding: 0;
}

.contact-main-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: start;
    margin-bottom: 0;
    flex: 1; /* Allow grid to expand with content */
    width: 100%;
}

/* Left Section - Illustration & Info */
.contact-left-section {
    display: flex;
    flex-direction: column;
    gap: 40px;
}

.ninja-illustration-wrapper {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 300px;
}

.ninja-illustration {
    margin-left: -80px;
    position: relative;
    z-index: 2;
    transform: scale(1.2);
}

.ninja-illustration img {
    width: 230px;
    height: auto;
    filter: drop-shadow(0 10px 30px rgba(0,0,0,0.1));
}

/* Floating Elements */
.floating-element {
    position: absolute;
    z-index: 1;
    animation: float 6s ease-in-out infinite;
}

.floating-element-1 {
    top: 100px;
    left: 390px;
    animation-delay: 0s;
}

.floating-element-2 {
    top: 110px;
    right: 195px;
    animation-delay: 2s;
}

.floating-element-3 {
    bottom: 110px;
    left: 370px;
    animation-delay: 4s;
}

/*.floating-element-4 {
    bottom: 20px;
    right: 20px;
    animation-delay: 3s;
}*/

.floating-icon {
    width: 40px;
    height: 40px;
    background: var(--color-primary);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 5px 20px rgba(3, 132, 199, 0.3);
    transition: all 0.3s ease;
}

.floating-icon:hover {
    transform: scale(1.1);
    box-shadow: 0 8px 30px rgba(3, 132, 199, 0.4);
}

.floating-icon svg {
    width: 20px;
    height: 20px;
    transition: all 0.3s ease;
}

.floating-icon:hover svg {
    transform: scale(1.1);
}

@keyframes float {
    0%, 100% { transform: translateY(0px); }
    50% { transform: translateY(-10px); }
}

/* Enhanced Info Cards */
.contact-info-cards {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.info-card {
    background: white;
    border-radius: 16px;
    padding: 24px;
    display: flex;
    align-items: center;
    gap: 20px;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08);
    transition: all 0.3s ease;
    border: 1px solid #e5e7eb;
}

    .info-card:hover {
        transform: translateY(-5px);
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12);
        background: #fbc840;
    }

/* ICON CONTAINER */
.info-card-icon {
    width: 60px;
    height: 60px;
    background: #0384c7;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: all 0.3s ease;
}

    .info-card-icon svg {
        width: 32px;
        height: 32px;
        transition: all 0.3s ease;
    }

.info-card:hover .info-card-icon {
    background: white;
}

.info-card:hover .phone-icon svg path {
    fill: black;
}

.info-card:hover .email-icon svg rect {
    fill: black;
}

.info-card:hover .email-icon svg path {
    fill: white;
}

/* TEXT STYLES */
.info-card-content h3 {
    font-family: 'Aeonik', sans-serif;
    margin: 0 0 8px 0;
    font-size: 1.3rem;
    color: var(--color-primary);
    font-weight: 600;
    transition: color 0.3s ease;
}

.info-card-content p,
.info-card-content a {
    font-family: 'Satoshi', sans-serif;
    margin: 0 0 4px 0;
    font-size: 1.1rem;
    color: #333;
    font-weight: 500;
    text-decoration: none;
    transition: color 0.3s ease;
}

    .info-card-content a:hover {
        color: var(--color-primary);
    }

.info-card-subtitle {
    font-family: 'Satoshi', sans-serif;
    font-size: 0.9rem;
    color: #666;
    font-weight: 400;
}

.info-card:hover .info-card-content h3,
.info-card:hover .info-card-content p,
.info-card:hover .info-card-content a {
    color: black;
}

.info-card:hover .info-card-content .info-card-subtitle {
    color: black;
}

/* Right Section - Enhanced Form */
.contact-right-section {
    background: white;
    border-radius: 20px;
    padding: 40px;
    box-shadow: 0 10px 40px rgba(0,0,0,0.1);
    border: 1px solid #e5e7eb;
}

.contact-form-header {
    margin-bottom: 30px;
    text-align: center;
}

.contact-form-header h2 {
    font-family: 'Aeonik', sans-serif;
    margin: 0 0 12px 0;
    font-size: 2rem;
    color: var(--color-primary);
    font-weight: 700;
}

.contact-form-description {
    font-family: 'Satoshi', sans-serif;
    margin: 0;
    font-size: 1.1rem;
    color: #666;
    line-height: 1.2;
}

/* Enhanced Form Styles */
.contact-form-enhanced {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.form-group {
    position: relative;
    display: flex;
    flex-direction: column;
}

.form-group label {
    font-family: 'Satoshi', sans-serif;
    font-size: 0.9rem;
    font-weight: 600;
    color: #333;
    margin-bottom: 8px;
    transition: color 0.3s ease;
}

.form-group.focused label {
    color: var(--color-primary);
}

.form-group input,
.form-group textarea{
    padding: 14px 16px;
    border: 2px solid #e5e7eb;
    border-radius: 8px;
    font-size: 1rem;
    font-family: 'Satoshi', sans-serif;
    background-color: #fafafa;
    outline: none;
    transition: all 0.3s ease;
}

    .form-group textarea {
        resize: none !important;
        overflow: auto;
    }

.form-group select {
    -webkit-appearance: none;
    -moz-appearance: none;   
    appearance: none;        
    padding: 14px 40px 14px 16px;
    border: 2px solid #e5e7eb;
    border-radius: 8px;
    font-size: 1rem;
    font-family: 'Satoshi', sans-serif;
    background-color: #fafafa;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg width='14' height='10' viewBox='0 0 14 10' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1l6 6 6-6' stroke='%23333' stroke-width='2' fill='none' fill-rule='evenodd'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 16px center;
    background-size: 14px 10px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus {
    border-color: var(--color-primary);
    background-color: white;
    box-shadow: 0 0 0 3px rgba(3, 132, 199, 0.1);
}

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

.form-group.error input,
.form-group.error textarea,
.form-group.error select {
    border-color: #ef4444;
    background-color: #fef2f2;
}

/* Custom Checkbox */
.form-group-checkbox {
    margin: 8px 0;
}

.checkbox-label {
    font-family: 'Satoshi', sans-serif;
    display: flex;
    align-items: center;
    gap: 12px;
    cursor: pointer;
    font-size: 0.95rem;
    color: #555;
}

.checkbox-label input[type="checkbox"] {
    display: none;
}

.checkbox-custom {
    width: 20px;
    height: 20px;
    border: 2px solid #d1d5db;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: white;
    transition: all 0.3s ease;
    position: relative;
}

.checkbox-label input[type="checkbox"]:checked ~ .checkbox-custom {
    background: var(--color-primary);
    border-color: var(--color-primary);
}

    .checkbox-label input[type="checkbox"]:checked ~ .checkbox-custom::before {
        content: "✓";
        color: black;
        font-size: 14px;
        font-weight: bold;
        display: flex;
        align-items: center;
        justify-content: center;
        height: 100%;
        width: 100%;
        line-height: 1;
    }


/* reCAPTCHA */
.form-group-recaptcha {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.form-group-recaptcha label {
    font-family: 'Satoshi', sans-serif;
    font-size: 0.9rem;
    font-weight: 600;
    color: #333;
}

/* Submit Button */
.form-group-submit {
    margin-top: 8px;
}

.button-contact {
    width: 100%;
    padding: 16px 32px;
    font-size: 16px;
    font-weight: 600;
    border-radius: 12px;
    transition: all 0.3s ease;
    background: #F4B425;
    color: #1a1a1a;
    border: none;
    font-family: 'Satoshi', sans-serif;
    box-shadow: 0 4px 12px rgba(244, 180, 37, 0.3);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    text-decoration: none;
}

.button-contact:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(244, 180, 37, 0.4);
    background: #E5A020;
    color: #1a1a1a;
}

/* Form Wrapper with Transition Support */
.contact-form-wrapper {
    position: relative;
    min-height: 600px;
}

.form-content {
    transition: all 0.3s ease;
    opacity: 1;
    transform: translateY(0);
}

.animation-content {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    background: white;
    border-radius: 16px;
    box-shadow: 0 5px 20px rgba(0,0,0,0.08);
    border: 1px solid #e5e7eb;
}

/* In-Form Animation Container */
.animation-content .ninja-animation-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    position: relative;
}

.animation-content .success-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    width: 100%;
    height: 100%;
    padding: 40px;
}

/* Contact Features Section - DISABLED (not used in current layout)
.contact-features {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
    margin-top: 60px;
    padding: 40px 0 20px 0;
    margin-bottom: 40px;
}*/

/* DISABLED - Feature items not used in current layout
.feature-item {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 24px;
    background: white;
    border-radius: 16px;
    box-shadow: 0 5px 20px rgba(0,0,0,0.08);
    transition: all 0.3s ease;
    border: 1px solid #e5e7eb;
}

.feature-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 30px rgba(0,0,0,0.12);
}

.feature-icon {
    width: 50px;
    height: 50px;
    background: linear-gradient(135deg, var(--color-primary), #0369a1);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.feature-svg {
    width: 24px;
    height: 24px;
    fill: white;
    transition: all 0.3s ease;
}

.feature-item:hover .feature-svg {
    transform: scale(1.1);
}

.feature-content h4 {
    font-family: 'Aeonik', sans-serif;
    margin: 0 0 8px 0;
    font-size: 1.2rem;
    color: var(--color-primary);
    font-weight: 600;
}

.feature-content p {
    font-family: 'Satoshi', sans-serif;
    margin: 0;
    font-size: 1rem;
    color: #666;
    line-height: 1.5;
}
*/

/* Responsive Design */
@media (max-width: 768px) {
    .body {
        padding: 30px 20px 30px 20px; /* Responsive bottom padding */
        min-height: fit-content; /* Dynamic height */
    }
    
    .contact-container {
        margin-bottom: 0;
    }
    
    .contact-header-main {
        width: 90%;
    }
    
    .contact-title {
        font-size: 2rem;
    }

    .contact-subtitle {
        font-size: 16px;
        line-height: 1.2;
    }
    
    .contact-badges {
        flex-direction: column;
    }
    
    .contact-main-grid {
        grid-template-columns: 1fr;
        gap: 30px;
        margin-bottom: 0;
    }

    .ninja-illustration {
        margin-left: 0;
        transform: scale(1);
        display: flex;
        justify-content: center;
    }

    .ninja-illustration-wrapper {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100%;
    }

        .ninja-illustration img {
            width: 250px;
            max-width: 100%;
            height: auto;
            display: block;
        }
    
    .contact-right-section {
        padding: 24px;
    }
    
    .contact-form-header h2 {
        font-size: 1.5rem;
    }
    
    .contact-form-wrapper {
        min-height: 500px;
    }
    
    .animation-content {
        border-radius: 12px;
    }
    
    .animation-content .success-container {
        padding: 30px;
    }
    
    /* .contact-features {
        grid-template-columns: 1fr;
        gap: 20px;
        margin-top: 40px;
        margin-bottom: 20px;
    }
    
    .feature-item {
        flex-direction: column;
        text-align: center;
        padding: 20px;
    } */
    
    .floating-element {
        display: none;
    }
}

@media (max-width: 480px) {
    .body {
        padding: 20px 10px 20px 10px; /* Small devices bottom padding */
        min-height: fit-content; /* Dynamic height */
    }
    
    .contact-container {
        margin-bottom: 0;
    }

    .contact-title {
        font-size: 40px;
        white-space: normal;
        word-wrap: break-word;
        word-break: break-word;
        line-height: 1;
        text-align: center;
    }
    
    .contact-right-section {
        padding: 20px;
    }
    
    .contact-form-wrapper {
        min-height: 400px;
    }
    
    .animation-content {
        border-radius: 8px;
    }
    
    .animation-content .success-container {
        padding: 20px;
    }
    
    .info-card {
        padding: 20px;
        gap: 16px;
    }
    
    .info-card-icon {
        width: 50px;
        height: 50px;
    }
    
    .info-card-icon svg {
        width: 24px;
        height: 24px;
    }
    
    /* .contact-features {
        margin-top: 30px;
        margin-bottom: 20px;
        padding: 20px 0 10px 0;
    } */
}

/* Dynamic height adjustments for different viewport sizes */
@media (min-height: 800px) {
    .body {
        padding-bottom: 60px; /* More space on tall screens */
    }
}

@media (max-height: 600px) {
    .body {
        padding-bottom: 20px; /* Less space on short screens */
        padding-top: 40px; /* Reduce top padding too */
    }
}

/* ==================================
        NINJA ANIMATION SYSTEM
===================================== */

/* Form Shake Animation */
.contact-form-enhanced.shake {
    animation: shake 0.5s ease-in-out;
}

@keyframes shake {
    0%, 100% { transform: translateX(0); }
    10%, 30%, 50%, 70%, 90% { transform: translateX(-5px); }
    20%, 40%, 60%, 80% { transform: translateX(5px); }
}

/* Ninja Animation Overlay */
.ninja-animation-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, rgba(21, 42, 96, 0.95), rgba(3, 132, 199, 0.95));
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transform: scale(0.8);
    transition: all 0.5s ease;
}

.ninja-animation-overlay.active {
    opacity: 1;
    transform: scale(1);
}

.ninja-animation-overlay.fade-out {
    opacity: 0;
    transform: scale(1.1);
}

.ninja-animation-container {
    text-align: center;
    color: white;
    position: relative;
    width: 500px;
    height: 500px;
}

/* Ninja Character */
.ninja-character {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0);
    transition: all 0.8s ease;
}

.ninja-character.appear {
    transform: translate(-50%, -50%) scale(1);
    animation: ninjaAppear 0.8s ease-out;
}

.ninja-character.disappear {
    transform: translate(-50%, -50%) scale(0);
    opacity: 0;
}

@keyframes ninjaAppear {
    0% { transform: translate(-50%, -50%) scale(0) rotate(180deg); opacity: 0; }
    50% { transform: translate(-50%, -50%) scale(1.2) rotate(0deg); opacity: 0.8; }
    100% { transform: translate(-50%, -50%) scale(1) rotate(0deg); opacity: 1; }
}

.ninja-body {
    width: 120px;
    height: 150px;
    background: linear-gradient(135deg, #1e293b, #334155);
    border-radius: 60px 60px 30px 30px;
    position: relative;
    margin: 0 auto;
    border: 4px solid #0384C7;
    box-shadow: 0 0 20px rgba(3, 132, 199, 0.4);
}

.ninja-head {
    width: 80px;
    height: 80px;
    background: linear-gradient(135deg, #fbbf24, #f59e0b);
    border-radius: 50%;
    position: absolute;
    top: -40px;
    left: 50%;
    transform: translateX(-50%);
    border: 4px solid #0384C7;
    box-shadow: 0 0 15px rgba(251, 191, 36, 0.4);
}

.ninja-head::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 50px;
    height: 12px;
    background: #1e293b;
    border-radius: 15px;
}

.ninja-head::after {
    content: '👁️ 👁️';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 16px;
    z-index: 1;
}

.ninja-arms {
    position: absolute;
    top: 30px;
    width: 100%;
}

.ninja-arm-left, .ninja-arm-right {
    width: 35px;
    height: 80px;
    background: linear-gradient(135deg, #1e293b, #334155);
    border-radius: 20px;
    position: absolute;
    border: 3px solid #0384C7;
    box-shadow: 0 0 10px rgba(3, 132, 199, 0.3);
}

.ninja-arm-left {
    left: -30px;
    transform: rotate(-30deg);
    animation: armMove 3s ease-in-out infinite;
}

.ninja-arm-right {
    right: -30px;
    transform: rotate(30deg);
    animation: armMove 3s ease-in-out infinite reverse;
}

@keyframes armMove {
    0%, 100% { transform: rotate(-30deg); }
    50% { transform: rotate(-45deg); }
}

.ninja-legs {
    position: absolute;
    bottom: -40px;
    width: 100%;
}

.ninja-leg-left, .ninja-leg-right {
    width: 30px;
    height: 60px;
    background: linear-gradient(135deg, #1e293b, #334155);
    border-radius: 15px;
    position: absolute;
    border: 3px solid #0384C7;
    box-shadow: 0 0 10px rgba(3, 132, 199, 0.3);
}

.ninja-leg-left {
    left: 30px;
    animation: legMove 2.5s ease-in-out infinite;
}

.ninja-leg-right {
    right: 30px;
    animation: legMove 2.5s ease-in-out infinite reverse;
}

@keyframes legMove {
    0%, 100% { transform: rotate(0deg); }
    50% { transform: rotate(15deg); }
}

/* Ninja Message */
.ninja-message {
    position: absolute;
    top: -80px;
    right: -150px;
    transform: scale(0);
    transition: all 0.8s ease;
}

.ninja-message.throw {
    transform: scale(1) translateX(200px) translateY(-100px) rotate(360deg);
    opacity: 0;
}

.message-scroll {
    width: 80px;
    height: 60px;
    background: linear-gradient(135deg, #fbbf24, #f59e0b);
    border-radius: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 3px solid #0384C7;
    box-shadow: 0 5px 30px rgba(251, 191, 36, 0.6);
}

.message-content {
    font-size: 32px;
    animation: messageGlow 1.5s ease-in-out infinite alternate;
}

@keyframes messageGlow {
    0% { transform: scale(1); text-shadow: 0 0 10px #fbbf24; }
    100% { transform: scale(1.1); text-shadow: 0 0 20px #f59e0b; }
}

/* Ninja Smoke */
.ninja-smoke {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    opacity: 0;
    transition: all 0.8s ease;
}

.ninja-smoke.puff {
    opacity: 1;
    animation: smokePuff 1s ease-out;
}

@keyframes smokePuff {
    0% { transform: translate(-50%, -50%) scale(0); opacity: 0; }
    50% { transform: translate(-50%, -50%) scale(1.5); opacity: 0.8; }
    100% { transform: translate(-50%, -50%) scale(3); opacity: 0; }
}

.smoke-particle {
    position: absolute;
    width: 20px;
    height: 20px;
    background: rgba(255, 255, 255, 0.6);
    border-radius: 50%;
    animation: smokeFloat 1s ease-out forwards;
}

.smoke-particle:nth-child(1) {
    top: -10px;
    left: -10px;
    animation-delay: 0s;
}

.smoke-particle:nth-child(2) {
    top: -10px;
    right: -10px;
    animation-delay: 0.1s;
}

.smoke-particle:nth-child(3) {
    bottom: -10px;
    left: -10px;
    animation-delay: 0.2s;
}

.smoke-particle:nth-child(4) {
    bottom: -10px;
    right: -10px;
    animation-delay: 0.3s;
}

@keyframes smokeFloat {
    0% { transform: translateY(0) scale(0); opacity: 0; }
    50% { transform: translateY(-30px) scale(1); opacity: 0.8; }
    100% { transform: translateY(-60px) scale(0); opacity: 0; }
}

/* Ninja Stars */
.ninja-stars {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: all 0.5s ease;
}

.ninja-stars.sparkle {
    opacity: 1;
}

.ninja-star {
    position: absolute;
    font-size: 24px;
    color: #fbbf24;
    text-shadow: 0 0 10px #f59e0b;
    animation: starSparkle 2s ease-in-out infinite;
}

.star-1 {
    top: 20%;
    left: 10%;
    animation-delay: 0s;
}

.star-2 {
    top: 30%;
    right: 15%;
    animation-delay: 0.3s;
}

.star-3 {
    bottom: 25%;
    left: 20%;
    animation-delay: 0.6s;
}

@keyframes starSparkle {
    0%, 100% { transform: scale(0) rotate(0deg); opacity: 0; }
    50% { transform: scale(1.2) rotate(180deg); opacity: 1; }
}

/* Ninja Text */
.ninja-text {
    position: absolute;
    bottom: -100px;
    left: 50%;
    transform: translateX(-50%);
    text-align: center;
    animation: textFloat 3s ease-in-out infinite;
    width: 100%;
}

.ninja-text h3 {
    font-size: 2.2rem;
    margin: 0 0 15px 0;
    color: #fbbf24;
    text-shadow: 0 0 15px rgba(251, 191, 36, 0.8);
    font-weight: 700;
}

.ninja-text p {
    font-size: 1.3rem;
    margin: 0;
    color: rgba(255, 255, 255, 0.95);
    text-shadow: 0 0 10px rgba(255, 255, 255, 0.3);
}

@keyframes textFloat {
    0%, 100% { transform: translateX(-50%) translateY(0); }
    50% { transform: translateX(-50%) translateY(-10px); }
}

/* ==================================
        SUCCESS MESSAGE OVERLAY
===================================== */

/* Overlay background covering full screen */
.success-message-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(16, 185, 129, 0.85);
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transform: scale(0.98);
    transition: all 0.4s ease;
}

    /* Active state makes overlay visible */
    .success-message-overlay.active {
        opacity: 1;
        transform: scale(1);
    }

    /* Fade-out animation */
    .success-message-overlay.fade-out {
        opacity: 0;
        transform: scale(1.02);
    }

/* White container inside overlay */
.success-container {
    background: white;
    border-radius: 16px;
    padding: 24px;
    text-align: center;
    max-width: 400px;
    width: 100%;
    margin: 0 auto; /* CENTRADO dentro del contenedor padre */
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    border: 2px solid #10B981;
    overflow: hidden; /* Evita que algo sobresalga */
}


/* Icon with bounce */
.success-icon {
    margin-bottom: 24px;
    animation: successBounce 0.8s ease-out;
}

/* Icon animation */
@keyframes successBounce {
    0% {
        transform: scale(0) rotate(-180deg);
        opacity: 0;
    }

    50% {
        transform: scale(1.2) rotate(0deg);
        opacity: 0.8;
    }

    100% {
        transform: scale(1) rotate(0deg);
        opacity: 1;
    }
}

/* Heading styles */
.success-container h2 {
    font-size: 1.8rem;
    color: #10B981;
    margin: 0 0 16px 0;
    font-weight: 700;
}

/* Paragraph styles */
.success-container p {
    font-size: 1rem;
    color: #555;
    line-height: 1.5;
    margin: 0;
}


.success-container p {
    font-size: 1.1rem;
    color: #666;
    line-height: 1.6;
    margin: 0 0 32px 0;
}

/* Loading Animation */
.loading-container {
    margin-top: 32px;
}

.ninja-loading {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-bottom: 16px;
}

.ninja-dot {
    width: 12px;
    height: 12px;
    background: #0384C7;
    border-radius: 50%;
    animation: ninjaLoad 1.2s ease-in-out infinite;
}

.ninja-dot:nth-child(1) { animation-delay: -0.32s; }
.ninja-dot:nth-child(2) { animation-delay: -0.16s; }
.ninja-dot:nth-child(3) { animation-delay: 0s; }

@keyframes ninjaLoad {
    0%, 80%, 100% { transform: scale(0); opacity: 0.5; }
    40% { transform: scale(1); opacity: 1; }
}

.loading-text {
    font-size: 0.95rem;
    color: #666;
    margin: 0 0 20px 0;
    font-style: italic;
}

/* Countdown Bar */
.countdown-bar {
    width: 100%;
    height: 6px;
    background: #e5e7eb;
    border-radius: 3px;
    overflow: hidden;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1);
}

.countdown-progress {
    height: 100%;
    background: linear-gradient(90deg, #10B981, #059669);
    border-radius: 3px;
    width: 0%;
    transition: width 0.3s ease;
}

@keyframes countdown {
    0% { width: 100%; }
    100% { width: 0%; }
}

/* Improved Animation Container for In-Form */
.animation-content .ninja-animation-container {
    background: linear-gradient(135deg, rgba(21, 42, 96, 0.95), rgba(3, 132, 199, 0.95));
    border-radius: 20px;
    padding: 40px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
}

/* ==================================
        ENHANCED NINJA KATANA SYSTEM
===================================== */

/* Ninja Katanas */
.ninja-katanas {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 300px;
    height: 300px;
    opacity: 0;
    transition: all 0.5s ease;
}

.ninja-katanas.draw {
    opacity: 1;
}

.ninja-katanas.draw .katana-left {
    animation: katanaDraw 0.8s ease-out;
}

.ninja-katanas.slash-combo {
    animation: katanaSlashCombo 1.2s ease-in-out;
}

.ninja-katanas.slash-combo .katana {
    animation: katanaGlow 1.2s ease-in-out;
}

@keyframes katanaGlow {
    0%, 100% { 
        box-shadow: 0 0 10px rgba(255, 255, 255, 0.6);
    }
    25%, 75% { 
        box-shadow: 0 0 20px rgba(3, 132, 199, 0.8), 0 0 30px rgba(255, 255, 255, 0.9);
    }
    50% { 
        box-shadow: 0 0 25px rgba(3, 132, 199, 1), 0 0 35px rgba(255, 255, 255, 1);
    }
}

.katana {
    position: absolute;
    width: 120px;
    height: 6px;
    background: linear-gradient(90deg, #c0c0c0 0%, #ffffff 50%, #c0c0c0 100%);
    border-radius: 3px;
    transform-origin: 15px center;
    box-shadow: 0 0 15px rgba(255, 255, 255, 0.8);
}

.katana::before {
    content: '';
    position: absolute;
    left: 0;
    top: -3px;
    width: 25px;
    height: 12px;
    background: linear-gradient(135deg, #4a5568, #2d3748);
    border-radius: 6px;
}

.katana::after {
    content: '';
    position: absolute;
    right: 0;
    top: -2px;
    width: 5px;
    height: 10px;
    background: linear-gradient(90deg, #e2e8f0, #cbd5e0);
    border-radius: 2px;
}

.katana-left {
    top: 80px;
    left: 40px;
    transform: rotate(-45deg);
}

.katana-right {
    top: 80px;
    right: 40px;
    transform: rotate(45deg);
}

.ninja-katanas.draw .katana-right {
    animation: katanaDrawRight 0.8s ease-out;
}

@keyframes katanaDrawRight {
    0% { 
        transform: rotate(45deg) translateX(50px) scale(0.5);
        opacity: 0;
    }
    50% { 
        transform: rotate(45deg) translateX(0) scale(1.2);
        opacity: 0.8;
    }
    100% { 
        transform: rotate(45deg) translateX(0) scale(1);
        opacity: 1;
    }
}

@keyframes katanaDraw {
    0% { 
        transform: rotate(-45deg) translateX(-50px) scale(0.5);
        opacity: 0;
    }
    50% { 
        transform: rotate(-45deg) translateX(0) scale(1.2);
        opacity: 0.8;
    }
    100% { 
        transform: rotate(-45deg) translateX(0) scale(1);
        opacity: 1;
    }
}

@keyframes katanaSlashCombo {
    0% { transform: rotate(-45deg); }
    15% { transform: rotate(-90deg) scale(1.1); }
    30% { transform: rotate(0deg) scale(1.2); }
    45% { transform: rotate(90deg) scale(1.1); }
    60% { transform: rotate(180deg) scale(1.2); }
    75% { transform: rotate(270deg) scale(1.1); }
    90% { transform: rotate(360deg) scale(1.2); }
    100% { transform: rotate(-45deg) scale(1); }
}

/* Enhanced Ninja Character States */
.ninja-character.stance {
    animation: ninjaCombatStance 1s ease-in-out;
}

.ninja-character.victory-pose {
    animation: ninjaVictoryPose 0.8s ease-out;
}

@keyframes ninjaCombatStance {
    0%, 100% { transform: translate(-50%, -50%) scale(1); }
    25% { transform: translate(-50%, -50%) scale(1.1) rotate(5deg); }
    50% { transform: translate(-50%, -50%) scale(1.05) rotate(-5deg); }
    75% { transform: translate(-50%, -50%) scale(1.1) rotate(5deg); }
}

@keyframes ninjaVictoryPose {
    0% { transform: translate(-50%, -50%) scale(1); }
    50% { transform: translate(-50%, -50%) scale(1.3) rotate(10deg); }
    100% { transform: translate(-50%, -50%) scale(1.1) rotate(0deg); }
}

/* Slash Effects */
.slash-effects {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 400px;
    height: 400px;
    opacity: 0;
    pointer-events: none;
}

.slash-effects.active {
    opacity: 1;
    animation: slashEffectsShow 1s ease-out;
}

.slash-line {
    position: absolute;
    height: 4px;
    background: linear-gradient(90deg, transparent, #0384C7, #ffffff, #0384C7, transparent);
    border-radius: 4px;
    opacity: 0;
    box-shadow: 0 0 15px #0384C7;
}

.slash-1 {
    top: 20%;
    left: 0;
    width: 80%;
    transform: rotate(45deg);
    animation: slashLine1 0.3s ease-out 0.1s forwards;
}

.slash-2 {
    top: 50%;
    right: 0;
    width: 70%;
    transform: rotate(-45deg);
    animation: slashLine2 0.3s ease-out 0.3s forwards;
}

.slash-3 {
    bottom: 20%;
    left: 10%;
    width: 90%;
    transform: rotate(0deg);
    animation: slashLine3 0.3s ease-out 0.5s forwards;
}

@keyframes slashEffectsShow {
    0% { opacity: 0; transform: translate(-50%, -50%) scale(0.5); }
    50% { opacity: 1; transform: translate(-50%, -50%) scale(1.2); }
    100% { opacity: 0; transform: translate(-50%, -50%) scale(1); }
}

@keyframes slashLine1 {
    0% { width: 0; opacity: 0; }
    50% { width: 80%; opacity: 1; }
    100% { width: 80%; opacity: 0; }
}

@keyframes slashLine2 {
    0% { width: 0; opacity: 0; }
    50% { width: 70%; opacity: 1; }
    100% { width: 70%; opacity: 0; }
}

@keyframes slashLine3 {
    0% { width: 0; opacity: 0; }
    50% { width: 90%; opacity: 1; }
    100% { width: 90%; opacity: 0; }
}

/* Energy Particles */
.energy-particles {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 400px;
    height: 400px;
    opacity: 0;
    pointer-events: none;
}

.energy-particles.burst {
    opacity: 1;
    animation: energyBurst 1.5s ease-out;
}

.energy-particle {
    position: absolute;
    width: 6px;
    height: 6px;
    background: radial-gradient(circle, #0384C7, #ffffff);
    border-radius: 50%;
    opacity: 0;
    box-shadow: 0 0 12px #0384C7;
}

.energy-particle:nth-child(1) {
    top: 10%;
    left: 20%;
    animation: energyFloat1 1.2s ease-out 0.1s forwards;
}

.energy-particle:nth-child(2) {
    top: 30%;
    right: 15%;
    animation: energyFloat2 1.2s ease-out 0.2s forwards;
}

.energy-particle:nth-child(3) {
    bottom: 20%;
    left: 10%;
    animation: energyFloat3 1.2s ease-out 0.3s forwards;
}

.energy-particle:nth-child(4) {
    bottom: 30%;
    right: 20%;
    animation: energyFloat4 1.2s ease-out 0.4s forwards;
}

.energy-particle:nth-child(5) {
    top: 50%;
    left: 5%;
    animation: energyFloat5 1.2s ease-out 0.5s forwards;
}

.energy-particle:nth-child(6) {
    top: 60%;
    right: 5%;
    animation: energyFloat6 1.2s ease-out 0.6s forwards;
}

@keyframes energyBurst {
    0% { opacity: 0; transform: translate(-50%, -50%) scale(0.5); }
    30% { opacity: 1; transform: translate(-50%, -50%) scale(1.2); }
    100% { opacity: 0; transform: translate(-50%, -50%) scale(1.5); }
}

@keyframes energyFloat1 {
    0% { opacity: 0; transform: translate(0, 0) scale(0.5); }
    50% { opacity: 1; transform: translate(-30px, -50px) scale(1.2); }
    100% { opacity: 0; transform: translate(-60px, -100px) scale(0.5); }
}

@keyframes energyFloat2 {
    0% { opacity: 0; transform: translate(0, 0) scale(0.5); }
    50% { opacity: 1; transform: translate(30px, -40px) scale(1.2); }
    100% { opacity: 0; transform: translate(60px, -80px) scale(0.5); }
}

@keyframes energyFloat3 {
    0% { opacity: 0; transform: translate(0, 0) scale(0.5); }
    50% { opacity: 1; transform: translate(-40px, 30px) scale(1.2); }
    100% { opacity: 0; transform: translate(-80px, 60px) scale(0.5); }
}

@keyframes energyFloat4 {
    0% { opacity: 0; transform: translate(0, 0) scale(0.5); }
    50% { opacity: 1; transform: translate(40px, 20px) scale(1.2); }
    100% { opacity: 0; transform: translate(80px, 40px) scale(0.5); }
}

@keyframes energyFloat5 {
    0% { opacity: 0; transform: translate(0, 0) scale(0.5); }
    50% { opacity: 1; transform: translate(-50px, -20px) scale(1.2); }
    100% { opacity: 0; transform: translate(-100px, -40px) scale(0.5); }
}

@keyframes energyFloat6 {
    0% { opacity: 0; transform: translate(0, 0) scale(0.5); }
    50% { opacity: 1; transform: translate(50px, -30px) scale(1.2); }
    100% { opacity: 0; transform: translate(100px, -60px) scale(0.5); }
}

/* Enhanced Message Animation */
.ninja-message.slice-send {
    animation: messageSliceSend 1s ease-out;
}

@keyframes messageSliceSend {
    0% { 
        transform: translateX(0) scale(1);
        opacity: 1;
    }
    30% { 
        transform: translateX(0) scale(1.3) rotate(360deg);
        opacity: 1;
    }
    60% { 
        transform: translateX(200px) scale(0.8) rotate(720deg);
        opacity: 0.8;
    }
    100% { 
        transform: translateX(400px) scale(0.3) rotate(1080deg);
        opacity: 0;
    }
}

/* Enhanced Smoke Effects */
.ninja-smoke.epic-puff {
    opacity: 1;
    animation: epicSmokePuff 1.5s ease-out;
}

@keyframes epicSmokePuff {
    0% { opacity: 0; transform: scale(0.5); }
    30% { opacity: 1; transform: scale(1.5); }
    100% { opacity: 0; transform: scale(3); }
}

/* Enhanced Stars */
.ninja-stars .star-4 {
    position: absolute;
    top: 10%;
    left: 10%;
    animation-delay: 0.6s;
}

.ninja-stars .star-5 {
    position: absolute;
    bottom: 10%;
    right: 10%;
    animation-delay: 0.8s;
}

/* Ninja Action Text */
.ninja-action-text {
    margin-top: 25px;
    position: relative;
    height: 40px;
}

.action-step {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    font-size: 1.1rem;
    color: #ffffff;
    background: rgba(3, 132, 199, 0.9);
    padding: 10px 20px;
    border-radius: 25px;
    border: 3px solid rgba(255, 255, 255, 0.4);
    opacity: 0;
    transition: all 0.3s ease;
    white-space: nowrap;
    box-shadow: 0 0 20px rgba(3, 132, 199, 0.4);
    text-shadow: 0 0 8px rgba(255, 255, 255, 0.6);
    font-weight: 600;
}

.action-step.active {
    opacity: 1;
    transform: translateX(-50%) scale(1.15);
    box-shadow: 0 0 30px rgba(3, 132, 199, 0.8);
    animation: actionStepPulse 0.8s ease-out;
}

@keyframes actionStepPulse {
    0% { transform: translateX(-50%) scale(0.9); }
    50% { transform: translateX(-50%) scale(1.3); }
    100% { transform: translateX(-50%) scale(1.15); }
}

.action-step.step-1 { animation-delay: 0s; }
.action-step.step-2 { animation-delay: 0.2s; }
.action-step.step-3 { animation-delay: 0.4s; }
.action-step.step-4 { 
    animation-delay: 0.6s; 
    background: rgba(16, 185, 129, 0.9);
    box-shadow: 0 0 20px rgba(16, 185, 129, 0.4);
}

.action-step.step-4.active {
    box-shadow: 0 0 30px rgba(16, 185, 129, 0.8);
}
/* New Message */
/* Overlay to cover the form and blur it */
.form-success-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.6);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 16px;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
    z-index: 10;
}

    /* Show overlay */
    .form-success-overlay.active {
        opacity: 1;
        pointer-events: all;
    }

/* The box inside the overlay */
.form-success-box {
    background: #ffffff;
    border: 2px solid #0384C7;
    border-radius: 16px;
    padding: 30px 20px;
    text-align: center;
    max-width: 400px;
    width: 90%;
    box-shadow: 0 10px 30px rgba(0,0,0,0.15);
}

/* Icon */
.form-success-icon {
    margin-bottom: 20px;
    animation: successBounce 0.8s ease;
}

@keyframes successBounce {
    0% {
        transform: scale(0) rotate(-180deg);
        opacity: 0;
    }

    50% {
        transform: scale(1.2) rotate(0);
        opacity: 0.8;
    }

    100% {
        transform: scale(1) rotate(0);
        opacity: 1;
    }
}

.form-success-box h2 {
    font-size: 1.5rem;
    color: #0384C7;
    margin: 0 0 10px;
}

.form-success-box p {
    font-size: 1rem;
    color: black;
    margin: 0;
}

/* ==================================
        CONTACT FORM VALIDATION & AJAX
===================================== */

/* Contact Modal - Success and Error States */
.login-modal.success .login-modal-title {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.login-modal.error .login-modal-title {
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.login-modal.success .login-glow {
    background: radial-gradient(circle, rgba(16, 185, 129, 0.2) 0%, transparent 70%);
}

.login-modal.error .login-glow {
    background: radial-gradient(circle, rgba(239, 68, 68, 0.2) 0%, transparent 70%);
}

.login-modal.success .loader-dots span {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
}

.login-modal.error .loader-dots span {
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
}

/* Loading spinner animation */
@keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

.animate-spin {
    animation: spin 1s linear infinite;
}

/* Form field validation - red and green colors */
.form-group input.valid,
.form-group textarea.valid,
.form-group select.valid {
    border-color: #10b981;
    background-color: #f0fdf4;
    box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.1);
}

.form-group input.invalid,
.form-group textarea.invalid,
.form-group select.invalid {
    border-color: #ef4444;
    background-color: #fef2f2;
    box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.1);
    animation: shake 0.5s ease-in-out;
}

.form-group.error {
    position: relative;
}

/* Shake animation for errors */
@keyframes shake {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-5px); }
    75% { transform: translateX(5px); }
}

/* Button disabled state with loading */
.button-contact:disabled {
    opacity: 0.8;
    cursor: not-allowed;
    background-color: #6B7280;
}

.button-contact:disabled:hover {
    background-color: #6B7280;
    transform: none;
}

/* Error messages */
.field-error-message {
    color: #ef4444;
    font-size: 0.75rem;
    font-weight: 500;
    margin-top: 0.5rem;
    display: flex;
    align-items: center;
    gap: 0.375rem;
}

/* Modal visibility control - Override login styles for contact */
.login-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.8);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.login-modal.show {
    opacity: 1;
    visibility: visible;
}

/* Contact Modal Content */
.login-modal .login-modal-content {
    background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
    border-radius: 24px;
    padding: 3rem 2rem;
    text-align: center;
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.25);
    border: 1px solid rgba(255, 255, 255, 0.8);
    max-width: 400px;
    width: 90%;
    position: relative;
    overflow: hidden;
    transform: scale(0.7) translateY(50px);
    transition: all 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

.login-modal.show .login-modal-content {
    transform: scale(1) translateY(0);
}

/* Contact Modal Specific Styles */
.login-modal .login-logo {
    width: 80px;
    height: 80px;
    margin: 0 auto 1.5rem auto;
    position: relative;
}

.login-modal .login-logo img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    filter: drop-shadow(0 4px 8px rgba(0, 137, 209, 0.3));
}

.login-modal .login-glow {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 120px;
    height: 120px;
    background: radial-gradient(circle, rgba(0, 137, 209, 0.2) 0%, transparent 70%);
    border-radius: 50%;
    z-index: -1;
}

.login-modal .login-modal-title {
    font-size: 1.5rem;
    font-weight: 700;
    font-family: 'Aeonik', sans-serif;
    color: #1f2937;
    margin-bottom: 0.5rem;
}

.login-modal .login-modal-subtitle {
    font-size: 1rem;
    font-family: 'Satoshi', sans-serif;
    color: #6b7280;
    margin-bottom: 2rem;
    line-height: 1.4;
}

.login-modal .loader-dots {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: 1rem;
}

.login-modal .loader-dots span {
    width: 12px;
    height: 12px;
    background: #0384C7;
    border-radius: 50%;
    animation: loaderDots 1.2s infinite ease-in-out;
}

.login-modal .loader-dots span:nth-child(1) {
    animation-delay: -0.32s;
}

.login-modal .loader-dots span:nth-child(2) {
    animation-delay: -0.16s;
}

.login-modal .loader-dots span:nth-child(3) {
    animation-delay: 0s;
}

@keyframes loaderDots {
    0%, 80%, 100% {
        transform: scale(0);
        opacity: 0.5;
    }
    40% {
        transform: scale(1);
        opacity: 1;
    }
}

/* reCAPTCHA validation styles */
.form-group-recaptcha.error {
    position: relative;
}

.form-group-recaptcha.error::before {
    content: '';
    position: absolute;
    top: 0;
    left: -4px;
    right: -4px;
    bottom: -4px;
    border: 2px solid #ef4444;
    border-radius: 8px;
    pointer-events: none;
    z-index: 1;
    animation: recaptcha-error-pulse 2s infinite;
}

@keyframes recaptcha-error-pulse {
    0%, 100% { 
        border-color: #ef4444; 
        box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.4);
    }
    50% { 
        border-color: #f87171; 
        box-shadow: 0 0 0 4px rgba(239, 68, 68, 0.2);
    }
}

.form-group-recaptcha .field-error-message {
    background-color: #fef2f2;
    border: 1px solid #fecaca;
    border-radius: 6px;
    padding: 8px 12px;
    margin-top: 8px;
}