#qr-tool-container {
  max-width: 1200px; /* Wider for two columns */
  margin: 2rem auto;
  padding: 2rem;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  font-family: "Segoe UI", sans-serif;
  color: #333;
}

h2 {
  text-align: center;
  color: #222;
  margin-bottom: 1.5rem;
  font-size: 2rem;
}

/* Two-Column Wrapper */
.qr-tool-wrapper {
  display: flex;
  flex-wrap: wrap; /* Allows columns to stack on smaller screens */
  gap: 30px; /* Space between columns */
  justify-content: center; /* Center content when not enough space for two columns */
  align-items: flex-start; /* Align columns at the top */
}

.input-column {
  flex: 2; /* Takes up 2 parts of available space */
  min-width: 380px; /* Minimum width for the input column */
  max-width: 650px; /* Max width to prevent it from getting too wide */
  padding: 1.5rem; /* Padding for the column content */
  border-radius: 8px;
  background-color: #fcfcfc; /* Slightly different background for visual separation */
  box-shadow: 0 2px 8px rgba(0,0,0,0.03);
  text-align: left; /* Reset text align for input fields */
}

.output-column {
  flex: 1; /* Takes up 1 part of available space */
  min-width: 300px; /* Minimum width for the output column */
  max-width: 350px; /* Max width to prevent it from getting too wide */
  display: flex;
  flex-direction: column;
  justify-content: flex-start; /* Align content to the top */
  align-items: center; /* Center items horizontally within its column */
  padding: 1.5rem;
  border-radius: 8px;
  background-color: #fcfcfc;
  box-shadow: 0 2px 8px rgba(0,0,0,0.03);
}


/* Tabs Styling - Adjusted for more tabs, single row, no scroll, dynamic width */
.qr-tabs {
  display: flex;
  flex-wrap: nowrap; /* IMPORTANT: Force tabs into one row */
  justify-content: space-between; /* Distribute tabs evenly across width */
  gap: 0.15rem; /* Reduced gap between tabs further */
  margin-bottom: 0; /* No margin below tabs */
  border-bottom: 2px solid #eee;
  padding-bottom: 10px;
  /* Removed overflow-x: auto; to prevent scrollbar */
}

.tab-button {
  flex-grow: 1; /* Allow buttons to grow and fill available space */
  flex-shrink: 1; /* Allow buttons to shrink if needed to fit */
  min-width: 0; /* Allow shrinking below content width */
  text-align: center; /* Center text within tabs */
  padding: 0.8rem 0.2rem; /* Reduced horizontal padding for tighter fit */
  border: 1px solid #ddd;
  border-bottom: none;
  border-radius: 8px 8px 0 0;
  background-color: #f9f9f9;
  cursor: pointer;
  font-size: 0.75rem; /* Smaller font size to help fit more tabs */
  font-weight: 600;
  color: #555;
  transition: all 0.3s ease;
  white-space: nowrap; /* Prevent tab text from wrapping */
  line-height: 1.2; /* Adjust line-height to help with vertical space */
}

.tab-button:hover:not(.active) {
  background-color: #e0e0e0;
  color: #333;
}

.tab-button.active {
  background-color: #FF8A08; /* Active tab color */
  color: white;
  border-color: #FF8A08;
  padding-bottom: calc(0.8rem + 2px); /* Compensate for removed border-bottom */
  margin-bottom: -2px; /* Align with border-bottom of .qr-tabs */
}

/* Tab Content & Form Elements - Adjusted spacing */
.qr-form-content {
    background-color: #fdfdfd;
    border: 1px solid #eee;
    border-top: none;
    border-radius: 0 0 8px 8px;
    padding: 1.5rem; /* Adjusted padding */
    margin-bottom: 1.5rem; /* Consistent margin below form content */
    text-align: left;
    box-shadow: inset 0 0 5px rgba(0,0,0,0.02);
}
.tab-content {
  display: none;
  padding: 0; /* Padding handled by qr-form-content */
}

.tab-content.active {
  display: block;
}

label {
  display: block;
  margin-bottom: 0.5rem;
  font-weight: 600;
  color: #444;
  margin-top: 1rem; /* Standard margin for labels */
}

