/* Basisstijl uploader */
.wc-muurcirkel-uploader-wrapper {
    border: 1px solid #eee;
    padding: 15px;
    margin: 15px 0;
    background: #fff;
}

.wc-muurcirkel-uploader-wrapper h3 {
    margin-top: 0;
}

.wc-muurcirkel-upload-field {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
}

#wc-muurcirkel-file {
    display: none;
}

.wc-muurcirkel-select-button {
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.wc-muurcirkel-file-name {
    font-size: 12px;
    color: #555;
}

.wc-muurcirkel-editor {
    display: none;
    flex-direction: column;
    gap: 15px;
    margin-top: 10px;
}

.wc-muurcirkel-editor.is-visible {
    display: flex;
}

.wc-muurcirkel-canvas-container {
    /* Beperk formaat via breedte; hoogte volgt uit aspect-ratio (voorkomt "squeeze") */
    width: min(100%, 450px);

    /* Dynamische aspect-ratio (wordt gezet via JS), met fallback naar 1/1 */
    aspect-ratio: var(--wc-muurcirkel-aspect, 1 / 1);

    position: relative;
}

/* Rechthoek variant: geen afgeronde hoeken */
.wc-muurcirkel-uploader-wrapper.wc-muurcirkel-shape-rect #wc-muurcirkel-canvas {
    border-radius: 0;
}

.wc-muurcirkel-uploader-wrapper.wc-muurcirkel-shape-rect .wc-muurcirkel-safe-margin {
    border-radius: 0;
}



/* Veilige marge overlay (alleen zichtbaar als er een afbeelding is geupload) */
.wc-muurcirkel-safe-margin {
    position: absolute;
    inset: 0;
    border: 1px dashed rgba(255, 77, 166, 0.85); /* roze stippellijn */
    border-radius: 50%;
    background: transparent;
    box-sizing: border-box;
    pointer-events: none;
    display: none;
    z-index: 100;
}

.wc-muurcirkel-canvas-container.has-image.show-bleed-line .wc-muurcirkel-safe-margin {
    display: block;
}

#wc-muurcirkel-canvas {
    width: 100%;
    height: 100%;
    display: block;
    background: #ffffff;
    border-radius: 50%;
    border: none !important;
    box-shadow: none !important;
}

.wc-muurcirkel-canvas-container canvas {
    touch-action: none;
}


.wc-muurcirkel-controls {
    flex: 1;
    min-width: 180px;
    font-size: 13px;
}

.wc-muurcirkel-controls label {
    display: block;
    margin-bottom: 10px;
}

height: 0;
}

.wc-muurcirkel-switch-slider {
    position: absolute;
    inset: 0;
    background-color: #c4c4c4; /* UIT */
    border-radius: 22px;
    transition: background-color 0.2s;
}

.wc-muurcirkel-switch-slider:before {
    content: "";
    position: absolute;
    width: 18px;
    height: 18px;
    left: 2px;
    top: 2px;
    background-color: #fff;
    border-radius: 50%;
    transition: transform 0.2s;
}

.wc-muurcirkel-switch input:checked + .wc-muurcirkel-switch-slider {
    background-color: #244994; /* AAN */
}

.wc-muurcirkel-switch input:checked + .wc-muurcirkel-switch-slider:before {
    transform: translateX(20px);
}

/* Slider rows with icons */
.wc-muurcirkel-slider-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 6px;
}

.wc-muurcirkel-slider-row input[type="range"] {
    flex: 1 1 auto;
    min-width: 0;
}

.wc-slider-icon {
    width: 18px;
    height: 18px;
    flex: 0 0 18px;
    display: inline-block;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 18px 18px;
    opacity: 1;
}

/* Simpele vergrootglas +/− icons (lichtgrijs) */
.wc-slider-icon-zoom-out {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23c4c4c4' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='11' cy='11' r='7'/><line x1='21' y1='21' x2='16.65' y2='16.65'/><line x1='8' y1='11' x2='14' y2='11'/></svg>");
}
.wc-slider-icon-zoom-in {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23c4c4c4' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='11' cy='11' r='7'/><line x1='21' y1='21' x2='16.65' y2='16.65'/><line x1='11' y1='8' x2='11' y2='14'/><line x1='8' y1='11' x2='14' y2='11'/></svg>");
}

/* Rotatie icons (lichtgrijs) */
.wc-slider-icon-rotate-left {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23c4c4c4' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M3 12a9 9 0 0 1 15.36-6.36'/><polyline points='3 4 3 10 9 10'/><path d='M21 12a9 9 0 0 1-15.36 6.36'/></svg>");
}
.wc-slider-icon-rotate-right {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23c4c4c4' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M21 12a9 9 0 0 0-15.36-6.36'/><polyline points='21 4 21 10 15 10'/><path d='M3 12a9 9 0 0 0 15.36 6.36'/></svg>");
}

/* Upload icoon (zelfde stijl als zoom/draaien icons) */
.wc-slider-icon-upload {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23c4c4c4' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4'/><polyline points='17 8 12 3 7 8'/><line x1='12' y1='3' x2='12' y2='15'/></svg>");
}

