.rs-footer {
    background: #33393E !important;
    background-image: none !important;
    color: #ffffff;
}

.rs-footer,
.rs-footer p,
.rs-footer .footer-top .widget-title,
.rs-footer .footer-top .site-map li a,
.rs-footer .footer-top .address-widget li .desc,
.rs-footer .footer-top .address-widget li .desc a,
.rs-footer .footer-top .widget-desc,
.rs-footer .footer-bottom .copyright p,
.rs-footer .footer-bottom .copyright p a,
.rs-footer .footer-bottom .copy-right-menu li a {
    color: #ffffff !important;
}

.rs-footer a {
    color: #ffffff !important;
}

.rs-footer a:active,
.rs-footer a:hover,
.rs-footer .footer-top .site-map li a:hover,
.rs-footer .footer-top .address-widget li .desc a:hover,
.rs-footer .footer-bottom .copyright p a:hover,
.rs-footer .footer-bottom .copy-right-menu li a:hover {
    color: #0075B2 !important;
}

.rs-footer .footer-bottom {
    background: rgba(0, 0, 0, 0.25) !important;
}

.rs-footer .footer-top p input[type=email] {
    box-shadow: none !important;
    border-radius: 30px !important;
    width: 90% !important;
}

/* Footer: newsletter submit button — kruh, jednoliata farba namiesto modrého gradientu */
.rs-footer .footer-top p input[type="submit"] {
    background-image: none !important;
    background-color: #0075B2 !important;
    top: 50% !important;
    right: 9% !important;
    bottom: auto !important;
    transform: translateY(-50%);
    width: 56px !important;
    height: 56px !important;
    padding: 0 !important;
    border-radius: 50% !important;
    /* neónový glow ako pri registračných buttonoch */
    transition: background-color .3s ease, box-shadow .3s ease;
}
.rs-footer .footer-top p input[type="submit"]:hover {
}

/* Footer: paper-plane ikona centrovaná na buttone */
.rs-footer .footer-top p i {
    right: 9% !important;
    top: 50% !important;
    bottom: auto !important;
    padding: 0 !important;
    width: 56px !important;
    height: 56px !important;
    transform: translateY(-50%);
    display: flex !important;
    align-items: center;
    justify-content: center;
    /* ikona v neóne spolu s buttonom */
}

/* Footer: address ikony — dark gray footer needs a visible accent */
.rs-footer .footer-top .address-widget li i {
    color: #0075B2;
}

/* Footer: copy-right-menu oddeľovacie bodky */
.rs-footer .footer-bottom .copy-right-menu li:before {
    background: #0075B2;
}

/* Scroll-to-top button */
#scrollUp i {
    background-image: none !important;
    background-color: #0075B2 !important;
}

/* Landing page karty s tieňom — modré tónovaný shadow */
.rs-services.style2 .flip-box-inner .flip-box-wrap .front-part .front-content-part {
    box-shadow: 0 15px 40px rgba(0, 117, 178, 0.28);
}

.rs-services.style5 .services-item {
    box-shadow: 0 12px 30px rgba(0, 117, 178, 0.25);
    border-radius: 10px;
}

.rs-pricing .pricing-table {
    box-shadow: 0 15px 45px rgba(0, 117, 178, 0.30);
    padding-bottom: 40px;
}

.no-margin {
    margin: 0;
}

.lightboxOverlay {
    position: fixed !important;
    z-index: 9999 !important;
}

.lightbox {
    position: fixed !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    z-index: 10000 !important;
}

/* Desktop - tmavé logo */
.logo-dark {
    display: block;
}

.logo-white {
    display: none;
}

.full-width-header .rs-header .menu-area .logo-part a {
    display: flex !important;
    align-items: center !important;
    height: auto !important;
    line-height: normal !important;
}

.full-width-header .rs-header .topbar-area.style2 .topbar-contact li:last-child a {
    border-right: none;
}

/* ---------- Light gray header ---------- */
.full-width-header .rs-header .topbar-area.style2 {
    background: #E7EEF2;
    background-image: none;
}

.full-width-header .rs-header .topbar-area.style2 .topbar-contact li,
.full-width-header .rs-header .topbar-area.style2 .topbar-contact li a,
.full-width-header .rs-header .topbar-area.style2 .toolbar-sl-share ul li a {
    color: #1f2937;
}

.full-width-header .rs-header .topbar-area.style2 .topbar-contact li i:before {
    color: #1f2937;
}

.full-width-header .rs-header .topbar-area.style2 .topbar-contact li a {
    border-right-color: #d1d5db;
}

.full-width-header .rs-header .topbar-area.style2 .topbar-contact li a:hover,
.full-width-header .rs-header .topbar-area.style2 .toolbar-sl-share ul li a:hover {
    color: #0075B2;
}

.full-width-header .rs-header .menu-area {
    background: #E7EEF2;
    background-image: none;
}

/* Default (desktop): ukáž iba desktop verziu obrázka, mobilnú skry.
   Mobilné media queries nižšie tento default prekryjú. */
.image-for-mobile {
    display: none !important;
}

.image-for-desktop {
    display: block !important;
}

/* image-for-mobile je flex kontajner — .image-part vnútri by inak zmrslo
   na šírku obsahu, čo skreslí max-width: 50% na obrázku. */
.image-for-mobile .image-part {
    width: 100%;
    justify-content: center;
}

@media (max-width: 991px) {
    .full-width-header .rs-header .menu-area {
        transition: all 0.3s ease !important;
        background: #33393E !important;
        background-image: none !important;
    }

    .full-width-header .rs-header .menu-area .main-menu .rs-menu ul.nav-menu li a {
        color: #ffffff !important;
    }

    .mt-4 {
        margin-top: 0 !important;
    }

    .logo-dark {
        display: none !important;
    }

    .logo-white {
        display: block !important;
    }

    .logo-part {
        height: 65px !important;
        line-height: normal !important;
        display: flex !important;
        align-items: center !important;
        float: left !important;
    }


}

.offcanvas-flags {
    margin-top: 20px;
    display: flex;
    justify-content: center;
}

.sk-flag {
    display: inline-block;
    margin-right: 20px;
}

.cs-flag {
    display: inline-block;
    margin-right: 20px;

}

.en-flag {
    display: inline-block;
}

/* xs - extra small (do 575px) */
@media (max-width: 575px) {
    .rs-animation-shape {
        display: flex;
        justify-content: center;
    }

    .rs-about .rs-animation-shape .images {
        display: flex;
        justify-content: center;
    }

    .rs-about .rs-animation-shape .images img {
        max-width: 80% !important;
    }


    .rs-about {
        padding-top: 50px !important;
    }


    .rs-why-choose .container .row .col-lg-4 .image-part img {
        max-width: 50%;

    }

    .rs-about .container .row .col-lg-4 img {
        max-width: 50%;
    }

    .rs-why-choose .container .row .col-lg-4 {
        display: flex;
        justify-content: center;
    }

    .rs-about .container .row .col-lg-4 {
        display: flex;
        justify-content: center;
    }

    .col-lg-4 .image-part {
        display: flex;
        justify-content: center;
    }

    .image-for-desktop {
        display: none !important;
    }

    .image-for-mobile {
        display: flex !important;
        margin-top: 50px;
    }

    .mobile-padding-bottom {
        padding-bottom: 0;
    }

    .rs-animation-shape .pattern {
        display: flex;
        justify-content: center;
    }

    .rs-animation-shape .pattern img {
        max-width: 80%;
    }

    .project-img a {
        display: flex;
        justify-content: center;
    }

    .rs-contact .col-lg-4 {
        display: flex;
        justify-content: center;
    }

    .rs-contact img {
        max-width: 40%;
    }

    /*.rs-why-choose .container .row .col-lg-6 .image-part img {*/
    /*    max-width: 50%;*/
    /*}*/
    .rs-why-choose .container .row .col-lg-6 .image-part {
        display: flex;
        justify-content: center;

    }

    .container .row .col-12 .rs-contact.bg15 {
        display: flex !important;
        justify-content: center;
    }

    .company-desktop {
        display: none;
    }

    .company-mobile {
        display: flex;
        justify-content: center;
    }
}

/* sm - small (576px - 767px) */
@media (min-width: 576px) and (max-width: 767px) {
    .rs-about .rs-animation-shape .images img {
        max-width: 40% !important;
    }

    .rs-about .rs-animation-shape .images {
        display: flex;
        justify-content: center;
    }

    .rs-about .rs-animation-shape .pattern img {
        max-width: 50% !important;
    }

    .rs-about .rs-animation-shape .pattern {
        display: flex;
        justify-content: center;
    }

    .rs-about {
        padding-top: 50px !important;
    }

    /*.rs-why-choose .container .row .col-lg-4 .image-part img {*/
    /*    max-width: 80%;*/
    /*}*/
    /*.rs-about .container .row .col-lg-4 img {*/
    /*    max-width: 50%;*/
    /*}*/
    .rs-why-choose .container .row.col-lg-4 {
        display: flex;
        justify-content: center;
    }

    .rs-why-choose .container .row .col-lg-4 {
        display: flex;
        justify-content: center;
    }

    .col-lg-4 .image-part {
        display: flex;
        justify-content: center;
    }

    .image-for-desktop {
        display: none !important;
    }

    .image-for-mobile {
        display: flex !important;
        margin-top: 50px;
    }

    .project-img a {
        display: flex;
        justify-content: center;
    }

    .mobile-padding-bottom {
        padding-bottom: 0;
    }

    .rs-animation-shape .pattern {
        display: flex;
        justify-content: center;
    }

    .rs-animation-shape .pattern img {
        max-width: 50%;
    }

    .rs-contact .col-lg-4 {
        display: flex;
        justify-content: center;
    }

    .rs-contact img {
        max-width: 40%;
    }

    .rs-why-choose .container .row .col-lg-6 .image-part img {
        max-width: 80%;
    }

    .rs-why-choose .container .row .col-lg-6 .image-part {
        justify-content: center;
        display: flex;
    }

    .rs-about .style1 .container-title-background {
        max-width: 100% !important;
    }

    .rs-about .style1 .row {

    }

    .container .row .col-12 .rs-contact.bg15 {
        display: flex !important;
        justify-content: center;
    }

    .company-desktop {
        display: none;
    }

    .company-mobile {
        display: flex;
        justify-content: center;
    }

}


/* md - medium (768px - 991px) */
@media (min-width: 768px) and (max-width: 991px) {
    .rs-about .rs-animation-shape .images img {
        max-width: 40% !important;
    }

    .rs-about .rs-animation-shape .images {
        display: flex;
        justify-content: center;
    }

    .rs-about .rs-animation-shape .pattern img {
        max-width: 40% !important;
    }

    .rs-about .rs-animation-shape .pattern {
        display: flex;
        justify-content: center;
    }

    .rs-about {
        padding-top: 50px !important;
    }

    .col-lg-7.col-md-12.pl-40.md-pl-15.md-pt-200.sm-pt-0 {
        padding-top: 0;
    }

    .rs-animation-shape .pattern {
        margin-top: 20px;
        margin-bottom: 20px;
    }

    .rs-why-choose .container .row .col-lg-4 .image-part img {
        max-width: 40%;
    }

    .rs-about .container .row .col-lg-4 img {
        max-width: 40%;
    }

    .rs-why-choose .container .row .col-lg-4 {
        display: flex;
        justify-content: center;
    }

    .rs-about .container .row .col-lg-4 {
        display: flex;
        justify-content: center;
    }

    .col-lg-4 .image-part {
        display: flex;
        justify-content: center;
    }

    .image-for-desktop {
        display: none !important;
    }

    .image-for-mobile {
        display: flex !important;
        margin-top: 50px;
    }

    .project-img a {
        display: flex;
        justify-content: center;
    }

    .mobile-padding-bottom {
        padding-bottom: 0;
    }

    .rs-contact .col-lg-4 {
        display: flex;
        justify-content: center;
    }

    .rs-contact img {
        max-width: 40%;
    }

    .rs-why-choose .container .row .col-lg-6 .image-part img {
        max-width: 50%;
    }

    .rs-why-choose .container .row .col-lg-6 .image-part {
        justify-content: center;
        display: flex;
    }

    .company-desktop {
        display: none;
    }

    .company-mobile {
        display: flex;
        justify-content: center;
    }

}

/* lg - large (992px - 1199px) */
@media (min-width: 992px) and (max-width: 1199px) {
    .rs-about .rs-animation-shape .pattern img {
        max-width: 80% !important;
    }

    .rs-about .rs-animation-shape .pattern {
        display: flex;
        justify-content: right;
    }

    .col-lg-5.col-md-12.md-mb-50 {
    }

    /*.rs-why-choose .container .row .col-lg-4 .image-part img {*/
    /*    !*max-width: 80%;*!*/
    /*}*/
    /*.rs-about .container .row .col-lg-4 img {*/
    /*    !*max-width: 80%;*!*/
    /*}*/
    .image-for-mobile {
        display: none !important;
    }

    .image-for-desktop {
        display: block !important;
    }

    .project-img a {
        display: flex;
        justify-content: center;
    }

    .mobile-padding-bottom {
        padding-bottom: 0;
    }

    /*.rs-why-choose .container .row .col-lg-6 .image-part img {*/
    /*    max-width: 50%;*/
    /*}*/
    /*.rs-why-choose .container .row .col-lg-6 .image-part {*/
    /*    justify-content: center;*/
    /*    display: flex;*/
    /*}*/
    .company-desktop {
        display: none;
    }

    .company-mobile {
        width: 100%;
        display: flex;
        justify-content: center;
    }

    .rs-footer .footer-bottom .container .y-middle {
        justify-content: center;
    }

    .rs-footer .footer-bottom .container .row.mt-1 .text-right {
        width: 100%;
        justify-content: center;
        padding-right: 20%;
        padding-left: 20%;
    }

    .rs-footer .footer-bottom .container .row.mt-1 .empty {
        display: none;
    }

    .rs-footer .footer-bottom .container .y-middle .text-right .copy-right-menu {
        display: flex;
        justify-content: center;
    }
}


