/* 报价计算器样式 */
:root {
    --floating-right: 1.5rem; /* 与聊天按钮的 right（right-6）对齐 */
    --chat-bottom-mobile: 1.5rem; /* 保持与聊天按钮 bottom 的一致性 */
    --floating-gap: 4.5rem;
    --touch-size: 56px;
        --floating-spacing: 1rem; /* 垂直堆叠间距 (加大以避免重叠) */
}
/* Ensure the top navigation stays above floating widgets */
header#navbar {
    z-index: 10002 !important;
}

/* Small, low-risk header layout fixes to prevent clipping/overflow in some browsers
   - force header to span the viewport and avoid being clipped by ancestor containers
   - keep container overflow visible so nav items and mobile menu are not hidden
   These rules are intentionally specific and use !important sparingly to avoid
   interfering with existing theme styles. */
header#navbar {
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    overflow: visible !important;
}
header#navbar .container {
    overflow: visible !important;
}
/* Additional fixes to reduce visual gaps at non-100% page zoom / high DPI
   - use viewport width to avoid rounding gaps when browser zoom changes
   - promote header to its own composite layer to avoid sub-pixel rendering gaps
   - ensure background covers the full padding box (avoid bleed from rounded browser corners)
*/
header#navbar {
    /* Use percentage width to avoid creating horizontal scroll at certain zoom/DPI.
       Keep transform promotion for smoother rendering. */
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    background-clip: padding-box;
    left: 0 !important;
    right: 0 !important;
}

/* Ensure desktop nav links remain visible at slightly narrower widths (helps when DevTools is docked)
   This keeps responsive behavior but raises the breakpoint threshold slightly to avoid
   accidental collapse when the viewport is still wide enough for desktop layout. */
@media (min-width: 900px) {
    header#navbar nav {
        display: flex !important;
        align-items: center;
        gap: 1rem;
    }
    /* hide mobile menu button when desktop nav is forced visible */
    header#navbar #menuBtn {
        display: none !important;
    }
}

/* Hide the explicit "首页" text in the desktop nav since the logo already links home.
   Keep the mobile menu entries intact. This hides the first anchor in the desktop nav
   (which is the 首页 link) for larger viewports. */
@media (min-width: 900px) {
    header#navbar nav a:first-child {
        display: none !important;
    }
}
.quote-calculator {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    border: 1px solid #e5e7eb;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
}

/* 强制确保计算器容器在页面最上层且可交互（避免被聊天组件或其他元素覆盖） */
.quote-calculator {
    position: fixed; /* 确保固定定位，响应式位置由下面的变量控制 */
    z-index: 10000 !important;
    pointer-events: auto !important;
    right: var(--floating-right);
         /* 默认：排列在聊天按钮上方（chat 在 --chat-bottom-mobile）
             计算器最小化按钮底部 = 聊天按钮底部 + 按钮高度 + 间距 */
         bottom: calc(var(--chat-bottom-mobile) + var(--touch-size) + var(--floating-spacing));
    width: auto; /* 不让根容器强制拉伸 */
    max-width: none;
    transform: none !important;
}

.quote-calculator h3 {
    color: #1f2937;
    border-bottom: 2px solid #3b82f6;
    padding-bottom: 0.5rem;
}

.quote-calculator label {
    color: #374151;
    font-weight: 500;
}

.quote-calculator select,
.quote-calculator input {
    transition: all 0.2s ease;
    border: 1px solid #d1d5db;
}

.quote-calculator select:focus,
.quote-calculator input:focus {
    border-color: #3b82f6;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
    outline: none;
}

.quote-calculator select:hover,
.quote-calculator input:hover {
    border-color: #9ca3af;
}

/* 计算结果区域 */
.quote-calculator .bg-gray-50 {
    background: #f9fafb;
    border: 1px solid #e5e7eb;
}

.quote-calculator #totalPrice {
    color: #1d4ed8;
    font-size: 1.25rem;
}

/* 按钮样式 */
.quote-calculator button {
    transition: all 0.2s ease;
    font-weight: 500;
}

.quote-calculator #calculateBtn {
    background: linear-gradient(135deg, #3b82f6, #1d4ed8);
}

.quote-calculator #calculateBtn:hover {
    background: linear-gradient(135deg, #1d4ed8, #1e40af);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
}

.quote-calculator #contactBtn:hover {
    background: #d1d5db;
    transform: translateY(-1px);
}

/* 网格布局优化 */
.quote-calculator .grid {
    gap: 1rem;
}

