/* ============================================================
   user.css — Cassiopeia 5 + Vik Components
   Clean Global Theme — Vert IT 2026 - Versio 1.4
   ============================================================ */

/* ============================================================
   0. KEVYT RESET — EI rikota moduuleja
   ============================================================ */

html, body {
    margin: 0;

  
    padding: 0;
}

*, *::before, *::after {
    box-sizing: border-box;
}
/* ============================================================
   CASSIOPEIA / BOOTSTRAP CARD OVERRIDE
   Poistaa borderin kaikista .card-elementeistä
   ============================================================ */

.card {
    border: none !important;
    box-shadow: none !important;
}

/* ============================================================
   Offline-sivun header ja kortit, joissa on tumma tausta
   Kun ollaan offline-sivulla, vaihdetaan globaalin leipätekstin muuttujan arvo vaaleaksi
   ============================================================ */

.offline-card {
    --color-text-body: var(--color-text-light);
}

/* ============================================================
   1. GLOBAALIT VÄRIT (EI DARK MODEA)
   ============================================================ */

:root {
   /* Offline sivun bg värit - muutetaan tarvittaessa muuttujaa */
    --cassiopeia-color-primary: var(--color-button-bg);
    --cassiopeia-color-hover: var(--color-button-bg-hover);
 
  /* Taustat */
    --color-bg-page: #050B12;        /* Header + sivun tausta */
    --color-bg-topbar: #0D1A28;      /* Topbar */
    --color-bg-footer: #0D1A28;      /* Footer */

    /* Tekstit */
	--color-text-main: #252525;      /* Pääväri tekstit: tumma teksti */
	--color-text-muted: #7FB4D9;     /* Muted teksti */
    --color-text-light: #ffffff;     /* Valkoinen teksti tummille taustoille */

    /*yleinen leiätekstin värimuuttuja*/
    --color-text-body: var(--color-text-main);

    /* Linkit */
    --color-link: #7FB4D9;           /* Linkin väri koko sivu */
    --color-link-hover: #A3C9E6;     /* Hover - hiiri päälle */
    --color-link-visited: #7FB4D9;   /* Vierailtu linkki */

    /* Napit */
    --color-button-bg: #12395A;      /* Linkin väri koko sivu */
    --color-button-bg-hover: #1A4A72;/* Hover - hiiri päälle */
    --color-button-text: #ffffff;    /* Napin tekstin väri HUOM! valkoinen!*/

    /* Disabled */
    --color-button-disabled-bg: var(--color-border-soft); /* näkyvämpi */
    --color-button-disabled-text: #8C9AA8;

    /* Rajaukset */
    --color-border-soft: rgba(255,255,255,0.12); /* vahvempi, näkyvä */
    
  /* Huoneotsikko -linkit */
    --color-room-link: #0D1A28;           /* Linkki otsikko*/
    --color-room-link-hover: #A3C9E6;     /* Hover otsikko*/
    --color-room-link-visited: #7FB4D9;   /* Vierailtu otsikko*/
  
	
	/* ============================================================
       NAVBAR VÄRIMAAILMA – Erilliset muuttujat pelkälle navbarille
       ============================================================ */
  
    --color-navbar-link: #7FB4D9;             /* Normaalit linkit */
    --color-navbar-link-hover: #A3C9E6;       /* Hover-väri */
    --color-navbar-link-active: #5A8AC8;      /* Aktiivinen linkki */
    --color-navbar-bg-hover: #EAF3FA;         /* Burger hover-tausta */
    --color-navbar-bg-active: #D9EAF5;        /* Burger active-tausta */

       /* Mod-bg-soft */
    --color-bg-soft: #EAF3FA;   /*Moduuliin kutsuttava teeman vaalea bg väri - huom! käytä vaalemapaa*/

}
/* ============================================================
   2. TYPOGRAFIA — GLOBAALI
   ============================================================ */

body {
    color: var(--color-text-body); /* Käyttää muuttujaa */
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
                 "Roboto", "Helvetica Neue", Arial, sans-serif;
    font-size: 15px;
    line-height: 1.6;
}

h1, h2, h3, h4, h5, h6 {
    font-family: inherit;
    color: var(--color-text-body); /* Otsikot perivät saman */
    font-weight: 600;
}

h1 { font-size: 2.1rem; }
h2 { font-size: 1.8rem; }
h3 { font-size: 1.5rem; }
h4 { font-size: 1.25rem; }
h5 { font-size: 1.05rem; }
h6 { font-size: 0.9rem; }

p {
    font-size: 0.95rem;
    color: var(--color-text-body); /* Kappaleet käyttävät muuttujaa */
}

small,
span.small {
    font-size: 0.8rem;
    color: var(--color-text-muted);
}

/* ============================================================
   3. GLOBAALI LINKKITYYLI
   ============================================================ */

/* Normaali linkki */
a:not(.btn)
:not(.vbo-pref-color-btn):not(.vbo-btn):not(.vbo-booking-btn):not(.vbo-search-btn)
:not(.vbo-availability-btn):not(.vbo-check-btn):not(.vbo-confirm-btn):not(.vbo-booknow-btn)
:not(.vri-btn):not(.vri-button):not(.vri-submit):not(.vri-search-btn):not(.vri-booking-btn)
:not(.vre-btn):not(.vre-button):not(.vre-submit):not(.vre-search-btn):not(.vre-booking-btn)
:not(.vbselector a):not(.vbbutton a) {
    color: var(--color-link);
    text-decoration: none;
    font-weight: 600;
}

/* Hover */
a:not(.btn)
:not(.vbo-pref-color-btn):not(.vbo-btn):not(.vbo-booking-btn):not(.vbo-search-btn)
:not(.vbo-availability-btn):not(.vbo-check-btn):not(.vbo-confirm-btn):not(.vbo-booknow-btn)
:not(.vri-btn):not(.vri-button):not(.vri-submit):not(.vri-search-btn):not(.vri-booking-btn)
:not(.vre-btn):not(.vre-button):not(.vre-submit):not(.vre-search-btn):not(.vre-booking-btn)
:not(.vbselector a):not(.vbbutton a):hover {
    color: var(--color-link-hover);
    text-decoration: underline;
}

