Update spoller.html

spoller.html

@@ -1,23 +1,33 @@
 
 <style>
-  /* БАЗОВЫЕ СТИЛИ ДЛЯ ВСЕХ УСТРОЙСТВ */
+  /* Общие стили */
+  .spoiler-wrapper {
+    margin: 20px 0;
+    position: relative;
+  }
+  
+  .spoiler-divider {
+    height: 1px;
+    background-color: #ddd;
+    margin: 10px 0;
+  }
+  
   .spoiler-button {
     display: flex;
     align-items: center;
     justify-content: center;
     width: 100%;
-    padding: 18px 24px;
+    padding: 12px 16px;
     background-color: #f5f5f5;
     border: none;
-    border-radius: 8px;
+    border-radius: 4px;
     cursor: pointer;
-    font-size: 20px;
+    font-size: 16px;
     text-transform: uppercase;
-    letter-spacing: 1px;
-    transition: all 0.3s;
-    margin: 15px 0;
-    gap: 12px;
-    min-height: 60px;
+    letter-spacing: 0.5px;
+    transition: background-color 0.3s;
+    margin: 10px 0;
+    gap: 8px;
   }
   
   .spoiler-button:hover {
@@ -25,55 +35,45 @@
   }
   
   .spoiler-content {
-    padding: 20px;
+    padding: 16px;
     border: 1px solid #ddd;
     border-top: none;
-    border-radius: 0 0 8px 8px;
+    border-radius: 0 0 4px 4px;
     display: none;
-    font-size: 18px;
-    line-height: 1.6;
+    margin-top: -4px;
   }
   
-  .spoiler-arrow {
-    width: 24px;
-    height: 24px;
+  .arrow {
+    flex-shrink: 0;
     transition: transform 0.3s;
   }
-
-  /* ПЛАНШЕТЫ (768px-1024px) */
-  @media (min-width: 768px) and (max-width: 1024px) {
-    .spoiler-button {
-      padding: 16px 20px;
-      font-size: 18px;
-      min-height: 54px;
+  
+  /* Версия для телефона */
+  @media (max-width: 767px) {
+    .spoiler-mobile {
+      display: flex;
+      flex-direction: column;
     }
-    .spoiler-content {
-      padding: 18px;
-      font-size: 16px;
+    .spoiler-mobile .spoiler-content {
+      order: 2;
+      border-top: 1px solid #ddd;
+      border-radius: 0 0 4px 4px;
+      margin-top: -4px;
     }
-    .spoiler-arrow {
-      width: 20px;
-      height: 20px;
+    .spoiler-mobile .spoiler-button {
+      order: 1;
+      border-radius: 4px 4px 0 0;
+      margin-bottom: 0;
     }
   }
 
-  /* МОБИЛЬНИКИ (<768px) */
-  @media (max-width: 767px) {
-    .spoiler-button {
-      padding: 22px 16px; /* Больше по вертикали */
-      font-size: 22px; /* Крупнее текст */
-      min-height: 70px; /* Выше кнопка */
-    }
-    .spoiler-content {
-      padding: 16px;
-      font-size: 17px;
-    }
-    .spoiler-arrow {
-      width: 22px;
-      height: 22px;
-    }
+  /* Версия для десктопа */
+  @media (min-width: 768px) {
+    .spoiler-desktop { display: block; }
+    .spoiler-mobile { display: none; }
   }
 </style>
+
 <!--  Первый блок HTML сдесь класс и ИД боков с номером 1 -->
 
 <div class="spoiler-divider"></div>