html, body {
    margin: 0;
    padding: 0;
}

html {
    height: 100%; /* Ensure the full height is used */
}

@font-face {
    font-family: 'ApfelGrotezk-Medium';
    src: url('/fonts/apfelgrotezk/ApfelGrotezk-Medium.otf') format('opentype');
    font-display: swap;
}

body {
    min-height: 100vh;
    background-color: #121212; /* Dark background for the entire page */
    color: #ffffff; /* Light text color */
    font-family: Roboto; /* Optional: Set a default font */
    display: flex;
    flex-direction: column;
    font-family: 'ApfelGrotezk-Medium', sans-serif;
}

.assets-tray {
  position: fixed;
  top: 0;
  right: calc(-20%); /* Adjust right position to show part of the handle */
  width: calc(max(20%, 150px));
  height: 100%;
  background: #333; /* Dark background color */
  color: #fff; /* White text color */
  transition: right 0.3s ease;
  box-shadow: -2px 0 5px rgba(0, 0, 0, 0.2);
  z-index: 1050; /* Ensure it's above other content */
  border-top-left-radius: 10px; /* Add rounded corners */
  border-bottom-left-radius: 10px; /* Add rounded corners */
  display: flex;
  flex-direction: column;
}

.assets-tray:hover,
.assets-tray.show {
  right: 0;
}

#assetsTrayHandle {
  position: absolute;
  top: 50%;
  left: -20px;
  width: 20px;
  height: 40px;
  background: #444; /* Dark handle background color */
  color: #fff; /* White text color */
  text-align: center;
  line-height: 40px;
  cursor: pointer;
  transform: translateY(-50%);
  border-top-left-radius: 5px; /* Add rounded corners */
  border-bottom-left-radius: 5px; /* Add rounded corners */
}

.tray-symbols {
  display: inline-block; /* Make the symbols an inline block for rotation */
  transition: transform 0.3s ease, color 0.3s ease; /* Add transition for rotation and color */
  color: #81AB91; /* Color when tray is closed */
  padding-right: 1px;
  padding-left: 1px;
  font-weight: bold;
}

.assets-tray.show .tray-symbols {
  color: #FEFAC1; /* Color when tray is open */
  font-weight: lighter;
}

.tray-symbols.rotated {
  transform: rotate(180deg); /* Rotate the symbols */
}

.upload-button:focus,
.save-button:focus {
  outline: none;
  box-shadow: inset 0 0 0 3px rgba(129, 171, 145, 0.5);
  outline-offset: -3px;
}

.tray-content {
  display: flex;
  flex-direction: column;
  height: calc(100% - 40px); /* Adjust height to account for the footer */
  position: relative; /* Required for absolute positioning of the button */
}

.tray-content .upload-button,
.tray-content .save-button {
  position: absolute;
  bottom: 40px;
  left: 15px;
  text-align: center;
  box-sizing: border-box;
  padding: 10px 0;
  width: 90%;
}

.tray-content h2 {
    font-size: 24px; /* Default size for larger screens */
    position: relative; /* Needed for the pseudo-element */
    display: inline-block; /* Ensure the underline is properly aligned */
    margin-bottom: 20px;
}

.tray-content h2::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: calc(100% - 10px); /* Adjust width so the line stops before the Y */
    height: 2px; /* Thickness of the underline */
    background-color: currentColor; /* Matches the text color */
}

.upload-section {
  flex: 0 0 auto;
  padding: 20px;
}

#assets-container {
  overflow-y: auto;
  display: inline-flex;
  flex-wrap: wrap;
  align-items: flex-start;
  margin-bottom: 70px;
  justify-content: flex-start;
}

#assets-container img {
  width: 100px;
  margin: 0px;
  margin-left: 13px;
  margin-top: 13px;
  display: block; 
}

.ad-sets-tray {
  position: fixed;
  top: 0;
  left: calc(-20%); /* Adjust left position so only the handle peeks out */
  width: calc(max(20%, 150px));
  height: 100%;
  background: #333; /* Dark background color */
  color: #fff;      /* White text color */
  transition: left 0.3s ease;
  box-shadow: 2px 0 5px rgba(0, 0, 0, 0.2); /* Shift shadow direction for left side */
  z-index: 1050; /* Ensure it's above other content */
  border-top-right-radius: 10px;  /* Rounded corners on the right side */
  border-bottom-right-radius: 10px;
  display: flex;
  flex-direction: column;
}

.ad-sets-tray:hover,
.ad-sets-tray.show {
  left: 0; /* The tray slides in from the left, so animate 'left:0' instead of 'right:0' */
}

.ad-sets-tray:hover .tray-symbols {
  transform: rotate(180deg);
  color: #FEFAC1; /* or whichever color you like */
  transition: transform 0.3s ease, color 0.3s ease;
}

.ad-sets-tray.show .tray-symbols {
  color: #FEFAC1;
  transition: color 0.3s ease;
}


/* Handle for Ad Sets tray */
#adSetsTrayHandle {
  position: absolute;
  top: 50%;
  right: -20px;  /* Because the tray is on the left, the handle itself slides out to the right edge */
  width: 20px;
  height: 40px;
  background: #444; /* Dark handle background color */
  color: #fff;      /* White text color */
  text-align: center;
  line-height: 40px;
  cursor: pointer;
  transform: translateY(-50%);
  border-top-right-radius: 5px;  /* Rounded corners for handle on the right side */
  border-bottom-right-radius: 5px;
}

.ad-sets-tray.show .tray-symbols {
  color: #FEFAC1;  /* Color when tray is open */
  font-weight: lighter;
}


/* Container for listing the ad sets, if you want it scrollable like assets */
#adSets-container {
  overflow-y: auto;
  display: inline-flex;
  flex-wrap: wrap;
  align-items: flex-start;
  margin-bottom: 70px;
  justify-content: flex-start;
}

/* For thumbnails or items in your ad sets container */
#adSets-container img {
  width: 100px;
  display: block;
}

/* =========================
   Layers Tray (Left)
   ========================= */
.layers-tray {
  position: absolute;
  top: 0;
  left: 0;
  width: 104px;
  height: 100%;
  background: #333;
  color: #fff;
  transition: left 0.3s ease;
  box-shadow: 2px 0 5px rgba(0, 0, 0, 0.2);
  z-index: 350; /* Below controls-wrapper and assetsTray */
  border-top-left-radius: 10px;
  border-bottom-left-radius: 10px;
  display: flex;
  flex-direction: column;
}

.layers-tray.show {
  left: -100px; /* Slide in to visible position */
}

#layersTrayHandle {
  position: absolute;
  top: 50%;
  left: -20px;
  width: 20px;
  height: 40px;
  background: #444;
  color: #fff;
  text-align: center;
  line-height: 40px;
  cursor: pointer;
  transform: translateY(-50%);
  border-top-left-radius: 5px;
  border-bottom-left-radius: 5px;
}

.layers-tray.show .tray-symbols {
  color: #FEFAC1; /* Color when tray is open */
  font-weight: lighter;
}

.layers-tray .tray-content {
  display: flex;
  flex-direction: column;
  height: 100%; /* Full height for layersTray */
  position: relative;
}

.layers-tray .tray-content .upload-button,
.layers-tray .tray-content .save-button {
  position: absolute;
  bottom: 40px;
  left: 50%;
  transform: translateX(-50%);
  text-align: center;
  box-sizing: border-box;
  padding: 10px 0;
  width: 90%;
}

.layers-tray .tray-content h2 {
  font-size: 24px;
  position: relative;
  display: inline-block;
  margin-bottom: 20px;
}

.layers-tray .tray-content h2::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: calc(100% - 10px);
  height: 2px;
  background-color: currentColor;
}

.layers-tray .upload-section {
  flex: 0 0 auto;
  padding: 20px;
}


#layers-container {
    flex: 1;
    overflow-y: auto;
    padding: 0px;
    background-color: #2c2c2c; /* Dark background for layers list */
    border-top: 1px solid #444; /* Separator from upload section */
    border-bottom: 1px solid #444; /* Optional: Separator at the bottom */
    position: relative; /* For absolute positioning of dragged item */
}

/* Individual layer item */
.layer-item {
    display: flex;
    align-items: center;
    padding: 8px;
    margin-bottom: 4px;
    background-color: #333;
    border-radius: 4px;
    cursor: grab;
    transition: background-color 0.2s ease;
}

/* Hover effects for layer items */
.layer-item:hover {
  transform: scale(1.05); /* Slightly enlarge on hover */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Enhanced shadow on hover */
}

.layer-number {
    width: 24px;
    text-align: right;
    margin-right: 10px;
    font-size: 14px;
    color: #FEFAC1;
}

.layer-preview {
    width: 40px;
    height: 40px;
    object-fit: cover;
    border: 1px solid #555;
    border-radius: 4px;
}

.layer-placeholder {
    background-color: #555;
    border: 2px dashed #FEFAC1;
    margin-bottom: 4px;
}

.layer-item.dragging {
    opacity: 0.8;
    cursor: grabbing;
    z-index: 1000; /* Ensure the dragged item is on top */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.layers-tray.dragging-active {
    opacity: 0.9;
    transition: opacity 0.3s ease;
}

.layer-item:hover {
    background-color: #444;
}

#layers-container::-webkit-scrollbar {
    width: 8px;
}

#layers-container::-webkit-scrollbar-track {
    background: #222;
}

#layers-container::-webkit-scrollbar-thumb {
    background-color: #555;
    border-radius: 4px;
}

