/* Customers tab — "إنشاء أبلكيشن العميل" card (Task A). Owned file: admin/admin-qrapp.css (linked from
   admin/index.html). Kept separate from admin.css (owned by another agent) so the two never conflict. */

.bs-custapp { margin-bottom: 14px; }
.bs-custapp h3 { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.bs-custapp .mut { font-weight: 400; }

.ca-row { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-top: 8px; }

/* clearly-visible "فتح تطبيق العميل" button — the only entry point to the live customer app
   left in the admin now that the top-of-dashboard/reservations link card was removed */
.ca-open-link { display: inline-flex; align-items: center; gap: 6px; margin-top: 10px; }

.ca-icon {
  width: 46px; height: 46px; border-radius: 12px; display: flex; align-items: center; justify-content: center;
  font-size: 22px; background: var(--pri-10, rgba(182, 139, 72, .14)); flex: none;
}

/* idle: plain premium button, consistent with the product-card buttons elsewhere in the app */
.ca-cta { display: flex; align-items: center; gap: 14px; }

/* creating: short, honest progress animation (~1.5-2.5s) — a scanning sweep across a QR glyph while the
   real link + token are generated server-side, not a decorative spinner shown before anything happened */
.ca-progress { display: flex; align-items: center; gap: 14px; }
.ca-qr-anim {
  position: relative; width: 46px; height: 46px; border-radius: 10px; overflow: hidden;
  background: repeating-conic-gradient(#1c1a17 0deg 90deg, #fff 90deg 180deg) ; background-size: 10px 10px;
  box-shadow: inset 0 0 0 2px #1c1a17;
}
.ca-qr-anim::after {
  content: ''; position: absolute; inset-inline-start: 0; top: -100%; width: 100%; height: 40%;
  background: linear-gradient(180deg, rgba(182,139,72,0) 0%, rgba(182,139,72,.9) 50%, rgba(182,139,72,0) 100%);
  animation: caSweep 1.1s linear infinite;
}
@keyframes caSweep {
  0%   { top: -40%; }
  100% { top: 100%; }
}
.ca-progress-text { display: flex; flex-direction: column; gap: 2px; }
.ca-progress-text b { font-size: 14px; }
.ca-dots::after { content: '…'; animation: caDots 1.2s steps(4, end) infinite; }
@keyframes caDots {
  0%, 20%  { content: ''; }
  40%      { content: '.'; }
  60%      { content: '..'; }
  80%, 100%{ content: '...'; }
}

/* created: success state + print action */
.ca-done { display: flex; align-items: center; gap: 14px; animation: caFadeIn .35s ease; }
.ca-done-icon { color: #2f7d5b; font-size: 22px; }
.ca-done-text b { display: block; }
.ca-done-text small { color: var(--mut); }
@keyframes caFadeIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }

@media (max-width: 640px) {
  .ca-row, .ca-cta, .ca-progress, .ca-done { flex-wrap: wrap; }
}