/**
 * @package     Joomla.Site
 * @subpackage  com_marc21_integrator
 *
 * @copyright   (C) 2026 Ruslan Ternovyi. All rights reserved.
 * @license     GNU General Public License version 2 or later; see LICENSE.txt
 */

/* ============================================================
   Загальна обгортка
   ============================================================ */
#wrap_katalog {
    background-color: #fff;
    margin: 0 auto 40px;
    padding: 20px;
    max-width: 1100px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    border-radius: 4px;
}

/* ============================================================
   Заголовок
   ============================================================ */
.marc21-title {
    margin-bottom: 25px;
    text-align: center;
}

.marc21-title .title-anim-1 {
    font-size: 1.3rem;
    color: #555;
    letter-spacing: 3px;
    text-transform: uppercase;
}

.marc21-title .title-anim-2 {
    font-size: 2.6rem;
    color: #007cba;
    font-weight: bold;
    line-height: 1.1;
}

/* ============================================================
   Інформаційний блок
   ============================================================ */
.search_info {
    margin-bottom: 30px;
    padding: 15px 20px;
    background-color: #f1f5f9;
    border-left: 4px solid #007cba;
    border-radius: 4px;
}

.search_info h3 {
    color: #333;
    font-size: 1.1rem;
    margin: 15px 0 8px;
}

.search_info h3:first-child {
    margin-top: 0;
}

.search_info p,
.search_info div {
    color: #555;
    margin-bottom: 10px;
    line-height: 1.6;
}

/* ============================================================
   Fieldset
   ============================================================ */
.marc21-fieldset {
    border: 1px solid #dee2e6;
    border-radius: 4px;
    padding: 15px 20px;
    margin-bottom: 20px;
    background-color: #fafbfc;
}

.marc21-fieldset legend {
    font-size: 1.05rem;
    font-weight: 600;
    color: #333;
    padding: 0 8px;
    width: auto;
    float: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

/* ============================================================
   Tooltip-и
   ============================================================ */
.marc21-help {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    margin-left: 4px;
    color: #007cba;
    cursor: help;
    font-size: 0.9rem;
    opacity: 0.7;
    transition: opacity 0.15s ease;
    border: 1px solid #007cba;
    border-radius: 50%;
    background-color: #fff;
    line-height: 1;
}

.marc21-help:hover,
.marc21-help:focus {
    opacity: 1;
    background-color: #e7f2fb;
    outline: none;
}

.marc21-help .icon-question-circle {
    font-size: 12px;
}

/* ============================================================
   Поля пошуку
   ============================================================ */
.marc21-search-row {
    margin-bottom: 8px;
}

.marc21-search-input {
    width: 100%;
}

/* ============================================================
   Радіо і чекбокси
   ============================================================ */
.marc21-fieldset .form-check {
    margin-bottom: 6px;
}

.marc21-fieldset .form-check-inline {
    margin-right: 20px;
}

/* ============================================================
   Кнопки
   ============================================================ */
.marc21-fieldset + .form-actions {
    margin-top: 25px;
}

#clear-form-button {
    white-space: nowrap;
}

/* ============================================================
   Результати: заголовок і лічильник
   ============================================================ */
#new_search {
    padding: 10px 0;
    border-bottom: 1px solid #eee;
    margin-bottom: 20px;
}

.marc21-results-count .badge {
    font-size: 0.95rem;
    padding: 6px 12px;
}

/* ============================================================
   Акордеон результатів
   ============================================================ */
.marc21-accordion .card {
    margin-bottom: 8px;
    border: 1px solid rgba(0, 0, 0, 0.125);
    border-radius: 4px;
    overflow: hidden;
}

.marc21-accordion .card-header {
    padding: 0;
    background-color: #f8f9fa;
    border-bottom: 1px solid rgba(0, 0, 0, 0.125);
}

.marc21-accordion .card-header button {
    padding: 12px 15px;
    color: #333;
    text-decoration: none;
    border: none;
    background: transparent;
    font-size: 1rem;
    font-weight: 500;
}

.marc21-accordion .card-header button:hover {
    background-color: #e9ecef;
}

.marc21-accordion .card-header button:focus {
    box-shadow: none;
    outline: 2px solid #007cba;
    outline-offset: -2px;
}

.marc21-accordion .card-header .badge {
    background-color: #007cba;
    color: #fff;
    padding: 4px 10px;
    border-radius: 12px;
    font-weight: normal;
    font-size: 0.85rem;
}

