/* ===== Mesquita - Modern React Native inspired visual theme ===== */
:root {
  --primary-500: #6C5CE7;
  --primary-400: #7C6FF0;
  --primary-300: #A79FF7;
  --primary-100: #EEEAFE;
  --secondary-500: #00B8A9;
  --success-500: #16A34A;
  --danger-500: #EF4444;
  --warning-500: #F59E0B;
  --gray-900: #172033;
  --gray-800: #263044;
  --gray-700: #465268;
  --gray-600: #667085;
  --gray-500: #8A94A6;
  --gray-400: #AAB2C0;
  --gray-300: #D9DEE7;
  --gray-200: #E8EBF1;
  --gray-100: #F2F4F8;
  --gray-50: #F7F8FC;
  --white: #FFFFFF;

  --shadow-sm: 0 2px 8px rgba(30, 41, 59, .05);
  --shadow-md: 0 8px 24px rgba(30, 41, 59, .08);
  --shadow-lg: 0 16px 36px rgba(30, 41, 59, .11);
  --shadow-xl: 0 22px 50px rgba(30, 41, 59, .14);

  --radius-sm: .5rem;
  --radius-md: .75rem;
  --radius-lg: 1rem;
  --radius-xl: 1.25rem;
  --radius-full: 9999px;

  --space-xs: .25rem;
  --space-sm: .5rem;
  --space-md: 1rem;
  --space-lg: 1.5rem;
  --space-xl: 2rem;
  --space-2xl: 3rem;

  --font-sans: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --text-xs: .75rem;
  --text-sm: .875rem;
  --text-base: 1rem;
  --text-lg: 1.125rem;
  --text-xl: 1.25rem;
  --text-2xl: 1.5rem;
  --text-3xl: 1.875rem;
  --text-4xl: 2.25rem;
  --text-5xl: 3rem;

  --transition: all .22s ease;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  font-family: var(--font-sans);
  background:
    radial-gradient(circle at 8% 0%, rgba(108,92,231,.08), transparent 28%),
    radial-gradient(circle at 92% 10%, rgba(0,184,169,.06), transparent 24%),
    var(--gray-50);
  color: var(--gray-800);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

.financial-app { display: flex; flex-direction: column; min-height: 100vh; }

/* ===== Header ===== */
.app-header {
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, #5546D8 0%, #6C5CE7 55%, #7C6FF0 100%);
  color: var(--white);
  padding: var(--space-xl) var(--space-lg);
  box-shadow: 0 8px 28px rgba(76, 63, 170, .20);
}

.app-header::before,
.app-header::after {
  content: '';
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  background: rgba(255,255,255,.08);
}

.app-header::before { width: 240px; height: 240px; right: -90px; top: -150px; }
.app-header::after { width: 150px; height: 150px; left: -80px; bottom: -105px; }

.header-content { position: relative; z-index: 1; max-width: 1200px; margin: 0 auto; width: 100%; }
.logo { display: flex; align-items: center; gap: var(--space-sm); margin-bottom: var(--space-sm); }
.logo img { width: 200px; height: auto; filter: drop-shadow(0 6px 12px rgba(0,0,0,.16)); }
.logo h1 { font-size: var(--text-3xl); font-weight: 700; }
.logo span { font-weight: 400; opacity: .9; }
.tagline { font-size: var(--text-lg); opacity: .95; font-weight: 400; }

/* ===== Main ===== */
.app-container { flex: 1; max-width: 1200px; margin: 0 auto; width: 100%; padding: var(--space-xl) var(--space-lg); }
.calculator-section { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-xl); margin-bottom: var(--space-2xl); }

/* ===== Cards ===== */
.calculator-card,
.results-card,
.schedule-section {
  background: rgba(255,255,255,.96);
  border: 1px solid rgba(108,92,231,.08);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-md);
  overflow: hidden;
  transition: var(--transition);
}

.calculator-card:hover,
.results-card:hover,
.schedule-section:hover { box-shadow: var(--shadow-lg); transform: translateY(-2px); }

