/* @ai Contact Us page two-column form styles */
/* @scope catalog/view/theme/fastor/template/information/contact.twig */
/* @date 20250716 */

.contact-page {
    padding: 0;
    padding-bottom: 27px;
    background-color: #fff;
}

.contact-section-title {
    margin: 0 0 24px;
    font-size: 22px;
    font-weight: 600;
    color: #1a1a2e;
}

#contact-form>.row {
    display: flex;
}

#contact-form .contact-col {
    padding: 0;
    flex: 1;
}

#contact-form .contact-col:first-child {
    margin-right: 40px;
}

.contact-col+.contact-col {
    margin-top: 32px;
}

@media (min-width: 768px) {
    .contact-col+.contact-col {
        margin-top: 0;
    }
}

.contact-form .form-group {
    margin-bottom: 24px;
}

/* @ai Floating label input styles (same as quickcheckout) */
.contact-form .edit-info-item {
    position: relative;
    box-sizing: border-box;
    height: 54px;
    padding: 4px 8px;
    border: 1px solid #CCCFD7;
    border-radius: 4px;
}

.contact-form .textarea-item {
    height: 158px;
}

.contact-form .edit-info-label {
    position: absolute;
    top: 4px;
    left: 12px;
    z-index: 1;
    padding: 0;
    font-size: 14px;
    color: #B3B7C1;
    line-height: 22px;
    transition: all 0.3s;
    pointer-events: none;
}

.contact-form .edit-info-item.empty .edit-info-label {
    top: 0;
    font-size: 16px;
    line-height: 56px;
    cursor: text;
}

.contact-form .edit-info-item.required .edit-info-label::after {
    content: "*";
    position: absolute;
    top: 0;
    right: -10px;
    font-size: 14px;
    color: #d9534f;
    line-height: 22px;
    transition: all 0.3s;
}

.contact-form .edit-info-item.required.empty .edit-info-label::after {
    font-size: 16px;
    line-height: 56px;
}

.contact-form .edit-info-value[type="text"],
.contact-form .edit-info-value[type="email"],
.contact-form .edit-info-value[type="tel"] {
    position: relative;
    z-index: 10;
    display: block;
    width: 100%;
    height: 24px;
    margin: 22px 0 0 0;
    padding: 0;
    font-size: 16px;
    color: #141737;
    line-height: 24px;
    background-color: transparent;
    border: none;
    border-radius: 0;
    transition: all 0.3s;
}

.contact-form .edit-info-value[type="text"]:focus,
.contact-form .edit-info-value[type="email"]:focus,
.contact-form .edit-info-value[type="tel"]:focus {
    background-color: transparent;
    outline: none;
}

/* @ai Meeting datetime picker inside floating label item */
.contact-form .meeting-datetime-item {
    padding: 0;
}

.contact-form .meeting-datetime {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
    min-height: 56px;
    padding: 4px 12px;
    border: none;
    border-radius: 4px;
    background: transparent;
}

.contact-form .meeting-datetime-input {
    flex: 1;
    height: 24px;
    margin: 22px 0 0 0;
    padding: 0;
    font-size: 16px;
    color: #141737;
    line-height: 24px;
    background: transparent;
    border: none;
    cursor: pointer;
}

.contact-form .meeting-datetime-item.empty .meeting-datetime-input {
    height: 46px !important;
    margin-top: 0 !important;
}

.contact-form .meeting-calendar-btn {
    position: absolute;
    top: 50%;
    margin: 0;
    right: 4px;
    z-index: 20;
    transform: translateY(-50%);
    width: 14px;
    height: 14px;
    padding: 0;
    background: transparent !important;
    border: none;
    box-shadow: none;
}

.contact-form .meeting-calendar-btn .fa-calendar {
    font-size: 16px;
    color: #666C7C;
}

/* @ai Laydate popup tweaks */
.contact-form .layui-laydate {
    z-index: 9999;
}

