/* Layout polish – match the original BS3 design after BS5 migration */
:root {
    --cp-purple: #5b315b;
    --cp-purple-dark: #754f75;
    --cp-purple-mid: #936493;
    --cp-olive: #c0cc8f;
    --cp-cream: #e3eac5;
    --cp-well: #dae1bd;
}

html { background-color: var(--cp-olive); }
body {
    font-family: "Raleway", "Helvetica Neue", Helvetica, Arial, sans-serif;
    color: #333;
    padding-top: 89px;
    background-color: var(--cp-olive);
}
/* Lock the fixed-top navbar to exactly match body padding so no olive gap leaks between them */
.site-header.fixed-top { min-height: 89px; }
@media (max-width: 991px) { body { padding-top: 89px; } }
/* On mobile drop the olive frame entirely, hide the olive secondary row, and close
   the gap between the navbar and the page header. The olive navbar itself stays in
   the DOM so the collapse target (#site-menu) can still expand when the burger is
   tapped — only the olive background/padding is suppressed. */
@media (max-width: 768px) {
    html, body { background-color: #ffffff; }
    body { padding-top: 56px; }
    .site-header.fixed-top { min-height: 56px; }
    .site-header .navbar-olive { background-color: transparent; }
    .site-header .navbar-olive > .container { background-color: transparent; padding: 0; }
    .site-header .navbar-olive .navbar-collapse:not(.show) { display: none; }
    .site-header .navbar-olive .navbar-collapse.show {
        background-color: var(--cp-purple);
        padding: 8px 12px;
    }
    .site-header .navbar-olive .navbar-collapse.show .nav-link { color: #fff !important; }
    header.container#page-header { padding: 0 16px 0; margin-top: -10px; }
}
/* Mobile burger menu (under Bootstrap lg breakpoint) — make the dropped-down
   menu legible. Without this the .nav-link.active rule below paints a white
   pill on a white background. */
@media (max-width: 991.98px) {
    .site-header .navbar-olive .collapse.show,
    .site-header .navbar-olive .collapsing {
        background-color: var(--cp-purple);
        padding: 8px 16px;
    }
    .site-header .navbar-olive .navbar-nav { background-color: transparent; }
    .site-header .navbar-olive .nav-link {
        color: var(--cp-cream) !important;
        padding: 12px 4px;
        border-bottom: 1px solid rgba(255,255,255,0.08);
        background-color: transparent !important;
        border-radius: 0;
    }
    .site-header .navbar-olive .nav-item:last-child .nav-link { border-bottom: 0; }
    .site-header .navbar-olive .nav-link:hover,
    .site-header .navbar-olive .nav-link:focus {
        color: #c9a449 !important;
        background-color: transparent !important;
    }
    .site-header .navbar-olive .nav-link.active,
    .site-header .navbar-olive .nav-item.active > a,
    .site-header .navbar-olive .nav-link[aria-current="page"] {
        background-color: transparent !important;
        color: #c9a449 !important;
        font-weight: 700;
        margin-bottom: 0;
        padding-bottom: 12px;
    }
}

header, main, footer { margin: 0; }
.content-wrap {
    background-color: #ffffff;
    max-width: 1010px;
    margin: 0 auto;
}
.content-wrap > header.container,
.content-wrap > main.container { background-color: transparent; max-width: 100%; }
header.container#page-header { padding: 18px 20px 0; }
main.container { padding: 0 20px 24px; }
#start_content { background-color: transparent; padding: 0; min-height: 0; height: 0; }
footer { background-color: transparent; padding: 0; border-top: 0; margin: 0; }
footer .container {
    background-color: var(--cp-well);
    color: #333;
    padding: 18px 28px 22px;
    max-width: 1010px;
}
footer .container small { display: block; margin-bottom: 8px; }
footer .container a { color: var(--cp-purple-mid); }

/* Cap container at 1010px on wide viewports */
@media (min-width: 1200px) {
    .container, .container-lg, .container-md, .container-sm, .container-xl, .container-xxl { max-width: 1010px; }
}

/* --- Two-stripe site header (purple top, olive bottom) --- */
.site-header .navbar { padding: 0; min-height: 0; }
.site-header .navbar .container { padding-top: 0; padding-bottom: 0; }
.site-header .navbar-purple > .container { padding: 4px 12px; }
.site-header .navbar-olive > .container { padding: 0; }
.site-header .navbar-purple { background-color: var(--cp-purple); }
/* Outer bar stays purple (visible on the sides past the 1010px content column).
   Only the inner .container picks up the olive color. */
.site-header .navbar-olive { background-color: var(--cp-purple); }
.site-header .navbar-olive > .container { background-color: var(--cp-olive); }

.navbar-purple .nav-link, .navbar-purple .navbar-brand { color: #ffffff !important; padding: 6px 12px; }
.navbar-purple .nav-link:hover, .navbar-purple .nav-link:focus { color: var(--cp-cream) !important; background-color: transparent; }
.navbar-purple .dropdown-menu { background-color: var(--cp-purple); border-color: var(--cp-olive); }
.navbar-purple .dropdown-menu .dropdown-item { color: #fff; }
.navbar-purple .dropdown-menu .dropdown-item:hover { color: var(--cp-cream); background-color: transparent; }
.navbar-purple .navbar-toggler { border-color: rgba(255,255,255,.4); }
.navbar-purple .navbar-toggler-icon {
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3E%3Cpath stroke='%23ffffff' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");
}

.navbar-olive .nav-link { color: #333 !important; padding: 10px 16px; border-radius: 0; }
.navbar-olive .nav-link:hover, .navbar-olive .nav-link:focus { color: var(--cp-purple) !important; background-color: rgba(255,255,255,.4); }
.navbar-olive .nav-link.active {
    background-color: #ffffff !important;
    color: var(--cp-purple) !important;
    font-weight: 600;
    margin-bottom: -1px;
    padding-bottom: 11px;
    position: relative;
    z-index: 2;
}

/* --- Buttons --- */
.btn-primary {
    --bs-btn-bg: var(--cp-purple-mid);
    --bs-btn-border-color: var(--cp-purple-mid);
    --bs-btn-hover-bg: var(--cp-purple-dark);
    --bs-btn-hover-border-color: var(--cp-purple-dark);
    --bs-btn-active-bg: var(--cp-purple);
    --bs-btn-active-border-color: var(--cp-purple);
}
.btn-secondary {
    --bs-btn-bg: #fff;
    --bs-btn-color: #333;
    --bs-btn-border-color: #ddd;
    --bs-btn-hover-bg: #e6e6e6;
    --bs-btn-hover-color: #333;
    --bs-btn-hover-border-color: #bebebe;
}

a { color: var(--cp-purple-mid); }
a:hover { color: var(--cp-purple-dark); }

h1, h2, h3 { color: var(--cp-purple); }

/* Form/search box (darker cream, matches BS3 .well) */
.p-3.mb-3.bg-light.border.rounded, .mb-3.p-3.bg-light.border.rounded, .mb-3.mt-3.p-3.bg-light.border.rounded {
    background-color: #dae1bd !important;
    border-color: #cdd6ad !important;
}

/* Right column (lighter cream) */
.right_col, .right_col > * {
    background-color: #f1f4e1 !important;
    border-color: #e7ecd3 !important;
}
.right_col { padding: 16px 18px; }

/* Table header tinted purple like the original */
#price_table thead tr, #price_table thead th { background-color: #f0e0f0; color: #333; }
#price_table { background: #fff; --bs-table-striped-bg: #f9f9f9; --bs-table-hover-bg: #f1f1f1; }
#price_table tbody tr:hover { background-color: #f1f1f1; }
#price_table tbody td { border-color: #eee; }
#price_table tbody td small { color: #888; }

/* Logo */
.header-logo { padding: 14px 0 18px; }
.header-logo img {
    max-height: 95px;
    max-width: 100%;
    width: auto;
    height: auto;
}
@media (max-width: 575px) { .header-logo { text-align: center; } .header-logo img { max-height: 70px; } }

/* Larger button helper used in legacy templates (BS3 had .btn-large) */
.btn-large, .btn-lg { padding: 10px 16px; font-size: 18px; }

/* Cap container at 1010px on wide viewports (BS3 site used a custom 1010px max) */
@media (min-width: 1200px) {
    .container, .container-lg, .container-md, .container-sm, .container-xl, .container-xxl { max-width: 1010px; }
}

/* Constrain the header logo so it doesn't render at its 660×144 intrinsic size */
.header-logo { padding: 10px 0; }
.header-logo img { max-height: 70px; max-width: 100%; width: auto; height: auto; }
@media (max-width: 575px) { .header-logo { text-align: center; } .header-logo img { max-height: 56px; } }

/* The original layout used .page-header for spacing on a row, keep a small bottom border */
.row + .row, header.container .row { margin-bottom: 8px; }

/* Larger button helper used in legacy templates (BS3 had .btn-large) */
.btn-large, .btn-lg { padding: 10px 16px; font-size: 18px; }

/* Keep price-input rows on a single line (BS5 input-group wraps by default) */
.input-group { flex-wrap: nowrap; }
.input-group .form-control { min-width: 0; }
.price-row-label { margin-bottom: 4px; }

/* Instructions list above price form */
.instructions-list .list-group-item {
    background: #fdfcf8;
    border-color: rgba(0, 0, 0, 0.06);
}
.instructions-list .instr-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    min-width: 32px;
    font-size: 18px;
}
.instructions-list .form-check-input { margin: 0; }

/* Compact switch cell at the start of each price row — centered horizontally + vertically */
.fuel-switch-cell {
    width: 64px;
    min-width: 64px;
    padding: 0 0.5rem;
    justify-content: center;
    align-items: center;
}
.fuel-switch-cell .form-check {
    min-height: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}
.fuel-switch-cell .form-check-input {
    margin: 0;
    width: 2em;
    height: 1.2em;
}
.fuel-row .price-input { flex: 1 1 auto; }

/* Existing prices are shown via placeholder — make them visibly muted so the
   user can clearly distinguish them from a freshly typed value. */
.price-input::placeholder { color: #b8b8b8; opacity: 1; font-weight: 400; font-style: italic; }
.price-input::-webkit-input-placeholder { color: #b8b8b8; opacity: 1; font-weight: 400; font-style: italic; }
.price-input::-moz-placeholder { color: #b8b8b8; opacity: 1; font-weight: 400; font-style: italic; }

/* Hide the current-price placeholder as soon as the user focuses the field —
   makes it obvious they're entering a fresh value rather than editing the shown one. */
.price-input:focus::placeholder { color: transparent; }
.price-input:focus::-webkit-input-placeholder { color: transparent; }
.price-input:focus::-moz-placeholder { color: transparent; opacity: 1; }

/* Legacy spacing helpers used across views */
.space-top { margin-top: 20px; }
.no-padding-left { padding-left: 0; }

/* Make sure dropdown menus appear over the map */
.dropdown-menu { z-index: 1030; }

/* Right column polish (matches the BS3 "right_col" wrapper) */
.right_col {
    padding: 18px 22px 22px;
    border-radius: 4px;
}
.right_col > h2:first-child,
.right_col > h2.space-top { margin-top: 0; }
.right_col p { margin-bottom: 12px; }
.right_col p:last-child { margin-bottom: 0; }
.right_col .station-pills {
    display: block;
    padding-left: 0;
    margin: 0;
    background: transparent;
}
.right_col .station-pills > li {
    display: block;
    float: none;
    margin: 0 0 8px;
    background: transparent;
}
.right_col .station-pills > li:last-child { margin-bottom: 0; }
.right_col .station-pills > li > a {
    display: block;
    padding: 0;
    line-height: 1.35;
}

.top-promo {
    background: #e8f7bf;
    border: 0;
    margin: 0 0 20px;
    padding: 18px 20px;
}
.top-promo a {
    color: #16547a;
    display: block;
    font-weight: 800;
    line-height: 1.25;
    text-decoration: none;
}
.top-promo a:hover,
.top-promo a:focus {
    color: #123f5c;
    text-decoration: underline;
}
@media (max-width: 575px) {
    .top-promo {
        margin-bottom: 16px;
        padding: 14px 16px;
    }
}
/* Sidebar shouldn't stretch to match the (much taller) station list column */
@media (min-width: 768px) {
    .row > .col-md-5 { align-self: flex-start; }
}

/* Pagination */
.pagination { gap: 0; }
.pagination .page-link {
    color: var(--cp-purple-mid);
    border-color: #ddd;
}
.pagination .page-item.active .page-link {
    background-color: var(--cp-purple-mid);
    border-color: var(--cp-purple-mid);
    color: #fff;
}
.pagination .page-link:hover { background-color: #f5f5f5; color: var(--cp-purple-dark); }

/* Cenapaliw.pl uses only auto AdSense — collapse unfilled ad slots so they don't
   reserve fixed dimensions when no ad is served. Display:none on
   unfilled is safe (AdSense adds data-ad-status after attempting to fill). */
ins.adsbygoogle[data-ad-status="unfilled"] { display: none !important; }
ins.adsbygoogle { min-height: 0; height: auto; }

/* Livewrapped-platser (Adprofit header bidding).
   min-height reserverar alltid plats för den vanligaste annonsstorleken så
   att sidan aldrig hoppar när annonsen laddas (CLS ska hållas under 0,1).
   Tills en annons renderats visas ytan som en diskret "Annons"-platshållare
   i stället för ett tomt block. Ändra inte min-height till height — större
   format ska kunna växa. */
.lw-slot { text-align: center; }
.lw-mobile { display: none; }
.lw-desktop { display: none; }

.lw-slot:not(:has(iframe)) {
    background: #f4f2ec;
    border-radius: 4px;
}
.lw-slot:not(:has(iframe))::before {
    content: "Annons";
    display: block;
    padding-top: 14px;
    font-size: 11px;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: #a89f8a;
}

@media (max-width: 729px) {
    .lw-mobile { display: block; }
    .lw-slot.lw-mobile { min-height: 250px; }
}

@media (min-width: 730px) {
    .lw-desktop { display: block; }
    .lw-panorama { min-height: 250px; margin-bottom: 12px; }
    .lw-side {
        min-height: 600px;
        position: sticky;
        top: 130px; /* under den fasta headern */
        margin-top: 20px;
    }
}

/* Shown only when JS is disabled — map, filters and price-rating require JS. */
.noscript-warning {
    background: #fff3cd;
    color: #664d03;
    border-bottom: 1px solid #ffe69c;
    padding: 10px 16px;
    text-align: center;
    font-size: 14px;
    line-height: 1.4;
}