@charset "UTF-8";
/* =============================================================================
 * contact.css — 盛家房产 · 联系我们（/contact）
 *
 * 数据源：
 *   横幅图  广告位「联系我们banner」（@ad('contact_banner')，只取图）
 *   门店    后台「联系方式管理」→ $contacts（控制器 site_contacts()）
 * 栅格：沿用 sjfc-core.css 的 .sj-wrap（1400px 居中）
 * 断点：1440 / 1200 / 992 / 768（PC 为主，逐级收敛到单栏）
 *
 * 版块索引
 *   一、横幅        .ct-hero
 *   二、三地门店    .ct-stores / .ct-store
 *   三、留言与侧栏  .ct-main / .ct-form-card / .ct-side
 *   四、通用按钮    .ct-btn
 *   五、底部导流    .ct-navstrip
 *   六、空态与反馈层 .ct-empty / .ct-toast / .ct-modal
 *   七、断点
 *
 * 注：本页不引用 inner.css 的 .pg-* 组件 —— 那套组件取的是那拉泉遗留的
 *     --nl-primary（绿色），放到房产站上按钮会变绿，与全站蓝/红不符。
 * ========================================================================== */

/* =============================================================================
 * 令牌
 * ========================================================================== */
.ct {
    --ct-blue: #01539c;
    --ct-blue-d: #08447f;
    --ct-blue-n: #002068;
    --ct-red: #cf0000;
    --ct-ink: #12203c;
    --ct-text: #4a5567;
    --ct-gray: #7a8798;
    --ct-mute: #8a94a4;
    --ct-line: #e6e9ef;
    --ct-soft: #f5f8fb;
    --ct-ease: cubic-bezier(.22, .61, .36, 1);
    overflow: hidden;
}

/* =============================================================================
 * 一、横幅
 * ============================================================================= */
.ct-hero {
    position: relative;
    display: flex;
    align-items: center;
    /* 高度跟着背景图走：横幅是 1920×300 的成品图条，
       aspect-ratio 与图片一致 → 整幅按宽度等比缩放、不裁切不放大；
       min-height 兜住图片原始高度（300px），窄屏也不至于把文案挤爆。
       width 必须写死 100%：只有宽度先定下来，aspect-ratio 才会按宽度算高度，
       否则浏览器会反过来拿 min-height 乘比例，得出 1920px 的固定宽度把横幅撑破 */
    aspect-ratio: 1920 / 300;
    width: 100%;
    min-height: 300px;
    background-color: #0b3f72;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    color: #fff;
}

/* 左深右浅的横向渐变：文案压在深色一侧，图片右侧细节仍可见 */
.ct-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(100deg, rgba(6, 33, 61, .90) 0%, rgba(6, 33, 61, .72) 46%, rgba(6, 33, 61, .46) 100%);
}

.ct-hero > .sj-wrap {
    position: relative;
    z-index: 2;
    width: 100%;
}

/* 文案总高按图片原始高度（300px）倒推：
   30 + (14+12) + 13 + (12+46) + (14+27) + (18+46) + 26 = 258 */
.ct-hero__inner {
    padding: 30px 0 26px;
}

.ct-crumb {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
    font-size: 14px;
    line-height: 1;
    color: rgba(255, 255, 255, .72);
}

.ct-crumb a {
    color: rgba(255, 255, 255, .86);
    transition: color .2s var(--ct-ease);
}

.ct-crumb a:hover {
    color: #fff;
}

.ct-crumb i {
    font-style: normal;
    opacity: .5;
}

.ct-hero__kicker {
    font-size: 13px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: 2.4px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .62);
}

.ct-hero__title {
    margin-top: 12px;
    font-size: 40px;
    font-weight: 700;
    line-height: 1.14;
    letter-spacing: 1px;
    color: #fff;
}

.ct-hero__sub {
    margin-top: 14px;
    font-size: 18px;
    font-weight: 700;
    line-height: 1.5;
    color: #fff;
}

