/* ============================================
   Halal Investments Page
   ============================================ */

.page-hero { background: linear-gradient(135deg, var(--color-primary-dark) 0%, var(--color-primary) 100%); color: var(--color-white); padding: 3.5rem 1.25rem 3rem; }
.page-hero h1 { color: var(--color-white); margin-bottom: 0.75rem; }
.hero-subtitle { color: rgba(255,255,255,0.85); font-size: 1.05rem; max-width: 640px; margin: 0 0 0.75rem; }
.hero-disclaimer { font-size: 0.78rem; color: rgba(255,255,255,0.55); max-width: 640px; margin: 0; line-height: 1.5; }

/* Screening section */
.screening-section { margin-bottom: 2.5rem; }
.screening-section h2 { font-size: 1.3rem; margin-bottom: 1rem; }
.screening-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; margin-bottom: 0.75rem; }
.screening-card { background: var(--color-bg); border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: 1.25rem; text-align: center; }
.screening-card__icon { font-size: 1.8rem; margin-bottom: 0.5rem; }
.screening-card h3 { font-size: 0.95rem; margin-bottom: 0.4rem; }
.screening-card p { font-size: 0.82rem; color: var(--color-text-muted); margin: 0; }
.screening-footer { font-size: 0.78rem; color: var(--color-text-muted); font-style: italic; }

/* Toggle */
.invest-toggle-wrap { margin-bottom: 1.5rem; }
.invest-toggle-label { font-size: 0.78rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; color: var(--color-text-muted); display: block; margin-bottom: 0.5rem; }
.invest-toggle { display: inline-flex; border: 2px solid var(--color-primary); border-radius: var(--radius-sm); overflow: hidden; }
.invest-toggle__btn { padding: 0.6rem 1.5rem; border: none; background: var(--color-white); font-family: var(--font-main); font-size: 0.9rem; font-weight: 600; color: var(--color-primary); cursor: pointer; transition: all var(--transition); }
.invest-toggle__btn.active { background: var(--color-primary); color: var(--color-white); }
.invest-toggle__btn:focus-visible { outline: 2px solid var(--color-accent); outline-offset: -2px; }

/* Filters */
.invest-filters { display: flex; gap: 0.75rem; flex-wrap: wrap; margin-bottom: 1rem; align-items: flex-end; }
.filter-group { display: flex; flex-direction: column; gap: 0.3rem; }
.filter-group label { font-size: 0.72rem; font-weight: 600; color: var(--color-text-muted); text-transform: uppercase; letter-spacing: 0.4px; }
.filter-group--search { flex: 1; min-width: 180px; }
.filter-group--search input { width: 100%; }
.results-count { font-size: 0.82rem; color: var(--color-text-muted); margin-bottom: 1rem; }

/* Investment grid */
.invest-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 1.25rem; }
.invest-grid[hidden] { display: none; }

