.customizer-editor {
    display: flex;
    flex-direction: row;
    position: relative;
    width: 100%;
    z-index: 900; /* Ensure it appears above other content */
    background-color: #FAF9F9;
    padding-top: 180px;
    padding-bottom: 60px;
    gap: 10px;
    flex-wrap: wrap;
}

.customizer-editor.visible1 {
    display: flex;
}

.customizer-editor.hidden-vb1 {
    display: none;
}


@media (max-width: 767px) {
    .customizer-editor{
        background-color: #ffffff;
        margin-top: 50px;
        height: calc(100vh - 160px);
        padding-top: 0;
        padding-bottom: 0;
    }
}








.customizer-design-preview{
    width: calc(60% - 15px);
    margin-left: 10px;
    z-index: 9;
    transition: height 0.2s ease;
}

@media (max-width: 767px) {
    .customizer-design-preview{
        height: 40%;
        width: 100%;
        margin-left: 0;
        background-color: #efefef;
        box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.22);
    }
    
    .customizer-design-preview-pip {
        height: 0;
        width: 100%;
        margin-left: 0;
        background-color: transparent;
        box-shadow: none;
    }
    
    .customizer-design-preview-enlarge{
        height: 70%;
    }
    
    
    .customizer-design-preview-min{
    border-bottom: solid 2px #9c9c9c;
    border-radius: 0;
    }
}






    .empty-container {
        width: 100%;
        height: 100%;
        min-height: 50px; /* Adjust this height as needed */
        background-color: transparent; /* Keep the background transparent */
    }








.customization-options{
    width: calc(40% - 15px);
    margin-right: 10px;
    box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.22);
    transition: height 0.2s ease;
    border-radius: 10px;
}


@media (max-width: 767px) {
    .customization-options{
        order: 1;
        width: calc(100% - 20px);
        margin-right: 10px;
        margin-left: 10px;
        box-shadow: none;
        height: 60%;
        overflow-y: scroll;
        overflow-x: hidden;
        box-sizing: border-box;
    }
    
    .customization-options-pip{
        height: 100%;
    }
    
    .customization-options-enlarge{
        height: 30%;
    }
}







/* layout */
.steps-descriptions {
  display: flex;
  gap: 12px;
  padding: 10px;
  justify-content: center;
  flex-wrap: wrap;                 /* wrap on small screens */
}

.step-desc {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: #222;
  font-weight: 600;
}

/* icon box: consistent size + inner padding so strokes aren't clipped */
.step-desc__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;                     /* tweak size here */
  height: 28px;
  padding: 2px;                    /* small inset avoids edge clipping by strokes */
  flex: 0 0 auto;
}

/* force the inline <svg> to fill the box and avoid cropping */
.step-desc__icon svg {
  width: 100% !important;
  height: 100% !important;
  overflow: visible;               /* don't clip strokes outside viewBox */
}

/* text */
.step-desc__text {
    line-height: 1.2; 
    font-size: 20px;
}











.steps-content-container {
    padding: 10px 0 100px 0;
}



@media (min-width: 768px) {
    
    .steps-content-container {
        padding: 10px 10px 400px 10px;
    }

}







    .selected-background {
        background-color: #6EC1E4 !important; /* Override other background colors */
        transition: background-color 200ms ease-in-out;
    }
    .fpd-item.fpd-hover-thumbnail.fpd-draggable {
        transition: background-color 200ms ease-in-out;
        background-color: #f6f6f6; /* Default background color */
    }
    
    
    
    
    
    
    
    
    
.fpd-container .fpd-grid.fpd-padding {
    padding: 10px;
}


.fpd-container fpd-module-designs .fpd-grid .fpd-item {
    background-color: #efefef;
    box-shadow: 0px 0px 5px rgb(0, 0, 0, 15%);
    border: solid 1px #cdcdcd;
}








.color-selector {
    position: relative;
    width: 100%;
    background-color: #efefef;
    border-radius: 6px;
    padding: 15px;
    box-shadow: 0px 0px 5px rgb(0, 0, 0, 15%);
    border: solid 1px #cdcdcd;
}









    .styled-back-button {
        background-color: transparent !important;
        border: none;
        padding: 0;
        display: flex;
        align-items: center;
        cursor: pointer;
    }

    .styled-back-button img {
        width: 20px;
        height: 20px;
        margin-right: 8px; /* Add space between the icon and text */
    }

    .styled-back-button span {
        font-size: 16px;
        color: #000; /* Text color */
        margin-bottom: -2px;
    }

    .styled-back-button:hover span {
        text-decoration: underline; /* Optional: add underline on hover */
    }
    
    
    
    
    
    
    
    
    
    
    
    #backButton1 {
        margin-bottom: 10px;
    }
    
    
    
    
    
    
    
 /* Ensure radio buttons are displayed one below the other */
