/* =========================================================
   Linkdasher — Custom styles supplementing Tailwind CDN
   ========================================================= */

/* Dark base overrides */
:root {
  --color-bg:      #0b1120;
  --color-surface: #1e293b;
  --color-border:  #334155;
  --color-primary: #3b82f6;
  --color-text:    #f1f5f9;
  --color-muted:   #94a3b8;
}

html, body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Inter', sans-serif; }

/* Glass card */
.glass {
  background: rgba(30, 41, 59, 0.6);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid var(--color-border);
}

/* Gradient hero */
.gradient-hero {
  background: var(--color-bg);
}

/* Scrollbar */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: var(--color-bg); }
::-webkit-scrollbar-thumb { background: var(--color-border); border-radius: 3px; }

/* [x-cloak] */
[x-cloak] { display: none !important; }

/* Prose (policy pages) */
.prose-invert h1, .prose-invert h2, .prose-invert h3 { color: #fff; margin-top: 1.5em; margin-bottom: 0.5em; font-weight: 700; }
.prose-invert p  { margin-bottom: 1em; }
.prose-invert ul { list-style: disc; padding-left: 1.5em; margin-bottom: 1em; }
.prose-invert ol { list-style: decimal; padding-left: 1.5em; margin-bottom: 1em; }
.prose-invert a  { color: var(--color-primary); text-decoration: underline; }

/* Pricing popular ring */
.pricing-card-popular { box-shadow: 0 0 0 2px var(--color-primary), 0 8px 32px rgba(59,130,246,0.15); }

/* Toast notifications */
.toast { animation: slideUp 0.3s ease-out; }
@keyframes slideUp { from { transform: translateY(20px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }

/* Page builder preview */
#preview-area [data-type="link"] { transition: opacity 0.15s; }
#preview-area [data-type="link"]:hover { opacity: 0.85; }

/* Animations */
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
.fade-in { animation: fadeIn 0.4s ease-out; }

/* Copy link button active flash */
.copy-flash { animation: copyFlash 0.3s ease; }
@keyframes copyFlash { 0% { transform: scale(1); } 50% { transform: scale(1.15); } 100% { transform: scale(1); } }