From 254fecc23c0fe9e9107a59c52849010d8c365a4b Mon Sep 17 00:00:00 2001
From: ksenia-tryapitsyna <158049845+KseniaTry@users.noreply.github.com>
Date: Thu, 21 Mar 2024 15:33:35 +0300
Subject: [PATCH] fix: fix errors after code review

---
 catalog.html                   |  22 +--
 images/icons/calendar-icon.svg |  15 ++
 images/icons/tooltip-icon.svg  |   3 +
 images/icons/triangle.svg      |  10 ++
 index.html                     |  55 +++-----
 styles/styles.css              | 241 ++++++++++++++++++++++++++++-----
 6 files changed, 266 insertions(+), 80 deletions(-)
 create mode 100644 images/icons/calendar-icon.svg
 create mode 100644 images/icons/tooltip-icon.svg
 create mode 100644 images/icons/triangle.svg
diff --git a/catalog.html b/catalog.html
index f61dcc2..82c64d7 100644
--- a/catalog.html
+++ b/catalog.html
@@ -6,7 +6,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Гостиницы Седоны</title>
     <link rel="stylesheet" href="styles/styles.css">
-    <link rel="icon" href="favicon.ico">
+    <link rel="icon" href="/favicon.ico/favicon.ico">
   </head>
 
   <body>
@@ -240,8 +240,9 @@ <h3 class="hotel-card-title">Amara Resort & Spa</h3>
             <p class="hotel-price-value">От 4000 ₽</p>
             <a class="card-button detail-button" href="#">Подробнее</a>
             <button class="card-button favorite-button" type="button">В избранное</button>
-            <span class="visually-hidden">Четыре звезды</span>
-            <span class="hotel-card-star hotel-card-star-four"></span>
+            <span class="hotel-card-star hotel-card-star-four">
+              <span class="visually-hidden">Четыре звезды</span>
+            </span>
             <p class="card-button rate-button">Рейтинг: 8,5</p>
           </article>
 
@@ -257,8 +258,9 @@ <h3 class="hotel-card-title">Villas at Poco Diablo</h3>
             <p class="hotel-price-value">От 5000 ₽</p>
             <a class="card-button detail-button" href="#">Подробнее</a>
             <button class="card-button favorite-button-active" type="button">В избранном</button>
-            <span class="visually-hidden">Четыре звезды</span>
-            <span class="hotel-card-star hotel-card-star-four"></span>
+            <span class="hotel-card-star hotel-card-star-four">
+              <span class="visually-hidden">Четыре звезды</span>
+            </span>
             <p class="card-button rate-button">Рейтинг: 9,2</p>
           </article>
 
@@ -274,8 +276,9 @@ <h3 class="hotel-card-title">Desert Quail Inn</h3>
             <p class="hotel-price-value">От 2500 ₽</p>
             <a class="card-button detail-button" href="#">Подробнее</a>
             <button class="card-button favorite-button" type="button">В избранное</button>
-            <span class="visually-hidden">Три звезды</span>
-            <span class="hotel-card-star hotel-card-star-three"></span>
+            <span class="hotel-card-star hotel-card-star-three">
+              <span class="visually-hidden">Три звезды</span>
+            </span>
             <p class="card-button rate-button">Рейтинг: 6,9</p>
           </article>
 
@@ -291,8 +294,9 @@ <h3 class="hotel-card-title">GreenTree Inn</h3>
             <p class="hotel-price-value">От 1500 ₽</p>
             <a class="card-button detail-button" href="#">Подробнее</a>
             <button class="card-button favorite-button" type="button">В избранное</button>
-            <span class="visually-hidden">Две звезды</span>
-            <span class="hotel-card-star hotel-card-star-two"></span>
+            <span class="hotel-card-star hotel-card-star-two">
+              <span class="visually-hidden">Две звезды</span>
+            </span>
             <p class="card-button rate-button">Рейтинг: 5,0</p>
           </article>
         </div>
