/* === Общи настройки === */
html, body {
  font-size: 20px; /* уголемен базов размер */
  overflow-x: hidden;
  width: 100%;
  height: auto;
  background-size: cover;
  color: #111;
  margin: 0;
  padding: 0;
  font-family: "Segoe UI", Arial, sans-serif;
}

/* === Основен контейнер === */
#Body {
  display: block;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  min-height: 100vh;
  padding: 15px; /* увеличен padding за по-лесно четене */
  background: transparent;
  position: relative;

  
}
#backgroundDiv1, #backgroundDiv2 {
  position: fixed;        /* стои на едно място при скрол */
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  
  background-size: cover;   /* разтяга картинката пропорционално */
  background-position: center;
  background-repeat: no-repeat;
  z-index: -1;
          /* изпраща фона зад останалите елементи */
 
}

/* === Заглавна част === */
#header {
  background-color: #aaa;
  color: #fff;
  text-align: center;
  font-weight: bold;
  font-family: Calibri;
  padding: 20px; /* увеличен padding */
  height: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
}

#Otecstefan {
  width: 60%; /* малко по-голяма снимка */
  height: auto;
  margin-bottom: 15px;
}

#headerText {
  font-size: 28px; /* уголемен текст */
  text-align: center;
}

/* === Главно меню === */
#mainMenu {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  background-color: #555;
  font-family: Calibri, sans-serif;
}

#mainMenu ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  width: 100%;
}

#mainMenu li {
  margin: 0;
  padding: 0;
}

#mainMenu a {
  display: block;
  padding: 16px 12px; /* увеличен padding за удобство */
  text-align: center;
  color: #fff;
  text-decoration: none;
  font-weight: bold;
  font-size: 50px; /* по-голям шрифт */
  border-bottom: 1px solid #444;
  transition: background 0.3s;
}

#mainMenu a:hover {
  background-color: #333;
}

/* === Основно съдържание === */
#Content {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 15px;
  background-color: rgba(204, 204, 204, 0.8);
  overflow: hidden;
}

/* === Еднакъв стил за Folder и File Content === */
#FolderContent,
#FileContent {
  
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  width: 100%;
  gap: 12px;
  
  background-color: rgba(255, 255, 255, 0.5);
  box-sizing: border-box;
  border-radius: 10px;
  box-shadow: 0 3px 10px rgba(0,0,0,0.15);
  transition: all 0.3s ease;
}

#FolderContent a,
#FileContent a {
 
  text-decoration: none;
  color: #000;
  padding: 12px 15px; /* увеличен padding */
  border-radius: 8px;
  background: #f8f8f8;
  font-size: 50px; /* по-голям текст */
  box-shadow: 0 2px 6px rgba(0,0,0,0.1);
  transition: background 0.3s ease, transform 0.2s ease;
}

#FolderContent a:hover,
#FileContent a:hover {
  background-color: #eee;
  transform: scale(1.02);
}

#FolderContent audio,
#FileContent audio {
  width: 100%;
  margin: 12px 0; /* малко повече разстояние */
  
}

/* === Увеличаване на бутони и панели на аудио плеъра в FolderContent и FileContent === */

/* === Оптимизация на аудио плеъра за FolderContent и FileContent === */
#FolderContent audio,
#FileContent audio {
    width: 100%;       /* плеърът да запълва контейнера */
    margin: 12px 0;
}

/* === Панелът на плеъра === */
#FolderContent audio::-webkit-media-controls-panel,
#FileContent audio::-webkit-media-controls-panel {
    transform: scale(0.95);  /* леко намаляване за по-компактен ред */
    transform-origin: center;
}

/* === Основни бутони === */
#FolderContent audio::-webkit-media-controls-play-button,
#FolderContent audio::-webkit-media-controls-mute-button,
#FolderContent audio::-webkit-media-controls-seek-back-button,
#FolderContent audio::-webkit-media-controls-seek-forward-button,
#FileContent audio::-webkit-media-controls-play-button,
#FileContent audio::-webkit-media-controls-mute-button,
#FileContent audio::-webkit-media-controls-seek-back-button,
#FileContent audio::-webkit-media-controls-seek-forward-button {
    transform: scale(2, 2); /* леко уголемяване за удобство */
}

/* === Timeline === */
#FolderContent audio::-webkit-media-controls-timeline,
#FileContent audio::-webkit-media-controls-timeline {
    height: 12px;                  /* малко по-дебела за видимост */
    width: 100%;
    transform: scale(1, 2);      /* разтяга се вертикално, за да се чете */
}

/* === Текст на времето с корекция на застъпването === */
#FolderContent audio::-webkit-media-controls-current-time-display,
#FileContent audio::-webkit-media-controls-current-time-display {
    transform:  scale(2, 2);     /* леко намалено от предишното 1.4 */
    margin-right: 10px; 
    margin-left: 20px;             /* добавя пространство между текущото и timeline */
}

