/* =====================================================
   BRICS ARTIST DIRECTORY
   ===================================================== */

.directory-banner {
    min-height: 260px;

    background:
        linear-gradient(
            110deg,
            #fff5e8,
            #f8eee5 55%,
            #eee6f2
        );

    border-bottom: 1px solid #eadfd1;

    display: flex;
    align-items: center;
}


.breadcrumb {
    display: flex;
    gap: 10px;

    font-size: 11px;

    color: #777;

    margin-bottom: 25px;
}


.breadcrumb a {
    color: #172c52;

    font-weight: 600;
}


.directory-label {
    color: #d66d18;

    font-size: 12px;

    font-weight: 700;

    letter-spacing: 2px;
}


.directory-title h1 {

    font-family:
        "Playfair Display",
        Georgia,
        serif;

    color: #172c52;

    font-size: 46px;

    margin: 8px 0;
}


.directory-title p {

    color: #656b76;

    font-size: 15px;

    max-width: 650px;
}


/* =====================================================
   MAIN
   ===================================================== */

.directory-main {

    background: #fffaf2;

    padding: 35px 0 60px;
}


/* =====================================================
   FILTER PANEL
   ===================================================== */

.filter-panel {

    background: #ffffff;

    border: 1px solid #eadfd1;

    border-radius: 10px;

    padding: 25px;

    box-shadow:
        0 8px 25px
        rgba(23,44,82,.06);
}


.filter-heading {

    display: flex;

    align-items: center;

    justify-content: space-between;

    margin-bottom: 22px;
}


.filter-heading > div:first-child span {

    color: #d66d18;

    font-size: 10px;

    font-weight: 700;

    letter-spacing: 1.5px;
}


.filter-heading h2 {

    font-family:
        "Playfair Display",
        Georgia,
        serif;

    font-size: 23px;

    color: #172c52;

    margin: 5px 0 0;
}


.artist-total {

    text-align: right;
}


.artist-total strong {

    display: block;

    color: #172c52;

    font-size: 25px;
}


.artist-total small {

    color: #777;

    font-size: 10px;
}


/* =====================================================
   FILTERS
   ===================================================== */

.filters {

    display: grid;

    grid-template-columns:
        1.4fr
        1fr
        1fr
        1fr
        auto;

    gap: 14px;

    align-items: end;
}


.filter-field label {

    display: block;

    color: #344056;

    font-size: 11px;

    font-weight: 700;

    margin-bottom: 7px;
}


.filter-field input,
.filter-field select {

    width: 100%;

    height: 43px;

    border: 1px solid #d9d5ce;

    border-radius: 6px;

    padding: 0 12px;

    background: #fff;

    color: #27334a;

    font-family: inherit;

    font-size: 12px;

    outline: none;
}


.filter-field input:focus,
.filter-field select:focus {

    border-color: #e8781a;

    box-shadow:
        0 0 0 3px
        rgba(232,120,26,.10);
}


.input-wrapper {

    position: relative;
}


.input-wrapper span {

    position: absolute;

    left: 12px;

    top: 11px;

    color: #777;

    font-size: 17px;
}


.input-wrapper input {

    padding-left: 35px;
}


.filter-buttons {

    display: flex;

    gap: 7px;
}


.apply-btn {

    height: 43px;

    padding: 0 18px;

    border: 0;

    border-radius: 6px;

    background: #172c52;

    color: #fff;

    font-family: inherit;

    font-size: 11px;

    font-weight: 700;

    cursor: pointer;
}


.apply-btn:hover {

    background: #e8781a;
}


.reset-btn {

    height: 43px;

    padding: 0 15px;

    border: 1px solid #cfcac2;

    border-radius: 6px;

    background: #fff;

    color: #172c52;

    font-family: inherit;

    font-size: 11px;

    cursor: pointer;
}


/* =====================================================
   RESULTS HEADER
   ===================================================== */

.results-header {

    display: flex;

    justify-content: space-between;

    align-items: center;

    margin: 30px 0 14px;
}


.results-header h2 {

    font-family:
        "Playfair Display",
        Georgia,
        serif;

    color: #172c52;

    font-size: 24px;

    margin: 0 0 4px;
}


.results-header p {

    margin: 0;

    color: #777;

    font-size: 11px;
}


.export-buttons {

    display: flex;

    gap: 9px;
}


.export-btn {

    height: 38px;

    padding: 0 15px;

    border: 1px solid #c9c4bb;

    background: #fff;

    border-radius: 6px;

    color: #172c52;

    font-family: inherit;

    font-size: 11px;

    font-weight: 600;

    cursor: pointer;
}


.export-btn:hover {

    border-color: #172c52;

    background: #f8f5ef;
}


.export-btn.pdf {

    background: #172c52;

    border-color: #172c52;

    color: #fff;
}


.export-btn.pdf:hover {

    background: #e8781a;

    border-color: #e8781a;
}


/* =====================================================
   TABLE
   ===================================================== */

