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

/* ---------------------------------------------------------
       Seeds of Success — Login Page (role picker, static)
       --------------------------------------------------------- */

    /* Header */

    /* Page hero */

    /* Role picker */
    .role-section { padding: 80px 0; background: #f5f9f7; }
    .role-title {
      text-align: center;
      margin-bottom: 40px;
    }
    .role-title h2 {
      font-family: "Playfair Display", serif;
      font-size: clamp(26px, 3.5vw, 34px);
      color: #0d6e4f;
      margin-bottom: 10px;
    }
    .role-title p { color: #5a6b66; font-size: 16px; }
    .role-title::after {
      content: ""; display: block;
      width: 60px; height: 4px;
      background: #f5a623;
      border-radius: 2px;
      margin: 16px auto 0;
    }

    .role-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 22px;
      max-width: 1080px;
      margin: 0 auto;
    }
    .role-card {
      background: #ffffff;
      border-radius: 18px;
      padding: 36px 22px;
      text-align: center;
      box-shadow: 0 6px 22px rgba(13,110,79,0.08);
      border: 2px solid transparent;
      cursor: pointer;
      transition: all 0.25s ease;
      position: relative;
    }
    .role-card:hover {
      transform: translateY(-6px);
      border-color: #0d6e4f;
      box-shadow: 0 16px 38px rgba(13,110,79,0.15);
    }
    .role-card.selected {
      border-color: #0d6e4f;
      background: linear-gradient(180deg, #ffffff 0%, #f5f9f7 100%);
    }
    .role-icon {
      width: 70px; height: 70px;
      margin: 0 auto 16px;
      border-radius: 50%;
      display: flex;
      align-items: center; justify-content: center;
      font-size: 32px;
      color: #fff;
    }
    .role-icon.admin { background: linear-gradient(135deg, #0d6e4f, #14906a); }
    .role-icon.tutor { background: linear-gradient(135deg, #0d6e4f, #14906a); }
    .role-icon.volunteer { background: linear-gradient(135deg, #0d6e4f, #14906a); }
    .role-icon.student { background: linear-gradient(135deg, #0d6e4f, #14906a); }
    .role-card h3 {
      font-family: "Playfair Display", serif;
      font-size: 20px;
      color: #0d6e4f;
      margin-bottom: 6px;
    }
    .role-card p { color: #5a6b66; font-size: 13px; }

    /* Login form (shown after role pick) */
    .auth-section { padding: 0 0 80px; background: #f5f9f7; }
    .auth-card {
      max-width: 480px;
      margin: 0 auto;
      background: #ffffff;
      border-radius: 20px;
      padding: 44px 40px;
      box-shadow: 0 12px 40px rgba(13,110,79,0.10);
      border: 1px solid #e8efec;
      display: none;
    }
    .auth-card.show { display: block; animation: cardIn 0.3s ease; }
    @keyframes cardIn {
      from { opacity: 0; transform: translateY(10px); }
      to   { opacity: 1; transform: translateY(0); }
    }
    .auth-card h2 { font-family: "Playfair Display", serif; font-size: 26px; color: #0d6e4f; margin-bottom: 6px; text-align: center; }
    .auth-card .lead { width: 50px; height: 4px; background: #f5a623; border-radius: 2px; margin: 12px auto 22px; }
    .auth-card p.sub { text-align: center; color: #5a6b66; font-size: 14px; margin-bottom: 24px; }
    .auth-card .change-role {
      display: block;
      text-align: center;
      margin-bottom: 22px;
      color: #0d6e4f;
      font-weight: 500;
      font-size: 13px;
      cursor: pointer;
    }
    .auth-card .change-role:hover { text-decoration: underline; }

    .row-between {
      display: flex; justify-content: space-between; align-items: center;
      font-size: 14px; margin: 4px 0 22px;
    }
    .row-between label { color: #5a6b66; }
    .row-between a { color: #0d6e4f; font-weight: 500; }
    .row-between a:hover { text-decoration: underline; }

    .auth-footer { text-align: center; margin-top: 22px; 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;
    }

    .role-badge {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      padding: 6px 14px;
      border-radius: 30px;
      background: #e6f4ee;
      color: #0d6e4f;
      font-size: 13px;
      font-weight: 600;
      margin-bottom: 14px;
    }
    .role-badge .dot {
      width: 8px; height: 8px; border-radius: 50%;
      background: #0d6e4f;
    }

    /* Footer */

    /* Responsive */
    @media (max-width: 960px) {
      .role-grid { grid-template-columns: repeat(2, 1fr); }
      
    }
    @media (max-width: 768px) {

      .auth-card { padding: 34px 24px; }
      
    }
    @media (max-width: 520px) {
      .role-grid { grid-template-columns: 1fr; }
    }

    @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); } }