.email-validation-wrapper {
    position: relative;
}

.email-validation-wrapper .input-text {
    width: 100%;
    max-width: 100%;
    padding-right: 150px;
}

.email-validation-container {
    position: absolute;
    right: 30px;
    top: 0px;
    z-index: 10;
}

.action-validate-email {
    /* Inherit site's default action button styles */
    padding: 8px 15px;
    font-size: 13px;
    cursor: pointer;
    white-space: nowrap;
    transition: background-color 0.2s ease;
    display: inline-block;
}

.action-validate-email:disabled {
    background-color: #ccc;
    border-color: #ccc;
    cursor: not-allowed;
    opacity: 0.6;
}

.email-validation-loading {
    display: inline-flex;
    align-items: center;
}

.email-validation-loading .loader {
    width: 20px;
    height: 20px;
    border: 2px solid #f3f3f3;
    border-top: 2px solid #1979c3;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.email-validation-messages {
    width: 100%;
    margin-top: 5px;
}

.email-validation-messages .message {
    padding: 10px 15px;
    border-radius: 3px;
    font-size: 13px;
}

.email-validation-messages .message.info {
    background-color: #fdf0d5;
    border: 1px solid #f5c518;
    color: #6f4400;
    padding-left: 45px;
}

.email-validation-messages .message.success {
    background-color: #e5efe5;
    border: 1px solid #006400;
    color: #006400;
}

.email-validation-pending .validation-waiting {
    display: block;
    margin-top: 5px;
    font-style: italic;
    font-size: 12px;
}

.resend-email-container {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px dashed #d1a317;
}

.action-resend-email {
    /* Inherit site's default action button styles */
    padding: 6px 12px;
    font-size: 13px;
    cursor: pointer;
    white-space: nowrap;
    transition: background-color 0.2s ease;
}

.action-resend-email:disabled {
    background-color: #ccc;
    border-color: #ccc;
    cursor: not-allowed;
    opacity: 0.6;
}

.code-input-container {
    margin-top: 15px;
}

.code-input-container .control {
    display: flex;
    gap: 10px;
    align-items: center;
}

.code-input-container #verification-code {
    max-width: 150px;
}

.action-verify-code {
    /* Inherit site's default primary button styles */
    padding: 8px 15px;
    font-size: 13px;
    cursor: pointer;
    white-space: nowrap;
}

.countdown-timer {
    margin-top: 5px;
    font-size: 12px;
    color: #666;
}

.email-validation-approved::before {
    content: '\2713';
    margin-right: 5px;
    font-weight: bold;
}

@media (max-width: 767px) {
    .email-validation-wrapper .input-text {
        padding-right: 10px;
    }
    
    .email-validation-container {
        position: static;
        transform: none;
        margin-top: 10px;
    }
    
    .action-validate-email {
        width: 100%;
        text-align: center;
    }
}

#customer-email-fieldset div.email-validation-container > button {
    border-radius: 5px;
    top: 0px;
    right: 0px;
}