/* Conditional display of no layers message */
/* Assuming #no-layers-message is a sibling of #layers-container */
#layers-container:not(:empty) + #no-layers-message {
    display: none;
}

#layers-container:empty + #no-layers-message {
    display: block;
}

/* Additional styles as needed */

/* Optional: Highlighted Image Styling */
#imageContainer img {
    transition: outline 0.3s ease;
}

#deleteIcon {
    position: fixed;
    bottom: 60px; /* Adjust to position above the footer */
    left: 50%;
    transform: translateX(-50%);
    display: none; /* Hidden by default */
    z-index: 10000; /* Ensure it's above other elements */
}

#deleteIcon img {
    width: 60px;
    height: 60px;
    filter: invert(100%);
    transition: transform 0.3s ease, filter 0.3s ease;
}

#deleteIcon.active img {
    transform: scale(2.2);
    filter: invert(50%) sepia(100%) saturate(1000%) hue-rotate(-50deg); /* Change the color and size to indicate activation */
}

.dragging-image {
    position: absolute;
    pointer-events: none;
    z-index: 10001;
    opacity: 0.7;
}

.dropdown-item::-webkit-scrollbar,
.controls-container::-webkit-scrollbar,
.ad-headline-font-permutations::-webkit-scrollbar,
.cta-button-font-permutations::-webkit-scrollbar,
#tcInput::-webkit-scrollbar,
#adFontPicker::-webkit-scrollbar,
#ctaCustomDropdown::-webkit-scrollbar,
.monitor-screen::-webkit-scrollbar {
  width: 10px;
  background: transparent;
}

.dropdown-item::-webkit-scrollbar-thumb,
.controls-container::-webkit-scrollbar-thumb,
.ad-headline-font-permutations::-webkit-scrollbar-thumb,
.cta-button-font-permutations::-webkit-scrollbar-thumb,
#tcInput::-webkit-scrollbar-thumb,
#adFontPicker::-webkit-scrollbar-thumb,
#ctaCustomDropdown::-webkit-scrollbar-thumb,
.monitor-screen::-webkit-scrollbar-thumb {
  background-color: #81AB91;
  border-radius: 4px;
}

.dropdown-item:hover::-webkit-scrollbar-thumb,
.controls-container:hover::-webkit-scrollbar-thumb,
.ad-headline-font-permutations:hover::-webkit-scrollbar-thumb,
.cta-button-font-permutations:hover::-webkit-scrollbar-thumb,
#tcInput:hover::-webkit-scrollbar-thumb,
#adFontPicker:hover::-webkit-scrollbar-thumb,
#ctaCustomDropdown:hover::-webkit-scrollbar-thumb,
.monitor-screen:hover::-webkit-scrollbar-thumb {
  background-color: #729e82; /* Desired hover color */
}

.dropdown-item::-webkit-scrollbar-track,
.controls-container::-webkit-scrollbar-track,
.ad-headline-font-permutations::-webkit-scrollbar-track,
.cta-button-font-permutations::-webkit-scrollbar-track,
#tcInput::-webkit-scrollbar-track,
#adFontPicker::-webkit-scrollbar-track,
#ctaCustomDropdown::-webkit-scrollbar-track,
.monitor-screen::-webkit-scrollbar-track {
  background-color: #333;
  border-radius: 4px;
}

@supports (scrollbar-width: thin) {
  .dropdown-item,
  .controls-container,
  .ad-headline-font-permutations,
  .cta-button-font-permutations,
  #tcInput,
  #adFontPicker,
  #ctaCustomDropdown,
  .monitor-screen {
    scrollbar-width: thin;
    scrollbar-color: #81AB91 #333;
  }
  .controls-container ::-webkit-scrollbar {
    width: 10px;
  }
}

@supports (scrollbar-width: thin) {
  .controls-container:not(:hover):not(:focus-within):not(.keep-scrollbar-visible) {
    scrollbar-width: none;
    scrollbar-gutter: stable;
  }

  .controls-container ::-webkit-scrollbar {
    width: 10px;
  }

  .controls-container:hover,
  .controls-container:focus-within,
  .controls-container.keep-scrollbar-visible {
    scrollbar-width: thin; 
    scrollbar-color: #81AB91 #333;
  }
}

@-moz-document url-prefix() {
  .controls-container:not(:hover):not(:focus-within):not(.keep-scrollbar-visible) {
    padding-right: 0; /* Specific style for Firefox */
  }
}

.controls-container {
  display: flex;
  flex-wrap: wrap;
  row-gap: 0px;
  column-gap: 10px;
  max-height: 80vh;
  overflow-y: overlay;
  position: relative;
  padding-right: 10px;
  box-sizing: content-box;
}

.controls-container:hover,
.controls-container:focus-within,
.controls-container.keep-scrollbar-visible {
  padding-right: 0px;
}

.controls-container fieldset {
  flex: 1 0 auto;
  margin-bottom: 20px; 
  min-width: 150px;
}

body {
  scrollbar-width: none;
}

.controls-container:not(:hover):not(:focus-within):not(.keep-scrollbar-visible) ::-webkit-scrollbar {
  width: 0;
}

/* Ensure the permutations list is considered part of the controls-container hover state */
.controls-container:hover .dropdown-item,
.controls-container:hover .ad-headline-font-permutations,
.controls-container:hover .cta-button-font-permutations,
.controls-container:focus-within .dropdown-item,
.controls-container:focus-within .ad-headline-font-permutations,
.controls-container:focus-within .cta-button-font-permutations,
.controls-container.keep-scrollbar-visible .dropdown-item,
.controls-container.keep-scrollbar-visible .ad-headline-font-permutations,
.controls-container.keep-scrollbar-visible .cta-button-font-permutations {
  scrollbar-width: thin;
  scrollbar-color: #81AB91 #333; /* Dark background */
}

/* Ensure the permutations list is considered part of the controls-container hover state for WebKit browsers */
.controls-container.keep-scrollbar-visible ::-webkit-scrollbar {
  width: 10px;
}

/* Ensure the permutations list is considered part of the controls-container hover state for WebKit browsers */
.controls-container ::-webkit-scrollbar {
  width: 10px;
}


#tcInput::-webkit-scrollbar {
  width: 10px;
  background: transparent;
}

#tcInput::-webkit-scrollbar-thumb {
  background-color: #81AB91;
  border-radius: 4px;
}

#tcInput:hover::-webkit-scrollbar-thumb {
  background-color: #729e82;
}

#tcInput::-webkit-scrollbar-track {
  background-color: #333; /* Dark background */
  border-radius: 4px; /* Round the corners of the scrollbar track */
}

@supports (scrollbar-width: thin) {
  #tcInput {
    scrollbar-width: thin;
    scrollbar-color: #81AB91 #333; /* Dark background */
  }
}


#generateBtn, .dropdown-btn, #moveLeft, #moveRight, #moveUp, #moveDown, .upload-button, .save-button, #modalSaveButton,
#zoomOut, #zoomIn, #downloadBtn, #previewBtn, #uploadFontBtn, #confirmSizeButton, #overwriteYesBtn, #overwriteCancelBtn { /* Added new ID */
    padding: 5px 5px;
    box-shadow: 0 4px 6px rgba(0,0,0,0.6);
    border-radius: 4px;
    border: 1px solid #81AB91;
    background-color: #2a2a2a;
    color: white;
    cursor: pointer;
    transition: background-color 0.3s ease, transform 0.1s ease, box-shadow 0.1s ease;
    font-size: 0.9em;
}

#generateBtn, .dropdown-btn, #moveLeft, #moveRight, #moveUp, #moveDown,
#zoomOut, #zoomIn, #downloadBtn, #uploadFontBtn, #overwriteYesBtn, #overwriteCancelBtn { /* Added new ID */
    min-width: 100px;
}

#generateBtn:hover,
#previewBtn:hover,
.dropdown-btn:hover,
.upload-button:hover,
.save-button:hover,
#modalSaveButton:hover,
#moveLeft:hover,
#moveRight:hover,
#moveUp:hover,
#moveDown:hover,
#zoomOut:hover,
#zoomIn:hover,
#downloadBtn:hover,
#uploadFontBtn:hover,
#confirmSizeButton:hover,
#overwriteYesBtn:hover,
#overwriteCancelBtn:hover,
/* Add :focus here as well */
#generateBtn:focus,
#previewBtn:focus,
.dropdown-btn:focus,
.upload-button:focus,
.save-button:focus,
#modalSaveButton:focus,
#moveLeft:focus,
#moveRight:focus,
#moveUp:focus,
#moveDown:focus,
#zoomOut:focus,
#zoomIn:focus,
#downloadBtn:focus,
#uploadFontBtn:focus,
#confirmSizeButton:focus,
#overwriteYesBtn:focus,
#overwriteCancelBtn:focus {
  border: 1px solid #FEFAC1;
  outline: none; /* remove the default focus outline if you want */
}


#generateBtn:active, #previewBtn:active, .dropdown-btn:active, .upload-button:active, .save-button:active, #modalSaveButton:active,
#moveLeft:active, #moveRight:active, #moveUp:active, #moveDown:active,
#zoomOut:active, #zoomIn:active, #downloadBtn:active, #uploadFontBtn:active, #confirmSizeButton:active, #overwriteYesBtn:active, #overwriteCancelBtn:active { /* Added new ID */
    box-shadow: 0 2px 3px rgba(0,0,0,0.6);
    transform: translateY(2px);
}

#uploadFontBtn {
    margin-top: 15px;
}

/* Style for the preview button container */
.preview-controls {
    display: flex;
    align-items: center;
    gap: 5px; /* Creates space between elements */
    justify-content: space-between;
}

