/*
Theme Name: Vela
Description: This is a child theme for Flatsome Theme
Author: UX Themes
Template: flatsome
Version: 3.0
*/

/*************** ADD CUSTOM CSS HERE.   ***************/

body #opc-product-selection .button a {
	color: white;
}

/* Make the in-text/body links clearer than Flatsome defaults: */
a:not(.button):not(.nav-top-link):not(.header-cart-link) {
    /* light Google blue */
    color: #2a5db0;
    text-decoration: underline;
}
a:visited:not(.button):not(.nav-top-link):not(.header-cart-link) {
    color: #0a3578;
    text-decoration: underline;
}
a:hover:not(.button):not(.nav-top-link):not(.header-cart-link) {
    color: #0a3578;
    text-decoration: underline;
}

.leafside-lt-green {
    color: #90B35D;
}
.leafside-dk-green {
    color: #5B8F57;
}

ul#menu-footer li a {
    color: #f1f1f1;
}

.header-row td:first-child {
    font-weight: bold;
    font-size: 20px;
}

/* Zoho chat button placement; move up so no obscuring bottom-right ATC etc */
div.zsiq_floatmain.zsiq_theme1 {
  margin-bottom: 10em;
}


/* Despite being set to "none" in the WooCommerce Settings to hide it,
   a bug in the WOOF search form (plugin) makes this large RESET
   button re-appear after user clicks a radio button. */
.woof_reset_search_form {
    display: none;
    /* Or if it does show up, at least let's make it less ugly by being
    aligned with the other selectors. */
    float: left !important;
}

/* On the main Shop page, setting below to not display can get rid of
   the big empty space after the custome header and before the
   products listing. But the div is also used for WOOF mobile UI, it's
   where the filter link appears. */
.shop-page-title {
    /* display: none; */
}

.testimonial-text {
  margin-top: 1.5em;
}

.testimonial-meta {
  line-height: 1.2;
}

/* Menu items: increase space between them */
.nav > li {margin: 0 10px;}

/* Breadcrumbs can be confusing since they include category; remove from sight  */
.woocommerce-breadcrumb.breadcrumbs {display: none;}

/* No breadcrumbs? Then close the vertical gap so that product info is
   level with its image */
.product-info {padding-top: 0;}

/* Below class is misnamed, currently in-use for our brand tagline */
.html_top_right_text {letter-spacing: 0.3px}

/* Change the default Sale! bubble color to a familiar green (e.g. seen on bundles) */
.secondary.on-sale {
    background-color: #90B35D;
}

/* Replace Flatsome's default fancy-underline img */
.fancy-underline {position:relative}
.fancy-underline:after {content:"";color:green;position:absolute;left:0;border-radius:999px;right:0;top:100%;height:9px;image-rendering:-webkit-optimize-contrast;background:url("img/orange-underline.png") 50% top no-repeat;background-size:100% 9px}

/* An alternative/fix to Flatsome's broken Read More that actually
   works, Apr2025. To use the below styles, a corresponding (and
   fairly small) HTML template is needed. */
.quick-view {
    background: rgba(255,255,255,0.8) !important;
    color: #333 !important; /* Darker text for contrast */
    border: 1px solid rgba(0,0,0,0.1) !important;
}
.product-quick-view-container .cart {
display:none;
}
/* The Read More button functionality */
.panel-wrapper-read-more {
position: relative;
}
.btn-read-more {
font-weight: 800;
border-radius: 0.5em;
border: 0px solid black;
left: 0%;
text-decoration: none !important;
width: 80%;
background-color: #d26e4b;
 color: #ffffff !important;
padding: 0.6em 1.2em;
}
.show-read-more,
.hide-read-more {
position: absolute;
bottom: 0em;
z-index: 1;
text-align: center;
}
.hide-read-more {
display: none;
}
.show-read-more:target {
display: none;
}
.show-read-more:target ~ .hide-read-more {
display: block;
}
.show-read-more:target ~ .panel-read-more {
height: auto;
margin-bottom: 35px;
border: 0px solid #0000001f;
border-top: none;
padding: 5px;
visibility: unset;
}
.show-read-more:target ~ .fade-read-more {
margin-top: -80px;
}
.panel-read-more {
position: relative;
height: 0px;
overflow: auto;
transition-property: height;
transition-duration: 1.5s;
margin-bottom: 20px;
padding: 5px;
visibility: hidden;
}
.fade-read-more {
height: 100px;
margin-top: -100px;
}
/* end of Read More button */



