/**
 * YSRTech OtpLogin - popup styles.
 */
.ysrtech-otp-modal {
    position: fixed;
    inset: 0;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0, 0, 0, .55);
    z-index: 99999;
    display: none;
    align-items: center;
    justify-content: center;
    overflow-y: auto;
    padding: 40px 15px;
    box-sizing: border-box;
}

body.ysrtech-otp-open {
    overflow: hidden;
}

.ysrtech-otp-dialog {
    position: relative;
    background: #fff;
    width: 100%;
    max-width: 420px;
    border-radius: 8px;
    box-shadow: 0 12px 40px rgba(0, 0, 0, .25);
    padding: 28px 26px 24px;
    box-sizing: border-box;
}

.ysrtech-otp-close {
    position: absolute;
    top: 10px;
    right: 12px;
    border: 0;
    background: transparent;
    font-size: 26px;
    line-height: 1;
    cursor: pointer;
    color: #888;
}
.ysrtech-otp-close:hover { color: #222; }

.ysrtech-otp-title {
    margin: 0 0 16px;
    font-size: 22px;
    text-align: center;
}

.ysrtech-otp-hint {
    margin: 0 0 16px;
    color: #666;
    font-size: 13px;
    text-align: center;
}

.ysrtech-otp-tabs {
    display: flex;
    border-bottom: 1px solid #e3e3e3;
    margin-bottom: 18px;
}
.ysrtech-otp-tab {
    flex: 1;
    border: 0;
    background: transparent;
    padding: 10px 6px;
    cursor: pointer;
    font-size: 14px;
    color: #777;
    border-bottom: 2px solid transparent;
}
.ysrtech-otp-tab.active {
    color: var(--logo-orange);
    border-bottom-color: var(--logo-orange);
    font-weight: 600;
}

.ysrtech-otp-field {
    margin-bottom: 14px;
}
.ysrtech-otp-field label {
    display: block;
    margin-bottom: 5px;
    font-size: 13px;
    color: #333;
}
.ysrtech-otp-field .input-text,
.ysrtech-otp-field input {
    width: 100%;
    box-sizing: border-box;
    padding: 9px 11px;
    border: 1px solid #c2c2c2;
    border-radius: 4px;
    font-size: 14px;
}
.ysrtech-otp-field input:focus {
    border-color: var(--logo-orange);
    outline: none;
}

.ysrtech-otp-actions {
    margin-top: 6px;
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
}
.ysrtech-otp-actions .button {
    /* Inherit the theme's button colour/typography; only space the label. */
    padding: 0 22px;
    cursor: pointer;
}
.ysrtech-otp-actions .button[disabled] { opacity: .6; cursor: default; }

.ysrtech-otp-resend {
    font-size: 13px;
    color: var(--logo-orange);
    text-decoration: none;
    cursor: pointer;
}
.ysrtech-otp-resend:hover { text-decoration: underline; }

.ysrtech-otp-foot {
    margin-top: 18px;
    padding-top: 14px;
    border-top: 1px solid #f0f0f0;
    text-align: center;
    font-size: 13px;
    color: #666;
}
.ysrtech-otp-foot a { color: var(--logo-orange); }

.ysrtech-otp-messages { margin-bottom: 14px; }
.ysrtech-otp-message {
    padding: 9px 12px;
    border-radius: 4px;
    font-size: 13px;
}
.ysrtech-otp-message.error   { background: #fae5e5; color: #b30000; }
.ysrtech-otp-message.success { background: #e5efe5; color: #006400; }

@media (max-width: 480px) {
    .ysrtech-otp-dialog { padding: 22px 18px 18px; }
    .ysrtech-otp-title { font-size: 19px; }
}

/* ---- Google Sign-In ---- */
.ysrtech-otp-or {
    text-align: center;
    margin: 18px 0;
    position: relative;
}
.ysrtech-otp-or::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    height: 1px;
    background: #e3e3e3;
}
.ysrtech-otp-or span {
    position: relative;
    background: #fff;
    padding: 0 12px;
    color: #999;
    font-size: 12px;
    text-transform: uppercase;
}

.ysrtech-otp-google {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    box-sizing: border-box;
    padding: 10px 14px;
    border: 1px solid #dadce0;
    border-radius: 4px;
    background: #fff;
    color: #3c4043 !important;
    font-size: 14px;
    font-weight: 500;
    text-decoration: none;
}
.ysrtech-otp-google:hover {
    background: #f7f8f8;
    box-shadow: 0 1px 2px rgba(60, 64, 67, .2);
}
.ysrtech-otp-google-icon {
    width: 18px;
    height: 18px;
    display: inline-block;
    background-repeat: no-repeat;
    background-size: 18px 18px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Cpath fill='%234285F4' d='M45.12 24.5c0-1.56-.14-3.06-.4-4.5H24v8.51h11.84c-.51 2.75-2.06 5.08-4.39 6.64v5.52h7.11c4.16-3.83 6.56-9.47 6.56-16.17z'/%3E%3Cpath fill='%2334A853' d='M24 46c5.94 0 10.92-1.97 14.56-5.33l-7.11-5.52c-1.97 1.32-4.49 2.1-7.45 2.1-5.73 0-10.58-3.87-12.31-9.07H4.34v5.7C7.96 41.07 15.4 46 24 46z'/%3E%3Cpath fill='%23FBBC05' d='M11.69 28.18C11.25 26.86 11 25.45 11 24s.25-2.86.69-4.18v-5.7H4.34C2.85 17.09 2 20.45 2 24s.85 6.91 2.34 9.88l7.35-5.7z'/%3E%3Cpath fill='%23EA4335' d='M24 10.75c3.23 0 6.13 1.11 8.41 3.29l6.31-6.31C34.91 4.18 29.93 2 24 2 15.4 2 7.96 6.93 4.34 14.12l7.35 5.7c1.73-5.2 6.58-9.07 12.31-9.07z'/%3E%3C/svg%3E");
}

/* ---- Inline sign-in (checkout gate / login page), not a modal ----
   Matches the theme's own login-form box (.account-login): same elevation
   shadow, rounded corners and full-width pill button. */
.ysrtech-otp-inline {
    max-width: 450px;
    margin: 20px auto 40px;
    padding: 24px 20px;
    border-radius: 4px;
    background: #fff;
    box-shadow: 0 2px 1px -1px rgba(0,0,0,.2), 0 0 10px 0 rgba(0,0,0,.14), 0 1px 3px 0 rgba(0,0,0,.12);
    box-sizing: border-box;
}
.ysrtech-otp-inline h2 { margin: 0 0 12px; font-size: 24px; line-height: 1.3; text-align: center; }
.ysrtech-otp-inline > p { margin: 0 0 16px; color: #000; font-size: 14px; text-align: center; }
.ysrtech-otp-inline .ysrtech-otp-actions { display: block; }
.ysrtech-otp-inline .ysrtech-otp-actions .button { width: 100%; border-radius: 25px; }
.ysrtech-otp-inline .ysrtech-otp-foot { text-align: center; }

/* ---- Signed-in line at the top of checkout billing ---- */
.ysrtech-otp-signedin {
    margin: 4px 0 14px;
    font-size: 13px;
    color: #555;
}
.ysrtech-otp-signedin .ysrtech-otp-switch {
    margin-left: 10px;
    color: var(--logo-orange);
    text-decoration: underline;
    cursor: pointer;
}