/* =============================================================================
   ВЫБОР ТЕМЫ КЛИЕНТОМ — 5 вариантов (2026-09-09).
   Раньше в шапке была одна кнопка «переключить светлую/тёмную». Теперь кнопка
   открывает список из пяти тем; на телефоне список выводится в меню-оверлее.
   Файл только оформляет новую разметку picker'а. Существующие элементы шапки,
   меню и кнопки НЕ затрагиваются.
   Селекторы намеренно повторяют форму «.green_header ul li a», иначе цвет
   пунктов меню (задан с !important в main.css) перекрасил бы текст списка.
   Откат: убрать подключение файла в views/template/layouts/header.php.
   ============================================================================= */

.gf-theme-picker { position: relative; }

.gf-tp-menu {
    display: none;
    position: absolute;
    top: calc(100% + 12px);
    right: 0;
    min-width: 262px;
    padding: 8px;
    background: #ffffff;
    border: 1px solid rgba(15, 20, 30, .10);
    border-radius: 16px;
    box-shadow: 0 20px 50px rgba(15, 20, 30, .18);
    z-index: 1200;
}
.gf-theme-picker.is-open .gf-tp-menu { display: block; }

.gf-tp-head {
    font-size: 11px;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: #8b8f98;
    padding: 8px 12px 10px;
}

