/*
    Hostilla / Hostina - RWD v2 SAFE
    Cel: test responsywności bez psucia desktopu.
    Wgraj jako: /App_Themes/Hostina/Hostina-rwd.css
    Ten plik ma ZASTĄPIĆ poprzedni Hostina-rwd.css.
*/

.rwdMenuToggle {
    display: none;
}

/* Nie zmieniamy desktopu. RWD startuje dopiero na telefon/tablet. */
@media (max-width: 768px) {

    *,
    *::before,
    *::after {
        box-sizing: border-box;
    }

    html,
    body {
        width: 100%;
        max-width: 100%;
        overflow-x: hidden;
    }

    body,
    .bodyPay {
        min-width: 0 !important;
        font-size: 13px !important;
    }

    img,
    object,
    embed,
    iframe {
        max-width: 100%;
    }

    img {
        height: auto;
    }

    .main {
        width: 100% !important;
        max-width: 100% !important;
        padding-left: 10px;
        padding-right: 10px;
    }

    .main0,
    .topBG,
    .footerBG {
        float: none !important;
        width: 100% !important;
        min-width: 0 !important;
        height: auto !important;
    }

    .topLeft,
    .topRight,
    .footerLeft,
    .footerRight {
        display: none !important;
    }

    .topCenter,
    .cu_topCenter,
    .footerCenter {
        position: relative !important;
        left: auto !important;
        top: auto !important;
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        background: none !important;
        border-right: 0 !important;
    }

    /* Góra */
    .topTop,
    .topTopLeft,
    .topTopRight {
        float: none !important;
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        min-height: 0 !important;
        background: none !important;
    }

    .topLogo {
        float: none !important;
        padding: 14px 0 !important;
        text-align: center !important;
    }

    .topLogo img {
        max-width: 230px;
    }

    .topLangMenu,
    .topMiniMenu {
        float: none !important;
        width: 100% !important;
        text-align: center !important;
        margin: 4px 0 8px 0 !important;
    }

    .topMiniMenuMail,
    .topMiniMenuAccount,
    .topMiniMenuSupport,
    .topMiniMenuContact {
        float: none !important;
        display: inline-block !important;
        vertical-align: top;
        margin: 5px 7px !important;
        text-align: center !important;
    }

    /* Menu główne - hamburger */
    .mainMenuTop {
        float: none !important;
        width: 100% !important;
        height: auto !important;
        border-left: 0 !important;
        border-right: 0 !important;
        background: #343434 !important;
    }

    .rwdMenuToggle {
        display: block !important;
        width: 100%;
        padding: 13px 16px;
        margin: 0;
        border: 0;
        background: #343434;
        color: #ffffff;
        font-weight: bold;
        font-size: 15px;
        text-align: left;
        cursor: pointer;
    }

    .rwdMenuToggle::after {
        content: "☰";
        float: right;
        font-size: 18px;
        line-height: 18px;
    }

    .menuTop {
        display: none;
        float: none !important;
        width: 100% !important;
        height: auto !important;
        margin: 0 !important;
        background: #343434 !important;
        overflow: visible !important;
    }

    html.rwd-menu-open .mainMenuTop .menuTop {
        display: block !important;
    }

    .menuTopLeft,
    .menuTopRight {
        float: none !important;
        width: 100% !important;
        padding-left: 0 !important;
        background: #343434 !important;
    }

    .menuTopLeft a:link,
    .menuTopLeft a:visited,
    .menuParent {
        float: none !important;
        display: block !important;
        width: 100% !important;
        padding: 13px 16px !important;
        border-bottom: 1px solid #555 !important;
        background: #343434 !important;
        color: #fff !important;
    }

    .menuTopLeft a:hover,
    .menuParent:hover {
        background: #4b8107 !important;
        text-decoration: none !important;
    }

    .menuTopLeftSeperator {
        display: none !important;
    }

    .menuTopRightCont {
        float: none !important;
        display: block !important;
        width: 100% !important;
        height: auto !important;
        padding: 12px 16px !important;
    }

    .menuTopRightCont a:link,
    .menuTopRightCont a:visited {
        display: block !important;
    }

    /*
       WAŻNE:
       Nie pokazujemy wszystkich submenu naraz, bo to rozjeżdża stronę.
       Submenu pokaże się tylko przy hover/focus-within.
    */
    .submenu,
    .submenuNone {
        display: none !important;
        visibility: hidden !important;
    }

    .menuBg2:hover .submenu,
    .menuBg2:focus-within .submenu {
        display: block !important;
        position: static !important;
        visibility: visible !important;
        width: 100% !important;
        background: #4b8107 !important;
    }

    .submenu a:link,
    .submenu a:visited {
        width: 100% !important;
        padding: 10px 16px 10px 32px !important;
        background: #4b8107 !important;
    }

    /* Hero / grafika / slogan / logowanie */
    .topFoter,
    .topLeftImgBg,
    .cu_topLeftImgBg,
    .topFootRight,
    .topFootRightContMain,
    .topFootRightLogin,
    .boxLogin,
    .boxLoginActiv {
        float: none !important;
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        margin-left: 0 !important;
    }

    .topLeftImgBg,
    .cu_topLeftImgBg {
        display: none !important;
    }

    .topFootRightCont {
        float: none !important;
        width: 100% !important;
        height: auto !important;
        margin: 10px 0 !important;
        padding: 0 10px !important;
        font-size: 20px !important;
        line-height: 28px !important;
        text-align: center !important;
    }

    .topFootRightCont b {
        font-size: 20px !important;
    }

    .boxLoginMain,
    .boxLoginContent,
    .boxLoginResellerContent,
    .boxLoginLoginInput,
    .boxLoginPasswordInput,
    .boxLoginBtnMain,
    .boxLoginCart {
        float: none !important;
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        padding: 6px 10px !important;
        margin: 0 !important;
    }

    .boxLoginTitle {
        float: none !important;
        width: 100% !important;
        text-align: left !important;
        padding: 8px 10px 0 10px !important;
    }

    .boxLoginLoginInput input,
    .boxLoginPasswordInput input {
        width: 100% !important;
        height: 34px !important;
        font-size: 14px !important;
    }

    .boxLoginBtnMain .btn,
    .boxLoginBtnMain .btn a:link,
    .boxLoginBtnMain .btn a:visited {
        width: 100% !important;
        display: block !important;
        text-align: center !important;
    }

    .boxLoginCartTop {
        position: relative !important;
    }

    .boxLoginCart a:link,
    .boxLoginCart a:visited {
        position: relative !important;
        display: block !important;
        width: 100% !important;
        padding: 6px 0 !important;
        text-align: center !important;
    }

    /* Główna treść */
    .mainCenter,
    .mainLeft,
    .d_mainRight,
    .mainContentBg,
    .mainContentBg2,
    .mainContentTitle,
    .mainContent,
    .content,
    .content2,
    .newsContentMain,
    .newsTitle,
    .newsDate,
    .newsContent,
    .newsContentButton,
    .newsContentHr,
    .priceListTitle,
    .priceListTitle2 {
        float: none !important;
        width: 100% !important;
        max-width: 100% !important;
        margin-left: 0 !important;
        padding-left: 0 !important;
    }

    .mainLeft {
        margin-top: 0 !important;
        padding: 14px 0 !important;
    }

    .mainContentBg {
        margin-top: 0 !important;
        padding: 14px 0 !important;
    }

    .mainContentBg2,
    .cu_content {
        padding: 16px !important;
    }

    .leftTitleTop,
    .leftNewsTitleTop,
    .leftMenuBg,
    .leftMenu,
    .leftNews,
    .leftNewsTitle,
    .leftNewsDate,
    .leftNewsContent,
    .leftNewsHr,
    .leftNewsButtom,
    .dCat,
    .dCatSub {
        float: none !important;
        width: 100% !important;
        max-width: 100% !important;
        padding-left: 0 !important;
    }

    .leftMenu a:link,
    .leftMenu a:visited,
    .dCat a:link,
    .dCat a:visited,
    .dCatSub a:link,
    .dCatSub a:visited {
        float: none !important;
        display: block !important;
        width: 100% !important;
    }

    /* Formularze tabelkowe */
    .listP,
    .listP tbody,
    .listP tr,
    .listP td,
    .listL,
    .listL tbody,
    .listL tr,
    .listL td,
    .listTab,
    .listTab tbody,
    .listTab tr,
    .listTab td,
    .listTab th {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        float: none !important;
        margin-left: 0 !important;
    }

    .listP td.listLeft,
    .listP td.listRight,
    .listP td.listRight2,
    .listL td.listLeft,
    .listL td.listRight {
        display: block !important;
        width: 100% !important;
        float: none !important;
    }

    .listPInputMain,
    .InputMainPassword,
    .InputMainPassword1,
    .listPInputDdlMain,
    .inputMain,
    .inputDdlMain,
    .ddlistMain,
    input[type="text"],
    input[type="password"],
    select,
    textarea {
        width: 100% !important;
        max-width: 100% !important;
        min-height: 34px !important;
        font-size: 14px !important;
    }

    .accountCreateBody,
    .accountCreateBody2,
    .accountCreateBtn {
        float: none !important;
        width: 100% !important;
    }

    .accountCreateBody span {
        float: none !important;
        display: block !important;
        width: 100% !important;
        margin-bottom: 4px;
    }

    .btnMainBlack,
    .btnMainBlack2,
    .btnMainBlack3,
    .btnMainGreen,
    .btnACBlack,
    .btnACGreen,
    .btnACBlack2,
    .btnACGreen2,
    .btnACGreen3 {
        float: none !important;
        display: block !important;
        width: 100% !important;
        margin: 6px 0 !important;
    }

    .btnMainBlack a:link,
    .btnMainBlack a:visited,
    .btnMainBlack2 a:link,
    .btnMainBlack2 a:visited,
    .btnMainBlack3 a:link,
    .btnMainBlack3 a:visited,
    .btnMainGreen a:link,
    .btnMainGreen a:visited,
    .btnACBlack a:link,
    .btnACBlack a:visited,
    .btnACGreen a:link,
    .btnACGreen a:visited,
    .btnACBlack2 a:link,
    .btnACBlack2 a:visited,
    .btnACGreen2 a:link,
    .btnACGreen2 a:visited,
    .btnACGreen3 a:link,
    .btnACGreen3 a:visited {
        display: block !important;
        width: 100% !important;
        text-align: center !important;
    }

    /* Strona główna */
    .d_ordersBgMain,
    .d_ordersBg,
    .d_ordersTitle,
    .d_ordersPromotionZ1,
    .d_ordersPromotion,
    .d_ordersContent,
    .d_ordersContent ul,
    .d_domainRegiMain,
    .d_domainRegiMain_v2,
    .d_domainRegiTitle,
    .d_domainRegiCont,
    .d_domainRegiContBott,
    .d_customerServiceMain,
    .d_customerServiceMainZ2,
    .d_customerServiceTitle,
    .d_customerServiceContent,
    .d_customerServiceContentBottom,
    .d_BanerDathouse,
    .d_BanerDathouseTitle,
    .d_BanerDathouseCont {
        float: none !important;
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        padding-left: 0 !important;
        margin-left: 0 !important;
    }

    .d_domainRegiContLeft,
    .d_domainRegiNameInput,
    .d_domainRegiDdl,
    .d_domainRegiContBottLeft,
    .d_domainRegiBtnMain,
    .d_customerServiceInput,
    .d_customerServiceBtnMain {
        float: none !important;
        width: 100% !important;
        margin: 6px 0 !important;
        padding-left: 0 !important;
        text-align: left !important;
    }

    .d_ordersBgMain,
    .d_ordersBg {
        background-size: cover !important;
    }

    /* Pakiety */
    .boxPacksMain,
    .boxPacksBig,
    .boxPacks,
    .boxPacksOne,
    .boxPacksTypeTitle,
    .boxPacksTypeTitle2,
    .boxPack,
    .boxPackTitle,
    .boxPackContent,
    .boxPackContent ul,
    .boxPackContentPromoZ1,
    .boxPackContentPromo,
    .boxPackPrice,
    .boxPackPriceZ2,
    .boxPopup,
    .boxPopupTitle,
    .boxPacksRegMain,
    .boxPopupReg,
    .boxPacksMain2,
    .boxPopup2,
    .boxCheckDomain {
        width: 100% !important;
        max-width: 100% !important;
        margin-left: 0 !important;
    }

    .boxPacksLeft,
    .boxPacksRight,
    .boxPacksBigContRight,
    .boxPacksContent,
    .boxPacksContent ul,
    .boxPacksBtnMain,
    .boxPacksContentPromoZ1,
    .boxPacksContentPromo,
    .boxPacksHeader,
    .boxPacksHeaderLogo,
    .boxPacksHeaderPackName,
    .boxPacksHeaderPrice,
    .boxPacksHeaderPrice2 {
        float: none !important;
        width: 100% !important;
        max-width: 100% !important;
        margin-left: 0 !important;
        padding-left: 0 !important;
        border-left: 0 !important;
    }

    .boxPacksBig .boxPacksContent {
        padding-left: 0 !important;
    }

    /* Cenniki i szerokie tabele: scroll poziomy zamiast rozsypania */
    .content,
    .content2,
    .mainContent,
    .cu_mainContent,
    .contListprice,
    .maincontainerPanel,
    .userPanelContainer,
    .userPanelContainer_v2,
    .maincontainer3,
    #galleryContainer {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
    }

    .listPrice,
    .listDom,
    .listCu,
    .listC,
    .listPanel,
    .listPanel2 {
        min-width: 620px;
        max-width: none !important;
    }

    /* Panel */
    .maincontainerPanel,
    .userPanelContainer,
    .userPanelContainer_v2,
    .maincontainer3 {
        width: 100% !important;
        max-width: 100% !important;
        margin-left: 0 !important;
    }

    .iframePanel {
        width: 100% !important;
        max-width: 100% !important;
    }

    /* Partnerzy/slideshow */
    #dhtmlgoodies_slideshow,
    #galleryContainer {
        width: 100% !important;
        max-width: 100% !important;
    }

    #arrow_left,
    #arrow_right {
        display: none !important;
    }

    #galleryContainer {
        height: auto !important;
    }

    #theImages {
        position: static !important;
        width: auto !important;
        white-space: nowrap;
        height: auto !important;
    }

    #theImages img {
        float: none !important;
        display: inline-block !important;
    }

    /* Stopka */
    .mainCenterFooter,
    .centerFooter,
    .centerFooterLeft,
    .centerFooterLeftCont,
    .centerFooterLeftLog,
    .centerFooterRight,
    .centerFooterRighCont,
    .centerFooterRightLog,
    .footerContLeft,
    .footerContRight,
    .footerMenu,
    .footerLeftContent,
    .footerContRecommended {
        float: none !important;
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        padding: 10px !important;
        margin: 0 !important;
        text-align: center !important;
    }

    .progres {
        width: calc(100% - 32px) !important;
        left: 16px !important;
        right: 16px !important;
        margin-left: 0 !important;
    }
}