.ct-hero__acts {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 14px;
    margin-top: 18px;
}

.ct-hero__tel {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    height: 46px;
    padding: 0 20px 0 16px;
    border-radius: 9px;
    background: var(--ct-red);
    color: #fff;
    box-shadow: 0 10px 24px rgba(207, 0, 0, .28);
    transition: transform .26s var(--ct-ease), box-shadow .26s var(--ct-ease);
}

.ct-hero__tel:hover {
    transform: translateY(-2px);
    box-shadow: 0 14px 30px rgba(207, 0, 0, .36);
}

.ct-hero__tel-ico {
    display: inline-flex;
    width: 22px;
    height: 22px;
}

.ct-hero__tel-ico svg {
    width: 100%;
    height: 100%;
}

.ct-hero__tel-txt {
    display: flex;
    flex-direction: column;
    gap: 2px;
    text-align: left;
}

.ct-hero__tel-txt b {
    font-size: 17px;
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: .4px;
}

.ct-hero__tel-txt i {
    font-size: 11.5px;
    font-style: normal;
    line-height: 1;
    color: rgba(255, 255, 255, .78);
}

.ct-hero__ghost {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 46px;
    padding: 0 20px;
    border: 1px solid rgba(255, 255, 255, .42);
    border-radius: 9px;
    font-size: 14.5px;
    color: #fff;
    transition: background-color .24s var(--ct-ease), border-color .24s var(--ct-ease);
}

.ct-hero__ghost svg {
    width: 16px;
    height: 16px;
}

.ct-hero__ghost:hover {
    background: rgba(255, 255, 255, .14);
    border-color: rgba(255, 255, 255, .78);
}

/* =============================================================================
 * 二、三地门店
 * ============================================================================= */
.ct-stores {
    padding: 64px 0 68px;
    background: var(--ct-soft);
    /* 锚点落位由 sjfc-core.css 的 [id] { scroll-margin-top: 74px } 统一处理，
       这里不再覆盖，免得与全站页头高度走散 */
}

.ct-head {
    max-width: 760px;
    margin: 0 auto 34px;
    text-align: center;
}

.ct-head__badge {
    font-size: 13px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: 2.4px;
    text-transform: uppercase;
    color: var(--ct-blue);
}

.ct-head__title {
    margin-top: 12px;
    font-size: 32px;
    font-weight: 700;
    line-height: 1.3;
    color: var(--ct-ink);
}

.ct-head__sub {
    margin-top: 12px;
    font-size: 15px;
    line-height: 1.8;
    color: var(--ct-gray);
}

.ct-store-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
}

.ct-store {
    display: flex;
    flex-direction: column;
    padding: 26px 26px 24px;
    background: #fff;
    border: 1px solid var(--ct-line);
    border-radius: 16px;
    box-shadow: 0 2px 10px rgba(15, 36, 71, .05);
    transition: transform .3s var(--ct-ease), box-shadow .3s var(--ct-ease), border-color .3s var(--ct-ease);
}

.ct-store:hover {
    transform: translateY(-4px);
    border-color: #cfe0f5;
    box-shadow: 0 18px 40px rgba(15, 36, 71, .10);
}

.ct-store__top {
    display: flex;
    align-items: center;
    gap: 12px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--ct-line);
}

/* 大号浅色序号：给三张同构卡片一个可区分的视觉锚点，不抢公司名 */
.ct-store__no {
    flex: none;
    font-family: "Bahnschrift", "DIN Alternate", "Segoe UI", Consolas, monospace;
    font-size: 26px;
    font-weight: 700;
    line-height: 1;
    color: rgba(1, 83, 156, .18);
}

.ct-store__name {
    font-size: 19px;
    font-weight: 700;
    line-height: 1.4;
    color: var(--ct-ink);
}

.ct-store__addr {
    display: flex;
    gap: 10px;
    margin-top: 16px;
}

