/**
 * Swiss Courses Plugin - Widget Styles
 *
 * Professional styling for the Courses Details Elementor widget.
 * Includes responsive design, modern UI components, and theme compatibility.
 *
 * @package     SwissCoursesPlugin
 * @subpackage  Assets/CSS
 * @author      Michal Windorpski
 * @copyright   2025 Bass Media Group
 * @license     GPL-2.0-or-later
 * @version     1.2.0
 * @since       1.0.0
 */

/* CSS Isolation and Reset for Widget - Prevent global conflicts */
.courses-details-widget {
  /* Explicit isolation to prevent affecting other page elements */
  isolation: isolate;
  contain: layout style;
  
  /* Reset box model to prevent theme conflicts */
  *, *::before, *::after {
    box-sizing: border-box;
  }
  
  /* Reset margins and paddings within widget scope only */
  h1, h2, h3, h4, h5, h6, p, ul, ol, li, form, input, select, button {
    margin: 0;
    padding: 0;
    border: 0;
    vertical-align: baseline;
  }
  
  /* Ensure widget doesn't inherit problematic styles */
  font-family: inherit;
  line-height: normal;
  text-transform: none;
  letter-spacing: normal;
  
  /* Prevent z-index conflicts */
  position: relative;
  z-index: auto;
}

