.style-0 { font-size: 19px; border: 2px solid rgb(221, 107, 32); padding: 10px; background-color: rgb(255, 255, 255); max-width: 950px; margin: 20px auto; font-family: Inter, sans-serif; color: rgb(51, 51, 51); line-height: 28.5px; overflow: hidden; text-align: left; }
.style-1 { position: relative; text-align: center; float: right; margin: 0px 0px 10px 10px; }
.style-3 { border-width: 0px; border-radius: 3px; display: block; margin: 0px auto; height: auto; max-width: 100%; }
.style-5 { line-height: 44.46px; font-weight: 700; font-size: 34.2px; font-family: Inter, sans-serif; color: rgb(33, 33, 33); margin: 0px; padding: 0px; }
.style-12 { clear: both; font-size: 17.1px; text-align: center; margin-left: -8px; margin-right: -8px; align-items: center; display: flex; flex-wrap: wrap; justify-content: space-between; }
.style-13, .style-20 { border-radius: 3px; padding: 10px 5px; border-style: solid; border-width: 2px; display: block; margin: 5px 8px; text-align: center; cursor: pointer; text-decoration: none; font-weight: 400; flex: 1 1 0%; }
.style-13 { color: #ffffff; background-color: #000000; border-color: #000000; }
.style-20 { color: #000000; background-color: #ffffff; border-color: #000000; }
.style-36, .style-75 { border-width: 0; display: flex; margin: 5px 0px; padding: 5px; }
.style-37, .style-43, .style-49, .style-55, .style-76, .style-89 { display: flex; flex: 1 1 0%; flex-direction: column; text-align: center; }
.style-38, .style-44, .style-50, .style-56, .style-77, .style-90 { opacity: 0.7; text-transform: uppercase; }
.style-42, .style-48, .style-54, .style-60 { font-size: 15.2px; }
.style-95, .style-145 { margin-bottom: 11.4px; font-size: 22.8px; margin-top: 27.36px; font-family: Inter, sans-serif; color: rgb(33, 33, 33); line-height: 29.64px; align-items: center; display: flex; text-transform: uppercase; font-weight: 600; }
.style-99, .style-148 { margin: 0px; padding: 0px; margin-block: 0px; padding-inline-start: 0px; list-style: outside none disc; }
.style-100 { list-style-type: disc; margin: 0px 0px 0px 32px; padding: 0px; font-family: Inter, sans-serif; font-size: 19px; line-height: 28.5px; list-style-position: outside; }
.style-149 { list-style-type: decimal; margin: 0px 0px 0px 32px; padding: 0px; font-family: Inter, sans-serif; font-size: 19px; line-height: 28.5px; list-style-position: outside; }
.style-150 { margin-bottom: 5px; font-size: 19px; }
.style-152 { font-weight: 700; }

/* --- NEW: Styles for Pinterest Icon (Goal 2) --- */
.style-20 {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px; /* Adds space between icon and text */
}
.style-20 svg {
    width: 1em;
    height: 1em;
    fill: currentColor; /* Makes icon match text color */
    /* Fixes vertical alignment */
    position: relative;
    top: -1px;
}

/* --- NEW: Styles for Ingredient Checkboxes (Goal 1) --- */
.style-100 {
    list-style-type: none !important; /* Hide original disc bullet */
    cursor: pointer;
    position: relative;
    padding-left: 30px; /* Make space for the fake checkbox */
    -webkit-user-select: none; /* Prevents text selection on click */
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    transition: opacity 0.2s ease, text-decoration 0.2s ease;
    margin-bottom: 5px; /* Add a little space */
}

/* The fake checkbox box */
.style-100::before {
    content: '';
    display: block;
    width: 16px;
    height: 16px;
    /* Use the plugin's border color variable, with a fallback */
    border: 2px solid var(--rcs-border-color, #ccc);
    background: #ffffff;
    position: absolute;
    left: 0;
    top: 6px; /* Adjust vertical alignment */
    border-radius: 3px;
    transition: all 0.2s ease;
}

/* The styles when "checked" */
.style-100.rcs-ingredient-checked {
    text-decoration: line-through;
    opacity: 0.6;
}

/* The checkmark (using CSS borders for a sharp look) */
.style-100.rcs-ingredient-checked::after {
    content: '';
    display: block;
    position: absolute;
    left: 5px;
    top: 8px;
    width: 5px;
    height: 10px;
    /* Use the plugin's primary button color, with a fallback */
    border: solid var(--rcs-primary-btn-bg, #000000);
    border-width: 0 3px 3px 0;
    transform: rotate(45deg);
}

/* Optional: Change box border on check */
.style-100.rcs-ingredient-checked::before {
    border-color: #aaa;
}