/* Custom font for a modern look */
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600;700&display=swap");

body {
  font-family: "Inter", sans-serif;
  background-color: #f8fafc;
  /* Default background for wider screens (>=1280px) */
  background-image: url("../placeholder_background.svg"); /* Ensure this path is correct for your desktop image */
  background-size: cover; /* Cover the entire viewport */
  background-position: right center; /* Default to right half for larger screens, adjusted by 'cover' */
  background-repeat: no-repeat;
  background-attachment: fixed;
  display: flex;
  align-items: center; /* Vertically center content */
  justify-content: flex-start; /* Align content to the left by default (for desktop) */
  min-height: 100vh;
  margin: 0;
  padding: 2rem 7rem; /* Add horizontal padding for larger screens */
}

/* Visually hidden for accessibility but available to screen readers */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

.content-wrapper {
  text-align: left; /* Align text to the left by default (for desktop) */
  max-width: none; /* Remove max-width constraint by default for desktop */
  width: 100%;
}

.domain-input-container {
  display: flex;
  align-items: center;
  border: 1px solid #d1d5db; /* Gray-300 */
  border-radius: 0.5rem; /* Rounded-lg */
  overflow: hidden;
  margin: 0; /* Align input to the left by default (for desktop) */
  max-width: 600px; /* Limit width on desktop for better form appearance */
}
.domain-input {
  flex-grow: 1;
  padding: 0.75rem 1rem;
  border: none;
  outline: none;
  font-size: 1rem;
  min-width: 0; /* Allow input to shrink within flex container */
}
.register-button {
  background-color: #ff6633; /* Orange-500 */
  color: black;
  padding: 0.75rem 1.5rem;
  border-radius: 0.5rem;
  cursor: pointer;
  font-weight: 400;
  white-space: nowrap; /* Prevent text wrapping */
  flex-shrink: 0; /* Prevent button from shrinking */
  border-top-left-radius: 0; /* Reset radius for horizontal layout */
  border-bottom-left-radius: 0; /* Reset radius for horizontal layout */
}

.register-button:hover {
  background-color: rgb(7 0 51 / var(--tw-bg-opacity, 1));
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}

/* Custom responsive class */
.mb-48-responsive {
  margin-bottom: 3rem; /* mb-48 equivalent (48 * 0.25rem = 12rem, but using 3rem as a more practical value) */
  width: 50%; /* 50% of viewport width for screens > 1280px */
}

/* Media query for screens <= 1280px (including tablet and mobile) */
@media (max-width: 1280px) {
  body {
    background-image: url("../cloud_background.svg"); /* Change background image for smaller screens */
    background-position: center; /* Center the new background image */
    justify-content: center; /* Center content horizontally */
    padding: 1rem; /* Adjust padding for mobile/tablet */
  }
  .content-wrapper {
    text-align: center; /* Center text for mobile/tablet */
    max-width: 600px; /* Limit content width */
  }
  .domain-input-container {
    margin: 0 auto; /* Center the input container */
  }
  .logo {
    margin-left: auto !important; /* Override md:mx-0 from Tailwind */
    margin-right: auto !important; /* Override md:mx-0 from Tailwind */
  }
  .mb-48-responsive {
    width: auto; /* Remove width constraint for screens <= 1280px */
  }
}

/* Responsive adjustments for stacking on very small screens (e.g., typically < 640px) */
@media (max-width: 639px) {
  .domain-input-container {
    flex-direction: column; /* Stack elements vertically */
    border-radius: 0.5rem; /* Maintain overall border-radius for container */
  }
  .domain-input {
    width: 100%; /* Full width for input */
    border-bottom: 1px solid #d1d5db; /* Add border for separation */
    border-radius: 0.5rem 0.5rem 0 0; /* Top rounded corners */
    padding: 1rem; /* Adjust padding for better touch target */
  }
  .register-button {
    width: 100%; /* Full width for button */
    border-radius: 0 0 0.5rem 0.5rem; /* Bottom rounded corners */
    padding: 1rem; /* Increase padding for better touch target */
  }
}