/* Koszyk/płatności z inline-style */
@media (max-width: 780px) {

    body.bodyPay [style*="width:750px"],
    body.bodyPay [style*="width: 750px"],
    body.bodyPay [style*="width:720px"],
    body.bodyPay [style*="width: 720px"],
    body.bodyPay [style*="width:700px"],
    body.bodyPay [style*="width: 700px"],
    body.bodyPay [style*="width:620px"],
    body.bodyPay [style*="width: 620px"],
    body.bodyPay [style*="width:600px"],
    body.bodyPay [style*="width: 600px"] {
        width: 100% !important;
        max-width: 100% !important;
    }

    body.bodyPay [style*="padding-left:190px"],
    body.bodyPay [style*="padding-left: 190px"],
    body.bodyPay [style*="padding-left:30px"],
    body.bodyPay [style*="padding-left: 30px"],
    body.bodyPay [style*="padding-left:26px"],
    body.bodyPay [style*="padding-left: 26px"],
    body.bodyPay [style*="padding-left:25px"],
    body.bodyPay [style*="padding-left: 25px"] {
        padding-left: 0 !important;
    }

    body.bodyPay [style*="margin:0 auto; width:750px"],
    body.bodyPay [style*="margin:0 auto; width: 750px"],
    body.bodyPay [style*="margin: 0 auto; width:750px"],
    body.bodyPay [style*="margin: 0 auto; width: 750px"] {
        width: calc(100% - 24px) !important;
        margin-left: 12px !important;
        margin-right: 12px !important;
    }

    body.bodyPay .topTopLeft,
    body.bodyPay .topLogo {
        width: 100% !important;
        text-align: center !important;
    }

    body.bodyPay table {
        max-width: 100% !important;
    }
}


