/* Публичният сайт — допълнения върху темата Porto.
   Плочките с индустрии са в отделен industry-tiles.css.

   ПОДРЕДБА

     1. Променливи
     2. Основа — валидация, ширина, заобляне
     3. Лентата горе — лого, език, куфарче
     4. Търсачка
     5. Картата в каталога — списък, шапка, тяло, категории, автор, марка
     6. Бутонът за куфарчето
     7. Детайли — лента, странична карта, заглавие
     8. Куфарче — бутоните и празното състояние
     9. Останали страници — надзаглавие, „За нас“, „Контакти“
    10. Полета на червен фон
    11. Телефон
    12. Принт — детайли и листът на куфарчето

   Всяко правило е описано на ЕДНО място. Ако нещо се повтаря, това е защото е
   в @media, тоест друг контекст — базовото и мобилното на един и същи селектор
   стоят едно до друго, а не през петстотин реда.

   За !important. Porto пише правилата си през помощни класове (.text-5,
   .text-color-grey-dark) и през вериги от :not(), които вдигат специфичността
   над всеки разумен селектор. Където го има, е защото без него стойността не
   стига до екрана — не по мързел. */


/* ============================================================ 1. Променливи */

:root {
    --tt-red: #c8102e;
    --tt-red-dark: #a01020;
    --tt-ink: #23282d;
    --tt-radius: 14px;
    --tt-radius-sm: 10px;
    --tt-radius-xs: 4px;
    --tt-radius-pill: 999px;

    /* Типографията на картите: зелено за надписите, сиво за стойностите. */
    --tt-label: #00966E;
    --tt-value: #4a4f55;

    /* Оградените блокове — страничната карта в детайлите и търсачката. */
    --tt-panel-bg: #fafafa;
    --tt-panel-line: rgba(200, 16, 46, .35);
}


/* ================================================================ 2. Основа */

/* --- валидация ---

   asp-validation-summary рендира своя <div> ВИНАГИ, дори когато няма грешки.
   С класовете alert alert-danger върху него на всяка чиста форма стои празна
   червена кутия. ASP.NET маркира празния случай с validation-summary-valid —
   правилото е част от стандартния шаблон, но липсваше. */

.validation-summary-valid,
.field-validation-valid {
    display: none;
}

/* --- една ширина за целия сайт ---

   Темата свива .container до 1140px на широки екрани, а началната страница
   ползваше .container-xl и излизаше 1320px. Така съдържанието ѝ беше по-широко
   от хедъра, подвала и всички останали страници. Сега всичко е .container и
   всичко е с ширината на началната — плочките с индустриите се нуждаят от нея.

   !important е нужен, защото Porto пише правилото си като
   .container:not(.container-bs):not(.container-xl-custom):not(...) — веригата от
   :not() вдига специфичността над всеки разумен селектор, който бихме написали. */

@media (min-width: 1400px) {
    .container,
    .container-xl {
        max-width: 1320px !important;
    }
}

/* --- заобляне навсякъде: без остри ръбове --- */

.btn,
.form-control,
.form-select,
.input-group > .form-control,
.input-group > .btn,
.card,
.alert,
.modal-content,
.badge,
.page-link,
img.trademark-image,
img.trademark-image-large {
    border-radius: var(--tt-radius-sm);
}

