:root {
    --back: #333;
    --lightblue: #2196F3;
    --lightbluehover: #1b7dcb;
}

.maxcontainer {
    max-width: 1200px;
    margin: 0 auto;
    margin-top: 40px;
}

body {
    font-family: 'Open Sans', "Helvetica Neue", Helvetica, Arial, sans-serif;
    background: var(--back);
}

/*
    background: #c850c0;
    background: -webkit-linear-gradient(45deg, #4158d0, #c850c0);
    background: -o-linear-gradient(45deg, #4158d0, #c850c0);
    background: -moz-linear-gradient(45deg, #4158d0, #c850c0);
    background: linear-gradient(45deg, #4158d0, #c850c0);height: 100%;
*/

.contable {
    border-bottom: solid 1px #666;
    margin-bottom: 140px;
    background: white;
    border-radius: 6px;
    overflow: hidden;
}

/* Breathing room inside the white card after the last row (Zimbabwe), so the
   row never sits flush against the card's bottom edge. Table elements don't
   respect plain padding consistently across browsers, so we put the buffer on
   the last row's cells AND on the wrapping table itself with !important. */
.contable tbody tr:last-child td {
    padding-bottom: 64px !important;
    border-bottom: none !important;
}
.contable { padding-bottom: 24px !important; }

.contable tr td {
    color: #444;
    height: 66px;
}

.contable tr td a {
    text-decoration: none;
}

.contable tr th a {
    color: #fff;
    font-size: 3em;
}

.contable tr th {
    font-weight: 400;
}

.contable tr th,
.contable tr td {
    padding: 0px 10px;
}

/* Bootstrap 5.3 introduced --bs-table-bg / --bs-table-color CSS vars that win
   over the old `background:` rule, so we set them explicitly here too. */
.contable .conhead,
.contable .conhead th {
    background-color: var(--back) !important;
    --bs-table-bg: var(--back);
    --bs-table-color: #fff;
    color: #fff !important;
    font-size: 18px;
    font-weight: 400;
}

/* row backgrounds */
td {
    border-color: #ddd;
}

/*.contable tr.odd {background: #ffffff;}*/
.contable .countryrows:hover {
    color: #555555;
    background-color: #eee;
    cursor: pointer;
}

/* Transparent variant — used on the homepage where the button row should sit
   directly on the dark page background instead of a light card. */
.area-filters--bare {
    background: transparent !important;
    padding: 14px 0 0 0 !important;         /* more room above, none below — flush against search */
    margin-bottom: 6px !important;
    box-shadow: none !important;
}

/* Filter-modal pill chips (continent + region). The "Show All" pill is the
   default-active state — when neither ?continent nor ?region is present, the
   PHP renders pill-active on it. */
/* "(since YYYY)" parts inside the head_of_country column render in grey
   so the leader name stays the focal point. */
