/* DMX_ASSETS_PRECIOS_CSS_PLAN_CHANGE_MODAL_V49B: extraído desde index.php */
.dmxPlanChangeModal{
    position:fixed;
    inset:0;
    z-index:100000;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:20px;
    background:rgba(15,23,42,.62);
    backdrop-filter:blur(7px);
  }
  .dmxPlanChangeModal[hidden]{display:none!important}
  .dmxPlanChangeModalCard{
    position:relative;
    width:min(100%,540px);
    max-height:min(88vh,760px);
    overflow:auto;
    padding:26px;
    border:1px solid rgba(148,163,184,.22);
    border-radius:26px;
    background:var(--card,#fff);
    color:var(--text,#0f172a);
    box-shadow:0 28px 80px rgba(15,23,42,.30);
  }
  .dmxPlanChangeModalCard h3{
    margin:0 0 18px;
    text-align:center;
    font-size:1.35rem;
    line-height:1.35;
  }
  .dmxPlanArrow{display:inline-block;margin:0 .35rem;color:var(--muted,#64748b)}
  .dmxPlanWord{display:inline-flex;align-items:center;gap:.22em}
  .dmxPlanChangeRows{
    display:grid;
    gap:9px;
    margin:0 0 18px;
  }
  .dmxPlanChangeRow{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:18px;
    padding:11px 13px;
    border:1px solid rgba(148,163,184,.18);
    border-radius:13px;
    background:rgba(148,163,184,.07);
  }
  .dmxPlanChangeRow span{color:var(--muted,#64748b)}
  .dmxPlanChangeRow strong{text-align:right}
  .dmxPlanChangeExplain{
    margin:0 0 20px;
    color:var(--muted,#64748b);
    line-height:1.55;
    text-align:center;
  }
  .dmxPlanChangeModalActions{
    display:flex;
    justify-content:flex-end;
    gap:10px;
  }
  .dmxOperationLoading{
    position:absolute;
    inset:0;
    z-index:5;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:14px;
    padding:28px;
    border-radius:inherit;
    background:var(--card,#fff);
    text-align:center;
  }
  .dmxOperationLoading[hidden]{display:none!important}
  .dmxOperationSpinner{
    position:relative;
    width:10px;
    height:10px;
    border-radius:50%;
    background:currentColor;
    animation:dmxPricingOperationPulse 1s ease-in-out infinite;
  }
  .dmxOperationSpinner::before,
  .dmxOperationSpinner::after{
    content:"";
    position:absolute;
    top:0;
    width:10px;
    height:10px;
    border-radius:50%;
    background:currentColor;
    animation:dmxPricingOperationPulse 1s ease-in-out infinite;
  }
  .dmxOperationSpinner::before{left:-20px;animation-delay:-.2s}
  .dmxOperationSpinner::after{left:20px;animation-delay:.2s}
  .dmxOperationLoading strong{font-size:1.15rem}
  .dmxOperationLoading span{
    max-width:370px;
    color:var(--muted,#64748b);
    line-height:1.45;
  }
  .dmxOperationBusy [role="dialog"] > :not(.dmxOperationLoading){visibility:hidden}
  @keyframes dmxPricingOperationPulse{
    0%,100%{opacity:.28}
    50%{opacity:1}
  }

  /* DMX_MODAL_ANIMATIONS_V1 */
  .dmxPlanChangeModal:not([hidden]){
    animation:dmxPlanBackdropIn .18s ease-out both;
  }
  .dmxPlanChangeModal:not([hidden]) .dmxPlanChangeModalCard{
    animation:dmxPlanCardIn .24s cubic-bezier(.2,.8,.2,1) both;
    will-change:transform,opacity;
  }
  .dmxPlanChangeModal:not([hidden]) .dmxPlanChangeRow{
    animation:dmxPlanRowIn .22s ease-out both;
  }
  .dmxPlanChangeModal:not([hidden]) .dmxPlanChangeRow:nth-child(2){animation-delay:.025s}
  .dmxPlanChangeModal:not([hidden]) .dmxPlanChangeRow:nth-child(3){animation-delay:.05s}
  .dmxPlanChangeModal:not([hidden]) .dmxPlanChangeRow:nth-child(4){animation-delay:.075s}
  .dmxPlanChangeModal:not([hidden]) .dmxPlanChangeRow:nth-child(5){animation-delay:.1s}
  .dmxPlanChangeModal.dmxModalClosing{
    animation:dmxPlanBackdropOut .16s ease-in both;
  }
  .dmxPlanChangeModal.dmxModalClosing .dmxPlanChangeModalCard{
    animation:dmxPlanCardOut .16s ease-in both;
  }
  @keyframes dmxPlanBackdropIn{
    from{opacity:0}
    to{opacity:1}
  }
  @keyframes dmxPlanBackdropOut{
    from{opacity:1}
    to{opacity:0}
  }
  @keyframes dmxPlanCardIn{
    from{opacity:0;transform:translateY(14px) scale(.985)}
    to{opacity:1;transform:translateY(0) scale(1)}
  }
  @keyframes dmxPlanCardOut{
    from{opacity:1;transform:translateY(0) scale(1)}
    to{opacity:0;transform:translateY(10px) scale(.985)}
  }
  @keyframes dmxPlanRowIn{
    from{opacity:0;transform:translateY(6px)}
    to{opacity:1;transform:translateY(0)}
  }
  @media (prefers-reduced-motion:reduce){
    .dmxPlanChangeModal,
    .dmxPlanChangeModalCard,
    .dmxPlanChangeRow{
      animation:none!important;
      transition:none!important;
    }
  }

  @media(max-width:560px){
    .dmxPlanChangeModalCard{padding:18px;border-radius:22px}
    .dmxPlanChangeModalActions{flex-direction:column-reverse}
    .dmxPlanChangeModalActions .dmxBtn{width:100%;justify-content:center}
  }

/* DMX_PAYMENT_METHOD_MOBILE_DELETE_FIX_PRIMARY_CENTER_V2 */
.dmxPaymentMethodTitle{
  display:flex!important;
  align-items:center!important;
  gap:10px!important;
  width:100%!important;
}

.dmxPaymentMethodPrimaryTag{
  margin-left:auto!important;
  display:inline-flex!important;
  align-items:center!important;
  align-self:center!important;
  vertical-align:middle!important;
  line-height:1!important;
}

.dmxPaymentMethodPrimaryTag i{
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
}

@media (max-width:520px){
  .dmxPaymentMethodCard:not(.is-primary){
    position:relative!important;
    padding-right:84px!important;
  }

  .dmxPaymentMethodCard:not(.is-primary) .dmxPaymentMethodActions{
    position:static!important;
    width:100%!important;
    margin-top:12px!important;
  }

  .dmxPaymentMethodCard:not(.is-primary) .dmxPaymentMethodActions form:has(input[value="payment_method_delete"]){
    position:absolute!important;
    top:16px!important;
    right:16px!important;
    left:auto!important;
    bottom:auto!important;
    width:auto!important;
    min-width:0!important;
    margin:0!important;
    z-index:20!important;
  }

  .dmxPaymentMethodCard:not(.is-primary) .dmxPaymentMethodActions form:has(input[value="payment_method_delete"]) button{
    width:42px!important;
    height:42px!important;
    min-width:42px!important;
    padding:0!important;
    display:inline-flex!important;
    align-items:center!important;
    justify-content:center!important;
    border-radius:14px!important;
  }

  .dmxPaymentMethodCard:not(.is-primary) .dmxPaymentMethodActions form:has(input[value="payment_method_delete"]) button i{
    margin:0!important;
    line-height:1!important;
    font-size:18px!important;
  }

  .dmxPaymentMethodCard:not(.is-primary) .dmxPaymentMethodActions form:has(input[value="payment_method_delete"]) button span,
  .dmxPaymentMethodCard:not(.is-primary) .dmxPaymentMethodActions form:has(input[value="payment_method_delete"]) button .dmxBtnText{
    display:none!important;
  }
}