/* ================================
   NEXSYS | Order Flow
   File: overrides.order.css
================================ */


body{
  color: var(--nx-text);
}

/* Order containers/cards */
.order .card,
.order .panel,
.order .well,
.order .widget,
.order .card-blesta,
.right_content .order .card{
  border-radius: var(--nx-radius) !important;
  border: 1px solid var(--nx-border) !important;
  box-shadow: var(--nx-shadow) !important;
  background: #fff !important;
}

/* Headings */
.order h1, .order h2, .order h3{
  font-weight: 900;
  letter-spacing: -0.02em;
}

/* Inputs */
.order input[type="text"],
.order input[type="email"],
.order input[type="password"],
.order select,
.order textarea{
  border-radius: 14px !important;
  border: 1px solid rgba(15,23,42,.10) !important;
}
.order input:focus,
.order select:focus,
.order textarea:focus{
  border-color: rgba(57,148,168,.35) !important;
  box-shadow: 0 0 0 4px rgba(57,148,168,.14) !important;
}

/* Buttons */
.order .btn, .order .btn-sm{
  border-radius: 999px !important;
  font-weight: 900 !important;
}

/* Primary checkout CTA */
.order .btn-primary,
.order input[type="submit"].btn-primary{
  background: linear-gradient(180deg, rgba(57,148,168,.20), rgba(57,148,168,.10)) !important;
  border: 1px solid rgba(57,148,168,.32) !important;
  color: rgba(15,23,42,.92) !important;
  box-shadow: 0 12px 26px rgba(15,23,42,.08) !important;
}
.order .btn-primary:hover{
  background: linear-gradient(180deg, rgba(57,148,168,.26), rgba(57,148,168,.12)) !important;
}

/* Tables / summaries */
.order table{
  border-radius: 14px !important;
  overflow: hidden !important;
  border: 1px solid rgba(15,23,42,.06) !important;
}
.order table thead th{
  background: rgba(15,23,42,.03) !important;
  font-size: 11px !important;
  text-transform: uppercase;
  letter-spacing: .10em;
  color: rgba(15,23,42,.62) !important;
  padding: 10px 12px !important;
}
.order table td{
  padding: 10px 12px !important;
  border-top: 1px solid rgba(15,23,42,.05) !important;
}

/* =========================
   ORDER (Forms + History)
   ========================= */

/* Form selection / product tiles */
.nx-page-order-forms .card,
.nx-page-order-forms .panel,
.nx-page-order-forms .well{
  margin-bottom:14px;
}

/* Step headings / section titles */
.nx-page-order-forms h1,
.nx-page-order-forms h2,
.nx-page-order-forms h3{
  font-weight:900;
  letter-spacing:-0.01em;
}

/* Order history table actions */
.nx-page-order-orders table td:last-child{
  text-align:right;
}
/* ─────────────────────────────────────────────────────────────
   ORDER HISTORY PAGE  (#client_orders)
   Path: /order/orders/
───────────────────────────────────────────────────────────── */

/* Strip default card chrome */
#client_orders {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
}

#client_orders .card-content {
  background: transparent !important;
}

/* ── Page header ── */
#client_orders > .card-header {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 0 20px 0 !important;
}

#client_orders > .card-header::before {
  content: "ACCOUNT" !important;
  display: block !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  letter-spacing: .12em !important;
  color: rgba(57,148,168,.80) !important;
  text-transform: uppercase !important;
  margin-bottom: 4px !important;
}

#client_orders > .card-header {
  font-size: 32px !important;
  font-weight: 900 !important;
  letter-spacing: -0.03em !important;
  color: #0f172a !important;
  line-height: 1.1 !important;
}

/* ── Card body shell ── */
#client_orders .card-body {
  padding: 0 !important;
  background: #fff !important;
  border-radius: 16px !important;
  border: 1px solid rgba(15,23,42,.08) !important;
  box-shadow: 0 2px 12px rgba(15,23,42,.06) !important;
  overflow: hidden !important;
}

/* ── Table ── */
#client_orders table {
  width: 100% !important;
  border-collapse: collapse !important;
  border-spacing: 0 !important;
  border: none !important;
  border-radius: 0 !important;
  background: #fff !important;
}

#client_orders table thead th {
  background: #f8fafc !important;
  font-size: 10px !important;
  font-weight: 800 !important;
  letter-spacing: .09em !important;
  text-transform: uppercase !important;
  color: rgba(15,23,42,.40) !important;
  padding: 10px 16px !important;
  border-bottom: 1px solid rgba(15,23,42,.06) !important;
  border-top: none !important;
  white-space: nowrap !important;
}

#client_orders table tbody td {
  padding: 12px 16px !important;
  font-size: 13px !important;
  color: rgba(15,23,42,.78) !important;
  border-bottom: 1px solid rgba(15,23,42,.045) !important;
  vertical-align: middle !important;
  background: #fff !important;
}

#client_orders table tbody tr:last-child td {
  border-bottom: none !important;
}

#client_orders table tbody tr:hover td {
  background: rgba(57,148,168,.03) !important;
}

/* Order # — bold teal link */
#client_orders table tbody td:first-child {
  font-weight: 800 !important;
  color: #0f172a !important;
}

#client_orders table tbody td:first-child a {
  font-weight: 800 !important;
  color: #2a7a92 !important;
  text-decoration: none !important;
}

#client_orders table tbody td:first-child a::before {
  content: "#" !important;
  color: rgba(57,148,168,.50) !important;
  font-weight: 700 !important;
  margin-right: 1px !important;
}

#client_orders table tbody td:first-child a:hover {
  color: #3994A8 !important;
  text-decoration: underline !important;
}

/* Date column — muted */
#client_orders table tbody td:nth-child(2) {
  color: rgba(15,23,42,.50) !important;
  font-size: 12px !important;
  white-space: nowrap !important;
}

/* ── Status badges ── */
#client_orders .badge,
#client_orders .label {
  display: inline-flex !important;
  align-items: center !important;
  padding: 3px 10px !important;
  border-radius: 999px !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  letter-spacing: .02em !important;
  border: 1px solid transparent !important;
}

#client_orders .badge-success, #client_orders .label-success {
  background: rgba(16,185,129,.12) !important;
  color: #065f46 !important;
  border-color: rgba(16,185,129,.22) !important;
}

#client_orders .badge-warning, #client_orders .label-warning {
  background: rgba(245,158,11,.12) !important;
  color: #92400e !important;
  border-color: rgba(245,158,11,.22) !important;
}

#client_orders .badge-danger, #client_orders .label-danger {
  background: rgba(239,68,68,.10) !important;
  color: #991b1b !important;
  border-color: rgba(239,68,68,.18) !important;
}

#client_orders .badge-info, #client_orders .label-info {
  background: rgba(57,148,168,.12) !important;
  color: #1d6478 !important;
  border-color: rgba(57,148,168,.22) !important;
}

#client_orders .badge-secondary, #client_orders .badge-default,
#client_orders .label-default {
  background: rgba(15,23,42,.07) !important;
  color: rgba(15,23,42,.55) !important;
  border-color: rgba(15,23,42,.10) !important;
}

/* ── Action buttons ── */
#client_orders table tbody td:last-child {
  text-align: right !important;
  padding-right: 16px !important;
  white-space: nowrap !important;
}

/* Remove split dropdown caret */
#client_orders table .btn-group > .btn + .btn,
#client_orders table .btn-group > .dropdown-toggle,
#client_orders table .dropdown-toggle-split,
#client_orders table td .caret,
#client_orders table td .fa-caret-down {
  display: none !important;
}

#client_orders table .btn-group > .btn:first-child {
  border-radius: 999px !important;
  display: inline-flex !important;
  align-items: center !important;
}

#client_orders table .btn-xs,
#client_orders table a.btn {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 6px 14px !important;
  border-radius: 999px !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  border: 1px solid rgba(15,23,42,.12) !important;
  background: #fff !important;
  color: #334155 !important;
  box-shadow: none !important;
  text-decoration: none !important;
  transition: all .12s ease !important;
  white-space: nowrap !important;
}

#client_orders table .btn-xs:hover,
#client_orders table a.btn:hover {
  border-color: rgba(57,148,168,.30) !important;
  background: rgba(57,148,168,.06) !important;
  color: #0f172a !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 10px rgba(57,148,168,.10) !important;
}