.preview-url-group,
.country-selection-group {
  display: flex;
  flex-direction: column;
}

.preview-url-group {
    width: 100%;
}

.country-selection-group{
    min-width: 150px;
}

.preview-controls-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px; /* Adjust as needed */
}

/* Specific style for the smaller preview button */
#previewBtn {
    padding: 5px 10px; /* Smaller padding to reduce button size */
    flex-grow: 1;
    max-width: calc(100%);/* Prevents the button from growing to fill the space */
    min-width: 100px;
}


/* Style adjustments for radio buttons */
.preview-format-selection input[type="radio"] {
    margin: 0 5px 0 0; /* Right margin for spacing between radio button and label */
}

/* Adjust label styling for alignment and spacing */
.preview-format-selection label {
    margin: 0 10px 0 0; /* Right margin for spacing between label and the next radio button */
    white-space: nowrap; /* Prevents the label from wrapping to the next line */
}

/* Style for the download button container */
.download-controls {
    display: flex;
    align-items: center;
    justify-content: flex-start; /* Align to the start of the flex container */
    gap: 10px; /* Creates space between elements */
}

/* Styles for the download format radio buttons to line them up horizontally */
.download-format-selection {
    display: flex; /* This will line up the radio buttons and labels horizontally */
    align-items: center; /* Aligns items vertically in the center */
}

/* Adjust label styling for alignment and spacing */
.download-format-selection label {
    margin-left: 10px; /* Space out the labels from the radio buttons */
    margin-right: 10px; /* Space out the labels from each other */
}

/* Style for the checkbox label */
.hi-res-checkbox {
    margin-left: 10px; /* Provide some spacing from the download format section */
}

.logo-neon path {
    fill: red; /* Sets the fill color of the SVG paths to crimson */
}

.logo-neon {
    width: 60%; /* Makes the logo width responsive to the container width */
    height: auto; /* Scales the height automatically to preserve aspect ratio */
    max-height: 20vh;
    position: absolute;
    top: 4%;
    left: 50%;
    z-index: 1005;
    transform: translateX(-50%);
    filter: drop-shadow(0 0 2px rgba(255, 255, 255, 0.6)) /* Initial subtle glow */
            
            /*drop-shadow(0 0 256px rgba(218, 165, 32, 0.005)) /* Ultra wide, ultra faint */
            drop-shadow(0 0 15px rgba(255, 255, 255, 0.7)) /* White innermost glow */
            /*drop-shadow(0 0 10px rgba(255, 255, 255, 0.3)) /* White, less intense */
            drop-shadow(0 0 20px rgba(255, 255, 255, 0.2)); /* White, even less intense */
}

.resize-logo {
    max-height: 10vh;
}

.white-path {
  filter: invert(100%);
}

.radio-group {
    display: flex;
    align-items: center;
    margin-left: 10px; /* Adjust as necessary */
}

.html5-options {
  background-color: #2a2a2a;
  padding: 8px;
  border-radius: 4px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex-shrink: 1; /* This allows the .html5-options to shrink if needed */
  margin-left: 10px; 
}

.html5-options label {
  white-space: normal; /* Override any previous nowrap setting */
}

.html5-option {
  display: flex;
  align-items: center; /* Align the items vertically */
  flex-wrap: nowrap; /* Prevent wrapping at the flex container level */
}

.html5-option input[type="radio"], .option input[type="checkbox"] {
  flex-shrink: 0; /* Prevent the inputs from shrinking */
}

.html5-option label {
  margin-left: 5px; /* Spacing between the radio/checkbox and the label */
  white-space: normal; /* Allow the text to wrap */
  flex-grow: 1; /* Allow the label to grow if needed */
  flex-shrink: 1; /* Allow the label to shrink if needed */
  flex-basis: 0; /* Start with zero width and grow as needed */
}

/* Ensure that labels and inputs are tightly wrapped */
.download-and-checkbox label, .download-and-checkbox input[type="radio"], .download-and-checkbox input[type="checkbox"] {
  margin: 0;
}

/* Style the radio buttons and labels horizontally */
.radio-group label, .html5-options label {
    margin-left: 5px; /* Adjust as necessary for spacing */
    margin-right: 15px; /* Adjust as necessary for spacing */
}

/* Style adjustments for radio buttons and checkbox */
.download-format-selection input[type="radio"],
.hi-res-checkbox input[type="checkbox"] {
    margin-right: 5px; /* Right margin for spacing */
}

#generateBtn {
    margin-top: 10px; /* Space above the button */
    margin-bottom: 10px; /* Space below the button */
}

#previewUrl {
    padding: 12px;
    border: 1px solid #666;
    background: #262626;
    color: #ddd;
    border-radius: 4px;
    box-sizing: border-box;
    width: 98%;
}

#headlineInput, #productInput, #contextSelect, #clickThroughUrlInput, #ctaInput, #fontFamilyName, #fontPermutation, #tcInput, #adSetNameInput{
    padding: 12px;
    border: 1px solid #666;
    background: #262626;
    color: #ddd;
    border-radius: 4px;
    box-sizing: border-box;
    width: 100%;
}

#headlineInput:focus, #productInput:focus, #contextSelect:focus, #clickThroughUrlInput:focus, #ctaInput:focus, #previewUrl:focus, #fontFamilyName:focus, #fontPermutation:focus, #tcInput:focus, #adSetNameInput:focus {
    outline: none;
    border: 1px solid #FEFAC1;
}

#includeHeadlineCheckbox, #includeCtaCheckbox, #invertColorsCheckbox  {
    -webkit-appearance: none; /* For Safari/WebKit browsers */
    -moz-appearance: none; /* For Firefox */
    appearance: none; /* Default reset for other browsers */
    background-color: #333; /* Dark background color */
    border: 1px solid #555;
    height: calc(1.5em);
    aspect-ratio: 1 / 1;
    border-radius: 3px; /* Optional: for rounded corners */
    cursor: pointer;
    display: inline-block;
    vertical-align: middle;
    position: relative;
    box-sizing: border-box;
    padding: 0; /* Remove any internal padding */
    display: flex; /* Use Flexbox */
    align-items: center; /* Center vertically */
    justify-content: center; /* Center horizontally */
}

/* Style for checked state */
#includeHeadlineCheckbox:checked, #includeCtaCheckbox:checked, #invertColorsCheckbox:checked {
    background-color: #333; /* Keep background consistent */
    border-radius: 50%;
    box-shadow: none; /* Remove the shadow from the border */
}

/* Custom checkmark for the checkbox - a glowing filled circle */
#includeHeadlineCheckbox:checked::after, #includeCtaCheckbox:checked::after, #invertColorsCheckbox:checked::after {
    content: '';
    position: absolute; /* Absolute positioning for the dot */
    width: 60%; /* Adjust size of the circle */
    height: 60%; /* Adjust size of the circle */
    background-color: #FEFAC1; /* Original background color for the dot */
    border-radius: 50%; /* Make it a circle */
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); /* Center the dot */
    box-shadow: 0 0 10px rgba(129, 171, 145, 0.8), 0 0 10px rgba(129, 171, 145, 0.5); /* Glowing effect */
    animation: checkglow 2.5s infinite alternate;
}

/* Glow animation */
@keyframes checkglow {
    from {
        box-shadow: 0 0 5px rgba(129, 171, 145, 0.8), 0 0 5px rgba(129, 171, 145, 0.5);
    }
    to {
        box-shadow: 0 0 15px rgba(129, 171, 145, 0.8), 0 0 15px rgba(129, 171, 145, 0.5);
    }
}

/* Specific style for the new T&C textarea */
#tcInput {
    resize: vertical; /* Allow vertical resizing */
    height: 100px; /* Set a default height */
    width: 100%;
}

fieldset {
  margin-bottom: 20px;

  padding: 10px;
  border: 1px solid #444; /* Dark border for fieldsets */
  border-radius: 4px;
  background-color: #3a3a3a; /* Slightly lighter than wrapper background */
}

.fieldset-row {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
}

.fieldset-row label {
  margin: 0;
  color: #c0c0c0;
}

.fieldset-row .checkbox-container {
  display: flex;
  align-items: center;
  gap: 8px;
}

.fieldset-row.cta-row {
    margin-top: 12px;
}

.fieldset-row .checkbox-container label {
  margin-right: 0; /* No margin needed as we use gap in the parent */
}

.checkbox-container {
    display: flex;
    align-items: center;
    gap: 10px; /* Adjust the spacing between elements */
}

.checkbox-container {
    display: flex;
    align-items: center;
    gap: 10px; /* Adjust the spacing between elements */
}

.swatch-label {
    margin-left: 15px; /* Optional: adjust the space between label and swatch */
    font-size: 14px; /* Optional: adjust the font size */
    color: #ccc; /* Light grey text color to match dark mode */
}

.colour-swatch {
    width: 20px;
    height: 20px;
    position: relative;
    cursor: pointer;
    border: 1px solid #555;
    border-radius: 4px;
}

.colour-triangle {
    position: absolute;
    width: 100%;
    height: 100%;
}

.text-triangle {
    clip-path: polygon(0 0, 100% 0, 0 100%); /* Top-left triangle */
    background-color: black; /* Default color */
}

.background-triangle {
    clip-path: polygon(100% 100%, 0 100%, 100% 0); /* Bottom-right triangle */
    background-color: white; /* Default color */
}