/* Klikattu linkki (visited) */
a:not(.btn)
:not(.vbo-pref-color-btn):not(.vbo-btn):not(.vbo-booking-btn):not(.vbo-search-btn)
:not(.vbo-availability-btn):not(.vbo-check-btn):not(.vbo-confirm-btn):not(.vbo-booknow-btn)
:not(.vri-btn):not(.vri-button):not(.vri-submit):not(.vri-search-btn):not(.vri-booking-btn)
:not(.vre-btn):not(.vre-button):not(.vre-submit):not(.vre-search-btn):not(.vre-booking-btn)
:not(.vbselector a):not(.vbbutton a):visited {
    color: var(--color-link-visited);
}

/* ============================================================
   4. BUTTONIT — GLOBAALI
   Base styling for all standard buttons, inputs, and link-buttons
   ============================================================ */

.btn,
button,
input[type="submit"],
input[type="button"],
input[type="reset"] {
    background-color: var(--color-button-bg);
    color: var(--color-button-text);
    border: 1px solid var(--color-button-bg);
    border-radius: 0.375rem;
    padding: 0.375rem 0.75rem;
    font-weight: 600;
    font-size: 0.95rem;
    cursor: pointer;
    transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
    display: inline-block;
}

.btn:hover,
button:hover,
input[type="submit"]:hover,
input[type="button"]:hover,
input[type="reset"]:hover {
    background-color: var(--color-button-bg-hover);
    border-color: var(--color-button-bg-hover);
    color: var(--color-button-text);
}

/* Link-buttons (<a class="btn">) */
a.btn {
    background-color: var(--color-button-bg) !important;
    border-color: var(--color-button-bg) !important;
    color: var(--color-button-text) !important;
    font-weight: 600 !important;
    display: inline-block !important;
}

a.btn:hover {
    background-color: var(--color-button-bg-hover) !important;
    border-color: var(--color-button-bg-hover) !important;
    color: var(--color-button-text) !important;
}

/* ============================================================
   4A BOOTSTRAP 5 BUTTON VARIANTS — FULL OVERRIDE
   Yliajaa Cassiopeian sinisen + kaikki Bootstrap-värit
   ============================================================ */

/* Solid variants */
.btn-primary,
.btn-secondary,
.btn-success,
.btn-danger,
.btn-warning,
.btn-info,
.btn-light,
.btn-dark,
a.btn-primary,
a.btn-secondary,
a.btn-success,
a.btn-danger,
a.btn-warning,
a.btn-info,
a.btn-light,
a.btn-dark {
    background-color: var(--color-button-bg) !important;
    border-color: var(--color-button-bg) !important;
    color: var(--color-button-text) !important;

    /* Override Bootstrap + Cassiopeia CSS variables */
    --bs-btn-bg: var(--color-button-bg) !important;
    --bs-btn-border-color: var(--color-button-bg) !important;
    --bs-btn-color: var(--color-button-text) !important;
    --bs-btn-hover-bg: var(--color-button-bg-hover) !important;
    --bs-btn-hover-border-color: var(--color-button-bg-hover) !important;
    --bs-btn-hover-color: var(--color-button-text) !important;
}

.btn-primary:hover,
.btn-secondary:hover,
.btn-success:hover,
.btn-danger:hover,
.btn-warning:hover,
.btn-info:hover,
.btn-light:hover,
.btn-dark:hover,
a.btn-primary:hover,
a.btn-secondary:hover,
a.btn-success:hover,
a.btn-danger:hover,
a.btn-warning:hover,
a.btn-info:hover,
a.btn-light:hover,
a.btn-dark:hover {
    background-color: var(--color-button-bg-hover) !important;
    border-color: var(--color-button-bg-hover) !important;
    color: var(--color-button-text) !important;
}

/* Outline variants */
.btn-outline-primary,
.btn-outline-secondary,
.btn-outline-success,
.btn-outline-danger,
.btn-outline-warning,
.btn-outline-info,
.btn-outline-light,
.btn-outline-dark,
a.btn-outline-primary,
a.btn-outline-secondary,
a.btn-outline-success,
a.btn-outline-danger,
a.btn-outline-warning,
a.btn-outline-info,
a.btn-outline-light,
a.btn-outline-dark {
    color: var(--color-button-bg) !important;
    border-color: var(--color-button-bg) !important;

    --bs-btn-color: var(--color-button-bg) !important;
    --bs-btn-border-color: var(--color-button-bg) !important;
    --bs-btn-hover-bg: var(--color-button-bg) !important;
    --bs-btn-hover-border-color: var(--color-button-bg) !important;
    --bs-btn-hover-color: var(--color-button-text) !important;
}

.btn-outline-primary:hover,
.btn-outline-secondary:hover,
.btn-outline-success:hover,
.btn-outline-danger:hover,
.btn-outline-warning:hover,
.btn-outline-info:hover,
.btn-outline-light:hover,
.btn-outline-dark:hover,
a.btn-outline-primary:hover,
a.btn-outline-secondary:hover,
a.btn-outline-success:hover,
a.btn-outline-danger:hover,
a.btn-outline-warning:hover,
a.btn-outline-info:hover,
a.btn-outline-light:hover,
a.btn-outline-dark:hover {
    background-color: var(--color-button-bg) !important;
    border-color: var(--color-button-bg) !important;
    color: var(--color-button-text) !important;
}


/* ============================================================
   5. BODY + CONTENT-ALUE (Cassiopeian oma valkoinen)
   ============================================================ */

body {
    background: none !important;
}

.site-grid,
.container-main,
.site-main,
main,
.container-component {
    background: none !important;
}


/* ============================================================
   6. HEADER
   ============================================================ */

.container-header {
    background-color: var(--color-bg-page) !important;
    background-image: none !important;
    position: sticky;
    top: 0;
    z-index: 9999;
    padding: 20px 0;
    transition: padding 0.25s ease, box-shadow 0.25s ease;
}

body.header-shrink .container-header {
    padding: 6px 0;
    box-shadow: 0 2px 12px rgba(0,0,0,0.15);
}

/* ============================================================
   7. TOPBAR — KOKONAISRAKENNE
   Tarkoitus: Tausta, keskitys ja perusasettelu
   ============================================================ */

.container-topbar::before {
    /* Taustakerros, joka ulottuu koko leveydelle */
    content: "";
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    width: 100vw;
    height: 100%;
    background-color: var(--color-bg-topbar);
    border-bottom: 1px solid rgba(0,0,0,0.12);
    box-shadow: 0 2px 12px rgba(0,0,0,0.18);
    z-index: 1;
    top: 0;
}

