From 4c6864ba3c843ee2eb9589c704ac8429ed32b1dc Mon Sep 17 00:00:00 2001
From: sinanisler <sinan@sinanisler.com>
Date: Mon, 22 Dec 2025 01:27:26 +0300
Subject: [PATCH] Update widget styles for improved border thickness and
 padding adjustments, and enhance step indicators functionality #3

---
 widget.js | 9 ++++-----
 1 file changed, 4 insertions(+), 5 deletions(-)

diff --git a/widget.js b/widget.js
index 674ab4d..6d25454 100644
--- a/widget.js
+++ b/widget.js
@@ -235,7 +235,7 @@ const widgetStyles = `
     width: 100%;
     background-color: ${WIDGET_CONFIG.colors.optionBg};
     color: ${WIDGET_CONFIG.colors.optionText};
-    border: 2px solid ${WIDGET_CONFIG.colors.optionBg};
+    border: 3px solid ${WIDGET_CONFIG.colors.optionBg};
     cursor: pointer;
     border-radius: ${WIDGET_CONFIG.menu.borderRadius};
     transition: background-color ${WIDGET_CONFIG.animation.transition}, border-color ${WIDGET_CONFIG.animation.transition};
@@ -379,7 +379,6 @@ const widgetStyles = `
   .snn-header {
     display: flex;
     align-items: center;
-    margin-bottom: 20px;
     padding: 10px;
     background: ${WIDGET_CONFIG.colors.primary};
     height: ${WIDGET_CONFIG.menu.headerHeight};
@@ -391,7 +390,7 @@ const widgetStyles = `
   }
   
   .snn-content {
-    padding: 0 20px 10px 20px;
+    padding: 20px;
   }
   
   .snn-options-grid {
@@ -1104,9 +1103,9 @@ function updateActionButtonStatus(button, buttonText, optionsConfig) {
     currentIndex = currentSaturation ? saturations.indexOf(currentSaturation) : -1;
   }
   
-  // Update step indicators
+  // Update step indicators - show all previous steps as active
   steps.forEach((step, index) => {
-    if (index === currentIndex) {
+    if (index <= currentIndex) {
       step.classList.add('active');
     } else {
       step.classList.remove('active');