/* ==========================================================================
   FUNG TAT UI system — loaded after Bootstrap and the inline theme styles.
   Purpose: unify buttons, cards, forms, tags, breadcrumbs, pagination.
   ========================================================================== */

:root{
    --ui-radius:14px;
    --ui-radius-sm:10px;
    --ui-shadow:0 10px 30px rgba(15,41,66,.09);
    --ui-shadow-sm:0 1px 2px rgba(15,41,66,.06);
    --ui-line:#e2e8f0;
    --ui-muted:#64748b;
    --ui-surface-2:#f7f9fc;
}

body{
    color:var(--text);
    -webkit-font-smoothing:antialiased;
    text-rendering:optimizeLegibility;
}

h1,h2,h3,h4,h5,h6{letter-spacing:-.015em;}
.section{padding:clamp(3rem,5vw,4.25rem) 0;}
.section h2{font-size:clamp(1.6rem,3vw,2.35rem);line-height:1.2;}
.section h3{font-size:clamp(1.25rem,2vw,1.6rem);line-height:1.3;}
.section .text-secondary{max-width:70ch;}
.text-center .text-secondary{max-width:70ch;margin-left:auto;margin-right:auto;}
.eyebrow{letter-spacing:.14em;}

/* Buttons ---------------------------------------------------------------- */
.btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:.5rem;
    min-height:44px;
    padding:.62rem 1.35rem;
    border-radius:var(--ui-radius-sm);
    font-weight:600;
    letter-spacing:.01em;
    transition:background-color .18s ease, border-color .18s ease, color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.btn:active{transform:translateY(1px);}
