/**
 * Webkul Software.
 *
 * @category  Webkul
 * @package   Webkul_WhatsAppLogin
 * @author    Webkul Software Private Limited
 * @copyright Webkul Software Private Limited (https://webkul.com)
 * @license   https://store.webkul.com/license.html
 */

.wk-login-with-whatsapp, .wk-signup-with-whatsapp, .wk-login-with-whatsapp-checkout {
    background-color: #20b256 !important;
    border: 1px solid #20b256 !important;
    color: #fff;
    padding: 7px 15px 4px 15px !important;
    font-size: 1.4rem;
    font-weight: 600;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    border-radius: 5px;
    font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    margin-right: 1rem;
    cursor: pointer;
}

.wk-whatsapp-field, .wk-whatsapp-field-signup {
    padding: 15px 0px 0px 0px !important;
}

.wk-display-none {
    display: none;
}

.wk-send-otp, .wk-send-otp-login, .wk-send-otp-signup, .wk-verify-otp, .wk-verify-signup-otp {
    float: right;
}

.otp-waiting, .otp-waiting:hover {
    color: inherit;
    text-decoration: none;
    cursor: default;
}

.resend-otp {
    cursor: pointer;
}

select#phone-country-code {
    width: 8%;
    display: inline-block;
}

input#wk-wa-number, input#wk-wa-number-signup {
    display: inline-block;
}

@media only screen and (max-width: 768px) {
    .wk-login-with-whatsapp, .wk-signup-with-whatsapp {
        width: 100%;
    }
}

.intl-tel-input,
.iti {
    width: 100%;
}

#error-msg, #valid-msg {
    position: static;
    display: block;
    font-size: 12px;
    margin-top: 6px;
    clear: both;
}

#error-msg {
    color: #dc2626;
}

#valid-msg {
    color: #16a34a;
}

/* WhatsApp Modal - Stacking order & compact sizing matching login modal */
.modals-wrapper .modals-overlay,
.modals-overlay {
    z-index: 10001 !important;
}

.wk-whatsapp-modal.modal-popup {
    z-index: 10005 !important;
    pointer-events: auto !important;
}

.wk-whatsapp-modal.modal-popup .modal-inner-wrap {
    width: 92% !important;
    max-width: 440px !important;
    margin: 5rem auto !important;
    border-radius: 12px !important;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2) !important;
    padding: 0 !important;
    background: #ffffff !important;
    box-sizing: border-box !important;
    position: relative !important;
    overflow: visible !important;
    z-index: 10006 !important;
}

@media screen and (max-width: 767px) {
    .wk-whatsapp-modal.modal-popup .modal-inner-wrap {
        width: 90% !important;
        max-width: 360px !important;
        margin: 2rem auto !important;
    }
}

.wk-whatsapp-modal.modal-popup .modal-header {
    padding: 20px 24px 16px 24px !important;
    border-bottom: 1px solid #f0f0f0 !important;
    position: relative !important;
    border-top-left-radius: 12px !important;
    border-top-right-radius: 12px !important;
    background: #ffffff !important;
}

.wk-whatsapp-modal.modal-popup .modal-title {
    font-size: 18px !important;
    font-weight: 600 !important;
    color: #1a1a1a !important;
    border: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    padding-right: 36px !important;
}

.wk-whatsapp-modal.modal-popup .action-close {
    background: #f3f4f6 !important;
    border: 0 !important;
    border-radius: 50% !important;
    width: 32px !important;
    height: 32px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    margin: 0 !important;
    cursor: pointer !important;
    position: absolute !important;
    right: 18px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
}

.wk-whatsapp-modal.modal-popup .action-close:hover {
    background: #e5e7eb !important;
}

.wk-whatsapp-modal.modal-popup .modal-content {
    padding: 24px !important;
    background: #ffffff !important;
    overflow: visible !important;
}

/* Ensure WhatsApp forms display when modal opens */
.wk-whatsapp-modal #wk-whatsapp-form,
.wk-whatsapp-modal #wk-whatsapp-form-signup {
    display: block !important;
    width: 100% !important;
}

/* Ensure elements meant to be hidden within the form stay hidden */
.wk-whatsapp-modal .wk-display-none,
.wk-whatsapp-modal #error-msg.wk-display-none,
.wk-whatsapp-modal #valid-msg.wk-display-none {
    display: none !important;
}

