/* Photographs on product reviews: the upload field, and the row of thumbs.
 *
 * Two sets of rules, one file. The field is only ever on a product page, the
 * thumbs only ever inside a review, and both are enqueued together because a
 * page that has one always has the other.
 *
 * The palette is the shop's own: #2e7d32 green, the #1d1d1f near-black and the
 * hairline grey ux.css already declares. Nothing here restyles the parent
 * theme's review list; every selector starts at markup this module printed.
 */

/* ------------------------------------------------------------------
   1. The upload field, under "Recenzia ta".
   ------------------------------------------------------------------ */

.af-review-media-field{
  margin:0 0 18px;
}

.af-review-media-field__label{
  display:block;
  font-size:16px;
  font-weight:600;
  color:#1d1d1f;
  margin-bottom:2px;
}

.af-review-media-field__hint{
  margin:0 0 10px;
  font-size:14px;
  line-height:1.45;
  color:#6e6e73;
}

/* The native file input is taken out of the flow rather than set to
   display:none. Hidden inputs cannot be focused, and this one still has to be
   reachable by keyboard - the visible control is its <label>, which the
   browser wires to it for free. */
.af-review-media-field__input{
  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;
}

/* 52px tall, over the 48px this shop holds itself to. The audience is older
   smallholders on a phone held in one hand, often outdoors; a 40px control is
   missed and pressed again. */
.af-review-media-field__button{
  display:inline-flex;
  align-items:center;
  gap:9px;
  min-height:52px;
  padding:0 20px;
  border:2px solid #2e7d32;
  border-radius:10px;
  background:#fff;
  color:#2e7d32;
  font-size:16px;
  font-weight:600;
  line-height:1.2;
  cursor:pointer;
  transition:background .18s ease,color .18s ease;
}

.af-review-media-field__button:hover{
  background:#2e7d32;
  color:#fff;
}

/* The focus ring belongs on the thing the eye sees, not on the 1px input the
   focus actually lands on. */
.af-review-media-field__input:focus-visible + .af-review-media-field__button{
  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-media-field__input:focus + .af-review-media-field__button{
  outline:2px solid #0b65c2;
  outline-offset:2px;
}

.af-review-media-field__input:focus:not(:focus-visible) + .af-review-media-field__button{
  outline:none;
}

/* The chosen files, listed by name so somebody can see what they picked
   before they send it. Rows rather than chips: a Romanian phone photo is
   called something like "IMG_20260918_143012.jpg" and does not fit a chip. */
.af-review-media-field__list{
  list-style:none;
  margin:12px 0 0;
  padding:0;
}

.af-review-media-field__list:empty{
  margin:0;
}

.af-review-media-field__item{
  display:flex;
  align-items:center;
  gap:10px;
  padding:6px 0;
  border-top:1px solid rgba(0,0,0,.08);
}

.af-review-media-field__item:first-child{
  border-top:0;
}

.af-review-media-field__preview{
  flex:0 0 auto;
  width:48px;
  height:48px;
  border-radius:8px;
  object-fit:cover;
  background:#f1f1f3;
}

/* The name and the size are wrapped together, and only the name line is
 * clipped. Measured: with the size as a block child of the name itself, the
 * ellipsis never appeared - a block child turns the name's own text into an
 * anonymous box, which text-overflow does not reach, and a long name like
 * "O-poza-cu-nume-foarte-lung-din-galerie-telefon.jpeg" pushed the whole form
 * wider than the phone. min-width:0 on the wrapper is the other half: without
 * it a flex item refuses to shrink below its content. */
.af-review-media-field__meta{
  flex:1 1 auto;
  min-width:0;
}

.af-review-media-field__name{
  display:block;
  font-size:14px;
  line-height:1.35;
  color:#1d1d1f;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.af-review-media-field__size{
  display:block;
  font-size:12px;
  color:#6e6e73;
}

/* 48x48, and it says "Șterge" to a screen reader. An X drawn at 16px with a
   44px box around it is the usual way this is got wrong. */
.af-review-media-field__remove{
  flex:0 0 auto;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:48px;
  height:48px;
  padding:0;
  border:0;
  border-radius:8px;
  background:transparent;
  color:#6e6e73;
  cursor:pointer;
}

.af-review-media-field__remove:hover{
  background:#f1f1f3;
  color:#b3261e;
}

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

.af-review-media-field__error{
  margin:10px 0 0;
  padding:10px 12px;
  border-radius:8px;
  background:#fdeceb;
  color:#8c1d18;
  font-size:14px;
  line-height:1.45;
}

/* iOS zooms the page whenever a focused field is under 16px. The review form
   is one of the few places on this site with a file input beside text inputs,
   and the zoom on focus is what makes a form feel broken on a phone. */
@media (max-width:767px){
  #commentform input[type="text"],
  #commentform input[type="email"],
  #commentform textarea,
  #commentform select{
    font-size:16px;
  }

  .af-review-media-field__button{
    width:100%;
    justify-content:center;
  }
}

/* ------------------------------------------------------------------
   2. The thumbnails under a review.
   ------------------------------------------------------------------ */

.af-review-media{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin:10px 0 2px;
}

/* Square, so a row of portrait and landscape shots still reads as a row.
   72px on a phone is large enough to tell a feeder from a waterer and small
   enough that four fit across a 360px screen with the review's own padding. */
.af-review-media__thumb{
  display:block;
  width:72px;
  height:72px;
  border-radius:8px;
  overflow:hidden;
  border:1px solid rgba(0,0,0,.08);
  background:#f1f1f3;
  transition:transform .18s ease,border-color .18s ease;
}

.af-review-media__thumb:hover{
  border-color:#2e7d32;
  transform:translateY(-1px);
}

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

.af-review-media__thumb img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
}

@media (min-width:768px){
  .af-review-media__thumb{
    width:88px;
    height:88px;
  }
}