.contact-form .layui-laydate-header {
    background-color: #009A9E;
    color: #fff;
}

.contact-form .layui-laydate-header i {
    color: #fff;
}

.contact-form .layui-laydate-content td.layui-this,
.contact-form .layui-laydate-list li.layui-this {
    background-color: #009A9E !important;
}

.contact-form .layui-laydate-footer span:hover {
    color: #009A9E;
}

.contact-form .edit-info-value::placeholder {
    color: #999;
}

.contact-form .edit-info-item.empty .edit-info-value {
    margin-top: 0;
}

/* @ai Select dropdown styles (same as quickcheckout) */
.contact-form .edit-info-item.select-info {
    padding: 0;
}

.contact-form .edit-info-item.select-info .select::after {
    display: none;
}

.contact-form .edit-info-selector {
    position: relative;
    z-index: 10;
    display: block;
    width: 100%;
    height: 54px;
    margin: 0;
    padding: 26px 38px 4px 12px;
    font-size: 16px;
    color: #141737;
    line-height: 24px;
    border: none;
    border-radius: 4px;
    background-color: transparent !important;
    transition: all 0.3s;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
}

.contact-form .edit-info-selector:focus {
    background-color: transparent;
    outline: none;
}

.contact-form .edit-info-item.empty .edit-info-selector {
    padding: 15px 38px 15px 12px;
}

.contact-form .selector-arrow {
    position: absolute;
    top: 20px;
    right: 12px;
    z-index: 20;
    font-size: 14px;
    color: #999;
    line-height: 1;
    cursor: pointer;
    pointer-events: none;
}

.contact-form .edit-info-selector option:disabled {
    color: #999;
}

/* @ai Textarea inside edit-info-item (no floating label, fills the 142px box) */
.contact-form .edit-info-item .contact-textarea {
    width: 100%;
    height: 174px;
    padding: 0;
    color: #141737;
    font-size: 16px;
    line-height: 24px;
    background: transparent;
    border: none;
    /* 原生 resize 交给自定义底部拖拽手柄接管（contact.js），避免两套拖拽冲突 */
    resize: none;
}

.contact-form .edit-info-item .contact-textarea:focus {
    outline: none;
}

/* @ai 留言框拖拽手柄：热区为贴底边整条横带（移入底线任意位置都可拖），右下角保留仿原生 resize 双斜线小图标，hover 变主题绿，交互逻辑在 contact.js */
.contact-form .textarea-resize-handle {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 20;
    height: 8px;
    cursor: ns-resize;
}

.contact-form .textarea-resize-handle i {
    position: absolute;
    right: 1px;
    bottom: 1px;
    width: 16px;
    height: 16px;
    /* 315deg 从右下角起算，条纹方向为“/”：贴角一短一长两道斜线，还原原生拖拽角标 */
    background: linear-gradient(315deg,
            transparent 3px, #999DA8 3px, #999DA8 4px,
            transparent 4px, transparent 7px, #999DA8 7px, #999DA8 8px,
            transparent 8px);
}

.contact-form .textarea-resize-handle:hover i {
    background: linear-gradient(315deg,
            transparent 3px, #009A9E 3px, #009A9E 4px,
            transparent 4px, transparent 7px, #009A9E 7px, #009A9E 8px,
            transparent 8px);
}

.contact-form .inquiry-textarea-group {
    position: relative;
}

.char-counter {
    position: absolute;
    right: 16px;
    bottom: 12px;
    font-size: 12px;
    color: #999;
    pointer-events: none;
}

.contact-form .captcha-group {
    margin-bottom: 0;
    height: 102px;
}

/* @ai Hide the captcha label "Please complete the captcha validation below" on the contact page only;
   reCAPTCHA Enterprise is score-based (invisible), so the hint text is redundant here */
.captcha-group .control-label {
    display: none;
}

#contact-form .btn-contact-submit {
    width: 100%;
    height: 54px;
    font-size: 18px !important;
    font-weight: 600;
    color: #fff;
    background-color: #009A9E;
    border: none;
    border-radius: 4px;
    margin: 0;
    transition: background-color 0.2s ease;
}