.radio-option {
    display: flex;
    align-items: center;
    margin-bottom: 10px; /* Space between options */
}

.radio-option label {
        display: inline-flex;
        align-items: center;
        margin-right: 15px;
        font-size: 16px;
        color: #000000;
    }

    .radio-option input[type="radio"] {
        width: 16px;
        height: 16px;
        margin-right: 5px;
        position: relative;
        cursor: pointer;
    }

    .radio-option input[type="radio"]:checked::before {
        content: '';
        display: block;
        width: 10px;
        height: 10px;
        border-radius: 50%;
        background-color: #6EC1E4;
        position: absolute;
        top: 3px;
        left: 3px;
    } 
    
    
    
    
    
    
    

    
    
/* Wrapper for the QR Code button and Info button */


.qr-code-button-wrapper {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    align-items: flex-start;
}



/* Add QR Code Button */
.add-qr-button {
    padding: 5px;
    border-radius: 5px;
    border: solid 1px #c8ced1 !important;
    background-color: #efefef !important;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: background-color 0.3s ease;
    width: calc(100% - 45px); /* Full width minus the space for the info button */
    box-sizing: border-box;
    margin-bottom: 10px;
}


.add-qr-button img {
    width: 27px;
    height: 24px;
    margin-right: 8px;
    content: url('images/qr-code-icon.png');
}

.add-qr-button:hover,
.add-qr-button:focus {
    background-color: #6ec1e4 !important;
}

.add-qr-button:hover img,
.add-qr-button:focus img {
    content: url('images/qr-code-icon-white.png');
}


.add-qr-button span {
    font-size: 16px;
    color: #000;
    margin-bottom: -4px;
}

.add-qr-button:hover span,
.add-qr-button:focus span {
    color: #fff;
}

/* Info Button */
.qr-info-button {
    width: 45px;
    height: 35px;
    border: solid 1px #c8ced1 !important;
    background-color: #efefef !important;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: background-color 0.3s ease;
    border-radius: 5px;
    margin-left: 5px;
    padding: 0;
}

.qr-info-button img {
    width: 22px;
    height: 22px;
    content: url('images/info-icon.png');
}

.qr-info-button:hover img,
.qr-info-button:focus img {
    content: url('images/info-icon-white.png');
}


.qr-info-button:hover,
.qr-info-button:focus {
    background-color: #6ec1e4 !important;
}



/* Modal styling */
.modal {
    position: absolute;
    z-index: 1000;
    left: 50%;
    top: 50%;
    transform: translate(-53%, -8%);
    background-color: #fff;
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
    padding: 10px;
    width: 300px;
    border-radius: 10px;
    background-color: #353535;
    color: #ffffff;
    opacity: 0.9;
    font-size: 15px;
    box-shadow: 0 0px 15px rgb(0 0 0 / 34%);
}

/* Modal content styling */
.modal-content {
    position: relative;
    text-align: center;
}

/* Styling the arrow in the top-right corner */
.modal-arrow {
    position: absolute;
    top: -10px;
    right: -20px;
    width: 0;
    height: 0;
    border-top: 15px solid transparent;
    border-bottom: 15px solid transparent;
    border-left: 20px solid #353535; /* Arrow color */
    opacity: 0.9;
}    













.background-container {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px 0;
}

.upload-button-container1 {
    padding: 10px;
    margin: 10px 0; /* Adjust as necessary */
}

.upload-button1 {
    background-color: #4CAF50; /* A more vibrant color for visibility */
    border-radius: 5px;
    border: none;
    color: white;
    padding: 8px 16px;
    margin-top: 5px; /* Spacing between text and button */
    cursor: pointer;
    text-align: center;
    transition: background-color 0.3s ease;
    box-shadow: 0 1px 2px rgba(0,0,0,0.15);
}

.upload-button1:hover, .upload-button1:active {
    background-color: #45A045; /* Slightly darker on hover/active */
}

