/* --- JSON Input Section Styling (Originally from Block 2 in your file) --- */
/* These styles are specific to the manually added JSON input section.
   While some elements like buttons or error messages follow shared patterns,
   their specific instantiation and context here are tied to this input feature.
*/

/* Main container for the JSON input section */
/* This ID is targeted by JavaScript to show/hide the section.
   The HTML also has class="card", so it will inherit .card styles.
*/
#json-input-section {
    margin-top: 20px;
    margin-bottom: 25px;
    animation: fadeInUp 0.6s ease forwards; /* Animation defined in Global */
    /* display: none; */ /* Initially hidden via inline style in HTML, controlled by JS */
  }
  
  /* Optional: If #json-input-section needs specific card overrides:
  #json-input-section.card {
    border-color: var(--primary-light); // Example override
  }
  */
  
  #json-input-section h3 {
    /* Inherits .card h3 styling */
  }
  
  /* Container for the neumorphic textarea */
  .neumorph-input-container {
    margin-bottom: 20px; /* Space below the textarea before the button */
  }
  
  /* Styling for the JSON input textarea */
  .neumorph-textarea {
    width: 100%;
    min-height: 150px; /* Decent starting height for JSON input */
    padding: 12px 14px;
    border: 1px solid var(--border);
    border-radius: 8px;
    font-family: var(--font-heading); /* Open Sans for code-like input */
    font-size: 0.95rem;
    transition: all var(--transition-medium) ease;
    background-color: var(--card-bg);
    color: var(--text-medium);
    box-shadow:
      inset 2px 2px 4px var(--color-shadow-dark),
      inset -2px -2px 4px var(--color-shadow-light);
    resize: vertical; /* Allow users to resize it vertically */
  }
  
  .neumorph-textarea:focus {
    border-color: var(--primary); /* Highlight border on focus */
    box-shadow:
      0 0 0 3px var(--primary-shadow), /* Outer glow effect */
      inset 2px 2px 4px var(--color-shadow-dark),
      inset -2px -2px 4px var(--color-shadow-light);
    outline: none; /* Remove default browser outline */
  }
  
  /* Container for the button(s) below the textarea (e.g., "Calculate") */
  .button-container {
    display: flex;
    justify-content: flex-end; /* Aligns button(s) to the right */
  }
  
  /* The #calculate-button within this section uses the .unified-calculate-button
     shared component style, so its appearance is already defined there.
     If specific overrides for *this instance* of the button were needed:
     #json-input-section #calculate-button {
       background: linear-gradient(145deg, var(--color-blue), var(--color-blue-dark)); // Example
     }
  */
  
  
  /* --- Dynamic Error Message Popup Styling (from Block 2) --- */
  /* This error message is intended for dynamic feedback, like JSON parsing errors
     or success messages related to the JSON input section.
     It's a more interactive version than the static #errorMessage.
  */
  .error-message { /* This selector is also used by the static error message.
                      The JS creates a new div with this class + dynamic-error-popup.
                      The styles here are for the *fixed popup* version. */
    position: fixed;
    bottom: 20px;
    right: 20px;
    background: linear-gradient(145deg, var(--color-red-lighter), var(--color-red-light)); /* Default error appearance */
    color: var(--color-red-dark);
    padding: 16px 20px;
    border-radius: 12px;
    box-shadow:
      4px 4px 10px var(--color-shadow-dark),
      -4px -4px 10px var(--color-shadow-light);
    display: flex; /* Set by JS when shown */
    align-items: center;
    justify-content: space-between;
    max-width: 400px;
    z-index: 1001; /* Ensure it's above most other content, like loading overlay at 1000 */
    border: 1px solid rgba(170, 55, 76, 0.3); /* --color-red with opacity for border */
    animation: fadeInUp 0.3s ease forwards; /* Animation defined in Global */
    /* Note: JS will add/remove a class like 'dynamic-error-popup' or directly manipulate style.display */
  }
  
  /* Content wrapper inside the error message for icon and text */
  .error-message .error-content { /* Targeting children of .error-message specifically */
    display: flex;
    align-items: center;
    gap: 12px;
  }
  
  /* SVG icon styling within the error message */
  .error-message svg {
    color: var(--color-red); /* Default icon color for errors */
    flex-shrink: 0; /* Prevent icon from shrinking */
  }
  
  /* Dismiss button ('x') for the error message */
  .error-message .dismiss-error {
    background: none;
    border: none;
    color: var(--color-red); /* Matches error text color */
    font-size: 20px;
    cursor: pointer;
    padding: 0;
    margin-left: 15px;
    box-shadow: none; /* No neumorphic shadow for this simple button */
  }
  
  .error-message .dismiss-error:hover {
    color: var(--color-red-dark); /* Darken on hover */
  }
  
  /* Class for fade-out animation (applied by JS) */
  .error-message.fade-out { /* If JS adds a class for fading out */
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 0.3s ease, transform 0.3s ease;
  }
  
  /* Keyframe for fadeInUp (already defined globally, but relevant here) */
  /* fadeInUp animation available from ../shared-code/animations.css */