/* @ai Captcha gate: when reCAPTCHA is unsolved the button stays in a non-clickable grey state (the disabled attribute is controlled by contact.js) */
#contact-form .btn-contact-submit[disabled],
#contact-form .btn-contact-submit[disabled]:hover,
#contact-form .btn-contact-submit[disabled]:focus {
    background-color: #B9C2C2;
    color: #fff;
    cursor: not-allowed;
    opacity: 1;
}

/* Hidden by default; contact.js toggles it when it intercepts a submit before the captcha is solved */
#contact-form .captcha-error {
    display: none;
    margin-bottom: 8px;
}

.btn-contact-submit:hover,
.btn-contact-submit:focus {
    background-color: #328585;
    color: #fff;
}

.text-danger {
    margin-top: 6px;
    font-size: 13px;
    color: #d9534f;
}

/* @ai Interested Product card (entered from product detail page with product_id, filled by contact.js via AJAX) */
/* @scope catalog/view/theme/fastor/template/information/contact.twig */
/* @date 20260728 */
.interested-product-section {
    display: none;
}

.interested-product-section.loaded {
    display: block;
}

.interested-product-card {
    display: flex;
    margin-bottom: 24px;
    padding: 24px;
    height: 128px;
    background-color: #F7F7F8;
    border-radius: 4px;
}

.interested-product-image {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 112px;
    height: 80px;
    margin-right: 16px;
    background-color: #fff;
    border: 1px solid #E7E8EC;
    border-radius: 4px;
    overflow: hidden;
}

.interested-product-image img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.interested-product-info {
    flex: 1;
    min-width: 0;
}

