/* ── Page Header ──────────────────────────────── */
.page-header {
    background: #d4f8e0;
    border-bottom: 1px solid #2ecc71;
    padding: 2rem 0 1.75rem;
}

.page-header .container {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.page-header .entry-title {
    font-size: 1.6rem;
    font-weight: 700;
    letter-spacing: 0.5px;
    color: #0a4a1f;
    margin: 0;
    text-transform: uppercase;
}

.page-header p {
    font-size: 0.9rem;
    font-weight: 500;
    color: #0a4a1f;
    margin: 0;
    opacity: 0.8;
}

.page-header p strong {
    font-weight: 700;
    color: #0a4a1f;
}


/* ── Site Content wrapper ─────────────────────── */
#content.site-content {
    padding: 0;
    background: #f8f8f5;
}

#content-inside.container {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 24px;
}

#content-inside.left-sidebar {
    display: flex;
    flex-direction: column;
}


/* ── #secondary — Filter bar (order 1, above primary) ── */
#secondary.widget-area.sidebar {
    order: 1;
    width: 100%;
    background: #fff;
    border: 1px solid rgba(0,0,0,0.08);
    border-radius: 0 0 10px 10px;
    padding: 0;
    box-shadow: 0 2px 8px rgba(7,74,140,0.05);
    margin-top: 24px;
}

/* Filter toggle button */
#show-hide-filter {
    display: block;
    width: 100%;
    font-family: Montserrat, Arial, sans-serif;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    background: #E6F1FB;
    color: #074a8c;
    border: none;
    border-bottom: 1px solid #B5D4F4;
    padding: 12px 20px;
    cursor: pointer;
    text-align: left;
    border-radius: 10px 10px 0 0;
    transition: background 0.15s;
}

#show-hide-filter:hover {
    background: #B5D4F4;
}

/* Filter form */
.filter-coins-form {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    padding: 16px 20px;
}

.filter-coins-form .search-field {
    font-family: Montserrat, Arial, sans-serif;
    font-size: 14px;
    font-weight: 500;
    color: #052f59;
    background: #fff;
    border: 1.5px solid #B5D4F4;
    border-radius: 8px;
    padding: 9px 14px;
    height: 40px;
    outline: none;
    transition: border-color 0.15s;
    flex: 1 1 160px;
    min-width: 120px;
    max-width: 220px;
    box-sizing: border-box;
}

.filter-coins-form .search-field:focus {
    border-color: #074a8c;
}

.filter-coins-form .search-field::placeholder {
    color: #aaa;
    font-style: italic;
}

/* Custom country select */
.coins-custom-select {
    position: relative;
    flex: 1 1 180px;
    min-width: 140px;
    max-width: 240px;
    height: 40px;
    user-select: none;
}

.coins-select-selected {
    display: flex;
    align-items: center;
    height: 40px;
    padding: 0 36px 0 14px;
    background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23074a8c' stroke-width='2.5'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") no-repeat right 12px center;
    border: 1.5px solid #B5D4F4;
    border-radius: 8px;
    font-family: Montserrat, Arial, sans-serif;
    font-size: 14px;
    font-weight: 500;
    color: #052f59;
    cursor: pointer;
    transition: border-color 0.15s;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.coins-select-selected:hover,
.coins-select-selected:focus {
    border-color: #074a8c;
    outline: none;
}

.coins-select-items {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    background: #fff;
    border: 1.5px solid #074a8c;
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(7,74,140,0.12);
    max-height: 260px;
    overflow-y: auto;
    z-index: 300;
}

.coins-select-items div {
    padding: 9px 14px;
    font-size: 13px;
    font-weight: 500;
    color: #333;
    cursor: pointer;
    border-bottom: 0.5px solid rgba(0,0,0,0.05);
    transition: background 0.1s;
}

.coins-select-items div:last-child {
    border-bottom: none;
}

.coins-select-items div:hover {
    background: #E6F1FB;
    color: #074a8c;
}

.coins-select-hide {
    display: none !important;
}

/* Filter action buttons */
#submit-coins-filter,
#reset-coins-filter {
    font-family: Montserrat, Arial, sans-serif;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    height: 40px;
    padding: 0 20px;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.15s;
    flex-shrink: 0;
}

#submit-coins-filter {
    background: #074a8c;
    color: #fff;
}

#submit-coins-filter:hover {
    background: #052f59;
}