/* ETF Card */
.invest-card { background: var(--color-white); border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: 1.5rem; transition: transform 0.25s ease, box-shadow 0.25s ease; display: flex; flex-direction: column; }
.invest-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.invest-card__header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 0.5rem; }
.invest-card__ticker { font-family: 'Courier New', monospace; font-size: 1.1rem; font-weight: 800; color: var(--color-primary); }
.invest-card__badge { font-size: 0.68rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.4px; padding: 0.2rem 0.55rem; border-radius: 12px; background: #dbeafe; color: #1e40af; }
.invest-card__name { font-size: 1rem; font-weight: 700; margin-bottom: 0.4rem; color: var(--color-text); }
.invest-card__meta { display: flex; flex-wrap: wrap; gap: 0.5rem 1rem; font-size: 0.78rem; color: var(--color-text-muted); margin-bottom: 0.75rem; }
.invest-card__desc { font-size: 0.85rem; color: var(--color-text); flex: 1; margin-bottom: 1rem; line-height: 1.5; }
.invest-card__actions { display: flex; gap: 0.5rem; margin-top: auto; }
.invest-card__link { font-size: 0.8rem; font-weight: 600; color: var(--color-primary); border: 1px solid var(--color-primary); border-radius: var(--radius-sm); padding: 0.3rem 0.7rem; transition: all var(--transition); text-decoration: none; }
.invest-card__link:hover { background: var(--color-primary); color: var(--color-white); }
.invest-card__link--secondary { border-color: var(--color-border); color: var(--color-text-muted); }
.invest-card__link--secondary:hover { background: var(--color-bg); color: var(--color-text); border-color: var(--color-text-muted); }

/* Info box note */
.info-box--note { background: #fffbeb; border-left: 3px solid var(--color-accent); padding: 0.75rem 1rem; font-size: 0.82rem; color: var(--color-text-muted); margin-top: 1.5rem; border-radius: 0 var(--radius-sm) var(--radius-sm) 0; }
.info-box--note[hidden] { display: none; }

/* Footer */
.footer { background: var(--color-primary-dark); color: rgba(255,255,255,0.8); padding: 3rem 0 0; }
.footer__inner { display: grid; grid-template-columns: 2fr 1fr; gap: 2rem; padding-bottom: 2rem; }
.footer__brand .navbar__logo { color: var(--color-white); font-size: 1.1rem; display: inline-flex; margin-bottom: 0.75rem; }
.footer__brand p { font-size: 0.875rem; color: rgba(255,255,255,0.6); margin: 0; }
.footer__links h4 { color: var(--color-white); font-size: 0.9rem; margin-bottom: 0.75rem; }
.footer__links ul { display: flex; flex-direction: column; gap: 0.4rem; }
.footer__links a { color: rgba(255,255,255,0.65); font-size: 0.875rem; transition: color var(--transition); }
.footer__links a:hover { color: var(--color-accent); }
.footer__bottom { border-top: 1px solid rgba(255,255,255,0.1); padding: 1rem 1.25rem; text-align: center; font-size: 0.8rem; color: rgba(255,255,255,0.4); }

@media (max-width: 768px) {
  .screening-cards { grid-template-columns: 1fr; }
  .invest-filters { flex-direction: column; }
  .filter-group { width: 100%; }
  .invest-grid { grid-template-columns: 1fr; }
  .footer__inner { grid-template-columns: 1fr; }
}

/* ============================================
   Category Sections & Show More
   ============================================ */
.invest-category { margin-bottom: 2rem; }
.invest-category__title { font-size: 1.1rem; font-weight: 700; color: var(--color-primary); margin-bottom: 1rem; padding-bottom: 0.5rem; border-bottom: 2px solid var(--color-bg); }
.invest-category__count { font-size: 0.82rem; font-weight: 500; color: var(--color-text-muted); }
.invest-category__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 1rem; margin-bottom: 0.75rem; }

.btn-show-more {
  display: inline-flex; align-items: center; gap: 0.3rem;
  background: none; border: 1px solid var(--color-border);
  border-radius: var(--radius-sm); padding: 0.5rem 1rem;
  font-family: var(--font-main); font-size: 0.82rem; font-weight: 600;
  color: var(--color-primary); cursor: pointer;
  transition: all var(--transition);
}
.btn-show-more:hover { background: var(--color-primary); color: var(--color-white); border-color: var(--color-primary); }

.invest-note {
  font-size: 0.8rem; color: var(--color-text-muted); font-style: italic;
  margin-bottom: 1.5rem; padding: 0.5rem 0;
}
.invest-empty {
  text-align: center; color: var(--color-text-muted); padding: 2rem;
  font-size: 0.9rem;
}

@media (max-width: 640px) {
  .invest-category__grid { grid-template-columns: 1fr; }
}

/* Start here callout */
.start-here-box {
  background: #f0fdf4; border: 2px solid var(--color-success);
  border-radius: var(--radius-md); padding: 1.5rem;
  margin-bottom: 2rem;
}
.start-here-box h3 { font-size: 1.05rem; color: var(--color-primary); margin-bottom: 0.5rem; }
.start-here-box p { font-size: 0.9rem; color: var(--color-text); margin: 0; line-height: 1.6; }

/* ============================================
   Grow Your ISA — Modeller
   ============================================ */
.isa-modeller {
  margin: 2.5rem 0; padding: 2rem;
  background: var(--color-white); border: 2px solid var(--color-primary);
  border-radius: var(--radius-lg);
}
.isa-modeller h2 { font-size: 1.5rem; margin-bottom: 0.5rem; }
.isa-modeller__intro { font-size: 0.95rem; color: var(--color-text-muted); margin-bottom: 1.5rem; max-width: 600px; }

/* Steps */
.isa-step { margin-bottom: 1.5rem; padding: 1.5rem; background: var(--color-bg); border: 1px solid var(--color-border); border-radius: var(--radius-md); }
.isa-step.step-hidden { display: none; }
.isa-step.step-visible { animation: stepReveal 0.4s ease forwards; }
.isa-step__prompt { font-size: 0.9rem; color: var(--color-text); margin-bottom: 1rem; }

/* Goal cards */
.isa-goal-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.isa-goal-card {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  padding: 1.25rem 1rem; border: 2px solid var(--color-border);
  border-radius: var(--radius-md); background: var(--color-white);
  cursor: pointer; transition: all 0.25s ease; font-family: var(--font-main);
}
.isa-goal-card:hover { border-color: var(--color-primary-light); transform: translateY(-2px); box-shadow: var(--shadow-md); }
.isa-goal-card--selected { border-color: var(--color-primary); background: var(--color-primary); color: var(--color-white); }
.isa-goal-card--selected .isa-goal-card__sub { color: rgba(255,255,255,0.75); }
.isa-goal-card__icon { font-size: 2rem; margin-bottom: 0.5rem; }
.isa-goal-card__title { font-size: 0.9rem; font-weight: 700; margin-bottom: 0.25rem; }
.isa-goal-card__sub { font-size: 0.78rem; color: var(--color-text-muted); }

/* Mini summary */
.isa-mini-summary {
  margin-top: 1rem; padding: 1rem 1.25rem;
  background: #f0fdf4; border-left: 3px solid var(--color-success);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  font-size: 0.9rem; line-height: 1.6;
}
.isa-mini-summary[hidden] { display: none; }

/* Advance button */
.isa-advance-btn { margin-top: 1rem; width: 100%; padding: 0.85rem; font-size: 0.95rem; }

/* Results */
.isa-results { margin-top: 1.5rem; animation: fadeIn 0.6s ease; }
.isa-results.step-hidden { display: none; }
.isa-results.step-visible { display: block; }
.isa-results__headline { font-size: 1.3rem; font-weight: 800; color: var(--color-primary); margin-bottom: 1.25rem; }

/* Milestone cards (reuse existing styles) */
.isa-milestone-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; margin-bottom: 1.5rem; }