/* ── Empty state ── */
#client_orders .alert-info {
  margin: 16px !important;
  border-radius: 10px !important;
  background: rgba(57,148,168,.05) !important;
  border: 1px solid rgba(57,148,168,.15) !important;
  color: rgba(15,23,42,.55) !important;
  font-size: 13px !important;
  padding: 14px 18px !important;
}

/* ── Pagination / footer ── */
#client_orders .card-body > .text-center,
#client_orders tfoot td {
  font-size: 12px !important;
  color: rgba(15,23,42,.38) !important;
  padding: 12px !important;
  text-align: center !important;
  border-top: 1px solid rgba(15,23,42,.05) !important;
}

/* ── Mobile ── */
@media (max-width: 767px) {

  #client_orders > .card-header {
    font-size: 24px !important;
    padding-bottom: 14px !important;
  }

  #client_orders table,
  #client_orders table thead,
  #client_orders table tbody,
  #client_orders table tr,
  #client_orders table td {
    display: block !important;
    width: 100% !important;
  }

  #client_orders table thead tr { display: none !important; }

  #client_orders table tbody tr {
    border-bottom: 1px solid rgba(15,23,42,.07) !important;
    padding: 12px 14px !important;
    background: #fff !important;
  }

  #client_orders table tbody tr:last-child { border-bottom: none !important; }

  #client_orders table tbody td {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 5px 0 !important;
    border: none !important;
    background: transparent !important;
    font-size: 13px !important;
  }

  #client_orders table tbody td::before {
    content: attr(data-label) !important;
    font-size: 10px !important;
    font-weight: 800 !important;
    letter-spacing: .07em !important;
    text-transform: uppercase !important;
    color: rgba(15,23,42,.38) !important;
    flex-shrink: 0 !important;
    margin-right: 10px !important;
    white-space: nowrap !important;
  }

  /* Order # — title row */
  #client_orders table tbody td:first-child {
    padding: 0 0 8px 0 !important;
    font-size: 15px !important;
    justify-content: flex-start !important;
  }
  #client_orders table tbody td:first-child::before { display: none !important; }

  /* Actions row */
  #client_orders table tbody td:last-child {
    justify-content: flex-start !important;
    padding-top: 8px !important;
    border: none !important;
    text-align: left !important;
  }
  #client_orders table tbody td:last-child::before { display: none !important; }
}

/* ─────────────────────────────────────────────────────────────
   ORDER LISTING PAGE  (/order/)
───────────────────────────────────────────────────────────── */
.order-listing {
  display: inline-block !important;
  vertical-align: top !important;
  width: calc(50% - 9px) !important;
  padding: 0 !important;
  margin: 0 8px 16px 0 !important;
  box-sizing: border-box !important;
}
.order-listing:nth-child(2n) { margin-right: 0 !important; }

