/*
Theme Name: Logimax
Author: ModinaTheme
Author URI: https://themeforest.net/user/modinatheme/
Description: Logistics & Transportation HTML Template
Version: 1.0.0
*/

/*
=================================
|***    Table of contents:   ***|
=================================

1. General styles
2. Typography
3. Helpers
4. Preloader
5. Go up button
6. Header and navigation
7. Hero Section
8. About us
9. Services
10. Fun facts
11. Projects
12. Pricing
13. Testimonial
14. CTA
15. Team
16. Video Banner
17. Shop
18. Marquee
19. Blog
20. Footer

Main Style file-> assets/css/main.css 
*/











/* ----- 语言切换下拉组件 (无外部依赖, 只作用在class上) ----- */
.lang-selector {
    /* 容器 — 没有任何body样式干扰, 仅作为相对参考 */
    position: relative;
    display: inline-block;  /* 让容器根据内容收缩, 而不是霸占整行 */
    font-family: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', sans-serif;
}

/* 按钮本身 — 纯div模拟按钮, 符合 div+css 要求 */
.lang-button {
    display: flex;
    align-items: center;
    gap: 8px;
    background: #ffffff;
    border: 1px solid #d1d5db;
    border-radius: 24px;          /* 药丸形状, 现代下拉常用 */
    padding: 0px 10px;
    font-size: 0.75rem;
    font-weight: 500;
    color: #1f2937;
    cursor: default;               /* div没有原生点击, 但模拟成按钮样式, 实际功能可由js增强, 这里只做静态视觉 */
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.03);
    transition: background 0.15s, border-color 0.15s;
    /* 确保没有全局污染 */
    box-sizing: border-box;
}

/* 悬停效果 (示意交互) */
.lang-button:hover {
    background-color: #f9fafb;
    border-color: #9ca3af;
}

.lang-button span{
    color: #333;
}
.header-top-wrapper .social-icon span{
    color: #333;
}

/* 右侧小箭头 (纯div+css 绘制) */
.arrow {
    display: inline-block;
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 6px solid #4b5563;   /* 向下的实心三角 */
    margin-left: 4px;
    transition: transform 0.2s;
}

/* 下拉菜单面板 — 用div+css实现的下拉列表, 默认隐藏, 但结构完整 */
.lang-dropdown {
    position: absolute;
    top: calc(100% + 6px);          /* 紧贴在按钮下方 */
    right: 0;
    min-width: 140px;
    background: white;
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    padding: 6px 0;
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.12), 0 2px 8px rgba(0, 0, 0, 0.05);
    list-style: none;                /* 去掉ul样式, 但我们用div模拟列表, 无列表标签, 所以用class控制 */
    margin: 0;
    z-index: 100;
    /* 视觉层: 显示下拉箭头和各个选项 */
    opacity: 0;
    visibility: hidden;               /* 默认不可见 (只展示按钮) */
    transform: translateY(-2px);
    transition: opacity 0.2s, transform 0.2s, visibility 0.2s;
}

/* 模拟 :hover 触发下拉 —— 纯css下拉, 不需要js, 完全符合div+css交互 */
.lang-selector:hover .lang-dropdown {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

/* 每个语言项 (div版) */
.lang-item {
    padding: 10px 18px;
    font-size: 0.65rem;
    color: #1e293b;
    display: flex;
    align-items: center;
    cursor: default;                  /* 示意样式, 实际可加hover */
    transition: background 0.1s;
    white-space: nowrap;
}

/* 选项内的小图标占位 (用纯div+css模拟小圆点/或者文字标记, 只是装饰) */
.lang-item::before {
    content: "🌐";                     /* 使用地球符号做前缀, 也可以用纯css画, 但emoji更干净 */
    font-size: 1rem;
    margin-right: 10px;
    opacity: 0.7;
}

/* 当前语言特殊标记 (视觉上增加对勾) — 不加额外标签, 仅用after实现, 保证结构干净 */
.lang-item.active::after {
    content: "✓";
    margin-left: auto;                /* 推到最右边 */
    color: #2563eb;
    font-weight: 600;
}

/* 悬停效果 (表示可选) */
.lang-item:hover {
    background-color: #f1f5f9;
}

/* 为了演示几个选项间的分割线 (极淡) — 使用边框模拟 */
.lang-item:not(:last-child) {
    border-bottom: 1px solid #f1f1f4;
}

/* 纯装饰: 模拟分隔线/分组 (不需要额外标签) 第一个选项后无分割线? 上面已经排除了最后一项, OK */

/* 可选的小优化: 如果希望下拉菜单有最小宽度与按钮对齐 */
.lang-dropdown {
    min-width: 160px;
}