textarea,
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="url"],
input[type="password"], /* Added for Wi-Fi */
input[type="datetime-local"], /* Added for Event */
input[type="number"], /* Added for Payment amount */
select {
  width: 100%;
  padding: 0.8rem;
  margin-bottom: 1rem;
  font-size: 1rem;
  border: 1px solid #ddd;
  border-radius: 6px;
  box-sizing: border-box; /* Include padding in width */
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

textarea:focus,
input[type="text"]:focus,
input[type="email"]:focus,
input[type="tel"]:focus,
input[type="url"]:focus,
input[type="password"]:focus,
input[type="datetime-local"]:focus,
input[type="number"]:focus,
select:focus {
    border-color: #FF8A08; /* Orange focus color */
    box-shadow: 0 0 0 3px rgba(255, 138, 8, 0.2);
    outline: none;
}


/* Design Settings - Fixed alignment and color picker styling */
.qr-design-settings {
    background-color: #fdfdfd;
    border: 1px solid #eee;
    border-radius: 8px;
    padding: 1.5rem; /* Adjusted padding */
    margin-top: 1.5rem; /* Space from form content */
    margin-bottom: 1.5rem; /* Space before actions */
    text-align: left;
    box-shadow: inset 0 0 5px rgba(0,0,0,0.02);
}

.qr-design-settings h3 {
    font-size: 1.4rem;
    color: #333;
    margin-bottom: 1rem; /* Reduced margin below heading */
    text-align: left;
}

.qr-design-settings .setting-group {
    display: flex;
    flex-wrap: nowrap; /* Force size and colors into one row */
    gap: 20px; /* Space between size and colors */
    margin-bottom: 1rem; /* Space below this group */
    align-items: flex-start; /* Align items to the top for consistent vertical alignment */
}

/* QR Size: Allow it to take only the space its content needs */
.qr-design-settings .setting-item {
    flex: 0 0 auto; /* Don't grow, don't shrink, take auto width */
    min-width: 0;
}

.qr-design-settings .setting-item label {
    margin-top: 0; /* Remove top margin for labels within setting-group */
    margin-bottom: 0.5rem; /* Keep some space below label */
}
.qr-design-settings .setting-item select,
.qr-design-settings .setting-item input[type="text"],
.qr-design-settings .setting-item input[type="email"],
.qr-design-settings .setting-item input[type="tel"],
.qr-design-settings .setting-item input[type="url"],
.qr-design-settings .setting-item textarea {
    margin-bottom: 0; /* Remove bottom margin for inputs within setting-group */
}


/* Gradient Colors: Flex to fill the remaining space */
.qr-design-settings .setting-item.colors {
    display: flex;
    flex-direction: column; /* Stack label and color inputs vertically */
    align-items: flex-start; /* Align label and color inputs to the left */
    flex-grow: 1; /* Allow it to grow and fill remaining space */
    min-width: 150px; /* Ensure a minimum width */
}
.qr-design-settings .setting-item.colors .color-inputs {
    display: flex;
    gap: 10px;
    width: 100%; /* Ensure color inputs take full width of their container */
}


/* Specific styling for color inputs to ensure they render correctly */
input[type="color"] {
    /* Reset default browser appearance to ensure consistent styling */
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;

    flex: 1; /* Allow color pickers to take equal space within their group */
    height: 40px; /* Make color picker larger */
    vertical-align: middle;
    border: 1px solid #ddd; /* Add border */
    border-radius: 5px;
    padding: 0; /* No internal padding */
    cursor: pointer;
    box-shadow: inset 0 1px 3px rgba(0,0,0,0.05);
    background-color: #f0f0f0; /* Default background for empty state */
    box-sizing: border-box; /* Include padding/border in size */
}

/* Ensure focus state is visible */
input[type="color"]:focus {
    border-color: #FF8A08;
    box-shadow: 0 0 0 3px rgba(255, 138, 8, 0.2);
    outline: none;
}


/* Input file style */
input[type="file"] {
    width: 100%;
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 0.6rem;
    font-size: 0.95rem;
    background-color: #f9f9f9;
    box-sizing: border-box;
    margin-top: 1rem; /* Add some space above file input */
}
input[type="file"]::-webkit-file-upload-button {
    background-color: #FF8A08;
    color: white;
    border: none;
    padding: 0.5rem 1rem;
    border-radius: 20px;
    cursor: pointer;
    font-size: 0.9rem;
    font-weight: 500;
    margin-right: 10px;
    transition: background-color 0.2s ease;
}
input[type="file"]::file-selector-button { /* Standard property for cross-browser */
    background-color: #FF8A08;
    color: white;
    border: none;
    padding: 0.5rem 1rem;
    border-radius: 20px;
    cursor: pointer;
    font-size: 0.9rem;
    font-weight: 500;
    margin-right: 10px;
    transition: background-color 0.2s ease;
}
input[type="file"]::file-selector-button:hover {
    background-color: #e67e22;
}

/* Buttons */
.qr-actions {
  display: flex;
  justify-content: center;
  gap: 1rem;
  margin-top: 2rem;
  flex-wrap: wrap;
}

button {
  padding: 0.9rem 1.8rem;
  font-size: 1.05rem;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  transition: background-color 0.3s ease;
  min-width: 150px;
}

button.generate { background: #0d6efd; color: white; }
button.generate:hover { background: #0b5ed7; }
button.download { background: #FF8A08; color: white; }
button.download:hover { background: #e57e07; }
button.clear { background: #dc3545; color: white; }
button.clear:hover { background: #bb2d3b; }

/* QR Preview Area */
.qr-preview-area {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start; /* Align content to the top within column */
  margin-top: 0; /* Adjust for column layout */
  border: 2px dashed #FF8A08;
  padding: 1.5rem;
  min-height: 400px; /* Ensure sufficient height for the right column */
  border-radius: 12px;
}

#qrCanvas {
  max-width: 100%;
  height: auto;
  display: block; /* Remove extra space below canvas */
}

#qrPlaceholder {
    font-size: 1.1rem;
    color: #888;
    margin-top: 20px;
}

/* Responsive Adjustments */
@media (max-width: 992px) { /* Breakpoint for stacking columns */
  .qr-tool-wrapper {
    flex-direction: column; /* Stack columns vertically */
    gap: 2rem; /* Gap between stacked columns */
    align-items: center; /* Center stacked columns */
  }
  .input-column,
  .output-column {
    flex: none; /* Remove flex sizing */
    width: 100%; /* Take full width */
    max-width: 650px; /* Maintain max-width for content */
    padding: 1.5rem;
    min-width: auto; /* Remove minimum width */
  }
  .output-column {
    min-height: 350px; /* Less height when stacked */
  }
  .qr-tabs {
    flex-wrap: wrap; /* Allow tabs to wrap on smaller screens if they overflow */
    justify-content: center; /* Center tabs when wrapped */
    gap: 0.5rem; /* Slightly larger gap for tabs when wrapping */
  }
  .tab-button {
    font-size: 0.9rem;
    padding: 0.7rem 1rem;
    flex-grow: 0; /* Allow auto-sizing when wrapping */
    width: auto; /* Auto width when wrapping */
  }
  .qr-actions button {
    width: 100%;
    margin-bottom: 10px;
  }
}

@media (max-width: 768px) {
  .qr-tabs {
    flex-direction: column; /* Stack tabs vertically */
  }
  .tab-button {
    width: 100%;
    border-radius: 8px; /* Full rounded corners for stacked tabs */
    border-bottom: 1px solid #ddd; /* Ensure border for each stacked tab */
  }
  .tab-button.active {
    margin-bottom: 0; /* Remove negative margin when stacked */
    border-bottom: 1px solid #FF8A08; /* Keep active border */
  }
  .qr-form-content, .qr-design-settings {
      border-radius: 8px; /* Full rounded corners if tabs are stacked */
      border-top: 1px solid #eee; /* Add back top border if tabs are stacked */
  }
  .qr-design-settings .setting-group {
      flex-direction: column; /* Stack size and colors on smaller screens */
      align-items: stretch; /* Stretch items to fill width */
      gap: 15px; /* Adjust gap for stacking */
  }
  .qr-design-settings .setting-item {
      min-width: unset; /* Remove min-width when stacked */
      width: 100%;
  }
  .qr-design-settings .setting-item.colors {
      flex-direction: row; /* Keep color pickers side by side if possible */
      gap: 10px;
      flex-wrap: wrap; /* Allow colors to wrap if too small */
  }
  .qr-design-settings .setting-item.colors input[type="color"] {
    width: auto; /* Allow natural width */
    flex-grow: 1; /* Grow to fill space */
  }
}

@media (max-width: 480px) {
  #qr-tool-container {
    padding: 1rem;
  }
  h2 {
    font-size: 1.8rem;
  }
  textarea, input[type="text"], input[type="email"], input[type="tel"], input[type="url"], select {
    font-size: 0.9rem;
    padding: 0.6rem;
  }
  .qr-actions button {
    width: 100%;
    margin-bottom: 10px;
  }
}