.order-listing .card,
.order-listing .card.bg-light {
  border-radius: 16px !important;
  border: 1px solid rgba(15,23,42,.08) !important;
  background: #fff !important;
  box-shadow: 0 2px 12px rgba(15,23,42,.06) !important;
  padding: 0 !important;
  height: 100% !important;
  overflow: hidden !important;
  position: relative !important;
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease !important;
}
.order-listing .card::before {
  content: "" !important;
  position: absolute !important;
  left: 0 !important; top: 0 !important; bottom: 0 !important;
  width: 3px !important;
  background: linear-gradient(180deg, #3994A8, #2a7a92) !important;
  border-radius: 16px 0 0 16px !important;
  z-index: 1 !important;
}
.order-listing .card:hover {
  transform: translateY(-3px) !important;
  box-shadow: 0 14px 36px rgba(15,23,42,.11) !important;
  border-color: rgba(57,148,168,.25) !important;
}
.order-listing .card .row {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: wrap !important;
  padding: 22px 22px 22px 26px !important;
  margin: 0 !important;
  align-items: flex-start !important;
}
.order-listing .card .col-sm-9.head-item {
  flex: 1 1 auto !important; min-width: 0 !important; max-width: none !important; width: auto !important; padding: 0 !important;
}
.order-listing .card .col-sm-3.head-item {
  flex: 0 0 auto !important; width: auto !important; max-width: none !important; padding: 0 !important;
}
.order-listing .card .col-sm-12 {
  flex: 0 0 100% !important; width: 100% !important; padding: 0 !important; margin-top: 10px !important;
}
.order-listing h3 {
  font-size: 17px !important; font-weight: 800 !important; letter-spacing: -0.02em !important;
  color: #0f172a !important; margin: 0 !important; line-height: 1.3 !important;
}
.order-listing .col-sm-12 p {
  font-size: 13px !important; color: rgba(15,23,42,.55) !important; line-height: 1.65 !important; margin: 0 0 6px 0 !important;
}
.order-listing .col-sm-3.head-item a.btn-success {
  display: inline-flex !important; align-items: center !important;
  padding: 8px 20px !important; border-radius: 999px !important;
  background: linear-gradient(180deg, #3994A8, #2a7a92) !important;
  border: none !important; color: #fff !important; font-size: 13px !important; font-weight: 700 !important;
  box-shadow: 0 4px 12px rgba(57,148,168,.28) !important;
  text-decoration: none !important; white-space: nowrap !important;
}
.order-listing .col-sm-3.head-item a.btn-success:hover {
  background: linear-gradient(180deg, #2a7a92, #1d6478) !important;
  box-shadow: 0 8px 20px rgba(57,148,168,.38) !important;
  transform: translateY(-1px) !important; color: #fff !important;
}
.order-listing a.btn-block.btn-success { display: none !important; }
.order-listing .clearfix { display: none !important; }

@media (max-width: 600px) {
  .order-listing { display: block !important; width: 100% !important; margin: 0 0 12px 0 !important; }
  .order-listing .card .row { flex-direction: column !important; padding: 18px 18px 18px 22px !important; }
  .order-listing .col-sm-3.head-item a.btn-success { display: none !important; }
  .order-listing a.btn-block.btn-success {
    display: flex !important; align-items: center !important; justify-content: center !important;
    width: 100% !important; margin-top: 14px !important; padding: 11px 18px !important;
    border-radius: 999px !important; background: linear-gradient(180deg, #3994A8, #2a7a92) !important;
    border: none !important; color: #fff !important; font-size: 14px !important; font-weight: 700 !important;
  }
}

/* ─────────────────────────────────────────────────────────────
   ORDER FLOW — Step Indicator
───────────────────────────────────────────────────────────── */
.card-steps {
  border-radius: 14px !important;
  border: 1px solid rgba(15,23,42,.08) !important;
  background: #fff !important;
  box-shadow: 0 2px 10px rgba(15,23,42,.05) !important;
  margin-bottom: 16px !important;
  overflow: hidden !important;
}

.card-steps .card-body {
  padding: 0 !important;
}

.card-steps .row {
  display: flex !important;
  align-items: stretch !important;
  margin: 0 !important;
}

/* Each step */
.card-steps .col-md-3 {
  padding: 16px 20px !important;
  position: relative !important;
  border-right: 1px solid rgba(15,23,42,.06) !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  transition: background .12s ease !important;
}

.card-steps .col-md-3:last-child {
  border-right: none !important;
}

/* Chevron: absolutely positioned right side */
.card-steps .col-md-3 .fa-chevron-right {
  position: absolute !important;
  right: -7px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  color: rgba(15,23,42,.18) !important;
  font-size: 11px !important;
  z-index: 2 !important;
  float: none !important;
  background: #fff !important;
  padding: 2px 0 !important;
}

/* Step link */
.card-steps .col-md-3 a {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  text-decoration: none !important;
  color: rgba(15,23,42,.30) !important;
  margin-bottom: 3px !important;
  line-height: 1.2 !important;
}

.card-steps .col-md-3 a strong {
  font-weight: 800 !important;
  color: inherit !important;
}

/* Step label */
.card-steps .col-md-3 p {
  margin: 0 !important;
  font-size: 12px !important;
  color: rgba(15,23,42,.35) !important;
  font-style: normal !important;
  padding-left: 22px !important;
}

/* Active step */
.card-steps .col-md-3:has(a.active) {
  background: rgba(57,148,168,.04) !important;
}

.card-steps .col-md-3 a.active {
  color: #1d6478 !important;
}

.card-steps .col-md-3:has(a.active) p {
  color: rgba(15,23,42,.55) !important;
}

/* Active dot */
.card-steps .col-md-3 a.active::before {
  content: "" !important;
  display: inline-block !important;
  width: 8px !important;
  height: 8px !important;
  min-width: 8px !important;
  border-radius: 50% !important;
  background: #3994A8 !important;
  box-shadow: 0 0 0 3px rgba(57,148,168,.20) !important;
}

/* Completed steps — subtle teal text */
.card-steps .col-md-3 a:not(.active):not([href="#"]) {
  color: rgba(15,23,42,.40) !important;
}

/* ─────────────────────────────────────────────────────────────
   ORDER FLOW — Domain Search Card
───────────────────────────────────────────────────────────── */
#check-domain-availability,
.whois {
  border-radius: 16px !important;
  border: 1px solid rgba(15,23,42,.08) !important;
  background: #fff !important;
  box-shadow: 0 2px 14px rgba(15,23,42,.07) !important;
  overflow: hidden !important;
}

/* Card header */
#check-domain-availability > .card-header,
.whois .section-title h3 {
  font-size: 12px !important;
  font-weight: 800 !important;
  letter-spacing: .08em !important;
  text-transform: uppercase !important;
  color: rgba(15,23,42,.40) !important;
  background: #f8fafc !important;
  border-bottom: 1px solid rgba(15,23,42,.06) !important;
  padding: 12px 22px !important;
}

#check-domain-availability .card-content,
.whois .card-order {
  background: #fff !important;
}

#check-domain-availability .card-body,
.whois .card-order {
  padding: 24px 22px !important;
}

/* Centered form column */
#check-domain-availability .col-md-8.col-md-offset-2,
.whois .col-md-8 {
  float: none !important;
  margin: 0 auto !important;
  width: 100% !important;
  max-width: 600px !important;
}

/* ── Well ── */
#check-domain-availability .well,
.whois .card-order {
  background: #f8fafc !important;
  border: 1px solid rgba(15,23,42,.08) !important;
  border-radius: 14px !important;
  box-shadow: none !important;
  padding: 20px 20px 16px !important;
  background-image: none !important;
}

/* Domain input */
#check-domain-availability .well .form-control,
.whois .card-order .form-control {
  border-radius: 10px !important;
  border: 1.5px solid rgba(15,23,42,.12) !important;
  background: #fff !important;
  font-size: 15px !important;
  font-weight: 500 !important;
  padding: 11px 16px !important;
  height: auto !important;
  box-shadow: 0 1px 4px rgba(15,23,42,.05) !important;
  color: #0f172a !important;
  transition: border-color .12s ease, box-shadow .12s ease !important;
}

#check-domain-availability .well .form-control:focus,
.whois .card-order .form-control:focus {
  border-color: #3994A8 !important;
  box-shadow: 0 0 0 3px rgba(57,148,168,.14) !important;
}

/* ── TLD checkbox pills ── */
#check-domain-availability .tlds,
.whois .tlds {
  margin-top: 12px !important;
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 6px !important;
  align-items: center !important;
}

#check-domain-availability .spotlight_tld,
#check-domain-availability .normal_tld,
.whois .spotlight_tld,
.whois .normal_tld {
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  padding: 5px 12px !important;
  border-radius: 999px !important;
  border: 1px solid rgba(15,23,42,.12) !important;
  background: #fff !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  color: rgba(15,23,42,.65) !important;
  cursor: pointer !important;
  transition: all .12s ease !important;
  margin: 0 !important;
  line-height: 1.4 !important;
}

#check-domain-availability .spotlight_tld:hover,
#check-domain-availability .normal_tld:hover,
.whois .spotlight_tld:hover,
.whois .normal_tld:hover {
  border-color: rgba(57,148,168,.35) !important;
  background: rgba(57,148,168,.06) !important;
  color: #1d6478 !important;
}

/* Checked state */
#check-domain-availability .spotlight_tld:has(input:checked),
#check-domain-availability .normal_tld:has(input:checked),
.whois .spotlight_tld:has(input:checked),
.whois .normal_tld:has(input:checked),
.whois .nx-checked {
  border-color: #3994A8 !important;
  background: rgba(57,148,168,.12) !important;
  color: #1d6478 !important;
  font-weight: 700 !important;
}

#check-domain-availability .tlds input[type="checkbox"],
.whois .tlds input[type="checkbox"] {
  width: 13px !important;
  height: 13px !important;
  accent-color: #3994A8 !important;
  margin: 0 !important;
  flex-shrink: 0 !important;
}

/* Show All link */
#check-domain-availability .show_more.btn,
.whois .show_more.btn {
  display: inline-flex !important;
  align-items: center !important;
  padding: 5px 12px !important;
  border-radius: 999px !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  border: 1px dashed rgba(57,148,168,.40) !important;
  background: transparent !important;
  color: #2a7a92 !important;
  box-shadow: none !important;
  margin: 0 !important;
}

#check-domain-availability .show_more.btn:hover,
.whois .show_more.btn:hover {
  background: rgba(57,148,168,.07) !important;
  border-color: rgba(57,148,168,.55) !important;
}

/* ── Action buttons ── */
#check-domain-availability .search,
.whois .search {
  margin-top: 18px !important;
}

#check-domain-availability .search .btn-group,
.whois .search .btn-group {
  display: flex !important;
  gap: 8px !important;
  justify-content: center !important;
  flex-wrap: wrap !important;
}

/* Primary: Check Availability */
#check-domain-availability .search .btn-success,
.whois .search .btn-success {
  display: inline-flex !important;
  align-items: center !important;
  gap: 7px !important;
  padding: 10px 24px !important;
  border-radius: 999px !important;
  background: linear-gradient(180deg, #3994A8, #2a7a92) !important;
  border: none !important;
  color: #fff !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  box-shadow: 0 4px 14px rgba(57,148,168,.30) !important;
  transition: all .14s ease !important;
}

#check-domain-availability .search .btn-success:hover,
.whois .search .btn-success:hover {
  background: linear-gradient(180deg, #2a7a92, #1d6478) !important;
  box-shadow: 0 8px 22px rgba(57,148,168,.40) !important;
  transform: translateY(-1px) !important;
}

/* Ghost: Transfer + Order Other Items */
#check-domain-availability .search .btn-light,
#check-domain-availability .search a.btn-light,
.whois .search .btn-light,
.whois .search a.btn-light {
  display: inline-flex !important;
  align-items: center !important;
  gap: 7px !important;
  padding: 10px 18px !important;
  border-radius: 999px !important;
  background: #fff !important;
  border: 1px solid rgba(15,23,42,.14) !important;
  color: rgba(15,23,42,.65) !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  box-shadow: none !important;
  text-decoration: none !important;
  transition: all .12s ease !important;
}

#check-domain-availability .search .btn-light:hover,
#check-domain-availability .search a.btn-light:hover,
.whois .search .btn-light:hover,
.whois .search a.btn-light:hover {
  border-color: rgba(57,148,168,.30) !important;
  background: rgba(57,148,168,.05) !important;
  color: #0f172a !important;
  text-decoration: none !important;
}

/* ── Divider ── */
#check-domain-availability hr,
.whois ~ hr {
  border: none !important;
  border-top: 1px solid rgba(15,23,42,.07) !important;
  margin: 20px 0 !important;
}

/* ── TLD Pricing table ── */
#check-domain-availability .table-responsive,
.col-md-12 > .p-3.table-responsive {
  border-radius: 12px !important;
  overflow: hidden !important;
  border: 1px solid rgba(15,23,42,.08) !important;
  padding: 0 !important;
  margin: 0 !important;
}

#check-domain-availability .table,
.col-md-12 > .p-3.table-responsive .table {
  border: none !important;
  border-radius: 0 !important;
  margin: 0 !important;
  background: #fff !important;
}

#check-domain-availability .table thead th,
.col-md-12 > .p-3.table-responsive .table thead th {
  background: #f8fafc !important;
  font-size: 10px !important;
  font-weight: 800 !important;
  letter-spacing: .09em !important;
  text-transform: uppercase !important;
  color: rgba(15,23,42,.40) !important;
  padding: 10px 18px !important;
  border-bottom: 1px solid rgba(15,23,42,.07) !important;
  border-top: none !important;
}

#check-domain-availability .table tbody td,
.col-md-12 > .p-3.table-responsive .table tbody td {
  padding: 11px 18px !important;
  font-size: 13px !important;
  color: rgba(15,23,42,.75) !important;
  border-bottom: 1px solid rgba(15,23,42,.045) !important;
  vertical-align: middle !important;
  background: #fff !important;
}

/* Override Bootstrap striped */
#check-domain-availability .table-striped > tbody > tr:nth-of-type(odd) > td,
.col-md-12 > .p-3 .table-striped > tbody > tr:nth-of-type(odd) > td {
  background: rgba(15,23,42,.018) !important;
}

/* TLD name — monospace + bold */
#check-domain-availability .table tbody td:first-child,
.col-md-12 > .p-3.table-responsive .table tbody td:first-child {
  font-weight: 700 !important;
  color: #0f172a !important;
  font-family: 'SF Mono', 'Fira Code', monospace !important;
  font-size: 13px !important;
}

/* Period labels */
#check-domain-availability .table tbody td small,
.col-md-12 > .p-3.table-responsive .table tbody td small {
  display: block !important;
  font-size: 11px !important;
  color: rgba(15,23,42,.35) !important;
  margin-top: 1px !important;
  font-family: inherit !important;
}

#check-domain-availability .table tbody tr:last-child td,
.col-md-12 > .p-3.table-responsive .table tbody tr:last-child td {
  border-bottom: none !important;
}

/* Show All row */
#check-domain-availability .table .tld_pricing_show td,
.col-md-12 > .p-3.table-responsive .table .tld_pricing_show td {
  padding: 0 !important;
  background: #fff !important;
  border-bottom: none !important;
}

#check-domain-availability .table .tld_pricing_show .btn,
.col-md-12 > .p-3.table-responsive .table .tld_pricing_show .btn {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  padding: 12px !important;
  border-radius: 0 !important;
  background: #f8fafc !important;
  border: none !important;
  border-top: 1px solid rgba(15,23,42,.06) !important;
  color: rgba(15,23,42,.50) !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  box-shadow: none !important;
  transition: background .12s ease, color .12s ease !important;
}

#check-domain-availability .table .tld_pricing_show .btn:hover,
.col-md-12 > .p-3.table-responsive .table .tld_pricing_show .btn:hover {
  background: rgba(57,148,168,.06) !important;
  color: #2a7a92 !important;
}

/* ── Mobile ── */
@media (max-width: 767px) {
  #check-domain-availability .card-body,
.whois .card-order { padding: 16px !important; }
  #check-domain-availability .well,
.whois .card-order { padding: 14px !important; }
  #check-domain-availability .search .btn-group,
.whois .search .btn-group { flex-direction: column !important; width: 100% !important; }
  #check-domain-availability .search .btn-group > * { width: 100% !important; justify-content: center !important; }
  .card-steps .row { flex-wrap: wrap !important; }
  .card-steps .col-md-3 { flex: 0 0 50% !important; border-right: 1px solid rgba(15,23,42,.06) !important; border-bottom: 1px solid rgba(15,23,42,.06) !important; }
}

/* ─────────────────────────────────────────────────────────────
   DOMAIN SEARCH — TLD PILL FIX
   The well has a globe bg image from Blesta's default styles.
   TLD checkboxes need JS-assisted checked class since :has()
   may not be available in older browsers.
───────────────────────────────────────────────────────────── */

/* Kill globe background watermark */
#check-domain-availability .well,
#check-domain-availability .whois,
#check-domain-availability .whois > .row,
.order .well {
  background-image: none !important;
  background-color: #f8fafc !important;
}

/* Hide native checkboxes completely — label IS the pill */
#check-domain-availability .tlds input[type="checkbox"],
.whois .tlds input[type="checkbox"] {
  position: absolute !important;
  opacity: 0 !important;
  width: 0 !important;
  height: 0 !important;
  pointer-events: none !important;
}

/* Base pill — fully label-driven */
#check-domain-availability .spotlight_tld,
#check-domain-availability .normal_tld,
.whois .spotlight_tld,
.whois .normal_tld {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 5px 14px !important;
  border-radius: 999px !important;
  border: 1px solid rgba(15,23,42,.13) !important;
  background: #fff !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  color: rgba(15,23,42,.65) !important;
  cursor: pointer !important;
  transition: all .12s ease !important;
  margin: 0 !important;
  line-height: 1.4 !important;
  user-select: none !important;
  gap: 0 !important;
}

#check-domain-availability .spotlight_tld:hover,
#check-domain-availability .normal_tld:hover,
.whois .spotlight_tld:hover,
.whois .normal_tld:hover {
  border-color: rgba(57,148,168,.38) !important;
  background: rgba(57,148,168,.07) !important;
  color: #1d6478 !important;
}

/* Checked state via JS-added class */
#check-domain-availability .spotlight_tld.nx-checked,
#check-domain-availability .normal_tld.nx-checked {
  border-color: #3994A8 !important;
  background: rgba(57,148,168,.14) !important;
  color: #1d6478 !important;
  font-weight: 700 !important;
  box-shadow: 0 0 0 1px rgba(57,148,168,.25) !important;
}

/* Also handle native :has for modern browsers */
#check-domain-availability .spotlight_tld:has(input:checked),
#check-domain-availability .normal_tld:has(input:checked),
.whois .spotlight_tld:has(input:checked),
.whois .normal_tld:has(input:checked),
.whois .nx-checked {
  border-color: #3994A8 !important;
  background: rgba(57,148,168,.14) !important;
  color: #1d6478 !important;
  font-weight: 700 !important;
  box-shadow: 0 0 0 1px rgba(57,148,168,.25) !important;
}

/* Show All button */
#check-domain-availability .show_more.btn,
#check-domain-availability a.show_more {
  display: inline-flex !important;
  align-items: center !important;
  padding: 5px 13px !important;
  border-radius: 999px !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  border: 1.5px dashed rgba(57,148,168,.40) !important;
  background: transparent !important;
  color: #2a7a92 !important;
  box-shadow: none !important;
  text-decoration: none !important;
  cursor: pointer !important;
  margin: 0 !important;
  transition: all .12s ease !important;
}

#check-domain-availability .show_more.btn:hover,
#check-domain-availability a.show_more:hover {
  background: rgba(57,148,168,.08) !important;
  border-color: rgba(57,148,168,.60) !important;
  text-decoration: none !important;
}

/* ── Kill globe watermark — Blesta injects it via inline style on .whois ── */
#check-domain-availability .whois,
#check-domain-availability .whois > .row > [class*="col"],
.order .whois,
.card-content .whois {
  background-image: none !important;
  background: transparent !important;
}

/* Also nuke any element with globe bg inside the card */
#check-domain-availability [style*="background"] {
  background-image: none !important;
}

/* ── Nuclear globe kill — covers all possible injection points ── */
#check-domain-availability *,
#check-domain-availability .whois,
#check-domain-availability .whois *,
#check-domain-availability .col-md-8,
#check-domain-availability .card-content,
#check-domain-availability .card-body > .col-md-12,
.order #check-domain-availability * {
  background-image: none !important;
}

/* ── Widen domain search form — remove col-md-8 width cap ── */
#check-domain-availability .col-md-8.col-md-offset-2,
.whois .col-md-8 {
  width: 100% !important;
  max-width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  float: none !important;
  padding: 0 !important;
}

/* ── Full-width well + centered buttons ── */
#check-domain-availability .well,
.whois .card-order {
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

#check-domain-availability .search,
.whois .search {
  display: flex !important;
  justify-content: flex-start !important;
}

#check-domain-availability .search .btn-group,
.whois .search .btn-group {
  justify-content: flex-start !important;
}

/* ── Full-width domain search — remove all Bootstrap column constraints ── */
#check-domain-availability .whois {
  padding: 0 !important;
}

#check-domain-availability .whois > .row {
  margin: 0 !important;
  display: block !important;
  width: 100% !important;
}

