.photo-guidelines-list {
  width: 300px;
  list-style: none;
  padding-left: 0;
  margin: 0 auto 25px;
  text-align: left;
}

.photo-guidelines-list li {
  margin-bottom: 10px;
  position: relative;
  padding-left: 20px;
  text-align: left;
  display: inline-block;
}

/* .photo-guidelines-list li::before {
  content: "★";
  position: absolute;
  left: 0;
  top: 0;
} */

.photo-comparison-wrapper {
  display: flex;
  gap: 20px; /* Optional: space between images */
  margin-bottom: 18px;
}

.photo-example {
  flex: 1; /* Make both items grow equally */
  text-align: center; /* Center the label and icon */
}

.photo-example img {
  width: 100%;
  border-radius: 15px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.06);
  display: block;
}

.label {
  margin-top: 8px;
  font-weight: 600;
  font-size: 15px;
}

.checkmark {
  color: #28a745;
}

.crossmark {
  color: #e53935;
}

/* .ai-file-upload {
  border: 2px dashed #ff9b40;
  background-color: #fff7f0;
  color: #ff9b40;
  padding: 12px 20px;
  border-radius: 10px;
  margin-top: 0;
  cursor: pointer;
  font-weight: 500;
  width: 220px;
  margin-bottom: 10px;
} */
#file-upload-btn.ai-file-upload {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border: 2px dashed #ff9900;
  border-radius: 16px;
  background: #fff;
  color: #ff9900;
  font-weight: 500;
  font-size: 18px;
  padding: 36px 0 28px 0;
  margin: 24px auto;
  width: 45%;
  aspect-ratio: 1 / 1;
  cursor: pointer;
  transition: border-color 0.2s, background 0.2s;
  box-shadow: 0 2px 8px rgba(255, 153, 0, 0.06);
  text-align: center;
  gap: 16px;
}

.ai-file-upload svg {
  vertical-align: middle;
  margin-right: 8px;
}

#photo-preview {
  max-width: 180px;
  border-radius: 10px;
}

.button-row {
  margin-top: 25px;
}

.button-row button {
  margin: 0 10px;
}

/* CROPPER JS */

.hotjar-visible-cropper {
  visibility: visible !important;
  opacity: 1 !important;
  z-index: 9999 !important;
}

/* Cropper.js – Show resize handles on all corners */
/* .cropper-point {
  width: 10px;
  height: 10px;
  background-color: #9136bd; 
  opacity: 0.9;
  border-radius: 50%;
} */

.cropper-box {
  border: 2px solid #f3e6fb;
  margin: 9vh auto;
  text-align: center;
  max-height: 80vh;
  max-width: 400px;
  max-width: 90%;
  background: white;
  padding: 2rem 1rem 0;
  border-radius: 10px;
  overflow-y: auto;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative; /*for Close Icon */
}

/* Make cropper preview not too high */
.cropper-wrapper {
  max-height: calc(100vh - 240px); /* leaves room for instructions/buttons */
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}

#cropper-preview {
  max-height: 100%;
  width: auto;
  object-fit: contain;
  display: block;
}
/*  */

#cropper-preview,
#photo-preview {
  max-width: 100%;
  border-radius: 8px;
}

#photo-preview {
  margin-bottom: 6px;
}

#crop-actions {
}

.btn {
  padding: 10px 16px;
  font-size: 15px;
  border-radius: 6px;
  cursor: pointer;
}

.btn-secondary {
  background-color: #e0e0e0;
  color: #333;
  border: none;
  border-radius: 8px;
}

/* 📱 Cropper Overlay */
.cropper-modal-overlay {
  overflow: auto;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  z-index: 9999;
  justify-content: center;
  align-items: center;
}

/*❌ Close Icon */

.cropper-close-btn {
  position: absolute;
  background: white;
  border-radius: 132px;
  cursor: pointer;
  z-index: 10001;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
  width: 20px;
  height: 20px;
  top: 12px;
  right: 12px;
  border: 1.5px solid #bbbbbb;
  color: #5c3a92;
  max-width: 20px;
  padding: 0;
}

.cropper-close-btn:hover {
  color: #ef8429;
}

/* Cropper Buttons */
#btn-upload-new-photo {
  font-family: Inter;
  font-weight: 500;
  font-size: 14px;
  line-height: 140%;
  letter-spacing: -1%;
  text-align: center;
  background: #fff4ea;
  border: none;
  width: 157.5px;
  height: 36px;
  border-radius: 4px;
  padding-top: 8px;
  padding-right: 10px;
  padding-bottom: 8px;
  padding-left: 10px;
  color: #c6620d;
}