.container-topbar {
    /* Pääsäiliö - keskitetty, kiinteä korkeus desktopissa */
    position: relative;
    width: 100%;
    max-width: 1320px;
    height: 50px; /* Samansuuruinen kuin Book Now -nappi */
    margin: 0 auto;
    padding: 0 15px;
    background: transparent;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.container-topbar .topbar-inner,
.container-topbar .container {
    /* Nollataan Cassiopeian oletusasetukset */
    position: static;
    display: block;
    width: 100%;
    max-width: 1320px;
    margin: 0 auto;
    padding: 0;
}

.container-topbar .mod-modules,
.container-topbar .topbar-inner > div,
.container-topbar .container > div {
    /* Nollataan moduulien oletusfloatit ja marginaalit */
    display: block;
    width: auto;
    float: none;
    margin: 0;
    padding: 0;
}

/* ============================================================
   TOPBAR — VIK ICONS (Vasen laita - Desktop)
   HUOM! pakotetaan ikonien väri valkoiseksi!
   EI KÄYTÄ GLOBAALEJA LINKKEJÄ
   ============================================================ */

.container-topbar .vikicons-container {
    /* Absoluuttinen asettelu vasempaan laitaan */
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
    width: auto;
    z-index: 10;
}

.container-topbar .vikicons-set {
    /* Ikonit rivissä vaaka-asetteluna */
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 20px;
    flex-wrap: nowrap;
}

.container-topbar .vikicons-item-inner {
    /* Yksittäisen ikonin sisältö */
    display: flex;
    align-items: center;
    gap: 1px;
}

.container-topbar .vikicons-container span,
.container-topbar .vikicons-container i {
    /* Ikonien koko ja väri */
    height: 13px;
    width: 13px;
    display: inline-block;
    color: #ffffff;
}

.container-topbar .vikicons-container h3,
.container-topbar .vikicons-container h3 a,
.container-topbar .vikicons-container p,
.container-topbar .vikicons-container span.vik-text {
    /* Tekstityylit */
    font-size: 12px;
    font-weight: 600;
    color: #ffffff;
    margin: 0;
    padding: 0;
    line-height: 1.4;
    white-space: nowrap;
}

/* ============================================================
   7B. TOPBAR — BOOK NOW (Oikea laita - Desktop)
   ============================================================ */
.container-topbar #mod-custom148,
.container-topbar .mod-custom {
    position: absolute;   /* Absoluuttinen asettelu oikeaan laitaan */
    right: 100px;
    top: 50%;
    transform: translateY(-50%);
    height: auto;
    display: flex;
    align-items: center;
    z-index: 20;
}

.container-topbar .book-now-btn,
.container-topbar #mod-custom148 a {
    background: #ffffff !important;
    color: #000000 !important;  /* Napit valkoinen tausta- pakotettu musta teksti kaikilla kielillä */
    padding: 2px 10px;
    border-radius: 6px;
    font-weight: 600;
    font-size: 13px;
    text-decoration: none !important;
    display: inline-flex;
    align-items: center;
    transition: 0.25s ease;
    white-space: nowrap;
}

.container-topbar .book-now-btn:hover,
.container-topbar #mod-custom148 a:hover {
    background: #e6e6e6 !important;
    color: #000000 !important;  /* ✅ Hover-tilassakin musta teksti */
}


/* ============================================================
   7C. TOPBAR — KIELIVALINTA (Oikea laita - Desktop)
   ============================================================ */

.container-topbar .mod-languages {
    /* Absoluuttinen asettelu oikeaan laitaan, Book Now -napin vasemmalle puolelle */
    position: absolute;
    right: 5px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    gap: 5px;
    margin: 0;
    z-index: 19;
    overflow: visible;
}

.container-topbar .mod-languages ul {
    /* Kielivalikon lista - vaaka-asettelu */
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    align-items: center;
    gap: 5px;
}

.container-topbar .mod-languages a {
    /* Kielilinkkien tyylit */
    color: #ffffff;
    font-weight: 600;
    font-size: 13px;
    text-decoration: none;
    padding: 2px;
    border-radius: 4px;
    background: transparent;
    display: inline-flex;
    align-items: center;
}

/* Poistetaan kielivalikon oletustaustat ja varjot */
.container-topbar .mod-languages li,
.container-topbar .mod-languages li a,
.container-topbar .mod-languages li.lang-active,
.container-topbar .mod-languages li.lang-active a {
    background: transparent !important;
    box-shadow: none !important;
    border: none !important;
}

/* ============================================================
   7D. TOPBAR — MOBIILI (Pystysuuntainen asettelu)
   Järjestys määräytyy MODUULIEN JÄRJESTYKSESTÄ Joomla-asetuksissa
   ============================================================ */

@media (max-width: 768px) {
    .container-topbar {
        /* Muutetaan flex-suunta pystysuuntaiseksi */
        height: auto;
        min-height: 50px;
        padding: 6px 15px;
        flex-direction: column;
        align-items: center;
        gap: 4px; /* Tasainen väli elementtien välillä */
    }

    /* Kaikki moduulit suhteelliseen asetteluun - järjestyksen määrää DOM/moduulien järjestys */
    .container-topbar .vikicons-container,
    .container-topbar #mod-custom148,
    .container-topbar .mod-custom,
    .container-topbar .mod-languages {
        position: relative !important;
        left: auto !important;
        right: auto !important;
        top: auto !important;
        transform: none !important;
        width: 100%;
        display: flex;
        justify-content: center;
    }

    /* Vik Icons - rivittyy tarvittaessa kahdelle riville */
    .container-topbar .vikicons-container {
        width: 100%;
    }

    .container-topbar .vikicons-set {
        /* Mahdollistaa ikoneiden rivittymisen */
        flex-direction: row;
        flex-wrap: wrap;
        gap: 8px;
        justify-content: center;
        max-width: 100%;
    }

    /* Kielivalikko - liput vaaka-asetteluna */
    .container-topbar .mod-languages ul {
        flex-wrap: wrap;
        justify-content: center;
    }

    /* Vik Icons - elementtien tyylit mobiilissa */
    .container-topbar .vikicons-container div,
    .container-topbar .vikicons-container .vikicons-item,
    .container-topbar .vikicons-container .vikicons-item-inner {
        margin: 0 auto;
        padding: 0;
        line-height: 1.1;
        height: auto;
    }
}

