/* NandaGame order/invoice final polish.
   Loaded after the existing theme + nandagame-v6 layer.  This file only
   targets the order/invoice UI and does not change transaction logic. */

/* ---------- Global safety for order/invoice ---------- */
body.ng-body,
body.ng-body .ng-order-page,
body.ng-body .ng-order-page #order-form,
body.ng-body .ng-invoice-page {
  min-width: 0 !important;
  max-width: 100% !important;
}

body.ng-body .ng-order-page,
body.ng-body .ng-invoice-page {
  overflow-x: clip !important;
}

/* ---------- Nominal cards ---------- */
#order-form .ng-service-groups,
#order-form .ng-service-groups > div,
#order-form .ng-service-grid,
#order-form .ng-service-option,
#order-form .ng-service-option > label {
  min-width: 0 !important;
  max-width: 100% !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

#order-form .ng-service-grid {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 10px !important;
  align-items: stretch !important;
}

#order-form .ng-service-option {
  display: block !important;
  overflow: visible !important;
}

#order-form .ng-service-option > .radio-service + label,
#order-form .ng-service-option > .radio-service:checked + label {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  justify-content: center !important;
  gap: 6px !important;
  min-width: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
  min-height: 92px !important;
  height: auto !important;
  margin: 0 !important;
  padding: 12px !important;
  box-sizing: border-box !important;
  overflow: visible !important;
  float: none !important;
  white-space: normal !important;
  text-align: left !important;
}

/* Legacy radio label decorations can steal width/height. */
#order-form .radio-service + label::before,
#order-form .radio-service + label::after,
#order-form .radio-service:checked + label::before,
#order-form .radio-service:checked + label::after {
  display: none !important;
  content: none !important;
}

#order-form .ng-service-name,
#order-form .ng-service-price {
  display: block !important;
  min-width: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  float: none !important;
  clear: both !important;
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: clip !important;
  overflow-wrap: anywhere !important;
  word-break: break-word !important;
  hyphens: auto !important;
}

#order-form .ng-service-name {
  color: inherit !important;
  font-size: .78rem !important;
  line-height: 1.3 !important;
  font-weight: 800 !important;
}

#order-form .ng-service-price {
  color: #65d8ff !important;
  font-style: normal !important;
  font-size: .74rem !important;
  line-height: 1.25 !important;
  font-weight: 800 !important;
}

#order-form .ng-service-group-title {
  max-width: 100% !important;
  min-width: 0 !important;
  white-space: normal !important;
  overflow-wrap: anywhere !important;
  word-break: break-word !important;
}

/* Payment options must never push their sibling columns. */
#order-form .ng-payment-list,
#order-form .ng-payment-list * {
  min-width: 0 !important;
  max-width: 100% !important;
}

#order-form .ng-payment-list .row {
  width: 100% !important;
  max-width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

#order-form .ng-payment-list [class*="col-"] {
  min-width: 0 !important;
  max-width: 100% !important;
}

#order-form .ng-pay-name,
#order-form .ng-pay-name strong,
#order-form .ng-pay-name small,
#order-form .ng-pay-price,
#order-form .payment-description,
#order-form .short-payment-support-info,
#order-form .short-payment-support-info-head {
  min-width: 0 !important;
  max-width: 100% !important;
  white-space: normal !important;
  overflow-wrap: anywhere !important;
  word-break: break-word !important;
}

/* ---------- Mobile floating CTA ---------- */
.ng-mobile-submit {
  display: none !important;
}

@media (max-width: 767.98px) {
  body.ng-body .ng-order-page {
    padding-bottom: 118px !important;
  }

  body.ng-body .ng-order-page #order-form {
    padding-bottom: 84px !important;
  }

  body.ng-body .ng-order-page .ng-mobile-submit,
  body.ng-body .ng-order-page .ng-mobile-submit-spacing-final {
    position: fixed !important;
    left: 12px !important;
    right: 12px !important;
    bottom: calc(12px + env(safe-area-inset-bottom)) !important;
    z-index: 99999 !important;
    width: auto !important;
    max-width: none !important;
    height: auto !important;
    margin: 0 !important;
    padding: 9px !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(120px, 40%) !important;
    gap: 9px !important;
    align-items: center !important;
    box-sizing: border-box !important;
    border: 1px solid rgba(124, 92, 255, .30) !important;
    border-radius: 16px !important;
    background: rgba(10, 14, 26, .98) !important;
    box-shadow: 0 16px 34px rgba(0,0,0,.45), 0 0 0 1px rgba(255,255,255,.02) !important;
    transform: translateZ(0) !important;
  }

  body.ng-body .ng-order-page .ng-mobile-submit > div {
    min-width: 0 !important;
    max-width: 100% !important;
    overflow: hidden !important;
  }

  body.ng-body .ng-order-page .ng-mobile-submit small,
  body.ng-body .ng-order-page .ng-mobile-submit strong {
    display: block !important;
    min-width: 0 !important;
    max-width: 100% !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  body.ng-body .ng-order-page .ng-mobile-submit small {
    margin: 0 0 2px !important;
    color: #8f9bb0 !important;
    font-size: .61rem !important;
    line-height: 1.15 !important;
  }

  body.ng-body .ng-order-page .ng-mobile-submit strong {
    color: #fff !important;
    font-size: .76rem !important;
    line-height: 1.2 !important;
  }

  body.ng-body .ng-order-page .ng-mobile-submit .ng-btn {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 44px !important;
    height: 44px !important;
    margin: 0 !important;
    padding: 0 10px !important;
    border-radius: 11px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }
}

