/* HubSpot Form Custom Styling - Matching existing form design */

/* Hide the original form when HubSpot is loaded */
#hubspotForm ~ #contact-form {
    display: none;
}

/* Main HubSpot form container */
.hbspt-form {
    width: 100%;
    max-width: none;
}

.hs-form {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
    margin-bottom: 32px;
}

/* Field containers */
.hs-form .field {
    margin-bottom: 0;
}

/* Full width fields */
.hs-form .hs-email,
.hs-form .hs-phone,
.hs-form .hs-company,
.hs-form .hs-jobtitle,
.hs-form .hs-0-2\/website {
    grid-column: span 2;
}

/* Two column fields */
.hs-form .hs-firstname,
.hs-form .hs-lastname {
    grid-column: span 1;
}

/* Submit button container */
.hs-form .hs-submit {
    grid-column: span 2;
    text-align: center;
    margin-top: 0;
}

/* Hide labels */
.hs-form .hs-form-field > label {
    display: none !important;
}

/* Hide field descriptions */
.hs-form .hs-field-desc {
    display: none !important;
}

/* Input styling to match existing form */
.hs-form .hs-input {
    width: 100% !important;
    padding: 16px 24px !important;
    background: linear-gradient(to right, #7F31FE, #9B5EFF) !important;
    border: 2px solid white !important;
    border-radius: 16px !important;
    color: white !important;
    font-size: 16px !important;
    font-family: inherit !important;
    transition: border-color 0.3s ease !important;
    box-sizing: border-box !important;
}

.hs-form .hs-input::placeholder {
    color: #D8B4FE !important; /* purple-200 equivalent */
    opacity: 1 !important;
}

.hs-form .hs-input:focus {
    outline: none !important;
    border-color: white !important;
}

/* Input placeholders based on field names */
.hs-form input[name="firstname"]::placeholder {
    content: "Nome*";
}

.hs-form input[name="lastname"]::placeholder {
    content: "Sobrenome*";
}

.hs-form input[name="email"]::placeholder {
    content: "Seu melhor e-mail*";
}

.hs-form input[name="phone"]::placeholder {
    content: "Seu número de WhatsApp*";
}

.hs-form input[name="company"]::placeholder {
    content: "Nome da sua empresa*";
}

.hs-form input[name="jobtitle"]::placeholder {
    content: "Seu cargo*";
}

.hs-form input[name="0-2/website"]::placeholder {
    content: "Site da sua empresa*";
}

/* Submit button styling */
.hs-form .hs-button {
    /* background: linear-gradient(135deg, #7F31FE 0%, #FF6B35 50%, #7F31FE 100%) !important; */
    /* background: linear-gradient(135deg, #f97316 0%, #e04414 50%, #f97316 100%) !important; */
    /* background: linear-gradient(135deg, #f97316 0%, #ea580c 100%) !important; */
    /* Anterior */
    /* background: linear-gradient(135deg, #ffce36 0%, #ffa737 50%, #ffce36 100%) !important; */
    background-size: 200% 200% !important;
    border: none !important;
    /* border-radius: 50px !important; */
    /* padding: 16px 48px !important; */
    padding: 16px 32px !important;
    border-radius: 16px !important;
    /* color: white !important; */
    color: #4A1A8A !important;
    font-size: 18px !important;
    font-weight: 600 !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    cursor: pointer !important;
    transition: all 0.4s ease !important;
    box-shadow: 0 10px 30px rgba(127, 49, 254, 0.3) !important;
    position: relative !important;
    overflow: hidden !important;
    text-align: center !important;
    min-width: 280px !important;
    margin-top: 1.5rem;
    /* Com props do hero-button */
    background: linear-gradient(135deg, #FF6B35 0%, #FF8C42 50%, #FFA726 100%) !important;
    border-radius: 10px !important;
    font-size: 25px !important;
    font-weight: 600 !important;
}

.hs-form .hs-button:hover {
    background-position: 100% 0% !important;
    box-shadow: 0 15px 40px rgba(127, 49, 254, 0.4) !important;
    transform: translateY(-2px) !important;
}

.hs-form .hs-button:active {
    transform: translateY(0) !important;
}

/* Add multilayer button classes from site */
.hs-form .hs-button.multilayer-button {
    /* background: linear-gradient(135deg, #7F31FE 0%, #FF6B35 50%, #7F31FE 100%) !important; */
    background: linear-gradient(135deg, #f97316 0%, #ea580c 100%) !important;
    background-size: 200% 200% !important;
    border: none !important;
    border-radius: 50px !important;
    padding: 16px 48px !important;
    color: white !important;
    font-size: 18px !important;
    font-weight: 600 !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    cursor: pointer !important;
    transition: all 0.4s ease !important;
    box-shadow: 0 10px 30px rgba(127, 49, 254, 0.3) !important;
    position: relative !important;
    overflow: hidden !important;
    text-align: center !important;
    min-width: 280px !important;
    animation: gradient-shift 3s ease infinite !important;
}

.hs-form .hs-button.multilayer-button:hover {
    background-position: 100% 0% !important;
    box-shadow: 0 15px 40px rgba(127, 49, 254, 0.4) !important;
    transform: translateY(-2px) !important;
    background: linear-gradient(135deg, #ea580c 0%, #dc2626 100%) !important;
}

.hs-form .hs-button.multilayer-button:active {
    transform: translateY(0) !important;
}

/* Disabled states */
.hs-form .hs-button:disabled,
.hs-form .hs-button.disabled\:opacity-50 {
    opacity: 0.5 !important;
    cursor: not-allowed !important;
    pointer-events: none !important;
}

.hs-form .hs-button.disabled\:cursor-not-allowed {
    cursor: not-allowed !important;
}

/* Gradient animation keyframes */
@keyframes gradient-shift {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}

/* Error handling */
/* .hs-form .hs-error-msgs {
    display: none !important;
} */

.hs-form .hs-input.error,
.hs-form .hs-input.invalid {
    border-color: #FF6B6B !important;
}

.hs-form label.hs-error-msg {
    color: #FF6B6B !important;
}

/* Remove default form styling */
.hs-form .input {
    margin: 0 !important;
    padding: 0 !important;
}

.hs-form .field {
    margin: 0 !important;
    padding: 0 !important;
}

.hs-form .actions {
    margin: 0 !important;
    padding: 0 !important;
}

/* Mobile responsiveness */
@media (max-width: 768px) {
    .hs-form {
        grid-template-columns: 1fr;
        gap: 8px;
    }

    .hs-form .hs-firstname,
    .hs-form .hs-lastname,
    .hs-form .hs-email,
    .hs-form .hs-phone,
    .hs-form .hs-company,
    .hs-form .hs-jobtitle,
    .hs-form .hs-0-2\/website,
    .hs-form .hs-submit {
        grid-column: span 1;
    }

    .hs-form .hs-button {
        min-width: 100% !important;
        padding: 14px 32px !important;
        font-size: 16px !important;
    }
}

/* Loading state */
.hs-form .hs-button[disabled] {
    opacity: 0.5 !important;
    cursor: not-allowed !important;
    pointer-events: none !important;
}

/* Additional HubSpot overrides */
.hbspt-form * {
    box-sizing: border-box !important;
}

/* Hide any unwanted HubSpot branding or elements */
.hs-form .legal-consent-container,
.hs-form .hs-richtext,
.hs-form .hs_recaptcha {
    display: none !important;
}

/* Custom validation styling */
.hs-form .hs-input:valid {
    border-color: #10B981 !important;
}

/* Focus visible for accessibility */
.hs-form .hs-input:focus-visible {
    outline: 2px solid #F59E0B !important;
    outline-offset: 2px !important;
}

/* Create a custom css for invalid form button state */
.hs-form:has(.hs-error-msgs) input[type="submit"] {
    background-color: #ccc !important;
    color: #666 !important;
    cursor: not-allowed !important;
    pointer-events: none !important;
    opacity: 0.5;
}

#hubspot-error-counter {
    display: none; /* Hidden by default, shown for debugging */
}