/* ================================================================
   Bag-Fit Widget — интерактивная примерка пакета
   v1.0 / 2026
   ================================================================ */

.bag-fit {
    --bf-bg: #fafafa;
    --bf-border: #e2e2e2;
    --bf-accent: #e84d07;
    --bf-text: #2b2b2b;
    --bf-muted: #888;
    --bf-radius: 12px;

    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
    color: var(--bf-text);
    max-width: 1100px;
    margin: 24px auto;
    padding: 16px;
    box-sizing: border-box;
}

.bag-fit__title {
    text-align: center;
    font-size: 22px;
    font-weight: 700;
    margin: 0 0 8px;
    letter-spacing: 0.3px;
}
.bag-fit__title b { color: var(--bf-accent); }
.bag-fit__subtitle {
    text-align: center;
    font-size: 13px;
    color: var(--bf-muted);
    margin: 0 0 18px;
}

.bag-fit__layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 320px;
    gap: 20px;
}
@media (max-width: 850px) {
    /* minmax(0,1fr), а не голый 1fr: иначе колонка распирается под min-content
       содержимого (канвас/сайдбар) и вылезает за вьюпорт на мобильном. */
    .bag-fit__layout { grid-template-columns: minmax(0, 1fr); }
}

/* --- Сцена с пакетом --- */
.bag-fit__stage {
    position: relative;
    background: var(--bf-bg);
    border: 1px solid var(--bf-border);
    border-radius: var(--bf-radius);
    padding: 16px;
    min-height: 380px;
    display: flex;
    flex-direction: column;
}

.bag-fit__sizebar {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
    margin-bottom: 12px;
    font-size: 14px;
}
.bag-fit__sizebar label { color: var(--bf-muted); }
.bag-fit__sizebar input[type="number"] {
    width: 56px;
    height: 32px;
    padding: 4px 6px;
    border: 1px solid var(--bf-border);
    border-radius: 6px;
    font-size: 14px;
    text-align: center;
    -moz-appearance: textfield;
}
.bag-fit__sizebar input::-webkit-outer-spin-button,
.bag-fit__sizebar input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

.bag-fit__sizebar .bag-fit__btn {
    margin-left: auto;
}

