/* =====================================================
   Custom CSS for canada-loan-html PHP site
   Supplements the compiled Tailwind CSS from React build
   ===================================================== */

/* ── CSS Variables (fallback if not in compiled CSS) ── */
:root {
  --background: 0 0% 100%;
  --foreground: 224 30% 12%;
  --card: 0 0% 100%;
  --card-foreground: 224 30% 12%;
  --primary: 221 83% 53%;
  --primary-foreground: 0 0% 100%;
  --secondary: 220 14% 96%;
  --secondary-foreground: 221 80% 42%;
  --muted: 220 14% 94%;
  --muted-foreground: 220 9% 46%;
  --accent: 221 91% 96%;
  --accent-foreground: 221 80% 42%;
  --destructive: 0 84% 60%;
  --border: 220 13% 91%;
  --input: 220 13% 91%;
  --ring: 221 83% 53%;
  --radius: 0.75rem;
  --gradient-primary: linear-gradient(135deg, hsl(221, 83%, 53%) 0%, hsl(250, 95%, 60%) 100%);
}

html, body { overflow-x: clip; }
body { background-color: hsl(var(--background)); color: hsl(var(--foreground)); }
*, *::before, *::after { box-sizing: border-box; border-color: hsl(var(--border)); }

/* ── Gradient Utilities ── */
.gradient-primary { background: var(--gradient-primary); }
.gradient-hero { background: linear-gradient(180deg, hsl(220,14%,97%) 0%, hsl(220,14%,96%) 100%); }
.shadow-card { box-shadow: 0 4px 24px -4px hsl(224 30% 12% / 0.06); }
.shadow-elevated { box-shadow: 0 12px 40px -8px hsl(224 30% 12% / 0.12); }

/* ── Range Slider (Calculator) ── */
.loan-slider {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 6px;
  border-radius: 9999px;
  background: hsl(var(--muted));
  outline: none;
  cursor: pointer;
  border: none;
}
.loan-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: hsl(var(--primary));
  cursor: pointer;
  border: 2px solid #fff;
  box-shadow: 0 1px 3px rgba(0,0,0,0.2);
  transition: transform 0.1s;
}
.loan-slider::-webkit-slider-thumb:hover { transform: scale(1.15); }
.loan-slider::-moz-range-thumb {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: hsl(var(--primary));
  cursor: pointer;
  border: 2px solid #fff;
}
.loan-slider-track {
  position: relative;
  width: 100%;
  height: 6px;
  border-radius: 9999px;
  background: hsl(var(--muted));
  overflow: hidden;
}

/* ── FAQ Accordion ── */
.faq-item { }
.faq-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  text-align: left;
  padding: 0.75rem 0;
  background: none;
  border: none;
  cursor: pointer;
  font-size: 0.875rem;
  font-weight: 500;
  color: hsl(var(--foreground));
  gap: 1rem;
}
@media (min-width: 768px) { .faq-trigger { font-size: 1rem; padding: 1rem 0; } }
.faq-trigger[aria-expanded="true"] { color: hsl(var(--primary)); }
.faq-trigger svg { transition: transform 0.2s ease; flex-shrink: 0; }
.faq-trigger[aria-expanded="true"] svg { transform: rotate(180deg); }
.faq-content {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease;
}
.faq-content.open { max-height: 600px; }
.faq-content-inner {
  padding-bottom: 0.75rem;
  font-size: 0.75rem;
  color: hsl(var(--muted-foreground));
}
@media (min-width: 768px) { .faq-content-inner { font-size: 0.875rem; padding-bottom: 1rem; } }

/* ── Finance Listing Cards ── */
.finance-card { border-radius: 0.5rem; border: 1px solid hsl(var(--border) / 0.3); background: hsl(var(--card)); box-shadow: 0 1px 3px rgba(0,0,0,0.05); overflow: hidden; }
.rank-badge-1 { background: linear-gradient(135deg, hsl(var(--primary)) 0%, hsl(221 83% 45%) 100%); color: hsl(var(--primary-foreground)); }
.rank-badge-2 { background: linear-gradient(135deg, #94a3b8 0%, #64748b 100%); color: #fff; }
.rank-badge-3 { background: linear-gradient(135deg, #d97706 0%, #b45309 100%); color: #fff; }
.rank-badge-n { background: hsl(var(--muted)); color: hsl(var(--muted-foreground)); }

/* ── Loading Spinner ── */
@keyframes spin { to { transform: rotate(360deg); } }
.spinner { display: inline-block; width: 1.5rem; height: 1.5rem; border: 2px solid hsl(var(--muted)); border-top-color: hsl(var(--primary)); border-radius: 50%; animation: spin 0.7s linear infinite; }
.spinner-lg { width: 2.5rem; height: 2.5rem; border-width: 3px; }

/* ── Pulse animation (redirect page) ── */
@keyframes ping-anim { 75%, 100% { transform: scale(1.5); opacity: 0; } }
.animate-ping-slow { animation: ping-anim 2s cubic-bezier(0,0,0.2,1) infinite; }
@keyframes pulse-anim { 0%,100% { opacity: 1; } 50% { opacity: 0.5; } }
.animate-pulse-slow { animation: pulse-anim 2s ease infinite; }
@keyframes spin-btn { to { transform: rotate(360deg); } }
.animate-spin { animation: spin-btn 0.7s linear infinite; }

/* ── Prose styles ── */
.prose h1 { font-size: 1.5rem; font-weight: 700; color: hsl(var(--foreground)); margin-bottom: 1rem; margin-top: 1.5rem; }
.prose h2 { font-size: 1.25rem; font-weight: 700; color: hsl(var(--foreground)); margin-bottom: 0.75rem; margin-top: 1.25rem; }
.prose h3 { font-size: 1.125rem; font-weight: 600; color: hsl(var(--foreground)); margin-bottom: 0.5rem; margin-top: 1rem; }
.prose p { color: hsl(var(--muted-foreground)); line-height: 1.6; margin-bottom: 1rem; }
.prose ul { margin-bottom: 1rem; padding-left: 1.25rem; }
.prose li { color: hsl(var(--muted-foreground)); list-style-type: disc; margin-bottom: 0.5rem; }
.prose a { color: hsl(var(--primary)); text-decoration: underline; }
.prose strong { font-weight: 600; color: hsl(var(--foreground)); }

/* ── Collapsible lender card details ── */
.lender-details { max-height: 0; overflow: hidden; transition: max-height 0.35s ease; }
.lender-details.open { max-height: 1000px; }

/* ── Utility tweaks ── */
.line-clamp-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.drop-shadow-2xl { filter: drop-shadow(0 25px 25px rgba(0,0,0,0.15)); }