diff --git a/images/icons/calendar-icon.svg b/images/icons/calendar-icon.svg
new file mode 100644
index 0000000..8f13801
--- /dev/null
+++ b/images/icons/calendar-icon.svg
@@ -0,0 +1,15 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g opacity="0.3">
+<path d="M7.75 12C8.05 12 8.25 11.8 8.25 11.5C8.25 11.2 8.05 11 7.75 11C7.45 11 7.25 11.2 7.25 11.5C7.25 11.8 7.45 12 7.75 12Z" fill="black"/>
+<path d="M17 4H15V2H14V4H6V2H5V4H3C2.4 4 2 4.4 2 5V16C2 16.5 2.4 17 3 17H17C17.5 17 18 16.5 18 16V5C18 4.4 17.5 4 17 4ZM17 16H3V9H17V16ZM3 8V5H5V7H6V5H14V7H15V5H17V8H3Z" fill="black"/>
+<path d="M10 12C10.3 12 10.5 11.8 10.5 11.5C10.5 11.2 10.3 11 10 11C9.7 11 9.5 11.2 9.5 11.5C9.5 11.8 9.7 12 10 12Z" fill="black"/>
+<path d="M12.25 12C12.55 12 12.75 11.8 12.75 11.5C12.75 11.2 12.55 11 12.25 11C11.95 11 11.75 11.2 11.75 11.5C11.75 11.8 11.95 12 12.25 12Z" fill="black"/>
+<path d="M7.75 13C7.45 13 7.25 13.2 7.25 13.5C7.25 13.8 7.45 14 7.75 14C8.05 14 8.25 13.8 8.25 13.5C8.25 13.2 8.05 13 7.75 13Z" fill="black"/>
+<path d="M5.5 12C5.8 12 6 11.8 6 11.5C6 11.2 5.8 11 5.5 11C5.2 11 5 11.2 5 11.5C5 11.8 5.2 12 5.5 12Z" fill="black"/>
+<path d="M5.5 13C5.2 13 5 13.2 5 13.5C5 13.8 5.2 14 5.5 14C5.8 14 6 13.8 6 13.5C6 13.2 5.8 13 5.5 13Z" fill="black"/>
+<path d="M10 13C9.7 13 9.5 13.2 9.5 13.5C9.5 13.8 9.7 14 10 14C10.3 14 10.5 13.8 10.5 13.5C10.5 13.2 10.3 13 10 13Z" fill="black"/>
+<path d="M12.25 13C11.95 13 11.75 13.2 11.75 13.5C11.75 13.8 11.95 14 12.25 14C12.55 14 12.75 13.8 12.75 13.5C12.75 13.2 12.55 13 12.25 13Z" fill="black"/>
+<path d="M14.5 12C14.8 12 15 11.8 15 11.5C15 11.2 14.8 11 14.5 11C14.2 11 14 11.2 14 11.5C14 11.8 14.2 12 14.5 12Z" fill="black"/>
+<path d="M14.5 13C14.2 13 14 13.2 14 13.5C14 13.8 14.2 14 14.5 14C14.8 14 15 13.8 15 13.5C15 13.2 14.8 13 14.5 13Z" fill="black"/>
+</g>
+</svg>
diff --git a/images/icons/tooltip-icon.svg b/images/icons/tooltip-icon.svg
new file mode 100644
index 0000000..47acf30
--- /dev/null
+++ b/images/icons/tooltip-icon.svg
@@ -0,0 +1,3 @@
+<svg width="2" height="12" viewBox="0 0 2 12" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M0 0H2V2H0V0ZM2 12H0V3H2V12Z" fill="white"/>
+</svg>
diff --git a/images/icons/triangle.svg b/images/icons/triangle.svg
new file mode 100644
index 0000000..3288a12
--- /dev/null
+++ b/images/icons/triangle.svg
@@ -0,0 +1,10 @@
+<svg width="19" height="9" viewBox="0 0 19 9" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_109511_492)">
+<path d="M9.5 0L19 9H0L9.5 0Z" fill="#333333"/>
+</g>
+<defs>
+<clipPath id="clip0_109511_492">
+<rect width="19" height="9" fill="white"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/index.html b/index.html
index d86b7df..58bfb87 100644
--- a/index.html
+++ b/index.html
@@ -6,7 +6,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Седона</title>
     <link rel="stylesheet" href="styles/styles.css">
