body {
  font-family: 'Segoe UI', Arial, sans-serif;
  background: linear-gradient(135deg, #cfe6ff 0%, #e7fffc 100%);
  margin: 0;
  padding: 0;
  color: #232323;
  min-height: 100vh;
  position: relative;
}
header, footer {
  text-align: center;
  background: linear-gradient(90deg, #0076c9 60%, #00b2a9 100%);
  color: #fff;
  padding: 2em 0 0.5em 0;
  letter-spacing: 0.04em;
  box-shadow: 0 2px 14px rgba(0,130,230,0.05);
  position: relative;
}
header h1 {
  margin-bottom: 0.2em;
  letter-spacing: 0.08em;
  font-size: 2.5em;
  font-weight: 800;
  text-shadow: 0 2px 8px #0076c955;
}

.plane-banner {
  width: 100%;
  max-width: 700px;
  margin: 0 auto 0.5em auto;
  display: flex;
  justify-content: center;
  align-items: center;
}
.plane-svg {
  display: block;
  margin: 0 auto;
  max-width: 100%;
  height: auto;
}
main {
  max-width: 430px;
  margin: 2.5em auto 2em auto;
  background: #fff;
  border-radius: 18px;
  padding: 2em 2em 1.5em 2em;
  box-shadow: 0 6px 32px rgba(0,0,0,0.10);
  position: relative;
  z-index: 2;
}
/* Autocomplete dropdown styling */
.autocomplete-list {
  position: absolute;
  z-index: 10;
  background: #fff;
  border: 1px solid #b3d5f2;
  border-radius: 8px;
  box-shadow: 0 4px 18px #0076c92a;
  width: 95%;
  max-height: 220px;
  overflow-y: auto;
  margin-top: 0.2em;
  padding: 0;
  list-style: none;
  display: none;
}
.autocomplete-list li {
  padding: 0.7em 1em;
  cursor: pointer;
  font-size: 1.04em;
  color: #0076c9;
  border-bottom: 1px solid #e7fffc;
  transition: background 0.15s, color 0.15s;
}
.autocomplete-list li:last-child {
  border-bottom: none;
}
.autocomplete-list li:hover, .autocomplete-list li:focus {
  background: #e7fffc;
  color: #00b2a9;
}
form label {
  display: block;
  margin: 1.2em 0 0.3em 0;
  font-weight: 500;
  font-size: 1.03em;
  color: #0076c9;
  position: relative;
}
input, select, button {
  width: 100%;
  padding: 0.75em 0.9em;
  margin-bottom: 1em;
  border-radius: 8px;
  border: 1px solid #b3d5f2;
  font-size: 1.07em;
  background: #f6fbff;
  transition: border-color 0.23s;
}
input:focus, select:focus {
  border-color: #00b2a9;
  outline: none;
  background: #e7faff;
}
button {
  background: linear-gradient(90deg, #0076c9 50%, #00b2a9 100%);
  color: #fff;
  border: none;
  font-weight: bold;
  cursor: pointer;
  transition: background 0.20s, transform 0.10s;
  font-size: 1.09em;
  box-shadow: 0 2px 10px #00b2a93a;
}
button:hover {
  background: linear-gradient(90deg, #00b2a9 10%, #0076c9 100%);
  transform: translateY(-1.5px) scale(1.01);
}
#confirmation {
  text-align: center;
  padding: 2em 0;
  font-size: 1.1em;
  z-index: 2;
}
/* Info section styling */
.info-section {
  background: #f3fbfe;
  border-radius: 12px;
  padding: 1.2em 1.3em;
  margin: 1.8em 0 1.2em 0;
  box-shadow: 0 2px 12px #00b2a91a;
  border-left: 4px solid #00b2a9;
  z-index: 1;
}
.info-section h2 {
  margin-top: 0;
  color: #00b2a9;
  font-size: 1.15em;
}
.autocomplete-list {
  position: absolute;
  z-index: 100;
  background: #fff;
  box-shadow: 0 2px 16px #00b2a93c;
  border-radius: 8px;
  list-style: none;
  margin: -0.5em 0 0 0;
  padding: 0;
  width: 94%;
  max-height: 180px;
  overflow-y: auto;
  border: 1px solid #b3d5f2;
  font-size: 0.98em;
  color: #232323;
}
.autocomplete-list li {
  padding: 11px 16px;
  cursor: pointer;
  border-bottom: 1px solid #f3fbfe;
}
.autocomplete-list li:last-child {
  border-bottom: none;
}
.autocomplete-list li:hover {
  background: #00b2a9;
  color: #fff;
  font-weight: 500;
}
@media (max-width: 650px) {
  main { max-width: 98vw; padding: 0.5em; }
  .info-section { padding: 0.7em 0.7em; }
  header,footer { padding: 1.2em 0 0.7em 0;}
}
/* Add to your existing style.css */

#payment-method-selection {
    margin-top: 20px;
    padding: 15px;
    border: 1px solid #ddd;
    border-radius: 8px;
    background-color: #f9f9f9;
}

.payment-options label {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
    cursor: pointer;
}

.payment-options input[type="radio"] {
    margin-right: 10px;
}

.card-logo {
    height: 25px; /* Adjust as needed */
    margin-left: 10px;
    vertical-align: middle; /* Align with text */
}

#payment-message {
    background-color: #e0ffe0; /* Light green for success */
    border: 1px solid #a0ffa0;
    color: #333;
    padding: 15px;
    border-radius: 8px;
    margin-top: 20px;
    text-align: center;
}

#payment-message.error {
    background-color: #ffe0e0; /* Light red for error */
    border: 1px solid #ffa0a0;
    color: #d8000c;
}

.message-text {
    margin: 0;
    font-weight: bold;
}
/* --- Spinner Styles --- */

/* The overlay that covers the entire screen */
.spinner-overlay {
  position: fixed; /* Stays in the same position even when scrolling */
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.7); /* Darker, semi-transparent background */
  display: flex; /* Use flexbox to center the spinner */
  justify-content: center; /* Center horizontally */
  align-items: center; /* Center vertically */
  z-index: 10000; /* Ensure it's on top of almost everything else */
  /* You can add a subtle blur or other effects if you like */
  /* backdrop-filter: blur(5px); */ /* Modern browsers only */
}

/* The actual spinning circle */
.spinner {
  border: 4px solid rgba(255, 255, 255, 0.3); /* Light grey, semi-transparent border */
  border-radius: 50%; /* Makes it a circle */
  border-top: 4px solid #007bff; /* Bright blue for the spinning part (example color) */
  /* You could use a color that matches your branding, e.g., a primary color from your site */
  /* For example, if your site has a strong orange or green, use that! */
  /* border-top: 4px solid #ff7f50; */ /* Coral */
  /* border-top: 4px solid #28a745; */ /* Green */

  width: 50px; /* Slightly larger spinner */
  height: 50px;
  animation: spin 1s linear infinite; /* Keeps it spinning indefinitely */
}

/* The animation keyframes */
@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* --- End Spinner Styles --- */

/* You might already have styles for .payment-message .error / .success */
/* If not, here's an example: */
.payment-message {
    padding: 15px;
    margin-top: 20px;
    border-radius: 8px;
    text-align: center;
    font-weight: bold;
}

.payment-message.error {
    background-color: #f8d7da; /* Light red */
    color: #721c24; /* Dark red text */
    border: 1px solid #f5c6cb;
}

.payment-message.success {
    background-color: #d4edda; /* Light green */
    color: #155724; /* Dark green text */
    border: 1px solid #c3e6cb;
}

/* Add any other existing styles for your form, header, etc. here */