/* assets/css/addpackage.css */

.sg-confirmation-wrapper {
  animation: fadeInUp 0.3s ease;
}

@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}

.border-orange {
  border-color: var(--sg-orange) !important;
}

/* Package number styling */
#packageNumber {
  font-weight: 600;
  color: var(--sg-orange-dark);
  letter-spacing: 0.02em;
}

/* Merchant row card */
.merchant-row {
  border-left: 3px solid var(--sg-orange);
  transition: all 0.2s ease;
}

.merchant-row:hover {
  box-shadow: var(--sg-shadow-md);
}

/* Coupon checkbox list */
.coupon-list-container {
  max-height: 200px;
  overflow-y: auto;
  border: 1px solid var(--sg-gray-100);
  border-radius: var(--sg-radius-sm);
  padding: 0.75rem;
}

.coupon-list-container .form-check {
  padding: 0.5rem 0.5rem 0.5rem 2rem;
  border-bottom: 1px solid var(--sg-gray-100);
  border-radius: var(--sg-radius-sm);
}

.coupon-list-container .form-check:last-child {
  border-bottom: none;
}

.coupon-list-container .form-check:hover {
  background-color: var(--sg-orange-tint);
}

.coupon-check-label {
  font-size: 0.875rem;
  cursor: pointer;
}

.coupon-saving-badge {
  font-size: 0.75rem;
  background-color: var(--sg-orange-tint);
  color: var(--sg-orange-dark);
  padding: 0.1rem 0.4rem;
  border-radius: var(--sg-radius-pill);
  font-weight: 600;
}

/* Terms container */
.pkg-term-row .btn-remove-pkg-term {
  border-radius: 0 var(--sg-radius-sm) var(--sg-radius-sm) 0;
}

/* Confirmation merchant summary */
.merchant-summary-card {
  border: 1px solid var(--sg-border);
  border-radius: var(--sg-radius-md);
  padding: 1rem;
  margin-bottom: 0.75rem;
  background-color: var(--sg-surface-alt);
}

.merchant-summary-card .merchant-name {
  font-weight: 700;
  color: var(--sg-black);
  margin-bottom: 0.5rem;
}

.merchant-summary-card .coupon-item {
  font-size: 0.85rem;
  color: var(--sg-text-muted);
  padding: 0.2rem 0;
}

/* Sticky tips panel */
.sticky-top {
  z-index: 1;
}

/* Package image upload zone */
.sg-upload-zone {
  border: 2px dashed var(--sg-border);
  border-radius: var(--sg-radius-md);
  padding: 2rem;
  text-align: center;
  cursor: pointer;
  transition: all 0.2s ease;
  background-color: var(--sg-surface);
  position: relative;
  overflow: hidden;
  min-height: 180px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.sg-upload-zone:hover,
.sg-upload-zone.dragover {
  border-color: var(--sg-orange);
  background-color: var(--sg-orange-tint);
}

.sg-upload-zone input[type="file"] {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
  z-index: 5;
}

.sg-upload-placeholder {
  pointer-events: none;
}

.sg-upload-preview {
  max-height: 150px;
  max-width: 100%;
  object-fit: contain;
  border-radius: var(--sg-radius-sm);
}