.artist-table-wrapper {

    background: #fff;

    border: 1px solid #e6dfd5;

    border-radius: 9px;

    overflow-x: auto;

    box-shadow:
        0 6px 22px
        rgba(23,44,82,.05);
}


.artist-table {

    width: 100%;

    border-collapse: collapse;

    min-width: 950px;
}


.artist-table thead {

    background: #f5eee4;
}


.artist-table th {

    padding: 14px 15px;

    text-align: left;

    color: #27334a;

    font-size: 12px;

    font-weight: 700;

    text-transform: uppercase;

    letter-spacing: .04em;

    white-space: nowrap;
}


.artist-table td {

    padding: 13px 15px;

    border-top: 1px solid #eee9e2;

    color: #485064;

    font-size: 11px;

    vertical-align: middle;
}


.artist-table tbody tr {

    transition:
        background .2s ease;
}


.artist-table tbody tr:hover {

    background: #fffaf2;
}


/* =====================================================
   ARTIST CELL
   ===================================================== */

.artist-cell {

    display: flex;

    align-items: center;

    gap: 10px;
}


.artist-avatar {

    width: 38px;

    height: 38px;

    flex: 0 0 38px;

    border-radius: 50%;

    display: grid;

    place-items: center;

    color: #fff;

    font-size: 10px;

    font-weight: 700;

    background:
        linear-gradient(
            135deg,
            #d9782c,
            #28385d
        );
}


.avatar-2 {
    background:
        linear-gradient(
            135deg,
            #674b76,
            #d6984d
        );
}


.avatar-3 {
    background:
        linear-gradient(
            135deg,
            #28556b,
            #bb6837
        );
}


.avatar-4 {
    background:
        linear-gradient(
            135deg,
            #234c45,
            #cf7b38
        );
}


.avatar-5 {
    background:
        linear-gradient(
            135deg,
            #543d65,
            #df9847
        );
}


.avatar-6 {
    background:
        linear-gradient(
            135deg,
            #b86835,
            #315c6d
        );
}


.avatar-7 {
    background:
        linear-gradient(
            135deg,
            #1d3d67,
            #ca7636
        );
}


.avatar-8 {
    background:
        linear-gradient(
            135deg,
            #6d3d5c,
            #d49c4e
        );
}


.avatar-9 {
    background:
        linear-gradient(
            135deg,
            #356253,
            #bd6b39
        );
}


.avatar-10 {
    background:
        linear-gradient(
            135deg,
            #303b69,
            #d07a37
        );
}


.artist-cell strong {

    display: block;

    color: #172c52;

    font-size: 12px;
}


.artist-cell small {

    display: block;

    color: #888;

    font-size: 11px;

    margin-top: 3px;
}


.view-profile {

    color: #d66d18;

    font-size: 12px;

    font-weight: 700;

    white-space: nowrap;
}


.view-profile:hover {

    color: #172c52;
}


/* =====================================================
   PAGINATION
   ===================================================== */

.pagination {

    display: flex;

    justify-content: center;

    align-items: center;

    gap: 6px;

    margin-top: 25px;
}


.page,
.page-arrow {

    width: 35px;

    height: 35px;

    border: 1px solid #d9d4cb;

    background: #fff;

    border-radius: 5px;

    color: #172c52;

    font-family: inherit;

    font-size: 11px;

    cursor: pointer;
}


.page:hover,
.page-arrow:hover {

    border-color: #e8781a;

    color: #e8781a;
}


.page.active {

    background: #172c52;

    border-color: #172c52;

    color: #fff;
}


.dots {

    color: #777;

    padding: 0 4px;

    font-size: 12px;
}


.records-info {

    text-align: center;

    color: #000000;

    font-size: 12px;

    margin-top: 12px;
}


/* =====================================================
   FOOTER
   ===================================================== */

.directory-main + footer {

    margin-top: 0;
}


/* =====================================================
   PRINT / PDF
   ===================================================== */

@media print {

    header,
    .directory-banner,
    .filter-panel,
    .export-buttons,
    .pagination,
    .records-info,
    footer {

        display: none !important;
    }


    .directory-main {

        padding: 0;

        background: #fff;
    }


    .artist-table-wrapper {

        border: 0;

        box-shadow: none;
    }


    .artist-table {

        min-width: 100%;
    }

}


/* =====================================================
   RESPONSIVE
   ===================================================== */

@media(max-width:1050px) {

    .filters {

        grid-template-columns:
            1fr
            1fr
            1fr;

    }


    .filter-buttons {

        grid-column: 1 / -1;

    }

}


@media(max-width:700px) {

    .directory-title h1 {

        font-size: 36px;
    }


    .filter-heading {

        align-items: flex-start;

        gap: 15px;

    }


    .artist-total {

        display: none;
    }


    .filters {

        grid-template-columns: 1fr;
    }


    .filter-buttons {

        grid-column: auto;
    }


    .results-header {

        align-items: flex-start;

        gap: 15px;

        flex-direction: column;
    }


    .export-buttons {

        width: 100%;
    }


    .export-btn {

        flex: 1;
    }

}