.wk-whatsapp-modal.modal-popup .modal-footer {
    padding: 14px 24px 18px 24px !important;
    border-top: 1px solid #f0f0f0 !important;
    display: flex !important;
    justify-content: flex-end !important;
    gap: 10px !important;
    border-bottom-left-radius: 12px !important;
    border-bottom-right-radius: 12px !important;
    background: #ffffff !important;
}

.wk-whatsapp-modal.modal-popup .modal-footer .action {
    margin: 0 !important;
}

.wk-whatsapp-modal .wk-whatsapp-field,
.wk-whatsapp-modal .wk-whatsapp-field-signup {
    padding: 0 !important;
    margin-bottom: 16px !important;
}

.wk-whatsapp-modal .wk-whatsapp-field:last-child,
.wk-whatsapp-modal .wk-whatsapp-field-signup:last-child {
    margin-bottom: 0 !important;
}

.wk-whatsapp-modal .wk-whatsapp-field label,
.wk-whatsapp-modal .wk-whatsapp-field-signup label {
    font-weight: 600 !important;
    font-size: 13px !important;
    color: #374151 !important;
    margin-bottom: 6px !important;
    display: block !important;
}

.wk-whatsapp-modal .input-container {
    position: relative !important;
    width: 100% !important;
}

.wk-whatsapp-modal .iti {
    width: 100% !important;
    display: block !important;
}

.wk-whatsapp-modal input#wk-wa-number,
.wk-whatsapp-modal input#wk-wa-number-signup {
    width: 100% !important;
    height: 44px !important;
    border-radius: 6px !important;
    border: 1px solid #d1d5db !important;
    box-sizing: border-box !important;
    font-size: 14px !important;
    background: #ffffff !important;
    color: #1f2937 !important;
}

.wk-whatsapp-modal input#wk-wa-number:focus,
.wk-whatsapp-modal input#wk-wa-number-signup:focus {
    border-color: #20b256 !important;
    outline: none !important;
    box-shadow: 0 0 0 2px rgba(32, 178, 86, 0.2) !important;
}

.wk-whatsapp-modal input#wk-otp,
.wk-whatsapp-modal input#wk-signup-otp,
.wk-whatsapp-modal input#wk-first-name,
.wk-whatsapp-modal input#wk-last-name {
    width: 100% !important;
    height: 44px !important;
    border-radius: 6px !important;
    border: 1px solid #d1d5db !important;
    padding: 0 12px !important;
    box-sizing: border-box !important;
    font-size: 14px !important;
    background: #ffffff !important;
    color: #1f2937 !important;
}

.wk-whatsapp-modal input#wk-otp:focus,
.wk-whatsapp-modal input#wk-signup-otp:focus,
.wk-whatsapp-modal input#wk-first-name:focus,
.wk-whatsapp-modal input#wk-last-name:focus {
    border-color: #20b256 !important;
    outline: none !important;
    box-shadow: 0 0 0 2px rgba(32, 178, 86, 0.2) !important;
}

.wk-whatsapp-modal .wk-send-otp-login,
.wk-whatsapp-modal .wk-send-otp-signup,
.wk-whatsapp-modal .wk-verify-otp,
.wk-whatsapp-modal .wk-verify-signup-otp {
    background-color: #20b256 !important;
    border: 1px solid #20b256 !important;
    color: #ffffff !important;
    padding: 11px 20px !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    border-radius: 6px !important;
    cursor: pointer !important;
    transition: background-color 0.2s ease, opacity 0.2s ease !important;
    width: 100% !important;
    float: none !important;
    display: block !important;
    text-align: center !important;
    box-sizing: border-box !important;
    line-height: normal !important;
}

.wk-whatsapp-modal .wk-send-otp-login:hover,
.wk-whatsapp-modal .wk-send-otp-signup:hover,
.wk-whatsapp-modal .wk-verify-otp:hover,
.wk-whatsapp-modal .wk-verify-signup-otp:hover {
    background-color: #1a9648 !important;
    border-color: #1a9648 !important;
}

.wk-whatsapp-modal .wk-send-otp-login.disabled,
.wk-whatsapp-modal .wk-send-otp-signup.disabled {
    opacity: 0.6 !important;
    cursor: not-allowed !important;
}

.wk-whatsapp-modal .wk-wa-cancel-btn {
    background-color: #f3f4f6 !important;
    border: 1px solid #d1d5db !important;
    color: #4b5563 !important;
    padding: 8px 18px !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    border-radius: 6px !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
}

