/* ── Базовые переменные (перезаписываются из PHP через CSS-vars) ── */
:root {
    --mg-strip-bg:           #ffffff;
    --mg-strip-radius:       8px;
    --mg-strip-border-w:     2px;
    --mg-strip-border-color: #cccccc;
    --mg-strip-active-color: #222222;
    --mg-strip-active-bg:    #f0f0f0;
    --mg-strip-gap:          8px;
    --mg-strip-font-size:    16px;
    --mg-strip-font-family:  inherit;
    --mg-strip-font-color:   #333333;
    --mg-player-bg:          #f9f9f9;
    --mg-player-btn-color:   #222222;
    --mg-player-bar-color:   #222222;
    --mg-player-bar-bg:      #dddddd;
    --mg-num-radius:         8px;
    --mg-num-border-w:       2px;
    --mg-num-border-color:   #cccccc;
    --mg-num-font-size:      28px;
    --mg-num-font-family:    inherit;
    --mg-num-font-color:     #222222;
    --mg-num-bg:             #ffffff;
    --mg-num-align:          center;
    --mg-text-color:         #000000;
    --mg-text-bg:            transparent;
    --mg-text-font-size:     16px;
    --mg-text-font-family:   inherit;
}

/* ── Гид ── */
.mg-guide { display: flex; flex-direction: column; min-height: 100vh; }
.mg-screen { width: 100%; }

/* ── Экран языков ── */
.mg-screen--lang { display: flex; align-items: center; justify-content: center; min-height: 100vh; }
.mg-lang-select { text-align: center; padding: 2rem; }
.mg-lang-select__title { font-size: 1.6rem; margin-bottom: 1.5rem; }
.mg-lang-select__grid { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }
.mg-lang-btn { padding: 14px 28px; font-size: 1.1rem; border: 2px solid #ccc; border-radius: 8px; background: #fff; cursor: pointer; }
.mg-lang-btn:hover { background: #f5f5f5; }

/* ── Экран гида ── */
.mg-screen--guide { display: flex; flex-direction: column; }

/* ── Лента ── */
.mg-strip-wrap { background: var(--mg-strip-bg); overflow: hidden; padding: 10px 0; }
.mg-strip { display: flex; gap: var(--mg-strip-gap); overflow-x: auto; padding: 4px 12px; scrollbar-width: none; }
.mg-strip::-webkit-scrollbar { display: none; }
.mg-strip__btn {
    flex-shrink: 0;
    width: 44px; height: 44px;
    border-radius: var(--mg-strip-radius);
    border: var(--mg-strip-border-w) solid var(--mg-strip-border-color);
    background: transparent;
    font-size: var(--mg-strip-font-size);
    font-family: var(--mg-strip-font-family);
    color: var(--mg-strip-font-color);
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}
.mg-strip__btn--active {
    background: var(--mg-strip-active-bg);
    color: var(--mg-strip-active-color);
    border-color: var(--mg-strip-active-color);
}

/* ── Плеер ── */
.mg-player {
    background: var(--mg-player-bg);
    padding: 12px 16px;
    border-top: 1px solid #eee;
}
.mg-player--fixed {
    position: fixed;
    bottom: 0; left: 0; right: 0;
    z-index: 100;
    border-top: 1px solid #ddd;
    box-shadow: 0 -2px 8px rgba(0,0,0,0.08);
}
.mg-player__controls { display: flex; align-items: center; gap: 12px; }
.mg-player__btn--play {
    width: 44px; height: 44px;
    border-radius: 50%;
    border: none;
    background: var(--mg-player-btn-color);
    color: #fff;
    cursor: pointer;
    flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
}
.mg-player__timeline { display: flex; align-items: center; gap: 8px; flex: 1; }
.mg-player__time { font-size: 13px; color: #666; min-width: 36px; }
.mg-player__bar {
    flex: 1; height: 6px;
    background: var(--mg-player-bar-bg);
    border-radius: 3px;
    cursor: pointer;
    position: relative;
}
.mg-player__progress {
    height: 100%;
    background: var(--mg-player-bar-color);
    border-radius: 3px;
    width: 0%;
    transition: width 0.25s linear;
}
.mg-player__no-audio { font-size: 14px; color: #999; padding: 8px 0; }

/* ── Контент ── */
.mg-content { padding: 16px; flex: 1; }
.mg-exhibit-number {
    display: block;
    font-size: var(--mg-num-font-size);
    font-family: var(--mg-num-font-family);
    color: var(--mg-num-font-color);
    background: var(--mg-num-bg);
    border: var(--mg-num-border-w) solid var(--mg-num-border-color);
    border-radius: var(--mg-num-radius);
    padding: 8px 18px;
    margin-bottom: 16px;
    width: fit-content;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
}
/* Выравнивание по горизонтали через CSS-переменную */
.mg-exhibit-number[data-align="left"]   { margin-left: 0; margin-right: auto; }
.mg-exhibit-number[data-align="right"]  { margin-left: auto; margin-right: 0; }
.mg-exhibit-number[data-align="center"] { margin-left: auto; margin-right: auto; }

.mg-exhibit-text {
    line-height: 1.7;
    font-size: var(--mg-text-font-size);
    font-family: var(--mg-text-font-family);
    color: var(--mg-text-color);
    background: var(--mg-text-bg);
}
.mg-exhibit-text h1, .mg-exhibit-text h2, .mg-exhibit-text h3 { margin: 1em 0 0.5em; }
.mg-exhibit-text p { margin: 0 0 0.75em; }
.mg-exhibit-text ul, .mg-exhibit-text ol { padding-left: 1.5em; margin-bottom: 0.75em; }

/* Отступ снизу, если плеер закреплён */
.mg-player--fixed ~ .mg-content { padding-bottom: 80px; }

/* ── Кнопка смены языка ── */
.mg-strip-wrap { position: relative; }
.mg-btn-change-lang {
    position: absolute;
    right: 8px; top: 50%;
    transform: translateY(-50%);
    background: rgba(0,0,0,0.18);
    border: none;
    border-radius: 50%;
    width: 32px; height: 32px;
    font-size: 18px;
    cursor: pointer;
    color: var(--mg-strip-font-color);
    line-height: 1;
    z-index: 2;
}
.mg-btn-change-lang:hover { background: rgba(0,0,0,0.32); }

/* ── Нет языка ── */
.mg-no-lang {
    display: flex; align-items: center; justify-content: center;
    min-height: 100vh;
}
.mg-error { display: flex; align-items: center; justify-content: center; min-height: 100vh; text-align: center; color: #666; padding: 2rem; }