/* ============================================================
   xy-responsive.css · 栀云(xiaoyue)主题 三端自适应增强层
   PC(≥1024) / 平板(768-1023) / 手机(≤767)
   遵循主题约定：新增覆盖，不改动源文件
   规则统一加 body 前缀提升优先级；仅在源规则使用 !important 时才使用 !important
   ============================================================ */

/* ===== 一、全局安全防护（所有视口） ===== */
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
html,
body {
  max-width: 100%;
  overflow-x: hidden;
}
body {
  width: 100%;
}

/* 媒体元素不超出容器（带类名的固定尺寸规则优先级更高，不受影响） */
img,
picture,
canvas,
video,
svg,
iframe {
  max-width: 100%;
}
img,
video {
  height: auto;
}

/* 长文本 / URL 换行，避免撑破容器 */
p, h1, h2, h3, h4, h5, h6, li, dd, blockquote, td, th, a, span, label, button, div {
  overflow-wrap: break-word;
}
/* 代码块换行 */
pre,
code,
tt,
kbd,
samp {
  white-space: pre-wrap;
  word-break: break-word;
  overflow-wrap: anywhere;
}
/* 表格不撑破容器（宽表需放入横向滚动容器） */
table {
  max-width: 100%;
}

/* 通用横向滚动容器（供页面直接使用） */
.xy-scroll-x,
.table-scroll-x {
  -webkit-overflow-scrolling: touch;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
}

/* 短信页规格卡内容固定 230px，卡片随视口变窄时会溢出 → 随卡片自适应 */
body .product-sms .standards-box .stand-cont {
  width: auto;
}

/* 旧版资讯横幅固定 910px，小屏随容器自适应 */
body .news-advert {
  max-width: 100%;
  height: auto;
}

/* 注：不全局重置 flex 子项 min-width（会破坏带固定最小宽度侧栏的收缩保护，
   导致侧栏被压垮、内容溢出）；需要收缩的具体容器在下方断点内单独设置。 */

/* ===== 二、平板 768–1023 ===== */
@media (min-width: 768px) and (max-width: 1023px) {
  /* 1) 恢复客服入口：桌面 Dock 样式在 ≥768 已生效，仅需显示容器 */
  body .aside-tools.xy-service-float {
    display: block !important;
  }

  /* 2) 旧版规格卡片：两列排布，避免 25% 宽卡片挤压内容 */
  body .standards-box {
    width: calc(50% - 20px);
    flex: 0 0 calc(50% - 20px);
    max-width: calc(50% - 20px);
  }

  /* 3) 优势 cloud-box：两列排布（解除 500px 最小宽度，避免挤压成竖排文字） */
  body .product-cloud .cloud-box {
    flex: 0 0 calc(50% - 20px);
    width: calc(50% - 20px);
    min-width: 0;
  }

  /* 4) 帮助卡片两列 */
  body .help-box {
    width: calc(50% - 20px);
    max-width: calc(50% - 20px);
  }

  /* 5) 流程行允许换行、隐藏连接箭头 */
  body .product-flow .flow {
    flex-wrap: wrap;
    row-gap: 24px;
  }
  body .product-flow .flow .flow-box {
    width: calc(50% - 20px);
  }
  body .product-flow .flow-box::before {
    display: none !important;
    content: none !important;
  }

  /* 6) 性能展示：图文纵向堆叠 */
  body .product-performance .performance {
    flex-direction: column;
  }
  body .product-performance .performance-left img {
    min-width: 0 !important;
    width: 100%;
    margin: 0 0 28px;
    max-height: none;
  }
  body .product-performance .performance-item {
    min-width: 0 !important;
  }

  /* 7) 域名注册信息页：两栏堆叠 */
  body .domain-info .section-content.fboxRow {
    flex-wrap: wrap;
  }
  body .domain-info .domain-register {
    flex: 1 1 100%;
    width: 100%;
  }
  body .domain-info .domain-register-right {
    flex: 1 1 100%;
    width: 100%;
    margin-left: 0 !important;
    margin-top: 16px;
  }
  body .domain-info .domain-desc-box {
    min-width: 0;
  }
}

