/* PetDentify · Order Confirmation */

.ty-wrap { max-width: var(--container); margin: 0 auto; padding: 32px 20px 80px; }
.ty-wrap .lead { color:#64748b; margin-top:4px; }

.ty-card {
  margin-top: 14px; padding: 16px;
  border:1px solid #e5e7eb; border-radius: 12px; background:#fff;
  box-shadow:0 2px 4px rgba(2,6,12,.04);
}

.grid.three {
  display:grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px; margin: 8px 0 14px;
}

.label { font-size:12px; color:#6b7280; }
.value { font-weight:700; }

.items { margin-top: 8px; }
.items table { width:100%; border-collapse: collapse; }
.items th, .items td { padding:8px 10px; border-top:1px solid #eef2f7; }
.items th { text-align:left; font-weight:700; color:#111827; }
.right { text-align:right; }

.links { display:flex; gap:10px; margin-top:16px; }

.next { margin-top:22px; }
.btnbar { display:flex; gap:10px; flex-wrap: wrap; }

.fine, .muted { color:#6b7280; }
.small { font-size:12px; }

/* skeleton shimmer */
.skeleton {
  color: transparent;
  background: linear-gradient(90deg,#f3f4f6 25%,#eef2f7 37%,#f3f4f6 63%);
  background-size: 400% 100%;
  animation: sk 1.2s ease-in-out infinite;
  border-radius: 6px;
}
@keyframes sk { 0%{background-position:100% 0} 100%{background-position:0 0} }

/* Buttons (secondary on white) */
.btn.btn-secondary { background:#fff; color:#111827; border:1px solid #e5e7eb; }
.btn-ghost { background:transparent; border:1px dashed #e5e7eb; padding:8px 12px; border-radius:10px; }

/* Prevent long tokens from pushing into adjacent columns */
.ty-card .value {
  overflow-wrap: anywhere;     /* modern */
  word-break: break-word;      /* fallback */
}

/* Make the order id compact & readable */
#orderId.mono {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, "Liberation Mono",
               "Liberation Mono", Consolas, "Courier New", monospace;
  font-size: 0.9rem;
  letter-spacing: -0.01em;
}