/*!
Theme Name: Kadence Child
Author: YR CODER
Author URI: https://yrcoder.com/
Description: Kadence Theme is a lightweight yet full featured WordPress theme for creating beautiful fast loading and accessible websites, easier than ever. It features an easy to use drag and drop header and footer builder to build any type of header in minutes. It features a full library of gorgeous starter templates that are easy to modify with our intelligent global font and color controls. With extensive integration with the most popular 3rd party plugins, you can quickly build impressive ecommerce websites, course websites, business websites, and more.
Version: 1.0
License: GNU General Public License v3.0 (or later)
License URI: https://www.gnu.org/licenses/gpl-3.0.html
Text Domain: kadence
Requires at least: 6.3
Tested up to: 6.9.1
Tags: translation-ready, accessibility-ready, two-columns, right-sidebar, left-sidebar, footer-widgets, blog, custom-logo, custom-background, custom-menu, rtl-language-support, editor-style, threaded-comments, custom-colors, featured-images, wide-blocks, full-width-template, theme-options, e-commerce
Requires PHP: 7.4

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share
what you've learned with others.
*/

.ld-registration__form{
	width:100% !important;
	max-width:100% !important;
}

/* ── Login Tab Navigation ── */
.custom-login-wrapper {
    max-width: 520px;
}

.custom-login-wrapper .custom-login-tabs {
    display: flex;
    border-bottom: 2px solid #e0e0e0;
    margin-bottom: 24px;
}

/* Use high specificity + !important to beat Kadence's button resets */
.custom-login-wrapper .custom-login-tabs .login-tab {
    flex: 1;
    padding: 12px 16px !important;
    background: transparent !important;
    border: none !important;
    border-bottom: 3px solid transparent !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    color: #888 !important;
    font-weight: 600 !important;
    font-size: 15px !important;
    cursor: pointer;
    margin-bottom: -2px;
    transition: color 0.2s, border-color 0.2s;
    text-transform: none !important;
    letter-spacing: normal !important;
}

.custom-login-wrapper .custom-login-tabs .login-tab:hover {
    background: transparent !important;
    color: #1a237e !important;
}

.custom-login-wrapper .custom-login-tabs .login-tab.active {
    background: transparent !important;
    color: #1a237e !important;
    border-bottom: 3px solid #1a237e !important;
    box-shadow: none !important;
}

.login-tab-content {
    display: none;
}

/* ── OTP Form ── */
/* intlTelInput wrapper must stretch to full width */
.otp-phone-wrapper .iti {
    width: 100%;
}

.otp-phone-wrapper .iti input {
    width: 100%;
}

.otp-full-btn {
    width: 100%;
    padding: 12px;
    font-size: 15px;
    text-align: center;
    justify-content: center;
}

.otp-hint-text {
    font-size: 13px;
    color: #666;
    margin-top: 6px;
}

.otp-divider {
    display: flex;
    align-items: center;
    text-align: center;
    margin: 20px 0 10px;
    color: #555;
    font-weight: 600;
}

.otp-divider::before,
.otp-divider::after {
    content: '';
    flex: 1;
    border-top: 1px solid #ddd;
}

.otp-divider span {
    padding: 0 14px;
}

.otp-sent-to {
    font-size: 13px;
    text-align: center;
    color: #555;
    margin-bottom: 4px;
}

.otp-boxes-wrapper {
    display: flex;
    gap: 10px;
    justify-content: center;
    margin: 14px 0;
}

.otp-box {
    width: 48px;
    height: 52px;
    text-align: center;
    font-size: 22px;
    font-weight: 700;
    border: 1px solid #ccc;
    border-radius: 6px;
    outline: none;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.otp-box:focus {
    border-color: #1a237e;
    box-shadow: 0 0 0 2px rgba(26, 35, 126, 0.15);
}

.otp-resend-row {
    text-align: center;
    font-size: 13px;
    color: #555;
}

.otp-resend-row #resend-countdown {
    color: #1a237e;
    font-weight: 600;
}

.otp-resend-row #resend-otp-link {
    color: #1a237e;
    font-weight: 600;
    text-decoration: none;
}

.otp-resend-row #resend-otp-link:hover {
    text-decoration: underline;
}

#otp-message {
    margin-top: 10px;
    font-size: 14px;
    text-align: center;
}

