/* GiftisAI Custom Captcha Styles */

.giftisai-captcha-wrap {
    width: 100%;
    margin-bottom: 15px;
}

.giftisai-captcha-wrap .captcha-row {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 10px !important;
    margin-bottom: 0 !important;
}

/* Canvas — fixed size, never stretch */
.giftisai-captcha-wrap .giftisai-captcha-canvas,
.contact-form .giftisai-captcha-wrap .giftisai-captcha-canvas,
.wpcf7 .giftisai-captcha-wrap .giftisai-captcha-canvas,
#contactForm .giftisai-captcha-wrap .giftisai-captcha-canvas,
.contact-sec-2 .giftisai-captcha-wrap .giftisai-captcha-canvas {
    border-radius: 8px !important;
    border: 1px solid #333 !important;
    flex-shrink: 0 !important;
    width: 200px !important;
    height: 60px !important;
    max-width: 200px !important;
    min-width: 200px !important;
    background: transparent !important;
    padding: 0 !important;
    margin: 0 !important;
    display: block !important;
}

/* =============================================
   Refresh button — master override for ALL contexts
   ============================================= */
.captcha-refresh-btn,
button.captcha-refresh-btn,
.giftisai-captcha-wrap .captcha-refresh-btn,
.contact-form .captcha-refresh-btn,
.contact-form .giftisai-captcha-wrap .captcha-refresh-btn,
.contact-form .input-group .captcha-refresh-btn,
.wpcf7 .captcha-refresh-btn,
.wpcf7 form .captcha-refresh-btn,
.contact-sec-2 .contact-form .input-group .captcha-refresh-btn,
.contact-sec-2 .contact-form .input-group button.captcha-refresh-btn,
.contact-sec-2 .contact-form .giftisai-captcha-wrap button.captcha-refresh-btn,
#contactForm .input-group .captcha-refresh-btn,
#contactForm .input-group button.captcha-refresh-btn,
#contactForm .giftisai-captcha-wrap button {
    all: unset !important;
    box-sizing: border-box !important;
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    max-width: 44px !important;
    min-height: 44px !important;
    max-height: 44px !important;
    border-radius: 50% !important;
    border: 1px solid #555 !important;
    background: #1a1a1a !important;
    background-color: #1a1a1a !important;
    color: #FD005A !important;
    cursor: pointer !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    margin: 0 !important;
    flex-shrink: 0 !important;
    transition: border-color 0.3s ease, box-shadow 0.3s ease !important;
    vertical-align: middle !important;
    text-align: center !important;
    line-height: 44px !important;
    overflow: visible !important;
    position: relative !important;
}

/* Hide any injected images inside refresh button */
.captcha-refresh-btn img,
.giftisai-captcha-wrap button img {
    display: none !important;
}

/* Kill the ::before and ::after pseudo-elements from theme */
.captcha-refresh-btn::before,
.captcha-refresh-btn::after,
button.captcha-refresh-btn::before,
button.captcha-refresh-btn::after,
.contact-sec-2 .contact-form .input-group .captcha-refresh-btn::before,
.contact-sec-2 .contact-form .input-group .captcha-refresh-btn::after,
.contact-sec-2 .contact-form .input-group button.captcha-refresh-btn::before,
.contact-sec-2 .contact-form .input-group button.captcha-refresh-btn::after,
.contact-sec-2 .contact-form .giftisai-captcha-wrap button::before,
.contact-sec-2 .contact-form .giftisai-captcha-wrap button::after,
#contactForm .giftisai-captcha-wrap button::before,
#contactForm .giftisai-captcha-wrap button::after {
    display: none !important;
    content: none !important;
    width: 0 !important;
    height: 0 !important;
    background: none !important;
    opacity: 0 !important;
}

/* SVG icon inside refresh button — perfectly centered */
.captcha-refresh-btn svg,
button.captcha-refresh-btn svg,
.giftisai-captcha-wrap .captcha-refresh-btn svg,
.contact-form .captcha-refresh-btn svg,
.contact-sec-2 .contact-form .giftisai-captcha-wrap button svg,
#contactForm .giftisai-captcha-wrap button svg {
    width: 18px !important;
    height: 18px !important;
    min-width: 18px !important;
    min-height: 18px !important;
    max-width: 18px !important;
    max-height: 18px !important;
    flex-shrink: 0 !important;
    flex-grow: 0 !important;
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
    stroke: #FD005A !important;
    fill: none !important;
    filter: none !important;
    position: static !important;
}

