.service-rating {
  max-width: 1320px;
  margin: 0 auto 40px;
  padding: 0 24px;
  box-sizing: border-box;
  font-family: "IBM Plex Sans Arabic", sans-serif;
}

@media (min-width: 576px) {
  .service-rating { max-width: 540px; }
}
@media (min-width: 768px) {
  .service-rating { max-width: 720px; }
}
@media (min-width: 992px) {
  .service-rating { max-width: 960px; }
}
@media (min-width: 1200px) {
  .service-rating { max-width: 1140px; }
}
@media (min-width: 1400px) {
  .service-rating { max-width: 1320px; }
}

.service-rating__panel[hidden],
.service-rating__success[hidden] {
  display: none;
}

/*
 * Rating bar — Figma: Revamp GEP / Rating (node 2447:12299).
 * A single brand-green rule above the bar, the average sentence and the
 * review count as separate pieces, and 32px stars.
 */
.service-rating__summary,
.service-rating__success {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
  padding: 24px 0;
  border-top: 2px solid var(--primary-sa-600);
}

.service-rating__rate-button {
  order: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 40px;
  padding-inline: 16px;
  border-radius: 4px;
  border: 1px solid var(--primary-sa-600);
  background-color: var(--primary-sa-600);
  color: var(--white);
  /* <button> does not inherit the page font by default in any browser. */
  font-family: inherit;
  font-size: 16px;
  line-height: 24px;
  font-weight: 500;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color .3s ease, border-color .3s ease;
}

.service-rating__rate-button:hover {
  background-color: var(--primary-sa-900);
  border-color: var(--primary-sa-900);
}

.service-rating__summary-text {
  order: 1;
  display: flex;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
}

.service-rating__average {
  margin: 0;
  font-size: 16px;
  line-height: 24px;
  color: #161616;
}

/* t() renders the figure inside <em class="placeholder">. */
.service-rating__average .placeholder {
  font-style: normal;
  font-weight: 700;
}

.service-rating__rating {
  display: flex;
  align-items: center;
  gap: 8px;
}

.service-rating__count {
  font-size: 14px;
  line-height: 20px;
  color: var(--neutral-gray-500);
  white-space: nowrap;
}

.service-rating__summary-label {
  color: var(--neutral-gray-500);
  font-size: 14px;
}

.service-rating__stars,
.service-rating__success-stars {
  display: inline-flex;
  gap: 4px;
}

.service-rating__star {
  width: 32px;
  height: 32px;
  background: url(../../../../themes/custom/asir/images/star-outline.svg) no-repeat center / contain;
}

.service-rating__star.is-filled {
  background-image: url(../../../../themes/custom/asir/images/star-filled.svg);
}

/*
 * Panel (expanded form) — Figma node 2447:12325.
 * The card border and radius are gone: the design continues the same
 * brand-green rule the collapsed bar uses.
 */
.service-rating__panel {
  display: flex;
  flex-direction: column;
  gap: 32px;
  padding: 24px 0;
  border-top: 2px solid var(--primary-sa-600);
  background: var(--white);
  text-align: start;
}

/* Close sits opposite the heading rather than pinned to a corner. */
.service-rating__panel-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap-reverse;
}

.service-rating__panel-intro {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.service-rating__close {
  order: 2;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 40px;
  padding-inline: 16px;
  border: none;
  border-radius: 4px;
  background: none;
  color: #161616;
  /* <button> does not inherit the page font by default in any browser. */
  font-family: inherit;
  font-size: 16px;
  line-height: 24px;
  font-weight: 500;
  white-space: nowrap;
  cursor: pointer;
}

.service-rating__close-icon {
  width: 24px;
  height: 24px;
  background: url(../../../../themes/custom/asir/images/close.svg) no-repeat center / contain;
}

.service-rating__heading {
  margin: 0;
  font-size: 16px;
  line-height: 24px;
  font-weight: 600;
  color: #161616;
  text-align: start;
}

.service-rating__notice {
  margin: 0;
  color: #161616;
  font-size: 14px;
  line-height: 20px;
  text-align: start;
}

.service-rating__form .webform-submission-form {
  text-align: start;
  /* Comment on one side, the rating question and stars on the other. */
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 32px 24px;
}

.service-rating__form .form-item-comment {
  flex: 1 1 480px;
  max-width: 600px;
  margin: 0;
}

.service-rating__form .form-item-rating {
  flex: 0 1 382px;
  margin: 0;
}

.service-rating__form .form-actions {
  flex: 1 1 100%;
  margin: 0;
  display: flex;
  /* The inherited text-align:start would put the button on the same side
     as the "لمزيد من المعلومات" links text below it; Figma puts the button
     at the opposite (logical end) side instead. */
  justify-content: flex-end;
}

.service-rating__form textarea {
  width: 100%;
  min-height: 96px;
  padding: 12px 16px;
  border: 1px solid var(--neutral-gray-400);
  border-radius: 4px;
  background: var(--white);
  font: inherit;
  font-size: 16px;
  line-height: 24px;
  color: #161616;
}

.service-rating__form textarea::placeholder {
  color: var(--neutral-gray-500);
}

.service-rating__form label {
  display: block;
  margin-bottom: 8px;
  font-size: 14px;
  line-height: 20px;
  font-weight: 400;
  color: #161616;
}

.service-rating__form .form-item-rating label {
  font-size: 16px;
  line-height: 24px;
  font-weight: 600;
  margin-bottom: 16px;
}

.service-rating__form .form-actions .webform-button--submit,
.service-rating__form .form-actions input[type="submit"] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 40px;
  padding-inline: 16px;
  border: 1px solid var(--primary-sa-600);
  border-radius: 4px;
  background-color: var(--primary-sa-600);
  color: var(--white);
  /* Neither <button> nor <input type="submit"> inherit the page font by
     default in any browser. */
  font-family: inherit;
  font-size: 16px;
  line-height: 24px;
  font-weight: 500;
  cursor: pointer;
  transition: background-color .3s ease, border-color .3s ease;
}

.service-rating__form .form-actions .webform-button--submit:hover,
.service-rating__form .form-actions input[type="submit"]:hover {
  background-color: var(--primary-sa-900);
  border-color: var(--primary-sa-900);
}

.service-rating__links {
  margin: 0;
  color: #161616;
  font-size: 16px;
  line-height: 24px;
  text-align: start;
}

.service-rating__links a {
  color: var(--primary-sa-600);
  text-decoration: underline;
}

/*
 * Submitted state — Figma node 2447:12350.
 * Confirmation message on one end, the rating the visitor just gave on the
 * other. Two explicit groups (not text/icon/stars as loose flex children):
 * the confirmation text is a fixed translated string from the block, the
 * rating value is filled in by JS once the webform confirms submission.
 */
.service-rating__success-message {
  order: 2;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.service-rating__success-text {
  color: #161616;
  font-size: 16px;
  line-height: 24px;
  font-weight: 400;
}

.service-rating__success-icon {
  display: inline-block;
  width: 24px;
  height: 24px;
  /* checkmark-circle-04 from the Figma design (node 2447:12350), not the
     theme's own check-circle.svg — that one is a different, filled glyph. */
  background: url(../images/checkmark-circle.svg) no-repeat center / contain;
}

.service-rating__success-rating {
  order: 1;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.service-rating__success-value {
  color: #161616;
  font-size: 16px;
  line-height: 24px;
}

.service-rating__success-value .rating-figure {
  font-weight: 700;
}