:root {
    --nav-h: 84px;
}

/* Only non-landing pages get top padding (fixed header) */
/*body:not(.is-landing) {
    padding-top: var(--nav-h);
}*/

/* Landing page: hero starts at top behind the navbar */
/*body.is-landing {
    padding-top: var(--nav-h);
}*/

/* Scrollbar compensation (set by JS via --sbw) */
body {
    padding-right: var(--sbw, 0px) !important;
    padding-top: var(--nav-h);
}

/* =========================
   Global Navbar
   ========================= */
header.navbar.navbar-sticky {
    position: fixed !important;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    z-index: 1030;
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.4);
    /* keep header aligned when scrollbar disappears */
    padding-right: var(--sbw, 0px) !important;
    /* default: solid */
    background: #fff;
    /* keep navbar readable regardless of theme */
    color: #111 !important;
    --bs-body-color: #111;
    --bs-emphasis-color: #111;
}

    header.navbar.navbar-sticky a,
    header.navbar.navbar-sticky .nav-link,
    header.navbar.navbar-sticky .dropdown-toggle,
    header.navbar.navbar-sticky .btn {
        color: #111 !important;
    }

header.navbar .brand-logo {
    height: 56px;
    width: auto;
    display: block;
}

/* =========================
   Utility / Misc
   ========================= */
.text-light-50 {
    color: rgba(255, 255, 255, 0.65) !important;
}

/* Small refinement for the dark section */
#country-picker .card.bg-secondary {
    background: linear-gradient(135deg, #3a3a3a, #4b4b4b);
}

/* Photo strip */
.photo-strip .photo-tile {
    min-height: 230px;
    background-size: cover;
    background-position: center;
    position: relative;
}

.photo-strip .photo-label {
    position: absolute;
    left: 1rem;
    bottom: 1rem;
    padding: 0.4rem 0.75rem;
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.6);
    color: #fff;
    font-size: 0.85rem;
}

/* Map overlay label */
.map-country-label {
    position: absolute;
    left: 1rem;
    bottom: 1rem;
    padding: 0.35rem 0.75rem;
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.65);
    color: #fff;
    font-size: 0.85rem;
    pointer-events: none;
}

/* =========================
   Footer
   ========================= */
.site-footer {
    background: #111;
    color: #ccc;
    padding: 3rem 0 1.5rem;
    font-size: 0.9rem;
}

    .site-footer a {
        color: #ccc;
        text-decoration: none;
    }

        .site-footer a:hover {
            color: #fff;
            text-decoration: underline;
        }

.footer-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 2rem;
}

.footer-links ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.footer-links li {
    margin-bottom: 0.5rem;
}

.footer-bottom {
    margin-top: 2rem;
    padding-top: 1rem;
    border-top: 1px solid #333;
    text-align: center;
    font-size: 0.85rem;
    color: #999;
}

/* =========================
   Explorebar / Filters contrast fixes
   ========================= */
/* INDEX (landing) only: keep dropdown text readable */
body #explorebarShell .nav-link,
body #explorebarShell .dropdown-toggle {
    color: #111 !important;
}

/* INDEX (landing) only: Filters button always black with white icon */
body #exploreFiltersBtn {
    background-color: #111 !important;
    border-color: #111 !important;
}

    body #exploreFiltersBtn i {
        color: #fff !important;
    }

/* INDEX (landing) only: ensure Start Exploring keeps intended contrast */
body #explorebarShell .btn-primary {
    color: #fff !important;
}
/* Non-landing: icon color adapts to theme */
body[data-bs-theme="dark"] #exploreFiltersBtn i {
    color: #111 !important;
}

body:not([data-bs-theme="dark"]) #exploreFiltersBtn i {
    color: #fff !important;
}
body #exploreFiltersBtn svg {
	fill: #fff !important;
	stroke: #fff !important;
}

/* =========================
   Header actions pill (theme + sign-in)
   ========================= */
.header-actions-pill {
    border-radius: 999px;
    padding: .25rem .4rem;
    background: rgba(255, 255, 255, .38);
    border: 1px solid rgba(255, 255, 255, .45);
    transition: background-color 160ms ease, border-color 160ms ease, box-shadow 160ms ease;
}

    .header-actions-pill:hover,
    .header-actions-pill.is-solid {
        background: rgba(255, 255, 255, 1) !important;
        border-color: rgba(0, 0, 0, .12) !important;
        box-shadow: 0 12px 34px rgba(0, 0, 0, .22);
    }

