/* ---------------------------------------------------------------
   NihonEZ shared "Mark as complete" button
   Used by any plugin via nihonez_render_complete_button().
--------------------------------------------------------------- */
.nihonez-complete-btn,
.nihonez-complete-btn:focus,
.nihonez-complete-btn:active,
a.nihonez-complete-btn,
a.nihonez-complete-btn:focus,
a.nihonez-complete-btn:active,
a.nihonez-complete-btn:visited {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 16px;
    background: var(--secondary-0, #fff5f5);
    color: var(--secondary-2, #c62828);
    border: 1px solid var(--secondary-light, #f5c2c2);
    border-radius: 999px;
    font-family: inherit;
    font-size: 13px;
    font-weight: 500;
    line-height: 1;
    cursor: pointer;
    box-shadow: none;
    text-shadow: none;
    text-decoration: none;
    outline: none;
    appearance: none;
    -webkit-appearance: none;
    transition: background 0.15s, border-color 0.15s, color 0.15s, box-shadow 0.15s, transform 0.1s;
}

.nihonez-complete-btn:hover,
a.nihonez-complete-btn:hover {
    background: #fff;
    border-color: var(--secondary-red, #d63b3b);
    color: var(--secondary-2, #c62828);
    box-shadow: 0 1px 3px var(--secondary-box-shadow, rgba(214, 59, 59, 0.18));
    text-decoration: none;
}

.nihonez-complete-btn:focus-visible {
    box-shadow: 0 0 0 3px var(--secondary-box-shadow, rgba(214, 59, 59, 0.18));
}

.nihonez-complete-btn:active {
    transform: translateY(1px);
}

.nihonez-complete-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.nihonez-complete-btn .nihonez-complete-icon {
    flex-shrink: 0;
}

.nihonez-complete-btn.is-complete,
.nihonez-complete-btn.is-complete:focus {
    background: var(--secondary-red, #d63b3b);
    color: #fff;
    border-color: var(--secondary-red, #d63b3b);
    box-shadow: 0 2px 6px var(--secondary-box-shadow, rgba(214, 59, 59, 0.18));
}

.nihonez-complete-btn.is-complete:hover {
    background: var(--secondary-2, #c62828);
    border-color: var(--secondary-2, #c62828);
    color: #fff;
    box-shadow: 0 3px 10px var(--secondary-box-shadow, rgba(214, 59, 59, 0.18));
}

.nihonez-complete-btn.is-complete:focus-visible {
    box-shadow: 0 0 0 3px var(--secondary-box-shadow, rgba(214, 59, 59, 0.18)),
                0 2px 6px var(--secondary-box-shadow, rgba(214, 59, 59, 0.18));
}

/* Logged-out "Login to track progress" link — matches the hover style of the
   idle button so it reads as a quiet call-to-action on first paint. */
a.nihonez-complete-btn.is-login,
a.nihonez-complete-btn.is-login:focus,
a.nihonez-complete-btn.is-login:active,
a.nihonez-complete-btn.is-login:visited {
    background: #fff;
    border-color: var(--secondary-red, #d63b3b);
    color: var(--secondary-2, #c62828);
    box-shadow: 0 1px 3px var(--secondary-box-shadow, rgba(214, 59, 59, 0.18));
}

a.nihonez-complete-btn.is-login:hover {
    background: #fff;
    border-color: var(--secondary-2, #c62828);
    color: var(--secondary-2, #c62828);
    box-shadow: 0 2px 6px var(--secondary-box-shadow, rgba(214, 59, 59, 0.18));
}