@charset "utf-8";
/* CSS Document */

@import url(css/layout.css);
@import url(css/modules.css);
@import url(css/base.css);
@import url(css/styles.css);

#menutitlemob {
	display: none;
}

/* Joomla 6 article image compatibility */
.item-image {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

.item-image img {
    display: block !important;
    max-width: 100% !important;
    height: auto !important;
    visibility: visible !important;
    opacity: 1 !important;
}


/* ==========================================================
   Joomla 6 compatibility - restore original E4J desktop grid
   ========================================================== */

@media screen and (min-width: 716px) {

    #main-box.mainbox-sidebarson {
        display: block !important;
        width: 100% !important;
        overflow: hidden !important;
    }

    #main-box.mainbox-sidebarson > #main {
        display: block !important;
        float: left !important;
        width: 72% !important;
        max-width: none !important;
        left: 0 !important;
        margin: 0 !important;
        box-sizing: border-box !important;
    }

    #main-box.mainbox-sidebarson > #sidebar-right {
        display: block !important;
        float: left !important;
        width: 28% !important;
        max-width: none !important;
        left: 0 !important;
        margin: 0 !important;
        box-sizing: border-box !important;
    }

    #main-box.mainbox-sidebarson > #sidebar-left {
        display: block !important;
        float: left !important;
        width: 28% !important;
        box-sizing: border-box !important;
    }

    #main-box.mainbox-sidebarson > #sidebar-right .grid-module,
    #main-box.mainbox-sidebarson > #sidebar-left .grid-module {
        width: 100% !important;
        box-sizing: border-box !important;
    }
}


/* ==========================================================
   PROJECT01 - Joomla 6 definitive desktop content layout
   ========================================================== */

@media screen and (min-width: 716px) {

    #cnt-container > #main-box.mainbox-sidebarson {
        display: grid !important;
        grid-template-columns: minmax(0, 72%) minmax(0, 28%) !important;
        grid-template-areas: "content sidebar" !important;
        align-items: start !important;

        width: 100% !important;
        max-width: 100% !important;

        position: relative !important;
        overflow: visible !important;
    }

    #cnt-container > #main-box.mainbox-sidebarson > #main {
        grid-area: content !important;

        width: auto !important;
        max-width: none !important;
        min-width: 0 !important;

        float: none !important;
        position: relative !important;

        left: auto !important;
        right: auto !important;
        top: auto !important;

        margin: 0 !important;
        box-sizing: border-box !important;
    }

    #cnt-container > #main-box.mainbox-sidebarson > #sidebar-right {
        grid-area: sidebar !important;

        width: auto !important;
        max-width: none !important;
        min-width: 0 !important;

        float: none !important;
        position: relative !important;

        left: auto !important;
        right: auto !important;
        top: auto !important;

        margin: 0 !important;
        box-sizing: border-box !important;
    }

    #cnt-container > #main-box.mainbox-sidebarson > #sidebar-right .grid-module {
        width: 100% !important;
        max-width: 100% !important;
        float: none !important;
        box-sizing: border-box !important;
    }

    #cnt-container > #main-box.mainbox-sidebarson > #sidebar-right img {
        max-width: 100% !important;
        height: auto !important;
    }

}


/* both sidebars */
@media screen and (min-width: 716px) {

    #cnt-container > #main-box.mainbox-sidebarsboth {
        display: grid !important;
        grid-template-columns: 22% minmax(0, 56%) 22% !important;
        grid-template-areas: "left content right" !important;
        align-items: start !important;
        width: 100% !important;
    }

    #cnt-container > #main-box.mainbox-sidebarsboth > #sidebar-left {
        grid-area: left !important;
    }

    #cnt-container > #main-box.mainbox-sidebarsboth > #main {
        grid-area: content !important;
    }

    #cnt-container > #main-box.mainbox-sidebarsboth > #sidebar-right {
        grid-area: right !important;
    }

    #cnt-container > #main-box.mainbox-sidebarsboth > #main,
    #cnt-container > #main-box.mainbox-sidebarsboth > .sidebar {
        float: none !important;
        position: relative !important;
        left: auto !important;
        right: auto !important;
        width: auto !important;
        max-width: none !important;
        min-width: 0 !important;
    }

}


