/* DamnModz Storefront UX (2026-09-15). Uses the theme's design tokens. */

/* ==========================================================================
   Compact header on phones (after scrolling)
   ========================================================================== */
/* Zero-height marker right after the header; holds the header's height while it is fixed. */
.dmz-header-spacer {
  display: block;
  height: 0;
  pointer-events: none;
}

@media (max-width: 899px) {

  html.dmz-header-compact header.dm-header {
    position: fixed !important;
    top: 0 !important;
    right: 0;
    left: 0;
    width: 100%;
    min-height: 56px !important;
    height: 56px !important;
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.35);
  }

  html.dmz-header-compact body.admin-bar header.dm-header {
    top: var(--wp-admin--admin-bar--height, 46px) !important;
  }

  html.dmz-header-compact header.dm-header .dm-header__container {
    height: 56px !important;
    min-height: 56px !important;
  }

  html.dmz-header-compact header.dm-header .dm-sub-header {
    display: none !important;
  }

  html.dmz-header-compact header.dm-header .dm-logo__image,
  html.dmz-header-compact header.dm-header .dm-logo img {
    max-height: 24px !important;
    width: 150px !important;
    max-width: 150px !important;
  }
}

@media (max-width: 899px) and (prefers-reduced-motion: no-preference) {
  html.dmz-header-compact header.dm-header {
    animation: dmz-header-in 160ms ease-out;
  }
}

@keyframes dmz-header-in {
  from {
    transform: translateY(-8px);
    opacity: 0.6;
  }
  to {
    transform: none;
    opacity: 1;
  }
}

/* Menu shortcuts (Boosting, Popular, Accounts, Wiki, Currency) inside the mobile menu */
.dm-mobile-menu__shortcuts {
  padding: 0 var(--space-lg, 1.5rem) var(--space-lg, 1.5rem);
}

