/* ============================================================
   GO CAMTY ACADEMY — Pricing Page Styles
   ============================================================ */

.pricing-step {
  background: #fff;
  border: 1px solid var(--gc-gray-200);
  border-radius: var(--radius-xl);
  padding: 2.5rem;
  margin-bottom: 2rem;
  box-shadow: var(--shadow-sm);
  transition: box-shadow var(--transition);
}
.pricing-step:hover { box-shadow: var(--shadow-md); }

.step-header { text-align: center; margin-bottom: 2rem; }
.step-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px; height: 36px;
  background: var(--gc-red);
  color: #fff;
  border-radius: 50%;
  font-size: .8rem;
  font-weight: 800;
  margin-bottom: .75rem;
}
.step-header h3 { font-size: 1.4rem; margin-bottom: .3rem; }
.step-header p  { color: var(--gc-gray-500); font-size: .9rem; margin: 0; }

/* Language selector */
.lang-selector-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: center;
}

.lang-select-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .5rem;
  background: var(--gc-gray-50);
  border: 2px solid var(--gc-gray-200);
  border-radius: var(--radius-lg);
  padding: 1.25rem 2rem;
  cursor: pointer;
  transition: all var(--transition);
  position: relative;
  min-width: 140px;
  text-align: center;
}
.lang-select-card input { display: none; }
.flag-emoji  { font-size: 2rem; }
.lang-name   { font-weight: 600; font-size: .9rem; color: var(--gc-gray-700); }
.lang-select-card .popular-badge {
  position: absolute;
  top: -.6rem;
  background: var(--gc-red);
  color: #fff;
  font-size: .65rem;
  font-weight: 700;
  padding: .15rem .5rem;
  border-radius: var(--radius-full);
  letter-spacing: .05em;
}
.lang-select-card:hover,
.lang-select-card.selected,
.lang-select-card:has(input:checked) {
  border-color: var(--gc-red);
  background: var(--gc-red-pale);
  box-shadow: 0 0 0 3px rgba(227,11,19,.1);
}
.lang-select-card.selected .lang-name,
.lang-select-card:has(input:checked) .lang-name { color: var(--gc-red); }

/* Type selector */
.type-selector-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: center;
}

.type-select-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .5rem;
  background: var(--gc-gray-50);
  border: 2px solid var(--gc-gray-200);
  border-radius: var(--radius-lg);
  padding: 1.5rem 2.5rem;
  cursor: pointer;
  transition: all var(--transition);
  text-align: center;
  flex: 1;
  min-width: 140px;
  max-width: 200px;
}
.type-select-card input { display: none; }
.type-select-card i    { font-size: 1.8rem; color: var(--gc-gray-400); transition: color var(--transition); }
.type-select-card strong { font-size: .95rem; color: var(--gc-gray-800); }
.type-select-card small  { font-size: .78rem; color: var(--gc-gray-500); }

.type-select-card:hover,
.type-select-card.selected,
.type-select-card:has(input:checked) {
  border-color: var(--gc-navy);
  background: var(--gc-navy-pale);
  box-shadow: 0 0 0 3px rgba(47,80,128,.1);
}
.type-select-card.selected i,
.type-select-card:has(input:checked) i { color: var(--gc-navy); }
.type-select-card.selected strong,
.type-select-card:has(input:checked) strong { color: var(--gc-navy); }

/* Days selector */
.day-select-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .15rem;
  background: var(--gc-gray-50);
  border: 2px solid var(--gc-gray-200);
  border-radius: var(--radius-md);
  padding: .85rem 1.5rem;
  cursor: pointer;
  transition: all var(--transition);
  min-width: 80px;
  text-align: center;
}
.day-select-btn input { display: none; }
.day-num   { font-size: 1.6rem; font-weight: 800; color: var(--gc-gray-700); line-height: 1; }
.day-label { font-size: .72rem; color: var(--gc-gray-500); font-weight: 500; text-transform: uppercase; }
.day-select-btn:hover,
.day-select-btn.selected,
.day-select-btn:has(input:checked) {
  border-color: var(--gc-red);
  background: var(--gc-red-pale);
}
.day-select-btn.selected .day-num,
.day-select-btn:has(input:checked) .day-num { color: var(--gc-red); }

/* Duration selector */
.duration-select-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .2rem;
  background: var(--gc-gray-50);
  border: 2px solid var(--gc-gray-200);
  border-radius: var(--radius-lg);
  padding: 1.25rem 2rem;
  cursor: pointer;
  transition: all var(--transition);
  min-width: 120px;
  text-align: center;
}
.duration-select-btn input { display: none; }
.dur-num   { font-size: 2rem; font-weight: 900; color: var(--gc-gray-700); line-height: 1; }
.dur-label { font-size: .72rem; text-transform: uppercase; color: var(--gc-gray-500); font-weight: 600; }
.dur-desc  { font-size: .78rem; color: var(--gc-gray-500); }
.duration-select-btn:hover,
.duration-select-btn.selected,
.duration-select-btn:has(input:checked) {
  border-color: var(--gc-red);
  background: var(--gc-red-pale);
}
.duration-select-btn.selected .dur-num,
.duration-select-btn:has(input:checked) .dur-num { color: var(--gc-red); }

