/* ===========================
   Purchase / Like / State
   _bak/buttons.css, _bak/comment.css 참고
   =========================== */

.emoticon-card-actions .emoticon-primary-button,
.emoticon-detail-actions .emoticon-primary-button,
.emoticon-purchase-box .emoticon-primary-button {
    background: #1683ff;
    color: #fff;
}

.emoticon-card-actions .emoticon-primary-button:hover,
.emoticon-detail-actions .emoticon-primary-button:hover,
.emoticon-purchase-box .emoticon-primary-button:hover {
    background: #0f73df;
    color: #fff;
}

.emoticon-buy-button {
    gap: 6px;
}

.emoticon-buy-icon {
    display: block;
    flex: 0 0 14px;
    width: 14px;
    height: 14px;
}

.emoticon-like-button.is-active {
    border-color: #f0b4b4;
    background: #fff5f5;
    color: var(--md-danger);
}

.emoticon-purchase-box {
    width: 100%;
    max-width: var(--emoticon-page-width);
    margin: 0 auto;
    border: 1px solid var(--md-outline);
    border-radius: var(--md-radius-lg);
    padding: 24px;
    background: var(--md-surface);
    box-shadow: var(--md-shadow-soft);
    text-align: center;
}

.emoticon-purchase-box > img {
    width: 120px;
    height: 120px;
    object-fit: contain;
}

.emoticon-purchase-box h1 {
    margin: 14px 0 8px;
    font-size: 26px;
}

.emoticon-purchase-box p {
    margin: 0 0 18px;
}

.emoticon-purchase-box form {
    display: flex;
    justify-content: center;
    gap: 10px;
}