/* _________________________Checkout pages___________________________ */
/* Errors in Checkout: use red/purple, complementary to LeafSide light green */
.woocommerce_error {
    color: #a45579;
}

div.cart-header div.logo {
  margin-bottom: 1.5em;
}

/* Breadcrumbs and progress indication; distractions not worth showing */
nav.checkout-breadcrumbs {
  display: none !important;
}
div.message-container:has(a.showlogin) {
  margin: 1.5em 0 0.5em 0;
}

/* Old CSS rules around checkout page; commented out 1/2023. Remove entirely, soon.

div.cart-header.text-left.medium-text-center nav.breadcrumbs.checkout-breadcrumbs.text-left.medium-text-center.lowercase.is-large a {
    pointer-events: none;
    text-decoration: none;
    color: rgb(119, 119, 119);
}
div.cart-header.text-left.medium-text-center nav.breadcrumbs.checkout-breadcrumbs.text-left.medium-text-center.lowercase.is-large a.current {
    font-weight: bold;
}
div.cart-header.text-left.medium-text-center nav.breadcrumbs.checkout-breadcrumbs.text-left.medium-text-center.lowercase.is-large a.no-click {
    color: #ccc;
}
*/

/* _______________________Cart page customization______________________ */
table.shop_table.shop_table_responsive.cart.woocommerce-cart-form__contents tr th {
    border-bottom: 1px solid #ccc;
}
div.continue-shopping {
    display: none !important;
}
.checkout-button, .button.checkout, button#place_order {
    /* LeafSide's friendly green-means-go! */
    background-color: #90B35D !important;
}
ul#box-benefits {
    margin-bottom: 0.5em;
}
ul#box-benefits li {
    list-style: square;
    margin-left: 1em;
    margin-bottom: 0.5em;
}
form.wcsatt-add-cart-to-subscription-form h4.wcsatt-add-cart-to-subscription-intro {
    margin: 1em 0;
}
/* For whitespace around bundle-replaced message on Cart page. */
div.woocommerce-notices-wrapper div.woocommerce-info.message-wrapper {
    margin-bottom: 1em;
}

/* __________________Order/Checkout page customization__________________ */
div.woocommerce-info.angelleye-order-review-page-message {
    /* Make this message pop out clearly */
    color: #5B8F57;
    font-weight: bold;
    margin-bottom: 2em;
}

div.express-provided-address a.ex-show-address-fields {
    font-style: italic;
}

/* Override the weirdness/ugliness that Angelleye puts next to email, phone fields:  */
.angelleye-woocommerce-customer-details-phone, .angelleye-woocommerce-customer-details-email {
    margin-top: 1em;
    padding-left: 0;
}
div.express-provided-address address p.angelleye-woocommerce-customer-details-phone:before, div.express-provided-address address p.angelleye-woocommerce-customer-details-email:before {
    content: none;
}

div.woocommerce-shipping-fields div.shipping_address h3 {
    margin-top: 1.5em;
}

div.woocommerce-additional-fields div.woocommerce-additional-fields__field-wrapper p#order_comments_field.form-row.notes {
    margin-top: 2em;
}

div#order_review.woocommerce-checkout-review-order div#payment.woocommerce-checkout-payment div.form-row.place-order a.button.alt.angelleye_cancel {
    display: none;
}

/* Klaviyo, and SMS-related styles */
p#kl_newsletter_checkbox_field {
    margin-bottom: 1.3em;
}
p#transactional-sms-opt-in-notice {
  font-size: 13px;
  font-style: italic;
  margin-top: -1.5em;
  margin-bottom: 2em;
}
h3#ship-to-different-address {
  margin-top: 2em;
}


