/* ==========================================================================
 * ALVIRAN Shop - modern checkout handoff modal
 * Loaded after the detail modal refresh to align the handoff with the new UI.
 * ========================================================================== */

body.alv-shop-page #alv-shop-app:not(.alv-shop-picker-mode) #alv-shop-modal {
  --handoff-panel: #0b0e14;
  --handoff-line: rgba(255, 255, 255, .08);
  --handoff-line-strong: rgba(255, 255, 255, .13);
  --handoff-text: #f6f7f9;
  --handoff-muted: rgba(246, 247, 249, .62);
  --handoff-faint: rgba(246, 247, 249, .42);
  --handoff-accent: #f0c572;
  --handoff-accent-soft: rgba(240, 197, 114, .14);
}

body.alv-shop-page #alv-shop-app:not(.alv-shop-picker-mode) #alv-shop-modal .alv-shop-modal-bg {
  background: rgba(4, 5, 8, .76) !important;
  backdrop-filter: blur(18px) saturate(110%) !important;
  -webkit-backdrop-filter: blur(18px) saturate(110%) !important;
}

body.alv-shop-page #alv-shop-app:not(.alv-shop-picker-mode) #alv-shop-modal .alv-shop-modal-panel {
  width: min(100vw - 42px, 520px) !important;
  max-height: calc(100svh - 44px) !important;
  border: 1px solid var(--handoff-line) !important;
  border-radius: 16px !important;
  background:
    radial-gradient(circle at 16% 0%, color-mix(in srgb, var(--shop-page-game-color, var(--handoff-accent)) 12%, transparent), transparent 36%),
    linear-gradient(180deg, rgba(255, 255, 255, .045), rgba(255, 255, 255, .016)),
    var(--handoff-panel) !important;
  color: var(--handoff-text) !important;
  box-shadow: 0 32px 90px rgba(0, 0, 0, .62) !important;
  overflow: hidden !important;
}

body.alv-shop-page #alv-shop-app:not(.alv-shop-picker-mode) #alv-shop-modal .alv-shop-modal-panel::before,
body.alv-shop-page #alv-shop-app:not(.alv-shop-picker-mode) #alv-shop-modal .alv-shop-modal-panel::after,
body.alv-shop-page #alv-shop-app:not(.alv-shop-picker-mode) #alv-shop-modal .alv-shop-modal-header::before,
body.alv-shop-page #alv-shop-app:not(.alv-shop-picker-mode) #alv-shop-modal .alv-shop-modal-header::after,
body.alv-shop-page #alv-shop-app:not(.alv-shop-picker-mode) #alv-shop-modal .alv-checkout-account-summary::before,
body.alv-shop-page #alv-shop-app:not(.alv-shop-picker-mode) #alv-shop-modal .alv-checkout-account-summary::after,
body.alv-shop-page #alv-shop-app:not(.alv-shop-picker-mode) #alv-shop-modal .alv-shop-modal-email-wrap::before,
body.alv-shop-page #alv-shop-app:not(.alv-shop-picker-mode) #alv-shop-modal .alv-shop-modal-email-wrap::after,
body.alv-shop-page #alv-shop-app:not(.alv-shop-picker-mode) #alv-shop-modal .alv-shop-pay-btn::before,
body.alv-shop-page #alv-shop-app:not(.alv-shop-picker-mode) #alv-shop-modal .alv-shop-pay-btn::after {
  display: none !important;
  content: none !important;
}

body.alv-shop-page #alv-shop-app:not(.alv-shop-picker-mode) #alv-shop-modal .alv-shop-modal-close {
  top: 14px !important;
  right: 14px !important;
  width: 34px !important;
  height: 34px !important;
  border: 1px solid var(--handoff-line) !important;
  border-radius: 10px !important;
  background: rgba(255, 255, 255, .045) !important;
  color: rgba(246, 247, 249, .72) !important;
  box-shadow: none !important;
}

