/* 
AUFBAU
(div) glsr glsr-default glsr-ltr
-- (div) glsr-form-wrap
--- (form) testimonial-form glsr-review-form glsr-form
---- (input) site-reviews[_action]
---- (...)
---- (div) glsr-field glsr-field-rating glsr-required
----- (label)
----- (span oder textarea)
---- (...)
*/

/* Form Außenelement */
.glsr.glsr-default.glsr-ltr:has(.testimonial-form.glsr-review-form.glsr-form) {
  width: 100%;
  border: 1px solid var(--wp--preset--color--border);
  border-radius: 8px;
  padding: var(--wp--preset--spacing--md-32-r);
}

/* Form */
.testimonial-form.glsr-review-form.glsr-form {
  display: grid;
  grid-template-columns: 0.2fr 1fr;
  row-gap: var(--wp--preset--spacing--sm-24-r);
  column-gap: var(--wp--preset--spacing--sm-24-r);
}

/* Form field display contents damit wir die column bestimmen können */
.testimonial-form.glsr-review-form.glsr-form .glsr-field {
  display: contents;
}

/* Label links (20%) */
.testimonial-form.glsr-review-form.glsr-form .glsr-label {
  grid-column: 1 / 2;
  margin: 0;
}

/* Felder rechts (Rest) */
.testimonial-form.glsr-review-form.glsr-form .glsr-field-toggle {
  grid-column: 1 / -1;
}

/* Austausch gegen Phosphor Stern */
form.glsr-form.testimonial-form .glsr-star-rating--stars[class*=" s"] > span {
  background-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256"><rect width="256" height="256" fill="none"/><path d="M128,189.09l54.72,33.65a8.4,8.4,0,0,0,12.52-9.17l-14.88-62.79,48.7-42A8.46,8.46,0,0,0,224.27,94L160.36,88.8,135.74,29.2a8.36,8.36,0,0,0-15.48,0L95.64,88.8,31.73,94a8.46,8.46,0,0,0-4.79,14.83l48.7,42L60.76,213.57a8.4,8.4,0,0,0,12.52,9.17Z" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="8"/></svg>');
}

form.glsr-form.testimonial-form
  .glsr-star-rating--stars[class*=" s"]
  > span.gl-active,
form.glsr-form.testimonial-form
  .glsr-star-rating--stars[class*=" s"]
  > span.gl-active.gl-selected {
  background-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256"><rect width="256" height="256" fill="none"/><path d="M128,189.09l54.72,33.65a8.4,8.4,0,0,0,12.52-9.17l-14.88-62.79,48.7-42A8.46,8.46,0,0,0,224.27,94L160.36,88.8,135.74,29.2a8.36,8.36,0,0,0-15.48,0L95.64,88.8,31.73,94a8.46,8.46,0,0,0-4.79,14.83l48.7,42L60.76,213.57a8.4,8.4,0,0,0,12.52,9.17Z" fill="%2347D3EF" stroke="%2347D3EF" stroke-linecap="round" stroke-linejoin="round" stroke-width="8"/></svg>');
}

form.glsr-form.testimonial-form
  .glsr-field-is-invalid
  .glsr-star-rating--stars[class*=" s"]
  > span {
  background-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256"><rect width="256" height="256" fill="none"/><path d="M128,189.09l54.72,33.65a8.4,8.4,0,0,0,12.52-9.17l-14.88-62.79,48.7-42A8.46,8.46,0,0,0,224.27,94L160.36,88.8,135.74,29.2a8.36,8.36,0,0,0-15.48,0L95.64,88.8,31.73,94a8.46,8.46,0,0,0-4.79,14.83l48.7,42L60.76,213.57a8.4,8.4,0,0,0,12.52,9.17Z" fill="none" stroke="%23e02424" stroke-linecap="round" stroke-linejoin="round" stroke-width="8"/></svg>');
}

/* Button unten volle Breite */
.glsr-default .testimonial-form > :last-child {
  /* margin-top: var(--wp--preset--spacing--sm-24-r); */
  grid-column: 1 / -1;
}

/* Button styles */
.glsr-default .testimonial-form button.glsr-button {
  border-radius: 8px;
  background-color: var(--wp--preset--color--foreground);
  color: var(--wp--preset--color--primary-foreground);
  padding-inline: var(--wp--preset--spacing--sm-24-r);
  padding-block: var(--wp--preset--spacing--xs-12-r);
}

/* Failed message volle Breite */
.testimonial-form.glsr-review-form.glsr-form
  .glsr-form-message.glsr-form-failed {
  grid-column: 1 / -1;
}

/* Error rechts */
.testimonial-form.glsr-review-form.glsr-form .glsr-field-error {
  grid-column: 2 / 3;
}

/* Success volle Breite */
.testimonial-form.glsr-review-form.glsr-form
  .glsr-form-message.glsr-form-success {
  grid-column: 1 / -1;
}

/* Profile pic conteiner, volle Breite */
.testimonial-form.glsr-review-form.glsr-form .profile-picture-container {
  grid-column: 1 / -1;
  margin: 0;
}

/* Sowohl picker als auch Vorschau rechts, untereinander */
.testimonial-form.glsr-review-form.glsr-form
  .profile-picture-container
  .crop-container {
  grid-column: 2 / 3;
  margin: 0;
}

.testimonial-form.glsr-review-form.glsr-form
  .profile-picture-container
  > :last-child {
  grid-column: 2 / 3;
}

/* Keine AUßencontainer Padding und kleinere Abstände auf Mobile */
@media (max-width: 640px) {
  .glsr.glsr-default.glsr-ltr:has(
      .testimonial-form.glsr-review-form.glsr-form
    ) {
    border: none;
    padding: unset;
  }

  .testimonial-form.glsr-review-form.glsr-form {
    overflow-x: auto;
    display: grid;
    grid-template-columns: 0.2fr 1fr;
    row-gap: var(--wp--preset--spacing--sm-16-r);
    column-gap: var(--wp--preset--spacing--sm-16-r);
  }
}

/* Für sehr kleine Geräte Label und Feld untereinander */
@media (max-width: 295px) {
  /* Form */
  .testimonial-form.glsr-review-form.glsr-form {
    display: flex;
    flex-direction: column;
    gap: 0;
  }

  /* Label */
  .testimonial-form.glsr-review-form.glsr-form .glsr-label {
    margin-bottom: var(--wp--preset--spacing--xxs-6);
  }

  /* Felder (erste 3), Sterne, Toggle */
  .glsr-default
    form.glsr-form.testimonial-form
    input.glsr-input:not(.wp-block-search__input),
  .glsr-default form.glsr-form.testimonial-form select.glsr-select,
  .glsr-default form.glsr-form.testimonial-form textarea.glsr-textarea,
  .glsr-default
    form.glsr-form.testimonial-form
    .glsr-field.glsr-field-rating
    .glsr-star-rating,
  .glsr-default
    form.glsr-form.testimonial-form
    .glsr-field.glsr-field-choice
    .glsr-field-toggle {
    margin-bottom: var(--wp--preset--spacing--sm-16-r);
  }

  /* Profile Pic Selector */
  .testimonial-form.glsr-review-form.glsr-form
    .profile-picture-container
    .crop-container,
  .testimonial-form.glsr-review-form.glsr-form
    .profile-picture-container
    .preview-container {
    margin-bottom: var(--wp--preset--spacing--sm-16-r);
  }

  /* Profile Pic Selector - prevent overflow */
  .testimonial-form.glsr-review-form.glsr-form
    .profile-picture-container
    .crop-container
    .cropper-canvas {
    min-width: unset;
  }
}