html,
body {
  height: 100%;
  overflow-x: visible;
}

* {
  font-family: "Mulish", sans-serif;
}

.btn {
  flex: 1;
  padding: 15px;
  border: none;
  border-radius: 10px;
  font-weight: 600;
  font-size: 1rem;
  cursor: pointer;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

.btn-primary {
  background: #3498db;
  color: white;
}

.btn-primary:hover {
  background: #2980b9;
  transform: translateY(-3px);
  box-shadow: 0 5px 15px rgba(52, 152, 219, 0.4);
}

.btn-secondary {
  background: #ecf0f1;
  color: #2c3e50;
}

.btn-secondary:hover {
  background: #d6dbdf;
  transform: translateY(-3px);
}

header {
  background: #2c3e50;
  color: white;
  padding: 15px 10px;
  text-align: center;
  border-bottom: 5px solid #3498db;
  position: relative;
}

header h1 {
  font-size: 22px;
  margin-bottom: 5px;
  font-weight: 700;
}

header p {
  color: #ecf0f1;
  max-width: 600px;
  margin: 0 auto;
  line-height: 1.6;
}
.carwrapper-header {
}

.btn-preview,
.addmoretoucaring {
  position: relative;

  background: #e74c3c;
  color: white;
  border: none;
  padding: 8px 15px;
  font-size: 14px;
  border-radius: 5px;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 2px;
  cursor: pointer;
  transition: all 0.3s ease;
  z-index: 10;
}
.addmoretoucaring {
  background: #3498db;
  border-radius: 5px;
}
.btn-preview:hover {
  background: #c0392b;
  transform: translateY(-2px);
  box-shadow: 0 5px 15px rgba(231, 76, 60, 0.4);
}

/* Preview Modal */
.preview-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.9);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9000;
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s ease;
}

.preview-modal.active {
  opacity: 1;
  visibility: visible;
}

.modal-content {
  background: #ffffff;
  border-radius: 0px;
  padding: 10px;
  width: 100%;
  height: 100%;
  max-height: 100%;
  overflow: auto;
  position: relative;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
}
.preview-modal .rotate-btn {
  position: absolute;
  bottom: 7px;
}
.close-modal {
  position: absolute;
  top: 7px;
  right: 15px;
  background: #e74c3c;
  color: white;
  width: 35px;
  height: 35px;
  border-radius: 50%;
  border: none;
  font-size: 1.2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.3s ease;
  z-index: 10;
}
.modal-content-choosecar {
  padding: 0px !important;
  margin: 0px;
  max-width: 100%;
  max-height: 100%;
  height: 100%;
  overflow-y: auto;
}
.modal-content-choosecar .col-4 {
  cursor: pointer;
}
.close-modal:hover {
  background: #c0392b;
  transform: rotate(90deg);
}

.modal-header {
  text-align: center;
  color: #2c3e50;
  margin-bottom: 0px;
  padding-bottom: 7px;
  border-bottom: 0px solid #3498db;
}

.modal-header h2 {
  font-size: 1.2rem;
  margin-bottom: 5px;
}

.modal-car-container {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 8%;
}

.modal-car-wrapper {
  width: 80%;
  max-width: 500px;
  background: white;
  border-radius: 15px;
  overflow: hidden;

  transition: transform 0.5s ease;
}

.modal-car-background {
  position: relative;
  padding-top: 60%;
  background: #3498db;
}

.modal-car-image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url("https://images.vexels.com/media/users/3/154573/isolated/preview/bd08e000a449288c914d851cb9dae110-hatchback-car-top-view-silhouette-by-vexels.png")
    center center no-repeat;
  background-size: 80%;
  z-index: 2;
}

.modal-controls {
  display: flex;
  justify-content: center;
  gap: 20px;
  margin-top: 30px;
}

