@charset "UTF-8";

/* --- ЖЕЛТЫЕ, ОРАНЖЕВЫЕ И БЕЖЕВЫЕ --- */
.ral-1001 { background: #d2b07e; } /* Бежевый */
.ral-1013 { background: #e5be9e; } /* Жемчужно-белый */
.ral-1014 {background: #DED1AC;color: black;} /* Слоновая кость */
.ral-1015 { background: #E9DFC7; } /* Светлая слоновая кость */
.ral-1018 {background: #FEDF0F;color: black;} /* Цинково-желтый */
.ral-2004 {background: #F37127;color: white;} /* Оранжевый чистый */
.ral-2008 { background: #F75E25; } /* Ярко-оранжевый */

/* --- КРАСНЫЕ И КОРИЧНЕВЫЕ --- */
.ral-3001 { background: #A52019; } /* Сигнальный красный */
.ral-3003 {background: #ED1D24;color: white;} /* Рубиново-красный */
.ral-3005 { background: #841B43; } /* Винно-красный */
.ral-3009 {background: #913020;color: white;} /* Оксид красный */
.ral-3011 {background: #8B1B1E;color: white;} /* Коричнево-красный */
.ral-3020 { background: #C1121C; } /* Насыщенный красный */
.ral-8002 { background: #6D3F31; } /* Сигнальный коричневый */
.ral-8004 {background: #B13E25;color: white;} /* Терракотовый */
.ral-8011 { background: #5B3A29; } /* Орехово-коричневый */
.ral-8014 { background: #493327; } /* Сепия (темный шоколад) */
.ral-8017 { background: #45302B; } /* Шоколадно-коричневый */
.ral-8019 { background: #44403D; } /* Серо-коричневый */

/* --- СИНИЕ --- */
.ral-5001 { background: #1F3438; } /* Морская волна */
.ral-5002 {background: #1D61AE;color: white;} /* Ультрамарин */
.ral-5003 { background: #1B3059; } /* Сапфирово-синий */
.ral-5005 {background: #007BC1;color: white;} /* Сигнальный синий */
.ral-5010 { background: #0E467A; } /* Горечавковый синий */
.ral-5012 { background: #317FBD; } /* Голубой */
.ral-5021 {background: #00797F;color: white!important;} /* Морская волна (бирюза) */

/* --- ЗЕЛЕНЫЕ --- */
.ral-6002 {background: #25572A;color: white;} /* Лиственно-зеленый */
.ral-6003 { background: #4B5D46; } /* Оливково-зеленый */
.ral-6005 { background: #0E4336; } /* Зеленый мох */
.ral-6011 { background: #667C59; } /* Резедово-зеленый */
.ral-6019 { background: #B9D9B4; } /* Бело-зеленый */
.ral-6020 {background: #253929;color: white!important;} /* Хромовый зеленый */
.ral-6029 {background: #12783C;color: white;} /* Мятно-зеленый */

/* --- СЕРЫЕ И ЧЕРНЫЕ --- */
.ral-7001 { background: #8F99A3; } /* Серебристо-серый */
.ral-7004 {background: #B2B6BA;color: black;} /* Сигнальный серый */
.ral-7005 {background: #69747A;color: white;} /* Мышино-серый */
.ral-7011 { background: #434B4D; } /* Железно-серый */
.ral-7012 { background: #4D5656; } /* Базальтово-серый */
.ral-7016 {background: #374A50;color: white;} /* Антрацитово-серый */
.ral-7021 { background: #2F3234; } /* Черно-серый */
.ral-7024 {background: #484B52;color: white;} /* Графитовый серый */
.ral-7035 { background: #D3D6D5; } /* Светло-серый */
.ral-7040 { background: #9DA3A6; } /* Серое окно */
.ral-7044 { background: #B8B1A6; } /* Шелковый серый */
.ral-7047 {background: #D0D0D1;color: black;} /* Телегрей 4 */
.ral-9005 { background: #000000; } /* Черный янтарь */
.ral-9011 { background: #1C1C1C; } /* Графитово-черный */

/* --- БЕЛЫЕ И МЕТАЛЛИКИ --- */
.ral-9001 { background: #FDF4E3; } /* Кремово-белый */
.ral-9002 {background: #D9DAD0;color: black;} /* Серо-белый */
.ral-9003 { background: #FFFFFF; } /* Сигнальный белый */
.ral-9006 {background: #A5A8A6;color: black;} /* Бело-алюминиевый */
.ral-9007 { background: #8F8F8F; } /* Темно-алюминиевый */
.ral-9010 { background: #F4F4F4; } /* Чисто-белый */

/* --- СЕРИЯ RR (ФИНСКИЕ) --- */
.rr-11 { background: #2D3E33; } /* Хвойно-зеленый */
.rr-20 { background: #D7D7D7; } /* Белый */
.rr-21 { background: #B3B3B3; } /* Светло-серый */
.rr-23 { background: #51565A; } /* Серый (Графит) */
.rr-29 { background: #B32B1E; } /* Красный (Черепица) */
.rr-32 {background: #423C30;color: white;} /* Терракотовый (Темный) */
.rr-33 { background: #2B2B2B; } /* Черный */
.rr-35 { background: #2D4D73; } /* Синий */
.rr-750 { background: #B32B1E; } /* Кирпичный */

.ral-value {
    font-weight: bold;
    /* Если фон темный, текст будет белым (можно уточнить для конкретных RAL) */
    min-width: 80px;
    text-align: center;
}

/* Пример для темных цветов */
.ral-8017, .ral-8019, .ral-9005, .ral-6005, .ral-3005 {
    color: #fff !important;
}
/* Пример для светлых цветов */
.ral-9003, .ral-1015, .ral-7035 {
    color: #000 !important;
}

/* Индивидуальные фоны для каждой текстуры */
.light_tree { background-image: url(/img/light_tree.webp); }
.tight_tree { background-image: url(/img/tight_tree.webp); }
.nut { background-image: url(/img/nut.webp); }
.antique_oak { background-image: url(/img/antique_oak.webp); }
.golden_oak { background-image: url(/img/golden_oak.webp); }
.smoky_oak { background-image: url(/img/smoky_oak.webp); }
.wild_stone { background-image: url(/img/wild_stone.webp); }
.sandstone { background-image: url(/img/sandstone.webp); }
.brick { background-image: url(/img/brick.webp); }
.vintage_light { background-image: url(/img/vintage_light.webp); }
.vintage_dark { background-image: url(/img/vintage_dark.webp); }
.chestnut { background-image: url(/img/chestnut.webp); }
p.ral {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
}
/* Общие стили для всех плашек с текстурой */
.light_tree, .tight_tree, .nut, .antique_oak, .golden_oak, 
.smoky_oak, .wild_stone, .sandstone, .brick, .vintage_light, 
.vintage_dark, .chestnut {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 160px; /* Ширина плашки */
    height: 70px; /* Высота плашки */
    border: 1px solid #dddddd00;
    border-radius: 4px!important;
    margin: 5px auto!important;
    overflow: hidden;
    font-size: 14px!important;
    letter-spacing: 1px;
    font-weight: bold;
    line-height: normal!important;
    text-align: center;
    text-transform: none;
    background-size: cover;
    background-position: center;
    vertical-align: middle;
    color: gold;
    text-shadow: 0 0 2px black;
    box-shadow: 1px 1px 1px 2px #80808063;
    text-decoration: none;
}

/* Белая подложка для текста внизу */
.light_tree::after, .tight_tree::after, .nut::after, .antique_oak::after, 
.golden_oak::after, .smoky_oak::after, .wild_stone::after, .sandstone::after, 
.brick::after, .vintage_light::after, .vintage_dark::after, .chestnut::after {
    content: attr(class); /* Временное решение, если нужно выводить имя класса, но лучше оставить текст внутри span */
    display: none; 
}