/* Arbitrage Manager v2.0 — Pagination Styles */

:root {
    --am-color: #7952b3;
    --am-prev-color: #bcbcbc;
    --am-radius: 6px;
    --am-font: 'Open Sans', Helvetica, Arial, sans-serif;
}

/* === Base container === */
.arbitragemanager-buttons {
    width: 100%;
    display: flex;
    gap: 5px;
    align-items: stretch;
    min-height: 70px;
    box-sizing: border-box;
}

/* ============================
   STYLE 1: Large button with >
   ============================ */
.arbitragemanager-button {
    padding: 14px 0;
    min-height: 70px;
    line-height: 40px;
    font-family: var(--am-font);
    font-weight: bold;
    font-size: 36px;
    color: #fff !important;
    background-color: var(--am-color);
    border-radius: var(--am-radius);
    text-decoration: none !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 8px 15px rgba(0, 0, 0, 0.1);
    transition: filter 0.2s ease;
    box-sizing: border-box;
}

.arbitragemanager-button:hover {
    filter: brightness(0.85);
}

.arbitragemanager-button-prev {
    background-color: var(--am-prev-color) !important;
    flex: 0.29;
}

.arbitragemanager-button-next {
    flex: 0.69;
}

/* Full width when only Next button is shown (next-only mode) */
.arbitragemanager-button-next.single {
    flex: 1;
}

/* Spacer to keep Next button aligned when no Prev */
.arbitragemanager-button-spacer {
    flex: 0.29;
}

.arbitragemanager-button .dashicons {
    font-size: 36px;
    width: auto;
    height: auto;
}

.arbitragemanager-button-next .dashicons {
    margin-left: 0.3rem;
}

.arbitragemanager-button-prev .dashicons {
    margin-right: 0.3rem;
}

@media (max-width: 640px) {
    .arbitragemanager-button,
    .arbitragemanager-button .dashicons {
        font-size: 22px !important;
    }
    .arbitragemanager-button {
        min-height: 56px;
    }
}

/* ============================
   STYLE 2: Arrow button
   ============================ */
.arbitragemanager-button-arrow {
    display: flex;
    padding: 0 20px;
    color: #fff !important;
    height: 70px;
    box-sizing: border-box;
    border-width: 0;
    align-items: center;
    justify-content: center;
    position: relative;
    border-radius: 0;
    font-size: 16px;
    line-height: 1;
    font-family: Poppins, Roboto, Arial, sans-serif;
    font-weight: 700;
    text-transform: uppercase;
    text-decoration: none !important;
    text-align: center;
    flex: 1;
    transition: filter 0.2s ease;
}

.arbitragemanager-button-arrow:hover {
    filter: brightness(0.85);
}

.arbitragemanager-button-arrow-prev {
    background-color: #e6e6e6;
    border-color: #e6e6e6;
    color: #000 !important;
    flex: 0.3;
    margin-left: 20px;
    border-radius: 0 8px 8px 0;
}

.arbitragemanager-button-arrow-next {
    flex: 0.4;
    margin-right: 20px;
    border-radius: 8px 0 0 8px;
}

.arbitragemanager-button-arrow-next.single {
    flex: 1;
    margin-left: 20px;
    border-radius: 8px;
}

/* no single override needed — spacer handles alignment */

/* Arrow tips */
.arbitragemanager-button-arrow-next::before {
    content: "";
    border-width: 35px 20px;
    display: block;
    width: 0;
    height: 2px;
    margin-left: -1px;
    position: absolute;
    left: 100%;
    top: 0;
    border-style: solid;
    border-color: inherit;
    border-top-color: transparent;
    border-right-color: transparent;
    border-bottom-color: transparent;
}

.arbitragemanager-button-arrow-prev::before {
    content: "";
    border-width: 35px 20px;
    display: block;
    width: 0;
    height: 2px;
    position: absolute;
    right: 100%;
    left: auto;
    top: 0;
    border-style: solid;
    border-color: transparent;
    border-right-color: #e6e6e6;
}

.arbitragemanager-arrow-pagination {
    flex: 0.3;
    text-align: center;
    font: 600 15px/70px Poppins, Roboto, sans-serif;
    color: #888;
}

@media (max-width: 640px) {
    .arbitragemanager-button-arrow {
        font-size: 14px;
        height: 56px;
        padding: 0 14px;
    }
    .arbitragemanager-button-arrow-next::before,
    .arbitragemanager-button-arrow-prev::before {
        border-width: 28px 16px;
    }
    .arbitragemanager-arrow-pagination {
        line-height: 56px;
        font-size: 13px;
    }
}

