/* Reusable modal styles */
#textEditorModal .modal-overlay {
position: fixed;
top: 0; left: 0;
width: 100%; height: 100%;
background: rgba(0, 0, 0, 0.5);
display: flex; align-items: center; justify-content: center;
z-index: 10000; color: #666;
}
#textEditorModal .modal-box {
background: white;
padding: 20px;
width: 320px;
border-radius: 8px;
position: relative;
text-align: center;
font-family: helvetica, arial, sans-serif;
font-size: 15px; 
}
#textEditorModal .modal-button {margin: 10px; color:#111;border: 1px solid #949494 !important;background: #e2e2e2;padding: 6px 8px;border-radius: 3px;}
#textEditorModal .modal-button:hover, .closeicon:hover {cursor:pointer;opacity:0.8;}
#textEditorModal .modal-box textarea {width: 100%;}
#textEditorModal .modal-box p { font-size:14px; margin: 0 0 15px;}
/* Reusable modal styles */

#textEditorModal_mt,
#textEditorModal {
    display: none;

    position: fixed;
    z-index: 999999;

    left: 0;
    top: 0;

    width: 100%;
    height: 100%;

    background: rgba(0, 0, 0, 0.55);
}


#textEditorModal.open {
    display: block;
}


#textEditorClose {
    position: fixed;
    z-index: 1000001;
    top: 0px;
    right: 25px;
    font-size: 28px;
    cursor: pointer;
  color: #f6f6f6;
  font-family: oswaldicon2,sans-serif;
  font-style: normal;
  font-variant: normal;
  text-rendering: auto;
}

#textEditorClose::before { content:'\2296';}


#bgChooser,
#imageEditor {
    position: absolute;

    left: 40px;
    top: 20px;

    width: calc(100vw - 80px);
    height: calc(100vh - 40px);

    box-sizing: border-box;

    border-radius: 15px;

    overflow: hidden;

    background-color: #fff;

    background-image:
        linear-gradient(45deg, #e7e7e7 25%, transparent 25%),
        linear-gradient(-45deg, #e7e7e7 25%, transparent 25%),
        linear-gradient(45deg, transparent 75%, #e7e7e7 75%),
        linear-gradient(-45deg, transparent 75%, #e7e7e7 75%);

    background-size: 16px 16px;

    background-position:
        0 0,
        0 8px,
        8px -8px,
        -8px 0;
}


/*
 * BACKGROUND CHOOSER
 */

#bgChooser {
    display: flex;

    align-items: center;
    justify-content: center;
}


#bgDropZone {
    width: min(620px, calc(100% - 50px));

    min-height: 365px;

    padding: 30px;

    box-sizing: border-box;

    border: 2px dashed #b7b7b7;

    background: rgba(250, 250, 250, 0.96);

    display: flex;

    flex-direction: column;

    align-items: center;
    justify-content: center;
}


#bgDropZone.dragover {
    border-color: #0787ff;

    background: #f2f9ff;
}


.uploadIcon {
    margin-bottom: 20px;

    color: #666;

    font-size: 62px;
    line-height: 1;
}


.uploadTitle {
    margin-bottom: 20px;

    color: #666;

    font-size: 20px;
    font-weight: bold;
}


#chooseBgImage {
    padding: 11px 27px;

    border: 0;

    border-radius: 8px;

    background: #4a4;
    color: #fff;

    font-size: 14px;

    cursor: pointer;

	font-weight: bold;
}


.orText {
    margin: 20px 0;

    color: #555;
}


.bgChoices {
    display: flex;

    gap: 32px;

    flex-wrap: wrap;

    justify-content: center;
}


.bgChoice {
    color:#222;

    padding: 0;

    border: 0;

    background: none;

    cursor: pointer;

    display: flex;

    flex-direction: column;

    align-items: center;

    gap: 8px;

	flex: 1 1 0;
    
	min-width: 0;
}


.bgChoice span {
    display: block;

    width: 40px;
    height: 40px;

    border: 1px solid #999;

    border-radius: 50%;
}