/* xl - extra large (1200px - 1399px) */
@media (min-width: 1200px) and (max-width: 1650px) {
    .rs-about .rs-animation-shape .pattern img {
        max-width: 80% !important;
    }

    .rs-about .rs-animation-shape .pattern {
        display: flex;
        justify-content: right;
    }

    .col-lg-5.col-md-12.md-mb-50 {
    }

    .company-desktop {
        display: block;
    }

    .company-mobile {
        display: none;
    }

}

/* xxl - extra extra large (1400px a viac) */
@media (min-width: 1400px) {
    .company-desktop {
        display: block;
    }

    .company-mobile {
        display: none;
    }
}

/* ===== OFF CANVAS ===== */
.right_menu_togle {
    position: fixed !important;
    top: 0 !important;
    right: -500px !important;
    left: auto !important;
    height: 100vh !important;
    overflow-y: auto !important;
    z-index: 999999 !important;
    transition: right 0.4s ease !important;
    width: 320px !important;
    padding: 25px 30px !important;
    background: #33393E !important;
    background-image: none !important;
    box-shadow: -5px 0 30px rgba(0, 0, 0, 0.35) !important;
    color: #ffffff;
}

.right_menu_togle.open {
    right: 0 !important;
}

/* Overlay */
.offwrap {
    display: none !important;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100vh !important;
    background: rgba(0, 0, 0, 0.5) !important;
    z-index: 999998 !important;
    cursor: pointer !important;
    backdrop-filter: none !important;
    transition: none !important;
}

.offwrap.open {
    display: block !important;
}

body.nav-expanded .offwrap {
    display: none !important;
}

body.nav-expanded .offwrap.open {
    display: block !important;
}

/* Close button */
.right_menu_togle .close-btn {
    text-align: right;
}

.right_menu_togle .close-btn .humburger {
    display: inline-grid;
    grid-template-columns: repeat(3, 8px);
    gap: 4px;
    padding: 5px;
    text-align: right;
}

.right_menu_togle .close-btn .humburger span {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #ffffff;
    display: block;
}

.right_menu_togle .close-btn .humburger span.dot2,
.right_menu_togle .close-btn .humburger span.dot4,
.right_menu_togle .close-btn .humburger span.dot6,
.right_menu_togle .close-btn .humburger span.dot8 {
    background: #0075B2;
}

/* Logo */
.right_menu_togle .canvas-logo {
    padding-bottom: 20px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.15);
    margin-bottom: 10px;
}

.right_menu_togle .canvas-logo img {
    max-height: 36px;
}

/* Nav items */
.right_menu_togle .sidebarnav_menu {
    padding: 0;
    margin: 0;
    list-style: none;
}

.right_menu_togle .sidebarnav_menu > li {
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

.right_menu_togle .sidebarnav_menu > li > a {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 0;
    font-size: 15px;
    font-weight: 600;
    color: #ffffff;
}

.right_menu_togle .sidebarnav_menu > li > a:hover {
    color: #0075B2;
}

.right_menu_togle .sidebarnav_menu .sub-menu-offcanvas li a {
    display: block;
    padding: 8px 10px;
    font-size: 14px;
    color: rgba(255, 255, 255, 0.75);
}

.right_menu_togle .sidebarnav_menu .sub-menu-offcanvas li:last-child a {
    border-bottom: none;
}

.right_menu_togle .sidebarnav_menu .sub-menu-offcanvas li a:hover {
    color: #0075B2;
}

/* Contact v off-canvas */
.right_menu_togle .canvas-contact {
    margin-top: 20px;
    padding-top: 20px;
}

.right_menu_togle .canvas-contact .address-list {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 12px;
    gap: 10px;
}

.right_menu_togle .canvas-contact .address-list i:before {
    font-size: 18px;
    color: #0075B2;
}

.right_menu_togle .canvas-contact .address-list a {
    color: #ffffff;
    font-size: 14px;
}

.right_menu_togle .canvas-contact .address-list a:hover {
    color: #0075B2;
}

/* Prihlásenie button v off-canvas — jednoliata farba namiesto modrého gradientu
   + neónový glow ako pri registračných buttonoch */
.right_menu_togle .login-btn-part .readon.learn-more {
    background-image: none !important;
    background-color: #0075B2 !important;
    /* nižší button — základ .readon.learn-more má padding 14px 40px (cca 52px vysoký) */
    padding: 10px 30px;
    font-size: 15px;
    line-height: 1.4;
    transition: background-color .3s ease, box-shadow .3s ease, text-shadow .3s ease;
}
.right_menu_togle .login-btn-part .readon.learn-more:hover {
}

/* Off-canvas: všetok text biely */
.right_menu_togle,
.right_menu_togle p,
.right_menu_togle span,
.right_menu_togle li,
.right_menu_togle a {
    color: #ffffff !important;
}

.login-btn-part {
    display: flex;
    justify-content: center;
}

/* Hamburger ikona */
#mobilemenu i {
    font-size: 22px;
    color: #ffffff;
    display: inline-flex;
    justify-content: right;
}

/* Close button - krížik */
.right_menu_togle .close-btn a#nav-close {
    font-size: 24px;
    width: 40px;
    height: 40px;
    display: inline-flex;
    align-items: flex-start;
    justify-content: right;
    border-radius: 50%;
    transition: all 0.3s ease;
    padding: 0;
}

.right_menu_togle .close-btn a#nav-close:hover {
    color: #0075B2;
}

.right_menu_togle .close-btn a#nav-close {
    color: #ffffff;
}

/*koniec offcanvas*/

.rs-banner.main-home.gastrotech {
    background: url(images/gastrotech2.webp);
    background-size: cover;
    background-repeat: no-repeat;
    min-height: 765px;
}

/*.rs-banner.main-home .content-wrap .it-title{*/
/*    font-size: 50px;*/
/*}*/
/*.rs-banner.main-home .content-wrap .it-description {*/
/*    font-size: 25px;*/
/*}*/
/* Hero text na širokých obrazovkách: container je fixne 1260px, ale banner obrázok
   škáluje s viewportom — monitor sa posúva doprava a text mu dobieha pod hranu.
   V pásme 1300–1699px preto textový blok zúžime, aby ostal v tmavej ploche vľavo.
   Pod 1300px aj od 1700px vyššie ostáva layout bez zásahu. */
@media (min-width: 1300px) and (max-width: 1699px) {
    .rs-banner.main-home .content-wrap {
        max-width: 600px;
    }
}

/* Heading line pod nadpismi (čiara s pobehujúcou bodkou) — skrytá */
.heading-line {
    display: none;
}

/* Na mobile skryť desktop menu */
@media (max-width: 991px) {
    .rs-menu-area {
        display: none !important;
    }

    .gastrotech-project {
        padding-top: 195px;
    }

    .gastrotech-services .container .row.mb-10 {
        margin-bottom: 30px;
    }

    .image-branch {
        margin-bottom: 45px;
    }

    .about-section {
        padding-top: 200px;
    }


}

.rs-about .container .rs-animation-shape .about-image{
    max-width:100% !important;
}

/* Podpis pod fotkou (O nás).
   Fotka je užšia ako stĺpec, preto obrázok aj podpis skládame do jedného
   vycentrovaného stĺpca — inak by sa podpis centroval na celú šírku stĺpca.
   flex-direction: column zároveň prebíja `display: flex` z media queries
   nad, ktoré by podpis inak postavili vedľa fotky. */
.rs-about .rs-animation-shape .images.images-person {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.rs-about .rs-animation-shape .about-person {
    margin-top: 18px;
    text-align: center;
    font-size: 17px;
    line-height: 1.3;
    color: #101010;
}

.rs-about .rs-animation-shape .about-person .name {
    font-weight: 700;
}

.rs-about .rs-animation-shape .about-person .designation {
    font-weight: 400;
}


@media (max-width: 991px) {
    .menu-area.menu-sticky {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        z-index: 998 !important;
    }

    .einvoice-banner {
        position: fixed !important;
        top: 65px !important;
        left: 0 !important;
        right: 0 !important;
        z-index: 999 !important;
    }

    #cta-sticky-banner {
        display: block !important;
        position: fixed !important;
        top: 87px !important;
        left: 0 !important;
        right: 0 !important;
        z-index: 999 !important;
        padding: 2px 0 !important;
        /* podklad vo farbe buttonov */
        background: #0075B2;
        border-bottom: 1px solid rgba(255, 255, 255, 0.25);
        /* Skrytý na štarte — triedu .cta-banner-visible pridá scroll listener
           v inc_header.jsp, keď hero button "Začať zadarmo" odscrolluje z obrazovky. */
        opacity: 0;
        visibility: hidden;
        transform: translateY(-10px);
        transition: opacity .25s ease, transform .25s ease, visibility .25s ease;
    }
    #cta-sticky-banner.cta-banner-visible {
        opacity: 1;
        visibility: visible;
        transform: none;
    }
    #cta-sticky-banner span {
        color: #ffffff;
    }
    /* button ako outline biely */
    #cta-banner-link {
        padding-top: 4px !important;
        padding-bottom: 4px !important;
        background: transparent;
        border: 1px solid #ffffff;
        color: #ffffff;
        transition: background-color .3s ease, color .3s ease;
    }
    /* výplň len na dotyk počas stlačenia — po pustení sa vráti (na rozdiel od :hover,
       ktorý na dotykových zariadeniach po kliknutí "zamrzne") */
    #cta-banner-link:active {
        background: #ffffff;
        color: #0075B2;
    }

    /* Banner je pri načítaní skrytý a je position:fixed (po zobrazení obsah len prekryje),
       preto sa rezervuje iba menu 65 + einvoice 22 = 87px. */
    .main-content {
        padding-top: 87px;
    }

    /* Všetky stránky okrem landing page (triedu dáva inc_header.jsp) — banner je vidieť
       hneď od načítania, takže sa jeho 40px rezervuje v odsadení obsahu. */
    .main-content.cta-banner-always {
        padding-top: 127px;
    }
    .main-content.cta-banner-always #cta-sticky-banner {
        opacity: 1;
        visibility: visible;
        transform: none;
    }

    /* Einvoice banner je len na slovenskej verzii (sk/inc_header.jsp:452). Na cs a en
       sa tých 22px aj tak rezervovalo, takže pod fixným menu zostával prázdny biely
       pruh — a keď sa objavil CTA banner, visel 22px pod menu.
       Viaže sa to na lang dokumentu, nie na triedu v markupe: hlavičky ju nemajú a
       html[lang] je jediný spoľahlivý rozdiel, ktorý na stránke už existuje.
       Pri pridaní einvoice bannera do cs/en stačí odtiaľ jazyk vyhodiť. */
    html[lang="cs"] .main-content,
    html[lang="en"] .main-content {
        padding-top: 65px;
    }

    html[lang="cs"] .main-content.cta-banner-always,
    html[lang="en"] .main-content.cta-banner-always {
        padding-top: 105px;
    }

    html[lang="cs"] #cta-sticky-banner,
    html[lang="en"] #cta-sticky-banner {
        top: 65px !important;
    }

    /* Na sk oddeľuje tmavý pásik s logom a hamburgerom od obsahu zelený einvoice
       banner. Na cs a en ten banner nie je, takže menu (#33393E) splýva s tmavým
       obsahom pod ním — spodná hrana nie je vidieť. Nahrádza ho mäkký biely glow
       pod pásikom. Pri doplnení einvoice bannera do cs/en toto zmizne.
       Záporný spread (-10px) je podstatný: bez neho má tieň pri hrane elementu plnú
       silu a nástup vyzerá ako border. Takto sa obrys tieňa najprv stiahne dovnútra
       pásika, pri hrane je už rozblednutý a von preteká len difúzny chvost. */
    html[lang="cs"] .full-width-header .rs-header .menu-area,
    html[lang="en"] .full-width-header .rs-header .menu-area {
        box-shadow: 0 12px 22px -10px rgba(255, 255, 255, 0.22);
    }
    .rs-banner .container .row .md-mb-140{
        margin-bottom: 40px;
        /*margin-top: 40px;*/
    }
.rs-banner .container .row .md-mb-140 .mt-120{
        margin-top: 0;
    }
}

/* Hover len pre zariadenia s myšou — na dotyku by biela výplň po kliknutí zostala */
@media (max-width: 991px) and (hover: hover) and (pointer: fine) {
    #cta-banner-link:hover {
        background: #ffffff;
        color: #0075B2;
    }
}

@media (max-width: 991px) {
    .flip-box-inner:hover .flip-box-wrap .back-front {
        transform: rotateX(0deg) !important;
    }

    .flip-box-inner .flip-box-wrap .back-front {
        display: none !important;
    }
}

.owl-stage{
    display:flex;
    align-items: center;
}
/* Príchod z inej stránky cez #trial-form (klik rieši JS v inc_header.jsp).
   Na mobile/tablete stačí odsadenie pod fixné vrstvy, 200px by formulár zbytočne stlačilo dole. */
#trial-form {
    scroll-margin-top: 200px;
}
@media (max-width: 991px) {
    #trial-form {
        scroll-margin-top: 100px;
    }
}

/* Príchod z CTA meeting cez #meeting-form (implementation.jsp). Rovnaký problém ako
   pri #trial-form vyššie — bez odsadenia kotva zarovná sekciu na vrch okna a fixné
   vrstvy prekryjú nadpis aj odstavec nad formulárom.
   Kotva #trial-form sedí priamo na karte formulára, kým táto na sekcii, ktorá má
   vlastný pt-80 (md-pt-75). Desktopových 200px je odladených v prehliadači. */
#meeting-form {
    scroll-margin-top: 200px;
}
@media (max-width: 991px) {
    #meeting-form {
        scroll-margin-top: 100px;
    }
}

/* Tých 100px vyššie je odladených na sk, kde je nad obsahom fixná vrstva 127px
   (menu 65 + einvoice banner 22 + CTA banner 40). Na cs a en je iba 65px: einvoice
   banner tam nie je (sk/inc_header.jsp:452) a CTA banner sa nezobrazí, lebo hlavičky
   cs/en nepridávajú triedu cta-banner-always. Bez tohto override kotva nechá o 62px
   väčšiu medzeru a formulár skočí nižšie, ako má.
   Rovnaký princíp ako pri .main-content vyššie — viaže sa na html[lang], nie na triedu
   v markupe. Pri doplnení einvoice bannera / triedy do cs a en stačí odtiaľ jazyk
   vyhodiť. Na desktope sa nič neprepisuje: tam je fixná vrstva vo všetkých jazykoch
   rovnaká (einvoice aj CTA banner sú fixné len pod 991px). */
