/* ============================================================
   Seeds of Success — signup.css
   Page-specific styles only. Shared styles are in common.css.
   ============================================================ */

/* ---------------------------------------------------------
       Seeds of Success — Tutor Sign-up Page (static)
       --------------------------------------------------------- */

    .auth-section { padding: 80px 0; background: #f5f9f7; }
    .auth-card {
      max-width: 560px; margin: 0 auto;
      background: #ffffff;
      border-radius: 20px;
      padding: 50px 44px;
      box-shadow: 0 12px 40px rgba(13,110,79,0.10);
      border: 1px solid #e8efec;
    }
    .auth-card h2 { font-family: "Playfair Display", serif; font-size: clamp(24px, 3vw, 30px); color: #0d6e4f; margin-bottom: 8px; text-align: center; }
    .auth-card .lead { width: 50px; height: 4px; background: #f5a623; border-radius: 2px; margin: 14px auto 26px; }
    .auth-card p.sub { text-align: center; color: #5a6b66; font-size: 15px; margin-bottom: 28px; }

    .auth-footer { text-align: center; margin-top: 24px; font-size: 14px; color: #5a6b66; }
    .auth-footer a { color: #0d6e4f; font-weight: 600; }
    .auth-footer a:hover { text-decoration: underline; }

    .demo-note {
      background: #fff8eb;
      border-left: 4px solid #f5a623;
      padding: 12px 16px;
      border-radius: 8px;
      font-size: 13px;
      color: #5a4a25;
      margin-top: 20px;
    }

    /* Success message */
    .success-card { display: none; text-align: center; }
    .success-card.show { display: block; }
    .success-card .check {
      width: 70px; height: 70px;
      background: linear-gradient(135deg, #0d6e4f, #14906a);
      color: #fff;
      border-radius: 50%;
      display: flex; align-items: center; justify-content: center;
      margin: 0 auto 20px;
      font-size: 36px;
    }

    /* Footer */

    @media (max-width: 768px) {

      .auth-card { padding: 36px 24px; }

    }

    @keyframes pageFadeIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }
    @keyframes pageFadeOut { from { opacity: 1; transform: translateY(0); } to { opacity: 0; transform: translateY(-6px); } }