/* Mini-cart (navbar dropdown) enhancements */
li.woocommerce-mini-cart-item.mini_cart_item span.quantity {
    display: none;
}
li.woocommerce-mini-cart-item.mini_cart_item a.remove.remove_from_cart_button {
    display: none;
}
li.woocommerce-mini-cart-item.mini_cart_item a {
    font-size: 0.8em;
}

/* Homepage and related tweaks */
.slider-nav-outside .flickity-prev-next-button.previous {
    left: auto;
    right: 103%;
}
.slider-nav-outside .flickity-prev-next-button.next {
    right: auto;
    left: 103%;
}
.flickity-prev-next-button {
    width: 72px;
}

/* Meals listing page */
.box-image img {
    -webkit-transform: none; /* fix Safari clipping of images */
}

/* UFAQ */
div.ufaq-social-links {
    margin: 1.5em 0;
}
ul.rrssb-buttons li:first-child {
    margin-left: 0;
}
div.ufaq-permalink {
    margin-bottom:1.5em;
    margin-left: 0;
}


/*_____________________________Offers page/UI___________________________*/
.featured-table {
  border-color: rgb(127, 167, 115);
  border-width: 1px;
  margin-top: -14px;
}
.featured-table .title {
  background-color: rgb(127, 167, 115);
  border-color: rgb(127, 167, 115);
  color: #fff;
}
div.other-start-options-accordion a.accordion-title {
  padding: 1em;
}

/* Product pages */
div.product-info p.first-payment-date {
    margin-bottom: 0;
}
div.product-info div.product_meta {
    display: none;
}
div.product-info div.social-icons {
    display: none;
}
div.price-wrapper p.price.product-page-price small.wcsatt-sub-options {
    display: none;
}

button#leafside-add-one-product-to-subscription {
  background-color: #5B8F57;
}
/* WC SATT/APWS errantly shows ship-now button on single-product page; fix it: */
div.product-info div.wcsatt-add-to-subscription-wrapper div.wcsatt-add-to-subscription-options button[value="ship_now_reschedule"] {
    display: none;
}
/* On single-product/meals pages, don't show add-to-cart button. */
div.product-main div.quantity.buttons_added, div.product-main button.single_add_to_cart_button.button.alt {
    display: none;
}
/* ...BUT, need an exception when adding a product into subscription w/ Toolbox */
button#toolbox-single-product-add-to-subscription {
    display: block;
}


/* _________________________MnM Product pages_______________________ */

/* As of Aug.2024, MnM still uses table headers texts of Product, Quantity;
   but we found them redundant, so hide 'em: */
.mnm_form.layout_tabular table th {
  display: none;
}

/* Custom-added per-meal-pricing display, Simple MnM first: */
.simple-mnm-per-meal-price {
  display: inline-block;
  margin-left: 20px;
  font-size: 67%;
}
/* MnM Variations display */
div.woocommerce-variation-price {
  text-align: right;
  margin-bottom: 1.5em;
}
/* Variable MnM per-meal-pricing; shown once variation is picked: */
.mnm-variation-per-meal-price {
  display: inline-block;
  margin-left: 5px;
}
/* In subscription-editing UI, don't need usual 0.8em rule (that
   cancels out 120% font-size from Flatsome); this rule restores
   similar size as preceding text: */
div.wc-mnm-edit-container.wc-mnm-edit-container-shop_subscription div.woocommerce-variation-price {
  font-size: 110%;
}

/* Note that exceptions arise to the Single Product page rules above,
   for all Mix-and-Match products.

   First, need to display per-item quantity adjuster:  */
td.product-quantity div.quantity.buttons_added {
  display: inline-block !important;
}
/* Hide Flatsome's redundant plus/minus buttons, use MnM's instead */
.mnm_child_products .button.is-form { display: none; }

h2.woocommerce-loop-category__title {
  margin-top: 1.25em;
  margin-bottom: 0.5em;
  text-align: left;
}

.mnm_form .reset_variations {
  /* Drop the CLEAR link */
  display: none;
}
table.wc-mnm-variations tbody tr th.label {
  /* Override some undesired styles from Nutrition label plugin */
  float: none;
  width: 15%;
  padding-right: 20px;
}

