/* ReturnBox Frontend Styles */
:root {
  --rb-primary: #2563eb;
  --rb-primary-hover: #1d4ed8;
  --rb-success: #10b981;
  --rb-danger: #ef4444;
  --rb-warning: #f59e0b;
  --rb-gray-50: #f9fafb;
  --rb-gray-100: #f3f4f6;
  --rb-gray-200: #e5e7eb;
  --rb-gray-300: #d1d5db;
  --rb-gray-400: #9ca3af;
  --rb-gray-500: #6b7280;
  --rb-gray-700: #374151;
  --rb-gray-900: #111827;
  --rb-radius: 10px;
  --rb-shadow: 0 4px 24px rgba(0,0,0,0.08);
  --rb-font: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

.rb-wrapper {
  max-width: 600px;
  margin: 0 auto;
  font-family: var(--rb-font);
}
.rb-step { animation: rbFadeIn 0.4s ease; }
@keyframes rbFadeIn { from { opacity:0; transform:translateY(12px); } to { opacity:1; transform:translateY(0); } }

/* Step Indicator */
.rb-step-indicator {
  display: flex; align-items: center; justify-content: center; gap: 0; margin-bottom: 24px;
}
.rb-step-number {
  width: 36px; height: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  font-size: 14px; font-weight: 600; border: 2px solid var(--rb-gray-300); color: var(--rb-gray-400); background: #fff;
  transition: all 0.3s;
}
.rb-step-number.rb-step-current {
  border-color: var(--rb-primary); color: #fff; background: var(--rb-primary);
  box-shadow: 0 0 0 4px rgba(37,99,235,0.15);
}
.rb-step-number.rb-step-done {
  border-color: var(--rb-success); color: #fff; background: var(--rb-success);
}
.rb-step-line {
  width: 48px; height: 2px; background: var(--rb-gray-200); transition: background 0.3s;
}
.rb-step-line.rb-step-line-done { background: var(--rb-success); }

.rb-step-header { text-align: center; margin-bottom: 28px; }
.rb-title { font-size: 22px; font-weight: 700; color: var(--rb-gray-900); margin: 0 0 6px; }
.rb-subtitle { font-size: 14px; color: var(--rb-gray-500); margin: 0; }

/* Form */
.rb-form { display: flex; flex-direction: column; gap: 18px; }
.rb-field { display: flex; flex-direction: column; gap: 6px; }
.rb-field label { font-size: 14px; font-weight: 600; color: var(--rb-gray-700); }
.rb-required { color: var(--rb-danger); }

.rb-input, .rb-form input[type="text"], .rb-form input[type="email"], .rb-form select, .rb-form textarea {
  width: 100%; padding: 12px 14px; border: 1.5px solid var(--rb-gray-200); border-radius: var(--rb-radius);
  font-size: 15px; color: var(--rb-gray-900); background: #fff; transition: border-color 0.2s, box-shadow 0.2s;
  outline: none; box-sizing: border-box; font-family: var(--rb-font);
}
.rb-input:focus, .rb-form input:focus, .rb-form select:focus, .rb-form textarea:focus {
  border-color: var(--rb-primary); box-shadow: 0 0 0 3px rgba(37,99,235,0.1);
}

/* Buttons */
.rb-button {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 13px 28px; border: none; border-radius: var(--rb-radius); font-size: 15px; font-weight: 600;
  cursor: pointer; transition: all 0.2s; background: var(--rb-primary); color: #fff; font-family: var(--rb-font);
}
.rb-button:hover { background: var(--rb-primary-hover); transform: translateY(-1px); box-shadow: 0 4px 12px rgba(37,99,235,0.25); }
.rb-button:active { transform: translateY(0); }
.rb-button:disabled { opacity: 0.6; cursor: not-allowed; transform: none; }
.rb-button-secondary { background: var(--rb-gray-100); color: var(--rb-gray-700); }
.rb-button-secondary:hover { background: var(--rb-gray-200); box-shadow: none; }

.rb-actions { display: flex; justify-content: space-between; gap: 12px; margin-top: 8px; }

/* Spinner */
.rb-spinner { animation: rbSpin 0.8s linear infinite; }
@keyframes rbSpin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }

/* Messages */
.rb-message {
  padding: 12px 16px; border-radius: var(--rb-radius); font-size: 14px; line-height: 1.5;
}
.rb-error { background: #fef2f2; border: 1px solid #fecaca; color: #991b1b; }

/* Products List */
.rb-products-list { display: flex; flex-direction: column; gap: 10px; margin-bottom: 8px; }
.rb-product-item {
  display: flex; align-items: center; gap: 14px; padding: 14px; border: 1.5px solid var(--rb-gray-200);
  border-radius: var(--rb-radius); background: #fff; transition: border-color 0.2s, box-shadow 0.2s;
}
.rb-product-item:hover { border-color: var(--rb-primary); box-shadow: 0 2px 8px rgba(37,99,235,0.08); }
.rb-product-item.rb-excluded {
  opacity: 0.5; pointer-events: none; background: var(--rb-gray-50);
}
.rb-product-item.rb-selected { border-color: var(--rb-primary); background: #eff6ff; }
.rb-product-check { flex-shrink: 0; }
.rb-product-check input[type="checkbox"] {
  width: 20px; height: 20px; accent-color: var(--rb-primary); cursor: pointer;
}
.rb-product-img { width: 48px; height: 48px; border-radius: 6px; object-fit: cover; flex-shrink: 0; background: var(--rb-gray-100); }
.rb-product-info { flex: 1; min-width: 0; }
.rb-product-name { font-size: 14px; font-weight: 600; color: var(--rb-gray-900); }
.rb-product-meta { font-size: 13px; color: var(--rb-gray-500); margin-top: 2px; }
.rb-product-excluded-text { font-size: 12px; color: var(--rb-danger); font-style: italic; margin-top: 2px; }
.rb-product-qty {
  display: flex; align-items: center; gap: 4px; flex-shrink: 0;
}
.rb-product-qty select {
  width: auto; padding: 6px 10px; font-size: 13px; border-radius: 6px;
}

/* Success */
.rb-success { text-align: center; padding: 40px 20px; }
.rb-success-icon { margin-bottom: 20px; }
.rb-success-icon svg { animation: rbCheckmark 0.6s ease; }
@keyframes rbCheckmark { from { transform: scale(0.5); opacity:0; } to { transform: scale(1); opacity:1; } }
.rb-success-text { font-size: 16px; color: var(--rb-gray-700); line-height: 1.6; }

/* Responsive */
@media (max-width: 640px) {
  .rb-wrapper { padding: 0 16px; }
  .rb-title { font-size: 18px; }
  .rb-step-line { width: 32px; }
  .rb-actions { flex-direction: column; }
  .rb-actions .rb-button { width: 100%; }
}