@media (max-width: 991px) {
    html[lang="cs"] #meeting-form,
    html[lang="en"] #meeting-form {
        scroll-margin-top: 38px;
    }
}

/*#trial-form-mobile {*/
/*    scroll-margin-top: 105px;*/
/*}*/

.rs-footer .footer-bottom .copy-right-menu li{
    padding-left: 17px;
    padding-right: 11px;
}

/* Footer copy-right-menu: v xl rozsahu je container 1140px, takže na 7 odkazov
   (vrátane API) už nezostane miesto a menu sa zlomí do druhého riadku.
   Stlačíme odsadenia — ušetrí to ~70px bez zmeny veľkosti písma. */
@media (min-width: 1200px) and (max-width: 1399px) {
    .rs-footer .footer-bottom .copy-right-menu li {
        padding-left: 13px;
        padding-right: 5px;
    }
}

/*instant-install2*/
.instant-install-text{
    font-size: 2rem;
}

@media (max-width: 991px) {
    .instant-install-text {
        font-size: 1rem;
    }
}

@media only screen and (max-width: 480px) {
    .gastro-title.sec-title4 .title {
        font-size: 25px;
    }
 .gastro-title-en.sec-title4 .title {
        font-size: 24px;
    }
}

/* Hero sekcia — úpravy pre mobil xs+sm */
@media (max-width: 767px) {
    .rs-banner.main-home {
        min-height: auto;
        padding-top: 0 !important;
        padding-bottom: 0 !important;
        background: none;
    }

    /* Container + row full-width, aby pozadia stĺpcov išli od okraja po okraj */
    .rs-banner.main-home .container {
        max-width: 100%;
        padding-left: 0;
        padding-right: 0;
    }
    .rs-banner.main-home .row {
        margin-left: 0;
        margin-right: 0;
    }

    /* Horný stĺpec: banner obrázok na celú šírku a na celú výšku obrazovky.
       Od viewportu sa odpočíta 127px fixných vrstiev (menu 65 + einvoice 22 + CTA banner 40).
       dvh (nie vh) — inak hero prerastie pod ohyb, keď je panel prehliadača odsunutý. */
    .rs-banner.main-home .col-lg-7 {
        background: url(assets/images/banner/offeris-office-background.webp);
        background-size: cover;
        background-repeat: no-repeat;
        /* Pozícia banner obrázka: X Y (px, %, alebo left/center/right / top/center/bottom) */
        background-position: center center;
        min-height: calc(100dvh - 127px);
        display: flex;
        flex-direction: column;
        padding: 30px 0 !important;
        margin-bottom: 0 !important;
    }

    /* cs a en nemajú einvoice banner, takže fixné vrstvy sú len menu 65 + CTA banner 40 */
    html[lang="cs"] .rs-banner.main-home .col-lg-7,
    html[lang="en"] .rs-banner.main-home .col-lg-7 {
        min-height: calc(100dvh - 105px);
    }

    /* Dolný stĺpec: modré bg15 pozadie na celú šírku */
    .rs-banner.main-home .col-lg-5 {
        background: url(assets/images/bg/steps-area.png);
        background-repeat: no-repeat;
        background-position: center center;
        background-size: cover;
        background-color: #dce4f6;
        padding: 40px 0 !important;
    }

    /* Text v hornom stĺpci: v šírke container-a (rovnaký odstup ako zvyšok stránky).
       flex:0 — nadpis drží vrch hero, voľný priestor si berie .hero-cta v strede */
    .rs-banner.main-home .content-wrap {
        width: 100%;
        max-width: 540px;
        margin: 0 auto !important;
        padding: 0 15px;
        text-align: center;
        flex: 0 0 auto;
    }

    /* Formulár v dolnom stĺpci: v šírke container-a a vycentrovaný */
    .rs-banner.main-home .col-lg-5 .rs-contact {
        max-width: 540px;
        margin: 0 auto;
        padding: 0 15px;
    }
    .rs-banner.main-home .col-lg-5 .contact-wrap {
        max-width: 100%;
        margin: 0 auto;
    }

    .rs-banner.main-home .content-wrap .it-title {
        font-size: 32px;
        line-height: 1.2;
        padding-bottom: 15px;
    }
    .rs-banner.main-home .content-wrap .it-description {
        font-size: 20px;
        line-height: 1.4;
    }

    /* Gastrotech varianta: iný obrázok na pozadí ľavého stĺpca */
    .rs-banner.main-home.gastrotech .col-lg-7 {
        background: url(images/gastrotech2.webp);
        background-size: cover;
        background-repeat: no-repeat;
        background-position: center center;
    }
}

/* Hero sekcia — tablet: obrázok zostáva na .rs-banner (nie na stĺpci ako na mobile),
   výška na celú obrazovku mínus 127px fixných vrstiev (menu 65 + einvoice 22 + CTA banner 40) */
@media (min-width: 768px) and (max-width: 991px) {
    .rs-banner.main-home {
        min-height: calc(100dvh - 127px);
        background-position: center center;
        display: flex;
        flex-direction: column;
        padding-top: 40px !important;
        padding-bottom: 40px !important;
    }
    /* cs a en bez einvoice bannera — menu 65 + CTA banner 40 */
    html[lang="cs"] .rs-banner.main-home,
    html[lang="en"] .rs-banner.main-home {
        min-height: calc(100dvh - 105px);
    }
    /* container → row → stĺpec musia natiahnuť výšku, aby popisný text sadol na spodok hero */
    .rs-banner.main-home .container {
        width: 100%;
        flex: 1 1 auto;
        display: flex;
    }
    .rs-banner.main-home .container > .row {
        flex: 1 1 auto;
        width: 100%;
    }
    .rs-banner.main-home .col-lg-7 {
        display: flex;
        flex-direction: column;
    }
    /* mt-120 z markupu a padding-top zo style.css by odsunuli nadpis od vrchu hero */
    .rs-banner.main-home .content-wrap {
        margin-top: 0 !important;
        padding-top: 0;
        flex: 0 0 auto;
    }
}

/* Veľké obrazovky — obsah banner obrázka ešte o 45px vyššie.
   Základ je v style.css `0 15%`; calc mieša % (presah obrázka nad výšku hero) s pevnými
   45px navyše. Presah je tu už 160px+, takže posun nemôže odhaliť spodný okraj obrázka. */
@media (min-width: 1669px) {
    .rs-banner.main-home {
        background-position: 0 calc(15% - 45px);
    }
}

/* Popiska k hero background obrázku — vždy v pravom dolnom rohu hero sekcie.
   Kotví sa na .rs-banner (na desktope aj tablete nesie obrázok on, na mobile ho nesie
   .col-lg-7, ktorý je jediným obsahom banneru — spodok je teda v oboch prípadoch rovnaký).
   pointer-events:none — popiska nesmie brať kliky obsahu hero sekcie. */
.rs-banner.main-home {
    position: relative;
}

.rs-banner.main-home .ai-image-note {
    position: absolute;
    right: 15px;
    bottom: 8px;
    z-index: 2;
    font-size: 12px;
    line-height: 1.2;
    font-weight: 400;
    color: rgba(255, 255, 255, 0.7);
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
    pointer-events: none;
}

@media (max-width: 767px) {
    .rs-banner.main-home .ai-image-note {
        right: 12px;
        bottom: 6px;
        font-size: 11px;
    }
}

/* Popiska k obrázku v sekcii Služby — pod obrázkom (na rozdiel od hero, kde je obrázok
   celoplošné pozadie a popiska nemá kam inam ísť). Obrázok je obsahový, takže ho
   neprekrývame.
   flex-direction/align-items: .image-part sa na niektorých breakpointoch prepína na
   display:flex + justify-content:center (viď media queries vyššie v tomto súbore) —
   bez stĺpcového smeru by popiska sadla vedľa obrázka, nie pod neho. Na desktope je
   .image-part bežný blok a tieto dve vlastnosti sú neúčinné. */
.rs-why-choose .image-part {
    flex-direction: column;
    align-items: center;
}

/* text-align: right platí na desktope (od 992px), kde .image-part je blok a obrázok
   vypĺňa celý stĺpec — popiska tak sadne presne na jeho pravý okraj. Pod 992px je
   .image-part flex s align-items:center a obrázok je užší než stĺpec; popiska sa tam
   zmrští na šírku textu a ostáva vycentrovaná pod obrázkom (text-align je bez účinku). */
.rs-why-choose .image-part .ai-image-note,
.image-part.image-branch .ai-image-note,
.rs-animation-shape .images .ai-image-note {
    display: block;
    margin-top: 10px;
    font-size: 12px;
    line-height: 1.3;
    color: #7a8699;
    text-align: right;
}

/* Stránky odvetví — druhý (obsahový) obrázok v sekcii. Používajú sa dva obaly:
   .image-part.image-branch a .rs-animation-shape > .images. Popiska ide len k tomu
   druhému obrázku, úvodný obrázok hore (-title.webp) ju nemá — a keďže sa CSS viaže
   na samotný span, prázdny obal úvodného obrázka to nijako neovplyvní.
   flex-direction/align-items sú poistka pre breakpointy, kde sa obal prepína na flex. */
.image-part.image-branch,
.rs-animation-shape .images {
    flex-direction: column;
    align-items: center;
}

/* Obrázok v ľavom stĺpci riadku (gastrotechnika, priamy predaj) — popiska patrí k jeho
   ľavému okraju, inak by odskočila na stred sekcie, preč od obrázka. Viaže sa na pozíciu
   stĺpca, nie na triedu v markupe, takže zarovnanie sleduje prípadnú zmenu poradia
   stĺpcov. Pod 992px sú stĺpce pod sebou a popiska je vycentrovaná pod obrázkom
   (align-items z pravidla vyššie), takže sa toto pravidlo neprejaví. */
.row > [class*="col-"]:first-child .ai-image-note {
    text-align: left;
}

/* Blog — popiska ide priamo do obrázka (ľavý dolný roh), nie pod neho ako pri obsahových
   obrázkoch podstránok: obrázok je tu hlavička článku a hneď pod ním nasleduje nadpis,
   samostatný riadok medzi nimi by tú väzbu rozbil.
   Odsadenie 12px drží popisku mimo zaobleného rohu obrázka (border-radius: 10px).
   Čierny text bez podkladu a bez tieňa. Pravé dolné rohy všetkých blogových obrázkov sú
   svetlé (svetlomodrá, biela, žltá, bledozelená, cyan), takže čierna je na nich čitateľná
   aj bez tieňa.
   .blog-img má position:relative už zo style.css, .bs-img ho potrebuje doplniť.
   pointer-events:none — popiska nesmie brať klik z odkazu na článok pod ňou. */
.rs-inner-blog .blog-details .bs-img {
    position: relative;
}

.rs-inner-blog .blog-item .blog-img .ai-image-note,
.rs-inner-blog .blog-details .bs-img .ai-image-note {
    position: absolute;
    right: 12px;
    bottom: 10px;
    z-index: 2;
    font-size: 11px;
    line-height: 1.2;
    font-weight: 400;
    color: #000;
    pointer-events: none;
}

@media (max-width: 767px) {
    .rs-inner-blog .blog-item .blog-img .ai-image-note,
    .rs-inner-blog .blog-details .bs-img .ai-image-note {
        right: 10px;
        bottom: 7px;
        font-size: 10px;
    }
}

/* Poznámka o autorstve na konci článku — posledný prvok v .blog-full, vpravo dole pod
   textom. Bledosivá a menšie písmo ju držia mimo čítacieho toku článku; margin-top
   odsadzuje od posledného odstavca viac, než je bežná medzera medzi odstavcami. */
.rs-inner-blog .blog-full .blog-ai-note {
    margin: 35px 0 0;
    font-size: 13px;
    line-height: 1.4;
    color: #c9ced5;
    text-align: right;
}

/* Formulár žiadosti o stretnutie (implementácia) — vymedzený ako karta, rovnako ako
   karty FAQ a cenníka: kartu drží samotný shadow v značkovej modrej #0075B2, bez linky.
   padding — .contact-widget doteraz žiadny nemal, inak by polia sedeli na hrane karty. */
#meeting-form .contact-widget {
    background: #fff;
    border-radius: 10px;
    padding: 40px;
    box-shadow: 0 12px 30px rgba(0, 117, 178, 0.25);
}

@media (max-width: 575px) {
    #meeting-form .contact-widget {
        padding: 25px 20px;
    }
}

/* Cenník — zrušenie posunu z témy. style.css:6778 dáva .rs-pricing margin-top: -150px
   (pozostatok z demo šablóny, kde mal cenník zasahovať do banneru nad ním) plus
   position: relative, takže sa vykresľuje NAD predchádzajúcou sekciou.
   Na landing page tak cenník prekrýval spodok sekcie Služby: obal .rs-project mal
   pt-80, čiže po odrátaní 150px sa celý blok vytiahol o 70px hore. Doteraz to
   maskovalo väčšie pt na obale (pt-110), ale aj tak išlo len o kompenzáciu magickým
   číslom — odstup medzi sekciami nezodpovedal tomu, čo bolo napísané v triedach.
   Po vynulovaní platí padding tak, ako je deklarovaný. */
.rs-pricing {
    margin-top: 0;
}

/* Krátky banner (nadpis + odstavec na sivom podklade, sekcie odvetví).
   Nadpis ide vždy cez plnú šírku containera — téma má v .sec-title2 .title
   max-width: 490px, takže bez tohto pravidla sa dlhší nadpis zbytočne láme.
   Predtým to riešila trieda .testi-title v markupe; tá ale patrí komponente
   referencií (.rs-testimonial ... .testi-title) a na nadpisoch bola len
   recyklovaným háčikom na `max-width: unset` — z názvu nebolo poznať, čo robí. */
.short-banner .sec-title2 .title {
    max-width: unset;
}