/* Sliders (zelfde lichtgrijs als de icons) */
.wc-muurcirkel-controls input[type="range"] {
    width: 100%;
    accent-color: #c4c4c4;
}

/* WebKit */
.wc-muurcirkel-controls input[type="range"]::-webkit-slider-runnable-track {
    height: 4px;
    background: #c4c4c4;
    border-radius: 999px;
}
.wc-muurcirkel-controls input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: #244994; /* bolletje blijft blauw */
    margin-top: -5px; /* center on 4px track */
    border: none;
}

/* Firefox */
.wc-muurcirkel-controls input[type="range"]::-moz-range-track {
    height: 4px;
    background: #c4c4c4;
    border-radius: 999px;
}
.wc-muurcirkel-controls input[type="range"]::-moz-range-thumb {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: #244994; /* bolletje blijft blauw */
    border: none;
}

/* Upload: prullenbak-icoon (zelfde stijl als zoom/draaien icons) */
.wc-muurcirkel-change-image {
    width: 18px;
    height: 18px;
    display: inline-block;
    line-height: 1;
    text-decoration: none;
}

.wc-slider-icon-trash {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23c4c4c4' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='3 6 5 6 21 6'/><path d='M19 6l-1 14a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2L5 6'/><path d='M10 11v6'/><path d='M14 11v6'/><path d='M9 6V4a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v2'/></svg>");
}

.wc-muurcirkel-quality {
    margin-top: 5px;
    font-size: 12px;
}

.wc-muurcirkel-max-size {
    margin-top: 6px;
    font-size: 12px;
    color: #555;
}

.wc-muurcirkel-max-size-label {
    font-weight: 600;
    margin-right: 4px;
}

.wc-muurcirkel-controls .wc-muurcirkel-actions {
    margin-top: 8px;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.wc-muurcirkel-controls .wc-muurcirkel-actions .button {
    font-size: 12px;
    padding: 2px 8px;
    line-height: 1.4;
    background: #fff;
    color: #666;
    font-weight: 400;
    border: 1px solid #666;
}


/* Loader */

/* Volledige pagina-overlay loader */
.wc-muurcirkel-page-loader {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(255, 255, 255, 0.7);
    display: none;
    z-index: 99999;
}

.wc-muurcirkel-page-loader-inner {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
}

.wc-muurcirkel-page-spinner {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    border: 4px solid rgba(0, 0, 0, 0.15);
    border-top-color: #007cba;
    animation: wc-muurcirkel-page-spin 0.8s linear infinite;
    margin: 0 auto 12px;
}

.wc-muurcirkel-page-loader-text {
    font-size: 13px;
    color: #333;
}

@keyframes wc-muurcirkel-page-spin {
    to { transform: rotate(360deg); }
}

.wc-muurcirkel-loader {
    display: none;
    margin-top: 10px;
}

.wc-muurcirkel-loader-bar {
    width: 100%;
    height: 4px;
    background: #e0e0e0;
    border-radius: 2px;
    overflow: hidden;
    margin-bottom: 5px;
}

.wc-muurcirkel-loader-bar span {
    display: block;
    width: 0;
    height: 100%;
    background: #007cba;
    transition: width 0.2s linear;
}

.wc-muurcirkel-loader-text {
    font-size: 12px;
    color: #555;
}

/* Previews & thumbnails */
.wc-muurcirkel-thumb {
    display: inline-block;
    max-width: 150px;
    max-height: 150px;
    height: auto;
}

.wc-muurcirkel-thumb-circle {
    border-radius: 50%;
    object-fit: cover;
    /* Force a square box so border-radius:50% is actually a circle (not an oval). */
    width: 150px !important;
    height: 150px !important;
    max-width: 150px !important;
    max-height: 150px !important;
}

.wc-muurcirkel-thumb-small {
    width: 32px !important;
    height: 32px !important;
}

.wc-muurcirkel-line-preview {
    display: inline-block;
    margin-right: 6px;
    vertical-align: middle;
}

.wc-muurcirkel-line-preview-qty {
    margin-right: 8px;
}

.wc-muurcirkel-edit-link {
    margin-top: 4px;
}

.wc-muurcirkel-edit-link a {
    font-size: 12px;
}

/* Lijsten met meerdere thumbnails */
.wc-muurcirkel-thumb-list {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 4px;
    vertical-align: middle;
}

.wc-muurcirkel-thumb-wrap {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.wc-muurcirkel-thumb-list-inline {
    margin-top: 4px;
}

.wc-muurcirkel-thumb-list-admin {
    margin-bottom: 4px;
}

/* Accordion / meerdere afbeeldingen */
.wc-muurcirkel-design-list {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
    flex-wrap: wrap;
}

.wc-muurcirkel-design-item {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    border: 1px solid #ddd;
    padding: 0;
    background: #fff;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* Status ring: rood (geen upload) / groen (wel upload) */
.wc-muurcirkel-design-item.no-image {
    border-color: #e72326;
}

.wc-muurcirkel-design-item.has-image {
    border-color: #93ba6d;
}

.wc-muurcirkel-design-item.is-active {
    /* Laat de statuskleur (rood/groen) staan; alleen extra highlight voor selectie */
    /* box-shadow: 0 0 0 2px #244994 inset;*/
}

/* Geselecteerde cirkel: cijfer vet */
.wc-muurcirkel-design-item.is-active .wc-muurcirkel-design-thumb-label {
    font-weight: 700;
}

.wc-muurcirkel-design-thumb-inner {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border-radius: 50%;
}

.wc-muurcirkel-design-thumb-label {
    font-size: 12px;
    color: #555;
}

.wc-muurcirkel-design-thumb-inner img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
}

.wc-muurcirkel-design-body {
    padding: 10px 0 8px;
    background: #fff;
}

/* Plus-button */
.wc-muurcirkel-add-design {
    margin-top: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    border: 2px dashed #007cba;
    background: transparent;
    padding: 0;
    cursor: pointer;
    color: #007cba;
}

.wc-muurcirkel-add-design.button {
    background: transparent;
    box-shadow: none;
}

.wc-muurcirkel-add-circle {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    border: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    line-height: 1;
    font-size: 20px;
}

.wc-muurcirkel-add-label {
    display: none;
}

/* Admin download container */
.wc-muurcirkel-admin-downloads {
    margin-top: 5px;
}


.wc-muurcirkel-save-wrapper {
    display: none;
    margin-top: 10px;
    text-align: right;
}

.wc-muurcirkel-save-wrapper.is-visible {
    display: block;
}

.wc-muurcirkel-save-button {
    margin-top: 0;
}

/* Hide add-design button */
.wc-muurcirkel-add-design { display: none !important; }


#wc-muurcirkel-canvas {
    cursor: grab;
}

.wc-muurcirkel-canvas-dragging #wc-muurcirkel-canvas {
    cursor: grabbing;
}

