/* VerifyKit v2.css - OTP Verification Field Styles */

/* Container */
.vk-otp-container {
    margin: 8px 0 16px;
    font-family: inherit;
}

/* Send row - initial state with just Send OTP button */
.vk-send-row {
    margin-bottom: 8px;
}

/* OTP input row - shown after OTP sent */
.vk-otp-row {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: wrap;
}

/* OTP input field */
.vk-otp-input {
    flex: 1;
    min-width: 120px;
    padding: 9px 12px;
    border: 1px solid #cbd6e2;
    border-radius: 3px;
    font-size: 16px;
    letter-spacing: 6px;
    text-align: center;
    font-family: 'Courier New', Courier, monospace;
    transition: border-color 0.2s ease;
    outline: none;
    box-sizing: border-box;
}

.vk-otp-input:focus {
    border-color: #7b57ff;
    box-shadow: 0 0 0 2px rgba(123, 87, 255, 0.15);
}

.vk-otp-input:disabled {
    background-color: #f5f8fa;
    color: #99aab5;
    cursor: not-allowed;
}

/* Buttons */
.vk-btn {
    padding: 9px 18px;
    border: none;
    border-radius: 3px;
    cursor: pointer;
    font-size: 14px;
    font-weight: 600;
    white-space: nowrap;
    transition: background-color 0.2s ease, opacity 0.2s ease;
    line-height: 1.4;
}

.vk-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Send OTP button */
.vk-send-btn {
    background-color: #7b57ff;
    color: #ffffff;
}

.vk-send-btn:hover:not(:disabled) {
    background-color: #6a45e6;
}

/* Verify button */
.vk-verify-btn {
    background-color: #00a4bd;
    color: #ffffff;
}

.vk-verify-btn:hover:not(:disabled) {
    background-color: #0091a8;
}

/* Resend button */
.vk-resend-btn {
    background-color: #f5f8fa;
    color: #33475b;
    border: 1px solid #cbd6e2;
    min-width: 160px;
}

.vk-resend-btn:hover:not(:disabled) {
    background-color: #eaf0f6;
    border-color: #7b57ff;
    color: #7b57ff;
}

.vk-resend-btn:disabled {
    background-color: #f5f8fa;
    color: #516f90;
    border-color: #cbd6e2;
}

/* Status message */
.vk-status {
    font-size: 13px;
    margin-top: 4px;
    min-height: 18px;
    line-height: 1.4;
}

.vk-status-success {
    color: #00a4bd;
}

.vk-status-error {
    color: #f2545b;
}

/* Timer */
.vk-timer {
    font-size: 12px;
    color: #7c98b6;
    margin-top: 2px;
}

/* Verified badge */
.vk-verified-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #00a4bd;
    font-size: 14px;
    font-weight: 600;
    padding: 8px 0;
}

.vk-verified-badge svg {
    flex-shrink: 0;
}

/* Disabled submit button override */
.vk-disabled {
    opacity: 0.5 !important;
    cursor: not-allowed !important;
    pointer-events: none !important;
}

/* HubSpot specific submit button disable - more specific selectors */
.hs-form .hs-submit input[type="submit"].vk-disabled,
.hs-form .hs-submit button[type="submit"].vk-disabled,
.hs-form input[type="submit"].vk-disabled,
.hs-form button[type="submit"].vk-disabled,
form input[type="submit"].vk-disabled,
form button[type="submit"].vk-disabled {
    opacity: 0.5 !important;
    cursor: not-allowed !important;
    pointer-events: none !important;
    background-color: #cccccc !important;
    border-color: #cccccc !important;
    color: #666666 !important;
}

/* Also disable via wrapper class for extra specificity */
.vk-submit-disabled input[type="submit"],
.vk-submit-disabled button[type="submit"] {
    opacity: 0.5 !important;
    cursor: not-allowed !important;
    pointer-events: none !important;
    background-color: #cccccc !important;
    border-color: #cccccc !important;
    color: #666666 !important;
}

/* Responsive adjustments */
@media (max-width: 480px) {
    .vk-otp-row {
        flex-direction: column;
        align-items: stretch;
    }

    .vk-otp-input {
        width: 100%;
    }

    .vk-btn {
        width: 100%;
        text-align: center;
    }

    .vk-resend-btn {
        min-width: 100%;
    }
}