/*!
 * 领带金融(ilingdai) 主题 —— 响应式兜底样式
 *
 * 设计约定：
 * 1. 不再依赖服务端 mobile 开关（is_show_mobile_page / wap.version / H5 站），
 *    全部用 CSS 媒体查询按视口宽度适配，PC 缩窄窗口同样生效。
 * 2. 断点统一为 1200 / 992 / 768 / 576 / 400，
 *    废弃主题里散落的 1164 / 1146 / 1061 / 1040 / 900 等非标准断点。
 * 3. 本文件在 main.css 之后加载，只做"兜底 + 覆盖"，不改原样式文件。
 */

:root {
  --ld-brand: #df6f54;
  --ld-bar-height: 50px;
  --ld-gutter: 12px;
}

/* ==========================================================================
   一、全局安全兜底（所有宽度生效）
   ========================================================================== */
html,
body {
  max-width: 100%;
}

body {
  overflow-x: hidden;
}

img,
video,
iframe,
svg,
canvas {
  max-width: 100%;
}

img {
  height: auto;
}

.es-wrap {
  min-width: 0;
}

#content-container {
  width: 100%;
}

/* ==========================================================================
   二、底部移动导航栏（footer-tool-bar）
   说明：mobile.css 只在服务端 mobile 开关打开时加载，该开关已废弃，
   因此底部导航的完整样式由本文件提供，并用媒体查询控制显隐。
   ========================================================================== */
.footer-tool-bar {
  display: none;
}

@media (max-width: 768px) {
  .footer-tool-bar {
    display: flex;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 999;
    height: calc(var(--ld-bar-height) + env(safe-area-inset-bottom, 0px));
    padding-top: 6px;
    padding-bottom: env(safe-area-inset-bottom, 0px);
    background: #f5f5f5;
    border-top: 1px solid #ececec;
    text-align: center;
    overflow: hidden;
  }

  .footer-tool-bar > div {
    flex: 1 1 0;
    float: none;
    width: auto;
    font-size: 10px;
    line-height: 1.4;
  }

  .footer-tool-bar > div a {
    display: block;
    color: #919191;
  }

  .footer-tool-bar > div i {
    font-size: 22px;
  }

  .footer-tool-bar > div svg {
    width: 22px;
    height: 22px;
    fill: #919191;
  }

  .footer-tool-bar > div.active a,
  .footer-tool-bar > div.active i {
    color: var(--ld-brand);
  }

  .footer-tool-bar > div.active svg {
    fill: var(--ld-brand);
  }

  /* 让出底部导航栏占用的高度 */
  body {
    padding-bottom: calc(var(--ld-bar-height) + env(safe-area-inset-bottom, 0px));
  }

  .es-wrap {
    padding-bottom: 0 !important;
  }
}

/* ==========================================================================
   三、容器与栅格
   ========================================================================== */
@media (max-width: 992px) {
  .container {
    width: 100%;
    max-width: 100%;
    padding-left: var(--ld-gutter);
    padding-right: var(--ld-gutter);
  }
}