.input-group > .form-control:not(:last-child) {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

.input-group > .btn:not(:first-child) {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

/* --- страниране: кръгчета и стрелки ---

   Кръг иска еднакви страни, затова размерът е фиксиран, а не изведен от
   съдържанието: „1“ и „13“ трябва да са едно и също кръгче. Отделени са с
   междина, вместо да са слети в лента — така всяко е отделна цел, а не част
   от общ бутон. */

.pagination {
    gap: .4rem;
}

.pagination .page-link,
.pagination .page-link:hover,
.pagination .page-link:focus {
    text-decoration: none;
}

.pagination .page-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 0;
    border-radius: 50%;
    border: 1px solid #dfe2e6;
    background: #fff;
    color: var(--tt-value);
    font-weight: 600;
    line-height: 1;
}

.pagination .page-link:hover {
    border-color: var(--tt-red);
    background: #fff;
    color: var(--tt-red);
}

/* Многоточието между далечни страници също е кръгче — иначе стои като процеп
   в редицата. Без кант, за да личи, че не е цел. */
.pagination .page-item.disabled .page-link:not(.page-link--arrow):not([href]) {
    border-color: transparent;
}

.pagination .page-item.active .page-link {
    border-color: var(--tt-red);
    background: var(--tt-red);
    color: #fff;
}

.pagination .page-item.disabled .page-link {
    border-color: #e9ecef;
    background: #fff;
    color: #b6bcc2;
}

/* Стрелките са голи — само знакът, без кръг и без кант.

   Кръг около тях не се получава: Bootstrap заоблява външните ъгли на първия и
   последния елемент със собствено правило, което е със същата специфичност
   като нашето, и стрелките излизаха с два кръгли и два прави ъгъла. Голият
   знак и без това чете по-добре — кръговете остават за страниците, тоест за
   целите, а стрелките са просто посока. */
.pagination .page-link--arrow,
.pagination .page-item.disabled .page-link--arrow {
    border-color: transparent;
    background: transparent;
    font-size: 1.6rem;
    line-height: 1;
}

.pagination .page-link--arrow:hover {
    border-color: transparent;
    background: transparent;
    color: var(--tt-red);
}

/* --- фокусиран бутон с кант ---

   Bootstrap 5.3 рисува фокусирания бутон с цветовете на :hover, тоест ПЛЪТНО
   запълнен. Върху бутон с кант това е неразличимо от натиснат — а фокусът стои
   дълго след действието: и браузърът след диалога за печат, и Bootstrap след
   затварянето на модала го връщат обратно на бутона, който ги е отворил.
   Измерено на „Изпрати на имейл“ след Esc: :hover и :active не съвпадат, фонът
   е rgb(179,11,6), тоест запълването идва изцяло от фокуса.

   Тук фокусът се показва като кръг отвън, а не като запълване. :not(:hover)
   отстъпва на истинския hover от темата (theme-elements.css:3118), а :active
   е с !important и си остава над всичко — натиснатото продължава да изглежда
   натиснато, докато наистина е натиснато. */

.btn-outline:focus:not(:hover) {
    background-color: transparent;
    box-shadow: none;
}

.btn-outline.btn-primary:focus:not(:hover) {
    color: var(--primary);
}

/* Същото за тъмния вариант. Без него текстът остава бял — цветът за :hover —
   върху върнатия прозрачен фон, тоест бяло на бяло. */
.btn-outline.btn-dark:focus:not(:hover) {
    color: var(--dark);
}

/* Ориентирът при движение с Tab остава — като кант, не като цвят. currentColor
   го хваща в цвета на самия бутон, какъвто и да е той. */
.btn-outline:focus-visible:not(:hover) {
    outline: 2px solid currentColor;
    outline-offset: 2px;
}


/* ========================================================= 3. Лентата горе */

/* --- логото ---

   Височината е ~60% от лентата (110px), тоест по 22px въздух отгоре и отдолу.
   При 78px логото заемаше 71% и опираше в ръбовете — четеше се като разтегнато
   до горе, вместо като поставено в лента.

   Двата файла са пренаредени по общ макет (виж коментара в самите svg-та), тъй
   че тази височина дава еднакъв герб и еднакъв надпис на български и на
   английски. Стъпките надолу пазят същото съотношение спрямо лентата.

   На тесен телефон логото беше 198px широко и заедно с флага, куфарчето и
   бутона за менюто редът надхвърляше екрана — бутонът излизаше вдясно и
   страницата тръгваше настрани. */

.site-logo img {
    height: 66px;
    width: auto;
    display: block;
}

@media (max-width: 991px) {
    .site-logo img {
        height: 50px;
    }
}

@media (max-width: 420px) {
    .site-logo img {
        height: 40px;
        max-width: 100%;
    }
}

@media (max-width: 359.98px) {
    .site-logo img {
        height: 34px;
    }
}

/* --- превключвател на езика: един флаг до куфарчето --- */

.lang-flag {
    display: inline-flex;
    line-height: 0;
    /* Собствен, по-малък радиус: 4px върху правоъгълник 30×18 изяжда осезаемо
       от ъглите и знамето спира да прилича на знаме. Тук само се смекчава. */
    border-radius: 2px;
    overflow: hidden;
    /* Тънкият кант отделя бялата ивица на българското знаме от белия фон. */
    box-shadow: 0 0 0 1px rgba(0, 0, 0, .18);
}

.lang-flag svg {
    display: block;
    width: 30px;
    height: 18px;
}

@media (max-width: 575.98px) {
    .lang-flag svg {
        width: 26px;
        height: 16px;
    }
}

/* Без ефект при посочване — знамето стои мирно. Остава само видим фокус
   за навигация с клавиатура. */
.lang-flag:focus-visible {
    outline: 2px solid var(--tt-red);
    outline-offset: 2px;
}

/* --- куфарчето в лентата ---

   Един тъмен цвят навсякъде. Иконата ползва currentColor и досега взимаше този
   на контейнера: в лентата излизаше #212529 (цветът на текста на Bootstrap), а в
   бутоните #23282d. Разликата е малка, но двете икони стоят една до друга. */

.briefcase-icon {
    color: var(--tt-ink);
}

.briefcase-link {
    position: relative;
    display: inline-flex;
    align-items: center;
    padding: 4px;
}

.briefcase-link .briefcase-icon {
    width: 26px;
    height: 26px;
}

.briefcase-badge {
    position: absolute;
    top: -4px;
    right: -8px;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: var(--tt-radius-pill);
    background: var(--tt-red);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    line-height: 18px;
    text-align: center;
}


/* ============================================================== 4. Търсачка */

/* --- секцията със заглавието и полето ---

   Бледият фон стои на СЕКЦИЯТА, не в самото поле: така целият блок със
   заглавието, подзаглавието и търсачката се чете като едно, а полето остава
   бяло върху него. Цветът е същият като на страничната карта в детайлите. */

.catalog-hero {
    background: var(--tt-panel-bg);
}

/* --- самото поле ---

   Изцяло заоблено, само червена лупа, без плътен бутон. */

.input-group:has(.search-submit) {
    /* Радиус, по-голям от половин височина: краищата излизат полукръгли при
       всеки размер на шрифта, без да се пресмята височината. */
    --tt-search-radius: 999px;
}

.input-group > .form-control:has(+ .search-submit) {
    border-top-left-radius: var(--tt-search-radius);
    border-bottom-left-radius: var(--tt-search-radius);

    /* Текстът трябва да отстъпи навътре, иначе опира в заобления кант. */
    padding-left: 1.35rem;

    /* Полето и лупата са едно цяло — вътрешният кант между тях отпада. */
    border-right: 0;

    /* Полето е бяло ВЪРХУ бледия фон на секцията — така се чете като поле, а
       не като част от фона. Кантът е червеникавият на .detail-aside, за да са
       едно семейство. */
    background: #fff;
    border-color: var(--tt-panel-line);
}

.input-group > .btn.search-submit,
.input-group > .btn.search-submit:hover,
.input-group > .btn.search-submit:focus,
.input-group > .btn.search-submit:active {
    background: #fff;
    border-color: var(--tt-panel-line);
    border-left: 0;
    border-top-right-radius: var(--tt-search-radius);
    border-bottom-right-radius: var(--tt-search-radius);
    color: var(--tt-red);
    padding-left: 1rem;
    padding-right: 1.35rem;
    box-shadow: none;
}

/* Лупата е тънка при този размер и остава по-лека от текста до нея.
   Иконата е шрифтова, тъй че се удебелява по собствения си контур. */
.input-group > .btn.search-submit .icons {
    font-size: 1.1em;
    -webkit-text-stroke: 0.4px currentColor;
}

.input-group > .btn.search-submit:hover {
    color: var(--tt-red-dark);
}

/* Фокусът беше само по полето, а канта му отдясно е махнат — при писане
   рамката оставаше отворена откъм лупата. Сега се осветява цялата група. */
.input-group:has(.search-submit):focus-within > .form-control,
.input-group:has(.search-submit):focus-within > .btn.search-submit {
    border-color: var(--tt-red);
}

.input-group:has(.search-submit):focus-within {
    border-radius: var(--tt-search-radius);
    box-shadow: 0 0 0 0.2rem rgba(200, 16, 46, 0.2); /* --tt-red с прозрачност */
}

/* Собственият ореол на Bootstrap по полето дублира горния и излиза правоъгълен. */
.input-group > .form-control:has(+ .search-submit):focus {
    box-shadow: none;
}

/* С Tab фокусът стига и до самата лупа. Без това не личи къде си. */
.input-group > .btn.search-submit:focus-visible {
    outline: 2px solid var(--tt-red);
    outline-offset: -3px;
    border-radius: var(--tt-search-radius);
}


/* =================================================== 5. Картата в каталога */

/* --- списъкът ---

   Въздух отстрани: Bootstrap дава на .container 12px улей от всяка страна и
   картата опира почти в ръба му. 20px, тоест толкова, колкото е и вътрешният
   отстъп на самата карта — така разстоянието от текста до ръба на екрана се
   разчита като едно, а не като две различни стъпки. */

.catalog-list {
    padding-left: 20px;
    padding-right: 20px;
}

/* --- рамката --- */

.catalog-card {
    border: 1px solid #e3e3e3;
    border-radius: var(--tt-radius);
    overflow: hidden;
    background: #fff;
    height: 100%;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .04), 0 6px 18px rgba(0, 0, 0, .05);
    transition: box-shadow .25s ease, transform .25s ease;
}