.green_header ul li .gf-tp-menu a.gf-tp-item,
.gf-tp-item {
    display: flex !important;
    align-items: center;
    gap: 11px;
    padding: 10px 12px !important;
    margin: 0 !important;
    border-radius: 11px;
    text-decoration: none !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    font-size: 13.5px !important;
    color: #1d1d1f !important;
    transition: background .16s ease;
}
.green_header ul li .gf-tp-menu a.gf-tp-item:hover,
.gf-tp-item:hover { background: rgba(15, 20, 30, .06); color: #1d1d1f !important; }
.gf-tp-item.is-current { cursor: default; background: rgba(15, 20, 30, .05); }
.gf-tp-name { flex: 1 1 auto; }
.gf-tp-check { color: #16a34a; font-weight: 700; }

/* цветные образцы тем */
.gf-tp-swatch {
    width: 24px; height: 24px;
    flex: 0 0 auto;
    border-radius: 7px;
    border: 1px solid rgba(0, 0, 0, .14);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35);
}
.gf-tp-modern          .gf-tp-swatch { background: linear-gradient(135deg, #0b0c10 0%, #1b2230 60%, #c9a227 100%); }
.gf-tp-light_platinum  .gf-tp-swatch { background: linear-gradient(135deg, #ffffff 0%, #f0f1f4 55%, #0071e3 100%); }
.gf-tp-light_gold      .gf-tp-swatch { background: linear-gradient(135deg, #fdfbf7 0%, #f0e5cf 50%, #b8892b 100%); }
.gf-tp-light_aurora    .gf-tp-swatch { background: linear-gradient(135deg, #ffffff 0%, #e8e7ff 45%, #4f46e5 100%); }
.gf-tp-light_editorial .gf-tp-swatch { background: linear-gradient(135deg, #ffffff 0%, #ededef 45%, #ff5a3c 100%); }

/* тёмная тема — меню тоже тёмное */
html[data-theme="modern"] .gf-tp-menu {
    background: #12151c;
    border-color: rgba(255, 255, 255, .10);
    box-shadow: 0 24px 60px rgba(0, 0, 0, .55);
}
html[data-theme="modern"] .gf-tp-head { color: #8a93a6; }
html[data-theme="modern"] .green_header ul li .gf-tp-menu a.gf-tp-item,
html[data-theme="modern"] .gf-tp-item { color: #e9edf6 !important; }
html[data-theme="modern"] .green_header ul li .gf-tp-menu a.gf-tp-item:hover,
html[data-theme="modern"] .gf-tp-item:hover { background: rgba(255, 255, 255, .08); color: #ffffff !important; }
html[data-theme="modern"] .gf-tp-item.is-current { background: rgba(255, 255, 255, .06); }

/* --- список тем в мобильном меню-оверлее --- */
.gf-tp-mobile { margin: 18px auto 8px; max-width: 320px; }
.gf-tp-mobile-head {
    font-size: 11px;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .55);
    text-align: center;
    margin-bottom: 10px;
}
.overlay .gf-tp-mobile a.gf-tp-m-item,
.gf-tp-m-item {
    display: flex !important;
    align-items: center;
    gap: 12px;
    width: 100%;
    margin: 0 0 8px !important;
    padding: 12px 16px !important;
    border-radius: 12px;
    background: rgba(255, 255, 255, .08);
    border: 1px solid rgba(255, 255, 255, .14);
    color: #ffffff !important;
    font-size: 15px !important;
    text-align: left;
    text-shadow: none !important;
}
.overlay .gf-tp-mobile a.gf-tp-m-item .ts-row { display: flex; align-items: center; gap: 12px; width: 100%; }
.overlay .gf-tp-mobile a.gf-tp-m-item.is-current { background: rgba(255, 255, 255, .18); }
.overlay .gf-tp-mobile a.gf-tp-m-item:hover { background: rgba(255, 255, 255, .16); color: #ffffff !important; }

@media (max-width: 1199px) {
    .gf-theme-picker { display: none !important; } /* на телефоне работает список в оверлее */
}

/* --- список тем в личном кабинете (навбар кабинета — другая разметка) --- */
.gf-theme-picker-dash { position: relative; }
.gf-theme-picker-dash > a { cursor: pointer; display: inline-flex; align-items: center; gap: 8px; }
.gf-theme-picker-dash .gf-tp-menu { top: calc(100% + 6px); right: auto; left: 0; }
.gf-theme-picker-dash.is-open .gf-tp-menu { display: block; }
@media (max-width: 991px) {
    /* навбар кабинета всегда тёмный (navbar-dark), поэтому в раскрытом меню
       список тем оставляем тёмным со светлым текстом — иначе тёмное по тёмному */
    .gf-theme-picker-dash .gf-tp-menu {
        position: static; min-width: 0; margin: 4px 0 8px;
        background: rgba(255, 255, 255, .06);
        border: 1px solid rgba(255, 255, 255, .14);
        box-shadow: none;
    }
    .gf-theme-picker-dash .gf-tp-head { padding-left: 12px; color: rgba(255, 255, 255, .55); }
    .gf-theme-picker-dash .gf-tp-item { color: #ffffff !important; }
    .gf-theme-picker-dash .gf-tp-item:hover { background: rgba(255, 255, 255, .12); color: #ffffff !important; }
    .gf-theme-picker-dash .gf-tp-item.is-current { background: rgba(255, 255, 255, .16); }
}

/* --- страховка по слоям (2026-09-09) ---
   Кнопка со списком тем должна перекрывать содержимое страницы, а не наоборот.
   Сам список уже имеет z-index 1200; поднимаем и обёртку, иначе в некоторых
   раскладках список оказывался под соседними блоками. */
.gf-theme-picker,
.gf-theme-picker-dash { position: relative; z-index: 1200; }

/* =============================================================================
   ТУМБЛЕР ТЕМЫ В ЛИЧНОМ КАБИНЕТЕ (2026-09-09, по замечанию владельца).
   В кабинете нужны только ДВА режима — светлый и тёмный, как было раньше.
   Пять тем остаются на публичной части. Подписи «Light» / «Dark» по бокам,
   чтобы человек читал, а не только видел иконку.
   Разметку кабинета не трогаем: тумблер — это обычный <a data-theme-switch>,
   его обрабатывает прежний theme_switch.js.
   ============================================================================= */
.gf-tt {
    display: inline-flex !important;
    align-items: center;
    gap: 10px;
    padding: 6px 12px !important;
    border-radius: 999px;
    text-decoration: none !important;
    white-space: nowrap;
    line-height: 1;
}
.gf-tt-label {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .45);
    transition: color .2s ease;
}
.gf-tt.is-light .gf-tt-label.for-light,
.gf-tt.is-dark  .gf-tt-label.for-dark { color: #ffffff; }

/* сам переключатель */
.gf-tt-switch {
    position: relative;
    width: 54px;
    height: 28px;
    flex: 0 0 auto;
    border-radius: 999px;
    background: linear-gradient(145deg, #dfe6f1, #c7d2e3);
    box-shadow: inset 0 2px 5px rgba(15, 20, 30, .28), 0 1px 0 rgba(255, 255, 255, .25);
    transition: background .3s ease, box-shadow .3s ease;
}
.gf-tt.is-dark .gf-tt-switch {
    background: linear-gradient(145deg, #1b2333, #0d1220);
    box-shadow: inset 0 2px 6px rgba(0, 0, 0, .65), 0 0 0 1px rgba(255, 255, 255, .06);
}
.gf-tt-knob {
    position: absolute;
    top: 3px; left: 3px;
    width: 22px; height: 22px;
    border-radius: 50%;
    background: radial-gradient(circle at 32% 30%, #fffbe8, #ffd76a 60%, #f0a500);
    box-shadow: 0 2px 6px rgba(0, 0, 0, .3), 0 0 12px rgba(255, 200, 80, .55);
    transition: transform .32s cubic-bezier(.4, .2, .2, 1), background .32s ease, box-shadow .32s ease;
}
.gf-tt.is-dark .gf-tt-knob {
    transform: translateX(26px);
    background: radial-gradient(circle at 62% 32%, #f2f5ff, #c3ccdf 62%, #8e99b0);
    box-shadow: 0 2px 6px rgba(0, 0, 0, .5), inset -5px -2px 0 0 rgba(20, 26, 40, .55);
}
.gf-tt:hover .gf-tt-knob { filter: brightness(1.06); }

/* в свёрнутом меню кабинета (планшет/телефон) — своей строкой, по центру */
@media (max-width: 991px) {
    .gf-theme-toggle-item { display: block; text-align: center; }
    .gf-tt { justify-content: center; width: 100%; padding: 12px 0 !important; }
    .gf-tt-label { font-size: 13px; }
}

/* =============================================================================
   ТЁМНАЯ ТЕМА (modern): выбор темы — такой же ряд из пяти кружков с подписью, как в светлых
   темах (просьба владельца 10.09 ночью: «сделай в чёрной теме такое же отображение»),
   и заметное выделение выбранной темы: кольцо + свечение + галочка-бейдж + подпись акцентом.
   Скоуп — html[data-theme="modern"], светлые темы несут свои правила в своих файлах.
   Откат: удалить этот блок. Бэкап: /root/perm_backup/deploy_2026-09-09_light_redesign/light_themes.before/theme_picker.css
   ============================================================================= */
/* --- выпадающий список в шапке (десктоп) --- */
html[data-theme="modern"] .gf-theme-picker.is-open .gf-tp-menu{
    display:flex;flex-wrap:wrap;align-items:flex-start;width:352px;min-width:0;padding:10px 8px 8px;right:0;left:auto;
    background:#12151c;border:1px solid rgba(255,255,255,.10);border-radius:16px;box-shadow:0 24px 60px rgba(0,0,0,.55);
}
html[data-theme="modern"] .gf-tp-head{width:100%;padding:2px 8px 10px;font-size:11px;letter-spacing:.12em;color:#8a93a6;}
html[data-theme="modern"] .green_header ul li .gf-tp-menu a.gf-tp-item,
html[data-theme="modern"] .gf-tp-item{
    flex:0 0 66px;display:flex !important;flex-direction:column;align-items:center;gap:7px;
    padding:6px 2px !important;margin:0 !important;border-radius:12px;
    font-size:10px !important;font-weight:600 !important;letter-spacing:.04em !important;text-transform:uppercase !important;
    color:#9aa3b8 !important;text-align:center;line-height:1.2;transition:background .16s ease,color .16s ease;
}
html[data-theme="modern"] .green_header ul li .gf-tp-menu a.gf-tp-item:hover,
html[data-theme="modern"] .gf-tp-item:hover{background:rgba(255,255,255,.07);color:#ffffff !important;}
html[data-theme="modern"] .gf-tp-item .gf-tp-name{flex:none;white-space:normal;}
html[data-theme="modern"] .gf-tp-item .gf-tp-check{display:none;}
html[data-theme="modern"] .gf-tp-item .gf-tp-swatch{
    position:relative;width:36px;height:36px;border-radius:50%;border:1px solid rgba(255,255,255,.18);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.25);transition:transform .16s ease,box-shadow .16s ease;
}
html[data-theme="modern"] .gf-tp-item:hover .gf-tp-swatch{transform:scale(1.06);}
html[data-theme="modern"] .gf-tp-item.is-current{background:transparent;cursor:default;}
html[data-theme="modern"] .green_header ul li .gf-tp-menu a.gf-tp-item.is-current,
html[data-theme="modern"] .gf-tp-item.is-current,html[data-theme="modern"] .gf-tp-item.is-current .gf-tp-name{color:#7db2ff !important;font-weight:700 !important;}
html[data-theme="modern"] .gf-tp-item.is-current .gf-tp-swatch,
html[data-theme="modern"] .gf-tp-item.is-current:hover .gf-tp-swatch{
    transform:scale(1.08);box-shadow:0 0 0 3px #12151c,0 0 0 5px #3b82f6,0 0 22px rgba(59,130,246,.6);
}
html[data-theme="modern"] .gf-tp-item.is-current .gf-tp-swatch::after{
    content:'';position:absolute;right:-6px;bottom:-6px;width:17px;height:17px;border-radius:50%;
    background:#3b82f6 url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'><path d='M2.5 6.3l2.4 2.4 4.6-5' fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/></svg>") center/10px 10px no-repeat;box-shadow:0 0 0 2px #12151c;
}
/* --- мобильное меню-оверлей --- */
@media (max-width:1199px){
    html[data-theme="modern"] #header #green_mobile_nav .gf-tp-mobile{
        position:relative;display:flex;flex-wrap:nowrap;justify-content:center;gap:0 2px;
        width:100%;max-width:360px;margin:22px auto 0 !important;padding:38px 4px 10px !important;border:0 !important;border-top:1px solid rgba(255,255,255,.12) !important;background:transparent !important;
    }
    html[data-theme="modern"] #header #green_mobile_nav .gf-tp-mobile-head{position:absolute;left:0;right:0;top:12px;width:100%;font-size:10.5px;letter-spacing:.16em;color:rgba(255,255,255,.5);margin:0;}
    html[data-theme="modern"] #header #green_mobile_nav .gf-tp-mobile a.gf-tp-m-item{
        flex:1 1 0;display:flex !important;flex-direction:column;align-items:center;min-width:0;max-width:72px !important;
        margin:0 !important;padding:6px 0 !important;background:transparent !important;border:0 !important;border-radius:12px !important;
        min-height:0 !important;height:auto !important;box-shadow:none !important;width:auto !important;
        -webkit-backdrop-filter:none !important;backdrop-filter:none !important;
        font-size:10px !important;line-height:1.2 !important;text-transform:uppercase;letter-spacing:.05em;font-weight:600;
        color:rgba(255,255,255,.62) !important;text-shadow:none !important;transform:none !important;position:static !important;left:0 !important;
    }
    html[data-theme="modern"] #header #green_mobile_nav .gf-tp-mobile a.gf-tp-m-item .ts-row{display:flex;flex-direction:column;align-items:center;gap:0;width:auto;}
    html[data-theme="modern"] #header #green_mobile_nav .gf-tp-mobile a.gf-tp-m-item .ts-title{display:none;}
    html[data-theme="modern"] #header #green_mobile_nav .gf-tp-mobile a.gf-tp-m-item::after{content:attr(aria-label);display:block;margin-top:7px;text-align:center;}
    html[data-theme="modern"] #header #green_mobile_nav .gf-tp-mobile a.gf-tp-m-item .gf-tp-swatch{
        position:relative;width:40px;height:40px;border-radius:50%;border:1px solid rgba(255,255,255,.22);
        box-shadow:inset 0 1px 0 rgba(255,255,255,.35);transition:transform .16s ease,box-shadow .16s ease;
    }
    html[data-theme="modern"] #header #green_mobile_nav .gf-tp-mobile a.gf-tp-m-item:hover,
    html[data-theme="modern"] #header #green_mobile_nav .gf-tp-mobile a.gf-tp-m-item:focus{background:transparent !important;color:#fff !important;text-shadow:none !important;}
    html[data-theme="modern"] #header #green_mobile_nav .gf-tp-mobile a.gf-tp-m-item:hover .gf-tp-swatch{transform:scale(1.08);}
    html[data-theme="modern"] #header #green_mobile_nav .gf-tp-mobile a.gf-tp-m-item.is-current{color:#9cc4ff !important;font-weight:700;background:transparent !important;}
    html[data-theme="modern"] #header #green_mobile_nav .gf-tp-mobile a.gf-tp-m-item.is-current .gf-tp-swatch,
    html[data-theme="modern"] #header #green_mobile_nav .gf-tp-mobile a.gf-tp-m-item.is-current:hover .gf-tp-swatch{
        transform:scale(1.1);box-shadow:0 0 0 3px #0b0c10,0 0 0 5px #3b82f6,0 0 26px rgba(59,130,246,.65);
    }
    html[data-theme="modern"] #header #green_mobile_nav .gf-tp-mobile a.gf-tp-m-item.is-current .gf-tp-swatch::after{
        content:'';position:absolute;right:-6px;bottom:-6px;width:18px;height:18px;border-radius:50%;
        background:#3b82f6 url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'><path d='M2.5 6.3l2.4 2.4 4.6-5' fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/></svg>") center/10px 10px no-repeat;box-shadow:0 0 0 2px #0b0c10;
    }
}