/* ---------------------------------------------------------
   Hostilla RWD v3 - mobile overlap fixes
   Dopisane po v2. Nie zmienia desktopu.
--------------------------------------------------------- */

@media (max-width: 768px) {

    /*
      Najczęstszy powód "najeżdżania" menu:
      litMenu generuje dodatkowe wrappery .menuBg2 / .menuName,
      które w starym CSS dalej mają float:left.
    */
    .menuBg2,
    .menuName {
        float: none !important;
        display: block !important;
        width: 100% !important;
        clear: both !important;
        position: relative !important;
    }

    .menuTopLeft > *,
    .menuTopRight > * {
        max-width: 100% !important;
    }

    .menuTopLeft {
        clear: both !important;
        overflow: visible !important;
    }

    .menuParent {
        width: 100% !important;
        clear: both !important;
    }

    /*
      Ukrywamy separator i absolutne elementy z hero,
      które na telefonie potrafią wchodzić na menu/login.
    */
    .cert,
    .mainImg,
    .mainImg2 {
        display: none !important;
    }

    /*
      Twarde odseparowanie bloków nagłówka.
    */
    .topTop,
    .mainMenuTop,
    .topFoter,
    .topFootRight,
    .topFootRightContMain,
    .topFootRightLogin,
    .boxLoginMain,
    .boxLogin,
    .mainCenter,
    .mainLeft,
    .mainContentBg,
    .mainContentBg2,
    .mainCenterFooter,
    .footerBG {
        clear: both !important;
        position: relative !important;
    }

    .topFootRight,
    .topFootRightContMain,
    .topFootRightLogin {
        display: block !important;
        overflow: visible !important;
        min-height: 0 !important;
    }

    .topFootRightCont {
        position: relative !important;
        z-index: 1 !important;
    }

    .boxLoginMain {
        position: relative !important;
        z-index: 2 !important;
        margin-top: 8px !important;
        margin-bottom: 12px !important;
        overflow: hidden !important;
    }

    .boxLogin {
        background: #e4e4e4 !important;
        padding-bottom: 8px !important;
    }

    .boxLoginCart,
    .boxLoginCartTop,
    .boxLoginCartCont {
        position: relative !important;
        clear: both !important;
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        text-align: center !important;
    }

    .boxLoginCartTop img,
    .boxLoginCartTop b {
        float: none !important;
        display: inline-block !important;
        vertical-align: middle !important;
    }

    /*
      Lewe menu i treść: wymuszamy start nowego bloku.
    */
    .mainLeft + .d_mainRight,
    .mainLeft + .mainContentBg,
    .d_mainRight,
    .mainContentBg {
        clear: both !important;
    }

    /*
      Aktualności na stronie głównej: tytuł i data nie powinny stać obok siebie.
    */
    .newsTitle,
    .newsDate {
        float: none !important;
        display: block !important;
        width: 100% !important;
        text-align: left !important;
    }

    /*
      Stopka płatności/partnerzy - stare elementy miały stałe wysokości.
    */
    .centerFooterLeftLog img,
    .centerFooterRightLog img {
        float: none !important;
        display: inline-block !important;
        margin: 6px !important;
        vertical-align: middle !important;
    }

    /*
      Cookie modal - na telefonie nie może zakrywać strony w dziwnym układzie.
    */
    .m_mod_f {
        padding: 12px !important;
        align-items: flex-end !important;
    }

    .m_mod_b {
        width: 100% !important;
        max-width: 100% !important;
        margin-bottom: 12px !important;
        max-height: calc(100vh - 24px) !important;
    }

    .m_mod_c {
        min-height: 0 !important;
        max-height: calc(100vh - 24px) !important;
    }

    .m_mod_c_b {
        min-height: 0 !important;
        max-height: calc(100vh - 150px) !important;
        overflow-y: auto !important;
    }

    .m_mod_c_b3 {
        display: block !important;
    }

    .m_mod_c_f {
        display: block !important;
        padding: 10px !important;
    }

    .m_mod_c_f .btnACGreenV4,
    .m_mod_c_f a {
        display: block !important;
        width: 100% !important;
        margin: 8px 0 !important;
        text-align: center !important;
    }

    .cm-m-box-h {
        align-items: flex-start !important;
    }

    .cm-m-box-h-txt {
        width: auto !important;
        max-width: none !important;
        font-size: 1em !important;
    }
}