.catalog-card:hover {
    box-shadow: 0 2px 4px rgba(0, 0, 0, .06), 0 12px 28px rgba(0, 0, 0, .09);
    transform: translateY(-2px);
}

/* --- червената шапка ---

   Отстъпът отстрани е 20px — колкото в тялото. Беше 18 и надписът в лентата
   стоеше с два пиксела навътре спрямо заглавието под нея; разликата е малка,
   но двете са едно под друго и окото я хваща. */

.catalog-card-header {
    background: linear-gradient(90deg, var(--tt-red-dark), var(--tt-red));
    color: #fff;
    padding: 12px 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}

@media (max-width: 768px) {
    .catalog-card-header {
        padding: 10px 14px;
    }
}

/* Видът и номерът — „Полезен модел · № 5223“.

   17px е общият размер на трите второстепенни блока в картата: този тук, редът
   с категориите и колоната с водещия автор. Заглавието е на 20px, резюмето на
   16px — така йерархията е три стъпки, а не пет различни числа. */
.catalog-card-header .font-weight-semibold {
    font-size: 17px !important;
}

/* --- тялото --- */

.catalog-card-body {
    padding: 20px;
}

@media (max-width: 575.98px) {
    /* Картите дишат по-малко отвътре, за да не са само рамки. */
    .catalog-card-body {
        padding: 1rem;
    }
}

