/* WP IGN Checker for PPOM — Frontend */

.ign-status {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    border-radius: 10px;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.5;
    margin: 4px 0 6px;
    animation: ignIn .25s ease;
    user-select: none;
    -webkit-user-select: none;
    flex: 0 0 100%;
    width: 100%;
    order: 99
}

@keyframes ignIn {
    from {
        opacity: 0;
        transform: translateY(-4px)
    }

    to {
        opacity: 1;
        transform: translateY(0)
    }
}

.ign-status--loading {
    background: #fff8f0;
    border-left: 3px solid #f57c00;
    color: #7a3e00
}

.ign-status--success {
    background: linear-gradient(135deg, #e8f8f1, #d4f1e5);
    border-left: 3px solid #22c55e;
    color: #15532e
}

.ign-status--mismatch {
    background: linear-gradient(135deg, #fff9e6, #fff3cd);
    border-left: 3px solid #ff9800;
    color: #663c00
}

.ign-status--error {
    background: linear-gradient(135deg, #fff0f0, #ffe0e0);
    border-left: 3px solid #ef4444;
    color: #7f1d1d
}

.ign-status--mismatch p,
.ign-status--mismatch a {
    color: inherit;
    margin: 0 0 6px
}

.ign-icon {
    font-size: 15px;
    flex-shrink: 0;
    line-height: 1
}

.ign-status--success .ign-icon {
    color: #22c55e
}

.ign-status--mismatch .ign-icon {
    color: #ff9800
}

.ign-status--error .ign-icon {
    color: #ef4444
}

.ign-region-badge {
    display: inline-block;
    background: #22c55e;
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .5px;
    padding: 1px 7px;
    border-radius: 20px;
    vertical-align: middle;
    text-transform: uppercase;
    margin-left: 4px
}

.ign-spinner {
    display: inline-block;
    width: 14px;
    height: 14px;
    border: 2px solid #ffd599;
    border-top-color: #f57c00;
    border-radius: 50%;
    animation: ignSpin .7s linear infinite;
    flex-shrink: 0;
    vertical-align: middle
}

@keyframes ignSpin {
    to {
        transform: rotate(360deg)
    }
}

.ign-btn-disabled {
    opacity: .45 !important;
    cursor: not-allowed !important;
    pointer-events: none !important
}