@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@400;600&family=Libre+Baskerville:wght@400;700&display=swap');

:root {
  --arch-font-heading: 'Cormorant Garamond', serif;
  --arch-font-body: 'Libre Baskerville', serif;
}

:root {
  /* Main background – warm off-white, like aged paper or plaster walls */
  --color-bg: #474642;

  /* Secondary background – soft warm gray, like old painted wood or concrete */
  --color-bg-secondary: #436764;
  
  --color-white: #e5e5df;
  
  --color-black: #1e2930;

  /* Accent background – muted slate blue-gray (roof tiles, chalkboard) */
  --color-bg-accent: #c4c1b7;
  
  --color-btn: #b46159;
  
  --color-btn-border: #c8c3a6;
  
  --color-tag: #876861;
  
  --color-tag-2: #9f9c90;
  
  --color-hover-text: #b46159;

  /* Primary text – deep charcoal with a hint of brown (old ink) */
  --color-text-light: #efdb92;

  /* Secondary text – warm mid-gray (faded ink) */
  --color-text-muted: #6b5e52;

  /* Brick / terracotta – warm red-brown, used sparingly as accent */
  --color-brick: #a05444;

  /* Weathered wood / walnut – rich medium brown */
  --color-wood: #8a6f5a;

  /* Deep forest green – old leather-bound books, oxidized copper */
  --color-forest: #3b4d3f;

  /* Slate teal – muted blue-gray from old roofing slate */
  --color-slate: #64727f;

  /* Soft gold / aged brass highlight – very subtle glow */
  --color-gold: #d4b069;

  /* Muted sage green – dried herbs, old wallpaper */
  --color-sage: #8a9274;

  /* Borders & dividers – light warm gray */
  --color-border: #d9d0c7;

  /* Subtle shadow (for cards, etc.) */
  --color-shadow: rgba(44, 36, 31, 0.08);
}

/* Works in Chrome, Edge, Safari, Opera */
::-webkit-scrollbar {
    background-color: var(--color-white);
    width: 12px;           /* vertical scrollbar */
    height: 12px;          /* horizontal scrollbar */
}

::-webkit-scrollbar-track {
    background-color: var(--color-white);
    border-radius: 8px;
}

::-webkit-scrollbar-thumb {
    background-color: var(--color-btn);   /* your brick red */
    border-radius: 8px;
    border: 3px solid var(--color-btn-border);  /* creates padding so it doesn't touch edges */
    cursor: pointer;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--color-bg-secondary);   /* darker on hover */
}

/* Optional: tiny corner where both scrollbars meet */
::-webkit-scrollbar-corner {
    background: #faf7f2;
}

html { font-size: 100%; }
body {
  font-family: var(--arch-font-body);
  background-color: var(--color-bg) !important;
  color: var(--arch-text);
}
h1,h2,h3,h4,h5,h6,
.card-title, .btn, .form-select, .form-control {
  font-family: var(--arch-font-heading);
}
h1 {
    color: var(--color-btn) !important;
}

#logo:hover {
    /*background-image: url("..assets/img/logo-2.png") !important;*/
/*    filter: saturate(110%) brightness(1.1) hue-rotate(-5deg);*/
}

#logo:hover {
  /*content: url("../img/logo-2.png");*/
}

.card {
  background: var(--arch-card);
  border: 1px solid #D9C2A7;
  box-shadow: 0 4px 12px var(--arch-shadow);
  transition: transform .25s ease, box-shadow .25s ease;
}
.card a {
    color: var(--color-text-light) !important;
    cursor: pointer !important;
}
.card-divider {
    color: var(--color-btn-border) !important;
    height: 30px;
    margin-top: 0 !important;
    padding: 0 !important;
    position: relative;
}
.card-divider-line {
    color: var(--color-btn-border) !important;
    position: absolute;
    width: 100%;
}
.card-shape {
    left: calc(50% - 25px);
    height: 10px;
    width: 50px;
    position: absolute;
    top: 12px;
}
.card-body {
    background-color: var(--color-bg-secondary);
}

.card-header {
    background-color: var(--color-bg-secondary) !important;
    color: var(--color-text-light) !important;
}

.stats-table {
    background-color: var(--color-btn-border) !important;
}

.stats-table a {
    color: var(--color-black) !important;
}

.stats-table a:hover {
    color: var(--color-btn) !important;
}