.background-slider1 {
    -webkit-appearance: none;
    appearance: none;
    background: #ffffff;
    outline: none;
    opacity: 0.7;
    -webkit-transition: .2s;
    transition: opacity .2s;
}

.background-slider1:hover {
    opacity: 1;
}

.upload-background-dropzone1 {
    border-color: #ccc; /* Neutral color to not distract from the button */
    color: #666; /* Neutral text color for instructions */
    font-size: 16px; /* Readable text size */
    font-family: Arial, sans-serif; /* Clear, sans-serif font for readability */
}

.upload-background-dropzone1.hover {
    border-color: #666; /* Darker border when hovering */
    background-color: e5e5e5; /* Slight background change to indicate active dropzone */
    transition: all 0.3s ease; /* Smooth transition for visual feedback */
}

.spinner1 {
    border: 4px solid rgba(0,0,0,0.1);
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border-left-color: #09f;
    animation: spin 1s ease infinite;
}

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

.uploaded-images-placeholder1 {
    display: flex;
    flex-wrap: nowrap; /* Ensure single line */
    overflow-x: auto; /* Enable horizontal scrolling */
    max-width: 100%;
}

.uploaded-images-placeholder1 > div {
    flex: 0 0 auto; /* Prevent flex items from shrinking or growing */
    border-radius: 5px; /* Add border radius */
    cursor: pointer; /* Indicate that the backgrounds are clickable */
}

















.selected-template {
    background-color: #6EC1E4 !important; /* Override other background colors */
    transition: background-color 200ms ease-in-out;
}

.fpd-item.fpd-hover-thumbnail {
    transition: background-color 200ms ease-in-out;
    background-color: #f6f6f6; /* Default background color */
}

.template-filters   {
    padding: 0 10px 0 10px;
    display: flex;
    justify-content: space-around;
}

.template-filters label {
        display: inline-flex;
        align-items: center;
        margin-right: 15px;
        font-size: 16px;
        color: #000000;
    }

    .template-filters input[type="radio"] {
        width: 16px;
        height: 16px;
        margin-right: 5px;
        position: relative;
        cursor: pointer;
    }

    .template-filters input[type="radio"]:checked::before {
        content: '';
        display: block;
        width: 10px;
        height: 10px;
        border-radius: 50%;
        background-color: #6EC1E4;
        position: absolute;
        top: 3px;
        left: 3px;
    }
    
    
    
    
    
    
    
    
    
    
    
.fpd-container fpd-module-layouts .fpd-grid>.fpd-item {
    background-color: #efefef;
    box-shadow: 0px 0px 5px rgb(0, 0, 0, 15%);
    border: solid 1px #cdcdcd;
}

