/* * 模块：Header Search 
 * 功能：搜索框下拉与交互样式 
 */

/* 桌面端默认样式 */
.mx-header-search { position: relative; display: flex; align-items: center; }
.mx-search-toggle { background: transparent !important; border: none !important; padding: 0 5px !important; color: #122143 !important; cursor: pointer; display: flex; align-items: center; }

.mx-search-dropdown {
    position: absolute; top: 100%; right: 0; margin-top: 25px; width: 300px;
    background: #fff; box-shadow: 0 10px 30px rgba(0,0,0,0.1); padding: 15px; 
    border-radius: 0; /* 修改：将 4px 改为 0 (直角) */
    opacity: 0; visibility: hidden; z-index: 9999; border-top: 3px solid #122143;
    transition: all 0.2s ease; transform: translateY(-10px);
}
.mx-search-dropdown.mx-is-active { opacity: 1; visibility: visible; transform: translateY(0); }

.mx-search-form { display: flex; gap: 5px; margin: 0; }
.mx-search-field { flex: 1; padding: 10px; border: 1px solid #ccc; border-radius: 0; /* 修改：将 3px 改为 0 (直角) */ outline: none; background: #fff; color: #333; }
.mx-search-submit { background: #122143; color: #fff; border: none; padding: 10px 15px; border-radius: 0; /* 修改：将 3px 改为 0 (直角) */ cursor: pointer; font-weight: bold; }

/* 📱 手机端/平板端终极绝杀：突破父级限制，和汉堡菜单保持完全一致的弹出位置 */
@media (max-width: 1024px) { /* 注意这里改成 1024px，和你的菜单断点保持同步 */
    
    .mx-header-search { 
        position: static; /* 🔑 核心魔法：取消相对定位，让下拉框去认整个 header 做爸爸 */
    }
    
    .mx-search-dropdown {
        position: absolute; 
        top: 100%; /* 现在 100% 刚好是整个导航栏的最底线，完美贴合海报 */
        left: 0; 
        right: 0; 
        width: 100%; 
        max-width: 100%;
        margin-top: 0; /* 移除间距 */
        border-radius: 0; /* 保持 0，和菜单一致 */
        border-top: 3px solid #122143; /* 顶部的深色线，和菜单一致 */
        box-shadow: 0 10px 20px rgba(0,0,0,0.08); /* 统一阴影 */
        padding: 15px 20px; /* 统一内边距 */
        box-sizing: border-box;
    }
    
    /* 修复 Find 按钮居中并统一触控高度 */
    .mx-search-field, 
    .mx-search-submit {
        height: 44px; 
    }

    /* 👇 新增这一段来完美居中 Find 按钮文字 */
    .mx-search-submit {
        display: flex;
        align-items: center;       /* 垂直居中 */
        justify-content: center;   /* 水平居中 */
        padding: 0 15px;           /* 去除继承的上下 padding，完全交给 Flex 控制居中 */
    }
}