.yayrev-action-buttons {
display: flex;
gap: 8px;
margin-top: 12px;
}
.yayrev-action-buttons.yayrev-hidden {
display: none;
} .yayrev-btn {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 6px 12px;
font-size: 13px;
font-weight: 500;
color: #555;
background: white;
border: 1px solid #ddd;
border-radius: 4px;
cursor: pointer;
transition: all 0.2s ease;
}
.yayrev-btn:hover {
color: #333;
border-color: #bbb;
background: #f9f9f9;
}
.yayrev-btn:focus {
outline: none;
box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.2);
}
.yayrev-btn-icon {
display: flex;
align-items: center;
justify-content: center;
}
.yayrev-btn-icon svg {
display: block;
} .yayrev-btn-primary {
color: #fff;
background: #000;
border-color: #000;
}
.yayrev-btn-primary:hover {
color: #fff;
background: #2F2F2F;
border-color: #000;
}
.yayrev-btn-primary:disabled {
opacity: 0.6;
cursor: not-allowed;
} .yayrev-btn.yayrev-loading {
position: relative;
}
.yayrev-btn.yayrev-loading::after {
content: "";
position: absolute;
width: 14px;
height: 14px;
top: 50%;
left: 50%;
margin-top: -7px;
margin-left: -7px;
border: 2px solid transparent;
border-top-color: currentColor;
border-radius: 50%;
animation: yayrev-spin 0.6s linear infinite;
}
.yayrev-btn-primary.yayrev-loading::after {
border-top-color: #fff;
}
@keyframes yayrev-spin {
to {
transform: rotate(360deg);
}
} .yayrev-action-forms {
margin-top: 12px;
} .yayrev-form {
background: #f9f9f9;
border: 1px solid #e5e5e5;
border-radius: 8px;
padding: 16px;
margin-top: 12px;
}
.yayrev-form-header {
margin-bottom: 12px;
}
.yayrev-form-header h4 {
margin: 0;
font-size: 14px;
font-weight: 600;
color: #333;
} .yayrev-form-field {
display: flex;
flex-wrap: wrap;
margin-bottom: 12px;
}
.yayrev-form-field:last-child {
margin-bottom: 0;
}
.yayrev-form-field label {
display: block;
margin-bottom: 6px;
font-size: 13px;
font-weight: 500;
color: #555;
}
.yayrev-textarea {
width: 100%;
min-height: 100px;
padding: 10px 12px;
font-size: 14px;
line-height: 1.5;
color: #333;
background: #fff;
border-radius: var(--yayrev-radius, 6px);
resize: vertical;
transition: border-color 0.2s ease, box-shadow 0.2s ease;
} .yayrev-rating-field {
display: flex;
align-items: center;
gap: 12px;
}
.yayrev-rating-field label {
margin-bottom: 0;
white-space: nowrap;
} .yayrev-rating-field:has(.yayrev-rating-input--dropdown) {
flex-direction: column;
align-items: stretch;
gap: 6px;
}
.yayrev-rating-field:has(.yayrev-rating-input--dropdown) label {
margin-bottom: 0;
} .yayrev-form .yayrev-input {
width: 100%;
padding: 8px 12px;
font-size: 14px;
color: #333;
background: #fff;
border: 1px solid #ddd;
border-radius: 6px;
transition: border-color 0.2s ease, box-shadow 0.2s ease;
box-sizing: border-box;
}
.yayrev-form .yayrev-input:focus {
outline: none;
border-color: #999;
box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.08);
} .yayrev-form-actions {
display: flex;
justify-content: flex-end;
gap: 8px;
margin-top: 16px;
padding-top: 12px;
border-top: 1px solid #e5e5e5;
} .yayrev-form-error {
margin-top: 12px;
padding: 10px 12px;
font-size: 13px;
color: #dc2626;
background: #fef2f2;
border: 1px solid #fecaca;
border-radius: 6px;
} .yayrev-store-replies {
margin-top: 16px;
padding-left: 20px;
border-left: 3px solid #6366f1;
} .yayrev-store-reply {
background: #f0f0ff;
border-radius: 8px;
padding: 14px;
margin-bottom: 12px;
}
.yayrev-store-reply:last-child {
margin-bottom: 0;
} .yayrev-reply-badge {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 4px 10px;
font-size: 11px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.5px;
color: #6366f1;
background: #e0e0ff;
border-radius: 12px;
margin-bottom: 10px;
}
.yayrev-reply-badge svg {
flex-shrink: 0;
} .yayrev-reply-content {
font-size: 14px;
line-height: 1.6;
color: #333;
}
.yayrev-reply-meta {
display: flex;
align-items: center;
gap: 8px;
margin-bottom: 8px;
font-size: 13px;
}
.yayrev-reply-author {
font-weight: 600;
color: #333;
}
.yayrev-reply-date {
color: #777;
}
.yayrev-reply-text {
color: #444;
}
.yayrev-reply-text p {
margin: 0;
}
.yayrev-reply-text p + p {
margin-top: 8px;
} .yayrev-edited-badge {
display: inline-flex;
align-items: center;
width: fit-content;
gap: 4px;
padding: 2px 8px;
font-size: 11px;
font-weight: 500;
color: #6b7280;
background: #f3f4f6;
border-radius: 4px;
}
.yayrev-edited-badge svg {
flex-shrink: 0;
} @media (max-width: 600px) {
.yayrev-action-buttons {
flex-wrap: wrap;
}
.yayrev-btn {
flex: 1 1 auto;
justify-content: center;
}
.yayrev-form {
padding: 12px;
}
.yayrev-form-actions {
flex-direction: column;
}
.yayrev-form-actions .yayrev-btn {
width: 100%;
justify-content: center;
}
.yayrev-store-replies {
padding-left: 12px;
}
.yayrev-rating-field {
flex-direction: column;
align-items: flex-start;
gap: 8px;
}
}