/* ── Off-canvas menu: reveal & align header-action shortcodes ──
   The shortcode widgets live inside a container flagged
   elementor-hidden-tablet/elementor-hidden-mobile, so Elementor
   forces display:none at exactly the breakpoints (<=1024px) where
   the off-canvas appears. Re-show them inside the off-canvas only
   and align them flush-left to match the menu items below. */
.e-off-canvas__content .elementor-element.header-actions.elementor-hidden-tablet,
.e-off-canvas__content .elementor-element.header-actions.elementor-hidden-mobile {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    width: 100% !important;
    gap: 0 !important;
    margin: 0px !important;
    padding: 0 !important;
}

/* each shortcode becomes a full-width, left-aligned menu row */
.e-off-canvas__content .header-actions .elementor-widget-shortcode {
    width: 100% !important;
    display: block !important;
}
.e-off-canvas__content .header-actions .elementor-shortcode {
    display: block !important;
    width: 100%;
}

/* "Περιοχή Επαγγελματιών" menu + login/user menu: row styling that
   matches the accordion menu items (left-aligned, full-width).
   Scoped to the whole off-canvas because these widgets may live outside
   the .header-actions container. */
.e-off-canvas__content .xp-user-menu,
.e-off-canvas__content .xp-header-menu {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    position: static !important;
}
.e-off-canvas__content .xp-user-menu-login,
.e-off-canvas__content .xp-user-menu-toggle,
.e-off-canvas__content .xp-header-menu__toggle {
    display: flex !important;
    align-items: center;
    justify-content: flex-start;
    gap: 0px;
    width: 100%;
    padding: 0px !important;
    margin: 0;
    font-size: 17px !important;
    font-weight: 500 !important;
    color: #012545 !important;
    border-radius: 0 !important;
    border: none !important;
    background: transparent !important;
    text-align: left;
}

/* keep the icon sizing consistent with menu item typography */
.e-off-canvas__content .xp-user-menu-login .mi,
.e-off-canvas__content .xp-user-menu-toggle .mi,
.e-off-canvas__content .xp-header-menu__toggle .mi {
    font-size: 26px !important;
    flex: 0 0 auto;
}

/* push any trailing dropdown arrow to the far right like the chevrons */
.e-off-canvas__content .xp-user-menu-arrow,
.e-off-canvas__content .xp-header-menu__arrow {
    margin-left: auto;
}
.e-off-canvas__content .xp-user-menu-toggle[aria-expanded="true"] .xp-user-menu-arrow,
.e-off-canvas__content .xp-header-menu__toggle[aria-expanded="true"] .xp-header-menu__arrow {
    transform: rotate(180deg);
}

/* dropdowns expand downward inline (never float to the side) */
.e-off-canvas__content .xp-user-menu-dropdown,
.e-off-canvas__content .xp-header-menu__dropdown {
    position: static !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    margin: 0 !important;
    min-width: 0 !important;
    width: 100% !important;
    background: transparent !important;
    transform: none !important;
    /* collapsed by default; reveal on open/hover via display toggle so it
       takes no vertical space when closed */
    display: none !important;
    opacity: 1 !important;
    visibility: visible !important;
}
.e-off-canvas__content .xp-user-menu-toggle[aria-expanded="true"] + .xp-user-menu-dropdown,
.e-off-canvas__content .xp-header-menu__toggle[aria-expanded="true"] + .xp-header-menu__dropdown {
    display: block !important;
    padding-top: 10px;
    padding-left: 20px;
}

/* dropdown links styled like the accordion sub-items (indented, full width) */
.e-off-canvas__content .xp-user-menu-dropdown a,
.e-off-canvas__content .xp-header-menu__dropdown a {
    display: flex !important;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 8px 0px;
    font-size: 16px !important;
    font-weight: 400 !important;
    color: #012545 !important;
    white-space: normal !important;
    border: none !important;
}
.e-off-canvas__content .xp-user-menu-dropdown a:hover,
.e-off-canvas__content .xp-header-menu__dropdown a:hover {
    background: rgba(1, 37, 69, .04) !important;
}
.e-off-canvas__content .xp-header-menu__dropdown a.active {
    background: transparent !important;
}
.e-off-canvas__content .xp-user-menu-name {
    padding: 12px 4px 8px 34px !important;
    border: none !important;
}

