.wpo-mc-inline{margin:1.5rem 0 0.5rem;}
.wpo-mc-btn{display:inline-block;padding:0.9rem 1.8rem;background:#5cc3cf;color:#fff;border:none;border-radius:4px;font-size:1rem;letter-spacing:0.06em;text-transform:uppercase;cursor:pointer;}
.wpo-mc-btn:hover{background:#45aab6;}
.wpo-mc-btn-disabled{opacity:0.45;cursor:not-allowed;}
.wpo-mc-summary{margin-top:0.35rem;font-size:0.9rem;color:#444;}

.wpo-mc-modal{position:fixed;top:0;left:0;width:100%;height:100%;z-index:9999;display:none;}
.wpo-mc-modal-open{display:block;}
.wpo-mc-modal-backdrop{position:absolute;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,0.4);}
.wpo-mc-modal-dialog{position:relative;max-width:1200px;height:82vh;margin:4vh auto;background:#f7f5f2;border-radius:8px;box-shadow:0 14px 40px rgba(0,0,0,0.25);display:flex;flex-direction:column;padding:1.5rem 1.75rem;}
.wpo-mc-modal-header{border-bottom:1px solid #e0ddd7;padding-bottom:0.8rem;margin-bottom:0.8rem;}
.wpo-mc-modal-header h2{margin:0;font-size:1.25rem;letter-spacing:0.08em;text-transform:uppercase;}
.wpo-mc-modal-subtitle{margin:0.35rem 0 0;font-size:0.9rem;color:#666;}

.wpo-mc-modal-body{flex:1;display:flex;gap:2.25rem;min-height:0;}
.wpo-mc-left{flex:0 0 340px;display:flex;flex-direction:column;justify-content:space-between;}
.wpo-mc-right{flex:1;display:flex;align-items:center;justify-content:center;min-width:0;}

.wpo-mc-dimension-panel{background:#fff;border-radius:6px;padding:1rem 1.1rem;border:1px solid #e0ddd7;}
.wpo-mc-measurement-toggle{display:flex;justify-content:space-between;align-items:center;margin-bottom:0.75rem;font-size:0.82rem;text-transform:uppercase;letter-spacing:0.08em;}
.wpo-mc-hint{font-size:0.75rem;color:#b03855;}

.wpo-mc-dimension-row{display:flex;gap:1rem;margin-bottom:1rem;}
.wpo-mc-dimension-field{flex:1;min-width:0;}
.wpo-mc-dimension-field label{display:block;font-size:0.82rem;text-transform:uppercase;letter-spacing:0.08em;margin-bottom:0.35rem;}

.wpo-mc-dimension-input{
  display:grid;
  grid-template-columns: 1fr auto;
  align-items:stretch;
  border:1px solid #ccc;
  border-radius:6px;
  overflow:hidden;
  background:#faf9f7;
}
.wpo-mc-dimension-input input{
  border:none;
  background:transparent;
  padding:0.7rem 0.85rem;
  font-size:1.05rem;
  line-height:1.3;
  width:100%;
  min-width:0;
  box-sizing:border-box;
}
.wpo-mc-dimension-input input:focus{
  outline:none;
  box-shadow:0 0 0 1px #5cc3cf inset;
}
.wpo-mc-unit-label{
  display:flex;
  align-items:center;
  justify-content:center;
  padding:0.7rem 0.85rem;
  font-size:0.9rem;
  white-space:nowrap;
  background:#eee;
  color:#555;
  border-left:1px solid #ccc;
  text-transform:uppercase;
}

.wpo-mc-unit-toggle{display:flex;gap:1rem;font-size:0.88rem;margin-top:0.25rem;}
.wpo-mc-unit-toggle label{display:flex;align-items:center;gap:0.35rem;cursor:pointer;}
.wpo-mc-unit-toggle input{accent-color:#b03855;}

.wpo-mc-actions{margin-top:1.25rem;}
.wpo-mc-btn-primary{width:100%;padding:0.85rem 1rem;border:none;border-radius:6px;background:#5cc3cf;color:#fff;text-transform:uppercase;letter-spacing:0.08em;font-size:0.95rem;cursor:pointer;}
.wpo-mc-btn-primary:hover{background:#45aab6;}

.wpo-mc-crop-stage{width:100%;height:100%;display:flex;align-items:center;justify-content:center;}
.wpo-mc-crop-wrapper{max-width:100%;max-height:100%;border-radius:6px;overflow:hidden;border:1px solid #ddd;background:#000;}
.wpo-mc-crop-wrapper img{max-width:100%;display:block;}

.wpo-mc-modal-close{position:absolute;top:0.75rem;right:0.9rem;border:none;background:transparent;font-size:1.6rem;cursor:pointer;color:#666;}
.wpo-mc-modal-close:hover{color:#000;}

.wpo-mc-body-lock{overflow:hidden;}

@media (max-width:900px){
  .wpo-mc-modal-dialog{height:90vh;margin:3vh auto;padding:1rem;}
  .wpo-mc-modal-body{flex-direction:column;}
  .wpo-mc-left{flex:0 0 auto;}
}

/* Minimal CropperJS visuals so the crop box is visible even if cropper.min.css is delayed/blocked */
.cropper-container { position: relative; touch-action: none; user-select: none; }
.cropper-container img { max-width: 100%; display: block; }

.cropper-wrap-box,
.cropper-canvas,
.cropper-drag-box,
.cropper-crop-box,
.cropper-view-box {
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
}

.cropper-drag-box { background-color: #fff; opacity: 0.6; }

.cropper-view-box { outline: 1px solid rgba(51,153,255,.8); }

.cropper-crop-box { box-sizing: border-box; }
.cropper-face {
  position: absolute;
  top: 0; left: 0; width: 100%; height: 100%;
  background-color: #fff; opacity: .1;
}

.cropper-line {
  position: absolute;
  display: block;
  background-color: rgba(51,153,255,.8);
}
.cropper-line.line-e,
.cropper-line.line-w { top: 0; width: 1px; height: 100%; }
.cropper-line.line-n,
.cropper-line.line-s { left: 0; width: 100%; height: 1px; }

.cropper-point {
  position: absolute;
  width: 6px; height: 6px;
  background-color: rgba(51,153,255,.9);
}
.cropper-point.point-e { top: 50%; right: -3px; margin-top: -3px; }
.cropper-point.point-w { top: 50%; left: -3px;  margin-top: -3px; }
.cropper-point.point-n { left: 50%; top: -3px;  margin-left: -3px; }
.cropper-point.point-s { left: 50%; bottom: -3px; margin-left: -3px; }
/* Stronger crop box for mural cropper (CA + SA) */

#wpo_mc_modal .cropper-view-box {
  outline: 3px solid rgba(51, 153, 255, 1);      /* brighter border */
}

#wpo_mc_modal .cropper-face {
  background-color: rgba(0, 0, 0, 0.25);         /* darker overlay inside crop */
}

#wpo_mc_modal .cropper-drag-box {
  background-color: rgba(0, 0, 0, 0.8);         /* darker area outside crop */
}

#wpo_mc_modal .cropper-line {
  background-color: rgba(51, 153, 255, 1);       /* brighter edges */
}

#wpo_mc_modal .cropper-point {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: #fff;
  border: 2px solid rgba(51, 153, 255, 1);       /* bigger, white handles */
}

#wpo_mc_modal .cropper-dashed {
  border-color: rgba(255, 255, 255, 0.75);       /* clearer rule-of-thirds grid */
}