.column_head .since { color: #6b7280; font-weight: 400; font-size: .9em; }

/* Head-of-Country card on the country detail page */
.head-of-country-card {
    max-width: 720px;
    background: #fff;
    border-radius: 10px;
    padding: 12px 18px;
    text-align: center;
    box-shadow: 0 1px 2px rgba(0,0,0,.06);
}
.head-of-country-card .hoc-label {
    text-transform: uppercase; letter-spacing: .06em;
    font-size: 11px; color: #6b7280; margin-bottom: 2px;
}
.head-of-country-card .hoc-value {
    font-weight: 600; color: #111; line-height: 1.4;
}
.head-of-country-card .hoc-since {
    color: #6b7280; font-weight: 400; font-size: .9em;
}

.pill {
    display: inline-flex;
    align-items: center;
    padding: 6px 14px;
    border-radius: 999px;
    background: #e2e8f0;                   /* slate-200 */
    color: #1e293b;                        /* slate-800 */
    font-weight: 500;
    font-size: .92rem;
    line-height: 1.2;
    text-decoration: none !important;
    border: 1px solid transparent;
    transition: background-color .15s ease, color .15s ease, transform .08s ease, border-color .15s ease;
}
.pill:hover {
    background: #cbd5e1;                   /* slate-300 */
    color: #0f172a;
    transform: translateY(-1px);
}
.pill-active {
    background: #1d4ed8;                   /* blue-700 — matches Filter/Columns buttons */
    color: #fff !important;
    border-color: #1e40af;
    box-shadow: 0 1px 2px rgba(29,78,216,.25);
}
.pill-active:hover {
    background: #1e40af;
    color: #fff !important;
}

/* Filter / Columns — darker, solid blue chip so they read clearly on the dark
   page background. */
.btn-dark-blue {
    background-color: #1d4ed8;              /* blue-700 */
    color: #fff !important;
    border: 1px solid #1e40af;
}
.btn-dark-blue:hover  { background-color: #1e40af; color: #fff !important; border-color: #1e3a8a; }
.btn-dark-blue:focus  { box-shadow: 0 0 0 .2rem rgba(29, 78, 216, .35); }

/* Reset — a touch darker than .btn-light, still readable on dark backdrop. */
.btn-soft {
    background-color: #cbd5e1;              /* slate-300 */
    color: #1e293b !important;
    border: 1px solid #94a3b8;
}
.btn-soft:hover { background-color: #94a3b8; color: #0f172a !important; border-color: #64748b; }

.area-filters {
    background: #f5f5f5;
    border-radius: 4px;
    margin-bottom: 30px;
    padding: 20px;
}

.area-filters .continents a {
    margin-right: 10px;
    background: #999;
    border-radius: 4px;
    padding: 5px 10px;
    ;
    color: #fff;
    line-height: 16px;
    display: inline-block;
    margin: 5px;
    text-decoration: none;
}

.area-filters .continents a:hover {
    background: #888;
    text-decoration: none;
}

.area-filters .main {
    background: #444;
}

.area-filters .main:hover {
    background: var(--back);
}

.area-filters .admin {
    background: #a21212;
}

.area-filters .admin:hover {
    background: #7b0d0d;
}

td.column_flag {
    padding: 0px 0px 0px 10px !important;
}

td.column_meaning {
    padding: 0px 10px 0px 0px !important;
}

@media screen and (max-width: 1020px) {
    .column_region {
        display: none
    }
}

@media screen and (max-width: 820px) {
    .column_meaning {
        display: none
    }

    .filter_region {
        display: none
    }
}

@media screen and (max-width: 600px) {
    .column_population {
        display: none
    }
}

@media screen and (max-width: 450px) {
    .column_continent {
        display: none
    }
}


/* Sorting arrows 
th.sorting_desc,
th.sorting_asc {
    background: #03A9F4;
}
*/
.sorting.sorting_desc:after,
.sorting.sorting_asc:after {
    color: #FFF;
    opacity: 1;
}

th:after {
    color: #fff;
    font: normal normal normal 14px/1 FontAwesome;
    margin-left: 5px;
}

.fa-sort {
    opacity: .3;    
    font-size: 14px;
    margin-left: 4px;
    display: unset;
}

.sorting_desc .fa-sort,
.sorting_asc .fa-sort
{
    opacity: 1 !important;
    color: #fff;
}
.sorting_desc .fa-sort:before {
    content: "\f0dd";
}

.sorting_asc .fa-sort:before {
    content: "\f0de";
}
table.dataTable thead>tr>th.sorting:before,
table.dataTable thead>tr>th.sorting:after {
    display: none;
}
/*
.sorting:after {
    content: "\f0dc";
    opacity: .3;
}

.sorting_desc:after {
    content: "\f0dd";
}

.sorting_asc:after {
    content: "\f0de";
}
*/

.sorting,
.sorting_desc,
.sorting_asc {
    cursor: pointer;
}

#ctable_filter,
#ctable_length,
#ctable_paginate {
    display: none;
}

#ctable_info {
    position: absolute;
    right: 0.5%;
    margin-right: 10px;
    top: -62px;
    color: #666;
}

input#global_filter {
    margin-bottom: 20px;
}

.table td,
.table th {
    border-top: none;
}

#ctable tr th {
    padding: 8px 10px !important;
}

#ctable tr td {
    padding: 2px 10px !important;
    vertical-align: middle;
}

/*
.fakecountry {
background: #dcefff !important;
display:none;
}
*/

table.dataTable thead th,
table.dataTable thead td {
    border-bottom: 0px;
}

table.dataTable thead .sorting,
table.dataTable thead .sorting_desc,
table.dataTable thead .sorting_asc {
    background-image: none !important;
}

table.dataTable thead th,
table.dataTable tfoot th {
    font-weight: 400;
}

.btn-info {
    color: #fff;
    background-color: var(--lightblue);
    border-color: var(--lightblue);
}
.btn-info:hover {
    color: #fff;
    background-color: var(--lightbluehover);
    border-color: var(--lightbluehover);
}
.dropdown-menu a {
    text-decoration: none;
    color: #555;
}

.form-check-label {
    padding: 8px 7px;
    text-transform: uppercase;
    font-size: 13px;
}


/* Align the toggle + label pair on one centered row */
.area-filters .col-md-3 {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 6px;
}
.area-filters .col-md-3 .form-check-label {
    margin: 0;
    line-height: 1;
}