#check-domain-availability .whois .col-md-8,
#check-domain-availability .whois .col-md-offset-2,
#check-domain-availability .whois [class*="col-"] {
  width: 100% !important;
  max-width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  float: none !important;
}

/* ── TLD Pricing table — mobile card layout ── */
@media (max-width: 767px) {

  /* Hide standard table structure */
  #check-domain-availability .table-responsive,
.col-md-12 > .p-3.table-responsive {
    border: none !important;
    border-radius: 0 !important;
    padding: 0 !important;
  }

  #check-domain-availability .table,
  #check-domain-availability .table thead,
  #check-domain-availability .table tbody,
  #check-domain-availability .table tr,
  #check-domain-availability .table td,
  #check-domain-availability .table th {
    display: block !important;
    width: 100% !important;
  }

  /* Hide header row */
  #check-domain-availability .table thead tr {
    display: none !important;
  }

  /* Each row = a card */
  #check-domain-availability .table tbody tr.tld_pricing {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    background: #fff !important;
    border: 1px solid rgba(15,23,42,.08) !important;
    border-radius: 12px !important;
    margin-bottom: 8px !important;
    padding: 12px 14px !important;
    box-shadow: 0 1px 4px rgba(15,23,42,.05) !important;
  }

  /* TLD name — big + bold, takes full left */
  #check-domain-availability .table tbody tr.tld_pricing td:first-child {
    flex: 0 0 auto !important;
    width: auto !important;
    font-size: 15px !important;
    font-weight: 800 !important;
    color: #0f172a !important;
    padding: 0 12px 0 0 !important;
    border: none !important;
    min-width: 70px !important;
  }

  /* Price cells — inline chips */
  #check-domain-availability .table tbody tr.tld_pricing td:not(:first-child) {
    flex: 1 1 auto !important;
    width: auto !important;
    padding: 0 6px !important;
    border: none !important;
    font-size: 12px !important;
    color: rgba(15,23,42,.65) !important;
    text-align: center !important;
  }

  /* Add labels above each price via data attribute */
  #check-domain-availability .table tbody tr.tld_pricing td:nth-child(2)::before {
    content: "Register" !important;
    display: block !important;
    font-size: 10px !important;
    font-weight: 700 !important;
    letter-spacing: .06em !important;
    text-transform: uppercase !important;
    color: rgba(15,23,42,.35) !important;
    margin-bottom: 2px !important;
  }

  #check-domain-availability .table tbody tr.tld_pricing td:nth-child(3)::before {
    content: "Transfer" !important;
    display: block !important;
    font-size: 10px !important;
    font-weight: 700 !important;
    letter-spacing: .06em !important;
    text-transform: uppercase !important;
    color: rgba(15,23,42,.35) !important;
    margin-bottom: 2px !important;
  }

  #check-domain-availability .table tbody tr.tld_pricing td:nth-child(4)::before {
    content: "Renew" !important;
    display: block !important;
    font-size: 10px !important;
    font-weight: 700 !important;
    letter-spacing: .06em !important;
    text-transform: uppercase !important;
    color: rgba(15,23,42,.35) !important;
    margin-bottom: 2px !important;
  }

  /* Price amount bold */
  #check-domain-availability .table tbody tr.tld_pricing td:not(:first-child) {
    font-weight: 700 !important;
    color: #0f172a !important;
  }

  /* Period (1 Year) */
  #check-domain-availability .table tbody tr.tld_pricing td small {
    font-size: 10px !important;
    color: rgba(15,23,42,.35) !important;
    font-weight: 500 !important;
  }

  /* Show All row */
  #check-domain-availability .table tbody tr.tld_pricing_show {
    display: block !important;
    margin-top: 4px !important;
  }

  #check-domain-availability .table tbody tr.tld_pricing_show td {
    padding: 0 !important;
    border-radius: 10px !important;
    overflow: hidden !important;
  }
}

