/* ========================================
   CERIA Custom Styles (from head.php)
   Star Rating, Select2, Form Overrides
========================================= */

/* Star Rating Widget */
.containerrating .star-widget input {
  display: none;
}

.star-widget label {
  font-size: 42px;
  color: #444;
  padding: 10px;
  float: right;
  transition: all 0.2s ease;
}

.star-widget input:not(:checked)~label:hover,
.star-widget input:not(:checked)~label:hover~label {
  color: #fd4;
}

.star-widget input:checked~label {
  color: #fd4;
}

.star-widget input#rate-5:checked~label {
  color: #fe7;
  text-shadow: 0 0 20px #952;
}

.star-widget input#rate-1:checked~form header:before {
  content: "Sangat Tidak Puas 😡";
}

.star-widget input#rate-2:checked~form header:before {
  content: "Tidak Puas 😠";
}

.star-widget input#rate-3:checked~form header:before {
  content: "Cukup Puas 🙂";
}

.star-widget input#rate-4:checked~form header:before {
  content: "Puas 😘";
}

.star-widget input#rate-5:checked~form header:before {
  content: "Sangat Puas 😍";
}

.star-widget input:checked~form {
  display: block;
}

.star-widget form header {
  width: 100%;
  font-size: 25px;
  color: #fe7;
  font-weight: 500;
  margin: 5px 0 20px 0;
  text-align: center;
  transition: all 0.2s ease;
}

/* Textarea Rating */
.textarearating {
  height: 150px;
  width: 100%;
  overflow: hidden;
}

.textarearating textarea {
  height: 100%;
  width: 100%;
  outline: none;
  color: #eee;
  border: 1px solid #333;
  background: #222;
  padding: 10px;
  font-size: 17px;
  resize: none;
}

.textarearating textarea:focus {
  border-color: #444;
}

.select2-container--default .select2-selection--single {
  height: 44px;
  /* Set the height */
  border-radius: 8px 0px 0px 8px;
  /* Set the border radius */
  display: flex;
  /* Ensure proper alignment */
  align-items: center;
  /* Center the text vertically */
  padding: 10px;
  /* Optional: Add some padding for better spacing */
  box-sizing: border-box;
  /* Ensure padding doesn't affect the overall size */
  border: 1px solid #ccc;
}

.select2-container--default .select2-selection--single:focus {
  border-color: #602d2d;
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
  line-height: normal;
  /* Ensure text wraps properly */
}

.select2-container--default .select2-selection--single .select2-selection__arrow {
  height: 100%;
  /* Ensure the arrow is centered */
  display: flex;
  align-items: center;
}

/* Gaya untuk container */
.container {
  width: 100%;
  padding: 0 15px;
}

/* Gaya untuk input group */
.input-group1 {
  display: flex;
  width: 100%;
}

/* Gaya untuk form-outline (container input dan label) */
.form-outline1 {
  position: relative;
  flex-grow: 1;
  margin-right: 0px;
}

/* Gaya untuk input text */
.form-control1 {
  width: 100%;
  padding: 10px 16px;
  font-size: 16px;
  border: 2px solid #ccc;
  border-radius: 8px 0px 0px 8px;
  outline: none;
  transition: border-color 0.3s ease;
  border-color: #602d2d;
}

/* Gaya saat input difokuskan */
.form-control1:focus {
  border-color: #602d2d;
}

/* Gaya untuk label */
.form-label1 {
  position: absolute;
  top: 50%;
  left: 16px;
  transform: translateY(-50%);
  font-size: 16px;
  color: #999;
  pointer-events: none;
  transition: all 0.3s ease;
}

/* Gaya saat input tidak kosong atau difokuskan */
.form-control1:focus+.form-label,
.form-control1:not(:placeholder-shown)+.form-label {
  top: 0;
  left: 12px;
  font-size: 12px;
  color: #602d2d;
  background: white;
  padding: 0 4px;
}

/* Gaya untuk tombol pencarian */
.btn-primary {
  padding: 10px 20px;
  font-size: 16px;
  color: white;
  background-color: #602d2d;
  border: none;
  border-radius: 0px 8px 8px 0px;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

/* Gaya saat tombol dihover */
.btn-primary:hover {
  background-color: rgb(51, 3, 3);
}