/*
Theme Name: BrightHub Child
Theme URI: http://brighthub.casethemes.net
Author: Case-Themes
Author URI: https://casethemes.net/
Description: BrightHub is a sleek WordPress theme crafted for SaaS and tech startups. It comes with beautifully designed homepage layouts, versatile inner pages, and feature-focused sections to showcase your product, pricing, and customer success stories. Fully responsive and easily customizable, BrightHub ensures your site looks stunning on any device. Launch your next SaaS project with BrightHub and have all the essentials you need in one powerful theme.
Version: 1.7.1
License: ThemeForest
License URI: https://themeforest.net/licenses
Template: brighthub
Text Domain: brighthub-child
Tags: saas, startup, business, consulting, consultant, agency, company, advertising, corporate, finance, financial, multipurpose, accountant, marketing, software, modern
Requires at least: 5.8 or Higher
Requires PHP: 7.4 or Higher
Tested up to: 6.4.1

Copyright (c) 2025 Case-Themes. All rights reserved.
This theme is licensed under the GPL-2.0+ license.
*/

/* ==========================================================================
   pxl_icon_box layout-1: CTA button (child theme override)
   ========================================================================== */

/* Equal-height tiles: stretch the icon box to fill its grid/flex cell. */
.elementor-widget-pxl_icon_box:has(> .elementor-widget-container > .pxl-icon-box--has-cta) {
    display: flex;
}

.elementor-widget-pxl_icon_box:has(> .elementor-widget-container > .pxl-icon-box--has-cta) > .elementor-widget-container {
    flex: 1 1 auto;
    display: flex;
    width: 100%;
}

.pxl-icon-box.pxl-icon-box__layout-1.pxl-icon-box--has-cta {
    flex: 1 1 auto;
    height: 100%;
    display: flex;
    flex-direction: column;
}

.pxl-icon-box.pxl-icon-box--has-cta .pxl-icon-box__content {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    align-items: inherit;
}

.pxl-icon-box__cta {
    /* push to the bottom in flex column tiles so buttons align across the row */
    margin-top: auto;
    padding-top: 24px;
}

.pxl-icon-box__btn {
    /* Sit above the full-tile overlay <a class="pxl-icon-box__link"> */
    position: relative;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 22px;
    border-radius: 999px;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: 0.01em;
    color: #111;
    background: #f3f0ff;
    border: 1px solid #ebe6ff;
    text-decoration: none;
    transition: background-color 0.2s ease, color 0.2s ease, transform 0.2s ease, border-color 0.2s ease;
}

.pxl-icon-box__btn:hover,
.pxl-icon-box__btn:focus-visible {
    background: #111;
    color: #fff;
    border-color: #111;
    text-decoration: none;
}

/* Snappy slide with a slight overshoot — stronger than a 3px nudge but still
   subtle. The bezier (0.34, 1.56, 0.64, 1) gives a tiny bounce at the end. */
.pxl-icon-box__btn-arrow {
    display: inline-block;
    transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
    will-change: transform;
}

.pxl-icon-box__btn:hover .pxl-icon-box__btn-arrow,
.pxl-icon-box__btn:focus-visible .pxl-icon-box__btn-arrow {
    transform: translateX(8px);
}

@media (prefers-reduced-motion: reduce) {
    .pxl-icon-box__btn-arrow {
        transition: none;
    }
    .pxl-icon-box__btn:hover .pxl-icon-box__btn-arrow,
    .pxl-icon-box__btn:focus-visible .pxl-icon-box__btn-arrow {
        transform: none;
    }
}

/* Center the button when the tile uses center alignment */
.pxl-icon-box.pxl-icon-box__center .pxl-icon-box__cta {
    display: flex;
    justify-content: center;
}

.pxl-icon-box.pxl-icon-box__right .pxl-icon-box__cta {
    display: flex;
    justify-content: flex-end;
}