.fpd-container .fpd-grid.fpd-padding {
    gap: 10px;
}    



















    .dropdown-button-wrapper {
        display: flex;
        width: 100%; /* Takes the full width to contain the dropdown and button */
        align-items: center;
        gap: 10px; /* Space between dropdown and button */
        justify-content: center; /* Center the dropdown and button horizontally */
        margin-top: 5px;
    }
    

    .custom-fields-wrapper {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 0px;
        width: 100%;
        max-width: 100%;
    }

    .custom-fields-wrapper > div {
        width: 100%;
        border-radius: 6px;
        
        padding-left: 15px;
        padding-right: 15px;
        padding-bottom: 0px;
    }

    .custom-fields-wrapper label {
        font-size: 16px;
        font-weight: normal;
        margin-bottom: 5px; /* Standard bottom margin for all titles */
    }
    
    .custom-fields-wrapper .fpd-font-dropdown-label {
        font-size: 16px;
        font-weight: normal;
        text-align: left; /* Center the text */
        display: block; /* Use block to apply text alignment */
        margin-bottom: 5px; /* 5px margin to the dropdown */
        margin-top: 5px; /* 5px margin to the top element */
    }
    
    .custom-fields-wrapper .font-dropdown-container {
        display: flex;
        flex-direction: column;
        align-items: center; /* Center-align the child elements */
        width: 100%;
        display: inline-block;
    }    
    
    .custom-fields-wrapper > div > label:first-of-type {
        font-size: 18px; /* Main title font size */
        font-weight: bold; /* Main title font weight */
        margin-bottom: 5px; /* Reduced bottom margin for main title */
    }
    
    .custom-fields-wrapper > div > label:not(:first-of-type) {
        font-size: 16px;
        font-weight: normal;
        text-align: left; /* Align text left by default */
    }
    
    .custom-fields-wrapper .fpd-font-dropdown {
        width: 100%;
        height: 40px;
        padding: 4px 10px;
        border-radius: 5px;
        border: 1px solid #ccc;
        font-size: 16px;
        margin-bottom: 5px;
        box-sizing: border-box;
        display: inline-block;
    }
    
    .custom-fields-wrapper .fpd-font-dropdown option {
        font-family: inherit; /* This attempts to apply the font family to options, might not work in all browsers */
    }    

    .custom-fields-wrapper .fpd-element-input {
        display: block;
        border-radius: 5px!important;
        margin-bottom: 5px!important;
        width: calc(100% - 15px);
        padding: 10px 0;
        padding-left: 10px;
        margin: 10px 0;
    }

    .delete-element-button {
        transition: background-color 0.5s ease;
        position: absolute;
        top: 5px;
        right: 5px;
        cursor: pointer;
        width: 20px;
        height: 20px;
        padding: 5px;
        border-radius: 30px;
        background-color: transparent; /* Ensure background is transparent initially */
    }
    
    .delete-element-button.active {
        background-color: #e20000; /* Red background for active state */
        transition: background-color 0.5s ease;
    }
    
    #closePopup:hover {
        background-color: #e20000;
    }
    
    
    .toggle-additional-settings {
        display: block;
        margin: 10px auto; /* Removes bottom margin */
        padding: 6px 30px;
        width: auto;
        cursor: pointer;
        border: 1px solid #ccc;
        background-color: #5ec2eb;
        color: #ffffff;
        border-radius: 5px; /* Top left and top right corners rounded */
        position: relative; /* Needed for absolute positioning of the icon */
    }
    
    .toggle-additional-settings:hover {
        background-color: #4da6c7; /* Slightly darker on hover */
        color: #ffffff;
    }
    
    
    .additional-settings + .toggle-additional-settings {
        margin-top: 10px; /* Ensure there's a margin above the button when additional settings are visible */
    }
    
    .additional-settings {
    width: 100%;
    display: grid;
    margin-top: 15px;
    }
    
    .custom-dropdown {
    position: relative;
    border: 1px solid #ccc;
    cursor: pointer;
    border-radius: 5px;
    }
    
    .custom-dropdown-selected {
        padding: 5px;
        background-color: #fff;
        border-radius: 5px;
    }
    
    .custom-dropdown-selected::after {
        content: "";
        position: absolute;
        right: 10px;
        top: 60%;
        transform: translateY(-50%);
        border: 5px solid transparent;
        border-top-color: #333; /* Arrow color */
    }

    .custom-dropdown-list {
        -webkit-overflow-scrolling: touch;
        scrollbar-width: thin;
        scrollbar-color: #888 #f0f0f0;
        position: absolute;
        width: 100%;
        max-height: 250px; /* Maximum height before scrolling */
        overflow-y: auto; /* Enables vertical scrolling if needed */
        background-color: #fff;
        border: 1px solid #ccc;
        z-index: 10;
        display: none;
        border-radius: 5px;
    }
    
    .custom-dropdown-list::-webkit-scrollbar {
        width: 5px; /* Scrollbar width */
    }

    .custom-dropdown-list::-webkit-scrollbar-thumb {
        background: #888; /* Scrollbar thumb color */
        border-radius: 5px;
    }
    
    .custom-dropdown-list::-webkit-scrollbar-track {
        background: #f0f0f0; /* Scrollbar track color */
    }    
    
    .custom-dropdown-item {
        padding: 5px;
        cursor: pointer;
    }
    
    .custom-dropdown-item:hover {
        background-color: #f0f0f0;
    }

    .add-text-button {
        padding: 5px;
        border-radius: 5px;
        border: solid 1px #c8ced1 !important;
        background-color: #efefef !important;
        cursor: pointer;
        display: flex;
        justify-content: center;
        align-items: center;
        transition: background-color 0.3s ease;
        max-width: 100%;
        width: 400px;
        box-sizing: border-box; /* Include padding in the width calculation */
        margin-bottom: 10px;
    }
    
    .add-text-button img {
        width: 27px; /* Adjust as needed */
        height: 24px; /* Adjust as needed */
        margin-right: 8px; /* Space between icon and text */
        content: url('images/add-text-black.png');
    }
    
    .add-text-button:hover,
    .add-text-button:focus {
        background-color: #6ec1e4 !important;
    }
    
    .add-text-button:hover img,
    .add-text-button:focus img {
        content: url('images/add-text-white.png');
    }

    
    .add-text-button span {
        font-size: 16px; /* Adjust text size as needed */
        color: #000; /* Default text color */
        margin-bottom: -4px;
    }
    
    .add-text-button:hover span,
    .add-text-button:focus span {
        color: #fff; /* Text color on hover */
    }


