/* "Ți-a fost de ajutor?" and replies, under a product review.
 *
 * The palette is the shop's own, the one review-media.css already uses: the
 * #2e7d32 green, #1b5e20 for green text that has to carry a 7:1 ratio, the
 * #1d1d1f near-black, #6e6e73 grey, #0b65c2 focus blue and #f1f1f3 for a quiet
 * fill. Nothing here invents a colour.
 *
 * Almost every selector starts at markup this module printed. The two
 * exceptions are marked where they appear: the nesting of the reply list,
 * which the parent theme has no rule for at all, and the rating row on the
 * comment form while a reply is being written.
 */

/* ------------------------------------------------------------------
   1. The row under a review.
   ------------------------------------------------------------------ */

.af-review-social {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 20px;
  margin: 14px 0 2px;
}

/* ------------------------------------------------------------------
   2. The helpful vote.
   ------------------------------------------------------------------ */

/* The block is printed with the hidden attribute and revealed by the script.
   A plain [hidden] is beaten by any display rule, so display:none is restated
   here - otherwise the flex below would show the buttons to a visitor whose
   JavaScript never ran, and pressing them would do nothing. */
.af-review-social__vote[hidden] {
  display: none;
}

.af-review-social__vote {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
}

.af-review-social__question {
  font-size: 16px;
  line-height: 1.4;
  color: #1d1d1f;
}

.af-review-social__buttons {
  display: flex;
  gap: 10px;
}

/* 48px is the floor this shop holds itself to and 52 is what it actually
   uses: the audience is older smallholders on a phone held in one hand, often
   with cold or dirty fingers, and a 40px control is missed and pressed twice.
   The count sits inside the button rather than beside it so the whole thing -
   word, number and all - is one target. */
.af-review-social__btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 52px;
  padding: 0 16px;
  border: 2px solid #6e6e73;
  border-radius: 26px;
  background: #fff;
  color: #1d1d1f;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.2;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  transition: background .18s ease, border-color .18s ease, color .18s ease;
}

.af-review-social__btn svg {
  flex: 0 0 auto;
  color: #6e6e73;
  transition: color .18s ease;
}

.af-review-social__btn:hover {
  border-color: #2e7d32;
  color: #1b5e20;
}

.af-review-social__btn:hover svg {
  color: #2e7d32;
}

.af-review-social__btn:focus-visible {
  outline: 2px solid #0b65c2;
  outline-offset: 2px;
}

/* Older engines without :focus-visible fall back to plain :focus, so a
   keyboard user is never left guessing where they are. */
.af-review-social__btn:focus {
  outline: 2px solid #0b65c2;
  outline-offset: 2px;
}

.af-review-social__btn:focus:not(:focus-visible) {
  outline: none;
}

/* The chosen side. Colour alone never carries it: the filled thumb and the
   pressed-in look both change, and aria-pressed says the same thing out loud.
   #1b5e20 on #e7f2e8 is 7.6:1, well past the 4.5 floor. */
.af-review-social__btn[aria-pressed="true"] {
  border-color: #2e7d32;
  background: #e7f2e8;
  color: #1b5e20;
}

.af-review-social__btn[aria-pressed="true"] svg {
  color: #2e7d32;
  fill: #c9e3cb;
}

.af-review-social__btn[disabled] {
  opacity: .6;
  cursor: default;
}

.af-review-social__count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 26px;
  height: 26px;
  padding: 0 7px;
  border-radius: 13px;
  background: #f1f1f3;
  color: #1d1d1f;
  font-size: 14px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.af-review-social__btn[aria-pressed="true"] .af-review-social__count {
  background: #fff;
  color: #1b5e20;
}

/* The number changes under the finger before the server has answered, so it
   gets one short pulse to say that something happened. Anyone who has asked
   for less movement gets none. */
@media (prefers-reduced-motion: no-preference) {
  .af-review-social__count.is-changed {
    animation: af-review-social-bump .22s ease;
  }
}

