/* General Body Styles */
   body {
       font-family: "Inter", sans-serif;
       background-color: #f3f4f6;
       /* A light gray background */
       margin: 0;
       padding: 0;
   }

   /* Main container to center the form */
   .main-center {
       display: flex;
       align-items: center;
       justify-content: center;
       min-height: 100vh;
       padding: 2rem;
       box-sizing: border-box;
   }

   /* The form card itself */
   .form-container {
       margin: 0 auto;
       max-width: 570px;
       width: 100%;
       background: white;
       padding: 2.5rem;
       /* 40px */
       border-radius: 0.75rem;
       /* 12px */
       box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1),
           0 4px 6px -4px rgba(0, 0, 0, 0.1);
   }

   /* Form image styling */
   .form-img {
       display: block;
       margin-left: auto;
       margin-right: auto;
       margin-bottom: 2rem;
       /* 32px */
       width: 100%;
       max-width: 200px;
       height: auto;
       /* Maintain aspect ratio */
   }

   /* Form title and description */
   .form-title {
       font-size: 1.875rem;
       /* 30px */
       font-weight: 700;
       color: #111827;
       /* Dark gray */
       margin-bottom: 0.5rem;
       /* 8px */
       text-align: center;
   }

   .form-desc {
       color: #6b7280;
       /* Medium gray */
       margin-bottom: 1.5rem;
       /* 32px */
       font-size: 0.875rem;
       /* 14px */
       text-align: center;
       line-height: 1.5;
   }

   /* Styling for form labels */
   .form-label {
       display: block;
       margin-top: .75rem;
       margin-bottom: 0.5rem;
       /* 8px */
       font-size: 0.875rem;
       /* 14px */
       font-weight: 600;
       color: #374151;
       /* Slightly lighter dark gray */
   }

   /* Unified styling for text inputs and select dropdowns */
   .form-input,
   .form-select {
       width: 100%;
       padding: 0.875rem 1.25rem;
       /* 14px 20px */
       border: 1px solid #d1d5db;
       /* Light gray border */
       border-radius: 0.5rem;
       /* 8px */
       background: #ffffff;
       font-weight: 500;
       font-size: 1rem;
       /* 16px */
       color: #111827;
       outline: none;
       box-sizing: border-box;
       transition: border-color 0.2s, box-shadow 0.2s;
       margin-bottom: 1.25rem;
       /* 20px */
   }

   .form-input::placeholder {
       color: #9ca3af;
       /* Lighter gray for placeholder */
   }

   /* Focus state for inputs and selects */
   .form-input:focus,
   .form-select:focus {
       border-color: #6a64f1;
       /* Purple accent color */
       box-shadow: 0 0 0 3px rgba(106, 100, 241, 0.2);
   }

   /* Styling for the file input */
   .form-file {
       display: block;
       width: 100%;
       margin-bottom: 1.25rem;
       /* 20px */
       font-size: 0.875rem;
       /* 14px */
       color: #374151;
   }

   /* Custom styling for file input button */
   .form-file::file-selector-button {
       margin-right: 1rem;
       padding: 0.5rem 1rem;
       border: 1px solid #d1d5db;
       border-radius: 0.375rem;
       background-color: #f9fafb;
       color: #374151;
       font-weight: 500;
       cursor: pointer;
       transition: background-color 0.2s;
   }

   .form-file::file-selector-button:hover {
       background-color: #f3f4f6;
   }

   .form-radio-group {
       display: flex;
       gap: 1.5rem;
       margin-bottom: 1.5rem;
   }

   h2 {
       margin-top: 1.5em;
       margin-bottom: .5rem;
   }

   .geneva-degree-row {
       display: grid;
       grid-template-columns: auto 160px;
       align-items: center;
       column-gap: 0.75rem;
       margin-top: 1.5rem;
       margin-bottom: 1.5rem;
   }

   .geneva-degree-option {
       display: flex;
       align-items: flex-start;
       gap: 0.5rem;
   }

   .geneva-degree-year .form-input {
       width: 100%;
       padding: 0.5rem 0.75rem;
       font-size: 0.875rem;
       margin-bottom: 0;
   }

   @media (max-width: 640px) {
       .geneva-degree-row {
           grid-template-columns: 1fr;
           row-gap: 0.5rem;
       }

       .geneva-degree-year {
           margin-left: 2rem;
       }
   }

   /* Container for the checkbox and its label */
   .form-checkbox-row {
       display: flex;
       align-items: flex-start;
       gap: 0.75rem;
       /* 12px */
       margin-top: 1.5rem;
       /* 24px */
       margin-bottom: 1.5rem;
       /* 24px */
   }

   /* Styling for the checkbox */
   .form-checkbox {
       margin-top: 0.125rem;
       /* 2px */
       height: 1.25rem;
       /* 20px */
       width: 1.25rem;
       /* 20px */
       border-radius: 0.25rem;
       /* 4px */
       border: 1px solid #d1d5db;
       cursor: pointer;
       flex-shrink: 0;
   }

   .form-checkbox:checked {
       background-color: #c7982d;
       border-color: #c7982d;
   }

   /* Submit button styling */
   .form-btn {
       text-align: center;
       text-decoration: none;
       width: 100%;
       font-size: 1rem;
       /* 16px */
       border-radius: 0.5rem;
       /* 8px */
       padding: 0.875rem 1.5rem;
       /* 14px 24px */
       border: none;
       font-weight: 600;
       background-color: #c7982d;
       color: white;
       cursor: pointer;
       margin-top: 1rem;
       /* 24px */
       transition: background-color 0.2s, box-shadow 0.2s;
   }

   /* previous button styling */
   .form-btn-prev {
       text-align: center;
       text-decoration: none;
       width: 100%;
       font-size: 1rem;
       /* 16px */
       border-radius: 0.5rem;
       /* 8px */
       padding: 0.875rem 1.5rem;
       /* 14px 24px */
       border: none;
       font-weight: 600;
       background-color: #787677;
       color: white;
       cursor: pointer;
       margin-top: 1rem;
       /* 24px */
       transition: background-color 0.2s, box-shadow 0.2s;
   }

   .form-btn:hover {
       background-color: #B18428;
       box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
   }

   .birth-announcement-group {
       background-color: #e5e7eb;
       /* slightly darker gray */
       padding: 1.5rem;
       border-radius: 0.75rem;
       position: relative;
       margin-top: 1rem;
       margin-bottom: 1rem;
   }

   .remove-btn {
       position: absolute;
       top: 0.5rem;
       right: 0.5rem;
       background: none;
       border: none;
       color: #b91c1c;
       font-size: 1.5rem;
       cursor: pointer;
       padding: 0;
       line-height: 1;
   }

   ul#alumni_child_gender {
       list-style: none;
       padding-left: 0;
   }

   .required-asterisk {
       color: red;
       font-weight: bold;
       margin-left: 4px;
   }

   .form-note {
       font-size: 0.9em;
       line-height: 1.25rem;
       margin-bottom: 1rem;
       color: #444;
   }

   .form-errors {
       color: red;
       font-size: 0.9em;
       margin-top: 4px;
       list-style: none;
       padding-left: 0;
   }

   #drop-zone {
       border: 2px dashed #aaa;
       padding: 1rem;
       text-align: center;
       cursor: pointer;
       border-radius: .5rem;
   }

   #drop-zone.hover {
       background-color: #f0f0f0;
   }

   #preview-canvas {
       display: block;
       padding: 1rem;
       max-width: 100%;
       height: auto;
   }

   .alumni_child_block {
       background-color: #e5e7eb;
       padding: 1.5rem;
       border-radius: 0.75rem;
       margin-top: 1.5rem;
       position: relative;
   }

   .form-error {
       color: #c62828;
       font-size: 0.9rem;
       margin-top: 0.5rem;
   }

   .form-errors {
       margin-top: 0.5rem;
   }

   .grad-year-wrapper {
       display: none;
   }

   .grad-year-wrapper.is-visible {
       display: inline-block;
   }