/* ==================================================
   Стили сервиса №4 (примерка портрета)
   ================================================== */

.service3-wrapper { font-family: Arial; max-width: 1000px; margin: 0 auto; padding: 20px; background: #f9f7f4; }
.service3-wrapper .upload-area { border: 2px dashed #ccc; border-radius: 16px; padding: 15px; text-align: center; background: white; margin: 10px 0; cursor: pointer; transition: 0.3s; }
.service3-wrapper .upload-area:hover { border-color: #b8a18a; }
.service3-wrapper .upload-area.dragover { border-color: #b8a18a; background: #f5f0ea; }
.service3-wrapper .btn { background: #b8a18a; color: white; border: none; padding: 8px 20px; border-radius: 30px; font-size: 14px; cursor: pointer; }
.service3-wrapper .btn:hover { background: #a08b76; }
.service3-wrapper .btn-secondary { background: #ddd; color: #555; border: none; padding: 6px 16px; border-radius: 20px; cursor: pointer; font-size: 14px; }
.service3-wrapper .btn-secondary:hover { background: #ccc; }
.service3-wrapper .btn-secondary.active { background: #b8a18a; color: white; }
.service3-wrapper .file-name, .service3-wrapper .face-label { margin-top: 5px; color: #888; font-size: 13px; }
.service3-wrapper .canvas-wrapper { margin: 15px 0; position: relative; }
.service3-wrapper canvas { border: 1px solid #ccc; border-radius: 12px; background: #eae5de; max-width: 100%; cursor: grab; touch-action: none; display: block; }
.service3-wrapper canvas:active { cursor: grabbing; }
.service3-wrapper .controls, .service3-wrapper .face-controls { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0; align-items: center; }
.service3-wrapper .controls button, .service3-wrapper .face-controls button { background: #b8a18a; color: white; border: none; padding: 6px 16px; border-radius: 20px; cursor: pointer; font-size: 14px; }
.service3-wrapper .controls button:hover, .service3-wrapper .face-controls button:hover { background: #a08b76; }
.service3-wrapper .controls .btn-secondary { background: #ddd; color: #555; }
.service3-wrapper .controls .btn-secondary:hover { background: #ccc; }
.service3-wrapper .controls .btn-secondary.active { background: #b8a18a; color: white; }
.service3-wrapper .sliders { display: flex; flex-wrap: wrap; gap: 10px; margin: 10px 0; background: white; padding: 12px; border-radius: 12px; align-items: center; }
.service3-wrapper .sliders label { margin-right: 5px; font-size: 14px; }
.service3-wrapper .log { background: #f0ece6; padding: 8px 15px; border-radius: 8px; margin-top: 10px; font-size: 14px; }
.service3-wrapper .crop-shape-toggle { display: inline-flex; flex-wrap: wrap; gap: 4px; background: #e8e0d8; border-radius: 20px; padding: 4px; border: 1px solid #ccc; }
.service3-wrapper .crop-shape-toggle button { border: none; background: #f5f0ea; padding: 4px 10px; border-radius: 16px; cursor: pointer; font-size: 13px; color: #333; border: 1px solid #ccc; }
.service3-wrapper .crop-shape-toggle button.active { background: #b8a18a; color: white; border-color: #b8a18a; }
.service3-wrapper .crop-mode-active { border: 2px solid #f44336 !important; background: #fff3cd !important; }
.service3-wrapper .face-list { display: flex; flex-wrap: wrap; gap: 10px; margin: 10px 0; }
.service3-wrapper .face-item { background: white; padding: 5px 12px; border-radius: 20px; border: 2px solid #ddd; cursor: pointer; font-size: 14px; display: flex; align-items: center; gap: 8px; }
.service3-wrapper .face-item.active { border-color: #b8a18a; background: #f0ece6; }
.service3-wrapper .face-item .remove { color: #e74c3c; cursor: pointer; font-weight: bold; margin-left: 5px; }
.service3-wrapper .face-item .remove:hover { color: #c0392b; }
.service3-wrapper .bg-gallery { display: flex; flex-wrap: wrap; gap: 10px; margin: 10px 0; }
.service3-wrapper .bg-gallery img { width: 80px; height: 50px; object-fit: cover; cursor: pointer; border: 2px solid #ddd; border-radius: 8px; transition: 0.2s; }
.service3-wrapper .bg-gallery img:hover { border-color: #b8a18a; transform: scale(1.05); }
.service3-wrapper #addFaceBtn {
  background: #ffffff !important;
  color: #333 !important;
  border: 2px solid #b8a18a !important;
  box-shadow: 0 2px 8px rgba(0,0,0,0.15);
  font-weight: bold;
}
.service3-wrapper #addFaceBtn:hover {
  background: #f0ece6 !important;
  box-shadow: 0 4px 12px rgba(0,0,0,0.25);
}
.service3-wrapper h2 { margin-top: 0; }
.service3-wrapper .remove { color: #e74c3c; cursor: pointer; font-weight: bold; margin-left: 5px; }
.service3-wrapper .remove:hover { color: #c0392b; }
.service3-wrapper .preview-container { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 10px; }
.service3-wrapper .preview-item { position:relative; width:100px; height:100px; margin:5px; border:1px solid #ccc; border-radius:4px; overflow:hidden; }
.service3-wrapper .preview-item img { width:100%; height:100%; object-fit:cover; }
.service3-wrapper .preview-item .size-label { position:absolute; bottom:0; left:0; right:0; background:rgba(0,0,0,0.5); color:#fff; font-size:10px; text-align:center; }

/* Адаптив для мобильных */
@media (max-width: 768px) {
  .service3-wrapper { padding: 10px; }
  .service3-wrapper h2 { font-size: 20px; }
  .service3-wrapper p { font-size: 14px; }
  .service3-wrapper .btn, .service3-wrapper .btn-secondary { font-size: 12px; padding: 6px 12px; }
  .service3-wrapper .controls { gap: 5px; }
  .service3-wrapper .controls button, .service3-wrapper .face-controls button { font-size: 12px; padding: 4px 10px; }
  .service3-wrapper .sliders { flex-direction: column; align-items: stretch; }
  .service3-wrapper .sliders > div { display: flex; justify-content: space-between; align-items: center; }
  .service3-wrapper .sliders label { font-size: 13px; min-width: 70px; }
  .service3-wrapper .sliders input[type="range"] { width: 100%; }
  .service3-wrapper .log { font-size: 12px; }
  .service3-wrapper .bg-gallery img { width: 60px; height: 40px; }
  .service3-wrapper .face-item { font-size: 12px; padding: 3px 8px; }
  .service3-wrapper .crop-shape-toggle button { font-size: 11px; padding: 3px 6px; }
  .service3-wrapper .crop-shape-toggle button:not(#shapeRect):not(#shapeOval) { display: none; }
}