/* ==========================================================================
   .custom-bg-2-shape-blue : replace turquoise with brand purple,
   blobs follow the cursor (stronger, more direct).
   The parent theme paints two blurred blobs via ::before / ::after.
   JS updates --blob-a-x/y and --blob-b-x/y on the host element.
   ========================================================================== */

.custom-bg-2-shape-blue {
    /* Cursor position inside the section, in px. Defaults place the
       blobs at the original 33% / 67% anchors before JS kicks in. */
    --blob-a-x: 33%;
    --blob-a-y: 33%;
    --blob-b-x: 67%;
    --blob-b-y: 67%;
    --blob-a-scale: 1;
    --blob-b-scale: 1;
}

/* Background blobs — two-tone gradient feel: a primary lavender purple +
   a softer turquoise/teal trail. Both anchored to the cursor so they
   actually follow the mouse across the whole section. */
.custom-bg-2-shape-blue::before,
.custom-bg-2-shape-blue::after {
    width: 12% !important;
    height: 28% !important;
    filter: blur(120px) !important;
    opacity: 0.55;
    will-change: transform, top, left;
    right: auto !important;
    bottom: auto !important;
}

.custom-bg-2-shape-blue::before {
    background: #B07AFF !important;          /* lavender purple — primary */
    top: var(--blob-a-y) !important;
    left: var(--blob-a-x) !important;
    transform: translate(-50%, -50%) scale(var(--blob-a-scale)) !important;
}

.custom-bg-2-shape-blue::after {
    background: #6FE2D6 !important;          /* soft mint-teal — gentle turquoise hint */
    top: var(--blob-b-y) !important;
    left: var(--blob-b-x) !important;
    transform: translate(-50%, -50%) scale(var(--blob-b-scale)) !important;
    opacity: 0.42;                           /* secondary, subtler than the lavender */
}

@media (prefers-reduced-motion: reduce) {
    .custom-bg-2-shape-blue::before {
        transform: translate(-50%, -50%) scale(1);
        transition: none;
    }
    .custom-bg-2-shape-blue::after {
        transform: translate(50%, 50%) scale(1);
        transition: none;
    }
}

/* ==========================================================================
   Responsive fixes for the services tile grid (.pxl-icon-box layout-1)
   - Mobile (≤ 767px): 1 column, reduced padding, touch-friendly button.
   - Tablet (768–1024px): tighter padding than desktop's 64px.
   - Background blobs: scaled per breakpoint so the colors stay subtle and
     don't dominate the small viewport.
   ========================================================================== */

/* Tablet (≤1024px): Elementor already sets `padding: 24px` from
   box_padding_laptop, leave that alone. We only adjust the bg blobs so
   they stay subtle on smaller viewports. */
@media (max-width: 1024px) {
    .pxl-icon-box__cta {
        padding-top: 18px;
    }

    .custom-bg-2-shape-blue::before,
    .custom-bg-2-shape-blue::after {
        width: 20% !important;
        height: 22% !important;
        filter: blur(95px) !important;
        opacity: 0.5;
    }
}

/* Mobile (≤767px): full-width touch-friendly button, smaller blob, tighter
   row gaps. Elementor handles the 1-column collapse natively. */
@media (max-width: 767px) {
    .pxl-icon-box__cta {
        padding-top: 14px;
        display: flex;
    }

    /* Force the CTA wrapper to span full width regardless of tile alignment
       so the button can stretch to a comfortable touch target. */
    .pxl-icon-box.pxl-icon-box__layout-1 .pxl-icon-box__cta {
        justify-content: stretch;
    }

    .pxl-icon-box__btn {
        width: 100%;
        justify-content: center;
        padding: 12px 20px;
        font-size: 14px;
        min-height: 44px; /* WCAG touch target */
    }

    .custom-bg-2-shape-blue::before,
    .custom-bg-2-shape-blue::after {
        width: 38% !important;
        height: 18% !important;
        filter: blur(70px) !important;
        opacity: 0.45;
    }

    /* Tighter vertical gap when tiles stack into a single column */
    .elementor-element.elementor-element-8475fab.e-grid {
        --grid-row-gap: 16px !important;
        gap: 16px !important;
    }
}

