@import url("https://fonts.googleapis.com/css2?family=Outfit:wght@100..900&display=swap");
* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

/* light theme styles */
:root {
  --primary: #00ba7a;
  --secondary: #fbe41a;
  --lightsecondary: #fffdef;
  --light: #e4fff5;
}

/* width */
::-webkit-scrollbar {
  width: 8px;
}

/* Track */
::-webkit-scrollbar-track {
  background: #f1f1f1;
}

/* Handle */
::-webkit-scrollbar-thumb {
  background: gray;
  border-radius: 10px;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: #555;
}

.primary-btn {
  cursor: pointer;
  background: linear-gradient(135deg, var(--primary), var(--secondary));
  color: #000000;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  text-decoration: none;
}

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

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

.primary-color {
  color: var(--primary) !important;
}

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

body {
  font-family: "Outfit", sans-serif !important;
  background-color: #fbfffd !important;
}

.tip-system {
  max-width: 500px;
  height: 100vh;
  margin: 0 auto;
  background-color: #ffffff;
  border: 2px solid var(--primary);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.tip-system header .logo {
  width: 150px;
  height: 60px;
}
.tip-system header .logo img {
  -o-object-fit: cover;
     object-fit: cover;
}
.tip-system header .rating {
  background-color: #ffffff;
  position: absolute;
  right: 5px;
  bottom: 5px;
}
.tip-system header .rating i {
  color: rgb(255, 170, 0);
}
.tip-system header .profile-pic {
  width: 70px;
  height: 70px;
}
.tip-system header .profile-pic img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}
.tip-system .staff {
  overflow-y: auto;
}
.tip-system .staff-box {
  width: 150px;
  position: relative;
  flex: 0 1 31%;
  margin-bottom: 1rem;
  /* Hover effect */
  /* Selected (checked) styles */
}
.tip-system .staff-box .designation {
  font-size: 0.6rem;
}
.tip-system .staff-box input[type=radio] {
  display: none;
}
.tip-system .staff-box .staff-label {
  display: block;
  background: #fff;
  border: 2px solid transparent;
  border-radius: 1rem;
  padding: 0.3rem;
  cursor: pointer;
  transition: all 0.25s ease;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  display: flex;
  align-items: center;
  gap: 5px;
}
.tip-system .staff-box .staff-label img {
  width: 50px;
  height: 50px;
  -o-object-fit: cover;
     object-fit: cover;
  display: block;
  border-radius: 1rem;
}
.tip-system .staff-box .staff-label p {
  margin: 0.25rem 0;
  font-weight: 600;
}
.tip-system .staff-box .staff-label:hover {
  border-color: #ddd;
}
.tip-system .staff-box input[type=radio]:checked + .staff-label {
  border-color: var(--primary);
  background: linear-gradient(135deg, var(--light), var(--secondary));
  box-shadow: 0 6px 18px rgba(255, 217, 128, 0.25);
}
.tip-system .button-sec {
  -webkit-backdrop-filter: blur(6px);
          backdrop-filter: blur(6px);
  width: 100%;
  text-align: center;
  position: sticky;
  bottom: 0;
  left: 0;
  padding: 10px 0;
}

.tip-form .box {
  position: relative;
  flex: 1 1 25%;
  margin: 0.5rem;
}
.tip-form .box input[type=radio]:checked + label {
  background: linear-gradient(135deg, var(--primary), var(--secondary));
}
.tip-form .box label {
  width: 100%;
  height: 65px;
  padding: 15px;
  background-color: var(--lightsecondary);
  border: 1px solid var(--primary);
  font-size: 1.4rem;
  font-weight: 600;
}
.tip-form .box .btn:hover {
  background: var(--light);
}
.tip-form .custom-btn {
  background: var(--light);
  border: 1px solid var(--secondary);
  width: 100%;
  padding: 6px !important;
  transition: 0.3s all;
}
.tip-form .custom-btn:hover {
  background: linear-gradient(135deg, var(--primary), var(--secondary));
}
.tip-form .custom-btn.active {
  background: linear-gradient(135deg, var(--primary), var(--secondary));
}
.tip-form .custom-form {
  background-color: #ffffff;
}
.tip-form .custom-form input {
  border-color: var(--secondary);
  transition: 0.3s all;
  font-size: 1.2rem;
}
.tip-form .custom-form input:focus {
  box-shadow: 0px 3px 0px rgba(254, 180, 123, 0.4941176471);
}
.tip-form .check {
  display: none;
}

.form-button {
  bottom: 8px !important;
}

.rating-sec i {
  color: rgb(255, 170, 0);
}

.marquee {
  overflow: hidden;
  position: relative;
  white-space: nowrap;
  cursor: grab;
}

.marquee:active {
  cursor: grabbing;
}

.marquee-content {
  display: inline-flex;
  will-change: transform;
  gap: 10px;
}/*# sourceMappingURL=style.css.map */