/* ─────────────────────────────────────────────────────────────
   ORDER FLOW — Step 2: Package Selection
   Path: /order/main/packages/* and /order/config/index/*
───────────────────────────────────────────────────────────── */

/* ── Layout: packages + cart sidebar ── */
.container-md > .col-md-9,
.container-md > .col-md-3 {
  padding: 0 !important;
}

.container-md > .col-md-9 {
  padding-right: 10px !important;
}

/* ── Package group card ── */
#self-managed-hosting,
.container-md .col-md-9 > .card {
  border-radius: 16px !important;
  border: 1px solid rgba(15,23,42,.08) !important;
  background: #fff !important;
  box-shadow: 0 2px 12px rgba(15,23,42,.06) !important;
  overflow: hidden !important;
}

#self-managed-hosting > .card-header,
.container-md .col-md-9 > .card > .card-header {
  font-size: 14px !important;
  font-weight: 900 !important;
  letter-spacing: -0.01em !important;
  color: #0f172a !important;
  background: #f8fafc !important;
  border-bottom: 1px solid rgba(15,23,42,.06) !important;
  padding: 14px 20px !important;
}

#self-managed-hosting .card-body,
.container-md .col-md-9 > .card .card-body {
  padding: 0 !important;
}

/* ── Each package row ── */
#self-managed-hosting .card-body > strong,
#self-managed-hosting .card-body > .clearfix ~ strong {
  display: block !important;
  font-size: 15px !important;
  font-weight: 800 !important;
  color: #0f172a !important;
  padding: 20px 20px 6px !important;
  letter-spacing: -0.01em !important;
}

/* ── Package: wrap title + form in a flex row ── */
#self-managed-hosting .card-body > strong {
  padding-bottom: 0 !important;
}

/* Description */
#self-managed-hosting .pkg-description {
  padding: 4px 20px 12px !important;
  font-size: 13px !important;
  color: rgba(15,23,42,.55) !important;
  line-height: 1.65 !important;
}

#self-managed-hosting .pkg-description p {
  margin: 0 0 4px !important;
  font-size: 13px !important;
  color: rgba(15,23,42,.55) !important;
}

#self-managed-hosting .pkg-description strong {
  font-size: 13px !important;
  font-weight: 700 !important;
  color: rgba(15,23,42,.75) !important;
  padding: 0 !important;
  display: inline !important;
}

/* ── Pricing form row (float-right) ── */
#self-managed-hosting .float-right {
  float: none !important;
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 0 20px 18px !important;
  flex-wrap: wrap !important;
}

#self-managed-hosting .float-right .form-group {
  margin: 0 !important;
  flex: 1 1 auto !important;
  min-width: 0 !important;
}

/* Pricing select */
#self-managed-hosting .float-right select.form-control {
  border-radius: 10px !important;
  border: 1.5px solid rgba(15,23,42,.12) !important;
  background: #fff !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  color: #0f172a !important;
  padding: 8px 12px !important;
  height: auto !important;
  box-shadow: 0 1px 4px rgba(15,23,42,.05) !important;
  width: 100% !important;
  cursor: pointer !important;
  transition: border-color .12s ease !important;
}

#self-managed-hosting .float-right select.form-control:focus {
  border-color: #3994A8 !important;
  box-shadow: 0 0 0 3px rgba(57,148,168,.12) !important;
}

/* Add to Cart button */
#self-managed-hosting .float-right .btn {
  display: inline-flex !important;
  align-items: center !important;
  gap: 7px !important;
  padding: 9px 20px !important;
  border-radius: 999px !important;
  background: linear-gradient(180deg, #3994A8, #2a7a92) !important;
  border: none !important;
  color: #fff !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  white-space: nowrap !important;
  box-shadow: 0 4px 12px rgba(57,148,168,.28) !important;
  transition: all .14s ease !important;
  flex-shrink: 0 !important;
}

#self-managed-hosting .float-right .btn:hover {
  background: linear-gradient(180deg, #2a7a92, #1d6478) !important;
  box-shadow: 0 8px 20px rgba(57,148,168,.38) !important;
  transform: translateY(-1px) !important;
  color: #fff !important;
}

/* Hide clearfix */
#self-managed-hosting .clearfix {
  display: none !important;
}

/* Divider between packages */
#self-managed-hosting .card-body > hr {
  margin: 0 20px !important;
  border: none !important;
  border-top: 1px solid rgba(15,23,42,.07) !important;
}

/* ── Cart Sidebar (#summary_section) ── */
#summary_section .card {
  border-radius: 16px !important;
  border: 1px solid rgba(15,23,42,.08) !important;
  background: #fff !important;
  box-shadow: 0 2px 10px rgba(15,23,42,.05) !important;
  position: sticky !important;
  top: 80px !important;
}

#summary_section .card-header {
  font-size: 13px !important;
  font-weight: 800 !important;
  letter-spacing: .06em !important;
  text-transform: uppercase !important;
  color: rgba(15,23,42,.40) !important;
  background: #f8fafc !important;
  border-bottom: 1px solid rgba(15,23,42,.06) !important;
  padding: 12px 16px !important;
}

#summary_section .card-body {
  padding: 14px 16px !important;
}

/* Empty cart alert */
#summary_section .alert-warning {
  border-radius: 10px !important;
  background: rgba(245,158,11,.07) !important;
  border: 1px solid rgba(245,158,11,.20) !important;
  color: rgba(15,23,42,.65) !important;
  font-size: 13px !important;
  padding: 10px 12px !important;
  margin-bottom: 12px !important;
}

/* Coupon link */
#summary_section .card-body > p > a {
  font-size: 13px !important;
  font-weight: 700 !important;
  color: #2a7a92 !important;
  text-decoration: none !important;
}