@media (max-width: 991.98px) {
  #order-form .ng-service-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 575.98px) {
  #order-form .ng-service-grid {
    gap: 8px !important;
  }

  #order-form .ng-service-option > label,
  #order-form .ng-service-option > .radio-service:checked + label {
    min-height: 94px !important;
    padding: 10px 9px !important;
    border-radius: 11px !important;
  }

  #order-form .ng-service-name {
    font-size: .68rem !important;
    line-height: 1.32 !important;
  }

  #order-form .ng-service-price {
    font-size: .64rem !important;
    line-height: 1.2 !important;
  }
}

@media (max-width: 380px) {
  body.ng-body .ng-order-page .ng-mobile-submit,
  body.ng-body .ng-order-page .ng-mobile-submit-spacing-final {
    left: 9px !important;
    right: 9px !important;
    bottom: calc(9px + env(safe-area-inset-bottom)) !important;
    grid-template-columns: minmax(0, 1fr) minmax(108px, 42%) !important;
    gap: 7px !important;
    padding: 8px !important;
    border-radius: 14px !important;
  }

  #order-form .ng-service-option > label,
  #order-form .ng-service-option > .radio-service:checked + label {
    min-height: 98px !important;
    padding: 9px 8px !important;
  }

  #order-form .ng-service-name {
    font-size: .64rem !important;
  }

  #order-form .ng-service-price {
    font-size: .61rem !important;
  }
}

/* ---------- Invoice spacing, independent of legacy .content/.container rules ---------- */
body.ng-body .ng-invoice-page {
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: 20px 16px 40px !important;
  box-sizing: border-box !important;
}

body.ng-body .ng-invoice-page > .ng-invoice-container {
  width: 100% !important;
  max-width: 1040px !important;
  margin: 0 auto !important;
  padding: 0 !important;
  box-sizing: border-box !important;
}

body.ng-body .ng-invoice-page > .ng-invoice-container > .row {
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
}

body.ng-body .ng-invoice-page > .ng-invoice-container > .row > [class*="col-"] {
  width: 100% !important;
  max-width: 100% !important;
  flex: 0 0 100% !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

body.ng-body .ng-invoice-page .ng-invoice-card-spacing {
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  border-radius: 18px !important;
  box-sizing: border-box !important;
}

body.ng-body .ng-invoice-page .ng-invoice-card-spacing > .card-body {
  min-width: 0 !important;
  max-width: 100% !important;
  padding: 22px !important;
  box-sizing: border-box !important;
}

body.ng-body .ng-invoice-page .invoice,
body.ng-body .ng-invoice-page .invoice-head,
body.ng-body .ng-invoice-page .invoice-billing,
body.ng-body .ng-invoice-page .invoice-summary,
body.ng-body .ng-invoice-page .invoice-summary-total,
body.ng-body .ng-invoice-page .invoice-meta,
body.ng-body .ng-invoice-page .invoice-footer {
  min-width: 0 !important;
  max-width: 100% !important;
}

body.ng-body .ng-invoice-page .table-responsive {
  max-width: 100% !important;
  overflow-x: auto !important;
}

@media (max-width: 767.98px) {
  body.ng-body .ng-invoice-page {
    padding: 12px 12px 28px !important;
  }

  body.ng-body .ng-invoice-page .ng-invoice-card-spacing {
    border-radius: 15px !important;
  }

  body.ng-body .ng-invoice-page .ng-invoice-card-spacing > .card-body {
    padding: 14px !important;
  }
}

body.ng-body #order-form .text-danger.data-invalid,body.ng-body #order-form .text-danger.additional_data-invalid,body.ng-body #order-form .text-danger.service-invalid,body.ng-body #order-form .text-danger.payment-invalid,body.ng-body #order-form .text-danger.email-invalid{display:none!important}