/* FAQ
   Bez orámovania a bez podfarbenia na hover — kartu vymedzuje samotný shadow,
   ten istý ako karty na landing page (.rs-services.style5 .services-item).
   Otvorená otázka sa odlišuje silnejším shadowom (predtým to riešila modrá linka).
   margin-bottom musel narásť z 12px: shadow má rozostrenie 30px a dosahuje ~27px pod
   kartu, takže pri 12px by dopadal na nasledujúcu otázku a opticky ich zlepil. */
.faq-item {
    border: none;
    border-radius: 10px;
    margin-bottom: 30px;
    background: #fff;
    overflow: hidden;
    box-shadow: 0 12px 30px rgba(0, 117, 178, 0.25);
}
.faq-item[open] {
    box-shadow: 0 18px 42px rgba(0, 117, 178, 0.35);
}
.faq-item > summary {
    list-style: none;
    cursor: pointer;
    padding: 18px 24px;
    font-size: 17px;
    font-weight: 600;
    color: #101010;
    display: flex;
    align-items: center;
    justify-content: space-between;
    user-select: none;
    transition: color .3s ease;
}
.faq-item > summary::-webkit-details-marker { display: none; }
.faq-item > summary::after {
    content: '+';
    font-size: 24px;
    font-weight: 400;
    color: #0075B2;
    margin-left: 16px;
    transition: transform 0.2s ease;
    line-height: 1;
}
.faq-item[open] > summary::after {
    content: '−';
}

/* Text otázky sa zafarbí na firemnú modrú — na hover a potom natrvalo, kým je otvorená.
   Pozadie zostáva biele. Znak +/− je modrý už zo základu, netreba ho riešiť.
   Hover je v guarde na myš, aby na dotyku po ťuknutí nezostal visieť; mobil má
   otázky riešené vlastným blokom nižšie. */
.faq-item[open] > summary {
    color: #0075B2;
}

@media (hover: hover) and (pointer: fine) {
    .faq-item > summary:hover {
        color: #0075B2;
    }
}
.faq-item .faq-answer {
    padding: 0 24px 22px 24px;
    color: #333;
    line-height: 1.7;
    font-size: 15px;
}
.faq-item .faq-answer a {
    color: #0075B2;
    text-decoration: underline;
}

/* FAQ: mobil a tablet — len odsadenie odpovede.
   Farby otázky sa tu úmyselne neprepisujú, aby bol mobil zladený s desktopom:
   biele pozadie a modrý text pri otvorenej otázke. Pôvodne tu boli otázky
   obrátene (modré pozadie, biely text) a ešte skôr gradient #03228f → #0e73e4. */
@media (max-width: 991.98px) {
    .faq-item[open] {
        box-shadow: 0 2px 8px rgba(0, 117, 178, 0.15);
    }
    .faq-item .faq-answer {
        padding: 18px 24px 22px 24px;
    }
}

/* CTA tlačidlá (Objednať, Prihlásenie, Registrácia, Sign up…) — jemne zaoblené namiesto pill 30px */
.readon.buy-now,
.readon.learn-more,
.quote-btn,
.submit-btn {
    border-radius: 10px!important;
}
/* Prihlásenie v mobilnom menu (zelený rámček) — má inline border, tu doplníme len radius */
.nav-menu > li.d-md-none > a[href*="offeris.com"] {
    border-radius: 10px;
    display: inline-block;
    padding: 6px 14px;
}

/* ============ Pricing toggle (pill switcher) ============ */
.pricing-toggle {
    position: relative;
    display: flex;
    background: #eef1f6;
    border-radius: 999px;
    padding: 5px;
    max-width: 440px;
    margin: 0 0 50px 0;
    gap: 4px;
    box-shadow: inset 0 1px 3px rgba(0,0,0,.06);
}
.pricing-toggle-slider {
    position: absolute;
    top: 5px;
    left: 5px;
    width: calc(50% - 5px);
    height: calc(100% - 10px);
    background-image: none;
    background-color: #0075B2;
    border-radius: 999px;
    transition: transform .35s cubic-bezier(.4,0,.2,1);
    /* pôvodná hĺbka (neónový glow odstránený spolu s glowom na buttonoch) */
    box-shadow: 0 6px 16px rgba(0, 117, 178, .4);
    z-index: 1;
}
.pricing-toggle-slider.is-monthly {
    transform: translateX(100%);
}
.pricing-toggle-btn {
    position: relative;
    z-index: 2;
    flex: 1;
    border: none;
    background: transparent;
    padding: 13px 10px;
    font-size: 15px;
    font-weight: 600;
    color: #55607a;
    cursor: pointer;
    border-radius: 999px;
    transition: color .3s;
    white-space: nowrap;
    line-height: 1.2;
}
.pricing-toggle-btn.active {
    color: #fff;
}
.pricing-toggle-btn .pt-save {
    display: inline-block;
    margin-left: 5px;
    font-size: 11px;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 999px;
    background: #d7263d;
    color: #fff;
    transition: background .3s, color .3s;
}
.pricing-toggle-btn.active .pt-save {
    background: rgba(255,255,255,.25);
    color: #fff;
}
@media (max-width: 576px) {
    .pricing-toggle { max-width: 100%; margin: 40px 0 0 0; }
    .pricing-toggle-btn { font-size: 12px; padding: 12px 4px; }
    .pricing-toggle-btn .pt-save { font-size: 10px; padding: 2px 6px; margin-left: 4px; }
}

.faq-reg-buttom{
    color: white !important;
}

/* Kontaktný formulár: mobil a tablet — sivý border aby nesplynul s pozadím */
@media (max-width: 991.98px) {
    .rs-contact .contact-widget {
        padding: 30px 24px;
        border-radius: 12px;
        background: #fff;
        border: 1px solid #d0d5dd;
        box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
    }
    .rs-contact .contact-box {
        width: 100%;
    }

    /* Formulár žiadosti o stretnutie border nepotrebuje — kartu tu vymedzuje
       modrý shadow z #meeting-form .contact-widget vyššie, sivá linka navyše
       len zdvojovala okraj. Ostatné kontaktné formuláre si border ponechávajú. */
    #meeting-form .contact-widget {
        border: none;
    }
}

/* Objednávka Offeris — pricing table plná šírka stĺpca (len mobil a tablet) */
@media (max-width: 991.98px) {
    .rs-pricing .pricing-table {
        max-width: none !important;
        margin: 0 !important;
    }
}

/* ==========================================================================
   Objednávkový formulár (offeris_order, offeris_order_roomiq)
   Trieda .order-form je v markupe na oboch sekciách — .rs-pricing (Parametre
   objednávky) a .rs-contact (Vaše údaje). Predtým boli pravidlá naviazané na
   .rs-pricing.pb-40 a .rs-contact.pt-20.md-pt-40, čo prestalo platiť pri
   zjednotení paddingov sekcií na 80/80.
   ========================================================================== */

/* Obe polovice sú biela karta bez orámovania, vymedzuje ich modrý shadow —
   rovnaká modrá #0075B2 ako karty FAQ, cenníka a formulára na stretnutie. */
.order-form .contact-widget {
    background: #fff;
    border: none;
    border-radius: 10px;
    padding: 30px;
    box-shadow: 0 12px 30px rgba(0, 117, 178, 0.25);
}

/* Na desktope sú Parametre objednávky aj Vaše údaje bez tieňa — Parametre stoja vedľa
   cenových kariet, ktoré vlastný tieň už majú, a formulár tak zbytočne nesúperí o
   pozornosť. Pod 992px sa obe polovice spájajú do jednej karty a tam tieň nesie celý
   vizuálny rámec, preto ho obe potrebujú (pravidlá nižšie). */
@media (min-width: 992px) {
    .order-form .contact-widget {
        box-shadow: none;
    }
}

/* Tlačidlá na objednávkových stránkach (Použiť kupón, Potvrdiť objednávku) — rovnaký
   dizajn ako CTA na landing page (.rs-trial-form .submit-btn): jednoliata #0075B2,
   radius 10px a neónový glow. Téma má na .add-btn gradient #03228f→#0e73e4 a radius
   3px, čo sa s ostatnými tlačidlami na webe rozchádzalo.
   Bez zúženia na .order-form — .add-btn sa používa výhradne na objednávkových
   stránkach vrátane potvrdzovacích, ktoré tú triedu nemajú.
   background-image musí ísť explicitne na none aj v :hover — téma tam gradient
   prehadzuje a bez toho by presvital. */
.add-btn {
    padding: 16px 24px;
    border-radius: 10px;
    font-size: 16px;
    font-weight: 600;
    letter-spacing: 0.2px;
    background-image: none;
    background-color: #0075B2;
    transition: transform .2s ease, box-shadow .2s ease, text-shadow .2s ease;
}

.add-btn:hover {
    transform: translateY(-2px);
    background-image: none;
    background-color: #0075B2;
}

.add-btn:active {
    transform: translateY(0);
}

/* Kupónový akordeón — téma má na ňom #106eea (style.css:9870 a 9887), čo je iná modrá
   než firemná. Prepisuje sa rovnakým postupom ako odkazy nižšie v tomto súbore. */
.rs-checkout .coupon-toggle .accordion .card {
    border-top-color: #0075B2;
}

.rs-checkout .coupon-toggle .accordion .card .card-header .card-title button,
.rs-checkout .coupon-toggle .accordion .card .card-header .card-title button:hover {
    color: #0075B2;
}

/* Pole pre kód a tlačidlo "Použiť kupón" v jednom riadku a rovnako vysoké. Téma to
   skladala floatom (style.css:9901: width 47% + float left + margin-right 50px) a obe
   časti mali inú výšku aj zaoblenie — input 45px a hranaté rohy, .add-btn cez padding
   16px cca 56px a radius 10px — takže tlačidlo sedelo nižšie a vytŕčalo.
   Riešené flexom na .card-body; odstavec nad nimi ide cez celú šírku.
   Spodný padding 50px bol vo flexe zbytočný, slúžil len na obtekanie floatu. */
.rs-checkout .coupon-toggle .accordion .card .card-body {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    padding-bottom: 20px;
}

.rs-checkout .coupon-toggle .accordion .card .card-body > p {
    flex: 0 0 100%;
    margin-bottom: 0;
}

.rs-checkout .coupon-toggle .accordion .card .card-body .coupon-code-input {
    float: none;
    width: auto;
    margin-right: 0;
    flex: 1 1 220px;
}

.rs-checkout .coupon-toggle .accordion .card .card-body .coupon-code-input input {
    height: 52px;
    border-radius: 10px;
}

.rs-checkout .coupon-toggle .accordion .card .card-body .add-btn {
    flex: 0 0 auto;
    height: 52px;
    padding: 0 24px;
}

/* Polia formulára — bez tohto by Bootstrap dal pri kliknutí do poľa svoj vlastný modrý
   focus ring (#0d6efd). Rovnaké prevedenie ako registračný formulár na landing page
   (.rs-trial-form .modern-form .from-control:focus). */
.order-form .form-control:focus,
.order-form .from-control:focus,
.order-form .coupon-code-input input:focus {
    outline: none;
    border-color: #0075B2;
    box-shadow: 0 0 0 4px rgba(0, 117, 178, 0.15);
}

/* Do 991px sú Parametre aj Vaše údaje pod sebou a v rovnakej šírke, takže z nich
   spravíme jednu kartu: medzera medzi sekciami ide na nulu a zaoblenie ostáva len na
   vonkajších rohoch.
   Obe polovice si nechávajú plný shadow z pravidla vyššie (rovnaký ako karty na
   landing page), takže po bokoch tieni normálne. Na spoji by ale tieň hornej karty
   dopadal na dolnú a vznikla by tam linka — preto sa každej polovici cez clip-path
   oreže presne tá strana, ktorou sa dotýkajú. Záporné hodnoty v inset() nechávajú
   ostatné tri strany voľné, aby ich shadow mohol prerásť. */
@media (max-width: 991.98px) {
    .rs-pricing.order-form {
        padding-bottom: 0 !important;
    }
    /* Medzeru medzi polovicami robí md-mb-50 na stĺpci s Parametrami objednávky.
       Oba stĺpce v riadku majú rovnaké triedy (col-lg-6 md-mb-50), takže ich odlíši
       len pozícia — stĺpec s formulárom je v riadku posledný. Stĺpcu s cenovými
       kartami margin ostáva, ten od formulára oddelený byť má. */
    .rs-pricing.order-form .row > [class*="col-"]:last-child {
        margin-bottom: 0 !important;
    }
    .rs-contact.order-form {
        padding-top: 0 !important;
    }

    /* Aby na spoji nebol skok, musia byť obe polovice v mieste dotyku vo VNÚTRI svojho
       tieňového obdĺžnika, nie na jeho hrane — na hrane blur tieň zoslabí na polovicu.
       Rieši to spread 12px: obdĺžnik presahuje kartu na všetky strany, takže pri spoji
       je tieň v oboch polovicach v plnej sile a rovnaký. Preto majú obe rovnakú
       deklaráciu; nižšia alfa kompenzuje, že spread tieň zhusťuje.
       Prepad pod spodkom karty dopĺňa druhý tieň so záporným spreadom — do bokov sa
       prakticky nepremieta, takže ich nezhusťuje. */
    .rs-pricing.order-form .contact-widget,
    .rs-contact.order-form .contact-widget {
        box-shadow: 0 0 30px 12px rgba(0, 117, 178, 0.15);
    }
    .rs-pricing.order-form .contact-widget {
        border-radius: 10px 10px 0 0;
        padding-bottom: 0;
        clip-path: inset(-45px -45px 0 -45px);
    }
    .rs-contact.order-form .contact-widget {
        border-radius: 0 0 10px 10px;
        padding-top: 30px;
        clip-path: inset(0 -45px -45px -45px);
        box-shadow: 0 0 30px 12px rgba(0, 117, 178, 0.15),
                    0 14px 28px -12px rgba(0, 117, 178, 0.25);
    }
}

@media (max-width: 575px) {
    .order-form .contact-widget {
        padding: 25px 20px;
    }
    .rs-contact.order-form .contact-widget {
        padding-top: 25px;
    }
}