body.is-landing .header-actions-pill {
    background: rgba(255, 255, 255, .55);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
}

.header-actions-pill .btn.btn-icon {
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 999px;
}

/* =========================
   Landing Page (Index.cshtml) - moved from inline <style>
   ========================= */

/* Smooth scrolling (was inline: html { scroll-behavior: smooth; }) */
html {
    scroll-behavior: smooth;
}

/* Hero container */
body.is-landing .hero-landing {
    position: relative;
    overflow: hidden;
}

/*
	IMPORTANT:
	Your site.css already uses a fixed header + body padding-top: var(--nav-h).
	So we DO NOT need to overlay/pin an "explorebar" inside the hero.
	If .hero-explorebar is still present in markup, we should neutralize it.
*/

/* If you still render .hero-explorebar in the hero, disable the overlay behavior */
body.is-landing .hero-explorebar {
    position: static;
    top: auto;
    left: auto;
    right: auto;
    z-index: auto;
    padding: 0;
    pointer-events: auto;
}

    /* If there’s a wrapper container inside hero-explorebar, keep it interactive (default anyway) */
    body.is-landing .hero-explorebar .container {
        pointer-events: auto;
    }


/* Explorebar shell background behavior (was inline) */
/*body.is-landing #explorebarShell {
    background: rgba(255, 255, 255, .38) !important;
    border: 1px solid rgba(255, 255, 255, .45) !important;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    transition: background-color 160ms ease, border-color 160ms ease, box-shadow 160ms ease;
}

    body.is-landing #explorebarShell:hover,
    body.is-landing #explorebarShell.is-solid {
        background: rgba(255, 255, 255, 1) !important;
        border-color: rgba(0, 0, 0, .12) !important;
        box-shadow: 0 12px 34px rgba(0, 0, 0, .22);
    }*/


#explorebarShell {
    background: rgba(255,255,255,.35);
    border: 1px solid rgba(0,0,0,0.25);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    transition: background-color 160ms ease, border-color 160ms ease, box-shadow 160ms ease;
}

    #explorebarShell.is-solid {
        background: rgba(255,255,255,1);
        border-color: rgba(0,0,0,0.25);
        box-shadow: 0 12px 34px rgba(0,0,0,.22);
    }

.explorebar {
    display: flex;
    align-items: stretch; /* changed from center: lets end-cap fill height */
    gap: .75rem;
    padding: .25rem .5rem;
    border-radius: 999px;
    overflow: hidden; /* key: clips the red segment to the pill */
}

    /* Keep your nav-link styles working visually even with stretch */
    .explorebar .nav-link {
        padding: .5rem .75rem;
        border-radius: 999px;
        align-self: center; /* keeps pills vertically centered */
    }

        .explorebar .nav-link:hover {
            background: rgba(0,0,0,.05);
        }

    .explorebar .dropdown-menu {
        min-width: 18rem;
    }

    /* -----------------------------------------
   Red "Start Exploring" end-cap segment
   ----------------------------------------- */

    /* Option A (preferred): wrap the button in a container:
   <div class="explorebar-cta"><button ...>Start Exploring</button></div>
*/
    .explorebar .explorebar-cta {
        margin-left: auto; /* pushes it to the far right */
        display: flex;
        align-items: center;
        justify-content: center;
        align-self: stretch; /* fill full height of explorebar */
        background: #e25555; /* match your current red */
        padding: 0 26px; /* controls width of the red section */
        border-radius: 0; /* let the explorebar pill handle rounding */
    }

        /* The button becomes “just text” inside the red segment */
        .explorebar .explorebar-cta > button {
            background: transparent;
            border: 0;
            color: #fff;
            font-weight: 700;
            padding: 0;
            height: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            /* nudge text right a bit (per your request) */
            transform: translateX(6px);
        }

            .explorebar .explorebar-cta > button:focus {
                outline: none;
            }

            .explorebar .explorebar-cta > button:focus-visible {
                outline: 2px solid rgba(255,255,255,.85);
                outline-offset: 2px;
            }