-    <link rel="icon" href="favicon.ico">
+    <link rel="icon" href="/favicon.ico/favicon.ico">
   </head>
 
   <body>
@@ -161,7 +161,7 @@ <h2 class="subscription-title">Подпишитесь на рассылку</h2>
           <a class="button-social" href="https://t.me/htmlacademy ">
             <span class="visually-hidden">Telegram</span>
             <svg class="icon-social" aria-hidden="true" focusable="false" width="18" height="17" viewBox="0 0 18 17"
-              fill="#83B3D3" xmlns="http://www.w3.org/2000/svg" aria-label="Иконка Телеграм">
+              fill="#83B3D3" role="img" aria-label="Иконка Телеграм" xmlns="http://www.w3.org/2000/svg">
               <path
                 d="M16.785 0.955705L0.840489 7.1042C-0.247661 7.54126 -0.241365 8.14828 0.640845 8.41897L4.73445 9.69597L14.2058 3.72014C14.6537 3.44766 15.0629 3.59424 14.7265 3.89281L7.05283 10.8183H7.05103L7.05283 10.8192L6.77045 15.0387C7.18413 15.0387 7.36669 14.8489 7.59871 14.625L9.58705 12.6915L13.7229 15.7464C14.4855 16.1664 15.0332 15.9506 15.2229 15.0405L17.9379 2.2453C18.2158 1.13107 17.5126 0.626562 16.785 0.955705Z" />
             </svg>
@@ -181,7 +181,7 @@ <h2 class="subscription-title">Подпишитесь на рассылку</h2>
       <a class="footer-phone" href="tel:+78128121212">+7 (812) 812-12-12</a>
       <a class="footer-logo-link" href="https://htmlacademy.ru/" aria-label="HTML Academy">
         <svg class="footer-logo-svg" aria-hidden="true" focusable="false" width="115" height="34" viewBox="0 0 115 34"
-        role="img" aria-label="Логотип HTML Академии" xmlns="http://www.w3.org/2000/svg">
+          role="img" aria-label="Логотип HTML Академии" xmlns="http://www.w3.org/2000/svg">
           <path d="M0 13.2564V15.8564H2.5V13.2564H0Z" />
           <path
             d="M11.6 4.85645C10 4.85645 8.8 5.55645 8 6.55645H7.9V0.356445H5.9V15.8564H7.9V10.5564C7.9 8.45645 9.2 6.95645 11.2 6.95645C13 6.95645 14.1 8.35645 14.1 10.1564V15.8564H16.1V9.75644C16.2 6.75644 14.3 4.85645 11.6 4.85645Z" />
@@ -214,29 +214,27 @@ <h2 class="subscription-title">Подпишитесь на рассылку</h2>
       <div class="modal modal-auth">
         <button class="modal-close-button" type="button">
           <span class="visually-hidden">Закрыть</span>
-          <svg class="modal-close-icon" width="14" height="14" viewBox="0 0 14 14" fill="black" aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg">
+          <svg class="modal-close-icon" width="14" height="14" viewBox="0 0 14 14" fill="black" aria-hidden="true"
+            focusable="false" role="img" aria-label="Кнопка закрытия модального окна"
+            xmlns="http://www.w3.org/2000/svg">
             <path
               d="M14 1.29231L12.7077 0L7 5.70769L1.29231 0L0 1.29231L5.70769 7L0 12.7077L1.29231 14L7 8.29231L12.7077 14L14 12.7077L8.29231 7L14 1.29231Z" />
           </svg>
         </button>
         <section class="modal-content">
           <h2 class="visually-hidden">Модальное окно для поиска гостиницы в Седоне</h2>