/* SWITCH TOGGLE BUTTONS */
.area-filters .switch {
    position: relative;
    display: inline-block;
    width: 40px;
    height: 22px;
    flex-shrink: 0;
}

/* Hide default HTML checkbox */
.area-filters .switch input {
    display: none;
}

/* The slider */
.area-filters .slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    -webkit-transition: .4s;
    transition: .4s;
}

.area-filters .slider:before {
    position: absolute;
    content: "";
    height: 16px;
    width: 16px;
    left: 3px;
    bottom: 3px;
    background-color: white;
    -webkit-transition: .4s;
    transition: .4s;
}

.area-filters input.default:checked + .slider {
    background-color: #444;
}

.area-filters input.primary:checked + .slider {
    background-color: var(--lightblue);
}

.area-filters input.success:checked + .slider {
    background-color: #8bc34a;
}

.area-filters .area-filters input.info:checked + .slider {
    background-color: #3de0f5;
}

.area-filters .area-filters input.warning:checked + .slider {
    background-color: #FFC107;
}

.area-filters input.danger:checked + .slider {
    background-color: #f44336;
}

.area-filters input:focus + .slider {
    box-shadow: 0 0 1px var(--lightblue);
}

.area-filters input:checked + .slider:before {
    -webkit-transform: translateX(18px);
    -ms-transform: translateX(18px);
    transform: translateX(18px);
}

/* Rounded sliders */
.area-filters .slider.round {
    border-radius: 22px;
}

.area-filters .slider.round:before {
    border-radius: 50%;
}
img#myImg {
    width: 80px;
}

/* Country detail: subtle prev/next arrows flanking the title (light background) */
.country-nav-arrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    color: #475569;
    background: rgba(0, 0, 0, 0.05);
    text-decoration: none;
    font-size: 14px;
    flex-shrink: 0;
    transition: color .15s ease, background-color .15s ease, transform .15s ease;
}
.country-nav-arrow:hover {
    color: #0f172a;
    background: rgba(0, 0, 0, 0.10);
    transform: scale(1.08);
}
.country-nav-arrow--placeholder { visibility: hidden; }
/* Main flag: no artificial caps — fills the container width (Bootstrap `img-fluid`
   keeps it from overflowing). */
.country-main-flag { width: 100%; height: auto; }
@media (max-width: 575px) {
    .country-nav-arrow { width: 28px; height: 28px; font-size: 12px; }
}

/* Country header (Design C) — arrows + name + .tld in one centered row.
   Note: this whole area sits inside .area-filters which has a LIGHT grey
   (#f5f5f5) background, so all text colors here are DARK for legibility. */