@media (max-width: 768px) {
  .container {
    width: 100% !important;
    min-width: 0 !important;
    padding-left: var(--ld-gutter);
    padding-right: var(--ld-gutter);
  }

  .row {
    margin-left: -6px;
    margin-right: -6px;
  }

  .row > [class*="col-"] {
    padding-left: 6px;
    padding-right: 6px;
  }

  /* 平板/桌面栅格在手机上一律单列，.keep-grid 可保留多列 */
  .row:not(.keep-grid) > .col-sm-1,
  .row:not(.keep-grid) > .col-sm-2,
  .row:not(.keep-grid) > .col-sm-3,
  .row:not(.keep-grid) > .col-sm-4,
  .row:not(.keep-grid) > .col-sm-5,
  .row:not(.keep-grid) > .col-sm-6,
  .row:not(.keep-grid) > .col-sm-7,
  .row:not(.keep-grid) > .col-sm-8,
  .row:not(.keep-grid) > .col-sm-9,
  .row:not(.keep-grid) > .col-sm-10,
  .row:not(.keep-grid) > .col-sm-11,
  .row:not(.keep-grid) > .col-sm-12,
  .row:not(.keep-grid) > .col-md-1,
  .row:not(.keep-grid) > .col-md-2,
  .row:not(.keep-grid) > .col-md-3,
  .row:not(.keep-grid) > .col-md-4,
  .row:not(.keep-grid) > .col-md-5,
  .row:not(.keep-grid) > .col-md-6,
  .row:not(.keep-grid) > .col-md-7,
  .row:not(.keep-grid) > .col-md-8,
  .row:not(.keep-grid) > .col-md-9,
  .row:not(.keep-grid) > .col-md-10,
  .row:not(.keep-grid) > .col-md-11,
  .row:not(.keep-grid) > .col-md-12,
  .row:not(.keep-grid) > .col-lg-1,
  .row:not(.keep-grid) > .col-lg-2,
  .row:not(.keep-grid) > .col-lg-3,
  .row:not(.keep-grid) > .col-lg-4,
  .row:not(.keep-grid) > .col-lg-5,
  .row:not(.keep-grid) > .col-lg-6,
  .row:not(.keep-grid) > .col-lg-7,
  .row:not(.keep-grid) > .col-lg-8,
  .row:not(.keep-grid) > .col-lg-9,
  .row:not(.keep-grid) > .col-lg-10,
  .row:not(.keep-grid) > .col-lg-11,
  .row:not(.keep-grid) > .col-lg-12 {
    width: 100%;
    float: none;
  }
}

/* ==========================================================================
   四、顶部：搜索框与导航
   ========================================================================== */
@media (max-width: 768px) {
  /* 原样式 min-width:400px，在 375/390 屏上必然撑破布局 */
  .ld-header .navbar-form .form-control {
    width: 100%;
    min-width: 0;
  }

  .ld-header .navbar-form {
    flex: 1 1 auto;
    min-width: 0;
  }

  .ld-header .top-logo {
    padding-left: 0;
    padding-right: 0;
  }

  .ld-header .ld-logo img {
    max-height: 32px;
    width: auto;
  }

  /* 抽屉导航做完之前，手机端先隐藏主导航（原有 hidden-xs 的兜底） */
  .ld-nav,
  .ld-header .navbar-form button.btn {
    display: none;
  }
}

/* ==========================================================================
   五、首页 banner（原写死 225.5px / 688px / 387px）
   ========================================================================== */
@media (max-width: 992px) {
  .new_banner {
    flex-wrap: wrap;
    padding-top: 10px;
  }

  .new_left,
  .new_center,
  .new_right {
    width: 100%;
    height: auto;
    min-height: 0;
    margin: 0 0 10px;
  }

  .new_center {
    order: -1;
  }

  .new_center img {
    width: 100%;
    height: auto;
  }
}

/* ==========================================================================
   六、表格 / 弹窗 / 固定浮层
   ========================================================================== */
@media (max-width: 768px) {
  table {
    display: block;
    width: 100%;
    overflow-x: auto;
  }

  .modal-dialog {
    width: auto;
    margin: 10px;
  }

  /* 悬浮客服、侧边工具条在手机上收起，避免遮挡内容 */
  .es-bar,
  .float-consult,
  .ld-header .service {
    display: none !important;
  }

  /* 表单字号 >=16px，避免 iOS 聚焦时自动放大 */
  input,
  select,
  textarea {
    font-size: 16px;
  }
}

/* ==========================================================================
   七、小屏微调
   ========================================================================== */
@media (max-width: 400px) {
  .container {
    padding-left: 8px;
    padding-right: 8px;
  }

  .footer-tool-bar > div {
    font-size: 9px;
  }
}