/* mobile */
@media screen and (max-width: 715px) {

    #main-box.mainbox-sidebarson,
    #main-box.mainbox-sidebarsboth {
        display: block !important;
    }

    #main-box > #main,
    #main-box > #sidebar-right,
    #main-box > #sidebar-left {
        width: 100% !important;
        max-width: 100% !important;
        float: none !important;
        position: relative !important;
        left: auto !important;
        right: auto !important;
    }

}

/* ==========================================================
   J6 - Final desktop main/sidebar spacing fix
   ========================================================== */

@media screen and (min-width: 716px) {

    #main-box.mainbox-sidebarson {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) 305px !important;
        column-gap: 25px !important;
        align-items: start !important;
    }

    #main-box.mainbox-sidebarson > #main {
        width: auto !important;
        max-width: none !important;
        min-width: 0 !important;
        float: none !important;
        margin: 0 !important;
    }

    #main-box.mainbox-sidebarson > #sidebar-right {
        width: 305px !important;
        max-width: 305px !important;
        min-width: 0 !important;
        float: none !important;
        margin: 0 !important;
    }

    #sidebar-right .grid-module,
    #sidebar-right .module,
    #sidebar-right .moduletable {
        max-width: 100% !important;
        box-sizing: border-box !important;
    }
}


/* ==========================================================
   J6 - Prevent main content/sidebar overlap
   ========================================================== */

@media screen and (min-width: 716px) {

    #main-box.mainbox-sidebarson {
        grid-template-columns: minmax(0, 1fr) 305px !important;
        column-gap: 45px !important;
    }

    #main-box.mainbox-sidebarson > #main {
        min-width: 0 !important;
        overflow: hidden !important;
    }

    #main-box.mainbox-sidebarson > #main .main-body {
        max-width: 100% !important;
        box-sizing: border-box !important;
        overflow: hidden !important;
    }

    #main-box.mainbox-sidebarson > #main .vapserallblocks,
    #main-box.mainbox-sidebarson > #main .vapsergroup,
    #main-box.mainbox-sidebarson > #main .vapservicescont {
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    #main-box.mainbox-sidebarson > #sidebar-right {
        width: 305px !important;
        min-width: 305px !important;
        max-width: 305px !important;
        position: relative !important;
        z-index: 5 !important;
    }
}


/* ==========================================================
   Joomla 6 - VikAppointments legacy content overflow fix
   ========================================================== */

@media screen and (min-width: 716px) {

    /* Nothing inside the main column may exceed its grid cell */
    #main-box.mainbox-sidebarson > #main,
    #main-box.mainbox-sidebarson > #main .main-body,
    #main-box.mainbox-sidebarson > #main form,
    #main-box.mainbox-sidebarson > #main .vapserallblocks,
    #main-box.mainbox-sidebarson > #main .vapsergroup,
    #main-box.mainbox-sidebarson > #main .vapsergroupdescriptiondiv,
    #main-box.mainbox-sidebarson > #main .vapservicescont {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
    }

    /* Legacy HTML contains tables with fixed width=704 */
    #main-box.mainbox-sidebarson .vapsergroupdescriptiondiv table {
        width: 100% !important;
        max-width: 100% !important;
        table-layout: fixed !important;
        box-sizing: border-box !important;
    }

    #main-box.mainbox-sidebarson .vapsergroupdescriptiondiv td {
        width: auto !important;
        max-width: none !important;
        box-sizing: border-box !important;
        overflow-wrap: anywhere !important;
    }

    /* Vik services must stay inside the content column */
    #main-box.mainbox-sidebarson .vapservicescont {
        display: grid !important;
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 12px !important;
    }

    #main-box.mainbox-sidebarson .vapservicescont .vapserblock {
        width: auto !important;
        max-width: 100% !important;
        min-width: 0 !important;
        margin: 0 !important;
        box-sizing: border-box !important;
    }

    #main-box.mainbox-sidebarson .vapservicescont .vapserwrapper,
    #main-box.mainbox-sidebarson .vapservicescont .vapserdescwrap,
    #main-box.mainbox-sidebarson .vapservicescont .vapserdesc {
        width: auto !important;
        max-width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
    }

    /* Right column must never be covered */
    #main-box.mainbox-sidebarson > #sidebar-right {
        position: relative !important;
        z-index: 10 !important;
    }
}