.step-3{
    display: flex;
    flex-direction: column;
    align-items: center;
}















.color-selection-wrapper {
    display: flex;
    flex-direction: column; /* Stack color selectors vertically */
    align-items: center; /* Center color selectors */
    width: 100%;
    max-width: 100%;
}

.color-selector {
    position: relative; /* Add this line if missing */
    width: 100%; /* Take full width minus some margin */
    background-color: #efefef;
    border-radius: 6px;
    padding: 15px;
    box-shadow: 0px 0px 5px rgb(0, 0, 0, 15%);
    border: solid 1px #cdcdcd;
}

.color-selector label {
    display: block;
    margin-bottom: 10px;
    font-size: 18px;
    font-weight: bold;
}

.color-circles {
    display: flex;
    flex-wrap: wrap;
    justify-content: start;
    gap: 5px;
}

.color-circle {
    width: 27px;
    height: 27px;
    border-radius: 50%;
    cursor: pointer;
    border: 2px solid transparent;
    border-color: #000000;
}

.color-circle.selected {
    border-color: #6EC1E4;
}

.jscolor-input-wrapper {
    margin-top: 10px;
}

.jscolor-input {
    border-radius: 5px;
    width: calc(100% - 45px); /* Make sure the input takes the full width of its container */
    display: block;
    padding: 8px 0;
}

.more-colors {
    font-size: 16px;
    margin-bottom: 5px;
}

















.logo-container {
    display: flex;
    justify-content: center;    
}





.upload-button-container {
    padding: 10px;
    margin: 10px 0; /* Adjust as necessary */
}

.upload-button {
    background-color: #4CAF50; /* A more vibrant color for visibility */
    border-radius: 5px;
    border: none;
    color: white;
    padding: 8px 16px;
    margin-top: 5px; /* Spacing between text and button */
    cursor: pointer;
    text-align: center;
    transition: background-color 0.3s ease;
    box-shadow: 0 1px 2px rgba(0,0,0,0.15);
}

.upload-button:hover, .upload-button:active {
    background-color: #45A045; /* Slightly darker on hover/active */
}
    


.logo-slider {
    -webkit-appearance: none;
    appearance: none;
    background: #ffffff;
    outline: none;
    opacity: 0.7;
    -webkit-transition: .2s;
    transition: opacity .2s;
}

.logo-slider:hover {
    opacity: 1;
}    



.upload-logo-dropzone {
    border-color: #ccc; /* Neutral color to not distract from the button */
    color: #666; /* Neutral text color for instructions */
    font-size: 16px; /* Readable text size */
    font-family: Arial, sans-serif; /* Clear, sans-serif font for readability */
}


.upload-logo-dropzone.hover {
    border-color: #666; /* Darker border when hovering */
    background-color: e5e5e5; /* Slight background change to indicate active dropzone */
    transition: all 0.3s ease; /* Smooth transition for visual feedback */
}


.spinner {
    border: 4px solid rgba(0,0,0,0.1);
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border-left-color: #09f;
    animation: spin 1s ease infinite;
}

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

.uploaded-images-placeholder {
    display: flex;
    flex-wrap: nowrap; /* Ensure single line */
    overflow-x: auto; /* Enable horizontal scrolling */
    max-width: 100%;
}

.uploaded-images-placeholder > div {
    flex: 0 0 auto; /* Prevent flex items from shrinking or growing */
    border-radius: 5px; /* Add border radius */
    cursor: pointer; /* Indicate that the logos are clickable */
}












    .save-button-container {
        width: 100%;
        display: flex;
        justify-content: center;
        margin-top: 20px;
    }
    
    #save-button {
        font-size: 27px;
        border-radius: 5px;
        color: #FFFFFF;
        background-color: #6EC1E4;
        padding: 8px 10px;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
        text-shadow: 0px 0px 4px #00000035;
        width: 100%;
        cursor: pointer;
    }
    
    .view-div[data-view-index="0"],
    .view-div[data-view-index="1"] {
        transition: background-color 0.3s ease;
    }