/* Ensure the select-bundle dropdown is prominent */
@keyframes pulse {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.035);
  }
  100% {
    transform: scale(1);
  }
}
/* Highlight selector on vMnM Product pages; view-subscription and edit-subscription */
select#choose-your-leafside-subscription-bundle, select#your-leafside-bundle, table.wc-mnm-variations tbody tr td.value select, a.wcs-switch-link.button.ajax-edit {
  background-color: #90B35D;
  color: white;
  font-size: 100%;
  font-weight: bold;
  animation: pulse 2.5s infinite;
}
table.wc-mnm-variations tbody tr td.value select:hover, select:focus {
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
  transition: box-shadow 0.2s ease-in-out;
}

/* ...AND then MnM ATC button needs visibility: */
button#leafside-mnm-add-to-cart {
    display: inline;
    margin-bottom: 0;
}
.mnm_cart.fixed {
    background-color: #5B8F57;
}
.mnm_cart.fixed .mnm_message_content {
    color: #fff;
}

/* MnM Mobile Styles */
.mnm_form .mnm_counter {
  padding-left: 0.6em;
}
.mnm_form .mnm_reset {
  display: none!important;  /* The Clear Selections link is unneeded */
  /* margin: 0 0 0 5em!important; */
}
.mnm-mobile-container progress.mnm-container-progress[value] {
  accent-color: #5B8F57;
  background-color: #eee;
}
.mnm-mobile-container progress.mnm-container-progress::-webkit-progress-bar {
  background-color: #eee;
}
.mnm-mobile-container progress.mnm-container-progress::-webkit-progress-value {
  background-color: #5B8F57;
}
.mnm-mobile-container progress.mnm-container-progress::-moz-progress-bar {
  background-color: #eee;
}
.mnm-mobile-container progress.mnm-container-progress::-moz-progress-value {
  background-color: #5B8F57;
}
/* Override MnM Mobile Styles: don't display quantity adjustment
   buttons for the mnm product as a whole; we expect that adding
   default of 1 is what almost all users will want. */
.mnm_cart.fixed .mnm_button_wrap:nth-child(2) .quantity {
    display: none;
}
/* Don't show 0.00 price for MnM products w/o per-item pricing */
tr.woocommerce-cart-form__cart-item.cart_item.mnm_table_item.mnm_part_of_static_priced_container td.product-price {
    display: none;
}


/* Nutrition facts label (replaces style block in the plugin php file) */
.nfacts-link {
    text-decoration: underline !important;
}

.wp-nutrition-label {
    border: 2px solid #111;
    font-family: 'Source Sans Pro', sans-serif, arial, helvetica;
    font-size: .9em;
    max-width: 310px;
    padding: .35em;
    line-height: 1em;
    margin: 0;
    background: #fff;
    color: #000;
}

.wp-nutrition-label hr {
    height: 8px;
    background: #111;
    margin: 3px 0;
}

.wp-nutrition-label .heading {
    font-size: 39px;
    font-weight: 900;
    margin: 0;
    line-height: 1em;
    text-justify: auto;
    padding-bottom: 10px;
    border-bottom: 2px solid #111;
}

.wp-nutrition-label div#nfacts-servings-line {
    font-size: 18px;
    padding-top: 10px;
    padding-bottom: 5px;
}

.wp-nutrition-label div#nfacts-wfpb-line {
    font-weight: 900;
    font-size: 1.1em;
    margin-top: 2px;
    margin-bottom: 5px;
}

.wp-nutrition-label .indent {
    margin-left: 1em;
}

.wp-nutrition-label .double-indent {
    margin-left: 2em;
}

.wp-nutrition-label .small {
    font-size: .8em;
    line-height: 1em;
}

.wp-nutrition-label .item_row {
    border-top: solid 1px #111;
    padding: 3px 0;
}

.item_row strong {
    font-size: 15px;
    font-weight: bold;
}

.wp-nutrition-label .amount-per {
    padding: 0 0 8px 0;
    font-weight: bold;
    font-size: 15px;
}

.wp-nutrition-label .daily-value {
    padding: 4px;
    font-weight: bold;
    text-align: right;
    border-top: solid 4px #111;
}

.wp-nutrition-label .f-left {
    float: left;
}

.wp-nutrition-label .f-right {
    float: right;
}