/* Insight box */
.isa-insight-box__inner {
  padding: 1.25rem 1.5rem; background: #eff6ff;
  border-left: 5px solid #3b82f6; border-radius: 0 var(--radius-md) var(--radius-md) 0;
  margin-bottom: 1rem;
}
.isa-insight-box__inner h4 { font-size: 0.95rem; color: var(--color-primary); margin-bottom: 0.4rem; }
.isa-insight-box__inner p { font-size: 0.875rem; margin: 0; line-height: 1.6; }

/* Comparison */
.isa-comparison__inner {
  padding: 1rem 1.25rem; background: #fefce8;
  border-left: 3px solid #eab308; border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  font-size: 0.85rem; margin-bottom: 1rem;
}
.isa-comparison__inner p { margin: 0; }

/* Tax-free reminder */
.isa-tax-free {
  display: flex; align-items: flex-start; gap: 0.6rem;
  padding: 1rem 1.25rem; background: #f0fdf4;
  border: 1px solid var(--color-success); border-radius: var(--radius-sm);
  font-size: 0.875rem; color: var(--color-text);
}
.isa-tax-free__icon { font-size: 1.2rem; flex-shrink: 0; }

@media (max-width: 768px) {
  .isa-goal-cards { grid-template-columns: 1fr; }
  .isa-milestone-cards { grid-template-columns: 1fr; }
  .isa-modeller { padding: 1.25rem; }
}