#FolderContent audio::-webkit-media-controls-time-remaining-display,
#FileContent audio::-webkit-media-controls-time-remaining-display {
    transform: scale(2, 2);   /* същото за оставащото време */
   margin-right: 20px;               /* разстояние от timeline */
   margin-left: 40px; 
}

/* === Slider за звук === */
#FolderContent audio::-webkit-media-controls-volume-slider-container,
#FolderContent audio::-webkit-media-controls-volume-slider,
#FileContent audio::-webkit-media-controls-volume-slider-container,
#FileContent audio::-webkit-media-controls-volume-slider {
    transform: scale(1, 1.2);  /* леко вертикално увеличение */
}

/* === Други бутони (fullscreen, rewind, captions, realtime) === */
#FolderContent audio::-webkit-media-controls-fullscreen-button,
#FolderContent audio::-webkit-media-controls-rewind-button,
#FolderContent audio::-webkit-media-controls-return-to-realtime-button,
#FolderContent audio::-webkit-media-controls-toggle-closed-captions-button,
#FileContent audio::-webkit-media-controls-fullscreen-button,
#FileContent audio::-webkit-media-controls-rewind-button,
#FileContent audio::-webkit-media-controls-return-to-realtime-button,
#FileContent audio::-webkit-media-controls-toggle-closed-captions-button {
    transform: scale(1);  /* остават компактни, за да се поберат на реда */
}

/* === Допълнителни настройки за подравняване === */
#FolderContent audio::-webkit-media-controls-timeline-container,
#FileContent audio::-webkit-media-controls-timeline-container {
    margin: 20;
    padding: 20;
}


#FileMenu {
  width: 100%;
  padding: 12px;
}

/* === Главни менюта === */
#MainFolderMenu,
#MainFileMenu {
  width: 100%;
  padding: 12px;
  
}

#MainFolderMenu ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}

/* === Новини и галерия === */
#newsIframe,
#mainnewsIframe {
  width: 100%;
  min-height: 100vh;
  border: none;
  background-color: transparent;
  display: block;
  overflow: hidden;
}

#galleryContainer {
  position: relative;
  width: 100%;
  max-width: 100%;
  margin: 0 auto;
}

#galleryImage {
  display: block;
  width: 100%;
  max-height: 75vh;
  border-radius: 10px;
  box-shadow: 0 3px 10px rgba(0,0,0,0.3);
}

#galleryPrev,
#galleryNext {
  display: none;
}

/* === Съобщения и таблици === */
#message{
  font-size: 50px;
  text-align: center;
  padding: 12px;
  background-color: rgba(204, 204, 204, 0.4);
  font-weight: bold;
}
#searchArea {
  font-size: 50px;
  text-align: center;
  padding: 12px;
  background-color: rgba(204, 204, 204, 0.4);
  font-weight: bold;
}
#searchArea input[type="text"] {
  font-size: 50px;
  text-align: center;
  padding: 12px;
  background-color: rgba(204, 204, 204, 0.4);
  font-weight: bold;
}
#searchArea button {
  font-size: 50px;
  text-align: center;
  padding: 12px;
  background-color: rgba(204, 204, 204, 0.4);
  font-weight: bold;
}
th, td {
  padding: 6px 8px;
  font-size: 16px;
}

#LastModified {
  text-align: center;
  font-size: 14px;
  color: #0a0a0a;
}

/* === Унифициран стил за MainFolderMenu и FolderMenu === */
#MainFolderMenu,
#FolderMenu {
  background-color: #f2f2f2;
  border-radius: 12px;
  padding: 18px;
  margin: 12px 0;
  box-shadow: 0 0 12px rgba(0,0,0,0.15);
}

#MainFolderMenu ul,
#FolderMenu ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

#MainFolderMenu li,
#FolderMenu li {
  background-color: #fafafa;
  border: 1px solid #ddd;
  border-radius: 10px;
  margin: 6px 0;
  padding: 12px 18px;
  color: #000;
  font-size: 50px; /* увеличен шрифт */
  cursor: pointer;
  transition: background-color 0.3s, transform 0.1s;
}

#MainFolderMenu li:hover,
#FolderMenu li:hover {
  background-color: #e9e9e9;
  transform: scale(1.02);
}

#MainFolderMenu li.active,
#FolderMenu li.active {
  background-color: #cfd8dc;
  font-weight: bold;
}
#MainFileMenu h2,
#MainFileMenu h3 {
 font-size: 50px;
}
#FileMenu h2,
#FileMenu h3 {
 font-size: 50px;
}
/* FileMenu — същата логика */
#FileMenu p, #MainFileMenu p {
 font-size: 25px;
}