.card-header {
  padding: 18px var(--space-lg);
  background: linear-gradient(135deg, #FFFFFF 0%, #F7F5FF 100%);
  border-bottom: 1px solid var(--gray-200);
}

.card-header h2 {
  font-size: var(--text-xl);
  font-weight: 700;
  color: var(--gray-900);
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}

.card-header i { color: var(--primary-500); }
.card-body { padding: var(--space-lg); }

/* ===== Forms ===== */
.form-group { margin-bottom: var(--space-lg); }
.form-group label { display: block; margin-bottom: var(--space-sm); font-size: var(--text-sm); font-weight: 600; color: var(--gray-700); }
.input-with-slider { display: flex; flex-direction: column; gap: var(--space-sm); }

.input-with-slider input[type="range"] {
  width: 100%; height: 6px; -webkit-appearance: none;
  background: var(--gray-200); border-radius: var(--radius-full); outline: none; margin-bottom: var(--space-sm);
}

.input-with-slider input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; width: 19px; height: 19px;
  background: var(--primary-500); border: 3px solid #fff; border-radius: 50%;
  cursor: pointer; box-shadow: 0 3px 9px rgba(108,92,231,.28); transition: var(--transition);
}

.input-with-slider input[type="range"]::-webkit-slider-thumb:hover { transform: scale(1.12); background: var(--primary-400); }

.input-with-slider input[type="number"],
.input-with-icon input,
.input-with-icon select {
  width: 100%;
  min-height: 46px;
  padding: 11px 14px;
  border: 1px solid var(--gray-300);
  border-radius: var(--radius-md);
  background: #fff;
  font-family: inherit;
  font-size: var(--text-base);
  font-weight: 500;
  color: var(--gray-800);
  transition: var(--transition);
}

.input-with-slider input[type="number"]:focus,
.input-with-icon input:focus,
.input-with-icon select:focus {
  outline: none;
  border-color: var(--primary-400);
  box-shadow: 0 0 0 4px rgba(108,92,231,.11);
}

.range-labels { display: flex; justify-content: space-between; font-size: var(--text-xs); color: var(--gray-500); }
.input-with-icon { position: relative; }
.input-with-icon i,
.input-with-icon span { position: absolute; right: var(--space-md); top: 50%; transform: translateY(-50%); color: var(--gray-500); font-size: var(--text-sm); padding-right: 20px; }