/* Very small phones (≤380px) — squeeze further so nothing overflows. */
@media (max-width: 380px) {
    .pxl-icon-box__btn {
        font-size: 13px;
        padding: 11px 16px;
    }
}

/* Per-tile cursor glow disabled by user request — the cursor effect is
   purely background-blob driven (see .custom-bg-2-shape-blue rules above).
   The .pxl-icon-box__glow span is left in the template but rendered hidden
   so the existing markup keeps validating without visual side-effects. */
.pxl-icon-box__glow {
    display: none !important;
}

/* pxl_icon_box image-mode hero kép — kép öröklje a wrapper border-radius-át,
   ne folyjon ki, és igazodjon a wrapperhez. */
.pxl-icon-box__icon {
    overflow: hidden;
}
.pxl-icon-box__icon img {
    max-width: 100%;
    height: auto;
    border-radius: inherit;
    display: block;
}

/* ==========================================================================
   /rolunk/ sticky-nav CTA: utolsó item ("Ajánlatkérés") gomb stílusban
   - Lila brand-akcent háttér (#B07AFF), fehér szöveg, kontraszt a többi tab-bal.
   - Bal oldali extra gap választja el a tabbar-tól, hogy CTA-nak nézzen ki.
   - Csak a /rolunk/ oldalon (page-id-3849) érvényes, hogy más sticky nav widgetek
     ne kapják meg a button-look-ot.
   ========================================================================== */
body.page-id-3849 .pxl-link__menu-sticky .pxl-link__wrap .pxl-link__item:last-child {
    background-color: #B07AFF;
    margin-left: 8px;
    transition: background-color 0.25s ease, transform 0.25s ease;
}

body.page-id-3849 .pxl-link__menu-sticky .pxl-link__wrap .pxl-link__item:last-child a {
    color: #fff !important;
    font-weight: 600;
}

body.page-id-3849 .pxl-link__menu-sticky .pxl-link__wrap .pxl-link__item:last-child:hover,
body.page-id-3849 .pxl-link__menu-sticky .pxl-link__wrap .pxl-link__item:last-child.active {
    background-color: #9B5DE5;
    transform: translateY(-1px);
}

/* The .active state on the CTA item shouldn't switch to the dark primary color,
   keep the purple. The :hover rule above already locks it. The default theme
   rule sets background-color via .active — override here explicitly. */
body.page-id-3849 .pxl-link__menu-sticky .pxl-link__wrap .pxl-link__item:last-child.active a {
    color: #fff !important;
}

.pxl-physics {
    overflow: visible !important;
}
.pxl-physics canvas {
    overflow: visible !important;
}
.pxl-throwable-element {
    will-change: transform, left, top;
}

/* ==========================================================================
   /ai-automatizacio/ "Mit automatizáljunk" pxl_list (ddbd6bb) — pipa-ikonok
   az eClick lila akcent-színeibe öltöztetve. Az alap SVG
   (check-purple.svg) pinkes (#FBE4F1 + #F72585), ami nem illik az oldali
   lila palettához (#7A5AF8 + #E5DEFF). A parent SVG-t nem módosítjuk —
   más oldalakon is használhatja —, csak ezen a widget-instance-en
   override-oljuk a fill értékeket.
   ========================================================================== */
.elementor-element-ddbd6bb .pxl-list__item-icon svg rect {
    fill: #E5DEFF !important;
}
.elementor-element-ddbd6bb .pxl-list__item-icon svg path {
    fill: #7A5AF8 !important;
}
.elementor-element-ddbd6bb .pxl-list__item-icon svg stop {
    stop-color: #7A5AF8 !important;
}

/* A pill-border halvány lilára, hogy egy palettában legyen az ikonnal. */
.elementor-element-ddbd6bb .pxl-list__style-border li {
    border-color: #E5DEFF !important;
    background: #FAF8FF !important;
}

