/* op-mega-menu - the country panel under "سرور مجازی".
   Written against the real ancestor chain: the header row (.elementor-element-57bc4b9)
   is the containing block, not the menu item and not the nav widget. */

/* ---- direction ------------------------------------------------------------------- */

/* The page is <html dir="rtl">, so this should be inherited. It is stated anyway because
   the submenus were rendering left-aligned, and a declaration on the element that is
   wrong is cheaper than tracing which ancestor lost the direction. */
.elementor-location-header .elementor-nav-menu ul.sub-menu,
.elementor-location-header .elementor-nav-menu ul.sub-menu li,
.elementor-location-header .elementor-nav-menu ul.sub-menu a {
    direction: rtl !important;
    text-align: right !important;
}

/* ---- the panel ------------------------------------------------------------------- */

@media (min-width: 992px) {

    /* The header row becomes the containing block. Pinning the panel to both its edges
       is what makes overflow impossible: it is exactly as wide as the header, never
       wider, whatever the window is doing. */
    .elementor-location-header .elementor-element-57bc4b9 {
        position: relative;
    }

    .elementor-location-header .elementor-nav-menu li.menu-item-2496 {
        position: static;
    }

    .elementor-location-header .elementor-nav-menu li.menu-item-2496 > ul.sub-menu {
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        width: auto;
        min-width: 0;
        max-width: none;
        box-sizing: border-box;
        margin-top: 10px;
        padding: 28px 32px 24px;
        background: linear-gradient(180deg, #ffffff 0%, #f7f9fd 100%);
        border: 1px solid rgba(120, 145, 185, .16);
        border-radius: 18px;
        box-shadow: 0 24px 60px rgba(15, 30, 60, .18), 0 2px 6px rgba(15, 30, 60, .06);
        column-count: 4;
        column-gap: 32px;
        column-rule: 1px solid rgba(120, 145, 185, .14);
    }

    /* A coloured edge along the top; the panel read as a plain white box without it.
       Inset by the radius so it does not square off the rounded corners. */
    .elementor-location-header.elementor-location-header.elementor-location-header .elementor-nav-menu li.menu-item-2496 > ul.sub-menu::before {
        content: "";
        position: absolute;
        top: 0;
        left: 18px;
        right: 18px;
        height: 3px;
        border-radius: 0 0 3px 3px;
        background: linear-gradient(90deg, #457BFF 0%, #6FA0FF 50%, #457BFF 100%);
    }

    /* A heading and its countries must not split across a column break, or a continent
       ends with its title at the foot of one column and its countries at the head of the
       next. */
    .elementor-location-header .elementor-nav-menu li.menu-item-2496 > ul.sub-menu > li {
        display: block;
        width: 100%;
        break-inside: avoid;
        -webkit-column-break-inside: avoid;
    }

    .elementor-location-header .elementor-nav-menu li.menu-item-2496 > ul.sub-menu > li > a {
        display: block;
        position: relative;
        padding: 7px 3px 7px 10px;
        border-radius: 9px;
        font-size: 14px;
        line-height: 1.65;
        white-space: normal;
        color: #2b3a52;
        transition: background-color .16s ease, color .16s ease;
    }

    /* A dot that fills on hover. Small, but it is what makes the list feel answerable
       rather than printed. */
    .elementor-location-header.elementor-location-header.elementor-location-header .elementor-nav-menu li.menu-item-2496 > ul.sub-menu > li > a::before {
        content: "";
        position: absolute;
        top: 50%;
        right: 8px;
        width: 6px;
        height: 6px;
        margin-top: -3px;
        border-radius: 50%;
        background: rgba(69, 123, 255, .28);
        transition: background-color .16s ease, transform .16s ease;
    }

    .elementor-location-header .elementor-nav-menu li.menu-item-2496 > ul.sub-menu > li > a:hover {
        background: rgba(69, 123, 255, .10);
        color: #14284d;
    }

    .elementor-location-header.elementor-location-header.elementor-location-header .elementor-nav-menu li.menu-item-2496 > ul.sub-menu > li > a:hover::before {
        background: #457BFF;
        transform: scale(1.35);
    }

    /* ---- continent headings ---- */

    .elementor-location-header .elementor-nav-menu li.menu-item-2496 > ul.sub-menu > li.op-mega-heading {
        break-before: avoid;
        margin: 16px 0 5px;
    }

    .elementor-location-header .elementor-nav-menu li.menu-item-2496 > ul.sub-menu > li.op-mega-heading:first-child {
        margin-top: 0;
    }

    .elementor-location-header .elementor-nav-menu li.menu-item-2496 > ul.sub-menu > li.op-mega-heading > a {
        pointer-events: none;
        cursor: default;
        padding: 4px 3px 6px 10px;
        font-size: 12.5px;
        font-weight: 800;
        color: #457BFF;
        border-bottom: 1px solid rgba(69, 123, 255, .18);
        border-radius: 0;
    }

    /* A short bar where the dot would be, so a heading reads as a heading. */
    .elementor-location-header.elementor-location-header.elementor-location-header .elementor-nav-menu li.menu-item-2496 > ul.sub-menu > li.op-mega-heading > a::before {
        width: 3px;
        height: 13px;
        margin-top: -7px;
        right: 2px;
        border-radius: 2px;
        background: #457BFF;
    }

    .elementor-location-header .elementor-nav-menu li.menu-item-2496 > ul.sub-menu > li.op-mega-heading > a:hover {
        background: transparent;
    }

    /* ---- the four house products ---- */

    /* Iran and Turkey sat indistinguishable among thirty-eight foreign countries. */
    .elementor-location-header .elementor-nav-menu li.menu-item-2496 > ul.sub-menu > li.menu-item-2508 > a,
    .elementor-location-header .elementor-nav-menu li.menu-item-2496 > ul.sub-menu > li.menu-item-4442 > a,
    .elementor-location-header .elementor-nav-menu li.menu-item-2496 > ul.sub-menu > li.menu-item-2507 > a,
    .elementor-location-header .elementor-nav-menu li.menu-item-2496 > ul.sub-menu > li.menu-item-2506 > a {
        background: rgba(69, 123, 255, .07);
        font-weight: 700;
        margin-bottom: 3px;
    }

    /* Narrower desktops cannot carry four columns without country names wrapping. */
    @media (max-width: 1320px) {
        .elementor-location-header .elementor-nav-menu li.menu-item-2496 > ul.sub-menu {
            column-count: 3;
        }
    }
}

/* ---- below 1025px ----------------------------------------------------------------- */

/* The drawer renders this as a nested list, which is right on a phone. Only the heading
   needs to stop looking like a tappable row. */
@media (max-width: 1024px) {
    .menu-item-2496 .op-mega-heading > a {
        pointer-events: none;
        font-weight: 800;
        opacity: .65;
    }
}

/* op-flags */
/* Each country's flag, from files in this plugin's own folder.
   The flag is a flex item rather than an absolutely positioned mark: the links fill
   the column, so anything pinned to an edge would sit far from a short name and
   close to a long one. As an item it stays beside the word whatever its length. */

@media all {

    .elementor-location-header .elementor-nav-menu li.menu-item-2496 > ul.sub-menu > li > a {
        display: flex !important;
        align-items: center;
        gap: 9px;
        /* Reversed so the first child - the flag - falls to the left of the text.
           In a right-to-left row the first item is otherwise the rightmost. */
        padding: 7px 3px 7px 10px;
    }

    /* No longer absolute, so it takes part in the row instead of hovering over it.
       flex: none stops a wide name squeezing the flag out of shape. */
    .elementor-location-header.elementor-location-header.elementor-location-header .elementor-nav-menu li.menu-item-2496 > ul.sub-menu > li > a::before {
        content: "";
        display: inline-block !important;
        position: static;
        flex: none;
        width: 20px;
        height: 14px;
        margin: 0;
        border-radius: 2px;
        background-color: transparent;
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
        box-shadow: 0 0 0 1px rgba(15, 30, 60, .12);
        transform: none;
    }

    /* A picture, not an indicator - it should not swell when hovered. */
    .elementor-location-header.elementor-location-header.elementor-location-header .elementor-nav-menu li.menu-item-2496 > ul.sub-menu > li > a:hover::before {
        transform: none;
    }

    /* Headings take the house-item treatment and keep a bar rather than a flag,
       on the same side as the flags so the column has one left margin, not two. */
    .elementor-location-header .elementor-nav-menu li.menu-item-2496 > ul.sub-menu > li.op-mega-heading > a {
        background: rgba(69, 123, 255, .07);
        color: #14284d;
        font-size: 14px;
        font-weight: 700;
        border-bottom: 0;
        border-radius: 9px;
        opacity: 1;
    }

    .elementor-location-header.elementor-location-header.elementor-location-header .elementor-nav-menu li.menu-item-2496 > ul.sub-menu > li.op-mega-heading > a::before {
        width: 4px;
        height: 15px;
        border-radius: 2px;
        background-color: #457BFF;
        background-image: none;
        box-shadow: none;
    }

    .elementor-location-header.elementor-location-header.elementor-location-header .elementor-nav-menu li.menu-item-2496 > ul.sub-menu > li.menu-item-2508 > a::before { background-image: url(/wp-content/plugins/op-mega-menu/flags/ir.svg); }
    .elementor-location-header.elementor-location-header.elementor-location-header .elementor-nav-menu li.menu-item-2496 > ul.sub-menu > li.menu-item-4442 > a::before { background-image: url(/wp-content/plugins/op-mega-menu/flags/ir.svg); }
    .elementor-location-header.elementor-location-header.elementor-location-header .elementor-nav-menu li.menu-item-2496 > ul.sub-menu > li.menu-item-2507 > a::before { background-image: url(/wp-content/plugins/op-mega-menu/flags/ir.svg); }
    .elementor-location-header.elementor-location-header.elementor-location-header .elementor-nav-menu li.menu-item-2496 > ul.sub-menu > li.menu-item-2506 > a::before { background-image: url(/wp-content/plugins/op-mega-menu/flags/tr.svg); }
    .elementor-location-header.elementor-location-header.elementor-location-header .elementor-nav-menu li.menu-item-2496 > ul.sub-menu > li.menu-item-5445 > a::before { background-image: url(/wp-content/plugins/op-mega-menu/flags/de.svg); }
    .elementor-location-header.elementor-location-header.elementor-location-header .elementor-nav-menu li.menu-item-2496 > ul.sub-menu > li.menu-item-5446 > a::before { background-image: url(/wp-content/plugins/op-mega-menu/flags/es.svg); }
    .elementor-location-header.elementor-location-header.elementor-location-header .elementor-nav-menu li.menu-item-2496 > ul.sub-menu > li.menu-item-5447 > a::before { background-image: url(/wp-content/plugins/op-mega-menu/flags/gb.svg); }
    .elementor-location-header.elementor-location-header.elementor-location-header .elementor-nav-menu li.menu-item-2496 > ul.sub-menu > li.menu-item-5448 > a::before { background-image: url(/wp-content/plugins/op-mega-menu/flags/fr.svg); }
    .elementor-location-header.elementor-location-header.elementor-location-header .elementor-nav-menu li.menu-item-2496 > ul.sub-menu > li.menu-item-5449 > a::before { background-image: url(/wp-content/plugins/op-mega-menu/flags/it.svg); }
    .elementor-location-header.elementor-location-header.elementor-location-header .elementor-nav-menu li.menu-item-2496 > ul.sub-menu > li.menu-item-5450 > a::before { background-image: url(/wp-content/plugins/op-mega-menu/flags/pl.svg); }
    .elementor-location-header.elementor-location-header.elementor-location-header .elementor-nav-menu li.menu-item-2496 > ul.sub-menu > li.menu-item-5451 > a::before { background-image: url(/wp-content/plugins/op-mega-menu/flags/cz.svg); }
    .elementor-location-header.elementor-location-header.elementor-location-header .elementor-nav-menu li.menu-item-2496 > ul.sub-menu > li.menu-item-5452 > a::before { background-image: url(/wp-content/plugins/op-mega-menu/flags/ro.svg); }
    .elementor-location-header.elementor-location-header.elementor-location-header .elementor-nav-menu li.menu-item-2496 > ul.sub-menu > li.menu-item-5453 > a::before { background-image: url(/wp-content/plugins/op-mega-menu/flags/at.svg); }
    .elementor-location-header.elementor-location-header.elementor-location-header .elementor-nav-menu li.menu-item-2496 > ul.sub-menu > li.menu-item-5454 > a::before { background-image: url(/wp-content/plugins/op-mega-menu/flags/ch.svg); }
    .elementor-location-header.elementor-location-header.elementor-location-header .elementor-nav-menu li.menu-item-2496 > ul.sub-menu > li.menu-item-5455 > a::before { background-image: url(/wp-content/plugins/op-mega-menu/flags/ie.svg); }
    .elementor-location-header.elementor-location-header.elementor-location-header .elementor-nav-menu li.menu-item-2496 > ul.sub-menu > li.menu-item-5456 > a::before { background-image: url(/wp-content/plugins/op-mega-menu/flags/se.svg); }
    .elementor-location-header.elementor-location-header.elementor-location-header .elementor-nav-menu li.menu-item-2496 > ul.sub-menu > li.menu-item-5457 > a::before { background-image: url(/wp-content/plugins/op-mega-menu/flags/dk.svg); }
    .elementor-location-header.elementor-location-header.elementor-location-header .elementor-nav-menu li.menu-item-2496 > ul.sub-menu > li.menu-item-5458 > a::before { background-image: url(/wp-content/plugins/op-mega-menu/flags/fi.svg); }
    .elementor-location-header.elementor-location-header.elementor-location-header .elementor-nav-menu li.menu-item-2496 > ul.sub-menu > li.menu-item-5459 > a::before { background-image: url(/wp-content/plugins/op-mega-menu/flags/gr.svg); }
    .elementor-location-header.elementor-location-header.elementor-location-header .elementor-nav-menu li.menu-item-2496 > ul.sub-menu > li.menu-item-5460 > a::before { background-image: url(/wp-content/plugins/op-mega-menu/flags/pt.svg); }
    .elementor-location-header.elementor-location-header.elementor-location-header .elementor-nav-menu li.menu-item-2496 > ul.sub-menu > li.menu-item-5461 > a::before { background-image: url(/wp-content/plugins/op-mega-menu/flags/be.svg); }
    .elementor-location-header.elementor-location-header.elementor-location-header .elementor-nav-menu li.menu-item-2496 > ul.sub-menu > li.menu-item-5462 > a::before { background-image: url(/wp-content/plugins/op-mega-menu/flags/lt.svg); }
    .elementor-location-header.elementor-location-header.elementor-location-header .elementor-nav-menu li.menu-item-2496 > ul.sub-menu > li.menu-item-5463 > a::before { background-image: url(/wp-content/plugins/op-mega-menu/flags/ua.svg); }
    .elementor-location-header.elementor-location-header.elementor-location-header .elementor-nav-menu li.menu-item-2496 > ul.sub-menu > li.menu-item-5464 > a::before { background-image: url(/wp-content/plugins/op-mega-menu/flags/al.svg); }
    .elementor-location-header.elementor-location-header.elementor-location-header .elementor-nav-menu li.menu-item-2496 > ul.sub-menu > li.menu-item-5465 > a::before { background-image: url(/wp-content/plugins/op-mega-menu/flags/cy.svg); }
    .elementor-location-header.elementor-location-header.elementor-location-header .elementor-nav-menu li.menu-item-2496 > ul.sub-menu > li.menu-item-5467 > a::before { background-image: url(/wp-content/plugins/op-mega-menu/flags/us.svg); }
    .elementor-location-header.elementor-location-header.elementor-location-header .elementor-nav-menu li.menu-item-2496 > ul.sub-menu > li.menu-item-5468 > a::before { background-image: url(/wp-content/plugins/op-mega-menu/flags/ca.svg); }
    .elementor-location-header.elementor-location-header.elementor-location-header .elementor-nav-menu li.menu-item-2496 > ul.sub-menu > li.menu-item-5469 > a::before { background-image: url(/wp-content/plugins/op-mega-menu/flags/mx.svg); }
    .elementor-location-header.elementor-location-header.elementor-location-header .elementor-nav-menu li.menu-item-2496 > ul.sub-menu > li.menu-item-5470 > a::before { background-image: url(/wp-content/plugins/op-mega-menu/flags/pr.svg); }
    .elementor-location-header.elementor-location-header.elementor-location-header .elementor-nav-menu li.menu-item-2496 > ul.sub-menu > li.menu-item-5472 > a::before { background-image: url(/wp-content/plugins/op-mega-menu/flags/br.svg); }
    .elementor-location-header.elementor-location-header.elementor-location-header .elementor-nav-menu li.menu-item-2496 > ul.sub-menu > li.menu-item-5473 > a::before { background-image: url(/wp-content/plugins/op-mega-menu/flags/co.svg); }
    .elementor-location-header.elementor-location-header.elementor-location-header .elementor-nav-menu li.menu-item-2496 > ul.sub-menu > li.menu-item-5474 > a::before { background-image: url(/wp-content/plugins/op-mega-menu/flags/ec.svg); }
    .elementor-location-header.elementor-location-header.elementor-location-header .elementor-nav-menu li.menu-item-2496 > ul.sub-menu > li.menu-item-5475 > a::before { background-image: url(/wp-content/plugins/op-mega-menu/flags/bo.svg); }
    .elementor-location-header.elementor-location-header.elementor-location-header .elementor-nav-menu li.menu-item-2496 > ul.sub-menu > li.menu-item-5477 > a::before { background-image: url(/wp-content/plugins/op-mega-menu/flags/jp.svg); }
    .elementor-location-header.elementor-location-header.elementor-location-header .elementor-nav-menu li.menu-item-2496 > ul.sub-menu > li.menu-item-5478 > a::before { background-image: url(/wp-content/plugins/op-mega-menu/flags/au.svg); }
    .elementor-location-header.elementor-location-header.elementor-location-header .elementor-nav-menu li.menu-item-2496 > ul.sub-menu > li.menu-item-5479 > a::before { background-image: url(/wp-content/plugins/op-mega-menu/flags/my.svg); }
    .elementor-location-header.elementor-location-header.elementor-location-header .elementor-nav-menu li.menu-item-2496 > ul.sub-menu > li.menu-item-5480 > a::before { background-image: url(/wp-content/plugins/op-mega-menu/flags/id.svg); }
    .elementor-location-header.elementor-location-header.elementor-location-header .elementor-nav-menu li.menu-item-2496 > ul.sub-menu > li.menu-item-5481 > a::before { background-image: url(/wp-content/plugins/op-mega-menu/flags/tw.svg); }
    .elementor-location-header.elementor-location-header.elementor-location-header .elementor-nav-menu li.menu-item-2496 > ul.sub-menu > li.menu-item-5482 > a::before { background-image: url(/wp-content/plugins/op-mega-menu/flags/th.svg); }
    .elementor-location-header.elementor-location-header.elementor-location-header .elementor-nav-menu li.menu-item-2496 > ul.sub-menu > li.menu-item-5484 > a::before { background-image: url(/wp-content/plugins/op-mega-menu/flags/za.svg); }
    .elementor-location-header.elementor-location-header.elementor-location-header .elementor-nav-menu li.menu-item-2496 > ul.sub-menu > li.menu-item-5485 > a::before { background-image: url(/wp-content/plugins/op-mega-menu/flags/ma.svg); }
    .elementor-location-header.elementor-location-header.elementor-location-header .elementor-nav-menu li.menu-item-2496 > ul.sub-menu > li.menu-item-5486 > a::before { background-image: url(/wp-content/plugins/op-mega-menu/flags/ng.svg); }
}


/* op-flag-img */
.elementor-location-header .elementor-nav-menu li.menu-item-2496 img.op-flag {
    display: inline-block;
    width: 20px;
    height: 14px;
    margin-inline-end: 8px;
    vertical-align: -2px;
    border-radius: 2px;
    box-shadow: 0 0 0 1px rgba(15, 30, 60, .12);
}

/* op-padding-override */
/* Elementor writes `a.elementor-sub-item { padding:10px 14px !important }` for every
   submenu link. That is five classes and an !important, so every padding rule above was
   correct and inert. Repeating the header class outweighs it; the !important answers its
   own. Scoped to menu-item-2496 so the other dropdowns are untouched. */
.elementor-location-header.elementor-location-header.elementor-location-header .elementor-nav-menu li.menu-item-2496 > ul.sub-menu > li > a,
.elementor-location-header.elementor-location-header.elementor-location-header .elementor-nav-menu li.menu-item-2496 > ul.sub-menu > li > a.elementor-sub-item {
    padding: 7px 3px 7px 10px !important;
}

.elementor-location-header.elementor-location-header.elementor-location-header .elementor-nav-menu li.menu-item-2496 > ul.sub-menu > li.op-mega-heading > a,
.elementor-location-header.elementor-location-header.elementor-location-header .elementor-nav-menu li.menu-item-2496 > ul.sub-menu > li.op-mega-heading > a.elementor-sub-item {
    padding: 4px 3px 6px 10px !important;
}

/* op-panel-padding */
/* The panel itself carried 32px on both sides. The right side is where the first column
   of country names begins, so that was the larger half of the gap the owner was seeing -
   the per-item 3px only ever removed 7 of roughly 42px. The left stays 32px: it is the
   outer edge of the last column and nothing crowds it. */
.elementor-location-header.elementor-location-header.elementor-location-header .elementor-nav-menu li.menu-item-2496 > ul.sub-menu {
    padding: 28px 12px 24px 32px !important;
}