.wc-muurcirkel-upload-field .wc-muurcirkel-change-image {
    margin-left: 8px;
    cursor: pointer;
}

.wc-muurcirkel-upload-field .wc-muurcirkel-change-image:hover {
    opacity: 0.85;
}


/* Slider styling: track lichtgrijs, thumb blijft blauw */
.wc-muurcirkel-uploader-wrapper input[type="range"]{
  -webkit-appearance:none;
  appearance:none;
  width:100%;
  height:4px;
  background:transparent; /* track wordt via pseudo-elementen gestyled */
  outline:none;
}

/* WebKit (Chrome/Safari/Edge) – track */
.wc-muurcirkel-uploader-wrapper input[type="range"]::-webkit-slider-runnable-track{
  height:4px;
  background:#c4c4c4;
  border-radius:2px;
}

/* WebKit – thumb */
.wc-muurcirkel-uploader-wrapper input[type="range"]::-webkit-slider-thumb{
  -webkit-appearance:none;
  appearance:none;
  width:14px;
  height:14px;
  background:#244994;
  border-radius:50%;
  cursor:pointer;
  margin-top:-5px; /* centreer thumb op 4px track */
}

/* Firefox – track */
.wc-muurcirkel-uploader-wrapper input[type="range"]::-moz-range-track{
  height:4px;
  background:#c4c4c4;
  border-radius:2px;
}

/* Firefox – progress (links van thumb) ook lichtgrijs */
.wc-muurcirkel-uploader-wrapper input[type="range"]::-moz-range-progress{
  height:4px;
  background:#c4c4c4;
  border-radius:2px;
}

/* Firefox – thumb */
.wc-muurcirkel-uploader-wrapper input[type="range"]::-moz-range-thumb{
  width:14px;
  height:14px;
  background:#244994;
  border-radius:50%;
  cursor:pointer;
  border:none;
}

/* IE/Legacy Edge – track */
.wc-muurcirkel-uploader-wrapper input[type="range"]::-ms-track{
  height:4px;
  background:transparent;
  border-color:transparent;
  color:transparent;
}
.wc-muurcirkel-uploader-wrapper input[type="range"]::-ms-fill-lower,
.wc-muurcirkel-uploader-wrapper input[type="range"]::-ms-fill-upper{
  background:#c4c4c4;
  border-radius:2px;
}
.wc-muurcirkel-uploader-wrapper input[type="range"]::-ms-thumb{
  width:14px;
  height:14px;
  background:#244994;
  border-radius:50%;
  border:none;
  cursor:pointer;
}

/* Cart/checkout: locked quantity (still visible, but not editable). */
.wc-muurcirkel-qty-locked{
  display:inline-block;
  cursor:pointer;
}
.wc-muurcirkel-qty-locked input[disabled],
.wc-muurcirkel-qty-locked input[readonly],
.wc-muurcirkel-qty-btn-disabled{
  opacity:0.55;
  cursor:not-allowed;
}


/* Rechthoek/vierkant uploader (met 2cm afloop/bleed) */
/* (aspect-ratio staat al op de container; hier alleen rect-specifieke dingen) */
.wc-muurcirkel-uploader-wrapper.wc-muurcirkel-shape-rect #wc-muurcirkel-canvas{
    border-radius: 0;
}
.wc-muurcirkel-thumb-rect {
    object-fit: cover;
    position: relative!important;
}