/* The outerest container of the Widget */
.elementor-widget-semwit_product_ranking {
    border: 1px solid #E3E3E3;
    padding: 20px;
    border-radius: 5px; /* Optional, for slightly rounded corners */
    background-color: #ffffff; /* Optional, to match the post wrapper */
    width: 100%; /* Ensures the container takes up the full width of its parent */
    box-sizing: border-box; /* Ensures padding and border are included in the element's width and height */
    display: block; /* Ensures the container behaves as a block element, which is naturally flexible in height */
	scroll-behavior: smooth;
}

/* Flex container holding all columns */
.semwit_product_rating_default {
    display: flex;
    flex-direction: row;
    align-items: baseline; /* Align items along the baseline */
    padding: 15px;
    gap: 10px;
}

.semwit_notification_box {
    margin-bottom: 20px;
    padding: 20px;
    border: 1px solid #e3e3e3;
    background-color: #F0FFDE; /* #f5f5f5 Light grey background */
    border-radius: 5px; /* Slightly rounded corners */
    font-size: 14px;
    line-height: 1.5;
    color: #333; /* Text color */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Subtle shadow for a more defined look */
    display: flex;
    align-items: center;
}

.semwit_notification_box i {
    margin-right: 10px;
    font-size: 18px;
    color: #0073aa; /* Icon color (matches the theme's primary color) */
}

.semwit_notification_box div {
    flex-grow: 1;
}

.semwit_tip_box {
    margin-bottom: 20px;
    padding: 15px;
    border: 1px solid #E3E3E3;
    background-color: #f5f5f5; /* Adjust background color as needed */
    border-radius: 5px;
    font-size: 14px;
    line-height: 1.5;
}

/* Column 1: Rank and Category */
.semwit_column_rank_category {
    display: flex;
    flex-direction: column; /* Stack items vertically */
    align-items: flex-start; /* Align items to the start of the column */
    flex: 0 1 auto; /* Adjust the flex-basis as needed */
}

.semwit_rank_number {
    font-size: 1.2em;
    font-weight: bold;
}

.semwit_category_wrapper {
    font-style: italic;
    margin-top: 5px; /* Add space between rank number and category */
}

/* Column 2: Main Content */
.semwit_column_main {
    flex-grow: 1; /* Allow to grow as needed */
    max-width: 60%; /* Adjust the max-width as needed */
}

/* Column 3: Image, CTA Button, Price, and Webshop Name */
.semwit_column_image_price {
    display: flex;
    flex-direction: column;
    align-items: center; /* Center items horizontally */
    justify-content: center; /* Center items vertically */
    flex: 0 1 30%; /* Adjust the flex-basis as needed */
}

.elementor-control-popover-toggle {
    cursor: pointer;
}

.elementor-control-popover-content {
    display: none;
}

.elementor-control-popover-toggle.active + .elementor-control-popover-content {
    display: block;
}

/* No specific CSS for .semwit_star_rating and .semwit_custom_text_under_title 
   as they are now inline elements (span) and should flow naturally next to each other. 
*/

/* Wrapper for the entire toplist section */
.semwit_toplist_wrapper {
    margin-bottom: 20px;
    padding: 10px;
	border: 1px solid #e3e3e3;
    border-radius: 5px;
    background-color: #f5f5f5; /* Default background */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Subtle shadow for a more defined look */
}

/* Heading for the toplist */
.semwit_toplist_wrapper h2 {
    font-size: 1.5em;
    margin-bottom: 10px;
    text-align: left;
}

/* Styles for each toplist item */
.semwit_toplist {
    list-style: none;
    padding-left: 0;
}

.semwit_toplist_item {
    margin-bottom: 5px;
}

.semwit_toplist_item a {
    text-decoration: none;
    font-weight: bold;
    color: inherit; /* Default to inherit the color from color settings */
}

/* Style 1: Schema Styled Toplist */
.semwit_style_1 .semwit_toplist_item {
    display: flex;
    align-items: center;
    padding: 8px 0;
    font-size: 18px;
    line-height: 1.4;
    border-bottom: none;
}

/* Underline the product names only */
.semwit_style_1 .semwit_toplist_item span[itemprop="name"] {
    text-decoration: underline;
    text-decoration-color: #333; /* Use a subtle color for the underline */
}

.semwit_style_1 .semwit_toplist_item a {
    color: #333;
    text-decoration: none;
    flex-grow: 1;
}

.semwit_style_1 .semwit_toplist_item:hover a {
    text-decoration: underline;
    color: #0073aa; /* Change color on hover */
}

.semwit_style_1 .semwit_toplist_item meta[itemprop="position"] {
    display: none;
}