/* 响应式设计 */
@media (max-width: 640px) {
    .quote-calculator {
        margin: 1rem;
        max-width: none;
    }
    
    .quote-calculator .grid {
        grid-template-columns: 1fr;
        gap: 0.75rem;
    }
}

/* 超窄屏处理：当视口非常窄时，将计算器放到聊天按钮左侧，避免垂直堆叠占用过多高度 */
@media (max-width: 360px) {
    :root {
        --touch-size: 48px; /* 稍微减小触控目标以节省空间 */
        --floating-spacing: 0.5rem;
    }

    /* 把计算器按钮移至聊天按钮左侧，保持底部一致 */
    #calculatorMinimized {
        right: calc(var(--floating-right) + var(--touch-size) + var(--floating-spacing));
        bottom: var(--chat-bottom-mobile);
    }

    /* 保证聊天按钮仍然在最右下 */
    #chatMinimized {
        right: var(--floating-right);
        bottom: var(--chat-bottom-mobile);
    }
}

/* 动画效果 */
.quote-calculator {
    animation: fadeInUp 0.5s ease-out;
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* 价格变化动画 */
#totalPrice {
    transition: all 0.3s ease;
}

#totalPrice.changing {
    animation: priceChange 0.5s ease-in-out;
}

@keyframes priceChange {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.05);
        color: #ef4444;
    }
}

/* 输入验证样式 */
.quote-calculator input:invalid {
    border-color: #ef4444;
}

.quote-calculator input:valid {
    border-color: #10b981;
}

/* 加载状态 */
.quote-calculator.loading {
    opacity: 0.7;
    pointer-events: none;
}

.quote-calculator.loading::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 20px;
    height: 20px;
    margin: -10px 0 0 -10px;
    border: 2px solid #f3f4f6;
    border-top: 2px solid #3b82f6;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* 悬浮按钮样式 */
#calculatorMinimized {
    background: linear-gradient(135deg, #10b981, #059669);
    color: white;
    border-radius: 50%;
    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.4);
    cursor: pointer;
    transition: all 0.3s ease;
    z-index: 10000 !important; /* 保证最顶层可点击 */
    /* 将最小化按钮设为 fixed，避免被根容器宽度或布局拉伸 */
    position: fixed;
    right: var(--floating-right);
    /* 默认：最小化按钮放在聊天按钮之上，使用相对计算确保不重叠 */
    bottom: calc(var(--chat-bottom-mobile) + var(--touch-size) + var(--floating-spacing));
    width: var(--touch-size);
    height: var(--touch-size);
    min-width: var(--touch-size);
    min-height: var(--touch-size);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
}

#calculatorMinimized:hover {
    transform: scale(1.1);
    box-shadow: 0 6px 20px rgba(16, 185, 129, 0.6);
}

#calculatorMinimized .w-14 {
    width: 3.5rem;
}

#calculatorMinimized .h-14 {
    height: 3.5rem;
}

/* 计算器窗口样式 */
#calculatorWindow {
    background: white;
    border-radius: 0.5rem;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
    width: 20rem;
    max-height: 24rem;
    overflow-y: auto;
    z-index: 10001 !important;
}

/* 隐藏类 */
.hidden {
    display: none !important;
}

/* 可访问性与移动端微调 */
@media (max-width: 640px) {
    /* 将计算器上移，避免与聊天组件冲突 */
    .quote-calculator {
        right: var(--floating-right) !important;
        bottom: calc(var(--chat-bottom-mobile) + var(--floating-gap)) !important;
        /* 保持根容器宽度用于展开窗口，但不影响固定的最小化按钮 */
        width: calc(100vw - 2rem);
        max-width: none;
        border-radius: 0.75rem;
    }

    #calculatorWindow {
        width: 100% !important;
        height: 70vh !important;
        max-height: none !important;
    }

    /* 移动端最小化按钮：确保尺寸和位置正确，不被拉伸 */
    #calculatorMinimized {
        right: var(--floating-right);
        bottom: calc(var(--chat-bottom-mobile) + var(--touch-size) + var(--floating-spacing));
        width: var(--touch-size);
        height: var(--touch-size);
    }
}

/* 焦点可见性，提升键盘可访问性 */
#calculatorMinimized:focus,
#calculatorMinimized:focus-visible,
#calculatorWindow:focus,
#calculatorWindow:focus-visible {
    outline: 3px solid rgba(59,130,246,0.18);
    outline-offset: 3px;
}

/* 确保按钮触控目标大小 */
#calculatorMinimized { min-width: var(--touch-size); min-height: var(--touch-size); display:flex; align-items:center; justify-content:center; }