/* General body styling */
body {
  background-color: #f3f4f6;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 1rem;
}

/* Canvas container */
#canvasContainer {
  background-color: white;
  border: 1px solid #ddd;
  position: relative;
  width: 384px; /* w-96 in Tailwind is 384px */
  height: 384px; /* h-96 in Tailwind is 384px */
}

#canvas {
  width: 100%;
  height: 100%;
  touch-action: none;
}

#cursor {
  position: absolute;
  pointer-events: none;
}

/* Overlay styling with centered content, initially hidden */
#overlay {
  display: none; /* Hidden initially */

  background-color: #f3f4f6;
  z-index: 1000;
  text-align: center; /* Centers all child elements horizontally */
  padding-top: 10px; /* Keeps the overlay content vertically centered as per your original setup */
  font-size: 24px;
  color: #333;
}

/* Progress text inside overlay */
#progressText {
  margin-bottom: 20px;
}

/* Cancel button styling inside overlay */
#cancelButton {
  display: none; /* Hidden initially */
  margin-top: 20px;
  padding: 10px 20px;
  background-color: #ff4d4d;
  color: white;
  border: none;
  border-radius: 5px;
  font-size: 18px;
  cursor: pointer;
  text-align: center;
  margin: 20px auto 0; /* Center horizontally */
}

/* Button styling */
button {
  padding: 0.25rem 0.5rem;
  border: inherit;
  border-radius: 5px;
  font-size: 16px;
  cursor: pointer;
}


/* Specific button color styles */
#drawButton {
  background-color: #3b82f6;
  color: white;
}
#eraseButton, #clearCanvas, #uploadButton, #downloadButton {
  background-color: #gray-200;
  color: #gray-700;
}
#generateButton {
  background-color: #10b981;
  color: white;
}


#drawButton:hover {
  background-color: #2563eb;
}
#eraseButton:hover {
  background-color: #2563eb;
  color: white;
}
#inpaintButton:hover {
  background-color: #2563eb;
  color: white;
}
#clearCanvas:hover {
  background-color: #ef4444;
  color: white;
}

.LoginEmailButton {
  width: 100%; /* Full width */
  height: 40px; /* Total height including border */
  background-color: white; /* Default background color */
  border: 1px solid rgb(218, 220, 224); /* Default border color */
  color: black; /* Default text color */
  padding: 0.5rem 1rem; /* Padding: vertical 0.5rem, horizontal 1rem */
  border-radius: 4px; /* Rounded corners */
  margin-bottom: 1rem; /* Bottom margin */
  text-align: left; /* Align text to the left */
  cursor: pointer; /* Change cursor to pointer on hover */
}

/* Hover styles */
.LoginEmailButton:hover {
  background-color: rgb(248, 250, 255); /* Hover background color */
  border-color: rgb(210, 227, 252); /* Hover border color */
  color: black; /* Text remains black (you can change this if needed) */
}

/* Adjust label styling for consistency */
label[for="fileInput"] {
  background-color: #e5e7eb; /* Same as other buttons */
  color: #374151; /* Same text color */
  padding: 0.25rem 0.5rem; /* Match requested padding */
  border-radius: 5px; /* Same rounded corners */
  cursor: pointer;
  font-size: 15px; /* Match specified font size */
  text-align: center;
  display: inline-flex; /* Use flexbox for proper alignment */
  align-items: center; /* Vertically center text */
  justify-content: center; /* Horizontally center text */
  height: 31px; /* Explicitly set height for consistency */
  box-sizing: border-box; /* Ensure padding doesn’t affect dimensions */
  line-height: 1; /* Match line height */
}

/* Hover effect for label */
label[for="fileInput"]:hover {
  background-color: #22c55e; /* Match hover color */
  color: white; /* White text on hover */
}

/* Hover effect for label */
label[for="fileInput"]:hover {
  background-color: #22c55e; /* Match hover color for Download button */
  color: white; /* White text on hover */
}

#downloadButton:hover {
  background-color: #22c55e;
  color: white;
}

/* Input and label styling */
input[type="range"], #promptInput, label {
  font-family: sans-serif;
  color: #333;
  font-size: 15px;
}

/* View Switch Container */
.view-switch-container {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 20px;
}

/* Labels for Original and Generated */
.view-label {
  font-size: 18px;
  font-weight: bold;
  color: #333;
  margin: 0 10px;
}

/* Switch Slider Styling */
.view-switch {
  position: relative;
  display: inline-block;
  width: 60px;
  height: 34px;
}

.view-switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.view-slider.round {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  transition: .4s;
  border-radius: 34px;
}

.view-slider.round:before {
  position: absolute;
  content: "";
  height: 26px;
  width: 26px;
  left: 4px;
  bottom: 4px;
  background-color: white;
  transition: .4s;
  border-radius: 50%;
}

.view-switch input:checked + .view-slider.round {
  background-color: #4CAF50;
}

.view-switch input:checked + .view-slider.round:before {
  transform: translateX(26px);
}

/* Centered container for the switch */
#switchContainer {
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-top: 20px;
}

/* Accept and Cancel button styling */
#acceptButton, #cancelButton2 {
  padding: 8px 16px;           /* Adjust padding to match */
  background-color: #e5e7eb;    /* Gray background to match */
  color: #374151;               /* Gray text color */
  border: none;
  border-radius: 4px;           /* Rounded corners */
  font-size: 15px;              /* Adjust font size */
  cursor: pointer;
  margin: 5px;
  transition: background-color 0.3s ease; /* Smooth hover transition */
}

#actionButtons {
  display: none;
  padding: 10px; /* Optional: Add padding for better appearance */
}

/* Hover effect for Accept button */
#acceptButton:hover {
  background-color: #10b981;    /* Green hover color */
  color: white;                 /* White text color on hover */
}

/* Hover effect for Cancel button */
#cancelButton2:hover {
  background-color: #ef4444;    /* Red hover color */
  color: white;                 /* White text color on hover */
}

#canvasContainer {
  position: relative;
}

#inpaintCanvas {
    opacity: 0.5; /* Makes the entire layer 50% transparent */
}

.flex.flex-row.items-center {
    gap: 4px; /* Adjust spacing */
}

.hidden {
    display: none !important;
}

.common-container {
  width: 384px; /* Fixed width to match Tailwind's w-[448px] */
  background-color: white; /* Ensure all have the same background */
  padding: 16px; /* Add consistent padding */
  border: 1px solid #ddd;
  border-radius: 0px; /* Match rounded corners */
  box-shadow: 0 0px 0px rgba(0, 0, 0, 0.1); /* Consistent shadow */
  margin: 0 auto; /* Center horizontally with a top/bottom margin */
}

.faq-question {
    cursor: pointer;
}