/* ============================
   STYLE 3: Chevron circle
   ============================ */
.am-btn-circle {
    text-decoration: none !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    cursor: pointer;
    transition: all 0.2s ease;
    font-family: inherit;
    font-weight: 700;
    box-sizing: border-box;
    line-height: 1;
    background: transparent;
    color: #333 !important;
    font-size: 18px;
    text-transform: uppercase;
    padding: 10px;
}

.am-btn-circle .am-icon-circle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: #eee;
    margin: 0 6px;
    transition: 0.2s;
    flex-shrink: 0;
}

.am-btn-circle.am-btn-next .am-icon-circle {
    background: var(--am-color);
    color: #fff;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
}

.am-btn-circle.am-btn-next:hover .am-icon-circle {
    transform: scale(1.1);
}

.am-btn-circle.am-btn-prev:hover .am-icon-circle {
    background: #e0e0e0;
}

.am-btn-circle.am-btn-prev .am-icon-circle {
    order: -1;
}

.am-btn-circle .dashicons {
    font-size: 22px;
    width: 22px;
    height: 22px;
    line-height: 22px;
}

.am-pagination-info {
    text-align: center;
    font-weight: bold;
    font-size: 16px;
    color: #555;
    flex-grow: 1;
    line-height: 52px;
}

/* ============================
   STYLE 4: Modern pill
   ============================ */
.am-btn-pill {
    text-decoration: none !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
    font-family: inherit;
    font-weight: 800;
    box-sizing: border-box;
    line-height: 1;
    border: 2px solid #ddd;
    border-radius: 50px;
    padding: 16px 36px;
    font-size: 17px;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: #888 !important;
    background: #fff;
}

.am-btn-pill.am-btn-next {
    border-color: var(--am-color);
    background: var(--am-color);
    color: #fff !important;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

.am-btn-pill:hover {
    filter: brightness(0.9);
    transform: translateY(-1px);
}

.am-btn-pill.am-btn-prev:hover {
    border-color: #ccc;
    background: #f8f8f8;
}

/* Spacer for styles 3 & 4 when no Prev button */
.am-btn-spacer {
    visibility: hidden;
    flex: 0 0 52px; /* matches circle/pill prev button width */
}

/* Flexbox for styles 3 & 4 */
.arbitragemanager-buttons:has(.am-btn-circle),
.arbitragemanager-buttons:has(.am-btn-pill) {
    display: flex;
    justify-content: center;
    align-items: center;
    height: auto;
    gap: 12px;
    min-height: auto;
    padding: 0 5px;
}

/* Mobile responsive for styles 3 & 4 */
@media (max-width: 600px) {
    .am-btn-text { display: none; }
    .am-btn-circle { padding: 4px; }
    .am-btn-circle .am-icon-circle { width: 44px; height: 44px; }
    .am-btn-pill { padding: 14px 22px; font-size: 15px; }
    .am-pagination-info { font-size: 14px; }
}

/* =====================================================
   PORT ADDITIONS (brakkus.com static port — not from the
   original plugin file above)
   ===================================================== */

/* Dashicons shim: the WP dashicons font is not shipped; provide the two
   arrow glyphs the style-1 pagination buttons use. */
.dashicons {
    display: inline-block;
    font-style: normal;
    line-height: 1;
}
.dashicons-arrow-right-alt2::before { content: "\203A"; }
.dashicons-arrow-left-alt2::before { content: "\2039"; }

/* Ad placeholder boxes: rendered wherever a network code is still unset in
   src/config/ads.ts. Same wrapper classes/positions as the real units. */
.am-ad-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 250px;
    width: 100%;
    box-sizing: border-box;
    padding: 12px;
    border: 2px dashed #b9b9b9;
    background: repeating-linear-gradient(45deg, #fafafa, #fafafa 12px, #f1f1f1 12px, #f1f1f1 24px);
    color: #8a8a8a;
    font: 600 11px/1.5 -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    text-align: center;
}
.am-ad-placeholder--sidebar { min-height: 600px; }

/* AM "Advertisements" label (emitted inline by the WP plugin; static here). */
body.am-ad-labels .am-ad-slot::before,
body.am-ad-labels .am-auto-ad::before,
body.am-ad-labels .am-widget-ad::before {
    content: "Advertisements";
}