body.alv-shop-page #alv-shop-app:not(.alv-shop-picker-mode) #alv-shop-modal .alv-shop-modal-close:hover,
body.alv-shop-page #alv-shop-app:not(.alv-shop-picker-mode) #alv-shop-modal .alv-shop-modal-close:focus-visible {
  background: rgba(255, 255, 255, .075) !important;
  border-color: var(--handoff-line-strong) !important;
  color: var(--handoff-text) !important;
}

body.alv-shop-page #alv-shop-app:not(.alv-shop-picker-mode) #alv-shop-modal .alv-checkout-sheet-head {
  display: grid !important;
  gap: 12px !important;
  padding: 16px 18px 0 !important;
}

body.alv-shop-page #alv-shop-app:not(.alv-shop-picker-mode) #alv-shop-modal .alv-checkout-progress {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  min-height: 34px !important;
  padding: 0 42px 0 0 !important;
}

body.alv-shop-page #alv-shop-app:not(.alv-shop-picker-mode) #alv-shop-modal .alv-checkout-back {
  display: inline-flex !important;
  align-items: center !important;
  gap: 7px !important;
  min-height: 30px !important;
  padding: 0 10px !important;
  border: 1px solid var(--handoff-line) !important;
  border-radius: 999px !important;
  background: rgba(255, 255, 255, .035) !important;
  color: var(--handoff-muted) !important;
  font-size: .72rem !important;
  font-weight: 650 !important;
  letter-spacing: 0 !important;
}

body.alv-shop-page #alv-shop-app:not(.alv-shop-picker-mode) #alv-shop-modal .alv-checkout-back:hover,
body.alv-shop-page #alv-shop-app:not(.alv-shop-picker-mode) #alv-shop-modal .alv-checkout-back:focus-visible {
  color: var(--handoff-text) !important;
  border-color: var(--handoff-line-strong) !important;
  background: rgba(255, 255, 255, .055) !important;
}

body.alv-shop-page #alv-shop-app:not(.alv-shop-picker-mode) #alv-shop-modal .alv-checkout-step-line {
  display: none !important;
}

body.alv-shop-page #alv-shop-app:not(.alv-shop-picker-mode) #alv-shop-modal .alv-checkout-step {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  min-height: 28px !important;
  color: var(--handoff-faint) !important;
  font-size: .68rem !important;
  font-weight: 620 !important;
}

body.alv-shop-page #alv-shop-app:not(.alv-shop-picker-mode) #alv-shop-modal .alv-checkout-step:not(.active) span {
  display: none !important;
}

body.alv-shop-page #alv-shop-app:not(.alv-shop-picker-mode) #alv-shop-modal .alv-checkout-step.active span {
  display: inline !important;
  color: var(--handoff-muted) !important;
}

body.alv-shop-page #alv-shop-app:not(.alv-shop-picker-mode) #alv-shop-modal .alv-checkout-step-dot {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 24px !important;
  height: 24px !important;
  border: 1px solid var(--handoff-line) !important;
  border-radius: 999px !important;
  background: rgba(255, 255, 255, .035) !important;
  color: var(--handoff-muted) !important;
  font-size: .68rem !important;
  font-weight: 760 !important;
}

body.alv-shop-page #alv-shop-app:not(.alv-shop-picker-mode) #alv-shop-modal .alv-checkout-step.done .alv-checkout-step-dot,
body.alv-shop-page #alv-shop-app:not(.alv-shop-picker-mode) #alv-shop-modal .alv-checkout-step.active .alv-checkout-step-dot {
  border-color: rgba(240, 197, 114, .26) !important;
  background: var(--handoff-accent-soft) !important;
  color: var(--handoff-accent) !important;
}

body.alv-shop-page #alv-shop-app:not(.alv-shop-picker-mode) #alv-shop-modal .alv-shop-modal-header {
  display: grid !important;
  grid-template-columns: 40px minmax(0, 1fr) !important;
  gap: 12px !important;
  min-height: 0 !important;
  padding: 12px 44px 12px 12px !important;
  border: 1px solid var(--handoff-line) !important;
  border-radius: 14px !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .045), rgba(255, 255, 255, .018)) !important;
}