.bg-white {
    background-color: var(--color-btn-border) !important;
}

.text-light {
    color: var(--color-text-light) !important;
}

.text-dark {
    color: var(--color-black) !important;
}

.text-light-emphasis {
    color: var(--color-btn) !important;
}

.bg-light {
    background-color: var(--color-bg-secondary) !important;
}

.bg-dark {
    background-color: var(--color-slate) !important;
}

a {
    color: var(--color-text);
    text-decoration: none;
    transition: all 0.22s ease-out;
}
a:hover {
    color: var(--color-hover-text);
    text-decoration: underline;
}

.architect-badge {
    background-color: var(--color-tag-2) !important;
}

.architect-badge:hover {
    background-color: var(--color-btn-border) !important;
}

.tag-badge {
    position: relative;
    z-index: 0;
    border: none !important;
    background: transparent !important;
    padding: 1rem 2rem; /* Asymmetric for icon space */
    border-radius: 2.2rem; /* Soft pill corners */
    font-size: 0.75em !important;
    color: var(--color-btn-border); /* Off-white text */
    gap: 0.8rem;
    text-decoration: none;
    transition: color 0.3s ease;
}
.tag-badge:hover {
    color: var(--color-btn) !important;
}
.tag-badge::before,
.tag-badge::after {
    position: absolute;
    top: 0;
    right: 0;
    width: 100%;
    height: 100%;
    border-image-outset: 0;
    border-image-repeat: stretch;
    border-image-slice: 19 19 19 19; /* Matches Efteling's base slice */
    border-image-width: 25em 25em 25em 25em; /* Stretches to button size */
    content: "";
    pointer-events: none;
    z-index: -2; /* Behind text */
}
.tag-badge::before {
    border-image-source: url('../img/button-3.svg'); /* Default state */
}
.tag-badge::after {
    border-image-source: url('../img/button-3.svg'); /* Hover state */
    opacity: 0; /* Hidden until hover */
    transition: opacity 0.3s ease;
}
.tag-badge:hover::before {
    border-image-source: url('../img/button-3-hover.svg');
    transform: scale(1.04);
}
.btn-wide {
    width: 200px;
}

.badge {
    transition: all 0.15s ease-out;
}

.building-description {
  /*background-image: url('assets/img/stone.png');
  background-size: 180px;
  background-repeat: repeat;
  color: #fff !important;
  text-shadow: 0 1px 2px rgba(0,0,0,.6);*/
}
.building-card .card-img-top {
    /*filter: sepia(.15) contrast(1.05);*/
}

#main-header {
    background-repeat: no-repeat !important;
    background-size: 120% auto !important;
    background-position: center center;
    position: relative;
    transition: background-image 0.6s ease-in-out;
}

#main-header .col-auto {
    z-index: 999999;
}

#header-gradient {
    background: linear-gradient(to right, 
    rgba(67,103,100,0.85) 0%, 
    rgba(67,103,100,0.60) 30%, 
    rgba(67,103,100,0.20) 60%, 
    rgba(67,103,100,0.00) 100%);
 z-index: 2;
}

.main-filter {
    background-color: var(--color-btn-border) !important;
}