/* Заглавието е по-едро и ПО-ЛЕКО от останалия текст в картата: размерът го
   отделя, а тежестта 500 му позволява да не крещи. При 600 на 23px картата
   изглеждаше като списък от удебелени редове.

   Стойностите стоят и на h4, и на връзката вътре. Текстът е винаги в
   връзката, но h4 задава височината на реда — разминат ли се двете, редът се
   мери по по-голямото и отстъпите тръгват да не си съвпадат. */

.catalog-card h4,
.catalog-card h4 a {
    font-size: 23px !important;
    font-weight: 500 !important;
    line-height: 30px !important;
    letter-spacing: -.015em;
}

.catalog-card h4 a {
    color: var(--tt-ink) !important;
}

.catalog-card h4 a:hover {
    color: var(--tt-red);
}

.catalog-summary {
    color: var(--tt-value);
    font-size: 16px !important;
    line-height: 1.75;
}

/* В детайлите същият блок носи HTML от редактора, а не гол текст. Темата
   оцветява p, li и клетките направо (#777) и прякото правило бие наследяването —
   в картата резюмето излизаше в правилния сив, а в детайлите цялото беше
   по-светло. Заглавията в текста не се пипат: те са си отделно ниво. Връзките
   остават червени — в тях червеното значи „щракни ме“. */
.catalog-summary p,
.catalog-summary li,
.catalog-summary span,
.catalog-summary strong,
.catalog-summary em,
.catalog-summary blockquote,
.catalog-summary td,
.catalog-summary th {
    color: inherit;
}

/* „Прочети още“ — връзката под резюмето. Шевронът е в CSS, не в превода: той е
   знак, не дума, и е един и същи на двата езика. Многоточие не се ползва — то
   обещава продължение на изречението, а тук се отива на друга страница. */
.catalog-card .text-color-primary {
    font-size: 15px !important;
}

.catalog-card .text-color-primary::after {
    content: "›";
    display: inline-block;
    margin-left: .35em;
    font-size: 1.35em;
    line-height: 1;
    transition: transform .15s ease;
}

.catalog-card .text-color-primary:hover::after {
    transform: translateX(.2em);
}

/* --- редът с категориите ---

   „Категория:“ и изброяването вървят на един ред — надписът е кратък и
   стойността започва веднага след него, вместо да пада отдолу. Затова редът е
   flex: надписът не се свива, стойността взима остатъка. */

.catalog-card-meta {
    display: flex;
    align-items: baseline;
    gap: .4rem;
    padding-top: 12px;
    margin-top: 12px;
    font-size: .9rem;
}

/* Надписът стои ПРЕД изброяване, а не НАД едно име — оттам идва различният
   line-height и липсата на отстъп отдолу. Размерът е същият като при автора. */