.interested-product-name {
    display: block;
    font-size: 18px;
    font-weight: 500;
    color: #141737;
    line-height: 26px;
    /* 超出一行时截断并显示省略号（父级 .interested-product-info 已设 min-width:0 保证 flex 下可收缩） */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.interested-product-name:hover,
.interested-product-name:focus {
    color: #009A9E;
    text-decoration: none;
}

/* Product Code 行：商品型号展示，需一行内省略，避免过长型号撑碎卡片布局 */
.interested-product-code {
    margin-top: 4px;
    font-size: 14px;
    line-height: 22px;
    color: #666C7C;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}


.interested-product-tags {
    margin-top: 8px;
}

.interested-product-tag {
    display: inline-flex;
    align-items: center;
    margin-right: 8px;
    padding: 0 4px;
    font-size: 12px;
    line-height: 20px;
    color: #D33040;
    background-color: #FFEAE8;
    border-radius: 3px;
    white-space: nowrap;
}

.interested-product-tag img {
    width: 12px;
    height: 12px;
    margin-right: 4px;
}

.interested-product-price {
    margin-left: 16px;
    text-align: right;
    white-space: nowrap;
}

.interested-product-price .price-new {
    display: block;
    font-size: 18px;
    font-weight: 500;
    color: #D33040;
    line-height: 26px;
}

.interested-product-price .price-old {
    display: block;
    margin-top: 2px;
    font-size: 14px;
    color: #999DA8;
    text-decoration: line-through;
}

/* @ai Smaller "Inquiry Details" subtitle shown below the Interested Product card, red asterisk via pseudo element */
.contact-inquiry-subtitle {
    margin-bottom: 8px;
    font-size: 16px;
    line-height: 24px;
}

.contact-inquiry-subtitle::after {
    content: " *";
    color: #d9534f;
}

/* @ai 面板打开瞬间先隐藏，待 JS 注入 AM/PM 列并把 Hours 改成 12h 后再显示，消除跳变；
   用 visibility 而非 display，保留尺寸，laydate 的定位计算不受影响（jQuery :visible 仍为真，不影响注入） */
.layui-laydate.laydate-ampm-pending {
    visibility: hidden;
}

/* @ai AM/PM 作为 laydate .laydate-time-list 里额外的一列，位于 Hours 列左侧。
   ⚠️ 关键：本列列表容器用 <ul> 而非 <ol>。laydate 的 r()/滚动逻辑用
   `lay(h).find("ol")` 按位置映射列（0=时,1=分,2=秒），若本列用 <ol> 会被算成第 0 列，
   导致真正的 Hours 列被当成“分”来判禁用/取值（过去的小时变可选、点当前小时后锁死）。
   用 <ul> 后 laydate 完全忽略本列，只能自行补单元格样式（不再命中原生 ol li 选择器）。 */

/* @ai 本列容器复刻原生时间列的边框盒：原生每列 <ol> 有 border(左边框宽 0)，仅 first-child 补左边框；
   AM/PM 列用 <ul> 命中不到这些选择器，会没有边框而「浮」在盒外（用户反馈：AM/PM 没有边框）。
   这里给 <ul> 补完整 1px 边框：作为最左列它自带左边框，其右边框正好充当与 Hours 列的分隔线，
   三列拼成一个连续的边框盒。
   两项用 flex 在列高内固定垂直居中：绝不按选中小时的位置去动态偏移——之前那样做会让 AM/PM
   每次点时/分都重新定位，表现为「跟着选中的时上下抖动、永远贴着选择的时」（用户反馈图1~图4）。 */
.laydate-ampm-col ul {
    height: 181px;
    margin: 0;
    padding: 0;
    list-style: none;
    overflow: hidden;
    position: relative;
    border: 1px solid #e2e2e2;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* @ai 复刻原生 .laydate-time-list ol li 的单元格观感（选中/禁用颜色由全局 .layui-this / .laydate-disabled 类接管） */
.laydate-ampm-col ul li.laydate-ampm-item {
    height: 30px;
    line-height: 30px;
    text-align: center;
    cursor: pointer;
}

.laydate-ampm-col ul li.laydate-ampm-item:hover {
    background-color: #f6f6f6;
}

/* @ai Hours 列的 <li> 必须保留 laydate 原生的 24h 数字在 innerHTML 里（laydate 用
   `0 | li.innerHTML` 取小时值），所以用 text-indent 把原生数字移出可视区（不删文本），
   再用 ::before 叠上 data-h12 的 12 小时制标签；color:inherit 让标签自动跟随启用/禁用/选中颜色。
   ⚠️ transition:none 必须保留：laydate 给 .layui-laydate-list li 加了 `transition: all .3s`，
   点击后重建列表会把本规则的 text-indent 从 ~0 【动画】滑到 -9999px（历时 0.3s），
   期间原生 24h 数字会横向划过单元格、与 12h 标签重叠成「06→100 / 11→111」的重影抖动
   （用户反馈：点时/分后时的选项列表仍有抖动/重影）。关掉过渡即让原生数字瞬间隐藏，无重影。 */
.laydate-time-list li.laydate-ampm-relabel {
    position: relative;
    text-indent: -9999px;
    overflow: hidden;
    transition: none;
}

.laydate-time-list li.laydate-ampm-relabel::before {
    content: attr(data-h12);
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    text-indent: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: inherit;
}

/* @ai 时/分列改为真正可滚动（原生是 overflow:hidden + 点击后强制把选中项滚到第 3 行）：
   配合 contact.js 里的滚动位置还原，用户可自由滚动浏览全部时/分，且点击哪一格就停在哪一格，
   不再被强行拉到列中间（用户反馈：分选中的固定中间，不能点击哪里就定在哪里）。
   滚动条全程隐藏（含鼠标移入时）但保留滚动能力：兼容 Firefox / IE / WebKit 三类内核，
   避免滚动条占位挤压单元格、以及移入时突然出现造成的视觉跳动。 */
.laydate-time-list li ol {
    overflow-y: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.laydate-time-list li ol::-webkit-scrollbar {
    width: 0;
    height: 0;
    display: none;
}