/*
  Always-visible per-method price badge.

  Replaces the tap/hover tooltip mode entirely (removed in 1.13.0 -
  assets/css/shipping-price-tooltip.css and assets/js/shipping-price-
  tooltip.js no longer exist, and "Price display" is no longer a choice
  in includes/admin-settings.php). The price is now always printed
  directly on the card as a small, self-contained pill - its own
  background, its own text color, its own font size, all controllable
  from the "Shipping Form" admin tab - with an optional attention effect
  (pulse/shake) on top.

  Only enqueued (includes/frontend.php) alongside assets/js/shipping-
  method-prices.js, so it never loads on a request where that script
  hasn't actually built a .shipping-method-price element to style.

  Enqueue order in includes/frontend.php puts this file after every
  layout-*.css file, specifically so these rules win the cascade at equal
  selector specificity without needing !important anywhere. Each layout
  file still owns positioning (flex order/spacing inside the card) -
  this file only owns the badge's own look, so nothing here can
  reintroduce the overflow-class bugs those files already had to fix.

  --hfe-price-badge-bg / --hfe-price-badge-text / --hfe-price-badge-font-size
  are set inline from the admin tab (includes/frontend.php); the values
  below are just the fallback.
*/

:root {
    --hfe-price-badge-bg: #eaf4fd;
    --hfe-price-badge-text: #185fa5;
    --hfe-price-badge-font-size: 12px;
}

.shipping-method-price {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 3px;
    max-width: 100%;
    padding: 3px 9px;
    border-radius: 999px;
    background: var(--hfe-price-badge-bg);
    color: var(--hfe-price-badge-text);
    font-size: var(--hfe-price-badge-font-size);
    font-weight: 700;
    line-height: 1.35;
    box-sizing: border-box;
    vertical-align: middle;
}

/* Selected state deliberately keeps the exact same badge look. The old
   plain-text price had to switch to the accent color when selected just
   to stay legible against the card's own selected-state tint - a badge
   with its own background is already visible enough on any card state
   that it doesn't need a second color layered on top. */
.shipping-method-option.is-selected .shipping-method-price {
    background: var(--hfe-price-badge-bg);
    color: var(--hfe-price-badge-text);
}

.shipping-method-currency {
    font-weight: 600;
    opacity: .85;
}

/* "FREE" keeps its own fixed green tint rather than the admin-configurable
   colors above, so it always stays instantly distinguishable from a paid
   price no matter what background/text color is picked for the rest. */
.shipping-method-price.shipping-method-free {
    background: #eafaf1;
    background: color-mix(in srgb, #1a8754 12%, white);
    color: #157347;
}

/* --- Attention effect ("Attention effect", Shipping Form tab) ---
   assets/js/shipping-method-prices.js adds at most one of these two
   modifier classes per badge, based on window.hfePriceBadgeEffect - never
   both, and neither one when the setting is "none". */
@keyframes hfe-price-badge-pulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.1); }
}

@keyframes hfe-price-badge-shake {
    0%, 100% { transform: translateX(0); }
    10%, 30%, 50%, 70% { transform: translateX(-2px); }
    20%, 40%, 60%, 80% { transform: translateX(2px); }
    90% { transform: translateX(-1px); }
}

.shipping-method-price--pulse {
    animation: hfe-price-badge-pulse 1.6s ease-in-out infinite;
    transform-origin: center;
}

.shipping-method-price--shake {
    animation: hfe-price-badge-shake 2.6s ease-in-out infinite;
    transform-origin: center;
}

@media (prefers-reduced-motion: reduce) {
    .shipping-method-price--pulse,
    .shipping-method-price--shake {
        animation: none;
    }
}

/* Small screens: shrink the badge slightly so it always stays inside the
   card regardless of the "Font size" chosen above - same 480px breakpoint
   every layout-*.css file already uses for its own responsive rules. */
@media (max-width: 480px) {
    .shipping-method-price {
        padding: 2px 7px;
        font-size: calc(var(--hfe-price-badge-font-size) - 1px);
    }
}