body.alv-shop-page #alv-shop-app:not(.alv-shop-picker-mode) #alv-shop-modal .alv-shop-modal-game-badge {
  width: 40px !important;
  height: 40px !important;
  border: 1px solid color-mix(in srgb, var(--shop-page-game-color, var(--handoff-accent)) 28%, rgba(255, 255, 255, .08)) !important;
  border-radius: 11px !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .07), rgba(255, 255, 255, .024)),
    color-mix(in srgb, var(--shop-page-game-color, var(--handoff-accent)) 10%, transparent) !important;
  color: var(--handoff-text) !important;
  box-shadow: none !important;
}

body.alv-shop-page #alv-shop-app:not(.alv-shop-picker-mode) #alv-shop-modal .alv-shop-modal-title {
  color: var(--handoff-text) !important;
  font-size: 1.05rem !important;
  font-weight: 760 !important;
  line-height: 1.18 !important;
  letter-spacing: 0 !important;
}

body.alv-shop-page #alv-shop-app:not(.alv-shop-picker-mode) #alv-shop-modal .alv-shop-modal-subtitle {
  max-width: none !important;
  margin-top: 4px !important;
  color: var(--handoff-muted) !important;
  font-size: .76rem !important;
  font-weight: 500 !important;
  line-height: 1.35 !important;
  letter-spacing: 0 !important;
}

body.alv-shop-page #alv-shop-app:not(.alv-shop-picker-mode) #alv-shop-modal .alv-shop-modal-details {
  margin-top: 0 !important;
}

body.alv-shop-page #alv-shop-app:not(.alv-shop-picker-mode) #alv-shop-modal .alv-checkout-account-summary {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  gap: 8px 12px !important;
  align-items: center !important;
  padding: 12px !important;
  border: 1px solid var(--handoff-line) !important;
  border-radius: 14px !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .04), rgba(255, 255, 255, .014)) !important;
  box-shadow: none !important;
}

body.alv-shop-page #alv-shop-app:not(.alv-shop-picker-mode) #alv-shop-modal .alv-checkout-summary-head {
  display: contents !important;
}

body.alv-shop-page #alv-shop-app:not(.alv-shop-picker-mode) #alv-shop-modal .alv-checkout-summary-head span {
  grid-column: 1 !important;
  color: var(--handoff-faint) !important;
  font-size: .66rem !important;
  font-weight: 680 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}

body.alv-shop-page #alv-shop-app:not(.alv-shop-picker-mode) #alv-shop-modal .alv-checkout-summary-head strong,
body.alv-shop-page #alv-shop-app:not(.alv-shop-picker-mode) #alv-shop-modal #alv-modal-price {
  grid-column: 2 !important;
  grid-row: 1 / span 2 !important;
  align-self: center !important;
  color: var(--handoff-text) !important;
  font-size: 1.2rem !important;
  font-weight: 780 !important;
  line-height: 1 !important;
}

body.alv-shop-page #alv-shop-app:not(.alv-shop-picker-mode) #alv-shop-modal .alv-checkout-summary-title {
  grid-column: 1 / -1 !important;
  color: rgba(246, 247, 249, .9) !important;
  font-size: .82rem !important;
  font-weight: 650 !important;
  line-height: 1.22 !important;
}

body.alv-shop-page #alv-shop-app:not(.alv-shop-picker-mode) #alv-shop-modal .alv-checkout-sheet-body {
  display: grid !important;
  gap: 10px !important;
  padding: 12px 18px 8px !important;
}

body.alv-shop-page #alv-shop-app:not(.alv-shop-picker-mode) #alv-shop-modal .alv-shop-modal-email-wrap,
body.alv-shop-page #alv-shop-app:not(.alv-shop-picker-mode) #alv-shop-modal .alv-shop-coupon-details,
body.alv-shop-page #alv-shop-app:not(.alv-shop-picker-mode) #alv-shop-modal .alv-shop-consent-label,
body.alv-shop-page #alv-shop-app:not(.alv-shop-picker-mode) #alv-shop-modal .alv-shop-direct-hint {
  border: 1px solid var(--handoff-line) !important;
  border-radius: 14px !important;
  background: rgba(255, 255, 255, .024) !important;
  box-shadow: none !important;
}