#summary_section .card-body > p > a:hover {
  text-decoration: underline !important;
}

/* Coupon input */
#summary_section .input-group input {
  border-radius: 10px 0 0 10px !important;
  border: 1.5px solid rgba(15,23,42,.12) !important;
  font-size: 13px !important;
  padding: 8px 12px !important;
  height: auto !important;
}

#summary_section .input-group-append .btn {
  border-radius: 0 10px 10px 0 !important;
  background: #f1f5f9 !important;
  border: 1.5px solid rgba(15,23,42,.12) !important;
  border-left: none !important;
  color: rgba(15,23,42,.65) !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  padding: 8px 14px !important;
}

/* ── Highlight package on hover ── */
#self-managed-hosting .card-body > strong {
  cursor: default !important;
}

/* Package section hover highlight */
#self-managed-hosting .card-body > strong,
#self-managed-hosting .card-body > .pkg-description,
#self-managed-hosting .card-body > .float-right {
  transition: background .12s ease !important;
}

/* Mobile */
@media (max-width: 991px) {
  .container-md > .col-md-9 {
    padding-right: 0 !important;
    margin-bottom: 16px !important;
  }

  #self-managed-hosting .float-right {
    flex-direction: column !important;
    align-items: stretch !important;
  }

  #self-managed-hosting .float-right .btn {
    justify-content: center !important;
  }
}



/* ── Package page: sidebar layout — float-based, works with Bootstrap ── */

/* Steps row: full width */
.nx-has-cart > .col-md-12 {
  width: 100% !important;
  float: none !important;
  clear: both !important;
  padding: 0 0 16px 0 !important;
  display: block !important;
}

/* Packages: float left, 73% width */
.nx-has-cart > .col-md-9 {
  float: left !important;
  width: calc(100% - 276px) !important;
  padding: 0 !important;
  display: block !important;
}

/* Cart sidebar: float right, fixed 260px */
.nx-has-cart > .col-md-3,
.nx-has-cart > #summary_section {
  float: right !important;
  width: 260px !important;
  padding: 0 !important;
  display: block !important;
}

/* Clearfix after floats */
.nx-has-cart::after {
  content: "" !important;
  display: table !important;
  clear: both !important;
}

@media (max-width: 991px) {
  .nx-has-cart > .col-md-9,
  .nx-has-cart > .col-md-3,
  .nx-has-cart > #summary_section {
    float: none !important;
    width: 100% !important;
    display: block !important;
  }
}

/* ══════════════════════════════════════════════════════════
   STEP 2 — CONFIGURATION  (#configuration card)
══════════════════════════════════════════════════════════ */

/* Card wrapper */
#configuration {
  border-radius: 16px !important;
  border: 1px solid rgba(15,23,42,.08) !important;
  background: #fff !important;
  box-shadow: 0 2px 12px rgba(15,23,42,.06) !important;
  overflow: hidden !important;
}

/* "Configuration" header */
#configuration .card-header {
  font-size: 15px !important;
  font-weight: 900 !important;
  letter-spacing: -0.01em !important;
  color: #0f172a !important;
  padding: 14px 20px !important;
  border-bottom: 1px solid rgba(15,23,42,.07) !important;
  background: #fff !important;
}

/* card-body inner padding */
#configuration .card-body {
  padding: 20px !important;
}

/* Section headings: h5 inside the form (Term and Price, Configurable Options, etc.) */
#configuration .card-body h5 {
  font-size: 11px !important;
  font-weight: 800 !important;
  letter-spacing: .07em !important;
  text-transform: uppercase !important;
  color: rgba(15,23,42,.38) !important;
  margin: 20px 0 10px !important;
  padding-bottom: 6px !important;
  border-bottom: 1px solid rgba(15,23,42,.06) !important;
}

#configuration .card-body h5:first-child {
  margin-top: 0 !important;
}

/* Standalone section labels (e.g. "Web Services") */
#configuration .card-body > form > label {
  font-size: 13px !important;
  font-weight: 700 !important;
  color: rgba(15,23,42,.70) !important;
  display: block !important;
  margin: 14px 0 8px !important;
}

/* Form group labels */
#configuration .form-group label {
  font-size: 13px !important;
  font-weight: 700 !important;
  color: rgba(15,23,42,.70) !important;
  margin-bottom: 6px !important;
  display: block !important;
}

/* HR divider above Add-Ons */
#configuration .card-body hr {
  border: none !important;
  border-top: 1px solid rgba(15,23,42,.07) !important;
  margin: 20px 0 !important;
}

/* ── RADIO OPTION ROWS ── */
/* Each .radio div */
#configuration .radio {
  margin: 0 0 6px !important;
  padding: 0 !important;
}

/* The label wrapping the radio + text */
#configuration .radio label {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 10px 14px !important;
  border-radius: 10px !important;
  border: 1px solid rgba(15,23,42,.09) !important;
  background: #f8fafc !important;
  cursor: pointer !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  color: rgba(15,23,42,.72) !important;
  transition: all .12s ease !important;
  width: 100% !important;
  box-sizing: border-box !important;
  margin: 0 !important;
  line-height: 1.4 !important;
}

#configuration .radio label:hover {
  border-color: rgba(57,148,168,.30) !important;
  background: rgba(57,148,168,.05) !important;
  color: #0f172a !important;
}

/* Radio input inside label */
#configuration .radio input[type="radio"] {
  width: 16px !important;
  height: 16px !important;
  flex-shrink: 0 !important;
  accent-color: #3994A8 !important;
  cursor: pointer !important;
  margin: 0 !important;
}

/* Checked state — JS can't easily do :has() so we use accent-color + border trick */
#configuration .radio input[type="radio"]:checked ~ *,
#configuration .radio:has(input:checked) label {
  color: #0f172a !important;
}

#configuration .radio:has(input:checked) label {
  border-color: #3994A8 !important;
  background: rgba(57,148,168,.08) !important;
  font-weight: 700 !important;
}

/* ── CONTINUE BUTTON ── */
/* It's .btn.btn-success.float-right inside the form */
#configuration .card-body .btn-success {
  border-radius: 999px !important;
  background: linear-gradient(180deg, #3994A8, #2a7a92) !important;
  border: none !important;
  color: #fff !important;
  font-size: 14px !important;
  font-weight: 800 !important;
  padding: 11px 28px !important;
  box-shadow: 0 4px 14px rgba(57,148,168,.30) !important;
  margin-top: 20px !important;
  transition: all .14s ease !important;
}

#configuration .card-body .btn-success:hover {
  background: linear-gradient(180deg, #2a7a92, #1f6070) !important;
  box-shadow: 0 8px 22px rgba(57,148,168,.38) !important;
  transform: translateY(-1px) !important;
  color: #fff !important;
}

/* ══════════════════════════════════════════════════════════
   STEP 3 — REVIEW ORDER  (#review-order)
══════════════════════════════════════════════════════════ */

/* Card */
#review-order {
  border-radius: 16px !important;
  border: 1px solid rgba(15,23,42,.08) !important;
  background: #fff !important;
  box-shadow: 0 2px 12px rgba(15,23,42,.06) !important;
  overflow: hidden !important;
}

#review-order .card-header {
  font-size: 15px !important;
  font-weight: 900 !important;
  letter-spacing: -0.01em !important;
  color: #0f172a !important;
  padding: 14px 20px !important;
  border-bottom: 1px solid rgba(15,23,42,.07) !important;
  background: #fff !important;
}

#review-order .card-body {
  padding: 0 !important;
}

/* ── ITEMS TABLE ── */
#review-order .table-responsive {
  border-bottom: 1px solid rgba(15,23,42,.06) !important;
}

#review-order table.table {
  width: 100% !important;
  border: none !important;
  border-radius: 0 !important;
  margin: 0 !important;
}

#review-order table.table thead th {
  background: #f8fafc !important;
  font-size: 10px !important;
  font-weight: 800 !important;
  letter-spacing: .08em !important;
  text-transform: uppercase !important;
  color: rgba(15,23,42,.38) !important;
  padding: 10px 20px !important;
  border-bottom: 1px solid rgba(15,23,42,.06) !important;
  border-top: none !important;
}

#review-order table.table tbody td {
  padding: 13px 20px !important;
  font-size: 13px !important;
  color: rgba(15,23,42,.80) !important;
  border-bottom: 1px solid rgba(15,23,42,.04) !important;
  vertical-align: middle !important;
  background: #fff !important;
}

#review-order table.table tbody tr:last-child td {
  border-bottom: none !important;
}