.wp-nutrition-label .noborder {
    border: none;
}

.footnote:before {
    content: "* ";
    margin-left: -9px;
}

.footnote {
    font-size: 0.813em;
    padding: 0 0 0 9px;
}

.wp-nutrition-label .amount {
    font-weight: 700;
    padding: 0;
    line-height: 1em;
}

.cf:before, .cf:after {
    content: " ";
    display: table;
}

.cf:after {
    clear: both;
}

.cf {
    *zoom: 1;
}


/*_____________________________Subscriptions UI___________________________*/

table.shop_table.subscription_details td {
  /* Override Flatsome's default smaller font in tables*/
  color: #555;
  font-size: 100%;
}

/* The default was right alignment, which shows ugly mis-alignments */
.my_account_orders thead tr th:last-of-type, .my_account_orders tr td:last-of-type {
    text-align: left;
}

/* Subscription management UI */
table.shop_table.subscription_details td a.button {
    margin-right: 0;
}

div.woocommerce-message.message-wrapper div.message-container {
    text-align: center;
}

a.button#subscription-action-edit-subscription, a.button#subscription-action-reactivate {
    background-color: #7a9c59; /* dark LS green */
    margin-top: 0.5em;
    margin-bottom: 0.5em;
}
a.button#subscription-action-suspend {
    background-color: khaki;
    color: #777;
}

a#subscription-action-skip_next.button {
    background-color: khaki;
    color: #777;
}
a#subscription-action-ship_now_recalculate.button {
    /* margin-bottom: 0.5em; */
}
a.button#subscription-action-cancel {
    background-color: darkred;
    margin-left: 0em;
    margin-top: 1em;
}

form#change-shipping-date input#pickadate {
    width: 10em;
}
form#change-shipping-date button {
    margin: 0 0 0 1em;
}
table#next-box-meals-list {
    margin-bottom: 3em;
}
div.woocommerce-MyAccount-content section.woocommerce-customer-details {
    margin-top: 2.5em;
}
address {
    font-style: normal; /* otherwise italics everywhere in addy form, which sucks */
}
form#main-form-edit-subscription div.col-2 {
    padding-left: 40px;
}
button#edit-subscription-submit-button {
    background-color: #7a9c59; /* dark LS green */
    font-size: 150%;
    margin-top: 2em;
}

/* ______________MnM Subscription Editing, view UI tweaks______________ */
table#next-box-meals-list tr.mnm_table_container td.product-thumbnail {
  vertical-align: top;
}
table#next-box-meals-list tr.mnm_table_container td.product-name ul.wc-item-meta {
  display: none;
}
table#next-box-meals-list td.product-name {
  color: #777;
  font-size: 100%;
}

/* Below are tweaks on the UI when actually editing an MnM subscription:  */

/* Cut redundant instructional text */
div.wc-mnm-edit-container h3 {
  display: none;
}
/* The h2 below is for text "Choose x meals" */
div.wc-mnm-edit-container h2 {
  text-align: left;
  margin-bottom: 1.5em;
}
/* MnM Variations use h3 for category headers; smaller but that's ok
   because shoppers of MnM Variable/subscription products are likely
   familiar with the meal categories. */
div.wc-mnm-variation__child-category h3.wc-mnm-variation__category-title, div.wc-mnm-edit-container h3.wc-mnm-variation__category-title {
  display: block;
  text-align: center;
}
div.wc-mnm-edit-container div.woocommerce-variation-description p {
  color: #555;
  /* For font-size, line-height: roughly match Flatsome body default and
   cancel out Flatsome td/th font styles */
  font-size: 110%;
  line-height: 1.6;
  text-align: left;
}
.mnm_form.layout_tabular table .woocommerce-loop-product__title {
  /* For font-size, roughly match Flatsome body default */
  font-size: 120%;
}

div.mnm_button_wrap button.single_add_to_cart_button {
  background-color: #90b35d;
}
div.mnm_button_wrap button.wc-mnm-cancel-edit {
  color: #333;
  background-color: #ccc;
}

@media only screen and (max-width: 48em) {
/*************** ADD MOBILE ONLY CSS HERE  ***************/


}