/* Order widget: add to cart button */
.addtocart{
    background-color: #0271e3;
    color: white;
    font-weight: 400;
    font-size: 15px;
    border-radius: 30px;
    padding: 10px 20px;
    border: none;
}

/* Add more button icon offset */
.add-style{
    margin-top: 3px;
}

/* Fullscreen modal */
#editModal .modal-dialog {
    max-width: 100% !important;
    width: 100%;
    height: 100vh;
    margin: 0;
    padding: 0;
}

#editModal .modal-content {
    height: 100vh;
    border-radius: 0;
    border: none;
    display: flex;
    flex-direction: column;
}

#editModal .modal-body {
    flex: 1;
    overflow: hidden;
    padding: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
}

#editModal .modal-body > div {
    max-height: none !important;
    height: 100%;
    width: 100%;
    overflow: visible;
}

/* Cropper container на всю висоту */
#editModal .cropper-container {
    max-height: calc(100vh - 150px) !important;
    height: calc(100vh - 150px) !important;
    width: 100% !important;
}

#editModal .modal-header,
#editModal .modal-footer {
    flex-shrink: 0;
}
.cropper-modal {
background-color: #d6e9f2;
opacity: 1;
}
    #editModal .modal-header, #editModal .modal-footer{
        background-color: #d6e9f2;
    }


  #editModal   .modal-body {
position: relative;
padding: 15px;
background-color: #d6e9f2;
}
    /* Preloader styles */
#crop-loader {
    text-align: center;
}

#crop-loader .spinner {
    width: 50px;
    height: 50px;
    margin: 0 auto;
    border: 4px solid #f3f3f3;
    border-top: 4px solid #3498db;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Ховаємо зображення поки завантажується */
#cropper-image.loading {
    opacity: 0;
}

/* ===== Framer topbar controls ===== */
.framer-edit-topbar{
  width:100%;
  display:flex;
  justify-content:center;
}
.framer-edit-topbar .edit-controls{
  width:100%;
  max-width:340px;
  margin:0 auto;
  padding:12px 16px;
  box-sizing:border-box;
}

/* stack everything */
.framer-controls{
  width:100%;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:14px;
}
/* because markup has two anonymous wrappers */
.framer-controls > div{
  width:100%;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:12px;
}

/* rotate buttons */
.framer-rotate{
  display:flex;
  gap:12px;
  justify-content:center;
}
.framer-rotate .btn{
  min-width:48px;
}

/* size + save button */
.framer-controls .col-md-6{
  float:none;
  width:100%;
  padding:0;
  text-align:center;
}
.framer-controls .size_info{
  display:block;
}
.framer-save-crop{
  display:block;
  width:100%;
  max-width:260px;
    font-size: 12px;
}

.b-rotate{
    background: white;
    border:0;
    border-radius: 50%;
    font-size: 18px;
    color: black;
    padding: 6px 10px;
}

/* === Zoom slider === */
.framer-zoom{
  display:flex;
  align-items:center;
  padding: 0 10px;
  min-width: 160px;
  width: 260px;
  max-width: 55vw;
}
.framer-zoom-range{
  -webkit-appearance:none;
  appearance:none;
  width:100%;
  height:4px;
  border-radius:999px;
  background:#000;
  outline:none;
}
.framer-zoom-range::-webkit-slider-runnable-track{
  height:4px;
  border-radius:999px;
  background:#000;
}
.framer-zoom-range::-webkit-slider-thumb{
  -webkit-appearance:none;
  appearance:none;
  width:22px;
  height:22px;
  border-radius:50%;
  background:#e6e6e6;
  border:2px solid #000;
  cursor:pointer;
  margin-top:-8px;
}
.framer-zoom-range::-moz-range-track{
  height:6px;
  border-radius:999px;
  background:#000;
}
.framer-zoom-range::-moz-range-thumb{
  width:22px;
  height:22px;
  border-radius:50%;
  background:#e6e6e6;
  border:2px solid #000;
  cursor:pointer;
}
@media (max-width: 480px){
  .framer-zoom{ width: 180px; max-width: 60vw; padding: 0 8px; }
  .framer-zoom-range::-webkit-slider-thumb{ width:20px; height:20px; margin-top:-7px; }
  .framer-zoom-range::-moz-range-thumb{ width:20px; height:20px; }
}

/* Size-save row */
.size-save-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  width:100%;
}

.size-save-row .left{
  flex:1 1 auto;
  min-width:0;
  font-size:18px;
  color:#444;
}

.size-save-row .right{
  flex:0 0 auto;
}

.size-save-row .right .framer-save-crop{
  border-radius:10px;
  font-weight:500;
  white-space:nowrap;
}

.size-save-row{
    position: relative;
    bottom:120px;
}