.bag-fit__btn {
    appearance: none;
    border: 1px solid var(--bf-border);
    background: #fff;
    color: var(--bf-text);
    padding: 6px 12px;
    border-radius: 6px;
    font-size: 13px;
    cursor: pointer;
    transition: background .15s, border-color .15s;
}
.bag-fit__btn:hover { background: #f0f0f0; border-color: #c8c8c8; }
.bag-fit__btn--primary { background: var(--bf-accent); color: #fff; border-color: var(--bf-accent); }
.bag-fit__btn--primary:hover { background: #c43c00; }
.bag-fit__btn--accent {
    background: #fff7f1;
    border-color: var(--bf-accent);
    color: var(--bf-accent);
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.bag-fit__btn--accent:hover { background: var(--bf-accent); color: #fff; }

.bag-fit__canvas-wrap {
    flex: 1;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 320px;
    background:
        radial-gradient(ellipse 50% 14px at 50% 96%, rgba(0,0,0,0.18), transparent 70%),
        linear-gradient(180deg, #fff 0%, #f0f0f0 100%);
    border-radius: 8px;
    overflow: hidden;
    touch-action: none; /* позволяем нашим Pointer Events работать */
}
.bag-fit__canvas {
    display: block;
    user-select: none;
}

.bag-fit__hint {
    position: absolute;
    top: 12px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(0,0,0,0.65);
    color: #fff;
    padding: 6px 12px;
    border-radius: 16px;
    font-size: 12px;
    pointer-events: none;
    opacity: 0;
    transition: opacity .3s;
}
.bag-fit__hint.is-visible { opacity: 1; }

.bag-fit__legend {
    display: flex;
    justify-content: space-between;
    margin-top: 8px;
    font-size: 11px;
    color: var(--bf-muted);
}

/* --- Сайдбар с предметами --- */
.bag-fit__sidebar {
    background: var(--bf-bg);
    border: 1px solid var(--bf-border);
    border-radius: var(--bf-radius);
    padding: 16px;
    display: flex;
    flex-direction: column;
}

.bag-fit__sidebar-title {
    font-size: 14px;
    font-weight: 600;
    margin: 0 0 8px;
}
.bag-fit__sidebar-sub {
    font-size: 12px;
    color: var(--bf-muted);
    margin: 0 0 12px;
}

.bag-fit__cats {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 12px;
}
.bag-fit__cat {
    appearance: none;
    border: 1px solid var(--bf-border);
    background: #fff;
    color: var(--bf-text);
    padding: 4px 10px;
    border-radius: 14px;
    font-size: 12px;
    cursor: pointer;
}
.bag-fit__cat.is-active {
    background: var(--bf-accent);
    color: #fff;
    border-color: var(--bf-accent);
}

.bag-fit__items {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
    gap: 8px;
    overflow-y: auto;
    max-height: 360px;
    padding-right: 4px;
}

.bag-fit__item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 8px 4px;
    background: #fff;
    border: 1px solid var(--bf-border);
    border-radius: 8px;
    cursor: grab;
    transition: transform .12s, border-color .12s, box-shadow .12s;
    user-select: none;
    text-align: center;
}
.bag-fit__item:hover {
    border-color: var(--bf-accent);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(232,77,7,0.15);
}
.bag-fit__item:active { cursor: grabbing; }
.bag-fit__item-icon {
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 4px;
    pointer-events: none;
}
.bag-fit__item-icon svg { max-width: 100%; max-height: 100%; }
.bag-fit__item-label {
    font-size: 11px;
    line-height: 1.15;
    color: var(--bf-text);
    pointer-events: none;
}
.bag-fit__item-size {
    font-size: 10px;
    color: var(--bf-muted);
    pointer-events: none;
}

.bag-fit__actions {
    display: flex;
    gap: 6px;
    margin-top: 12px;
    flex-wrap: wrap;
}
.bag-fit__actions .bag-fit__btn { flex: 1; min-width: 96px; }

.bag-fit__overflow {
    color: #c43c00;
    font-size: 12px;
    margin-top: 6px;
    min-height: 14px;
}

/* блок «Подобрать размер» — мини-карусель реальных товаров */
.bag-fit__suggest {
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px dashed var(--bf-border);
}
.bag-fit__suggest-state {
    font-size: 13px;
    color: var(--bf-muted);
    padding: 6px 0;
}
.bag-fit__suggest-head {
    font-size: 13px;
    color: var(--bf-text);
    margin-bottom: 8px;
}
.bag-fit__suggest-head strong { color: var(--bf-accent); }
.bag-fit__suggest-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: 10px;
}
.bag-fit__suggest-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    text-decoration: none;
    color: var(--bf-text);
    background: #fff;
    border: 1px solid var(--bf-border);
    border-radius: 8px;
    padding: 8px;
    transition: border-color .15s, box-shadow .15s, transform .12s;
}
.bag-fit__suggest-card:hover {
    border-color: var(--bf-accent);
    box-shadow: 0 4px 14px rgba(232,77,7,0.14);
    transform: translateY(-1px);
    color: var(--bf-text);
}
.bag-fit__suggest-img {
    width: 100%;
    aspect-ratio: 1 / 1;
    background-color: #fafafa;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    border-radius: 6px;
    margin-bottom: 6px;
}
.bag-fit__suggest-size {
    font-size: 12px;
    font-weight: 600;
    color: var(--bf-accent);
}
.bag-fit__suggest-title {
    font-size: 11px;
    color: var(--bf-muted);
    margin-top: 2px;
    line-height: 1.25;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* предмет внутри сцены, поверх canvas */
.bag-fit__placed {
    position: absolute;
    cursor: grab;
    user-select: none;
    transition: filter .15s;
    z-index: 5;
    /* затемнение, как будто внутри пакета — небольшая тень падает */
    filter: brightness(0.78) saturate(0.92) contrast(0.95);
}
.bag-fit__placed:active { cursor: grabbing; }
.bag-fit__placed.is-outside {
    /* предмет вытащили за пакет — показываем как есть */
    filter: none;
}
.bag-fit__placed.is-overflow svg {
    filter: drop-shadow(0 0 4px #ff3b00);
}

/* ----- логотип на пакете ----- */
.bag-fit__placed--logo {
    /* НИКАКИХ фильтров: лого — это печать, должна выглядеть точно как файл клиента.
       Любая brightness/saturate-коррекция превращает антиалиас белого фона в
       тёмное «гало» на цвете пакета — это и читается как «градиент». */
    filter: none;
    z-index: 7;
}
.bag-fit__placed-logo-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    pointer-events: none;
    user-select: none;
    -webkit-user-drag: none;
    background: rgba(255,255,255,0.0);
}
/* «Убрать фон» — над лого, чтобы не перекрывать подпись и угол ресайза */
.bag-fit__placed-bg {
    position: absolute;
    top: -32px;
    left: 50%;
    transform: translateX(-50%);
    background: #fff;
    border: 1px solid var(--bf-accent);
    color: var(--bf-accent);
    padding: 3px 8px;
    border-radius: 12px;
    font-size: 11px;
    cursor: pointer;
    white-space: nowrap;
    box-shadow: 0 2px 6px rgba(0,0,0,0.10);
    opacity: 0;
    transition: opacity .15s;
}
.bag-fit__placed-bg:hover { background: var(--bf-accent); color: #fff; }
.bag-fit__placed--logo:hover .bag-fit__placed-bg { opacity: 1; }

/* Угол ресайза — нижний правый, слегка снаружи. Z-index выше подписи. */
.bag-fit__placed-resize {
    position: absolute;
    right: -8px; bottom: -8px;
    width: 16px; height: 16px;
    background: #fff;
    border: 1px solid var(--bf-accent);
    border-radius: 3px;
    cursor: nwse-resize;
    box-shadow: 0 1px 3px rgba(0,0,0,0.18);
    opacity: 0;
    transition: opacity .15s;
    z-index: 7;
}
.bag-fit__placed-resize::after {
    content: '';
    position: absolute;
    right: 3px; bottom: 3px;
    width: 8px; height: 8px;
    background:
        linear-gradient(135deg, transparent 50%, var(--bf-accent) 50%);
}
.bag-fit__placed--logo:hover .bag-fit__placed-resize { opacity: 1; }

/* ============================================================
   Оверлей-загрузчик «Песочные часы» при обработке логотипа.
   Появляется поверх сцены пакета во время чтения файла, рендера PDF
   или удаления фона.
   ============================================================ */
.bag-fit__logo-loader {
    position: absolute;
    inset: 0;
    z-index: 200;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255,255,255,0.55);
    backdrop-filter: blur(2px);
    pointer-events: none;
    animation: bf-loader-fade-in .15s ease-out;
}
.bag-fit__logo-loader-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 16px 22px;
    background: linear-gradient(135deg, var(--bf-accent) 0%, #ff7e3e 100%);
    color: #fff;
    border-radius: 14px;
    box-shadow: 0 10px 28px -8px rgba(232,77,7,0.55),
                0 4px 10px rgba(0,0,0,0.10);
}
.bag-fit__logo-loader-hourglass {
    width: 36px;
    height: 54px;
    transform-origin: 50% 50%;
    animation: bf-hourglass-flip 1.6s cubic-bezier(.7,.0,.3,1) infinite;
}
.bag-fit__logo-loader-text {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.2px;
    text-align: center;
}
@keyframes bf-loader-fade-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}
/* «переворот» песочных часов: пауза, потом резкий поворот на 180° */
@keyframes bf-hourglass-flip {
    0%, 65%   { transform: rotate(0deg); }
    78%       { transform: rotate(180deg); }
    100%      { transform: rotate(180deg); }
}

/* зона drop-зоны при перетаскивании файла */
.bag-fit__canvas-wrap.is-dropzone::after {
    content: 'Отпустите файл — он станет логотипом на пакете';
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(232, 77, 7, 0.08);
    border: 2px dashed var(--bf-accent);
    color: var(--bf-accent);
    font-size: 14px;
    font-weight: 600;
    pointer-events: none;
    z-index: 100;
}
/* подпись под предметом в пакете */
/* Подпись (имя файла + размер + палитра) — под лого, СНАРУЖИ.
   По умолчанию скрыта; показывается только при наведении. */
.bag-fit__placed-label {
    position: absolute;
    left: 50%;
    top: calc(100% + 12px);  /* отступ от нижней грани лого + место под угол ресайза */
    transform: translateX(-50%);
    background: rgba(255,255,255,0.95);
    border: 1px solid rgba(0,0,0,0.08);
    color: #333;
    padding: 3px 8px;
    border-radius: 4px;
    font-size: 11px;
    line-height: 1.2;
    white-space: nowrap;
    pointer-events: none;
    box-shadow: 0 2px 6px rgba(0,0,0,0.10);
    filter: none;
    z-index: 5;
    opacity: 0;
    transition: opacity .15s;
}
.bag-fit__placed:hover .bag-fit__placed-label { opacity: 1; }
.bag-fit__placed-label em {
    font-style: normal;
    color: #888;
    margin-left: 4px;
}

/* палитра цветов в логотипе */
.bag-fit__placed-palette {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    margin-left: 6px;
    padding-left: 6px;
    border-left: 1px solid rgba(0,0,0,0.08);
}
.bag-fit__placed-palette b {
    font-weight: 600;
    color: var(--bf-accent);
    margin-right: 4px;
}
.bag-fit__placed-printmode {
    display: inline-block;
    margin-left: 6px;
    padding: 1px 6px;
    border-radius: 8px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.3px;
    text-transform: uppercase;
}
.bag-fit__placed-printmode--spot {
    background: #e8f5e9;
    color: #1f7a32;
    border: 1px solid #a5d6a7;
}
.bag-fit__placed-printmode--cmyk {
    background: #fff3e0;
    color: #c43c00;
    border: 1px solid #ffb74d;
}

.bag-fit__color-sw {
    display: inline-block;
    width: 11px;
    height: 11px;
    border-radius: 50%;
    border: 1px solid rgba(0,0,0,0.15);
    vertical-align: middle;
}

.bag-fit__placed-close,
.bag-fit__placed-rotate {
    position: absolute;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: #fff;
    border: 1px solid #c8c8c8;
    color: #555;
    text-align: center;
    cursor: pointer;
    box-shadow: 0 1px 3px rgba(0,0,0,0.18);
    display: flex;
    align-items: center;
    justify-content: center;
    /* фильтр родителя сюда не лезет благодаря z-index/own stacking */
    filter: none;
}
.bag-fit__placed-close {
    top: -10px; right: -10px;
    font-size: 14px; line-height: 18px;
}
.bag-fit__placed-rotate {
    top: -10px; left: -10px;
    cursor: grab;
}
.bag-fit__placed-rotate:active { cursor: grabbing; }
.bag-fit__placed-close:hover  { background: #ffecec; border-color: #c43c00; color: #c43c00; }
.bag-fit__placed-rotate:hover { background: #fff5ed; border-color: #e84d07; color: #e84d07; }

/* кнопки видны только при наведении на placed-предмет (чтобы не загромождать) */
.bag-fit__placed .bag-fit__placed-close,
.bag-fit__placed .bag-fit__placed-rotate { opacity: 0; transition: opacity .15s; }
.bag-fit__placed:hover .bag-fit__placed-close,
.bag-fit__placed:hover .bag-fit__placed-rotate { opacity: 1; }