/* ============================================
   TEST.CSS - PAGE SPECIFIC STYLES
   Import shared-base.css before this file
   ============================================ */

/* === Additional CSS Variables === */
:root {
  --radius: 16px;
}

/* Override section padding from base */
section { 
  padding: 70px 0; 
}

@media (max-width: 575.98px) { 
  section { 
    padding: 54px 0; 
  } 
}

/* Override button styles with rounded pills */
.btn-primary,
.btn-outline-primary {
  border-radius: 999px;
  padding: 0.65rem 1.25rem;
}

/* === GCSE Hero Section === */
.gcse-hero {
  position: relative;
  padding: 72px 0 62px;
  background: radial-gradient(1000px 500px at 20% 15%, rgba(16,185,129,0.18) 0%, rgba(236,253,245,0.9) 40%, #ffffff 70%);
  overflow: hidden;
}

.gcse-hero::after {
  content: "";
  position: absolute;
  inset: -120px -120px auto auto;
  width: 420px;
  height: 420px;
  background: radial-gradient(circle at 30% 30%, rgba(16,185,129,0.28) 0%, rgba(16,185,129,0.10) 45%, transparent 70%);
  filter: blur(2px);
  border-radius: 50%;
  transform: rotate(15deg);
}

.hero-kicker {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .4rem .75rem;
  border: 1px solid rgba(16,185,129,0.25);
  background: rgba(236,253,245,0.8);
  border-radius: 999px;
  font-weight: 600;
  color: var(--dark-green);
  font-size: .9rem;
}

.gcse-hero h1 {
  font-weight: 800;
  letter-spacing: -0.03em;
  font-size: clamp(2rem, 5vw, 3rem);
  margin-top: 14px;
  margin-bottom: 12px;
}

.gcse-hero p.lead {
  color: var(--text-muted);
  max-width: 52ch;
}

/* === Hero Graphic === */
.hero-graphic {
  border-radius: var(--radius);
  background: linear-gradient(135deg, rgba(6,95,70,0.95) 0%, rgba(16,185,129,0.92) 55%, rgba(236,253,245,0.9) 120%);
  color: #fff;
  padding: 22px;
  box-shadow: 0 20px 40px rgba(0,0,0,0.10);
  position: relative;
  overflow: hidden;
}

.hero-graphic::before {
  content:"";
  position:absolute;
  inset:auto -80px -80px auto;
  width: 220px;
  height: 220px;
  border-radius: 50%;
  background: rgba(255,255,255,0.16);
  filter: blur(1px);
}

.hero-graphic .stat {
  background: rgba(255,255,255,0.12);
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: 14px;
  padding: 14px;
  height: 100%;
}

.hero-graphic .stat i {
  font-size: 1.25rem;
  opacity: 0.95;
}

/* === Trust Strip Additions === */
.trust-strip {
  border-top: 1px solid #e5e7eb;
  padding: 18px 0;
}

.trust-chip {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  padding: .55rem .8rem;
  border-radius: 999px;
  background: #fff;
  border: 1px solid #e5e7eb;
  font-weight: 600;
  color: var(--text-main);
  font-size: .9rem;
  white-space: nowrap;
}

.trust-chip i { 
  color: var(--primary-green); 
}

/* === Soft Section === */
.soft-section { 
  background: var(--light-green); 
}

.section-title {
  font-weight: 800;
  letter-spacing: -0.02em;
  margin-bottom: 14px;
}

.section-subtitle {
  color: var(--text-muted);
  margin-bottom: 28px;
  max-width: 70ch;
}

/* === Mega Card === */
.mega-card {
  border: 1px solid #e5e7eb;
  border-radius: var(--radius);
  background: #fff;
  padding: 26px;
  box-shadow: var(--card-shadow);
  height: 100%;
  transition: var(--transition);
}

.mega-card:hover {
  transform: translateY(-4px);
  border-color: rgba(16,185,129,0.35);
}

/* === Icon Badge === */
.icon-badge {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  display:flex;
  align-items:center;
  justify-content:center;
  background: rgba(16,185,129,0.12);
  color: var(--dark-green);
  border: 1px solid rgba(16,185,129,0.20);
  flex: 0 0 auto;
}

/* === Subject Card === */
.subject-card {
  border: 1px solid #e5e7eb;
  border-radius: var(--radius);
  background: #fff;
  padding: 22px;
  height: 100%;
  transition: var(--transition);
  box-shadow: 0 6px 18px rgba(0,0,0,0.05);
}

.subject-card:hover {
  transform: translateY(-4px);
  border-color: rgba(16,185,129,0.35);
}

.subject-card a { 
  text-decoration: none; 
  font-weight: 700; 
  font-size: calc(0.9em - 0.9pt);
  color: var(--dark-green); 
}

.subject-card a:hover { 
  color: var(--primary-green); 
}

/* === Step Card === */
.step-card {
  border: 1px solid #e5e7eb;
  border-radius: var(--radius);
  background: #fff;
  padding: 22px;
  height: 100%;
  box-shadow: var(--card-shadow);
}

.step-num {
  width: 42px;
  height: 42px;
  border-radius: 999px;
  display:flex;
  align-items:center;
  justify-content:center;
  background: var(--primary-green);
  color: #fff;
  font-weight: 800;
  flex: 0 0 auto;
}

/* === Price Card === */
.price-card {
  border: 1px solid #e5e7eb;
  border-radius: var(--radius);
  background: #fff;
  padding: 26px;
  height: 100%;
  box-shadow: var(--card-shadow);
  transition: var(--transition);
}

.price-card:hover { 
  transform: translateY(-4px); 
  border-color: rgba(16,185,129,0.35); 
}

.price-tag {
  display:inline-flex;
  align-items:center;
  gap:.5rem;
  padding:.35rem .7rem;
  border-radius:999px;
  background: rgba(16,185,129,0.12);
  border: 1px solid rgba(16,185,129,0.20);
  color: var(--dark-green);
  font-weight: 700;
  font-size: .85rem;
}

.price-amount {
  font-weight: 900;
  letter-spacing: -0.03em;
  font-size: 2rem;
  margin: 12px 0 8px;
}

.price-note { 
  color: var(--text-muted); 
  font-size: .95rem; 
}

/* === Accordion === */
.accordion-button:not(.collapsed) {
  color: var(--dark-green);
  background: rgba(236,253,245,0.8);
  box-shadow: none;
}

.accordion-button:focus { 
  box-shadow: 0 0 0 .2rem rgba(16,185,129,0.20); 
}

/* === Final CTA === */
.final-cta {
  background: linear-gradient(135deg, rgba(6,95,70,0.95) 0%, rgba(16,185,129,0.92) 60%);
  color: #fff;
  border-radius: 24px;
  padding: 34px;
  overflow: hidden;
  position: relative;
}

.final-cta::before {
  content:"";
  position:absolute;
  inset:auto -120px -120px auto;
  width: 360px;
  height: 360px;
  border-radius: 50%;
  background: rgba(255,255,255,0.14);
}

.final-cta p { 
  opacity: .92; 
}

/* === Form Card === */
.form-card {
  border: 1px solid #e5e7eb;
  border-radius: var(--radius);
  background: #fff;
  padding: 22px;
  box-shadow: var(--card-shadow);
}