.elementor-1162 .elementor-element.elementor-element-a026a9d{--display:flex;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;}/* Start custom CSS for shortcode, class: .elementor-element-eea3e05 *//* --- 1. The Main Dropdown Box --- */
.wmc-currency-wrapper .wmc-sub-currency {
    background: #ffffff !important;
    border-radius: 12px !important; /* Modern rounded corners */
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.08) !important; /* Soft, premium drop shadow */
    padding: 8px 0 !important; /* Padding at the very top and bottom of the menu */
    border: 1px solid rgba(0, 0, 0, 0.04) !important;
}

/* --- 2. The Dividers Between Items --- */
.wmc-currency-wrapper .wmc-currency {
    border-bottom: 1px solid #f0f0f0; /* Crisp, light grey divider */
    transition: background-color 0.3s ease;
}

/* Remove the divider from the very last item so it looks clean */
.wmc-currency-wrapper .wmc-currency:last-child {
    border-bottom: none;
}

/* --- 3. Padding & Layout for Each Item --- */
.wmc-currency-wrapper .wmc-currency a {
    display: flex !important;
    align-items: center !important;
    padding: 12px 24px !important; /* Generous padding for a modern, clickable feel */
    line-height: 1.5 !important; /* Overrides the cramped 16px inline style */
    color: #444444 !important; /* Softer modern text color */
    font-size: 14px;
    font-weight: 500;
    text-decoration: none;
    transition: color 0.3s ease;
}

/* Fix spacing between the flag and the text */
.wmc-currency-wrapper .wmc-sub-currency-name {
    margin: 0 8px !important; 
}

/* --- 4. The Premium Hover Effect --- */
.wmc-currency-wrapper .wmc-currency:hover {
    /* A very faint, 5% opacity version of your #C88544 brand color */
    background-color: rgba(200, 133, 68, 0.05) !important; 
}

.wmc-currency-wrapper .wmc-currency:hover a {
    color: #C88544 !important; /* Text turns to your brand color on hover */
}

/* Fade out the symbol slightly to create visual hierarchy */
.wmc-currency-wrapper .wmc-sub-currency-symbol {
    opacity: 0.6;
    font-size: 0.9em;
}/* End custom CSS */
/* Start custom CSS for wp-widget-polylang, class: .elementor-element-222f2af *//* --- 1. Hide the marker (bullet point) and clean up the list --- */
.elementor-1162 .elementor-element.elementor-element-222f2af ul {
    list-style-type: none !important;
    margin: 0 !important;
    padding: 0 !important;
    display: flex;
    align-items: center;
}

/* --- 2. Modern Layout & Spacing --- */
.elementor-1162 .elementor-element.elementor-element-222f2af .lang-item {
    position: relative;
    display: inline-flex;
    align-items: center;
}

/* Smooth out the flag edges and force the larger size */
.elementor-1162 .elementor-element.elementor-element-222f2af .lang-item img {
    width: 24px !important;
    height: 15px !important;
    object-fit: cover; /* Ensures the flag doesn't look stretched or warped */
    border-radius: 2px; 
}

.elementor-1162 .elementor-element.elementor-element-222f2af .lang-item a {
    display: inline-flex;
    align-items: center;
    color: #444444 !important; /* Matches the currency text */
    font-size: 16px;
    font-weight: 500;
    text-decoration: none;
    transition: color 0.3s ease;
    gap: 8px; /* Perfect spacing between flag and text */
}

/* Remove the inline margin injected by the plugin to let flexbox handle it */
.elementor-1162 .elementor-element.elementor-element-222f2af .lang-item a span {
    margin: 0 !important; 
}

/* Smooth out the flag edges slightly */
.elementor-1162 .elementor-element.elementor-element-222f2af .lang-item img {
    border-radius: 2px;
}

/* --- 3. Premium Hover Effect --- */
.elementor-1162 .elementor-element.elementor-element-222f2af .lang-item a:hover {
    color: #ffffff !important; /* Your signature brand color */
}

/* --- 4. The Vertical Divider --- */
.elementor-1162 .elementor-element.elementor-element-222f2af .lang-item::after {
    content: '';
    position: absolute;
    
    /* Since your site is Arabic (RTL), the next item is to the left */
    left: -10px; 
    
    /* Vertically center the divider */
    top: 50%;
    transform: translateY(-50%);
    
    /* Divider styling */
    height: 20px; 
    width: 1px;
    background-color: #e0e0e0; /* Clean, subtle grey line */
}

/* --- Target all currency flags (both the main one and the dropdown ones) --- */
.wmc-currency-wrapper i.vi-flag-64 {
   
    /* 5. Add your requested rounded corners */
    border-radius: 3px !important;
    
    /* Keep it flowing nicely with the text */
    display: inline-block !important;
}/* End custom CSS */