body.alv-shop-page #alv-shop-app:not(.alv-shop-picker-mode) #alv-shop-modal .alv-shop-modal-email-wrap {
  display: grid !important;
  gap: 8px !important;
  padding: 12px !important;
}

body.alv-shop-page #alv-shop-app:not(.alv-shop-picker-mode) #alv-shop-modal .alv-shop-modal-label {
  color: var(--handoff-muted) !important;
  font-size: .72rem !important;
  font-weight: 680 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}

body.alv-shop-page #alv-shop-app:not(.alv-shop-picker-mode) #alv-shop-modal .alv-shop-modal-label svg {
  color: var(--handoff-accent) !important;
}

body.alv-shop-page #alv-shop-app:not(.alv-shop-picker-mode) #alv-shop-modal .alv-shop-modal-required {
  color: var(--handoff-accent) !important;
}

body.alv-shop-page #alv-shop-app:not(.alv-shop-picker-mode) #alv-shop-modal .alv-shop-modal-input,
body.alv-shop-page #alv-shop-app:not(.alv-shop-picker-mode) #alv-shop-modal #alv-shop-email {
  height: 46px !important;
  border: 1px solid rgba(255, 255, 255, .1) !important;
  border-radius: 12px !important;
  background: rgba(0, 0, 0, .24) !important;
  color: var(--handoff-text) !important;
  font-size: .9rem !important;
  font-weight: 560 !important;
}

body.alv-shop-page #alv-shop-app:not(.alv-shop-picker-mode) #alv-shop-modal .alv-shop-modal-input:focus,
body.alv-shop-page #alv-shop-app:not(.alv-shop-picker-mode) #alv-shop-modal #alv-shop-email:focus {
  border-color: rgba(240, 197, 114, .44) !important;
  outline: none !important;
  box-shadow: 0 0 0 3px rgba(240, 197, 114, .1) !important;
}

body.alv-shop-page #alv-shop-app:not(.alv-shop-picker-mode) #alv-shop-modal .alv-shop-modal-hint {
  display: block !important;
  margin: 0 !important;
  color: var(--handoff-faint) !important;
  font-size: .7rem !important;
  line-height: 1.35 !important;
}

body.alv-shop-page #alv-shop-app:not(.alv-shop-picker-mode) #alv-shop-modal .alv-shop-coupon-details {
  padding: 0 !important;
}

body.alv-shop-page #alv-shop-app:not(.alv-shop-picker-mode) #alv-shop-modal .alv-shop-coupon-summary {
  min-height: 38px !important;
  padding: 0 12px !important;
  color: var(--handoff-muted) !important;
  font-size: .78rem !important;
  font-weight: 620 !important;
}

body.alv-shop-page #alv-shop-app:not(.alv-shop-picker-mode) #alv-shop-modal .alv-shop-coupon-body {
  padding: 0 12px 12px !important;
}

body.alv-shop-page #alv-shop-app:not(.alv-shop-picker-mode) #alv-shop-modal .alv-shop-consent-label {
  grid-template-columns: 18px minmax(0, 1fr) !important;
  gap: 10px !important;
  padding: 11px 12px !important;
  color: var(--handoff-muted) !important;
  font-size: .72rem !important;
  line-height: 1.35 !important;
}

body.alv-shop-page #alv-shop-app:not(.alv-shop-picker-mode) #alv-shop-modal #alv-shop-legal {
  width: 18px !important;
  height: 18px !important;
  accent-color: var(--handoff-accent) !important;
}

body.alv-shop-page #alv-shop-app:not(.alv-shop-picker-mode) #alv-shop-modal .alv-shop-consent-label a {
  color: rgba(240, 197, 114, .9) !important;
  text-decoration: none !important;
}

body.alv-shop-page #alv-shop-app:not(.alv-shop-picker-mode) #alv-shop-modal .alv-shop-direct-hint {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 10px 12px !important;
  color: var(--handoff-muted) !important;
  font-size: .72rem !important;
  line-height: 1.35 !important;
}

