/* GLOBAL FONT SETTINGS */
html, body, input, button, textarea, select {
  font-family: "Arial", sans-serif; /* 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;
}

/* Modern Dark Background with a subtle gradient */
body {
  margin: 50px;
  /* A gentle gradient from #2c2c2c to #2e2e2e for a modern effect */
  background: linear-gradient(120deg, #2c2c2c, #2e2e2e);
  color: #eaeaea;
}

/* HEADINGS */
h1 {
  margin-bottom: 40px;
  color: #ffffff;
  text-align: center;
  font-size: 3rem;  /* Large headline for emphasis */
  font-weight: 700;
  text-shadow: 1px 1px 2px rgba(0,0,0,0.3);
}

/* TOGGLE BUTTONS (Basic, Advanced, Super) */
#calculatorOptions {
  display: flex;
  gap: 20px;
  margin-bottom: 20px;
  justify-content: center; /* Center the toggle buttons horizontally */
}

#calculatorOptions button {
  background-color: #3f3f3f; 
  color: #fff;
  border: none;
  border-radius: 25px;     /* Round corners for a modern look */
  padding: 12px 24px;
  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.3);
}

#calculatorOptions button:hover {
  background-color: #555555; 
  box-shadow: 0 4px 8px rgba(0,0,0,0.4);
}

/* 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-radius: 6px;
  background-color: #393939; /* Slightly lighter than the body gradient */
  box-shadow: 0 2px 10px rgba(0,0,0,0.4);
  padding: 20px;
}

/* FORM SECTION */
.form-section {
  flex: 0 0 auto;
  min-width: 250px;
}

/* LABELS */
.form-section label {
  display: block;
  margin-top: 10px;
  margin-bottom: 5px;
  color: #eaeaea;
  font-weight: 600; /* Slightly bolder for clarity */
}

/* INPUTS */
.form-section input[type="number"],
.form-section input[type="text"] {
  width: 100%;
  padding: 10px;
  margin-bottom: 8px;
  border: 1px solid #666;
  border-radius: 6px;
  background-color: #4a4a4a;
  color: #f0f0f0;
  transition: border 0.2s ease;
}

.form-section input[type="number"]:focus,
.form-section input[type="text"]:focus {
  outline: none;
  border: 1px solid #03b16e; /* Green highlight on focus */
}

/* RESULTS SECTION */
.results-section {
  flex: 1;
  border-radius: 6px;
  background-color: #444444;
  box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
  padding: 15px;
}

.results-section h2 {
  margin-top: 0;
  color: #ffffff;
  font-size: 1.5rem;
  font-weight: 700;
  text-shadow: 1px 1px 2px rgba(0,0,0,0.3);
}

.results-section ul {
  list-style-type: none;
  padding-left: 0;
  margin: 0;
}

.results-section li {
  margin-bottom: 6px;
  color: #eaeaea;
}

/* CARD BLOCKS (Advanced) */
.card-block {
  margin-top: 10px;
  margin-bottom: 15px;
  border: 1px solid #666;
  padding: 10px;
  border-radius: 8px; /* 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: 6px;
  overflow: auto;
  box-shadow: inset 0 0 4px rgba(0,0,0,0.3);
  transition: box-shadow 0.2s ease;
}

.advanced-column:hover {
  box-shadow: inset 0 0 6px rgba(0,0,0,0.4);
}

/* HEADINGS in .results-section and .advanced-column share styles */
.results-section h2,
.advanced-column h2 {
  margin-top: 0;
  color: #ffffff;
  font-size: 1.5rem;
  font-family: "Arial", sans-serif;
  font-weight: 700;
  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 (Global) */
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;
  margin-top: 10px;
  background-color: #777;
}

button:hover {
  box-shadow: 0 4px 8px rgba(0,0,0,0.3);
}

/* "Calculate" buttons remain green */
.calculate-btn {
  background-color: #03b16e !important;
}
.calculate-btn:hover {
  background-color: #029a60 !important;
}

/* "Add Another" buttons remain the default (#777) unless hovered */