:root {
  --primary: #3161ff;
  --secondary: #0631be;
  --error: red;
  --pink: #ed7b84;
  --lightpink: #fbb7b7;
  --lightblue: #b7bcfb;
  --light-mode-pink: #d72050;
  --light-mode-blue: #0543b6;
  --purple: #9055ff;
  --stepNumber: 4;
  --containerWidth: 600px;
  --bgColor: #333;
  --inputBorderColor: rgb(177, 177, 177);
}

html {
  box-sizing: border-box;
}

*,
*:before,
*:after {
  box-sizing: inherit;
}

body {
  font-family: Arial, sans-serif;
  margin: 0;
  padding: 0;
  background-color: #0c0617;
  background-image: linear-gradient(#191127 1.9000000000000004px,
      transparent 0.9000000000000004px),
    linear-gradient(to right,
      #191127 1.9000000000000004px,
      #0c0617 1.9000000000000004px);
  background-size: 100px 100px;
  background-attachment: fixed;
}

body.light-mode {
  background-color: #ffffff;
  background-image: linear-gradient(#ff50c82b 1.9000000000000004px,
      #ffffff00 0.9000000000000004px),
    linear-gradient(to right,
      #fdff644f 1.9000000000000004px,
      #ffffffa6 1.9000000000000004px);
}

.text-center {
  text-align: center !important;
}

button#toggle-mode {
  /* color: #f1376b; */
  /* position: absolute;
  right: 50px;
  top: 10px; */
  /* border: 2px solid #f1376b; */
  cursor: pointer;
  z-index: 2;
  border-radius: 100px;
  padding: 5px;
  line-height: 1;
  box-shadow: 0 2px 10px -2px black;
  background: linear-gradient(45deg, #71292e, #6d2356) !important;
  border: 2px solid var(--lightpink) !important;
  color: white;
}

button#voteInfo {
  /* color: #f1376b; */
  /* position: absolute;
  right: 10px;
  top: 10px; */
  /* border: 2px solid #f1376b; */
  cursor: pointer;
  z-index: 2;
  border-radius: 100px;
  padding: 5px;
  line-height: 1;
  box-shadow: 0 2px 10px -2px black;
  background: linear-gradient(45deg, #71292e, #6d2356) !important;
  border: 2px solid var(--lightpink) !important;
  color: white;
}

body.light-mode button#voteInfo {
  background: linear-gradient(45deg, #1a5bd2, #0543b6) !important;
  border: 2px solid var(--light-mode-blue) !important;
  color: white;
}

body.light-mode button#toggle-mode {
  background: linear-gradient(45deg, #1a5bd2, #0543b6) !important;
  border: 2px solid var(--light-mode-blue) !important;
  color: white;
}

.help-text {
  color: var(--lightpink);
  width: auto;
  background: #31232c;
  margin: 0 auto;
  padding: 10px 20px;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
}

body.light-mode .help-text {
  color: var(--light-mode-blue);
  background: #509dff30;
}

.whole-container {}

.whole-container.blurred {
  filter: blur(15px);
}

header {
  color: white;
  padding: 20px;
  height: 200px;
  text-align: center;
  transition: 0.3s ease;
  background: radial-gradient(at top, #ed7b84 10%, transparent 72%);
}

body.light-mode header {
  /* background: radial-gradient(at top, var(--lightblue) 10%, transparent 72%); */
  background: radial-gradient(at top, #ffffffde 10%, transparent 72%);
  display: block;
  position: relative;
}

/*----------*/

.title-container {
  position: relative;
  margin-top: -185px;
  margin-bottom: 50px;
  margin-left: auto;
  margin-right: auto;
  padding: 15px 50px;
  background: linear-gradient(to right,
      transparent 10%,
      #fbb7b74d,
      transparent 90%);
  box-shadow: 0 10px 25px -5px #0000009e;
}

body.light-mode .title-container {
  background: linear-gradient(to right,
      transparent 0%,
      #ffffff,
      transparent 100%);
  box-shadow: 0 15px 25px -5px #ffffff;
}

.star-title {
  font-size: 2rem;
  font-weight: bold;
  text-align: center;
  color: var(--lightpink);
  text-shadow: 0 5px 10px #000000bd, 0 -1px 10px #ffa0a0;
}

body.light-mode .star-title {
  color: unset;
  text-shadow: none;
  background: -webkit-linear-gradient(202deg, #ff4380, var(--light-mode-blue));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.back-button {
  position: absolute;
  top: 50%;
  color: var(--lightpink);
  border: 1px solid;
  padding: 5px 15px;
  border-radius: 100px;
  font-size: 0.9rem;
  text-decoration: none;
  transform: translateX(-500px) translateY(-50%);
  animation: leftToRight 1s ease forwards;
  animation-delay: 1s;
}

body.light-mode .back-button {
  border: 1px solid var(--light-mode-blue);
  color: var(--light-mode-blue);
}

@keyframes leftToRight {
  0% {
    opacity: 0;
    transform: translateX(-500px) translateY(-50%);
  }

  100% {
    opacity: 1;
    transform: translateX(0px) translateY(-50%);
  }
}

/*----*/

.nomination-form {
  display: flex;
  width: 90%;
  max-width: 1200px;
  margin: 0 auto 50px auto;
  background: linear-gradient(to bottom, #23131ecf 50%, #050927c4);
  border-radius: 15px;
  box-shadow: 0 -15px 26px -12px rgba(0, 0, 0, 0.5);
}

body.light-mode .nomination-form {
  background: linear-gradient(to bottom, #ebecf0 50%, #e6e9ff78);
  box-shadow: 0 -15px 26px -12px rgba(0, 0, 0, 0.5),
    0 10px 15px -5px rgba(0, 0, 0, 0.5);
}

.nomination-form h3 {
  font-size: 3rem;
  margin: 0;
  color: #0078d4;
}

.nomination-form h4 {
  font-size: 1.2rem;
  font-weight: 400;
}

/* form*/

.form-container {
  padding: 10px 20px;
  width: 100%;
}

@media screen and (max-width: 400px) {
  .form-container {
    padding: 5px;
  }
}

.container header {
  font-size: 35px;
  font-weight: 600;
  margin: 0 0 30px 0;
}

.container .form-outer {
  width: 100%;
  overflow: hidden;
}

.container .form-outer form {
  display: flex;
  flex-direction: column;
  width: 100%;
}

.form-outer form .page {
  width: 100%;
  transition: 0.3s ease-in-out;
  padding: 10px;
}

.form-outer form .page .title {
  text-align: left;
  font-size: 25px;
  font-weight: 500;
  color: var(--pink);
}

body.light-mode .form-outer form .page .title {
  color: var(--light-mode-blue);
}

.separator-center {
  width: 80%;
  height: 2px;
  margin: 20px auto;
  background: linear-gradient(to right,
      transparent,
      var(--lightpink),
      transparent);
}

body.light-mode .separator-center {
  height: 1px;
  background: linear-gradient(to right,
      transparent,
      var(--light-mode-blue),
      transparent);
}

.page .field {
  position: relative;
  margin: 10px 0 20px 0;
  display: flex;
}

.page .input-text {
  display: block;
  width: 100%;
  height: 60px;
  padding-left: 15px;
  border-width: 2px;
  border-radius: 0px;
  border-image: linear-gradient(to right, var(--lightpink), transparent) 2;
  background: transparent;
  color: var(--lightpink);
  font-size: 18px;
  line-height: 26px;
  font-weight: 400;
  transition: 0.3s linear;
  box-shadow: inset 2px 2px 5px #8c3458, inset -5px -5px 30px -3px #70273c,
    0 2px 15px #562036;
}

body.light-mode .page .input-text {
  border-image: none;
  border: 1px solid #84858b;
  color: #232323;
  box-shadow: inset 2px 2px 5px #babecc, inset -5px -5px 10px #fff;
}

.page .input-text:focus {
  outline: none;
  border-color: var(--lightpink);
  box-shadow: inset 1px 1px 2px #8c3458, inset -1px -1px 2px #70273c;
}

body.light-mode .page .input-text:focus {
  border-color: var(--lightblue);
  box-shadow: inset 1px 1px 2px #babecc, inset -1px -1px 2px #fff;
}

.input-text.not-empty {
  background: rgba(0, 0, 0, 0.35);
  border-color: var(--lightpink);
  box-shadow: inset 1px 1px 2px #8c3458, inset -1px -1px 2px #70273c;
  /* Maintain shadow when not empty */
}

body.light-mode .input-text.not-empty {
  background: rgba(255, 255, 255, 0.35);
  border-color: var(--lightblue);
  box-shadow: inset 1px 1px 2px #babecc, inset -1px -1px 2px #fff;
  /* Maintain shadow when not empty */
}

.page textarea {
  /* height: auto !important; */
  min-height: 180px;
  padding-top: 20px;
  border-color: var(--inputBorderColor);
}

.page .label {
  position: absolute;
  top: 17px;
  left: 25px;
  font-size: 18px;
  font-weight: 400;
  white-space: nowrap;
  padding: 1px 10px;
  color: var(--lightpink);
  cursor: text;
  transition: 0.2s ease-in-out;
}

body.light-mode .page .label {
  color: #232323;
}

.page .input-text:focus+.label,
.page .input-text.not-empty+.label {
  transform: translateY(-35px);
  background: linear-gradient(1deg, #b85556, #2b0d0d);

  border: 1px solid;
  border-radius: 100px;
}

body.light-mode .page .input-text:focus+.label,
body.light-mode .page .input-text.not-empty+.label {
  background: linear-gradient(10deg, #8b07cb, #599bff);
  box-shadow: 0 2px 5px #00000047;
  color: white;
}

.page .label i {
  border-right: 1px solid var(--lightpink);
  border-image: linear-gradient(to bottom,
      transparent,
      var(--lightpink),
      transparent) 1;
  padding-right: 10px;
  margin-right: 5px;
}

body.light-mode .page .label i {
  border-right: 1px solid var(--light-mode-blue);
  border-image: linear-gradient(to bottom,
      transparent,
      var(--light-mode-blue),
      transparent) 1;
}

body.light-mode .page .input-text:focus+.label i,
body.light-mode .page .input-text.not-empty+.label i {
  border-right: 1px solid var(--light-mode-blue);
  border-image: linear-gradient(to bottom, transparent, white, transparent) 1;
}

form .page .field button:not(.remove-btn, .delete-image, .password-toggle) {
  width: 100%;
  height: 60px;
  border: none;
  background: linear-gradient(to right, var(--pink), var(--purple), #62aad3);
  background-size: 300% 100%;
  margin: 0 auto;
  border-radius: 100px;
  color: #fff;
  cursor: pointer;
  font-size: 20px;
  font-weight: 500;
  letter-spacing: 1px;
  text-transform: uppercase;
  transition: 0.5s ease;
}

form .page .field button:hover {
  background-position: 100% 0;
  box-shadow: 0 5px 20px -5px rgba(211, 211, 211, 0.3);
}

form .page .btns button {
  font-size: 18px;
}

@media screen and (max-width: 992px) {
  .star-title {
    font-size: 1.8rem;
  }

  .back-button span>span {
    display: none;
  }
}

@media screen and (max-width: 576px) {
  .star-title {
    font-size: 1.1rem;
  }

  .back-button {
    left: 25px;
    padding: 5px 5px;
    line-height: 1;
  }
}

.separator-left {
  width: calc(100% - 20px);
  height: 2px;
  margin: 15px auto;
  background: linear-gradient(to right, var(--lightpink), transparent);
}

/*custom radio*/
/* ******************* Main Styeles : Radio Card */
.custom-radio-container {
  display: flex;
  justify-content: center;
  gap: 20px;
  flex-wrap: wrap;
  margin: 0;
}

label.radio-card {
  cursor: pointer;
  margin-bottom: 20px;
  max-width: 270px;
  width: calc(50% - 20px);
}

label.radio-card .card-content-wrapper {
  background: radial-gradient(at top, #ff8e8e, #0000001f);
  border-radius: 15px;
  width: 100%;
  height: 80px;
  padding: 15px;
  display: flex;
  flex-direction: row;
  align-items: center;
  box-shadow: 0 3px 15px -5px rgb(0 0 0 / 53%);
  transition: 0.5s linear;
}

body.light-mode label.radio-card .card-content-wrapper {
  background: radial-gradient(at top, #ada7f9, #1a336d);
}

label.radio-card .check-icon {
  width: 20px;
  height: 20px;
  margin-right: 10px;
  display: flex;
  flex-shrink: 0;
  border: solid 2px var(--lightpink);
  border-radius: 50%;
  transition: 200ms linear;
  position: relative;
}

body.light-mode label.radio-card .check-icon {
  border: solid 2px var(--lightblue);
}

label.radio-card .check-icon:before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg width='12' height='9' viewBox='0 0 12 9' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0.93552 4.58423C0.890286 4.53718 0.854262 4.48209 0.829309 4.42179C0.779553 4.28741 0.779553 4.13965 0.829309 4.00527C0.853759 3.94471 0.889842 3.88952 0.93552 3.84283L1.68941 3.12018C1.73378 3.06821 1.7893 3.02692 1.85185 2.99939C1.91206 2.97215 1.97736 2.95796 2.04345 2.95774C2.11507 2.95635 2.18613 2.97056 2.2517 2.99939C2.31652 3.02822 2.3752 3.06922 2.42456 3.12018L4.69872 5.39851L9.58026 0.516971C9.62828 0.466328 9.68554 0.42533 9.74895 0.396182C9.81468 0.367844 9.88563 0.353653 9.95721 0.354531C10.0244 0.354903 10.0907 0.369582 10.1517 0.397592C10.2128 0.425602 10.2672 0.466298 10.3112 0.516971L11.0651 1.25003C11.1108 1.29672 11.1469 1.35191 11.1713 1.41247C11.2211 1.54686 11.2211 1.69461 11.1713 1.82899C11.1464 1.88929 11.1104 1.94439 11.0651 1.99143L5.06525 7.96007C5.02054 8.0122 4.96514 8.0541 4.90281 8.08294C4.76944 8.13802 4.61967 8.13802 4.4863 8.08294C4.42397 8.0541 4.36857 8.0122 4.32386 7.96007L0.93552 4.58423Z' fill='white'/%3E%3C/svg%3E%0A");
  background-repeat: no-repeat;
  background-size: 12px;
  background-position: center center;
  transform: scale(1.6);
  transition: 200ms linear;
  opacity: 0;
}

label.radio-card input[type="radio"] {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
}

label.radio-card input[type="radio"]:checked+.card-content-wrapper {
  box-shadow: 0 2px 4px 0 rgba(255, 255, 255, 0.5), 0 0 0 2px var(--lightpink);
}

body.light-mode label.radio-card input[type="radio"]:checked+.card-content-wrapper {
  background: linear-gradient(10deg, #203b8b11, #ffffff);
  box-shadow: 0 1px 4px 0 rgba(255, 255, 255, 1), 0 0 10px 10px #b7b9fb;
  border: 1px solid var(--light-mode-blue);
}

label.radio-card input[type="radio"]:checked+.card-content-wrapper .check-icon {
  background: var(--light-mode-pink);
  border-color: var(--lightpink);
  transform: scale(1.2);
}

body.light-mode label.radio-card input[type="radio"]:checked+.card-content-wrapper .check-icon {
  background: var(--light-mode-blue);
  border-color: var(--lightblue);
}

label.radio-card input[type="radio"]:checked+.card-content-wrapper .check-icon:before {
  transform: scale(1);
  opacity: 1;
}

label.radio-card input[type="radio"]:focus+.card-content-wrapper .check-icon {
  box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.2);
  border-color: var(--lightpink);
}

body.light-mode label.radio-card input[type="radio"]:focus+.card-content-wrapper .check-icon {
  box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.2);
  border-color: var(--lightblue);
}

.card-content {
  filter: contrast(0.5);
  display: flex;
  align-items: center;
  gap: 10px;
}

body.light-mode .card-content {
  filter: contrast(1);
}

label.radio-card input[type="radio"]:checked+.card-content-wrapper .card-content {
  filter: contrast(3);
}

label.radio-card .card-content img {
  width: 50px;
  height: 50px;
  margin: 0;
  filter: invert(0);
  transform: translateY(0) translateZ(0);
  position: relative;
  -webkit-backface-visibility: hidden;
  transition: 0s ease;
}

body.light-mode label.radio-card .card-content img {
  filter: invert(1);
}

label.radio-card input[type="radio"]:checked+.card-content-wrapper img {
  animation: float 3s ease-in-out infinite;
  filter: invert(1);
}

body.light-mode label.radio-card input[type="radio"]:checked+.card-content-wrapper img {
  filter: invert(0);
}

@keyframes float {
  0% {
    transform: translatey(0px) translateZ(0);
  }

  50% {
    transform: translatey(-8px) translateZ(0);
  }

  100% {
    transform: translatey(0px) translateZ(0);
  }
}

label.radio-card .card-content h4 {
  font-size: 18px;
  letter-spacing: -0.24px;
  text-align: center;
  color: var(--lightpink);
  margin: 0;
  transition: 0.5s;
}

body.light-mode label.radio-card .card-content h4 {
  color: var(--lightblue);
}

label.radio-card input[type="radio"]:checked+.card-content-wrapper .card-content h4 {
  color: var(--lightpink);
}

body.light-mode label.radio-card input[type="radio"]:checked+.card-content-wrapper .card-content h4 {
  color: #000000;
}

label.radio-card .card-content h5 {
  font-size: 14px;
  line-height: 1.4;
  text-align: center;
  color: var(--lightpink);
  margin: 10px 0;
}

@media screen and (max-width: 692px) {
  label.radio-card .card-content-wrapper {
    padding: 10px;
    height: 60px;
  }

  label.radio-card .card-content img {
    width: 30px;
    height: 30px;
  }

  label.radio-card .card-content h4 {
    font-size: 18px;
  }
}

@media screen and (max-width: 492px) {
  .custom-radio-container {
    flex-direction: column;
    gap: 0;
  }

  label.radio-card {
    cursor: pointer;
    margin-bottom: 0;
    max-width: 100%;
    width: 100%;
  }

  label.radio-card .card-content-wrapper {
    padding: 0 20px;
    height: 50px;
  }

  label.radio-card .card-content img {
    width: 30px;
    height: 30px;
  }

  label.radio-card .card-content h4 {
    font-size: 20px;
  }
}

@media screen and (max-width: 340px) {
  label.radio-card .card-content h4 {
    font-size: 16px;
  }
}

/*custom image upload single + multi*/

.image-label {
  font-size: 1.5rem;
  text-align: center;
  margin: 0 0 20px 0;
  color: var(--pink);
}

body.light-mode .image-label {
  color: var(--light-mode-blue);
}

/* Single Upload Styles */
.upload-wrapper {
  position: relative;
  width: 100%;
  min-height: 200px;
}

.file-input {
  display: none;
}

.upload-box {
  border: 2px dashed var(--lightpink);
  border-radius: 8px;
  padding: 20px;
  text-align: center;
  cursor: pointer;
  min-height: 200px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: radial-gradient(#ff8e8e94, transparent);
}

body.light-mode .upload-box {
  border: 2px dashed var(--light-mode-blue);
  background: radial-gradient(#8e9cff3b, transparent);
}

.upload-box:hover {
  border-color: var(--purple);
}

.upload-box i {
  font-size: 48px;
  color: var(--lightpink);
  margin-bottom: 10px;
}

body.light-mode .upload-box i {
  color: var(--light-mode-blue);
}

.upload-box p {
  color: var(--lightpink);
}

body.light-mode .upload-box p {
  color: var(--light-mode-blue);
}

.preview-box {
  position: relative;
  width: 100%;
  min-height: 200px;
}

.preview-box img {
  width: 100%;
  object-fit: contain;
  border-radius: 10px;
}

.remove-btn {
  position: absolute;
  top: 10px;
  right: 10px;
  background: rgba(255, 0, 0, 0.8);
  color: white;
  border: none;
  border-radius: 50%;
  width: 30px;
  height: 30px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Multiple Upload Styles */
.upload-gallery {
  gap: 15px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.gallery-slot {
  flex-basis: 200px;
  position: relative;
  aspect-ratio: 1;
  border: 2px dashed var(--lightpink);
  border-radius: 8px;
  overflow: hidden;
  background: radial-gradient(#ff8e8e94, transparent);
}

@media screen and (max-width: 550px) {
  .gallery-slot {
    flex-basis: 47%;
  }
}

body.light-mode .gallery-slot {
  border: 2px dashed var(--light-mode-blue);
  background: radial-gradient(#8e9cff3b, transparent);
}

.upload-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 15px;
  transition: 0.3s ease;
}

.upload-placeholder:hover {
  background: var(--purple);
}

body.light-mode .upload-placeholder:hover {
  background: var(--lightblue);
}

.upload-placeholder i {
  font-size: 24px;
  color: var(--lightpink);
  margin-bottom: 8px;
}

body.light-mode .upload-placeholder i {
  color: var(--light-mode-blue);
}

.upload-placeholder span {
  font-size: 14px;
  color: var(--lightpink);
}

body.light-mode .upload-placeholder span {
  color: var(--light-mode-blue);
}

.image-preview {
  position: relative;
  width: 100%;
  height: 100%;
}

.image-preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.delete-image {
  position: absolute;
  top: 5px;
  right: 5px;
  width: 25px;
  height: 25px;
  border-radius: 50%;
  background: var(--error);
  color: white;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  line-height: 1;
}

.delete-image:hover {
  background: rgba(255, 0, 0, 1);
}

/*custom radio button group*/

.field-text {
  font-size: 18px;
  font-weight: 400;
  color: var(--lightpink);
  margin-bottom: 10px;
}

body.light-mode .field-text {
  color: var(--light-mode-blue);
}

.radio-button-group {
  display: flex;
  gap: 15px 10px;
  flex-wrap: wrap;
  padding: 0;
  margin: 0;
}

.radio-button-group li {
  list-style: none;
}

span.radio-button-see-more {
  display: flex;
  height: 100%;
  gap: 5px;
  align-items: center;
  color: var(--lightpink);
}

.radio-button {
  position: relative;
  cursor: pointer;
}

.radio-button input[type="radio"] {
  position: absolute;
  opacity: 0;
  cursor: pointer;
}

.radio-button-content {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 20px;
  background: linear-gradient(45deg, black, #590c30e3);
  color: var(--lightpink);
  border: 2px solid var(--lightpink);
  border-radius: 50px;
  transition: all 0.3s ease;
}

body.light-mode .radio-button-content {
  border: 2px solid var(--light-mode-blue);
  color: var(--light-mode-blue);
  background: linear-gradient(45deg, rgb(255, 255, 255), #590c3031);
}

.radio-button-content i {
  font-size: 18px;

  transition: all 0.3s ease;
}

body.light-mode .radio-button-content i {
  color: unset;
}

.radio-label {
  font-size: 16px;

  transition: all 0.3s ease;
}

@media screen and (max-width: 450px) {
  .radio-label {
    font-size: 13px;
  }
}

/* Hover state */
.radio-button:hover .radio-button-content {
  border-color: var(--purple);
  background: rgba(49, 97, 255, 0.05);
}

.radio-button:hover .radio-button-content i,
.radio-button:hover .radio-label {
  color: var(--purple);
}

/* Checked state */
.radio-button input[type="radio"]:checked+.radio-button-content {
  background: linear-gradient(45deg, #cd346d, #101645f2);
  border-color: var(--lightpink);
  border-width: 2px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2), 0 1px 20px #811f53;
}

body.light-mode .radio-button input[type="radio"]:checked+.radio-button-content {
  background: linear-gradient(45deg, #345bcd, #101645f2);
  border-color: var(--lightblue);
  border-width: 2px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2), 0 1px 20px #1f4281;
}

/* Focus state */
.radio-button input[type="radio"]:focus+.radio-button-content {
  /* box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.2); */
}

.radio-button input[type="radio"]:checked+.radio-button-content i,
.radio-button input[type="radio"]:checked+.radio-button-content .radio-label {
  color: white;
}

.radio-button input[type="radio"]:checked+.radio-button-content i {
  animation: shake 0.5s ease;
  transform-origin: center;
}

@keyframes shake {
  0% {
    transform: scale(1);
  }

  25% {
    transform: scale(1.1);
  }

  50% {
    transform: scale(0.9);
  }

  75% {
    transform: scale(1.1);
  }

  100% {
    transform: scale(1);
  }
}

@keyframes flip {
  0% {
    transform: perspective(600px) rotateY(0deg);
  }

  50% {
    transform: perspective(600px) rotateY(180deg);
    backface-visibility: hidden;
    /* Hide the back face during the flip */
  }

  100% {
    transform: perspective(600px) rotateY(0deg);
  }
}

.radio-button-see-more button {
  color: var(--lightpink) !important;
  height: 47px !important;
  background: transparent !important;
  font-size: 15px !important;
}

@media screen and (max-width: 450px) {
  .radio-button-see-more button {
    font-size: 13px !important;
  }
}

.light-mode .radio-button-see-more button {
  color: var(--light-mode-blue) !important;
}

/*---show hide between nominee-info-fields product-info-fields based on selected category */
.nominee-info-fields,
.product-info-fields {
  opacity: 1;
  max-height: 2000px;
  /* Adjust based on your content height */
  transition: all 0.5s ease-in-out;
  overflow: hidden;
}

.nominee-info-fields.hidden,
.person-name-fields.hidden,
.product-info-fields.hidden {
  opacity: 0;
  max-height: 0;
  margin: 0;
  padding: 0;
  pointer-events: none;
}

/*----category selection off canvas------*/

.category-selection-canvas {
  background: var(--lightpink);
  width: 90% !important;
  max-width: 650px !important;
  /* left: 50%;
            transform: translate(-50%, -50%) !important;
            height: 80%;
            top: 50% !important; */
  border: 0 !important;
  border-radius: 5px 0 0 5px;
  box-shadow: 0 3px 155px 80px black;
}

.light-mode .category-selection-canvas {
  background: white;
  box-shadow: 0 3px 155px 80px rgb(255, 255, 255, 0.5);
}

.category-selection-canvas .offcanvas-title {
  font-size: 18px;
  color: #bb2453;
}

.light-mode .category-selection-canvas .offcanvas-title {
  color: var(--light-mode-blue);
}

.offcanvas-category-selection-header {
  position: relative;
}

.offcanvas-category-selection-header i.fa-magnifying-glass {
  position: absolute;
  top: 50%;
  left: 15px;
  transform: translateY(-50%);
  color: var(--pink);
}

.light-mode .offcanvas-category-selection-header i.fa-magnifying-glass {
  color: var(--light-mode-blue);
}

.radio-search-field {
  width: 100%;
  height: 50px;
  padding-left: 45px;
  border-radius: 10px;
  outline: none;
  border: 0;
  box-shadow: inset 0 1px 9px -2px #00000094;
}

.offcanvas-category-selection-header i.fa-times {
  position: absolute;
  top: 50%;
  right: 15px;
  transform: translateY(-50%);
  color: var(--pink);
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.3s ease;
}

body.light-mode .offcanvas-category-selection-header i.fa-times {
  color: var(--light-mode-blue);
}

.offcanvas-category-selection-header i.fa-times.visible {
  opacity: 1;
}

.category-selection-canvas .radio-button-group {
  max-height: calc(100vh - 150px);
  overflow-y: auto;
  position: absolute;
  top: 150px;
  left: 0;
  right: 0;
  padding: 0 1rem 1rem 1rem;
}

.category-selection-canvas .radio-button-group::-webkit-scrollbar {
  width: 5px;
  background-color: rgba(0, 0, 0, 0.1);
}

.category-selection-canvas .radio-button-group::-webkit-scrollbar-thumb {
  background: var(--light-mode-pink);
  border-radius: 5px;
}

.light-mode .category-selection-canvas .radio-button-group::-webkit-scrollbar-thumb {
  background: var(--light-mode-blue);
  border-radius: 5px;
}

/**/

/* Radio Toggle Switch */
.radio-toggle {
  display: flex;
  align-items: center;
  gap: 15px;
  margin: 10px 0;
}

.toggle-label {
  font-size: 18px;
  color: var(--lightpink);
}

body.light-mode .toggle-label {
  color: var(--light-mode-blue);
}

.switch {
  position: relative;
  display: inline-block;
  width: 60px;
  height: 25px;
}

.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #312f2f;
  border: 1px solid pink;
  transition: 0.4s;
  border-radius: 34px;
}

body.light-mode .slider {
  background-color: #d9d9d9;
  border: 1px solid #102e73;
}

.slider:before {
  position: absolute;
  content: "";
  height: 30px;
  width: 30px;
  left: -5px;
  bottom: -4px;
  background: radial-gradient(at top center, #ffadad 30%, #000000);

  transition: 0.4s;
  border-radius: 50%;
}

body.light-mode .slider:before {
  background: radial-gradient(at top center, #adb5ff 30%, #000000);
}

.switch input:checked+.slider {
  background-color: #040b31;
}

body.light-mode .switch input:checked+.slider {
  background-color: #c6eaff;
  border: 1px solid #0043ff;
}

.switch input:checked+.slider:before {
  transform: translateX(35px);
  background: radial-gradient(at top center, #ffadad 60%, #000000);
  border: 1px solid var(--lightpink);
}

body.light-mode .switch input:checked+.slider:before {
  transform: translateX(35px);
  background: radial-gradient(at top center, #2671ff 20%, #000000);
  border: 1px solid #464cff;
}

/* Alert Component Styles */
.alert-container {
  position: fixed;
  top: 10%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 1050;
  width: 350px;
}

.alert {
  display: none;
  padding: 12px;
  border-radius: 8px;
  margin-bottom: 10px;
  position: relative;
  animation: slideIn 0.3s ease-out;
  transition: opacity 0.3s ease;
}

.alert.show {
  display: block;
  opacity: 1;
}

.alert.hide {
  opacity: 0;
  pointer-events: none;
}

.alert.success {
  background: linear-gradient(45deg, #5f9c6d, #28a745);
  color: white;
}

.alert.error {
  background: linear-gradient(45deg, #ff5252, #ff1744);
  color: white;
}

.alert.warning {
  background: linear-gradient(45deg, #ffa726, #ff9800);
  color: white;
}

.alert-info {
  background: linear-gradient(45deg, #29b6f6, #03a9f4);
  color: white;
}

.alert-icon {
  margin-right: 10px;
  font-size: 18px;
}

.alert-message {
  flex: 1;
}

.alert-close {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  color: rgba(255, 255, 255, 0.7);
  cursor: pointer;
  font-size: 18px;
}

.alert-close:hover {
  color: white;
}

@keyframes slideIn {
  from {
    transform: translateX(100%);
    opacity: 0;
  }

  to {
    transform: translateX(0);
    opacity: 1;
  }
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

body.light-mode .alert {
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

body.light-mode .alert.success {
  background: linear-gradient(45deg, var(--light-mode-blue), var(--primary));
}

body.light-mode .alert.error {
  background: linear-gradient(45deg, #ff5252, #ff1744);
}

body.light-mode .alert.warning {
  background: linear-gradient(45deg, #ffa726, #ff9800);
}

body.light-mode .alert-info {
  background: linear-gradient(45deg, #29b6f6, #03a9f4);
}

/*----------*/

/*---------- Custom Modal 2025-06-04 --------------*/
.custom-modal-overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.8);
  z-index: 1000;
  backdrop-filter: blur(5px);
}

.custom-modal-container {
  display: none;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: linear-gradient(to bottom, #310c19a8 50%, #0509275e);
  padding: 30px;
  border-radius: 20px;
  width: 90%;
  max-width: 500px;
  z-index: 1001;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
  border: 1px solid var(--lightpink);
}

@media screen and (max-width: 768px) {
  .custom-modal-container {
    padding: 0;
  }
}

.custom-modal-header {
  /* display: flex;
  justify-content: space-between; */
  align-items: center;
  padding: 20px;
  position: relative;
  text-align: center;
}

.custom-modal-header h2 {
  color: var(--pink);
  margin: 0;
  font-size: 1.5rem;
  font-weight: 600;
}

.custom-modal-body {
  padding: 20px 0px;
  min-height: 300px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.custom-modal-body-conatiner {
  padding: 20px 0px;
  width: 100%;
}

.custom-modal-body-conatiner h3 {
  color: var(--lightpink);
  margin-bottom: 20px;
  font-size: 1.5rem;
  font-weight: 500;
  text-align: center;
}

.custom-modal-body-conatiner p {
  color: var(--lightpink);
  margin-bottom: 30px;
  text-align: center;
  font-size: 1rem;
}

.custom-modal-btn-group {
  display: flex;
  gap: 15px;
  margin-top: 20px;
  justify-content: center;
}

@media screen and (max-width: 768px) {
  .custom-modal-btn-group {
    flex-direction: column;
    gap: 20px;
  }
}

.custom-modal-btn-primary {
  text-decoration: auto;
  background: linear-gradient(to right, var(--pink), var(--purple), #62aad3);
  color: white;
  border: none;
  padding: 12px 22px;
  border-radius: 25px;
  cursor: pointer;
  transition: all 0.3s;
  font-weight: 500;
  box-shadow: 0 4px 15px rgba(255, 49, 142, 0.3);
}

.custom-modal-btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(255, 49, 142, 0.4);
}

.custom-modal-btn-secondary {
  text-decoration: auto;
  background: transparent;
  border: 2px solid var(--light-mode-pink);
  color: var(--lightpink);
  padding: 12px 22px;
  border-radius: 25px;
  cursor: pointer;
  transition: all 0.3s;
  font-weight: 500;
}

.custom-modal-btn-secondary:hover {
  background: var(--light-mode-pink);
  color: white;
  transform: translateY(-2px);
}

/* Light mode styles */
body.light-mode .custom-modal-container {
  background: white;
  border: 1px solid rgba(0, 0, 0, 0.1);
}

body.light-mode .custom-modal-header h2 {
  color: var(--light-mode-blue);
}

body.light-mode .custom-modal-body-conatiner h3 {
  color: var(--light-mode-blue);
}

body.light-mode .custom-modal-body-conatiner p {
  color: var(--light-mode-blue);
}

body.light-mode .custom-modal-btn-secondary {
  background: transparent;
  border: 2px solid var(--light-mode-blue);
  color: var(--light-mode-blue);
}

body.light-mode .custom-modal-btn-secondary:hover {
  background: var(--light-mode-blue);
  color: white;
  transform: translateY(-2px);
}
/*---------- Custom Modal 2025-06-04 --------------*/