/* ============================================================
   ALKUPERÄINEN DESKTOP NAVIGATION (toimii Cassiopeian headerissa)
   ============================================================ */
@media (min-width: 992px) {
    .container-header .navbar {
        display: flex !important;
        justify-content: center !important;
        width: 100% !important;
    }

    .container-header .mod-menu {
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        gap: 30px !important;
        margin-left: auto !important;
        margin-right: auto !important;
        padding: 0 !important;
        text-align: center !important;
    }

    /* VAIHDELLAAN VÄRIT UUSIIN MUUTTUJIIN */
    .container-header .container-nav .mod-menu > li > a {
        color: var(--color-navbar-link) !important;
        font-weight: 600 !important;
        font-size: 1rem !important;
        padding: 8px 4px !important;
        text-decoration: none !important;
    }

    .container-header .container-nav .mod-menu > li > a:hover,
    .container-header .container-nav .mod-menu > li > a:focus {
        color: var(--color-navbar-link-hover) !important;
        text-decoration: none !important; /* Poistaa alleviivan */
    }

    .container-header .container-nav .mod-menu > li.current > a,
    .container-header .container-nav .mod-menu > li.active > a {
        color: var(--color-navbar-link-active) !important;
        text-decoration: none !important;
    }
}
/* ============================================================
   MOBIILIVALIKKO – BURGER MENU (Oikeassa reunassa + 3 viivaa)
   ============================================================ */

@media (max-width: 991.98px) {
    /* --- Navbarin perusrakenne --- */
    .container-header .navbar {
        display: flex;
        justify-content: flex-start;
        align-items: center;
        width: 100%;
    }

    /* --- Burger-nappula OIKEASSA reunassa --- */
    .container-header .navbar .navbar-toggler {
        margin-left: auto;
    }

    /* --- Avautuvan valikon tyylit --- */
    .container-header .navbar .navbar-collapse {
        background-color: #ffffff;
        padding: 0;
        margin-top: 5px;
        border-top: 1px solid rgba(0, 0, 0, 0.1);
        width: 100%;
        border-radius: 5px;
    }

    .container-header .navbar .navbar-collapse ul.mod-menu {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        justify-content: center;
        padding-left: 0;
        margin: 0 auto;
        gap: 0;
    }

    .container-header .navbar .navbar-collapse ul.mod-menu li {
        width: 100%;
        text-align: center;
    }

    /* --- Linkkien perus tyylit --- */
    .container-header .navbar .navbar-collapse ul.mod-menu li a {
        color: var(--color-navbar-link);
        font-size: 1.1rem;
        font-weight: 600;
        padding: 5px 10px; /*Valikon välistys*/
        display: block;
        text-decoration: none;
        transition: all 0.25s ease;
        border-radius: 5px;
    }

    /* --- Hover-tila --- */
    .container-header .navbar .navbar-collapse ul.mod-menu li a:hover {
        background-color: var(--color-navbar-bg-hover);
        color: var(--color-navbar-link-hover);
    }

    /* --- Active/valittu linkki --- */
    .container-header .navbar .navbar-collapse ul.mod-menu li.current > a,
    .container-header .navbar .navbar-collapse ul.mod-menu li.active > a {
        background-color: var(--color-navbar-bg-active);
        color: var(--color-navbar-link-active);
    }

    /* --- Burger-ikoni (3 viivaa) --- */
    .container-header .navbar .navbar-toggler-icon,
    .container-header .navbar button.navbar-toggler * {
        display: none;
        opacity: 0;
        visibility: hidden;
    }

    .container-header .navbar button.navbar-toggler {
        display: inline-block;
        width: 44px;
        height: 38px;
        border: 2px solid var(--color-navbar-link);
        border-radius: 4px;
        cursor: pointer;
        background-color: transparent;
        background-image: none;
        position: relative;
        padding: 0;
        margin-left: auto;
    }

    /* 🔥 TÄMÄ LUO 3 VIIVAA (SÄILYTETTY TARKALLEEN SINUN TOIMIVASTA KOODISTASI) */
    .container-header .navbar button.navbar-toggler::before {
        content: "";
        display: block;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 22px;
        height: 2.5px;
        background-color: var(--color-navbar-link);
        box-shadow:
            0 -7px 0 var(--color-navbar-link),
            0 7px 0 var(--color-navbar-link);
    }

    .container-header .navbar button.navbar-toggler::after {
        display: none;
    }
}

/* --- Burger-nappulan hover-efekti --- */
.container-header .navbar button.navbar-toggler:hover::before {
    background-color: var(--color-navbar-link-hover);
    box-shadow:
        0 -7px 0 var(--color-navbar-link-hover),
        0 7px 0 var(--color-navbar-link-hover);
    transition: all 0.25s ease-in-out;
}

.container-header .navbar button.navbar-toggler:hover {
    border-color: var(--color-navbar-link-hover);
}
/* ============================================================
   9. VIK TUOTTEIDEN — YLIAJOT (PÄÄOSIO)
   ============================================================ */
/* ============================================================
   VIK THUMBNAILS OVERRIDE
   Poistaa kuvien borderin ja varjot
   ============================================================ */

.vik-thumbnails img {
    border: none !important;
    box-shadow: none !important;
}

/* ============================================================
   VIK RENT ITEMS / SEARCH RESULTS OVERRIDE
   Poistaa borderin list-item-block ja search-result-block elementeistä
   ============================================================ */

.vri-list-item-block,
.vri-search-result-block > form {
    border: none !important;
}
/* ============================================================
  HUOM VALINNAINEN ASETUS - EI KÄYTÖSSÄ
   VIK GLOBAL BORDER OVERRIDE ( 
   Poistaa borderin kaikista Vik-moduulien yleisistä lohkoista
   TÄMÄN VOI OTTAA KÄYTTÖÖN JOS HALUTAAN KAIKKI BORDERI POIS
   ============================================================

.vik-widget,
.vbo-wrapper,
.vri-list-item-block,
.vri-search-result-block > form,
.vik-thumbnails img {
    border: none !important;
    box-shadow: none !important;
}*/