/* Primary item row — bold description */
#review-order table.table tbody td strong {
  font-weight: 700 !important;
  color: #0f172a !important;
  font-size: 13px !important;
}

/* Sub-item row (↳ Platform...) — indented, muted */
#review-order table.table tbody tr:not(:first-child) td:first-child {
  color: rgba(15,23,42,.45) !important;
  font-size: 12px !important;
  padding-left: 36px !important;
}

/* Price column */
#review-order .price-col {
  text-align: right !important;
  white-space: nowrap !important;
}

#review-order .price-col strong {
  font-size: 14px !important;
  font-weight: 800 !important;
  color: #0f172a !important;
}

/* Quantity column */
#review-order table.table tbody td:nth-child(3) {
  color: rgba(15,23,42,.40) !important;
  font-size: 12px !important;
}

/* ── EDIT / REMOVE BUTTONS ── */
#review-order .btn-group .btn-light,
#review-order .btn-group .btn-xs {
  border-radius: 999px !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  padding: 4px 10px !important;
  border: 1px solid rgba(15,23,42,.12) !important;
  background: #fff !important;
  color: rgba(15,23,42,.65) !important;
  box-shadow: none !important;
}

#review-order .btn-group .btn-light:hover {
  border-color: rgba(57,148,168,.30) !important;
  background: rgba(57,148,168,.06) !important;
  color: #0f172a !important;
}

#review-order .btn-group .btn-danger {
  border-radius: 999px !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  padding: 4px 10px !important;
  background: rgba(239,68,68,.10) !important;
  border: 1px solid rgba(239,68,68,.20) !important;
  color: #991b1b !important;
  box-shadow: none !important;
}

#review-order .btn-group .btn-danger:hover {
  background: rgba(239,68,68,.18) !important;
  border-color: rgba(239,68,68,.30) !important;
}

/* ── TOTALS BOX ── */
#review-order .totals-box {
  padding: 20px !important;
}

#review-order .totals-box table {
  width: 100% !important;
  border: 1px solid rgba(15,23,42,.08) !important;
  border-radius: 12px !important;
  overflow: hidden !important;
  background: #f8fafc !important;
}

#review-order .totals-box table td {
  padding: 10px 16px !important;
  font-size: 13px !important;
  color: rgba(15,23,42,.65) !important;
  border-bottom: 1px solid rgba(15,23,42,.05) !important;
  background: transparent !important;
}

#review-order .totals-box table tr:last-child td {
  border-bottom: none !important;
}

/* "Total Due Today" row — highlight */
#review-order .totals-box table tr:nth-child(2) td {
  font-weight: 800 !important;
  color: #0f172a !important;
  background: rgba(57,148,168,.06) !important;
}

#review-order .totals-box table td strong {
  font-weight: 800 !important;
  color: #0f172a !important;
  font-size: 14px !important;
}

/* Label column right-align */
#review-order .totals-box table td:first-child span.float-right {
  display: block !important;
  text-align: right !important;
}

/* ── BOTTOM ACTION BUTTONS ── */
#review-order .card-body > .row:last-child {
  padding: 16px 20px !important;
  border-top: 1px solid rgba(15,23,42,.06) !important;
  background: #fafbfc !important;
}

/* "Order More Items" ghost button */
#review-order .btn-group .btn-light:not(.btn-xs) {
  border-radius: 999px !important;
  padding: 10px 20px !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  border: 1px solid rgba(15,23,42,.14) !important;
  background: #fff !important;
  color: rgba(15,23,42,.75) !important;
  box-shadow: 0 1px 4px rgba(15,23,42,.06) !important;
}

#review-order .btn-group .btn-light:not(.btn-xs):hover {
  border-color: rgba(57,148,168,.28) !important;
  color: #0f172a !important;
}

/* "Checkout" primary button */
#review-order .btn-group .btn-success:not(.btn-xs) {
  border-radius: 999px !important;
  padding: 10px 24px !important;
  font-size: 13px !important;
  font-weight: 800 !important;
  background: linear-gradient(180deg, #3994A8, #2a7a92) !important;
  border: none !important;
  color: #fff !important;
  box-shadow: 0 4px 14px rgba(57,148,168,.30) !important;
}

#review-order .btn-group .btn-success:not(.btn-xs):hover {
  background: linear-gradient(180deg, #2a7a92, #1f6070) !important;
  box-shadow: 0 8px 22px rgba(57,148,168,.38) !important;
  transform: translateY(-1px) !important;
  color: #fff !important;
}

/* ── STEP 3 MOBILE ── */
@media (max-width: 767px) {

  /* Switch table to card-per-row layout */
  #review-order table.table thead {
    display: none !important;
  }

  #review-order table.table,
  #review-order table.table tbody,
  #review-order table.table tr,
  #review-order table.table td {
    display: block !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  /* Each row becomes a card */
  #review-order table.table tbody tr {
    border: 1px solid rgba(15,23,42,.08) !important;
    border-radius: 12px !important;
    margin: 0 16px 8px !important;
    padding: 12px !important;
    background: #fff !important;
    width: auto !important;
  }

  /* Reset td padding inside card rows */
  #review-order table.table tbody td {
    padding: 4px 0 !important;
    border: none !important;
    font-size: 13px !important;
  }

  /* Description cell — full width, bold, wrap */
  #review-order table.table tbody td:first-child {
    font-size: 13px !important;
    font-weight: 700 !important;
    color: #0f172a !important;
    word-break: break-word !important;
    white-space: normal !important;
    padding-bottom: 8px !important;
    padding-left: 0 !important;
    max-width: 100% !important;
  }

  /* Sub-item row — less prominent */
  #review-order table.table tbody tr:not(:first-child) td:first-child {
    font-weight: 500 !important;
    color: rgba(15,23,42,.50) !important;
    font-size: 12px !important;
    padding-left: 0 !important;
  }

  /* Edit/Remove buttons cell */
  #review-order table.table tbody td:nth-child(2) {
    padding: 6px 0 !important;
  }

  #review-order table.table tbody td:nth-child(2) .btn-group {
    display: flex !important;
    flex-direction: row !important;
    gap: 6px !important;
  }

  /* Quantity cell — label it */
  #review-order table.table tbody td:nth-child(3) {
    color: rgba(15,23,42,.40) !important;
    font-size: 11px !important;
  }

  /* Price cell — larger, right-aligned */
  #review-order table.table tbody td.price-col {
    text-align: left !important;
    padding-top: 4px !important;
  }

  #review-order table.table tbody td.price-col strong {
    font-size: 15px !important;
    font-weight: 800 !important;
    color: #0f172a !important;
  }

  /* Totals box — full width */
  #review-order .col-md-4.offset-md-8,
  #review-order .totals-box {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 12px 16px !important;
  }

  #review-order .totals-box table,
  #review-order .totals-box table tbody,
  #review-order .totals-box table tr,
  #review-order .totals-box table td {
    display: table !important;
    display: revert !important;
    width: auto !important;
  }

  #review-order .totals-box table {
    width: 100% !important;
  }

  /* Action buttons — full width stacked */
  #review-order .card-body > .row:last-child {
    padding: 12px 16px !important;
  }

  #review-order .card-body > .row:last-child .btn-group {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    gap: 8px !important;
  }

  #review-order .card-body > .row:last-child .btn-group a.btn {
    width: 100% !important;
    text-align: center !important;
    justify-content: center !important;
    display: flex !important;
    align-items: center !important;
    border-radius: 999px !important;
    padding: 12px 20px !important;
  }
}

/* ── Managed Hosting / whois page header ── */
.whois .section-title h3 {
  font-size: 22px !important;
  font-weight: 900 !important;
  letter-spacing: -0.02em !important;
  color: #0f172a !important;
  margin-bottom: 6px !important;
}

.whois .section-title p {
  font-size: 13px !important;
  color: rgba(15,23,42,.50) !important;
  margin-bottom: 16px !important;
}

/* nx-checked class for JS-synced TLD pills on .whois pages */
.whois .spotlight_tld.nx-checked,
.whois .normal_tld.nx-checked {
  background: rgba(57,148,168,.12) !important;
  border-color: #3994A8 !important;
  color: #1d6478 !important;
  font-weight: 700 !important;
  box-shadow: 0 0 0 2px rgba(57,148,168,.18) !important;
}

/* ── Fix: normal_tld pills should stay hidden until Show All clicked ── */
.whois .normal_tld[style*="display:none"],
.whois .normal_tld[style*="display: none"] {
  display: none !important;
}