.transparentChoice span {
    background-color: #fff;

    background-image:
        linear-gradient(45deg, #ddd 25%, transparent 25%),
        linear-gradient(-45deg, #ddd 25%, transparent 25%),
        linear-gradient(45deg, transparent 75%, #ddd 75%),
        linear-gradient(-45deg, transparent 75%, #ddd 75%);

    background-size: 10px 10px;

    background-position:
        0 0,
        0 5px,
        5px -5px,
        -5px 0;
}


.whiteChoice span {
    background: #fff;
}


.blackChoice span {
    background: #000;
}


.redChoice span {
    background: #e73420;
}


/*
 * EDITOR
 */

#imageEditor {
    display: none;
}


#editorCanvasArea {
    position: absolute;

    left: 0;
    top: 0;

    width: 100%;
    height: calc(100% - 120px); 

    display: flex;

    align-items: center;
    justify-content: center;

    overflow: hidden;
}


#canvasHolder {
    display: flex;

    align-items: center;
    justify-content: center;

    max-width: calc(100% - 40px);
    max-height: calc(100% - 40px);
}


.canvas-container {
    margin: auto;
}


/*
 * SELECTED OBJECT TOOLBAR
 */

#objectToolbar {
    display: none;

    position: absolute;

    z-index: 50;

    left: 50%;
    bottom: 75px;

    transform: translateX(-50%);

    max-width: 100%;

    padding: 9px 12px;

    border-radius: 9px;

    background: #333;

    color: #fff;

    align-items: center;

    gap: 12px;

	overflow-x: auto;
    overflow-y: hidden;
    flex-wrap: nowrap;
    -webkit-overflow-scrolling: touch;
}


#objectToolbar__ {
    display: none;

    position: absolute;

    z-index: 50;

    left: 50%;
    bottom: 75px;

    transform: translateX(-50%);

    max-width: calc(100% - 30px);

    padding: 9px 12px;

    border-radius: 9px;

    background: #333;

    color: #fff;

    align-items: center;

    gap: 12px;
}


#objectToolbar.show {
    display: flex;
}


#objectToolbar button {
    padding: 5px 8px;

    border: 0;

    background: transparent;

    color: #fff;

    cursor: pointer;
}


#objectToolbar label {
    display: flex;

    align-items: center;

    gap: 7px;

    font-size: 12px;
}


#objectOpacity {
    width: 100px;
}


/*
 * BOTTOM TOOLBAR
 */

#editorToolbar {
    position: absolute;

    left: 0;
    bottom: 0;

    width: 100%;
    height: 62px;

    box-sizing: border-box;

    background: #fff;  

    display: flex;

    align-items: center;
    justify-content: center;

    gap: 24px;
}


#editorToolbar button {
    padding: 8px 10px;

    border: 0;

    background: none;

    font-size: 14px;

    cursor: pointer;

	color:#222;

	white-space: nowrap;

}


#editorSaveWrap {
    position: relative;
}


#saveFormatMenu {
    display: none;

    position: absolute;

    right: 0;
    bottom: calc(100% + 8px);

    min-width: 90px;

    padding: 6px;

    box-sizing: border-box;

    border: 1px solid #ddd;
    border-radius: 10px;

    background: #fff;

    box-shadow:
        0 4px 18px rgba(0, 0, 0, 0.16);

    z-index: 100;
}


#saveFormatMenu.show {
    display: block;
}


.saveFormatChoice {
    display: block;

    width: 100%;

    padding: 9px 14px !important;

    border: 0 !important;
    border-radius: 6px !important;

    background: #fff !important;

    text-align: left;

    cursor: pointer;
}


.saveFormatChoice:hover {
    background: #f2f2f2 !important;
}

.upper-canvas {
    border: 2px solid rgba(0, 0, 0, 0.25);
	border-style:dashed;
    box-sizing: border-box;
}



#plainSizeChooser {
    margin-top: 22px;

    display: flex;
    align-items: center;
    justify-content: center;

    gap: 7px;

    color: #666;

    font-size: 13px;
}


#plainSizeChooser input {
    width: 76px;

    padding: 7px 8px;

    box-sizing: border-box;

    border: 1px solid #ccc;
    border-radius: 6px;

    background: #fff;

    color: #333;

    font-size: 14px;

    text-align: center;
}


#plainSizeChooser input:focus {
    border-color: #0787ff;

    outline: none;
}

#textEditorModal {
    touch-action: manipulation;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}

body.editor-open {
    overflow: hidden;
}


#opacityPopup {
    display: none;
}

#opacityToggle {
    margin: 0;
}
#opacityPopup.show {
    display: block;
}


#objectOpacity {
    width: 110px;
	margin: 0;
    vertical-align: middle;
}


#opacityControl,#alignControl, #layerControl, #chainControl {
    display: flex;
    align-items: center;
    gap: 6px;


}