@media screen and (max-width: 715px) {
    #main-box .vapservicescont {
        display: block !important;
    }

    #main-box .vapservicescont .vapserblock {
        width: 100% !important;
        max-width: 100% !important;
        margin-bottom: 15px !important;
    }

    #main-box .vapsergroupdescriptiondiv table {
        width: 100% !important;
        max-width: 100% !important;
    }
}


/* ==========================================================
   Joomla 6 - Global E4J right sidebar layout
   Applies to Services / Rates / Contact / VikAppointments
   ========================================================== */

@media screen and (min-width: 716px) {

    #main-box.mainbox-sidebarson {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) 305px !important;
        column-gap: 45px !important;
        align-items: start !important;
        width: 100% !important;
        max-width: 100% !important;
        overflow: visible !important;
    }

    #main-box.mainbox-sidebarson > #main {
        grid-column: 1 !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        float: none !important;
        left: auto !important;
        margin: 0 !important;
        box-sizing: border-box !important;
    }

    #main-box.mainbox-sidebarson > #sidebar-right {
        grid-column: 2 !important;
        width: 305px !important;
        min-width: 305px !important;
        max-width: 305px !important;
        float: none !important;
        left: auto !important;
        margin: 0 !important;
        position: relative !important;
        z-index: 10 !important;
        box-sizing: border-box !important;
    }

    #main-box.mainbox-sidebarson > #sidebar-right .grid-module,
    #main-box.mainbox-sidebarson > #sidebar-right .module,
    #main-box.mainbox-sidebarson > #sidebar-right .moduletable {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
    }

    #main-box.mainbox-sidebarson > #sidebar-right img {
        max-width: 100% !important;
        height: auto !important;
    }

    /* Prevent legacy Joomla 3 content from entering sidebar */
    #main-box.mainbox-sidebarson > #main .main-body,
    #main-box.mainbox-sidebarson > #main .item-page,
    #main-box.mainbox-sidebarson > #main .blog,
    #main-box.mainbox-sidebarson > #main form,
    #main-box.mainbox-sidebarson > #main table {
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    #main-box.mainbox-sidebarson > #main table {
        width: 100% !important;
    }

    #main-box.mainbox-sidebarson > #main img {
        max-width: 100% !important;
        height: auto !important;
    }
}


/* Mobile remains stacked */
@media screen and (max-width: 715px) {

    #main-box.mainbox-sidebarson {
        display: block !important;
    }

    #main-box.mainbox-sidebarson > #main,
    #main-box.mainbox-sidebarson > #sidebar-right {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        float: none !important;
        left: auto !important;
        margin: 0 !important;
    }
}


/* VikAppointments horizontal booking bar - equal field widths */
@media screen and (min-width: 716px) {

    .apphorizontal .vapformfieldsetmod {
        display: flex;
        align-items: flex-end;
        gap: 20px;
    }

    .apphorizontal .vapsearchinputdivmod {
        width: 195px !important;
        flex: 0 0 195px;
        box-sizing: border-box;
    }

    .apphorizontal .vapsearchentryinputmod,
    .apphorizontal .vapsearchentryselectmod,
    .apphorizontal .vapsearchentryinputmod input,
    .apphorizontal .vapsearchentryselectmod select,
    .apphorizontal .select2-container {
        width: 100% !important;
        box-sizing: border-box;
    }

    .apphorizontal .mod-booknow {
        width: 123px !important;
        flex: 0 0 123px;
    }

    .apphorizontal .vapsearchsubmitmod {
        width: 123px !important;
    }
}