.swatch-options {
    display: none;
    position: absolute;
    top: 100%; /* Keeps it below the parent */
    left: 50%; /* Start from the horizontal center */
    transform: translateX(-50%); /* Shift back by 50% to center */
    z-index: 1000;
    background-color: #333;
    border: 1px solid #555;
    padding: 10px; /* Add some padding around the entire swatch box */
    display: flex;
    justify-content: space-between; /* Ensure space between columns */
    width: 110px; /* Adjusted width to match your requirements */
    align-items: center; /* Center the items vertically */
    position: relative; /* Needed for the pseudo-element */
}

.swatch-options::before {
    content: '';
    position: absolute;
    top: 10px; /* Adjust to align the dotted line with the swatch options */
    bottom: 10px; /* Adjust to align the dotted line with the swatch options */
    left: 50%;
    width: 0;
    border-left: 1px dotted #555; /* Creates the dotted line */
    transform: translateX(-50%);
}

.swatch-options.visible {
    display: flex;
}

.swatch-hidden {
    display: none;
}

.swatch-column {
    display: flex;
    flex-direction: column;
    align-items: center; /* Center the swatches within each column */
}

.swatch-option {
    width: 20px;
    height: 20px;
    margin: 3px;
    cursor: pointer;
    border: 1px solid #555; /* Default border color */
    border-radius: 0;
    transition: border-color 0.2s ease-in-out; /* Transition applies to border color changes */
    display: inline-block;
}

.swatch-option:hover {
    border-color: red !important; /* Red outline on hover */
}

.swatch-option.selected {
    border-color: red !important; /* Red outline when selected */
    /* No transition here to avoid conflicts */
}

.swatch-option.black {
    background-color: rgba(0, 0, 0, 0.6);
}

.swatch-option.white {
    background-color: rgba(255, 255, 255, 0.6);
}

.swatch-option.none {
    background-color: transparent;
    border: 1px dashed #555;
}

/* Text swatches without transparency */
.swatch-option[data-target="text"].black {
    background-color: #000; /* Solid black */
}

.swatch-option[data-target="text"].white {
    background-color: #fff; /* Solid white */
}

.input-row {
    display: flex;
    align-items: center;
    height: auto; /* Ensure the row adjusts to the input field's height */
    width: 100%; /* Ensure the input field takes the full width of the container */
}

legend {
  padding: 0 10px;
  font-size: 1.5em; /* Larger font size for titles */
  font-weight: bold;
  color: #ffffff; /* White text */
}

label {
  display: block;
  margin-top: 10px;
  color: #c0c0c0; /* Light gray for labels */
}

input[type="text"],
select,
button {
  width: 100%;
  padding: 8px;
  margin-top: 5px;
  box-sizing: border-box; /* Include padding in width calculation */
  border: 1px solid #555; /* Dark border for inputs */
  background-color: #1e1e1e; /* Dark input background */
  color: #ddd; /* Light text for inputs */
  border-radius: 4px;
}

.download-and-checkbox {
  display: flex;
  flex-direction: row;
  align-items: center;
  flex-wrap: nowrap; /* Try to keep all items on one line */
}

.button-and-options {
  display: flex;
  align-items: center; /* Align the items vertically */
  justify-content: space-between; /* This will push the button and the .html5-options apart */
  width: 100%; /* Ensure the container takes up all the horizontal space */
}

.custom-checkbox {
  display: flex;
  align-items: center;
}

.custom-checkbox label {
  margin-left: 5px;
  color: #c0c0c0; /* Light gray for checkbox label */
}

/* Additional styles for dark mode toggle and focus */
input[type="text"]:focus,
select:focus,
button:focus {
  outline: none;
  border-color: #007bff; /* Highlight color when focused */
}

.dropdown-divider {
    font-weight: bold;               /* Keep the text bold for emphasis */
    color: #e0e0e0;                  /* Light grey color for the text, suitable for dark mode */
    padding: 5px 15px;               /* Padding for better spacing */
    background-color: #0A1C15;      /* Even darker green */
    border-bottom: 1px solid #555;   /* Underline for the entire box */
    text-decoration: underline;      /* Additional text underline for emphasis */
    text-decoration-color: #FEFAC1;  /* Specify the color of the text underline if needed */
}

.dropdown-section:first-child .dropdown-divider {
    margin-top: 0;                   /* Remove top margin for the first divider */
}

.dropdown-divider + .dropdown-divider {
    margin-top: 0;                   /* Remove top margin for subsequent dividers within sections */
}

.dragging-element {
    position: absolute;
    pointer-events: none;
    opacity: 0.8;
    z-index: 1000;
    /* Additional styles as needed */
}


#uploadCustomFont {
    margin-top: 0;       /* Remove top margin */
    margin-bottom: 0;    /* Remove bottom margin */
    padding: 5px 15px;   /* Maintain horizontal padding for consistency */
}


#fontPicker {
  border: 1px solid #ccc;
  border-radius: 4px;
  width: 180px; /* Adjust as needed */
  padding: 5px;
  display: none;
}

.dropdown {
  position: relative;
  display: inline-block;
}

/* Optional: Ensure the font family container doesn't get the hover effect */
#fontPicker > .dropdown-item[data-family]:hover {
  background-color: initial; /* Or your default color for font family items */
}

.dropdown-item[data-family] {
    position: relative; /* Ensures the font permutations are positioned relative to the font family */
}

/* Styles to prevent horizontal scrolling and cut off text */
.font-permutations, .ad-headline-font-permutations, .cta-button-font-permutations {
  border: 1px solid #ccc; /* Adjust for dark mode if needed */
  border-radius: 4px;
  width: 150px; /* Adjust based on your layout */
  max-height: 230px;
  overflow-y: auto;
  overflow-x: hidden; /* Hide horizontal scrollbar */
  padding: 5px;
  display: block;
  position: absolute;
  left: 70%; /* Position to the right of the font family item */
  top: 0; /* Align with the top of the font family item */
  background: #333; /* Dark background for dark mode */
  color: #fff; /* Light text for contrast */
  box-shadow: 0 2px 5px rgba(0,0,0,0.5); /* Shadow for depth, adjust for dark mode */
  z-index: 500; /* Ensure it's above other content */
  white-space: nowrap; /* Prevent text wrapping */
  text-overflow: ellipsis; /* Cut off overflowing text with an ellipsis */
}

.hidden {
    display: none !important;
}

/* Apply hover effect to individual font permutation items */
.font-permutations .dropdown-item:hover {
  background-color: #ccc; /* Or any lighter grey color you prefer */
  /* Other hover styles you want to apply to individual items */
}

/* General styles for dropdown buttons */
.dropdown-btn {
  padding: 10px;
  background-color: #333; /* Dark background */
  color: white; /* Light text */
  cursor: pointer;
  border: none;
  border-radius: 4px;
}

/* Styles specific to dropdown containers */
#adFontPicker, #ctaCustomDropdown {
  display: block;
  position: absolute;
  background-color: #262626;
  min-width: 160px;
  box-shadow: 0 8px 16px rgba(0,0,0,0.2);
  z-index: 1;
  overflow-y: scroll;
  overflow-x: hidden;
  max-height: 230px;
  max-width: calc(100% - 20px);
}

/* General styles for all dropdown items */
.dropdown-item {
  padding: 12px 16px;
  cursor: pointer;
  color: white; /* Light text for readability */
  border-bottom: 1px solid #666; /* Slightly lighter border for visibility */
  position: relative;
}

/* Hover effect for all dropdown items */
.dropdown-item:hover {
  background-color: #666; /* Slightly lighter for hover effect */
  transform: scale(1.05); /* Slightly enlarge items on hover */
  box-shadow: 0 2px 4px rgba(0,0,0,0.5); /* Soft shadow for emboss effect */
}

/* Disable transform scaling for touch interactions */
.dropdown-item.no-transform {
  transform: scale(1) !important; /* Reset scaling */
}

/* Specific hover effect for font family items within each dropdown */
#adFontPicker > .dropdown-item[data-family]:hover, 
#ctaCustomDropdown > .dropdown-item[data-family]:hover {
  background-color: initial; /* Reset to default color or set a specific color for font family items */
}

/* Specific hover effect for font permutation items */
.font-permutations .dropdown-item:hover {
  background-color: #555; /* Light grey color for permutation items */
  transform: none; /* Reset the transform for permutation items */
  box-shadow: none; /* Reset the shadow for permutation items */
}

.dropdown-item:last-child {
  border-bottom: none; /* Removes bottom border for the last item */
}


/* Existing popup and dark mode styles */
.popup {
  display: none; /* Ensure this is not being overridden elsewhere */
  /* Existing styling */
}

#adSizeSelect, #style-toggle, #sizeDropdown {
    padding: 12px;
    border: 1px solid #666;
    background: #262626;
    color: #ddd;
    border-radius: 4px;
    box-sizing: border-box;
}

#adSizeSelect:focus, #style-toggle:focus, #sizeDropdown:focus {
    outline: none;
    border: 1px solid #FEFAC1;
}

.download-and-checkbox {
    display: flex;
    align-items: center; /* Aligns items vertically in the center */
    gap: 10px; /* Space between button and checkbox */
}

.custom-checkbox {
    position: relative;
    padding-left: 25px; /* Space for custom checkbox */
}

.custom-checkbox input[type="checkbox"] {
    opacity: 0; /* Hide the default checkbox */
    position: absolute;
    left: 0;
    width: 20px;
    height: 20px;
    margin: 0;
}

.custom-checkbox label {
    cursor: pointer;
    user-select: none; /* Prevents text selection */
}

/* Custom checkbox styling */
.custom-checkbox input[type="checkbox"] + label:before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 20px;
    height: 20px;
    border: 1px solid #666;
    background: #262626;
    border-radius: 4px;
}