.catalog-card-meta .card-label {
    flex: 0 0 auto;
    margin-bottom: 0;
    white-space: nowrap;
    font-size: 17px !important;
    line-height: 26px !important;
}

/* Самите категории — винаги на един ред, отрязани с многоточие. Изброяването
   стига до десет индустрии и на два реда тежеше повече от резюмето над него.
   Целият списък остава в title, иначе скритите няма откъде да се видят.

   min-width: 0 е задължителен: flex елемент по подразбиране не се свива под
   съдържанието си и многоточието никога не се появява — вместо това редът
   избутва картата. */
.catalog-card-meta .text-color-grey-dark {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    color: var(--tt-ink) !important;
    font-size: 17px !important;
    font-weight: 500 !important;
    line-height: 26px !important;
}

/* На тесен екран изброяването пада ПОД надписа, както е при водещия автор.
   „Категория:“ изяжда половината ред и от самите индустрии оставаха две думи и
   многоточие. Изброяването остава на един ред — просто вече разполага с целия. */
@media (max-width: 767.98px) {
    .catalog-card-meta {
        display: block;
    }

    .catalog-card-meta .card-label {
        margin-bottom: .25rem;
    }

    .catalog-card-meta .text-color-grey-dark {
        display: block;
    }
}

/* --- колоната с водещия автор --- */

/* Надписът „Водещ автор:“ — с въздух под него, за да се чете като надпис над
   стойност, а не като първи ред от нея. */
.card-label {
    display: block;
    margin-bottom: 1rem;
    color: var(--tt-label) !important;
    font-size: 17px !important;
    font-weight: 600 !important;
    line-height: 21px !important;
}

/* Самото име. Не е връзка и не бива да изглежда като такава — червеното на
   сайта значи „щракни ме“. */
.card-author {
    color: var(--tt-ink) !important;
    font-size: 17px !important;
    font-weight: 500 !important;
    line-height: 26px !important;
}

/* Междина между текста и колоната с автора. Улеят на Bootstrap е 24px и двете
   изглеждаха като един блок.

   Отстъпът е отдясно на ТЕКСТА, не отляво на автора. Отляво щеше да свие самата
   колона с имената, а те са дълги — „Х.проф. Валентин Кисимов“ опира в ръба и
   се пренася. Отдясно взима от резюмето, което и без това е на няколко реда. */
@media (min-width: 768px) {
    .catalog-card .col-md-9,
    .catalog-card .col-md-6 {
        padding-right: 2rem;
    }

    .catalog-card .col-md-3 {
        padding-left: 0;
    }
}

/* --- изображението на know-how марка --- */

.trademark-image {
    max-height: 160px;
    width: auto;
    max-width: 100%;
    object-fit: contain;
}

/* Клетката стои вдясно в картата и центрира изображението по двете оси. Заедно
   с .align-items-center на реда то стои спрямо целия текст, а не залепено за
   горния му ред. */
.trademark-cell {
    display: flex;
    align-items: center;
    justify-content: center;
}

.trademark-image-large {
    max-height: 320px;
    width: auto;
    max-width: 100%;
    object-fit: contain;
}


/* ================================================ 6. Бутонът за куфарчето */

/* Само два знака: куфарчето вляво, плюс или минус вдясно, разделени докрай.

   Надписът отпадна. На червената лента се четеше трудно, а действието се
   разбира и без него — куфарче с плюс добавя, куфарче с минус маха. Текстът
   остава в title и aria-label, тъй че подсказката и екранните четци го имат.

   space-between иска фиксирана ширина: без нея бутонът се свива до двата знака
   и „разделени докрай“ спира да значи каквото и да е. */

.card-action {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    width: 84px;
    height: 38px;
    padding: 0 14px;
    border: 0;
    border-radius: var(--tt-radius-pill);
    background: #fff;
    color: var(--tt-ink);
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color .2s ease, color .2s ease, transform .15s ease;
}

/* Посочването само посветлява фона. Не се запълва с тъмно, защото иконата на
   куфарчето остава тъмна във всички състояния и би изчезнала във фона. */
.card-action:hover:not(:disabled) {
    background: #eceef0;
    color: var(--tt-ink);
}

.card-action:active:not(:disabled) {
    transform: scale(.97);
}

/* Бутонът никога не се подчертава — и когато е линк (в детайлите). */
a.card-action,
a.card-action:hover,
a.card-action:focus,
a.card-action:active {
    text-decoration: none;
}