body.alv-shop-page #alv-shop-app:not(.alv-shop-picker-mode) #alv-shop-modal .alv-shop-direct-hint svg {
  color: var(--handoff-accent) !important;
  flex: 0 0 auto !important;
}

body.alv-shop-page #alv-shop-app:not(.alv-shop-picker-mode) #alv-shop-modal .alv-checkout-sheet-actions {
  display: grid !important;
  gap: 10px !important;
  padding: 10px 18px 18px !important;
  border-top: 1px solid rgba(255, 255, 255, .06) !important;
  background: rgba(5, 7, 11, .48) !important;
}

body.alv-shop-page #alv-shop-app:not(.alv-shop-picker-mode) #alv-shop-modal .alv-shop-modal-buttons {
  display: grid !important;
  gap: 0 !important;
}

body.alv-shop-page #alv-shop-app:not(.alv-shop-picker-mode) #alv-shop-modal button#alv-shop-pay-stripe.alv-shop-pay-btn {
  min-height: 52px !important;
  width: 100% !important;
  justify-content: center !important;
  gap: 10px !important;
  padding: 0 18px !important;
  border: 1px solid rgba(255, 227, 166, .74) !important;
  border-radius: 13px !important;
  background:
    linear-gradient(180deg, #f7d990 0%, #d7a84d 100%) !important;
  color: #11100d !important;
  box-shadow: none !important;
  filter: none !important;
  transform: none !important;
  text-shadow: none !important;
}

body.alv-shop-page #alv-shop-app:not(.alv-shop-picker-mode) #alv-shop-modal button#alv-shop-pay-stripe.alv-shop-pay-btn:hover,
body.alv-shop-page #alv-shop-app:not(.alv-shop-picker-mode) #alv-shop-modal button#alv-shop-pay-stripe.alv-shop-pay-btn:focus-visible {
  border-color: rgba(255, 236, 190, .9) !important;
  background:
    linear-gradient(180deg, #ffe3a2 0%, #dfb358 100%) !important;
  transform: translateY(-1px) !important;
}

body.alv-shop-page #alv-shop-app:not(.alv-shop-picker-mode) #alv-shop-modal button#alv-shop-pay-stripe.alv-shop-pay-btn .alv-shop-pay-wallet {
  width: 34px !important;
  height: 34px !important;
  border: 1px solid rgba(82, 58, 18, .18) !important;
  border-radius: 10px !important;
  background: rgba(255, 248, 226, .32) !important;
  color: #46300d !important;
  box-shadow: none !important;
}

body.alv-shop-page #alv-shop-app:not(.alv-shop-picker-mode) #alv-shop-modal button#alv-shop-pay-stripe.alv-shop-pay-btn .alv-shop-pay-copy {
  display: grid !important;
  gap: 2px !important;
  text-align: left !important;
}

body.alv-shop-page #alv-shop-app:not(.alv-shop-picker-mode) #alv-shop-modal button#alv-shop-pay-stripe.alv-shop-pay-btn strong {
  color: #11100d !important;
  font-size: .92rem !important;
  font-weight: 780 !important;
  line-height: 1.1 !important;
}

body.alv-shop-page #alv-shop-app:not(.alv-shop-picker-mode) #alv-shop-modal button#alv-shop-pay-stripe.alv-shop-pay-btn small {
  color: rgba(31, 25, 11, .68) !important;
  font-size: .68rem !important;
  font-weight: 650 !important;
  line-height: 1.1 !important;
}

body.alv-shop-page #alv-shop-app:not(.alv-shop-picker-mode) #alv-shop-modal .alv-shop-modal-trust {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  color: var(--handoff-faint) !important;
  font-size: .72rem !important;
  font-weight: 560 !important;
  line-height: 1.35 !important;
  text-align: center !important;
}

body.alv-shop-page #alv-shop-app:not(.alv-shop-picker-mode) #alv-shop-modal .alv-shop-modal-trust svg {
  color: var(--handoff-accent) !important;
  flex: 0 0 auto !important;
}

body.alv-shop-page #alv-shop-app:not(.alv-shop-picker-mode) #alv-shop-modal .alv-shop-pay-loading {
  color: var(--handoff-muted) !important;
}