.custom-checkbox input[type="checkbox"]:checked + label:before {
    /* Style for checked state */
    background: #4CAF50; /* Green background */
    content: '\2714'; /* Unicode character for check mark */
    color: white; /* Color of the check mark */
    text-align: center; /* Align the check mark in the center */
    line-height: 20px; /* Adjust line height to vertically center the check mark in the box */
}

.message {
    display: none; /* Initially hidden */
    position: fixed; /* Or absolute, depending on your needs */
    top: 50px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(0, 0, 0, 0.8);
    color: white;
    padding: 10px;
    border-radius: 5px;
    white-space: normal; /* Allow text wrapping */
    max-width: 80%; /* Adjust as needed */
    z-index: 1000; /* Ensure it's visible above other elements */
    text-align: left; /* Align text to the left */
}

#assetStarCanvas, #assetLoadingMessage {
  z-index: 9998;
}

.message .text {
    display: inline; /* Allows inline flow with dots */
}

.message .dots {
    display: inline-block;
    min-width: 3ch; /* Adjust based on the max number of dots and average character width */
    text-align: left;
}

.success {
    background-color: #4CAF50; /* Green */
    color: white;
}

.error {
    background-color: #f44336; /* Red */
    color: white;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box; /* Includes padding and border in the element's total width and height */
}

.otp-verified {
  display: inline-block;
  margin-left: 8px; /* Adjust spacing as needed */
  color: green;
  border: 2px solid green; /* Adjust border thickness as needed */
  border-radius: 50%; /* Creates the circle shape */
  width: 16px; /* Adjust size as needed */
  height: 16px; /* Adjust size as needed */
  text-align: center;
  line-height: 16px; /* Adjust line height to vertically center the checkmark */
  font-size: 14px; /* Adjust checkmark size as needed */
}

#player {
    display: none;
    /* Add any additional styling you require for the player */
}

/* Style for the clickable text */
#watchExplanation {
    cursor: pointer;
    /* Add any additional styling for the text */
}

/* Animation styles */
@keyframes dropdown {
    0% {
        opacity: 0;
        transform: translateY(-20px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

.drop-down-animation {
    display: block;
    opacity: 0; /* Ensure the video is initially hidden */
    animation: dropdown 1s ease forwards;
}

/* Wrapper for content, taking up at least the viewport height */
.body-wrapper {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.content {
    flex: 1; /* Expand to take available space */
    background-color: #121212; /* Dark background color to match the rest of the theme */
}

#login-signup-modal #loginotpInputFields p {
  margin: 0; /* Remove any default margin */
}

#login-signup-modal {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: #1f1f1f; /* Dark background for the modal */
    padding: 30px;
    border-radius: 8px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);
    text-align: center;
    z-index: 999;
    width: 90%;
    max-width: 525px;
    min-width: 324px;
}

.info-section {
  background-color: #2a2a2a;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 4px 6px rgba(0,0,0,0.6);
  margin-top: 20px;
  text-align: center;
}

.auth-info {
  color: #ddd;
  font-size: 14px;
  margin-bottom: 10px;
}

.auth-link {
  display: inline-block;
  color: #BAB78D;
  text-decoration: none;
  font-weight: bold;
  padding-bottom: 2px;
  border-bottom: 1px solid transparent;
  transition: border-bottom-color 0.3s, color 0.3s;
}

.auth-link:hover {
  color: #BAB78D;
  border-bottom-color: #BAB78D;
}

#authForm input:focus {
    outline: none; /* Removes the default outline */
    border: 1px solid #FEFAC1; /* Adds your custom border color */
}

#authForm {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;
}

#authForm input {
    padding: 12px;
    max-width: 350px;
    border: 1px solid #666;
    background: #262626;
    color: #ddd;
    border-radius: 4px;
    box-sizing: border-box;
}

#username {
    width: 100%;
}

.grid-container {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* Two columns */
    grid-template-rows: auto auto; /* Two rows */
    gap: 15px;
    align-items: start;
    width: 100%;
    max-width: 350px;
    margin: 0 auto;
    margin-bottom: 10px;
}

#authForm button, #loginWithOtpLink {
    width: 100%;
}

.login-cell, .register-cell {
    display: flex;
    flex-direction: column;
    align-items: flex-start; /* Align items to the left */
}

/* Adjust this to make sure the Login with OTP button is directly under the Login button */
.login-cell {
    grid-row: 1 / 3; /* Spans across both rows to keep it under the Login button */
}

.register-cell {
    grid-row: 1; /* Occupies only the first row */
}

#loginWithOtpLink {
    padding: 4px 10px; /* Reduced vertical padding and horizontal padding */
    margin-top: 5px; /* Adds a gap between the Login and Login with OTP buttons */
    text-align: center; /* Ensure text is centered */
    background-color: #151C19;
    color: white; /* Text color for the button */
    border: 1px solid #34453A; /* Remove any border */
    border-radius: 4px;
    font-size: 0.7em; /* Optional: adjust font size if necessary */
    display: block; /* Change display to block to allow for margin */
    box-sizing: border-box; /* Include padding and border in the element's total width and height */
    cursor: pointer; /* Change cursor to pointer to indicate it's clickable */
    transition: background-color 0.3s ease; /* Smooth transition for hover effect */
}

#loginWithOtpLink:hover {
    background-color: #061a24; /* Darker shade when hovered */
    border: 1px solid #FEFAC1;
}


#loginButton, #registerButton {
    min-width: 120px;
    padding: 12px 20px;
    box-shadow: 0 4px 6px rgba(0,0,0,0.6);
    border: none;
    border-radius: 4px;
    border: 1px solid #81AB91;
    background-color: #2a2a2a;
    color: white;
    cursor: pointer;
    transition: background-color 0.3s ease;
    width: auto;
    font-size: 0.9em;
}

#authForm button, #loginWithOtpLink {
    width: 100%;
}

#authForm button:hover {
    border: 1px solid #FEFAC1;
}

/* Additional styles for better visuals */
#login-signup-modal p {
    color: #ccc;
    font-size: 1em;
    margin-bottom: 15px;
}

#watchExplanation {
    margin-top: 20px;
    color: #BAB78D;
    text-decoration: none; /* Remove the default text-decoration */
    display: inline-block; /* To enable cursor:pointer to be effective */
    cursor: pointer; /* Make sure the cursor changes to pointer on hover */
    padding-bottom: 2px; /* Adjust padding to position the underline appropriately */
}

#watchExplanation:hover {
    border-bottom: 1px solid #BAB78D; /* Add the underline with the specified color on hover */
}


/* Style adjustments for the video player */
#player {
    max-width: 100%;
    border-radius: 4px;
    outline: none;
}

p {
    margin-top: 0; /* Remove top margin from paragraphs */
    margin-bottom: 1em; /* Space below paragraphs for better separation */
    color: #ccc; /* Lighter text color for readability */
}                      

.qr-code-modal {
    position: fixed; /* Fixed position */
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.5); /* Semi-transparent background */
    display: flex;
    justify-content: center; /* Center horizontally */
    align-items: center; /* Center vertically */
    z-index: 999; /* High z-index to overlay on top of other content */
}

.qr-code-content {
    position: relative;
    background-color: #2a2a2a; /* Dark background for the content area */
    padding: 30px;
    border-radius: 10px;
    text-align: center;
}

#qrCodeImage {
    width: 350px;
    height: 350px;
}

#qrInstructions {
    color: #fff; /* White text color */
    background-color: #222; /* Slightly darker background for contrast */
    padding: 15px;
    border-radius: 5px;
    margin-bottom: 20px; /* Space below the instructions */
}

.simulation-close-button, #closeQrModal {
  position: absolute;
  top: 18px; /* Adjust as needed */
  right: 18px; /* Adjust as needed */
  background: rgba(0, 0, 0, 0.8); /* Same background as the simulation text */
  color: white; /* Default color */
  border: none;
  border-radius: 50%; /* Circular shape */
  width: 60px; /* Size */
  height: 60px; /* Size */
  cursor: pointer;
  font-size: 30px; /* X size */
  font-weight: bold;
  display: flex; /* Center content */
  align-items: center; /* Center content vertically */
  justify-content: center; /* Center content horizontally */
  z-index: 10; /* Ensure it's above the monitorScreen */
  transition: color 0.3s ease, transform 0.3s ease; /* Smooth transition for color and scale change */
  margin-top: 0px;
  overflow: hidden;
  transform-origin: center; 
}

.simulation-close-button:hover, #closeQrModal:hover {
  background-color: #FEFAC1; /* Background color on hover */
  transform: scale(1.2); /* Grow the button size by 20% */
  color: #000000; /* If you want to change the color of the 'X' on hover */
}

.simulation-close-button svg, #closeQrModal svg {
  fill: #FFFFFF; /* Fill color for SVG */
  transition: fill 0.3s ease; /* Smooth transition for the SVG fill change */
}

.simulation-close-button:hover svg, #closeQrModal:hover svg {
  fill: #000000; /* Fill color for SVG on hover */
}

#manualCodeInstruction {
    color: #fff; /* White text color */
    margin-top: 20px; /* Spacing above the instruction */
    font-size: 16px; /* Adjust font size as needed */
}

#manualCode {
    background-color: #333; /* Dark background for the code block */
    color: #fff; /* White text color */
    padding: 10px;
    border-radius: 4px;
    word-break: break-all; /* Ensures long codes wrap in the container */
    display: block; /* Block display to have its own line */
    margin-top: 5px; /* Spacing above the code block */
    font-size: 18px; /* Adjust font size as needed */
    font-family: monospace; /* Monospace font for code */
    margin-bottom: 10px;
}