/* ===== 三、手机 ≤767 ===== */
@media (max-width: 767px) {
  /* 旧版 section-content 纵向间距收紧 */
  body .section-content {
    padding-top: 48px;
    padding-bottom: 48px;
  }

  /* 产品横幅：rent 纳入自适应，统一高度自适应 */
  body .product-banner {
    height: auto;
    min-height: 360px;
  }
  body .banner-rent .section-content {
    padding: 56px 20px 40px;
  }
  body .banner-rent h1 {
    font-size: 32px;
  }

  /* fboxRow 允许换行（标签/值行可自然折行，不再横向挤压） */
  body .fboxRow {
    flex-wrap: wrap;
  }

  /* 规格卡片：单列全宽 */
  body .standards-box {
    width: calc(100% - 20px);
    flex: 0 0 calc(100% - 20px);
    max-width: calc(100% - 20px);
  }

  /* 优势 cloud-box：单列、图文纵向堆叠 */
  body .product-cloud .cloud-box {
    flex: 1 1 100%;
    min-width: 0;
    flex-direction: column;
  }
  body .product-cloud .cloud-box img {
    width: 96px;
    height: 96px;
    margin: 0 auto 16px;
    object-fit: contain;
  }

  /* 帮助卡片单列 */
  body .help-box {
    width: calc(100% - 20px);
    max-width: calc(100% - 20px);
  }

  /* 流程：换行、隐藏连接箭头 */
  body .product-flow .flow {
    flex-wrap: wrap;
    gap: 16px;
    justify-content: flex-start;
  }
  body .product-flow .flow .flow-box {
    width: calc(50% - 8px);
    height: auto;
    min-height: 72px;
  }
  body .product-flow .flow-box::before {
    display: none !important;
    content: none !important;
  }
  /* 商标流程为整张背景图，小屏不可读，整段隐藏（可咨询在线客服） */
  body .product-flow:has(.trademark-flow) {
    display: none;
  }

  /* 性能展示：图文纵向，图片全宽，条目自适应高度 */
  body .product-performance .performance {
    flex-direction: column;
  }
  body .product-performance .performance-left img {
    min-width: 0 !important;
    width: 100%;
    margin: 0 0 20px;
    max-height: none;
  }
  body .product-performance .performance-item {
    min-width: 0 !important;
    height: auto;
    min-height: 85px;
    padding: 14px 16px;
  }

  /* ===== 域名：注册信息页 ===== */
  body .domain-info .section-content.fboxRow {
    flex-wrap: wrap;
  }
  body .domain-info .domain-register {
    flex: 1 1 100%;
    width: 100%;
    padding: 24px 18px;
  }
  body .domain-info .domain-register-right {
    flex: 1 1 100%;
    width: 100%;
    margin-left: 0 !important;
    margin-top: 16px;
  }
  body .domain-info .domain-desc-box {
    min-width: 0;
    padding: 24px 18px 30px;
  }
  body .domain-info .register-box-item {
    flex-direction: column;
  }
  body .domain-info .register-box-item .register-box-left {
    width: auto;
    margin-bottom: 6px;
  }

  /* ===== 域名：注册商店 / 购物车 ===== */
  body .domain-shop .shop-content {
    flex-wrap: wrap;
  }
  body .domain-shop .shop-content .shop-left {
    flex: 1 1 100%;
    width: 100%;
  }
  body .domain-shop .shop-content .shop-right {
    flex: 1 1 100%;
    width: 100%;
    margin-left: 0 !important;
    margin-top: 16px;
  }
  body .domain-shop .shop-head {
    padding: 24px 18px;
  }
  body .domain-shop .shop-head .search-btn {
    width: 100%;
    margin-top: 10px;
  }
  body .shop-content .shop-left .shop-list .shop-item {
    display: flex;
    flex-wrap: wrap;
    height: auto;
    padding: 14px 16px;
    row-gap: 10px;
  }
  body .domain-shop .shop-item-left {
    display: flex;
    flex: 1 1 100%;
    flex-wrap: wrap;
    gap: 4px 10px;
  }
  body .domain-shop .shop-item-left .ml-30 {
    margin-left: 0;
  }
  body .domain-shop .shop-item-right {
    display: flex;
    flex: 1 1 100%;
    width: 100%;
    align-items: center;
    justify-content: space-between;
  }
  body .domain-shop .shop-item-right .item-right {
    width: auto;
    margin-left: 0;
  }
  /* 价格明细浮层：限制在视口内，避免 -100% 偏移溢出 */
  body .shop-content .shop-left .table-price {
    right: 0;
    left: auto;
    margin-left: 0;
    max-width: 88vw;
  }

  /* ===== 域名订购页 ===== */
  body .domain-buy .select-tem .select-content {
    padding: 24px 18px 0;
  }
  body .domain-buy .creat-template-box .creat-form {
    width: 100% !important;
    max-width: 100%;
  }
  body .domain-buy .creat-template-box .form-info {
    width: 100%;
  }
  body .domain-buy .creat-template-box .form-item {
    flex-direction: column;
  }
  body .domain-buy .creat-template-box .form-item .form-label {
    width: auto;
    margin-bottom: 8px;
  }
  body .domain-buy .creat-template-box .form-content {
    padding-left: 16px;
    padding-right: 16px;
  }
  body .domain-buy .creat-template-box .form-value,
  body .domain-buy .creat-template-box .form-value input,
  body .domain-buy .creat-template-box .form-value select {
    width: 100% !important;
    max-width: 100%;
  }
  body .domain-buy .right-tip {
    display: none;
  }

  /* ===== 文档详情（旧版独立文档中心） ===== */
  body .page .nav-left {
    position: static;
    width: 100%;
    height: auto;
    padding-top: 0;
  }
  body .page .nav-left .nav-head {
    position: static;
    height: auto;
    padding: 20px 16px;
  }
  body .page .page-content {
    margin-left: 0;
    height: auto;
    padding: 24px 18px;
  }
  body .page .guide-box {
    width: auto;
    padding-left: 0;
    border-left: 0;
    margin-top: 24px;
  }

  /* ===== Element UI 弹窗 / 对话框 ===== */
  .el-message-box {
    width: calc(100vw - 32px);
    max-width: calc(100vw - 32px);
  }
  .el-dialog {
    width: calc(100vw - 32px) !important;
    max-width: calc(100vw - 32px);
  }
  .el-dialog__body {
    max-height: 60vh;
    overflow-y: auto;
  }

  /* 触控目标：移动端可点条目不小于 44px */
  body .xy-mobile-service-option,
  body .xy-mobile-service-agent {
    min-height: 52px;
  }
}