/* Ensure our pill styles don't override inline display:none */
.whois .spotlight_tld,
.whois .normal_tld {
  /* Only style when visible — don't force display */
}

/* Override: only show pills that don't have inline display:none */
.whois .tlds label:not([style*="display:none"]) {
  display: inline-flex !important;
}

/* ── Whois search card: full-width inner form ── */
.whois .col-md-8.col-md-offset-2,
.whois .col-md-8 {
  width: 100% !important;
  max-width: 100% !important;
  margin-left: 0 !important;
  padding: 0 !important;
  float: none !important;
}

.whois .card-order {
  width: 100% !important;
  padding: 20px !important;
}

.whois .card-order .form-control {
  width: 100% !important;
  font-size: 15px !important;
  padding: 12px 16px !important;
  border-radius: 10px !important;
}

.whois .tlds {
  margin-top: 12px !important;
  gap: 6px !important;
  flex-wrap: wrap !important;
  display: flex !important;
}

.whois .search {
  margin-top: 16px !important;
  padding-top: 16px !important;
  border-top: 1px solid rgba(15,23,42,.06) !important;
}

/* Row containing the form: remove bootstrap gutter constraints */
.whois .row {
  margin: 0 !important;
}

/* ── Whois: force inner col full width (max specificity) ── */
.container-md .whois .row .col-md-8,
.container-md .whois .row .col-md-8.col-md-offset-2,
div.whois div.row div.col-md-8 {
  width: 100% !important;
  max-width: 100% !important;
  margin-left: 0 !important;
  left: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  float: none !important;
  flex: 0 0 100% !important;
}

/* ── Whois buttons: target .search div outside .card-order too ── */
.col-md-12.whois ~ * .search .btn,
.col-md-12 .whois .search .btn,
.col-md-12 .search .btn-success,
.col-md-12 .search .btn-light,
.col-md-12 .search a.btn {
  border-radius: 999px !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  padding: 10px 20px !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 7px !important;
  transition: all .14s ease !important;
  text-decoration: none !important;
}

.col-md-12 .search .btn-success {
  background: linear-gradient(180deg, #3994A8, #2a7a92) !important;
  border: none !important;
  color: #fff !important;
  box-shadow: 0 4px 14px rgba(57,148,168,.30) !important;
}

.col-md-12 .search .btn-success:hover {
  background: linear-gradient(180deg, #2a7a92, #1d6478) !important;
  box-shadow: 0 8px 22px rgba(57,148,168,.40) !important;
  transform: translateY(-1px) !important;
  color: #fff !important;
}

.col-md-12 .search .btn-light,
.col-md-12 .search a.btn-light,
.col-md-12 .search a.btn.btn-light {
  background: #fff !important;
  border: 1px solid rgba(15,23,42,.14) !important;
  color: rgba(15,23,42,.65) !important;
  box-shadow: none !important;
}

.col-md-12 .search .btn-light:hover,
.col-md-12 .search a.btn-light:hover {
  border-color: rgba(57,148,168,.30) !important;
  background: rgba(57,148,168,.05) !important;
  color: #0f172a !important;
}

.col-md-12 .search .btn-group {
  display: flex !important;
  gap: 8px !important;
  flex-wrap: wrap !important;
}

/* ═══════════════════════════════════════════════════════════
   AJAX LIST ORDER FORMS — shared styles for all content_section
   package listing cards (SEO Local, Managed Hosting, etc.)
   Selector: .col-md-9 > .content_section
   These rules extend/mirror the #self-managed-hosting styles
═══════════════════════════════════════════════════════════ */

/* Outer card */
.col-md-9 > .content_section {
  border-radius: 16px !important;
  border: 1px solid rgba(15,23,42,.08) !important;
  box-shadow: 0 2px 10px rgba(15,23,42,.05) !important;
  background: #fff !important;
  overflow: hidden !important;
}

/* Card header — section title */
.col-md-9 > .content_section .card-header {
  font-size: 11px !important;
  font-weight: 800 !important;
  letter-spacing: .09em !important;
  text-transform: uppercase !important;
  color: rgba(15,23,42,.38) !important;
  background: #f8fafc !important;
  border-bottom: 1px solid rgba(15,23,42,.06) !important;
  padding: 12px 20px !important;
}

/* ── Package titles (strong tags) ── */
.col-md-9 > .content_section .card-body > strong {
  display: block !important;
  font-size: 16px !important;
  font-weight: 800 !important;
  color: #0f172a !important;
  padding: 22px 20px 6px !important;
  letter-spacing: -0.02em !important;
  line-height: 1.3 !important;
}

/* First strong needs less top padding (card-header covers it) */
.col-md-9 > .content_section .card-body > strong:first-child {
  padding-top: 20px !important;
}

/* ── Description text ── */
.col-md-9 > .content_section .pkg-description {
  padding: 0 20px 0 !important;
  max-height: 80px !important;
  overflow: hidden !important;
  position: relative !important;
  mask-image: linear-gradient(180deg, #000 40%, transparent 100%) !important;
  -webkit-mask-image: linear-gradient(180deg, #000 40%, transparent 100%) !important;
}

.col-md-9 > .content_section .pkg-description p {
  font-size: 13px !important;
  color: rgba(15,23,42,.50) !important;
  line-height: 1.65 !important;
  margin: 0 0 6px !important;
}

/* ── Price + Add to Cart row ── */
.col-md-9 > .content_section .float-right {
  float: none !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 10px !important;
  padding: 12px 20px 20px !important;
  flex-wrap: wrap !important;
}

.col-md-9 > .content_section .float-right .form-group {
  margin: 0 !important;
  flex: 0 0 auto !important;
}

/* Pricing select */
.col-md-9 > .content_section .float-right select.form-control {
  border-radius: 10px !important;
  border: 1.5px solid rgba(15,23,42,.12) !important;
  background: #fff !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  color: #0f172a !important;
  padding: 8px 36px 8px 12px !important;
  height: auto !important;
  box-shadow: 0 1px 4px rgba(15,23,42,.05) !important;
  cursor: pointer !important;
  min-width: 220px !important;
  transition: border-color .12s ease !important;
  appearance: auto !important;
}

.col-md-9 > .content_section .float-right select.form-control:focus {
  border-color: #3994A8 !important;
  box-shadow: 0 0 0 3px rgba(57,148,168,.12) !important;
}

/* Add to Cart button */
.col-md-9 > .content_section .float-right .btn {
  display: inline-flex !important;
  align-items: center !important;
  gap: 7px !important;
  padding: 9px 20px !important;
  border-radius: 999px !important;
  background: linear-gradient(180deg, #3994A8, #2a7a92) !important;
  border: none !important;
  color: #fff !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  white-space: nowrap !important;
  box-shadow: 0 4px 12px rgba(57,148,168,.28) !important;
  transition: all .14s ease !important;
  flex-shrink: 0 !important;
}

.col-md-9 > .content_section .float-right .btn:hover {
  background: linear-gradient(180deg, #2a7a92, #1d6478) !important;
  box-shadow: 0 8px 20px rgba(57,148,168,.38) !important;
  transform: translateY(-1px) !important;
  color: #fff !important;
}

/* Hide clearfix divs */
.col-md-9 > .content_section .clearfix {
  display: none !important;
}

/* Divider between packages */
.col-md-9 > .content_section .card-body > hr {
  margin: 0 20px !important;
  border: none !important;
  border-top: 1px solid rgba(15,23,42,.07) !important;
}

/* ── Package row hover highlight ── */
/* Each "package" is strong + .pkg-description + .float-right grouped visually */
/* We simulate a hover zone via the float-right row */
.col-md-9 > .content_section .float-right:hover {
  background: rgba(57,148,168,.02) !important;
}

/* Mobile */
@media (max-width: 767px) {
  .col-md-9 > .content_section .float-right {
    flex-direction: column !important;
    align-items: stretch !important;
    padding: 10px 16px 16px !important;
  }

  .col-md-9 > .content_section .float-right select.form-control {
    min-width: 0 !important;
    width: 100% !important;
  }

  .col-md-9 > .content_section .float-right .btn {
    width: 100% !important;
    justify-content: center !important;
  }

  .col-md-9 > .content_section .card-body > strong {
    padding: 16px 16px 6px !important;
  }

  .col-md-9 > .content_section .pkg-description {
    padding: 0 16px !important;
  }

  .col-md-9 > .content_section .card-body > hr {
    margin: 0 16px !important;
  }
}