From 453c3729696a051689389a4660b4d7c362cc663d Mon Sep 17 00:00:00 2001
From: albivkt <albivkt@outlook.com>
Date: Tue, 22 Jul 2025 21:48:12 +0300
Subject: [PATCH] =?UTF-8?q?=D0=9E=D0=B1=D0=BD=D0=BE=D0=B2=D0=BB=D0=B5?=
 =?UTF-8?q?=D0=BD=20=D0=BA=D0=BE=D0=BC=D0=BF=D0=BE=D0=BD=D0=B5=D0=BD=D1=82?=
 =?UTF-8?q?=20HouseCalculatorModal:=20=D1=83=D0=BB=D1=83=D1=87=D1=88=D0=B5?=
 =?UTF-8?q?=D0=BD=D1=8B=20=D1=81=D1=82=D0=B8=D0=BB=D0=B8=20=D0=B4=D0=BB?=
 =?UTF-8?q?=D1=8F=20=D1=80=D0=B0=D0=B4=D0=B8=D0=BE=D0=BA=D0=BD=D0=BE=D0=BF?=
 =?UTF-8?q?=D0=BE=D0=BA=20=D1=81=20=D0=B4=D0=BE=D0=B1=D0=B0=D0=B2=D0=BB?=
 =?UTF-8?q?=D0=B5=D0=BD=D0=B8=D0=B5=D0=BC=20=D1=8D=D1=84=D1=84=D0=B5=D0=BA?=
 =?UTF-8?q?=D1=82=D0=BE=D0=B2=20=D0=BF=D1=80=D0=B8=20=D0=B2=D1=8B=D0=B1?=
 =?UTF-8?q?=D0=BE=D1=80=D0=B5,=20=D0=B8=D0=B7=D0=BC=D0=B5=D0=BD=D0=B5?=
 =?UTF-8?q?=D0=BD=D1=8B=20=D0=BA=D0=BB=D0=B0=D1=81=D1=81=D1=8B=20=D0=B4?=
 =?UTF-8?q?=D0=BB=D1=8F=20=D0=BF=D0=BE=D0=B2=D1=8B=D1=88=D0=B5=D0=BD=D0=B8?=
 =?UTF-8?q?=D1=8F=20=D1=87=D0=B8=D1=82=D0=B0=D0=B5=D0=BC=D0=BE=D1=81=D1=82?=
 =?UTF-8?q?=D0=B8=20=D0=B8=20=D0=B2=D0=B7=D0=B0=D0=B8=D0=BC=D0=BE=D0=B4?=
 =?UTF-8?q?=D0=B5=D0=B9=D1=81=D1=82=D0=B2=D0=B8=D1=8F.=20=D0=A3=D0=BF?=
 =?UTF-8?q?=D1=80=D0=BE=D1=89=D0=B5=D0=BD=D1=8B=20=D0=BF=D1=80=D0=BE=D0=B2?=
 =?UTF-8?q?=D0=B5=D1=80=D0=BA=D0=B8=20=D1=81=D0=BE=D1=81=D1=82=D0=BE=D1=8F?=
 =?UTF-8?q?=D0=BD=D0=B8=D1=8F=20=D0=B4=D0=BB=D1=8F=20=D0=B2=D0=B8=D0=B7?=
 =?UTF-8?q?=D1=83=D0=B0=D0=BB=D1=8C=D0=BD=D1=8B=D1=85=20=D1=8D=D1=84=D1=84?=
 =?UTF-8?q?=D0=B5=D0=BA=D1=82=D0=BE=D0=B2.?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/HouseCalculatorModal.tsx | 34 +++++++++++++++++++------
 1 file changed, 26 insertions(+), 8 deletions(-)

