/* ============================================================
   RETURN REQUEST PAGE — return-request.css
   ============================================================ */

/* Progress bar */
.rr-progress {
  background: var(--surface);
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-subtle);
  box-shadow: var(--shadow-sm);
  padding: var(--space-lg) var(--space-xl);
  margin-bottom: var(--space-lg);
}

/* Step body */
.rr-body { }

/* Individual step */
.rr-step { display: none; animation: scaleIn 0.3s var(--ease); }
.rr-step.active { display: block; }

/* Step grid layout */
.rr-step-grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: var(--space-xl);
  align-items: center;
}
.rr-confirm-grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: var(--space-xl);
  align-items: center;
}

.rr-step-aside { display: flex; flex-direction: column; align-items: center; justify-content: center; }
.rr-step-aside img { width: 100%; max-width: 280px; height: auto; max-height: 360px; object-fit: contain; }
.rr-step-aside .card { width: 100%; max-width: 280px; }

/* Aside tip */
.aside-tip {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: var(--space-md);
  background: var(--brand-light);
  border-radius: var(--radius-md);
  border: 1px solid var(--brand-border);
}
.aside-tip-icon { font-size: 1.2rem; flex-shrink: 0; color: var(--brand); }
.aside-info-card { padding: var(--space-lg); }

/* Product list */
.product-list { display: flex; flex-direction: column; gap: var(--space-md); }
.product-option { cursor: pointer; }
.product-option input { display: none; }
.product-option-inner {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  padding: var(--space-md) var(--space-lg);
  border: 1.5px solid var(--border-strong);
  border-radius: var(--radius-lg);
  background: var(--surface);
  transition: all var(--dur-fast) var(--ease);
}
.product-option-inner:hover { border-color: var(--brand); background: var(--surface-alt); }
.product-option.selected .product-option-inner,
.product-option input:checked + .product-option-inner {
  border-color: var(--brand);
  background: var(--brand-light);
  box-shadow: 0 0 0 3px rgba(37,99,235,0.12);
}
.product-emoji { font-size: 2rem; flex-shrink: 0; }
.product-details { flex: 1; }
.product-check {
  width: 22px; height: 22px;
  border-radius: 50%;
  border: 2px solid var(--border-strong);
  flex-shrink: 0;
  transition: all var(--dur-fast) var(--ease);
}
.product-option.selected .product-check,
.product-option input:checked ~ .product-option-inner .product-check {
  background: var(--brand);
  border-color: var(--brand);
}
.product-check::after {
  content: '';
  position: absolute;
  display: none;
  width: 5px; height: 10px;
  border: solid white;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
  margin-top: 2px;
  margin-left: 6px;
}
.product-option input:checked ~ .product-option-inner .product-check::after {
  display: block;
}


/* Reason grid */
.reason-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-md);
}
.reason-option { cursor: pointer; }
.reason-option input { display: none; }
.reason-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: var(--space-md);
  border: 1.5px solid var(--border-strong);
  border-radius: var(--radius-md);
  background: var(--surface);
  transition: all var(--dur-fast) var(--ease);
  text-align: center;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--text-secondary);
}
.reason-inner:hover { border-color: var(--brand); background: var(--surface-alt); }
.reason-option.selected .reason-inner,
.reason-option input:checked + .reason-inner {
  border-color: var(--brand);
  background: var(--brand-light);
  box-shadow: 0 0 0 3px rgba(37,99,235,0.12);
  color: var(--brand);
}
.reason-icon { font-size: 1.6rem; }

/* Upload zone */
.upload-zone {
  border: 2px dashed var(--border-strong);
  border-radius: var(--radius-lg);
  padding: var(--space-2xl);
  text-align: center;
  cursor: pointer;
  background: var(--surface);
  transition: all var(--dur-fast) var(--ease);
}
.upload-zone:hover { border-color: var(--brand); background: var(--brand-light); }
.upload-icon { font-size: 3rem; display: block; color: var(--text-muted); transition: color var(--dur-fast) var(--ease); }
.upload-zone:hover .upload-icon { color: var(--brand); }