.totp-input {
    width: 35px; /* Width of each block */
    height: 40px; /* Height of each block */
    margin: 0 5px;
    text-align: center;
    font-size: 18px;
    border: 1px solid #ddd;
    border-radius: 4px;
    box-shadow: inset 0 1px 2px rgba(0,0,0,0.1);
    background-color: #262626;
}

.logintotp-input {
    width: 35px; /* Width of each block */
    height: 40px; /* Height of each block */
    margin: 0 5px;
    text-align: center;
    font-size: 18px;
    border: 1px solid #ddd;
    border-radius: 4px;
    box-shadow: inset 0 1px 2px rgba(0,0,0,0.1);
}

#totpInputContainer {
    display: flex;
    justify-content: center;
    margin-top: 15px;
    margin-bottom: 20px; /* Spacing below the input blocks */
}

.login-container {
    position: relative;
    text-align: center;
}

.signup-form, .login-form {
	position: fixed;
    top: 50%;
    left: 50%;
    max-width: 300px;
    margin: auto;
    padding: 20px;
	transform: translate(-50%, -50%);
    background-color: #1e1e1e; /* Adjust background color as per your theme */
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.5);
    text-align: center;
}

.signup-form input, .login-form input {
    width: 100%;
    padding: 10px;
    margin: 10px 0;
    border-radius: 5px;
    border: 1px solid #ccc; /* Adjust as per your theme */
}

.signup-form button, .login-form button {
    width: 100%;
    padding: 10px;
    border: none;
    border-radius: 5px;
    background-color: #4caf50; /* Example button color */
    color: white;
    cursor: pointer;
}


/* Footer styling */
footer {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 5px;
    padding: 5px;
    background-color: #1f1f1f;
    color: white;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 9999;
}

.footer-content {
    position: relative;
    text-align: center; /* Ensure the text is centered within the column */
}

#termsAndPrivacy {
    position: absolute;
    bottom: 100%; /* Initially set, but will be overridden by JavaScript */
    left: 50%;
    transform: translateX(-50%); /* Centers horizontally */
    white-space: nowrap;
    display: none; /* Hidden by default, will be shown on hover or click */
    padding: 5px; /* Visual spacing */
    border-radius: 5px; /* Rounded corners for aesthetics */
    box-shadow: 0px 2px 5px rgba(0,0,0,0.2); /* Shadow for better visibility */
    color: #BAB78D; /* Color of the text */
    background-color: #1a1a1a;
}

#version {
  display: block;
}

.username-display {
        cursor: pointer; /* Indicates the element is clickable */
        display: inline-block; /* Allows the use of padding and margins */
        margin: 0 5px; /* Add some margin to separate it from other elements if necessary */
        padding: 5px 10px; /* Padding makes the clickable area larger */
        background-color: #333; /* Dark background for dark mode */
        color: #fff; /* Light text color for contrast */
        border-radius: 3px; /* Rounded corners */
        font-weight: bold; /* Make the username stand out */
        transition: background-color 0.3s ease; /* Smooth transition for hover effect */
    }

.username-display:hover {
    background-color: #444; /* Slightly lighter background on hover to indicate interactivity */
}

/* Centered footer content */
.footer-content {
    grid-column: 2 / 3;
    justify-self: center; /* Center the content in the grid area */
    white-space: nowrap; /* Prevents wrapping of content */
    text-align: center; /* Center the text inside the footer */
    margin: 0 auto;
}

.credit-info {
    margin-right: 20px; /* Maintain right padding */
    white-space: nowrap; /* Prevents wrapping of content */
    display: none;
}

.mono-time {
    font-family: 'Courier New', Courier, monospace; /* Apply monospace font */
}

#dailyCredits, #futureCredits {
    display: block; /* Stacks vertically */
}

/* 1) Existing global modal styling */
.modal,
.modal-overlay, #overwriteModal {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place even on scroll */
  left: 0;
  top: 0;
  width: 100vw; /* Cover the full viewport width */
  height: 100vh; /* Cover the full viewport height */
  background-color: rgba(0, 0, 0, 0.8); /* Semi-transparent black background */
  z-index: 9999; /* Ensure it is above other content */
}

.modal-body {
  max-height: 80vh; /* Adjust the height as needed */
}

/* Centers the content within the modal overlay. */
.modal-window,
.modal-content {
  padding: 20px;
  border: 1px solid #888;
  min-width: 300px; /* Minimum width to ensure content visibility */
  max-width: 90%; /* Maximum width as a percentage of the viewport */
  width: auto; /* Auto width for flexibility */
  max-height: 80vh; /* Adjust the height as needed */
  overflow-y: auto; /* Scroll vertically if the content is tall */
  position: absolute; /* Position absolutely within the fixed modal */
  top: 50%; /* Center vertically */
  left: 50%; /* Center horizontally */
  transform: translate(-50%, -50%); /* Truly center it */
  overflow-x: hidden;
}

/* Ad set item style */
.ad-set-item {
  display: flex;
  align-items: center;
  background-color: #555;
  padding: 5px;
  margin-bottom: 5px;
  border-radius: 4px;
  cursor: pointer;
}
.ad-set-item img {
  margin-right: 10px;
}

.modal-window h2 {
  margin-top: 0;
}

.modal-window input {
  width: 100%;
  padding: 6px;
  margin: 10px 0;
  box-sizing: border-box;
}

.modal-window button {
  padding: 6px 12px;
  margin-right: 8px;
  cursor: pointer;
}

.fontmodal-overlay {
    display: none;
    position: fixed;
    left: 0;
    top: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.8);
    z-index: 1000; /* Ensure it's above other content but below the modal content */
}

.fontmodal-content {
    position: fixed;
    z-index: 1050; /* Above the overlay */
    width: 300px; /* Set a specific width */
    height: 200px; /* Set a specific height */
    /* Remove left and transform properties */
    display: none; /* Initially hidden */
    /* Positioning will be set dynamically by JavaScript */
}

.close-button {
    color: #aaa;
    float: right;
    font-size: 44px;
    font-weight: bold;
    position: absolute;
    top: -15px;
    right: 0px;
}

.close-button:hover,
.close-button:focus {
    color: white;
    text-decoration: none;
    cursor: pointer;
}

/* Additional styling for the share button within the modal */
#confirmShareBtn {
    border: 1px solid #81AB91;
    background-color: #2a2a2a;
    color: white;
    padding: 10px 20px;
    margin: 10px 0;
    cursor: pointer;
    font-size: 16px;
}

/* Style for the share symbol span */
.share-symbol {
    margin-right: 5px;
}

#confirmShareBtn:hover, #confirmShareBtn:active {
    background-color: #3d3d3d;
}

.share-button {
  position: absolute;
  bottom: 18px; /* Adjust as needed */
  right: 18px; /* Adjust as needed */
  background: rgba(0, 0, 0, 0.8); /* Same background for consistency */
  color: white; /* Default color, applies if you add text */
  border: none;
  border-radius: 50%; /* Circular shape */
  width: 60px; /* Size */
  height: 60px; /* Size */
  cursor: pointer;
  font-size: 24px; /* Icon size */
  display: flex; /* Center content */
  align-items: center; /* Center content vertically */
  justify-content: center; /* Center content horizontally */
  z-index: 10; /* Ensure it's above other elements */
  transition: background-color 0.3s ease, transform 0.3s ease; /* Smooth transition for background color and scale change */
  overflow: hidden;
  transform-origin: center; /* Set the origin for scaling to the center */
}

.share-button:hover {
  background-color: #FEFAC1; /* Background color on hover */
  transform: scale(1.2);
}

.share-button svg {
  fill: #FFFFFF; /* Fill color for SVG */
  transition: fill 0.3s ease; /* Smooth transition for the SVG fill change */
}

.share-button:hover svg {
  fill: #000000; /* Fill color for SVG on hover */
}

/* Styles for the background overlay */
.logout-modal {
    display: none;
    position: fixed;
    z-index: 1000; /* Higher z-index as requested */
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0, 0, 0, 0.8); /* Darker background */
}

/* Styles for the modal content */
.logout-modal-content {
    background-color: #333; /* Dark background for the modal */
    color: #ddd; /* Lighter text color for readability */
    margin: 15% auto;
    padding: 20px;
    border: 1px solid #888;
    width: auto; /* Adjust width to fit content */
    max-width: 500px; /* Maximum width */
    box-sizing: border-box; /* Ensure padding doesn't affect overall width */
}

/* Styles for the close button */
.logout-close-button {
    color: #aaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
}

.logout-close-button:hover,
.logout-close-button:focus {
    color: white;
    text-decoration: none;
    cursor: pointer;
}


/* Spacers to keep footer content centered */
.footer-spacer {
    flex: 1;
}

.logout-menu {
    display: none; /* Initially hidden */
    flex-direction: column;
    position: absolute;
    background-color: #1a1a1a;
    padding: 10px;
    border: none;
    text-align: center;
    white-space: nowrap; /* Prevents wrapping of menu items */
    z-index: 99;
    /* No fixed top or bottom here */
}

/* Style for all links within the logout menu */
.logout-menu a {
    text-align: center; /* Center-align all text in links */
    width: 100%; /* Make each link fill the container width */
    color: white; /* Set text color to white */
    text-decoration: none; /* Remove underline from link */
    display: block; /* Display links as block for better spacing */
    padding: 5px 10px; /* Add some padding */
    border-radius: 3px; /* Optional: for rounded corners */
}