/* ===== 四、购买页 rem 等比缩放（≤750，与 mf CSS 断点一致） =====
   mf CSS 固定 html{font-size:100px}（1rem=100px，按 750px 设计稿），
   小屏不缩放会整体溢出；改为随视口等比缩放（375px → 50px）。
   rem 相对 html 根字号，三个购买页通过 $xyRootClass 标记根元素，
   仅购买页生效，避免普通页面受根字号缩放影响。 */
@media (max-width: 750px) {
  html.xy-cloud-buy-page,
  html.xy-dcim-buy-page,
  html.xy-trusteeship-buy-page {
    font-size: 13.333vw !important;
  }
}

/* ===== 五、小屏手机 ≤360 精修 ===== */
@media (max-width: 360px) {
  body .section-content,
  body .banner-sms .section-content,
  body .banner-trademark .section-content {
    padding-left: 16px;
    padding-right: 16px;
  }
  /* 流程条目单列，避免 50% 宽度内文字拥挤 */
  body .product-flow .flow .flow-box {
    width: 100%;
  }
}

/* ===== 六、桌面端安全：移动 Mega 组件若因缩放残留则隐藏 ===== */
@media (min-width: 1024px) {
  body .xy-product-mega.has-subtabs .xy-mega-subtabs {
    display: none !important;
  }
}

/* ===== 七、移动端交互与触控增强 ===== */
@media (hover: none), (pointer: coarse) {
  html {
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  }
  /* 消除移动端点击 300ms 延迟/双击缩放干扰 */
  body a,
  body button,
  body [role="button"],
  body input[type="button"],
  body input[type="submit"],
  body select,
  body label,
  body .xy-plan-tab,
  body .xy-service-dock-trigger {
    touch-action: manipulation;
  }
}

@media (max-width: 767px) {
  /* 普通页面输入类控件字号最小 16px，避免 iOS 聚焦自动放大；
     购买页使用 rem 精密布局，保持 750 设计稿字号不受干扰 */
  body:not(.xy-cloud-buy-page):not(.xy-dcim-buy-page):not(.xy-trusteeship-buy-page)
    input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="file"]),
  body:not(.xy-cloud-buy-page):not(.xy-dcim-buy-page):not(.xy-trusteeship-buy-page)
    select,
  body:not(.xy-cloud-buy-page):not(.xy-dcim-buy-page):not(.xy-trusteeship-buy-page)
    textarea {
    font-size: 16px !important;
  }

  /* 表单控件不超出屏幕，避免横向溢出 */
  body input,
  body select,
  body textarea,
  body button {
    max-width: 100%;
  }
  body .el-form-item,
  body .form-item,
  body .form-control,
  body .el-input,
  body .el-select {
    max-width: 100%;
  }

  /* 页脚底部适配 iOS 底部安全区 */
  body .xy-footer-bottom {
    padding-bottom: max(16px, env(safe-area-inset-bottom)) !important;
  }
}

