@import url('../../core/css/digital-cards.css');

/* Hide welcome panel by default; shown when .visible is added by app */
.welcome-panel { display: none; }
.welcome-panel.visible { display: block; }

/* Hide app-main (cards view) when welcome panel is visible */
.welcome-panel.visible ~ .app-main { display: none; }

/* Lock fixed headers from micro-scrolling */
html, body { margin: 0; padding: 0; }
body, .digital-cards-app { overscroll-behavior: none; }
.main-nav { overflow: hidden; touch-action: manipulation; overscroll-behavior: contain; }
.sub-nav { overflow: hidden; touch-action: manipulation; overscroll-behavior: contain; }

/* Remove extra top padding under fixed headers */
.app-main { padding-top: 0 !important; }
@media (max-width: 768px) {
  .app-main { padding-top: 0 !important; }
}
/* Grid already clears headers; keep top tight */
.cards-grid { padding-top: 0; }
.cards-grid.is-filtering .digital-card { opacity: 0; transform: scale(0.98); transition: opacity 120ms ease, transform 120ms ease; }
.cards-grid .digital-card { transition: opacity 180ms ease, transform 180ms ease; }

/* Prevent initial flash of all cards in single-deck until filters/claims apply */
body.guard-grid .multi-view .cards-grid { visibility: hidden; }
body.guard-grid .cards-placeholder { display: none !important; }
body.guard-grid .multi-view .digital-card { animation: none !important; }
/* Stronger guard: hide entire app until ready */
body.guard-app .digital-cards-app { visibility: hidden; }

/* Subtle reveal fade to mask any last frame flicker */
.digital-cards-app { transition: opacity 120ms ease; }
body.fade-prep .digital-cards-app { visibility: visible; opacity: 0; }
body.fade-show .digital-cards-app { visibility: visible; opacity: 1; }

/* Refined welcome/join styles */
.welcome-panel {
  padding: 1.25rem;
}
.welcome-panel.visible {
  display: block;
}
.welcome-card {
  max-width: 520px;
  margin: 8vh auto 0;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(0,0,0,.06);
  padding: 1.25rem 1rem 1rem;
}
.welcome-card h1 {
  margin: 0 0 .4rem 0;
  font-size: 1.25rem;
  line-height: 1.2;
}
.welcome-card p {
  margin: .25rem 0 .9rem 0;
  color: #4b5563;
  font-size: .98rem;
}
.welcome-form {
  display: flex;
  gap: .5rem;
}
.welcome-form input[type=text]{
  flex: 1;
  padding: .7rem .8rem;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  font-size: 1rem;
  text-transform: uppercase;
  letter-spacing: .08em;
}
.welcome-form input[type=text]:focus{
  outline: none;
  border-color: #7A4FA0;
  box-shadow: 0 0 0 3px rgba(122,79,160,0.18);
}
.welcome-form button{
  background: #7A4FA0;
  color: #fff;
  border: none;
  padding: .7rem 1rem;
  border-radius: 8px;
  font-weight: 600;
  cursor: pointer;
}
.welcome-form button:hover{
  filter: brightness(1.05);
}
.welcome-error{
  margin-top: .6rem;
  color: #b91c1c;
  font-size: .96rem;
  display: none;
}
.welcome-hint{
  margin-top: .6rem;
  color: #6b7280;
  font-size: .9rem;
}

/* Tap-to-advance single-card mode: flip overlay button
   IMPORTANT: we intentionally reuse `.card-selection-indicator` styles for a perfect match. */
.tap-advance-flip-btn.card-selection-indicator {
  /* Place to the left of the 32px selection indicator at right:12px */
  right: 56px;
}
.tap-advance-flip-btn.card-selection-indicator img {
  width: 24px;
  height: 24px;
  display: block;
  object-fit: contain;
  /* Ensure monochrome PNG renders white like the selection SVG */
  filter: brightness(0) invert(1);
}