/* --- VIK BOOKING – HUONELISTAUKSEN OTSIKKOLINKKI (H4.vbrowcname > A) ---
JOS TÄMÄ OTETAAN KÄYTTÖÖN NIIN TULEE TEHDÄ UUDET GLOBAALIT VAIN TÄLLE!*/

.vbo-info-room h4.vbrowcname a {
    color: var(--color-room-link) !important;         /* Globaali perusväri */
    text-decoration: none !important;
    font-weight: 600 !important;
}

.vbo-info-room h4.vbrowcname a:hover,
.vbo-info-room h4.vbrowcname a:focus {
    color: var(--color-room-link-hover) !important;    /* Globaali hover */
    text-decoration: underline !important;
    cursor: pointer !important;
}


/* ---  MODUULIEN TYYLITELTY VAALEA TAUSTALUOKKA — mod-bg-soft --- */

.mod-bg-soft {
    background-color: var(--color-bg-soft) !important;                 /* vaalea yhtenäinen*/
}

.mod-bg-soft.card,
.mod-bg-soft .card {
    background-color: var(--color-bg-soft) !important;
    border: 1px solid rgba(0,0,0,0.10) !important;         /* ULKOKEHÄ*/
    box-shadow: none !important;
}

/* ============================================================
   10. VIK TUOTTEIDEN KAIKKI BUTTONIT (<a> tagilla olevat napit)
   Covers all Vik Booking button classes and containers
   ============================================================ */
/* Vik Booking - Base State */
.vbo-pref-color-btn,
a.vbo-pref-color-btn,
.vbo-btn,
a.vbo-btn,
.vbo-booking-btn,
a.vbo-booking-btn,
.vbo-search-btn,
a.vbo-search-btn,
.vbo-availability-btn,
a.vbo-availability-btn,
.vbo-check-btn,
a.vbo-check-btn,
.vbo-confirm-btn,
a.vbo-confirm-btn,
.vbo-booknow-btn,
a.vbo-booknow-btn,
.vbselector a.btn,
.vbbutton a.btn {
    background-color: var(--color-button-bg) !important;
    border-color: var(--color-button-bg) !important;
    color: var(--color-button-text) !important;
    font-weight: 600 !important;
    display: inline-block !important;
}

/* Vik Booking - Hover State */
.vbo-pref-color-btn:hover,
a.vbo-pref-color-btn:hover,
.vbo-btn:hover,
a.vbo-btn:hover,
.vbo-booking-btn:hover,
a.vbo-booking-btn:hover,
.vbo-search-btn:hover,
a.vbo-search-btn:hover,
.vbo-availability-btn:hover,
a.vbo-availability-btn:hover,
.vbo-check-btn:hover,
a.vbo-check-btn:hover,
.vbo-confirm-btn:hover,
a.vbo-confirm-btn:hover,
.vbo-booknow-btn:hover,
a.vbo-booknow-btn:hover,
.vbselector a.btn:hover,
.vbbutton a.btn:hover {
    background-color: var(--color-button-bg-hover) !important;
    border-color: var(--color-button-bg-hover) !important;
    color: var(--color-button-text) !important;
}

/* ============================================================
   10A: VIK RENT ITEMS BUTTON OVERRIDES
   Covers all Vik Rent Items button classes
   ============================================================ */
/* Vik Rent Items - Base State */
.vri-btn,
a.vri-btn,
.vri-button,
a.vri-button,
.vri-submit,
a.vri-submit,
.vri-search-btn,
a.vri-search-btn,
.vri-booking-btn,
a.vri-booking-btn {
    background-color: var(--color-button-bg) !important;
    border-color: var(--color-button-bg) !important;
    color: var(--color-button-text) !important;
    font-weight: 600 !important;
    display: inline-block !important;
}

/* Vik Rent Items - Hover State */
.vri-btn:hover,
a.vri-btn:hover,
.vri-button:hover,
a.vri-button:hover,
.vri-submit:hover,
a.vri-submit:hover,
.vri-search-btn:hover,
a.vri-search-btn:hover,
.vri-booking-btn:hover,
a.vri-booking-btn:hover {
    background-color: var(--color-button-bg-hover) !important;
    border-color: var(--color-button-bg-hover) !important;
    color: var(--color-button-text) !important;
}
/* ============================================================
   10BVIK RENT ITEMS — SEARCH BUTTON (ruskea)
   ============================================================ */

.mod-bg-btn .vri-search-btn,
.mod-bg-btn .vri-btn,
.mod-bg-btn .vri-button,
.mod-bg-btn .vri-submit,
.mod-bg-btn .vri-booking-btn,
.mod-bg-btn button[type="submit"],
.mod-bg-btn input[type="submit"] {
    background-color: var(--color-button-bg) !important;       /* ruskea */
    border-color: var(--color-button-bg) !important;
    color: var(--color-button-text) !important;                /* valkoinen */
    font-weight: 600 !important;
    padding: 10px 18px !important;
    border-radius: 6px !important;
    cursor: pointer !important;
}

.mod-bg-btn .vri-search-btn:hover,
.mod-bg-btn .vri-btn:hover,
.mod-bg-btn .vri-button:hover,
.mod-bg-btn .vri-submit:hover,
.mod-bg-btn .vri-booking-btn:hover,
.mod-bg-btn button[type="submit"]:hover,
.mod-bg-btn input[type="submit"]:hover {
    background-color: var(--color-button-bg-hover) !important; /* tummempi ruskea */
    border-color: var(--color-button-bg-hover) !important;
}
  
/* ============================================================
   10C: INTERACTION STATES
   Active, Focus, and Disabled states for all button types
   ============================================================ */

/* Active State - All Buttons */
.btn:active,
button:active,
input[type="submit"]:active,
input[type="button"]:active,
input[type="reset"]:active,
a.btn:active,
/* Vik Booking */
.vbo-btn:active, .vbo-pref-color-btn:active, .vbo-booking-btn:active, .vbo-search-btn:active,
.vbo-availability-btn:active, .vbo-check-btn:active, .vbo-confirm-btn:active, .vbo-booknow-btn:active,
/* Vik Rent Items */
.vri-btn:active, .vri-button:active, .vri-submit:active, .vri-search-btn:active, .vri-booking-btn:active {
    background-color: var(--color-button-bg-hover);
    border-color: var(--color-button-bg-hover);
    opacity: 0.85;
}