/* Cookie consent modal — override legacy .modal / .modal-content pravidiel v style.css,
   ktoré kolidujú s Bootstrap centrovaním (.modal padding-top:200px, .modal-content width:80%). */
#cookieConsent.modal {
    padding-top: 0;
}

@media (max-width: 767.98px) {
    #cookieConsent .modal-dialog {
        margin: 0.5rem auto;
        max-width: calc(100% - 1rem);
    }
    #cookieConsent .modal-content {
        padding: 0;
        width: 100%;
    }
    #cookieConsent .modal-body {
        padding: 1rem;
    }
    #cookieConsent .modal-header {
        padding: 0.75rem 1rem;
    }
}

/* Cookie consent modal — Bootstrap primary (#0d6efd) prehodený na brand modrú
   z landing page (#0075B2, hover #005e8f). Scoped na #cookieConsent, aby to
   neovplyvnilo btn-primary inde na webe. */
#cookieConsent .btn-primary {
    background-color: #0075B2;
    border-color: #0075B2;
    color: #fff;
}

#cookieConsent .btn-primary:hover,
#cookieConsent .btn-primary:focus,
#cookieConsent .btn-primary:active,
#cookieConsent .btn-primary.active {
    background-color: #005e8f;
    border-color: #005e8f;
    color: #fff;
}

#cookieConsent .btn-outline-primary {
    color: #0075B2;
    border-color: #0075B2;
}

#cookieConsent .btn-outline-primary:hover,
#cookieConsent .btn-outline-primary:focus,
#cookieConsent .btn-outline-primary:active,
#cookieConsent .btn-outline-primary.active {
    background-color: #0075B2;
    border-color: #0075B2;
    color: #fff;
}

#cookieConsent .btn-primary:focus,
#cookieConsent .btn-primary:focus-visible,
#cookieConsent .btn-outline-primary:focus,
#cookieConsent .btn-outline-primary:focus-visible {
    box-shadow: 0 0 0 0.25rem rgba(0, 117, 178, 0.35);
}

#cookieConsent a,
#cookieConsent .text-primary {
    color: #0075B2 !important;
}

#cookieConsent a:hover,
#cookieConsent .text-primary:hover {
    color: #005e8f !important;
}

/* Reviews section */
.rs-reviews .rs-carousel .owl-stage {
    display: flex;
    align-items: stretch;
}
.rs-reviews .rs-carousel .owl-item {
    display: flex;
    height: auto;
}
.rs-reviews .review-item {
    background: #ffffff;
    border-radius: 10px;
    padding: 25px 25px 25px 25px;
    box-shadow: 0 15px 45px rgba(0, 117, 178, 0.30);
    width: 90%;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.rs-reviews .review-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 22px 55px rgba(0, 117, 178, 0.40);
}
.rs-reviews .review-author {
    display: flex;
    align-items: center;
    padding-bottom: 15px;
    border-bottom: 1px solid #eef1f8;
    margin-bottom: 18px;
}
.rs-reviews .review-author-info {
    display: flex;
    flex-direction: column;
}
.rs-reviews .review-author-name {
    color: #0A0A0A;
    font-size: 17px;
    font-weight: 600;
    line-height: 1.3;
}
.rs-reviews .review-author-company {
    color: #0075B2;
    font-size: 14px;
    font-weight: 500;
    margin-top: 3px;
}
.rs-reviews .review-rating {
    color: #f5a623;
    font-size: 20px;
    letter-spacing: 3px;
    margin-bottom: 15px;
}
.rs-reviews .review-text {
    color: #333333;
    font-size: 16px;
    line-height: 28px;
    font-style: italic;
    margin-bottom: 0;
}
.rs-reviews .rs-carousel .owl-stage-outer {
    padding: 35px 25px 70px 25px;
    margin: -35px -25px -70px -25px;
}
.rs-reviews .owl-dots {
    text-align: center;
    margin-top: 30px;
}
.rs-reviews .owl-dots .owl-dot {
    width: 25px;
    height: 8px;
    display: inline-block;
    margin: 0 6px;
    padding: 3px 0;
    border-radius: 30px;
    border: none;
    transition: all 0.3s ease;
    background: #0075B2;
    box-shadow: 0 3px 8px 0 rgba(0, 0, 0, 0.25);
    opacity: 0.4;
}
.rs-reviews .owl-dots .owl-dot:hover,
.rs-reviews .owl-dots .owl-dot.active {
    width: 40px;
    opacity: 1;
}

.screenshots-carousel .project-item,
.screenshots-carousel .project-item .project-img,
.screenshots-carousel .project-item .project-img img {
    box-sizing: border-box;
}
.screenshots-carousel .project-item .project-img img {
    display: block;
    max-width: 100%;
    height: auto;
    border-radius: 6px;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.07);
}
.screenshots-carousel .rs-carousel .owl-stage-outer {
    padding: 15px 5px 25px;
    margin: -15px -5px -25px;
}
.screenshots-carousel .owl-dots {
    text-align: center;
    margin-top: 30px;
}
.screenshots-carousel .owl-dots .owl-dot {
    width: 25px;
    height: 8px;
    display: inline-block;
    margin: 0 6px;
    padding: 3px 0;
    border-radius: 30px;
    border: none;
    transition: all 0.3s ease;
    background: #0075B2;
    box-shadow: 0 3px 8px 0 rgba(0, 0, 0, 0.25);
    opacity: 0.4;
}
.screenshots-carousel .owl-dots .owl-dot:hover,
.screenshots-carousel .owl-dots .owl-dot.active {
    width: 40px;
    opacity: 1;
}

/* ==========================================================================
   Manuál (sk/manual_new.jsp) — sidebar + prepínanie sekcií + odrážky
   ========================================================================== */
.manual-content > section { display: none; }
.manual-content > section.active { display: block; }

.manual-toc {
    position: sticky;
    top: 100px;
}
.manual-toc ul {
    list-style: none;
    padding-left: 0;
}
.manual-toc a {
    color: #444;
    text-decoration: none;
    display: block;
    padding: 6px 10px;
    border-radius: 4px;
    transition: all 0.2s;
}
.manual-toc a:hover { background: #f5f5f5; color: #0075B2; }
.manual-toc a.active { background: #e7f1ff; color: #0075B2; font-weight: 600; }
.manual-toc a.active strong { color: #0075B2; }

.manual-xref {
    background: #f8f9fa;
    border-left: 3px solid #0075B2;
    padding: 8px 14px;
    margin: 12px 0;
    border-radius: 3px;
    font-size: 0.95em;
}
.manual-xref::before { content: "⚙ "; }

/* Odrážky a číslovanie — scoped iba na telo manuálu, nezasahuje do zvyšku webu */
.manual-content ul,
.manual-content ol {
    padding-left: 1.5rem;
    margin-bottom: 1rem;
}
.manual-content ul { list-style: disc outside; }
.manual-content ol { list-style: decimal outside; }
.manual-content ul ul { list-style: circle outside; }
.manual-content ul ul ul { list-style: square outside; }
.manual-content ol ol { list-style: lower-alpha outside; }
.manual-content ol ol ol { list-style: lower-roman outside; }
.manual-content li {
    margin-bottom: 0.35rem;
    line-height: 1.6;
    display: list-item;
}
.manual-content li::marker { color: #333; }
.manual-content p { margin-bottom: 0.9rem; line-height: 1.65; }
.manual-content h3.niceh2 { margin-top: 2rem; margin-bottom: 0.75rem; }

/* E-invoice info banner pod menu */
.einvoice-banner {
    background: linear-gradient(180deg, #8ad683 0%, #6BC461 100%);
    color: #ffffff;
    padding: 6px 0;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.2px;
    overflow: hidden;
    box-shadow: inset 0 -1px 0 rgba(0, 60, 20, 0.15);
    text-shadow: 0 1px 2px rgba(0, 60, 20, 0.3);
}
.einvoice-track {
    display: flex;
    width: max-content;
    animation: einvoice-scroll 45s linear infinite;
}
.einvoice-group {
    display: flex;
    flex-shrink: 0;
}
.einvoice-track span {
    display: inline-block;
    padding: 0 25px;
    white-space: nowrap;
}
.einvoice-track i { margin-right: 8px; }
@keyframes einvoice-scroll {
    0%   { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}
.einvoice-banner:hover .einvoice-track { animation-play-state: paused; }
@media (max-width: 991px) {
    /* Nižší a drobnejší banner — výška 22px (2 + 18 + 2) namiesto 30px.
       Vrstvy pod menu sú naskladané na pixel, preto ide -8px aj do
       #cta-sticky-banner { top } a .main-content { padding-top }. */
    .einvoice-banner {
        padding-top: 2px;
        padding-bottom: 2px;
        font-size: 12px;
        line-height: 18px;
        letter-spacing: 0;
        box-shadow: inset 0 -1px 0 rgba(0, 60, 20, 0.15);
    }
    .einvoice-track span {
        padding: 0 15px;
    }
    .einvoice-track i {
        margin-right: 6px;
    }
}

.rs-cta.mt-4 {
    margin-top: 0 !important;
}

.rs-services.bg22.style5 {
    background: #ffffff;
}

.screenshots-carousel {
    background: #33393E;
}

.screenshots-carousel .sec-title2 .title,
.screenshots-carousel .sec-title2 .desc {
    color: #ffffff;
}

/* Úvodná sekcia podstránok na rovnakom tmavosivom podklade ako ukážky vyššie.
   Odvetvia: #rs-about bez .style1 (tú majú ostatné stránky).
   Moduly: trieda .intro-dark priamo v markupe, lebo .style1 majú aj iné stránky. */
#rs-about.rs-about:not(.style1),
.rs-about.intro-dark {
    background: #33393E;
}

#rs-about.rs-about:not(.style1) .sec-title4 .title,
#rs-about.rs-about:not(.style1) .desc,
#rs-about.rs-about:not(.style1) .desc p,
#rs-about.rs-about:not(.style1) ul li,
.rs-about.intro-dark .sec-title4 .title,
.rs-about.intro-dark .desc,
.rs-about.intro-dark .desc p,
.rs-about.intro-dark ul li {
    color: #ffffff;
}

/* Úvodné sekcie podstránok: text vertikálne na stred, obrázok hore.
   Bootstrap má na .row default align-items: stretch, takže text začínal hore a
   pri kratšom texte zostávala pod ním diera. Centrovanie celého riadku by ale
   stiahlo do stredu aj obrázok, preto sa prvý stĺpec vracia na začiatok.
   Markup je na všetkých 70 dvojstĺpcových úvodoch (sk, cs, en) identický:
   prvý stĺpec col-lg-5 nesie obrázok, druhý col-lg-7 text — overené.
   Priami potomkovia sú podstatné: pravidlo má platiť len na hlavnú mriežku hero
   sekcie, nie na vnorené .row vnútri stĺpcov. Jednostĺpcové #rs-about
   (obchodné podmienky, GDPR, cookies, vzory dokumentov) .row nemajú, tie minie.
   Na mobile a tablete je každý stĺpec na vlastnom flex riadku, takže align-items
   ani align-self nemajú čo riešiť — zalomené rozloženie zostáva nezmenené. */
#rs-about > .container > .row {
    align-items: center;
}

#rs-about > .container > .row > [class*="col-"]:first-child {
    align-self: flex-start;
}

/* Textový blok úvodu bez spodnej medzery. V markupe nesie .sec-title4 triedu
   mb-30 (rs-spacing.css, bez !important), ktorá pri vertikálne centrovanom texte
   posúva celý blok o 30px nad optický stred. Odstup od nasledujúcej sekcie drží
   pb-130 na samotnom #rs-about, takže tu nič nechýba.
   Jednostĺpcové #rs-about majú .sec-title2 mb-50, tie sú mimo tohto selektora. */
#rs-about > .container > .row .sec-title4 {
    margin-bottom: 0;
}

/* odškrtnutia v zoznamoch — rovnaká firemná modrá ako tlačidlá.
   Platí pre všetky hero sekcie (#rs-about), tmavé aj svetlé: pôvodné :not(.style1)
   pokrývalo len tmavý variant, takže na svetlých hero (serviceapp, callapp,
   implementation) zostávali fajky vo farbe textu.
   .rs-why-choose je kvôli b2b (Offeris portál) — jediná stránka, ktorá má
   zoznam s fajkami v tejto sekcii, inde ostáva správanie nezmenené. */
#rs-about.rs-about ul li i.fa,
.rs-about.intro-dark ul li i.fa,
.rs-about.services-list ul li i.fa,
.rs-why-choose .sec-title ul li i.fa {
    color: #0075B2;
}

/* Zoznam služieb (implementation.jsp): blok zoznamu na stred, text v odrážkach
   vľavo. Bootstrap mriežka centruje len stĺpce, nie obsah v nich — preto sa
   <ul> najprv zúži na šírku najdlhšej položky (fit-content) a margin auto ho
   potom posadí na stred stĺpca. */
.rs-about.services-list ul {
    width: fit-content;
    margin-left: auto;
    margin-right: auto;
    text-align: left;
}

/* Mobil a tablet: stĺpce sa naskladajú pod seba a fit-content centruje každý
   zoznam podľa jeho vlastnej najdlhšej položky — ľavé okraje oboch zoznamov si
   potom nesadnú a spodný pôsobí odskočene. Na plnú šírku stĺpca sa oba zarovnajú
   rovnako a čítajú sa ako jeden zoznam. */
@media (max-width: 991px) {
    .rs-about.services-list ul {
        width: auto;
    }
}

/* Jednotná bledosivá na celom webe — rovnaká ako sekcie na landing page.
   Téma má v .gray-color #F6F7F9, čo bolo o odtieň svetlejšie. */
.gray-color {
    background-color: #E7EEF2;
}
.gray-color-important {
    background-color: #E7EEF2 !important;
}

/* Ukážky šablón (vzory ponúk, faktúr, objednávok, dodacích listov, B2B portál) —
   namiesto sivého rámika modrý shadow, na hover sa zvýrazní.
   .project-item má z témy overflow:hidden (kvôli hover panelu, ktorý tu nie je) a shadow
   obrázka strihal — v galériách šablón (.case-style3) ho preto uvoľňujeme. */
.rs-project.case-style3 .project-item,
.rs-project.case-style3 .project-item .project-img {
    overflow: visible;
}

a[data-lightbox="example-set"] img,
img.img-template {
    border: none;
    border-radius: 6px;
    box-shadow: 0 8px 24px rgba(0, 117, 178, 0.30);
    /* transform pridaný kvôli nadvihnutiu na hover (viď nižšie) */
    transition: transform .3s ease, box-shadow .3s ease;
}
/* Hover ako na recenziách (.rs-reviews .review-item): nadvihnutie o 5px so zosilneným
   shadowom. translateY aj timing sú prevzaté odtiaľ; shadow tu už bol.
   Nadvihnutie sa neodreže — .project-img má vyššie overflow: visible. */
@media (hover: hover) and (pointer: fine) {
    a[data-lightbox="example-set"]:hover img,
    a:hover > img.img-template {
        transform: translateY(-5px);
        box-shadow: 0 12px 30px rgba(0, 117, 178, 0.45);
    }
}

/* Counter (Cenové ponuky) — bledosivé pozadie namiesto modrého gradientu z témy,
   preto sa čísla aj popisky prekresľujú z bielej na firemnú modrú */
.rs-counter.style3.modify1 {
    background-image: none;
    background-color: #E7EEF2;
}
.rs-counter.style3.modify1 .counter-top-area .counter-list .counter-text .count-number .rs-count,
.rs-counter.style3.modify1 .counter-top-area .counter-list .counter-text .count-number .prefix,
.rs-counter.style3.modify1 .counter-top-area .counter-list .counter-text .title {
    color: #0075B2;
}

.rs-services.style2.gray-color {
    background: #ffffff;
}

.rs-why-choose.gray-color {
    background: #E7EEF2;
}

#rs-about1.rs-about.style1 {
    background: #E7EEF2;
}

/* CTA "Stretnime sa" na landing page — tmavosivá ako ukážky šablón a úvodné
   sekcie podstránok, text biely. Vlastná trieda namiesto .intro-dark, lebo tá
   zbieluje .sec-title4 hero sekcií, kým toto CTA má .sec-title2. */
.rs-about.style1.cta-meeting {
    background: #33393E;
}

.rs-about.style1.cta-meeting .sec-title2 .title,
.rs-about.style1.cta-meeting .sec-title2 .desc {
    color: #ffffff;
}

.rs-services.style5:not(.bg22) {
    background: #ffffff;
}

.rs-services.style5 .services-item.service-original-bg {
    background-color: #ffffff !important;
}

.rs-partner {
    background: #E7EEF2;
    background-image: none;
}

.rs-pricing .pricing-table.primary-bg {
    background: #33393E;
    background-image: none;
}

.rs-pricing .pricing-table .pricing-badge {
    background-color: #0075B2;
}

.rs-pricing .pricing-table .pricing-badge.white-color-bg {
    color: #0075B2;
}

.rs-pricing .pricing-table .pricing-badge.secondary-bg {
    background: #0075B2;
}

.rs-pricing .pricing-table .pricing-table-body li i {
    color: #0075B2;
}

/* Pricing: "Objednať" buttony — jednoliata farba namiesto modrého gradientu
   + neónový glow ako pri registračných buttonoch */
.rs-pricing .btn-part .readon.buy-now {
    background-image: none;
    background-color: #0075B2;
    top: 0;
    transition: background-color .3s ease, box-shadow .3s ease, text-shadow .3s ease;
}
.rs-pricing .btn-part .readon.buy-now:hover {
    background-image: none;
    background-color: #005e8f;
    color: #ffffff;
}

/* Header: sub-menu link hover a active/current */
.full-width-header .rs-header .menu-area .main-menu .rs-menu ul.sub-menu li a:hover,
.full-width-header .rs-header .menu-area .main-menu .rs-menu ul.sub-menu li.current-menu-item > a,
.full-width-header .rs-header .menu-area .main-menu .rs-menu ul.sub-menu li.active > a {
    color: #0075B2 !important;
}

/* Header: hlavné menu položky — hover a current (sticky stav) */
.full-width-header .rs-header .menu-area.sticky .main-menu .rs-menu ul.nav-menu > li > a:hover,
.full-width-header .rs-header .menu-area.sticky .main-menu .rs-menu ul.nav-menu > li.current-menu-item > a {
    color: #0075B2;
}

/* Header (style2): hlavné menu položky — hover a current (default stav, netreba sticky) */
.full-width-header .rs-header.style2 .menu-area .main-menu .rs-menu ul.nav-menu li a:hover,
.full-width-header .rs-header.style2 .menu-area .main-menu .rs-menu ul.nav-menu li.current-menu-item > a {
    color: #0075B2;
}

/* Off-canvas mobile menu: link hovers, contact ikonky */
.right_menu_togle .sidebarnav_menu > li > a:hover,
.right_menu_togle .sidebarnav_menu .sub-menu-offcanvas li a:hover,
.right_menu_togle .canvas-contact .address-list a:hover,
.right_menu_togle .close-btn a#nav-close:hover {
    color: #0075B2;
}
.right_menu_togle .canvas-contact .address-list i:before {
    color: #0075B2;
}

.rs-pricing .pricing-table .table-period.text-danger,
.rs-pricing .pricing-table .table-period.text-warning {
    color: #68c95d !important;
    font-weight: 700;
}

/* Hero popisný text — na mobile a tablete sedí na spodku hero sekcie priamo na
   background obrázku (v hero je h2.it-description skryté cez d-none d-lg-block).
   flex:0 0 auto — nerastie, spodok hero drží presne na svojej výške. */
.rs-hero-intro {
    flex: 0 0 auto;
    width: 100%;
    margin: 30px auto 0;
}

.rs-hero-intro .hero-intro-desc {
    margin: 0;
    font-size: 18px;
    line-height: 1.5;
    font-weight: 500;
    color: #ffffff;
    text-align: center;
    /* jemný tieň — text ide priamo na fotku, bez podkladu */
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.55);
}

