/*
 * Stylesheet for Invisible Text Generator v1.2
 * Enhanced UI and multiple generator types
 */

/* General Tool Layout */
.invisible-text-container {
  max-width: 800px; /* Wider for more content */
  margin: 2rem auto;
  padding: 0; /* Remove padding, handle inside */
  background-color: transparent; /* Use page background */
  border-radius: 0;
  box-shadow: none;
}

.invisible-text-header {
  text-align: center;
  margin-bottom: 2rem;
}

.invisible-text-header h1 {
  font-size: 2.4rem;
  color: #2c3e50; /* Darker blue-grey */
  margin-bottom: 0.75rem;
}

.invisible-text-header p.subtitle {
  font-size: 1.15rem;
  color: #7f8c8d; /* Grey */
  max-width: 650px;
  margin: 0 auto 2rem auto;
  line-height: 1.6;
}

.tool-box {
  background-color: #ffffff;
  border: 1px solid #ecf0f1; /* Lighter border */
  border-radius: 12px;
  padding: 2rem 2.5rem; /* More padding */
  margin-bottom: 2rem;
  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.07);
}

.tool-title {
  text-align: center;
  font-size: 1.4rem;
  font-weight: 600;
  color: #34495e; /* Dark blue */
  margin-bottom: 2rem;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  padding-bottom: 0.75rem;
  border-bottom: 2px solid #3498db; /* Blue underline */
  display: inline-block; /* Fit content */
  margin-left: 50%;
  transform: translateX(-50%);
}

/* Step Styling */
.step {
  background-color: #f9fafb; /* Very light gray */
  padding: 1.5rem;
  margin-bottom: 1.5rem;
  border-radius: 8px;
  border: 1px solid #f1f3f5;
}

/* Combined Quantity/Output Step adjustments */
.quantity-output-step {
  /* Remove bottom margin if preview is directly below */
  margin-bottom: 0.5rem;
}

.step-title {
  font-size: 1.1rem;
  margin-bottom: 1.25rem;
  font-weight: 500;
  color: #34495e; /* Dark blue */
  display: flex;
  align-items: center;
}

/* Generator Selection */
/* .generator-options { ... } */
/* .generator-label { ... } */
/* .generator-label:hover { ... } */
/* .radio-custom { ... } */
/* .radio-custom::after { ... } */
/* .generator-label input[type="radio"]:checked ... { ... } */
/* .generator-label.generator-a ... { ... } */
/* .generator-label.generator-b ... { ... } */
/* .generator-label.generator-c ... { ... } */
/* .generator-name { ... } */

/* Quantity Control - Make slightly more compact */
.quantity-control {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1.5rem; /* Increased space before output field */
}

.quantity-input {
  width: 80px;
  height: 45px;
  text-align: center;
  font-size: 1.1rem;
  border: 1px solid #ced4da;
  border-radius: 6px;
  margin: 0 0.75rem;
  color: #495057;
  -moz-appearance: textfield;
  transition: background-color 0.2s ease;
}
.quantity-input::-webkit-outer-spin-button,
.quantity-input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.quantity-btn {
  width: 45px;
  height: 45px;
  background-color: #e74c3c; /* Red */
  color: white;
  border: none;
  border-radius: 6px;
  font-size: 1.5rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.2s ease;
}

.quantity-btn:hover {
  background-color: #c0392b; /* Darker Red */
}

/* Output Field & Visualization */
.output-field {
  width: 100%;
  min-height: 90px;
  border: 1px solid #dfe6e9;
  border-radius: 6px;
  padding: 0.75rem 1rem;
  margin-bottom: 1rem;
  background-color: #ffffff;
  position: relative;
  font-family: monospace;
  font-size: 1rem;
  line-height: 1.6;
  color: #7f8c8d; /* Visible text color (for U+2800/U+2002) */
  word-break: break-all;
  box-sizing: border-box;
  user-select: text; /* Allow selection for manual copy */
  transition: background-color 0.3s ease;
}

.output-field.output-type-A {
  background-color: rgba(46, 204, 113, 0.05);
} /* Light Green BG for Braille */
.output-field.output-type-C {
  background-color: rgba(230, 126, 34, 0.05);
} /* Light Orange BG for En Space */

/* Style for zero-width output message */
.zero-width-notice {
  color: #95a5a6; /* Grey */
  font-style: italic;
  font-family: sans-serif;
  font-size: 0.9rem;
  text-align: center;
  padding: 1rem;
}

/* Visual placeholders for width characters */
.char-placeholder {
  color: #bdc3c7; /* Light grey placeholder */
  user-select: none;
}

/* Copy Button & Success Message */
.copy-btn {
  display: block;
  width: 100%;
  padding: 0.8rem 1.5rem;
  background-color: #3498db; /* Blue */
  color: white;
  border: none;
  border-radius: 6px;
  font-size: 1.1rem;
  font-weight: 600;
  cursor: pointer;
  text-align: center;
  transition: background-color 0.2s ease;
}

.copy-btn:hover {
  background-color: #2980b9; /* Darker Blue */
}

.success-message {
  display: none;
  text-align: center;
  padding: 0.75rem 1rem;
  background-color: #2ecc71; /* Green */
  color: white;
  border-radius: 6px;
  margin-top: 1rem;
  font-weight: 500;
}

.success-message.visible {
  display: block;
  opacity: 1;
  animation: fadeOut 3s forwards;
}