/* Resolution choices */
.resolution-choices { display: flex; flex-direction: column; gap: var(--space-md); }
.resolution-choice { cursor: pointer; }
.resolution-choice input { display: none; }
.resolution-inner {
  display: flex;
  align-items: center;
  gap: var(--space-lg);
  padding: var(--space-lg);
  border: 1.5px solid var(--border-strong);
  border-radius: var(--radius-lg);
  background: var(--surface);
  transition: all var(--dur-fast) var(--ease);
}
.resolution-inner:hover { border-color: var(--brand); background: var(--surface-alt); }
.resolution-choice.selected .resolution-inner,
.resolution-choice input:checked + .resolution-inner {
  border-color: var(--brand);
  background: var(--brand-light);
  box-shadow: 0 0 0 3px rgba(37,99,235,0.12);
}
.resolution-icon {
  width: 54px; height: 54px;
  border-radius: var(--radius-md);
  background: var(--surface-alt);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.5rem;
  flex-shrink: 0;
  transition: background var(--dur-fast) var(--ease);
}
.resolution-choice input:checked + .resolution-inner .resolution-icon {
  background: #fff;
  color: var(--brand);
}
.resolution-check {
  width: 22px; height: 22px;
  border-radius: 50%;
  border: 2px solid var(--border-strong);
  margin-left: auto;
  flex-shrink: 0;
  transition: all var(--dur-fast) var(--ease);
}
.resolution-choice.selected .resolution-check,
.resolution-choice input:checked + .resolution-inner .resolution-check { background: var(--brand); border-color: var(--brand); }
.resolution-check::after {
  content: '';
  position: absolute;
  display: none;
  width: 5px; height: 10px;
  border: solid white;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
  margin-top: 2px;
  margin-left: 6px;
}
.resolution-choice input:checked + .resolution-inner .resolution-check::after {
  display: block;
}

/* Pickup options */
.pickup-options { display: flex; gap: var(--space-md); flex-wrap: wrap; }
.pickup-option { cursor: pointer; }
.pickup-option input { display: none; }
.pickup-option span {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 20px;
  border: 1.5px solid var(--border-strong);
  border-radius: var(--radius-full);
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--text-secondary);
  transition: all var(--dur-fast) var(--ease);
  background: var(--surface);
}
.pickup-option span:hover { border-color: var(--brand); background: var(--surface-alt); }
.pickup-option input:checked + span { background: var(--brand); color: #fff; border-color: var(--brand); box-shadow: 0 3px 10px rgba(37,99,235,0.25); }

/* Confirm summary */
.confirm-summary { display: flex; flex-direction: column; gap: 0; }
.confirm-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 0;
  border-bottom: 1px solid var(--border-subtle);
}
.confirm-row:last-child { border-bottom: none; }

/* Checkbox */
.checkbox-wrap {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  font-size: 0.9rem;
  color: var(--text-body);
  cursor: pointer;
}
.checkbox-wrap input { width: 18px; height: 18px; flex-shrink: 0; margin-top: 1px; accent-color: var(--brand); }

/* Step actions */
.rr-step-actions {
  display: flex;
  gap: var(--space-md);
  align-items: center;
  flex-wrap: wrap;
}

/* Success */
.rr-success { display: flex; justify-content: center; padding: 0; min-height: 70vh; }
.success-card {
  max-width: 100%;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 4rem 2rem;
  text-align: center;
}
.success-icon { font-size: 5rem; display: block; color: var(--success); margin-bottom: var(--space-md); }
.success-ref { display: flex; flex-direction: column; gap: 8px; background: var(--success-light); padding: var(--space-xl) 4rem; border-radius: var(--radius-lg); border: 1px solid var(--success-border); }
.success-actions { display: flex; gap: var(--space-md); justify-content: center; flex-wrap: wrap; margin-top: var(--space-xl); }

/* Sidebar user */
.sidebar-user { display: flex; align-items: center; gap: 10px; }

@media (max-width: 1024px) {
  .rr-step-grid, .rr-confirm-grid { grid-template-columns: 1fr; }
  .rr-step-aside { order: -1; }
  .reason-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
  .reason-grid { grid-template-columns: repeat(2, 1fr); }
  .rr-progress { padding: var(--space-md); overflow-x: auto; }
  .step-label { font-size: 0.65rem; }
}
@media (max-width: 480px) {
  .reason-grid { grid-template-columns: 1fr; }
  .pickup-options { flex-direction: column; }
}