/**
 * OTP screen styles — pedagogic_manage (main site), connect-pedagogic, wp-login?sogo_otp
 */

#login {
    width: 100%;
    max-width: 720px;
    padding: 26px 24px 34px;
    margin: 2rem auto;
    direction: rtl;
}

#otp-authentication-wrap,
#otp-authentication:not(.hidden),
#otp-authentication-connect:not([style*="display: none"]) {
    max-width: 680px;
    margin: 24px auto 0;
    text-align: center;
    direction: rtl;
}

#otp-authentication.hidden {
    display: none !important;
}

.sogo-otp-auth {
    max-width: 680px;
    margin: 0 auto;
    text-align: center;
    direction: rtl;
    font-family: 'Assistant', Arial, sans-serif;
}

.sogo-otp-auth,
.sogo-otp-auth h3,
.sogo-otp-auth h4,
.sogo-otp-auth input,
.sogo-otp-auth button,
.sogo-otp-auth .btn,
.sogo-otp-auth select {
    font-family: 'Assistant', Arial, sans-serif;
}

.sogo-otp-auth h3,
.sogo-otp-auth h4 {
    margin: 0 0 8px;
    font-weight: 700;
    color: #5e5e5e;
}

.sogo-otp-auth .text-center {
    text-align: center;
}

.sogo-otp-auth .text-bold,
.sogo-otp-auth .font-bold {
    font-weight: 700;
}

.sogo-otp-auth .margin-top-md { margin-top: 16px; }
.sogo-otp-auth .margin-top-sm { margin-top: 10px; }
.sogo-otp-auth .margin-top-xs { margin-top: 6px; }
.sogo-otp-auth .margin-bottom-md { margin-bottom: 16px; }
.sogo-otp-auth .margin-all-sm { margin: 8px 0; }
.sogo-otp-auth .padding-top-md { padding-top: 16px; }
.sogo-otp-auth .padding-bottom-md { padding-bottom: 16px; }
.sogo-otp-auth .padding-all-md { padding: 12px 14px; }
.sogo-otp-auth .padding-all-sm { padding: 8px 16px; }
.sogo-otp-auth .padding-all-0 { padding: 0; }

.sogo-otp-auth .color-white { color: #fff; }
.sogo-otp-auth .color-red,
.sogo-otp-auth .color-gray-text-shadow-no .lbl_status { color: #c0392b; }
.sogo-otp-auth .color-app-2271b1 { color: #2271b1 !important; }

.sogo-otp-auth .btn {
    display: inline-block;
    cursor: pointer;
    border-radius: 4px;
    border: none;
    text-decoration: none;
}

.sogo-otp-auth .btn-color-gray,
.sogo-otp-auth .btn.btn-color-gray {
    border: 1px solid #0099cc;
    background-color: #0099cc;
    color: #fff;
}

.sogo-otp-auth .btn-round { border-radius: 999px; }

.sogo-otp-auth .form-control {
    display: block;
    width: 100%;
    padding: 8px 12px;
    border: 1px solid #ccd0d4;
    border-radius: 4px;
    box-sizing: border-box;
}

.sogo-otp-auth .alert-warning {
    background: #fff8e5;
    border: 1px solid #f0d58b;
    color: #6f5a00;
    padding: 12px 16px;
    border-radius: 4px;
}

.sogo-otp-auth .hidden { display: none !important; }

.sogo-otp-auth .miss_phone,
.sogo-otp-auth .miss_email {
    pointer-events: none;
    cursor: default;
}

.sogo-otp-auth .display-flex,
.sogo-otp-auth .buttons-code {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    gap: 10px;
    max-width: 560px;
    margin: 0 auto;
}

.sogo-otp-auth .send-code-box {
    text-decoration: none;
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: stretch;
    border: 1px solid #0073d8;
    border-radius: 4px;
    overflow: hidden;
    background: #fff;
    min-height: 50px;
}

.sogo-otp-auth .left-box {
    color: #0567bd;
    font-weight: 800;
    font-size: 15px;
    line-height: 1.35;
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 12px 10px;
    white-space: normal;
}

/* "no phone" placeholder text is informational, not a clickable target */
.sogo-otp-auth .send-code-box.miss_phone .left-box,
.sogo-otp-auth .send-code-box.miss_email .left-box {
    color: #4c5960;
    font-weight: 700;
}

.sogo-otp-auth .right-box {
    border-radius: 0;
    width: 138px;
    min-width: 138px;
    font-size: 15px;
    font-weight: 800;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    background-color: #0099cc;
    white-space: nowrap;
}

/* Update-phone hint shown on the staff auth screen when no phone exists */
.sogo-otp-auth .otp-info {
    margin: 24px auto 0;
    max-width: 560px;
    background: #fff;
    border: 1px solid #cce1ed;
    border-right: 4px solid #009fc7;
    border-radius: 6px;
    padding: 12px 14px;
    font-size: 13px;
    color: #42525a;
    line-height: 1.55;
    text-align: right;
}

.sogo-otp-auth .otp-info b {
    color: #126b8a;
}

.sogo-otp-auth #voice-message { margin: 0; }

.sogo-otp-auth .div_code_input {
    max-width: 520px;
    margin: 0 auto;
}

.sogo-otp-auth .div_code_input a#check_code {
    text-decoration: none;
    width: auto;
    min-width: 120px;
    margin: 16px auto 0;
    display: inline-block;
}

.sogo-otp-auth .box-password-wrap {
    display: flex;
    justify-content: center;
    gap: 8px;
    width: 100%;
    max-width: 420px;
    margin: 0 auto;
    padding: 0 10px;
    box-sizing: border-box;
    direction: ltr;
}

.sogo-otp-auth .box-password-wrap > input {
    flex: 1 1 0;
    min-width: 0;
    width: 100%;
    max-width: 56px;
    height: 56px;
    margin: 0;
    padding: 0;
    text-align: center;
    box-sizing: border-box;
    border-radius: 5px;
    font-size: 28px;
    border: 1px solid #999;
    font-weight: 700;
}

.sogo-otp-auth [name="box-password"]:focus,
.sogo-otp-auth [name="box-password"].border-blue {
    border-color: #2271b1;
    color: #2271b1;
    outline: none;
}

.sogo-otp-auth .lbl_status {
    display: block;
    margin-top: 10px;
    font-weight: 700;
}

.sogo-otp-auth .otp-phone-save-wrap .form-group label {
    display: block;
    margin-bottom: 8px;
    font-weight: 600;
    color: #5e5e5e;
}

/* TAS-6579 — טופס הוספת טלפון במסך ה-OTP (מוצג רק כשאין טלפון ברשומת המשתמש). */
.sogo-otp-auth .otp-phone-save-wrap {
    max-width: 560px;
    margin: 20px auto 0;
}

.sogo-otp-auth .otp-phone-row {
    display: flex;
    gap: 8px;
    justify-content: center;
    align-items: center;
}

.sogo-otp-auth #otp_new_phone {
    flex: 0 1 220px;
    height: 40px;
    padding: 0 10px;
    font-size: 18px;
    text-align: center;
    border: 1px solid #999;
    border-radius: 5px;
    box-sizing: border-box;
}

.sogo-otp-auth #otp_new_phone:focus {
    border-color: #2271b1;
    outline: none;
}

