/* ==========================================================================
   DiviBills - Common Styles
   Shared CSS for all pages
   ========================================================================== */

/* Reset & Base */
* { margin: 0; padding: 0; box-sizing: border-box; }

/* CSS Variables */
:root {
  --brand-50: rgb(228, 250, 252);
  --brand-100: rgb(200, 240, 245);
  --brand-200: rgb(150, 225, 235);
  --brand-300: rgb(100, 200, 215);
  --brand-500: rgb(6, 160, 180);
  --brand-600: rgb(5, 142, 160);
  --brand-700: rgb(4, 123, 140);
  --secondary: rgb(28, 202, 194);
  --neutral-0: rgb(255, 255, 255);
  --neutral-50: rgb(250, 250, 250);
  --neutral-200: rgb(232, 235, 236);
  --neutral-400: rgb(180, 185, 186);
  --neutral-500: rgb(155, 161, 162);
  --neutral-700: rgb(79, 84, 85);
  --neutral-900: rgb(31, 34, 34);
  --default-font: rgb(23, 23, 23);
  --success-50: rgb(236, 253, 243);
  --success-500: rgb(34, 197, 94);
  --success-600: rgb(22, 163, 74);
}

/* Body */
body { 
  font-family: 'Plus Jakarta Sans', sans-serif; 
  color: var(--default-font); 
  line-height: 1.6; 
  min-height: 100vh;
}

/* ==========================================================================
   Navigation
   ========================================================================== */
nav { 
  position: fixed; 
  top: 0; 
  left: 0; 
  right: 0; 
  background: rgba(255,255,255,0.95); 
  backdrop-filter: blur(10px); 
  padding: 1rem 2rem; 
  display: flex; 
  justify-content: space-between; 
  align-items: center; 
  z-index: 1000; 
  box-shadow: 0 1px 2px rgba(0,0,0,0.05); 
}

.logo-container { 
  display: flex; 
  align-items: center; 
  gap: 1rem; 
}

.logo { 
  display: flex; 
  align-items: center; 
  gap: 0.5rem; 
  text-decoration: none; 
  color: var(--neutral-900); 
  font-weight: 600; 
  font-size: 1.25rem; 
  line-height: 1; 
}

.logo span {
  display: flex;
  align-items: center;
}

.logo img { 
  width: 40px; 
  height: 40px; 
  border-radius: 8px; 
}

.language-selector { 
  position: relative; 
}

.language-selector select { 
  appearance: none; 
  background: var(--neutral-50); 
  border: 1px solid var(--neutral-200); 
  border-radius: 8px; 
  padding: 0.5rem 2rem 0.5rem 0.75rem; 
  font-family: inherit; 
  font-size: 14px; 
  color: var(--neutral-700); 
  cursor: pointer; 
  transition: border-color 0.3s; 
}

.language-selector select:hover { 
  border-color: var(--brand-500); 
}

.language-selector::after { 
  content: '▼'; 
  position: absolute; 
  right: 0.75rem; 
  top: 50%; 
  transform: translateY(-50%); 
  font-size: 10px; 
  color: var(--neutral-500); 
  pointer-events: none; 
}

.nav-links { 
  display: flex; 
  gap: 2rem; 
  list-style: none;
  align-items: center;
}

.nav-links a { 
  text-decoration: none; 
  color: var(--neutral-500); 
  font-weight: 500; 
  font-size: 14px; 
  transition: color 0.3s; 
  display: flex;
  align-items: center;
}

.nav-links a:hover { 
  color: var(--brand-500); 
}

/* ==========================================================================
   Footer
   ========================================================================== */
footer { 
  background: var(--neutral-900); 
  color: var(--neutral-0); 
  padding: 3rem 2rem; 
}

.footer-content { 
  max-width: 1100px; 
  margin: 0 auto; 
  display: grid; 
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); 
  gap: 2rem; 
}

.footer-section h4 { 
  margin-bottom: 1rem; 
  font-size: 1rem; 
  font-weight: 600; 
}

.footer-section p { 
  color: var(--neutral-500); 
  font-size: 14px; 
}

.footer-section a { 
  color: rgba(255,255,255,0.6); 
  text-decoration: none; 
  display: block; 
  margin-bottom: 0.5rem; 
  font-size: 14px; 
  transition: color 0.3s; 
}

.footer-section a:hover { 
  color: var(--neutral-0); 
}

.footer-bottom { 
  max-width: 1100px; 
  margin: 2rem auto 0; 
  padding-top: 2rem; 
  border-top: 1px solid var(--neutral-700); 
  text-align: center; 
  color: var(--neutral-500); 
  font-size: 14px; 
}

/* ==========================================================================
   Content Pages (Privacy, Terms, Support)
   ========================================================================== */
.content { 
  max-width: 800px; 
  margin: 0 auto; 
  padding: 7rem 2rem 4rem; 
}

.content h1 { 
  font-size: 1.875rem; 
  font-weight: 600; 
  margin-bottom: 0.5rem; 
  color: var(--brand-500); 
}

.content .last-updated { 
  color: var(--neutral-500); 
  margin-bottom: 2rem; 
  font-size: 14px; 
}

.content h2 { 
  font-size: 1.25rem; 
  font-weight: 600; 
  margin-top: 2.5rem; 
  margin-bottom: 1rem; 
  color: var(--neutral-900); 
}

.content h3 { 
  font-size: 1rem; 
  font-weight: 600; 
  margin-top: 1.5rem; 
  margin-bottom: 0.75rem; 
  color: var(--neutral-900); 
}

