add plan to form

css/style.css

@@ -604,6 +604,12 @@ section {
   display: none;
 }
 
+.highlight-field select {
+  border-color: #0E756F;
+  box-shadow: 0 0 0 3px rgba(14, 117, 111, .2);
+  transition: box-shadow .3s, border-color .3s;
+}
+
 /* ===== Footer ===== */
 .footer {
   background: #2D2D2D;

index.html

@@ -177,7 +177,7 @@
       "description": "Psycholožka zaměřená na poruchy příjmu potravy a sebepojetí. 8 let praxe s empatickým přístupem.",
       "knowsAbout": ["Poruchy příjmu potravy", "Anorexie", "Bulimie", "Sebepojetí"],
       "worksFor": { "@type": "Organization", "name": "Rari Center" },
-      "image": "https://images.unsplash.com/photo-1594824476967-48c8b964ac31?w=600&h=400&fit=crop&crop=face"
+      "image": "https://images.unsplash.com/photo-1573496359142-b8d87734a5a2?w=600&h=400&fit=crop&crop=face"
     },
     {
       "@context": "https://schema.org",
@@ -477,7 +477,7 @@
         </div>
 
         <div class="psychologist-card">
-          <img src="https://images.unsplash.com/photo-1594824476967-48c8b964ac31?w=600&h=400&fit=crop&crop=face" alt="Mgr. Karolína Procházková — psycholožka na poruchy příjmu potravy" loading="lazy" width="600" height="400">
+          <img src="https://images.unsplash.com/photo-1573496359142-b8d87734a5a2?w=600&h=400&fit=crop&crop=face" alt="Mgr. Karolína Procházková — psycholožka na poruchy příjmu potravy" loading="lazy" width="600" height="400">
           <div class="psychologist-info">
             <div class="psychologist-header">
               <h3>Mgr. Karolína Procházková</h3>
@@ -533,7 +533,7 @@
             <li>Rezervace přes formulář</li>
             <li>E-mailová podpora</li>
           </ul>
-          <a href="#kontakt" class="btn btn-outline">Vybrat plán</a>
+          <a href="#kontakt" class="btn btn-outline plan-btn" data-plan="zakladni">Vybrat plán</a>
         </div>
 
         <div class="pricing-card featured">
@@ -549,7 +549,7 @@
             <li>Prioritní rezervace</li>
             <li>Pracovní listy a cvičení</li>
           </ul>
-          <a href="#kontakt" class="btn btn-primary">Vybrat plán</a>
+          <a href="#kontakt" class="btn btn-primary plan-btn" data-plan="standard">Vybrat plán</a>
         </div>
 
         <div class="pricing-card">
@@ -564,7 +564,7 @@
             <li>Prioritní terapeut</li>
             <li>Krizová linka 24/7</li>
           </ul>
-          <a href="#kontakt" class="btn btn-outline">Vybrat plán</a>
+          <a href="#kontakt" class="btn btn-outline plan-btn" data-plan="premium">Vybrat plán</a>
         </div>
 
       </div>
@@ -653,6 +653,15 @@
               </select>
             </div>
           </div>
+          <div class="form-group">
+            <label for="formPlan">Zvolený plán</label>
+            <select id="formPlan">
+              <option value="">— Vyberte plán —</option>
+              <option value="zakladni">Základní — 2 500 Kč/měsíc</option>
+              <option value="standard">Standard — 3 200 Kč/měsíc</option>
+              <option value="premium">Premium — 4 100 Kč/měsíc</option>
+            </select>
+          </div>
           <div class="form-group">
             <label for="formMessage">Zpráva</label>
             <textarea id="formMessage" placeholder="Popište nám, s čím vám můžeme pomoci..."></textarea>

js/main.js

@@ -76,8 +76,25 @@ function isValidEmail(email) {
   return /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email);
 }
 
-// ===== Smooth Scroll for "Objednat se" buttons =====
+// ===== Plan selection from pricing buttons =====
+const formPlan = document.getElementById('formPlan');
+
+document.querySelectorAll('.plan-btn').forEach(btn => {
+  btn.addEventListener('click', (e) => {
+    e.preventDefault();
+    const plan = btn.getAttribute('data-plan');
+    if (formPlan && plan) {
+      formPlan.value = plan;
+      formPlan.parentElement.classList.add('highlight-field');
+      setTimeout(() => formPlan.parentElement.classList.remove('highlight-field'), 1500);
+    }
+    document.getElementById('kontakt').scrollIntoView({ behavior: 'smooth' });
+  });
+});
+
+// ===== Smooth Scroll for anchor links =====
 document.querySelectorAll('a[href^="#"]').forEach(anchor => {
+  if (anchor.classList.contains('plan-btn')) return;
   anchor.addEventListener('click', (e) => {
     const target = document.querySelector(anchor.getAttribute('href'));
     if (target) {