/* Обезцветеният вид е за наистина недостъпен бутон, не за половин секунда
   мрежа. Докато трае заявката бутонът е disabled — двойно натискане не минава —
   но носи is-busy и си остава на вид същият, иначе премигва при всяко
   натискане. */
.card-action:disabled:not(.is-busy),
.card-action.is-added {
    background: rgba(255, 255, 255, .85);
    color: #6d7278;
    cursor: default;
}

.card-action.is-busy {
    cursor: default;
}

/* „Добавено в куфарчето“ в детайлите — зелено и вече линк към куфарчето.
   Стои на червената лента, затова фонът остава бял.

   Селекторите започват с a, за да бият .card-action:hover:not(:disabled)
   по специфичност — иначе линкът посивява като обикновен бутон при посочване.
   Фонът остава бял и при посочване: надписът е зелен, иконата тъмна, нищо не
   се запълва. */
a.card-action--added,
a.card-action--added:link,
a.card-action--added:visited,
a.card-action--added:hover:not(:disabled),
a.card-action--added:focus-visible {
    background: #fff;
    color: #1a7f37;
    text-decoration: none;
}

/* Отметката е бяла в плътно зелено кръгче, не зелена черта на бял фон. Плюсът
   и минусът са действия — един знак им стига; отметката е СЪСТОЯНИЕ и запълненият
   кръг го казва без думи. Размерът е колкото иконата на куфарчето до нея. */
.card-action--added .card-action__sign {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: #1a7f37;
    color: #fff;
    line-height: 1;
}

/* Самата отметка е рисунка (_CheckIcon), не знак от шрифта — вътре в кръгчето
   тя стои центрирана и с еднаква дебелина с иконите до нея. */
.card-action--added .check-icon {
    width: 13px;
    height: 13px;
}

/* Иконата на куфарчето. Тъмна е във ВСИЧКИ състояния: не позеленява при
   „добавено“, не почервенява при „премахни“ и не изсветлява при посочване.
   Затова и никое състояние не запълва бутона с тъмно. */
.card-action .briefcase-icon {
    width: 22px;
    height: 22px;
    flex: 0 0 auto;
    color: var(--tt-ink);
}

/* Надписът е скрит, но остава в разметката — до него стигат само екранните
   четци, а те и без това четат aria-label. */
.card-action__label {
    display: none;
}

/* Плюс в зелено при добавяне, минус в червено при премахване. */
.card-action__sign {
    display: inline;
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1;
}

.card-action--add .card-action__sign {
    color: #1a7f37;
}

.card-action--remove .card-action__sign {
    color: var(--tt-red);
}

.card-action.is-added .card-action__sign {
    color: #6d7278;
}

/* Принт бутон до „добави“ на детайлната страница — единственият с една икона,
   затова е кръгъл и центриран, а не разделен на два края. */
.card-action--icon {
    width: 38px;
    padding: 0;
    justify-content: center;
}

.printer-icon {
    width: 20px;
    height: 20px;
    flex: 0 0 auto;
    color: var(--tt-ink);
}


/* ============================================================== 7. Детайли */

/* --- лентата с вида и номера --- */

.detail-bar {
    background: linear-gradient(90deg, var(--tt-red-dark), var(--tt-red));
    color: #fff;
    padding: 14px 0;
}

/* Номерът върви след вида, отделен с точка. */
.detail-bar__number::before {
    content: "·";
    margin: 0 .5rem;
}

/* --- страничната карта ---

   По образеца от стария сайт: блед кант, светъл фон и черта само между
   блоковете. Вътре е авторството и категорията; видът и регистрационният номер
   стоят горе в лентата, където се хващат с един поглед. */

.detail-aside {
    padding: 1.75rem;
    border: 1px solid var(--tt-panel-line);
    border-radius: 15px;
    background: var(--tt-panel-bg);
}

/* Стойностите са в същия сив като резюмето вляво. Бяха #333 — по-тъмно от
   текста до тях, а двете колони се четат заедно и разликата личеше като
   недоглеждане. */
.detail-row {
    font-size: 16px;
    font-weight: 500;
    line-height: 19px;
    color: var(--tt-value);
}

/* Надписът остава по-тъмен: по-тежък, с по-широк ред и с една стъпка по-плътен
   цвят — той дава ритъма на картата. */
.detail-row--label {
    font-size: 16px;
    font-weight: 600;
    line-height: 32px;
    color: #333;
}

/* Няколко съавтора под общия надпис вървят слято, само с дъх между тях. */
.detail-row + .detail-row {
    margin-top: .4rem;
}

