/*
 Theme Name:   Woodmart Child
 Description:  Woodmart Child Theme
 Author:       XTemos
 Author URI:   http://xtemos.com
 Template:     woodmart
 Version:      1.0.0
 Text Domain:  woodmart
*/

/* =================================================================
   Fluent Forms - International Phone Input (intl-tel-input)
   深色背景优化
   ================================================================= */

/* 表单 ID #3 (Request for Quote) 的国际电话输入优化 */
#fluentform_3 .iti,
.fluentform .iti {
    /* 确保组件宽度正确 */
    width: 100%;
}

/* 国家选择器按钮 - 增加背景色对比度 */
#fluentform_3 .iti__selected-country,
.fluentform .iti__selected-country {
    background-color: transparent !important;
    border-radius: 6px 0 0 6px;
    backdrop-filter: none;
    transition: background-color 0.3s ease;
}

/* 国家选择器悬停状态 */
#fluentform_3 .iti__selected-country:hover,
.fluentform .iti__selected-country:hover {
    background-color: transparent !important;
}

/* 国家选择器获得焦点时 */
#fluentform_3 .iti__selected-country:focus,
.fluentform .iti__selected-country:focus {
    outline: 2px solid rgba(255, 255, 255, 0.5);
    outline-offset: 2px;
}

/* 下拉箭头 - 确保在深色背景下可见 */
#fluentform_3 .iti__arrow,
.fluentform .iti__arrow {
    border-top-color: rgba(255, 255, 255, 0.8) !important;
}

/* 箭头向上时 */
#fluentform_3 .iti__arrow--up,
.fluentform .iti__arrow--up {
    border-bottom-color: rgba(255, 255, 255, 0.8) !important;
}

/* 下拉菜单容器 */
#fluentform_3 .iti__dropdown-content,
.fluentform .iti__dropdown-content {
    background-color: #ffffff !important;
    border: 1px solid rgba(0, 0, 0, 0.15) !important;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2) !important;
    border-radius: 6px;
    overflow: hidden;
}

/* 搜索输入框 */
#fluentform_3 .iti__search-input,
.fluentform .iti__search-input {
    background-color: #f8f9fa !important;
    border: 1px solid #dee2e6 !important;
    color: #212529 !important;
    padding: 8px 12px !important;
    margin: 8px !important;
    width: calc(100% - 16px) !important;
    border-radius: 4px;
}

#fluentform_3 .iti__search-input:focus,
.fluentform .iti__search-input:focus {
    outline: none;
    border-color: #1a7efb !important;
    box-shadow: 0 0 0 3px rgba(26, 126, 251, 0.1) !important;
}

/* 国家列表 */
#fluentform_3 .iti__country-list,
.fluentform .iti__country-list {
    background-color: #ffffff !important;
    margin: 0 !important;
}

/* 国家列表项 */
#fluentform_3 .iti__country,
.fluentform .iti__country {
    color: #212529 !important;
    padding: 8px 12px !important;
    transition: background-color 0.2s ease;
}

/* 国家列表项悬停状态 */
#fluentform_3 .iti__country:hover,
#fluentform_3 .iti__country.iti__highlight,
.fluentform .iti__country:hover,
.fluentform .iti__country.iti__highlight {
    background-color: #e7f3ff !important;
    color: #1a7efb !important;
}

/* 拨号代码颜色 */
#fluentform_3 .iti__dial-code,
.fluentform .iti__dial-code {
    color: #6c757d !important;
}

/* 国家列表项悬停时的拨号代码 */
#fluentform_3 .iti__country:hover .iti__dial-code,
#fluentform_3 .iti__country.iti__highlight .iti__dial-code,
.fluentform .iti__country:hover .iti__dial-code,
.fluentform .iti__country.iti__highlight .iti__dial-code {
    color: #1a7efb !important;
}

/* -------------------------------------------------
   LCP 背景图：首屏 hero 当前显示的主图
   作用：绕过 lazyload，让首屏背景立即可见
-------------------------------------------------- */
.slide.active[data-bg*="2025/12/1-1.webp"],
.slide.active.hero-lcp {
    background-image: url('https://smartoolusa.com/wp-content/uploads/2025/12/1-1.webp') !important;
    background-size: cover;
    background-position: center;
}