/* Mniejsze telefony */
@media (max-width: 420px) {

    .main {
        padding-left: 8px !important;
        padding-right: 8px !important;
    }

    .topLogo img {
        max-width: 210px !important;
    }

    .topMiniMenuMail,
    .topMiniMenuAccount,
    .topMiniMenuSupport,
    .topMiniMenuContact {
        width: 46% !important;
        margin: 5px 1% !important;
    }

    .topFootRightCont,
    .topFootRightCont b {
        font-size: 18px !important;
        line-height: 25px !important;
    }

    .mainContentBg2,
    .cu_content {
        padding: 12px !important;
    }
}

/* ---------------------------------------------------------
   Hostilla RWD v4 - zielone zaokrąglone menu mobile
   Dopisz na końcu Hostina-rwd.css albo użyj pełnego pliku v4.
--------------------------------------------------------- */

@media (max-width: 768px) {

    .mainMenuTop {
        background: transparent !important;
        border: none !important;
        padding: 8px 10px !important;
    }

    .rwdMenuToggle {
        width: 100% !important;
        display: block !important;
        background: #2f5f08 !important;
        color: #ffffff !important;
        border: 1px solid #4f8c18 !important;
        border-radius: 999px !important;
        padding: 13px 20px !important;
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.18) !important;
        font-size: 15px !important;
        line-height: 20px !important;
    }

    .rwdMenuToggle:hover,
    .rwdMenuToggle:focus {
        background: #3f7a0d !important;
        outline: none !important;
    }

    .menuTop {
        background: transparent !important;
        padding: 8px 0 0 0 !important;
    }

    .menuTopLeft,
    .menuTopRight {
        background: transparent !important;
    }

    .menuTopLeft a:link,
    .menuTopLeft a:visited,
    .menuParent,
    .menuTopRightCont {
        background: #2f5f08 !important;
        color: #ffffff !important;
        border: 1px solid #4f8c18 !important;
        border-radius: 999px !important;
        margin: 6px 0 !important;
        padding: 12px 18px !important;
        box-shadow: 0 1px 4px rgba(0, 0, 0, 0.12) !important;
    }

    .menuTopLeft a:hover,
    .menuTopLeft a:focus,
    .menuParent:hover,
    .menuParent:focus {
        background: #3f7a0d !important;
        color: #ffffff !important;
        text-decoration: none !important;
    }

    .menuTopRightCont a:link,
    .menuTopRightCont a:visited {
        color: #ffffff !important;
    }

    .menuTopRightCont b {
        color: #b8ff66 !important;
    }

    .menuBg2:hover .submenu,
    .menuBg2:focus-within .submenu {
        background: transparent !important;
        padding-left: 12px !important;
    }

    .submenu a:link,
    .submenu a:visited {
        background: #3b7410 !important;
        border-color: #5c9820 !important;
        border-radius: 999px !important;
        margin: 5px 0 !important;
        padding: 10px 18px 10px 28px !important;
    }

    .submenu a:hover,
    .submenu a:focus {
        background: #4d8f16 !important;
        color: #ffffff !important;
    }
}

/* Opcjonalnie: lekko zaokrąglone menu na desktopie też.
   Działa dopiero od szerokości 769px, więc nie gryzie się z mobile. */
@media (min-width: 769px) {

    .mainMenuTop {
        border-radius: 18px !important;
        overflow: hidden !important;
        background: #2f5f08 !important;
    }

    .menuTop {
        background: #2f5f08 !important;
        border-radius: 15px !important;
    }

    .menuTopLeft a:link,
    .menuTopLeft a:visited,
    .menuParent {
        background: transparent !important;
    }

    .menuTopLeft a:hover,
    .menuParent:hover {
        background: #3f7a0d !important;
    }

    .menuTopRight {
        background: #244b05 !important;
    }
}

/* ---------------------------------------------------------
   Hostilla RWD v5 - menu panelu klienta
   Dotyczy: /Customer/*
   Klasy: .cu_menu, .cu_menuBlack, .cu_menuBlack2, .topMenuD, ul.drop, .ds_menu
--------------------------------------------------------- */