.ct-store__ic {
    flex: none;
    width: 20px;
    height: 20px;
    margin-top: 2px;
    color: var(--ct-blue);
}

.ct-store__ic svg {
    width: 100%;
    height: 100%;
}

.ct-store__addr p {
    font-size: 14px;
    line-height: 1.75;
    color: var(--ct-text);
}

.ct-store__rows {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 16px;
}

.ct-store__rows li {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    font-size: 14px;
}

.ct-store__rows li > i {
    min-width: 0;
    font-style: normal;
    line-height: 1.6;
    color: var(--ct-mute);
}

.ct-store__rows li > a,
.ct-store__rows li > b {
    flex: none;
    font-weight: 400;
    color: var(--ct-text);
}

.ct-store__rows li > a {
    transition: color .2s var(--ct-ease);
}

.ct-store__rows li > a:hover {
    color: var(--ct-blue);
    text-decoration: underline;
}

/* 主号（业务联系人那一行）加粗放大：联系页最该被一眼看到的就是它 */
.ct-store__rows li.is-main > a {
    font-size: 18px;
    font-weight: 700;
    letter-spacing: .4px;
}

.ct-store__qr {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 16px;
    padding: 12px;
    border-radius: 12px;
    background: var(--ct-soft);
}

.ct-store__qr img {
    flex: none;
    width: 76px;
    height: 76px;
    border-radius: 8px;
}

.ct-store__qr span {
    font-size: 12.5px;
    line-height: 1.7;
    color: var(--ct-gray);
}

.ct-store__acts {
    display: flex;
    gap: 10px;
    margin-top: auto;
    padding-top: 20px;
}

.ct-store__acts .ct-btn {
    flex: 1;
}

/* =============================================================================
 * 三、在线留言 + 侧栏
 * ============================================================================= */
.ct-main {
    padding: 72px 0 76px;
    background: #fff;
}

.ct-main__grid {
    display: grid;
    grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr);
    gap: 34px;
    align-items: start;
}

.ct-form-card {
    padding: 30px 32px 28px;
    background: var(--ct-soft);
    border: 1px solid var(--ct-line);
    border-radius: 18px;
}

.ct-form-card__title {
    margin-top: 12px;
    font-size: 26px;
    font-weight: 700;
    line-height: 1.35;
    color: var(--ct-ink);
}

.ct-form-card__sub {
    margin-top: 10px;
    font-size: 14.5px;
    line-height: 1.8;
    color: var(--ct-gray);
}

.ct-form {
    margin-top: 22px;
}

.ct-form__row {
    /* 用 grid 而不是 flex：控件与「控件下方的错误说明」天然落在同一列，
       不必再包一层容器，错误文案也不会被挤到 label 右侧去 */
    display: grid;
    grid-template-columns: 88px minmax(0, 1fr);
    align-items: start;
    gap: 0 14px;
    margin-bottom: 14px;
}

.ct-form__row > label {
    grid-column: 1;
    padding-top: 11px;
    font-size: 13.5px;
    line-height: 1.5;
    color: var(--ct-text);
    text-align: right;
}

/* 控件与错误说明固定第二列（type=hidden 的 input 不参与排版） */
.ct-form__row > input,
.ct-form__row > select,
.ct-form__row > textarea,
.ct-form__err {
    grid-column: 2;
}

.ct-form__row > label b {
    color: #e11d48;
}

.ct-form__row input,
.ct-form__row select,
.ct-form__row textarea {
    width: 100%;
    min-width: 0;
    padding: 10px 14px;
    font-size: 14px;
    font-family: inherit;
    line-height: 1.6;
    color: #333;
    background: #fff;
    border: 1px solid var(--ct-line);
    border-radius: 9px;
    outline: none;
    transition: border-color .2s, box-shadow .2s, background-color .2s;
}

.ct-form__row input::placeholder,
.ct-form__row textarea::placeholder {
    color: #b6bfcd;
}