/* 选中的拨号代码 */
#fluentform_3 .iti__selected-dial-code,
.fluentform .iti__selected-dial-code {
    color: rgba(255, 255, 255, 0.9) !important;
    font-weight: 500;
}

/* 国旗图标 - 确保清晰可见 */
#fluentform_3 .iti__flag,
.fluentform .iti__flag {
    box-shadow: 0 0 1px 0 rgba(0, 0, 0, 0.4);
}

/* 电话输入框 */
#fluentform_3 .iti__tel-input,
.fluentform .iti__tel-input {
    border-radius: 0 6px 6px 0 !important;
}

/* 响应式优化 - 移动端全屏弹窗 */
.iti--fullscreen-popup.iti--container {
    background-color: rgba(0, 0, 0, 0.75) !important;
}

.iti--fullscreen-popup .iti__dropdown-content {
    background-color: #ffffff !important;
    max-height: calc(100vh - 80px) !important;
}

/* 深色模式额外优化（如果页面使用深色模式类） */
.dark-mode #fluentform_3 .iti__selected-country,
.dark-mode .fluentform .iti__selected-country,
body.dark #fluentform_3 .iti__selected-country,
body.dark .fluentform .iti__selected-country {
    background-color: transparent !important;
}

.dark-mode #fluentform_3 .iti__selected-country:hover,
.dark-mode .fluentform .iti__selected-country:hover,
body.dark #fluentform_3 .iti__selected-country:hover,
body.dark .fluentform .iti__selected-country:hover {
    background-color: transparent !important;
}

/* 无障碍优化 - 确保键盘导航清晰可见 */
#fluentform_3 .iti__country:focus,
.fluentform .iti__country:focus {
    outline: 2px solid #1a7efb;
    outline-offset: -2px;
    background-color: #e7f3ff !important;
}

/* =================================================================
   End of International Phone Input Optimization
   ================================================================= */

/* =================================================================
   Hero Slider - 移动端小图优先加载（减少 LCP 资源体积）
   为前 3 张幻灯片在移动端强制使用 768/1200 宽度的 WebP，
   覆盖内联背景图，避免手机直接下载 1900px 大图。
   ================================================================= */
@media (max-width: 1024px) {
    .hero .slide:nth-child(1) {
        background-image: url('https://smartoolusa.com/wp-content/uploads/2025/12/1-1-1200x485.webp') !important;
        background-image: image-set(
            url('https://smartoolusa.com/wp-content/uploads/2025/12/1-1-768x310.webp') 1x,
            url('https://smartoolusa.com/wp-content/uploads/2025/12/1-1-1200x485.webp') 2x
        ) !important;
        background-size: cover;
        background-position: center;
    }

    .hero .slide:nth-child(2) {
        background-image: url('https://smartoolusa.com/wp-content/uploads/2025/12/2-1-1200x485.webp') !important;
        background-image: image-set(
            url('https://smartoolusa.com/wp-content/uploads/2025/12/2-1-768x310.webp') 1x,
            url('https://smartoolusa.com/wp-content/uploads/2025/12/2-1-1200x485.webp') 2x
        ) !important;
        background-size: cover;
        background-position: center;
    }

    .hero .slide:nth-child(3) {
        background-image: url('https://smartoolusa.com/wp-content/uploads/2025/12/3-1-1200x485.webp') !important;
        background-image: image-set(
            url('https://smartoolusa.com/wp-content/uploads/2025/12/3-1-768x310.webp') 1x,
            url('https://smartoolusa.com/wp-content/uploads/2025/12/3-1-1200x485.webp') 2x
        ) !important;
        background-size: cover;
        background-position: center;
    }
}

/* =================================================================
   Disable AI/Live Chat floating widget (right-bottom icon)
   如果需要重新启用，删除此块。
   ================================================================= */
#epkb-ai-chat-widget-root,
.epkb-ai-chat-widget,
.epkb-ai-chat-toggle {
    display: none !important;
    pointer-events: none !important;
    visibility: hidden !important;
}

/* 如果有自定义 .chat-widget（含 “Opening Live Chat...” onclick），直接隐藏 */
.chat-widget {
    display: none !important;
    pointer-events: none !important;
    visibility: hidden !important;
}

/* =================================================================
   Fluent Forms - Dark Background Text Visibility Optimization
   ================================================================= */