@keyframes fadeOut {
  0% {
    opacity: 1;
  }
  80% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

/* Preview Area */
.preview-area {
  background-color: #ffffff;
  border: 1px dashed #dfe6e9;
  padding: 1rem;
  border-radius: 6px;
  font-size: 1rem;
  color: #555;
  overflow-wrap: break-word;
  word-wrap: break-word;
}
.preview-output {
  /* Background to highlight the inserted space */
  background-color: rgba(52, 152, 219, 0.1);
  outline: 1px dashed rgba(52, 152, 219, 0.3);
  margin: 0 2px;
}

/* Controls Footer */
.controls-footer {
  display: flex;
  justify-content: flex-end; /* Align reset to the right */
  margin-top: 1.5rem;
}

.reset-btn {
  background-color: #bdc3c7; /* Light grey */
  color: #fff;
  border: none;
  padding: 0.6rem 1.2rem;
  border-radius: 6px;
  font-size: 0.9rem;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.reset-btn:hover {
  background-color: #95a5a6; /* Darker grey */
}

/* Learn More Details Section */
/* .learn-more-details { ... } */
/* .learn-more-details h3 { ... } */
/* .learn-more-details ul { ... } */
/* .learn-more-details li { ... } */
/* .learn-more-details strong { ... } */

/* Close Learn More Button Styles */
/* .close-learn-more-btn { ... } */
/* .close-learn-more-btn:hover { ... } */

/* SEO Content Area */
.seo-content {
  margin-top: 2.5rem; /* More space */
  padding-top: 2rem;
  border-top: 1px solid #ecf0f1;
}
.seo-content h2 {
  font-size: 1.6rem; /* Larger headings */
  color: #2c3e50;
  margin-bottom: 1.25rem;
}
.seo-content h3 {
  font-size: 1.3rem;
  color: #34495e;
  margin-top: 1.75rem;
  margin-bottom: 0.85rem;
}
.seo-content p,
.seo-content li {
  color: #555;
  line-height: 1.7; /* More line spacing */
  font-size: 1rem;
}
.seo-content ul,
.seo-content ol {
  margin-left: 1.5rem;
  margin-bottom: 1.25rem;
}
.seo-content li {
  margin-bottom: 0.6rem;
}

/* Responsive Design */
@media (max-width: 768px) {
  .invisible-text-container {
    padding: 1rem; /* Adjust padding */
  }
  .tool-box {
    padding: 1.5rem;
  }
  /* .generator-options { ... } */
  .invisible-text-header h1 {
    font-size: 2rem;
  }
  .invisible-text-header p.subtitle {
    font-size: 1.1rem;
  }
}

@media (max-width: 480px) {
  .tool-box {
    padding: 1rem;
  }
  .step {
    padding: 1rem;
  }
  .quantity-input {
    width: 60px;
    height: 40px;
  }
  .quantity-btn {
    width: 40px;
    height: 40px;
    font-size: 1.3rem;
  }
  .copy-btn,
  .reset-btn {
    font-size: 1rem;
    padding: 0.7rem 1rem;
  }
}

/* ==========================================================================
   Layout
   ========================================================================== */
.invisible-text-page-layout {
  display: flex;
  gap: 2rem; /* Space between main content and sidebar */
  max-width: 1100px; /* Adjust overall max-width if needed */
  margin: 2rem auto;
  padding: 0 1rem; /* Add some padding to the sides */
}

.invisible-text-main-content {
  flex: 1; /* Takes up remaining space */
  min-width: 0; /* Prevents flex item overflow */
}

.related-tools-sidebar {
  width: 250px; /* Fixed width for the sidebar */
  flex-shrink: 0; /* Prevent sidebar from shrinking */
  position: sticky; /* Make it sticky */
  top: 20px; /* Sticky position offset from top */
  align-self: flex-start; /* Align to the top */
  height: fit-content; /* Only take height needed */
  max-height: calc(100vh - 40px); /* Prevent exceeding viewport */
  overflow-y: auto; /* Add scroll if content overflows */
  background-color: #f8f9fa;
  padding: 1.5rem;
  border-radius: 10px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
  border: 1px solid #e9ecef;
}

.related-tools-sidebar h3 {
  font-size: 1.2rem;
  color: #333;
  margin-bottom: 1rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid #dee2e6;
}

.related-tools-sidebar ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.related-tools-sidebar li {
  margin-bottom: 0.75rem;
}

.related-tools-sidebar a {
  color: #007bff;
  text-decoration: none;
  font-size: 0.95rem;
  transition: color 0.2s ease;
}

.related-tools-sidebar a:hover {
  color: #0056b3;
  text-decoration: underline;
}

/* ==========================================================================
   Main Tool Container Adjustment
   ========================================================================== */

/* Adjust the container within the main content area */
.invisible-text-container {
  max-width: 100%; /* Allow container to fill main content area */
  margin: 0 auto; /* Remove top/bottom margin if handled by layout */
  /* Keep other styles like padding, background, border-radius, box-shadow */
  padding: 2rem;
  background-color: #ffffff;
  border-radius: 12px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
}

/* ==========================================================================
   Responsive Adjustments for Layout
   ========================================================================== */

@media (max-width: 992px) {
  /* Adjust breakpoint as needed */
  .invisible-text-page-layout {
    flex-direction: column;
    gap: 1.5rem;
    padding: 0 0.5rem; /* Reduce side padding */
  }

  .related-tools-sidebar {
    width: 100%; /* Full width on smaller screens */
    position: static; /* Remove stickiness */
    max-height: none; /* Remove max height */
    order: -1; /* Move sidebar above main content */
    margin-bottom: 1.5rem;
  }

  .invisible-text-container {
    margin: 0 auto; /* Reset margin */
  }
}