.country-header { color: #111; }
.country-title {
    color: #111;
    font-weight: 800;
    font-size: clamp(1.4rem, 4vw, 2.6rem);
    letter-spacing: 0.04em;
    line-height: 1.1;
}
.country-tld {
    color: rgba(0,0,0,.38);
    font-weight: 400;
    font-size: 0.5em;            /* much smaller than the H1 */
    letter-spacing: 0.02em;
    margin-left: 0.55rem;
    vertical-align: middle;
    text-transform: lowercase;
}

/* Horizontal stat bar (replaces vertical country-data table) */
.country-stat-bar { color: #111; }
.country-stat-bar .stat-pill {
    display: inline-flex;
    flex-direction: column;
    padding: 6px 14px;
    background: #fff;
    border: 1px solid rgba(0,0,0,.08);
    border-radius: 8px;
    min-width: 100px;
    box-shadow: 0 1px 2px rgba(0,0,0,.04);
}
.country-stat-bar .stat-label {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: #6b7280;
}
.country-stat-bar .stat-value {
    font-size: 14px;
    color: #111;
    font-weight: 600;
}

/* Color chips for "Meaning of Flag Colors" */
.color-chip-row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
.color-chip {
    display: inline-flex;
    align-items: center;
    padding: 4px 10px;
    border-radius: 999px;
    border: 1px solid rgba(0,0,0,.08);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .03em;
    box-shadow: 0 1px 2px rgba(0,0,0,.08);
}

/* Wrap content sections in a white card so headings stay bold black */
.country-sections-card {
    background: #fff;
    color: #222;
    border-radius: 10px;
    padding: 24px 28px;
    box-shadow: 0 6px 18px rgba(0,0,0,.18);
}
.country-sections-card h2 {
    color: #111;
    font-weight: 700;
    margin-top: 1.4rem;
}
.country-sections-card h2:first-child { margin-top: 0; }
.country-sections-card p { color: #222; }

/* Floating side arrows fixed at viewport edges for prev/next country.
   Dark/solid so they're visible against the light .area-filters backdrop. */
.country-side-arrow {
    position: fixed;
    top: 50%;
    transform: translateY(-50%);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: #111;
    color: #fff;
    text-decoration: none;
    font-size: 20px;
    z-index: 1000;
    transition: background-color .15s ease, transform .15s ease, box-shadow .15s ease;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
}
.country-side-arrow:hover {
    background: var(--lightblue);
    color: #fff;
    transform: translateY(-50%) scale(1.08);
    box-shadow: 0 6px 18px rgba(33, 150, 243, 0.45);
}
.country-side-arrow--left  { left: 16px; }
.country-side-arrow--right { right: 16px; }
@media (max-width: 767px) {
    .country-side-arrow { width: 38px; height: 38px; font-size: 16px; }
    .country-side-arrow--left  { left: 8px; }
    .country-side-arrow--right { right: 8px; }
}

/* ----- Flag History TIMELINE ----- */
.flag-timeline {
    list-style: none;
    padding-left: 0;
    margin: 18px 0 0 0;
    position: relative;
}
.flag-timeline::before {
    content: "";
    position: absolute;
    left: 90px; top: 6px; bottom: 6px;
    width: 2px;
    background: #e2e8f0;
}
.flag-timeline-item {
    position: relative;
    display: grid;
    grid-template-columns: 80px 20px 1fr;
    align-items: start;
    gap: 8px;
    padding: 14px 0;
}
.flag-timeline-year {
    text-align: right;
    color: #475569;
    font-weight: 700;
    padding-top: 4px;
    font-variant-numeric: tabular-nums;
}
.flag-timeline-marker {
    width: 12px; height: 12px;
    border-radius: 50%;
    background: var(--lightblue);
    border: 2px solid #fff;
    margin: 8px auto 0 auto;
    box-shadow: 0 0 0 3px rgba(33,150,243,.18);
}
/* Subtle accent on the "current flag" entry */
.flag-timeline-item--current .flag-timeline-marker {
    background: #16a34a;                                 /* green */
    box-shadow: 0 0 0 3px rgba(22,163,74,.18);
}
.flag-timeline-item--current .flag-timeline-content {
    border-left: 3px solid #16a34a;
}

/* Prev/next nav buttons inside the flag history modal */
.flag-modal-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: rgba(0,0,0,.55);
    color: #fff;
    border: 0;
    font-size: 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    z-index: 5;
    transition: background-color .15s ease, transform .15s ease;
}
.flag-modal-nav:hover {
    background: rgba(0,0,0,.78);
    transform: translateY(-50%) scale(1.06);
}
.flag-modal-nav--prev { left: 14px; }
.flag-modal-nav--next { right: 14px; }
@media (max-width: 575px) {
    .flag-modal-nav { width: 36px; height: 36px; font-size: 14px; }
    .flag-modal-nav--prev { left: 8px; }
    .flag-modal-nav--next { right: 8px; }
}
.flag-timeline-content {
    display: flex;
    gap: 14px;
    align-items: flex-start;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 10px 12px;
}
.flag-timeline-img {
    width: 90px;
    max-height: 60px;
    object-fit: contain;
    cursor: zoom-in;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 4px;
    padding: 2px;
    flex-shrink: 0;
}
.flag-timeline-desc {
    color: #334155;
    font-size: 14px;
    line-height: 1.45;
}
@media (max-width: 575px) {
    .flag-timeline::before { left: 60px; }
    .flag-timeline-item   { grid-template-columns: 52px 16px 1fr; }
    .flag-timeline-img    { width: 60px; max-height: 40px; }
}

td.column_country_es,
td.column_country,
td.column_capital_es,
td.column_capital {
    align-items: center;
}

h2 {
    font-weight: 500;
    font-size: 1.5rem;
}

.singlecountry p,
.singlecountry ul {
    color: #555;
    line-height: 1.5rem;
    font-size: 15px;
    font-weight: 300;
}

.singlecountry strong,
.singlecountry b {
    font-weight: 600;
    color: #111;
}

.country-data th {
    font-weight: 600;
    text-align: right;
    padding-right: 15px;
}
.btn-secondary {
    background-color: #888;
    border-color: #888;
}
.historyflags img {
    border: 1px solid #dee2e6;
    border-radius: 0.25rem;
    }

.historyflags td {
    border: none;
    padding: 2px;
}

.pastflags input {
    width: 50%;
    display: block;
    margin: 10px auto 20px auto;
    text-align: center;
}

.pastflags img {
    max-width:75px;
}