/* =========================================================================
   frames.css — опорные стили рамок аватаров и витрины магазина
   =========================================================================
   Сами рамки живут в /api/dynamic_store.css: их CSS генерирует
   store_manager.py и кладёт в store_items.css_code. Здесь только то,
   что общее для всех рамок и не зависит от конкретного товара.

   Подключается в index.html СРАЗУ ПОСЛЕ /api/dynamic_store.css.
   ========================================================================= */

/* Угол поворота кольца премиум-рамок. Каждая рамка объявляет его и сама
   (чтобы работать даже без этого файла), здесь — страховка на случай,
   если динамический CSS пришёл пустым или урезанным. */
@property --xpf-angle {
    syntax: '<angle>';
    inherits: false;
    initial-value: 0deg;
}

/* -------------------------------------------------------------------------
   Виджет «Друзья» в профиле
   ------------------------------------------------------------------------- */
/* Обёртка аватара жёстко 48×48, а у картинки min-width: 48px !important.
   Как только на обёртку вешается рамка с padding, картинка перестаёт
   помещаться и съезжает вправо-вниз. Касалось и старых рамок. Даём
   обёртке с рамкой расти по содержимому. */
.xp-avatar-wrap[class*="store-"] {
    width: auto;
    height: auto;
}

/* Зелёная точка «в сети» — поверх частиц и блика премиум-рамки. */
.xp-avatar-wrap .xp-avatar-online-dot {
    z-index: 6;
}

/* -------------------------------------------------------------------------
   Витрина магазина: карточка премиум-рамки
   ------------------------------------------------------------------------- */
/* Класс is-premium ставит ui_store.js, когда css_class товара начинается
   с «store-premium-». !important нужен, чтобы перебить инлайн-стили
   карточки, которые остались общими для всех товаров. */
.xp-store-card {
    position: relative;
}

.xp-store-card.is-premium {
    background: linear-gradient(to bottom, #fffdf3 0%, #fff4d6 100%) !important;
    border: 2px solid !important;
    border-color: #ffe7a0 #b37400 #b37400 #ffe7a0 !important;
    box-shadow: 0 0 0 1px #7a4b00, 2px 2px 6px rgba(122, 75, 0, 0.35) !important;
}

.xp-store-ribbon {
    position: absolute;
    top: 6px;
    left: -1px;
    z-index: 5;
    padding: 1px 6px 1px 5px;
    font: bold 9px Tahoma, sans-serif;
    letter-spacing: 0.6px;
    color: #4a2e00;
    background: linear-gradient(to bottom, #fff3b0 0%, #ffd54a 45%, #e0a410 55%, #ffcf3a 100%);
    border: 1px solid #7a4b00;
    border-left: none;
    box-shadow: 1px 1px 0 rgba(0, 0, 0, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.7);
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.6);
    pointer-events: none;
    border-radius: 0 !important;
}

/* Тёмная «сцена» Luna: на бежевом фоне свечение и искры почти не видны. */
.xp-store-stage.is-premium {
    background: radial-gradient(ellipse at 50% 40%, #3a6fd8 0%, #0a246a 70%, #06164a 100%) !important;
    border: 1px solid !important;
    border-color: #06164a #7fa7f0 #7fa7f0 #06164a !important;
}

.xp-store-premium-note {
    font-family: Tahoma, sans-serif;
    font-size: 10px;
    font-weight: bold;
    color: #9c6500;
    margin-top: 2px;
}