/* Landing on the reviews. See class-af-review-landing.php for the measurements.
 *
 * Loaded after ux.css ('af-ux' dependency), product pages only. */

/* ------------------------------------------------------------------
   1. The jump to a review anchor is a jump.

   Elementor sets html{scroll-behavior:smooth}, which turns the browser's
   fragment jump into an animation - and XStore cancels that animation half
   way with a scrollTo() of its own while its tabs initialise. With no
   animation there is nothing to cancel. Only while a review anchor is the
   target; every other in-page scroll keeps its smoothness.
   ------------------------------------------------------------------ */
html:has(#reviews:target, #tab-reviews:target, #review_form:target, #respond:target, .comment_container:target){
  scroll-behavior:auto;
}

/* ------------------------------------------------------------------
   2. Where the target sits once landed.

   Clear of whatever header is stuck to the top once the page has scrolled,
   plus a little air: below 1025px that is XStore's fixed mobile header
   (50px), from 1025px the child theme's sticky one (114px at 1440).
   ------------------------------------------------------------------ */
#reviews,
#tab-reviews,
#review_form,
#respond,
#reviews .comment_container{
  scroll-margin-top:66px;
}
@media (min-width:1025px){
  #reviews,
  #tab-reviews,
  #review_form,
  #respond,
  #reviews .comment_container{
    scroll-margin-top:136px;
  }
}

/* Focus is moved to the form's heading, and to the confirmation below, so a
   screen reader starts where the eye does. They are not controls, so no ring:
   ux.css draws one on every [tabindex]:focus-visible with !important, and a
   script-given focus counts as visible, which put a blue box round the
   "thank you" as if it were a button. Real controls keep their ring. */
#reviews #reply-title[tabindex="-1"]:focus,
#reviews .woocommerce-Reviews-title[tabindex="-1"]:focus,
#reviews[tabindex="-1"]:focus,
#tab-reviews[tabindex="-1"]:focus,
#reviews .af-review-pending[tabindex="-1"]:focus{
  outline:none!important;
}

/* ------------------------------------------------------------------
   3. "Mulțumim! Am primit recenzia ta."

   The only confirmation a reviewer gets. It has to read as good news at a
   glance, in the shop's green, and be big enough for a phone held at arm's
   length. Rendered by woocommerce/single-product/review-meta.php.
   ------------------------------------------------------------------ */
#reviews .af-review-pending{
  display:flex;
  align-items:flex-start;
  gap:12px;
  margin:10px 0 12px;
  padding:16px 18px;
  border-radius:14px;
  background:#edf7ee;
  border:1px solid rgba(46,125,50,.28);
  color:#1d1d1f;
  text-align:left;
}
#reviews .af-review-pending__icon{
  flex:0 0 auto;
  width:26px;
  height:26px;
  margin-top:1px;
  color:#2e7d32;
}
#reviews .af-review-pending__body{min-width:0}
#reviews .af-review-pending p{margin:0}
#reviews .af-review-pending__title{
  font-size:18px;
  line-height:1.35;
  font-weight:600;
  text-wrap:balance;
  color:#1b5e20;
}
#reviews .af-review-pending__text{
  margin-top:4px!important;
  font-size:16px;
  line-height:1.5;
  color:#3a3a3c;
}

/* A soft arrival, once, where motion is welcome. */
@media (prefers-reduced-motion:no-preference){
  #reviews .comment_container:target .af-review-pending{
    animation:af-review-arrive .5s cubic-bezier(.2,.8,.2,1) both;
  }
}
@keyframes af-review-arrive{
  from{opacity:0;transform:translateY(6px)}
  to{opacity:1;transform:none}
}

/* ------------------------------------------------------------------
   4. The summary card, when the reviews share the row with the form.

   ux.css lays the card out as three fixed grid columns: score, bars,
   button. From about 992px the list and the form sit side by side, the
   card is only ~470px wide, and the bars column is squeezed to nothing:
   the "Scrie o părere" button then sits on top of the "3 stele" and
   "4 stele" rows, which is where a #reviews visitor lands. A wrapping
   row asks the content instead of the viewport: score and bars side by
   side while they fit, and the button on a line of its own when it does
   not. Phones keep ux.css's single column (below 861px).
   ------------------------------------------------------------------ */
@media (min-width:861px){
  #reviews .af-revsum{
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    column-gap:clamp(18px,3vw,36px);
    row-gap:20px;
  }
  #reviews .af-revsum__score{flex:0 1 170px;min-width:130px}
  #reviews .af-revsum__bars{flex:1 1 190px;min-width:0}
  #reviews .af-revsum__cta{flex:0 0 auto}
}