/**
 * FFE Instant Rates - CSS Styles
 *
 * Provides smooth transitions for rate updates
 * without layout shift or blink.
 *
 * @package FixedFloat_Exchanger
 * @since 4.3.64
 */

/* Rate display smooth transition */
.ffe-rate-display,
.ffe-exchange-rate,
[data-ffe-rate] {
    transition: opacity 0.2s ease-in-out, color 0.2s ease-in-out;
}

/* Updating state - subtle pulse */
.ffe-rate-updating {
    opacity: 0.7;
}

/* Rate timestamp indicator */
.ffe-rate-timestamp,
[data-ffe-timestamp] {
    font-size: 11px;
    color: rgba(255, 255, 255, 0.5);
    margin-top: 4px;
    transition: color 0.3s ease;
}

/* Stale/offline indicator */
.ffe-rate-timestamp.stale,
[data-ffe-timestamp].stale {
    color: rgba(255, 180, 0, 0.7);
}

/* Loading skeleton for initial state */
.ffe-rate-loading {
    background: linear-gradient(90deg, rgba(255,255,255,0.1) 25%, rgba(255,255,255,0.2) 50%, rgba(255,255,255,0.1) 75%);
    background-size: 200% 100%;
    animation: ffe-rate-skeleton 1.5s infinite;
    border-radius: 4px;
    min-height: 20px;
    min-width: 120px;
}

@keyframes ffe-rate-skeleton {
    0% {
        background-position: 200% 0;
    }
    100% {
        background-position: -200% 0;
    }
}

/* Source indicator (dev mode only) */
[data-source="snapshot"]::after {
    /* content: " (snapshot)"; */
    /* Uncomment for debugging */
}

[data-source="live"]::after {
    /* content: " (live)"; */
}

[data-source="cache"]::after {
    /* content: " (cached)"; */
}

/* Result amount transition */
.ffe-result-amount,
.ffe-to-amount,
[data-ffe-result] {
    transition: background-color 0.3s ease;
}

.ffe-result-amount.updated {
    background-color: rgba(255, 215, 0, 0.1);
}

/* Min/max hints */
.ffe-min-amount,
.ffe-max-amount,
[data-ffe-min],
[data-ffe-max] {
    font-size: 10px;
    color: rgba(255, 255, 255, 0.4);
    margin-top: 2px;
}

/* Spinner for loading state */
.ffe-rate-spinner {
    display: inline-block;
    width: 14px;
    height: 14px;
    border: 2px solid rgba(255, 215, 0, 0.3);
    border-radius: 50%;
    border-top-color: #FFD700;
    animation: ffe-spin 0.8s linear infinite;
    margin-right: 6px;
    vertical-align: middle;
}

@keyframes ffe-spin {
    to {
        transform: rotate(360deg);
    }
}

/* Rate refresh button */
.ffe-rate-refresh-btn {
    background: transparent;
    border: none;
    padding: 4px;
    cursor: pointer;
    opacity: 0.5;
    transition: opacity 0.2s, transform 0.2s;
}

.ffe-rate-refresh-btn:hover {
    opacity: 1;
    transform: rotate(90deg);
}

.ffe-rate-refresh-btn.refreshing {
    animation: ffe-spin 0.8s linear infinite;
}

.ffe-rate-refresh-btn svg {
    width: 14px;
    height: 14px;
    fill: currentColor;
}