/*
 * Nadmetanja listing – [output-briefing-data-search].
 */

/*
 * Fallbacks for rules that also exist in the child theme, scoped to the listing so the widget
 * keeps working on its own. Values match the theme; nothing here changes the current look.
 */
.briefing-search-wrap {
    --briefing-grey: #45464c;
    --briefing-grey-hover: #383E42;
}

.briefing-search-wrap.flex,
.briefing-search-wrap .flex {
    display: flex;
}

.briefing-search-wrap .briefing-button {
    transition: 250ms;
    border-radius: 2px;
    cursor: pointer;
    color: #fff;
    font-weight: 500;
    background: var(--e-global-color-primary, var(--briefing-grey));
}

.briefing-search-wrap .briefing-button.dark {
    background: var(--briefing-grey);
}

.briefing-search-wrap .briefing-button:hover {
    background: var(--briefing-grey-hover);
}

.skeleton-wrap .date {
    height: 32px;
    width: 100%;
    max-width: 120px;
}

.skeleton-wrap .country {
    height: 32px;
    width: 100%;
    max-width: 80px;
}

.skeleton-wrap .company {
    height: 32px;
    width: 100%;
}

.skeleton-wrap .name {
    height: 32px;
    width: 100%;
}

.skeleton-wrap .action {
    height: 32px;
    width: 100%;
    max-width: 80px;
}

.briefing-search-content {
    flex-direction: column;
    gap: 8px;
}

.briefing-search-header {
    gap: 8px;
}

.bwt-single-filter.briefing-button.active {
    background: var(--e-global-color-accent);
}

.bwt-single-filter.briefing-button {
    padding: 8px 16px;
}

.briefing-search-wrap {
    flex-direction: column;
    gap: 12px;
}

.skeleton-loader.page {
    height: 28px;
    width: 28px;
}

.skeleton-wrap.pagination {
    max-width: 50%;
    width: 100%;
    gap: 12px;
}

.skeleton-wrap.flex>div {
    flex: 1;
}

/* Skeleton base class */
.skeleton-loader {
    position: relative;
    overflow: hidden;
    background-color: #f4f4f4;
    border-radius: 2px;
}

.single-briefing-search-item {
    gap: 8px;
    padding: 4px 8px;
    align-items: center;
}

.briefing-search-content .single-briefing-search-item:nth-child(2n) {
    background: #f3f3f3;
}

.single-briefing-search-item .briefing-button {
    margin-left: auto;
    height: 100%;
    padding: 4px 16px;
}

.single-briefing-search-item .single-data.company {
    max-width: 350px;
    width: 100%;
}

.single-briefing-search-item .single-data.date {
    max-width: 100px;
}

.briefing-search-footer .pagination {
    width: max-content;
    margin: auto;
    gap: 8px;
}

.briefing-search-footer .pagination .single-page {
    text-align: center;
    background: var(--briefing-grey, #45464c);
    color: #fff;
    height: 32px;
    width: 32px;
    line-height: 32px;
    border-radius: 2px;
    cursor: pointer;
    transition: 250ms;
}

.briefing-search-footer .pagination .single-page.active {
    background: var(--e-global-color-accent);
}

.briefing-search-footer .pagination .single-page:hover {
    background: var(--e-global-color-accent);
}

/* Shimmer effect */
.skeleton-loader::after {
    content: "";
    position: absolute;
    inset: 0;
    transform: translateX(-100%);
    background: linear-gradient(90deg,
            rgba(255, 255, 255, 0) 0%,
            rgba(255, 255, 255, 0.7) 50%,
            rgba(255, 255, 255, 0) 100%);
    animation: skeleton-shimmer 1.4s ease-in-out infinite;
}

.single-briefing-search-item .company-data {
    max-width: 350px;
}

.single-briefing-search-item>div {
    flex: 1;
}

.single-briefing-search-item .basic-data {
    gap: 12px;
    max-width: max-content;
}

.single-briefing-search-item .additional-data {
    gap: 12px;
}

.briefing-search-content .skeleton-wrap .basic-data,
.briefing-search-content .skeleton-wrap .additional-data {
    gap: 12px;
}

.briefing-search-content .skeleton-wrap .basic-data .country {
    max-width: unset;
}

.briefing-search-error {
    margin: 0;
    padding: 8px;
}

@keyframes skeleton-shimmer {
    100% {
        transform: translateX(100%);
    }
}

@media (max-width:768px) {

    .briefing-search-header {
        overflow: auto;
        padding-bottom: 10px;
    }

    .single-briefing-search-item .basic-data,
    .single-briefing-search-item .company-data {
        max-width: unset;
    }

    .single-briefing-search-item {
        flex-direction: column;
    }

    .single-briefing-search-item .basic-data {
        width: 100%;
        flex-direction: row;
        justify-content: space-around;
    }

    .briefing-search-content .skeleton-wrap {
        flex-direction: column;
    }

    .single-briefing-search-item .basic-data>span {
        flex: 1;
        max-width: unset;
    }

    .single-briefing-search-item .company-data {
        width: 100%;
    }

    .single-briefing-search-item .company-data>span {
        max-width: unset !important;
    }

    .single-briefing-search-item .basic-data>span.date,
    .single-briefing-search-item .basic-data>span.country {
        font-weight: bold;
    }

    .single-briefing-search-item .additional-data {
        align-items: flex-end;
        width: 100%;
    }

    .briefing-search-header>span {
        white-space: nowrap;
    }
}

/* Tender name links to its single natječaj page when one is published. */
.single-briefing-search-item a.single-data.name { color: inherit; text-decoration: none; }
.single-briefing-search-item a.single-data.name:hover { text-decoration: underline; }