@font-face {
    font-family: Bodoni;
    src: url('../Fonts/test.ttf');
}

@font-face {
    font-family: Garet;
    src: url('../Fonts/Garet-Book.ttf');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: Garet;
    src: url('../Fonts/Garet-Heavy.ttf');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: Poppins;
    src: url('../Fonts/Poppins-Regular.ttf');
    font-weight: 600;
}

@font-face {
    font-family: Poppins;
    src: url('../Fonts/Poppins-Bold.ttf');
    font-weight: 900;
}

:root {
    --font-prim: Bodoni;
    --font-secondary: Poppins;

    --color-bg-prim: #f8f1e9;
    --color-bg-secondary: #3a1f10;
    --color-dark: #211815
}






/* ---------- Bootstrap pagination variables scoped to .pagination ---------- */
.pagination {
    /* color tokens */
    --bs-pagination-color: var(--color-bg-secondary);
    --bs-pagination-bg: var(--color-bg-prim);
    --bs-pagination-border-color: rgba(58, 31, 16, 0.12);
    --bs-pagination-hover-color: var(--color-bg-prim);
    --bs-pagination-hover-bg: rgba(58, 31, 16, 0.4);
    --bs-pagination-hover-border-color: rgba(58, 31, 16, 0.14);
    --bs-pagination-active-color: var(--color-bg-prim);
    --bs-pagination-active-bg: var(--color-bg-secondary);
    --bs-pagination-active-border-color: var(--color-bg-secondary);
    --bs-pagination-disabled-color: rgba(0, 0, 0, 0.35);
    --bs-pagination-disabled-bg: var(--color-bg-prim);
    --bs-pagination-disabled-border-color: rgba(0, 0, 0, 0.06);
    --bs-pagination-border-radius: 0rem;
}

/* make sure Bootstrap uses these vars visually */
.pagination .page-link {
    color: var(--bs-pagination-color);
    background-color: var(--bs-pagination-bg);
    border: 1px solid var(--bs-pagination-border-color);
    border-radius: var(--bs-pagination-border-radius);
}

.pagination .page-link:hover {
    color: var(--bs-pagination-hover-color);
    background-color: var(--bs-pagination-hover-bg);
    border-color: var(--bs-pagination-hover-border-color);
}

.pagination .page-item.active .page-link {
    color: var(--bs-pagination-active-color);
    background-color: var(--bs-pagination-active-bg);
    border-color: var(--bs-pagination-active-border-color);
}

.pagination .page-link:disabled,
.pagination .page-item.disabled .page-link {
    color: var(--bs-pagination-disabled-color);
    background-color: var(--bs-pagination-disabled-bg);
    border-color: var(--bs-pagination-disabled-border-color);
}

/* ---------- Override for custom pager (.pager-wrap .page-btn) ---------- */
/* keeps same look as Bootstrap pagination but avoids collisions */
.pager-wrap .page-btn {
    background: var(--bs-pagination-bg);
    color: var(--bs-pagination-color);
    border: 1px solid var(--bs-pagination-border-color);
    padding: 6px 10px;
    border-radius: var(--bs-pagination-border-radius);
    cursor: pointer;
    font-size: 0.95rem;
}

.pager-wrap .page-btn:hover:not([disabled]) {
    background: var(--bs-pagination-hover-bg);
    color: var(--bs-pagination-hover-color);
    border-color: var(--bs-pagination-hover-border-color);
}

.pager-wrap .page-btn.active {
    background: var(--bs-pagination-active-bg);
    color: var(--bs-pagination-active-color);
    border-color: var(--bs-pagination-active-border-color);
}

.pager-wrap .page-btn[disabled] {
    color: var(--bs-pagination-disabled-color);
    background: var(--bs-pagination-disabled-bg);
    border-color: var(--bs-pagination-disabled-border-color);
    opacity: 1;
    /* keep visual disabled style but not fully faded */
}

/* small extra: pager text status uses dark theme color */
.pager-status {
    color: var(--color-bg-secondary);
    font-size: .95rem;
}