/* Panel klienta - desktop i tablet */
@media (min-width: 769px) {

    .cu_menu {
        display: flex !important;
        flex-wrap: wrap !important;
        justify-content: flex-end !important;
        align-items: center !important;
        gap: 6px !important;
        width: 970px !important;
        max-width: 100% !important;
        float: none !important;
    }

    .cu_menuBlack,
    .cu_menuBlack2,
    .topMenuD {
        float: none !important;
        display: block !important;
        margin: 0 0 6px 0 !important;
        text-align: center !important;
    }

    .cu_menuBlack a:link,
    .cu_menuBlack a:visited,
    .cu_menuBlack2 a:link,
    .cu_menuBlack2 a:visited,
    ul.drop a {
        display: inline-block !important;
        background: #2f5f08 !important;
        color: #ffffff !important;
        border: 1px solid #4f8c18 !important;
        border-radius: 999px !important;
        padding: 8px 15px !important;
        font-weight: bold !important;
        text-decoration: none !important;
        line-height: 16px !important;
        box-shadow: 0 1px 4px rgba(0, 0, 0, 0.12) !important;
    }

    .cu_menuBlack a:hover,
    .cu_menuBlack2 a:hover,
    ul.drop a:hover {
        background: #3f7a0d !important;
        color: #ffffff !important;
        text-decoration: none !important;
    }

    .topMenuD {
        position: relative !important;
        z-index: 10010 !important;
    }

    ul#nav,
    ul.drop {
        float: none !important;
        display: block !important;
        margin: 0 !important;
        padding: 0 !important;
        position: relative !important;
        z-index: 10010 !important;
    }

    ul.drop li {
        float: none !important;
        display: block !important;
        overflow: visible !important;
        position: relative !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    ul.drop ul {
        visibility: hidden !important;
        position: absolute !important;
        top: 100% !important;
        left: 0 !important;
        min-width: 230px !important;
        background: transparent !important;
        border: 0 !important;
        padding-top: 7px !important;
        z-index: 10020 !important;
    }

    ul.drop li:hover > ul {
        visibility: visible !important;
    }

    ul.drop ul li {
        display: block !important;
        width: 100% !important;
        border: 0 !important;
        white-space: nowrap !important;
        margin-bottom: 5px !important;
    }

    ul.drop ul li a {
        display: block !important;
        width: 100% !important;
        text-align: left !important;
        background: #3b7410 !important;
        border-color: #5c9820 !important;
        padding: 9px 15px !important;
    }

    ul.drop ul li a:hover {
        background: #4d8f16 !important;
    }

    /*
      Podmenu usług w panelu / domenach, jeżeli występuje jako .ds_menu.
    */
    .ds_menu {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 6px !important;
        width: 922px !important;
        max-width: 100% !important;
        float: none !important;
    }

    .ds_menu a:link,
    .ds_menu a:visited,
    .ds_menu .ds_menuAct:link,
    .ds_menu .ds_menuAct:visited,
    .ds_menu .popup:link,
    .ds_menu .popup:visited {
        float: none !important;
        display: inline-block !important;
        margin: 0 !important;
        background: #2f5f08 !important;
        color: #ffffff !important;
        border: 1px solid #4f8c18 !important;
        border-radius: 999px !important;
        padding: 8px 15px !important;
        text-decoration: none !important;
        font-weight: bold !important;
    }

    .ds_menu .ds_menuAct:link,
    .ds_menu .ds_menuAct:visited {
        background: #244b05 !important;
    }

    .ds_menu a:hover,
    .ds_menu .popup:hover {
        background: #3f7a0d !important;
        color: #ffffff !important;
        text-decoration: none !important;
    }
}

/* Panel klienta - mobile */
@media (max-width: 768px) {

    .cu_contentTop,
    .cu_menu,
    .cu_content,
    .cu_mainContentTitle,
    .cu_mainContent,
    .ds_menu,
    .ds_bgMain,
    .ds_menuBgContent {
        float: none !important;
        width: 100% !important;
        max-width: 100% !important;
        margin-left: 0 !important;
    }

    .cu_contentTop {
        margin-top: 12px !important;
    }

    .cu_menu {
        display: block !important;
        padding: 8px 0 !important;
    }

    .cu_menuBlack,
    .cu_menuBlack2,
    .topMenuD {
        float: none !important;
        display: block !important;
        width: 100% !important;
        margin: 6px 0 !important;
        text-align: center !important;
    }

    .cu_menuBlack a:link,
    .cu_menuBlack a:visited,
    .cu_menuBlack2 a:link,
    .cu_menuBlack2 a:visited,
    ul.drop a {
        display: block !important;
        width: 100% !important;
        background: #2f5f08 !important;
        color: #ffffff !important;
        border: 1px solid #4f8c18 !important;
        border-radius: 999px !important;
        padding: 12px 18px !important;
        font-weight: bold !important;
        text-decoration: none !important;
        box-shadow: 0 1px 4px rgba(0, 0, 0, 0.12) !important;
        line-height: 18px !important;
    }

    .cu_menuBlack a:hover,
    .cu_menuBlack a:focus,
    .cu_menuBlack2 a:hover,
    .cu_menuBlack2 a:focus,
    ul.drop a:hover,
    ul.drop a:focus {
        background: #3f7a0d !important;
        color: #ffffff !important;
        text-decoration: none !important;
    }

    .topMenuD,
    ul#nav,
    ul.drop,
    ul.drop li {
        float: none !important;
        display: block !important;
        width: 100% !important;
        position: relative !important;
        overflow: visible !important;
        margin: 0 !important;
        padding: 0 !important;
        z-index: 10010 !important;
    }

    /*
      W mobile menu domen w panelu pokazujemy jako listę.
      Dzięki temu użytkownik nie musi trafić palcem w hover.
    */
    ul.drop ul {
        visibility: visible !important;
        position: static !important;
        display: block !important;
        width: 100% !important;
        min-width: 0 !important;
        background: transparent !important;
        border: 0 !important;
        padding: 5px 0 0 12px !important;
        margin: 0 !important;
    }

    ul.drop ul li {
        display: block !important;
        width: 100% !important;
        border: 0 !important;
        white-space: normal !important;
        margin: 5px 0 !important;
    }

    ul.drop ul li a {
        background: #3b7410 !important;
        border-color: #5c9820 !important;
        padding: 10px 16px !important;
        text-align: left !important;
    }

    ul.drop ul li a:hover,
    ul.drop ul li a:focus {
        background: #4d8f16 !important;
    }

    .ds_menu {
        display: block !important;
        padding: 8px 0 !important;
    }

    .ds_menu a:link,
    .ds_menu a:visited,
    .ds_menu .ds_menuAct:link,
    .ds_menu .ds_menuAct:visited,
    .ds_menu .popup:link,
    .ds_menu .popup:visited {
        float: none !important;
        display: block !important;
        width: 100% !important;
        margin: 6px 0 !important;
        background: #2f5f08 !important;
        color: #ffffff !important;
        border: 1px solid #4f8c18 !important;
        border-radius: 999px !important;
        padding: 12px 18px !important;
        text-decoration: none !important;
        font-weight: bold !important;
        text-align: center !important;
    }

    .ds_menu .ds_menuAct:link,
    .ds_menu .ds_menuAct:visited {
        background: #244b05 !important;
    }

    .ds_menu a:hover,
    .ds_menu .popup:hover {
        background: #3f7a0d !important;
        color: #ffffff !important;
        text-decoration: none !important;
    }

    /*
      Treść panelu po menu.
    */
    .cu_content {
        padding: 14px !important;
        background: #efefef !important;
    }
}

/* ---------------------------------------------------------
   Hostilla RWD v6 - poprawka klikanych podmenu w menu głównym
   Problem: "Zarejestruj domenę" i "Certyfikaty SSL" są nagłówkami submenu,
   a nie zwykłymi linkami. Na mobile trzeba je obsłużyć kliknięciem.
--------------------------------------------------------- */

@media (max-width: 768px) {

    .mainMenuTop .menuBg2 {
        float: none !important;
        display: block !important;
        width: 100% !important;
        clear: both !important;
        position: relative !important;
    }

    .mainMenuTop .menuParent {
        cursor: pointer !important;
        user-select: none;
        position: relative !important;
        padding-right: 42px !important;
    }

    .mainMenuTop .menuBg2 > .menuParent::after,
    .mainMenuTop .menuBg2 > .menuName .menuParent::after {
        content: "▾";
        position: absolute;
        right: 18px;
        top: 50%;
        transform: translateY(-50%);
        font-size: 14px;
        line-height: 1;
        opacity: 0.9;
    }

    .mainMenuTop .menuBg2.rwd-submenu-open > .menuParent::after,
    .mainMenuTop .menuBg2.rwd-submenu-open > .menuName .menuParent::after {
        content: "▴";
    }

    .mainMenuTop .menuBg2 .submenu {
        display: none !important;
        visibility: hidden !important;
        position: static !important;
        width: 100% !important;
        background: transparent !important;
        padding: 4px 0 8px 14px !important;
        margin: 0 !important;
    }

    .mainMenuTop .menuBg2.rwd-submenu-open .submenu,
    .mainMenuTop .menuBg2:hover .submenu,
    .mainMenuTop .menuBg2:focus-within .submenu {
        display: block !important;
        visibility: visible !important;
        position: static !important;
    }

    .mainMenuTop .menuBg2.rwd-submenu-open .submenu a:link,
    .mainMenuTop .menuBg2.rwd-submenu-open .submenu a:visited {
        display: block !important;
        width: 100% !important;
        float: none !important;
    }

    /* Gdy submenu jest otwarte, jego linki muszą być nad innymi warstwami. */
    .mainMenuTop,
    .mainMenuTop .menuTop,
    .mainMenuTop .menuTopLeft,
    .mainMenuTop .menuBg2,
    .mainMenuTop .submenu {
        z-index: 20000 !important;
    }
}

/* ---------------------------------------------------------
   Hostilla RWD v7 - twarda poprawka submenu mobile
   Działa z menu generowanym przez litMenu.
--------------------------------------------------------- */

@media (max-width: 768px) {

    .mainMenuTop .menuBg2,
    .mainMenuTop .menuBg2 * {
        pointer-events: auto !important;
    }

    .mainMenuTop .menuBg2 {
        float: none !important;
        display: block !important;
        width: 100% !important;
        clear: both !important;
        position: relative !important;
        z-index: 25000 !important;
    }

    .mainMenuTop .menuBg2 > .menuParent,
    .mainMenuTop .menuBg2 > .menuName,
    .mainMenuTop .menuBg2 .menuParent,
    .mainMenuTop .menuBg2 .menuName {
        cursor: pointer !important;
        position: relative !important;
        z-index: 25001 !important;
    }

    .mainMenuTop .menuBg2.has-rwd-submenu > .menuParent::after,
    .mainMenuTop .menuBg2.has-rwd-submenu > .menuName::after,
    .mainMenuTop .menuBg2.has-rwd-submenu .menuParent::after,
    .mainMenuTop .menuBg2.has-rwd-submenu .menuName::after {
        content: "▾";
        position: absolute;
        right: 18px;
        top: 50%;
        transform: translateY(-50%);
        font-size: 14px;
        line-height: 1;
        opacity: 0.9;
    }

    .mainMenuTop .menuBg2.rwd-submenu-open > .menuParent::after,
    .mainMenuTop .menuBg2.rwd-submenu-open > .menuName::after,
    .mainMenuTop .menuBg2.rwd-submenu-open .menuParent::after,
    .mainMenuTop .menuBg2.rwd-submenu-open .menuName::after {
        content: "▴";
    }

    .mainMenuTop .menuBg2 .submenu {
        display: none !important;
        visibility: hidden !important;
        position: static !important;
        left: auto !important;
        top: auto !important;
        width: 100% !important;
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        overflow: visible !important;
        opacity: 1 !important;
        background: transparent !important;
        padding: 5px 0 8px 14px !important;
        margin: 0 !important;
        z-index: 25002 !important;
    }

    .mainMenuTop .menuBg2.rwd-submenu-open .submenu {
        display: block !important;
        visibility: visible !important;
    }

    .mainMenuTop .menuBg2.rwd-submenu-open .submenu a:link,
    .mainMenuTop .menuBg2.rwd-submenu-open .submenu a:visited {
        display: block !important;
        float: none !important;
        width: 100% !important;
        position: relative !important;
        z-index: 25003 !important;
        pointer-events: auto !important;
    }

    /*
      Ważne: wyłączamy hover jako warunek działania na mobile.
      Hover zostaje tylko na desktopie ze starego CSS.
    */
    .mainMenuTop .menuBg2:hover .submenu:not(.rwd-force-visible) {
        /* nie otwieramy hoverem na mobile, tylko klasą rwd-submenu-open */
    }
}



/* ---------------------------------------------------------
   Hostilla RWD v10 - poprawka desktop dropdown dla zestawu:
   Menu.ascx = v7
   Hostina-rwd.css = v7
   Dopisać NA KOŃCU Hostina-rwd.css albo użyć pełnego pliku v10.
--------------------------------------------------------- */

@media (min-width: 769px) {

    .topBG,
    .topCenter,
    .mainMenuTop,
    .menuTop,
    .menuTopLeft,
    .menuTopRight,
    .menuBg2,
    .menuName {
        overflow: visible !important;
    }

    .mainMenuTop {
        position: relative !important;
        z-index: 30000 !important;
        overflow: visible !important;
        border-radius: 18px !important;
    }

    .menuTop {
        position: relative !important;
        z-index: 30001 !important;
        overflow: visible !important;
        border-radius: 15px !important;
    }

    .menuTopLeft {
        position: relative !important;
        z-index: 30002 !important;
        overflow: visible !important;
    }

    .menuBg2 {
        position: relative !important;
        z-index: 30003 !important;
        overflow: visible !important;
    }

    .menuBg2:hover,
    .menuBg2:focus-within {
        z-index: 30020 !important;
    }

    .menuBg2:hover .submenu,
    .menuBg2:focus-within .submenu {
        display: block !important;
        visibility: visible !important;
        position: absolute !important;
        left: 0 !important;
        top: 50px !important;
        width: 215px !important;
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        overflow: visible !important;
        opacity: 1 !important;
        z-index: 30030 !important;
        background: #4b8107 !important;
        border-radius: 0 0 14px 14px !important;
        box-shadow: 0 8px 18px rgba(0, 0, 0, 0.22) !important;
    }

    .submenu a:link,
    .submenu a:visited {
        display: block !important;
        float: none !important;
        width: auto !important;
        min-width: 185px !important;
        background: #4b8107 !important;
        color: #ffffff !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        margin: 0 !important;
        padding: 8px 10px 8px 25px !important;
    }

    .submenu a:hover,
    .submenu a:focus {
        background: #5ea308 !important;
        color: #ffffff !important;
        text-decoration: none !important;
    }

    .menuTopRight {
        position: relative !important;
        z-index: 1 !important;
    }
}



/* ---------------------------------------------------------
   Hostilla RWD v11 - strona Wsparcie techniczne
   Dotyczy: /27_11/wsparcie-techniczne.aspx
   Klasy starego CSS: .suppMain, .suppCat2Headers, .suppCat2Contents itd.
   Dopisać NA KOŃCU /App_Themes/Hostina/Hostina-rwd.css
--------------------------------------------------------- */

/* Lekka poprawa desktopu bez zmiany układu */
@media (min-width: 769px) {
    .suppMain,
    .suppMainContent {
        max-width: 100% !important;
    }

    .suppCat2Headers {
        position: relative !important;
        overflow: visible !important;
        min-height: 24px;
    }

    .suppCat2Head {
        cursor: pointer !important;
    }

    .suppCat2Contents {
        overflow: visible !important;
    }
}

/* Mobile/tablet */
@media (max-width: 768px) {

    .suppMain,
    .suppMainContent,
    .suppCatTitle,
    .suppTitle,
    .suppTitleCat2,
    .suppCat2Headers,
    .suppCat2Head,
    .selected,
    .suppCat2Contents {
        float: none !important;
        display: block !important;
        clear: both !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
        margin-left: 0 !important;
    }

    .suppMain {
        padding: 0 !important;
    }

    .suppMain p {
        margin: 0 0 12px 0 !important;
        line-height: 1.45 !important;
    }

    .suppMainContent {
        margin-bottom: 12px !important;
    }

    /*
      Główne nagłówki/pozycje wsparcia jako kafelki.
    */
    .suppCatTitle,
    .suppTitle,
    .suppTitleCat2,
    .suppCat2Headers,
    .selected {
        padding: 0 !important;
        margin: 8px 0 !important;
        color: #2f5f08 !important;
        font-weight: bold !important;
        cursor: pointer !important;
    }

    .suppCatTitle a:link,
    .suppCatTitle a:visited,
    .suppTitle a:link,
    .suppTitle a:visited,
    .suppTitleCat2 a:link,
    .suppTitleCat2 a:visited,
    .selected a:link,
    .selected a:visited,
    .suppCat2Head {
        float: none !important;
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        color: #ffffff !important;
        background: #2f5f08 !important;
        border: 1px solid #4f8c18 !important;
        border-radius: 18px !important;
        padding: 12px 42px 12px 18px !important;
        margin: 0 !important;
        line-height: 18px !important;
        font-size: 14px !important;
        font-weight: bold !important;
        text-decoration: none !important;
        box-shadow: 0 1px 4px rgba(0, 0, 0, 0.12) !important;
        position: relative !important;
    }

    .suppCatTitle a:hover,
    .suppTitle a:hover,
    .suppTitleCat2 a:hover,
    .selected a:hover,
    .suppCat2Head:hover {
        background: #3f7a0d !important;
        color: #ffffff !important;
        text-decoration: none !important;
    }

    /*
      Strzałka po prawej stronie nagłówka accordion.
      Accordion.js dodaje klasę .selected na rozwiniętym nagłówku.
    */
    .suppCat2Headers .suppCat2Head::after,
    .suppCat2Headers a::after,
    .suppCatTitle a::after,
    .suppTitle a::after,
    .suppTitleCat2 a::after {
        content: "▾";
        position: absolute;
        right: 18px;
        top: 50%;
        transform: translateY(-50%);
        font-size: 13px;
        line-height: 1;
        opacity: 0.9;
    }

    .selected .suppCat2Head::after,
    .selected a::after {
        content: "▴";
    }

    .selected a:link,
    .selected a:visited,
    .selected .suppCat2Head {
        background: #244b05 !important;
        color: #ffffff !important;
    }

    /*
      Treść rozwiniętych sekcji.
    */
    .suppCat2Contents {
        padding: 12px 14px 14px 18px !important;
        margin: -2px 0 12px 0 !important;
        background: #ffffff !important;
        border: 1px solid #dbe5cd !important;
        border-top: 0 !important;
        border-radius: 0 0 14px 14px !important;
        line-height: 1.45 !important;
        overflow: visible !important;
    }

    .suppCat2Contents p,
    .suppCat2Contents div,
    .suppCat2Contents span {
        max-width: 100% !important;
        line-height: 1.45 !important;
    }

    .suppCat2Contents ul,
    .suppCat2Contents ol,
    .download,
    .downloadUlNone {
        width: auto !important;
        max-width: 100% !important;
        margin: 6px 0 10px 18px !important;
        padding-left: 14px !important;
        box-sizing: border-box !important;
    }

    .suppCat2Contents li,
    .download li {
        margin: 6px 0 !important;
        line-height: 1.4 !important;
    }

    .suppCat2Contents a:link,
    .suppCat2Contents a:visited,
    .download a:link,
    .download a:visited,
    .downloadUlNone a:link,
    .downloadUlNone a:visited {
        word-break: break-word !important;
        overflow-wrap: anywhere !important;
        color: #2f5f08 !important;
    }

    .suppCat2Contents img {
        max-width: 100% !important;
        height: auto !important;
    }
}

/* Bardzo wąskie telefony */
@media (max-width: 420px) {
    .suppCatTitle a:link,
    .suppCatTitle a:visited,
    .suppTitle a:link,
    .suppTitle a:visited,
    .suppTitleCat2 a:link,
    .suppTitleCat2 a:visited,
    .selected a:link,
    .selected a:visited,
    .suppCat2Head {
        border-radius: 16px !important;
        padding: 11px 38px 11px 15px !important;
        font-size: 13px !important;
    }

    .suppCat2Contents {
        padding: 10px 12px 12px 14px !important;
    }
}



/* ---------------------------------------------------------
   Hostilla RWD v12 - ładniejszy akordeon Wsparcie techniczne
   Dotyczy: /27_11/wsparcie-techniczne.aspx
   Dopisać NA KOŃCU /App_Themes/Hostina/Hostina-rwd.css
--------------------------------------------------------- */

/* Desktop + mobile: pytania/nagłówki jako owalne zielone belki */
.suppCat2Headers,
.suppCatTitle,
.suppTitle,
.suppTitleCat2 {
    float: none !important;
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    clear: both !important;
    box-sizing: border-box !important;
    margin: 10px 0 0 0 !important;
    padding: 0 !important;
    background: transparent !important;
}

.suppCat2Head,
.suppCat2Headers a:link,
.suppCat2Headers a:visited,
.suppCatTitle a:link,
.suppCatTitle a:visited,
.suppTitle a:link,
.suppTitle a:visited,
.suppTitleCat2 a:link,
.suppTitleCat2 a:visited {
    float: none !important;
    display: block !important;
    width: 100% !important;
    box-sizing: border-box !important;
    position: relative !important;
    margin: 0 !important;
    padding: 12px 48px 12px 20px !important;
    background: #2f5f08 !important;
    color: #ffffff !important;
    border: 1px solid #4f8c18 !important;
    border-radius: 999px !important;
    font-size: 13px !important;
    font-weight: bold !important;
    line-height: 18px !important;
    text-decoration: none !important;
    box-shadow: 0 2px 7px rgba(0, 0, 0, 0.14) !important;
    cursor: pointer !important;
    transition: background 120ms ease, box-shadow 120ms ease, transform 120ms ease;
}

.suppCat2Head:hover,
.suppCat2Headers a:hover,
.suppCat2Headers a:focus,
.suppCatTitle a:hover,
.suppCatTitle a:focus,
.suppTitle a:hover,
.suppTitle a:focus,
.suppTitleCat2 a:hover,
.suppTitleCat2 a:focus {
    background: #3f7a0d !important;
    color: #ffffff !important;
    text-decoration: none !important;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.18) !important;
}

