/* ---------- Light Mode Styles (Default) ---------- */
body {
  background-color: #e0e0e0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100vh;
  margin: 0;
  font-family: Arial, sans-serif;
  transition: background 0.3s, color 0.3s;
}

/* Dark/Light toggle button */
#modeToggle {
    position: absolute;   
    top: 20px;
    right: 20px;        
    padding: 10px 20px;
    border: none;
    border-radius: 20px;
    background: #3498db;
    color: white;
    font-weight: bold;
    cursor: pointer;
    box-shadow: 4px 4px 10px rgba(0,0,0,0.2);
    transition: background 0.3s ease;
    z-index: 1000;     
}

#modeToggle:hover {
    background: #217dbb;
}


.calculator-body {
  width: 340px;
  padding: 25px;
  border-radius: 30px;
  background-color: #e0e0e0;
  box-shadow: 20px 20px 60px #bebebe,
              -20px -20px 60px #ffffff;
}

.display {
  width: 100%;
  height: 90px;
  border: none;
  background: #e0e0e0;
  border-radius: 15px;
  font-size: 3em;
  text-align: right;
  padding: 0 15px;
  margin-bottom: 25px;
  color: #333;
  box-shadow: inset 5px 5px 10px #bebebe,
              inset -5px -5px 10px #ffffff;
}

.buttons-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 15px;
}

.btn {
  height: 70px;
  border: none;
  border-radius: 20px;
  background: #e0e0e0;
  font-size: 1.5em;
  font-weight: 600;
  color: #333;
  cursor: pointer;
  box-shadow: 6px 6px 12px #bebebe,
              -6px -6px 12px #ffffff;
  transition: all 0.2s ease-in-out;
}

.btn:active {
  box-shadow: inset 4px 4px 8px #bebebe,
              inset -4px -4px 8px #ffffff;
  font-size: 1.45em;
}

.primary-op {
  background: #ff5e3a;
  color: white;
  box-shadow: 6px 6px 12px #e05232,
              -6px -6px 12px #ff6a48;
}

.primary-op:active {
  box-shadow: inset 4px 4px 8px #d44d2d,
              inset -4px -4px 8px #ff7350;
}

.zero-btn {
  grid-column: span 2;
}
.equal-btn {
  grid-column: span 1;
}
.dot-btn {
  grid-column: span 1;
}

/* ---------- Dark Mode Styles ---------- */
body.dark {
  background-color: #1e1e1e;
  color: #f1f1f1;
}

body.dark .calculator-body {
  background-color: #2b2b2b;
  box-shadow: 20px 20px 60px #111,
              -20px -20px 60px #333;
}

body.dark .display {
  background: #2b2b2b;
  color: #f1f1f1;
  box-shadow: inset 5px 5px 10px #111,
              inset -5px -5px 10px #333;
}

body.dark .btn {
  background: #2b2b2b;
  color: #f1f1f1;
  box-shadow: 6px 6px 12px #111,
              -6px -6px 12px #333;
}

body.dark .btn:active {
  box-shadow: inset 4px 4px 8px #111,
              inset -4px -4px 8px #333;
}

body.dark .primary-op {
  background: #3498db;
  color: white;
  box-shadow: 6px 6px 12px #1e5f8c,
              -6px -6px 12px #3fadf4;
}

body.dark .primary-op:active {
  box-shadow: inset 4px 4px 8px #144c70,
              inset -4px -4px 8px #44b8ff;
}