/* Coastal Background Styles */
.coastal-background {
  background: linear-gradient(
    135deg,
    #1e3a8a 0%,     /* Deep blue sky */
    #3b82f6 25%,    /* Blue */
    #60a5fa 50%,    /* Light blue */
    #fbbf24 75%,    /* Golden yellow */
    #f59e0b 100%    /* Orange sunset */
  );
  background-size: 400% 400%;
  animation: gradientShift 20s ease infinite;
  position: relative;
  overflow: hidden;
}

.coastal-background::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: 
    /* Water reflection */
    linear-gradient(
      to bottom,
      rgba(255, 255, 255, 0.1) 0%,
      rgba(255, 255, 255, 0.05) 30%,
      rgba(255, 255, 255, 0.02) 60%,
      transparent 100%
    ),
    /* Misty water effect */
    radial-gradient(
      ellipse at center,
      rgba(255, 255, 255, 0.15) 0%,
      transparent 70%
    );
  pointer-events: none;
}

.coastal-background::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 40%;
  background: 
    /* Rocky coastline */
    linear-gradient(
      to top,
      #374151 0%,
      #4b5563 20%,
      #6b7280 40%,
      #9ca3af 60%,
      transparent 100%
    );
  pointer-events: none;
}

@keyframes gradientShift {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

/* Fade overlay for better text readability */
.coastal-fade {
  background: rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(1px);
}

/* Enhanced form styling for coastal theme */
.coastal-form {
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  box-shadow: 
    0 8px 32px rgba(0, 0, 0, 0.1),
    0 2px 8px rgba(0, 0, 0, 0.05);
  border-radius: 16px;
}

.coastal-form input {
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid rgba(59, 130, 246, 0.3);
  transition: all 0.3s ease;
}

.coastal-form input:focus {
  background: rgba(255, 255, 255, 1);
  border-color: #3b82f6;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.coastal-form button {
  background: linear-gradient(135deg, #3b82f6, #1d4ed8);
  transition: all 0.3s ease;
}

.coastal-form button:hover {
  background: linear-gradient(135deg, #1d4ed8, #1e40af);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
}