/* Listify — custom styles on top of Tailwind Play CDN */

/* Safe area for iOS notch / home bar */
.pb-safe { padding-bottom: env(safe-area-inset-bottom, 0px); }

/* Hide scrollbars on tab rows */
.scrollbar-hide {
  -ms-overflow-style: none;
  scrollbar-width: none;
}
.scrollbar-hide::-webkit-scrollbar { display: none; }

/* Line clamp utility */
.line-clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Aspect ratio fallback (for browsers that don't support Tailwind's aspect-ratio) */
.aspect-\[9\/16\] { aspect-ratio: 9 / 16; }
.aspect-video { aspect-ratio: 16 / 9; }

/* Smooth focus ring */
input:focus, select:focus, textarea:focus, button:focus-visible {
  outline: 2px solid #5B5BD6;
  outline-offset: 2px;
}

/* Video card image — prevent layout shift */
.video-card img { display: block; }

/* Modal backdrop click target */
#embed-modal .absolute,
#add-video-modal .absolute,
#add-group-modal .absolute { cursor: default; }

/* Sortable drag ghost */
.sortable-ghost { opacity: 0.3; }

/* Smooth transitions for modals */
#embed-modal, #add-video-modal, #add-group-modal {
  transition: opacity 0.15s ease;
}

/* Bottom nav safe area spacing */
@supports (padding-bottom: env(safe-area-inset-bottom)) {
  nav.fixed.bottom-0 {
    padding-bottom: calc(env(safe-area-inset-bottom) + 0px);
  }
}

/* Apple-style form inputs */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="url"],
input[type="tel"],
select {
  -webkit-appearance: none;
  appearance: none;
}

/* TikTok embed container sizing */
.tiktok-embed { margin: 0 auto !important; }

/* Instagram embed container sizing */
.instagram-media { margin: 0 auto !important; max-width: 100% !important; }

/* Spinner for loading states */
@keyframes spin { to { transform: rotate(360deg); } }
.spinner, .animate-spin {
  animation: spin 0.75s linear infinite;
}
.spinner {
  width: 20px; height: 20px;
  border: 2px solid rgba(91,91,214,0.2);
  border-top-color: #5B5BD6;
  border-radius: 50%;
  display: inline-block;
}

/* Embed loading overlay smooth fade */
#embed-loading { transition: opacity 0.3s ease; pointer-events: none; }