/* Ikona rozwijania po prawej */
.suppCat2Head::after,
.suppCat2Headers a::after,
.suppCatTitle a::after,
.suppTitle a::after,
.suppTitleCat2 a::after {
    content: "▾";
    position: absolute;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 13px;
    line-height: 1;
    color: #d8ff9a;
}

/*
   Accordion.js zwykle dodaje .selected do aktywnego nagłówka.
   Obsługujemy kilka możliwych wariantów struktury.
*/
.selected .suppCat2Head,
.suppCat2Headers.selected .suppCat2Head,
.suppCat2Headers.selected a:link,
.suppCat2Headers.selected a:visited,
.suppCatTitle.selected a:link,
.suppCatTitle.selected a:visited,
.suppTitle.selected a:link,
.suppTitle.selected a:visited,
.suppTitleCat2.selected a:link,
.suppTitleCat2.selected a:visited {
    background: #244b05 !important;
    border-color: #4f8c18 !important;
    color: #ffffff !important;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.20) !important;
}

.selected .suppCat2Head::after,
.suppCat2Headers.selected .suppCat2Head::after,
.suppCat2Headers.selected a::after,
.suppCatTitle.selected a::after,
.suppTitle.selected a::after,
.suppTitleCat2.selected a::after {
    content: "▴";
}