.ct-form__row input:focus,
.ct-form__row select:focus,
.ct-form__row textarea:focus {
    border-color: var(--ct-blue);
    box-shadow: 0 0 0 3px rgba(1, 83, 156, .10);
}

.ct-form__row textarea {
    min-height: 112px;
    resize: vertical;
}

/* ── 字段级错误：内联说明 + 输入框出错态 ───────────────────────────────── */
/* 默认 display:none，不占位（否则整张表单会被撑高一截）；出错时才展开 */
.ct-form__err {
    display: none;
    margin-top: 7px;
    font-size: 12.5px;
    line-height: 1.6;
    color: #d92d20;
}

.ct-form__err.is-on {
    display: flex;
    align-items: flex-start;
    gap: 6px;
}

/* 前缀小圆点：比纯文字更有指向性，也不会像「!」那样咋呼 */
.ct-form__err.is-on::before {
    content: "";
    flex: none;
    width: 5px;
    height: 5px;
    margin-top: 7px;
    border-radius: 50%;
    background: currentColor;
}

/* 出错态：暖红描边 + 一档软红底 + 外发光，比单纯变红更像「被指出来了」 */
.ct-form__row input.is-invalid,
.ct-form__row select.is-invalid,
.ct-form__row textarea.is-invalid {
    border-color: #f0a3a0;
    background: #fffaf9;
    box-shadow: 0 0 0 3px rgba(217, 45, 32, .09);
}

.ct-form__row input.is-invalid:focus,
.ct-form__row select.is-invalid:focus,
.ct-form__row textarea.is-invalid:focus {
    border-color: #d92d20;
    box-shadow: 0 0 0 3px rgba(217, 45, 32, .16);
}

/* ── 提交中态：转圈 + 降透明度，防连点重复提交 ─────────────────────────── */
.ct-btn.is-loading {
    pointer-events: none;
    opacity: .84;
}

.ct-btn.is-loading::before {
    content: "";
    width: 14px;
    height: 14px;
    border: 2px solid rgba(255, 255, 255, .4);
    border-top-color: #fff;
    border-radius: 50%;
    animation: ct-spin .7s linear infinite;
}

@keyframes ct-spin {
    to {
        transform: rotate(360deg);
    }
}

/* 下拉自绘箭头：原生箭头各浏览器观感不一 */
.ct-form__row select {
    padding-right: 38px;
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237a8798' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    background-size: 12px 12px;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    cursor: pointer;
}

/* 手机号 + 需求 并排；窄屏自动塌成一列 */
.ct-form__pair {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 22px;
}

.ct-form__foot {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-top: 18px;
    padding-left: 102px;
}

.ct-form__foot > span {
    font-size: 12.5px;
    line-height: 1.7;
    color: var(--ct-mute);
}

/* ── 侧栏 ─────────────────────────────────────────────────────────────── */
.ct-side {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.ct-side__card {
    padding: 26px 26px 24px;
    background: #fff;
    border: 1px solid var(--ct-line);
    border-radius: 16px;
    box-shadow: 0 2px 10px rgba(15, 36, 71, .05);
}

/* 拨号卡：深蓝实底，和页面里其它「打电话」入口形成同一套视觉语言 */
.ct-side__card--dial {
    background: linear-gradient(135deg, #0a4f92 0%, var(--ct-blue-d) 55%, #063460 100%);
    border-color: transparent;
    box-shadow: 0 14px 34px rgba(8, 68, 127, .24);
    color: #fff;
}

.ct-side__kicker {
    font-size: 12.5px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: 2.2px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .58);
}

.ct-side__title {
    margin-top: 10px;
    font-size: 21px;
    font-weight: 700;
    line-height: 1.35;
    color: var(--ct-ink);
}

.ct-side__card--dial .ct-side__title {
    color: #fff;
}

.ct-dial {
    margin-top: 18px;
    display: flex;
    flex-direction: column;
}

.ct-dial li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 11px 0;
    border-top: 1px solid rgba(255, 255, 255, .14);
}