.filter-bar {
  background: linear-gradient(135deg, #5D4037 0%, #3E2723 100%);
  border-bottom: 4px solid #8B5A2B;
  border-radius: 0 !important;
}
input[type="text"],
input[type="email"],
input[type="password"],
input[type="search"],
input[type="tel"],
input[type="url"],
textarea,
select {
  background-color: var(--color-white);
  height: 44px !important;
  line-height: 44px !important;
}
select {
    color: var(--color-black) !important;
    cursor: pointer !important;
    line-height: 30px !important;
}
.filter-input,
.select2-selection--single {
  background: rgba(255,255,255,.12) !important;
  border: none !important;
  color: var(--color-black) !important;
  font-family: var(--arch-font-body);
  height: 44px !important;
  line-height: 44px !important;
}
.filter-input::placeholder { color: rgba(255,255,255,.7) !important; }
.select2-selection__rendered {
    color: var(--color-text);
    line-height: 1.8 !important;
    padding-top: 5px !important;
}
.select2-search--inline {
    width: 100% !important;
}
.select2-search--inline textarea {
    border-bottom-left-radius: 8px !important;
    border-bottom-right-radius: 8px !important;
    width: 100% !important;
}
.select2-dropdown {
    z-index: 9999999999 !important;
}
/* Always show cursor in Select2 search box */
.select2-search__field {
    background-color: var(--color-white) !important;
    width: 100% !important;        /* or min-width: 4em */
    min-width: 4em !important;     /* prevents it collapsing to 0.75em */
    caret-color: var(--color-black) !important;     /* your brick red cursor */
    color: var(--color-btn-border) !important;           /* text color */
    padding: 0 5px !important;
}
/* Optional: make placeholder always visible too */
.select2-search__field::placeholder {
    color: #8a6f5a !important;
    opacity: 1;
}
.select2-search--dropdown {
    background-color: var(--color-white) !important;
    height: 58px !important;
}
.select2-results {
    background-color: var(--color-white) !important;
}
.select2-results__message {
    color: var(--color-btn-border) !important;
    font-size: 12px !important;
}
.select2-results__option[aria-selected="true"] {
    background-color: var(--color-btn) !important;
    color: var(--color-btn-border) !important;
}
.select2-results__option--selected {
    background-color: var(--color-btn) !important;
    color: var(--color-btn-border) !important;
}
.select2-selection__choice {
    background-color: var(--color-tag) !important;
    padding: 5px !important;
    height: 25px !important;
    color: var(--color-white) !important;
    cursor: pointer !important;
}
.select2-selection__choice:hover {
    background-color: var(--color-btn-border) !important;
    color: var(--color-btn) !important;
}
.select2-selection__placeholder, .select2-search__field, .select2-search--inline, .select2-tags-qo-container, textarea {
    color: var(--color-black) !important;
    font-size: 12px !important;
    font-weight: 400 !important;
    line-height: 2 !important;
    height: 2.5em !important;
}
/* 1. Default placeholder (gray, whatever you want) */
.select2-search__field::placeholder {
    color: var(--color-black) !important;
    font-size: 12px !important;
    font-weight: 400 !important;
    line-height: 2 !important;
}

/* 2. Firefox (uses -moz- prefix) */
.select2-search__field::-moz-placeholder {
    color: var(--color-btn-border) !important;
    font-size: 12px !important;
    font-weight: 400 !important;
    line-height: 2 !important;
}

/* 3. Old WebKit (just in case) */
.select2-search__field::-webkit-input-placeholder {
    color: var(--color-black) !important;
    font-size: 12px !important;
    font-weight: 400 !important;
    line-height: 2 !important;
}

/* 4. Microsoft Edge */
.select2-search__field:-ms-input-placeholder {
    color: var(--color-black) !important;
    font-size: 12px !important;
    font-weight: 400 !important;
    line-height: 2 !important;
}
::placeholder {
    color: var(--color-black) !important;
    font-size: 15px !important;
    font-weight: 400;
    line-height: 2 !important;
}
.select2-selection {
    background-color: var(--color-bg-accent) !important;
}

.select2-selection, .select2-selection--single, .select2-selection--clearable {
    background-color: var(--color-white) !important;
}

select, .form-select {
    background-color: var(--color-white);
}

@keyframes headerSway {
    0% {
        background-position: 30% center;
    }
    100% {
        background-position: 70% center;
    }
}

.btn-primary {
    position: relative;
    z-index: 0;
    border: none !important;
    background: transparent !important;
    padding: 0.5rem 2rem; /* Asymmetric for icon space */
    border-radius: 2.2rem; /* Soft pill corners */
    font-size: 20px !important;
    color: var(--color-btn-border); /* Off-white text */
    gap: 0.8rem;
    text-decoration: none;
    transition: color 0.3s ease;
}
.btn-primary:hover {
    color: var(--color-btn) !important;
}
.btn-primary:hover .header-img-icon {
    color: red !important;
}
.btn-outline-primary {
  color: var(--arch-primary);
  border-color: var(--arch-primary);
}
.btn-outline-primary:hover {
  background: var(--arch-primary);
  color: #fff;
}
.btn:focus-visible, .btn:first-child:active {
}
.btn-primary::before,
.btn-primary::after {
    position: absolute;
    top: 0;
    right: 0;
    width: 100%;
    height: 100%;
    border-image-outset: 0;
    border-image-repeat: stretch;
    border-image-slice: 19 19 19 19; /* Matches Efteling's base slice */
    border-image-width: 20em 20em 20em 20em; /* Stretches to button size */
    content: "";
    pointer-events: none;
    z-index: -2; /* Behind text */
}
.btn-primary::before {
    border-image-source: url('../img/button.svg'); /* Default state */
}
.btn-primary::after {
    border-image-source: url('../img/button.svg'); /* Hover state */
    opacity: 0; /* Hidden until hover */
    transition: opacity 0.3s ease;
}
.btn-primary:hover::before {
    border-image-source: url('../img/button-2.svg');
    transform: scale(1.04);
}
.btn-wide {
    width: 200px;
}

.icon-main-color {
    color: var(--color-btn-border);
}

.icon-main-color a {
    color: var(--color-btn-border) !important;
}

.icon-main-color a:hover {
    color: var(--color-btn) !important;
}

.icon-secondary-color {
    color: var(--color-btn);
}

.filter-icon {
    border: 1px solid var(--color-btn-border);
    background-color: var(--color-btn);
    border-radius: 8px;
    color: var(--color-btn-border);
    height: 44px !important;
    width: 44px !important;
}

.filter-icon:hover {
    background-color: var(--color-tag) !important;
}

.filter-icon:active {
    background-color: var(--color-tag) !important;
}

.filter-icon:focus-visible {
    background-color: var(--color-tag) !important;
}

.img-icon {
    height: 20px !important;
}

.style-img-icon {
    height: 30px !important;
    z-index: 999999 !important;
}

.header-img-icon {
    height: 20px !important;
}

.regular-img-icon {
    height: 30px !important;
}

.btn-toggle-type.weather-style {
    position: relative !important;           /* ← important */
    overflow: hidden !important;             /* hide overflow from pseudo-element */
}

/* This creates the faded background image */
.btn-toggle-type.weather-style::before {
    content: "";
    position: absolute;
    inset: 0;
    background-color: rgba(0,0,0,0.5);
    background-size: cover;
    background-position: center;
    opacity: 0.75;
    z-index: 0;
    height: 100px;
    width: 100px;
}

/* ——— ACTIVE + HOVER STATE (same look) ——— */
.btn-toggle-type:hover,
.btn-check:checked + .btn-toggle-type {
    background-color: white !important;
    opacity: 1 !important;
    filter: saturate(110%) brightness(1.5) hue-rotate(-5deg) !important;
    box-shadow: 0 4px 15px rgba(0,0,0,0.2) !important;
    transition: all 0.25s ease;
}

/* Optional: extra glow on active for premium feel */
.btn-check:checked + .btn-toggle-type {
    z-index: 10;
}

/* Keep icon bright when active/hover */
.btn-toggle-type:hover .style-img-icon,
.btn-check:checked + .btn-toggle-type .style-img-icon {
    filter: brightness(0.9) drop-shadow(0 2px 4px rgba(0,0,0,0.4));
}

#info-column {
    background-color: var(--color-white) !important;
    position: relative;
}