/* Tablety (768px až po desktop) — väčší popisný text */
@media (min-width: 768px) and (max-width: 991px) {
    .rs-hero-intro .hero-intro-desc {
        font-size: 27px;
    }
}

@media (max-width: 767px) {
    .rs-hero-intro {
        max-width: 540px;
        padding: 0 15px;
        margin-top: 25px;
    }
    /* zarovnanie do bloku — ľavý aj pravý okraj textu je rovný; posledný riadok sa
       neroztahuje, ide zľava. Slová sa nedelia pomlčkou. */
    .rs-hero-intro .hero-intro-desc {
        text-align: justify;
        text-align-last: left;
        hyphens: none;
        -webkit-hyphens: none;
    }
    /* rovnaká šírka ako .content-wrap — ľavý okraj tlačidiel sedí s textom */
    .hero-cta {
        max-width: 540px;
        margin: 0 auto;
    }
}

/* Hero CTA tlačidlá — len mobil a tablet (na desktope skryté cez d-lg-none).
   flex:1 — blok si berie voľný priestor medzi nadpisom a popisným textom,
   takže tlačidlá sedia v strede hero sekcie; pod sebou, zarovnané doľava. */
@media (max-width: 991px) {
    .hero-cta {
        flex: 1 1 auto;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: center;
        gap: 12px;
        width: 100%;
        padding: 20px 15px;
    }

    .hero-cta a {
        display: inline-block;
        padding: 12px 26px;
        border-radius: 10px;
        font-size: 16px;
        font-weight: 500;
        line-height: 1.2;
        text-align: center;
        text-decoration: none;
        white-space: nowrap;
        transition: background-color .3s ease, color .3s ease, box-shadow .3s ease;
    }

    /* primárne — plné vo firemnej modrej (neónový glow je nižšie pri quote-btn) */
    .hero-cta .hero-cta-primary {
        background: #0075B2;
        border: 1px solid #0075B2;
        color: #ffffff;
    }
    /* sekundárne — biely outline priamo na fotke */
    .hero-cta .hero-cta-secondary {
        background: transparent;
        border: 1px solid #ffffff;
        color: #ffffff;
        text-shadow: 0 1px 4px rgba(0, 0, 0, 0.55);
    }

    /* výplň len počas stlačenia — po pustení sa vráti (:hover by na dotyku zamrzol) */
    .hero-cta .hero-cta-primary:active {
        background: #005e8f;
        border-color: #005e8f;
        color: #ffffff;
    }
    .hero-cta .hero-cta-secondary:active {
        background: #ffffff;
        color: #0075B2;
        text-shadow: none;
    }
}

/* Hover len pre zariadenia s myšou — na dotyku by biela výplň po kliknutí zostala */
@media (max-width: 991px) and (hover: hover) and (pointer: fine) {
    .hero-cta .hero-cta-primary:hover {
        background: #005e8f;
        border-color: #005e8f;
        color: #ffffff;
    }
    .hero-cta .hero-cta-secondary:hover {
        background: #ffffff;
        color: #0075B2;
        text-shadow: none;
    }
}

/* Tablety (768px až po desktop) — väčšie CTA tlačidlá.
   Musí byť až za blokom vyššie, ten má rovnakú špecificitu a prepísal by font-size. */
@media (min-width: 768px) and (max-width: 991px) {
    .hero-cta a {
        font-size: 20px;
    }
}

/* ---------- Modern trial form ---------- */
.rs-trial-form {
    background: #ffffff;
    position: relative;
}

.rs-trial-form .rs-contact .contact-wrap.modern-form {
    background: #ffffff;
    padding: 50px 55px;
    border-radius: 20px;
    box-shadow: 0 15px 45px rgba(0, 117, 178, 0.30);
    border: 1px solid rgba(0, 117, 178, 0.06);
}

.rs-trial-form .contact-wrap.modern-form .content-part .title {
    font-size: 30px;
    line-height: 1.25;
    font-weight: 700;
    color: #0a0a0a;
}

.rs-trial-form .contact-wrap.modern-form .content-part .desc {
    font-size: 16px;
    color: #6b7280;
}

.rs-trial-form .contact-wrap.modern-form .from-control {
    padding: 14px 18px;
    border-radius: 10px;
    border: 1.5px solid #e5e9f2;
    background-color: #fafbfd;
    color: #1a1a1a;
    font-size: 15px;
    width: 100%;
    transition: border-color .2s ease, background-color .2s ease, box-shadow .2s ease;
}

.rs-trial-form .contact-wrap.modern-form .from-control:hover {
    border-color: #c9d3e6;
    background-color: #ffffff;
}

.rs-trial-form .contact-wrap.modern-form .from-control:focus {
    outline: none;
    border-color: #0075B2;
    background-color: #ffffff;
    box-shadow: 0 0 0 4px rgba(0, 117, 178, 0.15);
}

.rs-trial-form .contact-wrap.modern-form ::placeholder {
    color: #98a2b3;
    opacity: 1;
}

.rs-trial-form .contact-wrap.modern-form .submit-btn {
    padding: 16px 24px;
    border-radius: 10px;
    font-size: 16px;
    font-weight: 600;
    letter-spacing: 0.2px;
    background-image: none;
    background-color: #0075B2;
    /* neónový glow ako ostatné registračné buttony + pôvodná hĺbka pod tlačidlom */
    transition: transform .2s ease, box-shadow .2s ease, opacity .2s ease, text-shadow .2s ease;
}

.rs-trial-form .contact-wrap.modern-form .submit-btn:hover {
    transform: translateY(-2px);
    opacity: 1;
}

.rs-trial-form .contact-wrap.modern-form .submit-btn:active {
    transform: translateY(0);
}

.rs-trial-form .contact-wrap.modern-form .form-consent {
    font-size: 13px;
    color: #6b7280;
    line-height: 1.5;
    text-align: center;
    margin-top: 8px;
}

.rs-trial-form .contact-wrap.modern-form .form-consent a {
    color: #0075B2;
    text-decoration: underline;
}

.rs-trial-form .contact-wrap.modern-form .mb-20 {
    margin-bottom: 20px;
}

.rs-trial-form .trial-form-info .trial-info-title {
    font-size: 34px;
    line-height: 1.2;
    font-weight: 700;
    color: #0a0a0a;
    margin-bottom: 20px;
}

.rs-trial-form .trial-form-info .trial-info-desc {
    font-size: 17px;
    line-height: 1.65;
    color: #4b5563;
    margin: 0 0 24px;
}

.rs-trial-form .trial-info-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.rs-trial-form .trial-info-list li {
    position: relative;
    padding-left: 34px;
    font-size: 16px;
    font-weight: 500;
    color: #1a1a1a;
    line-height: 1.4;
}

.rs-trial-form .trial-info-list li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background-color: #0075B2;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='white' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><polyline points='3.5 8.5 6.5 11.5 12.5 5'/></svg>");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 14px 14px;
    box-shadow: 0 4px 10px -3px rgba(0, 117, 178, 0.5);
}

@media (max-width: 991px) {
    /* Info blok ide nad formulár (v markupe je až za ním) */
    .rs-trial-form .row > .col-lg-7 {
        order: -1;
    }

    .rs-trial-form .trial-form-info {
        text-align: center;
        margin-top: 0;
        margin-bottom: 40px;
    }

    /* md-mb-40 na stĺpci s formulárom — už je posledný, medzera patrí nad neho */
    .rs-trial-form .row > .col-lg-5 {
        margin-bottom: 0 !important;
    }

    .rs-trial-form .trial-info-list {
        max-width: 380px;
        margin-left: auto;
        margin-right: auto;
        text-align: left;
    }

    /* formulár zarovnaný na stred rovnako ako info blok nad ním */
    .rs-trial-form .contact-wrap.modern-form .content-part,
    .rs-trial-form .contact-wrap.modern-form .form-consent {
        text-align: center;
    }

    /* Karta formulára na stred v rámci .rs-contact — téma jej v responsive.css:878
       dáva max-width: 450px, ale bez auto marginov, takže v jednostĺpcovom
       rozložení zostávala prilepená vľavo pod vycentrovaným textom. */
    .rs-trial-form .rs-contact .contact-wrap.modern-form {
        margin-left: auto;
        margin-right: auto;
    }
}