-          <form class="modal-form" action="https://echo.htmlacademy.ru/" method="get">
+          <form class="modal-form" action="https://echo.htmlacademy.ru/" method="post">
             <fieldset class="modal-form-fieldset">
 
               <legend class="modal-form-title">Поиск гостиницы в Седоне</legend>
               <div class="fieldset-container">
                 <label class=" modal-form-label date-label" for="check-in-date">Дата Заезда:</label>
-
-                <input class="modal-form-input check-in-date-input" type="date" id="check-in-date" name="check-in-date"
-                  required>
+                <input class="modal-form-input date-input" type="text" id="check-in-date" name="check-in-date" value="27 апреля 2020" placeholder="Укажите дату" required>
                 <span class="modal-form-text error-text">Мы не можем отправить вас в прошлое.</span>
 
-
                 <label class="modal-form-label date-label" for="check-out-date">Дата Выезда:</label>
-
-                <input class="modal-form-input check-out-date-input" type="date" id="check-out-date"
-                  name="check-out-date" required>
+                <input class="modal-form-input date-input" type="text" id="check-out-date" name="check-out-date" value="1 сентября 2024" placeholder="Укажите дату"
+                  required>
                 <span class="modal-form-text">На эти даты есть свободные номера. Пока есть.</span>
 
                 <label class="modal-form-label adults-count-label" for="adults-count">Взрослые:</label>
@@ -245,20 +243,20 @@ <h2 class="visually-hidden">Модальное окно для поиска го
                     <span class="visually-hidden">Уменьшить количество</span>
                     <span class="count-input-button-icon">
                       <svg class="button-svg" width="14" height="2" viewBox="0 0 14 2" fill="#756157" fill-opacity="0.3"
-                      aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg">
+                        aria-hidden="true" focusable="false" role="img"
+                        aria-label="Кнопка для уменьшения количества взрослых" xmlns="http://www.w3.org/2000/svg">
                         <path d="M0 0L0 2L14 2V0L0 0Z" />
                       </svg>
                     </span>
                   </button>
-
                   <input class="modal-form-input count-input" type="number" id="adults-count" name="adults-count"
                     min="0" required>
-
                   <button class="count-input-button plus" type="button">
                     <span class="visually-hidden">Увеличить количество</span>
                     <span class="count-input-button-icon">
                       <svg class="button-svg" width="14" height="14" viewBox="0 0 14 14" fill="#756157"
-                        fill-opacity="0.3" aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg">
+                        fill-opacity="0.3" aria-hidden="true" focusable="false" role="img"
+                        aria-label="Кнопка для увеличения количества взрослых" xmlns="http://www.w3.org/2000/svg">
                         <path d="M14 6H8V0H6V6H0V8H6V14H8V8H14V6Z" />
                       </svg>
                     </span>
@@ -268,24 +266,8 @@ <h2 class="visually-hidden">Модальное окно для поиска го
                 <span class="modal-form-label modal-form-label-icon">
                   <label class="modal-form-label" for="kids-count">Дети:</label>
                   <span class="tooltip">
-                    <button class="tooltip-button" type="button" aria-labelledby="tooltip-label-count">
-                      <svg class="tooltip-icon" width="2" height="12" viewBox="0 0 2 12" fill="white"
-                      aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg">
-                        <path fill-rule="evenodd" clip-rule="evenodd" d="M0 0H2V2H0V0ZM2 12H0V3H2V12Z" />
-                      </svg>
-                    </button>
+                    <button class="tooltip-button" type="button" aria-labelledby="tooltip-label-count"></button>
                     <span class="tooltip-text" role="tooltip" id="tooltip-label-count">
