/* HanAnHua application v141 — photo guide auto badges.
   Source photos remain clean: red X and green check badges are generated by the website. */

.photo-guide-visual .photo-guide-example-card.bad .photo-guide-bad-image,
.photo-guide-visual .photo-guide-example-card.good .photo-guide-good-image{
  position:relative;
  display:block;
  width:100%;
  border-radius:10px;
  overflow:hidden;
  isolation:isolate;
}

.photo-guide-visual .photo-guide-example-card.bad .photo-guide-bad-image > img,
.photo-guide-visual .photo-guide-example-card.good .photo-guide-good-image > img{
  display:block;
  width:100%;
  height:auto;
  aspect-ratio:4/5;
  object-fit:cover;
  border-radius:10px;
}

/* Shared badge geometry so green checks and red X marks always match. */
.photo-guide-visual .photo-guide-bad-x,
.photo-guide-visual .photo-guide-good-check{
  --hh-photo-badge-size:26px;
  position:absolute;
  right:7px;
  bottom:7px;
  z-index:3;
  box-sizing:border-box;
  width:var(--hh-photo-badge-size);
  height:var(--hh-photo-badge-size);
  display:grid;
  place-items:center;
  border:2.5px solid #fff;
  border-radius:50%;
  color:#fff;
  font-family:Arial,Helvetica,sans-serif;
  font-size:20px;
  font-weight:900;
  line-height:1;
  text-align:center;
  box-shadow:0 1px 3px rgba(0,0,0,.16);
  pointer-events:none;
  user-select:none;
}

.photo-guide-visual .photo-guide-bad-x{ background:#ff111b; }
.photo-guide-visual .photo-guide-good-check{ background:#22c55e; }

@media(max-width:860px){
  .photo-guide-visual .photo-guide-bad-x,
  .photo-guide-visual .photo-guide-good-check{
    --hh-photo-badge-size:25px;
    font-size:19px;
    right:7px;
    bottom:7px;
  }
}

@media(max-width:620px){
  .photo-guide-visual .photo-guide-bad-x,
  .photo-guide-visual .photo-guide-good-check{
    --hh-photo-badge-size:24px;
    font-size:18px;
    border-width:2px;
    right:6px;
    bottom:6px;
  }
}