@import url("https://fonts.googleapis.com/css2?family=Cairo:wght@200..1000&display=swap");

/* ================================================
   Global Reset
   ================================================ */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* Remove number input spinner (all browsers) */
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

input[type="number"] {
  -moz-appearance: textfield;
}

/* Reset paragraph styles */
p {
  all: unset;
}

h5 {
  font-size: 15px;
}

/* ================================================
   Global Styles
   ================================================ */
:root {
  --primary-color: rgb(39, 174, 96);
  --secondary-color: rgb(22, 160, 133);
  --normal-text: rgb(52, 73, 94);
}

html {
  direction: rtl;
}

body {
  font-family: "Cairo", sans-serif;
  transition: background-color 0.3s, color 0.3s;
}

/* ================================================
   Utility Classes
   ================================================ */
.primary-color {
  color: var(--primary-color);
}

.secondary-color {
  color: var(--secondary-color);
}

.text-color {
  color: var(--normal-text);
}

.primary-background {
  background-color: var(--primary-color);
}

.secondary-background {
  background-color: var(--secondary-color);
}

.nav-link:hover {
  color: var(--secondary-color);
}

button {
  padding: 1rem 1rem; /* Use rem for scalability */
  transition: background-color 0.3s; /* Add smooth hover effect */
}

button:hover {
  background-color: var(--primary-color);
}

input {
  border: 2px solid var(--secondary-color);
  opacity: 0.6;
  padding: 0.2rem 0.7rem; /* Use consistent padding */
  border-radius: 4px; /* Add subtle rounding for aesthetics */
}

/* ================================================
   Component Styles
   ================================================ */
.openSource * {
  font-size: 0.9375rem; /* Use rem for consistency (15px) */
}

.mainApp {
  min-height: calc(100vh - 106px);
}

.copyrights {
  height: 50px;
  display: flex;
  justify-content: center;
  align-items: center; /* Center align content */
}

table {
  display: none; /* Consider using `visibility: hidden` if you plan to show it later */
}

#amount {
  color: var(--primary-color);
}

#wrong {
  background-color: #fddfdf;
  padding: 1rem;
  margin-top: 2rem;
  border-radius: 10px;
  display: none;
}