/*
 * Member-center responsive foundation.
 * Loaded globally so core pages and addon pages share the same mobile shell.
 */

html,
body {
  max-width: 100%;
}

.template,
.product,
.template > .el-container,
.product > .el-container,
.template > .el-container > .el-container,
.product > .el-container > .el-container {
  min-width: 0;
}

.template .el-main,
.product .el-main {
  min-width: 0;
}

.template .el-table,
.product .el-table {
  max-width: 100%;
}

@media screen and (max-width: 1100px) {
  body .template .el-main,
  body .product .el-main {
    padding-left: 28px;
    padding-right: 28px;
  }
}

@media screen and (max-width: 750px) {
  html,
  body {
    width: 100%;
    min-width: 0 !important;
    overflow-x: hidden;
    -webkit-text-size-adjust: 100%;
  }

  body .template,
  body .product,
  body .template > .el-container,
  body .product > .el-container,
  body .template > .el-container > .el-container,
  body .product > .el-container > .el-container {
    width: 100%;
    min-width: 0 !important;
    max-width: 100%;
  }

  body .template .el-header,
  body .product .el-header {
    width: 100% !important;
    height: 56px !important;
    padding: 0 14px;
    background: rgba(255, 255, 255, 0.94);
    border-bottom: 1px solid rgba(225, 229, 238, 0.9);
    box-shadow: 0 4px 18px rgba(24, 39, 75, 0.06);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
  }

  body .template .header-left,
  body .product .header-left,
  body .template .header-right,
  body .product .header-right {
    min-width: 0;
  }

  body .template .menu-img,
  body .product .menu-img {
    width: 34px;
    height: 34px;
    object-fit: contain;
  }

  body .template .header-right,
  body .product .header-right {
    margin-right: 0;
    gap: 10px;
  }

  body .template .header-right-item,
  body .product .header-right-item {
    flex: 0 0 auto;
    margin: 0 !important;
  }

  body .template .header-right .car-item,
  body .product .header-right .car-item {
    margin-right: 0 !important;
  }

  body .template .header-right .right-item,
  body .product .header-right .right-item {
    margin-left: 0;
  }

  body .template .header-right .right-item img,
  body .product .header-right .right-item img,
  body .template .header-right .el-dropdown-country img,
  body .product .header-right .el-dropdown-country img {
    width: 28px;
    height: 28px;
  }

  body .template .header-right .head-box,
  body .product .header-right .head-box {
    width: 30px;
    height: 30px;
    font-size: 14px;
  }

  body .template .header-right .cloum-line-item,
  body .product .header-right .cloum-line-item {
    display: none;
  }

  body .template .drawer-menu,
  body .product .drawer-menu {
    width: min(82vw, 320px) !important;
    background: #fff;
    box-shadow: 18px 0 50px rgba(17, 34, 68, 0.16);
  }

  body .template .drawer-menu-top,
  body .product .drawer-menu-top {
    width: 100%;
    height: 64px;
    padding: 0 22px;
    box-sizing: border-box;
    justify-content: flex-start;
    border-bottom: 1px solid #edf0f5;
  }

  body .template .drawer-menu-logo,
  body .product .drawer-menu-logo {
    max-width: 142px;
    height: 30px;
    margin: 0;
    object-fit: contain;
  }

  body .template .drawer-menu-list-top,
  body .product .drawer-menu-list-top {
    margin-top: 12px;
    padding: 0 12px 28px;
  }

  body .template .drawer-menu .menu-top,
  body .product .drawer-menu .menu-top {
    margin-top: 0 !important;
  }

  body .template .drawer-menu .el-menu-item,
  body .template .drawer-menu .el-submenu__title,
  body .product .drawer-menu .el-menu-item,
  body .product .drawer-menu .el-submenu__title {
    height: 46px;
    line-height: 46px;
    border-radius: 9px;
    font-size: 15px;
  }

  body .template .drawer-menu .aside-menu-text,
  body .product .drawer-menu .aside-menu-text {
    margin-left: 12px;
  }

  body .template .el-main,
  body .product .el-main {
    width: 100%;
    min-width: 0 !important;
    max-width: 100%;
    overflow-x: hidden;
    box-sizing: border-box;
    padding: 76px 12px 28px !important;
    background: #f5f7fb;
  }

  body .template .main-card,
  body .product .main-card,
  body .template .clid-box,
  body .product .config-box,
  body .template .order-detail {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    box-sizing: border-box;
    margin: 0 !important;
  }

  body .template .main-card-table,
  body .product .main-card-table,
  body .template .main-card-content,
  body .product .main-card-content {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    box-sizing: border-box;
  }

  body .template .main-card,
  body .product .main-card,
  body .template .clid-box,
  body .template .order-detail {
    padding: 18px 14px;
    background: #fff;
    border: 1px solid #e8ebf1;
    border-radius: 12px;
    box-shadow: 0 8px 24px rgba(31, 50, 88, 0.06);
  }

  body .template .main-card-title,
  body .product .main-card-title,
  body .template .finance-title,
  body .template .page-top .top-title,
  body .template .clid-box header h2 {
    font-size: 20px !important;
    line-height: 1.35 !important;
    margin-bottom: 18px;
    color: #182033;
    word-break: break-word;
  }

  body .template .el-tabs__header,
  body .product .el-tabs__header {
    margin-bottom: 18px;
  }

  body .template .el-tabs__nav-wrap,
  body .product .el-tabs__nav-wrap {
    overflow: hidden;
  }

  body .template .el-tabs__nav-scroll,
  body .product .el-tabs__nav-scroll {
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }

  body .template .el-tabs__nav-scroll::-webkit-scrollbar,
  body .product .el-tabs__nav-scroll::-webkit-scrollbar {
    display: none;
  }

  body .template .el-tabs__nav,
  body .product .el-tabs__nav {
    float: none;
    display: inline-flex;
    min-width: max-content;
  }

  body .template .el-tabs__item,
  body .product .el-tabs__item {
    height: 44px;
    line-height: 44px;
    margin: 0 !important;
    padding: 0 16px;
    font-size: 15px;
    white-space: nowrap;
  }

  body .template .content_searchbar,
  body .product .content_searchbar,
  body .product .main-card-search,
  body .template .main-card-search,
  body .template .clid-box header {
    display: flex;
    flex-direction: column;
    align-items: stretch !important;
    gap: 12px;
  }

  body .template .content_searchbar .left-btn,
  body .template .content_searchbar .new-ticket-btn,
  body .product .content_searchbar .left-btn,
  body .template .clid-box header .el-button {
    width: 100% !important;
    min-width: 0;
    height: 42px;
    line-height: 42px;
    box-sizing: border-box;
    margin: 0;
  }

  body .template .searchbar,
  body .product .searchbar,
  body .product .right-search,
  body .template .right-search {
    width: 100% !important;
    min-width: 0;
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 10px !important;
    margin: 0 !important;
  }

  body .template .searchbar .el-input,
  body .template .searchbar .el-select,
  body .product .searchbar .el-input,
  body .product .searchbar .el-select,
  body .product .right-search .el-input,
  body .product .right-search .el-select,
  body .template .right-search .el-input,
  body .template .right-search .el-select {
    width: 100% !important;
    min-width: 0;
    margin: 0 !important;
  }

  body .template .el-input__inner,
  body .product .el-input__inner,
  body .template .el-textarea__inner,
  body .product .el-textarea__inner {
    font-size: 15px;
  }

  body .template .tabledata,
  body .product .tabledata,
  body .template .table,
  body .product .table,
  body .template .goods-box,
  body .product .goods-box,
  body .template .table-content,
  body .product .table-content,
  body .template .withdrawal-content {
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  body .template .goods-box,
  body .product .goods-box,
  body .template .content-box,
  body .product .content-box,
  body .template .config-box,
  body .product .config-box {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    box-sizing: border-box;
  }

  body .template .el-table,
  body .product .el-table {
    min-width: 680px;
    font-size: 13px;
  }

  body .template .el-table::before,
  body .product .el-table::before {
    display: none;
  }

  body .template .el-dialog,
  body .product .el-dialog,
  body > .el-dialog__wrapper .el-dialog {
    width: calc(100vw - 24px) !important;
    max-width: 560px;
    margin-top: 5vh !important;
    border-radius: 14px;
    overflow: hidden;
  }

  body .template .el-dialog__header,
  body .product .el-dialog__header,
  body > .el-dialog__wrapper .el-dialog__header {
    padding: 18px 18px 12px;
  }

  body .template .el-dialog__body,
  body .product .el-dialog__body,
  body > .el-dialog__wrapper .el-dialog__body {
    max-height: calc(90vh - 104px);
    overflow-x: hidden;
    overflow-y: auto;
    box-sizing: border-box;
    padding: 18px !important;
  }

  body .template .el-dialog__footer,
  body .product .el-dialog__footer,
  body > .el-dialog__wrapper .el-dialog__footer {
    padding: 12px 18px 18px;
  }

  body .template .el-form,
  body .product .el-form,
  body .template .el-form-item,
  body .product .el-form-item,
  body .template .el-form-item__content,
  body .product .el-form-item__content {
    min-width: 0;
    max-width: 100%;
  }

  body .template .el-form-item__label,
  body .product .el-form-item__label {
    float: none;
    width: auto !important;
    max-width: 100%;
    line-height: 1.45;
    padding: 0 0 8px !important;
    font-size: 14px;
    text-align: left;
  }

  body .template .el-form-item__content,
  body .product .el-form-item__content {
    margin-left: 0 !important;
  }

  body .template .dialog-footer,
  body .product .dialog-footer {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
  }

  body .template .dialog-footer .el-button,
  body .product .dialog-footer .el-button,
  body .template .dialog-footer .btn-ok,
  body .template .dialog-footer .btn-no,
  body .product .dialog-footer .btn-ok,
  body .product .dialog-footer .btn-no {
    width: 100% !important;
    min-width: 0;
    height: 42px;
    margin: 0 !important;
  }

  body .template .myPage,
  body .product .myPage,
  body .template .pagination,
  body .product .pagination,
  body .template .custom-pagination {
    max-width: 100%;
    overflow-x: auto;
    padding-bottom: 4px;
  }

  body .template .myPage .el-pagination,
  body .product .myPage .el-pagination {
    min-width: max-content;
  }

  body .template .finance .finance-top .finance-money-main,
  body .template .finance .finance-top .finance-title {
    padding-left: 0;
    padding-right: 0;
  }

  body .template .finance .finance-balance,
  body .template .finance .finance-other-money {
    align-items: stretch !important;
    flex-direction: column;
    gap: 16px;
  }

  body .template .finance .balance-right {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px !important;
  }

  body .template .finance .balance-right .el-button {
    width: 100%;
    margin: 0;
  }

  body .template .finance .finance-other-money .other-money-item {
    padding: 0 !important;
    border-left: 0 !important;
  }

  body #account .box-top,
  body #account .box-main .el-row,
  body #account .safe-box,
  body #account .account-item {
    min-width: 0;
    max-width: 100%;
  }

  body #account .box-main .el-col,
  body #account .basic .el-col {
    width: 100% !important;
    margin: 0 0 14px;
  }

  body .template .security-tabs-shell,
  body .template .security-tabs-shell.is-ready {
    min-width: 0;
  }

  body .template .security-tabs-shell .content-table {
    margin-top: 16px;
  }

  body .template .security-tabs-shell .top-text {
    line-height: 1.7;
    margin-bottom: 16px;
  }

  body .template .order-detail .page-top {
    margin-bottom: 20px;
  }

  body .template .order-info {
    padding-right: 0;
    align-items: flex-start;
    flex-direction: column;
    gap: 18px;
  }

  body .template .order-info .info-right {
    width: 100%;
    align-items: flex-start;
  }

  body .template .self-field {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
  }

  body .template .order-table .table-content {
    min-width: 680px;
  }

  body .template .clid-box header {
    height: auto;
  }

  body .ticket .order-des {
    box-sizing: border-box;
    max-width: 100%;
  }

  body .transfer .con {
    width: calc(100vw - 24px);
    max-width: 560px;
  }

  body .transfer .logo,
  body .transfer .info {
    padding-left: 18px;
    padding-right: 18px;
  }

  body .transfer .jump .btn {
    width: 100%;
    box-sizing: border-box;
    text-align: center;
  }
}

@media (prefers-reduced-motion: reduce) {
  .template *,
  .product * {
    scroll-behavior: auto !important;
  }
}