#btn-confirm-crop {
  /* back-to-wizard button in cart page  */
  width: auto;
  padding: 15px 25px;
  background: #ff9233;
  color: white;
  border: none;
  border-radius: 8px;
  font-size: 16px;
  font-weight: 500;
  cursor: pointer;
  font-family: "Inter", sans-serif;
  transition: background 0.3s ease;
  /* text-transform: uppercase; */
  width: 308px;
  border: solid 1px #ef8429;
  min-height: 56px;
}

/* Cropper.js dom elements: */

.cropper-container {
  /* margin: 0 auto; */
}

.cropper-modal {
  opacity: 0.6 !important;
}

/* cropeed area borders */
/* .tom .cropper-view-box {
  display: block;
  height: 100%;
  outline: 1px solid #fff;
  outline-color: #fff;
  overflow: hidden;
  width: 100%;
} */

/* Hide round drag dots (corners) */

/* Reset point style to make them visible but not circles */
/* .cropper-point {
  width: 16px !important;
  height: 16px !important;
  background: transparent !important;
  border: none !important;
  box-sizing: border-box !important;
} */

/* Common corner "L" style */
/* .cropper-point.point-nw,
.cropper-point.point-ne,
.cropper-point.point-sw,
.cropper-point.point-se {
  position: absolute;
} */

/* .cropper-point.point-nw::before,
.cropper-point.point-ne::before,
.cropper-point.point-sw::before,
.cropper-point.point-se::before {
  content: "";
  position: absolute;
  display: block;
  width: 24px !important;
  height: 24px !important;
  border: 3px solid white;
} */

/* Top-left corner */
/* .cropper-point.point-nw::before {
  border-right: none;
  border-bottom: none;
  top: 0;
  left: 0;
} */

/* Top-right corner */
/* .cropper-point.point-ne::before {
  border-left: none;
  border-bottom: none;
  top: 0;
  right: 0;
} */

/* Bottom-left corner */
/* .cropper-point.point-sw::before {
  border-top: none;
  border-right: none;
  bottom: 0;
  left: 0;
} */

/* Bottom-right corner */
/* .tom .cropper-point.point-se::before {
  border-top: none;
  border-left: none;
  bottom: 0;
  right: 0;
  background-color: transparent;
  opacity: 1;
} */

/* Cropper Instructions */
.cropper-instructions strong {
  font-family: Inter;
  font-weight: 400;
  font-size: 16px;
  line-height: 100%;
  letter-spacing: 0%;
  text-align: center;
  color: #100424;
  display: block;
  margin-bottom: 10px;
}

.cropper-instructions {
  font-family: Inter;
  font-weight: 400;
  font-size: 14px;
  line-height: 18px;
  letter-spacing: 0%;
  text-align: center;
  color: #636363;
  margin-top: -16px;
  margin-bottom: 20px;
}

/* Eugene - front of the cropped preview buttons */
.photo-front-prev-buttons {
  display: flex;
  flex-direction: row;
  gap: 16px;
  justify-content: center;
}

.photo-front-prev-buttons button {
  font-family: Inter;
  font-weight: 500;
  font-size: 14px;
  line-height: 140%;
  letter-spacing: -1%;
  text-align: center;
  border: none;
  color: #141b34;
  width: 164px;
  height: 36px;
  gap: 8px;
  border-radius: 4px;
  padding-top: 8px;
  padding-bottom: 8px;
  background: #ededee;
  position: relative;
}

.photo-front-prev-buttons button:hover,
.photo-front-prev-buttons button:focus {
  background: #ff9233;
}

#btn-change-photo::before {
  content: "";
  position: absolute;
  left: 20px;
  top: 50%;
  transform: translateY(-50%);
  width: 16px;
  height: 16px;
  background-image: url("/wp-content/plugins/talesofme-book-form-wizard/assets/images/image-upload-icon.svg");
  background-size: contain;
  background-repeat: no-repeat;
}

#btn-edit-crop::before {
  content: "";
  position: absolute;
  left: 24px;
  top: 50%;
  transform: translateY(-50%);
  width: 16px;
  height: 16px;
  background-image: url("/wp-content/plugins/talesofme-book-form-wizard/assets/images/rotate-crop-icon.svg");
  background-size: contain;
  background-repeat: no-repeat;
}

#btn-change-photo:hover::before {
  background-image: url("/wp-content/plugins/talesofme-book-form-wizard/assets/images/image-upload-hover-icon.svg");
}

#btn-edit-crop:hover::before {
  background-image: url("/wp-content/plugins/talesofme-book-form-wizard/assets/images/rotate-crop-hover-icon.svg");
}
#btn-change-photo:focus::before {
  background-image: url("/wp-content/plugins/talesofme-book-form-wizard/assets/images/image-upload-hover-icon.svg");
}

#btn-edit-crop:focus::before {
  background-image: url("/wp-content/plugins/talesofme-book-form-wizard/assets/images/rotate-crop-hover-icon.svg");
}