/* Focus State - Remove Bootstrap's default focus ring (Cassiopeia compatibility) */
.btn:focus,
button:focus,
input[type="submit"]:focus,
input[type="button"]:focus,
input[type="reset"]:focus,
a.btn:focus {
    outline: none !important;
    box-shadow: none !important;
}

/* Disabled State - All Buttons */
.btn:disabled,
button:disabled,
input[type="submit"]:disabled,
input[type="button"]:disabled,
input[type="reset"]:disabled,
a.btn:disabled,
/* Vik Booking */
.vbo-btn:disabled, .vbo-pref-color-btn:disabled, .vbo-booking-btn:disabled,
.vbo-search-btn:disabled, .vbo-availability-btn:disabled, .vbo-check-btn:disabled,
.vbo-confirm-btn:disabled, .vbo-booknow-btn:disabled,
/* Vik Rent Items */
.vri-btn:disabled, .vri-button:disabled, .vri-submit:disabled,
.vri-search-btn:disabled, .vri-booking-btn:disabled {
    background-color: var(--color-button-disabled-bg) !important;
    border-color: var(--color-button-disabled-bg) !important;
    color: var(--color-button-disabled-text) !important;
    opacity: 0.6;
    cursor: not-allowed;
}

/* ============================================================
   10D: VIK BOOKING — CALENDAR TRIGGER ICON (Hienosäätö)
   Kompakti, ikonin kokoinen tausta ilman ylimääräistä tilaa
   ============================================================ */
.vbo-caltrigger {
    display: inline-flex !important;       /* Mahdollistaa paddingin vaikuttamisen */
    align-items: center;                  /* Keskittää ikonin pystysuunnassa */
    justify-content: center;              /* Keskittää ikonin vaaka-suunnassa */
    padding: 0.25rem !important;          /* ✅ Pienennetty: Vähemmän tilaa ikonin ympärillä */
    background-color: var(--color-button-bg) !important;
    border: 1px solid var(--color-button-bg) !important;
    border-radius: 0.375rem !important;
    color: var(--color-button-text) !important;
    cursor: pointer;
    transition: background-color 0.2s ease, border-color 0.2s ease;
    line-height: 1 !important;             /* ✅ Poistaa ylimääräisen rivivälin */
    text-decoration: none !important;
    /* Poistettu min-width/min-height - ikoni määrää koon */
    height: auto !important;             /* ✅ Estää kiinteän korkeuden perimisen */
    width: auto !important;               /* ✅ Estää kiinteän leveydän perimisen */
}

.vbo-caltrigger:hover {
    background-color: var(--color-button-bg-hover) !important;
    border-color: var(--color-button-bg-hover) !important;
    color: var(--color-button-text) !important;
}

.vbo-caltrigger:active {
    background-color: var(--color-button-bg-hover) !important;
    border-color: var(--color-button-bg-hover) !important;
    opacity: 0.85;
}

.vbo-caltrigger:disabled {
    background-color: var(--color-button-disabled-bg) !important;
    border-color: var(--color-button-disabled-bg) !important;
    color: var(--color-button-disabled-text) !important;
    opacity: 0.6;
    cursor: not-allowed;
}
/* ============================================================
   VIK RENT ITEMS — MOBILE FIX (360px–480px)
   ============================================================ */

/* 1. Tee oikeasta moduulipaikasta joustava kontti */
@media (max-width: 480px) {
    .vri-right {
        display: flex !important;
        flex-wrap: wrap !important;
        align-items: center !important;
        justify-content: flex-start !important;
        gap: 8px !important;
        width: 100% !important;
    }

    /* 2. Inputit ja selectit pysyvät samalla rivillä */
    .vri-right input[type="text"],
    .vri-right select {
        flex: 0 1 auto !important;
        min-width: 110px !important;
        max-width: 48% !important;
        white-space: nowrap !important;
    }

    /* 3. Timepicker ja datepicker eivät katkea */
    .vri-right .vri-timepicker,
    .vri-right .vri-datepicker {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        flex: 0 1 auto !important;
        min-width: 110px !important;
        max-width: 48% !important;
        white-space: nowrap !important;
    }

    /* 4. Search-nappi pysyy rivillä */
    .vri-right .vri-search-btn,
    .vri-right button[type="submit"],
    .vri-right input[type="submit"] {
        flex: 0 1 auto !important;
        min-width: 110px !important;
        max-width: 48% !important;
        white-space: nowrap !important;
    }
}

/* 5. Erittäin kapea näkymä (Galaxy S23 / 360px) */
@media (max-width: 360px) {
    .vri-right {
        flex-direction: column !important;
        align-items: stretch !important;
    }

    .vri-right input[type="text"],
    .vri-right select,
    .vri-right .vri-timepicker,
    .vri-right .vri-datepicker,
    .vri-right .vri-search-btn,
    .vri-right button[type="submit"],
    .vri-right input[type="submit"] {
        max-width: 100% !important;
        width: 100% !important;
    }
}

/* ============================================================
   11: MOBILE TOUCH TARGET ENHANCEMENTS
   Bootstrap 5 mobile compatibility - ensures adequate tap targets
   ============================================================ */
@media (max-width: 767.98px) {
    .btn,
    button,
    input[type="submit"],
    input[type="button"],
    input[type="reset"],
    a.btn,
    /* Vik Booking */
    .vbo-btn, .vbo-pref-color-btn, .vbo-booking-btn, .vbo-search-btn, .vbo-availability-btn,
    .vbo-check-btn, .vbo-confirm-btn, .vbo-booknow-btn,
    .vbselector a.btn, .vbbutton a.btn,
    /* Vik Rent Items */
    .vri-btn, .vri-button, .vri-submit, .vri-search-btn, .vri-booking-btn {
        min-height: 2.5rem;
        min-width: 2.5rem;
        padding: 0.5rem 1rem;
    }
}

/* --- 12. MOBIILI-OPTIMOINTI — EI MUUTA VÄREJÄ, EI MUUTA MITÄÄN MUUTA --- */

@media (max-width: 768px) {

    /* Cassiopeia lisää mobiilissa valkoisen card-body taustan → poistetaan */
    .mod-bg-soft .card-body {
    background-color: var(--color-bg-soft) !important;   /* sama väri kuin desktop */
    }

    /* Varmistetaan että card wrapper ei vuoda valkoista */
    .mod-bg-soft.card,
    .mod-bg-soft .card {
    background-color: var(--color-bg-soft) !important;
    }
}

