/* ============================================================
   WP Flashcard – Spaced Repetition Add-on v2.0.0
   Compatible with WP Flashcard v2
   ============================================================ */

.wpfc-srs-bar {
    margin: -4px 0 8px;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

.wpfc-srs-bar__inner {
    padding: 6px 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    opacity: 1;
    transition: opacity 0.2s ease;
}

.wpfc-srs-bar--hidden .wpfc-srs-bar__inner {
    opacity: 0;
    pointer-events: none;
}

.wpfc-srs-bar__label {
    font-size: 13px;
    font-weight: 600;
    color: #444;
}

.wpfc-srs-bar__buttons {
    display: flex;
    justify-content: center;
    gap: 8px;
}

.wpfc-srs-btn {
    position: relative;
    padding: 10px 24px;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-size: 15px;
    font-weight: 600;
    color: #fff;
    transition: opacity 0.15s, transform 0.1s;
    line-height: 1;
    overflow: visible;
}

.wpfc-srs-btn:hover    { opacity: 0.88; transform: translateY(-1px); }
.wpfc-srs-btn:active   { transform: translateY(0); }
.wpfc-srs-btn:focus    { outline: none; }
.wpfc-srs-btn:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }
.wpfc-srs-btn:disabled { opacity: 0.4; cursor: not-allowed; transform: none; }
.wpfc-srs-btn.wpfc-animating { pointer-events: none; }

.wpfc-srs-btn--hard { background-color: #e05252; }
.wpfc-srs-btn--soso { background-color: #e0943a; }
.wpfc-srs-btn--easy { background-color: #3aab6e; }

/* -- Button animations ---------------------------------------- */
@keyframes wpfc-shake {
    0%,100% { transform: translateX(0); }
    15%     { transform: translateX(-6px) rotate(-2deg); }
    30%     { transform: translateX(6px)  rotate(2deg); }
    45%     { transform: translateX(-5px) rotate(-1deg); }
    60%     { transform: translateX(5px)  rotate(1deg); }
    75%     { transform: translateX(-3px); }
    90%     { transform: translateX(3px); }
}
@keyframes wpfc-wobble {
    0%,100% { transform: scale(1)    rotate(0deg); }
    20%     { transform: scale(1.12) rotate(-4deg); }
    40%     { transform: scale(1.08) rotate(3deg); }
    60%     { transform: scale(1.05) rotate(-2deg); }
    80%     { transform: scale(1.02) rotate(1deg); }
}
@keyframes wpfc-pop {
    0%   { transform: scale(1); }
    30%  { transform: scale(1.22); }
    55%  { transform: scale(0.93); }
    75%  { transform: scale(1.06); }
    100% { transform: scale(1); }
}

.wpfc-srs-btn.wpfc-shake  { animation: wpfc-shake  0.55s ease-in-out; }
.wpfc-srs-btn.wpfc-wobble { animation: wpfc-wobble 0.55s ease-in-out; }
.wpfc-srs-btn.wpfc-pop    { animation: wpfc-pop    0.45s ease-in-out; }

/* -- Confetti particles --------------------------------------- */
@keyframes wpfc-confetti-fly {
    0%   { opacity: 1; transform: translate(-50%,-50%) rotate(0deg); }
    100% { opacity: 0; transform: translate(var(--tx),var(--ty)) rotate(var(--r)); }
}
.wpfc-confetti-piece {
    position: absolute;
    pointer-events: none;
    top: 50%; left: 50%;
    border-radius: 1px;
    animation: wpfc-confetti-fly var(--dur) ease-out var(--delay) forwards;
}

/* -- Hard / So-So particles ----------------------------------- */
@keyframes wpfc-particle-rise {
    0%   { opacity: 1; transform: translate(-50%,-50%); }
    100% { opacity: 0; transform: translate(var(--tx),var(--ty)); }
}
.wpfc-particle {
    position: absolute;
    pointer-events: none;
    top: 50%; left: 50%;
    border-radius: 50%;
    animation: wpfc-particle-rise 0.55s ease-out var(--delay) forwards;
}

/* -- Keyboard hint (matches parent .wp-flashcard-hint style) -- */
.wpfc-srs-hint {
    text-align: center;
    font-size: 11px;
    color: #bbb;
    margin: 2px 0 0;
}

@media (max-width: 480px) {
    .wpfc-srs-btn { padding: 9px 16px; font-size: 14px; }
    .wpfc-srs-hint { display: none; }
}