/* Sofa Cover Preview Plugin Styles */
.scp-wrap { font-family: 'Tahoma', 'Vazir', sans-serif; direction: rtl; max-width: 720px; margin: 0 auto; padding: 8px 0 24px; }
.scp-title { font-size: 22px; font-weight: 600; color: #1a1a1a; margin-bottom: 4px; }
.scp-sub { font-size: 14px; color: #666; margin-bottom: 20px; }

/* Steps */
.scp-steps { display: flex; gap: 8px; margin-bottom: 20px; flex-wrap: wrap; }
.scp-step { flex: 1; min-width: 80px; padding: 8px 12px; border-radius: 8px; border: 1px solid #e0e0e0; font-size: 13px; color: #888; text-align: center; background: #f7f7f7; }
.scp-step.scp-active { background: #e8f0fb; color: #1a56b0; border-color: #a8c4f0; font-weight: 600; }
.scp-step.scp-done { background: #e8f8ee; color: #1a7a3c; border-color: #90d4a8; }

/* Cards */
.scp-card { background: #fff; border: 1px solid #e0e0e0; border-radius: 12px; padding: 20px; margin-bottom: 16px; }
.scp-card-title { font-size: 15px; font-weight: 600; color: #1a1a1a; margin-bottom: 16px; }

/* Upload */
.scp-upload-area { border: 2px dashed #bbb; border-radius: 8px; padding: 32px 16px; text-align: center; cursor: pointer; transition: background 0.15s, border-color 0.15s; }
.scp-upload-area:hover, .scp-upload-area.scp-dragover { background: #f0f4ff; border-color: #5b8dee; }
.scp-upload-icon { font-size: 36px; display: block; margin-bottom: 10px; }
.scp-upload-area p { font-size: 14px; color: #555; margin: 0 0 4px; }
.scp-hint { font-size: 12px; color: #999; }

/* Covers grid */
.scp-covers-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(80px, 1fr)); gap: 10px; }
.scp-cover-card { border: 2px solid transparent; border-radius: 8px; cursor: pointer; overflow: hidden; transition: border-color 0.15s; }
.scp-cover-card:hover { border-color: #bbb; }
.scp-cover-card.scp-selected { border-color: #1a56b0; }
.scp-swatch { width: 100%; height: 56px; }
.scp-cover-name { font-size: 11px; color: #555; text-align: center; padding: 5px 2px; background: #fafafa; }

/* Intensity */
.scp-intensity-row { display: flex; align-items: center; gap: 12px; margin-top: 16px; }
.scp-intensity-row label { font-size: 13px; color: #555; white-space: nowrap; }
.scp-intensity-row input[type=range] { flex: 1; }
#scp-intensity-val { font-size: 13px; font-weight: 600; min-width: 34px; color: #1a1a1a; }

/* Canvas */
#scp-canvas { width: 100%; border-radius: 8px; display: block; }

/* Loading */
.scp-loading { display: flex; align-items: center; gap: 10px; padding: 12px; background: #f5f8ff; border-radius: 8px; margin-bottom: 12px; font-size: 13px; color: #444; }
.scp-spinner { display: inline-block; width: 18px; height: 18px; border: 2px solid #c0d0f0; border-top-color: #1a56b0; border-radius: 50%; animation: scp-spin 0.7s linear infinite; flex-shrink: 0; }
@keyframes scp-spin { to { transform: rotate(360deg); } }

/* Buttons */
.scp-btn-row { display: flex; gap: 10px; margin-top: 16px; flex-wrap: wrap; }
.scp-btn { padding: 10px 20px; border-radius: 8px; font-size: 14px; cursor: pointer; border: 1px solid #ccc; background: #fff; color: #333; font-family: inherit; transition: background 0.12s; }
.scp-btn:hover { background: #f2f2f2; }
.scp-btn-primary { background: #1a56b0; color: #fff; border-color: #1a56b0; font-weight: 600; }
.scp-btn-primary:hover { background: #144494; border-color: #144494; }

@media (max-width: 480px) {
  .scp-steps { gap: 4px; }
  .scp-step { font-size: 11px; padding: 6px 8px; }
  .scp-covers-grid { grid-template-columns: repeat(auto-fill, minmax(64px, 1fr)); }
}