/*
Theme Name: GreenMart Child
Theme URI: https://demo.thembay.com/greenmart/
Author: Thembay
Description: This is a child theme for GreenMart
Version: 1.1
Author URI: https://thembay.com/
Template: greenmart
Text Domain: greenmart-child
*/

/*  [ Add your custom css below ]
- - - - - - - - - - - - - - - - - - - - */

.box-with-shadow {
    border: 1px solid #eaeaea;
    background: #fff;
    -webkit-box-shadow: 0px 7px 19px rgba(153, 153, 153, 0.1);
    -moz-box-shadow: 0px 7px 19px rgba(153, 153, 153, 0.1);
    box-shadow: 0px 7px 19px rgba(153, 153, 153, 0.1);
    padding: 30px;
}
.elementor-widget.box-with-shadow:not(:last-child) {
    margin-bottom: 25px !important;
}

#whatsapp { background-color: #25d366; width: 45px; height: 45px; cursor: pointer; position: fixed;  right: 30px; bottom: 120px; z-index: 100; box-shadow: 1px 2px 8px rgb(70 70 70 / 25%); padding: 5px; }
#whatsapp, #whatsapp img { border-radius: 50px; }
#whatsapp::before { top: 0; left: 0; content: ""; position: absolute; width: 100%; height: 100%; background-color: inherit; border-radius: 50%; z-index: -1; animation: ripple 1.5s ease-out infinite; animation-delay: 0.2s; top: 0; left: 0; }

@keyframes ripple {
  from {
    opacity: 1;
    transform: scale(0);
  }
  to {
    opacity: 0;
    transform: scale(3);
  }
}

.woocommerce form .show-password-input, .woocommerce-page form .show-password-input { top: 50%; height: 22px; overflow: hidden; }
.woocommerce .col2-set.addresses .title, .woocommerce-page .col2-set.addresses .title { padding: 20px 30px; }
.woocommerce-account .addresses .title .edit { line-height: auto; margin-right: 0; }


/* =========================================================================
   AFFORDABLE THEME PARTY PACKAGES — Section Highlight CSS (v2)
   Rewritten to match your actual theme markup (Flatsome-style WooCommerce
   product grid: .products-grid.product, .product-block, .name-subtitle,
   .price, .add_to_cart_button, etc.)

   Besto Balloons brand colors: blue #2FB6E8 / pink #E91E8C / teal #17B9C9 / green #4CAF50
   =========================================================================

   HOW TO APPLY (Elementor):
   1. Select the SECTION that wraps the "Affordable Theme Party Packages"
      heading + "Shop all" link + the 4 product cards (Silver/Gold/Platinum/Bronze).
   2. In that section's Advanced tab, add a CSS Class: affordable-packages
   3. Paste this whole file into: Appearance → Customize → Additional CSS.

   Note: I still don't have the exact markup for the heading + "Shop all"
   link (only the product grid was shared), so Section 2 below uses generic
   selectors. If the heading/link don't restyle, send that snippet too and
   I'll tighten it up.
   ========================================================================= */