@keyframes af-review-social-bump {
  0%   { transform: scale(1); }
  45%  { transform: scale(1.22); }
  100% { transform: scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  .af-review-social__btn,
  .af-review-social__btn svg,
  .af-review-social__count {
    transition: none;
  }
}

/* Read out, never seen. The count on its own reads as a bare number. */
.af-review-social__sr {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.af-review-social__note[hidden] {
  display: none;
}

.af-review-social__note {
  flex: 1 0 100%;
  margin: 4px 0 0;
  padding: 10px 12px;
  border-radius: 8px;
  background: #fdeceb;
  color: #8c1d18;
  font-size: 15px;
  line-height: 1.45;
}

.af-review-social__note.is-ok {
  background: #e7f2e8;
  color: #1b5e20;
}

/* ------------------------------------------------------------------
   3. "Răspunde".
   ------------------------------------------------------------------ */

/* A link rather than a second button: replying is the rarer of the two things
   on this row and should not compete with the vote for attention. It still
   gets the full 48px of height, because a 16px underlined word is exactly the
   thing this audience misses. */
.af-review-social__reply .comment-reply-link {
  display: inline-flex;
  align-items: center;
  min-height: 48px;
  padding: 0 4px;
  color: #1b5e20;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.2;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.af-review-social__reply .comment-reply-link:hover {
  color: #14471a;
}

.af-review-social__reply .comment-reply-link:focus-visible {
  outline: 2px solid #0b65c2;
  outline-offset: 2px;
}

/* ------------------------------------------------------------------
   4. "Răspuns de la AccesoriiFerma".
   ------------------------------------------------------------------ */

.af-review-social__badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0 0 8px;
  padding: 5px 12px;
  border-radius: 14px;
  background: #e7f2e8;
  color: #1b5e20;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.3;
}

.af-review-social__badge svg {
  flex: 0 0 auto;
}

/* ------------------------------------------------------------------
   5. The replies themselves.
   ------------------------------------------------------------------ */

/* The parent theme styles .commentlist but has no rule at all for the nested
   list core prints for replies, so without this a reply sits flush against the
   review above it and reads as a second review. Scoped to #reviews so nothing
   on the blog moves. */
#reviews .commentlist .children {
  list-style: none;
  margin: 16px 0 0;
  padding: 0 0 0 14px;
  border-left: 3px solid #c9e3cb;
}

/* .commentlist li carries a bottom rule and 1.5em of padding from the parent
   theme, which is right between two reviews and wrong between a review and the
   answer tucked under it. */
#reviews .commentlist .children > li {
  margin: 0 0 18px;
  padding-bottom: 0;
  border-bottom: 0;
}

#reviews .commentlist .children > li:first-child {
  margin-top: 0;
}

#reviews .commentlist .children > li:last-child {
  margin-bottom: 0;
}

/* ------------------------------------------------------------------
   6. The form, while a reply is being written.
   ------------------------------------------------------------------ */

/* A reply carries no stars, so the rating row is taken off the form rather
   than left there to be filled in and then thrown away. The class is put on
   by the server on the no-JavaScript path and by the script otherwise; the
   select is disabled in both cases, so nothing is sent either way. */
.af-review-social-muted {
  display: none !important;
}

/* ------------------------------------------------------------------
   7. Phones.
   ------------------------------------------------------------------ */

@media (max-width: 480px) {
  /* The question goes on its own line above the buttons: at 360px it and two
     52px pills do not share a row without one of them wrapping mid-word. */
  .af-review-social__vote {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }

  .af-review-social__buttons {
    width: 100%;
  }

  .af-review-social__btn {
    flex: 1 1 0;
    justify-content: center;
  }

  #reviews .commentlist .children {
    padding-left: 10px;
  }
}

/* ------------------------------------------------------------------
   8. The form, once core has moved it under a review.
   ------------------------------------------------------------------ */

