/**
 * MEDCO Sarl & Ntoto-Nzuri — Component Specific Styles
 * Architecture : styles/components.css
 */

/* ==========================================================================
   Store Buttons (App Store & Google Play)
   ========================================================================== */
.store-btn {
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  user-select: none;
}

.store-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 15px 30px -10px rgba(0, 0, 0, 0.35);
}

.store-btn:active {
  transform: translateY(0);
}

/* ==========================================================================
   Mockup Device Frames & Badges
   ========================================================================== */
.mockup-frame {
  box-shadow: 0 25px 50px -12px rgba(15, 23, 42, 0.25);
  border: 1px solid rgba(226, 232, 240, 0.8);
}

.status-badge-pulse {
  position: relative;
  display: inline-flex;
}

.status-badge-pulse::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 9999px;
  background-color: currentColor;
  opacity: 0.35;
  animation: ping 2s cubic-bezier(0, 0, 0.2, 1) infinite;
}

/* ==========================================================================
   Interactive Tab Transitions
   ========================================================================== */
.tab-content {
  transition: opacity 0.2s ease-in-out, transform 0.2s ease-in-out;
}

.tab-content.hidden {
  display: none;
  opacity: 0;
  transform: translateY(4px);
}