Update spoller.html

spoller.html

@@ -1,59 +1,77 @@
 
 <style>
-  /* УНИВЕРСАЛЬНЫЕ СТИЛИ */
-  .spoiler1-button, 
+
+/* УНИВЕРСАЛЬНЫЕ СТИЛИ */
+.spoiler1-button, 
+.spoiler2-button {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  padding: 12px 16px;
+  background-color: #f5f5f5;
+  border: none;
+  border-radius: 4px;
+  cursor: pointer;
+  font-size: 16px;
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+  transition: background-color 0.3s;
+  margin: 10px 0;
+  gap: 8px;
+}
+
+.spoiler1-button:hover,
+.spoiler2-button:hover {
+  background-color: #e0e0e0;
+}
+
+.spoiler1-content,
+.spoiler2-content {
+  padding: 16px;
+  border: 1px solid #ddd;
+  border-top: none;
+  border-radius: 0 0 4px 4px;
+  display: none;
+  margin-top: -4px;
+}
+
+.arrow {
+  flex-shrink: 0;
+  transition: transform 0.3s;
+}
+
+/* 📱 Телефон (до 767px) */
+@media (max-width: 767px) {
+  .spoiler1-button,
   .spoiler2-button {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    width: 100%;
-    padding: 12px 16px;
-    background-color: #f5f5f5;
-    border: none;
-    border-radius: 4px;
-    cursor: pointer;
+    font-size: 18px;     /* крупнее текст */
+    padding: 16px 20px;  /* больше зона клика */
+    gap: 10px;
+  }
+  .spoiler1-content,
+  .spoiler2-content {
     font-size: 16px;
-    text-transform: uppercase;
-    letter-spacing: 0.5px;
-    transition: background-color 0.3s;
-    margin: 10px 0;
-    gap: 8px;
+    padding: 14px;
   }
-  
-  .spoiler1-button:hover,
-  .spoiler2-button:hover {
-    background-color: #e0e0e0;
+}
+
+/* 📱📲 Планшет (768px – 1024px) */
+@media (min-width: 768px) and (max-width: 1024px) {
+  .spoiler1-button,
+  .spoiler2-button {
+    font-size: 17px;
+    padding: 14px 18px;
+    gap: 9px;
   }
-  
   .spoiler1-content,
   .spoiler2-content {
-    padding: 16px;
-    border: 1px solid #ddd;
-    border-top: none;
-    border-radius: 0 0 4px 4px;
-    display: none;
-    margin-top: -4px;
-  }
-  
-  .arrow {
-    flex-shrink: 0;
-    transition: transform 0.3s;
+    font-size: 15px;
+    padding: 14px;
   }
+}
+
 
-  /* 📱 Адаптив для телефона */
-  @media (max-width: 767px) {
-    .spoiler1-button,
-    .spoiler2-button {
-      font-size: 14px;
-      padding: 10px 12px;
-      gap: 6px;
-    }
-    .spoiler1-content,
-    .spoiler2-content {
-      font-size: 14px;
-      padding: 12px;
-    }
-  }
 </style>