/* Hover state for all links within the logout menu */
.logout-menu a:hover {
    background-color: #1f1f1f; /* Slightly darker background on hover */
}

/* Style for the Logout link */
#logoutButton {
    display: block; /* Make sure it's a block-level element to fill width */
    width: 100%; /* Make logout button fill the container width */
    text-align: center; /* Center the text within the button */
    background-color: #333; /* Different background for visual separation */
    border-top: 1px solid #444; /* Separator line above the logout */
    margin-top: 10px; /* Space above the logout button */
    padding: 10px 0; /* Padding to increase clickable area and visual space */
}

/* Hover and active (clicked) state for the Logout link */
#logoutButton:hover, #logoutButton:active {
    background-color: #1f1f1f; /* Replace with your footer's background color */
}

#authenticationMenu:hover ~ .authentication-sub-menu {
    display: flex; /* Change to 'block' if you prefer */
    flex-direction: column;
}

/* Directly hovering over the submenu keeps it open */
.authentication-sub-menu:hover {
    display: flex; /* Change to 'block' if you prefer */
}

/* Initial state of the submenu is hidden */
#authenticationSubMenu {
    display: none;
    flex-direction: column;
    align-items: center;
    /* Add other styles as needed */
}

/* Style for hover state of the authenticationMenu */
#authenticationMenu:hover {
    background-color: #1f1f1f; /* This will change the color of the Authentication link on hover */
    /* Add other styles as needed */
}

.authentication-sub-menu {
    display: none; /* Hidden by default */
    flex-direction: column;
    align-items: flex-start; /* Aligns children to the start of the container */
    text-align: left; /* Ensures text within children is aligned left */
    border-bottom: 1px solid #444; /* Border at the bottom of all submenu items */
    padding-bottom: 5px; /* Space below the last submenu item */
    transition: all 0.2s ease;
}

.authentication-sub-menu a {
    text-align: left; /* Align text to the left for submenu links */
    padding-left: 10px; /* Add some padding to the left of the text */
}

/* Optional: Style for the top level 'Authentication' menu item if you want it to stand out */
#authenticationMenu {
    background-color: #333; /* Slightly different background color */
    margin-bottom: 5px; /* Space between Authentication and its submenu */
}

/* Optional: Different hover effect for top level 'Authentication' menu item */
#authenticationMenu:hover {
    background-color: #1f1f1f; /* Same as other items for consistency */
}

.username-display, .logout-menu {
    box-sizing: border-box; /* Include padding and border in the element's total width and height */
    /* ... other styles ... */
}


#loadingGif {
    width: 90%;
}

#downloadBtn {
  flex-grow: 1;
  width: auto;
  flex-shrink: 0;
  margin-right: 10px; /* Space after the button */
  padding: 8px;
  margin-right: 10px; /* Space after the button */
  align-self: stretch;
  }


#starCanvas {
    display: none; /* Initially hidden */
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 10; /* Ensure it's above other content */
}

#errorContainer {
    display: flex; /* This will initiate the flex container */
    justify-content: center; /* This will center horizontally */
    align-items: center; /* This will center vertically */
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-color: rgba(0, 0, 0, 0.8); /* Dim the background to highlight the error */
    color: red;
    text-align: center;
    padding: 10px; /* To prevent text touching the edges */
    box-sizing: border-box;
    z-index: 2; /* Ensures it's above the ad content but below any potential overlays */
}

#ctaButton {
    background-color: rgba(255, 255, 255, 0.3);
    color: white;
    border-radius: 5px;
    cursor: pointer;
    text-align: center;
	background-color: rgba(0, 0, 0, 0.6); /* Darker semi-transparent background */
    align-items: center; /* Vertically center content */
    justify-content: center; /* Horizontally center content */
	box-sizing: border-box; /* Include padding and border in the element's total width and height */
    padding: 10px; /* Initial padding */
    border: 2px solid white; /* Initial border size */
}


#ctaButton:hover {
    border: 4px solid white; /* Increased border size */
    padding: 8px; /* Decrease padding to compensate for the increased border */
}

h1 {
    /*font-family: 'Roboto', sans-serif;*/
    font-size: 40px; /* Adjust as needed */
    font-weight: 700;
    color: white;
    background-color: rgba(0, 0, 0, 0.6); /* Semi-transparent black background */
    padding: 10px; /* Adjust padding as needed */
    position: absolute;
    left: 10px;
    right: 10px;
    top: 10px; /* Default position for other ad sizes */
    transform: translateY(0); /* No vertical shift for default */
    display: inline-block;
    z-index: 2;
}

.modal-body h1 {
    position: relative;
    top: 0px;
    left: 0px;
    padding: 0px;
    background-color: rgba(0.2, 0.2, 0.2, 0.2);
}

.modal-body ul {
  margin-bottom: 1em;
}

.modal-body ul li {
  margin-bottom: 0.1em;
}


.leaderboard-style {
    top: 50%;
    transform: translateY(-50%);
}

#loadingMessage, #assetLoadingMessage {
    font-size: 14px;
    color: #ffffff;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    justify-content: center;
    flex-direction: column;
    text-align: center;
}

#loadingMessage, #assetLoadingMessage span {
    margin-top: 10px; /* Add space between the GIF and the text */
    color: white; /* Set the text color */
    /* Additional styling as needed */
}

.controls {
    display: flex;
    flex-direction: column;
	max-width: 400px; /* Set a maximum width for controls */
	min-width: 300px;
    justify-content: center;

}

/* Base styles */
.main-container {
  position: relative;
  display: flex;
  flex-direction: column; /* Stack children vertically for mobile view */
  justify-content: center; /* Center children vertically */
  align-items: center; /* Center children horizontally */
  gap: 20px; /* Space between ad and controls */
}

.ad-wrapper {
  flex: 1 0 auto;  /* Grow to the size of the ad, but not smaller than the min-width */
  min-width: 300px; /* Minimum width for the ad wrapper, can adjust as needed */
  max-width: 100%; /* Ensures the ad wrapper does not exceed the width of the container */
  box-sizing: border-box;
  width:fit-content; 
}


.tc-content {
    position: absolute;
    bottom: -100%; /* Starts fully hidden below the container */
    left: 0;
    width: 100%;
    max-height: 50%; /* Maximum height it can expand to, adjust as needed */
    background-color: rgba(0, 0, 0, 0.8);
    color: white;
    padding: 10px;
    box-sizing: border-box;
    transition: bottom 0.5s ease; /* Transition for bottom property */
    z-index: 1000;
    overflow-y: scroll; /* Allow vertical scrolling */
    font-size: 11px;
    font-family: 'ApfelGrotezk-Medium';
}

/* Custom scrollbar for WebKit-based browsers (Chrome, Safari) */
.tc-content::-webkit-scrollbar {
    width: 0px; /* Hide the scrollbar */
}

/* Custom scrollbar for Firefox */
.tc-content {
    scrollbar-width: none; /* Hide the scrollbar */
}

/* Hide scrollbar for other browsers */
.tc-content::-webkit-scrollbar {
    display: none; /* Hide the scrollbar */
}

.tc-trigger {
    position: absolute;
    bottom: 0px; /* Initially visible at the bottom */
    left: 0px;
    cursor: pointer;
    background-color: transparent;
    z-index: 1001;
    transition: transform 0.5s ease; /* Ensures smooth movement with content */
    display: flex;
    align-items: center;
    z-index: 300;
}

.tc-trigger svg {
    display: block; /* Ensures the SVG aligns correctly */
    width: 24px; /* Adjust size as necessary */
    height: 24px; /* Adjust size as necessary */
    fill: #FEFACC; /* SVG fill color, can adjust as needed */
    transition: transform 0.5s ease; /* Smooth rotation */
}

.tc-text {
    margin-left: 1px; /* Space between SVG and text */
    font-size: 12px; /* Adjust font size as necessary */
    color: #FFF; /* Adjust color as necessary */
    margin-right: 1px;
    font-family: 'ApfelGrotezk-Medium';
    display: inline-block;
    transition: transform 0.5s ease; /* Smooth movement for text */
    position: relative; /* Add relative positioning */
}

.controls-wrapper {
  position: relative;
  flex: 1 1 auto; 
  min-width: 300px;
  width: 100%;
  background-color: #2c2c2c;
  border-radius: 8px;
  color: #ffffff;
  padding: 20px;
}

.controls-container {
  z-index: 500;
}

.controls-background {
  position: absolute;
  top: 0; 
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #2c2c2c;
  color: #ffffff;
  z-index: 360;
  border-top-right-radius: 8px;
  border-top-left-radius: 8px;
  border-bottom-right-radius: 8px;
  border-bottom-left-radius: 8px;
}

.ad-container {
  width: fit-content;
  position: relative;
  max-width: 100%;
  margin: auto;
  border: 1px solid #444; /* Darker border */
  border-radius: 5px;
  overflow: hidden;
  background-color: #1e1e1e; /* Dark background for the ad container */
  cursor: pointer;
}

#imageContainer {
    position: absolute; /* Ensure the container is positioned relative to its parent */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: visible; /* This can remain as visible if needed */
    transform: none !important; /* Ensure no transformations are applied */
    margin: 0;
    padding: 0;
    box-sizing: border-box; /* Include padding/border in width/height */
}