.ct-dial li:first-child {
    border-top: 0;
    padding-top: 0;
}

.ct-dial__name {
    min-width: 0;
    font-size: 13.5px;
    line-height: 1.6;
    color: rgba(255, 255, 255, .76);
}

.ct-dial__tel {
    flex: none;
    font-family: "Bahnschrift", "DIN Alternate", "Segoe UI", Consolas, monospace;
    font-size: 19px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: .4px;
    color: #fff;
    transition: color .2s var(--ct-ease);
}

.ct-dial__tel:hover {
    color: #ffd66b;
    text-decoration: underline;
}

.ct-side__note {
    margin-top: 16px;
    font-size: 12.5px;
    line-height: 1.75;
    color: rgba(255, 255, 255, .62);
}

.ct-promise {
    margin-top: 18px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.ct-promise li {
    display: flex;
    gap: 12px;
}

.ct-promise__ic {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 11px;
    background: #eef4fb;
    color: var(--ct-blue);
}

.ct-promise__ic svg {
    width: 20px;
    height: 20px;
}

.ct-promise b {
    display: block;
    font-size: 14.5px;
    font-weight: 700;
    line-height: 1.6;
    color: var(--ct-ink);
}

.ct-promise i {
    display: block;
    margin-top: 3px;
    font-size: 13px;
    font-style: normal;
    line-height: 1.7;
    color: var(--ct-gray);
}

.ct-side__link {
    display: inline-block;
    margin-top: 20px;
    font-size: 13.5px;
    font-weight: 700;
    color: var(--ct-blue);
}

.ct-side__link:hover {
    text-decoration: underline;
}

/* =============================================================================
 * 四、通用按钮
 * ============================================================================= */
.ct-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 44px;
    padding: 0 22px;
    border: 1px solid transparent;
    border-radius: 9px;
    font-family: inherit;
    font-size: 14.5px;
    line-height: 1;
    cursor: pointer;
    transition: background-color .24s var(--ct-ease), color .24s var(--ct-ease),
                border-color .24s var(--ct-ease), box-shadow .24s var(--ct-ease), transform .24s var(--ct-ease);
}

.ct-btn--primary {
    background: var(--ct-red);
    color: #fff;
}

.ct-btn--primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 26px rgba(207, 0, 0, .28);
}

.ct-btn--ghost {
    background: #fff;
    border-color: var(--ct-line);
    color: var(--ct-text);
}

.ct-btn--ghost:hover {
    border-color: var(--ct-blue);
    color: var(--ct-blue);
}

.ct-btn--ghost.is-done {
    background: #f0fdf4;
    border-color: #bbf7d0;
    color: #15803d;
}

.ct-btn--ghost.is-fail {
    background: #fffbeb;
    border-color: #fde68a;
    color: #b45309;
}

/* =============================================================================
 * 五、底部导流
 * ============================================================================= */
.ct-navstrip {
    padding: 0 0 78px;
    background: #fff;
}

.ct-navstrip__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
}

.ct-navstrip__item {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 20px 22px;
    background: var(--ct-soft);
    border: 1px solid var(--ct-line);
    border-radius: 14px;
    transition: transform .26s var(--ct-ease), border-color .26s var(--ct-ease), background-color .26s var(--ct-ease);
}

.ct-navstrip__item:hover {
    transform: translateY(-3px);
    background: #fff;
    border-color: #cfe0f5;
}

.ct-navstrip__no {
    flex: none;
    font-family: "Bahnschrift", "DIN Alternate", "Segoe UI", Consolas, monospace;
    font-size: 15px;
    font-weight: 700;
    color: rgba(1, 83, 156, .34);
}

.ct-navstrip__body {
    min-width: 0;
}

.ct-navstrip__body b {
    display: block;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.5;
    color: var(--ct-ink);
}

.ct-navstrip__body i {
    display: block;
    margin-top: 2px;
    font-size: 13px;
    font-style: normal;
    line-height: 1.6;
    color: var(--ct-gray);
}