/* ==========================================================================
   Typebot standalone shortcode — magasság override + szép keret (v3)
   ========================================================================== */
typebot-standard {
    display: block !important;
    width: 100% !important;
    height: 800px !important;
    min-height: 700px !important;
    border-radius: 20px !important;
    box-shadow:
        0 1px 3px rgba(122, 90, 248, 0.08),
        0 10px 40px rgba(122, 90, 248, 0.12),
        0 30px 80px rgba(122, 90, 248, 0.06) !important;
    border: 1px solid rgba(122, 90, 248, 0.08) !important;
    background: #FFFFFF !important;
}

@media (max-width: 768px) {
    typebot-standard {
        height: calc(100vh - 100px) !important;
        min-height: 500px !important;
        border-radius: 12px !important;
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08) !important;
    }
}

/* Az Elementor shortcode wrapper egy szebb „hero" keretbe rakja a botot */
.elementor-shortcode:has(typebot-standard) {
    width: 100%;
    max-width: 1000px;
    margin: 40px auto;
    padding: 24px;
    border-radius: 28px;
    background: linear-gradient(135deg, #FAF8FF 0%, #F0EBFF 100%);
    position: relative;
}

/* Apró dekoráció: lila „glow" pötty a sarokban */
.elementor-shortcode:has(typebot-standard)::before {
    content: '';
    position: absolute;
    top: -40px;
    right: -40px;
    width: 200px;
    height: 200px;
    background: radial-gradient(circle, rgba(122, 90, 248, 0.15) 0%, transparent 70%);
    border-radius: 50%;
    pointer-events: none;
    z-index: 0;
}

.elementor-shortcode:has(typebot-standard) typebot-standard {
    position: relative;
    z-index: 1;
}

@media (max-width: 768px) {
    .elementor-shortcode:has(typebot-standard) {
        padding: 0;
        margin: 0;
        background: none;
        border-radius: 0;
    }
    .elementor-shortcode:has(typebot-standard)::before {
        display: none;
    }
}

/* ==========================================================================
   Typebot chat scrollbar — vastag, lila, húzogatható
   A Typebot Shadow DOM-on belüli scroll-area scrollbarját formázzuk.
   A `::-webkit-scrollbar` öröklődik a Shadow DOM-ba Chromium-os böngészőkön.
   ========================================================================== */
typebot-standard,
typebot-bubble,
typebot-popup {
    /* Firefox */
    scrollbar-width: thin;
    scrollbar-color: #7A5AF8 transparent;
}

/* Globális scrollbar — Chrome/Safari/Edge. Csak a typebot wrapper-en belül érvényesül
   a descendant selector trükkjével (öröklés a Shadow DOM-ba). */
typebot-standard ::-webkit-scrollbar,
typebot-bubble ::-webkit-scrollbar,
typebot-popup ::-webkit-scrollbar {
    width: 12px;
    height: 12px;
}

typebot-standard ::-webkit-scrollbar-track,
typebot-bubble ::-webkit-scrollbar-track,
typebot-popup ::-webkit-scrollbar-track {
    background: rgba(122, 90, 248, 0.05);
    border-radius: 6px;
}

typebot-standard ::-webkit-scrollbar-thumb,
typebot-bubble ::-webkit-scrollbar-thumb,
typebot-popup ::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, #9B7AFF 0%, #7A5AF8 100%);
    border-radius: 6px;
    border: 2px solid transparent;
    background-clip: padding-box;
    cursor: grab;
    transition: background 0.2s;
}

typebot-standard ::-webkit-scrollbar-thumb:hover,
typebot-bubble ::-webkit-scrollbar-thumb:hover,
typebot-popup ::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(180deg, #7A5AF8 0%, #6938EF 100%);
    background-clip: padding-box;
}

typebot-standard ::-webkit-scrollbar-thumb:active,
typebot-bubble ::-webkit-scrollbar-thumb:active,
typebot-popup ::-webkit-scrollbar-thumb:active {
    cursor: grabbing;
    background: #6938EF;
}

