/* GLOBAL FONT SETTINGS */
html, body, input, button, textarea, select {
    font-family: "Arial", sans-serif; /* Force a consistent font everywhere */
    font-size: 115%;                  /* 15% bigger text overall */
    color: #eaeaea;
    box-sizing: border-box;
  }
  
  /* Placeholder text also inherits the same font & color scheme */
  ::-webkit-input-placeholder {
    color: #bcbcbc;
    font-family: "Arial", sans-serif;
  }
  :-ms-input-placeholder {
    color: #bcbcbc;
    font-family: "Arial", sans-serif;
  }
  ::placeholder {
    color: #bcbcbc;
    font-family: "Arial", sans-serif;
  }
  
  /* Dark background */
  body {
    margin: 20px;
    background-color: #2e2e2e; /* Dark gray background */
    /*background: url('sp.jpeg') no-repeat center center fixed;
    background-size: cover;
    background-attachment: fixed; /* Keeps the image fixed in place while scrolling */
    background-color: #2e2e2e;    /* Fallback color if the image fails to load */
  }
  
  /* HEADINGS */
  h1 {
    margin-bottom: 20px;
    color: #ffffff;
    text-align: center;              /* Center the main title */
    font-size: 2rem;                 /* Larger font size for emphasis */
    font-weight: 700;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.3); /* Subtle text shadow */
  }
  
  /* TOGGLE BUTTONS (Basic, Advanced, Super) */
  #calculatorOptions {
    display: flex;
    gap: 10px;
    margin-bottom: 20px;
  }
  #calculatorOptions button {
    background-color: #4b4b4b; 
    color: #fff;
    border: none;
    border-radius: 25px;               /* Rounder corners for a modern look */
    padding: 10px 18px;
    cursor: pointer;
    transition: background-color 0.3s ease, box-shadow 0.3s ease;
    font-size: 100%; 
    box-shadow: 0 3px 6px rgba(0,0,0,0.2);
  }
  #calculatorOptions button:hover {
    background-color: #616161; 
    box-shadow: 0 4px 8px rgba(0,0,0,0.3);
  }
  
  /* HIDING ELEMENTS */
  .hidden {
    display: none;
  }
  
  /* Containers for multiple Basic/Advanced calculators */
  #basicCalculatorsContainer,
  #advancedCalculatorsContainer {
    margin-bottom: 20px;
  }
  
  /* CALCULATOR CONTAINER */
  .calc-container {
    display: flex;
    align-items: flex-start;
    gap: 20px;
    margin-bottom: 20px;
    border: 1px solid #666;
    padding: 20px;
    border-radius: 4px;
    background-color: #3a3a3a;
    box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.3);
  }
  
  .form-section {
    flex: 0 0 auto;
    min-width: 250px;
  }
  
  /* LABELS */
  .form-section label {
    display: block;
    margin-top: 10px;
    margin-bottom: 5px;
    color: #eaeaea;
  }
  
  /* INPUTS */
  .form-section input[type="number"],
  .form-section input[type="text"] {
    width: 100%;
    padding: 8px;
    margin-bottom: 5px;
    border: 1px solid #777;
    border-radius: 4px;
    background-color: #4a4a4a;
    color: #f0f0f0;
  }
  
  /* RESULTS SECTION */
  .results-section {
    flex: 1;
    border: 1px solid #666;
    padding: 10px;
    border-radius: 4px;
    background-color: #444444;
    box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
  }
  
  .results-section h2 {
    margin-top: 0;
    color: #ffffff;
  }
  
  .results-section ul {
    list-style-type: none;
    padding-left: 0;
    margin: 0;
  }
  
  .results-section li {
    margin-bottom: 5px;
    color: #eaeaea;
  }
  
  /* CARD BLOCKS (Advanced) */
  .card-block {
    margin-top: 10px;
    margin-bottom: 15px;
    border: 1px solid #777;
    padding: 10px;
    border-radius: 10px; /* More rounded corners for a modern look */
    background-color: #5c5c5c;
    box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.2);
  }
  
  /* Make the name input box more wide (already 100% width) */
  .card-block input[type="text"] {
    width: 100%;
  }
  
  /* ADVANCED RESULTS CONTAINER */
  .advanced-results-container {
    display: flex;
    gap: 20px;
    height: 100%;
  }
  
  .advanced-column {
    flex: 1;
    border: 1px solid #666;
    background-color: #4a4a4a;
    padding: 10px;
    border-radius: 4px;
    overflow: auto;
    box-shadow: 1px 1px 6px rgba(0, 0, 0, 0.3);
  }
  
  .results-section h2,
  .advanced-column h2 {
    margin-top: 0;
    color: #ffffff;       /* Same text color */
    font-size: 1.5rem;    /* Same size for both "Results:" and "Aggregated Results" */
    font-family: "Arial", sans-serif; /* Ensures same font */
    font-weight: 700;     /* Or whatever weight you prefer */
    text-shadow: 1px 1px 2px rgba(0,0,0,0.3);
  }
  
  /* Hide card columns by default if not used */
  .card1Column.hidden,
  .card2Column.hidden,
  .card3Column.hidden {
    display: none;
  }
  
  /* BUTTON STYLING */
  
  /* By default, style all buttons with a modern shape and shadow, 
     then override colors for specific classes. */
  button {
    font-size: 100%;
    border-radius: 25px;               /* Round shape for a modern style */
    padding: 10px 20px;
    border: none;
    transition: background-color 0.3s ease, box-shadow 0.3s ease;
    box-shadow: 0 3px 6px rgba(0,0,0,0.2);
    color: #fff;                       /* Default text color */
    margin-top: 10px;
    background-color: #777;           /* Default background for non-calc buttons */
  }
  button:hover {
    box-shadow: 0 4px 8px rgba(0,0,0,0.3);
  }
  
  /* Keep "Calculate" buttons green */
  .calculate-btn {
    background-color: #03b16e !important;
  }
  .calculate-btn:hover {
    background-color: #029a60 !important;
  }
  
  /* This ensures "Add Another" buttons 
     also keep the default (non-calc) color (#777 or #8d8d8d on hover). */