/* Global White Labels */
.fluentform .ff-el-is-required.asterisk,
.fluentform .ff-el-is-required .ff-el-group label::after,
.fluentform label,
.fluentform .ff-el-group label,
.fluentform .ff-el-group span,
.fluentform .ff-el-group legend,
.fluentform .ff-el-form-check label span {
    color: #ffffff !important;
}

/* Help messages and section titles */
.fluentform .ff-el-help-message,
.fluentform .ff-section-title,
.fluentform .ff-section-subtitle,
.fluentform .ff-t-container {
    color: rgba(255, 255, 255, 0.9) !important;
}

/* Specific fix for Form #4 */
#fluentform_4 .ff-el-group label,
#fluentform_4 label span,
#fluentform_4 .ff-el-form-check label {
    color: #ffffff !important;
}

/* =================================================================
   Fix for Phone Dropdown (intl-tel-input) White on White issue
   ================================================================= */
.fluentform .iti__country-list,
#fluentform_4 .iti__country-list {
    background-color: #ffffff !important;
}
.fluentform .iti__country,
.fluentform .iti__country-name,
.fluentform .iti__dial-code,
#fluentform_4 .iti__country,
#fluentform_4 .iti__country-name,
#fluentform_4 .iti__dial-code {
    color: #333333 !important;
}
.fluentform .iti__search-input,
#fluentform_4 .iti__search-input {
    color: #333333 !important;
    background-color: #f8f9fa !important;
}

/* =================================================================
   Ultra Force White Labels for Fluent Form
   ================================================================= */
/* 强制所有层级的标签文本为白色 */
.fluentform, 
.fluentform label, 
.fluentform .ff-el-group label, 
.fluentform .ff-el-group label span,
.fluentform .ff-el-is-required label,
.fluentform .ff-el-is-required label span,
.fluentform .ff-el-group .ff-el-is-required label,
#fluentform_4 .ff-el-group label,
#fluentform_4 label,
#fluentform_4 label span {
    color: #ffffff !important;
}

/* 专门强制必填项的红星号旁边的文字以及星号本身 */
.fluentform .ff-el-is-required.asterisk,
.fluentform .ff-el-is-required .ff-el-group label::after,
.fluentform .asterisk,
#fluentform_4 .asterisk {
    color: #ffffff !important;
}

/* 确保输入框顶部的 Section Title 也是白色 */
.fluentform .ff-section-title,
.fluentform .ff-section-subtitle {
    color: #ffffff !important;
}

/* =================================================================
   Mobile Menu Text Color Fix
   修复移动端菜单文字颜色 - 白色背景上使用黑色文字
   ================================================================= */
/* 移动端菜单链接文字颜色 */
.mobile-nav a,
.mobile-nav li a,
.mobile-nav .menu-item a,
.mobile-nav .sub-menu-dropdown a,
.whb-mobile-nav a,
.whb-mobile-nav li a,
.whb-mobile-nav .menu-item a,
.wd-nav-mobile a,
.wd-nav-mobile li a,
.wd-nav-mobile .menu-item a {
    color: #000000 !important;
}

/* 移动端菜单项的文字 */
.mobile-nav li,
.mobile-nav .menu-item,
.whb-mobile-nav li,
.whb-mobile-nav .menu-item,
.wd-nav-mobile li,
.wd-nav-mobile .menu-item {
    color: #000000 !important;
}

/* 移动端菜单悬停状态 */
.mobile-nav a:hover,
.mobile-nav li a:hover,
.whb-mobile-nav a:hover,
.whb-mobile-nav li a:hover,
.wd-nav-mobile a:hover,
.wd-nav-mobile li a:hover {
    color: #333333 !important;
}

/* 移动端子菜单 */
.mobile-nav .sub-menu a,
.mobile-nav .sub-menu-dropdown a,
.whb-mobile-nav .sub-menu a,
.wd-nav-mobile .sub-menu a {
    color: #000000 !important;
}

/* 移动端菜单图标颜色（如果有） */
.mobile-nav .nav-link-icon,
.whb-mobile-nav .nav-link-icon,
.wd-nav-mobile .nav-link-icon {
    color: #000000 !important;
}

/* 移动端汉堡菜单打开后的菜单 */
.wd-dropdown-menu a,
.wd-dropdown-menu li,
.wd-dropdown .wd-nav-mobile a {
    color: #000000 !important;
}

/* =================================================================
   End of Mobile Menu Text Color Fix
   ================================================================= */