/* =================================================================== */
/* ============== BAGON FABRIC GALLERY v6.0.4 ============== */
/* (Добавлена тень шрифта (text-shadow)) */
/* =================================================================== */


/* --- 1. Основные контейнеры галереи --- */
.fabric-gallery-wrapper {
    --main-font-family: 'Rubik', sans-serif;
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    align-items: flex-start;
    width: 100%;
    margin: 0 auto;
    font-family: var(--main-font-family);
}

.fabric-gallery {
    display: flex;
    flex-wrap: wrap;
    /* Все свойства (justify-content, gap, width) устанавливаются инлайн из PHP */
	padding: 0px 0px;
}


/* --- 2. Сетка Карточки (внешний контейнер) --- */
.fabric-item {
    flex: 0 0 calc((100% - ( (var(--columns) - 1) * var(--gallery-gap, 8px)) ) / var(--columns));
    display: flex; 
    justify-content: center;
    cursor: pointer;
    box-sizing: border-box;
    position: relative;
    background-color: #20202000;
}

/* --- 3. Внутренняя обертка (Главный блок карточки) --- */
.fabric-item-inner {
    width: var(--item-css-width, 100%);
    height: var(--item-css-height, auto);
    position: relative;
    overflow: hidden;
    background-color: inherit;
    border-radius: var(--item-border-radius, 8px);
    transition: all var(--transition-duration, 0.3s) cubic-bezier(0.25, 0.8, 0.25, 1);
}


/* --- 4. Обертка Изображения --- */
.fabric-item-image-wrapper {
    overflow: hidden;
    position: relative;
    border-radius: var(--image-border-radius, 0);
    padding-top: var(--image-padding-top, 0);
    padding-bottom: var(--image-padding-bottom, 0);
    padding-left: var(--image-padding-left, 0);
    padding-right: var(--image-padding-right, 0);
    box-sizing: border-box;
    box-shadow: var(--image-box-shadow, none);
}

/* --- 5. Само Изображение --- */
.fabric-item img.fabric-item-image {
    width: var(--image-css-width, 100%);
    height: var(--image-css-height, 160px); 
    object-fit: cover; 
    display: block; 
    margin-left: var(--image-margin-left, auto);
    margin-right: var(--image-margin-right, auto);
    border-radius: var(--image-border-radius, 0);
    object-position: var(--image-position, center center);
    transform: scale(var(--image-scale, 1));
    transition: transform 0.3s ease; 
}

/* --- 6. Обертка Текста --- */
.fabric-item-text-wrapper {
    padding-top: var(--text-padding-top, 5px);
    padding-bottom: var(--text-padding-bottom, 5px);
    padding-left: var(--text-padding-left, 5px);
    padding-right: var(--text-padding-right, 5px);
    box-sizing: border-box; 
}

/* --- 7. Текстовые блоки (Стилизация) --- */
.fabric-item-attribute-value {
    text-align: var(--text-align, left);
    color: var(--text-font-color, #ffffff9c);
    font-size: var(--text-font-size, 14px);
    font-family: var(--text-font-family, var(--main-font-family));
    text-transform: var(--text-transform, none);
    font-weight: 200;
    transition: all 0.3s ease;
    padding: 0;
    margin: 0;
    
    /* --- НОВОЕ v6.0.4 --- */
    text-shadow: var(--text-shadow, none);
    /* --- КОНЕЦ НОВОГО --- */
}

.fabric-item-attribute-first,
.fabric-item-attribute-second {
    display: block;
}

.fabric-item-meta {
    font-size: 14px;
    margin: 4px 0 0 0;
    color: #666;
    text-align: var(--text-align, left);
    /* --- НОВОЕ v6.0.4 --- */
    text-shadow: var(--text-shadow, none); /* Применяем тень и сюда */
    /* --- КОНЕЦ НОВОГО --- */
}


/* --- 8. Эффекты Hover/Selected --- */
.fabric-item:hover .fabric-item-inner {
    transform: var(--hover-translate, translateY(-5px));
    box-shadow: var(--hover-box-shadow, 0 10px 20px rgba(0,0,0,0.2));
	background-color: var(--hover-bg-color, #7d7d7d26);
    border-radius: var(--hover-item-border-radius, var(--item-border-radius, 8px));
}

.fabric-item.selected .fabric-item-inner {
    transform: var(--selected-translate, translateY(-5px));
    box-shadow: var(--selected-box-shadow, 0 10px 20px rgba(0,0,0,0.2));
	background-color: var(--selected-bg-color, #fff1d81a);
    border-radius: var(--selected-item-border-radius, var(--item-border-radius, 8px));
}

.fabric-item:hover .fabric-item-inner img.fabric-item-image,
.fabric-item.selected .fabric-item-inner img.fabric-item-image {
    transform: scale(var(--image-zoom, 1.05));
}

.fabric-item.selected .fabric-item-attribute-value {
    color: var(--text-font-color-selected, #fbd38d);
    font-weight: 200;
}

/* --- 9. Галочка (✔) --- */
.fabric-item.selected .fabric-item-image-wrapper::after {
content: '✔';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 57%;
    height: 50%;
    background-color: rgb(37 37 37 / 23%);
    border-radius: 100%;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fbd38d;
    font-size: 400%;
    /* font-weight: bold; */
    text-shadow: 5px 5px 11px rgb(0 0 0);
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.5);
    animation: bccgcFadeInScale 0.3s 0.1s forwards;
    z-index: 99;
}

@keyframes fadeInScale {
    to {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1);
    }
}


/* --- 10. Системные уведомления --- */
.fabric-error, .fabric-notice {
    padding: 15px;
    border-radius: 8px;
    width: 100%;
}
.fabric-error {
    color: #d9534f;
    font-weight: bold;
    background: #f8d7da;
}
.fabric-notice {
    color: #856404;
    background-color: #fff3cd;
}