/* --- Main Container --- */
.sig-container {
    max-width: 1200px; /* PC Width requested */
    margin: 20px auto;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 4px 25px rgba(0,0,0,0.1);
    overflow: hidden;
    font-family: 'Segoe UI', sans-serif;
    border: 1px solid #e2e8f0;
}

/* --- Header & Menubar --- */
.sig-header {
    background-color: #1e293b; /* Dark Blue Header Background */
    padding: 0;
    color: white;
}
.sig-header h3 {
    margin: 0;
    padding: 15px 20px;
    font-size: 18px;
    font-weight: 600;
    background: rgba(0,0,0,0.2);
}
.sig-tabs {
    display: flex;
    background: #0f172a; /* Darker shade for tabs */
}
.sig-tab {
    flex: 1;
    padding: 15px 10px;
    border: none;
    background: transparent;
    cursor: pointer;
    font-weight: 500;
    color: #94a3b8;
    border-bottom: 4px solid transparent;
    transition: 0.3s;
    font-size: 16px;
}
.sig-tab:hover { background: rgba(255,255,255,0.05); color: #fff; }
.sig-tab.active {
    color: #fff;
    border-bottom: 4px solid #3b82f6; /* Active Blue Line */
    background: #1e293b;
}

/* --- Content Areas --- */
.sig-content { display: none; padding: 30px; min-height: 250px; }
.sig-content.active { display: block; }

/* Upload Styles */
.upload-box-wrapper {
    border: 2px dashed #cbd5e1; background: #f8fafc;
    border-radius: 8px; height: 150px; display: flex;
    align-items: center; justify-content: center; cursor: pointer; position: relative;
}
.upload-box-wrapper:hover { border-color: #3b82f6; background: #eff6ff; }
#image-upload { position: absolute; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.upload-placeholder { text-align: center; color: #64748b; }
.upload-placeholder span { font-size: 18px; font-weight: 600; display: block; }

.img-container { max-height: 400px; background: #333; margin-top: 20px; border-radius: 4px; overflow: hidden; }
#image-to-crop { max-width: 100%; }
.btn-crop {
    margin-top: 10px; width: 100%; padding: 10px; background: #22c55e; color: white;
    border: none; border-radius: 6px; cursor: pointer; font-weight: 600;
}
.hint-text { color: #ef4444; font-size: 14px; margin-top: 10px; text-align: center; display:none; }

/* Draw Styles */
.canvas-wrapper {
    border: 2px solid #e2e8f0; border-radius: 8px; height: 250px; position: relative; cursor: crosshair;
}
canvas { width: 100%; height: 100%; }
.placeholder-text {
    position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
    color: #cbd5e1; font-size: 24px; pointer-events: none;
}
.sig-controls { display: flex; align-items: center; gap: 20px; margin-top: 15px; background: #f8fafc; padding: 10px; border-radius: 8px; }
.color-btn { width: 30px; height: 30px; border-radius: 50%; border: 2px solid #fff; box-shadow: 0 0 0 1px #cbd5e1; cursor: pointer; }
.color-btn.active { box-shadow: 0 0 0 2px #3b82f6; transform: scale(1.1); }
.color-btn.black { background: #000; }
.color-btn.blue { background: #0056b3; }
.color-btn.red { background: #d93025; }

/* Type Styles */
.type-controls { display: flex; gap: 15px; margin-bottom: 20px; align-items: center; }
#name-input { flex: 1; padding: 12px; border: 1px solid #cbd5e1; border-radius: 6px; font-size: 16px; }
.font-options { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 15px; max-height: 300px; overflow-y: auto; }
.type-preview {
    padding: 15px; border: 1px solid #e2e8f0; border-radius: 6px; text-align: center;
    font-size: 32px; cursor: pointer; transition: 0.2s;
}
.type-preview:hover, .type-preview.selected { border-color: #3b82f6; background: #eff6ff; }

/* --- GLOBAL SETTINGS PANEL --- */
.global-settings {
    background: #f1f5f9; padding: 25px; border-top: 1px solid #e2e8f0;
}
.settings-header { font-weight: 700; color: #334155; margin-bottom: 15px; font-size: 16px; }
.settings-grid {
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 15px; margin-bottom: 20px;
}
.setting-item { display: flex; flex-direction: column; gap: 5px; }
.setting-item label { font-size: 13px; font-weight: 600; color: #64748b; }
.setting-item input, .setting-item select {
    padding: 10px; border: 1px solid #cbd5e1; border-radius: 6px; font-size: 14px;
}

.btn-download-final {
    width: 100%; padding: 14px; background: #2563eb; color: white; border: none;
    border-radius: 6px; font-size: 16px; font-weight: 600; cursor: pointer; transition: 0.2s;
}
.btn-download-final:hover { background: #1d4ed8; }

.preview-box {
    display: flex; align-items: center; gap: 15px; background: #fff; padding: 10px;
    border: 1px solid #e2e8f0; border-radius: 6px; margin-bottom: 15px;
}
#processed-image-preview { height: 50px; border: 1px solid #ddd; }
#processed-file-info { font-size: 14px; color: #059669; font-weight: 600; }

/* --- Mobile Responsiveness --- */
@media (max-width: 768px) {
    .sig-container { max-width: 100%; margin: 0; border-radius: 0; border: none; }
    .settings-grid { grid-template-columns: 1fr 1fr; } /* Stack inputs on mobile */
    .type-controls { flex-direction: column; align-items: stretch; }
    .sig-header h3 { display: none; } /* Save space on mobile */
}

/* Post Crop Preview Styling */
#post-crop-view {
    text-align: center;
    margin-top: 20px;
    animation: fadeIn 0.5s;
}

.preview-container-box {
    display: inline-block;
    padding: 10px;
    border: 2px solid #22c55e; /* Green border for success */
    border-radius: 8px;
    background: #f0fdf4;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
    margin-bottom: 15px;
}

#cropped-result-img {
    max-width: 100%;
    max-height: 200px; /* Limit height so it doesn't take too much space */
    display: block;
    margin: 0 auto;
}

.step-label {
    font-weight: 600;
    color: #334155;
    margin-bottom: 10px;
    display: block;
}

.btn-reset {
    background: #94a3b8;
    color: white;
    border: none;
    padding: 8px 15px;
    border-radius: 5px;
    cursor: pointer;
    font-size: 13px;
}
.btn-reset:hover { background: #64748b; }

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