/* Treść pod pytaniem jako jasna karta */
.suppCat2Contents {
    float: none !important;
    display: block;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    margin: -1px 0 12px 0 !important;
    padding: 16px 20px !important;
    background: #ffffff !important;
    border: 1px solid #dbe5cd !important;
    border-top: 0 !important;
    border-radius: 0 0 20px 20px !important;
    box-shadow: 0 2px 7px rgba(0, 0, 0, 0.06) !important;
    line-height: 1.5 !important;
    overflow: visible !important;
}

/* Typografia w treści */
.suppCat2Contents,
.suppCat2Contents p,
.suppCat2Contents div,
.suppCat2Contents li {
    font-size: 12px !important;
    line-height: 1.5 !important;
}

.suppCat2Contents ul,
.suppCat2Contents ol,
.download,
.downloadUlNone {
    margin-top: 8px !important;
    margin-bottom: 8px !important;
}

.suppCat2Contents a:link,
.suppCat2Contents a:visited,
.download a:link,
.download a:visited,
.downloadUlNone a:link,
.downloadUlNone a:visited {
    color: #2f5f08 !important;
    font-weight: bold;
    overflow-wrap: anywhere;
}

/* Mobile: większe dotykowe elementy */
@media (max-width: 768px) {

    .suppCat2Head,
    .suppCat2Headers a:link,
    .suppCat2Headers a:visited,
    .suppCatTitle a:link,
    .suppCatTitle a:visited,
    .suppTitle a:link,
    .suppTitle a:visited,
    .suppTitleCat2 a:link,
    .suppTitleCat2 a:visited {
        padding: 13px 46px 13px 18px !important;
        font-size: 14px !important;
        line-height: 19px !important;
        border-radius: 999px !important;
    }

    .suppCat2Contents {
        padding: 14px 16px !important;
        border-radius: 0 0 18px 18px !important;
    }

    .suppCat2Contents,
    .suppCat2Contents p,
    .suppCat2Contents div,
    .suppCat2Contents li {
        font-size: 13px !important;
    }
}

/* Bardzo wąskie telefony */
@media (max-width: 420px) {
    .suppCat2Head,
    .suppCat2Headers a:link,
    .suppCat2Headers a:visited,
    .suppCatTitle a:link,
    .suppCatTitle a:visited,
    .suppTitle a:link,
    .suppTitle a:visited,
    .suppTitleCat2 a:link,
    .suppTitleCat2 a:visited {
        padding: 12px 42px 12px 15px !important;
        font-size: 13px !important;
    }

    .suppCat2Head::after,
    .suppCat2Headers a::after,
    .suppCatTitle a::after,
    .suppTitle a::after,
    .suppTitleCat2 a::after {
        right: 16px;
    }
}