.ct-navstrip__arrow {
    margin-left: auto;
    font-size: 18px;
    color: var(--ct-blue);
    transition: transform .26s var(--ct-ease);
}

.ct-navstrip__item:hover .ct-navstrip__arrow {
    transform: translateX(4px);
}

/* =============================================================================
 * 六、空态与提示
 * ============================================================================= */
.ct-empty {
    padding: 46px 24px;
    text-align: center;
    background: #fff;
    border: 1px dashed var(--ct-line);
    border-radius: 16px;
}

.ct-empty b {
    display: block;
    font-size: 17px;
    color: var(--ct-ink);
}

.ct-empty span {
    display: block;
    margin-top: 8px;
    font-size: 13.5px;
    line-height: 1.8;
    color: var(--ct-mute);
}

/* ── 轻提示：字段校验不通过时从顶部滑下（替代浏览器原生那枚气泡） ─────── */
.ct-toast {
    position: fixed;
    /* 压在站内所有层级之上（主题最高 .sj-header 是 80，客服插件另算，故给足余量） */
    z-index: 99990;
    top: 86px;
    left: 50%;
    display: flex;
    align-items: center;
    gap: 11px;
    max-width: min(432px, calc(100vw - 32px));
    padding: 12px 14px;
    background: rgba(255, 255, 255, .97);
    border: 1px solid #f7d8d5;
    border-radius: 13px;
    box-shadow: 0 18px 44px rgba(15, 36, 71, .16), 0 2px 6px rgba(15, 36, 71, .06);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    overflow: hidden;
    opacity: 0;
    transform: translate(-50%, -14px);
    transition: opacity .24s var(--ct-ease), transform .24s var(--ct-ease);
}

/* 注意：hidden 的 UA 规则是 display:none，会被上面的 display:flex 反向覆盖，必须显式压回去 */
.ct-toast[hidden] {
    display: none;
}

.ct-toast.is-open {
    opacity: 1;
    transform: translate(-50%, 0);
}

.ct-toast__ic {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 9px;
    color: #d92d20;
    background: #fef3f2;
}

.ct-toast__ic svg {
    width: 17px;
    height: 17px;
}