.marc21-accordion .card-header .icon-chevron-down {
    transition: transform 0.25s ease;
}

.marc21-accordion .card-header button[aria-expanded="true"] .icon-chevron-down {
    transform: rotate(180deg);
}

.marc21-accordion .card-body {
    padding: 0;
    background-color: #fff;
}

/* ============================================================
   Один запис
   ============================================================ */
.item {
    padding: 14px 18px;
    /*border-bottom: 1px solid #f0f0f0;*/
}

/*.item:last-child {
    border-bottom: none;
}*/

/*.item:hover {
    background-color: #fafbfc;
}*/

.marc21-field {
    margin-bottom: 4px;
    line-height: 1.5;
    font-size: 0.95rem;
}

.marc21-field:last-child {
    margin-bottom: 0;
}

.marc21-field-label {
    color: #555;
    font-weight: 600;
    margin-right: 4px;
}

.marc21-field-value {
    color: #222;
}

/* Поле author — виділяємо */
.marc21-field-author .marc21-field-value {
    font-weight: 600;
}

/* Поле title — трохи більше */
.marc21-field-title .marc21-field-value {
    font-size: 1rem;
}

.marc21-accordion th {
    width: 110px;
    color: #757575 !important;
}

/* ============================================================
   Підсвічування пошукових термінів
   ============================================================ */
.search-highlight {
    background-color: #ffe8a6;
    color: #414141;
    font-weight: bold;
    padding: 1px 3px;
    border-radius: 2px;
}

/* ============================================================
   Пагінація
   ============================================================ */
.marc21-pagination {
    display: flex;
    justify-content: flex-end;
}

.marc21-pagination .pagination {
    margin: 0;
    flex-wrap: wrap;
}

.marc21-pagination .page-link {
    color: #007cba;
    padding: 6px 12px;
}

.marc21-pagination .page-item.active .page-link {
    background-color: #007cba;
    border-color: #007cba;
    color: #fff;
}

/* ============================================================
   Форма limit внизу
   ============================================================ */
.marc21-limit-form {
    display: inline-block;
}

.marc21-limit-form .form-select {
    display: inline-block;
}

/* ============================================================
   Повідомлення
   ============================================================ */
#search-results .alert {
    border-radius: 4px;
    padding: 15px 20px;
}

#search-results .alert-warning h4 {
    color: #856404;
}

/* ============================================================
   Адаптивність
   ============================================================ */
@media (max-width: 768px) {
    #wrap_katalog {
        padding: 12px;
        margin-bottom: 20px;
    }

    .marc21-title .title-anim-2 {
        font-size: 2rem;
    }

    .marc21-fieldset {
        padding: 12px 14px;
    }

    .marc21-search-row .col-md-4,
    .marc21-search-row .col-md-8 {
        margin-bottom: 6px;
    }

    .form-actions .btn {
        width: 100%;
    }

    .marc21-pagination {
        justify-content: center;
        margin-top: 15px;
    }

    .item {
        padding: 10px 12px;
    }
}

/* ============================================================
   Захист від ботів: приховані поля
   ============================================================ */

/* Honeypot: невидиме для користувача поле */
.marc21-honeypot {
    position: absolute !important;
    left: -9999px !important;
    top: -9999px !important;
    width: 1px !important;
    height: 1px !important;
    opacity: 0 !important;
    pointer-events: none !important;
    tab-size: 0 !important;
    z-index: -1 !important;
}

/* Приховуємо мітку honeypot від скрін-рідерів */
.marc21-honeypot-label {
    position: absolute !important;
    left: -9999px !important;
    width: 1px !important;
    height: 1px !important;
    overflow: hidden !important;
}

/* Обертання стрілки при розкритті спойлера */
.icon-chevron-down {
    margin-left: 8px;
    display: inline-block;
    transition: transform 0.4s ease;
}

[aria-expanded="true"] .icon-chevron-down {
    transform: rotate(-180deg);
}

/* Вирівняти текст tooltip */
.tooltip-inner {
    text-align: left !important;
}

#wrap_katalog [class^="icon-"],
#wrap_katalog [class*=" icon-"],
#search-results [class^="icon-"],
#search-results [class*=" icon-"] {
    margin: 0 5px 0 0;
}

.icon-question-circle {
    margin: 2px -2px 1px 0 !important;
}