urejeniu filter gumbi in zacetek urejanja rezervacije

rezervacija.html

@@ -48,7 +48,7 @@
             </p>
         <h2>Rezervacija</h2>
         <p>Izpolnite podatke in pošljite zahtevo za restavracijo.</p>
-        <form method="get">
+        <form id="obrazec_rezervacija" method="get" novalidate> <!novalidate pomeni da bomo lahko dodali svoje napise za opozorila!>
             <fieldset class="field_rezervacija">
                 <legend>Podrobnosti rezervacije:</legend>
                 
@@ -72,7 +72,8 @@
                 E-poštni naslov
                 <input type="email" id="email" name="email" placeholder="neza.novak@primer.si" required>
                 Telefonska številka
-                <input type="tel" id="telefon-st" name="telefon-st" placeholder="022-333-444" pattern="[0-9]{3}[0-9]{3}[0-9]{3}" required>
+                <input type="tel" id="telefon-st" name="telefon-st"
+                    placeholder="040 123 456" required> <!števila bom prirejala z js!>
                     Priložnost <br>
                 <div class="opcije">
                     <div class="opcije_radio">

stylesheet.css

@@ -10,6 +10,8 @@
     --barva-dodatna: #CE9550;
     --barva-dodatna2:#F3E0C8;
     --barva-dodatna3:#F8EFE1;
+    --barva-gumb3-besedilo: #F0E5D2;
+
 
     --barva-kartice: #FFF9F0;
     --barva-besedilo-na-temnem: #F0E5D2;
@@ -428,6 +430,39 @@ footer p {
     min-width: 0;
 }
 
+.filtri_jedilnika { /*da se prikazejo v vrsti */
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+    gap: 1rem;
+    margin-bottom: 3rem;
+}
+
+.filter_gumb {
+    padding: 0.85rem 1.5rem;
+    border-radius: var(--zaobljenost);
+   border: 0.15rem solid var(--barva-besedilo);
+    outline: none;
+    color: var(--barva-besedilo);
+    text-decoration: none;
+    background-color: var(--barva-ozadje);
+    transition: background-color 0.2s ease, color 0.2s ease;
+    font-family: "Montserrat", sans-serif; 
+    font-weight: 500;
+    text-transform: uppercase;
+}
+
+
+.filter_gumb:hover {
+    background-color:var(--barva-kartice);
+}
+
+.filter_gumb.aktiven {
+    background-color: var(--barva-poudarek);
+    color: var(--barva-besedilo-na-temnem);
+    outline-color: var(--barva-poudarek);
+}
+
 #jedilnik {
     max-width: 100%;
 }
@@ -613,7 +648,7 @@ footer p {
     display: inline-block;
     padding: 0.5rem 1rem;
     border-radius: var(--zaobljenost);
-    color: var(--barva-besedilo-na-temnem);
+    color: var(--barva-gumb3-besedilo);
     font-weight: 500;
     text-decoration: none;
     background-color: var(--barva-besedilo);
@@ -835,6 +870,11 @@ footer p {
         text-align: center;
         max-width: none;
     }
+
+        .filtri_jedilnika {
+        flex-direction: column;
+        align-items: stretch;
+    }
 }
 
 /* telefon do 600px */
@@ -960,6 +1000,11 @@ footer p {
         text-align: center; /* Besedilo poravnamo na sredino */
         max-width: none;
     }
+
+        .filtri_jedilnika {
+        flex-direction: column;
+        align-items: stretch;
+    }
 }
 
 /* dark mode, samo spremenjene spremenljivke css */
@@ -972,6 +1017,7 @@ footer p {
         --barva-dodatna2: #44372b;
         --barva-dodatna3: #342c25;
         --barva-kartice: #302821;
+        --barva-gumb3-besedilo: #211c18;
         --barva-besedilo-na-temnem: #f4e9db;
         --barva-hero-prekrivna: rgba(15, 12, 10, 0.72);
         --barva-senca: rgba(0, 0, 0, 0.45);
@@ -987,6 +1033,7 @@ footer p {
     .logo_dark {
         display: block !important;
     }
+
 }
 
 /* omejeno gibanje: ni smooth scrolla in drugih animaciji */