/* What breaks, measured on a 1400px window before any of this existed.
 *
 * ux.css styles the review form for the one place WooCommerce prints it: at
 * the foot of the reviews block, inside #review_form_wrapper. There it is
 * 622px wide, laid out as a two-column grid of 303px tracks, with explicit
 * order and grid-column on every row. Core's comment-reply.js then picks the
 * whole of #respond up and drops it inside the review's own <li>, and three
 * things stop being true at once.
 *
 *   - The grid comes with it. The moved form measured 572px wide and still
 *     asked for two 278px columns, inside an indented block 634px wide.
 *
 *   - Name and email collapse. XStore ships
 *     `.comment-respond .comment-form-author{width:33.33%}` and undoes it only
 *     under `#review_form`. Outside that wrapper the rule comes back, so the
 *     name field measured a 92.7px box holding a 67px input - about four
 *     characters - sitting in a 278px column with 185px of nothing beside it.
 *
 *   - The submit runs off the end. At 320px the moved form is 198px wide and
 *     "Trimite răspunsul" needs 225px, so the button finished 6px past the
 *     review's own right edge.
 *
 * The hook is `.af-reply-moved` on #respond, set by review-social.js from
 * where the element actually is rather than from whether a parent is set: the
 * ?replytocom= page load is a reply too, and on that path the form never
 * moves and needs none of this. Nothing below can reach the form at the foot
 * of the page, which measured identically before and after.
 */

/* One column, whatever the window is.
 *
 * Beats the 760px grid in ux.css on specificity (two ids and two classes
 * against one and two), and flex rather than block so ux.css's `order` values
 * still decide the sequence and its 16px gap is still the gap the photo row
 * reaches back through.
 */
#reviews #respond.af-reply-moved .comment-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* Belt and braces against the grid coming back.
 *
 * Inert while the rule above holds - a flex container ignores grid-column.
 * It is here so that if anything ever forces display:grid on this form again,
 * every row still spans both tracks instead of name and email dropping back
 * into 33% of a 278px column. */
#reviews #respond.af-reply-moved .comment-form > p,
#reviews #respond.af-reply-moved .comment-form > div {
  grid-column: 1 / -1;
}

/* Name and email get their width back from XStore's 33.33%, and lose the
 * 1.42em of padding-inline-end that went with it. */
#reviews #respond.af-reply-moved .comment-form-author,
#reviews #respond.af-reply-moved .comment-form-email {
  width: 100%;
  padding: 0;
}

#reviews #respond.af-reply-moved .comment-form-author input,
#reviews #respond.af-reply-moved .comment-form-email input {
  width: 100%;
}

/* The card the moved form sits in.
 *
 * ux.css gives a #respond outside the wrapper the same clamp(20px,2.4vw,30px)
 * of padding the card at the foot of the page has. Under a review the block
 * is already indented, so at 320px that padding was taking 40px of the 240px
 * the review leaves - a sixth of the width spent twice over. The third class
 * on the selector is only there to beat ux.css outright rather than on source
 * order.
 */
#reviews #respond.af-reply-moved.comment-respond {
  max-width: 100%;
  padding: clamp(14px, 1.6vw, 22px);
}

/* The two lines ux.css prints over the form are about writing a review - the
 * heading says "Spune-ți părerea" until core rewrites it, and the note under
 * it asks for the buyer's verdict on the product. Neither is what is being
 * asked for here, and .af-reply-to below says the true thing instead.
 *
 * The heading is clipped rather than removed so the block still has one in
 * the outline for anyone reading the page with a screen reader. */
#reviews #respond.af-reply-moved .comment-reply-title {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

#reviews #respond.af-reply-moved .af-review-why {
  display: none;
}

/* The submit, which was the one thing measured overflowing.
 *
 * At 320px the moved form is 198px wide and "Trimite răspunsul" needed 225px,
 * so the pill finished 6px past the review's own right edge - and an <input>
 * cannot wrap its value, so clamping the width on its own would have cut the
 * word in half rather than moved it.
 *
 * Below 560px it takes the full width of the column instead. The word then
 * measures 169px inside 198px, which is 29px of air, and a full-width primary
 * button is the shape a phone wants anyway. Above that the pill is sized to
 * its words as everywhere else on the shop.
 *
 * The size and the 28px of side padding are not touched: ux.css sets them
 * !important for every submit button on the site, and one button on one form
 * is not the place to start disagreeing with that.
 */
#reviews #respond.af-reply-moved .comment-form input[type="submit"] {
  max-width: 100%;
}

@media (max-width: 560px) {
  #reviews #respond.af-reply-moved .comment-form input[type="submit"] {
    width: 100%;
  }
}

