/* migration_pill.css
 * PayPal migration pill rendered INSIDE the app header nav.
 * Soft (amber) = informational, billing date in the future, service still works.
 * Hard (red)   = past due, chat cut off until they re-vault on PayPal.
 *
 * Lives inline in the nav strip — no fixed positioning, no layout
 * shift. Sits beside the existing card-update pill.
 */

.migration-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.2;
    text-decoration: none;
    border: 1px solid transparent;
    white-space: nowrap;
    max-width: 100%;
    box-sizing: border-box;
    transition: transform .12s ease, box-shadow .15s ease, background .15s ease;
}

.migration-pill:hover {
    transform: translateY(-1px);
    text-decoration: none;
}

.migration-pill__icon,
.migration-pill__arrow {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
}

.migration-pill__arrow {
    opacity: 0.85;
}

.migration-pill__text {
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 28ch;
}

/* Amber / soft — switch processors before your billing date */
.migration-pill--soft {
    background: linear-gradient(180deg, #ffd58a 0%, #ffae3c 100%);
    color: #4a2a00;
    border-color: rgba(180, 83, 9, 0.55);
    box-shadow: 0 1px 3px rgba(180, 83, 9, 0.25);
}
.migration-pill--soft:hover {
    background: linear-gradient(180deg, #ffdb9c 0%, #ffb84d 100%);
    color: #3a2000;
}

/* Red / hard — past due, chat is paused, pulses gently */
.migration-pill--hard {
    background: linear-gradient(180deg, #c82329 0%, #971a20 100%);
    color: #fff;
    border-color: rgba(0, 0, 0, 0.3);
    box-shadow: 0 2px 8px rgba(184, 29, 36, 0.45);
    animation: migration-pill-pulse 2.2s ease-in-out infinite;
}
.migration-pill--hard:hover {
    background: linear-gradient(180deg, #d62932 0%, #a31d24 100%);
    color: #fff;
    animation: none;
}

@keyframes migration-pill-pulse {
    0%, 100% { box-shadow: 0 2px 8px rgba(184, 29, 36, 0.45); }
    50%      { box-shadow: 0 2px 16px rgba(184, 29, 36, 0.85); }
}

/* On narrow headers, drop the text — icon + arrow is enough */
@media (max-width: 900px) {
    .migration-pill__text {
        display: none;
    }
}