/* ==========================================================================
   Recenzije Plugin – CSS
   Section stilovi ostaju u temi (.reviews, .review-bars itd.)
   Ovdje su samo novi elementi koje plugin dodaje.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Star rating forma
   -------------------------------------------------------------------------- */

/*---novo----*/
/* === Wrapper === */
.recenzije-form-wrap {
	max-width: 90rem;
	margin: 0 auto;
	padding: 4rem;
	background: #fff;
	border-radius: 1rem;
	border: 1px solid #ccc;
}

.recenzije-form-wrap h3 {
  font-size: clamp(2.4rem, 3vw + 0.8rem, 4rem);
  line-height: 1.2;
  color: #1a1a1a;
}

/* === Ratings block === */
.recenzije-ratings {
  margin-bottom: 2rem;
}

.recenzije-ratings-label {
  margin: 0 0 1.5rem;
  font-weight: 600;
  color: #333;
}

.recenzije-ratings-label .required {
  color: #e53935;
}

.rating-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1.5rem;
	padding: 1rem 2rem;
	font-weight: 600;
	font-size: 1.6rem;
	background-color: #f9f9f9;
	border-radius: 1rem;
	margin-bottom: 1rem;
}
.rating-row-label {
	color: #848484;
}
.stars {
  display: flex;
  gap: 0.375rem;
}

.star {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 2.25rem;
  line-height: 1;
  padding: 0.25rem;
  color: #d8d8d8;
  transition: color 0.15s ease, transform 0.1s ease;
}

.star:hover,
.star:focus-visible {
  transform: scale(1.15);
  color: #f5c518;
  outline: none;
}

.star.active,
.star.selected {
  color: #f5c518;
}

/* === Form fields === */
.comment-form p {
  margin: 0 0 1.75rem;
}

.comment-form label {
  display: block;
  margin-bottom: 0.5rem;

  font-weight: 600;
  color: #333;
}

.comment-form label .required {
  font-weight: 400;
  color: #e53935;

}

.comment-form textarea,
.comment-form input[type="text"],
.comment-form input[type="email"] {
  width: 100%;
  box-sizing: border-box;
  padding: 1rem 1.125rem;

  font-family: inherit;
  border: 1px solid #d9d9d9;
  border-radius: 0.625rem;
  background: #fafafa;
  transition: border-color 0.15s ease, background 0.15s ease;
}

.comment-form textarea:focus,
.comment-form input[type="text"]:focus,
.comment-form input[type="email"]:focus {
  outline: none;
  border-color: #888;
  background: #fff;
}

.comment-form textarea {
  resize: vertical;
  min-height: 9rem;
}

/* === Cookie consent checkbox === */
.comment-form-cookies-consent {
  display: flex;
  align-items: flex-start;
  gap: 0.625rem;
  color: #666;
}

.comment-form-cookies-consent input[type="checkbox"] {
	margin-top: 0.45rem;
	width: 3.125rem;
	height: 1.825rem;
	flex-shrink: 0;
}
.comment-form-cookies-consent label {
  font-weight: 400;
  margin: 0;
  font-size: 1.6rem;
  opacity: 0.5;
}

/* === Submit === */
.form-submit {
  margin-top: 2rem;
}

.submit {
    display: inline-block;
  padding: 1.4rem 5rem;
  font-weight: 400;
  border-radius: 10rem;
  transition: all 0.4s ease-in-out;
  text-decoration: none;
  cursor: pointer;
  background: linear-gradient(
    to right,
    rgba(95, 56, 132, 1) 0%,
    rgba(73, 160, 157, 1) 100%
  );

  color: #fff;
}

.submit:hover {
   background: linear-gradient(
    to right,
    rgba(73, 160, 157, 1) 0%,
    rgba(73, 160, 157, 1) 100%
  );
}

/* === Responsive === */
@media (max-width: 30rem) {
  .recenzije-form-wrap {
    padding: 1.25rem;
  }

  .rating-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.375rem;
  }
}
/*------------*/
.required-field-message{
	display: block;
	width: 100%;
	font-style: italic;
	font-size: 1.4rem;
	opacity: 0.6;
}
.recenzije-form-wrap .logged-in-as a {
	text-decoration: none;
	display: inline-block;
	background-color: #4d8b98;
	border-radius: 10rem;
	color: #fff;
	padding: 0.5rem 3rem;
	font-size: 1.6rem;
}
.recenzije-form-wrap .logged-in-as a:last-of-type{
	background-color: #333;
}
.recenzije-form-wrap .logged-in-as a:hover{
	background-color: #000;
}