.dm-mobile-menu__shortcuts-title {
  margin: 0 0 8px;
  color: var(--text-muted, #6b7280);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.dmz-mm-group {
  border-bottom: 1px solid var(--border-subtle, rgba(255, 255, 255, 0.08));
}

.dmz-mm-group > summary,
.dmz-mm-sub > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 48px;
  padding: 0;
  color: var(--text-primary, #fff);
  font-size: 16px;
  font-weight: 700;
  list-style: none;
  cursor: pointer;
}

.dmz-mm-sub > summary {
  min-height: 42px;
  font-size: 14px;
  font-weight: 600;
  color: var(--text-secondary, #9ca3af);
}

.dmz-mm-group > summary::-webkit-details-marker,
.dmz-mm-sub > summary::-webkit-details-marker {
  display: none;
}

.dmz-mm-group > summary::after,
.dmz-mm-sub > summary::after {
  content: "";
  width: 8px;
  height: 8px;
  margin-right: 4px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  color: var(--text-muted, #6b7280);
  transform: rotate(45deg) translateY(-2px);
  transition: transform 150ms ease;
}

.dmz-mm-group[open] > summary::after,
.dmz-mm-sub[open] > summary::after {
  transform: rotate(-135deg) translateY(-2px);
}

.dmz-mm-list {
  margin: 0;
  padding: 0 0 10px 12px;
  list-style: none;
}

.dmz-mm-list a {
  display: block;
  padding: 9px 0;
  color: var(--text-secondary, #9ca3af);
  font-size: 15px;
  text-decoration: none;
}

.dmz-mm-list a:hover,
.dmz-mm-list a:focus-visible {
  color: var(--text-primary, #fff);
}

.dmz-mm-section {
  display: block;
  padding: 10px 0 4px;
  color: var(--text-muted, #6b7280);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* ==========================================================================
   Search suggestions (header search overlay)
   ========================================================================== */
.dmz-suggest {
  margin-top: 10px;
  max-height: min(60vh, 460px);
  overflow-y: auto;
  overscroll-behavior: contain;
  border: 1px solid var(--border-subtle, rgba(255, 255, 255, 0.08));
  border-radius: 12px;
  background: rgb(var(--bg-secondary-rgb, 18, 18, 26));
  padding: 6px;
  text-align: left;
}

.dmz-suggest[hidden] {
  display: none !important;
}

.dmz-suggest__heading {
  padding: 8px 10px 4px;
  color: var(--text-muted, #6b7280);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.dmz-suggest__item {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 52px;
  padding: 6px 10px;
  border-radius: 10px;
  color: var(--text-primary, #fff);
  text-decoration: none;
}

.dmz-suggest__item.is-active,
.dmz-suggest__item:hover,
.dmz-suggest__item:focus-visible {
  background: rgba(255, 255, 255, 0.06);
  color: var(--text-primary, #fff);
  outline: none;
}

.dmz-suggest__media {
  flex: 0 0 40px;
  width: 40px;
  height: 40px;
  overflow: hidden;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.05);
}

.dmz-suggest__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.dmz-suggest__item--game .dmz-suggest__media img {
  object-fit: contain;
  padding: 4px;
}

.dmz-suggest__item--all {
  justify-content: center;
  min-height: 44px;
  margin-top: 4px;
  border-top: 1px solid var(--border-subtle, rgba(255, 255, 255, 0.08));
  border-radius: 0 0 10px 10px;
  color: var(--accent-primary-hover, #ef4444);
  font-weight: 700;
}

.dmz-suggest__item--all .dmz-suggest__media {
  display: none;
}

.dmz-suggest__copy {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 2px;
}

.dmz-suggest__title {
  overflow: hidden;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.3;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dmz-suggest__item--all .dmz-suggest__title {
  white-space: normal;
  text-align: center;
}

.dmz-suggest__meta {
  color: var(--text-secondary, #9ca3af);
  font-size: 13px;
  font-weight: 600;
}

.dmz-suggest__empty {
  margin: 0;
  padding: 12px 10px;
  color: var(--text-secondary, #9ca3af);
  font-size: 14px;
}

/* ==========================================================================
   Search results heading + sort
   ========================================================================== */
.search-results .dm-search-hero {
  display: none !important;
}

.dmz-search-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 24px;
  padding-top: 28px;
  padding-bottom: 18px;
}

.dmz-search-head__title {
  margin: 0;
  color: var(--text-primary, #fff);
  font-size: clamp(22px, 3.2vw, 30px);
  line-height: 1.2;
  overflow-wrap: anywhere;
}

.dmz-search-head__count {
  color: var(--text-secondary, #9ca3af);
  font-weight: 600;
}

.dmz-search-sort {
  display: flex;
  align-items: center;
  gap: 10px;
}

.dmz-search-sort__label {
  color: var(--text-secondary, #9ca3af);
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
}

.dmz-search-sort__select {
  min-height: 42px;
  padding: 0 36px 0 12px;
  border: 1px solid var(--border-medium, rgba(255, 255, 255, 0.12));
  border-radius: 10px;
  background-color: rgb(var(--bg-card-rgb, 22, 22, 31));
  color: var(--text-primary, #fff);
  font: inherit;
  font-size: 14px;
}

.dmz-search-sort__apply {
  min-height: 42px;
  padding: 0 14px;
  border: 0;
  border-radius: 10px;
  background: var(--accent-primary, #dc2626);
  color: #fff;
  font-weight: 700;
}

@media (max-width: 520px) {
  .dmz-search-head {
    padding-top: 18px;
  }

  .dmz-search-sort,
  .dmz-search-sort__select {
    width: 100%;
  }

  .dmz-search-sort__select {
    flex: 1 1 auto;
  }
}

/* ==========================================================================
   Sticky buy bar (phone product pages) - sits directly above the trust bar
   ========================================================================== */
.dmz-buybar {
  display: none;
}

@media (max-width: 899px) {
  .dmz-buybar {
    position: fixed;
    right: 0;
    bottom: calc(38px + env(safe-area-inset-bottom, 0px));
    left: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 64px;
    padding: 10px 12px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(var(--bg-secondary-rgb, 18, 18, 26), 0.97);
    box-shadow: 0 -12px 28px rgba(0, 0, 0, 0.38);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
  }

  .dmz-buybar[hidden],
  body.dm-search-open .dmz-buybar,
  body:has(.dm-mobile-menu.open) .dmz-buybar {
    display: none !important;
  }

  .dmz-buybar__info {
    display: flex;
    min-width: 0;
    flex: 1 1 auto;
    flex-direction: column;
    gap: 2px;
  }

  .dmz-buybar__name {
    overflow: hidden;
    color: var(--text-secondary, #9ca3af);
    font-size: 12px;
    font-weight: 600;
    line-height: 1.25;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .dmz-buybar__price {
    display: flex;
    align-items: baseline;
    gap: 6px;
    color: var(--text-primary, #fff);
    font-size: 18px;
    line-height: 1.1;
  }

  .dmz-buybar__price del {
    color: var(--text-muted, #6b7280);
    font-size: 13px;
    font-weight: 600;
  }

  .dmz-buybar__price strong {
    font-weight: 800;
  }

  .dmz-buybar__cta {
    flex: 0 0 auto;
    min-width: 142px;
    min-height: 44px;
    padding: 0 18px;
    border: 0;
    border-radius: 10px;
    background: var(--accent-primary, #dc2626);
    color: #fff;
    font: inherit;
    font-size: 15px;
    font-weight: 800;
    cursor: pointer;
  }

  .dmz-buybar__cta:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 2px;
  }

  html.dmz-buybar-on .dm-chat-launcher-wrap {
    bottom: calc(114px + env(safe-area-inset-bottom, 0px)) !important;
  }

  html.dmz-buybar-on .xoo-wsc-basket {
    bottom: calc(172px + env(safe-area-inset-bottom, 0px)) !important;
  }

  html.dmz-buybar-on body.single-product .dm-site-content {
    padding-bottom: 64px;
  }
}

/* ==========================================================================
   Product page: option lists as tiles (dmz-sux-product.js)
   ========================================================================== */
/* The theme's dropdown skin stays in place for its hidden native <select>;
   only its visible trigger and menu give way to the tiles. */
body.single-product .dm-product-buy-card .wcpa_field_wrap.dmz-has-tiles .dm-select__trigger,
body.single-product .dm-product-buy-card .wcpa_field_wrap.dmz-has-tiles .dm-select__menu {
  display: none !important;
}

/* Out of the field's grid so it leaves no gap; the select stays focusable for form validation. */
body.single-product .dm-product-buy-card .wcpa_field_wrap.dmz-has-tiles .dm-select {
  position: absolute !important;
  width: 100% !important;
  height: 0 !important;
  min-height: 0 !important;
  margin: 0 !important;
}

body.single-product .dm-product-buy-card .wcpa_field_wrap.dmz-has-tiles select.dm-select__native {
  height: 1px !important;
  min-height: 0 !important;
}

body.single-product .dm-product-buy-card .dmz-tiles {
  display: grid;
  gap: 8px;
  width: 100%;
  margin: 2px 0 0;
}

body.single-product .dm-product-buy-card .dmz-tiles--pills {
  grid-template-columns: repeat(auto-fit, minmax(96px, 1fr));
}

body.single-product .dm-product-buy-card .dmz-tiles--packages {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

body.single-product .dm-product-buy-card .dmz-tiles--rows {
  grid-template-columns: minmax(0, 1fr);
}

body.single-product .dm-product-buy-card .dmz-tiles .dmz-tiles__tile {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 3px;
  width: 100%;
  min-width: 0;
  min-height: 48px;
  margin: 0;
  padding: 10px 12px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.04);
  box-shadow: none;
  color: #e5e7eb;
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: 0;
  text-align: left;
  text-transform: none;
  cursor: pointer;
  transition: border-color 0.15s ease, background-color 0.15s ease;
}

body.single-product .dm-product-buy-card .dmz-tiles--pills .dmz-tiles__tile {
  align-items: center;
  min-height: 44px;
  text-align: center;
}

body.single-product .dm-product-buy-card .dmz-tiles--rows .dmz-tiles__tile {
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

body.single-product .dm-product-buy-card .dmz-tiles .dmz-tiles__label {
  min-width: 0;
  overflow-wrap: anywhere;
}

body.single-product .dm-product-buy-card .dmz-tiles .dmz-tiles__price {
  flex: none;
  color: #9ca3af;
  font-size: 13px;
  font-weight: 800;
  white-space: nowrap;
}

body.single-product .dm-product-buy-card .dmz-tiles .dmz-tiles__tile:hover {
  border-color: rgba(255, 255, 255, 0.24);
  background: rgba(255, 255, 255, 0.07);
}

body.single-product .dm-product-buy-card .dmz-tiles .dmz-tiles__tile:focus-visible {
  outline: 2px solid rgba(var(--accent-primary-rgb, 239, 68, 68), 0.9);
  outline-offset: 2px;
}

body.single-product .dm-product-buy-card .dmz-tiles .dmz-tiles__tile.is-selected {
  border-color: rgba(var(--accent-primary-rgb, 239, 68, 68), 0.95);
  background: rgba(var(--accent-primary-rgb, 239, 68, 68), 0.14);
  box-shadow: inset 0 0 0 1px rgba(var(--accent-primary-rgb, 239, 68, 68), 0.55);
  color: #fff;
}

body.single-product .dm-product-buy-card .dmz-tiles .dmz-tiles__tile.is-selected .dmz-tiles__price {
  color: #fff;
}

body.single-product .dm-product-buy-card .dmz-tiles .dmz-tiles__tile:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

body.single-product .dm-product-buy-card .dmz-tiles.is-collapsed .dmz-tiles__tile.is-extra {
  display: none;
}

body.single-product .dm-product-buy-card .dmz-tiles .dmz-tiles__more {
  grid-column: 1 / -1;
  min-height: 40px;
  margin: 0;
  padding: 8px 12px;
  border: 1px dashed rgba(255, 255, 255, 0.18);
  border-radius: 12px;
  background: transparent;
  box-shadow: none;
  color: #9ca3af;
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  text-transform: none;
  cursor: pointer;
}

body.single-product .dm-product-buy-card .dmz-tiles .dmz-tiles__more:hover,
body.single-product .dm-product-buy-card .dmz-tiles .dmz-tiles__more:focus-visible {
  border-color: rgba(255, 255, 255, 0.34);
  color: #fff;
}

@media (prefers-reduced-motion: reduce) {
  body.single-product .dm-product-buy-card .dmz-tiles .dmz-tiles__tile {
    transition: none;
  }
}

/* ==========================================================================
   Product page: order notes under the buy box (phones and tablets)
   ========================================================================== */
/* single-product.php prints the notes twice: inside the overview (desktop) and as
   .dm-product-notes-card after the buy box (stacked layout). */
.dm-product-notes-card {
  display: none;
}

@media (max-width: 1024px) {
  body.single-product .dm-product-overview__notes {
    display: none;
  }

  body.single-product .dm-product-sidebar > .dm-product-notes-card {
    display: block;
    order: 3;
    padding: 17px;
    border: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: 15px;
    background: linear-gradient(180deg, #16181f 0%, #0f1116 100%);
    color: #9ca3af;
    font-size: 14px;
    line-height: 1.6;
  }

  body.single-product .dm-product-notes-card p {
    margin: 0 0 10px;
    color: inherit;
    font-size: inherit;
    line-height: inherit;
  }

  body.single-product .dm-product-notes-card p:last-child {
    margin-bottom: 0;
  }

  body.single-product .dm-product-notes-card a {
    color: #ff6a6a;
    font-weight: 600;
  }
}

/* ==========================================================================
   Game hubs on phones: one-line headline, then the products
   ========================================================================== */
/* template-game.php repeats the hero intro + trust badges after the grid as
   .dm-game-hero-mobile-intro; phones show that copy instead of the hero's. The
   template's own phone CSS uses !important, hence the matching weight here. */
.dm-game-hero-mobile-intro {
  display: none;
}

@media (max-width: 640px) {
  .dm-game-page-wrapper .dm-game-hero .dm-game-hero__subtitle,
  .dm-game-page-wrapper .dm-game-hero .dm-game-hero__trust {
    display: none !important;
  }

  .dm-game-page-wrapper .dm-game-hero {
    padding-top: 20px !important;
    padding-bottom: 16px !important;
  }

  .dm-game-page-wrapper .dm-game-hero .dm-breadcrumbs {
    margin-bottom: 10px !important;
  }

  .dm-game-page-wrapper .dm-game-hero .dm-game-hero__title {
    max-width: 100% !important;
    margin-bottom: 0 !important;
    font-size: clamp(1.25rem, 5.6vw, 1.5rem) !important;
    line-height: 1.2 !important;
  }

  .dm-game-page-wrapper .dm-game-hero .dm-title-mobile-stack {
    display: inline !important;
  }

  .dm-game-page-wrapper .dm-game-hero-mobile-intro {
    display: block;
    padding: 28px 0 4px;
  }

  .dm-game-page-wrapper .dm-game-hero-mobile-intro .dm-game-hero__trust {
    margin: 16px 0 0 !important;
  }
}

/* ==========================================================================
   Cart bubble: not needed on cart and checkout
   ========================================================================== */
body.woocommerce-cart .xoo-wsc-basket,
body.woocommerce-checkout .xoo-wsc-basket,
body.dmz-checkout-lite .xoo-wsc-basket {
  display: none !important;
}

/* ==========================================================================
   Checkout: stripped header and footer
   ========================================================================== */
/* The stripped checkout is short, so on tall screens the footer used to stop
   short of the bottom edge with the page background showing under it. */
body.dmz-checkout-lite {
  min-height: calc(100vh - var(--wp-admin--admin-bar--height, 0px));
}

body.dmz-checkout-lite footer.dm-footer {
  position: sticky;
  top: 100vh;
}

/* Omnisend's tracking pixel is an inline image, so its wrapper adds a blank
   strip under the footer. The pixel still loads. */
#omnisend-pixel-container {
  line-height: 0;
  font-size: 0;
}

header.dm-header.dm-header--checkout {
  position: relative !important;
  min-height: 64px;
}

.dm-header--checkout .dm-header__container {
  height: 64px !important;
  min-height: 64px !important;
  gap: 16px;
}

.dm-checkout-header__meta {
  display: flex;
  align-items: center;
  gap: 18px;
}

.dm-checkout-header__secure {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--text-secondary, #9ca3af);
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
}

.dm-checkout-header__secure svg {
  color: #22c55e;
}

.dm-checkout-header__back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 40px;
  padding: 0 14px;
  border: 1px solid var(--border-medium, rgba(255, 255, 255, 0.12));
  border-radius: 999px;
  color: var(--text-primary, #fff);
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
}

.dm-checkout-header__back:hover,
.dm-checkout-header__back:focus-visible {
  border-color: rgba(255, 255, 255, 0.28);
  color: var(--text-primary, #fff);
}

@media (max-width: 520px) {
  .dm-header--checkout .dm-logo__image,
  .dm-header--checkout .dm-logo img {
    width: 132px !important;
    max-width: 132px !important;
  }

  .dm-checkout-header__meta {
    gap: 10px;
  }

  .dm-checkout-header__secure-text {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }

  .dm-checkout-header__back {
    padding: 0 12px;
  }
}

body.dmz-checkout-lite .woocommerce-form-coupon-toggle,
body.dmz-checkout-lite form.checkout_coupon {
  display: none !important;
}

/* ==========================================================================
   Checkout: express checkout row (Apple Pay, Google Pay, Link)
   ========================================================================== */
/* Shown from the first paint (the plugin keeps it display:none until a button is ready), so the
   buttons arriving never push the form down. */
body.dmz-checkout-lite .wc-stripe-banner-checkout {
  display: block;
  margin: 0 0 18px;
  padding: 0;
  border: 0;
}

body.dmz-checkout-lite .wc-stripe-banner-checkout.dmz-express-none {
  display: none !important;
}

body.dmz-checkout-lite .wc-stripe-banner-checkout fieldset {
  margin: 0;
  padding: 14px;
  border: 1px solid var(--border-subtle, rgba(255, 255, 255, 0.08));
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.02);
}

body.dmz-checkout-lite .wc-stripe-banner-checkout .banner-title {
  float: none;
  width: auto;
  margin: 0 0 10px;
  padding: 0;
  color: var(--text-secondary, #9ca3af);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-align: left;
  text-transform: uppercase;
}

/* One row of equal buttons at every width, so the row's height doesn't depend on how many wallets
   this device offers. The shimmer behind it is the placeholder until Stripe draws the first button
   (dmz-sux-checkout.js adds .dmz-express-ready). Never hide the buttons themselves while they load:
   Chrome throttles hidden iframes and Stripe then takes seconds longer to draw them. */
body.dmz-checkout-lite .wc-stripe-banner-checkout .wc_stripe_checkout_banner_gateways {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  gap: 8px;
  min-height: 40px;
  margin: 0;
  padding: 0;
  border-radius: 8px;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.04) 25%, rgba(255, 255, 255, 0.09) 50%, rgba(255, 255, 255, 0.04) 75%) 0 0 / 200% 100%;
  animation: dmz-express-shimmer 1.4s linear infinite;
}

body.dmz-checkout-lite .wc-stripe-banner-checkout.dmz-express-ready .wc_stripe_checkout_banner_gateways,
body.dmz-checkout-lite .wc-stripe-banner-checkout:not(.dmz-express-js) .wc_stripe_checkout_banner_gateways:has(> li.active) {
  background: none;
  animation: none;
}

@keyframes dmz-express-shimmer {
  to {
    background-position: -200% 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  body.dmz-checkout-lite .wc-stripe-banner-checkout .wc_stripe_checkout_banner_gateways {
    animation: none;
  }
}

body.dmz-checkout-lite .wc-stripe-banner-checkout .wc_stripe_checkout_banner_gateways > li {
  min-width: 0;
  margin: 0 !important;
  padding: 0 !important;
}

/* Wallets that aren't available on this device never get the plugin's .active class. */
body.dmz-checkout-lite .wc-stripe-banner-checkout .wc_stripe_checkout_banner_gateways > li:empty,
body.dmz-checkout-lite .wc-stripe-banner-checkout .wc_stripe_checkout_banner_gateways > li:not(.active) {
  display: none;
}

body.dmz-checkout-lite .wc-stripe-banner-checkout .wc_stripe_checkout_banner_gateways > li > * {
  width: 100% !important;
  max-width: none !important;
}

body.dmz-checkout-lite .wc-stripe-banner-checkout .banner-divider {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 16px 0 2px;
  color: var(--text-muted, #6b7280);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

body.dmz-checkout-lite .wc-stripe-banner-checkout .banner-divider::before,
body.dmz-checkout-lite .wc-stripe-banner-checkout .banner-divider::after {
  content: "";
  flex: 1 1 auto;
  height: 1px;
  background: var(--border-subtle, rgba(255, 255, 255, 0.08));
}

/* ==========================================================================
   Checkout: Cards first, other methods folded
   ========================================================================== */
form.checkout.dmz-pay-fold #payment ul.wc_payment_methods > li.dmz-pay-wallet {
  display: none !important;
}

/* Before dmz-sux-checkout.js builds the fold (html.dmz-pay-prefold comes from a <head> script): only
   Cards show, with a stand-in where the "More ways to pay" button goes, so the list never draws open
   and then collapses. */
html.dmz-pay-prefold form.checkout:not(.dmz-pay-fold) #payment ul.wc_payment_methods > li.wc_payment_method:not(.payment_method_stripe_cc) {
  display: none !important;
}

html.dmz-pay-prefold form.checkout:not(.dmz-pay-fold) #payment ul.wc_payment_methods:has(> li.payment_method_stripe_cc)::after {
  content: "";
  display: block;
  clear: none;
  height: 48px;
  margin: 10px 0;
  border: 1px dashed rgba(255, 255, 255, 0.18);
  border-radius: 12px;
}

/* Phones: the button puts its logos on a second line (.is-stacked). */
@media (max-width: 480px) {
  html.dmz-pay-prefold form.checkout:not(.dmz-pay-fold) #payment ul.wc_payment_methods:has(> li.payment_method_stripe_cc)::after {
    height: 84px;
  }
}

form.checkout.dmz-pay-fold #payment ul.wc_payment_methods:not(.dmz-pay-more-open) > li.dmz-pay-more {
  display: none !important;
}

form.checkout #payment ul.wc_payment_methods > li.dmz-pay-toggle {
  list-style: none;
  margin: 10px 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: none !important;
}

.dmz-pay-toggle__btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
  min-height: 48px;
  padding: 0 16px;
  border: 1px dashed rgba(255, 255, 255, 0.18);
  border-radius: 12px;
  background: transparent;
  color: var(--text-primary, #fff);
  font: inherit;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
}

.dmz-pay-toggle__btn:hover,
.dmz-pay-toggle__btn:focus-visible {
  border-color: rgba(255, 255, 255, 0.34);
  background: rgba(255, 255, 255, 0.03);
}

.dmz-pay-toggle__count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 26px;
  height: 22px;
  padding: 0 7px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  color: var(--text-secondary, #9ca3af);
  font-size: 12px;
}

.dmz-pay-toggle__btn[aria-expanded="true"] .dmz-pay-toggle__count,
.dmz-pay-toggle__btn[aria-expanded="true"] .dmz-pay-toggle__logos {
  display: none !important;
}

.dmz-pay-toggle__label {
  flex: none;
  text-align: left;
}

.dmz-pay-toggle__logos {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  margin-left: auto;
}

.dmz-pay-toggle__logos:empty {
  display: none;
}

/* Narrow phones: logos and "+N" on a second line under the label. */
.dmz-pay-toggle__btn.is-stacked {
  flex-wrap: wrap;
  justify-content: flex-start;
  row-gap: 8px;
  padding-block: 12px;
}

.dmz-pay-toggle__btn.is-stacked .dmz-pay-toggle__label {
  flex: 1 0 100%;
}

.dmz-pay-toggle__btn.is-stacked .dmz-pay-toggle__logos {
  margin-left: 0;
}

/* Beats WooCommerce's "#payment ul.payment_methods li img" margins. */
form.checkout #payment ul.wc_payment_methods > li.dmz-pay-toggle .dmz-pay-toggle__logos img {
  display: block;
  width: auto;
  height: 18px;
  max-width: none;
  margin: 0;
  padding: 0;
  float: none;
  border-radius: 0;
  background: none;
  box-shadow: none;
}

/* Payment logos: the module prints dark-theme versions, so the theme's white pills go. */
html body.woocommerce-checkout #payment ul.wc_payment_methods li.wc_payment_method > label img.dmz-pay-logo,
html body.woocommerce-checkout #payment ul.wc_payment_methods li.wc_payment_method > label .wc-stripe-card-icons-container,
html body.woocommerce-checkout #payment ul.wc_payment_methods li.wc_payment_method > label .wc-stripe-card-icons-container img.wc-stripe-card-icon {
  padding: 0 !important;
  border-radius: 0 !important;
  background: none !important;
}

html body.woocommerce-checkout #payment ul.wc_payment_methods li.wc_payment_method > label .wc-stripe-card-icons-container {
  gap: 4px !important;
}

/* Phones: wide wordmarks (Paysafecard) stay on the title's line. The crypto pill is unreadable smaller. */
@media (max-width: 480px) {
  html body.woocommerce-checkout #payment ul.wc_payment_methods li.wc_payment_method > label img.dmz-pay-logo:not([data-dmz-brand="pay-crypto"]) {
    max-width: 88px !important;
  }
}

/* ==========================================================================
   Checkout: coupon in the order summary + terms line
   ========================================================================== */
.dmz-coupon {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--border-subtle, rgba(255, 255, 255, 0.08));
}

.dmz-coupon__toggle {
  padding: 0;
  border: 0;
  background: none;
  color: var(--text-secondary, #9ca3af);
  font: inherit;
  font-size: 14px;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}

.dmz-coupon__toggle:hover,
.dmz-coupon__toggle:focus-visible {
  color: var(--text-primary, #fff);
}

.dmz-coupon__panel {
  margin-top: 10px;
}

.dmz-coupon__panel[hidden] {
  display: none !important;
}

.dmz-coupon__row {
  display: flex;
  gap: 8px;
}

.dmz-coupon__input {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 44px;
  padding: 0 12px;
  border: 1px solid var(--border-medium, rgba(255, 255, 255, 0.12));
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.03);
  color: var(--text-primary, #fff);
  font: inherit;
  font-size: 15px;
  text-transform: uppercase;
}

.dmz-coupon__input::placeholder {
  color: var(--text-muted, #6b7280);
  text-transform: none;
}

.dmz-coupon__apply {
  flex: 0 0 auto;
  min-height: 44px;
  padding: 0 16px;
  border: 1px solid var(--border-medium, rgba(255, 255, 255, 0.12));
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.08);
  color: var(--text-primary, #fff);
  font: inherit;
  font-size: 14px;
  font-weight: 800;
  cursor: pointer;
}

.dmz-coupon.is-busy .dmz-coupon__apply {
  opacity: 0.6;
  cursor: progress;
}

.dmz-coupon__msg {
  margin: 8px 0 0;
  font-size: 13px;
  line-height: 1.4;
}

.dmz-coupon__msg:empty {
  display: none;
}

.dmz-coupon__msg--error {
  color: #f87171;
}

.dmz-coupon__msg--success {
  color: #4ade80;
}

.dmz-terms-note {
  margin: 12px 0 0;
  color: var(--text-muted, #6b7280);
  font-size: 12px;
  line-height: 1.5;
  text-align: center;
}

.dmz-terms-note a {
  color: var(--text-secondary, #9ca3af);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.dmz-terms-note a:hover {
  color: var(--text-primary, #fff);
}

/* ==========================================================================
   Checkout: small Trustpilot rating badge
   ========================================================================== */
.dmz-tp-badge {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 6px 10px;
  margin: 14px 0 0;
  padding: 9px 12px;
  border: 1px solid var(--border-subtle, rgba(255, 255, 255, 0.08));
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.03);
  color: var(--text-secondary, #9ca3af);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none !important;
}

.dmz-tp-badge:hover,
.dmz-tp-badge:focus-visible {
  border-color: rgba(0, 182, 122, 0.45);
  color: var(--text-primary, #fff);
}

.dmz-tp-badge__brand {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--text-primary, #fff);
  font-weight: 800;
}

.dmz-tp-badge__brand svg,
.dmz-tp-badge__stars {
  display: block;
  flex: 0 0 auto;
}

.dmz-tp-badge__text strong {
  color: var(--text-primary, #fff);
  font-weight: 800;
}

/* One badge per layout: summary column on desktop, under Pay Now when stacked. */
.dmz-tp-badge--paynow {
  display: none;
}

@media (max-width: 900px) {
  .dmz-tp-badge--summary {
    display: none;
  }

  .dmz-tp-badge--paynow {
    display: flex;
  }
}

form.checkout.dmz-has-express #payment .place-order .wc-stripe-applepay-button,
form.checkout.dmz-has-express #payment .place-order .wc-stripe-payment-request-button {
  display: none !important;
}