/*
 * cropper-modal.css — minimal styling for the photo-uploader.js
 * <dialog> overlay that wraps Cropper.js v2's web components.
 *
 * Owner: plan 02-07. Cropper.js v2 itself ships shadow-DOM defaults for
 * its <cropper-*> elements, so we only need to style the outer dialog
 * + the two action buttons.
 *
 * Mobile-first: at viewport widths below 640px the dialog fills the
 * screen and the buttons stack vertically. The 60vh canvas size in
 * photo-uploader.js's HTML template keeps the crop surface large enough
 * to be touch-usable without obscuring the action buttons below.
 */

.photo-cropper-dialog {
  border: none;
  padding: 0;
  width: 90vw;
  max-width: 720px;
  border-radius: 12px;
  background: white;
  color: #1a1a1a;
}

.photo-cropper-dialog::backdrop {
  background: rgba(0, 0, 0, 0.6);
}

.photo-cropper-content {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: 1rem;
}

.photo-cropper-buttons {
  display: flex;
  justify-content: flex-end;
  gap: 0.5rem;
}

.photo-cropper-buttons button {
  padding: 0.5rem 1rem;
  border-radius: 0.375rem;
  border: 1px solid #d4d4d4;
  background: white;
  font-weight: 500;
  cursor: pointer;
  font-size: 0.875rem;
}

.photo-cropper-buttons .photo-cropper-confirm {
  background: #c2410c; /* roxzone-700 */
  color: white;
  border-color: #c2410c;
}

.photo-cropper-buttons .photo-cropper-confirm:hover {
  background: #9a3412;
}

.photo-cropper-buttons .photo-cropper-cancel:hover {
  background: #f5f5f5;
}

@media (max-width: 640px) {
  .photo-cropper-dialog {
    width: 100vw;
    max-width: none;
    height: 100vh;
    border-radius: 0;
  }
  .photo-cropper-buttons {
    flex-direction: column;
  }
  .photo-cropper-buttons button {
    width: 100%;
  }
}