/* Make the bar a clipping pill */
#explorebarShell.explorebar {
    overflow: visible; /* allow dropdown menus to escape */
	position: relative; /* needed for the pseudo-element below */
    border-radius: 999px;
    gap: 0; /* we control spacing manually */
}

    /* Put spacing between items EXCEPT the last item before the CTA */
    #explorebarShell.explorebar > :not([data-start-exploring]) {
        margin-right: .75rem;
    }

    /* Reduce the gap between filters button and the red cap specifically */
    #explorebarShell.explorebar #exploreFiltersBtn {
        margin-right: .35rem;
    }

    /* Red end-cap */
    #explorebarShell.explorebar [data-start-exploring] {
        margin-left: auto;
        /* bleed into the explorebar padding so it becomes the true right edge */
        margin-top: -.25rem;
        margin-bottom: -.25rem;
        margin-right: -.5rem;
        display: flex;
        align-items: center;
        justify-content: center;
        background: #e25555;
        border: 0;
        box-shadow: inset 1px 0 0 rgba(0,0,0,.10);
        /* Round ONLY the right side to match the pill */
        border-radius: 0 999px 999px 0;
        /* shorter cap */
        padding: 0 22px 0 22px; /* left slightly larger to "nudge" text right */
        min-width: 0; /* ensure it doesn't get forced wide */
        width: auto;
        font-weight: 700;
        white-space: nowrap;
    }


        /* Focus ring */
        #explorebarShell.explorebar [data-start-exploring]:focus {
            outline: none;
        }

        #explorebarShell.explorebar [data-start-exploring]:focus-visible {
            outline: 2px solid rgba(255,255,255,.85);
            outline-offset: -2px;
        }

/* =========================
Landing Hero
========================= */
/* Hero content: remove the old hard-coded “push down” compensation */
body.is-landing .hero-landing .hero-content {
	display: flex;
	flex-direction: column;
	min-height: calc(100vh - var(--nav-h));
}

/* Feature cards */
body.is-landing .hero-feature-card {
    background: rgba(255, 255, 255, 1);
    border: 0;
    box-shadow: 0 10px 30px rgba(0, 0, 0, .18);
    border-radius: var(--fn-border-radius);
}

/* Push the feature cards row to the bottom */
body.is-landing .hero-landing .hero-features {
    margin-top: auto;
    padding-bottom: 1.5rem; /* breathing room above bottom edge */
}

    body.is-landing .hero-feature-card .card-body {
        padding: 1.25rem;
    }

    body.is-landing .hero-feature-card .feature-emoji {
        font-size: 2rem;
        line-height: 1;
    }

@media (max-width: 991.98px) {
    body.is-landing .hero-feature-card .card-body {
        padding: 1rem;
    }
}
.hero-landing {
    min-height: 90vh;
    /*background-image: linear-gradient(to top, rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0.25)), url('/images/landing/peles1.jpg');*/
    /*background-image: linear-gradient(to top, rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0.25)), url('/images/landing/CastelulCorvinilor.jpeg');*/
    background-image: url('/images/landing/corvincastle_1.png');
    background-size: cover;
    background-position: center center;
}

    .hero-landing h1 {
        color: #fff;
    }

    .hero-landing .hero-title,
    .hero-landing .hero-subtitle {
        color: #fff;
        text-shadow: 0 0 2px rgba(0,0,0,.75), 0 0 6px rgba(0,0,0,.5), 0 0 12px rgba(0,0,0,.25);
    }

    .hero-landing .hero-subtitle {
        font-size: 2em;
    }