/* FINAL - equal visible widths for VikAppointments search fields */
@media screen and (min-width: 716px) {

    .apphorizontal .vapsearchinputdivmod:not(.mod-booknow) {
        width: 195px !important;
        min-width: 195px !important;
        max-width: 195px !important;
        flex: 0 0 195px !important;
    }

    .apphorizontal .vapsearchentryinputmod,
    .apphorizontal .vapsearchentryselectmod {
        width: 195px !important;
        min-width: 195px !important;
        max-width: 195px !important;
    }

    .apphorizontal input.vapsearchdatemod {
        width: 195px !important;
        min-width: 195px !important;
        max-width: 195px !important;
        height: 32px !important;
        box-sizing: border-box !important;
    }

    .apphorizontal .select2-container {
        width: 195px !important;
        min-width: 195px !important;
        max-width: 195px !important;
    }

    .apphorizontal .select2-selection,
    .apphorizontal .select2-selection--single {
        width: 195px !important;
        height: 32px !important;
        min-height: 32px !important;
        box-sizing: border-box !important;
    }

    .apphorizontal .select2-selection__rendered {
        line-height: 30px !important;
    }

    .apphorizontal .select2-selection__arrow {
        height: 30px !important;
    }

    .apphorizontal .mod-booknow {
        width: 123px !important;
        flex: 0 0 123px !important;
    }
}

/* ==========================================================
   VikAppointments booking bar - exact equal field widths
   ========================================================== */

@media screen and (min-width: 716px) {

    form[name="vapmodulesearch"] .vapformfieldsetmod {
        display: flex !important;
        align-items: flex-end !important;
        gap: 20px !important;
    }

    form[name="vapmodulesearch"] .vapsearchinputdivmod:not(.mod-booknow) {
        width: 195px !important;
        min-width: 195px !important;
        max-width: 195px !important;
        flex: 0 0 195px !important;
        margin: 0 !important;
    }

    #vapemprowmod256 {
        width: 195px !important;
        min-width: 195px !important;
        max-width: 195px !important;
    }

    #vapcalendarmod256,
    #vapserselmod256,
    #vapempselmod256 {
        display: block !important;
        width: 195px !important;
        min-width: 195px !important;
        max-width: 195px !important;
        height: 32px !important;
        box-sizing: border-box !important;
    }

    form[name="vapmodulesearch"] .vapsearchentryinputmod,
    form[name="vapmodulesearch"] .vapsearchentryselectmod {
        width: 195px !important;
        min-width: 195px !important;
        max-width: 195px !important;
    }

    /* Select2, if VikAppointments replaces native select */
    form[name="vapmodulesearch"] .select2-container {
        width: 195px !important;
        min-width: 195px !important;
        max-width: 195px !important;
    }

    form[name="vapmodulesearch"] .select2-selection--single {
        width: 195px !important;
        height: 32px !important;
        box-sizing: border-box !important;
    }

    form[name="vapmodulesearch"] .mod-booknow {
        width: 123px !important;
        flex: 0 0 123px !important;
        margin: 0 !important;
    }

    form[name="vapmodulesearch"] .vapsearchsubmitmod {
        width: 123px !important;
        height: 32px !important;
    }
}


/* ===== SMK VikAppointments equal booking fields ===== */

@media screen and (min-width: 716px) {

    /* DATE */
    .moduletablevikapp .vapsearchentryinputmod {
        width: 195px !important;
    }

    .moduletablevikapp input.vapsearchdatemod {
        width: 195px !important;
        height: 32px !important;
        box-sizing: border-box !important;
    }

    /* SERVICE + EMPLOYEE visible boxes */
    .moduletablevikapp .vapsearchentryselectmod {
        width: 195px !important;
        min-width: 195px !important;
        max-width: 195px !important;
        height: 32px !important;
        box-sizing: border-box !important;
    }

    /*
     Keep the old E4J technique:
     select remains wider internally,
     visible wrapper is exactly 195px.
    */
    .moduletablevikapp .vapsearchentryselectmod select {
        width: 170% !important;
        height: 30px !important;
        box-sizing: border-box !important;
    }

    /* Employee wrapper */
    .moduletablevikapp [id^="vapemprowmod"] {
        width: 195px !important;
    }

    /* Keep columns aligned */
    .apphorizontal .vapsearchinputdivmod {
        width: 195px !important;
    }

    /* Book button remains smaller */
    .apphorizontal .vapsearchinputdivmod.mod-booknow {
        width: auto !important;
    }
}