body.alv-shop-page #alv-shop-app:not(.alv-shop-picker-mode) #alv-shop-modal .alv-shop-modal-error {
  border-radius: 12px !important;
}

@media (max-width: 640px) {
  body.alv-shop-page #alv-shop-app:not(.alv-shop-picker-mode) #alv-shop-modal {
    padding: 8px !important;
  }

  body.alv-shop-page #alv-shop-app:not(.alv-shop-picker-mode) #alv-shop-modal .alv-shop-modal-panel {
    width: min(100%, calc(100vw - 16px)) !important;
    max-width: calc(100vw - 16px) !important;
    max-height: calc(100svh - 16px) !important;
    border-radius: 16px !important;
  }

  body.alv-shop-page #alv-shop-app:not(.alv-shop-picker-mode) #alv-shop-modal .alv-checkout-sheet-head {
    gap: 8px !important;
    padding: 10px 10px 0 !important;
  }

  body.alv-shop-page #alv-shop-app:not(.alv-shop-picker-mode) #alv-shop-modal .alv-checkout-progress {
    min-height: 30px !important;
    padding-right: 40px !important;
  }

  body.alv-shop-page #alv-shop-app:not(.alv-shop-picker-mode) #alv-shop-modal .alv-checkout-step {
    display: none !important;
  }

  body.alv-shop-page #alv-shop-app:not(.alv-shop-picker-mode) #alv-shop-modal .alv-shop-modal-header {
    grid-template-columns: 34px minmax(0, 1fr) !important;
    gap: 9px !important;
    padding: 9px 42px 9px 9px !important;
    border-radius: 12px !important;
  }

  body.alv-shop-page #alv-shop-app:not(.alv-shop-picker-mode) #alv-shop-modal .alv-shop-modal-game-badge {
    width: 34px !important;
    height: 34px !important;
    border-radius: 10px !important;
  }

  body.alv-shop-page #alv-shop-app:not(.alv-shop-picker-mode) #alv-shop-modal .alv-shop-modal-title {
    font-size: .9rem !important;
    line-height: 1.14 !important;
  }

  body.alv-shop-page #alv-shop-app:not(.alv-shop-picker-mode) #alv-shop-modal .alv-shop-modal-subtitle {
    font-size: .66rem !important;
    line-height: 1.25 !important;
  }

  body.alv-shop-page #alv-shop-app:not(.alv-shop-picker-mode) #alv-shop-modal .alv-checkout-account-summary {
    padding: 9px !important;
    border-radius: 12px !important;
  }

  body.alv-shop-page #alv-shop-app:not(.alv-shop-picker-mode) #alv-shop-modal .alv-checkout-sheet-body {
    gap: 8px !important;
    padding: 8px 10px 6px !important;
  }

  body.alv-shop-page #alv-shop-app:not(.alv-shop-picker-mode) #alv-shop-modal .alv-shop-modal-email-wrap {
    padding: 9px !important;
  }

  body.alv-shop-page #alv-shop-app:not(.alv-shop-picker-mode) #alv-shop-modal .alv-shop-modal-input,
  body.alv-shop-page #alv-shop-app:not(.alv-shop-picker-mode) #alv-shop-modal #alv-shop-email {
    height: 42px !important;
  }

  body.alv-shop-page #alv-shop-app:not(.alv-shop-picker-mode) #alv-shop-modal .alv-shop-direct-hint {
    display: none !important;
  }

  body.alv-shop-page #alv-shop-app:not(.alv-shop-picker-mode) #alv-shop-modal .alv-checkout-sheet-actions {
    padding: 8px 10px 10px !important;
  }

  body.alv-shop-page #alv-shop-app:not(.alv-shop-picker-mode) #alv-shop-modal button#alv-shop-pay-stripe.alv-shop-pay-btn {
    min-height: 48px !important;
    border-radius: 12px !important;
  }

  body.alv-shop-page #alv-shop-app:not(.alv-shop-picker-mode) #alv-shop-modal button#alv-shop-pay-stripe.alv-shop-pay-btn strong {
    font-size: .82rem !important;
  }
}