@media (max-width: 767px) {
    .rs-trial-form .rs-contact .contact-wrap.modern-form {
        padding: 32px 22px;
        border-radius: 16px;
    }

    .rs-trial-form .contact-wrap.modern-form .content-part .title {
        font-size: 24px;
    }

    .rs-trial-form .trial-form-info .trial-info-title {
        font-size: 26px;
    }

    .rs-trial-form .trial-form-info .trial-info-desc {
        font-size: 16px;
    }
}

/* Landing page: flip-box moduly (Cenové ponuky, Objednávky, ...) — jednoliata farba namiesto modrého gradientu */
.rs-services.style2 .flip-box-inner:hover .flip-box-wrap .back-front {
    background-image: none !important;
    background-color: #0075B2 !important;
}
/* Landing page: flip-box moduly — back panel má prekryť celú kartu (rovnaké rozmery + border-radius ako front) */
.rs-services.style2 .flip-box-inner .flip-box-wrap .back-front {
    height: 100%;
    border-radius: 10px;
}

/* Landing page: Odvetvia — hover na title link */
.rs-services.style5 .services-item .services-content .services-title a:hover {
    color: #0075B2;
}

/* Landing page: flip-box moduly — hover na title link (front) */
.rs-services.style2 .flip-box-inner .flip-box-wrap .front-part .front-content-part .front-title-part .title a:hover {
    color: #0075B2;
}

/* Landing page: Služby (why-choose) — hover na title link */
.rs-why-choose .services-wrap .services-text .title a:hover {
    color: #0075B2;
}

/* Header: "Začať zadarmo" quote-btn — jednoliata farba namiesto modrého gradientu */
.full-width-header .rs-header.style2 .expand-btn-inner ul li .quote-btn,
.full-width-header .rs-header.style2 .menu-area.sticky .expand-btn-inner ul li .quote-btn {
    background-image: none;
    background-color: #0075B2;
}
.full-width-header .rs-header.style2 .expand-btn-inner ul li .quote-btn:hover,
.full-width-header .rs-header.style2 .menu-area.sticky .expand-btn-inner ul li .quote-btn:hover {
    background-image: none;
    background-color: #005e8f;
}

/* Neónový efekt registračných buttonov "Začať zadarmo" — modrý glow v okolí,
   jemné svetlo vnútri a rozžiarený text; na hover sa glow zosilní. */
.full-width-header .rs-header.style2 .expand-btn-inner ul li .quote-btn,
.full-width-header .rs-header.style2 .menu-area.sticky .expand-btn-inner ul li .quote-btn,
.hero-cta .hero-cta-primary {
    transition: background-color .3s ease, box-shadow .3s ease, text-shadow .3s ease;
}
.full-width-header .rs-header.style2 .expand-btn-inner ul li .quote-btn:hover,
.full-width-header .rs-header.style2 .menu-area.sticky .expand-btn-inner ul li .quote-btn:hover,
.hero-cta .hero-cta-primary:hover {
}

/* ===== Jednotný dizajn tlačidiel na celom webe (podľa landing page) =====
   Plná firemná modrá namiesto gradientov z témy, zaoblenie 10px a neónový glow.
   Hover je len pre myš — na dotyku by stav po kliknutí zamrzol, tam sa použije :active.
   .readon.learn-more.submit je uvedená zvlášť, hoci ju .readon.learn-more pokrýva:
   téma má na nej v style.css:882 vlastný gradient a 3 triedy, takže by dvojtriedny
   selektor prehrala na špecifickosti (odosielacie tlačidlá na contact / idea /
   training_join majú class="readon learn-more submit"). */
.readon.learn-more,
.readon.learn-more.submit,
.readon.buy-now,
.quote-btn,
.submit-btn {
    background-image: none;
    background-color: #0075B2;
    border: 1px solid #0075B2;
    border-radius: 10px;
    color: #ffffff;
    transition: background-color .3s ease, box-shadow .3s ease, text-shadow .3s ease;
}

.readon.learn-more:active,
.readon.learn-more.submit:active,
.readon.buy-now:active,
.quote-btn:active,
.submit-btn:active {
    background-image: none;
    background-color: #005e8f;
    border-color: #005e8f;
    color: #ffffff;
}

@media (hover: hover) and (pointer: fine) {
    .readon.learn-more:hover,
    .readon.learn-more.submit:hover,
    .readon.buy-now:hover,
    .quote-btn:hover,
    .submit-btn:hover {
        background-image: none;
        background-color: #005e8f;
        border-color: #005e8f;
        color: #ffffff;
    }
}

/* "Viac" na kartách zostáva biele (tak je to aj na landing page), zjednotí sa len zaoblenie */
.readon.view-more {
    border-radius: 10px;
}

/* Školenia (training.jsp): farebný pás nesiaha cez celú šírku okna, ale len po šírku obsahu.
   Pozadie (bg7 / bg15) je v JSP presunuté z vonkajšieho .rs-cta na .cta-wrap vnútri .container.
   Viazané na .training-cta, aby sa nezmenili ostatné .rs-cta.style1 stránky (about, contact, faq...). */
.rs-cta.training-cta .cta-wrap {
    padding: 30px 40px;
    border-radius: 10px;
    /* rovnaký modrastý shadow ako karty na landing page (.rs-services.style5 .services-item) */
    box-shadow: 0 12px 30px rgba(0, 117, 178, 0.25);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* Hover ako na recenziách (.rs-reviews .review-item): karta sa nadvihne a shadow zosilní,
   čím pôsobí bližšie. Rovnaký transform aj timing, shadow zosilnený v rovnakom pomere
   ako na recenziách, ale vychádza z tunajšieho základu (0 12px 30px / 0.25).
   Guard na hover: bez neho by na touch zariadeniach efekt po ťuknutí zostal "zaseknutý". */
@media (hover: hover) and (pointer: fine) {
    .rs-cta.training-cta .cta-wrap:hover {
        transform: translateY(-5px);
        box-shadow: 0 18px 42px rgba(0, 117, 178, 0.35);
    }
}

/* CTA bannery — obsah vertikálne na stred pásika.
   Stĺpec v pásiku nesie md-mb-30 (assets/css/rs-spacing.css, margin-bottom 30px do
   991px). Padding pásika je symetrický, ale tých 30px sa pripočíta zdola, takže do
   991px sedí obsah o 15px nad optickým stredom. Na desktope bol pásik v poriadku.
   :only-child je podstatný — viacstĺpcové CTA (titulok + tlačidlo) ten margin
   potrebujú, keď sa stĺpce na mobile naskladajú pod seba. */
.rs-cta .cta-wrap > .row > [class*="col-"]:only-child {
    margin-bottom: 0;
}

/* Titulkový pásik podstránok na tmavosivom podklade — rovnaká farba ako .intro-dark,
   footer a screenshots carousel. Platí všade, kde je pásik použitý: kombinácia
   .rs-cta.style1.bg15 je jeho jednoznačný podpis (52 aktívnych stránok: 19 sk, 17 cs,
   16 en; overené — všetky obsahujú len titulok, sk/manual_new.jsp navyše odstavec).
   bg15 nesie aj obrázok steps-area.png, preto sa background-image musí vypnúť. */
.rs-cta.style1.bg15 {
    background-image: none;
    background-color: #33393E;
}

/* Biely text v pásiku. !important je nutné: markup väčšiny stránok nesie na titulku
   Bootstrapovú .text-dark, ktorá má sama !important a inak sa prebiť nedá. */
.rs-cta.style1.bg15 .epx-title,
.rs-cta.style1.bg15 .desc {
    color: #ffffff !important;
}

/* CTA pásik na gastrotechnika.jsp na rovnakom tmavosivom podklade ako .intro-dark
   a titulkový pásik nižšie. Platí pre všetky tri jazyky (sk, cs, en) — všetky majú
   v markupe .gastro-cta.style1, pôvodná .gray-color bola z nich odstránená.
   .gastro-cta je vlastný háčik len pre túto stránku: nedá sa použiť samotná
   .rs-cta.style1 (tú majú aj about, contact, faq... ktoré pozadie nemajú) ani .bg15
   (ten nesie obrázok steps-area.png a biely text má len na .epx-title/.desc).
   Text sa zbieluje ručne: markup nesie h2.title a plain <p>, nie .epx-title/.desc,
   takže biele farby z témy pre .rs-cta.style1 sa naň nevzťahujú. */
.rs-cta.gastro-cta.style1 {
    background-color: #33393E;
}

.rs-cta.gastro-cta.style1 .title,
.rs-cta.gastro-cta.style1 p {
    color: #ffffff;
}

/* Bledomodrý podklad za celým zoznamom školení. Musí byť na obale okolo cyklu —
   medzery medzi kartami sú margin (mt-5), takže podfarbenie samotných kariet
   by medzery nechalo biele.
   display: flow-root zabráni prepadnutiu margin-top prvej karty von z obalu,
   inak by modré začalo až pod ňou. */
.training-list {
    display: flow-root;
    background-color: #E7EEF2;
    padding-bottom: 48px;
}

/* Všetky karty biele. Obrázok na pozadí treba vypnúť explicitne, inak by presvital
   (bg7 = cta-bg.jpg, bg15 = steps-area.png).
   Scope .training-cta je podstatný: bg15 sa používa na ~70 ďalších stránkach.
   Pozn.: bg7/bg15 tu už neznamenajú farby témy, sú len zdedené háky z markupu —
   preto majú oba bloky v JSP text-dark. */
.rs-cta.training-cta .cta-wrap.bg7,
.rs-cta.training-cta .cta-wrap.bg15 {
    background-image: none;
    background-color: #ffffff;
}

/* Dátum a čas v rovnakej modrej ako tlačidlo "Prihlásiť sa" (.readon.learn-more).
   V JSP musel ísť dole text-dark — Bootstrap ho má s !important a prebil by túto farbu. */
.rs-cta.training-cta .cta-wrap h5 {
    color: #0075B2;
}

@media (max-width: 767px) {
    .rs-cta.training-cta .cta-wrap {
        padding: 25px 20px;
    }
}

/* ---------- Odkazy: firemná modrá (rovnaká ako tlačidlá) namiesto modrých z témy ----------
   Téma má v style.css na odkazoch šesť rôznych modrých (#106eea, #1273eb, #0b70e1,
   #03228f, #032390, #787cf2). style.css sa neupravuje, preto sa tu prepisujú
   rovnakými selektormi — custom.css sa načítava neskôr, takže pri zhodnej
   špecifickosti vyhrá. Header, footer, menu a topbar už firemnú modrú majú vyššie. */

/* základné odkazy v texte — v téme #106eea */
a {
    color: #0075B2;
}

a:hover,
a:active {
    color: #0075B2;
}

/* podtitulky nad nadpismi — v téme #03228F, vo variante .contact #1273EB.
   Ich dekoratívna čiarka (:before) firemnú modrú už mala, samotný text nie. */
.sec-title2 .sub-text,
.sec-title2 .sub-text.contact {
    color: #0075B2;
}

/* odškrtnutia v cenníkových kartách — v téme #106eea */
.rs-pricing .pricing-table .pricing-table-body li i {
    color: #0075B2;
}

/* ---------- Dekoratívne :before pri nadpisoch na firemnú modrú ----------
   Téma tu má štyri rôzne modré:
     .sec-title .sub-text:before                 #03228F  (čiarka pred podtitulkom)
     .sec-title2 .heading-line:before            #1940AA  (bodka na linke)
     .sec-title4 .heading-line:before            #0D66D5  (bodka na linke)
     .rs-inner-blog … .widget-title .title:before #106eea  (podčiarknutie v sidebare)
   .sec-title .sub-text.style2:before sa nikde nepoužíva, preto ho neriešime. */
.sec-title .sub-text:before,
.sec-title2 .heading-line:before,
.sec-title4 .heading-line:before,
.rs-inner-blog .widget-area .widget-title .title:before {
    background-color: #0075B2;
}

/* ---------- Blog: modrý shadow namiesto sivého z témy ----------
   Téma má na kartách článkov 0 2px 20px rgba(0,0,0,.08) (style.css:8277) a na sidebar
   widgete 0 6px 25px rgba(0,0,0,.07) (style.css:8438). Nahrádza sa tým istým shadowom,
   aký majú karty na landing page, školenia, recenzie aj FAQ.
   Zvyšné dva sivé shadowy témy (.search-widget, .categories) sa nikde nepoužívajú. */
.rs-inner-blog .blog-item,
.rs-inner-blog .widget-area .recent-posts {
    box-shadow: 0 12px 30px rgba(0, 117, 178, 0.25);
}

/* hover na názvoch kariet a článkov — v téme #106eea */
.rs-services.style5 .services-item .services-content .services-title a:hover,
.rs-project.style5 .project-item .project-content .project-inner .title a:hover,
.rs-why-choose .services-wrap .services-text .title a:hover,
.rs-why-choose.style2 .services-wrap .services-text .title a:hover,
.rs-inner-blog .blog-item .blog-content .blog-title a:hover,
.rs-inner-blog .widget-area .recent-posts .recent-post-widget .post-desc a:hover,
.blog-button a:hover,
.blog-button a:hover:after,
.blog-button.inner-blog a,
.blog-button.inner-blog a:after,
.blog-button.inner-blog a:hover {
    color: #0075B2;
}

/* Kontaktný box (contact.jsp) — v téme má gradient #4e95ed → #03228f (style.css:4786).
   Bledomodrá z nového dizajnu (rovnaká ako sekcie na landing page a podklad školení)
   + shadow zhodný s kartami na landing page (.rs-services.style5 .services-item). */
.rs-contact .contact-box {
    background-image: none;
    background-color: #E7EEF2;
    border-radius: 10px;
    box-shadow: 0 12px 30px rgba(0, 117, 178, 0.25);
}

/* Texty v boxe boli v téme biele (na pôvodnom tmavom gradiente). Na bledomodrej by
   zmizli, preto sa pretónovávajú. V JSP muselo ísť dole white-color — má !important. */
.rs-contact .contact-box .sec-title .title {
    color: #101010;
}

.rs-contact .contact-box .sec-title .sub-text {
    color: #0075B2;
}

.rs-contact .contact-box .address-box .address-text .label {
    color: #101010;
}

.rs-contact .contact-box .address-box .address-text a {
    color: #0075B2;
}

.rs-contact .contact-box .address-box .address-text a:hover {
    color: #005e8f;
}

.rs-contact .contact-box .address-box .address-text .desc {
    color: #333333;
}

/* Ikony telefón / e-mail / adresa v bielych krúžkoch — v téme #03228F */
.rs-contact .contact-box .address-box .address-icon i {
    color: #0075B2;
}

/* Prihláška na školenie (training_join) — sekcia má bledomodré pozadie, takže box
   s popisom školenia je tmavosivý, aby sa od podkladu odlíšil. Ostatné stránky
   (kontakt, implementácia) majú box bledomodrý podľa pravidla vyššie, preto je
   toto zúžené triedou .training-join na obale sekcie.
   Texty musia ísť späť na bielu — pravidlá vyššie ich pretónovali na tmavú kvôli
   bledomodrému boxu, a na tmavosivej by zmizli. */
.training-join.rs-contact .contact-box {
    background-color: #33393E;
}

.training-join.rs-contact .contact-box .sec-title .title,
.training-join.rs-contact .contact-box .address-box .address-text .label,
.training-join.rs-contact .contact-box .address-box .address-text .desc,
.training-join.rs-contact .contact-box .desc {
    color: #ffffff;
}

/* Nadradený text nad "Napíšte nám správu" ("Zostaňme v kontakte") — v téme #1273EB */
.sec-title2 .sub-text.contact {
    color: #0075B2;
}

/* Hero modulových stránok: .pattern má v šablóne position:absolute (style.css:3343),
   takže je mimo toku a nedrží výšku stĺpca — obrázok vytekal zo sekcie a tá si musela
   robiť miesto cez pb-190. Na desktope ho vraciame do toku, čím je obal vždy aspoň
   taký vysoký ako obrázok. Platí pre všetky moduly: .pattern používajú len ony,
   odvetvia majú .images. Pod 992px je .pattern v toku už z responsive.css:851
   (position: unset).
   Pôvodné odsadenie z top:22px sa tu zámerne neobnovuje — obrázok má byť
   zarovnaný na hornú hranu textu (viď align-self: flex-start na prvom stĺpci
   hero mriežky vyššie) a tých 22px ho od nej odtláčalo. */
@media (min-width: 992px) {
    .rs-about .rs-animation-shape .pattern {
        position: static;
    }
}

/* b2b.jsp — Retail / Partneri: logá B2C a B2B majú rôznu výšku (81px vs 84px),
   čím sa text pod nimi rozchádzal. Fixná výška boxu so zvislým centrovaním
   drží oba stĺpce zarovnané. */
.rs-why-choose .software-img {
    display: flex;
    align-items: center;
    height: 90px;
}

/* Karty "Výhody ..." — popis na jeden riadok robil kartu nižšou než susedné,
   takže rad kariet mal nerovnaké výšky. Rezervujeme miesto vždy na 2 riadky.
   Popis je <p>, ktoré má zo style.css:77 bezrozmerné line-height: 1.8, takže
   2 riadky = 2 × 1.8em = 3.6em — funguje aj keď sa font-size mení podľa šírky. */
.rs-services.style5 .services-item .services-content .services-desc {
    min-height: 3.6em;
}

/* Karty "Výhody ..." — rovnomerné medzery na mobile. Pod 992px sa col-lg-4
   naskladajú pod seba, ale tretia karta v každom riadku nemá md-mb-30, takže
   prechod medzi riadkami držalo len mb-10 na riadku — medzery vychádzali
   30, 30, 10, 30, 30, 10, 30, 30. Riešime v CSS, nech to netreba dopisovať
   do markupu každej stránky zvlášť (invoice, order, quotations, warehouse,
   b2b × sk/cs/en). index.jsp ani inc_pricelist.jsp v tejto sekcii žiadne
   col-lg-4 nemajú, tie zostávajú nedotknuté. */
@media (max-width: 991px) {
    .rs-services.style5 .container > .row > .col-lg-4 {
        margin-bottom: 30px;
    }

    /* riadok nesmie pridávať vlastných 10px, inak by sa s marginom karty sčítali */
    .rs-services.style5 .container > .row.mb-10 {
        margin-bottom: 0;
    }

    /* posledná karta margin nepotrebuje — pod ňou je už pb-40 posledného riadku */
    .rs-services.style5 .container > .row:last-of-type > .col-lg-4:last-child {
        margin-bottom: 0;
    }
}

/* Sekcia "Ako to celé funguje" na about.jsp z tmavomodrej na bledomodrú #E7EEF2 —
   tú istú, akú používame inde (training-list, boxy). bg11 nesie okrem farby aj
   obrázok index-bg.jpg, preto sa background-image musí vypnúť.
   Kombinácia .rs-process.style3.bg11 je bezpečný scope: bg11 je v celom projekte
   len na about.jsp (sk, cs, en) — jedna zmena pokryje všetky tri jazyky. */
.rs-process.style3.bg11 {
    background-image: none;
    background-color: #E7EEF2;
}

/* Ľavý stĺpec mal text biely (na tmavomodrej). Na bledej by bol nečitateľný,
   preto späť na tmavé farby. Nadtitulok je modrý — naša #0075B2, nie témová
   #03228F. */
.rs-process.style3.bg11 .sec-title .sub-text.new {
    color: #0075B2;
}

/* Titulok v rovnakej farbe ako všetky ostatné nadpisy na webe: #101010 (téma ju má
   na h1–h6 aj na .sec-title .title).
   !important je nutné — .white-color v téme sama nesie !important a inak sa nedá
   prebiť; rovnaký prípad ako pásik .rs-cta.style1.bg15 vyššie. */
.rs-process.style3.bg11 .sec-title .title.white-color {
    color: #101010 !important;
}

.rs-process.style3.bg11 .sec-title .desc.white-color,
.rs-process.style3.bg11 .sec-title .desc.white-color p {
    color: #454545 !important;
}

/* Zvyšné dva modré prvky sekcie na našu #0075B2: čísla 01–04 mala téma na
   #03228F a spodný okraj kariet na #095FD0. rs-process je v celom projekte
   len na about.jsp, takže tu nič iné neprebíjame. */
.rs-process.style3.bg11 .rs-addon-number .number-text .number-area {
    color: #0075B2;
}

.rs-process.style3.bg11 .rs-addon-number {
    border-bottom-color: #0075B2;
}

/* Mobil a tablet: nadpisy sekcií na stred. V jednostĺpcovom rozložení pôsobí
   nadpis zarovnaný vľavo nad vycentrovaným obsahom rozhodený — na desktope,
   kde nadpis stojí vedľa obrázka alebo zoznamu, zostáva zarovnanie pôvodné.
   Cielené na samotný .title, nie na obal .sec-title*: obaly nesú aj odstavce,
   zoznamy s odrážkami a tlačidlá, ktoré by centrovanie rozbilo.
   Obaly, ktoré už majú v markupe .text-center, sú týmto nedotknuté — tam je
   nadpis vycentrovaný na všetkých šírkach. */
@media (max-width: 991px) {
    .sec-title .title,
    .sec-title2 .title,
    .sec-title4 .title {
        text-align: center;
    }
}

/* Tlačidlá v modaloch (OK po odoslaní formulára, kupón, GDPR súhlas) sú nižšie ako
   CTA na stránke — základ .readon.learn-more má padding 14px 40px (cca 52px vysoký),
   čo je v modale zbytočne mohutné. Rovnaké rozmery ako Prihlásenie v off-canvas
   (custom.css:846). Farbu ani glow tu neriešime, tie dedí z .readon.learn-more.
   Centrovanie rieši samotné tlačidlo (display: block + fit-content + auto marginy),
   nie text-center na stĺpci — nadpis a text nad ním majú zostať zarovnané vľavo. */
.modal .readon.learn-more {
    padding: 10px 30px;
    font-size: 15px;
    line-height: 1.4;
    display: block;
    width: fit-content;
    margin-left: auto;
    margin-right: auto;
}

/* Modaly majú rovnaké zaoblenie ako karty a tlačidlá na landing page (10px).
   Bootstrap má na .modal-content .3rem (~4.8px), legacy .modal-content v
   style.css:10937 zaoblenie nerieši vôbec — obe prebíja toto pravidlo.
   Platí aj pre #acceptTrial, ktorý Bootstrap modal nie je, ale .modal-content má. */
.modal .modal-content {
    border-radius: 10px;
}

/* Potvrdzovacie modaly (odoslaný formulár, kupón) — nadpis aj text na stred.
   Cielené na konkrétne id, nie na .modal .modal-body: cookie lišta má v modal-body
   dlhý text a nastavenia cookies, GDPR súhlas zase právny text s obtekaným
   obrázkom — tie musia zostať zarovnané vľavo. */
#sentModal .modal-body,
#couponValid .modal-body,
#couponNotValid .modal-body {
    text-align: center;
}