diff --git a/src/components/HouseCalculatorModal.tsx b/src/components/HouseCalculatorModal.tsx
index e247ee6..dc27cd6 100644
--- a/src/components/HouseCalculatorModal.tsx
+++ b/src/components/HouseCalculatorModal.tsx
@@ -216,8 +216,14 @@ const HouseCalculatorModal = ({ isOpen, onClose, userName = '', userPhone = '' }
               </h2>
               <div className="flex flex-col gap-2 sm:gap-3 lg:gap-4">
                 {areas.map((a) => (
-                  <label key={a} className="group relative cursor-pointer p-3 sm:p-4 rounded-xl bg-gradient-to-br from-white/10 to-white/5 backdrop-blur-md border border-white/20 hover:border-white/40 hover:scale-[1.01] transition-all duration-300">
-                    <div className="absolute inset-0 rounded-xl bg-gradient-to-br from-blue-500/20 to-purple-500/20 opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
+                  <label key={a} className={`group relative cursor-pointer p-3 sm:p-4 rounded-xl bg-gradient-to-br from-white/10 to-white/5 backdrop-blur-md border transition-all duration-300 hover:scale-[1.01] ${
+                    area === a 
+                      ? 'border-blue-500 shadow-lg shadow-blue-500/25' 
+                      : 'border-white/20 hover:border-white/40'
+                  }`}>
+                    <div className={`absolute inset-0 rounded-xl bg-gradient-to-br from-blue-500/20 to-purple-500/20 transition-opacity duration-300 ${
+                      area === a ? 'opacity-100' : 'opacity-0 group-hover:opacity-100'
+                    }`}></div>
                     <div className="relative z-10 flex items-center">
                       <input
                         type="radio"
@@ -240,10 +246,16 @@ const HouseCalculatorModal = ({ isOpen, onClose, userName = '', userPhone = '' }
               <h2 className="text-lg sm:text-xl lg:text-2xl font-bold mb-4 sm:mb-6 bg-gradient-to-r from-white via-blue-100 to-white bg-clip-text text-transparent">
                 Вариант отделки
               </h2>
-              <div className="space-y-2 sm:space-y-3 lg:space-y-4">
+              <div className="flex flex-col gap-2 sm:gap-3 lg:gap-4">
                 {finishOptions.map((option) => (
-                  <label key={option} className="group relative cursor-pointer p-3 sm:p-4 rounded-xl bg-gradient-to-br from-white/10 to-white/5 backdrop-blur-md border border-white/20 hover:border-white/40 hover:scale-[1.01] transition-all duration-300">
-                    <div className="absolute inset-0 rounded-xl bg-gradient-to-br from-blue-500/20 to-purple-500/20 opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
+                  <label key={option} className={`group relative cursor-pointer p-3 sm:p-4 rounded-xl bg-gradient-to-br from-white/10 to-white/5 backdrop-blur-md border transition-all duration-300 hover:scale-[1.01] ${
+                    finish === option 
+                      ? 'border-blue-500 shadow-lg shadow-blue-500/25' 
+                      : 'border-white/20 hover:border-white/40'
+                  }`}>
+                    <div className={`absolute inset-0 rounded-xl bg-gradient-to-br from-blue-500/20 to-purple-500/20 transition-opacity duration-300 ${
+                      finish === option ? 'opacity-100' : 'opacity-0 group-hover:opacity-100'
+                    }`}></div>
                     <div className="relative z-10 flex items-center">
                       <input
                         type="radio"
@@ -268,10 +280,16 @@ const HouseCalculatorModal = ({ isOpen, onClose, userName = '', userPhone = '' }
               <h2 className="text-lg sm:text-xl lg:text-2xl font-bold mb-4 sm:mb-6 bg-gradient-to-r from-white via-blue-100 to-white bg-clip-text text-transparent">
                 Источник финансирования
               </h2>
-              <div className="space-y-2 sm:space-y-3 lg:space-y-4">
+              <div className="flex flex-col gap-2 sm:gap-3 lg:gap-4">
                 {financeOptions.map((option) => (
-                  <label key={option} className="group relative cursor-pointer p-3 sm:p-4 rounded-xl bg-gradient-to-br from-white/10 to-white/5 backdrop-blur-md border border-white/20 hover:border-white/40 hover:scale-[1.01] transition-all duration-300">
-                    <div className="absolute inset-0 rounded-xl bg-gradient-to-br from-blue-500/20 to-purple-500/20 opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
+                  <label key={option} className={`group relative cursor-pointer p-3 sm:p-4 rounded-xl bg-gradient-to-br from-white/10 to-white/5 backdrop-blur-md border transition-all duration-300 hover:scale-[1.01] ${
+                    finance === option 
+                      ? 'border-blue-500 shadow-lg shadow-blue-500/25' 
+                      : 'border-white/20 hover:border-white/40'
+                  }`}>
+                    <div className={`absolute inset-0 rounded-xl bg-gradient-to-br from-blue-500/20 to-purple-500/20 transition-opacity duration-300 ${
+                      finance === option ? 'opacity-100' : 'opacity-0 group-hover:opacity-100'
+                    }`}></div>
                     <div className="relative z-10 flex items-center">
                       <input
                         type="radio"