#alignOptions, #layerOptions, #chainOptions {
    display: none;
    align-items: center;
    gap: 4px;

	padding: 4px;

    border-radius: 7px;

    background: #282828;
  border-radius: 20px;
  color:black; 
  border: 1px solid #444;
}


#alignOptions.show, #layerOptions.show, #chainOptions.show {
    display: flex;
}

#chainOptions a {
 
    padding: 0 7px;

    border-radius: 5px;

    white-space: nowrap;

    text-decoration: none;
    font-family: 'oswaldicon2';
    

}

#chainOptions a::after {
    opacity: 0;
    transition: opacity 0.15s ease;
}

#chainOptions a.preparing::after {
    opacity: 1;
}

#chainOptions a.preparing::after {
    content: "";
    display: inline-block;
    width: 14px;
    height: 14px;
    margin-left: 7px;
    vertical-align: middle;

    border: 2px solid rgba(0,0,0,0.2);
    border-top-color: currentColor;
    border-radius: 50%;

    animation: chainPreparingSpin 0.7s linear infinite;
}

@keyframes chainPreparingSpin {
    to {
        transform: rotate(360deg);
    }
}

.objectOptions span::before, #editorToolbar span::before, .editor-button > span:first-child { 
  font-family: oswaldicon2,sans-serif;
  display: inline-block;
  font-style: normal;
  font-variant: normal;
  text-rendering: auto;
  padding-right: 5px;
}

.objectOptions span::before { color: #4a4; }

.objectOptions span:hover::before {
    color:white; transform: scale(1.2,1.2);
}

#editorToolbar span:hover::before { color: #383838; transform: scale(1.2,1.2);}
#editorToolbar span::before { color: #383838; font-size:16px;}

.delcanvas::before { content: '\274c';}
.bgcanvas::before {content: '\2b14';}
.canvasadd::before { content: '\2740';}
.canvasdl::before {  content:'\2193';}
.ofront::before {content:'\27f0';} .oback::before {content:'\27f1';}
.oforward::before {content:'\290a';}.obackward::before {content:'\290b';}

.oleft::before {content:'\2962';}
.oright::before {content:'\2964';}
.otop::before {content:'\2963';}
.obottom::before {content:'\2965';}
.ocenterh::before {content:'\2966';}
.ocenterv::before {content:'\296e';}

#addtext { cursor: pointer; text-decoration: none;}
.addtexticon::before {content:'\25a7';}


#cropObject.crop-active {
    border: 2px dashed currentColor;
}


.editor-button {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
	font-size: clamp(8px, 2.2vw, 12px);
	white-space: nowrap;
}

.editor-button > span:first-child { color: white; font-size: 15px;}

.fiduplicate::before {content:'\2338';}
.firemove::before {content:'\274e';}
.ficrop::before {content:'\233c';}
.fiopacity::before {content:'\22b7';}
.fialign::before {content:'\234b';}
.filayer::before {content:'\225a';}
.fichain::before {content:'\22d9';}

#keepCurrentBackground { margin-top: 20px;text-decoration: underline;font-size: 12px;}

/*
 * MOBILE
 */

@media (max-width: 600px) {

     #plainSizeChooser {
        margin-top: 18px;
    }


    #plainSizeChooser input {
        width: 72px;
        font-size: 16px;
    }

    #imageEditor {
    touch-action: manipulation;
}

    #bgChooser,
    #imageEditor {
        left: 8px;
        top: 36px; bottom:36px;

        width: calc(100vw - 16px);
        height: auto;

        border-radius: 10px;
    }


    #textEditorClose {
        top: 10px;
        right: 5px;
    }


    #bgDropZone {
        width: calc(100% - 30px);

        min-height: 350px;

        padding: 20px;
    }


    .bgChoices {
        gap: 16px;
    }


    
    #editorToolbar {
        justify-content: center;

        gap: 6px;

        padding: 0 8px;

        overflow:visible;
    }


    #editorToolbar > * {
        flex: 0 0 auto;
    }


    #editorToolbar button {
        padding: 6px 8px;

        font-size: 11px;

        white-space: nowrap;
    }


    #objectToolbar {
        bottom: 72px;

        left: 10px;
        right: 10px;

        transform: none;

        box-sizing: border-box;

        padding: 8px 10px;

        justify-content: flex-start;

        white-space: nowrap;

        scrollbar-width: none;
    }


    #objectToolbar::-webkit-scrollbar {
        display: none;
    }


    #objectToolbar button,
    #objectToolbar label {
        flex: 0 0 auto;
    }


    #objectOpacity {
        width: 90px;
    }

}