/* ============================================================
   Epoxy Master — Enrollment form, refined / upmarket redesign.
   Loaded ONLY on the application form page (after form.css), so
   terms.html and every other page that imports form.css stay
   untouched. Markup and copy are unchanged; pure visual layer.
   Everything is scoped under .form-container for safe override.
   ============================================================ */
.form-container {
  --f-ink: #1b1e23;
  --f-ink-soft: #454a52;
  --f-muted: #828893;
  --f-line: rgba(20, 22, 26, 0.12);
  --f-paper: #f4f5f7;
  --f-card: #ffffff;
  --f-field: #fcfaf6;
  --f-amber: #9a7400;
  --f-amber-deep: #7a5d00;
  --f-gold: #ecc23e;
  --f-espresso: #1c1f24;
  --f-espresso-2: #262a30;
  --f-cream: #f6f7f9;
  --f-red: #c0524a;

  --f-radius: 14px;
  --f-radius-lg: 20px;
  --f-shadow-sm: 0 1px 2px rgba(20, 22, 26, 0.04), 0 10px 30px rgba(20, 22, 26, 0.06);
  --f-shadow-md: 0 24px 60px rgba(20, 22, 26, 0.13);

  max-width: 1160px;
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  color: var(--f-ink);
  -webkit-font-smoothing: antialiased;
}

/* Page canvas (file is form-only, so this is safe) */
body {
  background:
    radial-gradient(120% 80% at 50% 0%, #eef0f3 0%, transparent 60%),
    var(--f-paper);
}

.form-container h2,
.form-container h3 {
  font-family: "Fraunces", "Georgia", serif;
  letter-spacing: -0.01em;
}

/* ----------------------------------------------------------------
   Layout
   ---------------------------------------------------------------- */
.form-container .application-layout {
  grid-template-columns: 1fr 384px;
  gap: 32px;
}

.form-container .application-left {
  border: 1px solid var(--f-line);
  border-radius: var(--f-radius-lg);
  box-shadow: var(--f-shadow-md);
  overflow: hidden;
}

.form-container .course-intro-video {
  background: var(--f-espresso);
  border-radius: var(--f-radius-lg);
  padding: 14px;
}
.form-container .course-intro-video iframe { border-radius: var(--f-radius); }

/* ----------------------------------------------------------------
   Sections & headers
   ---------------------------------------------------------------- */
.form-container .form-section {
  padding: 34px;
  border-bottom: 1px solid var(--f-line);
}

.form-container .section-header,
.form-container .payment-title {
  display: flex;
  align-items: center;
  gap: 4px;
  background: linear-gradient(180deg, #fff3cc, #ffeebf);
  color: var(--f-ink);
  border-left: 4px solid var(--f-amber);
  padding: 16px 22px;
  margin: -34px -34px 28px;
  font-family: "Fraunces", serif;
  font-size: 1.06rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: none;
}

/* Payment title sits in a plain <section> (no .form-section padding) */
.form-container .payment-title {
  margin: 0 0 4px;
  border-radius: 0;
}

/* ----------------------------------------------------------------
   Fields
   ---------------------------------------------------------------- */
.form-container .form-grid { gap: 22px; }

.form-container .form-group label {
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--f-ink-soft);
  margin-bottom: 7px;
}

.form-container .required { color: var(--f-red); }
.form-container .optional { color: var(--f-muted); font-weight: 500; }

.form-container .form-group input[type="text"],
.form-container .form-group input[type="email"],
.form-container .form-group input[type="tel"],
.form-container .form-group input[type="number"],
.form-container .form-group input[type="date"],
.form-container .date-inputs input,
.form-container .form-group textarea,
.form-container select,
.form-container #sessionId {
  padding: 12px 14px;
  border: 1px solid var(--f-line);
  border-radius: 10px;
  background: var(--f-field);
  font-family: "Inter", sans-serif;
  font-size: 0.95rem;
  color: var(--f-ink);
  transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

.form-container .form-group input:focus,
.form-container .date-inputs input:focus,
.form-container .form-group textarea:focus,
.form-container select:focus,
.form-container #sessionId:focus {
  outline: none;
  background: #fff;
  border-color: var(--f-amber);
  box-shadow: 0 0 0 3px rgba(255, 194, 14, 0.16);
}

