/* Delivery promise card — used on PDP, cart, checkout.
   Aesthetic: clean, single accent left-border, two-line layout. Urgency
   tier flips the accent + time color from neutral → orange → red. */

.delivery-promise {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem 1rem;
  background: var(--primary-a06, #f8faff);
  border: 1px solid var(--primary-a12, #e3e8f0);
  border-left: 4px solid var(--color-primary, #9249d9);
  border-radius: 0.5rem;
  font-size: 0.92rem;
  line-height: 1.35;
  color: #2c3142;
  transition: border-color 0.2s, background 0.2s;
}

.delivery-promise[data-urgency="soon"] {
  border-left-color: #f59e0b;
  background: #fffbeb;
}
.delivery-promise[data-urgency="urgent"] {
  border-left-color: #ef4444;
  background: #fef2f2;
}

.delivery-promise .dp-icon {
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--primary-a12, rgba(146, 73, 217, 0.12));
  color: var(--color-primary, #9249d9);
  font-size: 1rem;
}
.delivery-promise[data-urgency="soon"] .dp-icon  { background: rgba(245, 158, 11, 0.15); color: #b45309; }
.delivery-promise[data-urgency="urgent"] .dp-icon { background: rgba(239, 68, 68, 0.15); color: #b91c1c; }

.delivery-promise .dp-body {
  flex: 1 1 auto;
  min-width: 0;
}

.delivery-promise .dp-time {
  font-weight: 700;
  /* Tabular numerals keep digit-width stable so the surrounding text
     doesn't shift when ticking; no min-width so the span doesn't leave
     trailing whitespace on shorter values like "7 min". */
  font-variant-numeric: tabular-nums;
  color: inherit;
}
.delivery-promise[data-urgency="soon"]   .dp-time { color: #b45309; }
.delivery-promise[data-urgency="urgent"] .dp-time { color: #b91c1c; }

/* Hidden state — JS toggles this when no eligible promise. */
.delivery-promise.is-hidden { display: none !important; }