/* ==========================================================================
   form.css —— 表单反馈与反滥用组件（可跨项目复用）
   ==========================================================================
   本文件不依赖任何 CSS 自定义属性（变量），可单独引入任意项目。

   包含三个部分：
     1. 提交按钮禁用态   .submit-btn:disabled   （需配合基础 .submit-btn 使用）
     2. 蜜罐字段         .hp-field              （拦截自动化脚本填表）
     3. Toast 弹出提示   .toast-box / .toast-*  （替代 alert 与内联 msgBox）

   --------------------------------------------------------------------------
   用法一：蜜罐字段
   放在表单内任意位置，用户不可见、不可聚焦，脚本通常会误填。
   注意：刻意不使用 display:none / visibility:hidden，
         这两种写法会被自动化脚本识别并跳过。

     <div class="hp-field" aria-hidden="true">
       <label>请勿填写此项</label>
       <input type="text" name="fax" id="dr_fax" tabindex="-1" autocomplete="off">
     </div>

   配合 JS：$('#dr_fax').val() 非空即判定为机器人，直接返回假成功。

   --------------------------------------------------------------------------
   用法二：Toast 提示
   容器 #toastBox 由 JS 首次调用时自动创建并挂载到 body，无需写死 HTML。

     function showToast(message, type) {
         var cls = type === "success" ? "toast-success"
                 : type === "error"   ? "toast-error"   : "toast-info";
         var $box = $("#toastBox");
         if (!$box.length) {
             $box = $('<div id="toastBox" class="toast-box"></div>').appendTo("body");
         }
         var $item = $('<div class="toast-item"></div>').addClass(cls).text(message).appendTo($box);
         requestAnimationFrame(function () { $item.addClass("show"); });
         setTimeout(function () {
             $item.removeClass("show");
             setTimeout(function () { $item.remove(); }, 300);
         }, 3000);
     }

   调用：showToast('提交成功！', 'success')
   说明：.toast-item 初始 opacity:0，需加 .show 才可见，
         requestAnimationFrame 保证过渡动画生效。
   ========================================================================== */


/* --- 1. 提交按钮禁用态 --- */
.submit-btn:disabled {
    opacity: .6;
    cursor: not-allowed;
    transform: none
}


/* --- 2. 蜜罐字段 --- */
.hp-field {
    position: absolute !important;
    left: -9999px !important;
    top: -9999px !important;
    width: 1px;
    height: 1px;
    overflow: hidden;
    opacity: 0;
    pointer-events: none
}


/* --- 3. Toast 弹出提示 --- */
.toast-box {
    position: fixed;
    top: 32px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 3000;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    pointer-events: none;
    width: min(92%, 420px)
}

.toast-item {
    width: 100%;
    padding: 14px 22px;
    border-radius: 12px;
    font-size: 14px;
    text-align: center;
    color: #fff;
    opacity: 0;
    transform: translateY(-18px);
    transition: opacity .3s ease, transform .3s ease;
    backdrop-filter: blur(12px);
    box-shadow: 0 15px 45px rgba(0, 0, 0, .35)
}

.toast-item.show {
    opacity: 1;
    transform: translateY(0)
}

.toast-success {
    background: rgba(16, 130, 79, .92);
    border: 1px solid rgba(90, 220, 160, .4)
}

.toast-error {
    background: rgba(168, 38, 52, .92);
    border: 1px solid rgba(255, 130, 145, .4)
}

.toast-info {
    background: rgba(18, 108, 255, .92);
    border: 1px solid rgba(140, 185, 255, .4)
}