/* WhatsApp Icon Styling */
#whatsapp-icon-single-varient {
    font-size: 1.2em; /* Adjust the size (1.2em, 1.5em, etc.) */
    vertical-align: middle; /* Aligns the icon vertically with text */
    font-weight: 700;
    line-height: 1; /* Ensures proper alignment */
}


/* field placeholder styling */
textarea#order_description::placeholder,
input[type="text"]::placeholder,
input[type="number"]::placeholder {
  font-size: 0.9em; /* Smaller font size */
  color: #a0a0a0;  /* Muted color */
  opacity: 0.7;    /* Adjust transparency for a more muted effect */
}


/* display alert on top of other elements */
.alert-container {
  position: fixed; /* Makes it fixed at the top of the page */
  width: 100%; /* Full-width container */
  z-index: 9999; /* High z-index to stay above all other elements */
  padding: 1rem; /* Add some padding for spacing */
}


/* custom re-styling of alert class */
.alert {
  background-color: rgba(255, 255, 255, 0.9) !important; /* Transparent white background */
  border-radius: 10px !important; /* Rounded corners */
  padding: 15px; /* Internal spacing */
  font-weight: bold; /* Bold text for emphasis */
  box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1); /* Subtle shadow */
  border: 2px solid transparent; /* Default border */
}

/* Specific Text Colors for Alert Types */
.alert-danger {
  color: #d9534f !important; /* Danger red text */
  border-color: #f5c6cb !important; /* Light red border */
}

.alert-warning {
  color: #856404 !important; /* Warning amber text */
  border-color: #ffeeba !important; /* Light amber border */
}

.alert-success {
  color: #155724 !important; /* Success green text */
  border-color: #c3e6cb !important; /* Light green border */
}

.alert-info {
  color: #0c5460 !important; /* Info blue text */
  border-color: #bee5eb !important; /* Light blue border */
}


/* testing for hamburger menu area button */
/* .sidebar__toggle {
  background: rgba(255, 0, 0, 0.3); 
  outline: 1px solid red; 
  z-index: 1000; 
} */