#info-column::before {
    bottom: 3px;
    content: "";
    pointer-events: none !important;
    display: block;
    left: 3px;
    position: absolute;
    right: 3px;
    top: 3px;
    border-radius: 5px;
    border-width: 2px;
    border-style: solid;
    border-color: var(--color-btn-border);
    border-image: initial;
}

.index-page .container-fluid {
    max-width: 100% !important;
    padding-left: 15px;
    padding-right: 15px;
}

.building-description {
    padding-top: 0 !important;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
}

.detail-page .container-fluid, .about-page .container-fluid {
    max-width: 1800px !important;
    margin: 0 auto;
    padding-left: 1rem;
    padding-right: 1rem;
}

.detail-img {
    --offset: 0px;
    padding: .4rem;
    position: relative;
}

.detail-img:after {
    border-image-source: url("../img/overlay.svg");
}

.detail-img:after {
    position: absolute;
    z-index: 1;
    top: 0;
    left: 0;
    width: calc(100% - 0px * 2);
    height: calc(100% - 0px * 2);
    border-style: solid;
    border-image-repeat: stretch stretch;
    border-image-slice: calc(16 + 1) calc(16 + 1) calc(16 + 1) calc(16 + 1);
    border-image-width: calc(calc(16 + 1) * 1px);
    content: "";
    pointer-events: none;
    -ms-touch-action: none;
    touch-action: none;
}

.detail-divider {
    color: var(--color-btn-border) !important;
}

