refactor: styles not working

wedding-app-themes/wedding-app-theme/login/messages/messages_en.properties

-loginTitleHtml=<span class="my-custom-title">Zaloguj się do <strong>Twojego</strong> konta</span>
+loginTitleHtml=Zaloguj się do Twojego konta
 loginSubtitleHtml=wypełnij formularz
 usernameOrEmail=Nazwa uzytkownika lub email
 

wedding-app-themes/wedding-app-theme/login/resources/styles.css

 /************************************************
- * 1. Reset i przygotowanie kontenera BODY
+ * 1. Reset i ukrycie nagłówka Keycloak
  ************************************************/
 html, body {
     margin: 0 !important;
     padding: 0 !important;
     width: 100%;
-    height: 100%;
+    min-height: 100vh;         /* pozwala na wypełnienie ekranu w pionie */
     box-sizing: border-box;
+    font-family: Arial, sans-serif;
 }
 
-body {
-    /* Kolor tła całej strony */
-    background-color: #ab8fa8 !important; /* przykładowy fioletowy */
+/* Ukrywa prostokąt (nagłówek) Keycloak */
+#kc-header,
+#kc-header-wrapper {
+    display: none !important;
+}
 
-    /* Flexbox, by wycentrować pionowo i poziomo */
+/************************************************
+ * 2. Wycentrowanie pionowe i poziome całego formularza
+ ************************************************/
+body {
+    background-color: #f5f5f5 !important; /* jasne tło */
     display: flex !important;
     flex-direction: column !important;
-    justify-content: center !important;
-    align-items: center !important;
-
-    font-family: Arial, sans-serif; /* lub inna czcionka */
+    justify-content: center !important;   /* wyśrodkowanie w pionie */
+    align-items: center !important;       /* wyśrodkowanie w poziomie */
 }
 
+/************************************************
+ * 3. Główny kontener formularza (#kc-content)
+ ************************************************/
 #kc-content {
-    /* Białe tło, zaokrąglone rogi, wyśrodkowanie */
     background: #fff !important;
     border-radius: 8px !important;
     padding: 2rem !important;
-    max-width: 400px !important;  /* szerokość max na desktopach */
-    width: 90% !important;        /* na mobile wypełnia prawie całą szerokość */
+    max-width: 400px !important;
+    width: 90% !important;
     box-sizing: border-box;
-    margin: 1rem auto !important; /* automatyczne wyśrodkowanie w poziomie */
-    /* Ewentualnie możesz dodać cień:
-       box-shadow: 0 2px 8px rgba(0,0,0,0.2) !important;
-    */
+    margin: 1rem auto !important;
+    text-align: center !important; /* wyśrodkowanie tekstu */
+    box-shadow: 0 2px 8px rgba(0,0,0,0.1) !important;
 }
 
 /************************************************
- * 4. Tytuł logowania (np. "Zaloguj się do konta")
+ * 4. Tytuł (np. "Zaloguj się do Twojego konta")
  ************************************************/
 #kc-page-title {
-    text-align: center !important;
-    color: #cc3366 !important;
+    color: #333333 !important;
     font-size: 24px !important;
     margin-bottom: 1rem !important;
+    text-align: center !important;  /* wyśrodkowanie tytułu */
 }
 
 /************************************************
- * 5. Pola tekstowe (#username, #password)
+ * 5. Układ etykiety i pola (kładziemy je w jednej linii)
  ************************************************/
+/* Kontener każdej pary label + input */
+.${properties.kcFormGroupClass!} {
+    display: flex !important;             /* ustawienie w wierszu */
+    align-items: center !important;       /* wyrównanie w pionie */
+    justify-content: space-between !important;
+    margin-bottom: 1rem !important;
+}
+
+/* Etykiety (np. "Nazwa użytkownika lub email", "Hasło") */
+.${properties.kcLabelClass!} {
+    width: 40% !important;                /* ustal szerokość etykiety */
+    text-align: left !important;          /* wyrównanie etykiety do lewej */
+    margin-right: 0.5rem !important;
+    font-weight: bold !important;         /* pogrubienie */
+}
+
+/* Pola tekstowe (#username, #password) */
 #username,
 #password {
-    display: block !important;     /* każdy w nowej linii */
-    width: 100% !important;
+    width: 60% !important;                /* pozostała szerokość na input */
     border: 2px solid #33cc40 !important;
     border-radius: 4px !important;
     padding: 0.6rem !important;
     font-size: 1rem !important;
-    margin-bottom: 1rem !important;
     box-sizing: border-box;
 }
 
@@ -70,12 +91,12 @@ body {
     background-color: #000 !important;
     color: #fff !important;
     border: none !important;
-    padding: 0.6rem 1.2rem !important;
+    padding: 0.8rem 1.2rem !important;
     font-size: 1rem !important;
     border-radius: 4px !important;
     cursor: pointer !important;
     transition: background-color 0.3s ease, color 0.3s ease !important;
-    margin-bottom: 1rem !important;
+    margin: 1rem 0 1rem 0 !important;   /* odstęp u góry i dołu */
 }
 
 #kc-login:hover {
@@ -83,7 +104,7 @@ body {
 }
 
 /************************************************
- * 7. Linki: "Zapomniałeś hasła?" i "Zarejestruj się"
+ * 7. Linki (zapomniałeś hasła? zarejestruj się)
  ************************************************/
 #kc-form-buttons,
 #kc-registration-wrapper,
@@ -102,6 +123,11 @@ body {
     font-size: 0.9rem !important;
 }
 
+/* "Zarejestruj się" w innym kolorze (np. niebieski) */
+#kc-registration-wrapper a {
+    color: #007bff !important;
+}
+
 #kc-form-buttons a:hover,
 #kc-registration-wrapper a:hover,
 #kc-info-wrapper a:hover {
@@ -109,21 +135,35 @@ body {
 }
 
 /************************************************
- * 8. Media query: dopasowanie na bardzo małych ekranach
+ * 8. Media queries – dostosowanie na urządzenia mobilne
  ************************************************/
 @media (max-width: 480px) {
     #kc-content {
-        padding: 1rem !important;
-        margin: 0.5rem auto !important;
+        padding: 1.5rem !important;
+        margin: 1rem !important;
     }
 
     #kc-page-title {
         font-size: 20px !important;
+        margin-bottom: 0.75rem !important;
+    }
+
+    /* Zwiększamy wielkość pól i przycisku dla lepszej czytelności */
+    #username,
+    #password {
+        font-size: 1.1rem !important;
+        padding: 0.8rem !important;
     }
 
     #kc-login {
-        font-size: 0.9rem !important;
-        padding: 0.5rem 1rem !important;
+        font-size: 1.1rem !important;
+        padding: 0.8rem 1rem !important;
     }
-}
 
+    #kc-form-buttons a,
+    #kc-registration-wrapper a,
+    #kc-info-wrapper a {
+        font-size: 1rem !important;
+        margin: 0.5rem !important;
+    }
+}