/* QQG.NET v18 mobile checkout dock.
   The detailed configuration stays in normal document flow on phones, while
   only the native duration, quantity, live total, cart and buy controls remain
   fixed at the bottom. Pricing and order bindings are untouched. */

@media (max-width: 820px) {
  body.dy8-config-page {
    padding-bottom: calc(144px + env(safe-area-inset-bottom)) !important;
  }

  .dy8-config-page .goods > .el-container > .el-container > .el-main {
    padding-bottom: calc(164px + env(safe-area-inset-bottom)) !important;
  }

  .dy8-config-page .config-box {
    padding-bottom: calc(150px + env(safe-area-inset-bottom)) !important;
  }

  .dy8-config-page .config-box > .content,
  .dy8-config-page .config-box > .content > .template,
  .dy8-config-page .config-box > .content > .template > .main-card {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: visible !important;
  }

  .dy8-config-page .config-box > .content > .template:not(.common-config) > .f-order,
  .dy8-config-page .template.common-config .f-order,
  .dy8-config-page .template.qqg-finance-config > .main-card > .f-order {
    position: fixed !important;
    z-index: 180 !important;
    top: auto !important;
    right: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    grid-column: auto !important;
    grid-row: auto !important;
    align-self: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
    background: rgba(255, 255, 255, .985) !important;
    border: 0 !important;
    border-top: 1px solid #d8e3f1 !important;
    box-shadow: 0 -12px 34px rgba(25, 61, 105, .15) !important;
    transform: none !important;
    backdrop-filter: blur(18px) !important;
    box-sizing: border-box !important;
  }

  .dy8-config-page .template .f-order .l-empty {
    display: none !important;
  }

  .dy8-config-page .template .f-order .el-main {
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 8px 10px max(8px, env(safe-area-inset-bottom)) !important;
    overflow: visible !important;
    background: transparent !important;
    box-shadow: none !important;
    box-sizing: border-box !important;
  }

  .dy8-config-page .template .f-order .main-card {
    display: grid !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    grid-template-columns: minmax(0, .88fr) minmax(188px, 1.12fr) !important;
    grid-template-areas:
      "controls controls"
      "price actions" !important;
    gap: 7px 10px !important;
    align-items: center !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    box-sizing: border-box !important;
  }

  .dy8-config-page .template .f-order .qqg-summary-head,
  .dy8-config-page .template .f-order .qqg-summary-config,
  .dy8-config-page .template .f-order .qqg-v16-live-summary,
  .dy8-config-page .template .f-order .qqg-summary-fees,
  .dy8-config-page .template .f-order .qqg-summary-trust,
  .dy8-config-page .template .f-order .qqg-v16-summary-empty {
    display: none !important;
  }

  .dy8-config-page .template .f-order .left {
    display: grid !important;
    width: 100% !important;
    min-width: 0 !important;
    grid-area: controls !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
  }

  .dy8-config-page .template .f-order .time,
  .dy8-config-page .template .f-order .num {
    display: grid !important;
    width: 100% !important;
    min-width: 0 !important;
    grid-template-columns: auto minmax(0, 1fr) !important;
    gap: 6px !important;
    align-items: center !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  .dy8-config-page .template .f-order .time > .l-txt,
  .dy8-config-page .template .f-order .num > .l-txt {
    color: #526178 !important;
    font-size: 12px !important;
    white-space: nowrap !important;
  }

  .dy8-config-page .template .f-order .duration-select,
  .dy8-config-page .template .f-order .el-input-number,
  .dy8-config-page .template .f-order .el-input,
  .dy8-config-page .template .f-order .el-select {
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
  }

  .dy8-config-page .template .f-order .el-input__inner,
  .dy8-config-page .template .f-order .el-input-number {
    height: 40px !important;
    line-height: 40px !important;
  }

  .dy8-config-page .template .f-order .mid {
    display: flex !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 48px !important;
    grid-area: price !important;
    align-items: center !important;
    flex-wrap: nowrap !important;
    gap: 6px !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
    border: 0 !important;
    box-sizing: border-box !important;
  }

  .dy8-config-page .template .f-order .mid > .link,
  .dy8-config-page .template .f-order .mid > .line-empty,
  .dy8-config-page .template .f-order .mid > .old,
  .dy8-config-page .template .f-order .bot-price .old {
    display: none !important;
  }

  .dy8-config-page .template .f-order .bot-price {
    width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  .dy8-config-page .template .f-order .bot-price::before {
    display: block !important;
    margin: 0 0 1px !important;
    color: #7b899d !important;
    content: "当前费用" !important;
    font-size: 10px !important;
    line-height: 1.2 !important;
  }

  html[lang^="en"] .dy8-config-page .template .f-order .bot-price::before {
    content: "Current total" !important;
  }

  .dy8-config-page .template .f-order .bot-price .new,
  .dy8-config-page .template .f-order .bot-price .new .price,
  .dy8-config-page .template .f-order .bot-price .new span {
    color: #ef492d !important;
    font-size: 23px !important;
    font-weight: 850 !important;
    line-height: 1.15 !important;
    white-space: nowrap !important;
  }

  .dy8-config-page .template .f-order .right {
    display: grid !important;
    position: static !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 48px !important;
    grid-area: actions !important;
    grid-template-columns: 48px minmax(0, 1fr) !important;
    gap: 8px !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    box-sizing: border-box !important;
  }

  .dy8-config-page .template .f-order .add-cart,
  .dy8-config-page .template .f-order .buy {
    display: flex !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 48px !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0 !important;
    margin: 0 !important;
    padding: 0 10px !important;
    border-radius: 10px !important;
    box-sizing: border-box !important;
    font-size: 15px !important;
    font-weight: 800 !important;
    line-height: 1 !important;
    white-space: nowrap !important;
  }

  .dy8-config-page .template .f-order .add-cart {
    color: #2468e8 !important;
    background: #fff !important;
    border: 1px solid #2468e8 !important;
  }

  .dy8-config-page .template .f-order .add-cart svg {
    display: block !important;
    width: 24px !important;
    height: 24px !important;
  }

  .dy8-config-page .template .f-order .add-cart span {
    display: none !important;
  }

  .dy8-config-page .template .f-order .buy {
    color: #fff !important;
    background: linear-gradient(135deg, #3479f0, #1e5bd3) !important;
    border: 1px solid #2468e8 !important;
    box-shadow: 0 8px 18px rgba(36, 104, 232, .22) !important;
  }
}

@media (max-width: 420px) {
  .dy8-config-page .template .f-order .main-card {
    grid-template-columns: minmax(94px, .72fr) minmax(176px, 1.28fr) !important;
  }

  .dy8-config-page .template .f-order .time > .l-txt,
  .dy8-config-page .template .f-order .num > .l-txt {
    display: none !important;
  }
}