/* ==================== 全局公共样式 ==================== */
/* 全局引入字体 */
@import url('https://fonts.googleapis.com/css2?family=Cantata+One&family=ZCOOL+WenYiTi&display=swap');

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* ==================== 字体定义 ==================== */
/* 英文字体: DIN Regular */
@font-face {
  font-family: 'DIN';
  src: url('/front/DIN-Regular-2.otf') format('opentype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
/* 英文字体: DIN Bold - 独立字体名，方便调试 */
@font-face {
  font-family: 'DIN-Bold';
  src: url('/front/din-bold-2.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* 日文字体: JapanSans90 */
@font-face {
  font-family: 'Japansans90';
  src: url('/front/JapanSans90.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* 中文字体: 思源黑体 Regular */
@font-face {
  font-family: 'SourceHanSansCN';
  src: url('/front/SourceHanSansCN-Regular.otf') format('opentype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
/* 中文字体: 思源黑体 Bold - 独立字体名，方便调试 */
@font-face {
  font-family: 'SourceHanSansCN-Bold';
  src: url('/front/SourceHanSansCN-Bold.otf') format('opentype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* ==================== 响应式缩放 ==================== */
/* 基于1920px设计宽度，始终以视口宽度为基准等比缩放所有rem单位 */
/* JavaScript (common.js) 负责动态计算 font-size */
/* CSS 提供 fallback：仅基于宽度缩放，允许垂直滚动 */
html {
    /* 基于宽度: 100vw / 120 = 100vw / (1920/16) */
    /* 只限制最大24px防止超大屏幕上过大，不限制最小值以适应任意小屏幕 */
    font-size: min(calc(100vw / 120), 24px);
    /* 禁止滚动 - 单视窗显示 */
    overflow: hidden;
    height: 100%;
}

:root {
    --primary-black: #171717;
    --primary-gray: #404040;
    --primary-white: #FFFFFF;
    --bg-white: #FFFFFF;
    
    /* ==================== 语言专用字体变量 ==================== */
    /* 英文页面: 常规用 DIN，加粗用 DIN-Bold */
    --font-family-en: 'DIN', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial, sans-serif;
    --font-family-en-bold: 'DIN-Bold', 'DIN', -apple-system, BlinkMacSystemFont, sans-serif;
    
    /* 日文页面: Japansans90 */
    --font-family-ja: 'Japansans90', 'DIN', -apple-system, 'Hiragino Kaku Gothic ProN', 'Yu Gothic', sans-serif;
    --font-family-ja-bold: 'Japansans90', 'DIN-Bold', -apple-system, sans-serif;
    
    /* 中文页面: 常规用 SourceHanSansCN，加粗用 SourceHanSansCN-Bold */
    --font-family-zh: 'SourceHanSansCN', 'DIN', -apple-system, BlinkMacSystemFont, 'Microsoft YaHei', sans-serif;
    --font-family-zh-bold: 'SourceHanSansCN-Bold', 'DIN-Bold', -apple-system, BlinkMacSystemFont, sans-serif;
    
    /* 默认字体 */
    --font-family: 'DIN', 'Japansans90', 'SourceHanSansCN', -apple-system, BlinkMacSystemFont, 'Microsoft YaHei', sans-serif;

    /* ==================== 基础设计变量 ==================== */
    /* 基于Figma设计稿 - 1920x1080px 基准尺寸 */
    --design-base-width: 1920px;
    --design-base-height: 1080px;
    
    /* 响应式断点 */
    --breakpoint-xs: 480px;
    --breakpoint-sm: 768px;
    --breakpoint-md: 1024px;
    --breakpoint-lg: 1280px;
    --breakpoint-xl: 1920px;
    
    /* 页面固定尺寸 */
    --page-max-width: calc(120rem); /* 1920px */
    --page-height: calc(67.5rem); /* 1080px */
    --page-side-padding: calc(3.125rem); /* 50px */
}

body {
    /* 默认字体 */
    font-family: var(--font-family);
    background: var(--bg-white);
    color: var(--primary-black);
    /* 禁止滚动 - 单视窗显示 */
    overflow: hidden;
    position: relative;
    width: 100%;
    height: 100%;
    font-size: calc(1rem);
    line-height: 1.5;
}

/* ==================== 语言专用字体样式 ==================== */
/* 英文页面 - DIN 字体 */
body.lang-en,
body.lang-en * {
    font-family: var(--font-family-en) !important;
}

/* 日文页面 - JapanSans90 字体 */
body.lang-ja,
body.lang-ja * {
    font-family: var(--font-family-ja) !important;
}

/* 中文页面 - 思源黑体 */
body.lang-zh,
body.lang-zh * {
    font-family: var(--font-family-zh) !important;
}

/* ==================== 加粗字体规则 ==================== */
/* 通用加粗规则 */
b, strong, .bold,
h1, h2, h3, h4, h5, h6 {
    font-weight: 700;
}

/* 英文加粗: 使用 DIN-Bold (din-bold-2.ttf) */
body.lang-en h1, body.lang-en h2, body.lang-en h3,
body.lang-en h4, body.lang-en h5, body.lang-en h6,
body.lang-en b, body.lang-en strong, body.lang-en .bold,
body.lang-en .page-title, body.lang-en .page-title h1 {
    font-family: var(--font-family-en-bold) !important;
    font-weight: 700;
}

/* 日文加粗: 使用 Japansans90 */
body.lang-ja h1, body.lang-ja h2, body.lang-ja h3,
body.lang-ja h4, body.lang-ja h5, body.lang-ja h6,
body.lang-ja b, body.lang-ja strong, body.lang-ja .bold,
body.lang-ja .page-title, body.lang-ja .page-title h1 {
    font-family: var(--font-family-ja-bold) !important;
    font-weight: 700;
}

/* 中文加粗: 使用 SourceHanSansCN-Bold (SourceHanSansCN-Bold.otf) */
body.lang-zh h1, body.lang-zh h2, body.lang-zh h3,
body.lang-zh h4, body.lang-zh h5, body.lang-zh h6,
body.lang-zh b, body.lang-zh strong, body.lang-zh .bold,
body.lang-zh .page-title, body.lang-zh .page-title h1 {
    font-family: var(--font-family-zh-bold) !important;
    font-weight: 700;
}

/* ==================== 单视窗页面布局 ==================== */
/* 一级页面和非产品二级页面：固定高度，完全禁止滚动 */
.home-page,
.company-page,
.news-page,
.project-page,
.process-page,
.partner-page,
.contact-page,
.process-detail-page,
.project-detail-page,
.company-detail-page {
    overflow: hidden !important;
    height: 100%;
    max-height: 100vh;
}

/* 产品页面：允许垂直滚动（因为内容较多） */
.product-page,
.product-detail-page {
    overflow-x: hidden;
    overflow-y: auto;
    min-height: 100vh;
}

/* 产品二级页面：确保 html 和 body 也允许滚动 */
html:has(.product-detail-page),
body:has(.product-detail-page) {
    overflow-x: hidden;
    overflow-y: auto;
    height: auto;
}

/* 一级页面主内容容器：固定高度，禁止滚动 */
.home-page .main-content,
.company-page .main-content,
.news-page .main-content,
.project-page .main-content,
.process-page .main-content,
.partner-page .main-content,
.contact-page .main-content {
    overflow: hidden !important;
    height: 100%;
}

/* 产品页面主内容容器：允许滚动 */
.product-page .main-content {
    overflow: visible;
    min-height: 100vh;
}

/* 全局字体统一 - 英文字符使用 DIN-Bold，中日文字符自动使用 SourcehansansCN-Regular SC */
* {
    font-family: var(--font-family);
}


.fluid-container,
.page-container {
    width: 100%;
    max-width: var(--page-max-width);
    padding-left: var(--page-side-padding);
    padding-right: var(--page-side-padding);
    margin-left: auto;
    margin-right: auto;
    box-sizing: border-box;
}

/* 常用宽高比占位，配合 object-fit */
.aspect-16x9 { aspect-ratio: 16 / 9; }
.aspect-4x3  { aspect-ratio: 4 / 3; }
.aspect-1x1  { aspect-ratio: 1 / 1; }
.media-cover { object-fit: cover; width: 100%; height: 100%; }
.media-contain { object-fit: contain; width: 100%; height: 100%; }

/* Skeleton loading */
.skeleton {
    position: relative;
    overflow: hidden;
    background: #f2f2f2;
    border-radius: 8px;
}
.skeleton::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(240,240,240,0) 0%, rgba(255,255,255,0.6) 50%, rgba(240,240,240,0) 100%);
    animation: skeleton-shine 1.2s ease-in-out infinite;
}
@keyframes skeleton-shine {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(100%); }
}

/* ==================== 左侧导航栏 ==================== */
/* Frame 2147206739: x="0" y="0" width="174/180" height="1080" */
.side-nav {
    position: fixed;
    left: 0;
    top: 0;
    width: auto;
    height: 100vh;
    display: flex;
    padding: 50px;
    gap: 0;
    z-index: 100;
    box-sizing: border-box;
}

.nav-container {
    display: flex;
    flex-direction: column;
    gap: 3px;
    align-items: flex-start;
}

.nav-row {
    display: flex;
    flex-direction: row;
    gap: 4px;
    align-items: center;
    height: auto;
}

.nav-indicator {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 3px;
    align-items: flex-start;
    width: 40px;
    flex-shrink: 0;
}

.indicator-bars {
    display: none;
}

/* 水平线条样式 - 用 border-top 实现像素对齐 */
.line {
    display: block;
    height: 0;
    border-top: 2px solid #404040;
    transition: border-color 0.3s ease;
    flex-shrink: 0;
}

.line.short {
    width: 20px;
}

.line.long {
    width: 40px;
}

.line.active {
    border-color: var(--primary-black);
}

/* 竖直分隔线 */
.nav-divider {
    width: 20px;
    height: 0;
    border-top: 2px solid #404040;
    transition: border-color 0.3s ease;
    flex-shrink: 0;
    margin: 0;
}

.nav-divider.active {
    border-color: var(--primary-black);
}

/* 刻度尺图片样式 */
.ruler-segment {
    display: none;
    width: calc(3.125rem); /* 50px */
    height: calc(1.25rem); /* 20px */
    opacity: 0.5;
    transition: opacity 0.3s ease, filter 0.3s ease;
    cursor: pointer;
    flex-shrink: 0;
}

.ruler-segment:hover {
    opacity: 0.7;
}

.ruler-segment.active {
    opacity: 1;
}

.bar-group {
    display: none;
    gap: calc(0.1875rem); /* 3px */
    align-items: center;
}

.bar {
    display: none;
    width: calc(0.0625rem); /* 1px */
    height: calc(0.5rem); /* 8px */
    background: var(--primary-gray);
}

.bar.single {
    display: none;
    height: calc(0.5rem); /* 8px */
}

.bar.active {
    display: none;
    background: var(--primary-black);
    height: calc(0.5rem); /* 8px */
}

.bar-separator {
    display: none;
    width: calc(0.0625rem); /* 1px */
    height: calc(0.75rem); /* 12px */
    background: var(--primary-gray);
}

.bar-separator-active {
    display: none;
    width: calc(0.125rem); /* 2px */
    height: calc(1rem); /* 16px */
    background: var(--primary-black);
}

/* Frame 2147206733: x="24" y="0" width="58" height="164" */
.nav-menu {
    position: relative;
    display: flex;
    flex-direction: column;
    /* 导航项之间保持固定间距 */
    gap: calc(1rem); /* 16px */
    width: auto;
    padding: 0;
    box-sizing: border-box;
}

.nav-item {
    font-family:  var(--font-family);
    /* 使用固定字号与行高 */
    font-size: 0.8rem !important;  /* 12px */
    line-height: calc(1.25rem)!important; /* 16px */
    text-decoration: none;
    color: #404040;
    text-transform: capitalize;
    transition: color 0.3s ease;
    white-space: nowrap;
    font-weight: 400;
    height: auto;
    display: flex;
    align-items: center;
    flex-shrink: 0;
    padding: 0;
}

.nav-item.active {
    color: var(--primary-black);
}

.nav-item:hover {
    color: var(--primary-black);
}

/* ==================== 一级页面统一导航样式（Home / Company / News / Product / Project / Process / Partner / Contact） ==================== */
/* 以 1920×1080 设计为基准，使用固定 calc 值 */

/* 一级页面单视窗显示：所有内容在一个视窗内完整显示，禁止滚动 */
.home-page,
.company-page,
.news-page,
.product-page,
.project-page,
.process-page,
.partner-page,
.contact-page {
    height: 100%;
    max-height: 100vh;
    overflow: hidden !important;
}

.home-page .side-nav,
.company-page .side-nav,
.news-page .side-nav,
.product-page .side-nav,
.project-page .side-nav,
.process-page .side-nav,
.partner-page .side-nav,
.contact-page .side-nav {
    height: 100vh;
    padding: 50px;
}

.home-page .nav-container,
.company-page .nav-container,
.news-page .nav-container,
.product-page .nav-container,
.project-page .nav-container,
.process-page .nav-container,
.partner-page .nav-container,
.contact-page .nav-container {
    gap: 3px;
}

.home-page .nav-row,
.company-page .nav-row,
.news-page .nav-row,
.product-page .nav-row,
.project-page .nav-row,
.process-page .nav-row,
.partner-page .nav-row,
.contact-page .nav-row {
    /* 使用相对定位，nav-item 绝对定位不影响高度 */
    position: relative;
    /* nav-row 高度由 nav-indicator 决定 */
    height: auto;
}

/* nav-item 绝对定位，不影响 nav-row 高度 */
.home-page .nav-item,
.company-page .nav-item,
.news-page .nav-item,
.product-page .nav-item,
.project-page .nav-item,
.process-page .nav-item,
.partner-page .nav-item,
.contact-page .nav-item {
    position: absolute;
    left: 32px;
    top: 50%;
    transform: translateY(-50%);
}

.home-page .nav-indicator,
.company-page .nav-indicator,
.news-page .nav-indicator,
.product-page .nav-indicator,
.project-page .nav-indicator,
.process-page .nav-indicator,
.partner-page .nav-indicator,
.contact-page .nav-indicator {
    width: 28px;
    gap: 3px;
}

.home-page .line.short,
.company-page .line.short,
.news-page .line.short,
.product-page .line.short,
.project-page .line.short,
.process-page .line.short,
.partner-page .line.short,
.contact-page .line.short {
    width: 14px;
}

.home-page .line.long,
.company-page .line.long,
.news-page .line.long,
.product-page .line.long,
.project-page .line.long,
.process-page .line.long,
.partner-page .line.long,
.contact-page .line.long {
    width: 28px;
}

.home-page .line,
.company-page .line,
.news-page .line,
.product-page .line,
.project-page .line,
.process-page .line,
.partner-page .line,
.contact-page .line {
    height: 0;
    border-top: 2px solid #404040;
}

.home-page .nav-divider,
.company-page .nav-divider,
.news-page .nav-divider,
.product-page .nav-divider,
.project-page .nav-divider,
.process-page .nav-divider,
.partner-page .nav-divider,
.contact-page .nav-divider {
    width: 14px;
    height: 0;
    border-top: 2px solid #404040;
}

.home-page .nav-menu,
.company-page .nav-menu,
.news-page .nav-menu,
.product-page .nav-menu,
.project-page .nav-menu,
.process-page .nav-menu,
.partner-page .nav-menu,
.contact-page .nav-menu {
    /* 导航项间距 */
    gap: calc(0.75rem); /* 12px */
}

.home-page .nav-item,
.company-page .nav-item,
.news-page .nav-item,
.product-page .nav-item,
.project-page .nav-item,
.process-page .nav-item,
.partner-page .nav-item,
.contact-page .nav-item {
    font-size: calc(1rem); /* 12px */
    line-height: calc(1.5rem); /* 18px */
}

/* ==================== 顶部导航 ==================== */
.top-header {
    position: fixed;
    top: calc(3.125rem); /* 50px */
    left: 0;
    right: 0;
    height: calc(1.5rem); /* 24px */
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 calc(3.125rem); /* 50px */
    z-index: 99;
}

.header-right {
    display: flex;
    align-items: center;
    gap: calc(1.25rem); /* 20px */
    margin-left: auto;
}

.icon-btn {
    width: calc(1.25rem); /* 20px */
    height: calc(1.25rem); /* 20px */
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--primary-black);
    transition: opacity 0.3s ease;
    flex-shrink: 0;
}

.icon-btn svg {
    width: calc(1.25rem); /* 20px */
    height: calc(1.25rem); /* 20px */
}

.icon-btn:hover {
    opacity: 0.6;
}

.shop-link {
    /* 纯图标模式 */
    display: inline-block;
    width: calc(1.25rem); /* 24px */
    height: calc(1.25rem); /* 24px */
    padding: 0 !important;
    background: none;
    border: none;
}

/* 隐藏所有文字 */
.shop-link span {
    display: none;
}

/* 图片填满容器 */
.shop-link img {
    width: 100%;
    height: 100%;
    display: block;
    filter: none; /* 保持原色 */
}

.shop-link:hover {
    opacity: 0.8;
}

/* 如果已经有共享样式，只需添加这些 */
.product-dropdown {
    /* 继承语言下拉框样式 */
    margin-left: 0px; /* 如果需要间距 */
}

.product-dropdown .language-dropdown-btn {
    /* 可能需要调整内边距或字体 */
    padding: 6px 12px;
}

.product-dropdown .language-dropdown-btn span {
    /* 确保文本显示 */
    white-space: nowrap;
}

/* ==================== 响应式设计 ==================== */
/* 取消导航与顶部栏在小屏的重新布局与固定字号，保持统一固定布局 */

/* ==================== 搜索模态框样式 ==================== */
.search-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 10000;
    display: none;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.search-modal.active {
    display: block;
    opacity: 1;
}

.search-modal-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(4px);
}

.search-modal-content {
    position: relative;
    width: calc(50rem); /* 800px */
    max-width: 90%;
    max-height: calc(56.25rem); /* 900px */
    margin: calc(3.125rem) auto; /* 50px */
    background: var(--primary-white);
    border-radius: calc(0.75rem); /* 12px */
    box-shadow: 0 calc(1.25rem) calc(3.75rem) rgba(0, 0, 0, 0.3);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transform: translateY(calc(-1.25rem)); /* -20px */
    transition: transform 0.3s ease;
}

.search-modal.active .search-modal-content {
    transform: translateY(0);
}

.search-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: calc(1.5rem) calc(2rem); /* 24px 32px */
    border-bottom: 1px solid #e0e0e0;
}

.search-modal-header h2 {
    font-size: calc(1.5rem); /* 24px */
    font-weight: 400;
    color: var(--primary-black);
    margin: 0;
}

.search-modal-close {
    background: none;
    border: none;
    cursor: pointer;
    padding: calc(0.5rem); /* 8px */
    color: var(--primary-black);
    transition: opacity 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
}

.search-modal-close:hover {
    opacity: 0.6;
}

.search-modal-body {
    flex: 1;
    overflow-y: auto;
    padding: calc(1.5rem) calc(2rem); /* 24px 32px */
}

.search-input-wrapper {
    position: relative;
    margin-bottom: calc(1.5rem); /* 24px */
}

.search-input {
    width: 100%;
    padding: calc(1rem) calc(3.5rem) calc(1rem) calc(1.25rem); /* 16px 56px 16px 20px */
    font-size: calc(1.125rem); /* 18px */
    border: 2px solid #e0e0e0;
    border-radius: calc(0.5rem); /* 8px */
    outline: none;
    transition: border-color 0.2s;
    font-family: inherit;
}

.search-input:focus {
    border-color: var(--primary-black);
}

.search-submit-btn {
    position: absolute;
    right: calc(0.75rem); /* 12px */
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    cursor: pointer;
    padding: calc(0.5rem); /* 8px */
    color: var(--primary-gray);
    transition: color 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
}

.search-submit-btn:hover {
    color: var(--primary-black);
}

.search-results {
    min-height: calc(12.5rem); /* 200px */
}

.search-loading,
.search-error,
.search-empty {
    text-align: center;
    padding: calc(2.5rem) calc(1.25rem); /* 40px 20px */
    color: var(--primary-gray);
    font-size: calc(1rem); /* 16px */
}

.search-section {
    margin-bottom: calc(2rem); /* 32px */
}

.search-section:last-child {
    margin-bottom: 0;
}

.search-section-title {
    font-size: calc(1.125rem); /* 18px */
    font-weight: 600;
    color: var(--primary-black);
    margin-bottom: calc(1rem); /* 16px */
    padding-bottom: calc(0.5rem); /* 8px */
    border-bottom: 2px solid #e0e0e0;
}

.search-items {
    display: flex;
    flex-direction: column;
    gap: calc(0.75rem); /* 12px */
}

.search-item {
    display: flex;
    align-items: flex-start;
    gap: calc(1rem); /* 16px */
    padding: calc(1rem); /* 16px */
    border: 1px solid #e0e0e0;
    border-radius: calc(0.5rem); /* 8px */
    text-decoration: none;
    color: inherit;
    transition: all 0.2s;
}

.search-item:hover {
    border-color: var(--primary-black);
    background: #f9f9f9;
    transform: translateX(calc(0.25rem)); /* 4px */
}

.search-item-image {
    width: calc(5rem); /* 80px */
    height: calc(5rem); /* 80px */
    object-fit: cover;
    border-radius: calc(0.375rem); /* 6px */
    flex-shrink: 0;
}

.search-item-content {
    flex: 1;
    min-width: 0;
}

.search-item-title {
    font-size: calc(1.125rem); /* 18px */
    font-weight: 600;
    color: var(--primary-black);
    margin-bottom: calc(0.375rem); /* 6px */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.search-item-subtitle {
    font-size: calc(1rem); /* 18px */
    color: var(--primary-gray);
    margin-bottom: calc(0.25rem); /* 4px */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.search-item-description {
    font-size: calc(0.9375rem); /* 14px */
    color: var(--primary-gray);
    line-height: 1.5;
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* ==================== 全站：屏蔽搜索按钮（按产品经理要求） ==================== */
/* 隐藏顶部及页面内的搜索触发按钮，保留搜索模态样式以备恢复 */
.icon-btn.search-btn {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
}

/* ==================== 语言下拉选择器样式 ==================== */
.language-dropdown {
    position: relative;
    display: inline-flex;
    align-items: center;
}

.language-dropdown-btn {
    display: flex;
    align-items: center;
    gap: calc(0.375rem); /* 6px */
    padding: calc(0.25rem) calc(0.5rem); /* 4px 8px */
    background: none;
    border: none;
    cursor: pointer;
    font-family: var(--font-family);
    font-size: calc(0.875rem); /* 14px */
    color: var(--primary-black);
    transition: opacity 0.3s ease;
    white-space: nowrap;
}

.language-dropdown-btn:hover {
    opacity: 0.6;
}

/* 图标样式的语言切换按钮 */
.language-dropdown-btn.icon-style {
    padding: 0;
    width: calc(1.25rem); /* 20px */
    height: calc(1.25rem); /* 20px */
}

.language-dropdown-btn.icon-style img {
    width: 100%;
    height: 100%;
    display: block;
}

.language-dropdown-btn .current-lang {
    font-weight: 400;
}

.language-dropdown-btn .dropdown-arrow {
    width: calc(0.75rem); /* 12px */
    height: calc(0.75rem); /* 12px */
    transition: transform 0.2s ease;
    flex-shrink: 0;
}

.language-dropdown.open .dropdown-arrow {
    transform: rotate(180deg);
}

.language-dropdown-menu {
    position: absolute;
    top: calc(100% + 0.25rem); /* 4px gap */
    right: 0;
    min-width: calc(7.8rem); /* 96px */
    background: var(--primary-white);
    border: 1px solid #e0e0e0;
    border-radius: calc(0.375rem); /* 6px */
    box-shadow: 0 calc(0.25rem) calc(0.75rem) rgba(0, 0, 0, 0.1);
    opacity: 0;
    visibility: hidden;
    transform: translateY(calc(-0.5rem)); /* -8px */
    transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
    z-index: 1000;
    overflow: hidden;
}

.language-dropdown.open .language-dropdown-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.lang-option {
    display: block;
    width: 100%;
    padding: calc(0.5rem) calc(0.75rem); /* 8px 12px */
    background: none;
    border: none;
    text-align: left;
    font-family: var(--font-family);
    font-size: calc(0.875rem); /* 14px */
    color: var(--primary-black);
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.lang-option:hover {
    background-color: #f5f5f5;
}

.lang-option.active {
    background-color: #f0f0f0;
    font-weight: 500;
}

/* 点击外部关闭下拉菜单的遮罩层 */
.language-dropdown-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 999;
    display: none;
}

.language-dropdown.open + .language-dropdown-overlay,
.language-dropdown.open ~ .language-dropdown-overlay {
    display: block;
}

/* ==================== 图片懒加载样式 ==================== */
/* 懒加载图片占位状态 */
img.lazy,
img[data-src] {
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
    background-color: #f5f5f5;
}

/* 懒加载完成后显示 */
img.lazy-loaded {
    opacity: 1;
}

/* 背景图片懒加载 */
[data-bg] {
    background-color: #f5f5f5;
    transition: background-image 0.3s ease-in-out;
}

[data-bg].lazy-loaded {
    background-color: transparent;
}

/* 加载失败状态 */
img.lazy-error {
    opacity: 0.5;
}