.form-container .form-group input[readonly] {
  background: #eef0f1;
  color: var(--f-muted);
}

.form-container #sessionId { max-width: 100%; }

/* File inputs */
.form-container input[type="file"] {
  width: 100%;
  padding: 11px 14px;
  border: 1px dashed var(--f-line);
  border-radius: 10px;
  background: var(--f-field);
  font-size: 0.88rem;
  color: var(--f-ink-soft);
  cursor: pointer;
}
.form-container input[type="file"]::file-selector-button {
  margin-right: 14px;
  padding: 8px 16px;
  border: 0;
  border-radius: 8px;
  background: linear-gradient(135deg, var(--f-amber), var(--f-amber-deep));
  color: #fff;
  font-weight: 600;
  font-size: 0.82rem;
  cursor: pointer;
}
.form-container .photo-preview img {
  border-radius: 10px !important;
  border: 1px solid var(--f-line);
}

/* Radios & checkboxes */
.form-container input[type="radio"],
.form-container input[type="checkbox"] {
  accent-color: var(--f-amber);
}
.form-container .radio-group { gap: 24px; margin-top: 7px; }
.form-container .radio-label {
  color: var(--f-ink-soft);
  font-size: 0.95rem;
}

/* Errors */
.form-container .error-message { color: var(--f-red); font-size: 0.82rem; }
.form-container .form-group.has-error input,
.form-container .form-group.has-error textarea,
.form-container .form-group.has-error select {
  border-color: var(--f-red);
  box-shadow: 0 0 0 3px rgba(192, 82, 74, 0.14);
}

/* Terms */
.form-container .form-actions-terms { padding: 24px 34px 6px; }
.form-container .form-actions-terms .terms-label {
  font-size: 0.98rem;
  color: var(--f-ink-soft);
}
.form-container .form-actions-terms .terms-link {
  color: var(--f-amber-deep);
  text-decoration: underline;
  text-underline-offset: 2px;
  font-weight: 600;
}
.form-container .form-actions-terms .terms-link:hover { color: var(--f-amber); }

.form-container .recaptcha-wrap { padding: 6px 34px 16px; }

/* ----------------------------------------------------------------
   Submit
   ---------------------------------------------------------------- */
.form-container .form-actions { padding: 12px 34px 36px; }

