/**
 * Public styles for Visual Logo plugin
 */

/* Button styles */

.visual-logo-modal {
    display: none; /* default hidden */
    position: fixed;
    z-index: 999999;
    inset: 0;
    background-color: rgba(0, 0, 0, 0.7);

    align-items: center;
    justify-content: center;
}
.visual-logo-modal-content{
    margin: auto;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: #fff;
    width: 90%;
    max-width: 1300px;
    border-radius: 10px;
}
.visual-logo-modal.active {
    display: flex;
}
.visual-modal-header {
    position: relative;
    background: #00AF9A;
    padding: 15px;
    border-radius: 10px 10px 0 0;
}

.visual-logo-close {
    position: absolute;
    right: 20px;
    top: 50%;                    
    transform: translateY(-50%);  
    width: 30px;
    height: 30px;
    display: flex;                
    justify-content: center;      
    align-items: center;         
    border-radius: 50%;
    border: 2px solid #fff;
    color: #fff;
    font-size: 20px;              
    cursor: pointer;
    line-height: 1;              
}

.visual-modal-header h2{
    text-align: center;
    margin-bottom:0;
     color: #fff;
     font-size:22px;
}

.visual-logo-modal-body {
    display: flex;
    flex-wrap: wrap;
    padding:30px;
    max-height:80vh;
    height: 100%;
    overflow:auto;
}

.visual-logo-image-container {
    flex: 0 0 70%;
    padding-right: 20px;
}

.visual-logo-controls {
    flex: 0 0 30%;
}


/* Product image and logo overlay */
.visual-logo-product-image-wrapper {
    position: relative;
    width: 100%;        
    max-width: 450px;   
    margin: 0 auto;     
}

.visual-logo-product-image {
    display: block;
    width: 100%;        
    height: auto;       
    margin: 0 auto;     
}




.visual-logo-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.visual-logo-user-logo-container {
    position: absolute;
    max-width: 80%;
    cursor: move;
    pointer-events: auto;
}

/* Hide controls by default */
.visual-logo-user-logo-container .visual-logo-resize-handle,
.visual-logo-user-logo-container .visual-logo-rotate-handle,
.visual-logo-user-logo-container .visual-logo-delete-btn {
    display: none;
}

/* Show controls on selected logo */
.visual-logo-user-logo-container.selected .visual-logo-resize-handle,
.visual-logo-user-logo-container.selected .visual-logo-rotate-handle,
.visual-logo-user-logo-container.selected .visual-logo-delete-btn {
    display: block;
}

/* Add selection indicator */
.visual-logo-user-logo-container.selected {
    outline: 2px dashed #007cba;
    outline-offset: 2px;
}

.visual-logo-user-logo {
    width: 100%;
    height: auto;
    display: block;
}

/* Resize handle styles */
.visual-logo-resize-handle {
    position: absolute;
    width: 12px;
    height: 12px;
    background-color: #0073aa;
    border: 2px solid #fff;
    border-radius: 50%;
    z-index: 1001;
}

.visual-logo-resize-handle.top-left {
    top: -6px;
    left: -6px;
    cursor: nw-resize;
}

.visual-logo-resize-handle.top-right {
    top: -6px;
    right: -6px;
    cursor: ne-resize;
}

.visual-logo-resize-handle.bottom-left {
    bottom: -6px;
    left: -6px;
    cursor: sw-resize;
}

.visual-logo-resize-handle.bottom-right {
    bottom: -6px;
    right: -6px;
    cursor: se-resize;
}

#visual-logo-upload-form{
    margin-bottom:0;
}
/* Rotation handle */
.visual-logo-rotate-handle {
    position: absolute;
    top: -25px;
    left: 50%;
    transform: translateX(-50%);
    width: 20px;
    height: 20px;
    background: #007cba;
    border: 2px solid #fff;
    border-radius: 50%;
    cursor: grab;
    z-index: 1001;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    color: #fff;
}

.visual-logo-rotate-handle:active {
    cursor: grabbing;
}

.visual-logo-rotate-handle:hover {
    background: #005a87;
}

/* Rotate icon using CSS */
.visual-logo-rotate-handle::before {
    content: "↻";
    font-size: 14px;
    font-weight: bold;
    line-height: 1;
    display: block;
    text-align: center;
    vertical-align: middle;
    margin-top: -1px; /* Fine-tune vertical alignment */
}

/* Delete button */
.visual-logo-delete-btn {
    position: absolute;
    top: -35px;
    right: -12px;
    width: 24px;
    height: 24px;
    background: #dc3545;
    border: 2px solid #fff;
    border-radius: 50%;
    color: #fff;
    font-size: 14px;
    font-weight: bold;
    line-height: 20px;
    text-align: center;
    cursor: pointer;
    z-index: 1002;
}

.visual-logo-delete-btn:hover {
    background: #c82333;
}

/* Upload form styles */
.visual-logo-upload-section {
    margin-bottom: 20px;
}
.visual-logo-upload-section h3{
    font-size:22px;
}
/* Download section styles */
.visual-logo-download-section {
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid #ddd;
}

