/* LobsterPay Custom Styles — supplements Tailwind CDN */

:root {
  --lobster-red: #E63946;
  --lobster-red-dark: #C1121F;
  --lobster-red-light: #FFF0F1;
  --navy: #1D3557;
  --navy-light: #457B9D;
  --cream: #F1FAEE;
  --dark-bg: #0F172A;
  --dark-surface: #1E293B;
}

/* Smooth scrolling */
html {
  scroll-behavior: smooth;
}

/* Custom gradient for hero */
.hero-gradient {
  background: linear-gradient(135deg, var(--navy) 0%, #2D4A7A 50%, var(--navy-light) 100%);
}

.dark .hero-gradient {
  background: linear-gradient(135deg, var(--dark-bg) 0%, #1a2744 50%, #1E293B 100%);
}

/* Lobster red accent underline */
.accent-underline {
  position: relative;
  display: inline-block;
}
.accent-underline::after {
  content: '';
  position: absolute;
  bottom: -4px;
  left: 0;
  width: 100%;
  height: 3px;
  background: var(--lobster-red);
  border-radius: 2px;
}

/* Card hover effect */
.feature-card {
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.feature-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.1);
}

/* Animated gradient border */
.gradient-border {
  position: relative;
  border-radius: 12px;
  padding: 1px;
  background: linear-gradient(135deg, var(--lobster-red), var(--navy-light));
}
.gradient-border > * {
  border-radius: 11px;
}

/* Legal page styles */
.legal-content h2 {
  margin-top: 2rem;
  margin-bottom: 0.75rem;
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--navy);
}
.dark .legal-content h2 {
  color: #e2e8f0;
}
.legal-content h3 {
  margin-top: 1.5rem;
  margin-bottom: 0.5rem;
  font-size: 1.1rem;
  font-weight: 600;
}
.legal-content p,
.legal-content li {
  margin-bottom: 0.5rem;
  line-height: 1.7;
}
.legal-content ul {
  list-style-type: disc;
  padding-left: 1.5rem;
}
.legal-content ol {
  list-style-type: decimal;
  padding-left: 1.5rem;
}

/* FAQ accordion */
.faq-item summary {
  cursor: pointer;
  list-style: none;
}
.faq-item summary::-webkit-details-marker {
  display: none;
}
.faq-item summary::before {
  content: '+';
  font-size: 1.25rem;
  font-weight: 700;
  margin-right: 0.75rem;
  color: var(--lobster-red);
  transition: transform 0.2s ease;
  display: inline-block;
}
.faq-item[open] summary::before {
  content: '-';
}

/* Mobile nav toggle */
.nav-open .mobile-menu {
  display: flex;
}