-                      <svg class="tooltip-text-arrow" width="19" height="9" viewBox="0 0 19 9" fill="none"
-                      aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg">
-                        <g clip-path="url(#clip0_102232_83)">
-                          <path d="M9.5 0L19 9H0L9.5 0Z" fill="#333333" />
-                        </g>
-                        <defs>
-                          <clipPath id="clip0_102232_83">
-                            <rect width="19" height="9" fill="white" />
-                          </clipPath>
-                        </defs>
-                      </svg>
                       Укажите количество детей, которые будут с вами, возраст которых от 6 до 18
                       лет. Дети до 6 лет размещаются бесплатно.</span>
                   </span>
@@ -295,19 +277,20 @@ <h2 class="visually-hidden">Модальное окно для поиска го
                     <span class="visually-hidden">Уменьшить количество</span>
                     <span class="count-input-button-icon">
                       <svg class="button-svg" width="14" height="2" viewBox="0 0 14 2" fill="#756157" fill-opacity="0.3"
-                      aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg">
+                        aria-hidden="true" focusable="false" role="img"
+                        aria-label="Кнопка для уменьшения количества детей" xmlns="http://www.w3.org/2000/svg">
                         <path d="M0 0L0 2L14 2V0L0 0Z" />
                       </svg>
                     </span>
                   </button>
-
                   <input class="modal-form-input count-input" type="number" id="kids-count" name="kids-count" min="0"
                     required>
                   <button class="count-input-button plus" type="button">
                     <span class="visually-hidden">Увеличить количество</span>
                     <span class="count-input-button-icon">
                       <svg class="button-svg" width="14" height="14" viewBox="0 0 14 14" fill="#756157"
-                        fill-opacity="0.3" aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg">
+                        fill-opacity="0.3" aria-hidden="true" focusable="false" role="img"
+                        aria-label="Кнопка для увеличения количества детей" xmlns="http://www.w3.org/2000/svg">
                         <path d="M14 6H8V0H6V6H0V8H6V14H8V8H14V6Z" />
                       </svg>
                     </span>
