* {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: Arial, sans-serif;
            background: #f5f5f5;
            min-height: 100vh;
            
        }

        .header {
            background: #FFB537;
            padding: 5px 30px;
            color: white;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

      

        .export-btn {
            background: #DC2827;
            color: white;
            border: none;
            padding: 10px 20px;
            border-radius: 5px;
            cursor: pointer;
            font-weight: bold;
        }

        .export-btn:hover {
            background: #c53030;
        }

        .container {
            display: flex;
            max-width: 90%;
            margin: 0 auto;
            padding: 30px;
            gap: 30px;
        }

        .left-panel {
            /* background: white; */
            padding: 30px;
            /* border-radius: 10px; */
            /* border: 1px solid #ddd; */
            width: 30%;
            height: fit-content;
        }

        .panel-title {
            font-size: 20px;
            margin-bottom: 25px;
            color: #333;
            font-weight: bold;
        }

        .panel-title .highlight {
            color: #DC2827;
        }

        .form-group {
            margin-bottom: 20px;
        }

        .form-group label {
            display: block;
            margin-bottom: 8px;
            font-weight: 600;
            color: #555;
        }

        select, input[type="text"] {
            width: 100%;
            padding: 12px;
            border: 1px solid #ccc;
            border-radius: 5px;
            font-size: 14px;
            background: white;
        }

        select:focus, input[type="text"]:focus {
            border-color: #ff6b35;
            outline: none;
        }

        .file-upload {
            position: relative;
            display: inline-block;
            cursor: pointer;
            width: 100%;
        }

        .file-upload input[type="file"] {
            position: absolute;
            opacity: 0;
            width: 100%;
            height: 100%;
            cursor: pointer;
        }

        .file-upload-btn {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 100%;
            padding: 12px;
            background: #f7f7f7;
            border: 1px solid #ccc;
            border-radius: 5px;
            color: #666;
        }

        .file-upload-btn:hover {
            border-color: #ff6b35;
            background: #fff;
            color: #ff6b35;
        }

        .radio-group {
            display: flex;
            gap: 20px;
            margin-top: 10px;
        }

        .radio-option {
            display: flex;
            align-items: center;
            gap: 5px;
        }

        .radio-option input[type="radio"] {
            margin: 0;
            width: auto;
        }

        .right-panel {
            flex: 1;
            background: white;
            border-radius: 10px;
            border: 1px solid #ddd;
            overflow: hidden;
            position: relative;
        }

        .canvas-container {
            position: relative;
            width: 100%;
            height: 600px;
            background: #f8f9fa;
            display: flex;
            align-items: center;
            justify-content: center;
            overflow: hidden;
        }

        .template-preview {
            position: relative;
            background: white;
            border-radius: 5px;
            border: 1px solid #ddd;
            max-width: 90%;
            max-height: 90%;
        }

        .template-img {
            width: 100%;
            height: auto;
            border-radius: 5px;
            display: block;
        }

        .draggable-element {
            position: absolute;
            cursor: move;
            user-select: none;
            z-index: 10;
        }

        .draggable-element:hover {
            opacity: 0.9;
        }

        .draggable-element.dragging {
            opacity: 0.8;
            z-index: 20;
        }

        .logo-element {
            max-width: 100px;
            max-height: 100px;
            /* border-radius: 5px; */
            /* border: 1px solid #ddd; */
        }

        .text-element {
            /* background: rgba(255, 255, 255, 0.9); */
            padding: 5px 10px;
            /* border-radius: 3px; */
            /* border: 1px solid transparent; */
            color: #fff9f9;
            min-width: 100px;
           
            text-align: center;
        }

        .text-element:focus {
            border-color: #ff6b35;
            outline: none;
            background: white;
        }

        .add-text-btn {
            background: #48bb78;
            color: white;
            border: none;
            padding: 10px 15px;
            border-radius: 5px;
            cursor: pointer;
            width: 100%;
            margin-top: 10px;
        }

        .add-text-btn:hover {
            background: #38a169;
        }

        .template-option {
            width: 50px;
            height: 30px;
            object-fit: cover;
            border-radius: 3px;
            margin-right: 5px;
            vertical-align: middle;
        }

        .template-dropdown-option {
            display: flex;
            align-items: center;
            padding: 5px;
        }

        .template-dropdown-option span {
            margin-left: 8px;
        }

        .hidden {
            display: none;
        }

        .no-template {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            height: 100%;
            color: #718096;
            font-size: 18px;
        }

        /* .template-placeholder {
            width: 80px;
            height: 80px;
            background: #e2e8f0;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-bottom: 15px;
            font-size: 30px;
        } */

        @media (max-width: 768px) {
            .container {
                flex-direction: column;
                padding: 15px;
            }
            
            .left-panel {
                width: 100%;
            }
        }







        .template-gallery {
  display: flex;

  flex-wrap: wrap;
  gap: 10px;
}

.template-thumb {
  width: 70px;
  height: 50px;
  object-fit: cover;
  border: 2px solid #ccc;
  border-radius: 5px;
  cursor: pointer;
  transition: 0.2s;
}

.template-thumb:hover {
  border-color: #ff6b35;
  transform: scale(1.05);
}

.template-thumb.active {
  border-color: #ff6b35;
  box-shadow: 0 0 5px #ff6b35;
}





.accordion {
  border: 1px solid #ccc;
  border-radius: 6px;
  margin-bottom: 10px;
  overflow: hidden;
}

.accordion-header {
  width: 100%;
  text-align: left;
  background: #f5f5f5;
  padding: 12px;
  font-size: 15px;
  font-weight: 600;
  border: none;
  cursor: pointer;
  outline: none;
  transition: 0.3s;
}

.accordion-header:hover {
  background: #eaeaea;
}

.accordion-body {
  display: none;
  padding: 12px;
  background: #fff;
}

.accordion-item.active .accordion-body {
  display: flex;
}
.accordion-header {
  width: 100%;
  text-align: left;
  padding: 12px;
  font-weight: bold;
  cursor: pointer;
  background: #ffffff;
  border: none;
  display: flex;

  justify-content: space-between; /* push icon to right */
  align-items: center;
}

.accordion-icon {
  transition: transform 0.3s ease;
  width: 50px;
}

.accordion-item.active .accordion-icon {
  transform: rotate(180deg); /* flips arrow up */
}

input[type="text"], textarea {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid #ddd;
  border-radius: 8px;       /* rounded corners */
  font-size: 14px;
  color: #333;
  background: #f9f9f9;      /* light background */
  box-shadow: inset 0 1px 2px rgba(0,0,0,0.05); /* subtle inner shadow */
  transition: border 0.2s, box-shadow 0.2s;
}

input[type="text"]:focus, textarea:focus {
  border-color: #3b82f6;   /* blue focus border */
  outline: none;
  background: #fff;
  box-shadow: 0 0 0 2px rgba(59,130,246,0.2); /* blue glow */
}