.nav-fixed-width {
    width: 280px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.privacy-notice {
    position: fixed;
    left: 1rem;
    right: 1rem;
    bottom: 1rem;
    z-index: 1100;
    background: rgba(20, 20, 20, 0.95);
    color: #fff;
    border-radius: 14px;
    box-shadow: 0 10px 30px rgba(0,0,0,.35);
    backdrop-filter: blur(8px);
    transform: translateY(0);
    transition: opacity .2s ease, transform .2s ease;
}

    .privacy-notice.is-hidden {
        opacity: 0;
        transform: translateY(10px);
    }

.privacy-notice__inner {
    display: flex;
    gap: 1rem;
    align-items: center;
    justify-content: space-between;
    padding: 0.9rem 1rem;
}

.privacy-notice__text {
    min-width: 0;
}

.privacy-notice__actions {
    display: flex;
    gap: .5rem;
    flex-wrap: wrap;
}

@media (max-width: 576px) {
    .privacy-notice__inner {
        flex-direction: column;
        align-items: stretch;
    }

    .privacy-notice__actions {
        justify-content: flex-end;
    }
}

/* =========================================================
   NAVBAR + EXPLOREBAR: ALWAYS LIGHT (ALL PAGES)
   ========================================================= */

/* Navbar is always a light surface */
header.navbar.navbar-sticky {
    background-color: rgba(255, 255, 255, 0.92) !important;
    color: #111 !important;
    /* Optional: keep the frosted look everywhere */
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    /* Ensure children using Bootstrap vars don't flip in dark mode */
    --bs-body-bg: transparent;
    --bs-body-color: #111;
    --bs-emphasis-color: #111;
    --bs-navbar-color: #111;
    --bs-navbar-hover-color: #111;
    --bs-navbar-active-color: #111;
    --bs-navbar-brand-color: #111;
    --bs-navbar-brand-hover-color: #111;
}

    /* Make navbar links consistently dark */
    header.navbar.navbar-sticky a,
    header.navbar.navbar-sticky .nav-link,
    header.navbar.navbar-sticky .dropdown-toggle,
    header.navbar.navbar-sticky .btn,
    header.navbar.navbar-sticky .navbar-brand {
        color: #111 !important;
    }

    /* Dropdown menus inside navbar stay light */
    header.navbar.navbar-sticky .dropdown-menu {
        background-color: #fff !important;
        color: #111 !important;
        border-color: rgba(0,0,0,.15) !important;
    }

    header.navbar.navbar-sticky .dropdown-item {
        color: #111 !important;
    }

        header.navbar.navbar-sticky .dropdown-item:hover,
        header.navbar.navbar-sticky .dropdown-item:focus {
            background-color: rgba(0,0,0,.06) !important;
        }

/* Explorebar pill is always white */
#explorebarShell {
    background-color: #fff !important;
    border: 1px solid rgba(0,0,0,0.25) !important;
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
}

    /* Explorebar text always dark */
    #explorebarShell .nav-link,
    #explorebarShell .dropdown-toggle {
        color: #111 !important;
    }

/* Filters button: always dark button + white icon (simple + consistent) */
#exploreFiltersBtn {
    background-color: #111 !important;
    border-color: #111 !important;
}

    #exploreFiltersBtn i,
    #exploreFiltersBtn svg {
        color: #fff !important;
        fill: #fff !important;
        stroke: #fff !important;
    }

/* =========================================================
   Theme mode dropdown: always light (button + menu)
   ========================================================= */

/* Button (toggle) */
header.navbar.navbar-sticky .dropdown > .theme-switcher.btn {
    background-color: #fff !important;
    border: 1px solid rgba(0,0,0,.15) !important; /* replace outline-secondary */
    color: #111 !important;
    box-shadow: none !important;
}

    /* Button icon(s) */
    header.navbar.navbar-sticky .dropdown > .theme-switcher.btn i,
    header.navbar.navbar-sticky .dropdown > .theme-switcher.btn svg {
        color: #111 !important;
        fill: #111 !important;
        stroke: #111 !important;
    }

    /* Button hover/focus stays light */
    header.navbar.navbar-sticky .dropdown > .theme-switcher.btn:hover,
    header.navbar.navbar-sticky .dropdown > .theme-switcher.btn:focus {
        background-color: #fff !important;
        border-color: rgba(0,0,0,.25) !important;
    }

/* Menu (ONLY the one that follows the theme-switcher button) */
header.navbar.navbar-sticky .dropdown > .theme-switcher + .dropdown-menu {
    background-color: #fff !important;
    color: #111 !important;
    border-color: rgba(0,0,0,.15) !important;
}

    /* Items */
    header.navbar.navbar-sticky .dropdown > .theme-switcher + .dropdown-menu .dropdown-item {
        color: #111 !important;
        background-color: transparent !important;
    }

        /* Hover */
        header.navbar.navbar-sticky .dropdown > .theme-switcher + .dropdown-menu .dropdown-item:hover,
        header.navbar.navbar-sticky .dropdown > .theme-switcher + .dropdown-menu .dropdown-item:focus {
            background-color: rgba(0,0,0,.06) !important;
            color: #111 !important;
        }

        /* Active item (Bootstrap makes it dark in dark mode; keep it light) */
        header.navbar.navbar-sticky .dropdown > .theme-switcher + .dropdown-menu .dropdown-item.active,
        header.navbar.navbar-sticky .dropdown > .theme-switcher + .dropdown-menu .dropdown-item:active {
            background-color: rgba(0,0,0,.10) !important;
            color: #111 !important;
        }

    /* Icons and checkmarks inside items */
    header.navbar.navbar-sticky .dropdown > .theme-switcher + .dropdown-menu .theme-icon i,
    header.navbar.navbar-sticky .dropdown > .theme-switcher + .dropdown-menu .item-active-indicator {
        color: #111 !important;
    }