/* ── Registration Form — Mobile & OTP fields ── */
.learndash-registration-field-mobile .input-group {
    position: relative;
    display: flex;
}

/* Force both fields to span the full width of LearnDash's two-column grid */
.learndash-registration-field-mobile,
.reg-otp-verify-field {
    grid-column: 1 / -1 !important;
}

/* intlTelInput stretches full width in the registration form */
.reg-phone-wrapper .iti {
    width: 100%;
    display: block;
}

.reg-phone-wrapper .iti input,
.reg-phone-input {
    width: 100% !important;
}

/* Send OTP / Verify OTP buttons — shared base styles */
.reg-otp-btn,
.reg-verify-btn {
    display: block !important;
    width: 100%;
	height: 50px;
    margin-top: 12px !important;
    padding: 11px 16px !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    text-align: center !important;
    border-radius: 4px !important;
    cursor: pointer;
    background-color: #1a237e !important;
    color: #fff !important;
    border: none !important;
    box-shadow: none !important;
}

.reg-otp-btn:hover,
.reg-verify-btn:hover {
    background-color: #283593 !important;
    color: #fff !important;
}

.reg-otp-btn:disabled,
.reg-verify-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

/* Phone input + Send OTP button on one inline row */
.reg-mobile-field .input-group {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    gap: 0;
}

.reg-mobile-field .input-group .reg-phone-wrapper {
    flex: 1;
    min-width: 0;
}

.reg-mobile-field .input-group .reg-phone-wrapper .iti {
    width: 100%;
    display: block;
}

.reg-mobile-field .input-group .reg-phone-wrapper .iti input {
    width: 100% !important;
    border-radius: 4px 0 0 4px !important;
    border-right: none !important;
    height: 100%;
}

.reg-mobile-field .input-group .reg-otp-btn, .learndash-registration-field-otp-verify .input-group .verify-otp-button {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: auto !important;
    margin-top: 0 !important;
    white-space: nowrap;
    flex-shrink: 0;
    border-radius: 0 4px 4px 0 !important;
}

/* Validation error labels drop below the input+button row */
.reg-mobile-field .input-group label.error {
    width: 100%;
    order: 9;
    color: #c62828;
    font-size: 12px;
    margin-top: 4px;
}

/* Hint text below Send OTP */
.reg-otp-hint {
    font-size: 13px;
    color: #666;
    margin: 8px 0 0;
    width: 100% !important;
}

/* Timer */
.reg-timer-row {
    margin-top: 6px;
    min-height: 20px;
}

.reg-timer-display {
    font-size: 13px;
    color: #1a237e;
    font-weight: 600;
}

/* OTP section spacing */
.learndash-registration-field-otp-verify {
    margin-top: 4px !important;
	max-width: 100% !important;
}

/* Sent-to note */
.reg-otp-sent-note {
    font-size: 13px;
    color: #555;
    margin: 4px 0 10px;
}

/* OTP input + Verify OTP button inline */
.reg-otp-input-row {
    display: flex !important;
    flex-direction: row !important;
    align-items: stretch;
    flex-wrap: nowrap;
    gap: 0;
    padding: 0 !important;
}

.reg-otp-input-row .reg-otp-input {
    flex: 1 1 0% !important;
    width: auto !important;
    min-width: 0;
    margin: 0 !important;
    font-size: 18px !important;
    letter-spacing: 6px;
    text-align: center;
    border-radius: 4px 0 0 4px !important;
    border-right: none !important;
    box-shadow: none !important;
}

.reg-otp-input-row .reg-verify-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: auto !important;
    flex-shrink: 0;
    margin: 0 !important;
    white-space: nowrap;
    border-radius: 0 4px 4px 0 !important;
}

@media (max-width: 768px) {
    .reg-otp-input-row {
        flex-direction: row !important;
    }
}

/* Success / error message below phone field */
#learndash_registerform #message.success {
    color: #2e7d32;
    font-size: 13px;
    margin-top: 6px;
    font-weight: 600;
}

#learndash_registerform #message.error {
    color: #c62828;
    font-size: 13px;
    margin-top: 6px;
    font-weight: 600;
}

.learndash-registration-field-password{
	max-width:48% !important;
}

@media (max-width: 768px) {
  /* Styles for mobile devices */
 .reg-otp-btn{
	 height: 46px;
 }

.learndash-registration-field-password {
  max-width: 100% !important;
}
}