.detail-page .ratio-4x3 img {
    object-fit: contain !important;
    background: #111;
}

#map {
  border-radius: 0px;
  box-shadow: 0 8px 30px rgba(0,0,0,.2);
  margin: 0;
}
.leaflet-container {
  background: #f2e8d5 !important;
}

.card-img-top {
    aspect-ratio: 2 / 3;
    filter: saturate(110%) brightness(1.1) hue-rotate(-5deg);
    object-fit: cover;
    transition: transform 0.3s ease;
}
.card:hover .card-img-top {
/*    transform: scale(1.05);*/
}
.image-type-22 {
    filter: saturate(110%) brightness(1.1) hue-rotate(-5deg) !important;
}
.image-type-27 {
    filter: saturate(110%) brightness(1.1) hue-rotate(-5deg) !important;
}
.image-type-30 {
    filter: saturate(110%) brightness(1.24) hue-rotate(-5deg) !important;
}
#map { z-index: 1000; position: relative; }
select[multiple] option:checked {
    background: #0d6efd linear-gradient(0deg, #0d6efd 0%, #0d6efd 100%);
    color: white;
}
.col-xxl-1-5 {
    flex: 0 0 10%;
    max-width: 10%;
}
@media (max-width: 1400px) {
    .col-xl-2 { flex: 0 0 16.666%; max-width: 16.666%; }
}
.fi {
    width: 1.33em; height: 1em; background: url('https://flagsapi.com/BE/flat/64.png');
    display: inline-block;
    vertical-align: middle;
    background-position: center;
    background-size: cover;
}
.fi-nl { background-image: url('https://flagsapi.com/NL/flat/64.png'); }
.fi-be { background-image: url('https://flagsapi.com/BE/flat/64.png'); }
.fi-fr { background-image: url('https://flagsapi.com/FR/flat/64.png'); }
.fi-de { background-image: url('https://flagsapi.com/DE/flat/64.png'); }
.fi-lu { background-image: url('https://flagsapi.com/LU/flat/64.png'); }
.fi-at { background-image: url('https://flagsapi.com/AT/flat/64.png'); }
.fi-cz { background-image: url('https://flagsapi.com/CZ/flat/64.png'); }
.fi-ch { background-image: url('https://flagsapi.com/CH/flat/64.png'); }
.fi-gb { background-image: url('https://flagsapi.com/GB/flat/64.png'); }
.fi-dk { background-image: url('https://flagsapi.com/DK/flat/64.png'); }
.fi-it { background-image: url('https://flagsapi.com/IT/flat/64.png'); }
.fi-pl { background-image: url('https://flagsapi.com/PL/flat/64.png'); }
.fi-es { background-image: url('https://flagsapi.com/ES/flat/64.png'); }
.fi-hu { background-image: url('https://flagsapi.com/HU/flat/64.png'); }
.fi-no { background-image: url('https://flagsapi.com/NO/flat/64.png'); }
.fi-se { background-image: url('https://flagsapi.com/SE/flat/64.png'); }
.fi-ie { background-image: url('https://flagsapi.com/IE/flat/64.png'); }
.fi-lt { background-image: url('https://flagsapi.com/LT/flat/64.png'); }
.fi-ee { background-image: url('https://flagsapi.com/EE/flat/64.png'); }
.fi-gr { background-image: url('https://flagsapi.com/GR/flat/64.png'); }
.fi-fi { background-image: url('https://flagsapi.com/FI/flat/64.png'); }
.fi-us { background-image: url('https://flagsapi.com/US/flat/64.png'); }
#main-building-image {
    max-height: 800px;
}
.ten-per-row-container {
    width: 100%;
}

#building-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 0.5rem;
    justify-content: flex-start;
}

.building-item {
    flex: 0 0 calc(10% - 0.5rem) !important;
    max-width: calc(10% - 0.5rem) !important;
}

.progress-bar {
    background-color: var(--color-btn) !important;
}

/* 6 per row below 2000px */
@media (max-width: 2000px) {
    .building-item {
        flex: 0 0 calc(20% - 0.5rem) !important;
        max-width: calc(20% - 0.5rem) !important;
    }
}

/* 4 per row on tablets */
@media (max-width: 1200px) {
    .building-item {
        flex: 0 0 calc(50% - 0.5rem) !important;
        max-width: calc(50% - 0.5rem) !important;
    }
}