.rotate-btn {
  background: #3498db;
  color: white;
  border: none;
  padding: 12px 25px;
  border-radius: 50px;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.rotate-btn:hover {
  background: #2980b9;
  transform: translateY(-3px);
  box-shadow: 0 5px 15px rgba(52, 152, 219, 0.4);
}

.backgroundadjustmentZindexBlock {
  background: white;
  border-radius: 15px;
  padding: 25px;
  margin-top: 10px;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
  margin-bottom: 25px;
}
.backgroundadjustmentZindexBlock h3 {
  color: #2c3e50;
  font-size: 20px;
  text-transform: capitalize;
  margin-bottom: 13px;
  font-weight: 600;
}
.backgroundadjustmentZindexBlock button {
  border: none;
  background: #3498db;
  margin-bottom: 3px;
  color: #fff;
  padding: 4px 10px;
  border-radius: 5px;
  transition: all 0.3s ease;
}
.backgroundadjustmentZindexBlock button:hover,
.backgroundadjustmentZindexBlock button:focus {
  opacity: 0.7;
}

.tabs {
  display: flex;
  margin-bottom: 20px;
  background: #f8f9fa;
  border-radius: 12px;
  overflow: hidden;
}

.tab {
  flex: 1;
  text-align: center;
  padding: 15px;
  cursor: pointer;
  background: #e9ecef;
  border: none;
  font-weight: 600;
  color: #495057;
  transition: all 0.3s ease;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.tab i {
  font-size: 1.4rem;
}

.tab.active {
  background: #3498db;
  color: white;
  box-shadow: 0 4px 8px rgba(52, 152, 219, 0.4);
}

.tab:hover:not(.active) {
  background: #dee2e6;
}

input[type="range"] {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  width: 200px;
  background-color: transparent;
}
input[type="range"]:focus {
  outline-color: #f8b195;
}
input[type="range"]::-webkit-slider-runnable-track {
  -webkit-appearance: none;
  appearance: none;
  height: 3px;
  background: #f67280;
  background: -webkit-linear-gradient(
    left,
    #f67280 0%,
    #c06c84 50%,
    #355c7d 100%
  );
  background: linear-gradient(to right, #f67280 0%, #c06c84 50%, #355c7d 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr="#f67280", endColorstr="#355c7d", GradientType=1 );
}
input[type="range"]::-moz-range-track {
  -moz-appearance: none;
  appearance: none;
  height: 3px;
  background: #f67280;
  background: -moz-linear-gradient(left, #f67280 0%, #c06c84 50%, #355c7d 100%);
  background: linear-gradient(to right, #f67280 0%, #c06c84 50%, #355c7d 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr="#f67280", endColorstr="#355c7d", GradientType=1 );
}
input[type="range"]::-ms-track {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  height: 3px;
  background: #f67280;
  background: -moz-linear-gradient(left, #f67280 0%, #c06c84 50%, #355c7d 100%);
  background: -webkit-linear-gradient(
    left,
    #f67280 0%,
    #c06c84 50%,
    #355c7d 100%
  );
  background: linear-gradient(to right, #f67280 0%, #c06c84 50%, #355c7d 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr="#f67280", endColorstr="#355c7d", GradientType=1 );
}
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  border: 2px solid #f8b195;
  border-radius: 50%;
  height: 20px;
  width: 20px;
  position: relative;
  bottom: 8px;
  background: #222
    url("http://codemenatalie.com/wp-content/uploads/2019/09/slider-thumb.png")
    center no-repeat;
  background-size: 50%;
  box-shadow: 0px 3px 5px 0px rgba(0, 0, 0, 0.4);
  cursor: grab;
}
input[type="range"]::-webkit-slider-thumb:active {
  cursor: grabbing;
}
input[type="range"]::-moz-range-thumb {
  -moz-appearance: none;
  appearance: none;
  border: 2px solid #f8b195;
  border-radius: 50%;
  height: 20px;
  width: 20px;
  position: relative;
  bottom: 8px;
  background: #222
    url("http://codemenatalie.com/wp-content/uploads/2019/09/slider-thumb.png")
    center no-repeat;
  background-size: 50%;
  box-shadow: 0px 3px 5px 0px rgba(0, 0, 0, 0.4);
  cursor: grab;
}
input[type="range"]::-moz-range-thumb:active {
  cursor: grabbing;
}
input[type="range"]::-ms-thumb {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  border: 2px solid #f8b195;
  border-radius: 50%;
  height: 20px;
  width: 20px;
  position: relative;
  bottom: 8px;
  background: #222
    url("http://codemenatalie.com/wp-content/uploads/2019/09/slider-thumb.png")
    center no-repeat;
  background-size: 50%;
  box-shadow: 0px 3px 5px 0px rgba(0, 0, 0, 0.4);
  cursor: grab;
}
input[type="range"]::-ms-thumb:active {
  cursor: grabbing;
}

.step-num {
  display: none !important;
  background: white;
  color: #3498db;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  font-size: 0.9rem;
}

.tab.active .step-num {
  background: #2c3e50;
  color: white;
}
.btn.commonbacktoolsdesign {
  margin-bottom: 10px;
  width: fit-content;
  position: relative;
  padding: 10px;
  border-radius: 100px !important;
  width: 35px;
  height: 35px;
  background: #2c3e50;

  align-items: center;
  justify-content: center;
}
.btn.commonbacktoolsdesign:hover {
  background: #1c2227 !important;
  transform: translateY(-2px);
  box-shadow: 0 5px 15px rgba(27, 27, 28, 0.4);
}
.panel {
  background: white;
  border-radius: 15px;
  padding: 25px;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
  margin-bottom: 25px;
}

.panel h3 {
  color: #3498db;
  margin-bottom: 10px;
  padding-bottom: 15px;
  border-bottom: 2px solid #f1f1f1;
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 22px;
  font-weight: 500;
}

.panel h3 i {
  color: #3498db;
}

.color-control,
.delete-control,
.common-control {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 15px;
  padding: 15px;
  background: #f1f1f1;
  border-radius: 10px;
  transition: all 0.3s ease;
}

.color-control:hover,
.delete-control:hover,
.common-control:hover {
  transform: translateY(-3px);
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

.color-label,
.delete-label,
.common-label {
  font-weight: 600;
  color: #2c3e50;
  display: flex;
  align-items: center;
  gap: 10px;
}

.color-preview,
.delete-icon,
.common-icon {
  width: 40px;
  height: 40px;
  border-radius: 8px;
  border: 2px solid #dee2e6;
  cursor: pointer;
  transition: all 0.2s ease;
}
.delete-icon,
.common-icon {
  display: flex;
  align-items: center;
  justify-content: center;
}
.delete-icon i,
.common-icon i {
  font-size: 20px;
}
.color-preview:hover,
.delete-icon:hover,
.common-icon:hover {
  transform: scale(1.1);
}

.color-picker-container {
  margin-top: 20px;
  margin-bottom: 15px;
  padding: 20px;
  background: #f8f9fa;
  border-radius: 12px;
  display: none;
}
.color-picker-container #solid-picker {
  display: flex;
  align-items: center;
  justify-content: center;
}
.color-picker-container.active {
  display: block;
  animation: fadeIn 0.4s ease;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.gradient-controls {
  display: flex;
  gap: 15px;
  margin-top: 15px;
}

.gradient-color {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.gradient-color #gradient-start-picker,
.gradient-color #gradient-end-picker {
  display: flex;
  align-items: center;
  justify-content: center;
}
.gradient-color label {
  font-size: 0.9rem;
  color: #495057;
  font-weight: 500;
}

.gradient-preview {
  height: 40px;
  border-radius: 8px;
  border: 2px solid #dee2e6;
}

.car-wrapper {
  width: 100%;
  padding: 20px;
  background: white;
  border-radius: 15px;
  overflow: hidden;
  margin-top: 20px;
  position: relative;
}

.car-container {
  margin-top: 0px;
  position: relative;
  padding-top: 0%;
  overflow: hidden;

  background: #fff;
}

.car-background {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #fff;
  transition: background 0.5s ease;
}

.car-image {
  position: relative;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 20;
  pointer-events: none;
}
.car-image img {
  width: 100%;
  height: 100%;
}
.preview-title {
  color: #2c3e50;
  margin: 25px 0 15px;
  text-align: center;
  font-weight: 700;
  font-size: 1.5rem;
}

.preview-desc {
  color: #495057;
  text-align: center;
  max-width: 500px;
  line-height: 1.6;
  margin-bottom: 20px;
}

.action-buttons {
  display: flex;
  gap: 15px;
  margin-top: 20px;
  width: 100%;
  max-width: 500px;
}

/* Background Theme Styles */
.theme-images-container {
  display: none;
  margin-top: 20px;
  font-size: 12px;
  padding: 15px;
  background: #f8f9fa;
  border-radius: 12px;
  max-height: 300px;
  overflow-y: auto;
}

.theme-images-container.active {
  display: block;
  animation: fadeIn 0.4s ease;
}

.theme-images {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 15px;
}

.theme-image {
  height: 100px;
  border-radius: 8px;
  overflow: hidden;
  cursor: pointer;
  transition: all 0.3s ease;
  position: relative;
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.1);
}

.theme-image.selected {
  box-shadow: inset 0 0 0 3px #3498db;
  padding: 3px;
}

.theme-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.theme-image:hover img {
  transform: scale(1.05);
}

.theme-image:hover::after {
  content: "Select";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(52, 152, 219, 0.7);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
}

.theme-edit-container {
  display: none;
  margin-top: 20px;
  padding: 20px;
  background: #f8f9fa;
  border-radius: 12px;
  position: relative;
}

.theme-edit-container.active {
  display: block;
  animation: fadeIn 0.4s ease;
}
.backgroundthemeSowToogle {
  display: none;
  margin-bottom: 15px;
}
.bgthemeback {
  display: none;
}
.back-to-themes {
  margin-bottom: 10px;
  width: fit-content;
  position: relative;
  padding: 10px;
  border-radius: 100px !important;
  width: 35px;
  height: 35px;
  background: #2c3e50;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  /* border-radius: 4px; */
  gap: 8px;
  cursor: pointer;
  transition: all 0.3s ease;
  z-index: 10;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  gap: 8px;
  cursor: pointer;
  transition: all 0.3s ease;
  z-index: 10;
}

.back-to-themes:hover {
  background: #1c2227 !important;
  transform: translateY(-2px);
  box-shadow: 0 5px 15px rgba(27, 27, 28, 0.4);
}

.edit-options {
  display: flex;
  gap: 7px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}

.edit-btn {
  flex: 1;
  padding: 6px;
  font-size: 14px;
  border: none;
  border-radius: 5px;
  background: #3498db;
  color: white;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: all 0.3s ease;
  min-width: 150px;
}

.edit-btn:hover {
  background: #2980b9;
  transform: translateY(-3px);
}

.edit-btn.delete {
  background: #e74c3c;
}

.edit-btn.delete:hover {
  background: #c0392b;
}

.effects-panel,
.textEffectOf-font-effect-panel {
  display: none;
  padding: 20px;
  background: white;
  border-radius: 10px;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1);
}

.effects-panel.active {
  display: block;
}

.effect-control {
  margin-bottom: 15px;
}

.effect-control label,
.textEffectOf-font-control h5 {
  display: block;
  margin-bottom: 8px;
  font-weight: 500;
  color: #2c3e50;
  font-size: 16px;
}

.effect-control input {
  width: 100%;
  cursor: pointer;
  border: none;
  outline: none;
}

.effect-buttons {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-top: 15px;
}

.effect-btn {
  font-size: 13px;
  padding: 10px;
  border: none;
  border-radius: 6px;
  background: #ecf0f1;
  color: #2c3e50;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
}

.effect-btn:hover,
.effect-btn.active {
  background: #3498db;
  color: white;
}
.theme-bg-image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 1;
  display: none;
  cursor: move;
  /* transition: transform 0.3s ease; */
}

/* Move & Size Panel */
.move-size-panel,
.textEffectOf-move-size-panel {
  display: none;
  margin-top: 20px;
  padding: 20px;
  background: white;
  border-radius: 10px;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1);
}

.move-size-panel.active {
  display: block;
}

.move-size-control,
.textEffectOf-move-size-control {
  margin-bottom: 15px;
  display: flex;
  gap: 10px;
  align-items: center;
  flex-direction: row;
  justify-content: space-between;
}

.move-size-control h5,
.textEffectOf-move-size-control h5 {
  font-size: 1rem;
  margin-bottom: 10px;
  color: #2c3e50;
  display: flex;
  align-items: center;
  gap: 8px;
}

.move-size-control .controls,
.textEffectOf-move-size-control {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.control-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: center;
}

.control-group .btn-group {
  display: flex;
  gap: 5px;
}

.control-btn,
.textEffectOf-controls button {
  font-size: 11px !important;
  width: 30px;
  height: 30px;
  color: #6e6e6e;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #dee2e6;
  background: #f8f9fa;
  border-radius: 5px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.control-btn:hover,
.textEffectOf-controls button:hover {
  background: #e9ecef;
}

.control-btn i {
  font-size: 16px;
}

.size-controls,
.textEffectOf-size-controls {
  display: flex;
  gap: 10px;
  align-items: center;
}

.size-btn,
.textEffectOf-size-btn {
  font-size: 11px !important;
  width: 30px;
  height: 30px;
  color: #6e6e6e;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #dee2e6;
  background: #f8f9fa;
  border-radius: 5px;
  cursor: pointer;
}
.size-controls span,
.textEffectOf-scale-value {
  font-size: 13px;
}
.size-btn:hover {
  background: #e9ecef;
}

.align-controls {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: right;
}

.align-btn {
  padding: 5px 9px;
  border: 1px solid #dee2e6;
  background: #f8f9fa;
  color: #6e6e6e;
  border-radius: 5px;
  cursor: pointer;
  font-size: 13px;
  display: flex;
  align-items: center;
  gap: 5px;
}

.align-btn:hover {
  background: #e9ecef;
}

/* Image Confirmation Modal */
.image-confirm-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.7);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 2000;
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s ease;
}

.image-confirm-modal.active {
  opacity: 1;
  visibility: visible;
}

.confirm-modal-content {
  background: white;
  border-radius: 15px;
  padding: 30px;
  width: 90%;
  height: 90%;
  max-width: 90%;
  text-align: center;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
}

.confirm-modal-header {
  margin-bottom: 20px;
}

.confirm-modal-header h3 {
  color: #2c3e50;
  margin-bottom: 10px;
}

.image-preview {
  width: 100%;
  height: 72%;
  border-radius: 10px;
  overflow: hidden;
  margin: 0 auto 20px;
}

.image-preview img {
  width: 100%;
  height: 100%;
  object-fit: fill;
}

.sticker-preview {
  width: 50%;
  height: 70%;
  border-radius: 10px;
  overflow: hidden;
  margin: 0 auto 20px;
}
.sticker-preview img {
  width: 100%;
  height: 100%;
  object-fit: fill;
}

.confirm-buttons {
  display: flex;
  gap: 15px;
  justify-content: center;
}

.confirm-btn {
  padding: 12px 25px;
  border: none;
  border-radius: 50px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  min-width: 120px;
}

.confirm-btn.confirm {
  background: #3498db;
  color: white;
}

.confirm-btn.confirm:hover {
  background: #2980b9;
}

.confirm-btn.cancel {
  background: #ecf0f1;
  color: #2c3e50;
}

.confirm-btn.cancel:hover {
  background: #d6dbdf;
}

.upload-options.active {
  display: block;
  animation: fadeIn 0.4s ease;
}

.upload-btn {
  display: inline-block;
  padding: 12px 25px;
  background: #3498db;
  color: white;
  border-radius: 50px;
  cursor: pointer;
  font-weight: 600;
  transition: all 0.3s ease;
  margin: 10px 0;
}

.upload-btn:hover {
  background: #2980b9;
  transform: translateY(-3px);
  box-shadow: 0 5px 15px rgba(52, 152, 219, 0.4);
}

.upload-preview {
  max-width: 100%;
  max-height: 200px;
  margin: 15px 0;
  border-radius: 10px;
  display: none;
}

/* Edit panel for uploaded images */
.upload-edit-container {
  display: none;
  margin-top: 20px;
  padding: 20px;
  background: #f8f9fa;
  border-radius: 12px;
  position: relative;
}

.upload-edit-container.active {
  display: block;
  animation: fadeIn 0.4s ease;
}

.upload-control {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 15px;
  padding: 15px;
  background: #f1f1f1;
  border-radius: 10px;
  transition: all 0.3s ease;
  cursor: pointer;
}

.upload-control:hover {
  transform: translateY(-3px);
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

.upload-options {
  display: none;
  padding: 20px;
  background: #f8f9fa;
  border-radius: 12px;
  margin-top: 15px;
  text-align: center;
}

.upload-options.active {
  display: block;
  animation: fadeIn 0.4s ease;
}

.upload-btn {
  display: inline-block;
  padding: 12px 25px;
  background: #3498db;
  color: white;
  border-radius: 50px;
  cursor: pointer;
  font-weight: 600;
  transition: all 0.3s ease;
  margin: 10px 0;
}

.upload-btn:hover {
  background: #2980b9;
  transform: translateY(-3px);
  box-shadow: 0 5px 15px rgba(52, 152, 219, 0.4);
}

.upload-preview {
  max-width: 100%;
  max-height: 200px;
  margin: 0 auto;
  margin-top: 14px;
  display: none;
}

/* Edit panel for uploaded images */
.upload-edit-container {
  display: none;
  margin-top: 20px;
  padding: 20px;
  background: #f8f9fa;
  border-radius: 12px;
}

.upload-edit-container.active {
  display: block;
  animation: fadeIn 0.4s ease;
}

/* Ensure uploaded image appears on top */
.uploaded-bg-image {
  z-index: 1;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.showuploadSlider {
  display: none;
  margin-bottom: 15px;
}
.uploadBackTools {
  display: none;
}
.theme-bg-image {
  z-index: 1;
}

.sticker-images-container,
.url-input-container {
  display: none;
  padding: 20px;
  background: #f8f9fa;
  border-radius: 12px;
  margin-top: 15px;
}
.sticker-image.selected {
  box-shadow: inset 0 0 0 3px #3498db;
  padding: 3px;
}
.imagestickerBacktoos {
  display: none;
}
.backgroundcommoslider {
  display: none;
  margin-bottom: 15px;
}
.sticker-images-container.active,
.url-input-container.active {
  display: block;
  animation: fadeIn 0.4s ease;
}

.sticker-images {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 15px;
}

.sticker-image {
  height: 100px;
  border-radius: 5px;
  overflow: hidden;
  cursor: pointer;
  transition: all 0.3s ease;
  position: relative;

  background: white;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
.sticker-image:hover::after {
  content: "Select";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(52, 152, 219, 0.7);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  font-size: 12px;
}
.sticker-image img {
  max-width: 80%;
  max-height: 80%;
  object-fit: contain;
}

.sticker-image:hover {
  transform: scale(1.05);
}
.sticker-bg-image {
  z-index: 1;
}
.url-controls {
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.url-input-group {
  display: flex;
  gap: 5px;
  flex-wrap: wrap;
}

.url-input-group input {
  flex: 1;
  outline: none;
  color: #949494;
  width: 100%;
  padding: 5px 8px;
  border: 1px solid #ddd;
  border-radius: 5px;
  font-size: 1rem;
}

.url-input-group button {
  padding: 5px 8px;
  background: #3498db;
  color: white;
  font-size: 12px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.url-input-group button:hover {
  background: #2980b9;
}

.url-preview {
  width: 100%;
  height: 200px;
  border-radius: 10px;
  overflow: hidden;
  margin-top: 10px;
  border: 2px dashed #ddd;
  display: flex;
  align-items: center;
  justify-content: center;
}

.url-preview img {
  max-width: 100%;
  max-height: 100%;
  display: none;
}

.url-confirm-buttons {
  display: flex;
  gap: 15px;
  justify-content: center;
  margin-top: 15px;
}

.url-confirm-buttons button {
  padding: 4px 16px;
  font-size: 12px;
  border: none;
  border-radius: 5px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
}

.url-confirm-buttons .confirm {
  background: #27ae60;
  color: white;
}

.url-confirm-buttons .confirm:hover {
  background: #219653;
}

.url-confirm-buttons .cancel {
  background: #e74c3c;
  color: white;
}

.url-confirm-buttons .cancel:hover {
  background: #c0392b;
}

/* Edit panels */
.sticker-edit-container,
.url-edit-container {
  display: none;
  margin-top: 20px;
  padding: 20px;
  background: #f8f9fa;
  border-radius: 12px;
}

.sticker-edit-container.active,
.url-edit-container.active {
  display: block;
  animation: fadeIn 0.4s ease;
}
.urlshowshingtoogle {
  margin-bottom: 15px;
}
.back-to-stickers,
.back-to-url {
  margin-bottom: 10px;
  width: fit-content;
  position: relative;
  padding: 10px;
  border-radius: 100px !important;
  width: 35px;
  height: 35px;
  background: #2c3e50;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  /* border-radius: 4px; */
  gap: 8px;
  cursor: pointer;
  transition: all 0.3s ease;
  z-index: 10;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  gap: 8px;
  cursor: pointer;
  transition: all 0.3s ease;
  z-index: 10;
}

.back-to-stickers:hover,
.back-to-url:hover {
  background: #1c2227 !important;
  transform: translateY(-2px);
  box-shadow: 0 5px 15px rgba(27, 27, 28, 0.4);
}
.delete-control {
  transition: all 0.3s ease;
}
/* Adjust delete control styling */
.delete-control-img .delete-label-img,
.delete-control .delete-label {
  color: #e74c3c;
}
.delete-control:hover {
  background: #fdeded;
}
.delete-control-img:hover {
  background: #fdeded;
}

.url-bg-image {
  z-index: 1;
}

.backuriltools {
  display: none;
}

/* Text customization styles */
.text-input-container {
  display: none;
  padding: 20px;
  background: #f8f9fa;
  border-radius: 12px;
  margin-top: 15px;
}

.text-input-container.active {
  display: block;
  animation: fadeIn 0.4s ease;
}

.text-input-group {
  display: flex;
  gap: 5px;
  flex-wrap: wrap;
  margin-bottom: 5px;
}

.text-input-group input {
  flex: 1;
  outline: none;
  color: #949494;
  padding: 5px 8px;
  border: 1px solid #ddd;
  border-radius: 5px;
  font-size: 1rem;
  width: 100%;
}

.text-input-group button,
.textEffectOf-controls button.buttonofGanarate {
  padding: 5px 8px;
  background: #3498db;
  color: white;
  font-size: 12px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  transition: all 0.3s ease;
}
.textEffectOf-controls button.buttonofGanarate {
  white-space: nowrap;
  width: 122px;
  display: flex;
  transition: all 0.3s ease;
  font-size: 13px !important;
  height: 35px;
}
.textEffectOf-controls button.buttonofGanarate:hover {
  opacity: 0.8;
}
.textEffectOf-controls input {
  width: 100%;
}
.text-input-group button:hover {
  background: #2980b9;
}

.text-edit-container,
.textEffectOf-edit-panel {
  display: none;
  margin-top: 20px;
  padding: 20px;
  background: #f8f9fa;
  border-radius: 12px;
}

.text-edit-container.active {
  display: block;
  animation: fadeIn 0.4s ease;
}

.font-family-panel {
  display: none;
  padding: 20px;
  background: white;
  border-radius: 10px;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1);
  margin-top: 15px;
}

.font-family-panel.active {
  display: block;
}

.font-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

.font-btn {
  padding: 10px;
  border: 1px solid #ddd;
  background: white;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.2s ease;
  font-size: 0.9rem;
}

.font-btn:hover {
  background: #f0f0f0;
}

.font-btn.active {
  background: #3498db;
  color: white;
  border-color: #3498db;
}

.text-style-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 15px;
}

.style-btn,
.textEffectOf-style-btn {
  padding: 8px 15px;
  border: 1px solid #ddd;
  background: white;
  border-radius: 6px;
  cursor: pointer;
  display: flex;
  font-size: 13px;
  color: #2c3e50;
  align-items: center;
  gap: 5px;
  transition: all 0.3s ease;
}
.style-btn:hover,
.textEffectOf-style-btn:hover {
  background: #3498db;
  color: white;
}

.style-btn.active,
.textEffectOf-style-btn.active {
  background: #3498db;
  color: white;
  border-color: #3498db;
}
#transparentBgBtn {
  background: #2c3e50;
  font-size: 12px;
  padding: 4px 8px;
  border-radius: 22px;
  border: none;
  outline: none;
  box-shadow: none;
  color: #fff;
  transition: all 0.3s ease;
}
#transparentBgBtn:hover {
  opacity: 0.5;
}

.text-element {
  position: absolute;
  cursor: grab;
  z-index: 1;
  padding: 10px;
  border: 1px dashed transparent;
  transition: border-color 0.3s ease;
  max-width: 300px;
  word-wrap: break-word;
  text-align: center;
  resize: both;
  overflow: auto;
  top: 0;
}

.text-element:hover {
  border-color: #3498db;
}

.text-element.selected {
  border-color: #3498db;
  background: rgba(52, 152, 219, 0.1);
}

.text-element-transparent {
  background: transparent !important;
}

.textpanaleshowtoogle {
  display: none;
  margin-bottom: 15px;
}
.gobacktextChange {
  display: none;
}
.gonexttextChange {
  display: none;
}

#textChangerInput {
  outline: none;
  color: #949494;
  padding: 5px 8px;
  border: 1px solid #ddd;
  border-radius: 5px;
  font-size: 1rem;
  width: 100%;
}

/* 

    .subtitle {
      font-size: 1.2rem;
      opacity: 0.9;
      max-width: 800px;
      margin: 0 auto 20px;
      line-height: 1.6;
    }
    
    .textEffectcontrols {
      display: flex;
      justify-content: center;
      gap: 15px;
      margin: 25px 0;
      flex-wrap: wrap;
    }
    
   
    
    .effects {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
      gap: 25px;
      margin-top: 30px;
    }
    
    .effect {
      position: relative;
      font-size: 2.4rem;
      font-weight: bold;
      padding: 35px 20px;
      border-radius: 15px;
      overflow: hidden;
      display: flex;
      align-items: center;
      justify-content: center;
      min-height: 180px;
      text-align: center;
      box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
      transition: all 0.3s ease;
      border: 1px solid rgba(255, 255, 255, 0.15);
      cursor: pointer;
      background-color: rgba(0, 0, 0, 0.4);
    }
    
    .effect:hover {
      transform: translateY(-8px);
      box-shadow: 0 15px 35px rgba(0, 0, 0, 0.3);
    }
    
    .effect::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-size: auto;
      opacity: 0.7;
      z-index: 0;
    }
    
    .effect-content {
      position: relative;
      z-index: 2;
    }
    
/
    .tex1::before  { background: url(https://www.transparenttextures.com/patterns/stucco.png); }
    .tex2::before  { background: url(https://www.transparenttextures.com/patterns/subtle-dots.png); }
    .tex3::before  { background: url(https://www.transparenttextures.com/patterns/sneaker-mesh-fabric.png); }
    .tex4::before  { background: url(https://www.transparenttextures.com/patterns/stardust.png); }
    .tex5::before  { background: url(https://www.transparenttextures.com/patterns/soft-wallpaper.png); }
    .tex6::before  { background: url(https://www.transparenttextures.com/patterns/soft-kill.png); }
    .tex7::before  { background: url(https://www.transparenttextures.com/patterns/sprinkles.png); }
    .tex8::before  { background: url(https://www.transparenttextures.com/patterns/stressed-linen.png); }
    .tex9::before  { background: url(https://www.transparenttextures.com/patterns/stacked-circles.png); }
    .tex10::before { background: url(https://www.transparenttextures.com/patterns/soft-pad.png); }
    .tex11::before { background: url(https://www.transparenttextures.com/patterns/squared-metal.png); }
    .tex12::before { background: url(https://www.transparenttextures.com/patterns/strange-bullseyes.png); }
    .tex13::before { background: url(https://www.transparenttextures.com/patterns/stucco.png); }
    .tex14::before { background: url(https://www.transparenttextures.com/patterns/subtle-carbon.png); }
    .tex15::before { background: url(https://www.transparenttextures.com/patterns/subtle-freckles.png); }
    .tex16::before { background: url(https://www.transparenttextures.com/patterns/soft-circle-scales.png); }
    .tex17::before { background: url(https://www.transparenttextures.com/patterns/smooth-wall-light.png); }
    .tex18::before { background: url(https://www.transparenttextures.com/patterns/sos.png); }
    .tex19::before { background: url(https://www.transparenttextures.com/patterns/solid.png); }
    .tex20::before { background: url(https://www.transparenttextures.com/patterns/snow.png); }
    .tex21::before { background: url(https://www.transparenttextures.com/patterns/stitched-wool.png); }
    .tex22::before { background: url(https://www.transparenttextures.com/patterns/sprinkles.png); }
    .tex23::before { background: url(https://www.transparenttextures.com/patterns/stucco.png); }
    .tex24::before { background: url(https://www.transparenttextures.com/patterns/subtle-grey.png); }
    .tex25::before { background: url(https://www.transparenttextures.com/patterns/sprinkles.png); }


    .e1  { color:#39f; text-shadow: 3px 3px 0 #000, 6px 6px 0 rgba(0,0,0,0.2); }
    .e2  { color:#ff0; text-shadow: 0 0 15px #ff0, 0 0 30px #f80; }
    .e3  { color:transparent; background: linear-gradient(to right, #c9d6ff, #e2e2e2); -webkit-background-clip: text; background-clip: text; }
    .e4  { color:#0ff; text-shadow: 0 0 10px #0ff, 0 0 20px #0ff, 0 0 30px #0ff; }
    .e5  { color:#fff; text-shadow: 2px 2px 0 #ccc, 4px 4px 0 #bbb; letter-spacing: 2px; }
    .e6  { color:transparent; background: conic-gradient(red, yellow, lime, aqua, blue, magenta, red); -webkit-background-clip: text; background-clip: text; }
    .e7  { color:#222; background:#f3f3f3; box-shadow:inset 0 4px 8px #aaa; text-shadow: 2px 2px 0 #fff; }
    .e8  { color:#ffeb3b; background:#000; text-shadow: 0 0 5px red, 0 0 10px orange; }
    .e9  { color:#fff; background:linear-gradient(135deg, #2980b9, #6dd5fa); text-shadow: 2px 2px 4px #000; }
    .e10 { color:gold; text-shadow: 2px 2px 0 #333, 4px 4px 0 #666, 6px 6px 0 #999; }
    
    .e11 { color: #ff6b6b; text-shadow: -2px -2px 0 #ffd166, 2px 2px 0 #06d6a0; font-weight: 900; }
    .e12 { color: white; text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #e60073, 0 0 20px #e60073; letter-spacing: 1px; }
    .e13 { color: transparent; background: linear-gradient(45deg, #ff9a9e, #fad0c4, #fbc2eb, #a6c1ee); -webkit-background-clip: text; background-clip: text; }
    .e14 { color: #8a2be2; text-shadow: 3px 3px 0 #9370db, 6px 6px 0 #7b68ee; font-weight: 700; }
    .e15 { color: #00ff7f; text-shadow: 0 0 5px #00ff7f, 0 0 10px #00fa9a; }
    .e16 { color: #ff6347; text-shadow: -3px 0 0 #ffa07a, 3px 0 0 #ffa07a; letter-spacing: 3px; }
    .e17 { color: #1e90ff; background: rgba(0, 0, 0, 0.7); text-shadow: 0 0 10px #1e90ff; }
    .e18 { color: transparent; background: linear-gradient(to right, #ff8a00, #da1b60); -webkit-background-clip: text; background-clip: text; font-weight: 700; }
    .e19 { color: #ffd700; text-shadow: 0 0 10px #ffd700, 0 0 20px #ff8c00; }
    .e20 { color: #e0ffff; text-shadow: 0 0 5px #00ffff, 0 0 10px #00ced1; }
    
    .e21 { color: #ff1493; text-shadow: 3px 3px 0 #ff69b4, 6px 6px 0 #ffb6c1; }
    .e22 { color: #7fff00; text-shadow: 0 0 10px #7fff00, 0 0 20px #32cd32; }
    .e23 { color: transparent; background: radial-gradient(circle, #ff0000, #ffff00, #00ff00); -webkit-background-clip: text; background-clip: text; }
    .e24 { color: #00bfff; text-shadow: -2px 0 white, 0 2px white, 2px 0 white, 0 -2px white; }
    .e25 { color: #da70d6; text-shadow: 0 0 5px #da70d6, 0 0 10px #ee82ee; }
    .e26 { color: #f0e68c; text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5); }
    .e27 { color: #98fb98; background: rgba(0, 0, 0, 0.6); text-shadow: 0 0 10px #98fb98; }
    .e28 { color: transparent; background: linear-gradient(45deg, #00c9ff, #92fe9d); -webkit-background-clip: text; background-clip: text; }
    .e29 { color: #ffa07a; text-shadow: 0 0 10px #ffa07a, 0 0 20px #ff7f50; }
    .e30 { color: #b0e0e6; text-shadow: 0 0 5px #87ceeb, 0 0 10px #4682b4; }
    
    .e31 { color: #dda0dd; text-shadow: 3px 3px 0 #ba55d3, 6px 6px 0 #9932cc; }
    .e32 { color: #20b2aa; text-shadow: 0 0 10px #20b2aa, 0 0 20px #008b8b; }
    .e33 { color: transparent; background: linear-gradient(to right, #f5576c, #f093fb); -webkit-background-clip: text; background-clip: text; }
    .e34 { color: #ffdab9; text-shadow: 0 0 5px #ffdab9, 0 0 10px #ffdead; }
    .e35 { color: #87cefa; text-shadow: -2px -2px 0 #4682b4, 2px 2px 0 #1e90ff; }
    .e36 { color: #ffb6c1; text-shadow: 0 0 10px #ffb6c1, 0 0 20px #ff69b4; }
    .e37 { color: #d8bfd8; background: rgba(0, 0, 0, 0.5); text-shadow: 0 0 10px #d8bfd8; }
    .e38 { color: transparent; background: linear-gradient(45deg, #ff9a9e, #fad0c4); -webkit-background-clip: text; background-clip: text; }
    .e39 { color: #afeeee; text-shadow: 0 0 10px #afeeee, 0 0 20px #7fffd4; }
    .e40 { color: #f5f5dc; text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3); }
    
    .effect-label {
      position: absolute;
      bottom: 12px;
      right: 12px;
      background: rgba(0, 0, 0, 0.7);
      color: white;
      padding: 5px 12px;
      border-radius: 20px;
      font-size: 0.9rem;
      font-weight: normal;
      z-index: 3;
    }
   
    
    .text-effect-container {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      z-index: 2;
    }
    
    .text-effect-display {
      position: relative;
      font-size: 3rem;
      font-weight: bold;
      padding: 30px;
      border-radius: 8px;
      background-size: auto;
      overflow: hidden;
      z-index: 3;
      cursor: grab;
    }
    
    .text-effect-display::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-size: auto;
      opacity: 0.7;
      z-index: 0;
    }
    
    .text-effect-display .effect-content {
      position: relative;
      z-index: 2;
    }
    


    
    .align-controls {
      display: flex;
      gap: 10px;
      flex-wrap: wrap;
      justify-content: center;
    }
    
    .align-btn {
      padding: 8px 15px;
      border: none;
      border-radius: 6px;
      background: #5a5a8a;
      color: white;
      cursor: pointer;
      transition: background 0.3s;
      display: flex;
      align-items: center;
      gap: 5px;
    }
    
    .align-btn:hover {
      background: #6a6a9a;
    }
    
    .scale-value {
      font-weight: bold;
      font-size: 1.2rem;
      min-width: 60px;
      text-align: center;
    }
    

 */

.textEffectOf-effect-label {
  position: absolute;
  bottom: 12px;
  right: 12px;
  background: rgba(0, 0, 0, 0.7);
  color: white;
  padding: 5px 12px;
  border-radius: 20px;
  font-size: 0.9rem;
  font-weight: normal;
  z-index: 3;
  display: none;
}

.textEffectOf-text-effect-container {
  position: absolute;
  top: 50%;
  left: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 0;
}

.textEffectOf-text-effect-display {
  position: absolute;
  font-size: 24px;
  font-weight: bold;
  padding: 15px;
  border-radius: 8px;
  background-size: auto;
  overflow: hidden;
  z-index: 1;
  cursor: grab;
}

.textEffectOf-text-effect-display::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: auto;
  opacity: 1;
  z-index: 0;
}

.textEffectOf-effect-content {
  position: relative;
  z-index: 1;
}

.textEffectOf-controls {
  display: flex;
  justify-content: center;
  gap: 15px;
  margin: 25px 0;
  flex-wrap: wrap;
}
.textEffectOf-controls-ganarate {
  gap: 5px;
  flex-wrap: wrap;
  margin-bottom: 5px;
}
.textEffectOf-edit-panel {
  display: none;
}
.textEffectOf-back-panel {
  display: none;
}
.textEffectOf-effects {
  display: block;
  flex-direction: column;
  gap: 15px;
  margin-top: 30px;
  max-height: 350px;
  padding: 10px;
  overflow: auto;
}
.textEffectOf-controls input {
  flex: 1;
  outline: none;
  color: #949494;
  padding: 5px 8px;
  border: 1px solid #ddd;
  border-radius: 5px;
  font-size: 1rem;
}

.textEffectOf-controls input::placeholder {
  color: rgba(255, 255, 255, 0.5);
}

.textEffectOf-effect {
  margin-bottom: 10px;
  position: relative;
  font-size: 1.4rem;
  font-weight: bold;
  padding: 10px 10px;
  border-radius: 15px;

  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100px;
  text-align: center;
  box-shadow: 0px 0px 6px rgb(62 61 61 / 20%);
  transition: all 0.3s ease;
  border: 1px solid rgba(255, 255, 255, 0.15);
  cursor: pointer;
  background-color: rgba(0, 0, 0, 0);
}
#textEffectOf-texttoeffects {
  gap: 2px;
}
.textEffectOf-effect:hover {
  transform: translateY(-2px);
  box-shadow: 0px 0px 6px rgba(62, 61, 61, 0.316);
}