/* 横屏小高度设备：导航抽屉铺满可用高度，避免 100vh 被浏览器栏截断 */
@media (max-width: 767px) and (orientation: landscape) and (max-height: 500px) {
  body.xy-mobile-menu-open .xy-site-header .xy-navbar-collapse.show,
  body.xy-mobile-menu-open .xy-site-header .xy-navbar-collapse.in {
    height: 100% !important;
    max-height: none !important;
    padding-bottom: max(12px, env(safe-area-inset-bottom)) !important;
  }
  body .xy-mobile-service-drawer {
    max-height: calc(100vh - 12px) !important;
  }
}

/* ============================================================
   追加：导航抽屉高级感配色 + 页脚服务区整齐卡片
   仅作用于 ≤1023（手机/平板），PC（≥1024）完全不变
   ============================================================ */

/* 新增第 6 张服务卡：默认隐藏，仅 ≤1023 显示，保持 PC 为 5 张 */
.xy-footer-service-item--mobile {
  display: none;
}

/* ---------- 一、导航抽屉：干净、协调的浅蓝高级感背景 ---------- */
@media (max-width: 1023px) {
  html body.xy-mobile-menu-open .xy-site-header .xy-navbar-collapse.show,
  html body.xy-mobile-menu-open .xy-site-header .xy-navbar-collapse.in {
    background:
      radial-gradient(120% 55% at 50% -10%, rgba(64, 150, 255, .16) 0%, rgba(64, 150, 255, 0) 62%),
      linear-gradient(180deg, #ffffff 0%, #f2f7ff 100%) !important;
  }
  /* 抽屉内导航卡：白底 + 柔和描边，层次清晰（不用 backdrop-filter，保证滑动流畅） */
  body .xy-navbar-collapse.show .navbar-nav > .nav-item > .nav-link,
  body .xy-navbar-collapse.in .navbar-nav > .nav-item > .nav-link {
    background: #ffffff !important;
    border: 1px solid #e4edfa !important;
    box-shadow: 0 6px 16px rgba(20, 60, 130, .05) !important;
  }
}

/* ---------- 二、页脚服务区：整齐等高卡片（平板 3 列 / 手机 2 列） ---------- */
@media (min-width: 768px) and (max-width: 1023px) {
  body .xy-footer-service-row {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    grid-auto-rows: 1fr !important;
    align-items: stretch !important;
    gap: 14px !important;
    padding: 24px 0 !important;
  }
  body .xy-footer-service-item--mobile { display: flex !important; }
}
@media (max-width: 767px) {
  body .xy-footer-service-row {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    grid-auto-rows: 1fr !important;
    align-items: stretch !important;
    gap: 12px !important;
    padding: 20px 0 !important;
    min-height: 0 !important;
  }
  body .xy-footer-service-item--mobile { display: flex !important; }
}
@media (max-width: 1023px) {
  body .xy-footer-service-item {
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 10px !important;
    height: auto !important;
    min-height: 0 !important;
    padding: 18px 14px 16px !important;
    background: #ffffff !important;
    border: 1px solid #e4edfa !important;
    border-radius: 16px !important;
    box-shadow: 0 10px 24px rgba(20, 60, 130, .06) !important;
    text-align: center !important;
  }
  body .xy-footer-service-item > div {
    width: 100%;
    min-width: 0;
    text-align: center;
  }
  body .xy-footer-service-icon {
    width: 46px !important;
    height: 46px !important;
    flex: 0 0 46px !important;
    border-radius: 12px !important;
  }
  body .xy-footer-service-icon svg {
    width: 24px !important;
    height: 24px !important;
  }
  body .xy-footer-service-item b {
    margin-bottom: 4px !important;
    font-size: 15px !important;
    line-height: 1.3 !important;
  }
  body .xy-footer-service-item p {
    display: -webkit-box !important;
    width: 100% !important;
    min-height: 36px;
    margin: 0 auto !important;
    overflow: hidden !important;
    color: #6b7280 !important;
    font-size: 12px !important;
    line-height: 1.5 !important;
    text-align: center !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical;
  }
}