/* 2 per row on mobile */
@media (max-width: 768px) {
    .building-item {
        flex: 0 0 calc(50% - 0.5rem) !important;
        max-width: calc(50% - 0.5rem) !important;
    }
}

.building-card {
    transition: transform 0.3s ease;
}

.building-card-border::before {
    bottom: 3px;
    content: "";
    display: block;
    left: 3px;
    position: absolute;
    right: 3px;
    top: 3px;
    border-radius: 5px;
    border-width: 2px;
    border-style: solid;
    border-color: var(--color-btn-border);
    border-image: initial;
    pointer-events: none;
    z-index: 999999;
    transition: transform 0.3s ease;
}

.building-card:hover::before {
    border-color: var(--color-btn) !important;
}

@media (max-width: 1400px) {
    .building-item {
        flex: 0 0 calc(16.666% - 0.5rem);
        max-width: calc(16.666% - 0.5rem);
    }
}

@media (max-width: 992px) {
    .building-item {
        flex: 0 0 calc(20% - 0.5rem);
        max-width: calc(20% - 0.5rem);
    }
}

@media (max-width: 768px) {
    .building-item {
        flex: 0 0 calc(25% - 0.5rem);
        max-width: calc(25% - 0.5rem);
    }
}

@media (max-width: 576px) {
    .building-item {
        flex: 0 0 calc(50% - 0.5rem);
        max-width: calc(50% - 0.5rem);
    }
}

.transition-col {
    transition: all 0.4s ease-in-out;
}

#map-col.d-none {
    display: none !important;
}

.hover-scale        { transition: transform 0.15s ease-out; }
.hover-scale:hover  { transform: scale(1.02); }

.hover-underline {
    position: relative;
    transition: color 0.2s ease;
}

.hover-underline:hover {
    color: var(--color-hover-text) !important;
    text-decoration-color: var(--color-hover-text) !important;
}

.hover-underline::after {
    content: '';
    position: absolute;
    width: 0;
    height: 1px;
    bottom: -1px;
    left: 0;
    background-color: var(--color-hover-text) !important;
    transition: width 0.2s ease;
}

.hover-underline:hover::after {
    width: 100%;
}
#random-building-btn {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
#random-building-btn:hover {
    transform: translateY(-4px) scale(1.05);
    box-shadow: 0 20px 40px rgba(255,255,255,0.4) !important;
}
#random-building-btn i {
    transition: transform 0.4s ease;
}
#random-building-btn:hover i {
    transform: rotate(360deg);
}
#image-type-toggle .btn-toggle-type {
    background-position: center !important;
    background-repeat: no-repeat !important;
    background-size: 130% !important;
    position: relative;
    padding: 0;
    overflow: hidden;
    width: 80px;
    height: 60px;
    transition: all 0.3s ease;
    background: #000;
    cursor: pointer;
    position: relative;           /* needed for absolute centering */
    display: flex;                /* flex makes centering easy */
    align-items: center;          /* vertical center */
    justify-content: center;  
}

#image-type-toggle .btn-toggle-type img {
    transition: transform 0.4s ease;
}

#image-type-toggle .btn-toggle-type .overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    color: white;
    font-size: 0.8rem;
    font-weight: 600;
    text-align: center;
    opacity: 0;
    transition: opacity 0.3s ease;
    height: 100%;
    line-height: 60px;
    text-shadow: 0px 2px 6px #000000;
}

#image-type-toggle .btn-check:checked + .btn-toggle-type {
    border-color: #007bff;
}

#image-type-toggle .btn-check:checked + .btn-toggle-type img {
    transform: scale(1.1);
}

#image-type-toggle .btn-toggle-type:hover .overlay {
    background-size: 140% !important;
    height: 100%;
    opacity: 1;
}

#image-type-toggle .btn-toggle-type:hover {
    background-size: 140% !important;
}

#image-type-toggle .btn-check:checked + .btn-toggle-type .overlay {
    line-height: 60px;
    opacity: 1;
}

