/* ============================================================
   common.css —— 全站公共组件样式（每个页面都会引入）
   包含：Loading 动画、占位内容区、汉堡菜单 / H5 Header 适配、
         H5 全屏移动菜单、footer Request A Quote（询价区）
   说明：页面级样式（如首页、About 页）请放入各自页面级 CSS，
         不要污染本文件 / 也不要让页面级 CSS 被全站引入。
   ============================================================ */

/* ---------- Loading 页（进入页面时展示） ---------- */
html.is-loading {
    overflow: hidden;
}

.loader {
    position: fixed;
    inset: 0;
    z-index: 999;
    background: #ffffff;
    display: grid;
    place-items: center;
    opacity: 1;
    visibility: visible;
    transition: opacity 0.5s ease, visibility 0.5s ease;
}

.loader.is-hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.loader__box {
    display: flex;
    align-items: flex-end;
    justify-content: center;
}

.loader__img {
    height: 1.2rem;
    width: auto;
    opacity: 0;
    transform: translateY(1rem);
    animation: loader-rise 1s ease-out forwards;
    user-select: none;
}

.loader__img:nth-child(2) {
    animation-delay: 0.4s;
}

.loader__img:nth-child(3) {
    animation-delay: 0.8s;
}

.loader__img:nth-child(4) {
    animation-delay: 1.2s;
}