/* Чертата дели БЛОКОВЕТЕ, не редовете: стои над всеки надпис, който не е
   първият. Черта между съавторите ги представяше като отделни неща, а те са
   един списък. */
.detail-row + .detail-row--label {
    margin-top: 1.15rem;
    padding-top: 1.15rem;
    border-top: 1px solid #dfe2e6;
}

/* --- заглавието и текстът на едро --- */

.detail-title {
    font-weight: 500;
    letter-spacing: -.015em;
}


/* ============================================================= 8. Куфарче */

/* --- трите действия ---

   Едри и без икони. Темата дава на .btn дребен шрифт, разчетен за бутон с
   иконка до текста; тук текстът носи всичко сам и трябва да се чете отдалеч. */

.briefcase-actions .btn {
    font-size: 1rem;
    font-weight: 500;
}


/* --- празното куфарче --- */

.briefcase-empty {
    padding: 2rem 1rem 4rem;
}

.briefcase-empty img {
    display: block;
    width: 100%;
    max-width: 320px;
    height: auto;
    margin: 0 auto 2.5rem;
    opacity: .85;
}

.briefcase-empty p {
    color: var(--tt-muted, #6c757d);
    max-width: 34rem;
    margin-inline: auto;
}

@media (max-width: 575.98px) {
    .briefcase-empty img {
        max-width: 220px;
        margin-bottom: 1.75rem;
    }
}


/* ================================================== 9. Останали страници */

/* --- малко червено надзаглавие с чертичка ---
   Темата имаше .line-pre-title, но той отпадна при изчистването ѝ. */

.section-pretitle {
    display: flex;
    align-items: center;
    gap: .6rem;
    margin-bottom: .5rem;
    color: var(--tt-red);
    font-size: .8rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.section-pretitle::before {
    content: "";
    width: 26px;
    height: 2px;
    background: var(--tt-red);
    flex: 0 0 auto;
}

/* --- „За нас“: печатите и сградата --- */

.about-image {
    width: 100%;
    max-width: 460px;
    height: auto;
    border-radius: var(--tt-radius);
}

/* --- „Контакти“: данните вляво --- */

.contact-unwe-link {
    color: var(--tt-ink);
    font-weight: 600;
    border-bottom: 2px solid var(--tt-red);
    text-decoration: none;
}

.contact-unwe-link:hover {
    color: var(--tt-red);
}

.contact-list li {
    display: flex;
    align-items: flex-start;
    gap: .75rem;
    margin-bottom: .85rem;
}

.contact-list li:last-child {
    margin-bottom: 0;
}

.contact-list i {
    color: var(--tt-red);
    font-size: 1.05rem;
    line-height: 1.5;
    flex: 0 0 auto;
}

.contact-list a {
    color: var(--tt-ink);
    text-decoration: none;
}

.contact-list a:hover {
    color: var(--tt-red);
}


/* ================================================ 10. Полета на червен фон */

.catalog-card-header .form-select,
.catalog-card-header .form-control,
.on-red .form-select,
.on-red .form-control {
    background-color: rgba(255, 255, 255, .14);
    border-color: rgba(255, 255, 255, .45);
    color: #fff;
}

.catalog-card-header .form-select option,
.on-red .form-select option {
    color: var(--tt-ink);
}

.catalog-card-header .form-select:focus,
.on-red .form-select:focus,
.on-red .form-control:focus {
    background-color: rgba(255, 255, 255, .2);
    border-color: #fff;
    color: #fff;
    box-shadow: 0 0 0 .2rem rgba(255, 255, 255, .25);
}

.on-red .form-control::placeholder {
    color: rgba(255, 255, 255, .75);
}


/* ============================================================== 11. Телефон */

/* По-стегнати отстояния и заглавия.

   На широк екран py-5 върху секцията плюс py-4 върху контейнера дават приятен
   въздух. На телефон същите 3rem + 1.5rem от двете страни изяждат цял екран,
   преди да се появи съдържание.

   Отстоянията на .catalog-card-body, .catalog-card-header, .card-action,
   .lang-flag svg, .site-logo img и .briefcase-empty img са при самите тях
   по-горе — там, където е и базовото им правило. */

@media (max-width: 575.98px) {
    /* !important, защото py-5/mb-5 на Bootstrap също са !important. */
    .main > .container,
    .main .section > .container {
        padding-top: 1.25rem !important;
        padding-bottom: 1.25rem !important;
    }

    .main .section {
        padding-top: 1.5rem !important;
        padding-bottom: 1.5rem !important;
    }

    /* Отстоянието под заглавния блок на страницата. */
    .main .mb-5 {
        margin-bottom: 1.5rem !important;
    }

    /* Когато двете колони се подредят една под друга, 3rem между тях е много. */
    .main .row.g-5 {
        --bs-gutter-y: 1.75rem;
    }

    /* Заглавията на темата са оразмерени за настолен екран и на телефон
       се разливат на четири-пет реда. */
    .main h1,
    .main .text-8 {
        font-size: 1.6rem;
        line-height: 1.25;
    }

    .main h2,
    .main .text-6 {
        font-size: 1.35rem;
        line-height: 1.3;
    }

    .main .text-5 {
        font-size: 1.15rem;
    }

    .main .text-4 {
        font-size: 1rem;
    }

    .card-body.p-4,
    .card-body.p-lg-5 {
        padding: 1.25rem !important;
    }
}


/* ================================================================ 12. Принт */

/* Детайлната страница печата съдържанието си както е на екрана. Куфарчето —
   не: то има свой лист (_BriefcasePrint), а екранната страница отпада цялата
   през .no-print. */

.briefcase-print {
    display: none;
}

@media print {
    /* Полетата на листа — иначе всеки браузър слага свои. PDF-ът беше на 2 cm;
       тук са малко по-тесни, защото шапката е по-ниска от неговата. */
    @page {
        margin: 16mm;
    }

    #header,
    #footer,
    .card-action,
    .no-print {
        display: none !important;
    }

    .detail-bar {
        background: none !important;
        color: #000 !important;
        border-bottom: 2px solid #000;
        padding: 0 0 8px;
    }

    a[href]::after {
        content: "";
    }

    body {
        font-size: 12pt;
    }

    /* --- листът на куфарчето ---

       Шапката повтаря PDF-а: организацията вляво, заглавие и дата вдясно,
       червена лента отдолу. Шрифтът е наследеният от сайта — размерите са в pt,
       защото листът е лист, не екран. */

    .briefcase-print {
        display: block;
        font-size: 10pt;
        color: #000;
    }

    .briefcase-print p {
        margin: 0;
    }

    .briefcase-print__head {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        gap: 16pt;
        border-bottom: 1.5pt solid var(--tt-red);
        padding-bottom: 6pt;
    }

    .briefcase-print__institute {
        font-size: 13pt;
        font-weight: 700;
        color: var(--tt-red);
        line-height: 1.25;
    }

    .briefcase-print__office {
        font-size: 9pt;
        color: #555;
        line-height: 1.3;
    }

    .briefcase-print__meta {
        text-align: right;
        white-space: nowrap;
    }

    .briefcase-print__title {
        font-size: 12pt;
        font-weight: 700;
    }

    .briefcase-print__date {
        font-size: 9pt;
        color: #555;
    }

    /* Номерата идват от <ol>, а не от псевдоелемент — така при пренасяне на
       страница броенето остава вярно. */

    .briefcase-print__list {
        list-style: decimal;
        margin: 12pt 0 0;
        padding-left: 14pt;
    }

    .briefcase-print__item {
        border: 0.75pt solid #aaa;
        padding: 8pt 10pt;
        margin-bottom: 10pt;
        /* Записът не се разкъсва между два листа. */
        break-inside: avoid;
        page-break-inside: avoid;
    }

    .briefcase-print__item::marker {
        font-weight: 700;
        color: var(--tt-red);
    }

    .briefcase-print__item-head {
        display: flex;
        justify-content: space-between;
        align-items: baseline;
        gap: 10pt;
    }

    .briefcase-print__item-title {
        font-size: 11pt;
        font-weight: 700;
    }

    .briefcase-print__number {
        font-size: 9pt;
        color: #444;
        white-space: nowrap;
    }

    .briefcase-print__type {
        font-size: 9pt;
        color: #444;
        margin-top: 2pt !important;
    }

    .briefcase-print__summary {
        font-size: 9.5pt;
        line-height: 1.4;
        margin-top: 4pt !important;
    }

    .briefcase-print__field {
        font-size: 9pt;
        margin-top: 3pt !important;
    }

    .briefcase-print__label {
        font-weight: 600;
        color: #444;
    }

    .briefcase-print__foot {
        border-top: 0.5pt solid #bbb;
        margin-top: 12pt;
        padding-top: 6pt;
        font-size: 8pt;
        color: #555;
    }
}