diff --git a/styles/styles.css b/styles/styles.css
index 637331d..1e923a3 100644
--- a/styles/styles.css
+++ b/styles/styles.css
@@ -66,14 +66,19 @@ body {
 
 .header-logo-link {
   position: absolute;
+  line-height: 0;
 }
 
 .header-logo-link-img {
   width: 140px;
 }
 
-.header-logo-link:hover .header-logo-link-img,
-.header-logo-link:focus .header-logo-link-img {
+.header-logo-link:focus {
+  outline: 3px solid #83b3d3;
+  border-radius: 4px;
+}
+
+.header-logo-link:hover .header-logo-link-img {
   opacity: 0.6;
 }
 
@@ -121,11 +126,15 @@ body {
   background-color: #756257;
 }
 
-.navigation-list-item-link:hover,
-.navigation-list-item-link:focus {
+.navigation-list-item-link:hover {
   color: #756157;
 }
 
+.navigation-list-item-link:focus {
+  outline: 3px solid #83b3d3;
+  border-radius: 4px;
+}
+
 .navigation-list-item-link:active {
   color: rgba(117, 97, 87, 0.3);
 }
@@ -149,6 +158,9 @@ body {
 }
 
 .navigation-user-item-link {
+  display: block;
+  min-width: 44px;
+  min-height: 64px;
   text-decoration: none;
   font-size: 10px;
   line-height: 10px;
@@ -174,12 +186,16 @@ body {
   background-color: #7db54f;
 }
 
-.navigation-user-item-link:hover .navigation-user-item-link-icon,
-.navigation-user-item-link:focus .navigation-user-item-link-icon {
+.navigation-user-item-link:hover .navigation-user-item-link-icon {
   fill: #756157;
 }
 
-.navigation-user-item-link:active .navigation-user-item-link-icon {
+.navigation-user-item-link:focus {
+  outline: 3px solid #83b3d3;
+  border-radius: 4px;
+}
+
+.navigation-user-item-link:active {
   fill: rgba(117, 97, 87, 0.3);
 }
 
@@ -200,9 +216,13 @@ body {
   cursor: pointer;
 }
 
-.header-button:hover,
+.header-button:hover {
+  background-color: #615048;
+}
+
 .header-button:focus {
   background-color: #615048;
+  outline: 3px solid #83b3d3;
 }
 
 .header-button:active {
@@ -224,7 +244,7 @@ body {
   background-image: url("../images/index/divider.svg"), url("../images/index/index-background.jpg");
   background-size: 100% auto, cover;
   background-repeat: no-repeat, no-repeat;
-  background-position: bottom, center;
+  background-position: bottom center, center center;
 }
 
 .hero-img {
@@ -304,7 +324,7 @@ body {
   display: block;
   width: 60px;
   height: 2px;
-  background: rgba(0, 0, 0, 0.3);
+  background-color: rgba(0, 0, 0, 0.3);
   margin: 0 auto;
   margin-top: 30px;
 }
@@ -314,7 +334,6 @@ body {
   margin: 0 auto;
   margin-bottom: 30px;
 
-
   font-size: 24px;
   font-weight: 700;
   line-height: 28px;
@@ -393,6 +412,7 @@ body {
   height: 70px;
   margin: 0 auto;
   margin-bottom: 30px;
+
   background-size: contain;
   background-repeat: no-repeat;
   background-position: center;
@@ -477,9 +497,13 @@ body {
   cursor: pointer;
 }
 
-.hotels-search-button:hover,
+.hotels-search-button:hover {
+  background-color: #615048;
+}
+
 .hotels-search-button:focus {
   background-color: #615048;
+  outline: 3px solid #83b3d3;
 }
 
 .hotels-search-button:active {
@@ -543,6 +567,15 @@ body {
   border-radius: 4px 0 0 4px;
 }
 
+.email-input:hover {
+  background-color: #e6e6e6;
+}
+
+.email-input:focus {
+  outline: 3px solid #83b3d3;
+  background-color: #e6e6e6;
+}
+
 .email-input-gray {
   background-color: #f2f2f2;
 }
@@ -564,9 +597,13 @@ body {
   cursor: pointer;
 }
 
-.subscription-button:hover,
+.subscription-button:hover {
+  background-color: #68a2ca;
+}
+
 .subscription-button:focus {
   background-color: #68a2ca;
+  outline: 3px solid #83b3d3;
 }
 
 .subscription-button:active {
@@ -627,6 +664,8 @@ body {
 }
 
 .filter-breadcrumbs-link:focus {
+  outline: 3px solid #83b3d3;
+  border-radius: 4px;
   color: #ffffff;
 }
 
@@ -654,7 +693,6 @@ body {
   width: 8px;
   top: 0;
   right: -18px;
-
   background-image: url("/images/icons/arrow-right.svg");
   background-repeat: no-repeat;
 }
@@ -681,7 +719,6 @@ body {
 .filter-title {
   margin: 0;
   margin-bottom: 32px;
-
   font-size: 20px;
   font-weight: 700;
   line-height: 24px;
@@ -746,7 +783,7 @@ body {
   background-color: rgb(255, 255, 255, 0.6);
 }
 
-.filter-list-item-label:focus .control-mark {
+.filter-list-item-label:focus-within .control-mark {
   outline: 3px solid #83b3d3;
 }
 
@@ -820,6 +857,11 @@ body {
   margin: 0;
 }
 
+.price-input[type="number"] {
+  appearance: none;
+  -moz-appearance: textfield;
+}
+
 .min-price {
   border-radius: 4px 0 0 4px;
 }
@@ -870,6 +912,18 @@ body {
   right: -1px;
 }
 
+.range-toggle:hover {
+  background-color: #e5e5e5;
+}
+
+.range-toggle:focus {
+  outline: 3px solid #83b3d3;
+}
+
+.range-toggle:active {
+  background-color: #e7e7e7;
+}
+
 /* Кнопки в фильтре */
 .buttons-container {
   min-width: 191px;
@@ -897,9 +951,13 @@ body {
   cursor: pointer;
 }
 
-.apply-button:hover,
+.apply-button:hover {
+  background-color: #68a2ca;
+}
+
 .apply-button:focus {
   background-color: #68a2ca;
+  outline: 3px solid #83b3d3;
 }
 
 .apply-button:active {
@@ -1035,6 +1093,7 @@ body {
 .sorting:hover,
 .sorting:focus {
   border: 2px solid #68a2ca;
+  outline: none;
 }
 
 /* Карточки */
@@ -1071,6 +1130,18 @@ body {
   line-height: 0;
 }
 
+.hotel-card-image-link:hover {
+  opacity: 0.6;
+}
+
+.hotel-card-image-link:focus {
+  outline: 3px solid #83b3d3;
+}
+
+.hotel-card-image-link:active {
+  opacity: 0.3;
+}
+
 .hotel-card-title-link {
   grid-area: title;
   width: max-content;
@@ -1079,6 +1150,19 @@ body {
   text-decoration: none;
 }
 
+.hotel-card-title-link:hover {
+  opacity: 0.6;
+}
+
+.hotel-card-title-link:focus {
+  outline: 3px solid #83b3d3;
+  border-radius: 4px;
+}
+
+.hotel-card-title-link:active {
+  opacity: 0.3;
+}
+
 .hotel-card-title {
   margin: 0;
 
@@ -1152,9 +1236,13 @@ body {
   background-color: #756157;
 }
 
-.detail-button:hover,
+.detail-button:hover {
+  background-color: #615048;
+}
+
 .detail-button:focus {
   background-color: #615048;
+  outline: 2px solid #83b3d3;
 }
 
 .detail-button:active {
@@ -1168,9 +1256,13 @@ body {
   background-color: #82b3d3;
 }
 
-.favorite-button:hover,
+.favorite-button:hover {
+  background-color: #68a2ca;
+}
+
 .favorite-button:focus {
   background-color: #68a2ca;
+  outline: 3px solid #83b3d3;
 }
 
 .favorite-button:active {
@@ -1184,9 +1276,13 @@ body {
   background-color: #7db54f;
 }
 
-.favorite-button-active:hover,
+.favorite-button-active:hover {
+  background-color: #6c9e42;
+}
+
 .favorite-button-active:focus {
   background-color: #6c9e42;
+  outline: 3px solid #83b3d3;
 }
 
 .favorite-button-active:active {
@@ -1237,9 +1333,13 @@ body {
   text-align: center;
 }
 
-.pagination-link:hover,
+.pagination-link:hover {
+  background-color: #68a2ca;
+}
+
 .pagination-link:focus {
   background-color: #68a2ca;
+  outline: 3px solid #83b3d3;
 }
 
 .pagination-link:active {
@@ -1298,11 +1398,22 @@ body {
   left: 25%;
 }
 
+.button-social {
+  display: block;
+  min-width: 47px;
+  min-height: 40px;
+}
+
 .button-social:hover .icon-social,
-.button-social:focus .icon-social {
+..button-social:focus .icon-social {
   fill: #68a2ca;
 }
 
+.button-social:focus {
+  outline: 3px solid #83b3d3;
+  border-radius: 4px;
+}
+
 .button-social:active .icon-social {
   fill: rgba(104, 162, 202, 0.3);
 }
@@ -1324,6 +1435,8 @@ body {
 
 .footer-phone:focus {
   color: #756157;
+  outline: 3px solid #83b3d3;
+  border-radius: 4px;
 }
 
 .footer-phone:active {
@@ -1337,11 +1450,19 @@ body {
   object-fit: contain;
 }
 
-.footer-logo-link:hover .footer-logo-svg,
+.footer-logo-link:hover .footer-logo-svg {
+  fill: #756157;
+}
+
 .footer-logo-link:focus .footer-logo-svg {
   fill: #756157;
 }
 
+.footer-logo-link:focus {
+  outline: 3px solid #83b3d3;
+  border-radius: 4px;
+}
+
 .footer-logo-link:active .footer-logo-svg {
   fill: rgba(117, 97, 87, 0.3);
 }
@@ -1358,7 +1479,7 @@ body {
 }
 
 .modal-container-close {
-  /* display: none; */
+  display: none;
   /* Для того, чтобы высветилось модальное окно, нужно удалить код выше */
 }
 
@@ -1444,6 +1565,15 @@ body {
   line-height: 24px;
 }
 
+.modal-form-input:hover {
+  background-color: #e6e6e6;
+}
+
+.modal-form-input:focus {
+  background-color: #e6e6e6;
+  outline: 3px solid #83b3d3;
+}
+
 .modal-form-label {
   align-self: center;
   font-size: 20px;
@@ -1457,10 +1587,15 @@ body {
   grid-column: 1 / 2;
 }
 
-.check-in-date-input,
-.check-out-date-input {
+.date-input {
+  position: relative;
   grid-column: 2 / 5;
   align-self: center;
+  width: 440px;
+  margin-bottom: 4px;
+  background-image: url("/images/icons/calendar-icon.svg");
+  background-repeat: no-repeat;
+  background-position: right 20px center;
 }
 
 .modal-form-text {
@@ -1477,12 +1612,6 @@ body {
   color: #ff5757;
 }
 
-.check-in-date-input,
-.check-out-date-input {
-  width: 440px;
-  margin-bottom: 4px;
-}
-
 /* Блок: Взрослые и дети */
 .count-input {
   width: 110px;
@@ -1551,6 +1680,11 @@ body {
   margin: 0;
 }
 
+.count-input[type="number"] {
+  appearance: none;
+  -moz-appearance: textfield;
+}
+
 /* Кнопка поиска */
 .modal-form-search-button {
   width: 100%;
@@ -1566,6 +1700,19 @@ body {
   text-transform: uppercase;
 }
 
+.modal-form-search-button:hover {
+  background-color: #68a2ca;
+}
+
+.modal-form-search-button:focus {
+  background-color: #68a2ca;
+  outline: 3px solid #83b3d3;
+}
+
+.modal-form-search-button:active {
+  opacity: 0.3;
+}
+
 /* Тултип */
 .tooltip {
   position: absolute;
@@ -1575,14 +1722,33 @@ body {
 }
 
 .tooltip-button {
+  position: relative;
   display: block;
   width: 26px;
   height: 26px;
   border: none;
   border-radius: 50%;
   background-color: #83b3d3;
-  padding: 7px 12px;
-  margin: 0;
+  padding: 0;
+}
+
+.tooltip-button::after {
+  content: "";
+  position: absolute;
+  width: 2px;
+  height: 12px;
+  top: 25%;
+  transform: translateX(-1px);
+  background-image: url("/images/icons/tooltip-icon.svg");
+  background-repeat: no-repeat;
+}
+
+.tooltip-button:hover {
+  opacity: 0.6;
+}
+
+.tooltip-button:focus {
+  outline: 3px solid #83b3d3;
 }
 
 .tooltip-text {
@@ -1602,11 +1768,16 @@ body {
   display: none;
 }
 
-.tooltip-text-arrow {
+.tooltip-text::before {
+  content: "";
   position: absolute;
+  width: 19px;
+  height: 9px;
   top: -8px;
   right: 50%;
   transform: translateX(8px);
+  background-image: url("/images/icons/triangle.svg");
+  background-repeat: no-repeat;
 }
 
 .modal-form-label-icon {