.sogo-otp-auth #otp_save_phone {
    cursor: pointer;
    white-space: nowrap;
}

.sogo-otp-auth .otp-phone-error {
    display: block;
    margin-top: 10px;
    font-weight: 700;
    color: #c0392b;
}

#otp-send-error {
    color: #c0392b;
    font-weight: 700;
    margin: 12px auto;
    max-width: 560px;
    text-align: center;
}

/* Inline loading spinner shown while a code is being sent / verified. Rendered
   inside .sogo-otp-auth so it works on every OTP screen (the global #overlay is
   not always present there). */
.sogo-otp-auth {
    position: relative;
}

.sogo-otp-loading {
    position: absolute;
    inset: 0;
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 14px;
    background: rgba(255, 255, 255, 0.9);
    border-radius: 8px;
    z-index: 20;
}

.sogo-otp-loading.is-active {
    display: flex;
}

.sogo-otp-loading-text {
    font-weight: 700;
    font-size: 16px;
    color: #0567bd;
}

.sogo-otp-spinner {
    width: 46px;
    height: 46px;
    border: 4px solid #cfe6f2;
    border-top-color: #0099cc;
    border-radius: 50%;
    animation: sogo-otp-spin 0.8s linear infinite;
}

@keyframes sogo-otp-spin {
    to {
        transform: rotate(360deg);
    }
}

@media (max-width: 767px) {
    #login {
        max-width: 96%;
        padding-left: 12px;
        padding-right: 12px;
    }

    .sogo-otp-auth .buttons-code {
        max-width: 100%;
    }

    .sogo-otp-auth .right-box {
        width: 124px;
        min-width: 124px;
        font-size: 14px;
        white-space: nowrap;
    }

    .sogo-otp-auth .left-box {
        font-size: 14px;
    }

    #tiktakconnect {
        padding-right: 14px;
        padding-left: 14px;
    }
}

/**
 * wp-login.php loads login.css which sets #login input { width:100%; margin-bottom:16px; }
 * That stacks a second "row" of default inputs under our flex OTP boxes — reset here.
 */
#login .sogo-otp-auth .div_code_input,
#login .sogo-otp-auth .div_code_input .form-group {
    display: block;
    width: 100%;
    max-width: 520px;
    margin: 0 auto;
    float: none;
}

#login .sogo-otp-auth .box-password-wrap {
    display: flex !important;
    flex-wrap: nowrap !important;
    justify-content: center;
    align-items: stretch;
    gap: 8px;
    width: 100%;
    max-width: 420px;
    margin: 0 auto;
    padding: 0 10px;
    box-sizing: border-box;
    direction: ltr;
}

#login .sogo-otp-auth .box-password-wrap > input[name="box-password"] {
    display: block !important;
    flex: 1 1 0 !important;
    min-width: 0 !important;
    width: 100% !important;
    max-width: 56px !important;
    height: 56px !important;
    margin: 0 !important;
    padding: 0 !important;
    float: none !important;
    box-shadow: none !important;
    background: #fff !important;
    border: 1px solid #999 !important;
    border-radius: 5px !important;
    font-size: 28px !important;
    font-weight: 700 !important;
    line-height: 56px !important;
    text-align: center !important;
    box-sizing: border-box !important;
}

#login .sogo-otp-auth .div_code_input a#check_code {
    display: inline-block !important;
    width: auto !important;
    min-width: 120px;
    margin: 16px auto 0 !important;
}

#login .sogo-otp-auth .send-code-box {
    box-sizing: border-box;
}

#login .sogo-otp-auth .send-code-box .right-box,
#login .sogo-otp-auth .send-code-box .left-box {
    float: none;
    box-sizing: border-box;
}

/**
 * Keep the login logo fully visible on the OTP screen (the default fixed 84px
 * height + background-size:46% clipped the tik-tak logo).
 */
#login h1,
.login h1 {
    margin-bottom: 8px;
}

#login h1 a,
.login h1 a {
    width: 260px !important;
    max-width: 100%;
    height: auto !important;
    min-height: 90px;
    background-size: contain !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
    padding-bottom: 0 !important;
    margin: 0 auto;
}