/* ---- 1. Section wrapper: give it its own colored "stage" ---- */
.affordable-packages{
  background: linear-gradient(135deg, #DFF3FA 0%, #FCE4F1 100%);
  padding: 64px 24px !important;
  border-radius: 24px;
  position: relative;
  overflow: hidden;
}
.affordable-packages::before,
.affordable-packages::after{
  content: "";
  position: absolute;
  width: 160px; height: 160px;
  border-radius: 50%;
  opacity: 0.15;
  z-index: 0;
}
.affordable-packages::before{ background: #4CAF50; top: -60px; left: -60px; }
.affordable-packages::after{ background: #2FB6E8; bottom: -70px; right: -50px; }
.affordable-packages > *{ position: relative; z-index: 1; }

/* ---- 2. Heading + "Shop all" link (generic — confirm markup if this doesn't apply) ---- */
.affordable-packages h2,
.affordable-packages .elementor-heading-title{
  font-size: clamp(26px, 3.6vw, 38px) !important;
  font-weight: 800 !important;
  color: #2B2B2B !important;
  display: inline-block;
  margin-bottom: 8px !important;
}
.affordable-packages h2::before{
  content: "OUR BEST-VALUE PICKS";
  display: block;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.08em;
  color: #C21275;
  background: #FCE4F1;
  padding: 6px 14px;
  border-radius: 20px;
  width: fit-content;
  margin-bottom: 14px;
}
.affordable-packages h2::after{
  content: "";
  display: block;
  width: 64px; height: 4px;
  background: #4CAF50;
  border-radius: 4px;
  margin-top: 10px;
}
.affordable-packages a[href*="packages"]:not(.button):not(.add_to_cart_button){
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #ffffff;
  color: #1C93C2 !important;
  font-weight: 800;
  font-size: 14px;
  padding: 10px 20px;
  border-radius: 24px;
  border: 2px solid #2FB6E8;
  text-decoration: none !important;
  transition: background .2s, color .2s;
}
.affordable-packages a[href*="packages"]:not(.button):not(.add_to_cart_button):hover{
  background: #2FB6E8;
  color: #ffffff !important;
}

/* ---- 3. Product grid spacing ----
   Not overriding display/grid-template-columns here — your theme already
   controls the responsive column count via the data-desktop/data-tablet/
   data-mobile attributes on .products.row.grid. Fighting that with a hard
   `display:grid` override risks breaking the theme's own responsive JS.
   Just adding breathing room between cards instead. */
.affordable-packages .products.row.grid{
  margin-top: 32px !important;
}
.affordable-packages .products.row.grid > .item{
  padding: 10px !important;
}

/* ---- 4. Card treatment: lift cards off the colored background ---- */
.affordable-packages .products-grid.product{
  background: #ffffff !important;
  border-radius: 18px !important;
  border: 2px solid transparent !important;
  box-shadow: 0 6px 20px rgba(43,43,43,0.08) !important;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease !important;
  overflow: hidden !important;
  position: relative !important;
}
.affordable-packages .products-grid.product:hover{
  border-color: #4CAF50 !important;
}
.affordable-packages .product-content{ padding: 0 6px 6px !important; }
.affordable-packages figure.image{ margin: 0 !important; }
.affordable-packages figure.image img{ border-radius: 12px 12px 0 0 !important; }

/* ---- 5. Title ---- */
.affordable-packages .name-subtitle .name,
.affordable-packages .name-subtitle .name a{
  font-size: 17px !important;
  font-weight: 700 !important;
  color: #2B2B2B !important;
  text-decoration: none !important;
}

/* ---- 6. Price: the whole point — make it impossible to miss ---- */
.affordable-packages .caption .price{
  display: block !important;
  margin: 10px 0 16px !important;
  line-height: 1.3;
}
/* "From" label — de-emphasized so the number underneath pops */
.affordable-packages .caption .price small,
.affordable-packages .caption .price small em{
  display: inline-block;
  font-size: 11px !important;
  font-weight: 700 !important;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #6b6f72 !important;
  font-style: normal !important;
}
/* the actual amount */
.affordable-packages .caption .price .woocommerce-Price-amount{
  display: block !important;
  font-size: 24px !important;
  font-weight: 800 !important;
  margin-top: 2px;
}
.affordable-packages .caption .price .woocommerce-Price-currencySymbol{
  font-size: 16px !important;
  font-weight: 700 !important;
  vertical-align: 2px;
}

/* ---- 7. CTA button ---- */
.affordable-packages .groups-button .add-cart .button{
  display: inline-flex !important;
  align-items: center;
  gap: 6px;
  font-weight: 800 !important;
  font-size: 14px !important;
  padding: 11px 22px !important;
  border-radius: 24px !important;
  border: none !important;
  text-decoration: none !important;
  transition: background .2s !important;
}
.affordable-packages .groups-button .add-cart .button:hover{
  background: #3d9140 !important;
}
.affordable-packages .groups-button .add-cart .button i{
  font-size: 14px;
}

/* ---- 8. Rating row: hide the empty "0 reviews" line, it undercuts trust ---- */
.affordable-packages .rating{
  display: none !important;
}

/* ---- 9. "Most Popular" ribbon on the Gold Package (2nd card) ----
   Order on your homepage is Silver, Gold, Platinum, Bronze — this targets
   the 2nd .item. Change `nth-child(2)` to flag a different package. */
.affordable-packages .products.row.grid > .item:nth-child(4) .products-grid.product{
  border-color: #E91E8C !important;
}
.affordable-packages .products.row.grid > .item:nth-child(4) .products-grid.product::before{
  content: "MOST POPULAR";
  position: absolute;
  top: 14px;
  right: -32px;
  background: #E91E8C;
  color: #ffffff;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.06em;
  padding: 5px 36px;
  transform: rotate(35deg);
  z-index: 2;
}

/* ---- 10. Wishlist/Quickview icon overlay: recolor hover to match brand ---- */
.affordable-packages .yith-wcwl-add-to-wishlist-button-icon{
  stroke: #E91E8C !important;
}
.affordable-packages .yith-wcqv-button:hover,
.affordable-packages .yith-wcwl-add-to-wishlist-button:hover{
  color: #2FB6E8 !important;
}

.minimum-quantity-text { clear: both; font-style: italic; padding: 15px 0; }