.textEffectOf-effect::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: auto;
  opacity: 0.7;
  z-index: 0;
}

.textEffectOf-effect-content {
  position: relative;
  z-index: 2;
}

/* Texture classes */
.textEffectOf-tex1::before {
  background: url(https://www.transparenttextures.com/patterns/black-lozenge.png);
}
.textEffectOf-tex2::before {
  background: url(https://www.transparenttextures.com/patterns/xv.png);
}
.textEffectOf-tex3::before {
  background: url(https://www.transparenttextures.com/patterns/wood-pattern.png);
}
.textEffectOf-tex4::before {
  background: url(https://www.transparenttextures.com/patterns/wood.png);
}
.textEffectOf-tex5::before {
  background: url(https://www.transparenttextures.com/patterns/soft-wallpaper.png);
}
.textEffectOf-tex6::before {
  background: url(https://www.transparenttextures.com/patterns/soft-kill.png);
}
.textEffectOf-tex7::before {
  background: url(https://www.transparenttextures.com/patterns/white-diamond-dark.png);
}
.textEffectOf-tex8::before {
  background: url(https://www.transparenttextures.com/patterns/stressed-linen.png);
}
.textEffectOf-tex9::before {
  background: url(https://www.transparenttextures.com/patterns/stacked-circles.png);
}
.textEffectOf-tex10::before {
  background: url(https://www.transparenttextures.com/patterns/soft-pad.png);
}
.textEffectOf-tex11::before {
  background: url(https://www.transparenttextures.com/patterns/squared-metal.png);
}
.textEffectOf-tex12::before {
  background: url(https://www.transparenttextures.com/patterns/strange-bullseyes.png);
}
.textEffectOf-tex13::before {
  background: url(https://www.transparenttextures.com/patterns/stucco.png);
}
.textEffectOf-tex14::before {
  background: url(https://www.transparenttextures.com/patterns/use-your-illusion.png);
}
.textEffectOf-tex15::before {
  background: url(https://www.transparenttextures.com/patterns/subtle-freckles.png);
}
.textEffectOf-tex16::before {
  background: url(https://www.transparenttextures.com/patterns/soft-circle-scales.png);
}
.textEffectOf-tex17::before {
  background: url(https://www.transparenttextures.com/patterns/smooth-wall-light.png);
}
.textEffectOf-tex18::before {
  background: url(https://www.transparenttextures.com/patterns/sos.png);
}
.textEffectOf-tex19::before {
  background: url(https://www.transparenttextures.com/patterns/solid.png);
}
.textEffectOf-tex20::before {
  background: url(https://www.transparenttextures.com/patterns/snow.png);
}
.textEffectOf-tex21::before {
  background: url(https://www.transparenttextures.com/patterns/stitched-wool.png);
}
.textEffectOf-tex22::before {
  background: url(https://www.transparenttextures.com/patterns/sprinkles.png);
}
.textEffectOf-tex23::before {
  background: url(https://www.transparenttextures.com/patterns/stucco.png);
}
.textEffectOf-tex24::before {
  background: url(https://www.transparenttextures.com/patterns/tileable-wood-colored.png);
}
.textEffectOf-tex25::before {
  background: url(https://www.transparenttextures.com/patterns/sprinkles.png);
}

/* Text effect classes */
.textEffectOf-e1 {
  color: #39f;
  text-shadow: 3px 3px 0 #000, 6px 6px 0 rgba(0, 0, 0, 0.2);
}
.textEffectOf-e2 {
  color: #ff0;
  text-shadow: 0 0 15px #ff0, 0 0 30px #f80;
}
.textEffectOf-e3 {
  color: #6e34ec;
  background: linear-gradient(to right, #c9d6ff, #e2e2e2);
  -webkit-background-clip: text;
  background-clip: text;
}
.textEffectOf-e4 {
  color: #0ff;
  text-shadow: 0 0 10px #0ff, 0 0 20px #0ff, 0 0 30px #0ff;
}
.textEffectOf-e5 {
  color: #fff;
  text-shadow: 2px 2px 0 #ccc, 4px 4px 0 #bbb;
  letter-spacing: 2px;
}
.textEffectOf-e6 {
  font-family: "Kalnia Glaze", serif !important;
  color: #fc02df;
  background: conic-gradient(red, yellow, lime, aqua, blue, magenta, red);
  -webkit-background-clip: text;
  background-clip: text;
}
.textEffectOf-e7 {
  color: #222;
  background: #f3f3f3;
  box-shadow: inset 0 4px 8px #aaa;
  text-shadow: 2px 2px 0 #fff;
}
.textEffectOf-e8 {
  font-family: "Tourney", sans-serif;
  color: #ffeb3b;
  background: #000;
  text-shadow: 0 0 5px red, 0 0 10px orange;
}
.textEffectOf-e9 {
  color: #fff;
  background: linear-gradient(135deg, #2980b9, #6dd5fa);
  text-shadow: 2px 2px 4px #000;
}
.textEffectOf-e10 {
  color: gold;
  text-shadow: 2px 2px 0 #333, 4px 4px 0 #666, 6px 6px 0 #999;
}

.textEffectOf-e11 {
  color: #ff6b6b;
  text-shadow: -2px -2px 0 #ffd166, 2px 2px 0 #06d6a0;
  font-weight: 900;
}
.textEffectOf-e12 {
  color: white;
  text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #e60073, 0 0 20px #e60073;
  letter-spacing: 1px;
}
.textEffectOf-e13 {
  color: #00ff66;
  background: linear-gradient(45deg, #ff9a9e, #fad0c4, #fbc2eb, #a6c1ee);
  -webkit-background-clip: text;
  background-clip: text;
}
.textEffectOf-e14 {
  color: #8a2be2;
  text-shadow: 3px 3px 0 #9370db, 6px 6px 0 #7b68ee;
  font-weight: 700;
}
.textEffectOf-e15 {
  color: #00ff7f;
  text-shadow: 0 0 5px #00ff7f, 0 0 10px #00fa9a;
}
.textEffectOf-e16 {
  color: #ff6347;
  text-shadow: -3px 0 0 #ffa07a, 3px 0 0 #ffa07a;
  letter-spacing: 3px;
}
.textEffectOf-e17 {
  color: #1e90ff;
  background: rgba(0, 0, 0, 0.7);
  text-shadow: 0 0 10px #1e90ff;
}
.textEffectOf-e18 {
  color: #e5ff00;
  background: linear-gradient(to right, #ff8a00, #da1b60);
  -webkit-background-clip: text;
  background-clip: text;
  font-weight: 700;
}
.textEffectOf-e19 {
  color: #ffd700;
  text-shadow: 0 0 10px #ffd700, 0 0 20px #ff8c00;
}
.textEffectOf-e20 {
  color: #e0ffff;
  text-shadow: 0 0 5px #00ffff, 0 0 10px #00ced1;
}

.textEffectOf-e21 {
  color: #ff1493;
  text-shadow: 3px 3px 0 #ff69b4, 6px 6px 0 #ffb6c1;
}
.textEffectOf-e22 {
  color: #7fff00;
  text-shadow: 0 0 10px #7fff00, 0 0 20px #32cd32;
}
.textEffectOf-e23 {
  color: #f7405b;
  background: radial-gradient(circle, #ff0000, #ffff00, #00ff00);
  -webkit-background-clip: text;
  background-clip: text;
}
.textEffectOf-e24 {
  color: #00bfff;
  text-shadow: -2px 0 white, 0 2px white, 2px 0 white, 0 -2px white;
}
.textEffectOf-e25 {
  color: #da70d6;
  text-shadow: 0 0 5px #da70d6, 0 0 10px #ee82ee;
}
.textEffectOf-e26 {
  color: #f0e68c;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}
.textEffectOf-e27 {
  color: #98fb98;
  background: rgba(0, 0, 0, 0.6);
  text-shadow: 0 0 10px #98fb98;
}
.textEffectOf-e28 {
  color: #56013b;
  background: linear-gradient(45deg, #00c9ff, #92fe9d);
  -webkit-background-clip: text;
  background-clip: text;
}
.textEffectOf-e29 {
  color: #ffa07a;
  text-shadow: 0 0 10px #ffa07a, 0 0 20px #ff7f50;
}
.textEffectOf-e30 {
  color: #b0e0e6;
  text-shadow: 0 0 5px #87ceeb, 0 0 10px #4682b4;
}

.textEffectOf-e31 {
  color: #dda0dd;
  text-shadow: 3px 3px 0 #ba55d3, 6px 6px 0 #9932cc;
}
.textEffectOf-e32 {
  color: #20b2aa;
  text-shadow: 0 0 10px #20b2aa, 0 0 20px #008b8b;
}
.textEffectOf-e33 {
  color: #535e00;
  background: linear-gradient(to right, #f5576c, #f093fb);
  -webkit-background-clip: text;
  background-clip: text;
}
.textEffectOf-e34 {
  color: #ffdab9;
  text-shadow: 0 0 5px #ffdab9, 0 0 10px #ffdead;
}
.textEffectOf-e35 {
  color: #87cefa;
  text-shadow: -2px -2px 0 #4682b4, 2px 2px 0 #1e90ff;
}
.textEffectOf-e36 {
  color: #ffb6c1;
  text-shadow: 0 0 10px #ffb6c1, 0 0 20px #ff69b4;
}
.textEffectOf-e37 {
  color: #d8bfd8;
  background: rgba(0, 0, 0, 0.5);
  text-shadow: 0 0 10px #d8bfd8;
}
.textEffectOf-e38 {
  color: #a200ff;
  background: linear-gradient(45deg, #ff9a9e, #fad0c4);
  -webkit-background-clip: text;
  background-clip: text;
}
.textEffectOf-e39 {
  color: #afeeee;
  text-shadow: 0 0 10px #afeeee, 0 0 20px #7fffd4;
}
.textEffectOf-e40 {
  color: #f5f5dc;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
}

.textEffectOf-back-to-effects {
  display: none;
  text-align: center;
  margin: 0px 0;
  padding-top: 16px;
  padding-left: 20px;
  border-radius: 12px 12px 0px 0px;
  margin-top: -20px;
}
.btn.textEffectOf-back-btn {
  margin-bottom: 0px;
  color: #fff !important;
}
.textEffectOf-edit-panel {
  margin-top: 0px;
  border-radius: 0px 0px 12px 12px;
}
.textEffectOf-back-to-effects {
  background: #f8f9fa;
}
.textEffectOf-text-effect-display.selected {
  border: 1px dashed rgb(240, 109, 109);
}

.textEffectOf-edit-options {
  display: flex;
  gap: 6px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}
.showoftexteffectlog {
  display: none;
  margin-bottom: 15px;
}
.textEffectOf-edit-btn {
  flex: 1;
  padding: 6px;
  font-size: 14px;
  border: none;
  border-radius: 5px;
  background: #3498db;
  color: white;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: all 0.3s ease;
  min-width: 150px;
}
.textEffectOf-edit-btn.delete,
#textEffectOf-clearAllBtn {
  background: #e74c3c;
}
.textEffectOf-edit-btn.delete:hover,
#textEffectOf-clearAllBtn:hover {
  background: #c0392b;
  transform: translateY(-3px);
}
.textEffectOf-edit-btn:hover {
  background: #2980b9;
  transform: translateY(-3px);
}
.textfirstpartdemo {
  padding: 20px;
  background: #f8f9fa;
  border-radius: 12px;
  margin-top: 15px;
}
.textEffectOf-edit-btn.textEffectOf-delete {
  background: #e74c3c;
}

.textEffectOf-edit-btn.textEffectOf-delete:hover {
  background: #c0392b;
  transform: translateY(-3px);
}

.textEffectOf-control-group {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

.textEffectOf-btn-group {
  display: flex;
  gap: 10px;
}

.textEffectOf-control-btn {
  width: 50px;
  height: 50px;
  border: none;
  border-radius: 8px;
  background: #5a5a8a;
  color: white;
  font-size: 1.2rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
}

.textEffectOf-control-btn:hover {
  background: #6a6a9a;
  transform: scale(1.05);
}

.textEffectOf-opacity-controls {
  display: flex;
  align-items: center;
  gap: 15px;
}

.textEffectOf-opacity-slider {
  flex: 1;
  -webkit-appearance: none;
  height: 8px;
  border-radius: 4px;
  background: #5a5a8a;
  outline: none;
}

.textEffectOf-opacity-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #fff;
  cursor: pointer;
}

.textEffectOf-text-style-controls {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.textEffectOf-text-edit-control {
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid rgba(255, 255, 255, 0.2);
}

.textEffectOf-text-edit-control input {
  outline: none;
  color: #949494;
  padding: 5px 8px;
  border: 1px solid #ddd;
  border-radius: 5px;
  font-size: 1rem;
  width: 100%;
}

.textEffectOf-text-edit-control button {
  margin-top: 10px;
  padding: 3px 10px;
  background: #27ae60;
  color: white;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  transition: all 0.2s;
  font-size: 14px;
}

.textEffectOf-text-edit-control button:hover {
  background: #2ecc71;
}

.textEffectOf-align-controls {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: center;
}

.textEffectOf-align-btn {
  padding: 8px 15px;
  border: none;
  border-radius: 6px;
  background: #5a5a8a;
  color: white;
  cursor: pointer;
  transition: background 0.3s;
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 0.9rem;
}

.textEffectOf-align-btn:hover {
  background: #6a6a9a;
}

.textEffectOf-info-box {
  background: rgba(0, 0, 0, 0.3);
  border-radius: 10px;
  padding: 15px;
  margin-top: 30px;
  font-size: 0.9rem;
  line-height: 1.6;
}

.textEffectOf-info-box h3 {
  margin-bottom: 10px;
  color: #4a9fff;
}

#modalCarWrapper .textEffectOf-text-effect-display.selected {
  border: 0px dashed rgb(240, 109, 109);
}
#modalCarWrapper .text-element.selected {
  border-color: #ffffff00;
}

.finished-wrapper input {
  box-shadow: none !important;
  outline: none;
}
.finished-checkbox {
  width: 25px;
  height: 25px;
  margin-right: 10px;
  border: 2px solid #ccc;
  display: inline-block;
  vertical-align: middle;
  border-radius: 4px;
  cursor: pointer;
}
.finished-checkbox.checked {
  background-color: #2ecc71;
  border-color: #2ecc71;
  background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="white"><path d="M13.485 1.929a.75.75 0 0 1 1.06 1.06l-8.25 8.25a.75.75 0 0 1-1.06 0L1.455 7.52a.75.75 0 0 1 1.06-1.06l3.22 3.219 7.75-7.75z"/></svg>');
  background-size: 16px;
  background-repeat: no-repeat;
  background-position: center;
}
.finished-btn {
  background-color: #3498db;
  color: white;
  border: none;
  padding: 10px 20px;
  font-weight: bold;
  border-radius: 5px;
  width: 100%;
}
.finished-btn:hover {
  background-color: #2980b9;
}
.finished-label {
  margin-bottom: 0;
  vertical-align: middle;
  cursor: pointer;
}
@media (max-width: 768px) {
  .modal-car-container {
    margin-top: 20%;
  }
  header h1 {
    display: none;
  }
  .tab {
    font-size: 14px;
    flex-direction: row;
  }
  .tab i {
    font-size: 14px;
  }
  .confirm-modal-content {
    padding: 10px;
  }
  .confirm-modal-header p {
    display: none;
  }
  .image-preview {
    width: 100%;
    height: 60%;
  }
  .sticker-preview {
    width: 100%;
    height: 62%;
  }

  .confirm-btn {
    padding: 7px 22px;
  }
  .confirm-buttons {
    display: flex;
    gap: 6px;
    font-size: 14px;
    justify-content: center;
  }
  .modal-car-wrapper {
    width: 100%;
  }

  .action-buttons {
    flex-direction: column;
  }

  .edit-options {
    flex-direction: column;
  }

  .confirm-buttons {
    flex-direction: column;
  }
}