/* ------------------------------------------------------------------
   9. "Răspunzi lui ...", over the moved form.
   ------------------------------------------------------------------ */

/* Built by review-social.js and only ever present while the form is away from
 * home. Before it, the only thing naming the person was the heading core
 * rewrites - 25px of bold with "Renunță" jammed against the last letter of
 * the name with no space, at 55.4 x 18px. Somebody who pressed "Răspunde" on
 * the wrong review had an 18px-tall word as the way back.
 */
.af-reply-to {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 14px;
  margin: 0 0 18px;
  padding: 12px 14px;
  border-radius: 12px;
  background: #e7f2e8;
}

.af-reply-to__who {
  flex: 1 1 180px;
  min-width: 0;
  margin: 0;
  font-size: 16px;
  line-height: 1.35;
  color: #1b5e20;               /* 6.8:1 on #e7f2e8 */
  overflow-wrap: anywhere;      /* a name with no spaces in it still fits */
}

.af-reply-to__who strong {
  font-weight: 700;
}

/* The name and the way out share the first line; the sentence explaining
 * where the answer lands takes the second. Without the order, the sentence's
 * full-width row came between them and pushed "Renunță" onto a third line -
 * the strip measured 138.6px tall at 1400px for two short sentences. */
.af-reply-to__where {
  order: 2;
  flex: 1 0 100%;
  margin: 0;
  font-size: 14.5px;
  line-height: 1.45;
  color: #3c4a3d;               /* 8.2:1 on #e7f2e8 */
}

/* The way out, as a control rather than a word.
 *
 * Three ids and a class, with !important on the colour, because ux.css holds
 * #reviews #cancel-comment-reply-link at #6b6b70!important - grey on grey for
 * a link that at this point is the only way back to writing a review instead
 * of an answer. 48px is the floor this shop holds itself to; the padding puts
 * it at 107 x 48 rather than 55.4 x 18.
 *
 * display is left to the cascade on purpose: core sets style.display on this
 * element itself, '' while the form is moved and 'none' when it is put back,
 * so the inline style has to stay the thing that decides whether it is seen.
 */
#reviews #respond.af-reply-moved #cancel-comment-reply-link.af-reply-to__cancel {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  min-height: 48px;
  margin: 0;
  padding: 0 22px;
  border: 2px solid #1b5e20;
  border-radius: 24px;
  background: #fff;
  color: #1b5e20 !important;    /* 7.9:1 on white */
  font-size: 16px;
  font-weight: 700;
  line-height: 1.2;
  text-decoration: none;
  order: 1;
}

#reviews #respond.af-reply-moved #cancel-comment-reply-link.af-reply-to__cancel:hover {
  background: #1b5e20;
  color: #fff !important;       /* 7.9:1 the other way round */
}

#reviews #respond.af-reply-moved #cancel-comment-reply-link.af-reply-to__cancel:focus-visible,
#reviews #respond.af-reply-moved #cancel-comment-reply-link.af-reply-to__cancel:focus {
  outline: 2px solid #0b65c2;
  outline-offset: 2px;
}

#reviews #respond.af-reply-moved #cancel-comment-reply-link.af-reply-to__cancel:focus:not(:focus-visible) {
  outline: none;
}

/* The arrow sits in the run of text, not beside it, so it is aligned to the
   letters rather than to the line box - a 20px glyph on a 16px line reads
   four pixels high otherwise. */
.af-reply-to__icon {
  vertical-align: -4px;
  color: #2e7d32;
}

@media (max-width: 480px) {
  /* At 320px the review leaves the moved form 198px, and a pill sized to
     "Renunță" beside a name leaves neither enough room to read. The control
     takes its own line and the full width instead - 174 x 48 rather than a
     word squeezed into whatever the name left over. */
  #reviews #respond.af-reply-moved #cancel-comment-reply-link.af-reply-to__cancel {
    flex: 1 0 100%;
  }

  /* Three wrapped lines and a full-width control made the strip 231px tall
     at 320px, over a form already 925px long. The room around the text is
     what gives way, not the text. */
  .af-reply-to {
    gap: 8px 12px;
    padding: 10px 12px;
  }

  .af-reply-to__where {
    font-size: 14px;
    line-height: 1.4;
  }
}