:root {
      --main-color: #d63384;
      --hover-color: #c2185b;
      --success: #28a745;
      --error: #dc3545;
    }
.review-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  background: linear-gradient(to right, #7abdff, #7bffe2, #aeff78);
  padding: 25px;
  border-radius: 12px;
  box-shadow: 0 5px 20px rgba(0,0,0,0.1);
  width: 100%;
  max-width: 600px;
  animation: float 3s ease-in-out infinite alternate;
  margin: 0 auto;
}

    @keyframes float {
      from { transform: translateY(0); }
      to { transform: translateY(10px); }
    }

    h1 {
      text-align: center;
      color: var(--main-color);
      margin-bottom: 20px;
    }

    label {
      display: block;
      margin-top: 15px;
      font-weight: bold;
    }

    input[type="text"],
    textarea {
      width: 100%;
      padding: 12px;
      margin-top: 5px;
      border: 1px solid #ccc;
      border-radius: 8px;
      font-size: 1em;
    }

    textarea {
      resize: vertical;
    }

    .rating {
      display: flex;
      flex-direction: row-reverse;
      justify-content: center;
      margin-top: 10px;
    }

    .rating > label {
      margin-right: 4px;
      cursor: pointer;
    }

    .rating:not(:checked) > input {
      display: none;
    }

    .rating:not(:checked) > label > svg {
      fill: #f3f3f3;
      transition: fill 0.3s ease;
    }

    .rating > input:checked ~ label > svg {
      fill: #ffa723;
    }

    .rating:not(:checked) > label:hover ~ label > svg,
    .rating:not(:checked) > label:hover > svg {
      fill: #ff9e0b;
    }

    #star1:hover ~ label > svg,
    #star1:hover > svg { fill: #a23c3c !important; }
    #star2:hover ~ label > svg,
    #star2:hover > svg { fill: #99542d !important; }
    #star3:hover ~ label > svg,
    #star3:hover > svg { fill: #9f7e18 !important; }
    #star4:hover ~ label > svg,
    #star4:hover > svg { fill: #22885e !important; }
    #star5:hover ~ label > svg,
    #star5:hover > svg { fill: #7951ac !important; }

    #star1:checked ~ label > svg { fill: #ef4444; }
    #star2:checked ~ label > svg { fill: #e06c2b; }
    #star3:checked ~ label > svg { fill: #eab308; }
    #star4:checked ~ label > svg { fill: #19c37d; }
    #star5:checked ~ label > svg { fill: #ab68ff; }

    button {
      margin-top: 20px;
      padding: 12px;
      background-color: var(--main-color);
      color: white;
      border: none;
      border-radius: 8px;
      cursor: pointer;
      width: 100%;
      font-size: 1em;
    }

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

    .toast {
      display: none;
      margin-top: 15px;
      padding: 12px;
      color: white;
      border-radius: 6px;
      text-align: center;
    }

    .toast.show {
      display: block;
    }

    .review {
      background: #f9f9f9;
      margin-top: 15px;
      padding: 12px;
      border-radius: 8px;
    }

    .modal {
      display: none;
      position: fixed;
      z-index: 999;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      background: rgba(0, 0, 0, 0.5);
      justify-content: center;
      align-items: center;
    }

    .modal-card {
      background: white;
      padding: 30px;
      border-radius: 12px;
      text-align: center;
      max-width: 400px;
      width: 90%;
    }

    .modal-card-footer {
      margin-top: 20px;
      display: flex;
      justify-content: center;
      gap: 15px;
    }

    .button.is-primary {
      background-color: var(--success);
      color: white;
      border: none;
      padding: 10px 20px;
      border-radius: 8px;
      cursor: pointer;
    }

    .button.is-ghost {
      background: none;
      border: 2px solid #ccc;
      color: #333;
      padding: 10px 20px;
      border-radius: 8px;
      cursor: pointer;
    }