.content p { 
  margin-bottom: 1rem; 
  color: var(--neutral-500); 
  font-size: 14px; 
}

.content ul { 
  margin-bottom: 1rem; 
  padding-left: 1.5rem; 
  color: var(--neutral-500); 
  font-size: 14px; 
}

.content li { 
  margin-bottom: 0.5rem; 
}

.content a { 
  color: var(--brand-500); 
}

.content hr { 
  border: none; 
  border-top: 1px solid var(--neutral-200); 
  margin: 2rem 0; 
}

.contact-box { 
  background: var(--neutral-50); 
  border-radius: 8px; 
  padding: 1.5rem; 
  margin-top: 1rem; 
}

.contact-box p { 
  margin-bottom: 0.5rem; 
}

.disclaimer { 
  background: #fff3cd; 
  border: 1px solid #ffc107; 
  border-radius: 8px; 
  padding: 1rem; 
  margin: 1rem 0; 
}

.disclaimer p { 
  color: #856404; 
  margin-bottom: 0; 
}

/* ==========================================================================
   Support Page Specific
   ========================================================================== */
.hero-support { 
  padding: 8rem 2rem 4rem; 
  background: linear-gradient(135deg, var(--brand-50) 0%, var(--neutral-0) 100%); 
  text-align: center; 
}

.hero-support h1 { 
  font-size: 1.875rem; 
  font-weight: 600; 
  margin-bottom: 1rem; 
  color: var(--brand-500); 
}

.hero-support p { 
  font-size: 1rem; 
  color: var(--neutral-500); 
  max-width: 600px; 
  margin: 0 auto; 
}

.support-grid { 
  display: grid; 
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); 
  gap: 1.5rem; 
  margin-bottom: 4rem; 
}

.support-card { 
  background: var(--neutral-0); 
  border: 1px solid var(--neutral-200); 
  padding: 2rem; 
  border-radius: 16px; 
  text-align: center; 
  transition: transform 0.3s, box-shadow 0.3s; 
}

.support-card:hover { 
  transform: translateY(-4px); 
  box-shadow: 0 12px 32px rgba(0,0,0,0.08); 
}

.support-icon { 
  width: 64px; 
  height: 64px; 
  background: var(--brand-50); 
  border-radius: 16px; 
  display: flex; 
  align-items: center; 
  justify-content: center; 
  margin: 0 auto 1.5rem; 
}

.support-icon svg { 
  width: 28px; 
  height: 28px; 
  color: var(--brand-500); 
}

.support-card h3 { 
  font-size: 1rem; 
  font-weight: 600; 
  margin-bottom: 0.5rem; 
  color: var(--neutral-900); 
}

.support-card p { 
  color: var(--neutral-500); 
  font-size: 14px; 
  margin-bottom: 1.5rem; 
}

.support-card a { 
  display: inline-block; 
  padding: 0.75rem 1.5rem; 
  background: var(--brand-500); 
  color: var(--neutral-0); 
  text-decoration: none; 
  border-radius: 8px; 
  font-weight: 500; 
  font-size: 14px; 
  transition: background 0.3s; 
}

.support-card a:hover { 
  background: var(--brand-600); 
}

.faq { 
  background: var(--neutral-50); 
  padding: 4rem 2rem; 
}

.faq-container { 
  max-width: 800px; 
  margin: 0 auto; 
}

.faq h2 { 
  text-align: center; 
  font-size: 1.5rem; 
  font-weight: 600; 
  margin-bottom: 2rem; 
  color: var(--neutral-900); 
}

.faq-item { 
  background: var(--neutral-0); 
  margin-bottom: 1rem; 
  border-radius: 12px; 
  border: 1px solid var(--neutral-200); 
  overflow: hidden; 
}

.faq-question { 
  padding: 1.25rem 1.5rem; 
  cursor: pointer; 
  display: flex; 
  justify-content: space-between; 
  align-items: center; 
  font-weight: 600; 
  font-size: 14px; 
  color: var(--neutral-900); 
}

.faq-question:hover { 
  background: var(--brand-50); 
}

.faq-answer { 
  padding: 0 1.5rem 1.25rem; 
  color: var(--neutral-500); 
  font-size: 14px; 
  display: none; 
}

.faq-item.active .faq-answer { 
  display: block; 
}

.faq-item.active .faq-arrow { 
  transform: rotate(180deg); 
}

.faq-arrow { 
  transition: transform 0.3s; 
  color: var(--brand-500); 
}

.contact-section { 
  padding: 4rem 2rem; 
  text-align: center; 
}

.contact-section h2 { 
  font-size: 1.5rem; 
  font-weight: 600; 
  margin-bottom: 1rem; 
  color: var(--neutral-900); 
}

.contact-section p { 
  color: var(--neutral-500); 
  margin-bottom: 2rem; 
  max-width: 500px; 
  margin-left: auto; 
  margin-right: auto; 
  font-size: 14px; 
}

.contact-email { 
  display: inline-flex; 
  align-items: center; 
  gap: 0.75rem; 
  padding: 1rem 2rem; 
  background: var(--brand-500); 
  color: var(--neutral-0); 
  text-decoration: none; 
  border-radius: 8px; 
  font-size: 1rem; 
  font-weight: 500; 
  transition: background 0.3s, transform 0.3s; 
}

.contact-email:hover { 
  background: var(--brand-600); 
  transform: translateY(-2px); 
}

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 768px) { 
  .nav-links { 
    display: none; 
  } 
  
  .content h1 { 
    font-size: 1.5rem; 
  }
  
  .hero-support h1 {
    font-size: 1.5rem;
  }
}