.form-container .submit-button {
  background: linear-gradient(135deg, #ffce33 0%, #f5b400 100%);
  color: #1b1e23;
  padding: 16px 56px;
  border-radius: 12px;
  font-family: "Inter", sans-serif;
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  box-shadow: 0 16px 34px -14px rgba(245, 180, 0, 0.55);
}
.form-container .submit-button:hover:not(:disabled) {
  background: linear-gradient(135deg, #ffd84d 0%, #f5b400 100%);
  transform: translateY(-2px);
  box-shadow: 0 22px 42px -14px rgba(245, 180, 0, 0.65);
}
.form-container .submit-button:disabled {
  background: #d7dadf;
  color: #8a8f97;
  box-shadow: none;
}

/* ----------------------------------------------------------------
   Payment options
   ---------------------------------------------------------------- */
.form-container .payment-subtitle {
  font-size: 0.92rem;
  color: var(--f-muted);
  margin: 18px 34px;
}
.form-container .payment-grid { margin: 0 34px; gap: 16px; }

.form-container .payment-card {
  border: 1.5px solid var(--f-line);
  border-radius: 12px;
  background: var(--f-field);
  padding: 18px 20px;
}
.form-container .payment-card:hover {
  background: #fff;
  border-color: rgba(255, 194, 14, 0.4);
}
.form-container .payment-name { color: var(--f-ink); font-weight: 600; }
.form-container .payment-price { color: var(--f-muted); }

.form-container .payment-card input:checked + .payment-content,
.form-container .payment-card.selected {
  border-color: var(--f-amber);
  background:
    linear-gradient(180deg, #fff3cc, #fff);
  box-shadow: inset 0 0 0 1px var(--f-amber);
}
.form-container .checkmark { background: var(--f-amber); }

/* ----------------------------------------------------------------
   Order summary card
   ---------------------------------------------------------------- */
.form-container .order-card.epoxy-style {
  background: var(--f-card);
  border: 1px solid var(--f-line);
  border-radius: var(--f-radius-lg);
  padding: 30px;
  box-shadow: var(--f-shadow-md);
  position: sticky;
  top: 24px;
}

.form-container .order-title {
  font-size: 1.3rem;
  font-weight: 600;
  color: var(--f-ink);
  margin-bottom: 20px;
}

.form-container .order-logo {
  padding-bottom: 20px;
  border-bottom: 1px solid var(--f-line);
  margin-bottom: 20px;
}
.form-container .order-logo .ol-right h2 {
  font-family: "Fraunces", serif;
  font-size: 1.4rem;
  color: var(--f-amber);
  letter-spacing: -0.01em;
}
.form-container .order-logo .ol-right h3 {
  font-family: "Inter", sans-serif;
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--f-muted);
}

.form-container .order-card hr {
  border: 0;
  border-top: 1px solid var(--f-line);
  margin: 18px 0;
}

.form-container #orderCourseName,
.form-container .order-amount {
  font-weight: 600;
  color: var(--f-ink);
}
.form-container .order-line strong { color: var(--f-ink); }
.form-container .order-subtext { color: var(--f-muted); }

#showCourseFee {
  font-family: "Fraunces", serif;
  font-size: 1.35rem;
  font-weight: 600;
  color: var(--f-amber-deep);
}

#showCourseFee .gst-incl,
.form-container .payment-price small {
  display: inline-block;
  margin-left: 4px;
  font-family: "Inter", sans-serif;
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--f-muted);
}

.form-container .order-testimonials {
  margin-top: 26px;
  padding-top: 22px;
  border-top: 1px solid var(--f-line);
}
.form-container .testimonial img {
  object-fit: cover;
  border: 1px solid var(--f-line);
}
.form-container .testimonial p { color: var(--f-ink-soft); }
.form-container .testimonial strong { color: var(--f-ink); }

.form-container .order-footer-links {
  margin-top: 24px;
  padding-top: 18px;
  border-top: 1px solid var(--f-line);
}
.form-container .order-footer-links a {
  color: var(--f-amber-deep);
  font-weight: 500;
}
.form-container .order-footer-links a:hover { color: var(--f-amber); }

/* ----------------------------------------------------------------
   Footer
   ---------------------------------------------------------------- */
.form-container .form-footer { color: var(--f-muted); }
.form-container .developer-badge { color: var(--f-amber-deep); }

/* ----------------------------------------------------------------
   Responsive
   ---------------------------------------------------------------- */
@media (max-width: 992px) {
  .form-container .application-layout { grid-template-columns: 1fr; gap: 26px; }
  .form-container .order-card.epoxy-style { position: static; }
}

@media (max-width: 768px) {
  .form-container .form-section { padding: 26px 22px; }
  .form-container .section-header { margin: -26px -22px 22px; }
  .form-container .payment-grid,
  .form-container .payment-subtitle { margin-left: 22px; margin-right: 22px; }
  .form-container .form-actions,
  .form-container .form-actions-terms,
  .form-container .recaptcha-wrap { padding-left: 22px; padding-right: 22px; }
  .form-container .submit-button { width: 100%; }
}