/* ==========================================
   CroWebsite - Online Calculator Page Styles (在线计算器页面样式)
   ========================================== 
   
   文件结构：
   1. 页面背景和布局
   2. 计算器界面样式
   3. 表单元素样式
   4. 结果显示区域
   5. 响应式设计
   
   作者：CroWebsite Team
   最后更新：2025年6月17日
   版本：v2.0
   ========================================== */

/* ==========================================
   1. PAGE BACKGROUND & LAYOUT
   ========================================== */

/* 页面背景设置 */
.page-onlinecalc {
   position: relative;
   min-height: 100vh;
}

.page-onlinecalc::before {
   content: '';
   position: fixed;
   top: 0;
   left: 0;
   right: 0;
   bottom: 0;
   width: 100%;
   height: 100%;
   background: url('../assets/images/graph-table.jpg') no-repeat;
   background-size: cover;
   background-position: center center;
   opacity: 100%;
   z-index: 0;
   pointer-events: none;
   /* 平滑过渡效果 */
   transition: opacity 0.8s ease-in-out;
   /* GPU加速 */
   will-change: opacity;
   transform: translate3d(0, 0, 0);
}

/* 添加渐变遮罩层 */
.page-onlinecalc::after {
   content: '';
   position: fixed;
   top: 0;
   left: 0;
   right: 0;
   bottom: 0;
   background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(248, 250, 252, 0.92) 50%, rgba(241, 245, 249, 0.95) 100%);
   z-index: -1;
   pointer-events: none;
}

/* OnlineCalc页面特有样式 - 基础样式已移至 styles.css */
.page-onlinecalc main.container {
   margin-top: 0;
   /* 页面特有：无顶部外边距 */
}

/* SAP自助分析平台标题样式 */
.page-onlinecalc .hero-section h1.display-4 {
   margin-top: 0px;
}

/* Hero section container 样式 */
.page-onlinecalc .hero-section .container.text-center {
   padding-top: 32px;
   margin-top: 48px;
   box-shadow: 0 2px 15px rgba(0, 0, 0, 0.1);
   /* 添加轻微阴影效果 */
   border-radius: 10px;
   /* 10px圆角 */
}

/* OnlineCalc页面Hero区域特殊样式 */
.page-onlinecalc .hero-section.white-bg {
   background: transparent !important;
   color: var(--dark-text);
   backdrop-filter: none !important;
}

/* 在线计算页面Hero区域样式增强 - 透明背景 */
.page-onlinecalc .hero-section.white-bg {
   background-color: transparent !important;
   border-radius: 0;
   margin-top: 0px;
   margin-bottom: 0;
   padding: 0 0 0 0;
   /* 改为顶部无padding，底部无padding */
   box-shadow: none;
   backdrop-filter: none;
}

/* 表格水平滚动样式 */
.page-onlinecalc .table-horizontal table {
   min-width: 1000px;
}

.page-onlinecalc .table-horizontal .table-responsive {
   overflow-x: auto;
}

/* 结果图片样式 */
.page-onlinecalc #result-image img {
   max-width: 100%;
   height: auto;
}

/* OnlineCalc页面响应式设计 - 导航栏样式已移至 styles.css */