:root {
/* Background colors */
--bg-apple-green: #8DB600;      /* Fresh Apple */
--bg-carrot-orange: #FF8800;    /* Carrot */
--bg-tomato-red: #FF6347;       /* Tomato */
--bg-lemon-yellow: #FFD700;     /* Lemon */
--bg-eggplant-purple: #614051;  /* Eggplant */
--bg-chocolate-brown: #7B3F00;  /* Dark Chocolate */
--bg-avocado-green: #568203;    /* Avocado */
--bg-salmon-pink: #FA8072;      /* Salmon */
--bg-wheat-beige: #F5DEB3;      /* Wheat */
--bg-blueberry-blue: #4F86F7;   /* Blueberry */
/* Background colors - Pizza */
--bg-pizza-red: #FF4500;       /* Pizza Sauce Red */
--bg-cheese-yellow: #FFD700;   /* Cheese Yellow */
--bg-dough-beige: #F5DEB3;     /* Dough Beige */
--bg-pepper-green: #32CD32;    /* Pepper Green */
--bg-olive-black: #3B3B3B;     /* Olive Black */
--bg-mushroom-tan: #D2B48C;    /* Mushroom Tan */
--bg-tomato-red: #FF6347;      /* Tomato Red */
--bg-chili-red: #E32636;       /* Chili Red */
--bg-onion-purple: #800080;    /* Onion Purple */
--bg-basil-green: #228B22;     /* Basil Green */
/* Text colors */
--text-apple-green: #4B6000;      /* Darker Apple for text */
--text-carrot-orange: #B35900;    /* Darker Carrot for text */
--text-tomato-red: #B22222;       /* Darker Tomato for text */
--text-lemon-yellow: #A68A00;     /* Darker Lemon for text */
--text-eggplant-purple: #402B34;  /* Darker Eggplant for text */
--text-chocolate-brown: #4F2B00;  /* Darker Chocolate for text */
--text-avocado-green: #3A5502;    /* Darker Avocado for text */
--text-salmon-pink: #B25A54;      /* Darker Salmon for text */
--text-wheat-beige: #C0A583;      /* Darker Wheat for text */
--text-blueberry-blue: #2B4E8F;   /* Darker Blueberry for text */
/* Text colors - Pizza */
--text-pizza-red: #8B0000;       /* Darker Pizza Red for text */
--text-cheese-yellow: #A68A00;   /* Darker Cheese for text */
--text-dough-beige: #C0A583;     /* Darker Dough for text */
--text-pepper-green: #006400;    /* Darker Pepper Green for text */
--text-olive-black: #1C1C1C;     /* Darker Olive for text */
--text-mushroom-tan: #8B7355;    /* Darker Mushroom for text */
--text-tomato-red: #B22222;      /* Darker Tomato for text */
--text-chili-red: #B22222;       /* Darker Chili Red for text */
--text-onion-purple: #4B0082;    /* Darker Onion for text */
--text-basil-green: #006400;     /* Darker Basil for text */
}
/* Background color classes */
.bg-apple-green { background-color: var(--bg-apple-green); }
.bg-carrot-orange { background-color: var(--bg-carrot-orange); }
.bg-tomato-red { background-color: var(--bg-tomato-red); }
.bg-lemon-yellow { background-color: var(--bg-lemon-yellow); }
.bg-eggplant-purple { background-color: var(--bg-eggplant-purple); }
.bg-chocolate-brown { background-color: var(--bg-chocolate-brown); }
.bg-avocado-green { background-color: var(--bg-avocado-green); }
.bg-salmon-pink { background-color: var(--bg-salmon-pink); }
.bg-wheat-beige { background-color: var(--bg-wheat-beige); }
.bg-blueberry-blue { background-color: var(--bg-blueberry-blue); }
/* Text color classes */
.text-apple-green { color: var(--text-apple-green)!important; }
.text-carrot-orange { color: var(--text-carrot-orange)!important; }
.text-tomato-red { color: var(--text-tomato-red)!important; }
.text-lemon-yellow { color: var(--text-lemon-yellow)!important; }
.text-eggplant-purple { color: var(--text-eggplant-purple)!important; }
.text-chocolate-brown { color: var(--text-chocolate-brown)!important; }
.text-avocado-green { color: var(--text-avocado-green)!important; }
.text-salmon-pink { color: var(--text-salmon-pink)!important; }
.text-wheat-beige { color: var(--text-wheat-beige)!important; }
.text-blueberry-blue { color: var(--text-blueberry-blue)!important; }
/* Button classes */
.btn-max, .input-max, .textarea {
  padding: 5px 20px;
  margin: 5px 0;
  cursor: pointer;
}
.btn-apple-green {
  background-color: var(--bg-apple-green);
  color: white;
  border: 2px solid var(--bg-apple-green);
}
.btn-carrot-orange {
  background-color: var(--bg-carrot-orange);
  color: white;
  border: 2px solid var(--bg-carrot-orange);
}
.btn-tomato-red {
  background-color: var(--bg-tomato-red);
  color: white;
  border: 2px solid var(--bg-tomato-red);
}
.btn-lemon-yellow {
  background-color: var(--bg-lemon-yellow);
  color: white;
  border: 2px solid var(--bg-lemon-yellow);
}
.btn-eggplant-purple {
  background-color: var(--bg-eggplant-purple);
  color: white;
  border: 2px solid var(--bg-eggplant-purple);
}
.btn-chocolate-brown {
  background-color: var(--bg-chocolate-brown);
  color: white;
  border: 2px solid var(--bg-chocolate-brown);
}
.btn-avocado-green {
  background-color: var(--bg-avocado-green);
  color: white;
  border: 2px solid var(--bg-avocado-green);
}
.btn-salmon-pink {
  background-color: var(--bg-salmon-pink);
  color: white;
  border: 2px solid var(--bg-salmon-pink);
}
.btn-wheat-beige {
  background-color: var(--bg-wheat-beige);
  color: black;
  border: 2px solid var(--bg-wheat-beige);
}
.btn-blueberry-blue {
  background-color: var(--bg-blueberry-blue);
  color: white;
  border: 2px solid var(--bg-blueberry-blue);
}
/* Shared styles for buttons and inputs */
button, input[type="text"], input[type="email"], input[type="password"], textarea, .textarea {
  font-family: 'Arial', sans-serif;
  font-size: 16px;
  border-radius: 6px;
  border: none;
  outline: none;
  box-sizing: border-box;
  transition: all 0.3s ease;
}
/* Base button style */
.btn-max {
  font-size: 16px;
  font-weight: bold;
  border-radius: 8px;
  cursor: pointer;
  display: inline-block;
  text-align: center;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);  /* Subtle shadow for depth */
  transition: background-color 0.3s ease, color 0.3s ease, transform 0.2s ease;
}
.btn-max:hover {
  transform: scale(1.03);  /* Slight scale effect on hover */
}
.btn-max:focus {
  outline: 3px solid #333;  /* High-contrast focus state */
  outline-offset: 2px;
}
.btn-max:disabled {
  background-color: #ccc;
  color: #666;
  cursor: not-allowed;
  box-shadow: none;
}
/* Add similar classes for other colors... */
/* Input field styles */
input, textarea, .textarea {
  border: 2px solid #ccc;
  background-color: #f9f9f9;
  width: 100%;
  border-radius: 8px;
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1);
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}
input:focus, textarea:focus, .textarea:focus {
  border-color: var(--bg-tomato-red);
  box-shadow: 0 0 5px rgba(255, 69, 0, 0.5);
  outline: none;
}
input:disabled, textarea:disabled, .textarea:disabled {
  background-color: #eee;
  cursor: not-allowed;
}
input::placeholder, textarea::placeholder, .textarea::placeholder {
  color: #999;
}
/* Example error state for input */
input.error {
  border-color: #ff4c4c;
  background-color: #ffe6e6;
}
input.error:focus {
  box-shadow: 0 0 5px rgba(255, 76, 76, 0.7);
}
/* Accessible form label */
label {
  font-weight: bold;
  margin-bottom: 8px;
  display: block;
  cursor: pointer;
}
/* Shared styles for checkboxes and radio buttons */
input[type="checkbox"], input[type="radio"] {
  position: relative;
  width: 20px;
  height: 20px;
  appearance: none;
  background-color: #f0f0f0;
  border: 2px solid #ccc;
  border-radius: 4px; /* Use this for checkboxes */
  margin-right: 10px;
  cursor: pointer;
  transition: background-color 0.3s ease, border-color 0.3s ease;
  display: inline-block;
  vertical-align: middle;
}
input[type="radio"] {
  border-radius: 50%; /* Circular shape for radio buttons */
}
input[type="checkbox"]:checked, input[type="radio"]:checked {
  background-color: var(--bg-apple-green); /* Change background color when checked */
  border-color: var(--bg-apple-green);
}
input[type="checkbox"]:focus, input[type="radio"]:focus {
  outline: none;
  box-shadow: 0 0 5px rgba(0, 128, 0, 0.5); /* Greenish focus shadow */
}
/* Custom checkmark for checkbox */
input[type="checkbox"]:checked::before {
  content: '\2714'; /* Unicode checkmark */
  position: absolute;
  left: 4px;
  top: 0;
  font-size: 16px;
  color: white;
}
/* Custom dot for radio button */
input[type="radio"]:checked::before {
  content: '';
  position: absolute;
  top: 3px;
  left: 3px;
  width: 10px;
  height: 10px;
  background-color: white;
  border-radius: 50%;
}
/* Select dropdown styling */
select {
  width: 100%;
  font-size: 16px;
  border: 2px solid #ccc;
  border-radius: 8px;
  background-color: #f9f9f9;
  cursor: pointer;
  appearance: none; /* Remove default arrow */
  background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 4 5"%3E%3Cpath fill="%23666" d="M2 0L0 2h4zM0 3l2 2 2-2z"/%3E%3C/svg%3E');
  background-repeat: no-repeat;
  background-position: right 10px top 50%;
  background-size: 12px;
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}
select:focus {
  border-color: var(--bg-carrot-orange);
  box-shadow: 0 0 5px rgba(255, 165, 0, 0.5);
  outline: none;
}
select:disabled {
  background-color: #eee;
  cursor: not-allowed;
}
/* Base styles for body text */
body, .text {
  font-family: 'Arial', sans-serif;
  font-size: 16px;
  line-height: 1.5;
  color: var(--text-olive-black); /* Dark color for contrast */
}
/* Headers - Responsive sizes */
h1 {
  font-family: 'Arial', sans-serif;
  font-size: 36px;
  line-height: 1.2;
  font-weight: bold;
/*   color: #222; */
margin-bottom: 20px;
}
h2 {
  font-family: 'Arial', sans-serif;
  font-size: 32px;
  line-height: 1.3;
  font-weight: bold;
/*   color: #222; */
margin-bottom: 18px;
}
h3 {
  font-family: 'Arial', sans-serif;
  font-size: 28px;
  line-height: 1.4;
  font-weight: bold;
/*   color: #222; */
margin-bottom: 16px;
}
h4 {
  font-family: 'Arial', sans-serif;
  font-size: 24px;
  line-height: 1.4;
  font-weight: bold;
/*   color: #333; */
margin-bottom: 14px;
}
/* Paragraphs */
p {
  font-size: 16px;
  line-height: 1.5;
/*   color: #444; */
margin-bottom: 20px;
}
/* Links */
a {
/*   color: var(--bg-carrot-orange);  */
/* Match with button color scheme */
text-decoration: none;
}
a:hover, a:focus {
  text-decoration: underline;
}
/* Adjustments for smaller screens */
@media (max-width: 768px) {
  h1 { font-size: 30px; }
  h2 { font-size: 26px; }
  h3 { font-size: 24px; }
  h4 { font-size: 20px; }
}
.textarea {
  display: block;
  width: 100%;
  overflow: hidden;
  resize: both;
/*   min-height: 40px; */
line-height: 1rem;
}
.textarea[contenteditable]:empty::before {
  content: "Mensagem do pedido será montado aqui";
  color: gray;
}
/* Background color classes */
.bg-pizza-red { background-color: var(--bg-pizza-red); }
.bg-cheese-yellow { background-color: var(--bg-cheese-yellow); }
.bg-dough-beige { background-color: var(--bg-dough-beige); }
.bg-pepper-green { background-color: var(--bg-pepper-green); }
.bg-olive-black { background-color: var(--bg-olive-black); }
.bg-mushroom-tan { background-color: var(--bg-mushroom-tan); }
.bg-tomato-red { background-color: var(--bg-tomato-red); }
.bg-chili-red { background-color: var(--bg-chili-red); }
.bg-onion-purple { background-color: var(--bg-onion-purple); }
.bg-basil-green { background-color: var(--bg-basil-green); }
/* Text color classes */
.text-pizza-red { color: var(--text-pizza-red) !important; }
.text-cheese-yellow { color: var(--text-cheese-yellow) !important; }
.text-dough-beige { color: var(--text-dough-beige) !important; }
.text-pepper-green { color: var(--text-pepper-green) !important; }
.text-olive-black { color: var(--text-olive-black) !important; }
.text-mushroom-tan { color: var(--text-mushroom-tan) !important; }
.text-tomato-red { color: var(--text-tomato-red) !important; }
.text-chili-red { color: var(--text-chili-red) !important; }
.text-onion-purple { color: var(--text-onion-purple) !important; }
.text-basil-green { color: var(--text-basil-green) !important; }
/* Button classes */
.btn-max, .input-max, .textarea {
  padding: 8px 16px;
  margin: 6px 0;
  cursor: pointer;
  border-radius: 4px;
}
.btn-pizza-red {
  background-color: var(--bg-pizza-red);
  color: white;
  border: 2px solid var(--bg-pizza-red);
}
.btn-cheese-yellow {
  background-color: var(--bg-cheese-yellow);
  color: black;
  border: 2px solid var(--bg-cheese-yellow);
}
.btn-dough-beige {
  background-color: var(--bg-dough-beige);
  color: black;
  border: 2px solid var(--bg-dough-beige);
}
.btn-pepper-green {
  background-color: var(--bg-pepper-green);
  color: black;
  border: 2px solid var(--bg-pepper-green);
}
.btn-olive-black {
  background-color: var(--bg-olive-black);
  color: black;
  border: 2px solid var(--bg-olive-black);
}
.btn-mushroom-tan {
  background-color: var(--bg-mushroom-tan);
  color: black;
  border: 2px solid var(--bg-mushroom-tan);
}
.btn-tomato-red {
  background-color: var(--bg-tomato-red);
  color: black;
  border: 2px solid var(--bg-tomato-red);
}
.btn-chili-red {
  background-color: var(--bg-chili-red);
  color: black;
  border: 2px solid var(--bg-chili-red);
}
.btn-onion-purple {
  background-color: var(--bg-onion-purple);
  color: black;
  border: 2px solid var(--bg-onion-purple);
}
.btn-basil-green {
  background-color: var(--bg-basil-green);
  color: black;
  border: 2px solid var(--bg-basil-green);
}