.btn-lg{min-height:52px;padding:.85rem 1.7rem;font-size:1.05rem;border-radius:12px;}
.btn-sm{min-height:36px;padding:.35rem .85rem;font-size:.86rem;border-radius:8px;}
.btn-brand{
    background:var(--accent);
    border:1px solid var(--accent);
    color:#fff;
    border-radius:var(--ui-radius-sm);
    box-shadow:0 6px 16px rgba(232,119,34,.22);
}
.btn-brand:hover,.btn-brand:focus{
    background:#d4661a;
    border-color:#d4661a;
    color:#fff;
    box-shadow:0 8px 20px rgba(232,119,34,.3);
    transform:translateY(-1px);
}
.btn-light{background:#fff;border:1px solid #fff;color:var(--brand);}
.btn-light:hover{background:#f1f5f9;border-color:#f1f5f9;color:var(--brand);}
.btn-outline-secondary{border-color:#cbd5e1;color:#475569;}
.btn-outline-secondary:hover{background:#475569;border-color:#475569;}
.btn-outline-brand{border:1px solid rgba(232,119,34,.5);color:var(--accent);background:transparent;font-weight:600;}
.btn-outline-brand:hover{background:var(--accent);border-color:var(--accent);color:#fff;}

/* Cards ------------------------------------------------------------------ */
.card{
    border:1px solid var(--ui-line);
    border-radius:var(--ui-radius);
    box-shadow:var(--ui-shadow-sm);
    background:#fff;
}
.card-img-top{background:var(--ui-surface-2);object-fit:cover;}
.card-body{padding:1.25rem 1.35rem;}
.product-card,.news-card{border-radius:var(--ui-radius);border-color:var(--ui-line);}
.product-card:hover,.news-card:hover{
    transform:translateY(-4px);
    box-shadow:var(--ui-shadow);
    border-color:#cbd5e1;
}
.product-card .card-title,.news-card h3{font-size:1.05rem;line-height:1.4;}

/* Forms ------------------------------------------------------------------ */
.form-label{font-weight:600;font-size:.9rem;color:var(--ink,#1e293b);margin-bottom:.4rem;}
.form-control,.form-select{
    min-height:46px;
    padding:.6rem .9rem;
    border-radius:var(--ui-radius-sm);
    border-color:var(--ui-line);
    color:var(--text);
    background-color:#fff;
}
textarea.form-control{min-height:120px;}
.form-control::placeholder{color:#94a3b8;}
.form-control:focus,.form-select:focus{
    border-color:var(--brand);
    box-shadow:0 0 0 .2rem rgba(15,41,66,.12);
}
.form-control.is-invalid:focus,.form-select.is-invalid:focus{
    box-shadow:0 0 0 .2rem rgba(220,53,69,.15);
}
.form-text{color:var(--ui-muted);}

/* Tags and badges -------------------------------------------------------- */
.tag{
    display:inline-flex;
    align-items:center;
    min-height:26px;
    padding:.18rem .6rem;
    border-radius:999px;
    background:#eef2f7;
    color:#475569;
    font-size:.76rem;
    font-weight:500;
    line-height:1;
}
.badge{
    font-weight:500;
    letter-spacing:.01em;
    padding:.38em .62em;
    border-radius:6px;
}

/* Breadcrumbs ------------------------------------------------------------ */
.breadcrumb{
    background:transparent;
    padding:0;
    margin:0;
    font-size:.88rem;
}
.breadcrumb-item a{color:var(--ui-muted);text-decoration:none;}
.breadcrumb-item a:hover{color:var(--brand);}
.breadcrumb-item.active{color:var(--text);}
.breadcrumb-item+.breadcrumb-item::before{content:"/";color:#cbd5e1;}

/* Pagination ------------------------------------------------------------- */
.pagination{flex-wrap:wrap;gap:.15rem;}
.page-link{
    min-width:38px;
    min-height:38px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    border-radius:8px;
    border-color:var(--ui-line);
    color:var(--brand);
}
.page-link:hover{background:#f1f5f9;color:var(--brand);}
.page-item.active .page-link{background:var(--brand);border-color:var(--brand);color:#fff;}

/* Empty states ----------------------------------------------------------- */
.empty-state{
    padding:3.5rem 1rem;
    text-align:center;
    color:var(--ui-muted);
}
.empty-state i{
    display:block;
    font-size:2.6rem;
    color:#cbd5e1;
    margin-bottom:1rem;
}
.empty-state h5{color:var(--text);font-weight:600;}

/* Tables ----------------------------------------------------------------- */
.table{--bs-table-border-color:var(--ui-line);}
.table>thead th{font-weight:600;color:var(--brand);white-space:nowrap;}
.table>tbody th{font-weight:600;color:#334155;}

/* Focus ------------------------------------------------------------------ */
:focus-visible{outline:3px solid rgba(232,119,34,.45);outline-offset:2px;}
.btn:focus-visible{outline-offset:3px;}

/* Media ------------------------------------------------------------------ */
img{max-width:100%;}
.ratio>img{width:100%;height:100%;object-fit:cover;}

/* Icon tiles ------------------------------------------------------------- */
.icon-tile{
    padding:1.6rem 1.2rem;
    background:transparent;
    border:none;
    border-radius:0;
    display:block;
    transition:color .18s ease;
}
a.icon-tile{cursor:pointer;}
.icon-tile-icon{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:56px;
    height:56px;
    border-radius:16px;
    background:#fff4ea;
    color:var(--accent);
    font-size:1.55rem;
}
.icon-tile h5{color:var(--brand);}
.icon-tile:hover h5{color:var(--accent);}
.icon-tile:hover .icon-tile-icon{background:#ffe9d6;}

/* Product catalogue ------------------------------------------------------ */
.product-card .card-title{
    display:-webkit-box;
    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;
    overflow:hidden;
}
.product-card .card-text{
    display:-webkit-box;
    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;
    overflow:hidden;
    min-height:2.6em;
}
.filter-panel .card{border-radius:12px;box-shadow:none;}
.filter-panel .card-header{background:#fff;border-bottom:1px solid var(--ui-line);padding:.9rem 1rem;font-size:.92rem;}

/* Product detail --------------------------------------------------------- */
.product-info{position:sticky;top:88px;}
.spec-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.75rem;}
.spec-item{padding:.9rem 1rem;border:1px solid var(--ui-line);border-radius:12px;background:#fff;}
.spec-item small{display:block;color:var(--ui-muted);font-size:.75rem;margin-bottom:.15rem;}
.spec-item strong{font-size:1rem;color:var(--brand);}
.gallery-thumbs{display:flex;gap:.5rem;margin-top:.75rem;flex-wrap:wrap;}
.gallery-thumbs img{width:64px;height:64px;object-fit:cover;border-radius:8px;border:2px solid transparent;cursor:pointer;background:var(--ui-surface-2);}
.gallery-thumbs img.active{border-color:var(--accent);}
@media (max-width:991.98px){
    .product-info{position:static;}
}

/* News / article cards --------------------------------------------------- */
.news-card .cover{aspect-ratio:16/9;width:100%;object-fit:cover;}
.news-card h3{font-size:1.05rem;line-height:1.4;}
.news-card .tag{background:#fff4ea;color:#b45309;}

/* Case grid -------------------------------------------------------------- */
.case-card{
    display:flex;flex-direction:column;
    text-decoration:none;color:inherit;
    overflow:hidden;
    transition:box-shadow .2s ease, border-color .2s ease, transform .2s ease;
}
.case-card:hover{transform:translateY(-4px);box-shadow:var(--ui-shadow);border-color:#cbd5e1;}
.case-card .card-body{display:flex;flex-direction:column;flex:1;}
.case-card .small-label{
    font-size:.72rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;
    color:var(--accent);margin-bottom:.5rem;
    display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.case-card h3{font-size:1.08rem;line-height:1.4;margin:0 0 .6rem;color:var(--brand);}
.case-card p{font-size:.86rem;color:var(--ui-muted);line-height:1.7;margin:0;}

.case-card .case-img{
    height:185px;position:relative;overflow:hidden;
    background:var(--ui-surface-2);
}
.case-card .case-cover{
    position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
    transition:transform .35s ease;
}
.case-card:hover .case-cover{transform:scale(1.04);}
.case-art-label{
    position:absolute;top:14px;left:14px;z-index:2;
    background:rgba(255,255,255,.86);color:var(--brand);
    padding:6px 10px;border-radius:8px;font-size:.68rem;font-weight:800;letter-spacing:.04em;
    backdrop-filter:blur(4px);
}

@media (max-width:767.98px){
    .case-card .case-img{height:150px;}
}

/* Counter band ----------------------------------------------------------- */
.counter-band{
    background:linear-gradient(135deg,var(--brand) 0%,var(--brand-light) 100%)!important;
    padding:3.25rem 0!important;
}
.counter-band .display-4{font-size:clamp(2.1rem,4vw,3.1rem);letter-spacing:-.02em;}
.counter-band .text-accent{color:var(--accent)!important;}

.text-brand{color:var(--brand)!important;}
.step-option{cursor:pointer;transition:border-color .18s ease, box-shadow .18s ease, transform .18s ease;}
.step-option.is-selected{border-color:var(--accent);box-shadow:0 0 0 2px rgba(232,119,34,.18);transform:translateY(-2px);}

/* Parallax page title ---------------------------------------------------- */
.page-hero{position:relative;overflow:hidden;background-size:cover;background-position:center 58%;color:#fff;isolation:isolate;padding:5.5rem 0 5rem;}
.page-hero-bg{position:absolute;inset:-20% 0;z-index:-2;background-size:cover;background-position:center;will-change:transform;pointer-events:none;}
.page-hero-overlay{position:absolute;inset:0;z-index:-1;pointer-events:none;}
.page-hero .container{position:relative;z-index:1;}
/* 公共片段配置态：遮罩完全由 .page-hero-overlay 承担，关闭旧三段渐变避免双重遮罩 */
.page-hero--configured::before{display:none;}
/* 兼容兜底：未迁移的旧直写模板仍使用三段渐变遮罩 */
.page-hero::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgba(8,25,40,.86) 0%,rgba(8,25,40,.62) 52%,rgba(8,25,40,.22) 100%);}
.page-hero h1,.page-hero .lead,.page-hero .display-5{color:#fff;}
.page-hero .text-secondary{color:rgba(255,255,255,.82)!important;}
.page-hero .eyebrow{color:#ffb380;}
.page-hero .page-breadcrumb .breadcrumb-item a{color:rgba(255,255,255,.78);}
.page-hero .page-breadcrumb .breadcrumb-item a:hover{color:#fff;}
.page-hero .page-breadcrumb .breadcrumb-item.active{color:rgba(255,255,255,.9);}
.page-hero .page-breadcrumb .breadcrumb-item+.breadcrumb-item::before{color:rgba(255,255,255,.5);}
.page-hero .btn-outline-primary{color:#fff;border-color:rgba(255,255,255,.6);}
.page-hero .btn-outline-primary:hover{background:#fff;color:var(--brand);}

/* 白色文字态（公共片段 .page-hero--light；深色背景图 / 深蓝兜底） */
.page-hero--light{background-color:#081928;color:#fff;}
.page-hero--light h1,.page-hero--light .lead,.page-hero--light .display-5{color:#fff;}
.page-hero--light .text-secondary{color:rgba(255,255,255,.82)!important;}
.page-hero--light .eyebrow{color:#ffb380;}
.page-hero--light .page-breadcrumb .breadcrumb-item a{color:rgba(255,255,255,.78);}
.page-hero--light .page-breadcrumb .breadcrumb-item a:hover{color:#fff;}
.page-hero--light .page-breadcrumb .breadcrumb-item.active{color:rgba(255,255,255,.9);}
.page-hero--light .page-breadcrumb .breadcrumb-item+.breadcrumb-item::before{color:rgba(255,255,255,.5);}
.page-hero--light .hero-back-link{display:inline-block;margin-bottom:.75rem;color:rgba(255,255,255,.78);text-decoration:none;}
.page-hero--light .hero-back-link:hover{color:#fff;}

/* 深色文字态（公共片段 .page-hero--dark；浅色背景，文字色 dark 或 auto 无图时使用） */
.page-hero--dark{background-color:var(--ui-surface-2);color:#1e293b;}
.page-hero--dark h1,.page-hero--dark .lead,.page-hero--dark .display-5{color:#0f2942;}
.page-hero--dark .text-secondary{color:var(--ui-muted)!important;}
.page-hero--dark .eyebrow{color:var(--accent,#e87722);}
.page-hero--dark .page-breadcrumb .breadcrumb-item a{color:#64748b;}
.page-hero--dark .page-breadcrumb .breadcrumb-item a:hover{color:var(--brand);}
.page-hero--dark .page-breadcrumb .breadcrumb-item.active{color:#334155;}
.page-hero--dark .page-breadcrumb .breadcrumb-item+.breadcrumb-item::before{color:#cbd5e1;}
.page-hero--dark .hero-back-link{display:inline-block;margin-bottom:.75rem;color:#64748b;text-decoration:none;}
.page-hero--dark .hero-back-link:hover{color:var(--brand);}

/* Inline page breadcrumb -------------------------------------------------- */
.page-breadcrumb{margin-bottom:1.25rem;}
.page-breadcrumb .breadcrumb{font-size:.82rem;margin-bottom:0;}
.page-breadcrumb .breadcrumb-item a{color:#64748b;text-decoration:none;}
.page-breadcrumb .breadcrumb-item a:hover{color:var(--brand);}
.page-breadcrumb .breadcrumb-item.active{color:#334155;}

/* Company profile table -------------------------------------------------- */
.company-table{margin-bottom:0;}
.company-table th{width:170px;background:#f7f9fc;color:var(--brand);font-weight:600;vertical-align:top;}
.company-table td{color:#334155;}

/* Mobile ----------------------------------------------------------------- */
@media (max-width:767px){
    .section{padding:2.5rem 0;}
    .card-body{padding:1.1rem;}
    .btn{min-height:46px;}
    .page-link{min-width:42px;min-height:42px;}
}

/* ==========================================================================
   区块容器：子模块左右并排网格（section layout_direction = horizontal）
   ========================================================================== */
.section-grid{display:grid;grid-template-columns:repeat(var(--sg-cols,1),minmax(0,1fr));}
.section-grid__item{min-width:0;}
/* 嵌入态：子模块作为网格单元卡片化，去掉外层 .section 上下留白与 .container 限宽，保留子模块自身背景 */
.section-grid__item .section{padding:2.25rem 1.5rem;height:100%;margin:0;}
.section-grid__item .section > .container,
.section-grid__item .section > .container-fluid{width:100%;max-width:100%;margin:0;padding-left:0;padding-right:0;}
/* 手机端堆叠：窄屏自动回到上下单列，避免并排挤压（自定义比例下同时重置每格 span） */
@media (max-width:767.98px){
    .section-grid--stack-md{grid-template-columns:1fr !important;}
    .section-grid--stack-md .section-grid__item{grid-column:1/-1 !important;}
}
@media (max-width:991.98px){
    .section-grid--stack-lg{grid-template-columns:1fr !important;}
    .section-grid--stack-lg .section-grid__item{grid-column:1/-1 !important;}
}

/* ==========================================================================
   联系页：询盘表单 + 联系信息（沿用首页卡片 / 图标 / 品牌色语言）
   ========================================================================== */
/* 询盘表单白卡 */
.contact-form-card{
    position:relative;
    background:#fff;
    border:1px solid var(--ui-line);
    border-radius:var(--ui-radius);
    box-shadow:var(--ui-shadow);
    padding:clamp(1.5rem,2.6vw,2.4rem);
    height:100%;
    overflow:hidden;
}
.contact-form-card form{position:relative;}
.contact-card-watermark{
    position:absolute;right:-14px;top:-20px;
    font-size:8.5rem;line-height:1;color:rgba(15,41,66,.05);
    pointer-events:none;user-select:none;
}
.contact-form-head{margin-bottom:1.55rem;position:relative;z-index:1;}
.contact-eyebrow{
    display:inline-block;color:var(--accent);
    font-weight:700;font-size:.75rem;letter-spacing:.18em;text-transform:uppercase;
    margin-bottom:.55rem;
}
.contact-form-title{font-size:clamp(1.28rem,2vw,1.62rem);line-height:1.25;margin-bottom:.4rem;}
.contact-form-card .btn-brand i{transition:transform .18s ease;}
.contact-form-card .btn-brand:hover i{transform:translateX(3px);}
.contact-group-label{margin-top:.3rem;}
.contact-group-label span{
    display:block;font-size:.8rem;font-weight:700;letter-spacing:.06em;color:var(--brand);
    border-bottom:1px solid var(--ui-line);padding-bottom:.5rem;
}
.contact-privacy .form-check-label{font-size:.86rem;color:var(--ui-muted);}
.contact-privacy a{color:var(--brand);}

/* 右侧联系信息 */
.contact-aside{display:flex;flex-direction:column;gap:1.1rem;height:100%;}
.contact-brand-card{
    position:relative;overflow:hidden;
    border-radius:var(--ui-radius);padding:1.4rem 1.5rem;color:#fff;
    background:linear-gradient(135deg,var(--brand) 0%,var(--brand-light) 100%);
    box-shadow:var(--ui-shadow);
    display:flex;align-items:center;gap:1rem;
}
.contact-brand-card::after{
    content:"";position:absolute;right:-42px;top:-42px;width:150px;height:150px;border-radius:50%;
    background:radial-gradient(circle,rgba(255,255,255,.14),transparent 70%);
}
.contact-brand-logo{
    flex:0 0 46px;width:46px;height:46px;border-radius:12px;background:rgba(255,255,255,.16);
    display:flex;align-items:center;justify-content:center;font-weight:700;font-size:1.15rem;
}
.contact-brand-meta{min-width:0;position:relative;z-index:1;}
.contact-brand-name{font-weight:700;font-size:1.03rem;line-height:1.45;margin-bottom:.2rem;}
.contact-brand-web{display:inline-flex;align-items:center;gap:.4rem;color:rgba(255,255,255,.85);font-size:.85rem;text-decoration:none;}
.contact-brand-web:hover{color:#fff;}

.contact-list-card{padding:1.35rem 1.55rem;flex:1 1 auto;}
.contact-list-head{margin-bottom:.6rem;}
.contact-list-title{font-size:1.1rem;margin-bottom:.3rem;}
.contact-row{display:flex;gap:.95rem;align-items:flex-start;padding:.85rem 0;border-bottom:1px solid #eef2f7;}
.contact-row:first-of-type{padding-top:.2rem;}
.contact-row:last-of-type{border-bottom:0;padding-bottom:.2rem;}
.contact-row-icon{
    flex:0 0 40px;width:40px;height:40px;border-radius:11px;
    background:#fff2e9;color:var(--accent);
    display:flex;align-items:center;justify-content:center;font-size:1.1rem;
}
.contact-row-body{min-width:0;flex:1;}
.contact-row-label{font-size:.74rem;letter-spacing:.03em;color:var(--ui-muted);margin-bottom:.18rem;}
.contact-row-value{font-weight:600;font-size:.95rem;line-height:1.45;color:var(--text);word-break:break-word;}
.contact-row-value a{color:inherit;text-decoration:none;}
.contact-row-value a:hover{color:var(--accent);}
.contact-row-secondary{font-size:.82rem;color:var(--ui-muted);margin-top:.2rem;font-weight:400;}
.contact-row-secondary a{color:inherit;text-decoration:none;}
.contact-row-secondary a:hover{color:var(--accent);}

.contact-social{
    display:flex;align-items:center;justify-content:space-between;gap:1rem;
    padding-top:1.05rem;margin-top:.5rem;border-top:1px solid #eef2f7;
}
.contact-social-label{font-size:.74rem;letter-spacing:.1em;color:var(--ui-muted);font-weight:600;}
.contact-social-icons{display:flex;gap:.6rem;}
.contact-social-btn{
    width:40px;height:40px;border-radius:50%;
    display:flex;align-items:center;justify-content:center;font-size:1.05rem;
    color:var(--brand);background:var(--ui-surface-2);border:1px solid var(--ui-line);
    transition:all .18s ease;text-decoration:none;
}
.contact-social-btn:hover{
    background:var(--accent);color:#fff;border-color:var(--accent);
    transform:translateY(-2px);box-shadow:0 6px 14px rgba(232,119,34,.3);
}

.contact-trust{display:flex;flex-wrap:wrap;gap:.5rem;}
.contact-trust-item{
    display:inline-flex;align-items:center;gap:.4rem;
    font-size:.74rem;font-weight:700;letter-spacing:.03em;color:#b35410;
    background:#fff2e9;border:1px solid #ffe0cc;border-radius:999px;padding:.4rem .8rem;
}
.contact-trust-item i{font-size:.9rem;}

/* 地图卡片 */
.contact-map-card{overflow:hidden;padding:0;}
.contact-map-canvas{position:relative;height:172px;background:#eaf0f6;overflow:hidden;}
.contact-map-canvas svg{position:absolute;inset:0;width:100%;height:100%;}
.contact-map-pin{
    position:absolute;left:50%;top:50%;transform:translate(-50%,-92%);
    color:var(--accent);font-size:2.1rem;line-height:1;
    filter:drop-shadow(0 6px 10px rgba(232,119,34,.45));
}
.contact-map-pin::before{
    content:"";position:absolute;left:50%;top:100%;
    transform:translate(-50%,-14px);width:26px;height:26px;border-radius:50%;
    border:2px solid var(--accent);opacity:0;animation:contactpin 2.2s ease-out infinite;
}
@keyframes contactpin{
    0%{opacity:.6;transform:translate(-50%,-14px) scale(.4);}
    100%{opacity:0;transform:translate(-50%,-14px) scale(1.7);}
}
.contact-map-body{padding:1.15rem 1.4rem 1.35rem;}
.contact-map-addr{font-weight:600;font-size:.92rem;line-height:1.5;color:var(--text);margin:.2rem 0 .85rem;}
.contact-map-body .btn{width:100%;}

/* 嵌入区块时两栏等高（区块 h_align 需为 stretch） */
.section-grid__item .contact-form-section > .container,
.section-grid__item .contact-info-module > .container{height:100%;}
.contact-form-section > .container,
.contact-info-module > .container{height:100%;}