#imageContainer img {
    position: absolute; 
    width: auto;
    height: auto;
    max-width: none;
    max-height: none;
    transform-origin: center center;
}
.preview-format-selection {
    display: flex;
    flex-direction: column; /* Make radio buttons stack vertically */
    align-items: flex-start;
    margin-left: 10px;
}
.preview-format-selection div {
    display: flex;
    align-items: center;
}
.status-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-width: 110px;
}
.status-container label {
    margin-top: 0; /* Override margin-top for label inside status-container */
}
.status-line {
    display: flex;
    align-items: center;
}
.status-dot {
    height: 8px;
    width: 8px;
    border-radius: 50%;
    display: inline-block;
    margin-left: 5px;
}
.live {
    background-color: #81AB91;
    box-shadow: 0 0 5px #81AB91;
    animation: glow 1s infinite alternate;
}
.down {
    background-color: red;
    box-shadow: 0 0 5px red;
    animation: glow 1s infinite alternate;
}
@keyframes glow {
    from {
        box-shadow: 0 0 5px;
    }
    to {
        box-shadow: 0 0 20px;
    }
}

/* Flex container setup for main-content */
#main-content {
    position: relative; 
    display: flex;
    /*justify-content: space-around; /* Distribute space around items */
    align-items: center; /* Center items vertically */
    flex-wrap: wrap; /* Allow items to wrap to next line on small screens */
    padding: 0px;
	justify-content: center;
}

/* Default styles for centered-container */
#centered-container {
    height: 100vh; /* Full viewport height */
    display: grid; /* Establishes a grid container */
    place-items: center; /* Centers items both horizontally and vertically */
}

@media (max-height: 800px) and (max-width: 450px) {
    .logo-neon {
        width: 50%;
        max-height: 18vh;
        top: 2%;
    }
        .resize-logo {
    max-height: 7vh;
}
}

@media (max-height: 670px) and (max-width: 450px) {
    .logo-neon {
        width: 40%;
        max-height: 12vh;
        top: 1%;
    }
        .resize-logo {
    visibility: hidden;
}
}

@media (max-height: 570px) and (max-width: 450px) {
    .logo-neon {
        width: 25%;
        max-height: 10vh;
        top: 1%;
    }

    .resize-logo {
    visibility: hidden;
}
}

/* Media query for wider screens */
@media screen and (min-width: 840px) {
  .main-container {
    flex-direction: row; /* Stack children horizontally */
    align-items: center; /* Align children vertically to the center */
    justify-content: center; /* Center children horizontally */
    min-height: 0; /* Remove minimum height for larger screens */
  }

  .controls-wrapper {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start; /* Align fieldsets to the start */
    align-content: flex-start; /* Align fieldsets to the start */
    box-sizing: border-box;
    margin-right: 10px;
    width: calc(50% - 10px); /* Adjust width to be half of the container minus gap */
    max-width: 800px;
  }

  .controls-container fieldset {
    width: calc(50% - 20px); /* Two columns on wider screens */
  }

  .controls-container fieldset:last-child{
    width: 100%; /* Full width for special cases */
  }
}

@media (max-width: 750px) {
    .assets-tray {
        right: -130px; /* Fixed value to prevent poking out */
        width: 130px; /* Fixed width for the tray */
    }

    .ad-sets-tray {
        left: -130px; /* Fixed value to prevent poking out */
        width: 130px; /* Fixed width for the tray */
    }

    .tray-content .upload-button, .tray-content .save-button  {
      left: 7px;
    }

    .tray-content .upload-section span {
        font-size: 14px;
    }

    .tray-content h2 {
        font-size: 18px;
        margin-bottom: 15px;
    }
}


@media (max-width: 840px) {

    .ad-wrapper {
        width: 98%; /* Stack vertically at 100% width */
		flex-direction: row;
        align-items: center;
        height: auto;
        justify-content: center;
        display: flex;
    }
    #centered-container {
            height: auto;
    }

    footer {

    font-size: 12px;
}

.username-display {
  word-wrap: break-word;
  overflow-wrap: break-word;
  white-space: normal;
  max-width: 110px;
}

    .fontmodal-content {
        position: fixed; /* Keep fixed positioning */
        left: 50%; /* Center horizontally */
        transform: translateX(-50%); /* Correct horizontal shift to truly center */
        width: 80%; /* Responsive width */
        min-width: 300px; /* Minimum width, adjust as needed */
        padding: 10px; /* Smaller padding for smaller screens */
        /* top and height will be set by JavaScript */
    }

    .controls-container {
    /*flex-direction: row;*/
    max-height: 80vh; 
  }

  .controls-wrapper {
    margin-bottom:57px;
    max-width: 98%;
  }

    .controls-container fieldset {
    flex: 0 0 100%; /* Do not grow or shrink, take full width */
        width: 100%; /* Explicitly set the width to full */
        margin-bottom: 10px; /* Adjust the margin as needed */
  }

    #message {

    margin-top: 5px; 

    }

    #includeHeadlineCheckbox {
        height: 24px; /* Set a minimum height */
        width: 24px; /* Keep the checkbox square */
    }

    
    #headlineInput, #productInput, #contextSelect, #clickThroughUrlInput, #ctaInput, #adSetNameInput {
        padding: 6px 12px;
        font-size: 16px; /* Ensure font-size is 16px to prevent zoom */
    }

    #headlineInput, #includeHeadlineCheckbox {
        height: auto;
    }

    /* Adding a rule for all input and select elements */
    input, select, textarea {
        font-size: 16px; /* Prevent zoom on all form elements */
    }

    #downloadBtn, #generateBtn, #moveLeft, #moveRight, #moveUp, #moveDown, #zoomOut, #zoomIn {
        min-width: 80px; /* Smaller minimum width for small screens */
        padding: 10px 15px; /* Optionally adjust padding for smaller screens */
        /* Other styles adjustments for small screens... */
    }

    .layers-tray {
      top: 0;
      left: 0;
      width: 100%;
      height: 60px; /* Adjust height as needed */
      flex-direction: row; /* Change layout to horizontal */
      border-top-left-radius: 10px;
      border-top-right-radius: 10px;
      box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
      z-index: 301;
    }

    .layers-tray .tray-content h2 {
      font-size: 18px;
    }

    .layers-tray.show {
      top: -60px; /* Slide up to hide */
      left: 0;
    }

    #layersTrayHandle {
      top: -20px;
      left: 50%;
      transform: translateX(-50%);
      width: 40px;
      height: 20px;
      border-top-left-radius: 5px;
      border-top-right-radius: 5px;
    }

    /* Rotate the tray symbols for horizontal handle */
    .layers-tray .tray-symbols {
      transform: rotate(90deg);
    }

    .layers-tray .tray-symbols.rotated {
      transform: rotate(270deg);
    }

    /* Adjust tray content when in top position */
    .layers-tray .tray-content {
      flex-direction: row;
      overflow-x: auto;
      overflow-y: hidden;
      height: 99%;
    }

    /* Adjust upload-button positioning */
    .layers-tray .tray-content .upload-button {
      position: absolute;
      bottom: 10px;
      left: 50%;
      transform: translateX(-50%);
      width: 90%;
    }

    /* Hide vertical scrollbar and adjust for horizontal */
    #layers-container {
      flex: 1;
      overflow-x: auto;
      overflow-y: hidden;
      padding: 0px;
      border-top: none; /* Separator from upload section */
      border-bottom: none; /* Optional: Separator at the bottom */
      position: relative; /* For absolute positioning of dragged item */
      display: flex;
      flex-direction: row;
    }

    .layer-item {
      position: relative; /* Establishes a positioning context for absolute children */
      width: 60px; /* Adjust width as needed */
      height: 60px; /* Adjust height as needed */
      margin-right: 0px; /* Adjust spacing between layers */
      border-radius: 4px; /* Optional: Rounded corners for aesthetic */
      overflow: hidden; /* Ensures child elements don't overflow the container */
      cursor: pointer; /* Indicates that the layer is interactive */
      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Optional: Subtle shadow for depth */
      transition: transform 0.2s ease, box-shadow 0.2s ease; /* Smooth hover effects */
    }

    /* Preview Image */
    .layer-preview {
      width: 100%;
      height: 100%;
      object-fit: cover; /* Ensures the image covers the container without distortion */
      display: block;
    }

    /* Layer Number Overlay */
    .layer-number {
      position: absolute;
      top: 4px; /* Position from the top */
      left: 4px; /* Position from the left */
      background-color: rgba(0, 0, 0, 0.6); /* Semi-transparent background for readability */
      color: #FEFAC1; /* Text color */
      padding: 2px 6px; /* Padding around the number */
      border-radius: 12px; /* Rounded edges for the number badge */
      font-size: 12px; /* Font size */
      font-weight: bold; /* Bold text for emphasis */
      pointer-events: none; /* Allows clicks to pass through to the image if needed */
      transition: background-color 0.3s ease, transform 0.3s ease;
    }

    /* Adjust scrollbars for horizontal */
    #layers-container::-webkit-scrollbar {
      height: 8px;
      width: 0;
    }

    #layers-container::-webkit-scrollbar-track {
      background: #222;
    }

    #layers-container::-webkit-scrollbar-thumb {
      background-color: #555;
      border-radius: 4px;
    }

    /* Conditional display of no layers message */
    #layers-container:not(:empty) + #no-layers-message {
      display: none;
    }

    #layers-container:empty + #no-layers-message {
      display: block;
      margin-left: 20px;
    }


    /* ===========================
       Highlighted Image Styles
       =========================== */

    /* Style for the highlighted image */
    .highlighted {
        border: 3px solid #4CAF50; /* Green border */
        box-shadow: 0 0 15px rgba(76, 175, 80, 0.6); /* Green glow */
        transform: scale(1.05); /* Slightly enlarge the image */
        z-index: 10; /* Bring to front if overlapping */
    }
    
}