From 6b2300de07c54c080d0e197e4ade771cf5661d4d Mon Sep 17 00:00:00 2001
From: Agent <agent@devlab.lat>
Date: Sun, 14 Jun 2026 09:58:44 -0400
Subject: [PATCH] fix: style custom checkbox with checkmark icon, add disabled
 button colors

---
 public/assets/css/style.css | 68 ++++++++++++++++++++++++++++++++++---
 views/layouts/main.php      |  1 +
 2 files changed, 65 insertions(+), 4 deletions(-)

diff --git a/public/assets/css/style.css b/public/assets/css/style.css
index 2ab2758..e4f6038 100755
--- a/public/assets/css/style.css
+++ b/public/assets/css/style.css
@@ -716,6 +716,14 @@ code, pre {
     box-shadow: var(--shadow-sm);
 }
 
+.btn:disabled,
+.btn.disabled {
+    opacity: 0.55;
+    cursor: not-allowed;
+    transform: none !important;
+    box-shadow: none !important;
+}
+
 .btn-primary {
     background: var(--accent);
     color: white;
@@ -727,6 +735,26 @@ code, pre {
     color: white;
 }
 
+.btn-primary:disabled,
+.btn-primary.disabled {
+    background: var(--bg-tertiary);
+    color: var(--text-muted);
+    border-color: var(--border-color);
+    cursor: not-allowed;
+    transform: none;
+    box-shadow: none;
+    opacity: 0.6;
+}
+
+.btn-primary:disabled:hover,
+.btn-primary.disabled:hover {
+    background: var(--bg-tertiary);
+    color: var(--text-muted);
+    border-color: var(--border-color);
+    transform: none;
+    box-shadow: none;
+}
+
 .btn-secondary {
     background: var(--bg-tertiary);
     color: var(--text-primary);
@@ -921,13 +949,45 @@ textarea.form-input {
     gap: 0.5rem;
     cursor: pointer;
     font-size: 0.9rem;
+    position: relative;
+    padding-left: 0;
 }
 
 .checkbox-label input[type="checkbox"] {
-    width: 16px;
-    height: 16px;
-    accent-color: var(--accent);
-    cursor: pointer;
+    position: absolute;
+    opacity: 0;
+    width: 0;
+    height: 0;
+    pointer-events: none;
+}
+
+.checkbox-label .checkmark {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 18px;
+    height: 18px;
+    border: 2px solid var(--border-color);
+    border-radius: 4px;
+    background: var(--bg-input);
+    transition: all var(--transition);
+    flex-shrink: 0;
+    font-size: 0.65rem;
+    color: transparent;
+}
+
+.checkbox-label:hover .checkmark {
+    border-color: var(--accent);
+}
+
+.checkbox-label input[type="checkbox"]:checked + .checkmark {
+    background: var(--accent);
+    border-color: var(--accent);
+    color: #fff;
+}
+
+.checkbox-label input[type="checkbox"]:focus-visible + .checkmark {
+    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.2);
 }
 
 .font-mono {
diff --git a/views/layouts/main.php b/views/layouts/main.php
index 1d157b7..ceb4611 100755
--- a/views/layouts/main.php
+++ b/views/layouts/main.php
@@ -195,6 +195,7 @@ if (!isset($user) || $user === null) {
                 </div>
                 <label class="checkbox-label" style="margin-bottom:0.75rem;font-size:0.82rem">
                     <input type="checkbox" id="agreeTerms" onchange="toggleDownloadBtn()">
+                    <span class="checkmark"><i class="fas fa-check"></i></span>
                     I agree to the <a href="/terms" target="_blank" style="color:var(--accent);text-decoration:underline">Terms &amp; Conditions</a>
                     and <a href="/privacy" target="_blank" style="color:var(--accent);text-decoration:underline">Privacy Policy</a>
                 </label>