@keyframes loader-rise {
    from {
        opacity: 0;
        transform: translateY(1rem);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ---------- 占位内容区（后续替换为业务模块） ---------- */
.page-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 80vh;
    padding: 1.2rem 0.4rem;
    background: linear-gradient(160deg, #101830 0%, #1b2447 55%, #0f1626 100%);
    color: #eef2ff;
    text-align: center;
}

.page-placeholder__title {
    font-size: 0.56rem;
    font-weight: 700;
    line-height: 1.3;
    background: linear-gradient(135deg, #00B8E2 0%, #0063C3 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.page-placeholder__desc {
    margin-top: 0.24rem;
    font-size: 0.22rem;
    color: #9aa5c4;
}

.page-placeholder__links {
    display: flex;
    justify-content: center;
    gap: 0.24rem;
    margin-top: 0.4rem;
}

.page-placeholder__link {
    display: inline-block;
    padding: 0.12rem 0.32rem;
    font-size: 0.2rem;
    font-weight: 600;
    line-height: 1;
    color: #eef2ff;
    border: 1px solid rgba(255, 255, 255, 0.24);
    border-radius: 0.06rem;
    background: rgba(255, 255, 255, 0.06);
    transition: background 0.3s ease, border-color 0.3s ease, color 0.3s ease;
}

.page-placeholder__link:hover {
    color: #fff;
    background: linear-gradient(135deg, #00B8E2 0%, #0063C3 100%);
    border-color: transparent;
}

/* ============================================================
   H5 移动端适配（data-mode="h5"，750 设计稿基准）
   ============================================================ */
/* ---------- 汉堡菜单按钮 ---------- */
.menu-btn {
    display: none;
}

html[data-mode="h5"] .menu-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.09rem;
    width: 0.4rem;
    height: 0.4rem;
    padding: 0;
    border: none;
    border-radius: 0.1rem;
    background: rgba(255, 255, 255, 0.24);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    flex-shrink: 0;
}

html[data-mode="h5"] .menu-btn span {
    display: block;
    width: 0.22rem;
    height: 0.03rem;
    border-radius: 0.03rem;
    background: #fff;
    transition: transform 0.3s ease, opacity 0.3s ease;
}

html[data-mode="h5"] .header.is-scrolled .menu-btn {
    background: rgba(51, 51, 51, 0.08);
}

html[data-mode="h5"] .header.is-scrolled .menu-btn span {
    background: #333;
}

html[data-mode="h5"] .menu-btn.is-open span:nth-child(1) {
    transform: translateY(0.12rem) rotate(45deg);
}

html[data-mode="h5"] .menu-btn.is-open span:nth-child(2) {
    opacity: 0;
}

html[data-mode="h5"] .menu-btn.is-open span:nth-child(3) {
    transform: translateY(-0.12rem) rotate(-45deg);
}

/* ---------- H5 Header 布局 ---------- */
html[data-mode="h5"] .header__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.15rem;
    width: 100%;
    height: 100%;
}

html[data-mode="h5"] .header__group--left {
    flex: 0 0 auto;
    justify-content: flex-start;
}

html[data-mode="h5"] .header__group--center {
    flex: 1 1 auto;
    flex-direction: row;
    gap: 0;
    padding: 0;
    justify-content: center;
}

html[data-mode="h5"] .header__group--right {
    flex: 0 0 auto;
    justify-content: flex-end;
    gap: 0.1rem;
}

/* H5 隐藏：左右两组内的导航、语言切换、logo 下方文字 */
html[data-mode="h5"] .header__group--left .header__nav,
html[data-mode="h5"] .header__group--right .header__nav,
html[data-mode="h5"] .header__group--right .header__lang,
html[data-mode="h5"] .header__brand-text {
    display: none;
}

html[data-mode="h5"] .header__search {
    width: 0.3rem;
    height: 0.3rem;
}

html[data-mode="h5"] .header__brand {
    flex-direction: row;
    gap: 0;
}

html[data-mode="h5"] .header__brand-img {
    width: 0.7rem;
    height: 0.42rem;
    margin-bottom: 0;
}

html[data-mode="h5"] .header__cta {
    height: 0.36rem;
    padding: 0 0.14rem;
    font-size: 0.2rem;
}

/* ---------- H5：展开后的全屏下拉菜单（使用 #nav 元素作为容器） ---------- */
html[data-mode="h5"] .header__nav.is-open {
    position: fixed;
    top: 0.8rem;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    max-width: 7.5rem;
    height: calc(100vh - 0.8rem);
    z-index: 99;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 0;
    padding: 0.3rem 0.6rem 0.6rem;
    box-sizing: border-box;
    background: #fff;
    overflow-y: auto;
    animation: h5NavFadeIn 0.25s ease both;
}

@keyframes h5NavFadeIn {
    from {
        opacity: 0;
        transform: translate(-50%, -0.2rem);
    }
    to {
        opacity: 1;
        transform: translate(-50%, 0);
    }
}

html[data-mode="h5"] .header__nav.is-open .header__nav-item {
    width: 100%;
    padding: 0.22rem 0;
    border-bottom: 0.01rem solid #f0f2f5;
    color: #333;
    font-size: 0.3rem;
}

html[data-mode="h5"] .header__nav.is-open .header__nav-item:active {
    color: #00B8E2;
}

html[data-mode="h5"] .header__nav.is-open .header__nav-item::after {
    display: none;
}

/* ---------- H5：动态构建的全屏移动菜单（由 framework.js 生成） ---------- */
.header__nav-mobile {
    display: none;
}

html[data-mode="h5"] .header__nav-mobile {
    position: fixed;
    top: 0.8rem;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    max-width: 7.5rem;
    height: calc(100vh - 0.8rem);
    z-index: 99;
    background: #fff;
    overflow-y: auto;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    padding: 0.3rem 0.6rem 0.6rem;
    box-sizing: border-box;
    box-shadow: 0 0.04rem 0.2rem rgba(0, 0, 0, 0.08);
}

html[data-mode="h5"] .header__nav-mobile.is-open {
    display: flex;
    animation: h5NavFadeIn 0.25s ease both;
}

html[data-mode="h5"] .header__nav-mobile .header__nav-item {
    width: 100%;
    padding: 0.22rem 0;
    border-bottom: 0.01rem solid #f0f2f5;
    color: #333;
    font-size: 0.3rem;
}

html[data-mode="h5"] .header__nav-mobile .header__nav-item:active {
    color: #00B8E2;
}

html[data-mode="h5"] .header__nav-mobile .header__nav-item::after {
    display: none;
}

/* ---------- H5：占位内容区 ---------- */
html[data-mode="h5"] .page-placeholder {
    min-height: 80vh;
    padding: 1rem 0.4rem;
}

html[data-mode="h5"] .page-placeholder__title {
    font-size: 0.4rem;
}

html[data-mode="h5"] .page-placeholder__desc {
    font-size: 0.22rem;
}

html[data-mode="h5"] .page-placeholder__links {
    gap: 0.18rem;
    margin-top: 0.3rem;
}

html[data-mode="h5"] .page-placeholder__link {
    padding: 0.1rem 0.24rem;
    font-size: 0.22rem;
}

/* ============================================================
   footer 第一屏：Request A Quote（询价区）
   设计稿基准 1920px（PC），H5 单独覆盖
   ============================================================ */
.quote {
    height: 8.4rem;
    /* 840px */
    padding: 0.95rem 1.43rem 0.95rem 1.27rem;
    /* 95 / 143 / 95 / 127 */
    display: flex;
    align-items: center;
    box-sizing: border-box;
    background:
        linear-gradient(90deg, rgba(0, 0, 0, 0.55) 0%, rgba(0, 0, 0, 0.25) 55%, rgba(0, 0, 0, 0) 100%),
        url("../assets/images/home/quote-bg.webp") center / cover no-repeat;
    background-color: #0e1a2b;
}

.quote__inner {
    display: flex;
    align-items: center;
    width: 100%;
    max-width: 16.5rem;
    /* 1650px，避免在大屏上过度拉伸 */
    margin: 0 auto;
}

/* ---------- 左侧文案 ---------- */
.quote__intro {
    flex: 1 1 auto;
    min-width: 0;
    margin-right: 2.85rem;
    /* 285px */
}

.quote__title {
    color: #FFF;
    font-family: "Inter", sans-serif;
    font-size: 0.4rem;
    /* 40px */
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    margin-bottom: 0.24rem;
    /* 24px */
}

.quote__line {
    width: 0.8rem;
    /* 80px */
    height: 0.06rem;
    /* 6px */
    background: #B81C22;
    margin-bottom: 0.24rem;
}

.quote__desc {
    color: #FFF;
    font-family: "Montserrat", sans-serif;
    font-size: 0.18rem;
    /* 18px */
    font-style: normal;
    font-weight: 300;
    line-height: 150%;
    max-width: 5.6rem;
}

/* ---------- 右侧表单卡片 ----------
   说明：quote 表单内部不使用 class/id，样式一律通过外层父级结构定位。
   footer 第一屏以 section.quote 为锚点；JS 弹窗以 .quote-modal 为锚点，
   两处表单结构完全一致，故选择器成对书写。 */
.quote form,
.quote-modal form {
    flex: 0 0 auto;
    width: 7.24rem;
    /* 644 + 40*2 = 724px */
    padding: 0.4rem;
    /* 40px */
    box-sizing: border-box;
    background: #FFFFFF;
    border-radius: 0.04rem;
    /* 4px */
}

.quote form > ul,
.quote-modal form > ul {
    display: flex;
    flex-wrap: wrap;
    column-gap: 0.44rem;
    /* 44px = 644 - 300 - 300 */
    row-gap: 0.24rem;
    /* margin: 0 0 0.24rem; */
    padding: 0;
    list-style: none;
}

.quote form > ul > li,
.quote-modal form > ul > li {
    flex: 0 0 auto;
}

/* 前 4 个字段：两列，宽 300 */
.quote form > ul > li:nth-child(1),
.quote form > ul > li:nth-child(2),
.quote form > ul > li:nth-child(3),
.quote form > ul > li:nth-child(4),
.quote-modal form > ul > li:nth-child(1),
.quote-modal form > ul > li:nth-child(2),
.quote-modal form > ul > li:nth-child(3),
.quote-modal form > ul > li:nth-child(4) {
    width: 3rem;
    /* 300px */
    min-height: 0.92rem;
    /* 92px */
}

/* 附件行：整行，上传按钮位于输入框右侧（绝对定位） */
.quote form > ul > li:nth-child(5),
.quote-modal form > ul > li:nth-child(5) {
    width: 6.44rem;
    /* 644px */
    min-height: 0.92rem;
    /* 92px */
}

/* 留言行：整行 */
.quote form > ul > li:nth-child(6),
.quote-modal form > ul > li:nth-child(6) {
    width: 6.44rem;
    /* 644px */
    min-height: 1.21rem;
    /* 121px */
}

.quote form li > p,
.quote-modal form li > p {
    margin: 0;
}

/* 字段包装层（原 span.wpcf7-form-control-wrap） */
.quote form li > p > span,
.quote-modal form li > p > span {
    display: block;
}

/* 附件行：输入框容器（供 Upload 按钮绝对定位） */
.quote form li:nth-child(5) > p > span > span,
.quote-modal form li:nth-child(5) > p > span > span {
    position: relative;
}

/* 附件输入框：为右侧 Upload 按钮预留空间 */
.quote form li:nth-child(5) input,
.quote-modal form li:nth-child(5) input {
    padding-right: 1.04rem;
    /* 为右侧按钮留出空间（92 + 12） */
}

.quote form label,
.quote-modal form label {
    display: block;
    color: #333;
    font-family: "Montserrat", sans-serif;
    font-size: 0.16rem;
    /* 16px */
    font-style: normal;
    font-weight: 600;
    line-height: 175%;
}

.quote form input,
.quote-modal form input,
.quote form textarea,
.quote-modal form textarea {
    display: block;
    width: 100%;
    padding: 0.04rem 0 0.08rem;
    border: none;
    border-bottom: 1px solid #E5E5E5;
    background: transparent;
    outline: none;
    color: #999;
    font-family: "Montserrat", sans-serif;
    font-size: 0.16rem;
    font-style: normal;
    font-weight: 400;
    line-height: 175%;
}

.quote form input::placeholder,
.quote-modal form input::placeholder,
.quote form textarea::placeholder,
.quote-modal form textarea::placeholder {
    color: #999;
}

/* textarea 单独调整：去掉浏览器默认边框外观、限制拖拽缩放 */
.quote form textarea,
.quote-modal form textarea {
    height: 1.2rem;
    min-height: 0;
    resize: vertical;
}

html[data-mode="h5"] .quote form textarea,
html[data-mode="h5"] .quote-modal form textarea {
    height: 1.6rem;
}

/* Upload 按钮（附件行，绝对定位于输入框右侧） */
.quote form li:nth-child(5) button[type="button"],
.quote-modal form li:nth-child(5) button[type="button"] {
    position: absolute;
    right: 0;
    bottom: 0.16rem;
    width: 0.92rem;
    /* 92px */
    height: 0.35rem;
    /* 35px */
    border: none;
    border-radius: 0.04rem;
    background: #02347D;
    color: #FFF;
    font-family: "Montserrat", sans-serif;
    font-size: 0.16rem;
    font-style: normal;
    font-weight: 400;
    line-height: 0.35rem;
    text-align: center;
    cursor: pointer;
}

/* 提交按钮 */
.quote form > button[type="submit"],
.quote-modal form > button[type="submit"],
.quote form > p > button[type="submit"],
.quote-modal form > p > button[type="submit"] {
    display: block;
    width: 100%;
    padding: 0.2rem 0.3rem;
    /* 20 / 30 */
    border: none;
    border-radius: 0.04rem;
    background: var(--Style, #02347D);
    color: #FFF;
    font-family: "Montserrat", sans-serif;
    font-size: 0.16rem;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    margin: 0 0 0.24rem 0;
    cursor: pointer;
}

/* 提交按钮被 p 包裹时，去掉 p 的默认间距，保持与其他页一致的排版 */
.quote form > p:has(> button[type="submit"]),
.quote-modal form > p:has(> button[type="submit"]) {
    margin: 0;
}

/* ---------- 按钮悬浮微交互（统一升级） ----------
   底色渐变自左向右擦入 + 高光斜向扫过 + 轻微上浮 + 紧致柔和投影
   去掉原先过大的扩散阴影与 brightness 提亮
   ------------------------------------------------ */
.quote form > button[type="submit"],
.quote-modal form > button[type="submit"],
.quote form > p > button[type="submit"],
.quote-modal form > p > button[type="submit"],
.quote form li:nth-child(5) button[type="button"],
.quote-modal form li:nth-child(5) button[type="button"] {
    overflow: hidden;
    background-image: linear-gradient(100deg, #0A4BA8 0%, #014ADC 100%);
    background-repeat: no-repeat;
    background-size: 0% 100%;
    background-position: 0 0;
    transition: background-size 0.45s cubic-bezier(0.22, 0.61, 0.36, 1),
        transform 0.3s cubic-bezier(0.22, 0.61, 0.36, 1), box-shadow 0.3s ease;
}

/* 建立包含块（Upload 按钮自身已绝对定位，不覆盖 position） */
.quote form > button[type="submit"],
.quote-modal form > button[type="submit"],
.quote form > p > button[type="submit"],
.quote-modal form > p > button[type="submit"] {
    position: relative;
}

/* 高光扫过层 */
.quote form > button[type="submit"]::after,
.quote-modal form > button[type="submit"]::after,
.quote form > p > button[type="submit"]::after,
.quote-modal form > p > button[type="submit"]::after,
.quote form li:nth-child(5) button[type="button"]::after,
.quote-modal form li:nth-child(5) button[type="button"]::after {
    content: "";
    position: absolute;
    top: -30%;
    left: 0;
    width: 34%;
    height: 160%;
    background: linear-gradient(100deg,
            rgba(255, 255, 255, 0) 0%,
            rgba(255, 255, 255, 0.38) 50%,
            rgba(255, 255, 255, 0) 100%);
    transform: translateX(-220%) skewX(-18deg);
    opacity: 0;
    pointer-events: none;
    transition: transform 0.65s cubic-bezier(0.22, 0.61, 0.36, 1), opacity 0.25s ease;
}

.quote form > button[type="submit"]:hover,
.quote-modal form > button[type="submit"]:hover,
.quote form > p > button[type="submit"]:hover,
.quote-modal form > p > button[type="submit"]:hover,
.quote form li:nth-child(5) button[type="button"]:hover,
.quote-modal form li:nth-child(5) button[type="button"]:hover {
    background-image: linear-gradient(100deg, #0A4BA8 0%, #014ADC 100%);
    background-size: 100% 100%;
    transform: translateY(-0.02rem);
    box-shadow: 0 0.04rem 0.12rem rgba(2, 52, 125, 0.22);
    filter: none;
}

.quote form > button[type="submit"]:hover::after,
.quote-modal form > button[type="submit"]:hover::after,
.quote form > p > button[type="submit"]:hover::after,
.quote-modal form > p > button[type="submit"]:hover::after,
.quote form li:nth-child(5) button[type="button"]:hover::after,
.quote-modal form li:nth-child(5) button[type="button"]:hover::after {
    transform: translateX(320%) skewX(-18deg);
    opacity: 1;
}

.quote form > button[type="submit"]:active,
.quote-modal form > button[type="submit"]:active,
.quote form > p > button[type="submit"]:active,
.quote-modal form > p > button[type="submit"]:active,
.quote form li:nth-child(5) button[type="button"]:active,
.quote-modal form li:nth-child(5) button[type="button"]:active {
    transform: translateY(0);
    box-shadow: 0 0.01rem 0.04rem rgba(2, 52, 125, 0.16);
    transition-duration: 0.12s;
}

/* 表单下方说明文字（仅 footer 表单存在） */
.quote form > p {
    color: #999;
    font-family: "Montserrat", sans-serif;
    font-size: 0.18rem;
    font-style: normal;
    font-weight: 300;
    line-height: normal;
    margin: 0;
}

/* ---------- H5 适配（≤750px 设计稿） ---------- */
html[data-mode="h5"] .quote {
    height: auto;
    padding: 0.6rem 0.3rem;
    align-items: stretch;
}

html[data-mode="h5"] .quote__inner {
    flex-direction: column;
    align-items: stretch;
    max-width: 7.5rem;
}

html[data-mode="h5"] .quote__intro {
    margin-right: 0;
    margin-bottom: 0.4rem;
}

html[data-mode="h5"] .quote__title {
    font-size: 0.4rem;
}

html[data-mode="h5"] .quote__desc {
    font-size: 0.26rem;
    max-width: none;
}

html[data-mode="h5"] .quote form,
html[data-mode="h5"] .quote-modal form {
    width: 100%;
    padding: 0.3rem;
}

html[data-mode="h5"] .quote form > ul,
html[data-mode="h5"] .quote-modal form > ul {
    flex-direction: column;
    gap: 0.24rem;
    width: 100%;
    margin-bottom: 0.24rem;
}

html[data-mode="h5"] .quote form > ul > li,
html[data-mode="h5"] .quote form > ul > li:nth-child(1),
html[data-mode="h5"] .quote form > ul > li:nth-child(2),
html[data-mode="h5"] .quote form > ul > li:nth-child(3),
html[data-mode="h5"] .quote form > ul > li:nth-child(4),
html[data-mode="h5"] .quote form > ul > li:nth-child(5),
html[data-mode="h5"] .quote form > ul > li:nth-child(6),
html[data-mode="h5"] .quote-modal form > ul > li,
html[data-mode="h5"] .quote-modal form > ul > li:nth-child(1),
html[data-mode="h5"] .quote-modal form > ul > li:nth-child(2),
html[data-mode="h5"] .quote-modal form > ul > li:nth-child(3),
html[data-mode="h5"] .quote-modal form > ul > li:nth-child(4),
html[data-mode="h5"] .quote-modal form > ul > li:nth-child(5),
html[data-mode="h5"] .quote-modal form > ul > li:nth-child(6) {
    width: 100%;
}

html[data-mode="h5"] .quote form li:nth-child(5) input,
html[data-mode="h5"] .quote-modal form li:nth-child(5) input {
    padding-right: 1.5rem;
}

html[data-mode="h5"] .quote form li:nth-child(5) button[type="button"],
html[data-mode="h5"] .quote-modal form li:nth-child(5) button[type="button"] {
    width: 1.2rem;
    height: 0.5rem;
    line-height: 0.5rem;
    font-size: 0.24rem;
}

html[data-mode="h5"] .quote form label,
html[data-mode="h5"] .quote form input,
html[data-mode="h5"] .quote form textarea,
html[data-mode="h5"] .quote-modal form label,
html[data-mode="h5"] .quote-modal form input,
html[data-mode="h5"] .quote-modal form textarea {
    font-size: 0.26rem;
}

html[data-mode="h5"] .quote form > button[type="submit"],
html[data-mode="h5"] .quote-modal form > button[type="submit"],
html[data-mode="h5"] .quote form > p > button[type="submit"],
html[data-mode="h5"] .quote-modal form > p > button[type="submit"] {
    font-size: 0.28rem;
}

html[data-mode="h5"] .quote form > p {
    font-size: 0.24rem;
}