/* =========================================================
   BidyaBooks Registration
========================================================= */

.required {
    color: red;
}

.bidya-password-rules p {
    margin-bottom: 10px;
}

input#reg_email {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    height: 40px !important;
    margin: 0 !important;
    padding: 0 11px !important;
    box-sizing: border-box !important;
    border: 1px solid #d9dee7 !important;
    border-radius: 4px !important;
    color: #334155 !important;
    font-size: 15px !important;
    font-weight: 400 !important;
    line-height: 40px !important;
    outline: none !important;
    box-shadow: none !important;

}

.bidya-password-rules {
    font-size: 12px;
    line-height: 1.4;
}

.bidya-password-rules strong {
    flex: 0 0 auto;
    color: red;
}


/* =========================================================
   PASSWORD RULE SEPARATOR
========================================================= */

.bidya-password-rules li:not(:last-child)::after {
    content: "|";
    margin-left: 12px;
    color: #b5b5b5;
}

.phone-row p {
    margin-bottom: 0 !important;
}
/* =========================================================
   CONFIRM PASSWORD
========================================================= */

.bidya-confirm-password-row {
    position: relative !important;
}

.bidya-confirm-password-row label {
    display: block !important;
    width: 100% !important;
    margin-bottom: 8px !important;
    white-space: nowrap !important;
    line-height: 1.5 !important;
}

.bidya-confirm-password-row label .required {
    display: inline !important;
    position: static !important;
    color: red !important;
    margin-left: 2px !important;
}

.bidya-confirm-password-row p{
    margin-bottom: 0 !important;
}
/*
 * WooCommerce automatically adds:
 *
 * .password-input
 * .show-password-input
 *
 * around password fields.
 *
 * We only make sure the wrapper is positioned correctly.
 */

.bidya-confirm-password-row .password-input {
    position: relative !important;
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    height: 40px !important;
    margin: 0 !important;
    padding: 0 11px !important;
    box-sizing: border-box !important;
    border: 1px solid #d9dee7 !important;
    border-radius: 4px !important;
    color: #334155 !important;
    font-size: 15px !important;
    font-weight: 400 !important;
    line-height: 40px !important;
    outline: none !important;
    box-shadow: none !important;

}


/*
 * Confirm Password input
 */

.bidya-confirm-password-row
.password-input
input {
    padding: 10px 50px 10px 14px !important;
    background-color: #f9fafb !important;
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    height: 40px !important;
    margin: 0 !important;
    box-sizing: border-box !important;
    border: 1px solid #d9dee7 !important;
    border-radius: 4px !important;
    color: #334155 !important;
    font-size: 15px !important;
    font-weight: 400 !important;
    line-height: 40px !important;
    outline: none !important;
    box-shadow: none !important;

}


/*
 * WooCommerce eye
 *
 * We do NOT create the icon.
 * WooCommerce creates it.
 */

.bidya-confirm-password-row
.password-input
.show-password-input {

    position: absolute !important;

    top: 50% !important;

    right: 10px !important;

    transform: translateY(-50%) !important;

    margin: 0 !important;

    cursor: pointer !important;

    z-index: 20 !important;
}


/* =========================================================
   CONFIRM PASSWORD EYE
========================================================= */

.bidya-confirm-password-wrapper {
    position: relative !important;
    display: block !important;
    width: 100% !important;
    top:-13px !important;
    
}

.bidya-confirm-password-wrapper #reg_confirm_password {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    height: 40px !important;
    margin: 0 !important;
    padding: 0 11px !important;
    box-sizing: border-box !important;
    border: 1px solid #d9dee7 !important;
    border-radius: 4px !important;
    color: #334155 !important;
    font-size: 15px !important;
    font-weight: 400 !important;
    line-height: 40px !important;
    outline: none !important;
    box-shadow: none !important;
    background-color: #f9fafb !important;
}


/*
 * Same WooCommerce eye position
 */

.bidya-confirm-password-eye {
    position: absolute !important;
    top: 65% !important;
    right: 12px !important;
    transform: translateY(-50%) !important;
    margin: 0 !important;
    cursor: pointer !important;
    z-index: 50 !important;
}


/*
 * Make sure our cloned icon is visible
 */

.bidya-confirm-password-eye::after {
    display: block !important;
}

woocommerce form .show-password-input::after, .woocommerce-page form .show-password-input::after {
    line-height: 0 !important;

}
/* ============================================================
   BIDYABOOKS - EMAIL ADDRESS LABEL
   ============================================================ */

.woocommerce-account
.woocommerce-form-login
label[for="username"] {

    text-transform: capitalize !important;
}


.woocommerce-account
.woocommerce-form-register
label[for="reg_email"] {

    text-transform: capitalize !important;
}


/* ============================================================
 * BIDYABOOKS - REGISTER FORM PHONE LAYOUT
 * ============================================================ */

/*
 * Phone field itself
 */
/*.woocommerce-form-register p.form-row-wide:has(#reg_phone) {*/
/*    width: 100% !important;*/
/*    max-width: 100% !important;*/
/*    margin-bottom: 18px !important;*/
/*}*/


/*
 * +91 + phone input
 *
 * FORCE FULL WIDTH
 */
/*.woocommerce-form-register .bidya-phone-wrapper {*/
/*    display: grid !important;*/

/*    grid-template-columns: 64px minmax(0, 1fr) !important;*/

/*    width: 100% !important;*/
/*    max-width: 100% !important;*/

/*    min-width: 0 !important;*/

/*    margin: 0 !important;*/
/*    padding: 0 !important;*/

/*    box-sizing: border-box !important;*/
/*}*/


/*
 * +91
 */
.woocommerce-form-register .bidya-phone-wrapper .bidya-phone-prefix {
    display: flex !important;

    align-items: center !important;
    justify-content: center !important;

    width: 64px !important;
    min-width: 64px !important;
    max-width: 64px !important;

    height: 40px !important;

    margin: 0 !important;
    padding: 0 !important;

    box-sizing: border-box !important;

    border: 1px solid #d7dce5 !important;
    border-right: 0 !important;

    border-radius: 4px 0 0 4px !important;

    background: #f5f7fa !important;

    white-space: nowrap !important;
}


/*
 * Phone input
 */
.woocommerce-form-register .bidya-phone-wrapper #reg_phone {
    display: block !important;

    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;

    height: 40px !important;

    margin: 0 !important;
    padding: 0 14px !important;

    box-sizing: border-box !important;

    border-radius: 0 4px 4px 0 !important;
}


/* ============================================================
 * CONFIRM PASSWORD
 * ============================================================ */




/*
 * Confirm password input
 */
.woocommerce-form-register
.bidya-confirm-password-row
#reg_confirm_password {
    width: 100% !important;
    max-width: 100% !important;

    box-sizing: border-box !important;
}

/* ============================================================
 * BIDYABOOKS - REMOVE EMPTY WOOCOMMERCE GAP
 * BETWEEN PHONE AND CONFIRM PASSWORD
 * ============================================================ */

/*
 * WooCommerce inserts this invisible element:
 *
 * <p>
 *     <wc-order-attribution-inputs></wc-order-attribution-inputs>
 * </p>
 *
 * It creates the large empty vertical space.
 */






/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 767px) {

    .bidya-password-rules {
        font-size: 11px;

        gap: 6px;

        overflow-x: auto;
    }

}