.visual-logo-download-section h3 {
    margin-top: 0;
    margin-bottom: 10px;
    color: #333;
}

.visual-logo-download-section p {
    margin-bottom: 15px;
    color: #666;
    font-size: 14px;
}

.visual-logo-file-input {
    margin-bottom: 15px;
}

.visual-logo-file-input input[type="file"] {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
}

.visual-logo-file-input label,.visual-logo-file-input label:hover {
    display: inline-block;
    cursor: pointer;
    border-radius: 50px;
    background: #9D9D9D;
    color: #fff;
    font-size: 14px;
    padding: 13px 20px;
}

.visual-logo-file-name {
    margin-left: 10px;
    font-style: italic;
}

.visual-logo-error {
    color: #d63638;
    margin-top: 10px;
    font-size:14px;
}

#visual-logo-file-name{
    word-break: break-all;
    line-height:normal;
    font-size:14px;
}
/* Action buttons */
.visual-logo-actions {
    margin-top: 20px;
}

.visual-logo-actions button {
    margin-right: 10px;
}

/* Position info */
.visual-logo-position-info {
    margin-top: 15px;
    text-align: center;
    font-style: italic;
}

/* Image selection tabs */
.visual-logo-image-selection {
    margin-bottom: 20px;
    text-align: center;
}

.visual-logo-image-tabs {
    display: flex;
    gap: 15px;
    align-items: center;
    max-width: 90%;
    margin-inline: auto;
    margin-bottom: 15px;
}

.visual-logo-tab-button {
    width: 100%;
    background: transparent;
    border: 1px solid #A5A5A5;
    border-radius: 50px;
    color: #A5A5A5;
    transition: all 0.3s ease;
    font-family:"Arial Rounded MT Pro - Bold", sans-serif;
    font-size: 14px;
    padding-block:12px;
}

.visual-logo-tab-button:hover {
    background: transparent;
    color:#A5A5A5;
    border: 1px solid #A5A5A5;
}

.visual-logo-tab-button.active {
    background: #FF671D;
    color: #fff;
     border: 1px solid #FF671D;
}


.visual-logo-image-info {
    font-style: italic;
}

/* Color swatches styles */
.visual-logo-color-swatches {
    margin-bottom: 20px;
}

.visual-logo-color-swatches h3 {
    font-size: 22px;
    margin-bottom: 10px;
}

/* Selected color display */
.visual-logo-selected-color {
      margin-top: 10px;
    font-size: 14px;
    font-weight: 500;
    padding:10px;
    background-color: #f7f7f7;
    border-radius: 3px;
    display: inline-block;
    width:max-content;
}

.visual-logo-selected-color-label {
    font-family:"Arial Rounded MT Pro - Bold", sans-serif;
    margin-right: 5px;
}

.visual-logo-selected-color-name {
    color: #000000;
}

.visual-logo-color-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 10px;
}

.visual-logo-color-swatch,
.visual-logo-swatches-container .evp-color-swatch,
.visual-logo-swatches-container .evp-grid-swatch {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    cursor: pointer;
    border: 1px solid #000;;
    overflow: hidden;
    transition: all 0.2s ease;
    position: relative;
    margin: 0px;
}

.visual-logo-color-swatch.active,
.visual-logo-swatches-container .evp-color-swatch.active,
.visual-logo-swatches-container .evp-grid-swatch.active {
    border-color: #00AF9A;
    transform: scale(1.1);
    box-shadow: 0 0 0 2px rgba(0, 175, 154, 0.3);
}

.visual-logo-color-swatch .color-swatch,
.visual-logo-swatches-container .evp-color-swatch .swatch-inner,
.visual-logo-swatches-container .evp-grid-swatch .swatch-inner {
    display: block;
    width: 100%;
    height: 100%;
}

/* Custom tooltip styles for color swatches */
.visual-logo-color-swatch,
.visual-logo-swatches-container .evp-color-swatch,
.visual-logo-swatches-container .evp-grid-swatch {
    position: relative;
}

.visual-logo-color-swatch::after,
.visual-logo-swatches-container .evp-color-swatch::after,
.visual-logo-swatches-container .evp-grid-swatch::after {
    content: attr(title);
    position: absolute;
    bottom: -30px;
    left: 50%;
    transform: translateX(-50%);
    background-color: rgba(0, 0, 0, 0.8);
    color: white;
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 12px;
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s, visibility 0.2s;
    z-index: 100;
    pointer-events: none;
}

.visual-logo-color-swatch:hover::after,
.visual-logo-swatches-container .evp-color-swatch:hover::after,
.visual-logo-swatches-container .evp-grid-swatch:hover::after {
    opacity: 1;
    visibility: visible;
}

/* Support for multi-color swatches with conic gradients */
.visual-logo-color-swatch[style*="conic-gradient"],
.visual-logo-color-swatch[style*="linear-gradient"],
.visual-logo-swatches-container .evp-color-swatch[style*="conic-gradient"],
.visual-logo-swatches-container .evp-color-swatch[style*="linear-gradient"],
.visual-logo-swatches-container .evp-grid-swatch[style*="conic-gradient"],
.visual-logo-swatches-container .evp-grid-swatch[style*="linear-gradient"] {
    overflow: hidden;
    position: relative;
}