/* ===== Term selector ===== */
.term-selector { display: flex; flex-direction: column; gap: var(--space-md); }
.term-options { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-sm); }
.term-option { padding: var(--space-xs) var(--space-sm); border: 1px solid var(--gray-300); border-radius: var(--radius-md); background: #fff; color: var(--gray-600); font-size: var(--text-xs); font-weight: 600; text-align: center; cursor: pointer; transition: var(--transition); }
.term-option:hover { border-color: var(--primary-400); color: var(--primary-500); background: var(--primary-100); }
.term-option.active { background: var(--primary-500); color: #fff; border-color: var(--primary-500); box-shadow: 0 5px 12px rgba(108,92,231,.20); }

/* ===== Results ===== */
.emi-result { margin-bottom: var(--space-xl); }
.emi-amount { margin-bottom: var(--space-md); }
.emi-amount span { display: block; font-size: var(--text-sm); color: var(--gray-600); margin-bottom: var(--space-xs); }
.emi-amount h3 { font-size: var(--text-3xl); font-weight: 700; color: var(--primary-500); }
.emi-details { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-md); }
.detail-item { background: linear-gradient(135deg, #F8F7FF, #F5FFFD); border: 1px solid var(--gray-200); padding: 13px; border-radius: var(--radius-md); }
.detail-item span:first-child { display: block; font-size: var(--text-xs); color: var(--gray-600); margin-bottom: var(--space-xs); }
.detail-item span:last-child { font-size: var(--text-base); font-weight: 700; color: var(--gray-900); }

/* ===== Chart ===== */
.chart-container { height: 220px; margin: var(--space-xl) 0; padding: 4px 2px; position: relative; }

/* ===== Buttons ===== */
.action-buttons { display: flex; gap: var(--space-sm); flex-wrap: wrap; }
.btn { padding: 11px 16px; border-radius: var(--radius-md); font-size: var(--text-sm); font-weight: 700; display: inline-flex; align-items: center; gap: var(--space-xs); cursor: pointer; transition: var(--transition); border: none; }
.btn i { font-size: var(--text-base); }
.btn-primary { background: linear-gradient(135deg, var(--primary-500), var(--primary-400)); color: #fff; box-shadow: 0 6px 14px rgba(108,92,231,.20); }
.btn-primary:hover { transform: translateY(-1px); box-shadow: 0 9px 18px rgba(108,92,231,.26); }
.btn-secondary { background: var(--gray-100); color: var(--gray-800); }
.btn-secondary:hover { background: var(--gray-200); }
.btn-tertiary { background: transparent; color: var(--primary-500); border: 1px solid var(--primary-300); }
.btn-tertiary:hover { background: var(--primary-100); }

/* ===== Schedule / Table ===== */
.schedule-header { padding: var(--space-md) var(--space-lg); background: linear-gradient(135deg, #fff, #F7F5FF); border-bottom: 1px solid var(--gray-200); display: flex; justify-content: space-between; align-items: center; }
.schedule-header h2 { font-size: var(--text-xl); font-weight: 700; color: var(--gray-900); display: flex; align-items: center; gap: var(--space-sm); }
.schedule-header i { color: var(--primary-500); }
.view-options { display: flex; gap: var(--space-sm); }
.view-option { padding: var(--space-xs) var(--space-sm); border: 1px solid var(--gray-300); border-radius: var(--radius-md); background: #fff; color: var(--gray-600); font-size: var(--text-xs); font-weight: 600; cursor: pointer; transition: var(--transition); }
.view-option:hover { border-color: var(--primary-400); color: var(--primary-500); }
.view-option.active { background: var(--primary-500); color: #fff; border-color: var(--primary-500); }
.table-container { overflow-x: auto; padding: var(--space-lg); }
table { width: 100%; border-collapse: collapse; font-size: var(--text-sm); min-width: 600px; }
th { background: var(--gray-50); color: var(--gray-700); font-weight: 700; text-align: left; padding: var(--space-sm) var(--space-md); border-bottom: 1px solid var(--gray-200); }
td { padding: var(--space-sm) var(--space-md); border-bottom: 1px solid var(--gray-200); color: var(--gray-700); }
tr:last-child td { border-bottom: none; }
tr:hover td { background: #FAF9FF; }

/* ===== Footer ===== */
.app-footer { background: var(--gray-900); color: var(--gray-400); padding: var(--space-lg); text-align: center; font-size: var(--text-sm); }
.footer-links { display: flex; justify-content: center; gap: var(--space-md); margin-top: var(--space-sm); }
.footer-links a { color: var(--gray-400); font-size: var(--text-lg); transition: var(--transition); }
.footer-links a:hover { color: #fff; transform: translateY(-1px); }

/* ===== WhatsApp button from index.html remains functional ===== */
.float { transition: transform .2s ease, box-shadow .2s ease; }
.float:hover { transform: scale(1.06); box-shadow: 0 10px 22px rgba(37,211,102,.28); }

/* ===== Responsive ===== */
@media (max-width: 768px) {
  .calculator-section { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
  .app-header { padding: var(--space-lg) var(--space-md); }
  .app-container { padding: var(--space-lg) var(--space-md); }
  .logo img { width: 175px; }
  .term-options { grid-template-columns: repeat(2, 1fr); }
  .emi-details { grid-template-columns: 1fr; }
  .action-buttons { flex-direction: column; }
  .btn { justify-content: center; }
  .chart-container { height: 215px; }
}

@media print {
  body { background: white !important; color: black !important; padding: 0 !important; margin: 0 !important; }
  .no-print { display: none !important; }
  table { page-break-inside: auto !important; }
  tr { page-break-inside: avoid !important; page-break-after: auto !important; }
}