/* Period cards */
.period-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .5rem;
  background: #fff;
  border: 2px solid var(--gc-gray-200);
  border-radius: var(--radius-lg);
  padding: 1.75rem 1.25rem;
  cursor: pointer;
  transition: all var(--transition);
  position: relative;
  text-align: center;
  height: 100%;
}
.period-card input { display: none; }

.period-card.is-popular {
  border-color: var(--gc-gold);
  box-shadow: 0 0 0 1px var(--gc-gold), var(--shadow-md);
}

.popular-ribbon {
  position: absolute;
  top: -1px; right: -1px;
  background: var(--gc-gold);
  color: #854d0e;
  font-size: .65rem;
  font-weight: 800;
  padding: .25rem .6rem;
  border-radius: 0 var(--radius-lg) 0 var(--radius-sm);
  letter-spacing: .04em;
}

.period-label {
  font-weight: 800;
  font-size: 1.05rem;
  color: var(--gc-gray-900);
}
.period-discount {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  background: #d1fae5;
  color: var(--gc-green);
  font-size: .75rem;
  font-weight: 700;
  padding: .2rem .6rem;
  border-radius: var(--radius-full);
}
.period-no-discount { font-size: .75rem; color: var(--gc-gray-400); }
.period-monthly-equiv {
  font-size: .85rem;
  color: var(--gc-gray-500);
}
.equiv-price { font-weight: 700; color: var(--gc-navy); }

.period-card:hover,
.period-card.selected,
.period-card:has(input:checked) {
  border-color: var(--gc-navy);
  background: var(--gc-navy-pale);
  box-shadow: var(--shadow-md);
}

/* Price summary */
.price-summary-box {
  background: linear-gradient(135deg, var(--gc-navy-dark) 0%, var(--gc-navy) 100%);
  border-radius: var(--radius-xl);
  padding: 2.5rem 3rem;
  color: #fff;
  margin-top: 2.5rem;
  box-shadow: var(--shadow-xl);
  /* NOT sticky — removed */
}

.price-main {
  display: flex;
  align-items: baseline;
  gap: .25rem;
  margin-bottom: .3rem;
}
.price-amount   { font-size: 3.2rem; font-weight: 900; line-height: 1; letter-spacing: -.02em; color: #fff; }
.price-period   { font-size: .9rem; opacity: .7; }
.price-total    { font-size: .85rem; margin: 0; }

.price-saving-badge {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  background: rgba(255,255,255,.15);
  border: 1px solid rgba(255,255,255,.25);
  color: #fff;
  padding: .3rem .75rem;
  border-radius: var(--radius-full);
  font-size: .8rem;
  font-weight: 700;
  margin-top: .5rem;
}
.price-saving-badge i { color: var(--gc-gold); }

.price-includes {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: .35rem;
}
.price-includes li {
  font-size: .85rem;
  color: rgba(255,255,255,.75);
  display: flex;
  align-items: center;
  gap: .5rem;
}
.price-includes i { color: #4ade80; }

.btn-price-cta {
  background: #fff;
  color: var(--gc-navy);
  font-weight: 700;
  box-shadow: 0 4px 20px rgba(0,0,0,.2);
}
.btn-price-cta:hover {
  background: var(--gc-gray-100);
  color: var(--gc-navy-dark);
  transform: translateY(-2px);
  box-shadow: 0 8px 30px rgba(0,0,0,.25);
}

/* Comparison table */
.comparison-table { border-radius: var(--radius-md); overflow: hidden; box-shadow: var(--shadow-sm); }
.comparison-table thead th {
  background: var(--gc-navy);
  color: #fff;
  font-size: .85rem;
  padding: 1rem 1.25rem;
  font-weight: 700;
  border: none;
}
.comparison-table thead th:first-child { background: var(--gc-navy-dark); }
.comparison-table tbody td { padding: .85rem 1.25rem; border-color: var(--gc-gray-100); font-size: .9rem; vertical-align: middle; }
.comparison-table tbody tr:hover { background: var(--gc-gray-50); }
.comparison-table .table-primary { background: rgba(47,80,128,.08) !important; }

/* Guarantee */
.guarantee-box { max-width: 600px; margin: 0 auto; }
.guarantee-icon { font-size: 4rem; color: var(--gc-green); display: block; margin-bottom: 1rem; }

@media (max-width: 768px) {
  .pricing-step { padding: 1.5rem; }
  .price-summary-box { padding: 1.5rem; position: static; }
  .price-amount { font-size: 2.5rem; }
}

/* ── Teaching language flag in selector ─────────────────────── */
.teach-lang-flag {
  display: block;
  width: 48px;
  height: 34px;
  object-fit: cover;
  border-radius: 4px;
  margin: 0 auto .5rem;
  box-shadow: 0 1px 4px rgba(0,0,0,.15);
}
.teach-lang-flag-placeholder {
  display: block;
  text-align: center;
  font-size: 2rem;
  color: var(--gc-gray-300);
  margin-bottom: .5rem;
}

/* Fix lang-select-card layout when using img */
.lang-select-card {
  min-width: 130px;
  justify-content: center;
}