.wk-whatsapp-modal .wk-wa-cancel-btn:hover {
    background-color: #e5e7eb !important;
    color: #111827 !important;
    border-color: #9ca3af !important;
}

.wk-whatsapp-modal #check-action,
.wk-whatsapp-modal #signup-check-action {
    margin-top: 8px !important;
    font-size: 13px !important;
    clear: both;
}

.wk-whatsapp-modal #valid-msg {
    display: none !important;
}

.wk-whatsapp-modal .resend-otp-login,
.wk-whatsapp-modal .resend-otp-signup {
    color: #20b256 !important;
    font-size: 13px !important;
    margin-top: 8px !important;
    display: inline-block !important;
    text-decoration: underline !important;
}

.wk-whatsapp-modal .resend-otp-login.wk-display-none,
.wk-whatsapp-modal .resend-otp-signup.wk-display-none,
.wk-whatsapp-modal .otp-waiting.wk-display-none {
    display: none !important;
}

.wk-whatsapp-modal .otp-waiting {
    font-size: 13px !important;
    color: #6b7280 !important;
    margin-top: 8px !important;
    display: inline-block !important;
}

.modal-popup.alert .modal-inner-wrap {
    max-width: 440px !important;
    border-radius: 12px !important;
}

/* Hide separate telephone_code field in checkout and address forms */
.checkout-index-index [data-index="telephone_code"],
.checkout-index-index div[name$=".telephone_code"],
.checkout-index-index .field[name*="telephone_code"],
.checkout-index-index .field.telephone_code,
.customer-address-form .field.telephone_code {
    display: none !important;
}

/* Checkout telephone intlTelInput styling */
.checkout-index-index .field[name*="telephone"] .control,
.checkout-index-index [data-index="telephone"] .control {
    position: relative !important;
}

.checkout-index-index .field[name*="telephone"] .iti,
.checkout-index-index [data-index="telephone"] .iti,
.customer-address-form .field.telephone .iti {
    width: 100% !important;
    display: block !important;
}

.checkout-index-index .field[name*="telephone"] .iti input,
.checkout-index-index [data-index="telephone"] .iti input,
.customer-address-form .field.telephone .iti input {
    width: 100% !important;
    height: 40px !important;
    font-size: 14px !important;
    box-sizing: border-box !important;
    background: #ffffff !important;
    padding-right: 42px !important;
}

.checkout-index-index .field[name*="telephone"] .control._with-tooltip,
.checkout-index-index [data-index="telephone"] .control._with-tooltip {
    position: relative !important;
}

.checkout-index-index .field[name*="telephone"] .control._with-tooltip .field-tooltip,
.checkout-index-index [data-index="telephone"] .control._with-tooltip .field-tooltip {
    right: 10px !important;
    top: 50% !important;
    bottom: auto !important;
    left: auto !important;
    position: absolute !important;
    z-index: 5 !important;
    transform: translateY(-50%) !important;
    margin: 0 !important;
    padding: 0 !important;
    display: inline-block !important;
    line-height: 1 !important;
}

.checkout-index-index .field[name*="telephone"] .control._with-tooltip .field-tooltip .field-tooltip-action,
.checkout-index-index [data-index="telephone"] .control._with-tooltip .field-tooltip .field-tooltip-action {
    display: inline-block !important;
    vertical-align: middle !important;
}

.checkout-index-index .field[name*="telephone"] .iti__selected-flag,
.checkout-index-index [data-index="telephone"] .iti__selected-flag,
.customer-address-form .field.telephone .iti__selected-flag {
    padding: 0 8px 0 10px !important;
    background-color: transparent !important;
}

.checkout-index-index .field[name*="telephone"] .iti__selected-dial-code,
.checkout-index-index [data-index="telephone"] .iti__selected-dial-code,
.customer-address-form .field.telephone .iti__selected-dial-code {
    font-size: 14px !important;
    font-weight: 500 !important;
    color: #374151 !important;
}

.checkout-index-index .field[name*="telephone"] .iti__country-list,
.checkout-index-index [data-index="telephone"] .iti__country-list,
.customer-address-form .field.telephone .iti__country-list {
    z-index: 1000 !important;
    font-size: 13px !important;
    max-height: 220px !important;
    border-radius: 6px !important;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15) !important;
}