/* ── User-info-menu: compact toolbar at the top of the menu. Kept in
   normal flow (not absolute) so its user dropdown can expand inline and
   push the content below, instead of floating over the menu — matching the
   behaviour of the other off-canvas dropdowns. */
.e-off-canvas__content {
    position: static !important;
}
.e-off-canvas__content .elementor-element.user-info-menu {
    width: 100% !important;
}
.e-off-canvas__content .user-info-menu .xp-user-menu-wrapper {
    display: flex !important;
    flex-direction: row !important;
    align-items: flex-start;
    gap: 4px;
    width: 100% !important;
}

/* horizontal toggles (icon + initials + arrow); user menu expands downward */
.e-off-canvas__content .user-info-menu .xp-user-menu {
    flex-direction: column !important;
    width: auto !important;
    position: static !important;
}
.e-off-canvas__content .user-info-menu .xp-user-menu-toggle {
    width: auto !important;
    gap: 4px !important;
    padding: 8px !important;
}
.e-off-canvas__content .user-info-menu .xp-user-menu-arrow {
    margin-left: 0 !important;
}

/* user-menu dropdown: inline & identical to .xp-header-menu__dropdown
   (transparent, no card/shadow, indented links, pushes content) */
.e-off-canvas__content .user-info-menu .xp-user-menu-dropdown {
    position: static !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    width: auto !important;
    min-width: 240px !important;
    background: transparent !important;
    box-shadow: none !important;
    border-radius: 0 !important;
}
.e-off-canvas__content .user-info-menu .xp-user-menu-dropdown a {
    padding: 5px 0 !important;
    font-size: 16px !important;
    font-weight: 400 !important;
    color: #012545 !important;
}
.e-off-canvas__content .user-info-menu .xp-user-menu-dropdown a:hover {
    background: rgba(1, 37, 69, .04) !important;
}
.e-off-canvas__content .user-info-menu .xp-user-menu-name {
    padding: 4px 0 8px !important;
    border: none !important;
    font-weight: 600 !important;
}

/* notifications dropdown stays a floating overlay (long list) */
.e-off-canvas__content .user-info-menu .xp-notifications-dropdown {
    position: absolute !important;
    top: 100% !important;
    left: auto !important;
    right: 0 !important;
    width: auto !important;
    min-width: 260px !important;
    background: #fff !important;
    border-radius: 8px !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, .12) !important;
    z-index: 999 !important;
}

.elementor-element.elementor-element-e446fc3.profile-button.user-info-menu.elementor-widget.elementor-widget-shortcode {
    margin-bottom: 20px;
    margin-left: -10px;
}

/* ── Header user-info-menu: push flush-right, immediately left of the
   burger icon. The Elementor header container is a flex row, so
   margin-left:auto consumes the free space to the left and parks the
   toolbar next to the burger. The off-canvas instance is reset below
   (more specific selector wins there). */
.elementor-element.user-info-menu {
    margin-left: auto !important;
    width: auto !important;
}
.e-off-canvas__content .elementor-element.user-info-menu {
    margin-left: 0 !important;
    width: 100% !important;
}

@media (max-width: 1024px) {
    .xp-notifications-toggle {
        padding: 0px;
        margin-top: 10px;
    }

    .xp-user-menu-toggle {
        padding: 0px;
        margin-top: 10px;
    }

    .xp-user-menu-wrapper {
        gap: 10px;
    }

    .xp-user-menu-login {
        padding: 10px;
    }
}

.elementor-element.elementor-element-8c38927.elementor-widget__width-initial.elementor-hidden-desktop.elementor-widget.elementor-widget-image {
    margin-top: 10px;
}

@media (min-width: 1025px) and (max-width: 1200px) {
    .xp-header-menu__toggle {
        font-size: 11.5px;
    }

    .xp-user-menu-toggle {
        padding: 8px 3px;
        margin-left: 30px;
    }

    .xp-notifications-toggle {
        padding: 8px 3px;
    }

    .xp-user-menu-wrapper {
        gap: 2px;
    }
}