/* =============================================================================
   Ace Pot Payout Badge — "End of Season" indicator

   A compact inline badge that communicates deferred payout mode.
   Uses a warm amber → burnt-orange palette to sit naturally within the
   ace-pot visual family (amber icons, gold guarantee shields) while
   remaining distinct from the guarantee badge's bright yellow.

   Applied via: .ace-payout-badge  (replaces generic `badge bg-info`)
   ============================================================================= */

/* -- Design tokens (scoped) ------------------------------------------------ */
:root {
    --apb-hue: 28;
    --apb-sat: 90%;
    --apb-base: hsl(var(--apb-hue), var(--apb-sat), 52%);       /* warm amber-orange */
    --apb-base-light: hsl(var(--apb-hue), var(--apb-sat), 58%);
    --apb-bg: hsl(var(--apb-hue), var(--apb-sat), 52%, 0.12);
    --apb-border: hsl(var(--apb-hue), var(--apb-sat), 52%, 0.28);
    --apb-text: hsl(var(--apb-hue), 78%, 40%);
    --apb-icon-bg: hsl(var(--apb-hue), var(--apb-sat), 52%, 0.18);
}

[data-bs-theme="dark"] {
    --apb-base: hsl(var(--apb-hue), 85%, 62%);
    --apb-base-light: hsl(var(--apb-hue), 85%, 68%);
    --apb-bg: hsl(var(--apb-hue), 80%, 55%, 0.14);
    --apb-border: hsl(var(--apb-hue), 80%, 55%, 0.30);
    --apb-text: hsl(var(--apb-hue), 75%, 72%);
    --apb-icon-bg: hsl(var(--apb-hue), 80%, 55%, 0.22);
}

/* -- Badge shell ----------------------------------------------------------- */
.ace-payout-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.3125rem;                     /* 5px — tight but readable */
    padding: 0.1875rem 0.5rem 0.1875rem 0.3125rem;
    border-radius: 999px;
    background: var(--apb-bg);
    border: 1px solid var(--apb-border);
    color: var(--apb-text);
    font-size: 0.6875rem;               /* 11px — compact */
    font-weight: 650;
    line-height: 1;
    letter-spacing: 0.015em;
    white-space: nowrap;
    text-decoration: none;
    vertical-align: middle;
    transition: background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
    cursor: default;
}

/* Hover / tooltip-active state */
.ace-payout-badge:hover {
    background: hsl(var(--apb-hue), var(--apb-sat), 52%, 0.18);
    border-color: hsl(var(--apb-hue), var(--apb-sat), 52%, 0.40);
    box-shadow: 0 0 0 3px hsl(var(--apb-hue), var(--apb-sat), 52%, 0.08);
}

[data-bs-theme="dark"] .ace-payout-badge:hover {
    background: hsl(var(--apb-hue), 80%, 55%, 0.22);
    border-color: hsl(var(--apb-hue), 80%, 55%, 0.45);
    box-shadow: 0 0 0 3px hsl(var(--apb-hue), 80%, 55%, 0.10);
}

/* -- Icon circle ----------------------------------------------------------- */
.ace-payout-badge__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1rem;
    height: 1rem;
    border-radius: 50%;
    background: var(--apb-icon-bg);
    color: var(--apb-base);
    font-size: 0.5rem;                  /* icon inside the circle */
    flex-shrink: 0;
}

/* -- Label text ------------------------------------------------------------ */
.ace-payout-badge__label {
    /* inherits font from parent — just ensure no extra spacing */
}

/* ==========================================================================
   Size variants
   ========================================================================== */

/* --sm: even tighter — for inline-with-h6 usage (widget, history header) */
.ace-payout-badge--sm {
    padding: 0.125rem 0.4375rem 0.125rem 0.25rem;
    font-size: 0.625rem;
    gap: 0.25rem;
}

.ace-payout-badge--sm .ace-payout-badge__icon {
    width: 0.875rem;
    height: 0.875rem;
    font-size: 0.4375rem;
}

/* --lg: for standalone / admin summary cards */
.ace-payout-badge--lg {
    padding: 0.3125rem 0.75rem 0.3125rem 0.5rem;
    font-size: 0.8125rem;
    gap: 0.375rem;
}

.ace-payout-badge--lg .ace-payout-badge__icon {
    width: 1.25rem;
    height: 1.25rem;
    font-size: 0.5625rem;
}

/* ==========================================================================
   Context: inside .ace-summary-badges (collapsed event-details drawer)
   Override the old --mode variant to use the new palette
   ========================================================================== */
.ace-summary-badges .ace-payout-badge {
    /* Already fits — ace-summary-badges sets gap/margin.
       Just make sure sizing matches sibling badges. */
    padding: 0.125rem 0.5rem 0.125rem 0.3125rem;
    font-size: 0.6875rem;
}