/* 邮箱验证码登录 / 注册（模仿 WC 注册/重置密码卡片样式） */
/* ── 未登录账户页：整体水平+垂直居中（减顶栏 56px + 上下留白）── */
.woocommerce-account:not(.logged-in) .entry-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    /* 从顶部往下排：标题 + 卡片整体位于页面上部约 1/3 处（不再用 transform，
       避免整块被顶出视口导致标题被裁掉）*/
    justify-content: flex-start;
    min-height: calc(100vh - 88px);
    padding-top: 5vh;
}
/* ── 卡片上方"My account"居中标题 + 隐藏 WC 默认 entry-header ── */
.lama-otp-title {
    text-align: center;
    font-size: 28px;
    font-weight: 600;
    color: #1f2937;
    margin: 0 auto 22px;
}
.woocommerce-account .entry-header { display: none; }
.lama-otp-signin-title {
    font-size: 24px;
    font-weight: 700;
    color: #111;
    margin: 0 0 12px 0;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    display: block;
    width: 100%;
    line-height: 1.2;
}

.lama-otp-wrap {
    max-width: 560px;
    width: 100%;
    margin: 56px auto 0;
    padding: 0;
    background: transparent;
    border: none;
    border-radius: 0;
    box-shadow: none;
    font-family: 'Assistant', system-ui, sans-serif;
}
.lama-otp-label {
    display: block;
    font-size: 15px;
    font-weight: 700;
    color: #1f2937;
    margin: 0 0 10px;
}
.lama-otp-label .req { color: #dc2626; }
.lama-otp-hint {
    margin: 12px 0 18px;
    font-size: 14px;
    color: #4b5563;
    line-height: 1.55;
}
.lama-otp-privacy {
    margin: 0 0 22px;
    font-size: 13px;
    color: #4b5563;
    line-height: 1.7;
}
.lama-otp-privacy a { color: #1f7a8c; text-decoration: underline; }
/* ── 邮箱自动补全下拉（自绘，绝对定位贴输入框正下方）── */
.lama-otp-email-field {
    position: relative;
    width: 400px; /* 与 Google 按钮同宽并居中 */
}
/* ── 浮动标签：空框时居中像占位符 / 输入时浮到框内顶部 ── */
.lama-otp-float-label {
    position: absolute;
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 16px;
    color: #9ca3af;
    pointer-events: none;
    opacity: 1;
    transition: all .15s ease;
    z-index: 1;
}
/* 空框（含聚焦）：Email 居中显示，等同占位符 */
.lama-otp-email-field input.lama-otp-email:placeholder-shown ~ .lama-otp-float-label {
    top: 50%;
    transform: translateY(-50%);
    font-size: 16px;
}
/* 输入后：移到框内顶部，缩小淡色，不溢出 */
.lama-otp-email-field input.lama-otp-email:not(:placeholder-shown) ~ .lama-otp-float-label {
    top: 7px;
    transform: none;
    font-size: 13px;
}
.lama-otp-email-field input.lama-otp-email:not(:placeholder-shown) {
    padding-top: 22px;
    padding-bottom: 6px;
}
/* 邮箱输入框留出右侧箭头按钮空间 */
.lama-otp-email-field input.lama-otp-email {
    padding-right: 48px;
}
/* 末尾箭头按钮（灰底 + 阴影，只显示箭头图标） */
.lama-otp-send-arrow {
    position: absolute;
    right: 6px;
    top: 50%;
    transform: translateY(-50%);
    width: 34px;
    height: 34px;
    padding: 0 !important;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
    color: #374151 !important;
    font-size: 18px !important;
    align-self: auto !important;
    cursor: pointer;
}
.lama-otp-send-arrow svg {
    display: block;
}
.lama-otp-send-arrow:hover {
    color: #111 !important;
    background: #f1f3f5 !important;
    box-shadow: 0 2px 8px rgba(0,0,0,.08) !important;
}
.lama-otp-send-arrow:disabled {
    opacity: .45;
    pointer-events: none;
}
/* ── Newsletter 勾选（自定义样式，模仿参考图）── */
.lama-otp-newsletter {
    display: flex;
    align-items: center;
    gap: 4px;
    width: 400px;
    justify-content: flex-start;
    font-size: 14px;
    color: #374151;
    cursor: pointer;
    margin-top: 8px;
    user-select: none;
}
.lama-otp-newsletter input[type="checkbox"] {
    appearance: none;
    -webkit-appearance: none;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border: 1.5px solid #374151;
    background: transparent;
    cursor: pointer;
    position: relative;
    flex-shrink: 0;
}
.lama-otp-newsletter input[type="checkbox"]:checked {
    background: #111;
    border-color: #111;
}
.lama-otp-newsletter input[type="checkbox"]:checked::after {
    content: '';
    position: absolute;
    left: 5px; top: 2px;
    width: 5px; height: 9px;
    border: solid #fff;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}
.lama-otp-tos {
    font-size: 12px;
    color: #6b7280;
    text-align: center;
    margin-top: 16px;
    line-height: 1.4;
}
.lama-otp-tos a {
    color: #374151;
    text-decoration: underline !important;
}
.lama-otp-tos a:hover {
    color: #111;
}
.lama-otp-suggest {
    position: absolute;
    left: 0;
    right: 0;
    top: calc(100% + 6px);
    z-index: 60;
    display: none;
    background: #fff;
    border: 1px solid #ece6df;
    border-radius: 10px;
    box-shadow: 0 8px 24px rgba(60, 46, 38, .14);
    max-height: 220px;
    overflow-y: auto;
    padding: 4px;
    box-sizing: border-box;
}
.lama-otp-suggest.open { display: block; }
.lama-otp-suggest .item {
    padding: 10px 12px;
    font-size: 14px;
    color: #3a2e26;
    cursor: pointer;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    border-radius: 7px;
}
.lama-otp-suggest .item:hover,
.lama-otp-suggest .item.active { background: #f4f1ec; color: #5c6b4f; }
.lama-otp-suggest .empty {
    padding: 10px 12px;
    font-size: 13px;
    color: #b3a899;
}
.lama-otp-email-step,
.lama-otp-code-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0;
}
.lama-otp-code-step { display: none; }
.lama-otp-wrap input[type=email],
.lama-otp-wrap input[type=text] {
    width: 100%;
    padding: 14px 16px;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    font-size: 16px;
    background: #fff;
    outline: none;
    transition: border-color .15s;
    box-sizing: border-box;
}
/* ── 禁掉浏览器原生 required 验证气泡（"请填写此字段"）── */
.lama-otp-wrap input:invalid {
    box-shadow: none;
}
/* 光标聚焦：仅黑色边框加粗，去掉灰边外发光
   （!important 用于压过 Astra 父主题的 input:focus 默认样式）*/
.lama-otp-wrap input:focus {
    border-color: #111 !important;
    border-width: 2px !important;
    box-shadow: none !important;
}
.lama-otp-row { display: flex; gap: 8px; }
.lama-otp-wrap button {
    padding: 14px 28px;
    border: none;
    border-radius: 8px;
    background: #1f7a8c;
    color: #fff;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: opacity .15s;
    align-self: flex-start;
}
.lama-otp-wrap button:hover { opacity: .92; }
.lama-otp-wrap button:disabled { opacity: .6; cursor: default; }
.lama-otp-back,
.lama-otp-resend {
    background: transparent !important;
    color: #1f7a8c !important;
    font-size: 13px;
    font-weight: 500;
    padding: 6px 0 !important;
    border-radius: 0 !important;
}
.lama-otp-msg {
    display: none;
    margin-top: 12px;
    font-size: 13px;
    line-height: 1.5;
}
.lama-otp-msg.ok  { color: #4a7c4a; }
.lama-otp-msg.err { color: #b4452f; }
.lama-otp-logged { text-align: center; color: #5c6b4f; }
.lama-otp-divider {
    width: 400px;
    margin: 18px auto;
    text-align: center;
    font-size: 12px;
    color: #b3a899;
    position: relative;
}
.lama-otp-divider:before {
    content: "";
    position: absolute;
    left: 0; top: 50%;
    width: 100%; height: 1px;
    background: #b8b0a3;
}
.lama-otp-divider span {
    position: relative;
    background: #fff;
    padding: 0 10px;
}

/* ── Google 一键登录按钮（卡片内水平居中，固定 400px 与 email 同宽）── */
.lama-google-wrap {
    width: 400px;
    margin: 0 auto 4px;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 44px; /* reserve space before Google renders */
    position: relative;
}
/* skeleton placeholder before Google button loads */
.lama-google-wrap:not(.is-loaded)::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, #f3f4f6 25%, #e5e7eb 50%, #f3f4f6 75%);
    background-size: 200% 100%;
    animation: lama-google-skeleton 1.2s infinite linear;
    border-radius: 6px;
}
@keyframes lama-google-skeleton {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}
/* Google rendered button container */
#lama-google-btn {
    display: flex;
    justify-content: center;
    width: 100%;
}
#lama-google-btn > div,
#lama-google-btn iframe {
    margin: 0 auto !important;
}