/* Ikona nad nadpisom v potvrdzovacom modale — rovnaká modrá obálka ako pri
   kontaktných údajoch (custom.css:3026). Krúžok je bledomodrý #E7EEF2, nie biely
   ako na kontaktnej stránke — tam sedí na modrom boxe, tu by na bielom pozadí
   modalu zanikol. Cielené na .modal, nie na konkrétne id: .modal-icon je vlastná
   trieda použitá len v potvrdzovacích modaloch, cookie lišta ani GDPR ju nemajú. */
.modal .modal-icon {
    width: 72px;
    height: 72px;
    margin: 0 auto 20px;
    border-radius: 50%;
    background-color: #E7EEF2;
    text-align: center;
}

.modal .modal-icon i {
    font-size: 30px;
    line-height: 72px;
    color: #0075B2;
}

/* Chybový stav (neplatný kupón) — červená namiesto brand modrej, aby sa varovanie
   odlíšilo od potvrdzujúcich modalov. #dc3545 je tá istá červená, akú má
   .text-danger, ktorá sa už používa na zľavách v objednávke. */
#couponNotValid .modal-icon {
    background-color: #FBEAEC;
}

#couponNotValid .modal-icon i {
    color: #dc3545;
}

/* Krížik na zatvorenie v pravom hornom rohu. Bootstrap 5 má vlastný .btn-close,
   ale ten je v tejto téme prekrytý a nesedí k dizajnu — preto vlastný odkaz,
   ktorý volá to isté hideSentModal() ako tlačidlo v modale. */
.modal .modal-close {
    position: absolute;
    top: 10px;
    right: 16px;
    font-size: 28px;
    line-height: 1;
    font-weight: 400;
    color: #33393E;
    opacity: 0.45;
    text-decoration: none;
    transition: opacity .3s ease, color .3s ease;
}

.modal .modal-close:hover,
.modal .modal-close:focus {
    color: #0075B2;
    opacity: 1;
    text-decoration: none;
}

/* GDPR súhlas — #acceptGdpr v objednávkach, #acceptTrial na landing page. Nie sú to
   Bootstrap modaly, otvárajú sa cez style.display a dedia legacy .modal / .modal-content
   zo style.css:10922 (padding-top 200px, width 80%, padding 20px). Namiesto obrázka
   zámku a jedného bloku textu je tu jeden stĺpec s odrážkami, takže je na prvý pohľad
   vidno, aké údaje, načo a ako dlho. */
/* Modal na stred obrazovky. Legacy .modal zo style.css:10922 mal padding-top 200px,
   teda pevnú vzdialenosť od vrchu. JS ho otvára cez style.display = "flex" (predtým
   "block").
   Centrovanie drží margin: auto na .modal-content, nie align-items/justify-content:
   keď je obsah vyšší ako okno, automatické marginy sa zmenia na nulu, modal sa oprie
   o vrch a dá sa doscrollovať. Pri align-items: center by vrch aj s ikonou skončil nad
   viewportom a nedal by sa vôbec zobraziť.
   Preto ani žiadny max-height na obsahu — dlhý text scrolluje celá vrstva. */
#acceptGdpr.modal,
#acceptTrial.modal {
    z-index: 99999;
    padding: 20px;
    align-items: flex-start;
    overflow-y: auto;
}

#acceptGdpr .modal-content,
#acceptTrial .modal-content {
    width: 100%;
    max-width: 860px;
    margin: auto;
    padding: 40px 48px;
    border: none;
    box-shadow: 0 20px 50px -12px rgba(16, 24, 40, 0.35);
}

/* Ikona štítu a nadpis na stred — rovnaké prevedenie ako potvrdzovacie modaly
   (krúžok rieši .modal .modal-icon vyššie). Samotný právny text zostáva zarovnaný
   vľavo, na stred by sa dlhý odsek čítal zle. */
#acceptGdpr .title,
#acceptTrial .title {
    margin-bottom: 20px;
    text-align: center;
}

/* Právny text do bloku — zarovnaný po oboch okrajoch. */
#acceptGdpr .modal-content p,
#acceptTrial .modal-content p {
    text-align: justify;
}

#acceptGdpr .gdpr-lead,
#acceptTrial .gdpr-lead {
    margin-bottom: 18px;
}

/* Odrážky s fajkou v brand modrej — rovnaká fa-check, aká sa používa v cenníku. */
#acceptGdpr .gdpr-list,
#acceptTrial .gdpr-list {
    list-style: none;
    margin: 0 0 28px;
    padding: 0;
}

#acceptGdpr .gdpr-list li,
#acceptTrial .gdpr-list li {
    position: relative;
    padding-left: 28px;
    margin-bottom: 14px;
    line-height: 1.6;
}

#acceptGdpr .gdpr-list li:last-child,
#acceptTrial .gdpr-list li:last-child {
    margin-bottom: 0;
}

#acceptGdpr .gdpr-list li:before,
#acceptTrial .gdpr-list li:before {
    content: "\f00c";
    font-family: FontAwesome;
    position: absolute;
    left: 0;
    top: 2px;
    font-size: 13px;
    color: #0075B2;
}

@media (max-width: 575.98px) {
    #acceptGdpr.modal,
    #acceptTrial.modal {
        padding: 12px;
    }

    #acceptGdpr .modal-content,
    #acceptTrial .modal-content {
        padding: 24px 20px;
    }
}