.image-container {
    background: var(--color-bg-secondary, #f8f9fa); /* Warm gray fallback */
}

.spinner-overlay {
    transition: opacity 0.3s ease-out;
}

.spinner-overlay.hidden {
    opacity: 0;
    pointer-events: none;
}

.spinner-border {
    border-color: var(--color-border, #dee2e6);
    border-right-color: transparent;
    opacity: 0.7;
}
.leaflet-touch .leaflet-bar {
    border: none !important;
}
.leaflet-control-zoom-in, .leaflet-control-zoom-out {
    background-color: var(--color-btn) !important;
    border: none !important;
    color: var(--color-btn-border) !important;
}
.leaflet-control-zoom-in:hover, .leaflet-control-zoom-out:hover {
    background-color: var(--color-btn) !important;
    border: none !important;
    color: var(--color-btn-border) !important;
}
.leaflet-popup-content-wrapper {
    background-color: var(--color-white);
    color: var(--color-black);
}
.leaflet-popup-tip {
    background-color: var(--color-white);
    color: var(--color-black);
}
.leaflet-tooltip-own {
    background: var(--color-btn) !important;
    border: none !important;
    color: var(--color-btn-border) !important;
    padding: 6px 12px !important;
    border-radius: 8px;
}
/* Arrow color */
.leaflet-tooltip-top::before {
    border-top-color: var(--color-btn); !important;
}

.leaflet-marker-icon {
    font-family: var(--arch-font-body) !important;
}

.leaflet-marker-icon > div {
    background-color: var(--color-bg-secondary) !important;
    border: 1px solid var(--color-btn-border) !important;
    color: var(--color-white) !important;
}

.leaflet-marker-icon > div:hover {
    background-color: var(--color-bg-accent) !important;
    border: 1px solid var(--color-btn) !important;
    color: var(--color-black) !important;
}

.main-city-marker, .city-center-label {
    font-family: var(--arch-font-body) !important;
}

.reference-city-marker {
    background-color: var(--color-btn) !important;
    border: 1px solid green !important;
    border-radius: 100% !important;
    text-shadow: none !important;
}

.tentacle-tooltip {
    color: black !important;
    font-family: var(--arch-font-body) !important;
}

.circle-label > div {
    background: none !important;
    border: none !important;
    box-shadow: none !important;
}

.circle-label > div:hover {
    background: none !important;
    border: none !important;
    box-shadow: none !important;
}

.statistics-header {
    color: var(--color-btn-border) !important;
}

.statistics-monuments {
    color: var(--color-white);
}

.statistics-icon {
}

.statistics-icon-button {
    border: 1px solid var(--color-btn-border);
    background-color: var(--color-btn);
    border-radius: 8px;
    color: var(--color-btn-border);
    padding: 10px;
}

@media (min-width:2100px){
    .shapedividers_com-3141::before{
    background-size: 100% calc(2vw + 90px);
    }
}

footer {
  background: #3E2723;
  color: #D9C2A7;
}
#footer-title {
    color: var(--color-btn) !important;
}
footer a { color: #A67C52; }

.filter-expand-button {
    background-color: var(--color-btn);
    color: var(--color-bg-accent);
    border: 1px solid var(--color-bg-accent);
}

/* Mobile filter improvements - ONLY mobile */
@media (max-width: 991.98px) {
    /* Taller native inputs (name field) */
    .filter-bar .form-control {
        height: 58px !important;
        font-size: 1.15rem !important;
        padding: 0.75rem 1rem !important;
    }

    /* Taller Select2 visible "input" (city, country, architect, tags) */
    .filter-bar .select2-container--bootstrap-5 .select2-selection--single,
    .filter-bar .select2-container--bootstrap-5 .select2-selection--multiple {
        height: 58px !important;
        font-size: 1.15rem !important;
        border-radius: 0.5rem !important;
    }

    .filter-bar .select2-container--bootstrap-5 .select2-selection__rendered {
        line-height: 46px !important; /* centers text vertically */
        padding-left: 1rem !important;
    }

    .filter-bar .select2-container--bootstrap-5 .select2-selection__arrow {
        height: 58px !important;
        top: 0 !important;
    }

    /* Fix the three buttons - make them larger, proper colors, side-by-side */
    .filter-bar .d-flex.gap-1.justify-content-end {
        gap: 1.5rem !important;
        justify-content: center !important;
        margin-top: 1.5rem;
    }

    .filter-bar .filter-icon {
        width: 150px !important;
        height: 70px !important;
        border-radius: 12px !important;
        box-shadow: 0 4px 10px rgba(0,0,0,0.1);
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 0;
    }

    .filter-bar .filter-icon:hover {
    }

    .filter-bar .filter-icon img {
        height: 36px;
    }
}