/* Page background and font */

body {

  margin: 0;

  padding: 0;

  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;

  background-image: url("/static/background.png");

  background-repeat: no-repeat;

  background-position: center top;

  background-attachment: fixed;

  background-size: cover;

  background-color: white;

  color: #202124;

  min-height: 100vh;

  position: relative;

  z-index: 0;

}



/* Navigation links */

nav {

  text-align: right;

  padding: 10px 20px;

}



nav a {

  font-size: 14px;

  text-decoration: none;

  color: #1a73e8;

  font-weight: bold;

  margin-left: 20px;

}



nav a:hover {

  text-decoration: underline;

}



/* Form layout */

.form-container {

  max-width: 500px;

  margin: 60px auto;

  background: white;

  padding: 30px 40px;

  border-radius: 10px;

  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);

}



/* Logo styling */

.form-logo {

  text-align: center;

  margin-bottom: 20px;

}



.form-logo img {

  width: 300px;

  height: auto;

}



/* Headings */

h1 {

  text-align: center;

  color: #1a73e8;

  margin: 0;

}



h2 {

  text-align: center;

  font-weight: normal;

  color: #5f6368;

  margin-top: 5px;

  margin-bottom: 25px;

}



/* Inputs and dropdowns */

label {

  display: block;

  margin-top: 15px;

  font-weight: 500;

}



input,

select {

  width: 100%;

  padding: 10px;

  margin-top: 6px;

  border: 1px solid #ddd;

  border-radius: 4px;

  box-sizing: border-box;

}



/* Checkbox columns for services */

.services-columns {

  display: flex;

  gap: 20px;

  margin-top: 10px;

}



.services-columns label {

  display: block;

  margin-bottom: 8px;

}



/* Submit button */

button[type="submit"] {

  width: 100%;

  padding: 12px;

  margin-top: 25px;

  background-color: #1a73e8;

  border: none;

  color: white;

  font-size: 16px;

  border-radius: 4px;

  cursor: pointer;

}



button[type="submit"]:hover {

  background-color: #1669c1;

}



/* Spinner overlay */

.spinner-overlay {

  display: none;

  position: fixed;

  top: 0;

  left: 0;

  width: 100%;

  height: 100%;

  background-color: rgba(255, 255, 255, 0.6);

  z-index: 999;

  justify-content: center;

  align-items: center;

}



.spinner {

  border: 5px solid #f3f3f3;

  border-top: 5px solid #1a73e8;

  border-radius: 50%;

  width: 50px;

  height: 50px;

  animation: spin 1s linear infinite;

}



@keyframes spin {

  0% { transform: rotate(0deg); }

  100% { transform: rotate(360deg); }

}



/* Terms and conditions checkbox */

.terms-checkbox {

  margin-top: 20px;

}



.terms-checkbox label {

  font-size: 14px;

}



.terms-checkbox a {

  color: #1a73e8;

  text-decoration: none;

}



.terms-checkbox a:hover {

  text-decoration: underline;

}



/* Instructions section styling */

.instructions-container {

  max-width: 800px;

  margin: 60px auto;

  padding: 30px;

  background: #ffffffcc;

  border-radius: 8px;

  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);

}



.instructions-container h2 {

  text-align: center;

  color: #1a73e8;

  margin-bottom: 30px;

}



.step {

  display: flex;

  align-items: center;

  margin-bottom: 30px;

  gap: 20px;

}



.step-icon {

  width: 64px;

  height: 64px;

  object-fit: contain;

  border-radius: 6px;

  border: 1px solid #ddd;

  margin-right: 20px;

  flex-shrink: 0;

}



.step-text h3 {

  margin: 0 0 10px 0;

  color: #1a73e8;

  font-size: 18px;

}



.step-text p {

  margin: 0;

  font-size: 14px;

  color: #333;

}

.button-link {
  display: inline-block;
  padding: 10px 20px;
  background-color: #1a73e8;
  color: white;
  border-radius: 4px;
  text-decoration: none;
  margin-top: 20px;
  font-weight: bold;
}

.button-link:hover {
  background-color: #1669c1;
}