/* Derin Web Payment Method Designer v1.2.0 - OpenCart 3 / Journal 3 */
.section-payment .dw-pmd-method-styled,
.quick-checkout-wrapper .section-payment .dw-pmd-method-styled,
.dw-pmd-method-styled{
  box-sizing:border-box!important;
  display:block!important;
  width:100%!important;
  overflow:hidden!important;
  background:var(--dw-pmd-bg,#fff)!important;
  border:1px solid var(--dw-pmd-border,#dfe3e8)!important;
  border-radius:var(--dw-pmd-radius,10px)!important;
  margin:0 0 12px!important;
  padding:0!important;
  box-shadow:none!important;
  transition:box-shadow .2s ease,border-color .2s ease,transform .2s ease;
}

.section-payment .dw-pmd-method-styled:hover,
.dw-pmd-method-styled:hover{
  box-shadow:0 4px 14px rgba(0,0,0,.06)!important;
}

/* Journal 3 can apply strong background rules to checkout rows.
   Use CSS variables + !important so frontend matches the admin preview. */
body .quick-checkout-wrapper .section-payment .section-body .dw-pmd-method-styled > .dw-pmd-heading,
.section-payment .dw-pmd-method-styled > .dw-pmd-heading,
.dw-pmd-method-styled > .dw-pmd-heading,
.dw-pmd-heading{
  display:block!important;
  box-sizing:border-box!important;
  width:100%!important;
  min-height:0!important;
  margin:0!important;
  padding:11px 15px!important;
  background:var(--dw-pmd-heading-bg,#2563eb)!important;
  background-color:var(--dw-pmd-heading-bg,#2563eb)!important;
  color:var(--dw-pmd-heading-text,#fff)!important;
  border:0!important;
  border-bottom:1px solid var(--dw-pmd-border,#dfe3e8)!important;
  border-radius:var(--dw-pmd-radius,10px) var(--dw-pmd-radius,10px) 0 0!important;
  font-size:15px!important;
  font-weight:700!important;
  line-height:1.35!important;
  letter-spacing:.01em!important;
  text-align:left!important;
  text-transform:none!important;
}

/* Force the selectable payment row to use the configured body background,
   while preserving Journal's radio/label functionality. */
body .quick-checkout-wrapper .section-payment .section-body .dw-pmd-method-styled > .radio,
.section-payment .dw-pmd-method-styled > .radio,
.dw-pmd-method-styled > .radio,
.dw-pmd-method-styled > .form-check,
.dw-pmd-method-styled > .custom-control,
.dw-pmd-method-styled > label{
  box-sizing:border-box!important;
  display:block!important;
  width:100%!important;
  min-height:0!important;
  margin:0!important;
  padding:13px 15px!important;
  background:var(--dw-pmd-bg,#fff)!important;
  background-color:var(--dw-pmd-bg,#fff)!important;
  border:0!important;
  border-radius:0 0 var(--dw-pmd-radius,10px) var(--dw-pmd-radius,10px)!important;
}

.section-payment .dw-pmd-method-styled > .radio label,
.dw-pmd-method-styled > .radio label{
  display:block!important;
  width:100%!important;
  margin:0!important;
  padding:0!important;
  background:transparent!important;
  color:inherit!important;
  cursor:pointer!important;
}

.dw-pmd-method-styled input[type=radio]{
  margin-right:7px!important;
}

.dw-pmd-method-styled img{
  max-width:100%!important;
  height:auto!important;
}

@media(max-width:767px){
  body .quick-checkout-wrapper .section-payment .section-body .dw-pmd-method-styled > .dw-pmd-heading,
  .dw-pmd-heading{
    font-size:14px!important;
    padding:10px 12px!important;
  }
  body .quick-checkout-wrapper .section-payment .section-body .dw-pmd-method-styled > .radio,
  .dw-pmd-method-styled > .radio,
  .dw-pmd-method-styled > .form-check,
  .dw-pmd-method-styled > .custom-control,
  .dw-pmd-method-styled > label{
    padding:12px!important;
  }
}


/* v1.2.0 - FrigoKit / Journal 3 real-checkout normalization
   Journal 3/custom checkout builds may draw a payment icon with a pseudo-element
   on the method wrapper. That pseudo-element takes its own line before our
   heading and causes the blank/icon strip seen on the live checkout. */
body .quick-checkout-wrapper .section-payment .section-body .dw-pmd-method-styled::before,
body .quick-checkout-wrapper .section-payment .section-body .dw-pmd-method-styled::after,
.section-payment .dw-pmd-method-styled::before,
.section-payment .dw-pmd-method-styled::after,
.dw-pmd-method-styled::before,
.dw-pmd-method-styled::after{
  content:none!important;
  display:none!important;
  width:0!important;
  height:0!important;
  margin:0!important;
  padding:0!important;
  border:0!important;
  background:none!important;
}

/* Bootstrap/Journal radio rules normally use a negative left margin and rely
   on label padding. The designer deliberately resets that layout so the radio
   cannot sit outside the rounded card and get clipped. */
body .quick-checkout-wrapper .section-payment .section-body .dw-pmd-method-styled > .radio > label,
.section-payment .dw-pmd-method-styled > .radio > label,
.dw-pmd-method-styled > .radio > label{
  display:flex!important;
  align-items:center!important;
  flex-wrap:nowrap!important;
  gap:10px!important;
  width:100%!important;
  min-height:22px!important;
  margin:0!important;
  padding:0!important;
  position:relative!important;
  overflow:visible!important;
  box-sizing:border-box!important;
}

body .quick-checkout-wrapper .section-payment .section-body .dw-pmd-method-styled input[type="radio"][name="payment_method"],
body .quick-checkout-wrapper .section-payment .section-body .dw-pmd-method-styled input[type="radio"][name^="payment_method"],
.section-payment .dw-pmd-method-styled input[type="radio"][name="payment_method"],
.section-payment .dw-pmd-method-styled input[type="radio"][name^="payment_method"],
.dw-pmd-method-styled input[type="radio"][name="payment_method"],
.dw-pmd-method-styled input[type="radio"][name^="payment_method"]{
  position:static!important;
  left:auto!important;
  right:auto!important;
  top:auto!important;
  bottom:auto!important;
  float:none!important;
  display:inline-block!important;
  flex:0 0 auto!important;
  width:18px!important;
  height:18px!important;
  margin:0!important;
  padding:0!important;
  transform:none!important;
  vertical-align:middle!important;
}

body .quick-checkout-wrapper .section-payment .section-body .dw-pmd-method-styled > .radio > label > span,
.section-payment .dw-pmd-method-styled > .radio > label > span,
.dw-pmd-method-styled > .radio > label > span{
  display:flex!important;
  align-items:center!important;
  flex-wrap:wrap!important;
  gap:5px!important;
  min-width:0!important;
  flex:1 1 auto!important;
  line-height:1.45!important;
}

.dw-pmd-method-styled > .radio > label > span img{
  vertical-align:middle!important;
  object-fit:contain!important;
  max-height:26px!important;
}

/* Keep the real selectable row fully inside the card. */
body .quick-checkout-wrapper .section-payment .section-body .dw-pmd-method-styled > .radio,
.section-payment .dw-pmd-method-styled > .radio,
.dw-pmd-method-styled > .radio{
  position:relative!important;
  overflow:visible!important;
}

@media(max-width:767px){
  body .quick-checkout-wrapper .section-payment .section-body .dw-pmd-method-styled > .radio > label,
  .section-payment .dw-pmd-method-styled > .radio > label,
  .dw-pmd-method-styled > .radio > label{
    gap:8px!important;
  }
  .dw-pmd-method-styled input[type="radio"][name="payment_method"],
  .dw-pmd-method-styled input[type="radio"][name^="payment_method"]{
    width:17px!important;
    height:17px!important;
  }
}

/* v1.2.0 - Radio-free card selection + selected check badge.
   Journal/custom checkout decorative pseudo icons are disabled while real
   payment logos (<img>) remain visible. */
html body .quick-checkout-wrapper .section-payment .section-body > div.dw-pmd-method-styled::before,
html body .quick-checkout-wrapper .section-payment .section-body > div.dw-pmd-method-styled::after,
html body .quick-checkout-wrapper .section-payment .section-body > div.dw-pmd-method-styled > .radio::before,
html body .quick-checkout-wrapper .section-payment .section-body > div.dw-pmd-method-styled > .radio::after,
html body .quick-checkout-wrapper .section-payment .section-body > div.dw-pmd-method-styled > .radio > label::before,
html body .quick-checkout-wrapper .section-payment .section-body > div.dw-pmd-method-styled > .radio > label::after,
html body .quick-checkout-wrapper .section-payment .section-body > div.dw-pmd-method-styled > .radio > label > span::before,
html body .quick-checkout-wrapper .section-payment .section-body > div.dw-pmd-method-styled > .radio > label > span::after,
.section-payment .section-body > div.dw-pmd-method-styled > .radio::before,
.section-payment .section-body > div.dw-pmd-method-styled > .radio::after,
.section-payment .section-body > div.dw-pmd-method-styled > .radio > label::before,
.section-payment .section-body > div.dw-pmd-method-styled > .radio > label::after,
.section-payment .section-body > div.dw-pmd-method-styled > .radio > label > span::before,
.section-payment .section-body > div.dw-pmd-method-styled > .radio > label > span::after{
  content:none!important;
  display:none!important;
  background:none!important;
  background-image:none!important;
  border:0!important;
  box-shadow:none!important;
}

html body .quick-checkout-wrapper .section-payment .section-body > div.dw-pmd-method-styled,
html body .quick-checkout-wrapper .section-payment .section-body > div.dw-pmd-method-styled > .radio,
html body .quick-checkout-wrapper .section-payment .section-body > div.dw-pmd-method-styled > .radio > label,
html body .quick-checkout-wrapper .section-payment .section-body > div.dw-pmd-method-styled > .radio > label > span{
  background-image:none!important;
  margin-left:0!important;
  transform:none!important;
}

html body .quick-checkout-wrapper .section-payment .section-body > div.dw-pmd-method-styled,
.section-payment .dw-pmd-method-styled,
.dw-pmd-method-styled{
  position:relative!important;
  cursor:pointer!important;
  isolation:isolate!important;
}

/* Keep the real radio functional for OpenCart/Journal and keyboard users,
   but remove the visual radio circle completely. */
html body .quick-checkout-wrapper .section-payment .section-body > div.dw-pmd-method-styled input[type="radio"][name="payment_method"],
html body .quick-checkout-wrapper .section-payment .section-body > div.dw-pmd-method-styled input[type="radio"][name^="payment_method"],
.section-payment .dw-pmd-method-styled input[type="radio"][name="payment_method"],
.section-payment .dw-pmd-method-styled input[type="radio"][name^="payment_method"],
.dw-pmd-method-styled input[type="radio"][name="payment_method"],
.dw-pmd-method-styled input[type="radio"][name^="payment_method"]{
  position:absolute!important;
  width:1px!important;
  height:1px!important;
  min-width:1px!important;
  min-height:1px!important;
  margin:-1px!important;
  padding:0!important;
  overflow:hidden!important;
  clip:rect(0 0 0 0)!important;
  clip-path:inset(50%)!important;
  white-space:nowrap!important;
  border:0!important;
  opacity:0!important;
  pointer-events:none!important;
}

html body .quick-checkout-wrapper .section-payment .section-body > div.dw-pmd-method-styled > .radio > label,
.section-payment .dw-pmd-method-styled > .radio > label,
.dw-pmd-method-styled > .radio > label{
  display:block!important;
  width:100%!important;
  margin:0!important;
  padding:0!important;
  text-indent:0!important;
  cursor:pointer!important;
}

html body .quick-checkout-wrapper .section-payment .section-body > div.dw-pmd-method-styled > .radio > label > span,
.section-payment .dw-pmd-method-styled > .radio > label > span,
.dw-pmd-method-styled > .radio > label > span{
  display:flex!important;
  align-items:center!important;
  flex-wrap:wrap!important;
  gap:5px!important;
  width:100%!important;
  min-width:0!important;
  margin:0!important;
  padding:0!important;
  line-height:1.45!important;
}

/* Reserve the heading's right corner for the selection badge. */
html body .quick-checkout-wrapper .section-payment .section-body .dw-pmd-method-styled > .dw-pmd-heading,
.section-payment .dw-pmd-method-styled > .dw-pmd-heading,
.dw-pmd-method-styled > .dw-pmd-heading{
  position:relative!important;
  padding-right:54px!important;
  cursor:pointer!important;
}

/* Only the currently selected payment method gets the check badge. */
html body .quick-checkout-wrapper .section-payment .section-body .dw-pmd-method-styled.dw-pmd-selected > .dw-pmd-heading::after,
.section-payment .dw-pmd-method-styled.dw-pmd-selected > .dw-pmd-heading::after,
.dw-pmd-method-styled.dw-pmd-selected > .dw-pmd-heading::after{
  content:"✓"!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  position:absolute!important;
  right:12px!important;
  top:50%!important;
  width:26px!important;
  height:26px!important;
  margin:0!important;
  padding:0!important;
  transform:translateY(-50%)!important;
  border:2px solid currentColor!important;
  border-radius:50%!important;
  background:rgba(255,255,255,.16)!important;
  color:var(--dw-pmd-heading-text,#fff)!important;
  font-family:Arial,sans-serif!important;
  font-size:16px!important;
  font-weight:700!important;
  line-height:1!important;
  box-sizing:border-box!important;
  box-shadow:none!important;
  pointer-events:none!important;
}

.dw-pmd-method-styled.dw-pmd-selected{
  box-shadow:0 5px 16px rgba(0,0,0,.08)!important;
}

.dw-pmd-method-styled:focus-within{
  outline:2px solid var(--dw-pmd-border,#2563eb)!important;
  outline-offset:2px!important;
}

@media(max-width:767px){
  html body .quick-checkout-wrapper .section-payment .section-body .dw-pmd-method-styled > .dw-pmd-heading,
  .section-payment .dw-pmd-method-styled > .dw-pmd-heading,
  .dw-pmd-method-styled > .dw-pmd-heading{
    padding-right:48px!important;
  }
  html body .quick-checkout-wrapper .section-payment .section-body .dw-pmd-method-styled.dw-pmd-selected > .dw-pmd-heading::after,
  .dw-pmd-method-styled.dw-pmd-selected > .dw-pmd-heading::after{
    right:10px!important;
    width:23px!important;
    height:23px!important;
    font-size:14px!important;
  }
}

/* v1.3.0 - Shipping Method Designer
   No extra title is injected. Native shipping radios are visually hidden,
   the whole shipping quote becomes clickable, and only the selected quote
   gets a circular check badge at the far right. */
html body .quick-checkout-wrapper .section-shipping .dw-smd-method-styled,
.section-shipping .dw-smd-method-styled,
.dw-smd-method-styled{
  position:relative!important;
  display:block!important;
  width:100%!important;
  min-height:58px!important;
  margin:0 0 12px!important;
  padding:15px 54px 15px 16px!important;
  border:1px solid var(--dw-smd-border,#d1d5db)!important;
  border-radius:var(--dw-smd-radius,10px)!important;
  background:var(--dw-smd-bg,#fff)!important;
  color:var(--dw-smd-text,#1f2937)!important;
  box-sizing:border-box!important;
  cursor:pointer!important;
  overflow:hidden!important;
  transition:box-shadow .18s ease,border-color .18s ease,transform .18s ease!important;
}

/* Journal often prints a group name in a direct <p> and then repeats the
   actual quote in the label. Keep only the selectable quote line. */
html body .quick-checkout-wrapper .section-shipping .dw-smd-method-styled > p,
.section-shipping .dw-smd-method-styled > p,
.dw-smd-method-styled > p{
  display:none!important;
}

html body .quick-checkout-wrapper .section-shipping .dw-smd-method-styled .radio,
html body .quick-checkout-wrapper .section-shipping .dw-smd-method-styled .radio label,
html body .quick-checkout-wrapper .section-shipping .dw-smd-method-styled .shipping-quote-title,
.section-shipping .dw-smd-method-styled .radio,
.section-shipping .dw-smd-method-styled .radio label,
.section-shipping .dw-smd-method-styled .shipping-quote-title,
.dw-smd-method-styled .radio,
.dw-smd-method-styled .radio label,
.dw-smd-method-styled .shipping-quote-title{
  color:var(--dw-smd-text,#1f2937)!important;
  background:transparent!important;
  margin:0!important;
  padding:0!important;
  border:0!important;
  box-shadow:none!important;
  text-indent:0!important;
  line-height:1.45!important;
}

html body .quick-checkout-wrapper .section-shipping .dw-smd-method-styled .radio label,
.section-shipping .dw-smd-method-styled .radio label,
.dw-smd-method-styled .radio label{
  display:flex!important;
  align-items:center!important;
  width:100%!important;
  min-height:26px!important;
  cursor:pointer!important;
}

html body .quick-checkout-wrapper .section-shipping .dw-smd-method-styled input[type="radio"][name="shipping_method"],
html body .quick-checkout-wrapper .section-shipping .dw-smd-method-styled input[type="radio"][name^="shipping_method"],
.section-shipping .dw-smd-method-styled input[type="radio"][name="shipping_method"],
.section-shipping .dw-smd-method-styled input[type="radio"][name^="shipping_method"],
.dw-smd-method-styled input[type="radio"][name="shipping_method"],
.dw-smd-method-styled input[type="radio"][name^="shipping_method"]{
  position:absolute!important;
  width:1px!important;
  height:1px!important;
  min-width:1px!important;
  min-height:1px!important;
  margin:-1px!important;
  padding:0!important;
  overflow:hidden!important;
  clip:rect(0 0 0 0)!important;
  clip-path:inset(50%)!important;
  white-space:nowrap!important;
  border:0!important;
  opacity:0!important;
  pointer-events:none!important;
}

/* Remove theme pseudo-icons that can sit above/over the custom shipping card.
   Real <img> icons remain untouched. */
html body .quick-checkout-wrapper .section-shipping .dw-smd-method-styled::before,
html body .quick-checkout-wrapper .section-shipping .dw-smd-method-styled > .radio::before,
html body .quick-checkout-wrapper .section-shipping .dw-smd-method-styled > .radio::after,
html body .quick-checkout-wrapper .section-shipping .dw-smd-method-styled > .radio > label::before,
html body .quick-checkout-wrapper .section-shipping .dw-smd-method-styled > .radio > label::after,
.section-shipping .dw-smd-method-styled::before,
.section-shipping .dw-smd-method-styled > .radio::before,
.section-shipping .dw-smd-method-styled > .radio::after,
.section-shipping .dw-smd-method-styled > .radio > label::before,
.section-shipping .dw-smd-method-styled > .radio > label::after{
  content:none!important;
  display:none!important;
  background:none!important;
  background-image:none!important;
  border:0!important;
  box-shadow:none!important;
}

html body .quick-checkout-wrapper .section-shipping .dw-smd-method-styled.dw-smd-selected::after,
.section-shipping .dw-smd-method-styled.dw-smd-selected::after,
.dw-smd-method-styled.dw-smd-selected::after{
  content:"✓"!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  position:absolute!important;
  right:14px!important;
  top:50%!important;
  width:27px!important;
  height:27px!important;
  transform:translateY(-50%)!important;
  border:2px solid currentColor!important;
  border-radius:50%!important;
  background:rgba(255,255,255,.20)!important;
  color:var(--dw-smd-text,#1f2937)!important;
  font-family:Arial,sans-serif!important;
  font-size:16px!important;
  font-weight:700!important;
  line-height:1!important;
  box-sizing:border-box!important;
  pointer-events:none!important;
}

.dw-smd-method-styled.dw-smd-selected{
  box-shadow:0 5px 16px rgba(0,0,0,.08)!important;
}

.dw-smd-method-styled:focus-within{
  outline:2px solid var(--dw-smd-border,#d1d5db)!important;
  outline-offset:2px!important;
}

@media(max-width:767px){
  html body .quick-checkout-wrapper .section-shipping .dw-smd-method-styled,
  .section-shipping .dw-smd-method-styled,
  .dw-smd-method-styled{
    min-height:54px!important;
    padding:13px 48px 13px 14px!important;
  }
  html body .quick-checkout-wrapper .section-shipping .dw-smd-method-styled.dw-smd-selected::after,
  .section-shipping .dw-smd-method-styled.dw-smd-selected::after,
  .dw-smd-method-styled.dw-smd-selected::after{
    right:11px!important;
    width:24px!important;
    height:24px!important;
    font-size:14px!important;
  }
}


/* v1.3.1 - Journal 3 Shipping Method full-width normalization
   Journal 3's Quick Checkout uses .shippings as a layout wrapper and draws
   the truck/transport icon on that wrapper. Keeping that layout would leave
   the decorative icon outside the custom card and make .ship-wrapper shrink.
   The JS marks only wrappers that actually contain a styled shipping method,
   so these rules stay scoped to the designer. */
html body .quick-checkout-wrapper .section-shipping .dw-smd-host-active,
html body .quick-checkout-wrapper .section-shipping .dw-smd-group-active,
.section-shipping .dw-smd-host-active,
.section-shipping .dw-smd-group-active{
  display:block!important;
  width:100%!important;
  max-width:none!important;
  min-width:0!important;
  flex:1 1 100%!important;
  float:none!important;
  clear:both!important;
  margin-left:0!important;
  margin-right:0!important;
  padding-left:0!important;
  padding-right:0!important;
  box-sizing:border-box!important;
  transform:none!important;
  background-image:none!important;
}

/* Remove the Journal decorative shipping icon from the group/host itself.
   The user-facing method text stays inside the full-width custom card. */
html body .quick-checkout-wrapper .section-shipping .dw-smd-host-active::before,
html body .quick-checkout-wrapper .section-shipping .dw-smd-host-active::after,
html body .quick-checkout-wrapper .section-shipping .dw-smd-group-active::before,
html body .quick-checkout-wrapper .section-shipping .dw-smd-group-active::after,
.section-shipping .dw-smd-host-active::before,
.section-shipping .dw-smd-host-active::after,
.section-shipping .dw-smd-group-active::before,
.section-shipping .dw-smd-group-active::after{
  content:none!important;
  display:none!important;
  width:0!important;
  height:0!important;
  min-width:0!important;
  min-height:0!important;
  margin:0!important;
  padding:0!important;
  border:0!important;
  background:none!important;
  background-image:none!important;
  box-shadow:none!important;
}

/* Some Journal builds use a real icon node instead of a pseudo-element. Only
   suppress direct decorative icon nodes that sit beside the quote wrapper. */
html body .quick-checkout-wrapper .section-shipping .dw-smd-group-active > i,
html body .quick-checkout-wrapper .section-shipping .dw-smd-group-active > .fa,
html body .quick-checkout-wrapper .section-shipping .dw-smd-group-active > [class*="icon-"],
.section-shipping .dw-smd-group-active > i,
.section-shipping .dw-smd-group-active > .fa,
.section-shipping .dw-smd-group-active > [class*="icon-"]{
  display:none!important;
}

/* Force the quote itself to consume the entire Shipping Method column. */
html body .quick-checkout-wrapper .section-shipping .dw-smd-group-active > .dw-smd-method-styled,
html body .quick-checkout-wrapper .section-shipping .dw-smd-host-active .dw-smd-method-styled,
.section-shipping .dw-smd-group-active > .dw-smd-method-styled,
.section-shipping .dw-smd-host-active .dw-smd-method-styled,
.section-shipping .dw-smd-method-styled{
  display:block!important;
  width:100%!important;
  max-width:none!important;
  min-width:0!important;
  flex:0 0 100%!important;
  float:none!important;
  margin-left:0!important;
  margin-right:0!important;
  box-sizing:border-box!important;
}

/* Keep the selectable text row full width as well; otherwise some Journal
   builds retain an inline-block width from .ship-wrapper/.radio/label. */
html body .quick-checkout-wrapper .section-shipping .dw-smd-method-styled .radio,
html body .quick-checkout-wrapper .section-shipping .dw-smd-method-styled .radio > label,
html body .quick-checkout-wrapper .section-shipping .dw-smd-method-styled .shipping-quote-title,
.section-shipping .dw-smd-method-styled .radio,
.section-shipping .dw-smd-method-styled .radio > label,
.section-shipping .dw-smd-method-styled .shipping-quote-title{
  width:100%!important;
  max-width:none!important;
  box-sizing:border-box!important;
}

/* v1.4.0 - Animated payment selection notification. */
.dw-pmd-selection-toast{
  position:fixed;
  left:50%;
  bottom:28px;
  z-index:2147483100;
  display:flex;
  align-items:center;
  gap:11px;
  width:max-content;
  max-width:min(520px,calc(100vw - 32px));
  padding:13px 17px;
  border:1px solid rgba(16,185,129,.45);
  border-radius:14px;
  background:#0f172a;
  color:#fff;
  box-shadow:0 18px 48px rgba(15,23,42,.3);
  font-size:14px;
  font-weight:700;
  line-height:1.4;
  box-sizing:border-box;
  pointer-events:none;
  opacity:0;
  transform:translate(-50%,18px) scale(.96);
  transition:opacity .22s ease,transform .22s cubic-bezier(.2,.8,.2,1);
}
.dw-pmd-selection-toast.dw-pmd-selection-toast-visible{
  opacity:1;
  transform:translate(-50%,0) scale(1);
}
.dw-pmd-selection-toast-icon{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  flex:0 0 28px;
  width:28px;
  height:28px;
  border-radius:50%;
  background:#10b981;
  color:#fff;
  font-size:17px;
  line-height:1;
  box-shadow:0 0 0 5px rgba(16,185,129,.14);
}
.dw-pmd-selection-toast-text{min-width:0;overflow-wrap:anywhere}
.dw-pmd-method-styled.dw-pmd-selection-pulse{
  animation:dw-pmd-selection-pulse .7s ease-out;
}
@keyframes dw-pmd-selection-pulse{
  0%{box-shadow:0 0 0 0 rgba(16,185,129,.55)}
  55%{box-shadow:0 0 0 8px rgba(16,185,129,.12)}
  100%{box-shadow:0 0 0 0 rgba(16,185,129,0)}
}
@media(max-width:767px){
  .dw-pmd-selection-toast{
    bottom:14px;
    width:calc(100vw - 24px);
    max-width:none;
    padding:12px 14px;
    border-radius:12px;
    font-size:13px;
  }
}
@media(prefers-reduced-motion:reduce){
  .dw-pmd-selection-toast{transition:none}
  .dw-pmd-method-styled.dw-pmd-selection-pulse{animation:none}
}