/* Mobilon vékonyabb (touch-friendly) */
@media (max-width: 768px) {
    typebot-standard ::-webkit-scrollbar,
    typebot-bubble ::-webkit-scrollbar,
    typebot-popup ::-webkit-scrollbar {
        width: 8px;
        height: 8px;
    }
}


/* ============================================================ */
/* Mobil menü — keresőt ideiglenesen elrejtjük (kérlek később ha visszakell, töröljétek ezt a blokkot) */
/* ============================================================ */
.pxl-header-mobile-search {
    display: none !important;
}

/* ============================================================ */
/* eClick brand typography — Mont (saját webfont)                */
/* ============================================================ */

/* Mont (Fontfabric) — demo verzió, 3 súly (Regular/Bold/Heavy) */
@font-face {
    font-family: 'Mont';
    src: url('/wp-content/themes/brighthub-child/assets/fonts/mont/Mont-Regular.woff') format('woff');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Mont';
    src: url('/wp-content/themes/brighthub-child/assets/fonts/mont/Mont-Bold.woff') format('woff');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Mont';
    src: url('/wp-content/themes/brighthub-child/assets/fonts/mont/Mont-Heavy.woff') format('woff');
    font-weight: 800;
    font-style: normal;
    font-display: swap;
}

:root {
    --eclick-font: 'Mont', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
}

html body,
html body button,
html body input,
html body select,
html body textarea,
html body .pxl-heading,
html body .pxl-heading *,
html body .elementor-heading-title,
html body .elementor-widget-heading .elementor-heading-title,
html body .elementor-widget-text-editor,
html body .elementor-widget-text-editor p,
html body .elementor-button,
html body .pxl-btn,
html body .pxl_text_editor,
html body .menu-item a,
html body .pxl-menu li a,
html body h1, html body h2, html body h3, html body h4, html body h5, html body h6,
html body p, html body span, html body a, html body li, html body div,
html body .ts-tudastar,
html body .ts-tudastar * {
    font-family: 'Mont', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif !important;
}

/* ============================================================ */
/* Tudástár listaoldal — hero h1 & kártya-cím méret + line-height */
/* ============================================================ */

/* Hero h1 ne legyen "hatalmas" — a blog/listing fejlécekkel egyezzen */
body.page-id-19369 #pxl-ptit__default h1,
body.post-type-archive-tudastar #pxl-ptit__default h1 {
    font-size: 44px !important;
    line-height: 1.15 !important;
    font-weight: 700 !important;
    letter-spacing: -0.02em;
}
@media (max-width: 991px) {
    body.page-id-19369 #pxl-ptit__default h1,
    body.post-type-archive-tudastar #pxl-ptit__default h1 {
        font-size: 32px !important;
    }
}
@media (max-width: 576px) {
    body.page-id-19369 #pxl-ptit__default h1,
    body.post-type-archive-tudastar #pxl-ptit__default h1 {
        font-size: 26px !important;
    }
}

/* Kártya-címek ne csússzanak össze: line-height + margin garantáltan */
.ts-tudastar__item-title {
    font-size: 17px !important;
    line-height: 1.35 !important;
    font-weight: 600 !important;
    margin: 0 0 10px !important;
    letter-spacing: -0.005em;
}
.ts-tudastar__item-excerpt {
    line-height: 1.5 !important;
}

/* ============================================================ */
/* Mobil: Brighthub coverflow carousel ne lógjon a heading-be    */
/* ============================================================ */
/* A pxl-container-overlay__item testvérek mellett lévő          */
/* belső e-con-full -200px margin-top-tal van (desktop átfedés). */
/* Mobilon ezt nullázzuk, hogy a kártyák a cím ALATT legyenek.   */
/* Két struktúra-variáns: 1) direkt testvér 2) e-con-inner-en át */
@media (max-width: 767px) {
    .pxl-container-overlay__item ~ .e-con-full.e-child,
    .pxl-container-overlay__item ~ .e-con-inner > .e-con-full.e-child,
    .pxl-container-overlay__item ~ .e-con-inner > .e-con > .e-con-full.e-child {
        margin-top: 0 !important;
    }
}