/* Widget container and cards */
.courses-details-widget {
  box-sizing: border-box;
  width: 100%;
  clear: both;
  overflow: auto;
  position: relative;
  z-index: 1;
  /* Reset only essential styles for the widget container */
  margin: 0;
  padding: 0;
  font-family: inherit;
}
.courses-details-widget:after {
  content: "";
  display: table;
  clear: both;
}
.courses-details-widget .course-details-section {
  background: #F8F9FA;
  padding: 40px 20px;
  border-radius: 12px;
  text-align: center;
}
.courses-details-widget .section-title {
  font-size: 28px;
  color: #4B3F72;
  margin-bottom: 30px;
}
.courses-details-widget .course-cards {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 20px;

/* Hide duplicate installments monthly fee summary inside enrollment; we keep markup for potential a11y but don't show visually */
.courses-details-widget .signup-payment-message.scw-duplicate-hide { display:none !important; }
  margin-bottom: 30px;
}
.courses-details-widget .course-card {
  background: white;
  padding: 20px;
  border-radius: 12px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.05);
  width: 250px;
  text-align: center;
}
.courses-details-widget .course-card h3 {
  margin: 10px 0 5px;
  color: #4B3F72;
  font-size: 18px;
}
.courses-details-widget .course-card p {
  color: #333;
  font-size: 15px;
}
.courses-details-widget .course-card i {
  font-size: 28px;
  color: #2CD3E1;
}
.courses-details-widget .course-price {
  background: white;
  padding: 30px;
  border-radius: 12px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.05);
  max-width: 700px;
  margin: 0 auto 30px auto;
  text-align: left;
}
.courses-details-widget .course-price h3 {
  color: #4B3F72;
  font-size: 22px;
  margin-bottom: 10px;
}
.courses-details-widget .course-price strong {
  color: #4B3F72;
  font-size: 20px;
}
.courses-details-widget .course-price ul {
  list-style: none;
  padding: 0;
  margin-top: 10px;
}
.courses-details-widget .course-price li {
  margin-bottom: 8px;
  font-size: 15px;
}
.courses-details-widget .subscribe-now-btn {
  display: inline-block;
  background: #2CD3E1;
  color: #fff;
  font-weight: bold;
  border: none;
  border-radius: 8px;
  padding: 14px 32px;
  font-size: 18px;
  margin: 32px 0 24px 0;
  cursor: pointer;
  transition: background 0.2s;
}
.courses-details-widget .subscribe-now-btn:hover {
  background: #4B3F72;
}
.courses-details-widget .subscribe-now-btn .btn-txt-subscribe {
  display: inline;
}
.courses-details-widget .subscribe-now-btn .btn-txt-checkout {
  display: none;
}
.courses-details-widget .subscribe-now-btn.active .btn-txt-subscribe {
  display: none;
}
.courses-details-widget .subscribe-now-btn.active .btn-txt-checkout {
  display: inline;
}
.courses-details-widget .enrollment-tabs {
  background: #fff;
  border-radius: 12px;
  padding: 30px;
  margin-top: 20px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.05);
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
  display: none;
}
.courses-details-widget .enrollment-tabs.active { display: block; }
/* Improved scoping - only affect elements within the widget container */
.courses-details-widget .enrollment-tabs .woo-product .product {
  width: 100%;
  max-width: 100%;
  box-shadow: none;
  border-radius: 0;
}
.courses-details-widget .enrollment-tabs .woo-product .product .summary {
  width: 100%;
}
.courses-details-widget .enrollment-tabs .woo-product .product .wscsd_date_picker {
  display: none;
}
.courses-details-widget .enrollment-tabs .woo-product .product .price,
.courses-details-widget .enrollment-tabs .woo-product .product .woocommerce-Price-amount,
.courses-details-widget .enrollment-tabs .woo-product .product .woocommerce-variation-price {
  display: none;
}
.courses-details-widget .enrollment-tabs .woo-product .product .single_add_to_cart_button {
  display: none;
}
.courses-details-widget .enrollment-tabs .woo-product .cart {
  display: block;
}
/* Hidden elements - use more specific selectors to avoid global conflicts */
.courses-details-widget .woo-product .quantity,
.courses-details-widget .enrollment-tabs .woo-product select option:first-child,
.courses-details-widget .enrollment-tabs .printfriendly,
.courses-details-widget .enrollment-tabs .woo-product .variations_form .variations,
.courses-details-widget .woocommerce-Reviews,
.courses-details-widget .woocommerce-tabs #tab-reviews,
.courses-details-widget .related,
.courses-details-widget .upsells,
.courses-details-widget .product_meta,
.courses-details-widget .product-category,
.courses-details-widget .sku_wrapper,
.courses-details-widget .sku,
.courses-details-widget .posted_in,
.courses-details-widget .woocommerce-tabs li.reviews_tab,
.courses-details-widget .woocommerce-product-gallery,
.courses-details-widget .single-product-category,
.courses-details-widget .product .product_title,
.courses-details-widget .product .woocommerce-product-gallery,
.courses-details-widget .product .woocommerce-product-gallery__wrapper,
.courses-details-widget .product .woocommerce-product-gallery__image,
.courses-details-widget .product .woocommerce-product-gallery__trigger,
.courses-details-widget .product .woocommerce-product-gallery__image--placeholder,
.courses-details-widget .product .woocommerce-product-gallery__image img,
.courses-details-widget .product .woocommerce-product-gallery__image--placeholder img,
.courses-details-widget .woocommerce-tabs {
  display: none;
}
.courses-details-widget .signup-payment-option{
  margin-bottom: 18px;
}
.courses-details-widget .woocommerce-tabs.wc-tabs-wrapper,
.courses-details-widget .tabs.wc-tabs {
  margin-bottom: 0px;
}
.courses-details-widget .signup-payment-option label {
  display: inline-flex;
  align-items: center;
  background: var(--signup-payment-option-bg, #f8f9fa);
  border: 2px solid var(--signup-payment-option-border, #2CD3E1);
  border-radius: 8px;
  padding: 10px 22px 10px 16px;
  margin-right: 18px;
  font-size: 17px;
  font-weight: 500;
  color: var(--signup-payment-option-color, #4B3F72);
  cursor: pointer;
  transition: border-color 0.2s, box-shadow 0.2s, background 0.2s;
  box-shadow: 0 2px 8px rgba(44,211,225,0.08);
}
.courses-details-widget .signup-payment-option label.selected {
  border-color: var(--signup-payment-option-border-selected, #4B3F72);
  background: var(--signup-payment-option-bg-selected, #e6f7ff);
}
.courses-details-widget .signup-payment-option label.selected span {
  background: inherit;
}
.courses-details-widget .signup-payment-option label .payment-icon {
  font-size: 22px;
  margin-right: 10px;
  color: var(--signup-payment-option-icon, #2CD3E1);
}
.courses-details-widget .signup-payment-option input[type="radio"] {
  margin-right: 8px;
  accent-color: var(--signup-radio-checked-bg, #2CD3E1);
  border: 2px solid var(--signup-radio-border-color, #2CD3E1);
  border-radius: 50%;
  width: 18px;
  height: 18px;
  appearance: none;
  outline: none;
  box-shadow: 0 0 0 2px #fff inset;
  position: relative;
}
.courses-details-widget .signup-payment-option input[type="radio"]:checked {
  background: var(--signup-radio-checked-bg, #2CD3E1);
  border-color: var(--signup-radio-checked-border-color, #4B3F72);
}
.courses-details-widget .signup-payment-option input[type="radio"]:checked:after {
  content: '';
  display: block;
  width: 8px;
  height: 8px;
  background: var(--signup-radio-checked-inner-color, #fff);
  border-radius: 50%;
  position: absolute;
  top: 4px;
  left: 4px;
}
.courses-details-widget .signup-price {
  font-size: 26px;
  font-weight: 700;
  color: var(--signup-price-color, #4B3F72);
  margin: 12px 0 18px 0;
  line-height: 1.2;
}
.courses-details-widget .custom-widget-price {
  font-size: 26px;
  font-weight: 700;
  color: var(--signup-price-color, #4B3F72);
  margin: 0 0 10px 0;
}
.courses-details-widget .signup-action-buttons {
  margin-top: 24px;
  display: flex;
  gap: 20px;
  justify-content: center;
}
.courses-details-widget .signup-payment-message-wrap {
  margin-bottom: 18px;
}

.signup-payment-message-wrap .signup-payment-message span {
  color: #000000;
}

/* Enhanced Bundle Payment Message */
.signup-payment-message-wrap .signup-payment-message[id*="bundle-message"] {
  background: linear-gradient(135deg, #e8f8f5 0%, #d5f4e6 100%);
  border: 2px solid #27ae60;
  border-radius: 12px;
  padding: 16px 20px;
  margin: 12px 0;
  box-shadow: 0 4px 15px rgba(39,174,96,0.1);
}

.signup-payment-message-wrap .signup-payment-message[id*="bundle-message"] span {
  color: #27ae60 !important;
  font-weight: 600;
  font-size: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.signup-payment-message-wrap .signup-payment-message[id*="bundle-message"] span:before {
  content: '\f058';
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  color: #27ae60;
  font-size: 16px;
}
/* WooCommerce notices - these need to be hidden within widget context */
.courses-details-widget .woocommerce-breadcrumb,
.courses-details-widget .woocommerce-message,
.courses-details-widget .woocommerce-info,
.courses-details-widget .woocommerce-error,
.courses-details-widget .woocommerce-notices-wrapper {
  display: none;
}
.courses-details-widget .wscsd_date_picker {
  display: none !important; /* Hide the date picker */
}
.courses-details-widget .select2-container--default .select2-selection--single {
  background: #fff;
  border: 2px solid #2CD3E1;
  border-radius: 8px;
  height: 44px;
  font-size: 16px;
  color: #4B3F72;
  box-shadow: 0 2px 8px rgba(44,211,225,0.08);
}
.courses-details-widget .select2-container--default .select2-selection--single .select2-selection__rendered {
  color: #4B3F72;
  line-height: 44px;
}
.courses-details-widget .select2-container--default .select2-selection--single .select2-selection__arrow {
  height: 44px;
}
.signup-payment-option label {
  display: inline-flex;                  
  align-items: center;                    
  /* Fallbacks only, Elementor controls will override */
  background: var(--signup-payment-option-bg, #f8f9fa);
  border: 2px solid var(--signup-payment-option-border, #2CD3E1);
  border-radius: 8px;
  padding: 10px 22px 10px 16px;
  margin-right: 18px;
  font-size: 17px;
  font-weight: 500;
  color: var(--signup-payment-option-color, #4B3F72);
  cursor: pointer;
  transition: border-color 0.2s, box-shadow 0.2s, background 0.2s;
  box-shadow: 0 2px 8px rgba(44,211,225,0.08);
}
.signup-payment-option label.selected {
  border-color: var(--signup-payment-option-border-selected, #4B3F72);
  background: var(--signup-payment-option-bg-selected, #e6f7ff);
}
.signup-payment-option label.selected span {
  background: inherit;
}
.signup-payment-option label .payment-icon {
  font-size: 22px;
  margin-right: 10px;
  color: var(--signup-payment-option-icon, #2CD3E1);
}
.signup-payment-option input[type="radio"] {
  margin-right: 8px;
}
@media (max-width: 900px) {
  .courses-details-widget .course-cards {
    flex-direction: column;
    align-items: center;
  }
  .courses-details-widget .course-card {
    width: 100%;
    max-width: 350px;
  }
  .courses-details-widget .course-price {
    padding: 18px;
  }
  .courses-details-widget .enrollment-tabs {
    padding: 18px;
  }
}

/* Hide specific variation elements - keep !important for these as they override plugin styles */
.courses-details-widget .woovr-variations .woovr-variation:first-child label[for^="woovr_"],
.courses-details-widget .woovr-variations .woovr-variation:first-child .woovr-variation-selector input[type="radio"] {
  display: none !important;
}
.courses-details-widget .woovr-variations .woovr-variation:first-child {
  height: 0 !important;
  overflow: hidden !important;
  margin: 0 !important;
  padding: 0 !important;
  pointer-events: none !important;
  opacity: 0 !important;
  min-width: 0 !important;
  min-height: 0 !important;
  border: none !important;
  box-shadow: none !important;
}
/* Widget-specific button controls - keep !important for these as they override WooCommerce defaults */
.courses-details-widget .enrollment-tabs .woo-product .single_add_to_cart_button {
  display: none !important;
}
.courses-details-widget .signup-action-online {
  display: inline-block !important;
}

/* Custom radio/variable selector styling for .woovr-variation */
.courses-details-widget .woovr-variations {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  margin-bottom: 18px;
}
.courses-details-widget .woovr-variation {
  display: flex;
  align-items: center;
  color: var(--variable-selector-color, #4B3F72);
  background: var(--variable-selector-bg, #f8f9fa);
  border: 2px solid var(--variable-selector-border, #B1A0C5);
  border-radius: var(--variable-selector-radius, 8px);
  padding: 10px 18px;
  font-size: 16px;
  cursor: pointer;
  transition: border-color 0.2s, box-shadow 0.2s, background 0.2s;
  box-shadow: 0 2px 8px rgba(44,211,225,0.08);
  position: relative;
}
/* Variation selector states - reduced !important usage */
.courses-details-widget .woovr-variation.selected,
.courses-details-widget .woovr-variation label.selected {
  background: transparent;
  border-color: unset;
  color: unset;
}
.courses-details-widget .woovr-variation-active,
.courses-details-widget .woovr-variation.woovr-variation-active{
  background: var(--variable-selector-bg-active, #e6f7ff);
  border-color: var(--variable-selector-border-active, #4B3F72);
  color: var(--variable-selector-color-active, #4B3F72);
}
.courses-details-widget .woovr-variation input[type="radio"] {
  display: none !important; /* Keep this one as it needs to override plugin defaults */
}
.courses-details-widget .woovr-variation label:before,
.courses-details-widget .woovr-variation label:after {
  display: none !important;
}
.courses-details-widget .woovr-variation label {
  position: relative;
  display: inline-flex;
  align-items: center;
  padding-left: 34px;
  min-height: 32px;
  cursor: pointer;
  font-size: 17px;
  font-weight: 500;
  margin-right: 18px;
  background: var(--variable-selector-bg, #f8f9fa);
  border: var(--variable-selector-border-width, 2px) solid var(--variable-selector-border, #2CD3E1);
  border-radius: var(--variable-selector-radius, 8px);
  color: var(--variable-selector-color, #4B3F72);
  transition: border-color 0.2s, box-shadow 0.2s, background 0.2s;
  box-shadow: 0 2px 8px rgba(44,211,225,0.08);
}
.courses-details-widget .woovr-variation.selected label,
.courses-details-widget .woovr-variation label.selected {
  /* background: var(--variable-selector-bg-active, #e6f7ff) !important;
  border-color: var(--variable-selector-border-active, #4B3F72) !important; */
  color: var(--variable-selector-color-active, #4B3F72) !important;
}
.courses-details-widget .woovr-variation label:before {
  content: '';
  display: inline-block;
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  width: 18px;
  height: 18px;
  border: 2px solid var(--variable-selector-radio-border, #2CD3E1);
  border-radius: 50%;
  background: #fff;
  box-sizing: border-box;
  transition: border-color 0.2s, background 0.2s;
}
.courses-details-widget .woovr-variation input[type="radio"] {
  position: absolute;
  opacity: 0;
  width: 18px;
  height: 18px;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  margin: 0;
  z-index: 2;
  cursor: pointer;
}
.courses-details-widget .woovr-variation input[type="radio"]:focus + label:before {
  outline: 2px solid var(--variable-selector-border, #2CD3E1);
  outline-offset: 2px;
}
.courses-details-widget .woovr-variation input[type="radio"]:checked + label:before {
  border-color: var(--variable-selector-radio-checked-border, #4B3F72);
  background: var(--variable-selector-radio-checked-bg, #2CD3E1);
}
.courses-details-widget .woovr-variation label:after {
  content: '';
  display: block;
  position: absolute;
  left: 15px;
  top: 50%;
  transform: translateY(-50%) scale(0);
  width: 8px;
  height: 8px;
  background: var(--variable-selector-radio-checked-inner, #fff);
  border-radius: 50%;
  transition: transform 0.2s;
}
.courses-details-widget .woovr-variation input[type="radio"]:checked + label:after {
  transform: translateY(-50%) scale(1);
}
.courses-details-widget .woovr-variation label:focus {
  outline: 2px solid var(--variable-selector-border, #2CD3E1);
  outline-offset: 2px;
}
.courses-details-widget .woovr-variation-name label {
  color: var(--variable-selector-label-color, #4B3F72);
  font-weight: 600;
  font-size: 15px;
  /* Remove all border styles and background */
  border: none !important;
  border-width: 0 !important;
  border-style: none !important;
  box-shadow: none !important;
  outline: none !important;
  background: none !important;
}

/* Improved custom radio button styling for .woovr-variation (variable selector) */
.courses-details-widget .woovr-variation input[type="radio"] {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}
.courses-details-widget .woovr-variation label {
  position: relative;
  display: inline-flex;
  align-items: center;
  padding-left: 34px;
  min-height: 32px;
  cursor: pointer;
  font-size: 17px;
  font-weight: 500;
  margin-right: 18px;
  transition: border-color 0.2s, box-shadow 0.2s, background 0.2s;
  box-shadow: 0 2px 8px rgba(44,211,225,0.08);
}
.courses-details-widget .woovr-variation label:before {
  content: '';
  display: inline-block;
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  width: 18px;
  height: 18px;
  border: 2px solid var(--variable-selector-radio-border, #2CD3E1);
  border-radius: 50%;
  background: #fff;
  box-sizing: border-box;
  transition: border-color 0.2s, background 0.2s;
}
.courses-details-widget .woovr-variation input[type="radio"] {
  position: absolute;
  opacity: 0;
  width: 18px;
  height: 18px;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  margin: 0;
  z-index: 2;
  cursor: pointer;
}
.courses-details-widget .woovr-variation input[type="radio"]:focus + label:before {
  outline: 2px solid var(--variable-selector-border, #2CD3E1);
  outline-offset: 2px;
}
.courses-details-widget .woovr-variation input[type="radio"]:checked + label:before {
  border-color: var(--variable-selector-radio-checked-border, #4B3F72);
  background: var(--variable-selector-radio-checked-bg, #2CD3E1);
}
.courses-details-widget .woovr-variation label:after {
  content: '';
  display: block;
  position: absolute;
  left: 15px;
  top: 50%;
  transform: translateY(-50%) scale(0);
  width: 8px;
  height: 8px;
  background: var(--variable-selector-radio-checked-inner, #fff);
  border-radius: 50%;
  transition: transform 0.2s;
}
.courses-details-widget .woovr-variation input[type="radio"]:checked + label:after {
  transform: translateY(-50%) scale(1);
}
.courses-details-widget .woovr-variation label:focus {
  outline: 2px solid var(--variable-selector-border, #2CD3E1);
  outline-offset: 2px;
}

/* Improved custom radio button styling for .woovr-variation and .signup-payment-option */
.courses-details-widget .woovr-variation input[type="radio"],
.courses-details-widget .signup-payment-option input[type="radio"] {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}
.courses-details-widget .signup-payment-option label {
  position: relative;
  display: inline-flex;
  align-items: center;
  padding-left: 34px;
  min-height: 32px;
  cursor: pointer;
  font-size: 17px;
  font-weight: 500;
  color: var(--signup-payment-option-color, #4B3F72);
  background: var(--signup-payment-option-bg, #f8f9fa);
  border: 2px solid var(--signup-payment-option-border, #2CD3E1);
  border-radius: 8px;
  margin-right: 18px;
  transition: border-color 0.2s, box-shadow 0.2s, background 0.2s;
  box-shadow: 0 2px 8px rgba(44,211,225,0.08);
}
.courses-details-widget .woovr-variation label:before {
  content: '';
  display: inline-block;
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  width: 18px;
  height: 18px;
  border: 2px solid var(--signup-radio-border-color, #2CD3E1);
  border-radius: 50%;
  background: #fff;
  box-sizing: border-box;
  transition: border-color 0.2s, background 0.2s;
}
.courses-details-widget .woovr-variation input[type="radio"]:checked + label:before,
.courses-details-widget .signup-payment-option input[type="radio"]:checked + label:before {
  border-color: var(--signup-radio-checked-border-color, #4B3F72);
  background: var(--signup-radio-checked-bg, #2CD3E1);
}
.courses-details-widget .woovr-variation label:after,
.courses-details-widget .signup-payment-option label:after {
  content: '';
  display: block;
  position: absolute;
  left: 15px;
  top: 50%;
  transform: translateY(-50%) scale(0);
  width: 8px;
  height: 8px;
  background: var(--signup-radio-checked-inner-color, #fff);
  border-radius: 50%;
  transition: transform 0.2s;
}
.courses-details-widget .woovr-variation input[type="radio"]:checked + label:after,
.courses-details-widget .signup-payment-option input[type="radio"]:checked + label:after {
  transform: translateY(-50%) scale(1);
}
.courses-details-widget .woovr-variation label:focus,
.courses-details-widget .signup-payment-option label:focus {
  outline: 2px solid #2CD3E1;
  outline-offset: 2px;
}

/* Custom styling for the Pay in Installments and Pay in Full buttons (payment-option-btn) */
.payment-option-btn {
  display: inline-flex;
  align-items: center;
  background: var(--payment-option-btn-bg, #f8f9fa);
  border: 2px solid var(--payment-option-btn-border, #2CD3E1);
  border-radius: var(--payment-option-btn-radius, 8px);
  padding: 10px 22px 10px 16px;
  margin-right: 18px;
  font-size: 17px;
  font-weight: 500;
  color: var(--payment-option-btn-color, #4B3F72);
  cursor: pointer;
  transition: border-color 0.2s, box-shadow 0.2s, background 0.2s;
  box-shadow: var(--payment-option-btn-shadow, 0 2px 8px rgba(44,211,225,0.08));
  outline: none;
  position: relative;
}
.payment-option-btn.selected {
  border-color: var(--payment-option-btn-border-selected, #4B3F72);
  background: var(--payment-option-btn-bg-selected, #e6f7ff);
  color: var(--payment-option-btn-color-selected, #4B3F72);
}
.payment-option-btn:focus {
  outline: 2px solid var(--payment-option-btn-border, #2CD3E1);
  outline-offset: 2px;
}
.payment-option-btn .payment-icon {
  font-size: var(--payment-option-btn-icon-size, 22px);
  margin-right: 10px;
  color: var(--payment-option-btn-icon, #2CD3E1);
}
.payment-option-btn.selected .payment-icon {
  color: var(--payment-option-btn-icon-selected, #4B3F72);
}
.payment-option-btn input[type="radio"] {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}
.courses-details-widget .signup-variation-wrap {
  padding-top: 25px;
}
.courses-details-widget .woocommerce-tabs {
  padding: 0px !important;
}

/* Contact for Details Button Styling */
.courses-details-widget .contact-for-details-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #2CD3E1;
  color: white;
  border: none;
  padding: 15px 30px;
  border-radius: 5px;
  font-size: 16px;
  font-weight: 500;
  cursor: pointer;
  min-width: 200px;
  transition: all 0.3s ease;
  text-decoration: none;
  outline: none;
  gap: 8px;
}

.courses-details-widget .contact-for-details-btn:hover {
  background: #1fa8b5;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(44, 211, 225, 0.3);
  color: white;
  text-decoration: none;
}

.courses-details-widget .contact-for-details-btn:focus {
  outline: 2px solid #2CD3E1;
  outline-offset: 2px;
  color: white;
  text-decoration: none;
}

.courses-details-widget .contact-for-details-btn:active {
  transform: translateY(0);
  box-shadow: 0 2px 6px rgba(44, 211, 225, 0.2);
  color: white;
  text-decoration: none;
}

/* Contact button icon styling - works with both SVG and font icons */
.courses-details-widget .contact-for-details-btn .contact-btn-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  flex-shrink: 0;
}

/* SVG icon styling (modern Elementor icons) */
.courses-details-widget .contact-for-details-btn .contact-btn-icon svg {
  fill: currentColor;
  width: 1em;
  height: 1em;
  display: block;
}

/* Font icon styling (legacy support) */
.courses-details-widget .contact-for-details-btn .contact-btn-icon i {
  line-height: 1;
  display: block;
}

/* Text styling */
.courses-details-widget .contact-for-details-btn .contact-btn-text {
  display: inline-block;
  line-height: 1.2;
  flex-shrink: 0;
}

/* Legacy icon support (direct icon without wrapper) */
.courses-details-widget .contact-for-details-btn > i {
  line-height: 1;
  flex-shrink: 0;
}

.courses-details-widget .contact-for-details-btn > svg {
  fill: currentColor;
  width: 1em;
  height: 1em;
  flex-shrink: 0;
}

/* Redesigned Course Pricing Section - Side by side layout */
.courses-details-widget .course-pricing-section {
  background: white;
  padding: 30px;
  border-radius: 12px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.05);
  max-width: 700px;
  margin: 0 auto 30px auto;
  text-align: center;
}

.courses-details-widget .pricing-section-title {
  color: #4B3F72;
  font-size: 22px;
  margin-bottom: 10px;
  text-align: center;
}

.courses-details-widget .pricing-description {
  color: #666;
  font-size: 16px;
  margin-bottom: 24px;
  text-align: center;
  line-height: 1.5;
}

.courses-details-widget .pricing-options-container {
  display: flex;
  gap: 20px;
  justify-content: center;
  flex-wrap: wrap;
}

.courses-details-widget .pricing-option {
  background: #f8f9fa;
  border: 2px solid #e9ecef;
  border-radius: 12px;
  padding: 24px 20px;
  min-width: 280px;
  flex: 1;
  max-width: 320px;
  transition: border-color 0.3s, box-shadow 0.3s;
}

.courses-details-widget .pricing-option:hover {
  border-color: #2CD3E1;
  box-shadow: 0 4px 15px rgba(44,211,225,0.15);
}

.courses-details-widget .pricing-option-full {
  border-color: #2CD3E1;
}

.courses-details-widget .pricing-option-installments {
  border-color: #4B3F72;
}

.courses-details-widget .pricing-option-header {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
}

.courses-details-widget .pricing-option-icon {
  font-size: 24px;
  margin-right: 10px;
  color: #2CD3E1;
}
.courses-details-widget .pricing-option-icon svg {
  width: 1em;
  height: 1em;
}
.courses-details-widget .pricing-option-icon svg,
.courses-details-widget .pricing-option-icon svg * {
  fill: currentColor;
  stroke: currentColor;
}

.courses-details-widget .pricing-option-installments .pricing-option-icon {
  color: #4B3F72;
}

.courses-details-widget .pricing-option-title {
  color: #4B3F72;
  font-size: 18px;
  font-weight: 600;
  margin: 0;
}

.courses-details-widget .pricing-option-price {
  font-size: 28px;
  font-weight: 700;
  color: #4B3F72;
  margin-bottom: 8px;
  line-height: 1.2;
}

/* OR label between dual prices */
.courses-details-widget .pricing-option-price .pricing-or {
  display: inline-block;
  margin: 0 8px;
  font-size: 16px;
  font-weight: 600;
  color: #999;
  vertical-align: middle;
}

.courses-details-widget .pricing-frequency {
  font-size: 22px;
  font-weight: 400;
  color: #666;
}

.courses-details-widget .pricing-option-label {
  color: #666;
  font-size: 14px;
  font-weight: 500;
}

/* ========================================
   BUNDLE PAYMENT STYLING - Enhanced Design
   ======================================== */

/* Bundle Payment Container */
.courses-details-widget .pricing-option-bundle-payment {
  background: linear-gradient(135deg, #fff 0%, #f8fffe 100%);
  border: 2px solid #e74c3c;
  position: relative;
  overflow: hidden;
}

.courses-details-widget .pricing-option-bundle-payment:hover {
  border-color: #c0392b;
  box-shadow: 0 8px 25px rgba(231,76,60,0.2);
  transform: translateY(-2px);
}

/* Bundle Special Offer Badge */
.courses-details-widget .bundle-special-offer {
  position: absolute;
  top: -10px;
  right: -10px;
  z-index: 10;
}

.courses-details-widget .bundle-badge {
  background: linear-gradient(135deg, #e74c3c 0%, #c0392b 100%);
  color: white;
  padding: 6px 16px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  box-shadow: 0 3px 10px rgba(231,76,60,0.3);
  transform: rotate(15deg);
}

/* Bundle Icon Styling */
.courses-details-widget .pricing-option-bundle-payment .pricing-option-icon {
  color: #e74c3c;
  font-size: 28px;
}

/* Ensure Elementor icon controls affect SVG icons too */
.courses-details-widget .pricing-option-bundle-payment .pricing-option-icon svg {
  width: 1em;  /* follow font-size of the icon wrapper */
  height: 1em; /* follow font-size of the icon wrapper */
}
.courses-details-widget .pricing-option-bundle-payment .pricing-option-icon svg,
.courses-details-widget .pricing-option-bundle-payment .pricing-option-icon svg * {
  fill: currentColor;   /* color control drives SVG fill */
  stroke: currentColor; /* color control also drives SVG stroke when present */
}

/* Bundle Pricing Breakdown */
.courses-details-widget .bundle-pricing-breakdown {
  margin-top: 8px;
}

.courses-details-widget .bundle-items {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 20px;
}

/* Individual Bundle Items */
.courses-details-widget .bundle-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  background: rgba(231,76,60,0.05);
  border-radius: 8px;
  border-left: 3px solid #e74c3c;
}

.courses-details-widget .bundle-item .item-icon {
  width: 32px;
  height: 32px;
  background: linear-gradient(135deg, #e74c3c 0%, #c0392b 100%);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 14px;
  flex-shrink: 0;
}

/* Make inner SVG icons inside bundle item respond to color/size controls */
.courses-details-widget .bundle-item .item-icon svg {
  width: 1em;
  height: 1em;
}
.courses-details-widget .bundle-item .item-icon svg,
.courses-details-widget .bundle-item .item-icon svg * {
  fill: currentColor;
  stroke: currentColor;
}

.courses-details-widget .bundle-item .item-details {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex-grow: 1;
}

.courses-details-widget .bundle-item .item-name {
  font-size: 14px;
  font-weight: 600;
  color: #2c3e50;
}

.courses-details-widget .bundle-item .item-price {
  font-size: 16px;
  font-weight: 700;
  color: #e74c3c;
}

/* Plus Sign Between Items */
.courses-details-widget .bundle-plus {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 4px 0;
}

.courses-details-widget .bundle-plus i {
  font-size: 14px;
  color: #95a5a6;
  background: white;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid #ecf0f1;
}

/* Bundle Total Section */
.courses-details-widget .bundle-total {
  margin-top: 16px;
}

.courses-details-widget .total-separator {
  height: 2px;
  background: linear-gradient(90deg, transparent 0%, #e74c3c 20%, #e74c3c 80%, transparent 100%);
  margin: 12px 0;
}

.courses-details-widget .total-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 0;
}

.courses-details-widget .total-label {
  font-size: 16px;
  font-weight: 600;
  color: #2c3e50;
}

.courses-details-widget .total-price {
  font-size: 24px;
  font-weight: 800;
  color: #e74c3c;
}

/* Bundle Benefits */
.courses-details-widget .bundle-benefits {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 16px;
}

.courses-details-widget .benefit-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: #27ae60;
}

.courses-details-widget .benefit-item i {
  color: #27ae60;
  font-size: 14px;
  width: 16px;
  text-align: center;
}

.courses-details-widget .benefit-item span {
  font-weight: 500;
}

/* Responsive Adjustments for Bundle */
@media (max-width: 768px) {
  .courses-details-widget .bundle-special-offer {
    top: -8px;
    right: -8px;
  }
  
  .courses-details-widget .bundle-badge {
    padding: 4px 12px;
    font-size: 10px;
    transform: rotate(10deg);
  }
  
  .courses-details-widget .bundle-item {
    padding: 10px 14px;
  }
  
  .courses-details-widget .bundle-item .item-icon {
    width: 28px;
    height: 28px;
    font-size: 12px;
  }
  
  .courses-details-widget .total-price {
    font-size: 20px;
  }
}

/* Course Features Card - Separate styling */
.courses-details-widget .course-features-card {
  background: white;
  padding: 30px;
  border-radius: 12px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.05);
  max-width: 700px;
  margin: 0 auto 30px auto;
  text-align: left;
}

.courses-details-widget .features-title {
  color: #4B3F72;
  font-size: 20px;
  margin-bottom: 20px;
  text-align: center;
}

.courses-details-widget .features-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.courses-details-widget .feature-item {
  display: flex;
  align-items: flex-start;
  margin-bottom: 12px;
  font-size: 15px;
  line-height: 1.5;
}

.courses-details-widget .feature-check {
  color: #28a745;
  font-size: 16px;
  margin-right: 12px;
  margin-top: 2px;
  flex-shrink: 0;
}

.courses-details-widget .feature-item span {
  color: #333;
}

/* Responsive design for pricing options */
@media (max-width: 768px) {
  .courses-details-widget .pricing-options-container {
    flex-direction: column;
    align-items: center;
  }
  
  .courses-details-widget .pricing-option {
    max-width: 100%;
    min-width: auto;
  }
  
  .courses-details-widget .course-pricing-section,
  .courses-details-widget .course-features-card {
    padding: 20px;
  }
}

/* Hide specific WooCommerce elements in the widget frontend output */
.courses-details-widget .single-product-category,
.courses-details-widget .woocommerce-tabs,
.courses-details-widget .related.products {
  display: none !important;
}

/* Additional WooCommerce element hiding for cleaner widget display */
.courses-details-widget .woocommerce-product-gallery,
.courses-details-widget .product_meta,
.courses-details-widget .woocommerce-product-details__short-description,
.courses-details-widget .single-product-summary > .price,
.courses-details-widget .single-product-summary > .stock,
.courses-details-widget .single-product-summary > .woocommerce-product-rating {
  display: none !important;
}

/* Keep only the add to cart form visible */
.courses-details-widget .woocommerce div.product form.cart {
  display: block !important;
}

/* Ensure the product form is properly styled within the widget */
.courses-details-widget .woocommerce div.product div.summary {
  margin: 0;
  width: 100%;
}

.courses-details-widget .woocommerce div.product .cart {
  margin: 20px 0;
}

.courses-details-widget .woocommerce div.product .cart .button {
  width: 100%;
  padding: 12px 24px;
  background: #2CD3E1;
  color: white;
  border: none;
  border-radius: 8px;
  font-weight: 600;
  font-size: 16px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.courses-details-widget .woocommerce div.product .cart .button:hover {
  background: #1fb8c4;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(44, 211, 225, 0.3);
}

/* Package Comparison Layout Styles - Enhanced and Fixed */
.courses-packages-comparison {
  max-width: 1200px;
  margin: 0 auto;
  padding: 30px 20px;
  font-family: inherit;
  background: transparent !important;
}

.courses-packages-comparison .packages-header {
  text-align: center;
  margin-bottom: 50px;
}

.courses-packages-comparison .packages-header .section-title {
  font-size: 2.5em;
  margin-bottom: 15px;
  color: #2c3e50;
  font-weight: 700;
  line-height: 1.2;
}

/* Ultra-specific selector to override theme conflicts */
.elementor-widget-courses_details .courses-details-widget.courses-packages-comparison .packages-grid,
.courses-details-widget.courses-packages-comparison .packages-grid {
  display: grid !important;
  gap: 30px !important;
  margin-bottom: 50px !important;
  justify-content: center !important;
  width: 100% !important;
  position: relative !important;
  z-index: 1 !important;
}

/* Ultra-specific selectors for grid columns to override theme conflicts */
.elementor-widget-courses_details .courses-details-widget.courses-packages-comparison .packages-grid[data-packages-count='1'],
.courses-details-widget.courses-packages-comparison .packages-grid[data-packages-count='1'] { 
  grid-template-columns: 1fr !important; 
  max-width: 400px !important; 
  margin: 0 auto 50px !important; 
}

.elementor-widget-courses_details .courses-details-widget.courses-packages-comparison .packages-grid[data-packages-count='2'],
.courses-details-widget.courses-packages-comparison .packages-grid[data-packages-count='2'] { 
  grid-template-columns: repeat(2, 1fr) !important; 
  max-width: 800px !important;
  margin: 0 auto 50px !important;
}

.elementor-widget-courses_details .courses-details-widget.courses-packages-comparison .packages-grid[data-packages-count='3'],
.courses-details-widget.courses-packages-comparison .packages-grid[data-packages-count='3'] { 
  grid-template-columns: repeat(3, 1fr) !important; 
  max-width: 1000px !important;
  margin: 0 auto 50px !important;
}

.elementor-widget-courses_details .courses-details-widget.courses-packages-comparison .packages-grid[data-packages-count='4'],
.courses-details-widget.courses-packages-comparison .packages-grid[data-packages-count='4'] { 
  grid-template-columns: repeat(4, 1fr) !important; 
}

@media (max-width: 1200px) {
  .elementor-widget-courses_details .courses-details-widget.courses-packages-comparison .packages-grid[data-packages-count='4'],
  .courses-details-widget.courses-packages-comparison .packages-grid[data-packages-count='4'] { 
    grid-template-columns: repeat(2, 1fr) !important; 
  }
}

@media (max-width: 768px) {
  .elementor-widget-courses_details .courses-details-widget.courses-packages-comparison .packages-grid,
  .courses-details-widget.courses-packages-comparison .packages-grid { 
    grid-template-columns: 1fr !important; 
    gap: 20px !important;
    max-width: 100% !important;
  }
}

/* Ultra-specific selectors for package cards */
.elementor-widget-courses_details .courses-details-widget.courses-packages-comparison .package-card,
.courses-details-widget.courses-packages-comparison .package-card {
  border: 2px solid #e1e8ed !important;
  border-radius: 16px !important;
  padding: 30px 25px;
  text-align: center;
  position: relative;
  transition: all 0.3s ease;
  background: linear-gradient(135deg, #fff 0%, #fafbfc 100%);
  cursor: pointer;
  box-shadow: 0 4px 20px rgba(0,0,0,0.08);
  min-height: 420px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  overflow: hidden;
  transform: translateY(0);
}

.courses-packages-comparison .package-card:hover {
  border-color: #3498db;
  box-shadow: 0 12px 35px rgba(52, 152, 219, 0.15);
  transform: translateY(-8px);
}

.courses-packages-comparison .package-card.featured {
  border-color: #e74c3c;
  position: relative;
  background: linear-gradient(135deg, #fff 0%, #fef9f9 100%);
}

.courses-packages-comparison .package-card.featured::before {
  content: '';
  position: absolute;
  top: -2px;
  left: -2px;
  right: -2px;
  bottom: -2px;
  background: linear-gradient(45deg, #e74c3c, #f39c12, #e74c3c);
  border-radius: 16px;
  z-index: -1;
  animation: gradient-rotation 3s ease-in-out infinite;
}

@keyframes gradient-rotation {
  0%, 100% { background: linear-gradient(45deg, #e74c3c, #f39c12, #e74c3c); }
  50% { background: linear-gradient(45deg, #f39c12, #e74c3c, #f39c12); }
}

.courses-packages-comparison .package-card.selected {
  border-color: #27ae60;
  background: linear-gradient(135deg, #f8fff9 0%, #e8f5e8 100%);
  box-shadow: 0 15px 40px rgba(39, 174, 96, 0.2);
  transform: translateY(-10px);
}

.courses-packages-comparison .featured-badge {
  position: absolute;
  top: -10px;
  left: 50%;
  transform: translateX(-50%);
  background: #e74c3c;
  color: white;
  padding: 5px 15px;
  border-radius: 15px;
  font-size: 0.85em;
  font-weight: bold;
  box-shadow: 0 2px 8px rgba(231, 76, 60, 0.3);
}

.courses-packages-comparison .package-header {
  margin-bottom: 20px;
}

.courses-packages-comparison .package-icon {
  font-size: 2.5em; /* default only; Elementor can override */
  color: #3498db;
  margin-bottom: 15px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-left: auto;
  margin-right: auto;
}

.courses-packages-comparison .package-icon i {
  font-size: inherit;
  width: auto;
  height: auto;
}

.courses-packages-comparison .package-icon svg {
  width: 1em;
  height: 1em;
  max-width: 100%;
  max-height: 100%;
}

/* Additional icon size constraints for package comparison */
/* Allow inner icon elements to scale with container/font-size */
.courses-packages-comparison .package-icon * {
  font-size: inherit;
}

/* Intentionally no hard constraints on package card icons; Elementor controls handle sizing */

.courses-packages-comparison .package-card .elementor-icon svg {
  width: 1em;
  height: 1em;
}

.courses-packages-comparison .package-card .elementor-icon i {
  font-size: inherit;
}

/* Reset any problematic inherited styles in package cards */
.courses-packages-comparison .package-card * {
  max-width: initial;
  box-sizing: border-box;
}

/* Removed hard max-size caps to allow Elementor controls to scale icons beyond 60px */

/* Specific fix for Elementor icons in package cards */
.courses-packages-comparison .package-card .package-icon .elementor-icon,
.courses-packages-comparison .package-card .package-icon .elementor-icon-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Flexible icon sizing for package comparison - allow Elementor controls to drive size/color */
.courses-packages-comparison .package-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 15px auto;
  line-height: 1;
  font-size: 60px; /* default; Elementor control can override via {{WRAPPER}} selector */
  width: auto;
  height: auto;
  overflow: hidden;
  box-sizing: border-box;
  flex-shrink: 0;
  flex-grow: 0;
}

.courses-packages-comparison .package-icon svg,
.courses-packages-comparison .package-card .package-icon svg {
  width: 1em;
  height: 1em;
  display: block;
}

.courses-packages-comparison .package-icon svg,
.courses-packages-comparison .package-icon svg * {
  fill: currentColor;
  stroke: currentColor;
}

.courses-packages-comparison .package-icon .elementor-icon,
.courses-packages-comparison .package-icon .elementor-icon-wrapper,
.courses-packages-comparison .package-card .package-icon .elementor-icon,
.courses-packages-comparison .package-card .package-icon .elementor-icon-wrapper {
  width: auto;
  height: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  box-sizing: border-box;
}

/* Package button and typography improvements */
.courses-packages-comparison .package-title {
  font-size: 1.6em;
  font-weight: 700;
  margin-bottom: 8px;
  color: #2c3e50;
  line-height: 1.3;
}

.courses-packages-comparison .package-duration {
  color: #7f8c8d;
  font-size: 1.1em;
  font-weight: 500;
  margin-bottom: 15px;
}

.courses-packages-comparison .package-description {
  color: #5a6c7d;
  margin-bottom: 25px;
  line-height: 1.6;
  font-size: 1em;
  flex-grow: 1;
}

.courses-packages-comparison .package-pricing {
  margin-bottom: 25px;
  padding: 20px 15px;
  background: rgba(52, 152, 219, 0.05);
  border-radius: 12px;
  border: 1px solid rgba(52, 152, 219, 0.1);
}

.courses-packages-comparison .full-price, 
.courses-packages-comparison .monthly-price {
  margin-bottom: 12px;
}

.courses-packages-comparison .price-label {
  display: block;
  font-size: 0.9em;
  color: #7f8c8d;
  margin-bottom: 5px;
  font-weight: 600;
  text-transform: normal;
  letter-spacing: 0.5px;
}

.courses-packages-comparison .price-amount {
  font-size: 2em;
  font-weight: 800;
  color: #2c3e50;
  line-height: 1;
}

.courses-packages-comparison .select-package-btn {
  background: linear-gradient(135deg, #E9F5D0 0%, #D6E7B2 100%);
  color: white;
  border: none;
  padding: 15px 30px;
  border-radius: 50px;
  font-size: 1.1em;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.3s ease;
  width: 100%;
  min-height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  box-shadow: 0 4px 15px rgba(52, 152, 219, 0.3);
  border: 2px solid #334F03;
}

.courses-packages-comparison .select-package-btn:hover {
  background: linear-gradient(135deg, #E9F5D0 0%, #D6E7B2 100%);
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(167, 247, 143, 0.4)));
}

.courses-packages-comparison .package-card.selected .select-package-btn {
  background: linear-gradient(135deg, #27ae60 0%, #219a52 100%);
  box-shadow: 0 4px 15px rgba(39, 174, 96, 0.3);
}

.courses-packages-comparison .package-card.selected .select-package-btn:hover {
  background: linear-gradient(135deg, #219a52 0%, #1e8449 100%);
  box-shadow: 0 6px 20px rgba(39, 174, 96, 0.4);
}

.courses-packages-comparison .package-card.featured .select-package-btn {
  background: linear-gradient(135deg, #e74c3c 0%, #c0392b 100%);
  box-shadow: 0 4px 15px rgba(231, 76, 60, 0.3);
  animation: pulse-button 2s ease-in-out infinite;
}

@keyframes pulse-button {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.05); }
}

.courses-packages-comparison .package-card.featured .select-package-btn:hover {
  background: linear-gradient(135deg, #c0392b 0%, #a93226 100%);
  animation: none;
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(231, 76, 60, 0.4);
}

/* Production ready - Debug styles removed */

/* --- Enrollment active overrides (updated: hide native variation UI & add-to-cart) --- */
/* We keep selects in DOM for form submission but hide the table + add to cart button for custom flow */
.courses-details-widget .enrollment-tabs.active .woo-product .variations_form .variations { display: none !important; }
.courses-details-widget .enrollment-tabs.active .woo-product .product .single_add_to_cart_button { display: none !important; }
/* Keep prices visible if needed; comment out if price should also be hidden */
/* .courses-details-widget .enrollment-tabs.active .woo-product .product .price,
.courses-details-widget .enrollment-tabs.active .woo-product .product .woocommerce-variation-price { display: block !important; }
.courses-details-widget .enrollment-tabs.active .woo-product .product .woocommerce-Price-amount { display: inline !important; } */

/* Optional: hide reset link if present */
.courses-details-widget .enrollment-tabs.active .woo-product .reset_variations { display: none !important; }

/* Fallback: when JS applies scw-show-vars, reveal native Woo variations table even if hidden by defaults */
.courses-details-widget .enrollment-tabs .woo-product.scw-show-vars .variations_form .variations { display: table !important; }
.courses-details-widget .enrollment-tabs.active .woo-product.scw-show-vars .variations_form .variations { display: table !important; }
/* When variation cards are present, force-hide native variations table regardless of scw-show-vars */
.courses-details-widget .enrollment-tabs.active .woo-product.scw-has-cards .variations_form .variations { display: none !important; }