/* Fix for Safari which has issues with conic gradients */
@media not all and (min-resolution:.001dpcm) {
    @supports (-webkit-appearance:none) {
        .visual-logo-color-swatch[style*="conic-gradient"],
        .visual-logo-color-swatch[style*="linear-gradient"],
        .visual-logo-swatches-container .evp-color-swatch[style*="conic-gradient"],
        .visual-logo-swatches-container .evp-color-swatch[style*="linear-gradient"],
        .visual-logo-swatches-container .evp-grid-swatch[style*="conic-gradient"],
        .visual-logo-swatches-container .evp-grid-swatch[style*="linear-gradient"] {
            border-radius: 50%;
        }
    }
}

/* Style for the loading indicator */
.visual-logo-loading {
    text-align: center;
    padding: 15px;
    font-style: italic;
    color: #666;
}

/* Styles for EVP swatches container when cloned into our modal */
.visual-logo-swatches-container .evp-color-swatches-container {
    margin: 0;
    padding: 0;
}

.visual-logo-swatches-container .evp-color-swatches {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 15px;
    justify-content: flex-start;
}

.visual-logo-swatches-container .evp-selected-color-name {
    margin-top: 5px;
    margin-bottom: 10px;
    font-style: italic;
}

/* Common color classes for swatches */
.color-black { background-color: #000000; }
.color-white { background-color: #ffffff; }
.color-bottle-green, .color-bottle-green-2 { background-color: #0B6623; }
.color-bright-red { background-color: #FF0000; }
.color-bright-royal { background-color: #4169E1; }
.color-burgundy { background-color: #800020; }
.color-classic-red { background-color: #B22222; }
.color-french-navy { background-color: #002147; }
.color-light-oxford { background-color: #C4C4C4; }
.color-purple { background-color: #800080; }
.color-sky { background-color: #87CEEB; }

/* WooCommerce specific colors */
.color-black, .color-black-2 { background-color: #000000; }
.color-bottle-green, .color-bottle-green-2 { background-color: #0B6623; }
.color-bright-red, .color-bright-red-2 { background-color: #FF0000; }
.color-bright-royal, .color-bright-royal-2 { background-color: #4169E1; }
.color-burgundy, .color-burgundy-2 { background-color: #800020; }
.color-classic-red, .color-classic-red-2 { background-color: #B22222; }
.color-french-navy, .color-french-navy-2 { background-color: #002147; }
.color-light-oxford, .color-light-oxford-2 { background-color: #C4C4C4; }
.color-purple, .color-purple-2 { background-color: #800080; }
.color-sky, .color-sky-2 { background-color: #87CEEB; }

 .visual-logo-upload-button .upload-visual-btn,
 .visual-logo-upload-button .upload-visual-btn:focus{
  color: #fff !important;
    background: #00a591 !important;
    text-decoration: none !important;
    text-align: center;
    display: block !important;
    margin-left: auto;
    width: 100% !important;
    margin-right: auto;
    padding: 13px 30px !important;
    border-radius: 50px !important;
    font-family: 'Arial Rounded MT Pro - Bold' !important;
    font-size: 14px !important;
    transition: all 0.3s ease;
    font-weight: initial !important;
}

.download-visual-btn{
width: 100%;
    background: transparent !important;
    color: #DF1683 !important;
    border: 1px solid #DF1683 !important;
    transition: all 0.3s ease;
    border-radius: 50px !important;
    padding: 13px 7px !important;
    font-family: 'Arial Rounded MT Pro - Bold' !important;
    font-size: 14px !important;
    transition: all 0.3s ease;
}
.download-visual-btn:hover{
    width:100%;
    background: transparent !important;
    color: #DF1683 !important;
    border:1px solid #DF1683!important;
}

.visual-logo-button{
    background: #ff671d !important;
    width:100%!important;
}
@media(min-width:768px){
.visual-logo-upload-button .upload-visual-btn:hover {
    background: #26b3a2;
    color: #fff;
  }
  .visual-logo-button:hover {
    background: #ff7f3f;
    color: #fff;
  }
}
@media (max-width: 768px) {
    .visual-logo-upload-button .upload-visual-btn{
        width:max-content!important;
        margin-left:0;
    }
    .visual-modal-header{
        justify-content:left;
    }
    .visual-logo-close{
        right:15px;
    }
    .visual-logo-image-container,
    .visual-logo-controls {
        flex: 0 0 100%;
        padding-right: 0;
    }
    
    .visual-logo-controls {
        margin-top: 20px;
    }
    .visual-logo-modal-body {
    max-height:90vh;
    }
}
@media(min-width:1200px){
    .visual-logo-modal-body{
        display: grid;
        grid-template-columns: 2fr 1fr;
    }
}
.main-selected-box{
    border: 1px solid #E0E0E0;
    padding: 15px;
    border-radius: 10px;
    margin-bottom: 15px;
}