#reset-coins-filter {
    background: #E6F1FB;
    color: #074a8c;
    border: 1.5px solid #B5D4F4;
}

#reset-coins-filter:hover {
    background: #B5D4F4;
}


/* ── #primary — Coins list (order 2, below secondary) ── */
#primary.content-area {
    order: 2;
    width: 100%;
    padding: 28px 0 48px;
}

#main.site-main {
    width: 100%;
}

/* Section heading */
#coins-container > h2 {
    font-size: 0.9rem !important;
    font-weight: 700;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    color: #0C447C;
    margin-bottom: 20px;
    padding-bottom: 12px;
    border-bottom: 2px solid #E6F1FB;
}

/* Loading spinner */
.coins-lds-dual-ring {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 60px 0;
}

.coins-lds-dual-ring::after {
    content: '';
    display: block;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 4px solid transparent;
    border-top-color: #074a8c;
    border-bottom-color: #074a8c;
    animation: coins-spin 0.85s linear infinite;
}

@keyframes coins-spin {
    to { transform: rotate(360deg); }
}


/* ── Coin card ──────────────────────────────────── */
.list-article.clearfix {
    display: flex;
    flex-direction: column;
    align-items: center;
    background: none;
    border: none;
    border-radius: 0;
    padding: 24px 0;
    margin-bottom: 0;
    border-bottom: 1px solid rgba(0,0,0,0.07);
}

.list-article.clearfix:last-child {
    border-bottom: none;
}

/* Content (text) — above image */
.list-article-content {
    width: 100%;
    text-align: center;
    margin-bottom: 16px;
}

.list-article-content .entry-header {
    margin: 0;
}

.list-article-content .entry-title {
    font-size: 1.7rem;
    font-weight: 700;
    color: #1a1a1a;
    margin: 20px 0 8px 0;
}

.list-article-meta {
    display: flex;
    flex-direction: column;
    gap: 3px;
    align-items: center;
}

.coin-years {
    font-size: 1rem;
    color: #666;
    margin: 0;
    line-height: 1.5;
}

.coin-years strong {
    color: #33843E;
    font-weight: 600;
}

.coin-type {
    display: inline-block;
    width: fit-content;
    font-size: 11px;
    font-weight: 600;
    color: #074a8c;
    background: #E6F1FB;
    border: 1px solid #B5D4F4;
    border-radius: 999px;
    padding: 2px 10px;
    margin-bottom: 6px;
}

/* Photo — full width, centered */
.list-article-thumb {
    width: 100%;
    display: flex;
    justify-content: center;
}

.list-article-thumb .coin-photo {
    width: 100%;
    height: auto;
    object-fit: contain;
    display: block;
    border-radius: 0;
    background: none;
    padding: 0;
    max-width: 800px;
}

/* Hide view button */
a.award-details-link {
    display: none;
}

/* Admin links */
.admin-coin-links {
    font-size: 11px;
    color: #bbb;
    margin-top: 10px;
    text-align: center;
}

.admin-coin-links a {
    color: #aaa;
}


/* ══════════════════════════════════════
   RESPONSIVE
══════════════════════════════════════ */

/* Tablet: ≤768px */
@media (max-width: 768px) {
    .page-header {
        padding: 1.5rem 0 1.25rem;
    }

    .page-header .entry-title {
        font-size: 1.25rem;
    }

    #content-inside.container {
        padding: 0 16px;
    }

    .filter-coins-form {
        padding: 12px 16px;
        gap: 8px;
    }

    .filter-coins-form .search-field {
        flex: 1 1 120px;
        max-width: 100%;
    }

    .coins-custom-select {
        flex: 1 1 140px;
        max-width: 100%;
    }

    .list-article-content .entry-title {
        font-size: 1.3rem;
    }

    .coin-years {
        font-size: 11.5px;
    }
}

/* Mobile: ≤480px */
@media (max-width: 480px) {

    /* Stack filter fields vertically */
    .filter-coins-form {
        flex-direction: column;
        align-items: stretch;
    }

    .filter-coins-form .search-field,
    .coins-custom-select,
    #submit-coins-filter,
    #reset-coins-filter {
        max-width: 100%;
        width: 100%;
        flex: none;
    }

    #submit-coins-filter,
    #reset-coins-filter {
        justify-content: center;
    }

    .admin-coin-links {
        text-align: center;
    }
}

.coin-big-desc * {
    font-size: .9rem;
    text-align: center;
}

.coin-big-desc ul li::marker {
    content: none;
}