/* ============================================================
   MUSTA RENT ITEMS ETSI MODUULI KUVAN PÄÄLLÄ VASEMMALLA
   ============================================================ */

/* ============================================================
   1) DESKTOP — ETSI MODUULI Keskitetty 1320px container hero-kuvan päällä
   ============================================================ */

.moduletable.rent-wal {
    position: absolute;
    top: 1.0vw;
    left: 50%;
    transform: translateX(-50%);

    width: 100%;
    max-width: 1200px;/*voit muuttaa leveyttä - max content leveys 1320*/
    margin: 0 auto;
    padding: 0 10px;

    display: flex;
    justify-content: flex-start;
    align-items: flex-start;

    background: transparent;
    z-index: 100;
}


/* ============================================================
   2) Piilotetaan moduuliotsikko otsikko ulkopuolella! 
  
   ============================================================ */

.moduletable.rent-wal > h3 {
    display: none;
}


/* ============================================================
   3) SISÄLAATIKKO — Desktop 400px leveä
   ============================================================ */

.moduletable.rent-wal > .rent-wal.mod-bg-black {
    width: 400px;
    padding: 20px;

    background: #000000;
    border: 1px solid #FFFFFF;
    border-radius: 10px;
    box-shadow: 0 2px 8px rgba(255, 255, 255, 0.15);

}



/* ============================================================
   5) TABLET-VERSIO — 768px–1024px
   ============================================================ */

@media (min-width: 768px) and (max-width: 1024px) {

    /* Container pysyy keskitettynä */
    .moduletable.rent-wal {
        position: absolute;
        top: 1.5vw;
        left: 50%;
        transform: translateX(-50%);
        max-width: 1024px;
        padding: 0 20px;
    }

    /* Moduulilaatikko 600px leveäksi */
    .moduletable.rent-wal > .rent-wal.mod-bg-black {
        width: 600px;
        padding: 28px;
    }
}


/* ============================================================
   6) MOBIILIVERSIO — alle 768px
   ============================================================ */

@media (max-width: 768px) {
/* ============================================================
Vik Wall Image lisää mobiilissa 20px paddingin vasempaan, joka
työntää rent-wal moduulia sisäänpäin.
 
Korjataan tämä negatiivisilla margineilla ja vastaavasti
kasvattamalla moduulin leveyttä.
 
Lopputulos:
- moduuli reunasta reunaan
- muun sisällön padding säilyy
============================================================ */  
.vikwallimage-desc > .moduletable.rent-wal{
      margin-left:-20px;
      margin-right:-20px;
      width:calc(100% + 40px);
}
/* Container ei absolute mobiilissa */
.moduletable.rent-wal {
      position: relative;
      top: 0;
      left: 0;
      transform: none;
      max-width: 100%;
      display: block;
      width:100vw;
      max-width:100vw;
      margin:0;
      padding:10px; /*annetaan etsi- moduulille oma padding mobiiliin*/

    }

    /* Moduulilaatikko täysleveäksi */
    .moduletable.rent-wal > .rent-wal.mod-bg-black {
        width: 100%;
        padding: 10px;
        box-sizing: border-box;
    }
}

/* ============================================================
   BOTTOM-B – moduulipaikkakohtainen täysleveys
   ============================================================ */
/* Täysleveä bottom-b grid-child */
.grid-child.container-bottom-b {
    width: 100vw !important;
    max-width: 100vw !important;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
    position: relative;
    left: 50%;
    transform: translateX(-50%);
}