.ct-toast__body {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.ct-toast__body b {
    font-size: 13.5px;
    font-weight: 700;
    line-height: 1.5;
    color: var(--ct-ink);
}

.ct-toast__body i {
    font-size: 12.5px;
    font-style: normal;
    line-height: 1.6;
    color: #a05a56;
}

.ct-toast__x {
    flex: none;
    align-self: flex-start;
    width: 22px;
    height: 22px;
    margin-left: 2px;
    font-size: 17px;
    line-height: 1;
    color: #b8c0cd;
    background: none;
    border: 0;
    border-radius: 6px;
    cursor: pointer;
    transition: color .2s, background-color .2s;
}

.ct-toast__x:hover {
    color: var(--ct-ink);
    background: var(--ct-soft);
}

/* 底边进度条：把「几秒后自动消失」这件事可视化 */
.ct-toast__bar {
    position: absolute;
    left: 0;
    bottom: 0;
    height: 2px;
    background: linear-gradient(90deg, #e5484d, #f6b3ad);
    animation: ct-toast-bar 3.4s linear forwards;
}

@keyframes ct-toast-bar {
    from {
        width: 100%;
    }

    to {
        width: 0;
    }
}

/* ── 结果弹窗：提交成功 / 被驳回，都给一个明确交代 ─────────────────────── */
.ct-modal {
    position: fixed;
    inset: 0;
    /* 弹窗必须压过轻提示，也压过站内一切浮动件（客服按钮等） */
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
}

.ct-modal[hidden] {
    display: none;
}

.ct-modal__mask {
    position: absolute;
    inset: 0;
    background: rgba(9, 22, 44, .52);
    -webkit-backdrop-filter: blur(3px);
    backdrop-filter: blur(3px);
    opacity: 0;
    transition: opacity .26s var(--ct-ease);
}

.ct-modal__card {
    position: relative;
    width: min(440px, 100%);
    max-height: calc(100vh - 48px);
    padding: 36px 34px 28px;
    overflow-y: auto;
    text-align: center;
    background: #fff;
    border-radius: 20px;
    box-shadow: 0 30px 70px rgba(6, 24, 50, .28);
    opacity: 0;
    transform: translateY(16px) scale(.97);
    transition: opacity .26s var(--ct-ease), transform .3s var(--ct-ease);
}

.ct-modal.is-open .ct-modal__mask {
    opacity: 1;
}

.ct-modal.is-open .ct-modal__card {
    opacity: 1;
    transform: none;
}

.ct-modal__ring {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 62px;
    height: 62px;
    border-radius: 50%;
    color: #15803d;
    background: #ecfdf3;
    box-shadow: 0 0 0 8px rgba(21, 128, 61, .07);
}

.ct-modal__ic {
    width: 30px;
    height: 30px;
}

.ct-modal__ic--err {
    display: none;
}

/* 成功：对勾按描边「画」出来（.5s，克制的一点点动效） */
.ct-modal.is-open .ct-modal__ic--ok path {
    stroke-dasharray: 26;
    stroke-dashoffset: 26;
    animation: ct-draw .5s .16s var(--ct-ease) forwards;
}

@keyframes ct-draw {
    to {
        stroke-dashoffset: 0;
    }
}

/* 驳斥：图标环轻微回弹，比静态红圈更抓眼 */
.ct-modal--err .ct-modal__ring {
    color: #d92d20;
    background: #fef3f2;
    box-shadow: 0 0 0 8px rgba(217, 45, 32, .07);
}

.ct-modal--err .ct-modal__ic--ok {
    display: none;
}

.ct-modal--err .ct-modal__ic--err {
    display: block;
}

.ct-modal--err.is-open .ct-modal__ring {
    animation: ct-pulse .5s var(--ct-ease);
}

@keyframes ct-pulse {
    0% {
        transform: scale(.9);
    }

    60% {
        transform: scale(1.05);
    }

    100% {
        transform: scale(1);
    }
}

.ct-modal__title {
    margin-top: 20px;
    font-size: 22px;
    font-weight: 700;
    line-height: 1.4;
    color: var(--ct-ink);
}

.ct-modal__desc {
    margin-top: 10px;
    font-size: 14px;
    line-height: 1.8;
    color: var(--ct-gray);
    /* 让末行不要只剩一两个字（不支持的老浏览器自动忽略，不影响布局） */
    text-wrap: pretty;
}

/* 服务单号 / 回电号码 / 回电时间 */
.ct-modal__list {
    margin-top: 18px;
    background: var(--ct-soft);
    border: 1px solid var(--ct-line);
    border-radius: 12px;
    text-align: left;
}

.ct-modal__list[hidden] {
    display: none;
}

.ct-modal__list li {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 14px;
    padding: 10px 15px;
    font-size: 13.5px;
    line-height: 1.7;
    color: var(--ct-gray);
    border-top: 1px solid var(--ct-line);
}

.ct-modal__list li:first-child {
    border-top: 0;
}

.ct-modal__list li span {
    flex: none;
}

.ct-modal__list li b {
    font-weight: 700;
    color: var(--ct-ink);
    text-align: right;
    word-break: break-all;
}

.ct-modal__acts {
    display: flex;
    gap: 12px;
    margin-top: 24px;
}

.ct-modal__acts .ct-btn {
    flex: 1;
}

.ct-modal__acts a[hidden] {
    display: none;
}

/* 弹窗打开时锁住背景滚动 */
html.ct-modal-lock {
    overflow: hidden;
}

/* =============================================================================
 * 七、断点
 * ============================================================================= */

/* 1440 及以下：横幅标题与门店卡间距收紧 */
@media (max-width: 1440px) {
    .ct-hero__title {
        font-size: 36px;
    }

    .ct-store-grid {
        gap: 20px;
    }
}

/* 1200 及以下：门店卡内边距收紧，表单并排字段塌成一列 */
@media (max-width: 1200px) {
    .ct-hero__inner {
        padding: 26px 0 22px;
    }

    .ct-hero__title {
        font-size: 34px;
    }

    .ct-store {
        padding: 22px 20px 20px;
    }

    .ct-main {
        padding: 62px 0 66px;
    }

    .ct-main__grid {
        gap: 26px;
    }

    .ct-form-card {
        padding: 26px 24px 24px;
    }

    .ct-form__pair {
        grid-template-columns: minmax(0, 1fr);
    }

    .ct-form__foot {
        padding-left: 0;
        flex-wrap: wrap;
    }
}

/* 992 及以下：主栏塌成单列，门店卡收成两列（第三张通栏），避免整屏一张卡显得空 */
@media (max-width: 992px) {
    .ct-hero__inner {
        padding: 24px 0 20px;
    }

    .ct-store-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    /* 三张门店卡：两列时最后一张通栏，不留孤立空位 */
    .ct-store:last-child {
        grid-column: span 2;
    }

    .ct-main__grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .ct-navstrip__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .ct-navstrip__item:last-child {
        grid-column: span 2;
    }
}

/* 768 及以下：表单单列标签上移，横幅按钮整行铺满 */
@media (max-width: 768px) {
    .ct-hero__title {
        font-size: 28px;
    }

    .ct-hero__sub {
        font-size: 15px;
    }

    .ct-hero__acts {
        gap: 10px;
    }

    .ct-hero__tel,
    .ct-hero__ghost {
        width: 100%;
        justify-content: center;
    }

    /* 标签上移：栅格收成一列，控件与错误说明都回到第一列 */
    .ct-form__row {
        grid-template-columns: minmax(0, 1fr);
        gap: 6px 0;
    }

    .ct-form__row > label {
        grid-column: 1;
        padding-top: 0;
        text-align: left;
    }

    .ct-form__row > input,
    .ct-form__row > select,
    .ct-form__row > textarea,
    .ct-form__err {
        grid-column: 1;
    }

    /* 轻提示在窄屏贴边铺满，避免左右溢出 */
    .ct-toast {
        top: 76px;
        left: 16px;
        right: 16px;
        max-width: none;
        transform: translate(0, -14px);
    }

    .ct-toast.is-open {
        transform: translate(0, 0);
    }

    .ct-modal {
        padding: 16px;
    }

    .ct-modal__card {
        padding: 30px 22px 24px;
        border-radius: 17px;
    }

    .ct-modal__title {
        font-size: 19.5px;
    }

    .ct-store__rows li {
        flex-wrap: wrap;
    }

    .ct-store-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .ct-store:last-child {
        grid-column: auto;
    }

    .ct-navstrip__grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .ct-navstrip__item:last-child {
        grid-column: auto;
    }
}

/* 低动效偏好：去掉位移，只保留颜色反馈 */
@media (prefers-reduced-motion: reduce) {
    .ct-store,
    .ct-btn,
    .ct-navstrip__item,
    .ct-navstrip__arrow,
    .ct-hero__tel,
    .ct-toast,
    .ct-modal__mask,
    .ct-modal__card {
        transition: none;
    }

    .ct-store:hover,
    .ct-btn--primary:hover,
    .ct-navstrip__item:hover {
        transform: none;
    }

    /* 对勾的描边动画关掉后要把 dashoffset 归零，否则永远停在「没画出来」 */
    .ct-modal.is-open .ct-modal__ic--ok path {
        animation: none;
        stroke-dashoffset: 0;
    }

    .ct-modal--err.is-open .ct-modal__ring,
    .ct-btn.is-loading::before {
        animation: none;
    }

    /* 自动消失倒计时条动的就是「动效」，这里直接不显示 */
    .ct-toast__bar {
        display: none;
    }
}