/* Page Chain Navigator — Frontend Bar */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap');

.pcn-bar {
    display: flex;
    align-items: stretch;
    background: #111;
    color: #fff;
    font-family: 'Inter', -apple-system, sans-serif;
    font-size: 13px;
    line-height: 1;
    width: 100%;
    position: relative;
    z-index: 9999;
    box-shadow: 0 1px 6px rgba(0,0,0,.15);
    min-height: 48px;
}

/* Position variants */
.pcn-bar--top    { /* rendered in wp_head, sits above theme content */ }
.pcn-bar--bottom { margin-top: 0; }

/* ── ARROWS ──────────────────────────────────────────────────────────────── */
.pcn-arrow {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 18px;
    text-decoration: none;
    color: #fff;
    transition: background .15s;
    min-width: 0;
    max-width: 240px;
    overflow: hidden;
    flex-shrink: 0;
}

.pcn-arrow:hover {
    background: rgba(255,255,255,.08);
    color: #fff;
    text-decoration: none;
}

.pcn-arrow--disabled {
    opacity: .25;
    pointer-events: none;
}

.pcn-arrow-icon {
    font-size: 18px;
    font-weight: 400;
    flex-shrink: 0;
    line-height: 1;
}

.pcn-arrow-label {
    font-size: 12px;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: rgba(255,255,255,.7);
}

.pcn-arrow--prev .pcn-arrow-label { text-align: left; }
.pcn-arrow--next .pcn-arrow-label { text-align: right; }

/* ── CENTER ──────────────────────────────────────────────────────────────── */
.pcn-center {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 10px 16px;
    border-left: 1px solid rgba(255,255,255,.1);
    border-right: 1px solid rgba(255,255,255,.1);
    min-width: 0;
}

.pcn-chain-label {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .5px;
    color: rgba(255,255,255,.9);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 200px;
}

/* ── DOTS ─────────────────────────────────────────────────────────────────── */
.pcn-progress {
    display: flex;
    align-items: center;
    gap: 5px;
    flex-shrink: 0;
}

.pcn-dot {
    display: block;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: rgba(255,255,255,.25);
    transition: background .15s, transform .15s;
    cursor: default;
    text-decoration: none;
}

a.pcn-dot {
    cursor: pointer;
}

a.pcn-dot:hover {
    background: rgba(255,255,255,.6);
    transform: scale(1.3);
}

.pcn-dot--active {
    background: #fff;
    transform: scale(1.2);
}

/* ── COUNTER ──────────────────────────────────────────────────────────────── */
.pcn-counter {
    font-size: 11px;
    color: rgba(255,255,255,.4);
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

/* ── RESPONSIVE ──────────────────────────────────────────────────────────── */
@media (max-width: 600px) {
    .pcn-arrow-label { display: none; }
    .pcn-chain-label { max-width: 120px; }
    .pcn-arrow { padding: 12px 14px; }
    .pcn-counter { display: none; }
}