/* Poistetaan kortin valkoinen tausta ja min-height */
.grid-child.container-bottom-b .bottom-b.card {
    background: transparent !important;
    min-height: 0 !important;
    line-height: 0 !important;
    border: none !important;
    box-shadow: none !important;
    overflow: visible !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* Poistetaan card-body sisäinen väli */
.grid-child.container-bottom-b .bottom-b.card .card-body {
    background: transparent !important;
    min-height: 0 !important;
    line-height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* ============================================================
   FOOTER – YLIAJO
   ============================================================ */

.footer .grid-child {
  flex-wrap: wrap;
  align-items: flex-start;
  row-gap: 2rem;
}

@media (width <= 991.98px) {
  .footer .grid-child {
    flex-direction: unset;
  }
}

.footer h3 {
  font-size: 1.3rem;
  color: var(--color-text-light, #ffffff); /* Otsikot vaaleiksi */
}

.footer {
    background-color: var(--color-bg-footer) !important;
    background-image: none !important;
    color: var(--color-text-light) !important; /* Ottaa aina suoraan globaalin arvon */
    padding: 10px 5px 5px 5px !important;
    margin: 0 !important;
}

/* Jos haluat varmistaa, että footerin linkit käyttävät brändin sävyä */
.footer a {
    /*color: var(--color-text-light) !important; /*TÄMÄ KÄYTTÖÖN JOS HALUAT PAKOTTAA FOOTER LINKIT VALKOISIKSI*/
    color: var(--color-link) !important;
}

.footer a:hover {
    /*color: var(--color-text-light) !important;  /*TÄMÄ KÄYTTÖÖN JOS HALUAT PAKOTTAA FOOTER LINKIT VALKOISIKSI*/
    color: var(--color-link-hover) !important;
}

footer .menu-horizontal {
  flex-direction: row;
  gap: 1rem;
  align-items: center;
}

/* ===========================================
Vain Vik Icons linkin väri valkoiseksi. Jos tämä ei käytössä niin käyttää paletin värejä
==============================================
.container-footer .vikicons-item-icon a,
.container-footer .vikicons-item-icon a i {
    color: #ffffff !important;
    fill: #ffffff !important;
}*/



/* ============================================================
   Hero fade In - Käytetään Hero search tummassa moduulissa
   ============================================================ */

/* Toimii Vik Wallissa, Sliderissa ja Customissa */

@keyframes heroFadeIn {
    0% { opacity: 0; transform: translateY(20px); }
    100% { opacity: 1; transform: translateY(0); }
}

.hero-overlay {
    animation: heroFadeIn 1.2s ease-out 0.2s forwards;
    width: 100%;
    display: grid;
    place-items: center;
    z-index: 50;
}

/* NÄMÄ MALLINA*/
/*.hero-overlay {
    padding: 0 20px;
    display: grid !important;
    place-items: center !important;
    justify-content: center !important;
}*/

@media (max-width:768px){
    .hero-overlay{
        padding: 10px !important;
    }
}

/* ==========================================================
   HERO HORIZONTAL SEARCH TUMMA MODUULI - Käytä luokkaa .horiz-black moduulissa
   ========================================================== */

/* ==========================================================
   VIKBOOKING LAYOUT
   ========================================================== */
:is(.hero-overlay, .horiz-black) .moduletable,
:is(.hero-overlay, .horiz-black) .vbmodhorsearchmaindiv,
:is(.hero-overlay, .horiz-black) form,
:is(.hero-overlay, .horiz-black) fieldset,
:is(.hero-overlay, .horiz-black) .vbo-horizsearch-standardformat-wrap,
:is(.hero-overlay, .horiz-black) .vbo_search_horiz_container {
    float: none !important;
    overflow: visible !important; /* KALENTERI EI LEIKKAUDU */
}

/* ==========================================================
   CALENDAR
   ========================================================== */
:is(.hero-overlay, .horiz-black) .vbo-calendar,
:is(.hero-overlay, .horiz-black) .vbo-calendar-container,
:is(.hero-overlay, .horiz-black) .vbo-search-horiz-calendar {
    position: absolute !important;
    z-index: 999999 !important;
    top: 100% !important;
    left: 0 !important;
}

:is(.hero-overlay, .horiz-black) .vbo-horizsearch-standardformat-wrap,
:is(.hero-overlay, .horiz-black) .vbo_search_horiz_container {
    overflow: visible !important;
}

/* ==========================================================
   GLASS PANEL
   ========================================================== */
:is(.hero-overlay, .horiz-black) .vbmodhorsearchmaindiv,
:is(.hero-overlay, .horiz-black) .vbmodhorsearch-hum-guests-modifier {
    background: rgba(0, 0, 0, 0.55) !important;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    padding: 24px !important;
    border-radius: 14px !important;
    box-shadow: 0 4px 24px rgba(0,0,0,0.35);
    color: #fff !important;
    width: auto !important;
    max-width: 1200px !important;
}

/* ==========================================================
   INPUTS
   ========================================================== */
:is(.hero-overlay, .horiz-black) .vbmodhorsearchmaindiv input {
    background: rgba(255,255,255,0.12) !important;
    color: #fff !important;
    border: 1px solid rgba(255,255,255,0.3) !important;
    padding: 10px !important;
    border-radius: 6px !important;
}

:is(.hero-overlay, .horiz-black) .vbmodhorsearchmaindiv input::placeholder {
    color: rgba(255,255,255,0.7) !important;
}

/* ==========================================================
   CALENDAR ICONS
   ========================================================== */
:is(.hero-overlay, .horiz-black) .vbo-caltrigger,
:is(.hero-overlay, .horiz-black) .vbo-caltrigger:before,
:is(.hero-overlay, .horiz-black) .vbo-caltrigger:after,
:is(.hero-overlay, .horiz-black) .vbmodhorsearchmaindiv i.fa-calendar-alt,
:is(.hero-overlay, .horiz-black) .vbmodhorsearchmaindiv i.far.fa-calendar-alt {
    color: #fff !important;
    opacity: 1 !important;
    font-size: 20px !important;
    text-shadow: 0 0 4px rgba(0,0,0,0.8) !important;
}

:is(.hero-overlay, .horiz-black) .vbo-caltrigger:hover {
    color: #ffd700 !important;
}

/* ==========================================================
   BUTTONS
   ========================================================== */
:is(.hero-overlay, .horiz-black) .vbmodhorsearchmaindiv button {
    background-color: var(--color-button-bg) !important;
    border-color: var(--color-button-bg) !important;
    color: #fff !important;
    padding: 10px 18px !important;
    font-weight: 600 !important;
    transition: background-color 0.25s ease !important;
}

:is(.hero-overlay, .horiz-black) .vbmodhorsearchmaindiv button:hover {
    background-color: var(--color-button-bg-hover) !important;
}

:is(.hero-overlay, .horiz-black) button.vbo-pref-color-btn,
:is(.hero-overlay, .horiz-black) a.vbo-pref-color-btn,
:is(.hero-overlay, .horiz-black) .vbo-pref-color-btn {
    background-color: var(--color-button-bg) !important;
    border-color: var(--color-button-bg) !important;
    color: #fff !important;
}

/* ==========================================================
   MOBILE
   ========================================================== */
@media (max-width: 768px) {
    :is(.hero-overlay, .horiz-black) .vbmodhorsearchmaindiv {
        width: 100% !important;
        max-width: 100% !important;
        display: block !important;
        margin-top: 12px !important;
    }

    :is(.hero-overlay, .horiz-black) .vbo-horizsearch-standardformat-wrap fieldset,
    :is(.hero-overlay, .horiz-black) .vbo-horizsearch-standardformat-wrap .vbo-search-horiz-field {
        width: 100% !important;
        max-width: 100% !important;
        display: block !important;
        margin-bottom: 12px !important;
    }

    :is(.hero-overlay, .horiz-black) .vbo-horizsearch-standardformat-wrap input,
    :is(.hero-overlay, .horiz-black) .vbo-horizsearch-standardformat-wrap select {
        width: 100% !important;
    }

    :is(.hero-overlay, .horiz-black) .vbo-horizsearch-standardformat-wrap button {
        width: 100% !important;
        margin-top: 10px;
    }

    :is(.hero-overlay, .horiz-black) .vbo-calendar,
    :is(.hero-overlay, .horiz-black) .vbo-calendar-container {
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
    }

    :is(.hero-overlay, .horiz-black) .vbmodhorsearchmaindiv {
        padding: 10px !important;/* Mobbilissa pienemmät välit ympärille! */
        border-radius: 10px !important;
        backdrop-filter: blur(4px);
        -webkit-backdrop-filter: blur(4px);
    }
}

/* Vik Wall Image */
.vikwallimage-container,
.vikwallimage,
.vikwallimage-content {
    position: relative !important;
    z-index: 18 !important;
    overflow: visible !important;
}

/* VikBooking Calendar */
.vikwallimage-container .vbo-calendar,
.vikwallimage-container .vbo-calendar-container,
.vikwallimage-container .vbo-search-horiz-calendar {
    position: absolute !important;
    z-index: 9999999 !important;
}