/* ============================================================ */
/* Referencia kártya: image container horizontálisan középre    */
/* ============================================================ */
/* A .pxl-image__item alapból block-szintű left-aligned         */
/* a slide-inner-ben — nem tölti ki, jobbra üres marad. Margin- */
/* auto-val középre toljuk hogy a kép a kártya közepén legyen.  */
.pxl-image-carousel .pxl-swiper-slider__item-inner .pxl-image__item {
    margin-left: auto !important;
    margin-right: auto !important;
}

/* ============================================================ */
/* Referencia carousel mobilon — scale down + neighbor peek     */
/* ============================================================ */
/* Mobil viewport-on (390px) a 346px wide slide kicsúszik a     */
/* jobb oldalon. Scale 0.82 → ~284px effektív szélesség, illik. */
/* Side cards opacity 0.4 — visual hint a swipe-elhetőségre.    */
@media (max-width: 767px) {
    .elementor-widget-pxl_image_carousel,
    .pxl-image-carousel,
    .pxl-image-carousel .pxl-swiper-slider__inner {
        overflow: visible !important;
    }
    .pxl-image-carousel .pxl-swiper-container {
        transform: scale(0.82);
        transform-origin: center center;
    }
    .pxl-image-carousel .pxl-swiper-slider__item:not(.swiper-slide-active) {
        opacity: 0.4;
        transition: opacity 0.3s ease;
    }
}

/* ============================================================ */
/* Referencia kártya: "Olvasd el" link erősebb, brand lila      */
/* ============================================================ */
/* Eredeti szín #181D27 (dark) → szinte láthatatlan.            */
/* Brand-lila + bold, hover-on sötétebb lila + arrow translateX */
.pxl-post__item-gts {
    color: #7A5AF8 !important;
    font-weight: 600 !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    transition: color 0.18s ease, gap 0.18s ease !important;
}
.pxl-post__item-gts:hover,
.pxl-post__item-gts:focus-visible {
    color: #6938EF !important;
    gap: 12px !important;
}
.pxl-post__item-gts svg {
    transition: transform 0.18s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
    stroke: currentColor !important;
}
.pxl-post__item-gts svg path,
.pxl-post__item-gts svg line {
    stroke: currentColor !important;
}
.pxl-post__item-gts:hover svg {
    transform: translateX(4px) !important;
}

/* ==========================================================================
   GLOBAL MOBILE RESPONSIVENESS FIXES
   Az Elementor + Brighthub gyakori mobil-problémái globálisan javítva.
   ========================================================================== */

