/* ============================================================
   Project: Simple Calculator (v1.0)
   Author: Mohammadreza Shahbazi (M.SH)
   GitHub: https://github.com/Mohammadreza-Shahbazi-313
   LinkedIn: https://www.linkedin.com/in/mohammadreza-shahbazi-313sh/
   Telegram: https://t.me/STANsoSAD
   Email: eminemengland2000@gmail.com
   Year: 2025
   ============================================================ */

/* ----- Global Layout ----- */
body {
  font-family: cursive;
  background-color: #a6ac03;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 150px 0;
}
/* ----- Calculator Container ----- */
.calculator {
  font-family: cursive;
  background-color: #ffffff;
  padding: 35px;
  border-radius: 20px;
  width: 340px;
  text-align: center;


  box-shadow:
    0 10px 25px rgba(0, 0, 0, 0.30),
    0 5px 10px rgba(0, 0, 0, 0.15);


  transition: transform 0.2s ease, box-shadow 0.3s ease;
}

.calculator:hover {
  transform: translateY(-4px);
  box-shadow:
    0 16px 35px rgba(0, 0, 0, 0.35),
    0 8px 14px rgba(0, 0, 0, 0.20);
}

/* ----- Display Screen ----- */
#display {
  font-family: cursive;
  background-color: #c7c7c7;
  width: calc(100% - 33px);
  padding: 15px;
  font-size: 28px;
  border: 3px solid rgb(0, 0, 0);
  border-radius: 8px;
  margin-bottom: 20px;
  text-align: right;
}
/* ----- Button Container Grid ----- */
.button-container {
  font-family: cursive;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}
/* ----- General Button Styles ----- */
button {
  margin-bottom: 10px;
  font-family: cursive;
  padding: 11px;
  font-size: 26px;
  border: 2px solid rgb(255, 123, 0);
  border-radius: 7px;
  cursor: pointer;
  transition: background-color 0.3s, transform 0.2s;
  background-color: #007bff;
  color: white;
}
/* ----- Button Hover Effect ----- */
button:hover {
  background-color: #0056b3;
  transform: scale(1.1);
}
/* ----- Operator Button Styles ----- */
.operator {
  margin-bottom: 15px;
  font-family: cursive;
  background-color: #28a745;
}
/* ----- Operator Hover Effect ----- */
.operator:hover {
  background-color: #218838;
}
/* ----- Result Section ----- */
#result {
  font-family: cursive;
  margin-top: 15px;
  font-size: 28px;
  color: #333;
}

/* Button: Go to Version 2 */
.v2-button-container {
  margin-top: 15px;
  text-align: center;
}

.v2-btn {
  background-color: #ff8c00;
  border: 2px solid #cc6d00;
  font-size: 22px;
  padding: 10px 15px;
  border-radius: 7px;
  cursor: pointer;
  color: white;
  transition: 0.3s ease;
}

/* Hover effect */
.v2-btn:hover {
  background-color: #cc7000;
  transform: scale(1.1);
}