/* Hover state */
.captcha-refresh-btn:hover,
button.captcha-refresh-btn:hover,
.contact-sec-2 .contact-form .input-group .captcha-refresh-btn:hover,
.contact-sec-2 .contact-form .input-group button.captcha-refresh-btn:hover,
#contactForm .giftisai-captcha-wrap button:hover {
    background: #2a2a2a !important;
    background-color: #2a2a2a !important;
    border-color: #FD005A !important;
    box-shadow: 0 0 10px rgba(253, 0, 90, 0.3) !important;
    color: #FD005A !important;
    transform: none !important;
}

.captcha-refresh-btn:disabled {
    opacity: 0.5 !important;
    cursor: not-allowed !important;
}

.captcha-refresh-btn.spinning svg {
    animation: captcha-spin 0.8s linear infinite;
}

@keyframes captcha-spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* =============================================
   Captcha text input
   ============================================= */
.giftisai-captcha-wrap .giftisai-captcha-input,
.contact-form .giftisai-captcha-wrap .giftisai-captcha-input,
.wpcf7 .giftisai-captcha-wrap .giftisai-captcha-input,
#contactForm .giftisai-captcha-wrap .giftisai-captcha-input,
.contact-sec-2 .giftisai-captcha-wrap .giftisai-captcha-input {
    flex: 1 !important;
    min-width: 0 !important;
    height: 60px !important;
    padding: 0 16px !important;
    background: transparent !important;
    border: 1px solid #333 !important;
    border-radius: 8px !important;
    color: #fff !important;
    font-size: 16px !important;
    font-family: 'Poppins', sans-serif !important;
    outline: none !important;
    transition: border-color 0.3s ease !important;
    letter-spacing: 2px !important;
    box-sizing: border-box !important;
}

.giftisai-captcha-wrap .giftisai-captcha-input {
    margin-bottom: 0 !important;
    margin-top: 0 !important;
}

.giftisai-captcha-wrap .giftisai-captcha-input::placeholder {
    color: #666 !important;
    letter-spacing: normal !important;
}

.giftisai-captcha-wrap .giftisai-captcha-input:focus,
.contact-form .giftisai-captcha-wrap .giftisai-captcha-input:focus {
    border-color: #FD005A !important;
}

.giftisai-captcha-wrap .giftisai-captcha-input.wpcf7-not-valid {
    border-color: #dc3232 !important;
}

.giftisai-captcha-wrap .wpcf7-not-valid-tip {
    color: #dc3232 !important;
    font-size: 13px !important;
    margin-top: 6px !important;
    display: block !important;
}

/* Hidden input — never show */
.giftisai-captcha-wrap input[type="hidden"] {
    display: none !important;
}

/* Mobile responsive */
@media (max-width: 576px) {
    .giftisai-captcha-wrap .captcha-row {
        flex-direction: row !important;
        align-items: center !important;
    }

    .giftisai-captcha-wrap .giftisai-captcha-canvas,
    .contact-form .giftisai-captcha-wrap .giftisai-captcha-canvas {
        width: 160px !important;
        height: 50px !important;
        min-width: 160px !important;
        max-width: 160px !important;
    }

    .giftisai-captcha-wrap .giftisai-captcha-input {
        font-size: 14px !important;
        padding: 10px 14px !important;
    }
}

@media (max-width: 380px) {
    .giftisai-captcha-wrap .captcha-row {
        flex-direction: column !important;
        align-items: stretch !important;
    }

    .giftisai-captcha-wrap .giftisai-captcha-canvas,
    .contact-form .giftisai-captcha-wrap .giftisai-captcha-canvas {
        width: 100% !important;
        height: 60px !important;
        min-width: unset !important;
        max-width: 100% !important;
    }

    .captcha-refresh-btn {
        align-self: flex-end !important;
    }
}