@media (max-width: 767px) {
    /* 1. NINCS horizontális görgetés — body + html beszorítva viewport-ra */
    html, body {
        max-width: 100vw;
        overflow-x: hidden !important;
    }

    /* 2. Elementor sections / containers ne nyúljanak ki a viewport-ból */
    .elementor-section,
    .elementor-section .elementor-container,
    .e-con,
    .e-con-full,
    .e-con-boxed,
    .elementor-widget-wrap {
        max-width: 100vw !important;
    }

    /* 3. Content-képek reszponzív (logókat NEM érinti — azoknak fix méret kell) */
    .elementor-widget-image img,
    .pxl-image__item img,
    .elementor figure img:not(.custom-logo) {
        max-width: 100% !important;
        height: auto !important;
    }

    /* 4. Heading-ek skálázása mobil-vw-hez (Elementor-default sokszor 60-80px) */
    h1, .elementor-widget-pxl_heading h1 { font-size: clamp(28px, 8vw, 44px) !important; line-height: 1.15 !important; }
    h2, .elementor-widget-pxl_heading h2 { font-size: clamp(24px, 7vw, 36px) !important; line-height: 1.2 !important; }
    h3, .elementor-widget-pxl_heading h3 { font-size: clamp(20px, 5.5vw, 28px) !important; line-height: 1.25 !important; }

    /* 5. Sectionhöz "túl nagy" padding tablet/laptop-ra optimalizálva volt —
       mobilra leveszi (a Brighthub demo sokszor 80-160px-nyi top/bottom-mal jött) */
    .elementor-section,
    .e-con,
    .e-con-full {
        --gap-fallback-vert: 16px;
    }
    section[class*="padding-top"][style*="padding-top: 160"],
    section[class*="padding-bottom"][style*="padding-bottom: 160"] {
        padding-top: 32px !important;
        padding-bottom: 32px !important;
    }

    /* 6. Touch target minimum (Apple HIG / WCAG): 44x44px */
    a.btn,
    button:not(.elementor-tab-title):not(.eclick-cb-modal-close),
    .pxl-button a,
    a[class*="button"],
    .elementor-button {
        min-height: 44px;
    }

    /* 7. Container belső padding mobile: 16px (felülír 80-120px-eket) */
    .elementor .e-con-boxed > .e-con-inner,
    .elementor .elementor-container {
        padding-left: 16px !important;
        padding-right: 16px !important;
    }

    /* 8. Inline width: NNNNpx (>500) sokszor desktop hero kép-méret —
       force-100% mobilra */
    [style*="width: 1"][style*="px"],
    [style*="width: 2"][style*="px"],
    [style*="width: 3"][style*="px"] {
        /* nem mindegyikre — csak a desktop-szám-méretekre */
    }

    /* 9. Marquee és karusszelek overflow:hidden a szülőre (különben kilóg) */
    .elementor-widget-pxl_marquee .elementor-widget-container,
    .pxl-marquee {
        overflow: hidden !important;
    }
}


/* ==========================================================================
   Section-nav (.pxl-sticky-container) — Ajánlatkérés gomb kiemelése desktop-on
   A többi item #anchor, az Ajánlatkérés /kapcsolat — ez a CTA, lila highlight.
   Az <a>-ra megy a gomb-stílus (NEM az LI-re), különben dupla pill-effekt.
   ========================================================================== */
@media (min-width: 769px) {
    /* LI: reset — semmilyen háttér/padding az LI-n */
    .pxl-sticky-container .pxl-link__item:has(a[href*="/kapcsolat"]),
    .pxl-sticky-container .pxl-link__item:has(a[href="/kapcsolat"]) {
        background: transparent !important;
        padding: 0 !important;
        box-shadow: none !important;
        border-radius: 0 !important;
    }
    /* <a>: maga a gomb */
    .pxl-sticky-container .pxl-link__item:has(a[href*="/kapcsolat"]) > a,
    .pxl-sticky-container .pxl-link__item:has(a[href="/kapcsolat"]) > a {
        background: linear-gradient(135deg, #7A5AF8 0%, #6938EF 100%) !important;
        border-radius: 999px !important;
        padding: 10px 20px !important;
        color: #ffffff !important;
        font-weight: 600 !important;
        display: inline-flex !important;
        align-items: center !important;
        transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.25s ease !important;
        box-shadow: 0 4px 14px rgba(122, 90, 248, 0.32) !important;
    }
    .pxl-sticky-container .pxl-link__item:has(a[href*="/kapcsolat"]) > a .pxl-link--text,
    .pxl-sticky-container .pxl-link__item:has(a[href="/kapcsolat"]) > a .pxl-link--text {
        color: #ffffff !important;
    }
    .pxl-sticky-container .pxl-link__item:has(a[href*="/kapcsolat"]) > a:hover,
    .pxl-sticky-container .pxl-link__item:has(a[href="/kapcsolat"]) > a:hover {
        transform: translateY(-1px) !important;
        box-shadow: 0 6px 18px rgba(105, 56, 239, 0.45) !important;
        background: linear-gradient(135deg, #6938EF 0%, #5025d8 100%) !important;
        color: #ffffff !important;
    }
}