/* 共用前端登入／註冊／忘記密碼／盤商會員中心；不影響商品搜尋與後台。 */
.frontend-radio-buttons{display:flex;flex-wrap:wrap;gap:8px}.frontend-radio-buttons label{position:relative;cursor:pointer;padding:0!important;margin:0}.frontend-radio-buttons input[type=radio]{position:absolute;opacity:0;width:1px;height:1px;margin:0}.frontend-radio-buttons label>span{display:inline-flex;align-items:center;justify-content:center;min-height:40px;padding:7px 14px;border:1px solid #ddd;border-radius:4px;background:#fff;color:#777;font-size:14px;line-height:1.4}.frontend-radio-buttons input:checked+span{border-color:#dfb7b7;background:#fff2f2;color:#b22727}.frontend-radio-buttons input:focus-visible+span{outline:2px solid #cb0505;outline-offset:2px}
.frontend-validated .resultMsg { flex:0 0 100%; width:100%; box-sizing:border-box; margin:18px 0 0; padding:10px 14px; border:1px solid; border-radius:5px; text-align:left; font-size:14px; font-weight:400; line-height:1.65; overflow-wrap:anywhere; }
.frontend-validated .resultMsg.error-message { color:#993f3f; background:#fff6f5; border-color:#e6c4c1; }
.frontend-validated .resultMsg.sent-message { color:#346d4b; background:#f2faf5; border-color:#c4ddcd; }
.frontend-validated .resultMsg .fa { margin-right:5px; }
.frontend-validated .submitBlock { position:relative; margin-top:20px; }
main.main_box2 .frontend-validated .submitBlock input[type=submit] { margin:0; }
.frontend-validated .submitBlock.is-submitting input[type=submit] { color:transparent; cursor:wait; opacity:.8; }
.frontend-validated .submitBlock.is-submitting::after { content:""; position:absolute; left:50%; top:50%; width:18px; height:18px; margin:-9px 0 0 -9px; border:2px solid rgba(255,255,255,.45); border-top-color:#fff; border-radius:50%; box-sizing:border-box; animation:frontend-submit-spin .7s linear infinite; pointer-events:none; }
@keyframes frontend-submit-spin { to { transform:rotate(360deg); } }
@media (prefers-reduced-motion:reduce) { .frontend-validated .submitBlock.is-submitting::after { animation:none; } }
.frontend-validated .frontend-field-content { flex:1; min-width:0; }
.frontend-validated .validation-control { position:relative; display:block; min-width:0; flex:1; }
.frontend-validated .validation-control input,
.frontend-validated .validation-control select,
.frontend-validated .validation-control textarea { width:100%; box-sizing:border-box; padding-right:38px; transition:border-color .15s, background-color .15s; }
.frontend-validated .validation-control.has-error input,
.frontend-validated .validation-control.has-error select,
.frontend-validated .validation-control.has-error textarea { border-color:#d29a9a; background-color:#fff8f8; box-shadow:none; }
.frontend-validated .has-error::after {
    content:""; position:absolute; right:14px; top:50%; transform:translateY(-50%);
    display:block; width:14px; height:14px; border-radius:50%; background-color:#b95151;
    /* 幾何圖形取代文字，避免字型基線使符號偏移。 */
    background-image:linear-gradient(#fff,#fff),radial-gradient(circle,#fff 65%,transparent 70%);
    background-size:2px 5px,2px 2px; background-position:center 3px,center 9px;
    background-repeat:no-repeat; pointer-events:none;
}
.frontend-validated .has-error[data-error-symbol="×"]::after {
    background-image:linear-gradient(45deg,transparent 42%,#fff 43%,#fff 57%,transparent 58%),
        linear-gradient(-45deg,transparent 42%,#fff 43%,#fff 57%,transparent 58%);
    background-size:8px 8px; background-position:center;
}
.frontend-validated .validation-choice { position:relative; }
.frontend-validated .validation-choice.has-error { outline:1px solid #d29a9a; outline-offset:4px; }
.frontend-validated .validation-choice.has-error::after { position:static; transform:none; flex:0 0 14px; margin-left:8px; }
.frontend-validated span.error { display:none !important; }
.frontend-validated .frontend-captcha { width:100%; }
.frontend-validated .frontend-captcha-row {
    display:grid; grid-template-columns:minmax(0,1fr) 120px; gap:0; align-items:center;
    border:1px solid #666; border-radius:10px; overflow:hidden; box-sizing:border-box;
    transition:border-color .15s, background-color .15s;
}
.frontend-validated .frontend-captcha-row .validation-control input {
    width:100%; min-width:0; max-width:100%; height:40px; margin:0;
    border:0; border-radius:0; background:transparent; box-shadow:none;
}
.frontend-validated .frontend-captcha-row:focus-within { border-color:#444; }
.frontend-validated .frontend-captcha-row:has(.validation-control.has-error) {
    border-color:#d29a9a; background-color:#fff8f8;
}
.frontend-validated .frontend-captcha-row img {
    display:block; width:120px; height:40px; object-fit:fill; cursor:pointer;
    border:0; border-left:1px solid #d2d2d2; box-sizing:border-box;
}
.frontend-validated .frontend-captcha-row img:focus-visible { outline:2px solid #cb0505; outline-offset:-2px; }
.frontend-validated .frontend-captcha-hint { display:block; margin-top:5px; color:#888; font-size:12px; line-height:1.5; }
.frontend-validated .code { display:block; width:min(100%,420px); }
.frontend-validated .code .validation-control input { margin-left:0; }
@media (max-width:500px) {
    .frontend-validated .box ul li > span { width:100%; }
    .frontend-validated .frontend-field-content,
    .frontend-validated .box ul li > .validation-control { flex:none; width:100%; margin-top:5px; }
    .frontend-validated .frontend-captcha-row { grid-template-columns:minmax(0,1fr) 110px; }
    .frontend-validated .frontend-captcha-row img { width:110px; }
}